/* ===========================================================================
   Festival de Cuba Stuttgart – Gestaltung
   Richtung: kubanisches Siebdruck-Plakat. Flaggenfarben flaechig auf
   Tiefschwarz, harte Kanten, Fahrplan-Typografie, ein verdruckter Titel.
   Keine Bibliothek, keine Bausteine von aussen.
   =========================================================================== */

:root {
	/* Farben: Schwarz, Rot, Blau, Weiss (Logo / kubanische Flagge, P-0004) */
	--tinte: #0b0d12;          /* Grund, Schwarz mit Blaustich */
	--tinte-hoch: #13161d;     /* abgesetzte Flaeche */
	--tinte-tief: #070810;     /* Fusszeile */
	--blau: #0d2a66;           /* Flaggenblau, Band */
	--blau-hell: #2f5bd0;      /* Akzentblau, Niveau Mittelstufe */
	--rot: #d81e3f;            /* Flaggenrot, Akzent und Knopf */
	--rot-dunkel: #a81530;
	--weiss: #f4f2ed;          /* leicht gebrochenes Weiss, wie Papier */
	--leise: #8e97a8;          /* Nebentext */
	--linie: rgba(244, 242, 237, .14);
	--linie-stark: rgba(244, 242, 237, .3);

	--kopf: 'Outfit', 'Trebuchet MS', 'Segoe UI', sans-serif;
	--text: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;

	--breit: 78rem;
	--eng: 46rem;
	--kopfhoehe: 7.6rem;

	/* Feines Korn, damit die Flaechen nicht digital glatt wirken */
	--korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--kopfhoehe); }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; animation: none !important; }
}

body {
	margin: 0;
	background: var(--tinte);
	color: var(--weiss);
	font-family: var(--text);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: var(--korn);
	pointer-events: none;
	z-index: 1;
	mix-blend-mode: overlay;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--weiss); }
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 2px solid var(--rot);
	outline-offset: 3px;
}

/* --- Bausteine ---------------------------------------------------------- */

.bahn {
	max-width: var(--breit);
	margin: 0 auto;
	padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
	padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
.bahn--eng { max-width: var(--eng); }

section { position: relative; z-index: 2; }
.abschnitt { padding-block: clamp(3.5rem, 9vw, 7rem); }
.abschnitt--blau { background: var(--blau); }
.abschnitt--hoch { background: var(--tinte-hoch); }
.abschnitt + .abschnitt:not([class*="--"]) { border-top: 1px solid var(--linie); }

/* Abschnittskopf: rote Linie, Kleinbuchstaben-Label, grosse Ueberschrift */
.kopfzeile { margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.marke {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-family: var(--text);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--rot);
	margin: 0 0 .75rem;
}
.marke::before {
	content: "";
	width: 1.75rem;
	height: 3px;
	background: var(--rot);
	flex: none;
}
.abschnitt--blau .marke { color: var(--weiss); }
.abschnitt--blau .marke::before { background: var(--weiss); }

h1, h2, h3, h4 {
	font-family: var(--kopf);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.03;
	text-transform: uppercase;
	text-wrap: balance;
	margin: 0;
}
h2 { font-size: clamp(1.85rem, 5.6vw, 3.4rem); }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: -.01em; }
h4 { font-size: 1rem; letter-spacing: .02em; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.vorspann { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--weiss); max-width: 38em; }
.leise { color: var(--leise); }
.zahl { font-variant-numeric: tabular-nums; }

/* Knoepfe */
.knopf {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--kopf);
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: .85rem 1.6rem;
	border: 2px solid var(--rot);
	background: var(--rot);
	color: var(--weiss);
	transition: background .15s, color .15s, transform .15s;
}
.knopf:hover { background: var(--rot-dunkel); border-color: var(--rot-dunkel); }
.knopf:active { transform: translateY(1px); }
.knopf--leer { background: none; border-color: var(--linie-stark); color: var(--weiss); }
.knopf--leer:hover { background: var(--weiss); color: var(--tinte); border-color: var(--weiss); }
.knopf--klein { padding: .55rem 1rem; font-size: .8rem; }

