/* ═══════════════════════════════════════════════════════════════
   Physiotherapie Lindenau — Startseite
   Aufbau nach dem AZK-Muster: helle Flächen, runde weiße Karten,
   fette Grotesk, eine Grünfamilie, dazwischen Bildbänder mit
   dunklem Overlay für den Rhythmus. Wortmarke statt Logo-Zeichen.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --gruen:#1D3D74;
  --gruen-dunkel:var(--tief);
  --gruen-hell:#4272BE;
  --gruen-blass:#E7EDF7;
  --grund:#F2F5FA;
  --weiss:#FFFFFF;
  --tinte:#131C2C;
  --text:#4A5568;
  --linie:#E1E7F0;
  --stern:#F0A32C;
  /* Dunkle Flaechen und Schrift darauf. Die warme Variante tauscht nur diese Werte. */
  --tief:#132A52;
  --tief-rgb:19,42,82;
  --nacht-rgb:10,22,44;
  --haus-rgb:29,61,116;
  --auf-dunkel:#CBD8EC;
  --auf-dunkel-2:#A9BEDD;
  --auf-dunkel-3:#DCE6F6;
  --fuss:#101827;
  --schatten-rgb:19,28,44;
  --r-m:18px;
  --r-l:26px;
  --r-xl:34px;
  --schatten:0 18px 40px -28px rgba(var(--schatten-rgb),.4);
  --schatten-tief:0 34px 66px -36px rgba(var(--schatten-rgb),.55);
  --max:1220px;
  --rand:clamp(1.15rem,4vw,2.5rem);
  --f:"Poppins","Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--grund);color:var(--tinte);font-family:var(--f);
  font-size:1.06rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.028em;line-height:1.12;color:var(--tinte)}
h2+p,h1+p{margin-top:1.1rem}
h1{font-size:clamp(2.05rem,4vw,3.15rem)}
h2{font-size:clamp(1.85rem,3.3vw,2.85rem)}
h3{font-size:clamp(1.08rem,1.35vw,1.3rem);letter-spacing:-.018em}
p{margin:0 0 1.05em;color:var(--text)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--rand)}
.auge{color:var(--gruen);font-weight:600;font-size:.83rem;letter-spacing:.02em;margin-bottom:1.1rem;
  display:inline-flex;align-items:center;background:var(--weiss);border:1px solid rgba(var(--haus-rgb),.28);
  border-radius:99px;padding:.42rem 1.05rem}
.mitte{text-align:center;max-width:46rem;margin-inline:auto}
.mitte .auge{justify-content:center}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  background:var(--gruen);color:#fff;text-decoration:none;font-weight:600;font-size:.96rem;
  padding:.88rem 1.6rem;border-radius:999px;border:1px solid transparent;letter-spacing:-.01em;
  transition:background .2s,transform .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(var(--schatten-rgb),.16), 0 8px 24px -14px rgba(var(--haus-rgb),.85)}
