/* HS Check – eigene Projektseite. Welt: Leiterplatte (Indigo-Lötstopplack, Kupferbahnen, Zinnpads, Mint als geprüfter Pfad) und Datenblatt.
   Farben aus der Marke HS Check (Indigo, Grün/Mint, Weiß). Ohne JavaScript und mit reduzierter Bewegung
   steht alles im Endzustand; Startzustände setzt nur projekt-hs-check.js (Klasse .bewegt).
   Reihenfolge der Abschnitte wie auf der Seite: Einstieg, Kurzfassung, Leserfrage, Lagen, Ablauf, Redaktion, Plugin, Inhalte, Grundsätze, Stand, Zusammenspiel, Fuß, Druck. */

/* ---------- Seitenwechsel: diese Welt fährt von unten herein, die vorige Seite tritt zurück (View Transitions; ohne Unterstützung oder bei reduzierter Bewegung normaler Seitenaufruf) ---------- */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition{background:#e6e9f8}
  ::view-transition-old(root){animation:sw-zurueck .6s cubic-bezier(.5,0,.2,1) both;mix-blend-mode:normal}
  ::view-transition-new(root){animation:sw-herein .8s cubic-bezier(.16,1,.3,1) .05s both;mix-blend-mode:normal}
}
@keyframes sw-zurueck{to{transform:translateY(-4%) scale(.9);opacity:.2}}
@keyframes sw-herein{from{transform:translateY(100%)}}

@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Inter;src:url('../fonts/inter-normal-400_700-latin-ext.woff2') format('woff2');font-weight:400 700;font-display:swap;unicode-range:U+0100-02FF}
@font-face{font-family:Plex;src:url('../fonts/ibm-plex-mono-normal-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url('../fonts/ibm-plex-mono-normal-500-latin.woff2') format('woff2');font-weight:500;font-display:swap}

/* ---------- Farben und Maße ---------- */
:root{
  --nacht:#141950; --platte:#1B2264; --platte-2:#222A74; --indigo-3:#343E8C; --indigo-4:#48518B; --kupfer:#D08A57; --kupfer-matt:#9A6A4E; --zinn:#C8CEEA;
  --silk:#E6E9F8; --text-p:#C9CEEC; --mint:#12DA9D; --led-aus:#2C3584; --kante:#2E3784;
  --papier:#F4F6FB; --papier-2:#E8EDF8; --linie:#DCE2EC; --tinte:#1B2264; --tinte-2:#4A5370; --gruen:#007A50; --gruen-tief:#006644;
  --rand:16px; --abstand:clamp(72px,9vw,128px);
}
@media (min-width:768px){:root{--rand:32px}}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--nacht)}
body{background:var(--nacht);color:var(--silk);font:400 17px/1.6 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
:focus-visible{outline:3px solid var(--mint);outline-offset:4px;border-radius:6px}
.blatt :focus-visible{outline-color:var(--gruen)}
.wrap{width:min(1200px,100% - 2*var(--rand));margin-inline:auto}
.mono{font-family:Plex,ui-monospace,monospace}
figure{margin:0}
svg{overflow:hidden}
p,li,dd{overflow-wrap:break-word}
@media (max-width:599px){p,li,dd{hyphens:auto}}

h1,h2{font-family:Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.035em;line-height:1.04;text-wrap:balance}
h2{font-size:clamp(1.8rem,1.1rem + 2.9vw,3.3rem)}
h3{font-family:Inter,sans-serif;font-weight:700;line-height:1.3}

.kicker{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.05em;color:var(--mint);margin-bottom:18px}
.kicker::before{content:"";flex:none;width:30px;height:3px;border-radius:2px;background:currentColor}
.kicker::after{content:"";flex:none;width:9px;height:9px;border-radius:50%;border:2px solid currentColor;margin-right:-14px;order:-1;position:relative;z-index:1;background:var(--platte)}
.blatt .kicker::after{background:var(--papier)}
.intro{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);margin-top:18px;max-width:60ch}

