/* Template for Home © admotion*/

header {background: none; position: fixed;transition: 0.5s ease;}
#showbox {height: 80vh; top: 0;position: relative; z-index: -1;}
#showbox::before {content: ''; background: var(--blau1); left: 0; top: 0; width: 100%; height: 100%; position: absolute;}
#showbox video {height: 100%; width: 100%; left: 0; top: 0; object-fit: cover; position: absolute; opacity: 0.4;}

.scrolled #showbox {margin: 0 !important;}
.homelogo {position: absolute; top: 0; transition: 0.5s ease;}

.scrolled header {background: white;}
.scrolled .homelogo {opacity: 0;}

h1 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 30px; line-height: 130%; font-weight: 700; color:white; padding-left: 40px; position: relative; animation: titelanim 2s ease;}
h1::before { content: ''; background: white; position: absolute; width: 50px; height: 24px; left: -20px; top: 8px; animation: titelanimbefore 2s ease;}

h2 { margin: 0px 0px 25px 0px; padding: 0px; font-size: 24px; line-height: 130%; font-weight: 700; color: var(--blau1); padding-left: 40px; position: relative;}
h2::before { content: ''; background: var(--blau1); position: absolute; width: 50px; height: 18px; left: -20px; top: 8px;}

.box h2::before { left: -40px;}
.box h2 { padding-left: 20px; }


.uk-scope .uk-h2, .uk-scope h2 {font-size: 24px;}



.teaser-icon {position: absolute; width: 60px; bottom: 20px; right: 20px; transition: 0.2s;}
.uk-card:hover .teaser-icon {transform: scale(1.1);}




@keyframes titelanim {
    from {transform: translateX(40px);}
    to {transform: translateX(0px);}    
}
@keyframes titelanimbefore {
    from {transform: translateX(-80px);}    
    to {transform: translateX(0px);}    
}

#inhalt {margin-top: -200px;}

@media(min-width:768px){
    h1 {margin-bottom: 40px;}
    h1::before {  width: 70px; left: -40px; }
    h2::before {  width: 71px; left: -40px; }
    .box h2 { padding-left: 0px; }
    .box h2::before { left: -80px; }

    
}

@media(min-width:1000px){
    h1 {font-size: 40px;}
    h1::before { height: 31px; top: 11px;}
    h2 {font-size: 30px;}
    h2::before { height: 24px; top: 8px;}
    .uk-scope .uk-h2, .uk-scope h2 {font-size: 30px;}
}

@media(min-width:1250px){

    #menu li a {color: white;}
    #menu li:hover a {color: white;}
    .scrolled #menu li a {color: var(--text);}
    .scrolled #menu li:hover a {color: var(--blau1);}
    
    #inhalt {margin-top: -260px;}
    
    h1 { font-size: 66px; }
    h1::before {  width: 140px; left: -120px; top: 21px; height: 48px; }
    h2::before {  width: 140px; left: -120px; }
    .box h2::before { left: -160px; }

    @keyframes titelanim {
    from {transform: translateX(80px);}
    to {transform: translateX(0px);}    
    }
    @keyframes titelanimbefore {
        from {transform: translateX(-120px);}    
        to {transform: translateX(0px);}    
    }

    
    .teaser-icon {width: 85px;}

    
}


@media(min-width:1850px){
    h1 {margin-bottom: 80px;}
    h1::before {  width: 260px; left: -240px; }
    h2::before {  width: 260px; left: -240px; }
    .box h2::before { left: -280px; }

}