/* --- Kopfzeile ---------------------------------------------------------- */

.seitenkopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(11, 13, 18, .92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--linie);
	padding-top: env(safe-area-inset-top, 0px);
}
.seitenkopf__innen {
	max-width: var(--breit);
	margin: 0 auto;
	min-height: var(--kopfhoehe);
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
	padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
}
/* Logo und Ticket-Knopf sind bewusst gleich hoch (Kia, 2026-11-04). */
.logo { flex: none; display: block; }
.logo img { height: 5.6rem; width: auto; }
.kopf-ticket.knopf--klein { padding: 1.1rem 1.8rem; font-size: .95rem; }
.hauptmenue {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 1.8vw, 1.7rem);
	list-style: none;
	padding: 0;
	margin-block: 0;
}
.hauptmenue a {
	font-family: var(--kopf);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--weiss);
	padding-block: .4rem;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.hauptmenue a:hover { border-bottom-color: var(--rot); }
.hauptmenue a[aria-current="page"] { border-bottom-color: var(--rot); }
.kopf-ticket { flex: none; }
.burger {
	display: none;
	flex: none;
	margin-left: auto;
	background: none;
	border: 1px solid var(--linie-stark);
	color: var(--weiss);
	padding: .5rem .65rem;
	cursor: pointer;
	font: inherit;
	line-height: 1;
}
.burger svg { display: block; width: 1.25rem; height: 1.25rem; }

@media (max-width: 68rem) {
	.hauptmenue {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--tinte);
		border-bottom: 1px solid var(--linie);
		margin: 0;
		padding: .5rem 0 1rem;
	}
	.hauptmenue[hidden] { display: none; }
	.hauptmenue a {
		padding: .85rem max(1.25rem, env(safe-area-inset-left, 0px));
		border-bottom: 1px solid var(--linie);
		font-size: 1rem;
	}
	.hauptmenue a:hover { border-bottom-color: var(--linie); color: var(--rot); }
	.burger { display: block; }
	.kopf-ticket { margin-left: 0; order: 3; }
	.burger { order: 4; margin-left: .25rem; }
	.logo img { height: 4.8rem; }
	:root { --kopfhoehe: 6.6rem; }
}
@media (max-width: 26rem) {
	/* Hier begrenzt die Breite: Logo, Ticket-Knopf und Menuezeichen muessen
	   nebeneinander auf eine Linie passen (Kias Wunsch vom 2026-09). */
	.logo img { height: min(3.8rem, 14.2vw); }
	.kopf-ticket.knopf--klein { padding: .8rem 1rem; font-size: .78rem; }
	.seitenkopf__innen { gap: .55rem; }
	:root { --kopfhoehe: 5.2rem; }
}
@media (max-width: 21rem) {
	.logo img { height: 12.5vw; }
}

/* --- Hero --------------------------------------------------------------- */

.hero {
	position: relative;
	z-index: 2;
	min-height: min(42rem, 88svh);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--tinte);
	border-bottom: 4px solid var(--rot);
}
.hero__bild, .hero video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 55%;
	filter: saturate(.85) contrast(1.05);
}
.hero__schleier {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(7, 8, 16, .92) 0%, rgba(7, 8, 16, .45) 50%, rgba(7, 8, 16, .22) 100%),
		linear-gradient(to right, rgba(13, 42, 102, .4), transparent 65%);
}
.hero__innen {
	position: relative;
	width: 100%;
	max-width: var(--breit);
	margin: 0 auto;
	padding-left: max(1.25rem, env(safe-area-inset-left, 0px));
	padding-right: max(1.25rem, env(safe-area-inset-right, 0px));
	padding-block: clamp(2.5rem, 7vw, 5rem);
}
.hero__oben {
	font-family: var(--text);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--weiss);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.4rem;
}
.hero__oben .punkt { width: 5px; height: 5px; background: var(--rot); flex: none; }
/* Das Datum traegt die wichtigste Angabe – es steht groesser als der Rest der Zeile. */
.hero__datum {
	font-size: clamp(1rem, 2.1vw, 1.3rem);
	letter-spacing: .12em;
	line-height: 1.2;
}
@media (max-width: 34rem) {
	.hero__oben { font-size: .66rem; letter-spacing: .16em; gap: .5rem; margin-bottom: 1rem; }
	.hero { min-height: min(38rem, 82svh); }
	/* Schmaler Ausschnitt: Tanzflaeche und die kubanischen Fahnen bleiben im Bild */
	.hero__bild, .hero video { object-position: 55% 50%; }
	.hero__unten .knopf { flex: 1 1 10rem; justify-content: center; }
	.hero__wo { flex-basis: 100%; }
}

