/* =====================================================================
   Intro „Klemme 15“ (intro.js)
   Ab dem ersten Bild: eine leichte, halbtransparente Ebene über der Seite
   (.fs-boot setzt der Kopf von index.html). Die h1 bleibt darunter sichtbar
   gerendert. Darüber ein Rundinstrument mit Zeigerausschlag, eine Punktmatrix-
   Anzeige (Doto) auf einem Raster ungeleuchteter LED-Punkte und Kontrollleuchten;
   danach Partikel auf einer Zeichenfläche. Eisblau ist das einzige Signal.
   Sicherung: ohne Skript verschwindet die Ebene nach 3,6 s von selbst.
   ===================================================================== */
html.fs-boot::after{content:"";position:fixed;inset:0;z-index:89;pointer-events:none;
  background:rgba(5,7,10,.6);background:color-mix(in srgb,var(--bg) 60%,transparent);
  transition:opacity .42s var(--ease);animation:fsb-safe 0s linear 3.6s forwards}
html.fs-boot.fs-boot-out::after{opacity:0}
html.fs-boot.fs-boot-skip::after{transition-duration:.16s}
@keyframes fsb-safe{to{opacity:0;visibility:hidden}}
/* Saubere Bühne: die Achsbeschriftung des Kennfelds erscheint erst nach dem Intro (Übergang aus site.css) */
html.fs-boot .hero.is-gl .hero-labels{opacity:0}
/* Ersatzzeichnung nur, wenn das Intro sie wählt (kein WebGL oder Renderer zu spät): solange die 3D-Fläche
   noch kompiliert, bleibt die Bühne leer, sonst sähe man das Kennfeld zweimal entstehen. Kommt die Fläche
   später doch, blendet sie fertig über die Zeichnung (hero.js, ohne zweiten Aufbau). */
html.fs-boot .hero:not(.nogl):not(.fsb-still) .hero-still{animation:none;opacity:0}
.hero.fsb-still:not(.is-gl) .hero-still{animation:none;opacity:1}

.fsb{position:fixed;inset:0;z-index:90;pointer-events:none;contain:strict;transition:opacity .16s var(--ease);
  --fsb-flash:color-mix(in srgb,var(--acc) 80%,transparent);--fsb-led:rgba(214,226,255,.06);--fsb-glow:color-mix(in srgb,var(--fg) 24%,transparent)}
:root[data-theme="light"] .fsb{--fsb-flash:color-mix(in srgb,var(--acc) 40%,transparent);--fsb-led:rgba(12,18,30,.07);--fsb-glow:transparent}
.fsb.is-skip{opacity:0}
.fsb.is-fade{opacity:0;transition-duration:.42s;transition-delay:.3s}
.fsb-cv{position:absolute;left:0;top:0;width:100%;height:100%}

/* Gerät: Instrument links, Anzeige rechts (schmal untereinander) */
.fsb-pan{position:absolute;left:50%;top:50%;display:flex;align-items:center;gap:30px;transform:translate(-50%,-50%);
  font:800 15px/1 var(--dots);letter-spacing:.05em;text-transform:uppercase;color:var(--fg);text-shadow:0 0 .45em var(--fsb-glow)}
.fsb-g{position:relative;flex:none;width:132px;height:132px;transition:opacity .2s var(--ease)}
/* Marken der Skala: je eine kleine Zeichenfläche auf ganzen Gerätepixeln, ein- und ausgeblendet über
   Compositor-Animationen (intro.js); vor dem ersten Bild unsichtbar */
.fsb-gk{position:absolute;inset:0;transition:opacity .18s linear}
.fsb-gk canvas{position:absolute;display:block;opacity:0}
.fsb-gx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.fsb-gl,.fsb-gu{min-height:1em;font:500 9.5px/1 var(--mono);letter-spacing:.16em;color:var(--mut);text-shadow:none}
.fsb-num{position:relative;font-size:27px;line-height:1;letter-spacing:.02em}
.fsb-n{display:block;min-width:4ch;min-height:1em;font-weight:inherit}
.fsb-ghost{position:absolute;left:0;top:0;opacity:0}

