/*
 * Lührs Brain Health – Stylesheet.
 *
 * Alle Werte sind dem gerenderten Entwurf entnommen (BAUPLAN.md, 02.10.2026),
 * nicht der Prosa der Übergabe. Wo beides abweicht, gilt der Entwurf.
 * Der Editor lädt diese Datei ebenfalls (add_editor_style).
 */

/* =========================================================================
   1. Grundwerte
   ====================================================================== */

:root {
	--lbh-creme: #f6f4ed;
	--lbh-creme-94: rgba(246, 244, 237, 0.94);
	--lbh-navy: #1a3a6b;
	--lbh-navy-hell: #3a5e96;
	--lbh-sand: #e2e4dc;
	--lbh-sand-dunkel: #dcdfd3;
	--lbh-sand-45: rgba(226, 228, 220, 0.45);
	--lbh-salbei: #b0ba8a;
	--lbh-mega: #fbfaf5;
	--lbh-text: #2f2f2f;
	--lbh-text-2: #4a4a4a;
	--lbh-auf-navy: #dbe2ea;
	--lbh-auf-navy-2: #d9e0ea;
	--lbh-auf-navy-3: #a8b6c9;
	--lbh-mega-unter: #5a6b82;
	--lbh-fehler: #9a3b3b;
	--lbh-fehler-navy: #e7b3b3;
	--lbh-weiss: #fff;
	--lbh-linie: rgba(26, 58, 107, 0.18);
	--lbh-linie-14: rgba(26, 58, 107, 0.14);
	--lbh-linie-10: rgba(26, 58, 107, 0.1);
	--lbh-schraffur: repeating-linear-gradient(135deg, rgba(26, 58, 107, 0.1) 0 2px, transparent 2px 12px), var(--lbh-sand);

	--lbh-serif: "Cormorant Garamond", Georgia, serif;
	--lbh-sans: "Mulish", -apple-system, Arial, sans-serif;
	--lbh-grundgroesse: 17px;
	--lbh-zeilenhoehe: 1.7;

	--lbh-rand: clamp(20px, 5vw, 64px);
	--lbh-max: 1448px;
	--lbh-kopf-hoehe: clamp(88px, 7.5vw, 116px);

	--lbh-kurve: cubic-bezier(0.2, 0.78, 0.26, 1);
	--lbh-pfeilkurve: cubic-bezier(0.22, 0.8, 0.26, 1);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-padding-top: 170px;
}

