@font-face{
font-family:'AaltoSansEssential-Thin';
src:url('/asset/font/Aalto/AaltoSansEssential-Thin.woff2') format('woff2');
font-display:fallback;
}

@font-face{
font-family:'AaltoSansEssential-Light';
src:url('/asset/font/Aalto/AaltoSansEssential-Light.woff2') format('woff2');
font-display:fallback;
}

@font-face{
font-family:'AaltoSansEssential-Regular';
src:url('/asset/font/Aalto/AaltoSansEssential-Regular.woff2') format('woff2');
font-display:fallback;
}

@font-face{
font-family:'HelveticaNeue-Bold';
src:url('/asset/font/HelveticaNeue/HelveticaNeue-Bold.woff2') format('woff2');
font-display:fallback;
}

@font-face{
font-family:'HelveticaNeue-Thin';
src:url('/asset/font/HelveticaNeue/HelveticaNeue-Thin.woff2') format('woff2');
font-display:fallback;
}

@font-face{
font-family:'Kaushan Script';
src:url('/asset/font/kaushan/KaushanScript-Regular.woff2') format('woff2'),url('/asset/font/kaushan/KaushanScript-Regular.woff') format('woff');
font-display:fallback;
}


:root{
--nav-font-family:AaltoSansEssential-Thin, Helvetica, Arial, sans-serif;
--nav-bold-font-family:AaltoSansEssential-Light, Helvetica, Arial, sans-serif;

--base-font-family:AaltoSansEssential-Light, Helvetica, Arial, sans-serif;
--bold-font-family:AaltoSansEssential-Regular, Helvetica, Arial, sans-serif;
--base-font-color:rgb(26,24,28);

--base-border-color:rgb(230,230,230);
--base-background-color:rgb(255,255,255);
--base-theme-color:rgb(26,24,28);

--base-background-transparent-color:rgba(255,255,255,.75);

--light-font-color:rgb(255,255,255);
--light-border-color:rgb(240,240,240);
--light-background-color:rgb(250,250,250);
--light-theme-color:rgb(200,200,200);

--middle-font-color:rgb(230,230,230);
--middle-border-color:rgb(180,180,180);
--middle-background-color:rgb(248,248,248);
--middle-theme-color:rgb(230,230,230);

--dark-border-color:rgb(108,108,108);
--dark-background-color:rgb(108,108,108);
--dark-theme-color:rgb(128,128,128);

--input-base-font-size:.75rem;
--input-base-font-color:rgb(26,24,28);

--input-base-border-color:rgb(230,230,230);
--input-base-background-color:rgb(255,255,255);
--input-dark-border-color:rgb(200,200,200);

--button-font-color:rgb(255,255,255);
--button-border-color:rgb(3,189,91);
--button-background-color:rgb(3,189,91);
/*
--button-border-color:rgba(125,66,130);
--button-background-color:rgba(125,66,130);
*/

--button-border-color:rgb(71,21,124);
--button-background-color:rgb(71,21,124);

--button-border-color:rgb(99,52,141);
--button-background-color:rgb(99,52,141);

--button-border-color:rgb(95,55,136);
--button-background-color:rgb(95,55,136);


--button-hover-font-color:rgb(255,255,255);
--button-hover-border-color:rgb(128,128,128);
--button-hover-background-color:rgb(128,128,128);

--asset-base-font-family:HelveticaNeue-Thin, Arial, sans-serif;
--asset-base-font-color:rgb(255,255,255);

/*--asset-base-font-family:Kaushan Script, Arial, sans-serif;*/

--asset-bold-font-family:HelveticaNeue-Bold, Arial, sans-serif;
--asset-bold-font-color:rgb(255,255,255);


--asset-base-border-color:rgb(230,230,230);
--asset-base-background-color:rgb(255,255,255);
--asset-base-theme-color:rgb(26,24,28);


--asset-border-color:rgb(255,255,255);
--asset-background-color:rgb(241,241,241);
--asset-theme-color:rgb(95,55,136);

--tooltip-font-color:rgb(255,255,255);
--tooltip-border-color:rgba(255,255,255,1);
--tooltip-background-color:rgba(0,0,0,.85);

--blind-border-color:rgba(255,255,255,0);

--nav-font-color:rgb(86,61,196);
--nav-font-color:rgb(95,55,136);
--nav-background-color:rgba(255,255,255,.6);
--nav-on-background-color:rgba(255,255,255,.8);

--calendar-background-color:rgb(235,235,235);
--calendar-on-background-color:rgb(136,220,174);
--calendar-selected-background-color:rgb(3,189,91);


--active-font-color:rgb(255,255,255);
--active-border-color:rgb(133,194,153);
--active-background-color:rgb(133,194,153);

--pending-font-color:rgb(255,255,255);
--pending-border-color:rgb(255,165,0);
--pending-background-color:rgb(255,165,0);

--alert-font-color:rgb(255,255,255);
--alert-border-color:rgb(240,35,46);
--alert-background-color:rgb(240,35,46);

--danger-font-color:rgb(255,255,255);
--danger-border-color:rgb(255,165,0);
--danger-background-color:rgb(255,165,0);




--xxs-font-size:.65rem;
--xs-font-size:.80rem;
--s-font-size:.90rem;
--m-font-size:1rem;
--l-font-size:1.10rem;
--xl-font-size:1.85rem;
--xxl-font-size:1.75rem;
--xxxl-font-size:4.25rem;
}

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

