/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.slick-list:focus {
    outline: none;
}

.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.slick-track:before, .slick-track:after {
    display: table;
    content: '';
}

.slick-track:after {
    clear: both;
}

.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}

[dir='rtl'] .slick-slide {
    float: right;
}

.slick-slide img {
    display: block;
}

.slick-slide.slick-loading img {
    display: none;
}

.slick-slide.dragging img {
    pointer-events: none;
}

.slick-initialized .slick-slide {
    display: block;
}

.slick-loading .slick-slide {
    visibility: hidden;
}

.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
    display: none;
}

.slick-loading .slick-list {
    background: #fff url(assets/img/ajax-loader.gif) center center no-repeat;
}

@font-face {
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;
    src: url(assets/fonts/slick.eot);
    src: url(assets/fonts/slick.eot?#iefix) format('embedded-opentype'), url(assets/fonts/slick.woff) format('woff'), url(assets/fonts/slick.ttf) format('truetype'), url(assets/img/slick.svg#slick) format('svg');
}

.slick-prev, .slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}

.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus {
    color: transparent;
    outline: none;
    background: transparent;
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before {
    opacity: 1;
}

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before {
    opacity: .25;
}

.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
    left: -25px;
}

[dir='rtl'] .slick-prev {
    right: -25px;
    left: auto;
}

.slick-prev:before {
    content: '←';
}

[dir='rtl'] .slick-prev:before {
    content: '→';
}

.slick-next {
    right: -25px;
}

[dir='rtl'] .slick-next {
    right: auto;
    left: -25px;
}

.slick-next:before {
    content: '→';
}

[dir='rtl'] .slick-next:before {
    content: '←';
}

.slick-dotted.slick-slider {
    margin-bottom: 30px;
}

.slick-dots {
    position: absolute;
    bottom: -25px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
}

.slick-dots li {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer;
}

.slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 20px;
    height: 20px;
    padding: 5px;
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}

.slick-dots li button:hover, .slick-dots li button:focus {
    outline: none;
}

.slick-dots li button:hover:before, .slick-dots li button:focus:before {
    opacity: 1;
}

.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
    opacity: .75;
    color: black;
}

.accent-text {
    color:#53654f
}

.display-none {
    display:none !important
}

@font-face {
    font-family: "custom-serif";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src:url(assets/fonts/custom-serif.ttf)
}

@font-face {
    font-family: "roboto-thin";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src:url(assets/fonts/Roboto-Thin.ttf)
}

@font-face {
    font-family: "roboto-regular";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src:url(assets/fonts/Roboto-Regular.ttf)
}

