#teaser-progressbar{
    background: linear-gradient(to right, rgba(255,255,255,.25) 0%,rgba(255,255,255,.95) 100%);
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:1px;
    z-index:20;
}

#teaser-wrapper{
    grid-area:teaser;
    position:relative;
    background:var(--asset-background-color);
}


#teaser-progressbar{
    background: linear-gradient(to right, rgba(255,255,255,.25) 0%,rgba(255,255,255,.95) 100%);
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:1px;
    z-index:20;
}

#teaser-wrapper{
    grid-area:teaser;
    position:relative;
    background:var(--asset-background-color);
}

/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

    /* Tab icon */
    #teaser-wrapper .tab{
        float:left;
        position:absolute;
        width:100%;
        bottom:.5rem;
        z-index:50;
    }

}

/* Tablet an above*/
@media screen and (min-width: 45rem){

    /* Tab icon */
    #teaser-wrapper .tab{
        float:left;
        position:absolute;
        width:100%;
        bottom:.65rem;
        z-index:50;
    }

}

#teaser-wrapper .tab ul{
    display:flex;
    justify-content:center;
    align-items:center;
    list-style-type:none;
    margin:0;
    padding:0;
}

#teaser-wrapper .tab li{
    display:flex;
    align-items:center;
    margin:0 .25em;
    padding:0 .15em;
    width:auto;
}

#teaser-wrapper .tab li:before{
    display:none
}

#teaser-wrapper .tab a{
    display:inline-block;
    text-align:center;
}

#teaser-wrapper .tab a span{
    display:none;
}

#teaser-wrapper .tab a,
#teaser-wrapper .tab a.off{
    color:#FFF;
    font-weight:normal;
    border:var(--light-border-color) 1px solid;
    background:var(--nav-background-color);
    width:2.75rem;
    height:.35rem;
    transition:opacity 250ms ease-in;
    border-radius:.15rem;
}

/* Desktop View */
@media screen and (min-width: 79.5rem){

    #teaser-wrapper .tab a:hover{
        border:1px solid transparent;
        background:var(--nav-on-background-color);
    }

}

#teaser-wrapper .tab a.on{
    color:#FFF;
    font-weight:normal;
    border:1px solid transparent;
    background:var(--nav-on-background-color);
    width:2.75rem;
    height:.35rem;
    border-radius:.15rem;
}



#teaser-wrapper .card .foreground .headline{
    float:left;
    width:100%;
    height:auto;
}

#teaser-wrapper .card .foreground .headline .ol{
    font-family:var(--asset-bold-font-family);
    color:var(--asset-bold-font-color);
    font-size:var(--xxl-font-size);
    text-transform:uppercase;
    font-weight:bold;
}

#teaser-wrapper .card .foreground .headline .hl{
    font-family:var(--asset-bold-font-family);
    color:var(--asset-bold-font-color);
    font-size:var(--xxl-font-size);
    text-transform:uppercase;
    font-weight:bold;
}

#teaser-wrapper .card .foreground .headline .sl{
    font-family:var(--asset-bold-font-family);
    color:var(--asset-bold-font-color);
    font-size:var(--xxxl-font-size);
    text-transform:uppercase;
    font-weight:bold;
}


#teaser-wrapper .card .foreground .text > *,
#teaser-wrapper .card .foreground .text a{
    font-family:var(--asset-bold-font-family);
    color:var(--asset-bold-font-color);
    font-size:var(--m-font-size);
}


#teaser-wrapper .card .foreground .text a{
    text-decoration:underline;
}