.btn:hover{background:var(--gruen-dunkel);transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(var(--schatten-rgb),.18), 0 16px 34px -16px rgba(var(--haus-rgb),.9)}
.btn:active{transform:translateY(0)}
.btn.klar{background:var(--weiss);color:var(--gruen);border-color:var(--linie);box-shadow:0 1px 2px rgba(var(--schatten-rgb),.06)}
.btn.klar:hover{background:var(--weiss);border-color:var(--gruen)}
.btn.weiss{background:#fff;color:var(--gruen);border-color:#fff}
.btn.weiss:hover{background:#E7EDF7;border-color:#E7EDF7}
.btn.geist{background:transparent;color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none}
.btn.geist:hover{background:rgba(255,255,255,.12);border-color:#fff}
.btn.klein{padding:.6rem 1.25rem;font-size:.89rem}

/* ── Kopf, reine Wortmarke ───────────────────────────── */
.kopf{position:sticky;top:0;z-index:60;background:var(--weiss);border-bottom:1px solid var(--linie);transition:box-shadow .3s}
.kopf.fest{box-shadow:0 12px 30px -26px rgba(var(--schatten-rgb),.8)}
.kopf .wrap{display:flex;align-items:center;gap:2rem;min-height:88px}
.wortmarke{text-decoration:none;margin-right:auto;line-height:1.05}
.wortmarke b{display:block;font-size:var(--logo-gr,1.42rem);font-weight:700;
  letter-spacing:var(--logo-sperr,.12em);text-transform:uppercase;white-space:nowrap}
/* Lange Firmennamen. Seit 05.09.2026 steht der ganze Google-Name im Logo
   ("Physiotherapie Lindenau" statt nur "Lindenau"). Ungebremst brach er auf zwei
   Zeilen um und schob das Menue zusammen, bis "Termin buchen" zweizeilig war. */
.wortmarke.mittel{--logo-gr:1.12rem;--logo-sperr:.09em}
.wortmarke.lang{--logo-gr:.95rem;--logo-sperr:.06em}
.wortmarke.lang span,.wortmarke.mittel span{font-size:.63rem;letter-spacing:.2em}
/* Die Zeile darunter traegt Branche und Stadt ("PHYSIOTHERAPIE GELSENKIRCHEN").
   Sie ist klein, aber weit gesperrt und wird dadurch schnell breiter als das
   Handy. Deshalb faellt zuerst die Sperrung, dann die Groesse. */
.wortmarke.unter-mittel span{font-size:.66rem;letter-spacing:.17em}
.wortmarke.unter-lang span{font-size:.62rem;letter-spacing:.12em}
.wortmarke span{white-space:nowrap}
.wortmarke span{display:block;font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gruen);font-weight:500;margin-top:.18rem}
.menue{display:flex;gap:1.85rem;align-items:center}
.menue a{text-decoration:none;font-weight:500;font-size:.96rem;color:#27303F;transition:color .2s}
.menue a:hover,.menue a.aktiv{color:var(--gruen)}
.kopf-tel{display:flex;align-items:center;gap:.6rem;font-weight:600;text-decoration:none;font-size:.97rem}
.kopf-tel .rund{width:38px;height:38px;border-radius:50%;background:var(--gruen-blass);color:var(--gruen);display:grid;place-items:center}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--linie);background:#fff;cursor:pointer}
.burger i{display:block;width:18px;height:2px;background:var(--tinte);margin:3.5px auto;border-radius:2px}

/* ── Hero ────────────────────────────────────────────── */
.hero{padding:clamp(2rem,3.5vw,3.4rem) 0 0}
.hero .netz{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(2rem,4vw,4rem);align-items:center}
.hero h1 span{color:var(--gruen)}
h1{font-weight:650}
/* Sven 10.09.2026: Die H1 war auf Tablet und Handy zu klein (Clamp-Boden 2.05rem galt
   unter 800px durchgehend). Ab hier steht der Hero einspaltig, die volle Breite ist frei. */
/* Am Desktop steht "Ihre Praxis fuer Physiotherapie" in einer Zeile, ab Tablet
   abwaerts soll jede der drei Sinneinheiten eine eigene Zeile bekommen (Sven 10.09.2026). */
.hero h1 .umbruch-klein{display:none}
@media (max-width:1000px){.hero h1{font-size:clamp(2.6rem,5.6vw,3.05rem)}
  .hero h1 .umbruch-klein{display:inline}}
.hero .lead{font-size:1.05rem;max-width:33rem;margin-top:1.1rem}
.bewertet{display:inline-flex;align-items:center;gap:1rem;margin:1.7rem 0 1.9rem;
  background:var(--weiss);border-radius:99px;padding:.5rem 1.25rem .5rem .55rem;box-shadow:var(--schatten)}
.koepfe{display:flex}
.koepfe img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:3px solid #fff;margin-left:-14px}
.koepfe img:first-child{margin-left:0}
.koepfe span{width:42px;height:42px;border-radius:50%;border:3px solid #fff;margin-left:-14px;color:#fff;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.koepfe span:first-child{margin-left:0}
.sterne{color:var(--stern);letter-spacing:.14em;font-size:.92rem;line-height:1.2}
.bewertet small{display:block;color:var(--text);font-size:.85rem}
.tasten{display:flex;gap:.8rem;flex-wrap:wrap}
/* Drei Fakten unter den Tasten: eine Zeile, gleich breit, ohne Häkchen-Optik */
.fakten3{display:grid;grid-template-columns:repeat(3,auto);gap:clamp(1.4rem,3vw,2.8rem);
  margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--linie);justify-content:start}
.fakten3 div{min-width:0}
.fakten3 b{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
.fakten3 small{display:block;font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;color:#8A97AB;margin-top:.15rem;white-space:nowrap}

.buehne{position:relative}
.buehne .foto{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten-tief)}
.buehne .foto img{width:100%;height:clamp(420px,46vw,600px);object-fit:cover}

/* Zahlenkarten */
.zahl{position:absolute;border-radius:20px;padding:1.05rem 1.35rem;min-width:184px;
  backdrop-filter:blur(14px);box-shadow:var(--schatten-tief)}
.zahl b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.04em;line-height:1}
.zahl small{display:block;font-size:.82rem;margin-top:.25rem;line-height:1.35}
.zahl .strich{display:none}
.zahl.hell{background:rgba(255,255,255,.92);top:7%;left:-9%}
.zahl.hell b{color:var(--gruen)}
.zahl.hell small{color:var(--text)}
.zahl.hell .strich{background:var(--gruen-hell)}
.zahl.dunkel{background:rgba(var(--tief-rgb),.9);color:#fff;bottom:7%;right:-7%}
.zahl.dunkel b{color:#fff}
.zahl.dunkel small{color:var(--auf-dunkel-2)}
.zahl.dunkel .strich{background:var(--gruen-hell)}

/* ── Vorteile ────────────────────────────────────────── */
.vorteile{background:var(--weiss);border-radius:var(--r-xl);box-shadow:var(--schatten);
  padding:clamp(1.8rem,3vw,2.6rem);display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,2.6vw,2.6rem);margin-top:clamp(2.6rem,5vw,4.4rem)}
.vorteil{display:grid;grid-template-columns:auto 1fr;gap:1rem}
.vorteil .kreis{width:48px;height:48px;border-radius:16px;background:var(--gruen-blass);color:var(--gruen);display:grid;place-items:center}
.vorteil h3{margin-bottom:.35rem}
.vorteil p{font-size:.94rem;margin:0}

/* ── Kassen ──────────────────────────────────────────── */
.kassen{padding-top:clamp(2.6rem,4vw,3.6rem);padding-bottom:clamp(3.2rem,5vw,4.6rem)}
.kassen .titel{color:var(--tinte);font-size:1.06rem;font-weight:600;letter-spacing:-.01em;margin-bottom:1.5rem;text-align:center}
.kassen .laufband{overflow:hidden;max-width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.kassen .reihe{display:flex;gap:.7rem;width:max-content;animation:laufen 34s linear infinite}
.kassen .laufband:hover .reihe{animation-play-state:paused}
@keyframes laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.kassen .feld{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;height:82px;width:190px;flex:0 0 auto;
  display:grid;place-items:center;opacity:.78;transition:opacity .25s,transform .25s,box-shadow .25s}
.kassen .feld:hover{opacity:1;transform:translateY(-3px);box-shadow:var(--schatten)}
.kassen .feld span{font-weight:700;font-size:1.02rem;letter-spacing:.02em;color:#2C3542}
.kassen .feld span i{font-style:normal;font-weight:400;font-size:.72rem;display:block;letter-spacing:.13em;text-align:center;color:#7B8698}

/* ── Abschnitte ──────────────────────────────────────── */
section{padding-block:clamp(3.8rem,7vw,6.4rem)}
.kopfblock{margin-bottom:clamp(2rem,3.6vw,3rem)}
.kopfblock p{max-width:40rem}
.kopfzeile-flex{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}

/* Karten */
.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.8rem)}
.karte{background:var(--weiss);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schatten);
  display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.karte:hover{transform:translateY(-6px);box-shadow:var(--schatten-tief)}
.karte .bild{position:relative;overflow:hidden}
.karte .bild img{width:100%;height:212px;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.karte:hover .bild img{transform:scale(1.06)}
.karte .marke{position:absolute;left:1rem;top:1rem;background:rgba(255,255,255,.93);color:var(--gruen);
  font-size:.75rem;font-weight:600;padding:.32rem .8rem;border-radius:99px}
.karte .inhalt{padding:1.45rem 1.55rem 1.65rem;display:flex;flex-direction:column;flex:1}
.karte h3{margin-bottom:.55rem}
.karte p{font-size:.94rem;margin-bottom:1.25rem}
.karte .mehr{margin-top:auto;align-self:flex-start;color:var(--gruen);font-weight:600;font-size:.9rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:.45rem}
.karte .mehr svg{transition:transform .25s}
.karte:hover .mehr svg{transform:translateX(4px)}

/* Bildband mit Overlay */
.band{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--tief)}
.band img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(var(--nacht-rgb),.96) 0%,rgba(var(--nacht-rgb),.9) 42%,rgba(var(--nacht-rgb),.62) 100%)}
.band .inhalt{position:relative;z-index:2;padding:clamp(2.4rem,5vw,4.4rem);color:#fff;max-width:50rem}
.band h2{color:#fff;margin-bottom:1.1rem;font-size:clamp(1.6rem,2.9vw,2.5rem);white-space:nowrap}
.band p{color:var(--auf-dunkel)}
.band .auge{color:var(--auf-dunkel-3);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.band .tasten{margin-top:1.8rem}
.band .zahlreihe{display:flex;gap:clamp(1.6rem,3.4vw,3.2rem);margin-top:2.4rem;flex-wrap:nowrap;white-space:nowrap}
.band .zahlreihe b{display:block;font-size:1.75rem;font-weight:700;color:#fff;line-height:1}
.band .zahlreihe small{color:#A9CCC0;font-size:.86rem}

/* Leistungen */
.leistungen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,1.8vw,1.5rem)}
.leistung{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schatten);background:var(--tief)}
.leistung img{width:100%;aspect-ratio:1/1;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1);opacity:.96}
.leistung:hover img{transform:scale(1.07)}
.leistung .schleier{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--nacht-rgb),.94) 12%,rgba(var(--nacht-rgb),.45) 46%,rgba(var(--nacht-rgb),.06) 78%)}
.leistung .text{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem 1.5rem;color:#fff}
.leistung h3{color:#fff;margin-bottom:.3rem}
.leistung p{color:var(--auf-dunkel);font-size:.9rem;margin:0}
.leistung .kuerzel{position:absolute;top:1rem;left:1rem;background:rgba(255,255,255,.92);color:var(--gruen);
  font-size:.74rem;font-weight:700;letter-spacing:.05em;padding:.34rem .7rem;border-radius:8px}
.leistung .zahlt{position:absolute;top:1rem;right:1rem;font-size:.75rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.18);backdrop-filter:blur(6px);padding:.34rem .75rem;border-radius:99px}

/* Ablauf */
.hell{background:var(--weiss)}
.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.6vw,2.4rem)}
.schritt{background:var(--weiss);border-radius:var(--r-l);padding:2.1rem 1.9rem;position:relative;
  box-shadow:var(--schatten)}
.schritt .nr{font-size:.8rem;font-weight:700;letter-spacing:.16em;color:var(--gruen-hell);margin-bottom:.9rem;display:block}
.schritt h3{margin-bottom:.5rem;position:relative}
.schritt p{font-size:.94rem;margin:0;position:relative}

