/* =====================================================================
   HERO-PIPELINE und 7-SÄULEN-STEPPER
   Grundlage: tokens.css (Farben, Raster, Radien, Federkurven) – keine eigenen Farb- oder Abstandswerte.
   Skills: motion-physics (Federn, Massenträgheit), svg-animation (statische Filter, viewBox, aria-hidden),
           add-mouse-driven-orbit (gedämpfte Parallaxe, ungleiche Ebenen, kein Touch), scroll-experience
           (Scroll-Kopplung des Steppers), sounds-on-the-web (nur Status hier, Ton in JS)
   Bewegung: transform/translate/opacity; Federn über --spring-*; Pfad-Zeichnen mit --ease-out
             (eine Feder würde über das Ziel hinausschießen und den Pfadanfang kurz öffnen).
   ===================================================================== */

/* ---------- Bühne und Tiefenebenen ---------- */
.hero__art--pipe { display: block; width: 100%; max-width: 560px; justify-self: end; }
.pipe { --node: clamp(44px, 12.5cqi, 64px); position: relative; width: 100%; aspect-ratio: 520 / 470; container-type: inline-size; perspective: 1400px; overflow: clip; overflow-clip-margin: var(--s-4); }   /* nichts verlässt die Bounding-Box (Saum für Schatten und Kippen) */
.pipe__stage { position: absolute; inset: 0; transform-origin: 50% 50%; }
.pipe__layer { position: absolute; inset: 0; }
.pipe__layer--far, .pipe__layer--glass, .pipe__layer--mid { pointer-events: none; }
/* fester Ausschnitt auf dem Glas: die Farbflächen dürfen sich darin bewegen, aber nie über den Rand hinaus */
.pipe__clip { position: absolute; top: calc(30 / 470 * 100%); left: calc(12 / 520 * 100%); width: calc(496 / 520 * 100%); height: calc(420 / 470 * 100%); overflow: hidden; border-radius: calc(30 / 520 * 100cqi); pointer-events: none; }
.pipe__clip .pipe__layer--far { inset: -6%; }

/* hinten: weiche Farbflächen in den Logo-Tönen – das Milchglas bricht sie */
.pipe__glow { position: absolute; width: 52%; aspect-ratio: 1; border-radius: 50%; opacity: .55; }
.pipe__glow--a { top: 2%; left: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-violet) 55%, transparent), transparent); }
.pipe__glow--b { top: 26%; right: 0; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-sky) 60%, transparent), transparent); }
.pipe__glow--c { bottom: 0; left: 24%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-green) 45%, transparent), transparent); }

