/*
Theme Name:  Selbst-Stark (Twenty Twenty-Four Child)
Theme URI:   https://selbst-stark.ch
Description: Child-Theme von Twenty Twenty-Four für die Lernplattform Selbst-Stark (Stiftung Cerebral / foxstudy GmbH). Barrierefreies Navigations-/Filtergerüst für den CPT "kurs" + Design-System (FoxStudy Orange + Petrol). WCAG 2.1 AA.
Author:      foxstudy GmbH
Template:    twentytwentyfour
Version:     0.16.22
Text Domain: selbst-stark
*/

/* ============================================================
   SELBST-STARK — DESIGN SYSTEM
   WCAG 2.1 AA · Atkinson Hyperlegible · funktioniert ohne JS
   ============================================================ */

/* ---- 1. FONT (self-hosted · DSGVO-konform, kein externer Request) ----
   Atkinson Hyperlegible (SIL OFL) – speziell für Sehbehinderte gestaltete
   Schrift. Dateien in fonts/. Das latin-Subset deckt DE/IT/FR/EN inkl.
   Umlaute (ä ö ü), ß und Akzente (à é è ç ì ò ù) ab. font-display:swap
   -> Text sofort sichtbar (System-Fallback), dann Austausch ohne Layout-Blockade.
------------------------------------------------------------ */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 400; font-display: swap;
  src: local("Atkinson Hyperlegible"),
       url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal; font-weight: 700; font-display: swap;
  src: local("Atkinson Hyperlegible Bold"),
       url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: italic; font-weight: 400; font-display: swap;
  src: local("Atkinson Hyperlegible Italic"),
       url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2");
}

:root {
  /* -- 2. FARBEN (Kontraste AA-geprüft, siehe Übersicht unten) --
     Seiten-/Footer-Hintergrund seit Rob-Feedback (Punkt B, Variante
     "Warme Markenfarbe" aus dem Vergleichs-Artefakt): warmer, aus der
     Marken-Orange abgeleiteter Créme-Ton statt neutralem Braun-Grau. */
  --ss-bg:            #FBF1E7;
  --ss-surface:       #FDFBF8;
  --ss-card:          #FFFFFF;
  --ss-footer-bg:     #FDF6EE;

  --ss-ink:           #202826;
  --ss-ink-soft:      #3D3833;
  --ss-ink-muted:     #5C564E;
  --ss-label:         #8A5A2B;

  --ss-accent:        #0A5560;
  --ss-accent-hover:  #073F47;
  --ss-accent-active: #05323A;
  --ss-accent-soft:   #E3EFF1;
  --ss-accent-line:   #AED2D8;
  --ss-accent-text:   #0A5560;

  --ss-brand:         #E8531F;
  --ss-brand-text:    #C1440E;
  --ss-brand-hover:   #A5390B;
  --ss-brand-soft:    #FDECE4;
  --ss-brand-line:    #F1B79C;

  --ss-cerebral-red:  #E30613;

  --ss-focus:         #C1440E;
  --ss-border:        #E1D8CC;
  --ss-input-border:  #C9BEB0;
  /* Formular-Fehlerzustand (Kontaktformular) – bewusst eigener Ton statt
     --ss-cerebral-red (das bleibt der Marken-/Logofarbe vorbehalten). AA
     auf --ss-card/--ss-bg (6.1:1) und umgekehrt Weiss auf --ss-danger (5.4:1). */
  --ss-danger:        #B3261E;
  --ss-danger-soft:   #FBEAE8;
  /* Sanfter Petrol-Rahmen für Karten/Flächen auf dem warmen Hintergrund
     (Rob-Feedback, Punkt B) – deutlich zurückhaltender als --ss-accent-line
     (das bleibt den Kategorie-Kacheln vorbehalten). */
  --ss-border-accent: #C5DEE2;

  /* -- 3. TYPO-SKALA (mobile-first, 1rem = 16px) -- */
  --ss-font:          "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ss-font-mono:     ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ss-h1:            2.125rem;
  --ss-h2:            1.625rem;
  --ss-h3:            1.1875rem;
  --ss-lead:          1.25rem;
  --ss-body:          1rem;
  --ss-body-lg:       1.125rem;
  --ss-small:         0.9375rem;
  --ss-eyebrow:       0.875rem;

  --ss-lh-tight:      1.2;
  --ss-lh-body:       1.6;
  --ss-weight-reg:    400;
  --ss-weight-bold:   700;
  --ss-tracking:      0.12em;

  /* -- 4. ABSTÄNDE (8px-Raster) -- */
  --ss-space-1:  4px;
  --ss-space-2:  8px;
  --ss-space-3:  12px;
  --ss-space-4:  16px;
  --ss-space-5:  22px;
  --ss-space-6:  30px;
  --ss-space-7:  38px;
  --ss-space-8:  44px;

  /* -- 5. RADIEN -- */
  --ss-radius-sm:   6px;
  --ss-radius-md:  10px;
  --ss-radius-lg:  14px;
  --ss-radius-xl:  16px;
  --ss-radius-pill: 999px;

  /* -- 6. SCHATTEN -- */
  --ss-shadow-sm:  0 1px 3px rgba(60,40,20,.14);
  --ss-shadow-md:  0 8px 22px rgba(60,40,20,.10);
  --ss-shadow-lg:  0 18px 44px rgba(60,40,20,.10);
  --ss-ring-soft:  0 0 0 3px var(--ss-accent-soft);

  /* -- 7. INTERAKTION -- */
  --ss-tap-min:     44px;
  --ss-focus-width: 3px;
  --ss-focus-offset:3px;
  --ss-transition:  .15s ease;

  /* -- Layout -- */
  --ss-max: 1120px;
  --ss-gap: clamp(1rem, 2.5vw, 2rem);
}

/* KONTRAST-ÜBERSICHT (alle AA-geprüft)
   #202826 auf #FFF 15.8:1 AAA · #3D3833 11.1:1 AAA · #5C564E 7.0:1 AA
   #8A5A2B 4.9:1 AA · #0A5560 7.1:1 AAA · Weiss auf #0A5560 7.1:1 AAA
   #C1440E 5.2:1 AA · Weiss auf #C1440E 5.2:1 AA · Fokus #C1440E 5.2:1 (Nicht-Text)
   #E8531F 3.4:1 (nur Groß/Deko) · Feldrand #C9BEB0 3.1:1 (Nicht-Text) */


/* ============================================================
   8. BASIS / RESET
   ============================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ss-bg);
  color: var(--ss-ink);
  font-family: var(--ss-font);
  font-size: var(--ss-body-lg);
  line-height: var(--ss-lh-body);
}

/* Hintergrund-Musterung (Rob-Wunsch 2026-08-25, 2 Feedback-Runden): CP/PC/PCI
   -- die Abkuerzung fuer Cerebralparese in den 3 Seitensprachen -- als
   grosse, dezent verschwommene Konturbuchstaben (stdDeviation:1.1),
   abwechselnd Petrol/Orange, 15% Deckkraft, verschiedenste Rotationen inkl.
   nahezu kopfstehend. Kachelgroesse nach 2. Runde nochmal von 600 auf
   1000px vergroessert (Rob: "erkenne auf den ersten Blick, wo sich das
   Muster wiederholt") + auf 16 Buchstaben in einem 4×4-Jitter-Raster erhöht
   (zufällige Position innerhalb jeder Rasterzelle statt exaktem Gitter, s.
   Python-Skript im Scratchpad -- feste Seed=42 fuer Reproduzierbarkeit,
   falls nochmal nachjustiert werden muss). Jede Buchstaben-Position wurde
   rechnerisch gegen ihre eigene (rotationsabhaengige) Bounding-Box geprueft,
   damit nichts am Kachelrand abgeschnitten wird (1. Fassung hatte dieses
   Problem, da Buchstaben mit negativen x-Koordinaten ueber den Kachelrand
   hinausragten). SVG statt Rasterbild: bleibt bei jeder
   Aufloesung scharf/unverpixelt UND lässt sich mit reinem CSS anpassen
   (Farbe/Deckkraft/Groesse), falls spaeter nochmal Feinschliff noetig ist --
   kein zusaetzlicher Bild-Download, alles inline im Stylesheet.
   background-attachment:fixed erzeugt einen simplen Parallax-Effekt (der
   Musterhintergrund bewegt sich beim Scrollen langsamer als der Inhalt) rein
   per CSS, bewusst ohne eigenes JS (Rob-Wunsch: "ist mir nicht so wichtig").
   Einzige Einschraenkung: iOS Safari ignoriert background-attachment:fixed
   traditionell -- dort bleibt der Hintergrund einfach normal (kein Fehler,
   nur ohne Parallax-Effekt), auf allen anderen Browsern/Geraeten wirkt er. */
html body {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%221000%22%20height%3D%221000%22%20viewBox%3D%220%200%201000%201000%22%3E%0A%3Cdefs%3E%3Cfilter%20id%3D%22soft%22%20x%3D%22-40%25%22%20y%3D%22-40%25%22%20width%3D%22180%25%22%20height%3D%22180%25%22%3E%3CfeGaussianBlur%20stdDeviation%3D%221.1%22/%3E%3C/filter%3E%3C/defs%3E%0A%3Cg%20filter%3D%22url%28%23soft%29%22%20fill%3D%22none%22%20font-family%3D%22Arial%2C%20Helvetica%2C%20sans-serif%22%20font-weight%3D%22700%22%20stroke-width%3D%223%22%20opacity%3D%220.15%22%3E%0A%3Ctext%20x%3D%2218.0%22%20y%3D%22102.0%22%20font-size%3D%2250%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%288%2049.0%2089.0%29%22%3ECP%3C/text%3E%0A%3Ctext%20x%3D%22286.6%22%20y%3D%2284.2%22%20font-size%3D%2260%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%2825%20323.8%2068.6%29%22%3EPC%3C/text%3E%0A%3Ctext%20x%3D%22505.0%22%20y%3D%22141.4%22%20font-size%3D%2290%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%2855%20588.7%20118.1%29%22%3EPCI%3C/text%3E%0A%3Ctext%20x%3D%22779.0%22%20y%3D%2295.2%22%20font-size%3D%2250%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%2878%20810.0%2082.2%29%22%3ECP%3C/text%3E%0A%3Ctext%20x%3D%2227.5%22%20y%3D%22371.8%22%20font-size%3D%2290%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%28100%2083.3%20348.5%29%22%3EPC%3C/text%3E%0A%3Ctext%20x%3D%22284.2%22%20y%3D%22393.8%22%20font-size%3D%2290%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%28130%20367.9%20370.5%29%22%3EPCI%3C/text%3E%0A%3Ctext%20x%3D%22620.0%22%20y%3D%22331.9%22%20font-size%3D%2270%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%28158%20663.4%20313.8%29%22%3ECP%3C/text%3E%0A%3Ctext%20x%3D%22865.9%22%20y%3D%22367.9%22%20font-size%3D%2260%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%28175%20903.1%20352.3%29%22%3EPC%3C/text%3E%0A%3Ctext%20x%3D%2228.8%22%20y%3D%22678.0%22%20font-size%3D%2260%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%28195%2084.6%20662.4%29%22%3EPCI%3C/text%3E%0A%3Ctext%20x%3D%22278.8%22%20y%3D%22573.5%22%20font-size%3D%2250%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%28220%20309.8%20560.5%29%22%3ECP%3C/text%3E%0A%3Ctext%20x%3D%22594.5%22%20y%3D%22681.2%22%20font-size%3D%2270%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%28250%20637.9%20663.1%29%22%3EPC%3C/text%3E%0A%3Ctext%20x%3D%22804.4%22%20y%3D%22695.9%22%20font-size%3D%2280%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%28278%20878.8%20675.2%29%22%3EPCI%3C/text%3E%0A%3Ctext%20x%3D%2230.8%22%20y%3D%22873.8%22%20font-size%3D%2280%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%28305%2080.4%20853.1%29%22%3ECP%3C/text%3E%0A%3Ctext%20x%3D%22353.1%22%20y%3D%22886.1%22%20font-size%3D%2290%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%28335%20408.9%20862.8%29%22%3EPC%3C/text%3E%0A%3Ctext%20x%3D%22598.2%22%20y%3D%22826.1%22%20font-size%3D%2260%22%20stroke%3D%22%230A5560%22%20transform%3D%22rotate%28-15%20654.0%20810.5%29%22%3EPCI%3C/text%3E%0A%3Ctext%20x%3D%22876.6%22%20y%3D%22959.5%22%20font-size%3D%2260%22%20stroke%3D%22%23E8531F%22%20transform%3D%22rotate%28-40%20913.8%20943.9%29%22%3ECP%3C/text%3E%0A%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-attachment: fixed;
}

