/* © 2026 Patrick Dietz · Dietz Engineering. Alle Rechte vorbehalten. */
/* Film-Kopfbereich (Elektrokonstruktion «Durchblick», Digital «Skizze»): gemeinsame Grundlage. */
/* ── Durchblick: Kopfbereich mit Scroll-Film (Maschine → Röntgenbild) und Schaltplan im Code ──
   Ohne Skript und bei reduzierter Bewegung: Standbild, alle Schritte, Schaltplan fertig gezeichnet.
   Mit Skript: Klasse .db-scrub, 300vh hoch, Bühne klebt, Fortschritt kommt aus durchblick.js (--p). */
.db,html.nav-dark .nav{--ink:#f4f1ec;--ink-dim:rgba(244,241,236,.74);--ink-faint:rgba(244,241,236,.32);--line:rgba(244,241,236,.14);--bg:#06080b;--bg-soft:#101318;--gold:#9bb8e6;--gold-soft:rgba(155,184,230,.14);--accent-fill:#4670B2;--accent-fill-hover:#3F66A6;--on-accent:#fff;--logo:url("/brand/logo-dark.png")}
html.nav-dark .nav{background:rgba(6,8,11,.42);border-bottom-color:rgba(244,241,236,.08);color:var(--ink)}
.db{position:relative;background:var(--bg);color:var(--ink);margin-top:calc(-1 * var(--navh,62px))}
.db-stage{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate}
.db-still,.db-film{position:absolute;inset:0;width:100%;height:100%}
.db-still{object-fit:cover;object-position:62% 50%;z-index:0}
.db-film{z-index:1}
.db-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(6,8,11,.94) 0%,rgba(6,8,11,.78) 30%,rgba(6,8,11,.2) 52%,rgba(6,8,11,0) 62%),linear-gradient(0deg,rgba(6,8,11,.82) 0%,rgba(6,8,11,0) 34%)}
.db-copy{position:relative;z-index:3;width:min(620px,46vw);padding:calc(var(--navh,62px) + clamp(28px,7vh,80px)) 0 0 var(--pad)}
.db-copy h1{font-weight:600;font-size:clamp(34px,3.7vw,56px);line-height:1.06;letter-spacing:-.032em;margin:16px 0 0;text-wrap:balance}
.db-copy h1 em{font-style:normal;color:var(--gold)}
.db-steps{margin-top:clamp(18px,3vh,30px);display:grid;gap:14px}
.db-step p{margin:0;max-width:44ch;font-size:clamp(15px,1.2vw,17px);line-height:1.55;color:var(--ink-dim)}
.db-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3.4vh,34px)}
/* Schaltplan als Blatt im Fenster links unten */
.db-plan{position:relative;z-index:3;margin:clamp(24px,4vh,40px) var(--pad) 0;width:min(560px,calc(100% - 2 * var(--pad)));padding:12px 14px 8px;border:1px solid rgba(155,184,230,.26);border-radius:12px;background:rgba(8,12,18,.78);color:#a9d6ff}
.db-plan svg{display:block;width:100%;height:auto;overflow:visible}
.db-plan .ln{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.db-plan .mk{fill:none;stroke:currentColor;stroke-width:1;stroke-dasharray:3 3;opacity:.75;vector-effect:non-scaling-stroke}
.db-plan text{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;fill:#dbeaff}
.db-plan text.bmk{font-size:11px;font-weight:600;fill:#fff}
.db-plan text.sm{font-size:8.5px;text-anchor:middle;fill:#b9d3f0}
.db-plan text.sym{font-size:14px;font-weight:600;text-anchor:middle;dominant-baseline:middle;fill:#dbeaff}
.db-plan text.title{font-size:9px;fill:#9fb3cc;letter-spacing:.04em}
.db-read{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:6px 18px;margin:18px var(--pad) 0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;letter-spacing:.06em;color:var(--ink-dim)}
.db-read i{font-style:normal;text-transform:uppercase;letter-spacing:.12em}
.db-read b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.db-ex{color:var(--gold);text-transform:uppercase;letter-spacing:.14em}
.db-ki{position:relative;z-index:3;margin:14px var(--pad) 0;padding-bottom:28px;font-size:11.5px;color:var(--ink-dim)}
/* Scroll-Modus: Bühne klebt, Inhalte liegen über dem Film */
.db.db-scrub{height:300vh}
.db-scrub .db-stage{position:sticky;top:0;height:100vh;height:100svh;min-height:0}
.db-scrub .db-steps{position:relative;display:block;min-height:5.8em}
.db-scrub .db-step{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.db-scrub .db-step.on{opacity:1;transform:none;pointer-events:auto}
.db-scrub .db-plan{position:absolute;left:var(--pad);bottom:clamp(54px,8vh,84px);margin:0;width:min(460px,34vw,calc((100svh - 600px) * 1.9));opacity:var(--plan,0);transform:translateY(calc((1 - var(--plan,0)) * 14px))}
.db-scrub .db-plan .ln{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--d,0))}
.db-scrub .db-plan g text,.db-scrub .db-plan .mk{opacity:clamp(0,(var(--d,0) - .55) * 3,1)}
.db-scrub .db-read{position:absolute;right:var(--pad);bottom:clamp(18px,3vh,30px);margin:0;justify-content:flex-end}
.db-scrub .db-ki{position:absolute;left:var(--pad);bottom:clamp(14px,2.4vh,24px);margin:0;padding:0}
@media (max-height:760px){.db-scrub .db-plan{display:none}}
@media (max-width:860px){
  .db-shade{background:linear-gradient(0deg,rgba(6,8,11,.96) 0%,rgba(6,8,11,.82) 42%,rgba(6,8,11,.1) 70%,rgba(6,8,11,.35) 100%)}
  .db-copy{width:auto;padding:calc(var(--navh,62px) + 24px) var(--pad) 0}
  .db-scrub .db-copy{position:absolute;left:0;right:0;bottom:clamp(64px,10vh,96px);padding:0 var(--pad)}
  .db-copy h1{font-size:clamp(30px,8.4vw,42px)}
  .db-scrub .db-steps{min-height:6.4em}
  .db-scrub .db-copy .eyebrow{display:none}
  /* Handy: Zähler oben unter der Kopfleiste, im dritten Schritt ersetzt sie der Schaltplan */
  .db-scrub .db-read{left:var(--pad);right:var(--pad);top:calc(var(--navh,62px) + 14px);bottom:auto;justify-content:flex-start;opacity:calc(1 - var(--plan3,0))}
  .db-scrub .db-plan{display:block;left:var(--pad);right:var(--pad);top:calc(var(--navh,62px) + 12px);bottom:auto;width:auto;max-width:460px;opacity:var(--plan3,0);transform:translateY(calc((1 - var(--plan3,0)) * -10px))}
  .db-scrub .db-ki{bottom:14px}
}
@media (max-width:860px) and (max-height:620px){.db-scrub .db-plan{display:none}}
@media (prefers-reduced-motion:reduce){.db-scrub .db-step{transition:none}}