/* ==========================================================================
   PORTIERT AUS handoff/web/css/base.css am 12.09.2026 — INHALT UNVERAENDERT.
   Die semantische Indirektion (--surface/--fg/--line/--fg-strong/--fg-muted/--ok)
   ist der Kern dieser Datei: Bausteine lesen NIE Rohfarben, deshalb kippt
   .section--paper eine ganze Sektion ohne eine einzige Sonderregel.
   Skip-Link, :focus-visible (2px Orange, Offset 2) und prefers-reduced-motion
   sind Vertragsbestandteil — nicht wegstylen.
   SPRiCH — base.css   (Agent A · Fundament)
   Reihenfolge: tokens.css -> base.css -> components.css -> <seite>.css
   Bearbeitet NUR von Agent A. tokens.css ist generiert und tabu.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Semantische Variablen
   Alle Bausteine lesen diese, nie direkt die Rohfarben. Dadurch kippt eine
   Sektion mit .section--paper komplett auf hellen Grund, ohne dass eine
   einzige Komponente angefasst werden muss.
   -------------------------------------------------------------------------- */
:root {
  --bg:           var(--c-blue-900);  /* Seitengrund                         */
  --bg-alt:       var(--c-blue-800);  /* Sektionswechsel                     */
  --surface:      var(--c-blue-700);  /* Karten, Panels                      */
  --surface-2:    var(--c-blue-800);  /* Panel im Panel, Tabellenzeile       */
  --line:         var(--c-blue-600);  /* Rahmen, Trenner, Balkenspur         */
  --fg:           var(--c-light);     /* Fliesstext                          */
  --fg-strong:    var(--c-white);     /* Ueberschriften                      */
  /* T054 (Review 21.09.2026): --c-muted (#9AA6C8) misst auf der KARTE
     (--c-blue-700) genau 4.50:1 und wird dort in 12–14px gesetzt — die
     Schwelle, nicht ein Abstand davon. Die semantische Ebene hebt den Wert
     deshalb auf #AEB9D8 an: 7.09:1 auf dem Seitengrund, 6.31:1 auf dem
     Sektionswechsel, 5.58:1 auf der Karte. tokens.css bleibt unberuehrt —
     die Datei ist generiert, die Korrektur gehoert hierher.              */
  --fg-muted:     #AEB9D8;            /* Beschriftungen                      */
  --ok:           var(--c-green);     /* Fortschritt, bestanden              */
  --focus:        var(--c-orange);
  /* Kicker-Signalfarbe. Auf blauem Grund ORANGE, nicht Rot: gemessen
     12.09.2026 ist Rot auf Blau 900 nur 2.55:1 und auf Blau 700 2.01:1
     (12px fett Versal = KEIN WCAG-Grosstext, Schwelle bleibt 4.5:1).
     Orange erreicht 5.74:1 bzw. 4.52:1. BRAND.md Paragraf 6 erlaubt dem
     Kicker ausdruecklich "ZIS-Rot ODER ZIS-Orange" — das hier ist also
     eine Wahl INNERHALB des Systems, keine Abweichung davon.
     Auf Papier bleibt es Rot (4.82:1), siehe .section--paper unten. */
  --kicker:       var(--c-orange);

  --topbar-h: 76px;
  --ticker-h: 36px;
}