/* Eltern-Theme (Twenty Twenty-Four) injiziert per Block-Editor "globalen Styles"
   ein eigenes style-Tag global-styles-inline-css, das NACH diesem Stylesheet lädt:
   body auf Inter, Überschriften h1-h6 auf Cardo, exakt gleiche Selektor-Spezifität
   wie oben -> gewinnt bei Ladereihenfolge-Gleichstand. Ergebnis bisher: Fliesstext +
   alle Überschriften site-weit in Inter/Cardo statt Atkinson Hyperlegible; nur
   Komponenten mit eigener Klasse (Buttons, Karten, Formularfelder) waren korrekt,
   weil deren Selektoren ohnehin spezifischer sind. Fix: Spezifität gezielt erhöhen
   (unabhängig von künftigen Lade-Reihenfolge-Änderungen durch WP-Core/Plugins). */
html body,
html h1, html h2, html h3, html h4, html h5, html h6 {
  font-family: var(--ss-font);
}

/* Fließtext / Listen in Inhaltsbereichen */
main p, main li { color: var(--ss-ink-soft); }
main a { color: var(--ss-accent-text); }
main p { max-width: 62ch; }

/* Überschriften: klare Hierarchie (bare Tags + Utility-Klassen) */
main h1, .ss-h1 { font-size: var(--ss-h1); line-height: var(--ss-lh-tight); font-weight: var(--ss-weight-bold); color: var(--ss-ink); margin: 0 0 var(--ss-space-4); }

/* ---- Kinetische Typografie: Hero-Überschrift (Wow-Effekte, 2026-08-21,
   überarbeitet 2026-08-24) ----
   Ein einzelner Textknoten in fixer Bold-Breite (kein Font-weight-Wechsel
   des Texts selbst mehr, daher kein Re-Wrap/Zeichenwandern möglich, auch
   nicht bei langen Sätzen). Die gefühlte Gewichtszunahme wird per "Faux-
   Bold"-Trick simuliert: mehrere subpixel-versetzte text-shadow-Kopien in
   Textfarbe verdicken die Kontur optisch, ohne die Zeichenposition/Zeilen-
   umbrüche zu verändern. js/scroll-reveal.js (IntersectionObserver, siehe
   unten .ss-reveal) setzt "is-visible", sobald die Überschrift im Viewport
   erscheint. Ohne JS/CSS-Unterstützung: Überschrift bleibt einfach in ihrer
   normalen (fetten) Grundfassung stehen, kein Zwischenzustand. BEWUSST kein
   animation-timeline: view() (Rob-Fund 2026-08-21: in Safari unzuverlässig,
   wie schon beim Fortschrittsbalken). */
.ss-kinetic {
  /* Rob-Wunsch 2026-08-24: Schrift soll nicht mehr "fetter" wirken --
     stattdessen blendet eine farbige Kontur um die Buchstaben ein (Text
     selbst bleibt unverändert, nur der Schatten/die Kontur wird sichtbar).
     Rob-Wunsch (2. Runde): Effekt soll nach dem Erscheinen wieder ver-
     schwinden statt dauerhaft stehen zu bleiben -- daher @keyframes statt
     einer reinen Ein-Wege-transition (die kann nur "an", nicht "an, halten,
     wieder aus" in einem Zug). */
  text-shadow: 0 0 0 transparent;
}
.ss-kinetic.is-visible {
  animation: ss-kinetic-contour 3s ease-out 1;
}
@keyframes ss-kinetic-contour {
  0%, 100% { text-shadow: 0 0 0 transparent; }
  /* Kleiner Blur-Radius (dritter Wert) statt scharfer Kopien -- der Browser
     rechnet den Schatten dadurch als weiche Fläche statt als hart aufs
     Pixelraster gerundete Duplikate (vermeidet verpixelte Kanten). Farbe
     Marken-Orange (--ss-brand-text, kontrastgeprüfter Fliesstext-Ton) statt
     currentColor, damit es als Kontur erkennbar bleibt statt mit dem
     schwarzen Text zu verschmelzen. 33%/66% = ca. 1s Einblenden, 1s halten,
     1s wieder ausblenden bei 3s Gesamtdauer. */
  33%, 66% {
    text-shadow:
      0.8px 0 0.4px var(--ss-brand-text), -0.8px 0 0.4px var(--ss-brand-text),
      0 0.8px 0.4px var(--ss-brand-text), 0 -0.8px 0.4px var(--ss-brand-text);
  }
}

/* ---- Scroll-Fortschrittsbalken (Wow-Effekte, 2026-08-21) ----
   Rein dekorativ (aria-hidden), sitesweit via wp_body_open. BEWUSST reines
   JS statt CSS animation-timeline: scroll() (Rob-Fund 2026-08-21 in Safari:
   Balken blieb bei ca. 50% stehen statt bis 100% zu laufen -- die noch
   junge CSS-Scroll-Timeline-Technik rechnet den Scroll-Bereich je nach
   Browser/Engine unterschiedlich zuverlässig; js/scroll-progress.js macht
   dieselbe Rechnung simpel und konsistent per scrollTop/scrollHeight). z-
   index über dem Sticky-Header (500), damit der Balken sichtbar bleibt. */
.ss-progress-rail {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600;
  height: 3px; background: transparent; pointer-events: none;
}
.ss-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--ss-brand), var(--ss-accent));
}

/* ---- Sanftes Einblenden beim Scrollen (Wow-Effekte, 2026-08-21) ----
   Generischer Baustein, per js/scroll-reveal.js (IntersectionObserver) mit
   "is-visible" versehen, sobald ein Element ins Bild scrollt -- danach nicht
   mehr beobachtet (kein erneutes Aus-/Einblenden beim Hoch-/Runterscrollen).
   Ohne JS/IntersectionObserver: startet bei opacity 0? Nein -- das Skript
   setzt bei fehlender Unterstützung sofort "is-visible" auf alle Elemente,
   nie unsichtbar. transform+transition (statt animation-timeline: view(),
   das in Safari laut Rob-Test nicht griff) -- Transitions "besitzen" ihre
   Eigenschaft nur waehrend des Uebergangs, nicht dauerhaft, daher kein
   Konflikt mit :hover-Regeln auf denselben Elementen (z. B. .ss-kurs unten). */
.ss-reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.ss-reveal.is-visible { opacity: 1; transform: none; }

/* Wow-Effekte 2026-08-21: ganze Kurskarte hebt sich bei Hover/Fokus (z. B.
   Fokus auf dem Titel-Link innerhalb der Karte) leicht an. */
.ss-kurs {
  transition: transform var(--ss-transition), box-shadow var(--ss-transition);
}
.ss-kurs:hover, .ss-kurs:focus-within {
  transform: translateY(-4px);
  /* Verstärkt den 2-schichtigen Petrol-Schatten von oben statt ihn durch den
     generischen --ss-shadow-lg-Token zu ersetzen (sonst ginge der "Floating"-
     Effekt beim Hover/Fokus wieder verloren). */
  box-shadow: 0 4px 10px rgba(5, 50, 58, .26), 0 32px 52px -12px rgba(10, 85, 96, .46);
}
main h2, .ss-h2 { font-size: var(--ss-h2); line-height: var(--ss-lh-tight); font-weight: var(--ss-weight-bold); color: var(--ss-ink); margin: 0 0 var(--ss-space-3); }
main h3, .ss-h3 { font-size: var(--ss-h3); line-height: 1.3;               font-weight: var(--ss-weight-bold); color: var(--ss-ink); margin: 0 0 var(--ss-space-2); }

.ss-lead { font-size: var(--ss-lead); line-height: var(--ss-lh-body); color: var(--ss-ink-soft); max-width: 54ch; }

/* Orange Akzent-Balken vor den Haupt-Abschnitts-Überschriften (Marke) */
.ss-section > h2 { position: relative; padding-top: 14px; }
.ss-section > h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 44px; height: 5px; border-radius: 3px; background: var(--ss-brand);
}

/* Soft-Scroll-Ziel direkt vor Schritt 1 (siehe js/schritt-scroll.js) –
   kein sichtbares Element, reiner Scroll-Marker. */
.ss-scroll-anchor { display: block; height: 0; }

/* ============================================================
   SCHRITT-KARTEN (Rob-Feedback, Punkt C – "Card-Rahmen", Vorbild
   Header-Pillbox): Kategorie-/Zielgruppen-Auswahl auf der Startseite
   bekommen einen eigenen Karten-Rahmen mit Pillen-Reiter „Schritt N“ –
   macht jeden Schritt zu einem klar abgegrenzten Anker auf der Seite.
   Markup: section.ss-step > span.ss-step__badge + h2 + ...
   ============================================================ */
.ss-step {
  background: var(--ss-card);
  border: 1.5px solid var(--ss-border-accent);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-shadow-sm);
  padding: 26px var(--ss-gap) 30px;
  position: relative;
  margin-top: 40px;
}
/* Pillen-Reiter ersetzt den generischen Akzent-Balken (kein doppeltes
   Nummern-Signal neben der Kachel-Nummerierung 1–4). */
.ss-step > h2 { padding-top: 0; }
.ss-step > h2::before { content: none; }
.ss-step__badge {
  position: absolute; top: -18px; left: var(--ss-gap);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: var(--ss-radius-pill);
  border: 1.5px solid var(--ss-accent-line); background: #fff;
  color: var(--ss-accent-text); font-weight: var(--ss-weight-bold); font-size: var(--ss-small);
  box-shadow: var(--ss-shadow-sm);
}

/* Schritt 1 & Schritt 2 optisch näher zusammen (Rob-Feedback) – gehören
   zum selben Auswahlvorgang, sollen nicht wie 2 getrennte Seiten-
   Abschnitte wirken. Höhere Selektor-Spezifität als .ss-section, damit
   das zuverlässig gewinnt. :not([hidden]) nötig seit "Schritt 1 ohne
   Reload" (Rob-Feedback 2026-08-18): Schritt 2 steht jetzt IMMER im DOM
   (nur mit hidden-Attribut vor der Kategoriewahl) – ohne diese Klausel
   würde Schritt 1 fälschlich schon vor jeder Auswahl den engeren Abstand
   bekommen, weil :has() reine DOM-Präsenz prüft, nicht Sichtbarkeit. */
.ss-step:has(+ .ss-step:not([hidden])) { margin-bottom: 16px; }
.ss-step + .ss-step:not([hidden]) { margin-top: 28px; }

