/*
 * Design-Tokens: alle Farben, Abstände und Schriften zentral an einer Stelle.
 * Vereinsfarben Grün-Weiß. Weiße Schrift auf --farbe-gruen (≈3,8:1) nur für große Schrift/Flächen/Buttons;
 * für Fließtext und Links auf Weiß --farbe-gruen-dunkel (≈5,5:1).
 */
:root {
    --farbe-gruen: #009900;
    --farbe-gruen-dunkel: #007a00;
    --farbe-gruen-hell: #e8f5e8;
    --farbe-weiss: #ffffff;
    --farbe-text: #1f2a1f;
    --farbe-text-leise: #4d5a4d;
    --farbe-linie: #d5ddd5;
    --farbe-hintergrund: #f6f8f6;
    /* Fehlermeldungen in Formularen (≈6,6:1 auf Weiß) */
    --farbe-fehler: #b00020;
    --farbe-fehler-hell: #fdecee;

    --schrift-basis: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --schrift-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    /* Mobile-first: auf dem Smartphone kleiner (12/16/18 px), ab 48em die vollen Größen (siehe unten).
       Kleinere Texte rechnen mit calc(Faktor * var(--schriftgroesse-basis)) und schrumpfen so mit. */
    --schriftgroesse-basis: 0.75rem;
    --schriftgroesse-gross: 1rem;
    --schriftgroesse-titel: 1.125rem;
    --zeilenhoehe: 1.6;

    /* Abstände passend zur kleineren Schrift auf dem Smartphone, ab 48em größer (siehe unten) */
    --abstand-xs: 0.25rem;
    --abstand-s: 0.375rem;
    --abstand-m: 0.75rem;
    --abstand-l: 1rem;
    --abstand-xl: 1.5rem;

    --radius: 0.5rem;
    --inhaltsbreite: 64rem;
    --rand-seite: 1rem;
}

@media (min-width: 48em) {
    :root {
        --schriftgroesse-basis: 1rem;
        --schriftgroesse-gross: 1.25rem;
        --schriftgroesse-titel: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);

        --abstand-s: 0.5rem;
        --abstand-m: 1rem;
        --abstand-l: 1.5rem;
        --abstand-xl: 2.5rem;
    }
}