/* ==========================================================================
   KFZ Technik Holhut — Stylesheet

   Mischung aus zwei Vorbildern:
   · kfz-sv-steinert.de  → Aufbau, Inter, Karten, Schnellkontakt, Akzentfarben
   · bmw.com             → weisse Flaeche, Carbon statt Marineblau, keine
                           runden Ecken, keine Schatten, sehr leichte grosse
                           Ueberschriften (300), Navigation als reiner Text
   ========================================================================== */

/* --- Schrift (lokal gehostet, kein Aufruf bei Google) --------------------- */
@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.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+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Design-Tokens -------------------------------------------------------- */
:root {
  --font-sans: "Inter var", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Flächen & Text */
  --carbon: #262626;
  --carbon-soft: #1c1c1c;
  --bg: #ffffff;
  --bg-alt: #f1f1f1;      /* Fog */
  --surface: #ffffff;
  --ink: #262626;
  --ink-2: #4a4a4a;
  --muted: #6b6b6b;
  --line: #e2e2e2;
  --line-strong: #bbbbbb; /* Concrete */

  /* Akzente: sparsam. Blau für Verweise, Gelb für die eine Hauptaktion. */
  --brand: #1a5fae;
  --brand-600: #14498a;
  --accent: #ffc000;
  --accent-ink: #262626;
  --accent-soft: #fff6e0;

  /* Auf dunklen Flächen */
  --on-dark: #ffffff;
  --on-dark-muted: #bbbbbb;

  --container: 1200px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.25rem);
  --header-h: 68px;
  --ease: cubic-bezier(.22, .68, .36, 1);
  color-scheme: light;
}

/* Dunkles Design immer aktiv, unabhaengig von der Systemeinstellung */
:root {
  --bg: #131313;
  --bg-alt: #1a1a1a;
  --surface: #1a1a1a;
  --ink: #f1f1f1;
  --ink-2: #d4d4d4;
  --muted: #a3a3a3;
  --line: #2f2f2f;
  --line-strong: #454545;
  --brand: #79b0f0;
  --brand-600: #9cc6f5;
  color-scheme: dark;
}

/* --- Grundlagen ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--header-h);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.63;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

img, svg { display: block; max-width: 100%; }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-600); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--carbon); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  padding: .7rem 1.2rem;
  background: var(--accent); color: var(--carbon);
  font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: .75rem; }
body.studio a.skip-link:not(.btn) { color: var(--carbon); }   /* studio.css faerbt Links sonst hellblau */

.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;
}

/* --- Typografie ----------------------------------------------------------- */
/* Grosse Titel bewusst leicht (300) — das ist die Anleihe bei BMW. */
h1, h2, h3, h4 { margin: 0; line-height: 1.2; hyphens: auto; }

.t-hero, .t-display-lg, .t-display { font-weight: 300; letter-spacing: -.01em; line-height: 1.16; }
.t-hero       { font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4rem); }
.t-display-lg { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); }
.t-display    { font-size: clamp(1.8rem, 1.4rem + 1.9vw, 2.75rem); }
.t-heading-lg { font-size: clamp(1.45rem, 1.25rem + .9vw, 1.9rem); font-weight: 400; }
.t-heading    { font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); font-weight: 500; }
.t-heading-sm { font-size: 1.125rem; font-weight: 600; }

