/* Halo · Produkt-Demo („So funktioniert's" als animierter Ablauf)
 * ---------------------------------------------------------------
 * Zeigt den echten Produktablauf in einem Fenster-Mock: Fragebogen →
 * Entwurf → gültig machen (handschriftlich ODER notariell) → Tresor,
 * Teilen, Ändern. Gesteuert von assets/flow-demo.js.
 *
 * Prinzip: JS setzt nur .is-active auf Schritt + Screen. ALLE Bewegungen
 * sind CSS-Keyframes, die erst unter `.is-active` laufen — dadurch startet
 * jede Szene beim Wechsel sauber neu und die Seite bleibt ohne JS lesbar.
 *
 * Farben ausschließlich über Tokens (assets/tokens.css).
 * prefers-reduced-motion: keine Autoplay-Animation, Endzustand sofort.
 */

.fd {
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 20px 0;
}
@media (max-width: 640px) { .fd { padding-top: 56px; } }
/* Gleicher Abschnitts-Rhythmus wie .ld-head in landing.css: mittiger Kopf,
   linksbündiger Inhalt darunter. */
.fd-head { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.fd-head h2 {
  font-size: 36px; line-height: 1.15; color: var(--c-navy-deep);
  letter-spacing: -0.02em; margin: 0 0 14px;
}
/* <em>-Akzent: siehe Basisregel in tokens.css. */
.fd-head p { font-size: 18px; line-height: 1.6; color: var(--c-text-muted); margin: 0; }
@media (max-width: 640px) {
  .fd-head { margin-bottom: 30px; }
  .fd-head h2 { font-size: 28px; } .fd-head p { font-size: 16px; }
}

.fd-grid {
  display: grid;
  grid-template-columns: 330px 1fr;
  gap: 30px;
  align-items: start;
}
/* min-width:0 — sonst wächst die scrollbare Schritt-Leiste (min-width der
   Tabs) über ihre Grid-Spalte hinaus und die ganze Seite scrollt horizontal. */
.fd-grid > * { min-width: 0; }
@media (max-width: 900px) { .fd-grid { grid-template-columns: 1fr; gap: 20px; } }

/* ---- Schritt-Leiste (links) ---------------------------------------------
 * Hervorgehoben ist GENAU der Schritt, in dem man gerade ist — als weiße
 * Karte, mit grüner Ziffer und dem erklärenden Satz. Alle anderen bleiben
 * blass und anklickbar. Ein zweiter Blickfang für „als Nächstes" hat sich
 * nicht bewährt: er konkurrierte mit dem aktiven Schritt, und die Marke
 * „Weiter →" legte sich auf schmaler Spalte über den Titel.
 *
 * Die Verbindungslinie durch die Ziffernkreise übernimmt diese Aufgabe: sie
 * ist bis zum aktuellen Schritt grün und läuft darunter ins Graue aus —
 * dadurch zeigt sie, wie weit man ist und dass es weitergeht, ohne eine
 * Dauer zu behaupten (die es ohne Autoplay gar nicht gibt). */
.fd-rail { display: flex; flex-direction: column; gap: 8px; }
.fd-tab {
  display: grid; grid-template-columns: 34px 1fr; gap: 14px;
  align-items: start; text-align: left; width: 100%;
  background: none; border: none; cursor: pointer;
  padding: 16px 16px 16px 14px; border-radius: var(--radius-lg);
  font-family: inherit; position: relative;
  transition: background 0.25s ease;
}
.fd-tab:hover { background: var(--c-surface-soft); }
.fd-tab.is-active { background: var(--c-surface); box-shadow: var(--shadow); }

/* Verbindungslinie: sitzt in der Mitte des Ziffernkreises (14px Innenabstand
   + 34px/2) und reicht bis in die 8px-Lücke zum nächsten Schritt. */
.fd-tab:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  left: 30px; top: 54px; bottom: -8px; width: 2px;
  border-radius: 999px; background: var(--c-track);
  transition: background 0.25s ease;
}
.fd-tab.is-done:not(:last-child)::before { background: var(--c-green); }
.fd-tab.is-active:not(:last-child)::before {
  background: linear-gradient(180deg, var(--c-green) 0%, var(--c-track) 100%);
}
/* Ziffern über die Linie legen, sonst schneidet sie durch den Kreis. */
.fd-tab-num { position: relative; z-index: 1; }

