/* ============================================================
   informatik2.0 — Basis-Styles & Komponenten (Slice 34, #35)

   Tokens (Farben/Abstände/Schriften/Radien/Linien) kommen
   ausschließlich aus tokens.css (ADR-0004/ADR-0020) — hier
   stehen NUR var(--…)-Verweise, keine Farbliterale.
   Visuelle Referenz: docs/design/mockups/Komponenten.dc.html.

   Die Mockups haben keine Media Queries — das Responsive-
   Verhalten (≤ 700px Header kompakt, ≤ 400px einspaltig) ist
   im Geist des Designs definiert: Haarlinien und Mono-Labels
   bleiben, Grids fallen auf eine Spalte zurück.
   ============================================================ */

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Fokus-Ring auf ALLEN Interaktiven: 2.5px --focus mit Offset */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--space-3); }

a { color: var(--accent); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em; /* relativ zur umgebenden Schrift, kein Skalenwert */
  background: var(--accent-soft);
  padding: var(--space-1px) var(--space-5px);
  border-radius: var(--radius-sm);
}

.muted { color: var(--ink-muted); }

/* Mono-Kapitälchen-Label (≥ 11px, AA-korrigiert — README Punkt 3) */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Etabliertes A11y-Verstecken-Idiom (1px/-1px): kein Skalenwert, Standard-
   Muster zum visuellen Ausblenden bei erhaltener Screenreader-Zugänglichkeit
   — dokumentierte Ausnahme (#47), hier und an den zwei weiteren Stellen
   unten (.opt input, .seg-opt input), die demselben Muster folgen. */
.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;
}

/* ============================================================
   Layout: Header / Main / Footer
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-15px) var(--space-34px);
  background: var(--surface);
  border-bottom: var(--border-w) solid var(--line);
}

.site-logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-7px);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-17px);
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.site-logo span { color: var(--accent); }

.site-nav {
  display: flex;
  gap: var(--space-22px);
  font-size: var(--fs-mono);
}

.site-nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: var(--space-3px);
  border-bottom: var(--border-w-thick) solid transparent;
}

.site-nav a:hover { color: var(--ink); }

.site-nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.identity {
  display: flex;
  align-items: center;
  gap: var(--space-10px);
  font-size: var(--fs-mono);
  color: var(--ink-muted);
}

.identity-name { white-space: nowrap; }

/* Identität oben rechts ist zugleich der Zugang zur Profilseite (#37) —
   Name + Avatar bilden gemeinsam den Link, damit das Ziel ("wer bin ich /
   wo stelle ich das ein") an geteilten Schulrechnern eindeutig ist. */
.identity-link {
  display: flex;
  align-items: center;
  gap: var(--space-10px);
  color: inherit;
  text-decoration: none;
}

.identity-link:hover .identity-name { color: var(--ink); }

.avatar {
  width: 32px;  /* Bauteil-Eigenmaß (Avatar-Durchmesser) — Ausnahme, s. Datei-Kopf #47 */
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-12px);
  font-weight: 600;
  flex: none;
}

.logout-form { margin: 0; display: inline-flex; }

/* Theme-Toggle: Mono-Pill wie im Mockup (ks-toggle); ein Button,
   der aktive Modus wird über data-theme am Root hervorgehoben. */
.theme-toggle {
  display: inline-flex;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.theme-toggle .seg {
  padding: var(--space-5px) var(--space-13px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

:root:not([data-theme="dark"]) .theme-toggle .seg--light,
:root[data-theme="dark"] .theme-toggle .seg--dark {
  background: var(--accent);
  color: var(--accent-ink);
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--width-page);
  margin: 0 auto;
  padding: var(--space-38px) var(--space-34px) var(--space-60px);
}

/* Footer: Haarlinie oben, Mono-Kapitälchen (mockups/README.md Punkt 6) */
.site-footer {
  border-top: var(--border-w) solid var(--line);
  background: var(--bg);
}

.footer-inner {
  max-width: var(--width-page);
  margin: 0 auto;
  padding: var(--space-18px) var(--space-34px) var(--space-5);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.footer-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-18px);
}

.footer-nav a {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--ink);
  text-decoration: underline;
}

/* ============================================================
   Komponenten (Komponenten.dc.html)
   ============================================================ */

/* ---- Buttons. Legacy-Aliasse (.button…) werden von blatt.eta
   und den Admin-Seiten genutzt — gleiche Optik, alte Namen. ---- */
.btn,
.button {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-14px);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: var(--space-11px) var(--space-20px);
  border: none;
  line-height: 1.15;
  text-decoration: none;
  text-align: center;
}

.btn--primary,
.button-primary {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.btn--secondary,
.button-secondary,
.button {
  background: transparent;
  color: var(--ink);
  border: var(--border-w) solid var(--line-strong);
  font-weight: 500;
  padding: var(--space-10px) var(--space-19px);
}

/* Reihenfolge: primär gewinnt gegen die .button-Basisregel */
.btn--primary,
.button-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  padding: var(--space-11px) var(--space-20px);
}

.btn--quiet {
  background: none;
  border: none;
  color: var(--ink-faint);
  padding: var(--space-10px) var(--space-2);
  font-weight: 400;
}

.btn--danger {
  background: var(--no);
  color: var(--accent-ink);
  border: none;
  font-weight: 600;
}

.btn[disabled],
.button[disabled] {
  opacity: .42;
  cursor: not-allowed;
}

.btn--secondary:hover,
.button-secondary:hover,
.button:hover { border-color: var(--ink-faint); }

.btn--quiet:hover { color: var(--ink); border: none; }

/* ---- Formularfeld ---- */
.field { margin-bottom: var(--space-14px); text-align: left; }

.field > label {
  display: block;
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: var(--space-6px);
}

.inp {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-14px);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-10px) var(--space-3);
}

.inp::placeholder { color: var(--ink-faint); }

.inp:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-sm);
  border-color: var(--accent);
}

/* --fs-code statt --fs-mono (#42): Code-Eingabefeld, folgt der Schriftgrößen-Präferenz. */
.inp--mono { font-family: var(--font-mono); font-size: var(--fs-code); }
.inp--err { border-color: var(--no); }
.inp--ok { border-color: var(--ok); }

.fieldnote { font-size: var(--fs-11-5px); margin-top: var(--space-5px); color: var(--ink-muted); }
.fieldnote--err { color: var(--no); }
.fieldnote--ok { color: var(--ok); }

/* ---- MC-Option (echte Inputs, visuell versteckt — Mockup .opt) ---- */
.opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-11px) var(--space-13px);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14px);
  color: var(--ink-muted);
  cursor: pointer;
  position: relative;
}

.opt + .opt { margin-top: var(--space-2); }

.opt:focus-within {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

/* A11y-Verstecken-Idiom wie .sr-only (#47) */
.opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.opt .box {
  width: 20px;  /* Bauteil-Eigenmaß (Kontrollflächen-Größe) — Ausnahme #47 */
  height: 20px;
  border: var(--border-w) solid var(--line-strong);
  flex: none;
  display: grid;
  place-items: center;
  color: transparent;
  font-size: var(--fs-12px);
  line-height: 1;
}

.opt .box--rd { border-radius: var(--radius-full); }
.opt .box--cb { border-radius: var(--radius-xs); }

.opt input:checked ~ .box {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.opt:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
}

/* ---- Alert ---- */
.alert {
  display: flex;
  gap: var(--space-11px);
  align-items: baseline;
  padding: var(--space-13px) var(--space-15px);
  border-radius: var(--radius-sm);
  border: var(--border-w) solid;
  font-size: var(--fs-13-5px);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}

.alert .ic { font-family: var(--font-mono); font-weight: 700; flex: none; }

.alert b {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-right: var(--space-1);
}

.alert--ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ink); }
.alert--no   { background: var(--no-bg);   border-color: var(--no-line);   color: var(--ink); }
.alert--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--ink); }
.alert--info { background: var(--info-bg); border-color: var(--info-line); color: var(--ink); }

.alert--ok .ic,   .alert--ok b   { color: var(--ok); }
.alert--no .ic,   .alert--no b   { color: var(--no); }
.alert--warn .ic, .alert--warn b { color: var(--warn); }
.alert--info .ic, .alert--info b { color: var(--info); }

/* Legacy-Alias (login/kurs-beitritt vor Slice 34) */
.alert-error {
  display: block;
  padding: var(--space-13px) var(--space-15px);
  border-radius: var(--radius-sm);
  border: var(--border-w) solid var(--no-line);
  background: var(--no-bg);
  color: var(--ink);
  font-size: var(--fs-13-5px);
  margin: 0 0 var(--space-4);
}

/* ---- Badge ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-9px);
  border-radius: var(--radius-full);
  border: var(--border-w) solid;
}

.badge--ok   { color: var(--ok);        border-color: var(--ok); }
.badge--now  { color: var(--accent);    border-color: var(--accent); }
.badge--todo { color: var(--ink-faint); border-color: var(--line); }
.badge--warn { color: var(--warn);      border-color: var(--warn-line); }

/* ---- Card ---- */
.card {
  border: var(--border-w) solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--line-strong); }

.card-top {
  display: flex;
  align-items: center;
  gap: var(--space-10px);
  padding: var(--space-3) var(--space-14px);
  border-bottom: var(--border-w) solid var(--line);
}

.card-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border: var(--border-w) solid var(--line);
  padding: var(--space-3px) var(--space-7px);
  border-radius: var(--radius-sm);
}

.card-no {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-faint);
}

.card-body { padding: var(--space-13px) var(--space-14px) var(--space-15px); flex: 1; display: flex; flex-direction: column; }

.card-body h3, .card-body h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: 0 0 var(--space-6px);
}

.card-body p {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
  margin: 0;
  flex: 1;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: var(--space-9px);
  padding-top: var(--space-3);
}

/* ---- Abschnitts-Header ---- */
.sec-h {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin: 0 0 var(--space-18px);
  padding-bottom: var(--space-9px);
  border-bottom: var(--border-w) solid var(--line);
}

.sec-h .no {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--accent);
}

.sec-h h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  letter-spacing: -.01em;
  margin: 0;
}

.sec-h .note {
  margin-left: auto;
  font-size: var(--fs-small);
  color: var(--ink-faint);
}

