/* leXpro Media — Komponenten & 2026-Anpassungen.
   Handgeschrieben (im Gegensatz zu tokens.css, das aus dem Design System generiert wird).
   Lädt NACH tokens.css und überschreibt gezielt einzelne Tokens.

   Richtung „Performance-Cockpit": Gold liegt auf Ziffern und Hairlines, nicht auf Flächen. */

/* ==========================================================================
   1 · Dokumentierte Abweichungen vom Design System
   Jede Abweichung hat einen Grund. Marke (Gold, Schriften, Haltung) bleibt unangetastet.
   ========================================================================== */

:root {
	/* Warm getöntes Schwarz. Das Design System nennt sich „warm near-black", seine Werte
	   (#050505, #111111) sind aber perfekt neutralgrau — und neutrales Schwarz lässt Gold
	   wie flaches Gelb aussehen. Gold braucht warmes Umfeld, um wie Metall zu lesen. */
	--ink-1000: #0b0a09;
	--ink-950:  #0e0d0b;
	--ink-900:  #12100e;
	--ink-850:  #161310;
	--ink-800:  #1b1815;
	--ink-700:  #262320;
	--ink-600:  #33302b;
	--ink-500:  #4d4a44;
	--ink-400:  #6b6760;
	--ink-300:  #939089;
	--ink-200:  #b8b4ab;
	--ink-100:  #d9d5cc;
	--ink-50:   #efece4;

	/* Reines Weiß auf Near-Black erzeugt Halation (die Kanten „glühen"). */
	--text-primary: #f2efe9;

	/* --ink-400 (#6b6b6b) erreicht auf Schwarz nur ~3,4:1 und fällt bei WCAG AA durch.
	   --ink-300 kommt auf ~6,2:1. --ink-400 bleibt nur für rein dekorative Elemente. */
	--text-muted: var(--ink-300);

	/* Scharfe Geometrie statt weicher Karten — 2026-Standard, und das Design System
	   beschreibt sich selbst schon als „squared-off and geometric". */
	--radius-card: 4px;

	/* Gold-Rampe: flaches Gelb liest nie als Metall. Metall braucht nicht-monotone
	   Helligkeit, eine Farbtonverschiebung (Schatten ins Bräunliche, Glanzlicht ins
	   Fast-Weiße) und ein schmales Specular. Hex zuerst als Fallback, dann OKLCH. */
	--au-shadow: #7d6320;  --au-shadow: oklch(45% 0.075 62);
	--au-deep:   #9c7c1e;  --au-deep:   oklch(56% 0.105 72);
	--au-mid:    #d4af37;  --au-mid:    oklch(75% 0.132 88);
	--au-light:  #f4e3a1;  --au-light:  oklch(88% 0.100 92);
	--au-spec:   #fdf8e3;  --au-spec:   oklch(97% 0.045 96);

	/* Specular liegt bei 41 % und ist nur ~4 % breit — ein symmetrischer, breiter
	   Verlauf sieht sofort künstlich aus. */
	--grad-gold: linear-gradient(105deg,
		var(--au-shadow) 0%,
		var(--au-deep)  14%,
		var(--au-mid)   30%,
		var(--au-light) 38%,
		var(--au-spec)  41%,
		var(--au-light) 45%,
		var(--au-mid)   60%,
		var(--au-shadow) 74%,
		var(--au-mid)   88%,
		var(--au-light) 100%);

	/* Flächen-Rampe für alles, worauf TEXT steht.
	   Gleiche Struktur wie oben — Schatten, Tiefe, Mitte, Licht, schmales Specular, zurück —
	   nur der dunkelste Stopp ist von #7d6320 auf #9c7c1e angehoben. Dort erreichte die
	   Display-Rampe mit fast schwarzer Schrift nur 3,5:1 und fiel bei WCAG AA durch; so sind
	   es 5,0:1 an der dunkelsten Stelle, bei praktisch unverändertem Metall-Eindruck. */
	--grad-gold-surface: linear-gradient(105deg,
		#9c7c1e  0%,
		#b8912e 14%,
		#d4af37 30%,
		#ecd582 38%,
		#f7ecc0 41%,
		#ecd582 45%,
		#d4af37 60%,
		#9c7c1e 74%,
		#d4af37 88%,
		#ecd582 100%);

	/* Hairlines übernehmen die Aufgabe der Schatten. */
	--hairline-gold: 1px solid rgb(212 175 55 / 0.16);
	--hairline-ink:  1px solid var(--ink-700);

	/* Header-Höhe: 76px Innenhöhe plus 1px Hairline. Wird für `scroll-padding-top` genutzt,
	   damit ein Ankerziel nicht unter dem Sticky-Header verschwindet (WCAG 2.4.11). */
	/* Am gerenderten Header gemessen, nicht geschätzt: 85 px Lockup plus 2×10 px Innenabstand.
	   Der Wert steuert `scroll-padding-top`, die Hero-Mindesthöhe und den Versatz der
	   mitlaufenden Überschriften. Mit den vorherigen 77 px landete jeder Sprungmarken-Klick
	   28 px zu hoch — das Ziel lag also teilweise hinter dem Header (WCAG 2.4.11). */
	--lx-header-h: 105px;

	/* Layout: außen weiter und luftiger als die Design-System-Vorgabe, Textmaß eng. */
	--shell-max: 1520px;
	--measure: 68ch;
	/* Der Abstand skaliert über die Viewport-BREITE, nicht die Höhe. Mit `vh` bliebe er auf
	   einem flachen Notebook-Display klein, obwohl dort horizontal viel Platz ist — und genau
	   dieses Missverhältnis lässt eine Seite gedrängt wirken. Gemessene Referenz: um.marketing
	   fährt 224–279 px, wir lagen bei maximal 176 px. */
	--section-y: clamp(4.5rem, 15vw, 14rem);
}

/* ==========================================================================
   2 · Grain — gegen Banding auf Near-Black, und als Anti-AI-Textur
   Statisches feTurbulence als Data-URI: einmal gerastert, dann gekachelt.
   Niemals als Live-filter und niemals animiert — das würde jeden Frame neu rechnen.
   ========================================================================== */

.lx-grain { position: relative; }

.lx-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Blends müssen eingegrenzt werden, sonst rastert der Browser den ganzen Hintergrund neu. */
.lx-grain { isolation: isolate; }

/* ==========================================================================
   2b · Weiches Scrollen für Anker
   `scroll-behavior` wirkt NUR auf Anker-Klicks und programmatisches Scrollen, nie auf
   Mausrad oder Touch. Das ist die unkritische Variante — die kritisierte Form ist das
   Abfangen der Eingabe per JavaScript (Lenis), das hier bewusst aus bleibt.
   ========================================================================== */

html:not([data-motion="reduced"]) { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html:not([data-motion="full"]) { scroll-behavior: auto; }
}

/* ==========================================================================
   3 · Fokus — das Design System definiert für Button, Card und Links KEINEN Fokus-Stil.
   Tastaturnutzer sähen sonst nicht, wo sie stehen.
   ========================================================================== */

:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/* ==========================================================================
   4 · Typografie
   Genau vier Größen: Display, Sektion, Body, Mikrolabel. Der Sprung ist der Effekt.
   ========================================================================== */

.lx-display {
	font-family: var(--font-display);
	font-weight: var(--fw-ultra);
	font-size: clamp(2.75rem, 8vw, 7rem);
	line-height: 0.90;          /* siehe BUILD-NOTES: Umlaut-Freiheit gemessen */
	letter-spacing: -0.03em;
	text-wrap: balance;
	color: var(--text-primary);
}

.lx-section-title {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.875rem, 4vw, 3.25rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--text-primary);
}

.lx-body { font-size: var(--fs-body); line-height: var(--lh-body); max-width: var(--measure); }
.lx-lead { font-weight: var(--fw-light); font-size: var(--fs-lead); line-height: var(--lh-snug); max-width: 62ch; }

/* Mono-Mikrolabel — Sektionsnummern und Messwert-Beschriftungen. Systemstack, keine Extra-Schrift. */
.lx-label {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* Eyebrow mit 22×2px Gold-Tick. */
.lx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: var(--fs-overline);
	letter-spacing: var(--ls-overline);
	text-transform: uppercase;
	line-height: 1;
	color: var(--gold-400);
}

.lx-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: currentColor;
	flex-shrink: 0;
}

/* Gold-Metalltext. Höchstens ZWEI pro Seite — an jeder H2 sieht Gold billig aus. */
.lx-gold-text {
	color: var(--au-mid);                 /* Fallback zuerst, siehe unten */
	background-image: var(--grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Ohne diesen Override ist Gold-Text im Windows-Kontrastmodus UNSICHTBAR:
   forced-colors verwirft Hintergrund-Gradienten, die transparente Textfüllung bleibt. */
@media (forced-colors: active) {
	.lx-gold-text {
		background: none;
		-webkit-text-fill-color: revert;
		color: CanvasText;
	}
}

/* Markierter Gold-Text wäre sonst nicht lesbar. */
.lx-gold-text::selection { -webkit-text-fill-color: var(--ink-1000); background: var(--gold-300); }

@media print {
	.lx-gold-text { background: none; -webkit-text-fill-color: #8a6a1f; color: #8a6a1f; }
}

/* ==========================================================================
   5 · Buttons
   ========================================================================== */

/* Zwei Anwendungsformen, ein Aussehen:
   `.lx-btn` für handgeschriebenes Markup, und Elementors eigenes `.elementor-button`, weil
   `_css_classes` nur auf dem Widget-Wrapper landet und nie auf dem <a> selbst. Die Variante
   wird per Wrapper-Klasse gesetzt (`lx-btn-primary`, `lx-btn-secondary`, `lx-btn-lg`), damit
   der Button im Editor bearbeitbar bleibt und trotzdem markentreu aussieht. */

.lx-btn,
.elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-text);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: transform var(--dur-fast) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out),
	            background-color var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out);
}

