/*************************************************+
Global
*************************************/
article.theorie {
line-height: 180%;
letter-spacing: 0.9px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased !important;
  -moz-font-smoothing: antialiased !important;
  text-rendering: optimizelegibility !important;
  width: 46rem;
  display: block;
  margin: auto;
}

article.theorie p:first-of-type:first-letter {
font-size: 3.5em;
float: left;
margin-right: 0.1em;
margin-top: 0.2em;
font-style: normal;	
color : #a93000;
}

@media screen and (max-width: 49rem) {
article.theorie {
  width: 95%;
}
}

div.rechner {
max-width: 45rem;
margin: 0 auto;
margin-top: 1em;
}

div.rechner .subheading {
text-transform: uppercase;
text-align: center;
display: block;
margin-top: 0.5em;
color : #a93000;
font-weight: bold;
}

div.rechner .flex_container50, div.rechner .flex_container_pH {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
padding: 0.3rem;
}

div.flex_container50 .left {
 -webkit-flex: 1;
 flex: 1;	 
 text-align: right;
 margin: 0;
 -webkit-align-self: flex-start;
 align-self: flex-start;
}


div.flex_container50 .right {
 -webkit-flex: 1;
 flex: 1;
 display: inline-block; 
 text-align: left;
 margin: 0 0 0 0.3em;
}


div.flex_container_pH .left {
 -webkit-flex: 1.8;
 flex: 1.8;	 
 text-align: right;
 margin: 0;
 -webkit-align-self: flex-end;
 align-self: flex-end;
}

div.flex_container_pH .middle {
 -webkit-flex: 0.9;
 flex: 0.9;
 display: inline-block; 
 text-align: center;
 margin: 0;
}

div.flex_container_pH .right {
 -webkit-flex: 1.1;
 flex: 1.1;
 display: inline-block; 
 text-align: left;
 margin: 0;
}

div.sternchentext {
margin: 0.5rem 0 1.5rem 0;
font-size: 0.8rem;
}

/* Bilder */
#tempco2, #ibuformel, #ibudiagramm, #tabionenprofil {
max-width: 100%;
}
/*************************************************+
Refraktorechner
*************************************/

/*************************************************+
Lagerverwaltung
*************************************/

.lager {
max-width: 34em;
margin: 0 auto;
}

.lager a  {
color: #333;
font-size: 22px;    
}

.lager a img {
margin-left: 0.3em;
margin-top: 0.2em;
}

.lager .malz, .lager .hopfen, .lager .sonst {
border-left: 5px solid #a93000;
padding: 0 0 0 10px;
margin-bottom: -10px;
font-size: 150%;
}

.flex_container_lager {
width: 100%;
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: nowrap;
padding: 0.2rem;
text-align: left;
border-bottom: 1px solid #555;
}

.flex_container_lager div.erste {
width: 260px;
}

.flex_container_lager div.zweitebisvierte {
width: 282px;
display: flex;
flex-wrap: nowrap;

}

.flex_container_lager div.zweitebisvierte div.zweite {
width: 114px;
}

.flex_container_lager div.zweitebisvierte div.dritte {
width: 80px;
}

.flex_container_lager div.zweitebisvierte div.vierte {
width: 80px;
text-align:left;
}

.lager input[type=text]
 {
height: 25px;
}

.lager input[type=text].kurz {
 width: 60px;
}

.lager input[type=text].med {
 width: 100%;
}

.lager input[type=text].lang {
 width: 260px;
}

/* styling */
.lager select {
  border: 1px solid #bbb;
  color: #333;
  box-shadow:inset 0 1px 2px #ddd;
  border-radius:3px;
  background-color:white;
  background-image:url(./bilder/selectboxarrow.png);
  background-position: right;
  background-repeat: no-repeat;
  width: 50px;
}

