/* ══════════════════════════════════════════════════════════════════════
   ZEGO Gebäudereinigung · socialimpactx
   Hell, ruhig, bildstark. Sachliche Schrift in moderaten Größen,
   jeder Abschnitt passt auf eine Bildschirmhöhe.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* Marke, aus der Logodatei gemessen */
  --nacht:        #0B1533;
  --indigo:       #22357E;
  --indigo-tief:  #17255C;
  --cyan-aktion:  #0A73A8;   /* Links auf Weiß, 5,2:1 */
  --cyan:         #38ABE2;   /* Logofarbe, nur Zier */
  --cyan-hell:    #8FDBF5;   /* auf dunklem Grund */

  --eis:          #F3F7FB;
  --eis-tief:     #E5EDF6;
  --weiss:        #FFFFFF;
  --graphit:      #1A2233;
  --leise:        #5A6477;
  --linie:        #E1E8F0;

  /* Namen, die das Grundgerüst erwartet */
  --farbe-text: var(--graphit);
  --farbe-text-leise: var(--leise);
  --farbe-hintergrund: var(--eis);
  --farbe-flaeche: var(--weiss);
  --farbe-akzent: var(--indigo);
  --farbe-akzent-text: #fff;
  --farbe-linie: var(--linie);

  /* Type Scale: MIN bei 1280 px, MAX bei 1920 px, linear dazwischen */
  --fs-mini:       clamp(0.7188rem, 0.5938rem + 0.1562vw, 0.7812rem);   /* 11.5–12.5px · Versalien-Labels, Zähler, Fußnoten */
  --fs-xs:         clamp(0.7812rem, 0.6562rem + 0.1562vw, 0.8438rem);   /* 12.5–13.5px · Metaangaben, Chips, Formular-Labels */
  --fs-sm:         clamp(0.8438rem, 0.7188rem + 0.1562vw, 0.9062rem);   /* 13.5–14.5px · Hilfstexte, kleine Listen */
  --fs-klein:      clamp(0.9062rem, 0.7812rem + 0.1562vw, 0.9688rem);   /* 14.5–15.5px · Text in Karten und Listen */
  --fs-text:       clamp(1rem, 0.875rem + 0.1562vw, 1.0625rem);   /* 16–17px · Fließtext */
  --fs-lead:       clamp(1.0625rem, 0.8125rem + 0.3125vw, 1.1875rem);   /* 17–19px · Einleitungen */
  --fs-h4:         clamp(1.125rem, 0.8125rem + 0.3906vw, 1.2812rem);   /* 18–20.5px · kleine Zwischenüberschriften, Menü groß */
  --fs-h3:         clamp(1.2188rem, 0.7812rem + 0.5469vw, 1.4375rem);   /* 19.5–23px · Kartenüberschriften */
  --fs-titel:      clamp(1.4375rem, 0.8125rem + 0.7812vw, 1.75rem);   /* 23–28px · Kartentitel groß, Formulartitel */
  --fs-zitat:      clamp(1.1875rem, 0.6875rem + 0.625vw, 1.4375rem);   /* 19–23px · Zitat im Rezensionsband */
  --fs-h2:         clamp(1.9375rem, 0.5625rem + 1.7188vw, 2.625rem);   /* 31–42px · Abschnittsüberschriften */
  --fs-h1:         clamp(2.5rem, 0.75rem + 2.1875vw, 3.375rem);   /* 40–54px · Seitentitel, Statement */
  --fs-hero:       clamp(3.25rem, 1rem + 2.8125vw, 4.375rem);   /* 52–70px · Startseiten-Hero */
  --fs-zahl:       clamp(2.25rem, 1rem + 1.5625vw, 2.875rem);   /* 36–46px · Kennzahlen */
  --fs-zahl-gross: clamp(4rem, 1rem + 3.75vw, 5.5rem);   /* 64–88px · Google-Wertung */

  --lh-hero:   1.1;
  --lh-titel:  1.14;
  --lh-klein-titel: 1.25;
  --lh-text:   1.6;
  --lh-dicht:  1.5;

  /* Abstände fluid, gleiche Formel */
  --abstand:     clamp(4rem, -2rem + 7.5vw, 7rem);   /* 64–112px Abschnittspadding */
  --abstand-gross: clamp(5rem, -2rem + 8.75vw, 8.5rem); /* 80–136px für Ruhe-Abschnitte */
  --kopf-luft:   clamp(6.5rem, 2.5rem + 5vw, 8.5rem);   /* 104–136px unter der schwebenden Kopfleiste */

  --schrift: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --breite: clamp(75rem, 50rem + 31.25vw, 87.5rem);   /* Inhaltsbreite 1200–1400px */
  --rand: clamp(1.1rem, 4vw, 2.5rem);
  --radius-gross: 20px;
  --radius: 14px;
  --radius-klein: 10px;
  --kopfhoehe: 76px;

  --schatten: 0 1px 2px rgba(11,21,51,.04), 0 8px 24px rgba(11,21,51,.06);
  --schatten-hoch: 0 2px 6px rgba(11,21,51,.05), 0 20px 48px rgba(11,21,51,.12);
  --weich: cubic-bezier(.22, .8, .24, 1);
}

/* ─── Reset ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--kopfhoehe); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  font-family: var(--schrift);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: var(--lh-text);
  color: var(--graphit);
  background: var(--eis);
  -webkit-font-smoothing: antialiased;
}
img, picture, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
picture > source { display: none; }
input, button, textarea, select { font: inherit; color: inherit; }
a { color: var(--cyan-aktion); }
p { text-wrap: pretty; }
main p { max-width: 72ch; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: var(--lh-titel);
  letter-spacing: -.022em;
  color: var(--indigo);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-klein-titel); letter-spacing: -.012em; }
h4 { font-size: var(--fs-h4); line-height: var(--lh-klein-titel); }

:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--cyan-hell); color: var(--nacht); }

.skip { position: absolute; left: -9999px; z-index: 999; background: var(--indigo); color: #fff; padding: .7rem 1rem; }
.skip:focus { left: 0; top: 0; }

/* ─── Bausteine ───────────────────────────────────────────────────────── */
.bahn { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: var(--abstand); }
.auf-weiss { background: var(--weiss); }
.auf-eis { background: var(--eis); }

.stern { width: 1em; height: 1em; flex: none; color: var(--cyan); }

.marke-zeile {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: var(--fs-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan-aktion); margin-bottom: .8rem;
}
.marke-zeile .stern { width: 11px; height: 11px; }

.lead { font-size: var(--fs-lead); color: var(--leise); line-height: var(--lh-text); max-width: 58ch; }

.kopfzeile {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; align-items: end;
  margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem);
}
.kopfzeile .lead { justify-self: end; font-size: var(--fs-text); }
@media (max-width: 860px) { .kopfzeile { grid-template-columns: 1fr; } .kopfzeile .lead { justify-self: start; } }

/* ─── Knöpfe ──────────────────────────────────────────────────────────── */
.knopf, .knopf-hell, .knopf-glas, .knopf-rand {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.3rem; border-radius: 999px; border: 0;
  font-weight: 550; font-size: var(--fs-klein); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .3s var(--weich), background .2s, color .2s, box-shadow .3s var(--weich);
}
.knopf svg, .knopf-hell svg, .knopf-glas svg, .knopf-rand svg { width: 17px; height: 17px; flex: none; }
.knopf { background: var(--indigo); color: #fff; box-shadow: 0 6px 16px rgba(34,53,126,.2); }
.knopf:hover { background: var(--nacht); transform: translateY(-1px); }
.knopf-hell { background: #fff; color: var(--indigo); }
.knopf-hell:hover { background: var(--eis); transform: translateY(-1px); }
.knopf-glas {
  background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}
.knopf-glas:hover { background: rgba(255,255,255,.22); transform: translateY(-1px); }
.knopf-rand { background: transparent; color: var(--indigo); box-shadow: inset 0 0 0 1px var(--linie); }
.knopf-rand:hover { box-shadow: inset 0 0 0 1px var(--cyan); background: #fff; }
.pfeil { transition: transform .3s var(--weich); }
a:hover > .pfeil, button:hover > .pfeil { transform: translateX(3px); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .6rem; }

/* ─── Kopf: schwebende Kapsel ─────────────────────────────────────────── */
.kopf {
  position: fixed; z-index: 90; left: 0; right: 0; top: 0;
  padding: .7rem var(--rand) 0; pointer-events: none;
  transition: transform .4s var(--weich);
}
.kopf-innen {
  pointer-events: auto; max-width: var(--breite); margin-inline: auto;
  display: flex; align-items: center; gap: 1rem;
  background: rgba(255,255,255,.94);
  /* Weichzeichner bewusst klein: er wird beim Scrollen in jedem Bild neu berechnet */
  -webkit-backdrop-filter: saturate(1.25) blur(8px); backdrop-filter: saturate(1.25) blur(8px);
  border-radius: 999px; padding: .35rem .4rem .35rem 1.1rem;
  box-shadow: 0 6px 24px rgba(11,21,51,.1);
}
.kopf.versteckt { transform: translateY(-120%); }
.logo img { width: 108px; height: auto; }

.menue { display: flex; gap: .1rem; margin-left: auto; align-items: center; }
.menue a {
  text-decoration: none; color: var(--graphit); font-weight: 500; font-size: var(--fs-klein);
  padding: .5rem .8rem; border-radius: 999px; transition: background .2s, color .2s;
}
.menue a:hover, .menue a[aria-current="page"] { background: var(--eis); color: var(--indigo); }

.kopf-tel {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--indigo); color: #fff; text-decoration: none;
  font-weight: 550; font-size: var(--fs-klein); white-space: nowrap;
  border-radius: 999px; padding: 0 1rem; min-height: 40px; transition: background .2s;
}
.kopf-tel:hover { background: var(--nacht); }
.kopf-tel svg { width: 15px; height: 15px; }

.menue-schalter {
  display: none; background: var(--eis); border: 0; cursor: pointer; border-radius: 999px;
  width: 40px; height: 40px; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
}
.menue-schalter span { display: block; width: 17px; height: 2px; background: var(--indigo); border-radius: 2px; transition: transform .25s, opacity .2s; }
.menue-schalter[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menue-schalter[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menue-schalter[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 960px) {
  .menue-schalter { display: flex; order: 3; }
  .kopf-tel { margin-left: auto; }
  .menue { display: none; }
}

/* ─── Handymenü ────────────────────────────────────────────────────────
   Eigenes Element direkt unter <body>. Liegt es in der Kopfleiste, wird es
   durch deren backdrop-filter auf die Größe der Kapsel beschnitten. */
.handymenue {
  position: fixed; inset: 0; z-index: 88;
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(env(safe-area-inset-top) + 5.5rem) var(--rand) calc(env(safe-area-inset-bottom) + 1.5rem);
  background: var(--weiss); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px); transition: opacity .28s ease, transform .35s var(--weich);
}
.handymenue[hidden] { display: none; }
.handymenue.offen { opacity: 1; transform: none; }
.handymenue-links { display: grid; border-top: 1px solid var(--linie); }
.handymenue-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding: .4rem .2rem; border-bottom: 1px solid var(--linie);
  font-size: var(--fs-h3); font-weight: 600; color: var(--indigo); text-decoration: none; letter-spacing: -.01em;
}
.handymenue-links a svg { width: 18px; height: 18px; color: var(--cyan-aktion); flex: none; }
.handymenue-links a[aria-current="page"] span { color: var(--cyan-aktion); }
.handymenue-links a:active { background: var(--eis); }
.handymenue-fuss { display: grid; gap: .6rem; }
.handymenue-fuss .knopf, .handymenue-fuss .knopf-rand { width: 100%; min-height: 52px; }
.handymenue-fuss p { margin-top: .4rem; font-size: var(--fs-sm); color: var(--leise); text-align: center; }
html.menue-offen, html.menue-offen body { overflow: hidden; }
html.menue-offen .handy-leiste { display: none !important; }
html.menue-offen .kopf { transform: none !important; }
html.menue-offen .kopf-innen { box-shadow: none; }
@media (min-width: 961px) { .handymenue { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .handymenue { transition: none; } }
@media (max-width: 520px) {
  .kopf-innen { padding-left: .9rem; gap: .4rem; }
  .logo img { width: 96px; }
  .kopf-tel { width: 40px; padding: 0; justify-content: center; }
  .kopf-tel span { display: none; }
}

/* ══ Bühne (Startseite) ══════════════════════════════════════════════ */
.buehne {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  color: #fff; background: var(--nacht);
}
.buehne-foto, .buehne-nebel, .buehne-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; }
.buehne-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.buehne-nebel, .buehne-leinwand { display: none; }
.wischen .buehne-nebel, .wischen .buehne-leinwand { display: block; }
.buehne-nebel { z-index: -2; overflow: hidden; }
.buehne-nebel img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%;
  filter: blur(22px) saturate(.75) brightness(1.12); transform: scale(1.08);
}
.buehne-nebel::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.38), transparent 60%), rgba(226,238,248,.32);
}
.buehne-leinwand { z-index: -1; }
/* Der Nebel liegt unter der Leinwand und ist am Ende von ihr verdeckt:
   er darf sofort verschwinden. Die Leinwand blendet danach über das
   gleiche Bild aus, dadurch steht das Foto einfach still. */
