/* ==========================================================================
   Autohaus ISI — built from Figma "Flo - Autohaus" / Main Design / Version 1
   Tokens are lifted verbatim from the file's Style Guide canvas.
   ========================================================================== */

/* ---------- fonts (self-hosted, no third-party CDN — DSGVO) ---------- */
@font-face {
  font-family: 'Michroma';
  src: url('../fonts/Michroma-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-latin-var.woff2') format('woff2-variations'),
       url('../fonts/Inter-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- design tokens (Style Guide canvas) ---------- */
:root {
  --onyx:      #0B0B0C;
  --graphite:  #161618;
  --gold:      #E2AC47;
  --gold-deep: #B58A39;
  --carpet:    #B01218;
  --bone:      #ECE7DD;
  --paper:     #F4F1EA;
  --muted:     #948C7F;

  --gold-grad: linear-gradient(179deg, #E2AC47 0%, #B58A39 84%);
  --hairline:  rgba(236, 231, 221, 0.14);

  --f-display: 'Michroma', 'Arial Narrow', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* 1440 reference frame → 1340 content, 50px gutters */
  --maxw: 1340px;
  --gut:  clamp(20px, 3.472vw, 50px);

  /* motion — NOT supplied by the designer; house values, see MOTION.md */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  240ms;
  --dur-base:  420ms;
  --dur-slow:  680ms;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--onyx);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
/* aspect-ratio must beat the height="" presentational hint; explicit
   height rules (e.g. .hero__slide img) still win on specificity */
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, figure, ul { margin: 0; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gut); top: -100px; z-index: 200;
  background: var(--gold); color: var(--onyx); padding: 12px 20px; font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 16px; }

/* ---------- type ---------- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  /* German compounds ("Fahrzeugveredelung") are one unbreakable word and
     Michroma is a wide face, so at 390px they used to push the whole page
     43px sideways -- and html is overflow-x:visible, so it really scrolled.
     hyphens:auto uses the page's lang="de" for a proper break; break-word is
     the backstop for anything the hyphenator does not know. Fixed 2026-08-17. */
  hyphens: auto;
  overflow-wrap: break-word;
}
/* h1 — Michroma 50/62 @1440 */
.t-hero  { font-size: clamp(1.75rem, 3.472vw, 3.125rem); line-height: 1.24; }
/* h2 — Michroma 42/56 @1440 */
.t-h2    { font-size: clamp(1.5rem, 2.917vw, 2.625rem);  line-height: 1.334; }
/* section eyebrow — Inter 16 upper, -3% */
.eyebrow {
  font-size: 1rem; line-height: 1.75; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--bone);
}
/* "Autohaus / ISI" als gestapelte Marke: die Ueberschrift ist nur so breit wie
   "AUTOHAUS", das "ISI" darunter steht mittig (Elvis 03.09: "das ISI mittig"). Der
   Block selbst bleibt links am Raster, nur die zweite Zeile zentriert sich. */
.t-stack { width: max-content; max-width: 100%; text-align: center; justify-self: start; }
.gold-text {
  color: var(--gold);
  background-image: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
}
@supports (-webkit-text-fill-color: transparent) {
  .gold-text { -webkit-text-fill-color: transparent; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 26px;
  font-weight: 600; font-size: 1rem; letter-spacing: -0.03em; text-transform: uppercase;
  background: var(--gold-deep); color: var(--onyx);
  border: 1px solid var(--gold-deep);
  transition: background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out);
}
.btn:hover  { background: var(--gold); border-color: var(--gold); }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--hairline); }
.btn--ghost:hover { background: rgba(236,231,221,.08); border-color: var(--bone); }
.btn--block { display: flex; width: 100%; }

.icon-btn {
  display: grid; place-items: center; width: 47px; height: 47px;
  border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: var(--bone);
  transition: background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-out);
}
.icon-btn:hover:not(:disabled) { background: rgba(236,231,221,.1); border-color: var(--bone); }
.icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.icon-btn svg { width: 24px; height: 24px; }

/* ==========================================================================
   Site bar
   ========================================================================== */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding-block: 24px;
  transition: background var(--dur-base) var(--ease-soft),
              padding var(--dur-base) var(--ease-soft),
              backdrop-filter var(--dur-base) var(--ease-soft);
}
.bar__inner { display: flex; align-items: center; justify-content: space-between; }
/* Marke = das Wappen als Vektor (crest.svg, 548:652), seit 03.09. Hoehe statt Breite,
   sonst wuerde das hochformatige Wappen bei 188px Breite 224px hoch. 54px ist eine
   Stufe groesser als das ~42px-Wappen im alten Schriftzug-Lockup; der negative
   Block-Rand laesst die Layoutbox bei den bisherigen 45px, damit die Kopfzeile
   exakt so hoch bleibt wie vorher (93px / 73px angedockt). */
.bar__logo img { height: 54px; width: auto; margin-block: -4.5px; }
/* Schriftzug neben dem Wappen (Flo 11.09), gesetzt wie die Wandbeschriftung im
   Showroom: „Autohaus" weiss, „ISI" gold, Serife. wordmark.svg ist Pfad, keine
   Webschrift. Hoehe = Oberlaenge bis Grundlinie; die Layoutbox bleibt unter den
   45px des Wappens, die Kopfzeile wird also nicht hoeher. */
.bar__logo { display: inline-flex; align-items: center; gap: 14px; }
.bar__logo img.bar__wordmark { height: 32px; margin-block: 0; } /* 25.09: Fassung AUTOHAUS ISI GmbH (ISIs eigenes Logo), GmbH-Zeile braucht die Hoehe */
/* wraps the DE/EN toggle + burger as one group, so .bar__inner's
   space-between still only ever sees two children (logo, this group) --
   see _build/i18n.py inject_toggle() for why the wrap exists */
.bar__right { display: flex; align-items: center; gap: 18px; }
.bar__lang {
  /* 14px floor (site-wide house rule) -- matches .bar__menu's own size */
  font-family: var(--f-display); font-size: 0.875rem; letter-spacing: -0.02em;
  color: var(--muted); text-transform: uppercase; padding: 6px 11px;
  border: 1px solid var(--hairline); transition: color var(--dur-fast) var(--ease-soft),
                                                  border-color var(--dur-fast) var(--ease-soft);
}
.bar__lang:hover { color: var(--gold); border-color: var(--gold); }
.bar.is-stuck {
  background: rgba(11,11,12,.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding-block: 14px;
  border-bottom: 1px solid var(--hairline);
}
.bar__menu {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 0.875rem; line-height: 1.43;
  text-transform: uppercase; color: #fff;
}
.bar__menu:hover .burger span { background: var(--gold); }

/* Kopfzeile auf schmalen Schirmen. Ohne diese Regeln steht der DE/EN-Schalter
   auf dem Telefon direkt am Logo: bei 375px gemessene 0px Abstand, weil Logo
   (188px) + Schalter + "Menü" + Burger die Zeile exakt fuellen. Flex drueckte
   das Logo dann auf 151px zusammen und space-between hatte nichts mehr zu
   verteilen. Der groesste rueckgewinnbare Platz ist das Wort "Menü": es wird
   hier nur OPTISCH ausgeblendet (gleiche Technik wie .sr-only), damit der
   Knopf seinen Namen fuer Screenreader behaelt. Der Burger allein ist auf dem
   Telefon ohnehin die gelaeufige Form. Am Desktop aendert sich nichts. */
@media (max-width: 600px) {
  .bar__logo img { height: 45px; margin-block: -4.5px; } /* Layoutbox 36px wie zuvor, Kopfzeile bleibt 84px */
  .bar__logo { gap: 10px; }
  .bar__logo img.bar__wordmark { height: 24px; margin-block: 0; }
  .bar__menu > span:not(.burger) {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .bar__menu { gap: 0; }
  .bar__right { gap: 14px; }
  .bar__lang { padding: 4px 9px; }
}
.burger { display: block; width: 31px; height: 25px; position: relative; }
.burger span {
  position: absolute; left: 0; height: 2px; width: 100%; background: #fff;
  transition: background var(--dur-fast) var(--ease-soft),
              transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) linear;
}
.burger span:nth-child(1) { top: 2px; }
.burger span:nth-child(2) { top: 11px; }
.burger span:nth-child(3) { top: 20px; }
[aria-expanded="true"] .burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(11,11,12,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  display: grid; place-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-soft), visibility var(--dur-base);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer ul { display: grid; gap: clamp(14px, 2.2vw, 26px); text-align: center; }
.drawer a {
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 3vw, 2.25rem); color: var(--bone);
  transition: color var(--dur-fast) var(--ease-soft);
}
.drawer a:hover, .drawer a[aria-current="page"] { color: var(--gold); }