/* Abschnitts-Header mit Linie rechts (Startseite: hp-sh) */
.sec-h--rule { border-bottom: none; padding-bottom: 0; align-items: center; }
.sec-h--rule .ln { flex: 1; height: var(--border-w); background: var(--line); }
.sec-h--rule a { font-size: var(--fs-small); color: var(--accent); text-decoration: none; }
.sec-h--rule a:hover { text-decoration: underline; }

/* ============================================================
   Seiten-Bausteine
   ============================================================ */

/* ---- Hero (Startseite) ---- */
.hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-30px);
  align-items: end;
  padding-bottom: var(--space-30px);
  border-bottom: var(--border-w) solid var(--line);
  margin-bottom: var(--space-30px);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-9px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--space-15px);
}

.eyebrow .dot { width: var(--size-dot); height: var(--size-dot); background: var(--accent); flex: none; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.08;
  margin-bottom: var(--space-14px);
}

.hero .lead {
  font-size: var(--fs-15-5px);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 46ch; /* Lesebreite in Zeichen, bewusst kein px-Skalenwert (#47) */
  text-wrap: pretty;
  margin: 0;
}

.hero-aside {
  border: var(--border-w) solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-18px);
}

.hero-aside .t {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-16px);
  margin-bottom: var(--space-1);
}

.hero-aside .s { font-size: var(--fs-small); color: var(--ink-muted); margin-bottom: var(--space-14px); }

.hero-aside .btn { width: 100%; }

.hero-aside .mono-label { display: block; margin-bottom: var(--space-10px); }

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* ---- Karten-Grid (Startseite/Blattliste) ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-14px);
}

.card-grid .card-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-faint);
  white-space: nowrap;
}

/* ---- Auth-/Dialog-Karte (Login, Kurs-Beitritt, 403) ---- */
.login-card {
  max-width: var(--width-dialog);
  margin: var(--space-48px) auto;
  padding: var(--space-28px) var(--space-5);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
}

.login-card .mono-label { display: block; margin-bottom: var(--space-3); }

.login-card h1 { font-size: var(--fs-h1); }

.login-card p { color: var(--ink-muted); font-size: var(--fs-14px); }

.join-form { display: grid; gap: var(--space-2); margin-top: var(--space-4); }

.join-form label {
  font-size: var(--fs-small);
  font-weight: 600;
}

.join-form input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-10px) var(--space-3);
}

.join-form input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-sm);
  border-color: var(--accent);
}

.join-form .btn, .join-form .button-primary { margin-top: var(--space-2); }

/* ---- Rechtsseiten ---- */
.legal-page { max-width: 62ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */ }

.legal-page h1 { font-size: var(--fs-h1); }

.legal-page h2 {
  margin-top: var(--space-5);
  font-size: var(--fs-16px);
}

.legal-page p, .legal-page li { color: var(--ink-muted); font-size: var(--fs-14-5px); line-height: 1.66; }

.legal-page strong, .legal-page b { color: var(--ink); }

/* ---- Fehlerseiten (404/500 — Fehlerseite.dc.html) ---- */
.er-main {
  flex: 1;
  display: grid;
  place-items: center;
  padding: var(--space-60px) var(--space-34px);
}

.er-box { width: 100%; max-width: 620px; /* Einzelmaß der Fehlerseiten-Box, keine Skalenstufe — Ausnahme #47 */ }

.er-code {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.er-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-96px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
}

.er-num--500 { color: var(--no); }

.er-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  border-left: var(--border-w) solid var(--line);
  padding-left: var(--space-4);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5px);
}

.er-tag b { color: var(--accent); font-weight: 600; }

.er-h1 { font-size: var(--fs-h1); margin-bottom: var(--space-3); }

.er-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-width: 52ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
  text-wrap: pretty;
  margin-bottom: var(--space-5);
}

.er-terminal {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  margin-bottom: var(--space-28px);
}

.er-terminal-lbl {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-9px) var(--space-13px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--accent-soft);
  border-bottom: var(--border-w) solid var(--line);
}

.er-terminal-lbl .dot { width: var(--size-dot); height: var(--size-dot); background: var(--accent); flex: none; }

.er-terminal pre {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--ink-muted);
  padding: var(--space-14px) var(--space-15px);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.er-terminal .k { color: var(--no); }
.er-terminal .c { color: var(--ink-faint); }

.er-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.er-help {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-faint);
}

.er-help a { color: var(--accent); text-decoration: none; }
.er-help a:hover { text-decoration: underline; }

/* Standalone-500-Seite (kein Template-Layout verfügbar) */
.er-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.er-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-15px) var(--space-34px);
  border-bottom: var(--border-w) solid var(--line);
  background: var(--surface);
}

/* ---- Fortschritt: Themen-Raster + Fortschrittsbalken (Slice 21/ADR-0019,
   Slice 22/ADR-0029 — seit Issue #63 auf EINER Seite zusammengeführt) ----
   Kartenraster pro Thema mit Fortschrittsbalken, ergänzt um abgeleitete
   Mastery-Badges (.topic-badge). Reine Token-Verwendung, keine neuen Farben
   (siehe scripts/check-contrast.mjs). */
.topic-progress-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-14px);
}

.topic-progress-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-14px) var(--space-4);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
}

.topic-progress-card--mastered { border-color: var(--ok-line); }

.topic-progress-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
}

.topic-progress-zahl {
  color: var(--ink-muted);
  font-size: var(--fs-small);
}

.topic-progress-track {
  height: var(--size-track-h);
  border-radius: var(--radius-full);
  background: var(--line);
  overflow: hidden;
}

.topic-progress-fill {
  display: block;
  height: 100%;
  background: var(--ok);
}

.topic-badges {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.topic-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6px);
  padding: var(--space-6px) var(--space-11px);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ok);
  background: var(--ok-bg);
  border: var(--border-w) solid var(--ok-line);
  border-radius: var(--radius-sm);
  width: fit-content;
}

.topic-badge--card { margin-top: var(--space-2px); }

.topic-badge-icon { font-family: var(--font-body); }

/* ---- Admin-Tabellen (bestehende Templates) ---- */
.admin-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-14px);
}

.admin-table th,
.admin-table td {
  padding: var(--space-9px) var(--space-3);
  border-bottom: var(--border-w) solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  background: var(--accent-soft);
}

.inline-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.inline-form input {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-6px) var(--space-9px);
}

/* ---- Handzeichen-Queue — Admin-Seite (Slice 27, #28, ADR-0038) ----
   FIFO-Liste (älteste Meldung zuerst): je Zeile Name, Aufgabe, Wartezeit und
   der „Erledigt"-Knopf. Trennung durch dünne Unterlinien statt umrandeter
   Kästen (dieselbe ruhige Grammatik wie die Aufgaben-Feedbacklinie). */
.hz-queue { list-style: none; margin: var(--space-4) 0; padding: 0; }

.hz-entry {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: var(--border-w) solid var(--line);
  flex-wrap: wrap;
}

.hz-name { font-weight: 600; color: var(--ink); }
.hz-aufgabe { color: var(--ink-muted); font-size: var(--fs-small); }
.hz-warte { margin-left: auto; color: var(--ink-faint); }
.hz-form { margin: 0; }
.hz-empty { padding: var(--space-4) 0; }

/* ---- Sichtbarkeits-Matrizen (Slice 17, #18) ---- */
.matrix-sec { margin: var(--space-6) 0; }
.matrix-sec .mono-label { display: block; margin-bottom: var(--space-1); }
.matrix-sec h2 { font-size: var(--fs-h2); margin: 0 0 var(--space-2); }

/* Waagerecht scrollbar, wenn viele Kurs-Spalten die Breite sprengen —
   der Seitenkörper selbst scrollt nie. */
.matrix-scroll { overflow-x: auto; }

.matrix { table-layout: auto; }

/* Zeilenkopf (Blatt-/Themen-Titel): linksbündig, normale Schrift statt der
   Mono-Versalien der Spaltenköpfe. Klebt beim Horizontal-Scroll links an. */
.matrix .matrix-row {
  font-family: var(--font-body);
  font-size: var(--fs-14px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--surface);
  position: sticky;
  left: 0;
  white-space: nowrap;
}

.matrix .matrix-col {
  text-align: center;
  white-space: nowrap;
}

.matrix-cell { text-align: center; }

.matrix-form {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

.matrix-check {
  width: 18px;  /* Bauteil-Eigenmaß (native Checkbox-Größe) — Ausnahme #47 */
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
}

.matrix-apply {
  padding: var(--space-5px) var(--space-3);
  font-size: var(--fs-small);
}

/* Progressive Verbesserung: sobald public/js/admin-matrix.js die Matrix
   übernommen hat, wirkt der Toggle sofort beim Anhaken — der Button entfällt. */
.matrix--enhanced .matrix-apply { display: none; }

/* Ein entfallenes Thema (Unterrichtsstand, Slice 74) ist in der Pool-Matrix
   nicht freischaltbar — die Zelle zeigt das statt einer Checkbox. */
.matrix-entfaellt { color: var(--ink-faint); font-size: var(--fs-small); }

/* Anstoß statt Automatik (Slice 74): Angebot nach dem Pool-Freischalten,
   den Unterrichtsstand direkt mitzusetzen. */
.stand-angebot { margin: var(--space-4) 0; }

.stand-angebot-aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.stand-angebot-aktionen form { margin: 0; }

/* ---- Unterrichtsstand (Slice 74, #74, ADR-0044) ---- */
.kurs-schalter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.kurs-schalter-aktiv {
  border-color: var(--ink);
  color: var(--ink);
  cursor: default;
}

.coverage-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}

/* Themen-Zeilenkopf wie in den Matrizen (.matrix .matrix-row): normale
   Schrift statt der Mono-Versalien der Spaltenköpfe. Doppel-Selektor wegen
   der Spezifität von `.admin-table th`. */
.coverage-table .coverage-topic {
  font-family: var(--font-body);
  font-size: var(--fs-14px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  background: var(--surface);
  white-space: nowrap;
}

.coverage-table .coverage-topic .badge { margin-left: var(--space-2); }

.coverage-stand {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.coverage-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-6px);
  white-space: nowrap;
  cursor: pointer;
}

.coverage-status input {
  accent-color: var(--accent);
  cursor: pointer;
}

.coverage-notiz {
  flex: 1 1 24ch;    /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
  min-width: 18ch;
  font-size: var(--fs-14px);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-6px) var(--space-9px);
}

