/*
    Freiwillige Feuerwehr Neuendorf - Farb- und Formvariablen
    Alle Farben liegen als CSS-Variablen vor, damit das Farbschema
    spaeter zentral ausgetauscht werden kann, ohne die Layout-Regeln
    in style.css anzufassen.
*/

:root {
    /* Markenfarben - helles Grunddesign, Rot nur als Akzent */
    --color-bg: #ffffff;               /* Seiten-/Header-Hintergrund */
    --color-bg-soft: #f6f5f1;          /* Off-White Flaechenfarbe fuer Karten/Sections */
    --color-bg-dark: #0a0a0a;          /* nur fuer dunkle Bildunterlegungen (Fotoscrim) */
    --color-accent: #ff0101;           /* Feuerwehr-Rot: Akzente, Buttons, Links, CTA-Flaeche */
    --color-accent-dark: #c60000;      /* Rot fuer Hover/aktive Zustaende */
    --color-text: #010101;             /* Fliesstext */
    --color-text-muted: #55555a;       /* sekundaerer Text */
    --color-text-on-accent: #ffffff;   /* Text auf rotem Grund */
    --color-text-on-photo: #ffffff;    /* Text ueber Fotos (mit Scrim) */
    --color-border: rgba(10, 10, 10, 0.12);

    /* Typografie */
    --font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    --fw-light: 300;               /* Hauptnavigation */
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    /* Schriftgroessen - feste Skala, damit gleiche Elemente auf allen
       Seiten gleich gross sind:
       --fs-display  nur Titel der Startseite
       --fs-h2       Seitentitel ("Aktive.", "Einsätze.") und Ueberschriften ("das sind WIR.")
       --fs-h3       Unterueberschriften (rote Zwischentitel, Fahrzeugnamen, Jahreszahlen)
       --fs-body     Fliesstext, Tabellen, Beitragstitel, Bildunterschriften
       --fs-small    nur Footer und Datum in Kacheln */
    --fs-display: clamp(2.5rem, 5vw, 3.9375rem);
    --fs-h2: clamp(2.1875rem, 4.5vw, 3.4375rem);
    --fs-h3: clamp(1.5625rem, 3vw, 2.1875rem);
    --fs-body: 18px;
    --fs-small: 14px;

    /* Radien / Schatten - Designvorgabe: Fotos und Flaechen immer mit
       90-Grad-Ecken und ohne Schatten */
    --radius-sm: 0;
    --radius-md: 0;
    --radius-lg: 0;
    --shadow-sm: none;
    --shadow-md: none;

    /* Abstaende */
    --space-section: 40px;
    --space-block: 80px;   /* Weissraum um Zahlenbloecke u. ae. */

    /* Layout */
    --container-width: 1188px;   /* 1140px Inhalt + 2x24px Padding wie im Prototyp */
    --header-height: 80px;
    --transition: 180ms ease-in;
}

/*
    CCN Runtime (Kalender, Termine, News, Buttons der Widgets)
    Die Runtime liest ihre Optik aus --ccn-* Variablen (Liste: docs/Styling-Schnittstelle.md
    im Webservice-Repo). Hier nur auf unser Farbschema gemappt, keine Selektoren auf Runtime-Markup.
    Die Klassen .ccn-button, .ccn-button--primary, .ccn-segmented usw. koennen auch direkt
    im Seiten-HTML verwendet werden.
    Die Farben der Kalendereintraege kommen aus dem Backend (Farbe der Organisation).
*/
:root {
    --ccn-accent: var(--color-accent);
    --ccn-accent-text: var(--color-text-on-accent);
    --ccn-surface: var(--color-bg);
    --ccn-surface-alt: var(--color-bg-soft);
    --ccn-border: #e6e4de;
    --ccn-muted: var(--color-text-muted);
    --ccn-radius: 6px;
    --ccn-touch: 2.75rem;
    --ccn-focus: var(--color-accent);

    /* Buttons: Kontur in Textfarbe, rote Primaer-Buttons */
    --ccn-button-bg: transparent;
    --ccn-button-hover-bg: var(--color-bg-soft);
    --ccn-button-border: var(--color-text);
    --ccn-button-border-width: 2px;
    --ccn-button-radius: 10px;
    --ccn-button-padding: 0.5rem 1.25rem;
    --ccn-button-font-weight: var(--fw-semibold);
    --ccn-button-primary-hover-bg: var(--color-accent-dark);

    /* runde Pfeil-Buttons (Monat vor/zurueck) */
    --ccn-icon-button-radius: 50%;
    --ccn-icon-button-border: var(--color-accent);
    --ccn-icon-button-text: var(--color-accent);

    /* "Heute" */
    --ccn-link-color: var(--color-accent);
    --ccn-link-font-weight: var(--fw-semibold);

    /* Umschalter Monat/Liste */
    --ccn-segmented-bg: var(--color-bg-soft);
    --ccn-segmented-padding: 4px;
    --ccn-segmented-radius: 12px;
    --ccn-segmented-button-bg: transparent;
    --ccn-segmented-button-border: transparent;
    --ccn-segmented-button-radius: 8px;
    --ccn-segmented-active-bg: var(--color-text);
    --ccn-segmented-active-text: var(--color-text-on-accent);

    /* Zeitraum-Kopf (Kalender "September 2026", Einsaetze "2024") und Linie darunter */
    --ccn-period-size: clamp(1.75rem, 3vw, 2.25rem);
    --ccn-period-weight: var(--fw-black);
    --ccn-period-color: var(--color-accent);
    --ccn-divider: 3px solid var(--color-text);

    /* Filter-Chips (Alle / Brand / Hilfeleistung) und Stichwort-Badges */
    --ccn-chip-radius: 10px;
    --ccn-chip-border: #dcdad3;
    --ccn-badge-radius: 6px;

    /* Einsaetze */
    --ccn-incident-header-gap: 20px;
    --ccn-incident-facts-radius: 10px;
    --ccn-incident-separator: 1px solid #e6e4de;

    /* Kalender */
    --ccn-calendar-toolbar-gap: 20px;
    --ccn-calendar-sheet-gap: 32px;
    --ccn-calendar-radius: 12px;
    --ccn-calendar-cell-height: 8rem;
    --ccn-calendar-weekend-bg: #fbfaf7;
    --ccn-calendar-outside-bg: var(--color-bg-soft);
    --ccn-calendar-outside-text: #b0aea8;
    --ccn-calendar-item-radius: 6px;
    --ccn-calendar-item-size: 0.75em;
    --ccn-calendar-watermark-display: none;
}