/* =========================================================
   Steinklar – Designsystem
   Navy + Türkis, organisch & modern
   ========================================================= */

/* Lokal eingebundene Schriften (kein Google Fonts CDN-Request, DSGVO-konform) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/poppins-800.woff2') format('woff2');
}

:root {
  /* Primärfarbe Navy (aus dem Logo-Emblem) */
  --color-navy-900: #0b1f33;
  --color-navy-800: #122c47;
  --color-navy-700: #1a3d5c;

  /* Akzentfarbe Türkis (Sprühstrahl / Wasserlinien) */
  --color-teal-700: #157a85;
  --color-teal-500: #2fb8c6;
  --color-teal-400: #4fc9d4;
  --color-teal-300: #7fd8df;
  --color-teal-100: #e3f7f8;

  /* Neutrale Farben */
  --color-white: #ffffff;
  --color-fog: #f5f8fa;
  --color-ink: #1c1f24;
  --color-ink-soft: #5a6470;
  --color-border: #e2e8ed;

  /* Status */
  --color-success: #1c8a5a;
  --color-error: #c0392b;

  /* Radien & Schatten */
  --radius-sm: 0.75rem;
  --radius-md: 1.25rem;
  --radius-lg: 2rem;
  --radius-pill: 999px;
  --shadow-soft: 0 20px 40px -16px rgba(11, 31, 51, 0.18);
  --shadow-hover: 0 28px 50px -16px rgba(11, 31, 51, 0.28);

  /* Abstände */
  --space-section: clamp(4rem, 8vw, 8rem);
  --container-width: 1180px;

  /* Typografie */
  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  /* Nur fuer den Kursiv-Akzent in der H1 – bewusst eine Systemserife,
     damit dafuer keine zusaetzliche Schriftdatei geladen werden muss. */
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;

  /* Easing-Kurven (kräftiger als CSS-Standardkurven) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Grosse Bildschirme: Alles wird proportional groesser.
   Saemtliche Schriftgroessen stehen in rem, keine einzige in Pixeln – deshalb
   genuegt die Wurzelgroesse, um Text, Abstaende und Knoepfe gemeinsam zu
   skalieren. Auf einem 1920er Schirm nahm der Inhalt vorher 61 Prozent der
   Breite ein und der Fliesstext stand auf 16,8 px; beides wirkte verloren.

   Die Inhaltsbreite waechst bewusst schwaecher als die Schrift: Ein breiterer
   Kasten macht die Zeilen laenger, und lange Zeilen liest niemand gern.

   Die Schwellen liegen bei 1500 und 1800 statt bei 1600 und 1900: Ein
   sichtbarer Rollbalken zieht vom Fenster ein paar Pixel ab, ein 1600er
   Bildschirm meldet sich dann als 1585 und faellt knapp durch. */
@media (min-width: 1500px) {
  html {
    font-size: 17.5px;
  }

  :root {
    --container-width: 1240px;
  }
}

@media (min-width: 1800px) {
  html {
    font-size: 18.5px;
  }

  :root {
    --container-width: 1300px;
  }
}

body {
  margin: 0;
  padding-top: var(--header-height, 90px);
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  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);
  color: var(--color-navy-900);
  line-height: 1.2;
  margin: 0 0 0.6em;
}

p {
  margin: 0 0 1em;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

section {
  padding: var(--space-section) 0;
  position: relative;
  overflow: hidden;
}

/* Anker-Ziele: Nicht die Oberkante des Abschnitts unter den Header legen,
   sondern dessen INHALT. Ein Abschnitt hat oben --space-section Innenabstand;
   würde man nur die Headerhöhe abziehen, landet man in dieser leeren Zone und
   sieht darüber noch einen Streifen des vorherigen Abschnitts.
   Deshalb den Innenabstand herausrechnen – so steht die Überschrift auf jeder
   Bildschirmgröße konstant 2rem unter dem Header. */
section[id] {
  scroll-margin-top: max(1rem, calc(var(--header-height, 90px) + 2rem - var(--space-section)));
}

/* Graue Abschnitte laufen oben und unten weich ins Weiß aus, statt mit einer
   sichtbaren Kante auf den nächsten Abschnitt zu stoßen. Als background-image
   gelöst (nicht als Overlay), damit nichts den Inhalt überdecken kann.
   rgba(255,255,255,0) statt "transparent": Letzteres blendet in Safari über
   Grau aus und erzeugt einen schmutzigen Verlauf. */
.section-fog {
  --fog-fade: clamp(55px, 7vw, 110px);
  background-color: var(--color-fog);
  background-image:
    linear-gradient(to bottom, var(--color-white), rgba(255, 255, 255, 0)),
    linear-gradient(to top, var(--color-white), rgba(255, 255, 255, 0));
  background-size: 100% var(--fog-fade);
  background-position: top center, bottom center;
  background-repeat: no-repeat;
}

/* Der Karten-Abschnitt grenzt unten an den dunklen Footer – dort nicht
   ins Weiß ausblenden, sonst entsteht ein heller Streifen vor dem Navy. */
#karte {
  background-image: linear-gradient(to bottom, var(--color-white), rgba(255, 255, 255, 0));
}

.section-head {
  max-width: 640px;
  margin: 0 auto 3rem;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-500);
  margin-bottom: 0.75rem;
}

h2 {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
}

.section-head p {
  color: var(--color-ink-soft);
  font-size: 1.05rem;
}

.section-cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  padding: 1rem 2.1rem;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  min-height: 44px;
}

.btn:active {
  transform: scale(0.95);
  opacity: 0.75;
  transition: none;
}

.btn {
  -webkit-tap-highlight-color: transparent;
}

/* Button mit Pfeil: Pfeil rückt beim Hover nach rechts */
.btn-arrow svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .btn-arrow:hover svg {
    transform: translateX(4px);
  }
}

.btn-primary {
  background: var(--color-teal-500);
  color: var(--color-white);
  box-shadow: var(--shadow-soft);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-navy-900);
  color: var(--color-navy-900);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--color-teal-400);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }

  .btn-secondary:hover {
    background: var(--color-navy-900);
    color: var(--color-white);
    transform: translateY(-3px);
  }
}

.btn-block {
  width: 100%;
}

/* ---------- Blob-Dekoration ---------- */
.blob {
  position: absolute;
  z-index: 0;
  filter: blur(2px);
  opacity: 0.55;
  border-radius: 45% 55% 60% 40% / 50% 45% 55% 50%;
  pointer-events: none;
}

.blob-navy {
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900));
}

.blob-teal {
  background: linear-gradient(135deg, var(--color-teal-300), var(--color-teal-500));
}

/* ---------- Logo ---------- */
.logo-mark {
  height: 3.4375rem;
  width: auto;
  flex-shrink: 0;
  display: inline-flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.logo-mark svg,
.logo-mark img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.logo-drop {
  width: 2.375rem;
  height: 2.375rem;
  flex-shrink: 0;
}

.logo-img {
  height: 3.625rem;
  width: auto;
  display: block;
  transition: opacity 0.25s ease;
}

/* Hier stand eine Ausnahme fuer Schirme ab 1200 px, die das Header-Logo auf
   feste 52 px setzte. Ihr Kommentar versprach "deutlich groesser", der Wert
   machte es kleiner: Die Grundregel liegt bei 3,625rem, also 58 px normal
   und 67 px ab 1800 px Fensterbreite. Weil ".site-header .logo-img"
   spezifischer ist als ".logo-img", gewann die Ausnahme – und das Logo blieb
   auf breiten Schirmen bei 52 px stehen, waehrend alles andere mitwuchs.

   Die Ausnahme stammt aus einer Zeit, als die Grundregel kleiner war. Jetzt
   ist sie ueberfluessig und wurde entfernt. */

.footer-grid .logo-img {
  height: 3rem;
}

.site-header.nav-collapsed .main-nav.is-open .nav-menu-logo .logo-img {
  height: 76px;
  max-width: 82vw;
  object-fit: contain;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.48rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.48rem;
  letter-spacing: -0.01em;
  color: var(--color-navy-900);
  flex-shrink: 0;
}

.logo-text {
  position: relative;
  display: inline-block;
  padding-bottom: 0.2rem;
}

.logo-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--color-teal-500), var(--color-teal-300));
}

.logo-text-accent {
  color: var(--color-teal-500);
}

.footer-grid .logo-text-accent {
  color: var(--color-teal-300);
}

/* ---------- Header ---------- */
/* Der Header selbst ist nur noch Rahmen: er traegt den Abstand zum
   Bildschirmrand. Sichtbar ist die Karte darin (.container mit ::before).
   Deshalb hier kein Hintergrund, kein Rahmen und kein Schatten – die liefen
   sonst quer ueber die volle Seitenbreite.
   Kein transform: der Header bleibt stehen, und ein dauerhaftes transform
   wuerde den backdrop-filter des mobilen Menues in Chrome/Safari aushebeln. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
}

/* Startseite: kein Platzhalter fuer den fixierten Header – der Hero beginnt
   bei 0 und der Header liegt darauf. Der Innenabstand des Heros haelt den
   Text stattdessen frei. */
body.has-overlay-header {
  padding-top: 0;
}

body.has-overlay-header .hero {
  min-height: 100svh;
  padding-top: calc(var(--header-height, 90px) + clamp(2rem, 5vw, 4rem));
}

/* Aktiver Menuepunkt: Unterstrich wie auf der Aroy-Seite */
.main-nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--color-teal-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease-out);
}

.main-nav a:not(.btn).is-active::after {
  transform: scaleX(1);
}



/* Die Leiste schwebt als abgerundete Karte, statt als durchgehende Kante am
   Bildschirmrand zu kleben. Den Abstand dorthin traegt der Header, die Karte
   selbst ist der .container. */
.site-header {
  padding: clamp(0.6rem, 1.4vw, 1rem) clamp(0.75rem, 2.4vw, 2rem);
}