@media screen and (max-width:590px) {
.lager {
max-width: 24em;
}
.flex_container_lager {
width: 100%;
flex-direction: column;
}
.flex_container_lager div.erste {
width: 100%;
}
.lager input[type=text].lang {
 width: 100%;
}

.flex_container_lager div.zweitebisvierte div.vierte {
width: 80px;
text-align:left;
margin-left: 0.1rem;
}
}

/*************************************************+
Sudhausausbeute
*************************************/
#select_sha {
width: 4.5em;
height: 1.7em;
}

/*************************************************+
Malzfarben-Konverter
*************************************/
#select_malzfarbe {
width: 4.5em;
height: 1.7em;
}

#malzfarbe_eing {
text-align: center;
color : #333;
}

#malzfarbe_erg {
  margin-top: 1.5em;
text-align: center;
font-size: 1.5em;
font-weight: bolder;
color : #555;

}

#icon_malzfarbe {
  width: 12rem;
  margin-bottom: 2em;
  
}

#icon_malzfarbe2 {
  width: 4rem;
  margin-top: 1em;
  
}


/*************************************************+
IBU-Rechner
*************************************/
.ibu_rechner {
max-width: 45rem;
margin: 0 auto;
margin-top: 1em;
}

.flex_container_ibu1 {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
padding: 0.3rem;
}

.flex_container_ibu1 .left {
 -webkit-flex: 1.8;
 flex: 1.8;	 
 text-align: right;
 margin: 0;
 -webkit-align-self: flex-start;
 align-self: flex-start;
}

.flex_container_ibu1 .right {
 -webkit-flex: 1;
 flex: 1;
 display: inline-block; 
 text-align: left;
 margin: 0 0 0 0.3em;
}

.flex_container_ibu2 {
width: 100%;
display: -webkit-flex; /* Safari */
-webkit-flex-wrap: wrap; /* Safari 6.1+ */
display: flex;
flex-wrap: nowrap;
padding: 0.2rem;
border-top: 1px solid #c3c3c3;
text-align: center;
}

.ibu_rechner select {
width: 4.5em;
height: 1.7em;
}

.flex_container_ibu1 select {
  width: 3.8rem;
}

.flex_container_ibu2 select {
  width: 4.1rem;
}

.ibu2_wrapper div.head {
border-top: none;
}

.ibu2_wrapper div.head * {
font-weight: bold;
align-self: flex-end;
}

.flex_container_ibu2 div.erste {
flex: 1;
text-align: right;
margin-right: 0.3rem;
}

.flex_container_ibu2 div.letzte {
flex: 1;
text-align:left;
margin-left: 0.3rem;
}

.flex_container_ibu2 div.zweitedritte {
width: 320px;
display: flex;
flex-wrap: nowrap;
}

.flex_container_ibu2 div.zweite {
width: 80px;
}

.flex_container_ibu2 div.dritte {
width: 240px;
display: flex;
flex-wrap: nowrap;
}

.flex_container_ibu2 div.dritte div {
width: 80px;
}


#ibu_tabelle {
max-width: 25rem;
margin: 0 auto;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

#ibu_tabelle .caption {
text-align: left;
font-weight: bold;
font-size: 0.9rem;
line-height: 140%;
}

#ibu_tabelle > div {
display: -webkit-flex;
display: flex;
-webkit-align-items: flex-end;
align-items: flex-end;
padding: 0.1rem;
}

#ibu_tabelle > div div  {
 -webkit-flex: 1;
 flex: 1;	 
 text-align: center;
 background-color: #fafafa;
}

#ibu_tabelle div.head  {
 background-color: #eaeaea;
}


@media screen and (max-width:600px) {
.flex_container_ibu2 div.dritte {
width: 80px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
.flex_container_ibu2 div.zweitedritte {
width: 160px;
display: flex;
text-align: left;
}
}

@media screen and (max-width:350px) {
.flex_container_ibu2 div.zweitedritte {
width: 80px;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}
}

/*************************************************+
Bierfarbe 
*************************************/

#toolsbierfarbe select {
width: 3.0em;
height: 1.7em;
}

