/* =====================================================================
   Musa Facility Services — Website-Stylesheet
   Corporate-Design-Quelle: branding/Corporate-Design.md
   Bewusst kein Google-Fonts-CDN (DSGVO: IP-Uebertragung an Google beim
   Laden externer Schriften, siehe LG Muenchen I, Urteil v. 20.01.2022,
   Az. 3 O 17493/20) - Inter/Source Sans Pro werden stattdessen SELBST
   GEHOSTET ausgeliefert (siehe @font-face unten, Dateien aus dem zentralen
   assets/fonts/ - Design-Vereinheitlichung mit Rechnung-PDF/Admin-Bereich,
   siehe branding_konstanten.py). Der Systemschrift-Fallback in --font-head/
   --font-body bleibt fuer den seltenen Fall, dass die Font-Datei einmal
   nicht laedt (z. B. sehr langsame Verbindung), erhalten.
   ===================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSans3-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSans3-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Source Sans Pro';
  src: url('../fonts/SourceSans3-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Corporate-Design-Farben */
  --petrol: #0E5C63;
  --petrol-dark: #0A4448;
  --gold: #D6A34A;
  --gold-light: #E8C078;
  --graphit: #2B2E33;
  --offwhite: #F7F5F1;
  --white: #FFFFFF;
  /* --gray ist bewusst dunkler als die urspruengliche Markenfarbe #8A8274:
     die war auf Weiss/Offwhite nur 3.8:1 Kontrast (WCAG AA verlangt 4.5:1 fuer
     Fliesstext) - betraf u. a. den DSGVO-Einwilligungstext im Formular. Diese
     Abstufung ist die gleiche warme Taupe-Nuance, nur dunkler. */
  --gray: #6E6656;
  --gold-text: #7A5A1D; /* wie --gold, aber kontraststark genug fuer Text auf hellem Grund (Eyebrows) */
  --border: #DDD8CC;

  --font-head: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --font-body: 'Source Sans Pro', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;

  --max-width: 1180px;
  --radius: 12px;
  --shadow: 0 2px 10px rgba(43, 46, 51, 0.08);
  --shadow-lg: 0 8px 30px rgba(43, 46, 51, 0.14);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; }
/* [hidden] muss IMMER gewinnen, auch gegen .btn/.card usw., die selbst
   "display" setzen (gleiche Spezifitaet wie [hidden], author-CSS schlaegt
   sonst die UA-Regel) - betrifft u.a. die Buchungsassistent-Buttons und
   .page-section (Tab-Navigation, main.js). */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--graphit);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* verhindert horizontales Scrollen durch das per translateX
    ausgeblendete Mobil-Menu (position:fixed + transform kann in manchen
    Browsern trotzdem den scrollbaren Bereich vergroessern) */
  width: 100%;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--petrol); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--petrol);
  line-height: 1.2;
  margin: 0 0 .6em 0;
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.25rem; }
/* Erlaubt eine semantisch korrekte Ueberschriftenebene (kein Sprung wie
   h1 -> h3), ohne die bestehende Optik einer kleineren Unterueberschrift
   zu veraendern - Tag und visuelle Groesse duerfen unabhaengig voneinander
   gewaehlt werden. */
.heading-sm { font-size: 1.25rem; }
p { margin: 0 0 1em 0; }
ul { padding-left: 1.2em; }
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--petrol); color: #fff;
  padding: .75rem 1.25rem; z-index: 1000; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
/* Honeypot-Feld im Kontaktformular: fuer sehende wie assistive Nutzer
   unsichtbar (im Gegensatz zu .sr-only bewusst NICHT im Accessibility-Tree
   erreichbar, siehe aria-hidden im Markup), nur einfache Bots fuellen es. */
.hp-field {
  position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: 999px; font-weight: 600; font-family: var(--font-head);
  font-size: .95rem; border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--graphit); }
.btn--gold:hover { background: #c8933f; box-shadow: var(--shadow); }
.btn--outline { background: transparent; border-color: var(--petrol); color: var(--petrol); }
.btn--outline:hover { background: var(--petrol); color: #fff; }
.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.6); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.15); }
.btn--block { width: 100%; }

/* ---------- Header / Navigation ----------
   Statt der fruehen Logo-Datei (Wortmarke als Live-Text INNERHALB der SVG -
   ein <img src="logo.svg"> laedt als isoliertes Dokument und kann die
   selbstgehosteten Inter-/Source-Sans-Fonts der Hauptseite NICHT sehen, faellt
   also immer auf Segoe UI/Arial zurueck, siehe Diskussion um das Hero-Siegel):
   das runde Vollfarb-Siegel (Text bereits in Pfade konvertiert, siehe
   vertrieb/generiert/arbeitskleidung/brustlogo.svg - garantiert schriftunab-
   haengig) plus echter HTML-Schriftzug daneben, der das self-hosted Inter der
   Hauptseite tatsaechlich nutzt. 8 Menuepunkte + CTA passen ab ca. 1180px in
   eine Zeile; darunter aufgeraeumte Burger-Navigation statt umbrechender/
   gequetschter Zeile. */
.site-header {
  border-bottom: 2px solid var(--gold);
  position: sticky; top: 0; background: var(--petrol-dark);
  z-index: 500;
  transition: background-color .25s ease, border-color .25s ease;
}
.site-header .container { max-width: 1300px; }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .65rem; padding-bottom: .65rem;
}
.site-header__brand { display: flex; align-items: center; gap: .85rem; }
.site-header__seal {
  height: 66px; width: 66px; flex: none; border-radius: 50%;
  background: var(--offwhite); padding: 4px;
}
.site-header__wordmark { display: flex; flex-direction: column; line-height: 1.3; }
.site-header__name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--white); }
.site-header__tagline { font-family: var(--font-head); font-weight: 500; font-size: .8rem; color: var(--gold-light); }

/* Dunkler Header, sobald der Fahrzeug-Tab aktiv ist (siehe main.js
   theme-fahrzeug-Klasse) - das Siegel mit heller Unterlage funktioniert auf
   beiden dunklen Grundfarben gleich gut, braucht also keine eigene Variante
   mehr (siehe branding/Corporate-Design.md Abschnitt 7). */
