/*
 * Loca Noche – Gestaltung nach dem Claude-Design-Handoff.
 * Dunkel (Standard) und Hell über data-theme am <html>, gesetzt vor dem ersten Zeichnen.
 * Desktop-Navigation ab 900px.
 */

/* ---------- Tokens ---------- */
:root,
[data-theme="dark"] {
	--bg: #000;
	--fg: #fff;
	--muted: #b0b0b0;
	--line: rgba(255, 255, 255, .16);
	--surface: #0e0e10;
	--accent: #002e62;
	/* Flaggenblau ist auf Schwarz kaum sichtbar (1,6 : 1): für Text, Fokus und Linien dieselbe
	   Farbe heller (gleicher Farbton, 4,6 : 1). Flächen wie der Ticket-Button bleiben #002e62. */
	--accent-ink: #1874dc;
	--notice: #7cc4ff; /* Hellblau für Meldungen (Newsletter), gut lesbar auf Schwarz */
	--hover: #ce1127;
	--logo: none;
	color-scheme: dark;
}
[data-theme="light"] {
	--bg: #f4f3f0;
	--fg: #000;
	--muted: #5a5a5a;
	--line: rgba(0, 0, 0, .16);
	--surface: #fff;
	--accent: #002e62;
	--accent-ink: #002e62;
	--notice: #1462b8; /* im hellen Design dunkler, sonst auf Weiß nicht lesbar */
	--hover: #ce1127;
	--logo: invert(1);
	color-scheme: light;
}
:root {
	--pad: clamp(20px, 5vw, 64px);
	--max: 1120px;
	--header: 64px;
	--admin: var(--wp-admin--admin-bar--height, 0px);
	--banner: 0px; /* Höhe des Event-Banners über dem Header (0, wenn keiner da ist) */
	--display: "Big Shoulders Display", Impact, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--bg); }
/* Schmaler, dezenter Scrollbalken in Textfarbe (Desktop; Handys blenden ihn ohnehin aus). */
html {
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--fg) 28%, transparent) var(--bg);
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}
/* Ohne Gewicht (:where), damit Buttons ihre eigenen Hover-Farben behalten –
   sonst wäre der Text beim Hover rot auf rotem Grund. */
:where(a) { color: var(--fg); }
:where(a:not(.wp-element-button)):hover { color: var(--hover); }
:where(a, button, input, [tabindex]):focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 3px;
}
.wp-site-blocks > * { margin-block: 0; }

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

.ln-muted { color: var(--muted); }
.ln-logo { display: block; width: 100%; aspect-ratio: 1081 / 957; filter: var(--logo); }

