/* ##################################################################### */
/* #### Custom properties (variables) ################################## */

:root {
    /*###
    //# Colors
    ###*/
    /* these rgb_color_values can be used in rgb(...) and rgba(...) */
    --rgb_color_value_background_base:255,255,255;                          /* Label: Hintergrundfarbe der Website */
    --rgb_color_value_base:55,58,59;                                        /* Label: Basisfarbe, u. a. für Fließtext */
    --rgb_color_value_action:0,107,167;                                     /* Label: Action-Farbe, u. a. für Links */
    --rgb_color_value_accent:255,107,87;                                    /* Label: Akzentfarbe, u. a. für Buttons, oft identisch wie Action-Farbe */
    --rgb_color_value_background_light:235,235,235;                         /* Label: Hintergrundfarbe "hell", u. a. für Sektionen, Footer- / Boxen-Hintergrund */
    --rgb_color_value_background_dark:255,107,87;                           /* Label: Hintergrundfarbe "dunkel", u. a. Sektionen */
    --rgb_color_value_border:200,200,200;                                   /* Label: Rahmenfarbe */
    /* --rgb_color_value_success:34,139,34;                                    Label: Grün als Bestätigung/Erfolg, für zukünftige Features */
    --rgb_color_value_warning:165,5,5;                                      /* Label: Fehlermeldungen, i.d.R. rot */

    /*###
    //# Font sizes
    ###*/
    /* clamp von 320px bis 1600px ( https://clamp.font-size.app/ )             (Anwendungsbeispiel) */
    --font-size-5:clamp(2.1875rem, 1.9844rem + 1.0156vw, 3rem);             /* 35-48px Label: Schriftgröße 5 (H1) */
    --font-size-4:clamp(1.8125rem, 1.6563rem + 0.7813vw, 2.4375rem);        /* 29-39px Label: Schriftgröße 4 (H2) */
    --font-size-3:clamp(1.5rem, 1.3906rem + 0.5469vw, 1.9375rem);           /* 24-31px Label: Schriftgröße 3 (H3)*/
    --font-size-2:clamp(1.125rem, 1.0469rem + 0.3906vw, 1.4375rem);         /* 18-23px Label: Schriftgröße 2 (Intro, Blockquote) */
    --font-size-1:clamp(1.1875rem, 1.0938rem + 0.4688vw, 1.5625rem);        /* 19-25px Label: Schriftgröße 1 (H4) */
    --font-size-0:clamp(1rem, 0.9375rem + 0.3125vw, 1.25rem);               /* 16–20px Label: Schriftgröße 0 (Standard, Fließtext) */
    --font-size-s-1:clamp(0.875rem, 0.8281rem + 0.2344vw, 1.0625rem);       /* 14-17px Label: Schriftgröße S1 klein (z. B. Kacheln) */
    --font-size-s-2:clamp(0.8125rem, 0.7813rem + 0.1563vw, 0.9375rem);      /* 13-15px Label: Schriftgröße S2 kleiner (z. B. <small>) */

    /*###
    //# Font family
    ###*/
    --font-family-base: Manrope, Tahoma, Geneva, sans-serif;                         /* Label: Schriftart */

    /*###
    //# Line heights
    ###*/
    --line-height-5:1.15em;                                                 /* Label: Zeilenhöhe für Schriftgröße 5 */
    --line-height-4:1.15em;                                                 /* Label: Zeilenhöhe für Schriftgröße 4 */
    --line-height-3:1.3em;                                                  /* Label: Zeilenhöhe für Schriftgröße 3 */
    --line-height-2:1.4em;                                                  /* Label: Zeilenhöhe für Schriftgröße 2 */
    --line-height-1:1.4em;                                                  /* Label: Zeilenhöhe für Schriftgröße 1 */
    --line-height-0:1.4em;                                                  /* Label: Zeilenhöhe für Schriftgröße 0 */
    --line-height-s-1:1.4em;                                                /* Label: Zeilenhöhe für Schriftgröße S1 */
    --line-height-s-2:1.4em;                                                /* Label: Zeilenhöhe für Schriftgröße S2 */

    /*###
    //# Misc
    ###*/
    --gap: clamp(16px, calc(1.6667vw + 10.667px), 24px);                    /* von 16px @ 320px bis 24px @ 800px. Label: Abstände */
    --gap-s: 12px;                                                          /* Label: Abstände klein */
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);                           /* Label: Schatten */
    --box-shadow-strong: 0 4px 12px rgba(0, 0, 0, 0.25);                  /* Label: Schatten stark, u. a. für Button-Hover */
    --border-radius: 8px;                                                   /* Label: Rahmenradius */
    --border-radius-s: 4px;                                                 /* Label: Rahmenradius klein */
}


/* ##################################################################### */
/* #### Fonts ########################################################## */

    /* manrope-regular - latin */
    @font-face {
        font-display: swap;
        font-family: 'Manrope';
        font-style: normal;
        font-weight: 400;
        src: url('../Fonts/manrope-v20-latin-regular.woff2') format('woff2');
    }
    /* manrope-700 - latin */
    @font-face {
        font-display: swap;
        font-family: 'Manrope';
        font-style: normal;
        font-weight: 700;
        src: url('../Fonts/manrope-v20-latin-700.woff2') format('woff2');
    }