/**
 * Le Gesta – Stylesheet
 * ============================================================================
 *
 * Portierung des Gestaltungssystems der bestehenden Seite. Farben,
 * Schriftgrößen, Abstände und Radien stammen aus deren Quellcode und sind
 * hier unverändert übernommen, damit das WordPress-Frontend dem Original
 * entspricht, statt es nachzuempfinden.
 *
 * Aufbau
 *    1  Grundwerte
 *    2  Basis
 *    3  Raster: Abschnitt und Innenbreite
 *    4  Flächen
 *    5  Typografie-Bausteine
 *    6  Abstandsrhythmus
 *    7  Schaltflächen
 *    8  Karten
 *    9  Kartenraster
 *   10  Bild-Text-Abschnitte
 *   11  Einzelbausteine
 *   12  Platzhalter für kommende Funktionen
 *   13  Kopfbereich
 *   14  Fußbereich
 *   15  WordPress-Inhalte
 *   16  Formulare
 *   17  Events und Buchung
 *   18  Bewegung und Druck
 */

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

:root {
	/* --- Farben (Kurznamen auf die Presets aus theme.json) --- */
	--c-weiss: var(--wp--preset--color--weiss);
	--c-creme: var(--wp--preset--color--creme);
	--c-creme-tief: var(--wp--preset--color--creme-tief);
	--c-gold: var(--wp--preset--color--gold);
	--c-gold-weich: var(--wp--preset--color--gold-weich);
	--c-gold-akzent: var(--wp--preset--color--gold-akzent);
	--c-gold-tief: var(--wp--preset--color--gold-tief);
	--c-bordeaux: var(--wp--preset--color--bordeaux);
	--c-bordeaux-weich: var(--wp--preset--color--bordeaux-weich);
	--c-tinte: var(--wp--preset--color--tinte);
	--c-tinte-weich: var(--wp--preset--color--tinte-weich);
	--c-linie: var(--wp--preset--color--linie);
	--c-linie-stark: var(--wp--preset--color--linie-stark);
	--c-fuss: var(--wp--preset--color--fuss);
	--c-fuss-text: var(--wp--preset--color--fuss-text);
	--c-fuss-gold: var(--wp--preset--color--fuss-gold);
	--c-fuss-linie: oklch(60% 0.05 22 / 0.25);

	--c-gut: oklch(52% 0.13 150);
	--c-gut-flaeche: oklch(96.5% 0.03 150);
	--c-warn: oklch(48% 0.11 70);
	--c-warn-flaeche: oklch(96% 0.045 80);
	--c-warn-linie: oklch(86% 0.09 80);
	--c-fehler: oklch(51% 0.2 27);
	--c-fehler-flaeche: oklch(96.5% 0.035 27);

	/* --- Schriften --- */
	--f-display: var(--wp--preset--font-family--display);
	--f-text: var(--wp--preset--font-family--text);

	/* --- Schriftgrößen --- */
	--fs-kicker: var(--wp--preset--font-size--kicker);       /* 13    */
	--fs-klein: var(--wp--preset--font-size--klein);         /* 15    */
	--fs-text: var(--wp--preset--font-size--text);           /* 16    */
	--fs-lead: var(--wp--preset--font-size--lead);           /* 18    */
	--fs-karte: var(--wp--preset--font-size--karte);         /* 20    */
	--fs-h3: var(--wp--preset--font-size--titel-klein);      /* 29–42 */
	--fs-h2: var(--wp--preset--font-size--titel);            /* 32–46 */
	--fs-h1: var(--wp--preset--font-size--titel-gross);      /* 35–54 */
	--fs-hero: var(--wp--preset--font-size--hero);           /* 42–67 */

	/* --- Abstände ---
	   Drei Stufen, mehr braucht die Seite nicht:
	     eng   – innerhalb einer Textgruppe
	     weit  – zwischen Abschnittskopf und Inhalt
	     gross – zwischen eigenständigen Blöcken
	   Genau hier lag die Ursache der unruhigen Lücken: vorher gab es vier
	   konkurrierende Rhythmen auf derselben Seite. */
	--sp-eng: 0.75rem;
	--sp-weit: 2rem;
	--sp-gross: 3rem;

	--sp-rand: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);      /* Seitenrand   20–40 */
	--sp-abschnitt: clamp(3.5rem, 2.8rem + 3vw, 6rem);    /* Abschnitt    56–96 */
	--gap-split: clamp(2rem, 1.5rem + 2vw, 3rem);         /* Bild ↔ Text  32–48 */
	--gap-karten: clamp(1.25rem, 1rem + 1vw, 1.5rem);     /* Karte ↔ Karte 20–24 */

	/* --- Maße --- */
	--breite-inhalt: 1200px;
	--breite-prosa: 42rem;
	--mass: 46ch;

	/* --- Form --- */
	--r-karte: 16px;
	--r-pille: 999px;
	--r-klein: 6px;

	--schatten-karte: 0 8px 28px oklch(0% 0 0 / 0.07);
	--schatten-karte-hover: 0 14px 36px oklch(0% 0 0 / 0.1);

	--dauer: 200ms;
	--ease: cubic-bezier(0.2, 0.6, 0.3, 1);

	--kopf-hoehe: 4rem;
}

/* ==========================================================================
   2  Basis
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
	min-width: 320px;
	margin: 0;
	background: var(--c-creme);
	color: var(--c-tinte);
	font-family: var(--f-text);
	font-size: var(--fs-text);
	line-height: 1.65;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
	font-family: var(--f-display);
	font-weight: 700;
	color: var(--c-bordeaux);
	text-wrap: balance;
	font-feature-settings: "kern" 1, "liga" 1;
}

h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.12; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-karte); line-height: 1.3; }
h5 { font-size: var(--fs-lead); line-height: 1.35; }
h6 { font-size: var(--fs-text); line-height: 1.4; }

/* Der hervorgehobene Teil einer Überschrift steht in Gold. Das ist das
   auffälligste Erkennungsmerkmal der Marke. */
h1 em,
h2 em,
h3 em,
h4 em {
	color: var(--c-gold-akzent);
	font-style: normal;
	font-weight: 800;
}

/* Auf der Sonnenfläche läge Gold auf Gold – dort bleibt der Akzent bordeaux. */
.lg-abschnitt--sonne :is(h1, h2, h3, h4) em {
	color: var(--c-bordeaux);
}

p,
ul,
ol,
dl,
figure,
blockquote {
	margin: 0;
}

p em,
li em {
	color: inherit;
	font-style: italic;
}

strong {
	font-weight: 600;
}

a {
	color: inherit;
	text-decoration: inherit;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

button {
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: 2px solid var(--c-bordeaux);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--c-gold-weich);
	color: var(--c-bordeaux);
}

.lg-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--c-bordeaux);
	color: var(--c-weiss);
	border-radius: 0 0 var(--r-klein) 0;
}

.lg-skip:focus {
	left: 0;
}

/* ==========================================================================
   3  Raster: Abschnitt und Innenbreite
   --------------------------------------------------------------------------
   Genau ein Muster für die gesamte Seite:

       <section class="lg-abschnitt">   ← Außenabstand und Seitenrand
         <div class="lg-innen">          ← auf 1200px begrenzt, zentriert
   ========================================================================== */

.lg-abschnitt {
	padding-block: var(--sp-abschnitt);
	padding-inline: var(--sp-rand);
	/* Abschnitte sitzen bündig aufeinander. WordPress setzt zwischen
	   Geschwisterblöcke sonst einen Block-Abstand von 24px – dort schiene
	   der Seitenhintergrund als schmaler Streifen in einer dritten Farbe
	   durch. Genau das waren die unerklärlichen Lücken. */
	margin-block: 0;
}

.lg-innen {
	width: 100%;
	max-width: var(--breite-inhalt);
	margin-inline: auto;
}

.lg-innen--prosa {
	max-width: var(--breite-prosa);
}

.lg-innen--zentriert {
	text-align: center;
}

/* Folgen zwei Abschnitte derselben Fläche aufeinander, entstünde doppelter
   Abstand. Der zweite verzichtet deshalb auf seinen oberen. */
.lg-abschnitt--anschluss {
	padding-top: 0;
}

/* Der erste Abschnitt schließt enger an den Kopfbereich an. Mit dem vollen
   Abschnittspolster stünde dort ein leerer Streifen, bevor die Seite
   beginnt. */