/* Mobile View > till Tablet */
@media screen and (max-width: 45rem){

    #teaser-wrapper .card .foreground .headline .ol{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .headline .hl{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .headline .sl{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .text p{
        line-height:110%;
    }

    :root{
        --teaser-ani-pos-1-0-top:3.5rem;
        --teaser-ani-pos-1-100-top:2.25rem;

        --teaser-ani-pos-2-0-top:6rem;
        --teaser-ani-pos-2-100-top:1.5rem;

        /* Icon Button */
        --teaser-icon-button-top:.35rem;
        --teaser-icon-button-right:7.5rem;
        --teaser-icon-button-width:3rem;

        /* Flame Button */
        --teaser-flame-button-top:.35rem;
        --teaser-flame-button-right:4rem;
        --teaser-flame-button-width:3rem;

        /* NEW Button */
        --teaser-new-button-top:.35rem;
        --teaser-new-button-right:.5rem;
        --teaser-new-button-width:3rem;

        /* TOM */
        --teaser-al-200-bottom:-15rem;
        --teaser-al-200-left:12rem;
        --teaser-al-200-min-width:5rem;
        --teaser-al-200-max-width:5rem;
        --teaser-al-200-rotate:0deg;

        /* TOM */
        --teaser-bb-333-bottom:1.25rem;
        --teaser-bb-333-right:.75rem;
        --teaser-bb-333-min-width:9rem;
        --teaser-bb-333-max-width:10rem;


        /* unilite */
        --teaser-dubai-bottom:1rem;
        --teaser-dubai-left:12rem;
        --teaser-dubai-min-width:8rem;
        --teaser-dubai-max-width:8.5rem;
        --teaser-dubai-rotate:0deg;

        /* VIO */
        --teaser-vio-bottom:1.15rem;
        --teaser-vio-right:1rem;
        --teaser-vio-min-width:11rem;
        --teaser-vio-max-width:12rem;

        /* Welthölzer */
        --teaser-tm-100-bottom:1.5rem;
        --teaser-tm-100-right:.5rem;
        --teaser-tm-100-min-width:16rem;
        --teaser-tm-100-max-width:18rem;

        /* unicorn */
        --teaser-unicorn-bottom:1.5rem;
        --teaser-unicorn-right:.75rem;
        --teaser-unicorn-min-width:18rem;
        --teaser-unicorn-max-width:20rem;

        /* unicorn */
        --teaser-icecream-bottom:1.5rem;
        --teaser-icecream-right:.25rem;
        --teaser-icecream-min-width:26rem;
        --teaser-icecream-max-width:28rem;

        --link_intern-top:.5rem;
    }

    #teaser .background .logo{
        position:absolute;
        width:6.5rem;
        height:auto;
        bottom:.5rem;
        right:.25rem;
    }

}

/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem){

    #teaser-wrapper .card .foreground .headline .ol{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .headline .hl{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .headline .sl{
        line-height:110%;
    }

    #teaser .background .logo{
        position:absolute;
        width:8rem;
        height:auto;
        bottom:0;
        right:.5rem;
    }

}