body {
	margin: 0;
	background: var(--lbh-creme);
	color: var(--lbh-text);
	font-family: var(--lbh-sans);
	font-size: var(--lbh-grundgroesse);
	line-height: var(--lbh-zeilenhoehe);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Keine automatische Worttrennung (overflow-wrap: break-word): Christian will
   lieber ein zu langes Wort umformulieren als einen Umbruch mitten im Wort
   (03.10.2026). Wo etwas herauslaeuft, meldet die Ueberlauf-Pruefung
   (bausteine/ueberlauf-pruefung.md). */

a {
	color: var(--lbh-navy);
	text-decoration: none;
}

a:hover {
	color: var(--lbh-navy-hell);
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 400;
}

button {
	font-family: inherit;
}

figure {
	margin: 0;
}

/* Platz fuer die Faehnchenleiste rechts; Wasserzeichen laufen trotzdem bis
   an den Bildschirmrand. */
@media (min-width: 901px) {
	body {
		padding-right: 58px;
	}

	html,
	body {
		overflow-x: clip;
	}

	.lbh-wasserzeichen,
	.lbh-pflanze--faq {
		translate: 58px 0;
	}
}

@media (max-width: 900px) {
	body {
		padding-bottom: 64px;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.lbh-sprunglink {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 300;
	padding: 12px 18px;
	border-radius: 12px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	font-size: 15px;
}

.lbh-sprunglink:focus {
	top: 16px;
	color: var(--lbh-weiss);
}

:focus-visible {
	outline: 2px solid var(--lbh-navy);
	outline-offset: 3px;
}

.lbh-navykachel :focus-visible,
.lbh-band :focus-visible,
.lbh-fuss :focus-visible,
.lbh-mobil :focus-visible,
.lbh-zitat__karte :focus-visible,
.lbh-newsletter__band :focus-visible,
.lbh-kurs--navy :focus-visible,
.lbh-weg--navy:focus-visible,
.lbh-anfahrt__adresse :focus-visible,
.lbh-drop--dunkel :focus-visible,
.lbh-hero__kachel:focus-visible {
	outline-color: var(--lbh-weiss);
}

/* =========================================================================
   2. Abschnitte und Abstände
   ====================================================================== */

.lbh-abschnitt {
	position: relative;
	padding: 0 var(--lbh-rand) var(--lbh-unten, clamp(56px, 9vw, 144px));
}

.lbh-breite {
	max-width: var(--lbh-max);
	margin: 0 auto;
}

.lbh-abstand--start { --lbh-unten: clamp(56px, 9vw, 144px); }
.lbh-abstand--start-130 { --lbh-unten: clamp(56px, 9vw, 130px); }
.lbh-abstand--start-120 { --lbh-unten: clamp(56px, 8vw, 120px); }
.lbh-abstand--oben { --lbh-unten: clamp(56px, 9vw, 144px); padding-top: clamp(56px, 9vw, 144px); }
.lbh-abstand--seite { --lbh-unten: clamp(48px, 7vw, 110px); }
.lbh-abstand--seite-96 { --lbh-unten: clamp(48px, 7vw, 96px); }
.lbh-abstand--ende { --lbh-unten: clamp(56px, 8vw, 120px); }
.lbh-abstand--ende-9 { --lbh-unten: clamp(56px, 9vw, 120px); }

/* Abschnitte mit Wasserzeichen oder Pflanze: oben und unten abschneiden wie
   im Entwurf. Seitlich laufen die Schmuckbilder am Desktop bis an den
   Fensterrand (dort schneidet html/body); auf dem Telefon wuerden sie die
   Seite seitlich verschiebbar machen, daher dort zusaetzlich seitlich clip. */
.lbh-willkommen,
.lbh-einstieg--signet,
.lbh-faq--pflanze {
	overflow: visible clip;
}

@media (max-width: 900px) {
	.lbh-willkommen,
	.lbh-einstieg--signet,
	.lbh-faq--pflanze {
		overflow: clip;
	}
}

/* =========================================================================
   3. Wiederkehrende Elemente
   ====================================================================== */

.lbh-kicker {
	display: block;
	margin-bottom: 24px;
	color: var(--lbh-text-2);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lbh-kicker--16 { margin-bottom: 16px; }
.lbh-kicker--18 { margin-bottom: 18px; }
.lbh-kicker--22 { margin-bottom: 22px; }

.lbh-kicker--salbei {
	margin-bottom: 22px;
	color: var(--lbh-salbei);
}

/* Zurueck-Link: im Entwurf ein Knopf (inline-block, Zeilenhoehe normal) in
   einer eigenen Textzeile – dadurch sitzt er 8 px tiefer als ein Kicker. */
a.lbh-zurueck {
	display: inline-block;
	line-height: normal;
}

a.lbh-zurueck:hover {
	color: var(--lbh-text-2);
}

.lbh-meta {
	color: var(--lbh-text-2);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lbh-meta--16 { margin-bottom: 16px; }
.lbh-meta--18 { margin-bottom: 18px; }

/* Ueberschriften der Startseite: 24–32 px, erste Zeile fett. */
.lbh-h2-start {
	margin: 0 0 8px;
	color: var(--lbh-text);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 400;
	line-height: 1.375;
}

.lbh-h2-gross {
	margin: 0;
	max-width: 28ch;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.6vw, 38px);
	font-weight: 400;
	line-height: 1.3;
}

.lbh-unterzeile {
	margin-bottom: 36px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(22px, 2.2vw, 32px);
	line-height: 1.375;
}

/* Kopfzeile: Ueberschrift links, Link rechts, unten buendig. */
.lbh-kopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 40px;
}

.lbh-kopfzeile--beschwerden { margin-bottom: clamp(28px, 4vw, 52px); }
.lbh-kopfzeile--36 { margin-bottom: 36px; }

.lbh-kopfzeile .lbh-h2-start {
	margin: 0;
	line-height: 1.7;
}

/* Pfeil: bewegt sich, wenn der Link, die Schaltflaeche oder die ganze Karte
   ueberfahren wird (Übergabe 3.7). */
.lbh-pfeil {
	display: inline-block;
	transition: transform 0.45s var(--lbh-pfeilkurve);
}

a:hover .lbh-pfeil,
button:hover .lbh-pfeil,
article:hover .lbh-pfeil,
.lbh-karte--link:hover .lbh-pfeil {
	transform: translateX(8px);
}

a:hover .lbh-pfeil--diagonal,
button:hover .lbh-pfeil--diagonal {
	transform: translate(4px, -4px);
}

/* Textlink mit Pfeil – Unterstrich als Rahmenlinie, nicht text-decoration. */
.lbh-textlink {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--lbh-navy);
	color: var(--lbh-navy);
	font-size: 15px;
	line-height: normal;
}

.lbh-textlink:hover {
	color: var(--lbh-navy);
}

/* Im Entwurf echte Links (keine Schaltflaechen): Zeilenhoehe 1,7 statt „normal". */
.lbh-textlink--a {
	line-height: var(--lbh-zeilenhoehe);
}

.lbh-textlink--versal {
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.lbh-textlink--mehr {
	gap: 10px;
	border-bottom: 0;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	align-self: flex-start;
	margin-top: auto;
}

.lbh-textlink--mehr .lbh-pfeil {
	transition: transform 0.25s ease;
}

.lbh-textlink--hell {
	margin-top: 26px;
	border-bottom-color: rgba(255, 255, 255, 0.6);
	color: var(--lbh-weiss);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.lbh-textlink--hell:hover {
	color: var(--lbh-weiss);
}

.lbh-linkpaar {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.lbh-linkpaar--karten { margin-top: 32px; }
.lbh-linkpaar--schritte { margin-top: clamp(32px, 5vw, 48px); }

/* Eckige Schaltflaeche (Radius 12). */
.lbh-knopf {
	display: inline-block;
	padding: 15px 28px;
	border: 0;
	border-radius: 12px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.14em;
	line-height: normal;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.lbh-knopf:hover {
	background: var(--lbh-navy-hell);
	color: var(--lbh-weiss);
}

.lbh-knopf--salbei {
	background: var(--lbh-salbei);
	color: var(--lbh-navy);
}

.lbh-knopf--salbei:hover {
	background: var(--lbh-weiss);
	color: var(--lbh-navy);
}

/* Hinweis mit Salbei-Linie. */
.lbh-hinweis {
	max-width: 64ch;
	margin: 0;
	padding: 4px 0 4px 18px;
	border-left: 2px solid var(--lbh-salbei);
	color: var(--lbh-text-2);
	font-size: 14.5px;
	line-height: 1.75;
}

.lbh-hinweis--24 { margin-top: 24px; }
.lbh-hinweis--28 { margin-top: 28px; }
.lbh-hinweis--kurse { margin-top: 24px; max-width: none; }

/* Schraffur-Platzhalter: Bild fehlt noch. */
.lbh-platzhalter {
	display: flex;
	align-items: flex-end;
	background: var(--lbh-schraffur);
}

.lbh-platzhalter__text {
	color: var(--lbh-text-2);
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.7;
}

/* Bilder in Rahmen fuellen den Rahmen. */
.lbh-bild-fuellt,
.lbh-hero__fenster img,
.lbh-einstieg__bild img,
.lbh-arbeitsweise__bild img,
.lbh-schwerpunkte__bild img,
.lbh-zitat__bild img,
.lbh-themenkarte__bild img,
.lbh-leit__bild img,
.lbh-buch__cover img,
.lbh-beitrag__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Dekor */
.lbh-wasserzeichen {
	position: absolute;
	top: 50%;
	width: auto;
	max-width: none;
	pointer-events: none;
	transform: translateY(-50%);
}

.lbh-wasserzeichen--willkommen {
	right: -2%;
	height: 112%;
	opacity: 0.06;
}

.lbh-wasserzeichen--einstieg {
	right: -3%;
	height: 120%;
	opacity: 0.05;
}

.lbh-pflanze--faq {
	position: absolute;
	left: -6%;
	bottom: -8%;
	height: 92%;
	width: auto;
	max-width: none;
	opacity: 0.5;
	pointer-events: none;
}

/* =========================================================================
   4. Kopf
   ====================================================================== */

.lbh-kopf {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 80;
	background: var(--lbh-creme-94);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.lbh-kopf__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--lbh-kopf-hoehe);
	padding: 0 max(var(--lbh-rand), 50% - 724px);
}

.lbh-kopf__logo {
	display: flex;
	align-items: center;
}

.lbh-kopf__logo img {
	width: auto;
	height: clamp(56px, 6vw, 88px);
}

.lbh-kopf__rechts {
	display: flex;
	align-items: center;
	gap: clamp(14px, 3vw, 30px);
}

.lbh-kopf__adresse {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: var(--lbh-text-2);
	font-size: 13.5px;
	line-height: 1.5;
	text-align: right;
}

.lbh-kopf__adresse a {
	color: var(--lbh-navy);
}

.lbh-kopf__adresse a:hover {
	color: var(--lbh-navy-hell);
}

/* Termin-Pille: Pfeil schiebt sich beim Ueberfahren von rechts herein. */
.lbh-termin {
	display: inline-flex;
	align-items: center;
	overflow: hidden;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	font-size: 13px;
	letter-spacing: 0.14em;
	line-height: normal;
	text-transform: uppercase;
	white-space: nowrap;
}

.lbh-termin:hover {
	background: var(--lbh-navy-hell);
	color: var(--lbh-weiss);
}

.lbh-termin__pfeil {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	transform: translateX(-6px);
	transition: max-width 0.28s ease, opacity 0.22s ease, transform 0.28s ease;
}

.lbh-termin:hover .lbh-termin__pfeil,
.lbh-termin:focus-visible .lbh-termin__pfeil {
	max-width: 30px;
	opacity: 1;
	transform: translateX(0);
}

.lbh-burger {
	display: none;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lbh-navy);
	cursor: pointer;
}

.lbh-burger__text {
	font-size: 14px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.lbh-burger__striche {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.lbh-burger__striche i {
	display: block;
	width: 26px;
	height: 1.5px;
	background: var(--lbh-navy);
}

/* Zeile 2: Hauptnavigation, darueber eine feine Linie. */
.lbh-nav {
	position: relative;
	display: flex;
	justify-content: flex-end;
	padding: 0 max(var(--lbh-rand), 50% - 724px) 14px;
}

.lbh-nav::before {
	content: "";
	position: absolute;
	top: 0;
	left: max(var(--lbh-rand), 50% - 724px);
	right: max(var(--lbh-rand), 50% - 724px);
	height: 1px;
	background: var(--lbh-linie-14);
}

.lbh-nav__liste {
	display: flex;
	align-items: stretch;
	gap: clamp(4px, 1.4vw, 20px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbh-nav__punkt {
	position: relative;
	display: flex;
	align-items: center;
}

/* Hover-Bruecke: unsichtbare Flaeche zwischen Menuepunkt und Panel. */
.lbh-nav__punkt::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 24px;
}

.lbh-nav__link {
	position: relative;
	padding: 14px clamp(8px, 1vw, 14px);
	color: var(--lbh-navy);
	font-size: clamp(14px, 1.1vw, 16px);
	letter-spacing: 0.02em;
	line-height: normal;
	white-space: nowrap;
}

.lbh-nav__link:hover {
	color: var(--lbh-navy);
}

/* Unterstrich waechst von der Mitte. Am aktuellen Punkt steht er fest. */
.lbh-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--lbh-navy);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.2s ease;
}

.lbh-nav__punkt:hover > .lbh-nav__link::after,
.lbh-nav__link:focus-visible::after,
.lbh-nav__link.is-aktiv::after {
	transform: scaleX(1);
}

/* Dropdowns */
.lbh-drop {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 120;
	min-width: 240px;
	padding: 14px;
	border-radius: 16px;
	background: var(--lbh-navy);
	box-shadow: 0 24px 60px rgba(18, 33, 64, 0.28);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateX(-50%) translateY(8px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.lbh-nav__punkt:hover > .lbh-drop,
.lbh-nav__punkt:focus-within > .lbh-drop,
.lbh-nav__punkt.is-offen > .lbh-drop {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(6px);
}

/* Nach Escape bleibt das Panel zu, obwohl der Fokus im Menuepunkt steht. */
.lbh-nav__punkt.ist-zu > .lbh-drop {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Der letzte Menuepunkt klappt rechtsbuendig auf, damit nichts ueber den Rand ragt. */
.lbh-nav__punkt:last-child > .lbh-drop {
	left: auto;
	right: 0;
	transform: translateY(8px);
}

.lbh-nav__punkt:last-child:hover > .lbh-drop,
.lbh-nav__punkt:last-child:focus-within > .lbh-drop,
.lbh-nav__punkt:last-child.is-offen > .lbh-drop {
	transform: translateY(6px);
}

.lbh-drop__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbh-drop__link {
	display: block;
	width: 100%;
	padding: 9px 14px;
	border-radius: 9px;
	color: var(--lbh-weiss);
	font-size: 15px;
	line-height: 1.35;
	text-align: left;
	transition: background 0.15s ease;
}

.lbh-drop__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--lbh-weiss);
}

/* Helles Dropdown und Mega-Menue */
.lbh-drop--hell,
.lbh-drop--mega {
	border: 1px solid rgba(26, 58, 107, 0.12);
	background: var(--lbh-mega);
	box-shadow: 0 24px 60px rgba(26, 58, 107, 0.14);
}

.lbh-drop--hell .lbh-drop__link,
.lbh-drop--mega .lbh-drop__link {
	color: var(--lbh-navy);
}

.lbh-drop--hell .lbh-drop__link:hover,
.lbh-drop--mega .lbh-drop__link:hover {
	background: rgba(26, 58, 107, 0.07);
	color: var(--lbh-navy);
}

.lbh-drop--hell::before,
.lbh-drop--mega::before {
	content: "";
	position: absolute;
	top: -22px;
	left: 0;
	right: 0;
	height: 22px;
}

/* Mega-Menue: rechtsbuendig zum Seitenrand. „fixed" bezieht sich hier auf
   den Kopf, nicht auf das Fenster – backdrop-filter macht ihn zum
   Bezugsrahmen (im Entwurf ebenso, gemessen 02.10.2026: Panel 1120 px breit,
   oben 138 px, rechte Kante 64 px vor dem Kopfende).
   Breite deshalb auch in % vom Kopf, nicht in vw: der Kopf laesst rechts die
   Faehnchen-Gasse frei, mit 94vw begann das Panel bei 1024 px bei x = -48
   (Ueberlauf-Pruefung 03.10.2026). */
.lbh-drop--mega {
	position: fixed;
	top: calc(22px + var(--lbh-kopf-hoehe));
	left: auto;
	right: max(var(--lbh-rand), 50% - 724px);
	width: min(1120px, 100% - var(--lbh-rand) - 20px);
	padding: 26px 30px;
	transform: translateY(8px);
}

.lbh-nav__punkt:hover > .lbh-drop--mega,
.lbh-nav__punkt:focus-within > .lbh-drop--mega,
.lbh-nav__punkt.is-offen > .lbh-drop--mega {
	transform: translateY(8px);
}

.lbh-drop--mega:hover {
	transform: translateY(6px) !important;
}

/* 230 px Mindestbreite: ab ca. 1060 px Panel vier Spalten wie im Entwurf,
   darunter drei bzw. zwei – sonst passt „BEWEGUNGSSTÖRUNGEN" (219 px +
   Polsterung) nicht in die Spalte (Ueberlauf-Pruefung 03.10.2026). */
.lbh-mega__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px 26px;
}

.lbh-drop__kategorie {
	display: block;
	width: 100%;
	padding: 12px 14px 6px;
	color: var(--lbh-navy);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: normal;
	text-align: left;
	text-transform: uppercase;
}

.lbh-drop__kategorie:hover {
	color: var(--lbh-navy);
}

.lbh-mega__gruppe--einzeln .lbh-drop__kategorie + .lbh-drop__kategorie {
	margin-top: 12px;
}

@media (max-width: 1100px) {
	.lbh-nav__liste {
		gap: 2px;
	}

	.lbh-nav__link {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 14px;
	}
}

@media (max-width: 900px) {
	.lbh-nav {
		display: none;
	}

	.lbh-burger {
		display: flex;
	}

	/* Mobil steht beides in der Leiste unten (Termin, Telefon). */
	.lbh-kopf__adresse,
	.lbh-termin {
		display: none;
	}
}

/* =========================================================================
   5. Mobilmenue – vollflaechig Navy
   ====================================================================== */

.lbh-mobil {
	position: fixed;
	inset: 0;
	z-index: 150;
	overflow-y: auto;
	padding: 84px var(--lbh-rand) 64px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	overscroll-behavior: contain;
}

.lbh-mobil[hidden] {
	display: none;
}

.lbh-mobil__schliessen {
	position: fixed;
	top: 16px;
	right: clamp(20px, 5vw, 44px);
	z-index: 2;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lbh-weiss);
	font-size: 34px;
	line-height: 1;
	cursor: pointer;
}

.lbh-mobil__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	align-items: start;
	gap: clamp(30px, 4vw, 52px);
	max-width: 1400px;
	margin: 0 auto;
}

.lbh-mobil__spalte {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.lbh-mobil__haupt {
	display: inline-block;
	color: var(--lbh-weiss);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 30px);
	font-weight: 300;
	line-height: normal;
}

.lbh-mobil__haupt:hover,
.lbh-mobil__link:hover {
	color: var(--lbh-weiss);
}

.lbh-mobil__unter {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	border-left: 1px solid var(--lbh-salbei);
	list-style: none;
}

.lbh-mobil__unter--tief {
	margin-top: 10px;
	border-left: 0;
}

.lbh-mobil__link {
	display: inline-block;
	color: var(--lbh-weiss);
	line-height: normal;
}

.lbh-mobil__link--2 {
	padding-left: 16px;
	font-size: 16px;
}

.lbh-mobil__link--3 {
	padding-left: 32px;
	color: var(--lbh-auf-navy-2);
	font-size: 15px;
}

.lbh-mobil__link.is-aktiv,
.lbh-mobil__haupt.is-aktiv {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.lbh-mobil__kontakt {
	position: relative;
	padding-top: 22px;
	color: var(--lbh-auf-navy-2);
	font-size: 15px;
	line-height: 1.9;
}

.lbh-mobil__kontakt::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 1px;
	background: rgba(255, 255, 255, 0.32);
}

.lbh-mobil__kontakt a {
	color: var(--lbh-auf-navy-2);
}

.lbh-mobil__kontakt a:hover {
	color: var(--lbh-weiss);
}

body.lbh-menue-offen {
	overflow: hidden;
}

/* =========================================================================
   6. Faehnchenleiste
   ====================================================================== */

.lbh-fahne {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 8px;
	border: 1px solid var(--lbh-linie-14);
	border-right: 0;
	border-radius: 18px 0 0 18px;
	background: rgba(246, 244, 237, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: -6px 10px 30px rgba(26, 58, 107, 0.08);
	transform: translateY(-50%);
}

/* 40 px wie im Entwurf (die Leiste passt genau in die 58 px Randgasse).
   Liegt unter den 44 px der Hausregel, aber ueber den 24 px aus WCAG 2.5.8. */
.lbh-fahne__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(26, 58, 107, 0.2);
	border-radius: 999px;
	background: var(--lbh-creme-94);
	color: var(--lbh-navy);
}

.lbh-fahne__knopf:hover {
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-fahne__knopf--termin {
	border: 0;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-fahne__knopf--termin:hover {
	background: var(--lbh-navy-hell);
}

.lbh-fahne__trenner {
	align-self: center;
	width: 1px;
	height: 14px;
	background: rgba(26, 58, 107, 0.25);
}

body.lbh-menue-offen .lbh-fahne {
	display: none;
}

@media (max-width: 900px) {
	.lbh-fahne {
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		flex-direction: row;
		justify-content: center;
		gap: 14px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		border: 1px solid var(--lbh-linie-14);
		border-bottom: 0;
		border-radius: 18px 18px 0 0;
		transform: none;
	}

	.lbh-fahne__trenner {
		width: 14px;
		height: 1px;
	}
}

/* =========================================================================
   7. Startseite: Kopfbereich
   ====================================================================== */

.lbh-hero {
	padding-top: clamp(16px, 2.5vh, 40px);
	--lbh-unten: clamp(56px, 8vw, 96px);
	background: url("../img/pflanze.svg") left -30px top 12px / auto 88% no-repeat;
}

.lbh-hero__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(24px, 3vw, 48px);
}

.lbh-hero__text {
	display: flex;
	flex: 1 1 240px;
	flex-direction: column;
	justify-content: flex-end;
	min-width: 0;
	padding-bottom: 4%;
}

.lbh-hero__wortmarke {
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(38px, 6vw, 92px);
	letter-spacing: 0.06em;
	line-height: 1.02;
	animation: lbh-steigen 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lbh-hero__text h1 {
	max-width: 18ch;
	margin: 0.3em 0 0;
	color: var(--lbh-navy);
	font-family: var(--lbh-sans);
	font-size: clamp(20px, 2.2vw, 29px);
	font-weight: 300;
	line-height: 1.42;
	animation: lbh-steigen 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.lbh-hero__bild {
	position: relative;
	flex: 3.2 1 440px;
	aspect-ratio: 955 / 635;
	min-height: 300px;
	max-height: calc(100vh - 190px);
	container-type: size;
	/* Aufteilung in Prozent der Komposition (Entwurf): grosses Fenster,
	   Beginn und Breite der rechten Spalte (kleines Fenster + Kachel).
	   Die Bildausschnitte werden daraus gerechnet. */
	--lbh-hero-gross: 74.14;
	--lbh-hero-spalte-links: 77.49;
	--lbh-hero-spalte: 22.51;
}

/* Auf dem Telefon ist die Kachel bei 22,51 % nur 75 px breit, und
   „VEREINBAREN" (77 px) wurde abgeschnitten (Ueberlauf-Pruefung 03.10.2026).
   Rechte Spalte deshalb breiter; der Abstand bleibt 3,35 %. */
@media (max-width: 600px) {
	.lbh-hero__bild {
		--lbh-hero-gross: 62.65;
		--lbh-hero-spalte-links: 66;
		--lbh-hero-spalte: 34;
	}
}

/* Zwei Fenster, ein Foto: beide zeigen dasselbe Bild in voller Breite der
   Komposition, jeweils nur ihren Ausschnitt. */
.lbh-hero__fenster {
	position: absolute;
	top: 0;
	overflow: hidden;
	animation: lbh-fenster 2.4s var(--lbh-kurve) both;
}

.lbh-hero__fenster--gross {
	left: 0;
	width: calc(var(--lbh-hero-gross) * 1%);
	height: 100%;
}

.lbh-hero__fenster--klein {
	left: calc(var(--lbh-hero-spalte-links) * 1%);
	width: calc(var(--lbh-hero-spalte) * 1%);
	height: 61.1%;
}

.lbh-hero__fenster .lbh-hero__foto {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Foto = so breit wie die ganze Komposition, links buendig mit ihr.
   Desktop: 10000 / 74,14 = 134,88 %; 10000 / 22,51 = 444,25 %; -77,49 / 22,51 = -344,25 %. */
.lbh-hero__fenster--gross .lbh-hero__foto {
	inset: auto;
	width: calc(10000% / var(--lbh-hero-gross));
}

.lbh-hero__fenster--klein .lbh-hero__foto {
	inset: auto;
	left: calc(var(--lbh-hero-spalte-links) * -100% / var(--lbh-hero-spalte));
	width: calc(10000% / var(--lbh-hero-spalte));
	height: 163.67%;
}

.lbh-hero__kachel {
	line-height: normal;
	position: absolute;
	left: calc(var(--lbh-hero-spalte-links) * 1%);
	top: 66.14%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: calc(var(--lbh-hero-spalte) * 1%);
	height: 33.86%;
	overflow: hidden;
	padding: clamp(8px, 2.6cqw, 26px);
	border-radius: 16px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	text-align: left;
	animation: lbh-kachel 2.4s var(--lbh-kurve) both;
}

.lbh-hero__kachel:hover {
	color: var(--lbh-weiss);
}

.lbh-hero__kacheltext {
	font-size: clamp(9px, 2.1cqw, 16px);
	letter-spacing: 0.14em;
	line-height: 1.45;
	text-transform: uppercase;
}

.lbh-hero__kachel .lbh-pfeil {
	align-self: flex-end;
	font-size: clamp(11px, 2.8cqw, 22px);
	line-height: 1;
}

@keyframes lbh-fenster {
	from { clip-path: inset(0% 0% 62% 62% round 16px); }
	to { clip-path: inset(0% 0% 0% 0% round 16px); }
}

@keyframes lbh-kachel {
	from { opacity: 0; transform: translateY(-40px); }
	to { opacity: 1; transform: none; }
}

@keyframes lbh-steigen {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: none; }
}

/* =========================================================================
   8. Einstieg der Unterseiten
   ====================================================================== */

.lbh-einstieg {
	padding-top: clamp(48px, 8vw, 110px);
}

.lbh-einstieg--unten-72 { --lbh-unten: clamp(40px, 6vw, 72px); }
.lbh-einstieg--unten-64 { --lbh-unten: clamp(40px, 6vw, 64px); }

.lbh-einstieg--pflanze {
	background: url("../img/pflanze.svg") right -60px top 0 / auto 100% no-repeat;
}

.lbh-einstieg h1 {
	max-width: var(--lbh-h1-breite, 20ch);
	margin: 0 0 28px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(32px, 5vw, 64px);
	font-weight: 300;
	line-height: 1.1;
}

.lbh-einstieg--signet h1,
.lbh-einstieg--bild-rechts h1 {
	line-height: 1.08;
}

/* Text links, Bild rechts (Migräne) */
.lbh-einstieg--bild-rechts .lbh-einstieg__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}

.lbh-einstieg--bild-rechts .lbh-einstieg__text {
	flex: 1 1 420px;
	min-width: 0;
}

.lbh-einstieg--bild-rechts .lbh-einstieg__bild {
	position: relative;
	flex: 1 1 380px;
	min-height: clamp(280px, 32vw, 440px);
	overflow: hidden;
	border-radius: 26px;
}

/* Porträt links, Text rechts (Über mich) */
.lbh-einstieg--portraet .lbh-einstieg__raster {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: flex-start;
}

.lbh-einstieg--portraet .lbh-einstieg__text,
.lbh-einstieg__portraet {
	flex: 1 1 380px;
	min-width: 0;
	padding: 16px 0;
}

.lbh-einstieg__luft {
	flex: 0 0 auto;
	width: clamp(0px, 6vw, 123px);
}

.lbh-einstieg--portraet .lbh-einstieg__bild {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 26px;
}

.lbh-einstieg--portraet .lbh-kicker {
	margin-bottom: 22px;
}

.lbh-einstieg--portraet h1 {
	margin-bottom: 10px;
	font-size: clamp(30px, 4vw, 54px);
	line-height: 1.12;
}

.lbh-einstieg__untertitel {
	margin-bottom: 32px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.4;
}

/* =========================================================================
   9. Startseite: Willkommen
   ====================================================================== */

.lbh-willkommen__breite {
	position: relative;
	display: flex;
	justify-content: flex-end;
	max-width: var(--lbh-max);
	margin: 0 auto;
}

.lbh-willkommen__spalte {
	width: 92%;
}

.lbh-willkommen__text h2 {
	max-width: 34ch;
	margin: 0 0 40px;
	color: var(--lbh-text);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 400;
	line-height: 1.375;
}

.lbh-willkommen__text p {
	max-width: 816px;
	margin: 0 0 32px;
	color: var(--lbh-text);
	font-size: clamp(16px, 1.2vw, 17.6px);
	line-height: 1.82;
}

.lbh-willkommen__text > :last-child {
	margin-bottom: 0;
}

.lbh-willkommen__text h3 {
	max-width: 816px;
	margin: 0 0 8px;
	color: var(--lbh-text);
	font-family: var(--lbh-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.82;
}

/* =========================================================================
   10. Startseite: So arbeite ich
   ====================================================================== */

.lbh-arbeitsweise__raster {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	align-items: stretch;
	gap: clamp(20px, 5vw, 123px);
}

.lbh-arbeitsweise__links {
	min-width: 0;
}

.lbh-arbeitsweise__karten {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lbh-zahlkarte {
	padding: 24px 26px;
	border-radius: 20px;
	background: var(--lbh-sand);
}

.lbh-zahlkarte__kopf {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 10px;
}

.lbh-zahlkarte__zahl {
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 20px;
}

.lbh-zahlkarte h3 {
	margin: 0;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 23px;
	font-weight: 700;
	line-height: 1.3;
}

.lbh-zahlkarte p {
	margin: 0;
	color: var(--lbh-text);
	font-size: 16px;
	line-height: 1.8;
}

.lbh-arbeitsweise__rechts {
	display: flex;
	min-width: 0;
}

.lbh-arbeitsweise__bild {
	position: relative;
	flex: 1 1 0%;
	min-height: 280px;
	overflow: hidden;
	border-radius: 26px;
}

.lbh-arbeitsweise__link {
	margin-top: 28px;
}

@media (max-width: 600px) {
	.lbh-arbeitsweise__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.lbh-arbeitsweise__bild {
		min-height: 360px;
	}
}

/* =========================================================================
   11. Startseite: Schwerpunkte
   ====================================================================== */

.lbh-schwerpunkte__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 32px;
}

/* Bleibt stehen, waehrend rechts der Text weiterlaeuft. align-items:
   flex-start am Container ist Pflicht – „stretch" schaltet das Haften ab. */
.lbh-schwerpunkte__bild {
	position: sticky;
	top: clamp(150px, 14vw, 190px);
	flex: 1 1 42%;
	min-width: 280px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 26px;
}

.lbh-schwerpunkte__text {
	flex: 1 1 420px;
	min-width: 0;
}

.lbh-schwerpunkte__titel {
	margin-bottom: 6px;
}

.lbh-schwerpunkte__unterzeile {
	margin-bottom: 32px;
	color: var(--lbh-text-2);
	font-size: 17.6px;
	line-height: 1.82;
}

.lbh-fokus__liste {
	border-top: 1px solid var(--lbh-linie);
}

.lbh-fokus__knopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 22px 4px;
	border: 0;
	border-bottom: 1px solid var(--lbh-linie);
	background: none;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(20px, 2.4vw, 28px);
	line-height: normal;
	text-align: left;
	cursor: pointer;
	transition: padding 0.45s var(--lbh-pfeilkurve), background-color 0.45s;
}

.lbh-fokus__knopf:hover {
	padding-left: 14px;
	background-color: var(--lbh-sand-45);
}

.lbh-fokus__knopf .lbh-pfeil {
	font-size: 20px;
}

.lbh-fokus__text p {
	max-width: 60ch;
	margin: 28px 0 0;
	color: var(--lbh-text);
	font-size: clamp(16px, 1.2vw, 17.6px);
	line-height: 1.82;
}

.hat-js .lbh-fokus__text[data-fokus-zu] {
	display: none;
}

.lbh-schwerpunkte__link {
	margin-top: 28px;
}

@media (max-width: 900px) {
	.lbh-schwerpunkte__bild {
		position: relative;
		top: auto;
	}
}

/* =========================================================================
   12. Startseite: Navy-Kacheln
   ====================================================================== */

.lbh-kachelreihe__titel {
	margin: 0 0 36px;
}

.lbh-kachelreihe__raster {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.lbh-navykachel {
	display: flex;
	flex: 1 1 280px;
	flex-direction: column;
	min-height: 305px;
	padding: 26px 24px;
	border-radius: 26px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-navykachel__titel {
	margin-bottom: 18px;
	font-family: var(--lbh-serif);
	font-size: clamp(26px, 2.2vw, 31px);
	line-height: 1.3;
}

.lbh-navykachel__text {
	margin-bottom: auto;
	color: var(--lbh-auf-navy);
	font-size: 15.5px;
	line-height: 1.75;
}

.lbh-navykachel__text p {
	margin: 0;
}

.lbh-textlink--mehr-hell,
.lbh-navykachel__link {
	padding-bottom: 0;
	border-bottom: 0;
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	color: var(--lbh-weiss);
	font-size: 14px;
	letter-spacing: 0.16em;
	line-height: normal;
	text-transform: uppercase;
}

.lbh-navykachel__link:hover {
	color: var(--lbh-weiss);
}

/* =========================================================================
   13. Startseite: Zitat mit Foto
   ====================================================================== */

.lbh-zitat__raster {
	display: flex;
	flex-flow: row-reverse wrap-reverse;
	align-items: stretch;
	gap: 32px;
}

.lbh-zitat__bild {
	position: relative;
	flex: 1 1 380px;
	min-height: clamp(300px, 34vw, 520px);
	overflow: hidden;
	border-radius: 26px;
}

.lbh-zitat__karte {
	display: flex;
	flex: 1 1 380px;
	flex-direction: column;
	justify-content: center;
	padding: clamp(28px, 4vw, 64px);
	border-radius: 26px;
	background: var(--lbh-navy);
}

.lbh-zitat__name {
	display: block;
	margin-bottom: 28px;
	color: var(--lbh-weiss);
	font-family: var(--lbh-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
}

.lbh-zitat__text {
	margin: 0 0 40px;
	color: var(--lbh-creme);
	font-family: var(--lbh-serif);
	font-size: clamp(26px, 3vw, 44px);
	font-weight: 600;
	line-height: 1.36;
	text-wrap: balance;
}

.lbh-zitat__schluss {
	white-space: nowrap;
}

.lbh-zitat__link {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 14px;
	color: var(--lbh-creme);
	font-size: 15px;
	letter-spacing: 0.2em;
	line-height: normal;
	text-transform: uppercase;
}

.lbh-zitat__link:hover {
	color: var(--lbh-creme);
}

/* =========================================================================
   14. Startseite: Umrisskacheln
   ====================================================================== */

.lbh-beschwerden__raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(210px, 25% - 24px), 1fr));
	gap: clamp(16px, 2vw, 30px);
}

.lbh-umriss {
	line-height: normal;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	aspect-ratio: 2 / 1;
	padding: 22px 26px;
	border: 1px solid var(--lbh-navy);
	border-radius: 22px;
	background: none;
	color: var(--lbh-navy);
	text-align: left;
	transition: background 0.2s ease;
}

.lbh-umriss:hover {
	background: var(--lbh-sand);
	color: var(--lbh-navy);
}

.lbh-umriss__titel {
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(20px, 1.7vw, 26px);
	line-height: 1.25;
}

.lbh-umriss .lbh-pfeil {
	align-self: flex-end;
	color: var(--lbh-navy);
	font-size: 22px;
}

/* =========================================================================
   15. Buch
   ====================================================================== */

.lbh-buch--start .lbh-buch__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 4vw, 72px);
}

.lbh-buch--start .lbh-buch__links {
	flex: 0 0 auto;
	width: clamp(200px, 22vw, 290px);
	max-width: 100%;
}

.lbh-buch__cover {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	padding: 18px;
	border-radius: 20px;
}

.lbh-buch--start .lbh-buch__cover .lbh-platzhalter__text {
	font-size: 12.5px;
}

.lbh-buch__text {
	display: flex;
	flex: 1 1 380px;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.lbh-buch__kicker {
	margin-bottom: 20px;
}

.lbh-buch__untertitel {
	margin-bottom: 36px;
}

.lbh-buch__inhalt p {
	max-width: 60ch;
	margin: 0 0 28px;
	color: var(--lbh-text);
	font-size: clamp(16px, 1.2vw, 17.6px);
	line-height: 1.82;
}

/* Unterseite: Cover halbe Breite, Abstandsspalte, Text */
.lbh-buch--seite .lbh-buch__raster {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.lbh-buch--seite .lbh-buch__links,
.lbh-buch--seite .lbh-buch__text {
	flex: 1 1 380px;
	min-width: 0;
	padding: 16px 0;
}

.lbh-buch--seite .lbh-buch__cover {
	padding: 22px;
	border-radius: 26px;
}

.lbh-buch--seite .lbh-buch__titel {
	margin: 0 0 8px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.3;
}

.lbh-buch--seite .lbh-buch__untertitel {
	margin-bottom: 32px;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.4;
}

.lbh-buch--seite .lbh-textlink {
	align-self: flex-start;
}

/* =========================================================================
   16. Bildkarten, Beitragskarten
   ====================================================================== */

.lbh-raster-270 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
}

.lbh-themenkarte {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.lbh-themenkarte__bild {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 26px;
}

.lbh-themenkarte h3 {
	margin: 0;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.3;
}

.lbh-themenkarte h3 a {
	color: inherit;
}

.lbh-themenkarte p {
	margin: 0;
	color: var(--lbh-text-2);
	font-size: 15.5px;
	line-height: 1.78;
}

/* Leitbeitrag */
.lbh-leit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
	padding-bottom: clamp(40px, 5vw, 64px);
	border-bottom: 1px solid var(--lbh-linie);
}

.lbh-leit__bild {
	position: relative;
	flex: 1 1 340px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	padding: 20px;
	border-radius: 26px;
}

.lbh-leit__text {
	display: flex;
	flex: 1 1 340px;
	flex-direction: column;
	min-width: 0;
}

.lbh-leit__titel {
	margin: 0 0 18px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.26;
}

.lbh-leit__titel a {
	color: inherit;
}

.lbh-leit__teaser {
	max-width: 56ch;
	margin: 0 0 22px;
	color: var(--lbh-text);
	font-size: 16.5px;
	line-height: 1.82;
}

.lbh-beitraege__rest {
	padding-top: clamp(40px, 5vw, 64px);
}

/* =========================================================================
   17. FAQ und Akkordeon
   ====================================================================== */

.lbh-faq__raster {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 64px);
}

.lbh-faq--pflanze .lbh-faq__raster {
	position: relative;
}

.lbh-faq__kopf {
	flex: 1 1 300px;
	min-width: 0;
}

.lbh-faq__titel {
	max-width: 24ch;
	margin: 0 0 20px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.3;
}

.lbh-faq--start .lbh-faq__titel,
.lbh-faq--mittel .lbh-faq__titel {
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.35;
}

.lbh-faq__einleitung {
	max-width: 46ch;
	margin: 0 0 24px;
	color: var(--lbh-text);
	font-size: 16.5px;
	line-height: 1.82;
}

.lbh-faq__spalte {
	flex: 1.4 1 420px;
	min-width: 0;
}

.lbh-faq__liste {
	border-top: 1px solid var(--lbh-linie);
}

.lbh-faq__h {
	margin: 0;
	font: inherit;
}

.lbh-faq__frage,
.lbh-pubs__kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: 20px 4px;
	border: 0;
	border-bottom: 1px solid var(--lbh-linie);
	background: none;
	color: var(--lbh-navy);
	line-height: normal;
	text-align: left;
	cursor: pointer;
}

.lbh-faq__frage-text {
	font-family: var(--lbh-serif);
	font-size: clamp(19px, 1.7vw, 23px);
}

.lbh-faq--start .lbh-faq__frage {
	gap: 16px;
}

.lbh-faq--start .lbh-faq__frage-text {
	font-size: clamp(19px, 1.9vw, 24px);
}

.lbh-faq__zeichen {
	color: var(--lbh-navy);
	font-size: 22px;
	line-height: 1;
}

.lbh-faq--start .lbh-faq__zeichen {
	font-size: 19px;
	line-height: normal;
}

.lbh-faq__zeichen::before {
	content: "+";
}

[aria-expanded="true"] > .lbh-faq__zeichen::before {
	content: "–";
}

.lbh-acc {
	display: grid;
	grid-template-rows: 1fr;
}

.lbh-acc__innen {
	min-height: 0;
	overflow: hidden;
}

/* Zugeklappt nur mit Skript – ohne bleibt alles lesbar. */
.hat-js .lbh-acc {
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.5s var(--lbh-pfeilkurve), opacity 0.4s ease;
}

.hat-js .lbh-acc.is-offen {
	grid-template-rows: 1fr;
	opacity: 1;
}

@supports not (grid-template-rows: 0fr) {
	.hat-js .lbh-acc {
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.5s ease, opacity 0.4s ease;
	}

	.hat-js .lbh-acc.is-offen {
		max-height: 800px;
	}
}

.lbh-faq__antwort {
	max-width: 62ch;
	padding: 18px 4px 24px;
	border-bottom: 1px solid var(--lbh-linie);
	color: var(--lbh-text);
	font-size: 16px;
	line-height: 1.82;
}

.lbh-faq__antwort p {
	margin: 0;
}

.lbh-faq__antwort p + p {
	margin-top: 12px;
}

/* =========================================================================
   18. Newsletter
   ====================================================================== */

.lbh-newsletter__band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
	padding: clamp(32px, 5vw, 72px);
	border-radius: 26px;
	background: var(--lbh-navy);
}

.lbh-newsletter__text {
	flex: 1 1 340px;
	min-width: 0;
}

.lbh-newsletter__titel {
	max-width: 22ch;
	margin: 0 0 18px;
	color: var(--lbh-creme);
	font-family: var(--lbh-serif);
	font-size: clamp(26px, 3vw, 40px);
	line-height: 1.3;
}

.lbh-newsletter__absatz {
	max-width: 50ch;
	margin: 0;
	color: var(--lbh-auf-navy);
	font-size: 16.5px;
	line-height: 1.82;
}

.lbh-newsletter__form {
	flex: 1 1 320px;
	min-width: 0;
}

.lbh-nl {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lbh-nl__mail {
	width: 100%;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 12px;
	background: transparent;
	color: var(--lbh-weiss);
	font-family: var(--lbh-sans);
	font-size: 16px;
}

.lbh-nl__mail::placeholder {
	color: rgba(219, 226, 234, 0.75);
}

.lbh-nl__mail:focus {
	border-color: var(--lbh-salbei);
	outline: none;
}

.lbh-nl__einwilligung {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--lbh-auf-navy);
	font-size: 14px;
	line-height: 1.7;
	cursor: pointer;
}

.lbh-nl__einwilligung input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 4px;
	accent-color: var(--lbh-salbei);
}

