/* Blueprint E · Teil 1 — Theorie-Scrollytelling für Schwerpunkt-Lernmodule.
   Geteilte Struktur (Serie „Gleichstromkreise" u. a.): Intro → .scrolly-flow
   (Erzähl-Steps links, sticky Bühne rechts) → Rechenbeispiel-Karten → Quelle.
   Portiert aus dem Leitbeispiel-Muster (hubkolben_*), aber modulneutral:
   Module bringen nur Bühnen-Zeichnung, Inhalte und Kanalfarben (--scrolly-edge
   je data-scene) mit. Farben ausschließlich über Tokens aus colors.css. */

.scrolly {
  --scrolly-accent: rgb(var(--primary-rgb));
  --scrolly-ok: var(--success-600);
  --scrolly-no: var(--error-600);
  --scrolly-navbar: 70px;            /* Höhe der sticky Navbar (base/navbar.css) */
  --scrolly-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--spacing-md, .75rem) var(--spacing-2xl, 2rem);
  color: var(--textcolor-fullcontrast);
}
.scrolly-mono { font-family: var(--scrolly-mono); font-variant-numeric: tabular-nums; }
.scrolly-accent { color: var(--scrolly-accent); }
.scrolly-nowrap { white-space: nowrap; }
.scrolly .is-hidden { display: none !important; }

/* ── Intro ─────────────────────────────────────────────── */
.scrolly-intro { max-width: 62ch; padding: var(--spacing-2xl, 2rem) 0 var(--spacing-lg, 1rem); }
.scrolly-eyebrow {
  font-family: var(--scrolly-mono); font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--scrolly-accent); font-weight: 600; margin: 0 0 .5rem;
}
.scrolly-intro__title { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.05rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .5em; }
.scrolly-lede { font-size: 1.08rem; color: var(--textcolor-80contrast); margin: 0 0 1.2rem; }
.scrolly-lede em { font-style: normal; font-weight: 600; color: var(--textcolor-fullcontrast); }
.scrolly-hint { font-family: var(--scrolly-mono); font-size: .82rem; color: var(--neutrals-100); }
.scrolly-hint__arrow { display: inline-block; animation: scrollyBob 1.6s ease-in-out infinite; }
@keyframes scrollyBob { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(4px); } }

/* ── Erzählfluss: Steps links, Bühne rechts ────────────── */
.scrolly-flow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem); align-items: start;
}
.scrolly-steps { min-width: 0; }
.scrolly-step {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  padding: 2rem 0; border-top: 1px solid var(--surface-border-light);
}
.scrolly-step:first-child { border-top: 0; }
.scrolly-step__tag { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--neutrals-100); margin-bottom: .6rem; font-family: var(--scrolly-mono); }
.scrolly-step h3 { font-size: 1.5rem; line-height: 1.15; margin: 0 0 .7rem; letter-spacing: -.01em; }
.scrolly-step p { color: var(--textcolor-80contrast); margin: 0 0 .85rem; line-height: 1.6; }
.scrolly-step b { color: var(--textcolor-fullcontrast); }
.scrolly-step.is-active h3::before {
  content: ""; display: inline-block; width: .5rem; height: 1.05em; vertical-align: -2px;
  margin-right: .55rem; border-radius: 2px; background: var(--scrolly-edge, var(--scrolly-accent));
}
.scrolly-note { font-size: .92rem; color: var(--textcolor-80contrast); border-left: 3px solid var(--scrolly-accent); padding: .1rem 0 .1rem .8rem; margin-top: .3rem; }
.scrolly-tasks { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--textcolor-80contrast); }
.scrolly-tasks li { margin-bottom: .5rem; line-height: 1.55; }

