@font-face {
    font-display: swap; 
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/rubik-v31-latin-regular.woff2') format('woff2'), 
    url('../Fonts/rubik-v31-latin-regular.ttf') format('truetype'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/rubik-v31-latin-500.woff2') format('woff2'), 
    url('../Fonts/rubik-v31-latin-500.ttf') format('truetype'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    src: url('../Fonts/rubik-v31-latin-600.woff2') format('woff2'), 
    url('../Fonts/rubik-v31-latin-600.ttf') format('truetype'); 
}
@font-face {
    font-display: swap; 
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    src: url('../Fonts/rubik-v31-latin-700.woff2') format('woff2'), 
    url('../Fonts/rubik-v31-latin-700.ttf') format('truetype'); 
}


:root {
    --color-1: #22282A;

    --color-2: #EA5D7E;
    --color-2-d1: #E7466D;
    --color-2-d2: #EA5C7E;
    --color-2-d3: #F8E3E7;

    --color-3: #00ADAE;
    --color-3-d1: #009FA3;
    --color-3-d2: #018084;
    --color-3-d3: #D9F2F3;
    --color-3-d4: #BAE8E9;

    --color-4: #216CAA;
    --color-4-d1: #E9F0F6;

    --color-5: #B995D1;
    --color-5-d1: #F1EAF6;

    --color-6: #FF726B;
    --color-6-d1: #FCE7EC;

    --color-7: #394348;

    --border-radius: 20px;


    --grid-size: 1440px;

}

@media(max-width:1440px) {
    :root {
        --grid-size: 100%;
    }
}



html, body {
    height: 100%;

    background-repeat:repeat-x;
    margin: 0;
    padding: 0;
    font-family: 'Rubik', arial;
    font-size:20px;

    color:var(--color-1);
}
html{scroll-behavior:smooth}


table, tr, td, th {
    font-family: 'Rubik', arial;
    font-size:20px;
}

.text-right,
.align-right {
    text-align:right;

}
.text-center,
.align-center {
    text-align:center;
}
.clear { clear:both; }



* { box-sizing:border-box;    -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale; }

.team .c33,
img,
.top, .top .main, .nav,
.teaser img, input, .nbar, .st0, .st1,
a, li {
    -webkit-transition: all 200ms ease-out;
  -moz-transition: all 200ms ease-out;
  -o-transition: all 200ms ease-out;
  transition: all 200ms ease-out;
  }
img {
  border:0px;
}


.all {
  width:100%;
  min-width:100%;
  padding-left:40px;
  padding-right:40px;
}
.all.content {  scroll-margin-top: 0px; } /* sticky navi offset */

@media(max-width: 1000px ){
    .all {
        padding-left:20px;
        padding-right:20px;
    }
}

.main {
  max-width:1440px;
  margin: 0px auto;
  padding:0px;
  position:relative;
  text-align: left;
}
.main:after { content:''; display:table; clear:both; }


.cStage {display: flex;margin:0 -20px;flex-wrap: wrap;}
.cStage > div{padding:0 20px;}
.cStage.l-30 > div{padding:0 10px;}

@media(max-width: 1000px) {
    .cStage {margin:0 -10px;}
    .cStage > div{padding:0 10px;}
}

.cStage.f-10 {align-items: center}
.cStage.f-11 {align-items: flex-end}


.frame {
    --ml: 0px;
    --mr: 0px;

    margin-left: var(--ml);
    margin-right: var(--mr);
    width: calc(100% - var(--ml) - var(--mr));
    box-sizing: border-box;
}

.cStage {--ml:-20px; --mr:-20px;}
.cStage.l-30 {margin:0 -10px;--ml:-10px; --mr:-10px;}

/* Standard Spacer links */
.sl-1 { --ml: calc(var(--grid-size) / 12 * 1); }
.sl-2 { --ml: calc(var(--grid-size) / 12 * 2); }
.sl-3 { --ml: calc(var(--grid-size) / 12 * 3); }
.sl-4 { --ml: calc(var(--grid-size) / 12 * 4); }
.sl-5 { --ml: calc(var(--grid-size) / 12 * 5); }

/* Standard Spacer rechts */
.sr-1 { --mr: calc(var(--grid-size) / 12 * 1); }
.sr-2 { --mr: calc(var(--grid-size) / 12 * 2); }
.sr-3 { --mr: calc(var(--grid-size) / 12 * 3); }
.sr-4 { --mr: calc(var(--grid-size) / 12 * 4); }
.sr-5 { --mr: calc(var(--grid-size) / 12 * 5); }

/* cStage links */
.sl-1.cStage { --ml: calc((var(--grid-size) / 12 * 1) - 15px); }
.sl-2.cStage { --ml: calc((var(--grid-size) / 12 * 2) - 15px); }
.sl-3.cStage { --ml: calc((var(--grid-size) / 12 * 3) - 15px); }
.sl-4.cStage { --ml: calc((var(--grid-size) / 12 * 4) - 15px); }
.sl-5.cStage { --ml: calc((var(--grid-size) / 12 * 5) - 15px); }

/* cStage rechts */
.sr-1.cStage { --mr: calc((var(--grid-size) / 12 * 1) - 15px); }
.sr-2.cStage { --mr: calc((var(--grid-size) / 12 * 2) - 15px); }
.sr-3.cStage { --mr: calc((var(--grid-size) / 12 * 3) - 15px); }
.sr-4.cStage { --mr: calc((var(--grid-size) / 12 * 4) - 15px); }
.sr-5.cStage { --mr: calc((var(--grid-size) / 12 * 5) - 15px); }

@media(max-width: 1000px) {
    div {--ml: 0 !important; --mr: 0!important;}

    div.cStage {--ml: -10px !important; --mr: -10px !important;}

}

.c33 { -ms-flex: 0 0 33.3333%;flex: 0 0 33.3333%; max-width: 33.3333%; }
.c66 { -ms-flex: 0 0 66.6666%;flex: 0 0 66.6666%; max-width: 66.6666%; }
.c16 { -ms-flex: 0 0 16.6666%;flex: 0 0 16.6666%; max-width: 16.6666%; }
.c30 { -ms-flex: 0 0 30%;flex: 0 0 30%; max-width: 30%; }
.c70 { -ms-flex: 0 0 70%;flex: 0 0 70%; max-width: 70%; }
.c40 { -ms-flex: 0 0 40%;flex: 0 0 40%; max-width: 40%; }
.c20 { -ms-flex: 0 0 20%;flex: 0 0 20%; max-width: 20%;}
.c50 { -ms-flex: 0 0 50%;flex: 0 0 50%; max-width: 50%;}
.c25 { -ms-flex: 0 0 25%;flex: 0 0 25%; max-width: 25%; }
.c75 { -ms-flex: 0 0 75%;flex: 0 0 75%; max-width: 75%; }
.c30 { -ms-flex: 0 0 30%;flex: 0 0 30%; max-width: 30%;}
.c35 { -ms-flex: 0 0 35%;flex: 0 0 35%; max-width: 35%; }
.c60 { -ms-flex: 0 0 60%;flex: 0 0 60%; max-width: 60%; }
.c80 { -ms-flex: 0 0 80%;flex: 0 0 80%; max-width: 80%; }
.c20 { -ms-flex: 0 0 20%;flex: 0 0 20%; max-width: 20%; }

@media(max-width: 1200px) {
    .c25 {
        --col-fraction: 0.50;
    }
    .c25 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom:40px !important;
    }
}


img,video {max-width: 100%; height:auto;}

a + p,
.main * > *:first-child {margin-top:0px;}
.main * > *:last-child {margin-bottom:0px;}


a {color:inherit; text-decoration: none}

@media(min-width: 901px) {
    .f-98 {display:none; visibility: hidden}

}
@media(max-width: 900px) {
    .f-99 {display:none; visibility: hidden}

}

a + p,
.main div > *:first-child {margin-top:0px;}


.top .main {  padding:80px 0;  display: flex;justify-content: space-between;    align-items: center;}
.top .main:after {display: none}
.top .main > ul {display: flex; margin:0; padding:0; list-style-type: none;}
.top .main > ul > li > a {font-weight:600; padding:20px; display: block}
.top .main > ul > li.act > a,
.top .main > ul > li:hover > a {color:var(--color-2-d1);}

@media(max-width: 900px) {
    .top .main > a {max-width: 60%}

    .top .main {padding:35px 0}
}


.top .main > ul > li.mnav {display: none; vertical-align: middle; visibility: hidden;transform:scale(.8); margin-right:-15px }

#menu_open { padding:20px 15px 15px 15px; display: block; cursor: pointer; z-index: 1}
#menu_open span {width: 60px;height:40px; display: block; margin-bottom:0px;}
#menu_open span div {position: relative;top: 0;height: 4px;background-color: var(--color-1);margin-bottom: 10px;transition: 0.4s ease transform, 0.4s ease background, 0.4s ease top, 0.4s ease width, 0.4s ease right;}
#menu_open span div:first-child {transform-origin: 0;}
#menu_open span div:last-child {margin-bottom: 0;transform-origin: 60px;}
#menu_open span div:nth-child(2) {right: 0px; width: 60px;}
.showNav #menu_open span div:first-child {top: -6px;left:10px;transform: rotateZ(45deg);}
.showNav #menu_open span div:last-child {top: 10px;right:6px;transform: rotateZ(45deg);}
.showNav #menu_open span div:nth-child(2) {width: 60px;top: 2px;right: 0px;transform: rotateZ(-45deg);}



nav.mobileNav {position: fixed; width:calc(100% - 100px); max-width: 390px;background:var(--color-1); color:#fff; height:100%;left:0; top:0; visibility: hidden; transform:translate(-150%,0); z-index: 99;}
body.showNav > nav.mobileNav {transform: translate(0,0); visibility: visible}

nav.mobileNav {padding:30px}
nav.mobileNav ul {margin:0; padding:0; list-style-type: none}
nav.mobileNav > ul > li > a {display: inline-block; position: relative; font-weight:600; padding:8px 0;  }
nav.mobileNav > ul > li > a.showSub {padding:5px;}
nav.mobileNav > ul > li > ul {visibility: hidden; margin:0; padding: 0; list-style-type: none; overflow: hidden; max-height: 0; }
.showNav nav.mobileNav > ul > li.showSub > a svg {transform:rotate(90deg);}
.showNav nav.mobileNav > ul > li.showSub > ul {max-height: 500px; visibility: visible;}
nav.mobileNav > ul > li > ul > li > a {font-size:16px;position: relative; font-weight:600; padding:5px 0 5px 15px; display: inline-block}
nav.mobileNav > ul > li > ul > li > a svg {transform:rotate(-90deg); vertical-align: middle; display: inline-block; margin-right: 5px}
nav.mobileNav > ul > li > ul > li:last-child {padding-bottom:10px;}

nav.mobileNav > ul > li > a svg {display: inline-block; vertical-align: middle}

nav.mobileNav > ul > li > ul > li:hover > a,
nav.mobileNav > ul > li:hover > a {color:var(--hl-color)}
nav.mobileNav > ul > li > a:first-child {width: calc(100% - 35px); vertical-align: middle}


@media (max-width:1200px) {
    .top .main > ul > li  {display: none; visibility: hidden}

    .top .main > ul > li.mnav {display: inline-block; visibility: visible;}

    .top .main > ul {    justify-content: flex-end; padding-left:20px}

}

.visually-hidden {display: none; visibility: hidden}






.subheader {font-size:16px; margin-bottom:0; color:var(--color-3-d2)}
.subheader + * {margin-top:10px;}

.all.header .cStage .c66.bleed-left .headline,
h1 {font-size:70px; margin:0 0 30px 0; color:var(--color-3-d1); font-weight:500; line-height:1.2em;}
h2 {font-size:50px; margin:0 0 20px 0; color:var(--color-3-d2); font-weight:500; line-height:1.2em;}

h3 {font-size:28px; line-height:1.2em;}

.teaser4 h3,
h4 {font-size:100%; line-height:1.2em;}

.frame.icon,
.big {font-size:140%; font-weight:500;line-height:1.3em}
.hl {color:var(--color-2-d1)}
.hl2 {color:var(--color-3-d2)}
.big.hl2 {font-size:250%; line-height:1.3em}


@media(max-width: 1200px) {

    .all.header .cStage .c66.bleed-left .headline,
    h1 {font-size:55px; }
    h2 {font-size:40px; }

    h3 {font-size:26px; }

    .teaser4 h3,
    h4 {font-size:100%; }

    .frame.icon,
    .big {font-size:130%; }
}


@media(max-width: 1000px) {
    html,body {font-size:18px;}

    .all.header .cStage .c66.bleed-left .headline {font-size:22px; line-height:1.5em; bottom:20px !important}
    h1 {font-size:38px; }
    h2 {font-size:28px; }

    h3 {font-size:24px; }

    .teaser2 h3,
    .teaser4 h3,
    h4 {font-size:100%; hyphens: auto; -webkit-hyphens: auto }

    .frame.icon,
    .big {font-size:130%; }

    .big.hl2 {
        font-size: 150%;
    }
}

@media(max-width: 600px) {
    .all.header .cStage .c66.bleed-left .headline {font-size:18px; }

}

.btn {border:1px solid var(--color-1); color:var(--color-1); font-family: inherit; font-size:inherit; cursor:pointer; display: inline-block; margin-top:20px; background:transparent; border-radius: 15px; padding:15px 30px;  font-weight:700; }
.btn:focus,
.btn:hover {background:var(--color-1); color:#fff}

a.pdf {padding-left:40px; display: inline-block; margin:3px 0;}
a.pdf:before {content:''; width: 27px; height:36px; background:url(../Images/icon-pdf.svg) center center no-repeat; position: absolute; margin-left:-40px; margin-top:-3px  }

a.mail {padding-left:40px; display: inline-block; margin:3px 0;}
a.mail:before {content:''; width: 27px; height:36px; background:url(../Images/icon-mail.svg) center center no-repeat; position: absolute; margin-left:-40px; margin-top:-3px  }

a.phone {padding-left:40px; display: inline-block; margin:3px 0;}
a.phone:before {content:''; width: 27px; height:36px; background:url(../Images/icon-phone.svg) center center no-repeat; position: absolute; margin-left:-40px; margin-top:-3px  }

a.fax{padding-left:40px; display: inline-block; margin:3px 0;}
a.fax:before {content:''; width: 27px; height:36px; background:url(../Images/icon-fax.svg) center center no-repeat; position: absolute; margin-left:-40px; margin-top:-3px  }

.all.header {
    --stage-max-width: 1480px;
    --stage-gutter: 40px;
}
.all.header .bigImage {height:425px; position: relative; }
.all.header img {display: block;border-radius:var(--border-radius);}
.all.header .bigImage img {border-top-left-radius: 0; border-bottom-left-radius: 0;}

.all.header .icon {
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    display: flex;
    border-radius: var(--border-radius);
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.all.header .icon span {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    position: relative;


}

.all.header .icon span img {
    display: block;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    /*object-fit: contain;
    max-width:  calc(100% - 20px);
    max-height:  calc(100% - 20px);;*/
    border-radius: 0;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

@media(max-width:900px) {
    /*
    .all.header .icon span {padding:15px}

     */

    .all.header .icon span img {
        width: calc(100% - 30px);
        height: calc(100% - 30px);
    }
}

.all.header .cStage + .cStage {margin-top:40px;}
.all.header .cStage .c100 {padding-left:60px;}


.all.header .icon.l-0 {background:var(--color-3-d1);}
.all.header .icon.l-10 {background:var(--color-3-d1);}
.all.header .icon.l-11 {background:var(--color-2-d2);}
.all.header .icon.l-12 {background:var(--color-4);}
.all.header .icon.l-13 {background:var(--color-5);}
.all.header .icon.l-14 {background:var(--color-6);}

.all.header .cStage .c66.bleed-left {

    --col-fraction: 0.666666; /* Standard: 66.6666% */

    --stage-width: min(calc(100vw - (2 * var(--stage-gutter))), var(--stage-max-width));
    --stage-side-gutter: calc((100vw - var(--stage-width)) / 2);

    flex: 0 0 calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter) + 0px);
    max-width: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter) + 0px);
    margin-left: calc(-1 * var(--stage-side-gutter));
    padding-left: 0;
}

@media(max-width: 1530px) {

    .all.header .cStage .c66.bleed-left {

        flex: 0 0 calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter) + 20px);
        max-width: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter) + 20px);

    }
}

