/* ============================================================================
   FAHRZEUGPFLEGE NEVES – STYLESHEET
   ----------------------------------------------------------------------------
   Aufbau dieser Datei (bei Bedarf per Suche springen):
   1. Design Tokens (Farben, Typografie, Abstände)
   2. Reset & Grundlagen
   3. Layout-Hilfsklassen (Container, Grid, Abstände)
   4. Typografie-Klassen
   5. Buttons & Formulare
   6. Header & Navigation
   7. Hero-Bereich
   8. Vertrauens-/Kennzahlen-Leiste
   9. Leistungs-Karten (Startseite-Teaser)
   10. Vorher/Nachher-Regler (Signature-Element)
   11. Prozess-Schritte
   12. Zielgruppen-Sektion
   13. Bewertungen (Teaser + Bewertungsseite)
   14. Preistabellen (Leistungen-Seite)
   15. Kontakt-Seite (Formular, Karte, Infos)
   16. Footer
   17. Utilities & Responsive Anpassungen
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. DESIGN TOKENS
   Alle Farben, Schriften und Abstände zentral definiert – bei Anpassung des
   Corporate Designs reicht es, diese Variablen zu ändern.
   ------------------------------------------------------------------------ */
:root {
  /* Farben – inspiriert vom Bodensee (Wasser, Nebel, Uferlicht) und dem
     Handwerk der Fahrzeugaufbereitung (nasser Lack, gebürstetes Metall). */
  --color-bg-dark: #10161a;        /* Tiefes Anthrazit-Blau – Hauptdunkelton */
  --color-bg-dark-alt: #182229;    /* Etwas helleres Anthrazit für Layering */
  --color-bg-dark-soft: #1e2a31;   /* Für Karten auf dunklem Grund */
  --color-bg-light: #eff2f1;       /* Kühles Off-White (Nebel über dem See) */
  --color-surface: #ffffff;        /* Reines Weiß für Karten auf hellem Grund */

  --color-teal: #1f5c5b;           /* Bodensee-Teal – Hauptakzentfarbe */
  --color-teal-light: #2e7a78;     /* Hover-/Highlight-Variante */
  --color-teal-pale: #e4eeed;      /* Sehr helles Teal für Flächen/Badges */

  --color-brass: #b99a5b;          /* Gebürstetes Messing – Premium-Akzent */
  --color-brass-light: #d1b784;

  --color-text-dark: #12181b;      /* Haupttextfarbe auf hellem Grund */
  --color-text-light: #f4f2ee;     /* Haupttextfarbe auf dunklem Grund */
  --color-text-muted: #5b6669;     /* Sekundärtext auf hellem Grund */
  --color-text-muted-light: #aab4b3; /* Sekundärtext auf dunklem Grund */

  --color-border: #dadfdd;         /* Trennlinien auf hellem Grund */
  --color-border-dark: #2c383f;    /* Trennlinien auf dunklem Grund */

  --color-success: #2e7a78;
  --color-star: #b99a5b;           /* Sternchen-Farbe für Bewertungen */

  /* Typografie
     Display: Big Shoulders Display – kantig, hochkant wie ein Kennzeichen,
     passt zur Präzision der Fahrzeugaufbereitung.
     Body: Inter – neutral, sehr gut lesbar, ruhiger Gegenpart zur Display-Font.
     Mono: JetBrains Mono – für Preise/Kennzahlen ("Datenblatt"-Charakter). */
  --font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Courier New", monospace;

  /* Abstände (8px-Raster) */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;
  --space-8: 8rem;

  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;

  --container-width: 1180px;

  --shadow-card: 0 12px 32px rgba(16, 22, 26, 0.08);
  --shadow-card-dark: 0 20px 48px rgba(0, 0, 0, 0.35);

  --transition-fast: 180ms ease;
  --transition-medium: 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   2. RESET & GRUNDLAGEN
   ------------------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-dark);
  background: var(--color-bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Verhindert, dass Elemente (z. B. durch einen Rendering-Fehler oder
     einen kurzzeitigen Cache-Konflikt) horizontal aus dem sichtbaren
     Bereich herausragen und einen seitlichen Scrollbalken erzeugen. */
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  /* WICHTIG: verhindert, dass Bilder gestaucht/verzerrt dargestellt werden.
     Ohne diese Regel würde ein im HTML gesetztes height-Attribut (z. B. für
     bessere Ladezeiten-Performance) die Höhe fixieren, während sich nur die
     Breite responsiv verkleinert – das Bild würde dadurch optisch gestaucht.
     height:auto sorgt dafür, dass die Höhe sich immer proportional zur
     Breite verhält (Seitenverhältnis bleibt erhalten). Komponenten, die
     bewusst object-fit nutzen (z. B. Galerie, Vorher/Nachher-Regler), setzen
     ihre eigene, spezifischere Regel und sind davon nicht betroffen. */
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  margin: 0 0 var(--space-2);
  letter-spacing: 0.2px;
}

