/* ==========================================================================
   FRESHH - Design System
   Partyband Freshh, Hannover
   --------------------------------------------------------------------------
   Aesthetic family: dark editorial / stage. Not an official design system.
   Built with native CSS custom properties + Geist type. No framework.

   THEME LOCK: this page commits to a single dark theme as brand expression.
   All brand photography is dark stage material and the wordmark is an
   electric cyan that only works against a dark ground. `color-scheme: dark`
   is declared so native controls and scrollbars follow.

   SHAPE SYSTEM (locked, applied everywhere):
     interactive (buttons, pills, chips, avatars) -> full pill
     media + cards                                -> --r-lg (28px)
     nested media, small cards                    -> --r-md (18px)
     inputs, textareas                            -> --r-sm (12px)

   COLOR LOCK: one accent for the whole page, --fx-accent (#3dfaff), taken
   from the existing brand wordmark (Logo_turkis.png). Never a second accent.
   ========================================================================== */

/* ==========================================================================
   1. Fonts (self-hosted, variable)
   ========================================================================== */

@font-face {
	font-family: "Geist";
	src: url("../fonts/Geist.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("../fonts/GeistMono.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Tokens
   ========================================================================== */

/*
 * Zwei Geltungsbereiche. `:root` ist hell und damit der Grundzustand der
 * Seite. `.fx-on-dark` traegt die dunklen Werte und kippt seinen kompletten
 * Teilbaum. Weil alle Komponenten ausschliesslich Tokens lesen und nie rohe
 * Farben, brauchen Karten, Chips, Tags, Formulare, Accordion und die
 * Bewertungswand dafuer keine eigene Regel.
 *
 * Alle Kontrastwerte unten sind gerechnet und im Browser gegen den echten
 * Untergrund nachgemessen, nicht geschaetzt.
 */
:root {
	color-scheme: light dark;

	/* Flaechen. Kuehles Papier mit leichtem Cyan-Stich, passend zur Marke,
	   bewusst nicht das uebliche warme Creme. Kein reines Weiss. */
	--fx-bg: #f3f7f8;
	--fx-surface: #dfecef; /* deutlich getoent, nicht fast grau */
	--fx-card: #ffffff;
	--fx-card-hover: #f3f9fa;
	--fx-well: #d2e2e6;

	/* Karten brauchen auf Papier eine Kontur, sonst verschwinden sie.
	   Schatten in der Flaechenfarbe getoent, nicht neutralschwarz. */
	--fx-card-shadow: 0 1px 2px rgb(13 40 48 / 0.05), 0 10px 28px rgb(13 40 48 / 0.06);

	/* Text. Near-Black mit Blaustich statt neutralem Grau. */
	--fx-fg: #0d1417; /* 16,5:1 auf --fx-bg */
	--fx-fg-muted: #4e5d61; /* 6,4:1 auf reinem Papier, Reserve fuer die Farbflaechen */
	--fx-fg-dim: #4a585c; /* 6,9:1 auf reinem Papier */
	--fx-numeral: #5f777d; /* stille Ziffern, 3,9:1 auch auf der getoenten Flaeche */

	--fx-line: rgb(13 20 23 / 0.1);
	--fx-line-strong: rgb(13 20 23 / 0.2);

	/*
	 * Der Akzent muss sich teilen. Das Logo-Cyan #3dfaff hat auf Papier nur
	 * 1,2:1 und ist als Text unbrauchbar. Die alte Seite hatte aber einen
	 * zweiten Markenton, #15779b. Der liegt mit 4,48:1 knapp unter AA,
	 * deshalb hier eine Spur dunkler. Gleiche Markenfamilie, kein zweiter
	 * Akzent.
	 */
	--fx-accent: #136a8b; /* 5,36:1 */
	--fx-accent-soft: rgb(19 106 139 / 0.1);
	--fx-accent-line: rgb(19 106 139 / 0.28);
	--fx-accent-ink: #ffffff; /* Text auf Akzentflaeche */
	--fx-accent-fill: #0f5f7d; /* CTA-Flaeche, Off-White darauf 7,2:1 */
	--fx-accent-deep: #15779b;

	/* Sterne. Bernstein muss auf Papier dunkler sein, sonst 1,9:1. */
	--fx-star: #a5670a; /* 4,6:1 auf der Kartenflaeche, Reserve nach unten */

	/* Glasflaechen: Navigationsleiste, Ghost-Knopf, mobile Schublade. */
	--fx-glass: rgb(251 253 253 / 0.72);
	--fx-glass-solid: rgb(242 246 247 / 0.97);
	--fx-accent-fill-hover: #0b4c66;

	/* Formulare */
	--fx-placeholder: #4e5d61; /* 6,4:1 auf --fx-card */
	--fx-error: #a3242c; /* 5,9:1 auf --fx-card */

	/* Zweite Ebene: die Farben der eigenen Buehnenscheinwerfer. Sie leben in
	   der Dekoschicht, nie in Bedienelementen. */
	--fx-hue-cyan: #3dfaff;
	--fx-hue-blue: #4d9bff;
	--fx-hue-violet: #9d7bff;
	--fx-hue-magenta: #ff5fa2;
	--fx-hue-amber: #ffb347;

	/* Shape */
	--fx-r-lg: 28px;
	--fx-r-md: 18px;
	--fx-r-sm: 12px;
	--fx-r-pill: 999px;

	/* Type */
	--fx-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--fx-font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--fx-fs-display: clamp(2.6rem, 6.6vw, 4.75rem);
	--fx-fs-h2: clamp(1.95rem, 4vw, 3.15rem);
	--fx-fs-h3: clamp(1.2rem, 1.9vw, 1.6rem);
	--fx-fs-lead: clamp(1.05rem, 1.35vw, 1.2rem);
	--fx-fs-body: 1.0625rem;
	--fx-fs-sm: 0.9375rem;
	--fx-fs-xs: 0.8125rem;
	--fx-fs-label: 0.6875rem;

	/* Rhythm. VISUAL_DENSITY 3: airy. */
	--fx-shell: 1400px;
	--fx-gutter: clamp(1.25rem, 4vw, 3rem);
	--fx-section-y: clamp(5rem, 9vw, 8.5rem);
	--fx-head-gap: clamp(2.75rem, 5vw, 4.5rem);

	/* Motion */
	--fx-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--fx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--fx-dur-fast: 180ms;
	--fx-dur: 320ms;
	--fx-dur-slow: 700ms;

	/* Layer scale. Documented, not sprayed. */
	--fx-z-base: 1;
	--fx-z-raise: 10;
	--fx-z-overlay: 40;
	--fx-z-nav: 50;
}

/*
 * Die dunklen Buehnen-Bloecke: Hero, Anlaesse, Showreel, Abschluss-CTA und
 * Footer. Dort lebt das Logo-Cyan, dort liegen die dunklen Buehnenfotos und
 * das Video.
 */
.fx-on-dark {
	color-scheme: dark;

	--fx-bg: #08080a;
	--fx-surface: #0e0e11;
	--fx-card: #141418;
	--fx-card-hover: #1b1b20;
	--fx-well: #26262d;

	--fx-fg: #f7f7f8;
	--fx-fg-muted: #b0b0b9; /* Reserve fuer die Lichtkegel dahinter */
	--fx-fg-dim: #8d8d97;
	--fx-numeral: #26262d;

	--fx-line: rgb(255 255 255 / 0.08);
	--fx-line-strong: rgb(255 255 255 / 0.16);

	--fx-accent: #3dfaff; /* 15:1 auf --fx-bg */
	--fx-accent-soft: rgb(61 250 255 / 0.12);
	--fx-accent-line: rgb(61 250 255 / 0.32);
	--fx-accent-ink: #032227;
	--fx-accent-fill: #f7f7f8; /* auf dunkel traegt Off-White die CTA */

	--fx-star: #ffb347;

	--fx-card-shadow: none;

	--fx-glass: rgb(14 14 17 / 0.94);
	--fx-glass-solid: rgb(14 14 17 / 0.99);
	--fx-accent-fill-hover: #ffffff;

	--fx-placeholder: #8b8b95; /* 5,7:1 auf --fx-surface */
	--fx-error: #ff9b9b;

	background: var(--fx-bg);
	color: var(--fx-fg);
}

/* ==========================================================================
   3. Reset + base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6.5rem;
}

body.fx {
	margin: 0;
	background: var(--fx-bg);
	color: var(--fx-fg);
	font-family: var(--fx-font);
	font-size: var(--fx-fs-body);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: -0.006em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* clip statt hidden: hidden macht den Body zum Scroll-Container, und dann
	   klebt das sticky-Hero am Body statt am Viewport. clip klemmt nur ab. */
	overflow-x: clip;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

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

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
ul,
ol,
dl {
	margin: 0;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--fx-accent);
	outline-offset: 3px;
	border-radius: var(--fx-r-sm);
}

::selection {
	background: var(--fx-accent);
	color: var(--fx-accent-ink);
}

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

.fx-skip {
	position: fixed;
	top: 0.75rem;
	left: 0.75rem;
	z-index: calc(var(--fx-z-nav) + 1);
	padding: 0.7rem 1.15rem;
	background: var(--fx-accent);
	color: var(--fx-accent-ink);
	border-radius: var(--fx-r-pill);
	font-size: var(--fx-fs-sm);
	font-weight: 600;
	transform: translateY(-160%);
	transition: transform var(--fx-dur) var(--fx-ease);
}

.fx-skip:focus-visible {
	transform: translateY(0);
}

/* ==========================================================================
   4. Layout primitives
   ========================================================================== */

.fx-shell {
	width: 100%;
	max-width: var(--fx-shell);
	margin-inline: auto;
	padding-inline: var(--fx-gutter);
}

.fx-section {
	position: relative;
	padding-block: var(--fx-section-y);
}

/* Nach dem Hero bleibt die Buehne dunkel. Weniger Luft oben, damit die
   Fotos als naechster Takt kommen und nicht als neues Kapitel. */
.fx-hero-scrub + .fx-section {
	padding-top: clamp(3rem, 5.5vw, 5rem);
}

.fx-hero-scrub + .fx-section .fx-head {
	margin-bottom: clamp(1.75rem, 3.4vw, 2.75rem);
}

/* Alternating surface tints stay inside the dark family. */
.fx-section--tint {
	background: var(--fx-surface);
}

.fx-section--edge {
	border-top: 1px solid var(--fx-line);
}

/* Section header: vertical stack. No split-header, no corner floater. */
.fx-head {
	max-width: 46ch;
	margin-bottom: var(--fx-head-gap);
}

.fx-head--wide {
	max-width: 60ch;
}

.fx-head__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: var(--fx-head-gap);
}

