/* ==========================================================================
   CRS Celik-Reinigungsservice, Heilbronn
   Design-System nach PStudio-Blueprint. Tokens + Komponenten.
   NACH der Homepage eingefroren: Unterseiten duerfen Section-Styles ergaenzen,
   aber niemals Tokens / Hero / Nav / Footer / Form anfassen.
   ========================================================================== */

/* ---------- Fonts (self-hosted, DSGVO) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/archivo-v25-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/archivo-v25-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/public-sans-v21-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/public-sans-v21-latin-600.woff2") format("woff2");
}
/* Kursive Serif fuer die Schluesselwoerter in den Headlines */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/playfair-display-v40-latin-500italic.woff2") format("woff2");
}

/* ---------- §1 Design-Tokens ---------- */
:root {
  /* Die Seite gibt es nur in hell. Ohne diese Zeile drehen Samsung Internet
     und Chrome mit "Dunkles Design erzwingen" die Farben selbst um - der beige
     Hintergrund wird schwarz, das Markenblau der Ansprechpartner-Karte kippt
     ins Dunkelnavy. "only light" ist der dokumentierte Opt-out dafuer;
     "light" allein reicht bei der Auto-Dark-Heuristik nicht. */
  color-scheme: only light;

  /* Brand - aus dem CRS-Logo gezogen */
  --accent: #006086;                    /* Tuerkis der alten Website, 6,4:1 auf Weiss */
  --accent-hover: #004E6D;
  --accent-rgb: 0, 96, 134;
  --accent-subtle: rgba(var(--accent-rgb), .07);
  --accent-light: #48A8E8;              /* Logo-Hellblau: Text nur auf dunklen Flaechen */
  --accent-light-rgb: 72, 168, 232;
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, #2484B7 55%, var(--accent-light) 100%);
  /* Der Band-Verlauf (Scrolling-Bar unter der Hero): Tuerkis -> Hellblau,
     kein Lila mehr. */
  --band-grad: linear-gradient(90deg, var(--accent) 0%, #2484B7 52%, var(--accent-light) 100%);

  /* Neutral - kuehl gehalten (Sauberkeit), statt der warmen Default-Basis */
  --ink: #14162E;
  --dark: #0A3A50;                      /* tiefes Petrol, Hue-Familie des Tuerkis */
  --dark-2: #062837;                    /* noch tiefer */
  --muted: #6B6660;
  --border: #E6E1D8;
  /* Warmes Creme statt Weiss. Zwei Toene im Wechsel, Karten in reinem Weiss
     darauf - das ist der Unterschied zwischen "hochwertig" und "Baukasten". */
  --bg: #FAF7F2;
  --surface-alt: #F0EDE6;
  --card: #FFFFFF;

  /* Auf dunklen Flaechen */
  --dark-card: rgba(255, 255, 255, .06);
  --dark-border: rgba(255, 255, 255, .14);
  --dark-text-strong: rgba(255, 255, 255, .96);
  --dark-text: rgba(255, 255, 255, .80);
  --dark-text-muted: rgba(255, 255, 255, .55);

  /* Typo */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-accent: 'Playfair Display', Georgia, serif;

  /* Rhythmus */
  --section-py: 6rem;
  --section-py-mobile: 4rem;
  --container-max: 1240px;
  --container-pad: 24px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --icon-size: 44px;
  --nav-h: 76px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(18, 20, 43, .06);
  --shadow-card-hover: 0 26px 50px -24px rgba(18, 20, 43, .28);
  --shadow-btn: 0 4px 12px rgba(var(--accent-rgb), .28);

  /* z-index */
  --z-nav: 100;
  --z-mobile-menu: 200;
  --z-sticky-cta: 300;
  --z-modal: 1000;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

html { overflow-x: clip; }
body {
  overflow-x: clip;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: none; background: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.03em;
  text-wrap: balance;
  hyphens: none;
  -webkit-hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: var(--z-modal);
  background: var(--accent); color: #fff; padding: .9rem 1.4rem;
  border-radius: 0 0 var(--radius-md) 0; font-weight: 600;
}
.skip-link:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-py); }
.section--alt { background: var(--surface-alt); }
/* Eine ruhige, fast einfarbige Tiefe statt eines Blau-Violett-Verlaufs mit
   Leuchtfleck - der wirkt schnell wie ein Generator-Hintergrund. */
.section--dark {
  background: linear-gradient(180deg, var(--dark) 0%, #072B3C 100%);
  color: var(--dark-text);
}
.section--dark h2, .section--dark h3 { color: var(--dark-text-strong); }

/* Section-Header-Pattern */
.kicker {
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-heading); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .2em; color: var(--accent);
  margin-bottom: 1.4rem;
}
/* Kein Strich und kein Punkt vor dem Label - nur der Text. */
/* Kein Strich und kein Punkt vor dem Label - nur der Text.
   (Chef-Vorgabe: war beim Einbau der Logo-Akzente versehentlich zurueck.) */
.kicker .dot { display: none; }
.section--dark .kicker { color: var(--accent-light); }

.sec-head {
  max-width: none; margin-bottom: 3.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(var(--accent-rgb), .45) 0%, rgba(var(--accent-light-rgb), .4) 30%, var(--border) 70%) 1;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 1rem 4rem; align-items: start;
}
.sec-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.sec-head h2 { grid-column: 1; margin-top: .9rem; }
.sec-head p { grid-column: 2; }
.section--dark .sec-head { border-bottom-color: var(--dark-border); }
/* Bewusst nicht mehr zentriert: die durchgehende linke Kante gibt der Seite
   Struktur, zentrierte Eyebrow-Bloecke sind das Template-Signal schlechthin. */


/* Variante ohne Beitext: Headline steht allein und mittig, ohne Trennlinie
   darunter. Fuer Sections, bei denen die Karten den Rest erklaeren. */
.sec-head--solo {
  grid-template-columns: 1fr; justify-items: center; text-align: center;
  padding-bottom: 0; border-bottom: none; border-image: none;
  margin-bottom: 3rem;
}
.sec-head--solo .kicker { justify-content: center; }
.sec-head--solo h2 { grid-column: 1; max-width: 22ch; }
.section h2, .sec-head h2 {
  font-size: clamp(2.15rem, 4.2vw, 3.5rem);
  color: var(--ink);
}
.section--dark h2 { color: var(--dark-text-strong); }
.section--dark .sec-head h2 { color: var(--dark-text-strong); }
.sec-head p {
  margin-top: .9rem; color: var(--muted); font-size: 1.05rem; max-width: 30rem;
  padding-left: 2rem; border-left: 2px solid var(--border);
}
.section--dark .sec-head p { color: var(--dark-text); }
/* Beitext in der Solo-Variante: die Solo-Kopfzeile hat nur eine Spalte, das
   grid-column: 2 der Standard-Regel wuerde eine zweite Spalte erzwingen und
   den Block aus der Mitte ziehen. Der linke Zierstrich faellt weg, weil er
   bei zentriertem Satz keine Kante mehr markiert. */
.sec-head--solo p {
  grid-column: 1; max-width: 54ch;
  padding-left: 0; border-left: none;
}

/* Das Schluesselwort tritt aus der Grotesk heraus: kursive Serif, etwas
   groesser gesetzt, damit die Kontur der Zeile bricht. */
/* Das Schluesselwort traegt den Logo-Verlauf: vom Dunkelblau des Schriftzugs
   ins Hellblau des Ç. Fallback auf Volltonfarbe, falls background-clip fehlt. */
/* Das Schluesselwort bleibt in der Grotesk und traegt nur den Farbverlauf.
   Kursive Serif-Woerter sind das Erkennungszeichen generierter Seiten. */
h1 .ac, h2 .ac, h3 .ac {
  font-family: inherit;
  font-style: normal; font-weight: 700;
  letter-spacing: inherit; font-size: 1em;
  color: var(--accent);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 .ac, h2 .ac, h3 .ac {
    background: linear-gradient(100deg, var(--accent) 0%, #1E7FA8 42%, var(--accent-light) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
  .section--dark h2 .ac, .section--dark h3 .ac {
    background: linear-gradient(100deg, var(--accent-light) 0%, #8FD0F5 100%);
    -webkit-background-clip: text; background-clip: text;
  }
}
.section--dark h2 .ac, .section--dark h3 .ac { color: var(--accent-light); }

/* ---------- §3 Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .85rem 1.75rem;
  font-family: var(--font-heading); font-size: .9rem; font-weight: 600;
  letter-spacing: .01em;
  border-radius: 3px; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease,
              box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn svg { flex: none; transition: transform .2s ease; }
.btn:hover svg.arr { transform: translateX(4px); }

.btn--primary {
  background: linear-gradient(135deg, #0A7BA6 0%, var(--accent) 52%, #00465F 100%);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(var(--accent-rgb), .5),
              inset 0 -1px 0 rgba(var(--accent-light-rgb), .45);
}
.btn--primary:hover {
  background: var(--accent-hover); transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(var(--accent-rgb), .36);
}

.btn--ghost {
  background: transparent; color: var(--dark-text-strong);
  border-color: rgba(255, 255, 255, .28);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45);
  transform: translateY(-2px);
}


.btn--outline {
  background: transparent; color: var(--accent); border-color: var(--border);
}
.btn--outline:hover { border-color: var(--accent); background: var(--accent-subtle); }

.btn--block { width: 100%; }

/* Text-Link mit Pfeil */
.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-heading); font-weight: 600; font-size: .95rem;
  color: var(--accent);
}
.arrow-link .arr { transition: transform .18s ease; }
.arrow-link:hover .arr { transform: translateX(4px); }
.section--dark .arrow-link { color: var(--accent-light); }

/* ---------- §3 Navbar ----------
   Durchgehende Leiste am oberen Rand. Am Seitenanfang transparent ueber dem
   Hero, beim Scrollen wird daraus eine Glasleiste (Blur + feine Kante). */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  pointer-events: none;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  /* backdrop-filter bewusst NICHT in der Transition: den Weichzeichner ueber
     350ms zu animieren zwingt den Browser genau beim Scroll-Start zu einer
     Neuberechnung pro Frame ueber die volle Leistenbreite. Er springt jetzt
     hart um, was hinter der Deckkraft ohnehin niemand sieht. */
  transition: background .35s ease, border-color .35s ease,
              box-shadow .35s ease;
}
.nav__inner {
  position: relative;
  pointer-events: auto;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
/* Seiten ohne Hero (Impressum, Datenschutz, 404) brauchen von Anfang an
   eine deckende Leiste - sonst stuende weisse Schrift auf hellem Grund. */
body:not(:has(.hero)) .nav {
  background: rgba(10, 12, 16, .92);
  border-bottom-color: rgba(255, 255, 255, .1);
  /* Ebenfalls entschaerft, gleiche Begruendung wie bei .nav--scrolled. Bei
     .92 Deckkraft traegt der Weichzeichner ohnehin kaum noch etwas bei. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Umschaltpunkt kommt aus main.js (.nav--scrolled am .nav)
   Der Weichzeichner ist bewusst schwaecher als frueher (war blur(22px)
   saturate(185%)): die Leiste ist fix und volle Breite, also muss der Browser
   den Bereich dahinter bei JEDEM Scroll-Frame neu weichzeichnen - und ganz
   oben ist das der laufende Videohintergrund. Der Aufwand steigt mit dem
   Radius, saturate() kommt als zweite Stufe obendrauf. 12px ohne saturate
   sieht bei dieser Deckkraft praktisch gleich aus, kostet aber deutlich
   weniger. Dafuer ist der Hintergrund etwas deckender (.72 -> .82), damit die
   Schrift ohne den starken Blur ruhig steht. */
.nav--scrolled {
  background: rgba(10, 12, 16, .82);
  border-bottom-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px -32px rgba(0, 0, 0, .9);
}

.nav__inner > nav { display: flex; align-items: center; }
.nav__logo { flex: none; display: flex; align-items: center; }
/* Header: weisses Logo direkt auf der dunklen Leiste, ohne Unterlage.
   Das Mobilmenue (weisses Sheet) nutzt dieselbe Klasse mit dem farbigen
   Original — dort braucht es ebenfalls keinen Kasten. */
.nav__logo-bild {
  height: 42px; width: auto; display: block;
}


.nav__list {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: .35rem;
}
.nav__item { position: relative; }
.nav__item > a {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .7rem .85rem;
  font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
  letter-spacing: .01em;
  color: var(--dark-text-strong, rgba(255,255,255,.95)); transition: color .18s ease;
}
.nav__item > a::after {
  content: ""; position: absolute; left: .85rem; right: .85rem; bottom: .5rem;
  height: 1px; background: var(--accent-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}
.nav__item > a:hover, .nav__item.open > a { color: #fff; }
.nav__item > a:hover::after, .nav__item.open > a::after { transform: scaleX(1); }
.nav__item > a .chev { transition: transform .18s ease; }
.nav__item:hover > a .chev, .nav__item.open > a .chev { transform: rotate(180deg); }
.nav__cta { flex: none; margin-left: auto; }
.nav__cta .btn { min-height: 46px; padding: .6rem 1.4rem; font-size: .85rem; }

/* Dropdowns
   Eine eigene Flaeche, die ueber der Seite schwebt - darum weichere Radien
   als im restlichen (bewusst kantigen) Layout. Glas wie die Kopfleiste, die
   Icons sitzen in eigenen Kacheln, unten schliesst ein hervorgehobener
   "Alle ..."-Eintrag die Liste ab. */
.dd {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(10px) scale(.985);
  min-width: 384px; padding: 16px 14px 14px;
  background: rgba(8, 26, 36, .92);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px;
  box-shadow: 0 44px 80px -28px rgba(0, 0, 0, .8),
              0 2px 10px rgba(0, 0, 0, .35),
              inset 0 1px 0 rgba(255, 255, 255, .05);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .22s cubic-bezier(.22, 1, .36, 1);
}
.has-dd::after {
  content: ""; position: absolute; inset: 100% 0 auto 0; height: 14px;
}
.has-dd:hover .dd, .has-dd.open .dd {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* Ueberschrift der Klappe - ordnet die Liste ein, statt sie nackt zu zeigen */
.dd__eyebrow {
  display: block; padding: 0 12px 12px;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--accent-light);
}
.dd__item {
  display: grid; grid-template-columns: var(--icon-size) 1fr; gap: 15px;
  align-items: center; padding: 9px 12px; border-radius: 12px;
  transition: background .18s ease;
}
.dd__item:hover { background: rgba(255, 255, 255, .06); }
.dd__icon {
  width: var(--icon-size); height: var(--icon-size);
  display: grid; place-items: center; border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--accent-light);
  transition: background .18s ease, border-color .18s ease;
}
.dd__item:hover .dd__icon {
  background: rgba(var(--accent-light-rgb), .14);
  border-color: rgba(var(--accent-light-rgb), .42);
}
.dd__icon svg { width: 21px; height: 21px; stroke-width: 1.5; }
.dd__txt strong {
  display: block; color: var(--dark-text-strong);
  font-family: var(--font-heading); font-weight: 700; font-size: .95rem;
  letter-spacing: -.01em;
}
.dd__txt small {
  display: block; margin-top: 1px;
  color: var(--dark-text-muted); font-size: .85rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Abschluss-Zeile: gleiche Anatomie wie die Eintraege, nur in Akzentfarbe */
.dd__item--all {
  grid-template-columns: var(--icon-size) 1fr auto;
  margin-top: 8px; padding-top: 17px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  border-radius: 0 0 12px 12px;
}
.dd__item--all .dd__icon {
  background: rgba(var(--accent-light-rgb), .14);
  border-color: rgba(var(--accent-light-rgb), .38);
}
.dd__item--all .dd__txt strong { color: var(--accent-light); }
.dd__item--all .arr {
  color: var(--accent-light); font-size: 1.15rem; line-height: 1;
  transition: transform .18s ease;
}
.dd__item--all:hover .arr { transform: translateX(4px); }


/* Burger + Mobile-Menue */
.nav__burger {
  /* KEIN grid: die drei Striche waeren dann Grid-Zeilen und wuerden
     gleichmaessig ueber die Buttonhoehe verteilt - margin-top greift nicht
     mehr und die Striche stehen 15px auseinander statt 4px. */
  display: none; width: 44px; height: 44px; margin-left: auto;
  border: none; background: none; border-radius: 0;
  flex-direction: column; align-items: center; justify-content: center;
  color: #fff;
}
.nav__burger span {
  display: block; width: 20px; height: 2px; background: currentColor;
  border-radius: 0; transition: transform .25s ease, opacity .2s ease;
}
.nav__burger span + span { margin-top: 4px; }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Mobile-Menue: helles Panel von rechts ---------- */
/* Die Seite bleibt links sichtbar und wird nur abgedunkelt - das Menue liegt
   als eigene Flaeche darueber, statt den ganzen Bildschirm zu ersetzen. */
.mnav {
  position: fixed; inset: 0; z-index: var(--z-mobile-menu);
  display: none; justify-content: flex-end;
  background: rgba(4, 18, 25, .5);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.mnav.open { display: flex; }

.mnav__sheet {
  position: relative;
  display: flex; flex-direction: column;
  width: min(88vw, 420px); height: 100%;
  background: #fff;
  box-shadow: -24px 0 60px -30px rgba(4, 18, 25, .6);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (prefers-reduced-motion: no-preference) {
  .mnav.open .mnav__sheet { animation: mnav-rein .3s cubic-bezier(.22, 1, .36, 1); }
  @keyframes mnav-rein { from { transform: translateX(100%); } }
}

.mnav__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}
.mnav__top img { height: 40px; width: auto; }
.mnav__close {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-alt); color: var(--ink);
  transition: background .18s ease;
}
.mnav__close:hover { background: var(--border); }

/* Grosse, ruhige Liste - keine Icons, keine zweite Ebene */
.mnav__links {
  flex: 1; display: flex; flex-direction: column;
  padding: 1.5rem 1.25rem 1rem;
}
.mnav__links a {
  padding: .95rem 0;
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink);
  transition: color .18s ease, padding-left .18s ease;
}
.mnav__links a:hover, .mnav__links a:active {
  color: var(--accent); padding-left: .35rem;
}

/* ---------- Mobilmenue: zwei Ebenen ----------
   Die Unterpunkte sind kein Akkordeon mehr, sondern schieben als eigene Ebene
   herein. Bei 40 Orten und sieben Leistungen wird eine aufgeklappte Liste
   sonst laenger als der Bildschirm, und man verliert den Bezug zum Hauptmenue.
   Die Buehne stapelt beide Ebenen uebereinander; die inaktive steht seitlich
   daneben und wird nach dem Weggleiten per hidden aus dem Fokus genommen. */
.mnav__buehne {
  position: relative; flex: 1; overflow: hidden;
  display: grid;
}
.mnav__panel {
  grid-area: 1 / 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  transform: translateX(100%); opacity: 0;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.mnav__panel[data-panel="haupt"] { transform: translateX(-28%); }
.mnav__panel.is-aktiv { transform: none; opacity: 1; }
.mnav__panel[hidden] { display: none; }

/* Auslöser der zweiten Ebene: sieht aus wie die uebrigen Menuepunkte, ist aber
   ein <button> - die Gruppen-Startseite haengt unten als "Alle ..." dran. */
.mnav__zu {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; padding: .95rem 0; background: none; border: 0; cursor: pointer;
  text-align: left;
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600;
  letter-spacing: -.015em; color: var(--ink);
  transition: color .18s ease;
}
.mnav__zu:hover, .mnav__zu:active { color: var(--accent); }
.mnav__pfeil { flex: none; display: grid; place-items: center; color: var(--accent); }

.mnav__zurueck {
  display: inline-flex; align-items: center; gap: .35rem;
  margin: 1.25rem 1.25rem .2rem; padding: .5rem .8rem .5rem .5rem;
  align-self: flex-start; border: 0; border-radius: 99px; cursor: pointer;
  background: var(--surface-alt); color: var(--accent);
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.mnav__zurueck:hover { background: var(--border); }
.mnav__titel {
  margin: .5rem 1.25rem 1rem;
  font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink);
}
/* Feiner Strich unter der Ebenen-Ueberschrift, wie im Vorbild */
.mnav__titel::after {
  content: ""; display: block; width: 46px; height: 3px; margin-top: .6rem;
  border-radius: 2px; background: var(--accent-grad);
}

.mnav__kacheln { display: grid; gap: .55rem; padding: 0 1.25rem; }
.mnav__kachel {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
  padding: .75rem .8rem;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--card);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.mnav__kachel:active { transform: scale(.985); }
.mnav__kachel:hover { border-color: rgba(var(--accent-rgb), .35); background: var(--surface-alt); }
.mnav__kachel-ic {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(var(--accent-rgb), .09); color: var(--accent);
}
.mnav__kachel-ic svg { width: 18px; height: 18px; }
.mnav__kachel-tx { min-width: 0; }
.mnav__kachel-tx strong {
  display: block; font-family: var(--font-heading); font-size: 1rem;
  font-weight: 700; letter-spacing: -.015em; color: var(--ink); line-height: 1.25;
}
.mnav__kachel-tx small {
  display: block; margin-top: .1rem; font-size: .82rem; color: var(--muted);
}
.mnav__kachel-arr { color: var(--accent); opacity: .5; display: grid; place-items: center; }
.mnav__kachel:hover .mnav__kachel-arr { opacity: 1; }

.mnav__panel .mnav__alle {
  margin: 1rem 1.25rem 1.5rem; padding: .85rem 1rem;
  text-align: center; border-radius: 12px;
  background: rgba(var(--accent-rgb), .07);
  font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
  color: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .mnav__panel { transition: none; }
}

.mnav__foot {
  display: grid; gap: .7rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
}
.mnav__foot .btn { border-radius: 99px; }
.mnav__foot .btn--ghost {
  color: var(--ink); border-color: var(--border); background: transparent;
}
.mnav__foot .btn--ghost:hover { border-color: var(--ink); background: transparent; }

/* Sticky-Call-Bar (Mobile) */


/* ---------- §3 Hero (Vollbild-Foto, Inhalt linksbuendig) ---------- */
/* Neigung des Leistungs-Bands, an einer Stelle definiert: das Band wird um
   --band-winkel gedreht, der Hero mit demselben Winkel unten abgeschnitten.
   --band-kante ist der vertikale Hoehenunterschied ueber die volle Breite
   (tan(Winkel) * 100), --band-halb die Haelfte davon. Die drei Werte MUESSEN
   zusammen bleiben, sonst passt der Hero-Anschnitt nicht mehr auf das Band.
   08.08.2026 flacher gestellt nach dem Vorbild pages.pstudio.care: dort
   -1,6deg. tan(1.6deg) = 0.0279. */
:root {
  --band-winkel: -1.6deg;
  --band-kante: 2.79vw;
  --band-halb: 1.40vw;
}

.hero {
  position: relative;
  min-height: 720px;      /* FEST fuer ALLE Seiten (Hero-Gesetz), nie vh/svh */
  display: flex; align-items: center;
  overflow: hidden;
  background: #07070B;
  isolation: isolate;
  /* Unterkante folgt der Bandneigung - links tief, rechts hoch. Ohne das
     schaut unter dem Band noch ein dunkler Zwickel des Heros hervor. */
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--band-kante)), 0 100%);
}
/* Ab Desktop waechst der Hero mit der Fensterhoehe: auf einem grossen Monitor
   wirken die festen 720px wie ein Streifen. Handy und Tablet behalten die
   feste px-Hoehe (Hero-Gesetz), weil dort die ein- und ausfahrende
   Adressleiste den Hero sonst bei jedem Scroll springen laesst - am Desktop
   ist die Viewport-Hoehe stabil. Kennt ein Browser svh nicht, faellt der
   ganze Wert weg und die 720er-Basis oben greift weiter. */
@media (min-width: 1024px) {
  .hero { min-height: max(720px, min(92svh, 1100px)); }
}
.hero__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  /* Hier stand "filter: saturate(.95) brightness(1)". brightness(1) ist ein
     Nullwert und saturate(.95) sind 5 Prozent, die unter dem dunklen
     .hero__veil ohnehin niemand sieht - dafuer zwang der Filter den Browser,
     JEDEN Videoframe zusaetzlich durch eine Filterstufe zu schicken. Ohne ihn
     sieht der Hero identisch aus und kostet spuerbar weniger. Den Kontrast
     fuer die Headline macht der Verlauf darueber. */
}
/* Hier stand der prefers-reduced-motion-Fallback fuers Hero-Video (Poster
   statt Schleife). Seit dem Kundenwunsch 08/2026 ist der Hero ueberall ein
   stehendes Bild - ein <img> ist keine Bewegung, der Fallback haette nur
   noch ein unsichtbares 95-KB-Poster hinter das Bild geladen. */