p {
  margin: 0 0 var(--space-2);
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Sichtbarer Fokus für Tastaturnutzung – Barrierefreiheit */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-brass);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3. LAYOUT-HILFSKLASSEN
   ------------------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

.section {
  padding: var(--space-7) 0;
}

.section--tight {
  padding: var(--space-5) 0;
}

.section--dark {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}

.section--alt {
  background: var(--color-surface);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: 1fr;
  }
}

.section-head {
  max-width: 640px;
  margin: 0 0 var(--space-5);
}

.section-head--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   4. TYPOGRAFIE-KLASSEN
   ------------------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin-bottom: var(--space-2);
}

.section--dark .eyebrow {
  color: var(--color-brass-light);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  display: inline-block;
}

h1 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

.lede {
  font-size: 1.15rem;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.section--dark .lede {
  color: var(--color-text-muted-light);
}

.text-muted { color: var(--color-text-muted); }
.section--dark .text-muted { color: var(--color-text-muted-light); }

/* ---------------------------------------------------------------------------
   5. BUTTONS & FORMULARE
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.7em;
  border-radius: var(--radius-s);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  transition: transform var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }

.btn--primary {
  background: var(--color-teal);
  color: var(--color-text-light);
}
.btn--primary:hover { background: var(--color-teal-light); }

.btn--brass {
  background: var(--color-brass);
  color: var(--color-bg-dark);
}
.btn--brass:hover { background: var(--color-brass-light); }

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-text-dark);
}
.section--dark .btn--outline { color: var(--color-text-light); }

.btn--whatsapp {
  background: #1f5c5b;
  color: #fff;
}
.btn--whatsapp svg { width: 18px; height: 18px; }

.btn--sm { padding: 0.6em 1.1em; font-size: 0.85rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Formulare (Kontaktseite) */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  margin-bottom: var(--space-3);
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-dark);
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8em 1em;
  border-radius: var(--radius-s);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-dark);
  transition: border-color var(--transition-fast);
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-color: var(--color-teal);
}

.form-field textarea { resize: vertical; min-height: 120px; }

.form-hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   6. HEADER & NAVIGATION
   ------------------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(16, 22, 26, 0.96);
  /* Hinweis: Früher stand hier zusätzlich "backdrop-filter: saturate(160%)
     blur(10px);" für einen Frosted-Glass-Effekt. backdrop-filter erzeugt
     laut CSS-Spezifikation aber einen neuen "containing block" für alle
     position:fixed-Nachfahren – dadurch wurde das mobile Ausklapp-Menü
     (die drei Striche) nicht mehr am Bildschirm, sondern nur innerhalb der
     (sehr niedrigen) Kopfzeile positioniert und wirkte "abgeschnitten".
     Der Hintergrund ist bereits fast deckend, daher fällt der Verzicht auf
     den Weichzeichner-Effekt optisch kaum auf, behebt aber den Fehler
     zuverlässig für alle Browser. */
  color: var(--color-text-light);
  border-bottom: 1px solid var(--color-border-dark);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7em;
}

.brand-logo {
  height: 46px;
  width: auto;
  display: block;
}

@media (max-width: 480px) {
  .brand-logo { height: 36px; }
}

/* Logo im (dunklen) Footer: Logo ist jetzt selbst weiß mit transparentem
   Hintergrund, sitzt daher direkt auf der dunklen Footer-Fläche auf -
   keine helle Box mehr nötig. */
.footer-logo-wrap {
  display: inline-block;
  margin-bottom: var(--space-2);
}
.footer-logo {
  height: 38px;
  width: auto;
  display: block;
}

/* Runde Icon-Buttons für Social-Media-Links (z. B. Instagram) */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--color-border-dark);
  color: var(--color-text-light);
  flex-shrink: 0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.icon-link:hover {
  background: var(--color-bg-dark-soft);
  border-color: var(--color-brass);
}
.icon-link svg { width: 19px; height: 19px; }

