:root {
  --ink:#0a0a0b;        /* schwarz */
  --dark:#161617;       /* dunkelgrau */
  --dark2:#2c2c2f;
  --gray:#6b6b72;       /* mittelgrau */
  --light:#f4f4f5;      /* hellgrau */
  --line:#e4e4e7;
  --card:#ffffff;       /* weiss */
  --bg:#ececee;
  --radius:18px; --radius-sm:13px;
  --shadow:0 30px 70px -28px rgba(0,0,0,.45);
  --shadow-sm:0 10px 28px -14px rgba(0,0,0,.22);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,system-ui,sans-serif;
  color:var(--ink); font-size:15px; line-height:1.5; min-height:100vh; background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}

/* ---------- Animated monochrome background ---------- */
.aurora { position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--bg); }
.aurora::before {
  content:""; position:absolute; inset:-2px;
  background-image:
    linear-gradient(rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size:48px 48px; animation:gridmove 26s linear infinite;
}
@keyframes gridmove { to { transform:translate(48px,48px); } }
.aurora span { position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; }
.aurora span:nth-child(1){ width:58vw;height:58vw;left:-16vw;top:-18vw; background:radial-gradient(circle,rgba(10,10,11,.18),transparent 66%); animation:drift1 22s ease-in-out infinite; }
.aurora span:nth-child(2){ width:50vw;height:50vw;right:-16vw;top:6vh;  background:radial-gradient(circle,rgba(255,255,255,.85),transparent 68%); animation:drift2 28s ease-in-out infinite; }
.aurora span:nth-child(3){ width:48vw;height:48vw;left:18vw;bottom:-22vw; background:radial-gradient(circle,rgba(44,44,47,.16),transparent 66%); animation:drift3 32s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(9vw,7vh) scale(1.1)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-8vw,6vh) scale(1.14)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,-7vh) scale(1.08)} }

/* ---------- Header ---------- */
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:14px;
  padding:calc(16px + env(safe-area-inset-top)) 18px 16px;
  background:var(--ink); color:#fff; box-shadow:0 18px 44px -22px rgba(0,0,0,.7); overflow:hidden;
}
.topbar::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 38%,rgba(255,255,255,.14) 50%,transparent 62%); transform:translateX(-100%); animation:sweep 7s ease-in-out infinite; }
.topbar .logo {
  width:44px; height:44px; border-radius:13px; flex-shrink:0; position:relative; z-index:1;
  background:#fff; color:#000; display:grid; place-items:center; font-size:22px;
  box-shadow:0 8px 20px -6px rgba(0,0,0,.5);
}
.topbar .titles { display:flex; flex-direction:column; line-height:1.1; min-width:0; position:relative; z-index:1; }
.topbar .titles strong { font-size:19px; font-weight:900; letter-spacing:-.5px; text-transform:uppercase; }
.topbar .titles span { font-size:11px; opacity:.6; font-weight:600; white-space:nowrap; letter-spacing:.5px; text-transform:uppercase; }
.topbar .user { margin-left:auto; font-size:12px; opacity:.7; position:relative; z-index:1; }
.topbar a { color:#fff; text-decoration:underline; }
@keyframes sweep { 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(120%)} }

main { max-width:560px; margin:0 auto; padding:18px 14px calc(34px + env(safe-area-inset-bottom)); }
main.center { min-height:74vh; display:flex; align-items:center; }