.klar .buehne-nebel { opacity: 0; transition: none; }
.klar .buehne-leinwand { opacity: 0; transition: opacity .8s ease .1s; }

.buehne-verlauf {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(11,21,51,.88) 0%, rgba(11,21,51,.55) 32%, rgba(11,21,51,0) 62%),
    linear-gradient(to right, rgba(11,21,51,.55) 0%, rgba(11,21,51,.2) 45%, rgba(11,21,51,0) 65%);
}
.buehne-inhalt { position: relative; z-index: 1; width: 100%; padding-top: var(--kopf-luft); padding-bottom: clamp(2.5rem, -0.5rem + 3.75vw, 4rem); }

.buehne h1 { color: #fff; font-size: var(--fs-hero); line-height: var(--lh-hero); letter-spacing: -.03em; font-weight: 600; max-width: 18ch; }
.buehne h1 .zeile { display: block; overflow: hidden; padding-bottom: .04em; }
.buehne h1 .zeile > span { display: inline-block; }
.buehne h1 .hervor { color: var(--cyan-hell); }
.buehne-ort {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--fs-mini); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
  color: var(--cyan-hell); margin-bottom: 1rem;
}
.buehne-ort .stern { width: 12px; height: 12px; color: var(--cyan-hell); }
.buehne h1, .buehne-text { text-shadow: 0 2px 24px rgba(11,21,51,.4); }
.buehne-ort { text-shadow: 0 1px 10px rgba(11,21,51,.7); }

.buehne-fuss { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 1.4rem 3rem; margin-top: 1.3rem; }
.buehne-text { font-size: var(--fs-lead); line-height: var(--lh-text); color: rgba(255,255,255,.88); max-width: 52ch; margin-bottom: 1.3rem; }
@media (max-width: 1000px) { .buehne-fuss { grid-template-columns: 1fr; } .erreichbar { justify-self: start; } }

.erreichbar {
  display: flex; align-items: center; gap: .85rem;
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(9px) saturate(1.2); backdrop-filter: blur(9px) saturate(1.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  border-radius: var(--radius); padding: .8rem 1rem; color: #fff;
}
.erreichbar-punkt { width: 9px; height: 9px; border-radius: 50%; flex: none; background: #9AA6BD; box-shadow: 0 0 0 3px rgba(154,166,189,.25); }
.erreichbar.offen .erreichbar-punkt { background: #3DDC97; animation: puls 2.2s infinite; }
@keyframes puls { 0%,100% { box-shadow: 0 0 0 3px rgba(61,220,151,.28); } 50% { box-shadow: 0 0 0 8px rgba(61,220,151,0); } }
.erreichbar strong { display: block; font-weight: 600; font-size: var(--fs-klein); line-height: 1.3; }
.erreichbar span { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.75); line-height: 1.35; }
.erreichbar a { margin-left: auto; color: #fff; font-weight: 550; font-size: var(--fs-klein); text-decoration: none; white-space: nowrap; padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.22); }
.erreichbar a:hover { color: var(--cyan-hell); }

@media (prefers-reduced-motion: no-preference) {
  .js .buehne h1 .zeile > span { transform: translateY(105%); animation: hoch .9s var(--weich) forwards; }
  .js .buehne h1 .zeile:nth-child(3) > span { animation-delay: .08s; }
  .js .buehne h1 .zeile:nth-child(4) > span { animation-delay: .16s; }
  .js .buehne .buehne-ort, .js .buehne-fuss { opacity: 0; animation: auf .8s var(--weich) .4s forwards; }
  .js .buehne .buehne-ort { animation-delay: .05s; }
}
@keyframes hoch { to { transform: translateY(0); } }
@keyframes auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
  :root { --abstand: 3.5rem; --abstand-gross: 4rem; --kopf-luft: 6rem; }
  .buehne h1 { font-size: clamp(2.2rem, 9.6vw, 3rem); }
  .buehne { min-height: max(600px, 92svh); }
  .buehne-foto img, .buehne-nebel img { object-position: 76% 50%; }
  .buehne-verlauf { background: linear-gradient(to top, rgba(11,21,51,.95) 0%, rgba(11,21,51,.8) 50%, rgba(11,21,51,.4) 80%, rgba(11,21,51,.3) 100%); }
  .buehne-fuss .knopfreihe > * { flex: 1 1 100%; }
  .erreichbar a { display: none; }
  .buehne-text { font-size: var(--fs-text); }
}

/* ══ Seitenbühne (Unterseiten) ═══════════════════════════════════════ */
.seitenbuehne {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  color: #fff; background: var(--nacht);
}
.seitenbuehne img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.seitenbuehne::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(11,21,51,.9) 0%, rgba(11,21,51,.5) 40%, rgba(11,21,51,.08) 72%),
    linear-gradient(to right, rgba(11,21,51,.55), rgba(11,21,51,0) 62%);
}
.seitenbuehne.geteilt img { left: auto; width: 56%; }
.seitenbuehne.geteilt::after {
  background:
    linear-gradient(to right, var(--nacht) 44%, rgba(11,21,51,.55) 56%, rgba(11,21,51,0) 72%),
    linear-gradient(to top, rgba(11,21,51,.45), rgba(11,21,51,0) 40%);
}
.seitenbuehne.ohne-foto {
  background:
    radial-gradient(800px 500px at 85% 10%, rgba(56,171,226,.3), transparent 60%),
    linear-gradient(160deg, var(--indigo) 0%, var(--nacht) 75%);
}
.seitenbuehne.ohne-foto::after { display: none; }
.seitenbuehne-sterne { position: absolute; inset: 0; z-index: -1; pointer-events: none; color: rgba(143,219,245,.14); }
.seitenbuehne-sterne svg { position: absolute; }
.seitenbuehne .bahn { padding-top: clamp(11rem, 1rem + 12.5vw, 16rem); padding-bottom: clamp(3rem, 0rem + 3.75vw, 4.5rem); }
.seitenbuehne h1 { color: #fff; max-width: 20ch; hyphens: auto; -webkit-hyphens: auto; }
.seitenbuehne .lead { color: rgba(255,255,255,.86); margin-top: 1rem; max-width: 56ch; }
.seitenbuehne .knopfreihe { margin-top: 1.5rem; }
.seitenbuehne .marke-zeile { color: var(--cyan-hell); }
.brotkrumen { font-size: var(--fs-xs); color: rgba(255,255,255,.7); margin-bottom: .9rem; }
.brotkrumen a { color: rgba(255,255,255,.85); text-decoration: none; }
.brotkrumen a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 900px) {
  .seitenbuehne.geteilt img { width: 100%; }
  .seitenbuehne.geteilt::after, .seitenbuehne::after {
    background: linear-gradient(to top, rgba(11,21,51,.95) 0%, rgba(11,21,51,.78) 50%, rgba(11,21,51,.35) 100%);
  }
}

/* ══ Haltung ════════════════════════════════════════════════════════ */
.werte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 3.5rem; }
.werte li { position: relative; padding: 1.4rem 0 0; border-top: 1px solid var(--linie); }
.werte li::before { content: ''; position: absolute; left: 0; top: -1px; width: 48px; height: 2px; background: var(--cyan); }
.werte .nr { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--cyan-aktion); margin-bottom: .6rem; letter-spacing: .06em; }
.werte h3 { margin-bottom: .35rem; }
.werte p { color: var(--leise); font-size: var(--fs-klein); line-height: var(--lh-text); }
@media (max-width: 760px) { .werte { grid-template-columns: 1fr; } }