@font-face {
    font-family: "roboto-medium";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src:url(assets/fonts/Roboto-Medium.ttf)
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

*, ::before, ::after {
    box-sizing:border-box
}

html {
    line-height: 1.5;
    -webkit-text-size-adjust:100%
}

body {
    margin:0
}

main {
    display:block
}

h1 {
    font-size: 2em;
    margin:0.67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow:visible;
    color: transparent;
    border: 0px;
}

pre {
    font-family: monospace, monospace;
    font-size:1em
}

a {
    background-color:transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration:underline dotted
}

b, strong {
    font-weight:bolder
}

code, kbd, samp {
    font-family: monospace, monospace;
    font-size:1em
}

small {
    font-size:80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align:baseline
}

sub {
    bottom:-0.25em
}

sup {
    top:-0.5em
}

img {
    border-style:none
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin:0
}

button, input {
    overflow:visible
}

button, select {
    text-transform: none
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {
    outline:1px dotted ButtonText
}

fieldset {
    padding:0.35em 0.75em 0.625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space:normal
}

progress {
    vertical-align:baseline
}

textarea {
    overflow: auto
}

[type="checkbox"], [type="radio"] {
    box-sizing: border-box;
    padding: 0
}

[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {
    height: auto
}

[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type="search"]::-webkit-search-decoration {
    -webkit-appearance:none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font:inherit
}

details {
    display:block
}

summary {
    display:list-item
}

template {
    display:none
}

[hidden] {
    display:none
}

@-webkit-keyframes rotate {
    0% {
        transform:rotate(0deg)
    }

    100% {
        transform:rotate(20deg)
    }
}

@keyframes rotate {
    0% {
        transform:rotate(0deg)
    }

    100% {
        transform:rotate(20deg)
    }
}

@-webkit-keyframes rotate-negative-to-positive {
    0% {
        transform:rotate(-20deg)
    }

    100% {
        transform:rotate(0deg)
    }
}

@keyframes rotate-negative-to-positive {
    0% {
        transform:rotate(-20deg)
    }

    100% {
        transform:rotate(0deg)
    }
}

.section.markenidee .section-titlebar, .section.produkte .section-titlebar, .section.mission .section-titlebar, .section.vision .section-titlebar, .section.hintergrund .section-titlebar, .section.wertschopfung .section-titlebar, .section.kontakt .section-titlebar {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.markenidee.in-view .section-titlebar, .section.produkte.in-view .section-titlebar, .section.mission.in-view .section-titlebar, .section.vision.in-view .section-titlebar, .section.hintergrund.in-view .section-titlebar, .section.wertschopfung.in-view .section-titlebar, .section.kontakt.in-view .section-titlebar {
    opacity:1
}

.section.was-wir-tun .circle-picture, .section.was-wir-tun .circle-text, .section.was-wir-tun .top-left-item-wrap .check-item, .section.was-wir-tun .top-left-item-wrap .close-item, .section.was-wir-tun .bottom-left-item-wrap .card, .section.was-wir-tun .right-background {
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.was-wir-tun .circle-picture, .section.was-wir-tun .circle-text, .section.was-wir-tun .top-left-item-wrap .check-item, .section.was-wir-tun .top-left-item-wrap .close-item, .section.was-wir-tun .bottom-left-item-wrap .card, .section.was-wir-tun .right-background {
    opacity:0
}

.section.was-wir-tun .circle-picture, .section.was-wir-tun .circle-text {
    transition-duration:2000ms
}

.section.was-wir-tun .top-left-item-wrap .check-item {
    transform: translateX(-50%);
    transition-delay:200ms
}

.section.was-wir-tun .top-left-item-wrap .close-item {
    transform: translateX(-50%);
    transition-delay:400ms
}

.section.was-wir-tun .card {
    transform:translateX(-50%)
}

.section.was-wir-tun .card:nth-of-type(1) {
    transition-delay:1250ms
}

.section.was-wir-tun .card:nth-of-type(2) {
    transition-delay:1000ms
}

.section.was-wir-tun .card:nth-of-type(3) {
    transition-delay:750ms
}

@media screen and (max-width: 768px) {
    .section.was-wir-tun .card:nth-of-type(3) {
        transition-delay:1250ms
    }

    .section.was-wir-tun .card:nth-of-type(2) {
        transition-delay:1000ms
    }

    .section.was-wir-tun .card:nth-of-type(1) {
        transition-delay:750ms
    }
}

.section.was-wir-tun .right-background {
    transition-delay:200ms
}

.section.was-wir-tun.in-view .circle-picture, .section.was-wir-tun.in-view .circle-text, .section.was-wir-tun.in-view .top-left-item-wrap .check-item, .section.was-wir-tun.in-view .top-left-item-wrap .close-item, .section.was-wir-tun.in-view .bottom-left-item-wrap .card, .section.was-wir-tun.in-view .right-background {
    opacity:1
}

.section.was-wir-tun.in-view .top-left-item-wrap .check-item, .section.was-wir-tun.in-view .top-left-item-wrap .close-item {
    transform:translateX(0)
}

.section.was-wir-tun.in-view .card:nth-of-type(1), .section.was-wir-tun.in-view .card:nth-of-type(2), .section.was-wir-tun.in-view .card:nth-of-type(3) {
    transform:translateX(0)
}

.section.was-wir-tun.in-view .circle-picture {
    -webkit-animation: rotate-negative-to-positive 2s forwards linear;
    animation:rotate-negative-to-positive 2s forwards linear
}

.section.markenidee .section-part {
    opacity:0
}

.section.markenidee .section-part.left, .section.markenidee .section-part.right {
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    transition-duration:750ms
}

.section.markenidee .section-part.left {
    transition-delay:400ms
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-part.left {
        transition-delay:200ms
    }
}

.section.markenidee .section-part.right {
    transition-delay:200ms
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-part.right {
        transition-delay:400ms
    }
}

.section.markenidee.in-view .section-part {
    opacity:1
}

.section.produkte .plastic {
    opacity: 0;
    transform: translateY(-100%);
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.produkte .section-card {
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

@media screen and (min-width: 768px) {
    .section.produkte .section-card {
        transform: translateX(-100%);
        opacity:0
    }

    .section.produkte .section-card:nth-of-type(1) {
        transition-delay:600ms
    }

    .section.produkte .section-card:nth-of-type(2) {
        transition-delay:400ms
    }

    .section.produkte .section-card:nth-of-type(3) {
        transition-delay:200ms
    }
}

.section.produkte.in-view .plastic, .section.produkte.in-view .section-card {
    opacity: 1;
    transform:translateX(0) translateY(0)
}

.section.mission .section-row .left, .section.mission .section-row .right {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.mission .section-row:not(.second) .left {
    transition-delay:400ms
}

.section.mission .section-row.second .left {
    transition-delay:1100ms
}

.section.mission .section-row.second .right {
    transition-delay:600ms
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row.second .left {
        transition-delay:400ms
    }

    .section.mission .section-row.second .right {
        transition-delay:600ms
    }
}

.section.mission.in-view .section-row .left, .section.mission.in-view .section-row .right {
    opacity:1
}

.section.vision .left, .section.vision .right {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.vision .left {
    transition-delay:600ms
}

.section.vision .right {
    transition-delay:400ms
}

.section.vision.in-view .left, .section.vision.in-view .right {
    opacity:1
}

.section.hintergrund .circle, .section.hintergrund .logo, .section.hintergrund .derux, .section.hintergrund .bottom, .section.hintergrund .left, .section.hintergrund .right, .section.hintergrund .circles-separator {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.hintergrund .circle {
    transition-duration:2000ms
}

.section.hintergrund .logo, .section.hintergrund .circles-separator {
    transition-delay:250ms
}

.section.hintergrund .derux {
    transition-delay:500ms
}

.section.hintergrund .bottom {
    transition-delay:750ms
}

.section.hintergrund .left {
    transition-delay:1000ms
}

.section.hintergrund .right {
    transition-delay:1250ms
}

.section.hintergrund.in-view .circle, .section.hintergrund.in-view .logo, .section.hintergrund.in-view .derux, .section.hintergrund.in-view .bottom, .section.hintergrund.in-view .left, .section.hintergrund.in-view .right {
    opacity:1
}

.section.hintergrund.in-view .circle-picture {
    -webkit-animation: rotate-negative-to-positive 2000ms forwards linear;
    animation:rotate-negative-to-positive 2000ms forwards linear
}

.section.wertschopfung .left, .section.wertschopfung .right {
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 750ms;
    transition-timing-function:ease-in-out
}

.section.wertschopfung .left {
    transition-delay:400ms
}

.section.wertschopfung .right {
    transition-delay:200ms
}

.section.wertschopfung.in-view .left, .section.wertschopfung.in-view .right {
    opacity:1
}

.section.wir .ceo {
    opacity: 0;
    transition-property: opacity;
    transition-duration: 1000ms;
    transition-timing-function:ease-in-out
}

.section.wir .ceo.gerd {
    transition-delay:400ms
}

@media screen and (max-width: 768px) {
    .section.wir .ceo.gerd {
        transition-delay:200ms
    }
}

.section.wir .ceo.samarin {
    transition-delay:200ms
}

@media screen and (max-width: 768px) {
    .section.wir .ceo.samarin {
        transition-delay:400ms
    }
}

.section.wir.in-view .ceo {
    opacity:1
}

.section.kontakt .circle-with-leaves, .section.kontakt .circle-picture, .section.kontakt .circle-text {
    transition-property: opacity;
    transition-timing-function: ease-in-out;
    transition-duration: 2s;
    opacity:0
}

.section.kontakt.in-view .circle-with-leaves, .section.kontakt.in-view .circle-text {
    opacity:1
}

.section.kontakt.in-view .circle-picture {
    opacity: 1;
    -webkit-animation: rotate-negative-to-positive 2s forwards linear;
    animation:rotate-negative-to-positive 2s forwards linear
}

.icon {
    background-image: url(assets/img/android-chrome-192x192.png);
    background-image: url(assets/img/android-chrome-512x512.png);
    background-image: url(assets/img/favicon-16x16.png);
    background-image: url(assets/img/favicon-32x32.png);
    background-image:url(assets/img/apple-touch-icon.png)
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
    text-rendering:optimizeLegibility
}

body {
    font-family: "roboto-regular";
    font-size: 1.4rem;
    background: #fff;
    color: #534f4b;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering:optimizeLegibility
}

body.chrome {
    image-rendering:-webkit-optimize-contrast
}

a {
    color: #2196F3;
    text-decoration:none
}

* ::-webkit-scrollbar {
    height: 15px;
    width:15px
}

* ::-webkit-scrollbar-track {
    background-color:white
}

* ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25), inset -2px -2px 2px rgba(0, 0, 0, 0.25);
    height: 15px;
    width:15px
}

.section-titlebar {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color:#fff
}

.section-titlebar.align-left {
    align-items:flex-start
}

.section-titlebar.accent {
    color:#53654f
}

.section-titlebar.accent .section-title::after {
    background-color:#53654f
}

.section-titlebar.accent-light {
    color:#76b728
}

.section-titlebar.accent-light .section-title::after {
    background-color:transparent
}

.section-before-title {
    text-align: center;
    margin: 0 0 1rem 0;
    font-family: "roboto-regular"
}

@media screen and (min-width: 1px) {
    .section-before-title {
        font-size: 1.6rem;
        max-width:80%
    }
}

@media screen and (min-width: 600px) {
    .section-before-title {
        font-size:1.8rem
    }
}

@media screen and (min-width: 768px) {
    .section-before-title {
        font-size:2rem
    }
}

.section-title {
    font-family: "custom-serif";
    margin: 0 0 0 0;
    position: relative;
    text-align: center;
    line-height:1.2
}

@media screen and (min-width: 1px) {
    .section-title {
        font-size:4rem
    }
}

@media screen and (min-width: 768px) {
    .section-title {
        font-size:5rem
    }
}

.section-title::after {
    background-color: #fff;
    content: '';
    height: .7rem;
    width: 10rem;
    position: absolute;
    left: calc(50% - 5rem);
    bottom:-3rem
}

.section-title.underline-left::after {
    left:0
}

h3, p, h1 {
    font-weight:normal
}

.icon {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-position:center
}

.icon.icon-down {
    background-image:url(assets/img/arrow-down.svg)
}

.icon.rotate45 {
    transform:rotate(-90deg)
}

.rect-auto, .c100.p51 .slice, .c100.p52 .slice, .c100.p53 .slice, .c100.p54 .slice, .c100.p55 .slice, .c100.p56 .slice, .c100.p57 .slice, .c100.p58 .slice, .c100.p59 .slice, .c100.p60 .slice, .c100.p61 .slice, .c100.p62 .slice, .c100.p63 .slice, .c100.p64 .slice, .c100.p65 .slice, .c100.p66 .slice, .c100.p67 .slice, .c100.p68 .slice, .c100.p69 .slice, .c100.p70 .slice, .c100.p71 .slice, .c100.p72 .slice, .c100.p73 .slice, .c100.p74 .slice, .c100.p75 .slice, .c100.p76 .slice, .c100.p77 .slice, .c100.p78 .slice, .c100.p79 .slice, .c100.p80 .slice, .c100.p81 .slice, .c100.p82 .slice, .c100.p83 .slice, .c100.p84 .slice, .c100.p85 .slice, .c100.p86 .slice, .c100.p87 .slice, .c100.p88 .slice, .c100.p89 .slice, .c100.p90 .slice, .c100.p91 .slice, .c100.p92 .slice, .c100.p93 .slice, .c100.p94 .slice, .c100.p95 .slice, .c100.p96 .slice, .c100.p97 .slice, .c100.p98 .slice, .c100.p99 .slice, .c100.p100 .slice {
    clip:rect(auto, auto, auto, auto)
}

.pie, .c100 .bar, .c100.p51 .fill, .c100.p52 .fill, .c100.p53 .fill, .c100.p54 .fill, .c100.p55 .fill, .c100.p56 .fill, .c100.p57 .fill, .c100.p58 .fill, .c100.p59 .fill, .c100.p60 .fill, .c100.p61 .fill, .c100.p62 .fill, .c100.p63 .fill, .c100.p64 .fill, .c100.p65 .fill, .c100.p66 .fill, .c100.p67 .fill, .c100.p68 .fill, .c100.p69 .fill, .c100.p70 .fill, .c100.p71 .fill, .c100.p72 .fill, .c100.p73 .fill, .c100.p74 .fill, .c100.p75 .fill, .c100.p76 .fill, .c100.p77 .fill, .c100.p78 .fill, .c100.p79 .fill, .c100.p80 .fill, .c100.p81 .fill, .c100.p82 .fill, .c100.p83 .fill, .c100.p84 .fill, .c100.p85 .fill, .c100.p86 .fill, .c100.p87 .fill, .c100.p88 .fill, .c100.p89 .fill, .c100.p90 .fill, .c100.p91 .fill, .c100.p92 .fill, .c100.p93 .fill, .c100.p94 .fill, .c100.p95 .fill, .c100.p96 .fill, .c100.p97 .fill, .c100.p98 .fill, .c100.p99 .fill, .c100.p100 .fill {
    position: absolute;
    border: .08em solid #53654f;
    background-color: #53654f;
    z-index: 1;
    width: .84em;
    height: .84em;
    clip: rect(0em, 0.5em, 1em, 0em);
    border-radius: 50%;
    transform:rotate(0deg)
}

.pie-fill, .c100.p51 .bar:after, .c100.p51 .fill, .c100.p52 .bar:after, .c100.p52 .fill, .c100.p53 .bar:after, .c100.p53 .fill, .c100.p54 .bar:after, .c100.p54 .fill, .c100.p55 .bar:after, .c100.p55 .fill, .c100.p56 .bar:after, .c100.p56 .fill, .c100.p57 .bar:after, .c100.p57 .fill, .c100.p58 .bar:after, .c100.p58 .fill, .c100.p59 .bar:after, .c100.p59 .fill, .c100.p60 .bar:after, .c100.p60 .fill, .c100.p61 .bar:after, .c100.p61 .fill, .c100.p62 .bar:after, .c100.p62 .fill, .c100.p63 .bar:after, .c100.p63 .fill, .c100.p64 .bar:after, .c100.p64 .fill, .c100.p65 .bar:after, .c100.p65 .fill, .c100.p66 .bar:after, .c100.p66 .fill, .c100.p67 .bar:after, .c100.p67 .fill, .c100.p68 .bar:after, .c100.p68 .fill, .c100.p69 .bar:after, .c100.p69 .fill, .c100.p70 .bar:after, .c100.p70 .fill, .c100.p71 .bar:after, .c100.p71 .fill, .c100.p72 .bar:after, .c100.p72 .fill, .c100.p73 .bar:after, .c100.p73 .fill, .c100.p74 .bar:after, .c100.p74 .fill, .c100.p75 .bar:after, .c100.p75 .fill, .c100.p76 .bar:after, .c100.p76 .fill, .c100.p77 .bar:after, .c100.p77 .fill, .c100.p78 .bar:after, .c100.p78 .fill, .c100.p79 .bar:after, .c100.p79 .fill, .c100.p80 .bar:after, .c100.p80 .fill, .c100.p81 .bar:after, .c100.p81 .fill, .c100.p82 .bar:after, .c100.p82 .fill, .c100.p83 .bar:after, .c100.p83 .fill, .c100.p84 .bar:after, .c100.p84 .fill, .c100.p85 .bar:after, .c100.p85 .fill, .c100.p86 .bar:after, .c100.p86 .fill, .c100.p87 .bar:after, .c100.p87 .fill, .c100.p88 .bar:after, .c100.p88 .fill, .c100.p89 .bar:after, .c100.p89 .fill, .c100.p90 .bar:after, .c100.p90 .fill, .c100.p91 .bar:after, .c100.p91 .fill, .c100.p92 .bar:after, .c100.p92 .fill, .c100.p93 .bar:after, .c100.p93 .fill, .c100.p94 .bar:after, .c100.p94 .fill, .c100.p95 .bar:after, .c100.p95 .fill, .c100.p96 .bar:after, .c100.p96 .fill, .c100.p97 .bar:after, .c100.p97 .fill, .c100.p98 .bar:after, .c100.p98 .fill, .c100.p99 .bar:after, .c100.p99 .fill, .c100.p100 .bar:after, .c100.p100 .fill {
    transform:rotate(180deg)
}

.c100 {
    position: relative;
    font-size: 326px;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color:transparent
}

.c100 *, .c100 * :before, .c100 * :after {
    box-sizing:content-box
}

.c100:after {
    position: absolute;
    top: .08em;
    left: .08em;
    display: block;
    content: " ";
    border-radius: 50%;
    background-color: transparent;
    width: .84em;
    height: .84em;
    transition:all 250ms ease-in-out
}

.c100 .slice {
    position: absolute;
    width: 1em;
    height: 1em;
    clip:rect(0em, 1em, 1em, 0.5em)
}

.c100.p1 .bar {
    transform:rotate(3.6deg)
}

.c100.p2 .bar {
    transform:rotate(7.2deg)
}

.c100.p3 .bar {
    transform:rotate(10.8deg)
}

.c100.p4 .bar {
    transform:rotate(14.4deg)
}

.c100.p5 .bar {
    transform:rotate(18deg)
}

.c100.p6 .bar {
    transform:rotate(21.6deg)
}

.c100.p7 .bar {
    transform:rotate(25.2deg)
}

.c100.p8 .bar {
    transform:rotate(28.8deg)
}

.c100.p9 .bar {
    transform:rotate(32.4deg)
}

.c100.p10 .bar {
    transform:rotate(36deg)
}

.c100.p11 .bar {
    transform:rotate(39.6deg)
}

.c100.p12 .bar {
    transform:rotate(43.2deg)
}

.c100.p13 .bar {
    transform:rotate(46.8deg)
}

.c100.p14 .bar {
    transform:rotate(50.4deg)
}

.c100.p15 .bar {
    transform:rotate(54deg)
}

.c100.p16 .bar {
    transform:rotate(57.6deg)
}

.c100.p17 .bar {
    transform:rotate(61.2deg)
}

.c100.p18 .bar {
    transform:rotate(64.8deg)
}

.c100.p19 .bar {
    transform:rotate(68.4deg)
}

.c100.p20 .bar {
    transform:rotate(72deg)
}

.header {
    background-color: rgba(255, 255, 255, 0.7);
    position: fixed;
    width: 100%;
    z-index: 10;
    left: 0;
    top: 0;
    height: 14rem;
    transition:all 250ms ease-in-out
}

@media screen and (max-width: 1024px) {
    .header {
        height:8rem
    }
}

.header.header-reduced {
    height:8rem
}

.header.header-reduced .logo {
    transition: all 250ms ease-in-out;
    height:6rem
}

.header.header-reduced .navi-trigger svg {
    top: -40px;
    height:8rem
}

@media screen and (max-width: 768px) {
    .header.header-reduced .container {
        padding-left:4rem
    }
}

.header .nav {
    height:100%
}

@media screen and (min-width: 1024px) and(max-width: 1370px) {
    .header .nav {
        padding-left:2rem
    }
}

.header .logo-link {
    max-height: 140px;
    display: inline-flex;
    align-items:center
}

.header .logo {
    width: 160px;
    background-image: url(assets/img/logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    transition: all 250ms ease-in-out;
    height: 14rem;
    display: inline-flex;
    justify-content: center;
    align-items:center
}

@media screen and (min-width: 1024px) and(max-width: 1100px) {
    .header .logo {
        width:120px
    }
}

@media screen and (max-width: 1024px) {
    .header .logo {
        height:6rem
    }
}

.header .container {
    max-width: 128rem;
    height: 100%;
    min-width: 100%;
    display: flex;
    margin: 0 auto;
    padding: 0 4rem;
    justify-content:center
}

@media screen and (max-width: 1280px) {
    .header .container {
        padding:0 2rem
    }
}

@media screen and (max-width: 1024px) {
    .header .container {
        justify-content: flex-start;
        padding-left:4rem
    }
}

body > section {
    display: flex;
    justify-content:center
}

body > section.hero {
    min-height:100vh
}

body > section > div {
    position: relative;
    padding: 8rem 4rem;
    max-width: 128rem;
    flex: 1;
    width:100%
}

@media screen and (max-width: 600px) {
    body > section > div {
        padding:6rem 2rem
    }
}

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left:10.4rem
}

@media screen and (max-width: 1024px) {
    .nav {
        display:none
    }
}

.nav-item {
    color: #534f4b;
    padding: 5.8rem 1.8rem;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 1.6rem;
    transition: opacity 250ms ease-in-out;
    position: relative;
    white-space: nowrap;
    line-height: 2.4rem;
    background-color:transparent !important
}

.header-reduced .nav-item {
    padding:2.8rem 1.8rem
}

@media only screen and (max-width: 1280px) {
    .header-reduced .nav-item {
        padding:2.8rem 1rem
    }
}

@media only screen and (max-width: 1280px) {
    .nav-item {
        padding: 5.8rem 1rem;
        font-size:1.4rem
    }
}

.nav-item::after {
    content: "";
    bottom: 0;
    height: 0.7rem;
    position: absolute;
    background: #53654f;
    width: calc(100% - 3.6rem);
    left: 1.8rem;
    transform: scaleX(0);
    transition:transform 250ms ease-in-out 50ms
}

@media only screen and (max-width: 1280px) {
    .nav-item::after {
        width: calc(100% - 2rem);
        left:1rem
    }
}

.nav-item.active:after {
    transform:scaleX(1)
}

.nav-item:hover.active:after {
    transform:scaleX(1)
}

svg {
    cursor: pointer;
    height: 90px;
    transform: translate3d(0, 0, 0);
    width: 140px;
    transition:all 250ms ease-in-out
}

path {
    fill: none;
    transition: stroke-dashoffset 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25), stroke-dasharray 0.5s cubic-bezier(0.25, -0.25, 0.75, 1.25);
    stroke-width: 20px;
    stroke: #000000;
    border-radius: 16px;
    stroke-dashoffset:0
}

path#top, path#bottom {
    stroke-dasharray:240px 950px
}

path#middle {
    stroke-dasharray:240px 240px
}

.cross path#top, .cross path#bottom {
    stroke-dashoffset: -650px;
    stroke-dashoffset: -650px;
    stroke:#000000
}

.cross path#middle {
    stroke-dashoffset: -115px;
    stroke-dasharray:1px 220px
}

.navigation-is-open div.main {
    transform:translateY(100%)
}

.navi-trigger {
    position: fixed;
    top: 40px;
    z-index: 11;
    right:160px
}

@media screen and (min-width: 1025px) {
    .navi-trigger {
        display:none
    }
}

.navi-trigger .navi-icon::before, .navi-trigger .navi-icon:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height:100%
}

.navi-trigger svg {
    position: absolute;
    top: -15px;
    left:19px
}

@media screen and (max-width: 1024px) {
    .navi-trigger svg {
        height: 8rem;
        top:-40px
    }
}

.no-scroll-y {
    overflow-y:hidden !important
}

.header.header-reduced + .sidemenu-wrap .sidemenu-list {
    height: calc(100% - 8rem);
    top:4rem
}

.sidemenu-wrap {
    position: fixed;
    z-index: 10;
    pointer-events: none;
    height: 100vh;
    width: 100%;
    transform: translateX(100%);
    transition: all 250ms ease-in-out;
    display: flex;
    justify-content: center;
    align-items:center
}

.sidemenu-wrap.shown {
    transform:translateX(0)
}

@media screen and (min-width: 1025px) {
    .sidemenu-wrap {
        display:none
    }
}

.sidemenu-list {
    background-color: rgba(255, 255, 255, 0.9);
    margin: 0;
    padding: 0;
    list-style-type: none;
    color: #fff;
    width: 100%;
    text-align: center;
    height: calc(100% - 8rem);
    position: relative;
    top: 4rem;
    overflow-y: auto;
    pointer-events:all
}

.sidemenu-list .sidemenu-list-item {
    color: #534f4b;
    font-size: 1.8rem;
    font-weight: 600;
    padding: 2rem;
    cursor: pointer;
    position:relative
}

.sidemenu-list .sidemenu-list-item.fake {
    text-indent:-100000000px
}

.sidemenu-list .sidemenu-list-item::after {
    display:none
}

.sidemenu-list .sidemenu-list-item.active::after, .sidemenu-list .sidemenu-list-item:hover::after {
    width:60%
}

.btn {
    border-color: #534f4b;
    background-color: transparent;
    border-width: 1px;
    border-style: solid;
    font-family: "roboto-regular";
    font-size: 1.8rem;
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    padding: 1.5rem 4rem;
    transition: all 250ms ease-in-out;
    display: inline-flex;
    justify-content: center;
    color: #534f4b;
    align-items:center
}

@media screen and (max-width: 768px) {
    .btn {
        padding: 2rem 1.5rem;
        font-size:1.6rem
    }
}

.btn .icon {
    margin-right:1rem
}

.btn:hover, .btn:focus {
    background-color:transparent
}

.btn:active {
    background-color:rgba(255, 255, 255, 0.4)
}

.btn.block {
    width:100%
}

#modal-wrapper {
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index:101
}

.ui-dialog {
    background-color: white;
    border-radius: 1.6rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    z-index: 101;
    height: 50rem !important;
    width: 50rem !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    outline: none;
    overflow:hidden
}

@media screen and (max-width: 501px) {
    .ui-dialog {
        height: calc(100% - 2rem) !important;
        width:calc(100% - 2rem) !important
    }
}

@media screen and (max-height: 501px) {
    .ui-dialog {
        height: calc(100% - 2rem) !important;
        width:calc(100% - 2rem) !important
    }
}

.ui-dialog-titlebar {
    display: flex;
    justify-content: space-between;
    padding:2rem
}

.ui-dialog-content {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    height: calc(100% - 6.7rem) !important;
    overflow-y:auto
}

.ui-dialog-content p, .ui-dialog-content h6 {
    margin:0
}

.ui-dialog-content ul {
    padding: 0;
    margin: 0;
    list-style-type:none
}

.ui-dialog-titlebar-close {
    background-color: transparent;
    border: 0;
    text-indent: -1000000px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url(assets/img/close.svg);
    width: 24px;
    height: 24px;
    cursor:pointer
}

.ui-dialog-title {
    font-size: 1.8rem;
    font-family: "roboto-medium"
}

.section.hero {
    position: relative;
    background-image: url(assets/img/Keyvisual.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed
}

@media screen and (max-width: 1280px) {
    .section.hero {
        background: none;
        min-height:unset
    }
}

.section.hero img {
    -o-object-fit: contain;
    object-fit: contain;
    max-width: 100%;
    height: auto;
    z-index: -1;
    display: none;
    position:relative
}

@media screen and (max-width: 1280px) {
    .section.hero img {
        display: initial;
        margin-top:14rem
    }
}

@media screen and (max-width: 1024px) {
    .section.hero img {
        margin-top:8rem
    }
}

.section.hero figure {
    margin:0
}

.section.hero > div {
    padding:0
}

.section.hero .btn {
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    bottom: 10rem;
    left: 50%;
    transform:translateX(-50%)
}

@media screen and (max-width: 725px) {
    .section.hero .btn {
        bottom:8rem
    }
}

@media screen and (max-width: 625px) {
    .section.hero .btn {
        bottom:6rem
    }
}

@media screen and (max-width: 525px) {
    .section.hero .btn {
        left: 4rem;
        transform: none;
        bottom:2rem
    }
}

@media screen and (max-width: 460px) {
    .section.hero .btn {
        left:2rem
    }
}

@media screen and (max-width: 460px) {
    .section.hero .btn {
        font-size: 1.4rem;
        padding:2rem 1rem
    }
}

.was-wir-tun {
    position: relative;
    background-color:white
}

.was-wir-tun > div {
    z-index:1
}

.was-wir-tun .circle {
    position: absolute;
    right: 10rem;
    top: -10rem;
    width: 20rem;
    height: 20rem;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items:center
}

@media screen and (max-width: 1280px) {
    .was-wir-tun .circle {
        top:-11rem
    }
}

@media screen and (max-width: 768px) {
    .was-wir-tun .circle {
        width: 13.8rem;
        height: 13.8rem;
        right: 3.5rem;
        top:-7.5rem
    }
}

@media screen and (max-width: 410px) {
    .was-wir-tun .circle {
        right:2rem
    }
}

.was-wir-tun .circle-picture {
    width: 100%;
    height: 100%;
    z-index: 2;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(assets/img/greener-everyday.png);
    position:absolute
}

.was-wir-tun .circle-text {
    font-size: 24px;
    color: #76b728;
    z-index: 1;
    width: 60%;
    line-height: 1.3;
    padding-top: 2px;
    display:none
}

.was-wir-tun .top-left-item-wrap {
    display: flex;
    padding-top:8rem
}

@media screen and (max-width: 992px) {
    .was-wir-tun .top-left-item-wrap {
        flex-direction:column
    }
}

.was-wir-tun .top-left-item-wrap .check-item-icon, .was-wir-tun .top-left-item-wrap .close-item-icon {
    display: block;
    width: 7.1rem;
    min-width: 7.1rem;
    height: 7.1rem;
    min-height: 7.1rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(assets/img/icon-check.png);
    z-index: 1;
    margin-right:2rem
}

.was-wir-tun .top-left-item-wrap .close-item-icon {
    background-image:url(assets/img/icon-close.png)
}

.was-wir-tun .top-left-item-wrap .close-item, .was-wir-tun .top-left-item-wrap .check-item {
    display: flex;
    max-width:31rem
}

@media screen and (max-width: 600px) {
    .was-wir-tun .top-left-item-wrap .close-item, .was-wir-tun .top-left-item-wrap .check-item {
        flex-direction: column;
        max-width:26rem
    }
}

.was-wir-tun .top-left-item-wrap .close-item > div, .was-wir-tun .top-left-item-wrap .check-item > div {
    margin-top:2rem
}

.was-wir-tun .top-left-item-wrap .close-item {
    margin-right:5rem
}

.was-wir-tun .top-left-item-wrap h3 {
    font-family: "custom-serif";
    color: #76b728;
    font-size: 2.8rem;
    margin:0
}

.was-wir-tun .top-left-item-wrap p {
    font-size: 2rem;
    color: #898887;
    margin:.5rem 0 4rem
}

.was-wir-tun .bottom-left-item-wrap {
    display: flex;
    margin-top:20rem
}

@media screen and (max-width: 992px) {
    .was-wir-tun .bottom-left-item-wrap {
        margin-top:32rem
    }
}

@media screen and (max-width: 900px) {
    .was-wir-tun .bottom-left-item-wrap {
        margin-top:25rem
    }
}

@media screen and (max-width: 768px) {
    .was-wir-tun .bottom-left-item-wrap {
        flex-direction: column;
        margin-top: 32rem;
        align-items:center
    }
}

@media screen and (max-width: 629px) {
    .was-wir-tun .bottom-left-item-wrap {
        margin-top:25rem
    }
}

@media screen and (max-width: 600px) {
    .was-wir-tun .bottom-left-item-wrap {
        margin-top:15rem
    }
}

.was-wir-tun .bottom-left-item-wrap .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 30rem;
    width: 100%;
    text-align:center
}

.was-wir-tun .bottom-left-item-wrap .card:not(:last-of-type) {
    margin-right:4rem
}

@media screen and (max-width: 768px) {
    .was-wir-tun .bottom-left-item-wrap .card:not(:last-of-type) {
        margin-right:0
    }
}

.was-wir-tun .bottom-left-item-wrap .card:nth-of-type(1) .card-img {
    background-image:url(assets/img/icon-men.png)
}

@media screen and (max-width: 900px) {
    .was-wir-tun .bottom-left-item-wrap .card:nth-of-type(1) {
        margin-top:15rem
    }
}

.was-wir-tun .bottom-left-item-wrap .card:nth-of-type(2) {
    margin-top:18rem
}

@media screen and (max-width: 900px) {
    .was-wir-tun .bottom-left-item-wrap .card:nth-of-type(2) {
        margin-top:33rem
    }
}

@media screen and (max-width: 768px) {
    .was-wir-tun .bottom-left-item-wrap .card:nth-of-type(2) {
        margin-top:6rem
    }
}

.was-wir-tun .bottom-left-item-wrap .card:nth-of-type(2) .card-img {
    background-image:url(assets/img/icon-syntetic.png)
}

.was-wir-tun .bottom-left-item-wrap .card:nth-of-type(3) {
    margin-top:36rem
}

@media screen and (max-width: 900px) {
    .was-wir-tun .bottom-left-item-wrap .card:nth-of-type(3) {
        margin-top:51rem
    }
}

@media screen and (max-width: 768px) {
    .was-wir-tun .bottom-left-item-wrap .card:nth-of-type(3) {
        margin-top:6rem
    }
}

.was-wir-tun .bottom-left-item-wrap .card:nth-of-type(3) .card-img {
    background-image:url(assets/img/icon-leaf.png)
}

.was-wir-tun .bottom-left-item-wrap .card-img {
    width: 12rem;
    height: 12rem;
    background-repeat: no-repeat;
    background-position: center right;
    background-size:contain
}

@media screen and (max-width: 768px) {
    .was-wir-tun .bottom-left-item-wrap .card-img {
        width: 14rem;
        height:14rem
    }
}

.was-wir-tun .bottom-left-item-wrap h3 {
    font-family: "custom-serif";
    font-size: 2.2rem;
    margin-bottom:0
}

@media screen and (max-width: 768px) {
    .was-wir-tun .bottom-left-item-wrap h3 {
        font-size:2.8rem
    }
}

.was-wir-tun .bottom-left-item-wrap p {
    font-size: 2rem;
    color: #898887;
    margin-bottom:0
}

.was-wir-tun .right-background {
    width: 100%;
    height: 100%;
    max-height: 870px;
    z-index: 0;
    background-image: url(assets/img/right-picture.png);
    background-repeat: no-repeat;
    background-position: 100% 100%;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 8rem;
    max-width: 100%;
    min-width: 100%;
    padding:0
}

@media screen and (max-width: 1280px) {
    .was-wir-tun .right-background {
        background-position:150% 100%
    }
}

@media screen and (max-width: 1180px) {
    .was-wir-tun .right-background {
        background-position:200% 100%
    }
}

@media screen and (max-width: 1110px) {
    .was-wir-tun .right-background {
        background-position:250% 100%
    }
}

@media screen and (max-width: 1080px) {
    .was-wir-tun .right-background {
        background-position:280% 100%
    }
}

@media screen and (max-width: 1024px) {
    .was-wir-tun .right-background {
        background-position:380% 100%
    }
}

@media screen and (max-width: 992px) {
    .was-wir-tun .right-background {
        right: -34rem;
        top: 16rem;
        background-position: center right;
        background-size: 1000px 1000px;
        min-width: 1000px;
        min-height:1000px
    }
}

@media screen and (max-width: 800px) {
    .was-wir-tun .right-background {
        right: -20rem;
        background-size: 900px 900px;
        min-width: 900px;
        min-height:900px
    }
}

@media screen and (max-width: 700px) {
    .was-wir-tun .right-background {
        right:-25rem
    }
}

@media screen and (max-width: 630px) {
    .was-wir-tun .right-background {
        right: -30rem;
        top:20rem
    }
}

@media screen and (max-width: 629px) {
    .was-wir-tun .right-background {
        min-width: 547px;
        min-height: 697px;
        background-image: url(assets/img/right-picture-mobile.png);
        background-size: 547px 697px;
        right:-4rem
    }
}

@media screen and (max-width: 525px) {
    .was-wir-tun .right-background {
        right:-15rem
    }
}

@media screen and (max-width: 425px) {
    .was-wir-tun .right-background {
        right:-22rem
    }
}

.section.markenidee {
    background-color: #F7F2EB;
    z-index:4
}

@media screen and (max-width: 600px) {
    .section.markenidee > div {
        padding-bottom:8rem
    }
}

.section.markenidee .section-content {
    display: flex;
    justify-content: center;
    margin-top:8rem
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-content {
        flex-direction:column
    }
}

.section.markenidee .section-content h3 {
    font-size: 4rem;
    color: #76b728;
    font-family: "custom-serif";
    margin:0 auto
}

@media screen and (max-width: 1280px) {
    .section.markenidee .section-content h3 {
        font-size:3.5rem
    }
}

@media screen and (max-width: 1024px) {
    .section.markenidee .section-content h3 {
        font-size:3rem
    }
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-content h3 {
        font-size: 2.5rem;
        text-align:center
    }
}

@media screen and (max-width: 425px) {
    .section.markenidee .section-content h3 {
        max-width:80%
    }
}

.section.markenidee .section-content p {
    color: #898887;
    font-size:2rem
}

@media screen and (max-width: 1280px) {
    .section.markenidee .section-content p {
        font-size:1.6rem
    }
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-content p {
        text-align:center
    }
}

@media screen and (max-width: 600px) {
    .section.markenidee .section-content p {
        max-width: 80%;
        margin-right: auto;
        margin-left:auto
    }
}

@media screen and (max-width: 600px) {
    .section.markenidee .section-content .on-large {
        display:none
    }
}

.section.markenidee .section-part {
    max-width:56rem
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-part {
        max-width: 75%;
        margin:0 auto
    }
}

@media screen and (max-width: 525px) {
    .section.markenidee .section-part {
        max-width:100%
    }
}

@media screen and (max-width: 600px) {
    .section.markenidee .section-part {
        text-align:center
    }
}

.section.markenidee .section-part.left {
    margin-right: 4rem;
    margin-bottom:5rem
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-part.left {
        margin:0 auto 5rem auto
    }
}

.section.markenidee .section-part.right {
    margin-left: 4rem;
    margin-bottom:5rem
}

@media screen and (max-width: 768px) {
    .section.markenidee .section-part.right {
        margin:0 auto
    }
}

.section.produkte {
    background-color: #52644F;
    min-height: 100vh;
    z-index:4
}

.section.produkte .plastic {
    position: absolute;
    right: 4rem;
    top: -10rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url(assets/img/plastik.png);
    width: 20rem;
    height: 20rem;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 24px;
    color:#76b728
}

@media screen and (max-width: 1024px) {
    .section.produkte .plastic {
        left:calc(50% - 10rem)
    }
}


@media screen and (max-width: 768px) {
    .section.produkte .plastic {
        width: 16rem;
        height: 16rem;
        top: -8rem;
        left:calc(50% - 8rem)
    }
}


.section.produkte .plastic > span {
    width: 60%;
    line-height: 1.3;
    padding-top: 2px;
    display:none
}

.section.produkte > div {
    padding-top:12rem;
}

.section.produkte .section-content {
    margin-top: 8rem;
    display: flex;
    justify-content:space-between
}

@media screen and (max-width: 1024px) {
    .section.produkte .section-content {
        flex-direction: column;
        align-items:center
    }
}

/*
@media screen and (max-width: 600px) {
    .section.produkte .section-content {
        display:none
    }
}


.section.produkte .section-content-with-slider {
    margin-top: 8rem;
    display:none
}

@media screen and (max-width: 601px) {
    .section.produkte .section-content-with-slider {
        display:block
    }
}

@media screen and (max-width: 601px) and(orientation: landscape) {
    .section.produkte .section-content-with-slider {
        display:block
    }
}

.section.produkte .section-content-with-slider .slick-arrow {
    display:none !important
}

.section.produkte .section-content-with-slider .slick-slide > div {
    display: flex;
    justify-content:center
}

.section.produkte .section-content-with-slider .slick-dots {
    bottom:-5rem
}

.section.produkte .section-content-with-slider .slick-dots li.slick-active button::before {
    background-color:#fff
}

.section.produkte .section-content-with-slider .slick-dots li button {
    border-radius: 50%;
    border: 1px solid #fff;
    position: relative;
    overflow:hidden
}

.section.produkte .section-content-with-slider .slick-dots li button::before {
    position: absolute;
    left: 2px;
    top: 2px;
    border-radius: 50%;
    font-size: 0;
    opacity: 1;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    font-family: "roboto-regular"
}
*/

.section.produkte .section-card {
    padding-bottom:8rem;
    color: #fff;
    max-width:36rem
}

@media screen and (max-width: 1200px) {
    .section.produkte .section-card {
        max-width:30rem
    }
}

@media screen and (max-width: 1024px) {
    .section.produkte .section-card {
        max-width:50rem
    }
}

.section.produkte .section-card h3 {
    margin: 0;
    color: #fff;
    font-family: "custom-serif";
    font-size:3.7rem
}

.section.produkte .section-card h3.subtitle {
    margin: 0;
    color: #fff;
    font-family: 'roboto-thin';
    line-height: 0.0rem;
    font-size:2.1rem;
    margin-bottom: 3rem;
}

@media screen and (min-width: 1024px) and(max-width: 1200px) {
    .section.produkte .section-card h3 {
        font-size:2.2rem
    }
}

/*
@media screen and (max-width: 600px) {
    .section.produkte .section-card h3 {
        font-size: 2.8rem;
        max-width: 30rem;
        margin:0 auto
    }
}
*/

.section.produkte .section-card p {
    font-family: 'roboto-regular';
    font-size:1.8rem
}

/*
@media screen and (max-width: 600px) {
    .section.produkte .section-card p {
        max-width: 30rem;
        margin:0 auto
    }
}
*/

.section.produkte .section-card img {
    max-width: 100%;
    height: auto;
    min-height: 290px;
    max-height: 290px;
    -o-object-fit: contain;
    object-fit:contain
}

@media screen and (max-width: 1024px) {
    .section.produkte .section-card img {
        min-height: 40rem; /*50rem*/
        max-height: 40rem; /*50rem*/
    }
}

/*
@media screen and (max-width: 600px) {
    .section.produkte .section-card img {
        min-height: 30rem;
        max-height: 30rem;
        margin:0 auto
    }
}
*/

.section.mission {
    background-color: #fff;
    z-index:4
}

.section.mission .section-row {
    display: flex;
    position: relative;
    padding:6rem 0
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row {
        flex-direction: column-reverse;
        align-items:center
    }
}

.section.mission .section-row:not(.second) {
    margin-top: 8rem;
    padding-top:3rem
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row:not(.second) {
        margin-top:0
    }
}

.section.mission .section-row:not(.second) .left {
    margin-right: 50rem;
    max-width: 700px;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction:column
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row:not(.second) .left {
        margin-right:0
    }
}

.section.mission .section-row:not(.second) .right {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(assets/img/percentage-20.png);
    width: 560px;
    height: 100%;
    position: absolute;
    right: -100px;
    top: 0;
    transition-property:opacity !important
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row:not(.second) .right {
        position: initial;
        margin-left: 6rem;
        height: 47rem;
        background-size:47rem 47rem
    }
}

@media screen and (max-width: 450px) {
    .section.mission .section-row:not(.second) .right {
        height: 42rem;
        background-size:42rem 42rem
    }
}

.section.mission .section-row h3 {
    font-size: 4rem;
    color: #76b728;
    font-family: "custom-serif"
}

@media screen and (max-width: 1200px) {
    .section.mission .section-row h3 {
        font-size: 3.5rem;
        text-align:center
    }
}

@media screen and (max-width: 769px) {
    .section.mission .section-row h3 {
        font-size: 2.8rem;
        max-width: 80%;
        margin:0 auto
    }
}

@media screen and (max-width: 600px) {
    .section.mission .section-row h3 {
        max-width:unset
    }
}

.section.mission .section-row.second {
    padding:0 0 0
}

@media screen and (min-width: 1200px) {
    .section.mission .section-row.second {
        padding-top:6rem
    }
}

@media screen and (min-width: 1000px) {
    .section.mission .section-row.second {
        padding-top:8rem
    }
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row.second {
        flex-direction: column;
        align-items:center
    }
}

.section.mission .section-row.second .left {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(assets/img/percentage-0.png);
    width: 500px;
    height: 100%;
    position: absolute;
    left: 0;
    top:0
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row.second .left {
        position: initial;
        height: 397px;
        width:406px
    }
}

.section.mission .section-row.second .right {
    margin-left: 50rem;
    max-width: 700px;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction:column
}

@media screen and (max-width: 1000px) {
    .section.mission .section-row.second .right {
        margin-left:0
    }
}

.section.vision {
    background-color: #fff;
    z-index:4
}

.section.vision > div {
    padding-top:0
}

.section.vision .section-row {
    margin-bottom: 10rem;
    display: flex;
    position:relative
}

@media screen and (min-width: 1001px) {
    .section.vision .section-row {
        padding:6rem 0
    }
}

@media screen and (max-width: 1000px) {
    .section.vision .section-row {
        flex-direction: column-reverse;
        align-items: center;
        margin-bottom:0
    }
}

.section.vision .section-row h3 {
    font-size: 4.5rem;
    margin-top: 0;
    color: #76b728;
    font-family: "custom-serif"
}

@media screen and (max-width: 1200px) {
    .section.vision .section-row h3 {
        font-size: 3.5rem;
        text-align:center
    }
}

@media screen and (max-width: 1000px) {
    .section.vision .section-row h3 {
        margin-bottom:0
    }
}

@media screen and (max-width: 769px) {
    .section.vision .section-row h3 {
        font-size: 2.8rem;
        max-width: 80%;
        margin:0 auto
    }
}

@media screen and (max-width: 600px) {
    .section.vision .section-row h3 {
        max-width: unset;
        position: relative;
        top:-6rem
    }
}

@media screen and (max-width: 550px) {
    .section.vision .section-row h3 {
        top:-3rem
    }
}

@media screen and (max-width: 425px) {
    .section.vision .section-row h3 {
        top:-6rem
    }
}

.section.vision .section-row .left {
    margin-right: 50rem;
    margin-top: 8rem;
    max-width: 700px;
    justify-content: center;
    display: flex;
    align-items: center;
    flex-direction:column
}

@media screen and (max-width: 1200px) {
    .section.vision .section-row .left {
        max-width:450px
    }
}

@media screen and (max-width: 1000px) {
    .section.vision .section-row .left {
        max-width:700px
    }
}

@media screen and (max-width: 1000px) {
    .section.vision .section-row .left {
        margin-right:0
    }
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .left {
        margin-top:0
    }
}

.section.vision .section-row .right {
    background-repeat: no-repeat;
    background-position: center;
    width: 560px;
    position: absolute;
    right: -10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 8rem;
    height: calc(100% + 1rem);
    background-image:url(assets/img/percentage-20-80.png)
}

@media screen and (max-width: 1400px) {
    .section.vision .section-row .right {
        right:-2rem
    }
}

@media screen and (max-width: 1000px) {
    .section.vision .section-row .right {
        position: initial;
        background-size: 546px 516px;
        width: 546px;
        height:516px
    }
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right {
        background-size:44.6rem 41.6rem
    }
}

@media screen and (max-width: 450px) {
    .section.vision .section-row .right {
        background-size:40.6rem 37.6rem
    }
}

@media screen and (max-width: 425px) {
    .section.vision .section-row .right {
        background-size:37.6rem 33.6rem
    }
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right .c100 {
        font-size:25rem
    }
}

@media screen and (max-width: 425px) {
    .section.vision .section-row .right .c100 {
        font-size:20rem
    }
}

.section.vision .section-row .right .c100.p1 {
    margin:6.5rem 13rem 0 0
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right .c100.p1 {
        margin:4.2rem 9.8rem 0 0
    }
}

@media screen and (max-width: 450px) {
    .section.vision .section-row .right .c100.p1 {
        margin:6.2rem 9.8rem 0 0
    }
}

@media screen and (max-width: 425px) {
    .section.vision .section-row .right .c100.p1 {
        margin:2.2rem 7.8rem 0 0
    }
}

.section.vision .section-row .right .c100 #twenty-percent, .section.vision .section-row .right .c100 #eighty-percent {
    font-size: 8rem;
    position: absolute;
    font-family: "custom-serif";
    top: -11rem;
    right: 0;
    color:#53654f
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right .c100 #twenty-percent, .section.vision .section-row .right .c100 #eighty-percent {
        font-size: 6rem;
        top:-9rem
    }
}