/* Nicht-aktive Schritte treten zurück, bleiben aber klar anklickbar. */
.fd-tab:not(.is-active) .fd-tab-title { color: var(--c-text-muted); font-weight: 600; }
.fd-tab:not(.is-active):hover .fd-tab-title { color: var(--c-navy-deep); }
.fd-tab.is-done .fd-tab-title { color: var(--c-navy-deep); }
.fd-tab-num {
  width: 34px; height: 34px; line-height: 34px; border-radius: 50%;
  background: var(--c-surface-soft); color: var(--c-text-muted);
  font-weight: 700; font-size: 15px; text-align: center;
  transition: background 0.25s ease, color 0.25s ease;
}
.fd-tab.is-active .fd-tab-num { background: var(--c-green); color: #fff; }
.fd-tab.is-done .fd-tab-num { background: var(--c-green-soft); color: var(--c-green-deep); }
.fd-tab-title {
  display: block; font-size: 16px; font-weight: 700; color: var(--c-navy-deep);
  margin: 5px 0 0; letter-spacing: -0.01em;
}
.fd-tab-text {
  font-size: 15px; line-height: 1.55; color: var(--c-text-muted);
  margin: 5px 0 0; display: none;
}
.fd-tab.is-active .fd-tab-text { display: block; }
/* Laufbalken: zeigt, wie lange der Schritt noch läuft */
.fd-tab-bar {
  grid-column: 2; height: 3px; border-radius: 999px;
  background: var(--c-track); margin-top: 12px; overflow: hidden; display: none;
}
.fd-tab.is-active .fd-tab-bar { display: block; }
.fd-tab-bar i {
  display: block; height: 100%; width: 0; background: var(--c-green);
  border-radius: 999px;
}
.fd-tab.is-active .fd-tab-bar i { animation: fd-bar var(--fd-dur, 7s) linear forwards; }
.fd.is-paused .fd-tab-bar i { animation-play-state: paused; }
/* Sobald die Nutzerin selbst steuert, ist der Auto-Laufbalken irreführend */
.fd.is-manual .fd-tab-bar { display: none !important; }
@keyframes fd-bar { from { width: 0; } to { width: 100%; } }

@media (max-width: 900px) {
  .fd-rail { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
  .fd-tab { grid-template-columns: 28px 1fr; min-width: 200px; padding: 12px; }
  .fd-tab-num { width: 28px; height: 28px; line-height: 28px; font-size: 14px; }
  .fd-tab-title { font-size: 15px; margin: 3px 0 0; }
  .fd-tab-text { display: none !important; }
}

/* ---- Fenster-Mock (rechts) ---------------------------------------------- */
.fd-window {
  background: var(--c-surface);
  border: 1px solid var(--c-track);
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px rgba(var(--c-navy-rgb), 0.13);
  overflow: hidden;
}
.fd-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; background: var(--c-surface-soft);
  border-bottom: 1px solid var(--c-track);
}
.fd-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-track); }
.fd-url {
  flex: 1; margin-left: 8px; background: var(--c-surface);
  border-radius: 999px; padding: 5px 12px;
  font-size: 12px; color: var(--c-text-muted); text-align: center;
}
.fd-url b { color: var(--c-navy-deep); font-weight: 600; }

/* Alle Screens liegen in DERSELBEN Grid-Zelle übereinander — nur so lässt
   sich sauber überblenden.
   align-self: start nimmt ihnen das Strecken auf die Zellenhöhe; die Bühne
   bekommt ihre Höhe stattdessen von flow-demo.js, passend zum AKTIVEN Screen,
   und wächst/schrumpft weich. Vorher war das Fenster immer so hoch wie der
   längste Schritt — bei den kurzen stand darunter eine leere Fläche.
   Ohne JS greift der Grid-Standard: Zellenhöhe = längster Screen, also
   dasselbe Verhalten wie zuvor. */