/* ── Grundlagen-Boxen: fachlicher Unterbau je Schritt ──── */
.scrolly-basics {
  margin: 1rem 0; padding: .9rem 1rem; background: var(--surface-bg);
  border: 1px solid var(--surface-border-light); border-radius: var(--radius-lg, 8px);
}
.scrolly-basics__label {
  display: block; font-family: var(--scrolly-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--scrolly-accent); font-weight: 600; margin-bottom: .5rem;
}
.scrolly-basics p { font-size: .93rem; margin: 0 0 .6rem; }
.scrolly-basics p:last-child { margin-bottom: 0; }
.scrolly-basics ol, .scrolly-basics ul { margin: 0 0 .6rem; padding-left: 1.15rem; color: var(--textcolor-80contrast); font-size: .93rem; }
.scrolly-basics li { margin-bottom: .4rem; line-height: 1.55; }
.scrolly-basics .scrolly-formula--block { margin: .6rem 0 .1rem; background: var(--neutrals-0); }

/* ── Formeln (KaTeX) — kompakt, ohne Horizontal-Scroll ─── */
.scrolly-formula { font-size: 1.02em; }
.scrolly-formula--block {
  display: block; text-align: center; margin: 1rem 0 1.1rem; padding: .9rem .6rem;
  background: var(--primary-tint); border-radius: var(--radius-lg, 8px); overflow-x: auto;
}

/* ── Verständnisfragen (predict and check) ─────────────── */
.scrolly-quiz {
  margin: 1.1rem 0 .4rem; padding: 1rem 1.1rem; background: var(--neutrals-0);
  border: 1px solid var(--surface-border); border-radius: var(--radius-xl, 12px);
}
.scrolly-quiz__q { font-weight: 600; color: var(--textcolor-fullcontrast) !important; margin: 0 0 .8rem !important; }
.scrolly-quiz__hint { display: block; margin-top: .3rem; font-weight: 400; font-size: .88rem; color: var(--textcolor-80contrast); }
.scrolly-quiz__opts { display: flex; flex-direction: column; gap: .5rem; }
.scrolly-quiz__opt {
  text-align: left; font-size: .93rem; padding: .55rem .8rem; cursor: pointer;
  border: 1.5px solid var(--surface-border); border-radius: var(--radius-lg, 8px);
  background: var(--surface-bg); color: var(--textcolor-80contrast); transition: border-color .15s, background .15s;
}
.scrolly-quiz__opt:hover:not(.is-disabled) { border-color: var(--scrolly-accent); background: var(--primary-tint); }
.scrolly-quiz__opt.is-correct { border-color: var(--scrolly-ok); background: rgba(var(--success-rgb), .12); font-weight: 600; }
.scrolly-quiz__opt.is-wrong { border-color: var(--scrolly-no); background: rgba(var(--error-rgb), .10); }
.scrolly-quiz__opt.is-disabled { cursor: default; opacity: .85; }
.scrolly-quiz__opt.is-correct::before { content: "✓ "; color: var(--scrolly-ok); font-weight: 700; }
.scrolly-quiz__opt.is-wrong::before { content: "✕ "; color: var(--scrolly-no); font-weight: 700; }
.scrolly-quiz__fb { margin: .8rem 0 0 !important; font-size: .92rem; padding: .6rem .8rem; border-radius: var(--radius-lg, 8px); display: none; }
.scrolly-quiz__fb.is-success { display: block; background: rgba(var(--success-rgb), .12); color: var(--scrolly-ok) !important; border-left: 3px solid var(--scrolly-ok); }
.scrolly-quiz__fb.is-error { display: block; background: rgba(var(--error-rgb), .10); color: var(--scrolly-no) !important; border-left: 3px solid var(--scrolly-no); }
/* Aufgelöst nach dem Überspringen: bewusst NICHT grün — es war kein
   Erfolg, die Antwort wurde nur gezeigt (2026-08-21). */
.scrolly-quiz__fb.is-reveal { display: block; background: var(--surface-bg); color: var(--textcolor-80contrast) !important; border-left: 3px solid var(--surface-border); }