/* Drei Verlaeufe: links abdunkeln (Text), oben die Navi auffangen,
   rechts unten ein Hauch Markenblau als Tiefe. */
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  /* Durchgehend neutrales Schwarz - jeder Blaustich im Verlauf laesst das
     Video darunter violett wirken. */
  background:
    linear-gradient(100deg,
      rgba(0, 0, 0, .7) 0%,
      rgba(0, 0, 0, .56) 40%,
      rgba(0, 0, 0, .28) 70%,
      rgba(0, 0, 0, .1) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, transparent 22%),
    /* Vignette: dunkelt nur die Ecken ab, statt das Bild flaechig zuzuziehen */
    radial-gradient(125% 105% at 50% 45%, transparent 50%, rgba(0, 0, 0, .42) 100%);
}

.hero__wrap {
  position: relative;
  max-width: var(--container-max); margin-inline: auto; width: 100%;
  padding: calc(var(--nav-h) + 3.75rem) var(--container-pad) 8.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 3rem; align-items: center;
}
.hero__inner { max-width: 40rem; min-width: 0; }

/* Dachzeile als Pill: Google-Logo, Note, Sterne - das Vertrauenssignal
   steht damit ueber der Headline statt darunter. */
.hero__pill {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 1.1rem .5rem .5rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  /* Liegt direkt ueber dem laufenden Video: saturate() als zweite Filterstufe
     ist hier am teuersten und optisch am wenigsten wert. Nur der Blur bleibt. */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-bottom: 1.5rem;
}
.hero__pill-g {
  width: 34px; height: 34px; flex: none; padding: .4rem;
  border-radius: 50%; background: #fff;
}
.hero__pill-tx {
  font-size: .9rem; color: var(--dark-text); white-space: nowrap;
}
.hero__pill-tx b {
  font-family: var(--font-heading); font-weight: 700; color: #fff;
}
.hero__pill .stars { display: inline-flex; gap: 1px; color: #FBBC04; }
.hero__pill .stars svg { width: 14px; height: 14px; }

/* Drei belegte Punkte direkt ueber den Buttons */
.hero__benefits {
  display: grid; gap: .7rem;
  margin-top: 1.9rem;
}
.hero__benefits li {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600;
  color: #fff;
}
.hero__haken {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 14px -8px rgba(var(--accent-rgb), .9);
}
.hero__haken svg { width: 13px; height: 13px; }

.hero h1 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(2.6rem, 4.5vw, 3.9rem); line-height: 1.05;
  letter-spacing: -.035em; color: #fff;
  max-width: 15ch;
  text-shadow: 0 2px 30px rgba(5, 34, 47, .5);
  hyphens: none; -webkit-hyphens: none; overflow-wrap: normal; word-break: normal;
}
/* Handgezogener Schwung unter dem Schluesselwort. Er sitzt bewusst in einem
   ::after - das Element selbst traegt den Farbverlauf per background-clip,
   ein zweiter Hintergrund waere dort nicht sichtbar. */
/* Headline-Akzent: Tuerkis -> Weiss als Verlauf, damit das Wort auf dem
   dunklen Video leuchtet statt abzusaufen. */
.hero h1 .ac {
  color: #7BD1EC;                       /* Fallback ohne background-clip */
  position: relative;
  padding-bottom: .1em;
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero h1 .ac {
    background: linear-gradient(100deg, #2FB4E0 0%, #FFFFFF 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}
.hero h1 .ac::after {
  content: ""; position: absolute; left: 0; right: .04em; bottom: -.02em;
  height: .18em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 18' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='tw' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232FB4E0'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M3 13.5C52 6 158 2.5 297 6.5' fill='none' stroke='url(%23tw)' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% 100%;
}

.hero__lead {
  margin-top: 1.6rem; max-width: 34rem;
  font-size: 1.11rem; line-height: 1.62; color: var(--dark-text);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.4rem; }
/* Hero komplett in Tuerkis - bewusst OHNE Verlauf */
.hero .btn--primary { background: var(--accent); }
.hero .btn--primary:hover { background: var(--accent-hover); }
.btn--pill { border-radius: 7px; padding-right: .5rem; padding-left: 1.75rem; }
.btn__ico {
  width: 32px; height: 32px; flex: none; margin-left: .35rem;
  display: grid; place-items: center; border-radius: 5px;
  background: rgba(255, 255, 255, .2); color: #fff;
}
/* Zweiter CTA auf dem Foto: Glas statt Vollflaeche */
.btn--onglass {
  background: rgba(255, 255, 255, .1); color: #fff;
  border-color: rgba(255, 255, 255, .26); border-radius: 7px;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn--onglass:hover {
  background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .45);
  transform: translateY(-2px);
}

/* Belegte Fakten statt Werbefloskeln, direkt unter dem CTA */

/* ---------- Google-Widget ---------- */


/* Variante auf dunklem Foto */


/* ---------- Button-Shimmer ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg,
    transparent 32%, rgba(255, 255, 255, .38) 47%,
    rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, .38) 53%, transparent 68%);
  transform: translateX(-130%);
  pointer-events: none;
}
.btn:hover::after { animation: shimmer .9s cubic-bezier(.3, 0, .2, 1); }
@keyframes shimmer { to { transform: translateX(130%); } }
/* Auf hellen Buttons ein dunkler Schimmer statt eines weissen */
.btn--quiet::after, .btn--outline::after {
  background: linear-gradient(105deg,
    transparent 32%, rgba(0, 96, 134, .10) 48%,
    rgba(0, 96, 134, .16) 50%, rgba(0, 96, 134, .10) 52%, transparent 68%);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover::after { animation: none; }
}

/* ---------- §3 Leistungs-Band (schraeg, laeuft durch) ---------- */
/* Der Clip-Rahmen ist gerade, nur das Band darin ist gekippt. Sonst wuerden
   die schraegen Ecken die Sections darueber/darunter anschneiden. */
/* Das Band wird so weit hochgezogen, dass seine Unterkante genau auf der
   schraegen Hero-Kante liegt: halbe Cliphoehe + halbe Bandhoehe + halber
   Neigungsversatz. */
.band-clip {
  position: relative; overflow: hidden;
  height: 150px;
  margin-top: calc(-101px - var(--band-halb));
  margin-bottom: calc(-21px + var(--band-halb));
  z-index: 2; pointer-events: none;
}
.band {
  position: absolute; left: -4%; right: -4%; top: 50%;
  transform: translateY(-50%) rotate(var(--band-winkel));
  padding-block: .95rem;
  background: var(--band-grad);
  /* bewusst ohne Schlagschatten: er legte sich als graublauer Schleier auf
     die helle Flaeche unter dem Band */
  overflow: hidden;
}
.band__track {
  display: flex; align-items: center; gap: 2.25rem; width: max-content;
  animation: marquee 38s linear infinite;
}
.band .chip {
  display: inline-flex; align-items: center; gap: .6rem;
  /* 08.08.2026 von .875rem hoch: bei der flacheren Neigung wirkte die alte
     Groesse verloren, das Vorbild faehrt 16,5px. */
  font-family: var(--font-heading); font-size: 1.03rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: #fff; white-space: nowrap;
}
.band .chip svg { width: 20px; height: 20px; flex: none; opacity: .75; }
@media (prefers-reduced-motion: reduce) {
  .band__track { animation: none; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cards (Card-Gesetz) ---------- */
.grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem; align-items: stretch;
}


.card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; height: 100%;
  padding: 2.25rem; background: var(--card);
  border: 1px solid rgba(20, 22, 46, .06); border-radius: 20px;
  box-shadow: none;
}
.section--alt .card { background: var(--card); }
.section--dark .card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .10);
}
/* ---------- Karten-Interaktion ----------
   Anheben mit Schatten. Wichtig: die Karten tragen alle zusaetzlich .reveal,
   und die Reveal-Regeln in Paragraph 3 setzen darauf transform:none mit
   Spezifitaet (0,2,1). Ein blankes .card-lift:hover hat nur (0,2,0) und
   verliert dadurch jedes Mal - der Lift kam bisher nie an. Deshalb steht
   neben dem einfachen Selektor eine Variante mit html-Praefix und .reveal,
   die (0,3,1) erreicht und damit gewinnt. */
.card-lift { transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease; }
.card-lift:hover, html .card-lift.reveal:hover {
  transform: translateY(-10px); box-shadow: var(--shadow-card-hover);
  border-color: rgba(var(--accent-rgb), .25);
}
.section--dark .card.card-lift:hover {
  border-color: rgba(var(--accent-light-rgb), .4); box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .card.card-lift:hover, html .card.card-lift.reveal:hover { transform: none; }
}
/* Grosse Geist-Nummer oben rechts als grafisches Element */
.card__num {
  position: absolute; top: .5rem; right: 1.25rem;
  font-family: var(--font-heading); font-size: 4.75rem; font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
  color: var(--ink); opacity: .07; pointer-events: none;
}
.section--dark .card__num { color: #fff; opacity: .09; }
/* Gefuellte Akzent-Kachel wie in der Referenz */
.card__icon {
  position: relative; z-index: 1;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 13px; margin: 0 0 1.6rem;
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(var(--accent-light-rgb), .5);
}
.card__icon svg { width: 26px; height: 26px; stroke-width: 1.8; }
.section--dark .card__icon { background: var(--accent-light); color: var(--dark-2); }
.card h3 { font-size: 1.32rem; color: var(--ink); position: relative; z-index: 1; }
.card p { position: relative; z-index: 1; }
.card p { margin-top: .85rem; color: var(--muted); font-size: 1rem; line-height: 1.62; }
.card .arrow-link { margin-top: auto; padding-top: 1.4rem; }

/* ---------- Ratgeber-Teaser (Startseite) ----------
   Karte MIT Foto im Hintergrund: das Bild traegt die Flaeche, der Text sitzt
   darauf. Anders als die alte .pf-tile bleibt der Beschreibungstext dauerhaft
   sichtbar (er fuhr dort erst beim Hover auf, auf dem Handy also nie richtig)
   und die Karte hat Rundung, Rahmen und Lift wie die uebrigen Karten. */
.rat-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem;
}
.rat-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 21rem; padding: 1.5rem 1.6rem 1.5rem;
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .1);
  background: var(--dark-2);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
.rat-tile:hover { transform: translateY(-6px); box-shadow: var(--shadow-card-hover); }
.rat-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rat-tile img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.rat-tile:hover img { transform: scale(1.06); }
/* Zwei Verlaeufe: unten dicht fuer die Schrift, oben ein Hauch, damit das
   Kategorie-Label auf hellen Bildern nicht verschwindet. */
.rat-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 22, 32, .55) 0%, rgba(5, 22, 32, .14) 26%,
    rgba(5, 22, 32, .78) 58%, rgba(5, 22, 32, .96) 100%);
}
.rat-tile__tag {
  position: absolute; top: 1.25rem; left: 1.35rem;
  padding: .35rem .75rem; border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
}
.rat-tile__cap strong {
  display: block;
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.22; color: #fff;
}
.rat-tile__cap small {
  display: block; margin-top: .5rem;
  font-size: .93rem; line-height: 1.55; color: rgba(255, 255, 255, .8);
}
.rat-tile__mehr {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem;
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light);
}
.rat-tile__mehr .arr { display: inline-flex; transition: transform .22s ease; }
.rat-tile:hover .rat-tile__mehr .arr { transform: translateX(4px); }

@media (max-width: 1023px) {
  .rat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .rat-grid { grid-template-columns: 1fr; }
  .rat-tile { min-height: 17rem; }
}
@media (prefers-reduced-motion: reduce) {
  .rat-tile:hover { transform: none; }
  .rat-tile:hover img { transform: none; }
}

/* ---------- Ratgeber-Hub: Sidebar + Artikelliste ----------
   Nur auf ratgeber/index.html. Links steht die Navigation durch den Bestand
   (Suche, Themen, Beratungs-Karte) und laeuft ab 1024px sticky mit, rechts
   der hervorgehobene Artikel plus die Liste. Filter und Suche sitzen in einem
   Inline-Skript auf der Seite - sie betreffen nur diese eine Seite und haben
   in der site-weiten main.js nichts verloren. */
.rh-body__wrap {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start;
}
@media (min-width: 1024px) {
  .rh-body__wrap { grid-template-columns: 300px minmax(0, 1fr); gap: 3rem; }
}

.rh-side { display: flex; flex-direction: column; gap: 1.25rem; }
/* Erst ab der zweispaltigen Ansicht sticky - darunter steht die Spalte
   ueber den Artikeln und haette nichts zum Mitlaufen. */
@media (min-width: 1024px) {
  .rh-side { position: sticky; top: calc(var(--nav-h) + 1.5rem); align-self: start; }
}

.rh-search { position: relative; }
.rh-search input {
  width: 100%; padding: .85rem 1rem .85rem 2.7rem;
  border-radius: 12px; border: 1px solid var(--border); background: var(--card);
  font-family: var(--font-body); font-size: .93rem; color: var(--ink);
  outline: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.rh-search input::placeholder { color: rgba(107, 102, 96, .75); }
.rh-search input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
.rh-search__ic {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: rgba(107, 102, 96, .8); pointer-events: none; display: flex;
}

.rh-topics {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.1rem 1rem 1.15rem;
  box-shadow: var(--shadow-card);
}
/* Doppelte Klasse mit Absicht: `.section h2` setzt sonst seine 3,5rem durch
   und aus der Themen-Ueberschrift wird eine Schlagzeile. */
.rh-topics .rh-topics__h {
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700;
  line-height: 1.2; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 .35rem .85rem; border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}
.rh-topic {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; padding: .6rem .8rem; border: 0; border-radius: 10px;
  background: transparent; text-align: left; cursor: pointer;
  font-family: var(--font-heading); font-size: .93rem; font-weight: 600;
  color: var(--ink); transition: background .15s ease, color .15s ease;
}
.rh-topic__count {
  flex: none; padding: .15rem .55rem; border-radius: 999px;
  background: rgba(20, 22, 46, .06); color: var(--muted);
  font-size: .75rem; font-weight: 700;
  transition: background .15s ease, color .15s ease;
}
.rh-topic:hover { background: var(--accent-subtle); color: var(--accent); }
.rh-topic:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rh-topic.is-on { background: var(--accent-grad); color: #fff; }
.rh-topic.is-on .rh-topic__count { background: rgba(255, 255, 255, .22); color: #fff; }

.rh-sidecta {
  position: relative; overflow: hidden;
  padding: 1.5rem 1.4rem 1.6rem; border-radius: 16px;
  background: linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 72%);
  border: 1px solid rgba(255, 255, 255, .1); color: #fff;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .55);
}
.rh-sidecta::after {
  content: ""; position: absolute; top: -50%; right: -30%;
  width: 220px; height: 220px; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-light-rgb), .22) 0%, transparent 70%);
}
.rh-sidecta > * { position: relative; }
.rh-sidecta__eyebrow {
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent-light);
  margin-bottom: .55rem;
}
.rh-sidecta__t {
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
  line-height: 1.22; letter-spacing: -.02em; margin-bottom: .5rem;
}
.rh-sidecta__s {
  font-size: .87rem; line-height: 1.55; color: var(--dark-text); margin-bottom: 1.1rem;
}
.rh-sidecta__btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.2rem; border-radius: 999px;
  background: var(--accent-grad); color: #fff;
  font-family: var(--font-heading); font-size: .87rem; font-weight: 700;
  transition: transform .25s ease;
}
.rh-sidecta__btn:hover { transform: translateY(-2px); }

/* Hervorgehobener Artikel */
.rh-feat {
  display: block; position: relative; overflow: hidden; border-radius: 16px;
  box-shadow: var(--shadow-card-hover);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
}
.rh-feat:hover { transform: translateY(-4px); }
.rh-feat:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rh-feat__img {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.rh-feat:hover .rh-feat__img { transform: scale(1.04); }
.rh-feat__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 22, 32, .35) 0%, rgba(5, 22, 32, .06) 30%,
    rgba(5, 22, 32, .72) 72%, rgba(5, 22, 32, .95) 100%);
}
.rh-feat__pill {
  position: absolute; top: 1.25rem; left: 1.35rem;
  padding: .35rem .8rem; border-radius: 8px;
  background: var(--accent-grad); color: #fff;
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.rh-feat__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.6rem 1.6rem; color: #fff;
}
@media (min-width: 768px) { .rh-feat__body { padding: 2rem 2.2rem 2.2rem; } }
.rh-feat__t {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15;
  letter-spacing: -.02em; margin-bottom: .6rem; max-width: 24ch;
}
.rh-feat__s {
  font-size: .93rem; line-height: 1.55; color: rgba(255, 255, 255, .82);
  max-width: 46ch; margin-bottom: 1rem;
}
.rh-feat__more {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent-light);
}
.rh-feat__more .arr { display: inline-flex; transition: transform .22s ease; }
.rh-feat:hover .rh-feat__more .arr { transform: translateX(4px); }

/* Artikelliste: Bild links, Text rechts */
.rh-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.5rem; }
.rh-card {
  display: flex; align-items: stretch; min-height: 150px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1),
              box-shadow .3s ease, border-color .3s ease;
}
.rh-card:hover {
  transform: translateY(-3px); border-color: rgba(var(--accent-rgb), .35);
  box-shadow: var(--shadow-card-hover);
}
.rh-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.rh-card__imgwrap {
  position: relative; flex: none; width: 30%; max-width: 240px; min-width: 130px;
  overflow: hidden;
}
.rh-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.rh-card:hover .rh-card__img { transform: scale(1.05); }
.rh-card__cat {
  position: absolute; top: .7rem; left: .7rem;
  padding: .28rem .6rem; border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-heading); font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.rh-card__body {
  flex: 1; min-width: 0; padding: 1.25rem 1.45rem;
  display: flex; flex-direction: column; justify-content: center;
}
.rh-card__t {
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
  line-height: 1.22; letter-spacing: -.02em; color: var(--ink); margin-bottom: .45rem;
}
.rh-card__s {
  font-size: .9rem; line-height: 1.55; color: var(--muted); margin-bottom: .7rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rh-card__more {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-heading); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.rh-card__more .arr { display: inline-flex; transition: transform .22s ease; }
.rh-card:hover .rh-card__more .arr { transform: translateX(3px); }

/* Gefiltert steht nur noch eine Handvoll Karten da - dann bekommen sie das
   grosse Format des hervorgehobenen Artikels, sonst wirkt die Spalte leer. */
.rh-grid.is-gefiltert { gap: 1.5rem; }
.rh-grid.is-gefiltert .rh-card {
  display: block; position: relative; min-height: 0; border: 0;
  box-shadow: var(--shadow-card-hover);
}
.rh-grid.is-gefiltert .rh-card__imgwrap {
  width: 100%; max-width: none; aspect-ratio: 16 / 9;
}
.rh-grid.is-gefiltert .rh-card__imgwrap::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 22, 32, .35) 0%, rgba(5, 22, 32, .06) 30%,
    rgba(5, 22, 32, .72) 72%, rgba(5, 22, 32, .95) 100%);
}
.rh-grid.is-gefiltert .rh-card__cat {
  z-index: 2; top: 1.25rem; left: 1.35rem; padding: .35rem .8rem;
  background: var(--accent-grad); color: #fff; font-size: .68rem;
}
.rh-grid.is-gefiltert .rh-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1.5rem 1.6rem 1.6rem; justify-content: flex-end; color: #fff;
}
@media (min-width: 768px) {
  .rh-grid.is-gefiltert .rh-card__body { padding: 2rem 2.2rem 2.2rem; }
}
.rh-grid.is-gefiltert .rh-card__t {
  font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.15; color: #fff;
  margin-bottom: .6rem;
}
.rh-grid.is-gefiltert .rh-card__s {
  display: block; -webkit-line-clamp: unset; overflow: visible;
  font-size: .93rem; color: rgba(255, 255, 255, .82); max-width: 46ch; margin-bottom: 1rem;
}
.rh-grid.is-gefiltert .rh-card__more { color: var(--accent-light); font-size: .82rem; }

.rh-leer {
  display: none; margin-top: 1.25rem; padding: 2rem; text-align: center;
  border: 1px dashed rgba(20, 22, 46, .18); border-radius: 16px;
  background: rgba(255, 255, 255, .7); color: var(--muted); font-size: .93rem;
}
.rh-leer.is-an { display: block; }

/* Einspaltig stuende die komplette Seitenspalte vor den Artikeln: Suchfeld,
   sieben Themenzeilen und die Beratungskarte fuellen am Handy den ganzen
   ersten Bildschirm, der erste Artikel begaenne erst nach rund 1600px. Also
   loesen wir die Spalte auf (display:contents) und ordnen ihre drei Teile neu:
   Suche und Themen bleiben oben, aber die Themen laufen als eine scrollbare
   Chip-Reihe; die Beratungskarte rutscht hinter die Artikel, wo sie als
   Abschluss steht statt als Huerde. */
@media (max-width: 1023px) {
  .rh-side { display: contents; }
  .rh-search   { order: 1; }
  .rh-topics   { order: 2; }
  .rh-articles { order: 3; }
  .rh-sidecta  { order: 4; }

  .rh-body__wrap { gap: 1.25rem; }

  .rh-topics {
    display: flex; gap: .5rem; padding: .7rem;
    overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    /* Anschnitt rechts zeigt, dass die Reihe weitergeht. */
    scroll-padding-inline: .7rem;
  }
  .rh-topics::-webkit-scrollbar { display: none; }
  .rh-topics .rh-topics__h { display: none; }
  .rh-topic {
    flex: none; width: auto; gap: .45rem;
    padding: .5rem .9rem; border-radius: 999px;
    background: var(--surface-alt); white-space: nowrap;
  }
  .rh-topic.is-on { background: var(--accent-grad); }
  .rh-topic__count { background: rgba(20, 22, 46, .09); }
}