.ln-placeholder-tag {
	display: inline-block;
	margin: 0;
	padding: 8px 12px;
	border: 1px dashed var(--muted);
	background: var(--bg);
	color: var(--muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* Buttons aus dem Block-Editor */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

/* Button-Hover wie die Logo-Animation (theme.js 4b): Die Farben bleiben beim Hover
   gleich, die gegenläufige Bewegung der Beschriftung ist die Rückmeldung. */
.wp-block-button__link:is(:hover, :focus-visible) { background-color: var(--fg); color: var(--bg); }
.ln-g { display: inline-block; white-space: pre; }

/* ---------- Event-Banner (fixiert direkt unter der Menüleiste) ---------- */
/* Rot der Seite mit weißer Schrift: auf dem Flaggenrot #ce1127 liest sich Weiß deutlich
   besser als Schwarz (Kontrast ~5,6 : 1). */
body:has(.ln-banner) { --banner: 36px; }
.ln-banner {
	position: fixed;
	top: calc(var(--admin) + var(--header));
	left: 0;
	right: 0;
	z-index: 49;
	height: var(--banner);
	background: var(--hover);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
}
.ln-banner__inner {
	max-width: var(--max);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ln-banner__text {
	margin: 0;
	min-width: 0;
	flex: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
}
.ln-banner__label { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
/* Datum als weiße Pille */
.ln-banner__date {
	flex: none;
	padding: 3px 9px;
	border-radius: 999px;
	background: #fff;
	color: #000;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
}
.ln-banner__title { color: #fff; font-weight: 600; text-decoration: none; }
.ln-banner__title:hover { color: #fff; text-decoration: underline; }
.ln-banner__place { color: rgba(255, 255, 255, .85); }
.ln-banner__place::before { content: "· "; }

/* Ticker: passt der Text nicht in die Zeile, läuft er von rechts nach links durch
   (theme.js setzt is-ticking, Abschnitt 4c). Weiche Kanten, Pause beim Drüberfahren. */
.ln-banner__text.is-ticking {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.ln-ticker__track { display: inline-flex; flex: none; animation: ln-ticker var(--dur, 12s) linear infinite; }
.ln-ticker__item { display: inline-flex; flex: none; align-items: center; gap: 8px; padding-right: 48px; }
.ln-banner__text.is-ticking:hover .ln-ticker__track { animation-play-state: paused; }
@keyframes ln-ticker { to { transform: translateX(calc(-1 * var(--shift, 0px))); } }
.ln-banner__cta {
	flex: none;
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 2px;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.ln-banner__cta:hover { color: #fff; }
.ln-banner a:focus-visible { outline-color: #000; }

/* ---------- Header (fixiert, ohne Logo) ---------- */
.ln-header {
	position: fixed;
	top: var(--admin);
	left: 0;
	right: 0;
	z-index: 50;
	height: var(--header);
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
/* Flaggen-Band unter dem Event-Banner (Newsticker); ohne Banner direkt unter der
   Menüleiste. Blau, Weiß und Rot laufen langsam durch. Beim
   Drüberfahren (oder Antippen) wird es nach unten breiter, dunkelt stark ab und die
   Buchstaben des Spruchs steigen nacheinander auf (theme.js teilt sie in Spans).
   Sichtbar sind nur 4px; die durchsichtigen Ränder (oben 4px = Abstand zum Ticker,
   unten 18px) gehören zum Element und vergrößern so die Fläche für Maus und Finger.
   Die Farben liegen in ::before und laufen per transform (GPU, ohne Pixelsprünge). */
.ln-flagband {
	--flag-h: 4px;
	--flag-blue: #002d62; /* Flaggenblau der Dominikanischen Republik */
	--flag-red: var(--hover); /* gleiches Rot wie der Newsticker */
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 1px + var(--banner)); /* 1px Trennlinie der Menüleiste */
	box-sizing: content-box;
	height: var(--flag-h);
	border-top: 4px solid transparent;
	border-bottom: 18px solid transparent;
	display: grid;
	place-items: center;
	overflow: hidden; /* schneidet am Innenrand ab, die Ränder bleiben leer */
	cursor: default;
	/* transform/opacity: Rückkehr per Flaggen-Knopf faltet sich von der Mitte aus wieder auf. */
	transition: height 1.1s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.65, 0, .35, 1), opacity .3s ease;
}
.ln-flagband::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 200%; /* zwei Flaggen-Perioden; -50% verschieben = genau eine Periode */
	background: linear-gradient(90deg,
		var(--flag-blue) 0 23%, #fff 23% 27%, var(--flag-red) 27% 48%, #fff 48% 52%,
		var(--flag-blue) 52% 73%, #fff 73% 77%, var(--flag-red) 77% 98%, #fff 98% 100%);
	will-change: transform;
	animation: ln-flag-flow 24s linear infinite;
}
/* Statt Schatten: das Band selbst tritt zurück (fast schwarz), die Farben schimmern nur durch. */
.ln-flagband::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .78);
	opacity: 0;
	transition: opacity .45s ease;
}
.ln-flagband__msg {
	position: relative;
	z-index: 1;
	display: flex;
	color: #fff;
	font: 600 13px/1 "Hanken Grotesk", system-ui, sans-serif;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: pre;
}
.ln-flagband__ch {
	display: inline-block;
	opacity: 0;
	transform: translateY(110%);
	filter: blur(3px);
	transition: opacity .25s ease, transform .25s ease, filter .25s ease;
}
/* Offen: per Maus (nur Geräte mit echtem Hover, sonst „klebt“ der Zustand nach dem
   Antippen) oder per .is-open aus theme.js (Handy: Antippen und einmal beim Scrollen). */
/* Nach dem einmaligen Zeigen (Handy und Desktop) zieht sich das Band zur Mitte zusammen und
   verschwindet für den Rest des Besuchs (theme.js setzt .is-gone). */
.ln-flagband.is-gone {
	opacity: 0;
	transform: scaleX(0);
	visibility: hidden;
	pointer-events: none;
	transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .5s ease .4s, visibility 0s .9s;
}
.ln-flagband.is-open { --flag-h: 30px; }
.ln-flagband.is-open::after { opacity: 1; }
.ln-flagband.is-open .ln-flagband__ch {
	opacity: 1;
	transform: none;
	filter: blur(0);
	transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
	transition-delay: calc(.18s + var(--i, 0) * 22ms);
}
@media (hover: hover) {
	.ln-flagband:hover { --flag-h: 30px; }
	.ln-flagband:hover::after { opacity: 1; }
	.ln-flagband:hover .ln-flagband__ch {
		opacity: 1;
		transform: none;
		filter: blur(0);
		transition: opacity .5s ease, transform .6s cubic-bezier(.16, 1, .3, 1), filter .6s ease;
		transition-delay: calc(.18s + var(--i, 0) * 22ms);
	}
}
@keyframes ln-flag-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
	.ln-flagband::before { animation: none; }
	.ln-flagband__ch { transform: none; filter: none; transition-delay: 0s !important; }
}
.ln-header__inner {
	max-width: var(--max);
	height: 100%;
	margin: 0 auto;
	padding: 0 var(--pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.ln-header__nav { display: none; align-items: center; gap: 28px; }
.ln-header__nav a,
.ln-menu-toggle {
	color: var(--fg);
	font: 500 15px/1 "Hanken Grotesk", system-ui, sans-serif;
	text-decoration: none;
}
.ln-header__nav a { padding: 8px 0; }
/* Hover abwechselnd Rot, Blau, Rot … (1., 3., 5. Punkt rot, 2., 4. blau) */
.ln-header__nav a:hover { color: var(--hover); }
.ln-header__nav a:nth-child(even):hover { color: var(--accent-ink); }

.ln-menu-toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	min-width: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}
.ln-menu-toggle__bars { display: flex; flex-direction: column; gap: 5px; width: 22px; }
.ln-menu-toggle__bars span { display: block; height: 2px; background: var(--fg); }

/* ---------- Flaggen-Knopf rechts im Header (holt das Flaggen-Band zurück) ----------
   Flagge der Dominikanischen Republik mit vereinfachtem Wappen (assets/flag-do.svg),
   Farben wie im Flaggen-Band. Sie besteht aus 15 Streifen à 2px. Beim Drüberfahren (bzw.
   solange das Band offen ist) wehen die Streifen versetzt auf und ab; links am „Mast“ fast
   gar nicht, nach rechts immer stärker, dazu Licht und Schatten. --wave blendet die Bewegung
   weich ein und aus (0 = glatt, 1 = voll). */
@property --wave {
	syntax: "<number>";
	inherits: true;
	initial-value: 0;
}
.ln-flagbtn {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	margin-left: auto;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.ln-flagbtn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ln-flagbtn__flag {
	--wave: 0;
	display: flex;
	width: 30px;
	height: 20px;
	transition: --wave .7s ease;
}
.ln-flagbtn__flag > span {
	flex: 0 0 2px;
	height: 100%;
	background: url(flag-do.svg) calc(var(--i) * -2px) 0 / 30px 20px no-repeat;
	animation: ln-flagbtn-wave 1.2s ease-in-out infinite alternate;
	animation-delay: calc(var(--i) * -.1s);
	animation-play-state: paused;
}
@keyframes ln-flagbtn-wave {
	from {
		transform: translateY(calc(var(--wave) * (var(--i) + 2) * -.13px));
		filter: brightness(calc(1 + var(--wave) * .14));
	}
	to {
		transform: translateY(calc(var(--wave) * (var(--i) + 2) * .13px));
		filter: brightness(calc(1 - var(--wave) * .22));
	}
}
.ln-flagbtn[aria-expanded="true"] .ln-flagbtn__flag { --wave: 1; }
.ln-flagbtn[aria-expanded="true"] .ln-flagbtn__flag > span { animation-play-state: running; }
@media (hover: hover) {
	.ln-flagbtn:hover .ln-flagbtn__flag { --wave: 1; }
	.ln-flagbtn:hover .ln-flagbtn__flag > span { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
	.ln-flagbtn__flag > span { animation: none; }
}

/* Mobiles Menü: unter dem Header bis zum unteren Rand */
.ln-menu {
	position: fixed;
	top: calc(var(--admin) + var(--header)); /* direkt unter der Menüleiste, deckt den Banner ab */
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 52;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 24px var(--pad) 40px;
	overflow: auto;
	background: var(--bg);
}
.ln-menu[hidden] { display: none; }
/* Wellen-Vorhang (theme.js 1b): Im Menü liefert die Welle den Hintergrund und liegt
   mit z-index -1 hinter den Links; beim Ladebildschirm deckt sie die ganze Seite. */
.ln-wave { pointer-events: none; }
.ln-wave svg { display: block; width: 100%; height: 100%; }
.ln-wave--page { position: fixed; inset: 0; z-index: 99998; }
.ln-menu.has-wave { background: transparent; }
.ln-menu .ln-wave { position: fixed; top: calc(var(--admin) + var(--header)); left: 0; right: 0; bottom: 0; z-index: -1; }
.ln-menu a:not(.ln-menu__social) {
	padding: 12px 0;
	border-bottom: 1px solid var(--line);
	color: var(--fg);
	text-decoration: none;
	font: 900 clamp(44px, 13vw, 72px)/1 var(--display);
	text-transform: uppercase;
}
.ln-menu a:hover { color: var(--hover); }
.ln-menu a:not(.ln-menu__social):nth-child(even):hover { color: var(--accent-ink); }
/* Spanisch neben jedem Menüpunkt: kleiner, grau, zurückgenommen. Beim Hover rückt es
   ein Stück nach rechts und wird heller; der Auftritt (theme.js 2b) zieht es von links
   aus dem deutschen Wort heraus. */
.ln-nav__es {
	display: inline-block;
	color: var(--muted);
	font: 400 12px/1 "Hanken Grotesk", system-ui, sans-serif;
	text-transform: none;
	letter-spacing: .02em;
	opacity: .5;
	transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.ln-header__nav a { display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.ln-menu a:not(.ln-menu__social) { display: flex; align-items: baseline; gap: 14px; }
.ln-menu .ln-nav__es { font: 900 clamp(22px, 6.5vw, 34px)/1 var(--display); text-transform: uppercase; letter-spacing: 0; }
@media (hover: hover) {
	a:hover > .ln-nav__es { transform: translateX(4px); opacity: 1; }
}
.ln-menu__social {
	margin-top: auto;
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--muted);
	text-decoration: none;
	font-size: 16px;
}

@media (min-width: 900px) {
	.ln-header__nav { display: flex; }
	.ln-menu-toggle, .ln-menu { display: none !important; }
}

/* ---------- Abschnitte ---------- */
.ln-main:not(.ln-main--front) {
	padding-top: calc(var(--banner) + var(--header) + clamp(40px, 8vh, 80px));
	padding-bottom: clamp(64px, 9vh, 112px);
}
.ln-section {
	padding-block: clamp(64px, 9vh, 112px);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--banner) + var(--header));
}
.ln-section h2, .ln-hero h1 { margin: 0; }
.ln-stack { display: flex; flex-direction: column; gap: 16px; }
.ln-stack > * { margin: 0 !important; }
.ln-stack--wide { gap: clamp(24px, 4vh, 40px); }
.ln-stack p.ln-muted { max-width: 40ch; font-size: 17px; line-height: 1.45; }
.ln-two-col,
.ln-merch {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
	gap: 32px 64px;
	align-items: start;
}

/* ---------- Hero ---------- */
.ln-hero {
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(32px, 5vh, 56px);
	padding-top: calc(96px + var(--banner));
	padding-bottom: 64px;
	text-align: center;
}
/* Desktop: mehr Luft zwischen Flaggenband und Logo (vorher nur ~24px, wirkte gedrängt). */
@media (min-width: 900px) {
	.ln-hero { padding-top: calc(var(--header) + var(--banner) + 88px); }
}
.ln-hero > * { margin: 0 !important; }
.ln-hero__logo {
	display: block;
	width: clamp(140px, 22vw, 240px);
	height: auto;
	filter: var(--logo);
}
/* Video nur in den Buchstaben: Die Überschrift liegt mit Hintergrundfarbe über dem
   Video. Dunkel: weiße Schrift + „darken“ → außen bleibt exakt Schwarz, in den
   Buchstaben erscheint das Video. Hell: schwarze Schrift + „lighten“ (Video leicht
   abgedunkelt, damit es nicht durch den hellen Hintergrund schimmert). Der Text
   bleibt echter Text – für Google, Screenreader und den Buchstaben-Auftritt. */
.ln-videotext { position: relative; isolation: isolate; }
.ln-videotext > * { margin: 0 !important; }
.ln-videotext__video {
	position: absolute;
	inset: 2px; /* 2 px Abstand: sonst blitzt an den Kastenkanten eine Videolinie durch */
	z-index: 0;
	width: calc(100% - 4px);
	height: calc(100% - 4px);
	object-fit: cover;
	pointer-events: none;
}
.ln-videotext h1 {
	position: relative;
	z-index: 1;
	/* Bei Zeilenhöhe 0,9 ragen die Großbuchstaben ~0,15 em über den Kasten –
	   Polster oben, damit Video und Fläche auch die Oberkante der ersten Zeile decken. */
	padding-top: .17em;
	background: var(--bg);
	color: #fff;
	mix-blend-mode: darken;
}
[data-theme="light"] .ln-videotext h1 { color: #000; mix-blend-mode: lighten; }
/* Im hellen Design wäre das fast weiße Video auf Creme unsichtbar – abdunkeln,
   damit die Buchstaben grau mit Bildstruktur erscheinen. */
[data-theme="light"] .ln-videotext__video { filter: brightness(.5) contrast(1.15); }

.ln-hero__lead {
	max-width: 36ch;
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.45;
	color: var(--muted);
}

/* ---------- Events-Bühne ---------- */
.ln-events-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(24px, 4vh, 40px);
}
.ln-stage__nav button {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: transparent;
	color: var(--fg);
	font-size: 20px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.ln-stage__nav button:hover { background: var(--fg); color: var(--bg); }

.ln-stage {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 64px;
	align-items: center;
	outline-offset: 8px;
}
.ln-stage__media {
	position: relative;
	width: 100%;
	/* --ar = Seitenverhältnis des Flyers (stage.php / theme.js), Standard quadratisch */
	max-width: min(100%, calc(78vh * var(--ar, 1)));
	justify-self: center;
	aspect-ratio: var(--ar, 1);
	perspective: 1200px;
}
.ln-stage__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
	will-change: transform, opacity, filter;
}
.ln-stage__missing {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border: 1px dashed var(--line);
	background: var(--surface);
	color: var(--muted);
	font-size: 14px;
}
.ln-stage__text { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ln-stage__text > * { margin: 0; }
/* Datum und Uhrzeit als Pille – wie im Event-Banner (im hellen Design invertiert) */
.ln-stage__text time {
	align-self: flex-start;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--fg);
	color: var(--bg);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}
/* Vergangenes Event: zurückgenommene Kontur-Pille mit vorangestelltem „Vorbei“-Feld */
.ln-stage__text time.is-past {
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line);
	background: transparent;
	color: var(--muted);
}
.ln-stage__text time.is-past > span { padding: 6px 14px 6px 10px; }
.ln-stage__text time.is-past > .ln-stage__state {
	display: flex;
	align-items: center;
	padding: 6px 10px 6px 12px;
	background: var(--fg);
	color: var(--bg);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.ln-stage__text h3 { font-size: clamp(40px, 6vw, 88px); line-height: .92; overflow-wrap: anywhere; }
.ln-stage__text h3 a { color: inherit; text-decoration: none; }
.ln-stage__text h3 a:hover { color: var(--hover); }
/* Info-Zeilen: Pin = Ort (Link zu Google Maps), Note = DJ und Genres */
.ln-stage__info { display: grid; gap: 8px; padding: 0; list-style: none; font-size: 17px; line-height: 1.4; }
.ln-stage__info li { display: flex; align-items: flex-start; gap: 10px; }
.ln-stage__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.ln-stage__info a { color: inherit; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.ln-stage__info a:hover { color: var(--hover); text-decoration-color: currentColor; }

/* Aktionen: Ticket-Button + dezenter Details-Link */
.ln-stage__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px !important; }
.ln-stage__details { color: var(--fg); font-size: 15px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.ln-stage__details:hover { color: var(--hover); }

.ln-stage__ticket,
.ln-ticket > .wp-block-button__link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 0 28px;
	border-radius: 2px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.ln-stage__ticket:hover,
.ln-ticket > .wp-block-button__link:hover { background: var(--accent); color: #fff; }
.ln-stage__ticket.is-pending,
.ln-ticket-pending {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	min-height: 50px;
	margin: 0;
	padding: 0 28px;
	border: 1px dashed var(--line);
	border-radius: 2px;
	background: transparent;
	color: var(--muted);
	font-weight: 600;
	font-size: 15px;
}
/* Steuerung neben der Überschrift: ← 1 / 3 ——— → */
.ln-stage__nav {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	color: var(--muted);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.ln-stage__bar { position: relative; width: clamp(32px, 10vw, 120px); height: 1px; background: var(--line); }
.ln-stage__bar span { position: absolute; left: 0; top: -1px; height: 3px; background: var(--fg); transition: width .3s ease; }

.ln-events-empty { margin: 0; max-width: 44ch; font-size: 18px; color: var(--muted); }

/* ---------- Newsletter ---------- */
/* Hebt sich als eigene Fläche ab: heller Kasten mit feinem Rand und einer blauen
   Kante oben (das Blau der Ticket-Buttons). Das Eingabefeld nimmt den Seiten-
   hintergrund, damit es auf der Fläche sichtbar bleibt. */
#newsletter .ln-two-col {
	position: relative;
	padding: clamp(28px, 5vw, 64px);
	background: var(--nl-bg, #131316);
	border: 1px solid var(--line);
	border-top: 3px solid var(--accent-ink);
	border-radius: 2px;
}
[data-theme="light"] #newsletter .ln-two-col { --nl-bg: #fff; }
#newsletter .ln-form input[type="email"] { background: var(--bg); }
.ln-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: clamp(0px, 2vw, 28px);
}
.ln-form label { font-size: 14px; font-weight: 500; }
.ln-form__row { display: flex; flex-wrap: wrap; gap: 10px; }
.ln-form input[type="email"] {
	flex: 1 1 220px;
	min-height: 48px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: var(--surface);
	color: var(--fg);
	font: 500 16px "Hanken Grotesk", system-ui, sans-serif;
}
.ln-form input[aria-invalid="true"] { border-color: var(--hover); }
.ln-form__submit {
	flex: 0 0 auto;
	min-height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 2px;
	background: var(--fg);
	color: var(--bg);
	font: 600 15px "Hanken Grotesk", system-ui, sans-serif;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.ln-form__submit:hover { background: var(--fg); color: var(--bg); }
.ln-form__submit:disabled { opacity: .6; cursor: progress; }
.ln-form__msg { margin: 0; min-height: 1.4em; font-size: 14px; line-height: 1.4; color: var(--notice); }
.ln-form__help { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.ln-form__nudge { margin: 0; font-size: 14px; line-height: 1.45; }
/* Leere Meldungszeile nimmt keinen Platz weg (bleibt als aria-live-Bereich im DOM). */
.ln-form__msg:empty { min-height: 0; margin-top: -12px; }
@media (max-width: 599px) {
	.ln-form__submit { flex: 1 1 100%; }
}
/* Texte links im Newsletter-Kasten: spanische Eyecatcher im Flaggenrot (wie Ticket-Banner). */
#newsletter .ln-nl-eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hover);
}
#newsletter .ln-stack .ln-nl-eyebrow { margin-bottom: -8px !important; }
#newsletter .ln-nl-tagline {
	font-family: var(--display);
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 800;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--hover);
}
#newsletter .ln-nl-lead { font-size: 19px; line-height: 1.4; font-weight: 500; }
#newsletter .ln-stack p.ln-muted { max-width: 46ch; }
/* Untereinander (schmal): feine Linie zwischen Text und Formular, wie in der Vorlage. */
@media (max-width: 999px) {
	#newsletter .ln-form { padding-top: 24px; border-top: 1px solid var(--line); }
}
.ln-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Instagram: Raster 2 pro Zeile (Desktop 4) ---------- */
.ln-ig {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ln-ig__item { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; background: var(--surface); }
.ln-ig__item a { display: block; height: 100%; }
.ln-ig__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1), opacity .3s ease; }
.ln-ig__item a:hover img { transform: scale(1.04); opacity: .85; }
.ln-ig__badge {
	position: absolute; top: 8px; right: 8px;
	padding: 3px 7px;
	background: #000; color: #fff;
	font-size: 11px; font-weight: 600;
}
.ln-ig-placeholder { position: relative; }
.ln-ig--placeholder .ln-ig__item {
	border: 1px dashed var(--line);
	background: repeating-linear-gradient(-78deg, transparent 0 18px, var(--line) 18px 19px), var(--surface);
}
.ln-ig-placeholder .ln-placeholder-tag {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: min(90%, 26rem);
	text-align: center;
}
.ln-ig__profile { margin: 12px 0 0; text-align: center; }
/* „Folge @locanoche.events“-Badge */
.ln-btn--outline {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 22px;
	border: 1px solid var(--fg);
	border-radius: 2px;
	background: transparent;
	color: var(--fg);
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.ln-btn--outline:hover { background: transparent; color: var(--fg); }
@media (min-width: 900px) {
	.ln-ig { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.ln-ig--placeholder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Merch-Mockup ---------- */
/* Hinter dem Bild steht senkrecht das Wort MERCH als Kontur; links ragt es heraus,
   der Rest verschwindet hinter dem Foto. */
.ln-merch__mockup {
	--gap: clamp(44px, 8vw, 96px);
	position: relative;
	isolation: isolate;
	width: 100%;
	max-width: calc(520px + var(--gap));
	margin: 0;
	padding-left: var(--gap);
	justify-self: end;
}
.ln-merch__mockup img { position: relative; z-index: 1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.ln-merch__outline {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font: 900 calc(var(--gap) * 1.75)/.8 var(--display);
	text-transform: uppercase;
	letter-spacing: .02em;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px var(--muted);
	pointer-events: none;
	/* Zurück: ruhig und erst nach kurzer Pause, damit kurzes Verlassen nichts auslöst. */
	transition: letter-spacing .9s cubic-bezier(.65, 0, .35, 1) .2s;
}
/* Hover irgendwo im Merch-Bereich (eine durchgehende Fläche, keine Lücken zwischen Bild
   und Text): die Buchstaben ziehen auseinander. Kurze Verzögerung, damit bloßes
   Drüberfahren nichts auslöst; schneller Start, langes weiches Auslaufen (Ease-out Expo). */
@media (hover: hover) {
	.ln-merch:hover .ln-merch__outline {
		letter-spacing: .14em;
		transition: letter-spacing .7s cubic-bezier(.16, 1, .3, 1) .1s;
	}
}

.ln-merch { align-items: end; }

/* ---------- Footer ---------- */
.ln-footer {
	padding-block: 40px;
	border-top: 1px solid var(--line);
	font-size: 14px;
	color: var(--muted);
	scroll-margin-top: calc(var(--banner) + var(--header));
}
/* Links oben links (Navigation, darunter Social), großes Logo rechts. Der
   Blockabstand von WordPress würde die Links sonst nach unten schieben. */
.ln-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "nav logo" "social social"; /* Handy: Social über volle Breite */
	align-items: start;
	gap: 24px 32px;
}
.ln-footer__grid > * { margin: 0 !important; }
.ln-footer__nav { grid-area: nav; }
.ln-footer__social { grid-area: social; }
.ln-footer__logo { grid-area: logo; justify-self: end; display: block; width: clamp(120px, 20vw, 220px); color: inherit; }
.ln-footer__nav { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ln-footer__nav a { color: var(--fg); text-decoration: none; font-weight: 500; font-size: 15px; }
.ln-footer__nav a:hover { color: var(--hover); }
.ln-footer__social .wp-block-social-link { color: var(--fg); }
.ln-footer__social .wp-block-social-link a:hover { color: var(--hover); }
.ln-footer__social .wp-block-social-link-label { font-size: 14px; white-space: nowrap; }
.ln-footer__bottom { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.ln-footer__bottom p { margin: 0; }
.ln-credit { color: var(--muted); }
.ln-credit a { color: inherit; text-decoration: none; }
.ln-credit a:hover { color: var(--hover); }
.ln-legal { display: flex; gap: 20px; margin: 0; }
.ln-legal a { color: var(--muted); text-decoration: none; }
.ln-legal a:hover { color: var(--hover); }
@media (min-width: 768px) {
	.ln-footer__grid { column-gap: 64px; grid-template-areas: "nav logo" "social logo"; }
}

/* ---------- Event-Liste (/events/) und einzelnes Event ---------- */
.ln-label {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--muted);
}
.ln-section__head { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vh, 40px); }
.ln-section__head > * { margin: 0 !important; }
.ln-grid { gap: 48px 32px; }
.ln-card { display: flex; flex-direction: column; height: 100%; }
.ln-card__media { position: relative; margin: 0; }
.ln-card__media .wp-block-post-featured-image { margin: 0; }
.ln-card__media img { display: block; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }
.ln-card__flyer-missing {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	margin: 0;
	border: 1px dashed var(--line);
	background: var(--surface);
	color: var(--muted);
	font-size: 14px;
}
.ln-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding-top: 20px; }
.ln-card__body > * { margin: 0 !important; }
.ln-card__date { font-size: 16px; color: var(--muted); }
.ln-card__title { font-size: clamp(32px, 4vw, 48px); line-height: .92; }
.ln-card__title a { text-decoration: none; }
.ln-card__meta { font-size: 17px; line-height: 1.45; }
.ln-card__meta--place { color: var(--muted); }
.ln-card__actions, .ln-card .ln-ticket-pending { margin-top: auto !important; padding-top: 12px; }
.ln-card .ln-ticket-pending { padding-top: 0; margin-top: 12px !important; }

.ln-event-single__grid { display: grid; gap: 32px 64px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.ln-event-single__info { display: flex; flex-direction: column; gap: 16px; }
.ln-event-single__info > * { margin: 0 !important; }
.ln-event-single__info .wp-block-post-title { font-size: clamp(40px, 6vw, 88px); line-height: .92; }
.ln-event-single__content { padding-top: 16px; border-top: 1px solid var(--line); }
.ln-badge {
	align-self: flex-start;
	padding: 4px 10px;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-size: 14px;
	color: var(--muted);
}
.ln-back a { color: var(--muted); }
@media (min-width: 900px) {
	.ln-event-single__media { position: sticky; top: calc(var(--admin) + var(--banner) + var(--header) + 24px); }
}

/* ---------- Fotogalerie vergangener Events (Plugin: [ln_event_gallery]) ---------- */
.ln-gallery-section {
	margin-top: clamp(64px, 9vh, 112px) !important;
	padding-top: clamp(40px, 6vh, 64px);
	border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--admin) + var(--banner) + var(--header));
}
.ln-gallery-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(20px, 3vh, 32px);
}
.ln-gallery-head h2, .ln-gallery-head p { margin: 0; }
.ln-gallery-empty { margin: 0; max-width: 44ch; font-size: 18px; color: var(--muted); }
/* Gleich große Kacheln, damit das Raster bei Hoch- und Querformat ruhig bleibt;
   in der Lightbox erscheint das ganze Foto. */
.ln-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 4px;
}
.ln-gallery__item {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--surface);
}
.ln-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
@media (hover: hover) {
	.ln-gallery:hover .ln-gallery__item img { opacity: .7; }
	.ln-gallery .ln-gallery__item:hover img { opacity: 1; transform: scale(1.04); }
}
.ln-gallery__item:focus-visible { outline-offset: -2px; }
.ln-gallery.is-collapsed .ln-gallery__item:nth-child(n+13) { display: none; }
.ln-gallery__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 16px;
	border: 1px solid var(--line);
	border-radius: 2px;
	background: transparent;
	color: var(--fg);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: border-color .2s ease;
}
.ln-gallery__more:hover { border-color: var(--fg); }
@media (min-width: 700px) {
	.ln-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
@media (min-width: 1000px) {
	.ln-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Lightbox (PhotoSwipe) im Seitenlook: schwarz, Zähler in der Display-Schrift. */
.pswp {
	--pswp-bg: #000;
	--pswp-icon-color: #fff;
	--pswp-icon-color-secondary: #000;
	--pswp-icon-stroke-color: #000;
	--pswp-placeholder-bg: #0e0e10;
}
.pswp__counter {
	font: 700 20px/1 var(--display);
	letter-spacing: .04em;
	opacity: 1;
	margin-top: 18px;
}
.pswp__button:hover .pswp__icn { fill: var(--hover); }

.ln-page .wp-block-post-title { margin-bottom: 32px; hyphens: auto; overflow-wrap: break-word; }
/* Lange Texte wie Impressum und Datenschutz: kleinere Zwischenüberschriften, angenehme Zeilenlänge. */
.ln-page .wp-block-post-content h2 { font-size: clamp(24px, 5vw, 34px); line-height: 1.05; margin: 2.2em 0 .5em; hyphens: auto; overflow-wrap: break-word; }
.ln-page .wp-block-post-content p { max-width: 68ch; line-height: 1.6; }

/* ---------- Text-Auftritt (wie Stempelkarte, gesteuert von theme.js) ---------- */
/* Vor dem Auftritt verborgen – nur mit Bewegung und nur bis das Skript übernimmt
   (Sicherheitsnetz: ln-anim-done nach 6 s). */
.ln-anim:not(.ln-anim-done) .ln-reveal-scope:not(.is-played) :is(h1, h2, .ln-reveal) { opacity: 0; }
/* Zerlegte Überschrift: Maske je Zeile, Buchstaben steigen darin von unten auf.
   Die Maske ist ein clip-path statt overflow + Polster: sie schneidet nur unten
   und verändert das Layout nicht – sonst spränge der Text beim Zurücksetzen.
   Unterschneidung aus, weil einzeln gesetzte Buchstaben keine Kerning-Paare
   kennen; so stehen sie während und nach dem Auftritt exakt gleich. */
.ln-reveal-scope :is(h1, h2) { font-kerning: none; }
.ln-l { display: block; clip-path: inset(-.5em -.3em -.06em -.3em); }
.ln-w { display: inline-block; white-space: nowrap; }
.ln-c { display: inline-block; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; }
	.ln-ig__item a:hover img { transform: none; }
}