/* ==========================================================================
   CSS-Variablen – Zentrale Farbdefinitionen
   Alle Farb- und Größenänderungen NUR hier vornehmen.
   Diese Datei wird als Erstes in layout-header.php, form-header.php
   und dem Backend-Layout geladen.
   ========================================================================== */

:root {
    /* =========================================================
     3 KERNFARBEN
     ========================================================= */

    --brand-yellow: #ffcc00; /* Primärfarbe Gelb        */
    --brand-dark: #333333; /* Primärfarbe Dunkelgrau  */
    --brand-orange: #e07000; /* Primärfarbe Orange      */

    /* Abgeleitete Töne (hover / aktiv) */
    --brand-yellow-dark: #e6b800;
    --brand-orange-dark: #c06000;

    /* =========================================================
     ALIASE – werden in allen CSS-Dateien verwendet
     ========================================================= */

    --color-primary: var(--brand-yellow);
    --color-primary-dark: var(--brand-yellow-dark);
    --color-accent: var(--brand-orange);
    --color-accent-dark: var(--brand-orange-dark);

    /* =========================================================
     TEXTFARBEN
     ========================================================= */

    --color-text: var(--brand-dark); /* = #333 */
    --color-text-mid: #444;
    --color-text-light: #555;
    --color-text-lighter: #666;
    --color-text-lightest: #999;
    --color-text-footer: #aaaaaa; /* Hellgrau für Footer-Text */

    --color-black: #000;
    --color-black-light: #222;
    --color-white: #fff;

    /* =========================================================
     HINTERGRUNDFARBEN
     ========================================================= */

    --color-bg-page: #f5f5f5;
    --color-bg-white: #ffffff;
    --color-bg-light: #fafafa;
    --color-bg-gray: #f9f9f9;
    --color-bg-highlight: #fffbf0;

    /* =========================================================
     TYP-FARBEN (Beratungsart)
     ========================================================= */

    --color-clinic: #4a0810;
    --color-clinic-light: #7a1020;
    --color-counseling: #0a4881;
    --color-counseling-light: #1068b1;
    --color-selfhelp: #0a8148;
    --color-selfhelp-light: #10b168;

    /* =========================================================
     BORDER & LINES
     ========================================================= */

    --color-border: #eee;
    --color-border-mid: #ddd;
    --color-border-dark: #bbb;

    /* =========================================================
     CARD-DESIGN (Schatten & Rundung)
     Einheitlich für Sidebar, Content-Cards und alle Blöcke.
     Buttons erhalten box-shadow: none.
     ========================================================= */

    --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    --card-radius: 6px;

    /* =========================================================
     SEITEN-H1 (einheitliche Überschrift auf allen Seiten)
     ========================================================= */

    --page-h1-size: var(--font-size-4xl); /* 28px */
    --page-h1-weight: bold;
    --page-h1-color: var(--color-black);

    /* =========================================================
     SCHRIFTART
     ========================================================= */

    --font-family: Arial, sans-serif;

    /* =========================================================
     SCHRIFTGRÖSSEN (Basis)
     Seitenspezifische Werte können in der jeweiligen CSS-Datei
     via eigenem :root {} überschrieben werden.
     ========================================================= */

    --font-size-xs: 14px;
    --font-size-sm: 15px;
    --font-size-base: 16px;
    --font-size-md: 17px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-4xl: 36px;
}