body.theme-fahrzeug .site-header {
  background: rgba(11,20,22,.96); border-bottom-color: rgba(255,255,255,.1);
}
body.theme-fahrzeug .main-nav a { color: #EDEAE3; }
body.theme-fahrzeug .main-nav a:hover, body.theme-fahrzeug .main-nav a.is-active { color: var(--gold-light); }
body.theme-fahrzeug .main-nav__legal { color: #9CA8AA; }
body.theme-fahrzeug .nav-toggle__bar { background: #EDEAE3; }
@media (max-width: 1180px) {
  body.theme-fahrzeug .main-nav { background: #0B1416; }
  body.theme-fahrzeug .main-nav ul li { border-bottom-color: rgba(255,255,255,.1); }
}
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: none;
  cursor: pointer; padding: .5rem;
}
.nav-toggle__bar { width: 26px; height: 2.5px; background: #EDEAE3; border-radius: 2px; }
.main-nav { display: flex; align-items: center; gap: 1.2rem; }
.main-nav ul { list-style: none; display: flex; align-items: center; gap: 1.05rem; margin: 0; padding: 0; }
.main-nav a {
  color: #EDEAE3; font-family: var(--font-head); font-weight: 600; font-size: .9rem;
  padding: .3rem 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.main-nav a:hover, .main-nav a.is-active { color: var(--gold-light); border-bottom-color: var(--gold); text-decoration: none; }
.main-nav__cta { padding: .55rem 1.3rem; font-size: .85rem; }
.main-nav__legal { font-size: .78rem; font-weight: 600; color: #9CA8AA; }
.main-nav__legal:hover { color: var(--gold-light); }
.main-nav ul li:nth-child(7) { margin-left: .3rem; padding-left: 1.05rem; border-left: 1px solid rgba(255,255,255,.15); }

@media (max-width: 1180px) {
  .nav-toggle { display: flex; }
  .main-nav {
    position: fixed; inset: 114px 0 0 0; background: var(--petrol-dark); flex-direction: column;
    align-items: flex-start; padding: 1.5rem 1.25rem; gap: 1.5rem; transform: translateX(100%);
    visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); visibility: visible; transition: transform .25s ease; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .main-nav ul li { width: 100%; border-bottom: 1px solid rgba(255,255,255,.1); }
  .main-nav ul li:nth-child(7) { margin-left: 0; padding-left: 0; border-left: none; }
  .main-nav ul li a { display: block; padding: .9rem 0; }
  .main-nav__cta { width: 100%; }
}

@media (max-width: 480px) {
  .site-header__seal { height: 48px; width: 48px; }
  .site-header__name { font-size: 1rem; }
  .site-header__tagline { font-size: .7rem; }
  .site-header__inner { padding-top: .5rem; padding-bottom: .5rem; }
  .main-nav { inset: 81px 0 0 0; }
}

/* ---------- Hero ----------
   Ohne Foto (Standardfall, solange keine echten Bilder vorliegen): zentrierter
   Text-Block auf Flaechenfarbe. Sobald ein echtes Hero-Foto in assets/images/
   liegt (has_image()), schaltet start.html auf .hero--photo um: das Foto
   liegt als volle Breite im Hintergrund, der Text steht direkt darauf -
   dieselbe Machart wie der Fahrzeug-Hero (.fzg-hero--photo weiter unten),
   nur mit den hellen Markenfarben statt dem dunklen Fahrzeug-Theme. */
.hero {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-dark) 100%);
  color: var(--white); padding: 4.5rem 0 5rem;
}
.hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.hero h1 { color: var(--white); }
.hero p.lead { font-size: 1.15rem; color: var(--offwhite); max-width: 46ch; margin-left: auto; margin-right: auto; }
.hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; justify-content: center; }
.hero__badge {
  display: inline-block; background: rgba(214,163,74,.16); color: var(--gold-light);
  border: 1px solid rgba(214,163,74,.4); border-radius: 999px; padding: .35rem 1rem;
  font-size: .8rem; font-weight: 600; margin-bottom: 1.2rem; font-family: var(--font-head);
}
.hero__kicker {
  display: block; color: var(--gold-light); font-family: var(--font-head); font-weight: 700;
  font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; margin-bottom: .9rem;
}
.hero h1 .hero__accent { color: var(--gold-light); }

/* ---------- Hero mit Foto: volle Breite, Text liegt direkt auf dem Bild ---------- */
.hero--photo {
  min-height: 560px; display: flex; align-items: center; padding: 6.5rem 0 4.5rem;
  background: var(--petrol-dark); /* Fallback, solange das Foto laedt */
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__bg-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; display: block; }
/* Scrim von links (dunkel, fuer die Textspalte) nach rechts (klar, damit das
   Foto sichtbar bleibt) statt eines gleichmaessigen Verdunklers ueber dem
   ganzen Bild - so bleibt das Motiv erkennbar und der Text trotzdem lesbar. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(9,50,54,.94) 0%, rgba(9,50,54,.86) 30%, rgba(9,50,54,.5) 56%, rgba(9,50,54,.1) 78%),
    linear-gradient(0deg, rgba(6,20,22,.55) 0%, transparent 42%);
}
.hero--photo .hero__inner { position: relative; z-index: 1; max-width: 620px; margin: 0; text-align: left; }
.hero--photo .hero__actions { justify-content: flex-start; }
.hero--photo p.lead { margin-left: 0; margin-right: 0; }
/* Rundes Siegel unten rechts, wo der Scrim das Foto schon klar zeigt -
   dieselbe schriftunabhaengige Datei wie auf dem Arbeitskleidung-Brustlogo
   (Text bereits in Pfade konvertiert, siehe vertrieb/generiert/arbeitskleidung/
   brustlogo-negativ.svg), damit es unabhaengig von auf dem Geraet installierten
   Schriften immer exakt gleich aussieht. */
/* Vollfarb-Siegel (petrolfarbene Flaeche) statt der Negativ-Variante - auf
   dem dunklen Scrim braucht es eine helle Unterlage, sonst verschwindet die
   petrolfarbene Kreisflaeche fast im dunklen Hintergrund. */
.hero__seal {
  position: absolute; z-index: 1; right: clamp(1.25rem, 4vw, 3.5rem); bottom: 2rem;
  width: 132px; height: 132px; border-radius: 50%; background: var(--offwhite);
  padding: 6px; filter: drop-shadow(0 10px 24px rgba(6,20,22,.5));
  transform: rotate(-7deg);
}
.hero__seal img { width: 100%; height: 100%; display: block; border-radius: 50%; }
@media (max-width: 880px) {
  .hero--photo { min-height: 460px; padding: 5rem 0 3.5rem; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(9,50,54,.55) 0%, rgba(9,50,54,.88) 62%, rgba(9,50,54,.96) 100%);
  }
  .hero--photo .hero__inner { max-width: none; }
  .hero__seal { width: 84px; height: 84px; right: 1rem; bottom: 1.25rem; }
}

/* ---------- Fotos (nur sichtbar, sobald echte Dateien in assets/images/ liegen) ---------- */
.media-photo { width: 100%; min-height: 220px; object-fit: cover; border-radius: var(--radius); display: block; }

/* ---------- Vertrauensleiste ----------
   Bewusst als Grid statt flex-wrap (Stand 2026-07-09): flex-wrap liess Karten
   je nach Textlaenge unterschiedlich umbrechen, wodurch die vierte Karte
   sichtbar "verrutscht" unter die anderen fiel. Das Grid erzwingt entweder
   4 gleich breite Spalten in einer Reihe oder ein sauberes 2x2/1-Spalten-
   Layout darunter - nie ein schiefes Wrapping. */
.trust-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.2rem 2rem; margin: 1.8rem 0 .4rem;
}
.trust-bar__item { display: flex; align-items: flex-start; gap: .8rem; max-width: none; }
@media (max-width: 900px) {
  .trust-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .trust-bar { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
}
.trust-bar__icon {
  width: 46px; height: 46px; border-radius: 50%; background: var(--offwhite); color: var(--petrol);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.trust-bar__item strong { display: block; font-family: var(--font-head); font-size: .95rem; color: var(--graphit); }
.trust-bar__item span { font-size: .82rem; color: var(--gray); }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section--alt { background: var(--offwhite); }
.section__head { max-width: 62ch; margin: 0 auto 2.5rem; text-align: center; }
.section__head p { color: var(--gray); font-size: 1.05rem; }
.eyebrow {
  display: block; font-family: var(--font-head); font-weight: 700; color: var(--gold-text);
  letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; margin-bottom: .5rem;
}

.grid { display: grid; gap: 1.6rem; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .grid--5 { grid-template-columns: 1fr; }
}

/* ---------- section__head mit Zierlinien (Startseite: "Unsere Leistungen") ---------- */
.section__head--rule { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.section__head--rule .eyebrow { margin-bottom: 0; }
.section__head--rule__rule { display: flex; align-items: center; gap: 1rem; width: 100%; max-width: 420px; }
.section__head--rule__rule::before, .section__head--rule__rule::after {
  content: ""; flex: 1 1 60px; height: 2px; background: var(--gold);
}
/* Zweifarbige Kurz-Headline, dieselbe Formel wie im Leistungsflyer
   ("WIR MACHEN ALLES SAUBER" - siehe Bilder/Musa_02_Leistungsflyer.pdf),
   nur in den hellen Sektionsfarben statt Weiss/Gold auf Petrol. */
.section__head--rule h2 { margin: 0; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.section__head--rule h2 .accent { color: var(--gold-text); }

/* ---------- Leistungs-Kacheln mit Foto (Startseite) ---------- */
.service-card {
  display: block; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); text-decoration: none; color: inherit;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg); text-decoration: none;
  border-color: rgba(214,163,74,.5);
}
.service-card__photo {
  position: relative; height: 132px; overflow: hidden;
  background: linear-gradient(150deg, var(--petrol) 0%, var(--petrol-dark) 100%);
  border-bottom: 3px solid var(--gold);
}
.service-card__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.service-card:hover .service-card__photo img { transform: scale(1.08); }
/* Kleine Eck-Fahne oben rechts - dezenter Verweis auf die diagonal
   angeschnittenen Foto-Kacheln des Flyers, ohne die Karte selbst zu kippen. */
.service-card__photo::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-style: solid; border-width: 0 26px 26px 0; border-color: transparent var(--gold) transparent transparent;
  opacity: .9;
}
.service-card__icon {
  position: absolute; left: 50%; bottom: 0; width: 54px; height: 54px; border-radius: 50%;
  background: var(--petrol-dark); border: 2px solid var(--gold); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center; transform: translate(-50%, 50%);
  box-shadow: 0 0 0 4px var(--white), 0 4px 12px rgba(43,46,51,.3);
}
.service-card__body { padding: 2.3rem 1.1rem 1.4rem; text-align: center; }
/* "Restaurant-/Gastronomie-Reinigung" ist auf 5 Spalten die laengste Kachel-
   Ueberschrift und wurde ohne Umbruch-Erlaubnis rechts vom Card-Rand
   abgeschnitten (Slash/Bindestrich allein reichen dem Browser nicht immer
   als Umbruchpunkt) - erzwingt sauberen Umbruch statt Abschneiden. */
.service-card__body h3 {
  font-size: 1rem; margin-bottom: .4rem;
  overflow-wrap: break-word; word-break: break-word; hyphens: auto;
}
.service-card__body p { font-size: .86rem; color: var(--gray); margin: 0; }

.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover:not(.price-card--highlight) { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.card h2, .card h3 { margin-bottom: .5rem; }
.card--icon { text-align: left; }
.card__icon {
  width: 52px; height: 52px; border-radius: 50%; background: var(--offwhite);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem;
  color: var(--petrol);
}

/* ---------- Leistungslisten (Enthalten / Nicht enthalten) ---------- */
.service-block { border-top: 1px solid var(--border); padding: 2.5rem 0; }
.service-block:first-of-type { border-top: none; padding-top: 0; }
.service-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 1.5rem; }
@media (max-width: 750px) { .service-columns { grid-template-columns: 1fr; } }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 16px; height: 16px;
  border-radius: 50%; background: var(--petrol);
}
.checklist li::after {
  content: "✓"; position: absolute; left: 3px; top: .18em; color: #fff; font-size: .65rem; font-weight: 700;
}
.excludelist { list-style: none; padding: 0; margin: 0; color: var(--gray); }
.excludelist li { padding-left: 1.6rem; position: relative; margin-bottom: .5rem; }
.excludelist li::before { content: "–"; position: absolute; left: 0; color: var(--gray); font-weight: 700; }
.fit-note { background: var(--offwhite); border-left: 3px solid var(--gold); padding: 1rem 1.2rem; border-radius: 6px; margin-top: 1.2rem; }

/* ---------- Pricing ---------- */
.price-card { text-align: center; position: relative; }
.price-card.price-card--highlight { border-color: var(--gold); box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.price-card.price-card--highlight:hover { transform: translateY(-9px); }
.price-card__badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--graphit); font-size: .75rem; font-weight: 700;
  padding: .3rem .9rem; border-radius: 999px; font-family: var(--font-head);
}
.price-card__price { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--petrol); margin: .8rem 0; }
.price-card ul { list-style: none; padding: 0; text-align: left; margin: 1.2rem 0; }
.price-card ul li { padding: .35rem 0; border-bottom: 1px dashed var(--border); }