.main-nav {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.main-nav ul {
  display: flex;
  gap: var(--space-4);
  font-size: 0.95rem;
  font-weight: 500;
}

.main-nav a {
  position: relative;
  padding: 0.3em 0;
  color: var(--color-text-light);
  opacity: 0.85;
  transition: opacity var(--transition-fast);
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  opacity: 1;
}

.main-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--color-brass);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.header-phone {
  display: flex;
  flex-direction: column;
  font-size: 0.8rem;
  color: var(--color-text-muted-light);
  line-height: 1.3;
}

.header-phone strong {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-text-light);
  display: block;
}

@media (max-width: 880px) {
  .header-actions { display: none; }
  .main-nav {
    position: fixed;
    inset: 76px 0 0 0;
    background: var(--color-bg-dark);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-4) var(--space-3);
    transform: translateX(100%);
    transition: transform var(--transition-medium);
    gap: var(--space-4);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav ul {
    flex-direction: column;
    gap: var(--space-3);
    font-size: 1.2rem;
  }
  .nav-toggle { display: flex; }
}

/* ---------------------------------------------------------------------------
   7. HERO-BEREICH
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  overflow: hidden;
  padding: var(--space-8) 0 var(--space-7);
}

.hero::before {
  /* Dezenter Verlauf, der an Wasseroberfläche/Lackreflexion erinnert */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(185, 154, 91, 0.16), transparent 60%),
    radial-gradient(70% 60% at 15% 100%, rgba(31, 92, 91, 0.35), transparent 60%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--space-6);
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: var(--space-3);
}

.hero-copy h1 em {
  font-style: normal;
  color: var(--color-brass-light);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-dark);
}

.hero-meta-item {
  display: flex;
  flex-direction: column;
}

.hero-meta-item strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-text-light);
}

.hero-meta-item span {
  font-size: 0.8rem;
  color: var(--color-text-muted-light);
}

.hero-visual {
  position: relative;
}

.hero-visual .figure-caption {
  margin-top: var(--space-2);
  font-size: 0.75rem;
  color: var(--color-text-muted-light);
  text-align: center;
}

@media (max-width: 880px) {
  .hero .container {
    grid-template-columns: 1fr;
  }
  .hero-visual { order: -1; }
}

/* ---------------------------------------------------------------------------
   8. VERTRAUENS-/KENNZAHLEN-LEISTE
   ------------------------------------------------------------------------ */
.trust-bar {
  background: var(--color-bg-dark-alt);
  border-bottom: 1px solid var(--color-border-dark);
}

.trust-bar .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
  color: var(--color-text-muted-light);
  font-size: 0.9rem;
}

.trust-bar strong {
  color: var(--color-text-light);
}

.trust-stars {
  color: var(--color-star);
  letter-spacing: 2px;
}

/* ---------------------------------------------------------------------------
   9. LEISTUNGS-KARTEN
   ------------------------------------------------------------------------ */
.service-card {
  background: var(--color-surface);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(16, 22, 26, 0.14);
}

.service-card .icon {
  width: 44px;
  height: 44px;
  color: var(--color-teal);
  margin-bottom: var(--space-1);
}

.service-card h3 { margin-bottom: 0.2em; }

.service-card .price-from {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-brass);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--color-border);
}

/* ---------------------------------------------------------------------------
   10. VORHER/NACHHER-REGLER (Signature-Element)
   ------------------------------------------------------------------------ */
.compare {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card-dark);
  user-select: none;
  touch-action: pan-y;
}

.compare-figure {
  position: absolute;
  inset: 0;
  margin: 0;
}

.compare-figure img,
.compare-figure svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.compare-figure figcaption {
  position: absolute;
  top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(16, 22, 26, 0.65);
  color: var(--color-text-light);
  padding: 0.4em 0.8em;
  border-radius: 100px;
}

.compare-figure--before figcaption { left: var(--space-2); }
.compare-figure--after figcaption { right: var(--space-2); }

.compare-figure--after {
  clip-path: inset(0 0 0 50%);
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--color-text-light);
  transform: translateX(-50%);
  cursor: ew-resize;
}

.compare-handle::after {
  content: "⟷";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  background: var(--color-surface);
  color: var(--color-bg-dark);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.compare-slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}