/* Der verdruckte Titel: rote und blaue Platte leicht versetzt */
.fehldruck {
	position: relative;
	display: block;
	font-family: var(--kopf);
	font-weight: 800;
	font-size: clamp(2.9rem, 12.5vw, 8.5rem);
	line-height: .85;
	letter-spacing: -.035em;
	text-transform: uppercase;
	margin: 0 0 1.5rem;
	isolation: isolate;
}
.fehldruck > span { display: block; }
.fehldruck .platte {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	pointer-events: none;
	user-select: none;
}
.fehldruck .platte--rot { color: var(--rot); transform: translate(-.055em, .035em); }
.fehldruck .platte--blau { color: var(--blau-hell); transform: translate(.05em, -.03em); }
.fehldruck .platte--weiss { position: relative; color: var(--weiss); }
.fehldruck em { font-style: normal; display: block; }

.hero__unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.25rem;
}
.hero__wo {
	font-size: .95rem;
	color: var(--weiss);
	border-left: 2px solid var(--rot);
	padding-left: .9rem;
	max-width: 18rem;
}

/* Folgt uns: Instagram und Facebook im Titelbild */
.hero__folgen {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .7rem;
	margin-top: 1.75rem;
}
.hero__folgen > span {
	font-family: var(--kopf);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--weiss);
	margin-right: .2rem;
}
.hero__folgen a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	color: var(--weiss);
	border: 1px solid rgba(244, 242, 237, .45);
	background: rgba(11, 13, 18, .35);
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.hero__folgen a:hover {
	background: var(--rot);
	border-color: var(--rot);
	transform: translateY(-2px);
}
.hero__folgen a:active { transform: translateY(0); }
/* Kasten bleibt 2,75rem - nur das Zeichen darin wird groesser (Kia, 2026-11-06).
   Zwei Groessen, weil das Facebook-f in seiner Zeichenflaeche mehr Rand hat
   als das Instagram-Quadrat: so wirken beide gleich gross. */
.hero__folgen svg { display: block; }
.hero__folgen .folgen-ig svg { width: 2rem; height: 2rem; }
.hero__folgen .folgen-fb svg { width: 2.2rem; height: 2.2rem; }

/* --- Willkommen: drei Bilder als Dreieck ------------------------------- */

.willkommen__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem);
	align-items: center;
}
.dreieck {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	gap: 0;
	/* Ein Bild ist immer genau die halbe Breite – so sind alle drei gleich gross.
	   Groesse also ueber max-width steuern: 40rem = 320 px je Bild. */
	width: 100%;        /* muss stehen: sonst haben die 1fr-Spalten keine Bezugsbreite */
	max-width: 40rem;
	margin-inline: auto;
}
.dreieck figure { margin: 0; position: relative; width: 100%; }
.dreieck figure:nth-child(1) {
	grid-column: 1 / -1;
	justify-self: center;
	width: 50%;
	z-index: 3;
	margin-bottom: -2.2rem;
}
/* Ueberlappung nur optisch verschieben, damit die Groessen gleich bleiben */
.dreieck figure:nth-child(2) { transform: translateX(.9rem); z-index: 2; }
.dreieck figure:nth-child(3) { transform: translateX(-.9rem); z-index: 1; }
.dreieck img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 3px solid var(--tinte);
	background: var(--tinte-hoch);
	filter: grayscale(.15);
}
.dreieck figure:nth-child(1) img { border-color: var(--rot); }
.dreieck figure:nth-child(2) img { border-color: var(--blau-hell); }
.dreieck figure:nth-child(3) img { border-color: var(--weiss); }

