/* ==============================================================
   signalweg.css  ·  Besitzer: P5 Signalweg
   Teil 1: KOMPAKTE LINIE (Startseite, Entscheidung 5) - Altbestand aus
   style.css (v3, CSS_VER 56), verhaltensneutral herausgeloest am
   24.09.2026 (P0). Bleibt unveraendert, die Startseite bleibt, wie sie ist.
   Teil 2: SIGNALWEG-BUEHNE K42 (/digitalisierung), P5 am 25.09.2026.
   ============================================================== */

/* ---- Signalweg -------------------------------------------------------- */
.sw-liste{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1.15rem;grid-template-columns:minmax(0,1fr);position:relative}

@media (min-width:62rem){
  .sw-liste{grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem}
}

.sw-liste::before{content:"";position:absolute;background:var(--cyan-fill);border-radius:2px}

@media (min-width:62rem){
  .sw-liste::before{left:0;right:0;top:.5rem;height:3px;transform-origin:left center}
}

@media (max-width:61.99rem){
  .sw-liste::before{left:.45rem;top:.3rem;bottom:.3rem;width:3px;transform-origin:center top}
}

.sw-knoten{position:relative;display:grid;gap:.1rem;align-content:start;padding-left:2rem;min-width:0}

@media (min-width:62rem){
  .sw-knoten{padding-left:0;padding-top:1.9rem}
}

.sw-knoten::before{
  content:"";position:absolute;left:0;top:0;width:1.05rem;height:1.05rem;border-radius:50%;
  box-sizing:border-box;background:var(--bg);border:3px solid var(--cyan-fill);
}

.sw-knoten:last-child::before{background:var(--cyan-fill)}

/* fix2 (Jury Befund 4): die kompakte Linie im Passer-Material statt v3-Kreisen
   und an --platte/--haar gebunden - im Gewerbe-Zustand dreht sie mit auf
   Magenta (vorher hart Cyan = Zwitter). Knoten = kleine Platte mit
   Fehlregister-Versatz wie die Kicker-Striche. */
.sw-liste::before{background:var(--platte)}
.sw-knoten::before{
  width:1rem;height:1rem;border:0;border-radius:2px;
  background:var(--platte);box-shadow:2px 2px 0 var(--haar);
}
.sw-knoten:last-child::before{background:var(--platte)}
.ohne-deko .sw-knoten::before{box-shadow:none}

.sw-nr{font-family:var(--schrift-mono);font-size:.875rem;color:var(--accent-text)}

.sw-knoten b{font-family:var(--schrift-titel);font-weight:650;font-stretch:92%;font-size:1.125rem;line-height:1.2;hyphens:auto}

.sw-text{color:var(--muted);font-size:.95rem;line-height:1.4}

@media (max-width:61.99rem){
  /* mobil zwei statt drei Zeilen je Station: Nummer + Titel nebeneinander */
  .sw-knoten{grid-template-columns:auto minmax(0,1fr);column-gap:.55rem;align-items:baseline}
  .sw-text{grid-column:2}
}

/* Die Linie zieht sich einmal, wenn der Abschnitt hereinkommt (.zeigen/.ist-da
   aus seite.js). Ohne JavaScript fehlt .zeigen — die Linie steht einfach da. */
@media (prefers-reduced-motion:no-preference){
  .signalweg.zeigen .sw-liste::before{transform:scale(0)}
  .signalweg.zeigen.ist-da .sw-liste::before{transform:none;transition:transform 1.2s var(--snap) .25s}
}


/* ======================================================================
   Teil 2: K42 SIGNALWEG-BUEHNE (nur /digitalisierung, Plan 8.5)
   kh_signalweg(..., 'buehne'). Die dunkle Flaeche setzt die Vorlage
   (.schild um die Sektion); hier stehen nur Tokens - keine Hex-Werte,
   keine eigenen Radien, Schatten oder Easings.

   Zustaende: Im HTML steht der ENDZUSTAND (ohne JS, reduziert, mobil).
   Fruehere Zustaende gelten nur unter .sw-an + .s0 ... .s4; die setzt
   signalweg.js (Scroll-Fortschritt --p ab 64rem, sonst Tipp/Klick).
   ====================================================================== */
.sw-buehne{position:relative;padding-block:var(--abstand-klein)}
.sw-defs{position:absolute;width:0;height:0;overflow:hidden}
.sw-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;align-items:center}
@media (min-width:48rem){
  .sw-innen{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(2rem, 1rem + 3vw, 4.5rem)}
}
.sw-spalte{min-width:0}
.sw-sub{margin:0 0 1.35rem}