/* Menügruppe "Dienstleistungen" (Elvis 04.09: drei Leistungsseiten unter EINEM
   Punkt). Die Gruppenzeile ist Text, kein Link -- es gibt keine eigene Seite
   dahinter. Sie führt optisch, die Kinder ordnen sich ihr eine Stufe leiser
   unter: gleiche Schrift, kleiner, gedämpfte Farbe. */
.drawer__group-label {
  display: block;
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: -0.03em;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--bone);
}
.drawer__sub {
  margin-top: clamp(6px, 1vw, 12px);
  gap: clamp(4px, .9vw, 10px) !important;
}
.drawer__sub a {
  font-size: clamp(.95rem, 1.9vw, 1.35rem);
  color: color-mix(in srgb, var(--bone) 62%, transparent);
}
.drawer__sub a:hover, .drawer__sub a[aria-current="page"] { color: var(--gold); }
/* Am Handy sind diese drei Zeilen die kleinsten Ziele im Menü (22px gegen 28px
   der Hauptpunkte). Das Polster wächst in den vorhandenen Abstand hinein: die
   Trefferfläche wird größer, das Bild bleibt Pixel für Pixel gleich. */
@media (pointer: coarse) {
  .drawer__sub a { display: inline-block; padding-block: 8px; }
  .drawer__sub { gap: 0 !important; }
}

/* ==========================================================================
   Hero — 1440x822 in the Figma frame
   ========================================================================== */
.hero {
  position: relative;
  height: clamp(600px, 57.08vw, 860px);
  overflow: hidden;
  background: var(--onyx);
}
/* 26.10. (Review fix1): ab 2000 px Breite war der Hero mit 860 px so flach (~2,4 bis 3:1), dass jedes
   3:2-Foto Dach oder Front verlor. Auf sehr breiten Bildschirmen darf er bis Bildschirmhöhe wachsen;
   bis 1920 px bleibt alles wie gehabt. */
@media (min-width: 2000px) {
  .hero { height: min(57.08vw, 100svh); }
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* scrims — three stacked gradients, as drawn in Figma */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(261deg, rgba(0,0,0,.58) 10%, rgba(0,0,0,0) 29%),
    linear-gradient(180deg, rgba(0,0,0,.30) 7%, rgba(0,0,0,0) 33%),
    linear-gradient(351deg, rgba(0,0,0,.70) 20%, rgba(0,0,0,0) 67%);
}
.hero__inner {
  position: relative; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(60px, 8.6vw, 124px);
}
.hero__copy { display: grid; gap: 16px; max-width: 640px; }
.hero__copy p { font-size: 1rem; line-height: 1.8125; max-width: 432px; color: var(--bone); }
/* Jubiläum 2026: eine grosse goldene 30 statt einer kleinen Zeile (Flo, 03.09). Bleibt bei
   der Hero-Copy und nicht mitten im Bild, so wollte es Elvis. */
.hero__jubi { display: flex; align-items: center; gap: 16px; margin-bottom: 4px; }
.hero__jubi-num {
  font-family: var(--f-display); font-weight: 400; line-height: 0.9;
  font-size: clamp(2.5rem, 3.9vw, 3.5rem); letter-spacing: -0.04em;
}
.hero__jubi-txt {
  font-size: 0.875rem; line-height: 1.45; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); padding-left: 16px; border-left: 1px solid var(--gold-deep);
}

/* vertical dots, right rail (Figma x1377) */
.hero__dots {
  position: absolute; right: var(--gut); top: 50%; transform: translateY(-50%);
  display: grid; gap: 10px; z-index: 3;
}
.hero__dots button {
  /* 24px hit area (WCAG target-size), 12px visual dot */
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: none;
}
.hero__dots button::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(236,231,221,.35);
  transition: background var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-out);
}
.hero__dots button[aria-selected="true"]::before { background: var(--bone); transform: scale(1.15); }

.hero__social {
  position: absolute; right: var(--gut); bottom: clamp(60px, 8.6vw, 124px);
  display: grid; gap: 22px; z-index: 3;
}
.hero__social a { color: var(--bone); transition: color var(--dur-fast) var(--ease-soft); }
.hero__social a:hover { color: var(--gold); }
.hero__social svg { width: 26px; height: 26px; }

/* ==========================================================================
   Marken marquee
   ========================================================================== */
.marken { padding-block: clamp(28px, 3.4vw, 44px); overflow: hidden; }
.marken__track {
  display: flex; align-items: center; gap: clamp(48px, 7vw, 101px);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marken__track img {
  height: 56px; width: auto; opacity: .7;
  filter: grayscale(1) brightness(1.7);
  transition: opacity var(--dur-fast) var(--ease-soft), filter var(--dur-fast) var(--ease-soft);
}
.marken:hover .marken__track { animation-play-state: paused; }
.marken__track img:hover { opacity: 1; filter: grayscale(0) brightness(1); }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ==========================================================================
   Vertrauen
   ========================================================================== */
.vertrauen { padding-block: clamp(56px, 7.6vw, 110px); }
.vertrauen__row {
  display: grid; grid-template-columns: minmax(0, 819fr) minmax(0, 473fr);
  gap: clamp(28px, 3.4vw, 48px); align-items: center;
}
.vertrauen__left  { display: grid; gap: 32px; align-content: start; }
.vertrauen__head  { display: grid; gap: 1px; max-width: 367px; }
.vertrauen__main img { width: 100%; aspect-ratio: 819 / 628; object-fit: cover; }
.vertrauen__right { display: grid; gap: 50px; padding-top: 30px; }
.vertrauen__right img { width: 100%; aspect-ratio: 473 / 452; object-fit: cover; }
.vertrauen__right p  { font-size: 1.125rem; line-height: 1.556; }

/* ==========================================================================
   Kollektion — graphite band
   ========================================================================== */
.band { background: var(--graphite); }
.kollektion { padding-block: clamp(56px, 7vw, 100px); }
.kollektion__head {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-bottom: 42px;
}
.kollektion__nav { display: flex; gap: 12px; }

.kollektion__rail {
  --rail-gap: clamp(24px, 4vw, 65px);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc(50% - var(--rail-gap) / 2);
  gap: var(--rail-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kollektion__rail::-webkit-scrollbar { display: none; }

/* Die Karten im Querband duerfen NICHT einzeln vertikal einblenden. [data-reveal]
   startet 24px tiefer mit Deckkraft 0 und faehrt erst hoch, wenn das Element in
   den Blick kommt. Bei einem WAAGERECHTEN Band heisst das: beim seitlichen
   Wischen faehrt jede neu erscheinende Karte senkrecht hoch, mit bis zu 240ms
   Staffelverzoegerung, und weil sich dabei die Groesse aendert, rechnet
   scroll-snap seine Punkte neu und korrigiert den Scroll. Genau das Wackeln und
   Springen, das auf dem Telefon zu sehen war. Das Band als Ganzes blendet
   weiterhin ein (data-reveal sitzt jetzt auf .kollektion__rail selbst).
   Auf der Fahrzeugliste bleibt die Einblendung pro Karte erhalten, dort ist sie
   richtig, deshalb wird sie hier gezielt nur im Band abgeschaltet. */
html.js .kollektion__rail > [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
  transition-delay: 0s;
}
.card { display: grid; gap: 24px; align-content: start; scroll-snap-align: start; }
.card__media { position: relative; overflow: hidden; background: var(--onyx); }
.card__media img {
  width: 100%; object-fit: cover;
  /* 4:3 = the shape of every mobile.de photo (1280x960). The Figma 588/503 cut
     12 % of the width and with it noses and tails (Termin 26.10.). */
  aspect-ratio: 4 / 3;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.04); }
.card__body { display: grid; gap: 18px; }
.card__title-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.card__title { font-size: clamp(1.125rem, 1.53vw, 1.375rem); line-height: 1.4; font-weight: 400; }
.card__price {
  color: var(--gold); font-size: clamp(1.125rem, 1.53vw, 1.375rem); font-weight: 400;
  white-space: nowrap;
}
.card__specs {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-block: 12px;
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.card__spec { display: flex; align-items: center; gap: 8px; font-size: 0.9375rem; color: var(--bone); }
.card__spec svg { width: 15px; height: 15px; color: var(--gold); flex: none; }
.card__cta {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color var(--dur-fast) var(--ease-soft);
}
.card__cta svg { width: 22px; height: 22px; transition: transform var(--dur-base) var(--ease-out); }
.card:hover .card__cta { color: var(--gold); }
.card:hover .card__cta svg { transform: translateX(6px); }
/* Ganze Karte klickbar (Elvis 04.11.2026: "nur auf das Bild"). Der Titel-Link
   spannt sich ueber die Karte, Bild-Link bleibt fuer Maus-Hover darunter. */
.card { position: relative; }
.card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card { cursor: pointer; }

/* ==========================================================================
   Erlebnis — full-bleed slider band
   ========================================================================== */
.erlebnis { position: relative; height: clamp(420px, 53.8vw, 775px); overflow: hidden; }
.erlebnis__slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.erlebnis__slide.is-active { opacity: 1; }
.erlebnis__slide img { width: 100%; height: 100%; object-fit: cover; }
.erlebnis::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.15) 45%, rgba(0,0,0,.55) 100%);
}
.erlebnis__inner {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center; align-content: center; gap: 26px;
  padding-inline: clamp(70px, 8vw, 120px);
  text-align: center;
}
.erlebnis__title { max-width: 900px; text-shadow: 0 2px 30px rgba(0,0,0,.6); }
.erlebnis__dots { display: flex; gap: 4px; }
.erlebnis__dots button {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: none;
}
.erlebnis__dots button::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: rgba(236,231,221,.4);
  transition: background var(--dur-fast) var(--ease-soft);
}
.erlebnis__dots button[aria-selected="true"]::before { background: var(--bone); }
.erlebnis__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; }
.erlebnis__arrow--prev { left: var(--gut); }
.erlebnis__arrow--next { right: var(--gut); }

