/* ==========================================================================
   Autohaus Krüger — Renault & Dacia Lübbenau
   Design System / Global Styles
   ========================================================================== */

/* ---- Lokale Fonts (Inter + Oswald, variable, self-hosted) ---------------- */
/* DSGVO-freundlich: kein externer Google-Fonts-Abruf mehr.
   Variable Fonts → eine Datei pro Subset deckt alle Gewichte ab. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/oswald-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/oswald-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Design Tokens ------------------------------------------------------- */
:root {
  /* Colour */
  --ink: #141414;
  --ink-soft: #55554f;
  --bg: #ffffff;
  --bg-soft: #f6f6f4;
  --bg-dark: #0e0e0d;
  --line: #e4e4e0;

  --renault: #ffd800;      /* Renault-Gelb */
  --renault-ink: #0a0a0a;  /* Text auf Gelb */
  --dacia: #4a5a3c;        /* Dacia Khaki-Grün */
  --dacia-soft: #6b7658;

  /* Form — Renault nutzt scharfe, eckige Kanten */
  --radius: 0px;
  --radius-sm: 2px;
  --maxw: 1280px;

  /* Type — Renault-Anmutung: kondensiert-geometrisch, Uppercase-Displays.
     Renaults Marken-Schrift ist proprietär → Oswald als nächste freie Entsprechung. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;

  /* Motion (Emil Kowalski — starke, eigene Kurven) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Spacing rhythm */
  --section-y: clamp(4.5rem, 9vw, 8.5rem);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.04), 0 2px 8px rgba(20, 20, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(20, 20, 20, 0.06), 0 16px 40px rgba(20, 20, 20, 0.08);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px; /* Fixed-Header-Höhe */
  -webkit-text-size-adjust: 100%;
}

html, body {
  /* Kein horizontales Wischen – Seite exakt auf Viewport-Breite halten */
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--ink);
}

p { margin: 0; }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }

.eyebrow {
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 2px;
  background: var(--renault);
  display: inline-block;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.section-head p {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 1.08rem;
  max-width: 40rem;
}

/* ---- Buttons (Renault-Stil: eckig, Uppercase, gesperrt) ------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1.5px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 200ms ease,
              border-color 200ms ease, color 200ms ease;
  will-change: transform;
}
.btn:active { transform: scale(0.98); }

/* Weiß gefüllt (Renault-Primär-CTA) */
.btn--primary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.btn--primary:hover { background: #f0f0f0; border-color: #f0f0f0; }

/* Gelb-Akzent (für helle Sektionen, Marken-Highlight) */
.btn--accent {
  background: var(--renault);
  color: var(--renault-ink);
  border-color: var(--renault);
}
.btn--accent:hover { background: #ffdf33; }

.btn--dark {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--dark:hover { background: #000; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--outline:hover { background: var(--ink); color: #fff; }

/* Transparenter Outline-Button auf dunklem Bild (Hero) */
.btn--ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.7);
}
.btn--ghost-light:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--sm { padding: 0.65rem 1.2rem; font-size: 0.82rem; }
.btn--block { width: 100%; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #ffffff;
  border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 250ms ease,
              box-shadow 250ms ease, color 300ms ease;
  color: var(--ink);
}
.site-header[data-scrolled="true"] {
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}
/* Transparent über dem Hero (Renault-Look) */
.site-header[data-transparent="true"] {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  color: #fff;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  gap: 1.5rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 1.1rem;
  color: inherit;
}
/* Echtes Renault-Logo als Logo-Mark */
.brand__mark {
  width: 34px;
  height: 46px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  /* Logo ist schwarz; über dem Hero (transparente Nav) weiß darstellen */
  filter: invert(1);
  transition: filter 300ms ease;
}
/* Solide (gescrollte) Nav → Logo wieder schwarz */
.site-header:not([data-transparent="true"]) .brand__logo { filter: none; }
/* Footer ist dunkel → Logo weiß */
.footer__brand .brand__logo { filter: invert(1); }
.brand__sub {
  display: block;
  font-family: var(--font);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
  line-height: 1;
  margin-top: 3px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: inherit;
  opacity: 0.92;
  transition: opacity 180ms ease;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.15rem;
  height: 2px;
  background: var(--renault);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms var(--ease-out);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 1rem; }

/* Schließen-Kreuz nur im mobilen Fullscreen-Menü (siehe Media Query) */
.nav__close-item { display: none; }

/* Moderner Burger: randlos, kräftige Striche, große Touch-Fläche */
.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  margin-right: -8px;      /* optische Kante zum Rand ausgleichen */
  border: 0;
  background: transparent;
  color: inherit;
  position: relative;
  place-items: center;
  border-radius: var(--radius-sm);
  -webkit-tap-highlight-color: transparent;
}
.nav__toggle-box {
  position: relative;
  display: block;
  width: 26px;
  height: 16px;
}
.nav__toggle-box span,
.nav__toggle-box span::before,
.nav__toggle-box span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 260ms var(--ease-out), opacity 160ms ease, width 260ms var(--ease-out);
}
.nav__toggle-box span { top: 50%; margin-top: -1.25px; }
.nav__toggle-box span::before { top: -7px; }
.nav__toggle-box span::after { top: 7px; width: 70%; }   /* dezent kürzerer Strich = moderner */
.nav__toggle:hover .nav__toggle-box span::after { width: 100%; }
.nav__toggle[aria-expanded="true"] .nav__toggle-box span { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-box span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-box span::after { top: 0; width: 100%; transform: rotate(-45deg); }

/* Kompakter Anrufen-Button in der Nav (Text passt sauber) */
.nav__call { padding: 0.55rem 1.05rem; font-size: 0.8rem; letter-spacing: 0.04em; }

/* Untere Nav-Zeile (nur mobil sichtbar) */
.nav__strip { display: none; }
.nav__links-cta { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* Gestapelte Kategorie-Slides. Aufbau pro Slide:
   .hero__img (Wrapper)  → trägt NUR opacity (Crossfade)
   .hero__inner-img (img) → trägt NUR transform (Ken-Burns-Pan / Zoom)
   Strikte Trennung, damit sich Crossfade und Pan nie auf demselben Element
   überlagern (Compositor-Bug auf Edge/Safari). */
.hero__img {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.hero__img.is-active {
  opacity: 1;
  z-index: 1;              /* aktives Bild garantiert oben, unabhängig von DOM-Reihenfolge */
}
/* Inneres Bild füllt den Wrapper; Grund-Zoom */
.hero__inner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(10, 10, 10, 0.82) 0%, rgba(10, 10, 10, 0.28) 42%, rgba(10, 10, 10, 0.12) 100%),
    linear-gradient(to right, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.42) 28%, rgba(10, 10, 10, 0) 62%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding-bottom: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(6rem, 12vh, 9rem);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1.1rem;
}
.hero__eyebrow::before {
  content: "";
  width: 30px; height: 3px;
  background: var(--renault);
}
.hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  font-weight: 600;
  line-height: 1.12;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 16ch;
}
.hero h1 em {
  font-style: normal;
  color: var(--renault);
}
.hero__sub {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.92);
  max-width: 40ch;
}
.hero__cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Modell-Switcher-Leiste (Renault-Look) */
.hero__models {
  position: relative;
  z-index: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: clamp(2rem, 5vw, 3.5rem);
}
.hero__models-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.2rem, 4vw, 3rem);
  padding-top: 1.1rem;
  padding-bottom: 0.4rem;
}
/* Haus-Button → zurück zur Autohaus-Ansicht (dezent, nur Icon) */
.hero__home {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: color 200ms ease, transform 200ms var(--ease-out);
}
.hero__home svg { width: 22px; height: 22px; }
.hero__home:hover { color: #fff; transform: translateY(-1px); }
.hero__home[aria-current="true"] { color: #fff; }
.hero__model {
  position: relative;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.hero__model::after {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: 0;
  width: 0;
  height: 3px;
  background: #fff;
  transition: width 300ms var(--ease-out);
}
.hero__model:hover { color: #fff; }
.hero__model[aria-selected="true"] { color: #fff; }
.hero__model[aria-selected="true"]::after { width: 46px; }

/* ---- WLTP-Pflichtangaben unter dem Hero (Renault-Stil: kleiner grauer Text).
   Wandert per JS mit der gezeigten Kategorie mit.
   Feste Mindesthöhe (an der höchsten Kategorie ausgerichtet), damit das
   Feld bei jedem Slide gleich groß bleibt und die Seite darunter nicht springt. ---- */
.hero-emission {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(0.9rem, 2vw, 1.2rem);
  min-height: 165px;               /* Desktop: deckt die 5-zeilige Autohaus-Kategorie */
  display: flex;
  align-items: center;
}
.hero-emission .container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.hero-emission p {
  color: var(--ink-soft);
  font-size: 0.74rem;
  line-height: 1.5;
  max-width: 100%;
}

/* WLTP-Pflichtangaben unter den Hersteller-Kacheln */
.brand-emission {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.brand-emission p {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.74rem;
  line-height: 1.5;
}

/* ==========================================================================
   Autohaus
   ========================================================================== */
.autohaus__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.autohaus__title { max-width: 24ch; }

/* Team-Cards (Ansprechpartner, ohne Portrait) */
.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
/* In der Autohaus-Sektion rechts, untereinander gestapelt */
.autohaus__grid .team { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .autohaus__grid { grid-template-columns: 1fr; }
}
.team-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--renault);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  padding: 1.4rem 1.5rem;
  transition: border-color 240ms ease, transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.team-card__area {
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.team-card__name {
  font-size: 1.25rem;
  text-transform: uppercase;
  margin-top: 0.35rem;
}
.team-card__links {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.team-card__links a,
.team-card__links .mail-copy {
  font-size: 0.95rem;
  font-weight: 500;
  overflow-wrap: anywhere;
  transition: color 160ms ease;
}
.team-card__links a:hover { color: var(--dacia); }
/* E-Mail-Kopier-Button: sieht aus wie Link, verhält sich als Button */
.mail-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.mail-copy::after {
  content: "";
  width: 14px; height: 14px;
  flex-shrink: 0;
  background: currentColor;
  opacity: 0.45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11' height='11' rx='2'/%3E%3Cpath d='M5 15V5a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 160ms ease;
}
.mail-copy:hover { color: var(--dacia); }
.mail-copy:hover::after { opacity: 0.9; }
@media (hover: hover) and (pointer: fine) {
  .team-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--line);
  }
}
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }
.autohaus__title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin-bottom: 1.6rem;
  max-width: 18ch;
}
.autohaus__copy .lead {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.4rem;
  letter-spacing: -0.01em;
}
.autohaus__copy p + p { margin-top: 1rem; color: var(--ink-soft); }
.autohaus__stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem 2.8rem;
  margin-top: 2.4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.stat__label { font-size: 0.9rem; color: var(--ink-soft); }

/* Google-Bewertungen – rahmenlos, als Stat integriert */
.grating {
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 2.8rem;
  border-left: 1px solid var(--line);
  color: inherit;
}
/* Score-Zeile: große Zahl + Sterne nebeneinander */
.grating__score { display: inline-flex; align-items: center; gap: 0.7rem; }
.grating__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
/* Sterne über SVG-Maske (grauer Track + gelber Füll-Anteil) */
.grating__stars {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'%3E%3Cpath d='M10 0l2.47 6.18 6.65.37-5.13 4.24 1.72 6.43L10 13.9l-5.58 3.7 1.72-6.43L1.01 6.55l6.65-.37z'/%3E%3C/svg%3E");
  position: relative;
  display: inline-block;
  width: 108px;
  height: 19px;
  background: #dcdcd6;
  -webkit-mask: var(--star) repeat-x;
          mask: var(--star) repeat-x;
  -webkit-mask-size: 21.6px 19px;
          mask-size: 21.6px 19px;
}
.grating__stars-fill {
  position: absolute;
  inset: 0;
  width: 0;
  background: #fbbc05;
  transition: width 700ms var(--ease-out);
}
/* Meta-Zeile: kleines Google-G + Text, wie stat__label */
.grating__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: color 180ms ease;
}
.grating__g { width: 15px; height: 15px; display: inline-flex; flex-shrink: 0; }
.grating__g svg { width: 100%; height: 100%; }
.grating__count { line-height: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .grating:hover .grating__meta { color: var(--ink); }
}
@media (max-width: 560px) {
  .grating { padding-left: 0; border-left: 0; }
}

/* Person card */
.person-card {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
}
.person-card__photo { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.person-card__photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 18%;
  transition: transform 600ms var(--ease-out);
}
/* Aktiv per Hover (Desktop) oder .is-swiped (Touch, via JS) */
.person-card:hover,
.person-card.is-swiped {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px rgba(20, 20, 20, 0.16);
}
/* Bild: leichter Zoom */
.person-card:hover .person-card__photo img,
.person-card.is-swiped .person-card__photo img { transform: scale(1.06); }

.person-card__body {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 1.7rem 1.8rem;
}
/* Gelber Licht-Sweep, der beim Hover/Swipe über das Schriftfeld zieht */
.person-card__body::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 55%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 216, 0, 0.28), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left 750ms var(--ease-out);
  z-index: 0;
}
.person-card:hover .person-card__body::after,
.person-card.is-swiped .person-card__body::after { left: 130%; }
/* Inhalt über dem Sweep halten */
.person-card__body > * { position: relative; z-index: 1; }
.person-card__name { font-size: 1.4rem; }
.person-card__role { color: var(--ink-soft); font-size: 0.95rem; margin-top: 0.2rem; }
.person-card__contact { margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.person-card__contact a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 500;
  transition: color 160ms ease;
}
.person-card__contact a:hover { color: var(--dacia); }
.person-card__contact .k {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 62px;
  font-weight: 600;
}
.person-card__actions { margin-top: 1.4rem; }

