/* ===== ROOT ===== */
:root {
  --obsidian: #161310;
  --pearl: #f6efe2;
  --gold: #c9a24b;
  --terracotta: #c1673b;
  --ink-hi: #fbf7ef;
  --ink-muted: rgba(251,247,239,0.55);
  --ink-dark: #201c15;
  --ink-dark-muted: #6b6355;
  --border-d: rgba(255,255,255,0.08);
  --border-l: rgba(0,0,0,0.09);
  --r: 10px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--obsidian); color: var(--ink-hi); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }

/* ===== HEADER ===== */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px,4vw,64px);
  transition: background .3s;
}
#header.scrolled {
  background: rgba(22,22,24,0.97);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-d);
}
.header-logo { display: flex; align-items: center; gap: 12px; }
.header-logo-mark { height: 42px; width: auto; filter: drop-shadow(0 0 10px rgba(201,162,75,.4)); }
.hero-logo-badge {
  position: absolute; top: clamp(90px,12vh,140px); right: clamp(24px,5vw,80px); z-index: 2;
  height: clamp(110px,16vh,220px); width: auto;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(201,162,75,.35));
}
@media (max-width: 960px) {
  .hero-logo-badge { display: none; }
}
.header-nav { display: flex; gap: 28px; }
.header-nav a { font-size: 14px; font-weight: 500; color: rgba(244,241,235,.75); transition: color .2s; }
.header-nav a:hover { color: var(--ink-hi); }
.header-right { display: flex; align-items: center; gap: 18px; }
.header-socials { display: flex; gap: 12px; }
.header-socials a { color: rgba(244,241,235,.6); transition: color .2s; }
.header-socials a:hover { color: var(--ink-hi); }
.header-socials svg { width: 18px; height: 18px; fill: currentColor; }
.header-phone { font-size: 13px; font-weight: 500; color: rgba(244,241,235,.6); }

/* ===== HERO ===== */
.hero {
  position: relative;
  height: 100svh; min-height: 600px;
  overflow: hidden;
  background: var(--obsidian);
  display: flex; align-items: flex-end;
}
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .96;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21,17,12,.15) 0%, rgba(21,17,12,.35) 40%, rgba(21,17,12,.92) 100%);
}
.hero-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 16px;
}
.hero-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%);
}
.hero-content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 clamp(24px,5vw,80px) clamp(48px,6vh,80px);
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 36px;
}
.hero-title {
  font-size: clamp(38px,5vw,72px);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--ink-hi);
}
.hero-title .gold { color: var(--gold); }
.hero-bio {
  font-size: clamp(15px,1.3vw,17px);
  line-height: 1.75;
  color: rgba(244,241,235,.72);
  max-width: 460px;
  align-self: end;
}
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-call, .btn-wa {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 26px;
  border-radius: 6px;
  font-size: 15px; font-weight: 600;
  cursor: pointer; transition: opacity .2s;
  font-family: inherit;
  border: none;
}
.btn-call:hover, .btn-wa:hover { opacity: .82; }
.btn-call { background: rgba(244,241,235,.1); color: var(--ink-hi); border: 1px solid rgba(244,241,235,.18); }
.btn-wa { background: #25D366; color: #fff; }
.btn-call svg, .btn-wa svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

/* ===== CINEMATIC STORY (full-bleed video) ===== */
.story-full { position: relative; height: 100vh; min-height: 700px; overflow: hidden; }
.story-full video, .story-full img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-full-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(21,17,12,.1) 0%, rgba(21,17,12,.25) 45%, rgba(21,17,12,.92) 100%);
}
.story-full-content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0 clamp(24px,6vw,100px) clamp(48px,7vh,90px);
  max-width: 720px;
}
.story-full-title {
  font-size: clamp(30px,3.6vw,50px); font-weight: 800; color: var(--ink-hi);
  line-height: 1.1; margin-bottom: 16px; letter-spacing: -0.02em;
}
.story-full-text { font-size: 16px; line-height: 1.75; color: rgba(251,247,239,.85); }

/* ===== SHOWROOM (single-vehicle spotlight) ===== */
.showroom-section { position: relative; background: var(--obsidian); border-top: 1px solid var(--border-d); overflow: hidden; }
.showroom-bg { position: relative; height: clamp(560px,82vh,880px); overflow: hidden; }
.showroom-bg > img,
.showroom-bg > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.showroom-car-stage {
  position: absolute; z-index: 1; overflow: visible;
  left: 50%; bottom: 17%; width: min(82%, 1320px); height: 46%;
  transform: translateX(-50%);
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.55));
}
.showroom-car-layer {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: bottom center;
  opacity: 0;
}
.showroom-car-layer.front { opacity: 1; transform: translateX(0); z-index: 2; }

/* New car slides in from the right, current car slides out to the left */
@keyframes showroom-slide-in-right {
  0%   { opacity: 0; transform: translateX(65%); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes showroom-slide-out-left {
  0%   { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-65%); }
}
.showroom-car-layer.slide-in { animation: showroom-slide-in-right .6s cubic-bezier(.16,1,.3,1) both; z-index: 3; }
.showroom-car-layer.slide-out { animation: showroom-slide-out-left .6s cubic-bezier(.4,0,.2,1) both; z-index: 2; }

.showroom-fade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(13,11,9,.82) 0%, rgba(13,11,9,.05) 22%, rgba(13,11,9,0) 58%, rgba(13,11,9,.55) 82%, var(--obsidian) 100%);
}
.showroom-head {
  position: absolute; top: clamp(40px,7vh,72px); left: 0; right: 0; z-index: 2;
  text-align: center; padding: 0 24px; max-width: 620px; margin: 0 auto;
}
.showroom-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.showroom-title { font-family: 'Georgia', serif; font-size: clamp(30px,4vw,48px); font-weight: 400; color: var(--ink-hi); letter-spacing: -0.01em; margin-bottom: 14px; }
.showroom-sub { font-size: 14.5px; line-height: 1.7; color: rgba(251,247,239,.72); }

.showroom-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,11,9,.45); border: 1px solid rgba(251,247,239,.25);
  color: var(--ink-hi); backdrop-filter: blur(6px);
  transition: border-color .2s ease, background .2s ease;
}
.showroom-nav:hover { border-color: var(--gold); background: rgba(13,11,9,.7); }
.showroom-nav svg { width: 18px; height: 18px; }
.showroom-nav.prev { left: clamp(16px,3vw,48px); transform: translateY(-50%) rotate(180deg); }
.showroom-nav.next { right: clamp(16px,3vw,48px); }

.showroom-360 {
  position: absolute; left: 50%; bottom: clamp(196px,26vh,236px); transform: translateX(-50%); z-index: 2;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .12em; color: rgba(251,247,239,.75);
}
.showroom-360 .ring { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(200,167,67,.55); position: relative; }
.showroom-360 .ring::before {
  content: ''; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent; border-top-color: var(--gold);
  animation: showroom-ring-spin 3.5s linear infinite;
}
@keyframes showroom-ring-spin { to { transform: rotate(360deg); } }

.showroom-panel {
  position: relative; z-index: 2; margin-top: -140px;
  max-width: 1040px; margin-left: auto; margin-right: auto;
  padding: 0 clamp(20px,4vw,48px);
}
.showroom-panel-name {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.showroom-panel-name h3 { font-size: clamp(20px,2.4vw,28px); font-weight: 700; color: var(--ink-hi); }
.showroom-panel-price { font-size: 14px; color: rgba(251,247,239,.7); }
.showroom-panel-price strong { color: var(--gold); font-size: 22px; font-weight: 700; margin: 0 3px; }

.showroom-specs {
  display: grid; grid-template-columns: repeat(5,1fr); gap: 14px;
  padding: 20px clamp(18px,3vw,28px); border-radius: var(--r);
  background: rgba(22,19,16,.55); border: 1px solid rgba(251,247,239,.12); backdrop-filter: blur(8px);
  margin-bottom: 22px;
}
.showroom-specs > div { display: flex; flex-direction: column; gap: 6px; }
.showroom-specs .spec-ic { width: 18px; height: 18px; color: var(--gold); }
.showroom-specs .k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(251,247,239,.55); }
.showroom-specs .v { font-size: 15px; font-weight: 700; color: var(--ink-hi); }

.showroom-panel-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
/* Pflichtangabe aus Philipps Preisliste: "Preise inklusive MwSt. ausweisen." */
.showroom-vat-note { margin-top: 12px; font-size: 11px; color: var(--ink-muted); }
.showroom-btn-book, .showroom-btn-details {
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  padding: 14px 28px; border-radius: 999px; text-align: center;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.showroom-btn-book { background: var(--gold); color: #16130f; box-shadow: 0 0 26px -6px rgba(200,167,67,.7); }
.showroom-btn-book:hover { transform: translateY(-2px); box-shadow: 0 0 34px -4px rgba(200,167,67,.9); }
.showroom-btn-details { background: transparent; color: var(--ink-hi); border: 1px solid rgba(251,247,239,.3); }
.showroom-btn-details:hover { border-color: var(--gold); color: var(--gold); }

.showroom-strip-wrap { position: relative; max-width: 1040px; margin: 0 auto; padding: 34px clamp(20px,4vw,48px) clamp(48px,6vh,72px); }
.showroom-strip {
  display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity;
  padding-bottom: 4px; scrollbar-width: none;
}
.showroom-strip::-webkit-scrollbar { display: none; }
.showroom-thumb {
  flex: 0 0 auto; width: 148px; scroll-snap-align: start;
  border-radius: 10px; overflow: hidden; position: relative;
  border: 1px solid rgba(251,247,239,.12); opacity: .58;
  transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
  background: transparent; padding: 0; margin: 0; text-align: left; cursor: pointer;
  font-family: inherit; -webkit-appearance: none; appearance: none;
}
.showroom-thumb:hover, .showroom-thumb.active { opacity: 1; transform: translateY(-3px); }
.showroom-thumb.active { border-color: var(--gold); box-shadow: 0 0 22px -6px rgba(200,167,67,.7); }
/* Rahmen exakt im Quellverhaeltnis 3:2 (Thumbs sind 420x280). Vorher feste 92px Hoehe
   = 1.59 -> cover zoomte rein und schnitt Dach und Raeder an, wirkte gequetscht. */
.showroom-thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.showroom-thumb span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-hi); padding: 8px 10px 0; }
.showroom-thumb em { display: block; font-size: 10.5px; font-style: normal; color: var(--gold); padding: 2px 10px 9px; }

