/* ==========================================================================
   Design-Token (Farben, Maße, Schatten, Schrift) als CSS-Variablen.

   Vorlage: Karls Mockup 2.0. Maßgeblich ist das ERGEBNIS aus dem ersten ":root"-Block (1.0)
   und dem überschreibenden "2.0"-Block. Die Namen sind englisch (Projektregel); hinter
   jedem Wert steht Karls ursprünglicher Name, damit man beides nebeneinanderlegen kann.

   Regeln (CLAUDE.md, "Farben und Lesbarkeit"):
   - Farben stehen NUR hier. Bausteine in site.css benutzen ausschließlich diese Variablen,
     nie feste Farbwerte. So lässt sich später der dunkle Satz einfach danebenstellen.
   - Lesbarkeit nach WCAG AA: Fließtext mindestens 4,5 : 1, große Schrift und Bedienelemente
     mindestens 3 : 1. Wo Karls Wert als Text zu blass war, steht unten ein eigener Text-Wert
     (Abweichung vom Mockup, siehe Dokumente/2-Entscheidungen/E030 und E027).
   ========================================================================== */

:root {
  /* Heller Satz = Grundwerte. Der dunkle Satz steht weiter unten (zweimal, siehe dort) und überschreibt sie.
     "color-scheme" sagt dem Browser, ob er Formularelemente, Rollbalken und Auswahlfelder hell oder dunkel zeichnen soll. */
  color-scheme: light;

  /* ---------- Marke: Orange (Karl: --o ...) ---------- */
  --color-orange: #e9670f;        /* --o    Leitfarbe; nur für Rahmen, Linien, Flächen – nicht für Text */
  --color-orange-dark: #b84e09;   /* --o-d  Flächen von Knöpfen (weißer Text darauf: 5,08 : 1) */
  --color-orange-text: #b34b09;   /* NEU    Orange als TEXT/Link; Karls --o-d war auf Sand nur 4,33 : 1 */
  --color-orange-deep: #8f3d07;   /* --o-h  Hover und aktiver Zustand */
  --color-orange-light: #fdebdd;  /* --o-l  helle Fläche */
  --color-orange-mid: #f7c9a6;    /* --o-m  mittlere Fläche */

  /* ---------- Neutraltöne (Karl 2.0: --s ... --s0, bläulich-warm) ---------- */
  --color-ink: #1d2b33;           /* --s und --s9  Überschriften, dunkelster Text */
  --color-neutral-8: #2b3a42;     /* --s8 */
  --color-neutral-7: #3d4b53;     /* --s7 */
  --color-neutral-6: #4a5a63;     /* --s6 */
  --color-neutral-5: #5d6b73;     /* --s5  leiser Text (auf Papier 5,11 : 1) */
  --color-neutral-4: #8d9aa1;     /* --s4  NUR Dekoration (Linien, Platzhalter) – als Text nur 2,69 : 1 */
  --color-neutral-4-text: #636c71;/* NEU    s4 als TEXT, nachgedunkelt auf 4,5 : 1 (E027) */
  --color-control-border: #848f97;/* NEU    Rahmen von Eingabefeldern: --s4 nachgedunkelt auf 3,30 : 1 gegen Weiß und 3,07 : 1 gegen Papier (Karls #8d9aa1: 2,89 und 2,69; E032) */
  --color-neutral-3: #dcd3c5;     /* --s3 */
  --color-neutral-2: #ece4d7;     /* --s2 */
  --color-neutral-1: #f6f0e6;     /* --s1 */
  --color-neutral-0: #fbf6ee;     /* --s0  gleich wie Papier */

  /* ---------- Flächen ---------- */
  --color-white: #ffffff;         /* Karl: festes #fff */
  --color-paper: #fbf6ee;         /* --papier  Seitenhintergrund */
  --color-sand: #f4ecdf;          /* --sand    Fußzeile, ruhige Flächen */
  --color-header-bg: rgba(251, 246, 238, 0.94); /* Kopfzeile, leicht durchscheinend */
  --color-hero-glow-1: #fde3c4;   /* warmer Schimmer oben rechts im Hero */
  --color-hero-glow-2: #fdf1d6;   /* warmer Schimmer unten links im Hero */

  /* ---------- Akzente ---------- */
  --color-sky: #2a6f9b;           /* --himmel */
  --color-sky-light: #e8f1f7;     /* --himmel-l */
  --color-sun: #f6c453;           /* --sonne  Textmarker */
  --color-sun-light: #fdf4da;     /* --sonne-l */
  --color-green: #1f6b45;         /* --gruen */
  --color-green-light: #e9f4ee;   /* --gruen-l */
  --color-green-bright: #2f8a5f;  /* --gruen-f  Häkchen-Symbole */
  --color-red: #b3261e;           /* --rot */
  --color-red-light: #fdeceb;     /* --rot-l */

  /* ---------- Schatten (Karl: feste rgba-Werte im Baustein) ---------- */
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.06), 0 8px 24px rgba(17, 17, 17, 0.06); /* --schatten */
  --shadow-image: 0 18px 40px rgba(29, 43, 51, 0.14);
  --shadow-badge: 0 14px 34px rgba(29, 43, 51, 0.16);

  /* ---------- Maße ---------- */
  --radius: 12px;                 /* --r */
  --radius-s: 8px;                /* --r-s */
  --radius-l: 18px;               /* --r-l */
  --radius-xl: 28px;              /* --r-xl */
  --radius-pill: 999px;
  --container-width: 1180px;
  --header-height: 68px;

  /* ---------- Schrift: nur Systemschriften, nichts von fremden Servern (Karl: --f) ---------- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   Dunkler Satz (Entscheidungen E028 und E037; Entwurf aus Claude Design, von Frank freigegeben).

   So wird umgeschaltet:
   - Ohne Wahl des Besuchers folgt die Seite der Geräteeinstellung (prefers-color-scheme).
   - Der Umschalter im Seitenkopf setzt data-theme="dark" bzw. data-theme="light" auf <html> (js/theme.js)
     und gewinnt immer gegen die Geräteeinstellung.
   - Der dunkle Satz steht deshalb ZWEIMAL, mit identischem Inhalt: einmal für die Wahl "dunkel" und einmal für die
     Geräteeinstellung ohne Wahl "hell". CSS kennt keine gemeinsame Bezeichnung für beide Fälle. Ein Test prüft, dass beide
     Blöcke gleich sind und dass jeder helle Farb-Token ein dunkles Gegenstück hat.

   Wichtig für alle, die Token benutzen:
   - Die Namen beschreiben die ROLLE im hellen Satz. "--color-white" heißt "helle Fläche" (Karte, Eingabefeld, Reiter-Inhalt)
     und ist im dunklen Satz eine dunkle Fläche. Weißer TEXT oder weißes Logo nehmen NIE --color-white:
       --color-on-accent  Schrift auf kräftigen Flächen (orange Knopf, rote Fläche, Tinten-Fläche); dunkel im dunklen Satz
       --color-pure-white immer Weiß (Logo "WIR", QR-Code-Rahmen)
   - Kontraste (WCAG AA) sind aus diesen Werten gerechnet; die Tabelle steht in Dokumente/2-Entscheidungen/E037.
   ========================================================================== */