/* Anzeige: ungeleuchtete LED-Punkte als feines Raster, darauf die Zeilen */
.fsb-r{position:relative}
.fsb-r::before{content:"";position:absolute;inset:-14px -18px;pointer-events:none;
  background:radial-gradient(circle,var(--fsb-led) 0 .6px,transparent 1px) 0 0/3px 3px;
  -webkit-mask:radial-gradient(closest-side,#000 60%,transparent);mask:radial-gradient(closest-side,#000 60%,transparent)}
.fsb-log{position:relative;width:34ch;contain:layout paint}
.fsb-l{display:grid;grid-template-columns:11ch minmax(0,1fr);column-gap:1ch;align-items:center;height:25px;margin:0;white-space:pre}
.fsb-k{color:var(--mut)}
.fsb-v.is-wait{color:var(--faint)}
/* Zeichen für Zeichen: jedes neue Zeichen leuchtet kurz auf und klingt nach (Nachleuchten) */
.fsb-t b{font-weight:inherit;animation:fsb-led .46s var(--ease) both}
@keyframes fsb-led{0%{opacity:0;filter:drop-shadow(0 0 0 transparent)}6%{opacity:1;filter:drop-shadow(0 0 3px var(--fsb-flash))}100%{opacity:1;filter:drop-shadow(0 0 0 transparent)}}

/* Kontrollleuchten: an bei Zündung, aus nach bestandener Prüfung */
.fsb-lamps{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font:500 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--faint);text-shadow:none}
.fsb-lp{position:relative;display:inline-flex;align-items:center;gap:7px}
.fsb-lp::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair2)}
.fsb-lp i{position:absolute;left:0;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:var(--fg);box-shadow:0 0 6px 1px var(--fsb-glow);opacity:0;transition:opacity .2s var(--ease)}
.fsb-lp.is-on{color:var(--fg2)}
.fsb-lp.is-on i{opacity:1}

/* Zeigerspitze: derselbe Punkt wie der Signalpunkt (signal.css), Übergabe ohne Sprung */
.fsb-tip{position:absolute;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .16s var(--ease)}
.fsb-tip.is-on{opacity:1}
.fsb-tip.is-gone{opacity:0;transition:none}
.fsb-tip::before,.fsb-tip b{content:"";position:absolute;display:block;border-radius:50%}
.fsb-tip::before{left:-14px;top:-14px;width:28px;height:28px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 42%,transparent),color-mix(in srgb,var(--acc) 12%,transparent) 52%,transparent)}
.fsb-tip b{left:-3px;top:-3px;width:6px;height:6px;background:var(--acc);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 35%,transparent),0 0 6px 1px color-mix(in srgb,var(--acc) 60%,transparent)}
:root[data-theme="light"] .fsb-tip::before{opacity:.55}
:root[data-theme="light"] .fsb-tip b{box-shadow:0 0 0 1.5px var(--bg),0 0 5px 1px color-mix(in srgb,var(--acc) 45%,transparent)}

/* Übergang: Schrift, Instrument und Lampen übergeben an die Partikel */
.fsb-t{transition:opacity .12s var(--ease)}
.fsb.is-fly .fsb-t,.fsb.is-fly .fsb-gk{opacity:0}
.fsb.is-fly .fsb-lp::before,.fsb.is-fly .fsb-lp i,.fsb.is-fly .fsb-r::before{opacity:0;transition:opacity .2s var(--ease)}

@media (max-width:560px){
  .fsb-pan{flex-direction:column;gap:14px;font-size:12.5px;letter-spacing:.03em}
  .fsb-g{width:96px;height:96px}
  .fsb-num{font-size:20px}
  .fsb-gx{gap:4px}
  .fsb-l{height:21px}
  .fsb-lamps{gap:8px 12px;margin-top:12px}
}
@media print{html.fs-boot::after,.fsb{display:none}}