/* ── Schicht 1: Design-Tokens ─────────────────────────────────────────
   Dark-Editorial-Palette · Ingo Melzer Coaching
   Kein Farb-Hardcode in style.css oder pages/*.css — nur diese Vars.
   ─────────────────────────────────────────────────────────────────── */

:root {
  /* ── Farben: Dark-Default ──────────────────────────────────────── */
  --color-bg:           #1B1B1E;     /* tiefer Graphit — Haupt-Hintergrund */
  --color-surface:      #252529;     /* Karten, Sektions-Hintergrund */
  --color-surface-2:    #2E2E33;     /* zweite Oberfläche, Nav-Dropdown */
  --color-paper:        #F3EDE0;     /* Warm-Weiß — Testimonials, Zitat-Sektionen */
  --color-text:         #E8E2D4;     /* Haupt-Text auf Dunkel (warm, nicht kalt) */
  --color-text-soft:    #9A948A;     /* sekundärer Text, Labels, Metainfo */
  --color-text-muted:   #918B83;     /* deaktiviert, Placeholder — 5.1:1 auf Body, 4.5:1 im Footer
                                        (war #635E59 = 2.4:1 im Footer, WCAG-Verstoß, gemessen 2026-08-30) */
  --color-text-on-paper:#1B1B1E;     /* Text auf Paper-Hintergrund */

  /* ── Farben: Akzente ───────────────────────────────────────────── */
  --color-accent:       #D4732A;     /* IMC-Orange (gedämpft, nicht grell) */
  --color-accent-hover: #E0823A;     /* Orange heller für Hover */
  --color-accent-2:     #B8906A;     /* Kupfer/Bronze — Premium-Details */
  --color-accent-3:     #4A6B8A;     /* Blau-Grau — Jugendhilfe-Justiz-Tinting */

  /* ── Zielgruppen-Tinting (überschreibbar per Body-Klasse) ──────── */
  --color-accent-page:  var(--color-accent);

  /* ── Border ────────────────────────────────────────────────────── */
  --color-border:       rgba(255, 255, 255, 0.08);
  --color-border-soft:  rgba(255, 255, 255, 0.04);
  /* Formularfelder brauchen >=3:1 gegen den Grund (WCAG 1.4.11), sonst ist nicht
     erkennbar, wo ein Eingabefeld anfaengt. Das Hairline-Border-Token reicht dafuer nicht. */
  --color-border-field: rgba(255, 255, 255, 0.38);   /* 3.6:1 auf #1B1B1E */

  /* ── Typografie ─────────────────────────────────────────────────── */
  --font-display: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;

  /* ── Shadows ────────────────────────────────────────────────────── */
  --shadow-small:   0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-medium:  0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-large:   0 20px 50px rgba(0, 0, 0, 0.6);
  --shadow-card:    0 4px 20px rgba(0, 0, 0, 0.35);
  --shadow-accent:  0 8px 24px rgba(212, 115, 42, 0.25);

  /* ── Border-Radius ──────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 100px;

  /* ── Transitions ────────────────────────────────────────────────── */
  /* Polish 2026-06-11: weiches Deceleration-Easing statt generischem ease —
     wirkt global auf alle Hover/State-Transitions (Karten, Buttons, Nav). */
  --ease-soft:         cubic-bezier(0.32, 0.72, 0, 1);
  --transition-fast:   0.2s var(--ease-soft);
  --transition-medium: 0.4s var(--ease-soft);
  --transition-slow:   0.7s var(--ease-soft);

  /* ── Layout ─────────────────────────────────────────────────────── */
  /* Header-Inhaltshöhe (ohne Notch). Wird in style.css per Media-Query auf
     88px (≤1100) bzw. 80px (≤640) reduziert — --nav-h und .header-inner
     folgen automatisch, weil beide an --header-h hängen. Groß (104px), weil
     das Emblem-Logo prominent ist (Design-Entscheidung „Emblem-Pur" 2026-06-13). */
  --header-h:      120px;
  /* iOS-Härtung: Notch-Inset fließt in die Nav-Höhe ein — alle
     calc(var(--nav-h) + …)-Paddings stimmen damit automatisch.
     env() ist 0 auf Nicht-iOS → kein Desktop-Regressionsrisiko. */
  --nav-h:         calc(var(--header-h) + env(safe-area-inset-top, 0px));
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 5vw, 3rem);

  /* ── Animations: Blob-Drift ─────────────────────────────────────── */
  --blob-color-1: rgba(212, 115, 42, 0.12);
  --blob-color-2: rgba(184, 144, 106, 0.08);

  /* ── Typo-Skala (modular) — von css/pages/*.css genutzt ─────────── */
  --text-xs:    0.75rem;                          /* Eyebrows, Mikro-Labels */
  --text-sm:    0.875rem;                         /* Meta, Card-Untertext */
  --text-base:  1rem;                             /* Fließtext-Bezug */
  --text-lg:    1.15rem;                          /* Lead-Absätze */
  --text-xl:    clamp(1.3rem, 1.8vw, 1.6rem);     /* Card-Titel, Subheads */

  /* ── Section-Spacing ────────────────────────────────────────────── */
  --section-gap: clamp(2.75rem, 5.5vw, 5rem);     /* vertikaler Sektions-Abstand — Desktop ~70px (Ramon 2026-06-11); Handy-Min 44px statt 56px (Ramon 2026-06-12: Blöcke auf dem Handy zu weit auseinander) */

  /* ── Transition-Alias (von pages/*.css genutzt) ─────────────────── */
  --transition-base: var(--transition-medium);

  /* ── Layout-Alias (fängt Tippfehler --container-padding ab) ─────── */
  --container-padding: var(--container-pad);

  /* ── Akzent-3 als Text auf Dunkel (WCAG-AA, heller als Border-Ton) ─ */
  --color-accent-3-text: #7FA3C7;
}