.lg-main > .lg-abschnitt:first-child,
.lg-seiteninhalt > .lg-abschnitt:first-child {
	padding-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

/* ==========================================================================
   4  Flächen
   --------------------------------------------------------------------------
   Fünf Untergründe im Wechsel geben der Seite ihren Rhythmus.
   ========================================================================== */

/* Vier flache Töne. Farbverläufe waren der auffälligste Grund dafür, dass
   die Seite erzeugt statt gestaltet wirkte – deshalb bleibt nur einer
   übrig, ganz oben im Auftakt, und auch der ist einfarbig gedacht. */
.lg-abschnitt--weiss { background: var(--c-weiss); }
.lg-abschnitt--creme { background: var(--c-creme); }
.lg-abschnitt--creme-tief { background: var(--c-creme-tief); }
.lg-abschnitt--hero { background: var(--c-weiss); }

/* Warmer Sandton als vierte Fläche – deutlich unterscheidbar, ohne Verlauf. */
.lg-abschnitt--sonne { background: oklch(93.5% 0.042 88); }

.lg-abschnitt--kante-oben {
	border-top: 1px solid var(--c-linie);
}

/* ==========================================================================
   5  Typografie-Bausteine
   ========================================================================== */

/* Kicker: kleine Zeile über der Überschrift, mit goldenem Strich davor. */
.lg-kicker {
	display: block;
	font-family: var(--f-text);
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-bordeaux);
	line-height: 1.4;
}

.lg-kicker::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 26px;
	height: 2px;
	margin-right: 0.7em;
	border-radius: 2px;
	background: var(--c-gold);
}

/* In zentrierten Köpfen säße der Strich schief – dort entfällt er. */
.lg-kopf--zentriert .lg-kicker::before,
.lg-innen--zentriert .lg-kicker::before {
	display: none;
}

.lg-hero-titel {
	font-size: var(--fs-hero);
	line-height: 1.06;
	/* Begrenzte Zeilenlänge: Die Überschrift bricht dadurch an einer
	   sinnvollen Stelle statt an der Spaltenkante. */
	max-width: 17ch;
}

.lg-kopf--zentriert .lg-hero-titel {
	margin-inline: auto;
}

.lg-lead {
	font-size: var(--fs-lead);
	line-height: 1.6;
	color: var(--c-tinte-weich);
	max-width: var(--mass);
}

/* Im Abschnittskopf nutzt der Vorspann die ganze Spalte. Auf 46 Zeichen
   begrenzt brach er mitten in der Fläche um und ließ rechts eine
   auffällige Leere. In einer Spalte (Bild-Text) greift die Begrenzung
   der Spalte selbst. */
.lg-kopf > .lg-lead,
.lg-kopf > .lg-text {
	max-width: none;
}

.lg-split__text .lg-kopf > .lg-lead,
.lg-split__text .lg-kopf > .lg-text,
.lg-textspalten .lg-kopf > .lg-lead {
	max-width: var(--mass);
}

.lg-text {
	color: var(--c-tinte-weich);
	max-width: var(--mass);
}

.lg-text strong {
	color: var(--c-bordeaux);
	font-weight: 500;
}

.lg-claim {
	color: var(--c-tinte-weich);
	font-weight: 500;
	max-width: var(--mass);
}

/* Merksatz als eigenes Band. Diese Zeilen tragen die Aussage einer Seite;
   zwischen zwei Absätzen eingeklemmt gehen sie unter. */
.lg-merksatz {
	margin-top: var(--sp-weit);
	font-family: var(--f-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-bordeaux);
	text-wrap: balance;
	max-width: 24ch;
	margin-inline: auto;
}

/* Ein Band braucht weniger Höhe als ein Inhaltsabschnitt. */
.lg-abschnitt--schmal {
	padding-block: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.lg-klein,
.lg-muted {
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-breit {
	max-width: 62ch;
}

/* Zentrierte Bereiche: Textblöcke mittig statt linksbündig. */
.lg-kopf--zentriert :is(.lg-lead, .lg-text, .lg-claim),
.lg-innen--zentriert :is(.lg-lead, .lg-text, .lg-claim) {
	margin-inline: auto;
}

/* Aufzählung ohne Punkte. Die erste Zeile führt als Vorspann. */
.lg-liste {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 56ch;
}

.lg-liste li {
	color: var(--c-tinte-weich);
}

.lg-liste--fuehrend li:first-child {
	font-size: var(--fs-lead);
	color: var(--c-tinte);
}

/* Aufzählung mit goldenem Punkt. */
.lg-liste--punkte li {
	position: relative;
	padding-left: 1.4rem;
}

.lg-liste--punkte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--c-gold);
}

/* ==========================================================================
   6  Abstandsrhythmus
   --------------------------------------------------------------------------
   Kicker, Überschrift und Vorspann bilden eine Gruppe mit engem Abstand.
   Zwischen dieser Gruppe und dem Inhalt darunter steht ein weiter Abstand.
   Weitere Abstufungen gibt es nicht.
   ========================================================================== */

.lg-kopf > * + * {
	margin-top: var(--sp-eng);
}

.lg-kopf + * {
	margin-top: var(--sp-weit);
}

.lg-kopf--zentriert {
	text-align: center;
}

/* Zentrierte Überschriften brauchen eine Zeilengrenze, sonst laufen sie
   über die volle Abschnittsbreite und verlieren ihre Form. */
.lg-kopf--zentriert h1,
.lg-kopf--zentriert h2 {
	max-width: 22ch;
	margin-inline: auto;
}

/* Fließender Inhalt unterhalb eines Kopfes. */
.lg-fluss > * + * {
	margin-top: var(--sp-eng);
}

.lg-fluss > * + :is(.lg-btns, .lg-raster, .lg-cards, .lg-galerie, .lg-pillen, .lg-faq, .lg-platzhalter) {
	margin-top: var(--sp-weit);
}

/* ==========================================================================
   7  Schaltflächen
   ========================================================================== */

.lg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--f-text);
	font-size: var(--fs-klein);
	font-weight: 500;
	letter-spacing: 0.025em;
	line-height: 1.2;
	padding: 0.75rem 1.5rem;
	border-radius: var(--r-pille);
	border: 1px solid transparent;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--dauer) var(--ease),
		border-color var(--dauer) var(--ease),
		color var(--dauer) var(--ease),
		box-shadow var(--dauer) var(--ease),
		transform var(--dauer) var(--ease);
}

.lg-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

.lg-btn:active {
	transform: translateY(0);
	box-shadow: none;
}

.lg-btn[disabled],
.lg-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.lg-btn--primaer {
	background: var(--c-bordeaux);
	color: var(--c-weiss);
}

.lg-btn--primaer:hover {
	background: var(--c-bordeaux-weich);
	color: var(--c-weiss);
}

.lg-btn--linie {
	background: transparent;
	border-color: var(--c-bordeaux);
	color: var(--c-bordeaux);
}

.lg-btn--linie:hover {
	background: var(--c-creme-tief);
	color: var(--c-bordeaux);
}

.lg-btn--gold {
	background: var(--c-gold);
	color: var(--c-gold-tief);
	box-shadow: inset 0 0 0 1px oklch(28% 0.045 62 / 0.25);
}

.lg-btn--gold:hover {
	background: var(--c-gold-weich);
	color: var(--c-gold-tief);
}

.lg-btn-compact {
	padding: 0.5rem 1rem;
	font-size: var(--fs-kicker);
}

/* Hauptaufforderung einer Seite: größer, mit goldenem Rand und einem
   Pfeil, der beim Überfahren vorrückt. Ein Standardknopf trug das
   Gewicht der wichtigsten Handlung nicht. */
.lg-btn--gross {
	font-size: var(--fs-text);
	font-weight: 600;
	padding: 1rem 2rem;
	box-shadow: inset 0 0 0 1px oklch(72% 0.095 85 / 0.55);
}

.lg-btn--gross::after {
	content: "";
	width: 0.45em;
	height: 0.45em;
	margin-left: 0.15em;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--dauer) var(--ease);
}

.lg-btn--gross:hover::after {
	transform: translateX(3px) rotate(45deg);
}

.lg-btns {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-eng);
}

/* Abschließender Knopf unter einem Raster: mittig und mit deutlichem
   Abstand. Direkt links unter der ersten Karte klebte er an ihr. */
.lg-btns--mitte {
	justify-content: center;
	margin-top: var(--sp-gross);
}

.lg-kopf--zentriert .lg-btns,
.lg-innen--zentriert .lg-btns {
	justify-content: center;
}

/* Textlink mit goldenem Unterstrich. */
.lg-textlink,
.lg-link,
.is-style-lg-link {
	display: inline-block;
	color: var(--c-bordeaux);
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid var(--c-gold);
	padding-bottom: 1px;
	transition: border-color var(--dauer) var(--ease), color var(--dauer) var(--ease);
}

.lg-textlink:hover,
.lg-link:hover,
.is-style-lg-link:hover {
	color: var(--c-bordeaux-weich);
	border-bottom-color: var(--c-bordeaux-weich);
}

.lg-textlink::after {
	content: " →";
	white-space: nowrap;
}

/* ==========================================================================
   8  Karten
   --------------------------------------------------------------------------
   Das tragende Muster des Originals: Bild und Text sitzen gemeinsam in
   einem gerahmten Behälter mit 16px Radius.
   ========================================================================== */

