:root{
  --rot:rgba(178, 0, 33, 1);
  --dunkelgrau: #232323;
  --hellgrau: rgba(135, 135, 145, 1);
  --mittelgrau: rgba(185, 185, 195,1);
  --verlauf_n_unten:  linear-gradient(to bottom, rgba(175, 175, 185, 1), rgba(135, 135, 145, 1));
  --verlauf_n_oben:  linear-gradient(to bottom, rgba(135, 135, 145, 1), rgba(175, 175, 185, 1));
  --schwarz: rgba(0, 0, 0, 1);
  --weiss: rgba(255, 255, 255, 1);
  --strich: border: 3px solid var(--rot);
  font-size: 16px;
  color-scheme: light dark;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
  hyphens: auto;
}

img{
  display: block;
  max-width: 100%;
  height: auto;
}







body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100.1vh;
  background-image: url(../buidl_layout/background_start_04.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;

    overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

body#uns_body{
  background-image: url(../buidl_layout/background_start_03.jpg);
}


body#kontakt_body{
  background-image: url(../buidl_layout/background_kontakt.jpg);
}

body#impressum_body{
  background-image: url(../buidl_layout/background_impressum.jpg);
}


html{
  min-height: 100.1%;
}

  header{
    
    background: var(--verlauf_n_unten);
    
    border-bottom: 4px solid var(--rot);
    padding: 2rem .5rem;
    position: sticky;
    top: 0;
    z-index: 1000;
  }


.kopf_container{
  display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    width: 80%;
    margin: 0 auto;
}




  .kopf_child{
    flex: 1;
    

  }
  
  .kopf_child:nth-child(1){
    flex-grow: 1;
  }

.kopf_child:nth-child(2){
    flex-grow: 2;
    min-width: fit-content;
  }


  /* .logo{
    max-width: 400px;
    height: auto;
    margin: 0 auto;
  } */


.logo{
  max-width: 400px;
    min-width: 250px;
    transition: all .7s ease-in-out;
    
    padding: 0;
}

.logo:hover, .logo:active{
transform: scaleX(-1);
}



.logo_ohne_namen{
  border-radius: 100rem;
  transition: all .7s ease-in-out;
}

.logo_ohne_namen:hover, .logo_ohne_namen:active{
  transform: rotate(-5deg) scale(1.07);  
}






  /* nav{
    
  } */

  .top_navi ul{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    list-style: none;
  }

  .top_navi ul li{
    margin: 0 .5rem;
    border: 1px solid red;
  }

  main{
    flex: 1;
    padding: 0 0 3rem 0;
  }

.start_main{

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  gap: 2rem;

background: #ffffff;
background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
background: -moz-linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.5) 75%, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#FFFFFF", endColorstr="#FFFFFF", GradientType=0);
background-size: contain;
}
  



.begruessung_start{
  /* background: rgba(255,255,255,.75); */
  width: 100%;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  
  transition: all .7s ease-in-out;


}

.begruessung_start_child{
  flex: 1;
  min-width: 300px;
  width: 100%;
  border: 0px solid red ;
}



.begruessung_start_child:nth-child(1){
  padding: 3rem 2rem;
  text-align: center;
}

.begruessung_start_child:nth-child(2){
  text-align: center;
}

.foto_halter .slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.foto_halter .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 8px solid var(--rot);
  border-bottom: 8px solid var(--rot);
  filter: grayscale(1);
  opacity: 0;
  transform: translateX(100%);
  transition: transform .8s ease-in-out, opacity .8s ease-in-out, filter .6s ease-in-out;
}

.foto_halter .slide.active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
}

.foto_halter .slide.slide-out {
  opacity: 0;
  transform: translateX(-100%);
}

.foto_halter .slideshow:hover .slide.active {
  filter: grayscale(0);
}

.elektrotechnik{
  font-size: 1.6rem;
  color: var(--schwarz);
}

.begruessung_text p{
  margin: 1.5rem 0;
  font-size: 1.3rem;
  line-height: 1.8;
  
}

.leistungen_start{
  background: rgba(255,255,255,.75);
  width: 80%;
  padding: 2rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  border-left: 2px solid var(--mittelgrau);
  border-right: 2px solid var(--mittelgrau);
  transition: all .7s ease-in-out;
  box-shadow:  10px 10px 10px rgba(0,0,0,0.2);
  border-radius: 1rem;
}


.leistungen_start:hover, .leistungen_start:active{
   box-shadow:  -10px -10px 10px rgba(0,0,0,0.2);
   background: rgba(255,255,255,1);
}