/* Mobile View > Tablet */
@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: portrait){

    :root{
        --teaser-ani-pos-1-0-top:3.5rem;
        --teaser-ani-pos-1-100-top:.75rem;

        --teaser-ani-pos-2-0-top:6rem;
        --teaser-ani-pos-2-100-top:.75rem;

        /* Icon Button */
        --teaser-icon-button-top:.75rem;
        --teaser-icon-button-right:8.75rem;
        --teaser-icon-button-width:3.5rem;
        --teaser-icon-button-display:block;

        /* Flame Button */
        --teaser-flame-button-top:.75rem;
        --teaser-flame-button-right:4.75rem;
        --teaser-flame-button-width:3.5rem;
        --teaser-flame-button-display:block;

        /* NEW Button */
        --teaser-new-button-top:.75rem;
        --teaser-new-button-right:.75rem;;
        --teaser-new-button-width:3.5rem;

        /* TOM */
        --teaser-al-200-bottom:-10rem;
        --teaser-al-200-left:18rem;
        --teaser-al-200-min-width:5rem;
        --teaser-al-200-max-width:5rem;
        --teaser-al-200-rotate:0deg;

        /* TOM */
        --teaser-bb-333-bottom:.5rem;
        --teaser-bb-333-right:6.25rem;
        --teaser-bb-333-min-width:13rem;
        --teaser-bb-333-max-width:15rem;

        /* unilite */
        --teaser-dubai-bottom:.5rem;
        --teaser-dubai-left:2.5rem;
        --teaser-dubai-min-width:8rem;
        --teaser-dubai-max-width:9.75rem;
        --teaser-dubai-rotate:0deg;

        /* VIO */
        --teaser-vio-bottom:1.25rem;
        --teaser-vio-right:10vw;
        --teaser-vio-min-width:13rem;
        --teaser-vio-max-width:15rem;

        /* Welthölzer */
        --teaser-tm-100-bottom:1.5rem;
        --teaser-tm-100-right:1.25rem;
        --teaser-tm-100-min-width:20rem;
        --teaser-tm-100-max-width:22rem;

        /* unicorn */
        --teaser-unicorn-bottom:1.5rem;
        --teaser-unicorn-right:2.25rem;
        --teaser-unicorn-min-width:26rem;
        --teaser-unicorn-max-width:28rem;

        /* unicorn */
        --teaser-icecream-bottom:2.25rem;
        --teaser-icecream-right:3.25rem;
        --teaser-icecream-min-width:36rem;
        --teaser-icecream-max-width:38rem;

        --link_intern-top:0;
    }

}

@media screen and (min-width: 45rem) and (max-width: 79.5rem) and (orientation: landscape){

    :root{
        --teaser-ani-pos-1-0-top:3.5rem;
        --teaser-ani-pos-1-100-top:.5rem;

        --teaser-ani-pos-2-0-top:6rem;
        --teaser-ani-pos-2-100-top:.5rem;

        /* Icon Button */
        --teaser-icon-button-top:1rem;
        --teaser-icon-button-right:13rem;
        --teaser-icon-button-width:5rem;
        --teaser-icon-button-display:block;

        /* Flame Button */
        --teaser-flame-button-top:1rem;
        --teaser-flame-button-right:7rem;
        --teaser-flame-button-width:5rem;
        --teaser-flame-button-display:block;

        /* NEW Button */
        --teaser-new-button-top:1rem;
        --teaser-new-button-right:1rem;
        --teaser-new-button-width:5rem;

        /* TOM */
        --teaser-al-200-bottom:-8rem;
        --teaser-al-200-left:22rem;
        --teaser-al-200-min-width:5rem;
        --teaser-al-200-max-width:5rem;
        --teaser-al-200-rotate:0deg;

        /* TOM */
        --teaser-bb-333-bottom:.5rem;
        --teaser-bb-333-right:8.25rem;
        --teaser-bb-333-min-width:14.5rem;
        --teaser-bb-333-max-width:16.5rem;


        /* unilite */
        --teaser-dubai-bottom:-5rem;
        --teaser-dubai-left:3.5rem;
        --teaser-dubai-min-width:10rem;
        --teaser-dubai-max-width:12rem;
        --teaser-dubai-rotate:0deg;

        /* VIO */
        --teaser-vio-bottom:1.25rem;
        --teaser-vio-right:12vw;
        --teaser-vio-min-width:13rem;
        --teaser-vio-max-width:15rem;

        /* Welthölzer */
        --teaser-tm-100-bottom:1.25rem;
        --teaser-tm-100-right:1.25rem;
        --teaser-tm-100-min-width:18rem;
        --teaser-tm-100-max-width:23rem;

        /* unicorn */
        --teaser-unicorn-bottom:1.25rem;
        --teaser-unicorn-right:2.25rem;
        --teaser-unicorn-min-width:30rem;
        --teaser-unicorn-max-width:32rem;

        /* unicorn */
        --teaser-icecream-bottom:2.25rem;
        --teaser-icecream-right:3.25rem;
        --teaser-icecream-min-width:36rem;
        --teaser-icecream-max-width:38rem;

        --link_intern-top:0;
    }

}






