/* ==========================================================================
   Dr. Knut Bär — Theme-Stylesheet
   Werte aus dem Claude-Design-Entwurf B „Bewegung“ (24.09.2026), maschinell
   aus den .dc.html ausgelesen. Bewegung/Hover nach site-behaviour.js und der
   Logik-Klasse des Entwurfs (accent #8A6120, Karten-Hover #F4EFE6, 44 px).
   Lädt auch in der Editor-Leinwand (add_editor_style) — Grundstile deshalb
   zusätzlich in editor.css, dort nur mit var().
   ========================================================================== */

/* ---------- Schrift (lokal, variabel 300–900) ---------- */
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Figtree";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/figtree-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token ---------- */
:root {
	--b-petrol: #0B3F50;
	--b-petrol-tief: #0A3243;
	--b-akzent: #016F8C;
	--b-gold: #8A6120;
	--b-gold-hell: #F0C98D;
	--b-sand-hell: #F2D9AE;
	/* Entwurf #C08655 = 2,92:1 auf Sand (Sterne, Tagesbalken brauchen 3:1) — 3 % dunkler: 3,10:1. QA 24.09.2026 */
	--b-kupfer: #BA8252;
	--b-kupfer-hell: #E0AE7F;
	--b-kupfer-vorzeile: #D9A96F;
	--b-grund: #FBF8F3;
	--b-weiss: #fff;
	--b-platzhalter: #E7E0D5;
	--b-linie: #E1D8C9;
	--b-linie-trenner: #DDD3C4;
	--b-rahmenlinie: #D9CFC0;
	--b-punkt: #C9BFAF;
	--b-tabelle: #EAF1F2;
	--b-tabelle-linie: #D3E1E4;
	--b-tabelle-kopf: #C9DADE;
	--b-sand-flaeche: #EFE9DE;
	--b-karte-hover: #F4EFE6;
	--b-text: #1A2B31;
	--b-text-leise: #54666D;
	--b-auf-petrol: #C7DBE0;
	--b-auf-petrol-lead: #DCEBEF;
	--b-auf-petrol-hell: #EAF3F5;
	--b-auf-petrol-zusatz: #C7E3EA;
	--b-hero-lead: #E4EFF2;

	--b-schrift: "Figtree", Helvetica, sans-serif;
	--b-grundgroesse: 16px;
	--b-grundzeile: normal;
	--b-rand: clamp(22px, 4.5vw, 72px);
	--b-oben: clamp(80px, 9vw, 140px);
	--b-kopfabstand: clamp(30px, 4vw, 52px);
	--b-kurve: cubic-bezier(.22, 1, .36, 1);
	--b-kurve-sanft: cubic-bezier(.16, 1, .3, 1);

	--b-radius-karte: 32px;
	--b-schatten-dialog: 0 40px 90px -40px rgba(11, 63, 80, .6);
	--b-schatten-karte: 0 24px 60px -44px rgba(11, 63, 80, .5);
	--b-schatten-schritt: 0 24px 60px -40px rgba(11, 63, 80, .4);
	--b-schatten-knopf: 0 16px 34px -18px rgba(11, 63, 80, .55);
}

/* ---------- Grundlagen ---------- */
/* Bewusst KEIN globales box-sizing:border-box: Der Entwurf rechnet mit content-box —
   Polsterung und Rahmen kommen zu Breiten/Höhen hinzu (Knöpfe 58+3, Fähnchen 110+28,
   Inhaltsbreite 1440 px + Seitenrand). Gemessen 24.09.2026 im Entwurf. */
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--b-grund);
	color: var(--b-text);
	font-family: var(--b-schrift);
	font-size: var(--b-grundgroesse);
	line-height: var(--b-grundzeile);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
	hyphens: auto;
	-webkit-hyphens: auto;
	overflow-wrap: break-word;
}
img, video { max-width: 100%; height: auto; }
a { color: var(--b-akzent); text-decoration: none; }
*:focus-visible { outline: 3px solid var(--b-gold); outline-offset: 3px; }
button { font-family: inherit; }
section[id], main [id] { scroll-margin-top: 140px; }
@media (max-width: 759px) { section[id], main [id] { scroll-margin-top: 90px; } }

.b-sprung {
	position: absolute; left: -9999px; top: 0; z-index: 200;
	background: var(--b-petrol); color: #fff; padding: 14px 22px; border-radius: 0 0 12px 0;
}
.b-sprung:focus { left: 16px; color: #fff; }

.b-shell { max-width: 1440px; margin-inline: auto; padding-inline: var(--b-rand); }
/* Gasse für die Fähnchen rechts */
@media (min-width: 760px) and (max-width: 1620px) {
	/* wie im Entwurf mit !important: gilt auch für Container mit eigener Polsterung */
	[data-shell] { padding-right: 132px !important; }
}

.b-icon { flex: 0 0 auto; }

/* ---------- Typografie ---------- */
.b-vorzeile {
	margin: 0 0 20px;
	font-size: 13.5px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	color: var(--b-gold);
}
.b-vorzeile--hell { color: var(--b-gold-hell); }
.b-vorzeile--sand { color: var(--b-sand-hell); }
.b-vorzeile--kupfer { color: var(--b-kupfer-hell); }
.b-vorzeile--gross { font-size: 14px; margin-bottom: 22px; }

.b-h1 {
	margin: 0; max-width: 18em;
	font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.032em; font-weight: 700;
}
.b-h1--start { max-width: 15em; font-size: clamp(42px, 7vw, 104px); line-height: .98; letter-spacing: -.035em; }

.b-h2 {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 50px); line-height: 1.1; letter-spacing: -.028em; font-weight: 700;
}
.b-h2--experte { line-height: 1.08; }
.b-h2--teaser { font-size: clamp(28px, 3.1vw, 46px); line-height: 1.14; }
.b-h2--teaser span { color: var(--b-akzent); }
.b-h2--klein { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.b-h2--termin { margin-top: 0; max-width: 24em; font-size: clamp(26px, 3vw, 42px); line-height: 1.12; letter-spacing: -.026em; }
.b-h2--mitbringen { font-size: clamp(26px, 2.5vw, 38px); line-height: 1.14; letter-spacing: -.025em; }
.b-h2--cta { margin-inline: auto; max-width: 22em; font-size: clamp(32px, 4.4vw, 64px); line-height: 1.05; letter-spacing: -.032em; }

/* ---------- Abschnitte ---------- */
.b-abschnitt { padding-top: var(--b-oben); }
.b-abschnitt--abstand-klein { padding-top: clamp(60px, 7vw, 100px); }
.b-abschnitt--abstand-mittel { padding-top: clamp(80px, 9vw, 130px); }
.b-abschnitt--abstand-unten { padding-bottom: var(--b-oben); }
.b-abschnitt--abstand-rechtstext { padding-top: clamp(34px, 4vw, 54px); }

.b-abschnitt__kopf { max-width: var(--b-kopfbreite, 40em); }
.b-abschnitt__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(24px, 4vw, 70px);
	align-items: start;
}
.b-abschnitt__raster--bild { gap: clamp(30px, 5vw, 70px); }
.b-abschnitt--bild-rechts .b-abschnitt__raster { gap: clamp(30px, 5vw, 80px); align-items: center; }
.b-abschnitt__links .b-abschnitt__kopf { max-width: none; }
.b-klebend { position: sticky; top: 120px; }
.b-abschnitt__kopftext { margin: 26px 0 0; max-width: 28em; font-size: 18.5px; line-height: 1.65; color: var(--b-text-leise); }
.b-inhalt-haupt > .b-abschnitt:last-child { padding-bottom: var(--b-oben); }

