:root {
  --color-bg: #f7f6ef;
  --color-bg-alt: #eeece0;
  --color-ink: #10130f;
  --color-ink-soft: #1c211c;
  --color-accent: #8a6a00;
  --color-accent-bright: #ffcc00;
  --color-text: #14171a;
  --color-text-soft: #565b56;
  --font-heading: Arial, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-mono: 'Consolas', 'Courier New', monospace;
  --font-body: 'Segoe UI', Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Visually hidden but readable by screen readers & search engines */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  font-weight: 400;
  line-height: 1.6;
}

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

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0 0 16px;
}

h1 { font-size: 3.6rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.3rem; letter-spacing: -0.005em; }

.eyebrow {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-bottom: 14px;
}
.eyebrow.center { text-align: center; }

.divider {
  color: var(--color-accent);
  font-size: 1.2rem;
  margin: 8px auto 20px;
  border-top: 2px solid var(--color-accent-bright);
  width: 60px;
  padding-top: 0;
}
.divider.center { margin-left: auto; margin-right: auto; }

.lead { font-size: 1.15rem; color: var(--color-ink); font-weight: 600; }
.sub { color: var(--color-text-soft); }
.body-text { color: var(--color-text-soft); max-width: 480px; }
.body-text.center { max-width: 620px; margin-left: auto; margin-right: auto; }

