/* drivebro — Finanzierung und Leasing (finanzierung.html). Klassen mit Präfix fi-. */

/* ---------- Bühne: ruhiges Band ---------- */
.fi-buehne h1{font-size:clamp(32px,3.8vw,54px)}

/* ---------- Fahrzeug aus ?id= (weisse Karte über dem Rechner) ---------- */
.fi-fahrzeug{display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:14px;margin-bottom:24px}
.fi-fahrzeug[hidden]{display:none}
.fi-fz-bild{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--flaeche)}
.fi-fz-bild img{width:100%;height:100%;object-fit:cover}
.fi-fz-text{min-width:0}
.fi-fz-titel{display:block;font-size:13px;font-weight:700;color:var(--grau);margin-bottom:2px}
.fi-fz-text h3{font-size:18px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fi-fz-fakten{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;margin-top:6px}
.fi-fz-fakten span{display:inline-flex;align-items:center;gap:5px}
.fi-fz-fakten .ic{width:14px;height:14px;color:var(--grau-hell)}
.fi-fz-rechts{display:grid;justify-items:end;gap:8px;padding-right:10px;text-align:right}
.fi-fz-preis{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--tinte)}
.fi-fz-links{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:flex-end}
.fi-fz-links .tlink{font-size:14.5px}

/* ---------- Rechner ---------- */
.fi-rechner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(18px,2.4vw,32px);align-items:start}
.fi-eingaben{display:grid;gap:26px;padding:clamp(20px,2.6vw,34px)}
/* Reiter Leasing, Kredit, Unterhalt über beiden Rechnern */
.fi-reiter{display:flex;width:max-content;max-width:100%;margin-bottom:clamp(18px,2.2vw,28px)}
.fi-reiter button{padding:10px 24px;font-size:15px;min-height:44px}
.glas-reiter.hell.fi-reiter button:not([aria-selected=true]):hover{color:var(--tinte)}
.fi-art-text{margin:0;font-size:14.5px;color:var(--grau);max-width:52ch}
#fi-panel-fin[hidden],.fi-u[hidden]{display:none}
.fi-feld{display:grid;gap:8px;min-width:0}
.fi-feld[hidden]{display:none}
.fi-feld-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fi-feld-kopf label{font-size:15px;font-weight:700;color:var(--tinte)}
.fi-feld-kopf output{font-size:16px;font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums}
.fi-chf{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--linie-stark);border-radius:var(--radius-feld);background:rgba(255,255,255,.92);font-size:14px;font-weight:600;color:var(--grau);transition:border-color .2s,box-shadow .2s}
.fi-chf:hover{border-color:var(--linie-stark)}
.fi-chf:focus-within{border-color:var(--akzent);box-shadow:var(--feld-fokus)}
.fi-chf input{width:8.5ch;border:0;outline:0;background:none;padding:0;text-align:right;font-size:17px;font-weight:700;color:var(--tinte);font-variant-numeric:tabular-nums}
.fi-skala{display:flex;justify-content:space-between;font-size:12.5px;color:var(--grau-hell);padding-inline:4px;margin-top:-4px}

.fi-regler{--p:50%;-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.fi-regler:focus{outline:0}
.fi-regler::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--akzent) var(--p),var(--linie) var(--p))}
.fi-regler::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:2px solid var(--akzent);box-shadow:0 6px 12px -6px rgba(29,26,22,.6);transition:box-shadow .2s}
.fi-regler:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px color-mix(in srgb,var(--akzent) 20%,transparent)}
.fi-regler::-moz-range-track{height:6px;border-radius:3px;background:var(--linie)}
.fi-regler::-moz-range-progress{height:6px;border-radius:3px;background:var(--akzent)}
.fi-regler::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2px solid var(--akzent)}
.fi-regler:focus-visible::-moz-range-thumb{box-shadow:0 0 0 5px color-mix(in srgb,var(--akzent) 20%,transparent)}

/* Fahrzeugangaben für das Restwertmodell (zwei Spalten, auf dem Telefon untereinander) */
.fi-paar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}
.fi-paar[hidden]{display:none}
.fi-km-eingabe{justify-content:space-between}
.fi-km-eingabe input{flex:1;min-width:0;width:auto;text-align:left}