/* ---- Stationen mit Piktogramm-Schiene ------------------------------------ */
.sw-stationen{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.sw-station{
  position:relative;min-width:0;
  display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:.85rem;align-items:start;
}
.sw-ik{
  grid-column:1;grid-row:1 / span 2;position:relative;z-index:1;
  width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border-radius:var(--r-knopf);background:var(--karte);
  border:2px solid color-mix(in oklch, var(--cyan) 55%, var(--bg));color:var(--accent-text);
  transition:background-color var(--t-kurz) var(--ease),border-color var(--t-kurz) var(--ease),
             color var(--t-kurz) var(--ease),box-shadow var(--t-kurz) var(--ease);
}
.sw-ik svg{width:1.5rem;height:1.5rem}
/* Leitung von Kachel zu Kachel (Endzustand: durchgehend Cyan) */
.sw-station:not(:last-child)::before{
  content:"";position:absolute;left:calc(1.125rem - 1.5px);top:2.25rem;bottom:-.5rem;width:3px;
  background:var(--cyan);transition:background-color var(--t-mittel) var(--ease);
}
.sw-zeile{grid-column:2;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:.55rem;min-width:0;padding-top:.28rem}
.sw-station:has(.sw-mehr) .sw-zeile{padding-right:5.25rem}
.sw-nr{font-family:var(--schrift-mono);font-size:.875rem;line-height:1.35;color:var(--accent-text);font-variant-numeric:tabular-nums}
.sw-titel{
  font-family:var(--schrift-titel);font-weight:650;font-stretch:92%;
  font-size:1.125rem;line-height:1.35;color:var(--text);
  transition:color var(--t-kurz) var(--ease);
}
.sw-satz{grid-column:2;color:var(--muted);font-size:.95rem;line-height:1.4;margin-top:.05rem}
@media (min-width:64rem){ .sw-satz{font-size:1rem} }

/* Knopf um den Titel (setzt signalweg.js; ohne JS bleibt der Titel Text) */
.sw-wahl{
  display:inline-flex;align-items:center;min-height:24px;margin:0;padding:0;
  background:none;border:0;border-radius:2px;color:inherit;font:inherit;text-align:left;cursor:pointer;
}
.sw-station.ist-klickbar{cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .sw-wahl:hover .sw-titel{color:var(--accent-text)}
}

/* ---- Ablauf-Texte als Aufklapper an der Station ------------------------- */
.sw-mehr{grid-column:2}
.sw-mehr > summary{
  position:absolute;top:.2rem;right:0;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;min-height:1.75rem;padding:0 .6rem;
  border:1px solid var(--line-2);border-radius:var(--r-chip);
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;font-size:.875rem;line-height:1;
  letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);
  list-style:none;cursor:pointer;
  transition:border-color var(--t-kurz) var(--ease),background-color var(--t-kurz) var(--ease);
}
.sw-mehr > summary::-webkit-details-marker{display:none}
.sw-mehr > summary::after{content:"+" / "";font-family:var(--schrift-mono);font-size:1rem;letter-spacing:0}
.sw-mehr[open] > summary::after{content:"\2212" / ""}
.sw-mehr > summary:hover{border-color:var(--accent-text);background:var(--wash)}
.sw-mehr-inhalt{margin-top:.5rem;padding:.2rem 0 .35rem .9rem;border-left:2px solid var(--haar)}
.sw-mehr-inhalt h3{font-size:1rem;line-height:1.3;margin:0 0 .2rem;color:var(--text)}
.sw-mehr-inhalt p{margin:0 0 .7rem;color:var(--muted);font-size:.95rem;line-height:1.55;max-width:60ch;text-wrap:pretty}
.sw-mehr-inhalt p:last-child{margin-bottom:0}

/* ---- Szene ---------------------------------------------------------------- */
.sw-szene{display:none;min-width:0}
@media (min-width:48rem){ .sw-szene{display:block} }
.sz{display:block;width:100%;height:auto;overflow:visible}
.sw-zaehler{margin:.75rem 0 0;color:var(--muted);text-align:right}
.sw-zaehler-n{color:var(--accent-text)}

