/* ============================================================
   LEINBACH DIENSTLEISTUNGEN, Redesign 2026-08 (Vorbild-DNA: hell,
   Navy + Gold, Card-basiert, gerahmter Hero). Nur Homepage (index.html).
   Fonts self-hosted (DSGVO). Kein GSAP: IntersectionObserver-Reveals.
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('fonts/plus-jakarta-sans-normal-400.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-italic-600.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  --navy: #141518; /* Schwarz (Maxim 21.08., vorher Navy #161A4E) */
  --navy-tief: #0A0B0D;
  --gold: #16A34A; /* Signal-Gruen, gleicher Ton wie styles.css --accent */
  --gold-hover: #107C38;
  --gold-tief: #0C6B30; /* fuer kleinen Text auf Weiss/bg-soft (Kontrast 4,5:1) */
  --gold-rgb: 22, 163, 74;
  --navy-rgb: 20, 21, 24;
  --creme: #DCF7E5;
  --bg: #FFFFFF;
  --bg-soft: #F4F5F6;
  /* --bg-mint / --bg-sand entfernt (Maxim 24.08.): die Site faehrt ausschliesslich
     den Homepage-Rhythmus aus Weiss, Grau (--bg-soft) und Schwarz (--navy). */
  --ink: #16171A;
  --muted: #4E5157;
  --border: #E3E4E6;
  --radius: 14px;
  --radius-lg: 24px;
  --schatten-soft: 0 4px 14px -2px rgba(16,17,20,.08), 0 2px 6px -2px rgba(16,17,20,.04);
  --schatten-card: 0 10px 30px -10px rgba(16,17,20,.18);
  --schatten-glow: 0 12px 40px -10px rgba(22,163,74,.45);
  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-padding-top: 92px; background: var(--navy-tief); overscroll-behavior-y: none; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.7;
  color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; }

.shell { width: min(1180px, 100% - 2.4rem); margin-inline: auto; }

/* ---------- Typo-Bausteine ---------- */
h1, h2, h3 { font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.kicker {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold-tief);
  margin-bottom: .8rem;
}
.bg-navy .kicker, .cta__links .kicker { color: var(--gold); }
.sec-h { font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.12; margin-bottom: .7rem; }
.sec-sub { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 44rem; }
.serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--gold); letter-spacing: 0; }
.sec-head--center { text-align: center; margin-bottom: 2.6rem; }
.sec-head--center .sec-sub { margin-inline: auto; }
section { padding: 4.2rem 0; }
@media (min-width: 1024px) { section { padding: 6rem 0; } }
.bg-soft { background: var(--bg-soft); }
.bg-navy { background: var(--navy); color: rgba(255,255,255,.82); }
.bg-navy .sec-h { color: #fff; }
.bg-navy .sec-sub { color: rgba(255,255,255,.66); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-weight: 700; font-size: 1rem; border-radius: 10px; border: 0;
  padding: .95rem 1.6rem; transition: transform .25s cubic-bezier(.22,1,.36,1),
    box-shadow .25s ease, background .25s ease, opacity .25s ease;
  white-space: nowrap;
}
.btn--gold { background: var(--gold); color: var(--navy-tief); box-shadow: var(--schatten-glow); }
.btn--gold:hover { background: var(--gold-hover); transform: translateY(-2px); }
.btn--glass {
  border: 2px solid rgba(255,255,255,.4); background: rgba(255,255,255,.06);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff;
}
.btn--glass:hover { background: rgba(255,255,255,.16); transform: scale(1.02); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-tief); transform: translateY(-2px); }
.btn--line { border: 1.5px solid var(--border); background: var(--bg); color: var(--navy); }
.btn--line:hover { border-color: var(--gold); transform: translateY(-2px); }

/* ---------- Reveals (IntersectionObserver setzt .sichtbar) ---------- */
.rv { opacity: 0; transform: translateY(14px); }
.rv-l { opacity: 0; transform: translateX(-14px); }
.rv-r { opacity: 0; transform: translateX(14px); }
.rv, .rv-l, .rv-r {
  transition: opacity .45s ease-out, transform .55s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.sichtbar { opacity: 1; transform: none; will-change: auto; }
/* Handy: kein Stagger-Nachtroepfeln, alles kommt direkt und fluessig */
@media (max-width: 700px) {
  .rv, .rv-l, .rv-r { transition-delay: 0s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-l, .rv-r { opacity: 1; transform: none; transition: none; }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid currentColor; outline-offset: 3px;
}

/* ---------- Header ---------- */
.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.kopf__zeile { display: flex; align-items: center; gap: 1.4rem; height: 76px; }
.marke { display: inline-flex; align-items: center; gap: .6rem; }
.marke img { height: 62px; width: auto; }
.marke__txt { display: inline-flex; flex-direction: column; font-weight: 800;
  font-size: .95rem; line-height: 1.1; letter-spacing: .01em; color: var(--navy); }
.marke__txt b { color: var(--gold); font-weight: 800; }
.kopf__nav { display: none; align-items: center; gap: 1.6rem; margin-inline: auto; }
.kopf__nav a { font-weight: 600; font-size: .95rem; color: var(--ink); transition: color .2s ease; }
.kopf__nav a:hover { color: var(--gold-hover); }
.kopf__tel { display: none; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; color: var(--navy); }
.kopf__wa {
  /* Original-WhatsApp-Look (Maxim 21.08.): Brand-Gruen #25D366 als Verlauf,
     weisses Logo/Text, Glow + leichter Innen-Glanz */
  display: none; align-items: center; gap: .55rem;
  background: linear-gradient(180deg, #31E273 0%, #25D366 45%, #1CA84F 100%);
  color: #fff; font-weight: 800; font-size: .92rem; letter-spacing: .01em;
  border-radius: 999px; padding: .6rem 1.2rem;
  box-shadow: 0 8px 20px -8px rgba(37,211,102,.7), inset 0 1px 0 rgba(255,255,255,.4);
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
.kopf__wa svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.kopf__wa:hover {
  transform: translateY(-1px) scale(1.03); filter: brightness(1.05);
  box-shadow: 0 10px 26px -8px rgba(37,211,102,.85), inset 0 1px 0 rgba(255,255,255,.4);
}
.kopf__burger {
  margin-left: auto; display: grid; gap: 5px; background: none; border: 0; padding: .6rem;
}
.kopf__burger span { width: 24px; height: 2.5px; border-radius: 2px; background: var(--navy); }
@media (min-width: 1024px) {
  .kopf__nav { display: flex; }
  .kopf__tel, .kopf__wa { display: inline-flex; }
  .kopf__burger { display: none; }
}

/* ---------- Mobile-Menü: iOS-Bottom-Sheet (Maxim 21.08., Referenz-Spec) ---------- */
.kopf__burger { width: 44px; height: 44px; border-radius: 12px; background: rgba(20,21,24,.06);
  place-items: center; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mmenu { position: fixed; inset: 0; z-index: 220; }
.mmenu[hidden] { display: none; }
.mmenu__backdrop { position: absolute; inset: 0; background: rgba(10,11,13,0);
  transition: background .35s ease; pointer-events: none; }
.mmenu.offen .mmenu__backdrop { background: rgba(10,11,13,.72); pointer-events: auto; }
.mmenu__sheet {
  position: absolute; left: 0; right: 0; bottom: 0; top: 12px;
  border-radius: 24px 24px 0 0; overflow: hidden;
  background: linear-gradient(180deg, #1B1E23 0%, #16181D 55%, #101215 100%);
  box-shadow: 0 -30px 80px -20px rgba(0,0,0,.6);
  display: flex; flex-direction: column;
  transform: translateY(105%);
}
.mmenu__sheet::before { content: ""; position: absolute; top: -20%; right: -10%;
  width: 70%; height: 55%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(var(--gold-rgb), 1), transparent 65%); opacity: .18; }
.mmenu.offen .mmenu__sheet { animation: sheet-up .55s cubic-bezier(.32,.72,.18,1) forwards; }
.mmenu.geht .mmenu__sheet { animation: sheet-down .45s cubic-bezier(.32,.72,.18,1) forwards; }
@keyframes sheet-up { from { transform: translateY(105%); } to { transform: translateY(0); } }
@keyframes sheet-down { from { transform: translateY(0); } to { transform: translateY(105%); } }
.mmenu__grabber { width: 44px; height: 5px; border-radius: 99px; background: rgba(255,255,255,.22);
  margin: 10px auto 0; flex: none; }
.mmenu__top { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px; flex: none; }
.mmenu__top .marke img { height: 40px; }
.mmenu__top .marke__txt { color: #fff; }
.mmenu__zu { width: 44px; height: 44px; display: grid; place-items: center; border: 0;
  border-radius: 12px; background: rgba(255,255,255,.08); color: #fff;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mmenu__liste { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 22px;
  scrollbar-width: none; }
.mmenu__liste::-webkit-scrollbar { display: none; }
.mmenu__item { border-bottom: 1px solid rgba(255,255,255,.04); opacity: 1; }
.mmenu.offen .mmenu__item { opacity: 0; transform: translateY(20px) scale(.985);
  animation: item-in .55s cubic-bezier(.16,1,.3,1) forwards; }
.mmenu.offen .mmenu__item:nth-child(1) { animation-delay: .05s; }
.mmenu.offen .mmenu__item:nth-child(2) { animation-delay: .10s; }
.mmenu.offen .mmenu__item:nth-child(3) { animation-delay: .15s; }
.mmenu.offen .mmenu__item:nth-child(4) { animation-delay: .20s; }
.mmenu.offen .mmenu__item:nth-child(5) { animation-delay: .25s; }
@keyframes item-in { to { opacity: 1; transform: none; } }
.mmenu__zeile { display: flex; align-items: center; gap: 1rem; min-height: 64px; width: 100%;
  color: #fff; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mmenu__nr { font-size: 11px; font-weight: 700; letter-spacing: .15em; color: var(--gold);
  opacity: .5; flex: none; width: 24px; transition: opacity .3s ease; }
.mmenu__item.auf .mmenu__nr { opacity: 1; }
.mmenu__titel { font-family: var(--font-sans); font-size: 27px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1; }
.mmenu__chev { margin-left: auto; width: 40px; height: 40px; flex: none; display: grid;
  place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.75); transition: transform .35s ease, background .3s ease;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mmenu__item.auf .mmenu__chev { transform: rotate(180deg); background: rgba(var(--gold-rgb), .18); color: var(--gold); }
.mmenu__sub { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.mmenu__sub a { display: block; padding: .55rem 0 .55rem calc(24px + 1rem);
  font-size: 1rem; font-weight: 600; color: rgba(255,255,255,.66);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mmenu__sub a:last-child { padding-bottom: 1rem; color: var(--gold); }
.mmenu__fuss { flex: none; padding: 14px 22px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: .8rem;
  border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); }
.mmenu__tel { display: flex; align-items: center; gap: .8rem; color: #fff;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mmenu__tel-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: rgba(var(--gold-rgb), .16); color: var(--gold); }
.mmenu__tel-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: .15em;
  text-transform: uppercase; color: var(--gold); }
.mmenu__tel-nr { display: block; font-size: 1.1rem; font-weight: 800; }
.mmenu__cta { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .mmenu.offen .mmenu__sheet, .mmenu.geht .mmenu__sheet, .mmenu.offen .mmenu__item { animation: none; }
  .mmenu.offen .mmenu__sheet { transform: none; }
  .mmenu.offen .mmenu__item { opacity: 1; transform: none; }
  .mmenu__backdrop { transition: none; }
}

/* ---------- HERO: gerahmte Bildkarte ---------- */
.held { padding: calc(76px + .75rem) .75rem .75rem; background: var(--bg); }
.held__rahmen {
  position: relative; overflow: hidden; border-radius: 24px;
  display: flex; align-items: flex-end;
  background: var(--navy);
  /* Handy: FESTE Hoehe statt Viewport-Einheiten. vh/svh/dvh reagieren je nach
     Browser auf die einklappende Adressleiste und liessen den Hero beim
     Scrollen wachsen (Maxim 21.08.: "da soll nichts passieren"). */
  min-height: 620px;
}
@media (min-width: 1024px) { .held__rahmen { border-radius: 40px; min-height: min(88vh, 820px); } }
.held__bild { position: absolute; inset: 0; }
.held__bild img { width: 100%; height: 100%; object-fit: cover; }
.held__schleier { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,11,13,.92) 0%, rgba(10,11,13,.62) 45%, rgba(10,11,13,.25) 100%); }
.held__schleier::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,11,13,.85) 0%, transparent 45%); }
.held__raster { position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px);
  background-size: 34px 34px; }
.held__inhalt { position: relative; z-index: 2; width: 100%;
  /* linksbuendig an der Kartenkante (Maxim 21.08.), Innenabstand bleibt */
  padding: clamp(2rem, 5vw, 4.5rem); }
.held__badge {
  display: inline-flex; align-items: center; gap: .5rem;
  border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 8px; padding: .45rem 1rem; color: #fff; /* eckig mit leichter Rundung (Maxim 21.08.) */
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
}
.held__badge svg { color: var(--gold); }
.held h1 {
  color: #fff; font-size: clamp(1.55rem, 7.3vw, 5.6rem); line-height: 1.04;
  margin: 1.1rem 0 1.2rem; max-width: 15ch;
}
@media (min-width: 1024px) { .held h1 { line-height: .98; } }
.held h1 .serif { font-size: 1.04em; }
.held__sub { color: rgba(255,255,255,.78); max-width: 34rem; font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: 1.7rem; }
.held__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.2rem; }