@media (max-width: 900px) {
  .showroom-specs { grid-template-columns: repeat(3,1fr); }
  .showroom-panel { margin-top: -110px; }
  .showroom-nav { display: none; }
  .showroom-360 { bottom: clamp(230px,32vh,270px); }
}
@media (max-width: 560px) {
  .showroom-specs { grid-template-columns: repeat(2,1fr); }
}

/* ===== STORY (CREAM) ===== */
.story {
  background: var(--pearl);
  color: var(--ink-dark);
  padding: clamp(64px,9vh,120px) clamp(24px,5vw,80px);
}
.story-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.story-signature {
  font-size: clamp(30px,3.8vw,52px);
  font-style: italic;
  font-weight: 300;
  color: var(--ink-dark);
  margin-bottom: 44px;
  font-family: 'Georgia', serif;
  letter-spacing: .01em;
}
.story-video {
  position: relative; width: 100%; padding-bottom: 56.25%;
  border-radius: 12px; overflow: hidden;
  margin-bottom: 52px; background: #000;
}
.story-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.story-title {
  font-size: clamp(24px,3vw,42px);
  font-weight: 700; line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: var(--ink-dark);
}
.story-text {
  font-size: clamp(15px,1.35vw,17px);
  line-height: 1.8;
  color: var(--ink-dark-muted);
}

/* ===== ZAHLEN (stat strip) ===== */
.stats-section {
  background: var(--obsidian);
  padding: clamp(48px,6vh,72px) clamp(24px,5vw,80px);
  border-top: 1px solid var(--border-d);
}
.stats-row {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4,1fr);
}
.stat-block {
  text-align: center; padding: 0 20px;
  border-left: 1px solid var(--border-d);
}
.stat-block:first-child { border-left: none; }
.stat-num {
  display: block; font-size: clamp(28px,3.2vw,42px); font-weight: 700;
  color: var(--ink-hi); text-shadow: 0 0 22px rgba(200,167,67,.45);
  letter-spacing: -0.01em;
}
.stat-label { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 8px; }

/* ===== ABOUT / BUSINESS (DARK) ===== */
.about-section {
  background: var(--obsidian);
  padding: clamp(64px,9vh,120px) clamp(24px,5vw,80px);
  border-top: 1px solid var(--border-d);
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px,6vw,96px); align-items: start; }
.about-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.about-heading { font-size: clamp(26px,2.8vw,38px); font-weight: 700; line-height: 1.15; margin-bottom: 22px; }
.about-text { font-size: 16px; line-height: 1.82; color: var(--ink-muted); margin-bottom: 30px; }
.about-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--gold);
  border-bottom: 1px solid rgba(200,167,67,.3); padding-bottom: 2px;
  transition: opacity .2s;
}
.about-link:hover { opacity: .7; }
.about-link svg { width: 14px; height: 14px; fill: currentColor; }

.biz-cards { display: flex; flex-direction: column; gap: 14px; }
.biz-card {
  border: 1px solid rgba(200,167,67,.16);
  border-radius: var(--r); padding: 22px 24px;
  background: linear-gradient(165deg, rgba(255,255,255,.045), rgba(255,255,255,.015) 50%);
  box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 24px -16px rgba(200,167,67,.3);
  transition: background .25s, border-color .25s, box-shadow .25s, transform .25s;
}
.biz-card:hover {
  background: linear-gradient(165deg, rgba(255,255,255,.065), rgba(255,255,255,.02) 50%);
  border-color: rgba(200,167,67,.5);
  box-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 44px -10px rgba(200,167,67,.5);
  transform: translateY(-4px);
}
.biz-card-tag { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.biz-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 7px; }
.biz-card p { font-size: 13px; line-height: 1.65; color: var(--ink-muted); }

/* ===== SO FUNKTIONIERT'S (horizontal scroll steps) ===== */
/* Statisches 4er-Raster (kein Pin mehr — stabil, kann nicht verrutschen) */
.steps-section { background: var(--obsidian); border-top: 1px solid var(--border-d); padding: clamp(60px,9vh,110px) clamp(24px,5vw,80px); }
.steps-pin { max-width: 1300px; margin: 0 auto; }
.steps-head { margin-bottom: clamp(28px,4vh,48px); }
.steps-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px,2vw,26px); }
.step-card {
  border: 1px solid rgba(200,167,67,.2); border-radius: var(--r); overflow: hidden;
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 50%);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 34px -16px rgba(200,167,67,.4);
  position: relative; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.step-card:hover { transform: translateY(-6px); border-color: rgba(200,167,67,.5); box-shadow: 0 22px 46px rgba(0,0,0,.55), 0 0 50px -12px rgba(200,167,67,.55); }
.step-num {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  font-size: 13px; font-weight: 700; color: var(--gold);
  background: rgba(20,20,15,.75); border: 1px solid rgba(200,167,67,.5);
  border-radius: 99px; padding: 5px 12px;
  box-shadow: 0 0 16px -3px rgba(200,167,67,.6);
}
.step-img { aspect-ratio: 4/3; overflow: hidden; }
.step-img img { width: 100%; height: 100%; object-fit: cover; }
.step-card h3 { font-size: 18px; font-weight: 700; color: var(--ink-hi); margin: 18px 20px 9px; }
.step-card p { font-size: 13px; line-height: 1.6; color: var(--ink-muted); margin: 0 20px 22px; }
@media (max-width: 1100px) { .steps-track { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .steps-track { grid-template-columns: 1fr; } }

/* ===== YOUTUBE SECTION (DARK) ===== */
.yt-section {
  background: var(--obsidian);
  padding: clamp(64px,9vh,120px) clamp(24px,5vw,80px);
  border-top: 1px solid var(--border-d);
}
.social-head {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: clamp(36px,5vh,60px);
}
.social-head svg { width: 44px; height: 44px; flex-shrink: 0; }
.social-head h2 { font-size: clamp(30px,4.5vw,60px); font-weight: 700; letter-spacing: -0.03em; }

.yt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(12px,1.5vw,20px); }
.yt-embed {
  border-radius: 10px; overflow: hidden;
  position: relative; padding-bottom: 56.25%; background: #000;
}
.yt-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== INSTAGRAM SECTION (DARK) ===== */
.ig-section {
  background: var(--obsidian);
  padding: clamp(64px,9vh,120px) clamp(24px,5vw,80px);
  border-top: 1px solid var(--border-d);
}
.ig-embeds {
  display: grid; grid-template-columns: repeat(3,1fr);
  gap: clamp(12px,1.5vw,20px); align-items: start;
}
.ig-embed-wrap { border-radius: 10px; overflow: hidden; min-height: 420px; background: rgba(255,255,255,.04); }

/* ===== FOOTER ===== */
footer {
  background: var(--obsidian);
  border-top: 1px solid var(--border-d);
  padding: clamp(56px,7vh,88px) clamp(24px,5vw,80px) clamp(24px,3vh,40px);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(24px,4vw,56px); margin-bottom: 48px;
}
.footer-logo-wrap img { height: 40px; filter: brightness(10); margin-bottom: 14px; }
.footer-tagline { font-size: 14px; line-height: 1.7; color: var(--ink-muted); margin-bottom: 20px; max-width: 260px; }
.footer-socials { display: flex; gap: 10px; }
.footer-socials a {
  width: 34px; height: 34px; border: 1px solid var(--border-d); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); transition: color .2s, border-color .2s;
}
.footer-socials a:hover { color: var(--ink-hi); border-color: rgba(255,255,255,.28); }
.footer-socials svg { width: 15px; height: 15px; fill: currentColor; }
.footer-col h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 16px; }
.footer-col a, .footer-col p { font-size: 14px; color: var(--ink-muted); display: block; margin-bottom: 10px; line-height: 1.5; }
.footer-col a:hover { color: var(--ink-hi); }
.footer-brands { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.footer-brands img { height: 20px; filter: invert(1); opacity: .35; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--border-d);
  font-size: 13px; color: var(--ink-muted);
}
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a:hover { color: var(--ink-hi); }

/* ===== FAHRZEUGE PAGE ===== */
.page-hero {
  position: relative; height: 52svh; min-height: 360px;
  overflow: hidden; display: flex; align-items: flex-end;
  background: var(--obsidian);
}
.page-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 20%, rgba(22,22,24,.92) 100%); }
.page-hero-content { position: relative; z-index: 2; padding: clamp(28px,4vw,64px); }
.page-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.page-title { font-size: clamp(32px,5.5vw,68px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.page-subtitle { font-size: 15px; color: var(--ink-muted); margin-top: 10px; }

.vehicles-section { background: var(--obsidian); padding: clamp(48px,6vh,80px) clamp(24px,5vw,80px); border-top: 1px solid var(--border-d); }
.fleet-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.vehicles-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; flex-wrap: wrap; gap: 12px; }
.vehicles-count-wrap { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.vehicles-count { font-size: clamp(20px,2.2vw,26px); font-weight: 700; color: var(--ink-hi); }
.vehicles-count-sub { font-size: 13px; color: var(--ink-muted); }
.sort-select {
  background: rgba(255,255,255,.04); border: 1px solid var(--border-d);
  color: var(--ink-hi); padding: 9px 16px; border-radius: 99px;
  font-size: 13px; font-family: 'Inter', sans-serif; cursor: pointer;
}

.fleet-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(24px,3vw,40px); align-items: start; }

.fleet-sidebar { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 26px; }
.sidebar-title { font-size: 15px; font-weight: 700; color: var(--ink-hi); }
.sidebar-block { display: flex; flex-direction: column; }
.sidebar-label {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px;
}
.sidebar-search {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border-d);
  border-radius: 8px; padding: 10px 12px; color: var(--ink-hi);
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.sidebar-search::placeholder { color: rgba(244,241,235,.35); }

.filter-bar { display: flex; flex-direction: column; gap: 6px; }
.filter-btn {
  text-align: left; padding: 9px 14px; border-radius: 8px;
  border: 1px solid var(--border-d); background: transparent;
  font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--ink-muted); transition: all .18s;
  font-family: 'Inter', sans-serif;
}
.filter-btn:hover, .filter-btn.active { background: rgba(200,167,67,.12); color: var(--gold); border-color: rgba(200,167,67,.35); }