.lg-karte {
	display: flex;
	flex-direction: column;
	background: var(--c-creme);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	overflow: hidden;
	height: 100%;
}

/* Auf cremefarbenem Untergrund wechselt die Karte auf Weiß, damit sie
   sich weiterhin abhebt. */
.lg-abschnitt--creme .lg-karte,
.lg-abschnitt--creme-tief .lg-karte,
.lg-abschnitt--sonne .lg-karte {
	background: var(--c-weiss);
}

.lg-karte--aktiv,
a.lg-karte {
	transition:
		transform var(--dauer) var(--ease),
		box-shadow var(--dauer) var(--ease),
		border-color var(--dauer) var(--ease);
}

.lg-karte--aktiv:hover,
a.lg-karte:hover {
	transform: translateY(-4px);
	border-color: var(--c-gold);
	box-shadow: var(--schatten-karte-hover);
}

/* Feste Bildhöhe. Ohne sie erhält jede Karte die Höhe ihres eigenen Bildes
   und die Titel stehen versetzt. */
.lg-karte__bild {
	display: block;
	width: 100%;
	height: 14rem;
	object-fit: cover;
	/* Etwas oberhalb der Mitte: Bei Aufnahmen von Menschen liegt das
	   Wesentliche selten in der unteren Bildhälfte. Mittig beschnitten
	   fielen Köpfe aus dem Ausschnitt. */
	object-position: 50% 35%;
	border-radius: 0;
	background: var(--c-creme-tief);
	flex: none;
}

.lg-karte__fuellung,
.lg-karte__bild--emblem {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-creme-tief);
	padding: 1rem;
}

.lg-karte__bild--emblem img {
	width: auto;
	height: 100%;
	max-height: 6rem;
	object-fit: contain;
	opacity: 0.85;
}

.lg-karte__inhalt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding: 1rem;
	flex: 1;
}

.lg-karte__titel {
	font-family: var(--f-display);
	font-size: var(--fs-lead);
	font-weight: 700;
	line-height: 1.35;
	color: var(--c-bordeaux);
}

.lg-karte__meta {
	font-family: var(--f-text);
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-karte__text {
	font-size: var(--fs-text);
	color: var(--c-tinte-weich);
	margin-top: 0.25rem;
}

/* Karte ohne Bild: gemusterte Fläche statt Leerraum. Der Lichtpunkt wandert
   von Karte zu Karte, damit eine Reihe nicht wie ein Fehler aussieht. */
.lg-karte__fuellung {
	height: 14rem;
	flex: none;
	--fuell-ton: oklch(90% 0.05 88);
	background: var(--fuell-ton);
	border-bottom: 1px solid var(--c-linie);
}

.lg-raster > :nth-child(3n + 2) .lg-karte__fuellung,
.lg-cards > :nth-child(3n + 2) .lg-karte__fuellung {
	--fuell-ton: oklch(93% 0.038 84);
}

.lg-raster > :nth-child(3n) .lg-karte__fuellung,
.lg-cards > :nth-child(3n) .lg-karte__fuellung {
	--fuell-ton: oklch(87% 0.062 90);
}

/* Kleines Etikett, etwa das Format eines Events. */
.lg-chip {
	display: inline-block;
	font-family: var(--f-text);
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-gold-tief);
	background: var(--c-gold-weich);
	border-radius: var(--r-pille);
	padding: 0.2rem 0.6rem;
	margin-bottom: 0.25rem;
}

/* ==========================================================================
   9  Kartenraster
   ========================================================================== */

.lg-raster,
.lg-cards {
	display: grid;
	gap: var(--gap-karten);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.lg-raster--2,
	.lg-raster--3,
	.lg-raster--4,
	.lg-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48rem) {
	.lg-raster--3,
	.lg-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.lg-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ==========================================================================
   10  Bild-Text-Abschnitte
   ========================================================================== */

.lg-split {
	display: grid;
	gap: var(--gap-split);
	align-items: center;
	grid-template-columns: 1fr;
}

/* Immer halbe Teilung. Wechselnde Verhältnisse (7:5 hier, 5:7 dort) lesen
   sich von Abschnitt zu Abschnitt als Unruhe – die Kanten springen. */
@media (min-width: 48rem) {
	.lg-split { grid-template-columns: 1fr 1fr; }
}

/* Auf dem Telefon steht das Bild oben, unabhängig von der Reihenfolge im
   Quelltext – es führt in den Abschnitt hinein. */
.lg-split__bild { order: -1; }
.lg-split__text { order: 0; }

/* Ausnahme Auftakt: Dort muss zuerst stehen, worum es geht. Ein Bild vor
   der Hauptüberschrift ließe die Seite ohne Aussage beginnen. */
.lg-split--textzuerst .lg-split__bild { order: 0; }
.lg-split--textzuerst .lg-split__text { order: -1; }

@media (min-width: 48rem) {
	.lg-split__bild,
	.lg-split__text { order: 0; }

	.lg-split--gespiegelt .lg-split__bild { order: 1; }
}

.lg-bild {
	width: 100%;
	border-radius: var(--r-karte);
	object-fit: cover;
	object-position: 50% 35%;
	background: var(--c-creme-tief);
}

.lg-bild--hoch { aspect-ratio: 4 / 5; }
.lg-bild--quer { aspect-ratio: 4 / 3; }
.lg-bild--breit { aspect-ratio: 16 / 9; }

/* Bildband über die volle Spaltenbreite. Für Abschnitte mit viel Text:
   Daneben stünde das Bild verloren in einer sehr hohen Spalte. */
.lg-bild--band {
	aspect-ratio: 21 / 9;
}

.lg-bild--schmal {
	max-width: 280px;
	margin-inline: auto;
}

/* Dreier-Anordnung: ein hohes Bild links, zwei kleinere rechts.
   Ein einzelnes Bild füllt eine halbe Spalte nicht aus und wirkt verloren. */
/* Ein breites Bild oben, zwei kleinere darunter.
   Zuvor lief ein Bild über zwei Zeilen. Ein Bild über mehrere Zeilen zu
   strecken funktioniert nicht zuverlässig – es behält sein Eigenmaß und
   zog die Anordnung auf ein Vielfaches ihrer Höhe. Jedes Bild hat jetzt
   sein eigenes Seitenverhältnis, damit steht die Höhe fest. */
.lg-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.lg-collage img {
	width: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: var(--r-karte);
	background: var(--c-creme-tief);
	aspect-ratio: 4 / 3;
	min-height: 0;
}

.lg-collage img:first-child {
	grid-column: span 2;
	aspect-ratio: 16 / 9;
}

/* ==========================================================================
   11  Einzelbausteine
   ========================================================================== */

/* Goldener Strich als leichte Markierung über einer Überschrift. */
.lg-linie {
	display: block;
	width: 56px;
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold) 70%, transparent 100%);
}

/* Zentrierte Variante, beidseitig auslaufend. */
.lg-spur {
	display: block;
	width: 84px;
	height: 1px;
	margin-inline: auto;
	background: linear-gradient(90deg, transparent, var(--c-gold) 22%, var(--c-gold) 78%, transparent);
}

/* Merkmal: Strich, Titel, Text – bewusst ohne Rahmen. */
.lg-merkmal {
	padding-top: 0.5rem;
}

.lg-merkmal .lg-linie {
	margin-bottom: 1rem;
}

.lg-merkmal h3,
.lg-merkmal h4 {
	font-size: var(--fs-karte);
	line-height: 1.3;
}

.lg-merkmal p {
	margin-top: 0.5rem;
	color: var(--c-tinte-weich);
}

/* Pillen: die Formatliste. */
.lg-pillen {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--sp-eng);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.lg-pillen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.lg-pillen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 80rem) {
	.lg-pillen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lg-pillen li {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0.75rem 1rem;
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	font-family: var(--f-display);
	font-weight: 600;
	color: var(--c-bordeaux);
	transition: border-color var(--dauer) var(--ease), transform var(--dauer) var(--ease);
}

.lg-pillen li:hover {
	border-color: var(--c-gold);
	transform: translateY(-2px);
}

/* Galerie. */
.lg-galerie {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40rem) {
	.lg-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 48rem) {
	.lg-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lg-galerie figure {
	height: 10rem;
	border-radius: var(--r-karte);
	overflow: hidden;
	margin: 0;
	background: var(--c-creme-tief);
}

.lg-galerie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms var(--ease);
}

.lg-galerie figure:hover img {
	transform: scale(1.05);
}

/* FAQ. */
.lg-faq {
	display: flex;
	flex-direction: column;
	gap: var(--sp-eng);
}

.lg-faq details {
	background: var(--c-creme);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	padding: 0.75rem 1rem;
	transition: border-color var(--dauer) var(--ease);
}

.lg-abschnitt--creme .lg-faq details,
.lg-abschnitt--creme-tief .lg-faq details,
.lg-abschnitt--sonne .lg-faq details {
	background: var(--c-weiss);
}

.lg-faq details:hover,
.lg-faq details[open] {
	border-color: var(--c-linie-stark);
}

.lg-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	font-family: var(--f-display);
	font-size: var(--fs-lead);
	font-weight: 700;
	color: var(--c-bordeaux);
	text-align: left;
}