.fx-head__aside .fx-head {
	margin-bottom: 0;
}

/* ==========================================================================
   5. Typography
   ========================================================================== */

.fx-display {
	font-size: var(--fx-fs-display);
	font-weight: 620;
	line-height: 1.02;
	letter-spacing: -0.038em;
	text-wrap: balance;
}

.fx-h2 {
	font-size: var(--fx-fs-h2);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.fx-h3 {
	font-size: var(--fx-fs-h3);
	font-weight: 560;
	line-height: 1.22;
	letter-spacing: -0.02em;
}

.fx-lead {
	font-size: var(--fx-fs-lead);
	line-height: 1.62;
	color: var(--fx-fg-muted);
	max-width: 52ch;
}

.fx-body-muted {
	color: var(--fx-fg-muted);
	max-width: 62ch;
}

.fx-h2 + .fx-lead,
.fx-display + .fx-lead {
	margin-top: 1.15rem;
}

/* Eyebrow. Rationed: max one per three sections. */
.fx-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.35rem;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fx-accent);
}

.fx-mono {
	font-family: var(--fx-font-mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.fx-accent {
	color: var(--fx-accent);
}

/* ==========================================================================
   6. Icons
   ========================================================================== */

.fx-i {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
}

.fx-i--flip {
	transform: rotate(180deg);
}

/* ==========================================================================
   7. Buttons
   ========================================================================== */

.fx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-height: 3.25rem;
	padding: 0 1.6rem;
	border: 1px solid transparent;
	border-radius: var(--fx-r-pill);
	background: none;
	font-size: var(--fx-fs-sm);
	font-weight: 560;
	letter-spacing: -0.01em;
	white-space: nowrap; /* CTA labels never wrap */
	cursor: pointer;
	transition: background-color var(--fx-dur) var(--fx-ease),
		border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease),
		transform var(--fx-dur-fast) var(--fx-ease);
}

.fx-btn .fx-i {
	font-size: 1.15em;
	transition: transform var(--fx-dur) var(--fx-ease);
}

.fx-btn:hover .fx-i {
	transform: translateX(3px);
}

.fx-btn:active {
	transform: translateY(1px);
}

/* Primary: off-white ground, near-black label. Contrast 18.4:1.
   Kein reines Weiss, kein reines Schwarz. Das Cyan bleibt der Akzent fuer
   Eyebrows, Links, Kachel-Icons, Tags und die Lichtdeko, damit die
   Hauptaktion sich davon abhebt statt darin zu verschwinden. */
/*
 * Auf hell traegt die CTA das dunkle Marken-Tuerkis mit Off-White-Label
 * (7,2:1), auf den dunklen Bloecken Off-White mit fast schwarzem Label
 * (18,7:1). Gleiche Form, gleiches Label, an den Grund angepasst.
 */
.fx-btn--primary {
	background: var(--fx-accent-fill);
	color: var(--fx-accent-ink);
	font-weight: 620;
}

.fx-on-dark .fx-btn--primary {
	color: var(--fx-bg);
}

.fx-btn--primary:hover {
	background: var(--fx-accent-fill-hover);
}

/* Ghost: always carries a visible stroke so it reads on photography. */
.fx-btn--ghost {
	border-color: var(--fx-line-strong);
	background: var(--fx-glass);
	color: var(--fx-fg);
	backdrop-filter: blur(10px);
}

.fx-btn--ghost:hover {
	border-color: var(--fx-accent-line);
	background: rgb(61 250 255 / 0.1);
	color: var(--fx-fg);
}

.fx-btn--small {
	min-height: 2.5rem;
	padding: 0 1.1rem;
	font-size: var(--fx-fs-xs);
}

.fx-btn--block {
	width: 100%;
}

/* Text link with trailing chevron. */
.fx-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fx-fs-sm);
	font-weight: 560;
	color: var(--fx-accent);
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: border-color var(--fx-dur) var(--fx-ease);
}

.fx-link .fx-i {
	font-size: 1.1em;
	transition: transform var(--fx-dur) var(--fx-ease);
}

.fx-link:hover {
	border-color: var(--fx-accent-line);
}

.fx-link:hover .fx-i {
	transform: translate(3px, -3px);
}

/* Round icon-only control. */
.fx-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	border: 1px solid var(--fx-line-strong);
	border-radius: var(--fx-r-pill);
	background: var(--fx-card);
	color: var(--fx-fg);
	font-size: 1.15rem;
	cursor: pointer;
	transition: background-color var(--fx-dur) var(--fx-ease),
		border-color var(--fx-dur) var(--fx-ease), opacity var(--fx-dur) var(--fx-ease);
}

.fx-iconbtn:hover {
	border-color: var(--fx-accent-line);
	background: var(--fx-card-hover);
}

.fx-iconbtn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* ==========================================================================
   8. Navigation
   ========================================================================== */

.fx-nav-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.fx-nav {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: var(--fx-z-nav);
	display: flex;
	justify-content: center;
	padding: clamp(0.75rem, 2vw, 1.35rem) var(--fx-gutter);
	pointer-events: none; /* die Leiste selbst faengt keine Klicks ab */
	transition: padding var(--fx-dur-slow) var(--fx-ease);
}

.fx-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	max-width: var(--fx-shell);
	height: 4rem; /* 64px, under the 80px cap */
	padding: 0 0.5rem 0 1.35rem;
	pointer-events: auto;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-pill);
	background: var(--fx-glass);
	backdrop-filter: blur(14px) saturate(140%);
	transition: background-color var(--fx-dur-slow) var(--fx-ease),
		border-color var(--fx-dur-slow) var(--fx-ease), box-shadow var(--fx-dur-slow) var(--fx-ease);
}

.fx-nav.is-stuck .fx-nav__inner {
	background: var(--fx-glass-solid);
	border-color: var(--fx-line-strong);
	box-shadow: 0 18px 50px rgb(13 20 23 / 0.14);
	backdrop-filter: blur(18px) saturate(160%);
}

/* Ohne backdrop-filter traegt allein die Deckkraft. Dann muss sie reichen,
   sonst steht der Text der Sektion durch die Leiste hindurch. */
@supports not (backdrop-filter: blur(2px)) {
	.fx-nav__inner,
	.fx-nav.is-stuck .fx-nav__inner {
		background: var(--fx-glass-solid);
	}
}

/*
 * Ueber dem dunklen Hero traegt die Leiste keine Flaeche und liegt in
 * Dunkel-Tokens. Sobald sie klebt, steht sie ueber hellem Inhalt und kippt in
 * den hellen Zustand.
 *
 * Die Body-Klasse ist noetig, weil die Unterseiten kein dunkles Hero haben.
 * Ohne sie stuenden dort weisse Links auf hellem Grund.
 */
.fx--hero-dark .fx-nav:not(.is-stuck) .fx-nav__inner {
	color-scheme: dark;

	border-color: transparent;
	background: none;
	backdrop-filter: none;

	--fx-fg: #f7f7f8;
	--fx-fg-muted: #f7f7f8;
	--fx-accent: #3dfaff;
	--fx-accent-fill: #f7f7f8;
	--fx-accent-ink: #08080a;
	--fx-line-strong: rgb(255 255 255 / 0.16);
	--fx-glass: rgb(8 8 10 / 0.4);
}

/*
 * Wortmarke. Das PNG ist Marken-Cyan #3dfaff, das auf Papier nur 1,2:1 hat.
 * brightness(0.35) multipliziert die Kanaele und ergibt #155759, ein dunkles
 * Tuerkis mit 7,3:1. Ueber dem dunklen Hero macht brightness(0) invert(1)
 * jedes deckende Pixel weiss. Beide Male derselbe Alphakanal, keine zweite
 * Bilddatei noetig. Im Footer bleibt das Cyan unangetastet.
 */
.fx-brand img {
	filter: brightness(0.35);
}

.fx--hero-dark .fx-nav:not(.is-stuck) .fx-brand img {
	filter: brightness(0) invert(1);
}

.fx-brand {
	display: flex;
	align-items: center;
	flex: none;
}

.fx-brand img {
	width: auto;
	height: 2rem;
	transition: filter var(--fx-dur) var(--fx-ease);
}

@media (max-width: 480px) {
	.fx-brand img {
		height: 1.6rem;
	}
}

.fx-nav__menu {
	display: flex;
	align-items: center;
	margin-left: auto;
}

/* wp_nav_menu prints its own <ul>; the fallback prints the same shape. */
.fx-nav__menu ul {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.9rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-nav__menu a {
	position: relative;
	font-size: var(--fx-fs-sm);
	font-weight: 500;
	color: var(--fx-fg-muted);
	transition: color var(--fx-dur) var(--fx-ease);
}

.fx-nav__menu a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.4rem;
	height: 1px;
	background: var(--fx-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--fx-dur) var(--fx-ease);
}

.fx-nav__menu a:hover,
.fx-nav__menu .current-menu-item > a,
.fx-nav__menu [aria-current="page"] {
	color: var(--fx-fg);
}

.fx-nav__menu a:hover::after {
	transform: scaleX(1);
}

.fx-nav__end {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	flex: none;
}

.fx-nav__cta {
	flex: none;
}

.fx-nav__mute {
	background: transparent;
}

.fx-nav__toggle {
	display: none;
}