/* Schritt 2: Hervorhebungs-Effekt beim Erscheinen (Rob-Feedback, 3x
   nachgeschärft: 4 Pulse statt 2, länger + deutlicher wahrnehmbar).
   Ausgelöst per JS erst NACH Ende des Soft-Scrolls (schritt-scroll.js),
   nicht mehr beim Laden – siehe data-ss-highlight-on-scroll. 4 Pulse in
   5.6s (~0,7 Hz) bleiben weit unter der WCAG-2.3.1-Grenze (max. 3
   Blitze/Sek.); @media (prefers-reduced-motion: reduce) deaktiviert alle
   Animationen bereits global (siehe Abschnitt 20). */
@keyframes ss-step-highlight {
  0%    { box-shadow: 0 0 0 6px rgba(10, 85, 96, .38), var(--ss-shadow-sm); border-color: var(--ss-accent); }
  12.5% { box-shadow: 0 0 0 1px var(--ss-border-accent), var(--ss-shadow-sm); border-color: var(--ss-border-accent); }
  25%   { box-shadow: 0 0 0 6px rgba(10, 85, 96, .38), var(--ss-shadow-sm); border-color: var(--ss-accent); }
  37.5% { box-shadow: 0 0 0 1px var(--ss-border-accent), var(--ss-shadow-sm); border-color: var(--ss-border-accent); }
  50%   { box-shadow: 0 0 0 6px rgba(10, 85, 96, .38), var(--ss-shadow-sm); border-color: var(--ss-accent); }
  62.5% { box-shadow: 0 0 0 1px var(--ss-border-accent), var(--ss-shadow-sm); border-color: var(--ss-border-accent); }
  75%   { box-shadow: 0 0 0 6px rgba(10, 85, 96, .38), var(--ss-shadow-sm); border-color: var(--ss-accent); }
  87.5% { box-shadow: 0 0 0 1px var(--ss-border-accent), var(--ss-shadow-sm); border-color: var(--ss-border-accent); }
  100%  { box-shadow: var(--ss-shadow-sm); border-color: var(--ss-border-accent); }
}
.ss-step--highlight { animation: ss-step-highlight 5.6s ease-in-out; }

/* Schritt 1: DEUTLICH eingegraut sobald erledigt (Kategorie gewählt) –
   Rob-Feedback 3. Runde: 1. Versuch (--ss-surface, #FDFBF8) war zu nah an
   Weiss (--ss-card, #FFFFFF) – kaum von der aktiven Karte zu unterscheiden.
   Jetzt bewusst auf die SEITEN-Hintergrundfarbe (--ss-bg, #FBF1E7) gesetzt,
   damit die Box optisch komplett mit der Seite verschmilzt/zurücktritt –
   der stärkstmögliche "aus"-Kontrast zur weiterhin weissen, erhabenen
   Schritt-2-Karte. Statt Opacity-Trick (riskiert AA-Kontrastverlust bei
   Fliesstext) bewusst über gezielt gedämpfte Design-Tokens gelöst – Kontrast
   bleibt geprüft. Auswahl bleibt änderbar; die getroffene Auswahl bleibt als
   einziges Element weiter petrolfarben erkennbar, alles andere wird
   grau/flach. */
.ss-step--done {
  background: var(--ss-bg);
  border-color: var(--ss-border);
  box-shadow: none;
}
.ss-step--done > h2,
.ss-step--done > p { color: var(--ss-ink-muted); }
.ss-step--done .ss-step__badge { border-color: var(--ss-border); background: var(--ss-card); color: var(--ss-ink-muted); }
.ss-step--done .ss-tile { border-color: var(--ss-border); background: var(--ss-card); box-shadow: none; }
.ss-step--done .ss-tile:hover { border-color: var(--ss-accent); background: var(--ss-accent-soft); box-shadow: var(--ss-shadow-md); }
.ss-step--done .ss-tile__title { color: var(--ss-ink-muted); }
.ss-step--done .ss-tile[aria-current="true"] { border-color: var(--ss-accent-line); background: var(--ss-accent-soft); box-shadow: none; }
.ss-step--done .ss-tile[aria-current="true"] .ss-tile__title { color: var(--ss-ink); }


/* ============================================================
   9. SICHTBARER TASTATUR-FOKUS (global · Pflicht)
   ============================================================ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ss-focus-width) solid var(--ss-focus);
  outline-offset: var(--ss-focus-offset);
  border-radius: var(--ss-radius-sm);
}
/* Ausnahme Schritt-2-Überschrift (Rob-Feedback): der programmatisch nach
   dem Soft-Scroll gesetzte Fokus (schritt-scroll.js) erzeugte hier einen
   Ring, der optisch mit der "Schritt 2"-Pille darüber kollidierte. Da
   tabindex="-1" diese Überschrift ohnehin nie in die reguläre Tab-Reihe
   aufnimmt (nur JS erreicht sie), geht dadurch kein Tastatur-Use-Case
   verloren – Scroll + Blink-Puls übernehmen das visuelle Signal, der
   Fokus bleibt für Screenreader weiterhin funktional (Ansage beim
   Fokussieren), nur ohne sichtbaren Ring. */
#ss-ziel-title:focus-visible { outline: none; }


/* ============================================================
   10. LAYOUT-UTILITIES (im Design-System nicht enthalten)
   ============================================================ */
.ss-container { max-width: var(--ss-max); margin-inline: auto; padding-inline: var(--ss-gap); }
/* Anker fuer den absolut positionierten "Keine Cookies"-Stempel (Startseite,
   Abschnitt 22) -- ohne Einfluss auf Layout/andere Seiten, da position:relative
   ohne Offset nichts verschiebt. */
/* display:flow-root (statt nur position:relative) verhindert zusaetzlich
   CSS-Margin-Collapsing zwischen #ss-main und seinem ersten Kind-Element --
   ohne das haette .ss-section--intros margin-top (s. u.) nach AUSSEN
   "durchgeschlagen" und die Luecke zwischen Header und #ss-main vergroessert,
   statt sie INNERHALB von #ss-main vor dem Video zu schaffen (genau der Bug
   hinter Rob-Feedback 3+4: riesige Luecke UND Stempel ueberlappt trotzdem
   weiterhin das Video, weil sich fuer den Stempel effektiv nichts geaendert
   hatte). flow-root hat sonst keine sichtbaren Nebenwirkungen. */
#ss-main { position: relative; display: flow-root; }
.ss-section { margin-block: clamp(2rem, 5vw, 3.5rem); }
/* Nur auf der Startseite, nur die allererste Sektion (Video+Intro): extra
   Abstand zum Header, damit der "Keine Cookies"-Stempel (Abschnitt 22, 200×
   140px, absolut zu #ss-main positioniert) darüber Platz hat, OHNE weder
   den Header noch das Video zu überlappen (Rob-Feedback 2026-08-25 -- der
   normale Abstand von 2-3.5rem reichte dafuer bei weitem nicht). Nur
   margin-top ueberschrieben (Bottom-Abstand bleibt Standard). */
.ss-section--intro { margin-top: 110px; }
.ss-section > h1 { margin-top: 0; }

.ss-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.ss-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ss-accent); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--ss-radius-md) 0; font-weight: var(--ss-weight-bold);
}
.ss-skip-link:focus { left: 0; }

.ss-hint { color: var(--ss-ink-muted); font-size: var(--ss-small); }

/* ============================================================
   FÖRDERER/PARTNER-LOGOS (Rob-Feedback): "Ensemble" unter dem Intro-Video
   – ersetzt den reinen Textsatz, hält aber bewusst dieselbe Unterscheidung
   wie der Ursprungstext ("Förderung der Stiftung Cerebral" / "Powered by
   foxstudy"): 2 eigenständige Spalten mit je eigener Bildunterschrift,
   nicht ein gemeinsames Label. Weisse Karte mit Petrol-Rahmen (bindet
   Cerebral-Logo mit weissem Hintergrund sauber ein), Logos an der Höhe
   statt Breite ausgerichtet (unterschiedliche Seitenverhältnisse),
   Petrol-Trennlinie als Echo des Header-Tab-Dividers.
   Markup: .ss-funders > (.ss-funders__item > p.ss-funders__label + a > img)*2, dazwischen span.ss-funders__divider
   Logos verlinken auf die jeweilige Webseite (Rob-Feedback), target=_blank
   + rel=noopener wie beim Datenschutz-Link im Newsletter-Formular.
   ============================================================ */
.ss-funders {
  display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 28px;
  width: fit-content; max-width: 100%;
  margin: var(--ss-space-6) auto 0;
  padding: 24px 36px;
  background: #fff;
  border: 1.5px solid var(--ss-border-accent);
  border-radius: var(--ss-radius-lg);
  box-shadow: var(--ss-shadow-sm);
}
.ss-funders__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
/* Petrol-Pille (Rob-Feedback: Text fiel gegen die Logos zu stark ab) –
   gleiche Bauweise wie Header-Tabs/Schritt-Badges, dadurch eigenes
   visuelles Gewicht statt reinem Fliesstext. */
.ss-funders__label {
  margin: 0; font-size: var(--ss-small); font-weight: var(--ss-weight-bold);
  color: var(--ss-accent-text); letter-spacing: .02em; white-space: nowrap;
  padding: 7px 16px; border-radius: var(--ss-radius-pill);
  background: var(--ss-accent-soft); border: 1.5px solid var(--ss-accent-line);
}
.ss-funders__logo { height: 52px; width: auto; display: block; }
.ss-funders__divider { width: 1.5px; background: var(--ss-border-accent); flex: none; }
@media (max-width: 420px) {
  .ss-funders { flex-direction: column; padding: 20px 24px; }
  .ss-funders__divider { width: 100%; height: 1.5px; }
}
/* Zwischenbereich oberhalb 420px, in dem flex-wrap (siehe .ss-funders oben)
   das zweite Logo in eine eigene Zeile umbrechen lässt, ohne dass die volle
   Spalten-Ansicht der 420px-Regel greift: js/funders-divider.js erkennt den
   echten Umbruch (per getBoundingClientRect, da CSS keine "hat umgebrochen"-
   Abfrage kennt) und setzt dafür die Klasse .ss-funders--wrapped. Unterhalb
   420px bleibt die volle horizontale Trennlinie aus der Regel oben unberührt
   (Rob-Feedback: das gestapelte Handy-Verhalten ist bereits korrekt). Ohne
   JS bleibt die Linie stehen wie zuvor – rein kosmetisch, unkritisch. */
@media (min-width: 421px) {
  .ss-funders--wrapped .ss-funders__divider { display: none; }
}


/* ============================================================
   11. BUTTONS
   Abweichung vom Design-Doc: die BASIS .ss-btn ist bereits „primär"
   (Petrol), damit bestehendes Markup mit blossem .ss-btn nie unstyled
   ist. --primary ist Alias, --secondary/--brand/--ghost Varianten.
   ============================================================ */
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-space-2);
  min-height: 48px; padding: 13px 22px;
  border: 2px solid transparent; border-radius: var(--ss-radius-md);
  font-family: var(--ss-font); font-size: 1.0625rem; font-weight: var(--ss-weight-bold);
  text-decoration: none; cursor: pointer;
  transition: background var(--ss-transition), border-color var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition);
}
.ss-btn, .ss-btn--primary { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }
/* Wow-Effekte 2026-08-21: leichtes Anheben + Schatten bei Hover/Fokus (nicht
   bei :active, damit der Klick selbst "fest" wirkt statt schwebend). */
.ss-btn:hover, .ss-btn--primary:hover,
.ss-btn:focus-visible, .ss-btn--primary:focus-visible {
  background: var(--ss-accent-hover); border-color: var(--ss-accent-hover);
  transform: translateY(-2px); box-shadow: var(--ss-shadow-md);
}
.ss-btn:active, .ss-btn--primary:active { background: var(--ss-accent-active); border-color: var(--ss-accent-active); }