/* ==========================================================================
   Partner logos
   ========================================================================== */
.partners { padding-block: clamp(30px, 3.6vw, 48px); }
.partners__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 48px); flex-wrap: wrap;
}
.partners__row img {
  height: clamp(28px, 2.6vw, 38px); width: auto; opacity: .78;
  filter: grayscale(1) brightness(1.8);
  transition: opacity var(--dur-fast) var(--ease-soft);
}
.partners__row img:hover { opacity: 1; }

/* ==========================================================================
   Services
   ========================================================================== */
.services { padding-block: clamp(56px, 7vw, 100px); }
.services__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 45px;
}
.services__head-copy { display: grid; gap: 9px; }
.services__tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--hairline); margin-bottom: 45px;
}
.services__tab {
  min-height: 52px; padding: 14px 20px; text-align: center;
  font-size: 1rem; font-weight: 600; letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--bone); background: transparent;
  transition: background var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft);
}
.services__tab[aria-selected="true"] { background: var(--gold-deep); color: var(--onyx); }
.services__tab:hover:not([aria-selected="true"]) { background: rgba(236,231,221,.06); }

.services__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 2.5vw, 34px); }
.svc { display: grid; gap: 18px; align-content: start; }
.svc__media { overflow: hidden; }
.svc__media img {
  width: 100%; aspect-ratio: 430 / 430; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}
.svc:hover .svc__media img { transform: scale(1.05); }
.svc__title { font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.5; }
.svc__body { font-size: 0.9375rem; line-height: 1.7; color: var(--muted); }
.svc__cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.svc__cta svg { width: 22px; height: 22px; transition: transform var(--dur-base) var(--ease-out); }
.svc:hover .svc__cta { color: var(--gold); }
.svc:hover .svc__cta svg { transform: translateX(6px); }
.services__foot { display: grid; place-items: center; margin-top: clamp(40px, 5vw, 68px); }
[hidden] { display: none !important; }

/* ==========================================================================
   Lieferung — graphite band + collage
   ========================================================================== */
.lieferung { padding-block: clamp(56px, 7vw, 100px); }
.lieferung__row {
  display: grid; grid-template-columns: minmax(0, 591fr) minmax(0, 700fr);
  gap: clamp(32px, 4vw, 60px); align-items: center;
}
.lieferung__copy { display: grid; gap: 42px; align-content: center; }
.lieferung__head { display: grid; gap: 9px; }
.lieferung__body { display: flex; gap: 30px; align-items: flex-start; }
.lieferung__crest { width: 105px; height: auto; flex: none; background: #fff; padding: 4px; }
.lieferung__body p { font-size: 1.125rem; line-height: 1.834; letter-spacing: -0.03em; }

.collage {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  /* 26.10 (Flo): 12 halbe Zeilen statt 6, damit Kachel 3 eine halbe Zeile tiefer
     beginnen kann (Rolls-Royce zeigt mehr) und Kachel 2 + 3 die Luecken rechts fuellen.
     Kachel 1 + 4 sind exakt so gross wie im alten 6er-Raster (2 Zeilen + 1 Luecke = 1 alte Zeile). */
  grid-template-rows: repeat(12, minmax(0, 1fr));
  gap: 12px;
  aspect-ratio: 700 / 620;
}
.collage img { width: 100%; height: 100%; object-fit: cover; }
.collage figure { margin: 0; overflow: hidden; }
.collage figure:nth-child(1) { grid-column: 1 / 5; grid-row: 1 / 9; }
.collage figure:nth-child(2) { grid-column: 5 / 7; grid-row: 1 / 6; }
.collage figure:nth-child(3) { grid-column: 4 / 7; grid-row: 6 / 13; }
.collage figure:nth-child(4) { grid-column: 1 / 4; grid-row: 9 / 13; }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt { position: relative; padding-block: clamp(60px, 7vw, 96px); overflow: hidden; }
.kontakt__bg { position: absolute; inset: 0; }
.kontakt__bg img { width: 100%; height: 100%; object-fit: cover; }
.kontakt__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,11,12,.92) 0%, rgba(11,11,12,.55) 46%, rgba(11,11,12,.12) 100%);
}
.kontakt__inner { position: relative; z-index: 2; }
.kontakt__card {
  max-width: 679px;
  padding: 36px 24px 42px;
  display: grid; gap: 10px; justify-items: center; text-align: center;
  background: rgba(0,0,0,.62);
  border-radius: 10px;
  box-shadow: 0 4px 54px 0 rgba(255,255,255,.18);
}
.kontakt__title { font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.35; color: var(--bone); }
.kontakt__sub { font-size: 1rem; color: var(--bone); margin-top: 4px; }
.kontakt__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px; border: 1px solid rgba(236,231,221,.55); border-radius: 999px;
  font-size: 0.9375rem; color: var(--bone);
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft);
}
.chip:hover { background: rgba(236,231,221,.1); border-color: var(--bone); }
.chip svg { width: 15px; height: 15px; flex: none; }

.hours { width: 100%; margin-top: 26px; display: grid; gap: 2px; }
.hours__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 8px; border-bottom: 1px solid var(--hairline); text-align: left;
}
.hours__row:last-child { border-bottom: 0; }
.hours__day {
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--bone);
}
.hours__val { font-size: 0.9375rem; color: var(--bone); white-space: nowrap; }
/* „10–13 Uhr" in der Fusszeile:   allein hielt nur „13 Uhr" zusammen, auf
   390px brach die Zeile nach dem Halbgeviertstrich („10–" / „13 Uhr"). */
.nowrap { white-space: nowrap; }
.kontakt__note { font-size: 0.9375rem; color: var(--muted); margin-top: 14px; }
.kontakt__card .btn { margin-top: 20px; }

/* ==========================================================================
   Anfrage form
   ========================================================================== */
.anfrage { padding-block: clamp(56px, 7vw, 100px); }
.anfrage__grid {
  display: grid; grid-template-columns: minmax(0, 470fr) minmax(0, 820fr);
  gap: clamp(32px, 4vw, 60px); align-items: start;
}
.anfrage__intro { display: grid; gap: 18px; }
.anfrage__intro p { color: var(--muted); font-size: 1rem; }
.form { display: grid; gap: 20px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: grid; gap: 8px; }
.field > label { font-size: 0.9375rem; letter-spacing: -0.01em; color: var(--bone); }
.field .req { color: var(--gold); }
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  background: var(--onyx); color: var(--bone);
  border: 1px solid var(--hairline); border-radius: 2px;
  font-family: var(--f-body); font-size: 1rem; line-height: 1.5;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.band .field input, .band .field textarea, .band .field select { background: #101012; }
.field textarea { min-height: 148px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: rgba(236,231,221,.3); }
.field input:focus, .field textarea:focus { border-color: var(--gold); outline: none; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--carpet); }
.field__err { font-size: 0.875rem; color: #ED6A63; }
.field__err:empty { display: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(148,140,127,.75); }

/* honeypot — visually gone, still reachable by naive bots */
.hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}
.form__consent { display: flex; gap: 12px; align-items: flex-start; font-size: 0.875rem; color: var(--muted); }
.form__consent input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--gold); }
.form__consent a { color: var(--gold); text-decoration: underline; }
.form__status { font-size: 0.9375rem; min-height: 1.2em; }
.form__status[data-state="ok"]  { color: var(--gold); }
.form__status[data-state="err"] { color: #ED6A63; }
.form button[type="submit"][disabled] { opacity: .55; cursor: progress; }

.anfrage__ctx {
  display: flex; gap: 16px; align-items: center;
  padding: 14px; border: 1px solid var(--hairline); background: rgba(236,231,221,.03);
}
.anfrage__ctx img { width: 92px; height: 70px; object-fit: cover; flex: none; }
.anfrage__ctx strong { display: block; font-weight: 500; }
.anfrage__ctx span { font-size: 0.875rem; color: var(--muted); }

/* ==========================================================================
   Fahrzeuge listing + detail
   ========================================================================== */
.page-head { padding-top: clamp(120px, 12vw, 170px); padding-bottom: clamp(30px, 4vw, 52px); }
.page-head .eyebrow { color: var(--muted); }
.grid-cars {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: clamp(60px, 8vw, 110px);
}
.pdp { padding-top: clamp(112px, 11vw, 150px); padding-bottom: clamp(50px, 6vw, 80px); }
.pdp__grid {
  display: grid; grid-template-columns: minmax(0, 760fr) minmax(0, 520fr);
  gap: clamp(28px, 3.6vw, 56px); align-items: start;
}
.pdp__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--graphite); }