/* ---------- Sonstige Hinweistexte ---------- */
.section-note {
  text-align: center; color: var(--gray); font-size: .9rem; margin-top: 1rem;
}

/* ---------- CTA band ---------- */
.cta-band { background: var(--petrol); color: #fff; padding: 3rem 0; }
.cta-band h2 { color: #fff; margin-bottom: .3rem; }
.cta-band p { color: var(--offwhite); margin: 0; }
.cta-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.cta-band__actions { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; }
.form-field--full { grid-column: 1 / -1; }
label { font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--graphit); }
input, textarea, select {
  font: inherit; padding: .75rem .9rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--white); color: var(--graphit);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
textarea { resize: vertical; min-height: 130px; }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--gray); }
.form-consent input { margin-top: .3rem; }
.form-note { font-size: .85rem; color: var(--gray); margin-top: .8rem; }
/* Status-Rueckmeldung nach dem Absenden (Kontaktformular + Buchungsassistent):
   eigene Box statt schlichter Textzeile, damit die Rueckmeldung wie ein
   bewusst gestaltetes Ergebnis wirkt statt wie ein Debug-Hinweis. Nutzt
   dieselben CSS-Variablen wie der Rest der Seite, passt sich also automatisch
   an das dunkle Fahrzeug-Theme an (siehe #fahrzeug.fzg-theme weiter unten). */
.form-status.is-visible {
  display: flex; align-items: flex-start; gap: .7rem; margin-top: 1.2rem;
  padding: .9rem 1.1rem; border-radius: 10px; background: var(--offwhite);
  border: 1px solid var(--border); border-left: 3px solid var(--petrol);
  color: var(--graphit); font-size: .92rem; line-height: 1.5;
}
.form-status__icon { flex: none; color: var(--petrol); margin-top: .1rem; }
/* Fehler-Variante (siehe showFormStatus(..., "error") in main.js) - eigener
   roter Akzent, damit eine fehlgeschlagene Aktion nicht wie eine
   Erfolgsmeldung aussieht. */