.ss-btn--secondary, .ss-btn--ghost { background: #fff; color: var(--ss-accent); border-color: var(--ss-accent); }
.ss-btn--secondary:hover, .ss-btn--ghost:hover { background: var(--ss-accent-soft); }

.ss-btn--brand { background: var(--ss-brand-text); color: #fff; border-color: var(--ss-brand-text); }
.ss-btn--brand:hover { background: var(--ss-brand-hover); border-color: var(--ss-brand-hover); }

.ss-btn--lg { min-height: 60px; padding: 18px 26px; font-size: 1.25rem; border-radius: var(--ss-radius-lg); }


/* ============================================================
   12. HAUPT-HEADER — EIN integriertes Menü (Rob-Feedback, Punkt A v2)
   Markup: header.ss-header > .ss-header__row >
     .ss-brand (Logo + Wortmarke + nav.ss-nav "Seiten") +
     .ss-header__utility (shortcode ss_ls_toggle + shortcode ss_langswitch)
   Eine gemeinsame Zeile/Fläche statt 3 gestapelter Bänder: links Marke +
   Seiten-Navigation, rechts Leichte-Sprache-Schalter + Sprachlinks – exakt
   die von Rob gewünschte Lesereihenfolge. Nur der Akzentstreifen oben und
   ein Abschluss-Rand unten rahmen den Bereich. Streifen bewusst in Petrol
   statt Orange (Rob-Feedback): Orange bleibt so ausschliesslich der
   Wortmarke vorbehalten (Marke), Petrol übernimmt Struktur/Interaktion
   (Buttons, Ränder, Hover, jetzt auch diese Linie) – klare Rollentrennung
   statt Orange an zwei Stellen gleichzeitig.
   ============================================================ */
.ss-header.wp-block-group {
  background: var(--ss-surface);
  border-top: 4px solid var(--ss-accent);
  border-bottom: 1px solid var(--ss-border);
  /* Sticky mit Auto-Hide (Rob-Wunsch, js/header-autohide.js): Header bleibt
     beim Scrollen erreichbar (v. a. für den LS-Umschalter), damit man dafür
     nicht immer nach oben scrollen muss. Ohne JS bleibt er per sticky
     einfach dauerhaft sichtbar (progressive enhancement). */
  position: sticky;
  top: 0;
  z-index: 500;
  transition: transform .25s ease, visibility 0s linear 0s;
}
.ss-header--hidden {
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform .25s ease, visibility 0s linear .25s;
}
@media (prefers-reduced-motion: reduce) {
  .ss-header.wp-block-group,
  .ss-header--hidden { transition: none; }
}
/* In-Page-Sprungziele (Soft-Scroll-Anker, Kontaktformular-Fragment, WP-
   :target) dürfen nicht unter dem jetzt sticky Header landen. */
#ss-main, #ss-schritt-anker, #ss-kurse-anker, #ss-kontakt, #ss-ziel-title, :target {
  scroll-margin-top: 100px;
}
.ss-header__row { align-items: center; row-gap: var(--ss-space-2); }
.ss-brand { align-items: center; row-gap: var(--ss-space-2); }

/* Tab-Gruppe: fasst die echten Seiten (Wortmarke + Seiten-Navigation) in
   einen gemeinsamen, dezent umrandeten Pill-Container – klar getrennt von
   den Utility-Steuerelementen rechts (Rob-Feedback). */
/* Grid statt flex (Rob-Feedback 2026-08-25: "selbst-stark" und "Power-ups"
   sollen je genau die Haelfte der Box einnehmen, nicht organisch nach
   Textlaenge/Schriftgroesse wachsen) -- 2 exakt gleich breite Spalten,
   unabhaengig vom Inhalt. Die tatsaechliche Pille sitzt mehrere Ebenen tiefer
   (WP-Core-Navigation-Block: nav > responsive-container > ...-content > ul >
   li > a) -- width:100% muss durch jede dieser Ebenen einzeln durchgereicht
   werden, sonst schrumpft die Pille innen wieder auf Textbreite. */
/* 2026-08-25, korrigiert: der erste Versuch (display:grid + width:100% durch
   die ganze WP-Core-Navigation-Verschachtelung durchgereicht) hat die Seite
   zerschossen -- .wp-block-navigation__responsive-container ist Teil des
   Mobil-Overlay-Mechanismus von WP und wird vermutlich per width/overflow
   versteckt gehalten; width:100% hat das offenbar aufgebrochen. Zurueck zu
   flex (Original), OHNE die riskanten Eingriffe in die WP-Core-Klassen. */
.ss-tabs {
  align-items: center;
  border: 1.5px solid var(--ss-border);
  border-radius: var(--ss-radius-pill);
  padding: 4px;
}

.ss-header__utility {
  align-items: center; gap: var(--ss-space-4); row-gap: var(--ss-space-2);
  align-self: stretch;
  border-left: 1px solid var(--ss-border);
  padding-left: var(--ss-space-5);
  margin-left: var(--ss-space-2);
}
@media (max-width: 640px) {
  .ss-header__utility { border-left: none; padding-left: 0; margin-left: 0; align-self: auto; }
}

.ss-wordmark a {
  font-family: var(--ss-font);
  font-size: 1.375rem;
  font-weight: var(--ss-weight-bold);
  color: var(--ss-brand-text);
  letter-spacing: -0.01em;
  padding: 10px 16px;
  border-radius: var(--ss-radius-pill);
  min-height: var(--ss-tap-min);
  display: inline-flex;
  align-items: center;
  /* Gleich grosse Pille wie "Power-ups" daneben (Rob-Feedback 2026-08-25) --
     bewusst per min-width statt width:100%/Grid: der erste Versuch griff in
     WP-Core-Navigation-Klassen ein und hat die Seite zerschossen. min-width
     auf beiden Links (hier + .ss-nav-Aequivalent unten) reicht fuer gleich
     grosse Pillen, ohne fremde Blockstruktur anzufassen. Schmaler als beim
     ersten Anlauf (Rob-Feedback: Abstand zu gross). */
  min-width: 8.5rem; justify-content: center; text-align: center;
}
/* Gleiche Hover-Hervorhebung wie die Seiten-Navigation daneben (Rob-
   Feedback), Markenfarbe im Text bleibt beim Hover erhalten. */
.ss-wordmark a:hover,
.ss-wordmark a:focus-visible {
  background: var(--ss-accent-soft);
  color: var(--ss-brand-hover);
}
/* Dauerhafte Pille auf der Startseite (Rob-Feedback) – WP setzt
   aria-current="page" auf die Wortmarke bereits korrekt, wenn is_front_page()
   zutrifft (siehe site-title-Block); hier wird es nur sichtbar gemacht,
   analog zum aktuellen Menüpunkt in .ss-nav. */
.ss-wordmark a[aria-current="page"] {
  background: var(--ss-accent-soft);
  color: var(--ss-brand-hover);
}

/* Klasse verdoppelt (.content.content) = Spezifitäts-Trick, den WP-Core an
   dieser Stelle selbst benutzt (s. wp-includes/blocks/navigation/style.css
   Zeile 122) -- WP-Core setzt auf .wp-block-navigation-item__content
   display:block bei GLEICHER Spezifität wie unsere .ss-nav-Regel; je nach
   Lade-Reihenfolge kann das gewinnen und die Zentrierung/Symmetrie kippen
   (Rob-Fund 2026-08-25: bei "Power-ups" nicht sauber zentriert, bei
   "selbst-stark" schon -- dort gibt es keine WP-Core-Konkurrenz-Regel).
   Mit der verdoppelten Klasse gewinnt unsere Regel garantiert, unabhängig
   von der Lade-Reihenfolge. */
.ss-nav .wp-block-navigation-item__content.wp-block-navigation-item__content,
.ss-nav .wp-block-pages-list__item__link {
  color: var(--ss-ink);
  font-weight: var(--ss-weight-bold);
  /* Gleiche Schriftgroesse wie die Wortmarke daneben (Rob-Feedback
     2026-08-25: beide sollen sich nur farblich unterscheiden, vorher war
     die Wortmarke mit 1.375rem spuerbar groesser als dieser Link mit
     --ss-body/1rem). */
  font-size: 1.375rem;
  padding: 10px 16px;
  border-radius: var(--ss-radius-pill);
  min-height: var(--ss-tap-min);
  display: inline-flex;
  align-items: center;
  /* Gleiche Pillengroesse wie die Wortmarke, per min-width statt width:100%
     (s. Kommentar bei .ss-wordmark a -- width:100% griff hier in WP-Core-
     Navigation-Klassen ein und zerschoss die Seite). Schmaler als beim
     ersten Anlauf (Rob-Feedback: Abstand zwischen den beiden Woertern war
     zu gross). */
  min-width: 8.5rem; justify-content: center; text-align: center;
  text-decoration: none; /* explizit statt implizit über display:inline-flex –
    auf Seiten-Templates (page.html, FSE) reichte das core-Reset sonst nicht
    zuverlässig, Link erschien dort unterstrichen (Rob-Feedback). */
  transition: background var(--ss-transition), color var(--ss-transition); /* Wow-Effekte 2026-08-21 */
}
.ss-nav .wp-block-navigation-item__content:hover,
.ss-nav .wp-block-pages-list__item__link:hover,
.ss-nav .wp-block-navigation-item__content:focus-visible,
.ss-nav .wp-block-pages-list__item__link:focus-visible {
  background: var(--ss-accent-soft);
  color: var(--ss-accent-text);
}
/* Aktueller Menüpunkt dauerhaft hervorgehoben (nicht nur bei Hover/Fokus) –
   WP setzt aria-current="page" bereits korrekt (siehe page-list), hier wird
   es nur noch sichtbar gemacht. Sonst wirkt die stets farbige Wortmarke
   fälschlich wie der „aktive" Punkt. */
.ss-nav .wp-block-navigation-item__content[aria-current="page"],
.ss-nav .wp-block-pages-list__item__link[aria-current="page"] {
  background: var(--ss-accent-soft);
  color: var(--ss-accent-text);
}
/* Innerhalb des kompakten Mobil-Dropdowns (siehe Abschnitt 12, "Mobiles
   Menü als kompaktes Dropdown") bewusst OHNE Pillen-Hintergrund (Rob-
   Feedback 2026-08-19: dort wirkte die zusätzliche Fläche im ohnehin schon
   kleinen Panel unruhig) – Unterstrich in hellem Petrolblau stattdessen.
   Ausserhalb des Dropdowns (Desktop-Tableiste) bleibt der Pillen-Hintergrund
   unverändert bestehen ("das war super", Rob-Feedback). */
/* Wow-Effekte 2026-08-21 (Rob-Wunsch "Hover-Effekt auch mit Texten"):
   Unterstrich immer im Layout reserviert (text-decoration:underline dauerhaft
   gesetzt), aber standardmässig transparent -- beim Erscheinen faded nur die
   Unterstrich-FARBE ein (text-decoration-color transitioniert zuverlässig
   browserübergreifend), statt ihn abrupt an/aus zu schalten. */
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: color var(--ss-transition), text-decoration-color var(--ss-transition);
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
  background: transparent;
  color: var(--ss-accent-text);
  text-decoration-color: var(--ss-accent-line);
}