/* Helle Sektion: dieselben Namen, andere Werte. */
.section--paper,
.on-paper {
  --bg:        var(--c-paper);
  --bg-alt:    #EFE9DB;
  --surface:   var(--c-paper-card);
  --surface-2: #EFE9DB;
  --line:      var(--c-paper-line);
  --fg:        var(--c-paper-ink);
  --fg-strong: var(--c-ink);
  /* T054: #6B7688 auf Papier misst 4.07:1 und faellt damit durch. #5E6879
     misst 4.99:1 auf Papier, 4.65:1 auf dem Papier-Wechsel, 5.63:1 auf der
     weissen Karte. */
  --fg-muted:  #5E6879;
  /* T054/T057: --c-paper-green (#1B8F5A) misst auf der weissen Karte nur
     4.10:1 und traegt dort die Platz-Zaehler in 13px ("2 Plätze frei").
     #15784A misst 5.50:1 auf Weiss, 4.88:1 auf Papier, 4.54:1 auf dem
     Papier-Wechsel. Gemessen 22.09.2026. */
  --ok:        #15784A;
  --kicker:    var(--c-red);        /* Rot auf Papier = 4.82:1, AA */
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Gilt fuer Sprungmarken UND fuer die Rasterung unten: die Kopfleiste ist
     `position: sticky`, also muss jedes Ziel um ihre Hoehe tiefer anhalten,
     sonst rastet eine Sektion unter die Leiste. */
  scroll-padding-top: calc(var(--topbar-h) + var(--s3));

  /* ── Scroll-Rasterung an den Hauptbloecken ──────────────────────────────
     PROXIMITY, NICHT MANDATORY — und das ist der ganze Unterschied zwischen
     "die Seite rastet ein" und "die Seite nimmt mir das Scrollen ab":

     · proximity rastet nur, wenn der Scrollvorgang OHNEHIN nahe einer
       Sektionskante endet. Mitten in einer langen Sektion bleibt das Scrollen
       exakt so frei wie vorher.
     · mandatory zwingt nach JEDER Bewegung auf den naechsten Rastpunkt. Auf
       dieser Seite sind die Sektionen auf dem Handy 1000–1600px hoch, also
       ein Vielfaches des Sichtfensters; mandatory wuerde dort bei jedem
       kurzen Wisch zurueckspringen und das Lesen unmoeglich machen.

     Rastpunkte sind ausschliesslich die Sektionen der Seite (.section), nicht
     Karten oder Ueberschriften — gerastert wird an dem, was die Seite
     gliedert. `scroll-snap-stop` bleibt auf `normal`: ein schneller Wisch darf
     mehrere Bloecke ueberspringen, statt an jedem einzeln anzuhalten.       */
  scroll-snap-type: y proximity;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  overflow-x: clip;            /* bricht position:sticky nicht, anders als hidden */
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--fg-strong);
  text-wrap: balance;
}

p { text-wrap: pretty; }

img, svg, video, canvas, picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; text-decoration: none; }
/* Fliesstext-Links bleiben erkennbar. Bausteine mit Klasse regeln sich selbst. */
a:not([class]) {
  text-decoration: underline;
  text-decoration-color: var(--c-orange);
  text-underline-offset: 3px;
}
a:not([class]):hover { color: var(--fg-strong); }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

/* Sichtbarkeit ueber das hidden-Attribut schalten (js/ui.js nutzt das fuer
   Reiter-Panels). Schlaegt display-Regeln der Bausteine, sonst bleiben
   Flex-/Grid-Panels sichtbar. */