.lbh-nl__einwilligung a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lbh-nl__knopf {
	align-self: flex-start;
	padding: 16px 28px;
	border: 0;
	border-radius: 12px;
	background: var(--lbh-salbei);
	color: var(--lbh-navy);
	font-size: 14px;
	letter-spacing: 0.16em;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
}

.lbh-nl__knopf:hover {
	background: var(--lbh-weiss);
}

.lbh-nl__meldung {
	min-height: 18px;
	color: var(--lbh-fehler-navy);
	font-size: 13.5px;
}

.lbh-nl__meldung.is-erfolg {
	color: var(--lbh-auf-navy);
	font-size: 15px;
}

/* Im Fussbereich etwas kleiner */
.lbh-nl--fuss {
	gap: 12px;
}

.lbh-nl--fuss .lbh-nl__mail {
	padding: 13px 16px;
	border-radius: 10px;
	font-size: 15px;
}

.lbh-nl--fuss .lbh-nl__einwilligung {
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.65;
}

.lbh-nl--fuss .lbh-nl__einwilligung input {
	width: 15px;
	height: 15px;
	margin-top: 3px;
}

.lbh-nl--fuss .lbh-nl__knopf {
	padding: 13px 22px;
	border-radius: 10px;
	font-size: 13.5px;
	letter-spacing: 0.14em;
}