.fd-stage { display: grid; transition: height .35s ease; }
.fd-screen {
  grid-area: 1 / 1; align-self: start; padding: 22px 24px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.4s ease;
}
@media (prefers-reduced-motion: reduce) { .fd-stage { transition: none; } }
.fd-screen.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
@media (max-width: 640px) { .fd-screen { padding: 18px 16px; } }

/* Gemeinsame Bausteine der Screens */
.fd-eyebrow {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 700; color: var(--c-green-deep); margin-bottom: 10px;
}
.fd-progress { height: 6px; background: var(--c-track); border-radius: 999px; margin-bottom: 18px; overflow: hidden; }
.fd-progress i { display: block; height: 100%; width: 22%; background: var(--c-green); border-radius: 999px; }
.is-active .fd-progress i { animation: fd-progress 6s ease-in-out forwards; }
@keyframes fd-progress { 0% { width: 22%; } 55% { width: 55%; } 100% { width: 74%; } }

.fd-q { font-size: 20px; font-weight: 700; color: var(--c-navy-deep); margin: 0 0 4px; letter-spacing: -0.01em; }
.fd-q-hint { font-size: 14px; color: var(--c-text-muted); margin: 0 0 16px; line-height: 1.5; }

.fd-opt {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--c-track); border-radius: var(--radius-md);
  padding: 13px 15px; margin-bottom: 9px;
  font-size: 15px; color: var(--c-text); background: var(--c-surface);
}
.fd-opt .fd-radio {
  width: 19px; height: 19px; border-radius: 50%; flex: none;
  border: 2px solid var(--c-track); position: relative;
}
.fd-opt small { display: block; font-size: 13px; color: var(--c-text-muted); margin-top: 2px; }
.fd-opt.fd-pick { border-color: var(--c-track); }
.is-active .fd-opt.fd-pick { animation: fd-pick 0.5s ease 1.1s forwards; }
.is-active .fd-opt.fd-pick .fd-radio:after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--c-green); transform: scale(0); animation: fd-pop 0.4s ease 1.2s forwards;
}
@keyframes fd-pick {
  to { border-color: var(--c-green); background: var(--c-green-soft); }
}
@keyframes fd-pop { to { transform: scale(1); } }

/* Eingabefeld mit Tipp-Effekt */
.fd-field { margin-top: 14px; }
.fd-label { font-size: 13px; font-weight: 600; color: var(--c-navy-deep); margin-bottom: 5px; }
.fd-input {
  border: 1.5px solid var(--c-track); border-radius: var(--radius-md);
  padding: 12px 14px; font-size: 15px; color: var(--c-text);
  background: var(--c-surface); min-height: 21px;
}
.fd-row { display: grid; grid-template-columns: 1fr 128px; gap: 10px; }
@media (max-width: 640px) { .fd-row { grid-template-columns: 1fr; } }
/* Tipp-Effekt: die Zielbreite steht als --fd-w (in ch) am Element, damit der
   Wisch exakt am Textende stoppt und nicht ins Leere weiterläuft. */
.fd-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: 0; }
.is-active .fd-type { animation: fd-type 1.1s steps(20, end) var(--fd-delay, 1.9s) forwards; }
@keyframes fd-type { to { width: var(--fd-w, 100%); } }

/* Validierungs-Zeile („Anteile ergeben 100 %") */
.fd-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--c-green-deep);
  background: var(--c-green-soft); border-radius: var(--radius-md);
  padding: 10px 13px; margin-top: 14px; opacity: 0;
}
.is-active .fd-check { animation: fd-rise 0.5s ease 5s forwards; }
@keyframes fd-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- Screen 1: ablegen, scannen, erkennen -------------------------------
 * Zeigt den Schritt, um den es wirklich geht: eine Datei landet im Tresor,
 * Halo liest sie und sagt, WAS es ist. Vorher standen hier nur Eingabefelder,
 * in die etwas hineingetippt wurde — das zeigte Formularausfüllen statt
 * Erkennen.
 *
 * Zeitachse je Karte über drei Custom Properties:
 *   --d  Karte erscheint · --ds  Scanbalken läuft · --dd  Ergebnis steht */