/* ══ Leistungsindex ═════════════════════════════════════════════════ */
.index-raster { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.index-liste { list-style: none; padding: 0; border-top: 1px solid var(--linie); }
.index-liste li { border-bottom: 1px solid var(--linie); }
.index-liste a {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem;
  padding: .72rem 0; text-decoration: none; color: var(--indigo); transition: color .2s;
}
.index-liste a::before {
  content: ''; position: absolute; left: -14px; top: 50%; width: 3px; height: 0; border-radius: 3px;
  background: var(--cyan); transform: translateY(-50%); transition: height .35s var(--weich);
}
.index-liste a.aktiv::before { height: 58%; }
.index-liste a.aktiv .name, .index-liste a:hover .name { color: var(--cyan-aktion); }
.index-liste .nr { font-size: var(--fs-mini); font-weight: 500; color: var(--leise); font-variant-numeric: tabular-nums; }
.index-liste .name { font-size: var(--fs-h4); font-weight: 550; letter-spacing: -.012em; line-height: 1.3; }
.index-liste .pfeil-kreis {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px var(--linie); color: var(--indigo);
  transition: background .25s, color .25s, box-shadow .25s, transform .35s var(--weich);
}
.index-liste .pfeil-kreis svg { width: 14px; height: 14px; }
.index-liste .kurz { display: none; }
.index-liste .handybild { display: none; }
.index-liste a:hover .pfeil-kreis, .index-liste a.aktiv .pfeil-kreis { background: var(--indigo); color: #fff; box-shadow: none; transform: rotate(-45deg); }
.index-liste a.aktiv .nr { color: var(--cyan-aktion); }

.index-rahmen { position: sticky; top: calc(var(--kopfhoehe) + 1rem); }
.index-bild { position: relative; aspect-ratio: 4 / 3.3; border-radius: var(--radius-gross); overflow: hidden; background: var(--eis-tief); box-shadow: var(--schatten); }
.index-bild img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s var(--weich), transform 1s var(--weich);
}
.index-bild img.aktiv { opacity: 1; transform: scale(1); }
.index-unterschrift {
  position: absolute; left: .7rem; right: .7rem; bottom: .7rem; z-index: 3;
  background: rgba(255,255,255,.96);
  border-radius: var(--radius); padding: .75rem .8rem .75rem 1rem;
  display: flex; align-items: center; gap: .8rem; justify-content: space-between;
}
.index-unterschrift p { color: var(--graphit); font-size: var(--fs-sm); line-height: var(--lh-dicht); }
.index-unterschrift .knopf { min-height: 40px; width: 40px; padding: 0; flex: none; }

@media (max-width: 900px) {
  .index-raster { grid-template-columns: 1fr; }
  .index-rahmen { display: none; }
  .index-liste a { grid-template-columns: 56px 1fr auto; padding: .7rem 0; gap: .9rem; }
  .index-liste a::before { display: none; }
  .index-liste .nr { display: none; }
  .index-liste .handybild { display: block; width: 56px; height: 56px; border-radius: var(--radius-klein); object-fit: cover; grid-row: span 2; }
  .index-liste .kurz { display: block; grid-column: 2 / 4; color: var(--leise); font-size: var(--fs-sm); line-height: var(--lh-dicht); margin-top: -.5rem; }
}

/* ══ Objektschein ═══════════════════════════════════════════════════ */
.schein-reiter {
  display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem;
  background: var(--weiss); border-radius: 999px; box-shadow: var(--schatten); margin-bottom: 1rem; max-width: 100%;
}
.schein-reiter button {
  border: 0; background: transparent; color: var(--graphit); border-radius: 999px;
  padding: .5rem .95rem; cursor: pointer; font-weight: 500; font-size: var(--fs-sm); min-height: 38px;
  transition: background .2s, color .2s;
}
.schein-reiter button:hover { background: var(--eis); }
.schein-reiter button[aria-selected="true"] { background: var(--indigo); color: #fff; }
.schein { display: grid; grid-template-columns: 1.4fr .6fr; overflow: hidden; background: var(--weiss); border-radius: var(--radius-gross); box-shadow: var(--schatten); }
.schein[hidden] { display: none; }
.schein-haupt { padding: clamp(1.3rem, 3vw, 2rem); }
.schein-haupt h3 { font-size: var(--fs-h3); }
.schein-haupt .unter { color: var(--cyan-aktion); font-weight: 500; font-size: var(--fs-klein); margin-top: .25rem; }
.schein-haupt .text { color: var(--leise); margin-top: .6rem; font-size: var(--fs-klein); max-width: 68ch; }
.schein-liste { list-style: none; padding: 0; margin: 1.1rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.4rem; }
.schein-liste li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-klein); line-height: var(--lh-dicht); }
.schein-liste .stern { width: 11px; height: 11px; margin-top: .3rem; }
.schein-seite { background: linear-gradient(170deg, var(--indigo), var(--nacht)); color: #fff; padding: clamp(1.3rem, 3vw, 1.8rem); display: flex; flex-direction: column; gap: 1rem; }
.schein-seite dl { display: grid; gap: .8rem; margin: 0; }
.schein-seite dt { font-size: var(--fs-mini); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--cyan-hell); }
.schein-seite dd { margin: .15rem 0 0; font-weight: 500; font-size: var(--fs-klein); line-height: 1.4; }
.schein-seite .knopf-hell { margin-top: auto; min-height: 42px; }
@media (max-width: 860px) { .schein { grid-template-columns: 1fr; } .schein-liste { grid-template-columns: 1fr; } .schein-reiter { border-radius: var(--radius); } }

/* ══ Team ═══════════════════════════════════════════════════════════ */
.team-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.teambild { border-radius: var(--radius-gross); overflow: hidden; aspect-ratio: 3 / 2; box-shadow: var(--schatten); }
.teambild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.team-text .lead { margin-top: .9rem; font-size: var(--fs-text); }
.punkte { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
.punkte li { display: grid; grid-template-columns: 14px 1fr; gap: .1rem .6rem; }
.punkte .stern { width: 12px; height: 12px; margin-top: .3rem; }
.punkte strong { font-weight: 600; color: var(--indigo); font-size: var(--fs-klein); line-height: 1.35; }
.punkte span { grid-column: 2; color: var(--leise); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 900px) { .team-raster { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .punkte { grid-template-columns: 1fr; } }

/* ══ Ablauf ═════════════════════════════════════════════════════════ */
.ablauf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 2rem; counter-reset: s; }
.ablauf > div { counter-increment: s; padding: 0 2rem 0 0; }
.ablauf > div::before {
  content: '0' counter(s); display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); color: var(--indigo);
  font-size: var(--fs-xs); font-weight: 600; margin-bottom: 1rem;
}
.ablauf h3 { margin-bottom: .35rem; }
.ablauf p { color: var(--leise); font-size: var(--fs-klein); }
@media (max-width: 820px) { .ablauf { grid-template-columns: 1fr; } }

/* ══ Einzugsgebiet ══════════════════════════════════════════════════ */
.gebiet-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.gebiet-raster .lead { margin-top: .9rem; font-size: var(--fs-text); }
.orte { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin-top: 1.4rem; }
.orte li { background: var(--weiss); border-radius: 999px; padding: .3rem .75rem; font-weight: 500; color: var(--graphit); font-size: var(--fs-xs); box-shadow: inset 0 0 0 1px var(--linie); }
.orte li.haupt { background: var(--indigo); color: #fff; box-shadow: none; }




/* ══ Kontakt ════════════════════════════════════════════════════════ */
.kontakt-raster { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.kontakt-info .lead { margin-top: .9rem; font-size: var(--fs-text); }
.kontakt-wege { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .45rem; }
.kontakt-wege a, .kontakt-wege span {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  padding: .6rem .85rem; border-radius: var(--radius-klein); background: var(--weiss); color: var(--graphit);
  box-shadow: inset 0 0 0 1px var(--linie); font-weight: 500; font-size: var(--fs-klein); transition: box-shadow .2s;
  overflow-wrap: anywhere;
}
.kontakt-wege a:hover { box-shadow: inset 0 0 0 1px var(--cyan); }
.kontakt-wege svg { width: 16px; height: 16px; flex: none; color: var(--cyan-aktion); }
.kontakt-wege small { margin-left: auto; color: var(--leise); font-size: var(--fs-mini); font-weight: 400; }
.kontakt-hinweis { margin-top: 1.1rem; font-size: var(--fs-xs); color: var(--leise); }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }

/* ─── Formular ────────────────────────────────────────────────────────── */
.formular { background: var(--weiss); border-radius: var(--radius-gross); box-shadow: var(--schatten); padding: clamp(1.2rem, 2.6vw, 1.8rem); display: grid; gap: 0; }
.formular-titel { font-size: var(--fs-h4); }
.formular-unter { color: var(--leise); font-size: var(--fs-sm); margin-bottom: .3rem; }
.formular label, .wahl legend { display: block; font-weight: 500; font-size: var(--fs-xs); color: var(--graphit); margin: .55rem 0 .2rem; }
.formular input, .formular textarea, .formular select {
  width: 100%; min-height: 42px; padding: .55rem .8rem; font-size: var(--fs-klein);
  border: 0; border-radius: var(--radius-klein); background: var(--eis);
  box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .2s, background .2s;
}
.formular input:hover, .formular textarea:hover, .formular select:hover { background: var(--eis-tief); }
.formular input:focus, .formular textarea:focus, .formular select:focus { outline: 0; background: #fff; box-shadow: inset 0 0 0 2px var(--cyan); }
.formular textarea { resize: vertical; min-height: 64px; }
.formular .knopf { margin-top: .8rem; width: 100%; min-height: 44px; }
.formular-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
@media (max-width: 560px) { .formular-zwei { grid-template-columns: 1fr; } }

.wahl { display: flex; flex-wrap: wrap; gap: .3rem; border: 0; padding: 0; margin: 0; }
.wahl legend { margin-bottom: .35rem; padding: 0; }
.wahl label { margin: 0; font-weight: 400; }
.wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.wahl span { display: inline-block; padding: .32rem .7rem; border-radius: 999px; cursor: pointer; background: var(--eis); font-size: var(--fs-xs); color: var(--graphit); transition: background .2s, color .2s; }
.wahl span:hover { background: var(--eis-tief); }
.wahl input:checked + span { background: var(--indigo); color: #fff; }
.wahl input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--cyan); }

.einwilligung { display: flex; gap: .6rem; align-items: flex-start; margin-top: .7rem; font-size: var(--fs-xs); line-height: 1.5; color: var(--leise); }
.einwilligung input { width: 17px; height: 17px; min-height: 0; margin-top: .1rem; flex: none; accent-color: var(--indigo); }
.einwilligung label { margin: 0; font-weight: 400; color: inherit; font-size: inherit; }
.falle { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* ─── Karte, klickbar statt eingebettet ───────────────────────────────── */
.kartenfeld { border: 0; padding: 0; width: 100%; cursor: pointer; display: block; text-align: left; border-radius: var(--radius-gross); overflow: hidden; background: radial-gradient(circle at 50% 40%, rgba(56,171,226,.16), transparent 60%), var(--eis-tief); }
.kartenfeld iframe { width: 100%; height: 380px; border: 0; display: block; }
.kartenfeld-hinweis { padding: 3rem 1.5rem; display: grid; gap: .6rem; justify-items: center; text-align: center; }
.kartenfeld-hinweis svg { width: 26px; height: 26px; color: var(--indigo); }
.kartenfeld-hinweis strong { font-size: var(--fs-text); color: var(--indigo); font-weight: 600; }
.kartenfeld-hinweis p { color: var(--leise); font-size: var(--fs-sm); max-width: 56ch; }

/* ══ Leistungsseiten ════════════════════════════════════════════════ */
.umfang { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: u; }
.umfang li { counter-increment: u; padding: 1.2rem 1.2rem 1.3rem; background: var(--eis); border-radius: var(--radius); }
.umfang li::before { content: '0' counter(u); display: block; font-size: var(--fs-mini); font-weight: 600; color: var(--cyan-aktion); margin-bottom: .5rem; letter-spacing: .06em; }
.umfang h3 { margin-bottom: .3rem; }
.umfang p { color: var(--leise); font-size: var(--fs-sm); line-height: var(--lh-text); }
@media (max-width: 960px) { .umfang { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .umfang { grid-template-columns: 1fr; } }

.vorteile-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.vorteil { background: var(--weiss); border-radius: var(--radius); padding: .95rem 1.05rem; box-shadow: var(--schatten); display: flex; gap: .7rem; align-items: flex-start; }
.vorteil .haken { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--eis); color: var(--cyan-aktion); }
.vorteil .haken svg { width: 12px; height: 12px; }
.vorteil p { font-size: var(--fs-klein); line-height: var(--lh-dicht); padding-top: .1rem; }
@media (max-width: 960px) { .vorteile-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .vorteile-raster { grid-template-columns: 1fr; } }

.zielgruppen { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--linie); border-radius: var(--radius-gross); overflow: hidden; box-shadow: inset 0 0 0 1px var(--linie); }
.zielgruppe { background: var(--weiss); padding: 1.1rem 1.1rem 1.2rem; }
.zielgruppe .stern { width: 12px; height: 12px; margin-bottom: .7rem; }
.zielgruppe h3 { font-size: var(--fs-klein); margin-bottom: .3rem; }
.zielgruppe p { color: var(--leise); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 1100px) { .zielgruppen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .zielgruppen { grid-template-columns: 1fr; } }

.mehr-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin: clamp(2rem, 4vw, 2.8rem) 0 1rem; }
.mehr-kopf h3 { font-size: var(--fs-h4); }
.nachbarn { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.nachbar { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius); min-height: 170px; display: flex; align-items: flex-end; color: #fff; text-decoration: none; background: var(--nacht); }
.nachbar img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--weich); }
.nachbar::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,21,51,.85), rgba(11,21,51,0) 70%); }
.nachbar:hover img { transform: scale(1.05); }
.nachbar div { padding: 1rem 1.1rem; display: flex; justify-content: space-between; align-items: center; width: 100%; gap: .8rem; }
.nachbar strong { font-size: var(--fs-text); font-weight: 600; line-height: 1.2; }
.nachbar .pfeil-kreis { width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--indigo); display: grid; place-items: center; flex: none; }
.nachbar .pfeil-kreis svg { width: 13px; height: 13px; }
@media (max-width: 760px) { .nachbarn { grid-template-columns: 1fr; } .nachbar { min-height: 130px; } }

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 2.2rem; }
.kachel:nth-child(-n+3) { border-top: 1px solid var(--linie); }
@media (max-width: 1000px) { .kacheln { grid-template-columns: 1fr 1fr; } .kachel:nth-child(3) { border-top: 0; } }
.kachel { padding: 1rem 0; border-bottom: 1px solid var(--linie); display: grid; grid-template-columns: 1.4rem 1fr; gap: .15rem .5rem; }
.kachel .stern { width: 12px; height: 12px; margin-top: .35rem; }
.kachel h3 { font-size: var(--fs-text); }
.kachel p { grid-column: 2; color: var(--leise); font-size: var(--fs-sm); line-height: 1.5; }
@media (max-width: 760px) { .kacheln { grid-template-columns: 1fr; } .kachel:nth-child(2) { border-top: 0; } }