.all.header .cStage .c66.bleed-left picture,
.all.header .cStage .c66.bleed-left img,
.all.header .cStage .c66.bleed-left video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

    object-position: right center;
}

.all.header .cStage .c66.bleed-left .headline {
    position: absolute;
    left: calc(var(--stage-side-gutter) + 20px);
    bottom: 40px;
    z-index: 2;
    color: #fff;
    margin-bottom:0; padding-right:40px;
}

main {    overflow: hidden;}

.content .main {padding:85px 0}
header .header .main {padding-top:0}

@media(max-width: 900px) {
    header .header .main {padding-bottom:0}
    main > .content:first-child .main {padding-top:30px;}
}

.content p,
.content li {line-height:1.5em;}

.content .frame + .frame {margin-top:80px;}
.content .frame.cStage + .frame.cStage {margin-top:40px;}

@media(max-width: 900px) {
    .content .frame.cStage + .frame.cStage {margin-top:20px;}

    .content .frame.cStage:has( .c25) + .frame.cStage:has( .c25) {margin-top:0}
}

.all.l-0 {--bg-color:#fff;}
.all.l-10,
.texticon.l-0,
.teaser.l-0 { --bg-color:var(--color-3-d3);}
.all.l-11,
.texticon.l-11,
.teaser.l-11  {--bg-color:var(--color-2-d3);}
.all.l-12,
.texticon.l-12,
.teaser.l-12 {--bg-color:var(--color-4-d1);}
.all.l-13,
.texticon.l-13,
.teaser.l-13 {--bg-color:var(--color-5-d1);}
.all.l-14,
.texticon.l-14,
.teaser.l-14 {--bg-color:var(--color-6-d1);}

@media(min-width: 1520px) {

.all.f-30 {background:#fff !important; position: relative; margin-bottom:80px;}
.all.f-30:before {content:''; width: 100%; height: 100%; position: absolute; left:50%; transform:translate(-780px,0);border-bottom-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius); background:var(--bg-color);}

.all.f-31 {background:#fff !important; position: relative; margin-bottom:80px;}
.all.f-31:before {content:''; width: 100%; height: 100%; position: absolute; right:50%; transform:translate(780px,0);border-bottom-right-radius: var(--border-radius); border-top-right-radius: var(--border-radius); background:var(--bg-color);}
}
.all.f-30,
.all.f-31 {margin-bottom:80px;}

 .main,
.all.f-30 .main {position: relative; z-index: 1; padding:50px 0;}



.teaser.teaser4.l-0 {--bg-color:var(--color-3-d4);}

.all {background:var(--bg-color)}

.texticon,
.teaser {background:var(--bg-color)}
.teaser {height:100%;}

.teaser1 {height:100%;  border-radius:var(--border-radius); overflow: hidden}
.teaser1 .wrap {padding:30px 30px 50px 30px;}
.teaser1 img {width: 100%;}

.teaser2  {border-radius:var(--border-radius);overflow:hidden;}
.teaser2 .image {height:390px; display: flex;    align-items: flex-end;justify-content: center;}
.teaser2 img {display: block;}
.teaser2 h3 {text-align:center; padding:40px 20px 0 20px; min-height: 100px;}

@media(max-width: 900px) {
    .teaser2 .image {height:190px; }
    .teaser2 h3 {padding:20px 20px 0 20px}
}

.teaser4,
.teaser3 {padding:30px; border-radius: var(--border-radius) }
.teaser4 .image,
.teaser3 .image {display: flex; height:150px; margin-bottom:30px;    align-items: center;justify-content: center;}

.teaser4 {text-align: center; padding:30px 20px;}
.teaser4 .image {height:100px; margin-bottom:15px}

.textpic {background:var(--color-2-d2); position: relative; }
.textpic img {display: inline-block;position: relative; z-index: 1; border-radius: var(--border-radius);}
.textpic .cStage {position: relative; z-index: 1}
.textpic h3 {color:#fff;}

.textpic.o-17 .image {   position: relative; display: flex;justify-content: flex-end; }
.textpic.o-17 .image:before {content:'';position:absolute; right:calc(0 - var(--mr)); top:0; height:100%; width: var(--border-radius); background:#fff}
.textpic.o-18 .image:before {content:'';position:absolute; left:calc(0 - var(--mr)); top:0; height:100%; width: var(--border-radius); background:#fff}

.textpic.o-17:before {content:''; position: absolute; width: 2000px; height:100%;background:var(--color-2-d2); right:50%; }
.textpic.o-18:before {content:''; position: absolute; width: 2000px; height:100%;background:var(--color-2-d2); left:50%; }

.textpic.o-18 .image {    display: flex;justify-content: flex-start;}
.textpic.o-18 .cStage {    flex-direction: row-reverse; }

@media(max-width: 900px) {
    .textpic {margin-left:-20px; margin-right:-20px; }
    .textpic .text {padding:20px 30px;}
    .textpic.o-17 .cStage {flex-direction: column-reverse}
    .textpic.o-17 .cStage div + div {margin-top:0}

    .textpic.o-18 .image:before,
    .textpic.o-17:before,
    .textpic.o-18:before {display: none}

    .textpic img {border-radius: 0}
}


.texticon {position: relative; border-radius: var(--border-radius)}
.texticon .cStage {flex-wrap: nowrap; position: relative; z-index: 1; padding:60px;}
.texticon .cStage .text {flex:1}
.texticon .cStage .image {width: 200px}

.texticon.sl-0:before {content:''; position: absolute; width: 2000px; height:100%;background:var(--bg-color); right:50%; }
.texticon.sr-0:before {content:''; position: absolute; width: 2000px; height:100%;background:var(--bg-color); left:50%; }
.texticon h2 {color:var(--color-2-d1);}


.logos {display: flex;  flex-wrap:wrap;  align-items: center;justify-content: space-around;}
.logos div {padding:10px 20px;}

@media(max-width: 900px) {
    .logos div { -ms-flex: 0 0 33.3333%;flex: 0 0 33.3333%; max-width: 33.3333%;padding:10px }

}


.frame-20 {margin-top:-250px !important;}


.frame.icon {display: flex;     align-items: center;}
.frame.icon .icon {width: 100px;  text-align: center;}
.frame.icon .text {flex:1;}




.c16 { --col-fraction: 0.166666; }
.c20 { --col-fraction: 0.2; }
.c25 { --col-fraction: 0.25; }
.c30 { --col-fraction: 0.3; }
.c33 { --col-fraction: 0.333333; }
.c35 { --col-fraction: 0.35; }
.c40 { --col-fraction: 0.4; }
.c50 { --col-fraction: 0.5; }
.c60 { --col-fraction: 0.6; }
.c66 { --col-fraction: 0.666666; }
.c70 { --col-fraction: 0.7; }
.c75 { --col-fraction: 0.75; }
.c80 { --col-fraction: 0.8; }

.cStage:has(.frame.image2) {
    --stage-max-width: 1480px;
    --stage-gutter: 40px;
}


.cStage > div.last:has(> .frame.image2) {
    --stage-width: min(calc(100vw - (2 * var(--stage-gutter))), var(--stage-max-width));
    --stage-side-gutter: calc((100vw - var(--stage-width)) / 2);

    display: flex;
    flex-basis: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter));
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter));
    margin-right: calc(-1 * var(--stage-side-gutter));
    padding-right: 0;
}

.cStage > div.last:has(> .frame.image2) .frame.image2 {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    border-top-left-radius: var(--border-radius);
    border-bottom-left-radius: var(--border-radius);
    overflow: hidden;
}
.cStage > div.last:has(> .frame.image2) .frame.image2 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    display: block;
}