#toolsbierfarbe input {
width: 3.5em;
}

#wuerzefarbeergebnis {
  font-weight: bold;
}

img.ebcskala_bierfarbenrechner {
  width: 90%;
  
}

img.ergebnisBierfarbe {
  width: 1.0em;
  margin-left: 0.3em;
  margin-bottom: -0.2em;
}

@media screen and (max-width:600px) {
img.ebcskala_bierfarbenrechner {
  width: 100%;
}
}

/*************************************************+
Spunddruckrechner
*************************************/

#co2_tabelle {
max-width: 30rem;
margin: 0 auto;
margin-top: 1.5em;
margin-bottom: 1.5em;
}

#co2_tabelle .caption {
text-align: left;
font-weight: bold;
font-size: 0.9rem;
line-height: 140%;
}

#co2_tabelle > div {
display: -webkit-flex;
display: flex;
-webkit-align-items: stretch;
align-items: stretch;
padding: 0.1rem;
}

#co2_tabelle > div div  {
 -webkit-flex: 1;
 flex: 1;	 
 text-align: center;
 background-color: #fafafa;
 padding: 0.3em;
}

#co2_tabelle div.head  {
 background-color: #eaeaea;
 font-weight: bold;
}


#select_zq  {
width: 13em;
}

#traubenzuckerloesung select, #haushaltszuckerloesung select  {
width: 6em;
}

/*************************************************+
Wasserrechner
*************************************/

div.wasser {
max-width: 35rem;
}

div.wasser select {
width: 5.5em;
}

div.wasser select.saeure {
width: 3.5em;
}

div.wasser select.lang {
width: 11rem;
}

div.wasser div.flex_container_pH input[type=text] {
 width: 3em;
 height: 1.5em;
}
#ph_hinweis {
font-size: 0.8rem;
margin: 0.1rem 0 0.5rem 0.5rem;
line-height: 1.0rem;
}

div.wasser_wrapper {
display: -webkit-flex;
display: flex;
justify-content: -webkit-space-between;
justify-content: space-between;
padding: 0.4rem 0.4rem 0.4rem 0.1rem;
border-radius:5px;
background-color: #DED6AB;
font-weight: bold;
font-size: 0.9rem;
margin-top: 0.5rem;
}

div.wasser_wrapper div.links {
padding-left: 0.5rem;
}

div.wasser_wrapper div.rechts {
font-size: 1.5rem;
}

div.wasser_wrapper img.pfeilrechts {
width: 0.5rem;    
}  

div.wasser_wrapper img.pfeilunten {
width: 0.9rem; 
height: 0.7rem;   
}   



div.wasser .wassermengen {
font-size: 0.8rem;
font-weight: bold;
margin-left: 0.5rem;
}

div.wasser div.info {
 font-size: 0.9rem;
}

div.wasser input.submit {
 display: block;
 margin: 0 auto;
 margin-top: 0.8rem;
 margin-bottom: 0.8rem;	
}

#bericht {
  border: solid thin;
  border-color: #8F8F8F;
  background-color: #fff; 
  max-width: 25rem;
  position: relative;
  margin-top: 3rem;
  border-radius: 10px;
  padding: 1.6rem 1rem 1.6rem 1rem;
}

#bericht img {
  width: 6rem;
  opacity: 0.7;
  position: absolute;
  right: -2rem;
  top: -2rem;
}

/*media queries  */
@media screen and (max-width: 25rem) {
#bericht img {
  width: 3rem;
  right: -1rem;
  top: -1rem;
  
}
}


#bericht div.heading {
  color: #7eab38;  
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 1.3rem;
}

#bericht div.flex {
display: -webkit-flex;
display: flex;
margin-top: 1rem;
}

