#kf{
  --kf-amber:#f59e0b; --kf-amber-fill:#b45309; --kf-amber-text:#92400e; --kf-amber-glass:#f59e0b3d;
  --kf-blue:#70b5ff;  --kf-blue-fill:#2563eb;  --kf-blue-text:#1d4ed8;  --kf-blue-glass:#70b5ff3d;
  --kf-ink:#0f0f11; --kf-muted:#52525b; --kf-soft:#5f5f69; --kf-line:#1b1d1e14;
  --kf-edge:#ffffff8c; --kf-green:#15803d;
  /* Drei Kontraststufen statt einer Markenfarbe:
     …-amber      nur Ränder und Flächen
     …-amber-fill Flächen, auf denen weiße Schrift steht
     …-amber-text Schrift auf hellem Grund — das ist die, die den Test bestehen muss */
  --kf-accent:var(--kf-amber); --kf-accent-fill:var(--kf-amber-fill);
  --kf-accent-text:var(--kf-amber-text); --kf-accent-glass:var(--kf-amber-glass);

  position:relative; color:var(--kf-ink); line-height:1.5;
  font-family:'Inter Tight','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 40% at 12% 3%,  #d9f0ff 0%, transparent 60%),
    radial-gradient(55% 35% at 88% 1%,  #ffeccd 0%, transparent 62%),
    radial-gradient(70% 45% at 50% 100%,#f3e8ff 0%, transparent 65%), #fdfdfd;
}
#kf *{box-sizing:border-box}
/* Nur die Schrift erben, NICHT die Farbe: `color:inherit` hätte hier
   Vorrang vor `.kf-btn{color:#fff}` (ID schlägt Klasse) und schriebe
   schwarz auf Bernstein. */
#kf button{font:inherit}
#kf :focus-visible{outline:3px solid var(--kf-accent-fill); outline-offset:2px; border-radius:8px}

.kf-wrap{max-width:1180px; margin:0 auto; padding:0 24px}

/* Die Webflow-Navigation liegt fest über der Seite und ist 96 px hoch
   (gemessen, nicht geschätzt). Ohne diesen Abstand verschluckt sie die
   Überschrift. Beim Doppelklick auf index.html ist der Abstand nur großzügig. */
.kf-head{padding:136px 0 0}
.kf-eyebrow{font-size:12px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--kf-accent-text); margin:0 0 12px}
.kf-h1{margin:0 0 10px; font-size:38px; line-height:1.08; letter-spacing:-1px; font-weight:700}
.kf-lead{margin:0; font-size:16.5px; line-height:1.55; color:var(--kf-muted); max-width:580px}

/* ── Fortschritt ──────────────────────────────────────────
   Die Leiste ist auch die Navigation: schon besuchte Schritte sind
   anklickbar, kommende nicht. Sonst springt jemand in Schritt 6 und
   sieht Bausteine, deren Voraussetzung er nie gewählt hat. */
.kf-fort{display:flex; gap:6px; align-items:center; margin:24px 0 0; flex-wrap:wrap}
.kf-fs{display:flex; align-items:center; gap:8px; border:0; background:none; padding:0;
  cursor:pointer; color:var(--kf-soft); font-size:13.5px; font-weight:500}
.kf-fs[disabled]{cursor:default; opacity:.55}
.kf-fz{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; background:#ffffffb3; border:1px solid var(--kf-line);
  color:var(--kf-soft); transition:.18s; flex:0 0 26px}