.lbh-nl--fuss .lbh-nl__meldung {
	min-height: 16px;
	font-size: 13px;
}

/* Im Popup hell */
.lbh-nl--popup {
	gap: 12px;
}

.lbh-nl--popup .lbh-nl__mail {
	padding: 14px 18px;
	border-color: rgba(26, 58, 107, 0.3);
	background: var(--lbh-weiss);
	color: var(--lbh-text);
}

.lbh-nl--popup .lbh-nl__mail::placeholder {
	color: var(--lbh-text-2);
}

.lbh-nl--popup .lbh-nl__mail:focus {
	border-color: var(--lbh-navy);
}

.lbh-nl--popup .lbh-nl__einwilligung {
	color: var(--lbh-text-2);
	font-size: 13.5px;
	line-height: 1.65;
}

.lbh-nl--popup .lbh-nl__einwilligung input {
	margin-top: 3px;
	accent-color: var(--lbh-navy);
}

.lbh-nl--popup .lbh-nl__knopf {
	padding: 15px 26px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	letter-spacing: 0.14em;
}

.lbh-nl--popup .lbh-nl__knopf:hover {
	background: var(--lbh-navy-hell);
}

.lbh-nl--popup .lbh-nl__meldung {
	color: var(--lbh-fehler);
}

.lbh-nl--popup .lbh-nl__meldung.is-erfolg {
	color: var(--lbh-navy);
}

