/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  /* Color Palette */
  --primary-gold: #c5a86a;
  --primary-gold-hover: #b29456;
  --primary-gold-light: rgba(197, 168, 106, 0.15);
  
  --dark-bg: #0c0c0c;
  --dark-section: #121212;
  --dark-card: #161616;
  --dark-input: #1a1a1a;
  
  --light-bg: #f5f5f5;
  --light-card: #ffffff;
  
  --text-white: #ffffff;
  --text-offwhite: #e5e5e5;
  --text-dark: #1f1f1f;
  --text-muted: #8e8e8e;
  
  --border-dark: #2a2a2a;
  --border-light: #e5e5e5;
  
  /* Fonts */
  --font-serif: 'Montserrat', sans-serif;
  --font-sans-ui: 'Montserrat', sans-serif;
  --font-sans-body: 'Inter', sans-serif;
  
  /* Layout & Transitions */
  --container-width: 1200px;
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.05);
  --shadow-dark: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   BASE STYLES & RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans-body);
  background-color: var(--dark-bg);
  color: var(--text-white);
  line-height: 1.6;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: var(--transition-smooth);
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  border: none;
  background: none;
  outline: none;
}

button {
  cursor: pointer;
}

.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.text-center {
  text-align: center;
}

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

/* ==========================================================================
   BUTTONS & UI ELEMENTS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem 2rem;
  font-family: var(--font-sans-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 0px;
  transition: var(--transition-smooth);
}

.btn-primary {
  background-color: var(--primary-gold);
  color: var(--dark-bg);
}

.btn-primary:hover {
  background-color: var(--primary-gold-hover);
  transform: translateY(-2px);
}

.btn-secondary {
  border: 1px solid var(--primary-gold);
  color: var(--text-white);
  background-color: transparent;
}

.btn-secondary:hover {
  background-color: var(--primary-gold);
  color: var(--dark-bg);
  transform: translateY(-2px);
}

/* Section Taglines and Headers */
.section-tagline {
  display: block;
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--primary-gold);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.section-tagline-gold {
  display: block;
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  color: var(--primary-gold);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-white);
  margin-bottom: 3rem;
  text-transform: uppercase;
}

.section-desc {
  max-width: 800px;
  margin: -1.5rem auto 3rem;
  font-size: 1.1rem;
  color: var(--text-offwhite);
  line-height: 1.8;
}

/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: rgba(12, 12, 12, 0.8);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: var(--transition-smooth);
  padding: 0.75rem 0;
}

.main-header.scrolled {
  background-color: rgba(12, 12, 12, 0.98);
  padding: 0.5rem 0;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.main-header.scrolled .logo-link {
  height: 35px; /* Shrinks slightly when scrolling for a clean compact nav bar */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.logo-link {
  display: flex;
  align-items: center;
  height: 45px; /* Adjusted height to fit the navbar nicely */
  transition: var(--transition-smooth);
}

.header-logo {
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* Navigation Links */
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-list {
  display: flex;
  gap: 2rem;
}

.nav-link {
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-white);
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-gold);
  transition: var(--transition-smooth);
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-gold);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Phone CTA in header */
.header-cta .phone-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--primary-gold);
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary-gold);
  letter-spacing: 1px;
}

.header-cta .phone-btn:hover {
  background-color: var(--primary-gold);
  color: var(--dark-bg);
  transform: scale(1.02);
}

/* Mobile Toggle Hamburger */
.mobile-nav-toggle {
  display: none;
  z-index: 1001;
  padding: 0.5rem;
}

.hamburger {
  display: block;
  width: 25px;
  height: 2px;
  background-color: var(--text-white);
  position: relative;
  transition: var(--transition-smooth);
}

.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 2px;
  background-color: var(--text-white);
  left: 0;
  transition: var(--transition-smooth);
}

.hamburger::before {
  top: -8px;
}

.hamburger::after {
  bottom: -8px;
}

/* Toggle Menu Active State */
.mobile-nav-toggle[aria-expanded="true"] .hamburger {
  background-color: transparent;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.mobile-nav-toggle[aria-expanded="true"] .hamburger::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/* ==========================================================================
   HERO SECTION
   ========================================================================== */
.hero-section {
  /* min-height instead of a fixed height: stays a full screen, but grows
     instead of clipping when the content needs more room */
  min-height: 100vh;
  background-color: #0c0c0c; /* solid black background */
  display: flex;
  align-items: center;
  position: relative;
  padding-top: 80px;
  overflow: hidden;
}

/* Bildbuehne auf der rechten Haelfte. Der Container selbst traegt kein Bild
   mehr: Foto (::after) und Blend-Overlay (::before) sind getrennte Ebenen,
   damit der Helligkeits-Filter nur das Foto trifft und nicht den schwarzen
   Verlauf aufhellt (sonst wird aus Schwarz ein sichtbares Grau). */
.hero-bg-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%; /* breiter als zuvor (53%), damit mehr vom Motiv Platz hat */
  height: 100%;
  z-index: 1;
}

/* Foto-Ebene */
.hero-bg-image::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('images/hero-bg.webp');
  /* Etwas groesser als der Rahmen hoch ist: das Motiv steht praesent im Bild
     statt verloren in der Flaeche. Was oben und unten ueber den Rahmen
     hinausgeht, blendet die Maske weiter unten weich aus - deshalb entsteht
     dort trotz Anschnitt keine harte Kante. */
  background-size: auto 100%;
  background-position: right center;
  background-repeat: no-repeat;
  /* Die Aufnahme ist im Original sehr dunkel und leicht kuehl. Der Filter hebt
     sie auf das Helligkeitsniveau der uebrigen Seite und zieht sie farblich
     Richtung Gold-Ton der Marke. */
  filter: brightness(0.90);
  /* Kein schwarzer Verlauf UEBER dem Bild - der erzeugt immer eine sichtbare
     Kante an der Stelle, wo das Foto beginnt. Stattdessen wird das Foto selbst
     ausmaskiert: seine Pixel werden zum Rand hin transparent, der
     Seitenhintergrund liegt darunter. Der Uebergang ist damit ein echter
     Verlauf ins Schwarz statt einer aufgelegten Flaeche.
     Zwei Maskenebenen, per intersect verschnitten: die erste blendet nach
     links aus (dorthin laeuft das Foto in den Text-Bereich), die zweite oben
     und unten - sonst stuende dort die gerade Bildkante im Schwarz. */
  -webkit-mask-image:
    linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      
      rgba(0, 0, 0, 1) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 5%,
      rgba(0, 0, 0, 1) 12%,
      rgba(0, 0, 0, 1) 88%,
      rgba(0, 0, 0, 0.6) 95%,
      rgba(0, 0, 0, 0) 100%);
  mask-image:
    linear-gradient(to right,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.06) 18%,
      rgba(0, 0, 0, 0.22) 34%,
      rgba(0, 0, 0, 0.5) 52%,
      rgba(0, 0, 0, 0.78) 70%,
      rgba(0, 0, 0, 0.94) 85%,
      rgba(0, 0, 0, 1) 100%),
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.6) 5%,
      rgba(0, 0, 0, 1) 12%,
      rgba(0, 0, 0, 1) 88%,
      rgba(0, 0, 0, 0.6) 95%,
      rgba(0, 0, 0, 0) 100%);
  -webkit-mask-composite: source-in; /* Safari-Schreibweise fuer intersect */
  mask-composite: intersect;
  z-index: 1;
}

/* Nur noch ein leichter Schleier fuer die Lesbarkeit dort, wo der Text an das
   Foto heranreicht - bewusst schwach, das Ausblenden macht die Maske. */
.hero-bg-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(12, 12, 12, 0.5) 0%, rgba(12, 12, 12, 0.14) 35%, rgba(12, 12, 12, 0) 62%);
  z-index: 2;
}

/* Sehr zurueckhaltender Goldschimmer von rechts - verbindet das Foto mit der
   Akzentfarbe der Seite, ohne es einzufaerben. */
.hero-bg-image::before,
.hero-section::after {
  pointer-events: none;
}

.hero-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  background-image: radial-gradient(120% 85% at 100% 40%, rgba(197, 168, 106, 0.13) 0%, rgba(197, 168, 106, 0) 65%);
  z-index: 2;
}

.hero-content-wrapper {
  position: relative;
  z-index: 3; /* display above background images */
  width: 100%;
}

.hero-text-block {
  max-width: 650px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 3.8rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-white);
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

.hero-subtitle {
  font-family: var(--font-sans-body);
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-offwhite);
  margin-bottom: 2.5rem;
}

.hero-buttons {
  display: flex;
  gap: 1.25rem;
}