.cStage > div.first:has(> .frame.image2) {
    --stage-width: min(calc(100vw - (2 * var(--stage-gutter))), var(--stage-max-width));
    --stage-side-gutter: calc((100vw - var(--stage-width)) / 2);

    display: flex;
    flex-basis: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter));
    flex-grow: 0;
    flex-shrink: 0;
    max-width: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter));
    margin-left: calc(-1 * var(--stage-side-gutter));
    padding-left: 0;
}

.cStage > div.first:has(> .frame.image2) .frame.image2 {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    overflow: hidden;
}
.cStage > div.first:has(> .frame.image2) .frame.image2 img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    display: block;
}

@media (max-width: 1200px) {
    .all.content .main:has(> div .frame.image2) {
        display: flex;
        flex-direction: column;
        padding-top:0
    }

    .all.content .main > .frame.cStage.l-0.f-default:has(.frame.image2) {
        display: contents;
    }

    .cStage > div.last:has(> .frame.image2) {
        order: -1;

        display: block;
        flex-basis: auto;
        max-width: 100%;
        margin-right: 0;
        padding-right: 0;
        padding-left:0;
        margin-top:0;
    }

    .cStage > div.last:has(> .frame.image2) .frame.image2 {
        flex: none;
        width:calc(100% + 80px);
        aspect-ratio: 16 / 9;
        border-radius: 0;
        margin-bottom:40px;

        margin-left:-40px;
        margin-right:-40px;

    }

    .cStage > div.last:has(> .frame.image2) .frame.image2 img {
        position: absolute;
        inset: 0;
        border-radius: 0;

    }

    .cStage > div.first:has(> .frame.image2) {
        order: -1;

        display: block;
        flex-basis: auto;
        max-width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding-right:0;
    }

    .cStage > div.first:has(> .frame.image2) .frame.image2 {
        flex: none;
        width:calc(100% + 80px);
        aspect-ratio: 16 / 9;
        border-radius: 0;
        margin-bottom:40px;

        margin-left:-40px;
        margin-right:-40px;
    }

    .cStage > div.first:has(> .frame.image2) .frame.image2 img {
        position: absolute;
        inset: 0;
        border-radius: 0;
    }

    .cStage:has(> div > .frame.image2) > div:not(:has(.frame.image2)) {
        flex: none;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding-top:40px;
        padding-left: 0;
        padding-right: 0;
    }
}