.fd-scan { display: grid; gap: 10px; margin-top: 18px; }
.fd-file {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center;
  border: 1.5px solid var(--c-track); border-radius: var(--radius-md);
  background: var(--c-surface); padding: 12px 14px;
  opacity: 0;
}
.is-active .fd-file { animation: fd-rise .45s ease var(--d, 0s) forwards; }
.fd-file-ico {
  width: 38px; height: 38px; border-radius: var(--radius-sm);
  background: var(--c-surface-soft); color: var(--c-navy);
  display: grid; place-items: center; font-size: 20px; line-height: 0;
}
.fd-file-name { display: block; font-size: 14px; font-weight: 600; color: var(--c-navy-deep); }
/* Zustand und Ergebnis liegen übereinander in derselben Zelle — so wächst
   die Karte beim Umschalten nicht und die Bühne muss nicht nachmessen. */
.fd-file-status { display: grid; margin-top: 2px; }
.fd-file-status > * { grid-area: 1 / 1; font-size: 13px; }
.fd-file-state { color: var(--c-text-muted); }
.fd-file-done {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-green-deep); font-weight: 600; opacity: 0;
}
.is-active .fd-file-state { animation: fd-weg .25s ease var(--dd, 2s) forwards; }
.is-active .fd-file-done { animation: fd-her .35s ease var(--dd, 2s) forwards; }
@keyframes fd-weg { to { opacity: 0; } }
@keyframes fd-her { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
/* Scanbalken: wandert einmal über die Karte, während gelesen wird. */
.fd-scanline {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--c-green), transparent);
  box-shadow: 0 0 14px 4px rgba(var(--c-green-rgb), 0.35);
}
.is-active .fd-scanline { animation: fd-sweep 1.15s ease-in-out var(--ds, .8s) forwards; }
@keyframes fd-sweep {
  0%   { opacity: 0; left: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; left: 100%; }
}

/* Companion-Blase (KI erklärt die Frage) */
.fd-ai {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px;
  background: var(--c-surface-soft); border-radius: var(--radius-lg);
  padding: 12px 14px; margin-top: 16px; opacity: 0;
}
.is-active .fd-ai { animation: fd-rise 0.5s ease 5.5s forwards; }
.fd-ai-av {
  width: 30px; height: 30px; border-radius: 50%; background: var(--c-navy);
  color: #fff; font-size: 14px; text-align: center; line-height: 30px;
}
.fd-ai-name { display: block; font-size: 12px; font-weight: 700; color: var(--c-navy-deep); margin-bottom: 3px; }
.fd-ai-text { font-size: 14px; line-height: 1.55; color: var(--c-text); margin: 0; }

/* ---- Screen 2: Entwurf --------------------------------------------------- */
.fd-doc {
  background: var(--c-surface); border: 1px solid var(--c-track);
  border-radius: var(--radius-md); padding: 20px 22px;
  font-family: var(--font-doc); color: var(--c-text);
  box-shadow: 0 6px 20px rgba(var(--c-navy-rgb), 0.06);
}
.fd-doc-title { font-size: 16px; font-weight: 700; text-align: center; margin: 0 0 14px; color: var(--c-navy-deep); }
.fd-line { font-size: 14px; line-height: 1.75; margin: 0 0 8px; opacity: 0; }
.is-active .fd-line { animation: fd-rise 0.45s ease forwards; }
.is-active .fd-line:nth-child(2) { animation-delay: 0.5s; }
.is-active .fd-line:nth-child(3) { animation-delay: 1.1s; }
.is-active .fd-line:nth-child(4) { animation-delay: 1.7s; }
.is-active .fd-line:nth-child(5) { animation-delay: 2.3s; }
.is-active .fd-line:nth-child(6) { animation-delay: 2.9s; }
.fd-skel {
  display: block; height: 10px; border-radius: 999px;
  background: var(--c-track); margin: 12px 0 0; opacity: 0;
}
.is-active .fd-skel { animation: fd-rise 0.45s ease 3.4s forwards; }
.fd-skel + .fd-skel { width: 62%; }
.is-active .fd-skel + .fd-skel { animation-delay: 3.6s; }