/* schwebende Review-Card unten rechts */
.held__review {
  position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 4vw, 3rem); z-index: 3;
  width: min(330px, calc(100% - 2rem));
  background: #fff; border-radius: var(--radius-lg); padding: 1.2rem 1.3rem;
  box-shadow: var(--schatten-card); transition: transform .3s ease;
  display: none;
}
.held__review:hover { transform: translateY(-4px); }
@media (min-width: 1024px) { .held__review { display: block; } }

/* Sticky-Modus: klebt beim Scrollen unten rechts, bis die Bewertungs-Section kommt */
.held__review--fest {
  position: fixed; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  top: auto; z-index: 95; width: min(300px, calc(100vw - 3rem));
  box-shadow: 0 20px 50px -16px rgba(0,0,0,.45);
  opacity: 1; transform: none;
}
.held__review { transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .45s ease; }
/* Ausblenden ab der Bewertungs-Section: laenger und weicher, damit die Karte
   nicht wegspringt sondern verschwindet */
.held__review--weg { opacity: 0; transform: translateY(22px) scale(.94); pointer-events: none; }
/* Kurzes Ausblenden waehrend des Umhaengens zwischen Hero- und Sticky-Position */
.held__review--blende { opacity: 0; transform: translateY(10px) scale(.97); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease; }
/* Zitat-Wechsel: sanftes Aus- und Einblenden von Text + Name */
.held__review p, .held__review-wer { transition: opacity .35s ease, transform .35s ease; }
.held__review--wechsel p, .held__review--wechsel .held__review-wer {
  opacity: 0; transform: translateY(6px);
}
.held__review-punkte { display: flex; gap: .3rem; margin-top: .7rem; }
.held__review-punkte i { width: 14px; height: 3px; border-radius: 99px; background: var(--border);
  transition: background .3s ease, width .3s ease; }
.held__review-punkte i.an { background: var(--gold); width: 20px; }
@media (prefers-reduced-motion: reduce) {
  .held__review p, .held__review-wer { transition: none; }
}
.held__review-kopf { display: flex; align-items: center; gap: .55rem; margin-bottom: .5rem; }
.held__review-sterne { color: var(--gold); letter-spacing: .1em; font-size: .9rem; }
.held__review-note { font-weight: 800; color: var(--navy); font-size: .95rem; }
.held__review p { font-size: .88rem; color: var(--muted); line-height: 1.55; margin-bottom: .6rem; }
.held__review-fuss { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; }
.held__review-wer { font-weight: 700; color: var(--navy); }
.held__review-check { display: inline-flex; align-items: center; gap: .3rem; color: #1B8A4C; font-weight: 700; }

/* Trust-Chips unterm Rahmen — volle Breite wie die Hero-Bildkarte (Maxim 21.08.) */
.held__chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
  margin: 1rem 0 0; }