.brand-checklist { display: flex; flex-direction: column; gap: 10px; }
.brand-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-muted); cursor: pointer; }
.brand-check input { accent-color: var(--gold); width: 14px; height: 14px; }
.brand-check span { flex: 1; }
.brand-check i { font-style: normal; font-size: 12px; color: var(--ink-dark-muted); }

/* Karten im APEX-Stil: 3 Spalten, grosse Bilder, Gold-Glow beim Hover */
.cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px,2.2vw,26px); }
.car-card {
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 40%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px; overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgba(200,167,67,.06), 0 14px 40px -20px rgba(200,167,67,.35);
  transition: transform .45s cubic-bezier(.16,.8,.3,1), box-shadow .45s ease, border-color .45s ease;
}
.car-card:hover {
  transform: translateY(-8px);
  border-color: rgba(200,167,67,.5);
  box-shadow: 0 0 0 1px rgba(200,167,67,.4), 0 26px 70px -18px rgba(200,167,67,.6);
}
/* 16/9 bleibt: die generierten Bilder sind 16/9, jedes andere Format schneidet die Stossstangen ab */
.car-img-wrap { aspect-ratio: 16/9; overflow: hidden; background: rgba(255,255,255,.05); position: relative; cursor: pointer; }
.car-img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.car-card:hover .car-img { transform: scale(1.06); }
.car-img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(14,14,16,.85));
}
/* Marken-Logo oben rechts auf jeder Fahrzeugkarte, wie bei SERMAN EXOTIC RENTALS.
   Weisse Pille dahinter: die Logos gingen auf den dunklen Fotos sonst unter. Hoehe fix,
   Breite haengt vom Logo ab -- Audis breite Ringe quetschen sich sonst in ein Quadrat. */
.car-brand-badge {
  /* oben RECHTS statt links: .car-ph-badge ("Neu im Fuhrpark") sitzt links oben, sonst Kollision */
  position: absolute; top: 14px; right: 14px; z-index: 3;
  height: 46px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
/* Freigestelltes Logo statt Pille dahinter: Gold-Glow folgt der Kontur (drop-shadow, nicht
   box-shadow), damit es auf jedem dunklen Foto auffaellt, ohne einen sichtbaren Kasten zu zeigen. */
.car-brand-badge img {
  height: 100%; width: auto; object-fit: contain; display: block;
  filter: drop-shadow(0 0 3px rgba(200,167,67,.95)) drop-shadow(0 0 9px rgba(200,167,67,.8)) drop-shadow(0 2px 6px rgba(0,0,0,.65));
}
.car-name-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 0; margin-bottom: 18px; }
.car-name { font-size: 19px; font-weight: 700; color: var(--ink-hi); line-height: 1.15; }
.car-price { font-size: 22px; font-weight: 700; color: var(--gold); white-space: nowrap; line-height: 1; text-align: right; text-shadow: 0 0 16px rgba(200,167,67,.55); }
.car-price small { display: block; font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); margin-top: 6px; text-shadow: none; }
.car-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 10px; padding: 0 22px 20px; border-bottom: 1px solid var(--border-d); }
.car-specs span { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-muted); letter-spacing: .03em; }
.spec-ic { width: 16px; height: 16px; flex-shrink: 0; color: var(--gold); }
.car-btns { display: flex; gap: 10px; padding: 18px 22px 22px; }
.car-btn-details, .car-btn-wa {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 12px; border-radius: 12px; font-size: 13px; font-weight: 700;
  transition: background .25s, border-color .25s, box-shadow .25s ease, transform .18s ease;
}
.car-btn-details { border: 1px solid rgba(200,167,67,.5); color: var(--ink-hi); background: transparent; }
.car-btn-details:hover { background: rgba(200,167,67,.12); border-color: var(--gold); transform: translateY(-1px); }
.car-btn-wa { background: #25D366; color: #06331b; box-shadow: 0 0 18px -3px rgba(37,211,102,.7); }
.car-btn-wa svg { width: 16px; height: 16px; fill: currentColor; }
/* Pflichtangabe aus Philipps Preisliste: "Preise inklusive MwSt. ausweisen." */
/* .fleet-layout ist ein zweispaltiges Grid (Filter + Karten), der Hinweis muss ueber beide Spalten. */
.fleet-vat-note { grid-column: 1 / -1; margin-top: 26px; font-size: 12px; line-height: 1.6; color: var(--ink-muted); text-align: center; }
.car-btn-wa:hover { box-shadow: 0 0 28px 0 rgba(37,211,102,1); transform: translateY(-1px); }

@media (max-width: 1024px) { .cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cars-grid { grid-template-columns: 1fr; } }

/* Preis auf Anfrage (Fahrzeuge ohne festen Tarif, z.B. G63/SL55 AMG) */
.car-price-request { font-size: 14px; line-height: 1.3; text-shadow: none; max-width: 130px; }

/* Fahrzeugkarten ohne Foto (neu gelistet, Foto folgt) */
.car-img-wrap-empty { display: flex; align-items: center; justify-content: center; }
.car-img-placeholder { width: 52px; height: 52px; color: var(--gold); opacity: .3; }
.car-img-placeholder svg { width: 100%; height: 100%; }

/* ===== PREIS-MODAL (Details je Fahrzeug) ===== */
.price-modal {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  padding: 24px; opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.price-modal.is-open { opacity: 1; pointer-events: auto; }
.price-modal-overlay { position: absolute; inset: 0; background: rgba(10,9,7,.78); backdrop-filter: blur(4px); }
.price-modal-card {
  position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--obsidian); border: 1px solid var(--border-d); border-radius: 18px;
  padding: 0 28px 28px; transform: translateY(16px) scale(.98); transition: transform .3s ease;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.price-modal.is-open .price-modal-card { transform: translateY(0) scale(1); }
.price-modal-imgwrap { position: relative; margin: 0 -28px 22px; border-radius: 18px 18px 0 0; overflow: hidden; background: #0a0908; cursor: grab; touch-action: pan-y; }
.price-modal-imgwrap.is-dragging { cursor: grabbing; }
.price-modal-img { display: block; width: 100%; height: clamp(180px, 32vw, 300px); object-fit: cover; user-select: none; -webkit-user-drag: none; }
.price-modal-imgwrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, var(--obsidian) 100%); pointer-events: none; }
/* Pfeile direkt auf dem grossen Bild, damit man nicht erst zur kleinen Streifen-Leiste
   darunter greifen muss -- gleiche Optik wie .showroom-nav/.craft-arrow anderswo im Projekt. */
.price-modal-img-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,11,9,.55); border: 1px solid rgba(251,247,239,.25);
  color: var(--ink-hi); backdrop-filter: blur(6px);
  transition: border-color .2s ease, background .2s ease;
}
.price-modal-img-nav:hover { border-color: var(--gold); background: rgba(13,11,9,.8); }
.price-modal-img-nav svg { width: 16px; height: 16px; }
.price-modal-img-nav.is-prev { left: 12px; }
.price-modal-img-nav.is-next { right: 12px; }
.price-modal-img-nav[hidden] { display: none; }
.price-modal-gallery-wrap { position: relative; margin: -8px 0 20px; }
.price-modal-gallery-wrap.is-empty { display: none; }
.price-modal-gallery {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 34px; scrollbar-width: thin;
  scroll-snap-type: x proximity; cursor: grab; -webkit-overflow-scrolling: touch; user-select: none;
}
.price-modal-gallery.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.price-modal-gallery::-webkit-scrollbar { height: 5px; }
.price-modal-gallery::-webkit-scrollbar-thumb { background: var(--border-d); border-radius: 3px; }
.price-modal-thumb {
  flex: 0 0 auto; width: 84px; height: 62px; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; opacity: .6; transition: opacity .18s ease, border-color .18s ease; background: #0a0908;
  scroll-snap-align: start;
}
.price-modal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.price-modal-thumb:hover { opacity: .9; }
.price-modal-thumb.is-active { opacity: 1; border-color: var(--gold); }
.price-modal-gallery-nav {
  position: absolute; top: 2px; bottom: 2px; width: 28px; display: flex; align-items: center; justify-content: center;
  border: none; cursor: pointer; z-index: 2; color: var(--ink-hi); transition: opacity .18s ease;
}
.price-modal-gallery-nav.is-prev { left: 0; background: linear-gradient(90deg, var(--obsidian) 30%, transparent); }
.price-modal-gallery-nav.is-next { right: 0; background: linear-gradient(270deg, var(--obsidian) 30%, transparent); }
.price-modal-gallery-nav svg { width: 16px; height: 16px; }
.price-modal-gallery-nav:disabled { opacity: 0; pointer-events: none; }
.price-modal-gallery-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
  margin: -12px 0 8px;
}
.price-modal-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(251,247,239,.3); background: rgba(10,9,7,.55); backdrop-filter: blur(6px); color: var(--ink-hi);
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color .2s, color .2s; z-index: 2;
}
.price-modal-close:hover { border-color: var(--gold); color: var(--gold); }
.price-modal-close svg { width: 16px; height: 16px; }
.price-modal-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.price-modal-title { font-size: 22px; font-weight: 700; color: var(--ink-hi); margin-bottom: 18px; padding-right: 30px; }
.price-modal-note {
  font-size: 13px; color: var(--ink-muted); background: rgba(200,167,67,.1); border: 1px solid rgba(200,167,67,.3);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 8px 26px;
}
/* Eckdaten (Freikilometer, Kaution) -- gelten pro Fahrzeug, nicht pro Mietstufe */
.price-modal-chip {
  display: flex; flex-direction: column; gap: 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted);
}
.price-modal-chip b { font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--gold); font-weight: 700; }
.price-modal-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.price-modal-table th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold); padding: 0 10px 10px 0; border-bottom: 1px solid var(--border-d);
}
.price-modal-table td { font-size: 14px; color: var(--ink-hi); padding: 10px 10px 10px 0; border-bottom: 1px solid var(--border-d); }
.price-modal-table td:nth-child(2) { color: var(--gold); font-weight: 700; }
.price-modal-table tr:last-child td { border-bottom: none; }
.price-modal-km h4 { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 10px; }
.price-modal-km-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 24px; }
.price-modal-km-grid span {
  display: flex; flex-direction: column; gap: 3px; background: rgba(255,255,255,.04); border: 1px solid var(--border-d);
  border-radius: 10px; padding: 9px 10px; font-size: 11px; color: var(--ink-muted);
}
.price-modal-km-grid span b { font-size: 14px; color: var(--gold); font-weight: 700; }
/* Pflichtangabe aus Philipps Preisliste: "Preise inklusive MwSt. ausweisen." */
.price-modal-vat { font-size: 11px; line-height: 1.5; color: var(--ink-muted); margin: -12px 0 18px; }
.price-modal-cta {
  display: flex; align-items: center; justify-content: center; width: 100%; padding: 15px 12px;
  border-radius: 12px; font-size: 14px; font-weight: 700; background: var(--gold); color: #16130f;
  box-shadow: 0 0 26px -6px rgba(200,167,67,.7); transition: transform .18s ease;
}
.price-modal-cta:hover { transform: translateY(-1px); }
@media (max-width: 480px) { .price-modal-card { padding: 28px 20px 22px; } }

