:root {
    /* Colors */
    --white: #FFFFFF;

    --green-300: #C4CEC4;
    --green-400: #9BAB9A;

    --grey-100: #F5F7F5;
    --grey-200: #EBEEEB;
    --grey-300: #E1E6E1;
    --grey-400: #C3CDC2;
    --grey-500: #7C897B;
    --grey-600: #5D675C;
    --grey-700: #3E443E;
    --grey-800: #2F332E;
    --grey-900: #1F221F;

    --yellow-400: #FFD814;
    --yellow-500: #B6CB00;

    --red: #FEDCDB;
    --green: #D8EEDF;
    --yellow: #FDF1C9;
    --blue: #D8E5F7;
    --orange: #FFA723;

    --text-body: var(--grey-800);
    --text-text-headline: var(--grey-900);

    /* === Typography === */
    --font-family: 'Arial, sans-serif'; /* Schriftart */
    --line-height: 1.5; /* Zeilenhöhe */

    --font-size-xs-14: 14px;
    --font-size-s-16: 16px;
    --font-size-m-18: 16px;
    --font-size-l-20: 18px;
    --font-size-xl-24: 22px;
    --font-size-xxl-32: 24px;
    --font-size-3xl-40: 28px;
    --font-size-4xl-48: 32px;
    --font-size-5xl-56: 36px;

    --line-height-xs-14: 18px;
    --line-height-s-16: 24px;
    --line-height-m-18: 26px;
    --line-height-l-20: 24px;
    --line-height-xl-24: 32px;
    --line-height-xxl-32: 36px;
    --line-height-3xl-40: 40px;
    --line-height-4xl-48: 44px;
    --line-height-5xl-56: 48px;

    /* Größen wie im Layout angegeben
    --para: 20px;
    --h1: 56px;
    --h2: 48px;
    --h3: 40px;
    --h4: 32px;
    --h5: 24px;
    --h6: 20px;

    --lhpara: 32px;
    --lh1: 72px;
    --lh2: 64px;
    --lh3: 56px;
    --lh4: 44px;
    --lh5: 36px;
    --lh6: 32px;
    */

    /* Angepasste größen um alte Inhalte zu optimieren */
    --para: 20px;
    --h1: 56px;
    --h2: 40px;
    --h3: 32px;
    --h4: 24px;
    --h5: 20px;

    --lhpara: 32px;
    --lh1: 72px;
    --lh2: 56px;
    --lh3: 44px;
    --lh4: 36px;
    --lh5: 32px;

}

@media (min-width: 768px) {
    :root {
        --font-size-xs-14: 14px;
        --font-size-s-16: 16px;
        --font-size-m-18: 18px;
        --font-size-l-20: 20px;
        --font-size-xl-24: 24px;
        --font-size-xxl-32: 32px;
        --font-size-3xl-40: 40px;
        --font-size-4xl-48: 48px;
        --font-size-5xl-56: 56px;

        --line-height-xs-14: 18px;
        --line-height-s-16: 24px;
        --line-height-m-18: 26px;
        --line-height-l-20: 32px;
        --line-height-xl-24: 36px;
        --line-height-xxl-32: 44px;
        --line-height-3xl-40: 56px;
        --line-height-4xl-48: 64px;
        --line-height-5xl-56: 72px;
    }
}