/* Fließtext: Absätze, Listen, Zwischenüberschriften */
.b-fliesstext { min-width: 0; }
.b-fliesstext > p {
	margin: 20px 0 0; max-width: 36em;
	font-size: 18.5px; line-height: 1.65; color: var(--b-text-leise);
}
.b-fliesstext > :first-child { margin-top: 0; }
.b-abschnitt__kopf + .b-fliesstext > p:first-child,
.b-abschnitt__kopf + .b-fliesstext > ul:first-child { margin-top: 26px; }
.b-abschnitt__kopf + .b-fliesstext > :is(.b-tabelle, .b-karten, .b-rahmen, .b-galerie, .b-hinweisbox, .b-publikationen, .b-knoepfe):first-child { margin-top: var(--b-kopfabstand); }
.b-fliesstext > p + :is(.b-tabelle, .b-karten, .b-rahmen, .b-galerie, .b-publikationen) { margin-top: var(--b-kopfabstand); }
.b-fliesstext > :is(.b-tabelle, .b-karten, .b-galerie, .b-publikationen) + p { margin-top: 30px; }
.b-fliesstext > .b-knoepfe { margin-top: 34px; }
.b-fliesstext > .b-rahmen--breit + .b-karten { margin-top: clamp(18px, 2.4vw, 30px); }
.b-fliesstext p a, .b-fliesstext li a, .b-frage__antwort a { color: var(--b-akzent); text-decoration: underline; text-underline-offset: 3px; }
.b-fliesstext p a:hover, .b-fliesstext li a:hover, .b-frage__antwort a:hover { color: var(--b-gold); }
.b-fliesstext > h3 {
	margin: 34px 0 0;
	font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; color: var(--b-text);
}
.b-fliesstext > h3 + p { margin-top: 20px; }
.b-fliesstext > ul {
	display: flex; flex-direction: column; gap: 13px;
	margin: 26px 0 0; padding: 0; list-style: none;
}
.b-fliesstext > ul > li {
	display: flex; gap: 14px; align-items: flex-start;
	font-size: 17.5px; line-height: 1.5; color: var(--b-text);
}
.b-fliesstext > ul > li::before {
	content: ""; flex: 0 0 21px; width: 21px; height: 21px; margin-top: 1px;
	background: var(--b-gold);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.b-fliesstext > ul + p { margin-top: 20px; }
/* Gestapelt: Absätze stehen im Entwurf im Kopf-Container (max. Kopfbreite) bzw. im Nachtext (40em). */
.b-abschnitt--gestapelt > .b-fliesstext > p { max-width: min(36em, var(--b-kopfbreite-px, 640px)); }
/* Überschrift ohne Vorzeile direkt über Karten: Abstand nach Entwurf (Schwerpunkte 56, Behandlungen 50) */
.b-abschnitt__kopf:not(:has(.b-vorzeile)) + .b-fliesstext > .b-karten--dunkel:first-child { margin-top: clamp(30px, 4vw, 56px); }
.b-abschnitt__kopf:not(:has(.b-vorzeile)) + .b-fliesstext > .b-karten--kachel:first-child { margin-top: clamp(30px, 4vw, 50px); }

/* Textspalte neben einem Foto */
.b-abschnitt__textspalte .b-abschnitt__kopf { max-width: none; }
.b-abschnitt__raster:has(.b-rahmen--schmal) .b-fliesstext > p { max-width: 34em; }
.b-abschnitt__raster:has(.b-rahmen--schmal) .b-abschnitt__kopf + .b-fliesstext > p:first-child { margin-top: 28px; }

/* Rechtstexte */
.b-abschnitt--abstand-rechtstext .b-fliesstext > p,
.b-abschnitt--abstand-rechtstext .b-fliesstext > ul > li { font-size: 17.5px; line-height: 1.7; max-width: var(--b-kopfbreite-px, 704px); }
.b-abschnitt--abstand-rechtstext .b-abschnitt__kopf + .b-fliesstext > p:first-child { margin-top: 16px; }
.b-abschnitt--abstand-rechtstext .b-fliesstext > p + p { margin-top: 12px; }

/* Zwei Publikationslisten nebeneinander */
.b-fliesstext:has(> .b-publikationen + .b-publikationen) {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 clamp(28px, 4vw, 64px); align-items: start;
}
.b-fliesstext:has(> .b-publikationen + .b-publikationen) > p { grid-column: 1 / -1; }
.b-fliesstext:has(> .b-publikationen + .b-publikationen) > .b-publikationen { margin-top: var(--b-kopfabstand); }

/* ---------- Bildrahmen ---------- */
.b-rahmen {
	margin: 0; border-radius: 48px; overflow: hidden;
	aspect-ratio: var(--b-format, 4/3); background: var(--b-platzhalter);
}
.b-rahmen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--b-fokus, 50% 50%); }
.b-rahmen--schmal { width: 100%; max-width: 440px; }
.b-abschnitt--bild-rechts .b-rahmen--schmal { margin-left: auto; }
.b-rahmen--breit { width: 100%; }
.b-rahmen.b-klebend { top: 120px; }

