/* 04-leasing — Dienstradleasing: Kopf wie überall, darunter der Ablauf als Karten-Stapel (seit 23.09.2026, Kundenwunsch
   nach der Vorlage „OnboardCard"; vorher Band-Roadmap mit Laschen, gesichert im Sitzungs-Scratchpad). Papierfläche. */
.rad-leasing{--rad-stagger:80ms}
/* 19.09.2026: Kopf oben buendig statt unten — die zweizeilige Headline und der Fliesstext rechts sollen auf
   derselben Oberkante starten (.rad-head richtet sonst an der Unterkante aus). */
.rad-leasing__head{align-items:flex-start}
.rad-leasing__lead{flex:0 1 30em;max-width:30em;padding-bottom:0;display:flex;flex-direction:column;align-items:flex-start}
.rad-leasing__lead>p{font-size:var(--vn-text-base);line-height:1.65;text-wrap:pretty}
.rad-leasing__lead .rad-text-link{margin-top:14px}
/* 22.09.2026 (Kundenwunsch): statt der Textzeile „Leasing anfragen" derselbe Knopf wie in den Sektionen davor
   („Alle Leistungen ansehen", „Alle Bike-Kategorien ansehen") — rechtsbuendig unter dem Text, gleiche Kante. */
.rad-leasing__all{margin-top:20px;align-self:flex-end}
@media(max-width:1000px){
  .rad-leasing .rad-head{flex-direction:column;align-items:stretch;gap:20px}
  /* flex-basis wirkt im gestapelten Kopf auf die HÖHE — ohne auto stünde unter dem Lead ein 30em hoher Leerraum */
  .rad-leasing__lead{flex:0 1 auto;padding-bottom:0}
}

/* ---------- Karten-Stapel (aus der Vorschau 04v-leasing-stapel übernommen) ---------- */
.rad-lst{--karte-h:clamp(150px,11.5vw,184px);--vorher-sicht:46px;--oben:calc(var(--vorher-sicht) + 24px)}
.rad-lst__buehne{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(40px,5vw,80px)}

/* Stapel: feste Höhe, drei Plätze (oben / Mitte / unten); oben und unten Verlauf in den Sektionsgrund wie in der Vorlage */
/* Geometrie (23.09.2026, Kundenwunsch): die aktive Karte ist der Anker — sie steht mittig im Fenster (Skript setzt die
   Klebekante) und überlappt die vorige Karte, die nur noch mit --vorher-sicht oben herausschaut. Unten wie gehabt. */
.rad-lst__stapel{position:relative;height:calc(var(--oben) + var(--karte-h) * 1.9 + 28px);margin:0;padding:0;list-style:none}
.rad-lst__stapel::before,.rad-lst__stapel::after{content:"";position:absolute;left:-2px;right:-2px;z-index:5;pointer-events:none}
.rad-lst__stapel::before{top:0;height:calc(var(--oben) - 10px);background:linear-gradient(180deg,var(--vn-color-surface-light) 10%,transparent)}
.rad-lst__stapel::after{bottom:0;height:calc(var(--karte-h) * .55);background:linear-gradient(0deg,var(--vn-color-surface-light) 12%,transparent)}

.rad-lst__karte{position:absolute;left:0;right:0;top:var(--oben);display:flex;flex-direction:column;gap:12px;
  padding:18px 26px 20px 22px;border:1px solid var(--vn-color-divider-light);border-radius:var(--vn-radius-lg,18px);
  background:linear-gradient(135deg,#FFFFFF 0%,var(--vn-color-paper) 100%);color:var(--vn-color-ink);
  transform-origin:50% 0;will-change:transform,opacity,filter;
  transition:transform 900ms var(--vn-ease-in-out),opacity 900ms var(--vn-ease-in-out),filter 900ms var(--vn-ease-in-out)}
.rad-lst__kopf{display:flex;align-items:center;gap:12px;min-width:0}
.rad-lst__zeichen{position:relative;flex:none;width:22px;height:22px;color:var(--vn-color-accent)}
.rad-lst__zeichen svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity 400ms ease}
.rad-lst__haken{opacity:0;color:var(--vn-color-accent)}
.rad-lst__titel{margin:0;font:var(--rad-w-h3) var(--rad-fs-h3-klein)/var(--rad-lh-h3) var(--vn-font-display);letter-spacing:var(--rad-ls-h3);min-width:0}
.rad-lst__text{margin:0 0 0 34px;font:400 var(--vn-text-sm)/1.55 var(--vn-font-body);color:var(--vn-color-ink-muted);max-width:44em;
  transition:opacity 500ms ease}