/* ---- Klausur-Dossier (Slice 79, #79) ---- */
.dossier-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.dossier-markdown {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  resize: vertical;
}

/* ============================================================
   Blatt-Ansicht (Slice 38, #45 — Restyle auf die #35-Tokens/Komponenten)

   Kanonische Referenz: docs/design/mockups/Arbeitsblatt.dc.html (Seite),
   Arbeitsblatt-Zustaende.dc.html (Aufgaben-Zustände offen/richtig/falsch/
   Hinweis/Teilen). Struktur/Klassen hier, nicht deren Preview-JS.

   Verhalten bleibt unverändert (public/js/blatt.js): .task-form,
   .task-result[role=status] + seine Modifier-Klassen (task-result-ok/
   -nein/-hinweis) und der #teilen-dialog-Kontrakt sind Layout-Hooks, keine
   reinen Stilnamen — nur Optik geändert, nie umbenannt.
   ============================================================ */

.content-text { white-space: pre-line; }

.sheet-title {
  font-size: var(--fs-display);
  line-height: 1.08;
  margin-bottom: var(--space-3);
}

.sheet-intro { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-muted); }

/* Deck-Download-Link im Pfad-Kopf (#68) — nur ein schmuckloser Button unter
   Titel/Einleitung, kein eigenes Kastendesign (Gerüst bleibt settings-neutral,
   das eigentliche Deck hat sein eigenes CSS). */
.sheet-deck-link { margin: 0 0 var(--space-5); }

/* ---- Fortschrittsleiste (rein client-seitig aus dem sichtbaren Zustand
   berechnet — public/js/blatt.js liest die Anzahl .task-status--ok-Badges;
   es gibt keinen serverseitigen "gelöst"-Status pro Aufgabe im Blatt-Modell,
   daher startet die Leiste bei jedem Laden bei 0 von N). */
.sheet-progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-4) 0 var(--space-5);
  padding: var(--space-11px) var(--space-4);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
}

.sheet-progress-lbl { white-space: nowrap; }

.sheet-progress-track {
  flex: 1;
  display: flex;
  gap: var(--space-1);
  min-width: 0;
}

.sheet-progress-seg {
  flex: 1;
  height: var(--size-track-h);
  border-radius: var(--radius-full);
  background: var(--line);
}

.sheet-progress-seg--done { background: var(--ok); }

.sheet-progress-pct {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

.sheet-section { margin-top: var(--space-5); }

/* ---- Abschnittstext (Infobox/Lesetext) ----
   Das Content-Modell unterscheidet keine Infobox- von Lesetext-Abschnitten
   (nur optionale Überschrift + Text) — beide bekommen deshalb bewusst
   dieselbe ruhige "Kasten"-Optik (Arbeitsblatt.dc.html .ab-info/.ab-read
   vereinheitlicht), statt eine Unterscheidung zu erfinden, die die Daten
   nicht hergeben. */
.sheet-note {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
}

.sheet-note-text {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink-muted);
}

.sheet-note-text::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6em; /* relativ zur umgebenden Schrift (Initialen-Proportion), kein Skalenwert */
  line-height: .82;
  float: left;
  margin: var(--space-1) var(--space-9px) 0 0;
  color: var(--accent);
}

/* ---- Aufgaben-Karte ----
   Rail links (laufende Nummer + Deko-Motiv) + Hauptspalte (Kopf mit
   Typ-Label/Titel/Status, Körper mit dem Typ-Partial). */
.task {
  display: flex;
  margin: var(--space-5) 0;
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.task-rail {
  flex: none;
  width: 52px;  /* Bauteil-Eigenmaß (Rail-Breite) — Ausnahme #47 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-15px) 0 var(--space-14px);
  background: var(--accent-soft);
  border-right: var(--border-w) solid var(--line);
}

.task-rail-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-21px);
  line-height: 1;
  color: var(--accent);
}

/* Deko-Motiv (Kapitel-Rail, README §1): nur EIN Motiv, da v1 ausschließlich
   den Forest-Skin ausliefert — weitere Skins ergänzen hier eigene
   [data-skin="…"] .task-rail-deco-Regeln, ohne diese Struktur zu ändern. */
.task-rail-deco {
  width: 16px;  /* Bauteil-Eigenmaß (Deko-Kreis) — Ausnahme #47 */
  height: 16px;
  flex: none;
  border: var(--border-w-thick) solid var(--accent);
  border-radius: 50%; /* boxbezogen (16x16 Quadrat) — kein --radius-full, anderes Konzept */
}

.task-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.task-hd {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-13px) var(--space-4);
  border-bottom: var(--border-w) solid var(--line);
}

.task-hd-main { min-width: 0; }

.task-kind { margin-bottom: var(--space-3px); }

.task-hd .task-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-task);
  letter-spacing: 0;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}

/* Zustands-Badge (Arbeitsblatt-Zustaende.dc.html): offen/richtig/falsch.
   Wird von public/js/blatt.js NUR nach einer echten Check-Antwort gesetzt
   (nicht bei der Leer-/Netzwerk-/Sitzungs-Meldung) — startet serverseitig
   immer bei "Offen", da es keinen persistierten Lösungsstatus im
   Blatt-Modell gibt (siehe Kopf-Kommentar Fortschrittsleiste). */
.task-status {
  margin-left: auto;
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

.task-status--ok { color: var(--ok); }
.task-status--no { color: var(--no); }

.task-body { padding: var(--space-4); }

.task-stamm { font-size: var(--fs-task); line-height: var(--lh-task); color: var(--ink); }

/* MC-Optionen nutzen die kanonische .opt-Komponente (Komponenten.dc.html
   §05, templates/partials/option.eta) — .task-option ergänzt nur den
   Aufgaben-Fließtext-Token, ohne .opt's Box/Rahmen/Fokus zu überschreiben.
   Zwischen den Optionen sorgt die generische ".opt + .opt"-Regel für Abstand. */
.opt.task-option { font-size: var(--fs-task); }

.task-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  flex-wrap: wrap;
}

/* Feedback-Linie (Arbeitsblatt.dc.html .ab-fb): farbige Ober-Linie statt
   umrandeter Callout-Box, Icon per ::before (rein dekorativ — der
   Statustext selbst trägt die Information für Screenreader). Wenn
   sichtbar, nimmt sie die volle Aktionszeile ein (eigene Zeile unter dem
   Prüfen-Button); [hidden] blendet sie wie zuvor komplett aus. */
.task-result {
  flex: 1 0 100%;
  margin: 0;
  padding-top: var(--space-3);
  border-top: var(--border-w-thick) solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
}

.task-result::before {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-right: var(--space-2);
}

.task-result-ok { border-top-color: var(--ok); }
.task-result-ok::before { content: '✓'; color: var(--ok); }

.task-result-nein { border-top-color: var(--no); }
.task-result-nein::before { content: '✕'; color: var(--no); }

.task-result-hinweis { border-top-color: var(--hint); }
.task-result-hinweis::before { content: '!'; color: var(--hint); }

/* ---- Gestufte Hinweise + Musterlösung (Slice 6, #7, ADR-0034) ----
   Cross-Typ-Hilfe unter jeder Aufgabe: stufenweise Hinweise auf Abruf und die
   serverseitig freigeschaltete Musterlösung. Ruhige Sekundär-Optik statt
   Callout-Kasten — eine dünne Ober-Linie wie .task-actions, damit die Hilfe
   den Aufgaben-Fokus nicht überstrahlt (public/js/blatt.js blendet sie nur
   ein, wenn es etwas anzubieten gibt). */
.task-hilfe {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Explizite [hidden]-Regeln: die eigene `display`-setzende Klasse (.btn,
   Flex-Container) überschreibt sonst die UA-Regel `[hidden]{display:none}`
   (gleiche Spezifität, Autor gewinnt) — dieselbe Vorsorge wie bei
   .task-wort-chip[hidden]. */
.task-hilfe[hidden],
.task-hinweise[hidden],
.task-muster[hidden],
.task-muster-box[hidden],
.task-hinweis-mehr[hidden],
.task-aufgeben[hidden],
.task-hilfe-status[hidden] { display: none; }

.task-hilfe-hd { margin: 0 0 var(--space-3); color: var(--ink-muted); }

.task-hinweis-liste {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fs-task);
  color: var(--ink);
}
.task-hinweis-liste:empty { display: none; margin: 0; }

/* Musterlösung: durch eine kräftige linke Linie als „gelöst/freigeschaltet"
   markiert (kein grüner Kasten) — konsistent mit der Feedback-Linien-Grammatik
   des Arbeitsblatts. */
.task-muster-box {
  border-left: var(--border-w-thick) solid var(--ok);
  padding-left: var(--space-4);
}

.task-hilfe-status { margin: 0; font-size: var(--fs-small); color: var(--hint); }

/* ---- Schüler-Schwierigkeitsbewertung / Peer-Niveau (Slice 101, #101) ----
   Bewusst zurückhaltend (Briefing #35): kein Modal, kein Kasten, keine grelle
   Farbe — dünne Ober-Linie wie .task-hand/.task-hilfe, einzeilig unter dem
   Check-Ergebnis. Von public/js/blatt.js nach dem ersten Check erzeugt. */