/* ---------- Schaltflächen ---------- */
.b-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.b-knopf {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 58px; padding: 0 32px; border-radius: 999px;
	font-size: 17px; font-weight: 600; text-align: center;
	cursor: pointer; border: 0;
	transition: transform .55s var(--b-kurve), box-shadow .55s var(--b-kurve), filter .5s ease, background-color .3s ease;
}
.b-knopf .b-icon--tel { margin-right: 10px; }
.b-knopf__pfeil {
	display: inline-flex; width: 0; margin-left: 0; opacity: 0; overflow: hidden;
	transform: translateX(-6px);
	transition: width .55s var(--b-kurve), margin-left .55s var(--b-kurve), opacity .45s ease, transform .55s var(--b-kurve);
}
.b-knopf:hover, .b-knopf:focus-visible {
	transform: translateY(-2px); box-shadow: var(--b-schatten-knopf); filter: brightness(1.06);
}
.b-knopf:hover .b-knopf__pfeil, .b-knopf:focus-visible .b-knopf__pfeil {
	width: 1.1em; margin-left: 10px; opacity: 1; transform: translateX(0);
}
.b-knopf:active { transform: scale(.97); transition-duration: .16s; }
.b-knopf--gold, .b-knopf--gold:hover { background: var(--b-gold); color: #fff; }
.b-knopf--petrol, .b-knopf--petrol:hover { background: var(--b-akzent); color: #fff; }
.b-knopf--umriss-hell, .b-knopf--umriss-hell:hover { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .5); }
.b-knopf--umriss-dunkel, .b-knopf--umriss-dunkel:hover { background: transparent; color: var(--b-text); border: 1.5px solid var(--b-rahmenlinie); }
.b-knopf--klein { min-height: 52px; padding: 0 28px; font-size: 16.5px; }
.b-knopf--gross { min-height: 60px; padding: 0 34px; font-size: 17.5px; }

.b-rundknopf {
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	border: 1.5px solid var(--b-rahmenlinie); border-radius: 999px;
	background: #fff; color: var(--b-text); cursor: pointer;
	transition: background .45s ease, border-color .45s ease, color .45s ease, transform .45s var(--b-kurve), opacity .3s ease;
}
.b-rundknopf:hover, .b-rundknopf:focus-visible { background: var(--b-akzent); border-color: var(--b-akzent); color: #fff; transform: translateY(-2px); }
.b-rundknopf:active { transform: scale(.97); }

/* ---------- Kopfzeile ---------- */
.b-kopfzeile {
	position: fixed; top: 0; left: 0; right: 0; z-index: 120;
	background: transparent;
	transition: background .4s ease, box-shadow .4s ease, -webkit-backdrop-filter .4s ease, backdrop-filter .4s ease;
}
.admin-bar .b-kopfzeile { top: 32px; }
@media (max-width: 782px) { .admin-bar .b-kopfzeile { top: 46px; } }
/* Lesbarkeit über dem Foto: Petrol-Schleier hinter der Kopfzeile, solange sie
   transparent ist. Gemessen gegen den hellsten Bildpunkt: Telefon 3,3 → 4,7:1,
   „Menü“ 2,2 → 6,4:1 (mit Petrol- statt Weißfüllung des Knopfs). QA 24.09.2026 */
.b-kopfzeile::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 40px);
	background: linear-gradient(180deg, rgba(11, 63, 80, .5), rgba(11, 63, 80, 0));
	pointer-events: none; transition: opacity .4s ease;
}
.b-kopfzeile.ist-gescrollt::before { opacity: 0; }
.b-kopfzeile__innen { position: relative; }
.b-kopfzeile.ist-gescrollt {
	background: rgba(251, 248, 243, .94);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 12px 30px -22px rgba(11, 63, 80, .35);
}
.b-kopfzeile__innen { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 86px; }
.b-kopfzeile__plakette {
	display: flex; align-items: center;
	padding: 18px 26px 20px; border-radius: 0 0 24px 24px;
	background: rgba(251, 248, 243, .94);
	box-shadow: 0 12px 30px -20px rgba(11, 63, 80, .45);
	transition: background .4s ease, box-shadow .4s ease;
}
.ist-gescrollt .b-kopfzeile__plakette { background: transparent; box-shadow: none; }
.b-kopfzeile__logo { display: block; height: 78px; width: auto; }
.b-kopfzeile__aktionen { display: flex; align-items: center; gap: 10px; }
.b-kopfzeile__tel {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px;
	font-size: 16px; font-weight: 600; color: #fff;
	text-shadow: 0 1px 12px rgba(11, 63, 80, .5);
	transform: translateX(var(--b-cta-breite, 0px));
	transition: transform .45s var(--b-kurve-sanft), color .4s ease;
}
.b-kopfzeile__tel:hover { color: #fff; }
.ist-gescrollt .b-kopfzeile__tel { color: var(--b-text); text-shadow: none; transform: translateX(0); }
.ist-gescrollt .b-kopfzeile__tel:hover { color: var(--b-gold); }
.b-kopfzeile__termin.b-knopf { min-height: 48px; padding: 0 26px; font-size: 16px; white-space: nowrap; }
.b-kopfzeile__termin {
	opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px);
	transition: opacity .35s ease, transform .35s ease, visibility .35s, box-shadow .55s var(--b-kurve), filter .5s ease;
}
.ist-gescrollt .b-kopfzeile__termin { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
.ist-gescrollt .b-kopfzeile__termin:hover { transform: translateY(-2px); }
.b-kopfzeile__menue {
	display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px;
	border: 1.5px solid rgba(255, 255, 255, .6); border-radius: 999px;
	background: rgba(11, 63, 80, .35); color: #fff;
	font-size: 16px; font-weight: 600; cursor: pointer;
	transition: color .4s ease, border-color .4s ease, background .4s ease, transform .16s ease;
}
.b-kopfzeile__menue:active { transform: scale(.97); }
.ist-gescrollt .b-kopfzeile__menue { border-color: var(--b-rahmenlinie); background: transparent; color: var(--b-text); }
.b-kopfzeile__striche { display: flex; flex-direction: column; gap: 4px; }
.b-kopfzeile__striche span { display: block; width: 18px; height: 2px; background: currentColor; }
@media (max-width: 759px) {
	.b-kopfzeile__innen { padding-left: 16px; padding-right: 16px; min-height: 72px; gap: 10px; }
	.b-kopfzeile__logo { height: 54px; }
	.b-kopfzeile__tel, .b-kopfzeile__termin { display: none; }
}

/* ---------- Vollbild-Menü ---------- */
.b-overlay {
	position: fixed; inset: 0; z-index: 160;
	background: var(--b-petrol); color: #fff; overflow-y: auto;
	opacity: 0; visibility: hidden; pointer-events: none;
	transition: opacity .4s var(--b-kurve-sanft), visibility 0s linear .43s;
}
.b-overlay.ist-offen { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .4s var(--b-kurve-sanft), visibility 0s; }
.b-overlay__innen { padding-top: 26px; padding-bottom: 70px; }
.b-overlay__oben { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.b-overlay__logo { display: block; height: 56px; width: auto; }
.b-overlay__schliessen {
	display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px;
	border: 1.5px solid rgba(255, 255, 255, .35); border-radius: 999px; background: none;
	font-size: 16px; font-weight: 600; color: #fff; cursor: pointer;
}
.b-overlay__schliessen span { font-size: 19px; }
.b-overlay__spalten {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(20px, 3vw, 44px); margin-top: clamp(36px, 6vw, 80px);
}
.b-overlay__spalte {
	opacity: 0; transform: translateY(26px);
	transition: opacity .5s var(--b-kurve-sanft), transform .5s var(--b-kurve-sanft);
}
.ist-offen .b-overlay__spalte { opacity: 1; transform: none; }
.ist-offen .b-overlay__spalte:nth-child(1) { transition-delay: 80ms; }
.ist-offen .b-overlay__spalte:nth-child(2) { transition-delay: 150ms; }
.ist-offen .b-overlay__spalte:nth-child(3) { transition-delay: 220ms; }
.ist-offen .b-overlay__spalte:nth-child(4) { transition-delay: 290ms; }
.b-overlay__kopf {
	display: block; margin: 0; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .16);
	font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--b-auf-petrol);
}
.b-overlay__kopf a { color: inherit; }
.b-overlay__liste, .b-overlay__unter { margin: 0; padding: 0; list-style: none; }
.b-overlay__link {
	display: flex; align-items: center; min-height: 44px;
	color: #fff; font-size: 16.5px;
}
.b-overlay__ohne-ziel { color: rgba(255, 255, 255, .6); }
/* Spaltenweise Größen nach Entwurf: Praxis | Schwerpunkte | Beschwerden | Behandlungen */
.b-overlay__spalte--1 .b-overlay__link { min-height: 50px; font-size: 19px; font-weight: 600; }
.b-overlay__spalte--1 .b-overlay__link--klein { min-height: 44px; font-size: 16.5px; font-weight: 400; color: var(--b-auf-petrol); }
.b-overlay__spalte--2 .b-overlay__link { min-height: 48px; font-size: 17.5px; }
.b-overlay__spalte--4 .b-overlay__link { min-height: 48px; font-size: 17px; }
.b-overlay__leiste {
	position: sticky; bottom: 0; margin-top: clamp(36px, 5vw, 64px);
	background: var(--b-gold); box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .45);
}
.b-overlay__leiste-innen {
	padding-top: clamp(18px, 2vw, 26px); padding-bottom: clamp(18px, 2vw, 26px);
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px;
}
.b-overlay__aktion {
	display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 24px;
	/* QA 24.09.2026: Entwurf rgba(255,255,255,.14) auf Gold = 4,12:1 (Hover 3,38) → Petrol .22/.32 = 6,68/7,27:1 */
	border-radius: 999px; background: rgba(11, 63, 80, .22); color: #fff;
	font-size: 17px; font-weight: 600; transition: background .3s ease, transform .16s ease;
}
.b-overlay__aktion:hover { background: rgba(11, 63, 80, .32); color: #fff; }
.b-overlay__aktion--hell, .b-overlay__aktion--hell:hover { background: #fff; color: var(--b-gold); }
.b-overlay__aktion:active { transform: scale(.97); }
@media (max-width: 759px) {
	.b-overlay__innen { padding-left: 18px; padding-right: 18px; }
	.b-overlay__leiste { display: none; }
}

/* Goldene Unterstreichung wischt ein (Fußzeile, Overlay) */
.b-overlay__link, .b-overlay__kopf a, .b-fuss a:not(.b-knopf) {
	background-image: linear-gradient(var(--b-gold), var(--b-gold));
	background-repeat: no-repeat; background-position: 0 calc(100% - 8px); background-size: 0% 2px;
	transition: background-size .6s var(--b-kurve), color .45s ease;
}
.b-overlay__link:hover, .b-overlay__link:focus-visible, .b-overlay__link[aria-current="page"],
.b-overlay__kopf a:hover, .b-fuss a:not(.b-knopf):hover, .b-fuss a:not(.b-knopf):focus-visible { background-size: 100% 2px; }
.b-overlay__link:hover, .b-fuss a:not(.b-knopf):hover { color: inherit; }

/* ---------- Fähnchen rechts / Leiste unten ---------- */
.b-faehnchen {
	position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 130;
	display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.b-faehnchen__lasche {
	display: flex; align-items: center; justify-content: center;
	writing-mode: vertical-rl; min-height: 110px; width: 48px; padding: 14px 0;
	color: #fff; border-radius: 12px 0 0 12px;
	font-size: 14.5px; font-weight: 600; letter-spacing: .06em;
	transition: width .5s var(--b-kurve), box-shadow .5s var(--b-kurve), letter-spacing .5s ease;
}
.b-faehnchen__lasche:hover, .b-faehnchen__lasche:focus-visible {
	width: 64px; color: #fff; letter-spacing: .09em;
	box-shadow: -14px 0 30px -12px rgba(11, 63, 80, .6);
}
.b-faehnchen__lasche--tel { background: var(--b-akzent); }
.b-faehnchen__lasche--termin { background: var(--b-gold); }
.b-faehnchen__lasche--anfahrt { background: var(--b-petrol); }
.b-leiste { display: none; }
@media (max-width: 759px) {
	.b-faehnchen { display: none; }
	.b-leiste {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
		display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(11, 63, 80, .96);
		-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
		box-shadow: 0 -16px 34px -22px rgba(0, 0, 0, .6);
	}
	.b-leiste__knopf {
		display: flex; align-items: center; justify-content: center; gap: 9px;
		min-height: 54px; border-radius: 999px; background: rgba(255, 255, 255, .15);
		color: #fff; font-size: 15.5px; font-weight: 600; white-space: nowrap;
	}
	.b-leiste__knopf:hover { color: #fff; }
	.b-leiste__knopf:active { transform: scale(.97); }
	.b-leiste__knopf--termin { background: var(--b-gold); }
}
.b-menue-offen .b-faehnchen, .b-menue-offen .b-leiste { display: none; }

/* ---------- Fortschrittsbalken ---------- */
.b-fortschritt {
	position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 125;
	background: linear-gradient(90deg, var(--b-akzent), var(--b-gold));
	pointer-events: none; opacity: 0; transition: opacity .3s ease;
}
.admin-bar .b-fortschritt { top: 32px; }

/* ---------- Seitenkopf ---------- */
.b-kopf {
	position: relative; display: flex; align-items: flex-end;
	min-height: clamp(380px, 46vh, 560px); overflow: hidden;
	background: var(--b-petrol); color: #fff;
}
.b-kopf--start { min-height: min(90vh, 880px); min-height: min(90svh, 880px); }
.b-kopf__bild { position: absolute; inset: -12% 0; will-change: transform; }
.b-kopf__bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--b-fokus, 50% 50%); }
.b-kopf__verlauf {
	position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .8) 100%);
}
.b-kopf__verlauf--seite { background: linear-gradient(100deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .42) 45%, transparent 100%); }
.b-kopf--start .b-kopf__verlauf { background: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .78) 100%); }
.b-kopf--start .b-kopf__verlauf--seite { background: linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 40%, rgba(0, 0, 0, .12) 72%, transparent 100%); }
.b-kopf__innen { position: relative; width: 100%; padding-top: clamp(120px, 15vw, 180px); padding-bottom: clamp(40px, 5vw, 64px); }
.b-kopf--start .b-kopf__innen { padding-top: clamp(120px, 16vw, 200px); padding-bottom: clamp(52px, 6vw, 86px); }
.b-kopf__lead { margin: 24px 0 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.6; color: var(--b-auf-petrol-lead); }
.b-kopf__raster {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: clamp(20px, 2vw, 36px); align-items: start; margin-top: clamp(16px, 1.8vw, 24px);
}
.b-kopf__lead--start { margin: 0; max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); color: var(--b-hero-lead); }
.b-kopf__aktionen { padding-left: clamp(0px, 4vw, 64px); }
.b-kopf__plaketten { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.4vw, 46px); }
.b-plakette {
	display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 9px 24px 9px 20px;
	border-radius: 999px; border: 1px solid rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	color: #fff; transition: transform .6s var(--b-kurve), background .4s ease;
}
.b-plakette:hover, .b-plakette:focus-visible { color: #fff; transform: translateY(-2px); background: rgba(255, 255, 255, .2); }
.b-plakette__wert { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.b-plakette__rest { display: flex; flex-direction: column; line-height: 1.3; }
.b-plakette__sterne { color: var(--b-gold-hell); font-size: 13px; letter-spacing: .14em; }
.b-plakette__anzahl { font-size: 14.5px; color: var(--b-auf-petrol-lead); white-space: nowrap; }
@media (max-width: 759px) {
	.b-kopf__aktionen { padding-left: 0; }
	.b-nur-breit { display: none; }
	.b-kopf__plaketten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
	.b-plakette { min-height: 52px; padding: 8px 14px; gap: 10px; }
	.b-plakette__wert { font-size: 21px; }
	.b-plakette__anzahl { white-space: normal; font-size: 12.5px; line-height: 1.25; }
}

/* ---------- Einleitung ---------- */
.b-intro__raster {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(24px, 4vw, 70px); align-items: start;
}
.b-intro__lead { margin: 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; letter-spacing: -.018em; font-weight: 600; color: var(--b-text); }
.b-intro--start { padding-top: clamp(60px, 7vw, 100px); }
.b-intro--start .b-intro__lead { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.35; letter-spacing: -.022em; }
.b-intro--start .b-fliesstext > p { max-width: none; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.7; }

/* ---------- Tabelle ---------- */
.b-tabelle--flaeche {
	min-width: 0; background: var(--b-tabelle); border-radius: 32px;
	padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 44px) clamp(10px, 1.5vw, 18px);
}
.b-tabelle__zeile {
	display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	gap: 8px 32px; padding: 22px 4px; border-bottom: 1px solid var(--b-tabelle-linie);
}
.b-tabelle__zeile:last-child { border-bottom: 0; }
.b-tabelle__zeile strong { font-size: 18px; font-weight: 700; color: var(--b-text); }
.b-tabelle__zeile span { font-size: 17.5px; line-height: 1.55; color: var(--b-text-leise); }
.b-tabelle__zeile--kopf {
	gap: 12px 32px; padding: 0 4px 14px; border-bottom: 2px solid var(--b-tabelle-kopf);
}
.b-tabelle__zeile--kopf span {
	font-size: 13.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	line-height: normal; color: var(--b-petrol); hyphens: manual;
}
.b-tabelle--zeitleiste .b-tabelle__zeile {
	grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: 12px 28px; padding: 20px 4px;
	border-bottom: 1px solid var(--b-linie);
}
.b-tabelle--zeitleiste .b-tabelle__zeile:last-child { border-bottom: 1px solid var(--b-linie); }
.b-tabelle--zeitleiste .b-tabelle__zeile strong { font-size: 17.5px; color: var(--b-akzent); }
.b-tabelle--zeitleiste .b-tabelle__zeile span { color: var(--b-text); }
/* Abweichung vom Entwurf: minmax(0,260px) würde die rechte Spalte auf dem
   Telefon auf null drücken (Spur wächst vor dem fr-Anteil). Unter 620 px untereinander. */
@media (max-width: 619px) {
	.b-tabelle__zeile, .b-tabelle--zeitleiste .b-tabelle__zeile { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.b-tabelle__zeile--kopf span:last-child { display: none; }
}

/* ---------- Karten ---------- */
.b-karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }
.b-karten--dunkel { gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.b-karten--kachel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
@media (max-width: 900px) { .b-karten:not(.b-karten--kachel) { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .b-karten:not(.b-karten--kachel) { grid-template-columns: 1fr; } }

.b-karte {
	display: flex; flex-direction: column;
	padding: 34px 32px 32px; background: #fff; color: var(--b-text);
	border-radius: 32px; box-shadow: var(--b-schatten-karte);
	transition: transform .62s var(--b-kurve), box-shadow .62s var(--b-kurve), background-color .5s ease;
}
a.b-karte:hover, a.b-karte:focus-visible { color: var(--b-text); }
a.b-karte:active { transform: scale(.985); }
.b-karte__strich { display: block; width: 34px; height: 3px; border-radius: 999px; background: var(--b-gold); }
.b-karte__vorzeile { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--b-kupfer-vorzeile); }
.b-karte__titel { display: block; margin-top: 20px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.b-karte__text { display: block; margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--b-text-leise); }
.b-karte__marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.b-karte__marke { padding: 8px 15px; background: var(--b-sand-flaeche); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--b-text); }
.b-karte__mehr { display: flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 15.5px; font-weight: 600; color: var(--b-gold); }

.b-karten--dunkel .b-karte { padding: 38px 34px 34px; background: var(--b-petrol); color: #fff; border-radius: 48px; box-shadow: none; }
.b-karten--dunkel a.b-karte:hover { color: #fff; }
.b-karten--dunkel .b-karte__strich, .b-karten--kachel .b-karte__strich, .b-karten--kuerzel .b-karte__strich { display: none; }
.b-karten--dunkel .b-karte__titel { margin-top: 0; font-size: 24px; letter-spacing: -.02em; line-height: 1.15; }
.b-karten--dunkel .b-karte__vorzeile + .b-karte__titel { margin-top: 16px; font-size: 26px; }
.b-karten--dunkel .b-karte__text { color: var(--b-auf-petrol); }
.b-karten--dunkel .b-karte__mehr { margin-top: auto; padding-top: 20px; color: var(--b-gold-hell); }

.b-karten--kachel .b-karte { display: block; padding: 36px 28px 34px; background: var(--b-petrol); color: #fff; border-radius: 24px; box-shadow: none; }
.b-karten--kachel a.b-karte:hover { color: #fff; }
.b-karten--kachel .b-karte__titel { margin-top: 0; font-size: 20px; letter-spacing: 0; line-height: 1.25; }
.b-karten--kachel .b-karte__text { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--b-auf-petrol); }

.b-karten--kuerzel .b-karte { padding: 32px 30px 30px; }
.b-karten--kuerzel .b-karte__titel { margin-top: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1; color: var(--b-petrol); }
.b-karten--kuerzel .b-karte__text { margin-top: 14px; line-height: 1.55; }
.b-karten--kuerzel .b-karte__mehr { margin-top: auto; padding-top: 18px; font-size: 15px; color: var(--b-akzent); }
.b-karten--kuerzel .b-karte__mehr .b-icon { display: none; }

/* ---------- Hinweis-Kasten ---------- */
.b-hinweisbox {
	display: flex; flex-direction: column;
	padding: clamp(30px, 3vw, 44px); background: var(--b-petrol); color: #fff; border-radius: 48px;
}
.b-hinweisbox .b-vorzeile { margin: 0; font-size: 12.5px; letter-spacing: .14em; color: var(--b-kupfer-vorzeile); }
.b-hinweisbox .b-h2--hinweis { margin-top: 16px; max-width: 24em; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; letter-spacing: -.02em; }
.b-hinweisbox .b-fliesstext > p { margin-top: 14px; max-width: 38em; font-size: 17px; line-height: 1.6; color: var(--b-auf-petrol); }
.b-hinweisbox > .b-knopf { align-self: flex-start; margin-top: 26px; }
.b-hinweisbox--geteilt {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(24px, 4vw, 60px); padding: clamp(34px, 4vw, 60px);
}
.b-hinweisbox--geteilt .b-vorzeile { margin: 0 0 20px; font-size: 13.5px; letter-spacing: .16em; color: var(--b-gold-hell); }
.b-hinweisbox--geteilt .b-h2--hinweis { margin: 0; max-width: none; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; letter-spacing: -.028em; }
.b-hinweisbox--geteilt .b-fliesstext > p { margin-top: 18px; max-width: none; font-size: 18px; line-height: 1.65; color: var(--b-auf-petrol-hell); }
.b-hinweisbox--geteilt .b-fliesstext > p:first-child { margin-top: 0; }
.b-hinweisbox .b-fliesstext > ul > li { color: #fff; }

/* ---------- Termin-Band ---------- */
.b-termin {
	display: flex; flex-direction: column;
	padding: clamp(34px, 4vw, 60px); background: var(--b-petrol); color: #fff; border-radius: 48px;
}
.b-termin__text { display: block; margin: 18px 0 0; max-width: 42em; font-size: 18.5px; line-height: 1.65; color: var(--b-auf-petrol-lead); }
.b-termin__knoepfe { margin-top: 34px; }

/* ---------- Häufige Fragen ---------- */
.b-faq { display: flex; flex-direction: column; gap: 12px; max-width: 60em; margin-top: var(--b-kopfabstand); }
.b-frage { padding: 30px 32px; background: #fff; border-radius: 32px; box-shadow: var(--b-schatten-karte); }
.b-frage__frage {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px;
	font-size: 19px; font-weight: 700; letter-spacing: -.012em; color: var(--b-text);
	cursor: pointer; list-style: none;
}
.b-frage__frage::-webkit-details-marker { display: none; }
.b-frage__plus { flex: 0 0 auto; color: var(--b-gold); font-size: 22px; font-weight: 400; transition: transform .35s var(--b-kurve); }
.b-frage[open] .b-frage__plus { transform: rotate(45deg); }
.b-frage__antwort p { margin: 14px 0 0; font-size: 17px; line-height: 1.65; color: var(--b-text-leise); }

/* ---------- Videos ---------- */
.b-videos {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 28px); margin-top: var(--b-kopfabstand);
}
.b-videos:has(> .b-video:only-child) { max-width: 900px; }
.b-video { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.b-video__rahmen { position: relative; border-radius: 32px; overflow: hidden; aspect-ratio: 16/9; background: var(--b-petrol); }
.b-video__schild {
	position: absolute; top: 16px; left: 16px; z-index: 1; padding: 7px 14px;
	border-radius: 999px; background: #fff; color: var(--b-petrol);
	font-size: 13px; font-weight: 700; letter-spacing: .04em; pointer-events: none;
}
.b-video__film { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-video__unterschrift { margin-top: 18px; }
.b-video__unterschrift strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.012em; line-height: 1.25; color: var(--b-text); }
.b-video__unterschrift span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--b-text-leise); }
@media (max-width: 759px) { .b-video__rahmen.ist-hochkant { aspect-ratio: 9/16; } }

/* ---------- Behandler (Petrol-Band) ---------- */
.b-experte { margin-top: var(--b-oben); overflow: hidden; background: var(--b-petrol); color: #fff; }
.b-experte__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: stretch; }
.b-experte__bild { position: relative; min-height: clamp(380px, 44vw, 640px); overflow: hidden; background: var(--b-petrol-tief); }
.b-experte__bild-innen { position: absolute; inset: 0; overflow: hidden; }
.b-experte__bild img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 140%; object-fit: cover; object-position: 50% 0; }
.b-experte__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 6vw, 96px) var(--b-rand); }
.b-experte__fach { margin: 20px 0 0; max-width: 26em; font-size: 18px; line-height: 1.55; color: var(--b-auf-petrol); }
.b-experte__zahlen {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: clamp(20px, 2.4vw, 34px); margin-top: clamp(30px, 3.4vw, 44px);
	padding-top: clamp(28px, 3vw, 38px); border-top: 1px solid rgba(255, 255, 255, .18);
}
.b-experte__zahl { display: flex; flex-direction: column; gap: 6px; }
.b-experte__zahl strong { font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; letter-spacing: -.028em; line-height: 1; color: var(--b-gold-hell); }
.b-experte__zahl span { font-size: 16px; line-height: 1.5; color: var(--b-auf-petrol); }
.b-experte__knopf { align-self: flex-start; margin-top: clamp(28px, 3vw, 38px); }

/* ---------- Weg zur Diagnose ---------- */
.b-weg { padding-top: clamp(80px, 9vw, 130px); }
.b-weg__raster {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(30px, 5vw, 80px); align-items: start;
}
.b-weg__links.b-klebend { top: 130px; }
.b-weg__messer { display: flex; align-items: flex-start; gap: 22px; margin-top: 44px; }
.b-weg__spur { width: 4px; height: 200px; background: var(--b-platzhalter); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.b-weg__fuellung { width: 100%; background: var(--b-akzent); border-radius: 999px; transition: height .5s var(--b-kurve-sanft); }
.b-weg__nummer { display: block; font-size: 64px; font-weight: 700; letter-spacing: -.04em; line-height: 1; color: var(--b-akzent); }
.b-weg__schritttitel { display: block; margin-top: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.b-weg__schritte { display: flex; flex-direction: column; gap: clamp(28px, 5vw, 64px); margin: 0; padding: 0; list-style: none; }
.b-schritt {
	display: flex; gap: 24px; align-items: flex-start;
	padding: 38px 38px 34px; background: #fff; border-radius: 48px; box-shadow: var(--b-schatten-schritt);
	transition: opacity .5s ease, transform .5s ease;
}
.b-schritt:last-child { background: var(--b-akzent); color: #fff; box-shadow: 0 24px 60px -34px rgba(11, 63, 80, .6); }
.b-schritt__punkt {
	flex: 0 0 auto; width: 16px; height: 16px; margin-top: 10px;
	border: 2px solid var(--b-punkt); border-radius: 999px;
	transition: background .4s ease, border-color .4s ease;
}
.b-schritt:last-child .b-schritt__punkt { border-color: rgba(255, 255, 255, .4); }
.b-schritt.ist-aktiv .b-schritt__punkt { background: var(--b-gold); border-color: var(--b-gold); }
.b-schritt__titel { display: block; font-size: clamp(22px, 2vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.b-schritt__text { margin: 14px 0 0; font-size: 17.5px; line-height: 1.65; color: var(--b-text-leise); }
.b-schritt:last-child .b-schritt__text { color: var(--b-auf-petrol-lead); }
.b-bewegung .b-schritt:not(.ist-aktiv) { opacity: .32; transform: translateX(-10px); }

/* ---------- Anspruch (Petrol-Band mit Foto) ---------- */
.b-anspruch { position: relative; margin-top: var(--b-oben); overflow: hidden; background: var(--b-petrol); color: #fff; }
.b-anspruch__bild { position: absolute; inset: -16% 0; opacity: .3; will-change: transform; }
.b-anspruch__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-anspruch__schleier { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 63, 80, .9), rgba(11, 63, 80, .82)); }
.b-anspruch__innen { position: relative; padding-top: clamp(80px, 9vw, 130px); padding-bottom: clamp(80px, 9vw, 130px); }
.b-anspruch__raster {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(30px, 5vw, 70px); align-items: end;
}
.b-anspruch__text { margin: 26px 0 0; max-width: 33em; font-size: 18.5px; line-height: 1.65; color: var(--b-auf-petrol); }
.b-anspruch__knopf { margin-top: 34px; }
.b-anspruch__punkte { display: grid; gap: 12px; }
.b-punkt { padding: 26px 30px; background: rgba(255, 255, 255, .09); border-radius: 24px; }
.b-punkt strong { display: block; font-size: 19px; font-weight: 600; }
.b-punkt span { display: block; margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--b-auf-petrol); }

/* ---------- Bewertungen ---------- */
.b-bewertungen {
	display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(22px, 3vw, 44px); align-items: center; margin-top: var(--b-kopfabstand);
}
@media (max-width: 900px) { .b-bewertungen { grid-template-columns: minmax(0, 1fr); } }
.b-bewertungen__summe { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.b-bewertungen__urteil { font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--b-text); }
.b-bewertungen__sterne { color: var(--b-kupfer); font-size: clamp(26px, 2.6vw, 34px); letter-spacing: .12em; line-height: 1; }
.b-bewertungen__basis { font-size: 17px; line-height: 1.5; color: var(--b-text-leise); }
.b-bewertungen__basis strong { color: var(--b-text); font-weight: 700; }
.b-bewertungen__quelle {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
	font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--b-akzent);
}
.b-bewertungen__quelle:hover { color: var(--b-gold); }
.b-bewertungen__quelle span { font-size: 16px; font-weight: 600; color: var(--b-text-leise); }
.b-bewertungen__trenner { display: block; width: 46px; height: 1px; background: var(--b-linie-trenner); }
.b-bewertungen__rechts { min-width: 0; }
.b-bewertungen__pfeile { display: flex; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }
.b-bewertungen__schiene {
	display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto;
	scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding: 6px 2px 22px; margin: -6px -2px -22px; scrollbar-width: none;
}
.b-bewertungen__schiene::-webkit-scrollbar { display: none; }
.b-bewertung {
	display: flex; flex-direction: column; flex: 0 0 clamp(290px, 26vw, 360px); scroll-snap-align: start;
	margin: 0; padding: 30px 30px 28px; background: #fff; border-radius: 32px; box-shadow: var(--b-schatten-karte);
}
.b-bewertung__kopf { display: flex; align-items: center; gap: 14px; }
.b-bewertung__initiale {
	display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 46px; height: 46px; border-radius: 999px; background: var(--b-akzent); color: #fff; font-size: 19px; font-weight: 700;
}
.b-bewertung__wer { display: flex; flex-direction: column; line-height: 1.35; }
.b-bewertung__wer strong { font-size: 17px; font-weight: 700; color: var(--b-text); }
.b-bewertung__wer span { font-size: 14.5px; color: var(--b-text-leise); }
.b-bewertung__sterne { display: block; margin-top: 20px; color: var(--b-kupfer); font-size: 16px; letter-spacing: .18em; }
.b-bewertung__text { margin: 16px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--b-text); }

/* ---------- Bitte mitbringen ---------- */
.b-mitbringen {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(28px, 4vw, 60px); align-items: start;
	padding: clamp(40px, 5vw, 70px) clamp(28px, 4vw, 60px);
	background: var(--b-sand-flaeche); border-radius: 48px;
}
.b-mitbringen__text { margin: 18px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--b-text-leise); }
.b-mitbringen__liste {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px;
	margin: 0; padding: 0; list-style: none;
}
.b-mitbringen__liste li { padding: 20px 24px; background: #fff; border-radius: 12px; font-size: 16.5px; font-weight: 500; }

/* ---------- Sprechzeiten & Kontakt ---------- */
.b-kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(30px, 5vw, 70px); }
.b-zeiten { margin-top: 36px; }
.b-zeiten__zeile {
	display: flex; justify-content: space-between; gap: 20px;
	padding: 16px 4px 16px 14px; margin-left: -17px;
	border-bottom: 1px solid var(--b-linie); border-left: 3px solid transparent;
	font-size: 17.5px;
}
.b-zeiten__zeile.ist-heute, .b-fuss__zeile.ist-heute { border-left-color: var(--b-kupfer); }
.b-zeiten__tag { flex: 0 0 auto; width: 5.5em; font-weight: 600; }
.b-zeiten__zeit { color: var(--b-text-leise); text-align: right; }
.b-zeiten__hinweis { margin: 16px 4px 0; font-size: 16px; color: var(--b-text-leise); }
.b-kontakt__knoepfe { margin-top: 28px; }
@media (max-width: 759px) { .b-zeiten__zeile { margin-left: -14px; } }

/* ---------- Termin-Aufruf (großes Band) ---------- */
/* Abweichung: margin-top wie die anderen Bänder — im Entwurf stößt das Band
   ohne Abstand an den letzten Abschnitt. */
.b-cta { position: relative; margin-top: var(--b-oben); overflow: hidden; background: var(--b-petrol); color: #fff; }
.b-cta__bild { position: absolute; inset: -18% 0; opacity: .62; will-change: transform; }
.b-cta__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-cta__schleier { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(11, 63, 80, .86), rgba(11, 63, 80, .78)); }
.b-cta__innen { position: relative; padding-top: clamp(90px, 11vw, 160px); padding-bottom: clamp(90px, 11vw, 160px); text-align: center; }
.b-cta .b-vorzeile { margin-bottom: 22px; }
.b-cta__text { margin: 26px auto 0; max-width: 34em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--b-auf-petrol); }
.b-cta__knoepfe { justify-content: center; margin-top: 38px; }
.b-cta .b-knopf--umriss-hell { border-color: rgba(255, 255, 255, .45); }