/* Milchglas-Platte exakt auf dem Regulatorik-Rahmen (SVG-Rechteck 12/30/496/420) */
.pipe__glass { position: absolute; top: calc(30 / 470 * 100%); left: calc(12 / 520 * 100%); width: calc(496 / 520 * 100%); height: calc(420 / 470 * 100%); overflow: hidden; border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line)); border-radius: calc(30 / 520 * 100cqi); background: color-mix(in srgb, var(--surface) 58%, transparent); box-shadow: var(--elev-pop), inset 0 1px 0 color-mix(in srgb, var(--surface-card) 75%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.pipe__grain { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .07; mix-blend-mode: overlay; }   /* statisch – Filter werden nie animiert */
@media (prefers-reduced-transparency: reduce) { .pipe__glass { background: var(--surface-card); -webkit-backdrop-filter: none; backdrop-filter: none; } .pipe__grain { display: none; } }

/* Mitte: Rahmen, Spur, gezeichneter Pfad, Partikel */
.pipe__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pipe__stop--violet { stop-color: var(--tone-violet); } .pipe__stop--sky { stop-color: var(--tone-sky); }
.pipe__stop--teal { stop-color: var(--tone-teal); } .pipe__stop--green { stop-color: var(--tone-green); }
.pipe__frame { fill: none; stroke: url(#pipe-g); stroke-width: 1.75; stroke-dasharray: 3 7; opacity: .6; transition: opacity var(--spring-stiff-d) var(--spring-stiff); }
.pipe:has(.pipe__frame-tag.is-active) .pipe__frame { opacity: 1; }
.pipe__track { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.pipe__trace { fill: none; stroke: url(#pipe-g); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 100; }
/* Partikel: Kern + Lichthof + nachgezogener Schweif (Schweif = zweite, weichere Feder, die dem Kern folgt) */
.pipe__halo-stop--in { stop-color: var(--brand); stop-opacity: .5; }
.pipe__halo-stop--out { stop-color: var(--brand); stop-opacity: 0; }
.pipe__halo { fill: url(#pipe-halo); opacity: .35; transition: opacity var(--dur-base) var(--ease-out); }
.pipe__core { transition: fill var(--dur-base) var(--ease-out); }
.pipe__tail { stroke-width: 3; stroke-linecap: round; opacity: .38; transition: stroke var(--dur-base) var(--ease-out); }
.pipe__pp--raw .pipe__core { fill: var(--subtle); }  .pipe__pp--raw .pipe__tail { stroke: var(--subtle); }   /* ungeprüft */
.pipe__pp--ok .pipe__core { fill: var(--brand); }    .pipe__pp--ok .pipe__tail { stroke: var(--brand); }    .pipe__pp--ok .pipe__halo { opacity: .9; }   /* nach 03: geprüft */
.pipe__pp--out .pipe__core { fill: var(--tone-green); } .pipe__pp--out .pipe__tail { stroke: var(--tone-green); } .pipe__pp--out .pipe__halo { opacity: .6; }  /* nach 06: ausgegeben */

/* Vorne: Stationen (Knoten liegt exakt auf dem Pfadpunkt) */
.pipe__stations { margin: 0; padding: 0; list-style: none; }
.pipe__station { position: absolute; top: var(--y); left: var(--x); width: 0; height: 0; }
.pipe__station a { position: absolute; top: 0; left: 0; display: grid; justify-items: center; gap: var(--s-1); transform: translate(-50%, calc(var(--node) / -2)); color: var(--ink); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: opacity var(--spring-gentle-d) var(--spring-gentle), translate var(--spring-gentle-d) var(--spring-gentle); transition-delay: calc(var(--i) * 60ms); }
.pipe__node { position: relative; display: grid; place-items: center; width: var(--node); height: var(--node); border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface-card); box-shadow: var(--elev-pop); color: var(--brand); transition: scale var(--spring-snappy-d) var(--spring-snappy), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
/* Lichtring beim Treffer: nur transform und opacity eines Pseudo-Elements (kein animierter Schatten) */
.pipe__node::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--brand); border-radius: 50%; opacity: 0; pointer-events: none; }
.pipe__station a.is-hit .pipe__node::after { animation: pipe-ring 720ms var(--ease-out); }
@keyframes pipe-ring { from { opacity: .75; scale: 1; } to { opacity: 0; scale: 1.6; } }
.pipe__node svg { width: 44%; height: 44%; }
.pipe__label { display: grid; justify-items: center; font-size: clamp(11px, 2.7cqi, 14px); font-weight: var(--w-semibold); line-height: 1.2; white-space: nowrap; }
.pipe__no { color: var(--brand-text); font: var(--w-semibold) clamp(9px, 2.1cqi, 11px) / 1.4 var(--mono); }
.pipe__station a.is-hit .pipe__node { scale: 1.08; }      /* ein Partikel erreicht die Station */
.pipe__station a.is-active .pipe__node { border-color: transparent; background: linear-gradient(var(--surface-card), var(--surface-card)) padding-box, var(--gradient) border-box; box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 14%, transparent), 0 12px 28px -10px color-mix(in srgb, var(--brand) 55%, transparent); }
.pipe__station a:focus-visible { outline: none; }
.pipe__station a:focus-visible .pipe__node { box-shadow: var(--ring); }
.pipe__station a:active .pipe__node { scale: .96; transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) { .pipe__station a:hover .pipe__node { scale: 1.05; border-color: var(--brand); } }

/* 07 Regulatorik: Marke auf dem Rahmen */
.pipe__frame-tag { position: absolute; top: calc(30 / 470 * 100%); left: 50%; display: inline-flex; align-items: center; gap: 6px; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius: var(--r-full); background: var(--surface-card); box-shadow: var(--elev-pop); color: var(--ink); font-size: clamp(11px, 2.6cqi, 13px); font-weight: var(--w-semibold); text-decoration: none; transition: opacity var(--spring-gentle-d) var(--spring-gentle), border-color var(--dur-base) var(--ease-out), scale var(--spring-snappy-d) var(--spring-snappy); transition-delay: 420ms, 0s, 0s; }
.pipe__frame-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-wash); color: var(--brand); }
.pipe__frame-icon svg { width: 14px; height: 14px; }
.pipe__frame-tag.is-active { border-color: var(--brand); }
.pipe__frame-tag:focus-visible { box-shadow: var(--ring); outline: none; }
.pipe__frame-tag:active { scale: .96; }

/* Formatmarken: links bündig INNERHALB des Glases (nicht mehr um die Station zentriert – das schnitt am Rand ab) */
.pipe__formats { position: absolute; left: calc(34 / 520 * 100%); display: flex; flex-wrap: nowrap; gap: var(--s-1); max-width: calc(452 / 520 * 100%); overflow: hidden; color: var(--muted); font: var(--w-semibold) clamp(8px, 1.9cqi, 10px) / 1 var(--mono); letter-spacing: .04em; transition: opacity var(--spring-gentle-d) var(--spring-gentle); }
.pipe__formats span { flex: none; padding: 3px 6px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface-card); }
.pipe__formats--in { top: calc(70 / 470 * 100%); }
.pipe__formats--out { top: calc(424 / 470 * 100%); }
.pipe__formats--out span { border-color: color-mix(in srgb, var(--tone-green) 35%, var(--line)); }
@container (max-width: 400px) { .pipe__formats { display: none; } }
/* lange Bezeichnungen („Prozess·automatisierung“): unsichtbare Umbruchstelle, die NUR in schmalen Grafiken zum
   Zeilenumbruch wird – ohne Bindestrich. (<wbr> ginge nicht: Chromium bricht dort trotz nowrap immer um.) */
.pipe__brk { display: none; }
@container (max-width: 345px) { .pipe__brk { display: block; } }

/* Einstieg: JS setzt .is-arming (Ausgangslage), im nächsten Bild .is-ready (Federn laufen an).
   Ohne JavaScript bleibt alles sofort sichtbar. */
.pipe.is-arming .pipe__station a { opacity: 0; translate: 0 10px; }
.pipe.is-arming .pipe__frame-tag, .pipe.is-arming .pipe__formats { opacity: 0; }
.pipe.is-arming .pipe__trace { stroke-dashoffset: 100; }
.pipe.is-ready .pipe__trace { stroke-dashoffset: 0; transition: stroke-dashoffset 1400ms var(--ease-out) 200ms; }
@media (prefers-reduced-motion: reduce) {
  .pipe__station a, .pipe__frame-tag, .pipe__formats { translate: none !important; transition: opacity 200ms var(--ease-out) !important; }
  .pipe.is-ready .pipe__trace { transition: none; }
  .pipe__node { transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
}

/* =====================================================================
   7 SÄULEN · Bausteine: Sprunglink, Ton-Schalter, Cockpit-Demo
   (ergänzt das Prozess-Deck weiter unten: Sprunglink, Ton-Schalter, Cockpit-Demo)
   ===================================================================== */
.p7-skip { position: absolute; left: -9999px; }
.p7-skip:focus { position: static; display: inline-block; margin-bottom: var(--s-3); }
.p7-sound { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--s-7); padding: 0 var(--s-4) 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface-card); color: var(--text); font: var(--w-semibold) var(--fs-14) / 1 var(--sans); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), scale var(--spring-snappy-d) var(--spring-snappy); }
.p7-sound svg { width: 18px; height: 18px; }
.p7-sound[hidden], .p7-demo[hidden] { display: none; }
.p7-sound .is-on, .p7-sound[aria-pressed="true"] .is-off { display: none; }
.p7-sound[aria-pressed="true"] .is-on { display: inline; }
.p7-sound[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-deep); }
.p7-sound:focus-visible { box-shadow: var(--ring); outline: none; }
.p7-sound:active { scale: .96; }
@media (prefers-color-scheme: dark) { .p7-sound[aria-pressed="true"] { color: var(--brand-text); } }

/* Cockpit-Demo: Freigabe im Vier-Augen-Prinzip (Human-in-the-Loop, Audit-Trail, e-Signatur) */
.p7-demo { margin-top: var(--s-5); padding: var(--s-5); border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); border-radius: var(--r-lg); background: var(--surface-2); }
.p7-demo__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); margin-bottom: var(--s-4); }
.p7-demo__title { margin: 0; color: var(--ink); font-size: var(--fs-16); font-weight: var(--w-semibold); }
.p7-demo__note { margin: 0; color: var(--subtle); font-size: var(--fs-12); }
.p7-demo__item { margin: 0 0 var(--s-3); color: var(--muted); font: var(--w-semibold) var(--fs-12) / 1.4 var(--mono); }
.p7-demo__steps { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); padding: 0; list-style: none; }
.p7-demo__step { display: grid; grid-template-columns: var(--s-6) minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border: var(--border); border-radius: var(--r-md); background: var(--surface-card); transition: border-color var(--dur-base) var(--ease-out); }
.p7-demo__mark { display: grid; place-items: center; width: var(--s-6); height: var(--s-6); border: 2px solid var(--line-strong); border-radius: 50%; color: transparent; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), scale var(--spring-snappy-d) var(--spring-snappy); }
.p7-demo__mark svg { width: 16px; height: 16px; }
.p7-demo__step.is-done { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.p7-demo__step.is-done .p7-demo__mark { border-color: var(--brand); background: var(--brand); color: var(--on-brand); scale: 1.06; }
.p7-demo__label { display: grid; gap: 2px; font-size: var(--fs-14); line-height: var(--lh-ui); }
.p7-demo__label small { color: var(--muted); font-size: var(--fs-12); }
.p7-demo__btn { height: var(--s-7); padding: 0 var(--s-4); border: 0; border-radius: var(--r-full); background: var(--brand-deep); color: var(--on-brand); font: var(--w-semibold) var(--fs-14) / 1 var(--sans); cursor: pointer; transition: scale var(--spring-snappy-d) var(--spring-snappy), opacity var(--dur-fast) var(--ease-out); }
.p7-demo__btn:disabled { opacity: .45; cursor: not-allowed; }
.p7-demo__btn:not(:disabled):active { scale: .96; }
.p7-demo__btn:focus-visible { box-shadow: var(--ring); outline: none; }
.p7-demo__btn[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .p7-demo__btn { background: var(--brand); color: var(--on-brand); } }
.p7-demo__audit { margin: 0; padding: 0; list-style: none; color: var(--muted); font: var(--fs-12) / 1.6 var(--mono); }
.p7-demo__audit li { opacity: 1; translate: 0 0; transition: opacity var(--spring-stiff-d) var(--spring-stiff), translate var(--spring-stiff-d) var(--spring-stiff); }
@starting-style { .p7-demo__audit li { opacity: 0; translate: 0 6px; } }
.p7-demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-3); }
.p7-demo__done { margin: 0; color: var(--brand-deep); font-size: var(--fs-14); font-weight: var(--w-semibold); }
.p7-demo__reset { padding: 0; border: 0; background: none; color: var(--muted); font: var(--w-semibold) var(--fs-12) / 1.4 var(--sans); text-decoration: underline; cursor: pointer; }
@media (prefers-color-scheme: dark) { .p7-demo__done { color: var(--brand-text); } }
@media (prefers-reduced-motion: reduce) { .p7-demo__mark, .p7-demo__audit li { transition-duration: 1ms; } }
@media (max-width: 560px) { .p7-demo__step { grid-template-columns: var(--s-6) minmax(0, 1fr); } .p7-demo__btn { grid-column: 2; justify-self: start; } }