/* Mobile drawer */
.fx-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--fx-z-nav);
	display: grid;
	align-content: start;
	gap: 0.25rem;
	padding: 7rem var(--fx-gutter) 3rem;
	background: var(--fx-glass-solid);
	backdrop-filter: blur(20px);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--fx-dur) var(--fx-ease), visibility var(--fx-dur) var(--fx-ease);
}

.fx-drawer.is-open {
	opacity: 1;
	visibility: visible;
}

.fx-drawer a {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--fx-line);
	font-size: 1.35rem;
	font-weight: 560;
	letter-spacing: -0.02em;
}

.fx-drawer .fx-btn {
	margin-top: 1.75rem;
}

@media (max-width: 1023px) {
	.fx-nav__menu {
		display: none;
	}

	.fx-nav__cta {
		display: none;
	}

	.fx-nav__end {
		margin-left: auto;
	}

	.fx-nav__toggle {
		display: inline-flex;
		position: relative;
		z-index: calc(var(--fx-z-nav) + 1);
	}
}

@media (min-width: 1024px) {
	.fx-drawer {
		display: none;
	}
}

/* ==========================================================================
   9. Hero - asymmetric split, photography right, scrim left
   ========================================================================== */

.fx-hero {
	position: relative;
	display: flex;
	align-items: flex-end;

	min-height: min(100dvh, 60rem);
	padding-top: 6rem; /* clears the nav, stays at the pt-24 cap */
	padding-bottom: clamp(3rem, 7vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

.fx-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* display:contents laesst das <img> direktes Kind bleiben, damit die Regel
   darunter unveraendert greift. */
.fx-hero__media picture {
	display: contents;
}

/*
 * Das Video liegt ueber dem Standbild und wird erst eingeblendet, wenn es
 * wirklich laeuft. Ohne JavaScript, auf dem Handy oder bei blockiertem
 * Autoplay bleibt schlicht das Bild stehen.
 */
.fx-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 32%;
	opacity: 0;
	filter: brightness(1.2);
	transition: opacity 600ms var(--fx-ease);
}

.fx-hero__video.is-playing {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Scroll-Scrubbing
   --------------------------------------------------------------------------
   Die Scrollposition steuert die Videozeit. Umgesetzt mit echtem Scrollen,
   nicht mit einer Sperre: eine hohe Huelle, in der das Hero oben klebt.

   Warum nicht das Scrollen abfangen und in Videozeit umrechnen: das bricht
   Tastatur, Scrollbalken-Ziehen, Sprungmarken und Touch. So bleibt alles
   nativ, und wenn die Huelle durchgelaufen ist, scrollt die Seite weiter,
   ohne dass irgendetwas entsperrt werden muss.

   Die Hoehe setzt erst das JavaScript, ueber `is-active`. Ohne JavaScript,
   auf dem Handy oder bei prefers-reduced-motion bleibt das Hero ein normaler
   Abschnitt und niemand scrollt durch zweieinhalb leere Bildschirme.
   -------------------------------------------------------------------------- */

.fx-hero-scrub {
	position: relative;
}

.fx-hero-scrub.is-active {
	/*
	 * Die Hoehe ist das klebende Hero plus die Strecke, ueber die gescrubbt
	 * wird. Nur der Zuschlag bestimmt, wie weit man fuer das ganze Video
	 * scrollen muss, das Hero selbst laeuft ja mit.
	 *
	 * 80dvh sind bei einem 800 px hohen Fenster rund 640 px: genug, dass
	 * die Show sich anfuehlt, ohne die Seite zu sperren. Vorher 55dvh,
	 * davor 160dvh.
	 *
	 * Zum Nachjustieren genuegt dieser eine Wert.
	 */
	--fx-scrub-span: 80dvh;

	height: calc(100dvh + var(--fx-scrub-span));
}

.fx-hero-scrub.is-active .fx-hero {
	position: sticky;
	top: 0;
	height: 100dvh;
	min-height: 0;
}

/* Fortschritt. Nicht Dekoration, sondern Auskunft: Scrollen hat hier eine
   andere Wirkung als sonst, und der Balken zeigt, wann das vorbei ist. */
.fx-hero__progress {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 2;
	height: 3px;
	background: rgb(61 250 255 / 0.14);
	opacity: 0;
	transition: opacity var(--fx-dur) var(--fx-ease);
}

.fx-hero-scrub.is-active .fx-hero__progress {
	opacity: 1;
}

.fx-hero__progress span {
	position: relative;
	display: block;
	height: 100%;
	background: var(--fx-accent);
	transform: scaleX(var(--fx-scrub, 0));
	transform-origin: 0 50%;
	box-shadow: 0 0 14px rgb(61 250 255 / 0.45);
}

.fx-hero__progress span::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--fx-accent);
	transform: translate(50%, -50%);
	box-shadow: 0 0 10px var(--fx-accent);
}

/*
 * Cue: nur sichtbar, solange noch niemand gescrollt hat. Sitzt rechts unten,
 * nicht mittig unter der Headline, damit er nicht mit dem CTA konkurriert.
 */
.fx-hero__cue {
	position: absolute;
	right: var(--fx-gutter);
	bottom: 1.65rem;
	z-index: 3;
	display: none;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--fx-accent);
	pointer-events: none;
	opacity: 0;
}

.fx-hero-scrub.is-active .fx-hero__cue {
	display: inline-flex;
	animation: fx-cue-in 700ms var(--fx-ease) 1.05s both;
}

.fx-hero-scrub.is-scrolling .fx-hero__cue {
	opacity: 0;
	animation: none;
	transition: opacity 280ms var(--fx-ease);
}

.fx-hero__cue .fx-i {
	width: 0.95rem;
	height: 0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
	.fx-hero-scrub.is-active:not(.is-scrolling) .fx-hero__cue .fx-i {
		animation: fx-cue-bob 1.45s var(--fx-ease) infinite;
	}
}

@keyframes fx-cue-in {
	from {
		opacity: 0;
		transform: translate3d(0, 10px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes fx-cue-bob {
	0%,
	100% {
		transform: translate3d(0, 0, 0);
	}
	50% {
		transform: translate3d(0, 5px, 0);
	}
}

.fx-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 52% 32%;
}

/* Scrim: nur noch Nav-Streifen und ein Hauch unten. Die Lesbarkeit der
   Copy traegt ein lokaler Schatten hinter dem Text, nicht die ganze Buehne. */
.fx-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			to bottom,
			rgb(8 8 10 / 0.58) 0%,
			rgb(8 8 10 / 0.22) 4.5rem,
			transparent 9rem
		),
		linear-gradient(
			to top,
			rgb(8 8 10 / 0.28) 0%,
			transparent 18%
		);
}

.fx-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	width: 100%;
	max-width: var(--fx-shell);
	margin-inline: auto;
	padding-inline: var(--fx-gutter);
}

.fx-hero__copy {
	position: relative;
	grid-column: 1 / span 6;
	isolation: isolate;
}

.fx-hero__copy::before {
	content: "";
	position: absolute;
	inset: -18% -8% -28% -22%;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse 80% 90% at 18% 72%,
		rgb(8 8 10 / 0.78) 0%,
		rgb(8 8 10 / 0.42) 38%,
		transparent 72%
	);
}

.fx-hero .fx-display {
	max-width: 11ch;
	font-size: clamp(2.9rem, 8.4vw, 6.15rem);
	font-weight: 780;
	line-height: 0.92;
	letter-spacing: -0.055em;
	text-shadow: 0 2px 24px rgb(8 8 10 / 0.5);
}

.fx-hero__sub {
	margin-top: 1.35rem;
	max-width: 32ch;
	font-size: var(--fx-fs-lead);
	line-height: 1.5;
	color: rgb(247 247 248 / 0.88);
	text-shadow: 0 1px 18px rgb(8 8 10 / 0.7);
}

.fx-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2rem;
}

@media (max-width: 900px) {
	.fx-hero {
		/* Auf dem Handy laeuft der Hochkant-Zuschnitt, der hat das Problem
		   nicht. Dort darf der Hero wieder die volle Hoehe nehmen. */
		min-height: 100dvh;
		padding-bottom: clamp(3rem, 7vw, 5rem);
	}

	.fx-hero__copy {
		grid-column: 1 / -1;
	}

	.fx-hero .fx-display {
		max-width: 12ch;
		font-size: clamp(2.6rem, 11vw, 4.2rem);
	}

	.fx-hero__copy::before {
		inset: -8% -6% -18% -12%;
	}

	.fx-hero__media img {
		object-position: 50% 30%;
	}

	.fx-hero__scrim {
		background: linear-gradient(
			to top,
			var(--fx-bg) 0%,
			rgb(8 8 10 / 0.7) 32%,
			rgb(8 8 10 / 0.35) 62%,
			rgb(8 8 10 / 0.16) 100%
		);
	}

	.fx-hero__cue {
		display: none;
	}
}

/* ==========================================================================
   10. Fakten - inline hairline stat strip, no cards
   ========================================================================== */

.fx-facts {
	padding-block: clamp(2.25rem, 4vw, 3.25rem);
	border-top: 1px solid var(--fx-line);
	border-bottom: 1px solid var(--fx-line);
	background: var(--fx-surface);
}

.fx-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.fx-fact {
	display: grid;
	gap: 0.45rem;
	padding-left: clamp(1rem, 2vw, 1.75rem);
	border-left: 1px solid var(--fx-line);
}

.fx-facts__grid > .fx-fact:first-child {
	padding-left: 0;
	border-left: 0;
}

