/* ============================================================
   Auto Scharrer — KFZ-Meisterbetrieb Kirchensittenbach
   Konzept „Scheinwerfer an": dunkle Werkstatt, warmes Licht
   ============================================================ */

:root {
  --night: #0D1119;          /* tiefes Anthrazit-Blau, Grundton */
  --coal:  #111623;          /* Sektionswechsel dunkel */
  --panel: #161D29;          /* Karten */
  --panel-2: #1C2434;
  --line:  rgba(233, 237, 245, .09);
  --navy:  #193762;          /* Markenfarbe — exakt aus dem Original-Logo */
  --navy-soft: #2B4F8A;
  --blue:  #6C9BE8;          /* Links / kühle Akzente auf dunkel */
  --amber: #5B8DEF;          /* Akzent — Logo-Blau (dunkler Modus: hell) */
  --amber-deep: #2B57A8;
  --glow:  #A9C6F5;          /* Licht-Blau für Verläufe/Zahlen */
  --text:  #E9EDF5;
  --muted: #9AA6B8;
  --paper: #EEF2F9;          /* helle Sektion — kühles Blauweiß */
  --paper-2: #DCE5F2;
  --ink:   #122240;
  --ink-muted: #47546E;
  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, .8, .3, 1);
  --radius: 18px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
html.no-motion { scroll-behavior: auto; }
html.fs-2 { font-size: 112.5%; }
html.fs-3 { font-size: 127%; }

body {
  font-family: var(--font-body);
  background: var(--night);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--navy); color: #fff; }

img { max-width: 100%; display: block; }
a { color: var(--blue); }
button { cursor: pointer; font: inherit; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.06; letter-spacing: -.01em; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 300;
  background: var(--navy); color: #fff; font-weight: 700;
  padding: .8rem 1.2rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

.tts-highlight { background: var(--navy) !important; color: #fff !important; box-shadow: 0 0 0 6px var(--navy); border-radius: 4px; }

.container { width: min(1200px, 92vw); margin-inline: auto; }

/* ---------- Betriebsurlaub-Hinweis ---------- */
.notice {
  position: relative; z-index: 90;
  background: linear-gradient(90deg, var(--navy), var(--navy-soft));
  color: #fff; font-size: .9rem;
  padding: .55rem 3rem .55rem 1rem; text-align: center;
}
.notice strong { color: var(--glow); }
.notice__close {
  position: absolute; right: .6rem; top: 50%; translate: 0 -50%;
  background: none; border: 0; color: #fff; font-size: 1.2rem; line-height: 1;
  padding: .3rem .5rem; opacity: .8;
}
.notice__close:hover { opacity: 1; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background .35s, box-shadow .35s, translate .35s;
}
body.has-notice .site-header { position: sticky; }
.site-header.scrolled {
  background: rgba(10, 13, 19, .88);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(0, 0, 0, .8);
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .8rem 0;
}
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; color: #fff; }
/* Original-Logo: oben so groß wie auf der Altsite (270 × 120 px),
   beim Scrollen kompakter */
.brand svg, .brand img { height: 120px; width: auto; transition: height .35s var(--ease); }
.site-header.scrolled .brand svg { height: 72px; }

/* Hell/Dunkel-Umschalter */
.theme-btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid var(--line); background: transparent; color: var(--text);
  display: grid; place-items: center;
  transition: border-color .3s, color .3s, transform .3s var(--ease);
}
.theme-btn:hover { border-color: var(--amber); color: var(--amber); transform: rotate(15deg); }
.theme-btn .icon-sun { display: block; }
.theme-btn .icon-moon { display: none; }
html.theme-light .theme-btn .icon-sun { display: none; }
html.theme-light .theme-btn .icon-moon { display: block; }
.main-nav { display: flex; align-items: center; gap: 1.7rem; }
.main-nav a:not(.btn) {
  color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem;
  position: relative; padding: .3rem 0;
}
.main-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: var(--amber); transition: right .3s var(--ease);
}
.main-nav a:not(.btn):hover::after, .main-nav a:not(.btn):focus-visible::after { right: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-weight: 700; text-decoration: none; border: 0; border-radius: 999px;
  padding: .95rem 1.9rem; font-size: 1rem; line-height: 1;
  white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s;
  will-change: transform;
}
/* Primär-Button: auf dunklem Grund weiß mit Navy-Schrift,
   im hellen Modus Navy mit weißer Schrift (Logo-Farbwelt) */