/* =====================================================================
   HERO: ausdrucksstarke Typografie und Lichtflächen
   Akzent im Logo-Verlauf. Hell: jeder Ton zu 65 % mit --ink gemischt – mind. 4,2:1 auf Weiß und Markengrund
   (pure Logo-Töne erreichen nur 2,4:1). Dunkel: pure Töne, mind. 3,9:1 (Großtext-Grenze 3:1).
   ===================================================================== */
.hero h1 { font-size: var(--fs-72); font-weight: var(--w-bold); line-height: 1.02; letter-spacing: -0.035em; text-wrap: balance; }
.hero h1 .accent { background: linear-gradient(90deg, color-mix(in srgb, var(--tone-violet) 65%, var(--ink)), color-mix(in srgb, var(--tone-sky) 65%, var(--ink)) 42%, color-mix(in srgb, var(--tone-teal) 65%, var(--ink)) 72%, color-mix(in srgb, var(--tone-green) 65%, var(--ink))); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (prefers-color-scheme: dark) { .hero h1 .accent { background-image: var(--gradient); } }
@media (max-width: 640px) { .hero h1 { font-size: clamp(2rem, 7.5vw + .25rem, 2.6rem); letter-spacing: -0.03em; } }
/* Lichtflächen hinter der Pipeline: statisch (kein animierter Weichzeichner) und innerhalb der Grafik */
.hero__art--pipe { position: relative; isolation: isolate; }
.hero__art--pipe::before { content: ""; position: absolute; inset: 6% 4%; z-index: -1; border-radius: var(--r-lg); background: radial-gradient(55% 50% at 72% 32%, color-mix(in srgb, var(--tone-sky) 28%, transparent), transparent 72%), radial-gradient(45% 45% at 24% 76%, color-mix(in srgb, var(--tone-violet) 20%, transparent), transparent 72%); filter: blur(var(--s-5)); pointer-events: none; }

/* =====================================================================
   SEKTIONS-RHYTHMUS der Startseite: vier Tonstufen aus den Tokens im Wechsel, je mit feiner Trennlinie
   Reihenfolge: Hero · Kennzahlen · 7 Säulen (Marke) · Kompetenzfelder (hell) · Leistungen (grau) · Projekte (hell)
                · Produkte (Markenhauch) · Fachbibliothek (grau) · Mehr entdecken (hell) · Kontakt (dunkel)
   ===================================================================== */
.section.hz { position: relative; border-top: 1px solid var(--line); }
.section.hz--plain { background: var(--surface); }
.section.hz--muted { background: var(--surface-2); }
.section.hz--soft { background: linear-gradient(180deg, color-mix(in srgb, var(--brand-wash) 75%, var(--surface)), var(--surface) 88%); }
.section.hz--brand { background: radial-gradient(900px 420px at 88% 0%, color-mix(in srgb, var(--tone-sky) 14%, transparent), transparent 70%), radial-gradient(720px 380px at 0% 100%, color-mix(in srgb, var(--tone-violet) 10%, transparent), transparent 70%), var(--brand-wash); border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, var(--line)); }
.section.hz--brand { border-top-color: color-mix(in srgb, var(--brand) 18%, var(--line)); }

/* =====================================================================
   7 SÄULEN: Prozess-Deck
   Glas-Karten (Serpentine wie im Hero), Datenfaden mit Leuchtpunkten, Detail-Bühne.
   Akzente je Phase entlang des Logo-Verlaufs (nur Tokens + color-mix). Text-Akzente hell zu 65 % mit --ink gemischt
   (mind. 4,2:1); Symbole weiß auf zu 70 % abgedunkelten Tönen. Bewegung: nur transform/translate/scale/opacity,
   Federkurven aus tokens.css; Schatten wechseln über die Deckkraft eines Pseudo-Elements, nie animiert.
   ===================================================================== */
.sx-section {
  --sx-violet: var(--tone-violet); --sx-sky: var(--tone-sky); --sx-teal: var(--tone-teal); --sx-green: var(--tone-green);
  --sx-violet-sky: color-mix(in srgb, var(--tone-violet) 50%, var(--tone-sky));
  --sx-sky-teal: color-mix(in srgb, var(--tone-sky) 50%, var(--tone-teal));
  --sx-teal-green: color-mix(in srgb, var(--tone-teal) 50%, var(--tone-green));
  --sx-shade: var(--ink); --sx-on: var(--surface-card);          /* hell: Töne zur Tinte abdunkeln, weiße Symbole */
}
@media (prefers-color-scheme: dark) { .sx-section { --sx-shade: var(--surface); --sx-on: var(--ink); } }
.sx { display: grid; gap: var(--s-7); }

