* {padding: 0; margin: 0; box-sizing: border-box;}
html {font-size: clamp(0px, 1.07vw, 20px); line-height: 1.4; height: 100%; background: white; scroll-behavior: smooth;}
body {font-family: 'Argumentum'; color: #2E462F; font-size: 1rem;}
a {color: #2E462F;}
.container {margin: 0 auto; max-width: 75rem; width: 100%; padding: 0 clamp(0.75rem, 3vw, 1.5rem); position: relative;}
p {margin-bottom: 1.9em;}
p:last-child {margin-bottom: 0;}
img {display: block;}
p img {max-width: 100%;}
strong, b {font-family: 'Argumentum Bold'; font-weight: normal; font-size: 102%;}

h1, h2 {font-family: 'Argumentum Bold'; font-weight: normal; font-size: 2.5rem; line-height: 1!important; margin-bottom: 2rem;}
.content.singlepost h2, h3 {font-family: 'Argumentum Medium'; font-weight: normal; font-size: 1.7rem; line-height: 1.1!important; margin-bottom: 1rem; color: #7DA754;}
h2 + h3 {position: relative; bottom: 1.1rem;}
h4 {font-family: 'Argumentum Bold'; font-weight: normal; font-size: 1.7rem; line-height: 1.1!important; margin-bottom: 0.8rem;}
.content.singlepost h2 {position: relative; top: 0.5rem; padding-top: 0.5rem; color: #2E462F;}

blockquote {font-family: 'Argumentum Medium'; font-size: 1.85rem; max-width: 30rem; line-height: 1.4!important;}
.anchor {position: absolute; height: 4.9rem; margin-top: -4.9rem;}

.header {position: sticky; top: 0; background: white; z-index: 2; min-height: 5rem;}
.header .container {display: flex; justify-content: flex-end; font-size: 0.95rem; align-items: center;}
.header .container a {text-decoration: none;}
.header .container .h1 {position: absolute; left: clamp(0.75rem, 3vw, 1.5rem); top: 0;}
.header .container .h1 span {display: none;}
.header .container .h1 img {position: absolute; width: auto; height: 11rem; transition: all 0.1s ease-in-out; top: 0;}
.header .container ul {display: flex; text-transform: uppercase; gap: 2.4rem;}
.header .container ul li {list-style: none; padding: 1.8rem 0;}
.header .container ul li a {display: block; border-bottom: 0.1rem solid transparent; transition: border-color 0.15s ease-in-out;}
.header .container ul li a:hover {border-color: #7DA754;}
.header .container > a {display: none; user-select: none;}

body.smallheader .header {box-shadow: 0rem 0rem 0.5rem 0rem rgba(0,0,0,0.2);}
body.smallheader .header .container .h1 img {height: 4rem; width: auto; top: 0.5rem;}

.banner {height: 37rem; background: silver url('') center 65% / cover no-repeat;}

.main .content .container {line-height: 1.85;}
.main .content .container p {max-width: 37rem; margin-left: auto; margin-right: auto;}
.main .content .container p a {color: #7DA754; text-decoration: none;}

.main .content.hasimage .container {display: flex; flex-direction: row-reverse;}
.main .content.hasimage .container > div {flex: 1;}
.main .content.hasimage .container > div:nth-last-child(2) img {position: absolute; left: 50%; top: 0; height: 100%; width: 50vw; object-fit: cover;}
.main .content.hasimage .container > div:nth-last-child(1) > * {padding-right: 7rem;}
.main .content.hasimage:nth-child(odd) .container {flex-direction: row;}
.main .content.hasimage:nth-child(odd) .container > div:nth-last-child(2) img {left: auto; right: 50%;}
.main .content.hasimage:nth-child(odd) .container > div:nth-last-child(1) > * {padding-right: 0; padding-left: 7rem;}

.main .content:nth-child(1) {background: white;}
.main .content:nth-child(2) {background: #2E462F; color: white;}
.main .content:nth-child(3) {background: #7DA754; color: white;}
.main .content:nth-child(4) {background: white; text-align: center;}
.main .content:nth-child(5) {background: white;}
.main .content:nth-child(7) {background: #EC9F43; color: white;}
.main .content:nth-child(8) {background: #6D391C; color: white;}
.main .content:nth-child(9) {background: #2E462F; color: white;}
.main .content:nth-child(10) {background: white; text-align: center;}
.main .content:nth-child(10) h2 {margin-bottom: 1.6rem;}

.main .content:nth-child(4) .container {padding-top: 6rem; padding-bottom: 1rem;}
.main .content:nth-child(7) .container,
.main .content:nth-child(8) .container,
.main .content:nth-child(9) .container {font-size: 1.5rem; line-height: 1.6; min-height: 30rem;}
.main .content .container {padding-top: 5rem; padding-bottom: 6rem;}

.main .content:nth-child(1) .container > div {columns: 2; column-gap: 2.5rem;}
.main .content:nth-child(1) .container > div > * {break-inside: avoid-column;}

.main .content:nth-child(2) .container::after,
.main .content:nth-child(3) .container::after,
.main .content:nth-child(7) .container::after,
.main .content:nth-child(8) .container::after,
.main .content:nth-child(9) .container::after {
    content: "";
    width: 11.5rem;
    height: 100%;
    right: 50%;
    bottom: 0;
    position: absolute;
    background: url(/img/shapes/Vorm_4.svg) left bottom / 100% auto no-repeat;
    transform: scaleX(-1);
}
.main .content:nth-child(3) .container::after {background: url(/img/shapes/Vorm_1.svg) left bottom / 100% auto no-repeat; transform: translateX(100%); width: 7rem;}
.main .content:nth-child(7) .container::after {background: url(/img/shapes/Vorm_2.svg) left bottom / 100% auto no-repeat; width: 13rem; transform: translateX(100%);}
.main .content:nth-child(8) .container::after {background: url(/img/shapes/Vorm_3.svg) right bottom / 100% auto no-repeat;  width: 7rem; transform: none;}
.main .content:nth-child(9) .container::after {transform: translateX(100%);}

ul.features {display: flex; gap: 2rem; font-size: 1.1rem;}
ul.features li {list-style: none; position: relative;}
ul.features li img {display: inline-block; width: 10rem; margin: 2rem 0 1rem;}

ul.news {display: flex; gap: 1.5rem; font-size: 1.1rem;}
ul.news li {list-style: none; position: relative;}
ul.news li img {width: 100%; aspect-ratio: 1.5; object-fit: cover; display: block; margin-bottom: 1rem;}
ul.news li a {text-decoration: none; font-family: 'Argumentum Bold'; font-size: 1.4rem; transition: color 0.15s ease-in-out; border-bottom: 0.1rem solid transparent;}
ul.news li a::after {
    content:"";
    display: inline-block;
    height: 2rem;
    width: 2.75rem;
    background: url(/img/next.svg) center center / auto 100% no-repeat;
    vertical-align: middle;
    position: absolute;
    margin-top: 0.25rem;
}
ul.news li a:hover {border-color: #7DA754;}
ul.news li p {margin-bottom: 1rem;}
div.date {color: #B5B5B5; font-size: 0.95rem; margin-bottom: 0.15rem;}

.content.singlepost .container {max-width: 45rem; margin: 0 auto; padding-bottom: 8rem;}
.content.singlepost .container p {max-width: 100%;}
.content.singlepost .container ul,
.content.singlepost .container ol {margin-left: 1.5rem; margin-bottom: 1.9em;}
.content.singlepost div.date {font-size: 1.2rem;}
.content.singlepost h1 {margin-bottom: 1.75rem;}
.content.singlepost .container .nav {columns: 1; display: flex; padding-top: 1rem; justify-content: space-between; position: relative; top: 3rem;}
.content.singlepost .container .nav > a {text-decoration: none; font-size: 1.4rem; font-family: 'Argumentum Bold'; transition: color 0.15s ease-in-out; line-height: 1.1;}
.content.singlepost .container .nav > a::before,
.content.singlepost .container .nav > a::after {
    content:"";
    display: inline-block;
    height: 2rem;
    width: 2.75rem;
    background: url(/img/next.svg) center center / auto 100% no-repeat;
    vertical-align: middle;
    position: relative;
    margin-top: -0.35rem;
}
.content.singlepost .container .nav > a:first-child::after,
.content.singlepost .container .nav > a::before {content: none;}
.content.singlepost .container .nav > a:first-child::before {
    content:"";
    background: url(/img/prev.svg) center center / auto 100% no-repeat;
}
.content.singlepost .container .nav > a span {display: inline-block; border-bottom: 0.1rem solid transparent;}
.content.singlepost .container .nav > a:hover span {border-color: #7DA754;}
.content.singlepost .container .nav > a:nth-child(2) {text-align: center;}
.content.singlepost .container .nav > a:nth-child(2)::after {content: none;}
.content.singlepost .container .nav > a:last-child {text-align: right;}
.content.singlepost .container .nav > a.disabled {opacity: 0.25; pointer-events: none;}


.footer {background: #2E462F; color: white; padding-top: 5rem; padding-bottom: 5rem;}
.footer .container a {color: white; text-decoration: none;}
.footer .container ul {display: flex; flex-direction: column; gap: 1rem;}
.footer .container ul li {list-style: none;}
.footer .container ul li a {display: block;}
.footer .container > div {display: flex; justify-content: space-between; font-size: 1.2rem; max-width: 60rem;}
.footer .container > div > div:nth-child(1) {display: flex; justify-content: space-between; flex-direction: column;}
.footer .container > div > div:nth-child(1) div {font-family: 'Argumentum Bold';}
.footer .container > div > div:nth-child(1) img {width: 9.5rem; height: auto;}
.footer .container > div > div:nth-child(1) div a {border-bottom: 1px solid rgba(255,255,255,0.5);}
.footer .container > div > div:nth-child(2) ul li a { text-transform: uppercase;}
.footer .container h3 {font-family: 'Argumentum Bold'; color: white;}
.footer .container ul + h3 {margin-top: 2.8rem;}

.afterfooter {background: #7DA754; color: white; padding-top: 1.2rem; padding-bottom: 1.2rem; font-family: 'Argumentum Bold'; font-size: 0.95rem;}
.afterfooter .container {display: flex; justify-content: space-between;}
.afterfooter .container a {color: white; text-decoration: none;}

@media (max-width: 800px) {
    html {font-size: clamp(0px, 4.25vw,20px);}
    blockquote {margin-bottom: 3rem;}
    .main .content {text-align: left!important;}
    .main .content:nth-child(1) .container > div {columns: 1;}
    .main .content.hasimage .container {flex-direction: column!important;}
    .main .content.hasimage .container > div > * {padding-left: 0!important; padding-right: 0!important;}
    h2 {padding-right: 2rem;}
    .main .content.hasimage .container > div img {
        position: relative!important;
        left: 0!important;
        height: auto!important;
        width: calc(100% + 3rem)!important;
        max-width: calc(100% + 3rem)!important;
        right: 0!important;
        margin: -5rem -1.5rem 3rem;
    }
    .footer .container > div {flex-direction: column; gap: 5rem; font-size: 1rem;}
    .footer .container > div > div:nth-child(1) {gap: 3rem;}
    ul.features {flex-direction: column;}
    ul.features li {padding-bottom: 1rem;}
    ul.features li img {margin-top: 0;}
    .carousel {width: 100%!important;}
    .carousel ul li {min-width: 100%!important;}
    .main .carousel .container {margin-top: -9.4rem!important;}
    .header .container {display: block; padding: 0;}
    .header .container > a {
        display: block; 
        position: absolute; 
        right: 1rem; 
        top: 1.35rem;
        height: 2rem;
        width: 2rem;
        overflow: hidden;
        color: transparent;
        background: url(/img/menu.svg) center center / auto 1.75rem no-repeat;
    }
    body.showmenu .header .container > a {background: url(/img/close.svg) center center / auto 1.75rem no-repeat;}
    .page .banner {height: 15rem;}
    .header .container > ul {
        display: none;
        background: white;
        left: 0;
        width: 100%;
        padding: 5rem clamp(0.75rem, 3vw, 1.5rem) 2.5rem;
    }
    .header .container ul li {padding: 1.8rem 0 0;}
    .header .container > ul li a {display: inline-block; padding: 0;}
    body.showmenu .header .container > ul {display: block;}
    .page .header .container .h1 img,
    body.showmenu  .header .container .h1 img {height: 4rem; width: auto; top: 0.5rem;}
    .content.singlepost .container .nav {display: none;}
    .main .content:nth-child(2) .container::after,
    .main .content:nth-child(3) .container::after,
    .main .content:nth-child(7) .container::after,
    .main .content:nth-child(8) .container::after,
    .main .content:nth-child(9) .container::after {
        right: auto;
        left: 0;
        transform: scale(0.6);
        transform-origin: bottom left;
        opacity: 0.5;
    }
    .main .content:nth-child(8) .container::after {transform: translateX(60%) scale(-0.6, 0.6);}
}