[hidden] { display: none !important; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

::selection { background: var(--c-orange); color: var(--c-ink); }

/* --------------------------------------------------------------------------
   3. Fokus — sichtbar, 2 px Orange, Offset 2 px (Vertrag)
   -------------------------------------------------------------------------- */
:focus { outline: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Bausteine mit eigenem Radius behalten ihre Form im Fokusring. */
.btn:focus-visible,
.tab:focus-visible,
.choice:focus-visible,
.slot:focus-visible,
.badge:focus-visible,
.topbar__cta:focus-visible,
.topbar__burger:focus-visible,
.field__input:focus-visible,
.avatar:focus-visible { border-radius: inherit; }

/* --------------------------------------------------------------------------
   4. Bewegung reduzieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Wer weniger Bewegung angefordert hat, bekommt kein Nachrasten: eine
     Scrollposition, die sich ohne Zutun noch einmal verschiebt, ist genau
     die Art Bewegung, die diese Einstellung abbestellt. */
  html { scroll-snap-type: none; }
  .section { scroll-snap-align: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   5. Layout
   -------------------------------------------------------------------------- */
.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Inhaltsbreite exakt var(--content); der Rand kommt aus var(--gutter). */
.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  background: var(--bg);
  color: var(--fg);
  padding-block: var(--s7);
  /* Rastpunkt: die OBERKANTE der Sektion, um scroll-padding-top versetzt.
     Eine Sektion, die hoeher ist als das Sichtfenster, faengt den Scroll
     dabei nicht ein — die Spezifikation laesst das Sichtfenster in einem
     ueberhohen Rasterbereich frei stehen. */
  scroll-snap-align: start;
}

.section--alt   { --bg: var(--c-blue-800); background: var(--c-blue-800); }
.section--paper { background: var(--c-paper); color: var(--fg); }

.section--tight { padding-block: var(--s5); }
.section--flush { padding-block: 0; }

/* --------------------------------------------------------------------------
   6. Typo-Skala
   Display/Ueberschriften: Source Sans 3 (900 / 700).
   Fliesstext ebenfalls Source Sans 3 400.
   Inter (--f-ui) nur fuer Wortzeichen, Labels, Badges, Buttons,
   Navigation und Kartentitel (.t-h3).
   Zeilenabstaende sind die Token-Paare als Verhaeltnis, damit sie beim
   fluiden Schrumpfen mitgehen: 104/112, 72/72, 54/48, 42/34, 30/22 ...
   -------------------------------------------------------------------------- */
.t-display-xl,
.t-display-l,
.t-h1,
.t-h2 {
  font-family: var(--f-display);
  color: var(--fg-strong);
  letter-spacing: var(--tr-display);
  text-wrap: balance;
}

.t-display-xl {
  font-weight: 900;
  font-size: clamp(40px, 7.8vw, var(--fs-display-xl));
  line-height: 0.929;
}

.t-display-l {
  font-weight: 900;
  font-size: clamp(32px, 5vw, var(--fs-display-l));
  line-height: 1;
}

.t-h1 {
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, var(--fs-h1));
  line-height: 1.125;
}

.t-h2 {
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, var(--fs-h2));
  line-height: 1.235;
}

/* Kartentitel — Inter SemiBold */
.t-h3 {
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: clamp(19px, 1.6vw, var(--fs-h3));
  line-height: 1.364;
  letter-spacing: 0;
  color: var(--fg-strong);
}

.t-body-l {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(17px, 1.25vw, var(--fs-body-l));
  line-height: 1.667;
}

.t-body {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.625;
}

.t-small {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.571;
}

/* Kicker, Badges, Spaltenkoepfe — Inter Bold, GROSS, +0.12em */
.t-label {
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: var(--fs-label);
  line-height: 1.333;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   7. Kleine Helfer
   -------------------------------------------------------------------------- */
.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Kanonischer Sprunglink. Unsichtbar bis Tastaturfokus, dann oben links
   ueber allem. Alle vier Seiten nutzen diese eine Klasse. */
.skip-link {
  position: fixed;
  left: var(--s2);
  top: var(--s2);
  z-index: 1000;
  padding: var(--s2) var(--s3);
  background: var(--c-orange);
  color: var(--c-ink);
  border-radius: var(--r-control);
  font-family: var(--f-ui);
  font-weight: 600;
  font-size: var(--fs-small);
  text-decoration: none;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  transform: translateY(calc(-100% - var(--s6)));  /* volle Freistellung: --s3 liess 8px im Viewport */
  transition: transform .18s ease;
}
.skip-link:focus,
.skip-link:focus-visible { transform: none; }

.muted  { color: var(--fg-muted); }
.strong { color: var(--fg-strong); }
.nowrap { white-space: nowrap; }
.center { text-align: center; }

/* --------------------------------------------------------------------------
   8. Haltepunkte  1200 / 900 / 640
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .section { padding-block: var(--s6); }
}

@media (max-width: 900px) {
  :root { --topbar-h: 64px; }
  .section { padding-block: var(--s6); }
}

@media (max-width: 640px) {
  :root { --topbar-h: 60px; }
  .section { padding-block: var(--s5); }
  body { font-size: var(--fs-body); }
}