/* ====================================================================
   GSW Design System — CSS Custom Properties
   Source of truth: design tokens from "Gesamtschule Waldbröl - Startseite.html"
   ==================================================================== */

:root {
  /* ---- CI Farben ---- */
  --red:           #bc181a;
  --red-deep:      #8a0f11;
  --red-soft:      #fbeeee;
  --yellow:        #ecdb53;
  --yellow-pale:   #f9f9cf;
  --yellow-warm:   #fff4c4;
  --yellow-deep:   #5a4a00;

  /* ---- Neutrals (warme Cremeskala) ---- */
  --paper:         #fdfaea;
  --paper-2:       #f8f1d4;
  --neutral:       #f3ebcd;
  --warm:          #f7eece;
  --ink:           #16140d;
  --ink-2:         #3a3830;
  --ink-3:         #6b685c;
  --line:          #e2d9b8;
  --line-2:        #c9be97;

  /* ---- Schatten ---- */
  --sh-1:     0 1px 2px rgba(20,16,8,.06), 0 4px 10px -2px rgba(20,16,8,.10);
  --sh-2:     0 2px 6px rgba(20,16,8,.08), 0 18px 30px -10px rgba(20,16,8,.22);
  --sh-3:     0 4px 10px rgba(20,16,8,.10), 0 36px 56px -18px rgba(20,16,8,.32);
  --sh-sticky: 0 10px 28px -12px rgba(20,16,8,.22);
  --sh-focus-red: 0 0 0 3px rgba(188,24,26,.15); /* Eingabefeld-Fokus, 6x identisch verwendet */

  /* ---- Layout ---- */
  --maxw:    1400px;
  --gutter:  clamp(20px, 4vw, 56px);
  --r-sm:    4px;
  --r-btn:   6px;   /* de-facto Standard fuer Buttons, 2026-08-15 als Token nachgezogen */
  --r-md:    10px;
  --r-lg:    16px;
  --r-pill:  999px;

  /* ---- Abstands-Rhythmus (Unterseiten-Layout, 2026-08-17) ----
     Feste Skala statt frei gewaehlter Luecken zwischen Ueberschriften und
     Textabschnitten. Jedes Element traegt nur seinen eigenen oberen
     Abstand (nie zusaetzlich einen unteren) -- Ueberschriften sind die
     einzige Ausnahme mit festem unteren Abstand zum direkt folgenden
     Absatz. Verhindert unvorhersehbare Luecken durch Margin-Collapsing. */
  --space-h2:        64px;  /* vor H2 (neuer Abschnitt) */
  --space-h3:        48px;  /* vor H3/H4 */
  --space-heading-to-p: 16px;  /* Ueberschrift -> folgender Absatz */
  --space-p:         20px;  /* Absatz -> Absatz */
  --space-callout:   24px;  /* vor Zitat-/Info-Block */
  --space-li:        20px;  /* Listenelement -> Listenelement */

  /* ---- Typografie ---- */
  --serif: var(--gp-font--source-serif-4, "Source Serif 4"), "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans:  var(--gp-font--atkinson-hyperlegible-next, "Atkinson Hyperlegible Next"), "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Animation ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --transition-fast: 140ms var(--ease);
  --transition-base: 180ms var(--ease);
  --transition-slow: 280ms var(--ease);

  /* ---- Fokus-Ring ----
     --yellow (#ecdb53) allein hat auf --paper nur 1.35:1 Kontrast -- weit
     unter den fuer Fokusindikatoren geforderten 3:1 (WCAG 1.4.11). Eigenes
     Token, damit der Fokusring im Hellmodus dunkler (--yellow-deep, 8.3:1)
     und im Dunkelmodus weiterhin hell (--yellow, dort >11:1) sein kann. */
  --focus-ring-color: var(--yellow-deep);
  --focus-ring: 3px solid var(--focus-ring-color);

  color-scheme: light;

  /* ---- Text-Größen-Rampe ---- */
  --text-base: 17px;  /* Fließtext */
  --text-sm:   15px;  /* Teaser, Karten-Subtexte, sekundärer Fließtext */
  --text-xs:   13px;  /* Metas, Datum, Tags, Micro-Labels */
  --text-lg:   1.25rem;   /* Hervorgehobener Fließtext, Lead-Absätze */
  --text-xl:   2rem;      /* Kleine Überschriften (H3/H4) */
  --text-2xl:  2.65rem;   /* Mittlere Überschriften (H2) */
  --text-3xl:  3.35rem;   /* Hero-/Seitentitel (H1) */

  /* ----------------------------------------------------------------
     Kategorie- & Profilklassen-Farben — bewusste Erweiterung der
     CI-Kernpalette (current-state.md, 2026-08-15, Audit-Punkt 6).
     Zweck: visuelle Unterscheidung von Themen/Kategorien (Badges,
     site.css „.cat[data-cat]") und Profilklassen-Tabs (site.css
     „.gsw-profil-*"), wo zwei CI-Farben (Rot/Gelb) nicht ausreichen.
     Alle Werte gegen weissen Text kontraktgeprueft (>= 4.5:1 AA),
     Nachweis als Kommentar an der jeweiligen Verwendungsstelle.
  ---------------------------------------------------------------- */
  --cat-schulleben:      #1f7a4a;
  --cat-auszeichnungen:  #7a5500;
  --cat-veranstaltungen: #1a55a0;
  --cat-sport:           #6b2aa0;
  --cat-beratung:        #0a7a7a;
  --cat-mint:            #1a6040;
  --cat-aktuelles:       var(--ink-2); /* bewusst neutral statt eigene Farbe -- Rot bleibt Buttons/CTAs vorbehalten, current-state.md 2026-08-16 */

  --profil-bo-konzept:      #0369a1;
  --profil-bo-angebote:     #166534;
  --profil-bo-woche:        #6b21a8;
  --profil-bo-downloads:    #c2410c;
  --profil-mint-lernorte:    #047857; --profil-mint-lernorte-bg: #ecfdf5;
  --profil-mint-kurse:       #1e40af; --profil-mint-kurse-bg:    #eff6ff;
  --profil-mint-events:      #92400e; --profil-mint-events-bg:   #fffbeb;
  --profil-kulturscout:      #7c3aed; --profil-kulturscout-bg:   #f5f3ff;
  --profil-fit:              #15803d; --profil-fit-bg:           #f0fdf4;
  --profil-forscher:         #1d4ed8; --profil-forscher-bg:      #eff6ff;
  --profil-blaeser:          #b45309; --profil-blaeser-bg:       #fffbeb;
  --profil-abt-i:            #0369a1; --profil-abt-i-bg:         #f0f9ff; /* #0284c7 ergab nur 3.9:1 gegen --paper statt 4.5:1 (WCAG 1.4.3) */
  --profil-abt-ii:           #4338ca; --profil-abt-ii-bg:        #eef2ff;
  --profil-oberstufe:        #be123c; --profil-oberstufe-bg:     #fff1f2;
}