/* ─── Rechtstexte ─────────────────────────────────────────────────────── */
.rechtstext { max-width: calc(72ch + 2 * var(--rand)); margin-inline: auto; padding: var(--kopf-luft) var(--rand) var(--abstand); font-size: var(--fs-klein); }
.rechtstext .brotkrumen, .rechtstext .brotkrumen a { color: var(--leise); }
.rechtstext h1 { font-size: var(--fs-h1); margin-bottom: 2rem; }
.rechtstext h2 { font-size: var(--fs-h4); margin: 2.2rem 0 .6rem; }
.rechtstext h3 { font-size: var(--fs-text); margin: 1.5rem 0 .4rem; }
.rechtstext p, .rechtstext ul { margin-bottom: .9rem; }
.rechtstext ul { padding-left: 1.2rem; }
.rechtstext li { margin-bottom: .3rem; }
.stand { margin-top: 2.5rem; color: var(--leise); font-size: var(--fs-sm); }

/* ─── Referenzen: Logowand ────────────────────────────────────────────── */
.logowand {
  list-style: none; padding: 0; margin-top: clamp(2.2rem, 3.5vw, 3.2rem);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: clamp(2rem, 4vw, 3.6rem) clamp(2.2rem, 4.5vw, 4rem);
  padding-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--linie);
}
.logowand img {
  height: clamp(34px, 4vw, 56px); width: auto; max-width: 210px; object-fit: contain;
  display: block; transition: filter .35s, opacity .35s, transform .35s var(--weich);
}
/* Logos überall in ihren eigenen Farben, auf dem Handy wie am Rechner. */
@media (hover: hover) {
  .logowand li:hover img { transform: translateY(-3px); }
}
.logo-fussnote { margin-top: clamp(1.8rem, 3vw, 2.6rem); text-align: center; font-size: var(--fs-xs); color: var(--leise); }
@media (max-width: 600px) { .logowand img { max-width: 130px; } }