/* ---------- Status ---------- */
.status { max-width:560px; margin:0 auto; min-height:22px; font-size:12px; color:var(--gray); padding:2px 6px 10px; display:flex; align-items:center; gap:9px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.status.error { color:#000; }
.status.busy { color:var(--ink); }
.status.busy::before { content:""; width:16px; height:16px; flex-shrink:0; border:2.5px solid rgba(0,0,0,.15); border-top-color:#000; border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Cards ---------- */
.card { position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px; box-shadow:var(--shadow-sm); }
.card::before { content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:0 4px 4px 0; background:var(--ink); }
section[data-step] { animation:pop .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes pop { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }

h1,h2 { margin-top:0; }
.hint { margin:0 0 16px; color:var(--gray); font-size:13.5px; font-weight:500; }
.subhead { font-size:11.5px; font-weight:900; color:var(--ink); text-transform:uppercase; letter-spacing:1px; margin:6px 0 12px; }

/* ---------- Buttons ---------- */
.btn {
  position:relative; overflow:hidden; width:100%; padding:16px 18px; border:2px solid var(--ink); border-radius:14px; cursor:pointer;
  background:var(--ink); color:#fff; font-size:15.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.6); transition:transform .14s ease, box-shadow .14s ease, background .14s, color .14s;
}
.btn::after { content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; transform:skewX(-18deg); background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); }
.btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 22px 40px -16px rgba(0,0,0,.6); }
.btn:hover:not(:disabled)::after { animation:shine .85s ease; }
.btn:active:not(:disabled) { transform:translateY(0) scale(.98); }
.btn:disabled { background:#c7c7cc; border-color:#c7c7cc; box-shadow:none; cursor:default; }
.btn.ghost { background:#fff; color:var(--ink); box-shadow:0 8px 20px -14px rgba(0,0,0,.4); }
.btn.ghost:hover { background:var(--ink); color:#fff; transform:translateY(-1px); }
@keyframes shine { to { left:135%; } }

.or { position:relative; text-align:center; color:var(--gray); font-size:11px; font-weight:800; margin:18px 0; text-transform:uppercase; letter-spacing:1.5px; }
.or::before,.or::after { content:""; position:absolute; top:50%; width:33%; height:2px; background:var(--ink); opacity:.12; }
.or::before { left:0; } .or::after { right:0; }

/* ---------- Inputs ---------- */
.filebox { display:block; text-align:center; cursor:pointer; color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:.5px; font-size:13px; border:2px dashed #bdbdc4; border-radius:16px; padding:34px 14px; margin-bottom:12px; background:var(--light); transition:.18s; }
.filebox:hover { border-color:var(--ink); background:#e9e9ec; transform:translateY(-1px); }
.preview { display:block; width:100%; max-height:230px; object-fit:contain; border-radius:14px; border:1px solid var(--line); margin-bottom:12px; box-shadow:var(--shadow-sm); }
textarea { width:100%; padding:13px; border:2px solid #d6d6db; border-radius:13px; font:inherit; font-size:14px; resize:vertical; margin-bottom:10px; background:#fff; transition:.15s; }
textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(0,0,0,.08); }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.grid label { display:flex; flex-direction:column; gap:6px; font-size:10.5px; font-weight:900; color:var(--gray); text-transform:uppercase; letter-spacing:.7px; }
.grid label.req { color:var(--ink); }
input, select { padding:13px; border:2px solid #d6d6db; border-radius:13px; font-size:15px; font-weight:600; color:var(--ink); background:#fff; transition:.15s; width:100%; -webkit-appearance:none; appearance:none; }
select { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%230a0a0b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:36px; }
input:focus, select:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(0,0,0,.08); }
.row { display:flex; gap:11px; margin-top:18px; }
.row .btn { flex:1; }

.login { width:100%; } .login h1 { font-size:24px; font-weight:900; text-transform:uppercase; letter-spacing:-.5px; margin-bottom:16px; }
.err { background:#111; color:#fff; padding:10px 12px; border-radius:12px; margin-bottom:12px; font-size:14px; font-weight:600; }

/* ---------- Result hero (schwarz, riesig) ---------- */
#estimate { position:relative; overflow:hidden; border-radius:var(--radius); padding:26px 24px; margin-bottom:18px; color:#fff; background:var(--ink); box-shadow:var(--shadow); }
#estimate::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent 32%,rgba(255,255,255,.16) 50%,transparent 68%); transform:translateX(-100%); animation:sweep 4.5s ease-in-out infinite 1s; }
#estimate::after { content:"CHF"; position:absolute; right:-4px; bottom:-44px; font-size:180px; font-weight:900; line-height:1; color:rgba(255,255,255,.05); pointer-events:none; letter-spacing:-6px; }
#estimate > * { position:relative; z-index:1; }
#estimate .label { font-size:11px; text-transform:uppercase; letter-spacing:1.2px; opacity:.6; font-weight:800; }
#estimate .big { font-size:48px; font-weight:900; letter-spacing:-2px; margin:6px 0 16px; line-height:1; }
#estimate .market { font-size:15px; opacity:.95; }
#estimate .market strong { font-weight:900; }
#estimate .range { font-size:12.5px; opacity:.6; margin-top:6px; }
#estimate .meta { font-size:11px; opacity:.5; margin-top:10px; text-transform:uppercase; letter-spacing:.5px; }
#estimate.empty { background:#1a1a1b; }
#estimate.empty .big { font-size:21px; letter-spacing:-.5px; }

/* ---------- Comps ---------- */
.listings { list-style:none; margin:0 0 12px; padding:0; }
.listings li { background:#fff; border:1px solid var(--line); border-radius:15px; margin-bottom:11px; overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .14s, box-shadow .14s, border-color .14s; animation:pop .45s cubic-bezier(.16,1,.3,1) both; }
.listings li:hover { transform:translateY(-3px); border-color:var(--ink); box-shadow:0 22px 40px -20px rgba(0,0,0,.5); }
.listings a { display:flex; align-items:center; gap:13px; padding:11px; text-decoration:none; color:inherit; }
.listings img { width:100px; height:74px; object-fit:cover; border-radius:11px; background:var(--light); flex-shrink:0; filter:grayscale(.15); }
.listings .info { flex:1; min-width:0; }
.listings strong { display:block; font-size:14px; font-weight:800; x-white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2;}
.listings .sub { font-size:11px; color:var(--gray); margin-top:3px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.listings .price { font-size:18px; font-weight:900; color:var(--ink); white-space:nowrap; letter-spacing:-.5px; }
.debug { font-size:10.5px; color:var(--gray); margin-bottom:14px; text-align:center; text-transform:uppercase; letter-spacing:.5px; }

/* Fahrzeug-Karte mit Aktions-Buttons (Anschauen / Vergleichen) */
.listings li.vcard { display:flex; flex-direction:column; }
.vbtns { display:flex; gap:8px; padding:0 11px 11px; }
.listings .vbtns a.vbtn { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:11px 12px; border-radius:11px; font-size:11.5px; font-weight:800; text-decoration:none; text-transform:uppercase; letter-spacing:.3px; border:1.5px solid var(--line); background:#fff; color:var(--ink); transition:.14s; white-space:nowrap; }
.listings .vbtns a.vbtn:hover { border-color:var(--ink); transform:translateY(-1px); }
.listings .vbtns a.vbtn.primary { background:var(--ink); color:#fff; border-color:var(--ink); }
.listings .vbtns a.vbtn.primary:hover { opacity:.88; }

/* Filterleiste (Standort + Wunsch-Attribute) */
.vfilter { background:#fff; border:1px solid var(--line); border-radius:15px; padding:11px; margin-bottom:12px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:8px; }
.vfrow { display:flex; gap:8px; }
.vfilter input, .vfilter select { width:auto; padding:11px 12px; border:1.5px solid var(--line); border-radius:11px; font-size:14px; font-weight:600; background-color:var(--light); color:var(--ink); min-width:0; }
.vfilter input.grow { flex:1 1 auto; }
.vfilter input[type="number"] { flex:1 1 0; }
.vfilter select { flex:0 0 auto; width:auto; padding-right:32px; }
.vfilter .btn { flex:0 0 auto; width:auto; padding:11px 18px; }
.vfilter input:focus, .vfilter select:focus { outline:none; border-color:var(--ink); background:#fff; }
.vfhint { font-size:11.5px; font-weight:700; color:var(--gray); padding:2px 2px 0; }
.vfhint.ok { color:var(--ink); }

/* rechte Karten-Spalte: Preis + Distanz-Badge */
.listings .rightcol { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; }
.vdist { font-size:11px; font-weight:900; color:#fff; background:var(--ink); border-radius:999px; padding:2px 9px; white-space:nowrap; letter-spacing:.2px; }
.vdiff { font-size:11px; font-weight:900; border-radius:999px; padding:2px 9px; white-space:nowrap; letter-spacing:.2px; }
.vdiff.under { background:#0a7d2c; color:#fff; }  /* günstiger als Markt-Ø */
.vdiff.over  { background:#b3261e; color:#fff; }  /* teurer als Markt-Ø */

/* Unfallfahrzeug-Markierung in den Vergleichsinseraten */
.listings li.accident { border-color:#b3261e; box-shadow:0 0 0 2px rgba(179,38,30,.85) inset; }
.acc-badge { display:inline-block; background:#b3261e; color:#fff; font-size:9.5px; font-weight:900; padding:1px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.3px; vertical-align:middle; }

/* ---------- Header-Nav + Fahrzeuge-Seite ---------- */
.navlink { margin-left:auto; position:relative; z-index:1; color:#fff; text-decoration:none; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; border:1.5px solid rgba(255,255,255,.4); padding:8px 12px; border-radius:11px; transition:.15s; }
.navlink:hover { background:#fff; color:#000; }
.vsearch { margin-bottom:12px; }
.vsearch input { width:100%; padding:13px 15px; border:2px solid var(--ink); border-radius:13px; font-size:15px; font-weight:600; background:#fff; -webkit-appearance:none; appearance:none; }
.vsearch input:focus { outline:none; box-shadow:0 0 0 4px rgba(0,0,0,.08); }
.vtabs { display:flex; flex-wrap:wrap; gap:8px; padding-bottom:10px; margin-bottom:8px; }
.vtab { flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink); text-decoration:none; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; white-space:nowrap; transition:.14s; }
.vtab span { background:var(--light); color:var(--gray); border-radius:999px; padding:1px 7px; font-size:10px; }
.vtab.active { background:var(--ink); color:#fff; border-color:var(--ink); }
.vtab.active span { background:rgba(255,255,255,.22); color:#fff; }
.vtab:hover:not(.active) { border-color:var(--ink); }
.vempty { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 20px; text-align:center; box-shadow:var(--shadow-sm); }
.vempty strong { font-size:16px; display:block; margin-bottom:6px; }
.vempty p { color:var(--gray); font-size:13.5px; margin:0; }

@media (prefers-reduced-motion: reduce) {
  .aurora span, .aurora::before, .topbar::after, #estimate::before, section[data-step], .listings li { animation:none !important; }
}