.form-status.form-status--error {
  border-left-color: #C0392B; background: rgba(192, 57, 43, .08);
}
.form-status.form-status--error .form-status__icon { color: #C0392B; }

/* Nach erfolgreich abgeschickter Terminanfrage (Variante "Erst Termin
   bestaetigen lassen", siehe bookingWizard() in main.js): Zurueck-/Absenden-
   Buttons ausblenden, damit der Assistent nicht editierbar/abschickbar
   "unklar" stehen bleibt - die Erfolgsmeldung ist zu diesem Zeitpunkt die
   einzige sichtbare Handlungsaufforderung. */
.booking.is-submitted .booking__nav { display: none; }

/* ---------- Contact info cards ---------- */
.contact-methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.4rem; margin: 2rem 0; max-width: 780px; margin-left: auto; margin-right: auto; }
@media (max-width: 750px) { .contact-methods { grid-template-columns: 1fr; } }
.contact-method { text-align: center; padding: 1.6rem 1.2rem; }
.contact-form-wrap { max-width: 640px; margin: 0 auto; }
.contact-method__icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1rem; display: flex;
  align-items: center; justify-content: center; background: var(--offwhite); color: var(--petrol);
}

.service-notes { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem; }
.service-area-note {
  display: inline-flex; align-items: center; gap: .55rem; background: var(--offwhite);
  border: 1px solid var(--border); border-radius: 999px; padding: .6rem 1.2rem;
  font-family: var(--font-head); font-weight: 600; font-size: .9rem; color: var(--petrol);
}
.service-area-note svg { flex: none; }

/* ---------- Floating contact buttons ---------- */
.floating-contact {
  position: fixed; right: 1.2rem; bottom: 1.2rem; display: flex; flex-direction: column;
  gap: .7rem; z-index: 600;
}
.floating-contact__btn {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; color: #fff; box-shadow: var(--shadow-lg);
  transition: transform .15s ease;
}
.floating-contact__btn:hover { transform: scale(1.08); }
.floating-contact__btn--whatsapp { background: #25D366; }
.floating-contact__btn--phone { background: var(--petrol); }
.floating-contact__btn--mail { background: var(--gold); color: var(--graphit); }
@media (max-width: 480px) {
  .floating-contact { bottom: 1rem; right: 1rem; gap: .6rem; }
  .floating-contact__btn { width: 46px; height: 46px; }
}
/* Linksbuendige Fliesstextbloecke, die auf schmalen Bildschirmen ueber die
   volle Container-Breite laufen, liefen sonst unten rechts unter die fest
   positionierten Kontakt-Buttons (gefunden beim Mobile-Test von
   Impressum/Ueber-uns: letzte Textzeilen wurden vom WhatsApp-/Telefon-Icon
   verdeckt). Betrifft nur linksbuendige Bloecke, keine zentrierten Elemente
   (Hero, section__head, .lead) - daher kein Center-Versatz. */
@media (max-width: 620px) {
  .container--narrow,
  .service-block,
  .fit-note,
  .grid--2 {
    padding-right: 3.5rem;
  }
}


/* ---------- Footer ---------- */
.site-footer { background: var(--graphit); color: var(--offwhite); padding-top: 3rem; }
.site-footer__inner {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem;
}
@media (max-width: 800px) { .site-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .site-footer__inner { grid-template-columns: 1fr; } }
.site-footer__brand { display: flex; gap: .8rem; align-items: flex-start; }
.site-footer__name { font-family: var(--font-head); font-weight: 700; color: #fff; margin: 0; }
.site-footer__claim { color: var(--gold-light); font-size: .85rem; margin: .2rem 0 0; }
.site-footer__heading {
  color: var(--gold); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: .9rem;
}
.site-footer a { color: var(--offwhite); }
.site-footer a:hover { color: var(--gold-light); }
.site-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }
.site-footer__bottom-inner {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding: 1.2rem 1.25rem;
  font-size: .8rem; color: #A79E8F; /* eigener heller Grauton statt --gray: der Footer hat
    einen dunklen Hintergrund, --gray ist fuer helle Abschnitte auf 4.5:1 abgestimmt */
}
.site-footer__slogan { font-style: italic; }

/* =====================================================================
   Fahrzeug-Innenreinigung — eigenstaendiges Premium-Detailing-Design
   Ueberarbeitet 2026-07-09 (2. Iteration): Auftrag war, die Fahrzeug-Seite
   klar von der hellen, serioesen Buero-Seite abzusetzen und wie ein
   eigenstaendiger, hochwertiger Autoaufbereitungs-Bereich zu wirken statt
   einer eingefaerbten Kopie - siehe grosse Anfrage vom 2026-07-09: mehr
   Tiefe/Glassmorphism, groessere Typografie/Paketkarten, modernere Icons,
   elegantere Buttons/Hover-Effekte, mehr Dynamik durch Scroll-Reveal.
   Die meisten bestehenden Komponenten (.card, .btn--outline, Ueberschriften,
   Links, Eyebrows ...) benutzen bereits CSS-Variablen wie var(--petrol)/
   var(--white)/var(--graphit) - durch das Ueberschreiben dieser Variablen
   auf dem Sektions-Container erben alle Kind-Elemente automatisch die
   dunklen Farben; die Klassen unten kommen zusaetzlich fuer den eigenen
   Premium-Look obendrauf. ===================================================== */
#fahrzeug.fzg-theme {
  --white: #0A1315;
  --offwhite: #0F1B1E;
  --graphit: #ECE8E0;
  --gray: #9CA8AA;
  --border: rgba(255,255,255,.12);
  --petrol: #22A0AA;
  --petrol-dark: #0E5C63;
  --gold: #D6A34A;
  --gold-light: #F0CE8E;
  --gold-text: var(--gold); /* auf dunklem Grund hat das kraeftige Gold schon genug Kontrast */
  --shadow: 0 6px 20px rgba(0,0,0,.35);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.55);
  background:
    radial-gradient(1100px 640px at 85% 0%, rgba(28,138,147,.16), transparent 60%),
    radial-gradient(900px 520px at 10% 15%, rgba(214,163,74,.08), transparent 55%),
    var(--white);
  color: var(--graphit);
  position: relative;
}
/* Feines Grid-/Carbon-Muster ueber die gesamte Sektion, statt nur im Hero -
   gibt der ganzen Seite mehr Tiefe/Textur statt flacher Einzelfarbe. */
#fahrzeug.fzg-theme::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%);
}
#fahrzeug.fzg-theme > section { position: relative; z-index: 1; }
#fahrzeug.fzg-theme h1, #fahrzeug.fzg-theme h2, #fahrzeug.fzg-theme h3 {
  letter-spacing: -.015em; font-weight: 800;
}
#fahrzeug.fzg-theme h1 { font-size: clamp(2.6rem, 6vw, 4.1rem); }
#fahrzeug.fzg-theme h2 { font-size: clamp(2rem, 4.2vw, 2.75rem); }
#fahrzeug.fzg-theme h3 { font-size: 1.4rem; }
#fahrzeug.fzg-theme .section--alt { background: var(--offwhite); }
#fahrzeug.fzg-theme .card {
  background: linear-gradient(160deg, rgba(26,40,44,.72), rgba(15,25,28,.72));
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-color: rgba(255,255,255,.09);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s cubic-bezier(.2,.8,.2,1), border-color .3s ease;
}
#fahrzeug.fzg-theme .card:hover:not(.price-card--highlight) {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(214,163,74,.25);
  border-color: rgba(214,163,74,.35);
}
#fahrzeug.fzg-theme input,
#fahrzeug.fzg-theme textarea,
#fahrzeug.fzg-theme select {
  background: rgba(19,31,34,.8); border-color: rgba(255,255,255,.16); color: var(--graphit);
}
#fahrzeug.fzg-theme .form-consent { color: var(--gray); }
#fahrzeug.fzg-theme .eyebrow { display: inline-flex; align-items: center; gap: .5rem; }
#fahrzeug.fzg-theme .eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px rgba(214,163,74,.9);
}