.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  margin: 0 0 1.1rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 1px; flex: none; background: var(--line-strong); }
.label {
  display: block;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.lead { max-width: 40em; font-size: clamp(1.075rem, 1rem + .35vw, 1.2rem); color: var(--ink-2); }
.prose { max-width: 42em; }
.prose p, .legal p { color: var(--ink-2); }

/* --- Flächen -------------------------------------------------------------- */
.is-dark, .is-carbon { background: var(--carbon); color: var(--on-dark); }
.is-carbon { background: var(--carbon-soft); }
.is-marble { background: var(--bg-alt); }
.is-dark p, .is-carbon p { color: var(--on-dark-muted); }
.is-dark .eyebrow, .is-carbon .eyebrow, .is-dark .label, .is-carbon .label { color: var(--on-dark-muted); }
.is-dark .eyebrow::before, .is-carbon .eyebrow::before { background: #6b6b6b; }
.is-dark a, .is-carbon a { color: var(--on-dark); }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }

.section-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1rem 3.5rem; margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head h2 { max-width: 20ch; }
.section-head > p { max-width: 34em; margin: 0; color: var(--muted); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: start; }
.team-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: center; }
.team-grid .photo-free { margin: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

@media (max-width: 960px) {
  .split, .team-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* --- Buttons: rechteckig, ohne Schatten ----------------------------------- */
.btn {
  --btn-bg: var(--carbon);
  --btn-ink: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent; border-radius: 0;
  background: var(--btn-bg); color: var(--btn-ink);
  font: inherit; font-weight: 500; font-size: 1rem; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
a.btn, a.btn:hover, a.btn:visited { color: var(--btn-ink); }
.arrow { width: 1em; height: 1em; flex: none; transition: transform .18s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary { --btn-bg: var(--accent); --btn-ink: var(--accent-ink); }
.btn-primary:hover { --btn-bg: #e6ad00; }

.btn-outline { --btn-bg: transparent; --btn-ink: var(--ink); border-color: var(--line-strong); }
.btn-outline:hover { border-color: var(--ink); }
.is-dark .btn-outline, .is-carbon .btn-outline, .hero .btn-outline {
  --btn-ink: #fff; border-color: rgba(255, 255, 255, .5);
}
.is-dark .btn-outline:hover, .is-carbon .btn-outline:hover, .hero .btn-outline:hover { border-color: #fff; }

.btn-ghost { --btn-bg: transparent; --btn-ink: var(--ink); padding-inline: 0; font-weight: 500; }
.btn-ghost:hover { text-decoration: underline; text-underline-offset: 5px; }
.is-dark .btn-ghost, .is-carbon .btn-ghost, .hero .btn-ghost { --btn-ink: #fff; }

.btn-sm { padding: .55rem 1.1rem; font-size: .9rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.5rem; margin-top: 2rem; }

/* --- Kopfbereich: hell, reine Textlinks ----------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  height: var(--header-h);
  background: var(--bg); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 100%; }

.brand { display: flex; flex-direction: column; line-height: 1.1; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand-top { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.brand-main { font-size: 1.3rem; font-weight: 600; letter-spacing: .01em; }

.nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.nav-links a {
  display: block; padding: .35rem 0;
  color: var(--ink); font-size: 1rem; font-weight: 400; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--ink); }
.nav-links a[aria-current="page"] { font-weight: 600; border-bottom-color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-tel { white-space: nowrap; }

.menu-toggle {
  display: none; align-items: center; gap: .6rem;
  min-height: 44px; padding: .5rem .2rem;
  border: 0; background: none; color: var(--ink);
  font: inherit; font-size: .95rem; cursor: pointer;
}
.menu-icon { position: relative; width: 20px; height: 11px; }
.menu-icon::before, .menu-icon::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 1.5px;
  background: currentColor; transition: transform .2s var(--ease);
}
.menu-icon::before { top: 0; }
.menu-icon::after { bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(4.75px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-4.75px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 0; z-index: 99; overflow-y: auto;
  padding-block: 1rem 3rem;
  background: var(--bg); color: var(--ink);
}
.mobile-menu-links a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.05rem 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 1.35rem; font-weight: 300; text-decoration: none;
}
.mobile-menu-links a:hover { color: var(--ink); }
.mobile-menu .btn-primary { width: 100%; margin-top: 2rem; }
.mobile-menu-legal { display: flex; gap: 1.5rem; margin-top: 1.75rem; }
.mobile-menu-legal a { color: var(--muted); font-size: .95rem; text-decoration: none; }

@media (max-width: 1000px) {
  .site-nav { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 430px) {
  .nav-tel { display: none; }
}
@media (min-width: 1001px) {
  .mobile-menu { display: none !important; }
}

/* --- Hero: Bild randlos, Text darüber ------------------------------------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: min(720px, calc(100svh - var(--header-h)));
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--carbon); color: #fff; overflow: hidden;
}
.hero > .wrap { position: relative; z-index: 2; width: 100%; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(38, 38, 38, .94) 0%, rgba(38, 38, 38, .75) 48%, rgba(38, 38, 38, .3) 100%);
}
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 .accent { color: #fff; font-weight: 500; }
.hero .lead { color: #e4e4e4; }
.watermark { display: none; }

.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2.5rem 3rem; align-items: end; }

.hours-panel { padding: 1.4rem 1.6rem; border: 1px solid rgba(255, 255, 255, .28); background: rgba(38, 38, 38, .55); }
.hours-panel .label { margin-bottom: .85rem; color: var(--on-dark-muted); }
.hours div { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; border-top: 1px solid rgba(255, 255, 255, .18); }
.hours div:first-of-type { border-top: 0; }
.hours dt { color: #e4e4e4; font-size: .98rem; }
.hours dd { font-weight: 500; font-size: .98rem; }

/* Fakten als schlichte Textspalten statt Chips */
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.5rem 3rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.hero-facts li { display: flex; flex-direction: column; gap: .3rem; }
.hero-facts .label { color: var(--on-dark-muted); }
.fact { font-size: 1.05rem; font-weight: 400; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* --- Seitenkopf der Unterseiten ------------------------------------------- */
.page-hero { position: relative; overflow: hidden; background: var(--carbon); color: #fff; }
.page-hero > .wrap { position: relative; z-index: 2; padding-block: clamp(3.5rem, 8vw, 6rem); }
.page-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.page-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.page-hero.has-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(38, 38, 38, .94), rgba(38, 38, 38, .5));
}
/* Mit Bild: hoeher, damit cover das Motiv nicht zu stark beschneidet */
.page-hero.has-media { display: flex; align-items: center; min-height: min(46vw, 72vh, 760px); }
.page-hero.has-media > .wrap { flex: 1 1 auto; min-width: 0; }
/* Logo als Hintergrund: Kopf behaelt die urspruengliche Hoehe ohne Bild */
.page-hero.has-logo { min-height: 0; }
/* 1 cm (ca. 38 px) hoeher, gleichmaessig oben und unten */
.page-hero.has-logo > .wrap { padding-block: calc(clamp(3.5rem, 8vw, 6rem) + 19px); }
.page-hero h1 { max-width: 20ch; margin-bottom: 1rem; }
.jump-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.25rem; }

/* --- Karten: Haarlinie statt Schatten, keine Rundungen -------------------- */
.card, .tile, .contact-card, .date, .stat, .svc, .embed-notice, .timeline li, .brand-list li {
  border: 1px solid var(--line); border-radius: 0; background: var(--surface);
}
.is-dark .card, .is-dark .stat, .is-dark .embed-notice, .is-carbon .contact-card {
  border-color: rgba(255, 255, 255, .22); background: transparent;
}

/* Leistungs-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 1.25rem; }
.tiles > li { display: grid; }
.tile {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .18s var(--ease);
}
.tile:hover { border-color: var(--ink); color: inherit; }
.tile-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bg-alt); }
.tile-media img, .tile > img { width: 100%; height: 100%; object-fit: cover; }
.tile .label, .tile h3, .tile p, .tile .more { margin-inline: 1.35rem; }
.tile .label { margin-top: 1.35rem; }
.tile h3 { margin-block: .45rem .55rem; }
.tile p { font-size: .98rem; color: var(--muted); }
.tile .more { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; margin-bottom: 1.35rem; font-size: .95rem; }
.tile:hover .more { text-decoration: underline; text-underline-offset: 4px; }

/* Bilder: kantig, randlos wirkend */
.photo { margin: 2rem 0 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-alt); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-wide { aspect-ratio: 21 / 9; margin: 0 0 2.5rem; }

/* Kennzeichnung KI-generierter Bilder (Art. 50 KI-Verordnung) */
.photo, .tile-media { position: relative; }
.ki-hinweis {
  position: absolute; right: .4rem; bottom: .4rem; z-index: 3;
  padding: .1rem .35rem; font-size: .6875rem; line-height: 1.3; letter-spacing: .02em;
  color: rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .5); pointer-events: none;
}
.photo-free { aspect-ratio: auto; max-width: 660px; margin: 0 0 2.5rem; }
.photo-free img { height: auto; }

/* Markenliste */
.brand-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 0; margin-top: 3rem; border: 1px solid var(--line); }
.brand-list li { display: flex; flex-direction: column; gap: .25rem; padding: 1.15rem 1.35rem; border: 0; border-right: 1px solid var(--line); }
.brand-list li:last-child { border-right: 0; }
.brand-list .t-display { font-size: 1.15rem; font-weight: 400; letter-spacing: 0; }
@media (max-width: 640px) {
  .brand-list li { border-right: 0; border-bottom: 1px solid var(--line); }
  .brand-list li:last-child { border-bottom: 0; }
}

/* Kennzahlen */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 3rem; }
.stat { padding: 1.5rem 1.6rem; }
.stat-value { display: block; margin-bottom: .45rem; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); font-weight: 300; letter-spacing: -.01em; }
.stat p { font-size: .98rem; }
@media (max-width: 640px) { .stats { grid-template-columns: 1fr; } }

/* Aufzählungen */
.checklist { counter-reset: item; display: grid; margin-block: 1.5rem 2rem; border-top: 1px solid var(--line); }
.is-dark .checklist { border-color: rgba(255, 255, 255, .22); }
.checklist li {
  counter-increment: item;
  display: grid; grid-template-columns: 2rem 1fr; align-items: baseline; gap: .6rem;
  padding: .8rem 0; border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.is-dark .checklist li { border-color: rgba(255, 255, 255, .22); color: #e4e4e4; }
.checklist li::before { content: counter(item, decimal-leading-zero); font-size: .78rem; font-weight: 700; color: var(--muted); }
.is-dark .checklist li::before { color: var(--on-dark-muted); }

.bullets { display: grid; gap: .45rem; margin-bottom: 1em; }
.bullets li { position: relative; padding-left: 1.4rem; color: var(--ink-2); }
.bullets li::before { content: ""; position: absolute; left: 0; top: .78em; width: .6rem; height: 1px; background: var(--line-strong); }
.is-dark .bullets li { color: #e4e4e4; }

/* Haus-TÜV-Termine */
.dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.date { padding: 1.75rem 1.9rem; }
.date .t-display-lg { font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.3rem); }
.date-time { display: block; margin-top: .35rem; font-size: 1.1rem; font-weight: 500; }
.date-org { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 500; }
.date-org .label { display: inline; }
@media (max-width: 640px) { .dates { grid-template-columns: 1fr; } }

/* Zeitleiste */
.timeline li { padding: 1.5rem 1.6rem; }
.year { display: block; margin-bottom: .6rem; font-size: 2rem; font-weight: 300; letter-spacing: -.01em; }
.timeline p { color: var(--muted); font-size: .98rem; }

/* Kontakt */
.tel-big { display: inline-block; margin-block: .6rem .9rem; font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); font-weight: 300; letter-spacing: -.01em; text-decoration: none; }
.tel-big:hover { text-decoration: underline; text-underline-offset: .12em; }

.info-list { display: grid; }
.info-list > div { display: grid; grid-template-columns: minmax(130px, 1fr) 2fr; gap: .35rem 1.5rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.info-list > div:last-child { border-bottom: 1px solid var(--line); }
.is-dark .info-list > div, .is-carbon .info-list > div { border-color: rgba(255, 255, 255, .22); }
.info-list dt { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.is-dark .info-list dt, .is-carbon .info-list dt { color: var(--on-dark-muted); }
.info-list .btn-ghost { margin-top: .4rem; padding-inline: 0; font-size: .95rem; }
@media (max-width: 640px) { .info-list > div { grid-template-columns: 1fr; } }

.contact-card { padding: 1.6rem 1.7rem; }
.contact-card .label { margin-bottom: .7rem; }
.contact-card a.t-heading { display: inline-block; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.contact-card a.t-heading:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-card address { font-style: normal; }

/* Leistungen im Detail */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.25rem clamp(1.5rem, 4vw, 3.5rem); padding: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: 1.25rem; }
.svc h2 { margin-top: .4rem; }
.svc .photo { margin-top: 1.4rem; }
.svc .info-list { margin-block: .25rem 1rem; }
@media (max-width: 960px) { .svc { grid-template-columns: 1fr; } }

/* Werkstatt-Video (eigener Server, startet beim Scrollen, laeuft in Schleife) */
/* Zwei Videos nebeneinander, auf schmalen Schirmen untereinander. */
.video-grid { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: 1120px; }
.video-box { position: relative; margin: 0; min-width: 0; }
.video-player { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: var(--carbon-soft); }
.video-sound {
  position: absolute; right: .8rem; bottom: .8rem;
  padding: .45rem .95rem;
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: rgba(0, 0, 0, .6);
  border: 1px solid rgba(255, 255, 255, .38); cursor: pointer;
  transition: background-color .18s var(--ease);
}
.video-sound:hover { background: rgba(0, 0, 0, .85); }
.video-box.has-error .video-sound { display: none; }
.video-sound.video-pause { right: auto; left: .8rem; }
/* Erscheint nur, wenn der Browser den Autostart abgelehnt hat */
.video-start {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  width: 100%; height: 100%;
  border: 0; padding: 0;
  background: rgba(10, 12, 16, .35);
  cursor: pointer;
}
.video-start::before {
  content: "";
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(10, 12, 16, .55);
}
.video-start::after {
  content: "";
  position: absolute;
  margin-left: .35rem;                       /* Dreieck optisch mittig */
  border-style: solid;
  border-width: .85rem 0 .85rem 1.45rem;
  border-color: transparent transparent transparent #fff;
}
.video-start:hover::before, .video-start:focus-visible::before { border-color: #fff; background: rgba(10, 12, 16, .75); }

.video-fallback { padding: 1.6rem 1.7rem; border: 1px solid rgba(255, 255, 255, .22); }
.video-fallback .label { margin-bottom: .6rem; }
.video-fallback p { font-size: .98rem; }
.video-fallback .btn { margin-top: 1.1rem; }

/* Schnellkontakt-Leiste am rechten Rand */
.quick-contact {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90;
  display: grid;
  border: 1px solid var(--line); border-right: 0; background: var(--surface);
}
.quick-contact a {
  display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
  color: var(--ink); border-bottom: 1px solid var(--line);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.quick-contact a:last-child { border-bottom: 0; }
.quick-contact a:hover { background: var(--carbon); color: #fff; }
.quick-contact svg { width: 1.15rem; height: 1.15rem; }
/* Tablet: dieselbe Leiste am Rand, Felder 44 px fuer den Finger. */
@media (max-width: 1100px) {
  .quick-contact a { width: 2.75rem; height: 2.75rem; }
  .quick-contact svg { width: 1.1rem; height: 1.1rem; }
}
/* Handy: eigene Leiste unten mit Beschriftung, verdeckt so keinen Text.
   Die sonst versteckten Texte werden hier zur sichtbaren Beschriftung. */
@media (max-width: 760px) {
  .quick-contact {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    grid-template-columns: repeat(4, 1fr);
    border: 0; border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .quick-contact a {
    width: auto; height: 3.6rem; gap: .2rem;
    align-content: center; border-bottom: 0; border-right: 1px solid var(--line);
    text-decoration: none;
  }
  .quick-contact svg { order: -1; }   /* Symbol ueber der Beschriftung */
  .quick-contact a:last-child { border-right: 0; }
  .quick-contact .sr-only {
    position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible;
    font-size: .7rem; font-weight: 600; letter-spacing: .04em; line-height: 1;
  }
  body { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom)); }
}
body.menu-open .quick-contact { display: none; }

/* Google-Bewertungen */
/* Gesamtnote: zwei Sternreihen uebereinander, die obere wird auf den
   erreichten Anteil beschnitten - so entsteht der halbe Stern. */
.rating { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: .9rem 0 0; }
.rating-value { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.rating-stars { position: relative; display: inline-block; line-height: 1; font-size: 1.15rem; letter-spacing: .08em; }
.rating-stars-base { color: var(--line-strong); }
.rating-stars-fill {
  position: absolute; inset: 0; width: var(--fill, 100%);
  overflow: hidden; white-space: nowrap; color: var(--accent);
}
.rating-count { font-size: .95rem; color: var(--muted); }
.rating-sm { margin-top: .7rem; }
.rating-sm .rating-value { font-size: 1.2rem; }
.rating-sm .rating-stars { font-size: 1rem; }

.reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.reviews-single { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }
.review {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.6rem 1.7rem; border: 1px solid var(--line); background: var(--surface);
}
.review-stars { margin: 0; font-size: 1rem; letter-spacing: .12em; color: var(--accent); }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; color: var(--ink-2); }
.review-author { margin: 0; margin-top: auto; padding-top: .4rem; font-weight: 600; }
.review-author span { font-weight: 400; color: var(--muted); }
@media (max-width: 760px) {
  .reviews { grid-template-columns: 1fr; }
}

/* Bewertungen als Slideshow: seitlich wischen, Pfeile, automatisch weiter */
.review-track {
  display: flex; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.review-track::-webkit-scrollbar { display: none; }
.review-track:focus-visible { outline-offset: 4px; }
.review-track > .review { flex: 0 0 calc((100% - 2 * 1.25rem) / 3); scroll-snap-align: start; }
@media (max-width: 1000px) { .review-track > .review { flex-basis: calc((100% - 1.25rem) / 2); } }
@media (max-width: 640px)  { .review-track > .review { flex-basis: 100%; } }
.slider-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
.slider-btn {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
}
.slider-btn:hover { border-color: var(--ink); }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-btn .arrow { width: 16px; height: 16px; }
.slider-prev .arrow { transform: scaleX(-1); }

/* Rechtstexte */
.legal { max-width: 52rem; }
.legal h2 { margin: 3rem 0 .9rem; font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); font-weight: 400; }
.legal h3 { margin: 1.9rem 0 .5rem; font-size: 1.1rem; font-weight: 600; }
.legal address { margin-bottom: 1em; font-style: normal; color: var(--ink-2); }
.meta-note { color: var(--muted); font-size: .95rem; }
.todo {
  display: inline-block; padding: .1rem .5rem;
  background: var(--accent-soft); border: 1px dashed #c8a24a;
  font-family: ui-monospace, Consolas, monospace; font-size: .85em; color: #6b4a06;
}

/* --- Fußbereich: dunkles Band, reine Textlinks ---------------------------- */
.site-footer { padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; background: var(--carbon); color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 2.5rem 1.5rem; }
.footer-grid h2 { margin-bottom: 1rem; font-size: 1rem; font-weight: 400; color: #fff; }
.footer-grid p, .footer-grid li { font-size: .98rem; color: var(--on-dark-muted); }
.footer-grid li + li { margin-top: .625rem; }
.footer-grid a { color: #fff; text-decoration: none; }
.footer-grid a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-grid .brand { margin-bottom: 1rem; color: #fff; }
.footer-grid .brand-top { color: var(--on-dark-muted); }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: .9rem; color: var(--on-dark-muted);
}
.footer-bottom a { color: var(--on-dark-muted); text-decoration: none; display: inline-block; padding-block: .35rem; }
.footer-bottom a:hover { color: #fff; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }

/* --- Fehlerseite ---------------------------------------------------------- */
.error-page { display: flex; align-items: center; min-height: calc(100svh - var(--header-h)); background: var(--carbon); color: #fff; }

/* --- Klickbares Fahrzeug: Einstieg in die Leistungen ueber das Bauteil ----- */
/* Das Fahrzeug traegt den Abschnitt, deshalb darf es breiter sein als die
   Textspalte daneben - und der Abschnitt selbst etwas ueber das uebliche
   Mass hinausgehen. */
.car-picker > .wrap { max-width: 1340px; }

.car-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}

.car-stage { position: relative; width: 100%; max-width: 960px; margin-inline: auto; }

/* Der ganze Block - Fahrzeug und Panel - rueckt um 2 cm nach rechts. Als
   Einrueckung, nicht als Verschiebung: verschoben wuerde er rechts aus dem
   Fenster laufen. Nur im zweispaltigen Aufbau. */
@media (min-width: 901px) {
  .car-picker-grid { margin-left: 2cm; width: calc(100% - 2cm); }
}
.car-stage-img { display: block; width: 100%; height: auto; }

/* Die Punkte am Fahrzeug - im Gelb der Hauptaktion.
   Trefferflaeche und sichtbarer Punkt sind getrennt: Der Knopf selbst ist
   gross genug zum Antippen, zu sehen ist nur die kleine Scheibe darin.
   Sonst verdecken die Punkte auf dem Handy das halbe Fahrzeug. */
.car-spot {
  --spot-treffer: 2.5rem;
  --spot-sicht: 1.75rem;
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--spot-treffer); height: var(--spot-treffer);
  margin: calc(var(--spot-treffer) / -2) 0 0 calc(var(--spot-treffer) / -2);
  padding: 0;
  display: grid; place-items: center;
  border: 0; background: none;
  cursor: pointer;
}

/* Die sichtbare Scheibe */
.car-spot::before {
  content: "";
  width: var(--spot-sicht); height: var(--spot-sicht);
  border: 2px solid var(--accent); border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 32%, rgba(18, 15, 5, .94));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent);
  transition: transform .18s var(--ease), background-color .18s var(--ease);
}

/* Der Kern */
.car-spot::after {
  content: "";
  position: absolute;
  width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--accent);
}

.car-spot:hover::before, .car-spot:focus-visible::before {
  transform: scale(1.16);
  background: color-mix(in srgb, var(--accent) 72%, rgba(18, 15, 5, .9));
}
.car-spot[aria-expanded="true"]::before {
  transform: scale(1.16);
  background: var(--accent);
}
/* Auf Gelb braucht der Kern eine dunkle Farbe, sonst verschwindet er */
.car-spot[aria-expanded="true"]::after { background: var(--accent-ink); }

/* Die Panele daneben */
.car-panel { padding: 1.5rem 1.6rem; border: 1px solid var(--line); background: var(--surface); }
.car-panel .label { margin-bottom: .55rem; }
.car-panel h3 { margin-bottom: .6rem; }
.car-panel > p { margin: 0 0 1.1rem; color: var(--ink-2); }
.car-panel-links { margin: 0; padding: 0; list-style: none; }
.car-panel-links li + li { border-top: 1px solid var(--line); }
.car-panel-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
.car-panel-links a:hover { color: var(--brand); }
.car-panel-links a:hover .arrow { transform: translateX(4px); }

@media (max-width: 900px) {
  .car-picker-grid { grid-template-columns: 1fr; }
  /* Groessere Trefferflaeche fuer den Finger, sichtbar aber kleiner */
  .car-spot { --spot-treffer: 2.75rem; --spot-sicht: 1.35rem; }
}

/* Ohne JavaScript bleiben alle Panele sichtbar - die Links funktionieren dann
   trotzdem, nur eben als einfache Liste untereinander. */
.car-panels > .car-panel + .car-panel { margin-top: 1rem; }
.js-ready .car-panels > .car-panel + .car-panel { margin-top: 0; }

/* Alle Panele liegen in derselben Zelle uebereinander. So ist die Spalte
   immer so hoch wie das laengste Panel, und das Fahrzeug daneben springt
   beim Wechsel nicht hoch und runter. Versteckte Panele behalten ihren
   Platz, sind aber unsichtbar. */
.js-ready .car-panels { display: grid; }
.js-ready .car-panels > .car-panel { grid-area: 1 / 1; align-self: center; }
.js-ready .car-panels > .car-panel[hidden] { display: block !important; visibility: hidden; }
@media (max-width: 900px) {
  .js-ready .car-panels > .car-panel { align-self: start; }
}

/* Ladeanimation: Neon-Kontur des Autos, Farbe faehrt von links ein, ein
   Lichtstrahl laeuft darueber. Die Seite dahinter liegt verschwommen darunter.
   Die Animation startet erst per JavaScript (.is-running), wenn Bild und Maske
   geladen sind - die Laufzeit setzt main.js ueber --loader-dauer. */
.page-loader {
  --loader-dauer: 500ms;
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  /* Notbremse ohne JavaScript: nach 4 s verschwindet der Loader von selbst */
  animation: loader-notaus 0s linear 4s forwards;
}
.page-loader.js-gesteuert { animation: none; }
.page-loader.is-done {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
@keyframes loader-notaus { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.page-loader-car {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px)); aspect-ratio: 680 / 258;
}
.page-loader-car > * { position: absolute; inset: 0; }
.page-loader-neon,
.page-loader-beam {
  -webkit-mask: url(../img/loader/car-mask.webp) center / 100% 100% no-repeat;
  mask: url(../img/loader/car-mask.webp) center / 100% 100% no-repeat;
}
.page-loader-neon {
  background: #2b9bff; opacity: .75;
  filter: drop-shadow(0 0 4px rgba(43, 155, 255, .95)) drop-shadow(0 0 12px rgba(43, 155, 255, .8)) drop-shadow(0 0 28px rgba(43, 155, 255, .5));
}
.page-loader-color {
  background: url(../img/loader/car.webp) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
}
.page-loader-beam {
  overflow: hidden;
  filter: drop-shadow(0 0 5px rgba(20, 60, 190, .95)) drop-shadow(0 0 14px rgba(16, 48, 160, .6));
}
.page-loader-beam > span {
  position: absolute; top: -20%; left: 0; width: 26%; height: 140%;
  background: linear-gradient(100deg, rgba(10, 40, 110, 0) 0%, rgba(16, 58, 150, .55) 55%, #1a4fd0 80%, rgba(26, 79, 208, 0) 100%);
  transform: translateX(-100%);
}
.page-loader.is-running .page-loader-color { animation: loader-farbe var(--loader-dauer) linear forwards; }
.page-loader.is-running .page-loader-beam > span { animation: loader-strahl var(--loader-dauer) linear forwards; }
@keyframes loader-farbe { 0%, 4% { clip-path: inset(0 100% 0 0); } 84%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes loader-strahl { from { transform: translateX(-100%); } to { transform: translateX(385%); } }

/* Wer reduzierte Bewegung eingestellt hat, bekommt keinen Loader */
@media (prefers-reduced-motion: reduce) {
  .page-loader { display: none; }
}

/* LED-Licht wie auf der Folierungsseite, dort blau, hier im Holhut-Gelb.
   body.studio ist ausgenommen: studio.css setzt dort das blaue Licht. */
body:not(.studio) {
  --led-gelb: #ffc000;
  --led-gelb-glow: rgba(255, 192, 0, .9);
}
body:not(.studio) .site-header {
  box-shadow: 0 1px 0 rgba(255, 192, 0, .35), 0 10px 30px -18px var(--led-gelb-glow);
}
body:not(.studio) .nav-links a:hover,
body:not(.studio) .nav-links a[aria-current="page"] { border-bottom-color: var(--led-gelb); }
body:not(.studio) .eyebrow::before { background: linear-gradient(90deg, transparent, var(--led-gelb)); }

/* Leistungs-Kaesten: leuchtende Kante links */
body:not(.studio) .svc { position: relative; }
body:not(.studio) .svc::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--led-gelb) 22%, var(--led-gelb) 78%, transparent);
  box-shadow: 0 0 14px 1px rgba(255, 192, 0, .7);
}

body:not(.studio) .site-footer { box-shadow: inset 0 1px 0 rgba(255, 192, 0, .3); }

/* Faktenleiste im Kopf der Startseite: leuchtendes Quadrat vor dem Label */
.hero-facts .label::before {
  content: ""; display: inline-block;
  width: .4rem; height: .4rem; margin-right: .6rem;
  background: var(--led-gelb, #ffc000);
  box-shadow: 0 0 8px var(--led-gelb, #ffc000);
  vertical-align: middle;
}

/* --- Mehr gelbes LED-Licht (Gegenstueck zum blauen Studio-Theme) ----------
   Leuchtkanten und Glows gelten hell wie dunkel. Gelbe Schrift nur auf
   dunklem Grund - auf Weiss waere #ffc000 kaum zu lesen. */

/* Kaesten: Leuchtkante links wie an den Leistungs-Kaesten */
body:not(.studio) :is(.card, .contact-card, .date, .stat, .timeline li, .hours-panel, .car-panel) { position: relative; }
body:not(.studio) :is(.card, .contact-card, .date, .stat, .timeline li, .hours-panel, .car-panel)::before {
  content: "";
  position: absolute; left: -1px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, transparent, var(--led-gelb) 22%, var(--led-gelb) 78%, transparent);
  box-shadow: 0 0 12px 1px rgba(255, 192, 0, .55);
  pointer-events: none;
}

/* Kacheln: Lichtkante oben, beim Darueberfahren leuchtet der Rahmen */
body:not(.studio) .tile { position: relative; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
body:not(.studio) .tile::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 2px; z-index: 1;
  background: linear-gradient(90deg, transparent, var(--led-gelb) 25%, var(--led-gelb) 75%, transparent);
  box-shadow: 0 0 12px 1px rgba(255, 192, 0, .5);
  opacity: .55; transition: opacity .18s var(--ease);
  pointer-events: none;
}
body:not(.studio) .tile:hover { border-color: var(--led-gelb); box-shadow: 0 0 36px -14px var(--led-gelb-glow); }
body:not(.studio) .tile:hover::before { opacity: 1; }

/* Bewertungen: Lichtkante oben wie an den Kacheln, Rahmen leuchtet beim Darueberfahren.
   Die Slideshow scrollt seitlich und schneidet sonst den Schein oben und unten ab. */
body:not(.studio) .review { position: relative; transition: border-color .18s var(--ease), box-shadow .18s var(--ease); }
body:not(.studio) .review::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--led-gelb) 25%, var(--led-gelb) 75%, transparent);
  box-shadow: 0 0 12px 1px rgba(255, 192, 0, .5);
  opacity: .55; transition: opacity .18s var(--ease);
  pointer-events: none;
}
body:not(.studio) .review:hover { border-color: var(--led-gelb); box-shadow: 0 0 36px -14px var(--led-gelb-glow); }
body:not(.studio) .review:hover::before { opacity: 1; }
body:not(.studio) .review-stars { text-shadow: 0 0 10px rgba(255, 192, 0, .55); }
body:not(.studio) .review-track { padding-block: 1.5rem; margin-block: -1.5rem; }

/* Markenleiste: Lichtlinie oben */
body:not(.studio) .brand-list { box-shadow: 0 -1px 0 rgba(255, 192, 0, .45), 0 -10px 26px -20px var(--led-gelb-glow); }

/* Aufzaehlungsstriche in Gelb */
body:not(.studio) .bullets li::before { background: var(--led-gelb); box-shadow: 0 0 6px rgba(255, 192, 0, .7); }

/* Buttons: Hauptaktion mit Schein, Umriss-Buttons leuchten beim Darueberfahren */
body:not(.studio) .btn-primary {
  box-shadow: 0 0 0 1px rgba(255, 192, 0, .3), 0 10px 32px -14px var(--led-gelb-glow);
}
body:not(.studio) .btn-outline { transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }
body:not(.studio) .btn-outline:hover {
  border-color: var(--led-gelb);
  background: rgba(255, 192, 0, .08);
  box-shadow: 0 0 22px -8px var(--led-gelb);
}

/* Seitenkopf der Unterseiten: gelber Lichtschein im Hintergrund */
body:not(.studio) .page-hero {
  background:
    radial-gradient(80% 110% at 78% 35%, rgba(255, 192, 0, .12), transparent 62%),
    var(--carbon);
  box-shadow: inset 0 -1px 0 rgba(255, 192, 0, .3);
}

/* Video im gelben Licht */
body:not(.studio) .video-player {
  border: 1px solid rgba(255, 192, 0, .25);
  box-shadow: 0 0 0 1px rgba(255, 192, 0, .08), 0 0 44px -16px var(--led-gelb-glow);
}
body:not(.studio) .video-sound:hover { box-shadow: 0 0 20px -8px var(--led-gelb); border-color: var(--led-gelb); }

/* Schnellkontakt am Rand */
body:not(.studio) .quick-contact a:hover { background: var(--led-gelb); color: var(--accent-ink); }
@media (max-width: 760px) {
  body:not(.studio) .quick-contact { box-shadow: 0 -1px 0 rgba(255, 192, 0, .45), 0 -10px 26px -20px var(--led-gelb-glow); }
}

/* Fuss (immer dunkel): Ueberschriften in Gelb */
body:not(.studio) .footer-grid h2 { color: var(--led-gelb); }

/* Gelbe Schrift nur auf dunklem Grund */
body:not(.studio) :is(.hero, .page-hero, .is-dark, .is-carbon) .eyebrow,
body:not(.studio) .hero-facts .label,
body:not(.studio) .hours-panel .label,
body:not(.studio) .is-dark .checklist li::before { color: var(--led-gelb); }
body:not(.studio) :is(.is-dark, .is-carbon) .eyebrow::before { background: linear-gradient(90deg, transparent, var(--led-gelb)); }

body:not(.studio) .brand-top,
body:not(.studio) .eyebrow,
body:not(.studio) .checklist li::before,
body:not(.studio) .year,
body:not(.studio) .tile .label { color: var(--led-gelb); }
body:not(.studio) .mobile-menu-links a:hover { color: var(--led-gelb); }

/* --- Animationen -------------------------------------------------------- */
/* Die Bewegungen steuert GSAP in main.js. Hier stehen nur Hilfen dafuer.
   Die Klasse .anim setzt main.js nur, wenn GSAP geladen ist und keine
   reduzierte Bewegung gewuenscht ist. */

/* Ueberschrift im Kopf: jede Zeile steigt aus einer eigenen Maske auf.
   Das Polster unten verhindert abgeschnittene Unterlaengen (g, p). */
.anim h1 .zeile { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.anim h1 .zeile > span { display: inline-block; }

/* Hochzaehlende Zahlen springen nicht in der Breite */
.stat-value .zahl { display: inline-block; font-variant-numeric: tabular-nums; text-align: right; }

/* Kacheln: Bild zoomt beim Darueberfahren leicht hinein */
.tile-media img { transition: transform .6s var(--ease); }
.tile:hover .tile-media img { transform: scale(1.05); }

/* Punkte am Fahrzeug: ruhiger Puls-Ring als Einladung zum Antippen.
   Laeuft nur, solange das Auto im Bild ist (.im-bild) - ein Schatten-Puls
   muss in jedem Bild neu gemalt werden. */
.anim .im-bild .car-spot:not([aria-expanded="true"])::before { animation: spot-puls 2.6s var(--ease) infinite; }
.anim .car-spot:hover::before, .anim .car-spot:focus-visible::before { animation: none; }
@keyframes spot-puls {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 34%, transparent), 0 0 0 14px transparent; }
}