/* Text IM Bild geht am Handy nicht auf: bei 375px ist die 16:9-Flaeche rund
   211px hoch, Titel plus Beschreibung plus Link brauchen aber ueber 250px -
   der Text lief oben aus dem Bild heraus und ueber das Empfohlen-Label. Ab
   hier steht er darum unter dem Bild auf dunklem Grund; der Verlauf im Bild
   wird dadurch ueberfluessig. Gilt genauso fuer die gefilterte Grossansicht. */
@media (max-width: 639px) {
  .rh-feat__veil,
  .rh-grid.is-gefiltert .rh-card__imgwrap::after { display: none; }
  .rh-feat__body,
  .rh-grid.is-gefiltert .rh-card__body {
    position: static; background: var(--dark-2);
    padding: 1.25rem 1.3rem 1.4rem;
  }
  .rh-feat__t,
  .rh-grid.is-gefiltert .rh-card__t { font-size: 1.35rem; max-width: none; }
  .rh-feat__s,
  .rh-grid.is-gefiltert .rh-card__s { font-size: .9rem; max-width: none; }
}

/* Unter 560px wird das Bild links zu schmal fuer ein erkennbares Motiv -
   ab da stapelt die Karte. */
@media (max-width: 559px) {
  .rh-card { display: block; }
  .rh-card__imgwrap { width: 100%; max-width: none; aspect-ratio: 16 / 9; }
  .rh-card__body { padding: 1.1rem 1.2rem 1.25rem; }
  /* Drei Zeilen statt zwei: bei schmaler Spalte reisst der Zweizeiler die
     Beschreibung sonst mitten im Wort ab. */
  .rh-card__s { -webkit-line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-feat:hover, .rh-card:hover { transform: none; }
  .rh-feat:hover .rh-feat__img, .rh-card:hover .rh-card__img { transform: none; }
}

/* dunkle Card-Variante */
.section--dark .card { background: transparent; box-shadow: none; }
.section--dark .card h3 { color: var(--dark-text-strong); }
.section--dark .card p { color: var(--dark-text); }
.section--dark .card__num { color: var(--dark-text-muted); }

/* ---------- Form-Section ---------- */
/* Etwas mehr Gewicht auf der Karte als auf dem Text: die Auswahlkacheln
   brauchen die Breite, die Textspalte kommt mit weniger aus. */
.formsec__grid {
  display: grid; grid-template-columns: .88fr 1.12fr; gap: 3.5rem; align-items: center;
}

/* ---------- Anfrage-Section: linke Spalte ----------
   Kurze Headline, ein Satz, Belege. Die Argumente stehen als Haken-Liste
   statt als Fliesstext - vor einem Formular liest niemand einen Absatz. */
.anfrage-intro h2 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.08; }
.anfrage-intro__sub {
  margin-top: 1.1rem; max-width: 28rem;
  font-size: 1.075rem; line-height: 1.6; color: var(--muted);
}
.vorteile { margin-top: 1.9rem; display: grid; gap: .85rem; list-style: none; }
.vorteile li {
  display: flex; align-items: center; gap: .85rem;
  font-size: 1.02rem; color: var(--ink);
}
.vorteile__ic {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(var(--accent-rgb), .12); color: var(--accent);
}
.vorteile__ic svg { width: 13px; height: 13px; }

/* Google-Beleg als helle Karte - das Gegenstueck zur Glas-Pille im Hero */
.gpill {
  display: inline-flex; align-items: center; gap: .7rem;
  margin-top: 2rem; padding: .7rem 1.15rem .7rem .8rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 34px -26px rgba(20, 22, 46, .5);
}
.gpill__g { width: 26px; height: 26px; flex: none; }
.gpill .stars { display: inline-flex; gap: 1px; color: #FBBC04; }
.gpill .stars svg { width: 15px; height: 15px; }
.gpill__tx { font-size: .92rem; color: var(--muted); white-space: nowrap; }
.gpill__tx b {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.02rem; color: var(--ink);
}

/* Vertraulichkeits-Zeile unter der Karte, bewusst ausserhalb des Kastens */
.anfrage-hinweis {
  margin-top: 1.1rem; text-align: center;
  font-size: .875rem; color: var(--muted);
}
.anfrage-hinweis a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Anfrage-Section auf dunklem Petrol ----------
   Die weisse Formularkarte bleibt wie sie ist und traegt die Sektion.
   Die linke Textspalte dreht auf die Dunkel-Tokens: Haken-Icons und Links
   auf --accent-light, weil --accent auf dunklem Grund zu wenig Kontrast hat.
   Der Google-Beleg wird von der weissen Karte zur Glas-Pille (wie im Hero) -
   eine zweite weisse Karte neben der Formularkarte teilt den Blick. */
.section--dark .anfrage-intro__sub { color: var(--dark-text); }
.section--dark .vorteile li { color: var(--dark-text-strong); }
.section--dark .vorteile__ic {
  background: rgba(var(--accent-light-rgb), .18); color: var(--accent-light);
}
.section--dark .gpill {
  background: var(--dark-card); border-color: var(--dark-border);
  box-shadow: none;
}
.section--dark .gpill__tx { color: var(--dark-text); }
.section--dark .gpill__tx b { color: var(--dark-text-strong); }
.section--dark .anfrage-hinweis { color: var(--dark-text-muted); }
.section--dark .anfrage-hinweis a { color: var(--accent-light); }

@media (max-width: 767px) {
  .vorteile li { font-size: .96rem; }
  .gpill { gap: .55rem; padding: .6rem .9rem .6rem .7rem; }
  .gpill__tx { white-space: normal; }
}


/* Einleitungssatz der Formular-Section. Eigene Klasse statt inline-style,
   damit die dunkle Variante der Section die Textfarbe drehen kann. */
.formsec__lead { margin-top: 1.2rem; color: var(--muted); max-width: 30rem; }
.section--dark .formsec__lead { color: var(--dark-text); }

/* "Lieber direkt sprechen": glossy-schwarze Glas-Karte */
.formsec__aside {
  position: relative; overflow: hidden;
  margin-top: 2rem; padding: 1.2rem 1.5rem 1.25rem;
  background: linear-gradient(165deg, #23242C 0%, #0C0D12 52%, #15171F 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px; display: inline-flex; flex-direction: column;
  box-shadow: 0 24px 44px -24px rgba(10, 11, 20, .55),
              inset 0 1px 0 rgba(255, 255, 255, .14);
}
/* Glanzlicht in der oberen Haelfte macht das Schwarz glossy */
.formsec__aside::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 52%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1), transparent);
  pointer-events: none;
}
.formsec__aside .lbl {
  font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: rgba(255, 255, 255, .55);
}
.formsec__aside .tel {
  display: inline-flex; align-items: center; gap: .55rem; margin-top: .35rem;
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700;
  color: #fff;
}
.formsec__aside .tel svg { color: var(--accent-light); }
.formsec__aside .tel:hover { color: var(--accent-light); }
.formsec__aside .note { margin-top: .3rem; font-size: .85rem; color: rgba(255, 255, 255, .5); }

/* Form-Card + Multi-Step */
/* Die Karte soll sichtbar ueber der Flaeche schweben, so wie in der
   Referenz - vorher lag sie flach ohne Schatten auf dem Creme-Ton. */
.formcard {
  background: var(--card); border: 1px solid rgba(20, 22, 46, .07);
  border-radius: 24px; padding: 2.4rem 2.3rem 2.3rem;
  box-shadow: 0 40px 70px -40px rgba(20, 22, 46, .45),
              0 4px 14px -8px rgba(20, 22, 46, .12);
}
.formcard h3 { font-size: 1.5rem; text-align: center; margin-bottom: 1.6rem; }
/* Die Karte ist eine weisse Insel, auch wenn die Section drumherum dunkel ist.
   Ohne das faerbt ".section--dark h3" die Ueberschrift weiss auf Weiss - sie
   war dadurch komplett unsichtbar. Gilt fuer Startseite, Hub und Ortsseiten. */
.section--dark .formcard { color: var(--ink); }
.section--dark .formcard h3 { color: var(--ink); }
/* Nummerierter Stepper: Kreis je Schritt, Verbindungslinie dazwischen.
   Drei Zustaende, die main.js ueber zwei Klassen setzt:
     .done + .erledigt    = abgeschlossen (Haken)
     .done ohne .erledigt = aktueller Schritt (Punkt)
     keine Klasse         = offen (Ziffer) */
/* ACHTUNG Namenskonflikt: ".steps" gibt es ein zweites Mal weiter unten fuer
   die Ablauf-Karten (Grid mit vier Spalten). Weil die spaeter im Dokument
   steht und gleich stark ist, hat sie diesen Stepper in ihr Vierer-Raster
   gezwungen - die drei Kreise sassen dann in den Spalten 1 bis 3 und die
   vierte blieb leer. Deshalb hier mit ".formcard" davor, das ist staerker. */
.formcard .steps {
  display: flex; align-items: flex-start; gap: 0;
  grid-template-columns: none;
  margin-bottom: 1.9rem; list-style: none;
}
.steps__item {
  flex: 1; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
/* Zwei Bahnen auf Hoehe der Kreismitte: ::before ist die graue Schiene,
   ::after die Akzentfuellung, die beim Weitergehen aufzieht. */
.steps__item:not(:last-child)::before,
.steps__item:not(:last-child)::after {
  content: ""; position: absolute; top: 17px; left: calc(50% + 22px);
  height: 2px; border-radius: 2px;
}
.steps__item:not(:last-child)::before {
  width: calc(100% - 44px); background: var(--border);
}
.steps__item:not(:last-child)::after {
  width: 0; background: var(--accent);
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
.steps__item.erledigt:not(:last-child)::after { width: calc(100% - 44px); }

.steps__dot {
  position: relative;
  width: 34px; height: 34px; flex: none; padding: 0;
  border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--border);
  color: var(--muted); cursor: pointer;
  transition: background .3s ease, color .3s ease, border-color .3s ease,
              box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.steps__dot:disabled { cursor: default; }
.steps__dot:not(:disabled):hover { transform: scale(1.08); }
.steps__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.steps__item.done .steps__dot {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .8);
}
/* Ziffer, Punkt und Haken liegen uebereinander und werden ueberblendet */
.steps__num, .steps__pip, .steps__check {
  position: absolute; inset: 0; margin: auto;
  transition: opacity .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.steps__num {
  display: grid; place-items: center;
  font-family: var(--font-heading); font-size: .9rem; font-weight: 700;
}
.steps__pip {
  width: 11px; height: 11px; border-radius: 50%;
  background: #fff; opacity: 0; transform: scale(.4);
}
.steps__check { width: 17px; height: 17px; opacity: 0; transform: scale(.6); }
.steps__check path { stroke-dasharray: 24; stroke-dashoffset: 24; }
/* Aktueller Schritt: Ziffer raus, Punkt rein */
.steps__item.done:not(.erledigt) .steps__num { opacity: 0; transform: scale(.5); }
.steps__item.done:not(.erledigt) .steps__pip { opacity: 1; transform: scale(1); }
/* Abgeschlossen: der Haken zeichnet sich einmal */
.steps__item.erledigt .steps__num { opacity: 0; transform: scale(.5); }
.steps__item.erledigt .steps__check { opacity: 1; transform: scale(1); }
.steps__item.erledigt .steps__check path { animation: hakenZeichnen .35s .1s ease-out forwards; }
@keyframes hakenZeichnen { to { stroke-dashoffset: 0; } }

.steps__lbl {
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .11em; color: var(--muted);
  text-align: center; transition: color .3s ease;
}
.steps__item.done .steps__lbl { color: var(--ink); }

/* Frage-Kopf ueber der Auswahl */
/* Zentriert wie Kartentitel und Stepper darueber. Vorher stand die Frage
   linksbuendig unter zwei mittig gesetzten Elementen - das las sich wie ein
   Versehen. Die Auswahlkacheln bleiben linksbuendig, dort fuehrt der Blick
   an einer Kante entlang. */
.fq { margin-bottom: 1.15rem; text-align: center; }
.fq h4 {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--ink); line-height: 1.25;
}
.fq p { margin-top: .25rem; font-size: .9rem; color: var(--muted); }

/* Schritt-Buehne: die Hoehe fahert main.js auf den aktiven Schritt, die
   Schritte selbst liegen uebereinander und werden seitlich durchgeschoben. */
.fsteps {
  position: relative; overflow: hidden;
  transition: height .42s cubic-bezier(.22, 1, .36, 1);
}
.fstep {
  position: absolute; top: 0; left: 0; right: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s ease,
              transform .4s cubic-bezier(.22, 1, .36, 1),
              visibility .4s step-end;
}
.fstep.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none; transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1),
              visibility 0s;
}
/* Startpunkte fuer den Einlauf und Ziele fuer den Auslauf. Stehen bewusst
   NACH .active, damit sie im Moment des Umschaltens gewinnen. */
.fstep.von-rechts { transform: translateX(42px); opacity: 0; }
.fstep.von-links  { transform: translateX(-42px); opacity: 0; }
.fstep.raus-links  { transform: translateX(-42px); opacity: 0; visibility: visible; }
.fstep.raus-rechts { transform: translateX(42px); opacity: 0; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .fsteps, .fstep { transition: opacity .2s ease; }
  .fstep.von-rechts, .fstep.von-links,
  .fstep.raus-links, .fstep.raus-rechts { transform: none; }
}
.field { margin-bottom: 1.1rem; }
.field > label, .field .flabel {
  display: block; font-size: .875rem; font-weight: 600; margin-bottom: .45rem;
}
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field select, .field textarea {
  width: 100%; padding: .85rem 1rem; min-height: 52px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 0; font-size: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12);
}
.field select { appearance: none; background-image: none; cursor: pointer; }


/* Auswahl als Kacheln: Icon oben links, Markierung oben rechts, Text unten.
   Man sieht auf einen Blick, was zur Wahl steht, statt eine Liste zu lesen. */
/* Vier Optionen stehen als 2x2 ruhiger als 3+1, die sieben Leistungen
   brauchen dagegen drei Spalten, sonst wird die Karte zu hoch. */
/* minmax(0, 1fr) statt 1fr: sonst ist die Mindestbreite einer Spalte das
   laengste Wort ("Fassadenreinigung") und die Kacheln laufen aus der Karte. */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.choices--kompakt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Kompakte, horizontale Auswahl-Reihen: Icon-Chip links, Label, Haken rechts.
   Die Auswahl reagiert spuerbar (Lift, Tuerkis-Flaeche, springender Haken). */
/* Kachel-Anatomie wie in der Referenz: Icon oben links, Auswahlkreis oben
   rechts, Beschriftung darunter ueber die volle Kachelbreite. Dadurch hat das
   Label eine ganze Zeile fuer sich - bei Woertern wie
   "Glas- und Fassadenreinigung" ist das der Unterschied zwischen zwei und
   vier Zeilen. Die Reihenfolge im HTML bleibt unveraendert, die Positionen
   kommen ueber grid-template-areas. */
.choice {
  position: relative; cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "ic   mark"
    "txt  txt";
  align-items: start; gap: .95rem .5rem;
  padding: 1rem 1.05rem 1.05rem;
  -webkit-tap-highlight-color: transparent;
}
/* Nicht auf 0x0 schrumpfen: der Browser braucht eine echte Flaeche, um die
   Validierungsmeldung daran zu verankern. Unsichtbar, aber vorhanden. */
.choice input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; margin: 0; appearance: none;
}
.choice__ic,
.choice__mark,
.choice__txt {
  position: relative; z-index: 1;
}
/* Die Kachelflaeche selbst - als Pseudo-Element, damit die Spans frei
   darauf liegen koennen */
.choice::before {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid var(--border); border-radius: 14px;
  background: var(--card);
  transition: border-color .22s ease, background .22s ease,
              box-shadow .22s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.choice__ic {
  grid-area: ic;
  width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 11px;
  background: rgba(var(--accent-rgb), .08); color: var(--accent);
  transition: background .22s ease, color .22s ease,
              transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.choice__ic svg { width: 19px; height: 19px; }
.choice__txt {
  grid-area: txt; min-width: 0;
  font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
  line-height: 1.28; color: var(--ink);
}
.choice__mark {
  grid-area: mark; justify-self: end; margin-top: .2rem;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--border);
  display: grid; place-items: center;
  transition: border-color .22s ease, background .22s ease;
}
/* Haken, springt bei Auswahl rein */
.choice__mark::after {
  content: ""; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
/* Checkbox-Varianten bekommen ein Quadrat statt eines Kreises */
.choice input[type="checkbox"] ~ .choice__mark { border-radius: 7px; }
.choice:hover::before {
  border-color: rgba(var(--accent-rgb), .45);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -14px rgba(var(--accent-rgb), .4);
}
.choice:hover .choice__ic { background: rgba(var(--accent-rgb), .14); }
.choice:active::before { transform: scale(.982); }
/* .is-checked kommt aus main.js (initChoiceState) */
.choice.is-checked::before {
  border-color: var(--accent);
  background: linear-gradient(135deg, rgba(var(--accent-rgb), .10) 0%, rgba(var(--accent-rgb), .03) 100%);
  box-shadow: 0 0 0 1px var(--accent), 0 12px 26px -16px rgba(var(--accent-rgb), .5);
}
.choice.is-checked .choice__ic {
  background: var(--accent); color: #fff;
  transform: scale(1.07) rotate(-4deg);
}
.choice.is-checked .choice__mark { border-color: var(--accent); background: var(--accent); }
.choice.is-checked .choice__mark::after { transform: scale(1); }
.choice input:focus-visible ~ .choice__mark {
  outline: 3px solid var(--accent-light); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .choice:hover::before, .choice:active::before { transform: none; }
  .choice.is-checked .choice__ic { transform: none; }
  .choice__mark::after { transition: none; }
}

.consent {
  display: flex; align-items: flex-start; gap: .7rem;
  margin: 1.25rem 0; font-size: .875rem; line-height: 1.5; color: var(--muted);
}
.consent input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--accent); }
.consent a { color: var(--accent); text-decoration: underline; }