/* ── Löse-/Herleitungs-Stepper (Zeile für Zeile) ───────── */
.scrolly-deriv {
  margin: 1rem 0; padding: 1rem 1.1rem; background: var(--neutrals-0);
  border: 1px solid var(--surface-border); border-left: 4px solid var(--scrolly-accent);
  border-radius: var(--radius-xl, 12px);
}
.scrolly-deriv__start { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
/* Nach „Fertig ✓": Start-Karte kehrt als abgeschlossen zurück */
.scrolly-deriv__start.is-done .scrolly-deriv__teaser::before {
  content: "✓ Durchgearbeitet — "; font-weight: 700; color: var(--success-600);
}
.scrolly-deriv__teaser { margin: 0 !important; font-size: .95rem; color: var(--textcolor-80contrast) !important; }
.scrolly-deriv__formula {
  min-height: 3.2rem; display: flex; align-items: center; justify-content: safe center;
  padding: .7rem .5rem; background: var(--primary-tint); border-radius: var(--radius-lg, 8px);
  overflow-x: auto; font-size: .95em;   /* kompakt — Herleitungen ohne Horizontal-Scroll */
}
.scrolly-deriv__formula .katex-display { margin: .4em 0; }   /* aligned-Blöcke kompakt */
.scrolly-deriv__note { margin: .7rem 0 0 !important; font-size: .92rem; color: var(--textcolor-80contrast) !important; min-height: 2.6em; }
.scrolly-deriv__nav { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .7rem; flex-wrap: wrap; }
.scrolly-deriv__count { font-size: .78rem; color: var(--neutrals-100); font-family: var(--scrolly-mono); }
.scrolly-deriv__nav .scrolly-btn[disabled] { opacity: .4; cursor: default; }

/* ── Mitmach-Aufgabe (an der Bühne prüfbar) ────────────── */
.scrolly-find {
  margin: 1.1rem 0 .4rem; padding: 1rem 1.1rem; background: var(--neutrals-0);
  border: 1px solid var(--surface-border); border-radius: var(--radius-xl, 12px);
}
.scrolly-find__q { font-weight: 600; color: var(--textcolor-fullcontrast) !important; margin: 0 0 .8rem !important; }
.scrolly-find__fb { margin: .8rem 0 0 !important; font-size: .92rem; display: none; padding: .6rem .8rem; border-radius: var(--radius-lg, 8px); }
.scrolly-find__fb.is-success { display: block; background: rgba(var(--success-rgb), .12); color: var(--scrolly-ok) !important; border-left: 3px solid var(--scrolly-ok); }
.scrolly-find__fb.is-error { display: block; background: rgba(var(--error-rgb), .10); color: var(--scrolly-no) !important; border-left: 3px solid var(--scrolly-no); }

/* ── Sticky Bühne: bleibt IMMER komplett im Bild ───────── */
.scrolly-stage { position: sticky; top: calc(var(--scrolly-navbar) + 12px); }
.scrolly-stage__inner {
  height: calc(100vh - var(--scrolly-navbar) - 24px);
  display: flex; flex-direction: column; gap: .6rem; overflow: hidden;
  background: var(--neutrals-0); border: 1px solid var(--surface-border); border-radius: var(--radius-xl, 12px);
  padding: .8rem; box-shadow: 0 14px 34px -22px rgba(var(--primary-rgb), .35);
}
.scrolly-pulse { animation: scrollyPulse .7s ease; }
@keyframes scrollyPulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), .45); }
  100% { box-shadow: 0 0 0 16px rgba(var(--primary-rgb), 0); }
}

/* Klickbare Panel-Referenz im Fließtext (lässt das Panel aufblinken) */
.scrolly-ref {
  display: inline; padding: 0 .1em; border: 0; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--scrolly-accent);
  text-decoration: underline dotted; text-underline-offset: 3px;
}
.scrolly-ref:focus-visible { outline: 2px solid rgba(var(--primary-rgb), .35); outline-offset: 2px; }
.scrolly-stage__viz { flex: 1 1 auto; min-height: 220px; display: flex; flex-direction: column; gap: .55rem; }
.scrolly-readout, .scrolly-controls { flex: 0 0 auto; }

.scrolly-panel {
  margin: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow: hidden;
  background: var(--surface-bg); border: 1px solid var(--surface-border-light);
  border-radius: var(--radius-lg, 8px);
}
.scrolly-panel__head {
  flex: 0 0 auto; padding: .42rem .6rem; font-family: var(--scrolly-mono); font-size: .66rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--neutrals-100);
  border-bottom: 1px solid var(--surface-border-light);
}
.scrolly-panel__head b { color: var(--scrolly-accent); }
.scrolly-panel__head .scrolly-mono { text-transform: none; }
.scrolly-panel__head--stacked { display: block; }
.scrolly-panel__head-row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.scrolly-panel canvas { flex: 1 1 0; min-height: 0; width: 100%; display: block; }