/* ==========================================================================
   HERO GOOGLE REVIEWS (compact, auto-rotating)
   ========================================================================== */
.hero-reviews {
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  max-width: 560px;
}

.hero-reviews-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.85rem;
}

.hero-reviews-google {
  display: inline-flex;
  flex-shrink: 0;
}

.hero-reviews-google svg {
  width: 21px;
  height: 21px;
}

.hero-reviews-stars {
  display: inline-flex;
  gap: 3px;
}

.star-icon {
  width: 18px;
  height: 18px;
  fill: #fbbc04; /* original Google star gold */
}

.star-icon.star-empty {
  fill: rgba(255, 255, 255, 0.18);
}

.hero-reviews-score {
  font-family: var(--font-sans-body);
  font-size: 0.82rem;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.hero-reviews-score strong {
  font-weight: 600;
  color: var(--text-offwhite);
}

.hero-reviews-summary:hover .hero-reviews-score,
.hero-reviews-summary:hover .hero-reviews-score strong {
  color: var(--primary-gold);
}

/* Height is reserved on the wrapper, not on the text: the author line always sits
   directly one row below the quote, while the block itself never changes height */
.hero-review-quote {
  min-height: 6.6rem;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.hero-review-quote.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.hero-review-text {
  font-family: var(--font-sans-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(229, 229, 229, 0.8);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-review-author {
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-white);
  margin-top: 0.5rem;
}

.hero-review-author .hero-review-date {
  font-family: var(--font-sans-body);
  font-weight: 300;
  letter-spacing: 0.4px;
  text-transform: none;
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .hero-review-quote {
    transition: opacity 0.2s ease;
  }

  .hero-review-quote.is-swapping {
    transform: none;
  }
}

/* ==========================================================================
   EINBLICKE-KARUSSELL

   Zwei Hochkant-Clips und fuenf Fotos direkt unter dem Hero. Die Clips liegen
   als 720x1280 vor, also 9:16 - das Reels-/TikTok-Format. Alle Kacheln
   erzwingen dieses Verhaeltnis ueber aspect-ratio.

   Gescrollt wird nativ: der Track ist ein overflow-x-Container mit
   scroll-snap. Wischen funktioniert dadurch ohne JavaScript, die Pfeile und
   Punkte in main.js setzen nur scrollLeft.
   ========================================================================== */
.video-strip {
  /* Gleicher Ton wie der Hero darueber - der Streifen liest sich als dessen
     Fortsetzung, erst der Badge-Streifen darunter setzt wieder ab. */
  background-color: var(--dark-bg);
  border-bottom: 1px solid var(--border-dark);
  padding: 4rem 0;
}

/* Zwei Zeilen: oben der Track, darunter die Punkte. Die Pfeile liegen per
   grid-area in derselben Zeile wie der Track und werden dort zentriert - mit
   position: absolute und top: 50% haetten sie sich auf .gallery samt
   Punktereihe bezogen und saessen sichtbar unterhalb der Kachelmitte. */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 880px;
  margin: 0 auto;
}

.gallery-track {
  grid-area: 1 / 1;
  display: grid;
  /* Feste Spaltenbreite ist hier richtig: die Spalten sollen NICHT in den
     Container passen, sondern ueberlaufen - genau das macht das Scrollen aus.
     50% minus halber Abstand ergibt zwei sichtbare Kacheln. */
  grid-auto-flow: column;
  grid-auto-columns: calc(50% - 1.25rem);
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Die Leiste waere hier nur ein Strich unter den Kacheln - gewischt und
     geklickt wird ohnehin. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gallery-track::-webkit-scrollbar {
  display: none;
}

.gallery-slide {
  scroll-snap-align: start;
}

.video-frame {
  position: relative;
  aspect-ratio: 9 / 16;
  /* overflow: hidden schneidet Video und Bild auf die Rundung zu - ohne das
     stiessen die eckigen Medien ueber die runden Ecken hinaus. Gleicher
     Radius wie beim Portrait im Abschnitt darunter. */
  overflow: hidden;
  border: 1px solid var(--border-dark);
  border-radius: 14px;
  background-color: #000;
}

.video-clip,
.gallery-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Querformate: cover wuerde hier links und rechts fast die Haelfte abschneiden.
   contain zeigt das ganze Foto, die Streifen oben und unten fallen auf dem
   schwarzen Rahmen kaum auf. */
.gallery-image.is-wide {
  object-fit: contain;
}

.gallery-arrow {
  grid-area: 1 / 1;   /* dieselbe Zeile wie der Track */
  align-self: center; /* damit exakt auf halber Kachelhoehe */
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  /* Deckend statt halbtransparent: der Knopf steht oft ueber einer hellen
     Bildstelle und muss auch dort als Knopf erkennbar bleiben. */
  background-color: rgba(12, 12, 12, 0.8);
  color: var(--text-white);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.gallery-arrow:hover {
  border-color: var(--primary-gold);
  color: var(--primary-gold);
  background-color: var(--dark-bg);
}

/* Im Markup stehen beide Pfeile auf hidden und werden erst von main.js
   eingeblendet: ohne JavaScript waeren sie funktionslos, gewischt werden kann
   dann aber weiterhin. Danach bleiben beide dauerhaft stehen, weil das
   Karussell umlaeuft. */
.gallery-arrow[hidden] {
  display: none;
}

/* Negativer Rand statt left/right: die Knoepfe haengen damit halb ueber dem
   Kachelrand, ohne aus dem Container zu laufen - der hat 1.5rem Innenabstand,
   die 20px bleiben also innerhalb des Fensters. */
.gallery-arrow-prev {
  justify-self: start;
  margin-left: -20px;
}

.gallery-arrow-next {
  justify-self: end;
  margin-right: -20px;
}

.gallery-dots {
  grid-area: 2 / 1;
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.75rem;
}

.gallery-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: var(--transition-smooth);
}

.gallery-dot:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.gallery-dot[aria-selected="true"] {
  background-color: var(--primary-gold);
  /* Etwas breiter statt nur andersfarbig - die aktive Stelle ist damit auch
     ohne Farbunterscheidung zu sehen. */
  width: 22px;
  border-radius: 4px;
}


/* ==========================================================================
   TRUST BADGES STRIP
   ========================================================================== */
.trust-badges-strip {
  background-color: var(--dark-section);
  border-bottom: 1px solid var(--border-dark);
  padding: 3rem 0;
}

/* Intro Section as an Elegant Left-Aligned Statement */
.intro-section {
  background-color: #0c0c0c;
  padding: 5rem 0;
  border-bottom: 1px solid var(--border-dark);
}

/* Portrait links, Zitat rechts. auto fuer die Bildspalte statt einer festen
   Breite: die Spalte richtet sich nach der max-width des Bildes, und der Text
   bekommt exakt den Rest - kein doppelt gepflegter Wert. */
.intro-wrapper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3rem;
  max-width: 1000px;
  margin: 0 auto;
}

.intro-portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border-dark);
}

.quote-container {
  position: relative;
  padding: 0.5rem 0 0.5rem 2.5rem;
  border-left: 3px solid var(--primary-gold);
  text-align: left;
}

.intro-text-quote {
  font-family: var(--font-sans-body);
  font-size: 1.25rem !important;
  line-height: 1.85;
  color: var(--text-offwhite);
  margin-bottom: 1.5rem;
  font-weight: 300; /* Light weight for a premium look */
  letter-spacing: 0.2px;
}