#bericht div.flex > .links {
color: #6D6D6E;
font-size: 15px; 
font-weight: bold;
-webkit-flex: 1;
flex: 1;
}

#bericht .ph {
margin-top: 0.7rem;
}

#bericht .phwert {
font-size: 1.8rem;
}



#bericht div.flex > .rechts {
 border-left: 1px solid #a93000;
 -webkit-flex: 1.5;
 flex: 1.5;	
}

#bericht div.ionenprofil {
  color: #a93000;
  font-size: 1.8rem;
  font-weight: bold; 
  margin-left:0.4rem;
  line-height: 1.7rem;  
}

#bericht div.flex_ionen {
display: -webkit-flex;
display: flex;
color: #6D6D6E;
font-size: 15px; 
font-weight: bold;
margin-left:0.4rem;
margin-top: 0.4rem;
-webkit-align-items: flex-end;
align-items: flex-end;
}

#bericht div.flex_ionen .links {
-webkit-flex: 1;
flex: 1;
-webkit-align-self: flex-start;
align-self: flex-start;
}

#bericht div.flex_ionen .rechts {
-webkit-flex: 1.2;
flex: 1.2;	
margin: 0 0 0 0.3em;
}


#wasserdetailsbutton {
 max-width: 26rem; 
 margin: 0 auto;
 text-align: right;
 font-size: 0.8rem;
 font-weight: bold;
 color: #6D6D6E;
}


#wasserdetailsbutton:hover {
 cursor: pointer;
 color: #222526;	
}	






#detailstext {
 position: absolute;
 left:230px; top: 255px; 
}

#wasserdetailscontainer {
 margin-top: 50px;
 
}

#wasserdetailtabelle {
  border: solid thin;
  border-collapse: collapse;
  font-family : arial;
  font-size: 14px;
  color: #222526;
}
#wasserdetailtabelle caption {
  padding-bottom: 5px;
  text-align: left;
  font-weight: bold;
}
#wasserdetailtabelle th,
#wasserdetailtabelle td {
  border: solid thin;
  padding: 12px 12px;
}
#wasserdetailtabelle td {
  white-space: nowrap;
}

#wasserdetailtabelle td:first-child  {
text-align: right;
}

#wasserdetailtabelle th {
  font-weight: normal;
}
#wasserdetailtabelle td {
  border-style: none solid;
  vertical-align: middle;
  text-align: center;
}
#wasserdetailtabelle th {
  padding: 5px;
  vertical-align: middle;
  text-align: center;
}

sup.offset {
position: relative;
left: -0.3rem;
top: -0.1rem;
}

/**********************************************************
Experiment Refraktometer************************************/

#exp_refraktometer_art li {
 margin-left: 1em;	

}


#exp_refraktometer_img {
 max-width: 100%;
}


/********************************************************/

/**********************************************************
Experiment Maische-pH, W3470************************************/


#exp_refraktometer_art li,  {
 margin-left: 1em;	
}

#exp_maischph_art h2, #exp_w3470_art h2 {
 font-family: ;
}

#exp_maischph_art img:not(.nachoben):not(.icon), #exp_w3470_art img:not(.nachoben):not(.icon) {
 max-width: 100%;
 border-radius: 0.4rem;
 box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.3);
}

#exp_maischph_art figcaption, #exp_w3470_art figcaption  {
 font-size: 1.0em;
 line-height: 140%;
 margin-top: 0.5em;
 margin-bottom: 0.9em;
}

#exp_maischph_art ul, #exp_w3470_art ul  {
 margin-top: 0.4em;
 margin-bottom: 0.4em;
}

#exp_maischph_art li, #exp_w3470_art li  {
 margin-bottom: 0.4em;
}

#exp_maischph_art h2, #exp_w3470_art h2  {
line-height: 130%;
}

div.edit {
font-size: 0.8em;  
font-style: italic;
margin-top: 1em;
margin-bottom: 1.5em;
}


/********************************************************/