/* ============================================================
   FA AUTOMOBILE DZELJADINI — "Nachtschwarz"
   Dunkles Premium-Design · fette Sans (Poppins) · Stil-Referenz jb-motors.de
   Vantis Group 2026
   Kunden-Entscheid 09.07.2026: dunkel, Poppins, schlicht
   (--ink = Textfarbe → auf dunklem Grund hell)
   ============================================================ */

@import url('fonts.css');

:root{
  --bg:#0C0C0E;
  --bg-2:#111114;
  --panel:#141417;
  --panel-2:#1C1C21;
  --ink:#F4F4F1;              /* Text auf dunklem Grund */
  --ink-2:#D9D9D5;
  --ink-dark:#0C0C0E;         /* Text auf hellen Flächen (Buttons) */
  --accent:#FFFFFF;
  --accent-bright:#FFFFFF;
  --silver:#B9B9B4;
  --white:#ffffff;
  --fog:#A7A7AB;
  --fog-dim:#6F6F74;
  --line:rgba(255,255,255,.12);
  --line-strong:rgba(255,255,255,.28);

  --font-display:'Poppins',sans-serif;
  --font-body:'Poppins',sans-serif;
  --font-mono:'Space Mono',monospace;

  --maxw:1280px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}

.container{max-width:var(--maxw);margin:0 auto;padding:0 32px}

/* ── Label (Space Mono) ───────────────────────────────── */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--fog);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--ink)}
.eyebrow.muted{color:var(--fog-dim)}
.eyebrow.muted::before{background:var(--fog-dim)}

/* ── Display Headlines (fette Sans, Stil jb-motors) ───── */
.display{
  font-family:var(--font-display);
  font-weight:700;line-height:1.06;letter-spacing:-0.02em;
}
h1.display{font-size:clamp(40px,6.4vw,88px)}
h2.display{font-size:clamp(30px,4.4vw,58px)}
h3.display{font-size:clamp(21px,2.6vw,32px)}
.accent{font-weight:700;color:var(--fog)}
.outline{color:transparent;-webkit-text-stroke:1.2px var(--ink)}

.lead{font-size:clamp(16px,1.4vw,19px);color:var(--fog);max-width:54ch;font-weight:400}

/* ── Buttons ──────────────────────────────────────────── */
.btn-primary,.btn-outline,.btn-ghost{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  padding:16px 28px;border:1px solid transparent;cursor:pointer;
  transition:all .4s var(--ease);position:relative;overflow:hidden;
}
.btn-primary{background:var(--white);color:var(--ink-dark);border-color:var(--white)}
.btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2);transform:translateY(-2px);box-shadow:0 14px 34px -12px rgba(0,0,0,.6)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-outline:hover{border-color:var(--white);background:var(--white);color:var(--ink-dark);transform:translateY(-2px)}
.btn-ghost{padding:0;color:var(--fog)}
.btn-ghost:hover{color:var(--ink);gap:16px}

/* =========================================================
   NAV
   ========================================================= */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease);
  border-bottom:1px solid transparent;
  background:rgba(12,12,14,0);
}
nav.scrolled{
  background:rgba(12,12,14,.9);backdrop-filter:blur(14px);
  padding:10px 32px;border-bottom:1px solid var(--line);
}
.nav-logo{height:56px;width:auto;transition:height .4s var(--ease)}
nav.scrolled .nav-logo{height:44px}
.nav-links{display:flex;gap:34px}
.nav-links a{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fog);transition:color .25s;position:relative;padding:4px 0;
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--ink);transition:width .3s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-links a.active::after,.nav-links a:hover::after{width:100%}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-tel{font-family:var(--font-mono);font-size:13px;letter-spacing:.06em;color:var(--ink)}
.nav-tel:hover{color:var(--fog)}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-hamburger span{width:24px;height:2px;background:var(--ink);transition:.3s}
.nav-mobile{
  position:fixed;top:0;right:0;bottom:0;width:min(80vw,340px);z-index:999;
  background:var(--bg);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .5s var(--ease);
  display:flex;flex-direction:column;justify-content:center;gap:10px;padding:40px;
}
.nav-mobile.open{transform:translateX(0)}
.nav-mobile a{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--fog);transition:color .25s,padding .25s}
.nav-social{display:flex;align-items:center;gap:16px}
.nav-social a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;color:var(--fog);border:1px solid var(--line);border-radius:50%;transition:all .3s}
.nav-social a:hover{color:var(--ink-dark);background:var(--white);border-color:var(--white)}
.nav-social svg{width:16px;height:16px;display:block}
.nav-mobile a:hover{color:var(--ink);padding-left:8px}