/* Fahrzeuggalerie. Erscheint erst, wenn der mobile.de-Feed mehr als ein Foto
   je Fahrzeug liefert; bei einem Bild wird die Leiste gar nicht gerendert. */
.pdp__thumbs {
  display: flex; gap: 10px; margin-top: 12px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.pdp__thumbs::-webkit-scrollbar { display: none; }
.pdp__thumb {
  flex: 0 0 auto; width: clamp(72px, 9vw, 104px); display: block;
  border: 1px solid transparent; opacity: .55; scroll-snap-align: start;
  transition: opacity var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft);
}
.pdp__thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--graphite); }
.pdp__thumb:hover, .pdp__thumb:focus-visible { opacity: 1; }
.pdp__thumb.is-active { opacity: 1; border-color: var(--gold); }

/* Grosses Bild mit Pfeilen + Zaehler, wischbar (Elvis 04.11.2026). */
.pdp__stage { position: relative; touch-action: pan-y; }
.pdp__stage img { display: block; }
.pdp__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(10, 10, 10, .55); color: #fff;
  transition: background var(--dur-fast) var(--ease-soft);
}
.pdp__nav:hover, .pdp__nav:focus-visible { background: rgba(10, 10, 10, .85); }
.pdp__nav svg { width: 22px; height: 22px; }
.pdp__nav--prev { left: 10px; }
.pdp__nav--next { right: 10px; }
.pdp__count {
  position: absolute; right: 10px; bottom: 10px; margin: 0;
  padding: 4px 10px; font-size: 0.8125rem; color: #fff;
  background: rgba(10, 10, 10, .55); font-variant-numeric: tabular-nums;
}

/* Verkaeufertext aus dem Portal. Steht bewusst unter dem Datenblock, nicht
   daneben: es ist Fliesstext, keine Tabelle. */
.pdp__desc { padding-bottom: clamp(50px, 6vw, 80px); }
.pdp__desc-body { max-width: 74ch; display: grid; gap: 14px; margin-top: 18px; color: var(--bone); }
.pdp__desc-note { color: var(--muted); font-size: 0.875rem; }
.pdp__aside { display: grid; gap: 22px; align-content: start; }
.pdp__price { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--gold); }
.pdp__vat { font-size: 0.875rem; color: var(--muted); }
.pdp__specs { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.pdp__specs div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 2px; border-bottom: 1px solid var(--hairline); font-size: 0.9375rem;
}
.pdp__specs dt { color: var(--muted); margin: 0; }
.pdp__specs dd { margin: 0; text-align: right; }
.crumbs { font-size: 0.875rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--gold); }

/* ==========================================================================
   Legal pages
   ========================================================================== */
.legal { padding-top: clamp(120px, 12vw, 170px); padding-bottom: clamp(60px, 8vw, 110px); max-width: 820px; }
.legal h2 { font-size: 1.25rem; margin-top: 38px; margin-bottom: 10px; color: var(--gold); }
.legal p, .legal li { color: var(--bone); font-size: 1rem; margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--gold); text-decoration: underline; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--onyx); padding: 60px 0 25px; border-top: 1px solid var(--hairline); }
.footer__inner { display: grid; gap: 60px; }
.footer__logo { justify-self: center; }
.footer__logo img { width: 224px; height: auto; }
.footer__cols {
  display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) auto;
  gap: clamp(24px, 3vw, 46px);
}
.footer__col h3 {
  font-family: var(--f-display); font-size: 0.9375rem; font-weight: 400; letter-spacing: -0.03em;
  color: var(--bone); margin-bottom: 16px;
}
.footer__col p, .footer__col li, .footer__col a { font-size: 0.9375rem; color: var(--muted); line-height: 1.75; }
.footer__col li + li { margin-top: 6px; }
.footer__col a:hover { color: var(--gold); }
.footer__social { display: flex; gap: 14px; }
.footer__social a { color: var(--bone); }
.footer__social a:hover { color: var(--gold); }
.footer__social svg { width: 22px; height: 22px; }
.footer__base {
  border-top: 1px solid var(--hairline); padding-top: 22px; text-align: center;
  font-size: 0.9375rem; color: var(--muted);
}

/* ==========================================================================
   Reveal motion (house values — designer supplied none)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  html.js [data-reveal].is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    transition-delay: calc(var(--reveal-i, 0) * 80ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .marken__track { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .vertrauen__row,
  .lieferung__row,
  .anfrage__grid,
  .pdp__grid { grid-template-columns: minmax(0, 1fr); }
  .vertrauen__right { padding-top: 0; gap: 28px; }
  .services__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 34px; }
  .kontakt__bg::after { background: linear-gradient(180deg, rgba(11,11,12,.72) 0%, rgba(11,11,12,.88) 100%); }
  .kontakt__card { max-width: none; }
}

@media (max-width: 700px) {
  .hero { height: clamp(560px, 150vw, 822px); }
  .hero__copy { max-width: none; }
  .hero__dots { top: 46%; right: 12px; }
  .hero__social {
    position: static; display: flex; gap: 20px; margin-top: 26px;
  }
  .hero__inner { padding-bottom: 46px; }
  .kollektion__rail {
    grid-auto-columns: 86%;
    margin-inline: calc(var(--gut) * -1); padding-inline: var(--gut);
    /* Ohne das richtet scroll-snap die Karte am Rand des Scrollbereichs aus und
       ignoriert padding-inline: die Karte klebte im Ruhezustand bei 0px an der
       Bildschirmkante (gemessen scrollLeft 20, Karte links 0). */
    scroll-padding-inline: var(--gut);
  }
  .services__grid { grid-template-columns: minmax(0, 1fr); }
  .services__tabs { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .lieferung__body { flex-direction: column; gap: 18px; }
  .collage { aspect-ratio: 1 / 1; }
  .erlebnis__inner { padding-inline: 64px; }
  .erlebnis__arrow--prev { left: 10px; }
  .erlebnis__arrow--next { right: 10px; }
  .icon-btn { width: 42px; height: 42px; }
  .marken__track img { height: 42px; }
}

/* ==========================================================================
   Journey cinema (lieferung.html) — ported from the pre-gold build 2026-07-30,
   mechanism unchanged (canvas scrub / crossfade / static tiers), re-skinned to
   the locked onyx/gold system.
   ========================================================================== */
.jc { position: relative; background: var(--onyx); }
.jc__stage { position: relative; }
.jc__media { position: relative; height: 62svh; overflow: hidden; }
.jc__poster, .jc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jc__poster--mid, .jc__poster--end { opacity: 0; }
.jc__canvas { display: none; }
.jc__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top right, rgba(11,11,12,.92) 0%, rgba(11,11,12,.5) 44%, rgba(11,11,12,.18) 100%);
}
.jc__beats { position: relative; z-index: 2; }
.jc__beat { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--hairline); }
.jc__beat:first-child { border-top: 0; }
.jc__cap h3 {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: -0.03em; font-size: clamp(1.5rem, 2.917vw, 2.625rem);
  line-height: 1.334; max-width: 18ch; color: var(--bone);
}
.jc__cap p { margin-top: 18px; color: var(--bone); max-width: 46ch; font-size: 1.0625rem; line-height: 1.75; }