/* ---------- Flächen: Platine (dunkel) und Datenblatt (hell) ---------- */
.platte{position:relative;background-color:var(--platte);background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:22px 22px}
.platte .intro{color:var(--text-p)}
.platte h2{color:#fff}
.blatt{position:relative;color:var(--tinte);background-color:var(--papier);
  background-image:linear-gradient(rgba(27,34,100,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(27,34,100,.055) 1px,transparent 1px);background-size:24px 24px}
.blatt .kicker{color:var(--gruen-tief)} /* 13 px auf dem Raster: dunkleres Grün hält 4,5 : 1 auch auf den Rasterlinien */
.blatt .intro{color:var(--tinte-2)}
.blatt h2{color:var(--tinte)}
.kopfzeile{max-width:780px;margin-bottom:clamp(32px,5vw,56px)}

/* ---------- Kopf ---------- */
.skip{position:absolute;left:16px;top:-80px;z-index:20;background:var(--mint);color:var(--nacht);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.kopf{background:var(--nacht);border-bottom:1px solid rgba(255,255,255,.08)}
/* „← Profil“ links, Fach-Etikett in der Mitte (am Handy ausgeblendet), Name als Weg zur Startseite rechts */
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:68px;padding:10px clamp(16px,3vw,40px)}
.zurueck,.k-los{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 18px;border:2px solid var(--mint);border-radius:999px;color:#fff;font-weight:600;font-size:16px;text-decoration:none;transition:background-color .2s}
.zurueck:hover,.k-los:hover{background:rgba(18,218,157,.14)}
.name{display:inline-flex;align-items:center;min-height:44px;font-size:15px;color:var(--text-p);text-decoration:none}
.name:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.code{font-size:13px;color:var(--text-p)}
@media (max-width:519px){.code{display:none}}

/* ---------- Einstieg mit Platine ---------- */
.held{padding-block:clamp(40px,7vw,96px) clamp(56px,8vw,112px);overflow-x:clip} /* die gekippte Platine ragt beim Einstieg nicht über die Seitenbreite */
.held-raster{display:grid;gap:clamp(36px,5vw,64px);align-items:center}
@media (min-width:960px){.held-raster{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}}
.held h1{font-size:clamp(4.4rem,1rem + 22vw,9.5rem);line-height:.9;margin-bottom:26px;letter-spacing:-.055em;overflow-wrap:anywhere} /* bricht nur, wenn „Check“ mit größeren Textabständen nicht mehr passt */
@media (min-width:960px){.held h1{font-size:clamp(6rem,12.4vw,11.5rem)}}
.h-hs,.h-check{display:block}
.h-check{color:var(--mint)}
.lead{font-size:clamp(1.25rem,1.05rem + .8vw,1.6rem);font-weight:600;line-height:1.35;color:#fff;margin-bottom:14px;max-width:26ch}
.held-text p:not(.lead):not(.kicker){color:var(--text-p);max-width:52ch}
.pads{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.pads li,.k-nav a{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;border:1px solid var(--indigo-4);border-radius:8px;font-size:16px;font-weight:600;color:#fff;background:rgba(255,255,255,.035)}
.pads li::before,.k-nav a::before{content:"";width:14px;height:14px;border-radius:3px;background:radial-gradient(circle,var(--platte) 2.6px,var(--zinn) 3.2px)}
.held-bild svg{display:block;width:100%;height:auto;max-width:640px;margin-inline:auto;filter:drop-shadow(0 28px 50px rgba(5,8,40,.45))}

/* Platine (SVG) */
.p-board{fill:var(--platte-2);stroke:#3A4596;stroke-width:2}
.p-silk-frame{fill:none;stroke:rgba(230,233,248,.2);stroke-width:1.5;stroke-dasharray:2 6}
.p-hole{fill:var(--nacht);stroke:#AEB6E0;stroke-width:5}
.p-vias circle{fill:#171C58;stroke:var(--kupfer-matt);stroke-width:1.6}
.p-trace path{fill:none;stroke:var(--kupfer-matt);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.p-lit path{fill:none;stroke:var(--mint);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.p-via circle{fill:#171C58;stroke:var(--kupfer);stroke-width:2.5}
.p-ic{fill:#141950;stroke:#3B4698;stroke-width:2}
.p-pin,.p-pad{fill:var(--zinn)}
.p-kuehl{fill:#2C3584}
.p-rippe{fill:var(--indigo-4)}
.p-flash{fill:#0E1240;stroke:#3B4698;stroke-width:1.5}
.p-dot{fill:var(--indigo-4)}
.p-padloch{fill:#141950}
.p-smd{fill:#0E1240}
.p-quarz{fill:#AEB6E0}
.p-silk text{font-family:Plex,monospace;font-size:15px;font-weight:500;letter-spacing:2px;fill:var(--silk)}
.p-silk .klein{font-size:12px;letter-spacing:1px;opacity:.75}
.led-hof{fill:var(--mint);opacity:.22}
.led-kern{fill:var(--mint)}
.p-chip{fill:#12164A;stroke:#3B4698;stroke-width:2}
.p-pin1{fill:var(--indigo-4)}
.ring-spur{fill:none;stroke:#262E7A;stroke-width:9}
.ring{fill:none;stroke:var(--mint);stroke-width:9;stroke-linecap:round}
.wm-hs{font-family:Inter,sans-serif;font-weight:700;font-size:48px;fill:#fff;letter-spacing:-2px}
.wm-check{font-family:Plex,monospace;font-weight:500;font-size:13px;letter-spacing:5px;fill:var(--mint)}
.haken-rahmen{fill:none;stroke:var(--mint);stroke-width:3}
.tick{fill:none;stroke:var(--mint);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.puls{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #12DA9D)}

/* ---------- Kurzfassung „In 30 Sekunden“: Kenndaten wie im Datenblatt, Funktionen an Durchkontaktierungen, Sprungleiste als Lötpads ---------- */
.kurz{padding-bottom:clamp(48px,6vw,80px)}
.kurz-in{padding-top:clamp(40px,6vw,72px);border-top:1px dashed rgba(230,233,248,.18)}
.kurz .kicker{color:var(--mint)}
.k-dl li{position:relative;padding-left:20px;list-style:none}
.k-dl li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;border:2px solid var(--mint)}
.k-los{margin-top:24px}
.k-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.k-nav a{min-height:44px;text-decoration:none;transition:border-color .2s}
.k-nav a:hover{border-color:var(--mint)}

/* ---------- Leiterbahn-Trenner ---------- */
.trenner{height:90px;overflow:hidden}
.trenner svg{display:block;width:100%;height:90px}
.t-basis path{fill:none;stroke:var(--kupfer-matt);stroke-width:4}
.t-lit path{fill:none;stroke:var(--mint);stroke-width:4;opacity:.85}
.t-via circle{fill:var(--platte);stroke:var(--kupfer);stroke-width:2.5}

/* ---------- Worum es geht: Pinbelegung der Leserfrage ---------- */
.worum-raster{display:grid;gap:clamp(32px,5vw,64px);align-items:center;padding-top:clamp(40px,6vw,72px);border-top:1px dashed rgba(230,233,248,.18)}
@media (min-width:960px){.worum-raster{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
.worum-text p:not(.kicker):not(.intro){color:var(--text-p);max-width:60ch;margin-top:14px}
.worum .intro{color:var(--silk)}
.worum .trenner{margin-top:clamp(56px,8vw,112px)}
.pinbild svg{display:block;width:100%;height:auto;max-width:540px;margin-inline:auto}
.pb-rahmen{fill:rgba(255,255,255,.025);stroke:rgba(230,233,248,.22);stroke-width:1.5;stroke-dasharray:2 6}
.pb-titel{font-family:Plex,monospace;font-weight:500;font-size:12px;letter-spacing:2px;fill:var(--silk);opacity:.72}
.pb-pins path{fill:none;stroke:var(--kupfer-matt);stroke-width:5;stroke-linecap:round}
.pb-lit path{fill:none;stroke:var(--mint);stroke-width:5;stroke-linecap:round}
.pb-nc{fill:none;stroke:var(--indigo-4);stroke-width:5;stroke-linecap:round}
.pb-nc-x{fill:none;stroke:#8F98CF;stroke-width:3.5;stroke-linecap:round}
.pb-pfeil{fill:var(--mint)}
.pb-ic{fill:#12164A;stroke:#3B4698;stroke-width:2.5}
.pb-kerbe{fill:none;stroke:#3B4698;stroke-width:2.5}
.pb-ic-lit{fill:none;stroke:var(--mint);stroke-width:3}
.pb-hs{font-family:Inter,sans-serif;font-weight:700;font-size:46px;letter-spacing:-2px;fill:#fff}
.pb-check{font-family:Plex,monospace;font-weight:500;font-size:13px;letter-spacing:5px;fill:var(--mint)}
.pb-nr text{font-family:Plex,monospace;font-size:12px;fill:#8F98CF}
.pb-label text{font-family:Plex,monospace;font-weight:500;font-size:15px;fill:var(--silk)}
.pb-label .pb-ncl{fill:#8F98CF}
.pb-puls{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #12DA9D)}

/* ---------- Aufbau: Explosionszeichnung (breit klebt die Zeichnung neben den Positionen) ---------- */
.aufbau,.grundsatz,.plugin,.zusammen{padding-block:var(--abstand)}
.aufbau-raster{display:grid;gap:32px;align-items:center}
@media (min-width:900px){
  .aufbau-raster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
  .aufbau-bild{position:sticky;top:clamp(16px,7vh,80px)}
  .aufbau-bild svg{max-height:calc(100vh - 2 * clamp(16px,7vh,80px))}
}
.aufbau-bild svg{display:block;width:100%;height:auto;max-width:600px;margin-inline:auto}
.achse{fill:none;stroke:#9AA3D6;stroke-width:1.5;stroke-dasharray:3 7}
.kontur{fill:none;stroke:var(--mint);stroke-width:3;stroke-linejoin:round;opacity:0}
.leader{fill:none;stroke:var(--tinte);stroke-width:1.5}
.bubble circle{fill:#fff;stroke:var(--tinte);stroke-width:2}
.bubble text{font-family:Plex,monospace;font-weight:500;font-size:15px;fill:var(--tinte)}
.stueckliste{list-style:none;display:grid;gap:14px}
.stueckliste li{background:rgba(255,255,255,.78);border:1px solid var(--linie);border-left:4px solid var(--linie);border-radius:10px;padding:18px 20px;transition:border-color .3s,background-color .3s,box-shadow .3s}
.stueckliste li.is-aktiv{border-left-color:var(--gruen);background:#fff;box-shadow:0 12px 30px rgba(27,34,100,.10)}
.pos{display:block;font-size:13px;color:var(--gruen);margin-bottom:4px}
.stueckliste h3{font-size:1.1rem;color:var(--tinte);margin-bottom:6px}
.stueckliste p{color:var(--tinte-2);font-size:1rem}
.stueckliste p+p{margin-top:10px}
.stueckliste a,.grundsatz a{color:var(--gruen);font-weight:600;text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- Redaktioneller Ablauf ---------- */
.ablauf{padding-bottom:var(--abstand)}
.ablauf .kopfzeile{margin-top:clamp(24px,4vw,48px)}
.buehne{display:none}
.b-spur{fill:none;stroke:var(--kupfer-matt);stroke-width:5}
.b-spur-lit{fill:none;stroke:var(--mint);stroke-width:5}
.b-pfosten{fill:#2C3584}
.b-balken{fill:#2C3584;stroke:#3B4698;stroke-width:1.5}
.b-led{fill:var(--mint)}
.b-pad{fill:var(--zinn)}
.d-blatt{fill:#fff;stroke:#CBD3F0;stroke-width:1.5}
.d-kopf{fill:var(--tinte)}
.d-frage circle{fill:var(--mint)}
.d-frage text{font-family:Inter,sans-serif;font-weight:700;font-size:12px;fill:var(--tinte)}
.d-quellen .q1{fill:#CBD3F0}.d-quellen .q2{fill:#9AA3D6}.d-quellen .q3{fill:var(--mint)}
.d-zeilen rect{fill:#B9C1E6}
.d-haken path{fill:none;stroke:var(--gruen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.d-status rect{fill:var(--papier-2)}
.d-status text{font-family:Plex,monospace;font-weight:500;font-size:8.5px;letter-spacing:1px;fill:var(--indigo-4)}
.d-status.frei rect{fill:var(--mint)}
.d-status.frei text{fill:var(--nacht)}
.d-scan{fill:var(--mint)}

.stationen-feld{position:relative}
.stationen{list-style:none;display:grid}
.station{position:relative;padding:0 0 30px 64px}
.station:last-child{padding-bottom:0}
.spur{position:absolute;left:21px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--kupfer-matt)}
.spur-lit{position:absolute;inset:0;border-radius:2px;background:var(--mint);transform-origin:50% 0}
.st-led{position:absolute;left:13px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 5px rgba(18,218,157,.18);transition:background-color .25s,box-shadow .25s}
.st-nr{display:block;font-size:13px;color:var(--mint);margin-bottom:2px}
.station h3{font-size:1.25rem;color:#fff;margin-bottom:4px;transition:color .25s}
.station p{color:var(--text-p);font-size:1rem;max-width:52ch}
.token{position:absolute;left:10px;bottom:-6px;width:26px;height:32px;z-index:2;filter:drop-shadow(0 4px 10px rgba(5,8,40,.5))}
.token svg{display:block;width:26px;height:32px}
.tk-blatt{fill:#fff}.tk-kopf{fill:var(--tinte)}.tk-z{fill:#B9C1E6}.tk-led{fill:#CBD3F0}
.token.frei .tk-led{fill:var(--gruen)}

@media (min-width:1024px){
  .buehne{display:block;margin-bottom:6px}
  .buehne svg{display:block;width:100%;height:auto}
  .stationen{grid-template-columns:repeat(5,minmax(0,1fr))}
  .station{margin-inline:10px;padding:14px 6px 0;border-top:3px solid var(--mint);transition:border-color .25s}
  .spur,.token,.st-led{display:none}
  .ablauf .kopfzeile{margin-bottom:24px}
}

/* ---------- Redaktion im Detail: was jede Station zum Beitrag hinzufügt ---------- */
.redaktion{padding-bottom:var(--abstand)}
.redaktion .kopfzeile{padding-top:clamp(36px,5vw,56px);border-top:1px dashed rgba(230,233,248,.18);max-width:none}
.redaktion .kopfzeile>*{max-width:780px}
.r-liste{list-style:none;display:grid;gap:16px}
@media (min-width:860px){.r-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
.r-punkt{display:grid;grid-template-columns:60px minmax(0,1fr);gap:16px;align-items:start;padding:20px 18px 22px;border:1px solid var(--kante);border-radius:14px;background:rgba(10,14,52,.34)}
@media (min-width:480px){.r-punkt{grid-template-columns:96px minmax(0,1fr);gap:24px;padding:24px 26px 26px}}
.r-danach{border-style:dashed}
.r-doc{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 14px rgba(5,8,40,.45))}
.r-nr{display:block;font-size:13px;color:var(--mint);margin-bottom:2px}
.r-punkt h3{font-size:1.2rem;color:#fff;margin-bottom:6px}
.r-punkt p{color:var(--text-p);font-size:1rem}
.rd-blatt{fill:#fff;stroke:#CBD3F0;stroke-width:1.5}
.rd-kopf{fill:var(--tinte)}
.rd-frage circle,.rd-neu circle{fill:var(--mint)}
.rd-frage text{font-family:Inter,sans-serif;font-weight:700;font-size:12px;fill:var(--tinte)}
.rd-neu path{fill:none;stroke:var(--nacht);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd-quellen .q1{fill:#CBD3F0}.rd-quellen .q2{fill:#9AA3D6}.rd-quellen .q3{fill:var(--mint)}
.rd-zeilen rect{fill:#B9C1E6}
.rd-haken path{fill:none;stroke:var(--gruen);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rd-scan{fill:var(--mint);opacity:0}
.rd-status rect{fill:var(--papier-2)}
.rd-status text{font-family:Plex,monospace;font-weight:500;font-size:8px;letter-spacing:.8px;fill:var(--indigo-4)}
.rd-status.frei rect{fill:var(--mint)}
.rd-status.frei text{fill:var(--nacht)}
.rd-alt{opacity:0}

/* ---------- Das eigene Plugin: Bestückung der Grundplatte ---------- */
.plugin-raster{display:grid;gap:clamp(32px,5vw,56px);align-items:center}
@media (min-width:960px){.plugin-raster{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.bestueck-bild{order:2}}
.bestueck-bild svg{display:block;width:100%;height:auto;max-width:640px;margin-inline:auto;filter:drop-shadow(0 22px 40px rgba(27,34,100,.22))}
.bs-board{fill:var(--platte-2);stroke:#3A4596;stroke-width:2}
.bs-bahn path{fill:none;stroke:var(--kupfer-matt);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.bs-pad{fill:var(--zinn)}
.bs-court rect,.bs-court circle{fill:none;stroke:rgba(230,233,248,.32);stroke-width:1.2;stroke-dasharray:3 4}
.bs-silk text{font-family:Plex,monospace;font-weight:500;font-size:13px;letter-spacing:1.5px;fill:var(--silk)}
.bs-silk .klein{font-size:12px;letter-spacing:1px;opacity:.8}
.bt-body{fill:#12164A;stroke:#3B4698;stroke-width:2}
.bt-ring{fill:none;stroke:var(--mint);stroke-width:7}
.bt-dot{fill:var(--indigo-4)}
.bt-aa{font-family:Inter,sans-serif;font-weight:700;font-size:24px;fill:#fff}
.bt-404{font-family:Plex,monospace;font-weight:500;font-size:11px;fill:var(--silk)}
.bt-led{fill:#12164A;stroke:var(--mint);stroke-width:5}
.bt-haken{fill:none;stroke:#fff;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.bt-schalter{fill:#2C3584;stroke:var(--indigo-4);stroke-width:2}
.bt-schlitz{fill:#0E1240}
.bt-knopf{fill:var(--zinn)}
.bt-pin{fill:var(--zinn)}
.bs-kopf,.bs-glanz{opacity:0}
.bk-stange{fill:#9AA3D6}.bk-kopf{fill:var(--zinn)}.bk-duese{fill:var(--silk)}
.bom-liste{list-style:none;display:grid;gap:10px}
.bom-liste li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;background:rgba(255,255,255,.78);border:1px solid var(--linie);border-left:4px solid var(--gruen);border-radius:10px;transition:border-color .3s,background-color .3s}
.bom-liste .ref{display:flex;justify-content:center;align-items:center;height:30px;border-radius:6px;background:var(--tinte);color:#fff;font-size:13px;font-weight:500}
.bom-liste h3{font-size:1.05rem;color:var(--tinte);margin-bottom:2px}
.bom-liste p{color:var(--tinte-2);font-size:1rem}
.bewegt .bom-liste li:not(.is-on){border-left-color:var(--linie)}
.bewegt .bom-liste li:not(.is-on) .ref{background:var(--indigo-4)}
.bom-liste li.is-on{background:#fff}

/* ---------- Inhalte und SEO: Nutzen mit sechs Beiträgen ---------- */
.inhalte{padding-bottom:var(--abstand)}
.inhalte .kopfzeile{margin-top:clamp(24px,4vw,48px)}
.inhalte-raster{display:grid;gap:clamp(32px,5vw,64px);align-items:start}
@media (min-width:960px){.inhalte-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.nutzen-bild{position:sticky;top:clamp(16px,10vh,96px)}}
.nutzen-bild svg{display:block;width:100%;height:auto;max-width:600px;margin-inline:auto;filter:drop-shadow(0 26px 46px rgba(5,8,40,.45))}
.inhalte-text>p{color:var(--text-p);max-width:60ch}
.inhalte-text>p+p{margin-top:14px}
.inhalte-text h3{font-size:1.15rem;color:#fff;margin:28px 0 12px}
.bauplan{list-style:none;counter-reset:bp;display:grid;gap:8px}
.bauplan li{counter-increment:bp;position:relative;padding:9px 14px 9px 50px;border:1px solid var(--kante);border-radius:8px;background:rgba(10,14,52,.3);color:var(--silk);font-size:1rem;line-height:1.45}
.bauplan li::before{content:counter(bp,decimal-leading-zero);position:absolute;left:14px;top:10px;font-family:Plex,monospace;font-size:13px;color:var(--mint)}
.n-panel{fill:var(--platte-2);stroke:#3A4596;stroke-width:2}
.n-loch{fill:var(--nacht);stroke:#AEB6E0;stroke-width:3}
.n-fid{fill:var(--zinn)}
.n-fid-ring{fill:none;stroke:rgba(230,233,248,.35);stroke-width:1.2}
.n-titel{font-family:Plex,monospace;font-weight:500;font-size:12px;letter-spacing:2px;fill:var(--silk);opacity:.75}
.n-ritz path{fill:none;stroke:rgba(230,233,248,.26);stroke-width:1.5;stroke-dasharray:4 5}
.nr-brett{fill:#141950;stroke:var(--kupfer-matt);stroke-width:2}
.nr-kupfer{fill:var(--kupfer-matt)}
.nr-linie{fill:none;stroke:var(--kupfer-matt);stroke-width:2}
.nf-brett{fill:var(--platte);stroke:#3B4698;stroke-width:2}
.nf-zinn{fill:var(--zinn)}
.nf-hell{fill:#9AA3D6}
.nf-linie{fill:none;stroke:#9AA3D6;stroke-width:1.5}
.n-box{fill:#0E1240;stroke:var(--mint);stroke-width:2}
.n-label{font-family:Plex,monospace;font-weight:500;font-size:13px;letter-spacing:1px;fill:var(--silk)}
.n-rakel{opacity:0}
.n-rakel-blatt{fill:var(--zinn)}
.n-rakel-griff{fill:#9AA3D6}

/* ---------- Grundsätze: Prüfspitze und Grenzwerte ---------- */
.grundsatz-raster{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.grundsatz-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}}
.grundsatz-text p:not(.kicker){color:var(--tinte-2);max-width:56ch;margin-top:16px}
.grundsatz-bild svg{display:block;width:100%;height:auto;max-width:520px;margin-inline:auto}
.s-pcb{fill:var(--platte)}
.s-bahn{fill:none;stroke:var(--kupfer);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.s-via{fill:var(--platte);stroke:var(--kupfer);stroke-width:2.5}
.s-pad{fill:var(--zinn)}
.s-silk{font-family:Plex,monospace;font-size:13px;letter-spacing:1px;fill:var(--silk)}
.s-geraet{fill:var(--platte)}
.s-display{fill:#0E1240}
.s-anzeige{font-family:Plex,monospace;font-weight:500;font-size:30px;fill:var(--mint)}
.s-knopf{fill:#2C3584;stroke:var(--indigo-4);stroke-width:2}
.s-knopf-z{stroke:var(--zinn);stroke-width:3;stroke-linecap:round}
.s-buchse{fill:#0E1240;stroke:var(--zinn);stroke-width:2}
.s-kabel{fill:none;stroke:var(--tinte);stroke-width:5;stroke-linecap:round}
.s-kontakt{fill:none;stroke:var(--mint);stroke-width:3;opacity:0}
.s-nadel{stroke:#9AA3D6;stroke-width:3.5;stroke-linecap:round}
.s-hals{fill:var(--zinn)}
.s-griff{fill:#303C86}
.s-rille{stroke:var(--mint);stroke-width:3}
.grenzwerte-block{margin-top:clamp(48px,7vw,88px)}
.gw-titel{font-size:clamp(1.35rem,1.1rem + .9vw,1.8rem);color:var(--tinte);letter-spacing:-.02em;line-height:1.2}
.gw-intro{color:var(--tinte-2);margin-top:8px;max-width:62ch}
.gw-kopf{display:none;margin-top:24px;padding:0 20px 8px;font-size:13px;color:var(--gruen)}
.grenzwerte{margin-top:14px;border:1px solid var(--linie);border-top:3px solid var(--tinte);border-radius:12px;background:rgba(255,255,255,.82)}
.grenzwerte div{display:grid;gap:2px 28px;padding:14px 20px;border-top:1px solid var(--linie)}
.grenzwerte div:first-child{border-top:0}
.grenzwerte dt{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--tinte)}
.grenzwerte dt::before{content:"";flex:none;width:12px;height:12px;border-radius:2px;border:2px solid var(--gruen);background:linear-gradient(135deg,transparent 45%,var(--gruen) 45% 55%,transparent 55%)}
.grenzwerte dd{color:var(--tinte-2)}
@media (min-width:720px){
  .gw-kopf{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px}
  .grenzwerte div{grid-template-columns:210px minmax(0,1fr);align-items:baseline}
}

/* ---------- Stand und Ausblick: Frontplatte mit Anzeigen ---------- */
.stand{padding-bottom:var(--abstand)}
.stand .kopfzeile{margin-top:clamp(24px,4vw,48px)}
.frontplatte{position:relative;display:grid;gap:30px;padding:clamp(28px,4vw,44px) clamp(20px,4vw,44px);border-radius:18px;background:#141950;border:1px solid var(--led-aus);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 48px rgba(5,8,40,.35)}
@media (min-width:900px){.frontplatte{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:52px}}
.fp-schraube{position:absolute;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,#0E1240 1.6px,#AEB6E0 2.2px 4.2px,#48518B 4.8px)}
.fp-schraube:nth-of-type(1){top:12px;left:12px}.fp-schraube:nth-of-type(2){top:12px;right:12px}
.fp-schraube:nth-of-type(3){bottom:12px;left:12px}.fp-schraube:nth-of-type(4){bottom:12px;right:12px}
.fp-titel{font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mint);margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--led-aus)}
.anzeigen{list-style:none;display:grid;gap:18px}
.anzeige{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;align-items:start}
.anzeige p{color:var(--text-p);font-size:1rem}
.anzeige strong{color:#fff}
.led-a{width:18px;height:18px;margin-top:4px;border-radius:50%;background:var(--led-aus);border:2px solid var(--indigo-4);transition:background-color .35s,border-color .35s,box-shadow .5s}
.anzeige.an .led-a{background:var(--mint);border-color:var(--mint);box-shadow:0 0 0 4px rgba(18,218,157,.16),0 0 14px rgba(18,218,157,.55)}
.anzeige.halb .led-a{background:linear-gradient(90deg,var(--mint) 50%,var(--led-aus) 50%);border-color:var(--mint)}
.anzeige.aus .led-a{background:transparent;border:2px dashed #6B74B8}
.bewegt .anzeige.an:not(.ein) .led-a,.bewegt .anzeige.halb:not(.ein) .led-a{background:var(--led-aus);border-color:var(--indigo-4);box-shadow:none}
.bewegt .anzeige.ein .led-a{animation:aufleuchten .7s ease-out}
@keyframes aufleuchten{0%{transform:scale(.7)}45%{transform:scale(1.3)}100%{transform:scale(1)}}

/* ---------- Zusammenspiel: Steckkarten im Baugruppenträger ---------- */
.traeger{position:relative;list-style:none;display:grid;gap:34px;padding-bottom:12px}
@media (min-width:860px){.traeger{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-bottom:22px}.traeger::after{content:"";position:absolute;left:-10px;right:-10px;bottom:0;height:12px;border-radius:4px;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.12) 22px 24px),var(--nacht);box-shadow:0 8px 18px rgba(27,34,100,.18)}}
.karte{position:relative;display:flex;flex-direction:column;gap:8px;padding:20px 20px 46px;border-radius:12px 12px 4px 4px;background-color:var(--platte);background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:18px 18px;color:var(--silk);box-shadow:0 18px 36px rgba(27,34,100,.18)}
.karte::after{content:"";position:absolute;left:18px;right:18px;bottom:9px;height:20px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--kupfer) 0 9px,transparent 9px 15px)}
.karte::before{content:"";position:absolute;left:6px;right:6px;bottom:-12px;height:10px;border-radius:0 0 6px 6px;background:var(--mint);transition:background-color .3s}
.k-code{font-size:13px;color:var(--mint)}
.k-led{position:absolute;top:24px;right:20px;width:12px;height:12px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px rgba(18,218,157,.7);transition:background-color .3s,box-shadow .3s}
.karte h3{font-size:1.3rem;color:#fff}
.karte h3 a{color:#fff;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:5px}
.karte h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.karte h3 a:hover{color:var(--mint)}
.karte a:focus-visible{outline-color:var(--mint)}
.karte p{color:var(--text-p);font-size:1rem}
.karte.hier{background-color:#12164A;box-shadow:inset 0 0 0 2px rgba(18,218,157,.45),0 18px 36px rgba(27,34,100,.18)}
.k-hier{display:block;margin-top:6px;font-weight:600;color:var(--mint)}
.bewegt .karte:not(.sitzt) .k-led{background:var(--led-aus);box-shadow:none}
.bewegt .karte:not(.sitzt)::before{background:var(--led-aus)}

/* ---------- Fuß: Technik und Rolle, weitere Projekte ---------- */
.fuss{padding-bottom:48px}
.fuss .kicker{margin-top:20px}
.kenndaten{display:grid;gap:12px}
@media (min-width:900px){.kenndaten{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
.kenndaten div{padding:14px 16px;border:1px solid var(--kante);border-radius:10px;background:rgba(10,14,52,.3)}
.kenndaten dt{font-family:Plex,monospace;font-size:13px;color:var(--mint);margin-bottom:4px}
.kenndaten dd{color:var(--text-p);font-size:1rem}
.weiter{margin-top:clamp(40px,6vw,64px)}
.weiter-titel{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);color:#fff;margin-bottom:18px}
.anschluesse{list-style:none;display:grid;gap:12px}
@media (min-width:768px){.anschluesse{grid-template-columns:repeat(3,minmax(0,1fr))}}
.anschluesse a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;min-height:76px;padding:14px 16px;border:1px solid #3B4698;border-radius:10px;background:var(--nacht);color:#fff;text-decoration:none;transition:border-color .2s,background-color .2s}
.anschluesse .j{grid-row:1 / span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:8px;border:2px solid var(--zinn);color:var(--zinn);font-size:13px;font-weight:500;transition:border-color .2s,color .2s,box-shadow .2s}
.a-richtung{font-size:15px;color:var(--text-p)}
.anschluesse b{font-size:1.15rem;line-height:1.25}
.anschluesse a:hover,.anschluesse a:focus-visible{border-color:var(--mint);background:var(--platte)}
.anschluesse a:hover .j,.anschluesse a:focus-visible .j{border-color:var(--mint);color:var(--mint);box-shadow:0 0 12px rgba(18,218,157,.45)}
.fuss-raster{display:grid;gap:16px;margin-top:clamp(32px,5vw,48px);padding-top:20px;border-top:1px solid rgba(255,255,255,.08)}
@media (min-width:768px){.fuss-raster{grid-template-columns:1fr auto;align-items:center}}
.hinweis{color:var(--text-p);font-size:16px}
.fuss-nav{display:flex;flex-wrap:wrap;gap:4px 26px}
.fuss-nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:6px}
.fuss-nav a:hover{color:var(--mint)}

/* ---------- Zustände nur mit Bewegung (Klasse setzt das Skript) ---------- */
.bewegt .st-led{background:#2C3584;box-shadow:none}
.bewegt .station.is-on .st-led{background:var(--mint);box-shadow:0 0 0 5px rgba(18,218,157,.18)}
.bewegt .station:not(.is-on) h3{color:var(--text-p)}
.bewegt .station:not(.is-on) .st-nr{color:#8F98CF}
@media (min-width:1024px){.bewegt .station:not(.is-on){border-top-color:#2E3784}}
.bewegt .token{bottom:auto;top:0}

/* ---------- Druck ----------
   Der Lötstopplack ist ein Hintergrund und bleibt auf dem Papier weg: weiße Schrift und Mint werden zu Indigo und Grün.
   In den Zeichnungen bleibt der Bestückungsdruck hell, denn Platinen und Chips sind SVG-Flächen und werden gedruckt.
   Bewegungen setzt projekt-hs-check.js vor dem Druck ins Ruhebild; der Ablauf zeigt seine Prüftore wie breit. */
@page{margin:14mm 12mm}
@media print{
  :root{--silk:var(--tinte);--text-p:var(--tinte-2);--abstand:36px}
  svg{--silk:#E6E9F8;--text-p:#C9CEEC}
  html,body{background:#fff}
  body{zoom:.8;color:var(--tinte)}
  .platte h2,.lead,.pads li,.zurueck,.station h3,.r-punkt h3,.inhalte-text h3,.anzeige strong,.karte h3,.karte h3 a,.weiter-titel,.anschluesse a,.fuss-nav a{color:var(--tinte)}
  .kicker,.kurz .kicker,.h-check,.st-nr,.r-nr,.fp-titel,.k-code,.k-hier,.kenndaten dt,.bauplan li::before{color:var(--gruen)}
  /* Pinbelegung: Beschriftung steht neben dem Baustein auf dem Grund */
  .pb-titel,.pb-label text{fill:var(--tinte)}
  .pb-label .pb-ncl{fill:#5a6190}
  .held{padding-block:16px 24px}
  .held h1{font-size:7.5rem}
  .held-bild svg,.pinbild svg,.aufbau-bild svg,.bestueck-bild svg,.nutzen-bild svg,.grundsatz-bild svg{max-width:120mm;filter:none}
  .aufbau-bild,.nutzen-bild{position:static}
  .reise,.spur,.token,.st-led,.r-doc{filter:none}
  .reise,.spur,.token,.st-led,.k-los,.k-nav{display:none}
  .buehne{display:block;margin-bottom:6px}
  .stationen{grid-template-columns:repeat(5,minmax(0,1fr))}
  .station{margin-inline:8px;padding:12px 4px 0;border-top:3px solid var(--mint)}
  .karte,.karte.hier{border:1px solid var(--kante);box-shadow:none}
  .bom-liste .ref{color:var(--tinte);border:1.5px solid var(--tinte)}
  .anschluesse .j{color:var(--tinte-2);border-color:var(--tinte-2)}
  .frontplatte,.anschluesse a{box-shadow:none}
  .led-a{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  h2,h3,.kicker,.kopfzeile,.gw-titel{break-after:avoid}
  figure,.stueckliste li,.station,.r-punkt,.bom-liste li,.bauplan li,.grenzwerte div,.anzeige,.karte,.kenndaten div,.anschluesse li{break-inside:avoid}
}