/* Scoped Button-Veredelung: Gold-Sheen-Wischer beim Hover + Glass-Outline,
   statt der schlichten globalen .btn-Varianten. */
#fahrzeug.fzg-theme .btn--gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, #C08B37);
  position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(214,163,74,.28);
}
#fahrzeug.fzg-theme .btn--gold::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-130%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transition: transform .55s cubic-bezier(.2,.8,.2,1);
}
#fahrzeug.fzg-theme .btn--gold:hover { box-shadow: 0 14px 34px rgba(214,163,74,.42); }
#fahrzeug.fzg-theme .btn--gold:hover::after { transform: translateX(130%) skewX(-18deg); }
#fahrzeug.fzg-theme .btn--outline {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.28); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#fahrzeug.fzg-theme .btn--outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.5); }

/* ---------- Fahrzeug-Hero + Produktwahl: gemeinsame Video-Zone ----------
   Der Video-/Foto-Hintergrund liegt nicht mehr nur hinter .fzg-hero, sondern
   als ein Layer hinter Hero UND der direkt folgenden "Wie moechten Sie
   starten?"-Sektion (.fzg-produktwahl) - auf Wunsch, damit das Video nicht
   hart an der Hero-Kante abgeschnitten wirkt. Beide Sektionen bleiben in
   sich unveraendert, sie bekommen nur einen gemeinsamen, absolut
   positionierten Hintergrund-Layer als Geschwister-Element. */
.fzg-hero-zone { position: relative; }
.fzg-hero-zone > section { position: relative; z-index: 1; }

/* ---------- Fahrzeug-Hero ---------- */
.fzg-hero { position: relative; overflow: hidden; padding: 6.5rem 0 5rem; }
.fzg-hero__glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(214,163,74,.2), transparent 60%),
    radial-gradient(820px 460px at 100% 0%, rgba(34,160,170,.45), transparent 55%);
  animation: fzg-glow-drift 14s ease-in-out infinite alternate;
}
.fzg-hero__grid {
  position: absolute; inset: -10% -10% auto -10%; height: 70%; pointer-events: none;
  background-image: radial-gradient(rgba(214,163,74,.16) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(600px 340px at 50% 0%, rgba(0,0,0,.6), transparent 75%);
  animation: fzg-grid-drift 18s linear infinite;
}
@keyframes fzg-grid-drift { from { background-position: 0 0; } to { background-position: 52px 26px; } }
@keyframes fzg-glow-drift {
  from { opacity: .75; transform: translateY(0); }
  to { opacity: 1; transform: translateY(18px); }
}
.fzg-hero__inner { position: relative; max-width: 800px; margin: 0 auto; text-align: center; }
.fzg-hero h1 { color: #fff; }
.fzg-gradient-text {
  background: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 45%, #fff 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fzg-hero .lead { font-size: 1.2rem; color: var(--gray); max-width: 46ch; margin-left: auto; margin-right: auto; }
.fzg-hero .hero__actions { justify-content: center; margin-top: 1.8rem; }
.fzg-badge {
  display: inline-flex; align-items: center; gap: .55rem; background: rgba(214,163,74,.14);
  color: var(--gold-light); border: 1px solid rgba(214,163,74,.4); border-radius: 999px;
  padding: .4rem 1.1rem .4rem .9rem; font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  margin-bottom: 1.4rem; font-family: var(--font-head); text-transform: uppercase;
}
.fzg-badge__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold-light);
  box-shadow: 0 0 0 0 rgba(240,206,142,.6); animation: fzg-pulse 2.2s ease-out infinite;
}
@keyframes fzg-pulse {
  0% { box-shadow: 0 0 0 0 rgba(240,206,142,.55); }
  70% { box-shadow: 0 0 0 8px rgba(240,206,142,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,206,142,0); }
}
.fzg-hero__facts {
  list-style: none; display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin: 2.8rem 0 0; padding: 0; border-top: none;
}
.fzg-fact {
  font-size: .85rem; color: var(--gray); text-align: left; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: .8rem 1.3rem;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .25s ease, transform .25s ease;
}
.fzg-fact:hover { border-color: rgba(214,163,74,.4); transform: translateY(-2px); }
.fzg-fact span {
  display: block; font-family: var(--font-head); font-weight: 800; color: var(--gold-light); font-size: 1.15rem;
}
@media (max-width: 620px) { .fzg-hero { padding: 4rem 0 3rem; } .fzg-hero__facts { gap: .8rem; } .fzg-fact { flex: 1 1 auto; } }

/* ---------- Fahrzeug-Hero: echtes Foto als Hintergrund ----------
   Nutzt eines der drei vom Kunden bereitgestellten Fotos (Bilder/Bild 3.png,
   siehe website/src/assets/images/fahrzeug-hero.jpg) als starken Hero-
   Hintergrund statt nur Farbverlauf/Punktraster - siehe Anfrage 2026-07-09
   "ein Bild als starker Hero-/Hintergrundbereich oben". Dunkler Scrim-
   Verlauf sorgt dafuer, dass Badge/Ueberschrift/Text/Facts trotzdem gut
   lesbar bleiben; has_image() in fahrzeug.html faellt automatisch auf das
   reine Farbverlauf-Design zurueck, falls das Foto einmal fehlen sollte. */
.fzg-hero--photo { min-height: 640px; display: flex; align-items: center; padding: 7rem 0 5.5rem; }
/* Musa-Farbverlauf als Untergrund der ganzen Video-Zone (nicht mehr das
   Foto) - dasselbe Farbschema wie der Rest der Fahrzeug-Seite, damit an den
   Raendern/oben/unten des Videos (siehe object-fit: contain unten) kein
   fremdes Bild mehr durchscheint, sondern nur noch Marken-Petrol/Gold. */
.fzg-hero__media {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(1200px 700px at 80% 0%, rgba(34,160,170,.28), transparent 60%), var(--petrol-dark);
}
/* Foto bleibt im DOM, ist aber standardmaessig unsichtbar - es ist NUR noch
   der echte Notfall-Fallback (siehe main.js: prefers-reduced-motion oder
   wenn kein einziges Video abspielen kann), nicht mehr staendig sichtbar. */
.fzg-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0; }
.fzg-hero__media.is-static-fallback .fzg-hero__img { opacity: 1; }
.fzg-hero__media.is-static-fallback .fzg-hero__video { display: none; }
/* Wechselnder Video-Hintergrund: die 4 <video>-Elemente liegen uebereinander.
   object-fit: contain zeigt jedes Video IMMER vollstaendig (nichts wird oben/
   unten/seitlich abgeschnitten) - die Hochformat-Clips fuellen dadurch nicht
   die gesamte Breite aus, der Rest bleibt der Marken-Farbverlauf von
   .fzg-hero__media statt eines Fotos. main.js schaltet jeweils genau ein
   Video per Opacity auf ".is-active", der Rest bleibt unsichtbar/pausiert. */