.btn--amber {
  background: linear-gradient(180deg, #FFFFFF, #D9E4F6);
  color: var(--navy);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .55);
}
.btn--amber:hover { box-shadow: 0 16px 44px -12px rgba(91, 141, 239, .6); }
html.theme-light .btn--amber {
  background: linear-gradient(180deg, #2B4F8A, #193762);
  color: #fff;
  box-shadow: 0 12px 34px -12px rgba(25, 55, 98, .55);
}
html.theme-light .btn--amber:hover { box-shadow: 0 16px 44px -12px rgba(25, 55, 98, .75); }
/* Kontaktbereich ist in beiden Modi hell → Buttons immer Logo-Blau */
#kontakt .btn--amber {
  background: linear-gradient(180deg, #2B4F8A, var(--navy));
  color: #fff;
  box-shadow: 0 12px 34px -12px rgba(25, 55, 98, .55);
}
.btn--ghost {
  background: transparent; color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--amber); color: var(--glow); }
.btn--small { padding: .7rem 1.5rem; font-size: .9rem; }

.header-mobile-actions { display: none; align-items: center; gap: .4rem; }
.theme-btn--mobile { display: none; }
.nav-toggle {
  display: none; background: none; border: 0; color: var(--text);
  width: 46px; height: 46px; border-radius: 12px;
}
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: currentColor;
  margin: 5px auto; transition: transform .3s var(--ease), opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(10, 13, 19, .97); backdrop-filter: blur(10px);
  display: grid; place-items: center; text-align: center;
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.mobile-menu.open { opacity: 1; pointer-events: auto; }
.mobile-menu nav { display: grid; gap: 1.6rem; }
.mobile-menu a {
  color: var(--text); text-decoration: none;
  font-family: var(--font-display); font-weight: 800; font-size: 2rem;
}
.mobile-menu a:hover { color: var(--amber); }

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 110;
  background: linear-gradient(90deg, var(--amber), var(--glow));
  transform-origin: 0 0; transform: scaleX(0);
}

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden; isolation: isolate;
}
.hero__scene { position: absolute; inset: 0; z-index: -1; }
.hero__bg {
  position: absolute; inset: 0;
  background: url("../assets/img/foto-hero-vw-bus.jpg") center / cover no-repeat;
  filter: brightness(.36) saturate(.9);
}
html.js body:not(.lit) .hero__bg { filter: brightness(.12) saturate(.7); }
/* Handlampe: helle Bildkopie, per radialer Maske nur um den Zeiger sichtbar.
   --tx/--ty werden per JS gesetzt (Zeigerposition in Prozent). */
