/* ============================================================
   components.css — Wiederverwendbare UI-Bausteine
   ============================================================ */

/* ---------- Seiten-Header ---------- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.25rem;
}

.site-title {
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

.site-title a {
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.site-title__mark {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

/* ---------- Modus-Schalter (Schüler / Präsentation) ---------- */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem;
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-xs);
}

.mode-toggle__btn {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-weight: 500;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
}

.mode-toggle__btn:hover {
  color: var(--color-text);
}

.mode-toggle__btn[aria-pressed="true"] {
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06),
              0 0 0 1px var(--color-border);
}

.mode-toggle__hint {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  margin-left: 0.5rem;
  font-family: var(--font-mono);
}

@media (max-width: 640px) {
  .mode-toggle__hint { display: none; }
}

/* ---------- Hero / Einleitung ---------- */
.hero {
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.hero h1 {
  margin-bottom: 1rem;
  max-width: 22ch;
}

.hero__lead {
  max-width: 60ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---------- Bögen (zweispaltig) ---------- */
/* Die beiden Bögen teilen sich EIN gemeinsames 2x2-Grid:
   Zeile 1 = beide Header, Zeile 2 = beide Stufenlisten.
   Dadurch sitzen Trennlinie und erste Karte links/rechts auf identischer Höhe.
   Die .bogen-Wrapper sind nur DOM-Gruppierung (display: contents). */
.boegen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  row-gap: 1.25rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

.bogen { display: contents; }

@media (max-width: 880px) {
  .boegen {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 1.25rem;
  }
  /* Auf schmalen Viewports zusätzlich Luft zwischen den beiden Bögen */
  .bogen--zwei .bogen__header { margin-top: 1.25rem; }
}

.bogen__header {
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--color-border-strong);
}

.bogen__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.4rem;
}

.bogen__title {
  font-size: var(--fs-lg);
  margin: 0 0 0.35rem 0;
}

.bogen__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.bogen__meta strong { color: var(--color-text); font-weight: 600; }

/* ---------- Stufen-Karten ---------- */
.stufen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.stufe-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem 1.1rem;
  align-items: start;
  padding: 1.1rem 1.25rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  width: 100%;
  color: var(--color-text);
  transition: border-color var(--transition-base),
              transform var(--transition-base),
              box-shadow var(--transition-base);
  text-decoration: none;
}

.stufe-card:hover,
.stufe-card:focus-visible {
  border-color: var(--color-positive);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.stufe-card:focus-visible {
  box-shadow: 0 0 0 3px var(--color-positive-soft),
              0 4px 12px rgba(37, 99, 235, 0.12);
}

.stufe-card[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

.stufe-card__number {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text-soft);
  background-color: var(--color-surface-soft);
  border-radius: var(--radius-sm);
  padding: 0.3em 0.55em;
  line-height: 1;
  min-width: 2.5em;
  text-align: center;
  grid-row: span 2;
  align-self: center;
}

.stufe-card__title {
  font-size: var(--fs-base);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--color-text);
}

.stufe-card__time {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: center;
  grid-row: span 2;
}

.stufe-card__desc {
  grid-column: 2;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
}

/* Im Präsentationsmodus: Erklärtexte einklappen */
:root[data-mode="praesentation"] .hero__lead,
:root[data-mode="praesentation"] .stufe-card__desc {
  display: none;
}

:root[data-mode="praesentation"] .stufe-card {
  padding: 1.4rem 1.5rem;
}

/* ---------- Cliffhanger / Hinweis zwischen den Bögen ---------- */
.bogen--zwei .bogen__header {
  border-bottom-color: var(--color-border);
}

.bogen--zwei .bogen__label {
  color: var(--color-accent);
}

/* ============================================================
   STAGE-LAYOUT (für stufe-1.html … stufe-8.html)
   ============================================================ */

/* ---------- Stage-Hero ---------- */
.stage-hero {
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
}

.stage-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-bottom: 1.25rem;
  text-decoration: none;
  transition: color var(--transition-fast);
}
.stage-hero__back:hover { color: var(--color-positive); }

.stage-hero__chips {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}

.stage-chip {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-variant-numeric: tabular-nums;
}

.stage-chip--accent {
  color: var(--color-accent);
  border-color: transparent;
  background-color: rgba(15, 118, 110, 0.08);
}

.stage-hero h1 {
  margin-bottom: 0.65rem;
  max-width: 24ch;
}

