/* ============================================================
   Autoglas Service Hamburg — Premium Dark + Gold
   Handgebaut, kein Framework. Waben-Motiv, cinematic.
   ============================================================ */

@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 600 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "Graduate";
  src: url("../fonts/graduate.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}

:root {
  --ink:        #0a0b0d;
  --ink-2:      #0f1114;
  --surface:    #15181d;
  --surface-2:  #1b1f26;
  --line:       rgba(255, 255, 255, 0.09);
  --line-gold:  rgba(255, 215, 0, 0.28);
  --gold:       #ffd700;
  --gold-2:     #f4c400;
  --gold-deep:  #b8860b;
  --gold-glow:  rgba(255, 215, 0, 0.35);
  --text:       #f3f4f6;
  --text-dim:   #aab0ba;
  --text-faint: #767c86;

  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-hero:    "Graduate", var(--font-display);

  --wrap: 1200px;
  --pad: clamp(1.15rem, 4vw, 2.5rem);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tb-h: 3.25rem; /* Hoehe des Leistungsbands - liegt auf der Hero-Unterkante */

  /* Honeycomb overlay (subtil, nahtlos gekachelt) */
  --hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cpath fill='%23ffd700' fill-opacity='0.3' fill-rule='evenodd' d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.03; letter-spacing: -0.02em; margin: 0; }
/* Feinschliff Typografie: Ueberschriften gleichmaessig umbrechen, im
   Fliesstext keine einzelnen Woerter in der letzten Zeile; lange deutsche
   Komposita in schmalen Spalten trennen statt Flatterrand. */
h1, h2, h3 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }
p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.hero-note, .ci-note { hyphens: manual; -webkit-hyphens: manual; }
::selection { background: var(--gold); color: #0a0b0d; }
a, button, summary { -webkit-tap-highlight-color: transparent; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 820px; }
.gold { color: var(--gold); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #000; padding: 0.7rem 1.1rem; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.98rem;
  letter-spacing: 0.01em; line-height: 1; cursor: pointer;
  padding: 0.85rem 1.4rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--btn-bg); color: #000; position: relative; overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn svg { flex: none; }
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; justify-content: center; }
.btn-gold {
  --btn-bg: linear-gradient(135deg, var(--gold) 0%, var(--gold-2) 55%, var(--gold-deep) 130%);
  color: #100c00;
  box-shadow: 0 6px 24px -8px var(--gold-glow);
  animation: goldBreath 3.8s ease-in-out infinite;
}
.btn-gold::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
}
.btn-gold:hover { transform: translateY(-2px); animation-duration: 2.1s; }
.btn-gold:hover::after { transition: transform 0.7s var(--ease); transform: translateX(120%); }
.btn-ghost {
  color: var(--text); border-color: var(--line-gold);
  background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(6px);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

/* ---------- Glow-Animationen (dezent, cinematic) ---------- */
@keyframes goldBreath {
  0%, 100% { box-shadow: 0 6px 24px -8px var(--gold-glow); }
  50%      { box-shadow: 0 10px 34px -6px var(--gold-glow), 0 0 14px -2px var(--gold-glow); }
}
@keyframes diagGlow {
  0%, 100% { opacity: 0.7;  box-shadow: 0 0 18px 1px var(--gold-glow); }
  50%      { opacity: 1;    box-shadow: 0 0 36px 5px var(--gold-glow); }
}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold);
  margin: 0 0 0.9rem; display: inline-flex; align-items: center; gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); display: inline-block; }
/* Bereichskoepfe: der goldene Strich steht als eigene Linie ueber dem
   Eyebrow, damit Strich, Eyebrow und Ueberschrift auf einer Mittelachse
   sitzen. */
.section-head .eyebrow {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
}
.section-head .eyebrow::before { width: 46px; }
.section-head {
  max-width: 720px; margin-inline: auto; text-align: center;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.section-title { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); font-weight: 900; }