/* Weiter sitzt rechts, Zurueck bleibt links stehen */
.fnav { display: flex; gap: .7rem; margin-top: 1.4rem; justify-content: flex-end; }
.fnav [data-prev] { margin-right: auto; }
.fnav .btn { border-radius: 7px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fmsg { display: none; padding: 1.25rem; border-radius: 12px; margin-top: 1rem; }
.fmsg.show { display: block; }
/* ---------- Danke-Zustand mit Konfetti ---------- */
.fmsg--ok {
  position: relative; overflow: hidden; text-align: center;
  padding: 2.5rem 1.5rem 2.75rem;
  background: linear-gradient(165deg, #fff 0%, rgba(var(--accent-rgb), .06) 100%);
  border: 1px solid rgba(var(--accent-rgb), .18);
}
.fmsg--ok.show { animation: dankeRein .55s cubic-bezier(.22, 1, .36, 1); }
@keyframes dankeRein {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.danke__haken {
  width: 68px; height: 68px; margin: 0 auto 1.25rem;
  display: grid; place-items: center; border-radius: 999px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  box-shadow: 0 14px 30px -12px rgba(var(--accent-rgb), .6);
  animation: hakenPop .6s cubic-bezier(.34, 1.56, .64, 1) .1s both;
}
@keyframes hakenPop {
  0%   { transform: scale(0) rotate(-25deg); }
  60%  { transform: scale(1.12) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.danke__haken svg { width: 34px; height: 34px; color: #fff; }
.danke__haken svg path {
  stroke-dasharray: 30; stroke-dashoffset: 30;
  animation: hakenZeichnen .45s cubic-bezier(.4, 0, .2, 1) .45s forwards;
}
@keyframes hakenZeichnen { to { stroke-dashoffset: 0; } }

.fmsg--ok strong {
  display: block; font-family: var(--font-heading);
  font-size: 1.45rem; color: var(--ink); margin-bottom: .6rem;
  animation: dankeRein .5s cubic-bezier(.22,1,.36,1) .3s both;
}
.fmsg--ok .danke__text {
  color: var(--muted); max-width: 26rem; margin-inline: auto;
  animation: dankeRein .5s cubic-bezier(.22,1,.36,1) .42s both;
}

/* Konfetti: 14 Schnipsel, rein aus CSS */
.konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.konfetti i {
  position: absolute; top: -12%; width: 9px; height: 14px; border-radius: 2px;
  opacity: 0; animation: fallen 2.4s cubic-bezier(.3, .6, .5, 1) forwards;
}
.fmsg--ok.show .konfetti i { animation-play-state: running; }
@keyframes fallen {
  0%   { opacity: 0; transform: translateY(-20px) rotate(0) scale(.8); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(360px) rotate(620deg) scale(1); }
}
.konfetti i:nth-child(1)  { left: 6%;  background: #006086; animation-delay: .15s; }
.konfetti i:nth-child(2)  { left: 14%; background: #48A8E8; animation-delay: .42s; }
.konfetti i:nth-child(3)  { left: 22%; background: #FBBC04; animation-delay: .06s; }
.konfetti i:nth-child(4)  { left: 30%; background: #16A34A; animation-delay: .56s; }
.konfetti i:nth-child(5)  { left: 38%; background: #006086; animation-delay: .28s; }
.konfetti i:nth-child(6)  { left: 46%; background: #48A8E8; animation-delay: .68s; }
.konfetti i:nth-child(7)  { left: 54%; background: #FBBC04; animation-delay: .2s; }
.konfetti i:nth-child(8)  { left: 62%; background: #16A34A; animation-delay: .5s; }
.konfetti i:nth-child(9)  { left: 70%; background: #006086; animation-delay: .1s; }
.konfetti i:nth-child(10) { left: 78%; background: #48A8E8; animation-delay: .62s; }
.konfetti i:nth-child(11) { left: 86%; background: #FBBC04; animation-delay: .34s; }
.konfetti i:nth-child(12) { left: 93%; background: #16A34A; animation-delay: .74s; }
.konfetti i:nth-child(13) { left: 10%; background: #48A8E8; animation-delay: .82s; }
.konfetti i:nth-child(14) { left: 66%; background: #006086; animation-delay: .9s; }

@media (prefers-reduced-motion: reduce) {
  .fmsg--ok.show, .danke__haken, .fmsg--ok strong, .fmsg--ok .danke__text { animation: none; }
  .danke__haken svg path { stroke-dashoffset: 0; animation: none; }
  .konfetti { display: none; }
}
.fmsg--err { background: #FEF2F2; border: 1px solid #FCA5A5; color: #991B1B; }
.fmsg--demo { background: var(--surface-alt); border: 1px solid var(--border); color: var(--muted); }

/* ---------- Schwebender WhatsApp-Button ---------- */
/* WhatsApp-Knopf in der Beratungs-Section: vollflaechig gruen, damit er neben
   dem blauen Primaerknopf sofort als der andere Weg gelesen wird. Der Verlauf
   ist absichtlich dunkler als das Marken-Gruen #25D366 - auf dem haette weisse
   Schrift nur 2,1:1 Kontrast. Der hellste Stopp liegt bei 4,7:1, damit die
   Schrift ueber der ganzen Flaeche lesbar bleibt. Das helle Marken-Gruen
   steckt stattdessen im Schlagschatten und im Hover. */
.btn--wa {
  background: linear-gradient(135deg, #0B8541 0%, #077A3A 52%, #05602D 100%);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(37, 211, 102, .6),
              inset 0 -1px 0 rgba(37, 211, 102, .5);
}
.btn--wa:hover {
  background: #0A7A3B; transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(37, 211, 102, .38);
}
.btn--wa:focus-visible { outline: 2px solid #0B8541; outline-offset: 3px; }

.wa-btn {
  position: fixed; right: 1.1rem; bottom: calc(1.1rem + env(safe-area-inset-bottom));
  z-index: 250;
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25D366; color: #fff;
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .45);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s ease;
}
.wa-btn svg { width: 37px; height: 37px; }
.wa-btn:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, .5);
}
/* Am Desktop deutlich groesser und mit einem Signal-Ring, damit der Knopf in
   der leeren rechten Ecke ueberhaupt auffaellt. Der Ring ist ein ::before
   hinter dem Knopf, das alle paar Sekunden nach aussen laeuft - eine Dauer-
   animation waere Zappeln, deshalb 3,2s Takt mit langer Pause darin. Am Handy
   bleibt der Knopf klein und ruhig, dort liegt er ohnehin im Daumenbereich. */
@media (min-width: 768px) {
  .wa-btn { width: 84px; height: 84px; right: 1.6rem; bottom: 1.6rem; }
  .wa-btn svg { width: 46px; height: 46px; }
  .wa-btn::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: #25D366; z-index: -1;
    animation: wa-signal 3.2s cubic-bezier(.22, 1, .36, 1) infinite;
  }
  .wa-btn:hover { transform: translateY(-3px) scale(1.08); }
  .wa-btn:hover::before { animation-play-state: paused; }
}
@keyframes wa-signal {
  0%        { transform: scale(1);   opacity: .55; }
  55%, 100% { transform: scale(1.9); opacity: 0; }
}
@media (max-width: 767px) {
  .wa-btn { width: 62px; height: 62px; right: .9rem; }
  .wa-btn svg { width: 34px; height: 34px; }
}
/* Bei offenem Mobilmenue aus dem Weg: der Knopf liegt mit z-index 250 ueber
   dem Menue (200) und deckt sonst die untere rechte Ecke der Liste zu. */
.mnav.open ~ .wa-btn { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .wa-btn:hover { transform: none; }
  .wa-btn::before { animation: none; opacity: 0; }
}

/* ---------- Danke-Fenster (Modal nach Formular-Abschluss) ---------- */
.dankem {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: grid; place-items: center; padding: 1.25rem;
}
.dankem[hidden] { display: none; }
.dankem__backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 18, .62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: dankemBlende .35s ease both;
}
@keyframes dankemBlende { from { opacity: 0; } }
.dankem__card {
  /* Nicht width:100% - im zentrierenden Grid loest sich die Prozentbreite
     zirkulaer auf und die Karte schrumpft auf Inhaltsbreite. */
  position: relative; width: min(calc(100vw - 2.5rem), 26rem);
  text-align: center;
  background: var(--card); border-radius: 22px;
  padding: 2.75rem 2rem 2.25rem;
  box-shadow: 0 40px 90px -30px rgba(8, 8, 20, .7);
  animation: dankemRein .5s cubic-bezier(.22, 1.2, .36, 1) both;
}
@keyframes dankemRein {
  from { opacity: 0; transform: translateY(26px) scale(.92); }
}
.dankem__close {
  position: absolute; top: .9rem; right: .9rem;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(20, 22, 46, .06); color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.dankem__close:hover { background: rgba(20, 22, 46, .12); color: var(--ink); }
.dankem__badge {
  display: grid; place-items: center;
  width: 84px; height: 84px; margin: 0 auto 1.4rem;
  border-radius: 50%;
  background: rgba(var(--accent-light-rgb), .12);
}
.dankem__badge svg { width: 58px; height: 58px; }
/* Ring und Haken zeichnen sich nacheinander (stroke-dash-Trick). Die
   Animationen starten automatisch neu, sobald das Fenster eingeblendet wird,
   weil das Element dann von display:none zurueckkommt. */
.dankem__ring {
  stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: dankemZeichnen .7s ease-out .15s forwards;
}
.dankem__tick {
  stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34;
  animation: dankemZeichnen .45s cubic-bezier(.65, 0, .45, 1) .8s forwards;
}
@keyframes dankemZeichnen { to { stroke-dashoffset: 0; } }
.dankem__card h3 { font-size: 1.6rem; }
.dankem__card p { margin-top: .8rem; color: var(--muted); line-height: 1.6; }
.dankem__note { font-size: .92rem; }
.dankem__note a { color: var(--accent); font-weight: 700; }
.dankem__ok {
  margin-top: 1.5rem; width: 100%; justify-content: center;
  background: var(--band-grad);
}
.dankem__ok:hover { background: var(--band-grad); filter: brightness(1.12); }
@media (prefers-reduced-motion: reduce) {
  .dankem__backdrop, .dankem__card { animation: none; }
  .dankem__ring, .dankem__tick { animation: none; stroke-dashoffset: 0; }
}
.fmsg strong { display: block; font-family: var(--font-heading); margin-bottom: .3rem; }

/* Meldungen in der dunklen Kontaktkarte: die hellen Standardflaechen waeren
   dort ein Fremdkoerper. */
.kf .fmsg--demo,
.fmsg--auf-dunkel {
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--dark-border);
  color: var(--dark-text);
  border-radius: 12px;
}
.kf .fmsg--demo strong,
.fmsg--auf-dunkel strong { color: var(--dark-text-strong); }
.fmsg--ok.fmsg--auf-dunkel {
  background: rgba(72, 168, 232, .12);
  border-color: rgba(var(--accent-light-rgb), .4);
}
.fmsg--err.fmsg--auf-dunkel {
  background: rgba(220, 60, 60, .14);
  border-color: rgba(255, 140, 140, .45);
}
.fmsg--auf-dunkel a { color: var(--accent-light); text-decoration: underline; }

/* ---------- Leistungen (Foto-Kacheln) ---------- */
/* Grosse Bilder statt Textkarten: man sieht sofort, um welche Flaeche es
   geht. Die Beschreibung faehrt beim Hover hoch, damit die Reihe ruhig
   bleibt und der Inhalt trotzdem da ist. */
.pf-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.pf-tile {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  background: var(--dark-2);
  box-shadow: var(--shadow-card);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.pf-tile:hover,
.pf-tile.is-touch-hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}
.pf-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.pf-tile:hover img, .pf-tile.is-touch-hover img { transform: scale(1.05); }
/* Verlauf sitzt ueber dem Bild, damit die Beschriftung immer traegt */
.pf-tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 34, 47, .34) 0%, transparent 32%,
    transparent 46%, rgba(5, 34, 47, .88) 100%);
  transition: background .4s ease;
}
.pf-tile:hover::after,
.pf-tile.is-touch-hover::after {
  background: linear-gradient(180deg,
    rgba(5, 34, 47, .4) 0%, rgba(5, 34, 47, .3) 34%,
    rgba(5, 34, 47, .72) 62%, rgba(5, 34, 47, .95) 100%);
}
.pf-tile__num {
  position: absolute; z-index: 2; left: 1.15rem; top: 1.15rem;
  display: grid; place-items: center;
  min-width: 34px; height: 30px; padding-inline: .5rem;
  border-radius: var(--radius-md);
  background: var(--accent); color: #fff;
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .6);
}
.pf-tile__tag {
  position: absolute; z-index: 2; right: 1.15rem; top: 1.15rem;
  padding: .35rem .8rem; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.pf-tile__cap {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.6rem 1.65rem;
}
.pf-tile__cap h3 {
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700;
  letter-spacing: -.02em; color: #fff; line-height: 1.2;
}
.pf-tile__cap p {
  max-width: 34rem;
  font-size: .94rem; line-height: 1.58; color: var(--dark-text);
  /* Standard eingeklappt, faehrt beim Hover/Fokus auf */
  max-height: 0; opacity: 0; overflow: hidden; margin-top: 0;
  transition: max-height .45s cubic-bezier(.22,1,.36,1), opacity .35s ease,
              margin-top .45s cubic-bezier(.22,1,.36,1);
}
.pf-tile:hover .pf-tile__cap p,
.pf-tile.is-touch-hover .pf-tile__cap p,
.pf-tile:focus-within .pf-tile__cap p {
  max-height: 9rem; opacity: 1; margin-top: .6rem;
}
/* Touch-Geraete koennen nicht hovern - dort steht der Text dauerhaft */
@media (hover: none) {
  .pf-tile__cap p { max-height: 9rem; opacity: 1; margin-top: .6rem; }
  .pf-tile::after {
    background: linear-gradient(180deg,
      rgba(5, 34, 47, .4) 0%, rgba(5, 34, 47, .3) 30%,
      rgba(5, 34, 47, .72) 58%, rgba(5, 34, 47, .95) 100%);
  }
}


/* ---------- Leistungs-Widgets (Startseite) ----------
   Loesen die sechs grossen 4:3-Fotokacheln ab. Die Section war damit rund
   1000px hoch fuer eine reine Uebersicht; als flache Querformat-Widgets sind
   es noch etwa 250px. Das Foto bleibt als kleine Vorschau erhalten, damit die
   Liste nicht zur nackten Textaufzaehlung wird.
   Eigene Klasse statt .pf-tile umzubauen: die Kacheln laufen auf den
   Leistungs-, Ratgeber- und Kontaktseiten unveraendert weiter. */
/* grid-auto-rows: 1fr zieht alle Reihen auf dieselbe Hoehe. Ohne das wird die
   obere Reihe hoeher, sobald "Glas- und Fassadenreinigung" zweizeilig umbricht
   - und ab dieser Schriftgroesse tut es das bei drei Spalten immer. */
/* Flex statt Grid: bei sieben Karten bleibt in der zweiten Reihe ein Platz
   frei. Im Grid haengen die drei Karten dann links, Flex zentriert sie. */
.lw-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: stretch; gap: 1.1rem;
}
.lw-grid > * { flex: 0 1 calc(25% - .825rem); }
/* Hochkant statt Bild-links-Text-rechts: bei vier Spalten ist die Karte nur
   noch rund 280px breit, neben einem 104px-Bild blieben 105px Textspalte -
   darin passte keine einzige der Ueberschriften. Uebereinander steht die
   volle Kartenbreite zur Verfuegung. */
.lw {
  display: flex; flex-direction: column;
  padding: .9rem .9rem 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
              box-shadow .28s ease, border-color .22s ease;
}
.lw:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .32);
  box-shadow: var(--shadow-card-hover);
}
.lw:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Das Bild nimmt die volle Kartenhoehe mit. Bei fester Hoehe bliebe in den
   Karten mit kurzem Text sonst eine tote Flaeche neben dem Foto. */
.lw__bild {
  width: 100%; aspect-ratio: 16 / 10; border-radius: 12px;
  overflow: hidden; background: var(--surface-alt); flex: none;
}
.lw__bild img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.lw:hover .lw__bild img { transform: scale(1.08); }
.lw__txt { min-width: 0; flex: 1; margin-top: .85rem; }
.lw__tag {
  display: block;
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.lw__txt strong {
  display: block; margin-top: .22rem;
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); line-height: 1.25;
}
.lw__txt small {
  display: block; margin-top: .2rem;
  font-size: .95rem; line-height: 1.5; color: var(--muted);
}
.lw__arr {
  flex: none; align-self: flex-start; margin-top: .8rem;
  color: var(--accent); opacity: .55;
  transition: transform .22s ease, opacity .22s ease;
}
.lw:hover .lw__arr { transform: translateX(3px); opacity: 1; }

/* Hochkant-Karten brauchen keine breite Textspalte mehr - die Stufen richten
   sich jetzt nur noch danach, wie schmal eine Karte werden darf, bevor Bild
   und Text gequetscht wirken. */
@media (max-width: 1099px) {
  .lw-grid > * { flex-basis: calc(33.333% - .734rem); }
}
@media (max-width: 799px) {
  .lw-grid > * { flex-basis: calc(50% - .55rem); }
}
/* Ganz schmal zurueck aufs Querformat: eine hochkante Karte pro Zeile waere
   mit Bild fast bildschirmhoch, man scrollte ewig durch sieben Stueck. */
@media (max-width: 479px) {
  .lw-grid > * { flex-basis: 100%; }
  .lw {
    display: grid; grid-template-columns: 76px minmax(0, 1fr);
    gap: .8rem; padding: .8rem;
  }
  .lw__bild { width: 76px; aspect-ratio: 1; align-self: stretch; }
  .lw__txt { margin-top: 0; align-self: center; }
  .lw__arr { display: none; }
  .lw__txt strong { font-size: 1.05rem; }
  .lw__txt small { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .lw:hover { transform: none; }
  .lw:hover .lw__bild img { transform: none; }
}

.leist__note {
  margin-top: 3rem; padding: 1.75rem 0 0;
  background: transparent; border: none; border-top: 1px solid var(--border);
  border-radius: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.leist__note p { color: var(--muted); max-width: 42rem; }
.leist__note strong { color: var(--ink); }
/* Variante ohne Fliesstext: ohne den Absatz haette space-between nur noch ein
   Kind und wuerde den Button nach links kleben - deshalb hier zentriert.
   Bewusst als Modifier, damit Ratgeber-Block und Einsatzgebiete-Seiten,
   die dieselbe Klasse nutzen, ihre zweispaltige Aufteilung behalten. */
/* Ohne Fliesstext daneben trennt die Linie nichts, sie steht nur im Weg -
   deshalb in dieser Variante keine Oberkante. Die zweispaltige Fassung
   (Text links, Button rechts) behaelt sie. */
.leist__note--nur-cta {
  justify-content: center;
  border-top: none; padding-top: 0; margin-top: 2.5rem;
}

/* ---------- Vor-Ort-Block der Standortseiten ----------
   War ein einzelner zentrierter Absatz in sehr viel Leerraum. Jetzt steht der
   Text links und rechts daneben die drei harten Zahlen, die vorher nur im
   Fliesstext versteckt waren - Entfernung und Fahrzeit sind das, was ein
   Interessent aus dem Nachbarort tatsaechlich wissen will. */
.vorort {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 4rem; align-items: center;
}
.vorort__text h2 { margin-top: .2rem; }
.vorort__text p {
  margin-top: 1.3rem; color: var(--muted); line-height: 1.75;
  max-width: 34rem;
}
.vorort__fakten { list-style: none; display: grid; gap: 1.4rem; }
/* Feste Zahlenspalte, sonst starten die Beschreibungen je nach Zahlenbreite
   ("2" gegen "12min") auf drei verschiedenen Hoehen. */
.vorort__fakten li {
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr);
  align-items: baseline; gap: 1rem;
  padding-bottom: 1.4rem; border-bottom: 1px solid var(--border);
}
.vorort__fakten li:last-child { padding-bottom: 0; border-bottom: none; }
.vorort__fakten strong {
  font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700;
  line-height: .95; letter-spacing: -.04em; color: var(--accent);
  white-space: nowrap;
}
/* Einheit klein und aufrecht direkt an der Zahl, nicht als eigene Zeile. */
.vorort__fakten strong i {
  font-style: normal; font-size: .95rem; font-weight: 700;
  letter-spacing: 0; margin-left: .2rem; color: var(--muted);
}
.vorort__fakten span {
  font-size: .93rem; line-height: 1.5; color: var(--muted);
}
/* Variante mit Foto statt Zahlenspalte: die Belege traegt der Text selbst
   (.vorteile), rechts steht ein echtes Objektfoto. Bewusst 1:1 geteilt, sonst
   haengt das Bild neben dem langen Textblock wie ein Anhaengsel. */
.vorort--bild { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: stretch; }
/* Der Block sass sonst in der vollen .section-Hoehe und war dadurch unnoetig
   lang. min() statt fester Zahl, damit die Mobil-Variante (4rem) nicht
   groesser wird als vorher. */
.section--vorort { padding-block: min(var(--section-py), 4.5rem); }
.vorort--bild .vorort__text p { max-width: 33rem; }
/* Die Leistungs-Links im Fliesstext erbten die Textfarbe und waren dadurch
   nicht als Links erkennbar - hier sitzt die interne Verlinkung der
   Standortseiten, die soll man sehen. */
.vorort--bild .vorort__text p a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(var(--accent-rgb), .4);
  transition: text-decoration-color .2s ease;
}
.vorort--bild .vorort__text p a:hover { text-decoration-color: var(--accent); }
/* Das Bild laeuft auf Texthoehe mit (stretch), statt als 16:9-Streifen mittig
   daneben zu haengen. min-height greift nur, wenn der Text mal kurz ist.
   Die Klasse steht doppelt (.vorort__bild.bild-card), weil .bild-card img
   weiter unten im Stylesheet height:auto setzt und sonst gewinnt. */
.vorort__bild { margin: 0; }
.vorort__bild.bild-card img {
  width: 100%; height: 100%; min-height: 26rem; object-fit: cover;
}

@media (max-width: 1023px) {
  .vorort { grid-template-columns: 1fr; gap: 2.5rem; }
  .vorort--bild { grid-template-columns: 1fr; gap: 2.2rem; }
  /* Gestapelt gibt es keine Nachbarhoehe mehr, auf die das Bild wachsen
     koennte - hier wieder festes 4:3. */
  .vorort__bild.bild-card img { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
  .vorort__text p { max-width: none; }
  .vorort--bild .vorort__text p { max-width: none; }
  .vorort__fakten strong { font-size: 2.2rem; }
}

/* ---------- Leistungs-Karten der Standortseiten ----------
   Loesen die .card-Variante mit der grossen 01-04-Geisterziffer ab: die Ziffer
   lag genau auf der Ueberschrift und nummerierte etwas, das keine Reihenfolge
   hat. Stattdessen traegt jede Karte unten einen Weiterlesen-Anker, und beim
   Hover faehrt oben eine Akzentkante ein - dieselbe Geste wie unter dem
   Schluesselwort in der Hero-Headline. */
.lcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* Karten der Ortsseiten liegen jetzt auf einem Foto der jeweiligen Leistung.
   min-height, damit alle vier gleich hoch stehen, auch wenn der Text
   unterschiedlich lang ist - ohne Bild trug der Text allein die Hoehe. */
.lcard {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 15.5rem;
  padding: 1.7rem 1.5rem 1.4rem;
  background: var(--dark); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1),
              box-shadow .28s ease, border-color .22s ease;
}
.lcard__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* Unten dicht genug fuer weisse Schrift, oben durchsichtig damit das Motiv
   erkennbar bleibt. */
.lcard__veil {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    rgba(8, 22, 32, .30) 0%, rgba(8, 22, 32, .62) 48%, rgba(8, 22, 32, .90) 100%);
}
.lcard:hover .lcard__bg { transform: scale(1.06); }
.lcard::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  width: 100%; height: 3px; background: var(--accent-grad);
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.lcard:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-light-rgb), .45);
  box-shadow: var(--shadow-card-hover);
}
.lcard:hover::before { transform: scaleX(1); }
.lcard:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lcard h3 {
  font-size: 1.12rem; line-height: 1.25; color: #fff;
  letter-spacing: -.015em;
}
.lcard p {
  /* kein flex:1 mehr - der Inhalt sitzt jetzt unten, gestreckt wuerde der
     Absatz die Ueberschrift nach oben ans Bild druecken. */
  margin-top: .5rem; margin-bottom: 1rem;
  font-size: .93rem; line-height: 1.55; color: rgba(255, 255, 255, .82);
}
.lcard__mehr {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-heading); font-size: .82rem; font-weight: 700;
  letter-spacing: .02em; color: var(--accent-light);
}
.lcard__mehr .arr { transition: transform .22s ease; }
.lcard:hover .lcard__mehr .arr { transform: translateX(4px); }
@media (max-width: 1023px) { .lcards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .lcards { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .lcard:hover { transform: none; }
  .lcard::before { transition: none; }
}

/* ---------- Zielgruppen-Karten ---------- */
/* Bild links, Inhalt rechts: die Karte liest sich wie ein Steckbrief und
   bleibt auch bei unterschiedlich langen Listen gleich hoch. */
.aud-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.aud-card {
  --mx: 50%; --my: 0%;
  position: relative;
  display: grid; grid-template-columns: 40% 1fr;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .45s cubic-bezier(.22,1,.36,1),
              box-shadow .45s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
/* Lichtschein ueber dem Textteil, folgt dem Zeiger */
.aud-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx) var(--my),
              rgba(var(--accent-light-rgb), .14), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
.aud-card > * { position: relative; z-index: 2; }
.aud-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--accent-rgb), .3);
  box-shadow: var(--shadow-card-hover);
}
.aud-card:hover::before { opacity: 1; }
.aud-card.is-touch-hover {
  transform: translateY(-5px);
  border-color: rgba(var(--accent-rgb), .26);
  box-shadow: var(--shadow-card-hover);
}
.aud-card.is-touch-hover .aud-card__im img { transform: scale(1.06); }
.aud-card__tx h3 { transition: color .3s ease; }
.aud-card:hover .aud-card__tx h3 { color: var(--accent); }
.aud-card .arrow-link .arr { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.aud-card:hover .arrow-link .arr,
.aud-card.is-touch-hover .arrow-link .arr { transform: translateX(5px); }
.aud-card__im { position: relative; overflow: hidden; background: var(--surface-alt); }
.aud-card__im img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.aud-card:hover .aud-card__im img { transform: scale(1.06); }
.aud-card__tag {
  position: absolute; left: .9rem; bottom: .9rem;
  padding: .35rem .8rem; border-radius: var(--radius-md);
  background: var(--accent); color: #fff;
  font-family: var(--font-heading); font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(var(--accent-rgb), .8);
}
.aud-card__tx { display: flex; flex-direction: column; padding: 1.75rem 1.75rem 1.9rem; }
.aud-card__tx h3 { font-size: 1.3rem; }
.aud-card__tx > p { margin-top: .7rem; color: var(--muted); font-size: .975rem; line-height: 1.6; }
.aud-list { margin-top: 1.15rem; display: grid; gap: .6rem; }
.aud-list li {
  display: grid; grid-template-columns: 18px 1fr; gap: .6rem; align-items: start;
  font-size: .93rem; line-height: 1.5; color: var(--ink);
}
.aud-list li svg { width: 15px; height: 15px; margin-top: .22rem; color: var(--accent); }
.aud-card__tx .arrow-link { margin-top: auto; padding-top: 1.35rem; }

/* ---------- Ueber uns (Inhaber-Karte auf dunkel) ---------- */
.owner {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 3.5rem; align-items: center;
  padding: 2.5rem;
  background: var(--dark-card); border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
}
.owner__media { position: relative; margin: 0; }
/* Gradient-Logo als Flaeche statt Foto: quadratische Quelle, im 4:3-Rahmen
   mittig beschnitten - der Verlauf laeuft randlos weiter. */
.owner__media > img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center;
  border-radius: var(--radius-lg);
}
/* Namenskarte laeuft unten aus dem Bild heraus */
.owner__card {
  position: absolute; left: 1.1rem; right: 1.1rem; bottom: -1.35rem;
  display: flex; align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, .7);
}
.owner__card strong {
  display: block; font-family: var(--font-heading);
  font-size: 1rem; font-weight: 700; color: var(--ink); line-height: 1.25;
}
.owner__card small { display: block; font-size: .78rem; color: var(--muted); margin-top: .1rem; }
/* Rundes Portraet statt Logo: das Gesicht traegt die Namenskarte staerker
   als die Wortmarke, die oben in der Navigation ohnehin steht. */
.owner__avatar {
  flex: none; width: 58px; height: 58px;
  border-radius: 50%; object-fit: cover; object-position: center 22%;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px -8px rgba(18, 20, 43, .5);
}
.owner__card > div { flex: 1; min-width: 0; }

.owner__body h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.16;
  letter-spacing: -.025em; color: var(--dark-text-strong);
}
.owner__body > p { margin-top: 1.15rem; line-height: 1.72; color: var(--dark-text); }
.owner__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.9rem; }
.owner__chips li {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .95rem; border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--dark-border);
  font-family: var(--font-heading); font-size: .84rem; font-weight: 600;
  color: var(--dark-text-strong); white-space: nowrap;
}
.owner__chips li svg { width: 14px; height: 14px; flex: none; color: var(--accent-light); }
.owner__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }

/* ---------- Einsatzgebiet ---------- */
.gebiet__intro {
  max-width: 44rem; margin: -1.5rem auto 3rem; text-align: center;
  font-size: 1.075rem; line-height: 1.7; color: var(--dark-text);
}

/* ---------- Standorte mit Kartenausschnitt ----------
   Die Google-Karte laedt erst auf Klick. Vorher steht hier eine eigene Flaeche
   im Markenblau - ohne das ginge beim blossen Seitenaufruf eine Anfrage an
   Google, inklusive IP-Adresse, und dafuer haetten wir keine Einwilligung. */
.karte {
  margin-top: 2.5rem; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -40px rgba(20, 22, 46, .4);
}
.karte__platz {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .5rem; padding: 3rem 1.5rem;
  min-height: 340px; text-align: center;
  background: linear-gradient(160deg, var(--dark) 0%, #072B3C 100%);
  color: var(--dark-text);
}
.karte__pin {
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(var(--accent-light-rgb), .16);
  color: var(--accent-light); margin-bottom: .3rem;
}
.karte__pin svg { width: 26px; height: 26px; }
.karte__titel {
  font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700;
  color: var(--dark-text-strong);
}
.karte__hinweis {
  max-width: 30rem; font-size: .85rem; line-height: 1.55;
  color: var(--dark-text-muted);
}
.karte__hinweis a { color: var(--accent-light); text-decoration: underline; text-underline-offset: 2px; }
.karte__platz .btn { margin-top: .9rem; }
/* Nach dem Laden fuellt der Rahmen die Flaeche vollstaendig aus */
.karte iframe { display: block; width: 100%; height: 420px; border: 0; }

/* Schlanke Zeile unter der Karte statt drei Kacheln: Name, Anschrift und der
   Weg dorthin - mehr braucht es unter einer Karte nicht. */
/* Die beiden Standorte stehen nebeneinander statt untereinander - es sind
   zwei gleichrangige Adressen, keine Liste. Unter 780px passen sie nicht
   mehr in eine Reihe und stapeln wieder. */
/* Die beiden Standorte stehen nebeneinander statt untereinander - es sind
   zwei gleichrangige Adressen, keine Liste. Spalten NICHT 1fr 1fr: die linke
   Zeile ist mit dem Firmennamen 586px breit und bekaeme bei halber Teilung
   nur 576px, dann bricht "Route planen" um. Mit auto richten sich die Spalten
   nach dem Inhalt, zusammen brauchen sie 1123 von 1174px. */
.karte__fuss {
  margin-top: 1.1rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
/* Die beiden Standorte als anklickbare Karten statt als Textblock unter der
   Kartenflaeche - untereinander gesetzt war das am Handy eine Textwand aus
   Firmenname, Anschrift und Link. Ganze Karte ist der Routen-Link. */
.karte__ort {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: .9rem;
  padding: .95rem 1.1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-card);
  transition: transform .25s cubic-bezier(.22, 1, .36, 1),
              border-color .25s ease, box-shadow .25s ease;
}
.karte__ort:hover {
  transform: translateY(-2px); border-color: rgba(var(--accent-rgb), .35);
  box-shadow: var(--shadow-card-hover);
}
.karte__ort:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.karte__ort-pin {
  flex: none; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--accent-subtle); color: var(--accent);
}
.karte__ort-pin svg { width: 20px; height: 20px; }
.karte__ort-tx { min-width: 0; }
.karte__ort-tx strong {
  display: block;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink);
}
.karte__ort-tx small {
  display: block; margin-top: .15rem;
  font-size: .85rem; color: var(--muted);
}
.karte__ort-arr { flex: none; color: var(--accent); display: flex; transition: transform .22s ease; }
.karte__ort:hover .karte__ort-arr { transform: translateX(3px); }
@media (max-width: 767px) {
  .karte__fuss { grid-template-columns: 1fr; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .karte__ort:hover { transform: none; }
}
.karte__adresse { flex-wrap: nowrap; }
@media (max-width: 900px) {
  .karte__fuss { grid-template-columns: 1fr; }
  .karte__adresse { flex-wrap: wrap; }
}
.karte__adresse {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .7rem;
  font-size: .95rem; color: var(--muted);
}
.karte__adresse strong {
  font-family: var(--font-heading); font-weight: 700; color: var(--ink);
}
/* Trennpunkt zwischen Name und Anschrift, wie in der Vorlage */
.karte__adresse strong + span::before {
  content: "·"; margin-right: .7rem; color: var(--border);
}
.karte__adresse a {
  color: var(--accent); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.karte__adresse a:hover { color: var(--accent-hover); }
@media (max-width: 767px) {
  .karte__platz { min-height: 280px; padding: 2.25rem 1.25rem; }
  .karte iframe { height: 320px; }
  /* Umbruch statt Zeile: Name, Anschrift und Link untereinander */
  .karte__adresse { flex-direction: column; gap: .15rem; }
  .karte__adresse strong + span::before { content: none; margin: 0; }
}

/* ---------- Einsatzgebiet als Bildbanner ----------
   Loest die eingerahmte Karte ab: der Block nimmt jetzt die volle Breite,
   Heilbronn liegt als Foto darunter. Der Verlauf darueber ist kein Deko-Effekt
   sondern noetig - auf dem blanken Foto haetten weisse Schrift und die hellen
   Ortschips zu wenig Kontrast. */
.gebiet-sec {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: 5.5rem;
  color: var(--dark-text);
}
.gebiet-sec__bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.15);
}
/* Dunkel genug fuer weisse Schrift, hell genug dass die Stadt zu sehen ist.
   Unten dichter, weil dort die Ortschips und die Knoepfe liegen. */
.gebiet-sec__veil {
  position: absolute; inset: 0; z-index: -1;
  /* Oben von .55 auf .70 gezogen: genau dort steht die Ueberschrift, und ueber
     den hellen Weinbergen kam das Akzentwort "Heilbronn" nur auf 2,4:1 - das
     reisst sogar die Schwelle fuer grosse Schrift (3:1). Mit .70 UND dem
     helleren Blau unten sind es 4,9:1. */
  background:
    linear-gradient(180deg, rgba(7, 43, 60, .70) 0%, rgba(6, 40, 55, .88) 100%),
    radial-gradient(90% 70% at 50% 38%, rgba(10, 58, 80, .3) 0%, transparent 72%);
}
.gebiet-sec__inhalt { max-width: 54rem; margin-inline: auto; text-align: center; }
/* Weiss statt Akzentblau: auf dem Foto kam der Kicker nur auf 3,7 Kontrast.
   Die Akzentfarbe traegt in dieser Section ohnehin das Wort "Heilbronn". */
.gebiet-sec__inhalt .kicker { color: var(--dark-text-strong); justify-content: center; }
.gebiet-sec__inhalt h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.1;
  color: var(--dark-text-strong);
  /* Weicher Schatten wie im Hero: faengt die hellsten Stellen des Fotos ab,
     an denen der Schleier allein nicht reicht. */
  text-shadow: 0 2px 24px rgba(5, 34, 47, .55);
}
/* Nicht --accent-light (#48A8E8), sondern der hellere Hero-Ton: auf dem Foto
   ist das der Unterschied zwischen 3,2:1 und 4,9:1. */
.gebiet-sec__inhalt h2 .ac { color: #7BD1EC; }
.gebiet-sec__inhalt > p {
  margin: 1.1rem auto 0; max-width: 40rem;
  line-height: 1.7; color: var(--dark-text);
}
/* Chips mittig statt linksbuendig - ohne die Rahmenkarte gibt es keine linke
   Kante mehr, an der sie sich ausrichten koennten. */
.gebiet-sec .orte {
  margin-top: 2rem; padding-top: 0; border-top: 0;
  justify-content: center;
}
/* Auf dem Foto braucht jeder Chip eigene Deckung - die 5%-Weiss aus der alten
   Rahmenkarte reichten auf hellen Bildstellen nicht, dort stand weisse Schrift
   praktisch auf Hausdaechern. */
/* Kein backdrop-filter mehr: die Chips liegen zu sechst auf dem Stadtfoto,
   jeder war eine eigene Blur-Wurzel, die der Browser bei jedem Scroll-Frame
   neu aus dem Hintergrund berechnet. Seit die Section auch auf den 40
   Ortsseiten steht, hat das sichtbar geruckelt. Statt blur(3px) einfach etwas
   deckender - optisch praktisch derselbe Chip, nur ohne Frame-Kosten. */
.gebiet-sec .ort {
  background: rgba(6, 40, 55, .74);
  border-color: rgba(255, 255, 255, .2);
}
.gebiet-sec .ort:hover { background: rgba(6, 40, 55, .82); }
.gebiet-sec .ort--heim { background: rgba(var(--accent-rgb), .8); }
.gebiet-sec__cta {
  margin-top: 2.25rem;
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center;
}
@media (max-width: 767px) {
  .gebiet-sec { padding-block: 4rem; }
  .gebiet-sec__cta .btn { width: 100%; justify-content: center; }
}

/* Umrandete Karte, in der die Orte als eine durchlaufende Zeile stehen */
.gebiet {
  max-width: 52rem; margin-inline: auto;
  padding: 2.5rem 2.25rem 2.25rem;
  border: 1px solid var(--dark-border);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .04);
}
.gebiet h3 {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2;
  letter-spacing: -.025em; color: var(--dark-text-strong);
}
.gebiet > p { margin-top: .8rem; color: var(--dark-text); line-height: 1.65; }

/* Eine Zeile, die seitlich ausblendet statt hart abzuschneiden */
.gebiet__orte {
  margin-top: 1.6rem; padding-bottom: .2rem;
  white-space: nowrap; overflow: hidden;
  font-size: 1rem; color: var(--dark-text-muted);
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 72%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 72%, transparent 100%);
}

.gebiet__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }

@media (max-width: 767px) {
  .gebiet { padding: 1.75rem 1.5rem 1.6rem; }
  .gebiet__intro { margin-bottom: 2.25rem; font-size: 1rem; }
  .gebiet__cta .btn { width: 100%; }
}

/* Heller Button auf dunklem Grund */
.btn--white { background: #fff; color: var(--accent); border-color: #fff; }
.btn--white:hover { background: #F4F6FF; transform: translateY(-2px); }
.btn--white::after {
  background: linear-gradient(105deg,
    transparent 32%, rgba(0, 96, 134, .10) 48%,
    rgba(0, 96, 134, .16) 50%, rgba(0, 96, 134, .10) 52%, transparent 68%);
}

/* ---------- Ratgeber-Cards ---------- */


/* ---------- FAQ ---------- */
/* Gewicht klar nach rechts: die Aside braucht nur die Breite des
   Ansprechpartner-Widgets (20.5rem), alles darueber war tote Flaeche. */
.faq { display: grid; grid-template-columns: .62fr 1.38fr; gap: 3.5rem; align-items: start; }
/* Bewusst kleiner als die uebrigen Section-Headlines: die Aside ist
   Beiwerk neben den Fragen. Ausserdem noetig, weil lange Komposita wie
   "Treppenhausreinigung," bei 2.6rem breiter waren als die Spalte. */
.faq h2 { font-size: clamp(1.55rem, 2.05vw, 1.95rem); }
/* Die linke Spalte laeuft beim Scrollen durch die Fragen mit. Bleibt nur
   kleben, solange sie kuerzer als der Viewport ist - sonst wuerde das untere
   Ende der Karte nie erreichbar. */
.faq__aside { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
@media (max-height: 600px), (max-width: 1023px) {
  .faq__aside { position: static; }
}

/* ---------- Standortseiten-Variante ----------
   Dort ist das laengste Wort der Headline "Gebäudereinigung" statt
   "Treppenhausreinigung," - es passt also eine groessere Schrift in die Spalte.

   Frueher wurde die Aside hier auf die Hoehe der Fragenspalte gezogen und das
   Portrait fuellte den Rest. Das schnitt bei langen Fragenlisten den Kopf ab
   (das Bild lief dann hochkant und object-position 16% lag ueber der Stirn).
   Jetzt traegt die Karte wie auf den Leistungsseiten den Modifier
   .ap-widget--kompakt: festes 3:2 ab Oberkante, Kopf komplett drauf. Dass die
   Aside dadurch kuerzer ist als die Fragen, ist gewollt - sie laeuft wieder
   sticky mit. */
.faq--ort h2 { font-size: clamp(1.75rem, 2.6vw, 2.45rem); }
.faq--ort .faq__aside .kicker { margin-bottom: 1rem; }
.faq--ort .ap-widget { margin-top: 1.2rem; }
.faq__card {
  padding: 2rem; background: var(--dark); color: var(--dark-text);
  border-radius: 0;
}
.faq__card h3 { color: var(--dark-text-strong); font-size: 1.25rem; }
.faq__card p { margin-top: .8rem; font-size: .975rem; }
.faq__card .tel {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.4rem;
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700;
  color: var(--dark-text-strong);
}
.faq__card .tel svg { color: var(--accent-light); }
.faq__card .tel:hover { color: var(--accent-light); }
.faq__card .mail { display: block; margin-top: .6rem; font-size: .95rem; color: var(--dark-text); }
.faq__card .mail:hover { color: #fff; }

/* Jede Frage eine eigene Karte statt einer durchgehenden Liste - die Reihe
   liest sich als Stapel Widgets, die offene Frage hebt sich klar ab. */
/* Mehr Luft zwischen den Karten: der Stapel liest sich ruhiger und die
   rechte Spalte wird hoeher - erst dadurch bekommt die sticky Aside
   links ueberhaupt Weg zum Mitlaufen. */
.acc { display: grid; gap: 1.1rem; }
.acc details {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: border-color .22s ease, box-shadow .22s ease;
}
.acc details:hover { border-color: rgba(var(--accent-rgb), .3); }
.acc details[open], .acc details.is-offen {
  border-color: rgba(var(--accent-rgb), .4);
  box-shadow: 0 18px 36px -26px rgba(20, 22, 46, .5);
}
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 2.1rem 2.3rem; cursor: pointer; list-style: none;
  font-family: var(--font-heading); font-weight: 700;
  /* Die Fragen sind der Hauptinhalt der Section und tragen sie allein -
     links steht nur noch die Ansprechpartner-Karte. Entsprechend gross. */
  font-size: clamp(1.25rem, 1.75vw, 1.6rem);
  line-height: 1.3; letter-spacing: -.025em; color: var(--ink);
  transition: color .2s ease;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--accent); }
.acc summary .ico {
  flex: none; width: 30px; height: 30px; border-radius: 0;
  display: grid; place-items: center;
  background: none; color: var(--accent);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.acc details.is-offen summary .ico { transform: rotate(180deg); }
/* Die Antwort wird per Web Animations API in der Hoehe gefahren - hier nur
   dafuer sorgen, dass sie dabei sauber beschnitten wird. */
.acc .acc__body { box-sizing: border-box; }
.acc .acc__body { padding: 0 2.3rem 2rem; color: var(--muted); line-height: 1.75; font-size: 1.08rem; max-width: 42rem; }
.acc .acc__body p + p { margin-top: .8rem; }

/* ---------- §9 Footer ---------- */
/* Footer bewusst neutral schwarz statt Petrol - Wunsch vom Chef */
/* 07.08.2026: Der Footer schliesst NICHT mehr am Endton des CTA-Blocks an -
   der endet jetzt in Blauschwarz (#0a1e29), der Footer startet neutral bei
   #101014. Die Kante zwischen beiden ist gewollt.
   Die beiden Scheine sassen frueher mit ihrem Zentrum auf der Oberkante
   (at 50% 0% / at 85% 0%) und waren genau dort am hellsten. Zusammen mit dem
   spiegelbildlichen Schein im Block darueber ergab das auf der Naht einen
   Helligkeitsgrat - den sah man als Strich, rechts am staerksten, weil es
   fuer den zweiten Schein bei 85% oberhalb kein Gegenstueck gab.
   Jetzt liegen beide Zentren tiefer: der Abstand zur Oberkante (38% bzw. 42%
   der Footer-Hoehe) ist groesser als Radius mal Ausblendpunkt
   (40%*70% = 28% bzw. 34%*60% = 20%). Damit ist die komplette Oberkante
   garantiert bei null Blau und startet mit demselben #101014, mit dem der
   Block darueber aufhoert. Weil alles Prozente der Footer-Hoehe sind, gilt
   das bei jeder Hoehe - auch mobil, wo der Footer deutlich hoeher ist. */
.footer {
  /* 07.08.2026: Die beiden blauen Lichtscheine sind raus - sie sassen genau in
     der Mitte der oberen Kante und liessen den Footer wie die Fortsetzung des
     CTA-Blocks darueber aussehen. Jetzt eine ruhige schwarze Flaeche. */
  background: linear-gradient(180deg, #101014 0%, #050506 100%);
  /* 07.08.2026: Flaeche bleibt das alte Schwarz, abgegrenzt wird nur ueber
     diese Kante. Sie ist der bewusste Gegenentwurf zu dem Strich, der hier
     frueher als Fehler auftrat - der kam von einer halb gedeckten
     Geraetepixel-Zeile, lief ungleichmaessig durch und war rechts am
     staerksten. Diese Linie liegt sauber und gleichmaessig auf der Naht. */
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: var(--dark-text);
  /* Der Block darueber endet auf einer GEBROCHENEN Pixelkante (gemessen
     616.68px). Bei devicePixelRatio 2 deckt dann weder er noch der Footer die
     Geraetepixel-Zeile auf der Naht komplett ab, und durch den Rest schimmert
     der helle Body-Hintergrund (#faf7f2) als duenner heller Strich ueber die
     ganze Breite. Das war die eigentliche Ursache der sichtbaren Linie - sie
     blieb auch dann stehen, wenn man beiden Seiten exakt dieselbe Flaechen-
     farbe gab. Der Footer wird deshalb 1px hochgezogen und ueberlappt die
     Kante, damit keine Zeile mehr halb leer bleibt. Das padding faengt den
     Versatz auf, damit der Inhalt an derselben Stelle sitzt. */
  margin-top: -1px;
  padding-top: calc(5.5rem + 1px);
}
.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr .9fr 1.1fr;
  gap: 3rem 2.5rem; padding-bottom: 3.5rem;
}
.footer__brand img { height: 46px; width: auto; margin-bottom: 1.4rem; }
.footer__brand p { font-size: .975rem; line-height: 1.68; max-width: 30rem; }
.footer__badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.4rem; }
.footer__badges { gap: 0; }
.footer__badges span {
  padding: 0; border: none; background: none;
  font-size: .8rem; font-weight: 600; color: var(--dark-text-muted);
  letter-spacing: .02em;
}
.footer__badges span + span::before {
  content: "/"; margin: 0 .6rem; color: var(--dark-border);
}
.footer__col h4 {
  font-family: var(--font-heading); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--dark-text-strong); margin-bottom: 1.25rem;
}
.footer__col li + li { margin-top: .7rem; }
.footer__col a { font-size: .975rem; color: var(--dark-text); transition: color .18s ease; }
.footer__col a:hover { color: var(--accent-light); }
.footer__contact li { display: flex; align-items: flex-start; gap: .7rem; font-size: .975rem; }
.footer__contact svg { color: var(--accent-light); flex: none; margin-top: 4px; }
.footer__contact a:hover { color: var(--accent-light); }
.footer__contact a[href^="mailto"] { font-size: .92rem; overflow-wrap: anywhere; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  /* Unten mehr Luft: der feste WhatsApp-Knopf belegt die untersten ~74px des
     Fensters und schnitte sonst am Seitenende die Signatur rechts an. */
  padding-block: 1.6rem 4.6rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
}
.footer__bottom .cr { font-size: .875rem; color: var(--dark-text-muted); }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { font-size: .875rem; color: var(--dark-text-muted); }
.footer__legal a:hover { color: var(--dark-text-strong); }

/* ---------- Google-Bewertungen ---------- */
.stars { display: inline-flex; flex-wrap: nowrap; gap: 2px; color: #FBBC04; flex: none; }
.stars svg { width: 16px; height: 16px; }


/* helle Variante (Form-Section) */


/* Panel-Sterne */


/* Bewertungs-Section: siehe "Bewertungen als Laufband" weiter unten -
   das alte 2-Spalten-Raster (.revs, .rev__top, .revs__foot) ist mit dem
   Umbau auf das Laufband entfallen. */

/* ---------- Page-Header (Impressum / Datenschutz / 404 - KEINE .hero) ---------- */
.page-head {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  padding-block: calc(4.75rem + var(--nav-h)) 3rem;
}
.page-head .crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--muted); margin-bottom: 1rem;
}
.page-head .crumbs a:hover { color: var(--accent); }
.page-head .crumbs .sep { opacity: .5; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); }

/* Der Block behaelt die normale Containerbreite und sitzt damit auf derselben
   linken Kante wie die Ueberschrift im Kopfbereich. Die Lesebreite begrenzen
   jetzt die einzelnen Absaetze - vorher lag sie auf dem Container selbst, und
   dessen margin-inline:auto hat den schmalen Block in die Seitenmitte
   gerueckt. Bewusst rem statt ch: ch rechnet mit der Schriftgroesse des
   jeweiligen Elements, die groesseren Zwischenueberschriften waeren damit
   925px breit geworden und ihre Trennlinie ueber die Textkante hinausgelaufen. */