:root[data-theme="dark"] {
  color-scheme: dark;

  /* Marke: Orange. Als Fläche (Knopf) das helle Orange mit dunkler Schrift, als Text ein noch hellerer Ton. */
  --color-orange: #f08a3c;
  --color-orange-dark: #f08a3c;
  --color-orange-text: #f4a066;
  --color-orange-deep: #f8b485;
  --color-orange-light: #2b2119;
  --color-orange-mid: #6b3d1c;

  /* Neutraltöne: die Treppe läuft umgekehrt (ink = hellster Text, neutral-0 = Seitengrund). */
  --color-ink: #f3ede3;
  --color-neutral-8: #e6e0d6;
  --color-neutral-7: #d2d9dd;
  --color-neutral-6: #c3ccd1;
  --color-neutral-5: #b4bec4;
  --color-neutral-4: #6d7d88;
  --color-neutral-4-text: #a9b4ba;
  --color-control-border: #7f909b;
  --color-neutral-3: #4a5a64;
  --color-neutral-2: #2e3b44;
  --color-neutral-1: #243038;
  --color-neutral-0: #161d22;

  /* Flächen */
  --color-white: #1f2a31;
  --color-band-white: #1b2429;
  --color-paper: #161d22;
  --color-sand: #11171b;
  --color-header-bg: rgba(22, 29, 34, 0.92);
  --color-hero-glow-1: rgba(233, 103, 15, 0.22);
  --color-hero-glow-2: rgba(233, 103, 15, 0.08);

  /* Akzente */
  --color-sky: #7cb8e0;
  --color-sky-light: #1a252c;
  --color-sun: #f6c453;
  --color-sun-light: #3a3220;
  --color-green: #6fcf9b;
  --color-green-light: #1c2e27;
  --color-green-bright: #6fcf9b;
  --color-red: #ff9a92;
  --color-red-light: #3b2224;

  /* Schatten: auf dunklem Grund sieht man sie kaum, deshalb tragen die Karten-Schatten einen feinen hellen Rand */
  --shadow-card: 0 0 0 1px #2e3b44, 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-image: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-badge: 0 14px 34px rgba(0, 0, 0, 0.5);

  /* Ergänzungen der Baustein-Darstellung */
  --color-orange-bright: #f0973a;
  --color-amber: #e9b44a;
  --color-white-95: rgba(31, 42, 49, 0.95);
  --color-white-translucent: rgba(22, 29, 34, 0.14);
  --color-banner-band: #11171b;
  --color-share-whatsapp: #25d366;
  --color-share-telegram: #3db4ee;
  --color-share-facebook: #5b9bf5;
  --color-share-linkedin: #4d9bea;
  --color-share-xing: #2fb3b5;
  --color-share-bluesky: #3b9bff;
  --color-share-reddit: #ff6a33;
  --shadow-card-sky: 0 0 0 1px #2e3b44, 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-soft: 0 0 0 1px #2e3b44, 0 8px 22px rgba(0, 0, 0, 0.3);
  --shadow-panel: 0 0 0 1px #2e3b44, 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-step: 0 0 0 1px #6b3d1c, 0 8px 22px rgba(240, 138, 60, 0.12);
  --shadow-banner: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-portrait: 0 8px 20px rgba(0, 0, 0, 0.45);

  /* Neu (E037): Schrift auf kräftigen Flächen, immer-weiß, Textmarker, feiner Rand um Karten ohne Schatten */
  --color-on-accent: #161d22;
  --color-pure-white: #ffffff;
  --color-mark: rgba(246, 196, 83, 0.32);
  --color-card-edge: #2e3b44;
  --color-logo: #e9670f;
  --color-promise-ink: #f6e6b8;
  --color-promise-link: #f6c453;
  --color-pill-bg: #2a353d;
  --color-pill-ink: #e9dcc8;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-orange: #f08a3c;
    --color-orange-dark: #f08a3c;
    --color-orange-text: #f4a066;
    --color-orange-deep: #f8b485;
    --color-orange-light: #2b2119;
    --color-orange-mid: #6b3d1c;

    --color-ink: #f3ede3;
    --color-neutral-8: #e6e0d6;
    --color-neutral-7: #d2d9dd;
    --color-neutral-6: #c3ccd1;
    --color-neutral-5: #b4bec4;
    --color-neutral-4: #6d7d88;
    --color-neutral-4-text: #a9b4ba;
    --color-control-border: #7f909b;
    --color-neutral-3: #4a5a64;
    --color-neutral-2: #2e3b44;
    --color-neutral-1: #243038;
    --color-neutral-0: #161d22;

    --color-white: #1f2a31;
    --color-band-white: #1b2429;
    --color-paper: #161d22;
    --color-sand: #11171b;
    --color-header-bg: rgba(22, 29, 34, 0.92);
    --color-hero-glow-1: rgba(233, 103, 15, 0.22);
    --color-hero-glow-2: rgba(233, 103, 15, 0.08);

    --color-sky: #7cb8e0;
    --color-sky-light: #1a252c;
    --color-sun: #f6c453;
    --color-sun-light: #3a3220;
    --color-green: #6fcf9b;
    --color-green-light: #1c2e27;
    --color-green-bright: #6fcf9b;
    --color-red: #ff9a92;
    --color-red-light: #3b2224;

    --shadow-card: 0 0 0 1px #2e3b44, 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-image: 0 18px 40px rgba(0, 0, 0, 0.45);
    --shadow-badge: 0 14px 34px rgba(0, 0, 0, 0.5);

    --color-orange-bright: #f0973a;
    --color-amber: #e9b44a;
    --color-white-95: rgba(31, 42, 49, 0.95);
    --color-white-translucent: rgba(22, 29, 34, 0.14);
    --color-banner-band: #11171b;
    --color-share-whatsapp: #25d366;
    --color-share-telegram: #3db4ee;
    --color-share-facebook: #5b9bf5;
    --color-share-linkedin: #4d9bea;
    --color-share-xing: #2fb3b5;
    --color-share-bluesky: #3b9bff;
    --color-share-reddit: #ff6a33;
    --shadow-card-sky: 0 0 0 1px #2e3b44, 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-soft: 0 0 0 1px #2e3b44, 0 8px 22px rgba(0, 0, 0, 0.3);
    --shadow-panel: 0 0 0 1px #2e3b44, 0 12px 32px rgba(0, 0, 0, 0.35);
    --shadow-step: 0 0 0 1px #6b3d1c, 0 8px 22px rgba(240, 138, 60, 0.12);
    --shadow-banner: 0 20px 50px rgba(0, 0, 0, 0.5);
    --shadow-portrait: 0 8px 20px rgba(0, 0, 0, 0.45);

    --color-on-accent: #161d22;
    --color-pure-white: #ffffff;
    --color-mark: rgba(246, 196, 83, 0.32);
    --color-card-edge: #2e3b44;
    --color-logo: #e9670f;
    --color-promise-ink: #f6e6b8;
    --color-promise-link: #f6c453;
    --color-pill-bg: #2a353d;
    --color-pill-ink: #e9dcc8;
  }
}