.section-sub { color: var(--text-dim); font-size: 1.1rem; margin-top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, padding 0.3s;
  padding: 0.5rem 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent);
}
.site-header.scrolled {
  background: rgba(10, 11, 13, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px -18px #000;
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; }
.brand { display: flex; align-items: center; margin-right: auto; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; }
.nav-menu {
  display: flex; gap: 0.35rem; list-style: none; margin: 0; padding: 0;
}
.nav-menu a {
  display: block; padding: 0.55rem 0.9rem; font-family: var(--font-display); font-weight: 600;
  font-size: 0.94rem; color: var(--text-dim); border-radius: 999px; position: relative;
  transition: color 0.2s; white-space: nowrap;
}
.nav-menu a:hover { color: var(--text); }
.nav-menu a::after {
  content: ""; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.35rem; height: 2px;
  background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.nav-menu a:hover::after { transform: scaleX(1); }
.header-cta { padding: 0.7rem 1.15rem; font-size: 0.92rem; }
.nav-toggle { display: none; }
.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 50px; height: 38px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.lang-toggle:hover { border-color: var(--gold); background: rgba(255, 255, 255, 0.05); }
.lang-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lang-toggle .flag { display: block; width: 34px; height: 23px; border-radius: 2px; }
/* Immer die echten Flaggenfarben: der Umschalter soll auf einen Blick lesbar
   sein, nicht erst beim Zeigen. */
.lang-toggle .flag-us { --fl-1: #ffffff; --fl-2: #b22234; --fl-3: #3c3b6e; }
.lang-toggle .flag-de { --fl-1: #0b0b0b; --fl-2: #dd0000; --fl-3: #ffce00; }
/* Fuellfarben als CSS-Regeln statt als fill-Attribut im SVG — eine Palette
   je Flagge, an einer Stelle aenderbar. */
.lang-toggle .flag .f1 { fill: var(--fl-1); }
.lang-toggle .flag .f2 { fill: var(--fl-2); }
.lang-toggle .flag .f3 { fill: var(--fl-3); }

.lang-toggle .flag-de { display: none; }
html[lang="en"] .lang-toggle .flag-us { display: none; }
html[lang="en"] .lang-toggle .flag-de { display: block; }

/* Zwischen Breakpoint und Desktop wird die Kopfzeile eng: Navigation und Abstaende
   schrumpfen, damit Logo und Telefonnummer nicht abgeschnitten werden. */
@media (min-width: 721px) and (max-width: 1180px) {
  .header-inner { gap: 0.9rem; }
  .nav-menu a { padding-inline: 0.5rem; font-size: 0.9rem; }
  .header-cta { padding: 0.65rem 0.9rem; }
}
/* Darunter reicht der Platz fuer die Nummer im Button nicht: nur das Icon zeigen,
   eine halb abgeschnittene Rufnummer ist schlimmer als keine. */
@media (min-width: 721px) and (max-width: 999px) {
  .header-cta span { display: none; }
  .header-cta { padding: 0; width: 44px; height: 44px; flex: none; justify-content: center; gap: 0; } /* nur Hoerer: saubere 44-px-Flaeche */
}

/* ---------- Hero (Split: Text links, Werkstatthalle rechts) ---------- */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: 26fr 24fr; overflow: hidden; }
/* 26fr 24fr statt 1.04fr 0.96fr: wird die Textspalte auf ihre Mindestbreite
   fixiert, bleibt nur die Bildspalte flexibel - mit Faktor < 1 nimmt sie dann
   nur diesen Bruchteil des Restplatzes (iPad Pro: 19 px schwarzer Rand). */
.hero-text {
  display: flex; flex-direction: column; justify-content: center;
  /* 6rem oben reichen (fester Kopf: 84 px). Mehr treibt den Hero ueber
     100svh, sobald das Pruefzeichen im Fluss darunter steht - dann
     rutscht das aufliegende Leistungsband aus dem ersten Bild. */
  padding: 6rem var(--pad) var(--tb-h); position: relative; z-index: 2;
  padding-right: clamp(3rem, 9vw, 9rem); /* Platz fuer die Diagonale -> Zentrierung sitzt im sichtbaren Bereich */
  background: radial-gradient(120% 100% at 0% 50%, rgba(255,215,0,0.035), transparent 55%), var(--ink); /* Glow vom linken Rand bewusst dezent */
}
.hero-text::after { /* Waben-Textur hinter dem Text */
  content: ""; position: absolute; inset: 0; opacity: 0.2; pointer-events: none; z-index: 0;
  background-image: var(--hex); background-size: 40px 70px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 35%, #000 80%, transparent);
}
.hero-text > * { position: relative; z-index: 1; }
.hero-media { position: relative; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }

/* Drei deckungsgleiche Aufnahmen derselben Halle: unbeleuchtet als Grundlage,
   darueber "nur Hexagons", zuletzt "alles an". Beide Ebenen blenden auf, die
   warmen Wandleuchten mit Verzoegerung hinterher.
   Ohne JS sind einfach alle Ebenen sichtbar, also die beleuchtete Halle.

   Bewusst NICHT var(--ease): das ist ein Ease-out, springt sofort hoch und
   kriecht danach nur noch — wirkt zaghaft. Ein Ease-in zieht erst spaet durch,
   so liest man ein Angehen statt eines Aufhellens.
   Cubic statt Expo: Expo liegt so lange auf 0, dass die Halle eine halbe
   Sekunde zu lange dunkel bleibt. Cubic ist vorn weniger flach, hinten
   genauso steil.

   Animation und nicht transition: liegen die Fotos im Cache, sind sie beim
   Neuladen sofort .complete und site.js setzt "lit" noch im selben Frame wie
   den Startwert. Eine transition hat dann keinen vorherigen Wert zum
   Ueberblenden und springt — die Animation lief nur beim ersten Aufruf.
   Eine Animation startet immer bei ihrem eigenen 0-%-Schritt. */
.js .hero-media .hero-light-hex,
.js .hero-media .hero-light-on { opacity: 0; }
.js .hero-media.lit .hero-light-hex { animation: licht-auf 1.5s cubic-bezier(0.32, 0, 0.67, 0) forwards; }
.js .hero-media.lit .hero-light-on { animation: licht-auf 1.5s cubic-bezier(0.32, 0, 0.67, 0) 0.4s forwards; }
@keyframes licht-auf { from { opacity: 0; } to { opacity: 1; } }
.hero-media::before { /* diagonaler Ink-Keil als Übergang */
  content: ""; position: absolute; inset: 0 auto 0 -1px; width: 140px; z-index: 3;
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 0 100%);
}
.hero-media::after { /* Abdunklung links für sauberen Übergang */
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(10,11,13,0.85) 0, rgba(10,11,13,0.25) 26%, transparent 60%);
}
.hero-diag { /* Gold-Diagonale an der Naht */
  position: absolute; top: -12%; left: -70px; width: 4px; height: 130%; z-index: 4;
  background: linear-gradient(180deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  transform: rotate(9deg); box-shadow: 0 0 24px 2px var(--gold-glow);
  animation: diagGlow 5s ease-in-out infinite;
}
.hero-title {
  font-family: var(--font-hero); /* Graduate, wie auf der Live-Site */
  width: max-content; max-width: 100%; /* Box hugt die Zeile "Autoglas Service" */
  text-align: center;                   /* -> "Hamburg" zentriert darunter */
  font-size: clamp(2.2rem, 1rem + 3vw, 4rem); font-weight: 900;
  letter-spacing: -0.03em; margin: 0.3rem 0 1.3rem; margin-inline: auto; /* Block mittig */
}
.hero-title .ht-top { white-space: nowrap; } /* "Autoglas Service" immer in einer Zeile */
.hero-lead { font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem); color: var(--text-dim); max-width: 560px; text-align: center; margin-inline: auto; }
.hero-lead strong { color: var(--text); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem; margin: var(--hero-gap) 0 0; max-width: 560px; margin-inline: auto; } /* gleiche Box wie Lead, Block mittig -> Buttons unter dem Text zentriert */
/* Offizielles TUEV-Rheinland-Pruefzeichen (ID 0000090198), mittig unter
   dem Textblock: dieselbe Achse wie Titel, Lead, Knoepfe und Fussnote.
   Das Zeichen darf weder veraendert noch umgefaerbt werden; auf dunklem
   Grund gehoert es auf eine helle Flaeche, daher die weisse Platte. */
.hero-seal {
  background: #fff; border-radius: 8px; padding: 7px 9px; width: fit-content;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
/* Goldschein rundum, dieselbe Handschrift wie die Knoepfe: erst ein
   hauchduenner Goldrand, dann der weiche Schein, zuletzt der dunkle
   Schatten, der das Zeichen vom Hintergrund abhebt. */
.hero-seal {
  box-shadow:
    0 0 0 1px rgba(255, 215, 0, 0.55),
    0 0 34px 2px var(--gold-glow),
    0 0 72px -6px rgba(255, 215, 0, 0.22),
    0 12px 30px -12px rgba(0, 0, 0, 0.85);
}
/* Unten links in der Ecke der Textspalte, ueber dem aufliegenden
   Leistungsband. Absolut gesetzt, damit das Zeichen die Hoehe des Heros
   nicht vergroessert - sonst rutscht das Band aus dem ersten Bild. */
/* Mittig unter dem Textblock, auf derselben Achse wie Titel, Lead,
   Knoepfe und Fussnote. */
/* Der freie Platz in der Textspalte wird dreifach geteilt: ueber dem
   Titel, ueber dem Pruefzeichen und darunter. Dadurch sitzt das Zeichen
   bei jeder Fensterhoehe von selbst mittig zwischen Textblock und
   Leistungsband - ein fester Abstand wuerde nur bei einer Groesse
   passen. Wird der Platz knapp, ruecken alle drei gleichmaessig
   zusammen. */
.hero-title { margin-top: auto; }
/* Ein Abstand fuer den ganzen Block: Text -> Knoepfe -> Siegel -> Sterne -> Hinweis */
.hero-text { --hero-gap: 1.2rem; }
.hero-lead { margin-bottom: 0; }   /* sonst doppelte Luecke zu den Knoepfen */
.hero-seal { align-self: center; margin: var(--hero-gap) 0 0; }
.hero-note { margin-bottom: auto; }                          /* mit margin-top:auto am Titel: Block mittig */
.hero-seal img { display: block; width: clamp(141px, 15.6vw, 195px); height: auto; }
/* Google-Bewertung: feine Zeile unter den Knoepfen */
.g-wrap { text-align: center; margin: var(--hero-gap) 0 0; }
.g-rating { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--text-dim); font-size: 0.86rem; transition: color 0.25s; }
.g-rating:hover, .g-rating:focus-visible { color: var(--text); }
.g-rating strong { color: var(--text); font-family: var(--font-display); font-weight: 800; }
.g-stars { display: inline-flex; gap: 1px; }
.g-stars svg { fill: var(--gold); filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.35)); }
@media (max-width: 720px) {
  .g-wrap { grid-column: 1 / -1; margin: var(--hero-gap) 0 var(--hero-gap); }
  .js .hero .g-wrap { opacity: 0; transition: opacity 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.75s; }
  .js .hero.text-ein .g-wrap { opacity: 1; }
}
.hero-note { color: var(--text-faint); font-size: 0.82rem; margin-top: var(--hero-gap); max-width: 560px; margin-inline: auto; text-align: center; }

