/* Template for Home © admotion*/

#showbox {position: relative; height: calc(100vh - 180px); overflow: hidden;}
#showbox .sky {position: absolute; height: 100%; width: 100%; object-fit: cover; z-index: -1;}

h1 {font-size: 20px;color: #ffffff;text-shadow: 0 0 10px #000; text-transform: none; font-weight: 700; letter-spacing: 0; margin: 0;}

#tagline {position: absolute; top: 0; font-size: 50px; text-transform: uppercase; letter-spacing: 3px; line-height: 1; opacity: 0.7;color: #fff; animation: tagline 3.5s ease-out; left: 5%; z-index: 2; width: 75%;}
#tagline .mod-custom {transform: translateY(-70%);width: 75%;}
.scrolled #tagline .mod-custom {position: fixed;}
#container-bild-vordergrund {position: absolute; bottom: 0%; width: 100%; z-index: 3; }

#bild-vordergrund {width: 100%; position: relative; z-index: 10; }
#bild-vordergrund::after {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 75%;background: -moz-linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);background: -webkit-linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);}

#home-lead {position: absolute; bottom: 120px; width: 65%; left: 5%; z-index: 4; animation: home-lead 3s ease-out; }
@keyframes home-lead { 0% { bottom: -200px;} 100% { bottom: 120px;} }

#showbox .welle { z-index: 11;}

#showbox img { min-height: 400px; object-fit: cover; width: 100%;}

h2 { margin: 0px 0px 15px 0px; padding: 0px; font-size: 30px; line-height: 110%; font-weight: 300; letter-spacing: 3px; color: #9dcc36; text-transform: uppercase;}

.blog-item { border-bottom: 0px solid #9dcc36;}
.blog-item:first-child { border-bottom: 0px solid #9dcc36;}


/* News Aktuell Teaser */

.uk-scope .uk-card-default { color: #000;}
.newshome .uk-card  {box-shadow: 0 0 20px rgba(0,0,0,0.2); border-radius: 20px; overflow: hidden;}
.newshome .uk-inline-clip::after {content: ""; background: url(/images/Header/welle.svg) no-repeat top center; background-size: 100% 100%; width: 100%; height: 15%; position: absolute; bottom: 0; left: 0;}

.newshome .uk-card-body { padding: 10px 20px 20px; position: relative;}
.newshome .uk-card-body .uk-margin { height: 92px; overflow: hidden; margin-bottom: 0; }
.newshome .uk-article-meta { text-transform: uppercase; letter-spacing: 1px;}
.newshome .uk-button { position: absolute; top: -30px; right: 30px; font-size: 13px; margin-right: 0; line-height: 2.5;}

.newshome .uk-card-body::after {content:"";background:-moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); position: absolute; bottom: 0; height: 70px; width: 100%; left: 0;}


/* Button */


#button { width: 160px; height: 160px; position: absolute; top: calc(100vh - 290px); right: 25px; background: #fff; border-radius: 50%; color: #8c0343; text-align: center; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; font-size: 18px; font-size-adjust:  line-height: 1.3; z-index: 100; box-shadow: 0 0 20px rgba(0,0,0,0.2); transform: rotate(-10deg);padding: 10px; transition: 0.3s; hyphens: manual;}
#button:hover {background: #8c0343; color: #fff; transform: scale(1.1) rotate(-10deg);}
#button a {color: #8c0343; display: block;}
#button:hover .button-img {transform: scale(1.2); background: #fff; color: #8c0343;}
#button:hover a {color: #fff;}
#button .custom {display: flex; justify-content: center; align-items: center;width: 100%; height: 100%;  box-sizing: border-box;}
.button-img { position: absolute; width: 60px; height: 60px;background: #8c0343; color: #fff; font-size: 38px; border-radius: 50%;box-shadow: 0 0 20px rgba(0,0,0,0.2); padding: 10px; box-sizing: border-box; top: -15px;right: 5px; transition: 0.3s; animation: pulse 2s infinite ease;}



/* Teaser */

#home-teaser-l{border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-bottom: 50px; position: relative;}
#home-teaser-r{border-radius: 20px; box-shadow: 0 0 20px rgba(0,0,0,0.2); margin-bottom: 50px; position: relative;}
#home-teaser-img {width: 100%; min-height: 150px; position: relative;}
#home-teaser-img::after {content: ''; position: absolute; top: auto; bottom: 0; right: 0; width: 100%; height: 40%; background: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
#home-teaser-img img {position: absolute; width: 100%; height: 100%; object-fit: cover; border-top-left-radius: 20px;border-top-right-radius: 20px;}
#home-teaser-text {width: 100%; height: auto; padding: 20px; box-sizing: border-box;}

#home-teaser-icon {width: 45px; height: 45px; padding: 10px; box-sizing: border-box; position: absolute; left: 50px; top: -22px;z-index: 100; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.2); border-radius: 50%;}
.no-margin-btm {margin-bottom: 0 !important;}






@media(min-width:768px){
    .newshome .uk-card-body .uk-margin { height: 48px; }

   
    h1 {font-size: 27px;}
    #tagline {font-size: 70px;}
    #tagline .mod-custom { transform: translateY(-46%); width: 100%;}
}



@media(min-width:1000px){
        .newshome .uk-card-body .uk-margin { height: 53px; }

    .blog-item:first-child h2 { font-size: 66px;margin-bottom: 55px;}
    h2 { font-size: 50px;margin-bottom: 35px;}
    
    .newshome .uk-card-body { padding: 0px 30px 30px;}
    .newshome .uk-button { font-size: 1em; top: -43px;}


}

@media(min-width:1250px){
        #button {right: 50px;top: calc(100vh - 320px);}

    h1 {font-size: 37px;}
    #tagline {font-size: 70px;top: 0;}
    #tagline  .mod-custom {transform: translateY(-40px);}
    #home-lead {bottom: 160px; width: 50%; }
    @keyframes home-lead { 0% { bottom: -200px;} 100% { bottom: 160px;} }
    
    
    
    
    
    #home-teaser-l{display: flex; justify-content: space-between; align-items: stretch; margin-right: 10%; margin-bottom: 100px; transition: 0.2s; }
    #home-teaser-r{display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: stretch; margin-left: 10%;margin-bottom: 100px; transition: 0.2s; }
    #home-teaser-l:hover{transform: scale(1.02);}
    #home-teaser-r:hover{transform: scale(1.02);}
    #home-teaser-img {width: 40%; height: auto; position: relative;}
    #home-teaser-l #home-teaser-img img {border-bottom-left-radius: 20px;border-top-right-radius: 0px;}
    #home-teaser-r #home-teaser-img img {border-top-left-radius: 0px;border-bottom-right-radius: 20px;}
    #home-teaser-l #home-teaser-img::after {content: ''; position: absolute; top: 0; right: 0; width: 40%; height: 100%; background: -moz-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);}
    #home-teaser-r #home-teaser-img::after {content: ''; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: -moz-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: -webkit-linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);}
    #home-teaser-img img {position: absolute; width: 100%; height: 100%; object-fit: cover;}
    #home-teaser-text {width: 60%; height: auto; padding: 50px 50px 50px 80px; box-sizing: border-box;}
     #home-teaser-r #home-teaser-text { padding: 50px 80px 50px 50px;}
    
    #home-teaser-icon {width: 80px; height: 80px; padding: 15px; top: -40px;}
    #home-teaser-r #home-teaser-icon {left: auto; right: 50px;}

    
    
    

}

@media(min-width:1450px){
    
#button { width: 220px; height: 220px; top: calc(100vh - 400px); right: 5%; font-size: 24px; line-height: 1.3;}
.button-img { width: 70px; height: 70px; top: -20px;right: 10px; transition: 0.3s;}

    
}

@media(min-width:1650px){
   
    .blog-item:first-child { margin-left: 140px;}
    #tagline {font-size: 100px;top: 0;}

    #thema-icon { height: 486px; padding-right: 40px; width: auto;right: calc(100% + -75px);}
    #thema-icon img { width: none; padding-right: 0px; float: none;}
    #thema-icon h4 {margin: 0; font-size: 13px; letter-spacing: 0.5px; }
    
    .icon-img { width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; text-align: center; z-index: 2; position: relative;}

    .icon-text { width: 0; overflow: hidden; transition: 0.2s;}

    #icon-fernwaerme {padding:10px; width: auto; box-sizing: border-box; border-radius: 50px;display: flex; justify-content: center; align-items: center; transition: 0.2s;}
    #icon-fernwaerme:hover {box-shadow: 0 0 20px rgba(0,0,0,0.2);}

    #icon-gas {padding:10px; width: auto; box-sizing: border-box; border-radius: 50px;display: flex; justify-content: center; align-items: center; transition: 0.2s;}
    #icon-gas:hover {box-shadow: 0 0 20px rgba(0,0,0,0.2);}

    #icon-dienstleistungen {padding:10px; width: auto; box-sizing: border-box; border-radius: 50px;display: flex; justify-content: center; align-items: center; transition: 0.2s;}
    #icon-dienstleistungen:hover {box-shadow: 0 0 20px rgba(0,0,0,0.2);}

    #icon-kundenservice {padding:10px; width: auto; box-sizing: border-box; border-radius: 50px;display: flex; justify-content: center; align-items: center; transition: 0.2s;}
    #icon-kundenservice:hover {box-shadow: 0 0 20px rgba(0,0,0,0.2);}

    
    
    
    #thema-icon .mod-custom { height: 100%; box-sizing: border-box; padding: 0px 0; position: relative;
      display: grid; 
      grid-template-columns: 1fr; 
      grid-template-rows: 20% 30% 30% 20%; 
        gap: 0px 0px; 
        grid-template-areas: 
        "icon1"
        "icon2"
        "icon3"
        "icon4"; 
    }
    #icon-fernwaerme {
      justify-self: end; 
      align-self: start; 
      grid-area: icon1; 
    }
    #icon-gas {
      justify-self: end; 
      align-self: center; 
      grid-area: icon2; 
    }
    #icon-dienstleistungen {
      justify-self: end; 
      align-self: center; 
      grid-area: icon3; 
    }
    #icon-kundenservice {
      justify-self: end; 
      align-self: end; 
      grid-area: icon4; 
    }

    
}