:root{
--xxs-font-size:.75rem;
--xs-font-size:.95rem;
--s-font-size:.95rem;
--m-font-size:1rem;
--l-font-size:1.25rem;
--xl-font-size:1.45rem;
--xxl-font-size:1.65rem;
--xxxl-font-size:1.75rem;
}

}

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

:root{
--xxs-font-size:.65rem;
--xs-font-size:.80rem;
--s-font-size:.90rem;
--m-font-size:1rem;
--l-font-size:1.10rem;
--xl-font-size:1.45rem;
--xxl-font-size:1.65rem;
--xxxl-font-size:3.85rem;
}

}

*{
box-sizing:border-box;
margin:0;
text-decoration:none;
line-height:1.5rem;
hyphens:auto;
overflow-wrap:break-word;
}

*{
-webkit-text-size-adjust:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
outline:none;
}

body{
background:var(--base-background-color);
font-family:var(--base-font-family);
color:var(--base-font-color);
padding:0 0 .5rem 0;
}

form{
float:left;
width:100%;
margin:0;
padding:0;
}

fieldset{
float:left;
width:100%;
border:0;
margin:0;
padding:0;
}

.input,
.file,
.textarea{
border-radius:0;
-webkit-appearance:none;
}

.hidden{
display:none;
}

.highlight{
padding:.35rem 0 .15rem 0;
}

.highlight li{
list-style:none;
}

.highlight li:before{
display:inline-block;
content:'';
height:.65rem;
width:1rem;
background:url('/asset/img/list.svg') no-repeat top left;
}


.highlight.string{
padding:0 .5em;
background:var(--asset-background-color);
color:var(--light-theme-color);
border-radius:.25rem;
}

.highlight.array{
padding:0 .5em;
background:var(--asset-background-color);
color:var(--light-theme-color);
border-radius:.25rem;
}

a{
color:var(--base-font-color);
font-weight:bold;
}

.link_intern{
transition:background 250ms ease-in, color 250ms ease-out;
}

.media_box{
clear:both;
float:left;
width:100%;
}

.media.fit.ghs{
height:auto;
min-width:4rem;
width:100%;
max-width:6rem;
margin-left:.5rem;
}

.media.fit.ghs .legend{
text-align:center;
font-weight:bold;
}

section:first-of-type{
margin:0;
}

article section .foreground .sort-wrapper{
display:inline-block;
height:1rem;
}

article section .foreground .sort{
display:flex;
justify-content:center;
align-items:center;
min-width:1.5rem;
height:1.5rem;
position:absolute;
top:.5rem;
left:.5rem;
background:var(--asset-background-color);
border:var(--light-border-color) 2px solid;
border-radius:50%;
}

article section .foreground .sort p{
display:flex;
justify-content:center;
align-items:center;
width:100%;
margin:0;
padding:0;
font-size:.65rem;
text-align:center;
color:var(--base-font-color);
font-weight:bold;
}