/* Restwert: Regler mit Obergrenze; was über dem Modellwert liegt, ist schraffiert und nicht erreichbar (--g = Grenze) */
.fi-regler.fi-grenze::-webkit-slider-runnable-track{background:linear-gradient(90deg,var(--akzent) var(--p),var(--linie) var(--p) var(--g),transparent var(--g)),repeating-linear-gradient(135deg,var(--linie-stark) 0 2px,transparent 2px 6px)}
.fi-regler.fi-grenze::-moz-range-track{background:linear-gradient(90deg,var(--linie) var(--g),transparent var(--g)),repeating-linear-gradient(135deg,var(--linie-stark) 0 2px,transparent 2px 6px)}
.fi-rw-zurueck{font-size:13px}

/* Ergebnis (weisse Karte, Rate als hervorgehobene Zahl) */
.fi-ergebnis{position:sticky;top:calc(var(--kopf-h) + 20px);padding:clamp(22px,2.6vw,34px)}
.fi-ergebnis h3{font-size:16px;font-weight:600;letter-spacing:0;color:var(--grau)}
.fi-rate{margin:6px 0 0;font-size:clamp(44px,4.6vw,64px);font-weight:800;letter-spacing:-.045em;line-height:1.08;color:var(--akzent);font-variant-numeric:tabular-nums}
.fi-rate-text{margin:6px 0 0;font-size:15px;color:var(--text)}
.fi-balken{display:flex;gap:3px;height:10px;margin-top:24px;border-radius:999px;overflow:hidden}
.fi-balken span{display:block;min-width:4px;transition:flex-basis .4s var(--weich)}
.fi-b1{background:var(--akzent-hell)}
.fi-b2{background:var(--limette)}
.fi-b3{background:var(--akzent)}
.fi-legende{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:12px 0 0;padding:0;font-size:13.5px;color:var(--text)}
.fi-legende li{display:inline-flex;align-items:center;gap:7px}
.fi-legende i{width:10px;height:10px;border-radius:3px}
.fi-details{margin:22px 0 0}
.fi-details div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:15px}
.fi-details dt{color:var(--grau)}
.fi-details dd{margin:0;font-weight:700;color:var(--tinte);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fi-details .fi-summe{border-bottom:0;padding-top:14px}
.fi-details .fi-summe dt{color:var(--tinte);font-weight:700}
.fi-details .fi-summe dd{font-size:17px}
.fi-aktion{display:grid;justify-items:center;gap:16px;margin-top:22px}
.fi-aktion .knopf{font-size:16px;padding-block:15px}
.fi-pflicht{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--linie);font-size:13px;line-height:1.5;color:var(--grau)}

.fi-beispiel{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(22px,2.4vw,32px);max-width:980px;font-size:14px;line-height:1.55;color:var(--grau)}
.fi-beispiel .ic{width:19px;height:19px;flex:none;margin-top:1px;color:var(--grau-hell)}
.fi-beispiel p{margin:0}
.fi-beispiel b{color:var(--tinte)}

/* ---------- Unterschiede ---------- */
.fi-tabelle-rahmen{overflow:hidden}
.fi-tabelle{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5}
.fi-tabelle th,.fi-tabelle td{text-align:left;vertical-align:top;padding:16px 22px;border-bottom:1px solid var(--linie)}
.fi-tabelle tbody tr:last-child>*{border-bottom:0}
.fi-tabelle thead th{background:var(--flaeche);color:var(--akzent-dunkel);font-size:15px;font-weight:700;padding-block:14px}
.fi-tabelle tbody th{width:20%;font-weight:700;color:var(--tinte)}
.fi-tabelle td{width:40%;color:var(--text)}
.fi-beide{background:var(--weiss)}
.fi-notiz{margin-top:22px;font-size:15.5px;color:var(--text);max-width:80ch}
.fi-notiz-link{margin-top:10px}

/* ---------- Ablauf ---------- */
.fi-ablauf{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:start}
.fi-schritte{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--linie-stark)}
.fi-schritte li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--linie-stark)}
.fi-nr{font-size:34px;font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--akzent)}
.fi-schritte h3{font-size:clamp(19px,1.6vw,22px);line-height:1.25;margin-bottom:6px}
.fi-schritte p{margin:0;font-size:16px;color:var(--text);max-width:60ch}

/* ---------- Leasingfahrzeuge ---------- */
.fi-leasing{font-size:13.5px;font-weight:600;color:var(--akzent)}
.fi-raster-notiz{margin-top:22px}