.fx-fact__value {
	color: var(--fx-accent);
	font-family: var(--fx-font-mono);
	font-size: clamp(1.85rem, 3.4vw, 2.9rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.fx-fact__label {
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
	max-width: 22ch;
}

@media (max-width: 780px) {
	.fx-facts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1.25rem;
	}

	.fx-facts__grid > .fx-fact:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

/* ==========================================================================
   11. Anlaesse - bento, exactly five cells (7+5 / 5+4+3)
   ========================================================================== */

.fx-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
}

.fx-tile {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(15rem, 28vw, 24rem);
	padding: clamp(1.5rem, 2.6vw, 2.35rem);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	overflow: hidden;
	isolation: isolate;
	color: var(--fx-fg);
}

.fx-tile:nth-child(1) {
	grid-column: span 7;
}
.fx-tile:nth-child(2) {
	grid-column: span 5;
}
.fx-tile:nth-child(3) {
	grid-column: span 5;
}
.fx-tile:nth-child(4) {
	grid-column: span 4;
}
.fx-tile:nth-child(5) {
	grid-column: span 3;
}

.fx-tile__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--fx-ease);
}

.fx-tile:hover .fx-tile__img {
	transform: scale(1.06);
}

.fx-tile__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		to top,
		rgb(8 8 10 / 0.96) 0%,
		rgb(8 8 10 / 0.88) 38%,
		rgb(8 8 10 / 0.4) 68%,
		transparent 100%
	);
}

/* Non-photo cells: brand-tinted grounds and a pattern, so the grid is not
   five identical text boxes. */
.fx-tile--wash {
	background: radial-gradient(115% 115% at 12% 0%, rgb(61 250 255 / 0.26) 0%, rgb(61 250 255 / 0.05) 45%, transparent 66%),
		var(--fx-card);
}

.fx-tile--deep {
	background: radial-gradient(130% 130% at 100% 100%, rgb(21 119 155 / 0.4) 0%, transparent 60%),
		var(--fx-card);
}

.fx-tile--grid {
	background-color: var(--fx-card);
	background-image: linear-gradient(var(--fx-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--fx-line) 1px, transparent 1px);
	background-size: 34px 34px;
	background-position: center;
}

.fx-tile--grid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0; /* der Kachel-Hintergrund liegt darunter, nicht darueber */
	background: radial-gradient(90% 90% at 50% 110%, rgb(61 250 255 / 0.14) 0%, transparent 62%);
}

.fx-tile__body {
	position: relative;
	display: grid;
	gap: 0.55rem;
}

.fx-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.75rem;
	border: 1px solid var(--fx-accent-line);
	border-radius: var(--fx-r-pill);
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
	font-size: 1.15rem;
}

.fx-tile__text {
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
	max-width: 34ch;
}

.fx-tile--photo .fx-tile__text {
	color: rgb(247 247 248 / 0.78);
}

@media (max-width: 980px) {
	.fx-tile:nth-child(1),
	.fx-tile:nth-child(2),
	.fx-tile:nth-child(3) {
		grid-column: span 12;
	}
	.fx-tile:nth-child(4),
	.fx-tile:nth-child(5) {
		grid-column: span 6;
	}
}

@media (max-width: 620px) {
	.fx-tile {
		grid-column: span 12 !important;
		min-height: 14rem;
	}
}

/* ==========================================================================
   12. Besetzung - horizontal scroll-snap rail
   ========================================================================== */

.fx-rail {
	position: relative;
}

.fx-rail__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: clamp(14rem, 22vw, 19rem);
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--fx-gutter);
	padding-inline: var(--fx-gutter);
	padding-bottom: 0.5rem;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.fx-rail__track::-webkit-scrollbar {
	display: none;
}

/* The rail deliberately bleeds past the shell on both sides. */
.fx-rail--bleed .fx-rail__track {
	/* Beide Werte muessen identisch sein. Weichen sie ab, rastet der Snap um
	   die Differenz ein, die Schiene startet also nicht bei 0 und der
	   Zurueck-Pfeil bleibt faelschlich aktiv. */
	--fx-rail-pad: max(var(--fx-gutter), calc(50vw - var(--fx-shell) / 2 + var(--fx-gutter)));

	padding-inline: var(--fx-rail-pad);
	scroll-padding-inline: var(--fx-rail-pad);
}

.fx-member {
	scroll-snap-align: start;
}

.fx-member__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--fx-r-lg);
	overflow: hidden;
	background: var(--fx-card);
	border: 1px solid var(--fx-line);
}

.fx-member__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 22%;
	filter: grayscale(0.22) contrast(1.04);
	transition: transform var(--fx-dur-slow) var(--fx-ease), filter var(--fx-dur-slow) var(--fx-ease);
}

.fx-member:hover .fx-member__frame img {
	transform: scale(1.05);
	filter: grayscale(0) contrast(1.06);
}

.fx-member__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
}

.fx-member__name {
	font-size: 1.05rem;
	font-weight: 560;
	letter-spacing: -0.02em;
}

.fx-member__role {
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-xs);
	color: var(--fx-fg-dim);
	text-align: right;
}

.fx-rail__controls {
	display: flex;
	gap: 0.5rem;
}

@media (max-width: 700px) {
	.fx-rail__controls {
		display: none;
	}

	.fx-rail__track {
		grid-auto-columns: 72vw;
	}
}

/* ==========================================================================
   13. Video gallery - stage player + fanned card deck
   ========================================================================== */

.fx-stage {
	display: grid;
	justify-items: center;
	gap: 1.5rem;
}

.fx-stage__frame {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	overflow: hidden;
	border-radius: var(--fx-r-lg);
	border: 1px solid var(--fx-line);
	background: #050507;
}

.fx-stage__frame.is-portrait {
	width: min(100%, 22rem);
	aspect-ratio: 9 / 16;
	max-height: min(48dvh, 26rem);
}

.fx-stage__frame.is-landscape {
	aspect-ratio: 16 / 9;
	max-height: min(48dvh, 30rem);
	min-height: 0;
}

.fx-stage__poster,
.fx-stage__video,
.fx-stage__yt,
.fx-stage__yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.fx-stage__video[hidden],
.fx-stage__poster[hidden],
.fx-stage__yt[hidden] {
	display: none !important;
}

.fx-stage__play {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 100%;
	border: 0;
	background: rgb(8 8 10 / 0.28);
	color: var(--fx-fg);
	cursor: pointer;
}

.fx-stage__play[hidden] {
	display: none !important;
}

.fx-stage__play-icon {
	display: grid;
	place-items: center;
	width: clamp(4rem, 8vw, 5.25rem);
	height: clamp(4rem, 8vw, 5.25rem);
	padding-left: 0.15em;
	border-radius: var(--fx-r-pill);
	background: var(--fx-accent);
	color: var(--fx-accent-ink);
	font-size: 1.75rem;
	box-shadow: 0 0 0 1px rgb(61 250 255 / 0.5), 0 20px 60px rgb(61 250 255 / 0.22);
	transition: transform var(--fx-dur) var(--fx-ease);
}

.fx-stage__play-icon .fx-i {
	width: 1.35em;
	height: 1.35em;
}

.fx-stage__play:hover .fx-stage__play-icon {
	transform: scale(1.06);
}

.fx-stage__now {
	margin: 0;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-xs);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-fg-muted);
}

.fx-arch {
	--card-w: 180px;
	--card-h: 240px;
	position: relative;
	margin-inline: auto;
}

.fx-arch__card {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--card-w);
	height: var(--card-h);
	margin-left: calc(var(--card-w) / -2);
	margin-top: calc(var(--card-h) / -2);
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: var(--fx-r-md);
	background: #111318;
	box-shadow: 0 12px 28px rgb(0 0 0 / 0.28), 0 2px 8px rgb(0 0 0 / 0.16);
	cursor: pointer;
	transform-origin: center center;
	transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
	z-index: var(--z);
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow var(--fx-dur) var(--fx-ease), z-index 0ms;
}

.fx-arch__card img {
	pointer-events: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	user-select: none;
}

.fx-arch__card:hover,
.fx-arch__card:focus-visible {
	transform: translate(var(--x), calc(var(--y) - 16px)) rotate(0deg) scale(1.08);
	z-index: 40;
}

.fx-arch__card.is-active {
	box-shadow:
		0 0 0 2px var(--fx-accent),
		0 12px 28px rgb(0 0 0 / 0.28);
}

.fx-arch__card:focus-visible {
	outline: 2px solid var(--fx-accent);
	outline-offset: 3px;
}

.fx-reel__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.25rem;
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
}

@media (max-width: 800px) {
	.fx-arch {
		display: flex;
		width: 100% !important;
		height: auto !important;
		gap: 0.7rem;
		padding: 0.25rem 0 0.5rem;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}

	.fx-arch__card {
		position: relative;
		left: auto;
		top: auto;
		flex: 0 0 132px;
		width: 132px;
		height: 176px;
		margin: 0;
		transform: none !important;
		scroll-snap-align: start;
		z-index: 1 !important;
	}
}

/* ==========================================================================
   14. Playlist - marquee (the only one on the page)
   ========================================================================== */

.fx-marquee {
	position: relative;
	display: grid;
	gap: clamp(0.65rem, 1.2vw, 1rem);
	padding-block: clamp(1rem, 2vw, 1.75rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.fx-marquee__row {
	display: flex;
	width: max-content;
	gap: clamp(0.65rem, 1.2vw, 1rem);
	animation: fx-marquee 78s linear infinite;
	will-change: transform;
}

.fx-marquee__row:nth-child(2) {
	animation-duration: 96s;
	animation-direction: reverse;
}

.fx-marquee:hover .fx-marquee__row {
	animation-play-state: paused;
}

.fx-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 1.15rem;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-pill);
	background: var(--fx-card);
	box-shadow: var(--fx-card-shadow);
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
	white-space: nowrap;
}

.fx-chip .fx-i {
	font-size: 0.9em;
	color: var(--fx-accent);
	opacity: 0.7;
}

@keyframes fx-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.fx-playlist__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

/* Full repertoire list, grouped into columns (page template) */
.fx-songs {
	columns: 3 16rem;
	column-gap: clamp(1.5rem, 3vw, 3rem);
}

.fx-songs li {
	break-inside: avoid;
	padding: 0.55rem 0;
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
}

.fx-sheet {
	width: min(52rem, calc(100vw - 2 * var(--fx-gutter)));
	max-height: min(86dvh, 52rem);
	margin: auto;
	padding: 0;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	background: var(--fx-bg);
	color: var(--fx-fg);
	box-shadow: 0 24px 80px rgb(0 0 0 / 0.45);
}

