/* pflegekraft.click – Städteseiten · Variante „Emotionales Storytelling“ (Salbei, Gold, Elfenbein) */
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("../fonts/lora-latin-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
/* Ersatzschriften mit angeglichenen Maßen: Solange die Webfonts laden, nimmt der Text schon fast genau
   den gleichen Platz ein – beim Austausch springt nichts (gemessen an Georgia bzw. Arial). */
@font-face { font-family: "Lora Ersatz"; src: local("Georgia"); size-adjust: 104.98%; ascent-override: 96.2%; descent-override: 25.7%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans Ersatz"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 93.03%; ascent-override: 109.6%; descent-override: 43%; line-gap-override: 0%; }

:root {
  --elfenbein: #f8f4ec;
  --creme: #f1ebdf;
  --weiss: #fffdf9;
  --salbei: #8ca38e;
  --salbei-dunkel: #5f7a64;
  --gruen: #2e4636;
  --gruen-tief: #22362a;
  --gold: #c49a4f;
  --gold-dunkel: #a87f37;
  --text: #2b2a27;
  --grau: #6a6861;
  --linie: #e4dccd;
  --schatten: 0 10px 30px rgba(46, 70, 54, .10);
  --radius: 14px;
  --serif: "Lora", "Lora Ersatz", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Source Sans Ersatz", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--elfenbein); color: var(--text); font: 400 1.125rem/1.65 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gruen); text-underline-offset: 3px; }
a:hover { color: var(--gold-dunkel); }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; margin: 0 0 .6em; color: var(--gruen-tief); }
p { margin: 0 0 1.1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip { position: absolute; left: -999px; top: 0; background: var(--gold); color: #fff; padding: .6rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.wrap--schmal { max-width: 820px; }
.mitte { text-align: center; }
.klein { font-size: .9rem; color: var(--grau); }
.dachzeile { font: 600 .82rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dunkel); margin-bottom: .6rem; }
.dachzeile--hell { color: #f3dfb6; }
.titel { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
.titel--gross { font-size: clamp(2rem, 5vw, 3.2rem); }
.titel--hell { color: #fff; }
section { padding: clamp(3.5rem, 8vw, 6rem) 0; }

/* ---------- Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.4rem; border-radius: 999px; border: 2px solid transparent; font: 600 1.02rem/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s, background .2s, box-shadow .2s, color .2s; }
.knopf:hover { transform: translateY(-2px); }
.knopf--gross { min-height: 56px; padding: .9rem 1.8rem; font-size: 1.1rem; }
.knopf--gold { background: var(--gold); color: #fff; box-shadow: 0 8px 20px rgba(196, 154, 79, .35); }
.knopf--gold:hover { background: var(--gold-dunkel); color: #fff; }
.knopf--salbei { background: var(--salbei-dunkel); color: #fff; }
.knopf--salbei:hover { background: var(--gruen); color: #fff; }
.knopf--hell { background: #fff; color: var(--gruen); }
.knopf--hell:hover { color: var(--gold-dunkel); }
.knopf--rand { border-color: var(--gruen); color: var(--gruen); background: transparent; }
.knopf--rand-hell { border-color: rgba(255,255,255,.85); color: #fff; background: transparent; }
.knopf--rand-hell:hover { background: rgba(255,255,255,.12); color: #fff; }
.link-pfeil { font-weight: 600; text-decoration: none; }
.link-pfeil::after { content: " →"; transition: margin .2s; }
.link-pfeil:hover::after { margin-left: .3rem; }
.link-pfeil--hell { color: #fff; }

/* ---------- Kopf */
.kopf { position: sticky; top: 0; z-index: 50; background: var(--weiss); border-bottom: 1px solid var(--linie); transition: box-shadow .3s; }
.kopf.ist-gescrollt { box-shadow: 0 6px 20px rgba(0,0,0,.06); }
.kopf__innen { max-width: var(--max); margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; gap: 1.2rem; }
/* Logo: 315×97 px (mit Untertitel). Beim Scrollen wird der Untertitel weggewischt – übrig bleibt das
   Logo ohne Untertitel (315×85) – und rückt mittig. Die Kopfhöhe bleibt gleich, damit die Seite nicht springt. */
.logo { --logo-b: 190px; display: block; flex: none; width: var(--logo-b); text-decoration: none; }
.logo__rahmen { position: relative; display: block; width: 100%; aspect-ratio: 315 / 97; }
.logo__bild { position: absolute; top: 0; left: 0; width: 100%; height: auto; max-width: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 73% 100%, 73% 100%, 0 100%);
  transition: clip-path .35s ease, transform .35s ease, opacity .6s ease; }
/* Logo-Animation (erster Besuch): Video auf das Logo zugeschnitten, links etwas Platz fürs Hereingleiten.
   Der hellgraue Videohintergrund verschwindet per Aufhellen + Multiplizieren im hellen Kopf. */
.logo-intro .logo__bild { opacity: 0; }
.logo__film { position: absolute; top: 0; bottom: 0; left: -11%; right: 0; overflow: hidden; pointer-events: none;
  mix-blend-mode: multiply; transition: opacity .6s ease; }
/* Ausrichtung: Videologo (1280×720) bestmöglich auf das statische Logo gelegt – Faktor 3,15, Versatz 162/198 px */
.logo__film video { position: absolute; top: 0; left: 0; width: 116.22%; max-width: none; height: auto;
  margin: -17.98% 0 0 -4.8%; filter: brightness(1.07); }
.logo-intro-ende .logo__film { opacity: 0; }
.logo__text { font: 500 1.45rem/1 var(--serif); color: var(--gruen-tief); }
.logo__text span { color: var(--gold-dunkel); }
.logo__text--hell { color: #fff; }
.logo__herz { width: 15px; fill: var(--gold); margin-top: -2px; }
.nav { display: flex; gap: 1.2rem; margin-left: auto; }
.nav a { color: var(--text); text-decoration: none; font-size: .98rem; }
.nav a:hover { color: var(--gold-dunkel); }
.kopf__tel { display: flex; align-items: center; gap: .35rem; color: var(--gruen); font-weight: 600; text-decoration: none; white-space: nowrap; }
.kopf__tel svg { width: 18px; fill: currentColor; }
.kopf__cta { min-height: 42px; padding: .55rem 1.1rem; font-size: .95rem; }
@media (max-width: 1080px) { .nav { display: none; } .kopf__tel { margin-left: auto; } }
@media (max-width: 640px) { .kopf__tel span { display: none; } .kopf__cta { font-size: .85rem; padding: .5rem .9rem; white-space: nowrap; } .kopf__cta .lang { display: none; } .logo__text { font-size: 1.2rem; } .kopf__innen { gap: .9rem; } .logo { --logo-b: clamp(128px, 40vw, 156px); } }

/* ---------- Held / Hero */
.held { position: relative; min-height: min(88vh, 760px); display: flex; align-items: flex-end; padding: 0; color: #fff; overflow: hidden; background: var(--gruen); }
.held__bild { position: absolute; inset: 0; background: var(--bild, linear-gradient(135deg, #6f8a73, #2e4636)) center/cover no-repeat; }
.held__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,38,29,.82) 0%, rgba(25,38,29,.55) 45%, rgba(25,38,29,.1) 80%), linear-gradient(0deg, rgba(25,38,29,.55), transparent 45%); }
@media (max-width: 760px) { .held__bild { background-position: 72% center; background-image: var(--bild-klein, var(--bild, linear-gradient(135deg, #6f8a73, #2e4636))); } .held__bild::after { background: linear-gradient(0deg, rgba(25,38,29,.92) 10%, rgba(25,38,29,.45) 70%, rgba(25,38,29,.25)); } }
.held__innen { position: relative; max-width: var(--max); width: 100%; margin: 0 auto; padding: clamp(5rem, 12vw, 8rem) 16px clamp(2.5rem, 6vw, 4.5rem); }
.held__innen > * { max-width: 660px; }
.brot { font-size: .9rem; opacity: .9; margin-bottom: 1.2rem; }
.brot a { color: inherit; }
.seitenkopf .brot { color: var(--grau); }
.held__titel { color: #fff; font-size: clamp(2.3rem, 6vw, 4.1rem); margin-bottom: .3rem; animation: einfliegen .9s .1s both; }
.held__vor { display: block; }
.held__claim { font: italic 400 clamp(1.25rem, 2.6vw, 1.6rem)/1.3 var(--serif); color: #f3dfb6; animation: einfliegen .9s .25s both; }
.held__lead { font-size: 1.15rem; animation: einfliegen .9s .4s both; }
.held__knoepfe { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0; animation: einfliegen .9s .55s both; }
.held__innen > .held__siegel { max-width: none; }
.held__siegel { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .95rem; animation: einfliegen .9s .7s both; }
.held__siegel li { display: flex; align-items: center; gap: .35rem; }
.held__siegel svg { width: 20px; fill: var(--gold); background: #fff; border-radius: 50%; padding: 2px; }
@keyframes einfliegen { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- Fakten */
.fakten { padding: 0; position: relative; z-index: 2; }
.fakten__innen { max-width: var(--max); margin: -2.2rem auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.fakt { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.2rem 1.3rem; border-top: 4px solid var(--gold); }
.fakt__wert { display: block; white-space: nowrap; font: 600 clamp(1.5rem, 3vw, 2rem)/1.1 var(--serif); color: var(--gruen-tief); }
.fakt__label { display: block; margin-top: .3rem; font-weight: 600; line-height: 1.3; }
.fakt__quelle { display: block; font-size: .8rem; color: var(--grau); margin-top: .2rem; }
/* Kennzahlen-Diagramme (A: Ring 65+, B: Balken Pflegequote) */
.fakten__innen { grid-template-columns: .8fr .8fr 1.15fr 1.25fr; }
.fakt--diagramm { position: relative; margin: 0; }
.fakt { display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.2rem; }
.fakt__symbol { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f3e7cc; margin-bottom: .5rem; }
.fakt__symbol svg { width: 22px; height: 22px; fill: none; stroke: var(--gold-dunkel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fakt--ring { flex-direction: row; align-items: center; gap: 1rem; }
.fakt--ring figcaption { text-align: left !important; }
.fakt__titel { display: block; font-weight: 700; line-height: 1.25; margin: 0 0 .5rem; color: var(--gruen-tief); }
.ring { position: relative; flex: none; width: 92px; margin: 0; }
.ring svg { display: block; width: 100%; transform: rotate(0deg); }
.ring circle { fill: none; stroke-width: 6.5; }
.ring__rest { stroke: #e9e2d4; }
.ring__anteil { stroke: var(--gold); stroke-linecap: butt; }
.ring strong { position: absolute; inset: 0; display: grid; place-items: center; font: 600 1.15rem/1 var(--serif); color: var(--gruen-tief); }
.fakt--diagramm figcaption { text-align: center; }
.balken { list-style: none; margin: 0 0 .35rem; padding: 0; display: grid; gap: .3rem; }
.balken__zeile { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name wert" "spur spur"; column-gap: .5rem; row-gap: .15rem; font-size: .86rem; }
.balken__name { grid-area: name; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.balken__wert { grid-area: wert; font-weight: 700; color: var(--gruen-tief); }
.balken__spur { grid-area: spur; display: block; height: 9px; border-radius: 99px; background: #ece6da; overflow: hidden; }
.balken__spur span { display: block; height: 100%; border-radius: inherit; background: var(--salbei); }
.balken__zeile--kreis .balken__spur span { background: var(--gruen-tief); }
.balken__zeile--land .balken__spur span { background: var(--gold); }
@media (max-width: 860px) { .fakten__innen { grid-template-columns: repeat(2, 1fr); } .fakt--diagramm { grid-column: span 1; } }
@media (max-width: 560px) { .fakt--diagramm { grid-column: 1 / -1; } }

/* ---------- Zeitleiste (Scrollytelling) */
.tag .titel { text-align: center; margin-bottom: 2.6rem; }
.tag .dachzeile { text-align: center; }
.zeitleiste { list-style: none; margin: 0; padding: 0; position: relative; }
.zeitleiste__linie { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--linie); transform: translateX(-50%); }
.zeitleiste__linie span { display: block; width: 100%; height: var(--fortschritt, 0%); background: linear-gradient(var(--gold), var(--salbei-dunkel)); transition: height .15s linear; }
.station { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; position: relative; padding: 1.6rem 0; }
.station__punkt { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--weiss); border: 3px solid var(--linie); transform: translate(-50%, -50%); transition: border-color .4s, background .4s, transform .4s; }
.station.ist-aktiv .station__punkt { border-color: var(--gold); background: var(--gold); transform: translate(-50%, -50%) scale(1.25); }
.station__bild { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); background: var(--creme); aspect-ratio: 4/3; }
.station__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.station.ist-aktiv .station__bild img { transform: scale(1.04); }
.station__platzhalter { width: 100%; height: 100%; background: linear-gradient(135deg, #e9e1d1, #cfd9cf); }
.station__text { background: var(--weiss); border-radius: var(--radius); padding: 1.5rem 1.6rem; box-shadow: var(--schatten); }
.station__zeit { font: 600 .9rem/1 var(--sans); color: var(--gold-dunkel); letter-spacing: .06em; }
.station__text h3 { font-size: 1.35rem; margin: .4rem 0 .5rem; }
.station__text p { margin: 0; }
.station--rechts .station__bild { order: 2; }
@media (max-width: 760px) {
  .zeitleiste__linie { left: 9px; }
  .station { grid-template-columns: 1fr; gap: 1rem; padding-left: 2.2rem; }
  .station__punkt { left: 9px; top: 2.2rem; }
  .station--rechts .station__bild { order: 0; }
}

/* ---------- Erzählung */
.erzaehlung { background: var(--weiss); padding-bottom: clamp(2rem, 4vw, 2.8rem); }
.kosten { padding-top: clamp(2.2rem, 4.5vw, 3rem); }
.erzaehlung p { font-size: 1.15rem; }
.erzaehlung__erster::first-letter { float: left; font: 600 3.6rem/.9 var(--serif); color: var(--gold); margin: .3rem .55rem 0 0; }

/* ---------- Band */
.band { background: linear-gradient(120deg, var(--gold) 0%, #b98d43 100%); color: #fff; text-align: center; padding: clamp(2rem, 4vw, 2.8rem) 0; }
.band__zitat { font: italic 400 clamp(1.5rem, 3.4vw, 2.3rem)/1.35 var(--serif); margin-bottom: .6rem; }
.band__wer { opacity: .9; margin-bottom: 1.1rem; }

/* ---------- Kosten */
.kosten .titel, .kosten .dachzeile { text-align: center; }
/* Heim (gedämpft, grau) gegen Daheim (hervorgehoben, „Empfohlen“) */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin: 2rem 0; align-items: center; }
.karte { position: relative; background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); transition: transform .3s ease, box-shadow .3s ease; }
.karte:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(34, 54, 42, .18); }
.karte__bild { position: relative; }
.karte img { aspect-ratio: 16/9; object-fit: cover; width: 100%; display: block; }
.karte__kopf { padding: 1rem 1.5rem .9rem; text-align: center; }
.karte__kopf h3 { margin: 0; font: 600 1.45rem/1.2 var(--serif); }
.karte__kopf span { display: block; font-size: .92rem; margin-top: .15rem; }
.karte__text { padding: 1.3rem 1.6rem 1.6rem; }
.karte__betrag { font: 600 2.1rem/1.1 var(--serif); margin: 0; }
.karte__betrag small { font: 400 1rem var(--sans); color: var(--grau); }
.karte__hinweis { font-size: .88rem; color: var(--grau); }
.karte__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.karte__liste li { position: relative; padding-left: 1.8rem; }
.karte__liste li::before { position: absolute; left: 0; top: .05rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--sans); }
.karte__liste--minus li::before { content: "–"; background: #c94a3a; color: #fff; }
.karte__liste--plus li::before { content: "✓"; background: var(--salbei-dunkel); color: #fff; }
.karte--heim { background: #f1efeb; box-shadow: none; border: 1px solid #dcd8d1; color: #57544e; }
.karte--heim .karte__kopf { background: #d9d6d0; color: #4c4943; }
.karte--heim img { filter: grayscale(.85) brightness(.95); opacity: .85; }
.karte--heim .karte__betrag { color: #5f5b55; }
.karte--daheim { border: 3px solid var(--gruen-tief); box-shadow: 0 14px 34px rgba(34, 54, 42, .2); transform: scale(1.03); }
.karte--daheim:hover { transform: scale(1.03) translateY(-6px); box-shadow: 0 26px 50px rgba(34, 54, 42, .26); }
.karte__empfohlen { position: absolute; top: 14px; right: 14px; margin: 0; background: var(--gruen-tief); color: #f3d28f; font: 700 .82rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: .55rem .9rem; border-radius: 99px; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.karte--daheim .karte__kopf { color: var(--gruen-tief); }
.karte--daheim .karte__betrag { color: var(--gruen-tief); }
.karte__ersparnis { margin: 1.2rem 0 0; background: #f6e7c4; border: 1px solid #e8cf94; border-radius: 10px; padding: .8rem 1rem; text-align: center; font-weight: 600; color: var(--gruen-tief); }
.karte__ersparnis strong { color: var(--gold-dunkel); font-size: 1.15em; white-space: nowrap; }
/* Betrag wie mit einem Stift unterstrichen – zieht sich beim Sichtbarwerden durch */
.stift { position: relative; display: inline-block; }
.stift::after { content: ""; position: absolute; left: -4%; right: -4%; bottom: -.32em; height: .5em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c18-5 41-6 62-4 17 1 33 2 52-3M10 12c26-4 55-4 96-3' fill='none' stroke='%23c49a4f' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") left center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0); transition: clip-path .9s ease .3s; }
.ist-sichtbar .stift::after, html:not(.js) .stift::after { clip-path: inset(0 0 0 0); }
.karte__knopf { display: flex; width: fit-content; margin: 1.1rem auto 0; }
.rechner { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: clamp(1.3rem, 3vw, 2.2rem); margin: 0; }
.rechner__titel { font-size: 1.45rem; }
.rechner__wahl, .pillen { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.rechner__frage { margin: 0 0 .6rem; }
.pille { position: relative; }
.pille input { position: absolute; opacity: 0; inset: 0; }
.pille span { display: inline-block; padding: .55rem 1rem; border-radius: 999px; border: 2px solid var(--linie); background: var(--elfenbein); cursor: pointer; font-weight: 600; font-size: .98rem; transition: all .2s; }
.pille input:checked + span { background: var(--salbei-dunkel); border-color: var(--salbei-dunkel); color: #fff; }
.pille input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 2px; }
.rechner__tabelle { margin: 0 0 1rem; }
.rechner__tabelle div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: 1px dashed var(--linie); }
.rechner__tabelle dt { color: var(--grau); flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.rechner__tabelle dd { flex: none; margin: 0; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.rechner__summe { border-bottom: 2px solid var(--gruen) !important; }
.rechner__summe dt, .rechner__summe dd { color: var(--gruen-tief); font-weight: 700; font-size: 1.15rem; }
.rechner__diff dd { color: var(--gold-dunkel); font-size: 1.15rem; }
@media (max-width: 760px) { .vergleich { grid-template-columns: 1fr; } }

/* ---------- Kontaktband */
.kontaktband { background: var(--salbei-dunkel); color: #fff; }
/* Ansprechpartner: großes Hochformat-Foto links, das unten und rechts in den Hintergrund ausläuft */
.kontaktband { overflow: hidden; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
/* Foto im Kreis: so hoch wie der Textblock (Dachzeile bis Unterkante der Knöpfe, per JS gemessen),
   quadratische oder Hochformat-Fotos werden automatisch rund beschnitten */
.kontaktband__innen { display: grid; grid-template-columns: var(--kreis, 300px) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.kontaktband__foto { width: var(--kreis, 300px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0;
  border: 6px solid rgba(255,255,255,.22); box-shadow: 0 14px 36px rgba(0,0,0,.18); background: rgba(255,255,255,.1); }
.kontaktband__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block; }
.kontaktband__foto--team { border-radius: 24px; }   /* Teamfoto: abgerundetes Quadrat statt Kreis, damit niemand angeschnitten wird */
.kontaktband__foto--team img { object-position: center; }
.kontaktband__foto--leer { display: grid; place-items: end center; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.22), rgba(255,255,255,.06) 70%); }
.kontaktband__foto--leer svg { width: 72%; fill: rgba(255,255,255,.6); margin-bottom: -4%; }
.kontaktband__titel { font: 500 clamp(2rem, 4.2vw, 3.1rem)/1.12 var(--serif); color: #fff; margin: .2rem 0 .6rem; }
.kontaktband__rolle { color: rgba(255,255,255,.85); font-size: 1.08rem; margin: 0 0 1.1rem; }
.kontaktband__aussage { font-weight: 700; font-size: 1.15rem; line-height: 1.5; color: #fff; max-width: 34em; }
.kontaktband__unterschrift { font: 400 2.2rem/1.2 "Segoe Script", "Brush Script MT", "Snell Roundhand", cursive; color: #fff; margin: .4rem 0 0; opacity: .95; }
.kontaktband__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.knopf.ist-anzeige { cursor: default; }
.knopf.ist-anzeige:hover { transform: none; color: var(--gruen); }
/* In 5 Schritten zur Betreuung (im grünen Band) */
.schritte-band { background: var(--gruen-tief); color: #fff; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.schritte__titel { font: 500 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--serif); color: #fff; text-align: center; margin: 0 0 1.8rem; }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; counter-reset: schritt; }
.schritte::before { content: ""; position: absolute; left: 10%; right: 10%; top: 108px; border-top: 3px dotted rgba(255,255,255,.45); }
.js .schritte .schritt-kachel.einblenden { transition: opacity .6s ease calc(var(--i, 0) * 150ms), transform .6s ease calc(var(--i, 0) * 150ms); }
.schritte::before { transform-origin: left center; }
.js .schritte::before { transform: scaleX(0); transition: transform 1.2s ease .2s; }
.js .schritte:has(.ist-sichtbar)::before { transform: scaleX(1); }
.schritt-kachel__symbol { transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.schritt-kachel__symbol svg { transition: stroke .3s ease; }
.schritt-kachel__nr { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.schritt-kachel:hover .schritt-kachel__symbol { transform: translateY(-6px) scale(1.08); background: var(--gold); border-color: var(--gold); }
.schritt-kachel:hover .schritt-kachel__symbol svg, .schritt-kachel:hover .schritt-kachel__symbol .akzent { stroke: var(--gruen-tief); }
.schritt-kachel:hover .schritt-kachel__nr { transform: scale(1.18); }
.schritt-kachel__link { display: contents; color: inherit; text-decoration: none; }
.schritt-kachel:has(.schritt-kachel__link) { cursor: pointer; }
.schritt-kachel__link:focus-visible .schritt-kachel__symbol { outline: 3px solid var(--gold); outline-offset: 3px; }
.schritt-kachel { counter-increment: schritt; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; }
.schritt-kachel__symbol { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.schritt-kachel__symbol svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.schritt-kachel__symbol .akzent { stroke: #f3d28f; }
.schritt-kachel__nr { position: relative; z-index: 1; width: 40px; height: 40px; margin: .55rem 0 .5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #fff; font: 700 1.15rem/1 var(--sans); box-shadow: 0 0 0 5px var(--gruen-tief); }
.schritt-kachel strong { color: #fff; font: 700 1.15rem/1.2 var(--sans); }
.schritt-kachel > span:last-child { color: rgba(255,255,255,.85); font-size: .95rem; line-height: 1.35; max-width: 15em; }
@media (max-width: 860px) {
  .schritte { grid-template-columns: 1fr; gap: 1.1rem; max-width: 420px; margin: 0 auto; }
  .schritte::before { left: 41px; right: auto; top: 30px; bottom: 30px; border-top: 0; border-left: 3px dotted rgba(255,255,255,.45); }
  .js .schritte::before { transform: scaleY(0); transform-origin: center top; }
  .js .schritte:has(.ist-sichtbar)::before { transform: scaleY(1); }
  .schritt-kachel { display: grid; grid-template-columns: 84px 1fr; grid-template-rows: auto auto; column-gap: 1rem; text-align: left; align-items: center; }
  .schritt-kachel__symbol { grid-row: 1 / 3; width: 84px; height: 84px; background: var(--gruen-tief); box-shadow: inset 0 0 0 999px rgba(255,255,255,.14); }
  .schritt-kachel__nr { display: none; }
  .schritt-kachel strong::before { content: counter(schritt) ". "; color: #f3d28f; }
  .schritt-kachel > span:last-child { max-width: none; }
}

/* Karussell (Betreuungskräfte, Kundenstimmen): Scroll-Snap, Pfeile per JS */
.karussell { position: relative; margin-top: 1.6rem; }
.karussell__spur { list-style: none; margin: -14px -22px -10px; padding: 14px 22px 36px; scroll-padding-inline: 22px; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.2rem) / 3);
  gap: 1.2rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.karussell__spur::-webkit-scrollbar { display: none; }
.karussell__spur > li { scroll-snap-align: start; }
.karussell__spur:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: var(--radius); }
.karussell__knopf { position: absolute; top: 42%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss);
  box-shadow: var(--schatten); font: 400 2rem/1 var(--serif); color: var(--gruen-tief); cursor: pointer; display: grid; place-items: center; padding-bottom: 4px; transition: opacity .2s; }
.karussell__knopf--zurueck { left: -22px; }
.karussell__knopf--vor { right: -22px; }
.karussell__knopf[disabled] { opacity: 0; pointer-events: none; }
.karussell__hinweis { font-size: .82rem; color: var(--grau); text-align: center; margin: .2rem 0 0; }
@media (max-width: 960px) { .karussell__spur { grid-auto-columns: calc((100% - 1.2rem) / 2); } }
@media (max-width: 600px) { .karussell__spur { grid-auto-columns: 84%; } .karussell__knopf { display: none; } }

.kraefte-band, .stimmen { overflow-x: clip; }   /* Pfeile ragen über den Rand, ohne die Seite zu verbreitern */
.kraefte-band { background: var(--elfenbein); }
.kraefte-band .titel, .kraefte-band .dachzeile { text-align: center; }
.kraft-karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .2rem;
  transition: transform .35s ease, box-shadow .35s ease; }
.kraft-karte:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(46, 70, 54, .16); }
.kraft-karte__bild img { transition: transform .6s ease; }
.kraft-karte:hover .kraft-karte__bild img { transform: scale(1.05); }
/* Karten fliegen beim ersten Sichtbarwerden nacheinander ein */
.js .karussell--auto .kraft-karte { opacity: 0; translate: 0 24px; }
.js .karussell--auto.ist-sichtbar .kraft-karte { opacity: 1; translate: 0 0; transition: opacity .6s ease calc(var(--i, 0) * 90ms), translate .6s ease calc(var(--i, 0) * 90ms), transform .35s ease, box-shadow .35s ease; }
.kraft-karte__bild { aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--creme); margin-bottom: .7rem; }
.kraft-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kraft-karte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.kraft-karte__kopf strong { font: 600 1.35rem/1.2 var(--serif); color: var(--gruen-tief); }
.kraft-karte__sprachen { flex: none; display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--gruen-tief); }
.kraft-karte__sprachen b { margin-left: .15rem; }
.flagge { width: 22px; height: 15px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); overflow: hidden; }
.kraft-karte p { margin: 0; font-size: .95rem; line-height: 1.4; }
.kraft-karte__land { color: var(--grau); margin-bottom: .35rem !important; }
.kraft-karte__merkmal { align-self: flex-start; margin-top: .6rem; font-weight: 600; font-size: .85rem; background: #e7ede5; color: var(--gruen); border-radius: 6px; padding: .3rem .6rem; }

/* Kundenstimmen */
.stimmen { background: var(--creme); padding: clamp(2.2rem, 4.5vw, 3.2rem) 0 clamp(1.8rem, 3.5vw, 2.4rem); }
.stimmen .karussell { margin-top: 1rem; }
/* Erste Kachel: ProvenExpert-Siegel, ohne den im Bild eingebauten Rahmen, auf Kachelhöhe skaliert */
.stimme--siegel { position: relative; min-height: 220px; padding: 0; }
.stimme--siegel a { position: absolute; inset: .8rem; display: flex; align-items: center; justify-content: center; line-height: 0; }
.stimme--siegel img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; clip-path: inset(2px round 6px); }
/* Dezent, damit er nicht von der Anfrage ablenkt */
.stimmen__bewerten { text-align: center; margin: .4rem 0 0; }
.stimmen__bewerten a { display: inline-block; padding: .35rem 1rem; border: 1px solid var(--linie); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--grau); text-decoration: none; transition: color .2s, border-color .2s; }
.stimmen__bewerten a:hover { color: var(--gruen); border-color: var(--salbei); }
/* FAQ: eigener (weißer) Hintergrund, Überschrift mittig, so breit wie die drei Bewertungskarten */
.fragen { background: var(--weiss); padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; }
.fragen .titel { text-align: center; margin-bottom: 1.3rem; }
.stimme { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.5rem 1.4rem 1.2rem; display: flex; flex-direction: column; text-align: center; }
.stimme__sterne { color: var(--gold); font-size: 1.35rem; letter-spacing: .12em; }
.stimme__sterne span { color: #e2d9c6; }
.stimme blockquote { margin: .7rem 0 1rem; flex: 1; }
.stimme blockquote p { margin: 0; font-size: 1rem; line-height: 1.55; quotes: "„" "“"; }
.stimme blockquote p::before { content: open-quote; } .stimme blockquote p::after { content: close-quote; }
.stimme blockquote.ist-gekuerzt p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.stimme__mehr { background: none; border: 0; padding: 0; margin-top: .4rem; color: var(--gold-dunkel); font: 600 .9rem var(--sans); cursor: pointer; text-decoration: underline; }
.stimme__wer { margin: 0; color: var(--grau); font-size: .88rem; }
@media (max-width: 860px) { .kontaktband__innen { grid-template-columns: 1fr; gap: 1.2rem; text-align: center; } .kontaktband__foto { width: min(220px, 60vw); margin: 0 auto; } .kontaktband__aussage { margin-left: auto; margin-right: auto; } .kontaktband__knoepfe { justify-content: center; } }

/* ---------- Bewertungen */
.bewertungen__links { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ---------- Nachbarschaft / Karte */
.nachbarschaft { background: var(--creme); }
/* Nachbarschaft: Landesumriss mit Kreisgrenzen links, Ortsknöpfe rechts */
.nachbarschaft__kopf { text-align: center; max-width: 760px; margin: 0 auto; }
.nachbarschaft__kopf p:last-child { color: var(--grau); margin-top: .4rem; }
.nachbarschaft__grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 3rem; align-items: center; margin-top: 2rem; }
.landkarte { margin: 0; }
.landkarte__flaeche { position: relative; width: 100%; }
.landkarte__flaeche img, .landkarte__flaeche svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.landkarte__flaeche svg { overflow: visible; }
.landkarte__ort { fill: var(--gold); stroke: var(--weiss); stroke-width: 2; }
.landkarte__puls { fill: var(--gold); opacity: .35; transform-box: fill-box; transform-origin: center; animation: puls 2.4s ease-out infinite; }
@keyframes puls { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }
.landkarte__label { font: 500 21px var(--serif); fill: var(--salbei-dunkel); paint-order: stroke; stroke: var(--elfenbein); stroke-width: 5px; stroke-linejoin: round; }
/* Nachbarorte auf der Karte: tauchen nacheinander auf, Name erscheint beim Darüberfahren (auch über die Ortsknöpfe) */
.landkarte__nachbar { cursor: pointer; }
.landkarte__nb-punkt { fill: var(--salbei-dunkel); stroke: var(--weiss); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transition: transform .25s ease, fill .25s ease; }
.js .landkarte .landkarte__nb-punkt { transform: scale(0); }
.js .landkarte.ist-sichtbar .landkarte__nb-punkt { transform: scale(1); transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) calc(.4s + var(--i, 0) * 60ms), fill .25s ease; }
.landkarte__nb-name { font: 600 12px var(--sans); fill: var(--gruen-tief); text-anchor: middle; paint-order: stroke; stroke: var(--elfenbein); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.landkarte__nachbar:hover .landkarte__nb-punkt, .landkarte__nachbar:focus .landkarte__nb-punkt, .landkarte__nachbar.ist-aktiv .landkarte__nb-punkt { fill: var(--gold); transform: scale(1.7) !important; transition-delay: 0s !important; }
.landkarte__nachbar:hover .landkarte__nb-name, .landkarte__nachbar:focus .landkarte__nb-name, .landkarte__nachbar.ist-aktiv .landkarte__nb-name { opacity: 1; }
/* Mit JS übernimmt die oberste Ebene Punkt und Namen – so liegt der Name immer über allen Markern */
.js .landkarte__nachbar .landkarte__nb-name { opacity: 0 !important; }
.landkarte__oben { pointer-events: none; opacity: 0; transition: opacity .15s ease; }
.landkarte__oben.ist-aktiv { opacity: 1; }
.landkarte__oben circle { fill: var(--gold); stroke: var(--weiss); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; transform: scale(1.7); }
.landkarte__oben text { font: 700 13px var(--sans); fill: var(--gruen-tief); text-anchor: middle; paint-order: stroke; stroke: var(--weiss); stroke-width: 5px; stroke-linejoin: round; }
.ortsknoepfe a.ist-aktiv { border-color: var(--gold); background: var(--weiss); transform: translateY(-2px); }
.landkarte__quelle { position: absolute; left: 0; bottom: -1.4rem; font-size: .66rem; color: var(--grau); opacity: .8; white-space: nowrap; }
.landkarte__quelle a { color: inherit; }
.landkarte__pfeil { fill: none; stroke: var(--gold-dunkel); stroke-width: 1.6; stroke-linecap: round; }
.landkarte__spitze { fill: none; stroke: var(--gold-dunkel); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.landkarte figcaption { font-size: .75rem; color: var(--grau); margin-top: .6rem; text-align: center; }
.landkarte figcaption a { color: inherit; }
.ortsknoepfe { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ortsknoepfe a { display: flex; align-items: center; justify-content: center; min-height: 64px; height: 100%; padding: .6rem .7rem; text-align: center;
  background: rgba(255,253,249,.7); border: 1.5px solid #cfc6b5; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-weight: 700; font-size: .97rem; line-height: 1.2; color: var(--text); text-decoration: none; -webkit-hyphens: auto; hyphens: auto;
  transition: border-color .2s, background .2s, transform .2s; }
.ortsknoepfe a:hover { border-color: var(--gold); background: var(--weiss); transform: translateY(-2px); }
.nachbarschaft__orte .link-pfeil { display: inline-block; margin-top: .2rem; }
@media (max-width: 520px) { .ortsknoepfe { grid-template-columns: repeat(2, 1fr); } .ortsknoepfe a { min-height: 54px; } }
.ortsliste { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .5rem; }
.ortsliste a { display: flex; flex-direction: column; padding: .55rem .8rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; text-decoration: none; line-height: 1.25; transition: border-color .2s, transform .2s; }
.ortsliste a:hover { border-color: var(--gold); transform: translateY(-2px); }
.ortsliste span { font-weight: 600; color: var(--gruen-tief); }
.ortsliste small { color: var(--grau); font-size: .8rem; }
.ortsliste--kacheln { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (max-width: 860px) { .nachbarschaft__grid { grid-template-columns: 1fr; } }

/* ---------- FAQ */
/* FAQ: Kästen mit kräftiger Frage und quadratischem +/–-Knopf, anfangs alle geschlossen */
.akkordeon details { background: #fbf8f2; border: 1.5px solid #ddd5c6; border-radius: 8px; margin-bottom: .5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.akkordeon summary { cursor: pointer; padding: .85rem 4.2rem .85rem 1.3rem; font: 700 1.12rem/1.35 var(--sans); color: #1f1f1c; list-style: none; position: relative; }
.akkordeon summary::-webkit-details-marker { display: none; }
.akkordeon summary::after { content: "+"; position: absolute; right: 1rem; top: 50%; width: 32px; height: 32px; margin-top: -16px;
  display: grid; place-items: center; border: 1px solid #d6cdbb; border-radius: 5px; background: #efe8dc;
  font: 400 1.35rem/1 var(--sans); color: #3b3a35; transition: background .2s; }
.akkordeon details[open] summary::after { content: "–"; }
.akkordeon summary:hover::after { background: #e6dccb; }
.akkordeon summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.akkordeon details p { padding: 0 1.3rem 1.2rem; margin: 0; }

/* ---------- Anfrage */
.anfrage { background: linear-gradient(160deg, var(--salbei) 0%, var(--salbei-dunkel) 100%); color: #fff; padding: clamp(2rem, 4vw, 2.8rem) 0 clamp(1.8rem, 3.5vw, 2.4rem); }
.anfrage .titel, .anfrage .dachzeile { text-align: center; }
.anfrage__intro { text-align: center; }
.anfrage__alt { text-align: center; margin-top: 1.4rem; }
.anfrage__alt a { color: #fff; }
/* Formular wie eine Bedarfsanalyse: helle Karte, Fortschrittsbalken, Auswahlkacheln mit Piktogrammen */
.formular { background: #f3f1ec; color: var(--text); border-radius: 20px; padding: clamp(1.2rem, 3vw, 2.2rem); box-shadow: 0 20px 50px rgba(0,0,0,.18); text-align: center; }
.fortschritt { position: relative; height: 26px; border-radius: 99px; background: #e4e1d9; border: 1px solid #d8d3c7; overflow: hidden; margin: 0 0 1.6rem; }
.fortschritt__balken { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--salbei), #c6d8c3); transition: width .5s ease; }
.fortschritt__text { position: relative; display: block; font: 700 .8rem/26px var(--sans); color: var(--gruen-tief); mix-blend-mode: normal; }
.formular .schritt legend { display: block; width: 100%; font: 500 clamp(1.3rem, 2.6vw, 1.6rem)/1.25 var(--sans); color: var(--text); margin-bottom: 1.1rem; text-align: center; }
.formular__frage { font: 500 clamp(1.15rem, 2.4vw, 1.4rem)/1.3 var(--sans); margin: 1.6rem 0 1rem; }
.formular__frage small, .formular .schritt legend small { font-size: .8rem; color: var(--grau); }
.kacheln { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.kachel { position: relative; }
.kachel input { position: absolute; opacity: 0; inset: 0; }
.kachel__flaeche { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; width: 128px; min-height: 128px; padding: .9rem .6rem;
  background: #fff; border: 2px solid transparent; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.06); cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.kachel__flaeche:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.kachel__symbol { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #cfdccd; }
.kachel__symbol svg { width: 32px; height: 32px; fill: none; stroke: var(--gruen-tief); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.kachel__symbol .akzent { stroke: var(--gold-dunkel); }
.kachel__text { font-weight: 700; font-size: .92rem; line-height: 1.2; color: var(--text); max-width: 100%; hyphens: manual; overflow-wrap: anywhere; }
.feld--sonstiges { max-width: 560px; margin: 1rem auto 0; }
.feld--sonstiges[hidden] { display: none; }
.kachel input:checked + .kachel__flaeche { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,79,.25); }
.kachel input:checked + .kachel__flaeche .kachel__symbol { background: var(--salbei-dunkel); }
.kachel input:checked + .kachel__flaeche .kachel__symbol svg { stroke: #fff; }
.kachel input:focus-visible + .kachel__flaeche { outline: 3px solid var(--gold); outline-offset: 2px; }
.kacheln--drei { max-width: calc(3 * 128px + 2 * .8rem); margin-inline: auto; }   /* sechs Kacheln als 3 + 3 */
.kacheln--vier { max-width: calc(4 * 128px + 3 * .8rem); margin-inline: auto; }
/* Bedarf: zehn Kacheln als 2 Reihen à 5; die Kacheln teilen sich die Breite gleichmäßig (am Handy wie gewohnt umbrechend) */
@media (min-width: 561px) {
  .kacheln--fuenf { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: calc(5 * 128px + 4 * .8rem); margin-inline: auto; }
  .kacheln--fuenf .kachel__flaeche { width: 100%; }
}
.kacheln--klein { gap: .5rem; }
.kachel--klein .kachel__flaeche { width: auto; min-width: 74px; min-height: 0; padding: .7rem .8rem; }
.kachel--klein input:checked + .kachel__flaeche { background: var(--salbei-dunkel); border-color: var(--salbei-dunkel); }
.kachel--klein input:checked + .kachel__flaeche .kachel__text { color: #fff; }
.knopf--weiter { display: flex; width: 100%; margin-top: 1.8rem; border-radius: 8px; background: var(--gold); color: #fff; font-size: 1.1rem; min-height: 52px; box-shadow: 0 8px 20px rgba(196,154,79,.3); }
.knopf--weiter:hover { background: var(--gold-dunkel); color: #fff; transform: none; }
.knopf--zurueck { background: none; border: 0; color: var(--grau); text-decoration: underline; padding: .5rem .2rem; min-height: 0; }
/* Letzter Schritt: Absende-Knopf deutlich hervorgehoben – pulsierend, handschriftlich umkreist, klickende Hand */
.absenden { position: relative; flex: 1; display: flex; margin: 1.5rem 0 1.5rem .9rem; }
.knopf--absenden { position: relative; z-index: 1; flex: 1; font-size: 1.2rem; min-height: 58px; background-color: var(--gold-dunkel); background-image: none;
  box-shadow: 0 10px 24px rgba(168, 127, 55, .45); animation: absenden-puls 2.2s ease-out infinite; transition: background-color .35s ease, box-shadow .35s ease; }
/* Hover: ruhig zu Grün, Pulsieren pausiert; beim Klick sofort zurück zur Standardfarbe */
.knopf--absenden:hover { background-color: var(--salbei-dunkel); transform: none; animation-play-state: paused; box-shadow: 0 10px 24px rgba(46, 70, 54, .35); }
.knopf--absenden:active { background-color: var(--gold-dunkel); transition: none; }
@keyframes absenden-puls { 0% { box-shadow: 0 10px 24px rgba(168,127,55,.45), 0 0 0 0 rgba(196,154,79,.55); } 70% { box-shadow: 0 10px 24px rgba(168,127,55,.45), 0 0 0 16px rgba(196,154,79,0); } 100% { box-shadow: 0 10px 24px rgba(168,127,55,.45), 0 0 0 0 rgba(196,154,79,0); } }
.absenden__kringel { position: absolute; z-index: 2; left: -4%; top: -50%; width: 108%; height: 200%; pointer-events: none; overflow: visible; }
.absenden__kringel path { fill: none; stroke: var(--salbei-dunkel); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.schritt.aktiv .absenden__kringel path { animation: kringel 1.1s ease .5s forwards; }
@keyframes kringel { to { stroke-dashoffset: 0; } }
.absenden__hand { position: absolute; z-index: 2; right: 14%; bottom: -26px; width: 34px; height: 34px; pointer-events: none;
  fill: #fff; stroke: var(--gruen-tief); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.schritt.aktiv .absenden__hand { animation: hand-klick 2.2s ease-in-out 1.4s infinite; }
@keyframes hand-klick { 0%, 100% { transform: translate(14px, 14px); } 40% { transform: translate(0, 0); } 50% { transform: translate(0, 0) scale(.82); } 60% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) { .knopf--absenden, .schritt.aktiv .absenden__hand { animation: none !important; } .absenden__kringel path { stroke-dashoffset: 0; } }
.formular .formular__navi { align-items: center; flex-wrap: nowrap; margin-top: 1.4rem; }
.formular .formular__navi .knopf--weiter { margin-top: 0; width: auto; flex: 1; }
.formular .feld { text-align: left; color: var(--text); }
.formular .feld input, .formular .feld select, .formular .feld textarea { border: 2px solid #ddd8cd; }
.formular .haken { text-align: left; color: var(--text); }
.formular .haken a { color: var(--gruen); }
.formular .formular__meldung { color: #a2412f; }
.formular .formular__meldung.ok { color: var(--gruen); }
@media (max-width: 560px) { .kachel__flaeche { width: calc((100vw - 32px - 2.4rem - 1.6rem) / 3); min-width: 92px; min-height: 108px; } .kachel__text { font-size: .82rem; } .kachel__symbol { width: 44px; height: 44px; } }
.formular__falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__schritte { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.4rem; counter-reset: s; }
.formular__schritte li { flex: 1; text-align: center; font-size: .9rem; padding-top: .7rem; border-top: 4px solid rgba(255,255,255,.3); counter-increment: s; }
.formular__schritte li::before { content: counter(s) ". "; }
.formular__schritte li.aktiv, .formular__schritte li.fertig { border-color: var(--gold); font-weight: 600; }
.schritt { border: 0; padding: 0; margin: 0; }
.js .schritt { display: none; }
.js .schritt.aktiv { display: block; animation: einfliegen .5s both; }
.schritt legend { font: 500 1.35rem var(--serif); margin-bottom: 1rem; color: #fff; }
.feld { display: block; margin-bottom: 1rem; font-weight: 600; }
.feld input, .feld select, .feld textarea { display: block; width: 100%; margin-top: .35rem; padding: .75rem .9rem; border: 2px solid transparent; border-radius: 10px; font: 400 1.05rem var(--sans); color: var(--text); background: #fff; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--gold); outline: none; }
.feld--fehler input { border-color: #ffb4a8; }
/* Fehlende Pflichtangaben: dezent rot umrandet */
.formular .feld--fehler input, .formular .feld--fehler select, .formular .feld--fehler textarea { border-color: #d98a7e; box-shadow: 0 0 0 3px rgba(201, 74, 58, .12); }
.kacheln--fehler { outline: 2px solid #d98a7e; outline-offset: 8px; border-radius: 14px; box-shadow: 0 0 0 10px rgba(201, 74, 58, .06); }
.formular .haken--fehler { outline: 2px solid #d98a7e; outline-offset: 6px; border-radius: 8px; }
.feld__titel { font-weight: 600; margin-bottom: .5rem; }
.feldreihe { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.feldreihe .feld--plz { max-width: 160px; }
.pille--hell span { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.4); color: #fff; }
.pille--hell input:checked + span { background: #fff; color: var(--gruen); border-color: #fff; }
.haken { display: flex; gap: .7rem; align-items: flex-start; font-size: .95rem; margin: .4rem 0 1.2rem; }
.haken input { width: 22px; height: 22px; margin-top: .15rem; accent-color: var(--gold); flex: none; }
.haken a { color: #fff; }
.formular__navi { display: flex; justify-content: space-between; gap: .7rem; flex-wrap: wrap; margin-top: .5rem; }
.formular__meldung { margin: 1rem 0 0; font-weight: 600; color: #fff3d6; }
/* Erfolgsmeldung nach dem Absenden (ersetzt das Formular) */
.formular__erfolg { max-width: 640px; margin: 0 auto; background: var(--weiss); color: var(--text); border-radius: var(--radius); box-shadow: var(--schatten); padding: clamp(1.8rem, 4vw, 2.8rem); text-align: center; outline: none; animation: einfliegen .6s both; }
.erfolg__haken svg { width: 72px; height: 72px; fill: none; stroke: var(--salbei-dunkel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.erfolg__haken circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: erfolg-strich .7s .1s ease-out forwards; }
.erfolg__haken path { stroke: var(--gold); stroke-width: 4; stroke-dasharray: 40; stroke-dashoffset: 40; animation: erfolg-strich .45s .7s ease-out forwards; }
@keyframes erfolg-strich { to { stroke-dashoffset: 0; } }
.erfolg__titel { font: 500 clamp(1.6rem, 3.5vw, 2.1rem) var(--serif); color: var(--gruen-tief); margin: .8rem 0 .4rem; }
.erfolg__text { margin: 0 auto 1rem; max-width: 34em; }
.erfolg__foto { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; object-position: center 25%; display: block; flex: none; box-shadow: 0 0 0 4px var(--creme); }
.erfolg__foto--team { border-radius: 16px; object-position: center; }
/* Foto und die drei nächsten Schritte nebeneinander */
.erfolg__mitte { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin: .4rem auto 1.2rem; text-align: left; max-width: 520px; }
.erfolg__schritte { margin: 0; padding-left: 1.2rem; font-size: .98rem; }
.erfolg__schritte li { margin: .25rem 0; }
@media (max-width: 520px) { .erfolg__mitte { flex-direction: column; } }
/* Danke-Seite: dieselbe Karte in Formulargröße auf grünem Grund */
.danke { min-height: 60vh; padding: clamp(2.5rem, 6vw, 4rem) 0; }
.danke .erfolg__titel { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
.danke__zurueck { text-align: center; margin: 1.2rem 0 0; }
.danke__zurueck a { color: #fff; }
.erfolg__tel { margin: 0; font-weight: 600; }
.formular__meldung.ok { color: #fff; }
.budget { margin-top: .4rem; }
.budget .formular__frage { margin: 1.4rem 0 .8rem; }
.budget__regler { display: flex; align-items: center; gap: .8rem; }
.budget__knopf { flex: none; width: 38px; height: 38px; border: 0; border-radius: 8px; background: var(--salbei-dunkel); color: #fff; font: 600 1.4rem/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding-bottom: 2px; }
.budget__knopf:hover { background: var(--gruen); }
.budget__knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.budget__regler input[type=range] { flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; --p: 0%; }
.budget__regler input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--salbei) var(--p), #fff var(--p)); box-shadow: inset 0 0 0 1px #e2ddd2; }
.budget__regler input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--salbei) var(--p), #fff var(--p)); box-shadow: inset 0 0 0 1px #e2ddd2; }
.budget__regler input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: var(--salbei-dunkel); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.budget__regler input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--salbei-dunkel); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.budget__regler input[type=range]:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
.budget__wert { margin: .7rem 0 0; font-size: 1.05rem; color: var(--text); }
.budget__wert strong { color: var(--gruen); }
@media (max-width: 640px) { .feldreihe { grid-template-columns: 1fr; } .feldreihe .feld--plz { max-width: none; } }

/* ---------- Seitenkopf (Übersichten) */
.seitenkopf { background: linear-gradient(160deg, var(--creme), var(--elfenbein)); padding-top: 3.5rem; }
.seitenkopf__lead { font-size: 1.2rem; max-width: 760px; }
/* Bundesland-Seite: Text links, Kreiskarte rechts */
.seitenkopf__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.kreiskarte { position: relative; z-index: 6; margin: 0 0 1.4rem; transform-origin: center center; transition: transform .55s cubic-bezier(.3, 1.15, .45, 1); will-change: transform; }
/* Vergrößerte Karte: Kopfbereich tritt zurück */
.seitenkopf--land { position: relative; }
.seitenkopf--land::after { content: ""; position: fixed; inset: 0; z-index: 5; background: rgba(248, 244, 236, .9); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.seitenkopf--land.karte-gross::after { opacity: 1; }
.karte-gross .kreiskarte .landkarte__quelle { opacity: 0; }
.karte-gross .kreiskarte__kreis path { fill: #fffdf9; }
.karte-gross .kreiskarte__kreis:hover path { fill: #f3e7cc; }
.js .kreiskarte.einblenden { transition: opacity .8s ease, transform .55s cubic-bezier(.3, 1.15, .45, 1); }
.kreiskarte svg { display: block; width: 100%; height: auto; max-height: 460px; overflow: visible; }
.kreiskarte__kreis path { fill: rgba(255, 253, 249, .75); stroke: #a9b4a6; stroke-width: 1; stroke-linejoin: round; transition: fill .25s ease; }
.kreiskarte__kreis:hover path, .kreiskarte__kreis:focus path { fill: #f3e7cc; }
.kreiskarte__kreis { cursor: pointer; outline: none; }
.js .kreiskarte__kreis { opacity: 0; transition: opacity .5s ease calc(var(--i, 0) * 35ms); }
.js .kreiskarte.ist-sichtbar .kreiskarte__kreis, html:not(.js) .kreiskarte__kreis { opacity: 1; }
.kreiskarte__land { fill: none; stroke: var(--gold); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }
.kreiskarte__oben { pointer-events: none; opacity: 0; transition: opacity .2s ease; }
.kreiskarte__oben.ist-aktiv { opacity: 1; }
.kreiskarte__oben path { fill: var(--gold); fill-opacity: .92; stroke: var(--gruen-tief); stroke-width: .9; vector-effect: non-scaling-stroke; transform-box: view-box;
  transition: transform .4s cubic-bezier(.25, 1.3, .5, 1); filter: drop-shadow(0 6px 10px rgba(34, 54, 42, .35)); }
.kreiskarte__name { font: 700 15px var(--sans); fill: var(--gruen-tief); text-anchor: middle; paint-order: stroke; stroke: var(--weiss); stroke-width: 4px; stroke-linejoin: round; }
.kreiskarte__art { font: 600 10px var(--sans); fill: var(--gruen-tief); text-anchor: middle; paint-order: stroke; stroke: var(--weiss); stroke-width: 3px; stroke-linejoin: round; letter-spacing: .04em; }
.kreiskarte .landkarte__quelle { bottom: -1.2rem; }
@media (max-width: 860px) { .seitenkopf__raster { grid-template-columns: 1fr; } .kreiskarte { max-width: 460px; width: 100%; margin: 0 auto 1.6rem; } }
/* Kreisumrisse in der Ortsliste */
.verzeichnis__kreis h3 { display: flex; align-items: center; gap: .7rem; }
.verzeichnis__umriss { flex: none; width: 46px; height: 46px; }
.umriss__kreis { fill: #f3e7cc; stroke: var(--gold-dunkel); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.umriss__land { fill: rgba(255,253,249,.8); stroke: #c9c2b3; stroke-width: .8; vector-effect: non-scaling-stroke; }
.verzeichnis__umriss--land .umriss__kreis { fill: var(--gold); }
.seitenkopf--danke { min-height: 60vh; }
.danke__haken { width: 84px; height: 84px; border-radius: 50%; background: var(--salbei-dunkel); display: grid; place-items: center; margin: 0 auto 1.5rem; animation: einfliegen .6s both; }
.danke__haken svg { width: 46px; fill: #fff; }
.danke__schritte { text-align: left; max-width: 520px; margin: 1.5rem auto; }
.suche { display: flex; gap: .6rem; max-width: 560px; margin-top: 1.5rem; }
.suche input { flex: 1; padding: .8rem 1rem; border: 2px solid var(--linie); border-radius: 999px; font: 400 1.05rem var(--sans); }
.laenderkacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .8rem; padding-top: 0; }
@media (max-width: 960px) { .laenderkacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .laenderkacheln { grid-template-columns: 1fr; } }
.landkachel { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .75rem; row-gap: .1rem; align-items: center; min-height: 4.4rem; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: .75rem 1rem; text-decoration: none; color: var(--text); transition: transform .2s, border-color .2s, background .2s; }
.landkachel:hover, .landkachel:focus-visible { transform: translateY(-3px); background: #fff; }
.landkachel strong { font: 500 1.08rem/1.25 var(--serif); color: var(--gruen-tief); }
.landkachel span { font-size: .82rem; color: var(--grau); grid-column: 2; }
.landkachel .flagge { grid-row: 1 / 3; width: 36px; height: 24px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.landkachel strong { grid-column: 2; }
/* Übersicht: Bundesland-Wahl mit großer Deutschlandkarte */
.laenderwahl { background: linear-gradient(160deg, var(--creme), var(--elfenbein)); padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); }
.laenderwahl .titel, .laenderwahl .dachzeile { text-align: center; }
.deutschlandkarte { max-width: 540px; margin: 1.5rem auto 3rem; }
.deutschlandkarte svg { max-height: 680px; }
.deutschlandkarte .kreiskarte__kreis path { fill: #e7ede3; stroke: #93a091; stroke-width: 1.1; }
.deutschlandkarte .kreiskarte__kreis:hover path, .deutschlandkarte .kreiskarte__kreis:focus path { fill: #f3e7cc; }
.deutschlandkarte .kreiskarte__name { font-size: 17px; }
.deutschlandkarte .kreiskarte__art { font-size: 11px; }
.seite-start .kontaktband { background: var(--gruen); }
/* Kopfbereich mit Foto (Übersicht, Bundesländer) wie auf den Ortsseiten */
.held--seite { min-height: min(70vh, 620px); }
.suche--held input { border-color: transparent; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.seitenkopf--foto { color: #fff; padding: clamp(3.5rem, 8vw, 5.5rem) 0 clamp(1.5rem, 4vw, 2.5rem); background: var(--gruen); }
.seitenkopf__foto { position: absolute; inset: 0; overflow: hidden; }
.seitenkopf--foto > .wrap { position: relative; }
/* Foto links abgedunkelt für den Text, Mitte am klarsten, zur Karte hin bis zu 70 % ausgeblendet */
.seitenkopf--foto .held__bild::after { background: linear-gradient(90deg, rgba(25,38,29,.78) 0%, rgba(25,38,29,.5) 38%, rgba(25,38,29,.4) 52%, rgba(25,38,29,.7) 72%, rgba(25,38,29,.7) 100%); }
@media (max-width: 760px) { .seitenkopf--foto .held__bild::after { background: rgba(25,38,29,.72); } }
.seitenkopf--foto .brot, .seitenkopf--foto .seitenkopf__lead { color: #fff; }
.seitenkopf--foto .titel { color: #fff; animation: einfliegen .9s .1s both; }
.seitenkopf--foto .seitenkopf__lead strong { color: #f3dfb6; }
.seitenkopf--foto .kreiskarte__kreis path { fill: #fffdf9; stroke: #8d9a8b; }
.seitenkopf--foto .kreiskarte__oben path { fill-opacity: 1; }
.seitenkopf--foto .kreiskarte__kreis:hover path, .seitenkopf--foto .kreiskarte__kreis:focus path { fill: #f3e7cc; }
.seitenkopf--foto.karte-gross .kreiskarte__kreis path { fill: #fffdf9; }
.seitenkopf--foto.karte-gross .kreiskarte__kreis:hover path { fill: #f3e7cc; }
.seitenkopf--foto .landkarte__quelle, .seitenkopf--foto .landkarte__quelle a { color: rgba(255, 255, 255, .85); }
.verzeichnis__sprung { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: 2rem; font-size: .95rem; }
.verzeichnis__kreis { margin-bottom: 2rem; }
.verzeichnis__kreis h3 { font-size: 1.3rem; border-bottom: 2px solid var(--gold); padding-bottom: .3rem; }
.verzeichnis__kreis ul { list-style: none; padding: 0; columns: 4 180px; column-gap: 1.5rem; }
.verzeichnis__kreis li { break-inside: avoid; padding: .15rem 0; }
.land-top { padding-top: 50px; padding-bottom: 0; }

/* ---------- Fuß */
.fuss { background: var(--gruen-tief); color: rgba(255,255,255,.85); padding: 3.5rem 0 6rem; font-size: .98rem; }
.fuss__innen { max-width: var(--max); margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1.2fr 1.4fr 1fr; gap: 2.5rem; }
.fuss a { color: #fff; }
.fuss__titel { color: #f3dfb6; font: 600 .9rem var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.fuss__liste { list-style: none; padding: 0; margin: 0 0 1rem; }
.fuss__liste li { padding: .15rem 0; }
.fuss__liste--spalten { columns: 2; }
.fuss__recht { font-size: .9rem; opacity: .85; }
.fuss__logo { display: block; width: 210px; height: auto; margin: 0 0 1rem; }
.fuss__logolink { display: inline-block; }
/* Öffnungszeiten nur als Hinweis beim Darüberfahren/Fokus der Telefonnummer */
.fuss__tel { position: relative; display: inline-block; }
.fuss__zeiten { position: absolute; left: 0; bottom: calc(100% + 8px); white-space: nowrap; background: var(--gold); color: var(--gruen-tief); font-size: .85rem; font-weight: 600;
  padding: .35rem .7rem; border-radius: 6px; box-shadow: 0 6px 16px rgba(0,0,0,.25); opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .2s, transform .2s; }
.fuss__zeiten::after { content: ""; position: absolute; left: 18px; top: 100%; border: 6px solid transparent; border-top-color: var(--gold); }
.fuss__tel:hover .fuss__zeiten, .fuss__tel:focus-within .fuss__zeiten { opacity: 1; transform: none; }
.fuss__social-titel { margin: 1.6em 0 .6rem; font-size: .9rem; }   /* Leerzeile Abstand zu den AGB */
.fuss__social { list-style: none; display: flex; flex-wrap: wrap; gap: .55rem; padding: 0; margin: 0; }
.fuss__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); transition: background .2s, transform .2s; }
.fuss__social a:hover { background: var(--gold); transform: translateY(-2px); }
.fuss__social svg { width: 20px; height: 20px; fill: #fff; }
.fuss__social .linie { fill: none; stroke: #fff; stroke-width: 2; }
/* Siegel (eigene Versprechen) */
.fuss__siegel { max-width: var(--max); margin: 2.5rem auto 0; padding: 1.8rem 16px 0; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; }
.siegel { width: 112px; margin: 0; }
.siegel svg { display: block; width: 100%; }
.siegel__aussen { fill: none; stroke-width: 2.5; }
.siegel__innen { stroke-width: 1.2; }
.siegel__ring { font: 700 9.5px var(--sans); letter-spacing: .5px; }
.siegel__oben { font: 600 8.5px var(--sans); text-anchor: middle; }
.siegel__mitte { font: 700 17px var(--serif); text-anchor: middle; }
.siegel__mitte--lang { font-size: 10px; font-family: var(--sans); }
.siegel--hell .siegel__aussen { stroke: rgba(255,255,255,.85); }
.siegel--hell .siegel__innen { fill: rgba(255,255,255,.08); stroke: rgba(255,255,255,.5); }
.siegel--hell text { fill: #fff; }
.siegel--gold .siegel__aussen { stroke: var(--gold); }
.siegel--gold .siegel__innen { fill: var(--gold); stroke: #f3d28f; }
.siegel--gold .siegel__ring { fill: #f3d28f; }
.siegel--gold .siegel__oben, .siegel--gold .siegel__mitte { fill: var(--gruen-tief); }
.siegel--extern { width: auto; display: grid; place-items: center; }
.laenderkacheln__quelle { font-size: .78rem; color: var(--grau); text-align: center; margin: 1rem auto 0; }
.laenderkacheln__quelle a { color: inherit; }
@media (max-width: 860px) { .fuss__innen { grid-template-columns: 1fr; } }

/* ---------- Mobile CTA-Leiste */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: .5rem; padding: .6rem 12px calc(.6rem + env(safe-area-inset-bottom)); background: rgba(255,253,249,.97); box-shadow: 0 -6px 20px rgba(0,0,0,.08); transform: translateY(110%); transition: transform .35s; }
.leiste.ist-sichtbar { transform: none; }
/* Nach-oben-Knopf: rund, max. 40 px, weißes Dreieck; erscheint nach dem ersten Bildschirm, über der Leiste */
.nach-oben { position: fixed; right: 18px; bottom: 18px; z-index: 61; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gruen-tief); box-shadow: 0 6px 16px rgba(0,0,0,.22); opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s, bottom .35s ease, background .2s ease; }
.nach-oben svg { width: 18px; height: 18px; fill: #fff; margin-top: -2px; }
.nach-oben:hover, .nach-oben:focus-visible { background: var(--gold-dunkel); }
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 1080px) { .leiste.ist-sichtbar ~ .nach-oben { bottom: calc(76px + env(safe-area-inset-bottom)); } }   /* nur wo die Leiste angezeigt wird */
.leiste a { flex: 1; text-align: center; padding: .65rem .6rem; border-radius: 999px; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap; }
.leiste__tel { border: 2px solid var(--gruen); color: var(--gruen); flex: .6 !important; }
.leiste__cta { position: relative; overflow: hidden; background: var(--gold); color: #fff; transition: background-color .3s ease, transform .2s ease, box-shadow .3s ease; }
/* Hover: ruhiger Wechsel zu Grün mit Lichtreflex */
.leiste__cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s ease; }
.leiste__cta:hover, .leiste__cta:focus-visible { background: var(--salbei-dunkel); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(46, 70, 54, .3); }
.leiste__cta:hover::after, .leiste__cta:focus-visible::after { left: 120%; }
.leiste__cta:active { transform: none; }
.leiste__tel { transition: background-color .3s ease, color .3s ease; }
.leiste__tel:hover, .leiste__tel:focus-visible { background: var(--gruen); color: #fff; }
@media (min-width: 1081px) { .leiste { display: none; } }

/* ---------- Einblenden beim Scrollen */
.js .einblenden { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; }
.js .einblenden.ist-sichtbar { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .einblenden { opacity: 1; transform: none; }
}
@media print { .kopf, .leiste, .anfrage, .fuss { display: none; } }
main:focus { outline: none; }

/* ---------- Telefon-/Rückruf-Modul, 1:1 von www.pflegekraft.click (nexus.css, #tel-button) */
#tel-button { position: fixed; top: 131px; right: 0; z-index: 101; overflow: hidden; }   /* Original: 81px, hier 50px tiefer */
#tel-button a { background: url("../img/telefon-icon.png") right center no-repeat #666; opacity: .8; padding: 15px 20px; width: 10px; min-height: 20px; text-indent: -9999px; border-radius: 5px 0 0 5px;
  display: block; box-sizing: content-box; text-decoration: none; color: #fff; font: 300 28.9px/1.4em Arial, Helvetica, sans-serif; white-space: nowrap; transition: .5s linear; }
#tel-button a:hover, #tel-button a:focus-visible { padding: 15px 60px 15px 20px; width: 280px; text-indent: 0; }

/* ---------- Begriffskasten „24-Stunden-Pflege – viele Namen, eine Leistung“ */
.begriffe { padding: clamp(2rem, 4vw, 3rem) 0; }
.begriffe__kasten { background: #f6efdf; border: 1px solid #e6d6b2; border-left: 6px solid var(--gold); border-radius: var(--radius); padding: clamp(1.4rem, 3.5vw, 2.2rem); }
.begriffe__titel { font: 500 clamp(1.35rem, 3vw, 1.75rem)/1.25 var(--serif); color: var(--gruen-tief); margin: 0 0 .8rem; }
.begriffe__unter { font: 500 1.2rem var(--serif); color: var(--gruen-tief); margin: 1.4rem 0 .5rem; }
.begriffe__liste { list-style: none; padding: 0; margin: .4rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.begriffe__liste li { background: #fff; border: 1px solid #e6d6b2; border-radius: 999px; padding: .2rem .75rem; font-size: .92rem; font-weight: 600; color: var(--gruen); }
.begriffe__aufgaben { margin: 0 0 1rem; padding-left: 1.2rem; }
.begriffe__aufgaben li { margin: .25rem 0; }
.begriffe__hinweis { font-size: .95rem; color: var(--grau); margin: 0; }
/* Vertrauenshinweis unter dem Absenden-Knopf */
.formular__vertrauen { display: flex; gap: .6rem; align-items: flex-start; margin: 1rem 0 0; padding: .8rem 1rem; background: #eef3ec; border-radius: 10px; font-size: .9rem; color: var(--text); }
.formular__vertrauen svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--salbei-dunkel); stroke-width: 1.8; stroke-linejoin: round; }
.formular__vertrauen .haken { stroke: var(--gold); stroke-width: 2.2; stroke-linecap: round; }

/* ---------- Handgezeichneter Pfeil unter CTA-Buttons */
.cta-pfeil { position: relative; display: inline-block; margin-bottom: 4.2rem; }
.cta-pfeil__svg { position: absolute; left: 50%; top: 100%; width: 210px; height: auto; margin-top: 2px; transform: translateX(-50%); overflow: visible; pointer-events: none; color: var(--gold); }
.cta-pfeil__svg path { fill: none; stroke: var(--gold); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.cta-pfeil__linie { stroke-dasharray: 300; stroke-dashoffset: 300; }
.cta-pfeil__spitze { stroke-dasharray: 100; stroke-dashoffset: 100; }
.cta-pfeil__svg.ist-sichtbar .cta-pfeil__linie { animation: pfeil-zeichnen .8s .2s ease-out forwards; }
.cta-pfeil__svg.ist-sichtbar .cta-pfeil__spitze { animation: pfeil-zeichnen .3s .95s ease-out forwards; }
@keyframes pfeil-zeichnen { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .cta-pfeil__linie, .cta-pfeil__spitze { stroke-dashoffset: 0; animation: none !important; } }
.held__knoepfe { align-items: stretch; }
/* ---------- Exit-Intent */
.exit { position: fixed; inset: 0; z-index: 200; background: rgba(25, 38, 29, .55); display: grid; place-items: center; padding: 16px; animation: einfliegen .3s both; }
.exit__karte { position: relative; max-width: 440px; width: 100%; background: var(--weiss); border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 2rem 1.8rem 1.6rem; text-align: center; }
.exit__titel { font: 500 1.8rem var(--serif); color: var(--gruen-tief); margin: 0 0 .5rem; }
.exit__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin: 1.2rem 0 0; }
.exit__zu { position: absolute; top: .4rem; right: .6rem; border: 0; background: none; font-size: 1.8rem; line-height: 1; color: var(--grau); cursor: pointer; }
/* ---------- Danke-Seite / Erfolgsmeldung: Fragebogen-Button */
.danke__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.erfolg__fragebogen { margin: 1.2rem 0 0; }
.erfolg__fragebogen small { display: inline-block; margin-top: .4rem; color: var(--grau); }
#rechner { scroll-margin-top: 96px; }

/* ---------- „Kurz gesagt“ (Antwort zuerst – für Leser und KI-Assistenten) */
.kurz { padding: clamp(1.6rem, 3vw, 2.2rem) 0 0; }
.kurz__kasten { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); padding: 1.1rem 1.4rem; box-shadow: var(--schatten); }
.kurz__marke { font: 600 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dunkel); margin: 0 0 .4rem; }
.kurz__kasten ul { margin: 0; padding-left: 1.1rem; }
.kurz__kasten li { margin: .3rem 0; }

/* ---------- HTML-Sitemap */
.seitenkopf--sitemap { padding-bottom: 1.5rem; }
.sitemap__schnell { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0 0; }
.sitemap__schnell a { background: var(--weiss); border: 1px solid var(--linie); border-radius: 999px; padding: .25rem .8rem; font-size: .9rem; text-decoration: none; color: var(--gruen); }
.sitemap { padding-top: 1.5rem; padding-bottom: 3rem; }
.sitemap__allgemein { margin: 0 0 1.2rem; }
.sitemap__land { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); margin: 0 0 .6rem; scroll-margin-top: 96px; }
.sitemap__land > summary { cursor: pointer; padding: .9rem 1.2rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; list-style: none; }
.sitemap__land > summary::-webkit-details-marker { display: none; }
.sitemap__land > summary::after { content: "+"; font-weight: 700; color: var(--gold-dunkel); }
.sitemap__land[open] > summary::after { content: "–"; }
.sitemap__name { font: 500 1.2rem var(--serif); color: var(--gruen-tief); flex: 1; }
.sitemap__zahl { font-size: .85rem; color: var(--grau); }
.sitemap__landlink { margin: 0 1.2rem .6rem; font-weight: 600; }
.sitemap__kreis { padding: .4rem 1.2rem .8rem; border-top: 1px solid var(--linie); }
.sitemap__kreisname { font: 600 .95rem var(--sans); color: var(--gruen); margin: .4rem 0 .3rem; }
.sitemap__orte { list-style: none; margin: 0; padding: 0; columns: 4 11rem; column-gap: 1.2rem; font-size: .92rem; }
.sitemap__orte li { break-inside: avoid; padding: .1rem 0; }

/* Kopfbereich der Ortsseiten: vier Vorteile in 2 Reihen à 2 Spalten */
.held__siegel { display: grid; grid-template-columns: repeat(2, max-content); gap: .45rem 1.6rem; }
@media (max-width: 560px) { .held__siegel { grid-template-columns: 1fr; } }
/* „Kurz gesagt“ so breit wie die vier Infoboxen darüber */
.kurz__innen { max-width: var(--max); margin: 0 auto; padding: 0 16px; }

/* ---------- Cookie-Banner (Einwilligung) */
.einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; padding: 12px; pointer-events: none; }
.einwilligung[hidden] { display: none; }
.einwilligung__karte { pointer-events: auto; max-width: 760px; margin: 0 auto; background: var(--weiss); color: var(--text); border-radius: var(--radius); box-shadow: 0 -4px 30px rgba(0,0,0,.18), 0 10px 40px rgba(0,0,0,.2); border-top: 4px solid var(--gold); padding: 1.1rem 1.3rem 1rem; }
.einwilligung__titel { font: 500 1.2rem var(--serif); color: var(--gruen-tief); margin: 0 0 .3rem; }
.einwilligung__text { font-size: .9rem; margin: 0 0 .8rem; }
.einwilligung__optionen { display: grid; gap: .4rem; margin: 0 0 .9rem; font-size: .9rem; }
.einwilligung__optionen label { display: flex; gap: .5rem; align-items: flex-start; }
.einwilligung__optionen input { margin-top: .25rem; accent-color: var(--salbei-dunkel); }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; }
.einwilligung__knoepfe .knopf { min-height: 42px; padding: .5rem 1rem; font-size: .95rem; flex: 1 1 auto; }
/* ProvenExpert-Siegel: Ersatzlink, solange keine Einwilligung in externe Inhalte vorliegt */
.stimme--siegel img:not([src]) { display: none; }
.stimme__siegel-ersatz { display: flex; flex-direction: column; gap: .4rem; align-items: center; text-align: center; line-height: 1.4; font-size: .95rem; color: var(--gruen); padding: 1rem; }
.stimme__siegel-ersatz strong { font: 600 1.3rem var(--sans); color: var(--text); }
.stimme--siegel img[src] + .stimme__siegel-ersatz { display: none; }
.einwilligung__karte [hidden] { display: none !important; }
/* Städteseiten: Kopfbereich nur so hoch, dass die vier Infoboxen darunter ohne Scrollen sichtbar sind
   (Kopfleiste ca. 84 px + Infoboxen ca. 220 px unterhalb des Kopfbereichs) */
.held:not(.held--seite) { min-height: 0; }
/* wenig Abstand zur Menüleiste, mehr Luft zwischen den Vorteilen und den Infoboxen (die Boxen ragen 2,2rem in den Kopfbereich) */
.held:not(.held--seite) .held__innen { padding-top: clamp(1.4rem, 3vh, 2rem); padding-bottom: clamp(4rem, 7vh, 4.7rem); }
@media (max-height: 900px) and (min-width: 761px) {
  .held:not(.held--seite) .held__titel { font-size: clamp(2rem, 5vh, 3.2rem); margin-bottom: .1rem; }
  .held:not(.held--seite) .held__claim { font-size: 1.15rem; margin: 0 0 .3rem; }
  .held:not(.held--seite) .held__lead { font-size: 1.02rem; margin: 0 0 .2rem; }
  .held:not(.held--seite) .held__knoepfe { margin: .8rem 0; }
  .held:not(.held--seite) .brot { margin-bottom: .5rem; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .held:not(.held--seite) .held__claim { display: none; }
}
.kosten { overflow-x: clip; }   /* Pfeil unter dem Rechner-Button darf am Handy nicht über den Rand ragen */
/* Einheitlich auf allen Seiten: geringer Abstand zwischen Menüleiste und Seiteninhalt (wie auf den Städteseiten) */
.held--seite { min-height: 0; }
.held--seite .held__innen { padding-top: clamp(1.4rem, 3vh, 2rem); padding-bottom: clamp(3rem, 6vh, 4.5rem); }
.seitenkopf, .seitenkopf--foto { padding-top: clamp(1.4rem, 3vh, 2rem); }
.seitenkopf .brot { margin-bottom: .6rem; }
.seitenkopf--land .seitenkopf__raster { align-items: start; }
.danke { padding-top: clamp(1.4rem, 3vh, 2rem); }
/* ---------- Footer kompakter */
.fuss { padding: 2.2rem 0 1.4rem; }
@media (max-width: 760px) { .fuss { padding-bottom: 5.2rem; } }   /* Platz für die mobile Anruf-/Anfrage-Leiste */
.fuss__innen { gap: 1.2rem 2rem; }
.fuss__logo { width: 180px; margin: 0 0 .6rem; }
.fuss__marke p { margin: 0 0 .6rem; }
.fuss__titel { margin: 0 0 .5rem; }
.fuss__liste li { padding: .05rem 0; }
.fuss__recht { margin: .6rem 0 0; }   /* Impressum, Datenschutz … untereinander */
.fuss__social-titel { margin: 1rem 0 .4rem; }
.fuss__social a { width: 36px; height: 36px; }
.fuss__siegel { margin-top: 1.4rem; padding-top: 1.1rem; gap: 1rem; }
.siegel { width: 82px; }

/* Erste Kachel: ProvenExpert-Bewertungen wie das Karussell auf ProvenExpert (Logo, Gesamtnote, Teilnoten) */
.stimme--pe { padding: 1rem 1.1rem .8rem; text-align: left; gap: .6rem; }
.pe__logo { display: block; align-self: center; line-height: 0; }
.pe__logo img { display: block; width: 150px; height: auto; }
.pe { flex: 1; display: grid; }
.pe__karte { grid-area: 1 / 1; border: 1px solid #bdbdbd; border-radius: 6px; padding: .55rem .8rem .6rem; animation: pe-ein .45s ease; }
.pe__karte[hidden] { display: none; }
@keyframes pe-ein { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pe__karte { animation: none; } }
.pe__datum { margin: 0 0 .25rem; font-size: .88rem; color: var(--text); }
.pe__kopf { display: flex; align-items: center; justify-content: space-around; gap: .6rem; margin-bottom: .35rem; }
.pe__gesamt { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.pe__note { font-size: .82rem; font-weight: 700; color: var(--gold); }
.pe__urteil { font-size: 1.15rem; text-transform: uppercase; color: #4a4a4a; margin-top: .1rem; }
.pe__gesamt .pe__sterne { font-size: 1.35rem; }
.pe__empfehlung { display: flex; flex-direction: column; align-items: center; font-size: .88rem; color: var(--gold); line-height: 1.1; }
.pe__empfehlung svg { width: 40px; height: 40px; fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.pe__empfehlung .pe__haken { stroke: #1d9fc2; stroke-width: 4; }
.pe__noten { margin: 0; display: grid; gap: .1rem; }
.pe__noten div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .86rem; }
.pe__noten dt { color: var(--text); }
.pe__noten dd { margin: 0; display: flex; align-items: center; gap: .5rem; }
.pe__noten dd span:not(.pe__sterne) { color: var(--gold); min-width: 2.2em; text-align: right; }
.pe__noten .pe__sterne { font-size: 1rem; }
/* Sterne mit Teilfüllung: graue Reihe, darüber goldene Reihe in der Breite der Note */
.pe__sterne { position: relative; display: inline-block; line-height: 1; letter-spacing: .06em; color: #dcdcdc; }
.pe__sterne::before { content: "★★★★★"; }
.pe__sterne::after { content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--w); overflow: hidden; white-space: nowrap; color: var(--gold); }
.pe__fuss { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .9rem; }
.pe__fuss a { color: #1d9fc2; text-decoration: none; }
.pe__fuss a:hover { text-decoration: underline; }
.pe__punkte { display: flex; gap: .3rem; }
.pe__punkte button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: #d6d2c8; cursor: pointer; }
.pe__punkte button[aria-current="true"] { background: var(--gold); }

/* Formular: Ansprechpartnerin über dem Formular und Zusagen unter dem Absende-Knopf */
.anfrage__person { display: flex; align-items: center; gap: .9rem; margin: .2rem 0 1.1rem; padding: .7rem .9rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 12px; }
.anfrage__person img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid rgba(255,255,255,.8); }
.anfrage__person p { margin: 0; font-size: .95rem; line-height: 1.45; }
.formular__zusagen { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.1rem; font-size: .9rem; color: var(--text); }
.formular__zusagen li { display: flex; align-items: center; gap: .35rem; }
.formular__zusagen li::before { content: "✓"; color: var(--salbei-dunkel); font-weight: 700; }
.erfolg__mail { margin: -.2rem auto .9rem; max-width: 520px; font-size: .92rem; color: var(--grau); text-align: center; }
.formular .budget__regler input[type=range], .formular .budget__regler input[type=range]:focus { border: 0; padding: 0; box-shadow: none; border-radius: 0; background: transparent; width: auto; }
/* Kacheln mit Piktogramm: Symbol immer auf gleicher Höhe, Text beginnt in jeder Kachel auf derselben Linie (Platz für zwei Zeilen) */
.kachel:not(.kachel--klein) .kachel__flaeche { justify-content: flex-start; padding-top: 1rem; }
.kachel:not(.kachel--klein) .kachel__symbol { flex: none; }
.kachel:not(.kachel--klein) .kachel__text { display: block; min-height: 2.4em; }
/* Bedarf am Handy: 5 Reihen à 2 Kacheln statt 3 + 3 + 3 + 1 */
@media (max-width: 560px) {
  .kacheln--fuenf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .kacheln--fuenf .kachel__flaeche { width: 100%; min-height: 0; padding-bottom: .7rem; }
}

/* Kostenlose Pflegeberatung vor Ort: Pflegestützpunkte im Landkreis */
.beratung { background: var(--weiss); padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; border-top: 1px solid var(--linie); }
.beratung__kopf { max-width: 1000px; margin: 0 auto 1.4rem; text-align: center; }
.beratung__kopf p:last-child { color: var(--grau); }
.beratung__liste { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 1000px; }
.beratung__karte { display: flex; gap: .8rem; align-items: flex-start; background: var(--creme); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem; }
.beratung__symbol { flex: none; width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: #cfdccd; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linejoin: round; }
.beratung__name { font: 700 1rem/1.3 var(--sans); margin: 0 0 .3rem; color: var(--gruen-tief); }
.beratung__adresse { margin: 0 0 .4rem; font-size: .95rem; line-height: 1.45; }
.beratung__info { margin: 0; display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .9rem; color: var(--grau); }
.beratung__info a { color: var(--gruen); font-weight: 600; }
.beratung__mehr, .beratung__portal { text-align: center; max-width: 1000px; margin: 1rem auto 0; }
.beratung__quelle { text-align: center; font-size: .8rem; color: var(--grau); margin: 1rem auto 0; max-width: 1000px; }
.beratung__quelle a, .beratung__mehr a, .beratung__portal a { color: var(--gruen); }
.beratung__kopf strong { display: inline-block; margin-top: .35rem; color: var(--gruen-tief); }
/* Schritt 4: PLZ beginnt bündig mit der ersten, Ort endet bündig mit der letzten Kachel darunter (4 Kacheln à 128 px) */
.feldreihe--kacheln { max-width: calc(4 * 128px + 3 * .8rem); margin-inline: auto; }
.feldreihe--kacheln { grid-template-columns: 160px 1fr; }
@media (max-width: 640px) { .feldreihe--kacheln { grid-template-columns: 1fr; } }

/* Echte, anonymisierte Fallbeispiele aus der Region */
.faelle { background: var(--weiss); padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; }
.faelle__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.2rem; max-width: 1000px; margin: 1.2rem auto 0; }
.fall { position: relative; background: var(--creme); border: 1px solid var(--linie); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 1.3rem 1.4rem 1.1rem; }
.fall__marke { display: inline-block; margin: 0 0 .6rem; padding: .2rem .7rem; border-radius: 999px; background: var(--salbei-dunkel); color: #fff; font-size: .85rem; font-weight: 700; }
.fall__titel { font: 600 1.15rem/1.3 var(--serif); color: var(--gruen-tief); margin: 0 0 .25rem; }
.fall__meta { margin: 0 0 .7rem; font-size: .88rem; color: var(--grau); }
.fall p { margin: 0 0 .5rem; font-size: .97rem; line-height: 1.5; }
.fall__zitat { margin: .7rem 0 0; padding-left: .9rem; border-left: 2px solid var(--salbei); font-style: italic; }
.fall__zitat p { margin: 0; quotes: "„" "“"; }
.fall__zitat p::before { content: open-quote; } .fall__zitat p::after { content: close-quote; }
.faelle__hinweis { text-align: center; font-size: .82rem; color: var(--grau); margin: 1rem auto 0; max-width: 1000px; }
/* Weitere Anfrage-Knöpfe mit Pinsel-Pfeil (Schritte, Betreuungskräfte, Kundenstimmen, FAQ) */
.cta-zeile { text-align: center; margin: 1.8rem 0 0; }
.cta-zeile .cta-pfeil { margin-bottom: 3.6rem; }
.stimmen .cta-zeile { margin-top: .6rem; }
/* Pfeil zeigt auf die Mitte des Knopfs: Spitze liegt bei 12/270 der Pfeilbreite (210 px) → etwa 9 px vom linken Rand */
.cta-pfeil--mitte .cta-pfeil__svg { left: calc(50% - 9px); transform: none; }
.cta-zeile { overflow-x: clip; }
/* ProvenExpert-Kachel: Logo links, „Jetzt bewerten!“ rechts in einer Zeile */
.pe__kopf { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pe__kopf .pe__logo { align-self: center; }
.pe__kopf .pe__logo img { width: 120px; }
.pe__bewerten { flex: none; display: inline-block; padding: .25rem .75rem; border: 1px solid var(--linie); border-radius: 999px; font-size: .8rem; font-weight: 600; color: var(--grau); text-decoration: none; background: var(--weiss); transition: color .2s, border-color .2s; }
.pe__bewerten:hover { color: var(--gruen); border-color: var(--salbei); }

/* Vorteile direkt unter dem Kopfbereich: schlank, ragen wie zuvor die Infoboxen leicht in das Kopfbild */
.vorteile { padding: 0; position: relative; z-index: 2; }
.vorteile__innen { list-style: none; max-width: var(--max); margin: -2.2rem auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.vorteil { display: flex; align-items: flex-start; gap: .7rem; background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: .9rem 1rem; }
.vorteil__symbol { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #cfdccd; }
.vorteil__symbol svg { width: 21px; height: 21px; fill: none; stroke: var(--gruen-tief); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vorteil__titel { display: block; font-size: .98rem; line-height: 1.25; color: var(--gruen-tief); margin: .1rem 0 .2rem; }
.vorteil__text { display: block; font-size: .88rem; line-height: 1.4; color: var(--grau); }
@media (max-width: 860px) { .vorteile__innen { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .vorteile__innen { gap: .5rem; } .vorteil { align-items: center; gap: .5rem; padding: .6rem .65rem; } .vorteil__symbol { width: 32px; height: 32px; } .vorteil__symbol svg { width: 18px; height: 18px; } .vorteil__titel { font-size: .86rem; margin: 0; } .vorteil__text { display: none; } }
/* Zahlen zum Ort als eigener Abschnitt weiter unten (ohne Überlappung) */
.fakten--abschnitt { padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; background: var(--creme); }
.fakten--abschnitt .fakten__innen { margin-top: 1.2rem; }
/* Am Handy kein seitlicher Rückruf-Knopf – dort übernimmt die feste Leiste unten (Anrufen / Betreuung anfordern) */
@media (max-width: 767px) { #tel-button { display: none; } }

/* ============================================================ Leistungs-Kacheln (Seniorenbetreuung, Häusliche Pflege, Alltagsbegleitung) */
.leistungen { background: var(--elfenbein); padding: clamp(2.4rem, 5vw, 3.6rem) 0; }
.leistungen .titel { margin-bottom: 1.8rem; }
.leistungen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.leistung { --i: 0; }
.leistung:nth-child(2) { --i: 1; } .leistung:nth-child(3) { --i: 2; }
.js .leistung.einblenden { transition: opacity .6s ease calc(var(--i) * 140ms), transform .6s ease calc(var(--i) * 140ms); }
.leistung__link { display: flex; flex-direction: column; height: 100%; background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten);
  color: var(--text); text-decoration: none; border-bottom: 4px solid var(--gold); transition: transform .25s ease, box-shadow .25s ease; }
.leistung__link:hover, .leistung__link:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(46, 70, 54, .18); color: var(--text); }
.leistung__bild { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--creme); transition: transform .5s ease; }
.leistung__link:hover .leistung__bild { transform: scale(1.04); }
.leistung__text { display: flex; flex-direction: column; flex: 1; padding: 1.2rem 1.4rem 1.4rem; position: relative; background: var(--weiss); }
.leistung__titel { font-size: 1.35rem; margin: 0 0 .5rem; }
.leistung__titel span { display: block; font: 600 .8rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dunkel); margin-top: .25rem; }
.leistung__beschreibung { font-size: 1rem; line-height: 1.55; flex: 1; }
.leistung__mehr { align-self: flex-start; display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.1rem; padding: .45rem .5rem .45rem 1.15rem; border: 2px solid var(--gruen);
  border-radius: 999px; font: 700 .95rem/1 var(--sans); color: var(--gruen); background: transparent; transition: background .25s, color .25s, border-color .25s, box-shadow .25s; }
.leistung__pfeil { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gruen); color: #fff; transition: background .25s, transform .25s; }
.leistung__pfeil svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.leistung__link:hover .leistung__mehr, .leistung__link:focus-visible .leistung__mehr { background: var(--gold); border-color: var(--gold); color: #fff; box-shadow: 0 8px 20px rgba(196, 154, 79, .35); }
.leistung__link:hover .leistung__pfeil, .leistung__link:focus-visible .leistung__pfeil { background: #fff; color: var(--gold-dunkel); transform: translateX(3px); }

/* ============================================================ Ratgeberseiten */
.seitenkopf--ratgeber { padding-bottom: clamp(2rem, 4vw, 3rem); }
.ratgeber__kopf { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ratgeber__kopftext .dachzeile { margin-bottom: .3rem; }
.ratgeber__unter { font: italic 400 clamp(1.15rem, 2.2vw, 1.4rem)/1.35 var(--serif); color: var(--gold-dunkel); margin: -.2rem 0 .9rem; }
.ratgeber__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 1.4rem 0 .8rem; }
.ratgeber__tel { color: var(--gruen); text-decoration: none; }
.ratgeber__stand { font-size: .88rem; color: var(--grau); margin: 0; }
.ratgeber__bild { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); border-bottom: 5px solid var(--gold); background: var(--creme); }
.ratgeber__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.kurz--ratgeber { padding: 0; margin-top: -1rem; }
.kurz--ratgeber .kurz__kasten { box-shadow: 0 14px 34px rgba(34, 54, 42, .16); }
.ratgeber { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.4rem, 5vw, 3.4rem); }
.ratgeber__inhalt { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid var(--gruen); border-radius: 10px; padding: 1rem 1.4rem; margin-bottom: 2rem; }
.ratgeber__inhalt-titel { font: 600 .78rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dunkel); margin: 0 0 .4rem; }
.ratgeber__inhalt ol { margin: 0; padding-left: 1.3rem; columns: 2 260px; column-gap: 2rem; }
.ratgeber__inhalt li { margin: .2rem 0; break-inside: avoid; }
.ratgeber__abschnitt { padding: 0; margin: 0 0 2.2rem; scroll-margin-top: 110px; }
.ratgeber__abschnitt .titel { font-size: clamp(1.45rem, 3vw, 2rem); }
.ratgeber__liste { padding-left: 0; list-style: none; }
.ratgeber__liste li { position: relative; padding-left: 1.9rem; margin: .45rem 0; }
.ratgeber__liste li::before { content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--gruen)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23f3d28f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat; }
.ratgeber__tabelle { overflow-x: auto; margin: 1.2rem 0; border-radius: 10px; box-shadow: var(--schatten); background: var(--weiss); }
.ratgeber__tabelle table { width: 100%; border-collapse: collapse; font-size: 1rem; min-width: 520px; }
.ratgeber__tabelle th, .ratgeber__tabelle td { text-align: left; vertical-align: top; padding: .75rem 1rem; border-bottom: 1px solid var(--linie); }
.ratgeber__tabelle thead th { background: var(--gruen-tief); color: #fff; font-weight: 600; }
.ratgeber__tabelle thead th:nth-child(2) { color: #f3d28f; }
.ratgeber__tabelle tbody th { font-weight: 700; color: var(--gruen-tief); background: #fbf8f2; width: 28%; }
.ratgeber__tabelle tbody tr:last-child > * { border-bottom: 0; }
.ratgeber__hinweis { background: #f6e7c4; border: 1px solid #e8cf94; border-radius: 10px; padding: .8rem 1.1rem; font-size: 1rem; }
.ratgeber .cta-zeile { margin: 0 0 2.6rem; }
.ratgeber__orte { font-size: .95rem; line-height: 1.8; color: var(--grau); border-top: 1px solid var(--linie); padding-top: 1.2rem; margin: 2rem 0 0; }
@media (max-width: 860px) {
  .ratgeber__kopf { grid-template-columns: 1fr; }
  .ratgeber__bild { order: -1; }
  .kurz--ratgeber { margin-top: -3rem; }
}
@media (max-width: 760px) { .leistungen__liste { grid-template-columns: minmax(0, 420px); } }
.leistungen__liste--2 { max-width: 780px; margin: 0 auto; }

/* ============================================================ Kopf: Siegelleiste (ProvenExpert + SSL), wird beim Scrollen unter die Bildschirmkante zum Anfrage-Knopf (nur Desktop) */
.kopf__aktion { position: relative; display: flex; justify-content: flex-end; align-items: center; flex: none; }
.kopf__siegel { display: none; }
@media (min-width: 900px) {
  .js .kopf__aktion { min-width: var(--siegel-b, 300px); }
  .js .kopf__siegel { --cta-b: 220px; position: absolute; right: 0; top: 50%; z-index: 2; display: flex; align-items: center; gap: .7rem; height: 50px; padding: 0 .9rem 0 .35rem;
    transform: translateY(-50%); background: #fff; border: 1.5px solid var(--linie); border-radius: 999px; box-shadow: 0 4px 14px rgba(46, 70, 54, .08); white-space: nowrap;
    clip-path: inset(0 0 0 0 round 999px);
    transition: clip-path .55s cubic-bezier(.65, 0, .35, 1), background-color .45s ease .1s, border-color .45s ease, opacity .25s ease .5s, visibility 0s linear .75s; }
  .kopf__siegel-teil { display: flex; align-items: center; gap: .4rem; color: var(--text); text-decoration: none; transition: opacity .25s ease, transform .4s ease; }
  .kopf__siegel-teil + .kopf__siegel-teil { padding-left: .7rem; border-left: 1px solid var(--linie); }
  a.kopf__siegel-teil:hover { color: var(--gruen); }
  .kopf__siegel-bild { width: 38px; height: 38px; flex: none; }
  .kopf__siegel-teil > span { display: flex; flex-direction: column; line-height: 1.12; }
  .kopf__siegel-teil b { font: 700 .74rem/1.15 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gruen-tief); }
  .kopf__siegel-teil small { font-size: .74rem; color: var(--grau); }
  .js .kopf__aktion .kopf__cta { opacity: 0; transform: scale(.85); pointer-events: none; transition: opacity .3s ease .35s, transform .45s cubic-bezier(.3, 1.4, .5, 1) .35s, background .2s, box-shadow .2s; }
  /* unterhalb der Bildschirmkante: Leiste schrumpft auf Knopfgröße, färbt sich gold, der Knopf erscheint */
  .js .kopf.siegel-weg .kopf__siegel { clip-path: inset(4px 0 4px calc(100% - var(--cta-b)) round 999px); background-color: var(--gold); border-color: var(--gold); opacity: 0; visibility: hidden; pointer-events: none;
    transition: clip-path .55s cubic-bezier(.65, 0, .35, 1), background-color .35s ease, border-color .35s ease, opacity .2s ease .5s, visibility 0s linear .7s; }
  .js .kopf.siegel-weg .kopf__siegel-teil { opacity: 0; transform: translateX(14px); }
  .js .kopf.siegel-weg .kopf__aktion .kopf__cta { opacity: 1; transform: none; pointer-events: auto; }
  .js .kopf.siegel-weg .kopf__aktion .kopf__cta:hover { transform: translateY(-2px); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .js .kopf__siegel, .js .kopf.siegel-weg .kopf__siegel, .kopf__siegel-teil, .js .kopf__aktion .kopf__cta { transition: none !important; }
}
.nav a { white-space: nowrap; }
@media (min-width: 900px) {
  .js .kopf__siegel { height: 46px; gap: .55rem; padding: 0 .8rem 0 .3rem; }
  .kopf__siegel-teil + .kopf__siegel-teil { padding-left: .55rem; }
  .kopf__siegel-bild { width: 34px; height: 34px; }
  .kopf__siegel-teil b { font-size: .68rem; letter-spacing: .04em; }
  .kopf__siegel-teil small { font-size: .7rem; }
}
@media (min-width: 1081px) and (max-width: 1239px) { .kopf__innen { gap: .9rem; } .nav { gap: .85rem; } .nav a { font-size: .92rem; } }
@media (min-width: 1081px) and (max-width: 1239px) { .kopf__siegel-teil small { display: none; } }
.ratgeber__stand { line-height: 1.6; }
/* Footer: vierte Spalte „Rechtliches“ (Impressum, Datenschutz, AGB, Sitemap, Cookies, Social Media) */
.fuss__innen { grid-template-columns: 1.3fr 1.75fr 1.05fr .85fr; }
.fuss__liste--spalten { column-gap: 1.2rem; }
@media (min-width: 1081px) { .fuss__liste--spalten li { white-space: nowrap; } }
.fuss__recht { font-size: inherit; opacity: 1; margin: 0; }
.fuss__social-titel { margin: 1.1rem 0 .5rem; }
@media (max-width: 1080px) { .fuss__innen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .fuss__innen { grid-template-columns: 1fr; } }
/* Ratgeberseiten: Kopf wie die Übersicht (seitenbreites Foto, H1 › Teaser › Anfrage › Anruf) */
.held--ratgeber .held__titel { font-size: clamp(2.2rem, 5.4vw, 3.8rem); }
.held--ratgeber .held__lead { max-width: 600px; }
.held--ratgeber .held__lead strong { color: #f3dfb6; }
.held__tel { width: 20px; height: 20px; fill: currentColor; flex: none; }
.held--ratgeber .ratgeber__stand { color: rgba(255, 255, 255, .78); font-size: .85rem; margin: 0; animation: einfliegen .9s .7s both; }
.held--ratgeber .ratgeber__stand time { color: inherit; }
/* H1 im Kopf einzeilig (Orts- und Ratgeberseiten, ab Tablet): Schriftgröße richtet sich nach der Zeichenzahl (--zeichen),
   damit auch der längste Ortsname in eine Zeile passt; kurze Titel bleiben groß */
@media (min-width: 761px) {
  .held__innen > .held__titel--zeile { max-width: none; }
  .held .held__innen > .held__titel--zeile { white-space: nowrap; font-size: min(var(--h1-max, 3.6rem), calc((min(100vw, var(--max)) - 56px) / (var(--zeichen, 30) * .56))); }
  .held__titel--zeile .held__vor { display: inline; }
  .held:not(.held--seite) .held__titel--zeile { --h1-max: clamp(2rem, 6.5vh, 3.4rem); }
}
/* „Kurz gesagt“ ragt wie die Vorteils-Kacheln der Ortsseiten in den Kopf */
.held--ratgeber .held__innen { padding-bottom: calc(clamp(3rem, 6vh, 4.5rem) + 3rem); }
.kurz--ratgeber { position: relative; z-index: 2; margin-top: -4.2rem; }
.kurz--ratgeber .kurz__innen { max-width: 820px; }   /* so breit wie das Inhaltsverzeichnis darunter (wrap--schmal) */
/* Städteseiten am Desktop: H1 höchstens bis zur Mitte der dritten Vorteils-Kachel (2,5 von 4 Kacheln = 62,5 % der Breite),
   damit das Motiv rechts im Foto frei bleibt; die Schriftgröße passt sich je Ortsname daran an */
@media (min-width: 1081px) {
  .held:not(.held--seite) .held__innen > .held__titel--zeile { max-width: 62.5%;
    font-size: min(var(--h1-max, 3.4rem), calc((min(100vw, var(--max)) - 48px) * .625 / (var(--zeichen, 30) * .5))); }
}

/* ============================================================ Footer: linke Spalte (Claim, Adresse, geprüfte Qualität) */
.fuss__claim { line-height: 1.5; }
.fuss__zwischentitel { margin: 1rem 0 .3rem !important; font-weight: 700; color: #fff; font-size: 1.02rem; }
.fuss__adresse { line-height: 1.55; }
.fuss__qualitaet { display: flex; flex-wrap: wrap; gap: .7rem 1.1rem; margin-top: .5rem; }
.fuss__guetesiegel { display: flex; align-items: center; gap: .5rem; color: #fff; text-decoration: none; }
a.fuss__guetesiegel:hover { color: #f3dfb6; }
.fuss__guetesiegel svg { width: 44px; height: 44px; flex: none; }
.fuss__guetesiegel span { display: flex; flex-direction: column; line-height: 1.15; }
.fuss__guetesiegel b { font: 700 .76rem/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.fuss__guetesiegel small { font-size: .78rem; opacity: .8; }

/* Footer: Social-Buttons quadratisch mit runden Ecken, einheitlich gold wie die Knöpfe der Seite, mittig auf der Oberkante (halb im Bereich darüber) */
.fuss { position: relative; padding-top: 3.6rem; }
.fuss ul.fuss__social { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.fuss .fuss__social a { width: 46px; height: 46px; border-radius: 7px; display: grid; place-items: center; border: 0; background: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); transition: transform .2s, box-shadow .2s, background .2s; }
.fuss .fuss__social a:hover, .fuss .fuss__social a:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .25); background: var(--gold-dunkel); }
.fuss .fuss__social svg { width: 22px; height: 22px; fill: #fff; }
.fuss .fuss__social .linie { fill: none; stroke: #fff; stroke-width: 2; }
/* Footer: Copyright-Leiste ganz unten, farblich abgesetzt (nur Desktop/Tablet) */
.fuss__copyright { margin: 1.6rem 0 -1.4rem; padding: 1.1rem 16px; background: var(--salbei-dunkel); color: #fff; text-align: center; font-size: .95rem; }
.fuss__copyright strong { font-weight: 700; }
@media (max-width: 760px) { .fuss__copyright { display: none; } }
/* Footer platzsparend: die vier Siegel sitzen innerhalb des Rasters direkt unter Bundesländer/Service/Rechtliches,
   die linke Spalte (Logo, Adresse, geprüfte Qualität) läuft daneben über beide Zeilen */
.fuss__innen > .fuss__siegel { grid-column: 1 / -1; max-width: none; margin: .4rem 0 0; padding: 1.1rem 0 0; }
@media (min-width: 1081px) {
  .fuss__innen { align-items: start; row-gap: 0; }
  .fuss__innen > .fuss__marke { grid-row: 1 / span 2; }
  .fuss__innen > .fuss__siegel { grid-column: 2 / -1; justify-content: flex-start; gap: 1.2rem; margin-top: 1.4rem; }
}
@media (max-width: 860px) {
  .fuss__innen { grid-template-columns: 1fr 1fr; gap: 1.2rem 1.4rem; }
  .fuss__innen > .fuss__marke, .fuss__innen > .fuss__spalte--laender { grid-column: 1 / -1; }
  .fuss__innen > .fuss__siegel { gap: .6rem; }
  .fuss__innen > .fuss__siegel .siegel { width: 72px; }
}
@media (max-width: 360px) { .fuss__innen > .fuss__siegel .siegel { width: 64px; } }
/* Desktop: je ein Siegel unter jeder Linkspalte (Bundesländer links/rechts, Service, Rechtliches) – über ein Subgrid,
   das die Spalten des Footers übernimmt; das zweite Siegel steht unter der zweiten Bundesländer-Spalte */
@media (min-width: 1081px) {
  @supports (grid-template-columns: subgrid) {
    .fuss__innen > .fuss__siegel { display: grid; grid-template-columns: subgrid; column-gap: normal; align-items: start; }
    .fuss__innen > .fuss__siegel > .siegel { justify-self: start; grid-row: 1; }
    .fuss__innen > .fuss__siegel > .siegel:nth-child(1) { grid-column: 1; }
    .fuss__innen > .fuss__siegel > .siegel:nth-child(2) { grid-column: 1; margin-left: calc(50% + .6rem); }
    .fuss__innen > .fuss__siegel > .siegel:nth-child(3) { grid-column: 2; }
    .fuss__innen > .fuss__siegel > .siegel:nth-child(4) { grid-column: 3; }
    .fuss__innen > .fuss__siegel > .siegel--extern { grid-row: auto; grid-column: auto; }
  }
}
/* Siegel ohne Trennlinie darüber und größer */
.fuss__innen > .fuss__siegel { border-top: 0; padding-top: 0; }
@media (min-width: 861px) { .fuss__innen > .fuss__siegel .siegel { width: 128px; } }
/* Social-Buttons dezent: weiß mit grünem Symbol, kleiner und mit leichtem Schatten, damit sie nicht vom Formular-Knopf ablenken */
.fuss ul.fuss__social { gap: .55rem; }
.fuss .fuss__social a { width: 40px; height: 40px; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.fuss .fuss__social svg { width: 19px; height: 19px; fill: var(--gruen); }
.fuss .fuss__social .linie { stroke: var(--gruen); }
.fuss .fuss__social a:hover, .fuss .fuss__social a:focus-visible { background: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0, 0, 0, .16); }
.fuss .fuss__social a:hover svg, .fuss .fuss__social a:focus-visible svg { fill: var(--gold-dunkel); }
.fuss .fuss__social a:hover .linie { stroke: var(--gold-dunkel); fill: none; }

/* ============================================================ Hauptmenü der ganzen Domain (Desktop: Leiste mit Untermenüs, Handy/Tablet: Burger-Menü) */
.nav { gap: 0; }
.nav__liste { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .1rem; }
.nav__punkt { position: relative; }
.nav .nav__punkt > a { display: block; padding: .55rem .55rem; color: var(--text); text-decoration: none; font-size: .95rem; white-space: nowrap; }
.nav .nav__punkt > a:hover, .nav .nav__punkt.ist-aktiv > a { color: var(--gruen); }
.nav .nav__punkt.ist-aktiv > a { box-shadow: inset 0 -2px 0 var(--gold); }
.nav__punkt--mehr > a::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .4em; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-.25em) rotate(45deg); opacity: .7; }
.nav__unter { position: absolute; top: 100%; left: -.4rem; min-width: 250px; list-style: none; margin: 0; padding: .45rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(34, 54, 42, .14); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s, transform .18s, visibility 0s linear .18s; z-index: 60; }
.nav__punkt--mehr:hover > .nav__unter, .nav__punkt--mehr:focus-within > .nav__unter { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav .nav__unter a { display: block; padding: .55rem .75rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: .95rem; white-space: normal; }
.nav .nav__unter a:hover, .nav .nav__unter a[aria-current] { background: var(--creme); color: var(--gruen); }
.kopf__burger { display: none; }
@media (min-width: 1081px) and (max-width: 1299px) { .kopf__tel span { display: none; } .kopf__tel svg { width: 22px; } }
@media (max-width: 1080px) {
  .kopf__innen { position: relative; }
  .kopf__burger { order: 10; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; margin-right: -8px; border: 0; background: transparent; cursor: pointer; flex: none; }
  .kopf__burger span { display: block; height: 2px; background: var(--gruen-tief); border-radius: 2px; transition: transform .25s, opacity .2s; }
  .menue-offen .kopf__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menue-offen .kopf__burger span:nth-child(2) { opacity: 0; }
  .menue-offen .kopf__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .kopf .nav { display: block; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 80px); overflow-y: auto; margin: 0; padding: .6rem 16px 1.4rem;
    background: var(--weiss); border-bottom: 1px solid var(--linie); box-shadow: 0 18px 30px rgba(0, 0, 0, .12); opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .22s, transform .22s, visibility 0s linear .22s; z-index: 55; }
  .menue-offen .kopf .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; max-width: 560px; margin: 0 auto; }
  .nav .nav__punkt > a { font-size: 1.12rem; padding: .8rem .2rem; border-bottom: 1px solid var(--linie); }
  .nav .nav__punkt.ist-aktiv > a { box-shadow: none; color: var(--gold-dunkel); font-weight: 600; }
  .nav__punkt--mehr > a::after { display: none; }
  .nav__unter { position: static; opacity: 1; visibility: visible; transform: none; transition: none; box-shadow: none; border: 0; border-radius: 0; padding: .2rem 0 .5rem .9rem; min-width: 0; background: transparent; }
  .nav .nav__unter a { padding: .45rem .3rem; font-size: 1rem; color: var(--grau); }
}

/* Ortsseiten am Desktop: Sprungmarken als schlanke zweite Leiste unter dem Menü */
.kopf__unter { display: none; }
@media (min-width: 1081px) {
  .kopf__unter { display: block; border-top: 1px solid var(--linie); }
  .kopf__unter-innen { max-width: var(--max); margin: 0 auto; padding: .3rem 16px; display: flex; gap: 1.3rem; align-items: center; font-size: .88rem; white-space: nowrap; overflow-x: auto; }
  .kopf__unter-titel { color: var(--grau); font-weight: 600; margin-right: -.4rem; }
  .kopf__unter a { color: var(--gruen); text-decoration: none; }
  .kopf__unter a:hover { color: var(--gold-dunkel); text-decoration: underline; }
  .kopf__unter a.kopf__unter-knopf { margin-left: .2rem; padding: .28rem 1rem; border-radius: 999px; background: var(--gold); color: #fff; font-weight: 700; text-decoration: none; transition: background .2s ease; }
  .kopf__unter a.kopf__unter-knopf:hover, .kopf__unter a.kopf__unter-knopf:focus-visible { background: var(--gold-dunkel); color: #fff; text-decoration: none; }
}

/* ============================================================ Neue Seiten: Startseite, Hauptseiten, Preise, News, Weiterempfehlung, Recht */
.held--hauptseite .held__lead strong, .held--start .held__lead strong { color: #f3dfb6; }
.held--hauptseite .held__innen { padding-bottom: clamp(2.6rem, 6vh, 4rem); }

.regionen { padding: clamp(2.4rem, 5vw, 3.4rem) 0; background: var(--weiss); }
.regionen--schlank { padding: 1.6rem 0 2.2rem; background: transparent; }
.regionen__text { max-width: 700px; margin: 0 auto 1.4rem; }
.regionen__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .6rem; }
.regionen__liste a { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border: 1px solid var(--linie); border-radius: 10px; background: var(--elfenbein); color: var(--text); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.regionen__liste a:hover { border-color: var(--gold); box-shadow: var(--schatten); transform: translateY(-2px); }
.regionen__liste a span { font-weight: 600; flex: 1; }
.regionen__liste small { color: var(--grau); font-size: .82rem; }
.regionen__liste img, .regionen__liste svg { width: 26px; height: auto; flex: none; }

.preise { padding: clamp(2.4rem, 5vw, 3.4rem) 0 1rem; }
.preise__karten { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; max-width: 960px; }
.preiskarte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.4rem 1.3rem; text-align: center; border-top: 4px solid var(--salbei); }
.preiskarte--start { border-top-color: var(--gold); }
.preiskarte__stufe { margin: 0; font: 600 .76rem var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dunkel); }
.preiskarte__titel { margin: .2rem 0 .6rem; font-size: 1.35rem; }
.preiskarte__preis { margin: 0; font: 600 2rem/1.1 var(--serif); color: var(--gruen-tief); }
.preiskarte__preis span, .preiskarte__preis small { font: 400 .95rem var(--sans); color: var(--grau); }
.preiskarte__text { margin: .5rem 0 0; font-size: .92rem; color: var(--grau); }
.preise__hinweis { max-width: 760px; margin: 1.2rem auto 0; font-size: .95rem; color: var(--grau); }

.newsband { padding: clamp(2.4rem, 5vw, 3.4rem) 0; }
.newsliste { padding: clamp(2rem, 4vw, 3rem) 0; }
.newsfilter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.6rem; }
.newsfilter a { padding: .45rem 1rem; border: 1.5px solid var(--linie); border-radius: 999px; color: var(--text); text-decoration: none; font-size: .95rem; background: var(--weiss); }
.newsfilter a:hover { border-color: var(--gold); }
.newsfilter a[aria-current] { background: var(--gruen); border-color: var(--gruen); color: #fff; }
.newskacheln { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.2rem; }
.newskachel__link { display: flex; flex-direction: column; height: 100%; background: var(--weiss); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); color: var(--text); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.newskachel__link:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(46, 70, 54, .16); color: var(--text); }
.newskachel__bild { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--creme); overflow: hidden; }
.newskachel__bild img { width: 100%; height: 100%; object-fit: cover; }
.newskachel__bild--leer { background: linear-gradient(135deg, var(--salbei), var(--gruen)); }
.newskachel__bild--leer span { font: 500 3rem/1 var(--serif); color: rgba(255, 255, 255, .85); }
.newskachel__text { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.2rem 1.2rem; }
.newskachel__meta { font-size: .82rem; color: var(--gold-dunkel); font-weight: 600; letter-spacing: .03em; }
.newskachel__titel { font-size: 1.2rem; margin: .3rem 0 .4rem; }
.newskachel__auszug { font-size: .95rem; line-height: 1.5; color: var(--grau); flex: 1; }
.newskachel .leistung__mehr { align-self: flex-start; }
.newskachel__link:hover .leistung__mehr { background: var(--gold); border-color: var(--gold); color: #fff; }
.newskachel__link:hover .leistung__pfeil { background: #fff; color: var(--gold-dunkel); }

.seitenkopf--artikel, .seitenkopf--recht { padding-bottom: 1rem; }
.artikel__text img { max-width: 100%; height: auto; border-radius: 10px; margin: .4rem 0; }
.artikel__text h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 1.6rem; }
.artikel__text h3 { font-size: 1.25rem; margin-top: 1.3rem; }
.artikel__alt { margin-bottom: 1.6rem; }
.video-link a::before { content: "\25B6\00A0"; color: var(--gold-dunkel); }
.quelle { font-size: .88rem; color: var(--grau); }
.hinweis-alt { background: var(--creme); border-radius: 10px; padding: .8rem 1.1rem; }
.akkordeon__antwort { padding: 0 1.3rem 1rem; }
.akkordeon__antwort p { margin: .5rem 0; }
.recht__text { font-size: 1rem; }
.recht__text h2, .recht__text h3 { font-size: 1.3rem; margin-top: 1.6rem; }
.recht__text a { word-break: break-word; }
.fehler__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.sitemap__haupt { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem 2rem; margin-bottom: 2rem; }
.sitemap__haupt ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.sitemap__haupt li { margin: .2rem 0; }
.sitemap__orte-titel { margin-top: 1rem; }

.tipp { padding: clamp(2.2rem, 5vw, 3.2rem) 0; background: var(--creme); scroll-margin-top: 100px; }
.tipp__formular { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: clamp(1.2rem, 3vw, 2rem); }
.tipp__formular fieldset { border: 0; padding: 0; margin: 0 0 1.4rem; }
.tipp__formular legend { font: 600 1.2rem var(--serif); color: var(--gruen-tief); margin-bottom: .7rem; }
.tipp__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem 1rem; }
.tipp__raster label, .tipp__voll { display: flex; flex-direction: column; gap: .3rem; font-size: .95rem; font-weight: 600; }
.tipp__formular input[type=text], .tipp__formular input[type=email], .tipp__formular input[type=tel], .tipp__formular select, .tipp__formular textarea {
  font: inherit; font-weight: 400; padding: .65rem .8rem; border: 1.5px solid var(--linie); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.tipp__formular input:focus, .tipp__formular select:focus, .tipp__formular textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.tipp__voll { margin-top: .8rem; }
.tipp__frage { margin: 1rem 0 .5rem; font-size: .95rem; font-weight: 600; }
.tipp__wahlen { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: .9rem; }
.tipp__wahl { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border: 1.5px solid var(--linie); border-radius: 999px; cursor: pointer; }
.tipp__wahl:has(input:checked) { border-color: var(--gruen); background: #eef3ef; }
.tipp__pflicht { margin: .2rem 0 .6rem; font-size: .85rem; color: var(--grau, #6a6861); }
.tipp__einwilligung { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; margin: .4rem 0 1.2rem; }
.tipp__einwilligung input { margin-top: .3rem; }
.tipp__erfolg { background: #e5f4e4; border: 1px solid #b9dcb7; border-radius: 10px; padding: 1rem 1.2rem; text-align: center; }
.tipp__weitere { margin-top: 1.4rem; padding: 1.4rem 1.4rem 1.2rem; background: #fff; border: 1px solid var(--linie, #e4ddd0); border-top: 3px solid var(--gold); border-radius: 10px; text-align: center; }
.tipp__weitere-titel { margin: 0 0 .5rem; font: 600 1.35rem/1.3 var(--serif, Georgia, serif); color: var(--gruen-tief); }
.tipp__weitere p { margin: 0 0 1rem; }
.tipp__weitere p:last-child { margin: 0; }

/* ============================================================ Startseite: Länderkacheln einheitlich, Einstieg, Preisübersicht, Bewertungen, Partner */
.regionen__liste { grid-auto-rows: 1fr; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.regionen__liste li { display: flex; }
.regionen__liste a { width: 100%; min-height: 64px; }
.regionen__name { display: flex; flex-direction: column; flex: 1; font-weight: 600; line-height: 1.25; }
.regionen__name small { font-weight: 400; margin-top: .15rem; }
.regionen__alle { margin: 1.4rem 0 0; }

.einstieg { padding: clamp(2.6rem, 5vw, 4rem) 0; }
.einstieg__raster { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.einstieg__text .titel { font-size: clamp(1.6rem, 3.2vw, 2.3rem); }
.einstieg__fragen { margin: 1.2rem 0 .8rem; }
.einstieg__fragen details p { padding: 0 1.3rem 1rem; margin: 0; }
.einstieg__links { font-size: .95rem; }
.einstieg__bild { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); border-bottom: 5px solid var(--gold); }
.einstieg__bild img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .einstieg__raster { grid-template-columns: 1fr; } .einstieg__bild { order: -1; } }

.preisband { padding: clamp(2.6rem, 5vw, 3.8rem) 0; background: var(--weiss); }
.preisband .titel { max-width: 820px; margin-left: auto; margin-right: auto; }
.preisband__karten { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.preisbeispiel { display: flex; flex-direction: column; background: var(--elfenbein); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); text-align: center; border-bottom: 4px solid var(--gold); }
.preisbeispiel__bild { position: relative; aspect-ratio: 4 / 3; background: var(--creme); }
.preisbeispiel__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.preisbeispiel__tag { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); width: 92px; height: 92px; border-radius: 50%; background: #fff; border: 3px solid var(--gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .15); display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.preisbeispiel__tag strong { font: 600 1.15rem/1.1 var(--serif); color: var(--gruen-tief); }
.preisbeispiel__tag small { font-size: .78rem; color: var(--grau); }
.preisbeispiel__titel { margin: 3.4rem 1rem .4rem; font: 600 1.05rem var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-tief); }
.preisbeispiel__text { margin: 0 1.1rem .8rem; font-size: .92rem; line-height: 1.45; color: var(--grau); flex: 1; }
.preisbeispiel__kosten { margin: 0; padding: .8rem 1rem; background: var(--weiss); display: flex; flex-direction: column; gap: .15rem; }
.preisbeispiel__kosten strong { font: 600 1.45rem/1.2 var(--serif); color: var(--gruen-tief); }
.preisbeispiel__kosten small { font-size: .82rem; color: var(--grau); }
.preisbeispiel__logis { margin: 0; padding: .5rem; background: var(--creme); font-weight: 700; font-size: .9rem; color: var(--gold-dunkel); }
.preisbeispiel__knopf { margin: 0; padding: 1rem; }
.preisband__hinweis { max-width: 760px; margin: 1.4rem auto 0; font-size: .9rem; color: var(--grau); }
@media (max-width: 1080px) { .preisband__karten { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .preisband__karten { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; } }

.bewertungsband { padding: clamp(2.2rem, 4.5vw, 3.2rem) 0; background: var(--creme); }
.bewertungsband__innen { display: flex; align-items: center; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem); max-width: 980px; }
.bewertungsband__widget { flex: none; display: block; background: #fff; border-radius: 12px; padding: .5rem; box-shadow: var(--schatten); transition: transform .2s; }
.bewertungsband__widget:hover { transform: translateY(-3px); }
.bewertungsband__widget img { display: block; width: 240px; height: auto; }
.bewertungsband__text .titel { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.bewertungsband__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 0; }
@media (max-width: 760px) { .bewertungsband__innen { flex-direction: column; text-align: center; } .bewertungsband__knoepfe { justify-content: center; } }

.partnerband { padding: 1.8rem 0 2.2rem; background: var(--weiss); border-top: 1px solid var(--linie); }
.partnerband__titel { margin: 0 0 1rem; text-align: center; font: 600 .82rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); }
.partnerband__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1.2rem 2.4rem; }
.partnerband__liste a { display: block; filter: grayscale(1); opacity: .75; transition: filter .25s, opacity .25s; }
.partnerband__liste a:hover, .partnerband__liste a:focus-visible { filter: none; opacity: 1; }
.partnerband__liste img { display: block; height: 40px; width: auto; }

@media (min-width: 1081px) { .newskacheln--vier { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1080px) { .newskacheln--vier { grid-template-columns: repeat(2, 1fr); } }

/* Hauptmenü (Desktop): goldene Unterstreichung – fest beim aktiven Punkt, beim Überfahren eines anderen Punktes wächst sie dort zusätzlich von links ein */
@media (min-width: 1081px) {
  .nav .nav__punkt > a { position: relative; }
  .nav .nav__punkt.ist-aktiv > a { box-shadow: none; }
  .nav .nav__punkt > a::before { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold);
    transform: scaleX(0); transform-origin: left center; transition: transform .28s ease; }
  .nav .nav__punkt.ist-aktiv > a::before,
  .nav .nav__punkt > a:hover::before, .nav .nav__punkt > a:focus-visible::before,
  .nav .nav__punkt--mehr:hover > a::before { transform: scaleX(1); }
}
@media (min-width: 1081px) and (prefers-reduced-motion: reduce) { .nav .nav__punkt > a::before { transition: none; } }


/* Startseite, Einstieg aufgeräumt: Text und Foto gleich hoch nebeneinander, darunter die Fragen in zwei Spalten */
.einstieg__raster { align-items: stretch; }
.einstieg__text { display: flex; flex-direction: column; justify-content: center; }
.einstieg__text p:last-child { margin-bottom: 0; }
.einstieg__bild { position: relative; min-height: 260px; }
.einstieg__bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.einstieg__fragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1.2rem; align-items: start; margin: 1.8rem 0 0; }
.einstieg__fragen details { margin: 0; }
.einstieg__fragen summary { font-size: 1.02rem; padding-top: .75rem; padding-bottom: .75rem; }
.einstieg__links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; padding: .7rem .2rem; font-size: .95rem; }
.einstieg__links a { color: var(--gruen); font-weight: 600; text-decoration: none; }
.einstieg__links a::after { content: " →"; color: var(--gold-dunkel); }
.einstieg__links a:hover { color: var(--gold-dunkel); }
@media (max-width: 860px) {
  .einstieg__fragen { grid-template-columns: 1fr; }
  .einstieg__bild { min-height: 0; aspect-ratio: 16 / 10; }
}

/* Startseite: Bundesländer wie in der Übersicht /24-stunden-pflege/ (4 × 4 Kacheln mit Pflegeheim-Durchschnitt) */
.regionen--laender { background: var(--creme); }
.regionen--laender .laenderkacheln { margin-top: 1.4rem; }

/* Preisübersicht: Hochformat-Fotos der alten Seite – Ausschnitt oben, damit die Gesichter sichtbar bleiben */
.preisbeispiel__bild img { object-position: center 22%; }

/* ============================================================ Preisübersicht im Aufbau der alten Startseite (Hausfarben) */
.preisband__karten { align-items: center; gap: .9rem; margin-top: 2.2rem; }
.preisbeispiel { background: var(--weiss); border-radius: 6px; border: 1px solid var(--linie); border-bottom: 1px solid var(--linie); box-shadow: 0 10px 24px rgba(46, 70, 54, .10); text-align: center; overflow: hidden; }
.preisbeispiel__bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--creme); }
.preisbeispiel__bild::after { content: ""; position: absolute; inset: 0 0 auto; height: 38%; background: linear-gradient(180deg, rgba(25, 38, 29, .55), transparent); pointer-events: none; }
.preisbeispiel__bild img { object-position: center top; }
.preisbeispiel__art { position: absolute; top: .9rem; left: 0; right: 0; z-index: 1; color: #fff; font: 400 1rem var(--sans); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.preisbeispiel__tag { top: 3rem; bottom: auto; left: 50%; transform: translateX(-50%); width: 84px; height: 84px; z-index: 1; border: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.preisbeispiel__tag strong { font: 600 1.1rem/1.1 var(--sans); color: var(--gold-dunkel); }
.preisbeispiel__tag small { font-size: .74rem; }
.preisbeispiel__band { position: absolute; top: 14px; left: -34px; z-index: 2; width: 120px; padding: .2rem 0; transform: rotate(-45deg); background: var(--gold); color: #fff; font: 700 .78rem var(--sans); letter-spacing: .12em; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.preisbeispiel__titel { margin: 0; padding: 1rem .8rem; background: #efece6; font: 300 1.35rem/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gruen-tief); }
.preisbeispiel__kosten { padding: 1rem .9rem .9rem; background: var(--weiss); gap: .25rem; }
.preisbeispiel__kosten small:first-child { font-size: .85rem; color: var(--text); }
.preisbeispiel__kosten strong { font: 400 1.35rem/1.25 var(--sans); color: var(--gruen-tief); }
.preisbeispiel__logis { background: #efece6; color: var(--gold-dunkel); padding: .6rem; }
.preisbeispiel__knopf { padding: 1.2rem 1rem 1.3rem; }
.preisbeispiel--top { position: relative; z-index: 1; transform: scale(1.04); transform-origin: center; box-shadow: 0 18px 40px rgba(46, 70, 54, .2); border-color: var(--gold); }
.js .preisbeispiel--top.einblenden.ist-sichtbar { transform: scale(1.04); }
.preisbeispiel--top .preisbeispiel__titel { background: #e9e3d6; }
.preisbeispiel--top .preisbeispiel__kosten strong { font-weight: 700; font-size: 1.55rem; }
@media (max-width: 1080px) { .preisbeispiel--top, .js .preisbeispiel--top.einblenden.ist-sichtbar { transform: none; } }

/* Bewertungsband: Überschrift am Desktop in einer Zeile */
@media (min-width: 900px) {
  .bewertungsband__innen { max-width: 1120px; }
  .bewertungsband__text .titel { white-space: nowrap; font-size: clamp(1.4rem, 2.35vw, 1.95rem); }
}

/* News: Originalbild über dem Artikel (wenn der Text selbst keins enthält) */
.artikel__bild { margin: 0 0 1.4rem; }
.artikel__bild img { display: block; max-width: 100%; height: auto; border-radius: 10px; box-shadow: var(--schatten); }
.newskachel__bild { background: #fff; }

/* ---------- Ruhiges Laden: Kopfbilder blenden weich über dem Grün ein, sobald sie geladen sind,
   nachladende Bilder erscheinen sanft statt hart. Logo: beim Scrollen wird nur der Untertitel weggewischt. */
.js .held__bild { opacity: 0; transition: opacity .7s ease; }
.js .held__bild.ist-geladen { opacity: 1; }
.js .held__bild.sofort { transition: none; }
.js img.laedt { opacity: 0; }
.js img.geladen { transition: opacity .5s ease; }
.kopf.ist-gescrollt .logo__bild { clip-path: polygon(0 0, 100% 0, 100% 100%, 73% 100%, 73% 78%, 0 78%); }
@media (prefers-reduced-motion: reduce) { .js .held__bild { opacity: 1; } .js img.laedt { opacity: 1; } }

/* Karussell ohne Anschnitt: Ab Tablet endet die Spur an den äußeren Kacheln (die nächste Kachel beginnt erst
   1,2rem dahinter), der Schatten läuft zum Rand weich aus. Auf dem Handy bleibt der Anschnitt als Wisch-Hinweis. */
@media (min-width: 601px) { .karussell__spur { --rand: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-image: var(--rand); mask-image: var(--rand); } }

/* ---------- Vorteile: Modellvergleich Gewerbe / EU-Entsendung (angelehnt an die alte Preistabelle) */
.modelle { padding: clamp(2.5rem, 6vw, 4rem) 0; background: var(--creme); }
.modelle__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; align-items: start; gap: 0; margin-top: 2rem; }
.modell { position: relative; background: var(--weiss); border: 1px solid var(--linie); overflow: hidden; text-align: center; }
.modell--top { z-index: 1; margin: -1.2rem -1px 0 0; border-radius: var(--radius) 0 var(--radius) var(--radius); box-shadow: 0 22px 44px rgba(34, 54, 42, .2); }
.modell:not(.modell--top) { border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--schatten); }
.modell__band { position: absolute; z-index: 2; top: 14px; left: -34px; width: 120px; transform: rotate(-45deg); background: var(--salbei-dunkel); color: #fff; font: 700 .78rem/1.9 var(--sans); letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.modell__kopf { position: relative; color: #fff; padding: 1.1rem 1rem 1.3rem; background: linear-gradient(rgba(25,38,29,.55), rgba(25,38,29,.55)), var(--bild) center/cover no-repeat; }
.modell--top .modell__kopf { padding: 1.6rem 1rem 1.8rem; }
.modell__name { margin: 0 0 .7rem; padding: .35rem 0; font: 700 1.1rem/1.3 var(--sans); background: rgba(255,255,255,.14); color: #fff; }
.modell__preis { margin: 0; font: 600 clamp(2.2rem, 4.5vw, 3rem)/1.05 var(--serif); }
.modell__preis small { font-size: .6em; font-weight: 400; }
.modell__preis-zusatz { margin: .25rem 0 0; font-size: .85rem; opacity: .92; }
.modell__zeilen { list-style: none; margin: 0; padding: 0; }
.modell__zeile { padding: .7rem 1.2rem; border-bottom: 1px solid var(--linie); }
.modell__zeile:nth-child(even) { background: #faf7f1; }
.modell__punkt { display: block; font-size: 1.02rem; }
.modell__zeile--gut .modell__punkt { color: var(--salbei-dunkel); }
.modell__zeile--schlecht .modell__punkt { color: #a8473b; }
.modell__info { display: block; margin-top: .15rem; font-size: .86rem; line-height: 1.4; color: var(--grau); }
.modell__fuss { margin: 0; padding: 1.4rem 1rem 1.6rem; }
.modell--top .modell__fuss { padding: 1.8rem 1rem 2.1rem; }
.modelle__stand { margin: 1.8rem auto 0; max-width: 760px; text-align: center; font-size: .92rem; color: var(--grau); }
@media (max-width: 820px) {
  .modelle__raster { grid-template-columns: minmax(0, 480px); gap: 1.6rem; }
  .modell--top, .modell:not(.modell--top) { margin: 0; border-radius: var(--radius); }
}
.weitere-vorteile { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.weitere-vorteile__liste { list-style: none; margin: 1.8rem auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .7rem 1.6rem; }
.weitere-vorteile__liste li { position: relative; padding-left: 1.9rem; line-height: 1.45; }
.weitere-vorteile__liste li::before { content: ""; position: absolute; left: 0; top: .15em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--salbei-dunkel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat; }
.weitere-vorteile__knoepfe { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin: 2rem 0 0; }
/* Beide Karten gleich hoch, die Top-Karte ragt oben und unten etwas heraus; Knopf jeweils unten */
.modelle__raster { align-items: stretch; }
.modell { display: flex; flex-direction: column; }
.modell__zeilen { flex: 1; }
@media (min-width: 821px) { .modell--top { margin: -1.2rem -1px -1.2rem 0; } }

/* Kopfleiste (inkl. Sprungleiste der Ortsseiten): beim Scrollen stufenlos bis 15 % durchsichtig,
   mit leichtem Weichzeichner, damit dahinterliegende Schrift nicht stört. --kopf-deckung setzt app.js (1 oben, 0,85 ab 400 px). Bei offenem Handy-Menü bleibt sie deckend. */
.kopf { background: rgba(255, 253, 249, var(--kopf-deckung, 1)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.menue-offen .kopf { background: var(--weiss); }

/* Unterabschnitte (h3) in Textseiten, z. B. /vorteile */
.ratgeber__h3 { margin: 0 0 .5rem; font: 600 clamp(1.25rem, 2.2vw, 1.45rem)/1.3 var(--serif); color: var(--gruen-tief); }
.ratgeber__abschnitt--unter { margin-top: -.6rem; }
.modelle .titel, .ratgeber__abschnitt .titel, .weitere-vorteile .titel { text-wrap: balance; }

/* ---------- Vorteile: Kacheln für Beratung, Aufgaben und Flexibilität */
.vt { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.vt--hell { background: var(--creme); }
.vt__lead { max-width: 720px; margin: .6rem auto 0; text-align: center; font-size: 1.1rem; color: var(--grau); }
.vt__karten { list-style: none; margin: 1.8rem auto 0; padding: 0; display: grid; gap: 1.2rem; }
.vt__karten--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1080px; }
.vt__karten--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vt__karten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; }
.vt__karte { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.4rem 1.3rem; text-align: center; }
.vt__karte h3 { margin: .7rem 0 .35rem; font: 600 1.2rem/1.3 var(--serif); color: var(--gruen-tief); }
.vt__karte p { margin: 0; font-size: .97rem; line-height: 1.5; color: var(--grau); }
.vt__karte--quer { display: flex; gap: 1rem; align-items: flex-start; text-align: left; }
.vt__karte--quer h3 { margin-top: .1rem; }
.vt__symbol { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: #e8efe6; }
.vt__symbol svg { width: 24px; height: 24px; fill: none; stroke: var(--salbei-dunkel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vt__abstand { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.vt__hinweis { max-width: 980px; margin: 1.6rem auto 0; background: #f6e7c4; border: 1px solid #e8cf94; border-radius: 10px; padding: .85rem 1.2rem; font-size: .97rem; }
@media (max-width: 1000px) { .vt__karten--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .vt__karten--drei, .vt__karten--zwei { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vt__karten--vier { grid-template-columns: 1fr; } }

/* Preiskarten mit Preisspanne: Betrag etwas kleiner, „im Monat“ in eigener Zeile */
.preiskarte__preis--spanne { font-size: clamp(1.55rem, 2.4vw, 1.85rem); white-space: nowrap; }
.preiskarte__preis--spanne small { display: block; margin-top: .3rem; }

/* ---------- Preise-Seite: Preisbeispiele mit Rechenweg (wie das Original), Zuschüsse, Heimvergleich */
.preisband--seite { background: var(--creme); }
.preisband__einleitung { max-width: 820px; margin: .6rem auto 0; color: var(--grau); }
.preisband__karten--detail { align-items: stretch; }
.preisband__karten--detail .preisbeispiel { display: flex; flex-direction: column; }
.preisbeispiel__zeilen { margin: 0; flex: 1; }
.preisbeispiel__zeilen > div { padding: .55rem .7rem; border-bottom: 1px solid var(--linie); }
.preisbeispiel__zeilen > div:nth-child(even) { background: #faf7f1; }
.preisbeispiel__zeilen dt { order: 2; font-size: .78rem; line-height: 1.3; color: var(--grau); }
.preisbeispiel__zeilen dd { margin: 0 0 .1rem; font: 600 1.02rem/1.3 var(--sans); color: var(--grau); }
.preisbeispiel__zeilen dd small { font-weight: 400; font-size: .8rem; }
.preisbeispiel__zeilen > div { display: flex; flex-direction: column-reverse; }
.preisbeispiel__zeilen .plus dd { color: #a8473b; }
.preisbeispiel__zeilen .minus dd { color: var(--salbei-dunkel); }
.preisbeispiel__zeilen .null dd { color: var(--salbei-dunkel); font-weight: 400; }
.preisband__karten--detail .preisbeispiel__kosten strong { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.zuschuesse { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.zuschuesse__karten { list-style: none; margin: 1.8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.zuschuss { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.3rem 1.3rem 1.2rem; border-top: 4px solid var(--salbei); }
.zuschuss--gross { grid-row: span 2; border-top-color: var(--gold); }
.zuschuss__betrag { margin: 0; font: 600 1.6rem/1.15 var(--serif); color: var(--gruen-tief); }
.zuschuss__betrag small { display: block; margin-top: .15rem; font: 400 .85rem var(--sans); color: var(--grau); }
.zuschuss h3 { margin: .6rem 0 .3rem; font: 700 1.02rem/1.3 var(--sans); color: var(--gruen-tief); }
.zuschuss p:not(.zuschuss__betrag) { margin: 0; font-size: .94rem; line-height: 1.5; color: var(--grau); }
.zuschuss__pg { list-style: none; margin: .6rem 0 0; padding: 0; }
.zuschuss__pg li { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px dashed var(--linie); }
.zuschuss__pg strong { color: var(--gruen-tief); }
.zuschuesse__stand { margin: 1.3rem auto 0; font-size: .88rem; color: var(--grau); }
.heimvergleich { padding: 0 0 clamp(2.5rem, 6vw, 4rem); }
.heimvergleich__raster { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.2rem; max-width: 980px; margin: 1.8rem auto 0; }
.heimvergleich__seite { background: var(--weiss); border-radius: var(--radius); box-shadow: var(--schatten); padding: 1.5rem; text-align: center; border: 2px solid var(--linie); }
.heimvergleich__seite--daheim { border-color: var(--salbei-dunkel); }
.heimvergleich__seite p:last-child { margin: .6rem 0 0; font-size: .94rem; color: var(--grau); }
.heimvergleich__label { margin: 0; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .82rem; color: var(--gold-dunkel); }
.heimvergleich__betrag { margin: .4rem 0 0; font: 600 1.9rem/1.15 var(--serif); color: var(--gruen-tief); }
.heimvergleich__betrag small { display: block; font: 400 .85rem var(--sans); color: var(--grau); }
.heimvergleich__vs { margin: 0; font: italic 600 1.4rem var(--serif); color: var(--gold-dunkel); }
@media (max-width: 900px) { .zuschuesse__karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .heimvergleich__raster { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .zuschuesse__karten { grid-template-columns: 1fr; } .zuschuss--gross { grid-row: auto; } }
.preisband--seite .titel { max-width: none; }

/* Untertitel der Hauptseiten darf breiter laufen als der Text darunter (z. B. /preise in einer Zeile) */
@media (min-width: 900px) { .held--seite .held__innen > .held__claim { max-width: 900px; } }
/* Preisbeispiele: Deutschkenntnisse klein unter dem Titel */
.preisbeispiel__titel small { display: block; margin-top: .25rem; font: 400 .82rem/1.3 var(--sans); letter-spacing: .02em; text-transform: none; color: var(--grau); }
.preisband--seite .preisband__hinweis { max-width: none; margin-top: 2.4rem; line-height: 1.9; }
/* Bildausschnitt im Kopf je Seite einstellbar (data/seiten.php → bild_pos), z. B. damit Köpfe nicht abgeschnitten werden */
@media (min-width: 761px) { .held--seite .held__bild { background-position: var(--bild-pos, center); } }
.preisbeispiel__zeilen abbr { text-decoration: none; }

/* ---------- Rechtstexte: Druckknopf, Kurzüberblick, automatische Nummern, Rechte als Kacheln */
.recht__kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.recht__drucken { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--linie); background: var(--weiss); color: var(--gruen-tief); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.recht__drucken:hover, .recht__drucken:focus-visible { background: var(--gruen-tief); color: #fff; transform: translateY(-1px); }
.recht__drucken svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.recht__kurz { background: #e8efe6; border-left: 4px solid var(--salbei-dunkel); border-radius: 10px; padding: 1.1rem 1.4rem; margin: 0 0 1.8rem; }
.recht__kurz-titel { margin: 0 0 .5rem; font: 600 1.25rem/1.3 var(--serif); color: var(--gruen-tief); }
.recht__kurz ul { margin: 0; padding-left: 1.1rem; }
.recht__kurz li { margin: .35rem 0; }
.recht__inhalt ol { columns: 2; column-gap: 2rem; }
.recht--nummeriert .recht__text { counter-reset: abschnitt; }
.recht--nummeriert .recht__text > h2 { counter-increment: abschnitt; margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--linie); scroll-margin-top: 110px; font-size: clamp(1.4rem, 2.6vw, 1.75rem); }
.recht--nummeriert .recht__text > h2::before { content: counter(abschnitt) ". "; color: var(--gold-dunkel); }
.recht--nummeriert .recht__text > h3 { margin: 1.2rem 0 .4rem; font: 700 1.05rem/1.3 var(--sans); color: var(--gruen-tief); }
.recht__rechte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.recht__rechte li { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: .6rem .9rem; font-size: .95rem; }
.recht__hinweis { background: #f6e7c4; border: 1px solid #e8cf94; border-radius: 10px; padding: .85rem 1.1rem; }
.recht__stand { margin-top: 2rem; font-size: .9rem; color: var(--grau); }
@media (max-width: 640px) { .recht__inhalt ol { columns: 1; } .recht__rechte { grid-template-columns: 1fr; } }
@media print { .recht__drucken, .recht__inhalt, .brot { display: none; } .recht__kurz, .recht__hinweis, .recht__rechte li { background: none; } }
/* AGB: Unterpunkte a), b), c) … und Kästen für Widerrufsbelehrung und Formular */
.recht__punkte { counter-reset: punkt; list-style: none; padding-left: 0; }
.recht__punkte > li { counter-increment: punkt; position: relative; padding-left: 2.1rem; margin: .55rem 0; }
.recht__punkte > li::before { content: counter(punkt, lower-alpha) ")"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--gold-dunkel); }
.recht__kasten { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 1rem 1.3rem; margin: .8rem 0 1.2rem; }
.recht__kasten p { margin: .5rem 0; }
.recht__kasten--formular { border-style: dashed; }
@media print { .recht__kasten { border-color: #999; } }
/* Sitemap: obere Gruppen im Aufklapp-Stil der Bundesländer; Seitentitel sind länger als Ortsnamen → breitere Spalten */
.sitemap__land[id="sm-seiten"] .sitemap__orte, .sitemap__land[id="sm-services"] .sitemap__orte { columns: 3 14rem; }
.sitemap__land[id="sm-news"] .sitemap__orte { columns: 2 20rem; }
.sitemap__orte-titel--abstand { margin-top: 2.2rem; }
.sitemap__schnell a[href="#sm-news"] { margin-right: .8rem; }
/* Cookie-Banner: ausgeblendete Knöpfe/Optionen wirklich verstecken (Knöpfe haben sonst display: inline-flex) */
.einwilligung [hidden] { display: none !important; }
.sitemap__lead { max-width: none; }

/* ---------- Cal.com-Knopf „Rückruf vereinbaren“ unten rechts (nur Desktop), neben dem Nach-oben-Knopf */
.rueckruf-knopf { display: none; }
@media (min-width: 1081px) {
  .rueckruf-knopf { position: fixed; right: 18px; bottom: 16px; z-index: 61; display: inline-flex; align-items: center; gap: .6rem; height: 44px; padding: 0 1.3rem 0 1.1rem;
    border-radius: 999px; background: #111; color: #fff; font-weight: 700; font-size: .95rem; text-decoration: none; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: right .35s ease, background .2s ease, transform .2s ease; }
  .rueckruf-knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; flex: none; }
  .rueckruf-knopf:hover, .rueckruf-knopf:focus-visible { background: var(--gruen-tief); color: #fff; transform: translateY(-1px); }
  .nach-oben.ist-sichtbar ~ .rueckruf-knopf { right: 68px; }
}
@media print { .rueckruf-knopf { display: none !important; } }

/* ---------- Impressum: Anbieterangaben links, rundes Foto des Inhabers rechts (wie www.pflegekraft.click), darunter die Firmen-Logos */
.impressum { display: grid; grid-template-columns: 1fr 240px; gap: 2rem; align-items: start; background: var(--weiss); border: 1px solid var(--linie); border-radius: 16px; padding: clamp(1.2rem, 3vw, 2rem); margin: .5rem 0 1.5rem; }
.impressum__firma { margin: 0; font: 600 clamp(1.2rem, 2.2vw, 1.4rem)/1.25 var(--serif); color: var(--gruen-tief); }
.impressum__firma a { color: var(--gruen); text-decoration: none; }
.impressum__firma a:hover { text-decoration: underline; }
.impressum__inhaber { margin: .3rem 0 1.2rem; color: var(--grau); }
.impressum__liste { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.4rem; margin: 0; }
.impressum__liste dt { font-weight: 700; color: var(--gruen-tief); }
.impressum__liste dd { margin: 0; }
.impressum__liste a { color: inherit; text-decoration: none; }
.impressum__foto { margin: 0; text-align: center; }
.impressum__foto img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center top; display: block; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.impressum__foto figcaption { margin-top: .8rem; font-size: .95rem; color: var(--grau); line-height: 1.4; }
.impressum__foto figcaption strong { color: var(--gruen-tief); font: 600 1.1rem/1.3 var(--serif); }
.impressum__marken { margin: 0 0 1rem; }
.impressum__marken-titel { font-weight: 700; color: var(--gruen-tief); margin: 0 0 .8rem; }
.impressum__marken ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.impressum__marken li { margin: 0; }
.impressum__marken a { display: grid; place-items: center; height: 72px; padding: .6rem 1.1rem; background: #fff; border: 1px solid var(--linie); border-radius: 12px; transition: box-shadow .2s ease, transform .2s ease; }
.impressum__marken a:hover, .impressum__marken a:focus-visible { box-shadow: 0 8px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.impressum__marken img { max-height: 46px; width: auto; display: block; }
.impressum__marke { font-size: .8rem; color: var(--grau); margin: .9rem 0 0; }
@media (max-width: 640px) {
  .impressum { grid-template-columns: 1fr; }
  .impressum__foto { order: -1; width: 180px; margin: 0 auto; }
  .impressum__liste { grid-template-columns: 1fr; gap: .1rem; }
  .impressum__liste dd { margin-bottom: .55rem; }
  .impressum__marken ul { justify-content: center; }
}
@media print { .impressum { border: 0; padding: 0; } .impressum__foto img { box-shadow: none; } }

/* ---------- Bedarfsanalyse (ausführliches Formular auf /anfrage-pflegekraft) */
.formular__hinweis { margin: .2rem 0 1rem; font-weight: 600; text-align: center; }
.anfrage__uebernommen { max-width: 40em; margin: 0 auto 1.2rem; padding: .7rem 1rem; border-radius: 10px; background: rgba(255,255,255,.14); color: #fff; font-weight: 700; text-align: center; }
.formular--lang .kacheln--klein { max-width: 640px; margin-inline: auto; }
.formular--lang .formular__frage { text-align: center; }
.feldreihe--drei { grid-template-columns: 1fr 160px 1.4fr; }
.feld--mittig { max-width: 260px; margin: 1.2rem auto 0; text-align: left; }
.regler--leer .budget__wert { color: var(--grau); }
.regler--leer .budget__wert strong { font-weight: 600; }
.formular--lang .feldreihe .budget .formular__frage { margin-top: 1rem; }
.kachel__symbol .symboltext { fill: var(--gruen-tief); stroke: none; font: 700 12px/1 var(--sans); }
.kachel input:checked + .kachel__flaeche .kachel__symbol .symboltext { fill: #fff; }
@media (max-width: 640px) { .feldreihe--drei { grid-template-columns: 1fr; } }

/* Bedarfsanalyse: kompakte Schritte – einheitliches Raster aus gleich breiten Kacheln (Piktogramm links),
   Fragen am Computer in zwei Spalten. Spalten je Gruppe --sp: halbe Breite 3, ganze Breite 6; kacheln--zwei 2 bzw. 4; kacheln--eng 4 */
.schritt--kompakt { --sp: 3; }
.schritt--kompakt .frage--breit { --sp: 6; }
.schritt--kompakt legend { margin-bottom: .2rem; }
.schritt--kompakt .frageraster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; text-align: left; }
.schritt--kompakt .frage--breit { grid-column: 1 / -1; }
.schritt--kompakt .spalte { min-width: 0; }   /* mehrere Fragen untereinander in einer Spalte (Schritt 3 und 4) */
.schritt--kompakt .spalte .regler { margin-top: 0; }
.schritt--kompakt .frage--fuellen { display: flex; flex-direction: column; }   /* Kacheln wachsen auf die Höhe der Nachbarspalte */
.schritt--kompakt .frage--fuellen .kacheln { flex: 1; grid-auto-rows: 1fr; }
/* schmale Kacheln (3 je halbe Spalte): etwas weniger Innenabstand, damit auch lange Wörter in der Kachel bleiben */
.schritt--kompakt .frage:not(.frage--breit) .kacheln:not(.kacheln--zwei):not(.kacheln--klein) .kachel__flaeche { gap: .4rem; padding: .35rem .4rem .35rem .35rem; }
.schritt--kompakt .frage:not(.frage--breit) .kacheln:not(.kacheln--zwei):not(.kacheln--klein) .kachel__text { font-size: .85rem; }
.schritt--kompakt .frage:not(.frage--breit) .kacheln:not(.kacheln--zwei):not(.kacheln--klein) .kachel__symbol { width: 32px; height: 32px; }
.schritt--kompakt .frage:not(.frage--breit) .kacheln:not(.kacheln--zwei):not(.kacheln--klein) .kachel__symbol svg { width: 22px; height: 22px; }
.schritt--kompakt .spalte--fuellen { display: flex; flex-direction: column; padding-bottom: 1.8rem; }   /* Schritt 4 rechts: Einkauf und Haustiere enden bündig mit der linken Spalte */
.schritt--kompakt .spalte--fuellen > .frage--fuellen { flex: 1; }
.schritt--kompakt .spalte--fuellen .frage.frage--fuellen .kacheln.kacheln .kachel .kachel__symbol { width: 54px; height: 54px; }   /* hohe Kacheln: größere Piktogramme */
.schritt--kompakt .spalte--fuellen .frage.frage--fuellen .kacheln.kacheln .kachel .kachel__symbol svg { width: 36px; height: 36px; }
@media (max-width: 860px) { .schritt--kompakt .spalte--fuellen .frage.frage--fuellen .kacheln.kacheln .kachel .kachel__symbol { width: 36px; height: 36px; } .schritt--kompakt .spalte--fuellen .frage.frage--fuellen .kacheln.kacheln .kachel .kachel__symbol svg { width: 25px; height: 25px; } }
@media (max-width: 860px) { .schritt--kompakt .frage--fuellen .kacheln { flex: none; } .schritt--kompakt .spalte--fuellen > .frage--fuellen { flex: none; } .schritt--kompakt .spalte--fuellen { padding-bottom: 0; } }
.schritt--kompakt .formular__frage, .formular--lang .schritt--kompakt .budget .formular__frage, .formular--lang .schritt--kompakt .feldreihe .budget .formular__frage { font: 600 .95rem/1.3 var(--sans); color: var(--gruen-tief); text-align: left; margin: .9rem 0 .5rem; }
.schritt--kompakt .formular__frage small { font-weight: 400; }
.schritt--kompakt .budget__wert { margin-top: .3rem; font-size: .9rem; text-align: left; }
.schritt--kompakt .kacheln, .formular--lang .schritt--kompakt .kacheln--klein { display: grid; grid-template-columns: repeat(var(--sp), minmax(0, 1fr)); gap: .45rem; max-width: none; margin: 0; }
.schritt--kompakt .kacheln--zwei { --sp: 2; }
.schritt--kompakt .frage--breit .kacheln--zwei { --sp: 4; }
.schritt--kompakt .frage--breit .kacheln--fuenf { --sp: 5; }
.schritt--kompakt .frage--breit .kacheln--acht { --sp: 8; }
.schritt--kompakt .kacheln--eng { --sp: 4; }
.schritt--kompakt .kachel .kachel__flaeche { flex-direction: row; justify-content: flex-start; gap: .5rem; width: 100%; min-width: 0; min-height: 46px; height: 100%; padding: .35rem .6rem .35rem .4rem; border-radius: 10px; }
.schritt--kompakt .kachel--klein .kachel__flaeche { justify-content: center; padding: .35rem .6rem; }
.schritt--kompakt .kachel .kachel__symbol { width: 36px; height: 36px; flex: none; }
.schritt--kompakt .kachel .kachel__symbol svg { width: 25px; height: 25px; }
.schritt--kompakt .kachel .kachel__text, .schritt--kompakt .kachel:not(.kachel--klein) .kachel__text { display: block; min-height: 0; font-size: .92rem; line-height: 1.15; text-align: left; white-space: normal; overflow-wrap: normal; hyphens: manual; }
.schritt--kompakt .kachel--klein .kachel__text { text-align: center; }
.kachel__symbol .symboltext--klein { font-size: 11px; }
.schritt--kompakt .kachel .kachel__symbol .symboltext { font-size: 21px; }   /* Text-Symbole (Alter) im kleinen Kreis gut lesbar */
.schritt--kompakt .kachel .kachel__symbol .symboltext--klein { font-size: 19px; }
.schritt--kompakt .feld { margin-bottom: .6rem; font-size: .92rem; }
.schritt--kompakt .feld input, .schritt--kompakt .feld select, .schritt--kompakt .feld textarea { padding: .55rem .75rem; font-size: 1rem; margin-top: .25rem; }
.schritt--kompakt .feld--sonstiges, .schritt--kompakt .feld--zusatz { max-width: none; margin: .6rem 0 0; }
.schritt--kompakt .frageraster + .feldreihe { margin-top: .9rem; }
.schritt--kompakt .formular__navi { margin-top: 1.1rem; }
.feldreihe--vier { grid-template-columns: 1.6fr 110px 100px 1.2fr; }
.schritt--kompakt .haken { font-size: .85rem; }
.schritt--kompakt .formular__zusagen { margin-top: .6rem; }
.schritt--kompakt .formular__vertrauen { margin-top: .6rem; font-size: .82rem; }
@media (max-width: 860px) { .schritt--kompakt .frageraster { grid-template-columns: 1fr; } .feldreihe--vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .schritt--kompakt .kacheln, .schritt--kompakt .frage--breit .kacheln, .schritt--kompakt .kacheln--zwei { --sp: 2; }
  .schritt--kompakt .kacheln--eng, .schritt--kompakt .frage--breit .kacheln--acht { --sp: 4; }
}

/* Formular: beim Schrittwechsel unter dem festen Kopf ausrichten */
[data-formular] { scroll-margin-top: 96px; }
/* Bedarfsanalyse am Computer breiter, damit die kompakten Kacheln in weniger Zeilen passen */
@media (min-width: 1000px) { .anfrage--lang .wrap--schmal { max-width: 980px; } .anfrage--lang .anfrage__intro { max-width: 820px; margin-inline: auto; } }

/* Formularkacheln: einheitliche Zustände in allen Formularen – Hover (nur mit Maus): leicht anheben, goldener Rand, Symbol dunkler;
   gewählt: goldener Rand mit Schein, heller Grund, Symbol grün gefüllt – für Kacheln mit und ohne Piktogramm gleich */
.kachel__flaeche { transition: border-color .2s, box-shadow .2s, transform .2s, background-color .2s; }
.kachel__symbol { transition: background-color .2s; }
.kachel__flaeche:hover { transform: none; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
@media (hover: hover) {
  .kachel__flaeche:hover { transform: translateY(-2px); border-color: rgba(196,154,79,.55); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
  .kachel__flaeche:hover .kachel__symbol { background: #bccfb9; }
}
.kachel input:checked + .kachel__flaeche, .kachel--klein input:checked + .kachel__flaeche { background: #fdf8ee; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(196,154,79,.25); }
.kachel--klein input:checked + .kachel__flaeche .kachel__text { color: var(--text); }
.kachel input:checked + .kachel__flaeche .kachel__symbol { background: var(--salbei-dunkel); }

/* Kundenstimmen: Titel der Bewertung (z. B. 24h-Pflege-Check) und verlinkte Quelle */
.stimme__titel { margin: .7rem 0 -.3rem; font-weight: 700; color: var(--gruen-tief); }
.stimme__wer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.stimme__wer a:hover { color: var(--gold-dunkel); }
.stimme__halb { font-style: normal; color: transparent; background: linear-gradient(90deg, var(--gold) 50%, #e2d9c6 50%); -webkit-background-clip: text; background-clip: text; }   /* halber Stern, z. B. 4,5 */
/* Impressum: die drei Logo-Kacheln gleich breit über die volle Breite der Impressum-Karte */
.impressum__marken ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.impressum__marken a { height: 84px; }
.impressum__marken img { max-width: 100%; max-height: 50px; height: auto; }
@media (max-width: 560px) { .impressum__marken ul { grid-template-columns: 1fr; } }

/* Footer-Links: ohne Unterstreichung, beim Überfahren goldene Schrift und leichter Ruck nach rechts (Social-Icons und Siegel haben eigene Effekte) */
.fuss a { text-decoration: none; }
.fuss .fuss__liste a, .fuss .fuss__tel { display: inline-block; transition: color .2s, transform .2s; }
.fuss .fuss__liste a:hover, .fuss .fuss__liste a:focus-visible, .fuss .fuss__tel:hover, .fuss .fuss__tel:focus-visible { color: var(--gold); transform: translateX(3px); }
.fuss .fuss__logolink { display: inline-block; transition: opacity .2s; }
.fuss .fuss__logolink:hover, .fuss .fuss__logolink:focus-visible { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .fuss .fuss__liste a:hover, .fuss .fuss__tel:hover { transform: none; } }

/* Abschnitt als farbig abgesetzte Kachel (data/seiten.php: 'klasse' => 'kachel'), z. B. „Ihre Vorteile auf einen Blick“ */
.ratgeber__abschnitt--kachel { background: #eef3ef; border: 1px solid #d5e2d8; border-left: 5px solid var(--gold); border-radius: 12px; padding: 1.4rem 1.6rem 1.2rem; margin-block: 2rem; }
.ratgeber__abschnitt--kachel .titel { margin-top: 0; }
.ratgeber__abschnitt--kachel .ratgeber__liste { margin-bottom: 0; }
@media (max-width: 560px) { .ratgeber__abschnitt--kachel { padding: 1.1rem 1rem 1rem; } }

/* News-Filter ohne Neuladen (app.js): Kacheln blenden kurz aus, die neue Auswahl gleitet versetzt herein */
.newsfilter a { transition: background .25s, border-color .25s, color .25s, transform .2s; }
.newsfilter a:active { transform: scale(.96); }
.newskacheln--raus .newskachel { opacity: 0 !important; transform: translateY(8px) scale(.98) !important; transition: opacity .18s ease, transform .18s ease !important; }
.newskacheln--rein .newskachel:not([hidden]) { animation: news-rein .5s cubic-bezier(.2, .8, .3, 1) both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes news-rein { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .newskacheln--rein .newskachel:not([hidden]) { animation: none; } .newskacheln--raus .newskachel { transition: none !important; } }

/* News-Beitrag: Kopfbild wie die Hauptseiten, ruhige Lesespalte, Teaserbild rechts neben dem Text */
.held--artikel .held__titel { font-size: clamp(2rem, 4.4vw, 3.3rem); line-height: 1.12; max-width: 820px; }
.held--artikel .held__lead { max-width: 640px; }
.held__dach { margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f3dfb6; animation: einfliegen .9s .1s both; }
.held__dach a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(243, 223, 182, .5); }
.held__dach a:hover { border-color: currentColor; }
.artikel--modern { padding-top: clamp(2rem, 5vw, 3.2rem); }
.artikel--modern .artikel__text { font-size: 1.08rem; line-height: 1.75; }
.artikel--modern .artikel__text::after { content: ""; display: block; clear: both; }
.artikel--modern .artikel__text > p:first-of-type { font-size: 1.16rem; }
.artikel--modern .artikel__text a { color: var(--gruen); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.artikel--modern .artikel__text a:hover { color: var(--gold-dunkel); }
.artikel--modern .artikel__text h2, .artikel--modern .artikel__text h3 { clear: none; color: var(--gruen-tief); }
.artikel--modern .artikel__text ul { padding-left: 1.2rem; }
.artikel--modern .artikel__bild { float: right; width: min(42%, 340px); margin: .35rem 0 1rem 1.8rem; }
.artikel--modern .artikel__bild img { width: 100%; border-radius: 14px; box-shadow: 0 18px 40px rgba(46, 70, 54, .18); }
.artikel__zurueck { margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--linie); }
.artikel__zurueck a { color: var(--gruen); font-weight: 600; text-decoration: none; }
.artikel__zurueck a:hover { color: var(--gold-dunkel); }
@media (max-width: 640px) { .artikel--modern .artikel__bild { float: none; width: 100%; margin: 0 0 1.2rem; } }

/* News-Kopfbilder auf breiten Monitoren (ab ca. 1400 px, z. B. 1920×1080): Kopf wächst mit der Breite, damit die Menschen ganz zu sehen sind */
@media (min-width: 1400px) { .held--artikel, .held--news { min-height: clamp(440px, 27vw, 660px); } }

/* News-Übersicht: Kopfbild der Kategorie blendet beim Filtern über */
.held--news .held__bild { transition: opacity .25s ease; }

/* Automatisch erstellte News: Quellenliste unter dem Text, Hinweis in der Vorschau */
.artikel__quellen { margin: 2rem 0 0; padding: 1rem 1.2rem; background: var(--creme, #f7f3ec); border-radius: 12px; font-size: .95rem; }
.artikel__quellen h2 { margin: 0 0 .4rem; font-size: 1rem; color: var(--gruen-tief); }
.artikel__quellen ul { margin: 0; padding-left: 1.1rem; }
.artikel__quellen a { color: var(--gruen); overflow-wrap: anywhere; }
.artikel__vorschau { border-left: 4px solid var(--gold); }

/* ---------- Ratgeber-Beitrag (templates/artikel-ratgeber.php): Einleitung + Kurzfassung, Inhalt, Abschnitte mit Foto und Infokasten, Fragen */
.artikel--ratgeber { padding: clamp(2rem, 5vw, 3.4rem) 0 1rem; }
.artikel--ratgeber .wrap { max-width: 1120px; }
.held__lead--unter { font-family: var(--serif); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.4rem); }
.rkopf { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: clamp(1.4rem, 4vw, 3rem); align-items: start; }
.rkopf__einleitung { font-size: 1.16rem; line-height: 1.75; }
.rkopf__einleitung > p:first-child::first-letter { float: left; font-family: var(--serif); font-size: 3.4em; line-height: .9; margin: .06em .12em 0 0; color: var(--gruen); }
.rkurz { background: var(--gruen); color: #fff; border-radius: var(--radius); padding: 1.3rem 1.4rem 1.1rem; box-shadow: var(--schatten); }
.rkurz__titel { margin: 0 0 .6rem; font-family: var(--serif); font-size: 1.2rem; color: #f3dfb6; }
.rkurz ul { margin: 0; padding: 0; list-style: none; }
.rkurz li { position: relative; padding: 0 0 .55rem 1.6rem; font-size: 1rem; line-height: 1.5; }
.rkurz li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-weight: 700; }
.rkurz a { color: #fff; }
.rinhalt { margin: clamp(1.8rem, 4vw, 2.6rem) 0 .6rem; padding: 1.1rem 1.3rem; background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); }
.rinhalt__titel { margin: 0 0 .5rem; font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); }
.rinhalt ol { margin: 0; padding-left: 1.3rem; columns: 2 300px; column-gap: 2.2rem; }
.rinhalt li { break-inside: avoid; padding: .15rem 0; }
.rinhalt a { text-decoration: none; color: var(--gruen); }
.rinhalt a:hover { color: var(--gold-dunkel); text-decoration: underline; }
.rabschnitt { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); grid-template-areas: "kopf kopf" "text bild" "text kasten" "text ."; grid-template-rows: auto auto auto 1fr;
  column-gap: clamp(1.4rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--linie); scroll-margin-top: 90px; }
.rabschnitt--voll { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "text"; }
.rabschnitt h2 { grid-area: kopf; display: flex; gap: .8rem; align-items: baseline; font-size: clamp(1.5rem, 3vw, 2rem); }
.rabschnitt__nr { flex: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--gold); color: #fff; font: 700 1rem/1 var(--sans); transform: translateY(-.15rem); }
.rabschnitt__text { grid-area: text; min-width: 0; font-size: 1.08rem; line-height: 1.75; }
.rabschnitt__text h3 { font-size: 1.25rem; margin: 1.4rem 0 .4rem; }
.rabschnitt__text a { color: var(--gruen); text-decoration-color: var(--gold); }
.rabschnitt__text table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .98rem; background: var(--weiss); box-shadow: var(--schatten); border-radius: 10px; overflow: hidden; }
.rabschnitt__text th, .rabschnitt__text td { padding: .6rem .8rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.rabschnitt__text thead th { background: var(--gruen-tief); color: #fff; font-weight: 600; }
.rabschnitt__text td { font-variant-numeric: tabular-nums; }
.rabschnitt__text th:first-child, .rabschnitt__text td:first-child { min-width: 7.5em; }
.rabschnitt__bild { grid-area: bild; margin: .4rem 0 1.2rem; }
.rabschnitt__bild img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--schatten); }
.rabschnitt__kasten { grid-area: kasten; }
.rkasten { border-radius: var(--radius); padding: 1.1rem 1.25rem .9rem; font-size: 1rem; line-height: 1.55; border: 1px solid var(--linie); background: var(--weiss); }
.rkasten__titel { margin: 0 0 .55rem; font-weight: 700; font-size: .85rem; letter-spacing: .07em; text-transform: uppercase; }
.rkasten ul { margin: 0; padding: 0; list-style: none; }
.rkasten li { position: relative; padding: 0 0 .5rem 1.5rem; }
.rkasten p { margin: 0 0 .5rem; }
.rkasten--fakten { background: #eef3ee; border-color: #cfdccf; } .rkasten--fakten .rkasten__titel { color: var(--salbei-dunkel); }
.rkasten--fakten li::before { content: ""; position: absolute; left: .2rem; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--salbei); }
.rkasten--tipps .rkasten__titel { color: var(--gruen); }
.rkasten--tipps li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gruen); font-weight: 700; }
.rkasten--hinweis { background: #fbf1dc; border-color: #ecd6a6; } .rkasten--hinweis .rkasten__titel { color: var(--gold-dunkel); }
.rkasten--hinweis li::before { content: "!"; position: absolute; left: .35rem; top: 0; color: var(--gold-dunkel); font-weight: 800; }
.rkasten--fazit { background: var(--gruen-tief); color: #fff; border-color: var(--gruen-tief); } .rkasten--fazit .rkasten__titel { color: #f3dfb6; }
.rkasten--fazit li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--gold); }
.rkasten--fazit a { color: #fff; }
.rfragen { padding: clamp(2rem, 5vw, 3rem) 0 1rem; border-top: 1px solid var(--linie); scroll-margin-top: 90px; max-width: 860px; }
.rfragen h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.rfuss { max-width: 860px; }
.rfuss__stand { margin: 1rem 0 0; font-size: .92rem; color: var(--grau); }
@media (max-width: 860px) {
  .rkopf { grid-template-columns: minmax(0, 1fr); }
  .rabschnitt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "text" "kasten"; grid-template-rows: none; }
  .rabschnitt__kasten { margin-top: 1rem; }
  .rabschnitt__text table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* breite Tabellen seitlich wischen */
}

/* Werbekennzeichnung: Affiliate-Knöpfe in Ratgeber-Beiträgen und Marke „Anzeige“ */
.marke-anzeige { display: inline-block; padding: .05rem .45rem; border: 1px solid currentColor; border-radius: 4px; font-size: .78em; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ranzeige { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin: 1.4rem 0 .4rem; padding: 1rem 1.1rem; border: 1px dashed var(--linie); border-radius: var(--radius); background: var(--weiss); }
.ranzeige__marke { flex-basis: 100%; font: 700 .72rem/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--grau); }
.ranzeige__bild { display: block; flex: 0 0 auto; padding: .4rem; border-radius: var(--radius); background: #fff; }
.ranzeige__bild img { display: block; width: auto; max-width: 140px; max-height: 140px; object-fit: contain; }
.rbuecher { grid-column: 1 / -1; margin-top: 1.2rem; padding: 1rem 1.1rem; border: 1px dashed var(--linie); border-radius: var(--radius); background: var(--weiss); }
.rbuecher__liste { list-style: none; margin: .8rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.rbuch a { display: flex; flex-direction: column; height: 100%; gap: .35rem; padding: .7rem; border-radius: 10px; background: var(--creme, #faf6ee); color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rbuch a:hover, .rbuch a:focus-visible { transform: translateY(-2px); box-shadow: var(--schatten); }
.rbuch__cover { display: grid; place-items: center; height: 170px; background: #fff; border-radius: 6px; }
.rbuch__cover img { max-height: 160px; max-width: 100%; width: auto; object-fit: contain; }
.rbuch__titel { font: 600 .95rem/1.3 var(--sans); }
.rbuch__unter { font-size: .8rem; line-height: 1.35; color: var(--grau); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rbuch__knopf { margin-top: auto; padding-top: .3rem; font: 700 .8rem/1.2 var(--sans); color: var(--gruen); }
.ranzeige__hinweis { flex-basis: 100%; margin: 0; font-size: .85rem; line-height: 1.5; color: var(--grau); }

/* Videos in Ratgeber-Beiträgen: eigenes MP4 oder YouTube erst nach Klick */
.rvideo { margin: .4rem 0 1.4rem; }
.rvideo video, .rvideo iframe, .rvideo__start { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); box-shadow: var(--schatten); background: #1f2b24; }
.rvideo__start { position: relative; cursor: pointer; padding: 0; background: #1f2b24 var(--poster, none) center / cover no-repeat; color: #fff; }
.rvideo__start::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(20, 30, 25, .45); }
.rvideo__play { position: absolute; left: 50%; top: 50%; translate: -50% -60%; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--gold); }
.rvideo__play svg { width: 2rem; fill: #fff; }
.rvideo__hinweis { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; font-size: .88rem; text-align: center; }
.rvideo__start:hover .rvideo__play, .rvideo__start:focus-visible .rvideo__play { scale: 1.08; }
.rvideo figcaption { margin-top: .5rem; font-size: .9rem; color: var(--grau); }

/* Zurück-Knopf unter Beiträgen */
.artikel__zurueck { display: flex; justify-content: center; margin: 1rem auto 3rem; }
.artikel__zurueck .knopf { gap: .5rem; }
/* Seitennavigation der News-Übersicht */
.newsseiten { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem; margin: 2.4rem 0 .5rem; }
.newsseiten a, .newsseiten span { display: inline-grid; place-items: center; min-width: 2.9rem; height: 2.9rem; padding: 0 .6rem; border-radius: 999px; font: 700 1rem/1 var(--sans); color: var(--gruen-tief); text-decoration: none; }
.newsseiten a { background: var(--weiss); box-shadow: var(--schatten); transition: background .2s, color .2s, transform .2s; }
.newsseiten a:hover, .newsseiten a:focus-visible { background: var(--gold); color: #fff; transform: translateY(-2px); }
.newsseiten a[aria-current] { background: var(--gruen-tief); color: #fff; box-shadow: 0 6px 18px rgba(31, 43, 36, .25); pointer-events: none; }
.newsseiten__pfeil svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
span.newsseiten__pfeil { opacity: .3; }
.newsseiten__luecke { min-width: 1.5rem !important; color: var(--grau) !important; }

/* Kasten „Seit Erscheinen geändert“ über alten, neu geschriebenen Beiträgen */
.raenderungen { margin: 0 0 2rem; }
.raenderungen p { margin: 0 0 .5rem; }

/* Autor im Kopf der News-Beiträge: dezent, klein */
.autor { display: flex; align-items: center; gap: .45rem; margin: .9rem 0 0; font-size: .85rem; opacity: .9; }
.autor img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.6); }
.autor a { color: inherit; text-decoration: none; }
.autor a:hover { text-decoration: underline; }

/* Fluss-Layout (alle Abschnitte mit Foto): Foto rechts, Text und Infokasten fließen links daneben und darunter – keine leere linke Spalte bei kurzen Texten */
@media (min-width: 861px) {
  .rabschnitt--fluss { display: flow-root; }
  .rabschnitt--fluss h2 { margin-bottom: 1rem; }
  .rabschnitt--fluss .rabschnitt__bild { float: right; width: 38%; margin: .3rem 0 1.2rem clamp(1.4rem, 4vw, 3rem); }
  .rabschnitt--fluss .rabschnitt__kasten { overflow: hidden; margin-top: 1.2rem; }
  .rabschnitt--fluss .rabschnitt__kasten .rkasten ul { columns: 2; column-gap: 2rem; }
  .rabschnitt--fluss .rabschnitt__kasten .rkasten li { break-inside: avoid; }
  .rabschnitt--fluss .rbuecher { clear: both; }
}

/* Startseite: Video statt Einstiegsfoto (Foto dient als Vorschaubild) */
.einstieg__video { margin: 0; }
.einstieg__video .rvideo__start, .einstieg__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; background-position: 70% center; }

/* Danke-Karte: Hinweis, dass die Kurzanfrage in die Bedarfsanalyse übernommen wird */
.erfolg__uebernahme { display: block; margin: 0 auto .7rem; max-width: 34rem; padding: .55rem .9rem; border-radius: .6rem; background: #e8efe9; color: var(--gruen, #2f4a3a); font-weight: 600; font-size: .95rem; }