/* Mobiles Menü als kompaktes Dropdown statt WordPress-Standard-Vollbild-
   Overlay (Rob-Feedback 2026-08-19, per Vergleichs-Artefakt Option A
   gewählt): der Navigations-Block öffnet serienmässig einen fixierten
   Vollbild-Dialog (.wp-block-navigation__responsive-container.is-menu-open
   { position:fixed; inset:0; z-index:100000; … } in
   wp-includes/blocks/navigation/style.css) – bei nur 2 Menüpunkten wirkt
   das überdimensioniert und verdeckt dabei die Wortmarke. `!important`
   bewusst statt Spezifitäts-Wettrüsten: WP's eigenes Stylesheet lädt NACH
   diesem hier (siehe Font-Fix weiter oben, gleiches Ladereihenfolge-Muster)
   und verkettet mehrere Klassen/:not()-Selektoren, die sich mit jedem
   Core-Update ändern könnten – robuster, gezielt die paar Eigenschaften zu
   erzwingen, die den Dialog von "Vollbild" auf "Dropdown" umstellen.
   .wp-block-navigation selbst ist bereits von Core aus position:relative,
   daher hängt das Panel automatisch direkt unter dem Menü-Knopf, unabhängig
   davon, wo der im Header sitzt. */
.ss-nav .wp-block-navigation__responsive-container.is-menu-open {
  position: absolute !important;
  inset: auto !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 8px !important;
  width: max-content !important;
  max-width: min(220px, calc(100vw - 32px)) !important;
  height: auto !important;
  z-index: 500 !important;
  background: var(--ss-card) !important;
  color: var(--ss-ink) !important;
  border: 1.5px solid var(--ss-border-accent);
  border-radius: var(--ss-radius-md);
  box-shadow: var(--ss-shadow-sm);
  padding: var(--ss-space-2) !important;
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 0 !important;
}
.ss-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding: 10px 14px;
}
/* Schliessen-Kreuz sitzt dank .wp-block-navigation__responsive-dialog
   (Core: position:relative) automatisch oben rechts im kleinen Panel statt
   oben rechts im Viewport – hier nur an die Design-Sprache angepasst. */
.ss-nav .wp-block-navigation__responsive-container-close {
  border-radius: var(--ss-radius-sm);
  padding: 4px;
}
.ss-nav .wp-block-navigation__responsive-container-close:hover,
.ss-nav .wp-block-navigation__responsive-container-close:focus-visible {
  background: var(--ss-accent-soft);
}
/* Menü-Knopf (Hamburger) auf Mindest-Tapziel bringen (WCAG 2.5.5) – Core
   liefert nur ein 24px-SVG ohne umgebende Klickfläche. */
.ss-nav .wp-block-navigation__responsive-container-open {
  min-width: var(--ss-tap-min);
  min-height: var(--ss-tap-min);
  align-items: center;
  justify-content: center;
  border-radius: var(--ss-radius-md);
}
.ss-nav .wp-block-navigation__responsive-container-open:hover,
.ss-nav .wp-block-navigation__responsive-container-open:focus-visible {
  background: var(--ss-accent-soft);
}

/* -- Leichte-Sprache-Schalter: kompaktes Steuerelement (kein eigenes Band).
   WICHTIG: [hidden] muss display:none behalten -> KEIN display auf .ss-ls-bar
   ohne das [hidden]-Attribut zu überstimmen. -- */
.ss-ls-bar[hidden] { display: none; }
.ss-ls-bar { display: flex; align-items: center; gap: var(--ss-space-3); }
.ss-ls-bar__label { font-weight: var(--ss-weight-bold); color: var(--ss-ink-soft); font-size: var(--ss-small); }

.ss-toggle { position: relative; width: 76px; height: 40px; border-radius: var(--ss-radius-pill); border: 2px solid var(--ss-input-border); background: #fff; cursor: pointer; flex: none; transition: background var(--ss-transition), border-color var(--ss-transition); }
.ss-toggle[aria-pressed="true"] { background: var(--ss-accent); border-color: var(--ss-accent); }
/* Wow-Effekte 2026-08-21 (Rob-Wunsch): Hover/Fokus auf den Schalter UND
   passendes Textfeedback auf dem zugehörigen Label (".ss-ls-bar:hover" statt
   nur ":hover" auf dem Label selbst, da der Klick eigentlich auf dem Button
   liegt -- das Label ist reiner Text ohne eigene Interaktivität). */
.ss-toggle:hover, .ss-toggle:focus-visible { border-color: var(--ss-accent); }
.ss-ls-bar__label { transition: color var(--ss-transition); }
.ss-ls-bar:hover .ss-ls-bar__label { color: var(--ss-accent-text); }
.ss-toggle__knob { position: absolute; top: 2px; left: 2px; width: 32px; height: 32px; border-radius: var(--ss-radius-pill); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); border: 1px solid var(--ss-border); transition: left var(--ss-transition); }
.ss-toggle[aria-pressed="true"] .ss-toggle__knob { left: 38px; border: none; }

/* -- Sprachumschalter: kompakte Pillenliste, kein eigenes Band. -- */
.ss-langswitch ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--ss-space-2);
}
.ss-langswitch a {
  min-width: 40px; min-height: 40px;
  padding: 0 10px; border-radius: var(--ss-radius-md);
  border: 1.5px solid var(--ss-input-border); background: #fff;
  color: var(--ss-ink-soft); font-weight: var(--ss-weight-bold); font-size: var(--ss-small);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: border-color var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition);
}
/* Wow-Effekte 2026-08-21 (Rob-Wunsch): gleiches leichtes Anheben wie bei
   Buttons/Kacheln, auch für die bereits aktive Sprache. */
.ss-langswitch a:hover, .ss-langswitch a:focus-visible {
  border-color: var(--ss-accent); transform: translateY(-2px); box-shadow: var(--ss-shadow-md);
}
.ss-langswitch a.is-active,
.ss-langswitch a[aria-current="true"] { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }

/* ---- Sprachumschalter: kompaktes Ausklapp-Feld auf schmalen Bildschirmen
   (Rob-Wunsch 2026-08-21, Kopfzeile nahm ~1/3 des Bildschirms ein) ----
   Zwei Darstellungen (siehe selbststark_render_language_switcher()), display:none
   schaltet je nach Breite konsequent eine der beiden ab -- auch für
   Screenreader, nie beide gleichzeitig im Baum. Gleicher Breakpoint wie
   .ss-header__utility oben (640px). */
.ss-langswitch-mobile { display: none; }
@media (max-width: 640px) {
  .ss-langswitch--desktop { display: none; }
  .ss-langswitch-mobile { display: block; }
}
.ss-langswitch-mobile__summary {
  cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--ss-input-border); border-radius: var(--ss-radius-md);
  background: #fff; color: var(--ss-ink-soft); font-weight: var(--ss-weight-bold); font-size: var(--ss-small);
  transition: border-color var(--ss-transition), color var(--ss-transition);
}
.ss-langswitch-mobile__summary::-webkit-details-marker { display: none; }
.ss-langswitch-mobile__summary::after {
  content: "▾"; font-size: .75em; transition: transform var(--ss-transition);
}
.ss-langswitch-mobile[open] .ss-langswitch-mobile__summary::after { transform: rotate(180deg); }
.ss-langswitch-mobile__summary:hover,
.ss-langswitch-mobile__summary:focus-visible { border-color: var(--ss-accent); color: var(--ss-accent-text); }
.ss-langswitch-mobile .ss-langswitch { margin-top: var(--ss-space-2); }
.ss-langswitch-mobile .ss-langswitch ul { flex-direction: column; }


/* Zweites Textfeld pro Inhalt (Standard <-> Leichte Sprache) */
.ss-ls-text { display: none; }
body.ss-ls-active .ss-standard-text { display: none; }
body.ss-ls-active .ss-ls-text { display: block; }
.ss-ls-text > :first-child { margin-top: 0; }

/* Gleiches Umschalt-Prinzip, aber "inline" statt "block" -- für kurze
   Begriffe/Labels mitten in Buttons, Kacheln, Filter-Checkboxen (Rob-Wunsch
   2026-08-24: auch Fachbegriffe wie Kategorie-Namen sollen mit dem
   Leichte-Sprache-Umschalter mitschalten, nicht nur Fliesstext-Absätze). */
.ss-label-ls { display: none; }
body.ss-ls-active .ss-label-std { display: none; }
body.ss-ls-active .ss-label-ls { display: inline; }

/* Intro-Karte (Rob-Feedback: Intro-Absatz ging neben Video/Transkript/
   Förderer-Karte optisch unter) – gleiche Bauweise wie die anderen Karten
   auf der Seite. Eyebrow-Pille zentriert (passt zum sonst zentrierten
   Rhythmus), Fliesstext bewusst linksbündig (Lesbarkeit bei mehrzeiligem
   Text – zentrierter Lauftext erschwert das Zeilen-Scannen, wichtig bei
   WCAG-AA/Leichte-Sprache-Zielgruppe). */
.ss-intro-card {
  background: var(--ss-card);
  border: 1.5px solid var(--ss-border-accent);
  border-radius: var(--ss-radius-xl);
  box-shadow: var(--ss-shadow-sm);
  padding: 22px 24px;
  margin: var(--ss-space-5) 0;
  text-align: center;
}
.ss-intro-card__eyebrow {
  display: inline-flex; align-items: center;
  font-size: var(--ss-small); font-weight: var(--ss-weight-bold);
  color: var(--ss-accent-text); background: var(--ss-accent-soft);
  border: 1.5px solid var(--ss-accent-line); border-radius: var(--ss-radius-pill);
  padding: 6px 14px; margin-bottom: 12px;
}
.ss-intro-card .ss-standard-text,
.ss-intro-card .ss-ls-text { text-align: left; }
.ss-intro-card p { margin: 0; font-size: var(--ss-body-lg); }

/* Startseiten-Infofenster Öffnungszähler (Rob-Wunsch 2026-08-24, Matomo-
   basiert; Optik 2026-08-25 nach Vergleichs-Artefakt auf "volltonige
   Petrol-Banderole" festgelegt, Rob-Entscheid): bewusst auffaelliger als
   die Pro-Kurs-Pille -- diese Zahl steht fuer die ganze Plattform, nicht
   fuer ein einzelnes Power-up, bricht daher gezielt aus dem weissen
   Karten-Look der Seite aus. Weiss/helles Petrol auf vollem --ss-accent:
   selber, bereits AA-geprueft Kontrast wie im Kopffeld der Kurskarten
   (Titel 8,7:1, Label 5,4:1). Wird nur gerendert, wenn ein Wert im Cache
   liegt. */
