/* Mobil 2025 */

/* Grundeinstellungen */





html {
  scroll-behavior: smooth;
}

body{ 
    
    hyphens: auto;
    font-family:  sans-serif;
   overflow-x: hidden; overflow-y: scroll;
}

#clear {
    clear: both;
    padding: 20px;
  }


.clear {
    clear: both;
    padding: 20px;
  }



.fake {
    content-visibility: auto;
  }


h1 { font-size: 150%;
    color: #072b88;
    font-weight: bold;
    padding-top: 25px;
 }

#rahmen { width: 95%;
  margin: auto;
  background-color: #ffffff;
  
 }









/* Texte */


.weiter {
    padding: 5px 20px 5px 20px;
      background-color:#EBEBEB;
      width: 60px;
      float: right;
      text-align: center;
      margin-top: 10px; 
      cursor: pointer; 
      font-size: 20px;
}
  

.weiter a {
    text-decoration: none;
    color: #666666;  
}

.weiter a:hover {
    text-decoration: underline;
    color: #666666;  
}


.inhaltrest { 
    
  font-size: 20px;
  width: 80%;
  margin: auto;
   color: #666666;
   padding-top: 350px;
  hyphens: none;
}
}

/*!
 navi
 */

/*!
 navi
 */

 ul#navigation ul li a {
    padding: 0px; 
   color: #ffffff; 
    text-decoration: none; 
   display: inline-block; 
   border: 0 none; 
    float: left; 
    clear: both; 
    width: 200px; 
   visibility: hidden;
   height: 0px;
   width: 0px;
}


ul#navigation li {
       display: inline-block;
   
   margin: 0;
   padding: 0;
   position: relative;
   width: 100%;
}

ul#navigation li a {
   
   color: #ffffff;
   text-shadow: 0px 0px 0px #ffffff;
       background-color: #ffffff;
}

ul#navigation li a:hover {
   
   color:#092E87;
   
   background-color:#ffffff; 
}




nav { 
   display: none;
   margin-top: 0px!important; 
  padding: 0px!important; 
}

nav a{
   color:#ffffff;
   text-decoration: none;
}

nav a:hover{
   color:#092E87;
   text-decoration: none;
   font-weight: bold;
}

nav ul {
    padding: 0px;
    margin: 0px;
    width: 100%;
   flex-direction: row; 
}

nav ul li {
   list-style: none;
   padding: 20px 10px;
   border: 1px solid #ffffff;
   background: #ffffff; 
   
}




/* Anpassungen Checkbox+Label (Button) */

input#open-menu {
   display: none;
}

input[type=checkbox]:checked ~ nav {
   display: block;
}
   
label.open-menu-label {
    
   color:#ffffff;
   padding: 0px 0px;
   border: 0px;
   display: block;

}



#navigation img {
    transition: transform 1.5s ease;
 }

 #navigation img:hover {
    transform: rotate(90deg);
    
 }



/* Navigation oben */

#kopfnavi {position: fixed;
width: 100%;
   z-index: 10;
   text-align: left;
   left: 52px;
   
}

#nav {z-index: 10;
   position:relative;
   
   margin:0 auto;
   margin-top:170px;
   padding:10px;
}

ul#navigation {
   margin:0px auto;
   position:relative;
   
  
}

ul#navigation li {
    display: inherit;;
   font-size:100%;
   left: -50px;
   top: -50px;
   margin:0;
   padding:0;
   background-color: #EBEBEB;
   position:relative;
   min-width: 200px;
width: 100%;
}

ul#navigation li a {
   padding: 20px 55px;
   color:#092E87;
   z-index: 20;
   text-decoration:none;
   display:inline-block;
   background-color: #EBEBEB;
   min-width: 200px;
  width: 100%;
  
   
}

ul#navigation li a:hover {

   color:#092E87;
   
}

ul#navigation li a.first {
   border-left: 0 none;
}

ul#navigation li a.last {
   border-right: 0 none;
}

ul#navigation li:hover > a {
   color:#092E87!important;
   text-decoration: underline;
}


/* Drop-Down Navigation oben */

ul#navigation li:hover > ul
{

   visibility:visible;
   opacity:1;
}