.quote-author {
  font-family: var(--font-sans-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-gold);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.quote-author-title {
  font-family: var(--font-sans-body);
  font-size: 0.8rem;
  color: #888888;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Ab hier ist nebeneinander zu eng: das Portrait wandert ueber den Text und
   wird kleiner, sonst bleibt fuer das Zitat keine brauchbare Zeilenlaenge. */
@media screen and (max-width: 900px) {
  .intro-wrapper {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 2rem;
  }

  .intro-portrait {
    max-width: 220px;
  }
}

@media screen and (max-width: 768px) {
  .intro-section {
    padding: 3.5rem 0;
  }

  .quote-container {
    padding: 0.5rem 0 0.5rem 1.25rem;
    margin: 0;
  }

  .intro-text-quote {
    font-size: 1.05rem !important;
    line-height: 1.75;
    margin-bottom: 1.25rem;
  }

  /* Auf dem Handy nimmt das ganze Portrait zu viel Platz weg. Es wird deshalb
     zum kleinen runden Ausschnitt: aspect-ratio 1 macht den Rahmen quadratisch,
     object-fit: cover fuellt ihn ohne Verzerrung.
     object-position schiebt den sichtbaren Ausschnitt nach oben - Lothar steht
     im oberen Drittel des Fotos, ein mittiger Ausschnitt zeigte sonst nur das
     T-Shirt statt des Gesichts. */
  .intro-portrait {
    width: 120px;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 14%;
    border-radius: 50%;
  }
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  /* Der Streifen ist semantisch eine Aufzaehlung von Vorteilen und damit ein
     <ul>. Reset, damit Punkte und Einzug das Rasterlayout nicht stoeren. */
  list-style: none;
  padding-left: 0;
}

.badge-item {
  text-align: center;
  padding: 1rem 0.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.badge-item:last-child {
  border-right: none;
}

.badge-icon-wrapper {
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  color: var(--primary-gold);
}

.badge-svg {
  width: 32px;
  height: 32px;
}

.badge-title {
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-white);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.badge-text {
  font-family: var(--font-sans-body);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ==========================================================================
   SERVICES SECTION ("Unsere Leistungen")
   ========================================================================== */
.services-section {
  background-color: #faf8f5;
  color: var(--text-dark);
  padding: 6rem 0;
}

.services-section .section-title {
  color: var(--text-dark);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  max-width: var(--container-width);
  margin: 0 auto;
}

.service-card {
  position: relative; /* relative parent for the absolute badge circle */
  background-color: var(--light-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: var(--transition-smooth);
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.card-img-wrapper {
  position: relative;
  overflow: hidden;
  height: 180px;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-smooth);
}

.service-card:hover .card-image {
  transform: scale(1.06);
}

/* Overlapping Badge Circle */
.card-badge-circle {
  position: absolute;
  top: 156px; /* positioned on top of the card relative container, centering on the image boundary */
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background-color: var(--primary-gold);
  border-radius: 50%;
  border: 3px solid #faf8f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dark-bg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: var(--transition-smooth);
  z-index: 12; /* z-index in foreground above other elements */
}

.card-badge-circle svg {
  width: 20px;
  height: 20px;
}

.service-card:hover .card-badge-circle {
  background-color: var(--dark-bg);
  color: var(--primary-gold);
  transform: translateX(-50%) scale(1.1);
}

.card-body {
  padding: 2.25rem 0.85rem 1.75rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.card-title {
  font-family: var(--font-sans-ui);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  margin-bottom: 0.75rem;
  color: var(--text-dark);
}

.card-text {
  font-size: 0.85rem;
  color: #555555;
  line-height: 1.5;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}

.card-link {
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--primary-gold);
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
}

.card-link:hover {
  color: var(--text-dark);
  border-bottom: 1px solid var(--text-dark);
}

/* ==========================================================================
   WHY CHOOSE US & STATS SECTION
   ========================================================================== */
.why-us-section {
  background-color: var(--dark-bg);
  padding: 6.5rem 0;
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
}

.why-us-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4.5rem;
  align-items: center;
}

.why-us-left {
  max-width: 500px;
}

.why-us-title {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

.why-us-description {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--text-offwhite);
  margin-bottom: 2.25rem;
}

.why-us-checklist {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.why-us-checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-white);
}

.check-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background-color: var(--primary-gold-light);
  color: var(--primary-gold);
  border-radius: 50%;
  flex-shrink: 0;
}

/* Stats Layout */
.why-us-right {
  width: 100%;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 2.25rem 1.75rem;
  background-color: var(--dark-section);
  border-left: 3px solid var(--primary-gold);
}

.stat-icon-wrapper {
  color: var(--primary-gold);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon-wrapper svg {
  width: 100%;
  height: 100%;
}

.stat-content {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-family: var(--font-sans-ui);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--primary-gold);
  margin-bottom: 0.35rem;
}

.stat-label {
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text-offwhite);
}

/* ==========================================================================
   OPERATIONAL AREA / EINSATZGEBIET
   ========================================================================== */
.area-section {
  background-color: var(--dark-section);
  padding: 5rem 0;
  border-bottom: 1px solid var(--border-dark);
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.faq-section {
  background-color: var(--dark-bg);
  padding: 6.5rem 0;
  border-bottom: 1px solid var(--border-dark);
}

.faq-accordion {
  max-width: 800px;
  margin: 3.5rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-item {
  background-color: var(--dark-section);
  border: 1px solid var(--border-dark);
  transition: var(--transition-smooth);
}

.faq-question {
  width: 100%;
  padding: 1.5rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  font-family: var(--font-sans-ui);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-white);
  transition: var(--transition-smooth);
}

.faq-question:hover {
  color: var(--primary-gold);
}

.faq-toggle-icon {
  color: var(--primary-gold);
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
}

.faq-item.active .faq-toggle-icon {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out;
  padding: 0 2rem;
}

.faq-item.active .faq-answer {
  padding-bottom: 1.5rem;
}

.faq-answer p {
  font-size: 0.95rem;
  color: var(--text-offwhite);
  line-height: 1.7;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */
.contact-section {
  background-color: #faf8f5;
  color: var(--text-dark);
  padding: 6.5rem 0;
}

.contact-credit {
  margin-top: 3rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dark);
}

.contact-credit a {
  color: var(--text-dark);
  text-decoration: underline;
}

.contact-credit a:hover {
  color: var(--primary-gold);
}

.contact-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4.5rem;
  align-items: start;
}

.contact-title {
  font-family: var(--font-serif);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 2.5rem;
  color: var(--text-dark);
}

.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}

.contact-details-list li {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 1rem;
  font-weight: 500;
}

.contact-icon-circle {
  width: 44px;
  height: 44px;
  background-color: rgba(197, 168, 106, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-gold);
  flex-shrink: 0;
}

.contact-icon-circle svg {
  width: 20px;
  height: 20px;
}

.contact-detail-text a:hover {
  color: var(--primary-gold);
}

/* Van Image With Overlay Badge */
.van-img-container {
  position: relative;
  margin-top: 2rem;
  border-radius: 0px;
  overflow: visible;
}

.van-image {
  width: 100%;
  border-radius: 0px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.van-badge-circle {
  position: absolute;
  bottom: -20px;
  left: -20px;
  width: 120px;
  height: 120px;
  background-color: var(--primary-gold);
  border-radius: 50%;
  border: 6px solid #faf8f5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 5;
}

.van-badge-text {
  font-family: var(--font-sans-ui);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.4;
  color: var(--dark-bg);
}

/* Contact Form Block */
.contact-form-block {
  background-color: var(--light-card);
  padding: 3.5rem 3rem;
  box-shadow: 0 20px 50px rgba(0,0,0,0.06);
  border: 1px solid #eaeaea;
}

.form-tagline {
  display: block;
  font-family: var(--font-sans-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--primary-gold);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.inquiry-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.form-group {
  position: relative;
}

.form-input, .form-textarea, .form-select {
  width: 100%;
  padding: 1rem 1.25rem;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  color: var(--text-dark);
  font-family: var(--font-sans-body);
  font-size: 0.9rem;
  border-radius: 0px;
  transition: var(--transition-smooth);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
  background-color: #ffffff;
  border-color: var(--primary-gold);
  box-shadow: 0 0 0 3px rgba(197, 168, 106, 0.15);
}

/* Custom styling for select dropdown icon */
.form-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
  background-repeat: no-repeat;
  background-position: right 1.25rem center;
  background-size: 1rem;
}

.form-textarea {
  resize: vertical;
}

/* Honeypot gegen Formular-Bots. Bewusst nicht "display: none" - einfache Bots
   ueberspringen unsichtbare Felder inzwischen, ein aus dem Viewport geschobenes
   Feld halten sie dagegen fuer echt. Fuer Menschen ist es weder sichtbar noch
   per Tab erreichbar (tabindex="-1" im HTML). */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Checkbox / GDPR Consent Styles */
.checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  text-align: left;
}

.form-checkbox {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--primary-gold);
}

.checkbox-label {
  font-family: var(--font-sans-body);
  font-size: 0.8rem;
  line-height: 1.4;
  color: #666666;
  cursor: pointer;
}

/* Form Routing & Preferences */
.form-routing-options {
  margin-top: 0.5rem;
}

.routing-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #777777;
  margin-bottom: 0.75rem;
}

.routing-flex {
  display: flex;
  gap: 1.5rem;
}

.routing-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
}

.routing-radio input {
  display: none;
}

.radio-custom {
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  transition: var(--transition-smooth);
}

.routing-radio input:checked + .radio-custom {
  border-color: var(--primary-gold);
}