.sz{
  --sz-himmel:   color-mix(in oklch, var(--cyan) 26%, var(--bg));
  --sz-sonne:    var(--licht);
  --sz-huegel-2: color-mix(in oklch, var(--magenta) 58%, var(--bg));
  --sz-huegel-1: color-mix(in oklch, var(--cyan) 72%, var(--bg));
  --sz-haus:     var(--text);
}
.sz-platte{fill:none;stroke:var(--line-2);stroke-width:2}
.sz-koerper{fill:var(--karte);stroke:var(--line-2);stroke-width:2;transition:stroke var(--t-mittel) var(--ease)}
.sz-etikett{fill:var(--text)}
.sz-schrift{fill:none;stroke:var(--bg);stroke-width:3;stroke-linecap:round}
.sz-fenster,.sz-schacht,.sz-anzeige,.sz-schirmgrund{fill:var(--bg);stroke:var(--line-2);stroke-width:1.5}
.sz-wickel{fill:color-mix(in oklch, var(--muted) 40%, var(--bg))}
.sz-spule{fill:var(--karte);stroke:var(--muted);stroke-width:2;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center;transition:rotate 1.4s var(--ease)}
.sz-einschub{fill:var(--muted);transition:opacity var(--t-mittel) var(--ease)}
.sz-led{fill:var(--cyan);transition:fill var(--t-kurz) var(--ease)}
.sz-led-hof{fill:var(--cyan);opacity:.22;transition:opacity var(--t-mittel) var(--ease)}
.sz-ziffern{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;transition:opacity var(--t-mittel) var(--ease)}
.sz-tasten{fill:none;stroke:var(--line-2);stroke-width:2}
.sz-fuss{fill:none;stroke:var(--line-2);stroke-width:4;stroke-linecap:round}
.sz-stand{fill:var(--karte);stroke:var(--line-2);stroke-width:2}
.sz-himmel{fill:var(--sz-himmel);transition:fill var(--t-lang) var(--ease)}
.sz-sonne{fill:var(--sz-sonne);transition:fill var(--t-lang) var(--ease)}
.sz-huegel-2{fill:var(--sz-huegel-2);transition:fill var(--t-lang) var(--ease)}
.sz-huegel-1{fill:var(--sz-huegel-1);transition:fill var(--t-lang) var(--ease)}
.sz-haus{fill:var(--sz-haus);transition:fill var(--t-lang) var(--ease)}
.sz-zeile{transition:translate .55s var(--feder) calc(var(--z, 0) * 40ms)}
.sz-zeile[data-z="0"]{--dx:-18px;--z:0}
.sz-zeile[data-z="1"]{--dx:12px;--z:1}
.sz-zeile[data-z="2"]{--dx:-7px;--z:2}
.sz-zeile[data-z="3"]{--dx:22px;--z:3}
.sz-zeile[data-z="4"]{--dx:-13px;--z:4}
.sz-zeile[data-z="5"]{--dx:5px;--z:5}
.sz-zeile[data-z="6"]{--dx:-21px;--z:6}
.sz-zeile[data-z="7"]{--dx:9px;--z:7}
.sz-welle-roh{fill:none;stroke:var(--muted);stroke-width:2;stroke-linejoin:round;opacity:0;transition:opacity var(--t-mittel) var(--ease)}
.sz-welle{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;transition:opacity var(--t-mittel) var(--ease)}
.sz-blatt{fill:var(--karte);stroke:var(--cyan);stroke-width:2.5;stroke-linejoin:round}
.sz-knick{fill:none;stroke:var(--cyan);stroke-width:2.5;stroke-linejoin:round}
.sz-play{fill:var(--cyan)}
.sz-schrift-h,.sz-strich{fill:none;stroke:var(--muted);stroke-width:3;stroke-linecap:round}
.sz-stecker,.sz-platte-r{fill:none;stroke:var(--muted);stroke-width:2}
.sz-punkt{fill:var(--cyan)}
.sz-glied{fill:none;stroke:var(--cyan);stroke-width:4}
.sz-datei,.sz-aus,.sz-kassette{transition:opacity var(--t-mittel) var(--ease),translate var(--t-mittel) var(--ease)}
.sz-aus-2{transition-delay:80ms}
.sz-aus-3{transition-delay:160ms}
.sz-kabel{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .6s var(--ease)}

/* ---- Zustaende (nur mit signalweg.js: .sw-an + .s0 ... .s5) -------------- */
/* Schiene: kommende Stationen gedaempft, aktuelle als Platte mit Passer-Versatz */
.sw-an .sw-station.ist-kommt .sw-ik{border-color:var(--line-2);color:var(--muted)}
.sw-an .sw-station:not(.ist-vorbei)::before{background:var(--line-2)}
.sw-an .sw-station.ist-jetzt .sw-ik{
  background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan);box-shadow:3px 3px 0 var(--haar);
}
.sw-an .sw-station.ist-jetzt .sw-titel{color:var(--accent-text)}

