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

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

--teaser-ani-pos-2-0-top:6rem;
--teaser-ani-pos-2-100-top:.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-bb-20-bottom:1.25rem;
--teaser-bb-20-left:.75rem;
--teaser-bb-20-min-width:13rem;
--teaser-bb-20-max-width:15rem;


/* Vio-20 */
--teaser-vio-20-bottom:1.5rem;
--teaser-vio-20-right:.25rem;
--teaser-vio-20-min-width:23rem;
--teaser-vio-20-max-width:24rem;

/* 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;

/* Ice Cream */
--teaser-icecream-bottom:1.5rem;
--teaser-icecream-right:.25rem;
--teaser-icecream-min-width:23rem;
--teaser-icecream-max-width:24rem;

/* Panda */
--teaser-panda-bottom:1.5rem;
--teaser-panda-right:.25rem;
--teaser-panda-min-width:23rem;
--teaser-panda-max-width:24rem;

--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) 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:5rem;
--teaser-flame-button-width:3.75rem;
--teaser-flame-button-display:block;

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


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

/* VIO-20 */
--teaser-vio-20-bottom:2.25rem;
--teaser-vio-20-right:3.25rem;
--teaser-vio-20-min-width:36rem;
--teaser-vio-20-max-width:38rem;

/* 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;

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

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

--link_intern-top:0;
}

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

}

@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-bb-20-bottom:.5rem;
--teaser-bb-20-left:8.25rem;
--teaser-bb-20-min-width:14.5rem;
--teaser-bb-20-max-width:16.5rem;

/* VIO-20 */
--teaser-vio-20-bottom:2.25rem;
--teaser-vio-20-right:3.25rem;
--teaser-vio-20-min-width:36rem;
--teaser-vio-20-max-width:38rem;

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

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

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

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

--link_intern-top:0;
}

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

}

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

: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;


/* lux-nt */
--teaser-lux-nt-bottom:0.65rem;
--teaser-lux-nt-left:3.5rem;
--teaser-lux-nt-min-width:20.5rem;
--teaser-lux-nt-max-width:22.5rem;


/* BB-20 */
--teaser-bb-20-bottom:0.65rem;
--teaser-bb-20-left:5rem;
--teaser-bb-20-min-width:20.5rem;
--teaser-bb-20-max-width:22.5rem;


/* Vio-20 */
--teaser-vio-20-bottom:1.25rem;
--teaser-vio-20-right:4.5rem;
--teaser-vio-20-min-width:52rem;
--teaser-vio-20-max-width:54rem;

/* Welthölzer */
--teaser-welthoelzer-tm-100-bottom:1.5rem;
--teaser-welthoelzer-tm-100-right:1.5rem;
--teaser-welthoelzer-tm-100-min-width:60%;
--teaser-welthoelzer-tm-100-max-width:65%;

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

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

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

--link_intern-top:1rem;
}

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

#teaser_type_2 .background .logo{
position:absolute;
width:6rem;
height:auto;
bottom:0rem;
right:.75rem;
}

}

#teaser_wrapper .card .foreground .title .ol{
line-height:110%;
}

#teaser_wrapper .card .foreground .title .hl{
line-height:110%;
}

#teaser_wrapper .card .foreground .title .sl{
line-height:110%;
}

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




/* Theme Unicorn */
#teaser_wrapper .theme_unicorn{
display:block;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
background:url('/assets/img/teaser/theme_unicorn.svg') no-repeat bottom left;
background-size:cover;
}

#teaser_grid_1 .theme_unicorn{
display:block;
min-height:100%;
height:100%;
max-height:100%;
}

#teaser_wrapper .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_grid_1 .unicorn{
min-width:40%;
width:20vw;
max-width:50%;
}

#teaser_wrapper .theme_unicorn .title *{
color:var(--clr-primary-300) !important;
background: linear-gradient(
        45deg,
        rgba(94, 63, 123,1) 0%,
        rgba(192, 128, 216,1) 100%
);

background: linear-gradient(
        45deg,
        oklch(38% 0.11 295) 0%,
        oklch(70% 0.16 300) 100%
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}



/* Theme Panda */
#teaser_wrapper .theme_panda{
display:block;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
background:url('/assets/img/teaser/theme_panda.svg') no-repeat bottom left;
background-size:cover;
}

/* Theme Panda */
#teaser_grid_1 .theme_panda{
display:block;
min-height:100%;
height:100%;
max-height:100%;
}

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

#teaser_grid_1 .panda{
min-width:40%;
width:20vw;
max-width:50%;
}