.ss-kurs-stats-banner {
  display: flex; align-items: baseline; justify-content: center; gap: var(--ss-space-3); flex-wrap: wrap;
  background: var(--ss-accent); border-radius: var(--ss-radius-lg);
  padding: var(--ss-space-4) var(--ss-space-5); margin: var(--ss-space-5) 0;
}
.ss-kurs-stats-banner__num {
  font-size: 2.75rem; font-weight: var(--ss-weight-bold); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.ss-kurs-stats-banner__label { font-size: var(--ss-body-lg); font-weight: var(--ss-weight-bold); color: var(--ss-accent-line); }

/* Markenname farblich hervorgehoben (Rob-Feedback: "selbst-stark" überall
   in Signature Orange) – nur auf Flächen einsetzen, die AA-geprüft sind
   (--ss-brand-text braucht ≥4.5:1; auf Weiss/Creme 4.6–5.1:1, auf der
   helleren Split-/Poster-Fläche und im Footer-Kleingedruckten reicht der
   Kontrast NICHT, dort bewusst unverändert gelassen – Ausnahme Footer-
   Wortmarke, dort greift die "large text"-Schwelle, siehe dort). */
.ss-brand-name { color: var(--ss-brand-text); }


/* ============================================================
   14. KATEGORIE-BUTTONS (Bild + Name nebeneinander)
   Markup: ul.ss-tiles > li > a.ss-tile > .ss-tile__media(img) + .ss-tile__title
   Rob-Feedback (Punkt F): klare, viereckige Button-Struktur statt Foto-
   Kacheln – Bild als kleine quadratische Miniatur links, Kategoriename
   rechts daneben, wie ein Auswahl-Button (nicht wie eine Bildergalerie).
   2 Spalten (1 auf Mobile), feste Breite statt volle Zeile.
   ============================================================ */
.ss-tiles {
  list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ss-space-4);
  max-width: 34rem;
}
@media (max-width: 480px) {
  .ss-tiles { grid-template-columns: 1fr; }
}
/* Deutlich praesenter als "erkennbarer Button" (Rob-Feedback 2026-08-25:
   vorher zu unscheinbar -- nur ein duenner Rahmen, Schatten erst bei Hover).
   Jetzt: groesser (mehr Padding, groesseres Bild/Text), dickerer Rahmen,
   UND von Anfang an ein "floatender" Schatten -- dieselbe 2-schichtige
   Petrol-Schatten-Formel wie bei den Kurskarten (.ss-kurs, nur eine Stufe
   schwaecher, da die Tiles kleiner/dichter beieinander stehen), damit beide
   Karten-Systeme der Seite konsistent wirken statt zwei verschiedene
   "Erhaben"-Sprachen zu haben. */
.ss-tile {
  position: relative;
  display: flex; align-items: center; gap: var(--ss-space-4);
  text-decoration: none; color: inherit; background: #fff;
  border: 2.5px solid var(--ss-accent-line); border-radius: var(--ss-radius-lg);
  padding: 16px 22px; min-height: var(--ss-tap-min);
  box-shadow: 0 2px 5px rgba(5, 50, 58, .16), 0 14px 26px -10px rgba(10, 85, 96, .30);
  transition: border-color var(--ss-transition), background var(--ss-transition), box-shadow var(--ss-transition), transform var(--ss-transition);
}
/* Wow-Effekte 2026-08-21, Schatten 2026-08-25 vertieft: staerkeres Anheben
   bei Hover/Fokus, da schon der Ruhezustand jetzt einen Schatten hat --
   sonst waere der Unterschied zwischen Ruhe und Hover kaum noch spuerbar. */
.ss-tile:hover, .ss-tile:focus-visible {
  border-color: var(--ss-accent); background: var(--ss-accent-soft); transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(5, 50, 58, .22), 0 22px 38px -12px rgba(10, 85, 96, .40);
}
.ss-tile[aria-current="true"] { border-color: var(--ss-accent); background: var(--ss-accent-soft); box-shadow: var(--ss-ring-soft); }
.ss-tile__media { width: 64px; height: 64px; flex: none; border-radius: var(--ss-radius-sm); overflow: hidden; background: var(--ss-accent-soft); }
.ss-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-tile__title { font-size: var(--ss-body-lg); font-weight: var(--ss-weight-bold); line-height: 1.3; color: var(--ss-ink); }


/* ============================================================
   15. ZIELGRUPPEN-PILLS (Progressive Disclosure)
   Markup: ul.ss-zielgruppen > li > a
   ============================================================ */
.ss-zielgruppen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ss-space-3); }
.ss-zielgruppen a {
  min-height: var(--ss-tap-min); display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px; border-radius: var(--ss-radius-pill);
  background: #fff; border: 1.5px solid var(--ss-input-border); color: var(--ss-ink);
  font-weight: var(--ss-weight-bold); font-size: var(--ss-body); text-decoration: none;
}
.ss-zielgruppen a:hover { border-color: var(--ss-accent); background: var(--ss-accent-soft); }
.ss-zielgruppen .ss-hint { font-weight: var(--ss-weight-reg); }

.ss-cta-all { text-align: center; }
.ss-cta-all__hint { margin: 0 auto var(--ss-space-3); max-width: 40em; }


/* ============================================================
   16. VIDEO + TRANSKRIPT
   ============================================================ */
.ss-video { margin: var(--ss-space-5) 0; border-radius: var(--ss-radius-xl); overflow: hidden; border: 1.5px solid var(--ss-border-accent); }
.ss-video__frame { position: relative; }
.ss-video__player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.ss-video figcaption { margin: var(--ss-space-2) var(--ss-space-4); }
.ss-video__poster-btn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	cursor: pointer;
	background: none;
}
.ss-video__poster-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-video__poster-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--ss-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ss-video__poster-icon svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.ss-video__poster-btn:hover .ss-video__poster-icon,
.ss-video__poster-btn:focus-visible .ss-video__poster-icon { background: var(--ss-accent-hover); }
.ss-video__poster-btn:focus-visible { outline: 3px solid var(--ss-accent); outline-offset: -3px; }
.ss-video:not(:has(.ss-video__player)) { aspect-ratio: 16 / 9; background: var(--ss-accent-soft); border: 1px dashed var(--ss-accent-line); display: flex; align-items: center; justify-content: center; }
.ss-video__placeholder { color: var(--ss-ink-muted); text-align: center; padding: 1rem; margin: 0; }