/* =========================================================
   SCROLLYTELLING-HERO — Detail-Zoom-Out
   Beim Scrollen zoomt das Bild vom Detail (Scheinwerfer)
   zum ganzen Platz. Logik: js/scrolly.js
   ========================================================= */
.scrolly{height:320vh;position:relative;background:#101010}
.scrolly-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.scrolly-media{position:absolute;inset:0}
.scrolly-media img{
  width:100%;height:100%;object-fit:cover;
  /* Detail-Punkt: rechter Scheinwerfer/Kotflügel des Porsche (hero-porsche-4k.jpg).
     object-position MUSS dieselben Werte haben wie transform-origin:
     dadurch liegt der Bildpunkt bei jedem Seitenverhältnis (Handy!)
     exakt unter dem Zoom-Zentrum.
     64% statt 59%: Das Porsche-Wappen sitzt bei ca. 33% Bildbreite und ist
     im Originalfoto nur wenige Pixel gross – vergrössert ein goldener Fleck,
     den auch der Topaz-Upscale nicht retten kann. Bei 64%/2.4 liegt es
     ausserhalb des Startausschnitts (sichtbar ab 43%) und erscheint erst
     beim Rauszoomen, wo es klein und unauffällig ist. */
  object-position:64% 60%;
  transform-origin:64% 60%;
  transform:scale(2.4);  /* muss zu ZOOM_START in js/scrolly.js passen */
  will-change:transform;
}
.scrolly-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.05) 40%,rgba(0,0,0,.52))}
.scrolly-step{
  position:absolute;left:0;right:0;bottom:16vh;z-index:3;text-align:center;padding:0 24px;
  opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease);
  pointer-events:none;color:#fff;
}
.scrolly-step.on{opacity:1;transform:none;pointer-events:auto}
.scrolly-step p{font-family:var(--font-display);font-weight:600;font-size:clamp(24px,3.6vw,48px);line-height:1.2;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.scrolly-step.final .eyebrow{color:rgba(255,255,255,.85);justify-content:center}
.scrolly-step.final .eyebrow::before{background:#fff}
.scrolly-step.final h1{color:#fff;margin:16px 0 14px;text-shadow:0 2px 40px rgba(0,0,0,.55)}
.scrolly-step.final .lead{color:rgba(255,255,255,.88);margin:0 auto 30px;text-shadow:0 1px 20px rgba(0,0,0,.5)}
.scrolly-step.final .hero-btns{justify-content:center}
.scrolly .btn-primary{background:#fff;color:var(--ink-dark);border-color:#fff}
.scrolly .btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2)}
.scrolly .btn-outline{color:#fff;border-color:rgba(255,255,255,.55)}
.scrolly .btn-outline:hover{background:#fff;color:var(--ink-dark);border-color:#fff}
.scrolly-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;color:rgba(255,255,255,.75);
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scrolly-cue::after{content:"";width:1px;height:38px;background:linear-gradient(#fff,transparent);animation:cue 1.8s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){
  .scrolly{height:100vh}
  .scrolly-media img{transform:none}
  .scrolly-step{display:none}
  .scrolly-step.final{display:block;opacity:1;transform:none}
}

/* ── Klassischer Hero (Unterseiten-Fallback) ──────────── */
.hero{position:relative;min-height:92vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg-2)}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 32px 88px}
.hero h1{margin:22px 0 26px}
.hero-sub{max-width:50ch;margin-bottom:38px}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap}
.hero-meta{position:absolute;z-index:2;font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog-dim)}
.hero-meta.br{bottom:38px;right:32px;text-align:right}
.hero-meta b{color:var(--ink);font-weight:700}

/* ── Page-Hero (Unterseiten) ──────────────────────────── */
.page-hero{position:relative;padding:clamp(150px,20vw,220px) 0 clamp(50px,7vw,80px);overflow:hidden;border-bottom:1px solid var(--line);background:var(--bg-2)}
.page-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 90% -10%, rgba(255,255,255,.06) 0%, transparent 55%)}
.page-hero .container{position:relative;z-index:2}
/* Transparentes Hintergrundfoto im Seitenkopf (Kunden-Wunsch 09.07.2026) */
.page-hero-bg{position:absolute;inset:0;z-index:0}
.page-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.28}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg, var(--bg-2) 0%, rgba(17,17,20,.72) 40%, rgba(17,17,20,.3) 100%),
  linear-gradient(180deg, rgba(17,17,20,.55) 0%, transparent 45%, var(--bg-2) 100%)}