/* Readout-Zellen */
.scrolly-readout { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.scrolly-cell { background: var(--surface-bg); border: 1px solid var(--surface-border-light); border-radius: var(--radius-lg, 8px); padding: .38rem .55rem; transition: border-color .2s, background .2s; }
.scrolly-cell__k { font-family: var(--scrolly-mono); font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; color: var(--neutrals-100); }
.scrolly-cell__k i { font-style: italic; text-transform: none; }
.scrolly-cell__k sub { text-transform: none; }   /* „ges" darf nicht zu „GES" werden */
.scrolly-cell__v { font-family: var(--scrolly-mono); font-size: 1.08rem; font-weight: 600; }
.scrolly-cell__u { font-size: .68rem; color: var(--neutrals-100); font-weight: 400; }

/* Regler + Buttons */
.scrolly-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem .9rem; align-items: end; }
.scrolly-ctrl label { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .78rem; color: var(--textcolor-80contrast); margin-bottom: .15rem; }
.scrolly-ctrl label i { font-style: italic; }
.scrolly-ctrl label b { font-family: var(--scrolly-mono); color: var(--textcolor-fullcontrast); }
.scrolly-ctrl--wide { grid-column: 1 / -1; }
.scrolly-btns { grid-column: 1 / -1; display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.scrolly-btn { font-size: .88rem; font-weight: 600; border-radius: var(--radius-lg, 8px); border: 1px solid var(--scrolly-accent); background: var(--scrolly-accent); color: var(--neutrals-0); padding: .45rem .85rem; cursor: pointer; }
.scrolly-btn--ghost { background: transparent; color: var(--scrolly-accent); }
.scrolly-btn:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
.scrolly-ctrl-note { grid-column: 1 / -1; margin: .1rem 0 0; font-size: .66rem; color: var(--neutrals-100); }

/* Umschalter (segmentiert) */
.scrolly-modes { grid-column: 1 / -1; display: flex; gap: .4rem; }
.scrolly-mode {
  flex: 1 1 0; font-size: .84rem; font-weight: 600; padding: .4rem .5rem; cursor: pointer;
  border-radius: var(--radius-lg, 8px); border: 1.5px solid var(--surface-border);
  background: var(--surface-bg); color: var(--textcolor-80contrast); transition: border-color .15s, background .15s, color .15s;
}
.scrolly-mode.is-active { border-color: var(--scrolly-accent); background: var(--primary-tint); color: var(--scrolly-accent); }
.scrolly-mode:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }

/* Sehr niedrige Viewports: kompakter, notfalls intern scrollen */
@media (max-height: 620px) {
  .scrolly-ctrl-note { display: none; }
  .scrolly-panel__head { padding: .3rem .5rem; }
}
@media (max-height: 520px) { .scrolly-stage__inner { overflow-y: auto; } }

/* ── Rechenbeispiel-Karten + Quellenangabe ─────────────── */
.scrolly-examples { margin: 3rem 0 1rem; }
.scrolly-examples__title { font-size: 1.5rem; margin: 0 0 .3rem; }
.scrolly-examples__sub { color: var(--neutrals-100); font-size: .82rem; margin: 0 0 1.2rem; }
.scrolly-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.scrolly-card { background: var(--neutrals-0); border: 1px solid var(--surface-border); border-radius: var(--radius-xl, 12px); padding: 1rem 1.1rem; }
.scrolly-card h4 { margin: 0 0 .6rem; font-size: 1rem; }
.scrolly-card .scrolly-formula { display: block; margin: 0 0 .6rem; overflow-x: auto; }
.scrolly-card p { color: var(--textcolor-80contrast); margin: 0; font-size: .9rem; }
.scrolly-source { margin: 2.4rem 0 0; font-size: .76rem; color: var(--neutrals-100); }

