/* MHP "Drei Schritte", Buehnen-Variante. Die 3D-Szene traegt die ganze
   Sektion; alles Bedienbare liegt in EINER Glastafel auf der Szene.
   Testseite /so-funktioniert-es/system-3d-canvas, im Seitenkopf verlinkt.
   Bewegung: Werte aus transitions-dev (_root.css Tokens, 21-accordion). */

/* ── Reste aus der System-Seite, die diese Seite noch braucht ── */
.sys-hero-copy > div:first-child { color: #26223b; max-width: 600px; }
@media (min-width:992px) and (max-width:1099px) { .sys-hero-copy .heading { font-size: 4.4vw; } }
@media (min-width:1100px) and (max-width:1279px) { .sys-hero-copy .heading { font-size: 4.9vw; } }
.sys-faq-q, .sys-pay-arrow { border: 0; font-family: inherit; }
.sys-pay-arrow-prev { border: 1px solid #b8b8b8; }
.sys-pay-cards::-webkit-scrollbar { display: none; }
.sys-faq-panel { transition: grid-template-rows 250ms cubic-bezier(0.22,1,0.36,1); }
[data-faq-item][data-open="true"] .sys-faq-panel { grid-template-rows: 1fr; }
.sys-faq-panel-inner { opacity: 0; filter: blur(2px); transition: opacity 250ms cubic-bezier(0.22,1,0.36,1), filter 250ms cubic-bezier(0.22,1,0.36,1); }
[data-faq-item][data-open="true"] .sys-faq-panel-inner { opacity: 1; filter: blur(0); }
.sys-faq-chevron { transform: scaleY(1); transform-origin: center; transition: transform 250ms cubic-bezier(0.22,1,0.36,1); }
[data-faq-item][data-open="true"] .sys-faq-chevron { transform: scaleY(-1); }
[data-odometer-element] { display: inline-flex; align-items: center; font-variant-numeric: tabular-nums; }
[data-odometer-part="mask"], [data-odometer-part="static"] { display: inline-block; overflow: clip; padding: 0.05em; margin: -0.05em; }
[data-odometer-part="roller"] { display: block; white-space: pre; text-align: center; will-change: transform; }
[data-odometer-part="static"] { display: inline-block; }

/* ── Buehne ─────────────────────────────────────────────────────
   Volle Containerbreite, auf Desktop feste Hoehe. Das Seitenverhaeltnis
   darf sich aendern, der Player rechnet das Kameraziel aus der aktuellen
   Groesse, damit die Bildaufteilung gleich bleibt. */
.sys-steps-tabs { position: relative; }
.sys-scene-3d { position: relative; width: 100%; max-width: none; aspect-ratio: 1648.76/769; overflow: hidden; border-radius: 16px; }
@media (min-width:992px) { .sys-scene-3d { aspect-ratio: auto; height: min(72svh, 760px); } }
@media (min-width:992px) and (max-height:900px) {
  .sys-scene-3d { height: min(66svh, 600px); }
  .section-sys-steps { padding-top: calc(var(--_mhp-tokens---section--nav-offset, 88px) + 28px); padding-bottom: 40px; }
  .sys-steps-head { margin-bottom: 16px; }
  .sys-steps-head .heading { font-size: 2.25rem; }
}
.sys-scene-3d canvas, .sys-scene-3d-poster {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; object-fit: cover; z-index: 0;
}
/* Stapelung ausdruecklich: der Canvas kommt vom Modul in den DOM und laege
   sonst ueber der Textebene (er ist transparent, der Text blitzte nur durch). */
.sys-scene-3d-lines { z-index: 1; }
.sys-scene-3d-layer { z-index: 2; }
.sys-scene-3d canvas { opacity: 0; transition: opacity 400ms cubic-bezier(0.22,1,0.36,1); }
.sys-scene-3d[data-scene3d="ready"] canvas { opacity: 1; }
.sys-scene-3d-poster { transition: opacity 250ms cubic-bezier(0.22,1,0.36,1); }
.sys-scene-3d[data-scene3d="ready"] .sys-scene-3d-poster { opacity: 0; }

/* ── Glastafel ─────────────────────────────────────────────────
   Eine Tafel, feste Stelle links (die Bildaufteilung haelt Auto und Person
   rechts davon). Oben die Reiter, darunter der Inhalt des Schritts. Die
   drei Inhaltsbloecke liegen per Grid uebereinander, damit die Tafel die
   Hoehe des laengsten Blocks behaelt und beim Wechsel nicht springt. */
.sys-steps-tabs .sys-scene-3d-copy {
  position: absolute; left: 4%; top: 50%; transform: translateY(-50%);
  width: min(41%, 470px); max-height: 92%; height: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; align-items: start;
  padding: 22px 28px 20px;
  background-color: rgba(253,253,253,0.66);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid rgba(38,34,59,0.10);
  border-radius: 16px;
  pointer-events: auto;
}

/* Reiter: Nummer, Name, darunter eine 2px-Spur, die den Fortschritt fuellt. */
.sys-scene-3d-steps { grid-row: 1; grid-column: 1; display: flex; justify-content: space-between; column-gap: 18px; margin-bottom: 18px; border-bottom: 1px solid rgba(38,34,59,0.12); }
/* Reiter in natuerlicher Breite, sonst wird "Parken & bezahlen" abgeschnitten. */
.sys-scene-3d-step {
  position: relative; flex: 0 1 auto; min-width: 0; display: flex; align-items: baseline; column-gap: 7px;
  padding: 2px 0 12px; text-decoration: none; white-space: nowrap;
  color: rgba(38,34,59,0.45); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.2;
  transition: color 250ms cubic-bezier(0.22,1,0.36,1);
}
.sys-scene-3d-step:hover { color: rgba(38,34,59,0.8); }
.sys-scene-3d-step.is-active { color: #26223b; }
.sys-scene-3d-step.is-done { color: rgba(38,34,59,0.7); }
.sys-scene-3d-step:focus-visible { outline: 2px solid #5e45f8; outline-offset: 4px; border-radius: 4px; }
.sys-scene-3d-step-num { color: #5e45f8; font-variant-numeric: tabular-nums; }
.sys-scene-3d-step.is-active .sys-scene-3d-step-num,
.sys-scene-3d-step.is-done .sys-scene-3d-step-num { color: #5e45f8; }
.sys-scene-3d-step:not(.is-active):not(.is-done) .sys-scene-3d-step-num { color: rgba(94,69,248,0.45); }
.sys-scene-3d-step-track { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.sys-scene-3d-step-fill { display: block; width: 100%; height: 100%; background-color: #5e45f8; transform: scaleX(0); transform-origin: 0 50%; }

/* Inhalt: Ueberblendung des ganzen Blocks (Tokens: 150 ms, 4 px, 2 px Blur). */
.sys-scene-3d-copy-item, .sys-steps-tabs .sys-scene-3d-copy-item {
  position: relative; left: auto; top: auto; max-width: none;
  grid-row: 2; grid-column: 1; min-width: 0;
  opacity: 0; transform: translateY(4px); filter: blur(2px);
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out, filter 150ms ease-in-out, visibility 0s linear 150ms;
  visibility: hidden; pointer-events: none;
}
.sys-steps-tabs .sys-scene-3d-copy-item.is-shown {
  opacity: 1; transform: translateY(0); filter: blur(0);
  visibility: visible; pointer-events: auto; transition-delay: 0s;
}
.sys-steps-tabs .t-stagger-line { opacity: 1; transform: none; filter: none; transition: none; }
.sys-scene-3d-title {
  margin: 0 0 10px; color: #26223b; font-weight: 700; line-height: 1.08; letter-spacing: -0.035em;
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem);
}
.sys-steps-tabs .sys-steps-copy {
  margin: 0 0 16px; color: #535862; font-size: 0.9375rem; line-height: 1.55; letter-spacing: -0.01em;
}

/* Fragen: kompakte Ausklapper mit Haarlinien (transitions-dev 21:
   grid-template-rows 0fr -> 1fr, 250 ms, Inhalt mit Weichzeichnung). */
.sys-steps-tabs .sys-steps-qa { display: block; border-top: 1px solid rgba(38,34,59,0.12); }
.sys-steps-tabs .sys-steps-qa-item {
  display: grid; grid-template-rows: auto 0fr; opacity: 1; transform: none;
  border-bottom: 1px solid rgba(38,34,59,0.12);
  transition: grid-template-rows 250ms cubic-bezier(0.22,1,0.36,1);
}
.sys-steps-tabs .sys-steps-qa-item[data-open="true"] { grid-template-rows: auto 1fr; }
.sys-steps-tabs .sys-steps-q {
  position: relative; margin: 0; padding: 10px 26px 10px 0; cursor: pointer;
  color: #26223b; font-size: 0.9375rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em;
  transition: color 250ms cubic-bezier(0.22,1,0.36,1);
}
.sys-steps-tabs .sys-steps-q:hover { color: #5e45f8; }
.sys-steps-tabs .sys-steps-q:focus-visible { outline: 2px solid #5e45f8; outline-offset: 2px; border-radius: 4px; }
/* Chevron aus zwei Kanten; klappt wie im Snippet per scaleY um. */
.sys-steps-tabs .sys-steps-q::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg); transform-origin: center;
  transition: transform 250ms cubic-bezier(0.22,1,0.36,1);
}
.sys-steps-tabs .sys-steps-qa-item[data-open="true"] .sys-steps-q::after { transform: translateY(-20%) rotate(45deg) scaleY(-1) scaleX(-1); }
.sys-steps-tabs .sys-steps-a {
  margin: 0; min-height: 0; overflow: hidden; padding-bottom: 0;
  color: #535862; font-size: 0.875rem; line-height: 1.55; letter-spacing: -0.01em;
  opacity: 0; filter: blur(2px);
  transition: opacity 250ms cubic-bezier(0.22,1,0.36,1), filter 250ms cubic-bezier(0.22,1,0.36,1), padding-bottom 250ms cubic-bezier(0.22,1,0.36,1);
}
.sys-steps-tabs .sys-steps-qa-item[data-open="true"] .sys-steps-a { opacity: 1; filter: blur(0); padding-bottom: 12px; }

/* Beschriftungen am Modell: Punkt am Anker, senkrechte Haarlinie, Text als
   kleines Glasschild darueber oder darunter; Position und Zeitfenster setzt das
   Modul. Ein- und Ausblenden: transitions-dev "Texts reveal" (18), Punkt und
   Linie folgen mit dem Text-Swap-Takt (150 ms). */
:root {
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.sys-scene-3d-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sys-scene-3d-lines path { fill: none; stroke: rgba(38,34,59,0.42); stroke-width: 1; opacity: 0; transition: opacity 150ms ease-in-out; }
.sys-scene-3d-lines circle { fill: #5e45f8; stroke: #fdfdfd; stroke-width: 2; opacity: 0; transition: opacity 150ms ease-in-out; }
.sys-scene-3d-lines path.is-shown, .sys-scene-3d-lines circle.is-shown { opacity: 1; }
.sys-scene-3d-note {
  position: absolute; left: 0; top: 0; margin: 0; pointer-events: none;
  padding: 6px 10px; border: 1px solid rgba(38,34,59,0.14); border-radius: 2px;
  background-color: rgba(253,253,253,0.78);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #26223b; font-size: 0.8125rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; white-space: nowrap;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
.sys-scene-3d-note.is-shown { opacity: 1; transform: translateY(0); filter: blur(0); }
/* Ausblenden entkoppelt vom Einblenden: nur ein kurzes Fade, kein Weg zurueck
   nach unten, kein Blur, damit das Verschwinden nicht wie ein Rueckwaertslauf wirkt. */
.sys-scene-3d-note.is-hiding {
  opacity: 0; transform: translateY(0); filter: blur(0);
  transition: opacity 200ms ease, transform 0s linear, filter 0s linear;
  transition-delay: 0s;
}

/* Schmale Viewports: die Buehne wird quadratisch (eigener Ausschnitt aus
   views.json steps.*.mobile), die Steuerung schiebt die Tafel als Geschwister
   direkt dahinter. Beschriftungen bleiben, nur kleiner. */
@media (max-width:767px) {
  .sys-scene-3d { height: auto; aspect-ratio: 1 / 1; border-radius: 0; }
  .sys-steps-tabs .sys-scene-3d-copy {
    position: static; transform: none; width: 100%; max-width: none; max-height: none;
    margin: 12px 0 0; padding: 14px 0 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background-color: transparent; border: 0; border-top: 1px solid rgba(38,34,59,0.12); border-radius: 0;
  }
  .sys-scene-3d-steps { column-gap: 12px; margin-bottom: 14px; }
  .sys-scene-3d-step { font-size: 0.75rem; column-gap: 5px; }
  .sys-scene-3d-note { font-size: 0.75rem; padding: 4px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .sys-scene-3d canvas, .sys-scene-3d-poster, .sys-scene-3d-note, .sys-scene-3d-lines path, .sys-scene-3d-lines circle, .sys-scene-3d-step,
  .sys-steps-tabs .sys-scene-3d-copy-item, .sys-steps-tabs .sys-steps-qa-item, .sys-steps-tabs .sys-steps-q::after, .sys-steps-tabs .sys-steps-a,
  .sys-faq-panel, .sys-faq-panel-inner, .sys-faq-chevron { transition: none !important; }
}