.legal { padding-block: 3.5rem 5rem; }
.legal > * { max-width: 47rem; }
.legal h2 {
  font-size: 1.35rem; margin-top: 2.75rem; padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.legal h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal h3 { font-size: 1.075rem; margin-top: 1.75rem; }
.legal p { margin-top: .9rem; color: var(--muted); }
.legal p strong, .legal li strong { color: var(--ink); }
.legal ul { margin-top: .9rem; display: grid; gap: .5rem; }
.legal ul li {
  position: relative; padding-left: 1.4rem; color: var(--muted);
}
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
}
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal .addr { margin-top: .9rem; line-height: 1.8; }
.legal .stand { margin-top: 3rem; font-size: .9rem; }

.err404 { padding-block: calc(6rem + var(--nav-h)) 7rem; text-align: center; }
.err404 .code {
  font-family: var(--font-heading); font-weight: 700;
  font-size: clamp(4rem, 14vw, 8rem); line-height: 1; color: var(--accent);
  opacity: .16;
}
.err404 h1 { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-top: -1rem; }
.err404 p { margin-top: 1.1rem; color: var(--muted); max-width: 40rem; margin-inline: auto; }
.err404 .btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 2.25rem; }

/* ---------- §3 Scroll-Reveals ---------- */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
}
html.js .reveal { opacity: 0; transform: translateY(32px); }
/* Bewusst vertikal, nicht translateX: bei randbuendigem Container schiebt ein
   seitlicher Versatz die Spalte aus dem Viewport, und overflow-x:clip auf html
   schneidet sie ab. Muss zur JS-Variante in main.js passen. */
html.js .reveal-left { opacity: 0; transform: translateY(28px); }
html.js .reveal-right { opacity: 0; transform: translateY(28px); }
html.js .reveal-scale { opacity: 0; transform: scale(.94); }
html.js .reveal.active, html.js .reveal-left.active,
html.js .reveal-right.active, html.js .reveal-scale.active {
  opacity: 1; transform: none;
}
/* Sobald GSAP uebernimmt, darf die versteckte Startregel oben nicht mehr
   greifen. GSAP setzt den Startzustand selbst inline; faellt der Inline-Style
   aus irgendeinem Grund weg, ist der Inhalt sichtbar statt unsichtbar. */
html.gsap-on .reveal, html.gsap-on .reveal-left,
html.gsap-on .reveal-right, html.gsap-on .reveal-scale {
  transition: none; opacity: 1; transform: none;
}
/* Die transition:none-Regel darueber wuerde auch den Karten-Hover abwuergen,
   weil die Karten selbst .reveal tragen. Deshalb hier mit hoeherer
   Spezifitaet zurueckholen. Die Werte muessen identisch zu .card-lift weiter
   oben bleiben, sonst laeuft derselbe Hover je nach Seite in zwei
   verschiedenen Geschwindigkeiten. */
html.js .card-lift.reveal, html.gsap-on .card-lift.reveal {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1), border-color .3s ease;
}
/* Und derselbe Kampf noch einmal fuer den transform selbst: "html.js
   .reveal.active" weiter oben setzt transform:none und hat mit (0,3,1)
   dieselbe Staerke wie ein .card-lift.reveal:hover - bei Gleichstand
   gewinnt die spaetere Regel, also bisher immer das reveal. Erst mit dem
   .js/.gsap-on-Praefix (0,4,1) und an dieser Stelle im Dokument kommt der
   Lift durch. Schatten und Rahmen greifen schon vorher, weil sie in den
   Reveal-Regeln gar nicht vorkommen. */
html.js .card-lift.reveal:hover, html.gsap-on .card-lift.reveal:hover {
  transform: translateY(-10px);
}

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .reveal-left, html.js .reveal-right, html.js .reveal-scale {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }

  .card-lift:hover, .btn:hover { transform: none; }

}

/* Anker unter der sticky Nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* ==========================================================================
   §11 Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1023px) {
  .nav__list, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  /* Hero einspaltig: die Inhaber-Karte rutscht unter den Text, sonst bleibt
     fuer die Headline nur eine Handbreit Platz. minmax(0,1fr) statt 1fr,
     sonst blaest der min-content der Karte die Spalte ueber den Rand. */
  .hero__wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hero__inner { max-width: none; }
  .hero h1 { max-width: 18ch; }

  .formsec__grid, .faq, .owner { grid-template-columns: 1fr; gap: 2.75rem; }
  .sec-head { grid-template-columns: 1fr; gap: .6rem; align-items: start; }
  .sec-head h2, .sec-head p { grid-column: 1; }
  .sec-head p { margin-top: .8rem; max-width: 42rem; }
  .owner { padding: 1.75rem; gap: 3rem; }
  .owner__media { order: -1; }
  .grid-3, .rat { grid-template-columns: 1fr 1fr; }
  .aud-grid { grid-template-columns: 1fr; }

}

@media (max-width: 767px) {
  :root { --section-py: var(--section-py-mobile); --container-pad: 20px; }

  body { font-size: 1rem; }

  /* Enger getaktet, damit Headline, CTAs und Karte zusammen nicht zu weit
     nach unten laufen. */
  .hero { min-height: 560px; }   /* fest, wie Desktop */
  /* Unten genug Luft, damit das schraege Band nicht in die Karte laeuft */
  .hero__wrap { padding: calc(var(--nav-h) + 2.75rem) var(--container-pad) 5.5rem; }
  .hero__pill { margin-bottom: 1.1rem; padding: .35rem .85rem .35rem .35rem; gap: .45rem; }
  .hero__pill-g { width: 28px; height: 28px; padding: .32rem; }
  .hero__pill-tx { font-size: .8rem; }
  .hero__pill .stars svg { width: 12px; height: 12px; }
  .hero__benefits { gap: .6rem; margin-top: 1.5rem; }
  .hero__benefits li { font-size: .94rem; }
  .hero h1 { font-size: 2.35rem; }
  .hero__lead { font-size: 1rem; margin-top: 1rem; line-height: 1.55; }
  .hero__cta { gap: .6rem; margin-top: 1.5rem; }
  .hero__cta .btn { width: 100%; min-height: 50px; }


  /* Das schraege Band wird auf schmalen Geraeten flacher, sonst frisst der
     Winkel die halbe Kachelhoehe darunter. */
  /* Schmaler Viewport: steilere Neigung, sonst wirkt die Kante fast gerade */
  :root { --band-winkel: -2.5deg; --band-kante: 4.37vw; --band-halb: 2.19vw; }
  .band-clip { height: 110px; margin-top: calc(-72px - var(--band-halb)); margin-bottom: calc(-16px + var(--band-halb)); }
  .band .chip { font-size: .78rem; }

  .grid-3, .rat, .grid-2, .revs, .pf-grid { grid-template-columns: 1fr; }
  .aud-card { grid-template-columns: 1fr; }
  .aud-card__im { aspect-ratio: 16 / 9; }
  .pf-tile__cap { padding: 1.25rem 1.3rem 1.4rem; }
  .pf-tile__cap h3 { font-size: 1.15rem; }
  .rev { padding: 1.6rem 1.5rem; }
  .rev__g { top: 1.3rem; right: 1.3rem; }
  .sec-head { margin-bottom: 2.5rem; max-width: none; }
  .card { padding: 1.75rem; }
  .card__num { font-size: 3.5rem; top: .35rem; right: 1rem; }
  .formcard { padding: 1.5rem; }
  .choices { grid-template-columns: 1fr; }
  .leist__note { flex-direction: column; align-items: flex-start; }
  .leist__note .btn { width: 100%; }
  .faq__card { padding: 1.6rem; }
  /* Auf dem Handy kleiner als am Desktop, aber nicht zu klein - sonst wirken
     die Fragen dort deutlich unwichtiger als in der Desktop-Fassung. */
  .acc summary { padding: 1.5rem; font-size: 1.15rem; gap: 1rem; }
  .acc .acc__body { padding: 0 1.5rem 1.5rem; font-size: 1rem; }

  .owner__chips li { font-size: .8rem; padding: .5rem .8rem; }
  .owner__avatar { width: 50px; height: 50px; }
  .owner__logo { width: 44px; height: 44px; }
  .owner__cta .btn { width: 100%; }

  /* +1px wie am Desktop: gleicht die Ueberlappung aus, die den hellen
     Haarstrich auf der Naht zum Block darueber verhindert. */
  .footer { padding-top: calc(3.5rem + 1px); }
  .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2.5rem; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .hero { min-height: 600px; }
  /* "Gebaeudereinigung" ist ein sehr langes Wort - auf schmalen Geraeten
     darf die Zeile umbrechen, sonst laeuft sie aus dem Bild. */
  .hero h1 { font-size: 2.1rem; text-wrap: balance; max-width: 100%; }
}

/* Textauswahl in Markenfarbe */
::selection { background: rgba(var(--accent-light-rgb), .35); color: var(--ink); }

/* ---------- Kontakt: Formular + Kontaktwege ---------- */
.kontakt {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 3.5rem; align-items: start;
}
/* Kontaktseite: dort ist die rechte Spalte deutlich kuerzer als die
   Formularkarte, oben buendig laesst sie unten ins Leere laufen. Mittig
   gesetzt liest sich das Paar als ein Block. Nur als Modifier - auf der
   Startseite steht neben dem Formular mehr Inhalt, der oben bleiben soll. */
.kontakt--mittig { align-items: center; }

/* --- Formularkarte (dunkel) --- */
.kf {
  padding: 2rem;
  background: linear-gradient(180deg, var(--dark) 0%, #072B3C 100%);
  border: 1px solid var(--dark-border);
  border-radius: 20px;
  box-shadow: 0 40px 80px -50px rgba(4, 30, 42, .8);
}
.kf__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .38rem .85rem; border-radius: 99px;
  background: rgba(var(--accent-light-rgb), .14);
  border: 1px solid rgba(var(--accent-light-rgb), .3);
  font-family: var(--font-heading); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-light);
}
.kf__badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-light); }
.kf h2 {
  margin-top: 1rem;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  color: var(--dark-text-strong);
}
.kf__sub { margin-top: .4rem; font-size: .9rem; color: var(--dark-text-muted); }

.kf form {
  display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  margin-top: 1.4rem;
}
/* Ein Feld = Icon links, Eingabe daneben. Der Rahmen sitzt am Container,
   damit Icon und Eingabe zusammen hervorgehoben werden. */
.kf__feld {
  position: relative;
  display: flex; align-items: center; gap: .6rem;
  padding: 0 .9rem; min-height: 48px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--dark-border);
  border-radius: 12px;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.kf__feld--breit { grid-column: 1 / -1; }
.kf__feld:focus-within {
  border-color: var(--accent-light);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 3px rgba(var(--accent-light-rgb), .18);
}
.kf__ic { flex: none; display: grid; place-items: center; color: var(--accent-light); }
.kf__ic svg { width: 17px; height: 17px; }
.kf__feld input,
.kf__feld select,
.kf__feld textarea {
  width: 100%; min-width: 0;
  padding: .75rem 0; border: none; background: none;
  font-family: var(--font-body); font-size: .92rem; color: #fff;
}
.kf__feld input:focus, .kf__feld select:focus, .kf__feld textarea:focus { outline: none; }
.kf__feld input::placeholder, .kf__feld textarea::placeholder { color: var(--dark-text-muted); }
.kf__feld select { appearance: none; cursor: pointer; color: var(--dark-text-muted); }
.kf__feld select:valid { color: #fff; }
.kf__feld select option { background: #0A3A50; color: #fff; }
.kf__chev { flex: none; color: var(--dark-text-muted); pointer-events: none; }
.kf__feld--area { align-items: flex-start; padding-block: .3rem; }
.kf__feld--area .kf__ic { margin-top: .85rem; }
.kf__feld--area textarea { min-height: 88px; resize: vertical; line-height: 1.55; }

.kf__consent {
  grid-column: 1 / -1;
  display: flex; align-items: flex-start; gap: .6rem;
  margin-top: .25rem;
  font-size: .8rem; line-height: 1.45; color: var(--dark-text-muted);
}
.kf__consent input {
  width: 19px; height: 19px; flex: none; margin-top: 2px;
  accent-color: var(--accent-light);
}
.kf__consent a { color: var(--accent-light); text-decoration: underline; }
.kf__submit { grid-column: 1 / -1; width: 100%; margin-top: .3rem; min-height: 50px; border-radius: 12px; }
.kf__hinweis {
  grid-column: 1 / -1; text-align: center;
  font-size: .8rem; color: var(--dark-text-muted);
}
.kf .fmsg { grid-column: 1 / -1; }

/* --- Kontaktwege (hell) --- */
.kontakt__wege h2 {
  margin-top: .9rem;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
}
.kontakt__intro { margin-top: 1.15rem; color: var(--muted); max-width: 32rem; }

.kk-liste { display: grid; gap: .75rem; margin-top: 2rem; }
.kk {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a.kk:hover {
  border-color: rgba(var(--accent-rgb), .35);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}
.kk__ic {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 11px;
  background: var(--accent-grad); color: #fff;
  box-shadow: 0 10px 20px -12px rgba(var(--accent-rgb), .6);
}
.kk__ic svg { width: 21px; height: 21px; }
.kk__tx { min-width: 0; flex: 1; }
.kk__tx small {
  display: block;
  font-family: var(--font-heading); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.kk__tx b {
  display: block; margin-top: .2rem;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 700;
  color: var(--ink); overflow-wrap: anywhere;
}
.kk__arr { flex: none; color: var(--muted); transition: transform .2s ease, color .2s ease; }
a.kk:hover .kk__arr { transform: translateX(4px); color: var(--accent); }

@media (max-width: 1023px) {
  .kontakt { grid-template-columns: 1fr; gap: 2.75rem; }
  .kontakt__wege { order: -1; }
}
@media (max-width: 767px) {
  .kf { padding: 1.5rem; }
  .kf form { grid-template-columns: 1fr; }
}

/* ---------- Scrollleiste ---------- */
/* Die Standardleiste ist auf dem dunklen Hero ein grauer Fremdkoerper.
   Schlank und in Markenfarbe faellt sie nicht mehr auf. */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-rgb), .45) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-rgb), .4);
  border-radius: 99px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), .65); background-clip: content-box; }


/* ---------- Bewertungen als Laufband ---------- */
.revs-sec { overflow: hidden; }
/* Der Kopf sitzt bewusst nach rechts eingerueckt - links laeuft das
   Kartenband darunter ins Bild. */
