.logocontain {
   box-shadow: 0px 1rem 2rem rgba(0, 0, 0, 0.06);
   width: 100%;
   margin: 0 0 0 0;
   padding: 0;

   position: sticky;
   top: 0;
   left: 0;

   z-index: 1200;
}

.logo {
   /* position: sticky;
   top: 0;
   left: 0; */
   width: 100%;
   max-width: var(--maximalbreite);
   height: 3rem;
   max-height: 6rem;
   margin: 0rem auto 2rem auto;
   z-index: 1200;
   background-image: url(../content/pix/logo_ertel-gmbh_1684x272.png);
   background-position-x: right;
   background-size: contain;
   background-repeat: no-repeat;
   background-color: rgba(255, 255, 255, .95);
   border-bottom: 1.5rem solid rgba(255, 255, 255, 0);
   border-top: 1.5rem solid rgba(255, 255, 255, 0);
   
}



.sticky {
   position: sticky;
   top: 0;
   margin: 0 auto;
   max-width: var(--maximalbreite);
   z-index: 1300;
}

/* .telefonnummer {
   position: sticky;
   top: 0;
   left: var(--maximalbreite);
   right: 0;
   width: fit-content;
   height: 1.6rem;
   padding-top: 0.4rem;
   padding-left: .8rem;
   padding-right: .8rem;
   border-radius: 0 0 5px 5px;
   background-color: var(--gruen-hell);
} */


.hero {
   display: flex;
   flex-wrap: wrap;
   margin: 3rem auto 1rem auto;
   max-width: calc(var(--maximalbreite) - 0rem);
   padding: 0rem;
   justify-content: center;
   align-items: center;
   min-height: 10vh;
   /* background-color:  lightgray; */
}

.hero h1 {
   margin: 1rem 0px 0rem 0px;
   font-size: 200%;
   font-weight: 400;
   text-align: center;
   hyphens: none;
   text-transform: none;
   color: rgba(0, 0, 0, 0.8);
}

/* .hero p {
   margin-top: .3rem;
} */

.vorspann {
   display: block;
   margin: 2rem auto 1rem auto;
   padding: 0;
   max-width: var(--maximalbreite);
   columns: 1;
   text-align: center;
   font-size: 1.25rem;
   -webkit-hyphens: none; 
  hyphens: none; 
}

.vorspann p {
   margin: 1rem;

}

.hr {
   width: 100%;
   height: 1px;
   background-color: grey;
}



.leistungen {
   column-count: 3;
   -moz-column-count: 3;
   -webkit-column-count: 3;
}

.flexcontainer {
   width: var(--maximalbreite);
   display: flex;
   flex-direction: row;
   align-items: baseline;
   column-gap: 1rem;
   /* background-color: lightblue; */
   margin-bottom: 4rem;
}

.container p {
   margin-bottom: 1rem;
}

.headlines {
   flex-direction: column;
}


.ausblenden {
   display: inline;
   /* margin: 0px;
   padding: 0px; */
}















/* ==================================== */
/* Breakpoints 425 / 768 / 1024 */




@media (max-width: 1024px) {


   details {
      margin: 0 0 .3rem 1rem;
   }
   .flexcontainer {
      width: 90%;
   }
}

@media (min-width: 769px) {

   .leistungen {
      column-width: 12rem;
      padding: 0 1rem 0 1rem;
      margin-bottom: 3rem;
      /* background-color: lightcoral; */
   }

}


@media (max-width: 768px) {

   .logo {
      height: 3 rem;
      background-position-x: 95%;
   }

   .hero {
      padding: 2rem;
   }

   .leistungen {
      column-count: 1;
   }

   .flexcontainer {
      flex-direction: column;
   }

}



@media (max-width: 587px) {

   .telefonnummer {
      font-size: medium;
   }

   .hero {
      margin: 0rem;
      padding: 0rem;
      background-color: transparent;
   }

   .hero h1 {
      font-size: 1.25rem;
      margin: 0;
   }

   .vorspann {
      padding: 10%;
   }

   .vorspann p {
      font-size: 1.1rem;
      hyphens: none;
      text-align: center;
   }




}

@media (max-width: 424px) {

   .ausblenden {
      display: none;
   }

   .logo {
      width: calc(100vw - 0.5rem);
      height: 2.1rem;
      border-top: 0rem solid white;
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      margin-left: auto;
      margin-right: auto;
      background-position-x: center;
      background-size: contain;
      background-repeat: no-repeat;
      background-color: white;
      border-top: solid 1.2rem white;
      border-bottom: .5rem solid white;
      border-left: .5rem solid white;
   }



}