#mainnav {
  height: 7vh;
  background-color:#fff;
  z-index: 200;
  position: fixed;
  display: block;
  width: 100vw;
  box-shadow: var(--menueschatten);
}
#mainnav #spezialzeile{
    position: relative;
    visibility: visible;
    z-index: 100;
    top: -14px; 
    width: 100vw;
    height: 1vh;
}
#mainnav #spezialzeile p {
  position: relative;
  right: 0;
  font-family: 'Open+Sans:400,600,700',sans-serif !important;
  color: #000;
  font-size: 10px;
  white-space: nowrap;
  text-align: center;
}
  #haupt-nav{visibility: hidden;}
  a, a:hover {
    color: #000;
    text-decoration: none;
    transition: .4s;
}
#haupt-nav ul li a{font-family: 'Open+Sans:400,600,700',sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  line-height: 75px;
  letter-spacing: .15em;
  padding: 0 20px;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 2px;
background-position: 0% 100%;
background-repeat: no-repeat;
transition: 0.6;padding-bottom: 6px;}
#haupt-nav ul li a:hover{background-size: 100% 2px;
padding-bottom: 6px;}
.logomobile {
  z-index: 100;
  content: "";
  position: fixed;
  height: 7%;
  width: 29%;
  background-image: url(../logos/bg_Logo_RGB.svg);
  top: 4px;
  left: 4px;
  background-repeat: no-repeat;
  transition: 1.0s;
  background-size: contain;
}
.logo{
	z-index: 9;
	    content: "";

	    background-image: url(../logos/bg_Logo_RGB.svg);
	    top: 9px;
	    background-repeat: no-repeat;
	    transition: 1.0s;
      background-size: contain;
      background-position-x: center;
      background-position-y: top;
}
.logo a{content: "";height: 100%;
  width: 100%;
  display: block;}
.hamburger {
    z-index: 200;
    display: block;
    position: fixed;
    cursor: pointer;
    right: 0%;
    top: 3%;
    transform: translate(-4%, -53%);
}
        .hamburger .line {
      background-color: #000;
      width: 24px;
      height: 3px;
      margin: 5px;
      filter: hue-rotate();
  }



			.nav-links{
			        display: flex;
			        list-style: none;
			        width:100%;
			        height:100%;
			            justify-content: space-around;
			                align-items: center;margin-left: auto;
			        position: fixed;
			      background:#fff;
			              flex-direction: column;
			      clip-path:circle(63px at 100% -1%);
			      transition: all 1.0s ease-out;
			      top: 0;
			              margin-block-start: 0;
			      }
			      .nav-links.open{
			        clip-path: circle(2434px at 93% -6%);
			        -webkit-clip-path: circle(2434px at 93% -6%);
			      z-index: 5;
			      }
						.nav-links li a{
	     				 color:#000;
	       			 display: block;
	       			 font-size:25px;
	        			text-decoration: none;
                font-weight: 900;
	      }
.haupt-nav{z-index:100; width:100%;
	 border-bottom: 1px solid var(--textfarbe);
position: fixed;
background-color:rgba(255,255,255, 0.9);transition: 1.0s;

	         box-shadow: var(--menueschatten);top:0;
 }
.haupt-nav:after {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 1.0;
    background-image: url(x);
    background-repeat: no-repeat;
    background-position: 51% 0;
    background-size: cover;
		transition:1.0s;
}
        .haupt-nav ul{
          display: grid;
          grid-gap:11px;
          padding: 0;
          list-style:none;
          text-align: center;
          grid-template-columns:repeat(9, 1fr);
        z-index: 10;
        position:relative;
       cursor:pointer;
        } 
#HOME, #IMAGEVIDEO, #LEISTUNGEN, #REFERENZEN, #PARTNER, #NEWS, #KENNENLERNEN,#VERMIETUNG, #DOWNLOADS, #IMPRESSUM{scroll-margin-top:10vh;}
.alertbox{position: relative;top: 21vh;}

section{     position: relative;
  padding-top: 100px;
  min-height: 30vh;
  overflow: hidden;}
  .feedbacksection{min-height: 100vh;}
.references, {padding:0;}
.anchor{}
.einblenden {
	opacity: 1;
}
.text-center {
  text-align: center;
}





.helldunkel{background-color: var(--bghell)}
.helldunkel h1, .helldunkel h2, .helldunkel h3, .helldunkel h4, .helldunkel h5, .helldunkel h6, .helldunkel p{color: var(--bgdunkel)}
.dunkelhell{background-color: var(--bgdunkel)}
.dunkelhell h1, .dunkelhell h2, .dunkelhell h3, .dunkelhell h4, .dunkelhell h5, .dunkelhell h6, .dunkelhell p{color: var(--bghell)}

.start{padding: 0}
.bg-topbox{background-image: url(../img/GrossQuer1mobile_n.jpg);background-position: center;background-repeat: no-repeat;background-size: cover;min-height: 100vh;
    width: 100%;content: "";z-index: 3;top: 0;
  left: 0;}