/* ===== FLOATING CALL/WHATSAPP ===== */
.floating-ctas { position: fixed; right: 20px; bottom: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; transition: opacity .3s ease; }
body.hero-pinned .floating-ctas { opacity: 0; pointer-events: none; }
.fab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 99px;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  transition: opacity .2s, transform .2s;
}
.fab:hover { opacity: .88; transform: translateY(-2px); }
.fab svg { width: 16px; height: 16px; fill: currentColor; }
.fab-call { background: rgba(20,20,15,.92); color: #fff; border: 1px solid rgba(200,167,67,.4); backdrop-filter: blur(8px); box-shadow: 0 0 22px -4px rgba(200,167,67,.6); }
.fab-call:hover { box-shadow: 0 0 32px -2px rgba(200,167,67,.9); }
.fab-wa { background: #25D366; color: #fff; box-shadow: 0 0 22px -4px rgba(37,211,102,.75); }
.fab-wa:hover { box-shadow: 0 0 32px -2px rgba(37,211,102,1); }

.veh-cta {
  background: var(--obsidian); border-top: 1px solid var(--border-d);
  padding: clamp(56px,7vh,88px) clamp(24px,5vw,80px);
  text-align: center;
}
.veh-cta h2 { font-size: clamp(26px,3.5vw,44px); font-weight: 700; margin-bottom: 14px; }
.veh-cta p { font-size: 16px; color: var(--ink-muted); max-width: 480px; margin: 0 auto 32px; }
.cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ===== WORDMARK LOGO ===== */
.wordmark { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink-hi); }
.wordmark b { color: var(--gold); font-weight: 700; }
.footer-wordmark { display: block; font-size: 17px; margin-bottom: 14px; }

/* ===== BRAND TICKER ===== */
.brand-ticker {
  background: var(--pearl);
  border-top: 1px solid var(--border-l);
  padding: 22px clamp(24px,5vw,80px);
}
.brand-ticker-inner {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(28px,5vw,56px); flex-wrap: wrap;
}
.brand-ticker-inner img { height: 22px; width: auto; filter: grayscale(1); opacity: .55; }
.brand-ticker-text {
  font-size: 13px; font-weight: 600; letter-spacing: .05em;
  color: var(--ink-dark-muted); text-transform: uppercase;
}


/* ===== WARUM WIR / WHY GRID ===== */
.why-head { text-align: center; max-width: 620px; margin: 0 auto clamp(36px,5vh,60px); }
.why-head .about-label { justify-content: center; }
.why-head .about-heading { font-size: clamp(26px,3.2vw,42px); }
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.why-grid .biz-card h3 { font-size: 17px; }

/* ===== DAS ERLEBNIS / CRAFT — Kachel-Reihe, entkoppelt vom vertikalen Seiten-Scroll =====
   Frueher: angepinntes Scroll-Locking (jede Wheel/Touch-Geste hielt den Seiten-Scroll fest).
   War fragil (siehe endlose Schleife 2026-08-01) und nervte beim normalen Scrollen. Jetzt:
   ganz normaler Seiten-Scroll, die Kacheln sind eine eigene, unabhaengige horizontale Reihe
   zum Ziehen/Wischen/per Pfeil -- Muster wie SBTT Sektion 02 Variante C "Drag". */
.craft-section { background: var(--obsidian); padding-top: clamp(64px,9vh,120px); border-top: 1px solid var(--border-d); }
.craft-section .why-head { padding: 0 clamp(24px,5vw,80px); margin-bottom: 8px; }
.craft-hint { text-align: center; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 28px; }

.craft-stage {
  position: relative; margin: 0 auto; max-width: 1600px;
  height: clamp(420px,68vh,640px);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab;
}
.craft-stage.grabbing { cursor: grabbing; scroll-snap-type: none; }
.craft-stage::-webkit-scrollbar { display: none; }
.craft-track { position: static; height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 clamp(24px,5vw,80px); }
.craft-panel {
  position: relative; flex-shrink: 0; overflow: hidden; background: var(--obsidian);
  width: clamp(320px,44vw,620px); height: 90%; scroll-snap-align: center;
  border-radius: 22px; border: 1px solid rgba(200,167,67,.3);
  box-shadow: 0 26px 70px -24px rgba(0,0,0,.95), 0 0 44px -14px rgba(200,167,67,.32);
  transform: scale(.93); opacity: .5;
  transition: transform .35s ease, opacity .35s ease, box-shadow .35s ease;
}
.craft-panel.is-vorn { transform: scale(1); opacity: 1; box-shadow: 0 30px 80px -22px rgba(0,0,0,.95), 0 0 60px -12px rgba(200,167,67,.5); }
.craft-panel img, .craft-panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.craft-panel-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(15,13,10,.8) 0%, rgba(15,13,10,.18) 55%, rgba(15,13,10,0) 100%);
}
.craft-panel-copy { position: absolute; left: 24px; right: 24px; bottom: 24px; z-index: 2; }
.craft-num { font-size: clamp(44px,6vw,70px); font-weight: 800; line-height: 1; color: var(--gold); opacity: .14; margin-bottom: -0.2em; }
.craft-label { font-size: 11px; letter-spacing: .35em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.craft-headline { font-size: clamp(24px,2.6vw,36px); font-weight: 800; line-height: .95; color: var(--ink-hi); letter-spacing: -0.01em; }
.craft-sub { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--ink-muted); }
/* Die frueheren statischen Pro-Panel-Positionsanzeiger (rechte Punktleiste + "01/04") sind mit dem
   Vollbild-Modus obsolet -- die eine Punktleiste unter der Reihe (.craft-nav) reicht als Hinweis. */
.craft-dots, .craft-index { display: none; }

.craft-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(13,11,9,.55); border: 1px solid rgba(251,247,239,.25);
  color: var(--ink-hi); backdrop-filter: blur(6px);
  transition: border-color .2s ease, background .2s ease;
}
.craft-arrow:hover { border-color: var(--gold); background: rgba(13,11,9,.8); }
.craft-arrow svg { width: 18px; height: 18px; }
.craft-arrow.prev { left: clamp(4px,1.4vw,20px); transform: translateY(-50%) rotate(180deg); }
.craft-arrow.next { right: clamp(4px,1.4vw,20px); }

.craft-nav { display: flex; justify-content: center; gap: 9px; padding: 20px 0 2px; }
.craft-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(251,247,239,.22); transition: background .3s ease, width .3s ease; border: 0; padding: 0; cursor: pointer; }
.craft-dot.is-an { width: 22px; border-radius: 999px; background: var(--gold); }

@media (max-width: 700px) {
  .craft-panel { width: 78vw; }
  .craft-arrow { display: none; } /* Handy hat Wischen, Pfeile brauchen dort niemanden */
}

/* ===== VORAUSSETZUNGEN ===== */
.req-section {
  background: var(--obsidian);
  border-top: 1px solid var(--border-d);
  padding: clamp(40px,5vh,64px) clamp(24px,5vw,80px);
}
.req-row { display: flex; justify-content: center; gap: clamp(24px,5vw,64px); flex-wrap: wrap; text-align: center; }
.req-item { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 200px; }
.req-num {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(200,167,67,.5); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 0 20px -4px rgba(200,167,67,.6), inset 0 0 12px -4px rgba(200,167,67,.3);
}
.req-text { font-size: 14px; color: var(--ink-muted); line-height: 1.5; }