ul#navigation ul, ul#navigation ul li ul {
   list-style: none;
   margin: 0;
   padding: 0;
   visibility:hidden;
   opacity:0;
   position: absolute;
   z-index: 99999;
   width:200px;
   
   

   -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
   -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
   -o-transition:opacity 0.2s linear, visibility 0.2s linear;
   transition:opacity 0.2s linear, visibility 0.2s linear;
}

ul#navigation ul {
   top: 37px;
   left: 1px;
}

ul#navigation ul li ul {
   top: 0;
   left: 500px; /* strong related to width:180px; from above */
}

ul#navigation ul li {
   clear:both;
   
   border:0 none;
   ;
}

ul#navigation ul li a {
   
   padding:7px 15px;
   color:#ffffff;
   
   text-decoration:none;
   display:inline-block;
   border:0 none;
   float:left;
   clear:both;
  width:200px;
}

#navigation a:hover {
   color:#ffffff!important;
}


#navigation {
   font-weight: bold;
  position: fixed;
  z-index: 100;
   font-size: 25px;
  width: 100%;
  
}








/* Ueberschriften */

.ue1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    color: #072b88;
    line-height: 50px;
  }



.frei {
    width: 100%;
    height: 200px;
    
  }

#kopf { 
    position: fixed;
    width: 100%;
    height: 200px;
    top: 0px;
    left: 0px;
    z-index: 7; 
    text-align: center;
    background-color: #EBEBEB;
    padding-top: 50px;
    padding-bottom: 50px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    background-image: url("../pic/back-kopf.png");
}


.detext {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #ffffff;
    padding: 10px;
    background-color: #EBEBEB;
    display: none;
  }







#logobox { 
    
  top:50%;
  position: sticky;
background-color: #ffffff;
width: 100%;    

}



#adresse {  
    
  width: 100% !important;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: 500;
  color: #666666;
  width: 100%;
  text-align: center;
  position: fixed;
  line-height: 35px;
  padding-top: 7px;
  padding-bottom: 7px;
  top: 175px;
  z-index: 50;

}



#adresse a {  
    
  
color: #666666;
text-decoration: none;

}

#adresse a:hover {  
    
  
color: #666666;
text-decoration: underline;

}



#zitatbox { 
    position: absolute;
  right: 0px;
  
  padding: 10px;
  
  margin: auto;
}


#zitat { 
    
    width: 80%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 200%;
  color: #666666;
  text-align: left;
  margin: auto;
  hyphens: none;
  position: relative;
 padding: 50px 0px 50px 0px;

}

#zitat a { 
    
    text-decoration: none;
}


#zitat a:hover { 
    
    text-decoration: none;
}



.zitat p:first-letter {
    color: #1cb3e6;
    font-size: 40px;
    margin-right: 1px;
}

.autor {
    font-size: 14px;
    color: #666666;
    line-height: 30px;
  }





#box2 { 
    
 margin: auto;
  width: 100%;
  min-height: 55vh;
  height: 250px;
  position: relative;
  top: 250px;
    
 
  
}




#box3 { 
    
  margin: auto;
  width: 100%;
  height: 75vh; 
  position: relative;

}







#box4 { 
    
  margin: auto;
  width: 100%;
  
  
    height: 75vh; 
    padding-top: 100px;
}


#box5 { 
    
  margin: auto;
  width: 100%;
  
  
    height: 75vh; 
    padding-top: 100px;
}


#box6 { 
    
  margin: auto;
  width: 100%;
  
  
    height: 75vh; 
    padding-top: 100px;
}


#box7 { 
    
  margin: auto;
  width: 100%;
  
  
    height: 75vh; 
    padding-top: 100px;
}

#kontakt {    width: 100%;
    min-height: 50%;
  
  height:50%; 
	background-color: rgb(7, 43, 136);
	z-index: 3;
}

#kontakthaupt {    width: 80%;
    height: auto; ;
	position: absolute; 
top: 140%; 
padding: 15px; 
left: 100px; 
z-index: 3;
}

#kontaktoben {    width: 100%;
    height: 60%; ;
	position: relative; 
z-index: 3;

}

#kontaktunten {    width: 100%;
    height: 40%; ;
	position: absolute;
background-color: #ffffff;
z-index: 3;
padding-top: 50px;
}

#kontaktbox {
    
    left: 100px;
    position: absolute;
    top: 50%;
    width: 80%;
    height: auto;
    z-index: 3;
}

