/*
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.2.2
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) -- */
  --ss-bg:            #EDE7E1;
  --ss-surface:       #FDFBF8;
  --ss-card:          #FFFFFF;
  --ss-footer-bg:     #F7F1EA;

  --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;

  /* -- 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);
}

/* 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); }
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);
}


/* ============================================================
   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);
}


/* ============================================================
   10. LAYOUT-UTILITIES (im Design-System nicht enthalten)
   ============================================================ */
.ss-container { max-width: var(--ss-max); margin-inline: auto; padding-inline: var(--ss-gap); }
.ss-section { margin-block: clamp(2rem, 5vw, 3.5rem); }
.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); }


/* ============================================================
   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);
}
.ss-btn, .ss-btn--primary { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }
.ss-btn:hover, .ss-btn--primary:hover { background: var(--ss-accent-hover); border-color: var(--ss-accent-hover); }
.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. TOP-LEISTE + SPRACHUMSCHALTER (DE/IT/FR/EN)
   Markup: .ss-topbar > nav.ss-langswitch > ul > li > a
   ============================================================ */
.ss-topbar { background: var(--ss-surface); border-top: 5px solid var(--ss-brand); border-bottom: 1px solid var(--ss-border); }
.ss-langswitch ul {
  list-style: none; margin: 0; padding-block: var(--ss-space-2);
  display: flex; flex-wrap: wrap; gap: var(--ss-space-2); justify-content: flex-end;
}
.ss-langswitch a {
  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-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;
}
.ss-langswitch a:hover { border-color: var(--ss-accent); }
.ss-langswitch a.is-active,
.ss-langswitch a[aria-current="true"] { background: var(--ss-accent); color: #fff; border-color: var(--ss-accent); }


/* ============================================================
   13. "LEICHTE SPRACHE"-UMSCHALTER (Switch)
   Band per hidden ausgeliefert; JS blendet ein, wenn LS-Inhalt da ist.
   WICHTIG: [hidden] muss display:none behalten -> KEIN display auf .ss-ls-bar.
   ============================================================ */
.ss-ls-bar[hidden] { display: none; }
.ss-ls-bar { background: var(--ss-brand-soft); border-bottom: 1.5px solid var(--ss-brand-line); }
.ss-ls-bar__inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--ss-space-3); padding-block: 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: 88px; height: 44px; 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); }
.ss-toggle__knob { position: absolute; top: 3px; left: 3px; width: 34px; height: 34px; 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: 47px; border: none; }

/* 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; }


/* ============================================================
   14. KATEGORIE-KACHELN (Bild HOCHFORMAT 3/4)
   Markup: ul.ss-tiles > li > a.ss-tile > .ss-tile__media(.ss-tile__num,img) + .ss-tile__title
   ============================================================ */
.ss-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-gap); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ss-tile {
  display: block; text-align: left; text-decoration: none; color: inherit; background: #fff;
  border: 2px solid var(--ss-accent-line); border-radius: var(--ss-radius-xl); overflow: hidden;
  transition: border-color var(--ss-transition), box-shadow var(--ss-transition); height: 100%;
}
.ss-tile:hover { border-color: var(--ss-accent); }
.ss-tile[aria-current="true"] { border-color: var(--ss-accent); background: #F4FAFB; box-shadow: var(--ss-ring-soft); }
.ss-tile__media { position: relative; aspect-ratio: 3 / 4; background: var(--ss-accent-soft); }
.ss-tile__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ss-tile__num {
  position: absolute; top: 10px; left: 10px; width: 40px; height: 40px; border-radius: 11px;
  background: var(--ss-brand-soft); border: 1.5px solid var(--ss-brand); color: var(--ss-brand-text);
  font-weight: var(--ss-weight-bold); font-size: 1.125rem; display: flex; align-items: center; justify-content: center;
}
.ss-tile__title { display: block; padding: 13px 14px 16px; 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; }


/* ============================================================
   16. VIDEO + TRANSKRIPT
   ============================================================ */
.ss-video { margin: var(--ss-space-5) 0; border-radius: var(--ss-radius-xl); overflow: hidden; border: 1px solid var(--ss-border); }
.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: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: 1px solid var(--ss-border); 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: 1px solid var(--ss-border); 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)
   ============================================================ */
.ss-kurse { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ss-gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ss-kurs { display: flex; flex-direction: column; gap: var(--ss-space-3); background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-xl); padding: 20px; box-shadow: var(--ss-shadow-sm); overflow: hidden; }
/* Kartenbild randlos oben (negative Margins heben das Karten-Padding auf) */
.ss-kurs__media { margin: -20px -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; }
.ss-kurs__title { font-size: var(--ss-h3); font-weight: var(--ss-weight-bold); line-height: 1.3; margin: 0; }
.ss-kurs__title::before { content: none; }
.ss-kurs__desc { font-size: var(--ss-small); line-height: 1.55; color: var(--ss-ink-soft); margin: 0; }
.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);
}
.ss-kurs__cta a:hover { background: var(--ss-accent-hover); }

/* 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: 1px solid var(--ss-border); border-radius: var(--ss-radius-xl); }


/* ============================================================
   19. NEWSLETTER (Brevo) + PAGINIERUNG
   ============================================================ */
.ss-newsletter { background: #fff; border: 1px solid var(--ss-border); border-radius: var(--ss-radius-xl); padding: 24px; }
.ss-newsletter__form { max-width: 34rem; }
.ss-newsletter .sib_signup_form { max-width: 34rem; }
.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); }

.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); }


/* ============================================================
   20. 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; }
}