/* ═══════════════════════════════════════════════════════════════════════════
   vc-kat-startseite.css — Kategorie-Startseite für ALLE Kategorien
   (6 feste Seiten + kategorie.html für jede selbstgebaute Kategorie).

   Betreiber 05.09.2026: „mach es so wie bei Fahrzeuge, wenn man runterscrollt
   … bei jeder neuen Kategorie und bei den sieben … 1 zu 1 genau so wie
   Fahrzeuge, nur zur Kategorie passend."

   HERKUNFT: Die Regeln unter „aus fahrzeuge.html" sind 1:1 aus den <style>-
   Blöcken der Fahrzeuge-Seite GEZOGEN (Skript, nicht abgetippt) und nur um
   den Scope `.vcks` ergänzt, damit gleichnamige Klassen anderer Seiten
   (.sb-btn auf immobilien, .fz-cta auf kategorie) nicht berührt werden.
   Der zweite Teil ist vc-fz-startseite.css (Startseiten-Designsprache) mit
   den IDs fz→ks. Änderungen an der Fahrzeuge-Optik gehören darum ZUERST nach
   fahrzeuge.html / vc-fz-startseite.css und werden dann hier nachgezogen:
     node tools/kat-startseite-css-ziehen.js /tmp/ks-extract.css

   AUFBAU IM DOKUMENT (vc-kat-startseite.js):
     <div id="ksHomeSecs" class="vcks mde-wrap">  … alle Abschnitte …
     <div id="ksLinksWrap" class="vcks mde-wrap"> … Beliebte Suchen …
     <div id="ksMagModal"  class="vcks mag-modal"> Magazin-Fenster
     <section id="vc<Xx>Reco" class="vcKsReco">   Empfehlungen (vc-homereco.js)
   Beide Behälter stehen als ERSTE Kinder des Ergebnisbereichs
   (.browse-wrap bzw. .main) — so bleiben Hochzug (-160px) und Einblend-
   Verlauf der Seite unverändert.

   SICHTBARKEIT: nur Seite 1 ohne Suche/Zusatzfilter. vc-suche.js setzt
   body.vcsu-seite2 / vcsu-frage / vcsu-zusatz; die Vollbild-Suche setzt
   body.vcai-fs. In all diesen Fällen sind die Abschnitte weg — die Liste
   steht dann oben wie gewohnt.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Platzierung + Sichtbarkeit ───────────────────────────────────────── */
#ksHomeSecs, #ksLinksWrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  box-sizing: border-box;
}
#ksLinksWrap { margin-bottom: 2.6rem; }
/* Erste Sektion braucht nach dem Hero keinen Extra-Abstand mehr als die anderen */
body.vcsu-seite2 #ksHomeSecs, body.vcsu-seite2 #ksLinksWrap,
body.vcsu-frage  #ksHomeSecs, body.vcsu-frage  #ksLinksWrap,
body.vcsu-zusatz #ksHomeSecs, body.vcsu-zusatz #ksLinksWrap,
body.vcai-fs     #ksHomeSecs, body.vcai-fs     #ksLinksWrap,
body.vcks-zu     #ksHomeSecs, body.vcks-zu     #ksLinksWrap { display: none !important; }
/* Fahrzeuge: dieselbe Regel für die eigenen Behälter (Seite 2+ = nur Liste) */
body.vcsu-seite2 #fzHomeSecs, body.vcsu-seite2 #fzLinksWrap,
body.vcsu-zusatz #fzHomeSecs, body.vcsu-zusatz #fzLinksWrap { display: none !important; }