/* ==========================================================================
   Ergänzung der Baustein-Darstellung (blocks.css), angehängt von der Inhaltsverwaltung.
   Nur NEUE Werte; kein bestehender Wert ist verändert. Namen englisch, hinter jedem Wert steht, wofür er gebraucht wird.
   Kontraste sind aus den echten Werten gerechnet (WCAG, E027).
   ========================================================================== */

:root {
  /* Zeitleiste: Farbverlauf der Etappenpunkte (Karl: feste Werte #f0973a und #e9b44a; nur Linien und Ränder, nie Text) */
  --color-orange-bright: #f0973a;
  --color-amber: #e9b44a;

  /* Weiße Karte über einem Foto (Karl: rgba(255,255,255,.95)) und Aufhellung der Einladungskarte "Und du?" (Karl: .12) */
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-translucent: rgba(255, 255, 255, 0.14);

  /* Banner: Farbfläche links und rechts neben dem Foto, wenn das Foto (nur 720 px breit) nicht die ganze Breite füllt.
     Karls warmer heller Ton (Sand, Frank 25.10.2026: keine dunkle Fläche); der Text steht auf der weißen Karte (Tinte auf Weiß
     über 14 : 1), der Bildnachweis auf seiner weißen Marke. */
  --color-banner-band: #f4ecdf;   /* = --color-sand */

  /* Marken-Farben der Punkte in der Teilen-Leiste (nur Zierde neben dem Namen des Netzwerks; Karl: TEILEN) */
  --color-share-whatsapp: #25d366;
  --color-share-telegram: #229ed9;
  --color-share-facebook: #1877f2;
  --color-share-linkedin: #0a66c2;
  --color-share-xing: #006567;
  --color-share-bluesky: #0085ff;
  --color-share-reddit: #ff4500;

  /* Schatten der Bausteine (Karl: feste Werte im jeweiligen Baustein) */
  --shadow-card-sky: 0 8px 24px rgba(42, 111, 155, 0.08);   /* Karten (.lp-karte) */
  --shadow-soft: 0 8px 22px rgba(29, 43, 51, 0.07);         /* Kacheln (.r-karte) */
  --shadow-panel: 0 12px 32px rgba(29, 43, 51, 0.08);       /* Reiter-Inhalt (.lp-panel) */
  --shadow-step: 0 8px 22px rgba(233, 103, 15, 0.12);       /* erster Etappen-Schritt */
  --shadow-banner: 0 20px 50px rgba(29, 43, 51, 0.18);      /* Karte im Banner */
  --shadow-portrait: 0 8px 20px rgba(29, 43, 51, 0.15);     /* Porträtfoto */

  /* ---------- Neu mit dem Dunkelmodus (E037); im hellen Satz ändert sich dadurch nichts ---------- */

  /* Hintergrund der Abschnitte "weiß". Bisher war das --color-white; im dunklen Satz ist eine Karte (--color-white) heller als
     der Abschnitt, auf dem sie liegt, damit man sie noch sieht. */
  --color-band-white: #ffffff;

  /* Schrift auf kräftigen Flächen (Knopf in Orange-dunkel, rote Fläche, Tinten-Fläche, Verlauf der Initialen). Hell: Weiß. */
  --color-on-accent: #ffffff;

  /* Immer Weiß, in beiden Sätzen: das Logo-Kreis-Zeichen "WIR" (Ausnahme von der Kontrastregel) und der QR-Code-Rahmen
     (eine Authenticator-App liest den Code nur auf hellem Grund). */
  --color-pure-white: #ffffff;

  /* Textmarker unter dem hervorgehobenen Wort (Karl: Sonne #f6c453). Im dunklen Satz halbtransparent, sonst läge helle Schrift auf Gelb. */
  --color-mark: #f6c453;

  /* Feiner Rand um Karten ohne Schatten (Säulen, Personen, Wege …). Hell unsichtbar, dunkel eine Linie. */
  --color-card-edge: transparent;

  /* Der orange Kreis im Logo: Karls Orange, in beiden Farbmodi unverändert (Logo, Ausnahme von der Kontrastregel). */
  --color-logo: #e9670f;

  /* Versprechen-Kasten und Aufwand-Marken ("5 Minuten"): im hellen Satz die Werte, die diese Stellen bisher aus anderen Token nahmen
     (Tinte, Orange-Text, Sonne-hell, Neutral-8); der Entwurf setzt für den dunklen Satz eigene Werte. */
  --color-promise-ink: #1d2b33;
  --color-promise-link: #b34b09;
  --color-pill-bg: #fdf4da;
  --color-pill-ink: #2b3a42;
}