.lx-btn--sm, .lx-btn-sm .elementor-button { height: var(--control-h-sm); padding: 0 var(--space-4); font-size: var(--fs-body-sm); }
.lx-btn--md, .elementor-button          { height: var(--control-h-md); padding: 0 22px; font-size: 0.9375rem; }
.lx-btn--lg, .lx-btn-lg .elementor-button { height: var(--control-h-lg); padding: 0 30px; font-size: var(--fs-body); }

/* Doppelte Klasse (`.lx-btn.lx-btn--primary`) statt einfacher — Absicht, kein Versehen:
   das Elementor-Kit setzt `.elementor-kit-6 a { color: #D4AF37 }` mit Spezifität 0-2-0 und
   schlägt damit jede Ein-Klassen-Regel. Die Buttonschrift wäre gold auf gold.
   Flächen-Rampe statt Display-Rampe, weil hier Text drauf steht. */
.lx-btn.lx-btn--primary,
.lx-btn-primary .elementor-button {
	background-image: var(--grad-gold-surface);
	color: var(--text-on-gold);
	box-shadow: var(--glow-gold-sm);
}
.lx-btn.lx-btn--primary:hover,
.lx-btn-primary .elementor-button:hover { transform: translateY(-1px); box-shadow: var(--glow-gold-md); }

.lx-btn.lx-btn--secondary,
.lx-btn-secondary .elementor-button { background: transparent; color: var(--gold-400); border-color: var(--gold-400); }
.lx-btn.lx-btn--secondary:hover,
.lx-btn-secondary .elementor-button:hover {
	transform: translateY(-1px);
	background: rgb(212 175 55 / 0.10);
	box-shadow: var(--glow-gold-sm);
}

.lx-btn.lx-btn--ghost,
.lx-btn-ghost .elementor-button { background: transparent; color: var(--text-primary); }
.lx-btn.lx-btn--ghost:hover,
.lx-btn-ghost .elementor-button:hover { transform: translateY(-1px); background: rgb(255 255 255 / 0.06); }

.lx-btn:disabled, .lx-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Hinweis: `background-image` statt des `background`-Shorthands ist Absicht. Ein Shorthand mit
   var() wird bei ungueltiger Substitution komplett verworfen und setzt ALLE Longhands auf ihren
   Initialwert zurueck — die Longhand-Form kann das nicht passieren. */

/* Elementors Navigation trägt eigene Klassen. */
.elementor-nav-menu a {
	font-family: var(--font-text);
	font-weight: 500;
	font-size: var(--fs-body-sm);
	color: var(--text-secondary);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}
.elementor-nav-menu a:hover,
.elementor-nav-menu .current-menu-item > a { color: var(--gold-400); }

/* ==========================================================================
   6 · Flächen — Tiefe kommt aus Hairlines, nicht aus Schatten
   ========================================================================== */

.lx-card {
	position: relative;
	overflow: hidden;
	background: var(--bg-raised);
	border: var(--hairline-ink);
	border-radius: var(--radius-card);
	padding: var(--space-6);
	box-shadow: var(--inset-hairline);
	transition: transform var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out),
	            box-shadow var(--dur-base) var(--ease-out);
}

/* 2px Gold-Gradient-Oberkante. */
.lx-card--accent::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background-image: var(--grad-gold);
}

.lx-card--interactive:hover,
.lx-card--interactive:focus-within {
	transform: translateY(-3px);
	border-color: rgb(212 175 55 / 0.45);
	box-shadow: var(--inset-hairline), var(--glow-gold-sm);
}

/* Gold-Icon-Well, 52px. */
.lx-icon-well {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--radius-md);
	background: rgb(212 175 55 / 0.10);
	border: 1px solid rgb(212 175 55 / 0.30);
	color: var(--gold-400);
}

.lx-icon-well > svg { width: 24px; height: 24px; stroke-width: 2; }

/* ==========================================================================
   7 · Kennzahlen — der Kern der Richtung „Performance-Cockpit"
   Immer als statischer Text ausliefern, nie als JS-Count-up: zwei DACH-Marktführer
   liefern ihren Crawlern und LLMs literale „0" aus.
   ========================================================================== */

.lx-stat { display: flex; flex-direction: column; gap: var(--space-2); }

.lx-stat__value {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	/* Fallback für Browser ohne Container-Queries; die eigentliche Größe steht unten. */
	font-size: clamp(2.5rem, 5.5vw, 5.75rem);
	line-height: 0.90;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;   /* verhindert Layout-Zittern */
	color: var(--au-mid);
	background-image: var(--grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.lx-stat__unit { font-size: 0.45em; margin-left: 0.08em; }

/* Die Kennzahl muss sich an ihrer SPALTE orientieren, nicht am Fenster.
   Mit `5.5vw` war „+45.475 %" bei 1440 px Fensterbreite 358 px breit und lief damit 65 px
   über seine 293 px breite Spalte in die Nachbarzahl hinein — sichtbar als „+45.4751.870".
   `cqw` misst den Container, also die Spalte: die Zahl kann gar nicht mehr überlaufen,
   egal wie viele Stellen sie hat. */
@supports (container-type: inline-size) {
	.lx-stat { container-type: inline-size; }
	.lx-stat__value { font-size: clamp(2.25rem, 20cqw, 5.75rem); }
}

.lx-stat__label {
	font-size: var(--fs-body-sm);
	line-height: var(--lh-snug);
	color: var(--text-secondary);
	max-width: 26ch;
}

.lx-stat__note { font-family: var(--font-mono); font-size: var(--fs-caption); color: var(--text-muted); }

/* --- Auszeichnungen als lesbarer Text ---------------------------------------
   Die fünf Preise standen bisher ausschließlich im Alt-Attribut des Pokalfotos. Für eine
   Agentur, die Auffindbarkeit in KI-Antworten verkauft, ist das zu wenig: eine Fotografie ist
   für Crawler und Sprachausgaben stumm. Der Fließtext daneben bleibt unverändert — die Liste
   ist additiv und belegt, was „mehrfacher Preisträger" konkret bedeutet. */

.lx-awards {
	list-style: none;
	margin: var(--space-6) 0 0;
	padding: 0;
	max-width: 46ch;
	border-top: var(--hairline-gold);
}

.lx-awards li {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	gap: var(--space-4);
	align-items: baseline;
	padding: var(--space-3) 0;
	border-bottom: var(--hairline-gold);
	font-size: var(--fs-body-sm);
	color: var(--text-secondary);
}

.lx-awards__year {
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	letter-spacing: 0.06em;
	color: var(--gold-400);
	font-variant-numeric: tabular-nums;
}

.lx-awards em { display: block; margin-top: 2px; font-style: normal; font-size: var(--fs-caption); color: var(--text-muted); }

@media (forced-colors: active) {
	.lx-stat__value { background: none; -webkit-text-fill-color: revert; color: CanvasText; }
}

/* ==========================================================================
   8 · Leistungs-Zeilen — hairline-getrennte Liste statt Karten-Grid.
   Icon-Karten-Reihen sind laut Marktrecherche das abgestandenste Agentur-Muster.
   ========================================================================== */

.lx-rows { border-top: var(--hairline-gold); }

.lx-row {
	position: relative;      /* Bezug für den flächigen Link und den Gold-Wisch */
	isolation: isolate;
	display: grid;
	/* Vier echte Spalten: Ziffer · Leistung · Beschreibung · Pfeil. Die Beschreibung steht
	   neben dem Titel statt darunter — das liest sich als Register, nicht als Fließtext, und
	   passt zur Datenhaltung der übrigen Seite. */
	grid-template-columns: 4.5rem minmax(0, 0.9fr) minmax(0, 1.1fr) 3rem;
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-6) var(--space-4);
	margin-inline: calc(var(--space-4) * -1);
	border-bottom: var(--hairline-gold);
}

/* Titel und Beschreibung liegen im Markup in einem Zwischencontainer. `display: contents`
   hebt dessen Box auf, sodass beide eigene Rasterspalten bekommen — ohne das Markup zu ändern. */
.lx-row > .e-con { display: contents; }

/* Gold-Wisch, der von links einfährt, statt eines flach aufblitzenden Farbfelds. */
.lx-row::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(212 175 55 / 0.11), rgb(212 175 55 / 0.03) 55%, transparent);
	transform: scaleX(0);
	transform-origin: 0 50%;
	transition: transform var(--dur-base) var(--ease-out);
}

.lx-row:hover::before,
.lx-row:focus-within::before { transform: scaleX(1); }

