html, body {height: 100%;}

.schmal, #bannerbild-schmal, #hmenue, #nach_oben, #h3_ersatz {display: none;}

#fotofenster {
 position: relative;
 width: 100%; 
 height: 100%;
 background-color: #000;
 text-align: center;
 padding: 20px;
 margin: 0;
 opacity: 0.1;
 transition: opacity 1.3s 0s;
 color: #fff;
 font-size: 1.2em; 
}	

#grossbild {
 max-height: 85%;
 width: auto;
 max-width: 85%;
} 

.symbole_gross {
 font-family: 'symbole';
 font-size: 2em;
 color: #D6CCCC;
} 

.symbole_gross a:link, .symbole_gross a:visited, .symbole_gross a:active {
 color: #D6CCCC;
 text-decoration: none;
}

.symbole_gross a:hover {color: #FCF103;} 

#schliessen {
 position: absolute;
 right: 30px;
 top: 30px;
} 

#vorher {
 position: absolute;
 left: 30px;
 top: 30%;
} 

#nachher {
 position: absolute;
 right: 30px;
 top: 30%;
}

#linkfenster {
 position: absolute;
 left: 33%;
 top: 28%;
 width: 33%; 
 min-width: 500px;
 min-height: 400px;
 background-color: #fff;
 box-shadow: 0 0 21px 16px #979894;
 text-align: center;
 padding-bottom: 30px;
 opacity: 0.1;
 z-index: 98;
 transition: opacity 0.8s 0s; 
} 

#fenster_schliessen {
 position: absolute;
 right: 3px;
 top: 3px;	
}

#linkfenster a:link, #linkfenster a:visited, #linkfenster a:active {
 color: #000;
 text-decoration: none;
 font-style: italic;
}

#linkfenster a:hover {text-decoration: underline;} 

#fenster_schliessen a:link, #fenster_schliessen a:visited, #fenster_schliessen a:active {
 color: #D6CCCC;
 text-decoration: none;
 font-style: normal;
}

#fenster_schliessen a:hover {color: #FCF103;} 

#linkfenster h4 {
 margin: 0 0 15px 0;	
 padding: 12px;
 background-color: #000;
 color: #fff;
} 

#linkfenster hr {
 margin: 15px 10px;
 background-color: #979894; 
 height: 2px;
 border: 0;
} 

#bk-logo {
 width: 60%;
 height: auto;
} 

#kaufen {
 position: fixed;
 right: 0;
 top: 45%;
 padding: 10px;
 color: #fff;
 background-color: #3C1406;
 background-image: linear-gradient(to bottom, #240A02 70%, #5F2617 100%);
 min-width: 90px;
 min-height: 90px;
 text-align: center;
 line-height: 1.4;
 opacity: 0.85;
 z-index: 99;
 font-weight: bold;
} 

#kaufen:hover {opacity: 1;}

#wk {
 font-family: 'symbole';
 font-size: 2.8em;
} 

#kaufen a:link, #navi_produkte a:link, #nach_oben a:link {
 color: #fff;
 text-decoration: none;
}

#kaufen a:visited, #navi_produkte a:visited, #nach_oben a:visited, #kaufen a:active, #navi_produkte a:active, #nach_oben a:active {
 color: #fff;
}

#kaufen a:hover, #nach_oben a:hover {
 color: #FCF103;
 text-decoration: none;
}

#navi_produkte a:hover {
 color: #FCF103;
 text-decoration: underline;
}

#container2, #container3 {
 position: relative;	
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 -webkit-align-items: flex-start;
 align-items: flex-start; 
 max-width: 1600px;
 margin: 5px auto 5px auto;
 background-color: #fff;
}

#ps_banner  {
 position: relative;
 width: 100%;
} 

#bannerbild-breit {
 width: 100%;
 height: auto;
}

#ps_ueberschrift {
 position: absolute;
 right: 15px;
 top: 15px;
 width: 45%;
 height: 100%;
 text-align: right;
 padding: 0 15px;
 color: #fff;
 background-color: transparent;
}