/* step label: 01 ——— Straßentransport */
.jstep { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.jstep__num {
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: -0.03em;
  color: var(--gold);
}
.jstep__rule { width: 56px; height: 1px; background: var(--gold-deep); }
.jstep__tag {
  font-size: 0.9375rem; letter-spacing: -0.03em; text-transform: uppercase; color: var(--bone);
}

/* animated tiers (JS + motion): pin, scrub the sequence, time the beats */
@media (prefers-reduced-motion: no-preference) {
  html.js .jc.is-cinema { position: relative; height: 560svh; }
  html.js .jc.is-cinema .jc__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
  html.js .jc.is-cinema .jc__media { position: absolute; inset: 0; height: 100%; }
  html.js .jc.is-cinema.is-scrub .jc__canvas { display: block; }
  html.js .jc.is-cinema.is-scrub .jc__poster { opacity: 0; }
  html.js .jc.is-cinema.is-crossfade .jc__canvas { display: none; }
  html.js .jc.is-cinema.is-crossfade .jc__poster--start { opacity: 1; }
  html.js .jc.is-cinema.is-crossfade .jc__poster--mid,
  html.js .jc.is-cinema.is-crossfade .jc__poster--end { will-change: opacity; }

  html.js .jc.is-cinema .jc__beats { position: absolute; inset: 0; z-index: 3; }
  html.js .jc.is-cinema .jc__beat {
    position: absolute; inset: 0; padding: 0; border: 0;
    display: grid; opacity: 0; pointer-events: none; will-change: opacity;
  }
  html.js .jc.is-cinema .jc__cap { will-change: transform, filter; }
  html.js .jc.is-cinema .jc__beat[data-pos="left-mid"] { align-items: center; }
  /* v5 truck carries the ISI crest at its rear, right where left-mid copy sat: beat 01 goes onto the sand */
  html.js .jc.is-cinema .jc__beat[data-pos="bottom-left"] { align-items: end; }
  html.js .jc.is-cinema .jc__beat[data-pos="bottom-left"] .jc__cap { padding-bottom: clamp(2rem, 4.5vh, 3rem); }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"]  { align-items: start; }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"] .jc__cap { padding-top: clamp(6rem, 15vh, 10rem); }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"] .jc__cap { text-align: center; }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"] .jc__cap > * { margin-inline: auto; }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"] .jstep { justify-content: center; }
}

/* scroll hint over the cinema */
.jc__hint {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--bone); font-size: 0.875rem; letter-spacing: .08em; text-transform: uppercase;
  opacity: .8; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-soft);
}
.jc__hint::after {
  content: ''; width: 1px; height: 34px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: hint-drop 1.8s var(--ease-soft) infinite;
}
@keyframes hint-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.jc.is-scrolled .jc__hint { opacity: 0; }
html:not(.js) .jc__hint { display: none; }
@media (prefers-reduced-motion: reduce) { .jc__hint { display: none; } }

/* "Drei Wege" pillars (lieferung.html below the cinema) */
.pillars { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.pillar {
  display: grid; grid-template-columns: minmax(0, 380fr) minmax(0, 920fr);
  gap: clamp(18px, 3vw, 48px); padding: clamp(26px, 3.6vw, 44px) 0;
  border-bottom: 1px solid var(--hairline);
}
.pillar__head { display: grid; gap: 8px; align-content: start; }
.pillar__num {
  font-family: var(--f-display); font-size: 0.9375rem; letter-spacing: -0.03em;
  color: var(--gold); text-transform: uppercase; line-height: 1.4;
}
/* 26.10 (Flo): Text beginnt auf Hoehe der Ueberschrift, nicht der goldenen Zeile darueber
   (= Zeilenhoehe .pillar__num + gap von .pillar__head). Gestapelt unter 800px: ohne Versatz. */
@media (min-width: 801px) {
  .pillar__body { padding-top: calc(0.9375rem * 1.4 + 8px); }
}
.pillar__head h2, .pillar__head h3 {
  font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: -0.03em; font-size: clamp(1.125rem, 1.66vw, 1.5rem); line-height: 1.4;
}
.pillar__body p { color: var(--bone); max-width: 62ch; }
.pillar__body p + p { margin-top: 12px; }
.pillar__list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pillar__list li {
  border: 1px solid var(--hairline); padding: 7px 14px; font-size: 0.9375rem; color: var(--muted);
}
@media (max-width: 800px) {
  .pillar { grid-template-columns: minmax(0, 1fr); }
}

/* CTA band shared by subpages */
.cta-band { padding-block: clamp(56px, 7vw, 96px); text-align: center; }
.cta-band__inner { display: grid; gap: 18px; justify-items: center; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 10px; }

/* anchor targets land below the fixed bar */
[id] { scroll-margin-top: 96px; }

/* ==========================================================================
   Impressionen (impressionen.html) — gallery grid + lightbox
   Source photography is ISI's own. The slider-era strips are ~1000x625 after
   the padding crop (see _build/build_gallery.py), so tiles are sized to stay
   at or above 1x at every breakpoint — no tile is ever upscaled past its
   source. That is why the grid tops out at three columns, not four.
   ========================================================================== */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 24px); }
.galerie--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.g-cell { margin: 0; display: grid; gap: 10px; }
.g-cell figcaption { font-size: 0.875rem; color: var(--muted); line-height: 1.6; }

.g-item {
  display: block; position: relative; overflow: hidden; width: 100%;
  padding: 0; background: var(--graphite); border: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-soft);
}
.galerie .g-item        { aspect-ratio: 964 / 625; }
.galerie--wide .g-item  { aspect-ratio: 1100 / 400; }
.g-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.g-item:hover { border-color: var(--gold-deep); }
.g-item:hover img { transform: scale(1.045); }

/* Bildplatz, der noch auf ein Foto von ISI wartet. Bewusst als solcher
   erkennbar und nicht als kaputtes Bild: gestrichelte Linie, ruhiger Grund,
   eine Zeile die sagt, WELCHES Foto hier hingehoert. Verschwindet, sobald das
   Foto da ist -- dann wird daraus ein normales .g-item. */
.g-item--slot {
  display: grid; place-items: center; text-align: center; padding: 18px;
  border: 1px dashed var(--gold-deep); background: var(--graphite);
}
.g-item--slot span { color: var(--gold); font-size: 0.875rem; line-height: 1.6; max-width: 26ch; }
.g-item--slot:hover { border-color: var(--gold); }

/* ==========================================================================
   Ueber uns -- textgefuehrt, nach vdmcars.de/ueber-uns/
   --------------------------------------------------------------------------
   Elvis hat VDM selbst als Referenz genannt. Deren Ueber-uns-Seite ist
   TEXTGEFUEHRT: kleine Zeile, grosse Ueberschrift, zwei Absaetze, fertig.
   Bilder liefern sie mit width=100 bzw. width=150 aus, also 100px-Quadrate
   und 150px-Vorschauen. NIE ueber die Seitenbreite.

   🚨 Zwei Fassungen davor sind daran gescheitert, dass ich Bilder gross
   gemacht habe. Auf dieser Seite gibt es deshalb KEIN Bild, das breiter ist
   als 120px, ausser es wird bewusst neu entschieden. Groesse ist hier kein
   Gestaltungsmittel.
   ========================================================================== */
.ub-sec { padding-bottom: clamp(44px, 5.4vw, 76px); }
.ub-text { display: grid; gap: 14px; max-width: 68ch; }
.ub-text p { color: var(--bone); }
.ub-text .eyebrow + h2 { margin-bottom: 4px; }
.ub-link { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Der Auftakt-Abschnitt, gebaut nach dem "Wir sind VDM Cars"-Block auf
   vdmcars.de/ueber-uns/. Dort steht der Text SCHMAL LINKS und rechts liegt
   ein Cluster aus DREI Fotos: verschieden gross, versetzt, sich ueberlappend,
   das groesste laeuft rechts aus dem Bild.

   🚨 Der Unterschied zu meinen beiden Fehlversuchen: nicht Vollbreit-Baender
   (Bild ueber die ganze Seite) und auch nicht gar keine Bilder. Die Bilder
   sind gross, aber sie besetzen nur EINE Seite, waehrend der Text die andere
   haelt. Genau das traegt die Referenz.
   -------------------------------------------------------------------------- */
.ub-hero {
  display: grid; grid-template-columns: minmax(0, 430fr) minmax(0, 640fr);
  gap: clamp(32px, 5vw, 88px); align-items: center;
}
.ub-hero__text { display: grid; gap: 18px; max-width: 44ch; }
.ub-hero__body { display: grid; gap: 16px; position: relative; padding-left: 62px; }
.ub-hero__body p { color: var(--bone); }
/* der kurze Strich vor dem ersten Absatz, wie bei VDM */
.ub-hero__body::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 42px; height: 1px; background: var(--gold);
}

