/* Powertune – Fertigungsstraße als 3D-Szene (linie.js, linie-scene.js)
 * Ohne WebGL, bei Ladefehlern und reduzierter Bewegung bleibt die 2D-Fassung mit den vier Stationskarten (scenes2.js);
 * darunter stehen alle neun Schritte als Liste. Beschriftungen in der Szene nutzen .sl aus story.css.
 */
.fab.linie .fab-steps{position:relative;margin:28px 0 22px}
.ln-canvas,.ln-shade,.ln-labels,.ln-hud,.ln-note,.ln-loading,.ln-progress,.ln-skip{display:none}

/* 2D-Fassung: Schritte als Liste unter den Stationen */
.ln-list{margin-top:34px}
.ln-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 32px;margin:0;padding:0;list-style:none}
.ln-step{padding-top:16px;border-top:1px solid var(--line-2)}
.ln-step .st-n{display:block;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.ln-step .st-h{margin:10px 0 6px;font:560 18px/1.25 var(--display);font-variation-settings:"wdth" 106;letter-spacing:-.01em;color:var(--text)}
.ln-step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-2)}
.ln-step .st-note{margin-top:8px;font:500 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}

/* 3D-Fassung: Bühne über die ganze Höhe, Texte darüber */
.fab.linie.is-3d{height:960vh}
.fab.linie.is-3d .fab-sticky{position:sticky;top:0;display:block;height:100vh;height:100svh;padding:0;overflow:hidden;background:radial-gradient(95% 75% at 62% 55%,#17191E,#07080A 72%)}
.fab.linie.is-3d .fab-grid{display:none}
.fab.linie.is-probe .fab-sticky{position:fixed;inset:0;z-index:95} /* Prüfhilfe ?linie=0.4: fester Stand oben im Fenster */
.fab.linie.is-3d .ln-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.fab.linie.is-3d.ready .ln-canvas{opacity:1}
.fab.linie.is-3d .ln-shade{display:block;position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(7,8,10,.78) 0%,rgba(7,8,10,.28) 34%,rgba(7,8,10,0) 56%),linear-gradient(0deg,rgba(7,8,10,.72),rgba(7,8,10,0) 34%),linear-gradient(180deg,rgba(7,8,10,.62),rgba(7,8,10,0) 24%)}
.fab.linie.is-3d .ln-labels{display:block;position:absolute;inset:0;z-index:1;pointer-events:none}
.fab.linie.is-3d .ln-top{position:absolute;left:0;right:0;top:calc(var(--hdr) + 14px);z-index:3;display:flex;flex-direction:column;gap:clamp(22px,5vh,48px);pointer-events:none}
.fab.linie.is-3d .ln-top > *{pointer-events:auto}
.fab.linie.is-3d .fab-steps{order:-1;flex-wrap:nowrap;margin:0;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 94%,transparent);mask-image:linear-gradient(90deg,#000 94%,transparent)}
.fab.linie.is-3d .fab-steps::-webkit-scrollbar{display:none}
.fab.linie.is-3d .fab-steps li{flex:none;background:rgba(10,11,13,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fab.linie.is-3d .head{display:block;max-width:540px;will-change:opacity,transform}
.fab.linie.is-3d .head .lead{margin-top:18px}
.fab.linie.is-3d .head .link{margin-top:22px}
.fab.linie.is-3d .ln-skip{display:flex;align-items:center;gap:10px;width:max-content;margin-top:20px;padding:6px 0;border-bottom:1px solid transparent;font:500 11.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);text-decoration:none}
.fab.linie.is-3d .ln-skip:hover,.fab.linie.is-3d .ln-skip:focus-visible{border-bottom-color:currentColor;color:var(--text)}
.fab.linie.is-3d .ln-list{margin:0}
.fab.linie.is-3d .ln-steps{position:absolute;inset:0;z-index:2;display:block;pointer-events:none}
.fab.linie.is-3d .ln-step{position:absolute;left:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));bottom:clamp(56px,10vh,110px);width:min(440px,calc(100% - 2 * var(--gutter)));padding:0;border:0;opacity:0;visibility:hidden;will-change:opacity,transform}
.fab.linie.is-3d .ln-step.is-on{visibility:visible}
.fab.linie.is-3d .ln-step .st-h{margin:12px 0 10px;font-size:clamp(24px,2.3vw,34px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance}
.fab.linie.is-3d .ln-step p{font-size:16.5px}

/* Messanzeige (Beispielwerte) */
.fab.linie.is-3d .ln-hud{display:block;position:absolute;right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));top:calc(var(--hdr) + 80px);z-index:3;width:250px;pointer-events:none}
.ln-row{position:absolute;right:0;top:0;display:grid;gap:6px;width:100%;box-sizing:border-box;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(10,11,13,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.ln-row.on{opacity:1;transform:none}
.ln-row span{font:500 10.5px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.ln-row b{font:560 22px/1.1 var(--display);font-variation-settings:"wdth" 106;font-variant-numeric:tabular-nums;color:var(--text)}
.ln-row b.ok{color:var(--ok)}
.ln-row small{font:500 10px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.ln-row svg{display:block;width:100%;height:auto}
.ln-row .g{fill:none;stroke:rgba(255,255,255,.1)}
.ln-row .ref{fill:none;stroke:rgba(98,213,150,.2);stroke-width:9;stroke-linecap:round}
.ln-row .cv{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ln-row .ut{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1;stroke-dasharray:2 3}
.ln-row .ut-t{fill:rgba(255,255,255,.6);font:500 8px/1 var(--mono);letter-spacing:.08em}
.ln-row .cur{fill:#fff;filter:drop-shadow(0 0 3px rgba(255,255,255,.85))}
.fab.linie.is-3d .ln-note{display:block;position:absolute;right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));bottom:18px;z-index:2;margin:0;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;color:var(--text-3)}
.fab.linie.is-3d .ln-loading{display:block;position:absolute;right:max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));bottom:44px;z-index:2;margin:0;font:500 10.5px/1.3 var(--mono);letter-spacing:.08em;color:var(--text-3)}
.fab.linie.is-3d.ready .ln-loading{display:none}
.fab.linie.is-3d .ln-progress{display:block;position:absolute;left:0;right:0;bottom:0;z-index:2;height:2px;background:rgba(255,255,255,.06)}
.ln-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#4FA3FF,#62D596);transform:scaleX(0);transform-origin:left}

@media (max-width:1180px){.ln-steps{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .fab.linie.is-3d{height:840vh}
  .fab.linie.is-3d .ln-top{top:calc(var(--hdr) + 10px);gap:18px}
  .fab.linie.is-3d .head .h2{font-size:34px}
  .fab.linie.is-3d .head .lead{font-size:15.5px}
  .fab.linie.is-3d .ln-shade{background:linear-gradient(180deg,rgba(7,8,10,.86) 0%,rgba(7,8,10,.12) 34%,rgba(7,8,10,.08) 50%,rgba(7,8,10,.9) 76%)}
  .fab.linie.is-3d .ln-step{bottom:clamp(30px,5vh,52px)}
  .fab.linie.is-3d .ln-step .st-h{font-size:23px}
  .fab.linie.is-3d .ln-step p{font-size:15px}
  .fab.linie.is-3d .ln-hud{top:calc(var(--hdr) + 62px);width:178px}
  .ln-row{padding:10px 12px;border-radius:13px}
  .ln-row b{font-size:17px}
  .fab.linie.is-3d .ln-note{bottom:10px;font-size:9.5px}
  .fab.linie.is-3d .ln-loading{bottom:30px}
}
@media (max-width:560px){.ln-steps{grid-template-columns:1fr}}