h3 {
 font-size: 1.2em;
 color: #fff;
 line-height: 1.4;
 font-weight: normal;
}

h1 {
 font-family: 'Crete Round';
 font-style: italic;
 margin: 0;
 padding-top: 5px;
 padding-bottom: 5px;
 font-size: 3em;
 color: #FCF103;
 font-weight: normal;
}

#navi_produkte {
 position: absolute;
 right: 25px;
 bottom: 15px;
 width: 70%;
 color: #fff;
 font-size: 1.5em;
 font-weight: normal;
 text-align: right;
} 

#container2 article {
 width: 49.5%;
 text-align: center;
 line-height: 1.5;
 color: #440800;
 margin: 20px 0 30px 5px;
 padding: 0 5px;
 display:-webkit-flex;
 display: flex;
 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;
 -webkit-justify-content: space-between;
 justify-content: space-between; 
 -webkit-align-items: flex-end;
 align-items: flex-end;
}

#container2 article h2 {
 font-family: 'Crete Round';
 font-style: italic;
 font-size: 1.6em;
 font-weight: normal;
 color: #440800;
 width: 100%;
 text-align: left;
 padding: 0;
 margin: 5px 0 10px 0;
}

.hauptbild-link {width: 50%;} 

.hauptbild {
  box-shadow: 3px 3px 5px #000;
  width: 100%;
  height: auto;
}

.artikeltext {
  position: relative;
  width: 49%;
  text-align: left;
}  

.artikeltext p {
  padding: 0 10px;
  margin: 0;
}

.thumbs {
  margin-top: 25px;
  margin-left: 5px;
  text-align: left;
}  

.thumbs img {
  margin: 0 6px;
  box-shadow: 1px 1px 2px #000;
} 

#image_extra {
  width: 30%;
  margin-top: 60px;
  margin-right: 25px;
  box-shadow: 3px 3px 5px #000;
}  

#text_ganze_breite {
  width: 65%;
  text-align: left;
  line-height: 1.5;
  color: #440800;
  padding: 10px 20px;
}  

#text_ganze_breite h4 {
  padding: 0;
  margin: 10px 0 5px 0;	
  font-size: 1.2em;
} 

#text_ganze_breite p {
  margin: 0;
  padding: 3px 0 5px 0;	
}  

/*-------------------------------------- 1 5 5 0 px --------------------------------*/

@media only screen and (max-width: 1550px) {
 #bannerbild-schmal, #nach_oben {display: none;}
 
 h1 {font-size: 2.6em;}
 h3 {font-size: 1em;}
 #navi_produkte {font-size: 1.3em;}
 
 #container2 { 
  -webkit-align-items: stretch;
  align-items: stretch; 
 } 
 #container2 article {
  -webkit-justify-content: center;
  justify-content: center; 
  -webkit-align-items: stretch;
  align-items: stretch; 
  box-shadow: 3px 3px 5px #E7E7E7;
 } 

 #container2 article h2 { 
  text-align: center;
 }
 .hauptbild-link {
  width: 60%;
  text-align: center;
 }
 .hauptbild {
  box-shadow: 1px 1px 2px #000;
 } 
 .artikeltext {
  width: 90%;
  padding-top: 15px;
  text-align: justify;
 }
 .artikeltext p {min-height: 9em;} 
 .thumbs {
   text-align: center;
   padding-bottom: 15px;
 }
}

/*-------------------------------------- 1 2 7 0 px --------------------------------*/

@media only screen and (max-width: 1270px) {
 h1 {font-size: 2.3em;}
 #navi_produkte {font-size: 1.1em;}
}

/*-------------------------------------- 1 1 0 0 px --------------------------------*/