/* Buttons: square-ish (not pill), uppercase, technical — matches the reference's
   "BOOK A DEMO" style rather than the rounded pill buttons used previously. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); }

.btn-dark { background: var(--color-ink); color: #fff; }
.btn-accent { background: var(--color-accent-bright); color: var(--color-ink); }
.btn-lg { padding: 18px 32px; font-size: 0.9rem; }
.icon-inline { flex-shrink: 0; }

/* Circular icon-only button, paired next to a primary CTA */
.btn-round {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-round:hover { background: var(--color-ink); color: #fff; }
.btn-round:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-round:disabled:hover { background: transparent; color: var(--color-ink); }
.btn-round.on-dark { border-color: rgba(255,255,255,0.4); color: #fff; }
.btn-round.on-dark:hover { background: #fff; color: var(--color-ink); }

/* Header: dark, sticky, technical mono nav — matches the footer's dark tone (was a
   light cream header) so the site has one consistent dark "frame" top and bottom
   instead of clashing with the light content sections in between. Uses
   img/logo-weiss.png (not logo-dunkel.png) since the background is now dark. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(16, 19, 15, 0.96);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand-logo { height: 34px; width: auto; }
.footer-brand .brand-logo { height: 32px; }
.brand-text { display: flex; flex-direction: column; gap: 3px; }
.brand-name {
  font-family: var(--font-heading);
  color: var(--color-ink);
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-subtitle {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-soft);
  white-space: nowrap;
}
.main-nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.main-nav a {
  text-decoration: none;
  color: #b7bab2;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.main-nav a.active,
.main-nav a:hover { color: #fff; border-bottom-color: var(--color-accent-bright); }

/* Hero: full-bleed photo, dark overlay, content bottom-left aligned (not centered) —
   background photo-ready: drop a file at img/hero.jpg (1920px+ wide) and it fills in
   automatically under the overlay; a missing file just shows the gradient, no
   broken-image artifact. */
.hero {
  background-image: linear-gradient(180deg, rgba(16, 19, 15, 0.5) 0%, rgba(16, 19, 15, 0.88) 100%), url('img/hero.jpg');
  background-size: cover;
  background-position: center bottom;
  background-color: var(--color-ink);
  position: relative;
  overflow: hidden;
  padding: 120px 0 64px;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
}
.hero-inner { position: relative; z-index: 2; width: 100%; }
.hero-content { max-width: 720px; }
.hero-buttons { display: flex; align-items: center; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero h1, .hero .lead { color: #fff; }
.hero .sub { color: #d3d5cd; max-width: 520px; }

.hero-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-bright);
  margin: 0 0 18px;
}
.hero-cta-note {
  margin-top: 16px;
  font-size: 0.8rem;
  color: #9ea296;
}

/* Trust strip: bordered fact grid directly under the hero — echoes the reference's
   "trusted by" logo grid, using facts instead of partner logos since this business
   has none to show. Light background (was dark var(--color-ink-soft)) so it doesn't
   stack a second dark band directly under the already-dark hero photo. */
.trust-strip { background: var(--color-bg-alt); border-top: 1px solid #e5e2d4; border-bottom: 1px solid #e5e2d4; }
.trust-strip .container { padding-top: 0; padding-bottom: 0; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trust-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 18px;
  border-right: 1px solid #e2ddc9;
  color: var(--color-ink);
  font-size: 0.86rem;
  font-weight: 600;
}
.trust-cell:last-child { border-right: none; }
.trust-cell-icon { display: inline-flex; color: var(--color-accent); flex-shrink: 0; }

/* Sections */
.section { padding: 88px 0 88px; position: relative; }
.section-bg { background: var(--color-bg); }
.section-bg-alt { background: var(--color-bg-alt); }

.section-head { margin-bottom: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section-head h2 { margin-bottom: 0; }
.section-head .body-text { max-width: 560px; }
.section-head.center { text-align: center; display: block; }
.section-head.center h2 { text-align: center; }
.section-head.center .body-text { margin: 0 auto; }

/* Leistungen: all six services shown at once as a grid — no slider/drag/tabs needed
   anymore. Each card tilts toward the cursor on hover (JS-driven 3D transform, see
   script.js) instead of the earlier slide-by-slide interaction. Showing everything
   up front also directly answers the original mobile complaint that started the
   slider in the first place (v6 above, "zu viel Klickarbeit") even better than a
   slider did — a grid takes zero gestures to see all six services. */
.leistungen-section .container { max-width: 1000px; }
.leistung-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.leistung-card {
  position: relative;
  /* Helle Karte statt der vorherigen dunklen (var(--color-ink)) Fläche — als "düster"
     empfunden. Weiche Gold-Aura hinter dem Icon + feines (jetzt dunkles) Punktraster
     bleiben als dezente Tiefe/Textur erhalten, nur an den hellen Untergrund angepasst. */
  background-color: #fff;
  background-image:
    radial-gradient(circle at 50% 32%, rgba(255, 204, 0, 0.18) 0%, rgba(255, 204, 0, 0) 46%),
    radial-gradient(rgba(16, 19, 15, 0.035) 1px, transparent 1.5px);
  background-size: 100% 100%, 24px 24px;
  border: 1px solid #ece8d8;
  border-radius: 4px;
  padding: 40px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 10px rgba(16, 19, 15, 0.05);
  transform: perspective(700px);
  transition: transform 0.5s ease, box-shadow 0.4s ease;
  will-change: transform;
}
/* Während die Maus aktiv über der Karte ist, keine Transform-Transition — jeder
   mousemove-Frame setzt die Rotation direkt, sonst hinkt die Bewegung dem Cursor
   spürbar hinterher. Beim Verlassen (Klasse wird entfernt) greift die obige
   Transition wieder und federt die Karte weich in die Ruhelage zurück. */
.leistung-card.is-tilting { transition: box-shadow 0.4s ease; }
.leistung-card:hover { box-shadow: 0 20px 40px rgba(16, 19, 15, 0.14); }
.leistung-slide-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 204, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
  margin-bottom: 20px;
}
.leistung-card h3 { color: var(--color-ink); font-size: 1.25rem; margin: 0 0 12px; }
.leistung-card p { color: var(--color-text-soft); margin: 0; font-size: 0.92rem; line-height: 1.65; }

@media (max-width: 900px) { .leistung-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .leistung-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .leistung-card { transition: box-shadow 0.4s ease; }
}

/* Fleet group photo: a decorative "Blickfang" shot of the vehicles lined up together,
   sitting above the individual cards rather than being interactive itself (see
   CLAUDE.md for why clickable hotspots on this flat image were rejected). */
.flotte-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
  border-top: 3px solid var(--color-accent-bright);
  margin-bottom: 40px;
  transition: box-shadow 0.25s ease;
}
.flotte-image:hover { box-shadow: 0 16px 32px rgba(16, 19, 15, 0.18); }

/* Fuhrpark: magnetic "piano key" gallery — as the mouse moves across the row, each
   item's width follows continuously (driven by script.js setting --influence/--grow
   custom properties every mousemove, Gaussian falloff from cursor position), rather
   than a hard CSS :hover jump between two fixed states. --influence (0–1) also drives
   the image zoom and caption fade so everything grows toward the cursor in sync.
   Falls back to a fixed-height vertical stack below 700px (no mouse on touch, and a
   cramped flex-row of 6 slivers wouldn't work there) with captions always visible. */
.fahrzeug-gallery {
  display: flex;
  gap: 6px;
  height: 460px;
  border-radius: 4px;
  overflow: hidden;
}
.fahrzeug-gallery-item {
  position: relative;
  flex-grow: var(--grow, 1);
  flex-shrink: 1;
  flex-basis: 0%;
  min-width: 48px;
  overflow: hidden;
  transition: flex-grow 0.2s ease-out;
}
.fahrzeug-gallery-item:focus-within { --grow: 5; --influence: 1; }
.fahrzeug-gallery-trigger {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.fahrzeug-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(calc(1 + var(--influence, 0) * 0.07));
  transition: transform 0.2s ease-out;
}
/* Platzhalter fürs 6. Fahrzeug: eine vom Betreiber gelieferte Ankündigungsgrafik
   (img/fahrzeug-caddy-6-dummy.jpg — Text "Ein weiteres Auto bald für Sie verfügbar!"
   ist bereits ins Bild eingebaut), behandelt wie ein normales Vollbild-Foto
   (object-fit: cover wie bei den echten Fahrzeugfotos). Keine Bildunterschrift nötig
   (Text steckt im Bild), keine Lightbox (kein Foto zum Vergrößern, sondern eine
   Ankündigungsgrafik).  */

@media (max-width: 700px) {
  .fahrzeug-gallery { flex-direction: column; height: auto; }
  .fahrzeug-gallery-item,
  .fahrzeug-gallery-item:focus-within { flex: none; height: 180px; }
  .fahrzeug-gallery-item img { transform: none; }
  /* Kein Tap-zum-Vergrößern auf Mobile (siehe script.js) — die gestapelten Fotos
     sind hier schon groß genug, ein Lightbox-Klick bringt nichts Zusätzliches. */
  .fahrzeug-gallery-trigger { cursor: default; }
}

/* About: centered text + inline benefit chips */
.about-section { text-align: center; }
.about-section .container { max-width: 720px; }
.about-section .eyebrow, .about-section .body-text { text-align: center; }
.about-section .body-text { margin-left: auto; margin-right: auto; }

.benefits-row {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.benefit-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-bg-alt);
  border: 1px solid #e5e2d4;
  border-radius: 6px;
  padding: 10px 18px 10px 12px;
  font-size: 0.88rem;
  color: var(--color-ink);
  font-weight: 600;
}
.benefit-chip-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  flex-shrink: 0;
}

/* CTA: warm, light gold-cream gradient instead of the previous dark ink block — the
   owner felt the site read too "düster" (gloomy) overall; a dark CTA stacked right
   above the dark footer was two dark bands in a row, part of what made the page feel
   heavier than intended. See the same reasoning at .leistung-card and .trust-strip. */
.cta {
  background: linear-gradient(180deg, var(--color-bg-alt) 0%, #f4e8c8 100%);
  color: var(--color-ink);
  text-align: center;
}
.cta .container { max-width: 620px; }
.cta h2, .cta .eyebrow { color: var(--color-ink); }
.cta .eyebrow { color: var(--color-accent); }
.cta .body-text { color: var(--color-text-soft); margin-left: auto; margin-right: auto; }
.cta .divider { margin-left: auto; margin-right: auto; }
.cta .hero-buttons { justify-content: center; }
.cta-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 24px auto 0;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(16, 19, 15, 0.1);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--color-text-soft);
  max-width: 460px;
  text-align: left;
}
.note-icon { color: var(--color-accent); flex-shrink: 0; }
.cta-hint strong { color: var(--color-ink); }

/* Footer */
.site-footer { background: var(--color-ink); color: #c7cac1; padding-top: 48px; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 24px; }
.footer-top .eyebrow { color: var(--color-accent-bright); margin-bottom: 0; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 40px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 40px;
}
.footer-brand p { font-size: 0.9rem; margin-top: 12px; }
.footer-col h3 {
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
  font-weight: 700;
}
.footer-col a, .footer-col p {
  display: block;
  color: #c7cac1;
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.footer-col a:hover { color: var(--color-accent-bright); }
.fine-print { font-size: 0.78rem; color: #8a8d81; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding: 20px 0;
  font-size: 0.85rem;
}
.footer-partner-link { color: inherit; text-decoration: underline; text-decoration-color: rgba(199, 202, 193, 0.4); text-underline-offset: 2px; }
.footer-partner-link:hover { color: var(--color-accent-bright); text-decoration-color: currentColor; }
.footer-bottom .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.to-top {
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Floating call button (mobile only) */
.contact-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-bright);
  color: var(--color-ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-fab:hover { transform: scale(1.08); }
@media (max-width: 960px) {
  .contact-fab { display: flex; }
}

/* Fahrzeug-Lightbox: click a vehicle photo to see it enlarged */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(16, 19, 15, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.lightbox-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0s linear 0s;
}
.lightbox-figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox-figure img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  border-top: 3px solid var(--color-accent-bright);
  transform-origin: center center;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-figure img { transition: none !important; transform: none !important; }
}
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-backdrop { transition: none; }
}

/* Rechtliches-Popover: Impressum/Datenschutz per nativer Popover-API (statt
   selbstgebautem Backdrop-Div) — `impressum.html`/`datenschutz.html` bleiben
   vollwertige, eigenständige Seiten (Direktlinks, Erreichbarkeit ohne JS, siehe
   CLAUDE.md), das Popover ist nur eine zusätzliche, schnellere Ansicht ab der
   Startseite. `popover="auto"` (Standardwert) gibt uns Escape-zum-Schließen und
   Klick-außerhalb-schließt automatisch vom Browser — kein eigener Keydown-/
   Backdrop-Click-Handler mehr nötig, siehe script.js. */
.legal-popover {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(720px, calc(100% - 40px));
  max-height: min(85vh, 720px);
  padding: 0;
  /* Gestrichelter Rand rundum wie eine Fahrbahnmarkierung — passend zum
     Referenz-Snippet des Betreibers (dort ein gepunkteter Rahmen), hier in Gold statt
     Orange und als Fahrbahnmarkierungs-Anspielung passend zum restlichen
     Straßen-Motiv der Seite (Logo-Fahrbahnmarkierung, gestrichelte Dummy-Skizze). */
  border: 3px dashed var(--color-accent-bright);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(16, 19, 15, 0.35);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.96) translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease,
    overlay 0.25s ease allow-discrete, display 0.25s ease allow-discrete;
}
.legal-popover:popover-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}
@starting-style {
  .legal-popover:popover-open {
    opacity: 0;
    transform: scale(0.96) translateY(10px);
  }
}
.legal-popover::backdrop {
  background: rgba(16, 19, 15, 0.7);
  backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity 0.25s ease, backdrop-filter 0.25s ease, display 0.25s ease allow-discrete;
}
@starting-style {
  .legal-popover:popover-open::backdrop {
    opacity: 0;
    backdrop-filter: blur(0);
  }
}
/* Eigener Scroll-Container fürs Fließtext-Innere — der Schließen-Button sitzt
   *außerhalb* davon, direktes Kind von .legal-popover, und bleibt dadurch beim
   Scrollen des langen Rechtstexts sichtbar an Ort und Stelle stehen ("mitschwebend"),
   statt mit dem Inhalt wegzuscrollen. */
.legal-popover-scroll {
  max-height: inherit;
  overflow-y: auto;
  padding: 48px;
}
.legal-popover-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(16, 19, 15, 0.06);
  color: var(--color-ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.legal-popover-close:hover { background: var(--color-accent-bright); color: var(--color-ink); }
.legal-modal-content h1 { font-size: 1.9rem; margin-bottom: 20px; }
.legal-modal-content h3 { margin-top: 26px; font-size: 1.1rem; }
.legal-modal-content .eyebrow { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .legal-popover { transition: none; }
}
@media (max-width: 560px) {
  .legal-popover { width: calc(100% - 24px); max-height: 92vh; }
  .legal-popover-scroll { padding: 40px 22px 28px; }
}

/* Legal pages */
.legal-page { padding-top: 56px; padding-bottom: 80px; }
.legal-page h1 { margin-bottom: 32px; }
.legal-page h3 { margin-top: 32px; }
.legal-text { max-width: 720px; }
.legal-text a { color: var(--color-accent); }

/* Scroll-in animation */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Kleineres Hero-Bild (800px statt 1600px) unterhalb 700px — auf einem Telefon lädt
   sonst dieselbe große Desktop-Datei für nichts, da sie ohnehin auf Handybreite
   herunterskaliert dargestellt wird (PageSpeed: "richtig dimensionierte Bilder"). */
@media (max-width: 700px) {
  .hero { background-image: linear-gradient(180deg, rgba(16, 19, 15, 0.5) 0%, rgba(16, 19, 15, 0.88) 100%), url('img/hero-mobile.jpg'); }
}

/* Responsive */
@media (max-width: 960px) {
  .main-nav { display: none; }
  .hero { padding: 90px 0 48px; min-height: 520px; }
  h1 { font-size: 2.6rem; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-cell:nth-child(2n) { border-right: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .leistung-slide { padding: 36px 28px; }
  .leistung-arrow { display: none; }
  .fahrzeug-card { flex-basis: calc(70% - 12px); }
}
@media (max-width: 560px) {
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.7rem; }
  .header-inner { flex-wrap: wrap; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .fahrzeug-card { flex-basis: 82%; }
  .section-head { display: block; }
}