/* Flight Club Saar – Betaflight & Löten (nur diese Seite). Baut auf fcs.css auf.
   Bildsprache: Schaltplan-Blaupause. Feine Signal-Linien auf dunklem Raster, Amber für Wärme und Warnungen. */
:root{--mono:ui-monospace,"SFMono-Regular","Cascadia Mono",Menlo,Consolas,monospace;--copper:#c98a4b;--tin:#c7ccd4}

/* ---------- Bausteine ---------- */
.ws-hint{position:absolute;z-index:9;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 14px;border-radius:999px;background:rgba(36,26,6,.86);border:1px solid rgba(255,176,32,.7);color:#ffd690;font:600 12px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);box-shadow:0 6px 24px rgba(255,176,32,.22)}
.ws-hint.on{opacity:1;animation:ws-bob 1.8s ease-in-out infinite}
.ws-hint.gone{opacity:0!important;animation:none}
@keyframes ws-bob{50%{transform:translateY(-4px)}}
.is-off .ws-hint.on,.is-off .ws-anim,.is-off .blink{animation-play-state:paused!important}
.ws-sec{padding:clamp(56px,8vh,92px) 0}
.ws-sec .sec-head{gap:10px;margin-bottom:clamp(20px,3vw,28px)}
.ws-sec .sec-head .h2{font-size:clamp(38px,5.2vw,76px);margin:0;line-height:.92}
.ws-sec .sec-head .lede{margin:0;font-size:clamp(16px,1.35vw,19px);max-width:66ch}
.ws-note{margin:14px 0 0;font-size:13.5px;color:var(--mute);max-width:90ch}
.ws-note a,.ws-src a,.ws-links a,.ws-official a{color:var(--sig);text-underline-offset:3px}
.ws-k{margin:0 0 6px;font:600 11px/1.2 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--sig)}
.ws-src{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--mute)}
.ws-c-amber{color:var(--amber)}.ws-c-sig{color:var(--sig)}
code{font:500 .92em/1.3 var(--mono);padding:.08em .38em;border-radius:6px;background:rgba(63,224,255,.1);color:#bff4ff;white-space:nowrap}
.ws-fs{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.ws-fs .lbl{padding:0}
.ws-fs .chip span{padding:10px 13px;min-height:40px;align-items:center}

.ws-ibtn{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-hi);background:rgba(4,9,18,.6);color:var(--osd);display:grid;place-items:center;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.ws-ibtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ws-ibtn:hover{background:var(--sig);border-color:var(--sig);color:var(--night)}
.ws-play .i-play{fill:currentColor;stroke:none}
.ws-play .i-pause{display:none}
.ws-play.on .i-play{display:none}.ws-play.on .i-pause{display:block}
.ws-player{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-prog{flex:1;min-width:60px;height:4px;border-radius:4px;background:rgba(158,196,255,.16);overflow:hidden}
.ws-prog i{display:block;height:100%;background:var(--sig);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px var(--sig)}
.ws-rtype{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line-hi);background:rgba(4,9,18,.55);gap:2px;max-width:100%}
.ws-rtype button{border:0;background:none;color:#cfe0f5;font:600 12px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;padding:0 14px;min-height:38px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s;white-space:nowrap}
.ws-rtype button[aria-pressed=true]{background:var(--sig);color:var(--night)}
.ws-rtype button:hover:not([aria-pressed=true]){background:rgba(255,255,255,.07)}
.ws-mini{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(63,224,255,.55);background:rgba(63,224,255,.08);color:var(--osd);font:600 12px/1 var(--hud);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.ws-mini:hover{background:var(--sig);color:var(--night)}
.ws-mini:disabled{opacity:.5;cursor:default}
.ws-sw{position:relative;width:52px;height:30px;flex:none;border-radius:999px;border:1px solid var(--line-hi);background:rgba(3,8,18,.7);cursor:pointer;padding:0;transition:background .25s,border-color .25s}
.ws-sw::before{content:"";position:absolute;inset:-8px -4px}
.ws-sw i{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#9db1cc;transition:transform .35s var(--ease),background .25s}
.ws-sw[aria-checked=true]{background:rgba(63,224,255,.25);border-color:var(--sig)}
.ws-sw[aria-checked=true] i{transform:translateX(22px);background:var(--sig);box-shadow:0 0 10px var(--sig)}
.ws-win-bar{display:flex;align-items:center;gap:12px;padding:0 0 12px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.ws-win-dots{display:flex;gap:6px}.ws-win-dots i{width:10px;height:10px;border-radius:50%;background:rgba(158,196,255,.25)}
.ws-win-dots i:first-child{background:rgba(255,75,92,.6)}
.ws-win-t{font:600 12px var(--hud);letter-spacing:.18em;text-transform:uppercase;color:#cfe0f5;margin-right:auto}
.ws-win-bar .tag{font-size:10px;padding:5px 9px}
.ws-term{position:relative;border-radius:12px;border:1px solid rgba(63,224,255,.25);background:#02060d;padding:14px 16px;font:500 13px/1.6 var(--mono);color:#cfe0f5;overflow:hidden}
.ws-term p{margin:0}
.ws-pr{color:var(--green)}
.ws-caret{display:inline-block;width:8px;height:15px;margin-left:2px;vertical-align:-2px;background:var(--sig);animation:blink 1s steps(2,end) infinite}
.ws-term-out p{color:var(--mute);white-space:pre;overflow:hidden;text-overflow:ellipsis}
.ws-term-out p.c{color:#9fe8b8}
.ws-term-m{color:var(--mute)}
.ws-d-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.ws-d-msg{margin:0;font-size:14.5px;line-height:1.5;color:#c9d8ec;min-height:2.9em}
.ws-d-msg.ok{color:#a8f0c8}.ws-d-msg.bad{color:#ffd690}
.ws-read{font-size:12.5px;letter-spacing:.1em;color:var(--mute)}
.ws-read b{color:var(--sig);font-variant-numeric:tabular-nums}

/* ---------- Seitenkopf ---------- */
.ws-head{background:radial-gradient(60% 80% at 78% 40%,rgba(31,73,125,.55),transparent 70%),linear-gradient(180deg,#050c19,var(--night))}
.ws-head::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(158,196,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(158,196,255,.06) 1px,transparent 1px);background-size:40px 40px;-webkit-mask:radial-gradient(80% 90% at 75% 45%,#000,transparent 75%);mask:radial-gradient(80% 90% at 75% 45%,#000,transparent 75%)}
.ws-head::after{background:linear-gradient(180deg,rgba(4,9,18,0) 0%,rgba(4,9,18,.1) 55%,var(--night) 100%)}
.ws-head-art{position:absolute;z-index:2;right:max(var(--pad),calc((100vw - var(--max)) / 2 + var(--pad)));bottom:34px;width:min(300px,24vw);height:auto;overflow:visible;pointer-events:none}
.ws-head-art .ws-ha-board{transform-origin:200px 200px}
.ws-ha-led{animation:ws-led 1.6s steps(2,end) infinite}
@keyframes ws-led{50%{opacity:.2}}
.ws-ha-glow{transform-box:fill-box;transform-origin:center;animation:ws-glow 2.4s ease-in-out infinite}
@keyframes ws-glow{50%{opacity:.55;transform:scale(.86)}}
.ws-ha-smoke circle{opacity:0;transform-box:fill-box;transform-origin:center;animation:ws-smoke 3.2s ease-out infinite}
.ws-ha-smoke circle:nth-child(2){animation-delay:1.1s}.ws-ha-smoke circle:nth-child(3){animation-delay:2.1s}
@keyframes ws-smoke{0%{opacity:0;transform:translate(0,0) scale(.6)}20%{opacity:.5}100%{opacity:0;transform:translate(-14px,-70px) scale(2.4)}}
.ws-osd-tl{top:calc(clamp(14px,3vw,34px) + 86px);left:calc(clamp(14px,3vw,34px) + 40px);display:flex;align-items:center;gap:8px}
.ws-rec{color:var(--amber);animation:blink 1s steps(2,end) infinite}
.ws-quick{margin-top:22px}
.ws-head .wrap .lede{max-width:46ch}
@media (max-width:900px){.ws-head-art{width:min(300px,58vw);top:96px;bottom:auto;right:-40px;opacity:.32}}
@media (max-width:620px){
  .ws-osd-tl{display:none}
  .ws-head-art{width:240px;top:70px;right:-70px;opacity:.26}
  .ws-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}
  .ws-quick .btn{justify-content:center;padding:13px 8px;font-size:11.5px;letter-spacing:.08em;min-height:46px}
  .ws-quick .btn .arr{display:none}
}

/* ---------- 01 · Was ist Betaflight? ---------- */
.ws-flow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1.05fr);grid-template-areas:"radio rx fc esc mot";gap:30px;align-items:center;padding:clamp(18px,2.4vw,28px);background:radial-gradient(70% 90% at 50% 50%,rgba(31,73,125,.28),transparent 70%),linear-gradient(180deg,rgba(11,26,51,.8),rgba(5,12,25,.9))}
.ws-flow::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(158,196,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(158,196,255,.05) 1px,transparent 1px);background-size:28px 28px}
.ws-flow-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.ws-fl-base{fill:none;stroke:rgba(63,224,255,.22);stroke-width:2;stroke-dasharray:3 5}
.ws-fl-hot{fill:none;stroke:var(--sig);stroke-width:2.4;opacity:0;filter:drop-shadow(0 0 5px rgba(63,224,255,.9))}
.ws-fl-dot{fill:#bff4ff;filter:drop-shadow(0 0 6px var(--sig))}
.ws-node{position:relative;z-index:2;display:grid;gap:8px;justify-items:center;text-align:center;padding:14px 12px;border-radius:14px;border:1px solid var(--line-hi);background:rgba(4,10,22,.88);min-width:0}
.ws-node.hot{border-color:rgba(63,224,255,.7);box-shadow:0 0 0 1px rgba(63,224,255,.25),0 10px 30px rgba(0,0,0,.35)}
.ws-n-radio{grid-area:radio}.ws-n-rx{grid-area:rx}.ws-n-fc{grid-area:fc}.ws-n-esc{grid-area:esc}.ws-n-mot{grid-area:mot}
.ws-node-t{margin:0;display:grid;gap:2px}
.ws-node-t b{font:700 15px/1.1 var(--hud);letter-spacing:.08em;text-transform:uppercase}
.ws-node-t span{font-size:12.5px;color:var(--mute)}
.ws-node-s{margin:0;font:600 11px/1.3 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ws-node-s span{color:var(--line-hi);margin:0 4px}
.ws-sticks{display:flex;gap:12px;justify-content:center}
.ws-stick{position:relative;width:104px;height:104px;border-radius:18px;border:1px solid var(--line-hi);background:radial-gradient(circle at 50% 50%,rgba(63,224,255,.08),transparent 65%),#030812;touch-action:none;cursor:grab;outline-offset:3px}
.ws-stick::before,.ws-stick::after{content:"";position:absolute;background:rgba(158,196,255,.18);pointer-events:none}
.ws-stick::before{left:50%;top:10px;bottom:10px;width:1px}
.ws-stick::after{top:50%;left:10px;right:10px;height:1px}
.ws-stick.grab{cursor:grabbing}
.ws-knob{position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#9db1cc 45%,#41506a);box-shadow:0 0 0 3px rgba(4,9,18,.8),0 0 16px rgba(63,224,255,.45);will-change:transform;pointer-events:none}
.ws-stick:focus-visible{outline:2px solid var(--sig)}
.ws-sticks.sm .ws-stick{width:84px;height:84px;border-radius:14px}
.ws-sticks.sm .ws-knob{width:26px;height:26px;margin:-13px 0 0 -13px}
.ws-ch{display:flex;gap:8px;align-items:flex-end;height:58px}
.ws-ch i{position:relative;width:12px;height:100%;border-radius:4px;background:rgba(158,196,255,.12);overflow:hidden}
.ws-ch i::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;background:linear-gradient(0deg,var(--sig),#bff4ff);transform-origin:50% 100%;transform:scaleY(var(--v,.5))}
.ws-plot{width:100%;max-width:260px;height:auto;aspect-ratio:240/70;border-radius:8px;background:#02060d;border:1px solid var(--line)}
.ws-fc-read{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-variant-numeric:tabular-nums}
.ws-fc-read b{color:inherit}
.ws-esc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:100%;max-width:120px}
.ws-esc span{font:700 15px/1 var(--hud);font-variant-numeric:tabular-nums;padding:8px 4px;border-radius:8px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.ws-quadwrap{width:100%;max-width:170px;perspective:500px}
.ws-quad{width:100%;height:auto;overflow:visible}
.ws-q-body{transform-origin:0 0;transform-box:view-box}
.ws-q-disc{fill:rgba(63,224,255,.06);stroke:rgba(63,224,255,.4);stroke-width:1.5}
.ws-q-prop path{stroke:#bff4ff;stroke-width:5;stroke-linecap:round}
.ws-q-hub{fill:#0b1a33;stroke:#9db1cc;stroke-width:2}
.ws-q-n{font:700 15px var(--hud);fill:var(--amber);text-anchor:middle;pointer-events:none}
.ws-hint-stick{left:clamp(24px,4vw,40px);bottom:-14px}
@media (max-width:1100px){.ws-flow{gap:22px;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1.3fr);grid-template-areas:"radio rx fc" "mot esc esc"}}
@media (max-width:760px){
  .ws-flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"radio radio" "rx fc" "mot esc";gap:26px 14px;padding:14px}
  .ws-node{padding:12px 8px}
  .ws-node-t b{font-size:13.5px}
  .ws-node-t span{font-size:12px}
  .ws-stick{width:min(116px,38vw);height:min(116px,38vw)}
  .ws-ch{height:46px}
  .ws-hint-stick{left:50%;translate:-50% 0;bottom:auto;top:-14px}
}

/* ---------- 02 · Version und Flashen ---------- */
.ws-ver-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:20px;align-items:stretch}
.ws-vcard{display:flex;flex-direction:column}
.ws-vbig{margin:2px 0 0;font:400 clamp(76px,8.4vw,128px)/.86 var(--big);letter-spacing:.01em;display:flex;align-items:baseline;flex-wrap:wrap}
.ws-vbig span{transition:color .3s,text-shadow .3s;display:inline-block}
.ws-vbig i{font-style:normal;color:var(--sig)}
.ws-vbig span.hl{color:var(--amber);text-shadow:0 0 24px rgba(255,176,32,.5)}
.ws-vdate{margin:6px 0 14px;font:600 12px var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.ws-vparts{list-style:none;margin:0 0 12px;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.ws-vparts button{display:grid;gap:2px;justify-items:start;min-height:52px;padding:8px 14px;border-radius:12px;border:1px solid var(--line-hi);background:rgba(255,255,255,.03);cursor:pointer;text-align:left;transition:border-color .25s,background .25s}
.ws-vparts button b{font:400 24px/1 var(--big);letter-spacing:.03em}
.ws-vparts button span{font:600 11px var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ws-vparts button:hover,.ws-vparts button.on{border-color:var(--amber);background:rgba(255,176,32,.08)}
.ws-vtxt{margin:0;font-size:15px;line-height:1.55;color:#d3e1f3;min-height:4.6em}
.ws-vline{list-style:none;display:flex;margin:18px 0 0;padding:0;position:relative}
.ws-vline::before{content:"";position:absolute;left:8px;right:8px;top:7px;height:2px;background:linear-gradient(90deg,rgba(158,196,255,.25),var(--sig))}
.ws-vline li{position:relative;flex:1;padding-top:22px;font:600 12px var(--hud);letter-spacing:.1em;color:var(--mute)}
.ws-vline li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;border:2px solid var(--line-hi);background:var(--night)}
.ws-vline li.on{color:#fff}
.ws-vline li.on::before{border-color:var(--sig);background:var(--sig);box-shadow:0 0 14px var(--sig)}
.ws-vline li:last-child{flex:0 0 auto}
.ws-vcard .ws-src{margin-top:auto;padding-top:14px}
.ws-flash{display:grid;gap:12px;align-content:start}
.ws-flash .ws-win-bar{margin-bottom:0}
.ws-merk{margin:0;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,176,32,.5);background:rgba(255,176,32,.07);color:#ffe2a8;font-size:15px}
.ws-merk svg{width:22px;height:22px;flex:none;fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-fscreen{position:relative;height:210px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#071225,#030812);overflow:hidden}
.ws-fsc{position:absolute;inset:0;padding:16px;display:grid;align-content:center;justify-items:center;gap:12px;opacity:0;visibility:hidden}
.ws-fsc.on{visibility:visible}
.ws-fsc[data-fs="0"]{align-content:stretch;justify-items:stretch;padding:12px}
.ws-fsc .ws-term{height:100%}
.ws-fs-h{margin:0;font:600 12px var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--sig)}
.ws-url{display:flex;align-items:center;gap:8px;width:min(340px,100%);padding:10px 14px;border-radius:999px;border:1px solid var(--line-hi);background:rgba(255,255,255,.04);font:500 14px var(--mono);color:#fff}
.ws-url svg{width:16px;height:16px;fill:none;stroke:var(--green);stroke-width:2}
.ws-fs-mid{display:flex;align-items:center;gap:18px}
.ws-usb{width:120px;height:60px;fill:none;stroke:#9db1cc;stroke-width:2}
.ws-pill{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;background:var(--green);color:#04210f;font:700 12px var(--hud);letter-spacing:.12em;text-transform:uppercase}
.ws-pill.ghost{background:none;border:1px solid var(--sig);color:var(--sig)}
.ws-sel{display:flex;align-items:center;justify-content:space-between;gap:10px;width:min(300px,100%);padding:10px 14px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.04);font:600 13px var(--hud);letter-spacing:.06em}
.ws-sel svg{width:16px;height:16px;fill:none;stroke:var(--mute);stroke-width:2}
.ws-sel.ok{border-color:var(--green)}
.ws-scan{position:relative;width:min(300px,100%);height:3px;border-radius:3px;background:rgba(158,196,255,.12);overflow:hidden}
.ws-scan i{position:absolute;inset:0;width:30%;background:var(--sig);box-shadow:0 0 10px var(--sig)}
.ws-opts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;font-size:13.5px}
.ws-opts li{display:flex;align-items:center;gap:8px}
.ws-opts i{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--line-hi);display:grid;place-items:center;transition:background .2s,border-color .2s}
.ws-opts li.on i{background:var(--sig);border-color:var(--sig)}
.ws-opts li.on i::after{content:"";width:4px;height:8px;border:solid var(--night);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg)}
.ws-cloud{display:flex;align-items:center;gap:10px;font:600 12px var(--hud);letter-spacing:.14em;text-transform:uppercase;color:#cfe0f5}
.ws-cloud svg{width:40px;height:26px;fill:rgba(63,224,255,.12);stroke:var(--sig);stroke-width:2}
.ws-dots{display:inline-flex;gap:4px}.ws-dots i{width:6px;height:6px;border-radius:50%;background:var(--sig)}
.ws-bar{width:min(320px,100%);height:12px;border-radius:999px;border:1px solid var(--line-hi);overflow:hidden;background:rgba(255,255,255,.04)}
.ws-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sig),var(--green));transform-origin:0 50%;transform:scaleX(0)}
.ws-fs-pct{margin:0;font:400 40px/1 var(--big);font-variant-numeric:tabular-nums}
.ws-fs-warn{margin:0;font:600 11px var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.ws-ok{display:flex;align-items:center;gap:12px;font:400 40px/1 var(--big);letter-spacing:.02em;text-transform:uppercase;color:#a8f0c8}
.ws-ok svg{width:48px;height:48px;fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.ws-fs-sub{margin:0;font-size:14px;color:var(--mute)}
.ws-fsteps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ws-fsteps button{width:100%;display:grid;justify-items:center;gap:4px;padding:8px 4px;min-height:58px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);cursor:pointer;color:#cfe0f5;transition:border-color .25s,background .25s,color .25s}
.ws-fsteps b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-hi);font:700 12px var(--hud)}
.ws-fsteps span{font:600 11px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase;text-align:center}
.ws-fsteps button[aria-current=step]{border-color:var(--sig);background:rgba(63,224,255,.1);color:#fff}
.ws-fsteps button[aria-current=step] b{background:var(--sig);border-color:var(--sig);color:var(--night)}
.ws-fsteps button.done b{border-color:var(--green);color:var(--green)}
.ws-fcap{margin:0;font-size:15px;line-height:1.55;color:#d3e1f3;min-height:3.1em}
.ws-hint-flash{right:22px;top:118px}
.ws-fold{margin-top:20px}
.ws-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 34px}
.ws-cols p{margin:0 0 10px;font-size:15px;line-height:1.6;color:#d3e1f3}
.ws-fh{margin:8px 0 6px;font:700 14px/1.2 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--sig)}
.ws-src-wide{grid-column:1/-1}
@media (max-width:980px){.ws-ver-grid{grid-template-columns:minmax(0,1fr)}.ws-vtxt{min-height:0}}
@media (max-width:620px){
  .ws-cols{grid-template-columns:minmax(0,1fr)}
  .ws-fsteps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ws-fsteps button{min-height:52px;padding:6px 2px}
  .ws-fscreen{height:196px}
  .ws-opts{font-size:12.5px;gap:4px 10px}
  .ws-fcap{font-size:14.5px;min-height:4.5em}
  .ws-hint-flash{right:12px;top:auto;bottom:250px}
  .ws-vbig{font-size:84px}
}

/* ---------- 03 · Tabs ---------- */
.ws-app{padding:clamp(14px,2vw,22px)}
.ws-app-body{display:grid;grid-template-columns:200px minmax(0,1fr);gap:18px}
.ws-app-nav{display:grid;align-content:start;gap:3px;padding-right:14px;border-right:1px solid var(--line)}
.ws-app-nav button{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border:0;border-radius:10px;background:none;color:#cfe0f5;font:600 12.5px/1 var(--hud);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-align:left;transition:background .25s,color .25s;position:relative}
.ws-app-nav svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.ws-app-nav button:hover{background:rgba(255,255,255,.05)}
.ws-app-nav button.peek{background:rgba(255,176,32,.16);color:#fff}
.ws-app-nav button[aria-selected=true]{background:rgba(63,224,255,.14);color:#fff}
.ws-app-nav button[aria-selected=true]::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--sig);box-shadow:0 0 10px var(--sig)}
.ws-app-main{min-width:0}
.ws-tp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:22px;align-items:start}
.ws-tp[hidden]{display:none}
.ws-tp:focus-visible{outline:2px solid var(--sig);outline-offset:4px;border-radius:12px}
.ws-demo{position:relative;display:grid;gap:12px;align-content:start;min-width:0;padding:14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,#071225,#030812)}
.ws-txt{min-width:0}
.ws-txt .h3{font-size:clamp(20px,2vw,26px)}
.ws-txt>p{margin:0 0 6px;font-size:15px;line-height:1.55;color:#d3e1f3}
.ws-tk{margin:12px 0 4px!important;font:600 11px/1 var(--hud)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--sig)!important}
.ws-tk.amber{color:var(--amber)!important}
.ws-li{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.ws-li li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:#d3e1f3}
.ws-li li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--sig);transform:rotate(45deg)}
.ws-li.bad li::before{background:none;border:1.5px solid var(--amber);border-radius:50%;transform:none;width:9px;height:9px}
.ws-li a{color:var(--sig)}
.ws-cli{margin:12px 0 0!important;font-size:13px!important;color:var(--mute)!important;line-height:1.9!important}
.ws-ver-tag{display:inline-block;margin-left:4px;padding:3px 8px;border-radius:999px;border:1px dashed rgba(255,176,32,.55);font:600 11px/1.3 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:#ffd690}
.ws-links{margin:12px 0 0!important}
.ws-links a{font:600 13px var(--hud);letter-spacing:.08em;text-transform:uppercase}
.ws-hint-tabs{left:28px;bottom:-16px}
/* Einrichtung */
.ws-tilt{position:relative;height:210px;border-radius:12px;overflow:hidden;touch-action:pan-y;cursor:grab;perspective:520px;background:radial-gradient(circle at 50% 60%,rgba(63,224,255,.1),transparent 60%)}
.ws-tilt-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(158,196,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(158,196,255,.06) 1px,transparent 1px);background-size:24px 24px}
.ws-tilt-in{position:absolute;left:50%;top:50%;width:170px;height:170px;margin:-85px 0 0 -85px;transform-style:preserve-3d;will-change:transform}
.ws-tilt-in svg{width:100%;height:100%;filter:drop-shadow(0 18px 18px rgba(0,0,0,.5))}
/* Anschlüsse */
.ws-ports{width:100%;border-collapse:collapse;font-size:14px}
.ws-ports th,.ws-ports td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--line)}
.ws-ports thead th{font:600 11px var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ws-ports tbody th{font:600 13px var(--hud);letter-spacing:.06em}
.ws-ports td:last-child,.ws-ports th:last-child{text-align:right}
.ws-ports tr.ok td,.ws-ports tr.ok th{background:rgba(62,224,138,.07)}
.ws-ports tr.bad td,.ws-ports tr.bad th{background:rgba(255,176,32,.07)}
.ws-lock{font:600 11px var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.ws-wire{width:100%;height:auto}
.ws-w-box{fill:#0b1a33;stroke:var(--line-hi);stroke-width:1.5}
.ws-w-t{font:700 11px var(--hud);letter-spacing:.12em;fill:#eaf4ff;text-anchor:middle}
.ws-w-s{font:600 10px var(--hud);letter-spacing:.14em;fill:var(--mute);text-anchor:middle}
.ws-w-l{fill:none;stroke:var(--sig);stroke-width:2;opacity:.6}
.ws-w-l.b{stroke:var(--amber)}
.ws-w-p{fill:#bff4ff;opacity:0}.ws-w-p.b{fill:#ffe2a8}
.ws-wire.live .ws-w-p{opacity:1}
/* Konfiguration */
.ws-frame{width:100%;max-width:260px;height:auto;justify-self:center}
.ws-fr-ax{stroke:var(--mute);stroke-width:2}
.ws-fr-arm{stroke:#2a3446;stroke-width:12;stroke-linecap:round}
.ws-fr-props circle{fill:rgba(63,224,255,.05);stroke:rgba(63,224,255,.35);stroke-width:1.5}
.ws-fr-fc rect{fill:#10244a;stroke:#9db1cc;stroke-width:2}
.ws-fr-arr{fill:var(--amber)}
.ws-frame.bad .ws-fr-fc rect{stroke:var(--amber)}
.ws-frame.ok .ws-fr-fc rect{stroke:var(--green)}
/* Failsafe */
.ws-fsim{display:grid;gap:10px}
.ws-fsim-top{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;letter-spacing:.1em}
.ws-fsim-top b{color:var(--sig)}
.ws-fsim-st{font:700 11px var(--hud);letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border-radius:999px;background:rgba(62,224,138,.14);color:#a8f0c8}
.ws-fsim-st.s1{background:rgba(255,176,32,.16);color:#ffd690}
.ws-fsim-st.s2{background:rgba(255,75,92,.18);color:#ffb3bb}
.ws-fsim-bar{height:8px;border-radius:8px;background:rgba(158,196,255,.12);overflow:hidden}
.ws-fsim-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green),var(--sig));transform-origin:0 50%}
.ws-fsim-stages{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ws-fsim-stages span{padding:8px 10px;border-radius:10px;border:1px solid var(--line);font:600 11px/1.3 var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);transition:border-color .25s,color .25s,background .25s}
.ws-fsim-stages span.on{border-color:var(--amber);color:#ffd690;background:rgba(255,176,32,.08)}
.ws-fsim-stages span.on2{border-color:var(--red);color:#ffb3bb;background:rgba(255,75,92,.08)}
.ws-fsim-q{width:100%;max-width:220px;height:auto;justify-self:center;overflow:visible}
.ws-fsim-p ellipse{fill:rgba(191,244,255,.35);stroke:#bff4ff;stroke-width:1}
/* Rates */
.ws-rate{width:100%;height:auto;overflow:visible}
.ws-r-grid path{stroke:rgba(158,196,255,.1);stroke-width:1}
.ws-r-grid text,.ws-r-ax{font:600 10px var(--hud);fill:var(--mute);letter-spacing:.06em}
.ws-r-lin{fill:none;stroke:rgba(158,196,255,.3);stroke-width:1.5;stroke-dasharray:4 5}
.ws-r-curve{fill:none;stroke:var(--sig);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(63,224,255,.6))}
.ws-r-dot circle{fill:var(--amber);stroke:var(--night);stroke-width:2.5}
.ws-r-out{display:flex;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--mute)}
.ws-r-out b{color:#fff;font-family:var(--hud);font-variant-numeric:tabular-nums}
.ws-r-sl{display:grid;gap:6px}
.ws-r-sl label{display:grid;grid-template-columns:96px minmax(0,1fr) 62px;align-items:center;gap:10px;font:600 11.5px var(--hud);letter-spacing:.08em;text-transform:uppercase;color:#cfe0f5}
.ws-r-sl output{text-align:right;font-variant-numeric:tabular-nums;color:var(--sig)}
.ws-hint-rate{right:14px;bottom:118px}
input[type=range].ws-rg,.ws-r-sl input,.ws-trange{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.ws-r-sl input::-webkit-slider-runnable-track,.ws-trange::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--sig) 0 var(--p,50%),rgba(158,196,255,.22) var(--p,50%))}
.ws-r-sl input::-moz-range-track,.ws-trange::-moz-range-track{height:4px;border-radius:4px;background:rgba(158,196,255,.22)}
.ws-r-sl input::-moz-range-progress,.ws-trange::-moz-range-progress{height:4px;border-radius:4px;background:var(--sig)}
.ws-r-sl input::-webkit-slider-thumb,.ws-trange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--night);border:3px solid var(--amber);box-shadow:0 0 12px rgba(255,176,32,.55)}
.ws-r-sl input::-moz-range-thumb,.ws-trange::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--night);border:3px solid var(--amber)}
.ws-r-sl input:focus,.ws-trange:focus{outline:none}
.ws-r-sl input:focus-visible::-webkit-slider-thumb,.ws-trange:focus-visible::-webkit-slider-thumb{outline:2px solid var(--sig);outline-offset:3px}
/* Empfänger */
.ws-rxd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.ws-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ws-bars li{display:grid;grid-template-columns:54px minmax(0,1fr) 40px;gap:8px;align-items:center;font:600 11px var(--hud);letter-spacing:.06em;text-transform:uppercase;color:#cfe0f5}
.ws-bars b{position:relative;height:12px;border-radius:6px;background:rgba(158,196,255,.12);overflow:hidden}
.ws-bars b i{position:absolute;inset:0;background:linear-gradient(90deg,var(--club-hi),var(--sig));transform-origin:0 50%;transform:scaleX(var(--v,.5))}
.ws-bars em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--mute)}
.ws-bars li.wrong span{color:var(--amber)}
.ws-led{width:14px;height:14px;border-radius:50%;background:#2a3446;box-shadow:inset 0 0 0 2px rgba(255,255,255,.1)}
.ws-led.blink2{background:var(--green);animation:ws-dbl 1s steps(1,end) infinite}
.ws-led.on{background:var(--green);box-shadow:0 0 12px var(--green)}
@keyframes ws-dbl{0%,20%{opacity:1}10%,30%,100%{opacity:.15}}
/* Modi */
.ws-modes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ws-modes li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n sw" "r sw";gap:4px 12px;align-items:center;padding:9px 12px;border-radius:12px;border:1px solid var(--line);transition:border-color .25s,background .25s}
.ws-md-n{grid-area:n;font:700 12px var(--hud);letter-spacing:.1em}
.ws-md-a{display:none}
.ws-md-r{grid-area:r;position:relative;height:12px;border-radius:6px;background:rgba(158,196,255,.1)}
.ws-md-rng{position:absolute;left:66.7%;right:0;top:0;bottom:0;border-radius:6px;background:rgba(63,224,255,.3);border:1px solid rgba(63,224,255,.6)}
.ws-md-mk{position:absolute;left:0;top:-4px;bottom:-4px;width:100%;transform:translateX(8.3%);transition:transform .45s var(--ease);pointer-events:none}
.ws-md-mk::before{content:"";position:absolute;left:-2px;top:0;bottom:0;width:4px;border-radius:2px;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.ws-modes .ws-sw{grid-area:sw}
.ws-modes li.on{border-color:rgba(62,224,138,.6);background:rgba(62,224,138,.07)}
.ws-modes li.on .ws-md-n{color:#a8f0c8}
.ws-modes li.on .ws-md-rng{background:rgba(62,224,138,.35);border-color:var(--green)}
/* Motoren */
.ws-mq{width:100%;max-width:220px;height:auto;justify-self:center;overflow:visible}
.ws-mq-d{fill:rgba(63,224,255,.05);stroke:rgba(63,224,255,.35);stroke-width:1.5;transition:fill .3s,stroke .3s}
.ws-mq-m.hl .ws-mq-d{fill:rgba(255,176,32,.18);stroke:var(--amber)}
.ws-mq-dir path{fill:none;stroke:#bff4ff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 3px rgba(63,224,255,.8))}
.ws-mq-prop path{stroke:#bff4ff;stroke-width:4;stroke-linecap:round;opacity:.35}
.ws-mq-m.spin .ws-mq-prop path{opacity:1}
.ws-mq-n{font:700 16px var(--hud);fill:var(--amber);text-anchor:middle}
.ws-mcheck{padding:10px 12px}
.ws-mcheck span{font-size:14px}
.ws-mbtns{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ws-mbtns button{min-height:44px;border-radius:10px;border:1px solid var(--line-hi);background:rgba(255,255,255,.03);font:700 13px var(--hud);letter-spacing:.08em;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.ws-mbtns button:disabled{opacity:.4;cursor:not-allowed}
.ws-mbtns button:not(:disabled):hover,.ws-mbtns button.on{background:var(--amber);border-color:var(--amber);color:var(--night)}
/* OSD */
.ws-osdv{position:relative;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#16281e;touch-action:pan-y}
.ws-osdv .ws-oe{touch-action:none}
.ws-osdv-world{position:absolute;inset:-40%;background:linear-gradient(180deg,#2f4d6e 0%,#6b8fb0 49.6%,#2b4a37 50%,#16281e 100%);animation:ws-roll 7s ease-in-out infinite}
.ws-osdv-world i{position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(255,255,255,.35)}
@keyframes ws-roll{0%,100%{transform:rotate(-7deg) translateY(2%)}50%{transform:rotate(9deg) translateY(-3%)}}
.is-off .ws-osdv-world,.ws-tp[hidden] .ws-osdv-world{animation-play-state:paused}
.ws-osdv::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);pointer-events:none}
.ws-osdv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:10% 10%;opacity:0;transition:opacity .3s}
.ws-osdv.drag .ws-osdv-grid{opacity:1}
.ws-osdv-x{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border:2px solid rgba(255,255,255,.8);border-radius:50%}
.ws-oe{position:absolute;z-index:2;padding:3px 6px;font:700 14px/1 var(--hud);letter-spacing:.06em;color:#fff;text-shadow:0 0 2px #000,0 0 6px #000;cursor:grab;user-select:none;-webkit-user-select:none;border-radius:4px;border:1px dashed transparent;will-change:transform}
.ws-oe:hover,.ws-oe.dragging{border-color:rgba(255,255,255,.5)}
.ws-oe.warn{color:#ffd690}
.ws-oe.off{display:none}
.ws-oe[data-oe=volt]{left:4%;top:5%}.ws-oe[data-oe=time]{right:4%;top:5%}.ws-oe[data-oe=warn]{left:50%;top:70%;translate:-50% 0}.ws-oe[data-oe=lq]{left:4%;bottom:6%}.ws-oe[data-oe=name]{right:4%;bottom:6%}
/* Blackbox */
.ws-bbv{position:relative;border-radius:12px;border:1px solid var(--line);background:#02060d;overflow:hidden}
.ws-bb-svg{display:block;width:100%;height:170px}
.ws-bb-grid path{stroke:rgba(158,196,255,.08);stroke-width:1}
.ws-bb-sp{fill:none;stroke:var(--amber);stroke-width:2;vector-effect:non-scaling-stroke}
.ws-bb-gy{fill:none;stroke:var(--sig);stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.9}
.ws-bb-cur{stroke:rgba(255,255,255,.35);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.ws-bb-key{position:absolute;left:10px;top:8px;display:flex;align-items:center;gap:6px;font:600 11px var(--hud);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.ws-bb-key i{width:14px;height:3px;border-radius:2px;background:var(--sig);margin-left:6px}
.ws-bb-key i.amber{background:var(--amber);margin-left:0}
.ws-recdot{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
[data-bb-rec][aria-pressed=true] .ws-recdot{animation:blink 1s steps(2,end) infinite}
[data-bb-rec][aria-pressed=false] .ws-recdot{background:#9db1cc;box-shadow:none}
/* CLI */
.ws-cli-term{height:196px;overflow:auto;overscroll-behavior:contain}
.ws-cmds{display:flex;flex-wrap:wrap;gap:6px}
.ws-cmds button{min-height:40px;padding:0 12px;border-radius:10px;border:1px solid rgba(63,224,255,.4);background:rgba(63,224,255,.06);font:500 13px var(--mono);color:#bff4ff;cursor:pointer;transition:background .25s,color .25s}
.ws-cmds button:hover,.ws-cmds button.on{background:var(--sig);color:var(--night)}
@media (max-width:1100px){.ws-tp{grid-template-columns:minmax(0,1fr)}.ws-demo{max-width:560px}}
@media (max-width:860px){
  .ws-app-body{grid-template-columns:minmax(0,1fr);gap:12px}
  .ws-app-nav{display:flex;overflow-x:auto;scrollbar-width:none;gap:4px;padding:0 0 10px;border-right:0;border-bottom:1px solid var(--line);margin:0 -4px;padding-inline:4px;scroll-snap-type:x proximity}
  .ws-app-nav::-webkit-scrollbar{display:none}
  .ws-app-nav button{flex:none;min-height:42px;border:1px solid var(--line);scroll-snap-align:start}
  .ws-app-nav button[aria-selected=true]{border-color:var(--sig)}
  .ws-app-nav button[aria-selected=true]::before{display:none}
  .ws-hint-tabs{left:auto;right:12px;bottom:auto;top:-14px}
  .ws-demo{max-width:none}
}
@media (max-width:620px){
  .ws-win-bar .tag{display:none}
  .ws-demo{padding:12px}
  .ws-tilt{height:180px}
  .ws-rxd{grid-template-columns:minmax(0,1fr)}
  .ws-rxd .ws-sticks{justify-content:center}
  .ws-r-sl label{grid-template-columns:80px minmax(0,1fr) 56px;font-size:11px;letter-spacing:.04em}
  .ws-txt>p,.ws-li li{font-size:14.5px}
  .ws-hint-rate{bottom:auto;top:58px}
}

/* ---------- 04 · 10 Schritte ---------- */
.ws-su-grid{position:relative;display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:22px;align-items:start}
.ws-su-side{display:grid;gap:14px;position:sticky;top:150px}
.ws-props{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;padding:16px 18px;border-color:rgba(255,75,92,.55);background:linear-gradient(180deg,rgba(80,14,24,.55),rgba(30,8,14,.7))}
.ws-props p{margin:0;display:grid;gap:4px}
.ws-props b{font:400 28px/1 var(--big);letter-spacing:.03em;text-transform:uppercase;color:#ffb3bb}
.ws-props span{font-size:14px;line-height:1.45;color:#f3d6da}
.ws-props-ico{width:64px;height:64px;overflow:visible}
.ws-props-p path{stroke:#ffb3bb;stroke-width:6;stroke-linecap:round}
.ws-props-ico circle{fill:#2a0b12;stroke:#ffb3bb;stroke-width:2.5}
.ws-ring{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;padding:16px 18px}
.ws-ring-dial{position:relative;width:120px}
.ws-ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.ws-ring-bg{fill:none;stroke:rgba(158,196,255,.12);stroke-width:14}
.ws-ring-fg{fill:none;stroke:var(--sig);stroke-width:14;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke .4s;filter:drop-shadow(0 0 8px rgba(63,224,255,.6))}
.ws-ring.done .ws-ring-fg{stroke:var(--green)}
.ws-ring-in{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:1px}
.ws-ring-in b{font:400 46px/.9 var(--big)}
.ws-ring-in span{font:600 11px var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.ws-ring-in small{margin-top:3px;font:700 10.5px var(--hud);letter-spacing:.12em;color:var(--amber)}
.ws-ring.done .ws-ring-in small{color:var(--green)}
.ws-ring-txt{display:grid;gap:10px;justify-items:start}
.ws-ring-txt p{margin:0;font-size:14.5px;color:#c9d8ec}
.ws-su-reset{padding:11px 14px;font-size:11px;letter-spacing:.1em;min-height:44px}
.ws-su-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;counter-reset:su}
.ws-su-list li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:6px;align-items:stretch;counter-increment:su}
.ws-su-list .check{padding:11px 12px 11px 13px;align-items:center;grid-template-columns:24px minmax(0,1fr)}
.ws-su-list .check span{font-size:14.5px;line-height:1.4}
.ws-su-list .check span::before{content:counter(su) ". ";font:700 13px var(--hud);color:var(--sig)}
.ws-su-list .check:has(input:checked){border-color:rgba(63,224,255,.4);background:rgba(63,224,255,.05)}
.ws-su-list .check:has(input:checked) span{color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(63,224,255,.6)}
.ws-su-list .check.pulse{animation:ws-pulse 1.4s ease-in-out 2}
@keyframes ws-pulse{50%{border-color:var(--amber);box-shadow:0 0 0 4px rgba(255,176,32,.18)}}
.ws-su-go{display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--sig);transition:background .25s,border-color .25s}
.ws-su-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ws-su-go:hover{background:rgba(63,224,255,.12);border-color:var(--sig)}
.ws-hint-su{right:56px;top:-18px}
@media (max-width:1100px){.ws-su-list{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .ws-su-grid{grid-template-columns:minmax(0,1fr)}
  .ws-su-side{position:relative;top:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:620px){
  .ws-su-side{grid-template-columns:minmax(0,1fr);gap:10px}
  .ws-props{grid-template-columns:48px minmax(0,1fr);padding:12px 14px;gap:12px}
  .ws-props-ico{width:48px;height:48px}
  .ws-props b{font-size:24px}
  .ws-props span{font-size:13.5px}
  .ws-ring{padding:12px 14px;grid-template-columns:96px minmax(0,1fr)}
  .ws-ring-dial{width:96px}
  .ws-ring-in b{font-size:36px}
  .ws-su-list .check{padding:9px 10px}
  .ws-su-list .check span{font-size:14px}
}

/* ---------- 05 · Löten ---------- */
.ws-lo-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px;align-items:stretch}
.ws-scene{display:grid;gap:10px;padding:clamp(12px,1.6vw,18px);background:linear-gradient(180deg,#071225,#030812)}
.ws-lo-svg{width:100%;height:auto;border-radius:12px;overflow:hidden}
.lo-lbl{font:600 11px var(--hud);letter-spacing:.2em;fill:rgba(234,244,255,.45)}
.lo-joint>g{opacity:0}
.lo-wtin{opacity:0}
.lo-heat{opacity:0}
.lo-smoke circle{opacity:0}
.lo-badge{opacity:0}
.lo-badge-c{fill:rgba(4,9,18,.85);stroke:var(--green);stroke-width:3}
.lo-ok,.lo-no{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.lo-ok{stroke:var(--green)}.lo-no{stroke:var(--amber);display:none}
.lo-badge.bad .lo-badge-c{stroke:var(--amber)}.lo-badge.bad .lo-ok{display:none}.lo-badge.bad .lo-no{display:block}
.ws-lo-cap{min-height:5.6em}
.ws-lo-cap p{margin:0;font-size:15px;line-height:1.55;color:#d3e1f3}
.ws-lo-step{font:600 12px var(--hud)!important;letter-spacing:.16em;text-transform:uppercase;color:var(--sig)!important;margin-bottom:4px!important}
.ws-lo-step b{color:#fff}
.ws-lo-cmp{margin-left:auto}
.ws-temp{display:grid;gap:12px;align-content:start}
.ws-tread{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ws-tread b{font:400 clamp(64px,6vw,92px)/.9 var(--big);font-variant-numeric:tabular-nums;transition:color .3s}
.ws-tread span{font:600 18px var(--hud);color:var(--mute)}
.ws-tread em{font:700 12px var(--hud);font-style:normal;letter-spacing:.14em;text-transform:uppercase;padding:6px 10px;border-radius:999px;background:rgba(62,224,138,.15);color:#a8f0c8;margin-left:auto}
.ws-temp.cold .ws-tread b{color:#8fc6ff}.ws-temp.cold .ws-tread em{background:rgba(90,162,255,.16);color:#bcdcff}
.ws-temp.hot .ws-tread b{color:#ff8a6b}.ws-temp.hot .ws-tread em{background:rgba(255,75,92,.18);color:#ffb3bb}
.ws-tscale{position:relative;height:16px;border-radius:8px;background:linear-gradient(90deg,#2f6fd0,#3fe0ff 38%,#ffb020 70%,#ff4b5c);opacity:.9}
.ws-t-good{position:absolute;top:-4px;bottom:-4px;border-radius:6px;border:2px solid #fff;box-shadow:0 0 12px rgba(255,255,255,.4)}
.ws-t-mk{position:absolute;left:0;top:-8px;width:4px;height:32px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 8px #000;will-change:transform}
.ws-tlab{display:flex;justify-content:space-between;margin-top:6px;font:600 11px var(--hud);color:var(--mute)}
.ws-trange{margin-top:2px}
.ws-t-msg{margin:0;font-size:15px;line-height:1.55;color:#d3e1f3;min-height:4.7em}
.ws-hint-temp{right:18px;top:16px}
.ws-tips{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ws-tip{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:2px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.ws-tip svg{grid-row:1/3;width:44px;height:44px;fill:none;stroke:var(--sig);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-tip .ws-tip-a{stroke:var(--amber);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease)}
.ws-tip:hover{border-color:rgba(63,224,255,.45);background:rgba(63,224,255,.04)}
.ws-tip:hover .ws-tip-a{transform:scale(1.18) rotate(-6deg)}
.ws-tip b{font:700 14px/1.2 var(--hud);letter-spacing:.06em;text-transform:uppercase}
.ws-tip span{font-size:14px;line-height:1.45;color:#c9d8ec}
@media (max-width:980px){.ws-lo-grid{grid-template-columns:minmax(0,1fr)}.ws-t-msg{min-height:0}}
@media (max-width:760px){
  .ws-tips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 4px;gap:10px}
  .ws-tips::-webkit-scrollbar{display:none}
  .ws-tip{flex:0 0 78%;scroll-snap-align:start}
}
@media (max-width:620px){
  .ws-lo-cmp{margin-left:0;width:100%}
  .ws-lo-cmp button{flex:1;padding:0 8px;font-size:11px}
  .ws-lo-cap p{font-size:14.5px}
  .ws-tread b{font-size:64px}
}

/* ---------- 06 · Videos ---------- */
.ws-vid-head{display:flex!important;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.ws-vid-head>div{display:grid;gap:10px}
.ws-vf[hidden],.ws-vf .chip[hidden]{display:none}
.ws-vrow{position:relative}
.ws-hint-vid{left:auto;right:12px;top:-16px}
.ws-vlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ws-vc{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,36,74,.6),rgba(8,18,38,.75));overflow:hidden;transition:border-color .3s,transform .4s var(--ease)}
.ws-vc[hidden]{display:none}
.ws-vc:hover{border-color:rgba(63,224,255,.45)}
.ws-vbox{position:relative;aspect-ratio:16/9;overflow:hidden;background:#030812}
.ws-vbox.loaded{background:#000}
.ws-vthumb{position:absolute;inset:0;width:100%;height:100%}
.ws-vplay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:flex-start;gap:10px;border:0;background:linear-gradient(180deg,rgba(4,9,18,0) 45%,rgba(4,9,18,.85));color:#fff;cursor:pointer;padding:12px 14px}
.ws-vplay i{width:52px;height:52px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(4,9,18,.7);border:2px solid var(--sig);box-shadow:0 0 22px rgba(63,224,255,.45);transition:transform .35s var(--ease),background .25s}
.ws-vplay i svg{width:24px;height:24px;fill:currentColor;margin-left:3px}
.ws-vplay span{font:600 12px var(--hud);letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;background:rgba(4,9,18,.8);margin-bottom:9px}
.ws-vplay:hover i,.ws-vplay:focus-visible i{transform:scale(1.08);background:var(--sig);color:var(--night)}
.ws-vtags{position:absolute;left:10px;top:10px;display:flex;gap:6px;z-index:2;pointer-events:none}
.ws-vtags .tag{background:rgba(4,9,18,.75);font-size:10px;padding:5px 8px}
.ws-vinfo{display:grid;gap:4px;align-content:start;padding:14px 16px 16px}
.ws-vinfo h3{margin:0;font:700 16px/1.25 var(--hud);letter-spacing:.02em}
.ws-vinfo p{margin:0;font-size:13.5px;color:var(--mute)}
.ws-vinfo .ws-vwhy{color:#c9d8ec;font-size:14px;margin-top:4px}
.ws-vinfo a{color:var(--sig);font-size:13px;margin-top:4px;justify-self:start}
.ws-vth-bg{fill:#071225}
.ws-vth-l{fill:none;stroke:rgba(63,224,255,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-vth-a{fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.ws-vth-t{font:400 34px var(--big);fill:#fff;letter-spacing:.02em}
.ws-vth-s{font:600 11px var(--hud);fill:var(--mute);letter-spacing:.16em}
.ws-vnote{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute);max-width:90ch}
.ws-vnote svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--sig);stroke-width:2;margin-top:2px}
.ws-vnote a{color:var(--sig)}
.ws-vlist[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.ws-vlist[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1180px){.ws-vlist[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:980px){.ws-vlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .ws-vlist{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding:0 var(--pad) 6px;gap:12px}
  .ws-vlist::-webkit-scrollbar{display:none}
  .ws-vc{flex:0 0 84%;scroll-snap-align:start}
}

/* ---------- 07 · Weiter ---------- */
.ws-ncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ws-ncard{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;row-gap:4px;padding:18px 44px 18px 18px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,rgba(16,36,74,.6),rgba(8,18,38,.75));text-decoration:none;transition:border-color .3s,transform .4s var(--ease),background .3s}
.ws-ncard>svg:first-child{grid-row:1/3;width:52px;height:52px;padding:10px;border-radius:14px;background:rgba(63,224,255,.1);fill:none;stroke:var(--sig);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ws-ncard b{font:400 28px/1 var(--big);letter-spacing:.02em;text-transform:uppercase}
.ws-ncard span{font-size:14.5px;line-height:1.45;color:#c9d8ec}
.ws-nc-go{position:absolute;right:16px;top:18px;width:22px;height:22px;fill:none;stroke:var(--sig);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.ws-ncard:hover{border-color:var(--sig);transform:translateY(-3px)}
.ws-ncard:hover .ws-nc-go{transform:translateX(4px)}
.ws-ask{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 30px;margin-top:16px;padding:clamp(18px,2.4vw,28px);border-radius:var(--r);border:1px solid rgba(255,176,32,.45);background:radial-gradient(60% 120% at 0% 0%,rgba(255,176,32,.12),transparent 60%),linear-gradient(180deg,rgba(16,36,74,.55),rgba(8,18,38,.7))}
.ws-ask>div:first-child{max-width:62ch}
.ws-ask .h3{margin:0 0 6px;font-size:clamp(22px,2.4vw,30px)}
.ws-ask p{margin:0;font-size:15px;line-height:1.55;color:#d3e1f3}
.ws-official{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:16px 0 0;font-size:13.5px;color:var(--mute)}
.ws-official span{font:600 11px var(--hud);letter-spacing:.16em;text-transform:uppercase}
.ws-official a{min-height:32px;display:inline-flex;align-items:center}
@media (max-width:900px){.ws-ncards{grid-template-columns:minmax(0,1fr)}.ws-ncard{padding:14px 40px 14px 14px}.ws-ncard b{font-size:24px}}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .ws-ha-smoke,.ws-hint.on,.ws-osdv-world{animation:none}
}

/* Einstiege und Lernansicht */
.ws-start-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.ws-start-card{display:flex;flex-direction:column;gap:8px;min-width:0;text-decoration:none;color:inherit}
.ws-start-card h3{margin:0}
.ws-start-card p{margin:0;flex:1}
.ws-start-card .btn{align-self:flex-start}
.ws-learn{margin:0;padding:10px 16px;font-size:14px;color:#ffe2a8;background:rgba(255,176,32,.08);border-bottom:1px solid rgba(255,176,32,.35);overflow-wrap:anywhere}
@media(max-width:640px){.ws-start-grid{grid-template-columns:minmax(0,1fr)}.ws-start-card .btn{align-self:stretch;justify-content:center}}