/* ---------- Anfrage-Dialog ---------- */
.fi-anfrage{display:grid;gap:14px}
.fi-zusammenfassung{display:grid;gap:4px;padding:14px 18px;border-radius:var(--radius-feld);background:var(--flaeche);font-size:14.5px}
.fi-zusammenfassung b{font-size:17px;color:var(--tinte)}
.fi-anfrage .notiz{margin:0;font-size:13px}
.fi-danke{display:grid;justify-items:center;gap:14px;text-align:center;padding:8px 0 4px}
.fi-danke .glas{--s:76px}
.fi-danke h3{font-size:21px}
.fi-danke p{margin:0;max-width:44ch;color:var(--grau)}

/* Aufklappbar: weitere Angaben und Rechenweg */
.fi-mehr{border-top:1px solid var(--linie);padding-top:4px}
.fi-mehr>summary,.fi-weg>summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:15px;font-weight:600;color:var(--akzent)}
.fi-mehr>summary::-webkit-details-marker,.fi-weg>summary::-webkit-details-marker{display:none}
.fi-mehr>summary::after,.fi-weg>summary::after{content:"";width:8px;height:8px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--weich)}
.fi-mehr[open]>summary::after,.fi-weg[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.fi-mehr-inhalt{display:grid;gap:26px;padding:14px 0 4px}
.fi-weg{margin-top:14px;padding:4px 16px;border-radius:var(--radius-feld);background:var(--flaeche)}
.fi-weg p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--text)}