/* ---------- Deck, Faden, Leuchtpunkte ---------- */
.sx__deck { position: relative; }
.sx__thread { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }   /* Größe nur aus CSS (siehe stepper.js) */
.sx__track { fill: none; stroke: color-mix(in srgb, var(--brand) 30%, var(--line-strong)); stroke-width: 2; stroke-dasharray: 2 9; stroke-linecap: round; stroke-linejoin: round; }
.sx__progress { fill: none; stroke: url(#sx-g); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke-dashoffset var(--spring-gentle-d) var(--spring-gentle); }
.sx__spark { position: absolute; top: 0; left: 0; z-index: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-card); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent), 0 0 18px 5px color-mix(in srgb, var(--brand) 55%, transparent); offset-anchor: 50% 50%; offset-rotate: 0deg; offset-distance: 0%; opacity: 0; pointer-events: none; animation: sx-spark 8.4s infinite, sx-spark-fade 8.4s infinite; animation-delay: calc(var(--d, 0) * -1s); }
.sx:not(.is-enhanced) .sx__spark, .sx:not(.is-enhanced) .sx__thread { display: none; }
.sx.is-offscreen .sx__spark, .sx.is-offscreen .sx-card.is-active::before { animation-play-state: paused; }
@keyframes sx-spark-fade { 0% { opacity: 0; } 4% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Kartenraster: Serpentine 01 02 03 / 06 05 04, darunter 07 als Rahmen ---------- */
.sx__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.sx-card:nth-child(1) { grid-area: 1 / 1; } .sx-card:nth-child(2) { grid-area: 1 / 2; } .sx-card:nth-child(3) { grid-area: 1 / 3; }
.sx-card:nth-child(4) { grid-area: 2 / 3; } .sx-card:nth-child(5) { grid-area: 2 / 2; } .sx-card:nth-child(6) { grid-area: 2 / 1; }
.sx-card--frame { grid-area: 3 / 1 / auto / span 3; }
@media (max-width: 1099px) {
  .sx__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
  .sx-card:nth-child(n) { grid-area: auto; }
  .sx-card--frame { grid-column: 1 / -1; }
}
@media (max-width: 699px) { .sx__cards { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- Karte ---------- */
.sx-card {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-6) var(--s-5) var(--s-5);
  border: 1px solid transparent; border-radius: calc(var(--r-lg) + 4px); color: var(--text); text-decoration: none;
  background: linear-gradient(160deg, color-mix(in srgb, var(--surface-card) 88%, transparent), color-mix(in srgb, var(--surface-card) 66%, transparent)) padding-box,
              linear-gradient(150deg, color-mix(in srgb, var(--a1) 55%, var(--line)), var(--line) 42%, var(--line) 62%, color-mix(in srgb, var(--a2) 45%, var(--line))) border-box;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-card) 85%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--a1) 10%, transparent),
              0 1px 2px rgb(17 26 36 / .05), 0 10px 22px -12px rgb(17 26 36 / .14), 0 28px 56px -30px color-mix(in srgb, var(--a1) 45%, transparent);
  transform-origin: 50% 60%; will-change: auto;
  transition: translate var(--spring-snappy-d) var(--spring-snappy), scale var(--spring-snappy-d) var(--spring-snappy);
  -webkit-tap-highlight-color: transparent;
}
/* tiefer Schatten für Hover/aktiv: nur die Deckkraft wechselt */
.sx-card::after { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; box-shadow: 0 34px 64px -26px color-mix(in srgb, var(--a1) 60%, transparent), 0 14px 30px -18px color-mix(in srgb, var(--a2) 50%, transparent); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; }
/* Lichtkegel folgt dem Zeiger (--mx/--my aus stepper.js) */
.sx-card__glow { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--a1) 22%, transparent), transparent 68%); opacity: 0; transition: opacity var(--dur-base) var(--ease-out); pointer-events: none; }
.sx-card__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-3); }
.sx-card__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 70%, var(--sx-shade)), color-mix(in srgb, var(--a2) 70%, var(--sx-shade))); box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--a1) 70%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); color: var(--sx-on); transition: rotate var(--spring-snappy-d) var(--spring-snappy), scale var(--spring-snappy-d) var(--spring-snappy); }
.sx-card__icon svg { width: 26px; height: 26px; transition: translate var(--spring-snappy-d) var(--spring-snappy); }
.sx-card__no { color: transparent; font: var(--w-bold) var(--fs-40) / 1 var(--mono); letter-spacing: -0.04em; -webkit-text-stroke: 1.25px color-mix(in srgb, var(--a1) 55%, var(--line-strong)); transition: color var(--dur-base) var(--ease-out); }
.sx-card__verb { color: color-mix(in srgb, var(--a1) 65%, var(--ink)); font: var(--w-semibold) var(--fs-12) / 1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sx-card__title { color: var(--ink); font-size: var(--fs-24); font-weight: var(--w-bold); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.sx-card__text { color: var(--muted); font-size: var(--fs-14); line-height: var(--lh-ui); }
.sx-card__more { display: inline-flex; align-items: center; gap: var(--s-1); margin-top: auto; padding-top: var(--s-3); color: var(--brand-deep); font-size: var(--fs-14); font-weight: var(--w-semibold); }
.sx-card__more svg { width: 16px; height: 16px; transition: rotate var(--spring-snappy-d) var(--spring-snappy), translate var(--spring-snappy-d) var(--spring-snappy); }
@media (prefers-color-scheme: dark) { .sx-card__verb { color: var(--a1); } .sx-card__more { color: var(--brand-text); } }

/* Hover und Fokus: Anheben, tiefer Schatten, Lichtkegel, Symbol dreht federnd */
@media (hover: hover) and (pointer: fine) {
  .sx-card:hover { translate: 0 -6px; }
  .sx-card:hover::after, .sx-card:hover .sx-card__glow { opacity: 1; }
  .sx-card:hover .sx-card__icon { rotate: -8deg; scale: 1.08; }
  .sx-card:hover .sx-card__icon svg { translate: 0 -1px; }
  .sx-card:hover .sx-card__more svg { translate: 3px 0; }
}
.sx-card:focus-visible { outline: none; translate: 0 -6px; box-shadow: var(--ring), 0 28px 56px -30px color-mix(in srgb, var(--a1) 45%, transparent); }
.sx-card:focus-visible .sx-card__glow { opacity: 1; }
.sx-card:active { scale: .985; }

/* Aktive Phase: Verlaufsrand in voller Stärke, pulsierender Lichtring, gefüllte Nummer, Pfeil zeigt zur Bühne */
.sx-card.is-active { background: linear-gradient(160deg, color-mix(in srgb, var(--surface-card) 94%, transparent), color-mix(in srgb, var(--surface-card) 78%, transparent)) padding-box, linear-gradient(135deg, var(--a1), var(--a2)) border-box; }
.sx-card.is-active::after { opacity: 1; }
.sx-card.is-active::before { content: ""; position: absolute; inset: -1px; z-index: -3; border-radius: inherit; box-shadow: 0 0 0 1px color-mix(in srgb, var(--a1) 55%, transparent), 0 0 24px 2px color-mix(in srgb, var(--a1) 35%, transparent); animation: sx-pulse 2.6s var(--ease-out) infinite; pointer-events: none; }
@keyframes sx-pulse { 0% { opacity: .9; scale: 1; } 70%, 100% { opacity: 0; scale: 1.045; } }
.sx-card.is-active .sx-card__no, .sx-card.is-done .sx-card__no { color: color-mix(in srgb, var(--a1) 20%, transparent); }
.sx-card.is-active .sx-card__more svg { rotate: 90deg; }

/* 07 Regulatorik: Rahmen-Karte quer, gestrichelte Innenkante = „umschließt alle Stationen“ */
.sx-card--frame { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "top verb more" "top title more" "top text more"; column-gap: var(--s-6); row-gap: var(--s-1); align-items: center; padding: var(--s-5) var(--s-6); }
.sx-card--frame .sx-card__top { grid-area: top; flex-direction: column; gap: var(--s-2); margin: 0; }
.sx-card--frame .sx-card__verb { grid-area: verb; } .sx-card--frame .sx-card__title { grid-area: title; } .sx-card--frame .sx-card__text { grid-area: text; }
.sx-card--frame .sx-card__more { grid-area: more; margin: 0; padding: 0; }
.sx-card--frame { outline: 1px dashed color-mix(in srgb, var(--a1) 40%, transparent); outline-offset: -10px; }
.sx-card--frame.is-active { background: linear-gradient(160deg, color-mix(in srgb, var(--surface-card) 94%, transparent), color-mix(in srgb, var(--surface-card) 78%, transparent)) padding-box, var(--gradient) border-box; }
@media (max-width: 699px) { .sx-card--frame { grid-template-columns: 1fr; grid-template-areas: "top" "verb" "title" "text" "more"; } .sx-card--frame .sx-card__top { flex-direction: row; } .sx-card--frame .sx-card__more { padding-top: var(--s-2); } }

/* ---------- Detail-Bühne ---------- */
.sx__stage { position: relative; padding: var(--s-7); border: 1px solid transparent; border-radius: calc(var(--r-lg) + 8px); background: linear-gradient(170deg, color-mix(in srgb, var(--surface-card) 92%, transparent), color-mix(in srgb, var(--surface-card) 74%, transparent)) padding-box, linear-gradient(140deg, color-mix(in srgb, var(--brand) 45%, var(--line)), var(--line) 40%, var(--line) 70%, color-mix(in srgb, var(--tone-green) 35%, var(--line))) border-box; -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-card) 85%, transparent), 0 30px 60px -34px color-mix(in srgb, var(--brand) 45%, transparent); }
.sx__stagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); }
.sx:not(.is-enhanced) .sx__stagebar { display: none; }
.sx:not(.is-enhanced) .sx__stage { display: grid; gap: var(--s-6); }
.sx__phase { margin: 0; color: var(--muted); font: var(--w-semibold) var(--fs-12) / 1.4 var(--mono); letter-spacing: .04em; }
.sx-panel { position: relative; padding-left: var(--s-6); }
.sx-panel::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 4px; border-radius: 4px; background: linear-gradient(var(--a1), var(--a2)); }
.sx-panel:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-md); }
.sx-panel__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.sx-panel__badge { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 70%, var(--sx-shade)), color-mix(in srgb, var(--a2) 70%, var(--sx-shade))); box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--a1) 75%, transparent), inset 0 1px 0 rgb(255 255 255 / .25); color: var(--sx-on); }
.sx-panel__badge svg { width: 30px; height: 30px; }
.sx-panel__kicker { margin: 0 0 2px; color: color-mix(in srgb, var(--a1) 65%, var(--ink)); font: var(--w-semibold) var(--fs-12) / 1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.sx-panel__head h3 { margin: 0; color: var(--ink); font-size: var(--fs-40); line-height: 1.05; letter-spacing: -0.03em; }
.sx-panel__text { max-width: 62ch; margin: 0 0 var(--s-5); color: var(--text); font-size: var(--fs-18); line-height: var(--lh-body); }
.sx-panel__points { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.sx-panel__points li { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-4); border: 1px solid color-mix(in srgb, var(--a1) 22%, var(--line)); border-radius: var(--r-md); background: color-mix(in srgb, var(--a1) 6%, var(--surface-card)); color: var(--ink); font-size: var(--fs-14); font-weight: var(--w-semibold); line-height: var(--lh-ui); transition: translate var(--spring-snappy-d) var(--spring-snappy), border-color var(--dur-fast) var(--ease-out); }
.sx-panel__points svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: color-mix(in srgb, var(--a1) 70%, var(--sx-shade)); }
@media (hover: hover) and (pointer: fine) { .sx-panel__points li:hover { translate: 0 -2px; border-color: color-mix(in srgb, var(--a1) 50%, var(--line)); } }
.sx-panel__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: var(--s-5) 0 0; font-size: var(--fs-14); }
.sx-panel__links > span { color: var(--muted); }
.sx-panel__links a { display: inline-flex; align-items: center; gap: 4px; padding: 6px var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface-card); color: var(--brand-deep); font-weight: var(--w-semibold); text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), scale var(--spring-snappy-d) var(--spring-snappy); }
.sx-panel__links a svg { width: 14px; height: 14px; transition: translate var(--spring-snappy-d) var(--spring-snappy); }
.sx-panel__links a:active { scale: .97; }
@media (hover: hover) and (pointer: fine) { .sx-panel__links a:hover { border-color: var(--brand); } .sx-panel__links a:hover svg { translate: 2px 0; } }
@media (prefers-color-scheme: dark) { .sx-panel__kicker { color: var(--a1); } .sx-panel__links a { color: var(--brand-text); } }
@media (max-width: 699px) { .sx__stage { padding: var(--s-5); } .sx-panel { padding-left: var(--s-4); } .sx-panel__head h3 { font-size: var(--fs-32); } .sx-panel__text { font-size: var(--fs-16); } }