.willkommen h2 { margin-bottom: .6rem; }
.willkommen__datum {
	font-family: var(--kopf);
	font-size: clamp(1.05rem, 2.4vw, 1.4rem);
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rot);
	margin: 0 0 1.4rem;
}

@media (max-width: 54rem) {
	.willkommen__gitter { grid-template-columns: 1fr; gap: 2.5rem; }
	.dreieck { max-width: 24rem; }
	.dreieck figure:nth-child(1) { margin-bottom: -1.8rem; }
}

/* --- Reiter (Programm, Workshops) -------------------------------------- */

.reiter {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	border-bottom: 1px solid var(--linie);
	margin-bottom: 2.25rem;
	padding: 0;
	list-style: none;
}
.reiter button {
	font-family: var(--kopf);
	font-size: .88rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--leise);
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	padding: .7rem 1rem;
	margin-bottom: -1px;
	cursor: pointer;
	white-space: nowrap;
}
.reiter button:hover { color: var(--weiss); }
.reiter button[aria-selected="true"] { color: var(--weiss); border-bottom-color: var(--rot); }
.reiter button .tag-datum {
	display: block;
	font-family: var(--text);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: var(--leise);
}
.reiter button[aria-selected="true"] .tag-datum { color: var(--rot); }
.tafel[hidden] { display: none; }

/* --- Programm: Ablauf wie ein Laufplan --------------------------------- */

.tag__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1.75rem, 4vw, 3rem);
}
/* Ein einzelner Tag soll nicht ueber die ganze Breite laufen */
.tag__gitter--einer { grid-template-columns: minmax(0, 30rem); }
.ablauf { margin: 0; }
.ablauf h3 {
	display: flex;
	align-items: baseline;
	gap: .7rem;
	padding-bottom: .6rem;
	border-bottom: 2px solid var(--weiss);
	margin-bottom: .25rem;
}
.ablauf dl { margin: 0; }
.ablauf .reihe {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: .75rem;
	padding-block: .7rem;
	border-bottom: 1px solid var(--linie);
	align-items: baseline;
}
.ablauf dt {
	font-family: var(--kopf);
	font-weight: 700;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
	color: var(--rot);
	letter-spacing: .01em;
}
.abschnitt--blau .ablauf dt { color: #ffd0d8; }
.ablauf dd { margin: 0; font-size: .97rem; }

.djs { margin-top: 1.5rem; }
.djs h4 { color: var(--leise); margin-bottom: .6rem; }
.abschnitt--blau .djs h4 { color: rgba(244, 242, 237, .7); }
.djs ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.djs li {
	font-family: var(--kopf);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	border: 1px solid var(--linie-stark);
	padding: .35rem .7rem;
}
.ort-hinweis {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
	font-size: .93rem;
	color: var(--leise);
}
.abschnitt--blau .ort-hinweis { color: rgba(244, 242, 237, .78); }
.ort-hinweis strong { color: var(--weiss); font-weight: 600; }

/* --- Galerie Kuenstler -------------------------------------------------- */

.galerie-schalter { display: flex; gap: .4rem; margin-bottom: 2rem; flex-wrap: wrap; }
.galerie {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
}
.galerie[hidden] { display: none; }
.galerie figure {
	margin: 0;
	position: relative;
	background: var(--tinte-hoch);
	overflow: hidden;
}
.galerie img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	filter: grayscale(.35) contrast(1.05);
	transition: filter .25s, transform .4s;
}
.galerie figure:hover img { filter: none; transform: scale(1.03); }
.galerie figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 1.6rem .7rem .55rem;
	background: linear-gradient(to top, rgba(7, 8, 16, .93), transparent);
	font-family: var(--kopf);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
@media (max-width: 40rem) {
	.galerie { grid-template-columns: 1fr 1fr; }
	.galerie figcaption { font-size: .72rem; }
}

/* --- Workshop-Fahrplan -------------------------------------------------- */