.page-hero h1{margin:20px 0 18px}
.page-hero p{color:var(--fog);max-width:56ch;font-size:clamp(15px,1.3vw,18px)}

/* =========================================================
   MARQUEE
   ========================================================= */
.marquee{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg);overflow:hidden;padding:16px 0}
.marquee-track{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marq 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:.02em;color:var(--fog-dim);padding:0 28px;display:inline-flex;align-items:center;gap:28px}
.marquee-track span::after{content:"●";color:var(--ink);font-size:8px}
@keyframes marq{to{transform:translateX(-50%)}}

/* =========================================================
   STATS
   ========================================================= */
.stats{border-bottom:1px solid var(--line);background:var(--bg)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:48px 32px;border-right:1px solid var(--line)}
.stat:last-child{border-right:none}
.stat-num{font-family:var(--font-display);font-weight:600;font-size:clamp(36px,4.4vw,58px);line-height:1;color:var(--ink)}
.stat-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog-dim);margin-top:10px}

/* =========================================================
   SECTION shell
   ========================================================= */
.section{padding:clamp(72px,11vw,150px) 0;position:relative}
.section-head{margin-bottom:56px;max-width:760px}
.section-head h2{margin:20px 0 22px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head.center .eyebrow{justify-content:center}

/* ── Manifest ─────────────────────────────────────────── */
/* Spalten 1.1/0.9: die Textspalte braucht die Breite, damit „Autos kaufen."
   in einer Zeile bleibt. Bei 1fr 1fr bricht es nach „Autos" um. */
.manifest{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch;background:var(--panel);border:1px solid var(--line)}
/* Vertikales Padding bewusst knapper als in anderen Sektionen: dieser Textblock
   gibt der Sektion die Höhe, und die Collage daneben soll dabei möglichst nah
   am 4:3 der Originalfotos bleiben, damit kaum beschnitten wird. */
.manifest-text{padding:clamp(32px,2.6vw,34px) clamp(32px,5vw,72px);border-right:1px solid var(--line);align-self:center}
.manifest-text .big{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4.2vw,58px);line-height:1.05;margin:24px 0 26px}
.manifest-img{position:relative;overflow:hidden;background:var(--bg-2)}
.manifest-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* 2x2-Collage (Startseite): absolut im Panel, füllt es exakt aus – dadurch
   entsteht unten kein Spalt und die Höhe kommt sauber vom Textblock daneben.
   Ohne absolute Positionierung fehlt der Collage die Höhenreferenz und sie
   wächst auf die intrinsische Bildhöhe.
   minmax(0,1fr) ist entscheidend: bei blossem 1fr behält die Zeile ihre
   auto-Mindesthöhe, und das hochformatige Interieurfoto zieht die obere Reihe
   auf – das war der ursprüngliche Fehler (oben Rechtecke, unten Quadrate).
   Zellen liegen damit bei ca. 1.31 statt exakt 4:3; der Beschnitt bleibt unter
   2% und ist an den Fahrzeugen nicht zu sehen. */
.manifest-img .collage{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:2px;background:var(--line)}
.manifest-img .collage img{position:static;width:100%;height:100%;object-fit:cover}

/* Einspaltiger 3er-Stapel (leistungen.html, Ankauf-Sektion): Der begleitende
   Text ist dort lang, die Bilder dürfen die Höhe selbst bestimmen. Deshalb im
   Fluss und mit festem 4:3 – die drei Fotos sind nativ 4:3 und bleiben
   dadurch komplett unbeschnitten. */