/* ---------- Gestaffeltes Einblenden (JS: .is-armed → .is-in; 7 × 55 ms = 385 ms Staffel) ---------- */
.sx.is-armed .sx-card { opacity: 0; translate: 0 28px; scale: .96; }
.sx.is-armed .sx__track, .sx.is-armed .sx__progress { opacity: 0; }
.sx.is-armed .sx__stage { opacity: 0; translate: 0 24px; }
.sx.is-in .sx-card { opacity: 1; translate: 0 0; scale: 1; transition: opacity var(--spring-gentle-d) var(--spring-gentle), translate var(--spring-gentle-d) var(--spring-gentle), scale var(--spring-gentle-d) var(--spring-gentle); transition-delay: calc(var(--i, 0) * 55ms); }
.sx.is-in .sx__track, .sx.is-in .sx__progress { opacity: 1; transition: opacity 700ms var(--ease-out) 420ms; }
.sx.is-in .sx__stage { opacity: 1; translate: 0 0; transition: opacity var(--spring-gentle-d) var(--spring-gentle) 380ms, translate var(--spring-gentle-d) var(--spring-gentle) 380ms; }

@media (prefers-reduced-motion: reduce) {
  .sx__spark { display: none; }
  .sx-card.is-active::before { animation: none; opacity: .6; }
  .sx.is-armed .sx-card, .sx.is-armed .sx__stage { translate: none; scale: none; }
  .sx-card, .sx-card__icon, .sx-card__icon svg, .sx-card__more svg, .sx__progress { transition-duration: 1ms; }
}
@media print { .sx__thread, .sx__spark { display: none; } .sx-panel[hidden] { display: block !important; } .sx.is-armed .sx-card, .sx.is-armed .sx__stage { opacity: 1 !important; translate: none !important; } }

/* =====================================================================
   SHOWCASE-FILM (vor „7 Säulen“): Bildbühne mit eigenem Rahmen
   Komponenten-Tokens: die Filmpalette (Navy, Cyan #38bdf8, Grün #22c55e) gilt nur in diesem Abschnitt –
   abgestimmt auf den Film (src/static/_film/datenfluss.html). Kontraste (gemessen, schwächste Stelle des Verlaufs):
   Text 15,4:1 · Nebentext 8,2:1 · Cyan 8,4:1 · Grün 7,9:1.
   Dunkles Band: hebt sich hell wie dunkel deutlich vom Markengrund des folgenden 7-Säulen-Abschnitts ab.
   ===================================================================== */