.routing-radio input:checked + .radio-custom::after {
  content: '';
  width: 8px;
  height: 8px;
  background-color: var(--primary-gold);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Submit Button */
.btn-submit-form {
  background-color: var(--primary-gold);
  color: var(--dark-bg);
  padding: 1.1rem 2rem;
  font-family: var(--font-sans-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  transition: var(--transition-smooth);
}

.btn-submit-form:hover {
  background-color: var(--primary-gold-hover);
  transform: translateY(-2px);
}

.send-icon {
  transition: var(--transition-smooth);
}

.btn-submit-form:hover .send-icon {
  transform: translate(2px, -2px);
}

.form-status {
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5rem;
}

.form-status.success {
  color: #2e7d32;
}

.form-status.error {
  color: #c62828;
}

/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */
.main-footer {
  background-color: var(--dark-bg);
  border-top: 1px solid var(--border-dark);
  padding: 5rem 0 3rem;
}

.footer-content-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 2rem;
}

.footer-logo {
  height: 60px;
  width: auto;
}

/* Footer Nav */
.footer-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.25rem;
}

.footer-nav-list a {
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: var(--text-muted);
}

.footer-nav-list a:hover {
  color: var(--primary-gold);
}

.footer-nav-list a.legal-link {
  color: var(--text-muted);
}

.footer-nav-list a.legal-link:hover {
  color: var(--text-white);
}

/* Footer Bottom */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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


/* Scroll To Top Button */
.scroll-to-top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--dark-section);
  border: 1px solid var(--border-dark);
  color: var(--text-muted);
  transition: var(--transition-smooth);
}