.lg-faq summary::-webkit-details-marker {
	display: none;
}

.lg-faq summary::after {
	content: "";
	flex: none;
	width: 0.5em;
	height: 0.5em;
	margin-left: auto;
	border-right: 2px solid var(--c-gold);
	border-bottom: 2px solid var(--c-gold);
	transform: rotate(45deg);
	transition: transform var(--dauer) var(--ease);
}

.lg-faq details[open] summary::after {
	transform: rotate(225deg);
}

.lg-faq details > *:not(summary) {
	margin-top: 0.5rem;
	color: var(--c-tinte-weich);
	/* Die Zeile darf nicht über die volle Abschnittsbreite laufen –
	   das liest sich schlecht. Der Rahmen bleibt trotzdem 1200px. */
	max-width: 76ch;
}

/* Textabschnitt ohne Bild: Überschrift links, Fließtext rechts.
   Einspaltig bliebe die rechte Seitenhälfte leer. */
.lg-textspalten {
	display: grid;
	gap: var(--sp-weit);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.lg-textspalten {
		grid-template-columns: 1fr 1fr;
		gap: var(--gap-split);
		align-items: start;
	}
}

.lg-textspalten__kopf .lg-kopf + * {
	margin-top: 0;
}

/* In der Textspalte darf der Absatz die Spaltenbreite nutzen – die
   Spalte selbst sorgt bereits für eine angenehme Zeilenlänge. */
.lg-textspalten__text .lg-text,
.lg-textspalten__text .lg-claim,
.lg-textspalten__text .lg-liste {
	max-width: none;
}

/* Nummerierte Folge: mehrere gleichrangige Abschnitte einer Seite. */
.lg-schritte {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--sp-weit);
	counter-reset: schritt;
}

@media (min-width: 48rem) {
	.lg-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lg-schritt {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: start;
}

.lg-schritt__nr {
	font-family: var(--f-display);
	font-size: var(--fs-karte);
	font-weight: 800;
	line-height: 1;
	color: var(--c-gold);
	padding-top: 0.15em;
	font-variant-numeric: tabular-nums;
}

.lg-schritt__text h3 {
	font-size: var(--fs-karte);
	line-height: 1.3;
	margin-bottom: 0.4rem;
}

.lg-schritt__text p {
	color: var(--c-tinte-weich);
}

.lg-schritt__text p + p {
	margin-top: 0.5rem;
}

/* Reiner Fließtext innerhalb der 1200px-Spalte.
   Die Lesebreite wird hier begrenzt, nicht durch eine schmalere Spalte –
   sonst begänne der Text an einer anderen Kante als alle anderen
   Abschnitte. */
.lg-prosa {
	max-width: 68ch;
}

.lg-prosa > * + * {
	margin-top: var(--sp-eng);
}

.lg-prosa > :is(h2, h3) {
	margin-top: var(--sp-gross);
}

.lg-prosa > :is(h2, h3) + * {
	margin-top: var(--sp-eng);
}

.lg-prosa > :first-child {
	margin-top: 0;
}

.lg-prosa h2 { font-size: var(--fs-h3); }
.lg-prosa h3 { font-size: var(--fs-karte); }

.lg-prosa p,
.lg-prosa li {
	color: var(--c-tinte-weich);
}

.lg-prosa ul {
	padding-left: 1.25rem;
}

.lg-prosa a {
	color: var(--c-bordeaux);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-underline-offset: 3px;
}

/* Emblem (Businessrad, Lebensrad, Gesellschaftsrad). */
.lg-emblem {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: clamp(280px, 40vw, 440px);
	margin-inline: auto;
	aspect-ratio: 1;
}

.lg-emblem img {
	width: 100%;
	height: auto;
}

/* Sehr blasses Symbol hinter einem zentrierten Abschnitt. */
.lg-symbol-hintergrund {
	position: relative;
	overflow: hidden;
}

.lg-symbol-hintergrund > img:first-child {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 420px;
	max-width: 80%;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
}

.lg-symbol-hintergrund > .lg-innen {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   12  Platzhalter für kommende Funktionen
   --------------------------------------------------------------------------
   Bewusst sichtbar gestaltet: So ist erkennbar, wo etwas hinkommt, und die
   Seite wirkt angekündigt statt unfertig.
   ========================================================================== */

.lg-platzhalter {
	background: var(--c-weiss);
	border: 1px dashed var(--c-linie-stark);
	border-radius: var(--r-karte);
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.lg-abschnitt--weiss .lg-platzhalter {
	background: var(--c-creme);
}

.lg-platzhalter__marke {
	display: inline-block;
	font-family: var(--f-text);
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-gold-tief);
	background: var(--c-gold-weich);
	border-radius: var(--r-pille);
	padding: 0.3rem 0.75rem;
	margin-bottom: var(--sp-eng);
}

.lg-platzhalter h2,
.lg-platzhalter h3 {
	font-size: var(--fs-karte);
	margin-bottom: 0.5rem;
}

.lg-platzhalter p {
	color: var(--c-tinte-weich);
	max-width: var(--mass);
}

.lg-platzhalter ul {
	list-style: none;
	padding: 0;
	margin-top: var(--sp-eng);
	display: grid;
	gap: 0.5rem;
}

/* Zwei Spalten nur, wenn der Platzhalter die volle Breite einnimmt.
   In einer schmalen Karte bräche jede Zeile sonst mehrfach um. */
@media (min-width: 40rem) {
	.lg-platzhalter--breit ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lg-platzhalter li {
	position: relative;
	padding-left: 1.6rem;
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-platzhalter li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	border: 1px solid var(--c-gold);
	border-radius: 999px;
}

/* Hinweisfläche für Bereiche, deren Inhalte noch entstehen.
   Bewusst ruhig und vollständig gestaltet – als offene Ankündigung, nicht
   als Fehlerseite. */
.lg-aufbau {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-eng);
	max-width: 46rem;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem);
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	text-align: center;
}

.lg-aufbau__marke {
	font-family: var(--f-text);
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-gold-tief);
	background: var(--c-gold-weich);
	border-radius: var(--r-pille);
	padding: 0.3rem 0.9rem;
}

.lg-aufbau h2 {
	max-width: 20ch;
}

.lg-aufbau p {
	max-width: 52ch;
	color: var(--c-tinte-weich);
}

.lg-aufbau .lg-btns {
	margin-top: var(--sp-eng);
	justify-content: center;
}

.lg-platzhalter__phase {
	margin-top: var(--sp-eng);
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
	font-style: italic;
}

/* ==========================================================================
   13  Kopfbereich
   --------------------------------------------------------------------------
   Wichtig: hier kein backdrop-filter und kein transform. Beides erzeugt
   einen neuen Bezugsrahmen, in dem die mobile Navigation gefangen bliebe.
   ========================================================================== */

.lg-kopfbereich {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--c-weiss);
	border-bottom: 1px solid var(--c-linie);
}

.lg-kopfbereich__innen {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--breite-inhalt);
	min-height: var(--kopf-hoehe);
	margin-inline: auto;
	padding-inline: var(--sp-rand);
}

.lg-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}

.lg-logo img {
	height: 2.25rem;
	width: auto;
}

@media (min-width: 48rem) {
	.lg-logo img { height: 2.5rem; }
}

/* --- Hauptnavigation --- */

.lg-nav {
	display: none;
}

.lg-nav__liste {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--f-text);
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-nav__punkt {
	position: relative;
}

.lg-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding-block: 0.5rem;
	white-space: nowrap;
	transition: color var(--dauer) var(--ease);
}

.lg-nav__link:hover,
.lg-nav__punkt:hover > .lg-nav__link,
.lg-nav__link[aria-current="page"] {
	color: var(--c-bordeaux);
}

.lg-nav__link[aria-current="page"] {
	font-weight: 600;
}

.lg-nav__pfeil {
	width: 0.4em;
	height: 0.4em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--dauer) var(--ease);
}

.lg-nav__punkt:hover .lg-nav__pfeil,
.lg-nav__punkt:focus-within .lg-nav__pfeil {
	transform: translateY(0) rotate(225deg);
}

.lg-nav__unter {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	min-width: 13rem;
	margin: 0;
	/* Seitliches Polster, damit der abgerundete Hover-Bereich nicht an der
	   Kante des Ausklappmenüs klebt. */
	padding: 0.375rem;
	list-style: none;
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	box-shadow: var(--schatten-karte);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dauer) var(--ease), visibility var(--dauer);
	z-index: 50;
}

