/* Schriften liegen im eigenen Verzeichnis – keine Verbindung zu Google Fonts,
   damit beim Seitenaufruf keine IP-Adresse an Dritte geht.

   Fließtext: Inter (SIL Open Font License, Lizenztext in INTER-OFL.txt).
   Nur der Latin-Ausschnitt, drei Schnitte – das reicht für Deutsch samt
   Umlauten und kostet zusammen rund 70 KB. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/inter-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Archivo Black";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/archivo-black-latin-400-normal.woff2") format("woff2")}

:root{
  --deep:#0B1F33;--steel:#173347;--fog:#EDF1F4;--paper:#fff;
  --signal:#EA580C;--celadon:#14746B;--muted:#5A6C7A;
  --line:rgba(11,31,51,.14);--line-dark:rgba(255,255,255,.16);
  --sans:"Inter",system-ui,sans-serif;
  /* Hieß einmal Monospace und heißt aus Gewohnheit weiter so: die Variable
     steht für die kleinen, gesperrten Beschriftungen — Knöpfe, Etiketten,
     Preise, Laufband. Seit der Umstellung ist es dieselbe Schrift wie im
     Fließtext, nur anders gesetzt. */
  --mono:"Inter",system-ui,sans-serif;
  --display:"Archivo Black",var(--sans);
  --pad:clamp(18px,4vw,64px);
}
/* Eine Proportionalschrift setzt die 1 schmaler als die 8. In Fließtext ist
   das richtig, in untereinanderstehenden Preisen und Laufleistungen sieht es
   aus, als wäre die Spalte verrutscht. `tabular-nums` gibt allen Ziffern
   dieselbe Breite — genau das, was die Monospace vorher nebenbei erledigt hat. */
.mono,.num,.price,.sim-price,.car-year,.car-specs,.ccm,.count,.plate,.calc-line,
.opt-total,.rate-hint,.crumbs,table td,table th,.stats dt{font-variant-numeric:tabular-nums}

*{box-sizing:border-box}
[hidden]{display:none!important}
section[id],header[id],div[id="fahrzeuge"]{scroll-margin-top:76px}
body{margin:0;background:var(--fog);color:var(--deep);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;line-height:1.05;margin:0}
h1{font-size:clamp(2.1rem,5vw,3.8rem)}
h2{font-size:clamp(1.5rem,3vw,2.3rem)}
h3{font-size:1.02rem}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.band{padding:clamp(46px,6vw,88px) 0}
.eyebrow{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--signal)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}