.ss-transcript { margin-block: var(--ss-space-4); border: 1.5px solid var(--ss-border-accent); border-radius: var(--ss-radius-lg); background: #fff; }
.ss-transcript__toggle { cursor: pointer; list-style: none; padding: 15px 16px; font-size: 1.0625rem; font-weight: var(--ss-weight-bold); color: var(--ss-accent); }
.ss-transcript__toggle::-webkit-details-marker { display: none; }
.ss-transcript[open] .ss-transcript__toggle { border-bottom: 1px solid var(--ss-border); }
.ss-transcript__text { padding: 16px; color: var(--ss-ink-soft); }
.ss-transcript__text > :first-child { margin-top: 0; }
.ss-transcript__text > :last-child { margin-bottom: 0; }


/* ============================================================
   17. FILTER + FORMULARE
   ============================================================ */
.ss-filter { background: #fff; border: 1.5px solid var(--ss-border-accent); border-radius: var(--ss-radius-xl); padding: 18px; margin-block: var(--ss-gap); box-shadow: var(--ss-shadow-sm); }
.ss-filter fieldset { border: 0; margin: 0 0 var(--ss-space-4); padding: 0; }
.ss-filter legend { font-weight: var(--ss-weight-bold); padding: 0; margin-bottom: var(--ss-space-2); }
.ss-filter__options { display: flex; flex-wrap: wrap; gap: var(--ss-space-2) var(--ss-space-5); }
.ss-filter__options label { display: inline-flex; align-items: center; gap: 8px; min-height: var(--ss-tap-min); }
.ss-search { display: flex; gap: var(--ss-space-2); flex-wrap: wrap; margin-bottom: var(--ss-space-4); }
.ss-search input[type="search"] {
  flex: 1 1 16rem; min-height: 48px; padding: 12px 14px;
  border: 1.5px solid var(--ss-input-border); border-radius: var(--ss-radius-md);
  font-family: var(--ss-font); font-size: 1.0625rem; background: #fff; color: var(--ss-ink);
}
input[type="checkbox"], input[type="radio"] { width: 24px; height: 24px; accent-color: var(--ss-accent); }


/* ============================================================
   18. KURSKARTE  (Markup: li.ss-kurs)
   ============================================================ */
/* min(280px, 100%) statt reinem 280px: verhindert horizontales Überlaufen
   auf sehr schmalen Phones (< ca. 312px Inhaltsbreite), wo 280px sonst
   knapper als der verfügbare Platz sein könnte (Responsive-Check). */
/* auto-fill statt auto-fit (Rob-Wunsch): bei wenigen Treffern bleiben die
   Karten in fixer Breite wie bei voller Reihe, statt sich auf die ganze
   Zeilenbreite zu strecken – überschüssige Spalten bleiben einfach leer. */
.ss-kurse { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-gap); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
/* Detailseite (single-kurs.php): nur 1 Karte, kein Grid-Layout mit leeren
   Spalten daneben – die Karte soll die volle Containerbreite nutzen. */
.ss-kurse--single { display: block; }
/* Rob-Feedback 2026-08-24 (2. Runde): "Floating"-Effekt soll über einen
   einfachen Schlagschatten hinausgehen -- 2-schichtiger Schatten statt
   generischem Grauton: enger, dunkler "Kontaktschatten" direkt an der Kante
   + weicherer, weiter ausladender Petrol-Schimmer darunter (Markenfarbe statt
   neutralem Braun/Grau) -- wirkt mehr wie ein sanftes Leuchten/Schweben als
   ein reiner Schlagschatten. Rand weiterhin 3px dunkles Petrol (Kanten-
   Fund: Kategoriebilder haben einen ähnlichen Ton wie der Seitenhintergrund). */
.ss-kurs {
  display: flex; flex-direction: column; gap: var(--ss-space-3); background: #fff;
  border: 3px solid var(--ss-accent); border-radius: var(--ss-radius-xl); padding: 20px;
  box-shadow: 0 2px 6px rgba(5, 50, 58, .22), 0 24px 40px -12px rgba(10, 85, 96, .38);
  overflow: hidden;
}
/* Kopffeld (Rob-Feedback 2026-08-24): eigenes Petrol-Feld mit FIXER Höhe (nicht
   nur min-height), damit wirklich jede Karte gleich hoch startet. Titel UND
   Untertitel per line-clamp hart auf max. 2 Zeilen begrenzt (2. Rob-Feedback:
   "höchstens zweizeilig") -- alles darüber hinaus wird mit "…" abgeschnitten,
   dafür kann die Höhe jetzt exakt für 2+2 Zeilen berechnet werden (vorher auf
   3 Zeilen Titel ausgelegt, dadurch zu hoch). Randlos oben (negative Margins
   heben das Karten-Padding auf) -- das Bild bekommt dafür KEINEN negativen
   Top-Margin mehr, sonst würde es unter das jetzt vorangestellte Kopffeld
   rutschen (der von Rob gemeldete Überlappungs-Bug). */
.ss-kurs__header {
  margin: -20px -20px 0; padding: 16px 20px; height: 126px;
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  background: var(--ss-accent); overflow: hidden;
  /* Eigene Eckenrundung oben (Rob-Fund 2026-08-25, 3 Anläufe): .ss-kurs hat
     zwar overflow:hidden, das reicht in manchen Browsern (u. a. Safari) an
     der 3px-Border-Kurve nicht ganz zum Clippen aus -- winziger weisser
     Spalt zwischen Petrol-Header und Petrol-Aussenlinie in den oberen Ecken
     sichtbar. Geometrie (nachtraeglich sauber durchgerechnet): Der Header
     startet durch margin:-20px exakt an der INNENKANTE der Border, also im
     Abstand der Border-Breite (3px) vom echten Karten-Eck. Ein Radius, der
     von DIESEM Startpunkt aus gezeichnet wird, muss GENAU Aussenradius minus
     Border-Breite sein (16-3=13px), damit sein Mittelpunkt exakt mit dem
     Mittelpunkt der Border-Innenkante zusammenfaellt -- nur dann liegen
     beide Kurven exakt übereinander. 2. Versuch (16px, "grosszuegiger")
     hatte das genau falsch herum: ein GROESSERER Radius ab demselben
     Startpunkt verschiebt den Kurven-Mittelpunkt weiter ins Karteninnere,
     wodurch die Kurve das Eck FRUEHER verlaesst -- sichtbar schlimmere,
     halbmondfoermige Luecke statt kleiner. Zurueck zu 13px (die tatsaechlich
     korrekte Rechnung); minimal auf 12px verkleinert (statt weiter
     vergroessert!) als Sicherheitsmarge gegen Sub-Pixel-Reste -- ein
     KLEINERER Radius laesst die Farbflaeche das Eck sicher etwas
     übererfassen statt zu verfehlen. */
  border-radius: 12px 12px 0 0;
}
/* Bild schliesst nahtlos ans Kopffeld an (2. Rob-Feedback: vorher weisser
   Spalt durch den flex "gap" von .ss-kurs) -- negativer Top-Margin in genau
   der Höhe dieses Gaps hebt ihn zwischen Kopffeld und Bild auf, ohne den
   Abstand zu den ANDEREN Kartenelementen (Badges, Text, Buttons) anzutasten. */
.ss-kurs__media { margin: calc(-1 * var(--ss-space-3)) -20px 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ss-accent-soft); }
.ss-kurs__img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Bild ist zusätzlich zum Titel klickbar (Rob-Wunsch), aber nur ein
   Duplikat desselben Ziels – aus dem A11y-Baum genommen (tabindex="-1"/
   aria-hidden im Markup), damit Tastatur/Screenreader nicht zweimal denselben
   Link vorfinden; der Titel-Link bleibt der "echte", fokussierbare Link. */
.ss-kurs__media-link { display: block; }
/* Titel + Untertitel je max. 2 Zeilen (line-clamp) -- Fallback ohne
   line-clamp-Unterstützung (sehr alte Browser): kein Abschneiden, Kopffeld
   wächst dann einfach mit (kein Bruch, nur weniger exakt gleich hoch). Farbe
   jeweils explizit auf dem Element selbst gesetzt (nicht nur vererbt vom
   Kopffeld), da main h3 { color: var(--ss-ink) } sonst gewinnen würde (Rob-
   Fund: schwarzer statt der eigentlich gewollten Farbe). Endstand nach 2
   Feedback-Runden: Titel Weiss (grösserer/fetter Text, 3:1 reicht rechnerisch
   klar, ~8.7:1 gegen --ss-accent), Untertitel helles Petrol (kleinerer Text,
   braucht 4.5:1 -- ~5.4:1 gegen --ss-accent, ebenfalls erfüllt). */
.ss-kurs__title {
  font-size: var(--ss-h3); font-weight: var(--ss-weight-bold); line-height: 1.3; margin: 0;
  color: #fff;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ss-kurs__title::before { content: none; }
.ss-kurs__title a { color: inherit; text-decoration: none; }
.ss-kurs__title a:hover,
.ss-kurs__title a:focus-visible { text-decoration: underline; }
.ss-kurs__subtitle {
  font-size: var(--ss-small); font-weight: var(--ss-weight-reg); line-height: 1.35; margin: 0;
  color: var(--ss-accent-line);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.ss-kurs__desc { font-size: var(--ss-small); line-height: 1.55; color: var(--ss-ink-soft); margin: 0; }
/* Öffnungszähler pro Power-up (Rob-Wunsch 2026-08-24, Matomo-basiert; Optik
   2026-08-25 nach Vergleichs-Artefakt auf "Variante B" festgelegt): ruhige
   Pille direkt nach dem Bild, bewusst dezent -- soll nicht mit dem Button
   konkurrieren, reiht sich stattdessen in dasselbe Chip-Vokabular wie die
   Taxonomie-Badges/Zielgruppen-Pills ein (Marken-Orange, nicht Petrol, damit
   sie sich von den Petrol-Buttons abhebt und als eigenständiges Signal
   erkennbar bleibt). */
.ss-kurs__stats {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-size: var(--ss-small); font-weight: var(--ss-weight-bold); color: var(--ss-brand-text);
  background: var(--ss-brand-soft); border: 1.5px solid var(--ss-brand);
  border-radius: var(--ss-radius-pill); padding: 7px 13px; margin: 0;
}
.ss-kurs__stats svg { width: 14px; height: 14px; flex: none; color: var(--ss-brand-text); }
.ss-kurs details { border-top: 1px solid var(--ss-border); padding-top: var(--ss-space-2); }
.ss-kurs summary { cursor: pointer; font-weight: var(--ss-weight-bold); color: var(--ss-accent); }
.ss-kurs__cta { margin-top: auto; }
.ss-kurs__cta a {
  display: inline-flex; align-items: center; gap: var(--ss-space-2); min-height: 48px; padding: 12px 20px;
  background: var(--ss-accent); color: #fff; text-decoration: none; font-weight: var(--ss-weight-bold);
  border-radius: var(--ss-radius-md);
  transition: background var(--ss-transition), transform var(--ss-transition), box-shadow var(--ss-transition);
}
/* Wow-Effekte 2026-08-21: leichtes Anheben bei Hover/Fokus. */
.ss-kurs__cta a:hover, .ss-kurs__cta a:focus-visible { background: var(--ss-accent-hover); transform: translateY(-2px); box-shadow: var(--ss-shadow-md); }
/* Zweitrangiger Button (z. B. "Mehr Infos"/"Video starten") in Markenorange statt Petrol,
   damit der Erst-Button ("Kurs starten") klar als primäre Handlung erkennbar bleibt. */
.ss-kurs__cta--secondary a { background: var(--ss-brand-text); }
.ss-kurs__cta--secondary a:hover, .ss-kurs__cta--secondary a:focus-visible { background: var(--ss-brand-hover); }
/* Dritter Button bei multimodalen Power-ups (Video + durchklickbare
   Alternativfassung, Rob-Wunsch 2026-08-24): helles Petrol mit dunkler
   Schrift für "Video starten" -- visuell zwischen dem dunklen Petrol-
   Erstbutton ("Power-up starten") und dem orangen "Mehr Infos" positioniert,
   macht die 3 unterschiedlichen Zugangsformen auf einen Blick unterscheidbar.
   Hover behält die helle Fläche bewusst bei (nur Heben+Schatten wie überall) --
   ein Petrol-Hover-Ton wäre auf hellem Petrol kaum sichtbar gewesen. */
.ss-kurs__cta--tertiary a { background: var(--ss-accent-line); color: var(--ss-ink); }
.ss-kurs__cta--tertiary a:hover, .ss-kurs__cta--tertiary a:focus-visible { background: var(--ss-accent-line); }
/* Modalitäts-Hinweis ("als Video oder zum Durchklicken"): eigene, gedämpfte
   Petrol-Fläche, damit er sich vom normalen Kartentext abhebt, ohne wie ein
   Fehler-/Warnhinweis zu wirken. */
.ss-kurs__modality-hint {
  background: var(--ss-accent-soft); color: var(--ss-accent-active);
  border-radius: var(--ss-radius-sm); padding: var(--ss-space-2) var(--ss-space-3);
  font-size: var(--ss-small); line-height: 1.5; margin: 0 0 var(--ss-space-2);
}
/* Zwei gleichwertige Buttons (z. B. Video + durchklickbare Alternativfassung), jeweils mit
   kurzer Erklärung darunter. Buttons bleiben in normaler Grösse wie überall sonst. */
.ss-kurs__cta-group { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--ss-space-4); }
.ss-kurs__cta-option { display: flex; flex-direction: column; gap: var(--ss-space-1); margin-top: auto; }
.ss-kurs__cta-group .ss-kurs__cta-option { margin-top: 0; }
.ss-kurs__cta-option .ss-kurs__cta { margin: 0; }
.ss-kurs__cta-option .ss-hint { margin: 0; }
/* CTA oben auf der Detailseite (statt "margin-top:auto" ans Kartenende
   geklebt wie in der Archiv-Liste) – Abstand kommt vom Flex-Gap der Karte. */
.ss-kurs__cta-top .ss-kurs__cta,
.ss-kurs__cta-top .ss-kurs__cta-group,
.ss-kurs__cta-top .ss-kurs__cta-option { margin-top: 0; }

/* Taxonomie-Badges (Petrol-Tint) */
.ss-tax-badges { display: flex; flex-wrap: wrap; gap: var(--ss-space-2); list-style: none; margin: 0; padding: 0; }
.ss-tax-badges li { background: var(--ss-accent-soft); color: var(--ss-accent); font-weight: var(--ss-weight-bold); font-size: 0.8125rem; padding: 5px 9px; border-radius: var(--ss-radius-sm); }

.ss-empty { padding: var(--ss-gap); background: #fff; border: 1.5px solid var(--ss-border-accent); border-radius: var(--ss-radius-xl); }


/* ============================================================
   19. FOOTER (ersetzt TT4-Demo-Footer, Rob-Feedback Punkt H)
   Bewusst schlank: Marke+Kurzbeschreibung, 3 echte Links, dieselben
   Förderer-Logos wie auf der Startseite (selbststark_render_funders()),
   Copyright. Keine Fantasie-Social-Links/toten "#"-Links wie im TT4-Demo.
   ============================================================ */
.ss-footer {
  margin-top: var(--ss-space-8);
  padding: var(--ss-space-7) 0 var(--ss-space-6);
  background: var(--ss-accent-active);
}
/* Bewusst feste Spalten-Anordnung statt flex-wrap (Rob-Fund 2026-08-25):
   mit flex-wrap + space-between hing die Position vom Footer-Menü davon ab,
   ob Marke+Nav in einer Zeile Platz fanden -- je nach Sprache unterschiedlich
   lange Linktexte ("Barrierefreiheit" etc.) liessen es mal umbrechen, mal
   nicht, wodurch das Menü optisch an unterschiedlichen Stellen sass. Feste
   Spalte macht die Position in allen 4 Sprachen identisch, unabhaengig von
   Textlaenge. */
.ss-footer__row {
  display: flex; flex-direction: column; gap: var(--ss-space-3);
  align-items: flex-start;
}
/* Signature Orange statt Weiss (Rob-Feedback: "selbst-stark" überall in
   Markenfarbe) – auf dem dunklen Footer geht nur die hellere --ss-brand
   (nicht --ss-brand-text, die fällt hier unter AA), verträgt sich hier
   nur wegen der grossen fetten Schrift (3.73:1, "large text"-Schwelle
   3:1 statt 4.5:1 – geprüft). */
.ss-footer__wordmark {
  display: inline-block; font-size: var(--ss-h3); font-weight: var(--ss-weight-bold);
  color: var(--ss-brand); text-decoration: none;
}
.ss-footer__wordmark:hover, .ss-footer__wordmark:focus-visible { text-decoration: underline; }
.ss-footer__tagline { margin: var(--ss-space-1) 0 0; max-width: 32em; color: var(--ss-accent-line); font-size: var(--ss-small); }
.ss-footer__nav { display: flex; flex-wrap: wrap; gap: var(--ss-space-2) var(--ss-space-5); }
.ss-footer__nav a { color: #fff; font-weight: var(--ss-weight-bold); text-decoration: none; }
.ss-footer__nav a:hover, .ss-footer__nav a:focus-visible { text-decoration: underline; }
.ss-footer__copyright { margin: var(--ss-space-6) 0 0; color: var(--ss-accent-line); font-size: var(--ss-small); }


/* ============================================================
   20. NEWSLETTER (Brevo) + KONTAKT + PAGINIERUNG
   Kontext-Split-Layout (Rob-Entscheid 2026-08-18, Vergleichs-Artefakt
   Variante 3): helle Petrol-Kontextspalte (.ss-split__context, gleicher
   Verlauf wie das Video-Poster oben auf der Seite – accent-soft->accent-
   line, statt des dunklen Footer-Tons) + weisse Formularspalte
   (.ss-split__form), stapelt mobil. Newsletter und Kontakt sind
   gegengleich gespiegelt – Newsletter Kontext links/Formular rechts
   (Default), Kontakt Kontext rechts/Formular links (.ss-split--flip
   dreht nur ab Desktop-Breite; im DOM/ohne CSS steht der Kontext bei
   beiden immer VOR dem Formular, das ist auch die sinnvolle
   Lesereihenfolge). .ss-newsletter/.ss-contact bleiben als Klassen auf
   der Section für die spezifischeren Formular-Selektoren weiter unten
   (Brevo-Felder, .ss-field etc.).
   Brevo-Markup: <p class="sib-X-area">Label-Text<input class="sib-X-area">
   – Label ist KEIN <label>-Tag (Brevo-Eigenheit), daher Styling über die
   Feld-<p> als Block statt echter label-Selektoren.
   ============================================================ */
.ss-split {
  display: grid; grid-template-columns: 1fr;
  background: var(--ss-card); border: 1.5px solid var(--ss-border-accent);
  border-radius: var(--ss-radius-xl); box-shadow: var(--ss-shadow-sm);
  overflow: hidden;
}
.ss-split__context, .ss-split__form {
  padding: 28px clamp(20px, 4vw, 36px);
}
.ss-split__context {
  background: linear-gradient(135deg, var(--ss-accent-soft) 0%, var(--ss-accent-line) 100%);
  display: flex; flex-direction: column; justify-content: center;
}
/* Dunkle Ink-Töne statt Weiss (Rob-Feedback: helle statt dunkle Petrol-
   Fläche) – AA-Kontrast rechnerisch geprüft: ink 9.34:1, ink-soft
   7.18:1, jeweils gegen den dunkleren Verlauf-Endpunkt --ss-accent-line. */
.ss-split__context h2 { color: var(--ss-ink); }
.ss-split__context p { color: var(--ss-ink-soft); max-width: 32em; margin: var(--ss-space-3) 0 0; }

@media (min-width: 721px) {
  .ss-split { grid-template-columns: minmax(240px, 0.9fr) minmax(300px, 1.1fr); }
  .ss-split--flip .ss-split__context { order: 2; }
  .ss-split--flip .ss-split__form { order: 1; }
}

.ss-newsletter__form, .ss-contact__form { max-width: 34rem; }
.ss-newsletter .sib_signup_form { max-width: 34rem; }
.ss-newsletter [class*="sib_signup_box_inside_"] p:not(.sib-terms-area):not(:last-child) {
  display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--ss-space-4);
  font-weight: var(--ss-weight-bold); color: var(--ss-ink-soft); font-size: var(--ss-small);
}
.ss-newsletter input[type="email"], .ss-newsletter input[type="text"] {
  min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--ss-input-border);
  border-radius: var(--ss-radius-md); font-family: var(--ss-font); font-size: 1.0625rem;
  font-weight: var(--ss-weight-reg); background: #fff; color: var(--ss-ink);
}
.ss-newsletter .sib-terms-area { display: flex; gap: var(--ss-space-2); align-items: flex-start; font-size: var(--ss-small); color: var(--ss-ink-muted); margin: 0 0 var(--ss-space-4); }
.ss-newsletter .sib-default-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ss-space-2);
  min-height: 48px; padding: 13px 22px; border: 2px solid var(--ss-accent); border-radius: var(--ss-radius-md);
  font-family: var(--ss-font); font-size: 1.0625rem; font-weight: var(--ss-weight-bold);
  background: var(--ss-accent); color: #fff; cursor: pointer; transition: background var(--ss-transition), border-color var(--ss-transition);
}
.ss-newsletter .sib-default-btn:hover { background: var(--ss-accent-hover); border-color: var(--ss-accent-hover); }
.ss-newsletter .sib-default-btn:active { background: var(--ss-accent-active); border-color: var(--ss-accent-active); }