.lg-nav__punkt:hover > .lg-nav__unter,
.lg-nav__punkt:focus-within > .lg-nav__unter {
	opacity: 1;
	visibility: visible;
}

.lg-nav__unter a {
	display: block;
	padding: 0.625rem 0.75rem;
	/* Der Hover-Bereich folgt der Rundung des Ausklappmenüs. Eckig wirkte
	   er wie ein Fremdkörper darin. */
	border-radius: 10px;
	color: var(--c-tinte-weich);
	white-space: nowrap;
	transition: background-color var(--dauer) var(--ease), color var(--dauer) var(--ease);
}

.lg-nav__unter a:hover {
	background: var(--c-creme);
	color: var(--c-bordeaux);
}

/* --- Rechte Seite --- */

.lg-kopf-aktionen {
	display: none;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	flex-shrink: 0;
}

.lg-kopf-trenner {
	width: 1px;
	height: 1.25rem;
	background: var(--c-linie);
	flex-shrink: 0;
}

.lg-kopf-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--r-pille);
	color: var(--c-bordeaux);
	transition: background-color var(--dauer) var(--ease);
}

.lg-kopf-icon:hover {
	background: var(--c-creme);
}

/* --- Umschalter für das Telefon --- */

.lg-menue-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: auto;
	margin-right: -0.5rem;
	border-radius: var(--r-klein);
	color: var(--c-bordeaux);
	flex-shrink: 0;
}

.lg-menue-knopf__balken {
	position: relative;
}

.lg-menue-knopf__balken,
.lg-menue-knopf__balken::before,
.lg-menue-knopf__balken::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--dauer) var(--ease), background-color var(--dauer) var(--ease);
}

.lg-menue-knopf__balken::before,
.lg-menue-knopf__balken::after {
	content: "";
	position: absolute;
	left: 0;
}

.lg-menue-knopf__balken::before { top: -7px; }
.lg-menue-knopf__balken::after { top: 7px; }

.lg-menue-knopf[aria-expanded="true"] .lg-menue-knopf__balken {
	background: transparent;
}

.lg-menue-knopf[aria-expanded="true"] .lg-menue-knopf__balken::before {
	transform: translateY(7px) rotate(45deg);
}

.lg-menue-knopf[aria-expanded="true"] .lg-menue-knopf__balken::after {
	transform: translateY(-7px) rotate(-45deg);
}

/* --- Mobile Navigation --- */

.lg-mobilnav {
	position: fixed;
	inset: var(--kopf-hoehe) 0 0 0;
	z-index: 39;
	background: var(--c-weiss);
	overflow-y: auto;
	padding: 1.5rem var(--sp-rand) 3rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dauer) var(--ease), visibility var(--dauer);
}

.lg-mobilnav.ist-offen {
	opacity: 1;
	visibility: visible;
}

.lg-mobilnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lg-mobilnav > ul > li {
	border-bottom: 1px solid var(--c-linie);
}

.lg-mobilnav > ul > li > a,
.lg-mobilnav__kopf > a {
	display: block;
	padding: 0.875rem 0;
	font-family: var(--f-display);
	font-size: var(--fs-lead);
	font-weight: 700;
	color: var(--c-bordeaux);
}

.lg-mobilnav__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.lg-mobilnav__unter {
	padding-bottom: 0.75rem;
}

.lg-mobilnav__unter a {
	display: block;
	padding: 0.5rem 0 0.5rem 1rem;
	color: var(--c-tinte-weich);
}

.lg-mobilnav__aktionen {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.lg-mobilnav__aktionen .lg-btn {
	width: 100%;
}

body.menue-offen {
	overflow: hidden;
}

@media (min-width: 62rem) {
	/* Die Navigation nimmt den freien Raum ein und sitzt damit mittig
	   zwischen Bildmarke und Aktionen. */
	.lg-nav {
		display: block;
		/* Nicht unter den eigenen Platzbedarf schrumpfen. Sonst läuft die
		   mittig gesetzte Liste beidseitig über ihren Rahmen hinaus und
		   legt sich über Bildmarke und Schaltflächen. */
		flex: 0 1 auto;
		margin-inline: auto;
	}

	.lg-nav__liste { justify-content: center; flex-wrap: nowrap; }
	.lg-kopf-aktionen { display: flex; }
	.lg-menue-knopf { display: none; }
	.lg-mobilnav { display: none; }
}

/* ==========================================================================
   14  Fußbereich
   ========================================================================== */

.lg-fuss {
	background: var(--c-fuss);
	color: var(--c-fuss-text);
}

.lg-fuss__innen {
	width: 100%;
	max-width: var(--breite-inhalt);
	margin-inline: auto;
	padding: var(--sp-abschnitt) var(--sp-rand);
}

.lg-fuss__saeulen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem;
	font-family: var(--f-text);
	font-size: var(--fs-klein);
}

@media (min-width: 48rem) {
	.lg-fuss__saeulen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
	.lg-fuss__saeulen { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.lg-fuss__titel {
	font-family: var(--f-text);
	font-size: var(--fs-kicker);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--c-fuss-gold);
	margin-bottom: 0.75rem;
}

.lg-fuss ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lg-fuss li {
	margin-bottom: 0.375rem;
}

.lg-fuss li a {
	opacity: 0.8;
	transition: opacity var(--dauer) var(--ease);
}

.lg-fuss li a:hover {
	opacity: 1;
}

.lg-fuss__unten {
	display: grid;
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-fuss-linie);
}

@media (min-width: 48rem) {
	.lg-fuss__unten {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

.lg-fuss__adresse {
	font-style: normal;
	font-size: var(--fs-klein);
	opacity: 0.8;
	line-height: 1.7;
}

.lg-fuss__marke {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.lg-fuss__marke img {
	height: 3rem;
	width: 3rem;
	flex: none;
	border-radius: 999px;
}

.lg-fuss__adresse a:hover {
	opacity: 1;
	color: var(--c-fuss-gold);
}

.lg-fuss__rechts {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 48rem) {
	.lg-fuss__rechts { align-items: flex-end; }
}

.lg-fuss__sozial {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.lg-fuss__sozial a {
	opacity: 0.75;
	transition: opacity var(--dauer) var(--ease), color var(--dauer) var(--ease);
}

.lg-fuss__sozial a:hover {
	opacity: 1;
	color: var(--c-fuss-gold);
}

.lg-fuss__recht {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--c-fuss-linie);
	font-size: var(--fs-kicker);
	opacity: 0.75;
}

.lg-fuss__recht a:hover {
	opacity: 1;
	color: var(--c-fuss-gold);
}

/* ==========================================================================
   15  WordPress-Inhalte
   --------------------------------------------------------------------------
   Unterseiten bestehen aus Blöcken. Damit sie demselben Rhythmus folgen wie
   die gestalteten Abschnitte, bekommt der Inhaltsbereich eigene Regeln.
   ========================================================================== */

.lg-inhalt {
	padding-block: var(--sp-abschnitt);
	padding-inline: var(--sp-rand);
}

.lg-inhalt > * {
	max-width: var(--breite-prosa);
	margin-inline: auto;
}

.lg-inhalt > .alignwide { max-width: var(--breite-inhalt); }
.lg-inhalt > .alignfull { max-width: none; }

.lg-inhalt > * + * {
	margin-top: var(--sp-eng);
}

.lg-inhalt > * + :is(h2, h3, h4, .wp-block-image, .wp-block-buttons, .wp-block-separator, .wp-block-columns, .wp-block-table) {
	margin-top: var(--sp-gross);
}

.lg-inhalt > :is(h2, h3, h4) + * {
	margin-top: var(--sp-eng);
}

.lg-inhalt > :first-child {
	margin-top: 0;
}

.lg-inhalt :is(ul, ol) {
	padding-left: 1.25rem;
}

.lg-inhalt li + li {
	margin-top: 0.35rem;
}

.lg-inhalt p,
.lg-inhalt li {
	color: var(--c-tinte-weich);
}

.lg-inhalt a:not(.lg-btn):not(.wp-element-button) {
	color: var(--c-bordeaux);
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-underline-offset: 3px;
}

.lg-inhalt img {
	border-radius: var(--r-karte);
}

/* Seitenkopf einer Unterseite. */
.lg-seitenkopf {
	padding-block: clamp(2.5rem, 5vw, 4rem);
	padding-inline: var(--sp-rand);
	background: var(--c-weiss);
	border-bottom: 1px solid var(--c-linie);
}

.lg-seitenkopf__innen {
	width: 100%;
	max-width: var(--breite-inhalt);
	margin-inline: auto;
}

.lg-seitenkopf .lg-kicker { margin-bottom: var(--sp-eng); }
.lg-seitenkopf .lg-lead { margin-top: var(--sp-eng); }

/* Brotkrumen. */
.lg-brotkrumen {
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
	margin-bottom: var(--sp-eng);
}

.lg-brotkrumen a:hover { color: var(--c-bordeaux); }

.lg-brotkrumen span {
	opacity: 0.5;
	margin-inline: 0.4rem;
}

/* Seiten in voller Inhaltsbreite statt Lesebreite. */
.lg-inhalt--breit > * {
	max-width: var(--breite-inhalt);
}

/* Blätterfunktion unter Listen. */
.lg-blaettern {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: var(--sp-gross);
	font-size: var(--fs-klein);
}

.lg-blaettern .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--c-linie);
	border-radius: var(--r-pille);
	color: var(--c-bordeaux);
	transition: border-color var(--dauer) var(--ease), background-color var(--dauer) var(--ease);
}

.lg-blaettern .page-numbers:hover {
	border-color: var(--c-gold);
}

.lg-blaettern .page-numbers.current {
	background: var(--c-bordeaux);
	border-color: var(--c-bordeaux);
	color: var(--c-weiss);
}

/* Blöcke, die in unsere Bausteine eingesetzt werden, übernehmen deren
   Erscheinungsbild: Der Block liefert den Inhalt, die Klasse das Aussehen. */
.wp-block-post-terms.lg-kicker a {
	color: inherit;
}

.wp-block-post-excerpt.lg-lead p {
	margin: 0;
	font-size: inherit;
	color: inherit;
}

.wp-block-post-excerpt.lg-lead .wp-block-post-excerpt__more-text {
	display: none;
}

figure.lg-bild,
figure.wp-block-post-featured-image {
	margin: 0;
}

figure.lg-bild img,
figure.wp-block-post-featured-image img {
	width: 100%;
	border-radius: var(--r-karte);
}

/* Bild einer Karte, wenn es als Block-Figur kommt. */
figure.lg-karte__bild {
	margin: 0;
	height: 14rem;
}

figure.lg-karte__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 35%;
	border-radius: 0;
}