/* ===== BEWERTUNGEN ===== */
.reviews-section {
  background: var(--obsidian);
  padding: clamp(64px,9vh,120px) clamp(24px,5vw,80px);
  border-top: 1px solid var(--border-d);
}
.reviews-section .social-head { justify-content: center; text-align: center; margin-bottom: clamp(36px,5vh,56px); }
.reviews-section .social-head h2 { font-size: clamp(28px,4vw,48px); font-weight: 700; letter-spacing: -0.03em; }
.reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.review-card {
  display: flex; flex-direction: column; gap: 14px; position: relative;
  padding: 30px 26px 26px; border-radius: var(--r);
  border: 1px solid rgba(200,167,67,.18);
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 55%);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 30px -18px rgba(200,167,67,.35);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(200,167,67,.5);
  box-shadow: 0 20px 42px rgba(0,0,0,.55), 0 0 46px -10px rgba(200,167,67,.5);
}
.review-quote {
  position: absolute; top: 8px; right: 20px;
  font-family: 'Georgia', serif; font-size: 64px; font-weight: 700;
  color: rgba(200,167,67,.22); line-height: 1; pointer-events: none;
}
.review-stars { color: var(--gold); font-size: 14px; letter-spacing: .12em; text-shadow: 0 0 12px rgba(200,167,67,.5); }
.review-text { font-size: 14px; line-height: 1.7; color: var(--ink-muted); position: relative; z-index: 1; }
.review-footer { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--border-d); }
.review-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: rgba(200,167,67,.1); border: 1px solid rgba(200,167,67,.4);
  box-shadow: 0 0 14px -3px rgba(200,167,67,.5);
}
.review-author { font-size: 13px; font-weight: 700; color: var(--ink-hi); }
.review-role { font-size: 11.5px; color: var(--ink-muted); margin-top: 1px; }

/* ===== CONTACT (split layout with background) ===== */
.contact-section {
  position: relative; overflow: hidden;
  padding: clamp(64px,9vh,120px) clamp(24px,5vw,80px);
  border-top: 1px solid var(--border-d);
}
.contact-bg { position: absolute; inset: 0; z-index: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.contact-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(22,22,24,.97) 40%, rgba(22,22,24,.75) 75%, rgba(22,22,24,.55) 100%);
}
.contact-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,80px);
  align-items: start; max-width: 1180px; margin: 0 auto;
}
.contact-left { padding-top: 6px; }
.contact-lead { font-size: 16px; line-height: 1.7; color: var(--ink-muted); margin: 16px 0 30px; max-width: 420px; }
.trust-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-hi); }
.trust-check {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-size: 12px; font-weight: 700;
  border: 1px solid rgba(200,167,67,.5); background: rgba(200,167,67,.1);
  box-shadow: 0 0 12px -3px rgba(200,167,67,.6);
}
.contact-info-block { padding-top: 22px; border-top: 1px solid var(--border-d); }
.contact-placeholder-info { font-size: 14px; color: var(--ink-muted); margin-bottom: 6px; }

.contact-form {
  background: linear-gradient(165deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 55%);
  border: 1px solid rgba(200,167,67,.2); border-radius: var(--r);
  box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 40px -18px rgba(200,167,67,.35);
  padding: clamp(24px,3vw,34px);
  display: flex; flex-direction: column; gap: 12px;
}
.form-row { display: flex; gap: 12px; }
.form-row input, .form-row select, .form-row textarea {
  flex: 1; width: 100%;
  background: rgba(255,255,255,.03); border: 1px solid var(--border-d);
  border-radius: 8px; padding: 12px 14px;
  color: var(--ink-hi); font-family: 'Inter', sans-serif; font-size: 14px;
  resize: none;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: rgba(244,241,235,.35); }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: rgba(200,167,67,.6);
  box-shadow: 0 0 0 1px rgba(200,167,67,.3), 0 0 18px -4px rgba(200,167,67,.5);
}
.form-submit { align-self: center; margin-top: 6px; cursor: not-allowed; opacity: .8; width: 100%; justify-content: center; }

/* ===== MOBILE ===== */
@media (max-width: 960px) {
  .header-nav { display: none; }
  .header-phone { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 16px; }
  .hero-bio { max-width: 100%; }
  .stats-row { grid-template-columns: repeat(2,1fr); gap: 24px 0; }
  .stat-block:nth-child(3) { border-left: none; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .why-grid { grid-template-columns: repeat(2,1fr); }
  .reviews-grid { grid-template-columns: 1fr; }
  .yt-grid { grid-template-columns: 1fr; }
  .ig-embeds { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .fleet-layout { grid-template-columns: 1fr; }
  .fleet-sidebar { position: static; flex-direction: row; flex-wrap: wrap; gap: 22px 32px; }
  .sidebar-block { flex: 1; min-width: 170px; }
}
@media (max-width: 580px) {
  .footer-grid { grid-template-columns: 1fr; }
  .cta-btns { flex-direction: column; align-items: center; }
  .why-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .contact-inner { grid-template-columns: 1fr; }
  .vehicles-header { flex-direction: column; align-items: flex-start; }
  .fleet-sidebar { flex-direction: column; }
  .floating-ctas { right: 14px; bottom: 14px; }
  .fab { padding: 11px 15px; font-size: 12.5px; }
}

/* ============================================================
   EXORENT — Overrides (ScrollStage-Klon)
   ============================================================ */
/* Vektor-Logo im Header/Footer (inline SVG, currentColor) */
.header-logo-exorent { text-decoration: none; }
.header-logo-exorent .wordmark-svg { display: inline-flex; align-items: center; }
.header-logo-exorent .wordmark-svg svg { height: 22px; width: auto; color: var(--ink-hi); display: block; }
.footer-wordmark-svg { display: block; margin-bottom: 14px; }
.footer-wordmark-svg svg { height: 26px; width: auto; color: var(--ink-hi); display: block; }

/* Platzhalter-Badge auf Fahrzeug-/Galerie-Bildern */
.car-img-wrap { position: relative; }
.car-ph-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  padding: 3px 9px; border-radius: 4px;
  background: #b3261e; color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
/* --- EXORENT Showroom-Anpassungen --- */
/* Kopftext liegt ueber der hellen Wabendecke -> Lesbarkeit sichern */
.showroom-head { text-shadow: 0 2px 18px rgba(0,0,0,.95), 0 0 42px rgba(0,0,0,.85); }
/* Wabendecke ist sehr hell -> oberen Abdunkler verstaerken, sonst ist der Kopftext unlesbar */
.showroom-fade { background:
    linear-gradient(to bottom, rgba(13,11,9,.94) 0%, rgba(13,11,9,.78) 16%, rgba(13,11,9,.12) 34%, rgba(13,11,9,0) 58%, rgba(13,11,9,.55) 82%, var(--obsidian) 100%); }
/* Auto tiefer auf den Drehteller setzen, Bodenschatten statt Schwebeschatten */
.showroom-car-stage { bottom: 15%; height: 62%;
  filter: drop-shadow(0 26px 20px rgba(0,0,0,.75)); }

/* ===== CURSOR-GLOW (APEX-Signature: Goldpunkt + nachziehender Ring) ===== */
#cur-dot, #cur-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
  border-radius: 50%; transform: translate(-50%,-50%);
}
#cur-dot  { width: 7px; height: 7px; background: var(--gold); box-shadow: 0 0 10px rgba(200,167,67,.8); }
#cur-ring { width: 42px; height: 42px; border: 1.5px solid rgba(200,167,67,.55);
  transition: width .25s, height .25s, background .25s, border-color .25s; }
#cur-ring.hot { width: 64px; height: 64px; background: rgba(200,167,67,.08); border-color: var(--gold); }
@media (pointer: fine)   { body { cursor: none; } }
@media (pointer: coarse) { #cur-dot, #cur-ring { display: none !important; } }

/* ===== HERO — CINEMATIC VIDEO (ersetzt den ScrollStage) ===== */
.hero-stage { position: relative; height: 100svh; min-height: 620px; overflow: hidden; background: #000; }
.hero-stage-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Autos-Endbild liegt ueber dem Video, erst nach dem Intro sichtbar (kein schwarzes Standbild).
   display statt opacity -> beim Replay zuverlaessig weg (auch mit Dark Reader), sonst wuerde es das Video verdecken. */
.hero-stage-end { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; pointer-events: none; }
.hero-stage.intro-done .hero-stage-end { display: block; }
/* Handy zeigt das Standbild, Desktop den Loop-Clip -- nie beide gleichzeitig */
@media (min-width: 769px) { .hero-stage.intro-done .hero-stage-end-mobile { display: none; } }
@media (max-width: 768px) { .hero-stage.intro-done .hero-stage-end-video { display: none; } }
.hero-stage-vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.85) 100%); }
.hero-stage-fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13,11,9,.55) 0%, rgba(13,11,9,.12) 26%, rgba(13,11,9,0) 50%, rgba(13,11,9,.82) 88%, var(--obsidian) 100%); }

/* Copy: blendet erst zum Schluss des Videos ein */
.hero-stage-copy { position: absolute; left: clamp(24px,5vw,80px); bottom: clamp(96px,13vh,150px); z-index: 3;
  max-width: 640px; opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.16,.8,.3,1); }
