/* ===========================================================================
   ONLINE-PREDIGT · SCHICHT 2/4 — BASIS
   Grundelemente, Typografie, Formular-Grundlagen, Zugänglichkeit.
   Diese Datei ist in ALLEN Prototypen byte-identisch.
   =========================================================================== */

/* --- Schriften · lokal, kein CDN (§1) --------------------------------------
   Die woff2-Dateien gehören nach assets/fonts/. Fehlen sie, greift die
   Fallback-Kette in --schrift-text/--schrift-mono; Layout bleibt stabil.
   Manrope: SIL OFL 1.1 · IBM Plex Mono: SIL OFL 1.1
   -------------------------------------------------------------------------- */
/* Destillations-Abweichung (2026-07-28): Manrope liegt als latin + latin-ext-Split
   mit unicode-range vor (Bestands-Konvention der Vollkorn-/Instrument-Pinnung —
   latin-ext lädt nur bei Bedarf, z. B. Ř/ł in Sprechernamen). Die Abgabe nannte
   EINE Datei; Namen + Fallback-Verhalten sind unverändert. */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable-ext.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@layer basis {

  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: 5.5rem;
  }

  body {
    margin: 0;
    background: var(--flaeche);
    color: var(--text);
    font-family: var(--schrift-text);
    font-size: var(--txt-text);
    font-weight: var(--gewicht-mittel);
    line-height: var(--zeile-text);
    /* Platz für Wiedergabe-Leiste, Cue-Pille und Gesten-Leiste */
    padding-block-end: calc(var(--leiste-platz) + env(safe-area-inset-bottom));
  }

  h1, h2, h3, h4 {
    margin: 0;
    font-weight: var(--gewicht-schwer);
    line-height: var(--zeile-titel);
    letter-spacing: var(--sperrung-titel);
    text-wrap: balance;
  }
  h1 { font-size: var(--txt-t1); }
  h2 { font-size: var(--txt-t2); }
  h3 { font-size: var(--txt-t4); }
  h4 { font-size: var(--txt-gross); }

  p { margin: 0; text-wrap: pretty; }

  ul, ol { margin: 0; padding: 0; list-style: none; }

  a {
    color: var(--marke);
    text-decoration-color: color-mix(in oklab, var(--marke) 45%, transparent);
    text-underline-offset: 0.18em;
  }
  a:hover { color: var(--marke-still); text-decoration-color: currentColor; }

  img, svg, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }

  button, input, select, textarea {
    font: inherit;
    color: inherit;
  }
  button { cursor: pointer; }

  /* Fokus: sichtbar in beiden Themes, nie nur per Hover erreichbar (§7) */
  :focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 2px;
    border-radius: var(--radius-s);
  }

  /* Reduzierte Bewegung respektieren (§3) */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* --- Hilfsklassen der Basis-Schicht ------------------------------------ */

  .behaelter {
    inline-size: 100%;
    max-inline-size: var(--behaelter-max);
    margin-inline: auto;
    padding-inline: var(--behaelter-rand);
  }

  .nur-vorlesen {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .sprunglink {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--raum-4);
    z-index: 100;
    padding: var(--raum-3) var(--raum-4);
    background: var(--flaeche-2);
    color: var(--text);
    border: 2px solid var(--fokus);
    border-radius: var(--radius-s);
    text-decoration: none;
    font-weight: var(--gewicht-fett);
  }
  .sprunglink:focus { inset-block-start: var(--raum-3); }

  .etikett {
    font-family: var(--schrift-mono);
    font-size: var(--txt-etikett);
    font-weight: var(--gewicht-halb);
    letter-spacing: var(--sperrung-etikett);
    text-transform: uppercase;
    color: var(--text-3);
  }
  .etikett--marke { color: var(--marke); }

  /* UA-Vorgaben mit eigenen Margins zurücksetzen: figure bringt 1em 40px mit
     (die 40 px schieben jedes Zitat aus der Lesespalte), dl und dd je 1em bzw.
     einen Einzug, hr 0.5em. Abstände kommen bei uns aus gap und margin-block
     der Bausteine. */
  figure, figcaption, dl, dd, hr, legend, form { margin: 0; }

  /* fieldset bringt zusätzlich 2 px Inline-Margin, ein groove-Rahmen und
     Polsterung mit — im Katalog trägt es die Filtergruppen. */
  fieldset { margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  legend { padding: 0; }

  .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

  kbd {
    display: inline-block;
    padding: 0.1em 0.4em;
    background: var(--flaeche-3);
    border: var(--linie-breit) solid var(--linie-stark);
    border-radius: var(--radius-s);
    font-family: var(--schrift-mono);
    font-size: 0.9em;
    line-height: 1.4;
  }

  /* Destillations-Ergänzung (2026-07-28, Bestands-Enhancer-Kontrakt): reine
     JS-Bedienelemente der Kopfzeile (Theme-Schnellzugriff, Gast-Theme-Segment)
     erscheinen erst, wenn op-ui.js «hat-js» ans Wurzelelement gesetzt hat —
     ohne JS gilt schlicht prefers-color-scheme (Fundament-Regel CLAUDE.md).
     Explizite display-Zwillinge statt [hidden]: die Komponenten-Regeln setzen
     display selbst und schlügen das UA-[hidden] (LESSONS «hidden-Zwilling»). */
  .thema-schnell { display: none; }
  .hat-js .thema-schnell { display: inline-flex; }
  .segment--nur-js { display: none; }
  .hat-js .segment--nur-js { display: inline-flex; }
}