.stage-hero__lead {
  max-width: 60ch;
  font-size: var(--fs-md);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---------- Prosa-Abschnitt (Fließtext) ---------- */
.prose {
  max-width: 65ch;
  padding-block: 0.5rem;
}
.prose p { font-size: var(--fs-base); line-height: 1.65; }
.prose strong { color: var(--color-text); }

/* Im Präsentationsmodus ergibt sehr breite Textspalten keinen Sinn */
:root[data-mode="praesentation"] .prose { max-width: 50ch; }

/* ---------- Vergleichs-Visual (zwei nebeneinander) ---------- */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding-block: clamp(1.5rem, 3vw, 2.5rem);
}

@media (max-width: 760px) {
  .compare { grid-template-columns: 1fr; }
}

.compare__panel {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.compare__panel h3 {
  margin: 0;
  font-size: var(--fs-md);
}

.compare__panel__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.compare__panel svg {
  width: 100%;
  height: auto;
  max-height: 220px;
}

.compare__panel p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ---------- Pro/Contra-Kartenpaar (Trägt / Endet) ---------- */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, 1.5rem);
  padding-block: clamp(1.25rem, 3vw, 2rem);
}

@media (max-width: 760px) {
  .two-up { grid-template-columns: 1fr; }
}

.note-card {
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 2.5vw, 1.6rem);
  border: 1px solid transparent;
}

.note-card h3 {
  margin: 0 0 0.6rem 0;
  font-size: var(--fs-md);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.note-card ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.note-card li {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-text);
}

.note-card--positive {
  background-color: var(--color-positive-soft);
  border-color: rgba(37, 99, 235, 0.2);
}
.note-card--positive h3 { color: var(--color-positive); }

.note-card--negative {
  background-color: var(--color-negative-soft);
  border-color: rgba(217, 119, 6, 0.25);
}
.note-card--negative h3 { color: var(--color-negative); }

.note-card--accent {
  background-color: #e6f3f1;
  border-color: rgba(15, 118, 110, 0.25);
}
.note-card--accent h3 { color: var(--color-accent); }

/* Im Präsentationsmodus: Pro/Contra-Karten bleiben sichtbar (sie sind Kern),
   nur Erklärtext drumherum wird kompakter */

/* ============================================================
   INTERAKTIVE CONTROLS (für Stufen 2–5)
   ============================================================ */

/* ---------- Binärer Auswahl-Schalter (Ja / Nein) ---------- */
.binary-toggle {
  display: inline-flex;
  padding: 0.25rem;
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: var(--fs-sm);
  align-self: flex-start;
}

.binary-toggle__btn {
  padding: 0.4rem 1.1rem;
  border-radius: 999px;
  color: var(--color-text-muted);
  font-weight: 500;
  transition: background-color var(--transition-fast),
              color var(--transition-fast);
}
.binary-toggle__btn:hover { color: var(--color-text); }

.binary-toggle__btn[aria-pressed="true"] {
  background-color: var(--color-surface);
  color: var(--color-positive);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06),
              0 0 0 1px var(--color-border);
}

/* ---------- Range-Slider ---------- */
.slider {
  display: block;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0.35rem 0 0;
  cursor: pointer;
}
.slider:focus { outline: none; }

.slider::-webkit-slider-runnable-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
}
.slider::-moz-range-track {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-positive);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  margin-top: -7px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
  transition: transform var(--transition-fast);
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-positive);
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18);
}
.slider:hover::-webkit-slider-thumb,
.slider:focus-visible::-webkit-slider-thumb { transform: scale(1.12); }

/* Slider mit negativem aktuellen Wert: Thumb wird bernsteinfarben */
.slider[data-sign="negative"]::-webkit-slider-thumb { background: var(--color-negative); }
.slider[data-sign="negative"]::-moz-range-thumb     { background: var(--color-negative); }

/* ---------- Control-Karte (Toggle + Slider gruppiert) ---------- */
.control-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 2vw, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.control-card__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

.control-card__symbol {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  color: var(--color-accent);
  font-weight: 700;
}

.control-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}

.control-card__label {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.03em;
}

.control-card__value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  min-width: 5ch;
  text-align: right;
}
.control-card__value--positive { color: var(--color-positive); }
.control-card__value--negative { color: var(--color-negative); }

/* ---------- Schwellenwert-Streifen (volle Breite) ---------- */
.threshold-control {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ---------- Gleichungs-Karte ---------- */
.equation {
  background-color: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
}

.equation__label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  margin-bottom: 0.5rem;
}

.equation__body {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 0.2rem;
}

.equation__body strong { color: var(--color-positive); font-weight: 700; }

