/* Startseite, Band „Fehler finden. Ursache klären. Lösung zeigen.“: animierte Fehlersuche als Fachgrafik auf heller Karte.
   Ablauf in fh-film.js (Klassen am Wurzelelement), ohne JS oder bei reduzierter Bewegung steht der Endzustand.
   Bleibt auch im Dunkelmodus hell; Größenfarben über --c-*-papier (Strom rot, Spannung blau, Widerstand grün). */
.fhf{--f-ink:#0a1540;--f-mut:#4f5a7d;--f-soft:#7a84a3;--f-line:#dbe1ee;--f-paper:#f3f5fa;--f-ok:#2f7a45;--f-ok-bg:#e7f6ec;--f-fehl:#b3202a;--f-fehl-bg:#fbe9ea;--f-warn:#e0a21c;
  --f-strom:var(--c-strom-papier,#af3d36);--f-spannung:var(--c-spannung-papier,#2855ad);--f-wid:var(--c-widerstand-papier,#447838);--f-geraet:#364452;
  position:relative;display:grid;gap:10px;background:#fff;color:var(--f-ink);border-radius:22px;padding:20px 22px 18px;text-decoration:none;
  box-shadow:0 30px 70px rgba(0,0,0,.4);transition:transform .2s;overflow:hidden;min-width:0}
.fhf:hover{transform:translateY(-3px)}
.fhf:focus-visible{outline:3px solid var(--volt,#c4ff1a);outline-offset:4px}

/* Suchfeld mit Tippen und Treffer */
.fhf-such{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:2px solid var(--f-line);color:var(--f-ink);font-size:16px;font-weight:600;min-height:46px;transition:border-color .3s}
.fhf.tippen .fhf-such{border-color:#2f4de6}
.fhf-such svg{width:18px;height:18px;color:#2f4de6;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.fhf-cursor{display:inline-block;width:2px;height:19px;background:#2f4de6;margin-left:-6px;opacity:0}
.fhf.tippen .fhf-cursor{opacity:1;animation:fhfBlink 1.2s steps(1) infinite}
@keyframes fhfBlink{50%{opacity:0}}
.fhf-treffer{display:grid;grid-template-columns:6px 1fr auto;gap:10px;align-items:center;padding:9px 12px;border-radius:12px;background:var(--f-paper);font-weight:650;font-size:15px;
  opacity:.35;transform:translateY(-2px);transition:opacity .7s,transform .7s,box-shadow .7s}
.fhf-treffer i{width:6px;height:26px;border-radius:3px;background:var(--f-warn)}
.fhf-treffer small{color:var(--f-mut);font-weight:500;font-size:12.5px}
.fhf.treffer .fhf-treffer{opacity:1;transform:none;box-shadow:inset 0 0 0 2px #2f4de6}
.fhf.treffer.weiter .fhf-treffer{box-shadow:none}

/* Bühne */
.fhf-bild{display:block;width:100%;height:auto;overflow:visible}
.fhf-bild text{font-family:inherit;fill:var(--f-ink)}
.fhf-kasten{fill:var(--f-paper);stroke:var(--f-line);stroke-width:2}
.fhf-schiene{fill:#d3d9e6}
.fhf-geh{fill:#fff;stroke:var(--f-ink);stroke-width:1.6}
.fhf-schacht{fill:#e3e8f1}
.fhf-hebel{fill:var(--f-ink);transition:transform .6s cubic-bezier(.4,0,.2,1);transform-box:fill-box}
.fhf-hebel.aus{transform:translateY(22px)}
.fhf-k .fhf-hebel.ls,.fhf-b .fhf-hebel.ls,.fhf-a .fhf-hebel.ls{transform:translateY(22px)}
.fhf.k-an .fhf-k .fhf-hebel.ls,.fhf.b-an .fhf-b .fhf-hebel.ls,.fhf.a-an .fhf-a .fhf-hebel.ls{transform:none}
.fhf-fi .fhf-hebel{transform:translateY(22px)}
.fhf.fi-an .fhf-fi .fhf-hebel{transform:none}
.fhf-fahne{fill:#c8cfdd;transition:fill .3s}
.fhf.fi-an .fhf-fahne{fill:var(--f-ok)}
.fhf.blitz .fhf-fahne{fill:var(--f-fehl)}
.fhf-klein{font-size:10px;font-weight:600;fill:var(--f-mut)!important}
.fhf-name{font-size:12px;font-weight:700}

/* Leitungen: grau stromlos, rot mit Fluss, wenn der Kreis Spannung hat */
.fhf-ltg{fill:none;stroke:#aab3c6;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.fhf-ltg.ein{stroke:var(--f-strom)}
.fhf.fi-an .fhf-bus,.fhf.fi-an.k-an .fhf-lk,.fhf.fi-an.b-an .fhf-lb,.fhf.fi-an.a-an .fhf-la{stroke:var(--f-strom)}
.fhf-fluss{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-dasharray:2 9;opacity:0;animation:fhfFluss 1.8s linear infinite;transition:opacity .6s}
.fhf-fluss.ein,.fhf.fi-an .fhf-bus+.fhf-fluss,.fhf.fi-an.k-an .fhf-lk+.fhf-fluss,.fhf.fi-an.b-an .fhf-lb+.fhf-fluss,.fhf.fi-an.a-an .fhf-la+.fhf-fluss{opacity:.55}
@keyframes fhfFluss{to{stroke-dashoffset:-11}}
.fhf-pe{fill:none;stroke:#8f9ab0;stroke-width:2;stroke-dasharray:5 4;stroke-linecap:round}
.fhf-fehlerstrom{fill:none;stroke:var(--f-strom);stroke-width:3;stroke-linecap:round;stroke-dasharray:4 7;opacity:0;transition:opacity .5s;animation:fhfFluss 1.2s linear infinite}
.fhf.fehlerstrom .fhf-fehlerstrom{opacity:1}
.fhf-fs-text{font-size:10.5px;font-weight:700;fill:var(--f-strom)!important;opacity:0;transition:opacity .2s}
.fhf.fehlerstrom .fhf-fs-text{opacity:1}
.fhf-erde{stroke:var(--f-ink);stroke-width:2.2;stroke-linecap:round}

/* Auslösen */
.fhf-funke{fill:var(--f-warn);stroke:var(--f-ink);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.fhf.blitz .fhf-funke{animation:fhfFunke 1.1s ease-out}
@keyframes fhfFunke{0%{opacity:0;transform:scale(.6)}30%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(.95)}}
.fhf-fi .fhf-geh{transition:stroke .6s}
.fhf.blitz .fhf-fi .fhf-geh{stroke:var(--f-fehl)}

/* Steckdose außen */
.fhf-dose{fill:#fff;stroke:var(--f-ink);stroke-width:1.8}
.fhf-ring{fill:none;stroke:var(--f-warn);stroke-width:2.4;opacity:0;transform-box:fill-box;transform-origin:center}
.fhf.nass .fhf-ring{opacity:1;animation:fhfRing 2.6s ease-out infinite}
@keyframes fhfRing{0%{transform:scale(.95);opacity:.8}100%{transform:scale(1.18);opacity:0}}
.fhf-tropfen path{fill:#6fa8c4;opacity:0;transform-box:fill-box}
.fhf.nass .fhf-tropfen path{animation:fhfTropf 2.4s ease-in-out infinite}
.fhf.nass .fhf-tropfen path:nth-child(2){animation-delay:.8s}.fhf.nass .fhf-tropfen path:nth-child(3){animation-delay:1.6s}
@keyframes fhfTropf{0%{opacity:0;transform:translateY(-4px)}25%{opacity:.8}75%{opacity:.8}100%{opacity:0;transform:translateY(8px)}}
.fhf-deckel{opacity:0;transform:translateY(-10px);transition:opacity .7s,transform .8s cubic-bezier(.4,0,.2,1)}
.fhf.deckel .fhf-deckel{opacity:1;transform:none}
.fhf-deckel rect{fill:#cfd6e4;stroke:var(--f-ink);stroke-width:1.6}
.fhf-deckel text{font-size:10px;font-weight:800}

/* Isolationsmessgerät */
.fhf-mess{opacity:0;transform:translateY(-4px);transition:opacity .8s,transform .8s}
.fhf.mess .fhf-mess{opacity:1;transform:none}
.fhf-mess-geh{fill:var(--f-geraet)}
.fhf-lcd{fill:#e9efe6}
.fhf-wert{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums}
.fhf-r{fill:var(--f-wid)!important;font-weight:800;font-size:12px}
.fhf-u{fill:var(--f-spannung)!important;font-weight:700;font-size:10px}
.fhf-status rect{fill:#5e6a77;transition:fill .3s}
.fhf-status text{fill:#fff!important;font-size:11px;font-weight:700}
.fhf.zu-niedrig .fhf-status rect{fill:var(--f-fehl)}
.fhf.in-ordnung .fhf-status rect{fill:var(--f-ok)}
.fhf-ader{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s ease .4s}
.fhf.mess .fhf-ader{stroke-dashoffset:0}
.fhf-ader.rot{stroke:#c43b3b}.fhf-ader.sw{stroke:#1b2230}
.fhf-klemme{opacity:0;transition:opacity .2s 1s}
.fhf.mess .fhf-klemme{opacity:1}
.fhf.ab .fhf-ader{stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .6s,opacity .2s .5s}.fhf.ab .fhf-klemme{opacity:0;transition-delay:0s}

/* Schritte, Text, Fortschritt */
.fhf-schritte{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fhf-schritte span{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--f-mut);background:var(--f-paper);transition:background .6s,color .6s}
.fhf-schritte span::before{content:attr(data-n);display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--f-mut);font-size:10.5px}
.fhf-schritte span.jetzt{background:var(--f-ink);color:#fff}
.fhf-schritte span.jetzt::before{color:var(--f-ink)}
.fhf-schritte span.erledigt{background:var(--f-ok-bg);color:var(--f-ok)}
.fhf-schritte span.erledigt::before{content:"✓";background:var(--f-ok);color:#fff}
.fhf-text{min-height:2.7em;font-size:14.5px;line-height:1.35;color:var(--f-ink);transition:opacity .35s}
.fhf-text.wechsel{opacity:0}
.fhf-text b{font-weight:750}
.fhf-text .rot{color:var(--f-fehl)}.fhf-text .gruen{color:var(--f-ok)}
.fhf-fort{height:4px;border-radius:99px;background:var(--f-line);overflow:hidden}
.fhf-fort i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#2f4de6,var(--f-ok))}
.fhf-bild,.fhf-such,.fhf-treffer,.fhf-schritte,.fhf-text{transition-property:opacity,transform,border-color,box-shadow}
.fhf.aus .fhf-bild,.fhf.aus .fhf-text,.fhf.aus .fhf-schritte{opacity:.15;transition:opacity .8s}

@media (max-width:640px){.fhf{padding:16px 14px 14px;gap:8px}.fhf-treffer{grid-template-columns:6px 1fr}.fhf-treffer small{display:none}.fhf-text{font-size:14px}}
@media (max-width:440px){.fhf-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.fhf-schritte span{justify-content:center;font-size:11px;padding:5px 2px}.fhf-schritte span::before,.fhf-schritte span.erledigt::before{display:none}}
@media (prefers-reduced-motion:reduce){.fhf,.fhf *{animation:none!important;transition:none!important}.fhf:hover{transform:none}}