/* Szene: was die jeweilige Station noch nicht erreicht hat */
.sw-an.s0 .sz-kabel-1,
.sw-an:is(.s0,.s1) .sz-kabel-2,
.sw-an:is(.s0,.s1,.s2,.s3) .sz-kabel-3,
.sw-an:not(.s5) .sz-kabel-4{stroke-dashoffset:1}
.sw-an:not(.s0) .sz-kassette{translate:0 14px;opacity:.55}
.sw-an:not(.s0) .sz-spule{rotate:300deg}
.sw-an.s0 .sz-einschub,.sw-an.s0 .sz-ziffern,.sw-an.s0 .sz-led-hof{opacity:0}
.sw-an.s0 .sz-led{fill:var(--line-2)}
.sw-an:is(.s0,.s1) .sz-zeile{translate:var(--dx) 0}
.sw-an:is(.s0,.s1,.s2) .sz{
  --sz-himmel:   color-mix(in oklch, var(--muted) 26%, var(--bg));
  --sz-sonne:    color-mix(in oklch, var(--muted) 80%, var(--bg));
  --sz-huegel-2: color-mix(in oklch, var(--muted) 45%, var(--bg));
  --sz-huegel-1: color-mix(in oklch, var(--muted) 62%, var(--bg));
  --sz-haus:     color-mix(in oklch, var(--muted) 92%, var(--bg));
}
.sw-an:is(.s0,.s1,.s2) .sz-welle-roh{opacity:1}
.sw-an:is(.s0,.s1,.s2) .sz-welle{opacity:0}
.sw-an:is(.s0,.s1,.s2,.s3) .sz-datei{opacity:0;translate:-24px 0}
.sw-an:not(.s5) .sz-aus{opacity:0;translate:0 10px}
/* das Geraet der aktuellen Station bekommt die Cyan-Kontur */
.sw-an.s0 .sz-kassette .sz-koerper,
.sw-an.s1 .sz-zuspieler .sz-koerper,
.sw-an:is(.s2,.s3) .sz-monitor .sz-koerper,
.sw-an.s3 .sz-ton .sz-koerper,
.sw-an.s5 .sz-aus .sz-koerper{stroke:var(--cyan)}

/* ---- Sticky-Buehne: ab 64rem, Fensterhoehe >= 700 px, Bewegung erlaubt,
   JS an (html.js). Der Raum fuers Weiterscrollen steht im Inhaltskasten
   (::after), sonst koennte die Buehne nicht darueber gleiten.
   Laengenbudget: hoechstens + 0,5 Bildschirme (Auftrag 25.09.2026). */
@media (min-width:64rem) and (min-height:700px) and (prefers-reduced-motion:no-preference){
  .js .sw-buehne::after{content:"";display:block;height:24vh}
  .js .sw-innen{position:sticky;top:calc(var(--kopf-h) + 1.25rem)}
  /* Aufgeklappte Ablauf-Texte machen die Buehne hoeher als das Fenster: sie
     haelt dann nur fuer den kurzen Raum oben (24vh) und laeuft danach normal
     weiter. Bewusst KEIN Umschalten auf static beim Aufklappen - das liesse
     die Buehne unter dem Finger springen. */
}

/* Kopf des Ablauf-Kapitels unter der Liste - nur, wenn die Buehne das
   Kapitel ersetzt ('in_signalweg' => true, Aenderungswunsch an P7). */
.sw-auftrag{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line-2);padding-left:3.1rem}
.sw-auftrag h3{font-size:1.0625rem;line-height:1.3;margin:0 0 .15rem}
.sw-auftrag h3 b{font-weight:470;font-stretch:100%;color:var(--accent-text)}
.sw-auftrag p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5;max-width:52ch}

/* Preisliste + Auftrag je Angebot unter „So laeuft Ihr Auftrag“ (Peter 28.09.2026) */
.pdf-liste{margin-top:1rem}
.sw-auftrag .pdf-kopf{font-size:.95rem}
.pdf-liste ul{list-style:none;margin:.55rem 0 0;padding:0}
/* Name immer ueber den Knoepfen: die Buehnen-Spalte ist auch am Desktop schmal */
.pdf-liste li{display:grid;gap:.4rem;padding:.65rem 0;border-top:1px solid var(--line)}
.pdf-liste li > *{min-width:0}
.pdf-was{font-family:var(--schrift-titel);font-weight:640;font-stretch:96%}
.pdf-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem}