@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2'), 
    url('../Fonts/ibm-plex-sans-v23-latin-regular.ttf') format('truetype'); 
}
@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/ibm-plex-sans-v23-latin-500.woff2') format('woff2'), 
    url('../Fonts/ibm-plex-sans-v23-latin-500.ttf') format('truetype'); 
}
@font-face {
    font-display: swap;
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../Fonts/ibm-plex-sans-v23-latin-700.woff2') format('woff2'), 
    url('../Fonts/ibm-plex-sans-v23-latin-700.ttf') format('truetype'); 
}
html, body {

    background-repeat:repeat-x;
    margin: 0;
    padding: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:24px;

    background:var(--color-4);
    color:var(--color-2);
}
html{scroll-behavior:smooth}

body {height: 100%; position: relative}

table, tr, td, th {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size:24px;
}

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

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


body {overflow-x:hidden}


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

.team .c33,
.teaser1 .sizes div.info,
.teaser1 .sizes div.info *,
img,
.top, .top .main, .nav,
.teaser img, input, .nbar, .st0, .st1,
a, li {
    -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
  }
img {
  border:0px;
}


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

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


.cStage {display: flex;margin:0 -25px;flex-wrap: wrap;}
.cStage > div{padding:0 25px;}

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

.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%; }


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

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

:root {
    --color-1: #308E58;
    --color-2: #114D39;
    --color-3: #A8DB8C;
    --color-3-50: rgba(168,219,140,.5);


    --color-4:#FAFAFA;
}

a {color:inherit; text-decoration: none}
a:not(.btn):hover {color:var(--color-1);}

a.more {color:var(--color-1); font-weight:700}
a.more:hover {color:inherit;}

h1,h2 {font-size:80px;text-transform: uppercase; line-height: 1.1em; color:var(--color-1); }
h4,
h3 {font-size:28px; text-transform: uppercase;color:var(--color-1);}

.header h1 {font-size:110px; margin:0 }

span.highlight {font-size:200%; }


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


.header .c50.image {padding-right:calc(100% / 12 * 1);}
.header .c50.image img {border-top-right-radius: 230px;}

.header .icons img {display: inline-block; }
.header .icons img + img {margin-left:30px;}

.header .text {padding:80px 0; position:relative;}
.header .text .sub {position:absolute; font-weight:500; letter-spacing: calc(1em * 0.001 * 60); text-transform: uppercase; bottom:40px; width:100%; display: flex;justify-content: space-between;  }
.header .text .sub p {margin:0}
.header .text .sub p + p {padding-left:20px;}

.header .main:before {content:''; width:750px; height:750px; background:url(../Images/feder1.webp) center center no-repeat; background-size:contain; position: absolute;    top: 50px;right: -400px; }

.top {z-index: 3;  }
.top .main {padding:30px 0; z-index: 3;  display: flex;      align-items: center;  justify-content: space-between; }
.top .main:after {display: none}
.top .main > a {display: inline-block; vertical-align: top}

.top ul {margin:0; display: inline-block; padding:0 20px; background: var(--color-4);border-radius: 30px; text-align: right; list-style-type: none;}
.top ul li {display: inline-block}
.top ul li a {display: inline-block; color:var(--color-2); padding:15px 20px; }




.btn {font-size:120%; font-weight:700; display: inline-block; background:var(--color-1); color:var(--color-2); padding:15px 40px;}
.btn:hover {transform:scale(1.05);}

.content .main {padding:150px 0; z-index: 1;}


.content.f-20 .main {padding-left:40px; padding-right:40px;}


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