/* Team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.1rem,2vw,1.8rem)}
/* Einzelpraxis: ein Foto links, Text rechts (18.09.2026) */
.zweispalt.solo-team{grid-template-columns:minmax(0,420px) 1fr;align-items:center}
.solo-team .foto{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten-tief)}
.solo-team .foto img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.solo-team h2{margin-bottom:.4rem}
.solo-team .rolle{font-weight:600;color:var(--gruen);margin:0 0 1rem}
@media (max-width:1000px){.zweispalt.solo-team{grid-template-columns:1fr}.solo-team .foto{max-width:420px}}
.kopfkarte{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schatten);background:var(--tief)}
.kopfkarte img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.kopfkarte:hover img{transform:scale(1.05)}
.kopfkarte .schleier{position:absolute;inset:0;background:linear-gradient(to top,rgba(var(--nacht-rgb),.9) 8%,rgba(var(--nacht-rgb),.2) 46%,transparent 66%)}
.kopfkarte .zeile{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem 1.6rem;color:#fff}
.kopfkarte b{font-size:1.18rem;font-weight:700;display:block}
.kopfkarte span{font-size:.87rem;color:var(--auf-dunkel-2);font-weight:500}
.kopfkarte p{font-size:.88rem;color:var(--auf-dunkel);margin:.6rem 0 0}

/* Bewertungen */
.google{background:var(--weiss);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten)}
.google .oben{position:relative;min-height:340px;display:grid;align-items:end;background:var(--tief)}
.google .oben img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.google .oben::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(var(--nacht-rgb),.94),rgba(var(--nacht-rgb),.45))}
.google .oben .kopfzeile{position:relative;z-index:2;padding:clamp(1.6rem,3vw,2.4rem);color:#fff;display:flex;justify-content:space-between;
  align-items:flex-end;gap:1.6rem;flex-wrap:wrap;width:100%}
.google .note{display:flex;align-items:center;gap:1rem}
.google .note .wert{font-size:3.1rem;font-weight:700;line-height:1;letter-spacing:-.04em}
.google .note small{color:var(--auf-dunkel);font-size:.9rem;display:block}
/* Knoepfe unter den Bewertungen: Bewertung abgeben + Google-Eintrag (Sven 16.09.2026) */
.google .pruefen{display:flex;align-items:center;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;
  padding:clamp(1.3rem,2.4vw,1.8rem) clamp(1.7rem,2.8vw,2.3rem);border-top:1px solid var(--linie);background:var(--weiss)}
.google .pruefen p{margin:0;color:var(--text);font-size:.98rem;max-width:30rem}
.google .pruefen .knoepfe{display:flex;gap:.7rem;flex-wrap:wrap}
.google .pruefen .btn svg{flex:none}
@media (max-width:640px){.google .pruefen{justify-content:center;text-align:center}
  .google .pruefen .knoepfe{width:100%;flex-direction:column}.google .pruefen .btn{width:100%;padding-inline:.9rem;font-size:.95rem;white-space:nowrap}}
.zitate{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--weiss)}
.zitat{background:var(--weiss);padding:clamp(1.7rem,2.8vw,2.3rem);border-right:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.zitat:nth-child(2n){border-right:0}
.zitat:nth-last-child(-n+2){border-bottom:0}
.zitat p{color:var(--tinte);font-size:1.03rem;margin:.8rem 0 1.4rem}
.zitat .wer{display:flex;align-items:center;gap:.8rem}
.zitat .initial{width:44px;height:44px;border-radius:50%;background:var(--gruen-blass);color:var(--gruen);
  display:grid;place-items:center;font-weight:700;font-size:.92rem}
.zitat .wer b{font-size:.95rem;display:block;font-weight:600}
.zitat .wer small{color:var(--text);font-size:.83rem}

/* Praxis */
.praxis-netz{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.6rem);align-items:center}
.praxis-netz .foto{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten-tief)}
.praxis-netz .foto img{width:100%;height:clamp(380px,44vw,520px);object-fit:cover}
.wege{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-top:1.8rem;grid-auto-rows:1fr}
.weg{background:var(--weiss);border-radius:var(--r-m);padding:1.15rem 1.25rem;box-shadow:var(--schatten)}
.weg .kreis{width:40px;height:40px;border-radius:13px;background:var(--gruen-blass);color:var(--gruen);
  display:grid;place-items:center;margin-bottom:.7rem}
.weg b{display:block;font-size:.98rem;font-weight:600;margin-bottom:.15rem}
.weg small{color:var(--text);font-size:.86rem;line-height:1.5;display:block}

/* Öffnungszeiten, eigener Block */
.zeitenblock{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:stretch}
.zeitkarte{background:var(--weiss);border-radius:var(--r-xl);box-shadow:var(--schatten);
  padding:clamp(1.4rem,2.4vw,2rem);display:grid;gap:.35rem;align-content:center}