.plan {
	display: grid;
	grid-template-columns: 6.5rem repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
}
.plan__kopf, .plan__zeit, .plan__zelle {
	background: var(--tinte);
	padding: .9rem .9rem;
	min-width: 0;
}
.plan__kopf {
	font-family: var(--kopf);
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	background: var(--tinte-hoch);
}
.plan__zeit {
	font-family: var(--kopf);
	font-size: .9rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--leise);
	background: var(--tinte-hoch);
	display: flex;
	align-items: center;
	line-height: 1.25;
}
.kurs { display: block; }
.kurs__titel {
	font-family: var(--kopf);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -.005em;
	display: block;
	margin-bottom: .2rem;
}
.kurs__wer {
	display: block;
	font-size: .84rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--leise);
}
/* Niveau als Wort – am Rechner sagen es die Farben, auf dem Handy dieser Text */
.kurs__niveau { display: none; }
.kurs__live {
	display: inline-block;
	margin-top: .45rem;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rot);
	border: 1px solid var(--rot);
	padding: .1rem .4rem;
}
/* Niveau: Flaeche plus Marke, damit es nicht nur an der Farbe haengt */
.plan__zelle--alle { box-shadow: inset 4px 0 0 var(--linie-stark); }
.plan__zelle--mittel { background: #15264f; box-shadow: inset 4px 0 0 var(--blau-hell); }
.plan__zelle--fort { background: #2a1020; box-shadow: inset 4px 0 0 var(--rot); }
.plan__zelle--frei { color: var(--leise); font-size: .9rem; }

.legende {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	align-items: center;
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
	font-size: .88rem;
}
.legende span { display: inline-flex; align-items: center; gap: .55rem; }
.legende i {
	width: 1.1rem;
	height: 1.1rem;
	flex: none;
	border: 1px solid var(--linie-stark);
}
.legende .n-alle { background: transparent; }
.legende .n-mittel { background: #15264f; border-left: 4px solid var(--blau-hell); }
.legende .n-fort { background: #2a1020; border-left: 4px solid var(--rot); }

/* Handy: aus dem Fahrplan werden Raum-Bloecke */
@media (max-width: 62rem) {
	.plan { display: block; border: 0; background: none; }
	.plan__kopf--leer { display: none; }
	.plan__kopf {
		border: 0;
		border-bottom: 2px solid var(--weiss);
		padding-inline: 0;
		margin-top: 2rem;
	}
	.plan__zeit + .plan__kopf { margin-top: 0; }   /* erster Raum direkt unter dem Reiter */
	.plan__zeit { display: none; }
	.plan__zelle {
		padding-inline: 0 0;
		padding-block: .9rem;
		border-bottom: 1px solid var(--linie);
		box-shadow: none !important;
		background: var(--tinte) !important;
		display: grid;
		grid-template-columns: 6.5rem 1fr;
		gap: .75rem;
		align-items: baseline;
	}
	.plan__zelle::before {
		content: attr(data-zeit);
		font-family: var(--kopf);
		font-weight: 700;
		font-size: .88rem;
		font-variant-numeric: tabular-nums;
		color: var(--leise);
	}
	.plan__zelle--mittel .kurs__titel { color: #9dc0ff; }
	.plan__zelle--fort .kurs__titel { color: #ff8ea1; }
	.kurs__niveau {
		display: inline-block;
		margin-top: .4rem;
		margin-right: .35rem;
		font-size: .66rem;
		font-weight: 700;
		letter-spacing: .14em;
		text-transform: uppercase;
		padding: .1rem .4rem;
		border: 1px solid var(--linie-stark);
		color: var(--leise);
	}
	.kurs__niveau--mittel { color: #9dc0ff; border-color: #9dc0ff; }
	.kurs__niveau--fort { color: #ff8ea1; border-color: #ff8ea1; }
	.legende { display: none; }
}

/* --- Location ----------------------------------------------------------- */

.ort__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}
.ort__bilder { display: grid; gap: 1px; background: var(--linie); }
.ort__bilder img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.ortkarte {
	border: 1px solid var(--linie);
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--tinte-hoch);
}
.ortkarte h3 { margin-bottom: .75rem; }
.ortkarte address { font-style: normal; font-size: 1rem; margin-bottom: 1rem; }
.ortkarte .wann {
	font-family: var(--kopf);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rot);
	display: block;
	margin-bottom: .5rem;
}

/* --- Kontakt ------------------------------------------------------------ */

.kontakt__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.kontaktzeile {
	display: block;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--linie);
	text-decoration: none;
}
.kontaktzeile:first-of-type { border-top: 1px solid var(--linie); }
.kontaktzeile b {
	display: block;
	font-family: var(--text);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--leise);
	margin-bottom: .2rem;
}
.kontaktzeile span {
	font-family: var(--kopf);
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	font-weight: 700;
	letter-spacing: -.01em;
}
.kontaktzeile[href]:hover span { color: var(--rot); }

/* --- Preise ------------------------------------------------------------- */

.paesse {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
}
.pass {
	background: var(--tinte);
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.1rem, 2.5vw, 1.6rem);
	display: flex;
	flex-direction: column;
	gap: .4rem;
}
.pass--hervor { background: var(--blau); }
.pass__name {
	font-family: var(--kopf);
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
}
.pass__was { font-size: .9rem; color: var(--leise); min-height: 2.8em; }
.pass--hervor .pass__was { color: rgba(244, 242, 237, .82); }
.pass__preis {
	font-family: var(--kopf);
	font-size: clamp(2.2rem, 6vw, 3.1rem);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
	margin-top: auto;
}
.pass__preis small { font-size: .42em; font-weight: 700; letter-spacing: 0; }

/* Kopf einer Pass-Tafel: Preis gross, daneben Name und Kaufknopf */
.passkopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2rem;
	padding-bottom: 1.75rem;
	margin-bottom: 1.75rem;
	border-bottom: 1px solid var(--linie);
}
.passkopf .pass__preis { margin: 0; line-height: .9; }
.passkopf h3 { margin-bottom: .2rem; }
.passkopf p { margin-bottom: .8rem; }
.abschnitt--blau .passkopf p.leise { color: rgba(244, 242, 237, .78); }
.abschnitt--blau .knopf--leer { border-color: rgba(244, 242, 237, .45); }

/* Abendkasse: einzelne Abende und Day Socials – gleiche Karten wie die Paesse */
.kasse { margin-top: clamp(2.75rem, 6vw, 4rem); }
.kasse h2 { font-size: clamp(1.4rem, 4vw, 2rem); margin-bottom: .5rem; }
.kasse__vor { font-size: .98rem; color: var(--leise); max-width: 42em; margin-bottom: 1.6rem; }
.paesse--kasse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 56rem) { .paesse--kasse { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .paesse--kasse { grid-template-columns: minmax(0, 1fr); } }
.kasse__fuss { font-size: .92rem; color: var(--leise); margin-top: 1.3rem; margin-bottom: 0; }

/* --- Hotels ------------------------------------------------------------- */

.hotels {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1px;
	background: var(--linie);
	border: 1px solid var(--linie);
}
.hotel {
	background: var(--tinte);
	padding: 1.4rem 1.3rem;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.hotel__weg {
	font-family: var(--kopf);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rot);
}
.hotel__weg.zu-fuss { color: #7dd3a0; }
.hotel h3 { font-size: 1.1rem; }
.hotel__adresse { font-size: .92rem; color: var(--leise); }
.hotel__hinweis { font-size: .88rem; color: var(--leise); font-style: italic; }
.hotel__links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .9rem; }

/* --- Rechtstexte -------------------------------------------------------- */

.rechtstext { font-size: 1rem; }
.rechtstext h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-top: 2.5rem; margin-bottom: .9rem; }
.rechtstext h3 { margin-top: 2rem; margin-bottom: .6rem; }
.rechtstext h2:first-child { margin-top: 0; }
.rechtstext p { margin-bottom: .9rem; }
.rechtstext strong { color: var(--weiss); }
.rechtstext a { color: var(--rot); }
.rechtstext hr { border: 0; border-top: 1px solid var(--linie); margin-block: 2rem; }
.rechtstext ul, .rechtstext ol { padding-left: 1.3rem; margin-bottom: 1rem; }
.rechtstext li { margin-bottom: .35rem; }