/* ── Abschluss-CTA: von der Theorie zu den Übungsaufgaben ── */
.scrolly-next {
  margin: 2.2rem 0 0; padding: 1.3rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: var(--primary-tint); border: 1px solid var(--surface-border);
  border-radius: var(--radius-xl, 12px);
}
.scrolly-next__text { margin: 0; font-size: .98rem; color: var(--textcolor-80contrast); max-width: 46ch; }
.scrolly-next__btn {
  display: inline-block; font-size: 1rem; font-weight: 600; text-decoration: none;
  padding: .65rem 1.2rem; border-radius: var(--radius-lg, 8px);
  background: var(--scrolly-accent); color: var(--neutrals-0); border: 1px solid var(--scrolly-accent);
  transition: transform .15s, box-shadow .15s;
}
.scrolly-next__btn:hover { color: var(--neutrals-0); text-decoration: none; transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(var(--primary-rgb), .6); }
.scrolly-next__btn:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
/* Kontrast-Absicherung gegen globale Anker-Regeln (weiß auf primary) */
body.neutral0color-onbackground .scrolly-next__btn,
body.neutral0color-onbackground .scrolly-next__btn:hover { color: var(--neutrals-0); }

/* ── Responsive: Bühne oben, statisch ──────────────────── */
@media (max-width: 900px) {
  .scrolly-flow { grid-template-columns: 1fr; }
  .scrolly-stage { position: static; order: -1; margin-bottom: 1.4rem; }
  .scrolly-stage__inner { height: auto; overflow: visible; }
  .scrolly-panel canvas { flex: 0 0 auto; height: clamp(220px, 46vw, 340px); }
  .scrolly-step { min-height: auto; padding: 1.4rem 0; }
}
@media (max-width: 600px) {
  .scrolly-readout { grid-template-columns: repeat(2, 1fr); }
  .scrolly-controls { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .scrolly-hint__arrow { animation: none; }
  .scrolly-pulse { animation: none; }
}

/* ── Kapitelweise Freischaltung (Blueprint TM, 2026-08-21) ──────────────
   Opt-in über .scrolly-steps[data-gate]; die ET-Serie an derselben Engine
   bleibt unberührt. Kein Scroll-Hijacking — das nächste Kapitel ist
   schlicht noch nicht aufgedeckt. */
.scrolly-step[hidden], .scrolly-gate[hidden], .scrolly-gate__hint[hidden],
.scrolly-gate__skip[hidden], .scrolly-next[hidden] { display: none !important; }

/* Ein Panel, das die Szene nicht braucht, ist weg — nicht leer. `.scrolly-panel`
   ist ein Flex-Container, seine display-Regel schlüge sonst das
   hidden-Attribut (2026-08-21). Das verbliebene Panel bekommt die ganze
   Bühnenhöhe, ohne dass die Flex-Anteile der Module etwas davon wissen
   müssen. */
.scrolly-panel[hidden] { display: none !important; }

/* Einteilige Bühne: Sie nimmt die Höhe, die ihre Zeichnung braucht, statt
   die volle Fensterhöhe. Die Zeichnungen der Serie sind breitengebunden
   (ein Träger, eine Rampe) — mehr Höhe macht sie NICHT größer, sie
   erzeugt nur Leerraum. Gemessen 2026-08-21: Der Canvas wuchs von 251 auf
   464 px, die Zeichnung blieb gleich. */
.scrolly-stage__inner.is-solo {
  height: auto;
  max-height: calc(100vh - var(--scrolly-navbar) - 24px);
}
/* Schrumpfen erlaubt (0 1 auto, nicht 0 0 auto): Auf flachen Fenstern
   stößt die Bühne an ihre max-height, und `overflow: hidden` schnitte
   sonst unten ab — der Detektor fand genau das in allen drei umgestellten
   Modulen. */
.scrolly-stage__inner.is-solo .scrolly-stage__viz { flex: 0 1 auto; min-height: 0; }
.scrolly-stage__inner.is-solo .scrolly-panel { flex: 0 1 auto; min-height: 0; }
/* Ein Wrapper zwischen Panel und Canvas (Container für das
   deckungsgleiche FKB-Overlay) trägt sonst `flex: 1 1 0` und damit
   Basis 0 — in der einteiligen Bühne fiel er auf Höhe 0 zusammen,
   während der Canvas darin herausragte. Das absolut positionierte
   Overlay erbte die 0 und war nicht bedienbar (Befund 2026-08-21). */
.scrolly-stage__inner.is-solo .scrolly-panel > div { flex: 0 0 auto; min-height: 0; }
/* Feste Höhe statt `aspect-ratio`: Die Höhe eines Canvas aus dem
   Seitenverhältnis hängt von seiner Breite ab, die wiederum vom Elternteil
   — der Flex-Algorithmus löst das mit 0 auf, das Panel fiel auf 2 px
   zusammen und schnitt seine 312-px-Zeichnung ab. Dasselbe clamp-Muster
   wie in der Mobilregel darunter; `min()` deckelt zusätzlich an der
   Fensterhöhe, damit flache Fenster nicht überlaufen. */
.scrolly-stage__inner.is-solo .scrolly-panel canvas {
  flex: 1 1 auto; min-height: 140px;
  height: min(clamp(220px, 21vw, 320px), 38vh);
}

.scrolly-gate {
  margin: 1.6rem 0 .2rem; padding: 1.1rem 1.2rem; text-align: center;
  background: var(--surface-bg); border: 1px dashed var(--surface-border);
  border-radius: var(--radius-xl, 12px);
}
.scrolly-gate__btn {
  font-size: .92rem; font-weight: 600; padding: .55rem 1.1rem; cursor: pointer;
  border-radius: var(--radius-lg, 8px); border: 1px solid var(--scrolly-accent);
  background: var(--scrolly-accent); color: var(--neutrals-0);
  transition: opacity .15s ease, transform .15s ease;
}
.scrolly-gate__btn:hover { transform: translateY(-1px); }
.scrolly-gate__btn.is-locked {
  background: transparent; color: var(--neutrals-100) !important;
  border-color: var(--surface-border); cursor: not-allowed; transform: none;
}
.scrolly-gate__btn:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }
.scrolly-gate__hint {
  margin: .7rem 0 0 !important; font-size: .84rem;
  color: var(--textcolor-80contrast) !important;
}
.scrolly-gate__skip {
  margin-top: .5rem; padding: .2rem .4rem; font-size: .8rem; cursor: pointer;
  background: none; border: 0; text-decoration: underline;
  color: var(--neutrals-100) !important;
}
.scrolly-gate__skip:hover { color: var(--textcolor-fullcontrast) !important; }