.ub-cluster {
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, 1fr);
  margin-right: calc(var(--gut) * -1);
}
.ub-cluster figure { margin: 0; overflow: hidden; background: var(--graphite); }
.ub-cluster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --------------------------------------------------------------------------
   ZWEI VERSCHIEDENE Kompositionen, bewusst nicht dieselbe zweimal gespiegelt
   und bewusst nicht die Anordnung der Referenz. Die Referenz zeigt, WIE ein
   Bildcluster neben Text funktioniert; die Anordnung selbst ist unsere.

   A "Turm"    -- ein hohes dominantes Bild, zwei kleinere ueberlappen es
                  von rechts. Vertikal betont, ruhig.
   B "Kaskade" -- drei Bilder fallen diagonal nach unten rechts, jedes
                  ueberlappt das vorige an der Ecke. Bewegt, erzaehlend.
   -------------------------------------------------------------------------- */
/* Der Auftakt-Cluster. Diese Anordnung hat Flo freigegeben ("das sieht gut
   aus"), danach hatte ich sie gegen einen hochkanten "Turm" getauscht und auf
   seine Ansage wieder zurueckgeholt. 🚨 Nicht erneut umbauen ohne Ansage. */
.ub-cluster--auftakt { aspect-ratio: 890 / 800; max-height: 620px; }
.ub-cluster--auftakt .ub-cluster__a { grid-column: 5 / 13; grid-row: 1 / 5;  z-index: 1; }
.ub-cluster--auftakt .ub-cluster__b { grid-column: 1 / 7;  grid-row: 2 / 8;  z-index: 3; }
.ub-cluster--auftakt .ub-cluster__c { grid-column: 3 / 13; grid-row: 7 / 13; z-index: 2; }

.ub-cluster--kaskade { aspect-ratio: 1000 / 760; max-height: 560px; }
.ub-cluster--kaskade .ub-cluster__a { grid-column: 1 / 8;  grid-row: 1 / 6;  z-index: 1; }
.ub-cluster--kaskade .ub-cluster__b { grid-column: 4 / 11; grid-row: 4 / 9;  z-index: 2; }
.ub-cluster--kaskade .ub-cluster__c { grid-column: 6 / 13; grid-row: 8 / 13; z-index: 3; }

/* Gespiegelt: Cluster links, Text rechts. */
.ub-hero--flip { grid-template-columns: minmax(0, 640fr) minmax(0, 430fr); }
.ub-hero--flip .ub-cluster { margin-right: 0; margin-left: calc(var(--gut) * -1); }

@media (max-width: 900px) {
  .ub-hero--flip { grid-template-columns: minmax(0, 1fr); }
  .ub-hero--flip .ub-cluster { margin-left: 0; }
  /* Termin 26.10.: the clusters keep their desktop proportions here. The old
     16/11 + max-height 340 squashed every tile to ~2.9:1 on a phone and cut the
     cars (rule "kein Bild darf abgeschnitten wirken"). The images are cut to
     exactly these tile shapes. */
  .ub-cluster--auftakt { aspect-ratio: 890 / 800; max-height: none; }
  .ub-cluster--kaskade { aspect-ratio: 1000 / 760; max-height: none; }
}

@media (max-width: 900px) {
  .ub-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .ub-hero__text { max-width: none; }
  .ub-cluster { width: 100%; max-width: 620px; margin-right: 0; }
}
@media (max-width: 560px) {
  .ub-hero__body { padding-left: 0; }
  .ub-hero__body::before { display: none; }
}

/* Team, wie VDMs Verkaufsteam: kleines Portraet, Rolle, Name, Kontakt. */
.team {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--hairline); padding-top: clamp(24px, 3vw, 40px);
}
.team__card { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: clamp(16px, 1.8vw, 24px); align-items: start; }
.team__photo { width: 120px; height: 120px; overflow: hidden; background: var(--graphite); }
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__photo--slot {
  display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--gold-deep);
}
.team__photo--slot span { color: var(--gold); font-size: 0.8125rem; }
.team__body { display: grid; gap: 8px; }
.team__role { font-family: var(--f-display); font-size: 0.875rem; letter-spacing: -0.02em;
              color: var(--gold); text-transform: uppercase; }
.team__name { font-family: var(--f-display); font-weight: 400; text-transform: uppercase;
              letter-spacing: -0.03em; font-size: clamp(1.125rem, 1.66vw, 1.5rem); line-height: 1.4; }
.team__meta { color: var(--bone); max-width: 56ch; }
.team__contact { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }

@media (max-width: 560px) {
  .team__card { grid-template-columns: minmax(0, 1fr); }
}

.g-item__zoom {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center; width: 38px; height: 38px;
  background: rgba(11, 11, 12, .74); color: var(--bone);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.g-item__zoom svg { width: 18px; height: 18px; }
.g-item:hover .g-item__zoom, .g-item:focus-visible .g-item__zoom { opacity: 1; transform: none; }

.g-feature { margin: 0; display: grid; gap: 12px; }
.g-feature figcaption { font-size: 0.9375rem; color: var(--muted); }
.g-item--feature { aspect-ratio: 3 / 2; }
@media (min-width: 900px) { .g-item--feature { aspect-ratio: 21 / 9; } }

/* ---------- lightbox ---------- */
.lightbox {
  /* above .bar (100) and .drawer (99), below .skip-link (200). At 90 the
     sticky header painted over the overlay and ate backdrop clicks in the
     top strip. */
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(48px, 7vw, 88px) clamp(16px, 5vw, 76px);
  background: rgba(6, 6, 7, .94);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; display: grid; gap: 16px; justify-items: center; max-width: 100%; }
.lightbox__figure img {
  max-width: 100%; max-height: 74svh; width: auto; height: auto;
  object-fit: contain; background: var(--graphite);
}
.lightbox__figure figcaption { font-size: 0.9375rem; color: var(--bone); text-align: center; max-width: 56ch; }
.lightbox__close { position: absolute; top: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: clamp(8px, 1.6vw, 22px); }
.lightbox__nav--next { right: clamp(8px, 1.6vw, 22px); }
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .lightbox { animation: lb-in var(--dur-base) var(--ease-out) both; }
  @keyframes lb-in { from { opacity: 0 } to { opacity: 1 } }
}

@media (max-width: 1000px) {
  .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .galerie--wide { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .galerie, .galerie--wide { grid-template-columns: minmax(0, 1fr); }
  .lightbox__nav--prev { left: 4px; }
  .lightbox__nav--next { right: 4px; }
  .lightbox__figure img { max-height: 64svh; }
}

/* Fahrzeug: Ausstattung + Beschreibung (25.09) */
.pdp__feat { padding-bottom: clamp(40px, 5vw, 64px); }
.pdp__feat-body { margin-top: 18px; }
.pdp__feat-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 32px;
  border-top: 1px solid var(--hairline);
}
.pdp__feat-list li {
  position: relative; padding: 11px 0 11px 18px;
  border-bottom: 1px solid var(--hairline);
  color: var(--bone); font-size: 0.9375rem; line-height: 1.45;
}
.pdp__feat-list li::before {
  content: ""; position: absolute; left: 0; top: calc(11px + 0.725em - 3px);
  width: 6px; height: 6px; background: var(--gold-deep); transform: rotate(45deg);
}
.pdp__more { margin-top: 0; }
.pdp__more > .pdp__feat-list { border-top: 0; }
.pdp__more summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 10px 0; color: var(--gold); font-size: 0.9375rem;
}
.pdp__more summary::-webkit-details-marker { display: none; }
.pdp__more summary::after {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.pdp__more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pdp__more summary:hover { color: var(--bone); }
.pdp__more-close { display: none; }
.pdp__more[open] .pdp__more-open { display: none; }
.pdp__more[open] .pdp__more-close { display: inline; }
.pdp__desc-body p, .pdp__desc-list li { overflow-wrap: anywhere; }
/* Seller text without spaces ("ULTIMATE,INDIVIDUAL,KERAMIK,PANO") pushed the
   aside 13px past a 390px screen. Let it break instead. */
.pdp__aside { min-width: 0; }
.pdp__aside p, .pdp__specs dd { overflow-wrap: anywhere; }
.pdp__desc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pdp__desc-list li { padding-left: 16px; position: relative; line-height: 1.6; }
.pdp__desc-list li::before {
  content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 1px; background: var(--gold-deep);
}
.pdp__desc-list li.pdp__desc-sub, p.pdp__desc-sub { color: var(--gold); padding-left: 0; margin-top: 8px; }
.pdp__desc-list li.pdp__desc-sub::before { display: none; }
.pdp__desc-rest { display: grid; gap: 14px; margin-top: 6px; }
.pdp__desc .pdp__more summary { margin-top: 4px; }
@media (max-width: 900px) {
  .pdp__feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 560px) {
  .pdp__feat-list { column-gap: 14px; }
  .pdp__feat-list li { font-size: 0.875rem; padding-left: 14px; }
  /* Michroma is wide: "Fahrzeugbeschreibung" must fit one 350px line */
  .pdp__feat h2, .pdp__desc h2 { font-size: 1.125rem; hyphens: manual; }
}

/* Impressionen: Videos mit Klick-zum-Laden (25.09) */
.vids { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 24px); }
.vid { margin: 0; display: grid; gap: 12px; }
.vid__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--hairline); background: var(--graphite); }
.vid__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid__play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.vid__play img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.vid__play:hover img { transform: scale(1.03); }
.vid__icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%; background: rgba(11, 11, 12, 0.72); border: 1px solid var(--gold); color: var(--gold); transition: background var(--dur-fast) var(--ease-out); }
.vid__icon svg { width: 26px; height: 26px; margin-left: 3px; }
.vid__play:hover .vid__icon, .vid__play:focus-visible .vid__icon { background: rgba(11, 11, 12, 0.9); }
.vid__cap { font-size: 0.9375rem; color: var(--bone); }
.vids__note { margin-top: 18px; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 900px) { .vids { grid-template-columns: minmax(0, 1fr); } }