/* ===== Dark Mode ===== */
body.dark {
  --focus-ring-color: var(--yellow); /* im Hellmodus zu dunkel (--yellow-deep) fuer dunklen Hintergrund */
  --red:         #e94143;
  --red-deep:    #f4a0a2;
  --red-soft:    #2a1718;
  --yellow:      #ecdb53;
  --yellow-pale: #2a2618;
  --yellow-warm: #3a3320;
  --yellow-deep: #5a4a00;

  --paper:   #15130c;
  --paper-2: #1c1a12;
  --neutral: #201d14;
  --warm:    #25221a;
  --ink:     #f4f1e3;
  --ink-2:   #d4cfb9;
  --ink-3:   #9a9582;
  --line:    #2c2920;
  --line-2:  #443f32;

  --sh-1:     0 1px 2px rgba(0,0,0,.5), 0 4px 10px -2px rgba(0,0,0,.45);
  --sh-2:     0 2px 4px rgba(0,0,0,.55), 0 18px 32px -10px rgba(0,0,0,.6);
  --sh-3:     0 4px 8px rgba(0,0,0,.6), 0 36px 56px -18px rgba(0,0,0,.72);
  --sh-sticky: 0 10px 28px -12px rgba(0,0,0,.6);

  /* ---- Profilklassen-Farben (aufgehellt fuer Dunkel-Hintergrund) ---- */
  --profil-bo-konzept:    #38bdf8;
  --profil-bo-angebote:   #4ade80;
  --profil-bo-woche:      #c4b5fd;
  --profil-bo-downloads:  #fb923c;
  --profil-mint-lernorte: #34d399;
  --profil-mint-kurse:    #93c5fd;
  --profil-mint-events:   #fcd34d;
  --profil-kulturscout:   #a78bfa;
  --profil-fit:           #4ade80;
  --profil-forscher:      #60a5fa;
  --profil-blaeser:       #fbbf24;
  --profil-abt-i:         #38bdf8;
  --profil-abt-ii:        #818cf8;
  --profil-oberstufe:     #fb7185;

  color-scheme: dark;
}