.fx-sheet::backdrop {
	background: rgb(8 8 10 / 0.72);
	backdrop-filter: blur(8px);
}

.fx-sheet__bar {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.35rem 1.5rem 0;
}

.fx-sheet__bar .fx-h3 {
	margin: 0;
}

.fx-sheet__bar .fx-body-muted {
	margin: 0.35rem 0 0;
}

.fx-sheet__find {
	display: block;
	padding: 1rem 1.5rem 0.75rem;
}

.fx-sheet__find input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--fx-line-strong);
	border-radius: var(--fx-r-sm);
	background: var(--fx-surface);
	color: var(--fx-fg);
	font: inherit;
	font-size: var(--fx-fs-sm);
}

.fx-sheet__find input::placeholder {
	color: var(--fx-placeholder);
}

.fx-sheet__scroller {
	overflow: auto;
	max-height: min(58dvh, 36rem);
	padding: 0 1.5rem 1.5rem;
}

.fx-sheet__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--fx-fs-sm);
}

.fx-sheet__table th,
.fx-sheet__table td {
	padding: 0.7rem 0.75rem 0.7rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--fx-line);
}

.fx-sheet__table th {
	position: sticky;
	top: 0;
	background: var(--fx-bg);
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fx-fg-muted);
}

.fx-sheet__table th:first-child,
.fx-sheet__table td:first-child {
	width: 3.25rem;
	color: var(--fx-fg-muted);
}

.fx-sheet__table td:nth-child(2) {
	font-weight: 560;
	letter-spacing: -0.015em;
}

.fx-sheet__table td:nth-child(3) {
	color: var(--fx-fg-muted);
}

.fx-sheet__table tr[hidden] {
	display: none;
}


/* ==========================================================================
   15. Ablauf - numbered vertical rhythm
   ========================================================================== */

.fx-steps {
	display: grid;
	gap: 0;
	max-width: 62rem;
}

.fx-step {
	display: grid;
	grid-template-columns: clamp(4.5rem, 9vw, 7.5rem) 1fr;
	gap: clamp(1.25rem, 3vw, 2.75rem);
	padding-block: clamp(1.75rem, 3.4vw, 2.9rem);
	border-top: 1px solid var(--fx-line);
	align-items: start;
}

.fx-step:last-child {
	border-bottom: 1px solid var(--fx-line);
}

.fx-step__n {
	font-family: var(--fx-font-mono);
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: -0.05em;
	color: var(--fx-numeral);
	transition: color var(--fx-dur-slow) var(--fx-ease);
}

.fx-step:hover .fx-step__n {
	color: var(--fx-accent);
}

/* Traegt die Zahl echte Information statt nur Zaehlung, muss sie lesbar sein. */
.fx-step__n--data {
	color: var(--fx-fg-muted);
	font-size: clamp(1.1rem, 1.8vw, 1.5rem);
}

.fx-step__body {
	display: grid;
	gap: 0.6rem;
}

.fx-step__body p {
	color: var(--fx-fg-muted);
	max-width: 58ch;
}

/* Sterne. Bernstein, wie man es von Bewertungen kennt. Der Wert kommt pro
   Bewertung aus dem Backend, nicht aus einer Pauschale. */
.fx-stars {
	display: inline-flex;
	gap: 0.1rem;
	font-size: 0.85rem;
	/* --fx-star, nicht --fx-hue-amber: auf Papier braucht Bernstein einen
	   dunkleren Ton, sonst sind es 1,8:1 statt der noetigen 3:1. */
	color: var(--fx-star);
}

/* Der Schein passt nur auf dunklem Grund, auf Papier waere er Schmutz. */
.fx-on-dark .fx-stars .fx-i {
	filter: drop-shadow(0 0 5px rgb(255 179 71 / 0.32));
}

/* ==========================================================================
   16. Stimmen - drei laufende Reihen echter Google-Bewertungen
   --------------------------------------------------------------------------
   Reihe 1 laeuft nach links, Reihe 2 nach rechts, Reihe 3 nach links.

   Die Dauer haengt an der Kartenzahl der Reihe (--fx-wall-n), damit alle
   Reihen mit derselben Geschwindigkeit laufen. Waeren die Dauern gleich,
   liefe eine Reihe mit vier Karten schneller als eine mit drei.
   ========================================================================== */

.fx-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem;
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.fx-topics__label {
	margin-right: 0.35rem;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fx-fg-dim);
}

.fx-topics .fx-chip {
	gap: 0.45rem;
}

/* --- Die Wand --- */

.fx-wall {
	display: grid;
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.fx-wall__row {
	display: flex;
	width: max-content;
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
	will-change: transform;
}

/* --- Karte --- */

.fx-review {
	display: grid;
	gap: 1.25rem;
	align-content: space-between;
	width: clamp(16rem, 24vw, 20rem);
	flex: none;
	margin: 0;
	padding: clamp(1.35rem, 2vw, 1.75rem);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	background: var(--fx-card);
	transition: border-color var(--fx-dur) var(--fx-ease),
		background-color var(--fx-dur) var(--fx-ease);
	box-shadow: var(--fx-card-shadow);
}

.fx-review:hover {
	border-color: var(--fx-accent-line);
	background: var(--fx-card-hover);
}

.fx-review__text {
	margin: 0;
	font-size: var(--fx-fs-sm);
	line-height: 1.55;
	letter-spacing: -0.01em;
	text-wrap: pretty;
}

.fx-review__foot {
	display: flex;
	align-items: center;
	gap: 0.7rem;
}

.fx-avatar {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	flex: none;
	border: 1px solid var(--fx-line-strong);
	border-radius: var(--fx-r-pill);
	background: linear-gradient(140deg, var(--fx-well), var(--fx-surface));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07);
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-xs);
	letter-spacing: 0;
	color: var(--fx-fg);
}

.fx-review__who {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
	font-size: var(--fx-fs-xs);
	line-height: 1.4;
}

.fx-review__who strong {
	font-size: var(--fx-fs-sm);
	font-weight: 560;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-review__who span {
	color: var(--fx-fg-dim);
}

.fx-review__src {
	display: grid;
	place-items: center;
	width: 1.6rem;
	height: 1.6rem;
	flex: none;
	margin-left: auto;
	font-size: 0.95rem;
	color: var(--fx-fg-dim);
}

@media (prefers-reduced-motion: no-preference) {
	/* 27 Sekunden pro Karte: langsam, wie gewuenscht. */
	.fx-wall__row {
		animation: fx-wall-left calc(var(--fx-wall-n, 4) * 27s * var(--fx-wall-pace, 1)) linear infinite;
		animation-delay: var(--fx-wall-offset, 0s);
	}

	.fx-wall__row--right {
		animation-name: fx-wall-right;
	}

	.fx-wall:hover .fx-wall__row {
		animation-play-state: paused;
	}
}

@keyframes fx-wall-left {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

@keyframes fx-wall-right {
	from {
		transform: translate3d(-50%, 0, 0);
	}
	to {
		transform: translate3d(0, 0, 0);
	}
}

/* ==========================================================================
   17. Termine - date cards
   ========================================================================== */

.fx-dates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: clamp(0.75rem, 1.4vw, 1.15rem);
}

.fx-date {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(1.25rem, 2.4vw, 2rem);
	padding: clamp(1.5rem, 2.4vw, 2.1rem);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	background: var(--fx-card);
	transition: border-color var(--fx-dur-slow) var(--fx-ease),
		transform var(--fx-dur-slow) var(--fx-ease);
	box-shadow: var(--fx-card-shadow);
}

.fx-date:hover {
	border-color: var(--fx-accent-line);
	transform: translateY(-3px);
}

.fx-date__stamp {
	display: grid;
	gap: 0.1rem;
	justify-items: center;
	align-content: start;
	padding: 0.9rem 1rem;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-md);
	background: var(--fx-surface);
	font-family: var(--fx-font-mono);
	min-width: 5rem;
}

.fx-date__day {
	font-size: 1.75rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.04em;
}

.fx-date__month {
	font-size: var(--fx-fs-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fx-accent);
}

.fx-date__year {
	font-size: var(--fx-fs-label);
	color: var(--fx-fg-dim);
}

.fx-date__body {
	display: grid;
	gap: 0.5rem;
	align-content: start;
}

.fx-date__where {
	display: grid;
	gap: 0.25rem;
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
}

.fx-date__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.35rem;
}

.fx-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-pill);
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	letter-spacing: 0.02em;
	color: var(--fx-fg-muted);
}

.fx-tag--accent {
	border-color: var(--fx-accent-line);
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

.fx-date__actions {
	margin-top: 0.6rem;
}

.fx-empty {
	display: grid;
	gap: 1.25rem;
	justify-items: start;
	padding: clamp(2rem, 4vw, 3.5rem);
	border: 1px dashed var(--fx-line-strong);
	border-radius: var(--fx-r-lg);
	background: var(--fx-surface);
}

.fx-empty__icon {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: var(--fx-r-pill);
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
	font-size: 1.4rem;
}

/* ==========================================================================
   18. Veranstalter - split with download panel
   ========================================================================== */

.fx-split {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

.fx-checks {
	display: grid;
	gap: 0.9rem;
	margin-top: 2rem;
}

.fx-checks li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	align-items: start;
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
}

.fx-checks .fx-i {
	margin-top: 0.28em;
	color: var(--fx-accent);
	font-size: 1.05em;
}

.fx-panel {
	display: grid;
	gap: 1rem;
	padding: clamp(1.6rem, 2.6vw, 2.35rem);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	background: radial-gradient(130% 100% at 100% 0%, rgb(61 250 255 / 0.1) 0%, transparent 55%),
		var(--fx-card);
	box-shadow: var(--fx-card-shadow);
}

.fx-panel__title {
	font-size: var(--fx-fs-sm);
	font-weight: 560;
}

.fx-dl {
	display: grid;
	gap: 0.5rem;
}

.fx-dl a {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.85rem;
	align-items: center;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-md);
	background: var(--fx-surface);
	font-size: var(--fx-fs-sm);
	transition: border-color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease);
}