/* Die Ziffer als Display-Zahl im Gold-Verlauf — dieselbe Sprache wie die Kennzahlen. */
.lx-row__num {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.125rem, 1.6vw, 1.5rem);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--au-mid);
	background-image: var(--grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
	.lx-row__num { background: none; -webkit-text-fill-color: revert; color: CanvasText; }
}

/* Auf das <h3> zielen, nicht auf den Widget-Wrapper: das Kit setzt h3 auf 28 px und
   Vererbung vom Wrapper verliert dagegen. */
.lx-row__title h3 {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.625rem, 3.4vw, 2.75rem);
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	transition: translate var(--dur-base) var(--ease-out);
}

.lx-row:hover .lx-row__title h3 { translate: 6px 0; }

.lx-row__desc p {
	margin: 0;
	max-width: 46ch;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-snug);
	color: var(--text-muted);
	transition: color var(--dur-base) var(--ease-out);
}

.lx-row:hover .lx-row__desc p { color: var(--text-secondary); }

/* Der Pfeil wird zur Schaltfläche und füllt sich beim Hover. */
.lx-row__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgb(212 175 55 / 0.32);
	border-radius: var(--radius-pill);
	color: var(--gold-400);
	text-decoration: none;
	transition: background-color var(--dur-base) var(--ease-out),
	            color var(--dur-base) var(--ease-out),
	            border-color var(--dur-base) var(--ease-out),
	            translate var(--dur-base) var(--ease-out);
}

/* Die ganze Zeile wird klickbar, ohne ein zusätzliches Element: der Pseudo-Bereich des
   vorhandenen Links legt sich über die Zeile. Ein zweiter Link für dasselbe Ziel wäre
   für Screenreader-Nutzer nur doppelte Arbeit. */
.lx-row__arrow::after { content: ""; position: absolute; inset: 0; }

/* Tastatur bekommt dieselbe Rückmeldung wie die Maus — sonst sieht man beim Durchtabben
   nicht, welche Zeile gerade dran ist. */
.lx-row:hover .lx-row__arrow,
.lx-row:focus-within .lx-row__arrow {
	background-image: var(--grad-gold-surface);
	color: var(--text-on-gold);
	border-color: transparent;
	translate: 3px 0;
}

.lx-row:focus-within .lx-row__title h3 { translate: 6px 0; }
.lx-row:focus-within .lx-row__desc p { color: var(--text-secondary); }

.lx-row__arrow:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

@media (max-width: 900px) {
	/* Drei Spalten statt vier: die Beschreibung rutscht unter den Titel, der Pfeil bleibt —
	   ohne ihn verlöre die Zeile ihren flächigen Link. */
	.lx-row {
		grid-template-columns: 2.25rem minmax(0, 1fr) 2.5rem;
		gap: var(--space-2) var(--space-3);
		padding: var(--space-5) var(--space-3);
		margin-inline: calc(var(--space-3) * -1);
		align-items: start;
	}
	/* Beide Plätze ausdrücklich vergeben. Ohne das schiebt die automatische Platzierung den
	   Pfeil in eine dritte Zeile unter die Beschreibung: sie rückt nur vorwärts und findet die
	   freie Zelle rechts oben nicht mehr, sobald die Beschreibung Zeile 2 belegt hat. */
	.lx-row__arrow { grid-column: 3; grid-row: 1; width: 40px; height: 40px; }
	.lx-row__desc  { grid-column: 2 / -1; grid-row: 2; }
	.lx-row__desc p { font-size: var(--fs-caption); max-width: none; }
}

/* ==========================================================================
   9 · Kundenstimmen — mit Attribution. Die Live-Seite gibt alle 14 anonym aus,
   obwohl die Namen im eigenen JSON-LD stehen.
   ========================================================================== */

.lx-quote { display: flex; flex-direction: column; gap: var(--space-5); }

.lx-quote__mark {
	font-family: var(--font-display);
	font-weight: var(--fw-ultra);
	font-size: 72px;
	line-height: 0.6;
	height: 34px;                        /* bewusst beschnitten */
	color: var(--au-mid);
	background-image: var(--grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	user-select: none;
}

/* --- Videostimmen: drei echte Kunden mit Namen und Gesicht -------------------
   `preload="none"` ist hier die ganze Performance-Strategie: bis zum Klick wird nur das
   Standbild geladen, kein einziges Byte Video. Deshalb braucht es auch keine eigene
   Abspiel-Logik — `controls` und `poster` erledigen das nativ, tastaturbedienbar und ohne
   eine Zeile JavaScript.

   Die Untertitel sind fest ins Bild gebrannt (offene Untertitel). Das erfüllt WCAG 1.2.2 und
   macht die Videos auch stumm verständlich — wichtig, weil sie in aller Regel ohne Ton
   angesehen werden. */

.lx-voices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
	max-width: 1040px;
	margin: 0 auto var(--space-8);
}

@media (max-width: 900px) {
	.lx-voices { grid-template-columns: minmax(0, 1fr); max-width: 380px; gap: var(--space-7); }
}

.lx-voice { margin: 0; }

.lx-voice__player {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 9 / 16;
	background: var(--ink-900);
	border: 1px solid rgb(212 175 55 / 0.16);
	border-radius: var(--radius-card);
	object-fit: cover;
}

.lx-voice__cap { margin-top: var(--space-4); }

.lx-voice__cap strong {
	display: block;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

.lx-voice__cap span { display: block; margin-top: 3px; font-size: var(--fs-caption); color: var(--text-muted); }

.lx-quote__text { font-size: 1.0625rem; line-height: var(--lh-snug); color: var(--text-primary); }
.lx-quote__author { font-weight: 600; font-size: var(--fs-body-sm); color: var(--text-primary); margin-top: auto; }
.lx-quote__role { font-size: var(--fs-caption); color: var(--text-muted); }

/* ==========================================================================
   10 · Formularfelder
   ========================================================================== */

.lx-field { display: flex; flex-direction: column; gap: 7px; }

.lx-field__label {
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
}

.lx-field input,
.lx-field textarea,
.lx-field select {
	width: 100%;
	min-height: var(--control-h-md);
	padding: 0 14px;
	background: var(--bg-inset);
	color: var(--text-primary);
	font-family: var(--font-text);
	font-size: 0.9375rem;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}

.lx-field textarea { padding: 12px 14px; min-height: 7rem; resize: vertical; }

.lx-field input:focus,
.lx-field textarea:focus,
.lx-field select:focus {
	outline: none;
	border-color: var(--gold-400);
	box-shadow: var(--glow-gold-sm);
}

.lx-field__hint { font-size: var(--fs-caption); color: var(--text-muted); }
.lx-field--error input, .lx-field--error textarea { border-color: var(--danger); }

/* ==========================================================================
   11 · Marquee — Rand-Maske und Pause-Steuerung.
   WCAG 2.2.2 verlangt für Bewegung über 5 s eine bedienbare Pause.
   ========================================================================== */

.lx-marquee {
	overflow: hidden;
	border-block: var(--hairline-gold);
	padding-block: var(--space-5);
	/* Die Maske ist das Detail, das ein Logoband „gestaltet" statt „abgeschnitten" wirken lässt. */
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.lx-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	width: max-content;
	will-change: transform;
	/* Grenzt den Blend-Modus der Legacy-Logos ein — ohne Isolation würde der Browser den
	   gesamten Hintergrund neu rastern. */
	isolation: isolate;
}

/* 46 statt 34 px: die separate Anker-Reihe darüber ist entfallen — sie zeigte dieselben acht
   Logos, die ohnehin im Band laufen, und war mit 40 px kaum größer. Das Band trägt die Marken
   jetzt allein und darf dafür etwas mehr Raum nehmen. */
.lx-marquee__item img {
	height: 46px;
	width: auto;
	opacity: 0.6;
	transition: opacity var(--dur-base) var(--ease-out);
}

@media (max-width: 767px) { .lx-marquee__item img { height: 38px; } }

.lx-marquee__item:hover img { opacity: 1; }

/* Monochrom auf Off-White ist der größte Hebel zwischen „überladen" und „premium" —
   70 Logos in 70 Markenfarben sind durch Layout nicht zu retten.

   Es gibt zwei Quellsorten, und sie brauchen zwingend unterschiedliche Behandlung:

   --alpha   freigestellte Logos (der 2025er-Satz, 46 Stück): erst entsättigen, dann auf
             Schwarz drücken und invertieren. Ergibt eine Off-White-Silhouette, die
             transparenten Bereiche bleiben transparent.

   --onwhite Logos auf weißem Grund (der Legacy-Satz, 21 Stück, bereits schwarz-weiß):
             hier wäre derselbe Filter fatal — brightness(0) färbt Grund UND Logo schwarz,
             das Invertieren macht daraus einen weißen Block. Stattdessen nur invertieren
             (weiß wird schwarz, das dunkle Logo wird hell) und den nun schwarzen Grund per
             screen-Blend verschwinden lassen. */
.lx-marquee__item--alpha img { filter: grayscale(1) brightness(0) invert(0.94); }

.lx-marquee__item--onwhite img {
	filter: grayscale(1) invert(1);
	mix-blend-mode: screen;
}

.lx-marquee[data-paused] .lx-marquee__track { animation-play-state: paused; }

/* Rechtsbündig und klein: die Schaltfläche ist eine Pflichtbedienung (WCAG 2.2.2), keine
   Handlungsaufforderung. Zwei davon untereinander sollen nicht wie ein Formular wirken.

   Sie liegt bewusst als GESCHWISTER des Marquees im DOM, nicht darin — `.lx-marquee` trägt
   eine Randmaske, und die hatte den Text am linken Rand halb ausgeblendet („…ewegung
   pausieren"). Siehe lexpro-motion.js. */
.lx-marquee__pause {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	width: fit-content;
	margin: var(--space-3) clamp(1.25rem, 4vw, 4rem) 0 auto;
	background: none;
	border: var(--hairline-ink);
	border-radius: var(--radius-sm);
	padding: 5px 10px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	letter-spacing: 0.04em;
	cursor: pointer;
}

.lx-marquee__pause:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.lx-marquee__pause:hover { color: var(--gold-400); border-color: var(--gold-400); }

/* ==========================================================================
   12 · Header
   Dauerhaft dunkel-transluzent mit Blur, wie im Design-System-Mock. Kein scroll-abhängiger
   Wechsel: das wäre eine zweite Zustandsmaschine für minimalen Gewinn.
   ========================================================================== */

/* Sticky gehört an den <header>-Wrapper, NICHT an den Elementor-Container darin.
   Ein klebendes Element bewegt sich nur innerhalb seines Elternelements — und das war exakt so
   hoch wie der Header selbst (105 px). Es gab damit keinen Weg zum Kleben: gemessen stand der
   Header bei scrollY 500 auf −500, scrollte also einfach mit. Der Wrapper dagegen sitzt direkt
   im <body>, der die ganze Seite hoch ist. */
header:has(> .lx-header) {
	position: sticky;
	top: 0;
	z-index: 50;
}

.lx-header {
	background: rgb(11 10 9 / 0.72);
	/* backdrop-filter ist nicht billig, aber ein 76px-Streifen ist kein Vollbild-Element.
	   Nicht mit mix-blend-mode kombinieren — Chromium verliert dann den Blur. */
	backdrop-filter: blur(14px);
	border-bottom: var(--hairline-ink);
}

.lx-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	min-height: 76px;
	/* Ohne dies bricht die Zeile, sobald Lockup und CTA-Gruppe zusammen breiter werden als die
	   Hülle — auf 375 px stand der Hamburger dann 85 px unter dem Logo und der Header war
	   187 px hoch. Umbrechen ist für einen Header nie die richtige Antwort; stattdessen fällt
	   unten der Button weg. */
	flex-wrap: nowrap;
}