body.dark img:not(.no-dim) {
  filter: brightness(.92) saturate(.95);
}

/* ===== Hoher Kontrast ===== */
body.hc {
  --paper:       #fff;
  --paper-2:     #fff;
  --neutral:     #fff;
  --warm:        #fff;
  --yellow-pale: #fff8d6;
  --ink:         #000;
  --ink-2:       #000;
  --ink-3:       #1a1a1a;
  --line:        #000;
  --line-2:      #000;
  --red:         #9b0000;
  --red-deep:    #7a0000;
  --sh-1:        none;
  --sh-2:        none;
  --sh-3:        none;
  --sh-sticky:   0 0 0 2px #000;
}

/* ===== Grosse Schrift ("Schrift +") =====
   Bislang komplett wirkungslos: JS setzte body.lg korrekt (Klasse,
   aria-pressed, localStorage), aber es gab dafuer ueberhaupt keine
   CSS-Regel (current-state.md 2026-08-18). Zwei Teile noetig, weil die
   Text-Groessen-Rampe oben gemischt ist: --text-lg/-xl/-2xl/-3xl sind
   bereits rem-basiert und wachsen automatisch mit der Root-Schriftgroesse
   mit; --text-base/-sm/-xs sind feste px-Werte und muessen deshalb
   zusaetzlich explizit ueberschrieben werden, sonst bliebe Fliesstext
   (der haeufigste Fall) unveraendert klein. html.lg statt body.lg fuer
   die Root-Schriftgroesse, weil rem sich immer auf <html> bezieht, nicht
   auf <body> -- site.js setzt die Klasse deshalb auf beide Elemente. */
html.lg {
  font-size: 120%;
}

body.lg {
  --text-base: 20px;
  --text-sm:   18px;
  --text-xs:   16px;
}

/* ===== Große Schrift ===== */
body.lg {
  font-size: 19px;
}

/* Topleiste bewusst von "Schrift +" ausgenommen (Nutzer-Vorgabe): die
   Kontakt-/Barrierefreiheits-Leiste (.topbar) referenziert --text-xs fuer
   ".a11y-btn" und ".topbar-ls-link" ("Einfache Sprache") -- wuchs die
   Leiste dadurch mit, brach die Zeile bei mittleren Mobil-Breiten (z. B.
   480px) auf zwei Zeilen um, wo sie in normaler Schriftgroesse noch in
   eine Zeile passte. Variablen innerhalb .topbar lokal auf die Normal-
   werte zurueckgesetzt -- betrifft nur diesen Bereich, der restliche
   Seiteninhalt waechst weiterhin wie gewollt mit. */
body.lg .topbar {
  --text-base: 17px;
  --text-sm:   15px;
  --text-xs:   13px;
  font-size: 14px;
}