.fx-dl a:hover {
	border-color: var(--fx-accent-line);
	background: var(--fx-card-hover);
}

.fx-dl .fx-i:first-child {
	color: var(--fx-accent);
	font-size: 1.15em;
}

.fx-dl__meta {
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	color: var(--fx-fg-dim);
}

@media (max-width: 900px) {
	.fx-split {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   19. FAQ - native details accordion, CSS-only animation
   ========================================================================== */

.fx-faq {
	max-width: 56rem;
}

.fx-faq details {
	border-top: 1px solid var(--fx-line);
}

.fx-faq details:last-of-type {
	border-bottom: 1px solid var(--fx-line);
}

.fx-faq summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1.5rem;
	align-items: center;
	padding: clamp(1.15rem, 2vw, 1.6rem) 0;
	font-size: clamp(1.02rem, 1.5vw, 1.2rem);
	font-weight: 560;
	letter-spacing: -0.02em;
	cursor: pointer;
	list-style: none;
	transition: color var(--fx-dur) var(--fx-ease);
}

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

.fx-faq summary:hover {
	color: var(--fx-accent);
}

.fx-faq__sign {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	flex: none;
	border: 1px solid var(--fx-line-strong);
	border-radius: var(--fx-r-pill);
	color: var(--fx-fg-muted);
	font-size: 0.85rem;
	transition: transform var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease),
		color var(--fx-dur) var(--fx-ease);
}

.fx-faq details[open] .fx-faq__sign {
	transform: rotate(45deg);
	border-color: var(--fx-accent-line);
	color: var(--fx-accent);
}

.fx-faq__a {
	padding-bottom: clamp(1.15rem, 2vw, 1.6rem);
	color: var(--fx-fg-muted);
	max-width: 68ch;
}

/* Progressive enhancement: animates where ::details-content is supported,
   snaps open everywhere else. */
@supports selector(details::details-content) {
	:root {
		interpolate-size: allow-keywords;
	}

	.fx-faq details::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size var(--fx-dur) var(--fx-ease),
			content-visibility var(--fx-dur) allow-discrete;
	}

	.fx-faq details[open]::details-content {
		block-size: auto;
	}
}

/* ==========================================================================
   20. CTA panel
   ========================================================================== */

.fx-cta {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 1.25rem;
	padding: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 5rem);
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

.fx-cta__img {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
}

.fx-cta__veil {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(8 8 10 / 0.94) 0%, rgb(8 8 10 / 0.7) 45%, rgb(8 8 10 / 0.5) 100%);
}

.fx-cta .fx-h2 {
	max-width: 24ch;
}

.fx-cta .fx-lead {
	max-width: 46ch;
	margin-inline: auto;
}

.fx-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 1rem;
}

/* ==========================================================================
   21. Contact form
   ========================================================================== */

.fx-form {
	display: grid;
	gap: 1.15rem;
	max-width: 34rem;
}

.fx-field {
	display: grid;
	gap: 0.5rem;
}

.fx-field label {
	font-size: var(--fx-fs-sm);
	font-weight: 500;
	color: var(--fx-fg);
}

.fx-field input,
.fx-field textarea,
.fx-field select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--fx-line-strong);
	border-radius: var(--fx-r-sm);
	background: var(--fx-surface);
	color: var(--fx-fg);
	font-size: var(--fx-fs-sm);
	transition: border-color var(--fx-dur) var(--fx-ease), background-color var(--fx-dur) var(--fx-ease);
}

/* Kontrast pro Grund im Token, siehe Abschnitt 2. */
.fx-field ::placeholder {
	color: var(--fx-placeholder);
	opacity: 1;
}

.fx-field input:focus,
.fx-field textarea:focus,
.fx-field select:focus {
	border-color: var(--fx-accent-line);
	background: var(--fx-card);
	outline: 2px solid var(--fx-accent);
	outline-offset: 1px;
}

.fx-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.fx-field__hint {
	font-size: var(--fx-fs-xs);
	color: var(--fx-fg-muted);
}

.fx-field__error {
	font-size: var(--fx-fs-xs);
	color: var(--fx-error);
}

.fx-field.has-error input,
.fx-field.has-error textarea {
	border-color: var(--fx-error);
}

.fx-form__note {
	font-size: var(--fx-fs-xs);
	color: var(--fx-fg-muted);
	max-width: 46ch;
}

.fx-form__note a {
	color: var(--fx-accent);
	border-bottom: 1px solid var(--fx-accent-line);
}

.fx-notice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.85rem;
	padding: 1rem 1.15rem;
	border: 1px solid var(--fx-accent-line);
	border-radius: var(--fx-r-md);
	background: var(--fx-accent-soft);
	font-size: var(--fx-fs-sm);
}

.fx-notice .fx-i {
	margin-top: 0.2em;
	color: var(--fx-accent);
}

/* Loading state: skeleton matching the final shape, never a spinner. */
.fx-btn.is-loading {
	pointer-events: none;
	opacity: 0.7;
}

.fx-skeleton {
	border-radius: var(--fx-r-sm);
	background: linear-gradient(90deg, var(--fx-card) 0%, var(--fx-card-hover) 50%, var(--fx-card) 100%);
	background-size: 200% 100%;
	animation: fx-shimmer 1.4s var(--fx-ease-inout) infinite;
}

@keyframes fx-shimmer {
	from {
		background-position: 200% 0;
	}
	to {
		background-position: -200% 0;
	}
}

/* ==========================================================================
   22. Footer
   ========================================================================== */

.fx-footer {
	position: relative;
	isolation: isolate;
	padding-top: clamp(4rem, 8vw, 7rem);
	padding-bottom: 2rem;
	border-top: 1px solid var(--fx-line);
	background: var(--fx-surface);
	overflow: hidden;
}

.fx-footer__mark {
	position: absolute;
	inset-inline: 0;
	top: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
	user-select: none;
	opacity: 0.016;
}

.fx-footer__mark span {
	font-size: 21vw;
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.06em;
	white-space: nowrap;
}

.fx-footer__card {
	margin-top: 1.75rem;
}

.fx-footer__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
}

.fx-footer__brand img {
	width: auto;
	height: 2.1rem;
	margin-bottom: 1.25rem;
}

.fx-footer__brand p {
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
	max-width: 32ch;
}

.fx-footer__col h3 {
	margin-bottom: 1.1rem;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fx-fg-dim);
}

.fx-footer__col ul {
	display: grid;
	gap: 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fx-footer__col a {
	font-size: var(--fx-fs-sm);
	color: var(--fx-fg-muted);
	transition: color var(--fx-dur) var(--fx-ease);
}

.fx-footer__col a:hover {
	color: var(--fx-accent);
}

.fx-social {
	display: flex;
	gap: 0.5rem;
	margin-top: 1.75rem;
}

.fx-social a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-pill);
	color: var(--fx-fg-muted);
	font-size: 1.05rem;
	transition: border-color var(--fx-dur) var(--fx-ease), color var(--fx-dur) var(--fx-ease),
		background-color var(--fx-dur) var(--fx-ease);
}

.fx-social a:hover {
	border-color: var(--fx-accent-line);
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

.fx-footer__bar {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: 1.75rem;
	border-top: 1px solid var(--fx-line);
	font-size: var(--fx-fs-xs);
	color: var(--fx-fg-dim);
}

.fx-footer__bar nav {
	display: flex;
	flex-wrap: wrap;
	gap: 1.35rem;
}

.fx-footer__bar a:hover {
	color: var(--fx-fg);
}

@media (max-width: 900px) {
	.fx-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.fx-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.fx-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   23. Page hero (inner pages)
   ========================================================================== */

.fx-pagehead {
	padding-top: clamp(8rem, 14vw, 11rem);
	padding-bottom: clamp(2.5rem, 5vw, 4rem);
	border-bottom: 1px solid var(--fx-line);
}

.fx-crumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.35rem;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fx-fg-dim);
}

.fx-crumb a:hover {
	color: var(--fx-accent);
}

/* Editor content (Gutenberg output inside .fx-prose) */
.fx-prose {
	max-width: 68ch;
}

.fx-prose > * + * {
	margin-top: 1.15rem;
}

.fx-prose h2 {
	margin-top: 2.75rem;
	font-size: var(--fx-fs-h2);
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.12;
}

.fx-prose h3 {
	margin-top: 2rem;
	font-size: var(--fx-fs-h3);
	font-weight: 560;
	letter-spacing: -0.02em;
}

.fx-prose p,
.fx-prose li {
	color: var(--fx-fg-muted);
}

.fx-prose a {
	color: var(--fx-accent);
	border-bottom: 1px solid var(--fx-accent-line);
}

.fx-prose ul,
.fx-prose ol {
	padding-left: 1.35rem;
	display: grid;
	gap: 0.5rem;
}

.fx-prose img,
.fx-prose figure img {
	border-radius: var(--fx-r-md);
}

.fx-prose blockquote {
	padding-left: 1.35rem;
	border-left: 2px solid var(--fx-accent-line);
	font-size: 1.15rem;
	letter-spacing: -0.02em;
}

/* WordPress alignment + caption classes */
.alignright {
	float: right;
	margin: 0 0 1.25rem 1.5rem;
}

.alignleft {
	float: left;
	margin: 0 1.5rem 1.25rem 0;
}

.aligncenter {
	margin-inline: auto;
}