/* ─── ZEGO im Netz ────────────────────────────────────────────────────── */
.sozial-band {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: var(--abstand);
  background: linear-gradient(120deg, #17255C 0%, #0B1533 58%, #123A62 100%);
}
.sozial-glanz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.6px),
    radial-gradient(560px 420px at 76% 22%, rgba(56,171,226,.32), transparent 65%),
    radial-gradient(460px 340px at 6% 88%, rgba(143,219,245,.14), transparent 62%);
  background-size: 26px 26px, auto, auto;
}
.sozial-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.sozial-band .marke-zeile { color: var(--cyan-hell); }
.sozial-band h2 { color: #fff; max-width: 15ch; }
.sozial-band .lead { color: #C6D3E8; margin-top: .9rem; max-width: 42ch; font-size: var(--fs-text); }
.sozial-knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }
.sozial-knoepfe svg { width: 20px; height: 20px; }
.sozial-konten { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin-top: 1.6rem; font-size: var(--fs-sm); color: #9FB1CE; }
.sozial-konten span { display: inline-flex; align-items: center; gap: .45rem; }
.sozial-konten svg { width: 15px; height: 15px; color: var(--cyan-hell); flex: none; }

/* Handy-Attrappe mit echtem Einsatzfoto */
.sozial-buehne { position: relative; display: flex; justify-content: center; padding-block: 1.5rem; }
.sozial-handy {
  position: relative; z-index: 2; display: grid; width: 258px; max-width: 72vw; aspect-ratio: 9 / 18.4;
  padding: 10px; border-radius: 38px; background: linear-gradient(160deg, #26355F, #0B1533);
  box-shadow: 0 34px 60px rgba(4,9,24,.55), inset 0 0 0 1px rgba(255,255,255,.14);
  transform: rotate(-4deg); transition: transform .55s var(--weich);
}
.sozial-handy img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; border-radius: 29px; display: block; }
/* Fotowechsel wie eine Story: alle Bilder liegen übereinander, nur eines ist sichtbar */
.sozial-handy .sozial-foto { position: absolute; top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px);
  opacity: 0; transition: opacity .9s var(--weich); }
.sozial-handy .sozial-foto.da { opacity: 1; }
.sozial-balken { position: absolute; z-index: 4; inset: 32px 22px auto; display: flex; gap: 4px; }
.sozial-balken span { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.3); overflow: hidden; }
.sozial-balken span::after {
  content: ''; display: block; height: 100%; width: 100%; border-radius: 999px; background: #fff;
  transform: scaleX(0); transform-origin: left;
}
.sozial-balken span.voll::after { transform: scaleX(1); }
.sozial-balken span.da::after { transform: scaleX(1); transition: transform var(--dauer, 5000ms) linear; }
.sozial-pause {
  position: absolute; z-index: 5; top: 46px; right: 20px; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(7,14,35,.55); color: #fff; backdrop-filter: blur(4px);
}
.sozial-pause svg { width: 13px; height: 13px; }
.sozial-pause .z-weiter { display: none; }
.sozial-pause[aria-pressed="true"] .z-pause { display: none; }
.sozial-pause[aria-pressed="true"] .z-weiter { display: block; }
.sozial-pause:hover { background: rgba(7,14,35,.8); }
.sozial-kerbe {
  position: absolute; z-index: 3; top: 19px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.5);
}
.sozial-handy figcaption {
  position: absolute; z-index: 3; inset: auto 10px 10px; display: flex; align-items: center; gap: .5rem;
  padding: 2.4rem .85rem .9rem; border-radius: 0 0 29px 29px; font-size: var(--fs-xs); color: #fff;
  background: linear-gradient(to top, rgba(7,14,35,.94), rgba(7,14,35,0));
}
.sozial-handy figcaption svg { width: 17px; height: 17px; flex: none; }
.sozial-konto { display: flex; align-items: center; gap: .5rem; width: 100%; color: #fff; text-decoration: none; }
.sozial-konto::after { content: ''; position: absolute; inset: 10px; border-radius: 29px; }
.sozial-folgen { margin-left: auto; padding: .32rem .8rem; border-radius: 999px; background: var(--cyan-aktion); font-weight: 600; }
.sozial-karte {
  position: absolute; z-index: 1; right: 2%; bottom: 4%; width: 196px; max-width: 42vw; aspect-ratio: 4 / 3;
  overflow: hidden; border-radius: var(--radius); transform: rotate(7deg);
  box-shadow: 0 20px 44px rgba(4,9,24,.5); outline: 1px solid rgba(255,255,255,.16); outline-offset: -1px;
  transition: transform .55s var(--weich);
}
.sozial-karte img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 26%; display: block; }
.sozial-buehne:hover .sozial-handy { transform: rotate(-1.5deg) scale(1.025); }
.sozial-buehne:hover .sozial-karte { transform: rotate(4deg) translateY(-8px); }
@media (max-width: 1024px) { .sozial-pause { width: 44px; height: 44px; top: 42px; right: 14px; } }
@media (max-width: 900px) {
  .sozial-raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .sozial-band h2, .sozial-band .lead { max-width: none; }
  .sozial-handy { width: 228px; transform: rotate(-3deg); }
  .sozial-karte { width: 160px; right: 4%; bottom: 0; }
}
@media (max-width: 620px) { .sozial-karte { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sozial-handy, .sozial-karte, .sozial-buehne:hover .sozial-handy, .sozial-buehne:hover .sozial-karte { transition: none; }
  .sozial-handy .sozial-foto { transition: none; }
  .sozial-balken span.da::after { transition: none; }
}

/* ══ Fuß ════════════════════════════════════════════════════════════ */
.fuss { background: var(--nacht); color: #AEBBD3; padding-top: var(--abstand); font-size: var(--fs-sm); }
.fuss-ruf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.fuss-ruf p.ruf { color: #fff; font-size: var(--fs-titel); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.fuss-ruf p.ruf span { color: var(--cyan-hell); }
.fuss-raster { display: grid; grid-template-columns: 1.3fr 1fr .8fr .9fr 1.1fr; gap: 2rem; padding-block: 2.6rem; }
.fuss h4 { color: #fff; font-size: var(--fs-mini); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: .9rem; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: .45rem; }
.fuss li, .fuss p { line-height: 1.6; }
.fuss a { color: #AEBBD3; text-decoration: none; }
.fuss a:hover { color: #fff; }
.fuss .knopf-hell, .fuss .knopf-hell:hover { color: var(--indigo); }
.fuss .knopf-glas, .fuss .knopf-glas:hover { color: #fff; }
.fuss-logo { display: block; margin-bottom: 1rem; }
.fuss-logo img { width: 128px; }
.fuss-raster > div:first-child p { max-width: 36ch; }
.fuss-sozial { display: flex; gap: .5rem; margin-top: 1.2rem; }
.fuss-sozial a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-klein); color: #AEBBD3;
  transition: color .25s, border-color .25s, background .25s;
}
.fuss-sozial a:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.fuss-sozial svg { width: 20px; height: 20px; }
.handymenue-sozial { display: flex; justify-content: center; gap: .6rem; margin-top: .3rem; }
.handymenue-sozial a {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border: 1px solid var(--linie); border-radius: var(--radius-klein); color: var(--indigo);
}
.handymenue-sozial a:active { background: var(--eis); }
.handymenue-sozial svg { width: 22px; height: 22px; }
.fuss-schluss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-block: 1.3rem 1.6rem; border-top: 1px solid rgba(255,255,255,.1); font-size: var(--fs-xs); }
@media (max-width: 1060px) { .fuss-raster { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; } }

/* ─── Handy: feste Anrufleiste ────────────────────────────────────────── */
.handy-leiste { display: none; }
@media (max-width: 700px) {
  .handy-leiste {
    display: grid; grid-template-columns: 1.15fr .85fr; gap: .4rem;
    position: fixed; left: .5rem; right: .5rem; bottom: .5rem; z-index: 95;
    padding: .35rem; border-radius: 999px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 10px 30px rgba(11,21,51,.22); margin-bottom: env(safe-area-inset-bottom);
    transform: translateY(160%); transition: transform .45s var(--weich);
  }
  .handy-leiste.sichtbar { transform: none; }
  .handy-leiste a { min-height: 44px; padding: 0 .9rem; font-size: var(--fs-klein); }
  .handy-leiste .knopf-rand { background: var(--eis); box-shadow: none; }
}

/* ══ Google-Rezensionen ═════════════════════════════════════════════ */
.sterne { display: inline-flex; gap: 2px; color: #F5B301; }
.sterne svg { width: 14px; height: 14px; }

.buehne-wertung {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1rem;
  color: rgba(255,255,255,.9); text-decoration: none; font-size: var(--fs-sm); text-shadow: 0 1px 10px rgba(11,21,51,.6);
}
.buehne-wertung strong { color: #fff; font-weight: 600; }
.buehne-wertung:hover span { text-decoration: underline; }

.kontakt-wertung { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; font-size: var(--fs-sm); color: var(--leise); text-decoration: none; }
.kontakt-wertung strong { color: var(--indigo); font-weight: 600; }
.kontakt-wertung:hover span { text-decoration: underline; }

/* Band auf der Startseite */
.stimmen-band {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  padding-block: var(--abstand);
  background: linear-gradient(135deg, #0B1533 0%, #17255C 55%, #0E3A6B 100%);
}
.stimmen-glanz { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(520px 380px at 12% 20%, rgba(56,171,226,.28), transparent 65%),
    radial-gradient(620px 420px at 92% 90%, rgba(245,179,1,.16), transparent 60%);
}
.stimmen-glanz::before, .stimmen-glanz::after {
  content: ''; position: absolute; width: 180px; height: 180px; opacity: .08; background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
}
.stimmen-glanz::before { right: 6%; top: 10%; }
.stimmen-glanz::after { width: 90px; height: 90px; left: 44%; bottom: 8%; }
.stimmen-raster { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.stimmen-band .marke-zeile { color: var(--cyan-hell); }
.stimmen-band h2 { color: #fff; max-width: 17ch; }

.wertung-gross { display: flex; align-items: center; gap: 1.1rem; margin: 1.6rem 0 1.2rem; }
.wertung-zahl { font-size: var(--fs-zahl-gross); font-weight: 600; letter-spacing: -.05em; line-height: .9; color: #fff; }
.sterne-gross svg { width: clamp(22px, 1.2rem + .6vw, 30px); height: clamp(22px, 1.2rem + .6vw, 30px); filter: drop-shadow(0 2px 8px rgba(245,179,1,.45)); }
.wertung-zeile { margin-top: .4rem; font-size: var(--fs-klein); color: rgba(255,255,255,.8); }
.wertung-zeile strong { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.wertung-fakten { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .45rem; }
.wertung-fakten li { display: flex; gap: .55rem; align-items: center; font-size: var(--fs-klein); color: rgba(255,255,255,.88); }
.wertung-fakten svg { width: 15px; height: 15px; color: #3DDC97; flex: none; }
.stimmen-stand { margin-top: .9rem; font-size: var(--fs-mini); color: rgba(255,255,255,.55); }

@media (prefers-reduced-motion: no-preference) {
  .zeige-an .wertung-gross .sterne-gross svg { opacity: 0; transform: scale(.3) rotate(-30deg); transition: opacity .4s, transform .6s cubic-bezier(.34,1.56,.64,1); }
  .zeige-an .wertung-gross.da .sterne-gross svg { opacity: 1; transform: none; }
  .zeige-an .wertung-gross.da .sterne-gross svg:nth-child(2) { transition-delay: .12s; }
  .zeige-an .wertung-gross.da .sterne-gross svg:nth-child(3) { transition-delay: .24s; }
  .zeige-an .wertung-gross.da .sterne-gross svg:nth-child(4) { transition-delay: .36s; }
  .zeige-an .wertung-gross.da .sterne-gross svg:nth-child(5) { transition-delay: .48s; }
}

.zitat-buehne {
  position: relative; background: #fff; color: var(--graphit); border-radius: var(--radius-gross);
  padding: clamp(1.6rem, 3.5vw, 2.6rem); box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.zitat-buehne::before {
  content: ''; position: absolute; inset: auto 1.4rem -12px 1.4rem; height: 24px; z-index: -1;
  background: rgba(255,255,255,.35); border-radius: 0 0 var(--radius-gross) var(--radius-gross); filter: blur(.2px);
}
.zitat-zeichen { width: 44px; height: 33px; color: var(--cyan); margin-bottom: 1rem; }
.zitate { display: grid; }
.zitat { margin: 0; }
.js .zitat { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .6s var(--weich), transform .6s var(--weich); pointer-events: none; }
.js .zitat.aktiv { opacity: 1; transform: none; pointer-events: auto; }
html:not(.js) .zitat + .zitat { margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--linie); }
.zitat blockquote { margin: 0; }
.zitat blockquote p { font-size: var(--fs-zitat); line-height: var(--lh-text); letter-spacing: -.01em; color: var(--graphit); }
.zitat figcaption { display: flex; align-items: center; gap: .75rem; margin-top: 1.4rem; }
.zitat-kreis { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--indigo), var(--cyan-aktion)); color: #fff; font-weight: 600; flex: none; }
.zitat figcaption strong { display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--indigo); }
.zitat figcaption small { font-size: var(--fs-xs); color: var(--leise); }
.zitat-steuerung { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--linie); }
html:not(.js) .zitat-steuerung { display: none; }
.zitat-punkte { display: flex; gap: .4rem; }
.zitat-punkt { border: 0; background: var(--eis-tief); border-radius: 999px; width: 28px; height: 6px; padding: 0; cursor: pointer; overflow: hidden; position: relative; }
.zitat-punkt span { position: absolute; inset: 0; width: 0; background: var(--indigo); border-radius: inherit; }
.zitat-punkt.aktiv { width: 56px; }
.zitat-punkt.aktiv span { width: 100%; transition: width var(--dauer, 7s) linear; }
.zitat-punkt.aktiv.neu span { width: 0; transition: none; }
.zitat-hinweis { font-size: var(--fs-xs); color: var(--leise); }
@media (max-width: 900px) { .stimmen-raster { grid-template-columns: 1fr; } }

/* ══ Leistungsseiten: heller Kopf ═══════════════════════════════════ */
.leistungskopf {
  padding: var(--kopf-luft) 0 clamp(3rem, -1rem + 5vw, 5rem);
  background: radial-gradient(700px 420px at 85% 0%, rgba(56,171,226,.16), transparent 65%), var(--eis);
}
.leistungskopf-raster { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.leistungskopf .brotkrumen, .leistungskopf .brotkrumen a { color: var(--leise); }
.leistungskopf h1 { hyphens: auto; -webkit-hyphens: auto; max-width: 18ch; }
.leistungskopf .lead { margin-top: .9rem; }
.leistungskopf .knopfreihe { margin-top: 1.5rem; }
.kurzfakten { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .45rem; }
.kurzfakten li { display: flex; gap: .55rem; align-items: flex-start; font-size: var(--fs-klein); color: var(--graphit); }
.kurzfakten svg { width: 16px; height: 16px; color: var(--cyan-aktion); flex: none; margin-top: .2rem; }
.leistungskopf-bild { position: relative; margin: 0; border-radius: var(--radius-gross); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--schatten-hoch); background: var(--eis-tief); }
.leistungskopf-bild img { width: 100%; height: 100%; object-fit: cover; }
.leistungskopf-bild figcaption {
  position: absolute; left: .8rem; bottom: .8rem; display: flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.95); border-radius: 999px; padding: .45rem .85rem; font-size: var(--fs-xs); color: var(--leise);
  box-shadow: var(--schatten);
}
.leistungskopf-bild figcaption strong { color: var(--indigo); font-weight: 600; }
@media (max-width: 900px) {
  .leistungskopf { padding-top: 6rem; }
  .leistungskopf-raster { grid-template-columns: 1fr; }
  .leistungskopf-bild { aspect-ratio: 4 / 3; }
}

.umfang-raster { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.umfang-punkt { display: flex; gap: .9rem; align-items: flex-start; background: var(--eis); border-radius: var(--radius); padding: 1.15rem; }
.umfang-zeichen { width: 44px; height: 44px; border-radius: 12px; flex: none; display: grid; place-items: center; background: #fff; color: var(--indigo); box-shadow: var(--schatten); }
.umfang-zeichen svg { width: 22px; height: 22px; }
.umfang-punkt h3 { font-size: var(--fs-text); margin-bottom: .25rem; }
.umfang-punkt p { font-size: var(--fs-sm); color: var(--leise); line-height: 1.5; }
.umfang-klein .umfang-punkt { padding: 1rem; }
@media (min-width: 1101px) {
  .umfang-klein { grid-template-columns: repeat(5, 1fr); }
  .umfang-klein .umfang-punkt { flex-direction: column; gap: .75rem; }
  .umfang-klein .umfang-punkt p { font-size: var(--fs-xs); }
}
@media (max-width: 960px) { .umfang-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .umfang-raster { grid-template-columns: 1fr; } }

.stimme-band { background: linear-gradient(135deg, #0B1533, #17255C 60%, #0E3A6B); color: #fff; padding-block: clamp(2.25rem, 0.25rem + 2.5vw, 3.25rem); }
.stimme-band-raster { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: center; }
.stimme-band-wertung { display: flex; align-items: center; gap: .8rem; padding-right: clamp(1.2rem, 3vw, 2.5rem); border-right: 1px solid rgba(255,255,255,.15); }
.stimme-band .wertung-zahl { font-size: var(--fs-zahl); }
.stimme-band .sterne svg { width: 17px; height: 17px; }
.stimme-band small { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.7); margin-top: .2rem; }
.stimme-band blockquote { margin: 0; }
.stimme-band blockquote p { font-size: var(--fs-text); line-height: var(--lh-text); color: rgba(255,255,255,.95); }
.stimme-band blockquote footer { margin-top: .5rem; font-size: var(--fs-xs); color: rgba(255,255,255,.65); }
.stimme-band blockquote footer strong { color: #fff; font-weight: 600; }
@media (max-width: 900px) {
  .stimme-band-raster { grid-template-columns: 1fr; }
  .stimme-band-wertung { border-right: 0; padding-right: 0; }
  .stimme-band .knopf-glas { justify-self: start; }
}

.nutzen-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.nutzen-karte { background: #fff; border-radius: var(--radius-gross); box-shadow: var(--schatten); padding: clamp(1.4rem, 3vw, 2rem); }
.nutzen-karte h2 { font-size: var(--fs-titel); margin-bottom: 1.1rem; }
.haken-liste, .ziel-liste { list-style: none; padding: 0; display: grid; gap: .6rem; }
.haken-liste li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-klein); line-height: var(--lh-dicht); }
.haken-liste svg { width: 20px; height: 20px; flex: none; padding: 4px; border-radius: 50%; background: var(--eis); color: var(--cyan-aktion); }
.ziel-liste li { padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.ziel-liste li:last-child { border-bottom: 0; }
.ziel-liste strong { display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--indigo); }
.ziel-liste span { font-size: var(--fs-sm); color: var(--leise); }
.andere-leistungen { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1.4rem; font-size: var(--fs-sm); color: var(--leise); }
.andere-leistungen span { margin-right: .3rem; }
.andere-leistungen a { text-decoration: none; color: var(--indigo); background: #fff; border-radius: 999px; padding: .35rem .8rem; box-shadow: inset 0 0 0 1px var(--linie); }
.andere-leistungen a:hover { box-shadow: inset 0 0 0 1px var(--cyan); }
@media (max-width: 860px) { .nutzen-raster { grid-template-columns: 1fr; } }

/* ══ Einzugsgebiet: eigenes Band mit Einsatzkarte ═══════════════════ */
.gebiet-band {
  position: relative; isolation: isolate; padding-block: var(--abstand);
  background:
    radial-gradient(circle at 1px 1px, rgba(34,53,126,.12) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(160deg, #DDEFFA 0%, #EAF4FB 50%, #F5F9FD 100%);
}
.gebiet-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px 420px at 78% 50%, rgba(56,171,226,.22), transparent 70%);
}
.gebiet-band .gebiet-raster { grid-template-columns: .95fr 1.05fr; }
.gebiet-zahlen { display: flex; gap: 2.2rem; margin: 1.3rem 0 1.1rem; }
.gebiet-zahlen strong { display: block; font-size: var(--fs-zahl); font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--indigo); font-variant-numeric: tabular-nums; }
.gebiet-zahlen span { font-size: var(--fs-xs); color: var(--leise); }
.orte-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem .45rem; }
.orte-liste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: .4rem;
  background: rgba(255,255,255,.8); border-radius: 8px; padding: .3rem .6rem; font-size: var(--fs-xs);
  box-shadow: inset 0 0 0 1px rgba(34,53,126,.08);
}
.orte-liste li span { color: var(--graphit); font-weight: 500; }
.orte-liste small { color: var(--cyan-aktion); font-size: var(--fs-mini); font-variant-numeric: tabular-nums; white-space: nowrap; }
.orte-liste li.haupt { background: var(--indigo); box-shadow: none; }
.orte-liste li.haupt span, .orte-liste li.haupt small { color: #fff; }
.gebiet-fussnote { margin-top: .6rem; font-size: var(--fs-mini); color: var(--leise); }

.karte-panel {
  position: relative; width: 100%; max-width: 560px; justify-self: end; border-radius: 24px; overflow: hidden;
  background: radial-gradient(circle at 50% 52%, #1D3F82 0%, #0B1533 72%);
  box-shadow: 0 30px 70px rgba(11,21,51,.28), inset 0 0 0 1px rgba(143,219,245,.12);
}
.karte-panel svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.karte-panel text { font-family: var(--schrift); }
.k-linie { stroke: #8FDBF5; stroke-opacity: .4; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 0; }
.k-ort { fill: #fff; }
.k-ziel { cursor: pointer; }
.k-ziel .k-ort, .k-ziel text { transition: fill .25s; }
.k-ziel:hover .k-ort, .k-ziel:focus-visible .k-ort { fill: var(--cyan-hell); }
.k-ziel:hover text, .k-ziel:focus-visible text { fill: var(--cyan-hell); }
/* Radarkeil und Pulsringe liegen als eigene Ebenen über der Karte.
   Als SVG mussten sie in jedem Bild neu gezeichnet werden, das hat beim
   Scrollen gestockt. Als Element mit reiner Drehung erledigt das die Grafikkarte. */
.karte-effekte { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.karte-radar, .karte-puls { position: absolute; left: 50%; top: 51.7%; }
.karte-radar {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: conic-gradient(from -28deg, rgba(143,219,245,.26), rgba(143,219,245,.05) 22%, transparent 42%);
  -webkit-mask-image: radial-gradient(circle, #000 4%, rgba(0,0,0,.55) 55%, transparent 78%);
  mask-image: radial-gradient(circle, #000 4%, rgba(0,0,0,.55) 55%, transparent 78%);
  transform: translate(-50%, -50%);
}
.karte-puls {
  width: 4.7%; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #8FDBF5;
  opacity: 0; transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: no-preference) {
  .zeige-an .karte-panel .k-linie { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--weich) var(--v); }
  .zeige-an .karte-panel.da .k-linie { stroke-dashoffset: 0; }
  .zeige-an .karte-panel .k-ort { transform-box: fill-box; transform-origin: center; transform: scale(0); transition: transform .5s cubic-bezier(.34,1.56,.64,1) var(--v); }
  .zeige-an .karte-panel.da .k-ort { transform: scale(1); }
  .zeige-an .karte-panel .k-text { opacity: 0; transition: opacity .5s var(--v); }
  .zeige-an .karte-panel.da .k-text { opacity: 1; }
  .karte-puls { animation: kpuls 3s ease-out infinite; animation-delay: var(--v); will-change: transform, opacity; }
  .karte-radar { animation: kradar 7s linear infinite; will-change: transform; }
  /* Spart Rechenarbeit: die Karte animiert nur, solange sie zu sehen ist */
  .karte-panel:not(.im-bild) .karte-puls, .karte-panel:not(.im-bild) .karte-radar { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .karte-effekte { display: none; } }
@keyframes kpuls { 0% { transform: translate(-50%, -50%) scale(1); opacity: .75; } 100% { transform: translate(-50%, -50%) scale(5); opacity: 0; } }
@keyframes kradar { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 900px) {
  .gebiet-band .gebiet-raster { grid-template-columns: 1fr; }
  .karte-panel { justify-self: start; }
}
@media (max-width: 700px) {
  .orte-liste { grid-template-columns: 1fr 1fr; }
  .karte-panel .neben, .karte-panel .km { display: none; }
  .karte-panel .ort { font-size: 24px; }
  .karte-panel .buehl { display: none; }
}

/* ══ Lichtkante: Glanz folgt dem Mauszeiger ═════════════════════════ */
.licht { position: relative; }
.licht-schein {
  position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(56,171,226,.10), transparent 60%);
}
.licht-schein::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(56,171,226,.85), rgba(56,171,226,0) 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.licht:hover > .licht-schein { opacity: 1; }

/* ══ Bühne: Tiefe beim Scrollen ═════════════════════════════════════ */
.buehne-foto, .buehne-nebel, .buehne-leinwand { transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.buehne-inhalt { transform: translate3d(0, var(--iy, 0px), 0); opacity: var(--io, 1); }

/* Pausenknopf im Zitatwechsel */
.zitat-pause { border: 0; background: var(--eis); color: var(--indigo); width: 28px; height: 28px; border-radius: 50%; margin-left: .6rem; cursor: pointer; display: inline-grid; place-items: center; vertical-align: middle; }
.zitat-pause svg { width: 12px; height: 12px; }
.zitat-pause .z-weiter { display: none; }
.zitat-pause[aria-pressed="true"] .z-pause { display: none; }
.zitat-pause[aria-pressed="true"] .z-weiter { display: block; }
.zitat-pause:hover { background: var(--eis-tief); }

/* ══ Häufige Fragen ═════════════════════════════════════════════════ */
.fragen-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; align-items: start; }
.fragen-raster > div { display: grid; gap: .5rem; }
.frage { background: var(--eis); border-radius: var(--radius); transition: background .2s, box-shadow .2s; }
.auf-eis .frage { background: #fff; box-shadow: var(--schatten); }
.frage[open] { background: #fff; box-shadow: var(--schatten); }
.frage summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem .85rem 1.1rem; font-weight: 550; font-size: var(--fs-klein); color: var(--indigo); line-height: 1.35;
}
.frage summary::-webkit-details-marker { display: none; }
.frage-zeichen { position: relative; width: 26px; height: 26px; border-radius: 50%; flex: none; background: #fff; box-shadow: inset 0 0 0 1px var(--linie); transition: transform .3s var(--weich), background .2s; }
.frage-zeichen::before, .frage-zeichen::after { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.6px; margin: -.8px 0 0 -5px; background: var(--indigo); border-radius: 2px; }
.frage-zeichen::after { transform: rotate(90deg); transition: transform .3s var(--weich); }
.frage[open] .frage-zeichen { background: var(--indigo); box-shadow: none; }
.frage[open] .frage-zeichen::before, .frage[open] .frage-zeichen::after { background: #fff; }
.frage[open] .frage-zeichen::after { transform: rotate(0deg); }
.frage p { padding: 0 1.1rem 1rem; font-size: var(--fs-klein); color: var(--leise); line-height: 1.6; }
.frage summary:hover span:first-child { text-decoration: underline; text-decoration-color: var(--cyan); text-underline-offset: 3px; }
@media (max-width: 860px) { .fragen-raster { grid-template-columns: 1fr; gap: .5rem; } }

/* ══ Ortsseiten ═════════════════════════════════════════════════════ */
.ort-raster { grid-template-columns: repeat(4, 1fr); }
.ort-raster li { list-style: none; }
a.ort-leistung { text-decoration: none; color: inherit; height: 100%; position: relative; padding-right: 2.2rem; transition: background .2s, box-shadow .2s; }
a.ort-leistung:hover { background: #fff; box-shadow: var(--schatten); }
.ort-pfeil { position: absolute; right: .9rem; top: 1.2rem; color: var(--cyan-aktion); }
.ort-pfeil svg { width: 15px; height: 15px; }
.ort-text p { color: var(--leise); font-size: var(--fs-klein); margin-bottom: .8rem; }
.ort-text .haken-liste { margin-top: 1rem; }
.ort-entfernung { display: flex; align-items: baseline; gap: .7rem; margin: .2rem 0 1rem; }
.ort-entfernung strong { font-size: var(--fs-zahl); font-weight: 600; letter-spacing: -.03em; color: var(--indigo); line-height: 1; }
.ort-entfernung span { font-size: var(--fs-xs); color: var(--leise); }
.ort-teile { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.ort-teile li { background: var(--eis); border-radius: 999px; padding: .3rem .75rem; font-size: var(--fs-xs); color: var(--graphit); }
.ort-karte .knopf-rand { margin-top: 1rem; }
@media (max-width: 1100px) { .ort-raster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ort-raster { grid-template-columns: 1fr; } }

.orte-liste li.mit-link { padding: 0; display: block; }
.orte-liste li.mit-link a { width: 100%; }
.orte-liste li.mit-link a { display: flex; justify-content: space-between; align-items: baseline; gap: .4rem; padding: .3rem .6rem; text-decoration: none; border-radius: 8px; }
.orte-liste li.mit-link a:hover { background: #fff; box-shadow: inset 0 0 0 1px var(--cyan); }
.orte-liste li.mit-link span { text-decoration: underline; text-decoration-color: rgba(10,115,168,.35); text-underline-offset: 3px; }

/* ══ Karriere ═══════════════════════════════════════════════════════ */
.schritte { list-style: none; padding: 0; margin: 1.3rem 0 0; counter-reset: sch; display: grid; gap: .7rem; }
.schritte li { counter-increment: sch; display: grid; grid-template-columns: 34px 1fr; gap: .1rem .8rem; }
.schritte li::before { content: counter(sch); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--indigo); color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.schritte strong { font-weight: 600; color: var(--indigo); font-size: var(--fs-klein); }
.schritte span { font-size: var(--fs-sm); color: var(--leise); }

/* Fehlermeldung im Formular */
.formular-fehler { margin: .5rem 0 .2rem; padding: .7rem .9rem; border-radius: var(--radius-klein); background: #FDECEC; color: #8A1F1F; font-size: var(--fs-sm); }

/* ══ Rezensionen: Steuerung und Lichtschein ═════════════════════════ */
.zitat-knoepfe { display: flex; align-items: center; gap: .35rem; }
.zitat-pfeil { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: var(--eis); color: var(--indigo); display: grid; place-items: center; transition: background .2s, color .2s; }
.zitat-pfeil:hover { background: var(--indigo); color: #fff; }
.zitat-pfeil svg { width: 16px; height: 16px; }
.zitat-knoepfe .zitat-hinweis { min-width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.zitat-knoepfe .zitat-pause { margin-left: .2rem; }
.zitat-punkte { gap: .3rem; }
.zitat-punkt { width: 12px; }
.zitat-punkt.aktiv { width: 38px; }
@media (max-width: 520px) { .zitat-punkte { display: none; } .zitat-steuerung { justify-content: center; } }

.stimmen-licht {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(420px circle at var(--lx, 50%) var(--ly, 50%), rgba(143,219,245,.16), transparent 60%);
}
.stimmen-band:hover .stimmen-licht { opacity: 1; }

/* ══ Funkeln nach dem Wischen ═══════════════════════════════════════ */
.buehne-funkeln { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.buehne-funkeln i {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; opacity: 0; background: #fff;
  clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}
@media (prefers-reduced-motion: no-preference) {
  .buehne.klar .buehne-funkeln i { animation: funkeln 1.6s ease-in-out calc(var(--v) + .3s) 2 both; }
}
@keyframes funkeln {
  0% { opacity: 0; transform: scale(.2) rotate(0deg); }
  45% { opacity: 1; transform: scale(1) rotate(45deg); }
  100% { opacity: 0; transform: scale(.2) rotate(90deg); }
}
@media (max-width: 700px) { .buehne-funkeln { display: none; } }

/* ══ Objektschein: gleitender Reiter ════════════════════════════════ */
.schein-reiter { position: relative; }
.reiter-gleiter { position: absolute; z-index: 0; border-radius: 999px; background: var(--indigo); opacity: 0; transition: left .45s var(--weich), top .45s var(--weich), width .45s var(--weich), height .45s var(--weich), opacity .2s; }
.schein-reiter button { position: relative; z-index: 1; }
.mit-gleiter .reiter-gleiter { opacity: 1; }
.mit-gleiter button[aria-selected="true"] { background: transparent; }
.mit-gleiter button:hover { background: transparent; color: var(--cyan-aktion); }
.mit-gleiter button[aria-selected="true"]:hover { color: #fff; }

/* ══ Ablauf: Verbindungslinie ═══════════════════════════════════════ */
.ablauf { position: relative; }
.ablauf-linie { position: absolute; z-index: 2; height: 2px; background: var(--eis-tief); pointer-events: none; display: none; border-radius: 2px; }
.ablauf-linie span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--indigo), var(--cyan)); transform-origin: left; transform: scaleX(var(--fortschritt, 0)); border-radius: 2px; }
.mit-linie .ablauf-linie { display: block; }
.ablauf > div::before { position: relative; z-index: 3; transition: background .4s, color .4s, box-shadow .4s; }
.ablauf > div.erreicht::before { background: var(--indigo); color: #fff; box-shadow: 0 0 0 5px rgba(56,171,226,.18); }
@media (max-width: 820px) { .mit-linie .ablauf-linie { display: none; } }

/* ══ Lesefortschritt am oberen Bildschirmrand ═══════════════════════ */
.lesefortschritt {
  position: fixed; left: 0; right: 0; top: 0; z-index: 120; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--cyan) 0%, #5CC6F0 50%, var(--indigo) 100%);
  transform-origin: left center; transform: scaleX(var(--gelesen, 0));
  box-shadow: 0 0 10px rgba(56,171,226,.55);
}

/* ══════════════════════════════════════════════════════════════════════
   Mobil und Touch: steht bewusst am Ende, damit es alle Grundregeln schlägt.
   Geprüft bei 320, 360, 375, 390, 414, 768 und 1024 px.
   ══════════════════════════════════════════════════════════════════════ */

/* Nichts darf die Seitenbreite sprengen: Rasterspalten dürfen schrumpfen,
   lange Wörter brechen mit Trennstrich um. */
.formular-zwei > *, .formular > *, .nutzen-raster > *, .kontakt-raster > *, .gebiet-raster > *, .stimmen-raster > *,
.index-raster > *, .haltung-kopf > *, .kopfzeile > *, .umfang-raster > *, .ansprech-raster > * { min-width: 0; }
main, .fuss { overflow-wrap: break-word; }
main p, main li, main h1, main h2, main h3, .rechtstext { hyphens: auto; -webkit-hyphens: auto; }
.kartenfeld, .kartenfeld-hinweis { white-space: normal; max-width: 100%; }
.kartenfeld-hinweis p { overflow-wrap: anywhere; }
img, svg, video, iframe, select { max-width: 100%; }

/* Touch-Geräte: jede Tippfläche mindestens 44 × 44 px (WCAG 2.5.5, Apple, Google) */
@media (max-width: 1024px), (pointer: coarse) {
  .logo { display: inline-flex; align-items: center; min-height: 44px; }
  .kopf-tel, .menue-schalter { min-height: 44px; min-width: 44px; height: 44px; }
  .zitat-pfeil, .zitat-pause { width: 44px; height: 44px; }
  .zitat-pause svg { width: 14px; height: 14px; }
  .zitat-punkt { height: 10px; }
  .schein-reiter button { min-height: 44px; }
  .wahl span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem; }
  .andere-leistungen a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; }
  .buehne-wertung, .kontakt-wertung { min-height: 44px; }
  .einwilligung input { width: 22px; height: 22px; }
  .einwilligung { align-items: center; min-height: 44px; }
  .orte-liste li { min-height: 44px; align-items: center; }
  .orte-liste li.mit-link a { min-height: 44px; align-items: center; }
  .fuss ul a { display: inline-flex; align-items: center; min-height: 44px; }
  .fuss ul { gap: 0; }
  .brotkrumen a { display: inline-block; padding-block: .6rem; }
  .frage summary { min-height: 52px; }
  .index-unterschrift .knopf { min-height: 44px; width: 44px; }
  .zitat-punkte { display: none; }
  .zitat-steuerung { justify-content: center; }
  .erreichbar a { display: inline-flex; align-items: center; min-height: 44px; }
  .menue a { display: inline-flex; align-items: center; min-height: 44px; }
  .einwilligung label { display: block; min-width: 0; padding-block: .55rem; cursor: pointer; }

  /* Mindestgrößen auch auf dem Tablet: kein Text unter 12 px, Felder 16 px gegen iPad-Zoom */
  :root { --fs-mini: .75rem; --fs-xs: .8125rem; --fs-sm: .875rem; }
  .formular input, .formular textarea, .formular select { font-size: 16px; min-height: 48px; }
}

/* Handy */
@media (max-width: 700px) {
  /* Mindestgrößen: kein Text unter 12 px, Eingabefelder 16 px, sonst zoomt iOS beim Antippen */
  .formular textarea { min-height: 96px; height: auto; }

  /* Formular einspaltig, Auswahl in voller Breite leichter zu treffen */
  .formular-zwei { grid-template-columns: 1fr; }
  .wahl { gap: .4rem; }

  /* Ortsseiten: Entfernung und Stadtteile untereinander */
  .ort-entfernung { flex-wrap: wrap; row-gap: .2rem; }
  .ansprech-fakten li { grid-template-columns: 1fr; gap: .15rem; }

  /* Rezensionen: Steuerung zentriert, Pfeile gut erreichbar */
  .zitat-steuerung { justify-content: center; }
  .zitat-knoepfe { gap: .5rem; }

  /* Die feste Anrufleiste darf das Seitenende nicht verdecken */
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  /* Einsatzkarte etwas Luft zum Rand */
  .karte-panel { border-radius: 16px; }
}

/* Fuß auf dem Handy: Linklisten zweispaltig, Logo und Kontakt über die volle Breite */
@media (max-width: 560px) {
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .fuss-raster > div:first-child, .fuss-raster > div:last-child { grid-column: 1 / -1; }
  .fuss ul a { min-height: 40px; }
}

/* Sehr schmale Geräte (iPhone SE, kleine Android) */
@media (max-width: 360px) {
  :root { --rand: 1rem; }
  .knopf, .knopf-hell, .knopf-glas, .knopf-rand { padding: 0 1rem; font-size: .9rem; white-space: normal; text-align: center; }
  .handy-leiste a { padding: 0 .6rem; font-size: .85rem; }
  .orte-liste { grid-template-columns: 1fr; }
  .schein-reiter button { padding: .5rem .75rem; }
  .erreichbar { flex-wrap: wrap; }
}

/* Tablet hochkant: zwei Spalten, wo es der Inhalt verträgt */
@media (min-width: 701px) and (max-width: 1024px) {
  .umfang-raster, .ort-raster { grid-template-columns: repeat(2, 1fr); }
  .zielgruppen { grid-template-columns: repeat(2, 1fr); }
}

@media print { .lesefortschritt { display: none; } }

/* ══ Haltung: mehr Luft ═════════════════════════════════════════════ */
.haltung { background: var(--weiss); padding-block: var(--abstand-gross); }
.haltung-kopf { display: grid; grid-template-columns: 1.35fr .65fr; gap: 1rem 4rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.haltung-kopf .marke-zeile { grid-column: 1 / -1; margin-bottom: 0; }
.haltung-satz { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -.032em; max-width: 21ch; }
.haltung-satz span { color: var(--cyan-aktion); }
.haltung-kopf .lead { font-size: var(--fs-text); }
@media (max-width: 860px) { .haltung-kopf { grid-template-columns: 1fr; } }


/* ══ Statement: Team über die volle Breite ══════════════════════════ */
.statement { background: var(--weiss); padding-bottom: var(--abstand); }
.statement-bild { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(15rem, 0rem + 18.75vw, 22.5rem); display: flex; align-items: flex-end; color: #fff; }
.statement-bild img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.statement-bild::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11,21,51,.88) 0%, rgba(11,21,51,.45) 38%, rgba(11,21,51,0) 65%), linear-gradient(to right, rgba(11,21,51,.45), rgba(11,21,51,0) 55%); }
.statement-text { position: relative; padding-bottom: clamp(2rem, 4vw, 3.2rem); }
.statement-text .marke-zeile { color: var(--cyan-hell); }
.statement-text h2 { color: #fff; font-size: var(--fs-h1); letter-spacing: -.034em; line-height: var(--lh-titel); max-width: 15ch; }
.statement-text p { color: rgba(255,255,255,.86); margin-top: .8rem; max-width: 52ch; }
.team-zeile { list-style: none; padding: 0; margin-top: clamp(1.6rem, 3vw, 2.4rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem 2.2rem; }
.team-zeile li { position: relative; padding-top: 1rem; border-top: 1px solid var(--linie); }
.team-zeile li::before { content: ''; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--cyan); }
.team-zeile strong { display: block; font-weight: 600; color: var(--indigo); font-size: var(--fs-klein); margin-bottom: .2rem; }
.team-zeile span { font-size: var(--fs-sm); color: var(--leise); }
@media (max-width: 900px) { .team-zeile { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .team-zeile { grid-template-columns: 1fr; } .statement-bild { padding-top: 16rem; } }

/* ══ Wisch-Motiv: Fotos werden beim Hineinscrollen freigewischt ═════
   Nicht das Foto wird abgedeckt, sondern eine Blende davor fährt zur Seite.
   So ist das Foto für den Browser immer sichtbar und wird zuverlässig geladen
   (Safari lädt vollständig zugeschnittene lazy-Bilder sonst unter Umständen nicht). */
@media (prefers-reduced-motion: no-preference) {
  .zeige-an .wisch-bild::after {
    content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none;
    background: var(--eis-tief);
    border-left: 3px solid #fff;
    box-shadow: -16px 0 34px 6px rgba(255,255,255,.55), -40px 0 60px 10px rgba(143,219,245,.25);
    transform: translateX(-3px);
    transition: transform 1.25s cubic-bezier(.65,0,.35,1);
  }
  .zeige-an .wisch-bild.da::after { transform: translateX(calc(100% + 60px)); }
  .ohne-wisch .leistungskopf-bild::after { display: none; }
  .wisch-bild figcaption, .statement-text, .index-unterschrift { z-index: 7; }
}

/* ══ Einheitlicher Farblook aller Fotos ═════════════════════════════ */
img[src*="images/"]:not(.logowand img), .buehne-leinwand { filter: saturate(.9) contrast(1.04) brightness(1.02); }
/* Kundenlogos bekommen ihren eigenen Look, nicht den Fotofilter */
.buehne-nebel img { filter: blur(22px) saturate(.68) brightness(1.14) contrast(1.04); }

/* ══ Weiche Seitenübergänge ═════════════════════════════════════════ */
@view-transition { navigation: auto; }
.kopf { view-transition-name: kopf; }
.lesefortschritt { view-transition-name: lesefortschritt; }
.leistungskopf-bild img { view-transition-name: leistungsfoto; }
::view-transition-old(root) { animation: vt-raus .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: vt-rein .45s cubic-bezier(0,0,.2,1) both; }
::view-transition-group(leistungsfoto) { animation-duration: .62s; animation-timing-function: cubic-bezier(.22,.8,.24,1); }
::view-transition-image-pair(leistungsfoto) { isolation: auto; }
::view-transition-old(leistungsfoto), ::view-transition-new(leistungsfoto) { height: 100%; object-fit: cover; overflow: clip; }
@keyframes vt-raus { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ══ Ansprechpartner ════════════════════════════════════════════════ */
.ansprechpartner { background: var(--weiss); padding-block: var(--abstand); }
.ansprech-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2.5rem, -3.5rem + 7.5vw, 5.5rem); align-items: center; }
.ansprech-bild { position: relative; margin: 0; border-radius: var(--radius-gross); overflow: hidden; aspect-ratio: 4 / 3; background: var(--eis-tief); }
.ansprech-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ansprech-bild figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; display: flex; flex-direction: column; gap: .1rem;
  padding: 2.4rem 1.5rem 1.2rem; color: #fff;
  background: linear-gradient(to top, rgba(11,21,51,.78), rgba(11,21,51,0));
}
.ansprech-bild figcaption strong { font-size: var(--fs-h4); font-weight: 600; line-height: var(--lh-klein-titel); }
.ansprech-bild figcaption span { font-size: var(--fs-sm); color: var(--cyan-hell); }
.ansprech-text h2 { font-size: var(--fs-h1); letter-spacing: -.032em; }
.ansprech-rolle { margin-top: .35rem; font-size: var(--fs-lead); font-weight: 500; color: var(--cyan-aktion); }
.ansprech-text .lead { margin-top: 1.1rem; font-size: var(--fs-text); max-width: 50ch; }
.ansprech-fakten { list-style: none; padding: 0; margin: 1.4rem 0 1.6rem; border-top: 1px solid var(--linie); }
.ansprech-fakten li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
.ansprech-fakten span { font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--leise); padding-top: .15rem; }
.ansprech-fakten strong { font-size: var(--fs-klein); font-weight: 500; color: var(--graphit); }
@media (max-width: 900px) { .ansprech-raster { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ansprech-fakten li { grid-template-columns: 1fr; gap: .15rem; } }

.ansprech-mini { display: flex; align-items: center; gap: .85rem; margin: 1.3rem 0 .2rem; padding: .75rem 0; border-block: 1px solid var(--linie); }
.ansprech-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.ansprech-mini strong { display: block; font-size: var(--fs-klein); font-weight: 600; color: var(--indigo); line-height: var(--lh-klein-titel); }
.ansprech-mini span { display: block; font-size: var(--fs-xs); color: var(--leise); line-height: var(--lh-dicht); }
.ansprech-mini + .kontakt-wege { margin-top: 1rem; }

/* ─── Einblenden beim Scrollen ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .zeige-an [data-zeige] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--weich), transform .8s var(--weich); }
  .zeige-an [data-zeige].da { opacity: 1; transform: none; }
  .zeige-an [data-zeige="2"] { transition-delay: .1s; }
  .zeige-an [data-zeige="3"] { transition-delay: .2s; }
}

@media print {
  .kopf, .handy-leiste, .kartenfeld, .buehne-leinwand, .buehne-nebel { display: none !important; }
  body { background: #fff; color: #000; }
}