/* Hero-Zeile nach dem Termin 25.09 („Luxusfahrzeuge aus Bayern", Platzhalter): das lange Wort
   darf nie getrennt werden („LUXUSFAHRZEU-GE" sah kaputt aus). Desktop: Spalte breiter,
   Telefon: Schrift an die Breite gekoppelt, damit das Wort in 358px passt. */
.hero .t-hero { hyphens: manual; overflow-wrap: normal; }
.hero__copy { max-width: 760px; }
@media (max-width: 600px) {
  .hero .t-hero { font-size: min(1.75rem, 6.4vw); }
}

/* 25.09: Lieferungs-Teaser hat zwei Absaetze. Ohne Wrapper wurde der zweite eine eigene
   schmale Flex-Spalte neben dem ersten (Flo: "looks weird"). Beide laufen jetzt untereinander. */
.lieferung__text { display: grid; gap: 14px; min-width: 0; }
.lieferung__ways { display: grid; gap: 2px; }
.lieferung__ways strong { color: #fff; font-weight: 600; }

/* Impressionen als Masonry (Flo 25.09: "wie die alte Seite, Bilder eng zusammen, verschiedene
   Winkel und Groessen"). Jedes Bild behaelt sein eigenes Seitenverhaeltnis (Quer, Breit, Hochkant),
   6px Fuge. Spalten fuellen von oben nach unten, die Reihenfolge im HTML mischt die Formate. */
.imp-block { padding-block: clamp(40px, 5vw, 72px); }
.imp-sec__head { display: grid; gap: 9px; margin-bottom: clamp(18px, 2.2vw, 28px); }
.galerie--masonry { display: block; columns: 4; column-gap: 6px; }
.galerie--masonry .g-cell { display: block; break-inside: avoid; margin: 0 0 6px; }
.galerie--masonry .g-item { aspect-ratio: auto; border: 0; }
.galerie--masonry .g-item img { height: auto; display: block; }
@media (max-width: 1100px) { .galerie--masonry { columns: 3; } }
@media (max-width: 700px)  { .galerie--masonry { columns: 2; column-gap: 4px; } .galerie--masonry .g-cell { margin-bottom: 4px; } }

/* Modelshooting: alle 9 Fotos haben dasselbe Format, als Masonry saehe das wie ein starres Raster
   aus. Deshalb ein Mosaik mit wechselnden Breiten je Reihe: 3+3 | 2+2+2 | 4+2 | 3+3 (von 6). */
.galerie--mosaic { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 19vw, 290px); gap: 6px; }
.galerie--mosaic .g-cell { display: block; margin: 0; grid-column: span 2; }
.galerie--mosaic .g-cell:nth-child(1), .galerie--mosaic .g-cell:nth-child(2),
.galerie--mosaic .g-cell:nth-child(8), .galerie--mosaic .g-cell:nth-child(9) { grid-column: span 3; }
.galerie--mosaic .g-cell:nth-child(6) { grid-column: span 4; }
.galerie--mosaic .g-item { aspect-ratio: auto; height: 100%; border: 0; }
@media (max-width: 700px) {
  .galerie--mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 38vw; gap: 4px; }
  .galerie--mosaic .g-cell, .galerie--mosaic .g-cell:nth-child(n) { grid-column: span 1; }
  .galerie--mosaic .g-cell:nth-child(3n+1) { grid-column: span 2; grid-row: span 1; }
}

/* Termin 26.10. (Flo: "make sure no pic is ever cut off"): on a phone the hero
   photo no longer sits behind the copy as a 44 %-wide portrait crop that cut
   every car. It runs as a full 3:2 band under the bar (the -sm files ARE 3:2,
   so nothing is cropped) and the copy follows below on onyx. Revert = delete
   this block. */
@media (max-width: 700px) {
  .hero { height: auto; padding-top: 73px; }
  .hero__slides { position: relative; inset: auto; aspect-ratio: 3 / 2; }
  .hero__scrim {
    top: 73px; bottom: auto; height: calc(100vw * 2 / 3);
    background: linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(11,11,12,.85) 100%);
  }
  .hero__inner { height: auto; padding-top: 22px; }
  .hero__dots { top: calc(73px + 100vw * 2 / 3 - 22px); right: 12px; transform: none; grid-auto-flow: column; }
}

/* Termin 26.10. (Elvis: "die Models sind abgeschnitten, da sieht man nur Beine"):
   the model shooting no longer sits in the 6-column mosaic, whose fixed row height
   cut every photo to a strip. All nine share one shape (1600x1360), so a plain grid
   in exactly that shape shows each photo whole, like on the old site. */