/* Popup */
.lbh-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(18, 33, 64, 0.45);
}

.lbh-popup[hidden] {
	display: none;
}

.lbh-popup__karte {
	position: relative;
	width: 100%;
	max-width: 520px;
	padding: clamp(28px, 4vw, 44px);
	border-radius: 26px;
	background: var(--lbh-creme);
	box-shadow: 0 30px 80px rgba(18, 33, 64, 0.3);
}

.lbh-popup__zu {
	position: absolute;
	top: 14px;
	right: 18px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lbh-navy);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.lbh-popup__titel {
	margin: 0 0 14px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.3;
}

.lbh-popup__text {
	margin: 0 0 18px;
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 1.75;
}

/* =========================================================================
   19. Instagram
   ====================================================================== */

.lbh-instagram__titel {
	max-width: 34ch;
	margin: 0;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.35;
}

.lbh-instagram__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 20px;
}

.lbh-instagram__kachel {
	aspect-ratio: 1 / 1;
	padding: 18px;
	border-radius: 26px;
	color: var(--lbh-text-2);
}

.lbh-instagram__kachel:hover {
	color: var(--lbh-navy);
}

.lbh-instagram__kachel .lbh-platzhalter__text {
	color: inherit;
	font-size: 12.5px;
	letter-spacing: 0.14em;
}