/* Theme Ice Cream */
#teaser_wrapper .theme_icecream{
display:block;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
background:url('/assets/img/teaser/theme_icecream.svg') no-repeat bottom left;
background-size:cover;
}

#teaser_grid_1 .theme_icecream{
display:block;
min-height:100%;
height:100%;
max-height:100%;
}

#teaser_wrapper .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_grid_1 .icecream{
min-width:40%;
width:20vw;
max-width:50%;
}


#teaser_grid_1 .unicorn img,
#teaser_grid_1 .panda img,
#teaser_grid_1 .icecream img{
filter:var(--drop-shadow-default);
}


/* Theme VIO-20 */
#teaser_wrapper .theme_vio-20{
display:block;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
background:url('/assets/img/teaser/theme_vio-20.svg') no-repeat bottom left;
background-size:cover;
}

#teaser_grid_2 .theme_vio-20{
display:block;
min-height:100%;
height:100%;
max-height:100%;
}

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

#teaser_grid_2 .vio-20{
min-width:40%;
width:20vw;
max-width:50%;
}

#teaser_grid_2 .vio-20 img{
filter:var(--drop-shadow-default);
}

#teaser_wrapper .theme_vio-20 .title *{
color:var(--clr-primary-300) !important;
}

#teaser_grid_3 .card_3_1{
display:block;
min-height:100%;
height:100%;
max-height:100%;
background:linear-gradient(
        45deg,
        rgba(110, 14, 200,1) 0%,
        rgba(240, 28, 72,1) 100%
);
background: linear-gradient(
        45deg,
        oklch(42% 0.24 305) 0%,
        oklch(55% 0.26 25) 100%
);
background-size: 400% 400%;
animation:teaser_gradient 15s ease infinite;
}

#teaser_grid_3 .card_3_2{
display:block;
min-height:100%;
height:100%;
max-height:100%;
background: linear-gradient(
        38deg,
        rgba(58,148,201,1) 0%,
        rgba(200, 84, 114,1) 23%,
        rgba(252, 60, 80,1) 44%,
        rgba(250, 186, 108,1) 100%
);
background: linear-gradient(
        38deg,
        oklch(60% 0.14 230) 0%,
        oklch(58% 0.18 10) 23%,
        oklch(60% 0.23 25) 44%,
        oklch(78% 0.16 70) 100%
);
}

#teaser_grid_3 .card_3_2 .lux-nt{
position:absolute;
bottom:var(--teaser-lux-nt-bottom);
left:var(--teaser-lux-nt-left);
min-width:var(--teaser-lux-nt-min-width);
max-width:var(--teaser-lux-nt-max-width);
width:auto;
height:88%;
}

#teaser_grid_3 .lux-nt img{
filter:var(--drop-shadow-default);
}



#teaser_grid_3 .card_3_3{
display:block;
min-height:100%;
height:100%;
max-height:100%;
background-size:100%;
background:
        url('/assets/img/teaser/theme_bb-20-ft.svg') no-repeat bottom left,
        linear-gradient(
                45deg,
                rgba(42, 123, 155, 1) 0%,
                rgba(87, 199, 133, 1) 50%,
                rgba(237, 221, 83, 1) 100%
        );

background:
        url('/assets/img/teaser/theme_bb-20-ft.svg') no-repeat bottom left,
        linear-gradient(
                45deg,
                oklch(52% 0.12 220) 0%,
                oklch(70% 0.14 150) 50%,
                oklch(85% 0.15 95) 100%
        );
}

#teaser_grid_3 .card_3_3 .BB-20_FT_Eco{
position:absolute;
bottom:var(--teaser-bb-20-bottom);
left:var(--teaser-bb-20-left);
min-width:var(--teaser-bb-20-min-width);
max-width:var(--teaser-bb-20-max-width);
width:auto;
height:88%;
}

#teaser_grid_3 .BB-20_FT_Eco img{
filter:var(--drop-shadow-default);
}





#teaser_grid_4 .theme_welthoelzer{
display:block;
min-height:100%;
height:100%;
max-height:100%;
background: linear-gradient(352deg,rgba(23, 44, 84, 1) 0%, rgba(23, 44, 74, 1) 40%, rgba(23, 44, 84, 1) 40%, rgba(38, 74, 140, 1) 100%);
background:linear-gradient(352deg, rgba(23,44,84,1) 0%, rgba(23,44,74,1) 50%);
}

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