@media(max-width: 900px) {
    .cStage > div.last:has(> .frame.image2) .frame.image2 {
        width:calc(100% + 40px);
        margin-left:-20px;
        margin-right:-20px;

    }
    .cStage > div.first:has(> .frame.image2) .frame.image2 {
        width:calc(100% + 40px);
        margin-left:-20px;
        margin-right:-20px;
    }

    .cStage:has(> div > .frame.image2) > div:not(:has(.frame.image2)) {
        padding-top:20px;
    }
}


.history {display: flex; position: relative;   align-items: center;}
.history .year {background:var(--color-3-d2);    align-items: center;justify-content: center; border-radius: var(--border-radius); font-size:50px; font-weight:500; margin-right:30px; width: 210px;  color:#fff; display: flex; aspect-ratio: 1 / 1;}
.history .text {flex:1}
.content .frame.history + .frame.history {
    margin-top: 60px;
}
.history + .history .year:after {content:''; position: absolute; top:-50%; height:100%; width: 2px;background:var(--color-3-d2); }


@media(max-width: 900px) {
    .history {    align-items: flex-start;}
    .history .year {font-size:20px;width: 100px;}
    .history + .history .year:after {top:-100%}
}


main .all.content:last-child .main {padding-bottom:200px;}

footer {background: var(--color-7) }
footer .all.l-0 {--bg-color: transparent; color:#fff; background-image:url(../Images/round.png); background-position: 160% 400px; background-repeat: no-repeat }
footer .all:first-child .main {padding-top:50px;}
footer ul {list-style-type: none; padding:0}
footer .frame#c32 {margin-top:15px !important;}


.ce-gallery[data-ce-columns="3"] .ce-column {
    width:calc(33.3333% - 15px)
}
.ce-gallery[data-ce-columns="2"] .ce-column {
    width:calc(50% - 15px)
}

@media (max-width: 1100px) {
	.projects .c25 {width:33.3333%;}
    .ce-textpic.ce-intext .ce-gallery {max-width:50%;}
}

/* Only Phones */
@media (max-width: 900px) {

    .c33,
    .c66,
    .c16,
    .c30,
    .c70,
    .c40,
    .c20,
    .c50,
    .c80,
    .c25,
    .c75,
    .c30,
    .c35,
    .c60 { -ms-flex: 0 0 100%;flex: 0 0 100%; max-width: 100%; }

    .cStage > div + div {margin-top:20px;}
    .cStage.l-99 {flex-direction: column-reverse}

    .header .c50,
    .header .c33,
    .header .c66 { -ms-flex: 0 0 50%;flex: 0 0 50%; max-width: 50%;}
    .header .cStage > div + div {margin-top:0}

    .all.header .cStage .c100 img {max-width: 80%}

    .all.header .cStage .c66.bleed-left {
        --col-fraction: 0.5;

        flex: 0 0 calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter) + 30px);
        max-width: calc((var(--stage-width) * var(--col-fraction)) + var(--stage-side-gutter) + 30px);
    }
    .all.header .cStage + .cStage {
        margin-top: 20px;
    }
    .all.header .bigImage {height:90%}

    .c25 {
        --col-fraction: 0.50;
    }
    .c25 {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom:20px !important;
    }
    .cStage > div.c25 + div.c25 {margin-top:0}


    .frame:has(> div > .frame-40) {position:relative}
    .frame-40 {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        opacity: .4;
        width: 100%;
    }
    .frame-40 img,
    .frame-40 svg {width: 85%; height: auto;}

    .texticon .cStage {padding:20px}
    .texticon .cStage .image {max-width: 20%}
    .texticon .cStage > div + div {margin-top:0}

    .content .frame + .frame {
        margin-top: 40px;
    }

    footer #c29 .cStage {flex-direction: column-reverse}
    footer #c29 .cStage .frame-20 img {max-width: 60%; margin-left:40%}
}