/* Von WordPress ausgegebene Blöcke. */
.wp-block-buttons {
	gap: var(--sp-eng);
}

.wp-element-button,
.wp-block-button__link {
	font-family: var(--f-text);
	font-size: var(--fs-klein);
	font-weight: 500;
	letter-spacing: 0.025em;
	transition: background-color var(--dauer) var(--ease), transform var(--dauer) var(--ease);
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.wp-block-separator {
	border: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--c-gold), transparent);
	opacity: 1;
	max-width: 84px;
	margin-inline: auto;
}

.wp-block-quote {
	border-left: 2px solid var(--c-gold);
	padding-left: 1.25rem;
	font-size: var(--fs-lead);
}

.wp-block-table {
	overflow-x: auto;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--c-linie);
	padding: 0.6rem 0.75rem;
}

.wp-block-table th {
	background: var(--c-creme-tief);
	color: var(--c-bordeaux);
	font-family: var(--f-display);
	text-align: left;
}

/* ==========================================================================
   16  Formulare
   ========================================================================== */

.lg-fields {
	display: grid;
	gap: 1rem;
}

.lg-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
	font-size: var(--fs-klein);
	font-weight: 500;
	color: var(--c-bordeaux);
}

.lg-field--check {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400;
	color: var(--c-tinte-weich);
	font-size: var(--fs-klein);
}

.lg-field--check input {
	width: auto;
	margin-top: 0.25rem;
	flex: none;
	accent-color: var(--c-bordeaux);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
input[type="password"],
select,
textarea {
	width: 100%;
	/* 16px verhindert, dass iOS beim Antippen in das Feld hineinzoomt. */
	font-family: var(--f-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--c-tinte);
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-klein);
	padding: 0.625rem 0.875rem;
	transition: border-color var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}

input:focus,
select:focus,
textarea:focus {
	outline: none;
	border-color: var(--c-bordeaux);
	box-shadow: 0 0 0 3px oklch(36.3% 0.117 13.8 / 0.12);
}

textarea {
	resize: vertical;
	min-height: 8rem;
}

.lg-help {
	font-size: var(--fs-klein);
	font-weight: 400;
	color: var(--c-tinte-weich);
}

/* Meldungen. */
.lg-notice {
	border: 1px solid var(--c-linie);
	border-left-width: 3px;
	border-left-color: var(--c-gold);
	border-radius: var(--r-klein);
	background: var(--c-creme);
	padding: 0.875rem 1rem;
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-notice--warn {
	background: var(--c-warn-flaeche);
	border-color: var(--c-warn-linie);
	border-left-color: var(--c-warn);
	color: var(--c-warn);
}

.lg-notice--gut {
	background: var(--c-gut-flaeche);
	border-left-color: var(--c-gut);
	color: var(--c-gut);
}

.lg-notice--fehler {
	background: var(--c-fehler-flaeche);
	border-left-color: var(--c-fehler);
	color: var(--c-fehler);
}

/* ==========================================================================
   17  Events und Buchung
   ========================================================================== */

.lg-event-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.lg-facts {
	display: grid;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: var(--fs-klein);
}

.lg-facts--stacked {
	grid-template-columns: auto 1fr;
}

.lg-facts dt {
	color: var(--c-tinte-weich);
	font-weight: 500;
}

.lg-facts dd {
	margin: 0;
	color: var(--c-tinte);
}

.lg-event-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	margin-top: var(--sp-eng);
	font-size: var(--fs-klein);
}

.lg-panel {
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.lg-abschnitt--weiss .lg-panel {
	background: var(--c-creme);
}

.lg-booking {
	display: grid;
	gap: 1rem;
}

.lg-booking__status:empty {
	display: none;
}

.lg-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem;
	margin-bottom: var(--sp-weit);
}

.lg-filter .lg-field {
	min-width: 12rem;
}

/* ==========================================================================
   18  Gezeichnete Grafiken
   --------------------------------------------------------------------------
   Eigene Vektorgrafiken statt weiterer Fotos. Die Bewegung ist bewusst
   langsam und leise – sie soll auffallen, wenn man hinsieht, und sonst
   nicht stören.
   ========================================================================== */