.film-section {
  --film-bg: #070d18; --film-bg-2: #0b1629; --film-cyan: #38bdf8; --film-green: #22c55e; --film-ink: #e6eef6; --film-muted: #9fb0c3; --film-line: rgb(255 255 255 / .12);
  position: relative; overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--film-cyan) 24%, transparent);
  background: radial-gradient(900px 460px at 50% 0%, color-mix(in srgb, var(--film-cyan) 16%, transparent), transparent 70%), radial-gradient(720px 420px at 100% 100%, color-mix(in srgb, var(--film-green) 12%, transparent), transparent 70%), linear-gradient(180deg, var(--film-bg-2), var(--film-bg));
  color: var(--film-ink); color-scheme: dark;
}
.film-section .section__head h2 { color: var(--film-ink); }
.film-section .section__head p { color: var(--film-muted); }
.film-section .eyebrow { color: var(--film-cyan); }
.film-section .accent { background: linear-gradient(90deg, var(--film-cyan), var(--film-green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Rahmen: Verlaufskante Cyan → Grün, weicher Lichthof – nur Schatten und Verlauf, keine Animation */
.film-frame { position: relative; max-width: 1120px; margin: 0 auto; padding: 1px; border-radius: calc(var(--r-lg) + 4px); background: linear-gradient(135deg, color-mix(in srgb, var(--film-cyan) 75%, transparent), var(--film-line) 45%, var(--film-line) 60%, color-mix(in srgb, var(--film-green) 65%, transparent)); box-shadow: 0 30px 80px -32px color-mix(in srgb, var(--film-cyan) 60%, transparent), 0 0 140px -48px color-mix(in srgb, var(--film-green) 55%, transparent); }
.film-frame::before { content: ""; position: absolute; inset: calc(-1 * var(--s-3)); z-index: -1; border: 1px solid var(--film-line); border-radius: calc(var(--r-lg) + 4px + var(--s-3)); pointer-events: none; }
.film-frame__player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: calc(var(--r-lg) + 3px); background: var(--film-bg); }
@media (max-width: 640px) { .film-frame::before { display: none; } }
@media print { .film-frame { display: none; } }

/* =====================================================================
   HERO · LEITTEXT (.hero__lead): ruhige Hierarchie, eine einzige Hervorhebung, sanftes Einblenden
   Absatz 1 trägt die Botschaft (größer, Textfarbe); Absatz 2 tritt zurück (Nebentext, feine Verlaufslinie links).
   Einstieg einmal: beide Absätze kommen gestaffelt aus leichter Unschärfe in die Schärfe, danach zeichnet sich die
   Unterstreichung unter „parsQube“ im Logo-Verlauf – lenkt den Blick genau einmal auf den Namen.
   ===================================================================== */
.hero__lead { max-width: 56ch; }
.hero__lead p { margin: 0; }
.hero__lead p + p { margin-top: var(--s-4); }
.hero__lead p:first-child { color: var(--text); font-size: var(--fs-18); line-height: 1.6; }
.hero__lead p:not(:first-child) { position: relative; padding-left: var(--s-4); color: var(--muted); font-size: var(--fs-16); line-height: var(--lh-body); }
.hero__lead p:not(:first-child)::before { content: ""; position: absolute; top: .3em; bottom: .3em; left: 0; width: 2px; border-radius: 2px; background: linear-gradient(var(--tone-sky), var(--tone-green)); opacity: .7; }
.hero__lead strong { color: var(--ink); font-weight: var(--w-bold); }   /* nur fett – keine Unterstreichung */
@media (prefers-reduced-motion: no-preference) {
  .hero__lead p { animation: lead-in 900ms var(--ease-out) both; }
  .hero__lead p:nth-child(1) { animation-delay: 320ms; }
  .hero__lead p:nth-child(2) { animation-delay: 480ms; }
  .hero__lead p:nth-child(2)::before { animation: lead-rule 900ms var(--spring-gentle, var(--ease-out)) 620ms both; transform-origin: 50% 0; }
}
@keyframes lead-in { from { opacity: 0; translate: 0 10px; filter: blur(6px); } }
@keyframes lead-rule { from { transform: scaleY(0); } }
@media (max-width: 640px) { .hero__lead p:first-child { font-size: var(--fs-16); } .hero__lead p:not(:first-child) { font-size: var(--fs-14); } }

/* =====================================================================
   KARTEN der Startseite – gleiche Basis wie die Säulen-Karten (Glas, Radien, Token-Licht), je Abschnitt eigene Identität:
   Leistungen  → Akzentlinie oben, die sich über die volle Breite zieht, und ein diagonaler Lichtschweif (Lichtbrechung)
   Produkte    → vertikaler Lichtbalken links, der wächst, und eine Linse, die aus dem Symbol aufgeht; Symbol schwebt
   Mehr entdecken → Bildkarten: Bild zunächst gedämpft, beim Hover volle Brillanz mit langsamem Zoom
   Bewegung: nur transform/translate/scale/opacity (Bilder zusätzlich filter), Federkurven aus tokens.css.
   ===================================================================== */
.svc-deck .card, .prod-deck .card, .disc-deck .card {
  position: relative; isolation: isolate; overflow: hidden; border: 1px solid transparent; border-radius: calc(var(--r-lg) + 4px);
  -webkit-backdrop-filter: blur(14px) saturate(1.35); backdrop-filter: blur(14px) saturate(1.35);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-card) 85%, transparent), 0 1px 2px rgb(17 26 36 / .05), 0 14px 30px -18px rgb(17 26 36 / .18);
  transition: translate var(--spring-snappy-d) var(--spring-snappy), scale var(--spring-snappy-d) var(--spring-snappy);
  -webkit-tap-highlight-color: transparent;
}
.svc-deck .card:active, .prod-deck .card:active, .disc-deck .card:active { scale: .985; }
.svc-deck .card:focus-visible, .prod-deck .card:focus-visible, .disc-deck .card:focus-visible { outline: none; box-shadow: var(--ring); }
.svc-deck .card .card__more svg, .prod-deck .card .card__more svg, .disc-deck .card .card__more svg { transition: translate var(--spring-snappy-d) var(--spring-snappy); }

