/* Herzstück „Vom Eingang zur Erledigung“ (#ablauf): eine Bühne auf Nacht, etwa eine Bildschirmhöhe, nichts klebt.
   Sie spielt die vier Akte (Eingang, Verstehen, Ordnen, Erledigen) einmal in der Zeit und hält das Schlussbild;
   die Kapitelmarken sind Knöpfe zum Springen. Logik in strom.js.
   Canvas 2D: Dokumente, Linien. WebGL: Staub. Eigene Lichtebenen (Band, Widerschein), nur per transform/opacity
   bewegt. HTML: Texte, Felder, Systeme, Freigabe.
   Grundform ohne JS oder bei reduzierter Bewegung: ruhiges Schlussbild und die vier Akte als Liste. */

/* ---------- Grundform: Liste auf Nacht ---------- */
.strom { --strom-pad: clamp(24px, 4vw, 72px); position: relative; background: var(--night); color: var(--on-night); }
.strom-stage { position: relative; padding-block: var(--section); }
.strom-vis { display: none; }
.strom-copy { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.strom-meter { display: none; }
.strom-acts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin: 0; padding: 0; list-style: none; }
.strom-act { border-top: 1px solid rgb(255 255 255 / 0.16); padding-top: 24px; }
.strom-act .eyebrow { color: var(--on-night-muted); }
.strom-act .h2 { margin-top: 18px; font-size: var(--text-h3); line-height: 1.22; letter-spacing: -0.015em; text-wrap: balance; }
.strom-act p { margin-top: 12px; max-width: 38ch; color: var(--on-night-muted); font-size: 15px; line-height: 1.5; text-wrap: pretty; }

/* Bild der Grundform (mit JS, reduzierte Bewegung): ein komponiertes Schlussbild über der Liste */
.js .strom-vis { display: block; position: relative; height: clamp(520px, 52vw, 980px); margin: 0 var(--gutter) clamp(48px, 6vw, 88px); border-radius: var(--r-xl); overflow: hidden; }

@media (max-width: 1100px) { .strom-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .strom-acts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .js .strom-vis { height: 640px; }
}

/* ---------- Bühne: Ebenen ---------- */
.strom-glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Ruhiges Nachtlicht: ein schwacher Horizont unten, kühl */
.strom-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 60% at 62% 118%, color-mix(in srgb, var(--glow-violet) 22%, transparent), color-mix(in srgb, var(--glow-violet) 6%, transparent) 45%, transparent 70%),
    radial-gradient(90% 70% at 70% 40%, color-mix(in srgb, var(--night-3) 55%, transparent), transparent 70%);
}
/* Lichtebenen aus strom.js in geringer Auflösung, nur über transform und opacity bewegt (kein Neumalen):
   warmer Widerschein am unteren Rand und das Lichtband auf der Nacht */
.strom-warm, .strom-band { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.strom-warm { opacity: 0; visibility: hidden; }
.strom-band { z-index: 1; visibility: hidden; }
.strom-canvas, .strom-dust { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.strom-dust { pointer-events: none; }
.strom-ui { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; zoom: var(--su, 1); }

/* Plätze der Karten und Knoten; strom.js setzt transform (in Einheiten der Bühne vor dem Zoom) */
.strom-at { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }

/* ---------- Felder: Karten im Stil der App-Beispiele, dunkel ---------- */
.strom-panel {
  width: max-content;
  padding: 16px 16px 16px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  font-size: 14px;
  line-height: 1.43;
  color: var(--on-night);
  transition: background-color 700ms var(--ease), border-color 700ms var(--ease), box-shadow 700ms var(--ease);
}
.strom-panel.is-slot { border-color: rgb(255 255 255 / 0.07); }
.strom-panel.is-slot .strom-kpi { border-color: rgb(255 255 255 / 0.05); }
.strom-panel.is-framed { background: rgb(24 25 42 / 0.9); border-color: rgb(255 255 255 / 0.09); box-shadow: 0 40px 80px -32px rgb(4 4 12 / 0.7), 0 12px 24px -12px rgb(4 4 12 / 0.4); }
.strom-phead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.strom-phead b { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.2; }
.strom-phead small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--on-night-muted); }
.strom-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, auto); gap: 10px; }
.strom-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 13px; border-radius: var(--r-ui); border: 1px solid transparent; transition: border-color 700ms var(--ease); }
.strom-panel.is-framed .strom-kpi { border-color: rgb(255 255 255 / 0.1); }
.strom-kpi span { font-size: 12.5px; color: var(--on-night-muted); }
.strom-kpi b { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Text der Karten: erst Staub (Canvas), dann scharf */
.strom-panel [data-t] { opacity: 0; filter: blur(6px); transition: opacity 600ms var(--ease), filter 700ms var(--ease); }
.strom-panel.is-sharp [data-t] { opacity: 1; filter: none; }
.strom-panel.is-sharp .strom-kpi b[data-t] { transition-delay: 120ms; }

/* Kompakt (schmale Bühne, Akt 4): nur der Kopf bleibt */
.strom-kpiwrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 700ms var(--ease), opacity 500ms var(--ease); }
.strom-kpiwrap > div { min-height: 0; overflow: hidden; }
.strom-panel.is-compact .strom-kpiwrap { grid-template-rows: 0fr; opacity: 0; }
.strom-panel.is-compact .strom-phead { margin-bottom: 0; transition: margin 700ms var(--ease); }

/* ---------- Status-Pillen (wie .panel.dark .chip) ---------- */
.strom-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: 12px; font-weight: 500; white-space: nowrap; background: rgb(255 255 255 / 0.07); color: var(--on-night-muted); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.strom-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.strom-chip.ok { background: color-mix(in srgb, var(--ok-night) 16%, transparent); color: var(--ok-night); }
.strom-chip.warn { background: color-mix(in srgb, var(--warn-night) 16%, transparent); color: var(--warn-night); }
.strom-chip.is-off { opacity: 0; transform: translateY(4px); }

/* ---------- Systeme: einfarbige Logos in --on-night ---------- */
.strom-node { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 700ms var(--ease), transform 900ms var(--ease); }
.strom-node.is-on { opacity: 1; transform: none; }
.strom-tile { position: relative; display: grid; place-items: center; min-width: 148px; height: 54px; padding: 0 20px; border-radius: var(--r-md); background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.1); transition: border-color 600ms var(--ease), background-color 600ms var(--ease); }
.strom-node.is-done .strom-tile { border-color: rgb(255 255 255 / 0.22); background: rgb(255 255 255 / 0.06); }
/* Systemname als Text; welches System wo steht, bestimmt nur das HTML (Name, Status-Pille) */
.strom-name { font-family: var(--font-display); font-size: 19px; letter-spacing: -0.01em; color: var(--on-night); opacity: 0.92; white-space: nowrap; }

/* ---------- Freigabe: ein Mensch entscheidet ---------- */
.strom-node.strom-gate { display: block; width: 248px; padding: 14px; border-radius: var(--r-md); background: rgb(24 25 42 / 0.92); border: 1px solid rgb(255 255 255 / 0.1); font-size: 13px; line-height: 1.4; box-shadow: 0 30px 60px -30px rgb(4 4 12 / 0.7); }
.strom-ghead { display: flex; align-items: center; gap: 10px; }
.strom-ghead b { display: block; font-weight: 500; font-size: 14px; }
.strom-ghead small { display: block; font-size: 12px; color: var(--on-night-muted); }
.strom-av { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 0.08); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.strom-ring { position: absolute; inset: -4px; width: 42px; height: 42px; max-width: none; transform: rotate(-90deg); fill: none; stroke: var(--on-night); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: var(--ring, 113.1); opacity: 0.85; }
.strom-badge { position: absolute; right: -8px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-night); color: var(--night); box-shadow: 0 0 0 2px rgb(24 25 42); opacity: 0; transform: scale(0.4); transition: opacity 300ms var(--ease), transform 600ms var(--ease); }
.strom-badge .icon { width: 11px; height: 11px; stroke-width: 3; }
.strom-gate.is-approved .strom-badge { opacity: 1; transform: none; }
.strom-grow { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r-ui); border: 1px solid rgb(255 255 255 / 0.1); }
.strom-grow span { color: var(--on-night-muted); font-size: 12.5px; }
.strom-grow b { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.strom-gact { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; height: 30px; }
.strom-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; background: var(--paper); color: var(--ink); transition: transform 180ms var(--ease), background-color 180ms var(--ease), opacity 400ms var(--ease); }
.strom-gate.is-press .strom-btn { transform: scale(0.95); background: var(--kalk-deep); }
.strom-gate.is-approved .strom-btn { opacity: 0; transform: scale(0.96); }
.strom-gate:not(.is-waiting):not(.is-approved) .strom-btn { opacity: 0.4; }
.strom-gact .strom-chip { position: absolute; right: 0; top: 4px; }
.strom-gate.is-approved .strom-gact .strom-chip { right: auto; left: 0; }

/* Mauszeiger der Person, die freigibt (Papier, kein Glühen) */
.strom-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; max-width: none; opacity: 0; fill: var(--paper); stroke: var(--night); stroke-width: 1.2; stroke-linejoin: round; filter: drop-shadow(0 3px 6px rgb(0 0 0 / 0.45)); will-change: transform, opacity; }