/* ---------- Beschwerdefinder ---------- */
.b-finder .b-abschnitt__raster { gap: clamp(30px, 5vw, 70px); }
.b-finder__text { margin: 22px 0 30px; max-width: 24em; font-size: 17.5px; line-height: 1.6; color: var(--b-text-leise); }
.b-finder__medien { position: relative; border-radius: 48px; overflow: hidden; aspect-ratio: 4/3; background: var(--b-platzhalter); }
.b-finder__bild { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.b-finder__bild.ist-aktiv { opacity: 1; }
.b-finder__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.b-finder__label {
	position: absolute; left: 26px; top: 24px; padding: 11px 20px; border-radius: 999px;
	background: var(--b-gold); color: #fff; font-size: 15px; font-weight: 600; pointer-events: none;
}
.b-finder__liste { display: flex; flex-direction: column; }
.b-finder__eintrag {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	min-height: 76px; padding: 0 4px; border-bottom: 1px solid var(--b-linie);
	color: var(--b-text); font-size: clamp(21px, 1.9vw, 29px); font-weight: 600; letter-spacing: -.02em;
	transition: padding .3s ease, color .3s ease;
}
.b-finder__eintrag:hover, .b-finder__eintrag:focus-visible, .b-finder__eintrag.ist-aktiv { padding-left: 20px; color: var(--b-gold); }
.b-finder__pfeil { display: inline-flex; color: var(--b-gold); }

/* ---------- Galerie ---------- */
.b-galerie--mauer { columns: 3; column-gap: clamp(14px, 1.8vw, 24px); }
.b-galerie--mauer .b-galerie__bild { margin: 0 0 clamp(14px, 1.8vw, 24px); break-inside: avoid; border-radius: 40px; }
@media (max-width: 1000px) { .b-galerie--mauer { columns: 2; } }
@media (max-width: 620px) { .b-galerie--mauer { columns: 1; } }
.b-galerie--reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.b-galerie--reihe .b-galerie__bild { border-radius: 40px; }

/* ---------- Zitat-Band ---------- */
.b-zitat { margin-top: var(--b-oben); overflow: hidden; background: var(--b-petrol); color: #fff; }
.b-zitat__innen { max-width: 1180px; padding-top: clamp(70px, 8vw, 120px); padding-bottom: clamp(70px, 8vw, 120px); }
.b-zitat .b-vorzeile { margin-bottom: 26px; }
.b-zitat__text { margin: 0; font-size: clamp(26px, 3.4vw, 50px); line-height: 1.2; letter-spacing: -.028em; font-weight: 600; }
.b-zitat__text em { font-style: normal; color: var(--b-gold-hell); }
.b-zitat__person { display: flex; align-items: center; gap: 18px; margin-top: clamp(30px, 4vw, 46px); }
.b-zitat__foto { width: 66px; height: 66px; border-radius: 999px; overflow: hidden; flex: 0 0 auto; background: var(--b-petrol); }
.b-zitat__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.b-zitat__person strong { display: block; font-size: 18.5px; font-weight: 700; line-height: 1.45; }
.b-zitat__person span span { display: block; font-size: 16px; line-height: 1.45; color: var(--b-auf-petrol-zusatz); }

/* ---------- Publikationen ---------- */
.b-publikationen { min-width: 0; }
.b-publikationen__titel { margin: 0 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.b-publikationen__titel span { font-weight: 500; color: var(--b-text-leise); }
.b-publikationen__liste { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--b-linie); }
.b-publikation { padding: 18px 4px; border-bottom: 1px solid var(--b-linie); font-size: 16.5px; line-height: 1.55; color: var(--b-text); }
.b-publikation__autoren { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: .01em; color: var(--b-akzent); }
.b-publikation__titel { display: block; margin-top: 4px; }
.b-publikationen__mehr > summary {
	display: inline-flex; align-items: center; gap: 10px; min-height: 52px; margin-top: 18px; padding: 0 26px;
	border-radius: 999px; border: 1.5px solid var(--b-petrol);
	font-size: 16px; font-weight: 600; color: var(--b-petrol); cursor: pointer; list-style: none;
	transition: background .3s ease, color .3s ease;
}
.b-publikationen__mehr > summary::-webkit-details-marker { display: none; }
.b-publikationen__mehr > summary:hover { background: var(--b-petrol); color: #fff; }
.b-publikationen__mehr > summary span { font-size: 19px; font-weight: 400; transition: transform .35s var(--b-kurve); }
.b-publikationen__mehr[open] > summary span { transform: rotate(45deg); }
.b-publikationen__mehr > .b-publikationen__liste { margin-top: 14px; }
@media (max-width: 900px) {
	.b-fliesstext:has(> .b-publikationen + .b-publikationen) { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Anfahrt, Anschrift ---------- */
.b-anfahrt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 64px); align-items: start; }
.b-anschrift__adresse { margin: 28px 0 0; font-size: 18.5px; line-height: 1.7; color: var(--b-text); }
.b-anschrift__wege { display: flex; flex-direction: column; gap: 6px; margin-top: 22px; font-size: 17.5px; color: var(--b-text-leise); }
.b-anschrift__wege a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--b-text); font-weight: 600; align-self: flex-start; }
.b-anschrift__wege a:hover { color: var(--b-gold); }
.b-anfahrt .b-knoepfe { margin-top: 30px; }
.b-fliesstext > .b-anschrift:first-child .b-anschrift__adresse { margin-top: 26px; }
.b-anfahrt__karte { position: relative; overflow: hidden; background: var(--b-platzhalter); aspect-ratio: 4/3; min-height: 320px; }
.b-anfahrt__karte iframe { display: block; width: 100%; height: 100%; border: 0; }
.b-anfahrt__hinweis {
	box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
	height: 100%; padding: 30px; text-align: center;
}
.b-anfahrt__hinweis p { margin: 0; max-width: 26em; font-size: 16px; line-height: 1.55; color: var(--b-text-leise); }
/* QA 24.09.2026: Akzent auf Platzhalterfläche 4,38:1 → Petrol; Klickfläche 19 → 44 px */
.b-anfahrt__hinweis a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15.5px; color: var(--b-petrol); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Fußzeile ---------- */
.b-fuss { background: var(--b-petrol); color: var(--b-auf-petrol); }
.b-fuss__spalten {
	padding-top: 70px; padding-bottom: 40px;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(30px, 4vw, 56px);
}
.b-fuss__spalte { display: flex; flex-direction: column; align-items: flex-start; }
.b-fuss__logo { display: block; height: 82px; width: auto; }
.b-fuss__text { margin: 24px 0 0; font-size: 15.5px; line-height: 1.65; }
.b-fuss__knopf.b-knopf { margin-top: auto; min-height: 52px; padding: 0 26px; font-size: 16.5px; }
.b-fuss__kopf { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--b-auf-petrol); }
.b-fuss__adresse { margin: 0; font-size: 16.5px; line-height: 1.7; color: #fff; }
.b-fuss__tel, .b-fuss__mail { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; margin-top: 12px; color: #fff; font-size: 16.5px; font-weight: 600; }
.b-fuss__mail { margin-top: 0; font-weight: 400; }
.b-fuss__zeiten { width: 100%; }
.b-fuss__zeile {
	display: flex; justify-content: space-between; gap: 18px;
	padding: 9px 12px 9px 9px; margin: 0 -12px;
	border-bottom: 1px solid rgba(255, 255, 255, .14); border-left: 3px solid transparent; font-size: 16px;
}
.b-fuss__tag { color: #fff; font-weight: 600; }
.b-fuss__hinweis { margin: 14px 0 0; font-size: 15.5px; line-height: 1.6; }
.b-fuss__unten {
	padding-top: 24px; padding-bottom: 40px;
	display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between;
	border-top: 1px solid rgba(255, 255, 255, .14);
}
.b-fuss__copyright { font-size: 14.5px; }
.b-fuss__copyright a { color: inherit; }
.b-fuss__rechtlich { display: flex; flex-wrap: wrap; gap: 0 24px; }
.b-fuss__rechtlich a { display: inline-flex; align-items: center; min-height: 44px; color: var(--b-auf-petrol); font-size: 14.5px; }
.b-fuss a:not(.b-knopf):hover { color: #fff; }
@media (max-width: 899px) { .b-fuss__knopf.b-knopf { margin-top: 24px; } }
@media (max-width: 759px) { .b-fuss { padding-bottom: 82px; } }

/* ---------- Bewegung: Grundzustand ohne Skript sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.b-kopf__bild, .b-anspruch__bild, .b-cta__bild { transform: none !important; }
}

/* ---------- Haltepunkte nach Entwurf (<900 / <760 px) ---------- */
@media (max-width: 900px) {
	.b-klebend, .b-rahmen.b-klebend, .b-weg__links.b-klebend { position: static; }
	/* Weg: Zähler bleibt oben stehen, Spalte löst sich ins Raster auf */
	.b-weg__links { display: contents; }
	.b-weg__messer { position: sticky; top: 88px; z-index: 5; background: var(--b-grund); padding: 12px 0 14px; margin-top: 6px; }
	.b-weg__spur { height: 104px; }
	.b-weg__nummer { font-size: 44px; }
	/* Teamfoto hochkant */
	.b-rahmen--breit { aspect-ratio: 4/5; border-radius: 32px; }
	.b-rahmen--breit img { object-position: 50% 42%; }
	/* Beschwerdefinder: Bild bleibt oben stehen */
	.b-finder__links { display: contents; }
	.b-finder__medien { position: sticky; top: 88px; z-index: 5; margin-bottom: 22px; border-radius: 32px; box-shadow: 0 18px 40px -28px rgba(11, 63, 80, .55); }
}
@media (max-width: 759px) {
	.b-abschnitt--bild-rechts .b-rahmen--schmal { margin-left: 0; }
}

/* ---------- Urlaubsmeldung (bausteine/urlaubsmeldung.md) ---------- */

.b-urlaub {
	width: min(560px, calc(100vw - 2 * var(--b-rand)));
	max-height: min(80vh, 640px);
	padding: 0;
	border: 0;
	border-radius: var(--b-radius-karte);
	background: var(--b-weiss);
	color: var(--b-text);
	box-shadow: var(--b-schatten-dialog);
	overflow: auto;
	overscroll-behavior: contain;
}

.b-urlaub::backdrop {
	background: rgba(11, 63, 80, .55);
}

.b-urlaub__innen {
	padding: 40px;
}

@media (max-width: 600px) {
	.b-urlaub__innen {
		padding: 28px 24px;
	}
}

.b-urlaub__titel {
	margin: 0 0 16px;
	color: var(--b-text);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
}

.b-urlaub__text { font-size: 17px; line-height: 1.65; color: var(--b-text-leise); }
.b-urlaub__text > *:first-child { margin-top: 0; }
.b-urlaub__text > *:last-child { margin-bottom: 0; }

/* Aufzaehlungen zurueckholen — siehe „Der Listen-Reset des Themes". */
.b-urlaub__text ul,
.b-urlaub__text ol {
	margin: 14px 0 0;
	padding-left: 1.35em;
	list-style: revert;
}
.b-urlaub__text ul { list-style-type: square; }
.b-urlaub__text li { margin-top: 6px; }
.b-urlaub__text li::marker { color: var(--b-akzent); }

/* Unterstrichen, auch wenn das Theme es sonst nicht tut — siehe „Links, die
   sich nur durch Farbe unterscheiden". */
.b-urlaub__text a {
	color: var(--b-akzent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.b-urlaub__schliessen { margin-top: 28px; }

@media (prefers-reduced-motion: no-preference) {
	.b-urlaub[open] {
		animation: b-urlaub-auf 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
	}

	@keyframes b-urlaub-auf {
		from { opacity: 0; transform: translateY(12px); }
	}
}

.b-urlaub--bild {
	width: min(880px, calc(100vw - 2 * var(--b-rand)));
}

.b-urlaub--bild .b-urlaub__innen {
	display: grid;
	grid-template-columns: 1fr minmax(0, 300px);
	gap: 32px;
	align-items: start;
	padding: 0;
}

.b-urlaub--bild .b-urlaub__inhalt {
	padding: 40px 0 40px 40px;
}

/* Das Bild fuellt seine Spalte bis an drei Kanten — sonst schwimmt es in
   einem weissen Rahmen und sieht aus wie hineingerutscht. */
.b-urlaub--bild .b-urlaub__figur {
	align-self: stretch;
	min-height: 100%;
	overflow: hidden;
	border-radius: 0 var(--b-radius-karte) var(--b-radius-karte) 0;
}

.b-urlaub__bild {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 260px;
	object-fit: cover;
}

@media (max-width: 720px) {
	.b-urlaub--bild .b-urlaub__innen { grid-template-columns: 1fr; gap: 0; }
	.b-urlaub--bild .b-urlaub__inhalt { order: 2; padding: 28px 24px; }
	.b-urlaub--bild .b-urlaub__figur {
		order: 1;
		border-radius: var(--b-radius-karte) var(--b-radius-karte) 0 0;
	}
	.b-urlaub__bild { min-height: 0; aspect-ratio: 3 / 2; }
}