@media screen and (max-width: 450px) {
    .section.vision .section-row .right .c100 #twenty-percent, .section.vision .section-row .right .c100 #eighty-percent {
        font-size: 5rem;
        top:-7rem
    }
}

.section.vision .section-row .right .c100 #twenty-percent::after, .section.vision .section-row .right .c100 #eighty-percent::after {
    content: '%';
    font-size: 4rem;
    position: absolute;
    top:1.5rem
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right .c100 #twenty-percent::after, .section.vision .section-row .right .c100 #eighty-percent::after {
        font-size: 3rem;
        top:1rem
    }
}

.section.vision .section-row .right .c100 #eighty-percent {
    top: unset;
    right: -14rem;
    bottom: -5rem;
    color:#544E4C
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right .c100 #eighty-percent {
        right:-11rem
    }
}

@media screen and (max-width: 450px) {
    .section.vision .section-row .right .c100 #eighty-percent {
        right: -10rem;
        bottom:-2rem
    }
}

.section.vision .section-row .right .c100 .slice span {
    font-size: 2.4rem;
    color: #9AA093;
    position: absolute;
    bottom: 70%;
    right: 15%;
    z-index:1
}

@media screen and (max-width: 550px) {
    .section.vision .section-row .right .c100 .slice span {
        font-size:2rem
    }
}