.hero__torch {
  position: absolute; inset: 0;
  background: url("../assets/img/foto-hero-vw-bus.jpg") center / cover no-repeat;
  filter: brightness(1.05) saturate(1.1);
  --tx: 68%; --ty: 55%; --tr: 300px;
  -webkit-mask-image: radial-gradient(circle var(--tr) at var(--tx) var(--ty), #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.35) 62%, transparent 100%);
  mask-image: radial-gradient(circle var(--tr) at var(--tx) var(--ty), #000 0%, rgba(0,0,0,.85) 30%, rgba(0,0,0,.35) 62%, transparent 100%);
  opacity: 0; transition: opacity .8s;
}
body.lit .hero__torch { opacity: 1; }
html.no-motion .hero__torch { opacity: 0 !important; }
html.no-motion .hero__bg { filter: brightness(.58) saturate(1); }
/* ===== Heller Modus: weißer Hero (Wiedererkennung zur Altsite) =====
   Text links auf Weiß in Logo-Blau, Werkstattfoto mit Auto rechts,
   weich ins Weiß auslaufend. Die Szene (Foto, Lampe, Kegel) rückt dafür
   in die rechte Hälfte; das JS rechnet mit der Box des Fotos. */
html.theme-light .hero { background: #fff; }
html.theme-light body.lit .hero__bg { filter: none; }
html.theme-light.no-motion .hero__bg { filter: none; }
html.theme-light .hero__torch { filter: brightness(1.07) contrast(1.05) saturate(1.12); }
html.theme-light .hero__scene {
  left: 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 13%, #000 30%), linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 13%, #000 30%), linear-gradient(180deg, #000 0%, #000 78%, transparent 100%);
  mask-composite: intersect;
}
/* Ausschnitt startet knapp links vom VW-Bus, damit er voll im Bild steht */
html.theme-light .hero__bg, html.theme-light .hero__torch { background-position: 6% 40%; }
/* Dunkler Modus (Desktop): Foto ebenfalls rechts neben dem Text, damit der
   Bus nicht hinter der Überschrift liegt; läuft links ins Dunkle aus */
@media (min-width: 901px) {
  html:not(.theme-light) .hero__scene {
    left: 46%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 13%, #000 30%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 13%, #000 30%);
  }
  html:not(.theme-light) .hero__bg, html:not(.theme-light) .hero__torch { background-position: 6% 40%; }
}
html.theme-light .hero__vignette { background: linear-gradient(180deg, transparent 82%, var(--night) 100%); }
html.theme-light .hero__eyebrow { color: var(--navy-soft); }
html.theme-light .hero__title { color: var(--navy); text-shadow: none; }
html.theme-light .hero__title em { color: #2F63B8; text-shadow: none; }
html.theme-light .hero__lead { color: #2A3444; }
html.theme-light .hero__lead strong { color: var(--ink); }
html.theme-light .hero__trust { color: #4A5568; }
html.theme-light .hero .hero__cta .btn--ghost {
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(19, 26, 36, .35);
}
html.theme-light .hero .hero__cta .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--amber-deep); color: var(--amber-deep); }
/* Warmer Lampenschein über dem Torch-Ausschnitt */
.hero__torch::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle calc(var(--tr) * 1.1) at var(--tx) var(--ty), rgba(205, 222, 255, .20), transparent 70%);
  mix-blend-mode: screen;
}
/* Lichtkegel: wird per JS exakt an den Scheinwerfern im Bild verankert
   (left/top), zeigt mit leichter Neigung nach links unten */
/* Lichtkegel und Staub sind aus: sie waren auf die Scheinwerfer des
   früheren KI-Bildes ausgerichtet, das echte Werkstattfoto hat keine */
.hero__light { display: none !important; }
.hero__light {
  position: absolute; left: 63%; top: 58%;
  width: 130vmax; height: 74vmax;
  transform: translate(-100%, -50%) rotate(-4deg);
  transform-origin: 100% 50%;
  opacity: 0; pointer-events: none;
  background:
    /* kühles LED-Weiß statt Halogen-Gelb — passt zur Blau/Weiß-Markenwelt */
    radial-gradient(16vmax 9vmax at 100% 50%, rgba(235, 242, 255, .72), transparent 70%),
    conic-gradient(from 253deg at 100% 46.5%, transparent 0deg, rgba(215, 230, 255, .46) 9deg, rgba(215, 230, 255, .40) 17deg, rgba(215, 230, 255, .08) 26deg, transparent 32deg),
    conic-gradient(from 251deg at 100% 53.5%, transparent 0deg, rgba(200, 220, 255, .36) 8deg, rgba(200, 220, 255, .30) 16deg, rgba(200, 220, 255, .06) 24deg, transparent 30deg),
    radial-gradient(46% 14% at 72% 72%, rgba(190, 212, 255, .14), transparent 70%);
  mix-blend-mode: screen; filter: blur(6px);
}
html:not(.js) .hero__light, html.no-motion .hero__light { opacity: 1; }
.hero__dust {
  position: absolute; inset: 0; opacity: .75;
  background-image:
    radial-gradient(1.5px 1.5px at 22% 40%, rgba(225, 235, 255, .8), transparent 100%),
    radial-gradient(1px 1px at 34% 60%, rgba(225, 235, 255, .6), transparent 100%),
    radial-gradient(2px 2px at 45% 52%, rgba(225, 235, 255, .5), transparent 100%),
    radial-gradient(1px 1px at 12% 55%, rgba(225, 235, 255, .55), transparent 100%),
    radial-gradient(1.5px 1.5px at 55% 44%, rgba(225, 235, 255, .45), transparent 100%),
    radial-gradient(1px 1px at 28% 48%, rgba(225, 235, 255, .7), transparent 100%);
  background-size: 900px 600px;
  mask-image: radial-gradient(60% 46% at 78% 50%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(60% 46% at 78% 50%, #000 25%, transparent 72%);
  animation: dust-drift 26s linear infinite;
}
html.no-motion .hero__dust { animation: none; opacity: .4; }
@keyframes dust-drift {
  from { background-position: 0 0; }
  to   { background-position: -900px 40px; }
}
.hero__vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10, 13, 19, .62) 0%, rgba(10, 13, 19, .28) 38%, transparent 60%),
    linear-gradient(180deg, rgba(10, 13, 19, .5) 0%, transparent 28%, transparent 62%, var(--night) 100%);
}

.hero__inner { position: relative; z-index: 1; padding: 9rem 0 4rem; max-width: 720px; }
/* Hero liegt immer auf dem dunklen Foto — Akzente hier fest hellblau */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .85rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: #B9CFF7; margin-bottom: 1.4rem;
}
.hero__title {
  font-size: clamp(2.6rem, 7vw, 4.9rem); font-weight: 860; color: #fff;
  text-wrap: balance;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .line > span { display: inline-block; }
.hero__title em {
  font-style: normal; color: #8FB4F2;
  text-shadow: 0 0 34px rgba(91, 141, 239, .5);
}
/* Hero liegt immer auf dem dunklen Foto — Farben fest, unabhängig vom Theme */
.hero__lead {
  margin: 1.5rem 0 2.2rem; max-width: 54ch;
  font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: #9AA6B8;
}
.hero__lead strong { color: #E9EDF5; }
.hero .btn--ghost { color: #E9EDF5; box-shadow: inset 0 0 0 1.5px rgba(233, 237, 245, .25); }
.hero .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #7FA8EF; color: #C7D8F8; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.hero__trust {
  display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 2.6rem;
  font-size: .92rem; color: #9AA6B8;
}
.hero__trust span { display: inline-flex; align-items: center; gap: .5rem; }
.hero__trust .stars { color: #F5B301; letter-spacing: .1em; }
.hero__scroll {
  position: absolute; bottom: 1.6rem; left: 50%; translate: -50% 0; z-index: 1;
  color: #9AA6B8; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  display: grid; justify-items: center; gap: .4rem; text-decoration: none;
}
.hero__scroll::after {
  content: ""; width: 1.5px; height: 34px;
  background: linear-gradient(180deg, var(--amber), transparent);
  animation: scroll-pulse 2s var(--ease) infinite;
}
html.no-motion .hero__scroll::after { animation: none; }
@keyframes scroll-pulse { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Armaturenbrett (Cockpit-Konsole) ----------
   Desktop: Hochformat-Konsole am rechten Rand der Hero-Sektion.
   Kleine/flache Screens: Quer-Karte, die von unten in den Hero ragt.
   Bleibt in beiden Themes ein dunkles Cockpit. */
.dash {
  position: relative; z-index: 6;
  margin-top: -84px;
}
@media (min-width: 901px) and (min-height: 700px) {
  .dash {
    /* fixiert: bleibt beim Scrollen dauerhaft am rechten Rand sichtbar */
    position: fixed;
    top: 50svh; right: clamp(.8rem, 2.5vw, 2.6rem);
    transform: translateY(-50%);
    margin: 0; z-index: 90;
  }
  .dash .dash__inner {
    width: auto; margin: 0;
    flex-direction: column; gap: clamp(.6rem, 1.1vh, 1.2rem);
    padding: clamp(.9rem, 1.6vh, 1.7rem) clamp(.6rem, 1.4vh, 1.5rem);
    border-radius: 26px;
  }
  .dash .dash__hint { display: none; }
  .dash .dash__lights { flex-direction: column; gap: clamp(.02rem, .3vh, .35rem); }
  .dash .dash-light {
    padding: clamp(.3rem, .6vh, .7rem) clamp(.5rem, 1vh, 1.1rem);
    gap: clamp(.2rem, .45vh, .5rem);
  }
  .dash .dash-light svg { width: clamp(26px, 4.2vh, 44px); height: clamp(26px, 4.2vh, 44px); }
  .dash .dash-light::after { font-size: clamp(.58rem, 1.15vh, .92rem); }
  .dash .dash__done {
    font-size: clamp(.68rem, 1vh, .92rem); max-width: 190px;
    justify-content: center; text-align: center;
    white-space: normal; line-height: 1.3;
  }
  .dash .dash__inner { transition: padding .35s var(--ease), gap .35s var(--ease), background .35s, border-radius .35s, box-shadow .35s; }
  .dash .dash-light { transition: padding .3s var(--ease), color .25s, filter .25s, transform .12s, background .25s; }
  .dash .dash-light svg { transition: width .3s var(--ease), height .3s var(--ease); }
  /* Nach dem Hero: kompakte Icon-Leiste, damit nichts den Inhalt verdeckt.
     Beim Überfahren klappt sie wieder auf. */
  .dash.dash--mini:not(:hover) .dash__inner {
    padding: .55rem .4rem; gap: .4rem;
    background: rgba(11, 15, 22, .85);
    backdrop-filter: blur(8px);
    border-radius: 18px;
  }
  .dash.dash--mini:not(:hover) .dash-light { padding: .32rem .38rem; gap: 0; }
  .dash.dash--mini:not(:hover) .dash-light svg { width: 21px; height: 21px; }
  .dash.dash--mini:not(:hover) .dash-light::after { display: none; }
  .dash.dash--mini:not(:hover) .dash__done { display: none; }
}
.dash__inner {
  background: linear-gradient(180deg, #131824, #0B0F16);
  border: 1px solid rgba(233, 237, 245, .11);
  border-radius: 22px;
  box-shadow: 0 34px 70px -32px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(233, 237, 245, .07);
  padding: 1.15rem 1.7rem;
  display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap;
}
.dash__hint {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #5A6577; max-width: 90px; line-height: 1.45;
}
.dash__lights {
  display: flex; flex: 1; justify-content: space-around; flex-wrap: wrap;
  gap: .2rem;
}
.dash-light {
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  padding: .5rem .55rem; border-radius: 12px;
  color: #333C4E; text-decoration: none;
  transition: color .25s, filter .25s, transform .12s, background .25s;
}
.dash-light svg { width: 27px; height: 27px; }
.dash-light::after {
  content: attr(data-label);
  font-size: .68rem; font-weight: 600; letter-spacing: .02em;
  color: #5A6577; white-space: nowrap;
  transition: color .25s;
}
/* Kontrollleuchten bleiben bewusst Amber — echte Warnlicht-Farbe */
.dash-light.is-on,
.dash-light:hover, .dash-light:focus-visible {
  color: #FFB020;
  filter: drop-shadow(0 0 9px rgba(255, 173, 51, .8));
}
.dash-light:hover, .dash-light:focus-visible { background: rgba(255, 173, 51, .07); }
.dash-light.is-on::after,
.dash-light:hover::after, .dash-light:focus-visible::after { color: #C8D2E2; }
.dash-light:active { transform: scale(.93); }
.dash__done {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .85rem; font-weight: 600; color: #3EBE68;
  opacity: 0; transition: opacity .6s;
}
.dash--done .dash__done { opacity: 1; }
html:not(.js) .dash__done { opacity: 1; }
@media (max-width: 900px) {
  .dash__hint { display: none; }
  .dash__inner { justify-content: center; padding: .9rem 1rem; }
  .dash__done { width: 100%; justify-content: center; }
}
/* Quer-Karten-Variante (Mobil/Tablet/flache Fenster): Hero unten wieder
   mehr Luft, damit die Karte nicht an der Trust-Zeile klebt */
@media (max-width: 900px), (max-height: 699px) {
  .hero__inner { padding-bottom: 6.5rem; }
  #leistungen { padding-top: clamp(3.4rem, 7vw, 5rem); }
}
/* Mobil: Inhalt oben verankern statt zentrieren — sonst entsteht auf hohen
   Displays ein großes Loch zwischen Header und Headline. Die freie untere
   Hero-Hälfte gehört dann dem Auto mit den Scheinwerfern. */
@media (max-width: 900px) {
  .hero {
    align-items: flex-start;
    /* Höhe folgt dem Inhalt statt der Displayhöhe — auf hohen Displays
       entstand sonst ein zu großer Leerraum vor der Konsole */
    min-height: 0;
  }
  .hero__inner {
    /* Header liegt fixiert über dem Hero → dessen Höhe mit einrechnen */
    padding-top: calc(150px + clamp(.75rem, 2svh, 1.5rem));
    /* fixes Bildfenster fürs Auto unter dem Text: 160px, davon
       überlappen 66–84px mit der Konsolen-Karte */
    padding-bottom: 10rem;
  }
}
/* Hochformat: Bildausschnitt aufs Auto legen (statt rechte Bildkante).
   62 % horizontal zeigt im Cover-Zuschnitt den Bereich um Auto + Scheinwerfer.
   Lampe (torch) nutzt dieselbe Position, damit beide Ebenen deckungsgleich sind;
   das JS liest die Position aus und verankert die Lichtkegel passend. */
@media (max-width: 900px) {
  .hero__bg, .hero__torch { background-position: 16% 50%; }
  /* Heller Modus mobil: Foto als Band unter dem Text, Auto mittig im Band */
  html.theme-light .hero__scene {
    left: 0; top: auto; bottom: 0; height: 250px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 86%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-over; mask-composite: add;
  }
  html.theme-light .hero__bg, html.theme-light .hero__torch { background-position: 20% 30%; }
  html.theme-light .hero__inner { padding-bottom: 15rem; }
  html.theme-light .hero__vignette { background: none; }
}
@media (max-width: 640px) {
  .dash { margin-top: -66px; }
  .dash-light::after { font-size: .6rem; }
  .dash-light svg { width: 23px; height: 23px; }
}

/* ---------- Sektionen allgemein ---------- */
section { position: relative; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }
.section__head { max-width: 640px; margin-bottom: clamp(2.4rem, 5vw, 4rem); }
html.js .reveal { opacity: 0; transform: translateY(34px); }
.section__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem;
}
.section__title { font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 820; color: #fff; text-wrap: balance; }
.section__sub { margin-top: 1.1rem; color: var(--muted); font-size: 1.05rem; }

/* ---------- Leistungen ---------- */
#leistungen { background: var(--night); padding-top: clamp(2.2rem, 4vw, 3.6rem); }
/* Desktop: Konsole liegt absolut im Hero → kein Überlapp-Puffer nötig,
   Hero darf knapper enden */
@media (min-width: 901px) and (min-height: 700px) {
  .hero { min-height: min(100svh, 880px); align-items: flex-end; }
  .hero__inner { padding-top: 10rem; padding-bottom: 3.2rem; }
}
.services {
  display: grid; gap: 1.2rem;
  grid-template-columns: repeat(12, 1fr);
}
.service {
  position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  grid-column: span 4; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate; text-decoration: none;
  scroll-margin-top: 120px;
}
/* Sprungziel aus der Konsole: Karte pulst kurz amber auf */
@keyframes target-pulse {
  0% { box-shadow: 0 0 0 3px var(--amber), 0 0 44px rgba(91, 141, 239, .5); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.service:target { animation: target-pulse 1.8s var(--ease) 1; }
.service--wide { grid-column: span 8; }
.service--tall { min-height: 420px; }
.service__img { position: absolute; inset: 0; z-index: -2; }
.service__img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62) saturate(.9); transition: transform .8s var(--ease), filter .5s; }
.service::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(190deg, transparent 30%, rgba(8, 10, 15, .92) 82%);
}
.service__scan {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(120, 165, 245, .18) 48%, rgba(120, 165, 245, .36) 50%, rgba(120, 165, 245, .18) 52%, transparent 100%);
  background-size: 100% 260%; background-position: 0 -130%;
  background-repeat: no-repeat;
  opacity: 0; transition: opacity .2s;
}
.service:hover .service__scan, .service:focus-visible .service__scan {
  opacity: 1; animation: scan 1.15s var(--ease) 1;
}
html.no-motion .service__scan { display: none; }
@keyframes scan { from { background-position: 0 -130%; } to { background-position: 0 130%; } }
.service:hover .service__img img { transform: scale(1.05); filter: brightness(.75) saturate(1); }
.service__body { position: relative; padding: 1.5rem; }
.service__icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: .9rem;
  display: grid; place-items: center;
  background: rgba(91, 141, 239, .14); color: #6FA0F0;
  border: 1px solid rgba(91, 141, 239, .35);
}
.service__icon svg { width: 24px; height: 24px; }
.service h3 { font-size: 1.28rem; font-weight: 780; color: #fff; margin-bottom: .45rem; }
/* Kacheln liegen immer auf dunklem Foto → Text in beiden Modi hell */
.service p { font-size: .93rem; color: rgba(233, 237, 245, .88); max-width: 46ch; }
.service--plain { background: linear-gradient(160deg, var(--panel), var(--panel-2)); }

/* ---------- Vertrauensband / Zahlen ---------- */
.band {
  background: var(--coal); border-block: 1px solid var(--line);
}
.band__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  padding: clamp(2.4rem, 5vw, 3.6rem) 0;
}
.band__item { text-align: center; padding: .6rem; }
.band__num {
  font-family: var(--font-display); font-weight: 860;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); color: var(--glow);
  text-shadow: 0 0 30px rgba(91, 141, 239, .3);
}
.band__label { font-size: .88rem; color: var(--muted); margin-top: .25rem; }

/* ---------- Werkstatt / Über uns ---------- */
#werkstatt { background: var(--night); overflow: hidden; }
.about { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about__media { position: relative; border-radius: var(--radius); overflow: hidden; }
.about__media::after {
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--line), inset 0 -80px 90px -60px rgba(8, 10, 15, .8);
  border-radius: var(--radius);
}
.about__media img { width: 100%; height: 100%; object-fit: cover; }
/* Foto-Collage aus echten Werkstattbildern */
.about__media--collage {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto;
  gap: .7rem; border-radius: 0; overflow: visible;
}
.about__media--collage::after { display: none; }
.about__media--collage figure {
  margin: 0; overflow: hidden; border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  position: relative;
}
.about__media--collage figure::after {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.about__media--collage .collage__main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.about__media--collage .collage__small { aspect-ratio: 4 / 3; }
/* Vier kleine Kacheln im 2-x-2-Raster unter dem großen Bild, auf allen Displays */
.about__media--collage img { transition: transform .8s var(--ease); }
.about__media--collage figure:hover img { transform: scale(1.04); }
.about__media--collage .about__badge { grid-column: 1 / -1; position: static; justify-self: start; margin-top: -.1rem; }
.about__badge {
  position: absolute; left: 1.1rem; bottom: 1.1rem; z-index: 2;
  background: rgba(10, 13, 19, .82); backdrop-filter: blur(8px);
  border: 1px solid rgba(91, 141, 239, .4); color: var(--glow);
  border-radius: 999px; padding: .5rem 1.1rem; font-size: .85rem; font-weight: 600;
}
.about__text h2 { margin-bottom: 1.2rem; }
.about__text p { color: var(--muted); margin-bottom: 1.1rem; max-width: 56ch; }
.about__text p strong { color: var(--text); }
.about__points { list-style: none; display: grid; gap: .85rem; margin-top: 1.6rem; }
.about__points li { display: flex; gap: .8rem; align-items: flex-start; color: var(--text); }
.about__points .dot {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: .15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(91, 141, 239, .14); border: 1px solid rgba(91, 141, 239, .4);
}
.about__points .dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); }
.about__points small { display: block; color: var(--muted); }

/* ---------- Bewertungen ---------- */
#bewertungen { background: var(--coal); border-block: 1px solid var(--line); }
.rating-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.rating-score {
  display: flex; align-items: center; gap: 1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.5rem;
}
.rating-score .num { font-family: var(--font-display); font-size: 2.4rem; font-weight: 860; color: var(--glow); }
.rating-score .stars { color: #F5B301; font-size: 1.15rem; letter-spacing: .12em; }
.rating-score small { display: block; color: var(--muted); }
.voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 2.4rem; }
.voice-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem;
}
.voice-card .stars { color: #F5B301; letter-spacing: .12em; }
.voice-card blockquote { color: var(--text); font-size: .98rem; }
.voice-card footer { margin-top: auto; color: var(--muted); font-size: .88rem; }
.rating-note { margin-top: 1.6rem; font-size: .85rem; color: var(--muted); }
.rating-note a { color: var(--blue); }

/* ---------- Kontakt (Tageslicht) ---------- */
#kontakt { background: var(--paper); color: var(--ink); }
#kontakt .section__title { color: var(--ink); }
#kontakt .section__sub { color: var(--ink-muted); }
.daybreak {
  height: 130px; background: linear-gradient(180deg, var(--coal), var(--paper));
  border: 0;
}
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); }
.contact-info { display: grid; gap: 1.4rem; align-content: start; }
.info-card {
  background: #fff; border-radius: var(--radius); padding: 1.5rem 1.7rem;
  box-shadow: 0 18px 44px -28px rgba(19, 26, 36, .35);
}
.info-card h3 {
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-muted); margin-bottom: .7rem; font-weight: 800;
}
.info-card p, .info-card li { color: var(--ink); }
.info-card a { color: var(--navy); font-weight: 600; }
.info-card .big { font-family: var(--font-display); font-weight: 820; font-size: 1.5rem; }
.hours { list-style: none; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed var(--paper-2); }
.hours li:last-child { border: 0; }
.map-card { position: relative; overflow: hidden; padding: 0; }
.map-card svg { display: block; width: 100%; height: auto; }
.map-card .map-link {
  position: absolute; right: 1rem; bottom: 1rem;
}
.contact-form {
  background: #fff; border-radius: var(--radius); padding: 2rem;
  box-shadow: 0 24px 60px -30px rgba(19, 26, 36, .4);
  display: grid; gap: 1.1rem; align-content: start;
}
.contact-form h3 { color: var(--ink); font-size: 1.4rem; font-weight: 800; }
.field { display: grid; gap: .35rem; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field input, .field select, .field textarea {
  font: inherit; color: var(--ink);
  border: 1.5px solid var(--paper-2); border-radius: 12px;
  padding: .8rem 1rem; background: var(--paper);
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(25, 55, 98, .18);
}
.field textarea { min-height: 120px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-note { font-size: .9rem; color: var(--ink-muted); }
.form-note.ok { color: #1c7a3d; font-weight: 600; }
.contact-form .btn--amber { justify-self: start; }
.form-privacy { font-size: .8rem; color: var(--ink-muted); }
.form-privacy a { color: var(--navy); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); border-top: 1px solid var(--line); padding: 3.2rem 0 6.5rem; }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; align-items: start; }
.site-footer .brand img, .site-footer .brand svg { height: 96px; }
.footer-col h4 { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: .9rem; }
.footer-col ul { list-style: none; display: grid; gap: .5rem; }
.footer-col a { color: var(--text); text-decoration: none; }
.footer-col a:hover { color: var(--amber); }
.footer-col p { color: var(--muted); font-size: .92rem; }
.footer-legal {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  color: var(--muted); font-size: .85rem;
}

/* ---------- Sticky-Call (mobil) ---------- */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  display: none; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(10, 13, 19, .92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.call-bar .btn { width: 100%; }

/* ---------- Accessibility-Toolbar ---------- */
.a11y { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 180; }
.a11y__toggle {
  width: 58px; height: 58px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .4);
  background: var(--navy); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .7);
  transition: transform .3s var(--ease), background .3s;
}
.a11y__toggle:hover { transform: scale(1.08); background: var(--navy-soft); }
.a11y__panel {
  position: absolute; right: 0; bottom: 70px;
  width: min(320px, calc(100vw - 2.5rem));
  background: #fff; color: var(--ink);
  border-radius: 16px; padding: 1.2rem;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6);
  display: grid; gap: 1rem;
}
.a11y__panel[hidden] { display: none; }
.a11y__heading { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; }
.a11y__label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; margin-bottom: .45rem; }
.a11y__row { display: flex; gap: .5rem; }
.a11y__opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .25rem;
  padding: .6rem .4rem; border-radius: 10px;
  border: 1.5px solid var(--paper-2); background: var(--paper);
  font-weight: 700; line-height: 1; color: var(--ink);
  transition: border-color .25s, background .25s;
}
.a11y__opt small { font-weight: 500; font-size: .68rem; opacity: .75; }
.a11y__opt[aria-pressed="true"] { border-color: var(--navy); background: #E4EAF6; }
.a11y__opt:disabled { opacity: .4; cursor: not-allowed; }
.a11y__tip { font-size: .75rem; opacity: .65; margin-top: .5rem; }

/* Lupe */
.lens {
  position: fixed; z-index: 170;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 4px solid var(--amber);
  box-shadow: 0 16px 44px -12px rgba(0, 0, 0, .8), inset 0 0 0 2px #fff;
  overflow: hidden; pointer-events: none;
  background: var(--night);
}
.lens__content { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
body.lens-active { cursor: crosshair; }
/* Innerhalb des Lupen-iframes: Overlays ausblenden */
.lens-frame .a11y, .lens-frame .lens, .lens-frame .call-bar,
.lens-frame .scroll-progress, .lens-frame .hero__scroll, .lens-frame .notice { display: none !important; }

/* ---------- Reduzierte Bewegung ---------- */
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation-duration: .001s !important; animation-iteration-count: 1 !important;
  transition-duration: .001s !important;
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-forced) * , html:not(.motion-forced) *::before, html:not(.motion-forced) *::after {
    animation-duration: .001s !important; animation-iteration-count: 1 !important;
    transition-duration: .001s !important; scroll-behavior: auto !important;
  }
}

