/* Powertune – 3D-Prüfszenen (Formbrett der Startseite, Prüfstand der Qualitätsseite): Bühne, Beschriftungen */

/* Bühne: Größe unabhängig vom Ladezustand (kein Layoutsprung); die SVG-Grafik bleibt als Fallback darunter */
.qm-stage{position:relative;overflow:hidden}
.qm-stage > svg{display:block;width:100%;height:100%;transition:opacity .6s var(--ease)}
.qm-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .9s var(--ease)}
.qm-ready .qm-canvas{opacity:1}
.qm-ready > svg{opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility 0s .6s}

/* An 3D-Punkten verankerte Beschriftungen (Stil wie in der Startgeschichte) */
.qm-labels{position:absolute;inset:0;z-index:1;pointer-events:none}
.qm-labels .sl{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:6px;opacity:0;white-space:nowrap;will-change:transform,opacity;transition:opacity .2s linear}
.qm-labels .sl b{transform:translateX(var(--dx,0px));padding:5px 10px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(10,11,13,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:560 12.5px/1 var(--display);font-variation-settings:"wdth" 106;color:#F2F3F5}
.qm-labels .sl i{width:1px;height:var(--lead,22px);background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0))}
.qm-labels .sl.below{flex-direction:column-reverse}
.qm-labels .sl.below i{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.7))}
.qm-labels .sl.data b{border-color:rgba(79,163,255,.55)}
.qm-labels .sl.power b{border-color:rgba(255,173,66,.6)}
.qm-labels .sl.ok b{border-color:rgba(98,213,150,.6)}
.qm-labels .sl.pin b{padding:4px 8px;font:500 11.5px/1 var(--mono);letter-spacing:.04em}
.qm-narrow .qm-labels .sl.minor{display:none}
@media (max-width:760px){
  .qm-labels .sl.minor{display:none}
  .qm-labels .sl b{padding:4px 8px;font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){
  .qm-canvas,.qm-stage > svg,.qm-labels .sl{transition:none}
}

/* ---------- Formbrett auf der Startseite (#qualitaet) ----------
   Breit: Grafik rechts, Prüfliste links wie bisher (Raster mit Bereichen; .board-track und .board-pin lösen sich auf).
   Schmal und hochkant: Grafik und Prüfliste kleben gemeinsam, während die Schritte ablaufen; quer oder bei reduzierter Bewegung normaler Fluss. */
.board[data-qm]{height:480vh}
.board-layout{grid-template-rows:1fr auto auto auto 1fr;row-gap:0;align-items:start}
.board-copy{grid-column:1;grid-row:2}
.board-track,.board-pin{display:contents}
.board .tests{grid-column:1;grid-row:3}
.board-foot{grid-column:1;grid-row:4}
.board-fig{grid-column:2;grid-row:1/6;align-self:center}
.board-fig .qm-stage{aspect-ratio:800/520}
.board .tests li{padding:11px 0}
.tests li.run b{color:var(--text)}
@media (min-width:1181px) and (max-height:860px){
  .board .h2{font-size:clamp(30px,3.5vw,52px)}
  .board .lead{margin-top:14px;font-size:16px}
  .board .tests{margin-top:22px}
  .board .tests li{padding:8px 0}
  .board-layout .link{margin-top:18px}
}
@media (max-width:1180px){
  .board[data-qm]{height:auto}
  .board[data-qm] .board-sticky{overflow:visible} /* sonst klebt .board-pin nicht */
  .board-layout{display:block}
  .board-track{display:block;margin-top:40px}
  .board-pin{display:flex;flex-direction:column;gap:12px}
  .board-pin .tests{margin:0;max-width:none}
  .board-foot{margin-top:22px}
}
@media (max-width:1180px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){
  .board-track{height:300vh}
  .board-pin{position:sticky;top:0;justify-content:center;height:100vh;height:100svh;padding:calc(var(--hdr) + 8px) 0 12px}
  .board-pin .board-fig{display:flex;flex:1 1 auto;flex-direction:column;min-height:0}
  .board-pin .qm-stage{flex:1 1 auto;min-height:220px;aspect-ratio:auto}
  .board-pin .board-fig figcaption{padding:10px 18px;font-size:9.5px}
  .board-pin .tests{flex:none;padding:0 16px}
  .board-pin .tests li{padding:7px 0;font-size:14px}
}
@media (prefers-reduced-motion:reduce){
  .board[data-qm]{height:auto}
}

/* ---------- Prüfstand auf der Qualitätsseite (#pruefstand) ----------
   Grafik und Protokoll kleben, während die Prüfung beim Scrollen abläuft; oben bleibt Platz für die Abschnittsnavigation (.d-sub). */
.bench-track{margin-top:52px}
.bench-pin .bench{margin-top:0}
.bench-fig{display:flex;flex-direction:column}
.bench-fig .qm-stage{flex:1 1 auto;aspect-ratio:760/400}
.bench-log li{padding:9px 0}
@media (min-height:620px) and (prefers-reduced-motion:no-preference){
  .bench-track{height:420vh;margin-top:28px}
  .bench-pin{position:sticky;top:0;display:flex;align-items:center;height:100vh;height:100svh;padding:calc(var(--hdr) + 58px) 0 18px}
  .bench-pin .bench{width:100%}
  .bench-fig .qm-stage{min-height:300px;aspect-ratio:auto}
}
@media (max-width:1180px) and (orientation:landscape){
  .bench-track{height:auto}
  .bench-pin{position:static;height:auto;padding:0}
  .bench-fig .qm-stage{aspect-ratio:760/400}
}
@media (max-width:1180px) and (orientation:portrait) and (min-height:620px) and (prefers-reduced-motion:no-preference){
  .bench-pin{align-items:stretch}
  .bench-pin .bench{display:flex;flex-direction:column;gap:10px}
  .bench-pin .bench-fig{flex:1 1 auto;min-height:0}
  .bench-pin .qm-stage{min-height:200px}
  .bench-pin .bench-fig figcaption{padding:10px 18px;font-size:9.5px}
  .bench-pin .bench-log{flex:none;padding:12px 16px}
  .bench-pin .bench-log header{padding-bottom:8px}
  .bench-pin .bench-sub{display:none}
  .bench-pin .bench-log li{padding:4px 0;font-size:12px}
  .bench-pin .bench-stamp{margin-top:8px;padding:8px 12px}
}