/* Pillars */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.pillar {
  display: block;
  border-top: 3px solid var(--ink);
  padding: 1.5rem 0 0;
  background: transparent;
  color: inherit;
  transition: border-color 260ms ease;
}
.pillar__bar {
  width: 40px; height: 3px;
  background: var(--renault);
  margin: 0 0 1.3rem;
  transition: width 300ms var(--ease-out);
}
.pillar h3 { font-size: 1.35rem; text-transform: uppercase; }
.pillar p { color: var(--ink-soft); margin-top: 0.55rem; font-size: 0.98rem; }
/* Klick-Hinweis (Pfeil) unten in der Säule */
.pillar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.pillar__link::after {
  content: "→";
  transition: transform 220ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .pillar:hover { border-top-color: var(--renault); }
  .pillar:hover .pillar__bar { width: 72px; }
  .pillar:hover .pillar__link::after { transform: translateX(4px); }
}

/* ==========================================================================
   Verkauf
   ========================================================================== */
.verkauf { background: var(--bg-dark); color: #fff; }
.verkauf .section-head h2 { color: #fff; }
.verkauf .eyebrow { color: rgba(255, 255, 255, 0.7); }
.verkauf .eyebrow::before { background: var(--renault); }

/* Hersteller-Bildkacheln */
.brand-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
.brand-tile {
  position: relative;
  display: block;
  border-radius: var(--radius-sm);
  overflow: hidden;
  min-height: clamp(280px, 32vw, 380px);
  color: #fff;
  isolation: isolate;
}
.brand-tile__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 700ms var(--ease-out);
}
.brand-tile__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  /* Stärkerer Verlauf unten, damit der Text unten links klar lesbar ist */
  background: linear-gradient(to top,
    rgba(10,10,10,0.92) 0%,
    rgba(10,10,10,0.78) 24%,
    rgba(10,10,10,0.30) 55%,
    rgba(10,10,10,0.05) 100%);
}
.brand-tile__head { margin-top: auto; }
.brand-tile__label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--renault-ink);
  background: var(--renault);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-sm);
}
.brand-tile__label--dacia { background: var(--dacia); color: #fff; }
/* Obere Reihe: Badge links, Pfeil rechts */
.brand-tile__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.brand-tile__head h3 {
  color: #fff;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  text-transform: uppercase;
}
.brand-tile__head p { color: rgba(255,255,255,0.82); margin-top: 0.5rem; max-width: 32ch; font-size: 0.96rem; }
.brand-tile__arrow {
  flex-shrink: 0;
  width: 50px; height: 50px;
  display: grid; place-items: center;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.brand-tile__arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .brand-tile:hover .brand-tile__img { transform: scale(1.05); }
  .brand-tile:hover .brand-tile__arrow { transform: translateX(6px); background: var(--renault); }
}

/* Behindertenrabatt-Hinweis */
.verkauf-note {
  margin-top: 1.25rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid rgba(255,255,255,0.14);
  border-left: 3px solid var(--renault);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.03);
}
.verkauf-note__title {
  color: var(--renault);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 0.8rem;
}
.verkauf-note p { color: rgba(255,255,255,0.85); line-height: 1.6; max-width: 80ch; }
.verkauf-note strong { color: #fff; }

/* Bestandsfahrzeuge / AutoScout24 */
.verkauf-stock {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: clamp(1.5rem, 3vw, 2.1rem) clamp(1.6rem, 3vw, 2.3rem);
  border-radius: var(--radius-sm);
  background: var(--renault);
  color: var(--renault-ink);
  transition: transform 240ms var(--ease-out);
}
.verkauf-stock__label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.verkauf-stock h3 { color: var(--renault-ink); font-size: clamp(1.3rem, 2.4vw, 1.8rem); text-transform: uppercase; margin-top: 0.3rem; }
.verkauf-stock p { color: rgba(10,10,10,0.78); margin-top: 0.4rem; max-width: 52ch; font-size: 0.96rem; }
.verkauf-stock .btn { flex-shrink: 0; }
.verkauf-stock .btn--primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.verkauf-stock .btn--primary:hover { background: #000; }
@media (hover: hover) and (pointer: fine) {
  .verkauf-stock:hover { transform: translateY(-3px); }
}
@media (max-width: 760px) {
  .brand-tiles { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Werkstatt
   ========================================================================== */
.workshop__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
.work-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--bg);
  border: 1px solid var(--line);
  border-top: 3px solid var(--renault);
  border-radius: var(--radius-sm);
  padding: 1.6rem 1.5rem 3.4rem;
  transition: border-color 240ms ease, transform 240ms var(--ease-out);
}
.work-card h3 { font-size: 1.15rem; text-transform: uppercase; }
.work-card p { color: var(--ink-soft); font-size: 0.92rem; margin-top: 0.45rem; }
/* Klick-Hinweis unten links */
.work-card__cta {
  position: absolute;
  left: 1.5rem;
  bottom: 1.3rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  transition: opacity 240ms ease;
}
.work-card__cta::after {
  content: "→";
  transition: transform 240ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .work-card:hover {
    border-color: var(--ink);
    border-top-color: var(--renault);
    transform: translateY(-3px);
  }
  .work-card:hover .work-card__cta { opacity: 1; }
  .work-card:hover .work-card__cta::after { transform: translateX(4px); }
}
.workshop__cta {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}
.workshop__cta .note { color: var(--ink-soft); font-size: 0.95rem; }

/* ==========================================================================
   Kontakt / CTA
   ========================================================================== */
/* Renault-Bildkacheln (Text oben, eckiger Pfeil-Button unten rechts) */
.contact__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.split-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  padding: clamp(1.6rem, 3vw, 2.3rem);
  min-height: clamp(220px, 24vw, 280px);
  display: flex;
  flex-direction: column;
  color: #fff;
  isolation: isolate;
}
/* Farbverlauf-Hintergrund + Aufhellung beim Hover */
.split-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: transform 600ms var(--ease-out);
}
.split-cta--sales::before {
  background: radial-gradient(120% 120% at 80% 20%, #2a3b6b 0%, #101a33 55%, #0a1122 100%);
}
.split-cta--service::before {
  background: radial-gradient(120% 120% at 85% 30%, #6a4a8a 0%, #2b2350 55%, #141225 100%);
}
.split-cta__head { max-width: 22ch; }
.split-cta h3 {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
  line-height: 1.02;
  color: #fff;
}
.split-cta p {
  margin-top: 0.6rem;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.82);
  max-width: 32ch;
}
/* Eckiger Pfeil-Button unten rechts (Renault-Signatur) */
.split-cta__arrow {
  margin-top: auto;
  align-self: flex-end;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-sm);
  transition: transform 220ms var(--ease-out), background-color 220ms ease;
}
.split-cta__arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .split-cta:hover .split-cta__arrow { transform: translateX(6px); background: var(--renault); }
  .split-cta:hover::before { transform: scale(1.05); }
}