/* Elementor gibt jedem Container 10 px Innenabstand. Im Header schob das Logo damit 10 px
   nach rechts und den Hamburger 10 px nach links — beide standen neben der Fluchtlinie, an
   der die ganze Seite darunter ausgerichtet ist (Hero-H1 bei 68 px, Logo bei 78 px).
   Nur der waagerechte Abstand fällt weg; der senkrechte trägt die Header-Höhe. */
.lx-lockup, .lx-header__cta { padding-inline: 0; }

/* Logo-Lockup: Bildmarke plus in CSS gesetzte Wortmarke — eine Lockup-Datei existiert nicht. */
.lx-lockup { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.lx-lockup img { height: 38px; width: auto; }

/* Bildmarke und Wortmarke führen beide zur Startseite. Zwei getrennte Links statt eines
   umschließenden: der Elementor-Container lässt sich nicht in einen Anker verwandeln, und
   zwei Ziele nebeneinander sind für Tastatur und Screenreader unproblematisch, solange nur
   einer davon einen Namen trägt — das Bild hat seinen Alt-Text, die Wortmarke ihr aria-label. */
.lx-lockup a { display: inline-flex; align-items: center; text-decoration: none; border-radius: var(--radius-xs); }
.lx-lockup a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
.lx-wordmark-link { color: inherit; }

.lx-wordmark {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--text-primary);
}

/* Nur das X trägt den Gold-Verlauf. */
.lx-wordmark b {
	font-weight: inherit;
	color: var(--au-mid);
	background-image: var(--grad-gold);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
	.lx-wordmark b { background: none; -webkit-text-fill-color: revert; color: CanvasText; }
}

/* --- Hamburger ---------------------------------------------------------- */

.lx-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;            /* volle Touch-Zielgroesse, auch wenn das Icon kleiner ist */
	flex-shrink: 0;
	padding: 0;
	background: none;
	border: 1px solid var(--ink-700);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.lx-burger:hover { border-color: var(--gold-400); color: var(--gold-400); }

.lx-burger__box { position: relative; display: block; width: 20px; height: 14px; }

.lx-burger__box span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.lx-burger__box span:nth-child(1) { top: 0; }
.lx-burger__box span:nth-child(2) { top: 6px; }
.lx-burger__box span:nth-child(3) { top: 12px; }

/* Offen: zum Kreuz zusammenfalten. */
.lx-burger[aria-expanded="true"] .lx-burger__box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.lx-burger[aria-expanded="true"] .lx-burger__box span:nth-child(2) { opacity: 0; }
.lx-burger[aria-expanded="true"] .lx-burger__box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* --- Panel von rechts ---------------------------------------------------
   Als natives <dialog> mit showModal(): Fokusfalle, Escape und das Inertsetzen des
   Hintergrunds kommen vom Browser statt aus fehleranfälligem eigenem JavaScript. */

.lx-panel {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(420px, 100vw);
	max-width: none;
	max-height: none;
	height: 100dvh;
	margin: 0;
	padding: 0;
	border: none;
	border-left: var(--hairline-gold);
	background: var(--ink-950);
	color: var(--text-secondary);
	overflow-y: auto;
	transform: translateX(100%);
	/* allow-discrete laesst display/overlay mitanimieren, sonst springt das Panel beim
	   Schliessen sofort weg. Ohne Unterstuetzung erscheint es einfach ohne Animation. */
	transition:
		transform var(--dur-slow) var(--ease-emphasis),
		overlay var(--dur-slow) allow-discrete,
		display var(--dur-slow) allow-discrete;
}

.lx-panel[open] { transform: translateX(0); }

@starting-style {
	.lx-panel[open] { transform: translateX(100%); }
}

.lx-panel::backdrop {
	background: rgb(5 4 3 / 0.6);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-out), overlay var(--dur-slow) allow-discrete, display var(--dur-slow) allow-discrete;
}
.lx-panel[open]::backdrop { opacity: 1; }
@starting-style { .lx-panel[open]::backdrop { opacity: 0; } }

/* Textur wie im Rest der Seite — sonst wirkt die grosse Flaeche flach. */
.lx-panel__inner {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	min-height: 100%;
	padding: var(--space-5) var(--space-6) var(--space-7);
}

.lx-panel__inner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Goldkante, die beim Oeffnen von oben nach unten laeuft. */
.lx-panel__inner::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: var(--grad-gold);
	transform-origin: top;
}

.lx-panel__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	background: none;
	border: 1px solid var(--ink-700);
	border-radius: var(--radius-sm);
	color: var(--text-primary);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
	            transform var(--dur-base) var(--ease-out);
}
.lx-panel__close:hover { border-color: var(--gold-400); color: var(--gold-400); transform: rotate(90deg); }

.lx-panel__nav ul { list-style: none; margin: 0; padding: 0; display: grid; }

.lx-panel__nav a {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	border-bottom: var(--hairline-gold);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.5rem, 5vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--text-primary);
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out), padding-left var(--dur-base) var(--ease-out);
}

/* Goldlinie wischt beim Hover von links ein — statt nur die Farbe zu wechseln. */
.lx-panel__nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 1px;
	width: 100%;
	background: var(--grad-gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur-slow) var(--ease-emphasis);
}

.lx-panel__nav a:hover,
.lx-panel__nav a:focus-visible { color: var(--gold-400); padding-left: var(--space-3); }
.lx-panel__nav a:hover::after,
.lx-panel__nav a:focus-visible::after { transform: scaleX(1); }

/* ---- Zweite Ebene: „Leistungen" klammert die vier Leistungsseiten ----------
   Es gibt bewusst KEINE Übersichtsseite. Der Elternpunkt beschriftet nur; sein `href`
   entfernt `lexpro_brand_nav_label()`, damit er weder fokussierbar ist noch auf dem
   Telefon einen Tipp verschluckt, der das Untermenü meint. */

.lx-panel__nav .lx-nav-label > a {
	color: var(--text-muted);
	cursor: default;
	border-bottom-color: var(--hairline-ink, rgb(255 255 255 / 0.09));
}

/* Ohne href kein Hover-Ziel — die Goldlinie und der Einzug wären eine Lüge. */
.lx-panel__nav .lx-nav-label > a::after { content: none; }
.lx-panel__nav .lx-nav-label > a:hover { color: var(--text-muted); padding-left: 0; }

.lx-panel__nav .sub-menu {
	display: grid;
	/* Eingerückt auf die Breite der Ziffernspalte darüber: die Kinder stehen damit
	   genau unter dem Text des Elternpunkts, nicht unter seiner Nummer. */
	padding-left: calc(var(--space-4) + 2.4ch);
	border-left: var(--hairline-gold);
	margin-left: 0.2ch;
}