.manifest-img .collage.collage-stack{position:static;width:100%;grid-template-columns:1fr;grid-template-rows:none}
.manifest-img .collage.collage-stack img{height:auto;aspect-ratio:4/3}

/* =========================================================
   LEISTUNGEN — editorial cards (Foto + dunkles Overlay)
   ========================================================= */
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.svc-card{
  position:relative;min-height:420px;overflow:hidden;background:var(--panel-2);
  display:flex;flex-direction:column;justify-content:flex-end;padding:40px;
}
.svc-card.wide{grid-column:span 2;min-height:320px}
.svc-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform 1s var(--ease)}
.svc-card::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,rgba(10,10,10,.82),rgba(10,10,10,.08) 65%)}
.svc-card:hover img{transform:scale(1.05)}
.svc-card>*{position:relative;z-index:2}
.svc-index{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;color:rgba(255,255,255,.85);margin-bottom:auto}
.svc-card h3{margin:0 0 12px;color:#fff}
.svc-card p{color:rgba(255,255,255,.82);max-width:46ch;margin-bottom:22px;font-size:15px}
.svc-link{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;display:inline-flex;gap:10px;transition:gap .3s}
.svc-card:hover .svc-link{gap:18px}

/* =========================================================
   FAHRZEUGE — Filter + Grid + Karten
   ========================================================= */
.fz-toolbar{
  display:grid;grid-template-columns:repeat(5,1fr) auto;gap:12px;align-items:end;
  background:var(--panel);border:1px solid var(--line);padding:22px;margin-bottom:14px;
}
.fz-field label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-dim);margin-bottom:7px}
.fz-field select,.fz-field input{
  width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  padding:12px 14px;font-family:var(--font-body);font-size:14px;transition:border-color .3s;
}
.fz-field select:focus,.fz-field input:focus{outline:none;border-color:var(--ink)}
.fz-reset{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:none;border:1px solid var(--line-strong);color:var(--fog);padding:12px 18px;cursor:pointer;transition:all .3s;
}
.fz-reset:hover{color:var(--ink-dark);border-color:var(--white);background:var(--white)}
.fz-count{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dim);margin:0 0 28px 2px}
.fz-count b{color:var(--ink)}