@media(min-width:1850px){
    
        #thema-icon h4 {font-size: 15px; letter-spacing: 1px; }

    
    #icon-fernwaerme:hover .icon-text { width: auto; padding: 0 3px 0 8px;}

    #icon-gas:hover .icon-text { width: auto;padding: 0 3px 0 8px;}

    #icon-dienstleistungen:hover .icon-text { width: auto;padding: 0 3px 0 8px;}

    #icon-kundenservice:hover .icon-text { width: auto;padding: 0 3px 0 8px;}
    


    
}

@media(min-width:2050px){
    
    #thema-icon h4 {font-size: 1em; letter-spacing: 1px; }

    #icon-fernwaerme:hover .icon-text { width: auto; padding: 0 5px 0 15px;}
    #icon-gas:hover .icon-text { width: auto;padding: 0 5px 0 15px;}
    #icon-dienstleistungen:hover .icon-text { width: auto;padding: 0 5px 0 15px;}
    #icon-kundenservice:hover .icon-text { width: auto;padding: 0 5px 0 15px;}
    
    #home-lead {width: 35%; bottom: 200px; }
    @keyframes home-lead { 0% { bottom: -200px;} 100% { bottom: 200px;} }
}


@media(max-width:400px){ h2 {hyphens: auto;} }
    
@keyframes tagline { 
    0% { top: 200px;} 
    100% { top: 0%;} 
}
@keyframes pulse { 
    0% { transform: scale(1)} 
    20% { transform: scale(1.1)} 
    40% { transform: scale(1)} 
    100% { transform: scale(1)} 
}

@media(min-width:500px) and (max-height:800px){
    #button { top: calc(90vh - 220px); right: 100px; }
}

@media(max-height:900px) and (min-width:1250px){

    #tagline { line-height: 1;}
    #tagline  .mod-custom {transform: translateY(-25%);}
    #showbox { height: calc(100vh - 50px); overflow: hidden;}
    #button { top: calc(100vh - 220px); }

}
@media(max-height:1000px) and (min-width:1250px){
    #showbox {height: 100%;}
    
}
@media(max-height:768px) and (min-width:1250px){
        
    #showbox { height: calc(100vh + 100px);}
    #button { top: calc(100vh - 50px) !important; right: 120px !important; }

}

@media(max-width:400px) and (max-height:800px){
        #button { top: calc(100vh - 140px) !important; }

        #showbox { height: calc(100vh - 50px); overflow: hidden;}

}