/* ---------- Trust bar ---------- */
/* Das Band liegt auf der Unterkante des Heros statt als eigener Streifen
   darunter: die vier Aussagen stehen damit im ersten Bild, ohne dass die
   Seite hoeher wird, und die Leistungen ruecken eine ganze Bandhoehe nach
   oben. Umgesetzt ueber einen negativen Aussenabstand statt ueber einen
   Umbau im DOM - so bleibt die Reihenfolge auf schmalen Schirmen (Bild
   zuerst, Text danach) unberuehrt. Die feste Hoehe ist Pflicht, sonst
   passt der negative Abstand nicht zur tatsaechlichen Hoehe. */
.trustbar {
  position: relative; z-index: 6;
  height: var(--tb-h); margin-top: calc(-1 * var(--tb-h));
  display: flex; align-items: center;
  background: rgba(10, 11, 13, 0.62); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-gold);
}
/* Auszeichnungsband statt Kaesten: keine Rahmen, schmaler Streifen, Versalien,
   goldene Rauten als Trenner. Der teuerste Scrollmeter der Seite wird dadurch
   halb so hoch, die Leistungen ruecken entsprechend nach oben. */
.trustbar-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.55rem 2.6rem; flex: 1 1 auto;
}
.trust-item {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.2rem 0; position: relative;
}
.trust-item + .trust-item::before {
  content: ""; position: absolute; left: -1.45rem; top: 0.55em;
  width: 5px; height: 5px; background: var(--gold); opacity: 0.5; transform: rotate(45deg);
}
.trust-k {
  font-family: var(--font-display); font-weight: 800; color: var(--gold);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
}
.trust-v { color: var(--text-dim); font-size: 0.78rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(3.5rem, 8vw, 7rem) 0; position: relative; }
.section-alt { background: var(--ink-2); border-block: 1px solid var(--line); }
/* Einblicke: das Gruppenbild laeuft an den Raendern in Transparenz aus -
   nur auf echtem Schwarz verschmilzt es ohne grauen Rand. */
.section-black { background: #000; border-block: 1px solid var(--line); }

/* ---------- Cards / Leistungen ---------- */
/* Servicefahrzeuge zwischen Ueberschrift und Kacheln. Das Bild ist auf den
   Seitengrund vorgerechnet und laeuft ringsum weich ins Schwarz aus. */
.flotte { max-width: 780px; margin: calc(-1 * clamp(0.6rem, 2vw, 1.6rem)) auto clamp(1.6rem, 4vw, 2.8rem); }
.flotte img { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .flotte { margin-inline: calc(-1 * var(--pad)); } }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.15rem; }
.card {
  position: relative; padding: 2rem 1.75rem; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line); overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s, box-shadow 0.35s;
}
.card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(120% 80% at 50% -10%, rgba(255,215,0,0.14), transparent 60%);
}
.card:hover { transform: translateY(-6px); border-color: var(--line-gold); box-shadow: 0 24px 50px -30px #000; }
.card:hover::before { opacity: 1; }
.card-ic {
  display: grid; place-items: center; width: 56px; height: 62px; margin-bottom: 1.2rem;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(255,215,0,0.16), rgba(255,215,0,0.04));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Ab der vierten Leistung eine flache Zeile ueber die volle Breite statt
   einer weiteren Kachel: die drei Kernleistungen bleiben dadurch als
   solche erkennbar, und das Raster bekommt keine Luecke, wenn die Zahl
   der Leistungen nicht durch drei teilbar ist. */
.card:nth-child(n+4) {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 1.15rem;
  padding: 1.15rem 1.5rem;
}
.card:nth-child(n+4) .card-ic { width: 40px; height: 44px; margin: 0; grid-row: 1 / span 2; }
.card:nth-child(n+4) h3 { font-size: 1.05rem; margin: 0; align-self: center; }
.card:nth-child(n+4) p { font-size: 0.92rem; }
.card h3 { font-size: 1.28rem; margin-bottom: 0.55rem; }
.card p { color: var(--text-dim); margin: 0; font-size: 0.98rem; }

/* ---------- Ablauf / Steps ---------- */
.steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
}
/* Zeitachse statt vier Kaesten: die Ziffern sitzen als Knoten auf einer
   durchgehenden Linie. Bei so kurzen Schritttexten liest sich die Abfolge
   damit von links nach rechts, statt als vier gleichrangige Boxen. Der
   Knoten deckt die Linie mit dem Abschnittshintergrund ab, deshalb
   --ink-2 und nicht --ink. */