.fz-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fz-card{
  background:var(--panel);border:1px solid var(--line);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .4s;
}
.fz-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:0 24px 44px -24px rgba(0,0,0,.7)}
.fz-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--panel-2)}
.fz-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.fz-card:hover .fz-img img{transform:scale(1.05)}
.fz-badge{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  padding:6px 12px;background:var(--white);color:var(--ink-dark);
}
.fz-badge.reserviert{background:#C9A24B;color:var(--ink-dark)}
.fz-badge.verkauft{background:#55555A;color:#fff}
.fz-body{padding:22px;display:flex;flex-direction:column;flex:1}
.fz-title{font-family:var(--font-display);font-weight:600;font-size:23px;line-height:1.1}
.fz-sub{font-size:13px;color:var(--fog-dim);margin-top:5px}
.fz-specs{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin:16px 0;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.fz-spec{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--fog);display:inline-flex;align-items:center;gap:7px}
.fz-spec::before{content:"";width:4px;height:4px;background:var(--ink);border-radius:50%}
.fz-price-row{display:flex;align-items:baseline;justify-content:space-between;margin-top:auto}
.fz-price{font-family:var(--font-display);font-weight:600;font-size:28px;color:var(--ink)}
.fz-price small{font-family:var(--font-mono);font-size:11px;color:var(--fog-dim);margin-right:6px;font-weight:400}
.fz-more{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog)}
.fz-card:hover .fz-more{color:var(--ink)}
.fz-empty{
  grid-column:1/-1;text-align:center;padding:80px 20px;border:1px dashed var(--line-strong);
  color:var(--fog);font-size:16px;background:var(--panel);
}
.fz-empty a{color:var(--ink);text-decoration:underline}

/* ── Fahrzeug-Detail (Modal) ──────────────────────────── */
.fz-modal{
  position:fixed;inset:0;z-index:2000;display:none;align-items:flex-start;justify-content:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(8px);overflow-y:auto;padding:5vh 20px 60px;
}
.fz-modal.open{display:flex}
.fz-modal-card{
  background:var(--bg);border:1px solid var(--line);max-width:980px;width:100%;
  position:relative;box-shadow:0 40px 80px -30px rgba(16,16,16,.4);
}
.fz-modal-close{
  position:absolute;top:16px;right:16px;z-index:5;width:44px;height:44px;
  background:var(--bg);border:1px solid var(--line-strong);color:var(--ink);font-size:20px;
  cursor:pointer;transition:all .3s;
}
.fz-modal-close:hover{background:var(--white);border-color:var(--white);color:var(--ink-dark)}
.fz-modal-gallery{position:relative;aspect-ratio:16/9;background:var(--panel-2);overflow:hidden}
.fz-modal-gallery img{width:100%;height:100%;object-fit:cover}
.fz-gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(12,12,14,.65);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;padding:0 0 3px;transition:all .2s}
.fz-gal-btn:hover{background:#fff;color:var(--ink-dark)}
.fz-gal-btn.prev{left:14px}
.fz-gal-btn.next{right:14px}
.fz-gal-count{position:absolute;right:14px;bottom:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;background:rgba(16,16,16,.65);color:#fff;padding:4px 10px;z-index:2}
.fz-modal-thumbs{display:flex;gap:6px;padding:10px;overflow-x:auto;background:var(--panel-2);border-bottom:1px solid var(--line)}
.fz-modal-thumbs img{width:76px;height:56px;object-fit:cover;cursor:pointer;opacity:.5;border:2px solid transparent;flex:0 0 auto;transition:opacity .2s}
.fz-modal-thumbs img:hover{opacity:.85}
.fz-modal-thumbs img.on{opacity:1;border-color:var(--ink)}
.fz-modal-body{padding:clamp(24px,4vw,44px)}
.fz-modal-body h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,3.6vw,44px);line-height:1.05}
.fz-modal-price{font-family:var(--font-display);font-weight:600;font-size:clamp(26px,3vw,38px);color:var(--ink);margin:10px 0 26px}
.fz-modal-price small{font-family:var(--font-mono);font-size:12px;color:var(--fog-dim);font-weight:400}
.fz-dl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:26px}
.fz-dl>div{background:var(--bg);padding:16px 18px}
.fz-dl .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-dim);display:block;margin-bottom:5px}
.fz-dl .v{font-size:15px;font-weight:600;color:var(--ink)}
.fz-modal-desc{color:var(--fog);font-size:15px;line-height:1.75;margin-bottom:30px;max-width:70ch}
.fz-price-anfrage{font-size:15px;letter-spacing:.02em}
.fz-modal-eq{margin:-6px 0 30px}
.fz-modal-eq .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fog-dim);display:block;margin-bottom:12px}
.fz-modal-eq ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px 20px;padding:0;margin:0}
.fz-modal-eq li{font-size:14px;color:var(--fog);padding-left:16px;position:relative}
.fz-modal-eq li::before{content:'—';position:absolute;left:0;color:var(--fog-dim)}
.fz-modal-actions{display:flex;gap:14px;flex-wrap:wrap}

/* =========================================================
   WHY
   ========================================================= */
.why-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.why-img{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.why-img img{width:100%;height:100%;object-fit:cover}
.why-img .tag{position:absolute;left:20px;bottom:20px;font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dark);background:var(--white);padding:8px 14px}
.why-point{display:flex;gap:24px;padding:26px 0;border-bottom:1px solid var(--line)}
.why-point:last-child{border-bottom:none}
.why-num{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--fog-dim);line-height:1.3;flex:none;width:54px}
.why-point h4{font-family:var(--font-body);font-size:19px;font-weight:700;margin-bottom:8px}
.why-point p{color:var(--fog);font-size:15px}

/* =========================================================
   REVIEWS
   ========================================================= */
.rev-top{display:flex;align-items:center;gap:18px;margin-bottom:46px}
.rev-stars{color:var(--ink);font-size:22px;letter-spacing:3px}
.rev-score{font-family:var(--font-display);font-weight:600;font-size:42px;line-height:1}
.rev-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog-dim)}
.rev-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rev-card{background:var(--panel);padding:36px}
.rev-card .s{color:var(--ink);letter-spacing:2px;margin-bottom:18px}
.rev-card p{color:var(--ink-2);font-size:16px;line-height:1.65;margin-bottom:20px}
.rev-author{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fog-dim)}