.task-bewertung {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.task-bewertung[hidden] { display: none; }
.task-bewertung-frage { font-size: var(--fs-small); color: var(--ink-muted); }
.task-bewertung-skala { display: flex; gap: var(--space-1); }
/* Niveau-Knöpfe: ruhige Textziffern (btn--quiet), monospace für die Skala. */
.task-bewertung-btn {
  font-family: var(--font-mono);
  min-width: var(--space-6);
}
.task-bewertung-note[hidden] { display: none; }
.task-bewertung-note { font-size: var(--fs-small); color: var(--ink-muted); }

/* Peer-Niveau-Aggregat-Label an der Pool-Aufgabe: klein, sekundär, direkt
   unter dem Titel — keine Karte, kein Ornament (nur Anzahl + Mittel). */
.task-peer {
  margin: var(--space-3px) 0 0;
  font-size: var(--fs-label);
  color: var(--ink-faint);
}
/* Lehrer-Delta hängt in derselben Zeile, minimal abgesetzt. */
.task-peer-delta { color: var(--ink-muted); }

/* Sortier-Toggle (Autoren-/Schüler-Niveau) im Pool: schlichte Textlinks, der
   aktive trägt eine Akzent-Unterkante statt einer Fläche (Token-Grammatik wie
   der gewählte Feedback-Daumen). */
.pool-sort {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.pool-sort-lbl { color: var(--ink-muted); }
.pool-sort-opt {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: var(--space-1);
  border-bottom: var(--border-w-thick) solid transparent;
}
.pool-sort-opt:hover { color: var(--ink); }
.pool-sort-opt--aktiv { color: var(--ink); border-bottom-color: var(--accent); }

/* ---- Digitales Handzeichen — SuS-Seite (Slice 27, #28, ADR-0038) ----
   „Ich hänge hier" pro Aufgabe: ruhige Sekundär-Aktion mit derselben dünnen
   Ober-Linie wie .task-actions/.task-hilfe (kein Callout-Kasten). blatt.js
   blendet die Region erst mit JS ein (ohne JS kein toter Steuerknopf); der
   Status wird nur beim Laden gelesen — die SuS-Seite pollt nicht. */
.task-hand {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.task-hand[hidden],
.task-hand-melden[hidden],
.task-hand-zurueck[hidden],
.task-hand-status[hidden] { display: none; }

.task-hand-status { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

/* ---- Aufgaben-Melden (Slice 110, #110, Ausbau von #103/ADR-0052) ----
   Pro-Aufgabe-Auslöser für den globalen Meldungs-Dialog: bewusst ZURÜCKHALTEND
   (kleiner Textlink statt Button-Box, wie .pool-sort-opt) — es ist eine
   selten gebrauchte Nebenfunktion, kein primärer Handlungsaufruf neben
   Handzeichen/Hilfe. public/js/meldung.js blendet die Region erst mit JS ein
   (kein toter Steuerknopf ohne JS). */
.task-melden[hidden] { display: none; }
.task-melden { margin-top: var(--space-3); }
.task-melden-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--ink-muted);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: var(--space-1);
}
.task-melden-btn:hover { color: var(--ink); text-decoration-color: currentColor; }

/* ---- Anonymer Feedback-Kanal (Slice 28, #29, ADR-0041) ----
   EIN schlichtes Element am Blatt-Ende (Daumen + optionaler Freitext):
   gleiche ruhige Grammatik wie .task-hand/.task-hilfe (dünne Ober-Linie,
   kein Callout-Kasten). blatt.js blendet die Region erst mit JS ein
   (ohne JS kein totes Formular). */
.sheet-feedback {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-w) solid var(--line);
}
.sheet-feedback[hidden],
.sheet-feedback-form[hidden],
.sheet-feedback-status[hidden] { display: none; }

.sheet-feedback-hd { margin: 0 0 var(--space-2); color: var(--ink-muted); }
.sheet-feedback-hint { margin: 0 0 var(--space-4); font-size: var(--fs-small); }

.sheet-feedback-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.sheet-feedback-daumen { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* Gewählter Daumen: Akzent-Kontur statt neuer Zustandsfarbe (Token-Grammatik
   wie .badge--now) — blatt.js pflegt aria-pressed. */
.sheet-feedback-daumen .btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.sheet-feedback-text {
  font: inherit;
  font-size: var(--fs-14px);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-10px);
  width: 100%;
  max-width: 64ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
  resize: vertical;
}

.sheet-feedback-status {
  margin: var(--space-3) 0 0;
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

/* Admin-Feedback-Sicht (templates/admin-feedback.eta): Gruppen je Blatt mit
   Daumen-Bilanz + Freitexten. Freitexte mit derselben Links-Linien-Grammatik
   wie .task-muster-box, aber neutral (kein Urteil). */
.feedback-gruppe { margin-top: var(--space-5); }
.feedback-bilanz {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin: 0 0 var(--space-3);
}
.feedback-texte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feedback-text {
  border-left: var(--border-w-thick) solid var(--line);
  padding-left: var(--space-4);
}
.feedback-text-inhalt {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-task);
  white-space: pre-wrap; /* Zeilenumbrüche der Eingabe erhalten (escaped ausgegeben) */
}
.feedback-text-meta { margin: 0; }

/* ---- Globaler SuS-Feedback-Kanal (Slice 103, #103, ADR-0052) ----
   Footer-Auslöser + Dialog + Admin-Inbox. Ruhige, kantige Grammatik (kein
   Callout-Kasten, keine Rundungen über die Token-Skala hinaus, kein Gradient,
   keine farbige Kante) — Tokens wie überall. */
.meldung-trigger[hidden] { display: none; }

.meldung-dialog {
  max-width: 34rem;
  width: calc(100% - var(--space-6));
  padding: var(--space-5) var(--space-6);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.meldung-dialog::backdrop { background: rgba(0, 0, 0, .38); }

.meldung-dialog-hd { margin: 0 0 var(--space-2); }
.meldung-dialog-hint { margin: 0 0 var(--space-4); font-size: var(--fs-small); }

/* Aufgaben-Kontext-Zeile (Slice 110, #110): nur sichtbar bei einer Meldung
   aus einem Aufgaben-Trigger — Akzent-Unterkante statt Callout-Kasten,
   dieselbe zurückhaltende Grammatik wie .pool-sort-opt--aktiv. */
.meldung-dialog-context[hidden] { display: none; }
.meldung-dialog-context {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  font-size: var(--fs-small);
  border-bottom: var(--border-w-thick) solid var(--accent);
}

.meldung-textarea { resize: vertical; }

.meldung-typ {
  border: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.meldung-typ legend {
  padding: 0;
  margin-bottom: var(--space-6px);
  font-size: var(--fs-small);
  font-weight: 600;
}
.meldung-typ label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-14px);
}

.meldung-status[hidden] { display: none; }
.meldung-status {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.meldung-aktionen {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Admin-Inbox (templates/admin-meldungen.eta): eine Meldung pro Zeile mit
   der Links-Linien-Grammatik der Freitexte, neutral (kein Urteil). */
.meldung-liste {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.meldung {
  border-left: var(--border-w-thick) solid var(--line);
  padding-left: var(--space-4);
}
.meldung--erledigt { opacity: .55; }
.meldung-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}
.meldung-text {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-task);
  white-space: pre-wrap; /* Zeilenumbrüche der Eingabe erhalten (escaped ausgegeben) */
}
.meldung-form { margin: 0; }

/* Aufgaben-Kontext-Referenz (Slice 110, #110): NUR bei Meldungen aus einem
   Aufgaben-Trigger, ruhig zwischen Kopfzeile und Freitext. */
.meldung-aufgabe { margin: 0 0 var(--space-1); }

/* ---- Gruppen-Code (Slice 11, #12, ADR-0040) ----
   Freischaltbarer Kanal für gemeinsames Arbeiten: gleiche ruhige Grammatik
   wie .task-hand/.task-hilfe (dünne Ober-Linie, kein Callout-Kasten).
   blatt.js blendet die Region erst mit JS ein (ohne JS kein totes Formular). */
.task-gruppencode {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--line);
}
.task-gruppencode[hidden],
.task-gruppencode-aktiv[hidden],
.task-gruppencode-status[hidden] { display: none; }

.gruppencode-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.gruppencode-input { max-width: 16ch; }

.task-gruppencode-aktiv {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  color: var(--ink);
}
.task-gruppencode-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
}
.task-gruppencode-status {
  margin: var(--space-2) 0 0;
  font-size: var(--fs-small);
  color: var(--hint);
}

/* ---- Kurzantwort (Slice 9, #10) ----
   Ein getipptes Eingabefeld je Komponente (zahl/text/menge/tupel); die
   Teilkorrektheit erscheint als Liste unter dem Formular (Grammatik B). */
.task-feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: var(--fs-task);
}

.task-feld-label { font-weight: 600; color: var(--ink); }

.task-feld-spalten { font-weight: 400; color: var(--ink-muted); }

.task-kurzantwort-input {
  font: inherit;
  font-size: var(--fs-14px);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-10px);
  max-width: 32ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
}

.task-kurzantwort-input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-sm);
  border-color: var(--accent);
}

/* ---- Lückentext / Drag-the-Words (Slice 7, #8) ----
   Gemeinsames Markup-Muster für beide Typen: Fließtext mit interpunktierten
   Lücken (getippte Inputs bzw. Drop-Ziele + Wort-Chip-Pool). */
.task-luecken-text { font-size: var(--fs-task); line-height: 2.3; }

.task-luecke-input {
  display: inline-block;
  width: auto;
  min-width: 5ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
  font: inherit;
  font-size: var(--fs-14px);
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2px) var(--space-2);
  margin: 0 var(--space-2px);
}

.task-luecke-input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-sm);
  border-color: var(--accent);
}

.task-luecke-drop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 6ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
  min-height: 1.6em; /* relativ zur Schrift (Zeilenhöhe der Lücke), kein Skalenwert */
  padding: var(--space-2px) var(--space-10px);
  margin: 0 var(--space-2px);
  font-size: var(--fs-14px);
  color: var(--ink-muted);
  background: var(--surface);
  border: var(--border-w) dashed var(--line-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.task-luecke-drop:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-sm);
}

.task-luecke-drop-gefuellt { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }

.task-wortpool {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.task-wort-chip {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .03em;
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-6px) var(--space-11px);
  cursor: grab;
}

.task-wort-chip[hidden] { display: none; }
.task-wort-chip-ausgewaehlt { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---- DFA/NFA-Editor (Slice 15, #16) ----
   Per JS aufgebauter Automaten-Editor: zwei Sektionen (Zustände, Übergänge),
   Tastatur-bedienbar. Nutzt dieselben Tokens wie die übrigen Aufgabentypen.
   Bewusst nur token-getreu poliert statt auf das Übergangstabellen-Muster
   aus Komponenten.dc.html §10 umgebaut — das wäre eine strukturelle
   Neuentwicklung des Editors, kein reiner Restyle (Risiko für den
   bestehenden, ereignisreichen Interaktionscode). */
.task-automat-meta {
  font-size: var(--fs-small);
  color: var(--ink-muted);
  margin: 0 0 var(--space-3);
}

.dfa-sektion {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
}

.dfa-sektion > legend {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 var(--space-6px);
}

.dfa-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.dfa-zustand-input,
.dfa-select {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-10px);
}

.dfa-feld {
  display: flex;
  flex-direction: column;
  gap: var(--space-3px);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.dfa-zustand-liste,
.dfa-uebergang-liste {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.dfa-zustand-item,
.dfa-uebergang-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.dfa-zustand-name,
.dfa-uebergang-text {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
}

.dfa-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5px);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  cursor: pointer;
}

.dfa-entfernen {
  margin-left: auto;
  padding: var(--space-5px) var(--space-3);
  font-size: var(--fs-small);
}

/* ---- Grammatik B „Liste unterm Feld" (docs/design/mockups/
   Komponenten.dc.html §08) — verbindlich für Teilkorrektheit-Feedback ALLER
   Typ-Slices: eine Kopfzeile + je fehlerhaftem Element ein Eintrag mit
   Positionsangabe. Der richtige Inhalt wird NIE genannt (nur die Position). */
.task-detail-liste {
  margin-top: var(--space-3);
  border-top: var(--border-w-thick) solid var(--no);
  padding-top: var(--space-11px);
}

.task-detail-head {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--no);
  margin: 0 0 var(--space-9px);
}