.galerie--models { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.galerie--models .g-cell { margin: 0; }
.galerie--models .g-item { aspect-ratio: 1600 / 1360; border: 0; }
@media (max-width: 700px) { .galerie--models { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; } }
/* The hall feature keeps its own shape on every screen (it was 21:9 / 3:2 and cut the cars). */
.g-item--feature.g-item--natural { aspect-ratio: 2560 / 1186; }

/* Termin 26.10.: on a phone the showroom slider kept a 420px minimum height and
   showed only the middle half of each 2000x1075 photo. It now keeps the photos'
   own shape, so the hall is seen whole. */
@media (max-width: 700px) {
  .erlebnis { height: calc(100vw * 1075 / 2000); }
  .erlebnis__title { font-size: 1.5rem; }
  .erlebnis__arrow { display: none; } /* the band is too low for arrows + title; the dots switch */
  .erlebnis__inner { padding-inline: var(--gut); }
}

/* ==========================================================================
   Runde 2 (Flo 27.10.): Autohaus ISI auf einer Linie, Finanzierung im Wechsel
   Bild/Karte (Hashirs Split-Karte), Veredelung ohne Beschnitt und zentriert,
   Elvis gross auf Über uns, Event-Aufmacher auf Impressionen.
   ========================================================================== */
.t-line { white-space: nowrap; }
@media (max-width: 420px) { .t-line { white-space: normal; } }
.ub-hero--top { align-items: start; }
.ub-hero__body .lead-w { color: #fff; font-weight: 600; font-size: 1.125rem; }

.ver-trio { display: flex; gap: clamp(10px, 1.4vw, 20px); align-items: flex-start; }
.ver-trio figure { margin: 0; min-width: 0; }
.ver-trio img { width: 100%; height: auto; display: block; }
@media (max-width: 700px) { .ver-trio { flex-direction: column; } .ver-trio figure { flex: none !important; width: 100%; } }

.pillars--center .pillar { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.pillars--center .pillar__head { justify-items: center; }
.pillars--center .pillar__body { padding-top: 0; }
.pillars--center .pillar__body p { margin-inline: auto; }

.fin-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.fin-head__img { margin: 0; }
.fin-head__img img { width: 100%; height: auto; display: block; }
.fin-rows { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.fin-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--graphite); align-items: stretch; }
.fin-row--flip .fin-row__img { order: 2; }
.fin-row__img { margin: 0; }
.fin-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fin-row__card { display: grid; gap: 14px; align-content: center; padding: clamp(26px, 4vw, 64px); }
.fin-row__card .eyebrow { color: var(--gold); }
.fin-row__h { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.03em;
              font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.3; }
.fin-row__card p:last-child { color: var(--bone); max-width: 52ch; }
@media (max-width: 800px) {
  .fin-head, .fin-row { grid-template-columns: minmax(0, 1fr); }
  .fin-row--flip .fin-row__img { order: 0; }
  .fin-row__img img { height: auto; }
}

.team:has(.team__card--big) { grid-template-columns: minmax(0, 1fr); }
.team__card--big { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.team__photo--big { width: 100%; height: auto; margin: 0; aspect-ratio: 4 / 5; }
@media (max-width: 700px) { .team__card--big { grid-template-columns: minmax(0, 1fr); } }

.imp-lead { margin-bottom: 6px; }
.galerie--masonry.galerie--c3 { columns: 3; }
@media (max-width: 700px) { .galerie--masonry.galerie--c3 { columns: 2; } }

/* Runde 3 (Flo 27.10.): Veredelung wieder Kopf neben Text, vertikal mittig, zweiter Block gespiegelt */
.pillars--mid .pillar { align-items: center; }
.pillars--mid .pillar__body { padding-top: 0; }
@media (min-width: 801px) {
  .pillar--flip { grid-template-columns: minmax(0, 880fr) minmax(0, 420fr); }
  .pillar--flip .pillar__head { order: 2; text-align: right; justify-items: end; }
}

/* Hero-Video (Flo 27.10.): liegt über den Foto-Slides; Slides bleiben Rückfall bei reduzierter Bewegung */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; background: #000; }
@media (prefers-reduced-motion: no-preference) { .hero.has-video .hero__dots { display: none; } }
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }
.hero.has-video .hero__slides { z-index: 0; }


/* === Mobil-Variante B (28.10., Elvis): Wischreihe, nächstes Bild schaut rein === */
@media (max-width: 900px) {
  .ub-cluster {
    display: flex; gap: 10px; aspect-ratio: auto; max-height: none;
    width: auto; max-width: none; margin-right: calc(var(--gut) * -1);
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .ub-hero--flip .ub-cluster { margin-left: 0; margin-right: calc(var(--gut) * -1); }
  .ub-cluster::-webkit-scrollbar { display: none; }
  .ub-cluster figure { flex: 0 0 86%; aspect-ratio: 3 / 2; scroll-snap-align: start; }
  .ub-dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
  .ub-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--bone); opacity: .3; transition: opacity .2s; }
  .ub-dots span.is-on { opacity: 1; background: var(--gold); }
}
@media (min-width: 901px) { .ub-dots { display: none; } }
/* Elvis 28.10.: mehr Showroom-Bilder in der Wischreihe. Zusatzbilder (__x) nur am Handy,
   die Desktop-Collage bleibt bei ihren drei Bildern. */
.ub-cluster__x { display: none; }
@media (max-width: 900px) { .ub-cluster__x { display: block; } }

/* Flo 28.10.: am Handy kommt der gespiegelte Cluster UNTER den Text, sonst stehen
   zwei Wischreihen direkt hintereinander (Über uns: Wir sind → Aus einer Leidenschaft). */
@media (max-width: 900px) {
  .ub-hero--flip .ub-cluster { order: 2; }
  .ub-hero--flip .ub-dots { order: 3; }
}

/* Flo 28.10. (Handy): Instagram + Facebook sitzen oben rechts im Hero-Video statt lose unter
   dem Text (dort am Rand angeschnitten), und der Abstand Text → Markenleiste ist weg. */
@media (max-width: 700px) {
  .hero__social {
    position: absolute; top: calc(73px + 14px); right: var(--gut); bottom: auto;
    display: flex; gap: 18px; margin: 0; z-index: 3;
  }
  .hero__social svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); }
  .hero__inner { padding-bottom: 0; }
  .marken { padding-top: 22px; }
}

/* Flo 28.10. (Handy): die Lieferungs-Reise läuft am Handy wie am Desktop als Scroll-Film,
   aber als ganzes 16:9-Band unter der Leiste (nichts abgeschnitten), Text darunter auf Onyx. */
@media (max-width: 899px) {
  .jc__media { height: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  html.js .jc.is-cinema .jc__media {
    inset: auto; top: calc(73px + 3svh); left: 0; right: 0; height: auto; aspect-ratio: 16 / 9;
  }
  html.js .jc.is-cinema .jc__scrim {
    inset: auto; top: calc(73px + 3svh); left: 0; right: 0; height: calc(100vw * 9 / 16);
    background: linear-gradient(180deg, rgba(11,11,12,0) 70%, rgba(11,11,12,.85) 100%);
  }
  html.js .jc.is-cinema .jc__beat,
  html.js .jc.is-cinema .jc__beat[data-pos] { align-items: start; }
  html.js .jc.is-cinema .jc__beat .jc__cap,
  html.js .jc.is-cinema .jc__beat[data-pos] .jc__cap {
    padding-top: calc(73px + 3svh + 100vw * 9 / 16 + 28px); padding-bottom: 0; text-align: left;
  }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"] .jc__cap > * { margin-inline: 0; }
  html.js .jc.is-cinema .jc__beat[data-pos="top-mid"] .jstep { justify-content: flex-start; }
  .jc__cap p { font-size: 1rem; line-height: 1.7; }
}

/* ==========================================================================
   NO-CROP (Flo 04.11.2026, Elvis: never cut a picture). Every content image
   shows in full, natural ratio. Overlap collages become plain grids.
   ========================================================================== */
.vertrauen__main img, .vertrauen__right img, .card__media img,
.pdp__media img, .pdp__thumb img, .team__photo img, .fin-row__img img,
.g-item img, .vid__play img, [class*="svc"] img {
  object-fit: contain !important; aspect-ratio: auto !important; height: auto !important;
}
.g-item, .card__media, .team__photo, .fin-row__img { aspect-ratio: auto !important; height: auto !important; }
.g-item img { transform: none !important; }
.collage, .ub-cluster {
  display: block !important; columns: 2; column-gap: 12px;
  aspect-ratio: auto !important; height: auto !important; margin-right: 0 !important;
  grid-template-rows: none !important; grid-template-columns: none !important;
}
.collage figure, .ub-cluster figure {
  position: static !important; inset: auto !important; transform: none !important;
  grid-column: auto !important; grid-row: auto !important;
  width: auto !important; height: auto !important; aspect-ratio: auto !important;
  overflow: visible !important; break-inside: avoid; margin: 0 0 12px !important; display: block !important;
}
.collage img, .ub-cluster img { width: 100% !important; height: auto !important; object-fit: contain !important; }
@media (max-width: 900px) {
  .ub-cluster, .collage { display: block !important; overflow: visible !important; columns: 1; }
  .ub-cluster .ub-cluster__x { display: block !important; }
}
.erlebnis__slide img { object-fit: contain !important; background: #000; }
.ub-cluster, .collage { margin-left: 0 !important; column-fill: balance; max-height: none !important; }
@media (min-width: 901px) { .ub-cluster .ub-cluster__x { display: none !important; } }

/* Veredelung: 6 Bilder als Wischreihe (Flo 04.11.), gleiche Höhe, jedes Bild ganz, nichts beschnitten */
.ver-trio.ver-strip {
  display: flex; flex-direction: row !important; gap: clamp(10px, 1.4vw, 20px);
  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 12px; scrollbar-width: thin;
}
.ver-trio.ver-strip figure { flex: none !important; width: auto !important; scroll-snap-align: start; }
.ver-trio.ver-strip img { height: clamp(260px, 34vw, 480px); width: auto; max-width: none; object-fit: contain; }
.ver-strip__nav { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* Willkommen (Flo 04.11.): oben quer über die volle Breite, darunter Hochformat links,
   zwei Querformate rechts gestapelt. Spaltenbreiten so gerechnet, dass beide Seiten
   gleich hoch enden (Hochformat 2:3, Querformate 3:2). Nichts beschnitten, keine Lücke. */
@media (min-width: 901px) {
  .ub-cluster.ub-cluster--willkommen {
    display: grid !important; columns: auto !important;
    grid-template-columns: 0.909fr 1fr !important; grid-template-rows: auto !important;
    gap: 12px !important; align-items: start;
  }
  .ub-cluster--willkommen figure { margin: 0 !important; }
  .ub-cluster--willkommen .ub-cluster__a { grid-column: 1 / -1 !important; grid-row: 1 !important; }
  .ub-cluster--willkommen .ub-cluster__b { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  .ub-cluster--willkommen .ub-cluster__c { grid-column: 2 !important; grid-row: 1 !important; }
  .ub-cluster--willkommen .ub-cluster__d { grid-column: 2 !important; grid-row: 2 !important; }
}