article section .foreground,
article section .foreground.key{
float:left;
width:100%;
margin:.5rem 0 1rem 0;
padding:0 .5rem;
position:relative;
display:inline-block;
}


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

article section .foreground.key{
display:grid;
grid-template-rows:minmax(0,auto) auto auto auto;
grid-template-areas:
"keyvisual"
"title"
"text"
"asset";
grid-column-gap:1rem;
grid-template-columns:100%;
}

article section .foreground.key .keyvisual{
grid-area:keyvisual;
margin:.5rem auto;
min-height:20rem;
}

article section .foreground.key .keyvisual .media{
margin:0;
padding:0;
}


article section .foreground.row{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
border:0;
border-radius:.25rem;
}

article section .foreground.row{
background:var(--asset-background-color);
}

article section .foreground.row .title{
text-align:center;
margin:.5rem 0 0 0;
}

article section .foreground.row .text{
display:flex;
justify-content:center;
align-items:center;
width:100%;
flex-wrap:wrap;
}

article section .foreground.row .media{
width:8.625rem !important;
height:auto !important;
margin:2rem;
}

article section .foreground.key.history{
display:grid;
grid-template-rows:minmax(0,auto) auto auto auto;
grid-template-areas:
"keyvisual"
"title"
"text"
"asset";
grid-column-gap:1rem;
grid-template-columns:100%;
}

article section .foreground.history .keyvisual{
width:100%;
}

article section .foreground.history .title{
width:100%;
padding:.5rem .75rem 0 .75rem;
}

article section .foreground.history .text{
width:100%;
padding:0 .75rem;
}


/*
article section .foreground.key.finishing.left,
article section .foreground.key.finishing.right{
display:grid;
grid-template-rows:minmax(0,auto) auto auto auto;
grid-template-areas:
"keyvisual"
"title"
"text"
"asset";
grid-column-gap:1rem;
grid-template-columns:100%;
}

article section .foreground.finishing.left .title,
article section .foreground.finishing.right .title{
float:left;
width:100%;
margin:0 .5rem 1rem .5rem;
padding:0;
border:0px solid red;
}

article section .foreground.finishing.left .text,
article section .foreground.finishing.right .text{
float:left;
width:100%;
border:0px solid red;
margin:0 .5rem .5rem .5rem;
padding:0;
}
*/


}

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

article section .foreground.key{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"keyvisual title"
"keyvisual text"
"asset asset";
grid-template-columns:1fr 3fr;
grid-column-gap:1rem;
}

article section .foreground.key .keyvisual{
grid-area:keyvisual;
height:auto;
min-height:20rem;
max-width:33rem;
}

article section .foreground.row{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
border:0;
border-radius:.25rem;
background:var(--asset-background-color);
}

article section .foreground.row{
background:var(--asset-background-color);
}

article section .foreground.row .title{
text-align:center;
margin:.5rem 0 0 0;
}

article section .foreground.row .text{
display:flex;
justify-content:center;
align-items:center;
width:100%;
flex-wrap:wrap;
}

article section .foreground.row .media,
article section .foreground.download .media{
width:8.625rem !important;
height:auto !important;
margin:2rem;
}


article section .foreground.key.history{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"keyvisual title"
"keyvisual text"
"asset asset";
grid-template-columns:1fr 1fr;
grid-column-gap:1rem;
}

article section .foreground.history .keyvisual{
width:100%;
}

article section .foreground.history .title{
position:absolute;
top:3rem;
left:0;
}

article section .foreground.history .text{
position:absolute;
top:7rem;
left:0;
}


/*
article section .foreground.key.finishing.left{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"keyvisual title"
"keyvisual text"
"asset asset";
grid-template-columns:2fr 3fr;
grid-column-gap:1rem;
}


article section .foreground.finishing.left .title{
position:absolute;
top:4rem;
left:0;
border:0px solid red;
}

article section .foreground.finishing.left .text{
position:absolute;
top:8rem;
left:0;
border:0px solid red;
}


article section .foreground.key.finishing.right{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"title keyvisual"
"text keyvisual"
"asset asset";
grid-template-columns:3fr 2fr;
grid-column-gap:1rem;
}


article section .foreground.finishing.right .title{
position:absolute;
top:4rem;
left:2rem
}

article section .foreground.finishing.right .text{
position:absolute;
top:8rem;
left:2rem
}
*/


}

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