@media screen and (max-width: 425px) {
    .section.vision .section-row .right .c100 .slice span {
        font-size: 1.8rem;
        right:12%
    }
}

.section.hintergrund {
    background-color: #F7F1EA;
    z-index:4
}

.section.hintergrund .logo, .section.hintergrund .derux {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 26rem;
    min-width: 26rem;
    max-width: 26rem;
    height: 11.5rem;
    min-height: 11.5rem;
    max-height:11.5rem
}

@media screen and (max-width: 768px) {
    .section.hintergrund .logo, .section.hintergrund .derux {
        width: 20rem;
        min-width: 20rem;
        max-width: 20rem;
        height: 8.84615rem;
        min-height: 8.84615rem;
        max-height:8.84615rem
    }
}

@media screen and (max-width: 700px) {
    .section.hintergrund .logo, .section.hintergrund .derux {
        width: 15.29412rem;
        min-width: 15.29412rem;
        max-width: 15.29412rem;
        height: 6.76471rem;
        min-height: 6.76471rem;
        max-height:6.76471rem
    }
}

@media screen and (max-width: 450px) {
    .section.hintergrund .logo, .section.hintergrund .derux {
        width: 10.4rem;
        min-width: 10.4rem;
        max-width: 10.4rem;
        height: 4.6rem;
        min-height: 4.6rem;
        max-height:4.6rem
    }
}

