/*
=====================================================
 EF22 FRAMEWORK
 VARIABLES.CSS
 Version 2.6
=====================================================
*/

:root {

    /* ==========================================
       MARKENFARBEN
    ========================================== */

    --color-black: #0A0A0A;

    --color-anthracite: #151515;

    --color-white: #FFFFFF;

    --color-ef22-green: #6FBF73;

    --color-gold: #D4AF37;


    /* ==========================================
       ZUGKÖNIG
       Akzentfarbe der Zugkönig-Seite – darf mit
       jedem Königsjahr wechseln (siehe king.css)
    ========================================== */

    --color-king:
        var(--color-gold);


    /* ==========================================
       HINTERGRÜNDE
    ========================================== */

    --color-background-dark:
        var(--color-black);

    --color-background-medium:
        var(--color-anthracite);

    --color-background-light:
        var(--color-white);


    /* ==========================================
       TEXT AUF DUNKLEM HINTERGRUND
    ========================================== */

    --color-text-on-dark:
        var(--color-white);

    --color-text-muted-on-dark:
        rgba(255,255,255,.72);


    /* ==========================================
       TEXT AUF HELLEM HINTERGRUND
    ========================================== */

    --color-text-on-light:
        #222222;

    --color-text-muted-on-light:
        #666666;


    /* ==========================================
       AKZENT
    ========================================== */

    --color-primary:
        var(--color-ef22-green);

    --color-primary-dark:
        #579A5B;

    /* Grün für Text auf hellem Hintergrund
       (Kicker, Links). Das Markengrün ist auf Weiß
       zu hell zum Lesen (2,2 : 1); dieses Grün
       schafft 5,2 : 1 und erfüllt damit WCAG AA. */
    --color-primary-on-light:
        #3B7A3F;

    /* Grüner Rahmen für Karten (wie beim Hero) */
    --color-primary-border:
        rgba(111, 191, 115, .35);

    /* Grüne Hinterlegung: hell (Meldungen) und dunkel (Hover) */
    --color-primary-soft:
        rgba(111, 191, 115, .14);

    --color-primary-soft-dark:
        rgba(111, 191, 115, .10);


    /* ==========================================
       KOMPATIBILITÄT
    ========================================== */

    --color-background:
        var(--color-background-dark);

    --color-surface:
        var(--color-background-medium);

    --color-text:
        var(--color-text-on-dark);

    --color-text-light:
        var(--color-text-muted-on-dark);

    --color-text-muted:
        var(--color-text-muted-on-dark);


    /* ==========================================
       RAHMEN
    ========================================== */

    --color-border:
        rgba(255,255,255,.08);

    --color-border-strong:
        rgba(255,255,255,.16);

    /* Trennlinie im Footer */
    --color-white-12:
        rgba(255,255,255,.12);

    /* Abdunklung hinter dem geöffneten Burger-Menü */
    --color-black-45:
        rgba(0, 0, 0, .45);

    /* Eingabefelder auf hellem Hintergrund */
    --color-input-border:
        #C8C8C8;

    /* Schachbrett hinter Logo-Vorschauen (zeigt Transparenz) */
    --color-preview-dark:
        #2A2A2A;

    --color-preview-light:
        #343434;


    /* ==========================================
       STATUSFARBEN
    ========================================== */

    --color-success: #3CA55C;

    --color-warning: #F2A900;

    --color-error: #D64545;

    --color-error-soft:
        rgba(214, 69, 69, .12);


    /* ==========================================
       TYPOGRAFIE
    ========================================== */

    --font-family:
        "Inter",
        system-ui,
        sans-serif;

    --font-size-xs: .75rem;

    --font-size-sm: .875rem;

    --font-size-md: 1rem;

    --font-size-lg: 1.125rem;

    --font-size-xl: 1.5rem;

    --font-size-2xl: 2rem;

    --font-size-3xl: 3rem;

    --line-height: 1.6;


    /* ==========================================
       ABSTÄNDE
    ========================================== */

    --space-xs: .25rem;

    --space-sm: .5rem;

    --space-md: 1rem;

    --space-lg: 1.5rem;

    --space-xl: 2rem;

    --space-2xl: 3rem;

    --space-3xl: 5rem;


    /* ==========================================
       RADIUS
    ========================================== */

    --radius-sm: .5rem;

    --radius-md: .75rem;

    --radius-lg: 1rem;

    --radius-xl: 1.5rem;


    /* ==========================================
       SCHATTEN
    ========================================== */

    --shadow-sm:
        0 2px 6px rgba(0,0,0,.18);

    --shadow-md:
        0 6px 20px rgba(0,0,0,.25);

    --shadow-lg:
        0 12px 36px rgba(0,0,0,.35);


    /* ==========================================
       LAYOUT
    ========================================== */

    --container-width: 1280px;

    /* Reine Textabschnitte am Desktop (framework.css) */
    --container-width-text: 760px;

    /* Höhe des großen und des kompakten Headers.
       header.js misst beim Laden nach und
       überschreibt die Werte; diese hier gelten,
       bis das passiert ist. */
    --header-height: 150px;

    --header-height-compact: 64px;

    --header-background:
        rgba(10,10,10,.92);

    --header-shadow:
        var(--shadow-sm);

    --header-blur: 14px;

    --section-spacing: 6rem;


    /* ==========================================
       ANIMATION
    ========================================== */

    --transition-fast: .2s ease;

    --transition-normal: .35s ease;


    /* ==========================================
       Z-INDEX
    ========================================== */

    --z-header: 100;

    --z-modal: 1000;

}