/* ---------- Leistungen: Akzentlinie + Lichtschweif ---------- */
.svc-deck { counter-reset: svc; }
.svc-deck .card {
  --sweep: color-mix(in srgb, var(--surface-card) 70%, transparent);
  counter-increment: svc; padding: var(--s-6) var(--s-5) var(--s-5);
  background: linear-gradient(170deg, color-mix(in srgb, var(--surface-card) 94%, transparent), color-mix(in srgb, var(--surface-card) 76%, transparent)) padding-box,
              linear-gradient(160deg, color-mix(in srgb, var(--brand) 38%, var(--line)), var(--line) 45%, var(--line)) border-box;
}
@media (prefers-color-scheme: dark) { .svc-deck .card { --sweep: color-mix(in srgb, var(--brand) 16%, transparent); } }
.svc-deck .card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--tone-sky), var(--tone-teal), var(--tone-green)); transform: scaleX(.16); transform-origin: 0 50%; transition: transform var(--spring-gentle-d) var(--spring-gentle); }
.svc-deck .card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, var(--sweep) 50%, transparent 70%); translate: -110% 0; transition: translate 950ms var(--ease-out); pointer-events: none; }
.svc-deck .card h3::before { content: counter(svc, decimal-leading-zero); display: block; margin-bottom: var(--s-2); color: var(--brand-text); font: var(--w-semibold) var(--fs-12) / 1 var(--mono); letter-spacing: .08em; }
.svc-deck .card .card__icon { position: relative; transition: rotate var(--spring-snappy-d) var(--spring-snappy), scale var(--spring-snappy-d) var(--spring-snappy); }
.svc-deck .card .card__icon::after { content: ""; position: absolute; inset: -5px; border: 1px solid color-mix(in srgb, var(--brand) 28%, transparent); border-radius: inherit; opacity: 0; scale: .9; transition: opacity var(--dur-base) var(--ease-out), scale var(--spring-snappy-d) var(--spring-snappy); }
@media (hover: hover) and (pointer: fine) {
  .svc-deck .card:hover { translate: 0 -4px; }
  .svc-deck .card:hover::before { transform: scaleX(1); }
  .svc-deck .card:hover::after { translate: 110% 0; }
  .svc-deck .card:hover .card__icon { rotate: -6deg; scale: 1.06; }
  .svc-deck .card:hover .card__icon::after { opacity: 1; scale: 1; }
  .svc-deck .card:hover .card__more svg { translate: 3px 0; }
}
.svc-deck .card:focus-visible::before { transform: scaleX(1); }

/* ---------- Produkte: Lichtbalken links + Linse aus dem Symbol ---------- */
.prod-deck .card {
  padding: var(--s-6) var(--s-5) var(--s-5) calc(var(--s-5) + 6px);
  background: linear-gradient(200deg, color-mix(in srgb, var(--surface-card) 94%, transparent), color-mix(in srgb, var(--surface-card) 78%, transparent)) padding-box,
              linear-gradient(200deg, color-mix(in srgb, var(--tone-green) 40%, var(--line)), var(--line) 50%, color-mix(in srgb, var(--tone-teal) 30%, var(--line))) border-box;
}
/* Lichtbalken: in Ruhe vollständig unsichtbar (vorher auf 35 % verkürzt – das hinterließ oben links eine kurze Linie) */
.prod-deck .card::before { content: ""; position: absolute; top: var(--s-4); bottom: var(--s-4); left: 0; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(var(--tone-teal), var(--tone-green)); opacity: 0; transform: scaleY(0); transform-origin: 50% 0; transition: transform var(--spring-gentle-d) var(--spring-gentle), opacity var(--dur-fast) var(--ease-out); }
.prod-deck .card::after { content: ""; position: absolute; top: -40%; left: -30%; z-index: -1; width: 90%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--tone-green) 22%, transparent), transparent); opacity: 0; scale: .6; transition: opacity var(--dur-slow) var(--ease-out), scale var(--spring-gentle-d) var(--spring-gentle); pointer-events: none; }
.prod-deck .card .card__icon { transition: translate var(--spring-snappy-d) var(--spring-snappy), scale var(--spring-snappy-d) var(--spring-snappy); }
.prod-deck .card h3 { transition: translate var(--spring-snappy-d) var(--spring-snappy); }
@media (hover: hover) and (pointer: fine) {
  .prod-deck .card:hover { translate: 0 -3px; }
  .prod-deck .card:hover::before { opacity: 1; transform: scaleY(1); }
  .prod-deck .card:hover::after { opacity: 1; scale: 1; }
  .prod-deck .card:hover .card__icon { translate: 0 -4px; scale: 1.08; }
  .prod-deck .card:hover h3 { translate: 2px 0; }
  .prod-deck .card:hover .card__more svg { translate: 3px 0; }
}
.prod-deck .card:focus-visible::before { opacity: 1; transform: scaleY(1); }