/* ---------- Lebende Bühne (JS, normale Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .strom-stage {
    height: clamp(600px, calc(100svh - var(--nav-h)), 1200px);
    padding: 0;
    overflow: hidden;
    background: var(--night);
  }
  .js .strom-vis { position: absolute; inset: 0; height: auto; margin: 0; border-radius: 0; transition: opacity 260ms var(--ease); }
  /* Sprung über eine Kapitelmarke: kurz abblenden statt sichtbar zurückzuspulen */
  .js .strom-vis.is-cut { opacity: 0; transition-duration: 180ms; }

  /* Texte links, die Bühne rechts davon */
  .js .strom-copy { position: absolute; z-index: 3; left: var(--strom-pad); top: 0; bottom: 0; width: min(34%, 620px); max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; }
  .js .strom-copy::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * var(--strom-pad)); right: -18%; background: linear-gradient(90deg, color-mix(in srgb, var(--night) 92%, transparent), color-mix(in srgb, var(--night) 66%, transparent) 62%, transparent); }
  .js .strom-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .js .strom-act { grid-area: 1 / 1; border: 0; padding: 0; opacity: 0; transform: translateY(8px); filter: blur(3px); transition: opacity 420ms var(--ease), transform 600ms var(--ease), filter 500ms var(--ease); }
  .js .strom-act.on { opacity: 1; transform: none; filter: none; transition: opacity 900ms var(--ease) 160ms, transform 1100ms var(--ease) 160ms, filter 900ms var(--ease) 160ms; }
  .js .strom-act .h2 { margin-top: 22px; font-size: var(--text-h2); line-height: 1.08; letter-spacing: var(--track-heading); max-width: 15ch; }
  .js .strom-act p { margin-top: 22px; max-width: 34ch; font-size: clamp(16px, 1.15vw, 19px); line-height: 1.5; color: rgb(244 242 238 / 0.74); }
  .js .strom-act .zm-words { --zm-delay: 140ms; }
  .js .strom-act:not(.on) .zm-words .w { transition-delay: 0ms; transition-duration: 300ms; }

  /* Fortschritt der vier Akte; jede Marke ist ein Knopf, der an den Anfang ihres Akts springt */
  .js .strom-meter { display: block; position: absolute; left: 0; right: 0; bottom: clamp(28px, 5vh, 56px); pointer-events: auto; }
  .strom-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 460px; }
  .strom-step { position: relative; display: block; width: 100%; min-width: 0; margin: 0; padding: 12px 0 10px; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--track-mono); text-transform: uppercase; line-height: 1.4; color: var(--on-night-muted); white-space: nowrap; transition: color 500ms var(--ease); }
  .strom-step:hover { color: var(--on-night); }
  .strom-step:focus-visible { outline: 2px solid var(--on-night); outline-offset: 4px; border-radius: 2px; }
  .strom-step b { font-weight: 400; margin-right: 6px; }
  .strom-step::before, .strom-step i { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgb(255 255 255 / 0.16); }
  .strom-step i { background: var(--on-night); transform: scaleX(var(--k, 0)); transform-origin: left; will-change: transform; }
  .strom-step.on { color: var(--on-night); }
  .strom-status { display: block; margin-top: 18px; height: 18px; font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--on-night-muted); }

  /* Schmale oder hohe Bühne: Texte oben, Bild darunter */
  @media (max-width: 859px), (max-aspect-ratio: 21/20) {
    .js .strom-stage { height: clamp(640px, calc(100svh - var(--nav-h)), 1000px); }
    .js .strom-copy { left: var(--strom-pad); right: var(--strom-pad); top: clamp(20px, 3.4vh, 40px); bottom: auto; width: auto; justify-content: flex-start; }
    .js .strom-copy::before { left: calc(-1 * var(--strom-pad)); right: calc(-1 * var(--strom-pad)); top: calc(-1 * clamp(20px, 3.4vh, 40px)); bottom: -56px; background: linear-gradient(180deg, color-mix(in srgb, var(--night) 94%, transparent), color-mix(in srgb, var(--night) 80%, transparent) 70%, transparent); }
    .js .strom-meter { position: static; order: -1; margin-bottom: 18px; }
    .strom-steps { display: flex; max-width: none; gap: 6px; }
    .strom-step { flex: 1 1 0; min-width: 0; font-size: 11px; transition: color 500ms var(--ease), flex-grow 700ms var(--ease); }
    .strom-step.on { flex-grow: 2.6; }
    .strom-step span { display: none; }
    .strom-step.on span { display: inline; }
    .strom-status { display: none; }
    .js .strom-act .h2 { margin-top: 12px; font-size: clamp(26px, 6.6vw, 40px); max-width: 20ch; }
    .js .strom-act p { margin-top: 12px; font-size: 15px; max-width: 46ch; }
    .strom-kpis { grid-auto-columns: minmax(92px, auto); }
    .strom-kpi b { font-size: 22px; line-height: 28px; }
    .strom-tile { min-width: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .strom-panel [data-t], .strom-node, .strom-chip, .strom-badge, .strom-btn { transition: none; }
}