/* Pfeil im Auswahlfeld (basis.css setzt background:#fff und überschreibt ihn) */
.fi-eingaben select.eingabe{padding-right:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2377736B' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center}
.fi-eingaben select.eingabe:disabled{background-color:var(--flaeche)}

/* ---------- Unterhaltsrechner (Präfix fi-u-) ---------- */
.fi-u-eingaben{gap:0}
.fi-u-gruppe{display:block;min-width:0;margin:0;padding:0;border:0}
.fi-u-gruppe+.fi-u-gruppe{margin-top:26px;padding-top:24px;border-top:1px solid var(--linie)}
.fi-u-gruppe>legend{float:left;width:100%;padding:0;margin:0 0 16px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:var(--tinte)}
.fi-u-gruppe>legend+*{clear:both}
.fi-u-gruppe>*+*{margin-top:20px}
.fi-u-gruppe>legend+*{margin-top:0}
.fi-u-gruppe .fi-paar{gap:20px 18px}
.fi-u-gruppe .fi-paar[hidden],.fi-u-gruppe .fi-feld[hidden]{display:none}
.fi-u-gruppe .feld-hinweis{display:block;line-height:1.5}
.fi-u-eingaben .fi-chf input::placeholder{color:var(--grau-hell);font-weight:600}
.fi-u-eingaben input.eingabe{height:44px}
.fi-u-eingaben .fi-mehr{margin-top:18px}
.fi-u-eingaben .fi-mehr-inhalt{gap:20px 18px}
.fi-u-reiterlink{font-size:13.5px}

/* Deckung: drei gleich breite Felder, auch auf dem Telefon */
.fi-u-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border-radius:999px;background:var(--flaeche)}
.fi-u-wahl button{min-height:44px;padding:8px 6px;border:0;border-radius:999px;background:none;font:600 14.5px/1.2 var(--f);color:var(--grau);cursor:pointer;transition:background .2s,color .2s}
.fi-u-wahl button:hover{color:var(--tinte)}
.fi-u-wahl [aria-checked=true]{background:#fff;color:var(--tinte);box-shadow:0 2px 8px rgba(27,30,26,.10)}

/* Ergebnis: Total, dann je Posten Betrag, Anteil als ruhiger Balken und Rechenweg */
.fi-u-ergebnis:focus{outline:0}
.fi-u-ergebnis .fi-rate-text{line-height:1.55}
.fi-u-ergebnis .fi-rate-text b{color:var(--tinte);white-space:nowrap}
.fi-u-posten{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--linie)}
.fi-u-p{padding:12px 0 13px;border-bottom:1px solid var(--linie)}
.fi-u-p-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fi-u-p-name{min-width:0;font-size:15px;font-weight:700;color:var(--tinte)}
.fi-u-marke{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--flaeche-2);font-size:12px;font-weight:600;color:var(--grau);vertical-align:1px;white-space:nowrap}
.fi-u-p-wert{font-size:16px;font-weight:800;color:var(--tinte);font-variant-numeric:tabular-nums;white-space:nowrap}
.fi-u-p-balken{height:6px;margin-top:8px;border-radius:3px;background:var(--flaeche-2);overflow:hidden}
.fi-u-p-balken i{display:block;height:100%;min-width:0;border-radius:3px;background:var(--akzent);transition:width .45s var(--weich)}
.fi-u-p-text{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--grau)}
.fi-u-p-offen .fi-u-p-wert{font-weight:600;color:var(--grau-hell)}
.fi-u-offen{margin:12px 0 0;font-size:13.5px;color:var(--grau)}
.fi-u-ergebnis .fi-weg p{margin:0 0 12px}
.fi-u-quellen{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--text)}
.fi-u-quellen li+li{margin-top:4px}
.fi-u-quellen a{color:var(--tinte);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.fi-u-quellen-titel{margin-bottom:6px!important}
.fi-u-aktion{justify-items:start}
.fi-u-aktion .tlink{font-size:15px;text-align:left}

/* Telefon: Total bleibt unten sichtbar, solange die Eingaben im Bild sind */
.fi-u-kurz{display:none}

/* ---------- Tablet und Telefon ---------- */
/* Partnerplatz Leasing (nur mit Eintrag in daten/partner.json) */
.fi-partner{margin-top:24px}
.fi-partner .pt-kasten{max-width:880px}

@media (max-width:1100px){
  .fi-rechner{grid-template-columns:minmax(0,1fr)}
  .fi-ergebnis{position:static}
  .fi-ablauf{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .fi-paar{grid-template-columns:minmax(0,1fr)}
  .fi-fahrzeug{grid-template-columns:96px minmax(0,1fr)}
  .fi-fz-text h3{white-space:normal;font-size:16px}
  .fi-fz-rechts{grid-column:1/-1;justify-items:start;text-align:left;padding:0 4px 4px}
  .fi-fz-links{justify-content:flex-start}
  .fi-feld-kopf label{font-size:14.5px}
  .fi-chf input{width:7.5ch}
  .fi-tabelle,.fi-tabelle tbody,.fi-tabelle tr,.fi-tabelle th,.fi-tabelle td{display:block;width:auto}
  .fi-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .fi-tabelle tr{padding:16px 18px;border-bottom:1px solid var(--linie)}
  .fi-tabelle tbody tr:last-child{border-bottom:0}
  .fi-tabelle th,.fi-tabelle td{padding:0;border:0}
  .fi-tabelle tbody th{width:auto;font-size:17px;margin-bottom:8px}
  .fi-tabelle td{margin-top:8px}
  .fi-tabelle td::before{content:attr(data-titel);display:block;font-size:13px;font-weight:700;color:var(--grau)}
  .fi-beide{background:none}
  .fi-schritte li{grid-template-columns:40px minmax(0,1fr);gap:12px}
  .fi-nr{font-size:28px}
}

/* Unterhalt auf Tablet und Telefon (Ergebnis unter den Eingaben, Total als Leiste unten) */
@media (max-width:1100px){
  .fi-u-kurz{position:sticky;bottom:calc(var(--tabbar-h) + 10px);z-index:5;display:flex;align-items:center;gap:10px;margin-top:22px;padding:12px 20px;border-radius:999px;background:var(--akzent);color:#fff;box-shadow:0 14px 30px -14px rgba(20,23,27,.7);text-decoration:none}
  .fi-u-kurz span{font-size:14px;color:rgba(255,255,255,.8)}
  .fi-u-kurz b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:#fff}
  .fi-u-kurz .fi-u-kurz-link{margin-left:auto;font-weight:600;color:#fff;text-decoration:underline;text-underline-offset:3px}
}
@media (max-width:760px){
  .fi-reiter{width:100%}
  .fi-reiter button{flex:1;padding:10px 8px}
  .fi-u-steuerfelder,.fi-u-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fi-u-zwei{gap:20px 12px}
  .fi-u-zwei .fi-chf,.fi-u-zwei select.eingabe{padding-left:12px}
  .fi-u-steuerfelder .fi-chf{padding:0 10px}
  .fi-u-steuerfelder .fi-chf>span{font-size:13px}
  .fi-u-wahl button{font-size:14px}
  .fi-u-gruppe>legend{font-size:17px}
}
@media (max-width:360px){
  .fi-u-steuerfelder,.fi-u-zwei{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.fi-u-p-balken i{transition:none}}