.steps { position: relative; }
.steps::before {
  content: ""; position: absolute; left: 0; right: 0; top: 19px; height: 2px;
  /* Die Achse endet kurz hinter dem letzten Knoten (bei vier Spalten sitzt
     er auf etwa 77 % der Breite) - ein Strich, der ins Leere weiterlaeuft,
     wuerde einen fuenften Schritt andeuten. */
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold) 77%, transparent 90%);
  opacity: 0.4;
}
.step { position: relative; padding: 0 1.2rem 0 0; }
.step-n {
  position: relative; z-index: 1;
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--font-display); font-weight: 900; font-size: 1rem; line-height: 1;
  color: var(--gold); background: var(--ink-2); border: 2px solid var(--gold);
  margin-bottom: 1.1rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.step p { color: var(--text-dim); margin: 0; font-size: 0.95rem; }

/* ---------- Über uns ---------- */
/* Teamfoto als Buehne, Zitat mit Namen und Knopf liegt unten auf den
   dunklen Pullovern. Darunter der Text mittig. */
.team-stage {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-gold); box-shadow: 0 30px 60px -30px #000;
}
.team-foto { display: block; width: 100%; height: auto; }
.team-stage::after {
  content: ""; position: absolute; inset: 45% 0 0 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(10, 11, 13, 0.78) 45%, rgba(10, 11, 13, 0.94));
}
.team-over {
  position: absolute; z-index: 2; left: 50%; bottom: 5%; transform: translateX(-50%);
  width: min(640px, 86%); text-align: center;
}
.team-names { font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: 800; line-height: 1.15; margin: 0; }
.team-over .owners-quote { margin: 0.5rem 0 1rem; }
.about-text { max-width: 860px; margin: clamp(1.8rem, 4vw, 2.8rem) auto 0; }
.about-text p { color: var(--text-dim); margin: 0 0 1rem; }
.about-text .stats { margin-top: 1.4rem; }
.owners-label {
  font-family: var(--font-display); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.55rem;
}
.owners-quote { color: var(--text); font-size: 1.08rem; margin: 0.8rem 0 1.3rem; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 0.5rem; }
.stat { text-align: center; padding: 1.1rem 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.stat-n { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 1rem + 2vw, 2.3rem); color: var(--gold); display: block; }
.stat-l { color: var(--text-dim); font-size: 0.82rem; }

/* ---------- Einblicke: interaktive Fahrzeuggruppe ---------- */
/* Grundbild + je Fahrzeug eine Ebene aus demselben Bild, per Maske auf das
   Fahrzeug beschnitten. Aktiv: alles andere wird abgedunkelt, die Ebene des
   Fahrzeugs bleibt hell und bekommt den Goldschein. Der Schein sitzt als
   filter auf der aeusseren Ebene, die Maske auf der inneren - so folgt
   drop-shadow der Fahrzeugkontur (filter wird vor der Maske angewandt,
   auf derselben Ebene wuerde der Schein mit abgeschnitten). */