.site-header .container {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  max-width: 97.5rem;
  border-radius: var(--radius-lg);
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  padding-left: clamp(1rem, 1.8vw, 1.75rem);
  padding-right: clamp(1rem, 1.8vw, 1.75rem);
}

.main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
}

.nav-cta-desktop {
  flex-shrink: 0;
  font-size: 0.93rem;
  padding: 0.65rem 1.3rem;
}

.nav-cta-mobile {
  display: none;
}

.main-nav ul {
  display: flex;
  gap: 1.15rem;
  flex-wrap: nowrap;
  justify-content: center;
}

.main-nav a:not(.btn) {
  font-weight: 600;
  /* Bewusst etwas kleiner als der Fliesstext: sonst passt die Leiste auf
     1280 px nicht mehr nebeneinander und klappt ins Hamburger-Menue. */
  font-size: 0.94rem;
  color: var(--color-navy-800);
  white-space: nowrap;
  position: relative;
  padding-bottom: 4px;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Türkis-Hover nur in der horizontalen Leiste – im offenen
     Vollbild-Menü (is-open) gibt es stattdessen Scale-Feedback */
  .main-nav:not(.is-open) a:not(.btn):not(.logo):hover {
    color: var(--color-teal-500);
  }

  .site-header.nav-collapsed .main-nav.is-open ul a:not(.btn):hover {
    transform: scale(1.06);
  }
}

.nav-toggle {
  display: none;
  flex-direction: column;
  /* align-items und padding muessen gesetzt sein: Buttons bringen vom Browser
     ein asymmetrisches padding (1px 6px) mit, dadurch sassen die Striche
     6 px links der Mitte. */
  align-items: center;
  justify-content: center;
  padding: 0;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--color-navy-900);
  border-radius: 2px;
  transition: transform 0.25s var(--ease-in-out), opacity 0.2s ease;
}

/* ---------- Telefon im Header ----------
   Auf dem Desktop mit Nummer neben dem Angebots-Button, eingeklappt nur
   als Icon neben dem Hamburger. */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.93rem;
  white-space: nowrap;
  color: var(--color-navy-800);
  transition: transform 0.15s var(--ease-out), color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .nav-phone:hover {
    color: var(--color-teal-500);
  }
}

.nav-phone-icon {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  color: var(--color-teal-500);
}

.nav-phone:active {
  transform: scale(0.94);
}

/* Handy/Tablet: nur noch das Icon als Tap-to-Call neben dem Hamburger */
.site-header.nav-collapsed .nav-phone {
  width: 44px;
  height: 44px;
  gap: 0;
}

.site-header.nav-collapsed .nav-phone-num {
  display: none;
}

/* Bei offenem Vollbild-Menü ausblenden – wie Logo und CTA */
body.nav-open .nav-phone {
  visibility: hidden;
}

/* ---------- Hero ---------- */
/* Der Hero traegt das Foto vollflaechig. Darueber liegt ein Navy-Verlauf:
   links dicht genug fuer sauber lesbare Schrift, nach rechts offener, damit
   die Einfahrt sichtbar bleibt. */
.hero {
  position: relative;
  isolation: isolate;
  /* Fuellt den sichtbaren Bereich unter dem Header, damit die naechste
     Sektion nicht schon von unten hereinlugt. */
  min-height: calc(100svh - var(--header-height, 90px));
  display: flex;
  align-items: center;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  background-color: var(--color-navy-900);
}

/* Das Bild steckt im Markup, nicht hier – siehe .hero-bild weiter unten.
   KI-generiert (Higgsfield), deshalb die Plakette am unteren Bildrand.
   Bewusst nur an dieser Stelle als Stimmungsbild; in den Vorher/Nachher-
   Slidern und bei den Probeflaechen stehen ausschliesslich echte eigene
   Projektfotos.

   Etwas nach links versetzt: rechts unten sitzt die schwaechste Stelle des
   generierten Pflasters, die wandert damit weitgehend aus dem Bild. */
.hero .hero-bild {
  object-position: 38% 40%;
}

/* .hero ist Flex-Container – der Container muss die Breite trotzdem voll nutzen. */
.hero > .container {
  width: 100%;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Zwei Lagen: der seitliche Verlauf traegt die Textlesbarkeit, der zweite
     dunkelt den unteren Rand ab. Letzterer gibt dem Bild Tiefe und nimmt
     gleichzeitig die unruhige untere Bildkante zurueck. */
  background:
    linear-gradient(
      to top,
      rgba(11, 31, 51, 0.72) 0%,
      rgba(11, 31, 51, 0.34) 22%,
      rgba(11, 31, 51, 0) 48%
    ),
    linear-gradient(
      100deg,
      rgba(11, 31, 51, 0.92) 0%,
      rgba(11, 31, 51, 0.82) 36%,
      rgba(11, 31, 51, 0.45) 70%,
      rgba(11, 31, 51, 0.22) 100%
    );
}

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 420px);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}

.hero-copy {
  /* In rem statt px, damit die Spalte mit der Wurzelgroesse mitwaechst.
     620px sind bei 16px Wurzel genau 38.75rem – auf grossen Bildschirmen
     wird daraus mehr Platz. Blieb der Wert fest, brachen die drei
     Kennzahlen darunter um, sobald die Schrift groesser wurde. */
  max-width: 38.75rem;
}

/* Zweite Zeile der H1 als Kursiv-Serife – setzt den Akzent, ohne dass eine
   weitere Schriftdatei geladen werden muss (Systemserife). */
.hero h1 em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-teal-200, #b9eaee);
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem 2.5rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  list-style: none;
}

.hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hero-stats strong {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-white);
}

.hero-stats span {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

/* Die Ortszeile traegt seit Koenigslutter sechs Namen. Bei 0.85rem lief sie
   am Handy auf drei Zeilen um und liess auf dem Rechner den letzten Ort
   allein stehen – beides sieht nach Panne aus.

   Zwei Zehntel kleiner reicht: eine Zeile ab etwa 1400 px, zwei darunter.
   text-wrap: balance teilt die zwei Zeilen gleichmaessig auf, statt fuenf
   Orte oben und einen unten zu setzen. Browser ohne die Eigenschaft brechen
   wie bisher um, verlieren also nichts. */
.hero .eyebrow {
  color: var(--color-teal-200, #b9eaee);
  font-size: 0.8rem;
  text-wrap: balance;
}

.hero h1,
.hero .hero-sub {
  color: rgba(255, 255, 255, 0.86);
  max-width: 540px;
}

/* Auf dem dunklen Foto braucht der Zweitbutton eine helle Kontur. */
.hero .btn-secondary {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-white);
  }
}

.hero .hero-rating {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.55);
}

.hero .hero-rating .stars {
  color: var(--color-teal-200, #b9eaee);
}

@media (hover: hover) and (pointer: fine) {
  .hero .hero-rating:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

@media (max-width: 1023px) {
  /* Gestapelt liegt der Text ueber der ganzen Breite – deshalb deckt der
     Verlauf hier gleichmaessig ab statt nur links. */
  .hero::before {
    /* Gestapelt deckt der Verlauf gleichmaessiger ab, dunkelt aber zum unteren
       Rand wieder nach – dort steht im generierten Bild das unruhigste Pflaster. */
    background: linear-gradient(
      175deg,
      rgba(11, 31, 51, 0.88) 0%,
      rgba(11, 31, 51, 0.72) 45%,
      rgba(11, 31, 51, 0.5) 72%,
      rgba(11, 31, 51, 0.68) 100%
    );
  }
}

.hero h1 {
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--color-ink-soft);
  max-width: 480px;
}

.hero-ctas {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Google-Bewertungen als Pille direkt unter den Buttons.
   Wird erst eingeblendet, wenn es echte Bewertungen gibt – bis dahin steht
   das Markup in index.html auskommentiert. */
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding: 0.7rem 1.25rem;
  border: 1px solid var(--color-teal-500);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-navy-900);
  transition: background 0.2s ease, transform 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.hero-rating .stars {
  color: var(--color-teal-500);
  letter-spacing: 0.05em;
}

.hero-rating svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.65;
}

.hero-rating strong {
  font-family: var(--font-display);
  font-weight: 700;
}

@media (hover: hover) and (pointer: fine) {
  .hero-rating:hover {
    background: var(--color-teal-100);
  }
}

.hero-rating:active {
  transform: scale(0.97);
  transition: none;
}

@media (max-width: 767px) {
  /* Nebeneinander statt untereinander – gestapelt wuerde der Hero sonst
     allein durch die drei Zahlen einen halben Bildschirm laenger. */
  /* Der Textblock fuellt die erste Bildschirmhoehe, damit die Anfrage-Karte
     komplett darunter beginnt. Sonst ragt ihre weisse Oberkante ins Bild und
     zerschneidet den ersten Eindruck. Abgezogen werden Headerhoehe und der
     Rasterabstand zur Karte. */
  .hero-copy {
    min-height: calc(100svh - var(--header-height, 90px) - 2.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Die Kennzahlen fallen am Handy weg – der Hero ist dort knapp und die
     Angaben stehen ohnehin an anderer Stelle (Oeffnungszeiten im Fussbereich,
     kostenlose Probeflaeche in FAQ und auf den Leistungsseiten).
     display:none statt Loeschen: sie bleiben im Quelltext lesbar. */
  .hero-stats {
    display: none;
  }

  .hero h1 {
    font-size: clamp(2rem, 8.5vw, 3.6rem);
  }
}

/* ---------- Preistabelle ---------- */
.price-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

/* Schmale Viewports: die Tabelle darf seitlich scrollen, statt die ganze
   Seite breiter zu machen. */
.price-table-wrap {
  overflow-x: auto;
  /* Ohne diese Zeile bleibt der Kasten auf der Mindestbreite seiner Tabelle
     stehen: Grid- und Flex-Kinder starten mit min-width:auto und weigern sich,
     unter ihren Inhalt zu schrumpfen. Auf dem Handy wurde der Kasten dadurch
     405 px breit in einem 390-px-Fenster, und die Sektion schnitt rechts ab,
     statt die Tabelle scrollen zu lassen. */
  min-width: 0;
}

.price-table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  background: var(--color-white);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.price-table th,
.price-table td {
  padding: 0.95rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}

.price-table thead th {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
  background: var(--color-fog);
}

.price-table tbody th {
  font-weight: 600;
  color: var(--color-navy-900);
}

.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td {
  border-bottom: 0;
}

.price-table td strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy-900);
  white-space: nowrap;
}