@media screen and (max-width: 450px) {
    .section.hintergrund .section-title {
        max-width: 78%;
        word-break:break-word
    }
}

.section.hintergrund .logo {
    background-image:url(assets/img/logo-outlined.png)
}

.section.hintergrund .derux {
    flex: 1;
    background-image:url(assets/img/derux.png)
}

.section.hintergrund .section-content {
    margin-top:8rem
}

.section.hintergrund .section-content h3 {
    font-size: 2.4rem;
    font-family: "roboto-medium";
    color:#544E4C
}

@media screen and (max-width: 880px) {
    .section.hintergrund .section-content h3 {
        font-size:2rem
    }
}

@media screen and (max-width: 715px) {
    .section.hintergrund .section-content h3 {
        font-size:1.8rem
    }
}

@media screen and (max-width: 615px) {
    .section.hintergrund .section-content h3 {
        font-size:1.2rem
    }
}

.section.hintergrund .section-row {
    display: flex;
    align-items: center;
    justify-content:center
}

.section.hintergrund .circle {
    width: 290px;
    min-width: 290px;
    height: 290px;
    min-height: 290px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items:center
}

@media screen and (max-width: 768px) {
    .section.hintergrund .circle {
        min-width: 20rem;
        min-height: 20rem;
        height: 20rem;
        width:20rem
    }
}

