* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* ---- button ---- */
.button { color: white; font-family: "PT Sans Narrow", "Trebuchet MS", SunSans-Regular, Helvetica, Arial, sans-serif; font-style: normal; font-weight: lighter; display: inline-block; border: none; border-radius: 0px; text-shadow: 0 1px white; cursor: pointer; }
.button:hover   { color: white; background-color: #41494d; text-shadow: 0 1px hsla(0, 0%, 100%, 0.5)   }
.button:active, .button.is-checked   { background-color: #41494d }
.button.is-checked { color: white; text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8); }
.button:active { box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8); }
.button-sorts    {  font-family: "PT Sans Narrow", "Trebuchet MS", SunSans-Regular, Helvetica, Arial, sans-serif; font-style: normal; font-weight: lighter; color: #fff; background-color: transparent; cursor: pointer; display: inline-block; border: none}
.button-sorts:hover    { color: #d3d3d3; border: 0 transparent; text-shadow: 0 1px hsla(0, 0%, 100%, 0.5)    }
.button_no, .button_no-sorts  { display: inline-block; border: none }

/* ---- button-group ---- */
.button-group:after, .button-group-sorts:after { content: ''; display: block; clear: both; }
.button-group .button { border-radius: 0; margin-left: 0; margin-right: 0px; }
.button-group-sorts   { margin-right: 0; margin-left: 0; width: 100%; border-top: 1px solid #fff; border-radius: 0  }
/*.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; } .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; } */

/* ---- isotope ---- */
.isotope {}
/* clear fix */
.isotope:after { content: ''; display: block; clear: both; }

/* ---- .element-item ---- */
.element-item  { color: #000000; position: relative; float: left; border-radius: 1px }
.element-item > * { margin: 0; padding: 0; }
.element-item .mitte     { color: #fff; font-weight: bold; text-align: center; position: relativ; }
.element-item .size    { }
.element-item .number     { }
.element-item .name      { font-weight: bold; position: absolute; }
.element-item .symbol      { color: #fff; font-weight: bold; text-align: center; position: relativ; }
.element-item .category  { font-weight: bold; position: absolute; }

.element-item.haus1	{ border-style: solid; border-width: 0px; border-color: #fff #999 #666 #fff; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); }
.element-item.haus2 { background: #afafaf; border-style: solid; border-width: 0px; border-color: #fff #999 #666 #fff; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); }
.element-item.haus3	{ background: #969696; border-style: solid; border-width: 0px; border-color: #fff #999 #666 #fff; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); }
.element-item.haus4	{ background: #7d7d7d; border-style: solid; border-width: 0px; border-color: #fff #999 #666 #fff; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); }
.element-item.haus1:hover, .element-item.haus2:hover, .element-item.haus3:hover, .element-item.haus4:hover	  { -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; transition: 0.2s ease-out; background: #41494d; cursor: pointer; border-style: solid; border-width: 0px; border-color: #000 #fff #fff #333; background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) ); }

/* Änderung der Größen */
@media all and (max-width: 900px) { 
.button { padding: 5px 10px; font-size: 13px; margin-bottom: 5px; }
.button-sorts    {  font-size: 13px; padding: 0.5em 0.5em; }
.button_no, .button_no-sorts  { font-size: 13px; padding: 0.5em 0; }

.element-item  { margin-top: 5px; margin-right: 5px; padding: 10px; width: 100px; height: 106px; }
.element-item .mitte     { font-size: 17px; line-height: 20px; margin-bottom: 2px; padding-top: 25px; }
.element-item .name      { font-size: 12px; top: 82px; right: 5px }
.element-item .symbol      { font-size: 17px; line-height: 20px; margin-top: -3px; }
.element-item .category  { font-size: 12px; top: 5px; right: 5px }

#name_zusatz { line-height: 12px; text-align: right !important; top: 82px !important; }
#name_zusatz_text { font-size: 9px !important; line-height: 9px; }

#breite { width: 90px; }
#breite_auswahl { width: 23% !important; }
#breite_auswahl_2 { width: 23% !important; }
}

@media all and (min-width: 900px) { 
.button { padding: 8px 13px; font-size: 16px; margin-bottom: 5px; margin-top: 5px; }
.button-sorts    {  font-size: 16px; padding: 0.5em 0.5em; }
.button_no, .button_no-sorts  { font-size: 16px; padding: 0.5em 0; }

.element-item  { margin-top: 5px; margin-right: 5px; padding: 10px; width: 150px; height: 125px; }
.element-item .mitte     { font-size: 20px; line-height: 20px; margin-bottom: 2px; padding-top: 32px; }
.element-item .name      { font-size: 14px; top: 100px; right: 5px }
.element-item .symbol      { font-size: 20px; line-height: 20px; margin-top: -3px; }
.element-item .category  { font-size: 14px; top: 5px; right: 5px }

#name_zusatz { text-align: right !important; top: 85px !important; }
#name_zusatz_text { font-size: 11px !important; line-height: 11px; }

#breite { width: 110px; }
#breite_auswahl { width: 24% !important; }
#breite_auswahl_2 { width: 24% !important; }
}

@media all and (max-width: 400px) { 
.element-item .mitte     { font-size: 13px; line-height: 20px; margin-bottom: 2px; padding-top: 25px; }
.element-item .symbol      { font-size: 13px; line-height: 20px; margin-top: -3px; }
}