.price-table td span {
  font-size: 0.78rem;
  color: var(--color-ink-soft);
}

.price-table td:last-child {
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

.price-table-note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.price-factors {
  background: var(--color-navy-900);
  border-radius: var(--radius-sm);
  padding: 1.75rem;
  color: rgba(255, 255, 255, 0.82);
}

.price-factors h3 {
  font-size: 1.05rem;
  color: var(--color-white);
  margin-bottom: 1rem;
}

.price-factors ul {
  display: grid;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
  list-style: none;
}

.price-factors li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
}

.price-factors li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-teal-500);
}

@media (max-width: 899px) {
  .price-layout {
    /* minmax(0, 1fr) statt 1fr: "1fr" ist die Kurzform von minmax(auto, 1fr),
       und "auto" heisst als Untergrenze "mindestens so breit wie der Inhalt".
       Die Spalte wuchs dadurch auf die Mindestbreite der Preistabelle – auf
       dem Handy 405 px in einem 390-px-Fenster, der Rest wurde rechts
       abgeschnitten. Mit 0 als Untergrenze darf die Spalte schrumpfen, und
       die Tabelle scrollt in ihrem eigenen Kasten. */
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Auf dem Handy wird aus jeder Tabellenzeile ein eigener Block. Seitlich
   scrollbare Tabellen werden schlicht uebersehen – die Spalte "Hinweis"
   waere dann fuer die meisten unsichtbar. */
/* Lange Knopfbeschriftungen auf schmalen Fenstern. Die Knoepfe stehen sonst
   auf white-space:nowrap und ragen ueber ihren Kasten hinaus – bei
   "Preis fuer deine Flaeche berechnen" waren es 349 px in einer 342-px-Spalte.
   Erst wenn die Zeile wirklich nicht passt, wird umbrochen. */
@media (max-width: 599px) {
  .btn {
    max-width: 100%;
    white-space: normal;
  }
}

@media (max-width: 599px) {
  .price-table {
    min-width: 0;
  }

  .price-table thead {
    display: none;
  }

  .price-table,
  .price-table tbody,
  .price-table tr,
  .price-table th,
  .price-table td {
    display: block;
  }

  .price-table tbody tr {
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-border);
  }

  .price-table tbody th,
  .price-table tbody td {
    padding: 0;
    border: 0;
  }

  .price-table tbody th {
    font-size: 1rem;
    margin-bottom: 0.25rem;
  }

  .price-table td strong {
    display: inline;
  }

  .price-table td span {
    margin-left: 0.35rem;
  }

  .price-table td:last-child {
    margin-top: 0.3rem;
  }
}

/* ---------- Seiten-Hero der Leistungsseiten ----------
   Gleiche Bauart wie der Hero der Startseite: Foto vollflaechig, Navy-Verlauf
   auf ::before, Schrift hell. Das Bild kommt ueber eine eigene Klasse dazu,
   damit jede Leistungsseite ihr eigenes bekommen kann. */
.page-hero {
  position: relative;
  isolation: isolate;
  /* Fuellt den sichtbaren Bereich, damit man nicht zwischen Hero und
     naechstem Abschnitt landet. */
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-height, 90px) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background-color: var(--color-navy-900);
  background-size: cover;
  background-position: center;
}

.page-hero > .container {
  width: 100%;
}

/* Statt einer gleichmaessigen Decke ueber dem ganzen Bild: ein dunkler Pool
   unter dem Text, aussen laeuft er aus. So bleibt das Foto an den Raendern
   erkennbar und die Schrift steht trotzdem auf genug Kontrast. Eine flaechige
   Abdunklung muesste wegen der hellen Platten so dicht sein, dass vom Bild
   kaum etwas uebrig bliebe. */
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 78% 52% at 50% 48%,
      rgba(11, 31, 51, 0.82) 0%,
      rgba(11, 31, 51, 0.6) 48%,
      rgba(11, 31, 51, 0.16) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(11, 31, 51, 0.5) 0%,
      rgba(11, 31, 51, 0.1) 22%,
      rgba(11, 31, 51, 0.1) 74%,
      rgba(11, 31, 51, 0.42) 100%
    );
}

.page-hero > .container {
  position: relative;
  z-index: 1;
}

.page-hero .eyebrow {
  color: var(--color-teal-200, #b9eaee);
}

.page-hero h1 {
  color: var(--color-white);
}

.page-hero .section-head p {
  color: rgba(255, 255, 255, 0.86);
}

.page-hero .back-link {
  color: rgba(255, 255, 255, 0.82);
}

.page-hero .btn-secondary {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--color-white);
}

@media (hover: hover) and (pointer: fine) {
  .page-hero .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--color-white);
  }
}

/* Das Kopfbild liegt als echtes <img> im Markup, nicht als CSS-Hintergrund.
   Grund ist die Bildersuche: Google erfasst ausschliesslich img-Elemente,
   Hintergrundbilder aus dem Stylesheet tauchen dort grundsaetzlich nie auf.
   Diese Aufnahmen sind die besten der Seite – als Hintergrund waren sie fuer
   Google nicht vorhanden.

   Optisch aendert sich nichts: object-fit: cover und object-position leisten
   genau das, was background-size und background-position vorher taten. Das
   Bild liegt auf z-index -1 und damit unter der Verlaufsebene ::before; die
   isolation: isolate am Hero haelt es davon ab, hinter die Sektion zu
   rutschen. */
/* <picture> ist nur eine Huelle fuer die Quellenauswahl – positioniert wird
   das img. Ohne display: contents saesse zwischen Hero und Bild ein Kasten,
   der die absolute Positionierung auf sich zoege. */
.hero-bild-huelle {
  display: contents;
}

.hero-bild {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Reinigung: Standbild aus dem Arbeitsvideo, also eine echte Aufnahme – hier
   braucht es keine KI-Kennzeichnung. Das Bild steckt in --hero-bild, damit der
   schmale Viewport unten dieselbe Quelle nutzen kann.

   Der Ausschnitt liegt rechts der Mitte: Dort steht die arbeitende Person. Bei
   zentriertem Ausschnitt schneidet der schmale Viewport sie halb weg, weil das
   Band dort fast quadratisch ist und nur die Mitte des 16:9-Bildes zeigt.

   Die Vorlage hatte oben links den Ladekreis des Videoplayers mit im Bild.
   Der ist herausgerechnet, indem dieselben Zeilen von weiter rechts kopiert
   wurden – der Himmel verlaeuft senkrecht, waagerecht kopiert bleibt der
   Verlauf also erhalten. Ein glatter Fuellton haette einen Fleck ergeben. */
.page-hero--reinigung .hero-bild {
  object-position: 62% 46%;
}

/* Verfugung: Nahaufnahme eines Fugenbildes aus einem eigenen Auftrag. Als
   Kopfbild taugt ein Ausschnitt hier besser als eine Totale – Thema der Seite
   ist die Fuge, nicht die Flaeche. */
.page-hero--verfugung .hero-bild {
  object-position: center 58%;
}

/* Impraegnierung: der Abperleffekt auf einer behandelten Flaeche. Als
   Kopfbild ist das die naheliegendste Wahl – es zeigt nicht die Arbeit,
   sondern ihr Ergebnis, und genau danach fragt sich, wer auf dieser Seite
   landet.

   Der Ausschnitt liegt etwas unterhalb der Mitte: Dort sitzen der nasse
   Fleck und die Tropfen. Weiter oben verliert sich beides im unscharfen
   Hintergrund, weiter unten faellt das Pflastermuster weg, das dem Bild
   Tiefe gibt. */
.page-hero--impraegnierung .hero-bild {
  object-position: center 55%;
}

/* Der Hinweis braucht einen eigenen Grund, keine blosse Textfarbe. Er sitzt
   am unteren Heroende, wo die Verlaufsebenen zusammen nur rund die Haelfte
   abdecken – auf dem hellen Pflaster kam selbst reines Weiss dort nur auf
   3,9:1. Mit der Plakette haengt die Lesbarkeit nicht mehr davon ab, welcher
   Bildausschnitt zufaellig dahinter liegt. */
/* Absolut am unteren Heroende, damit der Hinweis die Hoehe der Sektion nicht
   veraendert. Im Fluss liess er den Hero der Startseite um 100 px wachsen –
   und weil das Hintergrundbild mit background-size: cover an der
   Containerhoehe haengt, verschob sich dadurch der ganze Bildausschnitt. */
.bild-hinweis {
  position: absolute;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: 0.75rem;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

/* Der Deckwert ist nicht frei gewaehlt: Bei 75 Prozent traegt das Foto nur
   noch ein Viertel bei, dadurch bleibt die Zeile auch ueber der hellsten
   denkbaren Stelle bei knapp 6:1. Weiter herunter geht nicht, ohne dass die
   Lesbarkeit vom Zufall des Bildausschnitts abhaengt – und ein Hinweis, den
   man nicht lesen kann, ist keiner. */
.bild-hinweis span {
  display: inline-block;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(11, 31, 51, 0.75);
  font-size: 0.66rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.9);
}

/* Schmale Viewports: Text und Foto teilen sich hier nicht mehr dieselbe Flaeche.
   Der Textblock ist am Handy fast bildschirmhoch – jeder Verlauf, der ihn
   lesbar macht, deckt zwangslaeufig das halbe Bild zu. Deshalb liegt das Foto
   oben als eigenes Band und der Text darunter auf Navy. Beides ist damit
   vollstaendig zu sehen statt beides halb. */
@media (max-width: 767px) {
  .page-hero {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: clamp(2.25rem, 8vw, 3rem);
    background-image: none;
    background-color: var(--color-navy-900);
  }

  /* Das Bild wird zum Band im Fluss, der Text folgt darunter auf Navy. Aus
     der Verlaufsebene bleibt nur der Verlauf – sie deckt jetzt genau das Band
     ab und haelt die schwebende Leiste darauf lesbar. Beide Hoehen muessen
     deshalb dieselben sein. */
  .page-hero .hero-bild {
    position: relative;
    inset: auto;
    z-index: 0;
    display: block;
    height: 44svh;
    min-height: 240px;
  }

  .page-hero--reinigung .hero-bild {
    object-position: 62% 45%;
  }

  /* Der Verlauf muss ueber dem Band liegen. Beide sind positioniert, und in
     der Baumreihenfolge steht ::before vor dem img – ohne eigenen z-index
     wuerde das Bild den Verlauf verdecken. */
  .page-hero::before {
    z-index: 1;
    height: 44svh;
    min-height: 240px;
    inset: 0 0 auto 0;
    background: linear-gradient(
      to bottom,
      rgba(11, 31, 51, 0.55) 0%,
      rgba(11, 31, 51, 0.12) 32%,
      rgba(11, 31, 51, 0) 55%
    );
  }

  .page-hero > .container {
    padding-top: 1.75rem;
  }
}

/* ---------- Bewertungs-Laufband unter dem Hero ---------- */
.reviews-strip {
  --rv-gap: 1.25rem;
  padding-top: 2.75rem;
  padding-bottom: 2.25rem;
  background: var(--color-fog);
  overflow: hidden;
}

.marquee {
  /* Weiche Kanten links und rechts: die Karten tauchen auf und verschwinden,
     statt an einer harten Kante abgeschnitten zu werden. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: rv-marquee 60s linear infinite;
  /* Ohne diese beiden Zeilen ruckelt das Laufband in Safari: Der weiche Rand
     der Elternbox (mask-image) zwingt den Browser, die Flaeche bei jedem Bild
     neu zu rastern. will-change kuendigt die Bewegung an, translateZ schiebt
     den Streifen auf eine eigene Ebene – danach verschiebt die Grafikkarte
     nur noch ein fertiges Bild. */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Der Abstand steckt bewusst im margin-right der Karten statt in gap:
   so ist die Trackbreite exakt 2x ein Kartensatz und translateX(-50%)
   landet punktgenau am Anfang der Kopie – ohne sichtbaren Sprung. */
@keyframes rv-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}

/* Die Quelle steht einmal ueber dem Laufband statt unter jeder Karte –
   sechsmal dasselbe Wort liest niemand, und es nimmt den Namen den Platz. */
.reviews-quelle {
  margin: 0 0 1.1rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.reviews-quelle a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-teal-500);
}