.puffer{
  padding: 0 2.5rem;
}

.symbol_halter{
  background: var(--verlauf_n_unten);
  border: 2px solid var(--rot);
  border-radius: 100rem;
  padding: .5rem;
  min-width: 200px;
  min-height: auto;
} 

.symbol_halter_kontakt{
  background: var(--schwarz);
  border: 2px solid var(--rot);
  border-radius: 100rem;
  padding: .5rem;
  min-width: 200px;
  min-height: auto;
} 


.leistung_beschreibung{
  flex: 1;
  min-width: 350px;
}

.leistung_beschreibung p{
  margin-bottom: 1.5rem;
}

.vorstellen{
  width: 70%;
  margin-left: 1.5rem;
  text-align: justify;
}


.blocksatz_datenschutz, .blocksatz_impressum{
  text-align: justify;
  hyphens: auto;
  margin: 0 auto;
  max-width: 90%;
  padding: .5rem 0;
}



.bilder_urheber_link{
  display: block;
  margin-bottom: .5rem;
  color: var(--schwarz);
  text-decoration: none;
}














.btn {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background-color: var(--rot); /* Roter Akzent */
            color: #ffffff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            text-decoration: none;
            font-weight: bold;
            transition: background-color 0.5s ease;
        }

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

.btn:hover {
            background-color: #d90429;
            text-decoration: none;
        }
        
.btn-secondary {
            background-color: rgba(66, 75, 83, 1)
        }
.btn-secondary:hover {
            background-color: #5a6268;
        }






  footer{
  border-top: 3px solid var(--rot);
  background: var(--verlauf_n_oben);
  padding: 1.5rem .5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  

}

.footer_child{
  flex: 1;
  margin: .5rem 0;
  text-align: center;
  width: 80%;
}

.footer_child:nth-child(1){
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  
}

.footer_child:nth-child(2){
  flex: 1;
  text-align: left;
  border-top: 1px solid var(--dunkelgrau);
  padding: 1rem 0;
}


 .footer_cell{
  text-align: left;
  flex-basis: 20%;
  /* min-width: fit-content; */
} 




.footer_cell h4 {
  color: var(--schwarz);
  margin-bottom: 1rem;
  border-bottom: 3px solid var(--rot);
  padding-bottom: 0.5rem;
  display: inline-block;
}

.footer-nav ul {
            list-style-type: none;
            display: flex;
            flex-direction: column;
        }

.footer-nav li {
            margin-bottom: 0.5rem;
        }

.footer-nav a {
            color:  rgba(0,0,0,1);
            text-decoration: none;
        }
.footer-nav a:hover {
            color: var(--rot);
            text-decoration: none;
        }




h1,h2,h3,h4,h5,h6{
  color: var(--rot);
}

h1{
  font-size: 1.6rem;
}








        /* --- MOBILE VERSION (Media Query) --- */
        @media (max-width: 768px) {





body{
  background-size: cover;
}

header{
    padding: 1rem .5rem;
    position: relative ;
  }






.kopf_container{
    flex-direction: column-reverse;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}


.kopf_child{
    width: 90%;
    margin: 0 auto;
  }
  
/* .kopf_child:nth-child(1){
    
  } */

.kopf_child:nth-child(2){
    text-align: right;
  }

.logo{
  margin: 0 auto;
  width: 90%;
}



.leistungen_start{
  width: 85%;
  padding: 1rem 1rem;
  justify-content: center;
  align-items: center;
  gap: 1rem;

}

.leistung_beschreibung p{
  text-align: justify;
  hyphens: auto;
  font-size: 1rem;
  max-width: 80%;
  margin: 0 auto 1.5rem auto;
}

.leistung_beschreibung h1{
  hyphens: auto;
  max-width: 80%;
  margin: 0 auto 1.5rem auto;
}

.leistung_beschreibung a{
  hyphens: auto;
  max-width: 80%;
  margin: 0 auto 1.5rem auto;
}




.btn {
            display: block;
            padding: 0.75rem 1.5rem;
            margin: 1rem auto;
            max-width: fit-content;

        }





















.foto_halter img{
  border-top: 4px solid var(--rot);
  border-bottom: 4px solid var(--rot);
}






             
.footer_child:nth-child(1){
  width: 80%;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
}


        }
    





/* Dark Mode Support (falls vorhanden) */
 @media (prefers-color-scheme: dark) {

  *{
    color: var(--schwarz);
  }


  .begruessung_text p{
  color: var(--schwarz);
}

h1,h2,h3,h4,h5,h6{
  color: var(--rot);
}

}