.lg-grafik {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

.lg-grafik--netz {
	max-width: clamp(280px, 40vw, 420px);
	margin-inline: auto;
	aspect-ratio: 1;
}

.lg-grafik--netz svg {
	position: relative;
	z-index: 1;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Weicher Schein hinter dem Netz. */
.lg-netz__halo {
	position: absolute;
	inset: -12%;
	border-radius: 999px;
	border: 1px solid var(--c-linie);
	pointer-events: none;
	animation: lg-atmen 9s cubic-bezier(0.08, 0.82, 0.17, 1) infinite;
}

@keyframes lg-atmen {
	0%, 100% { opacity: 0.7; transform: scale(0.96); }
	50% { opacity: 1; transform: scale(1.04); }
}

/* Äußerer Ring, langsam kreisend. */
.lg-netz__ring {
	fill: none;
	stroke: var(--c-gold);
	stroke-width: 1;
	stroke-dasharray: 2 10;
	opacity: 0.55;
	transform-origin: 130px 130px;
	animation: lg-kreisen 70s linear infinite;
}

@keyframes lg-kreisen {
	to { transform: rotate(360deg); }
}

/* Verbindungen: sie leuchten nacheinander kurz auf. */
.lg-netz__linie {
	stroke: var(--c-gold);
	stroke-width: 1;
	opacity: 0.22;
	animation: lg-leuchten 7s var(--ease) infinite;
}

@keyframes lg-leuchten {
	0%, 70%, 100% { opacity: 0.18; }
	35% { opacity: 0.6; }
}

/* Knoten. */
.lg-netz__knoten {
	fill: var(--c-weiss);
	stroke: var(--c-gold);
	stroke-width: 1.5;
	animation: lg-pulsen 7s var(--ease) infinite;
	transform-box: fill-box;
	transform-origin: center;
}

.lg-netz__knoten--0 {
	fill: var(--c-bordeaux);
	stroke: var(--c-bordeaux);
}

@keyframes lg-pulsen {
	0%, 100% { transform: scale(1); }
	40% { transform: scale(1.22); }
}

.lg-netz__kern {
	fill: var(--c-bordeaux);
}

.lg-netz__kern-ring {
	fill: none;
	stroke: var(--c-gold);
	stroke-width: 1.5;
	opacity: 0.7;
	transform-box: fill-box;
	transform-origin: center;
	animation: lg-welle 4.5s var(--ease) infinite;
}

@keyframes lg-welle {
	0% { transform: scale(0.85); opacity: 0.8; }
	70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* --- Symbole der Philosophie --- */

.lg-grafik--symbol {
	height: 9rem;
	flex: none;
	background: var(--c-creme-tief);
	border-bottom: 1px solid var(--c-linie);
}

.lg-sym {
	width: auto;
	height: 88%;
	overflow: visible;
}

/* Die Linien zeichnen sich beim Erscheinen einmal selbst. */
.lg-sym__zug {
	fill: none;
	stroke: var(--c-bordeaux);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 260;
	stroke-dashoffset: 260;
	animation: lg-zeichnen 1.6s var(--ease) forwards;
}

@keyframes lg-zeichnen {
	to { stroke-dashoffset: 0; }
}

/* Stufen: kräftiger und in Gold, damit sie die Linie tragen statt sie zu
   überlagern. */
.lg-sym__saeule {
	fill: none;
	stroke: var(--c-gold);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: lg-zeichnen 1.2s var(--ease) forwards;
}

.lg-sym__punkt {
	fill: var(--c-gold);
	opacity: 0;
	animation: lg-erscheinen 0.7s var(--ease) 1.1s forwards;
}

@keyframes lg-erscheinen {
	to { opacity: 1; }
}

.lg-sym__welle {
	fill: none;
	stroke: var(--c-gold);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
	animation: lg-welle 4s var(--ease) 1.6s infinite;
}

/* Karte im Kartenrahmen ohne Bild: das Symbol steht mittig. */
.lg-karte .lg-grafik--symbol {
	flex: none;
	border-radius: 0;
}

/* ==========================================================================
   19  Kartenansicht
   --------------------------------------------------------------------------
   Die Karte lädt Daten von einem fremden Server. Nach DSGVO darf das erst
   nach Einwilligung geschehen – deshalb steht ein Hinweisfeld davor.
   ========================================================================== */

.lg-kartenansicht {
	position: relative;
	height: var(--karte-hoehe, 22rem);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	overflow: hidden;
	background: var(--c-creme-tief);
}

.lg-kartenansicht__gate {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--sp-eng);
	height: 100%;
	padding: 1.5rem;
	text-align: center;
}

.lg-kartenansicht__gate p {
	max-width: 40ch;
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-kartenansicht iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.lg-orte {
	list-style: none;
	padding: 0;
	margin-top: var(--sp-eng);
	display: grid;
	gap: 0.5rem;
	font-size: var(--fs-klein);
}

@media (min-width: 40rem) {
	.lg-orte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lg-orte li {
	padding-left: 1.1rem;
	position: relative;
	color: var(--c-tinte-weich);
}

.lg-orte li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--c-gold);
}

.lg-orte span {
	color: var(--c-tinte-weich);
	opacity: 0.75;
}

/* ==========================================================================
   20  Bewegung und Druck
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.lg-kopfbereich,
	.lg-fuss,
	.lg-mobilnav {
		display: none;
	}
}

/* ==========================================================================
   21  Gezeichnete Regionenkarte
   --------------------------------------------------------------------------
   Ersetzt die eingebettete Fremdkarte. Diese erschien erst nach
   Einwilligung, sah auf jeder Website gleich aus und passte farblich zu
   nichts. Die Zeichnung erscheint sofort und überträgt keine Daten.
   ========================================================================== */

.lg-regionenkarte {
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	padding: clamp(1rem, 2vw, 1.75rem);
	overflow: hidden;
}

.lg-abschnitt--weiss .lg-regionenkarte {
	background: var(--c-creme);
}

.lg-regionenkarte svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.lg-karte-gitter {
	stroke: var(--c-linie);
	stroke-width: 1;
	opacity: 0.5;
}

/* Verbindungen vom Sitz zu den Orten – dieselbe Bildsprache wie die
   Netzwerkgrafik. */
.lg-karte-linie {
	stroke: var(--c-gold);
	stroke-width: 1.5;
	opacity: 0.35;
	animation: lg-leuchten 7s var(--ease) infinite;
}

.lg-karte-ort {
	fill: var(--c-weiss);
	stroke: var(--c-gold);
	stroke-width: 2;
}

.lg-karte-ort--1 {
	fill: var(--c-bordeaux);
	stroke: var(--c-bordeaux);
}

.lg-karte-ort--2 {
	fill: var(--c-bordeaux);
	stroke: var(--c-gold);
}

.lg-karte-ort--3 {
	fill: var(--c-creme-tief);
	stroke: var(--c-linie-stark);
	stroke-width: 1.5;
}

/* Pulsierender Ring um den Sitz. */
.lg-karte-welle {
	fill: none;
	stroke: var(--c-bordeaux);
	stroke-width: 1.5;
	transform-box: fill-box;
	transform-origin: center;
	animation: lg-welle 4.5s var(--ease) infinite;
}

.lg-karte-name {
	font-family: var(--wp--preset--font-family--text);
	font-size: 15px;
	font-weight: 500;
	fill: var(--c-tinte);
}

.lg-karte-name--1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: 18px;
	font-weight: 700;
	fill: var(--c-bordeaux);
}

.lg-karte-name--3 {
	font-size: 13px;
	font-weight: 400;
	fill: var(--c-tinte-weich);
}

/* Auf schmalen Anzeigen wird die Karte sonst unleserlich klein. */
@media (max-width: 40rem) {
	.lg-regionenkarte {
		overflow-x: auto;
	}

	.lg-regionenkarte svg {
		min-width: 620px;
	}
}

/* Ein Abschnitt, der allein auf einer Seite steht, füllt die Anzeige.
   Sonst klebt der Fußbereich unmittelbar unter dem Hinweis und die Seite
   wirkt abgebrochen statt angekündigt. */
.lg-abschnitt--voll {
	display: grid;
	align-content: center;
	min-height: min(60vh, 34rem);
}

/* ==========================================================================
   22  Bausteine der gestalteten Unterseiten
   ========================================================================== */

/* --- Eckdaten als große Ziffern --- */
.lg-zahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-weit) var(--gap-karten);
}