.lx-panel__nav .sub-menu a {
	/* Eine Stufe kleiner, aber dieselbe Schrift — die Hierarchie kommt aus der Größe
	   und dem Einzug, nicht aus einer zweiten Schriftart. */
	font-size: clamp(1.05rem, 2.6vw, 1.45rem);
	padding: var(--space-3) 0;
	border-bottom: var(--hairline-ink, 1px solid rgb(255 255 255 / 0.09));
}

.lx-panel__nav .sub-menu li:last-child a { border-bottom: 0; }

/* Laufende Nummer vor jedem Punkt — dasselbe Mono-Raster wie bei den Leistungen. */
.lx-panel__nav li { counter-increment: lxnav; }
.lx-panel__nav > ul { counter-reset: lxnav; }

/* Die Kinder bekommen keine eigene Zählung: „01 Leistungen / 01 SEO / 02 Webdesign"
   liest sich wie zwei konkurrierende Listen. Der Einzug trägt die Hierarchie. */
.lx-panel__nav .sub-menu li { counter-increment: none; }
.lx-panel__nav .sub-menu a::before { content: none; }
.lx-panel__nav a::before {
	content: counter(lxnav, decimal-leading-zero);
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	font-weight: 400;
	letter-spacing: 0.08em;
	color: var(--gold-400);
	flex-shrink: 0;
}

/* Der CTA sitzt bewusst zwischen Menü und Kontaktdaten: er ist die Handlung, die Adresse
   darunter nur noch Beleg. Volle Breite — auf dem Telefon ist das Panel sein einziger Ort. */
.lx-panel__cta { margin-top: var(--space-7); width: 100%; justify-content: center; }

.lx-panel__meta { margin-top: auto; padding-top: var(--space-7); display: grid; gap: var(--space-4); font-size: var(--fs-body-sm); }
.lx-panel__meta a { color: var(--gold-400); text-decoration: none; }
.lx-panel__meta .lx-label { margin-bottom: var(--space-2); }

/* --- Choreografie beim Öffnen -------------------------------------------
   Bewusst Animationen statt Transitions: die Kinder eines geschlossenen <dialog> sind nicht
   gerendert, eine Transition hätte keinen Ausgangszustand und würde beim Öffnen einfach
   nicht anspringen. `both` hält den Startzustand während der Verzögerung.

   Reihenfolge: erst die Goldkante, dann die Menüpunkte von rechts nachrutschend,
   zuletzt Schließen-Knopf und Kontaktblock. */

@keyframes lx-panel-edge { from { transform: scaleY(0); } }
@keyframes lx-panel-item { from { opacity: 0; transform: translateX(2.5rem); } }
@keyframes lx-panel-fade { from { opacity: 0; transform: translateY(-0.5rem); } }

.lx-panel[open] .lx-panel__inner::after {
	animation: lx-panel-edge var(--dur-slow) var(--ease-emphasis) both;
	animation-delay: 0.1s;
}

.lx-panel[open] .lx-panel__nav li {
	animation: lx-panel-item 0.5s var(--ease-emphasis) both;
}

/* Die Staffelung macht den Unterschied zwischen „Panel erscheint" und „Menü baut sich auf". */
.lx-panel[open] .lx-panel__nav li:nth-child(1) { animation-delay: 0.16s; }
.lx-panel[open] .lx-panel__nav li:nth-child(2) { animation-delay: 0.22s; }
.lx-panel[open] .lx-panel__nav li:nth-child(3) { animation-delay: 0.28s; }
.lx-panel[open] .lx-panel__nav li:nth-child(4) { animation-delay: 0.34s; }
.lx-panel[open] .lx-panel__nav li:nth-child(5) { animation-delay: 0.40s; }
.lx-panel[open] .lx-panel__nav li:nth-child(n+6) { animation-delay: 0.46s; }

.lx-panel[open] .lx-panel__close { animation: lx-panel-fade 0.4s var(--ease-out) both; animation-delay: 0.06s; }
.lx-panel[open] .lx-panel__cta   { animation: lx-panel-fade 0.5s var(--ease-out) both; animation-delay: 0.42s; }
.lx-panel[open] .lx-panel__meta  { animation: lx-panel-fade 0.5s var(--ease-out) both; animation-delay: 0.50s; }

/* Reduzierte Bewegung: Panel und Inhalt erscheinen sofort und vollständig. */
@media (prefers-reduced-motion: reduce) {
	html:not([data-motion="full"]) .lx-panel,
	html:not([data-motion="full"]) .lx-panel::backdrop { transition-duration: 1ms; }
	html:not([data-motion="full"]) .lx-burger__box span { transition-duration: 1ms; }
	html:not([data-motion="full"]) .lx-panel[open] .lx-panel__nav li,
	html:not([data-motion="full"]) .lx-panel[open] .lx-panel__close,
	html:not([data-motion="full"]) .lx-panel[open] .lx-panel__meta,
	html:not([data-motion="full"]) .lx-panel[open] .lx-panel__inner::after { animation: none; }
}

html[data-motion="reduced"] .lx-panel,
html[data-motion="reduced"] .lx-panel::backdrop { transition-duration: 1ms; }
html[data-motion="reduced"] .lx-panel[open] .lx-panel__nav li,
html[data-motion="reduced"] .lx-panel[open] .lx-panel__close,
html[data-motion="reduced"] .lx-panel[open] .lx-panel__meta,
html[data-motion="reduced"] .lx-panel[open] .lx-panel__inner::after { animation: none; }

/* Google-Bewertung neben dem CTA — laut Recherche wirksamer als jedes Selbstlob. */
.lx-rating { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.lx-rating__stars { color: var(--gold-400); letter-spacing: 1px; }
.lx-rating__count { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   13 · Footer
   Das Design System liefert nur eine dünne Leiste. Bewusst erweitert, weil der Footer die
   14 Standort-Landingpages tragen muss, die in den Folgeabschnitten dazukommen.
   ========================================================================== */

.lx-footer { background: var(--ink-950); border-top: var(--hairline-gold); }

.lx-footer__cols {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-7);
	padding-block: var(--space-8);
}

@media (max-width: 1023px) { .lx-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px)  { .lx-footer__cols { grid-template-columns: 1fr; } }

.lx-footer h2, .lx-footer h3 {
	font-family: var(--font-text);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-400);
	margin-bottom: var(--space-4);
}

.lx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.lx-footer a { color: var(--text-secondary); text-decoration: none; }
.lx-footer a:hover { color: var(--gold-400); }

.lx-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-5);
	border-top: var(--hairline-ink);
	font-size: var(--fs-caption);
	color: var(--text-muted);
}

.lx-footer__legal { display: inline-flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.lx-footer__brand img { height: 44px; width: auto; }
/* `flex-end`, damit die Gruppe immer am rechten Rand klebt. Ohne das packt sie linksbündig,
   und sobald ein Element darin ausgeblendet wird (die Bewertung unter 900 px), bleibt dessen
   Flex-Platz als Loch stehen — der Hamburger stand dadurch 71 px vom Rand entfernt. */
.lx-header__cta { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5); }

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

/* --- Header auf dem Telefon: Logo links, Hamburger rechts, eine Zeile ---------
   Drei Elemente in 335 px Hülle gehen nicht auf — Lockup (121 px), Button (178 px) und
   Hamburger (44 px) sind zusammen breiter. Der Button ist der einzige, der woanders besser
   aufgehoben ist: im Panel bekommt er die volle Breite statt eines gequetschten Streifens.

   Elementor gibt Containern 10 px Innenabstand; auf beiden Lockup- und CTA-Containern fällt
   der weg, sonst bleibt der Header unnötig hoch. */
@media (max-width: 767px) {
	/* Der Header ist hier 65 statt 105 px hoch. Das Token muss mitgehen, sonst springen
	   Sprungmarken 40 px zu tief und der Hero rechnet mit einer falschen Höhe. */
	:root { --lx-header-h: 65px; }

	.lx-header { padding-block: 0; }
	.lx-header__inner { gap: var(--space-4); min-height: 60px; }
	.lx-lockup, .lx-header__cta { padding: 0; }
	.lx-header__btn { display: none; }
}

/* Eigener Bewegungs-Schalter. Deckt Nutzer ab, deren System keine Praeferenz meldet, und
   solche, die Bewegung im OS wollen, aber nicht auf dieser Seite. */
.lx-motion-toggle {
	background: none;
	border: var(--hairline-ink);
	border-radius: var(--radius-sm);
	padding: 5px 11px;
	color: var(--text-muted);
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	cursor: pointer;
	transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.lx-motion-toggle:hover { color: var(--gold-400); border-color: var(--gold-400); }

/* ==========================================================================
   14 · Layout-Rhythmus
   Gleicher Sektionsabstand überall — unregelmäßige Abstände sind das
   Erkennungsmerkmal einer zusammengeklickten Seite.
   ========================================================================== */

.lx-section { padding-block: var(--section-y); }
.lx-shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 4rem); }
.lx-hairline-top { border-top: var(--hairline-gold); }