.wp-caption-text,
.fx-prose figcaption {
	margin-top: 0.6rem;
	font-size: var(--fx-fs-xs);
	color: var(--fx-fg-dim);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

/* ==========================================================================
   24. Dekorationsebene: Buehnenlicht
   --------------------------------------------------------------------------
   Bewegte Objekte an den Sektionsraendern, wie in der Referenz. Statt
   Blumen ist das Material hier das Gewerk der Band: Lichtkegel, Glow aus
   den Scheinwerfern, ein Pegelmesser und ein Bandfoto als Lichtgeist.

   Alle Orbs sind reine radiale Gradienten ohne filter:blur. Ein animiertes
   blur() erzwingt in jedem Frame ein Neu-Rastern und kostet auf Mobilgeraeten
   spuerbar Bilder pro Sekunde. Der weiche Verlauf sieht gleich aus und
   animiert rein auf dem Compositor.
   ========================================================================== */

/*
 * Nur auf dunklen Bloecken. Weisse Lichtkegel verschwinden auf Papier, und
 * mix-blend-mode: screen mischt gegen Weiss zu Weiss, der Lichtgeist waere
 * unsichtbar. Helle Abschnitte holen ihre Farbe stattdessen aus einer weichen
 * Grundflaeche, siehe .fx-section--wash.
 */
.fx-deco {
	display: none;
	position: absolute;
	inset: 0;
	/* Bewusst ohne z-index: das wuerde einen Stapelkontext eroeffnen und
	   mix-blend-mode des Lichtgeists gegen Transparenz mischen lassen.
	   overflow:hidden allein tut das nicht. Der Inhalt wird stattdessen
	   ueber die Regel darunter angehoben. */
	overflow: hidden;
	pointer-events: none;
	user-select: none;
}

/* Sektionen mit Deko klemmen den Ueberhang ab und heben ihren Inhalt an. */
.fx-section--deco {
	overflow: hidden;
}

.fx-section--deco > *:not(.fx-deco) {
	position: relative;
	z-index: 1;
}

.fx-on-dark .fx-deco {
	display: block;
}

/*
 * Ersatz fuer helle Abschnitte: eine ruhige, unbewegte Farbflaeche aus dem
 * Buehnenlicht. Kein Blendmodus, keine Animation, damit auf Papier nichts
 * flimmert.
 */
.fx-section--wash {
	background-image: radial-gradient(
			110% 85% at 6% 0%,
			color-mix(in srgb, var(--fx-wash, var(--fx-hue-cyan)) 34%, transparent) 0%,
			color-mix(in srgb, var(--fx-wash, var(--fx-hue-cyan)) 9%, transparent) 42%,
			transparent 68%
		),
		radial-gradient(
			95% 85% at 100% 100%,
			color-mix(in srgb, var(--fx-wash-2, var(--fx-hue-magenta)) 26%, transparent) 0%,
			color-mix(in srgb, var(--fx-wash-2, var(--fx-hue-magenta)) 7%, transparent) 45%,
			transparent 72%
		);
}

.fx-section--wash.fx-section--tint {
	background-color: var(--fx-surface);
}

/* --- Glow aus den Scheinwerfern --- */
.fx-orb {
	position: absolute;
	width: min(46vw, 620px);
	aspect-ratio: 1;
	border-radius: 50%;
	/* Fallback fuer Browser ohne color-mix: einfarbiges Cyan statt gar nichts.
	   Ein ungueltiger Farbwert wuerde den ganzen Gradienten verwerfen. */
	background: radial-gradient(
		circle at 50% 50%,
		rgb(61 250 255 / 0.28) 0%,
		rgb(61 250 255 / 0.1) 38%,
		transparent 68%
	);
	background: radial-gradient(
		circle at 50% 50%,
		color-mix(in srgb, var(--fx-deco-hue, var(--fx-hue-cyan)) 30%, transparent) 0%,
		color-mix(in srgb, var(--fx-deco-hue, var(--fx-hue-cyan)) 11%, transparent) 38%,
		transparent 68%
	);
	will-change: transform;
}

/* Pro Sektion eine andere Scheinwerferfarbe. */
.fx-deco--cyan { --fx-deco-hue: var(--fx-hue-cyan); }
.fx-deco--blue { --fx-deco-hue: var(--fx-hue-blue); }
.fx-deco--violet { --fx-deco-hue: var(--fx-hue-violet); }
.fx-deco--magenta { --fx-deco-hue: var(--fx-hue-magenta); }
.fx-deco--amber { --fx-deco-hue: var(--fx-hue-amber); }

.fx-orb--a {
	left: -16vw;
	top: -12vw;
}

.fx-orb--b {
	right: -18vw;
	bottom: -14vw;
	width: min(52vw, 720px);
}

.fx-orb--center {
	left: 50%;
	top: 50%;
	width: min(70vw, 900px);
	translate: -50% -50%;
	opacity: 0.55;
}

/* --- Lichtkegel --- */
.fx-beam {
	position: absolute;
	top: -30%;
	width: min(30vw, 380px);
	height: 160%;
	transform-origin: 50% 0;
	background: linear-gradient(
		92deg,
		transparent 0%,
		rgb(255 255 255 / 0.05) 42%,
		rgb(255 255 255 / 0.08) 52%,
		transparent 100%
	);
	will-change: transform;
}

.fx-beam--a {
	left: 4vw;
	rotate: -9deg;
}

.fx-beam--b {
	right: 2vw;
	rotate: 11deg;
	width: min(24vw, 300px);
}

/* --- Pegelmesser. Sieben Balken, jeder mit eigenem Takt. --- */
.fx-eq {
	position: absolute;
	right: clamp(0.75rem, 2vw, 2rem);
	bottom: 0;
	display: flex;
	align-items: flex-end;
	gap: 0.4rem;
	height: clamp(6rem, 15vw, 12rem);
}

.fx-eq span {
	display: block;
	width: 0.3rem;
	height: 100%;
	border-radius: var(--fx-r-pill);
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--fx-deco-hue, var(--fx-hue-cyan)) 5%, transparent),
		color-mix(in srgb, var(--fx-deco-hue, var(--fx-hue-cyan)) 55%, transparent)
	);
	transform: scaleY(0.28);
	transform-origin: 50% 100%;
}

/* --- Bandfoto als Lichtgeist. screen laesst den schwarzen Buehnenhintergrund
       verschwinden und behaelt nur Menschen und Scheinwerfer. --- */
.fx-ghost {
	position: absolute;
	width: min(62vw, 780px);
	height: auto;
	opacity: 0.12;
	mix-blend-mode: screen;
	will-change: transform;
}

.fx-ghost--left {
	left: -18vw;
	top: 6%;
}

.fx-ghost--right {
	right: -20vw;
	bottom: 4%;
}

@media (max-width: 1100px) {
	.fx-eq {
		display: none;
	}
}

/* Die Ablauf-Spalte ist 62rem breit. Erst ab etwa 1360px bleibt rechts
   davon genug Platz, damit der Lichtgeist daneben statt hinter dem
   Fliesstext liegt. Darunter wird er ausgeblendet. */
@media (max-width: 1360px) {
	.fx-ghost {
		display: none;
	}
}

@media (max-width: 780px) {
	.fx-ghost {
		display: none;
	}

	.fx-beam {
		opacity: 0.6;
	}

	.fx-orb {
		width: min(76vw, 460px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.fx-orb {
		animation: fx-drift 27s var(--fx-ease-inout) infinite alternate;
	}

	.fx-orb--b {
		animation-duration: 36s;
		animation-delay: -9s;
	}

	.fx-orb--center {
		animation-duration: 44s;
		animation-delay: -15s;
	}

	.fx-beam {
		animation: fx-sweep 19s var(--fx-ease-inout) infinite alternate;
	}

	.fx-beam--b {
		animation-duration: 26s;
		animation-delay: -7s;
	}

	.fx-eq span {
		animation: fx-level 1.05s var(--fx-ease-inout) infinite alternate;
	}

	.fx-eq span:nth-child(1) { --fx-deco-hue: var(--fx-hue-cyan); }
	.fx-eq span:nth-child(2) { --fx-deco-hue: var(--fx-hue-blue); }
	.fx-eq span:nth-child(3) { --fx-deco-hue: var(--fx-hue-violet); }
	.fx-eq span:nth-child(4) { --fx-deco-hue: var(--fx-hue-magenta); }
	.fx-eq span:nth-child(5) { --fx-deco-hue: var(--fx-hue-amber); }
	.fx-eq span:nth-child(6) { --fx-deco-hue: var(--fx-hue-violet); }
	.fx-eq span:nth-child(7) { --fx-deco-hue: var(--fx-hue-blue); }

	.fx-eq span:nth-child(1) { animation-duration: 0.82s; animation-delay: -0.1s; }
	.fx-eq span:nth-child(2) { animation-duration: 1.34s; animation-delay: -0.5s; }
	.fx-eq span:nth-child(3) { animation-duration: 0.68s; animation-delay: -0.3s; }
	.fx-eq span:nth-child(4) { animation-duration: 1.52s; animation-delay: -0.8s; }
	.fx-eq span:nth-child(5) { animation-duration: 0.94s; animation-delay: -0.2s; }
	.fx-eq span:nth-child(6) { animation-duration: 1.18s; animation-delay: -0.65s; }
	.fx-eq span:nth-child(7) { animation-duration: 0.76s; animation-delay: -0.45s; }

	.fx-ghost {
		animation: fx-float 34s var(--fx-ease-inout) infinite alternate;
	}
}

@keyframes fx-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(7vw, 4vw, 0) scale(1.18);
	}
}

@keyframes fx-sweep {
	from {
		transform: translate3d(-3vw, 0, 0) rotate(-4deg);
	}
	to {
		transform: translate3d(4vw, 0, 0) rotate(5deg);
	}
}

@keyframes fx-level {
	from {
		transform: scaleY(0.16);
	}
	to {
		transform: scaleY(1);
	}
}

@keyframes fx-float {
	from {
		transform: translate3d(0, 0, 0) rotate(-1.5deg);
	}
	to {
		transform: translate3d(3vw, -3.5vw, 0) rotate(1.5deg);
	}
}

