/* Template for Home © admotion*/

h1 {color: var(--rot);}
h2 {color: var(--rot);}
h3 {color: var(--rot);}

ul.lines li::marker { color: var(--rot);}
ul.lines li {border-bottom: 1px solid var(--rot);}

.box {background: var(--rot); color: white;}
.box a.button { background: url(/images/_icons/arrow-r.svg) no-repeat center left; border-bottom: 1px solid white; color: white;}
.box a.button:hover { background: url(/images/_icons/arrow-r.svg) no-repeat center left 5px;}
.box ul.lines li::marker { color: white;}
.box ul.lines li {border-bottom: 1px solid white;}
.box a {color: white;}
.box h2, .box h1, .box h3 {color: white;}


a.button { background: url(/images/_icons/arrow-r-rot.svg) no-repeat center left; border-bottom: 1px solid var(--rot); color: var(--rot);}
a.button:hover { background: url(/images/_icons/arrow-r-rot.svg) no-repeat center left 5px; }
    
.spaltenlinien {border-bottom: 1px solid white;}



#teaser {padding-bottom: 20px; background: var(--bg); z-index: 10; position: relative;}
#teaser .wf-columns-gap-large {gap: 1px;}
#teaser .teaserimg {position: absolute; top: 20px; right: 20px; width: 40px;}

#teaser h1, #teaser h2, #teaser h3,#teaser p, #teaser a {color: white;}
#teaser .wf-column {padding: 40px 20px; position: relative;}
#teaser .wf-column:nth-child(1) {background: var(--rot); }
#teaser .wf-column:nth-child(2) {background: var(--orange);}
#teaser .wf-column:nth-child(3) {background: var(--violett);}


#teaser a.button { background: url(/images/_icons/arrow-r.svg) no-repeat center left; border-bottom: 1px solid white; color: white;}
#teaser a.button:hover { background: url(/images/_icons/arrow-r.svg) no-repeat center left 5px; }
    

@media(min-width:768px){
    #teaser {padding-bottom: 50px;}
    
}
@media(min-width:960px){
    .spaltenlinien {border-bottom: 0; border-right: 1px solid white;}
    #teaser .wf-column {display: flex; flex-direction: column; justify-content: space-between; padding: 40px;}
}
@media(min-width:1250px){

    #teaser .teaserimg { width: 50px; transition: 0.3s ease;}
    #teaser .wf-column:hover .teaserimg {transform: scale(1.3);}

    #teaser {padding-bottom: 100px;}
    
}

@media(min-width:1400px){
        #teaser .wf-column {padding: 90px 100px 100px;}
    #teaser .teaserimg {top: 40px; right: 40px; width: 70px;}

}