.compare-note {
  margin-top: var(--space-2);
  font-size: 0.85rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   11. PROZESS-SCHRITTE
   ------------------------------------------------------------------------ */
.process-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  counter-reset: step;
}

@media (max-width: 900px) {
  .process-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .process-list { grid-template-columns: 1fr; }
}

.process-step {
  position: relative;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-border-dark);
}

.process-step .step-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-brass-light);
  display: block;
  margin-bottom: var(--space-1);
}

/* ---------------------------------------------------------------------------
   12. ZIELGRUPPEN-SEKTION
   ------------------------------------------------------------------------ */
.audience-card {
  background: var(--color-bg-dark-soft);
  border: 1px solid var(--color-border-dark);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.audience-card ul { margin-top: var(--space-2); display: flex; flex-direction: column; gap: 0.5em; }

.audience-card li {
  padding-left: 1.4em;
  position: relative;
  color: var(--color-text-muted-light);
  font-size: 0.95rem;
}

.audience-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background: var(--color-brass);
  border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   13. BEWERTUNGEN
   ------------------------------------------------------------------------ */
.rating-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.rating-score {
  font-family: var(--font-display);
  font-size: 3.4rem;
  line-height: 1;
}

.rating-stars {
  color: var(--color-star);
  font-size: 1.3rem;
  letter-spacing: 3px;
}

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  box-shadow: var(--shadow-card);
}

.review-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.review-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--color-teal);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--font-display);
  flex-shrink: 0;
}

.review-meta { font-size: 0.8rem; color: var(--color-text-muted); }
.review-stars { color: var(--color-star); letter-spacing: 2px; }

.google-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   14. PREISTABELLEN (Leistungen-Seite)
   ------------------------------------------------------------------------ */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.price-table caption {
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.3rem;
  padding: var(--space-3) var(--space-3) var(--space-2);
  background: var(--color-bg-dark);
  color: var(--color-text-light);
}

.price-table th,
.price-table td {
  text-align: left;
  padding: 0.9em var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.95rem;
}

.price-table thead th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-light);
}

.price-table td.price {
  font-family: var(--font-mono);
  white-space: nowrap;
  color: var(--color-teal);
  font-weight: 600;
}

.price-table tbody tr:last-child td { border-bottom: none; }

.price-table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-5);
}

.package-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  padding: var(--space-4);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

.package-card--highlight {
  border-color: var(--color-brass);
  box-shadow: 0 16px 40px rgba(185, 154, 91, 0.18);
}

.package-card--highlight::before {
  content: "Beliebt";
  position: absolute;
  top: -12px;
  right: var(--space-3);
  background: var(--color-brass);
  color: var(--color-bg-dark);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3em 0.8em;
  border-radius: 100px;
}

.package-price {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  color: var(--color-teal);
}

.package-price span {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-family: var(--font-body);
}

.package-card ul { display: flex; flex-direction: column; gap: 0.5em; margin: var(--space-2) 0; }
.package-card li { padding-left: 1.3em; position: relative; font-size: 0.92rem; }
.package-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-teal);
  font-weight: 700;
}

.price-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-left: 3px solid var(--color-brass);
  padding-left: var(--space-2);
  margin-top: var(--space-4);
}

/* ---------------------------------------------------------------------------
   15. KONTAKT-SEITE
   ------------------------------------------------------------------------ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

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

.contact-info-card {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  border-radius: var(--radius-l);
  padding: var(--space-5);
}

.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.contact-info-list dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-brass-light);
}

.contact-info-list dd {
  margin: 0.2em 0 0;
  font-size: 1.05rem;
}

.opening-hours {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-2);
}

.opening-hours td {
  padding: 0.4em 0;
  border-bottom: 1px solid var(--color-border-dark);
  font-size: 0.9rem;
}

.opening-hours td:last-child { text-align: right; color: var(--color-text-muted-light); }

.map-embed {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--radius-m);
  filter: grayscale(0.25) contrast(1.05);
}

/* ---------------------------------------------------------------------------
   16. FOOTER
   ------------------------------------------------------------------------ */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-muted-light);
  padding: var(--space-6) 0 var(--space-3);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border-dark);
}

@media (max-width: 780px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-grid h4 {
  color: var(--color-text-light);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-body);
  font-weight: 700;
  margin-bottom: var(--space-2);
}

.footer-grid ul { display: flex; flex-direction: column; gap: 0.6em; font-size: 0.9rem; }
.footer-grid a:hover { color: var(--color-text-light); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-3);
  font-size: 0.78rem;
}