/* ---------- Unterseiten (Impressum / Datenschutz) ---------- */
.legal-page { padding: 12rem 0 5rem; max-width: 760px; }
.legal-page h1 { color: #fff; font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2rem; }
.legal-page h2 { color: #fff; font-size: 1.3rem; margin: 2.2rem 0 .8rem; }
.legal-page p, .legal-page li { color: var(--muted); margin-bottom: .7rem; }
.legal-page strong { color: var(--text); }

/* ============================================================
   HELLER MODUS (Umschalter im Header, wird gespeichert)
   Der Hero bleibt bewusst die dunkle Lichtbühne.
   ============================================================ */
html.theme-light {
  --night: #F4F6FA;
  --coal:  #E7EDF6;
  --panel: #FFFFFF;
  --panel-2: #F2F5FB;
  --line: rgba(18, 35, 70, .14);
  --blue: #1E3A6E;
  --amber: #24509E;
  --amber-deep: #16386F;
  --glow: #2B57A8;
  --text: #16233B;
  --muted: #4E5E7E;
}
html.theme-light body { background: var(--night); color: var(--text); }
html.theme-light .brand { color: var(--navy); }
html.theme-light .site-header.scrolled {
  background: rgba(244, 246, 250, .9);
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -30px rgba(19, 26, 36, .35);
}
/* Heller Modus: Kopfleiste immer weiß wie auf der Altsite, Logo in Blau */
html.theme-light .site-header,
html.theme-light .site-header.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--line), 0 14px 34px -28px rgba(25, 55, 98, .35);
}
html.theme-light .mobile-menu { background: rgba(244, 246, 250, .97); }
html.theme-light .mobile-menu a { color: var(--ink); }
html.theme-light .section__title { color: var(--ink); }
html.theme-light .dash__inner { box-shadow: 0 34px 70px -32px rgba(19, 26, 36, .5), inset 0 1px 0 rgba(233, 237, 245, .07); }
html.theme-light .service--plain h3 { color: var(--ink); }
html.theme-light .service--plain { box-shadow: 0 18px 44px -30px rgba(19, 26, 36, .35); }
html.theme-light .band__num { text-shadow: none; }
html.theme-light .about__text p strong { color: var(--ink); }
html.theme-light .about__points li { color: var(--ink); }
html.theme-light .about__badge { background: rgba(255, 255, 255, .85); color: var(--amber-deep); border-color: rgba(25, 55, 98, .4); }
html.theme-light .voice-card { box-shadow: 0 18px 44px -30px rgba(19, 26, 36, .3); }
html.theme-light .voice-card blockquote { color: var(--ink); }
html.theme-light .rating-score .num { color: var(--amber-deep); }
html.theme-light .site-footer { background: var(--coal); }
html.theme-light .footer-col a { color: var(--ink); }
html.theme-light .footer-col a:hover { color: var(--amber-deep); }
html.theme-light .call-bar { background: rgba(244, 246, 250, .94); }
html.theme-light .legal-page h1, html.theme-light .legal-page h2 { color: var(--ink); }
html.theme-light .legal-page strong { color: var(--ink); }
html.theme-light .lens { background: var(--night); }
/* Logo-Varianten im Footer */
.logo-on-light { display: none; }
html.theme-light .logo-on-dark { display: none; }
html.theme-light .logo-on-light { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .service { grid-column: span 6; }
  .service--wide { grid-column: span 6; }
  .voices { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .main-nav { display: none; }
  .main-nav--simple { display: flex; }
  .header-mobile-actions { display: flex; }
  .theme-btn--mobile { display: grid; }
  .nav-toggle { display: block; }
  .about { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .band__grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .service, .service--wide { grid-column: span 12; min-height: 260px; }
  .voices { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .call-bar { display: block; }
  .site-footer { padding-bottom: 7.5rem; }
  /* so groß wie neben Theme-Schalter und Menü möglich (≈ 215 × 96 px) */
  .brand svg, .brand img { height: 96px; }
  .site-header.scrolled .brand svg { height: 56px; }
  .hero__inner { padding-top: calc(124px + clamp(.75rem, 2svh, 1.5rem)); }
  .lens { width: 220px; height: 220px; }
}