/* ---- Kontakt (neuer Block, Rob-Feedback 2026-08-18) ----
   Eigenes Honeypot-Feld statt WP-Armour-JS-Feld: WP Armour markiert
   Einsendungen ohne JS (kein "alt_s"-Feld) als Spam – das würde echten
   No-JS-Nutzern widersprechen (Projektprinzip "funktioniert ohne JS").
   .ss-hp ist rein serverseitig ausgewertet, unabhängig von JS. */
.ss-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ss-field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--ss-space-4); }
.ss-field label { font-weight: var(--ss-weight-bold); color: var(--ss-ink-soft); }
.ss-field input[type="text"], .ss-field input[type="email"], .ss-field textarea {
  min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--ss-input-border);
  border-radius: var(--ss-radius-md); font-family: var(--ss-font); font-size: 1.0625rem;
  background: #fff; color: var(--ss-ink);
}
.ss-field textarea { min-height: 140px; resize: vertical; }
.ss-field[data-invalid] input, .ss-field[data-invalid] textarea { border-color: var(--ss-danger); }
.ss-field__err { color: var(--ss-danger); font-size: var(--ss-small); font-weight: var(--ss-weight-bold); }
.ss-contact__consent { display: flex; gap: var(--ss-space-2); align-items: flex-start; font-size: var(--ss-small); color: var(--ss-ink-muted); margin: 0 0 var(--ss-space-4); }
.ss-contact__consent[data-invalid] { color: var(--ss-danger); }
.ss-contact__banner { border-radius: var(--ss-radius-md); padding: 14px 18px; margin: 0 0 var(--ss-space-4); font-weight: var(--ss-weight-bold); }
.ss-contact__banner--ok { background: var(--ss-accent-soft); color: var(--ss-accent-text); }
.ss-contact__banner--error { background: var(--ss-danger-soft); color: var(--ss-danger); }

.ss-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--ss-space-2); padding: 0; margin-block: var(--ss-space-5); }
.ss-pagination a, .ss-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--ss-tap-min); min-height: var(--ss-tap-min); padding: 0 12px; border-radius: var(--ss-radius-md); border: 1.5px solid var(--ss-input-border); background: #fff; color: var(--ss-accent); text-decoration: none; font-weight: var(--ss-weight-bold); }
.ss-pagination .current { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }


/* ============================================================
   21. RESPONSIVE (mobile-first) + BEWEGUNG REDUZIEREN
   ============================================================ */
@media (max-width: 560px) {
  .ss-h1, main h1 { font-size: 1.75rem; }
  .ss-h2, main h2 { font-size: 1.375rem; }
  .ss-btn--lg { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* Zusaetzliche Sicherheitsnetze, falls js/scroll-reveal.js aus irgendeinem
     Grund (Skript blockiert/langsam) noch nicht "is-visible" gesetzt hat --
     "transition:none" allein wuerde sonst Elemente bei opacity:0 einfrieren. */
  .ss-reveal { opacity: 1 !important; transform: none !important; }
  .ss-progress-fill { width: 100% !important; opacity: .35; }
}

/* ============================================================
   22. "KEINE COOKIES"-STEMPEL (nur Startseite, Rob-Wunsch 2026-08-25)
   Markup: div.ss-cookie-stamp > 2x span.ss-cookie-stamp__ring +
     span.ss-cookie-stamp__text > (span.ss-cookie-stamp__line + svg + span…)
   Aufruf direkt als erstes Kind von <main> (nicht in .ss-intro-card), damit
   er unabhaengig vom folgenden Seiteninhalt (Video, Karte, ...) immer
   direkt unter dem Header landet.
   DESKTOP: position:absolute (NICHT fixed) -- soll wie ein echter, auf die
   Seite gedruckter Stempel wirken und mit dem Inhalt scrollen, nicht wie
   ein am Bildschirm festgeklebtes UI-Element stehen bleiben. Anker ist
   #ss-main (dort position:relative + display:flow-root -- Letzteres
   verhindert CSS-Margin-Collapsing, ohne das waere .ss-section--intros
   margin-top nach AUSSEN durchgeschlagen statt den Freiraum VOR dem Video
   zu schaffen). Eigene, vergroesserte margin-top nur fuer die erste
   Startseiten-Sektion (.ss-section--intro, s. Layout-Utilities) reserviert
   den Platz, den der Stempel braucht -- final auf 110px eingependelt (die
   11°-Rotation vergroessert die sichtbare Hoehe ueber die reinen 140px
   Boxhoehe hinaus, daher mehr Puffer noetig als man erwarten wuerde).
   MOBILE (≤640px): bewusst ANDERE Technik statt nur verkleinert --
   position:static statt absolute, Stempel sitzt normal im Textfluss und
   bringt seinen Abstand per margin selbst mit (s. Media-Query unten). Kein
   Pixel-Abstand mehr noetig, das Layout kann dort nicht ueberlappen.
   Rein dekorativ -> aria-hidden im Markup. */
.ss-cookie-stamp {
  position: absolute; top: 12px; right: 8px; z-index: 2;
  width: 200px; height: 140px;
  transform: rotate(11deg);
  filter: drop-shadow(0 8px 14px rgba(60,40,20,.28));
  pointer-events: none;
}
.ss-cookie-stamp__ring { position: absolute; inset: 0; border: 2.5px solid var(--ss-accent); border-radius: 50%; }
.ss-cookie-stamp__ring--inner { inset: 9px; border-width: 1.25px; }
.ss-cookie-stamp__text {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--ss-accent); text-align: center; text-transform: uppercase;
  /* Grosszuegiger Innenabstand auf ALLEN Seiten (vorher nur links/rechts) --
     der innere Ring liegt bei inset:9px, dieser Abstand haelt den Text
     zusaetzlich davon fern, auch dort wo die Ellipse am staerksten krümmt
     (oben/unten, genau wo die beiden Textzeilen sitzen). */
  padding: 20px 30px;
}
/* Kurze, feste Textbausteine (keine variable Nutzerzahl wie bei den anderen
   Bausteinen) -- Zeilenumbruch bewusst erlaubt (kein nowrap), max-width haelt
   die Zeilen zusaetzlich von den seitlich gekruemmten Raendern fern, auch bei
   den laengeren Uebersetzungen (FR/IT). */
.ss-cookie-stamp__line { max-width: 130px; font-size: 0.75rem; font-weight: var(--ss-weight-bold); letter-spacing: 0.02em; line-height: 1.3; }
.ss-cookie-stamp__icon { width: 28px; height: 28px; flex: none; margin: 2px 0; }

/* Mobile (≤640px, Rob-Wunsch 2026-08-25): bewusst ANDERE Technik statt der
   Desktop-Fassung nur verkleinert -- position:static statt absolute, damit
   der Stempel normal im Textfluss zwischen Header und Video sitzt. Das
   Layout schiebt Video/Inhalt dadurch automatisch nach unten weg; es muss
   kein Pixel-Abstand mehr geschaetzt oder die Rotations-Bounding-Box
   nachgerechnet werden (genau das kostete auf Desktop mehrere Anlaeufe).
   Rechtsbuendig per margin-left:auto (statt zentriert), passend zum
   "oben rechts"-Konzept vom Desktop. Kein eigener margin-top auf
   .ss-section--intro noetig -- der normale .ss-section-Standardabstand
   reicht, der Stempel bringt seinen Freiraum selbst per margin mit. */
@media (max-width: 640px) {
  .ss-cookie-stamp {
    position: static;
    display: block;
    width: 150px; height: 105px;
    margin: 16px 4px 20px auto;
    right: auto; top: auto;
  }
  .ss-cookie-stamp__ring--inner { inset: 8px; }
  .ss-cookie-stamp__text { padding: 15px 20px; gap: 3px; }
  .ss-cookie-stamp__line { max-width: 100px; font-size: 0.6875rem; }
  .ss-cookie-stamp__icon { width: 22px; height: 22px; }

  .ss-section--intro { margin-top: clamp(2rem, 5vw, 3.5rem); }
}