.rv-card {
  flex: 0 0 auto;
  width: 300px;
  margin-right: var(--rv-gap);
  padding: 1.25rem 1.35rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px -22px rgba(11, 31, 51, 0.35);
}

.rv-card .stars {
  color: #f5a623;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}

.rv-card p {
  margin: 0.5rem 0 0.85rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--color-ink);
}

.rv-meta {
  display: flex;
  flex-direction: column;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

.rv-meta strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy-900);
}

/* Zustand mit wenigen Rezensionen: keine Kartenreihe, sondern die echte Note
   und eine Einladung. Sobald mehrere vorliegen, ersetzt das Laufband diesen
   Block wieder – dessen Klassen bleiben deshalb im Stylesheet stehen. */
/* Der Abstand nach oben stand frueher im gap: Darueber lag eine Zeile mit
   der Rezensionszahl, und der Zwischenraum zwischen beiden Kindern reichte.
   Seit die Zeile weg ist, hat der Block nur noch ein Kind – gap greift dann
   nirgends, und der Knopf klebte direkt am Laufband. Die 2,25rem entsprechen
   den 36 px, die der Abschnitt unten ohnehin frei laesst. */
.reviews-jung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
  text-align: center;
}

.reviews-note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.15rem;
  border: 1px solid var(--color-teal-500);
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-navy-900);
}

.reviews-note .stars {
  color: var(--color-teal-500);
  letter-spacing: 0.05em;
}

.reviews-note strong {
  font-family: var(--font-display);
  font-weight: 700;
}

.reviews-jung-text {
  max-width: 46ch;
  margin: 0;
  color: var(--color-ink-soft);
  line-height: 1.6;
}

/* Wer Bewegung reduziert haben moechte, bekommt ein statisches, von Hand
   scrollbares Band statt der Endlosschleife. */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    overflow-x: auto;
  }

  .marquee-track {
    animation: none;
  }
}

/* ---------- Kurz-Anfrage im Hero (Wizard) ---------- */
.hero-wizard {
  /* Sprungziel von "Preis berechnen" – sonst landet die Karte unter dem
     fixierten Header. */
  scroll-margin-top: calc(var(--header-height, 90px) + 1rem);
  transition: box-shadow 0.3s ease;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: 0 30px 60px -20px rgba(11, 31, 51, 0.45);
  color: var(--color-ink);
}

.wz-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-navy-900);
}

.wz-note {
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  margin-top: 0.2rem;
}

.wz-progress {
  display: flex;
  gap: 0.35rem;
  margin: 1.1rem 0 1.35rem;
}

.wz-seg {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: #e3e8ed;
  transition: background 0.25s ease;
}

.wz-seg.is-done {
  background: var(--color-teal-500);
}

/* Nur der aktive Schritt ist im Fluss – die uebrigen sind komplett aus dem
   Layout genommen, damit die Karte nicht auf den laengsten Schritt aufgeht. */
.wz-step {
  display: none;
}

.wz-step.is-active {
  display: block;
}

.wz-question {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-navy-900);
  margin-bottom: 0.85rem;
}

.wz-hint {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin: -0.6rem 0 0.85rem;
}

.wz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.wz-options--wide {
  grid-template-columns: 1fr;
}

.wz-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 52px;
  padding: 0.7rem 0.85rem;
  border: 1px solid #dfe5ea;
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-navy-900);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.wz-option svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-teal-500);
}

.wz-option span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.35;
}

.wz-option span strong {
  font-weight: 600;
}

.wz-option span strong + * ,
.wz-option span strong ~ * {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

/* Der beschreibende Text steht als reiner Textknoten hinter <strong>;
   er erbt die Groesse, deshalb hier ueber die Elternregel geregelt. */
.wz-options--wide .wz-option span {
  font-size: 0.8rem;
  color: var(--color-ink-soft);
}

.wz-options--wide .wz-option span strong {
  font-size: 0.9rem;
  color: var(--color-navy-900);
}

@media (hover: hover) and (pointer: fine) {
  .wz-option:hover {
    border-color: var(--color-teal-500);
    background: var(--color-teal-100);
  }
}

.wz-option.is-selected {
  border-color: var(--color-teal-500);
  background: var(--color-teal-100);
  box-shadow: inset 0 0 0 1px var(--color-teal-500);
}

/* Ergebnisblock in Schritt 4 */
.wz-result {
  background: var(--color-navy-900);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-bottom: 1.1rem;
  color: var(--color-white);
}

.wz-result-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal-200, #b9eaee);
}

.wz-price {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 0.2rem;
}

.wz-fine {
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.4rem;
}

.wz-field {
  margin-bottom: 0.75rem;
}

.wz-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-navy-900);
  margin-bottom: 0.3rem;
}

.wz-optional {
  font-weight: 400;
  color: var(--color-ink-soft);
}

.wz-field input {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.8rem;
  border: 1px solid #dfe5ea;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-ink);
  background: var(--color-white);
}

.wz-field input:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 1px;
  border-color: var(--color-teal-500);
}

.wz-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0.9rem 0 0.25rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

.wz-consent input {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 0.05rem;
  accent-color: var(--color-teal-500);
  cursor: pointer;
}

.wz-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

/* Die Buttons setzen display selbst – ohne diese Regel bliebe das
   hidden-Attribut aus dem JS wirkungslos. */
.wz-actions [hidden] {
  display: none;
}

/* Dasselbe eine Ebene hoeher: .wz-step.is-active und .wz-actions setzen
   display selbst und ueberstimmen damit das Attribut hidden. Nach dem
   Absenden sollen diese Bloecke aber wirklich verschwinden – sonst steht die
   Danke-Tafel unter einem noch ausgefuellten Formular. */
.wizard .wz-step[hidden],
.wizard .wz-actions[hidden],
.wizard .wz-head[hidden],
.wizard .wz-phone[hidden] {
  display: none;
}

.wz-next {
  flex: 1;
  justify-content: center;
}

.wz-next[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.wz-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.4rem;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wz-back svg {
  width: 16px;
  height: 16px;
}

.wz-status {
  font-size: 0.85rem;
  line-height: 1.45;
  margin-top: 0.85rem;
}

.wz-status.success {
  color: #1c7a5a;
}

.wz-status.error {
  color: #b3261e;
}

.wz-phone {
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid #eef2f5;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
}

.wz-phone a {
  font-weight: 600;
  color: var(--color-navy-900);
}

/* Muss nach den Wizard-Grundregeln stehen – bei gleicher Spezifitaet
   entscheidet die Reihenfolge, sonst bliebe das hier wirkungslos. */
@media (max-width: 559px) {
  .hero-wizard {
    padding: 1.35rem 1.15rem;
  }

  .wz-option {
    padding: 0.65rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* Rueckmeldung auf "Preis berechnen": tuerkiser Ring plus kurzes Anheben.
   Der Ring allein reicht nicht – steht die Karte schon im Bild, ist eine
   Bewegung das, was das Auge zuverlaessig findet. */
.hero-wizard.is-hervorgehoben {
  box-shadow: 0 0 0 3px var(--color-teal-500),
              0 30px 60px -20px rgba(11, 31, 51, 0.45);
}

@media (prefers-reduced-motion: no-preference) {
  .hero-wizard.is-hervorgehoben {
    animation: anfrage-hinweis 0.75s var(--ease-out);
  }
}

@keyframes anfrage-hinweis {
  0%   { transform: none; }
  40%  { transform: translateY(-6px); }
  100% { transform: none; }
}

/* ---------- Leistungen ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.75rem;
  position: relative;
  z-index: 1;
}

.service-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

.service-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-sm);
  background: var(--color-teal-100);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
  color: var(--color-teal-500);
}

.service-icon svg {
  width: 28px;
  height: 28px;
}

.service-card h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.service-card p {
  color: var(--color-ink-soft);
  font-size: 0.96rem;
}

.service-card--media {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-card-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.service-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-card--media:hover .service-card-media img {
    transform: scale(1.04);
  }
}

.service-card-body {
  padding: 1.5rem 1.75rem 1.75rem;
}

/* Klickbare Leistungs-Karte (verlinkt auf die Unterseite) */
.service-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-teal-500);
}

.service-more svg {
  width: 17px;
  height: 17px;
  transition: transform 0.2s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .service-card--media:hover .service-more svg {
    transform: translateX(4px);
  }
}

.badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.9rem;
}