article section .foreground.key{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"keyvisual title"
"keyvisual text"
"asset asset";
grid-template-columns:1fr 3fr;
grid-column-gap:1rem;
}

article section .foreground.key .keyvisual{
grid-area:keyvisual;
height:auto;
min-height:20rem;
max-width:33rem;
}

article section .foreground.row{
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
border:0;
border-radius:.25rem;
}

article section .foreground.row{
background:var(--asset-background-color);
}

article section .foreground.row .title{
text-align:center;
margin:.5rem 0 0 0;
}

article section .foreground.row .text{
display:flex;
justify-content:center;
align-items:center;
width:100%;
flex-wrap:wrap;
}

article section .foreground.row .media{
width:8.625rem !important;
height:auto !important;
margin:2rem;
}

article section .foreground.key.history{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"keyvisual title"
"keyvisual text"
"asset asset";
grid-template-columns:1fr 1fr;
grid-column-gap:1rem;
}

article section .foreground.history .keyvisual{
width:100%;
}

article section .foreground.history .title{
position:absolute;
top:3rem;
left:0;
}

article section .foreground.history .text{
position:absolute;
top:7rem;
left:0;
}


/**/
article section .foreground.key.download{
display:grid;
grid-template-rows:minmax(0,auto) auto auto;
grid-template-areas:
"keyvisual title"
"keyvisual text"
"asset asset";
grid-template-columns:1fr 4fr;
grid-column-gap:1rem;
}

article section .foreground.key.download .keyvisual{
grid-area:keyvisual;
margin:0 auto;
max-width:12rem;
}

article section .foreground.key.download .keyvisual .media{
margin:1rem;
padding:0;
}

article section .foreground.key.download .title{
margin:2rem 0 0 0;
grid-area:title;
}

article section .foreground.key.download .text{
grid-area:text;
max-width:90%;
}

}


article section .foreground.download,
article section .foreground.history{
background:linear-gradient(0deg, rgba(241,241,241,1) 1%, rgba(255,255,255,1) 70%);
border-bottom:var(--base-border-color) 1px solid;
}



article section .foreground .title{
grid-area:title;
display:block;
width:100%;
margin:0;
padding:0;
}

article section .foreground .headline{
display:block;
}

article section .foreground .headline > *{
display:inline-block;
margin:0;
padding:0;
}

article section .foreground .text{
grid-area:text;
}

article section .foreground .asset{
float:left;
width:100%;
grid-area:asset;
}


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

.tooltip_info{
display:none;
}

#page-progressbar{
background: linear-gradient(to right, rgba(240,109,15,.85) 0%,rgba(125,66,130,.75) 100%);
position:fixed;
top:0;
left:0;
width:0;
height:2px;
z-index:1000;
}

h1{
margin:0;
padding:.5em 0;
font-family:var(--bold-font-family);
font-size:var(--xxl-font-size);
}

h2{
margin:0;
padding:.25em 0 .5em 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
}

h3{
margin:0;
padding:.5em 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
}

h4,
h5,
h6{
margin:0;
padding:.5em 0;
font-family:var(--bold-font-family);
font-size:var(--l-font-size);
}

.text h2{
margin:0;
padding:.25em 0 .5em 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
}

.text h3{
margin:0;
padding:.5em 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
}

.text h4,
.text h5,
.text h6{
margin:0;
padding:.5em 0;
font-family:var(--bold-font-family);
font-size:var(--l-font-size);
}

.ol{
margin:0 0 .25rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--m-font-size);
font-family:var(--bold-font-family);
}

.hl{
margin:0 0 .15rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--xxl-font-size);
font-family:var(--bold-font-family);
}

.sl{
margin:.5rem 0 .15rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--l-font-size);
font-family:var(--bold-font-family);
}

p{
margin:0;
padding:.5em 0;
color:var(--base-font-color);
font-size:var(--m-font-size);
}

*{
line-height:normal;
}

p{
line-height:1.5rem;
}

ul,
ol{
float:left;
width:100%;
margin:0;
padding:0 0 .25rem 1.5rem;
}

ul{
list-style:square;
}


}



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

#page-progressbar{
display:none;
}

