/* 19-leasingrechner — der eigene Bikeleasing-Rechner auf /bikeleasing/ (Kundenwunsch 21.09.2026).
   Vorher lief hier ein iframe von Lease a Bike; der brachte sein eigenes Cookie-Banner mitten in die Seite
   und ließ sich optisch nicht anfassen. Gerechnet wird identisch, siehe 19-leasingrechner.js.

   22.09.2026 — nach den Designrichtlinien der Startseite neu gezeichnet:
   · beide Container tragen den einheitlichen Radius --vn-radius-xl (Inhalts-Container), Bedienelemente sm/pill.
   · Eingabekarte = dieselbe Karte wie das Kontaktformular (paper, Haarlinie, 36 px Innenraum);
     Ergebniskarte = die „Moderne Karte“ (Verlauf card-top → card-bottom, Kartenschatten — die Sektion ist hell,
     dort zeigt der Weichschatten kein Banding).
   · Wahlknöpfe als Pillen, gewählt = Tinte (Vokabular des runden Pfeil-Buttons); Hover wie der Ghost-Button.
   · Große Zahl in der Display-Schrift auf --vn-text-stat, Werte 500, Beschriftungen Montserrat 600.
   · Gold nie als Fläche: der Prozentwert steht als Pille mit goldener Haarlinie, nicht auf goldenem Grund;
     Schieberfüllung ist die einzige goldene Linie, kein Schatten am Griff.
   · Kein eigener Fokusring — der globale (:focus-visible, Gold) reicht; Felder färben zusätzlich den Rand. */

.rad-calc__head{margin-bottom:clamp(32px,4vw,56px)}
.rad-calc__lead{max-width:52ch}

.rad-lrech{display:grid;gap:24px;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:start}

/* ---------- Eingaben ---------- */
.rad-lrech__form{background:var(--vn-color-paper);border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-xl);
  padding:clamp(24px,2.6vw,36px)}
.rad-light-2 .rad-lrech__form{background:var(--vn-color-paper)}
.rad-lrech__spalten{display:grid;gap:clamp(24px,2.6vw,36px);grid-template-columns:repeat(2,minmax(0,1fr))}
.rad-lrech__spalte{display:flex;flex-direction:column;gap:clamp(24px,2.4vw,30px);min-width:0}
.rad-lrech__feld{min-width:0}

.rad-lrech__label{display:block;margin-bottom:12px;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-lrech__kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.rad-lrech__kopf .rad-lrech__label{margin:0}

/* Zahlenfeld und Schieber bedienen denselben Wert. Das Zahlenfeld führt, der Schieber ist die schnelle Hand —
   deshalb liegt der Tastaturfokus auf dem Zahlenfeld und der Schieber trägt tabindex="-1".
   Feldoptik = Kontaktformular (09-kontakt.css): paper, Rand Tinte 50 %, r-sm, 44 px hoch. */
.rad-lrech__eingabe{position:relative;display:flex;align-items:center}
.rad-lrech__waehrung{position:absolute;left:14px;font:500 var(--vn-text-sm)/1 var(--vn-font-body);color:var(--vn-color-muted);pointer-events:none}
.rad-lrech__zahl{width:122px;min-height:44px;padding:8px 14px 8px 30px;text-align:right;
  background:var(--vn-color-paper);color:var(--vn-color-fg);border:1px solid color-mix(in srgb,var(--vn-color-ink) 50%,transparent);
  border-radius:var(--vn-radius-sm);font:600 .9375rem/1.2 var(--vn-font-body);font-variant-numeric:tabular-nums;
  appearance:textfield;-webkit-appearance:textfield;box-shadow:none;transition:border-color var(--vn-d-snap) var(--vn-ease-out)}
.rad-lrech__zahl::-webkit-outer-spin-button,.rad-lrech__zahl::-webkit-inner-spin-button{appearance:none;margin:0}
@media(hover:hover){.rad-lrech__zahl:hover{border-color:var(--vn-color-fg)}}
.rad-lrech__zahl:focus-visible{border-color:var(--vn-color-accent);outline-offset:2px}

/* Der Schieber wird von Hand gezeichnet, weil die Voreinstellungen der Browser zu unterschiedlich sind.
   --f trägt den Füllstand in Prozent und wird von 19-leasingrechner.js gesetzt. Griff = Tinte mit Papierring, kein Schatten. */
.rad-lrech__regler{--f:0%;width:100%;height:28px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer;display:block}
.rad-lrech__regler::-webkit-slider-runnable-track{height:3px;border-radius:var(--vn-radius-full);
  background:linear-gradient(to right,var(--vn-color-accent) var(--f),var(--vn-color-line) var(--f))}
.rad-lrech__regler::-moz-range-track{height:3px;border-radius:var(--vn-radius-full);
  background:linear-gradient(to right,var(--vn-color-accent) var(--f),var(--vn-color-line) var(--f))}
.rad-lrech__regler::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;margin-top:-8.5px;
  border-radius:50%;background:var(--vn-color-fg);border:3px solid var(--vn-color-on-dark);box-shadow:0 0 0 1px var(--vn-color-line)}