/* =========================================================================
   20. Karten-Raster (Sand oder Navy)
   ====================================================================== */

.lbh-karten__titel {
	margin: 0 0 32px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
}

.lbh-karten__titel:has(+ .lbh-karten__einleitung) {
	margin-bottom: 12px;
}

.lbh-karten--kopf-gross .lbh-karten__titel {
	max-width: 26ch;
	margin-bottom: clamp(28px, 4vw, 48px);
	font-size: clamp(24px, 2.6vw, 38px);
	line-height: 1.3;
}

.lbh-karten__einleitung {
	max-width: 64ch;
	margin: 0 0 36px;
	color: var(--lbh-text);
	font-size: 16.5px;
	line-height: 1.82;
}

.lbh-karten__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--lbh-spalte, 300px), 1fr));
	gap: 20px;
}

.lbh-karte {
	position: relative;
	border-radius: 26px;
	background: var(--lbh-sand);
}

.lbh-karten--polster-klein .lbh-karte { padding: clamp(26px, 3vw, 38px); }
.lbh-karten--polster-mittel .lbh-karte { padding: clamp(26px, 3vw, 40px); }
.lbh-karten--polster-gross .lbh-karte { padding: clamp(28px, 3vw, 42px); }

.lbh-karte > h2,
.lbh-karte > h3 {
	margin: 0 0 18px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-weight: 400;
}

.lbh-karten--titel-23 .lbh-karte > :is(h2, h3) { font-size: 23px; }
.lbh-karten--titel-24 .lbh-karte > :is(h2, h3) { font-size: 24px; margin-bottom: 22px; }
.lbh-karten--titel-25 .lbh-karte > :is(h2, h3) { font-size: 25px; }
.lbh-karten--titel-25.lbh-karten--polster-mittel .lbh-karte > :is(h2, h3) { margin-bottom: 14px; }
.lbh-karten--titel-26 .lbh-karte > :is(h2, h3) { font-size: 26px; margin-bottom: 16px; }

.lbh-karte p {
	margin: 0;
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 1.85;
}

.lbh-karten--titel-26 .lbh-karte p {
	font-size: 16px;
	line-height: 1.82;
}

.lbh-karte ul {
	margin: 0;
	padding-left: 18px;
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 1.95;
}

.lbh-karten--titel-23 .lbh-karte ul {
	line-height: 1.9;
}

.lbh-karte--link {
	cursor: pointer;
	transition: background 0.2s ease;
}

.lbh-karte--link:hover {
	background: var(--lbh-sand-dunkel);
}

.lbh-karte--link ul {
	margin-bottom: 18px;
}