/* ---------- Entscheidungs-Karte (großer Output) ---------- */
.decision {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  border: 1px solid transparent;
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}

.decision__icon {
  width: 1.5em;
  height: 1.5em;
  flex-shrink: 0;
}

.decision--yes {
  background-color: var(--color-positive-soft);
  border-color: rgba(37, 99, 235, 0.25);
  color: var(--color-positive);
}

.decision--no {
  background-color: var(--color-surface-soft);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

/* ---------- Diagramm-Bühne (Container für die zentrale Visualisierung) ---------- */
.diagram-stage {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-block: clamp(1.25rem, 3vw, 2rem);
}

/* Nur das direkte Haupt-SVG soll volle Breite einnehmen — nicht kleine
   Icons in verschachtelten Elementen (z. B. der Tipp-Hinweis). */
.diagram-stage > svg {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- 3-spaltiges Control-Raster ---------- */
.controls-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 2vw, 1.25rem);
  margin-block: 0 1rem;
}

@media (max-width: 780px) {
  .controls-grid { grid-template-columns: 1fr; }
}

/* Abstand zwischen den großen Block-Elementen auf Stufenseiten */
.stage-block { margin-block: clamp(1rem, 2vw, 1.5rem); }

/* ---------- Aufgeschlüsselte gewichtete Summe ---------- */
.wsum {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.wsum__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--row, var(--color-border));
  transition: opacity var(--transition-base);
}

/* Eingang steht auf 0 → Beitrag ist null, Zeile wird gedämpft */
.wsum__row.is-zero { opacity: 0.4; }

.wsum__chip {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
}

.wsum__sym {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--row, var(--color-text-soft));
}

.wsum__calc {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.wsum__calc strong { color: var(--row, var(--color-text)); font-weight: 700; }

.wsum__rule {
  height: 1px;
  background: var(--color-border-strong);
  margin: 0.5rem 0.2rem;
}

.wsum__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.2rem 0.7rem 0.4rem;
  font-weight: 700;
}

.wsum__total .wsum__calc { color: var(--color-text); font-size: var(--fs-base); }

.wsum__compare {
  margin-top: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}
.wsum__compare strong { color: var(--color-text); }

/* ---------- Info-Tooltip ---------- */
.info-tip {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.info-tip__icon {
  width: 1.15em;
  height: 1.15em;
  border-radius: 50%;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-soft);
  font-family: var(--font-mono);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.info-tip__icon:hover,
.info-tip:focus-within .info-tip__icon {
  border-color: var(--color-positive);
  color: var(--color-positive);
}

.info-tip__bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 240px;
  background-color: var(--color-text);
  color: #fafaf9;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  z-index: 20;
}
.info-tip__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-text);
}
.info-tip__icon:hover + .info-tip__bubble,
.info-tip:hover .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip-Blasen nicht über den linken/rechten Rand schieben lassen */
@media (max-width: 520px) {
  .info-tip__bubble { max-width: 180px; }
}

/* ============================================================
   NETZ-VISUALISIERUNG (Stufen 3–4)
   ============================================================ */

.netz-edge {
  transition: opacity var(--transition-base), stroke var(--transition-fast),
              stroke-width var(--transition-fast);
}
.netz-node-fill {
  transition: opacity var(--transition-base);
}
.netz-edge--selected {
  filter: drop-shadow(0 0 3px rgba(37, 99, 235, 0.5));
}

/* ---------- Beispieltiere ---------- */
.example-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.example-row__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  margin-right: 0.25rem;
}
.example-btn {
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  transition: border-color var(--transition-fast), color var(--transition-fast),
              background-color var(--transition-fast);
}
.example-btn:hover { border-color: var(--color-positive); color: var(--color-text); }
.example-btn--active {
  background-color: var(--color-positive);
  border-color: var(--color-positive);
  color: #fff;
}

/* ---------- Vorhersage-Badge ---------- */
.prediction {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--fs-md);
  margin-top: 0.5rem;
}
.prediction__label { color: var(--color-text-muted); }
.prediction__value {
  font-weight: 700;
  color: var(--color-positive);
  font-size: var(--fs-lg);
}