.hero-stage.copy-in .hero-stage-copy { opacity: 1; transform: none; }
.hero-stage-eyebrow { font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 14px; }
.hero-stage-title { font-size: clamp(44px,6.5vw,96px); font-weight: 700; line-height: .98; letter-spacing: -.03em; color: var(--ink-hi); }
.hero-stage-title .mark { color: var(--gold); }
.hero-stage-sub { margin-top: 10px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: rgba(251,247,239,.6); }
.hero-stage-tagline { margin-top: 18px; font-size: clamp(15px,1.3vw,17px); line-height: 1.7; color: rgba(251,247,239,.8); }
.hero-stage-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-stage-btn { display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 12px; font-size: 14px; font-weight: 700; transition: background .25s, border-color .25s, transform .18s; }
.hero-stage-btn.primary { background: var(--gold); color: #161207; box-shadow: 0 0 24px -6px rgba(200,167,67,.8); }
.hero-stage-btn.ghost { border: 1px solid rgba(200,167,67,.5); color: var(--ink-hi); }
.hero-stage-btn:hover { transform: translateY(-2px); }
.hero-stage-btn.ghost:hover { background: rgba(200,167,67,.12); border-color: var(--gold); }

/* Ton-Schalter oben rechts */
.hero-sound-btn { position: absolute; top: clamp(88px,11vh,120px); right: clamp(24px,5vw,60px); z-index: 4;
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 15px;
  border-radius: 999px; border: 1px solid rgba(200,167,67,.45); background: rgba(13,11,9,.5);
  backdrop-filter: blur(10px); color: var(--ink-hi); font-family: inherit; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: border-color .25s, background .25s; }
.hero-sound-btn:hover { border-color: var(--gold); background: rgba(13,11,9,.72); }
.hero-sound-btn svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.hero-sound-ring { position: absolute; inset: -1px; border-radius: 999px; border: 1px solid rgba(200,167,67,.5); animation: heroSoundPulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes heroSoundPulse { 0% { opacity: .7; transform: scale(1); } 70%,100% { opacity: 0; transform: scale(1.22); } }
.hero-stage.sound-on .hero-sound-ring { display: none; }
.hero-sound-ic-on { display: none; }
.hero-stage.sound-on .hero-sound-ic-on { display: block; }
.hero-stage.sound-on .hero-sound-ic-off { display: none; }

/* Experience-Gate: Halle-Standbild + Start-Button */
.hero-gate { position: absolute; inset: 0; z-index: 6; display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .7s ease; }
.hero-gate-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-gate::after { content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(13,11,9,.4) 0%, rgba(13,11,9,.78) 100%); }
.hero-gate-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; padding: 0 24px; }
.hero-gate-eyebrow { font-size: clamp(11px,1.1vw,13px); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.hero-gate-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 38px; border-radius: 999px;
  background: var(--gold); color: #161207; font-family: inherit; font-size: clamp(14px,1.4vw,16px); font-weight: 800; letter-spacing: .03em;
  cursor: pointer; box-shadow: 0 0 42px -8px rgba(200,167,67,.9); transition: transform .2s, box-shadow .25s; }
.hero-gate-btn svg { width: 20px; height: 20px; flex: none; }
.hero-gate-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 60px -6px rgba(200,167,67,1); }
.hero-gate-hint { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(251,247,239,.6); }
/* display:none statt nur opacity/visibility -> haelt auch gegen Extensions (Dark Reader), die opacity/visibility ueberschreiben */
.hero-stage.gate-closed .hero-gate { display: none; }
.hero-stage.gate-open .hero-intro-btn { display: none; }

/* Intro überspringen / nochmal abspielen (oben rechts) */
.hero-intro-btn { position: absolute; top: clamp(88px,11vh,120px); right: clamp(24px,5vw,60px); z-index: 4;
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 18px 11px 15px;
  border-radius: 999px; border: 1px solid rgba(200,167,67,.32); background: rgba(13,11,9,.42);
  backdrop-filter: blur(10px); color: rgba(251,247,239,.85); font-family: inherit; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: border-color .25s, background .25s, color .25s; }
.hero-intro-btn:hover { border-color: var(--gold); background: rgba(13,11,9,.72); color: var(--ink-hi); }
.hero-intro-btn svg { width: 16px; height: 16px; flex: none; }
.hero-intro-ic-replay { display: none; }
.hero-stage.intro-done .hero-intro-ic-skip { display: none; }
.hero-stage.intro-done .hero-intro-ic-replay { display: block; }

/* Scroll-Hinweis */
.hero-stage-scroll { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 10.5px; letter-spacing: .3em; color: rgba(251,247,239,.5); }
.hero-stage-scroll:hover { color: var(--ink-hi); }
.hero-stage-arrow { animation: heroScrollBob 2s ease-in-out infinite; font-size: 14px; }
@keyframes heroScrollBob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(5px); opacity: 1; } }

/* ============================================================
   APEX-Elemente übernommen (Ahmed-Amwell-Stil)
   ============================================================ */

/* ---- Header: Anfragen-Button (Reserve) ---- */
.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  background: linear-gradient(135deg, #e7c56f, #c8a743);
  color: #161207; font-size: 13px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 0 24px -6px rgba(200,167,67,.8);
  transition: transform .2s ease, box-shadow .25s ease;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 0 34px -4px rgba(200,167,67,1); }
.header-cta svg { width: 15px; height: 15px; }
@media (max-width: 860px) { .header-cta { display: none; } }

/* ---- Voraussetzungen: APEX-Nummern-Karten ---- */
.req-section { padding: clamp(60px,9vh,110px) clamp(24px,5vw,80px) !important; }
.req-wrap { max-width: 1200px; margin: 0 auto; }
.req-head { margin-bottom: 42px; max-width: 760px; }
.req-head h2 { font-size: clamp(30px,4vw,50px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-hi); }
.req-head .gold { color: var(--gold); }
.req-desc { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--ink-muted); max-width: 520px; }
.req-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.req-card {
  position: relative; padding: 34px 28px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 40%);
  border: 1px solid var(--border-d); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.req-card:hover { border-color: rgba(200,167,67,.45); box-shadow: 0 20px 60px -30px rgba(200,167,67,.6); transform: translateY(-5px); }
.req-cnum { font-size: 44px; font-weight: 800; color: rgba(200,167,67,.24); line-height: 1; }
/* Icons sind freigestellt (PNG mit Alpha), stehen also frei auf der Karte.
   Kein Kasten mehr, kein overflow:hidden, sonst wird der Goldschimmer abgeschnitten. */