/* Balken eingerückt unter dem Titel wie in der Vorlage (ml-5) */
.rad-lst__balken{margin-top:auto;margin-left:34px;height:6px;border-radius:999px;background:color-mix(in srgb,var(--vn-color-surface-dark) 9%,transparent);overflow:hidden}
.rad-lst__fuellung{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--vn-color-accent),var(--vn-color-accent-on-dark))}

/* Zustände (00-Skript setzt data-platz). Karten ausserhalb liegen unsichtbar über bzw. unter dem Stapel. */
.rad-lst.ist-bereit .rad-lst__karte{opacity:0;transform:translateY(calc(var(--karte-h) * 1.9 + 60px)) scale(.82)}
.rad-lst.ist-bereit .rad-lst__karte[data-platz="oben-weg"]{transform:translateY(calc(-1 * var(--oben) - 30px)) scale(.82);filter:blur(4px)}
.rad-lst.ist-bereit .rad-lst__karte[data-platz="vorher"]{opacity:.55;z-index:1;transform:translateY(calc(-1 * var(--vorher-sicht))) scale(.9);filter:blur(2.5px)}
.rad-lst.ist-bereit .rad-lst__karte[data-platz="jetzt"]{opacity:1;z-index:3;transform:none;
  box-shadow:0 18px 40px -24px color-mix(in srgb,var(--vn-color-ink) 45%,transparent)}
.rad-lst.ist-bereit .rad-lst__karte[data-platz="danach"]{opacity:.62;z-index:1;transform:translateY(calc(var(--karte-h) + 28px)) scale(.9)}
.rad-lst.ist-bereit .rad-lst__karte.ohne-weg{transition:none}
/* Alle Karten behalten ihren Text und sind gleich hoch (Kundenwunsch 23.09.2026: die Karte darf beim Blättern nicht
   schrumpfen) — vorher/danach sind nur skaliert und blass. */
.rad-lst.ist-bereit .rad-lst__karte{min-height:var(--karte-h)}
.rad-lst.ist-messen .rad-lst__karte{min-height:0!important}
/* Zeichen je Zustand: erledigt = Haken, jetzt = drehendes Laufrad, danach = ruhendes Laufrad */
.rad-lst__karte.ist-erledigt .rad-lst__rad{opacity:0}
.rad-lst__karte.ist-erledigt .rad-lst__haken{opacity:1}
.rad-lst__karte.ist-erledigt .rad-lst__fuellung{width:100%}
.rad-lst__karte[data-platz="danach"] .rad-lst__zeichen,.rad-lst__karte[data-platz="unten-weg"] .rad-lst__zeichen{color:color-mix(in srgb,var(--vn-color-ink) 35%,transparent)}
.rad-lst__karte[data-platz="jetzt"] .rad-lst__rad{animation:rad-lst-dreh 1.6s linear infinite}
@keyframes rad-lst-dreh{to{transform:rotate(360deg)}}

/* Foto rechts: die vier vorhandenen Leasing-Bilder, weich übergeblendet zum aktiven Schritt */
.rad-lst__fotos{position:relative;z-index:6;aspect-ratio:1;border-radius:var(--vn-radius-xl,24px);overflow:hidden;background:var(--vn-color-surface-dark)}
.rad-lst__foto{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transform:scale(1.04);
  transition:opacity 900ms var(--vn-ease-in-out),transform 6s linear}
.rad-lst__foto.ist-aktiv{opacity:1;transform:scale(1)}
.rad-lst__fotos::after{content:"";position:absolute;inset:auto 0 0;height:34%;background:linear-gradient(0deg,rgba(12,12,10,.55),transparent);pointer-events:none}
/* Scroll-Strecke: die Bühne klebt mittig im Fenster, die Strecke darum ist so lang wie drei Blätterschritte (je --schritt).
   Das Skript rechnet den Fortschritt (0…1) aus der Lage der Strecke und setzt daraus Karte und Balken. */
.rad-lst{--schritt:62vh}
.rad-lst.ist-bereit .rad-lst__strecke{position:relative;height:calc(var(--buehne-h,640px) + 3 * var(--schritt))}
.rad-lst.ist-bereit .rad-lst__buehne{position:sticky;top:var(--kleben,100px);margin-top:0}
.rad-lst.ist-bereit .rad-lst__strecke{margin-top:clamp(40px,5vw,80px)}
.rad-lst.ist-bereit .rad-lst__karte[data-platz="jetzt"] .rad-lst__fuellung{width:calc(var(--fuell,0) * 100%)}