.lbh-karte__flaeche {
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.lbh-karte__mehr {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--lbh-navy);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Kompakte Kacheln (Spannungskopfschmerz: Auslöser) */
.lbh-karten--polster-kompakt .lbh-karten__raster { gap: 18px; }

.lbh-karten--polster-kompakt .lbh-karte {
	padding: clamp(22px, 2.6vw, 32px);
	border-radius: 22px;
}

.lbh-karten--polster-kompakt.lbh-karten--kopf-gross .lbh-karten__titel {
	margin-bottom: clamp(28px, 4vw, 44px);
	font-size: clamp(24px, 2.6vw, 36px);
}

.lbh-karten--titel-21 .lbh-karte > :is(h2, h3) {
	margin-bottom: 10px;
	font-size: 21px;
}

.lbh-karten--titel-21 .lbh-karte p {
	font-size: 15px;
	line-height: 1.75;
}

/* Navy-Karten (Über mich) */
.lbh-karten--navy .lbh-karte {
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-karten--navy .lbh-karte > :is(h2, h3) {
	color: var(--lbh-weiss);
}

.lbh-karten--navy .lbh-karte ul,
.lbh-karten--navy .lbh-karte p {
	color: var(--lbh-auf-navy);
	font-size: 16px;
	line-height: 1.95;
}

.lbh-karten--navy .lbh-karte__mehr {
	margin-top: 26px;
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.6);
	color: var(--lbh-weiss);
	gap: 12px;
	letter-spacing: 0.16em;
}

.lbh-karten--navy .lbh-karte--link:hover {
	background: var(--lbh-navy);
}

.lbh-karten--navy .lbh-karte--link ul {
	margin-bottom: 0;
}

.lbh-karten--navy .lbh-karte__mehr {
	line-height: normal;
}

/* =========================================================================
   21. Liste mit Trennlinien
   ====================================================================== */

.lbh-zeilen__titel {
	max-width: 30ch;
	margin: 0 0 20px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
}

.lbh-zeilen__einleitung {
	max-width: 64ch;
	margin: 0 0 32px;
	color: var(--lbh-text);
	font-size: 16.5px;
	line-height: 1.82;
}

.lbh-zeilen__liste {
	margin-bottom: 32px;
	border-top: 1px solid var(--lbh-linie);
}

.lbh-zeilen__liste ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbh-zeilen__liste li {
	padding: 20px 4px;
	border-bottom: 1px solid var(--lbh-linie);
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(19px, 2vw, 26px);
}

/* =========================================================================
   22. Vita
   ====================================================================== */

.lbh-vita__breite {
	display: flex;
	flex-direction: column;
	gap: clamp(48px, 6vw, 80px);
	max-width: 1100px;
	margin: 0 auto;
}

.lbh-vita__titel {
	margin: 0 0 28px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.3;
}

.lbh-vita__zeile {
	display: grid;
	grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
	gap: 8px 28px;
	padding: 18px 0;
	border-top: 1px solid var(--lbh-linie-14);
}

.lbh-vita__zeit {
	color: var(--lbh-text-2);
	font-size: 14px;
	letter-spacing: 0.06em;
	line-height: 1.6;
}

.lbh-vita__station {
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(19px, 1.6vw, 22px);
	line-height: 1.35;
}

.lbh-vita__ort {
	margin-top: 4px;
	color: var(--lbh-text);
	font-size: 15px;
	line-height: 1.7;
}

@media (max-width: 600px) {
	.lbh-vita__zeile {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Publikationsliste */
.lbh-pubs__kopf {
	border-top: 1px solid var(--lbh-linie);
}

.lbh-pubs__kopf > span:first-child {
	font-family: var(--lbh-serif);
	font-size: clamp(20px, 1.8vw, 24px);
}

.lbh-pubs__liste {
	margin: 0;
	padding: 8px 4px 16px;
	color: var(--lbh-text);
	font-size: 15px;
	line-height: 1.7;
	list-style: none;
}

.lbh-pub {
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr);
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid var(--lbh-linie-10);
}

.lbh-pub__jahr {
	color: var(--lbh-text-2);
	font-size: 14px;
}

/* =========================================================================
   23. Schritte
   ====================================================================== */

.lbh-schritte__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
}

/* Navy-Band (Themenseiten) */
.lbh-band {
	padding: clamp(32px, 5vw, 64px);
	border-radius: 30px;
	background: var(--lbh-navy);
}

.lbh-band__titel {
	max-width: 30ch;
	margin: 0 0 12px;
	color: var(--lbh-weiss);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.3;
}

.lbh-band__titel--28 {
	margin-bottom: 28px;
}

.lbh-band__einleitung {
	max-width: 60ch;
	margin: 0 0 clamp(28px, 4vw, 40px);
	color: var(--lbh-auf-navy);
	font-size: 16px;
	line-height: 1.8;
}

.lbh-schritte--band .lbh-schritt__zahl {
	margin-bottom: 10px;
	color: var(--lbh-salbei);
	font-family: var(--lbh-serif);
	font-size: 28px;
}

.lbh-schritte--band .lbh-schritt h3 {
	margin: 0 0 10px;
	color: var(--lbh-weiss);
	font-family: var(--lbh-serif);
	font-size: 22px;
}

.lbh-schritte--band .lbh-schritt p {
	margin: 0;
	color: var(--lbh-auf-navy);
	font-size: 15.5px;
	line-height: 1.75;
}

/* Sandkarten (Migräne) */
.lbh-schritte--karten .lbh-schritte__titel {
	max-width: 26ch;
	margin: 0 0 clamp(28px, 4vw, 48px);
}

.lbh-schritte--karten .lbh-schritte__raster {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.lbh-schritte--karten .lbh-schritt {
	padding: clamp(24px, 3vw, 34px);
	border-radius: 22px;
	background: var(--lbh-sand);
}

.lbh-schritte--karten .lbh-schritt__zahl {
	margin-bottom: 12px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 26px;
}

.lbh-schritte--karten .lbh-schritt h3 {
	margin: 0 0 12px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 22px;
}

.lbh-schritte--karten .lbh-schritt p {
	margin: 0;
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 1.8;
}

/* Liste rechts, Text links (Mentoring) */
.lbh-schritte--liste .lbh-schritte__raster {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: start;
	gap: clamp(32px, 4vw, 72px);
}

.lbh-schritte--liste .lbh-schritte__titel {
	margin: 0 0 20px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
}

.lbh-schritte__einleitung {
	max-width: 56ch;
	margin: 0 0 28px;
	color: var(--lbh-text);
	font-size: 16.5px;
	line-height: 1.82;
}

.lbh-schritte__liste {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.lbh-schritte--liste .lbh-schritt {
	display: flex;
	gap: 18px;
}

.lbh-schritte--liste .lbh-schritt__zahl {
	padding-top: 2px;
	color: var(--lbh-salbei);
	font-family: var(--lbh-serif);
	font-size: 22px;
	line-height: 1.7;
}

.lbh-schritte--liste .lbh-schritt h3 {
	margin: 0 0 6px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 21px;
}

.lbh-schritte--liste .lbh-schritt p {
	margin: 0;
	color: var(--lbh-text-2);
	font-size: 15.5px;
	line-height: 1.78;
}

/* =========================================================================
   24. Warnzeichen
   ====================================================================== */

.lbh-warn__liste ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbh-warn__liste li {
	padding: 4px 0 4px 18px;
	border-left: 2px solid var(--lbh-salbei);
	color: var(--lbh-weiss);
	font-size: 15.5px;
	line-height: 1.7;
}

/* =========================================================================
   25. Zwei Spalten
   ====================================================================== */

.lbh-zwei__raster {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 56px);
}

.lbh-zwei__spalte {
	flex: 1.4 1 420px;
	min-width: 0;
}

.lbh-zwei__spalte--kasten {
	flex: 1 1 300px;
	align-self: flex-start;
	padding: clamp(26px, 3vw, 38px);
	border-radius: 26px;
	background: var(--lbh-sand);
}

.lbh-zwei__spalte > h2 {
	max-width: 26ch;
	margin: 0 0 22px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.3;
}

.lbh-zwei__spalte > p {
	max-width: 64ch;
	margin: 0 0 20px;
	color: var(--lbh-text);
	font-size: 16.5px;
	line-height: 1.85;
}

/* Im Entwurf traegt der letzte Absatz nur bei drei Absaetzen (Spannungs-
   kopfschmerz) keinen Abstand; die Themenseiten mit zwei behalten ihn. */
.lbh-zwei__spalte > p:nth-of-type(3):last-child {
	margin-bottom: 0;
}

.lbh-zwei__spalte--kasten > h3 {
	margin: 0 0 18px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 23px;
}

.lbh-zwei__spalte--kasten > ul {
	margin: 0;
	padding-left: 18px;
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 2;
}

/* Aufzaehlung mit Schraegstrichen */
ul.is-style-schraegstrich {
	padding-left: 0 !important;
	list-style: none;
}

ul.is-style-schraegstrich li {
	display: flex;
	gap: 10px;
}

ul.is-style-schraegstrich li::before {
	content: "/";
	color: var(--lbh-salbei);
	font-size: 18px;
	font-weight: 800;
}

/* Text und Formular (Kontakt) */
.lbh-zwei--text-formular .lbh-zwei__raster {
	gap: clamp(28px, 4vw, 64px);
}

.lbh-zwei--text-formular .lbh-zwei__spalte:first-child {
	flex: 1 1 320px;
}

.lbh-zwei--text-formular .lbh-zwei__spalte:last-child {
	flex: 1 1 360px;
}

.lbh-zwei--text-formular .lbh-zwei__spalte > h2 {
	max-width: none;
	margin-bottom: 20px;
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.7;
}

.lbh-zwei--text-formular .lbh-zwei__spalte > p {
	max-width: 52ch;
	margin-bottom: 24px;
	line-height: 1.82;
}

.lbh-kontaktdaten {
	color: var(--lbh-text);
	font-size: 16px;
	line-height: 1.9;
}

/* =========================================================================
   26. Kurse
   ====================================================================== */

.lbh-kurse__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 20px;
}

.lbh-kurs {
	display: flex;
	flex-direction: column;
	padding: clamp(28px, 3vw, 44px);
	border-radius: 26px;
	background: var(--lbh-sand);
	color: var(--lbh-navy);
}

.lbh-kurs__status {
	margin-bottom: 22px;
	color: var(--lbh-text-2);
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.lbh-kurs h2 {
	margin: 0 0 18px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.2vw, 32px);
	line-height: 1.25;
}

.lbh-kurs p {
	margin: 0 0 28px;
	color: var(--lbh-text);
	font-size: 16px;
	line-height: 1.8;
}

.lbh-kurs__knopf {
	align-self: flex-start;
	margin-top: auto;
	padding: 15px 26px;
}

.lbh-kurs--navy {
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-kurs--navy .lbh-kurs__status {
	color: var(--lbh-salbei);
}

.lbh-kurs--navy h2 {
	color: var(--lbh-weiss);
}

.lbh-kurs--navy p {
	color: var(--lbh-auf-navy);
}

.lbh-kurse__band {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 48px;
	margin-top: 20px;
	padding: clamp(26px, 3vw, 40px);
	border: 1px solid var(--lbh-navy);
	border-radius: 26px;
}

.lbh-kurse__bandtext {
	flex: 1 1 420px;
	min-width: 0;
}

.lbh-kurse__bandtitel {
	margin: 0 0 12px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(22px, 2.2vw, 30px);
}

.lbh-kurse__bandtext p {
	max-width: 70ch;
	margin: 0;
	color: var(--lbh-text);
	font-size: 16px;
	line-height: 1.82;
}

/* =========================================================================
   27. Kontakt: Wege zum Termin, Formular, Anfahrt
   ====================================================================== */

.lbh-wege__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}

.lbh-weg {
	display: flex;
	flex-direction: column;
	min-height: 280px;
	padding: 26px 24px;
	border-radius: 26px;
	background: var(--lbh-sand);
	color: var(--lbh-navy);
}

a.lbh-weg:hover {
	color: var(--lbh-navy);
}

.lbh-weg--navy {
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

a.lbh-weg--navy:hover {
	color: var(--lbh-weiss);
}

.lbh-weg__label {
	margin-bottom: 18px;
	color: var(--lbh-text-2);
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lbh-weg--navy .lbh-weg__label {
	color: var(--lbh-salbei);
}

.lbh-weg__titel {
	margin-bottom: 14px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 24px;
	line-height: 1.3;
}

.lbh-weg--navy .lbh-weg__titel {
	color: inherit;
}

.lbh-weg__text {
	margin-bottom: auto;
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 1.75;
}

.lbh-weg__text p {
	margin: 0;
}

.lbh-weg--navy .lbh-weg__text {
	color: var(--lbh-auf-navy);
}

.lbh-weg > .lbh-pfeil {
	align-self: flex-end;
	margin-top: 20px;
	font-size: 22px;
}

.lbh-weg__formlink {
	align-self: flex-start;
	margin-top: 20px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--lbh-navy);
	color: var(--lbh-navy);
	font-size: 15px;
	line-height: 1.7;
}

/* Contact Form 7 im Kleid des Entwurfs */
.lbh-formular .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.lbh-formular .wpcf7-form p {
	margin: 0;
}

.lbh-formular .wpcf7-form-control-wrap {
	display: block;
}

.lbh-formular input[type="text"],
.lbh-formular input[type="email"],
.lbh-formular input[type="tel"],
.lbh-formular textarea {
	width: 100%;
	padding: 15px 18px;
	border: 1px solid rgba(26, 58, 107, 0.3);
	border-radius: 12px;
	background: var(--lbh-weiss);
	color: var(--lbh-text);
	font-family: var(--lbh-sans);
	font-size: 16px;
	line-height: normal;
}

.lbh-formular textarea {
	resize: vertical;
}

.lbh-formular input:focus,
.lbh-formular textarea:focus {
	border-color: var(--lbh-navy);
	outline: none;
}

.lbh-formular ::placeholder {
	color: var(--lbh-text-2);
}

.lbh-formular .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.lbh-formular .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--lbh-text-2);
	font-size: 14px;
	line-height: 1.7;
	cursor: pointer;
}

.lbh-formular input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 4px 0 0;
	accent-color: var(--lbh-navy);
}

.lbh-formular .wpcf7-acceptance a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lbh-formular .wpcf7-submit {
	align-self: flex-start;
	padding: 16px 28px;
	border: 0;
	border-radius: 12px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
	font-family: inherit;
	font-size: 14px;
	letter-spacing: 0.14em;
	line-height: normal;
	text-transform: uppercase;
	cursor: pointer;
}

.lbh-formular .wpcf7-submit:hover {
	background: var(--lbh-navy-hell);
}

.lbh-formular .wpcf7-not-valid-tip {
	margin-top: 6px;
	color: var(--lbh-fehler);
	font-size: 13.5px;
}