/* ---------- Ablauf / Prozess (Navy-Band mit welligen Kanten) ---------- */
.process-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, var(--color-navy-800) 100%);
  padding: clamp(5rem, 9vw, 7.5rem) 0;
}

.process-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(28px, 5vw, 58px);
  display: block;
  z-index: 1;
  pointer-events: none;
}
.process-wave--top { top: -1px; }
.process-wave--bottom { bottom: -1px; }

.process-section .section-head h2 { color: var(--color-white); }
.process-section .section-head p { color: rgba(255, 255, 255, 0.8); }

/* Links im dunklen Band sichtbar machen – in der normalen Textfarbe
   wären sie auf Navy nicht als Link zu erkennen. */
.process-section a {
  color: var(--color-teal-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .process-section a:hover { color: var(--color-white); }
}

.process-track {
  /* Spaltenzahl als Variable, damit dasselbe Band mit 3 Schritten (Startseite)
     und 4 Schritten (Leistungsseiten) funktioniert. */
  --process-cols: 3;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  max-width: 340px;
  margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
}

.process-track--4 {
  --process-cols: 4;
}

/* Verbindende gestrichelte Linie hinter den Icons (nur breite Ansicht).
   Start und Ende liegen in der Mitte des ersten bzw. letzten Icons – also
   eine halbe Spaltenbreite vom Rand entfernt. */
.process-track::before {
  content: "";
  position: absolute;
  top: 42px;
  left: calc(100% / var(--process-cols) / 2);
  right: calc(100% / var(--process-cols) / 2);
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 7px, transparent 7px 16px);
  z-index: 0;
  display: none;
}

@media (min-width: 760px) {
  .process-track {
    grid-template-columns: repeat(var(--process-cols), 1fr);
    gap: clamp(1.5rem, 3vw, 2.25rem);
    max-width: 880px;
  }
  .process-track::before { display: block; }
}

/* Vier Schritte werden auf mittleren Breiten zu schmal -> zweispaltig,
   die Verbindungslinie ergibt dort keinen Sinn mehr. */
@media (min-width: 760px) and (max-width: 1039px) {
  .process-track--4 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 620px;
    gap: 2.5rem 2rem;
  }
  .process-track--4::before { display: none; }
}

@media (min-width: 1040px) {
  .process-track--4 { max-width: 1060px; }
}

.process-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

.p-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-white);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 7px rgba(47, 184, 198, 0.15), 0 16px 32px -14px rgba(0, 0, 0, 0.55);
  transition: transform 0.25s var(--ease-out);
}
.process-step:hover .p-icon { transform: translateY(-4px); }
.p-icon svg { width: 36px; height: 36px; color: var(--color-navy-900); }

.process-step h3 { color: var(--color-white); font-size: 1.15rem; margin: 0; }
.process-step p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 26ch;
}

/* ---------- Vorher/Nachher Slider ---------- */
.ba-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5rem;
  position: relative;
  z-index: 1;
  /* Deckel gegen Riesenbilder: steht nur ein Vergleich im Raster, zieht
     auto-fit ihn sonst auf die volle Containerbreite – im Hochformat wird
     daraus ein bildschirmfuellendes Foto. */
  justify-items: center;
}

.ba-grid > * {
  width: 100%;
  max-width: 420px;
}

.ba-slider {
  position: relative;
}

.ba-slider__frame {
  position: relative;
  width: 100%;
  /* Hochformat, weil die Projektfotos hochkant aufgenommen sind. Ein
     Querformat-Rahmen wuerde den Bildausschnitt oben und unten beschneiden –
     genau dort stehen Haus, Hecke und Beet, die den Ort erkennbar machen. */
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  background: var(--color-navy-900);
}

.ba-slider__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
}

.ba-slider__clip {
  position: absolute;
  inset: 0;
  width: 50%;
  overflow: hidden;
}

.ba-slider__clip .ba-slider__img {
  width: 100%;
  height: 100%;
}

.ba-slider__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  pointer-events: none;
  transform: translateX(-50%);
}

.ba-slider__handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--color-white);
  transform: translateX(-50%);
}

.ba-slider__handle-icon {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: var(--shadow-soft);
}

.ba-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.ba-slider__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.85rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-ink-soft);
}

.ba-slider__caption {
  margin-top: 0.5rem;
  font-weight: 600;
  color: var(--color-navy-800);
  text-align: center;
}

/* Handy: zwei Vergleiche nebeneinander statt untereinander. Der Regler bleibt
   bedienbar, aber Griff, Beschriftung und Bildunterschrift muessen mitschrumpfen –
   sonst sprengen sie die halbe Spaltenbreite. */
@media (max-width: 640px) {
  .ba-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }

  .ba-slider__frame {
    border-radius: var(--radius-sm);
  }

  .ba-slider__handle-icon {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  .ba-slider__labels {
    font-size: 0.68rem;
  }

  .ba-slider__caption {
    margin-top: 0.35rem;
    font-size: 0.72rem;
    line-height: 1.35;
  }
}

/* ---------- Warum Steinklar ---------- */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.75rem;
}

.usp-card {
  text-align: center;
  padding: 1.5rem 1rem;
}

.usp-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--color-navy-900);
  color: var(--color-teal-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

/* SVG statt Emoji in den Kreisen – Emojis werden auf jedem System
   anders gerendert und wirken uneinheitlich. */
.usp-icon svg {
  width: 28px;
  height: 28px;
}

/* ---------- Erklaerbild im Fliesstext ----------
   Bewusst auf Textbreite begrenzt, damit es den Lesefluss unterstuetzt
   statt ihn zu unterbrechen. */
.content-figure {
  max-width: 820px;
  margin: 2.5rem auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  line-height: 0;
}

.content-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Leistungsseiten: Problem/Loesung-Bloecke ---------- */
.insight-list {
  display: grid;
  gap: 1.15rem;
  max-width: 820px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.insight {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
}

.insight h3 {
  font-size: 1.05rem;
  margin: 0 0 0.45rem;
}

.insight p {
  margin: 0;
  color: var(--color-ink-soft);
}

.insight-fix {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-navy-800);
  font-weight: 600;
  font-size: 0.95rem;
}

.insight-fix svg {
  width: 18px;
  height: 18px;
  color: var(--color-teal-500);
  flex: none;
  margin-top: 2px;
}

/* ---------- Leistungsseiten: kompakte Flaechenliste ---------- */
.area-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0 2.5rem;
  max-width: 900px;
  margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
  list-style: none;
  padding: 0;
}

.area-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}

.area-list svg {
  width: 19px;
  height: 19px;
  color: var(--color-teal-500);
  flex: none;
  margin-top: 3px;
}

.area-list strong {
  display: block;
  color: var(--color-navy-900);
  font-size: 1rem;
}

.area-list span {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

/* ---------- Über uns: Foto neben Text ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 860px) {
  .about-grid {
    grid-template-columns: 0.85fr 1fr;
  }
}

/* Ohne Bildspalte: eine Spalte und schmaler gesetzt. Muss nach der
   Medienabfrage stehen – gleiche Spezifitaet, es gewinnt die spaetere Regel.
   Ohne das saesse der Text in der 0.85fr-Spalte und liefe unnoetig schmal. */
.about-grid--ohne-bild {
  grid-template-columns: 1fr;
  max-width: 720px;
}

.about-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  background: var(--color-navy-900);
  color: rgba(255, 255, 255, 0.55);
  display: grid;
  place-items: center;
  font-size: 0.95rem;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

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

.about-text h2 {
  margin: 0.35rem 0 1rem;
}

.about-text p {
  color: var(--color-ink-soft);
  margin: 0 0 1rem;
}

.about-text p:last-of-type {
  margin-bottom: 0;
}

/* ---------- Leistungsseiten: Preisblock ---------- */
.price-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.price-figure {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-navy-900);
  font-size: clamp(2.4rem, 6vw, 3.2rem);
  line-height: 1;
}

.price-figure span {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-ink-soft);
}

.price-note {
  color: var(--color-ink-soft);
  max-width: 46ch;
  margin: 0.9rem auto 1.6rem;
}

.price-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.usp-card h3 {
  font-size: 1.05rem;
}

.usp-card p {
  color: var(--color-ink-soft);
  font-size: 0.92rem;
}

/* ---------- Probeflächen Galerie ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.75rem;
  /* Ohne start wuerden Einzelbilder auf die Hoehe der Vergleichskacheln
     gestreckt – die sind wegen Beschriftung und Bildunterschrift hoeher, und
     unter dem Foto entstuende ein weisser Streifen. */
  align-items: start;
}

.gallery-item {
  position: relative;
  /* margin: 0 ist noetig, seit die Kacheln <figure> sind – Browser geben
     figure sonst einen Standard-Aussenabstand von 40 px an den Seiten. */
  margin: 0;
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
  .gallery-item:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
}