.tooltip{
display:inline-block;
position:relative;
top:0;
left:0;
}

.tooltip_info{
display:block;
z-index:1000;
color:var(--tooltip-font-color);
font-size:var(--xs-font-size);
line-height:var(--m-font-size);
margin:0;
padding:.25rem .25rem;
position:absolute;
width:auto;
max-width:10rem;
text-align:center;
background:var(--tooltip-background-color);
border:var(--tooltip-border-color) 1px solid;
border-radius:6px;
}

.tooltip_info:after{
display:inline-block;
content:'';
width:18px;
height:10px;
background:var(--tooltip-background-color);
position:absolute;
top:-10px;
left:calc(50% - 9px);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

h1{
margin:0;
padding:.5rem 0;
font-family:var(--bold-font-family);
font-size:var(--xxl-font-size);
font-weight:lighter;
}

h2{
margin:0;
padding:.25rem 0 .5rem 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
font-weight:lighter;
}

h3{
margin:0;
padding:.5rem 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
font-weight:lighter;
}

h4,
h5,
h6{
margin:0;
padding:.5rem 0;
font-family:var(--bold-font-family);
font-size:var(--l-font-size);
font-weight:lighter;
}

.text h2{
margin:0;
padding:.5rem 0 .25rem 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
font-weight:lighter;
line-height:2rem;
}

.text h3{
margin:0;
padding:.5rem 0;
font-family:var(--bold-font-family);
font-size:var(--xl-font-size);
font-weight:lighter;
}

.text h4,
.text h5,
.text h6{
margin:0;
padding:.5rem 0;
font-family:var(--bold-font-family);
font-size:var(--l-font-size);
font-weight:lighter;
}

.ol{
margin:0 0 .25rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--m-font-size);
font-family:var(--bold-font-family);
}

.hl{
margin:0 0 .15rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--xxl-font-size);
font-family:var(--bold-font-family);
}

.sl{
margin:.5rem 0 .15rem 0;
padding:0;
color:var(--base-font-color);
font-size:var(--l-font-size);
font-family:var(--bold-font-family);
}

p{
margin:0;
padding:.5em 0;
color:var(--base-font-color);
font-size:var(--m-font-size);
}

ul,
ol{
float:left;
width:100%;
margin:0;
padding:0 0 .25rem 1.5rem;
}

ul{
list-style:square;
}

fieldset{
margin:0;
padding:0;
}

}


.ol,
.hl,
.sl{
display:block;
}

article section .foreground .link .link_intern{
float:right;
margin:.1rem 0 .15rem 0;
color:var(--nav-font-color);
text-transform:uppercase;
}

article section .foreground .link .link_intern:hover{
float:right;
margin:.1rem 0 .15rem 0;
color:var(--base-font-color);
text-transform:uppercase;
}




/* Verteilerseite Magazin */

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

.verteilerseite-wrapper{
border:0px #FF00FF solid;
display:flex;
justify-content:space-between !important;
align-content:center !important;
flex-wrap:wrap;
padding:0;
}

.verteilerseite-wrapper article section .background{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
overflow:hidden;
}

}



/* Verteilerseite Magazin */
.verteilerseite-wrapper article,
.verteilerseite-wrapper article:first-of-type,
.verteilerseite-wrapper article:last-of-type{
float:left;
min-height:21rem;
margin:0 0 .5rem 0;
padding:0 .5rem;
position:relative;
}


.verteilerseite-wrapper article section .foreground{
width:100%;
min-height:18rem;
position:absolute;
top:0;
left:0;
z-index:2;
display:flex;
justify-content:center;
align-items:center;
flex-direction:column;
}

/**/
.verteilerseite-wrapper article section .background{
position:absolute;
top:0;
left:0;
z-index:1;
overflow:hidden;
}


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

.verteilerseite-wrapper article,
.verteilerseite-wrapper article:first-of-type,
.verteilerseite-wrapper article:last-of-type{
margin:.5rem 0;
padding:.5rem;
width:100%;
}

.verteilerseite-wrapper article section .foreground{
height:18rem;
width:100%;
}

.verteilerseite-wrapper article section .background{
height:21rem;
width:100%;
}

}

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