@media only screen and (max-width: 1100px) {
 #ps_banner  {margin-bottom: 5px;} 
 
 h3 {display: none;}
 #h3_ersatz {
  display: block;
  width: 100%;
  font-size: 1.1em;
  color: #440800;
  font-weight: bold;
  margin: 15px 5px;
  line-height: 1.4;
 }
 #container2 article {
  width: 100%;
  box-shadow: 0 3px 5px #E7E7E7;
  margin: 15px 5px;
 }
 .hauptbild-link {width: 50%;}
 .artikeltext {
  width: 80%;
  text-align: left;
 }
 .artikeltext p {min-height: 0;}  
 #container3 { 
  -webkit-justify-content: center;
  justify-content: center; 
 } 
 #image_extra {display: none;}
 #text_ganze_breite {width: 80%;}  
}

/*-------------------------------------- 9 0 0 px --------------------------------*/

@media only screen and (max-width: 900px) {
 #fotofenster {
  height: auto;
  min-height: 100%;
 } 
 #grossbild {
  margin-top: 30px;	 
  width: 95%;
  max-width: 95%;  
  height: auto;
 }
 #schliessen {
  position: static;
  margin-top: 5px;
 } 
 #vorher {
  left: 20px;
  top: 25px;
 } 
 #nachher {
  right: 20px;
  top: 25px;
 }
 
 #linkfenster {
  left: 5%;
  top: 28%;
  width: 90%; 
  min-width: 200px;	 
  padding: 0;
  border-radius: 6px; 
 } 
 #linkfenster h4 {border-radius: 6px 6px 0 0;}
 .fensterinhalt {padding: 0 15px 15px 15px;}
 #fenster_schliessen {
  top: 46px;	
  color: #000;
 }
 #fenster_schliessen a:link, #fenster_schliessen a:visited, #fenster_schliessen a:active, fenster_schliessen a:hover {
  color: #000;
  text-decoration: none;
 }
 
 #container2 { 
  -webkit-justify-content: center;
  justify-content: center;
 }
 .hauptbild-link {width: 65%;}
 .hauptbild  {width: 85%;}
 .artikeltext, #text_ganze_breite {width: 90%;}
 .thumbs img {margin: 10px;} 

 #kaufen {
  top: 45%;
  padding: 10px 2px;
  min-width: 84px;
  min-height: 60px;
  border-radius: 4px 0 0 4px; 
 } 
 #wk {font-size: 2em;} 
 #pfeil {
  font-family: symbole; 
  font-size: 2em;
 } 	 
 #nach_oben {
  position: fixed;
  bottom: 20px;
  right: 0;
  min-width: 84px;
  color: #fff;
  background-color: #240A02;
  opacity: 0.85;
  z-index: 99;
  line-height: 1.0;
  padding: 10px;
  text-align: center;
  border-radius: 4px 0 0 4px; 
 }

 #ps_ueberschrift {display: none;} 
 #navi_produkte {display: none;}
 #bannerbild-breit {display: none;}
 #bannerbild-schmal {
  display: block;
  width: 100%;
  height: auto;
 }
 
 /* Hamburger-Menue, angeregt durch www.mediaevent.de, Trick mit Checkbox-Label */
 input#hamburg {display: none;}

 #hmenue {
  display: block;	 
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 99;
 }

 label.hamburg { 
  display: block;
  float: right;
  background: #fff; 
  width: 65px; 
  height: 44px; 
  margin-bottom: 6px;
  border-radius: 4px; 
  position: relative;
  opacity: 0.8;
 }

 .line { 
  position: absolute; 
  left: 10px;
  height: 4px; 
  width: 45px; 
  background: #000; 
  border-radius: 2px;
  display: block; 
  transition: 0.5s; 
  transform-origin: center; 
 }

 .line:nth-child(1) { top: 8px; }
 .line:nth-child(2) { top: 20px; }
 .line:nth-child(3) { top: 32px; }

 #hamburg:checked + .hamburg .line:nth-child(1){
  transform: translateY(12px) rotate(-45deg);
  -webkit-transform: translateY(12px) rotate(-45deg); 
 }

 #hamburg:checked + .hamburg .line:nth-child(2){
  opacity:0;
 }

 #hamburg:checked + .hamburg .line:nth-child(3){
  transform: translateY(-12px) rotate(45deg);
  -webkit-transform: translateY(-12px) rotate(45deg);
 }

 #hmenue ul { 
  height: auto; 
  max-height: 0; 
  overflow: hidden; 
  transition: 0.5s;
  text-align: right;
  font-size: 1.2em;
  font-weight: bold;
  background-color: #000;
  opacity: 0.86;
  padding: 0 10px;
 }

 #hamburg:checked ~ ul {
  max-height: 600px;
 }

 nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
 }
 
 nav ul li {
  padding-bottom: 12px;
 }

 nav ul li:nth-child(1) {
  padding-top: 12px;
 }

 nav a:link, nav a:visited, nav a:active {
  color: #fff;
  text-decoration: none;
 }

 nav a:hover {
  text-decoration: underline;
 }
 
 @media (orientation: landscape) {
  #kaufen {top: 25%;}	 
 }
 
}