#kontaktlinks { float: left; }
#kontaktrechts { float: right; }
#kontaktlinks, #kontaktrechts { width: 30%; }
#kontaktmitte { margin: 0 30%; }


.kontaktinfo { font-size: 30px; font-weight: bold; color: #000000 }
.kontakttel { font-size: 30px; font-weight: bold; color: rgb(7, 43, 136) }
.kontakttel a{  color: rgb(7, 43, 136);  text-decoration: none;}
.kontakttel a:hover{  font-weight: bold; color: rgb(7, 43, 136); text-decoration: underline; }


.kontaktmail { font-size: 30px; font-weight: bold; color: #000000 }
.kontaktmail a{ font-size: 30px; font-weight: bold; color: #000000 ;  text-decoration: none}
.kontaktmail a:hover{ font-size: 30px; font-weight: bold; color: #000000; text-decoration: underline }





.mitglied { 
    
    width: 100%;
margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}

.glashandbuch { 
    
    width: 100%;
margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    background-color: #f0f1f5;
}


.glashandbuch img { 
    
    width: 99%;
height: auto;
   
}




.glashandbuchtext { 
  font-size: 30px;
  color: #666666;  
    width: 100%;
margin: auto;
    
   
    text-align: left;
    
}


.glashandbuchtext a { 
  text-decoration: none;
  color: #666666;  
    
    
}

.glashandbuchtext a:hover { 
  text-decoration: underline;
  color: #666666;  
    
    
}


.glasnews { 
    
    width: 100%;
margin: auto;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
    background-color: #ffffff;
}

.glasnews img { 
    
    width: 99%;
height: auto;
   
}


.glasnewstext { 
  font-size: 30px;
  color: #666666;  
    width: 100%;
margin: auto;
    
   
    text-align: left;
    
}

.glasnewstext a { 
  text-decoration: none;
  color: #666666;  
    
    
}

.glasnewstext a:hover { 
  text-decoration: underline;
  color: #666666;  
    
    
}

/* Listen */




.listenoben { 
    width: 100%;
     float: left;
    
    
}


.listenunten  { 
    
    width: 100%;

    
}


.listenuntenhist  { 
    
    width: 500px;
margin: auto;
    
}




 /* Style the button  */
.collapsible {
  background-color: #ffffff;
  color: #666666;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border-style: solid;
  border-color: #EBEBEB;
  border-width: 0px 0px 1px 0px;
  text-align: left;
  outline: none;
  font-size: 25px;
  float: right;
}


/*  */
.active, .collapsible:hover {
  background-color: #EBEBEB;
}

/* Style  */
.content {
  padding: 0px;
  display: none;
  overflow: hidden;
  width: 500px;
  margin: auto;
} 

/* Nur für Firefox 
@-moz-document url-prefix() {
  .content {
    width: 450px;
  }

.slide {
  max-width: 450px;
  width: 450px;
  
}

.slides {
  display: flex;
  width: calc(8 * 450px);
  
}

.slider input[id$="-1"]:checked ~ .slides { transform: translateX(0); }
.slider input[id$="-2"]:checked ~ .slides { transform: translateX(-450px); }
.slider input[id$="-3"]:checked ~ .slides { transform: translateX(-900px); }
.slider input[id$="-4"]:checked ~ .slides { transform: translateX(-1350px); }
.slider input[id$="-5"]:checked ~ .slides { transform: translateX(-1800px); }
.slider input[id$="-6"]:checked ~ .slides { transform: translateX(-2250px); }
.slider input[id$="-7"]:checked ~ .slides { transform: translateX(-2700px); }
.slider input[id$="-8"]:checked ~ .slides { transform: translateX(-3150px); }




}


.content.firefox {
      width: 450px;
      background-color: lightblue;
    }


*/



.content img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0px 0px 15px 15px;
  max-height: 400px;
  padding-bottom: 25px;
}

.contentbox {
  padding: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
  font-size: 20px;
  color: #666666;
  line-height: 30px;
  float: right;
  border-style: solid;
  border-color: #EBEBEB;
  border-width: 0px 0px 1px

} 


/* Style  button  */
.collapsibleleft {
  background-color: #ffffff;
  color: #666666;
  cursor: pointer;
  padding: 20px;
  width: 500px;
  border-style: solid;
  border-color: #EBEBEB;
  border-width: 0px 0px 1px 0px;
  text-align: left;
  outline: none;
  font-size: 17px;
  float: left;
}

/* background color button */
.active, .collapsibleleft:hover {
  background-color: #EBEBEB;
}




.contentsicht {
  padding: 0px;
  
  overflow: hidden;
  width: 500px;
  float: right;
} 



.contentboxsicht {
  padding: 0px;
  padding-bottom: 10px;
  overflow: hidden;
  font-size: 17px;
  color: #666666;
  line-height: 30px;
  float: right;
  
} 


.contentsichtleft {
  padding: 0px;
  display: unset;
  overflow: hidden;
  width: 500px;
  float: left;
} 



/* Slider in der Detailansicht */


.slider {
  position: relative;
  width: 100%;
  height: 400px;
  margin: auto;
  overflow: hidden;
}

input[type="radio"] {
  display: none;
}

.slides {
  display: flex;
  width: calc(8 * 500px);
  transition: transform 0.5s ease;
}

.slide {
  max-width: 500px;
  width: 500px;
  height: auto;
  
  max-height: 400px;
  flex-shrink: 0;
}

.slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0px 0px 15px 15px;
  max-height: 400px;
  padding-bottom: 25px;
}

/* Positionierung für alle Slider: */
.slider input[id$="-1"]:checked ~ .slides { transform: translateX(0); }
.slider input[id$="-2"]:checked ~ .slides { transform: translateX(-500px); }
.slider input[id$="-3"]:checked ~ .slides { transform: translateX(-1000px); }
.slider input[id$="-4"]:checked ~ .slides { transform: translateX(-1500px); }
.slider input[id$="-5"]:checked ~ .slides { transform: translateX(-2000px); }
.slider input[id$="-6"]:checked ~ .slides { transform: translateX(-2500px); }
.slider input[id$="-7"]:checked ~ .slides { transform: translateX(-3000px); }
.slider input[id$="-8"]:checked ~ .slides { transform: translateX(-3500px); }

/* Navigation Buttons */
.nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
}

.prev, .next {
  display: none;
  font-size: 20px;
  color: white;
  background: rgba(0,0,0,0.3);
  padding: 10px 15px;
  cursor: pointer;
  user-select: none;
}

/* Sichtbarkeit der Prev/Next-Buttons je nach aktivem Slide */
.slider input[id$="-1"]:checked ~ .nav label.prev[for$="-8"],
.slider input[id$="-1"]:checked ~ .nav label.next[for$="-2"],
.slider input[id$="-2"]:checked ~ .nav label.prev[for$="-1"],
.slider input[id$="-2"]:checked ~ .nav label.next[for$="-3"],
.slider input[id$="-3"]:checked ~ .nav label.prev[for$="-2"],
.slider input[id$="-3"]:checked ~ .nav label.next[for$="-4"],
.slider input[id$="-4"]:checked ~ .nav label.prev[for$="-3"],
.slider input[id$="-4"]:checked ~ .nav label.next[for$="-5"],
.slider input[id$="-5"]:checked ~ .nav label.prev[for$="-4"],
.slider input[id$="-5"]:checked ~ .nav label.next[for$="-6"],
.slider input[id$="-6"]:checked ~ .nav label.prev[for$="-5"],
.slider input[id$="-6"]:checked ~ .nav label.next[for$="-7"],
.slider input[id$="-7"]:checked ~ .nav label.prev[for$="-6"],
.slider input[id$="-7"]:checked ~ .nav label.next[for$="-8"],
.slider input[id$="-8"]:checked ~ .nav label.prev[for$="-7"],
.slider input[id$="-8"]:checked ~ .nav label.next[for$="-1"] {
  display: block;
}



.slidertext {
    

height: 30px;
  color: #ffffff;
  font-size: 12px;
  width: 99%;
  text-align: right;
  position: relative;
  top: -65px;
  z-index: 1;
  padding-right: 10px;
  margin: auto;
  background: rgba(0,0,0,0.3);
  line-height: 30px;

  }


/* Listen Ende */




#box { 
   
  margin: auto;
  width:  95%;
  
  background-color: #74cbe9;
    text-align: center;
    height: 100vh; 
}