/* ==========================================================================
   Rhythmus — gegen den immergleichen Elementor-Takt

   Befund vor diesem Block: 13 von 13 Sektionen lagen im selben Kasten, 10 von 13 waren
   einspaltig mit Überschrift oben. Dekoration überschreibt das nicht — deshalb wirkte der
   Neubau wie die alte Seite. Die Werkzeuge dagegen, in der Reihenfolge ihrer Wirkung:

     1. FLÄCHE wechseln  (--ink-1000 → --ink-950 → --ink-850 → Warm-Paper)
     2. Randlos werden   (Inhalt bis an die Bildschirmkante statt 57 px Einzug)
     3. Archetyp wechseln (Überschrift wandert, statt 13× oben links zu stehen)
     4. Raster verlassen  (ein Element ragt in die Nachbarsektion)

   Breite allein bringt bei 1440 px fast nichts: die Hülle ist dort ohnehin schon so breit wie
   das Fenster. Deshalb liegt das Gewicht auf Fläche und Komposition, nicht auf max-width.
   ========================================================================== */

/* --- 2 · Randlos: Kind ohne Hülle, spannt die volle Sektionsbreite --- */
.lx-bleed { width: 100%; max-width: none; padding-inline: 0; }

/* Etwas breitere Hülle für bildlastige Sektionen. Wirkt erst ab großen Displays spürbar —
   bei 1440 px sind es rund 28 px, auf einem 2560er deutlich mehr. */
.lx-shell--wide { --shell-max: 1760px; padding-inline: clamp(1.25rem, 3vw, 3rem); }

/* --- 1 · Kundenband: eigene Fläche, randlose Logos, ragt in den Hero --- */
.lx-band {
	background: var(--ink-950);
	border-block: var(--hairline-gold);
	/* Zieht sich nach oben in den Hero. Der Hero hat `overflow: hidden`, das beschneidet aber
	   nur seine eigenen Kinder — ein nachfolgendes Geschwister bleibt unberührt. */
	margin-top: calc(var(--section-y) * -0.5);
	position: relative;
	z-index: 2;
}

.lx-band .lx-shell { margin-bottom: var(--space-7); }
.lx-band .lx-anchor-logos { padding-inline: clamp(1.25rem, 4vw, 4rem); margin-bottom: var(--space-7); }

/* --- 1 · Statement auf eigener Platte --- */
.lx-slab { background: var(--ink-850); border-block: var(--hairline-gold); }

/* --- 3 · Archetyp B: Medienspalte wechselt die Seite (Beweis-Band) --- */
@media (min-width: 1024px) {
	.lx-flip .lx-media-split > *:first-child { order: 2; }
}

/* --- 3 · Archetyp C: Inhalt links, Überschrift rechts und mitlaufend (FAQ) ---
   Aus einer einspaltigen Sektion wird ein Zweispalter, ohne das Markup anzufassen: die
   Überschrift bekommt die rechte Spalte zugewiesen, alles andere die linke. */
@media (min-width: 1024px) {
	.lx-aside-right > .lx-shell {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
		gap: var(--space-8);
		align-items: start;
	}

	.lx-aside-right > .lx-shell > .lx-section-title {
		grid-column: 2;
		grid-row: 1;
		position: sticky;
		top: var(--lx-pin-top, 7rem);
	}

	.lx-aside-right > .lx-shell > *:not(.lx-section-title) { grid-column: 1; }
}

/* --- 4 · Raster verlassen --- */
@media (min-width: 1024px) {
	.lx-flip .lx-shot--tall { margin-block: calc(var(--space-8) * -1) calc(var(--space-6) * -1); }
}

/* Gold-Lichtschein. Radial und sehr flach — kein harter Glow, der wie ein Effekt aussieht. */
.lx-bloom { position: relative; isolation: isolate; }
.lx-bloom::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto -10%;
	height: 80%;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(ellipse 60% 100% at 50% 0%, rgb(212 175 55 / 0.11), transparent 62%);
}

/* ==========================================================================
   15 · Startseiten-Abschnitte
   ========================================================================== */

/* --- 01 Hero. Das LCP-Element ist die H1 (reiner Text) — sie wird nie eingeblendet. --- */
.lx-hero {
	position: relative;
	isolation: isolate;
	/* `svh` statt `vh`: `vh` rechnet auf Mobilgeräten mit der *größten* Fensterhöhe, also ohne
	   Browserleiste — der Hero wäre beim Laden höher als der sichtbare Bereich und der Inhalt
	   würde beim ersten Scrollen springen. `svh` nimmt die kleinste.

	   Die Header-Höhe muss abgezogen werden: der Header ist `sticky`, steht also im Fluss und
	   schiebt den Hero um seine 77 px nach unten. Ohne den Abzug ragt der Hero exakt um diesen
	   Betrag über den Falz — und die Kennzahlen an seinem unteren Rand wären nie zu sehen. */
	min-height: calc(100svh - var(--lx-header-h, 105px));
	padding-block: clamp(4rem, 11vh, 7rem) clamp(3rem, 7vh, 5rem);
	overflow: hidden;
}

/* Der Inhalt beginnt oben, die Kennzahlen werden ans untere Ende geschoben — so füllt der
   Hero den ersten Bildschirm, ohne dass etwas mittig zerfließt. */
.lx-hero > .lx-shell { flex: 1; justify-content: flex-start; }

/* Zwei Lichtquellen statt einer: ein weiter Schein für die Fläche, ein enger Kern hinter der
   Headline. Ein einzelner Verlauf liest sich flach, weil ihm der Helligkeitssprung fehlt. */
.lx-hero::before {
	content: "";
	position: absolute;
	inset: -30% -10% auto -10%;
	height: 120%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 38% 46% at 42% 8%, rgb(212 175 55 / 0.16), transparent 70%),
		radial-gradient(ellipse 60% 95% at 50% 0%, rgb(212 175 55 / 0.10), transparent 62%);
}

/* --- Rotierende Leistungszeile ---------------------------------------------
   Ersetzt die vier Trust-Chips: dieselben vier Begriffe, aber nacheinander. Alle vier stehen
   im DOM und sind crawlbar — sichtbar ist immer nur einer.

   Grundzustand ist bewusst die *Liste*, nicht der Stapel: ohne laufende Animation lägen
   gestapelte Wörter übereinander und wären unlesbar. Das Stapeln passiert erst dort, wo auch
   animiert wird (lexpro-motion.css).

   WCAG 2.2.2: Bewegung über 5 s braucht eine Pause-Möglichkeit — die stellt der
   Bewegungsschalter im Footer, zusätzlich pausiert sie bei Hover und Tastaturfokus. */

.lx-rotator {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-5);
}

.lx-rotator__slot { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); }

.lx-rotator__word {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.25rem, 2.4vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--gold-300);
	white-space: nowrap;
}

/* --- Kennzahlen im Hero: kompakter als im Beweis-Band --- */
.lx-hero .lx-stats { margin-top: auto; padding-top: var(--space-6); border-top: var(--hairline-gold); }
.lx-hero .lx-stat { gap: var(--space-1); }
.lx-hero .lx-stat__note { display: none; }

@supports (container-type: inline-size) {
	.lx-hero .lx-stat__value { font-size: clamp(1.75rem, 14cqw, 3.25rem); }
}
.lx-hero .lx-stat__label { font-size: var(--fs-caption); max-width: 30ch; }

/* Auf dem Telefon bleiben die Kennzahlen zweispaltig. Einspaltig standen die vier Werte auf
   612 px Höhe verteilt und rissen den Hero auf 1686 px auf — auf einem 812-px-Display scrollt
   man dann zweimal, bevor der Hero endet. Zu zweit nebeneinander sind es rund 250 px.
   Die Zahl skaliert dabei über die Spaltenbreite, damit „+45.475 %" auch in 132 px passt. */
@media (max-width: 599px) {
	.lx-hero .lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
	.lx-hero .lx-stat__label { max-width: none; }

	@supports (container-type: inline-size) {
		/* Obergrenze aus der längsten Zahl gerechnet: „+45.475 %" braucht rund 4,4× die
		   Schriftgröße an Breite, die Spalte ist 140 px — mehr als ~30 px passt nicht. */
		.lx-hero .lx-stat__value { font-size: clamp(1.625rem, 20cqw, 2.5rem); }
	}
}

/* Flache Displays: 768 px Fensterhöhe minus 105 px Header lassen 663 px für einen Hero, dessen
   Inhalt 732 px braucht — die Kennzahlen lägen unter dem Falz und wären damit wertlos. Statt
   Inhalt zu streichen wird der Weißraum zusammengezogen; die Sektionsabstände der übrigen Seite
   bleiben unangetastet. */
@media (max-height: 850px) and (min-width: 1024px) {
	.lx-hero { padding-block: clamp(1.75rem, 5vh, 3rem) clamp(1.25rem, 3.5vh, 2rem); }
	.lx-hero > .lx-shell { gap: var(--space-4); }
	.lx-hero .lx-stats { padding-top: var(--space-4); gap: var(--space-5) var(--space-6); }
	.lx-hero .lx-rotator { margin-top: var(--space-3); }
}

.lx-hero__inner { display: flex; flex-direction: column; gap: var(--space-5); max-width: 20ch; }
.lx-hero__lead { max-width: 58ch; }
.lx-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); }

/* Scroll-Hinweis: eine Linie, die sich wiederholt nach unten füllt. Kein hüpfender Pfeil —
   das Design System verbietet Bounce ausdrücklich. */