.verteilerseite-wrapper article,
.verteilerseite-wrapper article:first-of-type,
.verteilerseite-wrapper article:last-of-type{
min-height:21rem;
min-width:20rem;
width:100%;
}

.verteilerseite-wrapper article section .foreground{
min-height:20rem;
}

.verteilerseite-wrapper article section .product_bg{
position:absolute;
top:-7.5rem;
left:0;
}

}

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

.verteilerseite-wrapper article,
.verteilerseite-wrapper article:first-of-type,
.verteilerseite-wrapper article:last-of-type{
min-height:16rem;
min-width:20rem;
width:33%;
}

.verteilerseite-wrapper article section .foreground{
min-height:15rem;
}

}


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

.verteilerseite-wrapper article,
.verteilerseite-wrapper article:first-of-type,
.verteilerseite-wrapper article:last-of-type{
min-width:20rem;
width:33%;
}

.verteilerseite-wrapper article section .foreground{
min-height:19rem;
}

}



.verteilerseite-wrapper article section .foreground .title{
text-align:center;
width:100%;
}

.verteilerseite-wrapper article section .foreground .ol,
.verteilerseite-wrapper article section .foreground .hl,
.verteilerseite-wrapper article section .foreground .sl{
color:var(--asset-base-font-color) !important;
width:100%;
}

.verteilerseite-wrapper article section .foreground .hl{
font-family:var(--asset-bold-font-family);
}

.verteilerseite-wrapper article section .foreground .text .link_intern{
display:inline-block;
position:relative;
top:var(--link_intern-top);
font-family:var(--asset-bold-font-family);
font-weight:normal;
padding:.5rem .75rem .5rem .5rem;
text-decoration:none;
border-radius:.5rem;
border:var(--asset-border-color) 2px solid;
}

.verteilerseite-wrapper article section .foreground .text .link_intern:hover{
color:var(--base-font-color);
background:rgba(255, 255, 255, .8);
}

.verteilerseite-wrapper article section .foreground .text .link_intern:hover:before{
background:url('/asset/img/icon/arrow-dark.svg') no-repeat top left;
}

.verteilerseite-wrapper article section .foreground .text .link_intern{
color:var(--light-font-color);
background:rgba(102, 113, 126, .5);
}

.verteilerseite-wrapper article section .foreground .text .link_intern:before{
display:inline-block;
content:'';
width:1em;
height:.75em;
}

.verteilerseite-wrapper article section .foreground .text .link_intern:before{
background:url('/asset/img/icon/arrow-light.svg') no-repeat top left;
}

.verteilerseite-wrapper article section .background .product_bg{
filter:brightness(80%);
}


.verteilerseite-wrapper article section .background:before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
display:block;
background:linear-gradient(45deg, rgba(11, 11,11,.5) 0%, rgba(22, 22, 22,.25) 100%);
z-index:2;
}

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

:root{
--product-bottom:-.15rem;
--product-right:.35rem;
--product-width:6.5rem;

--product-rotate-bottom:0;
--product-rotate-right:1.5rem;
--product-rotate-width:6.25rem;
}

}

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

:root{
--product-bottom:.25rem;
--product-right:1.75rem;
--product-width:11.5rem;

--product-rotate-bottom:.5rem;
--product-rotate-right:1.5rem;
--product-rotate-width:11.25rem;
}

}

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

:root{
--product-bottom:-.15rem;
--product-right:.25rem;
--product-width:5.25rem;

--product-rotate-bottom:0;
--product-rotate-right:.75rem;
--product-rotate-width:5rem;
}

}

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

:root{
--product-bottom:-.15rem;
--product-right:.75rem;
--product-width:8.5rem;

--product-rotate-bottom:0;
--product-rotate-right:1.5rem;
--product-rotate-width:8.25rem;
}

}

.verteilerseite-wrapper article section .background .product{
position:absolute;
display:block;
bottom:var(--product-bottom);
right:var(--product-right);
width:var(--product-width);
height:auto;
z-index:2;
}

.verteilerseite-wrapper article section .background .product_rotate{
position:absolute;
display:block;
bottom:var(--product-rotate-bottom);
right:var(--product-rotate-right);
width:var(--product-rotate-width);
height:auto;
z-index:2;
transform:rotate(8deg);
}