.req-cic { width: 86px; height: 86px; background: none; display: grid; place-items: center; margin: 14px 0 16px; overflow: visible; }
.req-cic svg { width: 24px; height: 24px; color: var(--gold); }
.req-cic img { width: 100%; height: 100%; object-fit: contain; transform: none; }
.req-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--ink-hi); }
.req-card p { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.req-ul { width: 44px; height: 3px; margin-top: 16px; border-radius: 2px; background: linear-gradient(90deg, #e7c56f, #c8a743); }
@media (max-width: 900px) { .req-grid { grid-template-columns: 1fr; } }

/* ---- Bewertungen: heller Ivory-Block ---- */
.rev-section { background: var(--pearl); color: #17140f; padding: clamp(64px,9vh,100px) clamp(24px,5vw,80px); }
.rev-wrap { max-width: 1200px; margin: 0 auto; }
.rev-head { max-width: 720px; margin-bottom: 42px; }
.rev-title { font-size: clamp(28px,3.6vw,46px); font-weight: 700; letter-spacing: -0.02em; color: #17140f; }
.rev-title .gold { color: #b1863a; }
.rev-sub { margin-top: 14px; font-size: 15.5px; line-height: 1.65; color: rgba(0,0,0,.6); max-width: 560px; }
/* Zwei gegenlaeufige Bewertungs-Leisten */
.rev-marquee { display: flex; flex-direction: column; gap: 20px; margin-top: 44px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
/* jede Leiste einzeln ziehbar (wie docmo) */
.rev-row { overflow: hidden; cursor: grab; touch-action: pan-y; }
.rev-row[data-drag] { cursor: grabbing; user-select: none; }
.rev-row[data-drag] * { user-select: none; }
.rev-track { display: flex; gap: 20px; width: max-content; will-change: transform; }
/* JS-gesteuert (requestAnimationFrame) wie das docmo-Showwheel — robust gegen Extensions/reduced-motion */
.rev-track-right { transform: translateX(-50%); }
.rev-card { flex: 0 0 clamp(300px,26vw,360px); background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 18px; padding: 26px; box-shadow: 0 14px 40px -24px rgba(0,0,0,.3); }
.rev-card.is-empty { background: linear-gradient(180deg,#fff, #f4ede0); border-style: dashed; border-color: rgba(177,134,58,.35); }
.rev-stars { color: #dcae3c; letter-spacing: 3px; margin-bottom: 14px; font-size: 15px; }
.rev-card.is-empty .rev-stars { opacity: .35; }
.rev-text { font-size: 14.5px; line-height: 1.6; color: #33302a; margin-bottom: 20px; }
.rev-who { display: flex; align-items: center; gap: 11px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 14px; }
.rev-av { width: 38px; height: 38px; border-radius: 50%; background: #eee5d5; display: grid; place-items: center; font-weight: 700; font-size: 13px; color: #b1863a; }
.rev-who b { display: block; font-size: 14px; color: #17140f; }
.rev-who small { font-size: 11.5px; color: rgba(0,0,0,.5); }

/* ---- Kontakt: APEX-Split mit Glas-Formular ---- */
.ct-section { position: relative; padding: clamp(64px,9vh,110px) clamp(24px,5vw,80px); overflow: hidden; background: var(--obsidian); }
.ct-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.ct-section::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,19,16,.96), rgba(22,19,16,.72) 55%, rgba(22,19,16,.58)); }
.ct-grid { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 50px; align-items: center; }
.ct-eye { font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 16px; }
.ct-title { font-size: clamp(32px,4.4vw,56px); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; margin-bottom: 18px; color: var(--ink-hi); }
.ct-title .gold { color: var(--gold); }
.ct-lead { color: rgba(251,247,239,.72); font-size: 16px; line-height: 1.6; max-width: 420px; margin-bottom: 28px; }
.ct-rows { display: flex; flex-direction: column; gap: 16px; }
.ct-row { display: flex; align-items: center; gap: 14px; }
.ct-ic { width: 44px; height: 44px; border-radius: 12px; background: rgba(200,167,67,.1); display: grid; place-items: center; flex: none; }
.ct-ic svg { width: 20px; height: 20px; color: var(--gold); }
.ct-k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(251,247,239,.5); }
.ct-v { font-size: 15px; color: var(--ink-hi); }
.ct-form { background: rgba(20,18,16,.72); backdrop-filter: blur(16px); border: 1px solid rgba(200,167,67,.18); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 0 60px -20px rgba(200,167,67,.5); }
.ct-r2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ct-form label { display: flex; flex-direction: column; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(251,247,239,.55); }
.ct-form input, .ct-form select, .ct-form textarea { background: rgba(255,255,255,.04); border: 1px solid var(--border-d); border-radius: 12px; padding: 14px; color: var(--ink-hi); font-family: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; }
.ct-form input::placeholder, .ct-form textarea::placeholder { color: rgba(251,247,239,.35); }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: var(--gold); }
.ct-form textarea { resize: vertical; min-height: 84px; }
.ct-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; padding: 15px; border-radius: 12px; border: none; cursor: pointer; background: linear-gradient(135deg, #e7c56f, #c8a743); color: #161207; font-family: inherit; font-size: 14px; font-weight: 700; transition: box-shadow .25s ease, transform .18s ease; }
.ct-submit:hover { box-shadow: 0 0 30px -4px rgba(200,167,67,1); transform: translateY(-1px); }
.ct-submit svg { width: 17px; height: 17px; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; gap: 32px; } .ct-r2 { grid-template-columns: 1fr; } }

/* ===== SPOTLIGHT / DER STAR IM FUHRPARK ===== */
.spot-section { padding: 110px clamp(20px,5vw,64px); }
.spot-wrap { max-width: 1400px; margin: 0 auto; }
.spot-title { font-size: clamp(32px,4.4vw,54px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink-hi); margin: 14px 0 16px; }
.spot-sub { color: var(--ink-muted); font-size: 16px; line-height: 1.6; max-width: 560px; margin-bottom: 56px; }

.spot-grid { display: grid; grid-template-columns: 1.35fr .95fr; gap: clamp(32px,5vw,64px); align-items: center; }

.spot-stage { position: relative; padding: clamp(24px,3vw,40px); }
.spot-frame {
  position: relative; border-radius: 28px; overflow: hidden;
  display: block; aspect-ratio: 16 / 9;    /* Rahmen folgt dem Foto, sonst bleiben dunkle Baender */
  background: var(--obsidian);
  border: 1px solid rgba(200,167,67,.3);
  padding: 0;
  box-shadow: 0 0 0 1px rgba(200,167,67,.08), 0 60px 140px -40px rgba(200,167,67,.45), inset 0 0 90px rgba(200,167,67,.08);
}
.spot-frame::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(70% 60% at 50% 60%, rgba(200,167,67,.10), transparent 74%);
  mix-blend-mode: screen;
}
.spot-floorglow { display: none; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); width: 72%; height: 34px; border-radius: 50%; background: rgba(200,167,67,.45); filter: blur(36px); z-index: 1; }
/* Echtes Hallenfoto statt Freisteller ueber einem gedimmten Duplikat desselben Autos.
   Das Doppelbild war die Ursache fuer den unruhigen Eindruck. */
.spot-carimg {
  position: relative; z-index: 2; width: 100%; height: 100%; display: block;
  object-fit: cover; border-radius: 27px;
}

.spot-kpis { position: absolute; top: 7%; right: clamp(4px,1vw,14px); display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.spot-chip {
  background: rgba(12,10,8,.82); backdrop-filter: blur(10px); border: 1px solid rgba(200,167,67,.4);
  border-radius: 14px; padding: 13px 18px; min-width: 98px; box-shadow: 0 14px 40px rgba(0,0,0,.55), 0 0 26px -6px rgba(200,167,67,.55);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s;
}
.spot-chip:hover { transform: translateY(-3px); border-color: rgba(200,167,67,.7); box-shadow: 0 18px 46px rgba(0,0,0,.6), 0 0 38px -4px rgba(200,167,67,.75); }
.spot-n { font-size: 1.65rem; font-weight: 700; color: var(--gold); line-height: 1; white-space: nowrap; text-shadow: 0 0 18px rgba(200,167,67,.6); }
.spot-l { font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dark-muted); margin-top: 6px; white-space: nowrap; }

.spot-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(200,167,67,.4); border-radius: 100px; padding: 7px 15px; box-shadow: 0 0 24px -8px rgba(200,167,67,.7); }
.spot-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 12px 2px var(--gold); }

.spot-name { font-size: clamp(30px,3.6vw,46px); font-weight: 700; line-height: 1.05; margin: 14px 0 6px; color: var(--ink-hi); }
.spot-name .gold { text-shadow: 0 0 26px rgba(200,167,67,.55); }
.spot-meta { color: var(--ink-muted); font-size: 15px; }

.spot-speclist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin-top: 28px; }
.spot-li { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--border-d); }
.spot-li .k { color: var(--ink-dark-muted); font-size: 13px; }
.spot-li .v { font-size: 14px; font-weight: 600; color: var(--ink-hi); }

.spot-cta-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.spot-price { font-size: clamp(26px,3.2vw,34px); font-weight: 700; color: var(--ink-hi); }
.spot-price small { font-size: .5em; font-weight: 500; color: var(--ink-dark-muted); margin-left: 2px; }
.spot-cta { flex: none; padding: 14px 24px; box-shadow: 0 0 30px -8px rgba(37,211,102,.9); }

.spot-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.spot-reveal.spot-in { opacity: 1; transform: none; }
.spot-reveal.spot-d1 { transition-delay: .08s; }
.spot-reveal.spot-d2 { transition-delay: .18s; }

@media (max-width: 900px) {
  .spot-grid { grid-template-columns: 1fr; gap: 36px; }
  .spot-kpis { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 20px; }
  .spot-speclist { grid-template-columns: 1fr; gap: 0; }
  .spot-carimg { transform: none; max-width: 100%; }
}
@media (max-width: 560px) {
  .spot-kpis { gap: 10px; }
  .spot-chip { flex: 1 1 calc(50% - 10px); min-width: 0; }
}

/* ---- Google-Bewertungen: Kennzeichnung wie bei Buchhaltung Dubai ---- */
.rev-badge {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 20px;
  padding: 10px 16px; border-radius: 999px; text-decoration: none;
  background: #fff; border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 10px 26px -18px rgba(0,0,0,.5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.rev-badge:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.55); }
.rev-badge b { font-size: 19px; color: #17140f; line-height: 1; }
.rev-badge-stars { color: #dcae3c; letter-spacing: 2px; font-size: 14px; }
.rev-badge-txt { font-size: 12.5px; color: rgba(0,0,0,.55); }
.rev-g { width: 15px; height: 15px; flex: 0 0 auto; }

.rev-who small { display: flex; align-items: center; gap: 5px; }
.rev-who small .rev-g { width: 12px; height: 12px; }

/* Aggregat- und Einladungs-Karte in der Leiste */
a.rev-card { display: flex; flex-direction: column; text-decoration: none; }
.rev-card-agg, .rev-card-cta {
  justify-content: center; gap: 6px;
  background: linear-gradient(180deg, #fff, #f6efe2);
  border-color: rgba(177,134,58,.35);
}
.rev-agg-top { display: flex; align-items: center; gap: 7px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,.5); }
.rev-agg-num { font-size: 40px; font-weight: 700; color: #17140f; line-height: 1; margin-top: 4px; }
.rev-agg-link { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #b1863a; }
.rev-card-agg .rev-text, .rev-card-cta .rev-text { margin-bottom: 0; }

/* ============================================================
   HANDY-ANSICHT — eigene Umsetzung statt verkleinertem Desktop
   (Stand 2026-07-29). Basis-Regeln stehen hier, der Rest in der
   Media-Query darunter, damit der Desktop unangetastet bleibt.
   ============================================================ */
.rev-swipe, .rev-nav { display: none; }
.fleet-filter-toggle { display: none; }

/* WhatsApp-Knoepfe in Gold statt Signalgruen: 13x Gruen brachen Gold/Schwarz komplett auf. */
/* WhatsApp bleibt Signalgruen: das Gruen ist das Wiedererkennungszeichen und
   soll am Handlungsknopf sofort lesbar sein. */
.car-btn-wa { background: #25D366; color: #06331b; box-shadow: 0 0 18px -3px rgba(37,211,102,.7); }
.car-btn-wa:hover { box-shadow: 0 0 26px -2px rgba(37,211,102,.95); }
.spot-cta { box-shadow: 0 0 30px -8px rgba(37,211,102,.9); }
.fab-wa { background: #25D366; color: #06331b; box-shadow: 0 0 22px -4px rgba(37,211,102,.75); }
.fab-wa:hover { box-shadow: 0 0 32px -2px rgba(37,211,102,1); }

@media (max-width: 768px) {

  /* Halle-Kacheln: Groesse/Typo etwas kompakter, die Struktur selbst (Ziehen/Wischen,
     Pfeile aus) ist schon in der Basis-Regel oben definiert. */
  .craft-stage { height: 62vh; }
  .craft-panel-copy { max-width: none; }
  .craft-headline { font-size: 26px; }
  .craft-num { font-size: 48px; }

  /* --- 2. Marken-Ticker: dunkel und einzeilig statt hellem Fremdkoerper --- */
  .brand-ticker {
    background: var(--obsidian);
    border-top: 1px solid rgba(200,167,67,.16);
    border-bottom: 1px solid rgba(200,167,67,.16);
    padding: 13px 0; overflow: hidden;
  }
  .brand-ticker-inner {
    flex-wrap: nowrap; justify-content: flex-start;
    gap: 26px; overflow-x: auto; padding: 0 20px; scrollbar-width: none;
  }
  .brand-ticker-inner::-webkit-scrollbar { display: none; }
  .brand-ticker-text { font-size: 11px; color: rgba(251,247,239,.42); white-space: nowrap; }

  /* --- 3. Schwebende Knoepfe: schmale Leiste statt zwei Pillen ueber dem Inhalt --- */
  .floating-ctas {
    left: 0; right: 0; bottom: 0;
    flex-direction: row; gap: 10px; align-items: stretch;
    background: rgba(12,10,8,.94);
    border-top: 1px solid rgba(200,167,67,.22);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .fab { flex: 1; justify-content: center; border-radius: 11px; padding: 12px 10px; font-size: 13px; }
  .fab-call { background: transparent; border: 1px solid rgba(200,167,67,.5); box-shadow: none; }
  .fab-wa { box-shadow: none; }
  body { padding-bottom: 72px; }   /* damit die Leiste nichts mehr verdeckt */

  /* --- 4. Fuhrpark-Filter eingeklappt (vorher ~2 Bildschirme vor dem 1. Auto) --- */
  .fleet-filter-toggle {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 12px 18px; margin-bottom: 18px;
    border-radius: 11px; border: 1px solid rgba(200,167,67,.45);
    background: rgba(255,255,255,.04); color: var(--ink-hi);
    font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .02em;
    cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  .fleet-filter-toggle svg { width: 17px; height: 17px; }
  .fleet-filter-toggle.is-open { border-color: var(--gold); background: rgba(200,167,67,.12); }
  .ff-badge {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--gold); color: #16130c;
    font-size: 11.5px; font-weight: 700; display: grid; place-items: center;
  }
  .ff-badge[hidden] { display: none; }   /* display:grid schlaegt sonst das hidden-Attribut */
  .fleet-sidebar { display: none; }
  .fleet-sidebar.is-open { display: flex; flex-direction: column; gap: 20px; margin-bottom: 26px; }
  .fleet-layout { display: block; }

  /* --- 5. Fahrzeugkarten kompakter (die Liste war 6 Bildschirme lang) --- */
  .car-name-bar { padding: 14px 16px 0; margin-bottom: 12px; }
  .car-name { font-size: 17px; }
  .car-price { font-size: 19px; }
  .car-specs { gap: 8px 10px; padding: 0 16px 14px; }
  .car-specs span { font-size: 12.5px; }
  .car-btns { padding: 12px 16px 16px; gap: 8px; }
  .car-btn-details, .car-btn-wa { padding: 11px 10px; font-size: 13px; }

  /* --- 6. Showroom „Waehlen Sie Ihr Fahrzeug" -------------------------------
     Vorher: Buehne fast bildschirmhoch mit winzigem Auto, danach ein hoher
     Kachelblock mit 5 Werten und breite Thumbs mit Namen+Preis. Jetzt in der
     Sprache des IVORY-Character-Select: kompakte Buehne mit grossem Auto,
     runde Thumbs ohne Beschriftung, Pfeile + Zaehler darunter. */
  .showroom-bg { height: clamp(400px, 54vh, 540px); }
  .showroom-car-stage { bottom: 19%; height: 66%; width: min(96%, 640px); }
  .showroom-head { top: 74px; padding: 0 20px; }   /* Platz fuer die fixe Kopfzeile */
  .showroom-title { font-size: 27px; margin-bottom: 8px; }
  .showroom-eyebrow { margin-bottom: 8px; font-size: 10.5px; }
  .showroom-sub { display: none; }          /* „Klicken Sie sich durch" erklaert sich auf dem Handy von selbst */
  .showroom-360 { display: none; }          /* Deko, kollidierte mit Auto und Panel */
  .showroom-fade { background:
    linear-gradient(to bottom, rgba(13,11,9,.9) 0%, rgba(13,11,9,.1) 26%, rgba(13,11,9,0) 56%, rgba(13,11,9,.6) 84%, var(--obsidian) 100%); }

  .showroom-panel { margin-top: -104px; padding: 0 20px; }
  /* Panel liegt jetzt ueber der hellen Bodenspiegelung -> weicher Abdunkler dahinter,
     sonst verliert die Werte-Zeile Kontrast. Liegt im Stacking-Context des Panels. */
  .showroom-panel::before {
    content: ''; position: absolute; left: 0; right: 0; top: -34px; bottom: -12px;
    background: linear-gradient(to bottom, rgba(13,11,9,0) 0%, rgba(13,11,9,.72) 38%, rgba(13,11,9,.92) 100%);
    z-index: -1; pointer-events: none;
  }
  .showroom-panel-name { margin-bottom: 14px; }
  .showroom-panel-name h3 { font-size: 21px; }

  /* Werte als schlanke Zeile statt hohem Kasten, nur die drei die zaehlen */
  .showroom-specs {
    grid-template-columns: repeat(3, 1fr); gap: 10px;
    background: none; border: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    padding: 0; margin-bottom: 18px;
    border-top: 1px solid rgba(251,247,239,.1); border-bottom: 1px solid rgba(251,247,239,.1);
    padding: 14px 0;
  }
  .showroom-specs > div:nth-child(3), .showroom-specs > div:nth-child(4) { display: none; }
  .showroom-specs > div { align-items: flex-start; gap: 4px; }
  .showroom-specs .v { font-size: 14px; }

  .showroom-panel-ctas { flex-direction: column; gap: 10px; }
  .showroom-btn-book, .showroom-btn-details { width: 100%; text-align: center; justify-content: center; }

  /* Pfeile zurueck INS BILD wie auf dem Desktop (waren unter 900px seit jeher aus,
     dadurch gab es auf dem Handy ueberhaupt keine Navigation ausser Antippen).
     top darf sich NICHT auf die ganze .showroom-section beziehen (das ist ihr
     positionierter Elternrahmen) -- die waechst durch den gestapelten Namen/
     Specs/CTA-Block auf dem Handy weit ueber die Buehne hinaus, ein Prozentwert
     der Gesamthoehe landet dann im Textblock statt im Bild. Stattdessen an der
     halben Hoehe von .showroom-bg selbst ausrichten -- die hat hier eine EIGENE
     mobile Hoehe (clamp(400px,54vh,540px), siehe .showroom-bg-Override oben),
     nicht die Desktop-Buehne (clamp(560px,82vh,880px)). */
  .showroom-nav { display: flex; width: 38px; height: 38px; top: clamp(200px, 27vh, 270px); }
  .showroom-nav svg { width: 15px; height: 15px; }
  .showroom-nav.prev { left: 10px; }
  .showroom-nav.next { right: 10px; }

  /* Thumb-Reihe bleibt wie auf dem Desktop: erkennbares Auto + Name + Preis,
     nur schmaler. Runde Punkte hatten genau das genommen, was die Reihe leistet:
     man sieht auf einen Blick, welche anderen Fahrzeuge es gibt. */
  .showroom-strip-wrap { padding: 20px 20px 26px; }
  .showroom-strip { gap: 10px; scroll-snap-type: x mandatory; }
  .showroom-thumb { width: 124px; scroll-snap-align: center; }
  .showroom-thumb span { font-size: 11.5px; padding: 7px 9px 0; }
  .showroom-thumb em { font-size: 10px; padding: 2px 9px 8px; }
  .showroom-thumb:hover, .showroom-thumb.active { transform: none; }

  /* --- 7. Spotlight: Kennzahlen standen doppelt (Kacheln + Tabelle) --- */
  .spot-kpis { display: none; }
  .spot-section { padding: 72px clamp(18px,5vw,40px); }
  .spot-sub { margin-bottom: 30px; }
  .spot-cta-row { gap: 14px; }
  .spot-cta { width: 100%; justify-content: center; }

  /* --- 8. Bewertungen: auf dem Handy DIESELBEN zwei laufenden Leisten wie am Desktop
     (Muster: Buchhaltung Dubai, dort laeuft die Marquee auf allen Breiten, nur mit
     schmaleren Karten). Die frueher hier gebaute Wisch-Variante mit Punkten ist
     abgeloest; ihr Markup bleibt im HTML, wird aber nicht mehr angezeigt.
     Wichtig: auf dem Handy MUSS der Text begrenzt werden, sonst zieht die laengste
     Rezension alle Karten der Leiste auf ueber 600 px hoch. */
  .rev-swipe, .rev-nav { display: none; }

  .rev-marquee {
    display: flex; gap: 14px; margin-top: 30px;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  }
  .rev-marquee .rev-track { gap: 14px; align-items: stretch; }
  .rev-marquee .rev-card {
    flex: 0 0 300px; padding: 20px; display: flex; flex-direction: column;
  }
  .rev-marquee .rev-text {
    margin-bottom: 16px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
  }
  .rev-marquee .rev-who { margin-top: auto; }
  .rev-marquee .rev-card-agg, .rev-marquee .rev-card-cta { justify-content: center; }
}

/* Telefonnummer ist jetzt ein Link, Aussehen bleibt wie der Text vorher */
a.header-phone { text-decoration: none; }
a.header-phone:hover { color: var(--gold); }
.ct-v a, .footer-col a[href^="tel:"], .footer-col a[href^="mailto:"] { color: inherit; text-decoration: none; }
.ct-v a:hover, .footer-col a[href^="tel:"]:hover, .footer-col a[href^="mailto:"]:hover { color: var(--gold); }

/* ---- Anfrageformular: Spam-Falle, Einwilligung, Statusmeldung ---- */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Kein Pflicht-Haekchen: die Rechtsgrundlage ist die Vertragsanbahnung, nicht die
   Einwilligung. Pflicht ist nur der sichtbare Weg zur Datenschutzerklaerung. */
.ct-hinweis { font-size: 12px; line-height: 1.55; color: rgba(251,247,239,.42); margin-top: -4px; }
.ct-hinweis a { color: rgba(200,167,67,.85); }
.ct-consent input { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--gold); }
.ct-consent a { color: var(--gold); }
.ct-status { min-height: 20px; font-size: 13.5px; line-height: 1.5; }
.ct-status.ok { color: #5fd08a; }
.ct-status.fehler { color: #e2765f; }
.ct-form input:invalid.zeig-fehler, .ct-form textarea:invalid.zeig-fehler { border-color: #e2765f; }
.ct-submit[disabled] { opacity: .55; cursor: progress; }