.bildbox { 
  float: left;
  height: 50%;
  width: 40%;
   background-color: #e98674;
   display: inline-block;
}


.bildbox img { 
    
  height: 100%;
  width: 100%;
  object-position: 30% 0%;
   
}


.thtextbox { 
   
    height: 100%;
  width: 100%; 
  background-color: #ffffff;
  display: contents;
  font-size: 25px;
    color: #666666;
    text-align: left;
    position: relative;
  left: 0px;
}



.textboxlinks { 
   float: left;
    height: 50%;
  width: 45%; 
  background-color: #ffffff;
  
  font-size: 20px;
    color: #666666;
    text-align: left;
    
}


.glasbautextbox { 
   float: right;
    height: 50%;
  width: 45%; 
  background-color: #ffffff;
  
  font-size: 150%;
    color: #666666;
    text-align: left;
    position: relative;
  left: 0px;
}


.glasbautextbox p:first-letter {
    color: #74cbe9;
    font-size: 40px;
    margin-right: 1px;
}





.glasbaubildbox2 { 
  float: left;
  height: 100%;
  width: 23%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/glasbau2.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   margin-left: 20px;
   background-position: right;
   
}

.glasbaubildbox img { 
    
  height: 100%;
  width: 100%;
  object-position: 30% 0%;
   
}