.task-detail-item {
  display: grid;
  grid-template-columns: 90px 1fr; /* Feste Positions-Spalte, Einzelmaß ohne Wiederverwendung — Ausnahme #47 */
  gap: var(--space-11px);
  align-items: baseline;
  padding: var(--space-5px) 0;
  font-size: var(--fs-13-5px);
  color: var(--ink-muted);
}

.task-detail-pos { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--no); font-weight: 600; }

/* ---- Parsons Problems (Slice 12, #13) ----
   Zeilenpool + Sequenz: Zeilen-Chips wandern per Drag&Drop ODER per Klick/
   Pfeiltasten zwischen Pool und Sequenz (public/js/aufgaben/parsons.js). */
.task-parsons-sequenz {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0 0 var(--space-3);
  padding: var(--space-2);
  min-height: 2.6em; /* relativ zur Schrift (Mindesthöhe ~1 Zeile), kein Skalenwert */
  border: var(--border-w) dashed var(--line-strong);
  border-radius: var(--radius-sm);
}

.task-parsons-sequenz:empty::before {
  content: 'Ziehe Zeilen hierher oder klicke sie im Zeilenpool an.';
  color: var(--ink-muted);
  font-size: var(--fs-label);
}

.task-parsons-pool {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.task-parsons-chip {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  white-space: pre;
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-6px) var(--space-11px);
  cursor: grab;
}

.task-parsons-chip-platziert { border-color: var(--accent); background: var(--accent-soft); }

/* ---- SQL (Slice 14, #15) ----
   Sichtbares Datenbank-Setup (Transparenz wie in echten Tools), Query-Textarea
   und Feedback: Fehlermeldung, eigene Ergebnistabelle, erwartete Anzahlen. */
.task-sql-datenbank {
  margin: var(--space-3) 0;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken, var(--surface));
}

.task-sql-datenbank > summary {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-11px);
  cursor: pointer;
}

.task-sql-setup {
  margin: 0;
  padding: 0 var(--space-11px) var(--space-11px);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: 1.5;
  color: var(--ink);
}

/* Konsole: Label-Leiste + Eingabe als eine optische Einheit
   (Arbeitsblatt.dc.html .ab-query) statt getrennter Label+Textarea. */
.task-sql-console {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.task-sql-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  padding: var(--space-2) var(--space-11px);
  background: var(--accent-soft);
  border-bottom: var(--border-w) solid var(--line);
}

.task-sql-input {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-code); /* #42: folgt der Schriftgrößen-Präferenz, vormals fix --fs-14px */
  line-height: 1.5; /* #61: explizit, damit der Zeilennummern-Gutter zeilenbündig ausrichtet */
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-radius: 0; /* bewusste Nullstellung (grenzt an den Konsolen-Rahmen an), kein Skalenwert */
  padding: var(--space-11px);
  resize: vertical;
}

.task-sql-input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-inset);
}

.task-sql-feedback {
  margin-top: var(--space-3);
  border-top: var(--border-w-thick) solid var(--no);
  padding-top: var(--space-11px);
}

.task-sql-meldung {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--no);
  margin: 0 0 var(--space-9px);
}

.task-sql-tabellen,
.task-sql-erwartet,
.task-sql-ergebnis-titel,
.task-sql-gekuerzt {
  font-size: var(--fs-13-5px);
  color: var(--ink-muted);
  margin: 0 0 var(--space-6px);
}

.task-sql-ergebnis {
  border-collapse: collapse;
  margin: var(--space-1) 0 var(--space-9px);
  font-size: var(--fs-13-5px);
  display: block;
  overflow-x: auto;
}

.task-sql-ergebnis th,
.task-sql-ergebnis td {
  border: var(--border-w) solid var(--line);
  padding: var(--space-1) var(--space-10px);
  text-align: left;
}

.task-sql-ergebnis th {
  font-family: var(--font-mono);
  font-size: var(--fs-12px);
  color: var(--ink-muted);
  font-weight: 600;
}

.task-sql-null { color: var(--ink-muted); font-style: italic; }

/* ---- Code-Aufgabe (Slice 75, #75): Gerüst-Hälften + Editor als EINE
   optische Code-Einheit (Muster: .task-sql-console). Die read-only
   Gerüst-Hälften liegen auf der Seiten-Fläche (--bg, gedämpfte Schrift),
   die editierbare Textarea dazwischen auf --surface — der bearbeitbare
   Ausschnitt hebt sich ab, ohne dass ein zweiter Rahmen entsteht.
   Schriftgröße überall --fs-code: folgt der Schriftgrößen-Präferenz
   (data-fontsize, #42-Muster), Gerüst und Eingabe bleiben bündig. */
.task-code-console {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.task-code-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0;
  padding: var(--space-2) var(--space-11px);
  background: var(--accent-soft);
  border-bottom: var(--border-w) solid var(--line);
}

.task-code-geruest {
  margin: 0;
  padding: var(--space-2) var(--space-11px);
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.5;
  color: var(--ink-muted);
  background: var(--bg);
  overflow-x: auto;
}

.task-code-geruest--vorher { border-bottom: var(--border-w) solid var(--line); }
.task-code-geruest--nachher { border-top: var(--border-w) solid var(--line); }

.task-code-input {
  display: block;
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-code); /* #42: folgt der Schriftgrößen-Präferenz */
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-radius: 0; /* bewusste Nullstellung (grenzt an den Konsolen-Rahmen an), kein Skalenwert */
  padding: var(--space-2) var(--space-11px);
  resize: vertical;
  tab-size: 4;
}

.task-code-input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-inset);
}

/* ---- Zeilennummern-Gutter (#61, aus #42 abgespalten): schmale Nummern-Spalte
   links neben einer Code-Textarea (SQL + Java). Progressive Enhancement —
   public/js/blatt.js baut den Wrapper .task-code-editor mit .task-lineno-gutter
   nur, wenn die User-Präferenz data-zeilennummern="an" ist; ohne JS bleibt die
   nackte Textarea. Gutter und Textarea teilen Font, Zeilenhöhe (1.5) und
   vertikales Padding, damit Nummern und Code-Zeilen bündig laufen; die
   Ausrichtung folgt --fs-code (Schriftgrößen-Präferenz, #42) automatisch. Der
   Gutter liegt auf --bg (wie die read-only Gerüst-Hälften), die editierbare
   Textarea auf --surface — der bearbeitbare Ausschnitt hebt sich ab. */
.task-code-editor {
  display: flex;
  align-items: stretch;
}

.task-lineno-gutter {
  flex: 0 0 auto;
  min-width: 2ch;
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  line-height: 1.5;
  white-space: pre;
  text-align: right;
  color: var(--ink-faint);
  background: var(--bg);
  border-right: var(--border-w) solid var(--line);
  padding: var(--code-pad-y, var(--space-2)) var(--space-2);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* Die Textarea füllt den Rest der Zeile; min-width:0 erlaubt ihr, innerhalb des
   Flex-Containers zu schrumpfen (sonst sprengt langer Code das Layout, statt zu
   scrollen). Ohne Umbruch (nowrap), damit visuelle Zeilen == logische Zeilen
   sind und die Nummern exakt passen — Code soll ohnehin nicht umbrechen. */
.task-code-editor .task-code-input,
.task-code-editor .task-sql-input {
  flex: 1 1 auto;
  min-width: 0;
}

.task-code-nowrap {
  white-space: pre;
  overflow-x: auto;
}

/* Das SQL-Feld hat rundum mehr Innenabstand (--space-11px) als das Java-Feld
   (--space-2, bündig zu den Gerüst-Hälften); der Gutter zieht sein vertikales
   Padding je Kontext nach, damit Zeile 1 in beiden Feldern auf gleicher Höhe
   startet. */
.task-sql-console .task-lineno-gutter {
  --code-pad-y: var(--space-11px);
}

/* Feedback-Block unterm Formular (Muster: .task-sql-feedback): rote
   Trennkante bei Fehlern, grüne bei „alle Tests bestanden". */
.task-code-feedback {
  margin-top: var(--space-3);
  border-top: var(--border-w-thick) solid var(--no);
  padding-top: var(--space-11px);
}

.task-code-feedback--ok { border-top-color: var(--ok); }

.task-code-meldung {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--no);
  margin: 0 0 var(--space-9px);
}

.task-code-fehlerliste,
.task-code-tests {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
}

.task-code-fehlerliste li,
.task-code-tests li { margin: 0 0 var(--space-1); }

.task-code-test--ok { color: var(--ok); }
.task-code-test--no { color: var(--no); }
.task-code-test--skip { color: var(--ink-faint); }

/* Kompilierfehler: rohe javac-Meldung (mono, wie BlueJ) je in eigener Zeile,
   darunter die schülernahe Erklärung — Fließtext-Schrift + gedämpft, damit
   sie sich klar vom Compiler-Signal absetzt (ergänzt, ersetzt nicht). */
.task-code-fehler-roh { display: block; }
.task-code-fehler-hilfe {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--ink-faint);
  margin-top: 2px;
  padding-left: var(--space-2);
}
.task-code-fehler-hilfe::before { content: '→ '; }

/* ---- Trace-Tabelle (Slice 13, #14; #52 — eigenes CSS statt Browser-Default-
   Tabellenstyling). Variablen (Spalten) × Schritte (Zeilen), templates/
   aufgaben/trace-table.eta. Die Start-Zeile zeigt die GEGEBENEN Startwerte
   (Akzent-Unterlegung — dasselbe „gegeben/gefüllt"-Muster wie
   .task-luecke-drop-gefuellt, nur als Zeilen- statt Einzelfeld-Fläche); jede
   SuS-Zelle ist ein Text-Input (.task-trace-input), das Richtig/Falsch nach
   dem Prüfen wie überall über .inp--err/.inp--ok markiert
   (public/js/aufgaben/trace-table.js). */