/*-------------------------------------- 5 0 0 px --------------------------------*/

@media only screen and (max-width: 500px) {
 h1 {font-size: 1.7em;}
 .breit {display: none;} 
 .schmal {display: inline;}
 .hauptbild-link {width: 95%;}
 .hauptbild  {width: 100%;}
 .artikeltext, #text_ganze_breite {width: 100%;}
 #container2 article h2 {font-size: 1.2em;}
 #h3_ersatz {font-size: 1em;}
 #text_ganze_breite h4 {font-size: 1.1em;}
}

/*-------------------------------------- 3 7 0 px --------------------------------*/

@media only screen and (max-width: 370px) {
 label.hamburg { 
  width: 52px; 
  height: 36px; 
 }
 .line { 
  width: 36px; 
  left: 8px;
 }
 .line:nth-child(1) { top: 7px; }
 .line:nth-child(2) { top: 16px; }
 .line:nth-child(3) { top: 25px; } 
 #hamburg:checked + .hamburg .line:nth-child(1){
  transform: translateY(9px) rotate(-45deg);
  -webkit-transform: translateY(9px) rotate(-45deg); 
 }
 #hamburg:checked + .hamburg .line:nth-child(3){
  transform: translateY(-9px) rotate(45deg);
  -webkit-transform: translateY(-9px) rotate(45deg);
 }
 #hmenue ul { 
  font-size: 1em;
  font-weight: bold;
 }
 
  #kaufen {
  padding: 5px 2px;
  min-width: 74px;
  min-height: 50px;
 } 
 #wk {font-size: 1.8em;} 
 #pfeil {font-size: 1.8em;
 } 	 
 #nach_oben {min-width: 74px;} 
}

/*-------------------------------------- P R I N T --------------------------------*/

@media only print {
 #schliessen, #vorher, #nachher, #fuss_links, #fenster_schliessen, #kaufen, #nach_oben,  #ps_ueberschrift, #navi_produkte, 
 #bannerbild-breit, #hmenue, #image_extra {display: none;}
 
 #linkfenster {
  left: 5%;
  top: 28%;
  width: 90%; 
  min-width: 200px;	 
  padding: 0;
 }
 #linkfenster h4 {
  background-color: #fff;
  color: #000;
 }  
 .fensterinhalt {padding: 0 15px 15px 15px;}
 
 #container2 { 
  -webkit-justify-content: center;
  justify-content: center;
 }
 #container2 article {
  -webkit-justify-content: center;
  justify-content: center; 
  width: 100%;
  margin: 15px 5px;
 }
 .hauptbild-link {width: 40%;}
 .hauptbild {
  width: 70%;
  margin-bottom: 15px;
 }
 .artikeltext, #text_ganze_breite {width: 100%;}
 #text_ganze_breite {margin-top: 30px;} 
 .thumbs img {margin: 10px;} 
 h2 {text-align: center !important;} 
 .thumbs {text-align: center;}

 #bannerbild-schmal {
  display: block;
  width: 60%;
  height: auto;
  margin: 0 auto;
 }
}