.lx-scrollcue {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-7);
	font-family: var(--font-mono);
	font-size: var(--fs-caption);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.lx-scrollcue__track {
	position: relative;
	display: block;
	width: 1px;
	height: 42px;
	background: var(--ink-600);
	overflow: hidden;
}

.lx-scrollcue__bar {
	position: absolute;
	inset: 0 auto auto 0;
	display: block;
	width: 1px;
	height: 42px;
	background: linear-gradient(to bottom, transparent, var(--gold-400));
	transform-origin: top;
	animation: lx-scrollcue 2.4s var(--ease-in-out) infinite;
}

@keyframes lx-scrollcue {
	0%   { transform: scaleY(0); opacity: 0; }
	40%  { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1) translateY(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html:not([data-motion="full"]) .lx-scrollcue__bar { animation: none; opacity: 0.5; }
}
html[data-motion="reduced"] .lx-scrollcue__bar { animation: none; opacity: 0.5; }

/* Trust-Chips. Text-Häkchen, keine Icons — so steht es im Design System. */
.lx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-4); list-style: none; padding: 0; }
.lx-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border: 1px solid rgb(212 175 55 / 0.32);
	border-radius: var(--radius-pill);
	background: rgb(212 175 55 / 0.10);
	color: var(--gold-300);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- 02 Beweis-Band --- */
/* minmax(0, 1fr) statt 1fr: ein blankes `1fr` ist `minmax(auto, 1fr)` und lässt eine Spalte
   nicht unter ihren Inhalt schrumpfen — überlange Zahlen sprengen damit das Raster. */
.lx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-7) var(--space-6); }
@media (max-width: 899px) { .lx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lx-stats { grid-template-columns: minmax(0, 1fr); } }

/* --- Datenkurve ----------------------------------------------------------
   Die Signatur der Richtung: eine gezeichnete Messkurve statt eines Dekobilds. Der Pfad
   trägt pathLength="1", damit stroke-dashoffset unabhängig von der Geometrie animiert —
   siehe lexpro-motion.css, dort läuft sie scroll-gekoppelt. */

.lx-curve { display: block; width: 100%; height: auto; margin-top: var(--space-6); overflow: visible; }
.lx-curve__grid line { stroke: var(--ink-700); stroke-width: 1; }
.lx-curve__axis   { stroke: var(--ink-600); stroke-width: 1; }

.lx-curve__path {
	fill: none;
	stroke: url(#lxCurveGold);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.lx-curve__dot { fill: var(--gold-400); }
.lx-curve__area { fill: url(#lxCurveFade); }

.lx-curve__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	fill: var(--ink-400);
}

/* --- 03 Anker-Logos --- */
.lx-anchor-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-6);
	align-items: center;
}
.lx-anchor-logos img { height: 40px; width: auto; margin-inline: auto; filter: grayscale(1) brightness(0) invert(0.94); opacity: 0.72; }

/* --- Kundenstimmen -------------------------------------------------------
   14 gleich grosse Karten sind eine Wand. Drei bekommen Gewicht, der Rest tritt zurueck —
   und `align-items: start` laesst die Karten ihre natuerliche Hoehe behalten, statt sie
   zeilenweise auf ein Mass zu strecken. Das allein nimmt der Sektion das Gleichfoermige. */

.lx-quotes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	align-items: start;
}

@media (max-width: 1023px) { .lx-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .lx-quotes { grid-template-columns: 1fr; } }

/* Die ersten drei: groesseres Zitat, Gold-Hairline, Akzentkante. */
.lx-quotes > .lx-quote:nth-child(-n+3) { border-color: rgb(212 175 55 / 0.28); }
.lx-quotes > .lx-quote:nth-child(-n+3) .lx-quote__text { font-size: 1.1875rem; line-height: 1.45; }

.lx-quotes > .lx-quote:nth-child(-n+3)::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background-image: var(--grad-gold);
}

/* Der Rest: ruhiger, kompakter, ohne das grosse Anfuehrungszeichen. */
.lx-quotes > .lx-quote:nth-child(n+4) { padding: var(--space-5); gap: var(--space-4); }
.lx-quotes > .lx-quote:nth-child(n+4) .lx-quote__mark { display: none; }
.lx-quotes > .lx-quote:nth-child(n+4) .lx-quote__text { font-size: 0.9375rem; line-height: var(--lh-snug); color: var(--text-secondary); }

/* --- 04 Statement-Band --- */
.lx-statement { text-align: center; padding-block: clamp(3rem, 8vh, 6rem); }
.lx-statement__text {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.75rem, 4.5vw, 3.75rem);
	line-height: 1.0;
	letter-spacing: -0.02em;
	text-wrap: balance;
	max-width: 24ch;
	margin-inline: auto;
	color: var(--text-primary);
}

/* --- 06 Vorteile: Überschrift läuft mit, Inhalte scrollen vorbei --- */
.lx-split-2 { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1023px) { .lx-split-2 { grid-template-columns: 1fr; gap: var(--space-6); } }

.lx-benefits { display: grid; gap: var(--space-6); }
.lx-benefit { padding-top: var(--space-5); border-top: var(--hairline-gold); }
.lx-benefit h3 {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 1.375rem;
	letter-spacing: -0.01em;
	color: var(--text-primary);
	margin-bottom: var(--space-3);
}

/* --- 07 CTA-Band --- */
.lx-cta-band { text-align: center; border-block: var(--hairline-gold); }
.lx-cta-band .lx-section-title { max-width: 22ch; margin-inline: auto; }

/* --- 08 Editorial auf Warm-Paper --- */
.lx-editorial__body { columns: 2; column-gap: var(--space-8); }
.lx-editorial__body p { break-inside: avoid; margin-bottom: var(--space-5); max-width: none; }
@media (max-width: 899px) { .lx-editorial__body { columns: 1; } }

/* --- 10 FAQ -------------------------------------------------------------
   Elementors nested-accordion bringt eine eigene Struktur mit: das <summary> enthält einen
   Header-Span mit dem <h3> und einen Icon-Span mit zwei SVGs für auf und zu. Dazu einen hellen
   Standardrahmen (#d5d8dc) und 10 px Innenabstand — auch um den geöffneten Antwortcontainer,
   der dadurch als Kasten neben der Frage stand.

   Die frühere Fassung war für ein blankes details/summary geschrieben. Sie hat dem Widget per
   ::after ein zweites Icon danebengesetzt, während Elementors eigenes in #1f2124 links stehen
   blieb — auf Near-Black praktisch unsichtbar. Deshalb hier die vorhandene Struktur gestalten
   statt eine zweite daneben: ein Icon, vom Widget gestellt, weil es den Zustand von selbst kennt.
   -------------------------------------------------------------------------- */

/* Die Icon-Farbe wird über Elementors eigene Variablen gesetzt, nicht über einen Selektor.
   Die zuständige Regel lautet
     `.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title
      .e-n-accordion-item-title-icon span > svg`
   und hat damit Spezifität 0-5-2 — dagegen kommt keine vernünftige eigene Auswahl an. Sie liest
   aber aus diesen beiden Variablen, und die vererben sich. Das ist der vorgesehene Anschluss. */
.lx-faq {
	--n-accordion-icon-normal-color: var(--gold-400);
	--n-accordion-icon-active-color: var(--gold-300);
}

.lx-faq .e-n-accordion { display: grid; gap: 0; border-top: var(--hairline-gold); }
.lx-faq .e-n-accordion-item { border-bottom: var(--hairline-gold); }

.lx-faq .e-n-accordion-item-title {
	border: 0;
	background: none;
	padding: var(--space-5) 0;
	gap: var(--space-5);
	align-items: center;
	cursor: pointer;
}

.lx-faq .e-n-accordion-item-title-header { flex: 1 1 auto; }

.lx-faq .e-n-accordion-item-title-text {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	line-height: var(--lh-heading);
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

/* Elementor setzt das Icon per `order: -1` nach links. Rechts ist es die ruhigere
   Leserichtung: erst die Frage, dann die Aufforderung. Die Größe geht über einen eigenen
   Selektor — nur die Farbe steckt in der hochspezifischen Regel und läuft über die Variablen
   oben. */
.lx-faq .e-n-accordion-item-title-icon { order: 1; flex: none; }
.lx-faq .e-n-accordion-item-title-icon span svg,
.lx-faq .e-n-accordion-item-title-icon > svg { width: 14px; height: 14px; }

.lx-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--gold-200); }
.lx-faq .e-n-accordion-item-title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }

.lx-faq .e-n-accordion-item .lx-faq__answer {
	border: 0;
	padding: 0 0 var(--space-6);
	max-width: var(--measure);
}
.lx-faq__answer p + p { margin-top: var(--space-4); }

/* --- 11 Kontakt --- */
.lx-contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 899px) { .lx-contact { grid-template-columns: 1fr; } }

.lx-contact__meta { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.lx-contact__meta a { color: var(--gold-400); text-decoration: none; }

/* Klick-zum-Laden statt Google-Einbettung: ohne Consent-Tool darf kein Drittanbieter-Request
   rausgehen. Wird ersetzt, sobald Borlabs installiert ist. */
.lx-map-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	min-height: 260px;
	padding: var(--space-6);
	text-align: center;
	border: var(--hairline-ink);
	border-radius: var(--radius-card);
	background: var(--bg-inset);
	color: var(--text-muted);
	font-size: var(--fs-body-sm);
}