/* ── Hell-Theme (CSS-only Alternative, nicht aktiv per Default) ───── */
[data-theme="hell"] {
  --color-bg:           #F8F5EF;
  --color-surface:      #FFFFFF;
  --color-surface-2:    #F0EBE1;
  --color-paper:        #1B1B1E;
  --color-text:         #1B1B1E;
  --color-text-soft:    #6B6560;
  --color-text-muted:   #A09A93;
  --color-text-on-paper:#F8F5EF;
  --color-border:       rgba(0, 0, 0, 0.1);
  --color-border-soft:  rgba(0, 0, 0, 0.05);
  --shadow-card:        0 4px 20px rgba(0, 0, 0, 0.08);
  --blob-color-1: rgba(212, 115, 42, 0.08);
  --blob-color-2: rgba(184, 144, 106, 0.06);
}

/* ── Heller Editorial (Default-Theme) ─────────────────────────────────
   Hell-Ableitung des Dark-Editorial: Creme-Papier, warmer dunkler Text,
   Orange als gesetzter Akzent. Ändert Anmutung (Schatten weich+warm,
   Radien flacher, Papier-Textur) — nicht nur Farben.
   WCAG-AA selbst nachgerechnet: Funktions-Orange #A8521A = 4.8:1 auf Creme
   bzw. 5.4:1 weiß-auf-Orange (Spec-Behauptung 4.6:1 für #C2611F war zu hoch
   = real 3.7:1, daher hier dunkler). #C2611F nur dekorativ/Hover.
   ─────────────────────────────────────────────────────────────────── */
[data-theme="hell-editorial"] {
  /* ── Farben ──────────────────────────────────────────────────────── */
  --color-bg:           #F6F1E7;     /* Creme-Papier */
  --color-surface:      #FFFFFF;     /* Karten, helle Sektionen */
  --color-surface-2:    #F0E9DB;     /* zweite Oberfläche, Chips, Dropdown */
  --color-paper:        #22201C;     /* invertierte Akzent-Sektion (Zitate) */
  --color-text:         #22201C;     /* Haupt-Text (14.4:1 auf Creme) */
  --color-text-soft:    #6A625A;     /* sekundär (5.3:1 Creme / 6.0:1 Weiß) */
  --color-text-muted:   #6B6259;     /* Meta, Trenner — 5.3:1 auf Creme (gemessen).
                                        War #7A7068 = 4.29:1, knapp unter AA. */
  --color-text-on-paper:#F3EDE0;     /* heller Text auf invertierter Sektion */

  /* ── Akzente (AA-sicher als Text & als Button-Grund) ─────────────── */
  --color-accent:       #A8521A;     /* Funktions-Orange: Text, Links, Buttons */
  --color-accent-hover: #C2611F;     /* wärmeres Orange für Hover/Groß-Dekor */
  --color-accent-2:     #7E5836;     /* Bronze, text-sicher (5.6:1 Creme) */
  --color-accent-3:     #3B5775;     /* Blau-Grau Jugendhilfe (6.6:1 Creme) */
  --color-accent-3-text:#3B5775;     /* gleiche Familie, da auf Hell text-sicher */

  /* ── Border (warme Hairlines statt weiße) ────────────────────────── */
  --color-border:       rgba(34, 32, 28, 0.12);
  --color-border-soft:  rgba(34, 32, 28, 0.06);
  --color-border-field: #8C847A;                     /* 3.3:1 auf Creme, 3.7:1 auf Weiss */

  /* ── Schatten: weich, warm getönt, diffus (kein hartes Schwarz) ──── */
  --shadow-small:   0 1px 2px rgba(34, 32, 28, 0.05);
  --shadow-medium:  0 4px 16px -6px rgba(34, 32, 28, 0.12);
  --shadow-large:   0 18px 40px -16px rgba(34, 32, 28, 0.20), 0 2px 8px -4px rgba(34, 32, 28, 0.08);
  --shadow-card:    0 1px 3px rgba(34, 32, 28, 0.05), 0 8px 24px -14px rgba(34, 32, 28, 0.16);
  --shadow-accent:  0 12px 28px -10px rgba(168, 82, 26, 0.30);

  /* ── Radien: editorial, etwas flacher als Dunkel ─────────────────── */
  --radius-lg:   16px;
  --radius-xl:   24px;

  /* ── Blob-Drift stark gedämpft (Tageslicht) ──────────────────────── */
  --blob-color-1: rgba(194, 97, 31, 0.10);
  --blob-color-2: rgba(154, 110, 69, 0.07);
}

/* ── Zielgruppen-Tinting ────────────────────────────────────────────── */
.page-fuer-fachschulen {
  --color-accent-page: var(--color-accent);
}

.page-fuer-jugendhilfe-justiz {
  --color-accent-page: var(--color-accent-3);
  --blob-color-1: rgba(74, 107, 138, 0.12);
}

.page-fuer-fuehrungskraefte {
  --color-accent-page: var(--color-accent-2);
  --blob-color-1: rgba(184, 144, 106, 0.15);
}

/* Light: Zielgruppen-Blobs zusätzlich dämpfen (Tageslicht) */
[data-theme="hell-editorial"] .page-fuer-fachschulen        { --blob-color-1: rgba(194, 97, 31, 0.10); }
[data-theme="hell-editorial"] .page-fuer-jugendhilfe-justiz { --blob-color-1: rgba(59, 87, 117, 0.10); }
[data-theme="hell-editorial"] .page-fuer-fuehrungskraefte   { --blob-color-1: rgba(126, 88, 54, 0.10); }

/* ── Keyframes (global verfügbar) ───────────────────────────────────── */
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}