.gallery-item img {
  display: block;
  width: 100%;
  /* Hochformat wie die Aufnahmen selbst – ein 4:3-Rahmen wuerde bei jedem
     Bild oben und unten abschneiden. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.gallery-item .badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  margin-bottom: 0;
  z-index: 1;
}

.gallery-caption {
  padding: 1rem 1.25rem;
  margin: 0;
  font-weight: 600;
  color: var(--color-navy-800);
  font-size: 0.95rem;
}

/* Vergleiche stehen in derselben Galerie wie die Einzelbilder. Sie brauchen
   keine eigene Kachel-Optik: Rahmen und Schatten bringt .ba-slider__frame
   schon mit, hier zaehlt nur, dass Bildhoehe und Raster zusammenpassen. */
.gallery-vergleich .ba-slider__labels {
  margin-top: 0.55rem;
  font-size: 0.8rem;
}

/* Handy: zwei Spalten wie bei den Vergleichen auf der Startseite –
   eine Spalte waere bei 23 Aufnahmen eine sehr lange Rutschpartie. */
@media (max-width: 640px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}

/* ---------- Google Bewertungen ---------- */
.reviews-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.reviews-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  padding: 0.7rem 1.4rem;
  box-shadow: var(--shadow-soft);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-navy-900);
}

.reviews-badge .stars {
  color: #f5a623;
  letter-spacing: 1px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.review-card {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1.75rem;
  box-shadow: var(--shadow-soft);
}

.review-card .stars {
  color: #f5a623;
  letter-spacing: 2px;
  margin-bottom: 0.75rem;
  display: block;
}

.review-card p {
  color: var(--color-ink-soft);
  font-style: italic;
  font-size: 0.95rem;
}

.review-card strong {
  font-family: var(--font-display);
  color: var(--color-navy-900);
}

.placeholder-note {
  display: block;
  text-align: center;
  font-size: 0.8rem;
  color: var(--color-ink-soft);
  margin-top: 2rem;
}

/* ---------- FAQ ---------- */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-navy-900);
  text-align: left;
}

.faq-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--color-teal-500);
  transition: transform 0.25s var(--ease-in-out);
}

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

.faq-item.is-open .faq-icon {
  transform: rotate(180deg);
}

.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}

.faq-item.is-open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-answer {
  min-height: 0;
  overflow: hidden;
}

.faq-answer p {
  margin: 0;
  padding: 0 1.5rem 1.25rem;
  color: var(--color-ink-soft);
}

.faq-answer a {
  color: var(--color-teal-500);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .faq-icon,
  .faq-answer-wrap {
    transition-duration: 0.01ms;
  }
}

/* ---------- Kontakt ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

.contact-info {
  background: var(--color-navy-900);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.contact-info h2 {
  color: var(--color-white);
}

.contact-info p {
  color: rgba(255, 255, 255, 0.78);
}

.contact-list {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Telefonnummer und E-Mail starten einen Anruf bzw. das Mailprogramm.
   Ohne sichtbare Reaktion wirkt eine Berührung wie ins Leere gegriffen –
   deshalb Farbwechsel am Zeiger und Einschrumpfen beim Antippen.
   inline-block ist nötig, damit transform auf einem Inline-Element greift. */
.contact-list a {
  color: var(--color-teal-300);
  font-weight: 600;
  display: inline-block;
  /* Trefferfläche nach oben und unten vergrößern; das negative Margin
     nimmt den Zuwachs im Layout wieder zurück, damit die Abstände
     unverändert bleiben. Eine Zeile Text allein ist zum Antippen zu schmal. */
  padding: 0.45rem 0;
  margin: -0.45rem 0;
  /* Unterstrich als Hintergrundlinie statt text-decoration – nur so lässt
     sich seine Breite animieren. currentColor hält ihn im selben Türkis wie
     den Text. Der Versatz zieht ihn direkt unter die Schrift; ohne ihn säße
     er am unteren Rand der vergrößerten Trefferfläche. */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.45rem);
  background-size: 0% 2px;
  transition: background-size 0.28s var(--ease-out), transform 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  .contact-list a:hover {
    background-size: 100% 2px;
  }
}

/* Beim Antippen sofort sichtbar – eine Verzögerung würde sich wie
   eine verschluckte Berührung anfühlen. */
.contact-list a:active {
  background-size: 100% 2px;
  transform: scale(0.96);
  opacity: 0.75;
  transition: none;
}

.contact-form {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  box-shadow: var(--shadow-soft);
}

.form-row {
  margin-bottom: 1.25rem;
}

.form-row label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--color-navy-800);
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--color-ink);
  background: var(--color-fog);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-teal-500);
  box-shadow: 0 0 0 3px var(--color-teal-100);
}

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

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: var(--color-ink-soft);
}

/* Der Browser-Standard ist nur 13 px gross – am Handy kaum zu treffen,
   und ohne dieses Pflichtfeld lässt sich das Formular nicht absenden.
   flex: none verhindert, dass das Kästchen im Flex-Container schrumpft. */
.form-consent input {
  width: 22px;
  height: 22px;
  flex: none;
  margin-top: 0.1rem;
  accent-color: var(--color-teal-500);
  cursor: pointer;
}

.form-status {
  min-height: 1.5rem;
  font-weight: 600;
  font-size: 0.92rem;
  margin: 0.75rem 0 0;
}

.form-status.success {
  color: var(--color-success);
}

.form-status.error {
  color: var(--color-error);
}

/* ---------- 404 ---------- */
/* Die Seite steht ohne Hero direkt unter dem Kopf. Der Abstand oben haelt
   Abstand zum fixierten Kopfbereich, damit die grosse Zahl nicht darunter
   klemmt. */
.fehler-main {
  /* Der Kopf ist fixiert – der obere Abstand muss ihn ueberbieten, sonst
     verschwindet die grosse Zahl darunter. */
  padding: clamp(7rem, 14vw, 9.5rem) 0 clamp(3rem, 7vw, 5rem);
  background: var(--color-fog, #f4f6f7);
  min-height: 60vh;
}

.fehler-inhalt {
  max-width: 640px;
  text-align: center;
}

.fehler-zahl {
  font-family: var(--font-display, inherit);
  font-size: clamp(4.5rem, 16vw, 8rem);
  font-weight: 800;
  line-height: 0.9;
  margin: 0 0 0.6rem;
  /* Deutlich sichtbar, aber nicht so laut wie die Ueberschrift darunter –
     die Zahl ordnet ein, die Ueberschrift spricht. */
  color: rgba(47, 184, 198, 0.28);
  letter-spacing: 0.02em;
}

.fehler-inhalt h1 {
  font-size: clamp(1.6rem, 4.4vw, 2.25rem);
  margin: 0 0 0.7rem;
}

.fehler-text {
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 44ch;
}

.fehler-aktionen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.8rem 0 2.4rem;
}

.fehler-links {
  text-align: left;
  background: var(--color-white, #fff);
  border: 1px solid #e6ecf0;
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-soft);
}

.fehler-links-titel {
  font-weight: 700;
  margin: 0 0 0.7rem;
}

.fehler-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--color-ink-soft);
}

.fehler-links a {
  font-weight: 700;
}

.fehler-fuss {
  margin: 1.8rem 0 0;
  color: var(--color-ink-soft);
  font-size: 0.95rem;
}

.fehler-fuss a {
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Danke-Tafel nach einer Anfrage ---------- */
/* Ersetzt beide Formulare nach dem Absenden. Der Haken zeichnet sich selbst:
   Kreis zuerst, dann der Strich – die Reihenfolge liest sich als "geprüft und
   abgehakt". Baut die Seite den Haken ohne Bewegung auf, ist er trotzdem
   vollstaendig zu sehen (siehe prefers-reduced-motion unten). */
.danke {
  text-align: center;
  padding: 0.8rem 0 0.4rem;
  outline: none;
}

.danke-haken {
  display: block;
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  overflow: visible;
  animation: danke-auftritt 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.danke-ring,
.danke-strich,
.danke-welle {
  fill: none;
  stroke: var(--color-teal-500);
}

.danke-ring {
  stroke-width: 2.4;
  /* Umfang bei r=23: 2·π·23 ≈ 144,5 – aufgerundet, damit kein Rest bleibt. */
  stroke-dasharray: 145;
  stroke-dashoffset: 145;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: danke-zeichnen 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.08s forwards;
}

.danke-strich {
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: danke-zeichnen 0.32s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

.danke-welle {
  stroke-width: 2;
  opacity: 0;
  transform-origin: 50% 50%;
  animation: danke-welle 0.7s ease-out 0.5s;
}

.danke-titel {
  font-family: var(--font-display, inherit);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-ink);
  margin: 0 0 0.4rem;
  animation: danke-auf 0.4s ease-out 0.55s both;
}

.danke-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0 auto;
  max-width: 34ch;
  animation: danke-auf 0.4s ease-out 0.68s both;
}

.danke-fuss {
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid #eef2f5;
  font-size: 0.85rem;
  color: var(--color-ink-soft);
  animation: danke-auf 0.4s ease-out 0.8s both;
}

.danke-fuss a {
  font-weight: 700;
  white-space: nowrap;
}

@keyframes danke-zeichnen {
  to { stroke-dashoffset: 0; }
}

@keyframes danke-auftritt {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes danke-welle {
  from { opacity: 0.5; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.45); }
}

@keyframes danke-auf {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Ohne Bewegung: alles sofort fertig, nichts zeichnet sich auf. */
@media (prefers-reduced-motion: reduce) {
  .danke-haken,
  .danke-titel,
  .danke-text,
  .danke-fuss,
  .danke-welle {
    animation: none;
  }

  .danke-welle { display: none; }

  .danke-ring,
  .danke-strich {
    animation: none;
    stroke-dashoffset: 0;
  }
}

.honeypot-field {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-900);
  color: rgba(255, 255, 255, 0.75);
  padding: 4rem 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-grid .logo {
  color: var(--color-white);
}

/* Instagram im Footer – Handle mit ausschreiben, damit man das Profil auch
   findet, ohne den Link anzuklicken. */
/* Bewusst mit .footer-grid davor: Die allgemeine Regel .footer-grid a setzt
   display auf inline-block und ist spezifischer als .social-link allein.
   Ohne diesen Vorsatz käme inline-flex nie an – align-items bliebe wirkungslos
   und Icon und Text stünden sichtbar versetzt auf der Grundlinie. */
.footer-grid .social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  transition: color 0.2s ease, transform 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.footer-grid .social-link svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--color-teal-300);
}