.rad-lrech__regler::-moz-range-thumb{width:14px;height:14px;border:3px solid var(--vn-color-on-dark);border-radius:50%;
  background:var(--vn-color-fg);box-shadow:0 0 0 1px var(--vn-color-line)}
.rad-lrech__regler:focus-visible{outline-offset:2px;border-radius:var(--vn-radius-full)}

.rad-lrech__spanne{display:flex;justify-content:space-between;margin-top:2px;font:400 var(--vn-text-xs)/1.3 var(--vn-font-body);color:var(--vn-color-muted);font-variant-numeric:tabular-nums}
.rad-lrech__hinweis{margin:10px 0 0;font:400 var(--vn-text-micro)/1.5 var(--vn-font-body);color:var(--vn-color-muted)}

/* Wahlgruppen: gleichwertige Pillen (Bedienelement → pill), der gewählte Knopf trägt die Tinte.
   Hover wie .rad-button--ghost: Rand in Schriftfarbe, Fläche 8 % — kein Gold, kein Hüpfen. */
.rad-lrech__gruppe{display:flex;flex-wrap:wrap;gap:8px}
.rad-lrech__knopf{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:44px;
  padding:9px 18px;border:1px solid var(--vn-color-line);border-radius:var(--vn-radius-full);
  background:transparent;color:var(--vn-color-fg);cursor:pointer;text-align:center;
  font:600 var(--vn-text-sm)/1.25 var(--vn-font-body);
  transition:background var(--vn-d-snap) var(--vn-ease-out),color var(--vn-d-snap) var(--vn-ease-out),border-color var(--vn-d-snap) var(--vn-ease-out)}
@media(hover:hover){.rad-lrech__knopf:hover{background:color-mix(in srgb,currentColor 8%,transparent);border-color:currentColor}}
.rad-lrech__knopf.ist-an{background:var(--vn-color-fg);color:var(--vn-color-bg);border-color:var(--vn-color-fg)}
.rad-lrech__knopf:focus-visible{outline-offset:3px}
.rad-lrech__knopf-unter{font:400 var(--vn-text-2xs)/1.2 var(--vn-font-body);opacity:.72}
.rad-lrech__gruppe--typ .rad-lrech__knopf,.rad-lrech__gruppe--paket .rad-lrech__knopf{flex:1 1 auto}

/* Zwei seltener gebrauchte Schalter unter einer Haarlinie. Häkchen in Tinte (accent-color), kein Gold als Fläche. */
.rad-lrech__schalter{display:flex;flex-direction:column;gap:12px;margin-top:clamp(24px,2.6vw,32px);
  padding-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--vn-color-line)}
.rad-lrech__schalt{display:flex;align-items:flex-start;gap:12px;cursor:pointer;font:400 var(--vn-text-sm)/1.5 var(--vn-font-body);color:var(--vn-color-muted);
  transition:color var(--vn-d-snap) var(--vn-ease-out)}
.rad-lrech__schalt input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--vn-color-fg);cursor:pointer}
@media(hover:hover){.rad-lrech__schalt:hover{color:var(--vn-color-fg)}}

/* ---------- Ergebnis: die „Moderne Karte“ ---------- */
.rad-lrech__ergebnis{position:sticky;top:calc(var(--rad-header-h-scrolled) + 24px);
  border-radius:var(--vn-radius-xl);overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));box-shadow:none;   /* 24.09.2026 (Kundenwunsch): kein Schatten */
  color:var(--vn-color-on-dark);padding:clamp(26px,2.8vw,36px);scroll-margin-top:calc(var(--rad-header-h-scrolled) + 16px);
  /* Rollen auf der dunklen Fläche, damit die Bausteine darin nichts hart verdrahten */
  --vn-color-fg:var(--vn-color-on-dark);--vn-color-muted:var(--vn-color-on-dark-muted);--vn-color-line:var(--vn-color-divider-dark);--vn-color-accent-text:var(--vn-color-accent-on-dark);--vn-color-accent-text-small:var(--vn-color-accent-on-dark)}
.rad-lrech__ergebnis :focus-visible{outline-color:var(--vn-color-accent-on-dark)}