/* --- Seitenkopf der Unterseiten ---------------------------------------- */

.unterkopf {
	padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3vw, 2.5rem);
	border-bottom: 1px solid var(--linie);
	background:
		linear-gradient(to bottom, rgba(13, 42, 102, .35), transparent),
		var(--tinte);
}
.unterkopf h1 { font-size: clamp(2.1rem, 8vw, 4.2rem); margin-bottom: .75rem; }

/* --- Fusszeile ---------------------------------------------------------- */

.seitenfuss {
	position: relative;
	z-index: 2;
	background: var(--tinte-tief);
	border-top: 4px solid var(--rot);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	font-size: .93rem;
}
.seitenfuss__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2rem;
}
.seitenfuss h4 { color: var(--leise); margin-bottom: .8rem; letter-spacing: .14em; font-size: .74rem; }
.seitenfuss ul { list-style: none; padding: 0; margin: 0; }
.seitenfuss li { margin-bottom: .45rem; }
.seitenfuss a { text-decoration: none; color: var(--weiss); }
.seitenfuss a:hover { color: var(--rot); }
.seitenfuss__unten {
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--linie);
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	color: var(--leise);
	font-size: .85rem;
}
.seitenfuss__logo img { height: 3rem; width: auto; margin-bottom: 1rem; }

