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

:root {
    /* ### Farben ### */
    /* 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:0,0,0;                                           /* Label: Basisfarbe, u. a. für Fließtext */
    --rgb_color_value_action:227,0,11;                                      /* Label: Action-Farbe, u. a. für Links */
    --rgb_color_value_background_light_01:245,245,245;                      /* Label: Hintergrundfarbe "hell", u. a. für Footer- / Boxen-Hintergrund */
    --rgb_color_value_border:208,208,208;                                   /* 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 */

    /* ### Schriftgrößen ### */
    /* 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.375rem, 1.2813rem + 0.4688vw, 1.75rem);           /* 22-28px 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>) */

    /* ### Schriftart ### */
    --font-family-base: 'Source Sans 3', Tahoma, Geneva, sans-serif;                         /* Label: Schriftart */

    /* ### Zeilenhöhen ### */
    --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.3em;                                                  /* 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 */

    /* ### Sonstiges ### */
    --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: 16px;                                                  /* Label: Rahmenradius */
    --border-radius-s: 8px;                                                 /* Label: Rahmenradius klein */
}


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

/*
normal-normal, normal-italic, bold-normal, bold-italic
Don’t link to SVG versions of the fonts. Obviously this way older iOS devices (and old versions of Chrome and Opera) won’t render your nice fonts, but Safari for iOS won’t crash either.
*/

/* source-sans-3-regular - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/source-sans-3-v19-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 400;
    src: url('../Fonts/source-sans-3-v19-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600 - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: normal;
    font-weight: 700;
    src: url('../Fonts/source-sans-3-v19-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* source-sans-3-600italic - latin */
@font-face {
    font-display: swap;
    font-family: 'Source Sans 3';
    font-style: italic;
    font-weight: 700;
    src: url('../Fonts/source-sans-3-v19-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* ##################################################################### */
/* #### Custom CSS ##################################################### */

.r2_menupages-tiles .item{ border-radius: var(--border-radius); overflow:hidden; }