/* =========================================================================
   base.css — Reset, Typografie, Bedienelemente
   -------------------------------------------------------------------------
   Grundregeln der Gestaltung:
     · Nichts ist eckig. Jede Ebene bekommt ihren Radius aus der Skala.
     · Keine Rahmen als Prinzip, keine schweren Schatten. Flächen trennen
       sich durch Helligkeitsstufe, Rundung und Abstand.
     · Farbe ist Aussage: Rot besitzt Handlung, Aktivzustand, Fortschritt
       und Gefahr — sonst nichts.
   ========================================================================= */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Die App ist ein festes Gerüst; gescrollt wird ausschließlich innerhalb
   der dafür vorgesehenen Bereiche. Ohne diese Sperre zieht ein
   scrollIntoView im Sprechtext-Panel das ganze Dokument mit. */
body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  letter-spacing: var(--track-tight);
  color: var(--fg-default);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: tabular-nums;
}

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

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  color: var(--fg-strong);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-display);
  line-height: var(--lh-snug);
  text-wrap: balance;
}
strong, b { font-weight: var(--fw-bold); color: var(--fg-strong); }
code {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: .1em .4em;
  border-radius: var(--r-xs);
  background: var(--bg-fill);
}

/* ---------------------------------------------------------------- Fokus */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-md);
}
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus-visible { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 100;
  transform: translateY(-200%);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--fg-onbrand);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-decoration: none;
  transition: transform var(--mo-fast) var(--ease-enter);
}
.skip-link:focus { transform: translateY(0); }

/* ==========================================================  Etikett  === */
/* Kleine, ruhige Beschriftungen. Versal nur ganz oben in der Hierarchie —
   der Rest bleibt gemischt gesetzt, damit die Oberfläche weich wirkt. */
.label,
.rail__kicker,
.wordbank__label,
.versus__label,
.quiz__title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  line-height: 1.2;
}

/* Zahlen sind tabellarisch, aber in derselben Schrift — nicht technisch. */
.num, .tl__year, .opener__n, .meter .num, .player__time,
.quiz__counter, .result__score, .point__mark, .step__n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-num);
  font-weight: var(--fw-bold);
}

/* ==========================================================  Tasten  ==== */
.btn {
  --btn-bg: var(--bg-fill);
  --btn-fg: var(--fg-strong);
  --btn-line: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-5);
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--mo-fast) var(--ease-move),
              color var(--mo-fast) var(--ease-move),
              transform var(--mo-instant) var(--ease-move);
}
.btn:hover:not(:disabled) { --btn-bg: var(--line-chassis); }
.btn:active:not(:disabled) { transform: scale(.96); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* Primär gehört dem Signalrot — die Handlung. */
.btn--primary {
  --btn-bg: var(--brand);
  --btn-fg: var(--fg-onbrand);
}
.btn--primary:hover:not(:disabled) { --btn-bg: var(--brand-hover); }

/* Sekundär, ruhig: Tinte. */
.btn--accent {
  --btn-bg: var(--accent);
  --btn-fg: var(--bg-canvas);
}
.btn--accent:hover:not(:disabled) { --btn-bg: var(--fg-default); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--fg-muted); }
.btn--ghost:hover:not(:disabled) { --btn-bg: var(--bg-fill); --btn-fg: var(--fg-strong); }

.btn--icon { width: 40px; min-height: 40px; padding: 0; }
.btn--lg { min-height: 48px; padding: 0 var(--sp-6); font-size: var(--fs-xs); }
.btn--sm { min-height: 32px; padding: 0 var(--sp-4); font-size: var(--fs-micro); }

.btn[aria-pressed="true"] {
  --btn-bg: var(--accent);
  --btn-fg: var(--bg-canvas);
}

/* ==========================================================  Chips  ==== */
/* Weiche Marken: gefüllte Pille, kein Rahmen. */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 4px var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--bg-fill);
  color: var(--fg-muted);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  line-height: 1.45;
  white-space: nowrap;
}
.chip--legal  { background: var(--accent-soft); color: var(--fg-default); }
.chip--must   { background: var(--brand); color: var(--fg-onbrand); }
.chip--ok     { background: var(--ok-soft); color: var(--ok-fg); }
.chip--bad    { background: var(--bad-soft); color: var(--bad-fg); }

/* ==================================================  Fachzonen  ======== */
.zone-land     { --zone: var(--zone-land);     --zone-bg: var(--zone-land-bg);     --zone-fg: var(--zone-land-fg); }
.zone-luft     { --zone: var(--zone-luft);     --zone-bg: var(--zone-luft-bg);     --zone-fg: var(--zone-luft-fg); }
.zone-sb       { --zone: var(--zone-sb);       --zone-bg: var(--zone-sb-bg);       --zone-fg: var(--zone-sb-fg); }
.zone-sensibel { --zone: var(--zone-sensibel); --zone-bg: var(--zone-sensibel-bg); --zone-fg: var(--zone-sensibel-fg); }

/* ==========================================================  Hilfen  === */
.stack > * + * { margin-top: var(--sp-5); }
.text-muted { color: var(--fg-muted); }
.text-read  { max-width: var(--read-max); line-height: var(--lh-read); text-wrap: pretty; }

hr.rule {
  height: 2px; margin: var(--sp-6) 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--line-subtle);
}

.scroll-y { overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.scroll-y::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll-y::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
  border: 3px solid transparent;
  background-clip: content-box;
}
.scroll-y::-webkit-scrollbar-track { background: transparent; }