@media (hover: hover) and (pointer: fine) {
  .footer-grid .social-link:hover {
    color: var(--color-white);
  }
}

/* Frueher h4. Im Fussbereich folgte damit auf die letzte h2 der
   Seite direkt eine h4 – fuer Vorlesesoftware ein Sprung, der eine
   fehlende Ebene suggeriert. Die Groesse macht ohnehin das CSS,
   nicht die Stufe. */
.footer-grid h3 {
  color: var(--color-white);
  font-size: 1rem;
  margin-bottom: 1rem;
}

.footer-grid ul {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

/* Hover nur an Geräten mit Zeiger – auf Touchscreens bliebe der Zustand
   sonst nach dem Antippen hängen. Die Rückmeldung dort übernimmt :active. */
@media (hover: hover) and (pointer: fine) {
  .footer-grid a:hover {
    color: var(--color-teal-300);
  }
}

.footer-grid a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.footer-grid a:active {
  transform: scale(0.96);
  opacity: 0.7;
  transition: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  padding-top: 1.5rem;
  font-size: 0.85rem;
}

/* Impressum und Datenschutz treten optisch zurück – kleiner als der Rest.
   Bewusst nicht kleiner als das hier: Beide müssen nach § 5 TMG "leicht
   erkennbar" bleiben, zu winzige Pflichtangaben sind abmahnfähig. */
.footer-legal {
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  opacity: 0.85;
}

@media (hover: hover) and (pointer: fine) {
  .footer-bottom a:hover {
    color: var(--color-teal-300);
  }
}

.footer-bottom a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

.footer-bottom a:active {
  transform: scale(0.96);
  opacity: 0.7;
  transition: none;
}

/* ---------- Rechtsseiten ---------- */
.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-section) 1.5rem;
}

/* ─── Zurück zur Startseite ─── */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--color-ink-soft);
  margin-bottom: 2rem;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease, transform 0.2s ease;
}

.back-link svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

@media (hover: hover) and (pointer: fine) {
  .back-link:hover {
    color: var(--color-teal-500);
    transform: translateX(-3px);
  }
}

.back-link:active {
  transform: translateX(-2px) scale(0.96);
  opacity: 0.6;
  transition: none;
}


.legal-main h2 {
  font-size: 1.4rem;
  margin-top: 2.2rem;
}

.legal-main p,
.legal-main li {
  color: var(--color-ink-soft);
}

