/* ==========================================================================
   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                      */
  --fg-muted:     var(--c-muted);     /* 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);
  --fg-muted:  var(--c-paper-mutedd);
  --ok:        var(--c-paper-green);
  --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;
  scroll-padding-top: calc(var(--topbar-h) + var(--s3));
}

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

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

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