.rad-lrech__haupt{padding-bottom:clamp(20px,2.2vw,28px);border-bottom:1px solid var(--vn-color-line)}
.rad-lrech__haupt-label{margin:0;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-accent-text)}
.rad-lrech__haupt-zahl{margin:10px 0 0;display:flex;align-items:baseline;gap:8px;
  font:var(--rad-w-display) var(--vn-text-stat)/1 var(--vn-font-display);letter-spacing:var(--rad-ls-head);
  font-variant-numeric:tabular-nums;color:var(--vn-color-fg)}
.rad-lrech__einheit{font-size:.4em;font-weight:400;letter-spacing:0;color:var(--vn-color-muted)}
.rad-lrech__haupt-unter{margin:12px 0 0;max-width:38ch;font:400 var(--vn-text-sm)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}

.rad-lrech__kacheln{margin:clamp(20px,2.2vw,28px) 0 0;padding:0;list-style:none;display:grid;gap:14px}
/* Drei Spalten: Beschriftung | Prozent-Pille | Betrag. Der Betrag steht IMMER in Spalte 3 — so stehen alle Summen
   rechts untereinander, auch in Zeilen ohne Pille (Kundenhinweis 22.09.2026). */
.rad-lrech__kacheln li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;column-gap:14px}
.rad-lrech__k-wert{grid-column:3;justify-self:end}
.rad-lrech__k-zusatz{grid-column:2;justify-self:end}
.rad-lrech__k-label{font:400 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-lrech__k-wert{font:500 1.125rem/1.2 var(--vn-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--vn-color-fg);white-space:nowrap}
.rad-lrech__k-wert--gold{color:var(--vn-color-accent-text)}
/* Prozentwert: Pille mit goldener Haarlinie (Vokabular .rad-phero__extra), keine goldene Fläche */
.rad-lrech__k-zusatz{flex:none;padding:3px 10px;border-radius:var(--vn-radius-full);border:1px solid var(--vn-color-divider-accent);
  color:var(--vn-color-accent-text);font:600 var(--vn-text-xs)/1.4 var(--vn-font-body);font-variant-numeric:tabular-nums}

/* ---------- Berechnungsübersicht ---------- */
.rad-lrech__detail{margin-top:clamp(20px,2.2vw,28px);border-top:1px solid var(--vn-color-line);padding-top:18px}
.rad-lrech__summary{display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;min-height:44px;
  list-style:none;font:600 var(--vn-text-sm)/1.4 var(--vn-font-body);color:var(--vn-color-accent-text)}
.rad-lrech__summary::-webkit-details-marker{display:none}
.rad-lrech__summary .rad-arrow{width:22px;height:22px;transition:transform var(--vn-d-snap) var(--vn-ease-out)}
.rad-lrech__detail[open] .rad-lrech__summary .rad-arrow{transform:rotate(-90deg)}
@media(hover:hover){.rad-lrech__summary:hover{text-decoration:underline;text-underline-offset:6px}}
.rad-lrech__summary:focus-visible{border-radius:var(--vn-radius-sm)}

.rad-lrech__tabelle-wrap{margin-top:16px;overflow-x:auto}
.rad-lrech__tabelle{width:100%;border-collapse:collapse;font:400 var(--vn-text-micro)/1.4 var(--vn-font-body);font-variant-numeric:tabular-nums}
.rad-lrech__caption{caption-side:bottom;padding-top:14px;text-align:left;font:400 var(--vn-text-2xs)/1.5 var(--vn-font-body);color:var(--vn-color-muted)}
.rad-lrech__tabelle thead th{padding:0 0 10px;text-align:right;vertical-align:bottom;font:600 var(--vn-text-xs)/1.3 var(--vn-font-body);color:var(--vn-color-fg)}
.rad-lrech__tabelle thead th span{display:block;font-weight:400;color:var(--vn-color-muted)}
.rad-lrech__tabelle th[scope=row]{padding:8px 12px 8px 0;text-align:left;font-weight:400;color:var(--vn-color-muted)}
.rad-lrech__tabelle td{padding:8px 0;text-align:right;white-space:nowrap;color:var(--vn-color-fg)}
.rad-lrech__tabelle td+td{padding-left:16px}
.rad-lrech__klein{display:block;font-size:.85em;opacity:.7}
.rad-lrech__tabelle tr.ist-summe th[scope=row],.rad-lrech__tabelle tr.ist-summe td{border-top:1px solid var(--vn-color-line);font-weight:600;color:var(--vn-color-fg);padding-top:10px}
.rad-lrech__block2 tr:first-child th[scope=row],.rad-lrech__block2 tr:first-child td{padding-top:20px}
/* Die Nachteil-Zeile erscheint nur, wenn der Schalter gesetzt ist — sonst stünde dort dauerhaft eine Null. */
.rad-lrech__zeile-nachteil{display:none}
.rad-lrech.zeigt-nachteil .rad-lrech__zeile-nachteil{display:table-row}

.rad-lrech__ohne-js{grid-column:1/-1;margin:0;padding:16px 20px;border-radius:var(--vn-radius-md);border:1px solid var(--vn-color-line);
  background:var(--vn-color-paper);color:var(--vn-color-fg);font:400 var(--vn-text-sm)/1.6 var(--vn-font-body)}

/* Hinweiszeile unter dem Rechner: die Rechnung ist unverbindlich, das gehört sichtbar dazu. */
.rad-calc__hinweis{margin:clamp(20px,2.2vw,28px) 0 0;max-width:86ch;font:400 var(--vn-text-micro)/1.6 var(--vn-font-body);color:var(--vn-color-muted)}

@media (max-width:1100px){
  /* Ergebnis unter die Eingaben: nebeneinander bleiben sonst zwei sehr enge Spalten. */
  .rad-lrech{grid-template-columns:minmax(0,1fr);gap:16px}
  .rad-lrech__ergebnis{position:static}
}
@media (max-width:900px){
  /* .rad-head stellt Überschrift und Vorspann nebeneinander; darunter wird daraus eine gequetschte Spalte. */
  .rad-calc__head{flex-direction:column;align-items:stretch;gap:14px}
  .rad-calc__lead{max-width:none}
}
@media (max-width:620px){
  .rad-lrech__form,.rad-lrech__ergebnis{padding:22px 20px 24px}
  .rad-lrech__spalten{grid-template-columns:minmax(0,1fr)}
  .rad-lrech__gruppe--typ .rad-lrech__knopf{flex:1 1 calc(50% - 4px)}
  /* Schmal: Beschriftung auf eigener Zeile, darunter links die Pille und rechts der Betrag — Beträge bleiben bündig. */
  .rad-lrech__kacheln li{grid-template-columns:auto minmax(0,1fr);row-gap:2px}
  .rad-lrech__k-label{grid-column:1/-1}
  .rad-lrech__k-zusatz{grid-column:1;justify-self:start}
  .rad-lrech__k-wert{grid-column:2}
  /* 16 px verhindert, dass iOS beim Tippen in das Feld hineinzoomt. */
  .rad-lrech__zahl{font-size:16px;width:112px}
}
/* Ergebnis-Pille (24.09.2026, Kundenwunsch): Solange Ergebnis und Eingaben untereinander stehen (≤ 1100 px), sieht man
   beim Bedienen der Regler das Ergebnis nicht. Unten schwebt deshalb eine Pille mit der Monatsbelastung; ein Tippen
   scrollt zur Ergebniskarte. Sichtbar nur, solange die Eingaben im Bild sind und die Karte noch nicht (19-leasingrechner.js). */
.rad-lrech__pille{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;display:none;align-items:center;gap:12px;
  max-width:calc(100vw - 32px);min-height:52px;padding:8px 24px;border:0;border-radius:var(--vn-radius-full);cursor:pointer;
  background:linear-gradient(160deg,var(--rad-card-top),var(--rad-card-bottom));   /* Flächenverlauf wie die Ergebniskarte */
  color:var(--vn-color-on-dark);font:500 var(--vn-text-sm)/1.2 var(--vn-font-body);white-space:nowrap;
  /* Erscheinen (24.09.2026, Kundenwunsch): wächst von unten ins Bild — fährt hoch und skaliert dabei von der Unterkante aus auf */
  transform-origin:50% 100%;opacity:0;translate:-50% calc(100% + 24px);scale:.6;pointer-events:none;
  transition:translate .45s cubic-bezier(.2,.8,.2,1),scale .45s cubic-bezier(.2,.8,.2,1),opacity .2s ease}
.rad-lrech__pille strong{font:600 1.1875rem/1 var(--vn-font-display);color:var(--vn-color-accent-on-dark);font-variant-numeric:tabular-nums}
.rad-lrech__pille.ist-sichtbar{opacity:1;translate:-50% 0;scale:1;pointer-events:auto}
.rad-lrech__pille:focus-visible{outline:2px solid var(--vn-color-accent-on-dark);outline-offset:3px}
@media (max-width:1100px){.rad-lrech__pille{display:inline-flex}html:has(.rad-lrech__pille.ist-sichtbar){scroll-padding-bottom:96px}}

@media (prefers-reduced-motion:reduce){
  .rad-lrech__pille{transition:none}
  .rad-lrech__knopf,.rad-lrech__zahl,.rad-lrech__schalt,.rad-lrech__summary .rad-arrow{transition:none}
}