/* Ohne JS / reduzierte Bewegung: ruhige Liste, alle vier Schritte voll sichtbar */
.rad-lst:not(.ist-bereit) .rad-lst__stapel{height:auto;display:flex;flex-direction:column;gap:14px}
.rad-lst:not(.ist-bereit) .rad-lst__stapel::before,.rad-lst:not(.ist-bereit) .rad-lst__stapel::after{display:none}
.rad-lst:not(.ist-bereit) .rad-lst__karte{position:relative;top:auto}
.rad-lst:not(.ist-bereit) .rad-lst__balken{display:none}
.rad-lst:not(.ist-bereit) .rad-lst__foto:first-child{opacity:1}

@media(max-width:900px){
  .rad-lst__buehne{grid-template-columns:1fr}
  .rad-lst__fotos{order:-1;aspect-ratio:16/9}
  /* Handy/Tablet: Foto liegt über dem Stapel — was nach oben wegblättert, verschwindet hinter dem Bild statt darüber;
     der obere Verlauf des Stapels entfällt deshalb, er würde über das Bild ragen */
  .rad-lst__stapel::before{display:none}
  .rad-lst{--vorher-sicht:36px;--oben:calc(var(--vorher-sicht) + 12px)}
  .rad-lst__buehne{gap:16px}
}
@media(max-width:560px){
  .rad-lst__karte{padding:16px 18px 18px 16px}
  .rad-lst__text,.rad-lst__balken{margin-left:0}
}

/* Mitlaufende Überschrift (23.09.2026, Kundenwunsch): Auf dem Desktop scrollt „Dienstradleasing in Wolfsberg" mit, bis sie
   als Überschrift über dem Stapel stehen bleibt — dort, wo die vorigen Karten nach oben verschwinden. Umsetzung: der Kopf
   löst sich auf (display:contents), Titel und Lead werden Rasterzellen der Shell; die Titelzelle reicht über die ganze
   Stapelstrecke (Zeile 1–2), damit die sticky-h2 darin bis zum Ende der Strecke kleben kann. Klebekante der h2 =
   Klebekante der Bühne minus h2-Höhe minus 28 px (beides setzt 04-leasing.js). Handy/Tablet: Kopf wie bisher. */
@media(min-width:901px){
  .rad-leasing.ist-klebend .rad-shell{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px}
  .rad-leasing.ist-klebend .rad-leasing__head{display:contents}
  .rad-leasing.ist-klebend .rad-leasing__title-wrap{grid-column:1;grid-row:1 / span 2;position:relative;z-index:7;pointer-events:none;
    margin-bottom:calc(var(--buehne-h) + 28px)}   /* Zelle endet so, dass h2 und Bühne im selben Moment weiterfahren */
  .rad-leasing.ist-klebend .rad-leasing__title-wrap h2{position:sticky;top:calc(var(--kleben) - var(--lst-h2) - 28px);margin:0;pointer-events:auto}
  .rad-leasing.ist-klebend .rad-leasing__lead{grid-column:2;grid-row:1;margin-bottom:var(--rad-head-gap)}
  .rad-leasing.ist-klebend .rad-lst{grid-column:1 / -1;grid-row:2;min-width:0}
}

/* Knopf unter dem Stapel (24.09.2026): mittig, im Klebe-Modus eigene Rasterzeile unter der Stapelstrecke */
.rad-leasing__actions{display:flex;justify-content:center;margin-top:clamp(32px,4vw,56px)}
@media(min-width:901px){.rad-leasing.ist-klebend .rad-leasing__actions{grid-column:1 / -1;grid-row:3}}
/* Einspaltig (≤ 900 px, 24.09.2026, Kundenwunsch): Unter der letzten Karte bleibt der Platz frei, auf dem vorher die
   nächste Karte stand (0,9 × Kartenhöhe + 28 px) — der Knopf rückt um genau diesen Platz nach oben. Solange eine frühere
   Karte aktiv ist, liegt er ohnehin noch unterhalb der Stapelstrecke. */
@media(max-width:900px){
  .rad-leasing .rad-lst.ist-bereit + .rad-leasing__actions{margin-top:calc(-.9 * var(--lst-karte-h, 180px))}
}