/* Ergebniskopf: „Alle Angebote"-Zeile über der Liste, solange die Startseite steht */
.vcks-listenkopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 2.4rem 0 .2rem; padding-top: 1.6rem; border-top: 1px solid var(--vcs-bord, #E2E6EE);
}
.vcks-listenkopf h2 { margin: 0; font-size: clamp(1.25rem, 2.1vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--text, #13233a); }
.vcks-listenkopf p  { margin: 0; color: var(--muted, #6B7A90); font-size: .9rem; }
html[data-theme="dark"] .vcks-listenkopf { border-top-color: #28282e; }
html[data-theme="dark"] .vcks-listenkopf h2 { color: #E8EDF5; }
body.vcsu-seite2 .vcks-listenkopf, body.vcsu-frage .vcks-listenkopf, body.vcsu-zusatz .vcks-listenkopf,
body.vcai-fs .vcks-listenkopf, body.vcks-zu .vcks-listenkopf { display: none !important; }

/* Kategorie-Kacheln (Typen-Raster) ohne Fahrzeug-Piktogramme: Anfangsbuchstabe */
.vcks .mde-type .ks-mono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 10px; font-weight: 800; font-size: 1rem;
  background: var(--vcs-ic, #e3edfb); color: var(--vcs-icfg, #16457e);
}
/* Themen-Fläche statt Foto, wenn es zum Thema (noch) kein Inserat gibt (wie vc-fz-echt.js) */
.vcks [data-vcecht="flaeche"] { background-image: linear-gradient(160deg,#41597c,#22344f) !important; }
html[data-theme="dark"] .vcks [data-vcecht="flaeche"] { background-image: linear-gradient(160deg,#2b3d57,#16233a) !important; }
/* Magazin-Plakette (Live-Zahl) wie auf Fahrzeuge */
.vcks .mag-cnt {
  display: inline-block; margin-left: .5rem; padding: .12rem .5rem; border-radius: 999px;
  font-size: .72rem; font-weight: 800; background: var(--vcs-ic, #e3edfb); color: var(--vcs-icfg, #16457e); vertical-align: middle;
}
.vcks .mag-live { margin: 1.1rem 0 0; padding: 1rem 1.1rem; border-radius: 12px; background: var(--vcs-card2, #F3F5F9); font-size: .92rem; color: var(--vcs-text, #13233a); }
.vcks .mag-live b { display: block; margin-bottom: .3rem; }
.vcks .mag-live button { margin-top: .6rem; border: 0; border-radius: 999px; padding: .55rem 1.1rem; font: inherit; font-weight: 700; background: var(--vcs-cta, #16457e); color: #fff; cursor: pointer; }
.vcks .mag-live button:hover { background: var(--vcs-ctah, #0f3463); }

/* Telefon-Ebene (vc-handy.css kennt nur #fzHomeSecs/#fzLinksWrap) */
html.vch-an #ksLinksWrap { display: none !important; }
html.vch-an #ksHomeSecs { padding-top: 0 !important; margin-top: 0 !important; }
html.vch-an #ksHomeSecs > * {
  background: var(--vch-flaeche) !important; background-image: none !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  padding-top: .2rem !important; padding-bottom: .2rem !important; margin-top: .4rem !important; margin-bottom: .4rem !important;
}

/* ── aus fahrzeuge.html <style> #1 ── */
.vcks .mde-wrap{max-width:1400px;margin:-150px auto 0;padding:0 2rem;position:relative;z-index:6}
@media(max-width:900px){
  .vcks .mde-wrap{padding:0 1rem}
}
.vcks .mde-typesec{background:#1c1d23;border-radius:10px;padding:1.4rem 1.6rem;margin-top:1.1rem;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.vcks .mde-typesec h2{color:#fff;font-size:1.15rem;font-weight:800;margin:0 0 1rem}
.vcks .mde-typegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:.9rem}
.vcks .mde-sellbanner{background:#7c3aed;border-radius:10px;margin-top:1.1rem;padding:2.2rem 2.4rem;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.vcks .mde-sellbanner .sb-inner{max-width:520px}
.vcks .mde-sellbanner h2{color:#fff;font-size:1.55rem;font-weight:800;margin:0 0 .45rem}
.vcks .mde-sellbanner p{color:rgba(255,255,255,.92);font-size:.95rem;margin:0 0 1.3rem}
.vcks .mde-sellbanner .sb-btn{display:inline-block;background:#f0530b;color:#fff;font-weight:700;font-size:.95rem;padding:.85rem 2.8rem;border-radius:6px;text-decoration:none}
.vcks .mde-sellbanner .sb-btn:hover{background:#d64709}
@media(max-width:760px){
  .vcks .mde-typesec,
.vcks .mde-sellbanner{padding:1.2rem 1.1rem}
  .vcks .mde-sellbanner .sb-btn{display:block;text-align:center}
}
body.fz-srp #ksHomeSecs,
body.fz-srp #ksLinksWrap{display:none}
body.fz-srp .vcks .mde-wrap{margin-top:0;padding-top:5.4rem}
#ksHomeSecs,
#ksLinksWrap{margin-top:0;padding-top:0}
.vcks .mde-sec{background:#1c1d23;border-radius:10px;padding:1.4rem 1.6rem;margin-top:1.1rem;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.vcks .mde-sec-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.vcks .mde-sec-head h2{color:#fff;font-size:1.15rem;font-weight:800;margin:0}
.vcks .mde-sec-all{background:none;border:none;color:#fff;font-size:.85rem;font-weight:700;text-decoration:underline;cursor:pointer;font-family:inherit;padding:0}
.vcks .mde-sec-all:hover{color:#f0530b}
.vcks .deal-row-wrap{position:relative}
.vcks .deal-row{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;padding-bottom:.4rem;scrollbar-width:thin}
.vcks .deal-card{flex:0 0 252px;background:#141519;border:1px solid rgba(255,255,255,.07);border-radius:10px;overflow:hidden;cursor:pointer;color:#fff;text-align:left;font-family:inherit;padding:0}
.vcks .deal-card:hover{border-color:rgba(255,255,255,.25)}
.vcks .deal-img{position:relative;height:150px;background-color:#26272e;background-size:cover;background-position:center}
.vcks .deal-heart{position:absolute;top:.5rem;right:.5rem;width:32px;height:32px;border-radius:50%;background:rgba(20,21,25,.85);color:#b794f6;display:flex;align-items:center;justify-content:center}
.vcks .deal-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.3)}
.vcks .deal-body{padding:.8rem .85rem .95rem}
.vcks .deal-title{font-weight:800;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vcks .deal-price{font-size:1.15rem;font-weight:800;margin:.3rem 0 .1rem}
.vcks .deal-price .old{font-size:.8rem;font-weight:600;color:#9a9ba3;text-decoration:line-through;margin-left:.45rem}
.vcks .deal-badge{display:inline-flex;align-items:center;gap:.3rem;background:#f7b28c;color:#3a1503;font-size:.7rem;font-weight:800;padding:.14rem .55rem;border-radius:999px;margin:.25rem 0 .15rem}
.vcks .deal-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#3a1503}
.vcks .deal-chips{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0}
.vcks .deal-chip{background:#26272e;border:1px solid rgba(255,255,255,.08);color:#e8e9ee;font-size:.72rem;font-weight:600;padding:.2rem .5rem;border-radius:6px;white-space:nowrap}
.vcks .deal-loc{display:flex;align-items:center;gap:.3rem;color:#9a9ba3;font-size:.76rem;margin-top:.5rem}
.vcks .deal-next{position:absolute;right:-.5rem;top:40%;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:#26272e;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.vcks .deal-next:hover{border-color:#fff}
.vcks .selcat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .selcat-grid{grid-template-columns:repeat(2,1fr)}
}
.vcks .selcat{background:#141519;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.1rem 1rem;display:flex;align-items:center;gap:.8rem;cursor:pointer;color:#fff;font-family:inherit;text-align:left}
.vcks .selcat:hover{border-color:rgba(255,255,255,.28)}
.vcks .selcat.hl{background:#3d3f75;border-color:transparent}
.vcks .selcat-ico{width:42px;height:42px;border-radius:9px;background:#2c2d34;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.vcks .selcat.hl .selcat-ico{background:rgba(255,255,255,.14)}
.vcks .selcat b{display:block;font-size:.95rem}
.vcks .selcat small{color:rgba(255,255,255,.65);font-size:.78rem}
.vcks .popcat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .popcat-grid{grid-template-columns:1fr}
}
.vcks .popcat{position:relative;border:none;border-radius:10px;overflow:hidden;cursor:pointer;color:#fff;font-family:inherit;text-align:left;min-height:230px;background-color:#141519;background-size:cover;background-position:center;display:flex;flex-direction:column;justify-content:flex-end;padding:1rem}
.vcks .popcat::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,11,14,0) 30%,rgba(10,11,14,.9) 100%)}
.vcks .popcat>*{position:relative;z-index:1}
.vcks .popcat b{font-size:1.15rem;font-weight:800;margin-bottom:.5rem}
.vcks .popcat-pills{display:flex;flex-wrap:wrap;gap:.35rem}
.vcks .popcat-pill{background:rgba(24,25,30,.85);border:1px solid rgba(255,255,255,.14);font-size:.72rem;font-weight:600;padding:.2rem .55rem;border-radius:6px}
.vcks .mde-sellbanner{display:grid;grid-template-columns:1.1fr 1fr;padding:0;overflow:hidden}
.vcks .mde-sellbanner .sb-inner{max-width:none;padding:2.2rem 2.4rem;align-self:center}
.vcks .sb-img{background-color:#5b21b6;background-size:cover;background-position:center;min-height:230px}
@media(max-width:760px){
  .vcks .mde-sellbanner{grid-template-columns:1fr}
  .vcks .sb-img{min-height:160px}
  .vcks .mde-sellbanner .sb-inner{padding:1.4rem 1.2rem}
}
.vcks .brand-grid{display:grid;grid-template-columns:repeat(6,1fr)}
.vcks .brand-cell{background:none;border:none;border-right:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:1.3rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.25rem;cursor:pointer;color:#fff;font-family:inherit}
.vcks .brand-cell:nth-child(6n){border-right:none}
.vcks .brand-cell:hover{background:#25262d}
.vcks .brand-name{font-weight:800;font-size:1rem}
.vcks .brand-count{font-size:.75rem;color:#9a9ba3}
@media(max-width:900px){
  .vcks .brand-grid{grid-template-columns:repeat(3,1fr)}
  .vcks .brand-cell:nth-child(6n){border-right:1px solid rgba(255,255,255,.08)}
  .vcks .brand-cell:nth-child(3n){border-right:none}
}
#ksLinksWrap .mde-sec{padding-bottom:1.8rem}
#ksLinksWrap .fzl-col h3{color:#fff}
#ksLinksWrap .fzl-link{color:#9fb2cc}
#ksLinksWrap .fzl-link:hover{color:#ff7a52}
#ksDealsSec .mde-sec-head h2{font-size:1.6rem}
.vcks .deal-hl{display:inline-flex;align-items:center;gap:.35rem;background:#f7b28c;color:#3a1503;font-size:.82em;font-weight:800;padding:.08em .6em .1em;border-radius:999px;vertical-align:.05em;letter-spacing:.02em}
.vcks .deal-hl::before{content:"";width:7px;height:7px;border-radius:50%;background:#3a1503;flex-shrink:0}
.vcks .deal-img{background-color:#fff!important;background-size:cover!important;background-repeat:no-repeat!important;background-position:center!important}
.vcks .deal-noimg{color:rgba(0,0,0,.25)!important}
.vcks .deal-price .mwst{font-size:.72rem;font-weight:600;color:#c9cad1;margin-left:.15rem}
.vcks .deal-lease{font-size:.8rem;color:#e8e9ee;margin:.1rem 0 .1rem}
.vcks .deal-chip{display:inline-flex;align-items:center;gap:.35rem}
.vcks .deal-chip svg{flex-shrink:0;color:#c9cad1}
.vcks .deal-eco{font-size:.72rem;color:#9a9ba3;margin-top:.45rem;line-height:1.45}
.vcks .fz-guide{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.vcks .fz-guide-left{flex:1;min-width:260px}
.vcks .fz-guide-mark{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.vcks .fz-guide-mark .fzg-spark{color:#f0530b;display:inline-flex}
.vcks .fz-guide-mark b{color:#fff;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.vcks .fz-guide-beta{background:#2c2d34;color:#fff;font-size:.68rem;font-weight:800;padding:.18rem .55rem;border-radius:999px}
.vcks .fz-guide-txt{color:#e8e9ee;font-size:.95rem;margin:0;max-width:680px}
.vcks .fz-guide-btn{display:inline-flex;align-items:center;gap:.6rem;background:#7c3aed;color:#fff;border:none;border-radius:8px;padding:.9rem 1.6rem;font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.vcks .fz-guide-btn:hover{background:#6d28d9}
.vcks .selcat-grid{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;padding-bottom:.4rem;scrollbar-width:thin}
.vcks .selcat{flex:1 0 230px;min-width:230px;padding:0;flex-direction:column;align-items:stretch;gap:0;overflow:hidden}
.vcks .selcat.hl{background:#141519;border-color:rgba(255,255,255,.07)}
.vcks .selcat-img{display:block;height:130px;background-size:cover;background-position:center;background-color:#1c1d23}
.vcks .selcat-low{display:flex;align-items:center;gap:.8rem;padding:1rem}
.vcks .selcat.hl .selcat-ico{background:#3d3d8f}
.vcks .mag-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:1.6rem;margin-bottom:1.7rem;cursor:pointer;background:none;border:none;padding:0;color:#fff;font-family:inherit;text-align:left;width:100%}
.vcks .mag-hero-img{border-radius:8px;min-height:270px;background-size:cover;background-position:center;background-color:#141519}
.vcks .mag-kick{display:block;color:#9a9ba3;font-size:.85rem;font-weight:600;margin:0 0 .5rem}
.vcks .mag-hero h3{color:#fff;font-size:1.85rem;font-weight:800;line-height:1.15;margin:0 0 .8rem}
.vcks .mag-hero .mag-teaser{color:#e8e9ee;font-size:.95rem;line-height:1.55;margin:0 0 .6rem}
.vcks .mag-date{display:block;color:#9a9ba3;font-size:.82rem}
.vcks .mag-hero:hover h3{text-decoration:underline}
.vcks .mag-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 2.6rem}
.vcks .mag-item{display:flex;gap:1rem;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;text-align:left;color:#fff;align-items:flex-start}
.vcks .mag-thumb{width:150px;height:92px;flex-shrink:0;border-radius:8px;background-size:cover;background-position:center;background-color:#141519}
.vcks .mag-item b{display:block;font-size:1rem;font-weight:800;line-height:1.3;margin:.15rem 0 .35rem}
.vcks .mag-item:hover b{text-decoration:underline}
@media(max-width:900px){
  .vcks .mag-hero{grid-template-columns:1fr}
  .vcks .mag-hero-img{min-height:180px}
  .vcks .mag-grid{grid-template-columns:1fr}
}
/* 🚨 Das Fenster trägt .vcks SELBST (kein Vorfahr) — darum beide Schreibweisen, sonst stand es
   als leerer Kasten im Fluss (Betreiber-Bild 05.09.: „was macht diese leere Box da"). */
.vcks.mag-modal,.vcks .mag-modal{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:9000;display:none;align-items:flex-start;justify-content:center;padding:5rem 1rem 2rem;overflow-y:auto}
.vcks.mag-modal.open,.vcks .mag-modal.open{display:flex}
.vcks .mag-modal-box{background:#1c1d23;border:1px solid rgba(255,255,255,.1);border-radius:12px;max-width:720px;width:100%;padding:2rem 2.2rem;color:#e8e9ee}
.vcks .mag-modal-box h3{color:#fff;font-size:1.5rem;font-weight:800;margin:.3rem 0 1rem}
.vcks .mag-modal-box p{line-height:1.65;font-size:.95rem;margin:0 0 1rem}
.vcks .mag-modal-x{float:right;background:#2c2d34;border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:1.05rem;cursor:pointer;font-family:inherit;line-height:1}
.vcks .mag-modal-x:hover{background:#3a3b44}
.vcks .brand-ico{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:#fff;margin-bottom:.45rem}
.vcks .brand-logo{display:block;height:44px;max-width:96px;object-fit:contain;margin-bottom:.45rem}
.vcks .fzsell-row{display:flex;gap:1rem;overflow-x:auto;scroll-behavior:smooth;padding-bottom:.4rem;scrollbar-width:thin}
.vcks .fzsell-card{flex:0 0 220px;background:#141519;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.3rem 1rem 1.1rem;display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;color:#fff;font-family:inherit;text-align:center}
.vcks .fzsell-card:hover{border-color:rgba(255,255,255,.28)}
.vcks .fzsell-logo{width:56px;height:56px;border-radius:50%;object-fit:cover;background:#fff;margin-bottom:.2rem}
.vcks .fzsell-mono{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.3rem;margin-bottom:.2rem}
.vcks .fzsell-name{font-weight:800;font-size:.95rem;line-height:1.25}
.vcks .fzsell-stars{color:#f5b942;font-size:.85rem;letter-spacing:1px}
.vcks .fzsell-stars small{color:#9a9ba3;letter-spacing:0;margin-left:.25rem}
.vcks .fzsell-count{font-size:.78rem;color:#9a9ba3}
.vcks .fzprice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .fzprice-grid{grid-template-columns:repeat(2,1fr)}
}
.vcks .fzprice-tile{background:#141519;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.3rem 1rem;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;cursor:pointer;color:#fff;font-family:inherit;text-align:left}
.vcks .fzprice-tile:hover{border-color:#f0530b}
.vcks .fzprice-tile b{font-size:1.05rem;font-weight:800}
.vcks .fzprice-tile span{font-size:.8rem;color:#9a9ba3}
.vcks .fzprice-tile .fzprice-ico{color:#f0530b;margin-bottom:.3rem}
.vcks .fzreg-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.vcks .fzreg-chip{display:inline-flex;align-items:center;gap:.45rem;background:#141519;border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:.5rem 1rem;color:#fff;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit}
.vcks .fzreg-chip:hover{border-color:#f0530b;color:#f0530b}
.vcks .fzreg-chip small{color:#9a9ba3;font-weight:600}
.vcks .fz-nl-banner{background:linear-gradient(100deg,#7c3aed 0%,#5b21b6 60%,#4c1d95 100%);border-radius:10px;margin-top:1.1rem;padding:2.2rem 2.4rem;box-shadow:0 20px 50px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.vcks .fz-nl-banner h2{color:#fff;font-size:1.45rem;font-weight:800;margin:0 0 .4rem}
.vcks .fz-nl-banner p{color:rgba(255,255,255,.92);font-size:.95rem;margin:0}
.vcks .fz-nl-btn{display:inline-flex;align-items:center;gap:.6rem;background:#f0530b;color:#fff;border:none;border-radius:8px;padding:.9rem 1.8rem;font-size:.95rem;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap}
.vcks .fz-nl-btn:hover{background:#d64709}
.vcks .fz-nl-hint{flex:1 1 100%;color:#fff;font-size:.88rem;margin:0}
.vcks .fz-nl-hint a{color:#ffd9c4;font-weight:800}
.vcks .fz-faq details{border:1px solid rgba(255,255,255,.09);border-radius:8px;background:#141519;margin-bottom:.6rem;overflow:hidden}
.vcks .fz-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;color:#fff;font-weight:800;font-size:.95rem;cursor:pointer}
.vcks .fz-faq summary::-webkit-details-marker{display:none}
.vcks .fz-faq summary::after{content:"+";font-size:1.3rem;color:#f0530b;font-weight:800;flex-shrink:0}
.vcks .fz-faq details[open] summary::after{content:"–"}
.vcks .fz-faq details>div{padding:0 1.2rem 1.1rem;color:#c9cad2;font-size:.9rem;line-height:1.65}
.vcks .fzxcat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .fzxcat-grid{grid-template-columns:1fr}
}
.vcks .fzxcat-tile{background:#141519;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.5rem 1.3rem;display:flex;align-items:center;gap:1rem;color:#fff;text-decoration:none}
.vcks .fzxcat-tile:hover{border-color:#7c3aed}
.vcks .fzxcat-ico{width:46px;height:46px;border-radius:9px;background:#2c2d34;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#b794f6}
.vcks .fzxcat-tile b{display:block;font-size:1rem;font-weight:800}
.vcks .fzxcat-tile small{color:#9a9ba3;font-size:.8rem}
.vcks .fzstat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .fzstat-grid{grid-template-columns:repeat(2,1fr)}
}
.vcks .fzstat{background:#1c1d23;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.7rem 1.2rem;text-align:center}
.vcks .fzstat b{display:block;font-size:2.1rem;font-weight:800;color:#fff;line-height:1.15}
.vcks .fzstat span{font-size:.85rem;color:#9a9ba3}
.vcks .fztrust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .fztrust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .vcks .fztrust-grid{grid-template-columns:1fr}
}
.vcks .fztrust-tile{background:#1c1d23;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.4rem 1.2rem;color:#fff;text-decoration:none;display:block}
.vcks a.fztrust-tile:hover{border-color:#f0530b}
.vcks .fztrust-ico{width:44px;height:44px;border-radius:9px;background:#2c2d34;display:flex;align-items:center;justify-content:center;color:#f0530b;margin-bottom:.7rem}
.vcks .fztrust-tile b{display:block;font-size:.98rem;font-weight:800;margin-bottom:.35rem}
.vcks .fztrust-tile p{margin:0;font-size:.84rem;color:#c9cad2;line-height:1.55}
.vcks .fzfin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:820px){
  .vcks .fzfin-grid{grid-template-columns:1fr}
}
.vcks .fzfin-card{background:#1c1d23;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.8rem 1.6rem;color:#fff}
.vcks .fzfin-card h3{margin:0 0 .5rem;font-size:1.15rem;font-weight:800}
.vcks .fzfin-card p{margin:0 0 1.1rem;font-size:.9rem;color:#c9cad2;line-height:1.6}
.vcks .fzfin-btn{display:inline-flex;align-items:center;gap:.5rem;background:#f0530b;color:#fff;border:none;border-radius:8px;padding:.75rem 1.4rem;font-size:.9rem;font-weight:800;cursor:pointer;font-family:inherit}
.vcks .fzfin-btn:hover{background:#d64709}
.vcks .fzfin-btn.ghost{background:transparent;border:1.5px solid #f0530b;color:#f0530b}
.vcks .fzfin-btn.ghost:hover{background:rgba(240,83,11,.12)}
.vcks .fzrev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){
  .vcks .fzrev-grid{grid-template-columns:1fr}
}
.vcks .fzrev-card{background:#1c1d23;border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:1.3rem 1.2rem;color:#fff}
.vcks .fzrev-stars{color:#f5b942;font-size:.95rem;letter-spacing:1.5px}
.vcks .fzrev-card p{margin:.6rem 0 .8rem;font-size:.88rem;color:#e8e9ee;line-height:1.6}
.vcks .fzrev-meta{font-size:.78rem;color:#9a9ba3}
.vcks .fzrev-meta b{color:#c9cad2}
.vcks .fz-cta-banner{background:#1c1d23;border:1px solid rgba(255,255,255,.09);border-radius:10px;margin-top:1.1rem;padding:2rem 2.2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.vcks .fz-cta-banner h2{color:#fff;font-size:1.35rem;font-weight:800;margin:0 0 .35rem}
.vcks .fz-cta-banner p{color:#c9cad2;font-size:.92rem;margin:0;max-width:600px;line-height:1.55}
.vcks a.fz-nl-btn{text-decoration:none}

/* ── aus fahrzeuge.html <style> #2 ── */
html:not([data-theme="dark"]) .vcks .mde-typesec,
html:not([data-theme="dark"]) .vcks .mde-sec,
html:not([data-theme="dark"]) .vcks .fz-cta-banner{background:#fff;border:1px solid #e6e9ef;box-shadow:0 1px 2px rgba(15,23,42,.06)}
html:not([data-theme="dark"]) .vcks .mde-sec-head h2{color:#0f1722}
html:not([data-theme="dark"]) .vcks .deal-card,
html:not([data-theme="dark"]) .vcks .selcat,
html:not([data-theme="dark"]) .vcks .selcat.hl,
html:not([data-theme="dark"]) .vcks .fzprice-tile,
html:not([data-theme="dark"]) .vcks .fz-faq details{background:#fff;border-color:#e6e9ef;color:#0f1722}
html:not([data-theme="dark"]) .vcks .fzprice-tile span,
html:not([data-theme="dark"]) .vcks .selcat-low small,
html:not([data-theme="dark"]) .vcks .deal-price .old,
html:not([data-theme="dark"]) .vcks .deal-price .mwst{color:#5b6b80}
html:not([data-theme="dark"]) .vcks .deal-chip{background:#f1f3f7;border-color:#e6e9ef;color:#334155}
html:not([data-theme="dark"]) .vcks .deal-next{background:#fff;border-color:#e6e9ef;color:#334155;box-shadow:0 6px 18px rgba(15,23,42,.12)}
html:not([data-theme="dark"]) .vcks .selcat-ico{background:#eef2f7}
html:not([data-theme="dark"]) .vcks .fz-guide-mark b{color:#0f1722}
html:not([data-theme="dark"]) .vcks .fz-guide-txt{color:#475569}
html:not([data-theme="dark"]) .vcks .deal-lease{color:#475569}
html:not([data-theme="dark"]) .vcks .deal-eco,
html:not([data-theme="dark"]) .vcks .deal-loc{color:#5b6b80}
html:not([data-theme="dark"]) .vcks .deal-chip svg{color:#5b6b80}
html:not([data-theme="dark"]) .vcks .fz-faq summary{color:#0f1722}
html:not([data-theme="dark"]) .vcks .fz-faq details>div{color:#475569}
html:not([data-theme="dark"]) .vcks .fz-cta-banner h2{color:#0f1722}
html:not([data-theme="dark"]) .vcks .fz-cta-banner p{color:#475569}
html:not([data-theme="dark"]) .vcks .mde-sec-all{color:#475569}


/* ═══ Startseiten-Designsprache (1:1 aus vc-fz-startseite.css, IDs fz→ks) ═══ */
/* ── 1. Farbwerte der Startseite (eine Quelle für alle Regeln hier) ────────── */
#ksHomeSecs,
#ksLinksWrap,
#ksMagModal,
.vcKsReco {
  --vcs-card:   #ffffff;
  --vcs-card2:  #F3F5F9;                       /* zweite Ebene (Kachel in der Karte) */
  --vcs-bord:   #E2E6EE;
  --vcs-text:   #13233a;
  --vcs-tmid:   #42526a;
  --vcs-tmut:   #6B7A90;
  --vcs-blue:   #1B56CC;
  --vcs-cta:    #16457e;
  --vcs-ctah:   #0f3463;
  --vcs-ic:     #e3edfb;                       /* Symbol-Fläche wie .duo-ic */
  --vcs-icfg:   #16457e;
  --vcs-sh:     0 1px 2px rgba(15,23,42,.06);
  --vcs-shh:    0 12px 32px rgba(12,26,46,.12);
  --vcs-band:   linear-gradient(120deg,#0C1A2E,#10254a);
  --vcs-r:      12px;
  --vcs-rl:     16px;
  --vcs-ease:   cubic-bezier(0.32,0.72,0,1);
  /* Ein Hebel für ALLES, was von Skripten mit var(--fzacc) eingefärbt wird
     (vc-fz-links.js u. a.) — damit verschwindet das Orange auch dort, ohne
     dass jede einzelne Regel nachgezogen werden muss. */
  --fzacc:      #1B56CC;
  --fzacch:     #16457e;
}
html[data-theme="dark"] #ksHomeSecs,
html[data-theme="dark"] #ksLinksWrap,
html[data-theme="dark"] #ksMagModal,
html[data-theme="dark"] .vcKsReco {
  --vcs-card:   #17171c;                       /* neutrales Dunkel wie die übrige Seite */
  --vcs-card2:  #141417;
  --vcs-bord:   #28282e;
  --vcs-text:   #E8EDF5;
  --vcs-tmid:   #9FB2CC;
  --vcs-tmut:   #9AA7BD;
  --vcs-blue:   #5B9BF8;
  --vcs-cta:    #16315c;
  --vcs-ctah:   #1f4480;
  --vcs-ic:     rgba(91,155,248,.14);
  --vcs-icfg:   #8fc3ff;
  --vcs-sh:     0 1px 2px rgba(0,0,0,.28);
  --vcs-shh:    0 12px 32px rgba(0,0,0,.42);
  --vcs-band:   linear-gradient(120deg,#101014,#16223a);
  --fzacc:      #5B9BF8;
  --fzacch:     #8fc3ff;
}

/* ── 2. Sektions-Karte ────────────────────────────────────────────────────── */
/* 🚨 `!important` ist hier PFLICHT, nicht Bequemlichkeit: vc-dark.css setzt
   `[data-theme="dark"] section{background:transparent!important}`. Alle diese
   Abschnitte SIND <section>-Elemente — ohne !important blieben sie im
   Dunkelmodus durchsichtig und es gäbe gar keine Karten. */
/* Betreiber 05.09.2026: „diese Box-Umrandung weg — alles soll im gesamten
   Hintergrund liegen, keine extra Umrandung für die Vorschläge." Die Abschnitte
   (Top-Deals, Neu eingetroffen, Preis gesenkt, Stöbern, Kategorien …) sind keine
   Kästen mehr: kein Hintergrund, kein Rahmen, kein Schatten, kein Innenabstand.
   !important, weil das Seiten-<style> (.mde-sec #1c1d23 + Schatten) sonst
   durchscheint. Der CTA-Banner behält seine eigene Fläche. */
#ksHomeSecs .mde-sec,
#ksHomeSecs .mde-typesec,
#ksLinksWrap .mde-sec {
  background: transparent !important;
  border: 0 none !important;
  border-radius: 0;
  box-shadow: none !important;
  margin-top: 2rem;
  padding: 0 !important;
  color: var(--vcs-text);
}
#ksHomeSecs .fz-cta-banner {
  background: var(--vcs-card) !important;
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-rl);
  box-shadow: var(--vcs-sh);
  margin-top: 1.35rem;
  padding: 1.9rem 1.8rem;
  color: var(--vcs-text);
}
#ksHomeSecs .mde-sec-head { margin-bottom: 1.25rem; }
#ksHomeSecs .mde-sec-head h2,
#ksHomeSecs .mde-typesec h2 {
  color: var(--vcs-text);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}
#ksHomeSecs #ksDealsSec .mde-sec-head h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
/* „Alle anzeigen" wie der Startseiten-Link .duo-link: Blau, fett, ohne Unterstrich */
#ksHomeSecs .mde-sec-all {
  color: var(--vcs-blue);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
}
#ksHomeSecs .mde-sec-all:hover { color: var(--vcs-cta); text-decoration: underline; }
html[data-theme="dark"] #ksHomeSecs .mde-sec-all:hover { color: #8fc3ff; }

/* ── 3. Angebots-Karten (Top-Deals, Neu, Preis gesenkt, Marken-/Typ-Reihen) ──
      Vorbild: .card auf der Startseite (Bild 4:3 auf Weiß, Trennlinie, Titel
      zweizeilig, Preis unten, Hover hebt an). ──────────────────────────────── */
#ksHomeSecs .deal-card {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-r);
  color: var(--vcs-text);
  box-shadow: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#ksHomeSecs .deal-card:hover {
  border-color: rgba(27,86,204,.35);
  box-shadow: var(--vcs-shh);
  transform: translateY(-3px);
}
html[data-theme="dark"] #ksHomeSecs .deal-card:hover { border-color: rgba(91,155,248,.42); }
#ksHomeSecs .deal-img { border-bottom: 1px solid var(--vcs-bord); }
#ksHomeSecs .deal-heart {
  background: rgba(255,255,255,.92);
  border: 1px solid var(--vcs-bord);
  color: var(--vcs-tmut);
}
#ksHomeSecs .deal-heart:hover { color: var(--vcs-blue); border-color: var(--vcs-blue); }
html[data-theme="dark"] #ksHomeSecs .deal-heart { background: rgba(23,23,28,.9); }
#ksHomeSecs .deal-title {
  color: var(--vcs-text);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
#ksHomeSecs .deal-price { color: var(--vcs-text); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
#ksHomeSecs .deal-price .mwst,
#ksHomeSecs .deal-price .old { color: var(--vcs-tmut); }
#ksHomeSecs .deal-lease { color: var(--vcs-tmid); }
#ksHomeSecs .deal-eco,
#ksHomeSecs .deal-loc { color: var(--vcs-tmut); }
#ksHomeSecs .deal-chip {
  background: var(--vcs-card2);
  border: 1px solid var(--vcs-bord);
  color: var(--vcs-tmid);
  border-radius: 6px;
}
#ksHomeSecs .deal-chip svg { color: var(--vcs-tmut); }
/* „DEAL"-Plakette: kein Pfirsich mehr, sondern der Hinweis-Ton der Startseite (.um-note) */
#ksHomeSecs .deal-badge {
  background: rgba(27,86,204,.08);
  border: 1px solid rgba(27,86,204,.2);
  color: var(--vcs-blue);
  font-size: .68rem;
  font-weight: 700;
  border-radius: 6px;
  padding: .18rem .55rem;
}
#ksHomeSecs .deal-badge::before { background: var(--vcs-blue); }
html[data-theme="dark"] #ksHomeSecs .deal-badge {
  background: rgba(91,155,248,.13);
  border-color: rgba(91,155,248,.28);
}
/* Wortmarke „DEALS" in der Überschrift → Vermittco-Blau statt Pfirsich */
#ksHomeSecs .deal-hl { background: var(--vcs-blue); color: #fff; }
#ksHomeSecs .deal-hl::before { background: #fff; }
html[data-theme="dark"] #ksHomeSecs .deal-hl { background: #2E5FB5; color: #fff; }
/* Blätter-Pfeil der Karussells: weiße Scheibe mit feinem Rand wie die Startseite */
#ksHomeSecs .deal-next {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  color: var(--vcs-tmid);
  box-shadow: 0 6px 18px rgba(12,26,46,.12);
  transition: border-color .2s, color .2s;
}
#ksHomeSecs .deal-next:hover { border-color: var(--vcs-blue); color: var(--vcs-blue); }
html[data-theme="dark"] #ksHomeSecs .deal-next { box-shadow: 0 6px 18px rgba(0,0,0,.4); }

/* ── 4. Ausgewählte Kategorien ────────────────────────────────────────────── */
#ksHomeSecs .selcat {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-r);
  color: var(--vcs-text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#ksHomeSecs .selcat:hover {
  border-color: rgba(27,86,204,.35);
  box-shadow: var(--vcs-shh);
  transform: translateY(-3px);
}
/* Die zwei hervorgehobenen Kacheln waren lila (#3d3f75) — jetzt der zarte
   Blauton der Startseite, damit sie sich abheben, ohne fremd zu wirken. */
#ksHomeSecs .selcat.hl {
  background: rgba(27,86,204,.05);
  border-color: rgba(27,86,204,.22);
}
html[data-theme="dark"] #ksHomeSecs .selcat.hl {
  background: rgba(91,155,248,.08);
  border-color: rgba(91,155,248,.24);
}
#ksHomeSecs .selcat-img { background-color: var(--vcs-card2); }
/* 🚨 KEINE Kachel hinter dem Symbol. Betreiber-Vorgabe 13.08.2026 („nur das
   Symbol soll da sein") — vc-symbol-schlicht.js nimmt .selcat-ico/.fztrust-ico/
   .fzxcat-ico die Fläche mit !important. Hier wird deshalb NUR die Farbe
   gesetzt; eine Fläche wäre ein Rückschritt und würde ohnehin verlieren. */
#ksHomeSecs .selcat-ico,
#ksHomeSecs .selcat.hl .selcat-ico { color: var(--vcs-icfg); }
#ksHomeSecs .selcat b { color: var(--vcs-text); }
#ksHomeSecs .selcat small,
#ksHomeSecs .selcat-low small { color: var(--vcs-tmut); }

/* ── 5. Beliebte Kategorien (Foto-Kacheln) — Reise-Kachel wie .catcard ────── */
#ksHomeSecs .popcat {
  border-radius: 14px;
  background-color: #0C1A2E;
  transition: transform .5s var(--vcs-ease), box-shadow .5s var(--vcs-ease);
}
#ksHomeSecs .popcat:hover { transform: scale(1.03); box-shadow: 0 18px 42px rgba(12,26,46,.28); }
#ksHomeSecs .popcat::before {
  background: linear-gradient(to top, rgba(8,18,38,.92), rgba(8,18,38,.55) 34%, rgba(8,18,38,.06) 68%);
}
#ksHomeSecs .popcat b { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
#ksHomeSecs .popcat-pill {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ── 6. Fahrzeugtypen · Preisklassen · Regionen ───────────────────────────── */
#ksHomeSecs .mde-typetile,
#ksHomeSecs .fzprice-tile {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-r);
  color: var(--vcs-text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#ksHomeSecs .mde-typetile:hover,
#ksHomeSecs .fzprice-tile:hover {
  border-color: rgba(27,86,204,.35);
  box-shadow: var(--vcs-shh);
  transform: translateY(-3px);
}
#ksHomeSecs .mde-typetile svg { color: var(--vcs-icfg); }
#ksHomeSecs .mde-typetile .tt-name,
#ksHomeSecs .fzprice-tile b { color: var(--vcs-text); }
#ksHomeSecs .mde-typetile .tt-count,
#ksHomeSecs .fzprice-tile span { color: var(--vcs-tmut); }
#ksHomeSecs .fzprice-tile .fzprice-ico { color: var(--vcs-icfg); }
#ksHomeSecs .fzreg-chip {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  color: var(--vcs-text);
  transition: border-color .2s, color .2s;
}
#ksHomeSecs .fzreg-chip:hover { border-color: var(--vcs-blue); color: var(--vcs-blue); }
#ksHomeSecs .fzreg-chip small { color: var(--vcs-tmut); }

/* ── 7. Anbieter-Karten (beliebt / empfohlen) ─────────────────────────────── */
#ksHomeSecs .fzsell-card {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-r);
  color: var(--vcs-text);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
#ksHomeSecs .fzsell-card:hover {
  border-color: rgba(27,86,204,.35);
  box-shadow: var(--vcs-shh);
  transform: translateY(-3px);
}
#ksHomeSecs .fzsell-mono { border-color: var(--vcs-bord); color: var(--vcs-tmid); }
#ksHomeSecs .fzsell-logo { background: var(--vcs-card2); border: 1px solid var(--vcs-bord); }
#ksHomeSecs .fzsell-name { color: var(--vcs-text); }
#ksHomeSecs .fzsell-count,
#ksHomeSecs .fzsell-stars small { color: var(--vcs-tmut); }

/* ── 8. Bänder: Verkaufen · Benachrichtigen · App · B2B ───────────────────── */
#ksHomeSecs .mde-sellbanner,
#ksHomeSecs .fz-nl-banner {
  background: var(--vcs-band) !important;   /* siehe oben: <section> + vc-dark.css */
  border: none;
  border-radius: var(--vcs-rl);
  box-shadow: var(--vcs-sh);
  margin-top: 1.35rem;
}
#ksHomeSecs .mde-sellbanner h2,
#ksHomeSecs .fz-nl-banner h2 { color: #fff; font-weight: 800; letter-spacing: -.02em; }
#ksHomeSecs .mde-sellbanner p,
#ksHomeSecs .fz-nl-banner p { color: rgba(255,255,255,.78); }
/* Knopf im dunklen Band = weiß mit navy Schrift (.btn-white2 der Startseite) */
#ksHomeSecs .mde-sellbanner .sb-btn,
#ksHomeSecs .fz-nl-banner .fz-nl-btn {
  background: #fff;
  color: var(--vcs-cta);
  border-radius: 10px;
  font-weight: 700;
  transition: background .2s, transform .15s;
}
#ksHomeSecs .mde-sellbanner .sb-btn:hover,
#ksHomeSecs .fz-nl-banner .fz-nl-btn:hover { background: #eef3ff; transform: translateY(-1px); }
html[data-theme="dark"] #ksHomeSecs .mde-sellbanner .sb-btn,
html[data-theme="dark"] #ksHomeSecs .fz-nl-banner .fz-nl-btn { color: #10254a; }
#ksHomeSecs .fz-nl-hint { color: rgba(255,255,255,.8); }
#ksHomeSecs .fz-nl-hint a { color: #8fc3ff; }
#ksHomeSecs .sb-img { background-color: #10254a; }
/* App-/B2B-Banner sind helle Karten → Knopf navy mit weißer Schrift (.btn-cta) */
#ksHomeSecs .fz-cta-banner h2 { color: var(--vcs-text); font-weight: 800; letter-spacing: -.02em; }
#ksHomeSecs .fz-cta-banner p { color: var(--vcs-tmid); }
#ksHomeSecs .fz-cta-banner .fz-nl-btn,
#ksHomeSecs .fzfin-btn,
#ksHomeSecs .fz-guide-btn {
  background: var(--vcs-cta);
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  transition: background .2s, box-shadow .2s, transform .15s;
}
#ksHomeSecs .fz-cta-banner .fz-nl-btn:hover,
#ksHomeSecs .fzfin-btn:hover,
#ksHomeSecs .fz-guide-btn:hover {
  background: var(--vcs-ctah);
  box-shadow: 0 8px 24px rgba(22,69,126,.32);
  transform: translateY(-1px);
}
#ksHomeSecs .fzfin-btn.ghost {
  background: transparent;
  border: 1.5px solid var(--vcs-cta);
  color: var(--vcs-cta);
  box-shadow: none;
}
#ksHomeSecs .fzfin-btn.ghost:hover { background: rgba(22,69,126,.08); box-shadow: none; }
html[data-theme="dark"] #ksHomeSecs .fzfin-btn.ghost { border-color: #5B9BF8; color: #8fc3ff; }

/* ── 9. Guide-Box ─────────────────────────────────────────────────────────── */
#ksHomeSecs .fz-guide-mark b { color: var(--vcs-text); }
#ksHomeSecs .fz-guide-mark .fzg-spark { color: var(--vcs-blue); }
#ksHomeSecs .fz-guide-beta {
  background: var(--vcs-card2);
  border: 1px solid var(--vcs-bord);
  color: var(--vcs-tmut);
}
#ksHomeSecs .fz-guide-txt { color: var(--vcs-tmid); }

/* ── 10. Finanzieren · Bewertungen · Zahlen · Vertrauen · Andere Kategorien ─ */
#ksHomeSecs .fzfin-card,
#ksHomeSecs .fzrev-card,
#ksHomeSecs .fzstat,
#ksHomeSecs .fztrust-tile,
#ksHomeSecs .fzxcat-tile {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-rl);
  color: var(--vcs-text);
  transition: border-color .2s, box-shadow .2s;
}
#ksHomeSecs a.fztrust-tile:hover,
#ksHomeSecs .fzxcat-tile:hover {
  border-color: rgba(27,86,204,.35);
  box-shadow: var(--vcs-shh);
}
/* Die Karten stehen selbst schon in einer Karte → zweite Ebene leicht getönt,
   damit die Schachtelung nicht als „Rahmen im Rahmen" wirkt (Startseiten-Muster). */
#ksHomeSecs .fzfin-card,
#ksHomeSecs .fzrev-card,
#ksHomeSecs .fzstat,
#ksHomeSecs .fztrust-tile { background: var(--vcs-card2); }
#ksHomeSecs .fzfin-card h3,
#ksHomeSecs .fztrust-tile b,
#ksHomeSecs .fzxcat-tile b { color: var(--vcs-text); font-weight: 800; }
#ksHomeSecs .fzfin-card p,
#ksHomeSecs .fztrust-tile p,
#ksHomeSecs .fzrev-card p { color: var(--vcs-tmid); }
#ksHomeSecs .fzxcat-tile small,
#ksHomeSecs .fzrev-meta { color: var(--vcs-tmut); }
#ksHomeSecs .fzrev-meta b { color: var(--vcs-tmid); }
#ksHomeSecs .fztrust-ico,
#ksHomeSecs .fzxcat-ico { color: var(--vcs-icfg); }   /* Fläche: siehe Hinweis oben */
#ksHomeSecs .fzstat b { color: var(--vcs-cta); font-weight: 800; letter-spacing: -.02em; }
html[data-theme="dark"] #ksHomeSecs .fzstat b { color: #8fc3ff; }
#ksHomeSecs .fzstat span { color: var(--vcs-tmut); }
/* (Der Kfz-Beitragsrechner-Abschnitt #ksVersSec ist am 17.08.2026 entfallen —
   seine Regeln standen hier und sind mit ihm gegangen.) */

/* ── 11. Magazin ──────────────────────────────────────────────────────────── */
#ksHomeSecs .mag-hero,
#ksHomeSecs .mag-item { color: var(--vcs-text); }
#ksHomeSecs .mag-hero-img,
#ksHomeSecs .mag-thumb { border-radius: var(--vcs-r); background-color: var(--vcs-card2); }
#ksHomeSecs .mag-kick {
  color: var(--vcs-blue);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
#ksHomeSecs .mag-hero h3 { color: var(--vcs-text); font-weight: 800; letter-spacing: -.02em; }
#ksHomeSecs .mag-hero .mag-teaser { color: var(--vcs-tmid); }
#ksHomeSecs .mag-item b { color: var(--vcs-text); }
#ksHomeSecs .mag-date { color: var(--vcs-tmut); }
#ksMagModal { background: rgba(12,26,46,.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#ksMagModal .mag-modal-box {
  background: var(--vcs-card);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-rl);
  color: var(--vcs-tmid);
  box-shadow: 0 26px 64px rgba(6,18,40,.34);
}
#ksMagModal .mag-modal-box h3 { color: var(--vcs-text); font-weight: 800; letter-spacing: -.02em; }
#ksMagModal .mag-kick { color: var(--vcs-blue); font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
#ksMagModal .mag-date { color: var(--vcs-tmut); }
#ksMagModal .mag-modal-x {
  background: var(--vcs-card2);
  border: 1px solid var(--vcs-bord);
  color: var(--vcs-tmid);
}
#ksMagModal .mag-modal-x:hover { background: var(--vcs-ic); color: var(--vcs-cta); }

/* Live-Block im Magazin (vc-fz-echt.js) — Zahlen aus dem echten Bestand */
#ksMagModal .mag-live,
#ksHomeSecs .mag-live {
  display: block;
  background: var(--vcs-card2);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-r);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2rem;
}
#ksMagModal .mag-live-h {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--vcs-tmut);
  margin-bottom: .55rem;
}
#ksMagModal .mag-live-row { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-bottom: .9rem; }
#ksMagModal .mag-live-f { display: flex; flex-direction: column; gap: .1rem; }
#ksMagModal .mag-live-f b { font-size: 1.25rem; font-weight: 800; color: var(--vcs-text); letter-spacing: -.02em; line-height: 1.2; }
#ksMagModal .mag-live-f i { font-style: normal; font-size: .78rem; color: var(--vcs-tmut); }
#ksMagModal .mag-live-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--vcs-cta);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .7rem 1.3rem;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
#ksMagModal .mag-live-btn:hover { background: var(--vcs-ctah); }
#ksMagModal .mag-live-none { font-size: .88rem; color: var(--vcs-tmid); margin: 0; }
/* Live-Zahl auf der Magazin-Karte */
#ksHomeSecs .mag-cnt {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(27,86,204,.08);
  border: 1px solid rgba(27,86,204,.2);
  color: var(--vcs-blue);
  border-radius: 999px;
  padding: .12rem .6rem;
  font-size: .72rem;
  font-weight: 700;
  margin-left: .5rem;
  vertical-align: 1px;
}
html[data-theme="dark"] #ksHomeSecs .mag-cnt { background: rgba(91,155,248,.13); border-color: rgba(91,155,248,.28); }

/* ── 12. FAQ + Fahrzeug-Lexikon — Akkordeon der Startseite (.faq-item) ────── */
#ksHomeSecs .fz-faq details {
  background: var(--vcs-card2);
  border: 1px solid var(--vcs-bord);
  border-radius: var(--vcs-r);
  transition: border-color .2s, box-shadow .2s;
}
#ksHomeSecs .fz-faq details[open] {
  border-color: rgba(27,86,204,.32);
  box-shadow: 0 8px 24px rgba(12,26,46,.07);
}
html[data-theme="dark"] #ksHomeSecs .fz-faq details[open] {
  border-color: rgba(91,155,248,.34);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
#ksHomeSecs .fz-faq summary { color: var(--vcs-text); font-size: 1rem; font-weight: 700; }
#ksHomeSecs .fz-faq details[open] summary { color: var(--vcs-blue); }
#ksHomeSecs .fz-faq summary::after {
  content: '+';
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1;
  color: var(--vcs-blue);
}
#ksHomeSecs .fz-faq details[open] summary::after { content: '\2013'; }
#ksHomeSecs .fz-faq details > div { color: var(--vcs-tmid); font-size: .93rem; line-height: 1.7; }

/* ── 13. Beliebte Automarken ──────────────────────────────────────────────── */
#ksHomeSecs .brand-grid { border: 1px solid var(--vcs-bord); border-radius: var(--vcs-r); overflow: hidden; }
#ksHomeSecs .brand-cell {
  color: var(--vcs-text);
  border-right-color: var(--vcs-bord);
  border-bottom-color: var(--vcs-bord);
  transition: background .2s;
}
#ksHomeSecs .brand-cell:hover { background: var(--vcs-card2); }
#ksHomeSecs .brand-grid .brand-cell:nth-last-child(-n+6) { border-bottom: none; }
#ksHomeSecs .brand-name { color: var(--vcs-text); }
#ksHomeSecs .brand-count { color: var(--vcs-tmut); }
#ksHomeSecs .brand-ico { border-color: var(--vcs-bord); color: var(--vcs-tmid); }
@media (max-width: 900px) {
  #ksHomeSecs .brand-grid .brand-cell:nth-last-child(-n+6) { border-bottom: 1px solid var(--vcs-bord); }
  #ksHomeSecs .brand-grid .brand-cell:nth-last-child(-n+3) { border-bottom: none; }
}

/* ── 14. „Beliebte Suchen" (vc-fz-links.js) ───────────────────────────────── */
#ksLinksWrap .fzl-col h3 { color: var(--vcs-text); }
#ksLinksWrap .fzl-link { color: var(--vcs-tmid); }
#ksLinksWrap .fzl-link:hover { color: var(--vcs-blue); }
#ksLinksWrap .fzl-editbtn { border-color: var(--vcs-bord); color: var(--vcs-tmid); }
#ksLinksWrap .fzl-editbtn:hover { border-color: var(--vcs-blue); color: var(--vcs-blue); }

/* ── 15. Für Sie empfohlen (Personalisierung, vc-homereco.js Kategorie-Modus)
      Die Regale bringen ihr eigenes CSS mit (vhr-*) und rechnen mit den
      Startseiten-Variablen — die fehlen auf fahrzeuge.html und werden hier
      gesetzt. Der Rahmen ist dieselbe Karte wie jede andere Sektion.

      🚨 vc-homereco.js hängt sein eigenes <style> ans ENDE des <head> — also
      nach dieser Datei. Bei gleicher Spezifität gewänne es. Darum tragen die
      Regeln hier zusätzlich #ksHomeSecs (zwei Bezeichner statt einem). ───── */
#ksHomeSecs .vcKsReco {
  --card: var(--vcs-card);
  --bord: var(--vcs-bord);
  --off:  var(--vcs-card2);
  --text: var(--vcs-text);
  --tmid: var(--vcs-tmid);
  --tmut: var(--vcs-tmut);
  --blue: var(--vcs-blue);
  --cta:  var(--vcs-cta);
  --ctah: var(--vcs-ctah);
  display: block;
  background: transparent !important;       /* Betreiber 05.09.2026: keine Box um die Vorschläge */
  border: 0 none !important;
  border-radius: 0;
  box-shadow: none !important;
  margin-top: 2rem;
  padding: 0 !important;
  color: var(--vcs-text);
}
#ksHomeSecs .vcKsReco:empty { display: none; }
#ksHomeSecs .vcKsReco .vhr-head {
  color: var(--vcs-text);
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
  text-align: left;
}
#ksHomeSecs .vcKsReco .vhr-sub { color: var(--vcs-tmut); font-size: .88rem; margin: .35rem 0 1.4rem; text-align: left; }
/* Erstes Regal braucht keinen doppelten Abstand zur Unterzeile */
#ksHomeSecs .vcKsReco .vhr-body > .vhr-sh:first-child { margin-top: 0; }
/* Das „grid"-Layout der Regale gibt es auf der Startseite global; hier gehört
   es in den Empfehlungs-Block, sonst stünden die Karten untereinander. */
#ksHomeSecs .vcKsReco .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }
@media (max-width: 520px) { #ksHomeSecs .vcKsReco .grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; } }

/* ── 15b. Bestseller-Regal ohne Rangnummern (Betreiber 05.09.2026: „diese
   Umrandung und Zahlen wegmachen") — die blauen Kreise mit 1…5 kommen aus
   vc-homereco.js (.vhr-ranknum). Nur hier auf der Fahrzeuge-Seite; die
   Startseite bleibt unberührt. ─────────────────────────────────────────────── */
#ksHomeSecs .vcKsReco .vhr-ranknum { display: none !important; }

/* ── 16. Abstände unter der Suchbox ───────────────────────────────────────── */
@media (max-width: 760px) {
  #ksHomeSecs .fz-cta-banner { padding: 1.25rem 1.1rem; border-radius: 14px; }
  #ksHomeSecs .mde-sec,
  #ksHomeSecs .mde-typesec,
  #ksLinksWrap .mde-sec,
  .vcKsReco { padding: 0 !important; border-radius: 0; }
}

/* ── Angebots-Karten der Empfehlungen (.vhr-dl, vc-homereco.js): Titel nicht abschneiden ──
   Betreiber 05.09.2026 (Bild): zweizeiliger Titel wurde in der Mitte der zweiten Zeile
   abgeschnitten. Ursache: die Karte ist fest 378 px hoch, der Textteil (.vhr-dltop) darf
   schrumpfen (min-height:0) — bei Titel + Beschreibung über zwei Zeilen wird der Titel
   auf 29–38 px gedrückt statt 42. Hier: Karte wächst mit (min-height statt height),
   Bildfeld bleibt 189 px (= die bisherigen 50 %), Textteil schrumpft nicht. Gemessen:
   Titel 42 px, Fußzeile innen, alle Karten der Reihe gleich hoch (Flex-Streckung). */
#ksHomeSecs .vcKsReco .vhr-dl { height: auto; min-height: 378px; }
#ksHomeSecs .vcKsReco .vhr-dlm { flex: 0 0 189px; height: 189px; }
#ksHomeSecs .vcKsReco .vhr-dltop { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   BETREIBER-AUFTRAG 10.09.2026 (fehler.pdf, Seite 1, Bild „Top DEALS für dich")
   „mach immer bei den Angeboten, dass links der leere Bereich immer auch mit
    einem Angebot ist. Es soll mittig sein und links/rechts beide gleich viel
    Angebote, so dass man links und rechts scrollen kann und der linke Bereich
    nicht leer bleibt — und rutsche die Übersicht auch bis zur Kante des
    Bildschirms, also das ‚Top Deals für dich'."

   BEFUND (gemessen bei 1920 px): die Regale liefen dank vc-regale.js zwar bis
   an den Fensterrand, ihr Polster hielt die erste Karte aber auf der
   1400-px-Spalte — links blieben 257 px leer, rechts lief die Reihe raus.
   Also unsymmetrisch, genau wie im Bild.

   JETZT: die Abschnitte MIT Karten-Regal laufen selbst bis zum Fensterrand und
   behalten nur ein schmales, links wie rechts gleiches Polster. Überschrift
   und Karten rutschen gemeinsam nach außen, die erste Karte bleibt bündig
   unter der Überschrift, und in beide Richtungen steht ab dem ersten Blick
   ein Angebot.

   ⚠️ vc-regale.js wird NICHT angefasst — der Baustein läuft auch auf der
   Startseite (die ist tabu, siehe Gedächtnis „startseite-nicht-anfassen").
   Er rechnet sein Polster aus der Spaltenbreite und folgt deshalb von allein.
   ⚠️ Rückfall `100%` statt `100vw`: fehlt --vcrg-vw (vc-regale.js noch nicht
   gelaufen), ist der Rand 0 — sonst entstünde waagrechtes Rollen der Seite.
   NUR Optik: kein Markup, keine Funktion, keine Daten. */
#ksHomeSecs { --ksrand: clamp(16px, 2.2vw, 40px); }
#ksHomeSecs > #ksDealsSec,
#ksHomeSecs > #ksNewSec,
#ksHomeSecs > #ksDropSec,
#ksHomeSecs > #ksSelCats,
#ksHomeSecs > #ksSellSec,
#ksHomeSecs > #ksSeenSec,
#ksHomeSecs > #ksRecoSec,
#ksHomeSecs > .vcKsReco,
#ksHomeSecs > #ksMkRows > .mde-sec,
#ksHomeSecs > #ksCondRows > .mde-sec,
#ksHomeSecs > #ksCatRows > .mde-sec,
#ksHomeSecs .mde-sec:has(> .deal-row-wrap) {
  margin-left: calc(50% - var(--vcrg-vw, 100%) / 2);
  margin-right: calc(50% - var(--vcrg-vw, 100%) / 2);
  max-width: none;
  padding-left: var(--ksrand, 24px) !important;
  padding-right: var(--ksrand, 24px) !important;
}
/* Die Zeilen mit den Reihen erben das Polster vom Abschnitt — vc-regale.js
   liest es dort ab (--vcrg-pl) und hält die erste Karte bündig. */
#ksHomeSecs > #ksMkRows,
#ksHomeSecs > #ksCondRows,
#ksHomeSecs > #ksCatRows { --ksrand: clamp(16px, 2.2vw, 40px); }

/* ── „Vermittco als App": die beiden Laden-Zeichen an die rechte Seite ──────
   Auftrag Seite 21 („die Symbole für Appstore und Playstore rechts sind, auf
   der rechten Seite"). Der Banner ist bereits ein Flex-Band; die Zeichen
   bilden rechts eine eigene Gruppe, der Installieren-Knopf bleibt darunter. */
#ksHomeSecs #ksAppSec { align-items: center; }
.vc-store-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-left: auto; }
.vc-store-badge {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem .9rem .55rem;
  border: 1px solid var(--vcs-bord, #e6e9ef);
  border-radius: 12px;
  background: var(--vcs-card, #fff);
  color: var(--vcs-text, #0f1722);
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.vc-store-badge:hover { border-color: var(--vcs-blue, #1b56cc); box-shadow: 0 6px 18px rgba(12,26,46,.12); transform: translateY(-2px); }
.vc-store-badge svg { flex: 0 0 auto; }
.vc-store-badge span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.vc-store-badge small { font-size: .62rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vcs-tmut, #6b7280); }
.vc-store-badge b { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
html[data-theme="dark"] .vc-store-badge { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #E8EDF5; }
html[data-theme="dark"] .vc-store-badge:hover { border-color: #5b9bf8; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
@media (max-width: 700px) { .vc-store-row { margin-left: 0; width: 100%; } }

/* ── Lexikon/FAQ im Folder-Design ──────────────────────────────────────────
   Auftrag Seite 21: „mach, dass diese Fragenbeantwortung das gleiche Design
   hat wie im Folder — und das änderst du bei jeder Kategorie."
   Der „Folder" ist der 21st.dev-„faq-pro"-Look, der seit 04.09.2026 auf
   faq.html, index.html und so-funktioniert-es.html liegt: Reihen OHNE Rand auf
   gedämpfter Fläche, 16-px-Ecken, 10 px Abstand, Frage 15 px/500/24 px,
   Pfeil-nach-unten dreht 180°, Antwort 14 px/24 px gedämpft.
   Werte 1:1 von dort übernommen. NUR Optik. */
#ksHomeSecs .fz-faq { --fp-muted: #f5f7fa; --fp-muted-fg: #6d7480; --fp-fg: #111; }
html[data-theme="dark"] #ksHomeSecs .fz-faq { --fp-muted: #17171c; --fp-muted-fg: #98a6bd; --fp-fg: #E8EDF5; }
#ksHomeSecs .fz-faq details,
html[data-theme="dark"] #ksHomeSecs .fz-faq details {
  border: 0 none;
  border-radius: 16px;
  background: var(--fp-muted);
  margin-bottom: 10px;
  overflow: hidden;
}
#ksHomeSecs .fz-faq summary,
html[data-theme="dark"] #ksHomeSecs .fz-faq summary {
  display: block;
  position: relative;
  padding: 16px 52px 16px 20px;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -.02em;
  color: var(--fp-fg);
  background: transparent;
}
#ksHomeSecs .fz-faq summary::-webkit-details-marker { display: none; }
#ksHomeSecs .fz-faq summary::after,
#ksHomeSecs .fz-faq details[open] summary::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 20px;
  width: 16px;
  height: 16px;
  margin: 0;
  font-size: 0;
  color: var(--fp-muted-fg);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/16px 16px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") center/16px 16px no-repeat;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}
#ksHomeSecs .fz-faq details[open] summary::after { transform: rotate(180deg); }
#ksHomeSecs .fz-faq details > div,
html[data-theme="dark"] #ksHomeSecs .fz-faq details > div {
  padding: 0 20px 20px;
  font-size: 14px;
  line-height: 24px;
  color: var(--fp-muted-fg);
}
@media (prefers-reduced-motion: reduce) {
  #ksHomeSecs .fz-faq summary::after,
  #ksHomeSecs .fz-faq details[open] summary::after { transition: none; }
}

/* ── Die ganze Seite darf sich NICHT waagrecht verschieben lassen ──────────
   BETREIBER-AUFTRAG 10.09.2026 (fehler.pdf, Seite 17):
   „Man kann es nach links und rechts bewegen — bei der Webseite die komplette.
    Es soll alles auf einen Punkt bleiben; nur die Angebote kannst du scrollen,
    nicht die komplette Webseite, um die Angebote zu sehen."
   Ein einziger Baustein, der ein paar Pixel zu breit ist (gemessen: 383 statt
   375 px auf dem Handy), macht die GANZE Seite schiebbar. `clip` statt
   `hidden`: es entsteht KEIN neuer Rollbehälter — klebende Kopfzeilen
   (position:sticky) und die Regale bleiben, wie sie sind. Nur der Überstand
   wird abgeschnitten.
   Die Regale rollen weiter: sie haben ihren eigenen overflow-x. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* ══ 16.09.2026 (Betreiber-Bild 2): der „vermi"-Guide-Kasten („Dein persönlicher Guide …",
   „Wie kann ich dir helfen?") entfällt auf JEDER Kategorie-Startseite — den 7 festen,
   kategorie.html#slug und allen künftigen. Der Abschnitt wird weiter gebaut (vc-kat-startseite.js),
   nur nicht mehr gezeigt; der Chat bleibt über den schwebenden Knopf erreichbar. ══ */
#ksGuideBox{display:none!important}

/* ══ 18.09.2026 (Betreiber-Bild 2, „Für Sie empfohlen"): „mach das mit der Schrift, dass es nicht bei der Kante
   so abschneidet" — nachgezogen aus vc-fz-startseite.css (dort zuerst, siehe Kopf dieser Datei).
   Die Kachel-Titel wurden von -webkit-line-clamp mit „…" gekürzt (gemessen vorher: maschinen 16, immobilien 7).
   Jede Beschriftung im Empfehlungsbereich bekommt eine Zeile mehr; sie liegt unten auf dem Bild und wächst nach
   OBEN in den dunklen Verlauf — nichts wird überdeckt, nichts angeschnitten.
   #ksHomeSecs .vcKsReco (ID + 2 Klassen) schlägt die von vc-homereco.js ans Head-Ende gehängten #vcXxReco-Regeln. ══ */
#ksHomeSecs .vcKsReco .vhr-tct,  #ksHomeSecs .vcKsReco .vhr-btt,  #ksHomeSecs .vcKsReco .vhr-sttl,
#ksHomeSecs .vcKsReco .vhr-dlt,  #ksHomeSecs .vcKsReco .vhr-oit2, #ksHomeSecs .vcKsReco .vhr-rct,
#ksHomeSecs .vcKsReco .vhr-rcot, #ksHomeSecs .vcKsReco .vhr-ralt, #ksHomeSecs .vcKsReco .vhr-pntitle,
#ksHomeSecs .vcKsReco .vhr-qt,   #ksHomeSecs .vcKsReco .vhr-wt,   #ksHomeSecs .vcKsReco .vhr-ht,
#ksHomeSecs .vcKsReco .vhr-aut2, #ksHomeSecs .vcrg-tct { -webkit-line-clamp: 4 !important; }
#ksHomeSecs .vcKsReco .vhr-mtt,  #ksHomeSecs .vcKsReco .vhr-swt { -webkit-line-clamp: 3 !important; }
#ksHomeSecs .vcKsReco .vhr-tcs,  #ksHomeSecs .vcKsReco .vhr-ois,  #ksHomeSecs .vcKsReco .vhr-sws,
#ksHomeSecs .vcKsReco .vhr-rals, #ksHomeSecs .vcrg-tcs { -webkit-line-clamp: 2 !important; }
#ksHomeSecs .vcKsReco .vhr-ext { white-space: normal !important; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2 !important; text-overflow: clip; }