/* Weser Theme – CSS Custom Properties */
:root {
    /* Weserwaben Markenfarben */
    --color-dark:        #263864;   /* Weserwaben-Blau */
    --color-dark-80:     rgba(38, 56, 100, 0.8);
    --color-primary:     #6BE381;   /* Weserwaben-Grün */
    --color-primary-hover: #52c76b;
    --color-accent:      #6BE381;
    --color-green:       #6BE381;
    --color-stone:       #c4a882;
    --color-stone-light: #e8dfd3;
    --color-light:       #F0EDED;
    --color-white:       #ffffff;
    --color-text:        #000000;   /* Fließtext */
    --color-text-muted:  #6b7280;
    --color-border:      #ddd9d6;
    /* Kühles Grau für Trennlinien und Kastenrahmen im Blog. Eigenes Token,
       weil --color-border warm ist (Steinton) und im Blog-Entwurf vom
       2026-09-09 ausgemessen ein kühles Grau steht. */
    --color-rule:        #e5e7eb;
    --color-surface:     #F4F5F7;   /* Grauer Zeilen-/Kartengrund (Stellenliste, Downloads, FAQs) */
    /* Zwischentöne, die bisher als Hex durch die Block-Dateien liefen. */
    --color-dark-hover:  #1b2848;   /* Hover-Blau (Buttons, Halbbild-Teaser) */
    --color-surface-alt: #E9EBEF;   /* Graue Sliderfläche (Besonderheiten, Stellenliste) */

    /* ── FARBWELT ─────────────────────────────────────────────────────────
       Diese Tokens sind die EINZIGEN, die eine Farbwelt austauscht.
       Überschrieben werden sie in schemes.css über eine Klasse am <body>,
       gesetzt aus dem Seitenfeld „Farbwelt" (weser_body_classes()).
       Wer eine Farbe hart einträgt, hängt sie von der Farbwelt ab.

         --color-accent     Akzentquadrate, Marker, Linien
         --color-heading    Überschriften h1–h6 (siehe base.css)
         --color-cta        Fläche der gefüllten Buttons
         --color-cta-hover  dieselbe Fläche im Hover
         --color-cta-text   Schrift auf dieser Fläche (Halbbild-Teaser)
         --color-cta-text-accent  dieselbe Fläche, Akzentschrift (.btn-blue)
         --color-on-accent  Schrift auf der Akzentfläche selbst
         --color-tint       helle Vollfläche (Halbbild-Teaser „hell")
         --color-pagination Slider-Kästchen (Rahmen und aktive Füllung)

       Die Werte hier sind die Weserwaben-Welt und damit die Vorgabe.
       ──────────────────────────────────────────────────────────────────── */
    --color-heading:   var(--color-dark);
    /* Umriss der Icon-SVGs. Eigenes Token, weil DE RYCK hier als einzige
       Farbwelt ausschert: Im Entwurf sind die Umrisse dort SCHWARZ, nicht
       dunkelblau (vom User am 2026-08-25 so bestätigt). Ohne eigenes Token
       müsste dafür --color-heading wechseln – und damit auch jede
       Überschrift. */
    --color-icon-outline: var(--color-dark);
    --color-cta:       var(--color-dark);
    --color-cta-hover: var(--color-dark-hover);
    --color-cta-text:  var(--color-white);
    --color-cta-text-accent: var(--color-green);
    --color-on-accent: var(--color-dark);
    --color-tint:      #EAECF0;
    --color-pagination: var(--color-dark);

    /* Schriften: Literata (Headings) + Poppins (Body/Subline) */
    --font-heading: 'Literata', Georgia, 'Times New Roman', serif;
    --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fw-normal:  400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;

    /* Typo-Größen-Tokens (Desktop-Basiswerte; responsive in typography.css) */
    --fs-h1:   64px;
    --fs-h2:   40px;
    --fs-h3:   34px;
    --fs-h4:   18px;
    --fs-sl1:  42px;   /* Subline / Lead */
    --fs-copy-m:  20px;
    --fs-copy-s:  16px;
    --fs-copy-xs: 14px;

    /* Layout-Raster: Ränder (margin) + Gutter, per Breakpoint gesetzt.
       Default = Mobile; Tablet/Desktop überschreiben in base.css */
    --grid-margin: 16px;
    --grid-gutter: 16px;

    /* Deckel für randlose Blöcke (Halbbild-Teaser).
       Alle übrigen Blöcke stehen in .container-xl und hören bei 1728px auf.
       Der Halbbild-Teaser läuft dagegen bis an den Fensterrand – auf sehr
       breiten Schirmen wächst dadurch die Lücke zwischen Bild und Text
       unbegrenzt, weil der Text auf 550px gedeckelt in seiner Spalte
       zentriert sitzt. 2000px lässt 1920er-Schirme unverändert und fängt
       erst darüber an zu deckeln. Wer die Kante bündig zu allen anderen
       Blöcken haben will, trägt hier 1728px ein – es ist diese eine Zeile. */
    --width-bleed-max: 2000px;

    --space-xs:      8px;
    --space-sm:      16px;
    --space-md:      32px;
    --space-lg:      64px;
    --space-section: 80px;
    --space-section-sm: 48px;

    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;

    --transition: 0.2s ease;
    --shadow-card: 0 2px 16px rgba(0,0,0,0.08);
    --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.14);

    /* Höhe der Kopfzeile. Gemessen am gebauten Header UND an den
       Figma-Exporten – beide sagen 72 unterhalb von 1200px und 112 darüber.
       Gebraucht wird der Wert für die Hero-Höhen: Der Entwurf bemaßt den Hero
       einschließlich Kopfzeile, das Theme rechnet sie heraus. */
    --header-height: 72px;
}

@media (min-width: 1200px) {
    :root { --header-height: 112px; }
}