.task-trace-wrap {
  margin: var(--space-3) 0;
  overflow-x: auto; /* viele Spalten/Schritte scrollen im Rahmen, nie die Seite */
}

.task-trace-table {
  border-collapse: collapse;
  font-size: var(--fs-13-5px);
}

.task-trace-table th,
.task-trace-table td {
  border: var(--border-w) solid var(--line);
  padding: var(--space-2) var(--space-10px);
  text-align: center;
}

/* Kopfzeile optisch klar von den Wertzeilen abgesetzt (kräftigere Linie statt
   reiner Fett-/Farbwechsel — dieselbe Trennlinien-Sprache wie .task-actions). */
.task-trace-table thead th {
  font-weight: 600;
  color: var(--ink-muted);
  border-bottom: var(--border-w-thick) solid var(--line-strong);
}

/* Zeilen-„Label"-Zellen (Schrittname/„Start") sind Text, keine Werte —
   linksbündig statt zentriert, gedeckter als der Zahlenrest der Zeile.
   Spezifischer als die generische th/td-Regel oben (Klasse+Typ+Attribut),
   damit die Ausrichtung unabhängig von der Regel-Reihenfolge greift. */
.task-trace-table tbody th[scope="row"] {
  text-align: left;
  font-weight: 400;
  color: var(--ink-muted);
  white-space: nowrap;
}

.task-trace-startzeile th,
.task-trace-startzeile td {
  background: var(--accent-soft);
}

.task-trace-given {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  color: var(--ink);
}

.task-trace-input {
  width: 6ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-1px) var(--space-6px);
}

/* Höhere Spezifität als die generischen .inp--err/.inp--ok (Klasse+Klasse
   statt nur Klasse) — der Zustand gewinnt damit IMMER gegen die Grundfarbe
   von .task-trace-input, unabhängig davon, welche der beiden Regeln im
   Stylesheet zuerst steht (bei gleicher Spezifität entschiede sonst nur die
   Reihenfolge). */
.task-trace-input.inp--err { border-color: var(--no); }
.task-trace-input.inp--ok { border-color: var(--ok); }

/* Zuletzt: Fokus gewinnt optisch auch gegen eine gesetzte Fehler-/Richtig-
   Farbe (dieselbe Schichtung wie beim generischen .inp:focus-visible). */
.task-trace-input:focus-visible {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-sm);
  border-color: var(--accent);
}

/* ---- Teilen-Dialog (Slice 25 — Restyle nach Arbeitsblatt-Zustaende.dc.html
   Zustand 5 „Teilen-Dialog"): Kopfzeile mit Titel + Schließen-Kreuz, Optionen
   als echte .opt-Radios (Komponenten.dc.html §05). Die Schließen-Semantik
   bleibt identisch — public/js/blatt.js verdrahtet jedes Element mit
   [data-teilen-schliessen] innerhalb des Dialogs, jetzt auch das Kreuz. */
.teilen-dialog {
  max-width: var(--width-dialog);
  width: calc(100% - 2rem); /* Viewport-relative Dialogbreite mit rem-Rand, kein px-Skalenwert (#47) */
  padding: 0;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.teilen-dialog::backdrop { background: var(--scrim); }

.teilen-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-14px) var(--space-4);
  border-bottom: var(--border-w) solid var(--line);
}

.teilen-close {
  background: none;
  border: none;
  font-size: var(--fs-17px);
  line-height: 1;
  color: var(--ink-faint);
  cursor: pointer;
  padding: var(--space-2px);
}

.teilen-close:hover { color: var(--ink); }

.teilen-form { display: grid; gap: var(--space-14px); padding: var(--space-18px) var(--space-22px) var(--space-22px); }

.teilen-title { margin: 0; font-size: var(--fs-h3); font-family: var(--font-display); }

.teilen-optionen { display: grid; margin: 0; padding: 0; border: 0; }

.teilen-option { font-size: var(--fs-small); }

.teilen-status { margin: 0; font-weight: 600; color: var(--no); }

.teilen-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ============================================================
   Selbstlernpfad — Form D (#82; entschieden in der Mockup-Session #54,
   docs/design/stunden-workflow.md, Abschnitt "Mockup-Ergebnis"; Referenz-
   Implementierung war templates/prototyp/selbstlernpfad-d.eta, seit #82
   gelöscht — dies ist die einzige verbliebene Quelle dieser Regeln).

   Zentrierte Lesespalte (B), max. 800px — echt bildschirmmittig: die
   Stationen-Leiste hängt ABSOLUT links daneben (.pfad-rail), drückt die
   Spalte also nie zur Seite. Auf Viewports, die für Spalte + Leiste + Gap
   auf beiden Seiten nicht reichen (< ~1330px, Rechnung s. u.), wird die
   Leiste zur STICKY Chip-Zeile unter dem Site-Header (A) — die Spalte
   bleibt dabei bei max. 800px gedeckelt.
   ============================================================ */
.pfad-grid { position: relative; max-width: 800px; margin: 0 auto; }

.pfad-rail { position: absolute; top: 0; bottom: 0; right: calc(100% + var(--space-6)); width: 232px; }
.pfad-rail-inner { position: sticky; top: var(--space-5); }
.pfad-rail-kicker { color: var(--accent); margin-bottom: var(--space-3); }
.pfad-stations { list-style: none; margin: 0; padding: 0; border-left: var(--border-w) solid var(--line-strong); }
.pfad-station-link {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); margin-left: calc(-1 * var(--border-w));
  border-left: var(--border-w-thick) solid transparent;
  color: var(--ink-muted); text-decoration: none; font-size: var(--fs-small); line-height: 1.4;
}
.pfad-station-link:hover { color: var(--ink); }
.pfad-station-link[aria-current="true"] { border-left-color: var(--accent); color: var(--ink); }
.pfad-station-link[aria-current="true"] .pfad-station-num { color: var(--accent); }
.pfad-station-num { font-family: var(--font-mono); font-size: var(--fs-label); flex: none; }
.pfad-station-check { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-faint); margin-left: auto; }
.pfad-station-spick { margin-top: var(--space-2); border-top: var(--border-w) solid var(--line); padding-top: var(--space-2); }

/* Lesespalte: Eyebrow, Display-Titel, kursive Einleitung. */
.pfad-head { margin: var(--space-5) 0 var(--space-6); }
.pfad-titel { font-family: var(--font-display); font-size: 38px; line-height: 1.15; margin: var(--space-3) 0; }
.pfad-intro { font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-muted); font-style: italic; }

.pfad-step { border-top: var(--border-w) solid var(--line-strong); padding-top: var(--space-5); margin-bottom: var(--space-6); scroll-margin-top: var(--space-5); }
.pfad-step-head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
.pfad-step-num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--accent); }
.pfad-step-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--fs-21px); }

/* Blocksatz + Silbentrennung (lang="de" am Root, templates/layout.eta):
   Erzähltext schließt rechts bündig mit den Aufgabenboxen ab — ein
   konsistentes Bild. */
.pfad-text { font-size: var(--fs-read); line-height: var(--lh-read); margin: 0 0 var(--space-4); text-align: justify; hyphens: auto; }
.pfad-step--erster .pfad-text:first-of-type::first-letter {
  font-family: var(--font-display); font-size: 52px; line-height: .82;
  float: left; padding: 6px 8px 0 0; color: var(--accent); font-weight: 600;
}

/* ---- Blocktyp `code` (#82): narrativer Codeausschnitt, kein Task —
   Muster: .task-code-geruest (dieselbe Bühne/Bg, kein aktiver Editor). */
.lernblock-code { margin: var(--space-4) 0; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.lernblock-code-label {
  display: block; margin: 0; padding: var(--space-2) var(--space-11px);
  background: var(--accent-soft); border-bottom: var(--border-w) solid var(--line); color: var(--ink-muted);
}
.lernblock-code-pre {
  margin: 0; padding: var(--space-3) var(--space-11px);
  font-family: var(--font-mono); font-size: var(--fs-code); line-height: 1.5;
  color: var(--ink); background: var(--bg); overflow-x: auto;
}

/* ---- Blocktyp `tabelle` (#82): die im Prototyp nicht setzbare Beispiel-
   tabelle. Eigener Scroll-Container (nie horizontales Scrollen der Spalte
   selbst, README-Vorgabe für Responsive). */
.lernblock-tabelle-wrap { margin: var(--space-4) 0; overflow-x: auto; }
.lernblock-tabelle { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.lernblock-tabelle th,
.lernblock-tabelle td { border: var(--border-w) solid var(--line); padding: var(--space-2) var(--space-3); text-align: left; }
.lernblock-tabelle th {
  font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); background: var(--accent-soft); font-weight: 600;
}

/* ---- Spickzettel: Karteikarte fix am Pfadende (#82) — nur gerendert, wenn
   die Content-Datei `spickzettel` trägt (keine leere Karte). */
.spick--karte { background: var(--surface); border: var(--border-w) solid var(--line-strong); padding: var(--space-5); position: relative; }
.spick-tab { position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-4); background: var(--accent); color: var(--accent-ink); padding: var(--space-1) var(--space-3); letter-spacing: var(--ls-caps); }
.spick-merksatz { font-family: var(--font-display); font-style: italic; font-size: var(--fs-17px); margin: var(--space-2) 0 var(--space-4); }
.spick-begriffe { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.spick-begriffe dt { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent); white-space: nowrap; }
.spick-begriffe dd { margin: 0; font-size: var(--fs-14-5px); line-height: var(--lh-body); }

/* ---- Responsive: eigene, feature-spezifische Breakpoints (Layout-Mathe
   Spalte+Leiste, nicht Teil der generischen Skala unten) — bewusst hier
   statt im globalen Responsive-Block, damit die Rechnung neben der Regel
   steht, die sie begründet. */