/* ==========================================================================
   25. Socials-Card
   --------------------------------------------------------------------------
   Portiert aus der React-Vorlage: im Ruhezustand nur der Titel, beim Hover
   faechern die Kacheln gestaffelt heraus. Zusaetzlich an :focus-within
   gehaengt, damit die Links auch per Tastatur erreichbar bleiben. Reine
   Hover-Interaktionen sind sonst fuer Tastatur und Touch unbenutzbar.
   ========================================================================== */

.fx-socialcard {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	max-width: 15rem;
	aspect-ratio: 1;
	padding: 1rem;
	border: 1px solid var(--fx-line);
	border-radius: var(--fx-r-lg);
	background: var(--fx-card);
	overflow: hidden;
	isolation: isolate;
	transition: border-color var(--fx-dur-slow) var(--fx-ease);
	box-shadow: var(--fx-card-shadow);
}

.fx-socialcard:hover,
.fx-socialcard:focus-within {
	border-color: var(--fx-accent-line);
}

.fx-socialcard__bg {
	position: absolute;
	inset: 0;
	/* Nicht -1: der Kartenhintergrund liegt sonst darueber. */
	z-index: 0;
	background: radial-gradient(
		120% 110% at 50% 118%,
		rgb(61 250 255 / 0.24) 0%,
		rgb(61 250 255 / 0.06) 45%,
		transparent 70%
	);
	opacity: 0;
	transform: scale(0.72);
	transform-origin: 50% 100%;
	transition: opacity var(--fx-dur-slow) var(--fx-ease), transform 800ms var(--fx-ease);
}

.fx-socialcard:hover .fx-socialcard__bg,
.fx-socialcard:focus-within .fx-socialcard__bg {
	opacity: 1;
	transform: scale(1);
}

.fx-socialcard__title {
	position: relative;
	z-index: 1;
	font-family: var(--fx-font-mono);
	font-size: var(--fx-fs-label);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fx-fg-muted);
	transition: transform 550ms var(--fx-ease), color var(--fx-dur) var(--fx-ease);
}

.fx-socialcard:hover .fx-socialcard__title,
.fx-socialcard:focus-within .fx-socialcard__title {
	transform: translateY(-1.7rem);
	color: var(--fx-accent);
}

.fx-socialcard__links {
	position: absolute;
	z-index: 1;
	inset-inline: 1rem;
	bottom: 2.15rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.fx-socialcard__box {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--fx-line-strong);
	border-radius: var(--fx-r-pill);
	background: var(--fx-surface);
	color: var(--fx-fg-muted);
	font-size: 1.05rem;
	opacity: 0;
	transform: translateY(0.9rem) scale(0.55);
	transition: opacity 420ms var(--fx-ease), transform 520ms var(--fx-ease),
		color var(--fx-dur) var(--fx-ease), border-color var(--fx-dur) var(--fx-ease),
		background-color var(--fx-dur) var(--fx-ease);
}

.fx-socialcard:hover .fx-socialcard__box,
.fx-socialcard:focus-within .fx-socialcard__box {
	opacity: 1;
	transform: none;
}

/* Die Staffelung aus der Vorlage: 0s, 0.15s, 0.3s, 0.45s. */
/* Bei Tastaturfokus ohne Verzoegerung: niemand soll eine halbe Sekunde
   warten, bis der fokussierte Link sichtbar wird. */
.fx-socialcard:focus-within .fx-socialcard__box {
	transition-delay: 0s;
}

.fx-socialcard__box:nth-child(2) { transition-delay: 0.15s; }
.fx-socialcard__box:nth-child(3) { transition-delay: 0.3s; }
.fx-socialcard__box:nth-child(4) { transition-delay: 0.45s; }

.fx-socialcard__box:hover,
.fx-socialcard__box:focus-visible {
	border-color: var(--fx-accent-line);
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
	transform: translateY(-3px);
	transition-delay: 0s;
}

/* Ohne JavaScript und ohne Zeigegeraet greift kein Hover: dann liegen die
   Kacheln von Anfang an offen. */
@media (hover: none) {
	.fx-socialcard__title {
		transform: translateY(-1.7rem);
	}

	.fx-socialcard__box {
		opacity: 1;
		transform: none;
	}

	.fx-socialcard__bg {
		opacity: 1;
		transform: scale(1);
	}
}

/* ==========================================================================
   26. Party-Popper
   --------------------------------------------------------------------------
   Portiert aus der React-Vorlage, aber mit der Web Animations API statt GSAP:
   keine 70 KB Abhaengigkeit, kein Build-Schritt, und WordPress bleibt ohne
   npm installierbar. Die Partikel selbst werden im JS erzeugt.
   ========================================================================== */

.fx-popper-layer {
	position: fixed;
	inset: 0;
	z-index: calc(var(--fx-z-nav) + 10);
	overflow: hidden;
	pointer-events: none;
}

.fx-popper-layer span {
	position: absolute;
	display: block;
	will-change: transform, opacity;
}

.fx-poppbtn {
	color: var(--fx-fg-muted);
}

.fx-poppbtn:hover {
	border-color: var(--fx-accent-line);
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

/* ==========================================================================
   27. Motion - reveal on enter (IntersectionObserver driven)
   ========================================================================== */

.fx-reveal {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity var(--fx-dur-slow) var(--fx-ease), transform var(--fx-dur-slow) var(--fx-ease);
	transition-delay: calc(var(--fx-i, 0) * 70ms);
}

.fx-reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Hero entry cascade. Runs once on load, communicates reading order. */
.fx-hero .fx-eyebrow,
.fx-hero .fx-display,
.fx-hero__sub,
.fx-hero__actions {
	animation: fx-rise 900ms var(--fx-ease) both;
}

.fx-hero .fx-display {
	animation-delay: 90ms;
}
.fx-hero__sub {
	animation-delay: 190ms;
}
.fx-hero__actions {
	animation-delay: 280ms;
}

@keyframes fx-rise {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* JS absent or still booting: never leave content invisible. */
.no-js .fx-reveal {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   27b. Presentation deck — one viewport per area, never between
   --------------------------------------------------------------------------
   Every area is exactly one viewport. Extra content scrolls inside the
   area. The page only moves at the edges, so two areas cannot share the
   screen. The hero stays one viewport: the wheel drives the WebM first.
   ========================================================================== */

html.fx-deck {
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
}

body.fx--deck .fx-hero-scrub,
body.fx--deck .fx-section,
body.fx--deck .fx-slide,
body.fx--deck .fx-footer {
	box-sizing: border-box;
	height: 100dvh;
	min-height: 100dvh;
	max-height: 100dvh;
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

body.fx--deck .fx-hero-scrub {
	overflow: hidden;
}

body.fx--deck .fx-hero-scrub.is-active {
	height: 100dvh;
	max-height: 100dvh;
	--fx-scrub-span: 0;
}

body.fx--deck .fx-hero-scrub.is-active .fx-hero {
	position: relative;
	height: 100dvh;
	min-height: 100dvh;
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

body.fx--deck .fx-section,
body.fx--deck .fx-slide,
body.fx--deck .fx-footer {
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: none;
	-webkit-overflow-scrolling: touch;
}

body.fx--deck .fx-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-block: clamp(5.5rem, 8vh, 6.75rem) clamp(1.75rem, 3.2vh, 2.75rem);
}

body.fx--deck .fx-section > * {
	flex-shrink: 0;
}

body.fx--deck .fx-head,
body.fx--deck .fx-head__aside {
	margin-bottom: clamp(1.1rem, 2.2vh, 1.85rem);
}

body.fx--deck .fx-slide--band {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 0.75rem;
	padding-top: clamp(5.5rem, 8vh, 6.75rem);
	padding-bottom: clamp(2.25rem, 5vh, 3.5rem);
	background: var(--fx-bg);
}

body.fx--deck .fx-slide--band .fx-facts,
body.fx--deck .fx-slide--band .fx-section {
	height: auto;
	min-height: 0;
	max-height: none;
	overflow: visible;
	scroll-snap-align: none;
	scroll-snap-stop: normal;
	padding-block: 0;
	justify-content: flex-start;
}

body.fx--deck .fx-slide--band .fx-facts {
	border-top: 0;
	background: transparent;
	padding-bottom: 0.35rem;
}

body.fx--deck .fx-slide--band .fx-section {
	flex: none;
	padding-top: clamp(1.75rem, 4.2vh, 2.85rem);
	padding-bottom: clamp(1.25rem, 3vh, 2rem);
}

body.fx--deck .fx-footer {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: clamp(5.5rem, 8vh, 6.75rem);
	padding-bottom: 1.5rem;
}

@media (max-width: 900px) {
	html.fx-deck {
		scroll-snap-type: y proximity;
	}

	body.fx--deck .fx-hero-scrub,
	body.fx--deck .fx-section,
	body.fx--deck .fx-slide,
	body.fx--deck .fx-footer {
		height: auto;
		max-height: none;
		min-height: 100dvh;
		overflow: visible;
	}
}

/* ==========================================================================
   28. Reduced motion + reduced transparency + print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	html.fx-deck {
		scroll-snap-type: y proximity;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.fx-reveal {
		opacity: 1;
		transform: none;
	}

	.fx-marquee__row {
		animation: none;
		transform: none;
	}

	.fx-marquee,
	.fx-wall {
		overflow-x: auto;
	}

	.fx-wall__row {
		animation: none;
		transform: none;
	}

	/* Der Party-Button existiert nur fuer die Animation. Ohne Animation
	   waere er ein Knopf, der nichts tut, also wird er ausgeblendet. */
	[data-fx-popper] {
		display: none;
	}

	.fx-hero__cue {
		display: none;
	}
}

@media (prefers-reduced-transparency: reduce) {
	.fx-nav.is-stuck .fx-nav__inner,
	.fx-btn--ghost,
	.fx-drawer {
		backdrop-filter: none;
		background: var(--fx-surface);
	}
}

@media print {
	body.fx {
		background: #fff;
		color: #111;
	}

	.fx-nav,
	.fx-drawer,
	.fx-footer__mark,
	.fx-arch {
		display: none !important;
	}

	.fx-accent,
	.fx-eyebrow {
		color: var(--fx-accent-deep);
	}
}