.footer-bottom ul { display: flex; gap: var(--space-3); }

/* ---------------------------------------------------------------------------
   17. GALERIE
   ------------------------------------------------------------------------ */
.gallery-viewer {
  position: relative;
  background: var(--color-bg-dark);
  border-radius: var(--radius-l);
  overflow: hidden;
  box-shadow: var(--shadow-card-dark);
}

.gallery-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-dark-alt);
}

/* object-fit: contain sorgt dafür, dass jedes Bild - unabhängig vom
   Seitenverhältnis - vollständig und unverzerrt sichtbar bleibt
   (automatische Größenanpassung, siehe Anforderung Punkt 5). */
.gallery-stage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--color-bg-dark-alt);
}

/* Im Vollbildmodus darf das Bild den gesamten verfügbaren Platz nutzen */
.gallery-viewer:fullscreen {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}
.gallery-viewer:fullscreen .gallery-stage {
  aspect-ratio: auto;
  width: 100vw;
  height: 100vh;
}

.gallery-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(16, 22, 26, 0.55);
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: background var(--transition-fast);
}
.gallery-nav-btn:hover { background: rgba(16, 22, 26, 0.85); }
.gallery-nav-btn--prev { left: var(--space-2); }
.gallery-nav-btn--next { right: var(--space-2); }

.gallery-fullscreen-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(16, 22, 26, 0.55);
  color: var(--color-text-light);
  border: none;
  border-radius: 100px;
  padding: 0.5em 1em;
  font-size: 0.78rem;
  font-weight: 600;
}
.gallery-fullscreen-btn:hover { background: rgba(16, 22, 26, 0.85); }

.gallery-thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-3) var(--space-1);
  scroll-behavior: smooth;
}

.gallery-thumb {
  flex: 0 0 auto;
  width: 96px;
  height: 68px;
  border-radius: var(--radius-s);
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: none;
  opacity: 0.6;
  transition: opacity var(--transition-fast), border-color var(--transition-fast);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gallery-thumb.is-active,
.gallery-thumb:hover {
  opacity: 1;
  border-color: var(--color-brass);
}

.gallery-empty {
  text-align: center;
  padding: var(--space-6) var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-m);
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------------------
   17b. UTILITIES & RESPONSIVE
   ------------------------------------------------------------------------ */
.visually-hidden {
  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: -9999px;
  top: 0;
  background: var(--color-brass);
  color: var(--color-bg-dark);
  padding: 0.8em 1.2em;
  z-index: 1000;
  font-weight: 700;
}
.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
}

/* WhatsApp Floating Action Button (mobil besonders wichtig) */
.whatsapp-fab {
  position: fixed;
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 90;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #1f5c5b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(16, 22, 26, 0.35);
  transition: transform var(--transition-fast);
}
.whatsapp-fab:hover { transform: scale(1.06); }
.whatsapp-fab svg { width: 28px; height: 28px; }

.divider-brass {
  width: 60px;
  height: 3px;
  background: var(--color-brass);
  margin: var(--space-2) 0 var(--space-3);
}

.page-hero {
  background: var(--color-bg-dark);
  color: var(--color-text-light);
  padding: var(--space-6) 0 var(--space-5);
}

.mt-0 { margin-top: 0; }

/* ---------------------------------------------------------------------------
   18. ZUSÄTZLICHE MOBILE-OPTIMIERUNGEN
   Ergänzende Feinjustierungen für kleine Bildschirme, die über die bereits
   in den einzelnen Abschnitten vorhandenen Media Queries hinausgehen.
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .section { padding: var(--space-6) 0; }
  .hero { padding: var(--space-6) 0 var(--space-5); }
  .page-hero { padding: var(--space-5) 0 var(--space-4); }

  .hero-meta {
    gap: var(--space-3);
  }
  .hero-meta-item strong { font-size: 1.4rem; }

  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { justify-content: center; }

  .header-actions { gap: 0.5em; }

  .rating-summary { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .rating-score { font-size: 2.6rem; }

  .gallery-nav-btn { width: 40px; height: 40px; font-size: 1.1rem; }
  .gallery-thumb { width: 76px; height: 54px; }

  .whatsapp-fab { width: 50px; height: 50px; }
  .whatsapp-fab svg { width: 24px; height: 24px; }
}

@media (max-width: 400px) {
  .header-phone { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}