@media (min-width: 48rem) {
	.lg-zahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.lg-zahl {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding-left: 1rem;
	border-left: 2px solid var(--c-gold);
}

.lg-zahl__wert {
	font-family: var(--f-display);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	color: var(--c-bordeaux);
	font-variant-numeric: tabular-nums;
}

.lg-zahl__text {
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

/* --- Mitgliedschaften --- */
.lg-preise {
	display: grid;
	gap: var(--gap-karten);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 48rem) {
	.lg-preise { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lg-preis {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	padding: clamp(1.5rem, 3vw, 2rem);
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	text-align: left;
}

.lg-abschnitt--weiss .lg-preis {
	background: var(--c-creme);
}

/* Die empfohlene Stufe steht hervor, ohne größer zu sein – das hielte
   das Raster nicht aus. */
.lg-preis--hervor {
	border-color: var(--c-gold);
	box-shadow: var(--schatten-karte);
}

.lg-preis__marke {
	position: absolute;
	top: -0.75rem;
	left: clamp(1.5rem, 3vw, 2rem);
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-gold-tief);
	background: var(--c-gold-weich);
	border-radius: var(--r-pille);
	padding: 0.25rem 0.75rem;
}

.lg-preis h3 {
	font-size: var(--fs-karte);
}

.lg-preis__betrag {
	font-family: var(--f-display);
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	color: var(--c-bordeaux);
}

.lg-preis__betrag span {
	display: block;
	font-family: var(--f-text);
	font-size: var(--fs-klein);
	font-weight: 400;
	color: var(--c-tinte-weich);
	margin-top: 0.2rem;
}

.lg-preis__text {
	color: var(--c-tinte-weich);
	font-size: var(--fs-klein);
}

.lg-preis ul {
	list-style: none;
	padding: 0;
	margin-top: 0.35rem;
	display: grid;
	gap: 0.5rem;
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-preis li {
	position: relative;
	padding-left: 1.5rem;
}

/* Häkchen als Zeichen statt als Bilddatei. */
.lg-preis li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35em;
	width: 0.45em;
	height: 0.8em;
	border-right: 2px solid var(--c-gold);
	border-bottom: 2px solid var(--c-gold);
	transform: rotate(40deg);
}

.lg-preis .lg-btn {
	margin-top: auto;
	align-self: flex-start;
}

/* --- Herausgestellter Satz --- */
.lg-zitat {
	max-width: 40ch;
	margin-inline: auto;
	padding-left: 0;
	border: 0;
	text-align: center;
}

.lg-zitat p {
	font-family: var(--f-display);
	font-size: var(--fs-h3);
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-bordeaux);
	text-wrap: balance;
}

.lg-zitat p::before { content: "„"; }
.lg-zitat p::after { content: "“"; }

.lg-zitat cite {
	display: block;
	margin-top: var(--sp-eng);
	font-style: normal;
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

/* --- Zeitleiste --- */
.lg-zeitleiste {
	list-style: none;
	padding: 0;
	display: grid;
	gap: var(--sp-weit);
	position: relative;
}

.lg-station {
	display: grid;
	gap: 0.35rem 1.25rem;
	grid-template-columns: 1fr;
	position: relative;
	padding-left: 1.75rem;
	border-left: 1px solid var(--c-linie);
}

@media (min-width: 48rem) {
	.lg-station {
		grid-template-columns: 12rem 1fr;
		align-items: start;
	}
}

/* Der Punkt sitzt auf der Linie. */
.lg-station::before {
	content: "";
	position: absolute;
	left: -6px;
	top: 0.45em;
	width: 11px;
	height: 11px;
	border-radius: 999px;
	background: var(--c-gold);
	border: 2px solid var(--c-weiss);
}

.lg-abschnitt--creme .lg-station::before {
	border-color: var(--c-creme);
}

.lg-station__marke {
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--c-gold-tief);
	padding-top: 0.15em;
}

.lg-station__text h3 {
	font-size: var(--fs-karte);
	margin-bottom: 0.3rem;
}

.lg-station__text p {
	color: var(--c-tinte-weich);
}

/* --- Ablauf eines Tages --- */
.lg-ablauf {
	list-style: none;
	padding: 0;
	display: grid;
	gap: 0;
}

.lg-ablauf li {
	display: grid;
	grid-template-columns: 5rem 1fr;
	gap: 1rem;
	align-items: baseline;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--c-linie);
}

.lg-ablauf li:first-child {
	border-top: 1px solid var(--c-linie);
}

.lg-ablauf__zeit {
	font-family: var(--f-display);
	font-weight: 700;
	color: var(--c-bordeaux);
	font-variant-numeric: tabular-nums;
}

.lg-ablauf__text {
	color: var(--c-tinte-weich);
}

/* --- Emblem in einer Karte --- */
.lg-radkarte {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 14rem;
	flex: none;
	padding: 1.25rem;
	background: var(--c-creme-tief);
	border-bottom: 1px solid var(--c-linie);
}

.lg-radkarte img {
	width: auto;
	height: 100%;
	object-fit: contain;
}

/* --- Zwischenüberschrift im Fließtext --- */
.lg-zwischentitel {
	font-size: var(--fs-karte);
	margin-top: var(--sp-weit);
}

/* ==========================================================================
   23  Formulare der Seiten
   ========================================================================== */

.lg-formular__felder {
	display: grid;
	gap: 1rem;
	margin-top: var(--sp-weit);
}

.lg-formular__reihe {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
	.lg-formular__reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lg-field em {
	color: var(--c-gold-akzent);
	font-style: normal;
}

/* Honigtopf gegen automatisch ausgefüllte Formulare: für Menschen
   unsichtbar, für Skripte verlockend. */
.lg-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Kontaktseite --- */
.lg-kontakt {
	display: grid;
	gap: var(--gap-split);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62rem) {
	.lg-kontakt { grid-template-columns: 1.4fr 1fr; }
}

.lg-kontaktbox {
	background: var(--c-weiss);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

.lg-kontaktbox + .lg-kontaktbox {
	margin-top: var(--gap-karten);
}

.lg-kontaktbox h3 {
	font-size: var(--fs-karte);
	margin-bottom: var(--sp-eng);
}

.lg-kontaktbox p {
	color: var(--c-tinte-weich);
	font-size: var(--fs-klein);
	margin-bottom: var(--sp-eng);
}

.lg-kontaktdaten {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	font-size: var(--fs-klein);
}

.lg-kontaktdaten dt {
	font-size: var(--fs-kicker);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-gold-tief);
	margin-bottom: 0.15rem;
}

.lg-kontaktdaten dd {
	margin: 0;
	color: var(--c-tinte);
	line-height: 1.6;
}

.lg-kontaktdaten a {
	color: var(--c-bordeaux);
	border-bottom: 1px solid var(--c-gold);
}

/* --- Newsletter --- */
.lg-newsletter {
	display: grid;
	gap: var(--sp-weit);
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
	padding: clamp(1.75rem, 4vw, 3rem);
	background: var(--c-creme);
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
}

.lg-abschnitt--creme .lg-newsletter {
	background: var(--c-weiss);
}

.lg-newsletter__text {
	display: grid;
	gap: var(--sp-eng);
	justify-items: center;
}

.lg-newsletter__text .lg-text {
	max-width: 46ch;
}

.lg-newsletter__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.lg-newsletter__form .lg-field {
	flex: 1 1 18rem;
	max-width: 24rem;
}

.lg-newsletter .lg-hinweis {
	font-size: var(--fs-kicker);
}

/* ==========================================================================
   24  Interaktive Karte
   ========================================================================== */

.lg-karte-flaeche {
	border: 1px solid var(--c-linie);
	border-radius: var(--r-karte);
	overflow: hidden;
	background: var(--c-creme-tief);
}

.lg-karte-flaeche__leinwand {
	height: clamp(22rem, 46vw, 30rem);
	width: 100%;
	background: var(--c-creme-tief);
}

/* Die Kartenoberfläche bringt eigene Schriftgrößen mit; hier zurück auf
   unsere Werte. */
.lg-karte-flaeche .leaflet-container {
	font-family: var(--f-text);
	font-size: var(--fs-klein);
	background: var(--c-creme-tief);
}

.lg-karte-flaeche .leaflet-control-attribution {
	font-size: 11px;
	background: rgb(255 255 255 / 0.85);
}

.lg-karte-flaeche .leaflet-popup-content-wrapper {
	border-radius: var(--r-klein);
	font-family: var(--f-text);
}

.lg-karte-flaeche .leaflet-popup-content strong {
	font-family: var(--f-display);
	color: var(--c-bordeaux);
}

/* Markierungen als HTML statt als Bilddatei – so tragen sie die
   Markenfarben. */
.lg-marke {
	display: flex !important;
	align-items: center;
	gap: 0.4rem;
	width: auto !important;
	height: auto !important;
	margin: -7px 0 0 -7px !important;
	white-space: nowrap;
}

.lg-marke__punkt {
	width: 14px;
	height: 14px;
	border-radius: 999px;
	border: 2px solid var(--c-weiss);
	background: var(--c-gold);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
	flex: none;
}

.lg-marke--sitz .lg-marke__punkt {
	width: 20px;
	height: 20px;
	background: var(--c-bordeaux);
	margin-left: -3px;
}

.lg-marke--gebiet .lg-marke__punkt {
	width: 10px;
	height: 10px;
	background: var(--c-linie-stark);
}

.lg-marke__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--c-tinte);
	text-shadow:
		0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff;
}

.lg-marke--sitz .lg-marke__name {
	font-family: var(--f-display);
	font-size: 15px;
	font-weight: 800;
	color: var(--c-bordeaux);
}

.lg-marke--gebiet .lg-marke__name {
	font-weight: 400;
	color: var(--c-tinte-weich);
}

.lg-kartenlegende {
	list-style: none;
	margin: 0;
	padding: 0.85rem clamp(1rem, 2vw, 1.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	border-top: 1px solid var(--c-linie);
	background: var(--c-weiss);
	font-size: var(--fs-klein);
	color: var(--c-tinte-weich);
}

.lg-kartenlegende li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lg-kartenlegende__punkt {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	flex: none;
}

.lg-kartenlegende__punkt--sitz { background: var(--c-bordeaux); }
.lg-kartenlegende__punkt--termin { background: var(--c-gold); }
.lg-kartenlegende__punkt--gebiet { background: var(--c-linie-stark); }

/* --- Suche im Kopfbereich ---
   Das Feld klappt beim Fokus auf. Ein Lupensymbol allein führte auf eine
   leere Ergebnisseite – dort stand kein Eingabefeld. */
.lg-suche {
	display: flex;
	align-items: center;
	position: relative;
}

/* Höhere Gewichtung als `input[type="search"]` weiter oben – sonst gilt
   dort width:100% und das Feld steht dauerhaft offen. Es schob die
   Navigation über die Bildmarke. */
.lg-suche .lg-suche__feld {
	width: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font-size: var(--fs-klein);
	opacity: 0;
	transition: width var(--dauer) var(--ease), opacity var(--dauer) var(--ease),
		padding var(--dauer) var(--ease);
}

.lg-suche:focus-within .lg-suche__feld,
.lg-suche .lg-suche__feld:not(:placeholder-shown) {
	width: 11rem;
	opacity: 1;
	padding: 0.4rem 0.75rem;
	border: 1px solid var(--c-linie);
	border-radius: var(--r-pille);
	background: var(--c-creme);
}

.lg-suche .lg-suche__feld:focus {
	outline: none;
	border-color: var(--c-bordeaux);
}

/* Zwischen 62rem und 80rem konkurrieren Bildmarke, sechs Menüpunkte und
   zwei Schaltflächen um dieselbe Zeile. Dort rückt alles enger zusammen
   und der Zweitknopf entfällt – er ist im Menü ohnehin erreichbar. */
@media (min-width: 62rem) and (max-width: 88rem) {
	.lg-kopfbereich__innen { gap: 1rem; }
	.lg-nav__liste { gap: 0.85rem; font-size: var(--fs-kicker); }
	.lg-kopf-aktionen { gap: 0.5rem; }
	.lg-kopf-aktionen .lg-btn--linie { display: none; }
	.lg-kopf-trenner { display: none; }
	.lg-logo img { height: 2rem; }
}