@media screen and (max-width: 600px) {
    .section.hintergrund .circle {
        min-width: 15rem;
        min-height: 15rem;
        height: 15rem;
        width:15rem
    }
}

@media screen and (max-width: 450px) {
    .section.hintergrund .circle {
        min-width: 12rem;
        min-height: 12rem;
        height: 12rem;
        width:12rem
    }
}

.section.hintergrund .circle .circle-picture {
    position: absolute;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    z-index:0
}

.section.hintergrund .circle.first {
    color:#64A4B5;
}

.section.hintergrund .circle.first .circle-picture {
    background-image:url(assets/img/circle-blue.png)
}

.section.hintergrund .circle.second {
    color:#76b728;
}

.section.hintergrund .circle.second .circle-picture {
    background-image:url(assets/img/circle-green.png)
}

.section.hintergrund .circle .circle-text {
    z-index: 1;
    font-weight: 700;
    font-size:3.5rem
}

@media screen and (max-width: 600px) {
    .section.hintergrund .circle .circle-text {
        font-size:2.5rem
    }
}

@media screen and (max-width: 450px) {
    .section.hintergrund .circle .circle-text {
        font-size:2rem
    }
}

.section.hintergrund .circles-separator {
    width: 100px;
    height: 130px;
    margin: 10rem 5rem 0 5rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image:url(assets/img/separator-t.png)
}

@media screen and (max-width: 525px) {
    .section.hintergrund .circles-separator {
        margin:0
    }
}

.section.hintergrund .logo-row {
    padding:3rem 0
}