@media (max-width: 650px) {

    .content .ce-left .ce-gallery,
    .content .ce-right .ce-gallery {
        float: none;
    }
    .content .ce-intext.ce-right .ce-gallery {
        margin-left: 0px;
    }
    .content .ce-intext.ce-left .ce-gallery {
        margin-right: 0px;
    }
    .ce-textpic.ce-intext .ce-gallery {max-width:100%;}

	.c30, .c35 {width:100%; padding-bottom:20px;}
}




/* Formulare */


.frame-type-form_formframework p { font-size:90%; }

input[type="checkbox"] { margin-right:15px; }
.control-label { display:none; }

.form-element + * + .form-element,
.form-element + .form-element {margin-top:20px;}

.form-label {padding:0 0 8px 25px; font-weight:400; display: block}

.form-element input[type="email"],
.form-element input[type="phone"],
.form-element select,
.form-element input[type="text"],
.form-element textarea,
.csc-form-element-textline input {
  font-family:inherit;
  font-size:inherit;
  color: var(--color-1);
  background:#fff;
  width:100%;
  border:1px solid var(--color-3-d1);
    border-radius: var(--border-radius);
  padding:15px 25px;

}

.form-element textarea {height:200px;}

form .actions {padding-top:30px;}

form .row {display: flex; flex-wrap: wrap; margin:0 -10px;}
form .row .col-1 { --cols: calc( 100% / 12 * 1); }
form .row .col-2 { --cols: calc( 100% / 12 * 2); }
form .row .col-3 { --cols: calc( 100% / 12 * 3); }
form .row .col-4 { --cols: calc( 100% / 12 * 4); }
form .row .col-5 { --cols: calc( 100% / 12 * 5); }
form .row .col-6 { --cols: calc( 100% / 12 * 6); }
form .row .col-7 { --cols: calc( 100% / 12 * 7); }
form .row .col-8 { --cols: calc( 100% / 12 * 8); }
form .row .col-9 { --cols: calc( 100% / 12 * 9); }
form .row .col-10 { --cols: calc( 100% / 12 * 10); }
form .row .col-11 { --cols: calc( 100% / 12 * 11); }
form .row .col-12 { --cols: calc( 100% / 12 * 12); }
form .row > div {-ms-flex: 0 0 var(--cols);flex: 0 0 var(--cols); max-width: var(--cols); padding:0 10px;}

@media (max-width: 1000px) {
    form .row > div {-ms-flex: 0 0 100%;flex: 0 0 100%; max-width: 100%; padding:0 10px;}
    form .row > div + div {margin-top:20px}
}



/* The container */
.form-check-label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.form-check-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.form-check-label span {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: transparent;
  border:1px solid  var(--color-1);
}
.form-check-label span.required { position:relative;width:auto; height:auto; border:0px; }

/* On mouse-over, add a grey background color */
.form-check-label:hover input ~ span {
  background-color:  var(--color-1);
}

/* When the checkbox is checked, add a blue background */
.form-check-label input:checked ~ span {
  background-color:  var(--color-1);
}

/* Create the checkmark/indicator (hidden when not checked) */
span:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.form-check-label input:checked ~ span:after {
  display: block;
}

/* Style the checkmark/indicator */
.form-check-label span:after {
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}