@media (max-width: 560px) { .held__chips { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .held__chips { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 561px) and (max-width: 899px) { .held__chips .chip:nth-child(5) { grid-column: 1 / -1; } }
.chip {
  display: flex; align-items: center; gap: .7rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem 1rem; box-shadow: var(--schatten-soft);
  font-weight: 600; font-size: .88rem; color: var(--navy);
}
.chip__ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 11px; background: var(--creme); color: var(--gold-hover); }

/* ---------- Vorher / Nachher ---------- */
.vn__wrap { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 1024px) { .vn__wrap { grid-template-columns: 1.35fr 1fr; gap: 3.5rem; } }
.vn__slider {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; box-shadow: var(--schatten-card);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: ew-resize;
}
.vn__slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.vn__nachher { clip-path: inset(0 0 0 var(--vn, 50%)); }
.vn__linie { position: absolute; top: 0; bottom: 0; left: var(--vn, 50%); width: 3px;
  background: #fff; z-index: 3; transform: translateX(-50%); box-shadow: 0 0 14px rgba(0,0,0,.35); }
.vn__griff {
  position: absolute; top: 50%; left: var(--vn, 50%); z-index: 4;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; color: var(--navy);
  box-shadow: 0 6px 20px rgba(0,0,0,.3); font-weight: 800; font-size: 1.1rem;
}
.vn__tag { position: absolute; top: 1rem; z-index: 3; border-radius: 999px;
  padding: .4rem .95rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; }
.vn__tag--vorher { left: 1rem; background: var(--navy); color: #fff; }
.vn__tag--nachher { right: 1rem; background: var(--gold); color: var(--navy-tief); }
.vn__liste { display: grid; gap: .85rem; margin: 1.5rem 0 1.8rem; }
.vn__liste li { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); font-size: .98rem; }
.vn__liste .hak { display: grid; place-items: center; flex: none; margin-top: .1rem;
  width: 24px; height: 24px; border-radius: 50%; background: var(--creme); color: var(--gold-hover); }
.vn__liste b { color: var(--navy); }

/* ---------- Bewertungen (Navy, Glass-Cards) ---------- */
.gscore {
  display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 2.2rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: .9rem 1.2rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
@media (max-width: 700px) {
  .gscore { display: flex; width: 100%; padding: 1rem 1.1rem; }
  .gscore > span:last-child { flex: 1; min-width: 0; }
}
.gscore__logo { display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 50%; background: #fff; flex: none; }
.gscore__zahl { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.gscore__sterne { color: var(--gold); letter-spacing: .12em; }
.gscore__label { font-size: .8rem; color: rgba(255,255,255,.6); }
.rez__grid { display: grid; gap: 1.1rem; }
@media (min-width: 768px) { .rez__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .rez__grid { grid-template-columns: repeat(4, 1fr); } }
/* Standortseiten zeigen nur 3 Rezensionen: Grid an die Anzahl anpassen, sonst
   bleibt die 4. Spalte leer und die Reihe steht linksbuendig statt mittig. */
@media (min-width: 1100px) {
  .rez__grid:has(.rez:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
  .rez__grid:has(.rez:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 640px; margin-inline: auto; }
}
.rez {
  position: relative; display: flex; flex-direction: column;
  background: rgba(255,255,255,.05); border-radius: var(--radius-lg);
  padding: 1.5rem 1.4rem;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  transition: background .3s ease, box-shadow .3s ease, transform .3s ease;
}
.rez:hover { background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .4); transform: translateY(-4px); }
.rez__g { position: absolute; top: 1.1rem; right: 1.1rem; width: 28px; height: 28px;
  border-radius: 50%; background: #fff; display: grid; place-items: center; }
.rez__sterne { color: var(--gold); letter-spacing: .12em; font-size: .85rem; margin-bottom: .8rem; }
.rez p { font-size: .92rem; line-height: 1.6; color: rgba(255,255,255,.85);
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  /* nimmt den Rest der Karte ein: sonst haengen Fotos und Name bei kurzen
     Zitaten weiter oben als bei langen und die Reihe wirkt zerfranst */
  flex: 1 1 auto; }
.rez__fuss { margin-top: auto; padding-top: 1.1rem; display: flex; align-items: center; gap: .7rem; }
.rez__ava { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: center top; }
.rez__ini { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: .95rem; flex: none; }
.rez__wer b { display: block; color: #fff; font-size: .9rem; font-weight: 700; }
.rez__wer small { color: rgba(255,255,255,.55); font-size: .76rem; }

/* ---------- Leistungen ---------- */
.svc__grid { display: grid; gap: 1rem; }
@media (min-width: 640px) { .svc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .svc__grid { grid-template-columns: repeat(4, 1fr); }
  /* 10 Karten: die letzten beiden mittig in der dritten Reihe */
  .svc__grid .svc:nth-child(9):nth-last-child(2) { grid-column: 2; }
  .svc__grid .svc:nth-child(10):last-child { grid-column: 3; }
}
.svc {
  display: flex; flex-direction: column; background: var(--bg);
  border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem 1.3rem;
  box-shadow: var(--schatten-soft);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--schatten-card); border-color: rgba(var(--gold-rgb), .5); }
.svc__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px;
  background: var(--creme); color: var(--gold-hover); margin-bottom: .9rem;
  transition: transform .3s cubic-bezier(.22,1,.36,1); }
.svc:hover .svc__ic { transform: scale(1.1) rotate(3deg); }
.svc h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.svc p { font-size: .87rem; color: var(--muted); line-height: 1.55; margin-bottom: .9rem; }
.svc__mehr { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .88rem; color: var(--gold-tief); }
.svc__mehr .pf { transition: transform .3s ease; }
.svc:hover .svc__mehr .pf { transform: translateX(4px); }

/* ---------- Ablauf ---------- */
.ablauf__grid { display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .ablauf__grid { grid-template-columns: repeat(4, 1fr); } }
.schritt {
  position: relative; background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; padding: 1.7rem 1.3rem 1.4rem; box-shadow: var(--schatten-soft);
}
.schritt__num {
  position: absolute; top: -14px; left: -10px; width: 38px; height: 38px;
  border-radius: 50%; background: var(--gold); color: var(--navy-tief);
  display: grid; place-items: center; font-weight: 800; font-size: 1rem;
  box-shadow: var(--schatten-glow);
}
.schritt h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.schritt p { font-size: .88rem; color: var(--muted); line-height: 1.55; }

/* ---------- Über uns ---------- */
.ueber__wrap { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .ueber__wrap { grid-template-columns: 1fr 1.15fr; gap: 4rem; } }
.ueber__foto { position: relative; }
.ueber__foto::before { content: ""; position: absolute; inset: -1.4rem;
  background: rgba(var(--gold-rgb), .2); filter: blur(48px); border-radius: 50%; }
.ueber__foto figure { position: relative; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(160deg, var(--navy) 0%, #202127 100%); box-shadow: var(--schatten-card); }
.ueber__foto img { width: 100%; height: auto; }
.ueber__foto .ueber__logo { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: clamp(2rem, 6vw, 3.5rem); background: #fff; border: 1px solid rgba(255,255,255,.14); }
.ueber__foto .ueber__logo img { width: min(72%, 400px); height: auto; }
.ueber__name { position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 12px; padding: .55rem .95rem; box-shadow: var(--schatten-soft); }
.ueber__name b { display: block; color: var(--navy); font-size: .95rem; }
.ueber__name small { color: var(--muted); font-size: .76rem; }
.usp__grid { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
@media (min-width: 640px) { .usp__grid { grid-template-columns: repeat(2, 1fr); } }
.usp { display: flex; gap: .85rem; transition: transform .3s ease; }
.usp:hover { transform: translateX(4px); }
.usp__ic { display: grid; place-items: center; flex: none; width: 42px; height: 42px;
  border-radius: 11px; background: var(--creme); color: var(--gold-hover); }
.usp b { display: block; color: var(--navy); font-size: .96rem; margin-bottom: .15rem; }
.usp p { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* ---------- Einsatzgebiete ---------- */
/* Flex statt Grid: die letzte, unvollstaendige Reihe zentriert sich dadurch selbst */
.orte__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.orte__grid > * { flex: 0 1 calc(50% - .35rem); min-width: 0; }
@media (min-width: 700px) { .orte__grid > * { flex-basis: calc(33.333% - .47rem); } }
@media (min-width: 1024px) { .orte__grid > * { flex-basis: calc(20% - .56rem); } }
.ort {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem 1rem; font-weight: 600; font-size: .9rem; color: var(--navy);
  box-shadow: var(--schatten-soft);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ort:hover { transform: translateY(-3px); border-color: rgba(var(--gold-rgb), .55); box-shadow: var(--schatten-card); }
.ort svg { color: var(--gold); flex: none; }
.orte__fuss { text-align: center; margin-top: 1.8rem; }

/* ---------- FAQ ---------- */
.faq__card { max-width: 46rem; margin-inline: auto; background: var(--bg);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--schatten-soft);
  padding: .4rem 1.4rem; }
.faq__card details { border-bottom: 1px solid var(--border); }
.faq__card details:last-child { border-bottom: 0; }
.faq__card summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem; padding: 1.05rem 0;
  font-weight: 700; color: var(--navy); font-size: .98rem;
}
.faq__card summary::-webkit-details-marker { display: none; }
.faq__card summary .plus { flex: none; color: var(--gold); transition: transform .3s ease; }
.faq__card details[open] summary .plus { transform: rotate(45deg); }
.faq__card details p { padding: 0 0 1.1rem; color: var(--muted); font-size: .93rem; line-height: 1.65; }

/* ---------- CTA + Formular (Navy-Split-Card) ---------- */
.cta__karte {
  display: grid; border-radius: var(--radius-lg); overflow: hidden;
  background: linear-gradient(135deg, var(--navy) 0%, #1A1B20 60%, #202127 100%);
  color: rgba(255,255,255,.8); box-shadow: var(--schatten-card);
}
@media (min-width: 1024px) { .cta__karte { grid-template-columns: 1fr 1.05fr; } }
.cta__links { padding: clamp(1.8rem, 4vw, 3.2rem); position: relative; }
.cta__links::after { content: ""; position: absolute; top: -30%; right: -20%; width: 70%; height: 120%;
  background: radial-gradient(ellipse, rgba(var(--gold-rgb), .18), transparent 65%); pointer-events: none; }
.cta__links .sec-h { color: #fff; }
.cta__punkte { display: grid; gap: .7rem; margin: 1.4rem 0 1.8rem; }
.cta__punkte li { display: flex; gap: .6rem; align-items: center; font-size: .95rem; }
.cta__punkte .hak { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: rgba(var(--gold-rgb), .2); color: var(--gold); }
.cta__ctas { display: flex; flex-wrap: wrap; gap: .8rem; }
.form__karte { background: var(--bg); padding: clamp(1.6rem, 3.5vw, 2.6rem); }
@media (min-width: 1024px) { .form__karte { margin: 1rem 1rem 1rem 0; border-radius: 18px; } }
.form__karte h3 { font-size: 1.35rem; margin-bottom: .3rem; }
.form__karte > p { color: var(--muted); font-size: .9rem; margin-bottom: 1.3rem; }
.formular { display: grid; gap: .8rem; }
.formular .zeile { display: grid; gap: .8rem; }
@media (min-width: 640px) { .formular .zeile { grid-template-columns: 1fr 1fr; } }
.formular input, .formular select, .formular textarea {
  font: inherit; font-size: 16px; width: 100%; color: var(--ink);
  background: var(--bg-soft); border: 1.5px solid transparent; border-radius: 11px;
  padding: .85rem 1rem;
}
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: none; border-color: var(--gold); background: #fff;
}
.formular .einwilligung { display: flex; gap: .6rem; align-items: flex-start;
  font-size: .8rem; color: var(--muted); line-height: 1.5; }
.formular .einwilligung input { width: auto; margin-top: .2rem; accent-color: var(--gold-hover); }
.formular .einwilligung a { text-decoration: underline; }
.formular .btn { width: 100%; }
.form__hinweis { font-size: .78rem; color: var(--muted); }
.form__hinweis a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* ---------- Danke-Overlay (hell, Gold-Check) ---------- */
.dank { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center;
  justify-content: center; padding: 1.2rem; background: rgba(10,11,13,0);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
  transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease; }
.dank--an { background: rgba(10,11,13,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
html.dank-offen { overflow: hidden; }
.dank__panel { position: relative; width: min(440px, 100%); text-align: center;
  background: #fff; border-radius: var(--radius-lg); padding: 2.5rem 1.8rem 1.9rem;
  box-shadow: var(--schatten-card); opacity: 0; transform: translateY(26px) scale(.94);
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.18,1.25,.32,1); }
.dank--an .dank__panel { opacity: 1; transform: none; }
.dank__check { width: 80px; height: 80px; margin: 0 auto 1rem; }
.dank__check circle { stroke: var(--gold); stroke-dasharray: 176; stroke-dashoffset: 176; fill: none; stroke-width: 3.5; }
.dank__check path { stroke: var(--navy); stroke-dasharray: 40; stroke-dashoffset: 40; fill: none;
  stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.dank--an .dank__check circle { animation: zeichnen .55s cubic-bezier(.4,0,.2,1) .2s forwards; }
.dank--an .dank__check path { animation: zeichnen .35s cubic-bezier(.4,0,.2,1) .7s forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.dank__panel h3 { font-size: 1.8rem; margin-bottom: .5rem; }
.dank__panel h3 .serif { font-size: 1.05em; }
.dank__panel p { color: var(--muted); font-size: .95rem; margin-bottom: 1.4rem; }
.dank__panel .btn { width: 100%; margin-bottom: .55rem; }
@media (prefers-reduced-motion: reduce) {
  .dank, .dank__panel { transition: none; }
  .dank--an .dank__check circle, .dank--an .dank__check path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- Footer ---------- */
.fuss { background: var(--navy-tief); color: rgba(255,255,255,.7); padding: 3.5rem 0 1rem; }
.fuss__grid { display: grid; gap: 2.2rem; padding-bottom: 2.6rem; }
@media (min-width: 900px) { .fuss__grid { grid-template-columns: 1.5fr 1fr 1fr 1.3fr; } }
.fuss__logo { display: inline-block; margin-bottom: 1rem; }
.fuss__logo > img { height: 118px; width: auto; }
.fuss__logo-kachel { display: grid; place-items: center; background: #fff; border-radius: 10px; padding: .4rem .55rem; }
.fuss__logo-kachel img { height: 34px; width: auto; }
.fuss__logo-txt { display: inline-flex; flex-direction: column; font-weight: 800;
  font-size: 1rem; line-height: 1.12; color: #fff; }
.fuss__logo-txt b { color: var(--gold); }
.fuss p { font-size: .9rem; line-height: 1.65; }
.fuss h4 { color: var(--gold); font-size: .76rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; margin-bottom: 1rem; }
.fuss li { margin-bottom: .5rem; }
.fuss a { font-size: .92rem; transition: color .2s ease; }
.fuss a:hover { color: #fff; }
.fuss__kontakt li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.fuss__kontakt svg { color: var(--gold); flex: none; margin-top: .2rem; }
.fuss__unten { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .82rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.fuss__by { display: inline-flex; align-items: center; gap: .5rem; opacity: .8; transition: opacity .2s; }
.fuss__by:hover { opacity: 1; }
.fuss__by img { height: 26px; width: auto; }
.fuss__legal { display: flex; gap: 1.2rem; }
.fuss__cookie { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.fuss__cookie:hover { color: #fff; }


/* ---------- Cookie-Leiste (hell) ---------- */
.keks { position: fixed; left: 14px; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 150;
  max-width: 1060px; margin-inline: auto; display: flex; align-items: center; gap: 1.4rem;
  background: #fff; border: 1px solid var(--border); border-radius: 18px;
  padding: 1.05rem 1.25rem; box-shadow: var(--schatten-card);
  opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s ease; }
@media (min-width: 1024px) { .keks { bottom: 14px; } }
.keks[hidden] { display: none !important; }
.keks.an { opacity: 1; transform: none; }
.keks p { flex: 1; font-size: .85rem; color: var(--muted); line-height: 1.55; }
.keks p a { text-decoration: underline; }
.keks__btns { display: flex; gap: .6rem; flex-wrap: wrap; }
.keks .btn { padding: .7rem 1.1rem; font-size: .88rem; }
@media (max-width: 760px) { .keks { flex-direction: column; align-items: stretch; }
  .keks__btns .btn { flex: 1; } }

/* ---------- Versand-Wahl im Formular (E-Mail oder WhatsApp), 21.08. ---------- */
.versand { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.versand__frage { font-size: .86rem; font-weight: 600; color: var(--muted); padding: 0; margin-right: .3rem; }
.versand__opt { position: relative; cursor: pointer; }
.versand__opt input { position: absolute; opacity: 0; pointer-events: none; }
.versand__pill { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .95rem;
  border: 1.5px solid var(--border); border-radius: 999px; font-weight: 600; font-size: .9rem;
  color: var(--muted); background: var(--bg); transition: border-color .2s, color .2s, background .2s; }
.versand__opt:hover .versand__pill { border-color: var(--gold); }
.versand__opt input:checked + .versand__pill { border-color: var(--gold); color: var(--gold-tief);
  background: rgba(var(--gold-rgb), .08); }
.versand__opt input:focus-visible + .versand__pill { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn--wa, .btn--wa:hover { background: #1EBE5A; color: #fff; }
.btn--wa:hover { background: #17A64E; }


/* ---------- Anfrage-Wizard (Mehrschritt-Formular, 21.08.) ---------- */
.wiz__kopf { display: flex; justify-content: space-between; align-items: baseline;
  font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }
.wiz__kopf b { color: var(--navy); }
.wiz__prozent { font-variant-numeric: tabular-nums; }
.wiz__balken { height: 6px; border-radius: 99px; background: var(--bg-soft);
  overflow: hidden; margin-bottom: 1.4rem; }
.wiz__balken i { display: block; height: 100%; width: 25%; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-hover));
  transition: width .45s cubic-bezier(.22,1,.36,1); }
.wiz__panel { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .85rem; }
.wiz__panel[hidden] { display: none; }
.wiz__panel { opacity: 0; transform: translateX(18px); }
.wiz__panel--an { opacity: 1; transform: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1); }
.wiz__frage { font-size: 1.15rem; margin-bottom: .15rem; }
.wiz__pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 560px) { .wiz__pill { font-size: .88rem; padding: .7rem .75rem; } }
@media (max-width: 360px) { .wiz__pills { grid-template-columns: 1fr; } }
.wiz__pill {
  border: 1.5px solid var(--border); border-radius: 12px; background: var(--bg);
  padding: .8rem .9rem; font-weight: 600; font-size: .92rem; color: var(--ink);
  text-align: left; cursor: pointer; position: relative;
  min-width: 0; hyphens: auto; overflow-wrap: break-word;
  transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wiz__pill:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: var(--schatten-soft); }
.wiz__pill.gewaehlt { border-color: var(--gold); background: rgba(var(--gold-rgb), .08); color: var(--navy); }
.wiz__pill.gewaehlt::after { content: ""; position: absolute; top: .55rem; right: .6rem;
  width: 9px; height: 15px; border: solid var(--gold-hover); border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg); }
.wiz__nav { display: flex; justify-content: space-between; align-items: center;
  gap: .8rem; margin-top: 1.1rem; }
.wiz__zurueck { display: inline-flex; align-items: center; gap: .35rem; background: none;
  border: 0; font-weight: 700; font-size: .88rem; color: var(--muted); padding: .3rem .2rem; }
.wiz__zurueck:hover { color: var(--navy); }
.wiz__zurueck[hidden] { display: none; }
.wiz__trust { margin-left: auto; font-size: .76rem; color: var(--muted); text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .wiz__panel, .wiz__panel--an, .wiz__pill { transition: none; transform: none; }
  .wiz__balken i { transition: none; }
}


/* ---------- WhatsApp-CTA-Band (21.08., full-bleed) ---------- */
.wacta { padding: 2.4rem 0; }
.wacta__wrap { width: min(1560px, 100% - 3rem); margin-inline: auto; }
.wacta__karte { display: grid; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--schatten-card); }
@media (min-width: 900px) { .wacta__karte { grid-template-columns: 1.1fr 1fr; } }
.wacta__txt { background: linear-gradient(150deg, var(--navy) 0%, var(--navy-tief) 80%);
  color: rgba(255,255,255,.82); padding: clamp(1.8rem, 4.5vw, 3.4rem); }
.wacta__txt .sec-h { color: #fff; }
.wacta__txt > p { max-width: 42ch; margin-bottom: 1.5rem; }
.wacta__btns { display: flex; flex-wrap: wrap; gap: .8rem; }
.wacta__foto { position: relative; min-height: 240px; }
.wacta__foto img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 62% 50%; }
@media (max-width: 899px) { .wacta__foto { min-height: 220px; } }
.wacta__claim { position: absolute; left: 1rem; bottom: 1rem; font-size: .72rem;
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(10,11,13,.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  padding: .45rem .8rem; border-radius: 99px; }
@media (min-width: 900px) { .wacta__txt { display: flex; flex-direction: column; justify-content: center; } }


/* ---------- Garantien (Schwarz, 21.08.) ---------- */
.gar__grid { display: grid; gap: 1rem; margin-top: 2.4rem; }
@media (min-width: 900px) { .gar__grid { grid-template-columns: repeat(3, 1fr); } }
.gar { position: relative; overflow: hidden; border-radius: 16px; padding: 1.6rem 1.4rem 3.2rem;
  background: rgba(255,255,255,.05);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, background .3s ease; }
.gar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .8), transparent); }
.gar:hover { transform: translateY(-4px); background: rgba(255,255,255,.08);
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), .45), 0 18px 40px -18px rgba(0,0,0,.6); }
.gar__ic { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--gold); color: var(--navy-tief); margin-bottom: 1rem;
  box-shadow: var(--schatten-glow); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.gar:hover .gar__ic { transform: scale(1.08) rotate(-3deg); }
.gar h3 { color: #fff; font-size: 1.08rem; margin-bottom: .5rem; }
.gar p { font-size: .92rem; color: rgba(255,255,255,.66); }
.gar__band { position: absolute; left: 1.4rem; bottom: 1.15rem; display: inline-flex;
  align-items: center; gap: .35rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
  padding: .28rem .6rem; border-radius: 99px; background: rgba(var(--gold-rgb), .12); }
.gar__wz { position: absolute; right: -18px; bottom: -22px; width: 110px; height: 110px;
  color: #fff; opacity: .05; transform: rotate(-8deg);
  transition: opacity .3s ease, transform .3s ease; }
.gar:hover .gar__wz { opacity: .12; transform: rotate(0deg) scale(1.05); color: var(--gold); }

/* ---------- Google-Rating-Widget im CTA-Panel (unten links), 21.08. ---------- */
.cta__links { display: flex; flex-direction: column; align-items: flex-start; }
.cta__gscore {
  margin-top: auto; padding-top: 2.4rem;
  display: inline-flex; align-items: center; gap: .85rem;
}
.cta__gscore-logo {
  display: grid; place-items: center; width: 44px; height: 44px; flex: none;
  background: #fff; border-radius: 12px; box-shadow: var(--schatten-soft);
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}
.cta__gscore:hover .cta__gscore-logo { transform: translateY(-2px); }
.cta__gscore-txt { display: flex; flex-direction: column; gap: .15rem; }
.cta__gscore-zahl { font-size: 1.35rem; font-weight: 800; color: #fff; line-height: 1; }
.cta__gscore-sterne { color: var(--gold); letter-spacing: .12em; font-size: 1rem; }
.cta__gscore-label { font-size: .8rem; color: rgba(255,255,255,.6); transition: color .2s; }
.cta__gscore:hover .cta__gscore-label { color: rgba(255,255,255,.9); }


/* ---------- Ratgeber-Teaser (21.08.) ---------- */
.rat__grid { display: grid; gap: 1.1rem; margin-top: 2.4rem; }
@media (min-width: 700px) { .rat__grid { grid-template-columns: repeat(3, 1fr); } }
.rat { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); box-shadow: var(--schatten-soft);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease; }
.rat:hover { transform: translateY(-4px); box-shadow: var(--schatten-card);
  border-color: rgba(var(--gold-rgb), .5); }
.rat__bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.rat__bild img { width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1); }
.rat:hover .rat__bild img { transform: scale(1.06); }
.rat__tag { position: absolute; top: .8rem; left: .8rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
  background: rgba(10,11,13,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: .3rem .65rem; border-radius: 99px; }
.rat__txt { display: flex; flex-direction: column; flex: 1; padding: 1.15rem 1.2rem 1.3rem; }
.rat__txt h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.rat__txt p { font-size: .9rem; color: var(--muted); margin-bottom: .9rem; }
.rat__meta { display: inline-flex; align-items: center; gap: .38rem; font-size: .74rem;
  font-weight: 600; letter-spacing: .03em; color: var(--muted); margin-bottom: .95rem; }
.rat__txt p + .rat__meta { margin-top: -.35rem; }
.rat__meta svg { flex: none; opacity: .7; }
.rat__mehr { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .88rem; color: var(--gold-tief); }
.rat__mehr .pf { transition: transform .3s ease; }
.rat:hover .rat__mehr .pf { transform: translateX(4px); }
.rat__fuss { display: flex; justify-content: center; margin-top: 1.8rem; }

/* ---------- Schnellanfrage-Karte unter den Trust-Chips (21.08.) ----------
   Bewusst anderes Design als der Wizard unten: dunkle Quer-Karte, Inline-Felder. */
.qwrap { padding: 1rem 0 3.2rem; background: var(--bg); }

/* Ratgeber-Teaser auf Schwarz (Maxim 21.08.): weisse Cards poppen, Rand entfaellt */
.ratteaser.bg-soft .rat { border-color: transparent; }
.ratteaser.bg-soft .rat__fuss .btn--line { border-color: transparent; }


/* ---------- Anfrage-Wizard im Referenz-Layout (21.08., ersetzt Schnellanfrage-Querkarte) ---------- */
.wizsec { background: var(--bg); }
.wizsec__wrap { display: grid; gap: 2.4rem; align-items: center; }
@media (min-width: 1024px) { .wizsec__wrap { grid-template-columns: 1fr 1.25fr; gap: 3.5rem; } }
.wizsec__punkte { display: grid; gap: .7rem; margin-top: 1.4rem; }
.wizsec__punkte li { display: flex; gap: .6rem; align-items: center; font-size: .95rem; font-weight: 600; color: var(--ink); }
.wizsec__punkte .hak { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: 50%; background: rgba(var(--gold-rgb), .14); color: var(--gold-hover); }
.wiz--karte { background: var(--bg); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--schatten-card); padding: clamp(1.4rem, 3vw, 2.2rem); }

/* Ueber-uns auf Schwarz (Maxim 21.08.): USP-Texte und Icon-Kacheln fuer dunklen Grund */
.bg-navy .usp b { color: #fff; }
.bg-navy .usp p { color: rgba(255,255,255,.62); }
.bg-navy .usp__ic { background: rgba(var(--gold-rgb), .16); color: var(--gold); }
.mmenu__reihe { display: flex; align-items: center; gap: .5rem; }
.mmenu__reihe .mmenu__zeile { flex: 1; }


/* ---------- Mobile-Feinschliff (21.08., Handy-QA) ---------- */
.vn__wrap > *, .wizsec__wrap > * { min-width: 0; }
@media (max-width: 560px) {
  .btn { white-space: normal; }
  .held__badge { font-size: .62rem; letter-spacing: .12em; padding: .45rem .8rem; }
}

/* (Desktop-Hero-Experiment 21.08. — Headline oben links + Chips im Widget —
   auf Maxims Wunsch wieder rueckgebaut) */


/* ============================================================
   UNTERSEITEN-ROLLOUT (23.08.): Desktop-Dropdowns + Sub-Bausteine
   ============================================================ */
/* ---------- Desktop-Dropdown-Nav ---------- */
.knav { position: relative; }
.knav > a { display: inline-flex; align-items: center; gap: .3rem; padding: 1.4rem 0; }
.knav .chev { transition: transform .25s ease; }
.knav:hover .chev, .knav:focus-within .chev { transform: rotate(180deg); }
.kdrop {
  position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px);
  min-width: 320px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--schatten-card); padding: .7rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .25s cubic-bezier(.22,1,.36,1), visibility .22s;
  z-index: 120;
}
.knav:hover .kdrop, .knav:focus-within .kdrop {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.kdrop--breit { min-width: 620px; }
.kdrop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: .15rem; }
.kdrop__grid--eins { grid-template-columns: 1fr; min-width: 340px; }
.kdrop__link { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem;
  border-radius: 10px; transition: background .18s ease; }
.kdrop__link:hover { background: var(--bg-soft); }
.kdrop__link b { display: block; font-size: .88rem; color: var(--navy); line-height: 1.25; }
.kdrop__link small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.3; }
.kdrop__ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 9px; background: var(--creme); color: var(--gold-hover); }
.kdrop__orte { display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem .6rem;
  min-width: 400px; padding: .2rem .3rem; }
.kdrop__orte a { font-size: .86rem; font-weight: 600; color: var(--ink);
  padding: .32rem .5rem; border-radius: 8px; }
.kdrop__orte a:hover { background: var(--bg-soft); color: var(--gold-hover); }
.kdrop__alle { display: flex; align-items: center; justify-content: center; gap: .4rem;
  margin-top: .5rem; padding: .6rem; border-top: 1px solid var(--border);
  font-weight: 700; font-size: .85rem; color: var(--gold-tief); }
.kdrop__alle:hover { color: var(--gold-hover); }
@media (max-width: 1023px) { .kdrop { display: none; } }

/* ---------- Unterseiten-Bausteine ---------- */
.subhero { background: var(--bg-soft); padding: calc(76px + 3rem) 0 3.2rem; }
.subhero__krumen { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .78rem;
  color: var(--muted); margin-bottom: 1rem; }
.subhero__krumen a:hover { color: var(--gold-hover); }
.subhero h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); line-height: 1.1; max-width: 22ch; }
.subhero__sub { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.12rem);
  max-width: 46rem; margin-top: .8rem; }
.subhero__ctas { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
/* Alle Seitenkoepfe gleich hoch, egal wie lang die H1 ist (24.08.) */
@media (min-width: 700px) {
  .subhero { display: flex; align-items: center; min-height: 520px;
    padding: calc(76px + 2rem) 0 2rem; }
  /* width:100% wuerde die Breitenbegrenzung der .shell aushebeln - der
     Inhalt klebte dadurch auf allen Unterseiten am Bildschirmrand.
     Als Flex-Item braucht sie die Breite explizit, aber begrenzt. */
  .subhero > .shell { width: min(1180px, 100% - 2.4rem); margin-inline: auto; }
}

.split2 { display: grid; gap: 2.2rem; align-items: center; }
@media (min-width: 1024px) { .split2 { grid-template-columns: 1.1fr 1fr; gap: 3.5rem; }
  .split2--tausch > :first-child { order: 2; } }
.split2 > * { min-width: 0; }
.split2__bild { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--schatten-card); }
.split2__bild img { width: 100%; height: auto; display: block; }
.check2 { display: grid; gap: .8rem; margin-top: 1.4rem; }
.check2 li { display: flex; gap: .7rem; align-items: flex-start; }
.check2 .hak { display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  margin-top: .15rem; border-radius: 50%; background: rgba(var(--gold-rgb), .14); color: var(--gold-hover); }
.check2 b { color: var(--navy); }
.check2 span span { display: block; font-size: .92rem; color: var(--muted); }

.prosa { max-width: 46rem; margin-inline: auto; }
.prosa h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 2.2rem 0 .7rem; }
.prosa h3 { font-size: 1.15rem; margin: 1.6rem 0 .5rem; }
.prosa p { margin-bottom: 1rem; }
.prosa ul, .prosa ol { margin: 0 0 1rem 1.2rem; }
.prosa ul { list-style: disc; }
.prosa ol { list-style: decimal; }
.prosa li { margin-bottom: .35rem; }
.prosa a { color: var(--gold-tief); text-decoration: underline; }
.prosa a:hover { color: var(--gold-hover); }


/* ---------- Ratgeber-Artikel: 2 Spalten mit sticky Sidebar (Playbook §7) ---------- */
.artikel__wrap { display: grid; gap: 2.4rem; align-items: start; }
@media (min-width: 1024px) { .artikel__wrap { grid-template-columns: 300px 1fr; gap: 3.2rem; } }
.artikel__side { display: grid; gap: 1rem; min-width: 0; }
@media (min-width: 1024px) { .artikel__side { position: sticky; top: 100px; } }
.artikel__inhalt { min-width: 0; }
.artikel__inhalt .prosa { max-width: 42rem; margin-inline: 0; }

.toc { background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.2rem 1.3rem; box-shadow: var(--schatten-soft); }
.toc__titel { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-tief); margin-bottom: .8rem; }
.toc ol { list-style: none; counter-reset: toc; display: grid; gap: .1rem; margin: 0; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: .6rem; align-items: baseline; padding: .45rem .5rem;
  border-radius: 9px; font-size: .88rem; font-weight: 600; color: var(--ink);
  line-height: 1.35; transition: background .18s ease, color .18s ease; }
.toc a::before { content: counter(toc, decimal-leading-zero); font-size: .72rem;
  font-weight: 800; color: var(--gold); flex: none; }
.toc a:hover, .toc a.aktiv { background: var(--bg-soft); color: var(--gold-hover); }

.side-cta { background: linear-gradient(155deg, var(--navy) 0%, var(--navy-tief) 85%);
  color: rgba(255,255,255,.78); border-radius: 16px; padding: 1.4rem 1.3rem; }
.side-cta h3 { color: #fff; font-size: 1.05rem; margin-bottom: .45rem; }
.side-cta p { font-size: .86rem; margin-bottom: 1rem; }
.side-cta .btn { width: 100%; margin-bottom: .5rem; font-size: .92rem; padding: .8rem 1rem; }
.side-cta .btn:last-child { margin-bottom: 0; }

.side-zitat { background: var(--bg-soft); border-radius: 16px; padding: 1.3rem;
  border-left: 3px solid var(--gold); }
.side-zitat p { font-size: .9rem; line-height: 1.6; color: var(--ink); margin-bottom: .8rem; }
.side-zitat figcaption { display: flex; align-items: center; gap: .6rem; }
/* Logo statt Portraet: contain + weisser Kreis, damit die Marke nicht angeschnitten wird */
.side-zitat img { width: 40px; height: 40px; border-radius: 50%; object-fit: contain;
  background: #fff; padding: 4px; box-shadow: inset 0 0 0 1px var(--border); flex: none; }
.side-zitat b { display: block; font-size: .84rem; color: var(--navy); }
.side-zitat small { display: block; font-size: .74rem; color: var(--muted); }

.prosa .callout { background: rgba(var(--gold-rgb), .08); border: 1px solid rgba(var(--gold-rgb), .3);
  border-radius: 14px; padding: 1.1rem 1.2rem; margin: 1.6rem 0; }
.prosa .callout b { display: block; color: var(--navy); margin-bottom: .3rem; }
.prosa .callout p:last-child { margin-bottom: 0; }
.prosa h2 { scroll-margin-top: 100px; }

/* Dunkler CTA-Streifen (Playbook §7 Punkt 5) */
.ctaband { background: var(--navy); color: rgba(255,255,255,.75); text-align: center; }
.ctaband .sec-h { color: #fff; }
.ctaband p { max-width: 44ch; margin: .6rem auto 1.6rem; }
.ctaband__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

/* ---------- Standortseiten: CTA-Band in der Seitenmitte (full bleed) ----------
   Bewusst kraeftiger als das schmale .ctaband der Ratgeber-Artikel: volle
   Breite, Markengruen, als optischer Bruch zwischen Leistungen und Bewertungen. */
.ortcta {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(3.2rem, 7vw, 5.5rem) 1.2rem;
  background: linear-gradient(145deg, var(--gold) 0%, var(--gold-hover) 55%, var(--gold-tief) 100%);
  color: rgba(255,255,255,.9);
}
/* Raster entfernt (Maxim 24.08.) - die Flaeche bleibt glatt.
   Tiefe kommt allein aus dem Farbverlauf. */
.ortcta__inhalt { position: relative; width: min(760px, 100%); margin-inline: auto; }
.ortcta__kicker {
  display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.32);
  border-radius: 99px; padding: .4rem .95rem; margin-bottom: 1.1rem;
}
.ortcta__h {
  font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.12; color: #fff;
  text-wrap: balance; hyphens: none; margin-bottom: .7rem;
}
.ortcta__sub { font-size: clamp(1rem, 1.3vw, 1.08rem); max-width: 46ch; margin: 0 auto 1.8rem; }
.ortcta__btns { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }
.ortcta__wa {
  background: #fff; color: var(--gold-tief);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.45);
}
.ortcta__wa:hover { background: #fff; transform: translateY(-2px); }
.ortcta__tel {
  border: 2px solid rgba(255,255,255,.55); background: rgba(255,255,255,.1); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ortcta__tel:hover { background: rgba(255,255,255,.2); transform: translateY(-2px); }
.ortcta__punkte {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem;
  margin-top: 1.8rem; font-size: .88rem; font-weight: 600; color: #fff;
}
.ortcta__punkte li { display: inline-flex; align-items: center; gap: .45rem; }
.ortcta__punkte svg { flex: none; opacity: .85; }

/* ---------- Card-Grids: angebrochene letzte Reihe mittig ausrichten ---------- */
@media (min-width: 1024px) {
  /* 6 Karten im 4er-Grid: die letzten zwei mittig unter die obere Reihe */
  .svc__grid--rest-mitte > :nth-child(5):nth-last-child(2) { grid-column: 2; }
}
/* Bewertungs-Widget der Stadtseiten mittig (Headline ist sec-head--center).
   .gscore ist inline-flex -> margin:auto zentriert dort nicht, darum flex + fit-content. */
.gscore--mitte { display: flex; width: fit-content; margin-inline: auto; }


/* ---------- Lesbarkeit auf schwarzen Sections (Unterseiten-Rhythmus 24.08.) ---------- */
.bg-navy .check2 b { color: #fff; }
.bg-navy .check2 span span { color: rgba(255,255,255,.66); }
.bg-navy .check2 .hak { background: rgba(var(--gold-rgb), .2); color: var(--gold); }
.bg-navy .kicker { color: var(--gold); }
.bg-navy .svc__mehr, .bg-navy .rat__mehr { color: var(--gold); }
.bg-navy .split2__bild { box-shadow: 0 18px 44px -18px rgba(0,0,0,.7); }
.bg-navy .schritt { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); }
.bg-navy .schritt h3 { color: #fff; }
.bg-navy .schritt p { color: rgba(255,255,255,.66); }
.bg-navy .ort { background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09); color: #fff; }
.bg-navy .ort:hover { background: rgba(255,255,255,.09); }
.bg-navy .svc, .bg-navy .rat { border-color: transparent; }
.bg-navy .toc, .bg-navy .side-zitat { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }

/* ---------- Einsatzgebiete-Hub: Regionen als horizontale Balken ----------
   Loest das Karten-Grid ab (Maxim 24.08.): eine Region = ein Balken,
   Kopfzeile mit Ordnungsziffer/Titel/Kennzahl, darunter die Orte als Pills. */
.regbalken {
  position: relative; background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.5vw, 1.9rem);
  margin-top: 1.1rem; overflow: hidden;
  transition: border-color .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
/* Akzentkante links, waechst beim Hover ueber die volle Hoehe */
.regbalken::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--gold), var(--gold-tief));
  transform: scaleY(.28); transform-origin: top;
  transition: transform .38s cubic-bezier(.22,1,.36,1);
}
.regbalken:hover {
  border-color: rgba(var(--gold-rgb), .45);
  box-shadow: var(--schatten-card); transform: translateY(-2px);
}
.regbalken:hover::before { transform: scaleY(1); }

.regbalken__kopf {
  display: flex; align-items: flex-start; gap: 1rem;
  padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--border);
}
.regbalken__nr {
  flex: none; font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--gold); opacity: .32;
  font-variant-numeric: tabular-nums;
}
.regbalken__titel { flex: 1 1 auto; min-width: 0; }
.regbalken__titel h2 {
  font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; margin-bottom: .25rem;
  text-wrap: balance; hyphens: none;
}
.regbalken__titel p { font-size: .9rem; color: var(--muted); line-height: 1.5; max-width: 62ch; }
.regbalken__meta { flex: none; text-align: right; line-height: 1.25; }
.regbalken__meta b {
  display: block; font-size: 1.5rem; font-weight: 800; color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.regbalken__meta small { font-size: .74rem; color: var(--muted); white-space: nowrap; }

.regbalken__orte { display: flex; flex-wrap: wrap; gap: .5rem; }
.regbalken__ort {
  display: inline-flex; align-items: baseline; gap: .4rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: 99px;
  padding: .5rem .9rem; font-size: .88rem; font-weight: 600; color: var(--navy);
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}
.regbalken__ort:hover {
  background: rgba(var(--gold-rgb), .12); border-color: rgba(var(--gold-rgb), .4);
  color: var(--gold-tief); transform: translateY(-1px);
}
.regbalken__km { font-size: .76rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.regbalken__ort:hover .regbalken__km { color: var(--gold-tief); }

@media (max-width: 640px) {
  .regbalken__kopf { flex-wrap: wrap; }
  .regbalken__meta { text-align: left; width: 100%; display: flex; align-items: baseline; gap: .45rem; }
  .regbalken__meta b { font-size: 1.15rem; }
}
/* Auf dunklen Flaechen (falls die Section spaeter bg-navy wird) lesbar bleiben */
.bg-navy .regbalken { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); }
.bg-navy .regbalken__titel h2, .bg-navy .regbalken__meta b { color: #fff; }
.bg-navy .regbalken__titel p, .bg-navy .regbalken__meta small { color: rgba(255,255,255,.62); }
.bg-navy .regbalken__ort { background: rgba(255,255,255,.08); color: #fff; }
.bg-navy .regbalken__km { color: rgba(255,255,255,.6); }

/* ---------- Header: Bewerten-Link (fuehrt Bestandskunden zum Review-Funnel) ---------- */
.kopf__bewerten {
  display: none; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .9rem; color: var(--navy);
  border: 1.5px solid var(--border); border-radius: 99px; padding: .5rem .95rem;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}
.kopf__bewerten svg { color: var(--gold); transition: transform .3s cubic-bezier(.22,1,.36,1); }
.kopf__bewerten:hover {
  border-color: rgba(var(--gold-rgb), .5); color: var(--gold-tief);
  background: rgba(var(--gold-rgb), .08); transform: translateY(-1px);
}
.kopf__bewerten:hover svg { transform: rotate(72deg) scale(1.12); }
@media (min-width: 1180px) { .kopf__bewerten { display: inline-flex; } }

/* ---------- Footer-Logo auf dunkler Flaeche ----------
   Eigene Datei logo-hb-dunkel.png: die schwarzen Van-Konturen (~16% der Grafik)
   sind auf Hellgrau gezogen und das Gruen angehoben, sonst versackt das Logo
   auf der schwarzen Footer-Flaeche. Kein weisser Traeger noetig. */
.fuss__logo > img { height: 104px; width: auto; }
@media (max-width: 640px) { .fuss__logo > img { height: 84px; } }

/* ============================================================
   RATGEBER-HUB (ratgeber/index.html): Magazin-Layout mit
   Filter-Sidebar links und Artikelstrom rechts.
   Eigener Praefix .rhub__, damit nichts mit .rat* kollidiert.
   ============================================================ */
.rhub__wrap { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) {
  .rhub__wrap { grid-template-columns: 320px 1fr; gap: 2.8rem; }
}
.rhub__side { display: grid; gap: 1rem; min-width: 0; align-content: start; }
@media (min-width: 1024px) { .rhub__side { position: sticky; top: 100px; } }
.rhub__inhalt { min-width: 0; }

/* ---------- Suchfeld ---------- */
.rhub__suche { position: relative; }
.rhub__suche-ic {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.rhub__suche-feld {
  width: 100%; font: inherit; font-size: .94rem; color: var(--ink);
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: .85rem 1rem .85rem 2.85rem; box-shadow: var(--schatten-soft);
  transition: border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance: none; appearance: none;
}
.rhub__suche-feld::placeholder { color: var(--muted); opacity: .85; }
.rhub__suche-feld:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .18);
}
.rhub__suche-feld::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- Themen-Karte mit Filter-Buttons ---------- */
.rhub__themen {
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 1.2rem 1rem; box-shadow: var(--schatten-soft);
}
.rhub__themen-titel {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-tief); margin: 0 .55rem .8rem;
}
.rhub__themen-liste { display: grid; gap: .1rem; margin: 0; list-style: none; }
.rhub__filter {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  gap: .7rem; padding: .55rem .55rem .55rem .55rem; border: 0; border-radius: 10px;
  background: transparent; text-align: left; line-height: 1.35;
  font-size: .9rem; font-weight: 600; color: var(--ink);
  transition: background .18s ease, color .18s ease;
}
.rhub__filter:hover { background: var(--bg-soft); color: var(--gold-hover); }
.rhub__filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rhub__filter-zahl {
  flex: none; min-width: 26px; text-align: center; padding: .08rem .42rem;
  border-radius: 99px; background: var(--bg-soft);
  font-size: .72rem; font-weight: 800; color: var(--muted);
}
.rhub__filter[aria-pressed="true"] { background: var(--gold-hover); color: #fff; }
.rhub__filter[aria-pressed="true"]:hover { background: var(--gold-tief); color: #fff; }
.rhub__filter[aria-pressed="true"] .rhub__filter-zahl {
  background: rgba(255,255,255,.24); color: #fff;
}

/* ---------- Dunkle Beratungs-Karte (einziges dunkles Element hier) ---------- */
.rhub__cta {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-tief) 85%);
  color: rgba(255,255,255,.78); border-radius: 16px; padding: 1.4rem 1.3rem;
}
.rhub__cta .kicker { color: var(--gold); margin-bottom: .5rem; }
.rhub__cta h2 { color: #fff; font-size: 1.15rem; line-height: 1.25; margin-bottom: .5rem; }
.rhub__cta p { font-size: .86rem; line-height: 1.6; margin-bottom: 1.1rem; }
.rhub__cta .btn { width: 100%; font-size: .92rem; padding: .8rem 1rem; }

/* ---------- Artikelstrom ---------- */
.rhub__liste { display: grid; gap: 1.1rem; }
.rhub__item[hidden] { display: none; }

/* Empfohlener Artikel als grosse Hero-Card */
.rhub__hero {
  position: relative; display: block; overflow: hidden; border-radius: 20px;
  min-height: 340px; color: #fff; box-shadow: var(--schatten-card);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
}
.rhub__hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.rhub__hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,13,.16) 0%, rgba(10,11,13,.58) 48%, rgba(10,11,13,.9) 100%);
}
.rhub__hero:hover { transform: translateY(-3px); }
.rhub__hero:hover > img { transform: scale(1.05); }
.rhub__hero-txt {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end;
  min-height: 340px; padding: 1.5rem 1.5rem 1.4rem;
}
.rhub__hero-txt h2 {
  color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.15; margin-bottom: .5rem; max-width: 20ch;
}
.rhub__hero-txt p {
  font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.82);
  max-width: 46ch; margin-bottom: 1rem;
}
.rhub__hero-fuss {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem;
}
.rhub__hero .rhub__meta { color: rgba(255,255,255,.78); }
.rhub__hero .rhub__mehr { color: #fff; }
@media (min-width: 700px) { .rhub__hero, .rhub__hero-txt { min-height: 400px; } }
@media (min-width: 700px) { .rhub__hero-txt { padding: 2rem 2rem 1.8rem; } }

/* Badge (Kategorie) */
.rhub__badge {
  display: inline-block; align-self: flex-start; margin-bottom: .6rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .62rem; border-radius: 7px;
  background: rgba(var(--gold-rgb), .12); color: var(--gold-tief);
}
.rhub__badge--hell { background: var(--gold); color: var(--navy-tief); }

/* Listen-Cards: Bild links, Text rechts */
.rhub__card {
  display: grid; grid-template-columns: 1fr; overflow: hidden;
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--schatten-soft);
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.rhub__card:hover {
  transform: translateY(-3px); box-shadow: var(--schatten-card);
  border-color: rgba(var(--gold-rgb), .42);
}
.rhub__card-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; }
.rhub__card-bild img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.rhub__card:hover .rhub__card-bild img { transform: scale(1.06); }
.rhub__card-txt {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 1.15rem 1.25rem 1.25rem; min-width: 0;
}
.rhub__card-txt h3 { font-size: 1.05rem; line-height: 1.3; margin-bottom: .35rem; }
.rhub__card-txt p { font-size: .9rem; color: var(--muted); margin-bottom: .9rem; }
.rhub__card-fuss {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
}
@media (min-width: 640px) {
  .rhub__card { grid-template-columns: 220px 1fr; }
  .rhub__card-bild { aspect-ratio: auto; height: 100%; min-height: 176px; }
  .rhub__card-txt { padding: 1.3rem 1.5rem; }
}

/* Meta + Weiterlesen */
.rhub__meta {
  display: inline-flex; align-items: center; gap: .38rem;
  font-size: .74rem; font-weight: 600; color: var(--muted);
}
.rhub__meta svg { flex: none; opacity: .7; }
.rhub__mehr {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .88rem; font-weight: 700; color: var(--gold-tief);
}
.rhub__mehr .pf { transition: transform .3s ease; }
.rhub__hero:hover .rhub__mehr .pf,
.rhub__card:hover .rhub__mehr .pf { transform: translateX(4px); }

/* Leer-Hinweis (aria-live, erscheint nur mit Text) */
.rhub__leer {
  margin-top: 1.1rem; padding: 1.5rem 1.3rem; text-align: center;
  background: var(--bg); border: 1px dashed var(--border); border-radius: 16px;
  color: var(--muted); font-size: .95rem; font-weight: 600;
}
.rhub__leer:empty { display: none; }
/* Kursive Fraunces traegt rechts Luft mit sich; vor dem Punkt sonst sichtbare Luecke. */
.rhub__cta h2 .serif { margin-right: -.05em; }

/* ---------- Bewertungs-Karten: Fotos zum Einsatz (wie bei Google-Rezensionen) ---------- */
.rez__fotos { display: flex; gap: .5rem; margin: 1rem 0 0; }
.rez__fotos img {
  width: 76px; height: 76px; flex: none; object-fit: cover;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  transition: transform .3s cubic-bezier(.22,1,.36,1), border-color .3s ease;
}
.rez__fotos img:hover { transform: scale(1.06); border-color: rgba(var(--gold-rgb), .55); }
@media (max-width: 520px) { .rez__fotos img { width: 68px; height: 68px; } }

/* ---------- FAQ: weiches Auf- und Zuklappen ----------
   max-height-Transition statt height: <details> laesst sich nicht direkt
   animieren. Der Wert ist bewusst grosszuegig (laengste Antwort passt rein). */
.faq__card summary { list-style: none; }
.faq__card summary .plus { transition: transform .42s cubic-bezier(.22, 1, .36, 1); }
.faqw {
  max-height: 0; overflow: hidden;
  transition: max-height .42s cubic-bezier(.22, 1, .36, 1),
              opacity .3s ease .06s;
  opacity: 0;
}
.faq__card details[open] .faqw { max-height: var(--faq-h, 60rem); opacity: 1; }
.faq__card details.faq--zu .faqw {
  max-height: 0; opacity: 0;
  transition: max-height .36s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.faq__card details.faq--zu summary .plus { transform: rotate(0deg); }
.faqw__in > *:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .faqw { transition: none; }
  .faq__card summary .plus { transition: none; }
}

/* ---------- Entsorgungs-Section: Metall zu Metall ---------- */
.ents__grid { display: grid; gap: 1.4rem; margin-bottom: 2.2rem; }
@media (min-width: 760px)  { .ents__grid { grid-template-columns: repeat(3, 1fr); } }
.ents {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.ents:hover { transform: translateY(-3px); box-shadow: var(--schatten-card); border-color: rgba(var(--gold-rgb), .35); }
.ents__bild { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-soft); }
.ents__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.ents:hover .ents__bild img { transform: scale(1.04); }
.ents__txt { padding: 1.2rem 1.3rem 1.4rem; }
.ents__txt h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.ents__txt p { font-size: .9rem; line-height: 1.6; color: var(--muted); }

/* Abschluss-Zeile: was VOR der Entsorgung passiert */
.ents__erst {
  display: flex; align-items: flex-start; gap: .9rem;
  max-width: 54rem; margin-inline: auto;
  background: var(--bg-soft); border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.ents__erst-ic {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--creme); color: var(--gold-hover);
}
.ents__erst p { font-size: .92rem; line-height: 1.6; color: var(--muted); }
.ents__erst b { color: var(--navy); font-weight: 700; }
@media (max-width: 520px) { .ents__erst { flex-direction: column; gap: .7rem; } }


/* Turnstile-Widget im Formular (24.08.) */
.cf-turnstile { margin: .2rem 0 .1rem; min-height: 65px; }
.formular .cf-turnstile iframe { max-width: 100%; }


/* ---------- Leistungsseiten-Feinschliff (24.08.) ---------- */
/* 1) "Weitere Leistungen": unvollstaendige Kartenreihe zentrieren */
@media (min-width: 700px) {
  .svc__grid--zentriert { display: flex; flex-wrap: wrap; justify-content: center; }
  .svc__grid--zentriert > * { flex: 0 1 calc(33.333% - .67rem); min-width: 0; }
}
/* 2) Split-Sections: Text und Bild auf gleicher Hoehe zentriert,
      CTA-Duo nebeneinander statt untereinander */
.split2 { align-items: center; }
.split2 .subhero__ctas { flex-wrap: wrap; gap: .7rem; }
@media (min-width: 640px) { .split2 .subhero__ctas { flex-wrap: nowrap; } }
.split2 .subhero__ctas .btn { white-space: nowrap; }
/* 3) Hero-Button der Unterseiten: weisse Schrift auf Gruen */
.subhero .btn--gold { color: #fff; }
/* Startseiten-Hero: gleiche Behandlung wie bei den Unterseiten-Heros, auf dem
   dunklen Bild wirkt die dunkle Schrift im gruenen Button matschig. */
.held__ctas .btn--gold { color: #fff; }

/* ---------- Bilder-Laufleiste: echte Einsatzfotos ----------
   Die Spur enthaelt jedes Bild zweimal hintereinander; die Animation schiebt
   sie um genau die Haelfte, dadurch laeuft der Wechsel nahtlos durch. */
.galerie {
  overflow: hidden;
  /* Die Laufleiste ist der Abschluss der Section - das volle Section-Padding
     unten liess eine grosse leere schwarze Flaeche stehen. */
  padding-bottom: clamp(2rem, 3.5vw, 2.8rem);
}
.galerie .sec-head--center { margin-bottom: 2.2rem; }
.galerie__band {
  position: relative; width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.galerie__spur {
  display: flex; gap: 1rem; width: max-content;
  animation: galerie-lauf 62s linear infinite;
}
.galerie__band:hover .galerie__spur { animation-play-state: paused; }
.galerie__spur img {
  width: clamp(200px, 24vw, 300px); height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.12); flex: none;
  transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease;
}
.galerie__spur img:hover { transform: scale(1.03); border-color: rgba(var(--gold-rgb), .5); }
@keyframes galerie-lauf {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-50% - .5rem), 0, 0); }  /* halbe Spur + halbes gap */
}
@media (prefers-reduced-motion: reduce) {
  .galerie__spur { animation: none; }
  .galerie__band { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---------- Hero-Karte als Bewertungs-Aufruf ----------
   Statt rotierender Zitate: klickbarer Weg zum Review-Funnel, damit
   Bestandskunden direkt bewerten koennen. */
.held__review--bewerten p { font-size: .88rem; line-height: 1.55; color: var(--muted); }
.held__review--bewerten p b { display: block; color: var(--navy); font-size: .95rem; margin-bottom: .25rem; }
.held__review-cta {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .88rem; color: var(--gold-tief);
}
.held__review-cta .pf { transition: transform .3s cubic-bezier(.22,1,.36,1); }
.held__review--bewerten:hover .held__review-cta .pf { transform: translateX(4px); }
.held__review--bewerten .held__review-fuss { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }

/* ---------- Orts-Chips: gleiches Pixelraster fuer alle Reihen ----------
   Chiphoehe (52,07px) und Gap (11,2px) waren krumm, dadurch landete jede Reihe
   auf einem anderen Subpixel-Offset. Bei 14px-Icons mit 2px Strichstaerke
   ergibt das je Reihe anderes Antialiasing -- die Pins der letzten Reihe sahen
   dadurch "verdreht" aus. Ganze Pixel loesen das. */
.orte__grid { gap: 12px; }
.orte__grid .ort {
  min-height: 52px;
  /* Zeilenhoehe und Innenabstand ganzzahlig, sonst bleibt die Chiphoehe
     krumm (52,07px) und jede Reihe verschiebt sich um den Rest. */
  line-height: 24px;
  padding-top: 13px; padding-bottom: 13px;
}
.orte__grid .ort svg {
  shape-rendering: geometricPrecision;   /* gleichmaessige Kanten unabhaengig
                                            von der Subpixel-Position */
}


/* Ratgeber-Hub: dunkler Seitenkopf (24.08.) */
.subhero--dunkel { background: var(--navy); color: rgba(255,255,255,.78); }
.subhero--dunkel h1 { color: #fff; }
.subhero--dunkel .subhero__sub { color: rgba(255,255,255,.66); }
.subhero--dunkel .kicker { color: var(--gold); }
.subhero--dunkel .subhero__krumen { color: rgba(255,255,255,.55); }
.subhero--dunkel .subhero__krumen a:hover { color: var(--gold); }
.subhero--dunkel .btn--line { border-color: rgba(255,255,255,.35); background: transparent; color: #fff; }
.subhero--dunkel .btn--line:hover { border-color: var(--gold); }


/* ---------- KI-Kennzeichnung (24.08.) ----------
   Sitzt auf jedem generierten Bild unten rechts. Echte Kundenfotos
   (echt-*, galerie-*, projekt-*, hero-* der Handykamera) bekommen sie NICHT.
   Transparenzpflicht nach EU-AI-Act Art. 50, gilt seit 08/2026. */
.ki-tag {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 3;
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: .6rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  line-height: 1.35; white-space: nowrap;
  color: rgba(255,255,255,.9);
  background: rgba(10,11,13,.6);
  border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  padding: .24rem .5rem .24rem .42rem; border-radius: 99px;
  pointer-events: none;   /* die Karten liegen in <a>, das Tag darf nicht stoeren */
}
.ki-tag svg { flex: none; opacity: .8; }

/* Grosse Split-Bilder haben 24px Radius -> etwas mehr Abstand zur Ecke */
.split2__bild .ki-tag, .ents__bild .ki-tag { right: .9rem; bottom: .9rem; }

/* Diese beiden Container waren bisher nicht positioniert */
.split2__bild, .ents__bild { position: relative; }

@media (max-width: 520px) {
  .ki-tag { font-size: .56rem; padding: .2rem .45rem .2rem .38rem; right: .55rem; bottom: .55rem; }
}