.section.hintergrund .top-separator, .section.hintergrund .left-separator, .section.hintergrund .right-separator, .section.hintergrund .bottom-separator {
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center
}

.section.hintergrund .top-separator {
    height: 8.2rem;
    width: .3rem;
    background-image:url(assets/img/separator.png)
}

@media screen and (max-width: 700px) {
    .section.hintergrund .top-separator {
        height:6rem
    }
}

.section.hintergrund .left-separator, .section.hintergrund .right-separator, .section.hintergrund .bottom-separator {
    background-image: url(assets/img/arrow-down.png);
    width: 5.8rem;
    min-width: 5.8rem;
    max-width: 5.8rem;
    height: 3.9rem;
    min-height: 3.9rem;
    max-height:3.9rem
}

@media screen and (max-width: 810px) {
    .section.hintergrund .left-separator, .section.hintergrund .right-separator, .section.hintergrund .bottom-separator {
        width: 4.46154rem;
        min-width: 4.46154rem;
        max-width: 4.46154rem;
        height: 3rem;
        min-height: 3rem;
        max-height:3rem
    }
}

.section.hintergrund .right-separator {
    transform:rotate(-90deg)
}

.section.hintergrund .left-separator {
    transform:rotate(90deg)
}

.section.hintergrund .cross {
    display: flex;
    flex-direction: column;
    flex:1
}

.section.hintergrund .cross .row {
    align-items: center;
    justify-content: center;
    display: flex;
    padding:2rem 0
}

.section.hintergrund .top, .section.hintergrund .bottom, .section.hintergrund .left, .section.hintergrund .right {
    display: flex;
    align-items:center
}

.section.hintergrund .top, .section.hintergrund .bottom {
    flex-direction:column
}

.section.hintergrund .top h3 {
    color:#53654f
}

.section.hintergrund .left, .section.hintergrund .right {
    flex: 1;
    min-width:306px
}

@media screen and (max-width: 810px) {
    .section.hintergrund .left, .section.hintergrund .right {
        min-width:220px
    }
}

@media screen and (max-width: 715px) {
    .section.hintergrund .left, .section.hintergrund .right {
        min-width:170px
    }
}

@media screen and (max-width: 615px) {
    .section.hintergrund .left, .section.hintergrund .right {
        min-width:unset
    }
}

@media screen and (max-width: 615px) {
    .section.hintergrund .right h3, .section.hintergrund .left h3 {
        word-break:break-word
    }
}

.section.hintergrund .right {
    padding-left:2rem
}

@media screen and (max-width: 715px) {
    .section.hintergrund .right {
        padding-left:1rem
    }
}

.section.hintergrund .right h3 {
    margin-left:1rem
}

.section.hintergrund .left {
    padding-right: 2rem;
    justify-content:flex-end
}

@media screen and (max-width: 715px) {
    .section.hintergrund .left {
        padding-right:1rem
    }
}

.section.hintergrund .left h3 {
    margin-right: 1rem;
    text-align:right
}

@media screen and (min-width: 615px) {
    .section.hintergrund .left h3 {
        max-width: 75%;
        min-width:60%
    }
}

.section.hintergrund .bottom .bottom-text {
    text-align: center;
    padding-bottom:2rem
}

.section.hintergrund .bottom h3 {
    margin-bottom:0
}

.section.hintergrund .bottom h3 + h3 {
    margin: 0;
    color:#7F7976
}

.section.hintergrund .bottom h3 + h3 span {
    margin:0 .5rem
}

.section.hintergrund .section-row .left-text {
    text-align: right;
    padding-right: 4rem;
    position: relative;
    flex:1
}

@media screen and (max-width: 615px) {
    .section.hintergrund .section-row .left-text {
        padding-right:2rem
    }
}

.section.hintergrund .section-row .left-text:before {
    content: '';
    height: 1rem;
    width: 80px;
    position: absolute;
    right: 4rem;
    top: -2rem;
    display: block;
    background-color:#76b728
}

@media screen and (max-width: 615px) {
    .section.hintergrund .section-row .left-text:before {
        right:2rem
    }
}

.section.hintergrund .section-row .left-text span {
    display: inline-flex;
    max-width:400px
}

.section.hintergrund .section-row .right-text {
    padding-left: 4rem;
    position: relative;
    flex:1
}

@media screen and (max-width: 615px) {
    .section.hintergrund .section-row .right-text {
        padding-left:2rem
    }
}

.section.hintergrund .section-row .right-text:before {
    content: '';
    position: absolute;
    left: 4rem;
    top: -2rem;
    height: 1rem;
    width: 80px;
    display: block;
    background-color:#76b728
}

@media screen and (max-width: 615px) {
    .section.hintergrund .section-row .right-text:before {
        left:2rem
    }
}

.section.hintergrund .section-row .right-text h3 {
    display: inline-flex;
    max-width:405px
}

.section.hintergrund .section-row.last {
    padding: 4rem 0 0rem 0;
    font-weight:600
}

.section.hintergrund .section-row.last h3 {
    margin: 0;
    min-height: 10.8rem;
    color:#76b728
}

.section.wertschopfung {
    background-color: #fff;
    z-index:4
}

.section.wertschopfung .section-title {
    word-break:break-word
}

@media screen and (min-width: 1024px) {
    .section.wertschopfung .section-title {
        max-width:60%
    }
}

.section.wertschopfung .section-content {
    margin-top: 10rem;
    margin-bottom: 13rem;
    position:relative
}

@media screen and (max-width: 1205px) {
    .section.wertschopfung .section-content {
        margin-bottom:15rem
    }
}

@media screen and (max-width: 952px) {
    .section.wertschopfung .section-content {
        margin-bottom:10rem
    }
}

@media screen and (max-width: 920px) {
    .section.wertschopfung .section-content {
        margin-bottom:0
    }
}

@media screen and (max-width: 860px) {
    .section.wertschopfung .section-content {
        margin:0 auto
    }
}

.section.wertschopfung .section-content .left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 550px;
    margin-right:500px
}

@media screen and (max-width: 1205px) {
    .section.wertschopfung .section-content .left {
        margin-right: 450px;
        align-items:center
    }
}

@media screen and (max-width: 1100px) {
    .section.wertschopfung .section-content .left {
        margin-right:400px
    }
}

@media screen and (max-width: 950px) {
    .section.wertschopfung .section-content .left {
        align-items:flex-start
    }
}

@media screen and (max-width: 920px) {
    .section.wertschopfung .section-content .left {
        padding-top: 95rem;
        align-items: center;
        max-width: 100%;
        margin-right:0
    }
}

@media screen and (max-width: 520px) {
    .section.wertschopfung .section-content .left {
        padding-top:85rem
    }
}

.section.wertschopfung .section-content .left h3 {
    color: #76b728;
    font-family: "custom-serif";
    font-size: 4.5rem;
    margin:0
}

@media screen and (min-width: 1205px) and(max-width: 1280px) {
    .section.wertschopfung .section-content .left h3 {
        font-size:4rem
    }
}

@media screen and (max-width: 1205px) {
    .section.wertschopfung .section-content .left h3 {
        font-size:3.5rem
    }
}

@media screen and (max-width: 1050px) {
    .section.wertschopfung .section-content .left h3 {
        font-size:3rem
    }
}

@media screen and (max-width: 860px) {
    .section.wertschopfung .section-content .left h3 {
        text-align:center
    }
}

@media screen and (max-width: 600px) {
    .section.wertschopfung .section-content .left h3 {
        font-size:2.8rem
    }
}

.section.wertschopfung .section-content .left .logo {
    width: 200px;
    background-image: url(assets/img/logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    height: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom:3rem
}

@media screen and (max-width: 1280px) {
    .section.wertschopfung .section-content .left .logo {
        margin-top: 5rem;
        margin-right:10rem
    }
}

@media screen and (max-width: 1050px) {
    .section.wertschopfung .section-content .left .logo {
        margin-top:10rem
    }
}

@media screen and (max-width: 920px) {
    .section.wertschopfung .section-content .left .logo {
        margin-right:0
    }
}

@media screen and (max-width: 860px) {
    .section.wertschopfung .section-content .left .logo {
        margin-right: 0;
        margin-bottom:0
    }
}

.section.wertschopfung .section-content .left .btn {
    margin-right:10rem
}

@media screen and (max-width: 860px) {
    .section.wertschopfung .section-content .left .btn {
        margin-right:0
    }
}

.section.wertschopfung .section-content .right {
    background-position: center right;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(assets/img/chain.png);
    height: 1000px;
    position: absolute;
    right: 0;
    top: 0;
    width:100%
}

@media screen and (max-width: 1280px) {
    .section.wertschopfung .section-content .right {
        height:850px
    }
}

@media screen and (max-width: 1100px) {
    .section.wertschopfung .section-content .right {
        height:850px
    }
}

@media screen and (min-width: 860px) and(max-width: 880px) {
    .section.wertschopfung .section-content .right {
        height:820px
    }
}

@media screen and (max-width: 860px) {
    .section.wertschopfung .section-content .right {
        top: 8rem;
        right:1rem
    }
}

@media screen and (max-width: 520px) {
    .section.wertschopfung .section-content .right {
        background-size: 440px 750px;
        width: 440px;
        height:750px
    }
}

.section.wir .section-content {
    margin-top: 10rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap:wrap
}

@media screen and (max-width: 1024px) {
    .section.wir .section-content {
        flex-direction: column;
        align-items:center
    }
}

.section.wir h4 {
    font-family: "custom-serif";
    font-size: 2.4rem;
    font-weight: normal;
    text-align: center;
    margin-bottom:0
}

@media screen and (max-width: 768px) {
    .section.wir h4 {
        font-size:2rem
    }
}

.section.wir p {
    color: #898887;
    font-size: 1.8rem;
    margin-bottom: 0;
    margin-top: 1rem;
    text-align:center
}

@media screen and (max-width: 768px) {
    .section.wir p {
        font-size:1.6rem
    }
}

.section.wir p:last-of-type {
    max-width: 80%;
    margin:1rem auto 0
}

.section.wir img {
    max-width: 45rem;
    height: auto;
    -o-object-fit: contain;
    object-fit:contain
}

@media screen and (max-width: 500px) {
    .section.wir img {
        max-width:100%
    }
}

.section.wir .ceo {
    max-width:46rem
}

@media screen and (max-width: 1024px) {
    .section.wir .ceo {
        text-align:center
    }
}

@media screen and (max-width: 475px) {
    .section.wir .ceo {
        max-width:100%
    }
}

@media screen and (max-width: 1024px) {
    .section.wir .ceo:last-of-type {
        margin-top:4rem
    }
}

.section.wir .ceo-description {
    letter-spacing:0.1rem
}

.section.wir .ceo-description h3 {
    color: #76b728;
    font-size: 2.4rem;
    font-family: "custom-serif"
}

@media screen and (max-width: 768px) {
    .section.wir .ceo-description h3 {
        font-size:2rem
    }
}

.section.kontakt {
    background-color: #FCF3EC;
    position:relative
}

.section.kontakt > div {
    padding-bottom:2rem
}

.section.kontakt #to-top {
    background-image: url(assets/img/icon-top.png);
    background-color: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0;
    width: 10rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, 0);
    height: 10rem;
    margin-bottom:5rem
}