/* ---------- Konfidenzbalken ---------- */
.conf-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.conf-row {
  display: grid;
  grid-template-columns: 7.5rem 1fr 3rem;
  align-items: center;
  gap: 0.75rem;
}
.conf-row__name {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-align: right;
  transition: color var(--transition-fast), font-weight var(--transition-fast);
}
.conf-row__track {
  height: 14px;
  background-color: var(--color-surface-soft);
  border-radius: 999px;
  overflow: hidden;
}
.conf-row__bar {
  height: 100%;
  width: 0;
  background-color: var(--color-border-strong);
  border-radius: 999px;
  transition: width 450ms ease-out, background-color var(--transition-base);
}
.conf-row__val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  text-align: right;
}
.conf-row--winner .conf-row__name { color: var(--color-text); font-weight: 700; }
.conf-row--winner .conf-row__bar { background-color: var(--color-positive); }
.conf-row--winner .conf-row__val { color: var(--color-positive); font-weight: 700; }

/* ---------- Gewicht-anpassen-Popover (schwebt am Netz) ---------- */
.weight-popover {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 300px;
  max-width: calc(100% - 28px);
  background-color: var(--color-surface);
  border: 1px solid rgba(37, 99, 235, 0.35);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  z-index: 5;
}
.weight-popover[hidden] { display: none; }

.weight-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.weight-panel__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-positive);
}
.weight-panel__close {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  color: var(--color-text-soft);
  font-size: 1.1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.weight-panel__close:hover { background-color: var(--color-surface-soft); color: var(--color-text); }

.weight-panel__reset {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.weight-panel__reset:hover { color: var(--color-positive); }
.weight-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.weight-panel__edge {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}
.weight-panel__value {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Werkzeugleiste über dem Netz ---------- */
.netz-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.netz-toolbar .example-row { margin-bottom: 0; }

/* ---------- Steuerung unter dem Netz (zweispaltig) ---------- */
.controls-below {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
@media (max-width: 760px) {
  .controls-below { grid-template-columns: 1fr; }
}

/* Hinweis-Zeile (z. B. »Tipp: Klicke auf eine Verbindung«) */
.hint-line {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* ---------- Zweispalt-Layout: Netz links, Steuerung rechts ---------- */
.netz-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}
@media (max-width: 900px) {
  .netz-layout { grid-template-columns: 1fr; }
}

/* ---------- Primär-Button ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radius-md);
  background-color: var(--color-positive);
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover { background-color: #1d4ed8; transform: translateY(-1px); }
.btn-primary svg { width: 1.1em; height: 1.1em; }

/* ============================================================
   TRAINING / BACKPROPAGATION (Stufe 4)
   ============================================================ */

/* Ziel-Zeile in der Ausgabe (gestrichelter Rahmen am Track) */
.conf-row--target .conf-row__name { color: var(--color-accent); font-weight: 700; }
.conf-row--target .conf-row__track {
  box-shadow: inset 0 0 0 1.5px var(--color-accent);
}
.conf-row__name .ziel-tag {
  font-size: var(--fs-xs);
  color: var(--color-accent);
  font-weight: 600;
  margin-left: 0.3rem;
}

/* Treffer-Status */
.hit-status {
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}
.hit-status--ok  { color: var(--color-positive); background: var(--color-positive-soft); }
.hit-status--bad { color: var(--color-negative); background: var(--color-negative-soft); }

/* Loss-Panel */
.loss-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.loss-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.loss-panel__value {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-positive);
  font-variant-numeric: tabular-nums;
}
.loss-panel svg { width: 100%; height: auto; display: block; }

/* Tal-Metapher */
.valley {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.valley svg { flex-shrink: 0; }
.valley__text { font-size: var(--fs-sm); color: var(--color-text-muted); }

/* Training-Knöpfe nebeneinander */
.train-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text);
  font-weight: 600;
  font-size: var(--fs-sm);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.btn-secondary:hover { border-color: var(--color-positive); }
.btn-primary--active { background-color: var(--color-negative); }
.btn-primary--active:hover { background-color: #b45309; }
.btn-primary:disabled, .btn-secondary:disabled { opacity: 0.45; cursor: default; }

/* Phasen-Anzeige beim animierten Training */
.train-phase {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent);
  min-height: 1.3em;
  margin-top: 0.2rem;
}

.step-info {
  font-size: var(--fs-sm);
  color: var(--color-text-soft);
  font-variant-numeric: tabular-nums;
}

/* Trainingsdaten-Übersicht (die 16 Tiere) */
.trainset__legend {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin: 0;
}
.trainset__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1.5vw, 1rem);
}
@media (max-width: 820px) { .trainset__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .trainset__grid { grid-template-columns: 1fr; } }

.trainset__group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.trainset__group-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent);
  padding-bottom: 0.25rem;
  border-bottom: 2px solid rgba(15, 118, 110, 0.2);
}
.trainset__chip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  color: var(--color-text);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.trainset__chip:hover { border-color: var(--color-accent); }
.trainset__chip--active {
  border-color: var(--color-accent);
  background: rgba(15, 118, 110, 0.08);
  font-weight: 600;
}
.trainset__dots { display: inline-flex; gap: 3px; flex-shrink: 0; }
.trainset__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
}
.trainset__dot--on { background: var(--color-accent); border-color: var(--color-accent); }