/* Small one */
#teaser .theme_default{
display:block;
min-height:var(--teaser-min-height);
height:var(--teaser-height);
max-height:var(--teaser-max-height);
transition:height 150ms ease-out;
background:linear-gradient(
        45deg,
        rgba(110, 14, 200,1) 0%,
        rgba(240, 28, 72,1) 100%
);
background: linear-gradient(
        45deg,
        oklch(42% 0.24 305) 0%,
        oklch(55% 0.26 25) 100%
);
background-size: 400% 400%;
animation:teaser_gradient 15s ease infinite;
}

#teaser .theme_unilite{
display:block;
height:var(--teaser-height);
background: linear-gradient(
        38deg,
        rgba(58,148,201,1) 0%,
        rgba(200, 84, 114,1) 23%,
        rgba(252, 60, 80,1) 44%,
        rgba(250, 186, 108,1) 100%
);
background: linear-gradient(
        38deg,
        oklch(60% 0.14 230) 0%,
        oklch(58% 0.18 10) 23%,
        oklch(60% 0.23 25) 44%,
        oklch(78% 0.16 70) 100%
);
}

#teaser .theme_vio{
display:block;
height:var(--teaser-height);
background: linear-gradient(45deg, #faf03e, #faf36c);
background: linear-gradient(
        45deg,
        oklch(92% 0.17 98),
        oklch(94% 0.14 102)
);
}

#teaser .theme_vio .foreground .title *{
color:var(--clr-primary-300) !important;
}

#teaser .theme_welthoelzer{
display:block;
height:var(--teaser-height);
background:linear-gradient(45deg, rgba(23,40,74,1) 0%, rgba(23,40,84,1) 80%);
background:linear-gradient(350deg,rgba(23,40,84,1) 0%, rgba(23,40,84,1) 46%, rgba(23,40,74,1) 46%, rgba(15, 148, 176, 1) 100%);
background: linear-gradient(350deg,rgba(23, 44, 84, 1) 0%, rgba(23, 44, 74, 1) 38%, rgba(23, 44, 84, 1) 38%, rgba(38, 74, 140, 1) 100%);
}




/* Icons */
#teaser_wrapper .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_wrapper .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_wrapper .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;
}


/* Small Version */
#teaser_wrapper .small .icon{
top:calc(var(--teaser-icon-button-top) - .5rem);
right:calc(var(--teaser-icon-button-right) - 3.5rem);
width:calc(var(--teaser-icon-button-width) - 2.5rem);
height:auto;
}

#teaser_wrapper .small .flame{
top:calc(var(--teaser-flame-button-top) - .5rem);
right:calc(var(--teaser-flame-button-right) - 3.5rem);
width:calc(var(--teaser-flame-button-width) - 2.5rem);
height:auto;
}

#teaser_wrapper .small .new{
top:calc(var(--teaser-new-button-top) - .5rem);
right:calc(var(--teaser-new-button-right) - .5rem);
width:calc(var(--teaser-new-button-width) - 2.5rem);
height:auto;
}



/* Link */
#teaser_wrapper .card .foreground .link.intern{
display:inline-block;
position:relative;
top:var(--link_intern-top);
font-weight:bold;
font-family:var(--teaser-font-family);
color:var(--clr-primary-100);
font-size:var(--fs-p);
margin:1.5rem 0 .5rem 0;
padding:.5rem .75rem .5rem .5rem;
text-decoration:none;
border-radius:var(--brd-radius-5);
background:rgba(255, 255, 255, .25);
border:var(--brd-gray-100) 2px solid;
}

#teaser_wrapper .card .foreground .link.intern:hover{
background:rgba(255, 255, 255, .15) !important;
}

#teaser_wrapper .card .foreground .link.intern:before{
display:inline-block;
content:'';
width:1em;
height:.75em;
}

#teaser_wrapper .card .foreground .link.intern:before{
background:url('/assets/img/icon/arrow-light.svg') no-repeat top left;
}

#teaser_wrapper .theme_panda .foreground .text .link.intern{
background:hsla(57,60%,61%,.7);
border:hsla(57,60%,61%,.9) 2px solid;
}



#teaser_wrapper .theme_vio-20 .foreground .text .link.intern{
background:rgba(0, 0, 0, .1);
color:var(--clr-primary-300);
border:var(--clr-primary-300) 2px solid;
}

#teaser_wrapper .theme_vio-20 .foreground .text .link.intern:before{
background:url('/assets/img/icon/arrow-dark.svg') no-repeat top left;
}



/* Ani */
#teaser_wrapper .card .foreground .title{
position:relative;
opacity:0;
animation:teaser_ani_pos_1 500ms ease-out 50ms forwards;
}

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

@keyframes teaser_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 teaser_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;
}

}

@keyframes teaser_gradient{

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

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

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

}