@font-face {
  font-family: "GrueneType Neue (400)";
  src: url("../media/fonts/GrueneTypeNeue-Regular.woff2") format('woff2');
}

:root {
    --black: black;
    --white: white;
    --neutral-500:#F7F4ED;
    --neutral-600:#F5F1E9;
    --neutral-700:#EFE8DB;
    --primary-50:#E5F3EB;
    --primary-200:#B2DCC4;
    --primary-300:#99D0B0;
    --primary-600:#008939;
    --primary-800: color-mix(in srgb, var(--primary-900) 72%, var(--primary-600));
    --primary-900:#003717;
    --secondary-50:#D5EEE6;
    --secondary-300:#8EBBAB;
    --secondary-600:#005538;
    --secondary-800: #003221;
    --secondary-900:#002216;
    --himmel-500: #3CB4E4;
    --himmel-600:#0BA1DD;
    --himmel-700: #0981B1;
    --sun-600:#FFF17A;
    --sun-600-dark:#008939;
    --grey-50:#F9FAFB;
    --grey-200: #E6ECEA;
    --grey-300:#D1DBDA;
    --grey-600:#4B5D63;
    --grey-700:#374951;
    --grey-900:#111E27;
    --grey-950:#031112;

    --foregroundcolor-one: var(--secondary-600);
    --foregroundcolor-two: var(--secondary-900);
    --foregroundcolor-three: var(--black);
    --foregroundcolor-four: var(--white);
    --headline-two: var(--secondary-600);
    --headline-two-accent: var(--white);
    --backgroundcolor-one: var(--grey-50);
    --backgroundcolor-two: var(--grey-200);
    --backgroundcolor-three: var(--white);
    --backgroundcolor-four: var(--grey-600);
    --backgroundcolor-fife: var(--secondary-50);
    --start-bg-color: var(--neutral-500);
    --impressum-fg-color: var(--foregroundcolor-one);
    --button-600: var(--sun-600);

    /* Site tokens (moved from style.css) */
    --content-width: min(var(--content-max-width), calc(100% - 6rem));
    --page-bg: var(--grey-200);
    --surface-bg: var(--grey-50);
    --text-main: #005538;
    --text-soft: #003221;
    --heading-color: #002216;
    --link-color: var(--himmel-700);
    --link-hover: var(--himmel-600);
    --nav-highlight: var(--sun-600);
    --btn-primary-bg: var(--sun-600);
    --btn-primary-bg-hover: var(--secondary-600);
    --btn-primary-text: var(--heading-color);
    --btn-primary-text-hover: var(--white);
    --btn-secondary-bg-hover: var(--grey-300);
    --btn-secondary-text-hover: var(--text-main);
    --footer-bg: var(--secondary-800);
    --footer-fg: var(--grey-50);
    --footer-soft: var(--grey-300);
    --line-color: rgba(36, 66, 55, 0.18);
    --line-strong: rgba(36, 66, 55, 0.3);
    --card-bg: var(--surface-bg);
    --card-shadow: 0 8px 20px rgba(36, 66, 55, 0.1);
    --goal-card-bg: #f1f4f2;
    --goal-card-border: color-mix(in srgb, var(--line-color) 85%, transparent);
    --goal-card-shadow-hover: 0 16px 28px rgba(36, 66, 55, 0.16);
    --goal-overlay-base: linear-gradient(180deg, rgba(6, 12, 10, 0.14) 18%, rgba(6, 12, 10, 0.8) 78%, rgba(6, 12, 10, 0.9) 100%);
    --goal-overlay-hover: linear-gradient(180deg, rgba(6, 12, 10, 0.24) 12%, rgba(6, 12, 10, 0.9) 72%, rgba(6, 12, 10, 0.96) 100%);
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-medium: 420ms;
    --motion-slow: 680ms;
    --motion-zoom: 980ms;
    --motion-zoom-ease: cubic-bezier(0.16, 0.84, 0.24, 1);
    --motion-zoom-soft: 1320ms;
    --motion-zoom-soft-ease: cubic-bezier(0.2, 0.88, 0.22, 1);
    --motion-card-reveal: 1100ms;
    --motion-card-fade: 920ms;
    --motion-card-ease: cubic-bezier(0.19, 0.9, 0.22, 1);
    --motion-card-delay: 120ms;
    --motion-reveal: 980ms;
    --motion-reveal-fade: 1120ms;
    --motion-reveal-move: 1380ms;
    --motion-reveal-ease: cubic-bezier(0.18, 0.88, 0.24, 1);
    --motion-reveal-start-y: 28px;
    --motion-reveal-start-scale: 0.985;
    --motion-reveal-start-blur: 2px;
    --theme-shift: 520ms;

    --grid-base: 10% 40% 40% 10%;
    --grid-wide-sides: 15% 35% 35% 15%;
    --grid-eaven: auto auto auto auto;

    --sunflower: url(../media/pics/sonnenblume.png);
    --sunflower-height: 6rem;
    --logo: url(../media/pics/logo.png);
    --logo-width: 20rem;
    --background-pic-one: url(../media/pics/n-suma-Y3DWIYwCItk-unsplash.jpg);
    --background-pic-two: url(../media/pics/kristina-kruzkova-V863C2zdx8E-unsplash.jpg);
    --start-img: var(--background-pic-one);
    --trenner-img: url(../media/pics/erik-karits-HlrASFACeF8-unsplash.jpg);
    --trenner-two-img: url(../media/pics/jogphotos-yyqEKaNXu7g-unsplash.jpg);
    --vorstand-pic: url(../media/pics/vorstand.jpeg);

    --outline-wdth: 0px;
    --outline: var(--outline-wdth) solid var(--secondary-900);
    --outline-offset: 0px;
    --brd-radius-small: 5px;
    --brd-radius-medium: 15px;
    --brd-radius-big: 30px;
    --brd-radius-circle: 50%;

    --darklight-width: 6rem;

    --fnt-primary: 'GrueneType Neue (400)', sans-serif;
    --fnt-primary-l: 1.875rem;
    --fnt-primary-xl: 2.5rem;
    --fnt-primary-xxl: 3.75rem;
    --fnt-primary-xxxl: 5rem;
    --fnt-primary-lineheight: 110%;

    --fnt-secondary-subheadline: 'PT Sans', sans-serif;
    --fnt-secondary-subheadline-wght: 700;
    --fnt-secondary-subheadline-lineheight: 130%;
    --fnt-secondary-size-xl: 1.875rem;
    --fnt-secondary-size-l: 1.5625rem;
    --fnt-secondary-size: 1.25rem;
    --fnt-secondary-size-m: 1.125rem;
    --fnt-secondary-size-s: 1rem;

    --fnt-secondary-body: 'PT Sans', sans-serif;
    --fnt-secondary-body-wght: 400;
    --fnt-secondary-body-bold: 700;
    --fnt-secondary-body-lineheight: 1.25rem;

    --animation-timing-short: 150ms;
    --animation-timing-medium: 300ms;
    --animation-timing-long: 600ms;
    --animation-timing-x-long: 1000ms;

    --padding-inline: 1rem;
    --padding-main: 10rem;
    --content-max-width: 1440px;

    --clip-path-parallel: polygon(4% 0, 100% 0%, 96% 100%, 0% 100%);
    --clip-path-quader: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);

    --offset-back-to-top: 1rem;
}
@media (max-width: 1023px) or (max-height: 719px) {
    :root {
        --offset-back-to-top: 25rem;
        --sunflower-height: 4rem;
    }
}
@media (max-width: 719px) or (max-height: 479px) {
    :root {
        --sunflower-height: 2.8rem;
    }
}
.darkmode {
        --foregroundcolor-one: var(--secondary-600);
        --foregroundcolor-two: var(--grey-300);
        --foregroundcolor-three: var(--white);
        --foregroundcolor-four: var(--black);
        --headline-two: var(--secondary-300);
        --headline-two-accent: var(--secondary-300);
        --backgroundcolor-one: var(--grey-900);
        --backgroundcolor-two: var(--grey-950);
        --backgroundcolor-three: var(--secondary-900);
        --backgroundcolor-four: var(--grey-300);
        --backgroundcolor-fife: var(--secondary-800);
        --start-bg-color: var(--secondary-800);
        --impressum-fg-color: var(--neutral-600);
        --button-600: var(--himmel-600);

        /* Site tokens (moved from style.css) */
        --page-bg: var(--secondary-800);
        --surface-bg: var(--secondary-600);
        --text-main: #d2dfd8;
        --text-soft: #b8cbc0;
        --heading-color: #e3ece7;
        --link-color: var(--himmel-600);
        --link-hover: var(--primary-600);
        --nav-highlight: var(--himmel-700);
        --btn-primary-bg: var(--himmel-600);
        --btn-primary-bg-hover: var(--grey-300);
        --btn-primary-text: var(--heading-color);
        --btn-primary-text-hover: var(--secondary-900);
        --btn-secondary-bg-hover: var(--primary-600);
        --btn-secondary-text-hover: var(--heading-color);
        --footer-bg: var(--secondary-900);
        --footer-fg: var(--grey-50);
        --footer-soft: var(--grey-300);
        --line-color: rgba(211, 223, 216, 0.22);
        --line-strong: rgba(211, 223, 216, 0.35);
        --card-bg: var(--surface-bg);
        --card-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
        --goal-card-bg: color-mix(in srgb, var(--surface-bg) 92%, #ffffff 8%);
        --goal-card-border: color-mix(in srgb, var(--line-color) 74%, rgba(255, 255, 255, 0.24));
        --goal-card-shadow-hover: 0 18px 30px rgba(0, 0, 0, 0.34);

        --start-img: var(--background-pic-two);
}