/* Fehler-→-Anpassung-Erklärblock (immer sichtbar, live) */
.fehler-explainer {
  background-color: rgba(15, 118, 110, 0.06);
  border: 1px solid rgba(15, 118, 110, 0.25);
  border-radius: var(--radius-md);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.fehler-explainer h3 {
  font-size: var(--fs-md);
  margin: 0 0 0.9rem 0;
  color: var(--color-accent);
}
.fehler-explainer__steps {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: var(--fs-base);
  line-height: 1.5;
}
.fehler-explainer__steps > div {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}
.fehler-explainer__num {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fehler-explainer__formula {
  font-family: var(--font-mono);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}
.fehler-value {
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-sm);
}
.fehler-value--big { background: var(--color-negative-soft); color: var(--color-negative); }
.fehler-value--small { background: var(--color-positive-soft); color: var(--color-positive); }

/* Trainings-Fertig-Status */
.train-done {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-positive);
  background: var(--color-positive-soft);
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}
.train-done[hidden] { display: none; }

/* Optionale Mathe-Box */
.math-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 1.1rem;
  background: var(--color-surface-soft);
}
.math-box summary {
  cursor: pointer;
  padding: 0.85rem 0;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--color-text);
  list-style: none;
}
.math-box summary::-webkit-details-marker { display: none; }
.math-box summary::before { content: "▸ "; color: var(--color-text-soft); }
.math-box[open] summary::before { content: "▾ "; }
.math-box__body { padding-bottom: 1rem; }
.math-box__body p { font-size: var(--fs-sm); color: var(--color-text-muted); }
.math-formula {
  font-family: var(--font-mono);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
  font-size: var(--fs-sm);
  margin: 0.5rem 0;
  overflow-x: auto;
}

/* ---------- Stage-Navigation (Vor / Zurück, unten auf der Stufenseite) ---------- */
.stage-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--color-border);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.stage-nav__link {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              transform var(--transition-base);
  min-width: 0;
}

.stage-nav__link:hover,
.stage-nav__link:focus-visible {
  border-color: var(--color-positive);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
  outline: none;
}

.stage-nav__link__eyebrow {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  letter-spacing: 0.04em;
}

.stage-nav__link__title {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-text);
}

.stage-nav__link--next { text-align: right; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: 1.5rem;
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   Stufe 5 — Ziffernerkennung (Zeichnen → Vorverarbeitung → 784)
   ============================================================ */

/* Zeichnen links, „was das Netz sieht" rechts — die zentrale Gegenüberstellung.
   Raster mit festen Zeilen: Labels (1), Leinwände (2), Fußzeilen (3). So liegen
   beide Leinwände garantiert bündig und der Pfeil sitzt auf ihrer Höhe. */
.draw-stage {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "llabel  .      rlabel"
    "lcanvas arrow  rcanvas"
    "lfoot   .      rfoot";
  column-gap: clamp(1rem, 3vw, 2rem);
  row-gap: 0.75rem;
  align-items: center;
  justify-items: center;
}
.draw-area--llabel  { grid-area: llabel; }
.draw-area--rlabel  { grid-area: rlabel; }
.draw-area--lcanvas { grid-area: lcanvas; }
.draw-area--rcanvas { grid-area: rcanvas; }
.draw-area--arrow   { grid-area: arrow; }
.draw-area--lfoot   { grid-area: lfoot; align-self: start; }
.draw-area--rfoot   { grid-area: rfoot; align-self: start; }

@media (max-width: 820px) {
  .draw-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "llabel"
      "lcanvas"
      "lfoot"
      "arrow"
      "rlabel"
      "rcanvas"
      "rfoot";
  }
  .draw-stage__arrow { transform: rotate(90deg); }
}

.draw-panel__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-soft);
  text-align: center;
}

/* Die Mal-Leinwand */
.draw-canvas {
  width: 280px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: #fff;
  touch-action: none;          /* verhindert Scrollen beim Zeichnen auf Tablets */
  cursor: crosshair;
  display: block;
}