/* ---------- Mehr entdecken: Bildkarten, Bild gedämpft → volle Brillanz ---------- */
.disc-deck .card.discover {
  display: flex; flex-direction: column; gap: var(--s-2); padding: 0 0 var(--s-5); overflow: visible;   /* nicht beschneiden: sonst wäre der Hover-Schatten unsichtbar – das Bild hat einen eigenen Ausschnitt */
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-card) 96%, transparent), color-mix(in srgb, var(--surface-card) 82%, transparent)) padding-box,
              linear-gradient(150deg, color-mix(in srgb, var(--tone-violet) 32%, var(--line)), var(--line) 45%, color-mix(in srgb, var(--tone-sky) 30%, var(--line))) border-box;
}
.disc-deck .card.discover::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: 0 30px 56px -28px color-mix(in srgb, var(--tone-violet) 45%, transparent); opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); pointer-events: none; }
/* die allgemeine Karten-Akzentlinie am oberen Rand (site.css › .card::before) hier abschalten – sie erschien beim Hover */
.disc-deck .card.discover::before { content: none; display: none; }
.disc-deck .discover__media { display: block; overflow: hidden; margin: 0 0 var(--s-3); border-radius: calc(var(--r-lg) + 3px) calc(var(--r-lg) + 3px) 0 0; }
.disc-deck .discover__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 0; object-fit: cover; border-radius: 0; filter: brightness(.72) contrast(.92) saturate(.72); transform-origin: 50% 60%; transition: filter 700ms var(--ease-out), scale 1100ms var(--ease-out); }
.disc-deck .card.discover > h3, .disc-deck .card.discover > .card__more { margin-inline: var(--s-5); }
.disc-deck .card.discover > .card__more { margin-top: auto; }
.disc-deck .card.discover > h3 { position: relative; width: fit-content; }
.disc-deck .card.discover > h3::after { content: ""; position: absolute; right: 0; bottom: -4px; left: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--tone-violet), var(--tone-sky)); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--spring-gentle-d) var(--spring-gentle); }
@media (hover: hover) and (pointer: fine) {
  .disc-deck .card.discover:hover { translate: 0 -4px; }
  .disc-deck .card.discover:hover::after { opacity: 1; }
  .disc-deck .card.discover:hover .discover__img { filter: brightness(1) contrast(1) saturate(1); scale: 1.045; }
  .disc-deck .card.discover:hover > h3::after { transform: scaleX(1); }
  .disc-deck .card.discover:hover .card__more svg { translate: 3px 0; }
}
.disc-deck .card.discover:focus-visible .discover__img { filter: brightness(1) contrast(1) saturate(1); }
/* Touch: kein Hover – Bilder dort gleich in voller Brillanz, sonst bliebe die Abdunklung dauerhaft */
@media (hover: none) { .disc-deck .discover__img { filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .svc-deck .card::after, .prod-deck .card::after { display: none; }
  .svc-deck .card, .prod-deck .card, .disc-deck .card, .svc-deck .card::before, .prod-deck .card::before, .disc-deck .discover__img, .disc-deck .card.discover > h3::after { transition-duration: 1ms; }
  .disc-deck .card.discover:hover .discover__img { scale: 1; }
}

/* =====================================================================
   ABSCHNITTS-LEISTE (Section-Rail) – linker Bildschirmrand der Startseite
   Verhalten: assets/js/pipeline/rail.js · Werte aus tokens.css (Raster, Federkurven, Markentöne).
   Ruhezustand: 1 px Linie mit 5 px Knoten. Neugier: ein Schimmer läuft gelegentlich die Linie hinab, nahe Knoten
   wachsen dem Zeiger entgegen. Hover/Fokus: Glas-Badge klappt mit Federkurve nach rechts auf.
   ===================================================================== */
.rail {
  --rail-h: min(62vh, 520px);
  --rail-cyan: #38bdf8; --rail-green: #22c55e;                  /* Dark-Tech-Akzente wie im Showcase-Film */
  --rail-line: color-mix(in srgb, var(--ink) 18%, transparent);
  --rail-knot: color-mix(in srgb, var(--ink) 38%, transparent);
  --rail-glass: rgb(9 17 28 / .72); --rail-glass-ink: #e6eef6; --rail-glass-edge: rgb(255 255 255 / .12);
  position: fixed; left: var(--s-5); top: 50%; z-index: 90; transform: translateY(-50%);
  width: calc(var(--s-4) + 14px); height: var(--rail-h);
  pointer-events: none;                                          /* nur Punkte und Badges sind klickbar */
}
@media (prefers-color-scheme: dark) { .rail { --rail-line: rgb(255 255 255 / .16); --rail-knot: rgb(255 255 255 / .42); } }
.rail__svg { position: absolute; top: 0; left: 0; width: 28px; height: var(--rail-h); overflow: visible; }
.rail__stop--a { stop-color: var(--rail-cyan); } .rail__stop--b { stop-color: var(--rail-green); }
.rail__track, .rail__fill, .rail__shimmer { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rail__track { stroke: var(--rail-line); stroke-width: 1; }
.rail__fill { stroke: url(#rail-g); stroke-width: 1.5; stroke-dasharray: 1000 1000; stroke-dashoffset: 1000; opacity: .9; }
/* Schimmer: ein kurzer Lichtstreif wandert alle paar Sekunden die Linie hinab – signalisiert „hier passiert etwas“ */
.rail__shimmer { stroke: var(--rail-cyan); stroke-width: 2; stroke-dasharray: 70 1000; stroke-dashoffset: 1070; opacity: 0; filter: drop-shadow(0 0 3px var(--rail-cyan)); animation: rail-shimmer 7.5s var(--ease-in-out) 2.4s infinite; }
@keyframes rail-shimmer { 0% { stroke-dashoffset: 1070; opacity: 0; } 6% { opacity: .75; } 30% { opacity: .55; } 38% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }

/* ohne JavaScript: gleichmäßig verteilte Sprunglinks entlang einer CSS-Linie */
.rail__list { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.rail:not(.is-live) .rail__list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6.5px; width: 1px; background: var(--rail-line); }
.rail__item { position: relative; height: 0; margin: 0; }
.rail.is-live .rail__item { position: absolute; top: var(--y); left: 0; }
.rail__dot { --pull: 0; --grow: 1;
  position: absolute; top: -14px; left: -7px; display: grid; place-items: center; width: 28px; height: 28px;
  border-radius: 50%; color: inherit; text-decoration: none; pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; }
.rail__item .rail__dot { transform: translateX(calc(var(--pull) * 1px)); }
.rail__knot { width: 5px; height: 5px; border-radius: 50%; background: var(--rail-knot); transform: scale(var(--grow)); transition: background var(--dur-fast) var(--ease-out), transform var(--spring-snappy-d) var(--spring-snappy); }
.rail__item.is-passed .rail__knot { background: color-mix(in srgb, var(--rail-cyan) 65%, var(--rail-knot)); }
.rail__dot:hover .rail__knot, .rail__dot:focus-visible .rail__knot { background: var(--rail-cyan); transform: scale(calc(var(--grow) * 1.9)); }
.rail__dot.is-active .rail__knot { background: transparent; }       /* den aktiven Knoten übernimmt der Indikator */
.rail__dot.is-press .rail__knot { animation: rail-press var(--spring-snappy-d) var(--spring-snappy); }
@keyframes rail-press { 0% { transform: scale(calc(var(--grow) * .6)); } 100% { transform: scale(calc(var(--grow) * 1.9)); } }
.rail__dot:focus-visible::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; box-shadow: var(--ring); }

/* mitwandernder Indikator: Kern + weicher Schein (Schein über opacity, nie box-shadow animieren) */
.rail__indicator { position: absolute; top: -5px; left: 1.5px; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, var(--rail-cyan), var(--rail-green)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 85%, transparent); opacity: 0; will-change: transform; }
.rail__indicator::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--rail-cyan) 55%, transparent), transparent); animation: rail-breathe 3.2s var(--ease-in-out) infinite; }
@keyframes rail-breathe { 50% { opacity: .45; transform: scale(.82); } }
.rail.is-live .rail__indicator { opacity: 1; transition: opacity var(--dur-slow) var(--ease-out); }

/* Glas-Badge: klappt nach rechts auf – Federkurve mit Überschwingen; Abschluss (Schließen) schneller und ohne Feder */
.rail__badge {
  position: absolute; left: calc(100% + 2px); top: 50%;
  padding: 6px 12px 6px 10px; border: 1px solid var(--rail-glass-edge); border-radius: var(--r-full);
  background: var(--rail-glass); color: var(--rail-glass-ink);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 8px 24px -10px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .08);
  font: var(--w-semibold) var(--fs-12) / 1.2 var(--sans); letter-spacing: .01em; white-space: nowrap;
  -webkit-font-smoothing: antialiased;
  pointer-events: none; opacity: 0; transform-origin: left center;
  transform: translate(-6px, -50%) scale(.86, .7); clip-path: inset(0 100% 0 0 round var(--r-full));
  transition: opacity 140ms var(--ease-out), transform 160ms var(--ease-out), clip-path 160ms var(--ease-out);
}
.rail__badge::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: linear-gradient(135deg, var(--rail-cyan), var(--rail-green)); box-shadow: 0 0 8px var(--rail-cyan); }
.rail__dot:hover .rail__badge, .rail__dot:focus-visible .rail__badge {
  opacity: 1; transform: translate(0, -50%) scale(1); clip-path: inset(0 0 0 0 round var(--r-full));
  transition: opacity 120ms var(--ease-out), transform var(--spring-snappy-d) var(--spring-snappy), clip-path 260ms var(--ease-out);
}
@media (prefers-reduced-transparency: reduce) { .rail__badge { background: rgb(9 17 28 / .96); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Einstieg: Knoten erscheinen gestaffelt (insgesamt < 400 ms) */
.rail.is-live .rail__knot { animation: rail-in 420ms var(--spring-snappy) both; animation-delay: calc(var(--i, 0) * 32ms + 200ms); }
@keyframes rail-in { from { transform: scale(0); opacity: 0; } }

/* nur, wo links neben dem Inhalt Platz ist und ein Zeiger zur Verfügung steht */
@media (max-width: 1099px), (hover: none) { .rail { display: none; } }
section[tabindex="-1"]:focus { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .rail__shimmer, .rail__indicator::after { animation: none; }
  .rail.is-live .rail__knot { animation: none; }
  .rail__badge, .rail__dot:hover .rail__badge, .rail__dot:focus-visible .rail__badge { transition-duration: 1ms; }
}