/* Zu wenig Platz links neben der 800px-Spalte für die Leiste
   (800 + 2 × [232 + Abstand] ≈ 1330): Leiste wird zur STICKY Chip-Zeile
   über dem Text — bleibt beim Scrollen oben stehen, Scrollspy markiert
   weiter die aktuelle Station. Die Spalte selbst bleibt bei max. 800px,
   damit Aufgabenboxen unterhalb des Umbruchs nie breiter werden als auf
   dem Desktop. */
@media (max-width: 1330px) {
  .pfad-rail {
    /* dockt unter dem sticky Site-Header an; Höhe misst public/js? Nein —
       das Inline-Script des Templates (kein eigenes Modul nötig). */
    position: sticky; top: var(--pfad-header-h, 60px); bottom: auto; right: auto; width: auto;
    z-index: 15; background: var(--bg);
    border-bottom: var(--border-w) solid var(--line);
    margin-bottom: var(--space-4);
  }
  .pfad-rail-inner { position: static; display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-2) 0; }
  .pfad-rail-kicker { margin: 0; white-space: nowrap; }
  .pfad-stations { display: flex; flex-wrap: wrap; gap: var(--space-1); border-left: none; }
  .pfad-station-link { border-left: none; border-bottom: var(--border-w-thick) solid transparent; padding: var(--space-1) var(--space-2); }
  .pfad-station-link[aria-current="true"] { border-bottom-color: var(--accent); }
  .pfad-station-titel { display: none; }
  .pfad-station-spick { margin: 0; border-top: none; padding-top: var(--space-1); }
  .pfad-station-spick .pfad-station-titel { display: inline; }
}
@media (max-width: 700px) {
  .pfad-rail-kicker { display: none; }
  .pfad-titel { font-size: var(--fs-h1); }
}
@media (max-width: 640px) {
  .spick-begriffe { grid-template-columns: 1fr; gap: var(--space-1) 0; }
  .spick-begriffe dd { margin-bottom: var(--space-3); }
}

/* Drucken (Akzeptanz #82): NUR die Spickzettel-Karte. Global gültig wäre
   das ein Site-weiter Print-Bug (jede andere Seite würde leer drucken) —
   deshalb an eine Body-Klasse gebunden, die templates/layout.eta NUR setzt,
   wenn die aktuelle Selbstlernseite tatsächlich einen Spickzettel trägt
   (it.bodyClass, src/routes/selbstlern.ts). Seiten ohne Spickzettel
   drucken unverändert normal (kein .spick--karte vorhanden, keine
   Body-Klasse gesetzt — diese Regeln greifen dann gar nicht). */
@media print {
  body.pfad-hat-spickzettel * { visibility: hidden; }
  body.pfad-hat-spickzettel .spick--karte,
  body.pfad-hat-spickzettel .spick--karte * { visibility: visible; }
  body.pfad-hat-spickzettel .spick--karte { position: absolute; left: 0; top: 0; border: none; }
  .spick-print, .spick-tab { display: none; }
}

/* ============================================================
   Komponenten-Übersicht (/dev/komponenten)
   ============================================================ */

.dev-intro { max-width: 60ch; /* Lesebreite in Zeichen, kein px-Skalenwert (#47) */ margin-bottom: var(--space-34px); }
.dev-intro p { font-size: var(--fs-body); color: var(--ink-muted); }

.dev-sec { margin-bottom: var(--space-6); }

/* Theme-Scope-Panels: zeigen dieselben Komponenten je Theme.
   Funktioniert, weil die Token-Blöcke auf [data-theme="…"]
   matchen (tokens.css) — reine Token-Kaskade, kein Extra-CSS. */
.theme-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.theme-panel {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-18px);
}

.theme-panel > .mono-label { display: block; margin-bottom: var(--space-3); }

.dev-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.dev-row + .dev-row { margin-top: var(--space-3); }

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* Feste Mindest-Spaltenbreite, Einzelmaß (Dev-Werkzeugseite) — Ausnahme #47 */
  gap: var(--space-3);
}

.swatch {
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}

.swatch .chip { height: 44px; /* Bauteil-Eigenmaß (Dev-Vorschau-Kachel) — Ausnahme #47 */ background: var(--accent); }

.swatch .meta { padding: var(--space-2) var(--space-10px); }
.swatch .n { font-size: var(--fs-mono); font-weight: 600; }
.swatch .v { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--ink-faint); margin-top: var(--space-2px); }

.accent-demo {
  display: flex;
  align-items: center;
  gap: var(--space-10px);
  padding: var(--space-10px) 0;
  border-top: var(--border-w) solid var(--line);
}

.accent-demo:first-child { border-top: none; }

.accent-demo .tone {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  min-width: 110px; /* Bauteil-Eigenmaß (Dev-Vorschauspalte) — Ausnahme #47 */
}

.accent-demo .fill {
  width: 30px;  /* Bauteil-Eigenmaß (Dev-Vorschau-Kachel) — Ausnahme #47 */
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 600;
  flex: none;
}

.accent-demo .soft {
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-17px);
  width: 34px;  /* Bauteil-Eigenmaß (Dev-Vorschau-Kachel) — Ausnahme #47 */
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  flex: none;
}

/* ============================================================
   Profilseite (Slice 35, #37)
   ============================================================ */

.profil-sec { margin-bottom: var(--space-6); }

.profil-status {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--no);
  margin: 0 0 var(--space-4);
}

.profil-preview {
  margin-top: var(--space-3);
  padding: var(--space-14px) var(--space-4);
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
}

/* Segmentierte Auswahl (Darstellungsmodus/Schriftgröße/Skin): mehrere
   native Radios in einer Mono-Pill, gleiche Optik wie der Theme-Toggle im
   Header (.theme-toggle), aber für > 2 Optionen. Die Hervorhebung läuft
   über die native :checked-Pseudoklasse + Nachbar-Selektor — kein
   `:has()` (Kompatibilität mit älteren Schulrechner-Browsern, vgl.
   ADR-0020s color-mix()-Verzicht). */
.seg-fieldset { border: none; margin: 0; padding: 0; }

.seg-group {
  display: inline-flex;
  flex-wrap: wrap;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.seg-opt { position: relative; }

/* A11y-Verstecken-Idiom wie .sr-only (#47) */
.seg-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.seg-opt span {
  display: inline-block;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  cursor: pointer;
}

.seg-opt input:checked + span {
  background: var(--accent);
  color: var(--accent-ink);
}

.seg-opt input:focus-visible + span {
  outline: var(--focus-ring-w) solid var(--focus);
  outline-offset: var(--focus-offset-inset);
}

/* Farb-Swatch im Akzent-Picker (Profil, #41/ADR-0058): kleiner Punkt vor dem
   Ton-Namen. Die Farbe kommt per Inline-var() aus der Palette
   (--accent-<ton>, tokens.css) — kein Hex im Template. Die Haarlinie hält
   helle Töne auf hellem Grund sichtbar (Deko, kein geprüftes Kontrastpaar). */
.akzent-swatch {
  display: inline-block;
  width: var(--space-3);
  height: var(--space-3);
  margin-right: var(--space-6px);
  border-radius: var(--radius-full);
  border: var(--border-w) solid var(--line-strong);
  vertical-align: -1px;
}

/* ---- Pool-Übersicht: "Weiterüben"-Einstieg + Niveau-Matrix (Slice 70,
   #70, Design D aus #58/Wayfinder) — Ledebereich mit zwei
   Empfehlungs-Slots über einer Themen×Niveau-Matrix. Reine
   Token-Verwendung, wie templates/prototyp/pool-d.eta (Optik-Referenz,
   inzwischen gelöscht — Code hier neu geschrieben). ---- */
.pool-start {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-5);
  margin: var(--space-5) 0 var(--space-6);
}

.pool-start-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.pool-start-thema {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  margin: 0 0 var(--space-2);
}

.pool-start-thema--klein { font-size: var(--fs-h2); }

.pool-start-stand {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-body);
}

.pool-start-aktion { margin: var(--space-4) 0 0; }

.pool-start-slot--sekundaer {
  border-left: var(--border-w) solid var(--line);
  padding-left: var(--space-5);
}

.pool-start-link {
  display: inline-block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--accent);
  text-decoration: none;
}
.pool-start-link:hover { text-decoration: underline; }

.pool-matrix-wrap { overflow-x: auto; }

.pool-matrix {
  width: 100%;
  border-collapse: collapse;
}

.pool-matrix thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: normal;
  text-align: right;
  padding: 0 var(--space-3) var(--space-2);
  border-bottom: var(--border-w) solid var(--line-strong);
  white-space: nowrap;
}
.pool-matrix thead .pool-matrix-th-thema { text-align: left; padding-left: var(--space-2); }

.pool-matrix tbody th {
  text-align: left;
  font-weight: normal;
  padding: var(--space-11px) var(--space-3) var(--space-11px) var(--space-2);
  border-bottom: var(--border-w) solid var(--line);
}
.pool-matrix tbody th a {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
}
.pool-matrix tbody tr:hover { background: var(--surface); }
.pool-matrix tbody tr:hover th a { color: var(--accent); }

.pool-matrix-nr {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-faint);
  margin-right: var(--space-2);
}

.pool-matrix-neu {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--accent);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-1px) var(--space-5px);
  margin-left: var(--space-2);
  vertical-align: middle;
}

.pool-matrix-zelle {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-muted);
  padding: var(--space-11px) var(--space-3);
  border-bottom: var(--border-w) solid var(--line);
  white-space: nowrap;
}
.pool-matrix-zahl { display: block; }
.pool-matrix-track {
  display: block;
  height: 2px;
  margin-top: var(--space-3px);
  min-width: 64px;
  background: var(--line);
  overflow: hidden;
}
.pool-matrix-track > span {
  display: block;
  height: 100%;
  background: var(--accent);
}
.pool-matrix-zelle--leer { color: var(--ink-faint); }
.pool-matrix-zelle--voll .pool-matrix-zahl { color: var(--ok); }
.pool-matrix-zelle--voll .pool-matrix-track > span { background: var(--ok); }
.pool-matrix-summe .pool-matrix-zahl { color: var(--ink); }

/* ============================================================
   Responsive — die Mockups sind Desktop-only; Verhalten hier
   im Geist des Designs: kompakter Header, einspaltige Grids,
   kein horizontales Scrollen bis 320px runter.
   ============================================================ */