/* Warm-Paper-Insel für lange Textstrecken. Dark Mode ist für Lesetext ungünstig,
   und genau dort sitzen die Rankings. */
.lx-paper {
	background: var(--paper);
	--text-primary: var(--ink-1000);
	--text-secondary: var(--ink-700);
	--text-muted: var(--ink-500);
	--gold-400: var(--gold-700);
	color: var(--text-secondary);
}

/* Die Überschrift muss direkt angesprochen werden, nicht ihr Widget.
   Elementor legt `_css_classes` auf den Wrapper, das <h2> darin trägt `.elementor-heading-title`
   und bekommt vom Kit eine literale Farbe (#F2EFE9). Die erbt nichts vom Wrapper — auf Warm-Paper
   stand die Überschrift deshalb weiß auf Weiß. Die dreistellige Auswahl schlägt die Kit-Regel
   unabhängig von der Ladereihenfolge. */
.lx-paper .lx-section-title,
.lx-paper .lx-section-title .elementor-heading-title,
.lx-paper h1, .lx-paper h2, .lx-paper h3, .lx-paper h4 { color: var(--ink-1000); }

.lx-paper a { color: var(--gold-700); text-underline-offset: 3px; }

/* --- Arbeiten: vier Startseiten, die sich beim Scrollen selbst abspielen ---
   Der Rahmen hat ein festes Seitenverhältnis, das Bild darin ist rund viermal so hoch.
   Die Bewegung des Bildes im Rahmen liegt in lexpro-motion.css — hier steht nur, wie es
   aussieht. Ohne Scroll-Timeline steht das Bild oben still und zeigt den Kopfbereich der
   jeweiligen Seite: eine gültige Aufnahme, kein Loch.
   -------------------------------------------------------------------------- */

.lx-work { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: var(--space-8); align-items: start; }
@media (max-width: 1023px) { .lx-work { grid-template-columns: 1fr; gap: var(--space-6); } }

/* --- Register in der linken Spalte --- */

.lx-work__index { list-style: none; margin: var(--space-6) 0 0; padding: 0; }

.lx-work__index li {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem 1fr;
	gap: var(--space-3);
	align-items: baseline;
	padding: var(--space-4) 0 var(--space-4) var(--space-4);
	border-top: var(--hairline-gold);
}

.lx-work__index li:last-child { border-bottom: var(--hairline-gold); }

/* Die Markierung der gerade sichtbaren Arbeit. Ruht auf 0 und wird scroll-gesteuert
   aufgezogen — siehe lexpro-motion.css. */
.lx-work__index li::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	bottom: 0;
	width: 2px;
	background-image: var(--grad-gold);
	transform: scaleY(0);
	transform-origin: 50% 0;
}

.lx-work__num { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--gold-400); }
.lx-work__name { display: block; font-weight: var(--fw-medium); color: var(--text-primary); }
.lx-work__branch { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--text-muted); }

/* --- Rahmen --- */

.lx-work__stack { display: grid; gap: clamp(3rem, 8vh, 7rem); }
.lx-work__item { margin: 0; }

.lx-frame {
	border: 1px solid rgb(212 175 55 / 0.16);
	border-radius: var(--radius-card);
	background: var(--ink-900);
	overflow: clip;
	box-shadow: var(--inset-hairline);
}

.lx-frame__bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 10px var(--space-4);
	border-bottom: 1px solid rgb(212 175 55 / 0.12);
	background: var(--ink-850);
	font-size: 0.75rem;
	color: var(--text-muted);
}

.lx-frame__dots { display: inline-flex; gap: 5px; flex: none; }
.lx-frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-600); }

/* Der eigentliche Ausschnitt. `overflow: clip` statt `hidden`: es erzeugt keinen
   Scroll-Container, den Tastaturnutzer sonst versehentlich fokussieren könnten.

   Das Bild liegt absolut im Rahmen. In-Flow würde es den Rahmen aufziehen: eine Box mit
   `aspect-ratio` bekommt in der abhängigen Achse eine inhaltsbasierte Mindesthöhe, und ein
   viermal so hohes Bild setzt sie durch — der Rahmen war dann exakt so hoch wie das Bild
   und hat gar nichts beschnitten. Aus dem Fluss genommen kann das Bild die Höhe nicht mehr
   beeinflussen, und die kommt allein aus dem Seitenverhältnis. */
.lx-frame__view { position: relative; aspect-ratio: var(--lx-frame-ar, 16 / 10); overflow: clip; }
.lx-frame__view img { position: absolute; top: 0; left: 0; display: block; width: 100%; height: auto; }

@media (max-width: 767px) { .lx-work__stack { --lx-frame-ar: 4 / 3; } }

.lx-work__cap { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: baseline; }
.lx-work__cap strong { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.125rem; color: var(--text-primary); }
.lx-work__cap span { font-size: var(--fs-body-sm); color: var(--text-muted); }

/* Auf schmalen Viewports trägt das Register nichts bei — der Stapel selbst ist das Register. */
@media (max-width: 1023px) { .lx-work__index { display: none; } }

/* --- Auszeichnungen und Teamfoto ----------------------------------------- */

.lx-shot { position: relative; overflow: clip; border-radius: var(--radius-card); border: 1px solid rgb(212 175 55 / 0.16); }
.lx-shot img { display: block; width: 100%; height: auto; }

/* Ein Foto auf Warm-Paper braucht keinen Rahmen in Gold — dort ist Gold zu leise. */
.lx-paper .lx-shot { border-color: rgb(11 10 9 / 0.12); }

.lx-shot__cap { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--text-muted); }

/* Spielraum für die Parallaxe — über eine Skalierung, NICHT über Extra-Höhe.

   Die erste Fassung gab der Figur `aspect-ratio: 1/1` und nahm das Bild mit
   `position: absolute; height: 116%` aus dem Fluss. Damit hatte die Figur keinen Inhalt mehr
   im Fluss und bezog ihre Höhe allein aus dem Seitenverhältnis — und die zählt der
   Elternblock nicht mit. Gemessen: Figur 275 px, Elternelement **2 px** (nur die Rahmen),
   `scrollHeight` 275. Das Foto lag dadurch 201 px über der Datenkurve und 111 px über dem
   Button „Jetzt kontaktieren", der praktisch unsichtbar dahinter verschwand.

   Gegenprobe am Teamfoto, das dieselbe Optik ohne beides erreicht: dessen Elternelement misst
   korrekte 288 px. Deshalb hier derselbe Aufbau — Bild im Fluss, kein Seitenverhältnis — und
   die Überlänge kommt aus `scale`. Transforms verändern das Layout nicht, die Höhe bleibt
   also korrekt, und `overflow: clip` an `.lx-shot` schneidet den Überstand ab.

   7 % Überstand pro Seite gegen 6 % Parallaxe-Weg: die Kante wird nie frei. */
.lx-shot--tall img { scale: 1.14; transform-origin: 50% 50%; }

.lx-media-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-8); align-items: center; }
@media (max-width: 1023px) { .lx-media-split { grid-template-columns: 1fr; gap: var(--space-6); } }

/* --- Ablauf: vier Wochen, sechzehn Schritte -------------------------------
   Die Ziffern stehen als Text im Markup, nicht als CSS-Counter. Sie sind hier Inhalt — die
   Frage „Was passiert, wenn ich unterschreibe?" wird von ihnen beantwortet — und müssen
   deshalb auch ohne Stylesheet und für Crawler lesbar sein.

   Die durchgehende Gold-Linie über allen vier Phasen wird beim Scrollen gezogen
   (`data-lx-line`, siehe lexpro-motion.css); darunter liegt pro Phase eine ruhende Haarlinie,
   sodass ohne Bewegung nichts fehlt.
   -------------------------------------------------------------------------- */

.lx-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
@media (max-width: 1023px) { .lx-process { grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); } }
@media (max-width: 600px)  { .lx-process { grid-template-columns: 1fr; } }

.lx-phase { position: relative; padding-top: var(--space-6); border-top: var(--hairline-gold); }

/* Der Marker sitzt auf der Linie, nicht daneben. */
.lx-phase::before {
	content: "";
	position: absolute;
	top: -3px;
	left: 0;
	width: 5px;
	height: 5px;
	background-image: var(--grad-gold);
}

.lx-phase__title {
	margin-top: var(--space-3);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 1.375rem;
	letter-spacing: -0.01em;
	color: var(--text-primary);
}

.lx-phase__steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: var(--space-3); }

.lx-phase__steps li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	gap: var(--space-2);
	align-items: baseline;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-snug);
	color: var(--text-secondary);
}

.lx-phase__steps b {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	color: var(--gold-400);
	font-variant-numeric: tabular-nums;
}

.lx-phase__result {
	margin-top: var(--space-5);
	padding-top: var(--space-4);
	border-top: 1px solid rgb(212 175 55 / 0.10);
	font-size: var(--fs-caption);
	line-height: var(--lh-snug);
	color: var(--text-muted);
}

.lx-phase__result strong {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gold-400);
}