.fd-badge-free {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-green-soft); color: var(--c-green-deep);
  font-size: 14px; font-weight: 700; border-radius: 999px;
  padding: 9px 16px; margin-top: 16px; opacity: 0;
}
.is-active .fd-badge-free { animation: fd-rise 0.5s ease 4s forwards; }

/* Button-Reihe wie in der echten Vorschau (/dokument) */
.fd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; opacity: 0; }
.is-active .fd-actions { animation: fd-rise 0.5s ease 4.4s forwards; }
.fd-btn {
  border-radius: 999px; padding: var(--btn-pad-sm);
  font-size: 14px; font-weight: 700; white-space: nowrap;
}
.fd-btn-green { background: var(--c-green); color: #fff; }
.fd-btn-navy { background: var(--c-navy); color: #fff; }

/* ---- Screen 3: Gültig machen (zwei Wege) --------------------------------- */
.fd-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
@media (max-width: 640px) { .fd-ways { grid-template-columns: 1fr; } }
.fd-way {
  border: 1.5px solid var(--c-track); border-radius: var(--radius-lg);
  padding: 16px 16px 14px; background: var(--c-surface); opacity: 0;
}
.is-active .fd-way { animation: fd-rise 0.5s ease 0.3s forwards; }
.is-active .fd-way + .fd-way { animation-delay: 0.9s; }
.fd-way-tag {
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--c-text-muted); margin-bottom: 8px;
}
.fd-way h4 { font-size: 16px; color: var(--c-navy-deep); margin: 0 0 8px; letter-spacing: -0.01em; }
.fd-way ul { list-style: none; margin: 0; padding: 0; }
.fd-way li {
  font-size: 14px; line-height: 1.5; color: var(--c-text-muted);
  padding: 4px 0 4px 20px; position: relative;
}
.fd-way li:before {
  content: "✓"; position: absolute; left: 0; top: 4px;
  color: var(--c-green-deep); font-weight: 700;
}
.fd-way-notar { border-color: rgba(var(--c-navy-rgb), 0.25); background: var(--c-surface); }
.fd-soon {
  display: inline-block; font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--c-amber-soft); color: var(--c-amber-deep);
  border-radius: 999px; padding: 3px 9px; margin-left: 6px; vertical-align: 1px;
}
/* Terminkarte im Notar-Weg */
.fd-slot {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--c-track); border-radius: var(--radius-md);
  padding: 9px 11px; margin-top: 10px; font-size: 13px; opacity: 0;
}
.is-active .fd-slot { animation: fd-rise 0.45s ease 1.8s forwards; }
.fd-slot .fd-slot-av {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--c-navy); color: #fff; font-size: 11px;
  font-weight: 700; line-height: 28px; text-align: center;
}
.fd-slot b { display: block; color: var(--c-navy-deep); font-size: 13px; }
.fd-slot b + span { display: block; color: var(--c-text-muted); font-size: 12px; }

.fd-note {
  font-size: 13px; line-height: 1.55; color: var(--c-text-muted);
  margin: 14px 0 0; opacity: 0;
}
.is-active .fd-note { animation: fd-rise 0.45s ease 2.4s forwards; }

/* ---- Screen 4: Tresor, Familie, Änderungen ------------------------------- */
.fd-vault {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--c-track); border-radius: var(--radius-md);
  padding: 14px 15px; opacity: 0;
}
.is-active .fd-vault { animation: fd-rise 0.5s ease 0.3s forwards; }
.fd-vault /* font-size steuert die Icon-Größe (.ico = 1em). */
.fd-vault-ico {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex: none;
  background: var(--c-green-soft); color: var(--c-green-deep);
  font-size: 18px; line-height: 38px; text-align: center;
}
.fd-vault b { display: block; font-size: 15px; color: var(--c-navy-deep); }
.fd-vault b + span { display: block; font-size: 13px; color: var(--c-text-muted); }
.fd-ver {
  margin-left: auto; font-size: 12px; font-weight: 700;
  background: var(--c-surface-soft); color: var(--c-text-muted);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}