.scroll-to-top:hover {
  background-color: var(--primary-gold);
  color: var(--dark-bg);
  border-color: var(--primary-gold);
  transform: translateY(-3px);
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* 1024px and down (Tablets & small laptops) */
@media screen and (max-width: 1024px) {
  .hero-title {
    font-size: 3rem;
  }
  
  .badges-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  
  .badge-item {
    border-right: none;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 780px;
  }

  .why-us-wrapper {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
  
  .why-us-left {
    max-width: 100%;
  }
  
  .contact-wrapper {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

/* 768px and down (Smartphones portrait/landscape) */
@media screen and (max-width: 768px) {
  .logo-link {
    height: 35px; /* scale down slightly on mobile screen to prevent overflowing menu */
  }

  .video-strip {
    padding: 3rem 0;
  }

  /* Eine Kachel pro Bild auf dem Handy - gewechselt wird per Wisch oder Pfeil. */
  .gallery {
    max-width: 400px;
  }

  .gallery-track {
    grid-auto-columns: 100%;
    gap: 1.5rem;
  }

  /* Die Pfeile ruecken auf die Kachel, weil neben ihr kein Platz mehr ist.
     Etwas kleiner als am Desktop, aber ueber der 40px-Marke, damit sie mit
     dem Daumen sicher zu treffen sind. */
  .gallery-arrow {
    width: 38px;
    height: 38px;
  }

  .gallery-arrow-prev {
    margin-left: 0.6rem;
  }

  .gallery-arrow-next {
    margin-right: 0.6rem;
  }

  .gallery-dots {
    margin-top: 1.25rem;
  }

  .hero-section {
    background-image: none;
    background-color: #0c0c0c;
    /* Title, subtitle and buttons fill exactly one screen; the review strip
       starts right below the fold and only appears once the visitor scrolls. */
    align-items: stretch;
    padding-bottom: 0;
  }

  .hero-text-block {
    /* Zwei Dinge auf einmal:
       1) svh statt vh. 100vh ist auf Mobilbrowsern die Hoehe OHNE eingeblendete
          Adressleiste - der Block wird damit hoeher als das sichtbare Fenster
          und schiebt die Bewertungen weiter runter als beabsichtigt.
          svh rechnet mit der tatsaechlich sichtbaren Hoehe.
       2) Der Abzug von 5.5rem ist der gewollte Anschnitt: so viel vom
          Bewertungs-Block ragt ins erste Bild und signalisiert Scrollbarkeit. */
    min-height: calc(100vh - 80px - 5.5rem);   /* Fallback fuer aeltere Browser */
    min-height: calc(100svh - 80px - 5.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .hero-bg-image {
    width: 100%; /* fill screen on mobile */
    opacity: 0.28; /* Heavily darken the image so text stands out */
  }

  /* Der Bildausschnitt darf auf dem schmalen Schirm enger sein. Die seitliche
     Maske entfaellt - das Bild liegt hier hinter dem gesamten Text und wird
     stattdessen oben und unten weich ausgeblendet. */
  .hero-bg-image::after {
    background-size: cover;
    background-position: 60% center;
    filter: brightness(1.35) contrast(0.96) saturate(1.05);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-composite: source-over;
    mask-composite: add;
  }

  .hero-bg-image::before {
    /* Stronger vertical dark gradient on mobile for maximum text readability */
    background-image: linear-gradient(to bottom, rgba(12, 12, 12, 0.95) 0%, rgba(12, 12, 12, 0.8) 50%, rgba(12, 12, 12, 0.98) 100%);
  }

  /* Der Goldschimmer ist auf dem schmalen Schirm nur Nebel ueber dem Text */
  .hero-section::after {
    display: none;
  }

  .main-header {
    padding: 1rem 0;
  }
  
  /* Show hamburger menu toggle */
  .mobile-nav-toggle {
    display: block;
  }
  
  .header-cta {
    display: none; /* Hide phone button on mobile header to save space */
  }
  
  /* Off-canvas menu layout */
  .nav-menu {
    position: fixed;
    top: 80px;
    left: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background-color: rgba(12, 12, 12, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 3rem 1.5rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    align-items: flex-start;
  }
  
  .nav-menu.open {
    transform: translateX(0);
  }
  
  .nav-list {
    flex-direction: column;
    width: 100%;
    gap: 2.25rem;
  }
  
  .nav-link {
    font-size: 1.1rem;
    display: block;
    width: 100%;
    padding: 0.5rem 0;
  }
  
  /* Hero typography */
  .hero-title {
    font-size: 2.25rem;
  }
  
  .hero-subtitle {
    font-size: 1.1rem;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: 1rem;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  /* Hero reviews: eigener Streifen direkt unter dem Erstbild. Der obere Abstand
     ist bewusst klein - sonst besteht der Anschnitt nur aus Leerraum und der
     Besucher sieht nicht, dass dort Bewertungen kommen. */
  .hero-reviews {
    margin-top: 0;
    padding: 1.5rem 0 3rem;
    border-top: none;
    max-width: 100%;
  }

  .hero-reviews-summary {
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
  }

  /* Slightly smaller so logo, stars and text still share one line on narrow phones */
  .hero-reviews-google svg {
    width: 19px;
    height: 19px;
  }

  .star-icon {
    width: 16px;
    height: 16px;
  }

  .hero-reviews-score {
    font-size: 0.78rem;
  }

  .hero-review-quote {
    min-height: 6rem;
  }

  .hero-review-text {
    font-size: 0.88rem;
    line-height: 1.65;
  }

  .hero-review-author {
    font-size: 0.7rem;
  }

  /* Badges */
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Bei zwei Spalten bleibt das fuenfte Badge ("Fester Ansprechpartner") allein
     in der letzten Reihe und sitzt linksbuendig unter dem ersten. Ueber beide
     Spalten gezogen zentriert es sich - .badge-item ist bereits text-align: center. */
  .badge-item:last-child {
    grid-column: 1 / -1;
  }

  /* Section headings were sized for desktop only */
  .section-title {
    font-size: 1.75rem;
    margin-bottom: 2.5rem;
  }

  .section-desc {
    font-size: 1rem;
  }

  /* Services: one centred column, cards no wider than a comfortable reading width */
  .services-section {
    padding: 4rem 0;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: 420px;
  }

  .card-img-wrapper {
    height: 200px;
  }

  .card-badge-circle {
    top: 176px; /* follows the taller image */
  }

  /* The narrow padding was made for a quarter-width card */
  .card-body {
    padding: 2.5rem 1.5rem 2rem;
  }

  .card-text {
    font-size: 0.9rem;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Form block padding */
  .contact-form-block {
    padding: 2.5rem 1.5rem;
  }
  
  .form-row-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  /* Footer content direction */
  .footer-content-grid {
    flex-direction: column;
    gap: 2rem;
    align-items: flex-start;
  }
  
  .footer-nav-list {
    flex-direction: column;
    gap: 1.25rem;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
    text-align: center;
  }
}

/* 480px and down (Small mobile screens) */
@media screen and (max-width: 480px) {
  .badges-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .why-us-title {
    font-size: 1.8rem;
  }
  
  .van-badge-circle {
    width: 100px;
    height: 100px;
    left: -10px;
    bottom: -10px;
  }
}

/* ==========================================================================
   CITIES TAGS, EMBEDDED MAP & SIMPLIFIED FORM STYLING
   ========================================================================== */
.cities-tags-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto 2.5rem;
}

.city-tag {
  font-family: var(--font-sans-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-offwhite);
  background-color: var(--dark-card);
  border: 1px solid var(--border-dark);
  padding: 0.5rem 1rem;
  border-radius: 0px;
  cursor: pointer;
  outline: none;
  transition: var(--transition-smooth);
}

.city-tag:focus-visible {
  box-shadow: 0 0 0 2px var(--primary-gold);
}

/* Expand button for the city list - mobile only, see media query below */
.cities-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 auto 2rem;
  padding: 0.5rem 1rem;
  background: none;
  border: 1px solid var(--border-dark);
  color: var(--primary-gold);
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.cities-toggle:hover {
  border-color: var(--primary-gold);
}

.cities-toggle svg {
  transition: transform 0.3s ease;
}

.cities-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.city-tag.active, .city-tag:hover {
  color: var(--dark-bg);
  background-color: var(--primary-gold);
  border-color: var(--primary-gold);
  transform: translateY(-2px);
}

.interactive-map {
  width: 100%;
  height: 540px;
  background-color: #121212;
  z-index: 1;
}

/* Custom Leaflet Dark Theme & Popup Styling */
.leaflet-container {
  font-family: var(--font-sans-ui) !important;
  background: #111111 !important;
}

.leaflet-popup-content-wrapper {
  background: rgba(20, 20, 20, 0.95) !important;
  border: 1px solid var(--primary-gold) !important;
  border-radius: 4px !important;
  color: var(--text-white) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
  backdrop-filter: blur(8px);
}

.leaflet-popup-tip {
  background: rgba(20, 20, 20, 0.95) !important;
  border-left: 1px solid var(--primary-gold) !important;
  border-bottom: 1px solid var(--primary-gold) !important;
}

.map-popup-card {
  padding: 0.25rem 0.5rem;
  text-align: left;
}

.map-popup-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-gold);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.map-popup-subtitle {
  font-size: 0.85rem;
  color: var(--text-offwhite);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.map-popup-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--border-dark);
  margin-bottom: 0.5rem;
}

.map-popup-btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.8rem;
  background-color: #00a884 !important; /* Official WhatsApp Green */
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 168, 132, 0.3);
  transition: all 0.2s ease;
}

.map-popup-btn:hover {
  background-color: #008069 !important; /* WhatsApp Dark Green on hover */
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* Marker Pulse Animation */
.area-pulsing-circle {
  animation: areaPulse 2.5s infinite ease-in-out;
}

@keyframes areaPulse {
  0% {
    stroke-opacity: 0.9;
    stroke-width: 3;
    fill-opacity: 0.25;
  }
  50% {
    stroke-opacity: 0.4;
    stroke-width: 5;
    fill-opacity: 0.12;
  }
  100% {
    stroke-opacity: 0.9;
    stroke-width: 3;
    fill-opacity: 0.25;
  }
}

.map-wrapper {
  position: relative;
  border: 1px solid var(--border-dark);
  max-width: var(--container-width);
  margin: 0 auto;
  box-shadow: var(--shadow-dark);
}



/* Consent overlay shown in place of the map until the visitor agrees */
.map-consent {
  position: absolute;
  inset: 0;
  z-index: 500; /* above the empty map container, below the modal */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background-color: var(--dark-card);
  background-image: linear-gradient(135deg, rgba(197, 168, 106, 0.05), rgba(0, 0, 0, 0.25));
  text-align: center;
}

.map-consent[hidden] {
  display: none;
}

.map-consent-inner {
  max-width: 460px;
  color: var(--primary-gold);
}

.map-consent-title {
  font-family: var(--font-sans-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-white);
  margin: 1rem 0 0.75rem;
}

.map-consent-text {
  font-family: var(--font-sans-body);
  font-size: 0.9rem !important;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
}

.map-consent-btn {
  padding: 0.9rem 2rem;
}

.map-consent-link {
  display: block;
  margin: 1rem auto 0;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font-sans-body);
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: underline;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.map-consent-link:hover {
  color: var(--primary-gold);
}

.map-button-container {
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
}

.btn-google-maps {
  background-color: #ffffff !important;
  color: #202124 !important; /* Google's dark text color */
  border: 1px solid #dadce0 !important; /* Google's border color */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn-google-maps:hover {
  background-color: #f8f9fa !important;
  border-color: #cdd1d4 !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.btn-google-maps:active {
  background-color: #f1f3f4 !important;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Simplified form buttons layout for target group (40-60) */
.form-buttons-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1rem;
}

/* Primary action - same gold CTA as the buttons in the hero */
.btn-submit-email {
  background-color: var(--primary-gold);
  color: var(--dark-bg);
  padding: 1.1rem 2rem;
  font-family: var(--font-sans-ui);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-submit-email:hover:not(:disabled) {
  background-color: var(--primary-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(197, 168, 106, 0.3);
}

.btn-submit-email:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Secondary action - outlined so the gold CTA stays the obvious first choice */
.btn-submit-whatsapp {
  background-color: transparent;
  color: white; /* premium emerald green */
  padding: 0.95rem 2rem;
  font-family: var(--font-sans-ui);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  background-color: #1b7a4c;
  transition: var(--transition-smooth);
  border-radius: 0px;
  cursor: pointer;
  border: 1px solid #1b7a4c;
  text-decoration: none; /* the element is an <a>, not a <button> */
}



.btn-submit-whatsapp:disabled {
  opacity: 0.7;
  cursor: default;
}

/* Make body reading sizes slightly bigger & readable for 40-60 target demographic */
p, .card-text, .badge-text, .why-us-description, .why-us-checklist li, .faq-answer p {
  font-size: 1.02rem !important;
  line-height: 1.75;
}

@media screen and (max-width: 768px) {

  /* City tags: 21 buttons filled most of the screen. Collapsed to roughly
     three rows with an expand button, left aligned so the rows are not ragged. */
  .cities-tags-container {
    justify-content: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    position: relative;
    max-height: 7rem;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  .cities-tags-container.expanded {
    max-height: 60rem;
  }

  /* Fades the clipped row instead of cutting it off hard */
  .cities-tags-container:not(.expanded)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.25rem;
    background: linear-gradient(to bottom, rgba(18, 18, 18, 0), var(--dark-section));
    pointer-events: none;
  }

  .cities-toggle {
    display: inline-flex;
  }

  .city-tag {
    font-size: 0.75rem;
    padding: 0.4rem 0.7rem;
  }

  /* Taller than before so the popup fits without being clipped at the top */
  .interactive-map {
    height: 420px;
  }

  /* The popup has to leave the map itself visible on a narrow screen */
  .leaflet-popup-content {
    margin: 10px 12px !important;
  }

  .map-popup-title {
    font-size: 0.95rem;
  }

  .map-popup-subtitle {
    font-size: 0.78rem;
    margin-bottom: 0.4rem;
  }

  .map-popup-info {
    font-size: 0.72rem;
    padding: 0.4rem 0;
  }

  .map-popup-btn {
    font-size: 0.78rem;
    padding: 0.45rem 0.6rem;
  }

  .map-consent {
    padding: 1.25rem;
  }

  .map-consent-title {
    font-size: 0.9rem;
    margin-top: 0.75rem;
  }

  .map-consent-text {
    font-size: 0.82rem !important;
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }

  .map-consent-btn {
    padding: 0.85rem 1.5rem;
    font-size: 0.78rem;
  }

  /* Keep the Google Maps button on a single line instead of stretching it */
  .map-button-container {
    margin-top: 1.25rem;
  }

  .btn-google-maps {
    font-size: 0.72rem;
    letter-spacing: 0.8px;
    padding: 0.9rem 1.1rem;
  }
}

@media screen and (max-width: 480px) {
  .interactive-map {
    height: 380px;
  }

  .city-tag {
    font-size: 0.72rem;
    padding: 0.35rem 0.6rem;
  }

  .btn-google-maps {
    font-size: 0.68rem;
    letter-spacing: 0.5px;
    padding: 0.85rem 0.9rem;
  }
}

/* Floating WhatsApp Button */
.whatsapp-floating-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #00a884; /* Official Modern WhatsApp Green */
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.whatsapp-floating-btn svg {
  width: 36px;
  height: 36px;
  transition: transform 0.3s ease;
}

.whatsapp-floating-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  color: #ffffff;
  background-color: #008069; /* Official WhatsApp Dark Green on hover */
}

/* Red Notification Badge */
.whatsapp-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #ff3b30; /* Bright iOS/notification red */
  color: #ffffff;
  font-family: var(--font-sans-ui);
  font-size: 0.75rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
  border: 2px solid #ffffff; /* White border to make it pop */
  animation: pulse-badge 2s infinite; /* Premium pulse animation to attract attention */
}

@keyframes pulse-badge {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(255, 59, 48, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
  }
}

/* Tooltip for floating WhatsApp button */
.whatsapp-floating-btn::before {
  content: "Chat on WhatsApp";
  position: absolute;
  right: 75px;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(12, 12, 12, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #ffffff;
  padding: 0.5rem 0.85rem;
  font-family: var(--font-sans-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.whatsapp-floating-btn:hover::before {
  opacity: 1;
  visibility: visible;
}

/* Responsive adjustment for mobile screens */
@media screen and (max-width: 768px) {
  .whatsapp-floating-btn {
    bottom: 20px;
    right: 20px;
    width: 52px;
    height: 52px;
  }
  
  .whatsapp-floating-btn svg {
    width: 32px;
    height: 32px;
  }
  
  .whatsapp-floating-btn::before {
    display: none; /* Hide tooltip on mobile since there is no hover */
  }
}

/* ==========================================================================
   COOKIE CONSENT MANAGER (DATENSCHUTZ-PRÄFERENZ)
   ========================================================================== */

/* Floating Cookie Trigger Button */
.cookie-floating-btn {
  position: fixed;
  bottom: 25px;
  left: 25px;
  width: 50px;
  height: 50px;
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--primary-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.cookie-floating-btn:hover {
  transform: scale(1.1);
  background-color: #262626;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* Modal Backdrop Overlay */
.cookie-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 1rem;
}

.cookie-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Card */
.cookie-modal-card {
  background-color: #ffffff;
  color: #333333;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  border-radius: 4px;
  overflow: hidden;
  animation: cookieModalSlide 0.3s ease-out;
  border: 1px solid #eaeaea;
  text-align: left;
}

@keyframes cookieModalSlide {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Modal Header */
.cookie-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem 0.75rem;
}

.cookie-modal-title {
  font-family: var(--font-sans-ui);
  font-size: 1.6rem;
  font-weight: 700;
  color: #111111;
  margin: 0;
}

.cookie-modal-header-links {
  display: flex;
  gap: 1.25rem;
}

.cookie-header-link {
  font-family: var(--font-sans-body);
  font-size: 0.85rem;
  color: #666666;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.cookie-header-link:hover {
  color: #134B27;
  text-decoration: underline;
}

/* Description */
.cookie-modal-desc {
  font-family: var(--font-sans-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444444;
  padding: 0 2rem 1.25rem;
  margin: 0;
  border-bottom: 1px solid #eeeeee;
}

/* Tabs Bar */
.cookie-tabs-bar {
  display: flex;
  background-color: #f7f7f7;
  border-bottom: 1px solid #e0e0e0;
  overflow-x: auto;
}

.cookie-tab-btn {
  flex: 1;
  min-width: 120px;
  background: none;
  border: none;
  padding: 1rem 1.25rem;
  font-family: var(--font-sans-ui);
  font-size: 0.9rem;
  font-weight: 700;
  color: #222222;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  border-right: 1px solid #e5e5e5;
  white-space: nowrap;
}

.cookie-tab-btn:last-child {
  border-right: none;
}

.cookie-tab-btn.active {
  background-color: #134B27; /* Dark green from screenshot */
  color: #ffffff;
}

.cookie-tab-btn:hover:not(.active) {
  background-color: #eaeaea;
}

/* Modal Body */
.cookie-modal-body {
  padding: 1.75rem 2rem;
  overflow-y: auto;
  flex: 1;
  max-height: 50vh;
  background-color: #ffffff;
}

/* Scrollbar Styling */
.cookie-modal-body::-webkit-scrollbar {
  width: 8px;
}
.cookie-modal-body::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.cookie-modal-body::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.cookie-modal-body::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Tab Content */
.cookie-tab-content {
  display: none;
}

.cookie-tab-content.active {
  display: block;
}

/* TAB 1: Service-Gruppen CSS */
.cookie-group-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cookie-group-item {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 1.25rem;
}

.cookie-group-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cookie-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cookie-checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cookie-checkbox-input {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: #134B27;
}

.cookie-checkbox-input:disabled {
  cursor: not-allowed;
}

.cookie-group-title {
  font-family: var(--font-sans-ui);
  font-size: 1rem;
  font-weight: 700;
  color: #111111;
  cursor: pointer;
}

.cookie-checkbox-input:disabled + .cookie-group-title {
  color: #777777;
  cursor: not-allowed;
}

.cookie-group-desc {
  font-family: var(--font-sans-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #555555;
  margin: 0 0 0.5rem 2rem;
}

/* Accordion Styling */
.cookie-accordion-toggle {
  background: none;
  border: none;
  color: #0d5c34;
  font-family: var(--font-sans-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
}

.cookie-accordion-toggle:hover {
  text-decoration: underline;
}

.dropdown-arrow-icon {
  transition: transform 0.2s ease;
}

.cookie-accordion-content {
  display: none;
  margin: 0.75rem 0 0.25rem 2rem;
}

.cookie-accordion-content.open {
  display: block;
}

.cookie-details-box {
  background-color: #f9f9f9;
  border: 1px solid #eaeaea;
  padding: 0;
  border-radius: 4px;
  font-family: var(--font-sans-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: #444444;
  overflow: hidden;
}

.cookie-detail-grid {
  display: flex;
  flex-direction: column;
}

.cookie-detail-row {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #e5e5e5;
  align-items: start;
}

.cookie-detail-row:last-child {
  border-bottom: none;
}

.cookie-detail-row-section {
  align-items: start;
}

.cookie-detail-label {
  font-weight: 700;
  color: #222222;
}

.cookie-detail-value {
  color: #333333;
}

.cookie-section-heading {
  grid-column: 1 / -1;
  padding-top: 0.35rem;
  margin-top: 0.2rem;
  font-weight: 700;
  font-size: 0.88rem;
  color: #111111;
}

.cookie-cookie-list {
  display: flex;
  flex-direction: column;
}

.cookie-cookie-entry {
  padding: 0.8rem 0 0.8rem 0;
  border-top: 1px solid #e5e5e5;
}

.cookie-cookie-entry:first-child {
  padding-top: 0;
  border-top: none;
}

.cookie-cookie-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 0.1rem 0;
}

.cookie-cookie-label {
  font-weight: 700;
  color: #222222;
}

.cookie-cookie-value {
  color: #333333;
}

.map-wrapper {
  position: relative;
}



/* TAB 2 & 3: Services & Provider CSS */
.cookie-search-bar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.cookie-search-input {
  flex: 1;
  padding: 0.6rem 1rem;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-family: var(--font-sans-body);
  font-size: 0.88rem;
}

.cookie-search-input:focus {
  outline: none;
  border-color: #134B27;
}

.cookie-count-badge {
  font-family: var(--font-sans-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: #555555;
  white-space: nowrap;
}

.cookie-services-list, .cookie-provider-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.cookie-service-item {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 1rem;
  display: flex;
  flex-direction: column;
}

.cookie-service-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cookie-service-info {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.cookie-service-name {
  font-family: var(--font-sans-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
  min-width: 150px;
}

/* Custom Switch Toggle */
.cookie-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cookie-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.cookie-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .3s;
  border-radius: 24px;
}

.cookie-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

.cookie-switch input:checked + .cookie-slider {
  background-color: #134B27;
}

.cookie-switch input:disabled + .cookie-slider {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

.cookie-switch input:checked:disabled + .cookie-slider {
  background-color: #8fae9b;
}

.cookie-switch input:checked + .cookie-slider:before {
  transform: translateX(20px);
}

.cookie-switch-label {
  font-family: var(--font-sans-ui);
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
}

/* Providers List styling */
.cookie-provider-item {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 1rem;
}

.cookie-provider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.cookie-provider-name {
  font-family: var(--font-sans-ui);
  font-size: 0.95rem;
  font-weight: 700;
  color: #111111;
}

.cookie-provider-desc {
  font-family: var(--font-sans-body);
  font-size: 0.88rem;
  line-height: 1.5;
  color: #555555;
  margin: 0 0 0.5rem 0;
}

/* TAB 4: Einwilligung-Historie CSS */
.cookie-table-scroll-container {
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.cookie-history-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans-body);
  font-size: 0.85rem;
  text-align: left;
}

.cookie-history-table th, .cookie-history-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}

.cookie-history-table th {
  background-color: #f7f7f7;
  font-family: var(--font-sans-ui);
  font-weight: 700;
  color: #222222;
}

.cookie-history-table tr:last-child td {
  border-bottom: none;
}

.cookie-uid-box {
  background-color: #f7f7f7;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  font-family: var(--font-sans-body);
  font-size: 0.85rem;
  color: #555555;
  display: flex;
  justify-content: center;
}

/* Modal Footer */
.cookie-modal-footer {
  background-color: #f7f7f7;
  border-top: 1px solid #e0e0e0;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cookie-btn {
  font-family: var(--font-sans-ui);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  white-space: nowrap;
}

.cookie-btn-save {
  background-color: #134B27; /* Dark Green */
  color: #ffffff;
  flex-grow: 1;
  max-width: 250px;
}

.cookie-btn-save:hover {
  background-color: #0d381c;
}

.cookie-btn-accept-all {
  background-color: #134B27;
  color: #ffffff;
  flex-grow: 2;
  max-width: 350px;
}

.cookie-btn-accept-all:hover {
  background-color: #0d381c;
}

.cookie-btn-accept-essential {
  background-color: #134B27;
  color: #ffffff;
  flex-grow: 1.5;
  max-width: 300px;
}

.cookie-btn-accept-essential:hover {
  background-color: #0d381c;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .cookie-modal-overlay {
    padding: 0.75rem;
  }

  .cookie-modal-card {
    max-height: calc(100vh - 1.5rem);
    /* dvh accounts for the browser's address bar, so the buttons at the
       bottom stay reachable. Older browsers keep the vh value above. */
    max-height: calc(100dvh - 1.5rem);
  }

  /* Only the body may scroll. Without this the flex children shrink
     proportionally and header, tabs and content get squashed/cut off. */
  .cookie-modal-header,
  .cookie-modal-desc,
  .cookie-tabs-bar,
  .cookie-modal-footer {
    flex-shrink: 0;
  }

  .cookie-modal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem 0.5rem;
  }

  .cookie-modal-title {
    font-size: 1.25rem;
  }

  .cookie-modal-header-links {
    width: 100%;
    justify-content: flex-start;
    gap: 1rem;
  }

  .cookie-header-link {
    font-size: 0.8rem;
  }

  .cookie-modal-desc {
    font-size: 0.82rem;
    line-height: 1.5;
    padding: 0 1.25rem 0.9rem;
  }

  /* Four tabs on two rows instead of a horizontal scroll area nobody notices */
  .cookie-tabs-bar {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .cookie-tab-btn {
    flex: 1 1 50%;
    min-width: 0;
    font-size: 0.75rem;
    padding: 0.7rem 0.4rem;
    border-bottom: 1px solid #e5e5e5;
  }

  .cookie-tab-btn:nth-child(2n) {
    border-right: none;
  }

  .cookie-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    padding: 1.25rem;
    -webkit-overflow-scrolling: touch;
  }

  /* Title and "Informationen anzeigen" need their own lines here */
  .cookie-group-header,
  .cookie-service-main,
  .cookie-provider-header {
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .cookie-group-desc {
    font-size: 0.82rem;
    margin-left: 0;
  }

  .cookie-modal-footer {
    padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    flex-direction: column;
    gap: 0.6rem;
  }

  .cookie-btn {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem;
    font-size: 0.85rem;
    white-space: normal;
  }

  .cookie-floating-btn {
    bottom: 20px;
    left: 20px;
    width: 44px;
    height: 44px;
  }
}

@media screen and (max-width: 480px) {
  .cookie-modal-title {
    font-size: 1.15rem;
  }

  .cookie-modal-desc {
    font-size: 0.8rem;
  }

  .cookie-tab-btn {
    font-size: 0.7rem;
    padding: 0.6rem 0.3rem;
  }

  .cookie-btn {
    font-size: 0.8rem;
    padding: 0.7rem;
  }
}

/* ==========================================================================
   LEGAL PAGES STYLING (IMPRESSUM & DATENSCHUTZ)
   ========================================================================== */
.legal-page-content {
  padding: 160px 0 100px; /* Space for the fixed header */
  background-color: var(--dark-bg);
  color: var(--text-offwhite);
  min-height: 75vh;
  text-align: left;
}

.legal-page-content h1 {
  font-family: var(--font-sans-ui);
  font-size: clamp(1.75rem, 6vw, 2.75rem);
  color: var(--primary-gold);
  margin-bottom: 2rem;
  font-weight: 700;
  letter-spacing: clamp(0.4px, 0.15vw, 1px);
  line-height: 1.2;
  overflow-wrap: break-word;
  hyphens: auto;
}

.legal-page-content h2 {
  font-family: var(--font-sans-ui);
  font-size: 1.6rem;
  color: var(--text-white);
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.legal-page-content p {
  font-family: var(--font-sans-body);
  font-size: 1.02rem !important;
  line-height: 1.8;
  color: var(--text-offwhite);
  margin-bottom: 1.5rem;
}

.legal-page-content ul {
  margin-bottom: 2rem;
  padding-left: 1.75rem;
  list-style-type: square;
}

.legal-page-content li {
  font-family: var(--font-sans-body);
  font-size: 1.02rem !important;
  line-height: 1.75;
  color: var(--text-offwhite);
  margin-bottom: 0.75rem;
}

.legal-page-content a {
  color: var(--primary-gold);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.legal-page-content a:hover {
  color: var(--text-white);
  text-decoration: underline;
}

#openCookieSettingsBtn {
  font-weight: 700;
  border-bottom: 1px dashed var(--primary-gold);
  cursor: pointer;
}

#openCookieSettingsBtn:hover {
  color: var(--text-white);
  border-bottom-color: var(--text-white);
}

/* Adjust top padding on mobile */
@media screen and (max-width: 768px) {
  .legal-page-content {
    padding: 120px 0 60px;
  }
  
  /* h1-Groesse kommt aus dem clamp() oben - eine feste Angabe hier wuerde die
     fluide Skalierung wieder aushebeln. */

  .legal-page-content h2 {
    font-size: 1.35rem;
    margin-top: 2.5rem;
  }
}

/* ==========================================================================
   DEDICATED SERVICE PAGES STYLING
   ========================================================================== */
/* Der eigenstaendige, mittige .service-hero ist entfallen - alle Seiten nutzen
   jetzt denselben .hero-section wie die Startseite. Die dortige Absicherung
   gegen zu lange Leistungsnamen ("Haushaltsauflösung") ist als
   overflow-wrap/hyphens auf .hero-title uebernommen worden. */

.service-page-content {
  padding: 80px 0;
  background-color: var(--dark-bg);
  color: var(--text-offwhite);
  text-align: left;
}

/* Auf der Startseite grenzt der Entruempelungs-Block direkt an die ebenfalls
   dunkle Intro-Sektion. Ohne diesen Ton wuerden beide ineinanderlaufen. */
.service-page-content.section-alt {
  background-color: var(--dark-section);
}

.service-page-content h2 {
  font-family: var(--font-sans-ui);
  font-size: 2rem;
  color: var(--text-white);
  margin-top: 3.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-dark);
  padding-bottom: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.service-page-content h3 {
  font-family: var(--font-sans-ui);
  font-size: 1.45rem;
  color: var(--primary-gold);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  font-weight: 600;
}

.service-page-content p {
  font-family: var(--font-sans-body);
  /* Von 1.05rem angehoben. Die Zielgruppe liegt zwischen 40 und 60 Jahren,
     ~17px Fliesstext ist dafuer zu klein - vgl. den Hinweis zu den
     vereinfachten Formular-Buttons in index.html. */
  font-size: 1.15rem;
  line-height: 1.85;
  color: var(--text-offwhite);
  margin-bottom: 1.5rem;
}

.service-page-content ul, .service-page-content ol {
  margin-bottom: 2rem;
  padding-left: 1.75rem;
}

.service-page-content li {
  font-family: var(--font-sans-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: var(--text-offwhite);
  margin-bottom: 0.75rem;
}

.service-page-content strong {
  color: var(--text-white);
}

/* CTA Card within service page content */
.service-cta-card {
  background-color: var(--dark-section);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--primary-gold);
  padding: 2.5rem;
  margin-top: 4rem;
  border-radius: 4px;
  text-align: center;
}

.service-cta-card h3 {
  margin-top: 0;
  color: var(--text-white);
  font-size: 1.6rem;
}

.service-cta-card p {
  color: var(--text-offwhite);
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.service-cta-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Ueberlaufschutz fuer die Unterseiten.
   Lange URLs in der Datenschutzerklaerung und Bilder ohne max-width sind die
   beiden Faelle, die auf schmalen Displays sonst die ganze Seite seitlich
   verschieben - der Nutzer sieht dann rechts einen leeren Streifen.
   --------------------------------------------------------------------------- */
.service-page-content p,
.service-page-content li,
.service-page-content a,
.legal-page-content p,
.legal-page-content li,
.legal-page-content a {
  overflow-wrap: break-word;
}

.service-page-content img,
.legal-page-content img {
  max-width: 100%;
  height: auto;
}

/* Querverweise auf die uebrigen Leistungsseiten. Halten die Unterseiten
   untereinander verlinkt, statt sie nur von der Startseite abhaengen zu lassen. */
.related-services {
  list-style: none;
  padding-left: 0;
  margin: 1.5rem 0 2rem;
}

.related-services li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-dark);
}

.related-services li:last-child {
  border-bottom: none;
}

.related-services a {
  color: var(--primary-gold);
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.related-services a:hover {
  color: var(--text-white);
  text-decoration: underline;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .service-page-content {
    padding: 50px 0;
  }

  .service-page-content h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
  }

  .service-page-content h3 {
    font-size: 1.25rem;
    margin-top: 2rem;
  }

  .service-cta-card {
    padding: 1.5rem;
    margin-top: 3rem;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   SERVICE-SEITEN: GEMEINSAME INHALTSBLOECKE

   Alle vier Seiten nutzen inzwischen denselben .hero-section wie die
   Startseite. Die frueher eigenstaendigen Regeln fuer den mittigen
   .service-hero (samt -content, -title, -subtitle, -lead, -buttons) sind
   damit entfallen, ebenso das Kachelraster .service-highlights, die
   Nummernliste .steps-list/.step-* und der Preisblock .price-*. An ihre
   Stelle sind .check-list und .timeline getreten.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Der Hero der Leistungsseiten nutzt dieselbe Auszeichnung wie die Startseite.
   Dort steht in der H1 "ENTRÜMPELUNG", hier stehen laengere Leistungsnamen:
   "HAUSHALTSAUFLÖSUNG" ist bei 3.8rem als ein einziges Wort breiter als der
   650px schmale .hero-text-block und ragte ohne Trennung heraus. Im Markup
   steht zusaetzlich ein &shy; an der sinnvollen Trennstelle.
   -------------------------------------------------------------------------- */
.hero-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* --------------------------------------------------------------------------
   Einleitungsabsatz direkt unter einer H2. Hebt sich vom uebrigen Fliesstext
   ab und gibt dem Abschnitt einen ruhigen Einstieg.
   -------------------------------------------------------------------------- */
.service-page-content .lead-text {
  font-size: clamp(1.2rem, 2.4vw, 1.35rem);
  line-height: 1.75;
  font-weight: 300;
  color: var(--text-white);
  margin-bottom: 1.75rem;
}

/* --------------------------------------------------------------------------
   Kompakte Hakenliste.

   Ersetzt auf der Startseite das Kachelraster .service-highlights: fuer eine
   reine Aufzaehlung dessen, was geraeumt wird, genuegt der Haken - die
   Beschreibungstexte haben den Abschnitt nur unuebersichtlich gemacht. Das
   Kachelraster bleibt fuer die Leistungsseiten erhalten, wo die Erlaeuterung
   tatsaechlich Information traegt.
   -------------------------------------------------------------------------- */
.check-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem 2.5rem;
  list-style: none;
  padding-left: 0;
  margin: 2rem 0 2.5rem;
}

.service-page-content .check-list li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--text-white);
}

/* --------------------------------------------------------------------------
   ZEITSTRAHL FUER ABLAUFBESCHREIBUNGEN

   Desktop: vier Spalten mit waagerechter Verbindungslinie.
   Mobil:   eine senkrechte Achse links neben dem Text.

   Die Linie wird nicht als ein durchgehendes Element gezeichnet, sondern pro
   Schritt als ::before von der eigenen Marker-Mitte bis zur Mitte des
   naechsten. Beim letzten Schritt entfaellt sie. Dadurch braucht es keine
   festen Prozentwerte fuer Anfang und Ende, und die Darstellung bleibt
   richtig, wenn ein Schritt dazukommt oder wegfaellt.
   -------------------------------------------------------------------------- */
.timeline {
  /* Durchmesser des Nummernkreises. Steht als Variable hier, weil Linie,
     Einrueckung und Versatz auf Mobilgeraeten davon abhaengen. */
  --timeline-marker: 3.5rem;
  --timeline-gap: 2.25rem;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 1.5rem;
  list-style: none;
  padding-left: 0;
  margin: 3rem 0 1.5rem;
}

.service-page-content .timeline li {
  position: relative;
  margin-bottom: 0;
  text-align: center;
}

.timeline-item::before {
  content: '';
  position: absolute;
  top: calc(var(--timeline-marker) / 2);
  left: 50%;
  right: -50%;
  height: 1px;
  /* Der Verlauf laesst die Linie zur Mitte hin auslaufen, statt sie als
     harten Strich durchzuziehen - das wirkt ruhiger. */
  background: linear-gradient(to right,
    var(--primary-gold) 0%,
    rgba(197, 168, 106, 0.22) 50%,
    var(--primary-gold) 100%);
  z-index: 0;
}

.timeline-item:last-child::before {
  display: none;
}

.timeline-marker {
  position: relative;
  z-index: 1;
  width: var(--timeline-marker);
  height: var(--timeline-marker);
  margin: 0 auto 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--dark-bg);
  border: 1px solid var(--primary-gold);
  /* Der erste Ring hat die Farbe des Abschnitts und stanzt die Linie rund um
     den Kreis frei, der zweite setzt einen feinen goldenen Aussenrand. */
  box-shadow:
    0 0 0 7px var(--dark-section),
    0 0 0 8px rgba(197, 168, 106, 0.16);
}

/* Auf der Startseite liegt der Zeitstrahl in .section-alt (--dark-section),
   auf den Leistungsseiten dagegen auf --dark-bg. Der ausstanzende Ring muss
   die Farbe des jeweiligen Hintergrunds tragen, sonst zeichnet sich um jeden
   Kreis ein sichtbarer Ring ab. Fuellung und Ring tauschen dafuer die Rolle. */
.service-page-content:not(.section-alt) .timeline-marker {
  background-color: var(--dark-section);
  box-shadow:
    0 0 0 7px var(--dark-bg),
    0 0 0 8px rgba(197, 168, 106, 0.16);
}

.timeline-number {
  font-family: var(--font-sans-ui);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary-gold);
}

.service-page-content .timeline-title {
  font-family: var(--font-sans-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--text-white);
  margin: 0 0 0.65rem;
}

.timeline-text {
  font-family: var(--font-sans-body);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-offwhite);
  margin: 0;
}

/* Zwei Spalten im mittleren Bereich. Ohne die zusaetzliche Regel liefe die
   Linie des zweiten Schritts am Zeilenende ins Leere. */
@media (min-width: 769px) and (max-width: 1024px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem 1.5rem;
  }

  .timeline-item:nth-child(2)::before {
    display: none;
  }
}

@media (max-width: 768px) {
  .timeline {
    grid-template-columns: 1fr;
    gap: var(--timeline-gap);
  }

  .service-page-content .timeline li {
    text-align: left;
    padding-left: calc(var(--timeline-marker) + 1.25rem);
    min-height: var(--timeline-marker);
  }

  .timeline-marker {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  /* Senkrechte Achse: unterhalb des Kreises bis in den Abstand zum naechsten
     Schritt hinein, wo der naechste Kreis ansetzt. */
  .timeline-item::before {
    top: var(--timeline-marker);
    bottom: calc(var(--timeline-gap) * -1);
    left: calc(var(--timeline-marker) / 2);
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom,
      var(--primary-gold) 0%,
      rgba(197, 168, 106, 0.22) 50%,
      var(--primary-gold) 100%);
  }
}

/* Kein prefers-reduced-motion-Block mehr noetig: der Zeitstrahl hat keinen
   Hover-Zustand und keine Uebergaenge, es bewegt sich also nichts. */

/* --------------------------------------------------------------------------
   Bild neben Text. Auf Mobilgeraeten rutscht das Bild unter den Text.
   -------------------------------------------------------------------------- */
.service-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
  margin: 3rem 0;
}

.service-split-media img {
  width: 100%;
  height: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.service-split h3:first-child,
.service-split-text h3:first-child {
  margin-top: 0;
}

/* h4 wird derzeit vom Zeitstrahl (.timeline-title) genutzt und bleibt daher
   als Grundregel erhalten. */
.service-page-content h4 {
  font-family: var(--font-sans-ui);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-white);
  letter-spacing: 0.5px;
  margin: 0;
}

/* Die FAQ liegt auf den Service-Seiten im dunklen Inhaltsbereich statt in
   einer eigenen hellen Sektion wie auf der Startseite. */
.service-page-content .faq-accordion {
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .service-split {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  /* Bild zuerst - es erklaert die Leistung schneller als der Fliesstext */
  .service-split-media {
    order: -1;
  }
}