.topbox{
	padding: 4vw;
    position: absolute;
    top: 42%;
    left: 4%;
    right: 4%;
}
/* willkommen ist in der nächsten section plaziert */
.willkommen, .textslide{
  overflow: visible;
}
.willkommen h2, .textslide h2{
  font-size: 2.8em;
  letter-spacing: .15em;
  margin: 33px 0 33px;
  padding-bottom: 48px;
  line-height: 1.6em;
  padding-top: 1.6em;
 
  text-shadow: 2px 2px 5px #fff;
  
}
.willkommen .content{letter-spacing: .05em;
  line-height: 30px;
  font-size: 16px;
  color: #000;text-align: center;}

.willkommen h4 
{position: relative;
  left: 0vw;
  width: 90vw;}



.titlebox {
  border: 1px solid #fff;
  padding: 30px;
  background-color: rgba(255,255,255,.6);
  width: auto;
  margin-left: 0%;
  margin-right: 0%;
}
.titlebox h1 {
  color: #016486;
  font-size: 2.125em;
    font-weight: 600;
    line-height: 1.1;
}
.titlebox h1, .titlebox p{color:var(--auszeichnungblau)}
.hallobox, .logogruppebox, .newsbox, .verleihbox, .halloverleihbox{width: auto;
  margin-left: 1%;
  margin-right: 1%;}
  .helldunkel .halloteaser{color:var(--auszeichnungblau);letter-spacing: .05em;}
  .centeredtext{text-align: center;}
  
  .schlagwoerter{
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
    position: absolute;
  
    top: 12em;
    height: 40vh;}
   .schl1{
    animation-duration: 11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft1;
    transform: translateX(+100%);
   }
   .schl2{
    animation-duration: 11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft2;
    transform: translateX(+100%);
   }
   .schl3{
    animation-duration: 11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft3;
    transform: translateX(+100%);
   }
   .schl4{
    animation-duration:11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft4;
    transform: translateX(+100%);
   }
  .schlagwort{
    font-family: 'Open+Sans:400,600,700',sans-serif;
    font-weight: 700;
    color: #fff;
    width: 100%;
    margin: 0;
    top: 12em;
    font-size: 36px;
    text-shadow: 2px 2px 5px gray;
  line-height: 1.2;}


  .titlebox{animation-duration: 10s;
        animation-timing-function: ease-in;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-name: slideInTop;}
       
    .schwebend{animation-duration: 10s;
      animation-timing-function: ease-in;
      animation-delay: 0;
      animation-iteration-count: 1;
      animation-name: aufschnappen;}
      .homebutton{animation-duration: 2s;
        animation-timing-function: ease-in;
        animation-delay: 0;
        animation-iteration-count: 1;
        animation-name: slideInBottom;}
    .willkommen h2{animation-duration: 21s;
          animation-timing-function: ease-0ut;
          animation-delay: 0s;
          animation-iteration-count: 1;
          animation-name: slideInTopWillkommenslideoutbottom;}
    .textslide h2{animation-duration: 3s;
      animation-timing-function: ease-0ut;
      animation-delay: 0s;
      animation-iteration-count: 1;
      animation-name: slideInTopTextslidebottom;}
   .homebutton{position: fixed; z-index: 500; bottom:2%; right: 2%; height: 50px;width: 50px;background-color: var(--hellesgrau); background-image:url(../img/top.svg);background-repeat: no-repeat;background-size: cover;
    content: ""; border-radius: 10px;}
    @keyframes  slideInTopTextslidebottom {
      0% {
        transform:scale(1.0, 1.0) translateY(-100%); color: #fff;  text-shadow: 2px 2px 5px gray;
      }
      100% {
        transform: scale(1.0, 1.0) translateY(0);color: #000; text-shadow: 2px 2px 5px #FFF;
      }
    }
    @keyframes slideInTopWillkommenslideoutbottom {
      0% {
        transform:scale(1.0, 1.0) translateY(-1050%); color: #fff;  text-shadow: 2px 2px 5px gray;
      }
      90% {
        transform: scale(1.0, 1.0) translateY(-950%);color: #fff;  text-shadow: 2px 2px 5px gray;
      }
      100% {
        transform: scale(1.0, 1.0) translateY(0);color: #000; text-shadow: 2px 2px 5px #FFF;
      }
    }
  @keyframes slideInTop {
    0% {
      transform:scale(0.0, 0.0) translateY(-200%);
    }
    90% {
      transform: scale(0.0, 0.0) translateY(0);
    }
    100% {
      transform: scale(1.0, 1.0) translateY(0);
    }
  }
  @keyframes slideInBottom {
    0%, 30%{
      transform:scale(0.0, 0.0) translateY(400%) ;
    }
    100% {
      transform: scale(1.0, 1.0) translateY(0);
    }
  }
  @keyframes aufschnappen {
    0%{
      transform:  translateX(200%);
    }
    90% {
      transform: translateX(200%);
    }
    100% {
      transform:translateX(0);
    }
  }
  @keyframes click {
    0%{
      transform: filter (blur(10px));
    }
    100% {
      transform: filter (blur(0px));
    }
  }
  @keyframes slideInFromLeft1 {
    0%{
      transform: translateX(-100%) ;
    }
    55%, 80% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  @keyframes slideInFromLeft2 {
    0%{
      transform: translateX(-100%) ;
    }
    59%, 84% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  @keyframes slideInFromLeft3 {
    0%{
      transform: translateX(-100%) ;
    }
    63%, 88% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  @keyframes slideInFromLeft4 {
    0%{
      transform: translateX(-100%) ;
    }
    61%, 86% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  .hallobox h2, .leistungen h2, .references h2, .logogruppe h2, .news h2, .downloadsection h2, .impressum h2, halloverleihbox h2{
    font-size: 2.0em;
    letter-spacing: .15em;
    margin: 33px 0 33px;
    padding-bottom: 1px;
    line-height: 1.2em;
    padding-top: 1.6em;
}
.downloadsection h2 {

  padding-bottom: 48px;

}
  .hallobox .content, .halloverleihbox .content, .leistungen .sectionheader p, .references .sectionheader p, .logogruppe p,.vermietung .sectionheader p,.mietmich .sectionheader p, .downloadsection .sectionheader p{letter-spacing: .05em;
    line-height: 30px;
    font-size: 16px;
    color: #000;text-align: center;}

.hallobox h4, .ueberbox h4, .boorbergruppebox h4,  .vortraegebox h4, .engagementbox h4 
 {position: relative;
    left: 0vw;
    width: 90vw;}
    .video-container {
      position: relative;
      padding-bottom: 56.25%;
      padding-top: 0;
      height: 0;
      overflow: hidden;
  }
  section .ueber{  min-height: 30vh;}

    .team{background-color:var(--auszeichnungblau);display: grid; grid-template-columns: 1fr;min-height: 50vh;padding: 0;}
    .team-left{height:25vh; background-repeat: no-repeat;background-size: cover;background-position: center bottom ;}
    .team-left{background-image:url(../img/team.jpg);}

    .team-right{padding:4vw;}
    .team-right h2{color: #FFF;font-size:2.0em;line-height: 1.4;}

.numbers{background-color: var(--auszeichnungblau);color:#fff;}
.animCounterTrigger{}
.numbers .divider {
  border-top: 2px solid #fff;
}.numbers h1{ font-size: 2.0rem;
  font-weight: 800;    text-align: center;
}
.numbers .row{display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;

}
.super-lead-text{text-align: center;}




/*----Verleihung start ---->*/

.heizmobil {background-color:var(--auszeichnungblau); min-height: 50vh;padding: 0;}
.heizmobiloben .heizmobil-left{background-repeat: no-repeat;background-size: cover;background-position: center ;}
     .heizmobil-left{background-image:url(../imgverleih/00-Heizmobil_a.jpg);}
.heizmobil-right{padding:1vw;}
.heizmobil-right h2{color: #FFF;font-size:1.6em;line-height: 1.4;}
    .heizmobil-right h2.textrot{color:var(--keiltecrot);}
.heizmobil {
      background-color: var(--auszeichnungblau);
      display: flex;
      padding: 0;
      flex-direction: column;
  }
  .heizmobiloben {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 50vw;
}
.heizmobiloben .heizmobil-left {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  content: " ";
height: 100vw;
}
.heizmobil-right {
  color:#fff;
}
.klammer{display: flex;
      flex-wrap: nowrap;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
  }
  .klammer img{width:100%; height: auto;}
.heizmobilunten{background-color: #fff;}
.heizmobiltafel{margin-left: 1vw;
  margin-right: 1vw;
  border: 1px solid var(--keiltecrot);
  padding: 1vw;}
  .infobox1{background-color: var(--auszeichnungblau);color:#fff;    padding: 2vw;}
  .infobox1 .preisliste, .infobox1 .anmerkungsliste{margin-left: 4vw;
    margin-right: 4vw;}
  .infobox1 .preisliste{    display: grid;
    grid-template-columns: 1fr 1fr;}
  .infobox1 .anmerkungsliste{}
  .infobox1 .preisitem{}
  .infobox1 .preis{font-size: 1.3rem;font-weight: 700;text-align: right;}
  .infobox1 .preisanmerkung{grid-column:1/3;}
  .infobox2{display:grid;grid-template-columns: 1fr 1fr;    margin: 0vw; background-color: var(--hellstesblau);
    border:1px solid var(--auszeichnungblau);font-size: small;
  }
  .infobox2 .sectionbalken h2{font-size: 1.1rem;}
  .infobox2 p{    padding: 5px;
    margin-top: 0;
    margin-bottom: 0;
    border: 1px solid var(--auszeichnungblau);}
  .infobox2 .maschhead{grid-column:1/3; background-color: var(--auszeichnungblau);    color: #fff;
    font-weight: 700;
    text-align: center;}
  .infobox2 .maschinfo{}
  .infobox2 .maschwert{}
  .infobox2 .ddd{background-color:#bec5df;}
  .infobox2 .maschgrid{display: grid;grid-template-columns: 1fr 1fr 1fr;font-size: smaller;width:100%;}
  .infobox2 .maschinfoliste{border: 1px solid var(--auszeichnungblau);}
  .infobox2 ul{}
  .infobox2 ul p{border:none; font-size: 0.9rem;}
  .infobox2 li, .infobox3 li{list-style: disc;}
  .infobox3{display: flex;
    flex-direction: column;
    justify-content: center;margin: 4vw;}
  .infobox3 .if3oben{display: grid;
    flex-direction: row;
    grid-template-columns: 1fr;}
  .infobox3 .if3obenli, .infobox3 .if3obenre{padding: 1vw;}
  .infobox3 .if3unten{padding: 1vw;}
  .infobox3 h3{margin-left: 1em;}



  .video-container iframe, .video-container object, .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.projekt{;background-color: #fff;height:100vh;padding:0;}

/* ########### PROJEKT Anfang #######################*/



.loading:hover path {
  fill: red;
}

.projekt .projektbildaussen {

  width: 100px;
  height: 100px;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 20000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 20000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 20000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 45s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}







.package{position: relative;}
.projekt .balken{position:absolute;
  content: "";height: 65vh;width: 100vw;    background-color: var(--auszeichnungblau);    margin-top: 18vh;}
.projekt .projektbildinnen{position:absolute;background-image: url(../img/projektinnen.png);z-index: 2; background-position: center;
  background-repeat: no-repeat;
  background-size: 85%;
  content: "";height: 100vh;width: 100vw; }
.projekt .projektbildaussen{position:absolute;background-image: url(../img/projektaussen.png);z-index: 3; background-position: center;
  background-repeat: no-repeat;
  background-size: 95%;
  content: "";height: 100vh;width: 100vw;}
/* ########### PROJEKT Ende #######################*/

  .leistung{cursor: pointer;}
  .leistung ul{padding-inline-start:13px;}
  .leistung-a{background-image: url(../img/Betonkernaktivierung.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    content: "";z-index: 3;top: 0;
  left: 0;}
  .leistung-b{background-image: url(../img/INDUSTRIEFLAECHENHEIZUNG2.JPG);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    content: "";z-index: 3;top: 0;
  left: 0;}
  .leistung-c{background-image: url(../img/Fussbodenheizung1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    content: "";z-index: 3;top: 0;
  left: 0;}
  .leistung-d{background-image: url(../img/sonstige1.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    content: "";z-index: 3;top: 0;
  left: 0;}
  .leistung-button{}
  .cross-button{background-image: url(../img/cross.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 50px;
    width: 50px;
    position: absolute;
    margin-right: 1vw;
    float: right;
    cursor: pointer;
    top: 0.5em;
    right: 0.5em;
    z-index: 1000;}
  .artikel_offen{
    position: relative;background-color: var(--hellstesblau);}
    .artikel_offen li{list-style: disclosure-closed;}
  .leistung-a-text, .leistung-b-text,.leistung-c-text,.leistung-d-text{
    display: block;
    z-index: 1000;
    position: fixed;
    clip-path: circle(101px at 124% -13%);
    transition: all 1.0s ease-out;
    top: 0;
    left: 0vw;
    background-color: #fff;
    height:60vw;
    width: 100vw;
    overflow: scroll;}
  .leistung-a-text.open, .leistung-b-text.open, .leistung-c-text.open, .leistung-d-text.open{
    display: block;
    z-index: 1000;
    top: 0;
    left: 0vw;
    position: fixed;
	clip-path:circle(1123px at 62% 64%);
	overflow: scroll;
	height:100vh;
  width: 100vw;}
  .artikel_offen article{ align-content:start;}
  .artikel_offen .links, .artikel_offen .rechts{ display:flex;
    flex-direction:column;
    justify-content:flex-start;}
    .artikel_offen .links{display:contents}
    .artikel_offen .rechts{;padding-left:2em;padding-right:2em;}
    .artikel_offen .rechts h2{display:grid;position: relative;
      top: -2em;
      margin: 0;
      padding-bottom: 0;grid-template-columns: 1fr;grid-gap: 1em;}
    .artikel_offen img{    width: 100%;}
.topboxleistungen{position: relative;
  background-color: rgba(255,255,255,0.7);margin: 1em;
  width: 45%;
  height: 89%;}
.leistungsbox{display: grid;grid-template-columns:1fr;    grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;}
.leistungsbox img{width:100%;}
.leistungsbox h3, .leistungsbox p{padding: 0.6em;}
.leistungen{opacity: 0;}
.referenzenbox{display: grid;grid-template-columns:1fr 1fr;}

.referenzenbox .paket{width:100%;height:100%;transition: 0.3s;}

/*.referenzenbox img.open{transform: scale(2.0, 2.0);}*/
.paket h3, .paket p{padding: 0.6em;}
.referenzen {height:calc(100vw/2); width:calc(100vw/2);transition: 0.4s}
.referenzen .open{}
.referenzen-text{
  padding: 1em;
    background-color: rgba(255,255,255, 0.9);
    transition: 0.5s;
    position: absolute;
    left: 0px;
    right: 30px;
    width: 70%;
    top: calc((100vw/100) * 41);
    opacity:0;
    font-size: 8px;
    line-height:1;
}
 .open .referenzen-a-text, .open .referenzen-b-text {opacity:1;transition: 2s;}
 .open .referenzen-d-text, .open .referenzen-e-text {opacity:1;transition: 2s;}
/*achtung für 4er grid*/
.paket{   background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}
  .kreuza, .kreuzb, .kreuzc, .kreuzd, .kreuze, .kreuzf, .kreuzg, .kreuzh, .kreuzi, .kreuzj, .kreuzk, .kreuzl, .kreuzm, .kreuzn, .kreuzo, .kreuzp, .kreuzq, .kreuzr, .kreuzs, .kreuzgg, .kreuzhh, .kreuzii, .kreuzjj, .kreuzkk, .kreuzll, .kreuzmm, .kreuznn, .kreuzoo, .kreuzpp, .kreuzqq, .kreuzrr, .kreuzss, .kreuztt, .kreuzuu, .kreuzvv, .kreuzww, .kreuzxx, .kreuzyy, .kreuzzz{
    height:1px; width:1px; position: relative;
    top: 0px;
    right: 0;
    opacity: 0.0;transition: 2s;}
.open .kreuza, .open .kreuzb, .open .kreuzc,.open  .kreuzd, .open  .kreuze, .open  .kreuzf, .open  .kreuzg, .open .kreuzh,  .open .kreuzi, .open  .kreuzj, .open  .kreuzk, .open  .kreuzl,  .open .kreuzm,  .open .kreuzn, .open .kreuzo,  .open .kreuzp,  .open .kreuzq,  .open .kreuzr, .open  .kreuzs,  .open .kreuzgg, .open  .kreuzhh, .open  .kreuzii,  .open .kreuzjj,  .open .kreuzkk,  .open .kreuzll,  .open .kreuzmm,  .open .kreuznn,  .open .kreuzoo,  .open .kreuzpp,  .open .kreuzqq,  .open .kreuzrr,  .open .kreuzss,  .open .kreuztt,  .open .kreuzuu,  .open .kreuzvv,  .open .kreuzww,  .open .kreuzxx,  .open .kreuzyy,  .open .kreuzzz{opacity: 1.0; height:250px; width:250px;}

.referenzen-a .paket{background-image: url(../img-referenzen2/FreiflaechenheizungRampenheizung.JPG);}
.referenzen-b .paket{background-image: url(../img-referenzen2/GeothermieSolekollektorBodenplatteMehrfamilienhaus.jpg);}
.referenzen-c .paket{background-image: url(../img-referenzen2/HubschrauberlandeplatzMUCBogenhausen.JPG);}
.referenzen-d .paket{background-image: url(../img-referenzen2/IndustrieflaechenheizungIFHErsatzteillager.jpg);}
.referenzen-e .paket{background-image: url(../img-referenzen2/IndustrieflaechenheizungIFHLogistik.jpg);}
.referenzen-f .paket{background-image: url(../img-referenzen2/KondensatschutzEishalleMUC.jpg);}
.referenzen-g .paket{background-image: url(../img-referenzen2/KuehldeckeTrockenbauBuerogebaeude.jpg);}
.referenzen-h .paket{background-image: url(../img-referenzen2/KühldeckeAuTrockenbauRosenheim.jpg);}
.referenzen-i .paket{background-image: url(../img-referenzen2/OBKTVorfertigung.JPG);}
.referenzen-j .paket{background-image: url(../img-referenzen2/VerteilermontageErdkollektor.JPG);}
.referenzen-k .paket{background-image: url(../img-referenzen2/AnbindungKlimaBetoneinlegearbeiten.jpg);}
.referenzen-l .paket{background-image: url(../img-referenzen2/BetoneinlegearbeitenFlughafenMUC.JPG);}
.referenzen-m .paket{background-image: url(../img-referenzen2/BetonkernaktivierungWandProduktion.JPG);}
.referenzen-n .paket{background-image: url(../img-referenzen2/ErdleitungLogistikcenter.jpg);}
.referenzen-o .paket{background-image: url(../img-referenzen2/FBHVerteilerVorfertigungIndustrie.jpg);}
.referenzen-p .paket{background-image: url(../img-referenzen2/FiligrandeckeBetonkernaktivierung.JPG);}
.referenzen-q .paket{background-image: url(../img-referenzen2/FreiflaechenheizungAsphaltkollektorBusbetriebshofMUC.jpg);}
.referenzen-r .paket{background-image: url(../img-referenzen2/oBKTBetonkerntemperierungFertigteildeckeFertigteilwerk.jpg);}
.referenzen-s .paket{background-image: url(../img-referenzen2/BetoneinlegearbeitenLueftungFertigteildeckeWohnungsbau.jpg);}







.referenzen-gg .paket{background-image: url(../img-referenzen/BKTVerteilerFlughafenMuenchen.JPG);}

.referenzen-hh .paket{background-image: url(../img-referenzen/BKTVerteilerPolizeiAugsburg.JPG);}


.referenzen-ii .paket{background-image: url(../img-referenzen/BKTVerteilerSchalungBewehrungIngolstadt.JPG);}

.referenzen-jj .paket{background-image: url(../img-referenzen/BKTVerteilerUniversitaetFrankfurt.JPG);}
.referenzen-kk .paket{background-image: url(../img-referenzen/BKTVerteilerkastenFlughafenMuenchen.JPG);}

.referenzen-ll .paket{background-image: url(../img-referenzen/BKTVerteilerkastenMuenchen.JPG);}
.referenzen-mm .paket{background-image: url(../img-referenzen/Nahwaerme_Erdleitung_Rohrleitungsbau.jpg);}



.referenzen-nn .paket{background-image: url(../img-referenzen/Betonkernaktivierung_Uponor_Frankfurt.jpg);}



.referenzen-oo .paket{background-image: url(../img-referenzen/HeineOptotechnikGilchingq.jpg);}

.referenzen-pp .paket{background-image: url(../img-referenzen/Haunstetter-Hoefe_Augsburgq.jpg);}

.referenzen-qq .paket{background-image: url(../img-referenzen/Audiq.jpg);}

.referenzen-rr .paket{background-image: url(../img-referenzen/SiemensCampusErlangenq.jpg);}





.referenzen-ss .paket{background-image: url(../img-referenzen/Adidas.jpg);}

.referenzen-tt .paket{background-image: url(../img-referenzen/IMG_2501.jpg);}

.referenzen-uu .paket{background-image: url(../img-referenzen/IMG_2495.jpg);}

.referenzen-vv .paket{background-image: url(../img-referenzen/IMG_2404.jpg);}



.referenzen-ww .paket{background-image: url(../img-referenzen/IMG_1945.jpg);}

.referenzen-xx .paket{background-image: url(../img-referenzen/KVBWKarlsruhe.jpg);}

.referenzen-yy .paket{background-image: url(../img-referenzen/2017-06-06-PHOTO-00001669.jpg);}



.referenzen-zz .paket{background-image: url(../img-referenzen/2017-06-12-PHOTO-00001810.jpg);}


.referenzen-a .open, .referenzen-c .open, .referenzen-e .open, .referenzen-g .open, .referenzen-i .open,  .referenzen-k .open, .referenzen-m .open, .referenzen-o .open, .referenzen-q .open, .referenzen-s .open, .referenzen-hh .open, .referenzen-jj .open, .referenzen-ll .open, .referenzen-nn .open, .referenzen-pp .open, .referenzen-rr .open, .referenzen-tt .open, .referenzen-vv .open, .referenzen-xx .open, .referenzen-zz .open{transform: scale(2.0, 2.0)translateX(calc(100% / 4));}

.referenzen-b .open, .referenzen-d .open, .referenzen-f .open, .referenzen-h .open, .referenzen-j .open, .referenzen-l .open, .referenzen-n .open, .referenzen-p .open, .referenzen-r .open, .referenzen-gg .open, .referenzen-ii .open, .referenzen-kk .open, .referenzen-mm .open, .referenzen-oo .open, .referenzen-qq .open, .referenzen-ss .open, .referenzen-uu .open, .referenzen-ww .open, .referenzen-yy .open{transform: scale(2.0, 2.0)translateX(calc(100% / -4));}
.open .referenzen-text{opacity:1.0;transition: 2s;}

/*
.referenzen-a-text.open, .referenzen-b-text.open, .referenzen-f-text.open, .referenzen-g-text.open, .referenzen-k-text.open, .referenzen-l-text.open, .referenzen-p-text.open, .referenzen-q-text.open, .referenzen-u-text.open, .referenzen-v-text.open, .referenzen-z-text.open{opacity:1;transform:translateX(calc(100% / 4));transition: 2s;}
.referenzen-d-text.open, .referenzen-e-text.open, .referenzen-i-text.open, .referenzen-j-text.open, .referenzen-n-text.open, .referenzen-o-text.open, .referenzen-s-text.open, .referenzen-t-text.open, .referenzen-x-text.open, .referenzen-y-text.open{opacity:1;transform:translateX(calc(100% / -4)); transition: 2s;}
.referenzen-c-text.open, .referenzen-h-text.open, .referenzen-m-text.open, .referenzen-r-text.open, .referenzen-w-text.open{opacity:1; transition: 2s;}
*/

.referenzenbuttonelemente{ text-align: center; color:var(--auszeichnungblau); font-size: xx-large;display: flex;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-evenly;margin-top: 2em;}
.referenzenbuttonelemente .aufklappen,.referenzenbuttonelemente .zuklappen{border: 3px solid var(--auszeichnungblau); border-radius: 7px;
  padding:15px;cursor: pointer;font-size: 24px;line-height: 1.0;}
  .referenzenbuttonelemente .aufklappen:hover, .referenzenbuttonelemente .zuklappen:hover{background-color: var(--auszeichnungblau);color: #fff;transition: .8s}
  .ausgeblendet{transform: scale(0.0, 0.0); opacity: 0;transition: .8s;height: 0;}
  /*.eingeblendet{/*transform: scale(1.0, 1.0); opacity: 1;transition: .8s;}*/




  .downloadsection{min-height: 100vh;
  width: 100%;content: "";z-index: 3;top: 0;
left: 0;padding-top: 0;padding-left:0; padding-bottom:0; padding-right: 0;    margin-top: -4em;}
.sectionbalken{width: 100%; height: 10vw; background-color: var(--auszeichnungblau);display: flex;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;}
  .verleih_php .sectionbalken{    grid-column: 1 / 3;height: 5vw;}
  .sectionbalken h2{color:#fff;font-size: 1.8em;}
.downloadbox{display: grid;
  grid-template-columns:1fr ;
  grid-template-areas:
  "a b"
  "c d"
  "e f"
  "g h"
  "i j"
  "k .";
grid-gap: 5em;padding-left:4vw; padding-bottom:4vw; padding-right: 4vw;}
.downloads-a{grid-area: a;}
.downloads-b{grid-area: b;}
.downloads-c{grid-area: c;}
.downloads-d{grid-area: d;}
.downloads-e{grid-area: e;}
.downloads-f{grid-area: f;}
.downloads-g{grid-area: g;}
.downloads-h{grid-area: h;}
.downloads-i{grid-area: i;}
.downloads-j{grid-area: j;}
.downloadbox img{width: 50%;
  float: left;margin-right: 10px;}
 .downloadbox  .downloads-f  img{width:100%; float:none; margin-right: 0;}
.downloads{opacity: 0;background-color: #fff;}
.downloadinnerbox{background-color: #fff;padding-left: 5px;
  padding-right: 5px;}
.downloads p{font-size: 12px;
  line-height: 1.0;}
.buttondownloads{border-radius:5px;cursor: pointer;padding: 5px; background-color: var(--auszeichnungblau);color:#FFF;font-size: 12px;}
.buttondownloads:hover{color:#FFF; background-color: #666;}
.buttondownloads i{color:#FFF;font-size: 14px;}
.contacts{    display: grid;
    grid-template-columns: 1fr}
.contacts img {   width: 100px;}
.mailfelder{opacity: 1;}
		.partnerlogogrid{display: grid;  grid-template-columns:1fr 1fr; align-items: center;grid-column-gap: 2vw;}
		.partnerlogogrid .partnerlogo{text-align: center;}
    .datenschutzbuttonmail {
      height: auto;
      text-align: center;
  }
#ICONS{background-color: var(--auszeichnungblau);}
		.iconwrapper{    display: grid;
		    grid-template-columns: 1fr;
		    grid-column-gap: 1vw;
       align-items: center;
		}
    .iconinfo{height: auto;}
		.icon{    display: grid; text-align: center;}
    .icons .fas{ text-align: center; color:#fff; font-size: xx-large;display: flex;
      align-content: center;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;}

    .icon-front img {
    height: 30vw;
}
* News
.spacer {
	width:100%;
	height:50vh;
	background:#ddd;
}


.gallery h1 {
	font-size:32px;
  line-height: 1.5;
}

.gallery p {
	font-size:16px;
	line-height:1.4;
}


.gallery {
  display:flex;	
  /* outline:1px solid red; */
}

.left {
	width:50%;
}

.right {
	height:100vh;
	 
	width:50%;
	display:flex;
	flex-direction:column;
	justify-content:center;
}

.desktopContent {
	margin:auto;
	width:80%;
}

.desktopContentSection {

	/* outline:1px solid green; */
	display:flex;
	flex-direction:column;
	justify-content:center;
  margin-top: 5em;
}


.desktopPhotos {
  width: 51vh;
  height: 88vh;
	border-radius:none;
	overflow:hidden;
  position: relative;

    top: 4em;
}

.desktopPhoto {
	position:absolute;
	width:auto;
	height:100;
  width: inherit;
}




.red {
	background: crimson;
}

.green {
	background:MediumSeaGreen;
}

.blue {
	background:dodgerblue;
}

.pink{
	background:deepPink;
}


/* small screen / mobile layout */
.mobileContent {
	display:none;
	width:100vw;
  padding: 1em;
}

.mobilePhoto {
	width: 100vw;
    height: auto;

}





.kennenlernen{background-color: var(--auszeichnungblau);display: grid;}

  .kennenlernenelemente {
    text-align: center;
    color: #fff;
    font-size: xx-large;
    display: flex;
    align-content: space-around;
    flex-wrap: nowrap;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}
  .kennenlernenelemente h2, .kennenlernenelemente .zumformular, .zummietformular{}
.kennenlernenelemente h2{font-size: 38px;line-height: 1.0;}
.kennenlernenelemente .zumformular, .zummietformular, .zummietformular_b{border: 3px solid #fff; border-radius: 7px;
padding:15px;cursor: pointer;font-size: 24px;line-height: 1.0; }

.zummietformular {
  border: 3px solid var(--auszeichnungblau);color:#fff;
  background-color: var(--auszeichnungblau);
}
.zummietformular_b {
  border:3px solid  #fff;color:#fff;    line-height: 1.0;visibility: hidden;

}

.kennenlernenelemente .zumformular:hover{background-color: #fff;color: var(--auszeichnungblau);}
.mailsection{padding: 4vw;
  position: relative;background-color: #ddd;}
.mailsection{
  display: block;
  z-index: 1000;
  position: fixed;
  clip-path: circle(101px at 124% -13%);
  transition: all 1.0s ease-out;
  top: 0;
  left: 0vw;
  background-color: #fff;
  height:60vw;
  width: 100vw;
  overflow: scroll;}
.mailsection.open{
  display: block;
  z-index: 1000;
  top: 0;
  left: 0vw;
  position: fixed;
clip-path: 	circle(2434px at 93% -6%);
overflow: scroll;
height:100vh;
width: 100vw;}

.mailkontakt{display: block;}

.mailkontakt p{font-weight: 400;}
.cross {
    content: "";
    display: block;
    position: fixed;
    top: 3%;
    right: 0;
    cursor: pointer;
    height: 64px;
    width: 64px;
    background-image: url(../iconscaro/cross.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

		form {
      grid-area: form;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 16px;
    padding: 0;
    padding-top:0;
    padding-right:0;
    padding-bottom:0;
    padding-left: 0;

grid-auto-rows: max-content;
}

::placeholder {
  color: #000;
  opacity: 1; /* Firefox */
}

input[required] ~ p:after {
  content: '*';
  color: red;
  font-size: 12px;
  margin-left: 4px;
}

::-ms-input-placeholder { /* Edge 12 -18 */
  color: #000;
}
input#Plz{width:auto;}
.full-width {

    grid-column: auto;
}
form p{-webkit-margin-before:0;margin-block-start:0; -webkit-margin-after:0; margin-block-end:0;}
input, textarea{   width: 100%;
    height: 10vh;
    border: var(--borderfarbe);
    color:#000;
    font-family:'Poppins', sans-serif !important;
    font-size: 15px;
    padding: 0px 0px 0px 10px;
  background-color:var(--hellstesblau);    border-bottom: 2px solid var(--auszeichnungblau);}
    input:focus{background:whitesmoke;}
		textarea{height:100px;padding:10px;
background-color:var(--hellstesblau);}
	input[type="checkbox" i] {
  display: none;
}

input[type="text"]:focus:invalid{border-left: 7px solid red;}
input[type="text"]:focus:valid{border-left: 7px solid green;}
input[type="email"]:focus:invalid{border-left: 7px solid red;}
input[type="email"]:focus:valid{border-left: 7px solid green;}
input[id="Plz"]:focus:invalid{border-left: 7px solid red;}
input[id="Plz"]:focus:valid{border-left: 7px solid green;}
input[id="telefon"]:focus:invalid{border-left: 7px solid red;}
input[id="telefon"]:focus:valid{border-left: 7px solid green;}
		label span {
  height: 20px;
  width: 20px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
	margin-right: 10px;

	font-size: 27px;
  top: 5px
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2717';
  position: absolute;
  top: -5px;
  left: 0;
  font-family: initial;
}
[type=checkbox]:checked:invalid + span:before {border: 1px solid red;}
#submit, .btn {border: none;
height:50px;
width:200px;
	position: relative;
	padding: 10px;
	border-radius: 10px;
 color: #fff;
	text-decoration: none;
	background-color: var(--auszeichnungblau);
 background-image: -o-linear-gradient(var(--hellesgrau), #fff);
  background-image: -webkit-gradient(linear, left top, left bottom, from(var(--hellesgrau)), to(#fff));
  background-image: linear-gradient(var(--hellesgrau), #fff);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 100% 0px;
  -webkit-transition: background-size .3s;
 -o-transition: background-size .3s;
  transition: background-size .3s;
}
.btn:visited{color:#000;}

.checker label{display: -ms-grid;display: grid;
    -ms-grid-columns: 1fr 9fr;
    grid-template-columns: 1fr 9fr;}

#submit:after, .btn:after{position: absolute;height:0px; width:100%;}
#submit:hover, .btn:hover{background-size: 100% 100%;border:2px solid var(--hellstesblau);color:#000;}
/*#submit:hover{color:#fff; background-color:var(--textfarbe);}*/

#submit:hover:after {
width: 100%;
}
.graffity{padding:0;}
.bg-graffity{background-image: url(../img/GrossQuer2.jpg); background-position: center;background-repeat: no-repeat;background-size: cover;min-height: 100vh;
    width: 100%;content: "";z-index: 3;top: 0;
  left: 0;display: grid;grid-template-columns: 1fr;}
.graffity-box1{padding: 4vw;}
.graffity-box1 h3{color:var(--bgdunkel);}
.graffity-box2{background-position: center;background-repeat: no-repeat;background-size: cover;}
.zitat{padding: 0;}



.bg-zitat{position:relative;background-image: url(../img/GrossQuer3.jpg); background-position: center;background-repeat: no-repeat;background-size: cover;min-height: 100vh;
    width: 100%;content: "";z-index: 3;top: 0;
  left: 0;}
.zitatbox{
  width: 60%;
z-index: 4;
bottom: 0;
left: 47vw;
padding: 4vw;
position: relative;}


.bild{padding: 0;}
.bildbox{position:relative;background-image: url(../img/GrossQuer4.jpg); background-position: center;background-repeat: no-repeat;background-size: cover;min-height: 100vh;
    width: 100%;content: "";z-index: 3;top: 0;
  left: 0;}
.vortraege, .projekt, .engagement, .icons, .kennenlernen{min-height: 50vh;}
.buttontop{z-index: 400; position: fixed;bottom: 3%; right: 3%;
    width: 12vw;
    height: 13vw;
    cursor: pointer;
    justify-content: space-around;
    display: flex;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;}
.buttontop img{
    height: 14vw;
}
.kontaktbox{display: grid; grid-template-columns: 1fr;grid-gap: 2vw;align-items: start;}
.kontaktbox2 span {visibility: hidden;    font-size: 0;}
.kontakt p{ font-weight: 400;}
/* ############# verleihung start ####################*/
.verleihbox{}




.vermietung{    color: #FFF;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  padding-top: 14vh;}

.vermietung .sectionheader p{color:#fff;}
.vermietung .sectionheader, .mietmich .sectionheader
{    width: 60vw;
  margin-left: 20%;}
.verleihgrid{    display: grid;
  width: 100%;
  background-color: var(--auszeichnungblau);
  padding-left: 0;
  padding-right: 0;
  padding-top: ;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0;
  height: auto;}
  .verleihgrid p{font-size: 13px;}

.verleih img{width: 100%;height: auto;}
.verleihinnerbox{position: relative;

  z-index: 100;
}

.verleihinnerbox p{
font-weight: bold;padding: 1%; }

  .verleihelemente {display: flex;
  background-color: #fff;
  flex-direction: column;
  justify-content: flex-start;
  color: #fff;
  align-content: space-around;
  align-items: flex-start;
  flex-wrap: nowrap;
background-color: var(--keiltecrot);
border-radius: 25px;}
.verleihelemente h2{
font-size: 2.0em;
letter-spacing: .15em;
margin: 0px 0 0px;
padding-bottom: 2px;
line-height: 1.2em;
padding-top: 0.6em;
}
.verleihelemente a{color:#fff;}
.mietmichsignet{position: relative;
z-index: 98;
height: 200px;
width: 208px;
background-image: url(../img/Miet_mich_blau.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
margin-bottom: 0;}
  .formularlink{display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;}
.mietmichsignet{
  position: relative;
  z-index: 98;
  height: 200px;
  width: 219px;
  background-image: url(../img/Miet_mich_blau.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  margin-bottom: 7vw;
}
.mietmichsignetv2{
  position: relative;
  z-index: 98;
  height: 200px;
  width: 219px;
  background-image: url(../img/Mietmichtop.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  margin-bottom: 7vw;
}
.mietmichsignet_b{position: relative;
  z-index: 98;
  height: 37vw;
  width: 37vw;
  background-image: url(../img/Button_miet_mich.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";}
  .mietkasten form{
        grid-area: form;
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 16px;
padding-top: calc(var(--vw, 1vw)* 1); 
padding-right: calc(var(--vw, 1vw)* 7);
padding-bottom: 10px;
padding-left: calc(var(--vw, 1vw)* 7);
        grid-auto-rows: -webkit-max-content;
        grid-auto-rows: max-content;
  }
.anruf{ position: relative;
  z-index: 98;
  height: 14vw;
  width: 20vw;
  background-image: url(../img/Tel-weiss.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
margin-top: 15vw;}

  .verleihelemente .zummietformular{margin-bottom: 6vh;}
  .miettext{padding:0 10% 0 10%;}
  .miettext a{    letter-spacing: 0em;
    white-space: nowrap;}

  .mietmich{
    display: block;
    z-index: 1000;
    position: fixed;
    clip-path: circle(101px at 124% -13%);
    transition: all 1.0s ease-out;
    background-color:var(--hellstesblau) ;
    top: 0;
    left: 0vw;
    height:60vw;
    width: 100vw;
    overflow: scroll;}
  .mietmich.open{
    display: block;
    z-index: 1000;
    top: 0;
    left: 0vw;
    position: fixed;
  clip-path: 	circle(2434px at 93% -6%);
  overflow: scroll;
  height:100vh;
  width: 100vw;
  padding-bottom: 19vh;}
  .mietmich form{padding: 1vw;}
  .mietmich .checklist{     display: grid;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
  .mietmich input[type="checkbox" i] {
    display:block;
  }
  .half-width {
width: 50%;
}
.half-width {
  width: 50%;
  }
  .lieferung {
    display: block;
  }
  .geraetex{
    display:none;
    transition: 0.5s;
  }
  form:has(#readresse:checked) .lieferung
  {
    display: none;
  
  }
  
  form:has(#weitere:checked) .geraetex {
      display: block;
      transition: 0.5s;
  }
  input[type="checkbox" i]{
    display: block;
    height: 6vh;
    width: 6vh;
  }
/* ############# verleihung ende ####################*/

.raster{    display: grid;
  grid-template-rows: 1fr; 
  grid-template-columns: 100%;
  grid-template-areas: 
 
  "a"
  "b"
"c" 
"d";
grid-gap: 8px;
}
.rastercontent1{grid-area: a;}
.rastercontent2{grid-area: b;}
.rastercontent3{grid-area: c;}
.rastercontent4{grid-area: d;}
.rastercontent img {
  width: 50%;
  float: left;
  margin-right: 10px;
  filter: contrast(0.95);
}

.impressum{padding-left:8vw;padding-right:8vw;}
.impressum-links{display: flex;
list-style: none;
width:100%;
height:100%;
    justify-content: space-around;
        align-items: self-start;margin-left: auto;flex-direction: column;padding-inline-start: 0;}
.impressum-links a, .kontaktbox2 a{color:#FFF;
display: block;
 text-decoration: none;
 font-weight: 400}
.datenschutzbutton, .datenschutzbuttonmail, .gelesen {border: 3px solid var(--auszeichnungblau); border-radius: 7px;
  padding:8px;cursor: pointer;font-size: 15px;line-height: 1.0;    width: 70%;
  margin-left: 15%;
  margin-right: 15%;    text-align: center;
  color: var(--auszeichnungblau);
  font-weight: 700;}
  #DATENSCHUTZTEXT{display: block;
    z-index: 1000;
    position: fixed;
    clip-path: circle(101px at 124% -13%);
    transition: all 1.0s ease-out;
    top: 0;
    left: 0vw;
    background-color: #fff;
    height:60vw;
    width: 100vw;
    overflow: scroll;padding: 1em;}
  #DATENSCHUTZTEXT.open{  display: block;
    z-index: 1000;
    top: 0;
    left: 0vw;
    position: fixed;
  clip-path: 	circle(3434px at 93% -6%);
  overflow: scroll;
  height:100vh;
  width: 100vw;background-color: var(--hellstesblau);padding: 1em;}
  #DATENSCHUTZTEXT.open .text{word-wrap: break-word;padding-top: 3em;}
 .footerbloecke .container{display: grid;grid-template-columns: 1fr;grid-column-gap: 0;color:#fff;}
 .footerbloecke .container a,  .footerbloecke .container a:hover, .footerbloecke .container p{color:#FFF}
  .footerbloecke .container a:hover{color:#FFF; text-decoration: underline;}

 .footerbloecke ul{padding-left: 0;}
 #footerblock-1{background-color: var(--auszeichnungblau); padding-top:18px;padding-bottom:18px;padding-right:18px;padding-left:30px;color:#FFF;}
 #footerblock-1  img{width: 100%;
  background-color: #fff;}
 #footerblock-2{background-color: var(--auszeichnungblau); padding:18px;color:#FFF;}
 #footerblock-3{background-color:var(--auszeichnungblau); padding:18px;color:#FFF;}
.upunkt{list-style:inside;}


footer {display:grid;}
footer h5{font-size: 3.0vw;}
footer {display:grid; grid-template-columns: 1fr; padding-left: 0vh;padding-right: 0vh;}
.footerlinks{text-align: center;}
.footerlinks h5{margin: 0.5vw;}
.footerlinks a:visited{color:#000; text-decoration: none;}
.verbaende_im_footer{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr;height:80px;grid-column-gap: 1em;}
  .verbaende_im_footer img.mittel{height: 18%;}
  .verbaende_im_footer img.kleiner{height: 16%;margin-left: 0;}
  .buttonssocial{display: grid;grid-template-columns: 1fr;}
.buttonssocial li{margin-bottom: 2vw; float: left;}
.buttonssocial .btn{background-color: rgb(0 89 144 / 0%);
  text-align: center;
  font-size: 12vw;background-image:none;padding-left:0;}
  .buttonssocial i{margin-right: 1em;color:#FFF;}
  .buttonssocial .btn:hover{background-size: 100% 100%;
    border: none;background-image:none;color:crimson;}
  .schwebend{position: fixed; z-index: 500; top:80%; right: 2%; height: 80px;width: 80px;background-image: url(../img/keiltec_leistungsstarkerPartner.png); background-position: center;background-repeat: no-repeat;background-size: cover;
  content: ""; visibility: hidden;}
/*############################ CREDITS ############*/


  .leistungsbox .credit{z-index: 10;
  position: relative;
  top: -2em;
  width: 100%;
  text-align: right;
  color: #fff;}
 .credit{z-index: 10;
    position: relative;
    top: -4em;
    width: 100%;
    text-align: right;
    
  font-size: small;
  padding-right: 2em;}



@media screen and (max-width: 668px) {
	.left {
		display:none;
	}
	
	.right {
		height:auto;
		width:100%;
		align-items:center;	
	}	
	
	.desktopPhotos {
		display:none;
	}
	
	.mobileContent {
    display: block;
    

}
	}
	




@media all and (min-width: 668px) {

  #mainnav{visibility: hidden;
	}
  #haupt-nav{visibility: visible;}
  .logomobile {

      width: 11%;

  }#mainnav #spezialzeile{
    position: relative;
    visibility: hidden;
    z-index: 100;
    top: -14px; 
    width: 100vw;
    height: 0vh;
}
#haupt-nav #spezialzeile {
  position: absolute;

  right: 5px;
  visibility: visible;
  z-index: 100;
}
#haupt-nav #spezialzeile p {
  position: relative;
  right: 0;
  font-family: 'Open+Sans:400,600,700',sans-serif !important;
  color: #000;
  font-size: 10px;
  white-space: nowrap;
  text-align: center;
}

.nav-links{clip-path: circle(101px at 100% -1%);}

.nav>li>a {font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  line-height: 75px;
  letter-spacing: .15em;
  padding: 0 20px;
  margin: -1px 0 0;
  background: 0 0 !important;}

  #spezialzeile {
    position: absolute;

    right: 5px;
    visibility: visible;
    z-index: 100;
}
  #spezialzeile p {
    position: absolute;
    right: 0;
    font-family: 'Open+Sans:400,600,700',sans-serif !important;
    color: #000;
    font-size: 10px;
    white-space: nowrap;
  }
  .titlebox {
    border: 1px solid #fff;
    padding: 30px;
    background-color: rgba(255,255,255,.6);
    width: 40vw;
    margin-left: 30vw;
    margin-right: 30vw;
  }
  .titlebox h1 {
    color: #016486;
    font-size: 3.125em;
    font-weight: 600;
    line-height: 1.1;
}
.topbox {
  padding: 4vw;
  position: relative;
  top: 42%;
  left:0%;
  right:0%
}


  .hallobox h2, .leistungen h2, .referenzen h2, .logogruppe h2, .news h2, .downloadsection h2, .impressum h2 {
    font-size: 2.8em;
    letter-spacing: .15em;
    margin: 33px 0 33px;
    padding-bottom: 48px;
    line-height: 1.6em;
    padding-top: 1.6em;
}
  .iconwrapper{    display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-column-gap: 7vw;
     align-items: center;
  }
  .topbox{
    top:calc(50vh);
  }
  .team{background-color:var(--auszeichnungblau);display: grid;padding: 0;}
  .team{ grid-template-columns: 2fr 1fr;min-height: 100vh;}


  .team-left{height:auto;background-repeat: no-repeat;background-size: cover;}
  .team-left{background-image:url(../img/team.jpg);background-position: center bottom ;}
  .team-right{padding:4vw;}
  .team-right h2{color: #FFF;font-size:2.0em;line-height: 1.4;}
  section.numbers{background-color: var(--auszeichnungblau);color:#fff;min-height: 10vh;}
  .animCounterTrigger{}
  .numbers .divider {
    border-top: 2px solid #fff;
  }.numbers h1{ font-size: 3.0rem;
    font-weight: 800;    text-align: center;
  }
  .numbers .row{display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;}
    .numbers p{    text-align: center;}
  
  

.heizmobil{background-color:var(--auszeichnungblau);    display: flex;
  padding: 0;
  flex-direction: column;}
.heizmobiloben {display: grid;  grid-template-columns: 4fr 4fr;
  min-height: 50vw;}


 .heizmobil-left{height:auto;background-repeat: no-repeat;background-size: cover;}

 .heizmobiloben  .heizmobil-left{background-image:url(../imgverleih/00-Heizmobil_a.jpg);background-position: right center ;background-size: contain;width:50vw;height: 50vw;}
.heizmobil-right{padding:1vw;}
.heizmobil-right h2{color: #FFF;font-size:2.0em;line-height: 1.4;}
  .heizmobil-right h2.textrot{color:var(--keiltecrot);}



  .firtstopbox{
    top:calc(20vh)
  }
  .schlagwoerter{
    display: grid;
    grid-template-columns: 1fr;

    width: 100%;
    position: absolute;
  
    top: 12em;
    height: 50vh;}
   .schl1{
    animation-duration: 11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft1;
    transform: translateX(+100%);
   }
   .schl2{
    animation-duration: 11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft2;
    transform: translateX(+100%);
   }
   .schl3{
    animation-duration: 11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft3;
    transform: translateX(+100%);
   }
   .schl4{
    animation-duration:11s;
    animation-timing-function: ease-in;
    animation-delay: 0;
    animation-iteration-count: 1;
    animation-name: slideInFromLeft4;
    transform: translateX(+100%);
   }
  .schlagwort{
    font-family: 'Open+Sans:400,600,700',sans-serif;
    font-weight: 700;
    color: #fff;
    width: 100%;
    margin: 0;
    top: 12em;
    font-size: 105px;
    text-shadow: 2px 2px 5px gray;}


  .titlebox{animation-duration: 10s;
        animation-timing-function: ease-in;
        animation-delay: 0s;
        animation-iteration-count: 1;
        animation-name: slideInTop;}
       
    .schwebend{animation-duration: 10s;
      animation-timing-function: ease-in;
      animation-delay: 0;
      animation-iteration-count: 1;
      animation-name: aufschnappen;}
      .homebutton{animation-duration: 2s;
        animation-timing-function: ease-in;
        animation-delay: 0;
        animation-iteration-count: 1;
        animation-name: slideInBottom;}
    .willkommen h2{animation-duration: 5s;
          animation-timing-function: ease-in;
          animation-delay: 0s;
          animation-iteration-count: 1;
          animation-name: slideInTopWillkommenslideoutbottom;}
   .homebutton{position: fixed; z-index: 500; bottom:2%; right: 2%; height: 50px;width: 50px;background-color: var(--hellesgrau); background-image:url(../img/top.svg);background-repeat: no-repeat;background-size: cover;
    content: ""; border-radius: 10px;}
    @keyframes slideInTopWillkommenslideoutbottom {
      0% {
        transform:scale(2.0, 2.0) translateY(-350%); color: #fff;  text-shadow: 2px 2px 5px gray;
      }
      1% {
        transform:scale(2.0, 2.0) translateY(-350%); color: #fff; text-shadow: 2px 2px 5px gray;
      }
      40%, 60% {
        transform: scale(2.0, 2.0) translateY(-100%); color:#fff; text-shadow: 2px 2px 5px gray;
      }
      100% {
        transform: scale(1.0, 1.0) translateY(0);color: #000; text-shadow: 2px 2px 5px #FFF;
      }
    }
  @keyframes slideInTop {
    0% {
      transform:scale(0.0, 0.0) translateY(-200%);
    }
    90% {
      transform: scale(0.0, 0.0) translateY(0);
    }
    100% {
      transform: scale(1.0, 1.0) translateY(0);
    }
  }
  @keyframes slideInBottom {
    0%, 30%{
      transform:scale(0.0, 0.0) translateY(400%) ;
    }
    100% {
      transform: scale(1.0, 1.0) translateY(0);
    }
  }
  @keyframes aufschnappen {
    0%{
      transform:  translateX(200%);
    }
    90% {
      transform: translateX(200%);
    }
    100% {
      transform:translateX(0);
    }
  }
  @keyframes click {
    0%{
      transform: filter (blur(10px));
    }
    100% {
      transform: filter (blur(0px));
    }
  }
  @keyframes slideInFromLeft1 {
    0%{
      transform: translateX(-100%) ;
    }
    55%, 80% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  @keyframes slideInFromLeft2 {
    0%{
      transform: translateX(-100%) ;
    }
    59%, 84% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  @keyframes slideInFromLeft3 {
    0%{
      transform: translateX(-100%) ;
    }
    63%, 88% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  @keyframes slideInFromLeft4 {
    0%{
      transform: translateX(-100%) ;
    }
    61%, 86% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(+100%);
    }
  }
  .referenzen {
    height: calc(88vw/5);
    width: calc(88vw/5);
    transition: 0.4s;
  }
  .ausgeblendet {
    transform: scale(0.0, 0.0);
    opacity: 0;
    transition: .8s;
    height: 0;
}
  
  section {
    position: relative;
    padding-top: 100px;
    min-height: 42vh;
    overflow: hidden;
    padding: 2vw;
}
#PARTNER{min-height: 35vh;}
  .hallobox, .logogruppebox, .newsbox, .halloverleihbox {
    width: auto;
    margin-left: 20%;
    margin-right: 20%;
}
  .hallobox h2, .leistungen h2, .referenzen h2, .logogruppe h2, .news h2,.vermietung h2, .downloadsection h2, .impressum h2, .halloverleihbox h2 {
    font-size: 2.0em;
    letter-spacing: .15em;
    margin: 33px 0 33px;
    padding-bottom: 48px;
    line-height: 1.2em;
    padding-top: 1.6em;
}
.bg-topbox {
  background-image: url(../img/GrossQuer1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  width: 100%;
  content: "";
  z-index: 3;
  top: 0;
  left: 0;
}
.ueberbox {
  position: relative;
  margin-left: 15vw;
  /* margin-right: 0vw; */
  text-align: center;
}
.video-container iframe,
  .video-container object,
  .video-container embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 80%;
      height: 80%;
  }
.leistungsbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
}
  .projekt .projektbildinnen{position:absolute;background-image: url(../img/projektinnen.png);z-index: 2; background-position: center;
    background-repeat: no-repeat;
    background-size: 43%;
    content: "";height: 100vh;width: 100vw; }
  .projekt .projektbildaussen{position:absolute;background-image: url(../img/projektaussen.png);z-index: 3; background-position: center;
    background-repeat: no-repeat;
    background-size: 43%;
    content: "";height: 100vh;width: 100vw;}
  .bg-topbox{background-position: top;}
  .icon-front img{    height: 12vw;}
  .referenzen-a .open, .referenzen-b .open, .referenzen-f .open, .referenzen-g .open, .referenzen-k .open,  .referenzen-l .open, .referenzen-p .open, .referenzen-q .open, .referenzen-hh .open, .referenzen-ii .open, .referenzen-mm .open, .referenzen-nn .open, .referenzen-rr .open, .referenzen-ss .open, .referenzen-ww .open, .referenzen-xx .open{transform: scale(2.0, 2.0)translateX(calc(100% / 4));}
  .referenzen-c .open, .referenzen-h .open, .referenzen-m .open, .referenzen-r .open, .referenzen-jj .open, .referenzen-oo .open, .referenzen-tt .open, .referenzen-yy .open{transform: scale(2.0, 2.0);}
  .referenzen-d .open, .referenzen-e .open, .referenzen-i .open, .referenzen-j .open, .referenzen-n .open, .referenzen-o .open, .referenzen-s .open, .referenzen-gg .open, .referenzen-kk .open, .referenzen-ll .open, .referenzen-pp .open, .referenzen-qq .open, .referenzen-uu .open, .referenzen-vv .open, .referenzen-zz .open{transform: scale(2.0, 2.0)translateX(calc(100% / -4));}
  .open .referenzen-text{opacity:1.0;transition: 2s;}
  .open .kreuza, .open .kreuzb, .open .kreuzc,.open  .kreuzd, .open  .kreuze, .open  .kreuzf, .open  .kreuzg, .open .kreuzh,  .open .kreuzi, .open  .kreuzj, .open  .kreuzk, .open  .kreuzl,  .open .kreuzm,  .open .kreuzn, .open .kreuzo,  .open .kreuzp,  .open .kreuzq,  .open .kreuzr, .open  .kreuzs,  .open .kreuzgg, .open  .kreuzhh, .open  .kreuzii,  .open .kreuzjj,  .open .kreuzkk,  .open .kreuzll,  .open .kreuzmm,  .open .kreuznn,  .open .kreuzoo,  .open .kreuzpp,  .open .kreuzqq,  .open .kreuzrr,  .open .kreuzss,  .open .kreuztt,  .open .kreuzuu,  .open .kreuzvv,  .open .kreuzww,  .open .kreuzxx,  .open .kreuzyy,  .open .kreuzzz{opacity: 1.0; height:250px; width:250px;}
  .referenzen-text {
    padding: 1em;
    background-color: rgba(255,255,255, 0.9);
    transition: 0.5s;
    position: absolute;
    left: 0px;
    right: 30px;
    width: 70%;
    top: 180px;
    opacity: 0;
    font-size: 8px;
}

.leistung-a-text, .leistung-b-text,.leistung-c-text,.leistung-d-text{
  display: block;
  z-index: 1000;
  position: fixed;
  clip-path: circle(101px at 110% -13%);
  transition: all 1.0s ease-out;
  top: 0;
  left: 0vw;
  background-color: #fff;
  height:60vw;
  width: 100vw;
  overflow: scroll;}
  .leistung-a-text.open, .leistung-b-text.open, .leistung-c-text.open, .leistung-d-text.open{
    display: block;
    z-index: 1000;
    top: 0;
    left: 0vw;
    position: fixed;
	clip-path: 	circle(2434px at 93% -6%);
	overflow: scroll;
	height:60vw;
  width: 100vw;}
  .artikel_offen article{display:grid; grid-template-columns: 1fr 1fr;align-content:start;grid-gap: 1em;}
  .artikel_offen .links, .artikel_offen .rechts{ display:flex;
    flex-direction:column;
    justify-content:flex-start;
    margin-top: 3em;}
    .artikel_offen .rechts h2{position: relative;
      top: -2em;
      margin: 0;
      padding-bottom: 0;}
    .artikel_offen img{    width: 100%;}
    .mailsection{padding: 4vw;
      position: relative;background-color: #ddd;}
    .mailsection{
      display: block;
      z-index: 1000;
      position: fixed;
      clip-path: circle(101px at 110% -13%);
      transition: all 1.0s ease-out;
      top: 0;
      left: 0vw;
      background-color: #fff;
      height:60vw;
      width: 100vw;
      overflow: scroll;}
      .datenschutzbuttonmail{    text-align: center;
        background-color: var(--auszeichnungblau);
        color: #FFF;
        height: max-content;
        padding: 17px;}
  .iconinfo {
    height: 12vw;
   line-height: 1.4em;
   padding-left: 4em;
   padding-right: 4em;}
    .referenzenbox { display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;grid-gap:2vw}
      .impressumbox{ display: grid;
        grid-template-columns: 1fr 1fr 1fr;  ;}
        .downloadbox {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-template-areas:
              "a b c d"
              "e f g h"
              "i j k .";
          grid-gap: 5em;
          padding-left: 4vw;
          padding-bottom: 4vw;
          padding-right: 4vw;
      }
      .mobilePhoto {
visibility:hidden;
height: 0;
    }
  .contacts {
      display: grid;
      grid-template-columns: 1fr;
  }
  .cross {
    content: "";
    display: block;
    position: fixed;
    top: 0%;
    right: 0;
    cursor: pointer;
    height: 100px;
    width: 100px;
    background-image: url(../iconscaro/cross.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
  form {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
    -ms-grid-column-span: 3;
    grid-area: form;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 16px 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 16px;
  padding: 1vw 16vw 10px 7vw;
  padding-top:calc(var(--vw, 1vw) * 1);
  padding-right:calc(var(--vw, 1vw) * 20);
  padding-bottom:10px;
  padding-left: calc(var(--vw, 1vw) * 20);
  grid-auto-rows: -webkit-max-content;
  grid-auto-rows: max-content;
  }

  .full-width {
      -ms-grid-column: 1;
      -ms-grid-column-span: 2;
      grid-column: 1 / 3;
  }
  input, textarea, select{ color:#000;  width: 100%;
      height: 3vw;
      border: var(--borderfarbe);
      border-bottom: 2px solid var(--auszeichnungblau);
      font-family:'Poppins', sans-serif !important;
      font-size: 15px;
      padding: 0px 0px 0px 10px;
    background-color:var(--hellstesblau);}

  .hallobox h4, .ueberbox h4, .boorbergruppebox h4, .vortraegebox h4, .engagementbox h4 {position: relative;
      left: 9vw;
      width: 81vw;}

  .bg-graffity{background-image: url(../img/GrossQuer2.jpg);display: grid;grid-template-columns: 1fr 1fr;}
  .graffity-box1 h3{color:var(--bgdunkel);font-size: xx-large;
    line-height: 1.6;}
.kontaktbox{display: grid; grid-template-columns: 1fr 1fr 1fr;grid-gap: 6vw;}
.partnerlogogrid{display: grid;  grid-template-columns: 1fr 1fr 1fr 1fr; }

.kennenlernenelemente {
  text-align: center;
  color: #fff;
  font-size: xx-large;
  display: flex;
  align-content: center;
  flex-wrap: nowrap;
  align-items: center;
  justify-content:space-evenly;
  flex-direction: row;
}
.zummietformular {
  border: 3px solid #fff;
  border-radius: 7px;
  padding: 15px;
  cursor: pointer;
  font-size: 2.2vw;
  line-height: 1.0;
  color: #fff;
  background-color: var(--auszeichnungblau);
  width: 60%;
  margin-left: 20%;
}
.zummietformular_b {
  border: 3px solid #fff;
  border-radius: 7px;
  padding: 15px;
  cursor: pointer;
  font-size: 2.2vw;
  line-height: 1.0;
  visibility: hidden;
}
.buttontop {
    z-index: 400;
    position: fixed;
    bottom: 3%;
    right: 10%;
    width: 12vh;
    height: 12vh;
    cursor: pointer;
    right: 0%;
    width: 4vw;
    height: 4vw;
    justify-content: space-around;
    display: flex;
    align-content: center;
    align-items: stretch;
    flex-wrap: wrap;
}
.buttontop img {
    height: 5vw;
}


#MAILKONTAKT, #MIETMICH{background-color:var(--hellstesblau) ;}
.impressum-links a{ font-size: 1.4vw;}
.impressum-b{text-align: center;}
.impressum-c{
  text-align: right;
}
.leistungen .sectionheader p, .references .sectionheader p, .logogruppe p,
.downloadsection .sectionheader p {
  letter-spacing: .05em;
  line-height: 30px;
  font-size: 16px;
  color: #000;
  text-align: center;
  width: 100vw; padding-right: 20vw; padding-left: 20vw;
}
.unserenamen{font-size:1.2vw;}
/* ############# verleihung start ####################*/
.heizmobil-right H2{    font-size: 2.6rem;
  line-height: 1.0;margin:0;}
  .klammer{        display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            flex-direction: row;
    }
  .klammer img{width:80%; height: auto;}
.heizmobil-right p{                font-size: 1.8vw;
  line-height: 1.6;
  color: #fff;
  width: auto;}
  .heizmobilunten{
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 3vw;}
  .heizmobilunten .heizmobiltafel{
    position: relative;
    width: 52vw;
    background-color: #fff;

    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 1vw;
    border: 8px solid var(--keiltecrot);
  }
   .heizmobil-right .formularlink{    display: flex;
    align-items: center;
    justify-content: space-evenly;}
  .heizmobilunten .heizmobiltafel h3{}
  .heizmobilunten .heizmobiltafel li{list-style: disc;}
.infobox1{background-color: var(--auszeichnungblau);color:#fff;    padding: 2vw;}
.infobox1 .preisliste, .infobox1 .anmerkungsliste{margin-left: 4vw;
  margin-right: 4vw;}
.infobox1 .preisliste{    display: grid;
  grid-template-columns: 1fr 1fr;}
.infobox1 .anmerkungsliste{}
.infobox1 .preisitem{}
.infobox1 .preis{font-size: 1.6rem;font-weight: 700;text-align: right;}
.infobox1 .preisanmerkung{grid-column:1/3;}
.infobox2{display:grid;grid-template-columns: 1fr 1fr;    margin: 4vw; background-color: var(--hellstesblau);
  border:1px solid var(--auszeichnungblau);
}
.infobox2 p{    padding: 5px;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid var(--auszeichnungblau);font-size: medium;}
.infobox2 .maschhead{grid-column:1/3; background-color: var(--auszeichnungblau);    color: #fff;
  font-weight: 700;
  text-align: center;}
.infobox2 .maschinfo{}
.infobox2 .maschwert{}
.infobox2 .ddd{background-color:#bec5df;}
.infobox2 .maschgrid{display: grid;grid-template-columns: 1fr 1fr 1fr;}
.infobox2 .maschinfoliste{border: 1px solid var(--auszeichnungblau);}
.infobox2 ul{}
.infobox2 ul p{border:none; font-size: 0.9rem;}
.infobox2 li, .infobox3 li{list-style: disc;}
.infobox3{display: flex;
  flex-direction: column;
  justify-content: center;margin: 4vw;}
.infobox3 .if3oben{display: grid;
  flex-direction: row;
  grid-template-columns: 1fr 1fr;}
.infobox3 .if3obenli, .infobox3 .if3obenre{padding: 1vw;}
.infobox3 .if3unten{padding: 1vw;}
.infobox3 h3{margin-left: 1em;}

.verleihbox{}
.vermietung{margin-bottom: 11vh;}
.vermietung .sectionheader p{}
.vermietung .sectionheader, .mietmich .sectionheader{width: 50vw;
  margin-left: 25%;}
.verleihgrid{    display: grid;
  width: 100%;
  background-color: var(--auszeichnungblau);
  padding-left: 3vw;
  padding-right: 3vw;
  padding-top: 3vw;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-column-gap: 1vw;
}

.verleih img{width: 100%;height: auto;}
.verleihinnerbox{position: relative;

  z-index: 98;
}
.verleihinnerbox p{color:#fff;font-weight: bold;padding: 1%; background-color: var(--auszeichnungblau);}
.verleihgrid p {
  font-size: 16px;
}


.verleihelemente {
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items:flex-start;
      background-color: var(--keiltecrot);
      height: 70vw;
      width: 70vw;
      align-content: center; 
      margin-bottom: 2vw; 
      padding-bottom: 4vh;
}
.verleihelemente h2{
  font-size: 1.6em;
  letter-spacing: .15em;
  margin: 0px 0 0px;
  padding-bottom: 2px;
  line-height: 1.2em;
  padding-top: 0.6em;
}
.mietmichsignet{position: relative;
  z-index: 98;
  height: 200px;
  width: 208px;
  background-image: url(../img/Miet_mich_blau.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
margin-bottom: 0;
top: -13%;
        left: -13%;}
        .mietmichsignetv2{
          position: relative;
  z-index: 98;
  height: 200px;
  width: 208px;
  background-image: url(../img/Mietmichtop.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
margin-bottom: 0;
top: -13%;
        left: -13%;
        }
  .mietmichsignet_b{position: relative;
    z-index: 98;
    height: 9.9vw;
    width: 10.6vw;
    background-image: url(../img/Button_miet_mich.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    content: "";}
    .miettext{padding:0 10% 0 10%;}
    .anruf{height: 6.9vw;
      width: 9.6vw;
      margin-top: 5vw;}
  .verleihelemente .zummietformular{margin-bottom: 0;}
  .mietmich{
    display: block;
    z-index: 1000;
    position: fixed;
    clip-path: circle(101px at 124% -13%);
    transition: all 1.0s ease-out;
    background-color:var(--hellstesblau) ;
    top: 0;
    left: 0vw;
    height:60vw;
    width: 100vw;
    overflow: scroll;}
  .mietmich.open{
    display: block;
    z-index: 1000;
    top: 0;
    left: 0vw;
    position: fixed;
  clip-path: 	circle(2434px at 93% -6%);
  overflow: scroll;
  height:100vh;
  width: 100vw;}
  .mietmich form{padding: 0vw;}
  .mietmich input[type="checkbox" i] {
    display:block;
  }
  .abfrage, .abfragegeraet{
    display: grid;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-template-columns: 1fr 4fr;
  }
  .mietmich .felderboxa{
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr;
    text-align: left;
  }
  [required] ::placeholder:after {
    content: '*';
    color: red;
    font-size: 12px;
    margin-left: 4px;
  }
  .half-width {
width: 50%;
}
.lieferung {
  display: block;
}
.geraetex{
  display:none;
  transition: 0.5s;
}
form:has(#readresse:checked) .lieferung
{
  display: none;

}

form:has(#weitere:checked) .geraetex {
    display: block;
    transition: 0.5s;
}
input[type="checkbox" i]{
  display: block;
  height: 6vh;
  width: 6vh;
}
.raster{        display: grid;
          grid-template-rows: 1fr 1fr 1fr;
          grid-template-columns: 40% 20% 20% 20%;
          grid-template-areas:
          "a . . ."
          ". b c d";
          grid-gap: 8px;
}

.rastercontent1{grid-area: a;}
.rastercontent2{grid-area: b;}
.rastercontent3{grid-area: c;}
.rastercontent4{grid-area: d;}
.rastercontent img {
  width: 50%;
  float: left;
  margin-right: 10px;
  filter: contrast(0.95);
}




/* ############# verleihung ende ####################*/

footer h5{font-size: 1.0vw;}
footer {display:grid; grid-template-columns: 2fr;}
.footerbloecke .container {
  display: grid;
  grid-template-columns: 2fr 2fr 3fr;
  grid-column-gap: 0;
  color: #fff;
}
.fusszeile{ padding-left: 4vh;padding-right: 4vh;display: grid; grid-template-columns: 1fr 1fr 1fr;grid-gap: 6vw;}
.footerlinks{text-align: center;}
.footerlinks h5{margin: 0;font-weight:normal;    font-size: smaller;line-height: normal;}
.footerlinks a{cursor: pointer;}
.footerlinks a:visited{color:gray; text-decoration: none;}
.buttonssocial .btn {
  background-color: rgb(0 89 144 / 0%);
  text-align: center;
  font-size: 3vw;
  background-image: none;
  padding-left: 0;
}
.schwebend{position: fixed; z-index: 500; top:62%; right: 2%; height: 200px;width: 200px;background-image: url(../img/keiltec_leistungsstarkerPartner.png); background-position: center;background-repeat: no-repeat;background-size: cover;
  content: "";     visibility: visible;}
}
@media (min-width:1000px){
  .verleihelemente {

    height: 40vw;
    width: 40vw;
}
}
@media  (min-width: 1500px){
.verleih_php section{margin-left: 10vw;margin-right: 10vw;}
section{    min-height: 40vh;}
.heizmobiloben {
  display: grid;
    grid-template-columns: 4fr 4fr;
  min-height: 30vw;
}
.heizmobiloben .heizmobil-left {
  background-image: url(../imgverleih/00-Heizmobil_a.jpg);
  background-position: right center;
  background-size: contain;
  width: 40vw;
  height: 40vw;
}
.heizmobilunten .heizmobiltafel {
  width: 30vw;
}
.klammer{display: flex;flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;}
.klammer img{width:400px; height: auto;}

.mietmich.open {
    display: block;
    z-index: 1000;
    top: 0;
    left: 0vw;
    position: fixed;
    clip-path: circle(3000px at 100% 0%);
    overflow: scroll;
    height: 100vh;
    width: 100vw;
    margin-left: 0;
    padding-left: 20vw;
    padding-right: 20vw;
}
.verleihelemente {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--keiltecrot);
  height: 40vw;
  width: 40vw;
  align-content: center; 
  margin-bottom: 2vw; 
  padding-bottom: 4vh;
}
.verleihelemente h2{
font-size: 2.0em;
letter-spacing: .15em;
margin: 0px 0 0px;
padding-bottom: 2px;
line-height: 1.2em;
padding-top: 0.6em;
}
.mietmichsignet{position: relative;
z-index: 98;
height: 200px;
width: 208px;
background-image: url(../img/Miet_mich_blau.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
margin-bottom: 0;
top: -13%;
        left: -13%;}
        .mietmichsignetv2
        {position: relative;
          z-index: 98;
          height: 200px;
          width: 208px;
          background-image: url(../img/Mietmichtop.png);
          background-position: center;
          background-repeat: no-repeat;
          background-size: contain;
          content: "";
          margin-bottom: 0;
          top: -13%;
                  left: -13%;}
.referenzenbox {transition: 0.3s;}
.referenzenbox .paket{height:17vw; width:17vw;}
.paket h3, .paket p{padding: 0.6em;}

  .referenzen.ausgeblendet {width: 17vw;height: 0;}
.referenzen .open{}
.referenzen-text{
  padding: 1em;
    background-color: rgba(255,255,255, 0.9);
    transition: 0.5s;
    position: absolute;
    left: 0px;
    right: 30px;
    width: 70%;
    top: 200px;
    opacity:0;
    font-size: 8px;
}
/**.leistungen .sectionheader, .reference .sectionheader, .mailkontakt .sectionheader, .leistungen .sectionheader,.logogruppe .sectionheader, .downloadsection .sectionheader, .impressum .sectionheader{width: auto;
  margin-left: 30%;
  margin-right: 30%;
  margin-bottom: 10%;}
  .leistung {
    cursor: pointer;
    height: 47vh;
}*/
.leistungen .sectionheader p, .references .sectionheader p, .logogruppe p,
.downloadsection .sectionheader p{
  letter-spacing: .05em;
  line-height: 30px;
  font-size: 16px;
  color: #000;
  text-align: center;
  width: 100vw; padding-right: 20vw; padding-left: 20vw;
}
.raster{    display: grid;
  grid-template-rows: 1fr 1fr 1fr; 
  grid-template-columns: 27.5%  15% 15% 15% 27.5%;
  grid-template-areas: 
  "flyerseiteal a a a flyerseitear"
  "flyerseitebl b c d flyerseitebr";
  grid-gap: 8px;
}
/*achtung für 4er grid*/
.paket{   background-position: center;
  background-repeat: no-repeat;
  background-size: cover;}
  .kreuza, .kreuzb, .kreuzc, .kreuzd, .kreuze, .kreuzf, .kreuzg, .kreuzh, .kreuzi, .kreuzj, .kreuzk, .kreuzl, .kreuzm, .kreuzn, .kreuzo, .kreuzp, .kreuzq, .kreuzr, .kreuzs, .kreuzt, .kreuzu, .kreuzv, .kreuzw, .kreuzx, .kreuzy, .kreuzz{
    height:1px; width:1px; position: relative;
    top: 0px;
    right: 0;
    opacity: 0.0;transition: 2s;}
    .open .kreuza, .open .kreuzb, .open .kreuzc,.open  .kreuzd, .open  .kreuze, .open  .kreuzf, .open  .kreuzg, .open .kreuzh,  .open .kreuzi, .open  .kreuzj, .open  .kreuzk, .open  .kreuzl,  .open .kreuzm,  .open .kreuzn, .open .kreuzo,  .open .kreuzp,  .open .kreuzq,  .open .kreuzr, .open  .kreuzs,  .open .kreuzt, .open  .kreuzu, .open  .kreuzv,  .open .kreuzw,  .open .kreuzx,  .open .kreuzy,  .open .kreuzz
    {opacity: 1.0; height:300px; width:300px;}




}
@media  (min-width: 2500px){
  .verleih_php section{margin-left: 20vw;margin-right: 20vw;}
  .zummietformular_b {

    font-size: 1.4vw;
}
.heizmobiloben .heizmobil-left {
  background-image: url(../imgverleih/00-Heizmobil_a.jpg);
  background-position: right center;
  background-size: contain;
  width: 30vw;
  height: 30vw;
}
.heizmobilunten .heizmobiltafel {
  width: 30vw;
}
.verleihelemente {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
  background-color: var(--keiltecrot);
  height: 40vw;
  width: 40vw;
  align-content: center; 
  margin-bottom: 2vw; 
  padding-bottom: 4vh;
}
.verleihelemente h2{
font-size: 2.0em;
letter-spacing: .15em;
margin: 0px 0 0px;
padding-bottom: 2px;
line-height: 1.2em;
padding-top: 0.6em;
}
.mietmichsignet{position: relative;
z-index: 98;
height: 200px;
width: 208px;
background-image: url(../img/Miet_mich_blau.png);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
content: "";
margin-bottom: 0;
top: -13%;
left: -42%;}
.mietmichsignetv2{position: relative;
  z-index: 98;
  height: 200px;
  width: 208px;
  background-image: url(../img/Mietmichtop.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  margin-bottom: 0;
  top: -13%;
  left: -42%;}
}
@media (aspect-ratio: 16/9)  {
  .helldunkel h1, .helldunkel h2, .helldunkel h3, .helldunkel h4, .helldunkel h5, .helldunkel h6, .helldunkel p {
    color: orange;
}
}
@media (orientation: landscape) {
  .schwebend{    visibility: hidden;}
  .verleihgrid p {
    font-size: 13px;
  }
  }