/* Desktop View */
@media screen and (min-width: 79.5rem){

    #teaser-wrapper .card .foreground .headline .ol{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .headline .hl{
        line-height:110%;
    }

    #teaser-wrapper .card .foreground .headline .sl{
        line-height:110%;
    }

    :root{
        /* Ani 1 */
        --teaser-ani-pos-1-0-top:3.5rem;
        --teaser-ani-pos-1-100-top:.75rem;

        --teaser-ani-pos-2-0-top:6rem;
        --teaser-ani-pos-2-100-top:.75rem;

        /* Icon Button */
        --teaser-icon-button-top:1.25rem;
        --teaser-icon-button-right:15.25rem;
        --teaser-icon-button-width:6rem;
        --teaser-icon-button-display:block;

        /* Flame Button */
        --teaser-flame-button-top:1.25rem;
        --teaser-flame-button-right:8.25rem;
        --teaser-flame-button-width:6rem;
        --teaser-flame-button-display:block;

        /* NEW Button */
        --teaser-new-button-top:1.25rem;
        --teaser-new-button-right:1.25rem;
        --teaser-new-button-width:6rem;

        /* TOM > AL-200 */
        --teaser-al-200-bottom:-8rem;
        --teaser-al-200-left:41rem;
        --teaser-al-200-min-width:6.25rem;
        --teaser-al-200-max-width:6.25rem;


        /* TOM */
        --teaser-bb-333-bottom:2.5rem;
        --teaser-bb-333-right:12rem;
        --teaser-bb-333-min-width:22.5rem;
        --teaser-bb-333-max-width:24.5rem;

        /* unilite */
        --teaser-dubai-bottom:.5rem;
        --teaser-dubai-left:9.5vw;
        --teaser-dubai-min-width:14rem;
        --teaser-dubai-max-width:16rem;
        --teaser-dubai-rotate:0deg;

        /* Vio
        --teaser-vio-bottom:0;
        --teaser-vio-min-width:32rem;
        --teaser-vio-max-width:34rem;
        */
        --teaser-vio-bottom:1.5rem;
        --teaser-vio-right:12vw;
        --teaser-vio-min-width:22rem;
        --teaser-vio-max-width:24rem;

        /* Welthölzer */
        --teaser-tm-100-bottom:2.5rem;
        --teaser-tm-100-right:2.5rem;
        --teaser-tm-100-min-width:32rem;
        --teaser-tm-100-max-width:34rem;

        /* unicorn */
        --teaser-unicorn-bottom:2.5rem;
        --teaser-unicorn-right:3.5rem;
        --teaser-unicorn-min-width:38rem;
        --teaser-unicorn-max-width:40rem;

        /* unicorn */
        --teaser-icecream-bottom:3.25rem;
        --teaser-icecream-right:6.5rem;
        --teaser-icecream-min-width:52rem;
        --teaser-icecream-max-width:54rem;

        --link_intern-top:1rem;
    }

    #teaser .background .logo{
        position:absolute;
        width:8rem;
        height:auto;
        bottom:0;
        right:.5rem;
    }

}


#teaser .card.theme_default{
    /* background:linear-gradient(45deg, rgba(125, 66, 130,1) 0%,rgba(231, 60, 126,1) 100% ,rgba(238, 119, 82,1) 100%);*/
    background:linear-gradient(45deg, rgba(110, 14, 200,1) 0%, rgba(240, 28, 72,1) 100%);
    background-size: 400% 400%;
    animation:gradient 15s ease infinite;
}



/* Theme USB AL-200 */
#teaser .card.theme_usb{
    background:linear-gradient(45deg, rgba(110, 14, 200,1) 0%, rgba(240, 28, 72,1) 100%);
    background-size: 100% 100%;
}