@media (max-width: 860px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .topic-progress-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: 1fr; align-items: start; }
  .site-main { padding: var(--space-5) var(--space-18px) var(--space-44px); }
  .site-header { padding: var(--space-3) var(--space-18px); }
  .footer-inner { padding: var(--space-4) var(--space-18px) var(--space-22px); }

  /* Pool-Übersicht (#70): Lede stapelt statt zweispaltig. */
  .pool-start { grid-template-columns: 1fr; }
  .pool-start-slot--sekundaer {
    border-left: none;
    border-top: var(--border-w) solid var(--line);
    padding-left: 0;
    padding-top: var(--space-4);
  }
}

@media (max-width: 620px) {
  .site-header { flex-wrap: wrap; gap: var(--space-2) var(--space-14px); }
  .site-nav { order: 3; width: 100%; gap: var(--space-4); }
  .identity-name { display: none; }
  .card-grid { grid-template-columns: 1fr; }
  .topic-progress-grid { grid-template-columns: 1fr; }
  .theme-duo { grid-template-columns: 1fr; }
  .er-num { font-size: var(--fs-64px); }
  .er-help { margin-left: 0; }
  .hero h1 { font-size: var(--fs-h1); }
  .admin-table { display: block; overflow-x: auto; }

  /* Blatt-Ansicht: Rail wird zur horizontalen Kopfleiste statt Spalte links —
     verhindert horizontales Scrollen der Aufgaben-Karte auf schmalen Screens. */
  .sheet-title { font-size: var(--fs-h1); }
  .sheet-progress { flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .sheet-progress-track { order: 3; flex-basis: 100%; }
  .task { flex-direction: column; }
  .task-rail {
    flex-direction: row;
    width: auto;
    padding: var(--space-2) var(--space-14px);
    border-right: none;
    border-bottom: var(--border-w) solid var(--line);
  }
  .task-hd { flex-wrap: wrap; }
  .task-status { margin-left: 0; }
}

@media (max-width: 400px) {
  .site-main { padding: var(--space-20px) var(--space-3) var(--space-36px); }
  .site-header, .er-hd { padding: var(--space-10px) var(--space-3); }
  .footer-inner { padding: var(--space-14px) var(--space-3) var(--space-20px); flex-direction: column; gap: var(--space-10px); }
  .login-card { margin: var(--space-20px) auto; padding: var(--space-20px) var(--space-4); }
  .er-main { padding: var(--space-32px) var(--space-3); }
  .er-code { flex-direction: column; gap: var(--space-10px); }
  .er-tag { border-left: none; padding-left: 0; }

  .sheet-progress { padding: var(--space-10px) var(--space-3); }
  .task-hd { padding: var(--space-11px) var(--space-3); }
  .task-body { padding: var(--space-3); }
}

/* ---- Objektdiagramm (Slice 76, #76) ----
   Interaktiver Editor: Knoten frei erzeugen, Referenzen per Klick-Verbinden
   stecken, Knoten + Einstiegsvariablen verschieben (public/js/aufgaben/
   objektdiagramm.js). Design #35 (kantig): keine abgerundeten Knoten, keine
   Gradients/Farbkanten — nur die Bestandstoken. */
.objd-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
}

.objd-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.objd-stage-outer {
  border: var(--border-w) solid var(--line);
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--line) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, var(--line) 23px 24px);
  overflow: auto;
}

.objd-stage {
  position: relative;
  width: 1000px;
  height: 420px;
}

.objd-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.objd-wire {
  stroke: var(--line-strong);
  stroke-width: 2;
}

/* Kantiger Knoten (kein border-radius). */
.objd-node {
  position: absolute;
  width: 116px;
  background: var(--surface);
  border: var(--border-w-thick) solid var(--ink);
  user-select: none;
  touch-action: none;
}

.objd-node-head {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-3px);
  border-bottom: var(--border-w) solid var(--line);
  cursor: grab;
  min-height: var(--space-3);
}

.objd-node-del {
  font-family: var(--font-mono);
  line-height: 1;
  background: none;
  border: 0;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 0 var(--space-1);
}

.objd-node-del:hover { color: var(--no); }

.objd-node-val {
  padding: var(--space-2) var(--space-2);
  cursor: grab;
}

.objd-node-input {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  padding: var(--space-3px) 0;
}

.objd-node-input:focus {
  outline: none;
  background: var(--accent-soft);
}

.objd-node-ports {
  display: flex;
  border-top: var(--border-w-thick) solid var(--ink);
}

.objd-port {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-muted);
  background: var(--surface);
  border: 0;
  border-right: var(--border-w) solid var(--line);
  padding: var(--space-5px) var(--space-1);
  cursor: pointer;
  text-align: center;
}

.objd-port:last-child { border-right: 0; }
.objd-port:hover { background: var(--accent-soft); color: var(--ink); }
.objd-port[data-gesetzt='true'] { color: var(--ink); }
.objd-port[data-armed='true'] { background: var(--accent); color: var(--accent-ink); }

/* Einstiegsvariable (Anker-Chip) — ebenfalls kantig. */
.objd-var-chip {
  position: absolute;
  display: flex;
  align-items: stretch;
  border: var(--border-w-thick) solid var(--ink);
  background: var(--surface);
  font-family: var(--font-mono);
  user-select: none;
  touch-action: none;
}

.objd-var-name {
  padding: var(--space-5px) var(--space-2);
  font-size: var(--fs-small);
  font-weight: 600;
  border-right: var(--border-w-thick) solid var(--ink);
  cursor: grab;
}

.objd-var-port {
  padding: var(--space-5px) var(--space-2);
  font-size: var(--fs-label);
  color: var(--ink-muted);
  background: var(--surface);
  border: 0;
  cursor: pointer;
}

.objd-var-port:hover { background: var(--accent-soft); color: var(--ink); }
.objd-var-port[data-armed='true'] { background: var(--accent); color: var(--accent-ink); }

.objd-dragging { cursor: grabbing; }

/* Teilfeedback (Knoten X/Y · Referenzen A/B + Diskrepanzliste). */
.objd-score { color: var(--ink); }

.objd-diskrepanz {
  display: grid;
  grid-template-columns: var(--space-3) 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-5px) 0;
  font-size: var(--fs-13-5px);
  color: var(--ink-muted);
}

.objd-diskrepanz-mark {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-align: center;
}

.objd-diskrepanz--fehlt .objd-diskrepanz-mark { color: var(--ink-faint); }
.objd-diskrepanz--falsch .objd-diskrepanz-mark { color: var(--no); }
.objd-diskrepanz--zu-viel .objd-diskrepanz-mark { color: var(--no); }

/* ---- Achievements / Erfolge (Slice 62, #62, ADR-0057) ----
   Persistentes Trophäen-Regal: Themen-Trophäen (Mastery-Ränge + Kaizo-Stern),
   Meilenstein, versteckte Eggs. Reine Token-Verwendung, keine neuen Farben:
   frei = --accent (Nutzerfarbe aus dem Skin/Akzent-Modell), gesperrt =
   --ink-faint; die Seite ist themenlos (forest-Basis, kein Bereichs-Skin).
   Icons kommen als geometrische Inline-SVGs aus
   templates/partials/achievement-icon.eta (Platzhalter bis #109). */
.ach-sec-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  margin: var(--space-28px) 0 var(--space-6px);
}

.ach-sec-hint { margin: 0 0 var(--space-14px); }

.ach-regal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-14px);
}

.ach-thema {
  border: var(--border-w) solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-13px) var(--space-14px);
}

.ach-thema-kopf {
  display: flex;
  align-items: baseline;
  gap: var(--space-10px);
  margin-bottom: var(--space-10px);
}

.ach-thema-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
}

.ach-thema-hinweis { margin-left: auto; color: var(--ink-faint); }

.ach-slots {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10px);
}

.ach-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3px);
  padding: var(--space-10px) var(--space-6px);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}

.ach-slot--frei { color: var(--accent); border-color: var(--accent); }
.ach-slot--gesperrt { color: var(--ink-faint); }

.ach-slot-icon { position: relative; display: inline-flex; }

.ach-stern {
  position: absolute;
  top: calc(-1 * var(--space-9px));
  right: calc(-1 * var(--space-13px));
}

.ach-stern .ach-icon { width: var(--space-4); height: var(--space-4); }

/* Der Stern trägt seinen eigenen Frei/Gesperrt-Zustand — unabhängig vom
   Meister-Slot darunter (Kaizo ist ein Modifikator, kein eigener Eimer). */
.ach-stern--frei { color: var(--accent); }
.ach-stern--gesperrt { color: var(--ink-faint); }

/* Rang-Marken (#109): drei Quadrate, gefüllte = erreichte Stufe. Sie tragen
   die Staffelung, nicht die Farbe — reine Tönung kodiert keine Reihenfolge.
   Farbe kommt über currentColor aus dem Slot, damit gesperrt automatisch
   stimmt; kantig (kein border-radius), 5px = derselbe Punkt wie im Eyebrow. */
.ach-marks {
  display: flex;
  gap: var(--space-3px);
}

.ach-marks i {
  width: var(--size-dot);
  height: var(--size-dot);
  display: block;
  border: var(--border-w) solid currentColor;
}

.ach-marks i.on { background: currentColor; }

.ach-slot-name {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.ach-slot-datum {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  color: var(--ink-faint);
}

.ach-kacheln {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-14px);
}

.ach-kachel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6px);
  padding: var(--space-13px) var(--space-14px);
  border: var(--border-w) solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
}

.ach-kachel--frei { color: var(--accent); border-color: var(--accent); }
.ach-kachel--gesperrt { color: var(--ink-faint); }

.ach-kachel-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--ink);
}

.ach-kachel--gesperrt .ach-kachel-titel { color: var(--ink-muted); }

.ach-kachel-text {
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* Verdeckte Eggs: anonyme Kachel mit dem gemeinsamen Verborgen-Glyph
   (ach-verborgen) — kein echtes Motiv, kein Titel (die Daten ungefundener
   Eggs verlassen den Server nie). Steht 18-fach nebeneinander, solange nichts
   gefunden ist, und muss deshalb ruhig bleiben. */
.ach-kachel--verdeckt {
  align-items: center;
  justify-content: center;
  min-height: var(--space-60px);
  color: var(--ink-faint);
  border-style: dashed;
}

@media (max-width: 1100px) {
  .ach-regal { grid-template-columns: 1fr; }
  .ach-kacheln { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ach-kacheln { grid-template-columns: 1fr; }
  .ach-slots { grid-template-columns: repeat(3, 1fr); }
}