@media screen and (max-width: 768px) {
    .section.kontakt #to-top {
        position: initial;
        transform:none
    }
}

.section.kontakt .section-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column
}

.section.kontakt .section-content h3 {
    color: #53654f;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom:5rem
}

@media screen and (min-width: 785px) {
    .section.kontakt .section-content h3 {
        font-size:2.5rem
    }
}

@media screen and (max-width: 510px) {
    .section.kontakt .section-content h3 {
        text-align: center;
        font-size:1.6rem
    }
}

.section.kontakt .section-title {
    margin-bottom:5rem
}

@media screen and (min-width: 768px) {
    .section.kontakt .section-title {
        max-width: 60%;
        font-size:5rem
    }
}

@media screen and (min-width: 926px) {
    .section.kontakt .section-title {
        font-size:6rem
    }
}

@media screen and (min-width: 1024px) {
    .section.kontakt .section-title {
        font-size:6rem
    }
}

@media screen and (min-width: 1250px) {
    .section.kontakt .section-title {
        font-size:7rem
    }
}

.section.kontakt .btn {
    background-color: transparent;
    padding: 3rem 6rem;
    margin-bottom: 6rem;
    white-space:nowrap
}

.section.kontakt .circle-with-leaves {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4.5rem;
    position: relative;
    border-radius: 50%;
    padding: 4rem;
    text-align: center;
    color: #76b728;
    width: 381px;
    height: 381px;
    margin-bottom:5rem
}

@media screen and (max-width: 600px) {
    .section.kontakt .circle-with-leaves {
        width: 200px;
        height: 200px;
        font-size:2.5rem
    }
}

.section.kontakt .circle-picture {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-image: url(assets/img/circle-leaves.png);
    background-position: center;
    background-size: contain;
    background-repeat:no-repeat
}

.section.kontakt .circle-text {
    z-index:1
}

.section.kontakt .footer-text {
    font-size: 2rem;
    margin-bottom:5rem
}

@media screen and (max-width: 500px) {
    .section.kontakt .footer-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom:0
    }
}

.section.kontakt .footer-text span {
    margin:0 2rem
}

@media screen and (max-width: 500px) {
    .section.kontakt .footer-text span {
        margin-top:2rem
    }
}

.section.kontakt .impressumDaten {
    background: none;
    border: 0;
    cursor: pointer;
    color:inherit
}


.section.faq {
    position:relative
}

.section.faq > div {
    padding-bottom:2rem
}

.section.faq #to-top {
    background-image: url(assets/img/icon-top.png);
    background-color: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0;
    width: 10rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, 0);
    height: 10rem;
    margin-bottom:5rem
}

@media screen and (max-width: 768px) {
    .section.faq #to-top {
        position: initial;
        transform:none
    }
}

.section.faq .section-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column
}

.section.faq .section-content h3 {
    color: #53654f;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom:5rem
}

@media screen and (min-width: 785px) {
    .section.faq .section-content h3 {
        font-size:2.5rem
    }
}

@media screen and (max-width: 510px) {
    .section.faq .section-content h3 {
        text-align: center;
        font-size:1.6rem
    }
}

.section.faq .section-content p {
    color: #898887;
    font-size: 1.8rem;
    margin-bottom: 0;
    margin-top: 1rem;
    text-align:center
}

@media screen and (max-width: 768px) {
    .section.faq .section-content p {
        font-size:1.6rem
    }
}

.section.faq .section-content p:last-of-type {
    max-width: 80%;
    margin:1rem auto 0
}

.section.faq .section-content .faq-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width:100%
}

.section.faq .section-title {
    margin-bottom:5rem
}

@media screen and (min-width: 768px) {
    .section.faq .section-title {
        max-width: 60%;
        font-size:5rem
    }
}

@media screen and (min-width: 926px) {
    .section.faq .section-title {
        font-size:6rem
    }
}

@media screen and (min-width: 1024px) {
    .section.faq .section-title {
        font-size:6rem
    }
}

@media screen and (min-width: 1250px) {
    .section.faq .section-title {
        font-size:7rem
    }
}

.section.faq .footer-text {
    font-size: 2rem;
    margin:5rem 0
}

@media screen and (max-width: 500px) {
    .section.faq .footer-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom:0
    }
}

.section.faq .footer-text span {
    margin:0 2rem
}

@media screen and (max-width: 500px) {
    .section.faq .footer-text span {
        margin-top:2rem
    }
}

.section.faq .impressumDaten {
    background: none;
    border: 0;
    cursor: pointer;
    color:inherit
}

.section.faq .faq-page {
    color: #444;
    cursor: pointer;
    padding: 30px 20px;
    width: 70%;
    border: none;
    outline: none;
    transition: 0.4s;
    margin: auto;
    font-size:20px
}

.section.faq .faq-body {
    margin: auto;
    width: 80%;
    padding:auto
}

.section.faq .active, .section.faq .faq-page:hover {
    background-color:#F9F9F9
}

.section.faq .faq-body {
    padding: 0 18px;
    background-color: white;
    display: none;
    overflow:hidden
}

.section.faq .faq-page:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left:5px
}

.section.faq .active:after {
    content: "\2796"
}




.section.footer {
    background-color: #FCF3EC;
    background-image: url(assets/img/IMG_footer.png);
    background-size: contain;
    background-position: bottom;
    background-repeat: no-repeat;
    position:relative
}

.section.footer > div {
    padding-bottom:2rem
}

.section.footer #to-top {
    background-image: url(assets/img/icon-top.png);
    background-color: transparent;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border: 0;
    width: 10rem;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, 0);
    height: 10rem;
    margin-bottom:5rem
}

@media screen and (max-width: 768px) {
    .section.footer #to-top {
        position: initial;
        transform:none
    }
}

.section.footer .section-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction:column
}

.section.footer .section-content h3 {
    color: #53654f;
    font-weight: 600;
    font-size: 2rem;
    margin-bottom:5rem
}

@media screen and (min-width: 785px) {
    .section.footer .section-content h3 {
        font-size:2.5rem
    }
}

@media screen and (max-width: 510px) {
    .section.footer .section-content h3 {
        text-align: center;
        font-size:1.6rem
    }
}

.section.footer .section-title {
    margin-bottom:5rem
}

@media screen and (min-width: 768px) {
    .section.footer .section-title {
        max-width: 60%;
        font-size:5rem
    }
}

@media screen and (min-width: 926px) {
    .section.footer .section-title {
        font-size:6rem
    }
}

@media screen and (min-width: 1024px) {
    .section.footer .section-title {
        font-size:6rem
    }
}

@media screen and (min-width: 1250px) {
    .section.footer .section-title {
        font-size:7rem
    }
}

.section.footer .btn {
    background-color: transparent;
    padding: 3rem 6rem;
    margin-bottom: 6rem;
    white-space:nowrap
}


@media screen and (max-width: 600px) {
    .section.footer .circle-with-leaves {
        width: 200px;
        height: 200px;
        font-size:2.5rem
    }
}

.section.footer .footer-text {
    font-size: 2rem;
    margin-bottom:5rem;
    text-align: center;
}

@media screen and (max-width: 500px) {
    .section.footer .footer-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom:0
    }
}

.section.footer .footer-text span {
    margin:0 2rem
}

@media screen and (max-width: 500px) {
    .section.footer .footer-text span {
        margin-top:2rem
    }
}

.section.footer .impressumDaten {
    background: none;
    border: 0;
    cursor: pointer;
    color:inherit
}

#toTop {
    display: none;
    position: fixed;
    z-index: 9;
    bottom: 5px;
    right: 5px;
    width: 64px;
    height: 64px;
    background-image: url('assets/img/up.png');
    background-repeat: no-repeat;
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

#toTop:hover {
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.alert-box {
    color:#fff;
    border-radius:10px;
    font-size:11px;
    padding:10px 6px 10px 66px;
    margin:0px;
}

.alert-box span {
    font-weight:bold;
    text-transform:uppercase;
}

.warning {
    background: url('assets/img/warning2.png') no-repeat;
    background-size: contain;
    border:1px solid #f2c779;
}

.coming-soon {
    height:100%
}

.coming-soon body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image:url(assets/img/Keyvisual.jpg)
}

.coming-soon h1 {
    padding: 5rem;
    font-size: 5rem;
    background-color: rgba(255, 255, 255, 0.8)
}