/* Das, was das Netz tatsächlich sieht: 28×28-Raster */
.pixel-canvas {
  width: 280px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: #fff;
  image-rendering: pixelated;
  display: block;
}

.draw-stage__arrow {
  color: var(--color-text-soft);
  flex-shrink: 0;
}
.draw-stage__arrow svg { width: 2.2rem; height: 2.2rem; display: block; }

.draw-toolbar {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pixel-caption {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
  text-align: center;
  max-width: 30ch;
}
.pixel-caption strong { color: var(--color-text-muted); }

/* Vorhersage + 10 Konfidenzbalken (0–9) */
.digit-result {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}
@media (max-width: 640px) {
  .digit-result { grid-template-columns: 1fr; justify-items: center; }
}

/* Große Vorhersage-Ziffer */
.digit-guess {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  min-width: 9rem;
}
.digit-guess__label {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}
.digit-guess__value {
  font-family: var(--font-mono);
  font-size: 5rem;
  line-height: 1;
  font-weight: 700;
  color: var(--color-positive);
}
.digit-guess__value--empty { color: var(--color-border-strong); }
.digit-guess__sure {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Die 10 Ziffern-Konfidenzbalken sind enger getaktet als die Tier-Variante */
.conf-list--digits .conf-row { grid-template-columns: 1.5rem 1fr 3rem; }
.conf-list--digits .conf-row__name {
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  text-align: center;
}

/* ============================================================
   Stufe 6 — Attention (Satz mit Fäden + Heatmap-Matrix)
   ============================================================ */
.satz-stage { position: relative; }

/* Bühne für den Satz: oben Platz für die Fäden-Bögen */
.satz {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 0.4rem 0.5rem;
  padding-top: 4.75rem;            /* Raum über den Wörtern für die Bögen */
  font-size: var(--fs-md);
}

/* SVG-Overlay für die Bögen — liegt über dem Satz, fängt keine Klicks ab */
.arc-svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;               /* Bögen dürfen über den Rand ragen */
  pointer-events: none;
  z-index: 1;
}

/* Anklickbare Wörter */
.wort {
  position: relative;
  z-index: 2;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-size: inherit;
  line-height: 1.2;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.wort:hover { border-color: var(--color-positive); }
.wort--query {
  border-color: var(--color-accent);
  border-width: 2px;
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.14);
}

/* Erklärzeile unter dem Satz */
.attention-notiz {
  text-align: center;
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 1.25rem auto 0;
  max-width: 60ch;
  min-height: 3.2em;               /* verhindert Springen beim Wortwechsel */
}
.attention-notiz strong { color: var(--color-text); }

/* ---------- Heatmap-Matrix (Vertiefung) ---------- */
.attn-matrix-scroll { overflow-x: auto; padding-bottom: 0.4rem; }
.attn-matrix {
  display: grid;
  gap: 2px;
  width: max-content;
  margin: 0 auto;
}
.attn-matrix__corner { }
.attn-matrix__colhead {
  writing-mode: vertical-rl;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding: 0.3rem 0.15rem;
  white-space: nowrap;
  justify-self: center;
}
.attn-matrix__rowhead {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  padding: 0 0.5rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  transition: color var(--transition-fast);
}
.attn-matrix__rowhead:hover { color: var(--color-positive); }
.attn-matrix__rowhead.is-active { color: var(--color-accent); font-weight: 700; }
.attn-matrix__cell {
  min-width: 1.7rem;
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background-color: var(--color-surface-soft);
}
.attn-matrix__cell.is-active-row { outline: 2px solid rgba(15, 118, 110, 0.55); }

.net-disclaimer {
  margin: 0.2rem 0 0;
  text-align: center;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Angedeutete Netz-Visualisierung 784 → 64 → 10 (per JS gezeichnet) */
.netz-schema-svg {
  width: 100%;
  height: auto;
  display: block;
  max-width: 760px;
  margin: 0.25rem auto 0.5rem;
}

/* Aufbau-Schema 784 → 64 → 10 */
.netz-schema {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}
.netz-schema__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem clamp(0.75rem, 2vw, 1.5rem);
}
.netz-schema__count {
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-text);
}
.netz-schema__col--in .netz-schema__count { color: var(--color-positive); }
.netz-schema__col--out .netz-schema__count { color: var(--color-accent); }
.netz-schema__role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}
.netz-schema__arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-soft);
  font-size: var(--fs-lg);
}
.netz-schema__sub {
  font-size: var(--fs-xs);
  color: var(--color-text-soft);
}