.fzg-hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; opacity: 0;
  transition: opacity .9s ease; pointer-events: none;
}
.fzg-hero__video.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fzg-hero__video { display: none; } }
/* Auf dem Handy ist der Bildschirm selbst fast so hochformatig wie die
   Videos - dort auf "cover" umschalten, das fuellt dann die komplette
   Breite mit nur minimalem Beschnitt (statt der Farbverlauf-Raender links/
   rechts, die auf Desktop noetig sind, wo der Hero deutlich breiter als
   hoch ist). */
@media (max-width: 700px) {
  .fzg-hero__video { object-fit: cover; object-position: center; }
}
.fzg-hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(8,15,17,.6) 0%, rgba(8,15,17,.72) 45%, rgba(8,15,17,.94) 100%),
    radial-gradient(760px 460px at 15% 0%, rgba(214,163,74,.16), transparent 60%);
}
/* Deckt jetzt Hero + Produktwahl-Sektion gemeinsam ab (siehe .fzg-hero-zone) -
   etwas gleichmaessiger/dunkler ueber die ganze Hoehe, statt erst spaet stark
   abzudunkeln, damit die Produktwahl-Ueberschrift auf dem hellen Text
   (--graphit) trotz laufendem Video weiterhin gut lesbar bleibt. */
.fzg-hero__scrim--tall {
  background:
    linear-gradient(180deg, rgba(8,15,17,.68) 0%, rgba(8,15,17,.8) 40%, rgba(8,15,17,.9) 70%, rgba(8,15,17,.97) 100%),
    radial-gradient(760px 460px at 15% 0%, rgba(214,163,74,.14), transparent 60%);
}
.fzg-hero--photo .fzg-hero__glow { opacity: .6; }
.fzg-hero--photo .fzg-hero__inner { width: 100%; }
@media (max-width: 620px) { .fzg-hero--photo { min-height: 560px; padding: 5.5rem 0 3.5rem; } }

/* ---------- Fahrzeug: echte Vorher/Nachher- und Ergebnis-Galerie ----------
   4 gleich grosse Kacheln (Hauptbild, Zusatzbild, Vorher, Nachher) statt
   einer gross+klein-Aufteilung - eine urspruengliche Version mit einer
   schmalen Spalte fuer ein einzelnes Bild schnitt dieses zu stark an. */
.fzg-gallery { display: flex; flex-direction: column; gap: 1.6rem; }
/* Nur noch 2 gleich grosse Bilder nebeneinander (Vorher/Nachher-Paar
   entfernt) - eine kuerzere Galerie-Sektion laesst mehr vom durchlaufenden
   Video-Hintergrund (siehe .fzg-hero-zone) sichtbar, statt ihn durch zwei
   volle Bildreihen komplett zu verdecken. */
.fzg-gallery--even {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
}
.fzg-gallery__item {
  position: relative; margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.1); cursor: zoom-in;
}
.fzg-gallery__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}
.fzg-gallery__item:hover img { transform: scale(1.06); }
.fzg-gallery__badge {
  position: absolute; left: .9rem; top: .9rem; padding: .3rem .85rem; border-radius: 999px;
  font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  text-transform: uppercase; pointer-events: none;
}
.fzg-gallery__badge--before { background: rgba(10,19,21,.82); color: #fff; }
.fzg-gallery__badge--after { background: var(--gold); color: #1a1305; }
.fzg-gallery__caption {
  position: absolute; inset: auto 0 0 0; padding: 2.4rem 1.6rem 1.4rem; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5,10,11,.85) 65%, rgba(5,10,11,.95));
  color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
}
.fzg-showcase__eyebrow {
  display: block; color: var(--gold-light); font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; margin-bottom: .35rem;
}
@media (max-width: 560px) { .fzg-gallery--even { grid-template-columns: 1fr; } }

/* ---------- Bild-Lightbox (leichte Vergroesserung, ohne Bibliothek) ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(6,12,13,.92); padding: 2.5rem; opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox__img { max-width: 100%; max-height: 100%; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox__close {
  position: absolute; top: 1.4rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lightbox__close:hover { background: rgba(255,255,255,.16); }

/* ---------- Fahrzeug-Leistungskarten ---------- */
.fzg-service-grid { margin-bottom: 1.8rem; }
.fzg-service-card { position: relative; padding: 2.2rem; }
.fzg-service-card__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.fzg-service-card__icon {
  width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center;
  justify-content: center; color: var(--gold-light);
  background: linear-gradient(155deg, rgba(214,163,74,.22), rgba(214,163,74,.05));
  border: 1px solid rgba(214,163,74,.3);
}
.fzg-service-card__tag {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light);
  background: rgba(214,163,74,.12); border-radius: 999px; padding: .3rem .8rem;
}
.fzg-fit-note { max-width: 900px; margin-left: auto; margin-right: auto; }

.fzg-feature-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: flex; flex-direction: column; gap: .85rem; }
.fzg-feature-list li { display: flex; align-items: flex-start; gap: .8rem; font-size: .96rem; }
.fzg-feature-list__icon {
  width: 30px; height: 30px; border-radius: 9px; flex: none; margin-top: .05rem;
  display: flex; align-items: center; justify-content: center; color: var(--petrol);
  background: rgba(34,160,170,.14); border: 1px solid rgba(34,160,170,.3);
}

