/* base.css — Reset und Grundtypografie.
   Alle Farb-, Schrift- und Maßangaben kommen aus CSS-Custom-Properties, die
   settingsRenderStyleTag() nach diesen Dateien in den <head> schreibt.
   Hier steht deshalb NIE ein Hex-Wert und NIE eine feste Schriftgröße. */

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

html {
  /* Fluide Wurzelgroesse: EIN Regler fuer die gesamte Typografie und alle
     rem-Abstaende. Das ersetzt clamp() in jeder einzelnen Rolle und haelt die
     Settings-Werte lesbar.

     HARTER STOPP an der Seitenbreite (layout.maxw): darueber waechst weder
     Schrift noch Abstand.

     DIE REGEL HIER IST NUR DER RUECKFALL fuer Pruefstaende, die base.css ohne
     den Style-Block der Seite laden. Die wirksame Regel erzeugt rootFontCss()
     (lib/settings.php) aus LAYOUT_MIN_W, ROOT_FS_MIN/MAX und layout.maxw und
     gibt sie HINTER den Stylesheets aus. Solange der obere Endpunkt hier stand
     (1440) und layout.maxw davonlief (1280), stand die Seite bei 1280 auf
     voller Breite, die Schrift aber erst bei 15,2 px (DEV-LOG [128]; das
     Gegenstueck, Schrift waechst in einer schon fixen Box weiter: DEV-LOG [26]).
     Der Selbsttest prueft, dass die Zahlen hier zu LAYOUT_MIN_W und zur
     Vorgabe von layout.maxw passen. Frueher: 1770, 1800, 1660. */
  font-size: clamp(13px, calc(9.03px + 0.4839vw), 16px);   /* 820px -> 13, 1440px -> 16 */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Der Header liegt fixiert über dem Inhalt — Ankersprünge müssen darunter
     landen, sonst verschwindet die Überschrift hinter der Leiste. */
  scroll-padding-top: var(--header-h);
}

/* UNTERE EINFRIERBREITE: 820 px (LAYOUT_MIN_W in lib/schema.php, DEV-LOG [127]).
   Zwischen BP_MOBILE (566) und 820 schrumpft das Desktop-Layout nicht weiter,
   das Fenster scrollt stattdessen seitlich. 820 ist der UNTERE Endpunkt des
   clamp() oben — die Schrift steht dort ohnehin schon still.
   overflow-x steht am html, damit das overflow-x von body NICHT mehr auf den
   Viewport uebertragen wird: das taete es, solange html "visible" hat, und
   dann gaebe es keinen Scrollbalken. 567px = BP_MOBILE + 1. */
@media (min-width: 567px) {
  html { min-width: 820px; overflow-x: auto; }
}

body {
  margin: 0;
  background: var(--ci-black);
  color: var(--ci-white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Die Divider-SVGs ragen minimal über die Kante. clip statt hidden: hidden
     machte body zum Scroll-Container, und neben dem overflow-x am html (oben)
     stuende dann ein zweiter Scrollbereich im Fenster (DEV-LOG [127]). */
  overflow-x: clip;
  /* Pfeil statt Textcursor ueber Text (Betreiber, DEV-LOG [132]). Nur der
     Zeiger: markieren und kopieren geht weiter. Vererbt sich ueberall hin, wo
     nichts Eigenes steht - Links behalten die Hand ueber die Browserregel
     (:any-link), Buttons und Kacheln tragen ihren Cursor ausdruecklich. */
  cursor: default;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img, video { height: auto; }

a { color: inherit; text-decoration: none; }
a:where(.rich a) { text-decoration: underline; text-underline-offset: 0.18em; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; }
/* Wo getippt wird, bleibt der Textcursor - sonst erbten Formularfelder und
   das offene Textfeld (edit.js setzt contenteditable="true") den Pfeil vom
   body. Checkbox und Radio erben weiter von ihrem Label (.fm__cb: Hand). */
input, textarea, [contenteditable="true"] { cursor: text; }
input:is([type="checkbox"], [type="radio"]) { cursor: inherit; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: absolute; left: 0; top: 0; z-index: 200;
  transform: translateY(-120%);
  padding: 0.7rem 1.1rem;
  background: var(--ci-1); color: var(--ci-white);
  transition: transform 0.15s;
}
.skip-link:focus { transform: translateY(0); }

/* ── Typo-Rollen ────────────────────────────────────────────────────────────
   DIE REGELN DER ROLLEN STEHEN NICHT MEHR HIER (DEV-LOG [110]): seit der
   Betreiber eigene Rollen anlegen kann, erzeugt typoRolesCss()
   (lib/schema.php) sie aus typoRoleOpts() und settingsRenderStyleTag()
   gibt sie hinter den Stylesheets aus — .t-<rolle> und .rich [data-t="…"]
   lesen dieselben Variablen, die Farbe fällt auf --sec-fg zurück, wenn die
   Rolle auf "auto" steht. Eine Liste hier wäre nach der ersten eigenen Rolle
   still unvollständig gewesen.

   Ein Absatz OHNE data-t setzt gar nichts und erbt die Rolle seines Textfeldes
   — einen Default gibt es bewusst nicht.                                    */

/* Redaktioneller Inhalt: Abstände zwischen Absätzen, sonst nichts. */
.rich > * + * { margin-top: 0.9em; }
.rich strong { font-weight: 700; }
.rich u { text-underline-offset: 0.18em; }
.rich em { font-style: italic; }

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