.lbh-formular .wpcf7-response-output {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	color: var(--lbh-fehler);
	font-size: 13.5px;
}

.lbh-formular .wpcf7 form.sent .wpcf7-response-output {
	color: var(--lbh-navy);
	font-size: 16px;
}

.lbh-formular .wpcf7-spinner {
	display: none;
}

/* Anfahrt */
.lbh-anfahrt__titel {
	margin: 0 0 28px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
}

.lbh-anfahrt__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 20px;
}

.lbh-anfahrt__karte {
	position: relative;
	flex: 1 1 380px;
	min-height: clamp(260px, 30vw, 380px);
	overflow: hidden;
	padding: 22px;
	border-radius: 26px;
}

.lbh-anfahrt__karte iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.lbh-anfahrt__laden {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--lbh-text-2);
	font-size: 13px;
	letter-spacing: 0.16em;
	line-height: 1.7;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
}

.lbh-anfahrt__laden small {
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: none;
}

.lbh-anfahrt__karten {
	display: grid;
	flex: 1 1 300px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
}

.lbh-anfahrt__adresse,
.lbh-anfahrt__info {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: 26px;
	background: var(--lbh-sand);
}

.lbh-anfahrt__adresse {
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-anfahrt__name {
	margin-bottom: 14px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 21px;
	line-height: 1.4;
}

.lbh-anfahrt__adresse .lbh-anfahrt__name {
	color: var(--lbh-weiss);
}

.lbh-anfahrt__zeilen {
	color: var(--lbh-text);
	font-size: 15.5px;
	line-height: 1.8;
}

.lbh-anfahrt__adresse .lbh-anfahrt__zeilen {
	margin-bottom: auto;
	color: var(--lbh-auf-navy);
	font-size: 16px;
	line-height: 1.7;
}

.lbh-anfahrt__route {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	color: var(--lbh-weiss);
	font-size: 14px;
	letter-spacing: 0.14em;
	line-height: 1.7;
	text-transform: uppercase;
}

.lbh-anfahrt__route:hover {
	color: var(--lbh-weiss);
}

/* =========================================================================
   28. Fliesstext, Beitrag
   ====================================================================== */

.lbh-fliess__text {
	max-width: 64ch;
}

.lbh-fliess__text h2 {
	margin: 48px 0 16px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 34px);
	line-height: 1.3;
}

.lbh-fliess__text h3 {
	margin: 32px 0 12px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 23px;
	line-height: 1.35;
}

.lbh-fliess__text > :first-child {
	margin-top: 0;
}

.lbh-fliess__text p,
.lbh-fliess__text ul,
.lbh-fliess__text ol {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.85;
}

.lbh-fliess__text a,
.lbh-beitrag__text a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.lbh-beitrag {
	padding-top: clamp(48px, 8vw, 110px);
	--lbh-unten: clamp(40px, 6vw, 64px);
}

.lbh-beitrag__breite {
	max-width: 880px;
	margin: 0 auto;
}

.lbh-beitrag__titel {
	margin: 0 0 28px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(30px, 4.4vw, 56px);
	font-weight: 300;
	line-height: 1.12;
}

.lbh-beitrag__vorspann {
	margin: 0 0 36px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(20px, 1.9vw, 25px);
	line-height: 1.5;
}

.lbh-beitrag__bild {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 40px;
	padding: 20px;
	border-radius: 26px;
}

.lbh-beitrag__text p,
.lbh-beitrag__text ul,
.lbh-beitrag__text ol {
	margin: 0 0 22px;
	color: var(--lbh-text);
	font-size: 17px;
	line-height: 1.9;
}

.lbh-beitrag__text h2 {
	margin: 40px 0 16px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: clamp(24px, 2.4vw, 32px);
	line-height: 1.3;
}

.lbh-beitrag__text h3 {
	margin: 32px 0 12px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 23px;
	line-height: 1.35;
}

.lbh-beitrag__fuss {
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--lbh-linie);
}

/* =========================================================================
   29. Fussbereich
   ====================================================================== */

.lbh-fuss {
	padding: 76px 0 60px;
	background: var(--lbh-navy);
	color: var(--lbh-weiss);
}

.lbh-fuss__innen {
	max-width: calc(var(--lbh-max) + 2 * var(--lbh-rand));
	margin: 0 auto;
	padding: 0 var(--lbh-rand);
}

.lbh-fuss__logo {
	display: flex;
	justify-content: center;
}

.lbh-fuss__logo img {
	width: auto;
	height: clamp(64px, 7vw, 100px);
	filter: brightness(0) invert(1);
}

.lbh-fuss__social {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 26px 0 60px;
}

.lbh-fuss__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	color: var(--lbh-auf-navy);
}

.lbh-fuss__social a:hover {
	background: var(--lbh-creme);
	color: var(--lbh-navy);
}

.lbh-fuss__linie {
	margin: 0 0 60px;
	border: 0;
	border-top: 1px solid var(--lbh-salbei);
}

.lbh-fuss__raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 40px;
}

.lbh-fuss__titel {
	margin: 0 0 18px;
	color: var(--lbh-weiss);
	font-family: var(--lbh-serif);
	font-size: 22px;
	font-weight: 400;
}

.lbh-fuss__spalte p,
.lbh-fuss__nltext {
	margin: 0 0 14px;
	color: var(--lbh-auf-navy);
	font-size: 15px;
	line-height: 1.9;
}

.lbh-fuss__spalte .lbh-fuss__nltext {
	margin: 0 0 12px;
	line-height: 1.8;
}

.lbh-fuss__spalte p:last-child {
	margin-bottom: 0;
}

.lbh-fuss a {
	color: var(--lbh-auf-navy);
}

.lbh-fuss a:hover {
	color: var(--lbh-weiss);
}

.lbh-fuss__mehr {
	display: flex;
	width: max-content;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	letter-spacing: 0.12em;
	line-height: normal;
	text-transform: uppercase;
}

.lbh-fuss__liste {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lbh-fuss__liste li {
	line-height: normal;
}

.lbh-fuss__liste .lbh-fuss__link {
	font-size: 15px;
	line-height: normal;
}

.lbh-fuss__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin-top: 60px;
	padding-top: 28px;
	border-top: 1px solid rgba(219, 226, 234, 0.2);
	color: var(--lbh-auf-navy);
	font-size: 14px;
}

.lbh-fuss__jahr {
	margin: 0;
}

.lbh-fuss__rechtliches {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =========================================================================
   30. Einblenden beim Scrollen
   Nur mit Skript: .hat-js setzt der Kopf, .lbh-rv-an setzt site.js. Laedt
   das Skript nicht, bleibt alles sichtbar (siehe auch Notbremse in site.js).
   ====================================================================== */

.lbh-rv-an [data-rv] {
	opacity: 0;
	transform: translateY(56px);
	transition: opacity 1.1s var(--lbh-kurve), transform 1.1s var(--lbh-kurve);
	transition-delay: var(--d, 0s);
}

.lbh-rv-an [data-rv].is-drin {
	opacity: 1;
	transform: none;
}

.lbh-rv-an [data-rvw] {
	clip-path: inset(0% 0% 62% 62% round 26px);
	transition: clip-path 2.2s var(--lbh-kurve);
	transition-delay: var(--d, 0s);
}

.lbh-rv-an [data-rvw].is-drin {
	clip-path: inset(0% 0% 0% 0% round 26px);
}

.lbh-rv-an [data-rvw] img {
	transform: scale(1.14);
	transition: transform 1.8s var(--lbh-kurve);
	transition-delay: var(--d, 0s);
}

.lbh-rv-an [data-rvw].is-drin img {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.lbh-rv-an [data-rv],
	.lbh-rv-an [data-rvw],
	.lbh-rv-an [data-rvw] img,
	.lbh-hero__fenster,
	.lbh-hero__kachel,
	.lbh-hero__wortmarke,
	.lbh-hero__text h1 {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		transition: none !important;
		animation: none !important;
	}

	.lbh-pfeil,
	.lbh-fokus__knopf,
	.hat-js .lbh-acc {
		transition: none !important;
	}
}

/* =========================================================================
   31. Urlaubsmeldung (Baustein bausteine/urlaubsmeldung.md, Teil B)
   ====================================================================== */

.lbh-urlaub {
	width: min(560px, calc(100vw - 2 * var(--lbh-rand)));
	max-height: min(80vh, 640px);
	padding: 0;
	border: 0;
	border-radius: 26px;
	background: var(--lbh-creme);
	color: var(--lbh-text);
	box-shadow: 0 30px 80px rgba(18, 33, 64, 0.3);
	overflow: auto;
	overscroll-behavior: contain;
}

.lbh-urlaub::backdrop {
	background: rgba(18, 33, 64, 0.45);
}

.lbh-urlaub__innen {
	padding: 40px;
}

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

.lbh-urlaub__titel {
	margin: 0 0 16px;
	color: var(--lbh-navy);
	font-family: var(--lbh-serif);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
}

.lbh-urlaub__text {
	font-size: 16px;
	line-height: 1.8;
}

.lbh-urlaub__text > *:first-child { margin-top: 0; }
.lbh-urlaub__text > *:last-child { margin-bottom: 0; }

.lbh-urlaub__text ul,
.lbh-urlaub__text ol {
	margin: 12px 0 0;
	padding-left: 1.35em;
	list-style: revert;
}

.lbh-urlaub__text li { margin-top: 6px; }
.lbh-urlaub__text li::marker { color: var(--lbh-navy); }

.lbh-urlaub__text a {
	color: var(--lbh-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

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

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

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

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

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

.lbh-urlaub--bild .lbh-urlaub__figur {
	align-self: stretch;
	min-height: 100%;
	overflow: hidden;
	border-radius: 0 26px 26px 0;
}

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

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