.revs-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 2.5rem; align-items: center;
  margin-bottom: 3rem;
  max-width: 60rem; margin-left: auto;
}
/* Score-Kachel: Google-Logo, grosse Zahl, Sterne daneben */
.revs-score {
  flex: none;
  display: flex; align-items: center; gap: 1rem;
  padding: 1.5rem 1.9rem;
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 24px 48px -28px rgba(18, 20, 43, .3),
              0 2px 8px rgba(18, 20, 43, .05);
}
.revs-score__g { width: 30px; height: 30px; flex: none; }
.revs-score__zahl {
  font-family: var(--font-heading); font-size: 3.4rem; font-weight: 700;
  letter-spacing: -.045em; line-height: .95; color: var(--ink);
}
.revs-score__rechts { display: flex; flex-direction: column; gap: .2rem; }
.revs-score__sterne { display: flex; gap: 2px; color: #FBBC04; }
.revs-score__sterne svg { width: 18px; height: 18px; }
.revs-score__von { font-size: .85rem; color: var(--muted); }

.revs-intro h2 { margin-top: .9rem; }
.revs-intro > p { margin-top: 1rem; color: var(--muted); max-width: 34rem; }

/* Das Band laeuft ueber die volle Breite, die Raender blenden aus */
.revs-rail {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
/* align-items: stretch zieht alle Karten auf die Hoehe der laengsten -
   ohne das haengen die Unterkanten auf unterschiedlicher Hoehe. */
.revs-track {
  display: flex; align-items: stretch; gap: 1.5rem; width: max-content;
  padding-block: .5rem;
  animation: revlauf 60s linear infinite;
}
.revs-rail:hover .revs-track { animation-play-state: paused; }
/* Die Haelfte der Strecke ist 4 Karten PLUS die 4 Luecken dazwischen - ohne
   den halben Gap springt das Band bei jedem Durchlauf um die Gap-Breite. */
@keyframes revlauf { to { transform: translateX(calc(-50% - .75rem)); } }
@media (prefers-reduced-motion: reduce) {
  .revs-track { animation: none; }
  .revs-rail { overflow-x: auto; }
}

/* ---------- Einzelne Bewertungskarte ---------- */
.rev {
  position: relative; overflow: hidden;
  flex: 0 0 380px; width: 380px; height: auto;
  display: flex; flex-direction: column;
  padding: 1.9rem 1.85rem 1.6rem;
  background: var(--card); border-radius: 18px;
  box-shadow: 0 2px 10px rgba(18, 20, 43, .05);
}
/* Grosses Anfuehrungszeichen als Ornament, wie im Vorbild */
.rev__quote {
  position: absolute; top: .1rem; right: 1.1rem;
  font-family: var(--font-heading); font-size: 6rem; font-weight: 700;
  line-height: 1; color: rgba(var(--accent-rgb), .07);
  pointer-events: none; user-select: none;
}
.rev__g { position: absolute; top: 1.5rem; right: 1.5rem; width: 20px; height: 20px; }
/* Der Fuss sitzt bei allen Karten auf gleicher Hoehe. Der Text wird dazwischen
   zentriert statt oben festgenagelt - sonst klafft unter einer zweizeiligen
   Bewertung eine tote Flaeche, weil die Karte so hoch ist wie die laengste. */
.rev__text {
  flex: 0 1 auto; margin-block: auto; padding-right: 1.75rem;
  font-size: 1rem; line-height: 1.62; color: var(--ink);
}
.rev__foot {
  display: flex; align-items: center; gap: .8rem;
  margin-top: 1.6rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.rev__ini {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ini-bg, var(--accent)); color: #fff;
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700;
}
.rev__nm {
  font-family: var(--font-heading); font-size: .95rem; font-weight: 700;
  color: var(--ink); line-height: 1.2;
}
.rev__meta { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; }
.rev__meta .stars { display: flex; gap: 1px; color: #FBBC04; }
.rev__meta .stars svg { width: 13px; height: 13px; }
.rev__meta > span { font-size: .8rem; color: var(--muted); }

@media (max-width: 1023px) {
  .revs-head { grid-template-columns: 1fr; gap: 1.75rem; justify-items: start; }
}
@media (max-width: 767px) {
  .rev { flex-basis: 300px; width: 300px; padding: 1.5rem 1.5rem 1.4rem; }
  .revs-score { padding: 1.2rem 1.5rem; gap: .9rem; }
  .revs-score__zahl { font-size: 2.7rem; }
}

/* ---------- Einsatzgebiet-Banner ueber die volle Breite ---------- */
/* Nur die Startseiten-Section traegt zusaetzlich .section--banner. Die 40
   Standortseiten benutzen dieselbe .gebiet-Karte weiter und bleiben deshalb
   unveraendert - alle Regeln hier sind bewusst auf den Modifier gescoped. */
/* Flacher als eine normale .section (6rem), weil hier nur eine Ortsliste
   steht und kein eigener Section-Kopf mehr. */
.section--banner { padding-block: 3.25rem; }

/* Die Karte IST der Banner: volle Containerbreite statt 52rem. Kopfzeile
   (Titel + Zeile) links, Buttons rechts, darunter ueber die ganze Breite
   die Orte als Chips. */
.section--banner .gebiet {
  position: relative; overflow: hidden; isolation: isolate;
  max-width: none;
  padding: 2rem 2.2rem 1.9rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titel cta"
    "text  cta"
    "orte  orte";
  align-items: start;
  column-gap: 2.75rem;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .025) 55%);
}
.section--banner .gebiet h3 {
  grid-area: titel;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
.section--banner .gebiet > p:not([class]) { grid-area: text; margin-top: .45rem; }
.section--banner .gebiet__cta { grid-area: cta; margin-top: 0; align-self: center; }

/* Orte als Chips: abgerundete Rechtecke, die umbrechen duerfen. Loest die
   alte Zeile ab, die seitlich ausgeblendet wurde und die Haelfte der Orte
   verschluckt hat - jetzt sind alle sichtbar UND anklickbar. */
.orte {
  grid-area: orte; margin-top: 1.5rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex; flex-wrap: wrap; gap: .5rem;
}
.ort {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .9rem; border-radius: 10px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  font-family: var(--font-heading); font-size: .855rem; font-weight: 600;
  letter-spacing: -.005em; color: var(--dark-text);
  transition: background .2s ease, border-color .2s ease, color .2s ease,
              transform .25s cubic-bezier(.22, 1, .36, 1);
}
/* Ein kleines Chevron hinter jedem Ort. Ohne das sahen die Chips wie blosse
   Etiketten aus - dass jeder davon auf eine eigene Standortseite fuehrt, hat
   man erst beim Darueberfahren gemerkt. */
a.ort::after {
  content: ""; width: 6px; height: 6px; flex: none; margin-left: .1rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); opacity: .55;
  transition: transform .2s ease, opacity .2s ease;
}
a.ort:hover {
  background: rgba(var(--accent-light-rgb), .16);
  border-color: rgba(var(--accent-light-rgb), .5);
  color: #fff; transform: translateY(-2px);
}
a.ort:hover::after { opacity: 1; transform: rotate(-45deg) translate(1px, 1px); }
/* Die Sammel-Kachel traegt schon einen eigenen Pfeil */
a.ort--alle::after { content: none; }
a.ort:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
/* Der eigene Standort ist kein Link, sondern die gesetzte Marke im Feld */
.ort--heim {
  background: rgba(var(--accent-light-rgb), .16);
  border-color: rgba(var(--accent-light-rgb), .45);
  color: #fff;
}
.ort__pin { width: 14px; height: 14px; color: var(--accent-light); }
.ort__pin svg { width: 100%; height: 100%; display: block; }
/* Abschluss-Chip in Akzentfarbe, damit der Weg zur Uebersicht klar ist */
.ort--alle {
  background: rgba(var(--accent-light-rgb), .12);
  border-color: rgba(var(--accent-light-rgb), .38);
  color: var(--accent-light);
}
.ort--alle .arr { display: inline-flex; transition: transform .2s ease; }
.ort--alle:hover .arr { transform: translateX(3px); }

@media (max-width: 767px) {
  /* Auf dem Handy passen zwei Spalten nicht nebeneinander - alles wieder
     untereinander. Die Hoehe bleibt trotzdem knapp. */
  .section--banner { padding-block: 2.5rem; }
  .section--banner .gebiet {
    grid-template-columns: 1fr;
    grid-template-areas: "titel" "text" "cta" "orte";
    column-gap: 0;
  }
  .section--banner .gebiet__cta { margin-top: 1.4rem; }
  .orte { margin-top: 1.4rem; gap: .45rem; }
  .ort { padding: .45rem .75rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  a.ort:hover { transform: none; }
}

/* ---------- Footer: Umsetzer-Hinweis ---------- */
/* Vom Logo gibt es nur die Bildmarke (weiss, transparent), die Wortmarke
   steht daneben als Text. */
.footer__by {
  display: inline-flex; align-items: center; gap: .65rem;
  opacity: .8; transition: opacity .25s ease;
}
.footer__by:hover { opacity: 1; }
.footer__by-label {
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
/* Volle Wortmarke statt Icon + Schriftzug - das Original bringt den
   Springer und den Namen schon mit. */
.footer__by img { height: 30px; width: auto; display: block; }

/* ---------- Inhaber-Karte ---------- */
/* Foto ganzflaechig, darauf eine Glaskarte mit Name, Kennzahlen und
   Bewertung - wie eine Visitenkarte am Ende der Kontaktspalte. */
.inhaber {
  position: relative; margin: 0;
  width: 360px; max-width: 100%;
  padding: .55rem;
  border-radius: 26px; overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 40px 80px -45px rgba(0, 0, 0, .9);
}
.inhaber__foto {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: center top;
  border-radius: 21px;
}
.inhaber__karte {
  position: absolute; left: .55rem; right: .55rem; bottom: .55rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: 21px;
  background: rgba(6, 40, 55, .8);
  border: 1px solid rgba(255, 255, 255, .13);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.inhaber__nm {
  font-family: var(--font-heading); font-size: 1.3rem; font-weight: 700;
  letter-spacing: -.02em; color: #fff; line-height: 1.15;
}
.inhaber__rolle { margin-top: .2rem; font-size: .87rem; color: var(--dark-text-muted); }

.inhaber__zahlen {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem;
  margin-top: 1rem; padding-top: .95rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.inhaber__zahlen strong {
  display: block;
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 700;
  letter-spacing: -.02em; color: var(--accent-light); line-height: 1.1;
}
.inhaber__zahlen span {
  display: block; margin-top: .2rem;
  font-size: .66rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--dark-text-muted);
  hyphens: none; overflow-wrap: normal;
}
.inhaber__zahlen > div { min-width: 0; }
/* Einzelne Aussage statt der drei Kennzahlen (Kundenwunsch 08/2026). Eine
   Spalte statt drei, und die Zahl darf groesser stehen - sie muss die Breite
   jetzt allein tragen, sonst wirkt die Zeile verloren. */
.inhaber__zahlen--solo { grid-template-columns: 1fr; }
.inhaber__zahlen--solo strong { font-size: 1.5rem; }
.inhaber__zahlen--solo span { margin-top: .25rem; font-size: .7rem; }

.inhaber__google {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  margin-top: .95rem; padding-top: .9rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.inhaber__g { display: inline-flex; }
.inhaber__g svg { width: 17px; height: 17px; }
.inhaber__google b {
  font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #fff;
}
.inhaber__google .stars { display: inline-flex; gap: 1px; color: #FBBC04; }
.inhaber__google .stars svg { width: 14px; height: 14px; }
.inhaber__basis { margin-left: auto; font-size: .78rem; color: var(--dark-text-muted); }

@media (max-width: 767px) {
  .inhaber__zahlen { gap: .4rem; }
  .inhaber__zahlen strong { font-size: 1.05rem; }
  .inhaber__zahlen span { font-size: .6rem; letter-spacing: .03em; }
  /* Die Verkleinerung oben war noetig, solange drei Spalten nebeneinander um
     die Kartenbreite konkurriert haben. Die Solo-Variante hat die Zeile fuer
     sich und darf deshalb ihre normale Groesse behalten. */
  .inhaber__zahlen--solo strong { font-size: 1.35rem; }
  .inhaber__zahlen--solo span { font-size: .66rem; letter-spacing: .05em; }
  .inhaber__basis { margin-left: 0; }
}

/* ---------- Handy: Kopfbereiche mittig ---------- */
/* Auf schmalen Geraeten wirkt der linksbuendige Satzspiegel unruhig, weil
   jede Zeile anders lang umbricht. Zentriert wird nur der Text - Karten,
   Felder und Buttons behalten ihre Ausrichtung. */
@media (max-width: 767px) {
  /* Anfrage-Section bleibt linksbuendig - der lange Satz liest sich an einer
     festen linken Kante deutlich ruhiger als zentriert. */
  #anfrage .formsec__grid > div:first-child { text-align: left; }
  #anfrage .kicker { justify-content: flex-start; }
  #anfrage .formsec__grid > div:first-child > p { margin-inline: 0; }

  .formsec__aside { text-align: left; }
  .formsec__aside .tel { justify-content: flex-start; }

  .revs-head { justify-items: center; text-align: center; }
  .revs-intro { text-align: center; }
  .revs-intro > p { margin-inline: auto; }

  /* Formularkarte innen bleibt linksbuendig: Fragen, Kacheln, Felder */
  .formcard .fq,
  .formcard .field,
  .formcard label,
  .kf__consent { text-align: left; }

  /* Weiter/Zurueck mittig - rechtsbuendig wirkt auf schmalen Karten verloren */
  .fnav { justify-content: center; }
  .fnav [data-prev] { margin-right: 0; }
}


/* Mobile Anpassungen der Inhaber-Karte stehen bewusst HINTER der Komponente:
   die Media-Bloecke weiter oben in der Datei wuerden sonst von den
   Basisregeln ueberschrieben (gleiche Spezifitaet, spaetere Position). */
@media (max-width: 1023px) {
  /* Die Karte nimmt die volle Spaltenbreite ein und fluchtet damit mit
     Buttons und Bewertungszeile darueber. */
  .inhaber { width: 100%; max-width: none; margin-inline: 0; justify-self: stretch; }
  /* Hochformat statt quadratisch: die Glaskarte deckt das untere Drittel ab,
     bei 1:1 blieb vom Portraet fast nur der Kopf uebrig. */
  .inhaber__foto { aspect-ratio: 3 / 4; object-position: center 12%; }
}

/* ---------- Multi-Page-Ausbau (08/2026): Dropdown Orte, Beratung, Ratgeber-Teaser, Breadcrumbs ---------- */
/* Orte: zwei Spalten, darum kleinere Kacheln als in den anderen Klappen */
.dd--orte { min-width: 480px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.dd--orte .dd__eyebrow, .dd--orte .dd__item--all { grid-column: 1 / -1; }
.dd__item--ort { grid-template-columns: 32px 1fr; gap: 11px; padding: 8px 10px; }
.dd__item--ort strong {
  color: var(--dark-text-strong); font-family: var(--font-heading);
  font-weight: 600; font-size: .92rem; letter-spacing: -.01em;
}
.dd__pin {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--accent-light);
  transition: background .18s ease, border-color .18s ease;
}
.dd__item--ort:hover .dd__pin {
  background: rgba(var(--accent-light-rgb), .14);
  border-color: rgba(var(--accent-light-rgb), .42);
}
.dd__pin svg { width: 16px; height: 16px; }

/* Rechte Spalte breiter als frueher (.85fr): das Bild darf groesser werden und
   die drei Kennzahlen-Chips darunter passen nur so in eine Reihe. Der
   Textspalte tut das nicht weh, weil die Absaetze ohnehin bei 34rem
   umbrechen. */
.beratung { display: grid; grid-template-columns: 1.02fr .98fr; gap: 3.5rem; align-items: center; }
.beratung p { margin-top: 1.1rem; color: var(--muted); line-height: 1.7; max-width: 34rem; }
.beratung__card {
  background: var(--surface-alt); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 2rem;
}
.beratung__card h3 { font-size: 1.15rem; }
.beratung__punkte { margin-top: 1.2rem; display: grid; grid-template-columns: 1fr; gap: .7rem; }
.beratung__punkte li { color: var(--ink); }
.beratung__card .btn { margin-top: 1.6rem; }

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

.hero__crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--dark-text-muted); margin-bottom: 1.1rem;
}
.hero__crumbs a { color: var(--dark-text); }
.hero__crumbs a:hover { color: var(--accent-hell, #48A8E8); }
.hero__crumbs .sep { opacity: .5; }

.gebiet__orte a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color .15s ease, color .15s ease; }
.gebiet__orte a:hover { color: #fff; border-color: #fff; }
.gebiet__mehr { margin-top: 1.3rem; }
.arrow-link--hell { color: #fff; }
.arrow-link--hell:hover { color: #fff; opacity: .85; }

@media (max-width: 1023px) {
  .dd--orte { min-width: 0; }
  .beratung { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 767px) {
  .pf-grid--drei { grid-template-columns: 1fr; }
}

/* Unterseiten-Bausteine: Split-Bild, Orts-Chips, 4er-Step-Grid */
/* Rundung wie bei .card (20px) statt der bisherigen 4px: mit der harten Kante
   stand das Bild als einziges Element quer zur Kartensprache der Seite.
   Der Schatten ist bewusst dreifach gestaffelt - ein enger dunkler Kern direkt
   an der Kante, darunter ein mittlerer und ein weiter, sehr weicher Schleier.
   Ein einzelner grosser Schatten wirkt flach und grau, erst die Staffelung
   laesst das Bild plastisch auf der Flaeche stehen (Vorbild: Referenzbild). */
.bild-card {
  border-radius: 20px; overflow: hidden;
  box-shadow:
    0 1px 2px rgba(20, 22, 46, .05),
    0 10px 20px -8px rgba(20, 22, 46, .12),
    0 34px 60px -22px rgba(20, 22, 46, .30);
  border: 1px solid rgba(20, 22, 46, .06);
}
.bild-card img { display: block; width: 100%; height: auto; }

/* Kennzahlen-Chips unter dem Split-Bild. Bewusst eine eigene Klasse statt
   .ort-chips: die Orts-Chips weiter unten sind Navigation (Links), das hier
   sind Belege zum Bild. Deshalb Markenblau statt neutraler Umrandung und
   nowrap, damit die drei in EINER Reihe stehen - dafuer sind sie kompakter
   gesetzt als die Orts-Chips. Passen sie mal nicht mehr, lieber die Labels
   kuerzen als umbrechen lassen. */
.fakten-chips {
  display: flex; flex-wrap: nowrap; gap: .5rem; margin-top: 1.2rem;
}
.fakten-chips span {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .45rem .85rem; border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), .3);
  background: rgba(var(--accent-rgb), .08);
  color: var(--accent); font-size: .82rem; font-weight: 600;
  white-space: nowrap;
}
/* Am Handy passen die drei nicht nebeneinander (zusammen rund 415px, Container
   329px). Erst liefen sie 2:1 um, dann untereinander auf volle Breite - beides
   sah nach Fehler aus statt nach Absicht. Ab hier bleiben sie ganz weg: die
   Aussagen dahinter (Google-Bewertung, zwei Standorte) stehen auf derselben
   Seite ohnehin im Hero und im Footer. Am Desktop bleibt die Reihe. */
@media (max-width: 767px) {
  .fakten-chips { display: none; }
}

/* Fliesstext unter einer ZENTRIERTEN Section-Ueberschrift (.sec-head--solo).
   Der Block wird mittig gesetzt statt am linken Containerrand zu kleben -
   sonst steht die Ueberschrift mittig und der Text weit links darunter, mit
   einer grossen toten Flaeche rechts daneben. Der Text selbst bleibt
   linksbuendig, weil zentrierte Absaetze ueber mehrere Zeilen schlecht zu
   lesen sind. Ersetzt die frueheren Inline-Styles auf den Absaetzen. */
.sec-body { max-width: 46rem; margin-inline: auto; }
.sec-body p { color: var(--muted); line-height: 1.7; }
.sec-body p + p { margin-top: 1rem; }

/* Einsatzgebiete-Hub: fuenf Gruppen-Karten mit kompakter Ortsliste statt 40
   einzelner Karten (Vorbild: Referenz von Maxim). 40 gleich aussehende Karten
   sind nicht scannbar, gruppierte Listen schon.
   ACHTUNG Namensraum: .gebiet und .gebiet__mehr sind bereits vergeben (dunkler
   Vor-Ort-Block auf den 40 Ortsseiten) - deshalb hier durchgaengig .orte-hub.
   Mehrspaltiger Satz statt Grid, damit die unterschiedlich hohen Karten wie in
   der Vorlage versetzt stehen; break-inside haelt jede Karte zusammen. */
.orte-hub { columns: 3; column-gap: 1.5rem; margin-top: 3.25rem; }
.orte-hub__karte {
  break-inside: avoid; margin-bottom: 1.5rem;
  background: #fff; border: 1px solid rgba(20, 22, 46, .06);
  border-radius: 20px; padding: 1.7rem 1.5rem 1.35rem;
  box-shadow:
    0 1px 2px rgba(20, 22, 46, .04),
    0 10px 20px -8px rgba(20, 22, 46, .10);
}
.orte-hub__titel {
  position: relative; padding-left: .9rem;
  font-size: 1.2rem; line-height: 1.25; color: var(--ink);
}
.orte-hub__titel::before {
  content: ""; position: absolute; left: 0; top: .12em; bottom: .12em;
  width: 4px; border-radius: 2px; background: var(--accent-grad);
}
.orte-hub__sub {
  margin-top: .5rem; padding-left: .9rem;
  color: var(--muted); font-size: .9rem; line-height: 1.55;
}
.orte-hub__liste { margin-top: 1.15rem; }
.orte-hub__liste li + li { border-top: 1px solid var(--border); }
/* Abstaende bewusst knapp: der laengste Ortsname ("Hardthausen am Kocher",
   174px) plus das Label (126px) fuellen die Zeile fast vollstaendig aus.
   Mit den frueheren Werten fehlten genau 3px und die Zeile brach um. */
.orte-hub__liste a {
  display: flex; align-items: center; justify-content: space-between; gap: .7rem;
  padding: .68rem .5rem; border-radius: 10px;
  transition: background .16s ease;
}
.orte-hub__liste a:hover { background: rgba(var(--accent-rgb), .06); }
.orte-hub__ort { font-weight: 700; color: var(--ink); font-size: .95rem; }
.orte-hub__mehr {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--accent);
}
.orte-hub__mehr svg { width: 13px; height: 13px; transition: transform .16s ease; }
.orte-hub__liste a:hover .orte-hub__mehr svg { transform: translateX(3px); }
/* Drei Spalten erst ab 1250px: darunter schrumpft der Container mit, die
   Spalte wird zu schmal und die langen Ortsnamen brechen wieder um. */
@media (max-width: 1249px) { .orte-hub { columns: 2; } }
@media (max-width: 700px)  { .orte-hub { columns: 1; } }

/* Orts-Block: kurze Einleitung plus Chip-Wolke, beides mittig unter der
   zentrierten Ueberschrift. Die Chips selbst bekommen KEINE Breitenbegrenzung,
   sonst brechen die elf Orte auf unnoetig viele Reihen um. */
.orte-block { text-align: center; }
.orte-block__intro { color: var(--muted); max-width: 46rem; margin-inline: auto; }
.ort-chips--zentriert { justify-content: center; }

/* Kopf links, Text rechts in einer Karte. Gegenentwurf zur zentrierten
   .sec-head--solo: dort steht die Ueberschrift mittig und der Text darunter,
   hier stehen beide nebeneinander und der Text bekommt eine eigene Flaeche.
   Die Akzentkante sitzt links statt oben - Gegenstueck zu den Schritt-Karten,
   die ihre Kante oben tragen. */
.split-text {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: 3.5rem; align-items: center;
}
.split-text__kopf h2 { margin-top: 1.1rem; }
.split-text__karte {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid rgba(20, 22, 46, .06);
  border-radius: 20px; padding: 2.1rem 2.2rem;
  box-shadow:
    0 1px 2px rgba(20, 22, 46, .05),
    0 10px 20px -8px rgba(20, 22, 46, .10),
    0 34px 60px -22px rgba(20, 22, 46, .22);
}
.split-text__karte::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--accent-grad);
}
.split-text__karte p { color: var(--muted); line-height: 1.75; }
.split-text__karte p + p { margin-top: 1.1rem; }
@media (max-width: 1023px) {
  .split-text { grid-template-columns: 1fr; gap: 2rem; }
  .split-text__karte { padding: 1.7rem 1.6rem; }
}

.ort-chips { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
/* Die Chips stehen frei auf der Flaeche statt in einer flachen Umrandung:
   weisse Pille mit gestaffeltem Schatten, beim Hover hebt sie sich an und
   nimmt Markenblau an. Groesser als frueher (.45/1rem bei .9rem Schrift). */
.ort-chips a {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .62rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(20, 22, 46, .09); background: #fff;
  color: var(--ink); font-size: .95rem; font-weight: 600;
  box-shadow: 0 1px 2px rgba(20, 22, 46, .04), 0 6px 14px -8px rgba(20, 22, 46, .16);
  transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .18s ease,
              border-color .18s ease, background .18s ease, color .18s ease;
}
.ort-chips a:hover {
  color: var(--accent); border-color: rgba(var(--accent-rgb), .4);
  background: rgba(var(--accent-rgb), .05); transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(20, 22, 46, .05), 0 12px 22px -10px rgba(var(--accent-rgb), .4);
}
/* Der Sammel-Link ist die eigentliche Aktion und deshalb gefuellt - sonst
   verschwindet er zwischen zehn gleich aussehenden Ortsnamen. */
.ort-chips a.ort-chips__alle {
  background: var(--accent); color: #fff; border-color: transparent;
  box-shadow: 0 2px 4px rgba(var(--accent-rgb), .2), 0 10px 20px -10px rgba(var(--accent-rgb), .55);
}
.ort-chips a.ort-chips__alle:hover { background: var(--accent-hover); color: #fff; border-color: transparent; }

/* Zeilen gleichmaessig fuellen: ohne Begrenzung laufen bei 1174px Container
   neun Chips in die erste Reihe und nur zwei in die zweite. Die sechs
   breitesten brauchen zusammen rund 810px, der siebte wuerde ab ~950px
   dazupassen - 54rem liegt sicher in diesem Fenster und ergibt 6 oben / 5
   unten, beide Reihen zentriert. Wer Orte ergaenzt oder umbenennt, sollte den
   Wert nachmessen. */
.ort-chips--zentriert { max-width: 54rem; margin-inline: auto; }

/* Schritt-Karten nach Maxims Referenz-Screenshot: grosse Ziffer mit
   Akzentstrich, Icon oben rechts, feine Farbkante an der Oberkante.
   Bewusst eigene Klassen statt .card - dort ist .card__num eine grosse
   Geisterziffer im Hintergrund, hier fuehrt die Ziffer die Karte an. */
/* stretch explizit: ohne das bleibt die vierte Karte mit dem kuerzesten Text
   24px flacher als die anderen und die Reihe franst unten aus. */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  align-items: stretch;
}
.step {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), .055) 0%, transparent 55%),
    #fff;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem 1.6rem;
}
.step::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--accent-grad);
}
.step__num {
  display: block; font-family: var(--font-heading); font-weight: 800;
  font-size: 2rem; line-height: 1; color: var(--ink);
}
.step__num::after {
  content: ""; display: block; width: 34px; height: 3px; margin-top: .55rem;
  border-radius: 2px; background: var(--accent);
}
.step__icon {
  position: absolute; top: 1.45rem; right: 1.3rem;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--accent-grad); color: #fff;
  display: grid; place-items: center;
}
.step__icon svg { width: 19px; height: 19px; }
.step h3 { margin-top: 1.15rem; font-size: 1.1rem; color: var(--ink); }
.step p { margin-top: .6rem; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.steps__cta { margin-top: 2.5rem; display: flex; justify-content: center; }
/* Die Standortseiten fuehren nur drei Schritte statt vier. */
.steps--3 { grid-template-columns: repeat(3, 1fr); }
/* Zweispaltig frueher als die anderen Gitter: mit Ziffer UND Icon nebeneinander
   wird die Karte sonst zu schmal und die Ueberschrift bricht auf drei Zeilen. */
@media (max-width: 1023px) {
  .steps, .steps--3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .steps, .steps--3 { grid-template-columns: 1fr; }
}

.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .grid-4 { grid-template-columns: 1fr; } }

/* Ratgeber-Artikel-Layout */
.artikel { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 3.5rem; align-items: start; }
.artikel__side { position: sticky; top: calc(var(--nav-h, 76px) + 1.5rem); display: grid; gap: 1.5rem; }
/* Seitenspalte der Artikel in derselben Sprache wie die Widgets im
   Ratgeber-Hub (.rh-topics / .rh-sidecta): 16px Rundung, weicher Schatten,
   Kopfzeile klein und gesperrt mit Trennlinie darunter. Vorher waren es
   4px-Ecken auf flacher Flaeche - daneben wirkten die Hub-Widgets frischer. */
.toc {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.1rem 1rem 1.15rem;
  box-shadow: var(--shadow-card);
}
.toc h3 {
  font-family: var(--font-heading); font-size: .68rem; font-weight: 700;
  line-height: 1.2; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
  padding: 0 .35rem .85rem; border-bottom: 1px solid var(--border);
  margin-bottom: .5rem;
}
.toc ul { display: grid; gap: .15rem; }
/* Aktiver Abschnitt als gefuellte Pille - gleiche Mechanik wie
   .rh-topic.is-on im Hub. Padding und Radius liegen immer an, damit beim
   Wechsel nichts springt. */
.toc a {
  display: block; padding: .55rem .8rem; border-radius: 10px;
  color: var(--ink); font-size: .93rem; font-weight: 600; line-height: 1.35;
  transition: background .15s ease, color .15s ease;
}
.toc a:hover { background: var(--accent-subtle); color: var(--accent); }
.toc a.is-aktiv { background: var(--accent-grad); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toc a { transition: none; } }
/* Wie .rh-sidecta im Hub: Verlauf statt Flaeche, 16px Rundung, dazu ein
   Lichtschein oben rechts, der die Karte aus der Flaeche hebt. */
.artikel__cta {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--dark) 0%, var(--dark-2) 72%);
  border: 1px solid rgba(255, 255, 255, .1);
  color: var(--dark-text); border-radius: 16px;
  padding: 1.5rem 1.4rem 1.6rem;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, .55);
}
.artikel__cta::after {
  content: ""; position: absolute; top: -50%; right: -30%;
  width: 220px; height: 220px; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--accent-light-rgb), .22) 0%, transparent 70%);
}
.artikel__cta > * { position: relative; }
.artikel__cta h3 {
  color: var(--dark-text-strong); font-size: 1.15rem;
  line-height: 1.22; letter-spacing: -.02em;
}
.artikel__cta p { margin-top: .5rem; font-size: .87rem; line-height: 1.55; }
.artikel__cta .btn {
  margin-top: 1.1rem; width: 100%; justify-content: center; border-radius: 999px;
}
.artikel__body h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 2.6rem; scroll-margin-top: calc(var(--nav-h, 76px) + 1rem); }
.artikel__body h2:first-child { margin-top: 0; }
.artikel__body p { margin-top: 1rem; color: var(--muted); line-height: 1.75; }
.artikel__body ul { margin-top: 1rem; display: grid; gap: .55rem; }
.artikel__body ul li { position: relative; padding-left: 1.4rem; color: var(--muted); line-height: 1.65; }
.artikel__body ul li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.artikel__body strong { color: var(--ink); }
.artikel__body a { color: var(--accent); font-weight: 600; }
.callout { margin-top: 1.6rem; border-left: 4px solid var(--accent); background: var(--accent-subtle); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 1.1rem 1.3rem; }
.callout p { margin-top: 0; color: var(--ink); }
.artikel__meta { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; color: var(--dark-text-muted); font-size: .875rem; }
@media (max-width: 1023px) { .artikel { grid-template-columns: 1fr; gap: 2.5rem; } .artikel__side { position: static; } }