/* Kontakt-Intro + Team-Reihe */
.contact__intro {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 60ch;
  margin-bottom: 1.8rem;
}
.contact .team { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.contact__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* „Route öffnen"-Button unter der Adresse */
.route-btn { margin-top: 0.9rem; }

.info-block { display: grid; gap: 1.6rem; }
.info-item h4 {
  font-family: var(--font);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.info-item p, .info-item a { font-size: 1.05rem; line-height: 1.5; }
.info-item a { transition: color 160ms ease; }
.info-item a:hover { color: var(--dacia); }
.hours-list { display: grid; gap: 0.35rem; }
.hours-list .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  max-width: 280px;
  font-size: 1rem;
}
.hours-list .row span:last-child { color: var(--ink-soft); }

.map-embed {
  margin-top: 0.4rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 16 / 9;
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15); }
/* Click-to-load-Fläche (Karte lädt erst auf Klick) */
.map-embed__load {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1rem;
  background: var(--bg-soft);
  border: 0;
  cursor: pointer;
  color: var(--ink);
  text-align: center;
  transition: background-color 200ms ease;
}
.map-embed__load:hover { background: #ecece8; }
.map-embed__pin { color: var(--ink); }
.map-embed__pin svg { width: 34px; height: 34px; display: block; }
.map-embed__text {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.map-embed__hint { font-size: 0.76rem; color: var(--ink-soft); max-width: 32ch; }

.contact-person {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--renault);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.contact-person img { width: 76px; height: 76px; flex-shrink: 0; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.contact-person__info { min-width: 0; }
.contact-person .cp-name { font-weight: 600; font-family: var(--font-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: 0.01em; }
.contact-person .cp-role { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.1rem; }
.contact-person__links { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; }
.contact-person__links a {
  font-weight: 500;
  font-size: 0.98rem;
  transition: color 160ms ease;
  overflow-wrap: anywhere;
}
.contact-person__links a:hover { color: var(--dacia); }

/* Form */
.contact-form {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.field { margin-bottom: 1rem; }
.field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--bg);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.06);
}
.form-consent {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0.4rem 0 1.2rem;
}
.form-consent input { margin-top: 0.2rem; }
.form-consent a { text-decoration: underline; }
.form-note { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.9rem; }

/* Honeypot – für Menschen unsichtbar & nicht fokussierbar, Bots füllen es aus */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Status-Meldung nach dem Absenden (Erfolg / Fehler) */
.form-status {
  margin-top: 0.9rem;
  padding: 0.85rem 1.05rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  line-height: 1.5;
}
.form-status[data-state="ok"]    { background: #edf7ed; color: #1e5b2a; border: 1px solid #c6e6c6; }
.form-status[data-state="error"] { background: #fbeaea; color: #8a2020; border: 1px solid #f0c9c9; }

/* Smartes Formular – Zusatzfelder */
.req { color: #c9a400; font-weight: 700; }
.field-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
/* Dynamische Feldgruppe: dezent abgesetzter Block */
.form-dyn {
  margin: 0.2rem 0 1rem;
  padding: 1.2rem 1.2rem 0.2rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--renault);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
}
.form-dyn[hidden] { display: none; }
/* Datei-Upload */
.field input[type="file"] {
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  cursor: pointer;
  background: var(--bg);
}
.field input[type="file"]::file-selector-button {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  margin-right: 0.8rem;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.field input[type="file"]::file-selector-button:hover {
  background: var(--renault);
  border-color: var(--renault);
}
/* Inline-Checkbox (z. B. Führerschein) */
.form-check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0.2rem 0 0.4rem;
}
.form-check input { margin-top: 0.2rem; flex-shrink: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--bg-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer__brand .brand__mark { }
.footer__brand p { margin-top: 1.1rem; font-size: 0.95rem; max-width: 30ch; }
.footer h4 {
  color: #fff;
  font-family: var(--font);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.footer a { transition: color 160ms ease; font-size: 0.95rem; }
.footer a:hover { color: #fff; }
.footer__brand .brand { color: #fff; }
.footer__brand .brand__sub { color: rgba(255,255,255,0.6); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  font-size: 0.85rem;
}
.footer__bottom .legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__bottom a { text-decoration: underline; }

/* Cookie consent */
/* Toast (Kopier-Hinweis) */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 300;
  transform: translateX(-50%) translateY(1.5rem);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.toast[data-open="true"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 200ms ease; transform: translateX(-50%); }
}

.cookie {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 200;
  max-width: 520px;
  margin-inline: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 1.3rem 1.4rem;
  transform: translateY(140%);
  transition: transform 420ms var(--ease-out);
}
.cookie[data-open="true"] { transform: translateY(0); }
.cookie__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  margin: 0 0 0.5rem;
}
.cookie p { font-size: 0.9rem; color: var(--ink-soft); margin: 0; }
.cookie p a { text-decoration: underline; color: var(--ink); }
.cookie__actions { margin-top: 1.1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
.cookie__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
@media (min-width: 460px) {
  .cookie__actions .btn { flex: 0 1 auto; }
}

/* ==========================================================================
   Scroll reveal (Motion.dev fügt Inline-Styles hinzu; Fallback hier)
   ========================================================================== */
.reveal { opacity: 0; }
.js-off .reveal { opacity: 1; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px) {
  .autohaus__grid { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .workshop__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  /* ---------- Header / Nav (mobil) ----------
     Header bleibt transparent über dem Bild (wie Desktop). */
  .nav { height: 64px; gap: 0.5rem; }
  .nav__toggle { display: grid; flex: 0 0 auto; }
  .nav__actions { gap: 0.35rem; flex: 0 0 auto; }
  /* Anrufen oben ausblenden – erscheint groß im Fullscreen-Menü */
  .nav__call { display: none; }
  /* Brand darf bei Platzmangel schrumpfen/kürzen */
  .brand { min-width: 0; flex: 0 1 auto; font-size: 1rem; gap: 0.5rem; }
  .brand > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .brand__mark { width: 26px; height: 36px; }
  /* Untertitel "Renault & Dacia" bleibt sichtbar in der Nav (ohne Lübbenau) */
  .brand__sub { display: block; }

  /* Fullscreen-Menü */
  .nav__links {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 200;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.25rem;
    padding: clamp(1.5rem, 8vw, 3rem);
    background: var(--bg-dark);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 320ms var(--ease-out), transform 360ms var(--ease-out),
                visibility 0s linear 360ms;
  }
  .nav__links[data-open="true"] {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 320ms var(--ease-out), transform 360ms var(--ease-out),
                visibility 0s;
  }
  .nav__links li { text-align: center; }
  .nav__links a {
    display: block;
    padding: 0.85rem 1rem;
    font-size: clamp(1.6rem, 7vw, 2.2rem);
    color: #fff;
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  .nav__links a::after { display: none; }
  .nav__links-cta { display: block; margin-top: 1.4rem; }

  /* Sichtbares Kreuz oben rechts im Fullscreen-Menü */
  .nav__close-item {
    display: block;
    position: absolute;
    top: max(0.9rem, env(safe-area-inset-top));
    right: 1rem;
    margin: 0;
  }
  .nav__close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__close svg { width: 28px; height: 28px; display: block; }
  .nav__links-cta a { font-size: 1rem; max-width: 22rem; margin-inline: auto; }
  /* Body-Scroll sperren, solange das Fullscreen-Menü offen ist */
  body.nav-open { overflow: hidden; }

  html { scroll-padding-top: 64px; }

  /* ---------- Hero (mobil): Renault-Look – Vollbild ----------
     Bild füllt den ganzen Screen, Text sitzt unten drauf, darunter am
     Screen-Rand die Kategorie-Leiste. Nav liegt transparent oben drüber. */
  .hero {
    position: relative;
    min-height: 100svh;
    justify-content: flex-end;   /* Inhalt (Text + Leiste) nach unten */
    color: #fff;
    background: var(--bg-dark);
  }
  /* Bild-Bühne füllt den gesamten Hero */
  .hero__media {
    position: absolute;
    inset: 0;
    height: auto;
    max-height: none;
    min-height: 0;
  }
  /* Mobil: reiner opacity-Crossfade zwischen den Kategoriebildern, KEINE
     Bild-Animation (bricht sonst auf Edge/Safari ab dem 2. Wechsel).
     object-position:top → Autos sitzen im oberen Bildbereich und bleiben
     über dem unten liegenden Text-Overlay sichtbar. */
  .hero__inner-img {
    width: 100%;
    transform: none;
    object-position: center top;
  }
  /* Kräftigerer Verlauf unten, damit Text + Leiste gut lesbar sind */
  .hero__media::after {
    background:
      linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.75) 20%, rgba(10,10,10,0.25) 48%, rgba(10,10,10,0.10) 100%);
  }
  /* Text über dem Bild, unten */
  .hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 0;
    padding-bottom: clamp(1rem, 3vw, 1.4rem);
  }
  .hero h1 { color: #fff; font-size: clamp(2rem, 9vw, 3rem); }
  .hero__eyebrow { color: #fff; margin-bottom: 0.6rem; }
  .hero__sub { color: rgba(255,255,255,0.92); margin-top: 0.7rem; }
  .hero__cta { margin-top: 1.1rem; }

  /* Kategorie-Leiste: unten am Screen-Rand, über dem Bild, eine Zeile,
     horizontal scrollbar. Aktiver Tab wird per JS mittig gescrollt. */
  .hero__models {
    position: relative;
    z-index: 2;
    margin-top: 0;
    border-top: 1px solid rgba(255,255,255,0.22);
  }
  .hero__models-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.4rem;
    padding-top: 0.6rem;
    padding-bottom: 1rem;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero__models-row::-webkit-scrollbar { display: none; }
  .hero__home,
  .hero__model { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
  /* Leiste auf dunklem Bild → helle Schrift */
  .hero__model { color: rgba(255,255,255,0.65); }
  .hero__model[aria-selected="true"] { color: #fff; }
  .hero__model::after { background: var(--renault); }
  .hero__home { color: rgba(255,255,255,0.65); }
  .hero__home:hover,
  .hero__home[aria-current="true"] { color: #fff; }

  /* Emissionsfeld mobil: höhere Mindesthöhe (Zeilen brechen um) → kein Springen.
     align-items:flex-start, damit der Text oben bündig beginnt. */
  .hero-emission {
    min-height: 270px;
    align-items: flex-start;
  }

  /* Ansprechpartner-Cards in der Autohaus-Sektion mobil ausblenden
     (im Kontaktbereich bleiben sie erhalten). */
  .autohaus__grid .team { display: none; }

  /* ---------- Sektionen ---------- */
  .pillars { grid-template-columns: 1fr; }
  .contact__split { grid-template-columns: 1fr; }
  .contact-form .form-row { grid-template-columns: 1fr; }
  .trust__row { gap: 0.7rem 1.4rem; }
}

@media (max-width: 560px) {
  .workshop__grid { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .autohaus__stats { gap: 1.6rem; }
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  /* Pan/Zoom aus – der Bildwechsel (opacity) bleibt (harter Cut ist ok) */
  .hero__inner-img { transform: none !important; }
  .hero__img.is-active .hero__inner-img { animation: none !important; }
}