.tagzeile{display:flex;align-items:center;gap:1rem;padding:.62rem .85rem;border-radius:14px;transition:background .2s}
.tagzeile:hover{background:var(--grund)}
.tagzeile .tag{font-weight:500;font-size:.98rem;flex:1}
.tagzeile .uhr{font-variant-numeric:tabular-nums;color:var(--text);font-size:.95rem;font-weight:500}
.tagzeile.zu .uhr{color:#A7B0BD}
.tagzeile.heute{background:var(--gruen);box-shadow:0 14px 30px -22px rgba(var(--haus-rgb),.95)}
.tagzeile.heute .tag,.tagzeile.heute .uhr{color:#fff;font-weight:600}
.tagzeile.heute::after{content:"heute";font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,255,255,.2);color:#fff;padding:.2rem .55rem;border-radius:99px}
.zeitseite{background:var(--gruen);border-radius:var(--r-xl);color:#fff;padding:clamp(1.8rem,3vw,2.4rem);
  display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.zeitseite::after{content:"";position:absolute;right:-70px;bottom:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.06)}
.zeitseite h3{color:#fff;font-size:1.4rem;margin-bottom:.6rem}
.zeitseite p{color:var(--auf-dunkel);font-size:.96rem}
.zeitseite .jetzt{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.14);
  border-radius:99px;padding:.5rem 1.05rem;font-size:.88rem;font-weight:600;margin-bottom:1.2rem;align-self:flex-start}
.zeitseite .jetzt i{width:9px;height:9px;border-radius:50%;background:var(--gruen-hell);display:block}
.zeitseite .jetzt.zu i{background:#F0A32C}

/* FAQ */
.faq{max-width:52rem;margin-inline:auto;display:grid;gap:.8rem}
.frage{background:var(--weiss);border-radius:var(--r-m);box-shadow:var(--schatten);overflow:hidden}
.frage summary{cursor:pointer;list-style:none;padding:1.25rem 1.5rem;font-weight:600;font-size:1rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem}
.frage summary::-webkit-details-marker{display:none}
.frage summary::after{content:"";width:11px;height:11px;border-right:2px solid var(--gruen);
  border-bottom:2px solid var(--gruen);transform:rotate(45deg);transition:transform .3s;flex:0 0 auto;margin-top:-4px}
.frage[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.frage .antwort{padding:0 1.5rem 1.35rem;color:var(--text);font-size:.95rem}

/* CTA mit Foto */
.cta{position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--tief)}
.cta img.grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cta::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(95deg,rgba(var(--tief-rgb),.95) 0%,rgba(var(--haus-rgb),.9) 50%,rgba(var(--haus-rgb),.72) 100%)}
.cta .netz{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,4vw,3.4rem);
  align-items:center;padding:clamp(2.4rem,5vw,4.2rem)}
.cta h2{color:#fff;margin-bottom:1.1rem}
.cta p{color:var(--auf-dunkel)}
.cta .auge{color:var(--auf-dunkel-3);background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}
.cta .rechts{background:rgba(255,255,255,.09);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-l);padding:1.8rem}
.cta .nummer{font-size:clamp(1.6rem,2.6vw,2.05rem);font-weight:700;color:#fff;text-decoration:none;
  letter-spacing:-.03em;display:block;margin-bottom:.2rem}
.cta .rechts small{color:var(--auf-dunkel-2);font-size:.86rem;display:block;margin-bottom:1.3rem}

/* Fuß, dunkel */
footer{background:var(--fuss);color:#9FA9B8;padding-block:calc(clamp(3rem,5vw,4.4rem) + 45px) 1.8rem;margin-top:0;position:relative;z-index:1}
footer .spalten{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.4rem}
footer .wortmarke b{color:#fff}
footer .wortmarke span{color:#6F92C0}
footer h4{font-size:1rem;margin-bottom:1rem;color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:.55rem}
footer a{color:#9FA9B8;text-decoration:none;font-size:1rem;transition:color .2s}
footer a:hover{color:#fff}
footer p{color:#9FA9B8;font-size:1rem}
.fussende{margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.85rem;color:#6D7684}

/* ── Farbwelten zum Vergleichen (nur im Entwurf) ────────── */
body.t-petrol{--gruen:#0E5A6B;--gruen-dunkel:#08404D;--gruen-hell:#2A93A8;--gruen-blass:#E1EFF2;--grund:#F0F6F7;--tinte:#11242A;--text:#48595E;--linie:#DDE9EB}
body.t-gruen{--gruen:#15654F;--gruen-dunkel:var(--tief);--gruen-hell:#2E8B6C;--gruen-blass:#E7EDF7;--grund:#F1F6F4;--tinte:#12211C;--text:#4A5B55;--linie:#E2EAE6}
body.t-terra{--gruen:#B0553A;--gruen-dunkel:#8A4029;--gruen-hell:#D08163;--gruen-blass:#FAEBE4;--grund:#F7F3F0;--tinte:#231A16;--text:#5C4F49;--linie:#EBE2DC;--stern:#C7893A}
body.t-terra footer{background:#231A16}
body.t-petrol footer{background:#0B1F24}
body.t-gruen footer{background:#0C1F19}
.farbwahl{position:fixed;right:16px;bottom:16px;z-index:99;display:flex;gap:8px;background:rgba(255,255,255,.94);
  padding:8px;border-radius:99px;box-shadow:0 18px 40px -26px rgba(0,0,0,.6)}
.farbwahl button{width:26px;height:26px;border-radius:50%;border:2px solid #fff;cursor:pointer;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
@media print{.farbwahl{display:none}}

.zaehler{font-variant-numeric:tabular-nums}
/* Termin-Knopf pulsiert dezent, wie auf der AZK-Seite */
.btn.puls{position:relative;overflow:hidden;animation:schein 3.4s ease-in-out infinite}
.btn.puls::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);animation:wischen 3.4s ease-in-out infinite}
@keyframes schein{0%,100%{box-shadow:0 1px 2px rgba(var(--schatten-rgb),.16), 0 8px 24px -14px rgba(var(--haus-rgb),.85)}
  50%{box-shadow:0 1px 2px rgba(var(--schatten-rgb),.16), 0 14px 34px -12px rgba(var(--haus-rgb),.95)}}
@keyframes wischen{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.btn.puls,.btn.puls::after{animation:none}}
.rufleiste{display:none}
.auf{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.auf.da{opacity:1;transform:none}

/* Ueberschriften in Bewegung (Sven 08.09.2026): h2 langsam von links, h3 von unten.
   Die Klassen setzt seite.js, damit auch spaeter neu dazukommende Ueberschriften sie
   bekommen. Der Versatz mehrerer h3 nebeneinander steckt in --verz. */
/* Dauer und Weg wie "slow" in Elementor (Sven 09.09.2026: "es ist so schnell, dass man
   das ueberhaupt nicht sieht"). Elementor faehrt zwei Sekunden, vorher war es gut eine,
   und der Weg war mit 30 Pixeln so kurz, dass die Bewegung nicht auffiel.
   Der Weg waechst mit der Fensterbreite, ist aber gedeckelt: eine feste grosse Strecke
   schiebt die Ueberschrift auf dem Handy aus dem Bild und erzeugt einen waagerechten
   Balken. clamp gibt am Rechner 120 Pixel, auf dem Handy rund 35. */
.auf.vonlinks{opacity:0;transform:translateX(clamp(-120px,-9vw,-36px));
  transition:opacity 2s cubic-bezier(.16,.6,.24,1),transform 2s cubic-bezier(.16,.6,.24,1)}
/* Nur das Hereinfahren von links ist langsam (2 s). Das Aufblenden von unten bleibt
   zuegig, sonst wartet man auf jeder Karte (Sven 09.09.2026). */
.auf.vonunten{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1);
  transition-delay:var(--verz,0s)}
.auf.vonlinks.da,.auf.vonunten.da{opacity:1;transform:none}

@media (max-width:1000px){
  .hero .netz,.praxis-netz,.cta .netz,.zeitenblock{grid-template-columns:1fr}
  .vorteile,.raster,.schritte,.team,.leistungen{grid-template-columns:1fr 1fr}
  .zitate{grid-template-columns:1fr}
  .kassen .reihe{grid-template-columns:repeat(4,1fr)}
  footer .spalten{grid-template-columns:1fr 1fr}
  .zahl.hell{left:-2%}.zahl.dunkel{right:-2%}
}
@media (max-width:900px){
  .band h2{white-space:normal}
  .band .zahlreihe{flex-wrap:wrap;white-space:normal}
}
@media (max-width:860px){
  .wortmarke b{white-space:normal}
  .wortmarke.mittel{--logo-gr:1.02rem}
  .wortmarke.lang{--logo-gr:.86rem}
}
/* Der Kopf wird zwischen Tablet und Desktop eng: langer Firmenname, sechs
   Menuepunkte, Telefonnummer und Taste. Deshalb faellt zuerst die Nummer weg
   (die Taste fuehrt ohnehin zum Kontakt), dann klappt das Menue in den Burger.
   Vorher passierte beides erst bei 720px, dazwischen brach die Telefonnummer
   dreizeilig um und die Taste lief aus dem Bild (05.09.2026). */
@media (max-width:1120px){
  .kopf-tel{display:none}
}
@media (max-width:960px){
  .menue{display:none}
  .burger{display:block}
  /* Logo und Burger stehen jetzt allein im Kopf. Sven 05.09.2026: das Logo soll
     genau so hoch sein wie der Burger, oben und unten buendig. Feste Hoehe plus
     space-between setzt die Namenszeile an die Oberkante und die Branchenzeile an
     die Unterkante, unabhaengig davon, wie lang der Name ist. */
  .wortmarke{height:44px;display:flex;flex-direction:column;justify-content:space-between}
  .wortmarke b{font-size:1.6rem;line-height:1}
  .wortmarke span{margin-top:0;font-size:.72rem;line-height:1}
  .wortmarke.mittel b{font-size:1.28rem}
  .wortmarke.lang b{font-size:1.06rem}
  .wortmarke.unter-mittel span{font-size:.68rem;letter-spacing:.15em}
  .wortmarke.unter-lang span{font-size:.63rem;letter-spacing:.1em}
}
@media (max-width:720px){
  .kopf .btn{display:none}
  .vorteile,.raster,.schritte,.team,.leistungen,footer .spalten,.wege{grid-template-columns:1fr}
  .kassen .reihe{grid-template-columns:repeat(2,1fr)}
  .buehne .foto img{height:340px}
  .zahl{position:static;margin-top:.8rem;display:block;backdrop-filter:none}
  .zahl.hell{background:#fff}.zahl.dunkel{background:var(--gruen-dunkel)}
  body{padding-bottom:74px}
  .rufleiste{display:flex;align-items:center;gap:.55rem;position:fixed;left:0;right:0;bottom:0;
    z-index:70;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);padding:.6rem .8rem;
    box-shadow:0 -8px 26px -18px rgba(var(--schatten-rgb),.75)}
  .rufleiste .btn{flex:1;justify-content:center}
  .rundknopf{width:48px;height:48px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    background:var(--gruen-blass);color:var(--gruen);text-decoration:none}
  .rundknopf.wa{background:#25D366;color:#fff}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.auf,.auf.vonlinks,.auf.vonunten{opacity:1;transform:none}}

/* ══ Unterseiten ═════════════════════════════════════════ */
.unterkopf{padding-block:clamp(2.4rem,4.5vw,4rem) clamp(2rem,3.5vw,3rem)}
.unterkopf h1{margin-bottom:.2rem}
.unterkopf .lead{font-size:1.06rem;max-width:44rem;margin-top:1.1rem;color:var(--text)}
.unterkopf .tasten{margin-top:1.8rem}
.brotkrumen{font-size:.85rem;color:#8A97AB;margin-bottom:1.4rem}
.brotkrumen a{text-decoration:none;color:var(--gruen)}
.brotkrumen a:hover{text-decoration:underline;text-underline-offset:3px}
.brotkrumen span{margin:0 .45rem;opacity:.6}

.zweispalt{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.zweispalt .foto.gross{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten-tief)}
.zweispalt .foto.gross img{width:100%;height:clamp(300px,34vw,420px);object-fit:cover}

.haken{list-style:none;padding:0;margin:1.9rem 0 1.8rem;display:grid;gap:.85rem}
.haken li{display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;font-size:1.02rem}
.haken li::before{content:"";width:20px;height:20px;border-radius:50%;background:var(--gruen-blass);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231D3D74' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;margin-top:.28rem}

.infokarte{background:var(--weiss);border-radius:var(--r-xl);box-shadow:var(--schatten);padding:clamp(1.6rem,2.6vw,2.1rem)}
.infokarte h3{margin-bottom:1rem}
.infokarte dl{margin:0 0 1.4rem;display:grid;gap:.75rem}
.infokarte dt{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#8A97AB}
.infokarte dd{margin:.1rem 0 0;font-weight:500}
.infokarte dd a{color:var(--gruen);text-decoration:none}
.infokarte.gross .grossnummer{display:block;font-size:clamp(1.6rem,2.8vw,2.1rem);font-weight:700;
  color:var(--gruen);text-decoration:none;letter-spacing:-.03em;margin-bottom:.6rem}

.hinweiskarte{margin-top:clamp(1.6rem,2.6vw,2.2rem);background:var(--gruen-blass);border-radius:var(--r-xl);
  padding:clamp(1.5rem,2.6vw,2.1rem);display:flex;align-items:center;justify-content:space-between;gap:1.6rem;flex-wrap:wrap}
.hinweiskarte h3{margin-bottom:.4rem}
.hinweiskarte p{margin:0;max-width:46ch}

.fliesstext{max-width:48rem}
.fliesstext h2{font-size:clamp(1.25rem,1.9vw,1.5rem);margin:2rem 0 .7rem}
.fliesstext h2:first-child{margin-top:0}
.fliesstext p{font-size:.98rem}
.fliesstext a{color:var(--gruen)}

.formular{display:grid;gap:1rem;margin-top:1.4rem}
.formular label{display:grid;gap:.4rem;font-size:.9rem;font-weight:500}
.formular input,.formular textarea{font:inherit;font-size:.97rem;padding:.85rem 1rem;border:1px solid var(--linie);
  border-radius:12px;background:var(--weiss);color:var(--tinte);font-weight:400}
.formular input:focus,.formular textarea:focus{outline:2px solid var(--gruen-hell);outline-offset:1px;border-color:transparent}
.formular .zustimmung{grid-template-columns:auto 1fr;align-items:start;font-weight:400;font-size:.88rem;color:var(--text)}
.formular .zustimmung input{width:18px;height:18px;padding:0;margin-top:.15rem}
.formular button{justify-self:start;cursor:pointer;font:inherit}

@media (max-width:1000px){
  .zweispalt{grid-template-columns:1fr}
}
@media (max-width:960px){
  .menue{display:none;position:absolute;top:100%;left:0;right:0;background:var(--weiss);
    flex-direction:column;align-items:flex-start;gap:0;padding:.6rem 1.15rem 1.2rem;
    border-bottom:1px solid var(--linie);box-shadow:0 18px 30px -26px rgba(var(--schatten-rgb),.7)}
  .menue.offen{display:flex}
  .menue a{padding:.75rem 0;width:100%;border-bottom:1px solid var(--linie)}
  .kopf .wrap{position:relative}
}

/* ══ Anliegen-Liste (Problemblock der Startseite) ════════ */
.anliegen-liste{display:grid;gap:.7rem;align-content:start}
.anliegen{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1rem;
  background:var(--weiss);border:1px solid var(--linie);border-radius:16px;padding:1.05rem 1.25rem;
  text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.anliegen:hover{border-color:var(--gruen-hell);transform:translateX(4px);box-shadow:var(--schatten)}
.anliegen b{grid-column:1;font-size:1.02rem;font-weight:600;display:block;margin-bottom:.15rem}
.anliegen span{grid-column:1;font-size:.9rem;color:var(--text);line-height:1.55}
.anliegen svg{grid-column:2;grid-row:1 / span 2;color:var(--gruen);transition:transform .2s}
.anliegen:hover svg{transform:translateX(3px)}


/* Feinschliff */
.mitte p{max-width:40rem;text-wrap:balance}
.kopfblock.mitte h2{text-wrap:balance}
.anliegen{row-gap:.1rem}
.anliegen b{margin-bottom:.2rem}

/* ══ Preisliste ══════════════════════════════════════════ */
.preisliste{margin-top:1.4rem;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-l);overflow:hidden}
.preiszeile{display:grid;grid-template-columns:1fr auto auto;gap:1.2rem;align-items:baseline;
  padding:.95rem 1.3rem;border-bottom:1px solid var(--linie);transition:background .2s}
.preiszeile:last-child{border-bottom:0}
.preiszeile:hover{background:var(--grund)}
.preiszeile .was{font-weight:500;font-size:.99rem}
.preiszeile .dauer{font-size:.86rem;color:#8A97AB;min-width:4.5rem;text-align:right}
.preiszeile .preis{font-weight:700;font-size:1.02rem;color:var(--gruen);font-variant-numeric:tabular-nums;min-width:5rem;text-align:right}
@media (max-width:520px){
  .preiszeile{grid-template-columns:1fr auto;row-gap:.1rem}
  .preiszeile .dauer{grid-column:1;text-align:left}
}

/* Kassenlogos im Laufband: graustufig, optisch gleich gross (Sven 08.09.2026).
   Die 40px gelten fuer die LEINWAND der Datei, nicht fuer das Logo darin. Jede Datei in
   img/kassen ist gleich hoch, das Logo sitzt darin mittig in der Groesse, die logos.py
   nach seiner Deckung berechnet hat. Damit trifft eine einzige Regel hier alle Logos in
   der richtigen Groesse. Wer die 40 aendert, muss ANZEIGE_HOEHE in logos.py mitaendern
   und die Logos neu erzeugen.
   Das Feld hat KEINE feste Breite mehr: eine breite Wortmarke wie BARMER braucht mehr
   Platz als das kompakte DAK-Zeichen, und bei fester Feldbreite waere genau die Wortmarke
   wieder geschrumpft worden. */
.kassen .feld img{height:40px;width:auto;max-width:none;opacity:.72;transition:opacity .25s}
.kassen .feld:hover img{opacity:1}
.kassen .feld{width:auto;min-width:150px;padding:0 26px}

/* Nummer statt Kuerzel auf den Leistungskacheln */
.leistung .nummer{position:absolute;top:1rem;left:1rem;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.94);color:var(--gruen);font-weight:700;font-size:.95rem;
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(var(--schatten-rgb),.18)}
/* Kassenhinweis auf den Kacheln lesbar auf dunklem Grund */
.leistung .zahlt{background:rgba(var(--schatten-rgb),.55);border:1px solid rgba(255,255,255,.22)}

/* ══ Bildkopf der Unterseiten ════════════════════════════ */
.unterkopf.bild{position:relative;overflow:hidden;background:var(--gruen-dunkel);
  padding-block:clamp(3.4rem,6vw,5.6rem) clamp(3rem,5vw,4.6rem);margin-bottom:0}
.unterkopf.bild .grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.unterkopf.bild::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(var(--tief-rgb),.94) 0%,rgba(var(--tief-rgb),.86) 45%,rgba(var(--haus-rgb),.62) 100%)}
.unterkopf.bild .wrap{position:relative;z-index:2}
.unterkopf.bild h1{color:#fff;max-width:20ch}
.unterkopf.bild .lead{color:var(--auf-dunkel);max-width:52ch}
.unterkopf.bild .auge{color:var(--auf-dunkel-3);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.unterkopf.bild .brotkrumen{color:var(--auf-dunkel-2)}
.unterkopf.bild .brotkrumen a{color:#fff}
.unterkopf.bild .tasten{margin-top:1.9rem}

/* ══ Dropdown im Menue ═══════════════════════════════════ */
.hat-menue{position:relative;display:inline-flex;align-items:center}
.hat-menue>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:.45rem;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.65}
.klapp{position:absolute;top:100%;left:-1rem;min-width:250px;background:var(--weiss);
  border:1px solid var(--linie);border-radius:16px;padding:.5rem;display:none;
  box-shadow:0 24px 48px -30px rgba(var(--schatten-rgb),.6)}
.hat-menue:hover .klapp,.hat-menue:focus-within .klapp{display:block}
.hat-menue::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.klapp a{display:block;padding:.6rem .85rem;border-radius:10px;font-size:.93rem;transition:background .16s}
.klapp a:hover{background:var(--grund);color:var(--gruen)}
.klapp a.alle{border-top:1px solid var(--linie);margin-top:.35rem;padding-top:.7rem;color:var(--gruen);font-weight:600}

/* ══ Infokarte mit Bild ══════════════════════════════════ */
.infokarte.mitbild{padding:0;overflow:hidden}
.infokarte.mitbild img{width:100%;height:190px;object-fit:cover}
.infokarte.mitbild .innen{padding:clamp(1.4rem,2.4vw,1.9rem)}

/* ══ Wirkung ═════════════════════════════════════════════ */
.wirkung{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.wirkkarte{background:var(--weiss);border-radius:var(--r-l);padding:1.8rem 1.6rem;box-shadow:var(--schatten);position:relative}
.wirkkarte .wnr{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;
  background:var(--gruen-blass);color:var(--gruen);font-weight:700;margin-bottom:1rem}
.wirkkarte h3{margin-bottom:.45rem}
.wirkkarte p{font-size:.94rem;margin:0}

/* ══ Ablaufliste ═════════════════════════════════════════ */
.ablaufliste{display:grid;gap:.9rem;margin-top:1.5rem}
.ablaufzeile{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;
  background:var(--weiss);border-radius:16px;padding:1.15rem 1.3rem;box-shadow:var(--schatten)}
.ablaufzeile .anr{width:36px;height:36px;border-radius:50%;background:var(--gruen);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:.9rem}
.ablaufzeile b{display:block;font-size:1.22rem;font-weight:600;letter-spacing:-.02em;margin-bottom:.35rem}
.ablaufzeile span{font-size:.93rem;color:var(--text);line-height:1.6}

/* ══ Mitbringen ══════════════════════════════════════════ */
.mitbringkarte{background:var(--gruen-blass);border-radius:var(--r-xl);padding:clamp(1.6rem,2.6vw,2.1rem)}
.mitbringkarte h3{margin-bottom:.6rem}
.mitbringkarte .fussnote{font-size:.87rem;color:var(--text);margin:.4rem 0 0}

.zitate.zwei{grid-template-columns:1fr 1fr;gap:1.2rem;background:transparent}
.zitate.zwei .zitat{border:1px solid var(--linie);border-radius:var(--r-l);box-shadow:var(--schatten)}

@media (max-width:1000px){
  .wirkung{grid-template-columns:1fr}
  .zitate.zwei{grid-template-columns:1fr}
}

/* ══ Wirkungsband mit Bild ═══════════════════════════════ */
.wirkband{position:relative;overflow:hidden;background:var(--gruen-dunkel)}
.wirkband .grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.wirkband::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,rgba(var(--tief-rgb),.95),rgba(var(--tief-rgb),.88))}
.wirkband .wrap{position:relative;z-index:2}
.wirkband h2{color:#fff}
.wirkband .kopfblock p{color:var(--auf-dunkel);max-width:44rem}
.wirkband .auge{color:var(--auf-dunkel-3);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}

/* Ziffernkarten im AZK-Muster */
.wirkkarte{position:relative;overflow:hidden;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-l);padding:2rem 1.8rem;box-shadow:none}
.wirkkarte .ziffer{position:absolute;top:.4rem;right:1rem;font-size:3.6rem;font-weight:700;
  color:rgba(255,255,255,.1);line-height:1;letter-spacing:-.05em}
.wirkkarte .zeile{display:flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--auf-dunkel-2);margin:0 0 .7rem}
.wirkkarte .zeile::before{content:"";width:22px;height:2px;background:var(--gruen-hell);border-radius:2px}
.wirkkarte h3{color:#fff;font-size:1.32rem;margin-bottom:.55rem}
.wirkkarte p{color:var(--auf-dunkel);font-size:.97rem;margin:0}

/* ══ Eckdaten in der Infokarte ═══════════════════════════ */
.eckdaten{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin-top:1rem}
.eck{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:center;
  background:var(--grund);border-radius:14px;padding:.9rem .95rem}
.eck .sym{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:var(--weiss);color:var(--gruen);box-shadow:0 1px 3px rgba(var(--schatten-rgb),.08)}
.eck span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#8A97AB;display:block}
.eck b{font-size:.95rem;font-weight:600;line-height:1.35;display:block;margin-top:.1rem}
.anriss{margin-top:1.2rem}

/* ══ Mitbring-Karte mit Bild ═════════════════════════════ */
.zweispalt.gleichhoch{align-items:stretch}
.mitbringkarte{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--gruen-dunkel);
  padding:0;display:flex}
.mitbringkarte .grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.mitbringkarte::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(var(--tief-rgb),.9),rgba(var(--tief-rgb),.96))}
.mitbringkarte .innen{position:relative;z-index:2;padding:clamp(1.8rem,3vw,2.4rem);align-self:center;width:100%}
.mitbringkarte h3{color:#fff;font-size:1.55rem;margin-bottom:1rem}
.mitbringkarte .fussnote{font-size:.9rem;color:var(--auf-dunkel-2);margin:.6rem 0 0}
.haken.invers li{color:#E6EDF8;font-size:1.05rem}
.haken.invers li::before{background-color:rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Vierer-Reihe der weiteren Leistungen */
.leistungen.vier{grid-template-columns:repeat(4,1fr)}
.leistung.anfrage{background:var(--gruen-blass);display:flex;align-items:center;aspect-ratio:1/1}
.leistung.anfrage .text{position:static;padding:1.6rem 1.5rem;color:var(--tinte)}
.leistung.anfrage h3{color:var(--tinte);margin:.9rem 0 .5rem}
.leistung.anfrage p{color:var(--text);font-size:.94rem}
.leistung.anfrage .zeichen{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--weiss);color:var(--gruen)}
.leistung.anfrage .mehr{display:inline-block;margin-top:1rem;color:var(--gruen);font-weight:600;font-size:.93rem}

/* Bewertungsband mit Bild */
.stimmenband{position:relative;overflow:hidden;background:var(--gruen-dunkel)}
.stimmenband .grund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stimmenband::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(150deg,rgba(var(--tief-rgb),.94),rgba(var(--tief-rgb),.9))}
.stimmenband .wrap{position:relative;z-index:2}
.stimmenband h2{color:#fff}
.stimmenband .kopfblock p{color:var(--auf-dunkel)}
.stimmenband .auge{color:var(--auf-dunkel-3);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.24)}
.zitate.drei{grid-template-columns:repeat(3,1fr);gap:1.4rem;background:transparent}
.zitate.drei .zitat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-l);box-shadow:none;padding:2rem 1.9rem}
.zitate.drei .zitat p{color:#EAF0FA}
.zitate.drei .wer b{color:#fff}
.zitate.drei .wer small{color:var(--auf-dunkel-2)}
.zitate.drei .initial{background:rgba(255,255,255,.16);color:#fff}

@media (max-width:1000px){
  .leistungen.vier{grid-template-columns:1fr 1fr}
  .zitate.drei{grid-template-columns:1fr}
}

/* Pillen auf dunklem Grund bleiben transparent-hell */
.band .auge,.cta .auge,.wirkband .auge,.stimmenband .auge,.unterkopf.bild .auge{background:rgba(255,255,255,.1)}
.leistung{text-decoration:none;color:inherit}
.leistung.anfrage:hover{background:var(--auf-dunkel-3)}

/* Bewertungsband darf breiter laufen als der uebrige Satzspiegel */
.stimmenband .wrap{max-width:1340px}
@media (max-width:520px){.eckdaten{grid-template-columns:1fr}}

/* ══ Chat-Assistent ══════════════════════════════════════ */
.chat-knopf{position:fixed;right:20px;bottom:20px;z-index:80;display:inline-flex;align-items:center;gap:.6rem;
  background:var(--gruen);color:#fff;border:0;border-radius:999px;padding:.9rem 1.4rem;cursor:pointer;
  font:600 .95rem var(--f);box-shadow:0 14px 34px -16px rgba(var(--haus-rgb),.95)}
.chat-knopf:hover{background:var(--gruen-dunkel);transform:translateY(-1px)}
.chat{position:fixed;right:20px;bottom:20px;z-index:81;width:min(380px,calc(100vw - 32px));
  background:var(--weiss);border:1px solid var(--linie);border-radius:22px;overflow:hidden;
  box-shadow:0 34px 70px -30px rgba(var(--schatten-rgb),.55);display:flex;flex-direction:column;max-height:min(560px,80vh)}
.chat-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;
  background:var(--gruen);color:#fff}
.chat-kopf b{display:block;font-size:1rem}
.chat-kopf small{color:var(--auf-dunkel);font-size:.82rem}
.chat-zu{background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;opacity:.8}
.chat-zu:hover{opacity:1}
.chat-verlauf{padding:1rem 1.1rem;display:grid;gap:.7rem;overflow-y:auto;background:var(--grund)}
.blase{padding:.75rem 1rem;border-radius:16px;font-size:.95rem;line-height:1.6;max-width:88%}
.blase.bot{background:var(--weiss);border:1px solid var(--linie);justify-self:start}
.blase.mensch{background:var(--gruen);color:#fff;justify-self:end}
.blase.warten{opacity:.6}
.vorschlaege{display:grid;gap:.45rem;justify-items:start}
.vorschlag{background:var(--weiss);border:1px solid var(--linie);border-radius:999px;padding:.5rem .95rem;
  font:500 1rem var(--f);color:var(--gruen);cursor:pointer;text-align:left}
.vorschlag:hover{border-color:var(--gruen)}
.chat-eingabe{display:flex;gap:.5rem;padding:.8rem;border-top:1px solid var(--linie);background:var(--weiss)}
.chat-eingabe input{flex:1;font:inherit;font-size:.95rem;padding:.7rem .9rem;border:1px solid var(--linie);border-radius:999px}
.chat-eingabe input:focus{outline:2px solid var(--gruen-hell);outline-offset:1px;border-color:transparent}
.chat-eingabe .btn{padding:.7rem .95rem}
.chat-fuss{font-size:.75rem;color:#8A97AB;margin:0;padding:0 1.1rem .9rem;background:var(--weiss)}
@media (max-width:720px){
  .chat-knopf{bottom:84px}
  .chat{bottom:80px;right:12px}
}

.blase-link{display:block;margin-top:.5rem;font-weight:600;font-size:.88rem;color:var(--gruen)}

/* Handy: die Leiste unten genuegt, der Chat-Knopf wuerde sie doppeln */
@media (max-width:720px){
  .chat-knopf{display:none}
  .chat{bottom:76px;right:8px;left:8px;width:auto}
}

/* Der weisse Grund endet 45px vor der Kante, die Karte ragt in den Footer */
.ueberlappt{background:linear-gradient(to bottom,var(--grund) calc(100% - 45px),transparent calc(100% - 45px))}

.telknopf{font-size:1.28rem;padding:1.05rem 1.7rem;width:100%;margin-bottom:1rem}
.telknopf svg{flex:0 0 auto}

.leistungen .leistung.hoch{grid-row:span 2}
.leistungen .leistung.hoch img{aspect-ratio:auto;height:100%}
/* 7 Leistungen (Golidj, 18.09.2026): die letzte Kachel fuellt sonst nur ein Drittel der
   dritten Reihe. Sie laeuft dann ueber zwei Spalten, das Bild bleibt in der Hoehe der Nachbarn. */
.leistungen:not(.vier) .leistung:nth-child(7):last-child{grid-column:span 2}
.leistungen:not(.vier) .leistung:nth-child(7):last-child img{aspect-ratio:auto;height:100%;position:absolute;inset:0}
.leistungen:not(.vier) .leistung:nth-child(7):last-child{aspect-ratio:2.08/1}
@media (max-width:1000px){.leistungen .leistung.hoch{grid-row:auto}
  .leistungen .leistung.hoch img{aspect-ratio:1/1;height:auto}
  .leistungen:not(.vier) .leistung:nth-child(7):last-child{grid-column:auto;aspect-ratio:auto}
  .leistungen:not(.vier) .leistung:nth-child(7):last-child img{aspect-ratio:1/1;height:auto;position:static}}

/* ══ Standortbild ════════════════════════════════════════ */
.standort{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--schatten)}
.standort-bild{display:block;position:relative;height:var(--kh,440px);overflow:hidden}
.standort-bild img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.standort-bild:hover img{transform:scale(1.03)}
.standort-schild{position:absolute;left:clamp(1rem,2vw,1.6rem);top:clamp(1rem,2vw,1.6rem);
  background:var(--weiss);border-radius:14px;padding:.85rem 1.1rem;box-shadow:var(--schatten);max-width:min(320px,70%)}
.standort-schild b{display:block;font-size:1rem;color:var(--tinte)}
.standort-schild small{color:var(--text);font-size:.86rem}
.standort-fuss{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  padding:1.1rem clamp(1rem,2vw,1.6rem);border-top:1px solid var(--linie)}
.standort-fuss b{display:block;font-size:1rem}
.standort-fuss small{color:var(--text);font-size:.88rem}

/* Formular: Auswahlfelder und Feldpaare */
.formular select{font:inherit;font-size:.97rem;padding:.85rem 2.4rem .85rem 1rem;border:1px solid var(--linie);
  border-radius:12px;background:var(--weiss);color:var(--tinte);appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center}
.formular select:focus{outline:2px solid var(--gruen-hell);outline-offset:1px;border-color:transparent}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.formular .zustimmung{display:grid;grid-template-columns:auto 1fr;gap:.7rem;align-items:start;line-height:1.6}
.formular .zustimmung a{color:var(--gruen)}
@media (max-width:560px){.feldpaar{grid-template-columns:1fr}}

/* Muss NACH .chat stehen, sonst gewinnt display:flex gegen das hidden-Attribut */
.chat[hidden]{display:none !important}

/* ══ Kontaktseite ════════════════════════════════════════ */
.kontakt-netz{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}
.wege-liste{display:grid;gap:.85rem;margin-top:1.8rem}
.wegkarte{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;text-decoration:none;
  background:var(--weiss);border:1px solid var(--linie);border-radius:18px;padding:1.15rem 1.3rem;
  transition:border-color .2s,transform .2s,box-shadow .2s}
.wegkarte:hover{border-color:var(--gruen-hell);transform:translateY(-2px);box-shadow:var(--schatten)}
.wegkarte .sym{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;
  background:var(--gruen-blass);color:var(--gruen)}
.wegkarte .label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#8A97AB;display:block}
.wegkarte b{display:block;font-size:1.12rem;margin:.15rem 0 .25rem;color:var(--tinte)}
.wegkarte small{color:var(--text);font-size:.88rem;line-height:1.55;display:block}
.merkkasten{background:var(--gruen-blass);border-radius:16px;padding:1.1rem 1.3rem;margin-top:1.4rem;
  font-size:.95rem;line-height:1.65}
.formularkarte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-xl);
  padding:clamp(1.6rem,3vw,2.4rem);box-shadow:var(--schatten)}
.formularkarte h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-bottom:.4rem}
@media (max-width:1000px){.kontakt-netz{grid-template-columns:1fr}}

/* Abstaende bleiben wie vorher, nur der Hintergrund wechselt unter der Karte:
   die hellblaue Flaeche des Hero laeuft bis 100px in diesen Abschnitt hinein,
   die Vorteilskarte liegt also mit ihrem oberen Rand darauf. */
.hero{padding-bottom:clamp(1.6rem,3vw,2.6rem)}
.vorteilsband{padding-block:0;background:linear-gradient(to bottom,var(--grund) 84px,var(--weiss) 84px)}
.vorteilsband .vorteile{margin-top:clamp(3.4rem,6vw,5.4rem)}
.zeithinweis{font-size:.86rem;color:#8A97AB;line-height:1.55;margin:.9rem .85rem 0;padding-top:.9rem;border-top:1px solid var(--linie)}
.kostenkarte{background:var(--gruen-blass);border-radius:var(--r-xl);padding:clamp(1.6rem,2.6vw,2.1rem)}
.kostenkarte h3{margin-bottom:.6rem}
.kostenkarte .haken li b{font-weight:600}
.haken li b{font-weight:600}

/* Auf dem Handy bleibt Fliesstext bei mindestens 16px lesbar */
@media (max-width:720px){
  .karte p,.leistung p,.wirkkarte p,.schritt p,.vorteil p,.zitat p,.anliegen span,
  .wegkarte small,.kopfkarte p,.eck b,.standort-fuss small,.zeithinweis,.blase,.chat-eingabe input{font-size:1rem}
  .bildunter,.fussnote,.chat-fuss{font-size:.9rem}
}

/* Handy: die drei Fakten brechen um, sonst laeuft die Seite waagerecht ueber */
@media (max-width:560px){
  .fakten3{grid-template-columns:1fr 1fr;gap:1rem 1.2rem}
  .fakten3 b,.fakten3 small{white-space:normal}
  .auge{font-size:.9rem}
  .wortmarke span{font-size:.66rem;letter-spacing:.2em}
}

/* ══ Auf einen Blick: ruhige Liste statt Kachelraster ════ */
.eckliste{margin:1.2rem 0 0;display:grid;gap:0}
.eckliste>div{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;
  padding:.95rem 0;border-bottom:1px solid var(--linie)}
.eckliste>div:last-child{border-bottom:0}
.eckliste .sym{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;
  background:var(--gruen-blass);color:var(--gruen)}
.eckliste dt{font-size:1rem;font-weight:600;color:var(--tinte)}
.eckliste dd{margin:0;font-size:.96rem;font-weight:400;text-align:right;color:var(--text)}
/* In der blauen Variante bleibt <em> normal, nur die warme Variante macht daraus Serif-Kursiv */
h1 em,h2 em{font-style:normal}

/* ══ Hinweisleiste (Datenschutz) ═════════════════════════ */
.hinweisleiste{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:90;
  width:min(760px,calc(100vw - 32px));background:var(--weiss);border:1px solid var(--linie);
  border-radius:18px;box-shadow:var(--schatten-tief);padding:1.1rem 1.3rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.hinweisleiste[hidden]{display:none !important}
.hinweisleiste b{display:block;font-size:.98rem}
.hinweisleiste span{font-size:.88rem;color:var(--text);line-height:1.55;display:block;max-width:52ch}
.hinweisleiste a{color:var(--gruen)}
@media (max-width:720px){
  .hinweisleiste{bottom:84px;flex-direction:column;align-items:flex-start}
  .hinweisleiste .btn{width:100%}
}

/* Einwilligungs-Fenster: erste Ebene entscheidet, zweite erklaert */
.hinweisleiste{display:block}
.cb-haupt{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;flex-wrap:wrap}
.cb-tasten{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.cb-mehr{background:none;border:0;padding:.4rem .2rem;font:inherit;font-size:.86rem;
  color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.cb-mehr:hover{color:var(--gruen)}
.btn.rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1px var(--linie)}
.btn.rand:hover{background:var(--gruen-blass);box-shadow:inset 0 0 0 1px var(--gruen)}
.cb-detail{margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--linie)}
.cb-detail[hidden]{display:none !important}
.cb-zeile{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;
  padding:.75rem 0;border-bottom:1px solid var(--linie);cursor:pointer}
.cb-zeile:last-of-type{border-bottom:0}
.cb-zeile b{font-size:.92rem;display:block;margin-bottom:.15rem}
.cb-zeile small{font-size:.82rem;color:var(--text);line-height:1.55;display:block;max-width:60ch}
.cb-zeile input{width:19px;height:19px;margin-top:.2rem;accent-color:var(--gruen);flex-shrink:0}
.cb-zeile input:disabled{opacity:.5}
.cb-detail .btn{margin-top:.9rem}
.fusstaste{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left}
.fusstaste:hover{color:#fff;text-decoration:underline}
@media (max-width:720px){
  /* Mit offenen Einzelheiten ist der Kasten hoeher als ein Handy-Bildschirm.
     Deshalb begrenzen und im Kasten scrollen lassen, sonst laeuft er oben raus. */
  /* Solange die Entscheidung aussteht, tritt die Rufleiste zurueck. Das gibt dem
     Kasten die volle Hoehe, sonst waere der Speichern-Knopf angeschnitten. */
  body.cb-offen .rufleiste{display:none}
  body.cb-offen .hinweisleiste{bottom:16px}
  .hinweisleiste{max-height:calc(100vh - 104px);overflow-y:auto;-webkit-overflow-scrolling:touch}
  .cb-tasten{width:100%;flex-wrap:wrap}
  .cb-tasten .btn{flex:1 1 100%}
  .cb-mehr{order:3;width:100%;text-align:center;margin-top:.2rem}
}

/* Referenzen an der Praxiswand (Ueber uns, optional, seit 18.09.2026).
   Kopf links, Zitat rechts, darunter die Bilder als Wand in CSS-Spalten: jedes Foto behaelt
   sein Seitenverhaeltnis, deshalb kein leerer Rand (Sven 18.09.2026). */
.referenz-kopf{align-items:center;margin-bottom:clamp(2rem,4vw,3rem)}
.referenz-kopf h2{margin-bottom:.9rem}
.referenz-kopf>div>p:last-child{max-width:34rem;margin:0}
.referenz-zitat{margin:0;padding:clamp(1.4rem,2.6vw,2rem) clamp(1.6rem,3vw,2.4rem);background:var(--weiss);border-left:4px solid var(--gruen);border-radius:var(--r-l);box-shadow:var(--schatten)}
.referenz-zitat p{font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.35;color:var(--tinte);margin:0 0 .7rem}
.referenz-zitat cite{font-style:normal;font-size:.95rem;color:var(--text)}
.referenz-zitat mark{background:#E4F0C6;color:inherit;padding:0 .12em;border-radius:3px}
.referenzen{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem);align-items:start}
.referenzen .spalte{display:flex;flex-direction:column;gap:clamp(1rem,2vw,1.6rem)}
.referenz{margin:0;background:var(--weiss);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--schatten)}
.referenz img{width:100%;height:auto;display:block}
.referenz figcaption{padding:.9rem 1.1rem 1.1rem;font-size:.92rem;line-height:1.45;color:var(--tinte)}
@media (max-width:900px){.referenzen{display:block;columns:2;column-gap:clamp(1rem,2vw,1.6rem)}.referenzen .spalte{display:contents}
  .referenz{break-inside:avoid;margin-bottom:clamp(1rem,2vw,1.6rem)}}
@media (max-width:560px){.referenzen{columns:1}}