#teaser .card.theme_usb .al-200{
    position:absolute;
    bottom:var(--teaser-al-200-bottom);
    left:var(--teaser-al-200-left);
    width:auto;
    min-width:var(--teaser-al-200-min-width);
    max-width:var(--teaser-al-200-max-width);
    height:auto;
    transform:rotate(8deg);
    margin:0;
    padding:0;
    z-index:1;
}





/* Theme BB-333 */
#teaser .card.theme_bb-333{
    background:url('/asset/img/teaser/theme_bb-333.svg') no-repeat top left;
    background-size:cover;
}


#teaser .card.theme_bb-333 .bb-333{
    position:absolute;
    bottom:var(--teaser-bb-333-bottom);
    right:var(--teaser-bb-333-right);
    width:25vw;
    min-width:var(--teaser-bb-333-min-width);
    max-width:var(--teaser-bb-333-max-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:1;
}

#teaser .card.theme_bb-333 .foreground .headline *{
    color:var(--base-font-color);
    background:linear-gradient(45deg, rgba(146, 144, 150,1) 0%, rgba(142, 140, 150,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



/* Theme Unilite */
#teaser .card.theme_unilite{
    background:url('/asset/img/teaser/theme_unilite.svg') no-repeat top left;
    background-size:cover;
}


#teaser .card.theme_unilite .dubai,
#teaser .card.theme_unilite .dubai-outline{
    position:absolute;
    bottom:var(--teaser-dubai-bottom);
    left:var(--teaser-dubai-left);
    width:50vw;
    min-width:var(--teaser-dubai-min-width);
    max-width:var(--teaser-dubai-max-width);
    height:auto;
    transform:rotate(0deg);
    transform:rotate(var(--teaser-dubai-rotate));
    margin:0;
    padding:0;
    z-index:1;
}



#teaser .card.theme_vio{
    background:linear-gradient(45deg,#faf03e,#faf36c);
    background-size: 100% 100%;
}

/*
#teaser .card.theme_vio .vio_flyer{
position:absolute;
bottom:var(--teaser-vio-bottom);
right:10vw;
width:25vw;
min-width:var(--teaser-vio-min-width);
max-width:var(--teaser-vio-max-width);
height:auto;
transform:rotate(8deg);
margin:0;
padding:0;
z-index:1;
}
*/

#teaser .card.theme_vio .vio_flyer{
    position:absolute;
    bottom:var(--teaser-vio-bottom);
    right:var(--teaser-vio-right);
    width:25vw;
    min-width:var(--teaser-vio-min-width);
    max-width:var(--teaser-vio-max-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:1;
}


#teaser .card.theme_vio .foreground .headline *{
    color:var(--base-font-color);
}

#teaser .card.theme_welthoelzer{
    background:#172854;
    background-size:cover;
}

#teaser .card.theme_welthoelzer .tm-100{
    position:absolute;
    bottom:var(--teaser-tm-100-bottom);
    right:var(--teaser-tm-100-right);
    width:40vw;
    min-width:var(--teaser-tm-100-min-width);
    max-width:var(--teaser-tm-100-max-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:1;
}


#teaser .card.theme_unicorn{
    background:url('/asset/img/teaser/theme_unicorn.svg') no-repeat top left;
    background-size:cover;
}

#teaser .card.theme_unicorn .unicorn{
    position:absolute;
    bottom:var(--teaser-unicorn-bottom);
    right:var(--teaser-unicorn-right);
    width:25vw;
    min-width:var(--teaser-unicorn-min-width);
    max-width:var(--teaser-unicorn-max-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:1;
}