.kf-fs[aria-current="step"]{color:var(--kf-accent-text); font-weight:700}
.kf-fs[aria-current="step"] .kf-fz{background:var(--kf-accent-fill); border-color:var(--kf-accent-fill); color:#fff}
.kf-fs.kf-fertig .kf-fz{background:var(--kf-accent-glass); border-color:var(--kf-accent); color:var(--kf-accent-text)}
.kf-fs.kf-fertig .kf-fz::after{content:"✓"}
.kf-fs.kf-fertig .kf-fz span{display:none}
.kf-fstrich{width:18px; height:1px; background:#00000018}
/* Schmale Fassung der Leiste — Zahlen ohne Wörter passen nicht mehr,
   also eine gefüllte Schiene plus „Schritt 3 von 8“. */
.kf-fort-schmal{display:none; margin:22px 0 0}
.kf-fbalken{height:4px; border-radius:999px; background:#00000012; overflow:hidden}
.kf-fbalken i{display:block; height:100%; border-radius:999px; background:var(--kf-accent-fill);
  transition:width .3s ease}
.kf-fzahl{margin:8px 0 0; font-size:12.5px; color:var(--kf-soft); font-weight:600}

.kf-grid{display:grid; grid-template-columns:1fr 400px; gap:30px; align-items:start; padding:26px 0 120px}

/* ── Ein Schritt ──────────────────────────────────────────
   Immer nur einer sichtbar. Der Wechsel bekommt eine kurze Bewegung,
   damit erkennbar bleibt, dass etwas Neues kommt und nicht nur der
   alte Inhalt zuckt. */
.kf-karte{border:1px solid var(--kf-line); background:#ffffff40; backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 0 var(--kf-edge), 0 4px 20px 0 #0000001f;
  border-radius:20px; padding:26px 26px 22px}
.kf-karte h2{margin:0 0 3px; font-size:22px; letter-spacing:-.5px}
.kf-hint{margin:0 0 18px; font-size:13.5px; color:var(--kf-soft); line-height:1.5}
.kf-schritt{animation:kf-rein .28s ease}
@keyframes kf-rein{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.kf-opts{display:grid; gap:9px}

.kf-opt{display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
  border:1px solid var(--kf-line); background:#ffffff8c; border-radius:14px;
  padding:14px 15px; cursor:pointer; transition:.15s}
.kf-opt:hover{border-color:#00000022}
.kf-opt[aria-pressed="true"]{border-color:var(--kf-accent); background:var(--kf-accent-glass);
  box-shadow:inset 0 1px 0 0 var(--kf-edge)}
.kf-mark{flex:0 0 19px; height:19px; margin-top:2px; border-radius:50%; border:1.5px solid #9b9ba6;
  background:#fff; display:grid; place-items:center; font-size:11px; color:#fff; transition:.15s}
.kf-opt[aria-pressed="true"]>.kf-mark{background:var(--kf-accent-fill); border-color:var(--kf-accent-fill)}
.kf-opt[aria-pressed="true"]>.kf-mark::after{content:"✓"}
.kf-optt{flex:1; min-width:0}
.kf-optn{font-size:15.5px; font-weight:600; display:block; margin-bottom:2px}
.kf-optd{font-size:13.5px; color:var(--kf-muted); line-height:1.5; display:block}
.kf-optp{font-size:13.5px; font-weight:600; color:var(--kf-accent-text); white-space:nowrap; margin-left:8px}
.kf-optp.kf-frei{color:var(--kf-green)}

/* ── Zwei Wege, als erster Schritt ────────────────────── */
.kf-wege{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.kf-weg{border:1px solid var(--kf-line); background:#ffffff8c; border-radius:16px; padding:18px;
  text-align:left; cursor:pointer; transition:.15s}
.kf-weg:hover{border-color:#00000022}
.kf-weg[aria-pressed="true"]{border-color:var(--kf-accent); background:var(--kf-accent-glass)}
.kf-weg h3{margin:0 0 2px; font-size:17px; letter-spacing:-.3px}
.kf-wegp{font-size:14px; font-weight:700; color:var(--kf-accent-text); margin:0 0 8px}
.kf-wegd{margin:0 0 10px; font-size:13.5px; color:var(--kf-muted); line-height:1.5}
.kf-wegl{margin:0; padding:0; list-style:none; font-size:13px; color:var(--kf-soft)}
.kf-wegl li{padding-left:16px; position:relative; margin-bottom:3px}
.kf-wegl li::before{content:"·"; position:absolute; left:6px; font-weight:700}

/* ── Baustein: zu, mit „ab X“ — auf Klick auf ───────────
   Zugeklappt steht nur, was es kostet und wofür es gut ist. Die
   Ausbaustufen sieht nur, wer sie sehen will. Das ersetzt den alten
   Schnell/Ausführlich-Umschalter, der zwei Zustände hatte, die
   niemand vorher unterscheiden konnte. */
.kf-m{border:1px solid var(--kf-line); background:#ffffff8c; border-radius:14px; overflow:hidden;
  transition:.15s}
.kf-m[data-an="true"]{border-color:var(--kf-accent); background:var(--kf-accent-glass)}
.kf-mkopf{display:flex; gap:13px; align-items:flex-start; width:100%; text-align:left;
  border:0; background:none; padding:14px 15px; cursor:pointer}
.kf-mkopf:hover .kf-mn{text-decoration:underline; text-underline-offset:3px}
/* Nur das Häkchen der Hauptoption, nicht die in den Unteroptionen darunter.
   Ohne den direkten Pfad (`> .kf-mkopf >`) erbt jede Stufe den Haken und die
   ganze Karte sieht aus, als wäre alles gewählt. */
.kf-m[data-an="true"] > .kf-mkopf > .kf-mark{background:var(--kf-accent-fill); border-color:var(--kf-accent-fill)}
.kf-m[data-an="true"] > .kf-mkopf > .kf-mark::after{content:"✓"}
.kf-mkopf > .kf-mark{border-radius:6px}
.kf-mn{font-size:15.5px; font-weight:600; display:block; margin-bottom:2px}
.kf-md{font-size:13.5px; color:var(--kf-muted); line-height:1.5; display:block}
.kf-mp{font-size:13.5px; font-weight:600; color:var(--kf-accent-text); white-space:nowrap; margin-left:8px}
.kf-mp.kf-frei{color:var(--kf-green)}
.kf-chev{flex:0 0 14px; margin-top:4px; color:var(--kf-soft); transition:transform .2s ease; font-size:13px}
.kf-m[data-auf="true"] .kf-chev{transform:rotate(90deg)}
.kf-mbody{padding:0 15px 14px 47px; display:grid; gap:7px; animation:kf-auf .22s ease}
@keyframes kf-auf{from{opacity:0; transform:translateY(-4px)}to{opacity:1; transform:none}}
.kf-stufe{display:flex; gap:11px; align-items:flex-start; border:1px solid var(--kf-line);
  background:#ffffffcc; border-radius:11px; padding:10px 12px; cursor:pointer; text-align:left}
.kf-stufe[aria-pressed="true"]{border-color:var(--kf-accent); background:#fff}
.kf-stufe .kf-mark{flex:0 0 16px; height:16px; border-radius:50%; margin-top:1px; font-size:9px}
.kf-stufe[aria-pressed="true"] .kf-mark{background:var(--kf-accent-fill); border-color:var(--kf-accent-fill)}
.kf-stufe[aria-pressed="true"] .kf-mark::after{content:"✓"}
.kf-stn{font-size:14px; font-weight:600; display:block}
.kf-std{font-size:12.5px; color:var(--kf-muted); line-height:1.45; display:block}
.kf-stp{font-size:12.5px; font-weight:600; color:var(--kf-accent-text); white-space:nowrap; margin-left:6px}

/* Die Miet-Karte kommt erst ab MIETE_AB dazu. Sie muss sich abheben, ohne
   eine dritte Markenfarbe einzuführen — also derselbe Akzent, nur kräftiger
   gerahmt und mit Augenbraue. */
.kf-alt{border:1px solid var(--kf-accent); background:var(--kf-accent-glass); border-radius:16px;
  padding:18px; margin-top:16px}
.kf-alt h3{margin:0 0 3px; font-size:17px; letter-spacing:-.3px}
.kf-alt .kf-opt{background:#ffffffcc}
.kf-alt a{color:var(--kf-accent-text); font-weight:600; white-space:nowrap}

/* ── Übersicht (letzter Schritt) ──────────────────────── */
.kf-zeilen{margin:4px 0 0; padding:0; list-style:none; border-top:1px solid var(--kf-line)}
.kf-zeilen li{display:flex; gap:12px; justify-content:space-between; padding:9px 0;
  border-bottom:1px solid var(--kf-line); font-size:14px}
.kf-zeilen li span:first-child{color:var(--kf-muted)}
.kf-zeilen li b{font-weight:600; text-align:right}
.kf-zeilen li button{border:0; background:none; color:var(--kf-accent-text); font-size:12.5px;
  font-weight:600; cursor:pointer; padding:0 0 0 10px; white-space:nowrap}
.kf-summe{display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 4px}
.kf-summe .kf-z{font-size:26px; font-weight:700; letter-spacing:-.6px}
.kf-tun{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.kf-tun .kf-btn{flex:1 1 200px}

/* ── Freiwilliger Anschluss ───────────────────────────
   Bewusst kein Kasten und kein Knopf: an dieser Stelle ist der Weg zur
   Anfrage fertig, und alles, was danach wie eine weitere Aufgabe aussieht,
   kostet Anfragen statt welche zu bringen. Eine Zeile, ein Link, der
   Nutzen zuerst — wer ihn nicht will, liest über ihn hinweg. */
.kf-anschluss{margin:18px 0 0; padding:14px 0 0; border-top:1px solid var(--kf-line);
  font-size:13.5px; line-height:1.6; color:var(--kf-muted)}
.kf-anschluss b{color:var(--kf-ink); font-weight:600}
.kf-anschluss a{color:var(--kf-accent-text); font-weight:600}
.kf-anschluss .kf-frei{font-size:11.5px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase; color:var(--kf-soft); display:block; margin:0 0 4px}

/* ── Vergleich der beiden Wege ────────────────────────
   Ein Preis allein sagt nichts. Was dieselbe Zusammenstellung auf dem
   anderen Weg kostet, macht aus einer Zahl ein Verhältnis. */
.kf-vergl{border:1px solid var(--kf-line); background:#ffffffb3; border-radius:10px;
  padding:7px 12px; cursor:pointer; text-align:left; line-height:1.3}
.kf-vergl:hover{border-color:#00000022}
.kf-vergl b{display:block; font-size:14px; font-weight:700; letter-spacing:-.2px}
.kf-vergl small{display:block; font-size:10.5px; color:var(--kf-soft)}

/* ── Vorschau ─────────────────────────────────────────── */
.kf-vorschau{position:sticky; top:18px}
.kf-vkopf{display:flex; align-items:center; gap:10px; margin:0 0 10px}
.kf-vkopf h2{margin:0; font-size:15px; letter-spacing:-.2px}
.kf-vwas{font-size:12px; color:var(--kf-accent-text); font-weight:600; margin-left:auto}

/* Die Mock-Seite hat ihre eigenen Variablen — sonst färbt das Designsystem
   des Kunden den Konfigurator mit, statt nur die Seite darin. */
.kf-browser{border:1px solid var(--kf-line); border-radius:18px; overflow:hidden; background:#fff;
  box-shadow:inset 0 1px 0 0 var(--kf-edge), 0 8px 30px 0 #00000024;
  --m-accent:#b45309; --m-radius:10px}
.kf-chrome{display:flex; align-items:center; gap:6px; padding:9px 13px; background:#f4f4f6;
  border-bottom:1px solid var(--kf-line)}
.kf-dot{width:8px; height:8px; border-radius:50%; background:#d4d4d8}
.kf-url{flex:1; margin-left:8px; background:#fff; border-radius:6px; padding:4px 9px; font-size:10.5px;
  color:var(--kf-soft); border:1px solid var(--kf-line); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.kf-viewport{padding:14px; min-height:250px; max-height:400px; overflow:auto; scroll-behavior:smooth}
.kf-mininav{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:11px; align-items:center}
.kf-minitab{font-size:9.5px; padding:3px 8px; border-radius:999px; background:#f1f1f4; color:#52525b}
.kf-minitab.kf-an{background:var(--kf-accent-glass); color:var(--kf-accent-text); font-weight:600}
.kf-lang{margin-left:auto; font-size:9px; font-weight:700; color:var(--kf-blue-text);
  border:1px solid var(--kf-blue); border-radius:999px; padding:2px 7px}

/* Der Bereich, den der aktuelle Schritt verändert, bekommt einen Rahmen.
   Ohne das sieht man zwar, DASS sich etwas ändert, aber nicht wo. */
.kf-fokus{outline:2px solid var(--kf-accent-fill); outline-offset:3px; border-radius:10px}

/* Platzhalter statt Text: der sichtbare Unterschied zwischen „Texte
   schreiben lassen“ an und aus. Genau dafür ist die Vorschau da. */
.kf-bar{height:7px; border-radius:999px; background:#e4e4e9; display:block; margin:5px 0}
.kf-bar.kf-kurz{width:55%}
.kf-bar.kf-mittel{width:78%}
.kf-hero{border-radius:var(--m-radius); padding:12px; margin-bottom:10px; border:1px solid var(--kf-line);
  background:linear-gradient(120deg,#e9f3ff,#fff6e6)}
.kf-hero.kf-leer{background:repeating-linear-gradient(45deg,#f6f6f8,#f6f6f8 8px,#f1f1f4 8px,#f1f1f4 16px);
  border-style:dashed}
.kf-heroT{font-size:12.5px; font-weight:700; line-height:1.3; margin-bottom:3px}
.kf-heroS{font-size:10.5px; color:#6f6f79; line-height:1.45}
.kf-heroB{display:inline-block; margin-top:8px; font-size:9.5px; font-weight:700; color:#fff;
  background:var(--m-accent); border-radius:calc(var(--m-radius) * .6); padding:4px 9px}

.kf-sek{border:1px solid var(--kf-line); border-radius:var(--m-radius); padding:9px 10px;
  margin-bottom:7px; background:#fafafa; animation:kf-auf .25s ease}
.kf-sekk{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.kf-sekk b{font-size:10.5px; flex:1; min-width:0}
.kf-sekk i{font-style:normal; font-size:9.5px; font-weight:700; color:var(--m-accent)}
/* Reihenfolge ändern: Ziehen mit der Maus UND zwei Knöpfe. Ziehen allein
   reichte nicht — mit dem Finger und mit der Tastatur geht es nicht. */
.kf-sek[draggable="true"]{cursor:grab}
.kf-sek.kf-zieht{opacity:.4; cursor:grabbing}
.kf-sek.kf-ziel{outline:2px dashed var(--kf-accent-fill); outline-offset:2px}
.kf-schieb{display:flex; gap:2px; flex:0 0 auto}
.kf-schieb button{border:1px solid var(--kf-line); background:#fff; border-radius:5px;
  width:18px; height:18px; padding:0; font-size:8px; line-height:1; color:var(--kf-soft); cursor:pointer}
.kf-schieb button:hover:not([disabled]){border-color:var(--kf-accent); color:var(--kf-accent-text)}
.kf-schieb button[disabled]{opacity:.3; cursor:default}
.kf-reihehint{margin:0 0 7px; font-size:10px; color:var(--kf-soft)}
.kf-zeile{display:flex; justify-content:space-between; gap:8px; font-size:9.5px; color:#52525b;
  padding:3px 0; border-bottom:1px dotted #00000012}
.kf-zeile:last-child{border-bottom:0}
/* Ohne Breite bleibt der Platzhalterbalken unsichtbar: seine 55 % beziehen
   sich auf ein Elternteil, das im Flex auf null schrumpft. */
.kf-zeile>span:first-child{flex:1; min-width:0}
.kf-feld{height:14px; border-radius:calc(var(--m-radius) * .5); background:#fff;
  border:1px solid #e0e0e6; margin-bottom:4px}
.kf-knopf{display:inline-block; font-size:9px; font-weight:700; color:#fff; background:var(--m-accent);
  border-radius:calc(var(--m-radius) * .6); padding:4px 8px}
.kf-chip{display:inline-block; font-size:8.5px; background:#eef0f4; color:#52525b; border-radius:999px;
  padding:2px 7px; margin:0 3px 3px 0}
.kf-chip.kf-gruen{background:#dcfce7; color:var(--kf-green); font-weight:700}
/* Vier statt drei Spalten und feste Höhe: quadratische Kacheln über die
   volle Breite machten aus der Galerie-Skizze den halben Ausschnitt. */
.kf-tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.kf-tile{height:34px; border-radius:calc(var(--m-radius) * .6);
  background:linear-gradient(135deg,#dbeafe,#fde68a);
  background:linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 22%, #fff),
                                     color-mix(in srgb, var(--m-accent) 55%, #fff))}
.kf-tile.kf-leer{background:repeating-linear-gradient(45deg,#f6f6f8,#f6f6f8 6px,#efeff2 6px,#efeff2 12px);
  border:1px dashed #d8d8de}
.kf-karten{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.kf-spalte{border:1px solid #e6e6eb; border-radius:6px; padding:5px; background:#fff}
.kf-kal{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.kf-kt{aspect-ratio:1; border-radius:3px; background:#f1f1f4; font-size:7px; display:grid;
  place-items:center; color:#8b8b95}
.kf-kt.kf-frei-t{background:#dcfce7; color:var(--kf-green); font-weight:700}
.kf-avatare{display:flex; gap:5px; align-items:center}
.kf-av{width:22px; height:22px; border-radius:50%; background:linear-gradient(135deg,#dbeafe,#fde68a);
  background:linear-gradient(135deg, color-mix(in srgb, var(--m-accent) 22%, #fff),
                                     color-mix(in srgb, var(--m-accent) 55%, #fff))}
.kf-av.kf-leer{background:#eeeef2}
.kf-sterne{color:#f59e0b; font-size:9px; letter-spacing:1px}
.kf-karteb{height:44px; border-radius:6px; margin-top:5px;
  background:
    linear-gradient(#00000010 1px,transparent 1px) 0 0/100% 11px,
    linear-gradient(90deg,#00000010 1px,transparent 1px) 0 0/11px 100%,
    #eef2f6;
  position:relative}
.kf-karteb::after{content:"📍"; position:absolute; left:50%; top:50%; transform:translate(-50%,-60%); font-size:11px}

.kf-wirkung{display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:12px}
.kf-w{border:1px solid var(--kf-line); background:#ffffff8c; backdrop-filter:blur(10px);
  border-radius:13px; padding:11px 12px}
.kf-wl{font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--kf-soft); margin-bottom:4px}
.kf-wv{font-size:16px; font-weight:700; letter-spacing:-.3px}
.kf-wv.kf-gut{color:var(--kf-green)}

.kf-serp{margin-top:11px; border:1px solid var(--kf-line); border-radius:13px; padding:12px;
  background:#fff; font-size:11.5px; opacity:.4; transition:.3s}
.kf-serp.kf-an{opacity:1}
.kf-serp .kf-t{color:#1a0dab; font-size:13px; margin-bottom:2px}
.kf-serp .kf-u{color:#006621; font-size:10.5px; margin-bottom:3px}
.kf-serp .kf-s{color:#4d5156; line-height:1.45}
.kf-ki{margin-top:9px; border:1px solid var(--kf-blue); background:#70b5ff1f; border-radius:13px;
  padding:12px; font-size:11.5px; display:none; line-height:1.5}
.kf-ki.kf-an{display:block; animation:kf-auf .3s ease}
.kf-ki .kf-b{font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.8px;
  color:var(--kf-blue-text); margin-bottom:5px}
.kf-pflege{margin-top:9px; border:1px solid var(--kf-line); border-radius:13px; padding:11px 12px;
  background:#ffffff8c; font-size:11.5px; color:var(--kf-muted); display:none}
.kf-pflege.kf-an{display:block; animation:kf-auf .3s ease}
.kf-pflege b{color:var(--kf-ink)}

/* ── Leiste unten ─────────────────────────────────────── */
.kf-leiste{position:fixed; left:0; right:0; bottom:0; z-index:20; border-top:1px solid var(--kf-line);
  background:#ffffffe6; backdrop-filter:blur(20px); box-shadow:0 -4px 24px #00000014;
  transition:transform .25s ease}
.kf-leiste.kf-weg{transform:translateY(115%)}
.kf-leistein{max-width:1180px; margin:0 auto; padding:13px 24px; display:flex; align-items:center;
  gap:14px; flex-wrap:wrap}
.kf-preis{font-size:26px; font-weight:700; letter-spacing:-.7px; line-height:1}
.kf-preis small{display:block; font-size:11.5px; font-weight:500; color:var(--kf-soft);
  letter-spacing:0; margin-top:4px}
.kf-sp{flex:1}
.kf-btn{border:0; border-radius:10px; padding:12px 22px; font-size:15px; font-weight:600;
  color:#fff; background:var(--kf-accent-fill); cursor:pointer;
  box-shadow:inset 0 1px 0 0 #ffffff59, 0 4px 16px 0 #f59e0b59}
.kf-btn.kf-ghost{background:#ffffffb3; color:var(--kf-muted); border:1px solid var(--kf-line); box-shadow:none}
.kf-btn[hidden]{display:none}
.kf-hinweis{width:100%; font-size:11px; color:var(--kf-soft); margin:2px 0 0}
.kf-nurmobil{display:none}
.kf-ende{height:1px}

/* ── Schmal ───────────────────────────────────────────────
   Ein Schritt je Bildschirm passt hier ohnehin besser. Die Vorschau
   steht deshalb fest oben statt in einem eigenen Blatt — sie ist der
   Grund, warum jemand überhaupt weiterklickt. */
@media(max-width:960px){
  .kf-grid{grid-template-columns:1fr; padding-bottom:120px; gap:18px}
  .kf-head{padding-top:120px}
  .kf-h1{font-size:29px; letter-spacing:-.7px}
  .kf-lead{font-size:15.5px}
  .kf-wrap{padding:0 16px}
  .kf-karte{padding:20px 17px 18px; border-radius:17px}
  .kf-fort{display:none}
  .kf-fort-schmal{display:block}
  .kf-wege{grid-template-columns:1fr}
  .kf-vorschau{position:relative; order:-1}
  .kf-viewport{max-height:250px}
  .kf-mbody{padding-left:15px}
  .kf-leistein{padding:10px 16px; gap:10px}
  /* Schmal passt der Vergleich nicht mehr in die Leiste, ohne sie
     zweireihig zu machen. Er steht dort in der Sache selbst: auf den
     beiden Weg-Karten und im Vergleichsblock der Übersicht. */
  .kf-vergl{display:none}
  .kf-preis{font-size:19px; flex:0 0 auto}
  .kf-preis small{font-size:10.5px}
  .kf-sp{display:none}
  .kf-btn{padding:11px 14px; font-size:14px}
  #kfWeiter{margin-left:auto}
  .kf-hinweis{display:none}
}
@media(max-width:400px){
  .kf-wrap{padding:0 12px}
  .kf-h1{font-size:26px}
  .kf-leistein{padding:9px 12px; gap:8px}
  .kf-preis{font-size:17px}
  .kf-btn{padding:10px 12px; font-size:13.5px}
  .kf-opt,.kf-mkopf{padding:12px; gap:10px}
  .kf-optn,.kf-mn{font-size:14.5px}
  .kf-optd,.kf-md{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  #kf *{animation:none !important; transition:none !important}
}