/* ---------- Fahrzeug-Preiskarten ---------- */
.fzg-price-grid { gap: 2rem; }
.fzg-price-card {
  padding: 2.6rem 2.2rem 2.2rem; text-align: center; position: relative; overflow: visible;
}
.fzg-price-card__icon {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 1.2rem; display: flex;
  align-items: center; justify-content: center; color: var(--gold-light);
  background: linear-gradient(155deg, rgba(214,163,74,.24), rgba(214,163,74,.05));
  border: 1px solid rgba(214,163,74,.35);
}
.fzg-price-card .price-card__price {
  font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; margin: .4rem 0 .6rem;
}
.fzg-price-card .price-card__price span {
  background: linear-gradient(100deg, var(--gold-light), var(--gold) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fzg-price-card__desc { color: var(--gray); font-size: .95rem; margin-bottom: 1.2rem; }
.fzg-price-card ul li { border-bottom-color: rgba(255,255,255,.1); }
.fzg-price-card.price-card--highlight {
  border-color: rgba(214,163,74,.5);
  background: linear-gradient(160deg, rgba(38,52,40,.85), rgba(15,25,28,.85));
  transform: translateY(-10px) scale(1.02);
}
.fzg-price-card.price-card--highlight::before {
  content: ""; position: absolute; inset: -2px; border-radius: calc(var(--radius) + 2px); z-index: -1;
  background: linear-gradient(160deg, rgba(214,163,74,.55), rgba(214,163,74,0) 60%);
  filter: blur(18px); opacity: .85; animation: fzg-price-glow 4s ease-in-out infinite alternate;
}
@keyframes fzg-price-glow { from { opacity: .6; } to { opacity: 1; } }
.fzg-price-card.price-card--highlight:hover { transform: translateY(-14px) scale(1.03); }

/* ---------- Querverweis auf Fahrzeug-Preise (Preise-Tab, helles Design) ---------- */
.fzg-crosslink {
  display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
  background: linear-gradient(160deg, var(--petrol) 0%, var(--petrol-dark) 100%);
  color: #fff; border-radius: var(--radius); padding: 2rem 2.2rem; box-shadow: var(--shadow-lg);
}
.fzg-crosslink h2, .fzg-crosslink h3 { color: #fff; }
.fzg-crosslink p { color: rgba(255,255,255,.85); margin: 0; max-width: 52ch; }
.fzg-crosslink .eyebrow { color: var(--gold-light); }
.fzg-crosslink__text { flex: 1; min-width: 240px; }

/* ---------- Buchungsassistent ---------- */
.booking {
  background: linear-gradient(160deg, rgba(22,34,38,.75), rgba(12,20,23,.85));
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.1); border-radius: calc(var(--radius) + 6px);
  padding: 2.4rem clamp(1.2rem, 4vw, 2.8rem) 2.6rem; box-shadow: var(--shadow-lg);
}
.booking__progress {
  list-style: none; display: flex; padding: 0; margin: 0 0 2.2rem; counter-reset: step;
  gap: .5rem;
}
.booking__progress-step {
  flex: 1; text-align: center; font-family: var(--font-head); font-size: .78rem; font-weight: 600;
  color: var(--gray); position: relative; padding-top: 2.6rem;
}
.booking__progress-step span {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: #1B2628; color: var(--gray);
  display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700;
  border: 2px solid rgba(255,255,255,.14); transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.booking__progress-step::after {
  content: ""; position: absolute; top: 15px; left: calc(50% + 22px); width: calc(100% - 22px);
  height: 2px; background: rgba(255,255,255,.12); z-index: 0;
}
.booking__progress-step:last-child::after { display: none; }
.booking__progress-step.is-active { color: var(--gold-light); }
.booking__progress-step.is-active span {
  background: var(--gold); border-color: var(--gold); color: var(--graphit);
  box-shadow: 0 0 0 5px rgba(214,163,74,.2);
}
.booking__progress-step.is-done span { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.booking__progress-step.is-done::after { background: var(--petrol); }

.booking__body { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2.4rem; align-items: start; }
@media (max-width: 800px) { .booking__body { grid-template-columns: 1fr; } }

.booking__step { display: none; animation: booking-step-in .3s cubic-bezier(.2,.8,.2,1); }
.booking__step.is-active { display: block; }
@keyframes booking-step-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.booking__step h3 { margin-bottom: 1.2rem; }
.booking__optional { color: var(--gray); font-weight: 400; font-size: .85rem; }

.booking__options { display: grid; gap: .9rem; }
.booking__options--pakete { grid-template-columns: repeat(3, 1fr); }
.booking__options--klassen, .booking__options--zusatz, .booking__options--zahlungsart { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .booking__options--pakete, .booking__options--klassen, .booking__options--zusatz,
  .booking__options--zahlungsart { grid-template-columns: 1fr; }
}
.booking__section-gap { margin-top: 2rem; }

.booking-option {
  position: relative; display: flex; flex-direction: column; gap: .25rem;
  background: rgba(21,31,34,.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 2px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.1rem 1.2rem; cursor: pointer;
  transition: border-color .2s ease, transform .2s cubic-bezier(.2,.8,.2,1), background .2s ease, box-shadow .2s ease;
}
.booking-option:hover { border-color: rgba(214,163,74,.5); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.booking-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.booking-option:has(input:checked), .booking-option.is-selected {
  border-color: var(--gold); background: rgba(214,163,74,.1); box-shadow: 0 0 0 3px rgba(214,163,74,.15);
}
.booking-option:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.booking-option__badge {
  position: absolute; top: -11px; right: 1rem; background: var(--gold); color: var(--graphit);
  font-size: .7rem; font-weight: 700; padding: .2rem .7rem; border-radius: 999px; font-family: var(--font-head);
}
.booking-option__name { font-family: var(--font-head); font-weight: 700; color: #fff; }
.booking-option__price { font-family: var(--font-head); font-weight: 700; color: var(--gold-light); font-size: .95rem; }
.booking-option__desc { color: var(--gray); font-size: .82rem; margin-top: .2rem; }
.booking-option--compact { flex-direction: row; align-items: center; justify-content: space-between; padding: .9rem 1.1rem; }
.booking-option--compact .booking-option__name { font-size: .92rem; }

.booking__nav { display: flex; gap: 1rem; margin-top: 1.8rem; }
.booking__nav .btn { min-width: 120px; }

.booking__summary {
  background: rgba(21,31,34,.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
  padding: 1.6rem; position: sticky; top: 6.5rem;
}
.booking__summary h3 { font-size: 1.05rem; }
.booking__summary-list { margin: 0 0 1.2rem; }
.booking__summary-list > div {
  display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.12); font-size: .88rem;
}
.booking__summary-list dt { color: var(--gray); margin: 0; }
.booking__summary-list dd { margin: 0; text-align: right; font-weight: 600; color: #fff; }
.booking__summary-total {
  display: flex; justify-content: space-between; align-items: baseline; padding-top: .4rem;
  font-family: var(--font-head);
}
.booking__summary-total span { color: var(--gray); font-size: .85rem; }
.booking__summary-total strong { font-size: 1.5rem; color: var(--gold-light); }
.booking__summary-note { font-size: .8rem; color: var(--gray); margin-top: .8rem; }
/* Unterhalb 800px steht die Zusammenfassung unter dem Formular in voller
   Breite (siehe .booking__body oben) und ihre rechtsbuendigen Werte (Preis,
   Uhrzeit, ...) liefen sonst genau unter den schwebenden Kontakt-Buttons
   unten rechts durch - zusaetzliches Padding haelt den Text frei. */
@media (max-width: 800px) {
  .booking__summary { padding-right: 4.5rem; }
}

/* ---------- Terminwunsch: Kalender ----------
   Kompletter Redesign-Durchlauf 2026-07-09 (2. Ueberarbeitung) - Auftrag war
   ein "echter Buchungskalender"-Look: klare Monats-Kopfzeile mit Pfeilen,
   Wochentage sauber in einer Reihe, verfuegbare Tage sichtbar farblich
   markiert (nicht nur per Opacity von den gesperrten Tagen unterschieden),
   ausgewaehlter Tag klar hervorgehoben. main.js liefert das Beispieldatum
   (DEMO_TIME_SLOTS) - Anbindung an Google Kalender/n8n siehe Kommentar dort.
   WICHTIG falls der Kalender nach einem Update wieder "kaputt"/unformatiert
   aussieht (Wochentage ohne Abstand aneinandergeklebt): das ist so gut wie
   immer ein Browser-Cache, der die alte style.css weiterhin ausliefert,
   kein Layout-Bug - siehe asset_version-Query-String in base.html/build.py,
   der genau das verhindern soll (Hard-Reload/Strg+F5 hilft im Zweifel). */
.booking-calendar {
  background: rgba(21,31,34,.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 1.6rem 1.7rem 1.8rem;
  margin-bottom: 1.8rem; box-shadow: var(--shadow-lg);
}
.booking-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.3rem; }
.booking-calendar__month {
  font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 1.2rem;
  text-transform: capitalize; letter-spacing: -.01em;
}
.booking-calendar__nav {
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: var(--graphit); display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .2s ease;
}
.booking-calendar__nav:hover:not(:disabled) { border-color: rgba(214,163,74,.6); color: var(--gold-light); background: rgba(214,163,74,.12); transform: scale(1.06); }
.booking-calendar__nav:disabled { opacity: .25; cursor: not-allowed; }
.booking-calendar__weekdays {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .3rem; margin-bottom: .7rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.booking-calendar__weekdays span {
  display: block; text-align: center; font-family: var(--font-head); font-size: .74rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--gold-light);
}
.booking-calendar__days {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem;
}
.booking-calendar__day {
  width: 100%; aspect-ratio: 1 / 1; min-height: 38px; border-radius: 10px; border: 1px solid transparent;
  background: transparent; color: var(--gray); font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  cursor: not-allowed; display: flex; align-items: center; justify-content: center; position: relative;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, color .18s ease, box-shadow .18s ease;
}
/* Verfuegbare (buchbare) Tage werden aktiv farblich markiert statt nur
   "nicht ausgegraut" zu sein - erst dieser Zustand macht den Kalender auf
   den ersten Blick als echten Buchungskalender lesbar. */
.booking-calendar__day.is-available {
  background: rgba(34,160,170,.12); border-color: rgba(34,160,170,.4); color: #fff; cursor: pointer;
}
.booking-calendar__day.is-available:hover {
  border-color: rgba(214,163,74,.65); background: rgba(214,163,74,.16); color: var(--gold-light);
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.booking-calendar__day.is-today { box-shadow: inset 0 0 0 2px rgba(214,163,74,.6); }
.booking-calendar__day.is-selected {
  background: linear-gradient(150deg, var(--gold-light), var(--gold) 70%); color: var(--graphit);
  box-shadow: 0 8px 22px rgba(214,163,74,.45); border-color: transparent;
}
.booking-calendar__day.is-selected:hover { transform: none; box-shadow: 0 8px 22px rgba(214,163,74,.45); }
.booking-calendar__day:disabled { background: transparent; color: rgba(156,168,170,.45); opacity: 1; }
.booking-calendar__day--empty { visibility: hidden; }
.booking-calendar__legend {
  display: flex; flex-wrap: wrap; gap: 1.3rem; margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px dashed rgba(255,255,255,.1); font-size: .78rem; color: var(--gray);
}
.booking-calendar__legend span { display: inline-flex; align-items: center; gap: .5rem; }
.booking-calendar__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.booking-calendar__dot--free { background: var(--petrol); }
.booking-calendar__dot--selected { background: var(--gold); }
.booking-calendar__dot--off { background: var(--gray); opacity: .5; }

/* ---------- Terminwunsch: Uhrzeiten ---------- */
.booking-slots__heading { font-size: 1.05rem; color: #fff; margin-bottom: .9rem; font-weight: 700; }
.booking-slots__placeholder {
  color: var(--gray); font-size: .9rem; font-style: italic; padding: 1.1rem 1.2rem;
  border: 1px dashed rgba(255,255,255,.14); border-radius: 12px; margin: 0;
}
.booking-slots__placeholder--closed { color: var(--gold-light); font-style: normal; border-color: rgba(214,163,74,.3); }
.booking-slots__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .8rem; }
.booking-slot {
  position: relative; border-radius: 14px; border: 2px solid rgba(34,160,170,.4);
  background: rgba(34,160,170,.1); color: #fff; font-family: var(--font-head);
  font-weight: 700; font-size: .98rem; padding: .85rem .9rem; cursor: pointer; text-align: center;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.booking-slot:hover:not(:disabled) {
  border-color: rgba(214,163,74,.65); background: rgba(214,163,74,.16); color: var(--gold-light);
  transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.3);
}
.booking-slot.is-selected {
  background: linear-gradient(150deg, var(--gold-light), var(--gold) 70%); color: var(--graphit);
  border-color: transparent; box-shadow: 0 8px 20px rgba(214,163,74,.45);
}
.booking-slot:disabled {
  background: transparent; border-color: rgba(255,255,255,.1); color: rgba(156,168,170,.6);
  opacity: 1; cursor: not-allowed; text-decoration: line-through;
}
.booking-slot__tag {
  display: block; font-size: .66rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  text-decoration: none; margin-top: .15rem; color: var(--gray);
}
.booking__slot-hint { color: #E38686; }

@media (max-width: 480px) {
  .booking-calendar__day { font-size: .8rem; }
  .booking-slots__grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

@media (max-width: 620px) {
  .fzg-service-card { padding: 1.6rem; }
  .fzg-price-card { padding: 2rem 1.5rem 1.8rem; }
  .fzg-price-card.price-card--highlight { transform: none; }
  .fzg-price-card.price-card--highlight:hover { transform: translateY(-4px); }
}

/* ---------- Sektions-Uebergangsanimation (Tab-Wechsel) ---------- */
.page-section.is-entering { animation: section-fade-in .32s ease; }
@keyframes section-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll-Reveal ("mehr Dynamik" beim Durchscrollen) ----------
   [data-reveal] wird per IntersectionObserver in main.js beim Eintritt in den
   Viewport auf "is-visible" umgeschaltet - aktuell nur in fahrzeug.html
   eingesetzt (siehe Anfrage 2026-07-09 nach mehr Dynamik fuer den Premium-
   Bereich), die Klasse ist aber bewusst global nutzbar. JS entfernt vorab
   [data-reveal] komplett, falls IntersectionObserver fehlt oder
   prefers-reduced-motion aktiv ist - Inhalte sind dann sofort sichtbar. */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .page-section.is-entering,
  .fzg-hero__glow,
  .fzg-hero__grid,
  .fzg-badge__dot,
  .fzg-price-card.price-card--highlight::before,
  .booking__step {
    animation: none !important;
  }
  .card, .btn, .booking-option, [data-reveal] {
    transition: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.container--narrow { max-width: 760px; }
.lead--narrow { max-width: 60ch; margin-left: auto; margin-right: auto; color: var(--gray); }
.mb-md { margin-bottom: 1.6rem; }
.pb-tight { padding-bottom: 2.5rem; }
.hero__actions--center { justify-content: center; }

/* ---------- Premium-Abo Produktwahl (Schritt 8) ---------- */
.fzg-produktwahl__grid { gap: 1.4rem; }
.fzg-produktwahl__card {
  display: flex; flex-direction: column; gap: .6rem; text-decoration: none;
  color: inherit; position: relative;
}
.fzg-produktwahl__card h3 { margin: 0; }
.fzg-produktwahl__card p { margin: 0; color: var(--gray); flex: 1; }
.fzg-produktwahl__card--highlight { border-color: var(--gold); }
.fzg-btn--inactive { opacity: .55; pointer-events: none; cursor: default; }

/* ---------- Premium-Abo Transparenz-Checkliste (Zusammenfassungsschritt) ---------- */
.fzg-abo-transparenz {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px; padding: 1rem 1.2rem; margin-bottom: 1.2rem;
}
.fzg-abo-transparenz ul { margin: 0; padding-left: 1.2rem; }
.fzg-abo-transparenz li { margin-bottom: .5rem; font-size: .92rem; }
.fzg-abo-transparenz li:last-child { margin-bottom: 0; }