#teaser .card.theme_unicorn .foreground .headline *{
    color:var(--base-font-color);
    background:linear-gradient(45deg, rgba(94, 63, 123,1) 0%, rgba(192, 128, 216,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



#teaser .card.theme_icecream{
    background:url('/asset/img/teaser/theme_icecream.svg') no-repeat top left;
    background-size:cover;
}

#teaser .card.theme_icecream .icecream{
    position:absolute;
    bottom:var(--teaser-icecream-bottom);
    right:var(--teaser-icecream-right);
    width:25vw;
    min-width:var(--teaser-icecream-min-width);
    max-width:var(--teaser-icecream-max-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:1;
}

#teaser .card.theme_icecream .foreground .headline *{
    color:var(--base-font-color);
    background:linear-gradient(45deg, rgba(94, 63, 123,1) 0%, rgba(192, 128, 216,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


#teaser .card .icon{
    position:absolute;
    display:var(--teaser-icon-button-display);
    top:var(--teaser-icon-button-top);
    right:var(--teaser-icon-button-right);
    width:var(--teaser-icon-button-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:3;
    border-radius:50%;
    border:2px #fff solid;
}

#teaser .card .flame{
    position:absolute;
    display:var(--teaser-flame-button-display);
    top:var(--teaser-flame-button-top);
    right:var(--teaser-flame-button-right);
    width:var(--teaser-flame-button-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:3;
    border-radius:50%;
    border:2px #fff solid;
}

#teaser .card .new{
    position:absolute;
    top:var(--teaser-new-button-top);
    right:var(--teaser-new-button-right);
    width:var(--teaser-new-button-width);
    height:auto;
    margin:0;
    padding:0;
    z-index:3;
}


@keyframes gradient{

    0%{
        background-position: 0 50%;
    }

    50%{
        background-position: 100% 50%;
    }

    100%{
        background-position: 0 50%;
    }

}


#teaser-wrapper .card .foreground .headline{
    position:relative;
    opacity:0;
    animation: ani_pos_1 500ms ease-out 50ms forwards;
}

#teaser-wrapper .card .foreground .text{
    position:relative;
    opacity:0;
    animation: ani_pos_2 500ms ease-out 150ms forwards;
}


@keyframes ani_pos_1{

    0%{
        position:relative;
        top:var(--teaser-ani-pos-1-0-top);
        left:0;
        opacity:0;
    }

    100%{
        position:relative;
        top:var(--teaser-ani-pos-1-100-top);
        left:0;
        opacity:1;
    }

}

@keyframes ani_pos_2{

    0%{
        position:relative;
        top:var(--teaser-ani-pos-2-0-top);
        left:0;
        opacity:0;
    }

    100%{
        position:relative;
        top:var(--teaser-ani-pos-2-100-top);
        left:0;
        opacity:1;
    }

}

#teaser .card .foreground .text .link_intern{
    display:inline-block;
    position:relative;
    top:var(--link_intern-top);
    font-weight:normal;
    background:rgba(255, 255, 255, .1);
    color:var(--asset-border-color);
    padding:.5rem .75rem .5rem .5rem;
    text-decoration:none;
    border-radius:.5rem;
    border:var(--asset-border-color) 2px solid;
}

#teaser .card .foreground .text .link_intern:hover{
    background:rgba(102, 113, 126, .1);
}

#teaser .card .foreground .text .link_intern:before{
    display:inline-block;
    content:'';
    width:1em;
    height:.75em;
}

#teaser .card .foreground .text .link_intern:before{
    background:url('/asset/img/icon/arrow-light.svg') no-repeat top left;
}

#teaser .card.theme_bb-333 .foreground .text .link_intern,
#teaser .card.theme_unicorn .foreground .text .link_intern,
#teaser .card.theme_vio .foreground .text .link_intern{
    background:rgba(0, 0, 0, .1);
    color:var(--base-font-color);
    border:var(--base-font-color) 2px solid;
}

#teaser .card.theme_bb-333 .foreground .text .link_intern:before,
#teaser .card.theme_unicorn .foreground .text .link_intern:before,
#teaser .card.theme_vio .foreground .text .link_intern:before{
    background:url('/asset/img/icon/arrow-dark.svg') no-repeat top left;
}