/* ---------- Unterseiten-Hero "gerade" (Chef-Feedback 08/2026):
   keine schraege Unterkante, keine Inhaber-Card, staerker abgedunkelt,
   Text-Block links voll lesbar. Homepage behaelt Video + Schraege + Card. ---------- */
.hero--gerade { clip-path: none; }
.hero--gerade .hero__wrap {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 5.5rem;
}
.hero--gerade .hero__inner { max-width: 44rem; }
/* Standortseiten: die H1 lautet "Gebäudereinigung / in <Ort>" und soll bei
   allen 40 Orten zweizeilig bleiben. Die 15ch aus der Basis reichen dafuer
   nicht - "in Hardthausen am Kocher" braucht rund 670px in einer Zeile. */
/* Die zweite Zeile traegt hier nicht nur den Ort, sondern auch den Zusatz
   ("in Neuenstadt am Kocher fuer Buero und Gewerbe" = 44 Zeichen). Bei voller
   Hero-Groesse braucht die 1400px - mehr als der Container hergibt, deshalb
   brach sie nochmal um und 29 der 40 Standortseiten waren drei- bis
   fuenfzeilig. Die Zusaetze bleiben bewusst stehen: sie unterscheiden die 40
   H1 voneinander (Duplicate Content). Stattdessen nimmt die Ueberschrift die
   volle Containerbreite und wird kleiner - bei 3.1rem braucht die laengste
   Zeile 1113px und passt damit sicher. */
.hero--ort .hero__inner { max-width: none; }
.hero--ort h1 { max-width: none; font-size: clamp(1.95rem, 3.5vw, 3.1rem); }
/* Gleiches Problem auf der Glasreinigung: "Glas- und Fassadenreinigung" ist
   mit 27 Zeichen der laengste Leistungsname und braucht in einer Zeile rund
   868px. Gegen die 15ch der Basis bricht er von selbst um und ergibt zusammen
   mit dem <br> DREI Zeilen, waehrend die uebrigen fuenf Leistungsseiten
   zweizeilig sind. Etwas mehr Breite plus rund 5 Prozent kleinere Schrift
   reichen gerade, damit der Leistungsname auf eine Zeile passt, ohne dass die
   Ueberschrift neben den anderen Seiten sichtbar aus der Reihe faellt. */
.hero--titel-lang .hero__inner { max-width: 53rem; }
.hero--titel-lang h1 { max-width: none; font-size: clamp(2.4rem, 4.3vw, 3.7rem); }
/* Ratgeber-Artikel: Artikeltitel sind deutlich laenger als Leistungsnamen -
   "Bauendreinigung: So laeuft sie ab," braucht bei voller Hero-Groesse 976px.
   Gegen die 15ch der Basis brach deshalb JEDE der beiden Haelften nochmal um,
   die Heros wurden drei- bis vierzeilig. Mehr Breite plus kleinere Schrift
   halten sie bei zwei Zeilen; kleiner ist hier auch inhaltlich richtig, weil
   ein Artikeltitel keine Leistungs-Headline ist. */
.hero--artikel .hero__inner { max-width: 58rem; }
.hero--artikel h1 { max-width: none; font-size: clamp(2rem, 3.6vw, 3.25rem); }
.hero--gerade .hero__veil {
  background:
    linear-gradient(100deg,
      rgba(0, 0, 0, .86) 0%,
      rgba(0, 0, 0, .72) 45%,
      rgba(0, 0, 0, .45) 75%,
      rgba(0, 0, 0, .30) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, transparent 25%),
    linear-gradient(0deg, rgba(0, 0, 0, .35) 0%, transparent 30%);
}
/* Unterseiten-Hero: FESTE Hoehe, bewusst ohne svh. Der Homepage-Hero waechst
   mit der Fensterhoehe, die Unterseiten sollen dagegen auf jedem Bildschirm
   gleich hoch sein - auf dem MacBook wie am grossen Monitor - und flacher als
   bisher (vorher 782px am Mac, 1100px am Monitor, und die Ratgeber-Seite fiel
   mit 814px sogar aus der Reihe).
   740px ist bewusst knapp UEBER dem laengsten gemessenen Inhalt: 590px
   (Ratgeber-Hero ab 1512px Breite) + 104px Padding oben + 44px unten = 738px.
   Nur weil die Zahl darueber liegt, bestimmt sie die Hoehe und nicht der Text
   - sonst waeren die Seiten wieder unterschiedlich hoch. Wer die Hero-
   Headlines verlaengert, muss den Wert neu pruefen. */
@media (min-width: 1024px) {
  .hero--gerade { min-height: 740px; }
  .hero--gerade .hero__wrap {
    padding-top: calc(var(--nav-h) + 1.75rem);
    padding-bottom: 2.75rem;
  }
}

/* CTA-Block mit Stadt-Hintergrund (Kontakt-Seite) */
.cta-stadt { position: relative; overflow: hidden; }
.cta-stadt__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
/* Die Stadt soll nur noch als Textur durchkommen, nicht als Motiv: dunkler
   Grundton plus ein Hauch Markenblau, damit es nicht nach Graufilter aussieht. */
.cta-stadt__bg { filter: grayscale(.35) contrast(.94); }
/* 07.08.2026: Der letzte Farbstopp war exakt der Startton des Footers
   (#101014). Dadurch loeste sich das Stadtbild nach unten in den Footer auf
   und die beiden Bloecke lasen sich als eine Flaeche - genau das soll nicht
   mehr sein. Jetzt endet der Block in seinem eigenen Blauschwarz, der Footer
   darunter ist neutral schwarz. Die Kante ist damit gewollt sichtbar. */
.cta-stadt__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(4, 10, 16, .93) 0%,
      rgba(4, 10, 16, .82) 34%,
      rgba(7, 20, 29, .95) 68%,
      #0a1e29 86%,
      #0a1e29 100%),
    linear-gradient(120deg, rgba(0, 96, 134, .5) 0%, transparent 55%, rgba(72, 168, 232, .28) 100%);
}
/* Hier sass ein Lichtschein, dessen Maximum GENAU auf der Naht lag - sein
   Gegenstueck oben im Footer ebenso. Die Farbwerte passten rechnerisch
   zusammen, trotzdem war ein Strich zu sehen: zwei Verlaeufe, die beide auf
   der Fuge ihren Hoehepunkt haben, bilden dort einen Helligkeitsgrat, und den
   liest das Auge als Linie - rechts am staerksten, weil der Footer dort einen
   zweiten Schein bei 85% trug, fuer den es oberhalb kein Gegenstueck gab.
   Deshalb traegt die Fuge jetzt gar kein Licht mehr: unten im Block steht das
   gleiche deckende #101014 wie oben im Footer, der Uebergang ist damit
   rechnerisch UND optisch nahtlos. Das Markenblau sitzt weiter unten im
   Footer (siehe .footer). Wer hier wieder einen Schein einbaut, muss ihn an
   der Unterkante auf null auslaufen lassen, sonst ist der Strich zurueck. */
/* Mehr Luft nach unten, damit Text und Buttons nicht in der Uebergangszone
   stehen, sondern klar darueber. */
.cta-stadt { padding-bottom: 8.5rem; }
/* Der Extra-Fuss gilt nur, wenn danach wirklich der Footer kommt. Auf den
   Unterseiten folgt eine helle Section - dort sind die 8,5rem einfach ein
   Loch unter den Buttons, am Handy faellt es am staerksten auf. */
.cta-stadt:has(+ section) { padding-bottom: var(--section-py); }
@media (max-width: 767px) {
  .cta-stadt:has(+ section) { padding-bottom: var(--section-py-mobile); }
}
.cta-stadt .container { position: relative; z-index: 2; text-align: center; }
.cta-stadt .sec-head { margin-inline: auto; }
.cta-stadt__sub { margin-top: 1rem; color: var(--dark-text); max-width: 34rem; margin-inline: auto; line-height: 1.65; }
.cta-stadt__cta { margin-top: 2rem; display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* Gestapelt sehen zwei verschieden breite Knoepfe unruhig aus - am Handy
   laufen sie darum beide auf volle Breite. */
@media (max-width: 559px) {
  .cta-stadt__cta { flex-direction: column; align-items: stretch; gap: .75rem; }
  .cta-stadt__cta .btn { width: 100%; justify-content: center; }
}

/* Ansprechpartner-Widget in der FAQ-Aside (Referenz-Design Maxim 08/2026) */
/* Bewusst schmal gehalten: die Karte ist Beiwerk neben den Fragen, kein
   zweiter Blickfang. */
.ap-widget { margin-top: 1.75rem; max-width: 20.5rem; }
/* Auf der Startseite steht in der Aside nur noch die Karte - ohne Kicker
   darueber braucht sie keinen Abstand nach oben und sitzt buendig mit der
   ersten Frage. Erst dadurch ist die Aside kuerzer als die Fragenspalte und
   das sticky bekommt ueberhaupt Weg zum Mitlaufen. */
.faq__aside--nur-karte .ap-widget { margin-top: 0; }
/* Auf dem Handy klappt die FAQ einspaltig. Die Karte war hier zentriert, stand
   damit aber als einziges Element aus der Achse - Ueberschrift, Kicker und die
   Fragen darunter sind alle linksbuendig. Jetzt laeuft sie ueber die volle
   Containerbreite: dadurch fluchtet sie links mit der Ueberschrift UND rechts
   mit den Fragen. Nur die 20.5rem stehen zu lassen wuerde zwar links fluchten,
   auf breiteren Handys aber rechts eine Stufe lassen. */
@media (max-width: 767px) {
  .ap-widget { margin-inline: 0; max-width: none; }
}
.ap-widget__foto {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
/* Leistungsseiten: das Portrait wird auf Kopf und Schultern beschnitten, damit
   die linke Spalte nicht tiefer laeuft als die Fragenliste rechts. Ungekuerzt
   ist das Bild 398px hoch und die Aside haengt knapp 190px unten ueber.
   object-position sitzt bewusst im oberen Drittel, sonst schneidet der Rahmen
   den Kopf an. Nur als Modifier, damit die Startseite unveraendert bleibt. */
.ap-widget--kompakt .ap-widget__foto {
  aspect-ratio: 3 / 2; height: auto;
  object-fit: cover; object-position: 50% 0%;
}
/* Ratgeber-Seiten: dort steht neben der Karte nur eine kurze Fragenliste, die
   3:2-Variante haengt darunter deutlich ueber. 16:9 zeigt Kopf und verschraenkte
   Arme und bleibt knapp innerhalb der Fragenspalte. Das setzt die kurze
   zweiwortige FAQ-Headline voraus - eine dreizeilige Ueberschrift frisst den
   Spielraum wieder auf. Tiefer als etwa 110px schneidet der Rahmen das Kinn an,
   weil der Kopf im Original schon bei 300 von 1125 Pixeln endet. */
.ap-widget--flach { margin-top: 1.1rem; }
.ap-widget--flach .ap-widget__foto {
  aspect-ratio: 16 / 9; height: auto;
  object-fit: cover; object-position: 50% 0%;
}
.ap-widget__card {
  position: relative; margin-top: -18px;
  background: var(--accent); color: #fff;
  border-radius: var(--radius-xl); padding: 1.3rem 1.25rem 1.25rem;
}
.ap-widget__label {
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 1.05rem; color: rgba(255, 255, 255, .92);
}
.ap-widget__name {
  margin-top: .7rem; font-family: var(--font-heading);
  font-weight: 700; font-size: 1.25rem; line-height: 1.15;
}
.ap-widget__rolle { margin-top: .15rem; font-size: .88rem; color: rgba(255, 255, 255, .72); }
.ap-widget__linie { border: 0; border-top: 1px solid rgba(255, 255, 255, .35); margin: 1rem 0; }
/* Eckig wie die uebrigen Buttons der Seite, nicht als Pille */
.ap-widget__cta {
  display: flex; align-items: center; justify-content: space-between; gap: .9rem;
  background: var(--dark-2); color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 4px; padding: .8rem .8rem .8rem 1.1rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ap-widget__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .55); }
.ap-widget__cta strong {
  display: block; font-family: var(--font-heading); font-size: .95rem;
}
.ap-widget__cta small {
  display: flex; align-items: center; gap: .4rem;
  margin-top: .2rem; font-size: .78rem; color: rgba(255, 255, 255, .78);
}
.ap-widget__dot {
  width: 7px; height: 7px; border-radius: 50%; background: #22C55E; flex: none;
}
.ap-widget__arr {
  width: 38px; height: 38px; flex: none; border-radius: 4px;
  background: #fff; color: var(--accent);
  display: grid; place-items: center;
  transition: transform .18s ease;
}
.ap-widget__cta:hover .ap-widget__arr { transform: translateX(3px); }

/* Danke-Modal im Referenz-Stil (Logo, Button-Stack, Socials) */
.dankem__card { text-align: center; max-width: 460px; padding: 2.6rem 2.2rem 2.2rem; }
.dankem__logo {
  display: block; margin: 0 auto 1.4rem; width: auto; height: 56px;
  animation: dankem-rein .5s ease both;
}
.dankem__card h3 { font-size: clamp(1.5rem, 3vw, 1.8rem); animation: dankem-rein .5s ease .06s both; }
.dankem__text { max-width: 30rem; margin-inline: auto; animation: dankem-rein .5s ease .12s both; }
.dankem__aktionen {
  margin-top: 1.7rem; display: grid; gap: .7rem;
  max-width: 300px; margin-inline: auto;
  animation: dankem-rein .5s ease .18s both;
}
.dankem__aktionen .btn { width: 100%; justify-content: center; }
.dankem__connect {
  margin-top: 1.8rem; font-size: .85rem; color: var(--muted);
  animation: dankem-rein .5s ease .24s both;
}
.dankem__socials {
  margin-top: .8rem; display: flex; justify-content: center; gap: .8rem;
  animation: dankem-rein .5s ease .3s both;
}
.dankem__socials a {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--border);
  box-shadow: 0 6px 16px -8px rgba(20, 23, 28, .25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dankem__socials a:hover { transform: translateY(-3px); box-shadow: 0 12px 22px -10px rgba(20, 23, 28, .35); }
.dankem__socials svg { width: 24px; height: 24px; }
@keyframes dankem-rein {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dankem__logo, .dankem__card h3, .dankem__text, .dankem__aktionen, .dankem__connect, .dankem__socials { animation: none; }
}
.dankem__socials a[hidden] { display: none; }

/* Über-uns kompakt (Redesign 08/2026: Steckbrief statt Logo-Split) */
.ueber { padding-block: 4.5rem; }
.ueber__grid {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 4rem; align-items: center;
}
.ueber h2 { margin-top: 1.1rem; }
.ueber__text { margin-top: 1.1rem; color: var(--dark-text); line-height: 1.7; max-width: 34rem; }
.ueber__cta { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }
/* Umgebrochen standen die beiden Knoepfe verschieden breit uebereinander
   (272 zu 193px) - am Handy liest sich das wie ein Fehler. */
@media (max-width: 559px) {
  .ueber__cta { flex-direction: column; align-items: stretch; gap: .75rem; }
  .ueber__cta .btn { width: 100%; justify-content: center; }
}
/* Teamfoto steht in der rechten Spalte des Grids und nimmt die Hoehe der
   Textspalte an. Die Gesichter sitzen im Original knapp ueber der Mitte,
   deshalb object-position 42 Prozent. */
.ueber__foto {
  position: relative; overflow: hidden; height: 100%; min-height: 26rem;
  border-radius: var(--radius-xl);
  border: 1px solid var(--dark-border, rgba(255,255,255,.14));
}
/* Nur das DIREKTE Kind: im figcaption sitzt ebenfalls ein img (das Logo), und
   das darf die Kino-Regeln des Teamfotos nicht abbekommen - als ".ueber__foto
   img" waere diese Regel spezifischer als die Logo-Klasse und wuerde das Logo
   auf volle Breite im 21:9-Format aufblasen. */
.ueber__foto > img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
}
/* right als Gegenstueck zu left: der Chip stand frueher unter einem 1174px
   breiten Bild, in der schmalen Spalte lief er sonst bis an den Rand. */
.ueber__foto figcaption {
  position: absolute; left: .8rem; right: .8rem; bottom: .8rem;
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem .8rem .4rem .6rem; border-radius: var(--radius-xl);
  background: rgba(10, 14, 26, .72); backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--dark-text); font-size: .8rem; line-height: 1.35;
}
/* Logo im Chip: die Weiss-Variante wie in Navi und Footer, auf Zeilenhoehe
   gezogen und mit einer Trennlinie vom Text abgesetzt. */
.ueber__foto-logo {
  width: auto; height: 26px; flex: none;
  padding-right: .7rem;
  border-right: 1px solid rgba(255, 255, 255, .2);
}
/* Einspaltig gibt es keine Textspalte mehr, an der sich das Foto ausrichten
   koennte - dort braucht es wieder ein eigenes Seitenverhaeltnis. */
@media (max-width: 1023px) {
  .ueber__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .ueber__foto { height: auto; min-height: 0; }
  .ueber__foto > img { height: auto; aspect-ratio: 4 / 3; }
}

/* Beratungs-Section: Chat-Vignette statt Checkmark-Karte (08/2026) */
/* Eigene Flaeche statt .section--alt: auf Startseite, Kontakt und den
   Leistungsseiten steht davor eine Section in --bg, auf den Ratgeberseiten
   dagegen eine in --surface-alt. Mit dem Creme aus dem Bestand haette es also
   immer irgendwo zwei gleichfarbige Sections hintereinander gegeben. Der
   Petrol-Hauch hebt sich von beiden Cremetoenen ab und bleibt in der Marke. */
.beratung-sec {
  padding-block: 4.5rem;
  background: rgba(var(--accent-rgb), .055);
  border-block: 1px solid rgba(var(--accent-rgb), .1);
}
.beratung-sec__text { margin-top: 1.1rem; color: var(--muted); line-height: 1.7; max-width: 32rem; }
.beratung-sec__cta { margin-top: 1.8rem; display: flex; gap: 1rem; flex-wrap: wrap; }
/* Wie bei den anderen Knopfpaaren: umgebrochen sonst 210 zu 249px. */
@media (max-width: 559px) {
  .beratung-sec__cta { flex-direction: column; align-items: stretch; gap: .75rem; }
  .beratung-sec__cta .btn { width: 100%; justify-content: center; }
}

.chat { max-width: 26rem; justify-self: end; width: 100%; }
.chat__tag {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: .8rem;
}
.chat__bubble {
  position: relative; padding: 1rem 1.2rem; line-height: 1.55;
  box-shadow: var(--shadow-card);
}
/* Weiss statt --surface-alt: die Section hat jetzt einen leichten Petrol-Ton,
   und das warme Creme der Blase lag darauf fast auf derselben Helligkeit -
   sie war kaum noch als eigene Flaeche zu erkennen. */
.chat__bubble--frage {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px 18px 18px 4px;
  margin-right: 2.2rem; transform: rotate(-.4deg);
}
.chat__bubble--frage p { color: var(--ink); }
.chat__bubble--antwort {
  margin-top: 1rem; margin-left: 2.2rem; transform: rotate(.4deg);
  background: var(--accent); color: #fff;
  border-radius: 18px 18px 4px 18px;
  padding-left: 3.6rem;
}
.chat__bubble--antwort img {
  position: absolute; left: -1.4rem; bottom: -.6rem;
  width: 44px; height: 44px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--bg); box-shadow: var(--shadow-card);
}
.chat__hinweis {
  margin-top: 1.1rem; text-align: right;
  font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: .95rem; color: var(--muted);
}
@media (max-width: 1023px) {
  .chat { justify-self: start; }
}
.chat__bubble--frage p, .chat__bubble--antwort p { margin-top: 0; max-width: none; }
.chat__bubble--antwort p { color: #fff; }


/* ==========================================================================
   §X Force-Dark der Handy-Browser
   --------------------------------------------------------------------------
   color-scheme: only light auf :root sagt "diese Seite gibt es nur hell".
   Samsung Internet ignoriert das aber, wenn der Nutzer "Dunkles Design
   erzwingen" aktiv hat - dann faerbt der Browser algorithmisch selbst um, weil
   er die Seite fuer eine haelt, die Dark Mode gar nicht kennt.

   Der Block hier ist die Gegenmassnahme: die Seite BEANTWORTET
   prefers-color-scheme: dark - und zwar mit exakt denselben Tokens wie im
   Hellmodus. Damit gilt sie als "unterstuetzt Dark Mode selbst", und das
   algorithmische Umfaerben entfaellt. Farblich aendert sich nichts, die Werte
   sind 1:1 die aus §1.

   Wenn du in §1 ein Token aenderst, hier mitziehen - sonst faellt die Seite
   auf Geraeten mit Dark Mode auf den alten Wert zurueck.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: only light;
    --accent: #006086;
    --accent-hover: #004E6D;
    --accent-rgb: 0, 96, 134;
    --accent-subtle: rgba(var(--accent-rgb), .07);
    --accent-light: #48A8E8;
    --accent-light-rgb: 72, 168, 232;
    --accent-grad: linear-gradient(135deg, var(--accent) 0%, #2484B7 55%, var(--accent-light) 100%);
    --band-grad: linear-gradient(90deg, var(--accent) 0%, #2484B7 52%, var(--accent-light) 100%);
    --ink: #14162E;
    --dark: #0A3A50;
    --dark-2: #062837;
    --muted: #6B6660;
    --border: #E6E1D8;
    --bg: #FAF7F2;
    --surface-alt: #F0EDE6;
    --card: #FFFFFF;
    --dark-card: rgba(255, 255, 255, .06);
    --dark-border: rgba(255, 255, 255, .14);
    --dark-text-strong: rgba(255, 255, 255, .96);
    --dark-text: rgba(255, 255, 255, .80);
    --dark-text-muted: rgba(255, 255, 255, .55);
    --font-heading: 'Archivo', system-ui, sans-serif;
    --font-body: 'Public Sans', system-ui, sans-serif;
    --font-accent: 'Playfair Display', Georgia, serif;
    --section-py: 6rem;
    --section-py-mobile: 4rem;
    --container-max: 1240px;
    --container-pad: 24px;
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    --radius-xl: 6px;
    --icon-size: 44px;
    --nav-h: 76px;
    --shadow-card: 0 2px 8px rgba(18, 20, 43, .06);
    --shadow-card-hover: 0 26px 50px -24px rgba(18, 20, 43, .28);
    --shadow-btn: 0 4px 12px rgba(var(--accent-rgb), .28);
    --z-nav: 100;
    --z-mobile-menu: 200;
    --z-sticky-cta: 300;
    --z-modal: 1000;
  }
  html, body { background: var(--bg); color: var(--ink); }
}