.legal-main ul {
  padding-left: 1.2rem;
  list-style: disc;
  margin-bottom: 1em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  /* Gestapelt: erst der Text, darunter die Kurz-Anfrage. */
  .hero .container {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: none;
  }

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

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

/* Wird per JS (initNavOverflow in main.js) gesetzt, basierend auf der tatsächlich
   gemessenen Inhaltsbreite statt einer geschätzten Pixel-Grenze.
   Stufe 1 "nav-collapsed": nur die Kategorien passen nicht mehr -> Kategorien wandern
   ins Hamburger-Menü, Logo + Anfrage-Button bleiben nebeneinander sichtbar.
   Stufe 2 "cta-collapsed": selbst Logo + Button passen nicht mehr nebeneinander ->
   der Button wandert zusätzlich ins Hamburger-Menü. */
.site-header.nav-collapsed .main-nav ul {
  display: none;
}

.site-header.nav-collapsed .main-nav.is-open ul {
  display: flex;
}

.site-header.nav-collapsed .main-nav.is-open {
  position: fixed;
  inset: 0;
  /* Fast weißes Glas: genug Kontrast für Logo (Türkis + Navy) und Menü,
     Seite schimmert durch den Blur weiterhin dezent durch */
  background: rgba(247, 251, 252, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  flex-direction: column;
  align-items: center;
  /* Vertikal zentriert über auto-Margins von Logo (erstes Kind) und CTA
     (letztes Kind) statt justify-content: center – so bleibt der Inhalt
     bei flachen Viewports (Handy quer) scrollbar statt oben abgeschnitten. */
  justify-content: flex-start;
  text-align: center;
  gap: 2.25rem;
  padding: 2rem 1.5rem;
  overflow-y: auto;
  animation: nav-overlay-fade 180ms ease both;
}

@keyframes nav-overlay-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scroll-Lock, solange das Vollbild-Menü offen ist (Klasse setzt main.js) */
body.nav-open {
  overflow: hidden;
}

/* Header-Balken ausblenden, wenn das Vollbild-Menü offen ist – sonst
   schimmern Balken und Logo durch das Glas-Overlay hindurch. */
body.nav-open .site-header {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
}

body.nav-open .site-header > .container > .logo,
body.nav-open .nav-cta-desktop {
  visibility: hidden;
}

/* Logo im Vollbild-Menü: nur dort sichtbar, zentriert über den Kategorien */
.nav-menu-logo {
  display: none;
}

.site-header.nav-collapsed .main-nav.is-open .nav-menu-logo {
  display: inline-flex;
  margin-top: auto;
  /* fill-mode backwards statt both: nach Animationsende gibt die Animation
     die transform-Eigenschaft wieder frei, sonst wirkt das :active-Scale nicht */
  animation: nav-item-pop 150ms var(--ease-out) backwards;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Eigenes Logo-Feedback: kurzes Einschrumpfen statt Farbwechsel */
.site-header.nav-collapsed .main-nav.is-open .nav-menu-logo:active {
  transform: scale(0.94);
  opacity: 0.7;
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-header.nav-collapsed .main-nav.is-open .nav-menu-logo:hover {
    transform: scale(1.03);
  }
}

/* "klar" in Türkis-500 ist auf dem hellen Glas zu kontrastarm –
   im Menü eine dunklere Türkis-Stufe verwenden */
.site-header.nav-collapsed .main-nav.is-open .nav-menu-logo .logo-text-accent {
  color: var(--color-teal-700);
}

.site-header.nav-collapsed .main-nav.is-open a:not(.btn) {
  font-size: 1.3rem;
}

/* Tap-Feedback nur für die Menüpunkte in der Liste (nicht das Logo –
   dessen inline-flex-Layout darf nicht überschrieben werden).
   Hover greift auf Touch-Geräten nicht, daher :active */
.site-header.nav-collapsed .main-nav.is-open ul a:not(.btn) {
  display: inline-block;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s ease, transform 0.2s ease, opacity 0.2s ease;
}

/* Press-Zustand ohne Transition (sofort sichtbar, auch bei schnellem Tap);
   nur das Zurückfedern beim Loslassen ist animiert */
.site-header.nav-collapsed .main-nav.is-open ul a:not(.btn):active {
  transform: scale(0.9);
  opacity: 0.55;
  transition: none;
}

/* Kreuz oben rechts über dem Overlay fixieren */
.site-header.nav-collapsed .nav-toggle.is-active {
  position: fixed;
  top: 1.4rem;
  right: 1.5rem;
  z-index: 10;
}

@keyframes nav-item-pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-header.nav-collapsed .main-nav.is-open li {
  animation: nav-item-pop 150ms var(--ease-out) both;
}
.site-header.nav-collapsed .main-nav.is-open li:nth-child(1) { animation-delay: 30ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(2) { animation-delay: 65ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(3) { animation-delay: 100ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(4) { animation-delay: 135ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(5) { animation-delay: 170ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(6) { animation-delay: 205ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(7) { animation-delay: 240ms; }
.site-header.nav-collapsed .main-nav.is-open li:nth-child(8) { animation-delay: 275ms; }

.site-header.nav-collapsed .main-nav.is-open .nav-cta-mobile {
  animation: nav-item-pop 150ms var(--ease-out) both;
  animation-delay: 310ms;
}

.site-header.nav-collapsed .main-nav.is-open ul {
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
}

.site-header.nav-collapsed .nav-toggle {
  display: flex;
}

.site-header.nav-collapsed .nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.site-header.nav-collapsed .nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.site-header.nav-collapsed .nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Sobald das Hamburger-Menü aktiv ist, den Anfrage-Button aus der Leiste
   nehmen (sonst Logo + Button + Hamburger nebeneinander = zu voll).
   Der CTA ist dann im geöffneten Menü verfügbar. */
.site-header.nav-collapsed .nav-cta-desktop {
  display: none;
}

/* Im Vollbild-Menü immer den CTA zeigen – der Button im (überdeckten)
   Header-Balken ist bei offenem Menü nicht erreichbar. */
.site-header.nav-collapsed .main-nav.is-open .nav-cta-mobile {
  display: inline-flex;
  min-width: 230px;
  justify-content: center;
  margin-bottom: auto;
}

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

  .footer-bottom {
    flex-direction: column;
  }
}

/* ---------- Scroll-Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 450ms var(--ease-out), transform 450ms var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transform: none;
    transition: opacity 300ms ease;
  }

  .site-header {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }

  .site-header.nav-collapsed .main-nav.is-open,
  .site-header.nav-collapsed .main-nav.is-open li,
  .site-header.nav-collapsed .main-nav.is-open .nav-menu-logo,
  .site-header.nav-collapsed .main-nav.is-open .nav-cta-mobile {
    animation: none;
  }

  .nav-toggle span {
    transition: opacity 0.2s ease;
  }

  .main-nav.is-open {
    transition: opacity 200ms ease;
  }

  .btn:active,
  .service-card,
  .gallery-item {
    transition-duration: 0.01ms;
  }

  .btn:hover,
  .btn:active,
  .service-card:hover,
  .gallery-item:hover {
    transform: none;
  }
}

/* ---------- Einsatzgebiet / Karte ---------- */
/* ---------- Einsatzgebiet ---------- */
/* Die Karte ist ein Bild, kein eingebetteter Dienst. Was hier frueher stand –
   Platzhalter, Einwilligungsknopf, iframe-Regeln – ist damit hinfaellig. */
.map-wrap {
  margin: 2.5rem 0 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-navy-900);
}

.map-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

/* Das hidden-Attribut kommt aus dem Standard-Stylesheet des Browsers, und
   jede Autorenregel schlaegt das – auch eine so schlichte wie die daruber.
   Ohne diese Zeile bliebe das Bild beim Umschalten auf die zoombare Karte
   sichtbar und stuende ueber ihr. */
.map-wrap img[hidden],
.karte-live[hidden] {
  display: none;
}

/* Die Legende sitzt als Leiste unter der Karte, nicht darauf: Auf dem Bild
   muesste sie eine Ecke abdecken, und welche Ecke frei ist, haengt am
   Ausschnitt – der auf dem Handy ein anderer ist. */
.map-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding: 0.9rem 1.25rem;
  background: var(--color-white);
  border-top: 1px solid var(--color-mist, #e2e8ec);
  font-size: 0.86rem;
  color: var(--color-navy-700, #34495f);
}

.map-legende span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.map-punkt {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  flex: none;
}

.map-punkt--sitz {
  background: var(--color-navy-900);
}

/* Der Kreis in der Legende zeigt Rand und Fuellung wie auf der Karte,
   sonst waere er vom Ortspunkt nicht zu unterscheiden. */
.map-punkt--kreis {
  background: rgba(47, 184, 198, 0.22);
  box-shadow: inset 0 0 0 2px var(--color-teal-500);
}

.karte-live {
  height: clamp(20rem, 52vw, 34rem);
  width: 100%;
}

/* Leaflet setzt seine eigene Schrift und einen blauen Fokusrahmen. Beides
   an die Seite angleichen, sonst sieht die Karte nach Fremdkoerper aus. */
.karte-live.leaflet-container {
  font-family: var(--font-body);
  background: var(--color-fog);
}

.karte-live .leaflet-tooltip {
  background: rgba(255, 255, 255, 0.94);
  border: none;
  border-radius: 0.4rem;
  box-shadow: 0 1px 4px rgba(11, 31, 51, 0.22);
  font-weight: 600;
  color: var(--color-navy-900);
  padding: 0.15rem 0.5rem;
}

.karte-live .leaflet-tooltip.karte-sitz {
  font-size: 1.05em;
}

.map-quelle {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
  color: var(--color-navy-500, #5a6d84);
}

.map-quelle a {
  color: var(--color-teal-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Der Datenschutz-Verweis in den Einwilligungszeilen. Vorher lief er in der
   Textfarbe mit und war nur an der Unterstreichung als Verweis zu erkennen –
   in einer Zeile Kleingedrucktem uebersieht man das. Tuerkis auf Weiss kommt
   auf 4,7:1 und hebt sich damit deutlich ab, ohne zu schreien. */
.consent-link {
  color: var(--color-teal-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.consent-link:hover,
.consent-link:focus-visible {
  color: var(--color-navy-800);
}

/* Die Danke-Tafel blendet sich nach ein paar Sekunden aus und gibt das
   Formular wieder frei. Ohne Uebergang waere sie schlagartig weg, und der
   Wechsel saehe aus, als sei etwas abgestuerzt. */
.danke.is-weg {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .danke.is-weg {
    transition: none;
  }
}

/* Video im Ablauf der Impraegnierung. Feste Bildkante 16:9, damit beim Laden
   nichts springt – ohne aspect-ratio waere die Hoehe erst bekannt, wenn die
   Datei da ist, und der Text darunter ruckt nach unten. */
/* 40rem sind bei 16 px Grundschrift 640 px Anzeigebreite. Die Datei ist
   960 px breit – damit bleibt das Anderthalbfache Reserve fuer Bildschirme
   mit hoher Punktdichte. Bei 46rem waeren es nur noch 1,3-fach gewesen, und
   auf einem Retina-Schirm sieht man das an den Fugen. */
.schritt-video {
  margin: 2.75rem auto 0;
  max-width: 40rem;
}

.schritt-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-navy-900);
}

.schritt-video figcaption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.86rem;
  color: var(--color-ink-soft);
}

/* Sprungmarke fuer die Tastatur. Ohne sie muss man sich auf jeder Seite
   erst durch Logo, sieben Menuepunkte, Telefonnummer und den Angebotsknopf
   tabben, bevor der Inhalt kommt – bei jedem Seitenwechsel neu.

   Sie liegt ausserhalb des Bildes und kommt erst beim Fokus herein, ist
   also nicht versteckt im Sinne der Zugaenglichkeit: Wer mit der Maus
   arbeitet, sieht sie nie, wer die Tabulatortaste drueckt, findet sie als
   Erstes. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--color-navy-900);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ---------- WhatsApp-Button ---------- */
.whatsapp-btn {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 999;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s ease;
  text-decoration: none;
}

.whatsapp-btn svg {
  width: 30px;
  height: 30px;
}

@media (hover: hover) and (pointer: fine) {
  .whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
  }
}

.whatsapp-btn:active {
  transform: scale(0.95);
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-btn {
    transition: none;
  }
}

/* ─── Navy-Header ───
   Statt eines massiven Riegels: leicht durchscheinendes Navy mit Blur, damit
   der Inhalt darunter schemenhaft durchschimmert und die Leiste zum Rest der
   Seite gehoert statt darauf zu liegen.

   Die Farbe liegt bewusst auf ::before und nicht auf dem Header selbst:
   backdrop-filter direkt am Header wuerde ihn zum Bezugsrahmen fuer alle
   fixierten Nachfahren machen – das Vollbild-Menue klebte dann in der Leiste
   fest statt den Bildschirm zu fuellen. */
.site-header--navy > .container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  /* Navy-800 statt -900 und weniger deckend: die Leiste soll sich einfuegen,
     nicht als dunkler Block ueber dem Inhalt liegen. */
  background: rgba(18, 44, 71, 0.72);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  /* Feine helle Kante oben plus weicher Schatten, damit die Karte vom
     Untergrund abhebt statt darauf zu kleben. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 14px 34px -18px rgba(0, 0, 0, 0.55);
  transition: opacity 0.3s ease;
}

/* Ueber dem Hero bleibt die Leiste voellig offen – dort traegt das Foto. */
.site-header--overlay:not(.is-solid) > .container::before {
  opacity: 0;
}

.site-header--navy .logo-text {
  color: var(--color-white);
}

.site-header--navy .main-nav a:not(.btn) {
  color: rgba(255, 255, 255, 0.82);
}

@media (hover: hover) and (pointer: fine) {
  .site-header--navy .main-nav:not(.is-open) a:not(.btn):not(.logo):hover {
    color: var(--color-teal-300);
  }
  .site-header--navy .main-nav:not(.is-open) a:not(.btn):not(.logo):hover::after {
    transform: scaleX(1);
    background: var(--color-teal-300);
  }
}



.site-header--navy .nav-toggle span {
  background: var(--color-white);
}

.site-header--navy .nav-toggle {
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
}

.site-header--navy .nav-toggle.is-active {
  border-color: transparent;
}

.site-header--navy .nav-phone {
  color: rgba(255, 255, 255, 0.9);
}

.site-header--navy .main-nav a:not(.btn).is-active {
  color: var(--color-white);
}

.site-header--navy .main-nav a:not(.btn)::after {
  background: var(--color-teal-300);
}

.site-header--navy.nav-collapsed .main-nav.is-open {
  /* Durchscheinend wie die Leiste: der Untergrund bleibt erkennbar und das
     Menue wirkt je nach Abschnitt heller oder dunkler. Kontrast fuer weisse
     Schrift bleibt auch ueber weissem Inhalt bei rund 5:1. */
  background: rgba(15, 38, 61, 0.74);
  backdrop-filter: blur(22px) saturate(130%);
  -webkit-backdrop-filter: blur(22px) saturate(130%);
}

/* Bei offenem Menue verschwindet der Leisten-Hintergrund, sonst laege oben
   ein dunklerer Streifen ueber dem Menue. */
body.nav-open .site-header--navy > .container::before {
  opacity: 0;
}

/* Auf dem dunklen Glas umgekehrt: hellere Türkis-Stufe für "klar" */
.site-header--navy.nav-collapsed .main-nav.is-open .nav-menu-logo .logo-text-accent {
  color: var(--color-teal-300);
}

.site-header--navy.nav-collapsed .main-nav.is-open a:not(.btn) {
  color: rgba(255, 255, 255, 0.82);
}


/* ---------- Ablauf in drei Schritten ---------- */
.ablauf {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.ablauf-schritt {
  background: var(--color-white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
}

/* aspect-ratio haelt den Platz frei, bevor Video oder Bild geladen sind.
   Ohne das springt die Seite, sobald das erste Video seine Masse meldet. */
.ablauf-medien {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-navy-900);
}

.ablauf-medien video,
.ablauf-medien img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ablauf-text {
  padding: 1.6rem 1.75rem 1.8rem;
}

.ablauf-nummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.8rem;
  border-radius: 999px;
  background: var(--color-teal-500, #5bb8c4);
  color: var(--color-navy-900);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

.ablauf-text h3 {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
}

.ablauf-text p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-slate, #5a6470);
}

/* ---------- Zeitraffer ----------
   Sitzt im Rahmen von .content-figure, erbt also Breite, Radius und Schatten
   vom Bild, das vorher an dieser Stelle stand. */
.zeitraffer {
  background: var(--color-navy-900);
}

/* aspect-ratio haelt den Platz frei, bevor die Datei da ist. Sonst springt
   der halbe Seiteninhalt nach unten, sobald das Video geladen hat. */
.zeitraffer video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}