.fd-people { margin-top: 14px; }
.fd-person {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 2px; opacity: 0;
  border-bottom: 1px solid var(--c-track);
}
.is-active .fd-person { animation: fd-rise 0.45s ease 1s forwards; }
.is-active .fd-person:nth-child(2) { animation-delay: 1.4s; }
.is-active .fd-person:nth-child(3) { animation-delay: 1.8s; }
.fd-person .fd-av {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--c-surface-soft); color: var(--c-navy);
  font-size: 13px; font-weight: 700; line-height: 32px; text-align: center;
}
.fd-person b { font-size: 14px; color: var(--c-navy-deep); font-weight: 600; display: block; }
.fd-person b + span { display: block; font-size: 13px; color: var(--c-text-muted); }
.fd-toggle {
  margin-left: auto; width: 40px; height: 23px; border-radius: 999px;
  background: var(--c-track); position: relative; flex: none;
}
.fd-toggle:after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 17px; height: 17px; border-radius: 50%; background: var(--c-surface);
  box-shadow: 0 1px 3px rgba(var(--c-text-rgb), 0.25);
}
.fd-toggle.on { background: var(--c-green); }
.fd-toggle.on:after { left: 20px; }
.is-active .fd-toggle.fd-flip { animation: fd-toggle-on 0.45s ease 2.4s forwards; }
.is-active .fd-toggle.fd-flip:after { animation: fd-knob 0.45s ease 2.4s forwards; }
@keyframes fd-toggle-on { to { background: var(--c-green); } }
@keyframes fd-knob { to { left: 20px; } }

.fd-reminder {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--c-surface-soft); border-radius: var(--radius-md);
  padding: 12px 14px; margin-top: 16px; font-size: 14px;
  line-height: 1.55; color: var(--c-text); opacity: 0;
}
.is-active .fd-reminder { animation: fd-rise 0.5s ease 3s forwards; }
.fd-reminder b { color: var(--c-navy-deep); }

/* ---- Fuß unter der Demo -------------------------------------------------- */
.fd-foot { text-align: center; margin-top: 26px; }
.fd-foot .ld-cta-meta { margin-top: 10px; }

/* ---- Reduzierte Bewegung: Endzustand, keine Bewegung --------------------- */
@media (prefers-reduced-motion: reduce) {
  .fd *, .fd *:before, .fd *:after { animation: none !important; transition: none !important; }
  .fd-line, .fd-skel, .fd-check, .fd-ai, .fd-badge-free, .fd-way,
  .fd-slot, .fd-note, .fd-vault, .fd-person, .fd-reminder,
  .fd-file, .fd-file-done,
  /* Ohne Bewegung steht direkt das Ergebnis da, nicht „wird gelesen …" */
  .fd-file-state { opacity: 0 !important; }
  .fd-scanline { display: none; }
  .fd-type { width: var(--fd-w, auto) !important; }
  .fd-opt.fd-pick { border-color: var(--c-green); background: var(--c-green-soft); }
  .fd-opt.fd-pick .fd-radio:after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--c-green);
  }
  .fd-toggle.fd-flip { background: var(--c-green); }
  .fd-toggle.fd-flip:after { left: 20px; }
  .fd-tab-text { display: block; }
}

/* ---- Klick-Steuerung (data-autoplay="false") ---------------------------
 * Der nächste Schritt wird bewusst NICHT hervorgehoben. Zwei gleichzeitige
 * Blickfänge in einer vierzeiligen Leiste heben sich gegenseitig auf, und
 * die Marke „Weiter →" saß in der schmalen Spalte auf dem Titel des vierten
 * Schritts. Wohin es weitergeht, zeigt jetzt die Verbindungslinie durch die
 * Ziffernkreise (siehe .fd-tab::before weiter oben). */
.fd-hint {
  font-size: 14px; color: var(--c-text-muted);
  text-align: center; margin: 0 0 18px;
}
.fd-hint b { color: var(--c-green-deep); font-weight: 700; }