.autotextbox { 
   float: left;
    height: 50%;
  width: 45%; 
  background-color: #ffffff;
  
  font-size: 200%;
    color: #666666;
    text-align: left;
    
}








.autobildbox img { 
    
  height: 100%;
  width: 100%;
  object-position: 30% 0%;
   
}


.verglasungtextbox { 
   float: right;
    height: 50%;
  width: 45%; 
  background-color: #ffffff;
  
  font-size: 200%;
    color: #666666;
    text-align: left;
    position: relative;
  left: 0px;
}






.verglasungbildbox2 { 
  float: left;
  height: 100%;
  width: 23%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/verglasung1.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   margin-left: 20px;
   background-position: bottom;
   
}




.vitrinentextbox { 
   float: left;
    height: 50%;
  width: 45%; 
  background-color: #ffffff;
  
  font-size: 200%;
    color: #666666;
    text-align: left;
    
}








/* Boxen */




.textbox { 
   float: left;
    height: 50%;
  width: 40%; 
  background-color: #c51f1f;
  display: inline-block;
}


#box_zitat {
  height: auto;
  min-height: 25vh;
  
  width: 100%;
  padding-top: 300px;
}


.startquelle {
  font-size: 15px;
  bottom: 10px;
  position: absolute;
  left: 15px;
}

.glasbaubildbox { 
  
height: auto;
  min-height: 25vh;
  width: 100%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/start1.JPG);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   border-radius: 25px;
   position: relative;
}



.autobildbox { 
  min-height: 25vh;
  width: 100%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/automatiktueren.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   border-radius: 25px;
   position: relative;
}



.verglasungbildbox { 
  min-height: 25vh;
  width: 100%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/verglasung/verglasung-k-fv-8.png);
   background-repeat: no-repeat;
   background-size: cover;
   background-position-x: center;
   border-radius: 25px;
   position: relative;
   
}


.vitrinenbildbox { 
  min-height: 25vh;
  width: 100%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/vitrinen.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   position: relative;
  left: 0px;
  border-radius: 25px;
  position: relative;
}



.saugbabildbox { 
  min-height: 25vh;
  width: 100%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/saugbatterie/saug-k-1.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   position: relative;
  left: 0px;
  border-radius: 25px;
  position: relative;
}



.historiebildbox { 
  
height: auto;
  min-height: 25vh;
  width: 100%;
   background-color: #ffffff;
   display: inline-block;
   background-image: url(../pic/hi-einzel1.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   border-radius: 25px;
   position: relative;
}


.kontakt {
  font-size: 30px;
  color: #666666;
  text-align: left;
  width: 100%;
  line-height: 40px;
}



.kontakt a {
  
  color: #666666;
  text-decoration: none;
}



.kontakt a:hover {
  
  color: #666666;
  text-decoration: underline;
}


.unten {
  padding-top: 50px;
  padding-bottom: 50px;
  width: 100%;
  height: auto;
  background-color: #f0f1f5;
  text-align: center;
  margin: auto;
}


.untentext {
  font-size: 30px;
  color: #666666;
  text-align: center;
  width: 100%;
  line-height: 50px;
}

.untentext a {
  
  color: #666666;
  text-decoration: none;
}



.untentext a:hover {
  
  color: #666666;
  text-decoration: underline;
}