.fleet { position: relative; }
.fleet-stage {
  position: relative; aspect-ratio: 1672 / 941; isolation: isolate;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.fleet-stage.over-car { cursor: pointer; }
.fleet-base { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fleet-dim {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: rgba(0, 0, 0, 0.66); transition: opacity 0.45s var(--ease); /* reines Schwarz, sonst zeichnet sich das Rechteck auf dem schwarzen Grund ab */
}
.fleet.has-active .fleet-dim { opacity: 1; }
.fleet-car { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.45s var(--ease); }
.fleet-cut {
  position: absolute; inset: 0;
  background: url(../images/einblicke-1.webp) center / 100% 100% no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.fleet-car.is-active {
  opacity: 1;
  filter: drop-shadow(0 0 1.5px var(--gold)) drop-shadow(0 0 9px rgba(255, 215, 0, 0.75)) drop-shadow(0 0 28px rgba(255, 215, 0, 0.35));
}
/* Scheinwerfer: heller Kern, weiches Streulicht, waagerechter Lichtstreifen */
.fleet-lamps { position: absolute; inset: 0; pointer-events: none; }
.lamp {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)); border-radius: 50%;
  mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, #fff 0 32%, rgba(255, 248, 228, 0.85) 55%, rgba(255, 228, 165, 0.3) 78%, transparent 100%);
}
.lamp::before {
  content: ""; position: absolute; inset: -140% -90%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 242, 205, 0.5), rgba(255, 215, 120, 0.14) 55%, transparent 100%);
}
.lamp::after {
  content: ""; position: absolute; left: -170%; right: -170%; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, rgba(255, 250, 238, 0.9) 50%, transparent);
  transform: rotate(calc(-1 * var(--r, 0deg)));   /* Reflex liegt immer waagerecht */
}
/* Kein Flackern: Autoscheinwerfer gehen sauber und schnell an (LED/Xenon) */
.fleet-lamps.is-active .lamp { animation: scheinwerfer 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes scheinwerfer { from { opacity: 0; } to { opacity: 1; } }
.fleet-picker { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.55rem; margin-top: 1.4rem; }
/* Sichtbar nicht gewuenscht - Bild antippen oder mit der Maus zeigen reicht.
   Fuer Tastatur und Screenreader bleiben die Knoepfe erreichbar und werden
   sichtbar, sobald einer den Fokus bekommt. */
.fleet-picker:not(:focus-within) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.fleet-chip {
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.01em;
  padding: 0.55rem 1rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text-dim);
  transition: border-color 0.25s, color 0.25s, background 0.25s, box-shadow 0.25s;
}
.fleet-chip:hover { border-color: var(--line-gold); color: var(--text); }
.fleet-chip.is-active { background: var(--gold); border-color: var(--gold); color: #0a0b0d; box-shadow: 0 0 22px -4px var(--gold-glow); }
.fleet-card {
  position: absolute; bottom: 1.1rem; z-index: 4; width: min(22%, 280px);
  padding: 1rem 1.15rem 1.1rem; border-radius: 14px;
  background: rgba(10, 11, 13, 0.84); backdrop-filter: blur(10px);
  border: 1px solid var(--line-gold); box-shadow: 0 18px 40px -18px #000;
  animation: karte-ein 0.4s var(--ease);
}
.fleet-card[hidden] { display: none; }
/* Unten liegt im Bild nur dunkler Boden. Die Karte steht immer auf der
   Seite, auf der sie das gewaehlte Fahrzeug nicht verdeckt. */
.fleet-card[data-car="audi"], .fleet-card[data-car="maserati"], .fleet-card[data-car="lkw"] { right: 1.1rem; }
.fleet-card[data-car="porsche"], .fleet-card[data-car="womo"] { left: 1.1rem; }
.fleet-hint { display: none; }
/* Desktop: die Karten liegen deckungsgleich ueber dem Bild */
.fleet-cards { position: absolute; top: 0; left: 0; right: 0; aspect-ratio: 1672 / 941; pointer-events: none; }
.fleet-card { pointer-events: auto; }
@keyframes karte-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fc-kat {
  font-family: var(--font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold); margin: 0 0 0.3rem;
}
.fc-name { font-size: 1.3rem; font-weight: 800; margin: 0 0 0.7rem; }
.fc-facts { margin: 0; display: grid; gap: 0.55rem; }
.fc-facts dt { color: var(--text-faint); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fc-facts dd { margin: 0.1rem 0 0; color: var(--text); font-size: 0.92rem; line-height: 1.45; }

/* ---------- FAQ ---------- */
/* Keine Kaesten mehr, nur Haarlinien zwischen den Fragen - dieselbe
   Richtung wie Leistungsband und Zeitachse. Der Winkel ersetzt das Plus,
   weil er das Aufklappen andeutet statt des Hinzufuegens. */
.faq { display: flex; flex-direction: column; gap: 0; }
.faq details {
  border-top: 1px solid var(--line); overflow: hidden; transition: border-color 0.3s;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq details[open] { border-top-color: var(--line-gold); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.35rem 3rem 1.35rem 0; position: relative;
  font-family: var(--font-display); font-weight: 600; font-size: 1.16rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.5rem; top: 50%;
  width: 10px; height: 10px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-20%) rotate(-135deg); }
.faq-a { padding: 0 3rem 1.4rem 0; color: var(--text-dim); }
.faq-a p { margin: 0; }
.faq-a a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Kontakt ---------- */
/* Die Karte laeuft ueber die volle Breite, die Kontaktdaten liegen als
   halbtransparentes Feld darauf - rechts oben, damit die ODbL-Nennung
   unten links frei bleibt; die ist Pflicht. Die Mindesthoehe der Karte
   haelt das Feld ausserdem vom Route-Knopf unten rechts fern. */
/* Karte und Kontaktfeld liegen im selben Rasterfeld uebereinander. Dadurch
   waechst die Karte mit, wenn das Feld hoeher wird - es kann unten nicht
   mehr herausragen, und die Abstaende bleiben ringsum gleich. */
.contact-grid { display: grid; position: relative; }
.contact-grid > * { grid-area: 1 / 1; }
.contact-grid .map-card { width: 100%; min-height: 460px; } /* Desktop bewusst flach, die Karte soll begleiten statt dominieren */
/* Als volle Seitenspalte gesetzt: gleicher Abstand oben, rechts und unten,
   der Inhalt sitzt mittig darin. Vorher hing das Feld oben rechts und liess
   unten eine grosse Luecke. */
.contact-info {
  display: flex; flex-direction: column; justify-content: center; gap: 0.45rem;
  position: relative; z-index: 3;
  justify-self: end; align-self: stretch; margin: 1.4rem;
  width: min(360px, 55%);
  background: rgba(10, 11, 13, 0.72); backdrop-filter: blur(10px);
  border: 1px solid var(--line-gold); border-radius: var(--radius);
  padding: 1.25rem 1.15rem;
}
.ci-row {
  display: flex; align-items: center; gap: 1rem; padding: 0.55rem 0.4rem;
  color: var(--text); transition: transform 0.25s, color 0.25s;
}
a.ci-row:hover { transform: translateX(3px); }
a.ci-row:hover .ci-v { color: var(--gold); }
.ci-v { transition: color 0.25s; }
.ci-row svg { color: var(--gold); flex: none; }
.ci-k { display: block; color: var(--text-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; }
.ci-v { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; }
.ci-static { cursor: default; }
.ci-hours { padding: 0.8rem 0.4rem 0.4rem; border-top: 1px solid var(--line); }
/* Desktop: Box etwas breiter (E-Mail passt in eine Zeile) und enger
   gesetzt - sie gibt die Kartenhoehe vor, so wird die Karte flacher.
   Mobil bleibt unveraendert. */
@media (min-width: 961px) {
  .contact-info { width: min(400px, 55%); gap: 0.2rem; padding: 1rem 1.1rem; }
  .ci-row { padding-block: 0.42rem; }
  .ci-hours { padding-top: 0.65rem; margin-top: 0.2rem; }
}
.ci-note { color: var(--text-faint); font-size: 0.8rem; margin: 0.55rem 0 0; }
.ci-hours .ci-k { margin-bottom: 0.5rem; color: var(--gold); font-weight: 700; } /* bewusst telefonisch - kein Ladengeschaeft mit Oeffnungszeiten */
.ci-hours table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ci-hours td { padding: 0.2rem 0; color: var(--text-dim); }
.ci-hours td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* Standort-Karte: selbst gezeichnet, kein Kartendienst eingebunden */
.map-card {
  position: relative; display: block; overflow: hidden;
  min-height: 460px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--ink-2);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.map-card:hover, .map-card:focus-visible { border-color: var(--line-gold); box-shadow: 0 18px 50px -22px rgba(0,0,0,0.9); }
.map-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.m-bg { fill: #0c0e11; }
.a-field path { fill: #12161c; }
.a-wood path { fill: #101713; }
.a-built path { fill: #171b21; }
.a-water path { fill: #0d1721; }
.m-blocks path { fill: #242a33; stroke: rgba(255,255,255,0.09); stroke-width: 0.6; }
.m-case path { stroke: #050607; }
.r-motorway path { stroke: #565e6a; }
.r-major path { stroke: #4a515c; }
.r-minor path { stroke: #3b424c; }
.r-service path { stroke: #2f353d; }
.r-track path { stroke: #333941; stroke-dasharray: 3.5 4; }
.r-gold path { stroke: #9c8118; transition: stroke 0.3s var(--ease); }
.map-card:hover .r-gold path { stroke: #b08f16; }
.m-shield rect { fill: #333b46; stroke: rgba(255,255,255,0.12); stroke-width: 1; }
.m-shield text { fill: #dfe2e7; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: 0.02em; }

/* Halo per paint-order -> Beschriftung bleibt ueber Strassen lesbar */
.m-label, .m-place, .m-dir text {
  font-family: var(--font-display); text-transform: uppercase; font-weight: 600;
  fill: var(--text-faint); font-size: 11px; letter-spacing: 0.18em;
  paint-order: stroke; stroke: #0c0e11; stroke-width: 3.5px; stroke-linejoin: round;
}
.m-label-gold { fill: #c2a233; letter-spacing: 0.2em; }
.m-place { font-size: 15px; letter-spacing: 0.3em; font-weight: 700; fill: rgba(243,244,246,0.4); stroke-width: 4.5px; }
.m-dir text { font-size: 10px; letter-spacing: 0.14em; }
.m-dir path { fill: var(--text-faint); stroke: #0c0e11; stroke-width: 2px; paint-order: stroke; }

.m-pin-halo { fill: var(--gold); opacity: 0.09; }
.m-pin-ring { fill: none; stroke: var(--gold); stroke-opacity: 0.26; stroke-width: 1; }
.m-pin-shadow { fill: #000; opacity: 0.55; }
.m-pin-body { fill: var(--gold); stroke: #0a0b0d; stroke-width: 1.5; }
.m-pin-car { fill: #0a0b0d; }

.m-compass circle { fill: rgba(10,11,13,0.72); stroke: var(--line-gold); stroke-width: 1; }
.m-compass path { fill: var(--gold); opacity: 0.75; }
.m-compass text { fill: var(--text-faint); font-family: var(--font-display); font-size: 9px; font-weight: 700; text-anchor: middle; }

/* Nennung und Route-Knopf beide links: rechts liegt jetzt das
   Kontaktfeld auf der Karte. */
.map-overlay {
  position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end;
  justify-content: flex-start; gap: 1.2rem; flex-wrap: wrap; padding: 1.1rem 1.2rem;
  background: linear-gradient(0deg, rgba(8,9,11,0.95) 0%, rgba(8,9,11,0.72) 55%, transparent 100%);
}
.map-badge { display: flex; flex-direction: column; gap: 0.15rem; }
.mb-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; color: var(--text); }
.mb-addr { font-size: 0.88rem; color: var(--text-dim); }
.mb-attr { font-size: 0.7rem; color: var(--text-faint); margin-top: 0.1rem; }
.map-cta {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none;
  padding: 0.55rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--line-gold); background: rgba(255,215,0,0.06);
  color: var(--gold); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
  transition: background 0.25s, color 0.25s;
}
.map-card:hover .map-cta, .map-card:focus-visible .map-cta { background: var(--gold); color: #0a0b0d; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-2); border-top: 1px solid var(--line); padding-top: clamp(2.5rem, 5vw, 4rem); }
/* Vier Spalten: Marke, Navigation, Kontakt, Erreichbarkeit. Die Zeiten
   stehen zwar schon im Kontaktbereich darueber - im Footer sucht sie
   aber, wer von unten kommt oder ueber das Menue gesprungen ist. */
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.8fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
.footer-hours { display: flex; flex-direction: column; font-size: 0.95rem; color: var(--text-dim); }
.footer-hours .fh-k {
  color: var(--gold); font-family: var(--font-display); font-weight: 700; margin-bottom: 0.5rem;
}
.footer-hours table { width: 100%; border-collapse: collapse; }
.footer-hours td { padding: 0.15rem 0; }
.footer-hours td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.footer-hours p { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--text-faint); }
.footer-brand img { height: 40px; margin-bottom: 1rem; }
.footer-brand p { color: var(--text-dim); max-width: 42ch; font-size: 0.95rem; }
.footer-nav { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-nav a, .footer-contact a, .footer-contact span { color: var(--text-dim); font-size: 0.95rem; transition: color 0.2s; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-contact { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-contact a:first-child { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--gold); }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-block: 1.4rem; color: var(--text-faint); font-size: 0.85rem;
}
.footer-bottom p { margin: 0; }
.footer-legal a { color: var(--text-dim); }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Mobile call bar ---------- */
.mobile-callbar { display: none; }

/* ---------- Reveal on scroll (progressive enhancement) ----------
   Ohne JS bleibt alles sichtbar; nur bei aktivem JS (.js) wird versteckt
   und dann eingeblendet. So ist die Seite auch ohne/bei fehlerhaftem JS lesbar. */
.reveal { transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
/* overflow-anchor: die Einblende-Verschiebung darf kein Ankerpunkt fuer die
   Scroll-Wiederherstellung sein — sonst rutscht die Seite bei jedem
   Neuladen um genau diese 26 px weiter nach unten. */
.js .reveal { opacity: 0; transform: translateY(26px); overflow-anchor: none; }
.js .reveal.in { opacity: 1; transform: none; }
.js .cards .reveal.in, .js .steps .reveal.in { transition-delay: calc(var(--i, 0) * 70ms); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .map-card, .r-gold path { transition: none; }
  .fleet-lamps.is-active .lamp { animation: none; opacity: 1; }
  .fleet-card { animation: none; }
  .lang-toggle { transition: none; }
  .js .hero-media .hero-light-hex,
  .js .hero-media .hero-light-on,
  .js .hero-media.lit .hero-light-hex,
  .js .hero-media.lit .hero-light-on { opacity: 1; animation: none; }
  .btn-gold::after { display: none; }
  .btn-gold, .hero-diag { animation: none; }
}

/* ---------- Legal pages (Impressum / Datenschutz) ---------- */
.legal-header {
  border-bottom: 1px solid var(--line); background: var(--ink-2); position: sticky; top: 0; z-index: 50;
}
.legal-header .header-inner { padding-block: 0.9rem; }
.legal-back { margin-left: auto; color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.legal-back:hover { color: var(--gold); }
.legal { padding: clamp(2.5rem, 6vw, 5rem) 0; }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem); margin-bottom: 2rem; }
.legal h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--gold); margin: 2.2rem 0 0.6rem; }
.legal h3 { font-size: 1.05rem; margin: 1.4rem 0 0.4rem; }
.legal p, .legal li { color: var(--text-dim); }
.legal p { margin: 0 0 0.9rem; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.4rem; }
.legal a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }
.legal .addr { color: var(--text); font-style: normal; line-height: 1.7; }
.legal .lead { color: var(--text); font-size: 1.1rem; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .cards .card:nth-child(3) { grid-column: 1 / -1; } /* sonst steht sie allein neben einer Luecke */
  /* Unter 980 px waere die waagerechte Achse nur noch ein Strich ueber der
     ersten Zeile - dort laeuft die Abfolge senkrecht. */
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { display: none; }
  .step {
    display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1.4rem;
    padding: 0 0 2.1rem 0;
  }
  .step:not(:last-child)::before {
    content: ""; position: absolute; left: 21px; top: 50px; bottom: 0; width: 2px;
    background: var(--gold); opacity: 0.28;
  }
  .step-n { grid-row: 1 / span 2; align-self: start; margin: 0; width: 44px; height: 44px; }
  .step h3 { align-self: center; margin: 0; }
  /* Zu schmal fuer ein Overlay: Daten wieder ueber die Karte stellen. */
  .contact-grid { display: block; }
  .contact-info {
    position: static; width: auto; margin: 0 0 1.2rem; justify-self: stretch;
    background: var(--surface); backdrop-filter: none;
  }
  .contact-grid .map-card { min-height: 400px; }
  /* Handy und Tablet: der Hero hat keine feste Hoehe, also liegt das Band dort nicht
     auf, sondern steht wieder im Fluss. */
  .trustbar {
    position: static; height: auto; margin-top: 0; display: block;
    background: var(--ink-2); backdrop-filter: none;
    border-block: 1px solid var(--line);
  }
  .hero-text { padding-bottom: 3rem; }
  /* Schmale Schirme zurueck ins 2x2-Raster: in einem umgebrochenen Flex-Band
     stuenden die Rauten am Zeilenanfang wie Aufzaehlungspunkte. */
  .trustbar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding-block: 0; }
  .trust-item {
    flex-direction: column; align-items: flex-start; gap: 0.15rem;
    padding: 0.95rem var(--pad);
    border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  }
  .trust-item + .trust-item::before { display: none; }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(-n+2) { border-top: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  /* Hero split -> gestapelt */
  .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 60px; } /* genau die Kopfhoehe - keine schwarze Flaeche ueber dem Foto */
  .hero-text { padding-top: 1.75rem; order: 2; padding-right: var(--pad); } /* mobil: keine Diagonale, symmetrisch */
  .hero-title { width: auto; } /* Firmenname mobil voll breit -> via text-align echt zentriert */
  .hero-title .ht-top { white-space: normal; } /* auf schmalen Screens umbrechen statt ueberlaufen */
  .hero-lead { margin-inline: auto; } /* Lead-Box mittig unter dem Titel */
  .hero-media { order: 1; min-height: 32svh; border-bottom: 2px solid var(--gold); }
  /* Mobil hat die Textspalte keine feste Hoehe: das Zeichen steht dort
     wieder im Fluss, mittig unter der Fussnote. */
  .hero-seal img { width: 132px; }
  .hero-media::before, .hero-media::after, .hero-diag { display: none; }
  /* Ueber uns -> gestapelt, die Inhaber zuerst */
  /* Zu schmal fuer Text auf dem Foto: Zitat unter das Bild */
  .team-stage::after { display: none; }
  .team-over { position: static; transform: none; width: auto; padding: 1.2rem 1rem 1.4rem; background: var(--ink-2); }
}

@media (max-width: 720px) {
  .header-cta { display: none; }
  .header-inner { gap: 0.6rem; }
  .lang-toggle { width: 46px; height: 46px; border-radius: 10px; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    margin-left: auto;
  }
  .nav-toggle span { width: 20px; height: 2px; background: var(--text); margin-inline: auto; transition: 0.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); }
  .nav { margin-left: auto; }
  .nav-menu {
    position: fixed; inset: 64px 0 auto 0; flex-direction: column; gap: 0;
    background: rgba(10,11,13,0.97); backdrop-filter: blur(14px);
    border-block: 1px solid var(--line); padding: 0.5rem var(--pad) 1rem;
    transform: translateY(-120%); transition: transform 0.35s var(--ease); z-index: -1;
  }
  .nav-menu.open { transform: translateY(0); }
  .nav-menu a { padding: 0.95rem 0.4rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); color: var(--text); }
  .nav-menu a::after { display: none; }

  .cards { grid-template-columns: 1fr; }
  /* Einblicke: die Beschreibung steht unter dem Bild statt darauf */
  .fleet-cards { position: static; aspect-ratio: auto; }
  .fleet-card { position: static; width: auto; margin-top: 1rem; }
  .fleet-hint { display: block; color: var(--text-dim); font-size: 0.92rem; border-color: var(--line); text-align: center; }
  .fleet-hint p { margin: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }

  .mobile-callbar {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 90;
    padding: 0.6rem var(--pad) calc(0.6rem + env(safe-area-inset-bottom));
    background: rgba(10,11,13,0.92); backdrop-filter: blur(12px); border-top: 1px solid var(--line);
  }
  .mobile-callbar .btn { width: 100%; justify-content: center; }
  body { padding-bottom: 4.5rem; }
  .hero { padding-top: 62px; }
}

/* ---------- Touch: Tippflaechen mindestens 44 px ---------- */
@media (max-width: 1180px) {
  .lang-toggle { height: 44px; }
  .footer-nav, .footer-contact { gap: 0; }
  .footer-nav a, .footer-contact a, .footer-contact span { padding-block: 0.62rem; }
}
/* Handy: Teamfoto auf 3:2 beschnitten - sonst werden die Gesichter daumenklein.
   Beide Gesichter liegen bei 28 % und 72 % der Bildbreite, bleiben also drin. */
@media (max-width: 720px) {
  .team-foto { aspect-ratio: 3 / 2; object-fit: cover; object-position: center 30%; }
}
/* Handy: Kennzahl waechst mit der Breite - "Garantie" passt so in jede Karte */
@media (max-width: 720px) {
  .stat-n { font-size: clamp(1rem, 4.3vw, 1.6rem); }
}
/* Sehr schmale Handys (320-400 px): Kennzahlen passen sonst nicht nebeneinander */
@media (max-width: 400px) {
  .stats { gap: 0.5rem; }
  .stat { padding: 0.9rem 0.25rem; }
}

/* ---------- Handy-Startseite: Werkstatt als Vollbild ----------
   Das Hallenfoto fuellt den ersten Bildschirm. Oben sitzen Firmenname,
   Kurztext und Knoepfe, ganz unten Pruefzeichen und Kleingedrucktes.
   Der obere Block erscheint erst, wenn die Lichtanimation durch ist
   (site.js setzt .text-ein), das Kleingedruckte steht sofort. */
.lead-kurz { display: none; }
@media (max-width: 720px) {
  .hero { min-height: 100svh; }
  .hero-media, .hero-text { grid-area: 1 / 1; }
  .hero-media { order: 0; min-height: 0; height: 100%; border-bottom: 0; }
  .hero-media img { object-position: center 30%; }
  .hero-media::after {
    display: block;
    background: linear-gradient(180deg, rgba(10,11,13,0.1) 0%, rgba(10,11,13,0.45) 22%, rgba(10,11,13,0.72) 45%, rgba(10,11,13,0.8) 70%, var(--ink) 96%);
  }
  .hero-text {
    z-index: 5; background: transparent; min-height: calc(100svh - 62px);
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto auto auto 1fr auto;
    column-gap: 0.9rem; align-items: center; padding: 37svh var(--pad) 1.4rem; /* Text beginnt unterhalb der Sechseck-Lampen */
  }
  .hero-text::after { display: none; }
  .hero-title { grid-column: 1 / -1; margin: 0 auto 0.7rem; font-size: 9.1vw; }
  .hero-title .ht-top { white-space: nowrap; }      /* 9,1vw: passt von 320 px an in eine Zeile */
  .hero-title .gold { font-size: 1.32em; }
  .hero-title, .hero-lead { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75); }
  .hero-lead { grid-column: 1 / -1; font-size: 1.05rem; margin: 0 auto; text-wrap: balance; }
  .hero-lead .lead-lang { display: none; }
  .hero-lead .lead-kurz { display: inline; }
  .hero-actions { grid-column: 1 / -1; flex-wrap: nowrap; gap: 0.6rem; margin: var(--hero-gap) 0 0; width: 100%; max-width: none; }
  .hero-actions .btn { flex: 1 1 0; padding: 0.9rem 0.5rem; font-size: 1rem; justify-content: center; }
  .hero-seal { grid-column: 1 / -1; justify-self: center; margin: var(--hero-gap) 0 0; }
  .hero-seal img { width: 116px; }
  .hero-note { grid-column: 1 / -1; grid-row: 7; align-self: end; text-align: center; margin: 0; font-size: 0.78rem; max-width: none; }
  /* Sanft statt aufploppen: langsam anlaufende, weich auslaufende Kurve
     (--ease springt sofort fast auf voll), dazu eine Unschaerfe, die sich
     scharf zieht. */
  .js .hero .hero-title, .js .hero .hero-lead, .js .hero .hero-actions {
    opacity: 0; transform: translateY(10px); filter: blur(8px);
    transition: opacity 1.6s cubic-bezier(0.45, 0, 0.25, 1), transform 1.6s cubic-bezier(0.45, 0, 0.25, 1), filter 1.6s cubic-bezier(0.45, 0, 0.25, 1);
  }
  .js .hero.text-ein .hero-title, .js .hero.text-ein .hero-lead, .js .hero.text-ein .hero-actions { opacity: 1; transform: none; filter: none; }
  .js .hero.text-ein .hero-lead { transition-delay: 0.25s; }
  .js .hero.text-ein .hero-actions { transition-delay: 0.5s; }
  /* Siegel und Kleingedrucktes stehen ganz unten im ersten Bild - die Scroll-
     Einblendung wuerde dort nie ausloesen. Sofort sichtbar. */
  .js .hero .hero-note { opacity: 1; transform: none; }
  .js .hero .hero-seal { opacity: 0; transform: none; transition: opacity 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.6s; }
  .js .hero.text-ein .hero-seal { opacity: 1; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .js .hero .hero-title, .js .hero .hero-lead, .js .hero .hero-actions { opacity: 1; transform: none; filter: none; transition: none; }
}
/* Anrufleiste erst, wenn die Hero-Knoepfe aus dem Bild sind */
.js .mobile-callbar { transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.js .mobile-callbar.aus { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ---------- Weicher Uebergang Kopf -> Foto (Handy, Tablet) ----------
   Das Foto laeuft bis nach oben hinter den Kopf. Unter Logo und Menue
   bleibt es voll dunkel, direkt darunter blendet es auf ~40 px weich ins
   Bild - statt der harten Kante an der Fotooberkante. */
@media (max-width: 960px) {
  .hero { padding-top: 0; --kopf: 60px; }
  .hero-media::before {
    display: block; content: ""; position: absolute; inset: 0 0 auto 0; z-index: 3;
    width: auto; height: calc(var(--kopf) + 40px); clip-path: none;
    background: linear-gradient(180deg, var(--ink) 0, var(--ink) var(--kopf), rgba(10, 11, 13, 0) 100%);
  }
  .hero-media { min-height: calc(32svh + var(--kopf)); }
}
@media (max-width: 720px) {
  .hero { --kopf: 62px; }
  /* Schrift beginnt an der Unterkante der Sechseck-Lampen (40svh); auf niedrigen
     Bildschirmen hoeher, damit Siegel, Sterne und Kleingedrucktes in den ersten
     Bildschirm passen (Block ~430 px hoch). */
  .hero-text { min-height: 100svh; padding-top: min(40svh, calc(100svh - 440px)); }
}

/* Grosse Tablets / kleine Laptops: Leistungsband braucht sonst 1065 px und
   bricht auf zwei Zeilen um - enger gesetzt passt es in eine. */
@media (min-width: 961px) and (max-width: 1180px) {
  .trustbar-grid { gap: 0.55rem 1.3rem; }
  .trust-item + .trust-item::before { left: -0.8rem; }
  .trust-k { letter-spacing: 0.08em; }
  .trustbar-grid { padding-inline: 1rem; }
  .trust-k, .trust-v { font-size: 0.74rem; }
}