/* Fortschrittsleiste über den Kapiteln: Die Seite ist jetzt kurz, man sieht
   sonst nicht, wie viel noch kommt. */
.scrolly-progress {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1.2rem; padding-bottom: .8rem;
  border-bottom: 1px solid var(--surface-border);
}
.scrolly-progress__label { font-size: .82rem; color: var(--textcolor-80contrast); }
.scrolly-progress__dots { display: flex; gap: .35rem; flex-wrap: wrap; }
.scrolly-progress__dot {
  width: 1.55rem; height: 1.55rem; padding: 0; cursor: pointer;
  font-size: .72rem; font-weight: 600; line-height: 1;
  border-radius: 50%; border: 1px solid var(--surface-border);
  background: transparent; color: var(--neutrals-100) !important;
}
.scrolly-progress__dot[disabled] { opacity: .4; cursor: default; }
.scrolly-progress__dot.is-open { border-color: var(--scrolly-accent); color: var(--scrolly-accent) !important; }
.scrolly-progress__dot.is-done { background: var(--scrolly-accent); color: var(--neutrals-0) !important; }
/* Übersprungen: offen, aber ohne Füllung — ehrlich gegenüber dem Stand. */
.scrolly-progress__dot.is-skipped { border-style: dashed; }
.scrolly-progress__dot.is-current { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .22); }
.scrolly-progress__dot:focus-visible { outline: 3px solid rgba(var(--primary-rgb), .3); outline-offset: 2px; }