.manifest{background:#061524;color:rgba(255,255,255,.7);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 0;white-space:nowrap;overflow:hidden}
.manifest span{margin-right:2em}
.manifest b{color:var(--signal);font-weight:500}

body>nav{position:sticky;top:0;z-index:50;background:rgba(11,31,51,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-dark);color:#fff}
.nav-in{display:flex;align-items:center;gap:26px;height:62px}
.logo{font-family:var(--display);font-size:1.12rem;letter-spacing:-.03em;text-decoration:none}
.logo i{color:var(--signal);font-style:normal}
.logo small{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;border:1px solid var(--line-dark);padding:2px 5px;margin-left:7px;vertical-align:2px}
.nav-links{display:flex;gap:22px;margin-left:auto;font-size:.9rem}
.nav-links a{text-decoration:none;opacity:.82}
.nav-links a:hover{opacity:1;color:var(--signal)}

.btn{display:inline-block;font-family:var(--mono);font-size:.76rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:13px 20px;border:1px solid transparent;cursor:pointer;transition:transform .16s,background .16s}
.btn-signal{background:var(--signal);color:#fff}
.btn-signal:hover{transform:translateY(-2px);background:#c9490a}
.btn-ghost{border-color:currentColor;background:none;color:inherit}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:8px 13px;font-size:.68rem}
.btn-line{background:none;border:1px solid var(--line);color:var(--deep)}
.btn-line:hover{background:var(--deep);color:#fff}
.btn-danger{background:none;border:1px solid #B4341C;color:#B4341C}
.btn-danger:hover{background:#B4341C;color:#fff}

/* hero */
.hero{background:var(--deep);color:#fff;padding:clamp(40px,6vw,84px) 0;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:auto -10% -60% 45%;height:70%;background:radial-gradient(ellipse at center,rgba(234,88,12,.22),transparent 68%);pointer-events:none}
.hero-in{position:relative;z-index:1;max-width:60ch}
.hero h1{margin:14px 0 0}
.hero h1 em{font-style:normal;color:var(--signal)}
.lede{margin-top:18px;font-size:1.06rem;color:rgba(255,255,255,.8)}
.hero-cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}

/* Formularfelder außerhalb der Suche (Rechner, Tracking) */
.f label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.f input,.f select{width:100%;font-family:var(--mono);font-size:.92rem;padding:10px;border:1px solid var(--line);background:var(--fog);color:var(--deep)}

/* ==========================================================================
   Bestandssuche: Filterspalte links, Ergebnisse rechts
   ========================================================================== */
.listing{padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(40px,5vw,70px)}
.listing-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:22px}
#filter-open{display:none}

.listing-grid{display:grid;grid-template-columns:300px 1fr;gap:22px;align-items:start}

/* ---- Filterspalte ---- */
.filter-panel{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--signal);position:sticky;top:78px;display:flex;flex-direction:column;max-height:calc(100vh - 96px)}
.filter-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line);flex:0 0 auto}
.filter-head h3{font-size:1.05rem;margin-right:auto}
.linkish{background:none;border:0;padding:0;cursor:pointer;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--signal);text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:#c9490a}
.filter-x{display:none}
.filter-body{padding:4px 18px 18px;overflow-y:auto;flex:1 1 auto}
.filter-foot{padding:14px 18px;border-top:1px solid var(--line);background:var(--paper);flex:0 0 auto}
.filter-foot .btn{width:100%}
#filter-apply:disabled{background:var(--fog);color:var(--muted);cursor:default;transform:none}
#filter-apply.dirty{box-shadow:0 0 0 3px rgba(234,88,12,.22)}

.fg{margin-top:14px}
.fg label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.fg input,.fg select,.pair select{width:100%;font-family:var(--sans);font-size:.92rem;padding:10px 11px;border:1px solid var(--line);background:var(--paper);color:var(--deep)}
.fg select:disabled{background:var(--fog);color:var(--muted);cursor:not-allowed}
.fl{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:20px 0 7px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:9px}

.checks{display:flex;flex-direction:column;gap:2px}
.check{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:.9rem;cursor:pointer}
.check input{width:17px;height:17px;flex:0 0 auto;accent-color:var(--signal);margin:0}
.check span{flex:1}
.check em{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-style:normal}

.toggles{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.toggle{font-family:var(--sans);font-size:.88rem;padding:10px 8px;border:1px solid var(--line);background:var(--paper);color:var(--deep);cursor:pointer}
.toggle em{font-family:var(--mono);font-size:.72rem;color:var(--muted);font-style:normal}
.toggle:hover{border-color:var(--deep)}
.toggle.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.toggle.on em{color:rgba(255,255,255,.6)}

.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 6px}
.swatch{background:none;border:0;padding:4px 0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.swatch .dot{width:34px;height:34px;border-radius:50%;display:block;box-shadow:0 0 0 1px rgba(11,31,51,.1)}
.swatch .dot.ring{box-shadow:0 0 0 1px rgba(11,31,51,.28)}
.dot-label{font-size:.68rem;color:var(--muted);line-height:1.2;text-align:center}
.swatch.on .dot{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--signal)}
.swatch.on .dot-label{color:var(--deep);font-weight:500}
.swatch:disabled{opacity:.3;cursor:not-allowed}
.swatch:disabled .dot-label{text-decoration:line-through}

/* ---- Ergebnisspalte ---- */
.listing-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.count{font-family:var(--mono);font-size:.85rem;color:var(--muted);margin:0}
.count b{color:var(--deep);font-weight:500}
.sortbox{display:flex;align-items:center;gap:9px}
.sortbox label{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sortbox select{font-family:var(--sans);font-size:.88rem;padding:9px 11px;border:1px solid var(--line);background:var(--paper);color:var(--deep)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chips:empty{display:none}
.chip{font-family:var(--mono);font-size:.72rem;padding:6px 10px;border:1px solid var(--line);background:var(--paper);color:var(--deep);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.chip:hover{border-color:var(--signal);color:var(--signal)}
.chip span[aria-hidden]{font-size:.78rem;opacity:.6}
.chip-clear{border-style:dashed;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.filter-veil{position:fixed;inset:0;background:rgba(6,21,36,.55);z-index:60}

/* ---------- Fahrzeugkarten ---------- */
.cars{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.car{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;position:relative}
.car:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,31,51,.13)}
.car-shot{position:relative;aspect-ratio:16/10;background:var(--steel);overflow:hidden;display:flex;align-items:center;justify-content:center}
.car-shot img{width:100%;height:100%;object-fit:cover;display:block}
.no-shot{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.badge{position:absolute;top:10px;left:10px;background:var(--celadon);color:#fff;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;padding:5px 9px;display:inline-flex;gap:5px;align-items:center}
.badge-alt{background:var(--deep)}
/* unten rechts, damit sie dem Garantie-Hinweis oben links nicht ins Gehege kommt */
.state{position:absolute;bottom:10px;right:10px;background:rgba(255,255,255,.94);font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;padding:5px 9px}
.car-body{padding:16px 18px 6px;flex:1;display:flex;flex-direction:column}
.car h3{margin:0;font-size:1.02rem;line-height:1.2}
.car-sub{font-size:.84rem;color:var(--muted);margin-top:4px}
.car-year{font-family:var(--mono);font-size:.8rem;color:var(--muted);margin-top:6px}
.car-specs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.car-specs li{display:inline-flex;align-items:center;gap:5px}
.car-specs svg{width:14px;height:14px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* Registerauszug auf der Karte. Zurückhaltend gesetzt: es ist eine Angabe,
   keine Auszeichnung — „keine Meldung" ist kein Nachweis der Unfallfreiheit. */
.car-hist{margin:9px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--muted);cursor:help}
.car-hist-clean{color:var(--celadon)}
.car-hist-none{opacity:.75}
.hist-warn{color:#8A6A1F;font-weight:500}

.car-price{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.price{font-family:var(--mono);font-size:1.2rem;font-weight:500}
.price s{font-size:.82rem;color:var(--muted);font-weight:400;margin-left:5px}
.ccm{font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.car-cta{width:calc(100% - 36px);margin:14px 18px 18px;text-align:center}

/* Datenblatt, auch in der Detailansicht genutzt */
.sheet-tools{display:flex;align-items:flex-start;gap:8px;flex:0 0 auto}
.link-copy{background:none;border:1px solid var(--line);padding:6px 10px;cursor:pointer;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.link-copy:hover{color:var(--signal);border-color:var(--signal)}

.tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;padding:3px 7px;border:1px solid currentColor}
.t-verfuegbar{color:var(--celadon)}
.t-unterwegs{color:var(--signal)}
.t-reserviert{color:#8A6A1F}
.t-auf_anfrage,.t-verkauft{color:var(--muted)}
.plate{font-family:var(--mono);font-size:.8rem;padding:6px 18px 12px;margin:0}
.plate div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dotted var(--line)}
.plate dt{color:var(--muted)}
.plate dd{margin:0}

/* modal */
.modal{position:fixed;inset:0;z-index:80;background:rgba(6,21,36,.72);display:flex;align-items:flex-start;justify-content:center;padding:5vh 16px;overflow:auto}
.modal[hidden]{display:none}
.sheet{background:var(--paper);max-width:760px;width:100%;border-top:4px solid var(--signal)}
.sheet-head{padding:22px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.x{background:none;border:1px solid var(--line);font-family:var(--mono);font-size:.9rem;width:34px;height:34px;cursor:pointer;flex:0 0 auto}
.sheet-body{padding:22px 24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* forms */
form label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:13px 0 5px}
form input,form select,form textarea{width:100%;font-family:var(--sans);font-size:.98rem;padding:11px;border:1px solid var(--line);background:var(--fog);color:var(--deep)}
form textarea{min-height:92px;resize:vertical}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.msg{margin-top:14px;padding:12px;font-size:.88rem;border-left:3px solid var(--celadon);background:rgba(20,116,107,.1)}
.msg.err{border-color:#B4341C;background:rgba(180,52,28,.1)}

/* tracking */
.track{background:var(--steel);color:#fff}
.track .box{background:rgba(0,0,0,.2);border:1px solid var(--line-dark);padding:22px;margin-top:22px}
.stages{list-style:none;padding:0;margin:18px 0 0;font-family:var(--mono);font-size:.86rem}
.stages li{padding:9px 0 9px 30px;position:relative;border-bottom:1px solid var(--line-dark);color:rgba(255,255,255,.5)}
.stages li::before{content:"○";position:absolute;left:0}
.stages li.done{color:rgba(255,255,255,.85)}
.stages li.done::before{content:"●";color:var(--celadon)}
.stages li.now{color:#fff}
.stages li.now::before{content:"●";color:var(--signal)}

/* steps */
.steps{border-top:1px solid var(--line)}
.step{display:grid;grid-template-columns:70px 1fr 170px;gap:clamp(14px,3vw,34px);padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.step-no{font-family:var(--mono);font-size:.76rem;color:var(--signal)}
.step p{color:var(--muted);font-size:.93rem;margin-top:6px}
.step-when{font-family:var(--mono);font-size:.76rem;text-align:right}

footer{background:var(--deep);color:rgba(255,255,255,.66);font-size:.86rem;padding:44px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
footer h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:0 0 12px}
footer a{text-decoration:none;display:block;padding:3px 0}
.legal a{display:inline;padding:0}
footer a:hover{color:var(--signal)}
.legal{margin-top:32px;padding-top:18px;border-top:1px solid var(--line-dark);font-size:.74rem;display:flex;flex-wrap:wrap;gap:6px 20px}

/* ---------- admin ---------- */
.admin-shell{max-width:1300px;margin:0 auto;padding:24px var(--pad) 70px}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0}
.tab{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 16px;border:1px solid var(--line);background:var(--paper);cursor:pointer}
.tab.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stats div{background:var(--paper);padding:16px 18px}
.stats dt{font-family:var(--mono);font-size:1.7rem}
.stats dd{margin:2px 0 0;font-size:.76rem;color:var(--muted)}
table{width:100%;border-collapse:collapse;background:var(--paper);font-size:.88rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);background:var(--fog)}
td.num{font-family:var(--mono);white-space:nowrap}
.panel{background:var(--paper);border:1px solid var(--line);padding:20px;margin-bottom:22px}
.panel h3{margin-bottom:6px}
.login{max-width:380px;margin:12vh auto;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--signal);padding:28px}
.scroll{overflow-x:auto}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Navigation auf kleinen Schirmen ---------- */
.nav-toggle{display:none;background:none;border:1px solid var(--line-dark);color:#fff;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;cursor:pointer;margin-left:auto}

/* ---------- Bestand: Bilder, Ladezustand, Nachladen ---------- */
.skel{background:linear-gradient(100deg,var(--fog) 30%,#fff 50%,var(--fog) 70%);background-size:220% 100%;animation:shimmer 1.3s linear infinite}
@keyframes shimmer{to{background-position:-220% 0}}
.skel-card{background:var(--paper);border:1px solid var(--line);height:390px}
.more{display:flex;justify-content:center;margin:26px 0 4px}
.empty{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--signal);padding:26px}

/* Galerie in der Detailansicht */
.gallery{display:grid;gap:6px}
.gal-main{aspect-ratio:16/9;background:var(--steel);overflow:hidden}
.gal-main img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumbs{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.gal-thumbs button{flex:0 0 84px;height:56px;padding:0;border:1px solid var(--line);background:var(--steel);cursor:pointer;overflow:hidden}
.gal-thumbs button[aria-current="true"]{border-color:var(--signal);border-width:2px}
.gal-thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.img-note{font-family:var(--mono);font-size:.66rem;color:var(--muted);margin-top:6px}

/* ---------- Rechner ---------- */
.calc-line{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dotted var(--line);font-family:var(--mono);font-size:.82rem}
.calc-line.sum{border-bottom:1px solid var(--deep);font-weight:500}
.calc-line dt{color:var(--muted)}
.calc-line.sum dt{color:var(--deep)}
.switch{display:flex;gap:9px;align-items:flex-start;margin-top:14px;font-family:var(--sans);font-size:.82rem;color:var(--muted);text-transform:none;letter-spacing:0}
.switch input{width:18px;height:18px;flex:0 0 auto;margin-top:2px}
.rate-hint{font-family:var(--mono);font-size:.7rem;color:var(--muted);margin-top:6px}

/* ---------- Rechtsseiten ---------- */
.legal-page{padding:clamp(30px,5vw,62px) var(--pad) 80px;max-width:860px}
.legal-page h1{font-size:clamp(1.8rem,4vw,2.9rem)}
.legal-page h2{font-size:clamp(1.05rem,2vw,1.3rem);margin:34px 0 10px}
.legal-page h3{margin:20px 0 6px}
.legal-page p{margin:0 0 12px;max-width:74ch}
.lede-dark{margin-top:14px;color:var(--muted);font-size:1.02rem}
.legal-nav{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 34px;border-top:1px solid var(--line);padding-top:18px}
.legal-nav a{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:9px 14px;border:1px solid var(--line);background:var(--paper)}
.legal-nav a.on{background:var(--deep);color:#fff;border-color:var(--deep)}
.todo-banner{margin-top:20px;padding:15px 17px;background:rgba(234,88,12,.1);border-left:3px solid var(--signal);font-size:.88rem}
.note{margin:18px 0 8px;padding:15px 17px;background:var(--paper);border-left:3px solid var(--celadon);font-size:.88rem}
.box-plain{background:var(--paper);border:1px solid var(--line);padding:14px 16px}
.form-sample{background:var(--paper);border:1px solid var(--line);padding:20px 22px;font-size:.9rem}
.form-sample .rule{border-bottom:1px solid var(--line);margin:0 0 16px}
.legal-stamp{margin-top:40px;padding-top:16px;border-top:1px solid var(--line);font-size:.74rem}

/* ---------- Backend: Einstellungen ---------- */
.set-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:13px}
.pill{display:inline-block;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;color:var(--celadon)}
.pill.warn{color:var(--signal)}
.reasons{font-family:var(--mono);font-size:.78rem;margin:8px 0 0;padding-left:18px}

/* ---------- Bestandssuche auf schmalen Schirmen ---------- */
@media(max-width:1040px){
  .listing-grid{grid-template-columns:1fr}
  #filter-open{display:inline-block}
  .filter-panel{position:fixed;top:0;left:0;bottom:0;width:min(390px,92vw);max-height:none;z-index:70;
    border:0;border-right:1px solid var(--line);transform:translateX(-100%);transition:transform .22s ease}
  .filter-panel.open{transform:none;box-shadow:0 0 60px rgba(6,21,36,.35)}
  .filter-x{display:block}
  .filter-head{border-top:4px solid var(--signal)}
}

@media(max-width:900px){.grid2,.foot-grid{grid-template-columns:1fr}.step{grid-template-columns:56px 1fr;row-gap:4px}.step-when{grid-column:2;text-align:left}}
@media(max-width:680px){
  .listing-top{align-items:center}
  .listing-bar{align-items:flex-start;flex-direction:column;gap:10px}
  .sortbox{width:100%}
  .sortbox select{flex:1}
  .cars{grid-template-columns:1fr}
  .nav-toggle{display:block}
  .nav-in{flex-wrap:wrap;height:auto;padding-top:11px;padding-bottom:11px;gap:12px}
  .nav-links{display:none;flex-direction:column;gap:0;width:100%;margin-left:0;order:3;border-top:1px solid var(--line-dark);padding-top:8px}
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 0;border-bottom:1px solid var(--line-dark)}
  .nav-in>.btn-signal{order:2}
  .f2{grid-template-columns:1fr}
  .filters{margin-top:0}
  .legal-page h2{margin-top:26px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{nav,.manifest,footer,.legal-nav,.hero-cta{display:none}body{background:#fff}}

/* ==========================================================================
   Fahrzeugseite (server-gerendert, siehe vehicle-page.js)
   ========================================================================== */
.car-page{padding:28px 0 60px}
.crumbs{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.crumbs a:hover{color:var(--signal)}
.crumbs span{margin:0 4px}

.car-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:20px}
.car-head h1{font-size:2.1rem;margin:10px 0 4px;line-height:1.1}
.car-page .gal-main{aspect-ratio:16/9}
.gal-empty{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3}

.car-cols{display:grid;grid-template-columns:1fr 360px;gap:34px;margin-top:28px;align-items:start}
.car-cols h2{font-size:1.05rem;margin:0 0 12px}
.car-cols .grid2{gap:0 26px}
.car-text{margin:20px 0 0;max-width:62ch}

.hist{margin-top:26px;border-left:3px solid var(--line);padding:2px 0 2px 16px}
.hist-clean{border-left-color:var(--celadon)}
.hist-none{border-left-style:dashed}
.hist .plate{padding:0}
.hist-note{font-size:.8rem;margin-top:10px;max-width:58ch}

.car-side{position:sticky;top:78px;display:grid;gap:18px}
.price-box{background:var(--fog);padding:18px}
.price-label{display:block;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.price-big{display:block;font-family:var(--display);font-size:2rem;margin-top:6px}
.price-note{font-size:.76rem;margin-top:8px}
.car-form{margin:0}
.car-form label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin:14px 0 5px}
.car-form label.check{display:flex;text-transform:none;letter-spacing:0;font-family:inherit;font-size:.85rem;color:inherit}
.car-form input[type=text],.car-form input[type=email],.car-form input:not([type]),.car-form textarea{width:100%}
.car-form button[type=submit]{width:100%;margin-top:16px}
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-out{margin-top:10px;font-size:.85rem;min-height:1.2em}
.form-out.bad{color:#B4341C}
.form-out.good{color:var(--celadon)}
.car-fallback{font-size:.75rem;margin-top:12px}

.similar{margin-top:52px}
.sim-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:14px}
.sim{display:grid;gap:3px;background:var(--paper);border:1px solid var(--line);padding-bottom:12px;text-decoration:none;color:inherit}
.sim b{font-size:.98rem}
.sim:hover{border-color:var(--signal)}
.sim-shot{aspect-ratio:4/3;background:var(--steel);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:8px}
.sim-shot img{width:100%;height:100%;object-fit:cover}
.sim b,.sim span{padding:0 12px}
.sim span{font-size:.78rem}
.sim-price{font-family:var(--mono);font-size:.92rem;color:var(--ink);margin-top:4px}
.back-link{margin-top:44px;font-family:var(--mono);font-size:.8rem}

.car-body h3 a{color:inherit;text-decoration:none}
.car-body h3 a:hover{color:var(--signal)}
a.car-cta{display:block;text-decoration:none}

@media (max-width:900px){
  .car-cols{grid-template-columns:1fr;gap:26px}
  .car-side{position:static}
  .sim-grid{grid-template-columns:repeat(2,1fr)}
  .car-head h1{font-size:1.6rem}
}
.car-cols .dat-head{margin-top:26px}
.calc-line.opt dt em{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--signal);font-style:normal;margin-left:8px}
.calc-line.opt{opacity:.9}

/* Die ganze Karte ist anklickbar, nicht nur der Knopf. Statt die Karte in ein
   <a> zu packen (was verschachtelte Links ergäbe), spannt der Titel-Link eine
   unsichtbare Fläche über die Karte auf. Vorlesegeräte hören dadurch weiterhin
   genau einen sinnvoll benannten Link. */
.car-link::after{content:'';position:absolute;inset:0;z-index:1}
.car-cta{position:relative;z-index:2}
.car:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(11,31,51,.13)}
.car:has(.car-link:focus-visible){outline:3px solid var(--signal);outline-offset:2px}
.price em{font-family:var(--mono);font-size:.6rem;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:block;margin-top:2px}
.opt-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.opt-head{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.opt-list{margin:0;padding-left:18px;font-size:.88rem}
.opt-list li{padding:2px 0}
.opt-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.opt-total span{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.opt-total b{font-family:var(--mono);font-size:1.1rem}
.opt-note{font-size:.76rem;margin-top:10px}

/* --- Anfragekarten im Backend ------------------------------------------ */
.inq-card{background:var(--paper);border:1px solid var(--line);margin-bottom:16px;padding:16px 18px}
.inq-card header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.inq-card header select{font-family:var(--mono);font-size:.78rem;padding:7px 9px;border:1px solid var(--line);background:var(--fog)}
.inq-ref{font-size:.76rem;letter-spacing:.1em;color:var(--signal)}
.inq-veh{display:flex;gap:14px;align-items:flex-start;padding:14px 0}
.inq-veh-none{display:block;padding:14px 0}
.inq-links{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 0}
.inq-shot{flex:0 0 130px;height:88px;background:var(--fog);overflow:hidden;display:flex;align-items:center;justify-content:center}
.inq-shot img{width:100%;height:100%;object-fit:cover}
.inq-noimg{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.inq-contact{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.inq-msg{background:var(--fog);padding:11px 13px;margin:10px 0 0;font-size:.88rem;white-space:pre-wrap}
.inq-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.inq-foot textarea{width:100%;font-family:var(--sans);font-size:.86rem;padding:9px 11px;
  border:1px solid var(--line);background:var(--fog);color:var(--deep);margin-bottom:10px;resize:vertical}
@media(max-width:600px){.inq-shot{flex-basis:96px;height:64px}}