#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 4px}
.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 12px; font-size:44px; line-height:1.08; letter-spacing:-1.1px; font-weight:700}
.kf-lead{margin:0; font-size:17.5px; line-height:1.55; color:var(--kf-muted); max-width:600px}

.kf-schalter{display:flex; gap:10px; margin:26px 0 0; flex-wrap:wrap; align-items:center}
.kf-pill{border:1px solid var(--kf-line); background:#ffffff8c; backdrop-filter:blur(10px);
  border-radius:999px; padding:10px 20px; font-size:15px; font-weight:600;
  color:var(--kf-muted); cursor:pointer; transition:.18s}
.kf-pill[aria-pressed="true"]{background:var(--kf-accent-glass); border-color:var(--kf-accent);
  color:var(--kf-accent-text); box-shadow:inset 0 1px 0 0 var(--kf-edge), 0 4px 16px 0 #f59e0b40}
.kf-trenner{width:1px; height:26px; background:#00000014; margin:0 4px}
.kf-modushint{font-size:13px; color:var(--kf-soft); width:100%; margin:2px 0 0}

/* Fußraum, damit die feste Preisleiste die letzte Karte nicht verdeckt —
   und damit der Sensor am Ende erst greift, wenn wirklich Schluss ist. */
.kf-grid{display:grid; grid-template-columns:1fr 400px; gap:30px; align-items:start; padding:32px 0 110px}

.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; margin-bottom:18px}
.kf-karte h2{margin:0 0 3px; font-size:20px; letter-spacing:-.4px}
.kf-hint{margin:0 0 16px; font-size:13.5px; color:var(--kf-soft); line-height:1.5}
.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-opt.kf-fest{cursor:default}
.kf-mark{flex:0 0 19px; height:19px; margin-top:2px; border-radius:6px; border:1.5px solid #9b9ba6;
  background:#fff; display:grid; place-items:center; font-size:11px; color:#fff; transition:.15s}
.kf-radio>.kf-mark{border-radius:50%}
.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)}

/* Stufen — nur im Ausführlich-Modus */
.kf-stufen{display:none; margin:9px 0 2px 32px; padding-left:14px;
  border-left:2px solid var(--kf-accent-glass); gap:7px; grid-template-columns:1fr}
.kf-stufen.kf-auf{display:grid; animation:kf-auf .25s 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:#ffffffb3; border-radius:11px; padding:10px 12px; cursor:pointer; text-align:left}
.kf-stufe[aria-pressed="true"]{border-color:var(--kf-accent); background:var(--kf-accent-glass)}
.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}

/* ── Vorschau ─────────────────────────────────────────── */
.kf-vorschau{position:sticky; top:18px}
.kf-vorschau-kopf{display:none}
.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}
.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:15px; min-height:210px; max-height:330px; overflow:auto}
.kf-mininav{display:flex; gap:5px; flex-wrap:wrap; margin-bottom:11px}
.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-minihero{height:56px; border-radius:10px; background:linear-gradient(120deg,#e9f3ff,#fff6e6);
  display:grid; place-items:center; font-size:11.5px; color:#6f6f79; margin-bottom:9px}
.kf-mod{border:1px solid var(--kf-line); border-radius:9px; padding:8px 10px; font-size:11px;
  margin-bottom:6px; background:#fafafa; animation:kf-auf .25s ease}
.kf-mod b{display:block; font-size:11px; margin-bottom:1px}
.kf-mod i{font-style:normal; color:var(--kf-accent-text); font-weight:600}

.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}

/* ── Preisleiste ──────────────────────────────────────── */
.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:16px; 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-hinweis{width:100%; font-size:11px; color:var(--kf-soft); margin:2px 0 0}
.kf-nurmobil{display:none}
.kf-ende{height:1px}

/* ── Blatt: Zusammenfassung, mobil auch die Vorschau ──── */
.kf-blatt{position:fixed; inset:0; z-index:40; display:none}
.kf-blatt.kf-an{display:block}
.kf-blatt-hg{position:absolute; inset:0; background:#0f0f1159; backdrop-filter:blur(2px)}
.kf-blatt-in{position:absolute; left:0; right:0; bottom:0; max-height:88vh; overflow:auto;
  background:#fff; border-radius:22px 22px 0 0; padding:22px 22px calc(22px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px #00000038; animation:kf-hoch .28s ease}
@keyframes kf-hoch{from{transform:translateY(14px); opacity:.6}to{transform:none; opacity:1}}
@media(min-width:700px){
  .kf-blatt-in{left:50%; right:auto; bottom:auto; top:50%; transform:translate(-50%,-50%);
    width:min(560px,92vw); border-radius:22px; animation:none}
}
.kf-blatt-in h2{margin:0 0 4px; font-size:22px; letter-spacing:-.5px}
.kf-zu{position:absolute; top:14px; right:16px; border:0; background:#f1f1f4; border-radius:50%;
  width:32px; height:32px; font-size:17px; cursor:pointer; color:var(--kf-muted)}
.kf-zeilen{margin:14px 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-summe{display:flex; justify-content:space-between; align-items:baseline; margin:16px 0 4px}
.kf-summe .kf-z{font-size:24px; font-weight:700; letter-spacing:-.6px}
.kf-blatt .kf-btn{width:100%; margin-top:12px; padding:14px}

/* ── Schmal ───────────────────────────────────────────── */
@media(max-width:960px){
  .kf-grid{grid-template-columns:1fr; padding-bottom:130px}
  .kf-head{padding-top:120px}
  .kf-h1{font-size:31px; letter-spacing:-.7px}
  .kf-lead{font-size:16px}
  .kf-wrap{padding:0 16px}
  .kf-karte{padding:20px 17px 18px; border-radius:17px}
  .kf-nurmobil{display:inline-block}
  .kf-trenner{display:none}   /* baumelt sonst allein am Zeilenende */

  /* Vorschau wird zum Blatt, das über die Leiste geöffnet wird —
     sonst läge sie unter sechs Karten und niemand sähe je eine Wirkung. */
  .kf-vorschau{position:fixed; inset:0; z-index:40; display:none;
    background:#fff; overflow:auto; padding:16px 16px 90px}
  .kf-vorschau.kf-an{display:block; animation:kf-hoch .28s ease}
  .kf-vorschau-kopf{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
  .kf-vorschau-kopf h2{margin:0; font-size:19px; letter-spacing:-.4px}
  .kf-viewport{max-height:none}
  .kf-leiste{z-index:41}
  /* Zwei Reihen statt drei: Preis + Vorschau oben, die beiden
     Handlungsknöpfe darunter je zur Hälfte. */
  .kf-leistein{padding:10px 16px; gap:8px}
  .kf-preis{font-size:20px; flex:0 0 auto}
  .kf-preis small{font-size:10.5px}
  .kf-sp{display:none}
  #kfVorschauAuf{margin-left:auto}
  #kfTeilen, #kfAnfragen{flex:1 1 0; min-width:0}
  .kf-btn{padding:11px 12px; font-size:14px}
  .kf-hinweis{display:none}
  .kf-stufen{margin-left:0; padding-left:11px}
}
@media(max-width:400px){
  .kf-wrap{padding:0 12px}
  .kf-h1{font-size:27px}
  .kf-leistein{padding:9px 12px; gap:8px}
  .kf-preis{font-size:17px}
  .kf-btn{padding:10px 12px; font-size:13.5px}
  .kf-opt{padding:12px 12px; gap:10px}
  .kf-optn{font-size:14.5px}
  .kf-optd{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  #kf *{animation:none !important; transition:none !important}
}