/* -------------------------------------- */
/* OPENSANS */

@font-face {
    font-family: 'opensans'; /* Light */
    src: url('../fonts/opensans/OpenSans-Light.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Light.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Light Italic*/
    src: url('../fonts/opensans/OpenSans-LightItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-LightItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Normal */
    src: url('../fonts/opensans/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Regular.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Regular.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Regular Italic */
    src: url('../fonts/opensans/OpenSans-Italic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Italic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Italic.ttf') format('truetype');
    font-weight: 400; /* entspricht font-weight: normal */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold */
    src: url('../fonts/opensans/OpenSans-Semibold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Semibold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Semibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Semi Bold Italic */
    src: url('../fonts/opensans/OpenSans-SemiboldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-SemiboldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-SemiboldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Bold */
    src: url('../fonts/opensans/OpenSans-Bold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-Bold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-Bold.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Bold Italic */
    src: url('../fonts/opensans/OpenSans-BoldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-BoldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;  /* entspricht font-weight: bold */
    font-style: italic;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold */
    src: url('../fonts/opensans/OpenSans-ExtraBold.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-ExtraBold.woff') format('woff'),
         url('../fonts/opensans/OpenSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'opensans'; /* Extra Bold Italic */
    src: url('../fonts/opensans/OpenSans-ExtraBoldItalic.woff2') format('woff2'),
         url('../fonts/opensans/OpenSans-ExtraBoldItalic.woff') format('woff'),
         url('../fonts/opensans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}


/* VARIABLEN */
:root {  --content-width00: 600px;}
:root {  --content-width01: 1260px;}
:root {  --content-width02: 2080px;}

:root {  --colordark: #666666;}
:root {  --colorlight: #FFFFFF;}

:root {  --colorgray01: #F8F8F8;}
:root {  --colorgray02: #dddddd;}
:root {  --colorgray10: #2e3033;}
:root {  --colorgray11: #151515;}

:root {  --color01: #7CBA3D;} 
:root {  --color02: #43a140;} 
:root {  --color03: #008238;} 
:root {  --color04: #076907;} 

:root {  --color10: #7089d9;} 
:root {  --color11: #f9ac8a;} 

:root {  --space-below01: 15px;} 
:root {  --space-below02: 30px;} 
:root {  --space-below03: 60px;} 
:root {  --side-space01: 15px;} 
:root {  --side-space02: 30px;} 
:root {  --gap01: 30px;} 
:root {  --hover-opacity: 0.5;} 
:root {  --animation01: all 0.4s ease-in-out 0s;} 

:root {  --chartsize00: 90px;}
:root {  --chartsize01: 180px;}
:root {  --chartsize02: 360px;}

:root {  --fontsize-s: 12px;}
:root {  --fontsize-m: 16px;} /* Font Size Default */
:root {  --fontsize-l: 25px;} 
:root {  --fontsize-xl: 40px;} 
:root {  --fontsize-xxl: 60px;} 


* {margin: 0;padding: 0;box-sizing: border-box;}
header, footer, section, article, nav {display: block;}

body {background: var(--colorlight);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;line-height: 1.4;font-size: var(--fontsize-m); }

h1 {font-size: var(--fontsize-xl);font-weight: 600;}
h2 {font-size: var(--fontsize-l);font-weight: 600;}
h3 {font-size: var(--fontsize-l);font-weight: 600;}
h1, h2, h3  { line-height: 1.2; color: var(--colordark); }

h1, h2, h3, p, ul, ol {margin-bottom: var(--space-below01);}

a, a:focus {color: var(--color01);text-decoration: underline;}
a:focus {outline:2px solid var(--color02);}
a:hover {text-decoration: none;outline: 0;}
p {margin-bottom: var(--space-below01);}
ul {list-style: none;}
img {border: none;}
strong {font-weight: 700;}
small{font-size: var(--fontsize-s);}
.invisible {display: none;}

:is(a, span).icon {display: flex; text-decoration: none;margin-bottom: var(--space-below01); color: var(--colordark); line-height: 35px;}
:is(a, span).icon.center {justify-content: center;}
:is(a, span).icon.right {justify-content: flex-end;}
:is(a, span).icon.left {justify-content: flex-start;}
:is(a, span).icon[href="#"] {pointer-events: none;text-decoration: none;}
a.icon:hover {opacity: var(--hover-opacity);}
:is(a, span).icon i {min-width: 36px; font-size: 24px;line-height: 1.5;}

#wrapper .inside,
#main > .content > *,
#main > .content .swiper-slide .caption > *,
#main > .content > *:is(.bgColor01, .bgColor02) > * {max-width: var(--content-width01); width: 100%; margin-left: auto!important; margin-right: auto!important; padding-left: var(--side-space01); padding-right: var(--side-space01);}
#main > .content > .centerblock {max-width: var(--content-width00);}
/* #main > .content > .alignwide {max-width: xxx;} */
#main > .content > .alignfull {max-width: var(--content-width02);padding-left: 0;padding-right: 0;} 

/* Standard-Margin von Block-Elementen nach unten und Außnahmen davon */
#main > .content > *:not(.columns),
#main .columns > * {margin-bottom: var(--space-below02);}

#header { background: var(--colorlight);height: 270px;}
#header .skip-link {display: block;position: absolute;top: 5px;left: var(--side-space01);background: var(--color01);color: var(--colorlight);padding: 5px 10px;border-radius: 5px;text-decoration: none; max-height: 40px;transform: translateY(-50px);transition: var(--animation01);}
#header .skip-link:focus {transform: translateY(0);}

#header .extra {height: 35px;background: var(--colorgray01);padding: 5px 0;}
#header .extra :is(a, span).icon {margin: 0;color: var(--colordark);display: block;font-size: 15px;line-height: 18px;display: inline-block;text-decoration: none;color: var(--colordark);padding-right: 20px;}
#header .extra :is(a, span).icon i {font-size: 13px; min-width: auto; margin-right: 6px;}

:is(#header, #footer) .title {padding-top: var(--space-below02);}
:is(#header, #footer) .title a {display: block;width: 260px;margin-bottom: 5px;}
:is(#header, #footer) .title a img {display: block;height: auto;width: 100%;border: none;}
:is(#header, #footer) .title .description {font-size: 16px;font-weight: 700;color: var(--color01);}

#header .menu-block {position: absolute;width: 100%;top: 225px;z-index: 100;left: 0;background: var(--colorlight);box-shadow: 0 5px 4px -4px var(--colorgray02);border-top: 1px solid var(--colorgray02);}
#header .menu {display: flex; gap: 1px;font-size: 0;line-height: 0;margin: 0; transition:var(--animation01);}
#header .menu li,
#header .menu a {display: inline-block; font-size: 14px;line-height: 45px;white-space: nowrap;}
#header .menu a {background: var(--color01);width: 100%;display: block;color: var(--colorlight); padding: 0 15px;text-decoration: none;transition: var(--animation01);}
#header .menu :is(a.active, a:hover, a:focus) {background: var(--color03);}

#header.scrolled .menu-block {position: fixed;top: 0;}
#header #toggle-nav {display: none;}

#main {padding-bottom: var(--space-below03);background: var(--colorgray01);}
#main .content > *:first-child:not(.swiper) {padding-top: var(--space-below02);}

#main ul { list-style: disc;}
#main ul > li { margin-left: 20px;}
#main p > a {font-weight: 600;}

#main ul:is(.list01, .list02) {list-style: none;}
#main ul:is(.list01, .list02) li {padding-left: 24px;margin-left: 0;position: relative;margin-bottom: var(--space-below01);}
#main ul:is(.list01, .list02) li::before {content: '';height: 18px;width: 18px;background: var(--color01);display: block;border-radius: 3px;position: absolute;left: 0;top: 3px;}

#main ul.list01 li::before {background: var(--color11);}
#main ul.list01 li:first-child:before {background: var(--color10);}
#main ul.list01 li:last-child:before {background: var(--color01);}

#main .columns {display: grid;grid-template-rows: auto;gap: var(--gap01);box-sizing: border-box;}
#main .columns.v-center {align-items: center;}
#main .cols-50-50 {grid-template-columns: repeat(2, 1fr);}
#main .cols-66-33 {grid-template-columns: 2fr 1fr;}
#main .cols-33-66 {grid-template-columns: 1fr 2fr ;}
#main .cols-33-33-33 {grid-template-columns: repeat(3, 1fr);}

#main .seperator {height: var(--space-below03);overflow: hidden;}
#main .seperator::before {content: '';width: 100%;display: block;height: 30px;box-shadow: 0px 8px 7px var(--colordark);border-radius: 50%;margin-top: -30px;opacity: 0.6;}

#main .block-image {margin-bottom: 0;}
#main .block-image img {height: auto;max-width: 100%;}

#main .aligncenter {text-align: center;}
#main .alignleft {text-align: left;}
#main .alignright {text-align: right;}

#main .block-image.alignleft,
#main .block-image.alignright {margin-bottom: 0;}

#main .swiper {height: 670px;}
#main .swiper .swiper-slide :is(.block-image, img) {width: 100%;height: 100%;}
#main .swiper .swiper-slide .block-image img {display: block;object-fit: cover;object-position: 50% top;}
#main .swiper .swiper-slide .caption {opacity: 0;width: 100%;position: absolute;top: 90px;left: 0;z-index: 1;transition: var(--animation01);}
#main .swiper .swiper-slide.active .caption {opacity: 1;}
#main .swiper .swiper-slide .caption > * {color: var(--colorlight);font-size: var(--fontsize-l);line-height: 1.4;text-shadow: 0px 1px 0px rgba(0,0,0,0.5);}
#main .swiper .swiper-slide .caption strong {display: block;font-size: var(--fontsize-xxl);line-height: 1.2;font-weight: 400;margin-top: var(--space-below01);}

#main .swiper .pagination-wrapper {width: 100%; top: 420px;left: 0; position: absolute;z-index: 10;}

#main .swiper .swiper-pagination {display: flex;align-items: flex-end;}
#main .swiper .swiper-pagination span {display: block;color: var(--colorlight);width: 100%;position: relative;}
#main .swiper .swiper-pagination span::before {content: '';background: var(--colorlight);position: absolute;top: 0px;width: 100%;height: 1px;transition: var(--animation01);}
#main .swiper .swiper-pagination span.swiper-pagination-bullet-active::before {height: 4px; top: -3px;}

#main .slider-infoboxes {margin-top: -240px;margin-bottom: var(--space-below03);position: relative;z-index: 50;}
#main .slider-infoboxes .inside {gap: 0;padding: 0;}
#main .slider-infoboxes .block {min-height: 200px; background: var(--color01);padding: var(--space-below02) var(--side-space02);color: var(--colorlight);}
#main .slider-infoboxes .block:first-child {background: var(--color03);}
#main .slider-infoboxes h2 {color: var(--colorlight);}

#main #piechart .inner {display: inline-block;position: relative;width: var(--chartsize02);height: var(--chartsize02);}
#main #piechart .piece {position: absolute;width: 100%;height: 100%;clip: rect(0px, var(--chartsize02), var(--chartsize02), var(--chartsize01));border-radius: var(--chartsize01);}
#main #piechart .piece > * {position: absolute;width: 100%;height: 100%;clip: rect(0px, var(--chartsize01), var(--chartsize02), 0px);border-radius: var(--chartsize01);-webkit-backface-visibility: hidden;transform: rotate(120deg);}

#main #piechart  #piece1 {transform: rotate(240deg);z-index: 1;}
#main #piechart  #piece1 > * {background: var(--color01);}
#main #piechart #piece2 {transform: rotate(120deg);z-index: 2;}
#main #piechart  #piece2 > * {background: var(--color11);}
#main #piechart #piece3 {transform: rotate(0deg);z-index: 3;}
#main #piechart #piece3 > * {background: var(--color10);}
#main #piechart #piece4 {transform: scale(0.5);z-index: 4;background: #fff;width: var(--chartsize02); height: var(--chartsize02); clip: unset;}

#footer {color: var(--colorlight);background: var(--colorgray10);}

#footer .line-one .inside {display: grid;grid-template-columns: repeat(4, 1fr);}
#footer .line-one .inside > * {background: var(--color01);padding: var(--space-below02) var(--side-space02);}
#footer .line-one .inside > *:nth-child(2) {background: var(--color02);}
#footer .line-one .inside > *:nth-child(3) {background: var(--color03);}
#footer .line-one .inside > *:nth-child(4) {background: var(--color04);}
#footer .line-one p {font-size: var(--fontsize-l);}
#footer .line-one span {font-size: var(--fontsize-m);display: block;}

#footer :is(.line-two, .line-three) .inside {display: flex;justify-content: space-between;}
#footer .line-two {padding: var(--space-below03) 0;}
#footer .line-two * {color: var(--colorgray02);}
#footer .line-two strong {color: var(--colorlight);margin-bottom: var(--space-below02);display: block;position: relative;}
#footer .line-two strong::after {content: '';background: var(--color01);position: absolute;bottom: -9px;left: 0;height: 2px;width: 50px;}
#footer .line-two .description {color: var(--color02);font-weight: 600;}

#footer .line-three {background: var(--colorgray11);padding: var(--space-below01) 0;}
#footer .line-three * {color: var(--colorgray02);}
#footer .line-three ul {list-style: none;display: flex;gap: 10px;}

@media screen and (max-width: 1210px) {

    #main .swiper {height: 500px;}
    #main .swiper .pagination-wrapper {top: 350px;}
    #main .slider-infoboxes {margin-top: -150px;}

    #main .swiper .swiper-slide .caption > * {font-size: var(--fontsize-m);}
    #main .swiper .swiper-slide .caption strong {font-size: var(--fontsize-l);}

    #footer .line-one .inside {grid-template-columns: repeat(2, 1fr);}

}

@media screen and (max-width: 781px) {

    #header {height: auto;}
    #header .extra {height: auto;}
    #header .title {padding-bottom: var(--space-below01);}
    :is(#header, #footer) .title a {width: 180px;}
    #header .title a {margin: 0 auto 2px auto;}
    :is(#header, #footer) .description {font-size: 14px; }
    #header .description {text-align: center; }

    #header .menu-block {border: none;}
    #header .menu-block,
    #header.scrolled .menu-block {position: relative;top:0;}

    #header .menu,
    #header .menu li {display: block;}
    #header .menu li a {height: 0; padding: 0 var(--side-space01);display: block;overflow: hidden;}
    
    #header.menu-active .menu {padding-bottom: var(--side-space01);}
    #header.menu-active .menu li a {height: 45px!important;} 

    #header #toggle-nav {cursor: pointer;display: block;width: 38px;border: none;background: none;margin: 0 auto var(--space-below01) auto;}
    #header #toggle-nav span {background: var(--color01);display: block;height: 6px;margin: 6px 0;width: auto;transition: var(--animation01)}

    #header.menu-active #toggle-nav span {opacity: 0;transform-origin: 2px center;}
    #header.menu-active #toggle-nav span:first-child {opacity: 1;transform: rotate(45deg);}
    #header.menu-active #toggle-nav span:last-child {opacity: 1;transform: rotate(-45deg);}

    #main .swiper {height: 320px;}
    #main .swiper .pagination-wrapper {top: 270px;}
    #main .swiper .swiper-slide .caption {top: 15px;}
    #main .slider-infoboxes {margin-top: -50px;}

    #main .slider-infoboxes .inside {display: block;}
    #main .slider-infoboxes .block {margin: 0 auto;min-height: 0;max-width: 400px;}

    #main #piechart {max-width: 220px;max-height: 220px;}
    #main #piechart .inner {transform: scale(0.6);transform-origin: left top;}

    #footer .inside {display: block!important;}

}

@media screen and (max-width: 540px) { 

    #main .columns {display: block;}

}