/* --- Ticketshop im Fenster (P-0002) ------------------------------------- */

.shopfenster {
	width: min(60rem, 94vw);
	height: min(48rem, 88svh);
	max-width: none;
	max-height: none;
	padding: 0;
	border: 0;
	background: var(--tinte);
	color: var(--weiss);
	box-shadow: 0 0 0 4px var(--rot), 0 1.5rem 5rem rgba(0, 0, 0, .65);
	overflow: hidden;
}
.shopfenster[open] { display: flex; flex-direction: column; }
.shopfenster::backdrop { background: rgba(7, 8, 16, .88); }
.shopfenster__kopf {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex: none;
	padding: .8rem 1rem;
	background: var(--blau);
	border-bottom: 3px solid var(--rot);
}
.shopfenster__logo { height: 2.4rem; width: auto; flex: none; }
.shopfenster__titel {
	font-family: var(--kopf);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-right: auto;
}
.shopfenster__neu {
	font-family: var(--kopf);
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--weiss);
	text-decoration: none;
	border-bottom: 1px solid var(--linie-stark);
	padding-bottom: .1rem;
	white-space: nowrap;
}
.shopfenster__neu:hover { border-bottom-color: var(--weiss); }
.shopfenster__zu {
	flex: none;
	background: var(--rot);
	border: 0;
	color: var(--weiss);
	width: 2.4rem;
	height: 2.4rem;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}
.shopfenster__zu:hover { background: var(--rot-dunkel); }
.shopfenster__zu svg { width: 1.2rem; height: 1.2rem; }
.shopfenster__buehne { position: relative; flex: 1 1 auto; min-height: 0; }
.shopfenster__laden {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	margin: 0;
	background: var(--tinte);
	color: var(--leise);
	font-size: .95rem;
	letter-spacing: .04em;
}
.shopfenster__laden[hidden] { display: none; }
.shopfenster__rahmen {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
	background: #fff;
}
@media (max-width: 40rem) {
	.shopfenster { width: 100vw; height: 100svh; box-shadow: none; }
	.shopfenster__titel { font-size: .8rem; }
	.shopfenster__wann { display: none; }   /* Titel bleibt einzeilig */
	.shopfenster__neu { display: none; }
	.shopfenster__logo { height: 2rem; }
}

/* --- Hinweisband (nur solange 2027 noch nicht feststeht) --------------- */

.band-hinweis {
	background: var(--rot);
	color: var(--weiss);
	text-align: center;
	font-size: .88rem;
	font-weight: 600;
	padding: .6rem 1rem;
	position: relative;
	z-index: 40;
}