/* =========================================================
   CTA band (dunkler Kontrast-Block mit Foto)
   ========================================================= */
.cta{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#101012}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,10,.88),rgba(8,8,10,.3))}
.cta-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;padding:clamp(60px,9vw,110px) 0;color:#fff}
.cta-inner h2{margin-bottom:16px;color:#fff}
.cta-inner .lead{color:rgba(255,255,255,.82)}
.cta-inner .eyebrow{color:rgba(255,255,255,.8)}
.cta-inner .eyebrow::before{background:#fff}
.cta-actions{display:flex;flex-direction:column;gap:14px}
.cta-phone{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,3.6vw,48px);color:#fff;display:flex;align-items:center;gap:16px}
.cta-phone:hover{color:var(--silver)}
.cta-wa{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#25D366;display:inline-flex;gap:10px;align-items:center}
.cta .btn-primary{background:#fff;color:var(--ink-dark);border-color:#fff}
.cta .btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2)}

/* =========================================================
   KONTAKT + FORM
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:72px}
.contact-item{padding:22px 0;border-bottom:1px solid var(--line)}
.contact-item .k{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fog-dim);display:block;margin-bottom:8px}
.contact-item .v{font-size:17px;color:var(--ink)}
.contact-item .v a:hover{color:var(--fog)}
.hours{width:100%;font-size:15px;color:var(--fog)}
.hours td{padding:6px 0}
.hours td:last-child{text-align:right;font-family:var(--font-mono);font-size:13px;color:var(--ink)}

.form{background:var(--panel);border:1px solid var(--line);padding:clamp(32px,4vw,48px)}
.form .eyebrow{margin-bottom:6px}
.form h3{margin-bottom:28px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--fog-dim);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:var(--bg-2);border:1px solid var(--line);color:var(--ink);
  padding:14px 16px;font-family:var(--font-body);font-size:15px;transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.field textarea{min-height:110px;resize:vertical}
.form-note{font-size:12px;color:var(--fog-dim);margin:8px 0 20px;font-family:var(--font-mono);letter-spacing:.03em}

/* ── MAP ──────────────────────────────────────────────── */
.map{height:480px;filter:grayscale(1);border-top:1px solid var(--line)}
.map iframe{width:100%;height:100%;border:0;display:block}
.map-consent{
  position:absolute;inset:0;z-index:2;background:var(--bg-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;padding:24px;
}
.map-consent p{max-width:440px;color:var(--fog);font-size:15px;line-height:1.6}
.map-consent .addr{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--fog-dim)}

/* =========================================================
   LEGAL (Impressum / Datenschutz)
   ========================================================= */
.legal-page{padding:clamp(150px,20vw,200px) 0 90px}
.legal-content{max-width:760px}
.legal-content h1{margin-bottom:40px}
.legal-content h2{font-family:var(--font-body);font-size:20px;font-weight:700;margin:38px 0 12px;color:var(--ink)}
.legal-content p,.legal-content address{font-size:15px;color:var(--fog);line-height:1.85;font-style:normal;margin-bottom:14px}
.legal-content a{color:var(--ink);text-decoration:underline}
.legal-content strong{color:var(--ink)}

/* =========================================================
   FOOTER (dunkel – Kontrast zum hellen Body, Logo weiss)
   ========================================================= */
footer{background:#08080A;border-top:1px solid var(--line);padding:80px 0 0;color:#e8e8e6}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.4fr;gap:48px;padding-bottom:56px}
.footer-logo-img{height:64px;width:auto;margin-bottom:20px}
.footer-desc{color:#a3a3a6;font-size:15px;max-width:34ch;margin-top:16px}
.footer-col-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#8f8f93;margin-bottom:20px}
.footer-links li{margin-bottom:12px}
.footer-links a{color:#a3a3a6;font-size:15px;transition:color .25s}
.footer-links a:hover{color:#fff}
.footer-contact-item{margin-bottom:16px}
.footer-contact-label{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#77777b;margin-bottom:4px}
.footer-contact-value{font-size:15px;color:#e6e6e8}
.footer-contact-value a:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0;border-top:1px solid rgba(255,255,255,.12)}
.footer-copy,.footer-legal,.footer-credit{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:#8f8f93}
.footer-legal a:hover{color:#fff}
.footer-legal-sep{margin:0 8px}
.footer-credit span{color:#fff}

/* ── Mobile sticky bar ────────────────────────────────── */
.mobile-bar{display:none}

/* =========================================================
   ANIMATIONS (kompatibel mit animations.js)
   ========================================================= */
html.js [data-animate]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js [data-animate].is-visible{opacity:1;transform:none}
[data-delay="100"]{transition-delay:.1s}
[data-delay="200"]{transition-delay:.2s}
[data-delay="300"]{transition-delay:.3s}
[data-delay="400"]{transition-delay:.4s}

@keyframes riseIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
.hero .reveal{opacity:0;animation:riseIn 1s var(--ease) forwards}
.hero .reveal.d1{animation-delay:.15s}
.hero .reveal.d2{animation-delay:.32s}
.hero .reveal.d3{animation-delay:.5s}
.hero .reveal.d4{animation-delay:.68s}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js [data-animate]{opacity:1;transform:none}
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
  .manifest{grid-template-columns:1fr}
  .manifest-text{border-right:none;border-bottom:1px solid var(--line)}
  .manifest-img{min-height:340px}
  /* Einspaltig gestapelt gibt es keine Textspalte mehr, an deren Höhe sich die
     Collage ausrichten könnte – absolut positioniert wäre sie 0px hoch und die
     Bilder unsichtbar. Mobil also zurück in den Fluss, mit festem 4:3 pro
     Kachel (unbeschnitten, weil die Fotos nativ 4:3 sind). */
  .manifest-img:has(.collage){min-height:0}
  .manifest-img .collage{position:static;grid-template-rows:none}
  .manifest-img .collage img{height:auto;aspect-ratio:4/3}
  .why-grid{grid-template-columns:1fr;gap:40px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .fz-grid{grid-template-columns:repeat(2,1fr)}
  .fz-toolbar{grid-template-columns:repeat(3,1fr)}
  .fz-dl{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .nav-links,.nav-right .nav-tel,.nav-right .btn-primary{display:none}
  .nav-hamburger{display:flex}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line)}
  .svc-grid{grid-template-columns:1fr}
  .svc-card.wide{grid-column:span 1}
  .rev-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:36px}
  .cta-inner{flex-direction:column;align-items:flex-start}
  .scrolly{height:260vh}
  .mobile-bar{
    display:flex;position:fixed;bottom:0;left:0;right:0;z-index:900;gap:1px;background:var(--line);
    border-top:1px solid var(--line);
  }
  .mobile-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:16px;
    font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--bg);color:var(--ink)}
  .mobile-bar .btn-primary{background:var(--white);color:var(--ink-dark)}
  .mobile-bar .btn-call{color:var(--ink)}
  body{padding-bottom:54px}
}
@media(max-width:560px){
  .container,nav{padding-left:20px;padding-right:20px}
  .hero-inner{padding:0 20px 90px}
  .form-row{grid-template-columns:1fr}
  .fz-grid{grid-template-columns:1fr}
  .fz-toolbar{grid-template-columns:1fr 1fr}
  .fz-dl{grid-template-columns:1fr 1fr}
}

/* =========================================================
   AUTOSCOUT24-HCI — Einfassung des hellen Fremd-iframes
   Das Fenster kommt von autoscout24.ch und ist fest hell; sein
   Dark-Theme liegt im Chakra-Build, wird dort aber nicht aktiviert.
   Cross-Origin können wir es nicht umstellen. Also klar rahmen und
   benennen, damit der Helligkeitswechsel gewollt wirkt.
   ========================================================= */
.hci-head{display:flex;justify-content:center;margin-bottom:18px}
.hci-frame{
  background:#fff;
  border:1px solid var(--line-strong);
  /* schmaler dunkler Steg oben/unten: trennt das helle Fenster sichtbar
     von der Seite, ohne die nutzbare Breite zu beschneiden */
  box-shadow:0 0 0 6px var(--bg), 0 24px 60px rgba(0,0,0,.55);
  overflow:hidden;
}
.hci-frame iframe{display:block}