.l-10 {background:var(--color-2); color:#fff;}


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

.l-20 {background:url(../Images/linien1.svg) center center no-repeat; background-size:auto 80%;}

.tabs .item .wrap {padding-top:100px;}
.tabs .stage .item {max-height:0px; overflow: hidden; visibility: hidden;}
.tabs .stage .item.act {max-height:4000px; visibility: visible; overflow: visible;}

.tabnav {margin:0; padding:0; list-style-type: none; justify-content: center;display: flex; align-items: flex-end;flex-wrap:wrap;}
.tabnav li svg {display: block; max-width: 100px; max-height:50px; margin:0 auto 10px auto;}
.tabnav li {margin:0 15px; text-align: center}
.tabnav li span {display: inline-block}
.tabnav li.act {color:var(--color-1);}
.tabnav li.act svg *[fill] {fill:var(--color-1);}


.teaser1 {background:var(--color-2);color:#fff; position: relative; height:100%; padding:120px 30px 30px 30px; border-top-right-radius: 120px;}
.teaser1:after,
.teaser1:before {content:''; width:130px; height:130px; border-radius:50%; background:var(--color-3-50);  position: absolute; right:0; top:-40px;}
.teaser1:after {width:110px; height:110px; background:var(--color-3);right:10px; top:-30px;}
.teaser1 h3 {color:var(--color-3);}
.teaser1 h4 {color:var(--color-3);}

.teaser1 .sizes {display: flex;font-size:20px;justify-content: space-between;}
.teaser1 .sizes div.info {text-align: center; cursor:pointer;}
.teaser1 .sizes div.info svg {display: inline-block; margin-top:10px;}
.teaser1 .sizes strong {font-size:25px;}
.teaser1 .sizes div.info:hover,
.teaser1 .sizes div.info.act {color:var(--color-3);}
.teaser1 .sizes div.info svg path{fill:var(--color-4);}
.teaser1 .sizes div.info:hover svg path,
.teaser1 .sizes div.info.act svg path {fill:var(--color-3);}
.teaser1 .sizes div.info.act svg {transform:rotate(90deg)}

.teaser1 .images {position: absolute; background:var(--color-2); bottom:0; left:0; right:0; transform:translate(0,100%);}
.teaser1 .images img {display: inline-block;}
.teaser1 .images.count2 img {width:calc(50% - 10px);}
.teaser1 .images.count2 img + img {margin-left:20px;}

.imagerow {padding:80px 0}
.imagerow .slick-slide {margin:0 5px;}
.imagerow .slick-dots {bottom:-50px}

.imagerow .stage {display: flex; margin:0 -5px; flex-wrap: wrap}
.imagerow .stage img {width: calc(20% - 10px); margin:5px;}

.dist {position: relative; /*margin-top:-50px; */ width: 100%; overflow: hidden}

.dist .dist-left,
.dist .dist-right {display: none}


.dist img {display: block; width:100%;}
.dist .overlay { position: absolute; top:0; /*top:50px; height: calc(100% - 150px); background:url(../Images/stoerer.svg) center center no-repeat; background-size:auto 100% ;*/ }
.dist .overlay .main {padding:150px 0}
/*.dist + .content {margin-top:-100px;}*/
.dist + .content .main {background:var(--color-2);}

.dist .overlay,
.dist .main {height:100%;}



footer { position: relative; z-index: 4}
footer ul {padding:0; list-style-type: none;}

footer .frame-type-menu_pages li {display: inline-block;}
    footer .frame-type-menu_pages li + li {margin-left:20px;}


    footer .line .main {display:flex; font-size:18px;  padding:40px 0;  align-items: center;
        justify-content: space-between;}
footer .line .main:after {display: none}
footer .line ul {margin:0;}
footer .line ul li {display: inline-block;}
footer .line ul li + li {margin-left:25px;}
footer .pageTitle {color:var(--color-3); font-weight:700; text-transform: uppercase}

.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: 1600px) {
    aside {left:unset; right:40px}
}

@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:30px;}
    .cStage.l-99 {flex-direction: column-reverse}


    .top ul {display: none; visibility: hidden; }

    .header h1 {font-size:50px;}

    .header .stage .slick-slide, .header .stage > div {
        height:700px;
    }

    aside {top:250px; right:20px;}

    .all.header .all.overlay,
    .all {padding-left:20px; padding-right:20px;}
    .all .all {padding-left:0; padding-right:0}

    .header .overlay .main {
        padding: 250px 50px 0 20px;
        height: 100%;
    }

    .content .main,
    .content.f-20 .main {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tabs .item .wrap {
        padding-top: 50px;
    }
    .tabnav li {margin-bottom:15px;}

    .news-list-view {
        padding: 0;
    }
    .news-list-view .cStage > div + div {
        border-left: 0;
    }
    .news-list-view .cStage > div + div,
    .news-list-view .cStage > div:nth-child(4), .news-list-view .cStage > div:nth-child(5), .news-list-view .cStage > div:nth-child(6) {
        border-top: 1px solid var(--color-1);
        padding-top: 30px;
    }

    .c33 .news-list-view .cStage > div {border-left:0}

    body:after {display: none}

    .frame-layout-30 {padding:0}

}

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

    .imagerow .stage img {
        width: calc(50% - 10px);
        margin: 5px;
    }

    .header h1 {
        font-size: 40px;
    }
    h1,h2 {font-size:30px;}
}




/* Formulare */


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

input[type="checkbox"] { margin-right:15px; }
.control-label { display:none; }
.form-group input[type="text"],
.form-group 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-1);
  padding:8px 15px;

  margin-bottom:6px;
}
.form-group input[type="text"]:focus,
.form-group textarea:focus {
  background:#222e59;
}


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



/* 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:2px 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);
}