/* Barlow Condensed (SIL OFL 1.1, siehe /fonts/OFL.txt), lokal ausgeliefert: keine Anfragen an Dritte */
@font-face {
	font-family: "Barlow Condensed";
	src: url("/fonts/barlow-condensed-800.woff2") format("woff2");
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: "Barlow Condensed";
	src: url("/fonts/barlow-condensed-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

/* Farben aus dem Foto: Himmel als Fläche, Krümelmonster-Blau als einziger Akzent.
   Kontraste gegen --bg: fg 16.3:1, muted 6.9:1, accent 5.9:1 (dunkel: 15.8, 7.6, 8.7) */
:root {
	--bg: #F2F5F8;
	--fg: #121821;
	--muted: #4B5563;
	--accent: #1D5BB8;
	--hairline: #D3DAE3;
	--highlight: color-mix(in srgb, var(--accent) 18%, transparent);
	--display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0E1218;
		--fg: #E7ECF2;
		--muted: #9BA6B5;
		--accent: #7FB2FF;
		--hairline: #263041;
		--highlight: color-mix(in srgb, var(--accent) 22%, transparent);
	}
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 1.0625rem/1.55 var(--text);
	-webkit-font-smoothing: antialiased;
}

main, footer {
	max-width: 36rem;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* Links in Textfarbe mit blauem Balken darunter, beim Hover füllt sich der Balken wie ein Textmarker */
a {
	--bar: var(--accent);
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--bar), var(--bar)), linear-gradient(var(--highlight), var(--highlight));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px, 100% 0;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding-bottom: 1px;
	transition: background-size 0.15s ease-out;
}

a:hover {
	background-size: 100% 2px, 100% 100%;
}

@media (prefers-reduced-motion: reduce) {
	a {
		transition: none;
	}
}

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

p, h1, h2, h3, ol, ul, dl, dd {
	margin: 0;
}

/* --- Kopf als Festivalplakat --- */

.poster {
	padding-block: 3rem 2.5rem;
	text-align: center;
}

.portrait img {
	display: block;
	width: min(70vw, 18rem);
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin: 0 auto 2rem;
	border-radius: 1.25rem;
}

h1 {
	font: 800 clamp(3.25rem, 15vw, 6rem)/0.9 var(--display);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.aka {
	margin-top: 0.5rem;
	color: var(--accent);
	font: 600 1.375rem/1.2 var(--display);
}

.lineup {
	margin-top: 1.75rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--hairline);
	font-family: var(--display);
	text-transform: uppercase;
	text-wrap: balance;
}

.lineup p + p {
	margin-top: 0.375rem;
}

.headliner {
	font-weight: 800;
	font-size: clamp(1.875rem, 8vw, 2.75rem);
	line-height: 1;
}

.support {
	font-weight: 600;
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	line-height: 1.1;
}

.opener {
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--muted);
}

.star {
	color: var(--accent);
	font-size: 0.6em;
	vertical-align: 0.2em;
	margin-inline: 0.15em;
}

.venue {
	margin-top: 1.25rem;
	color: var(--muted);
	font-size: 0.9375rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --- Inhalt --- */

section {
	padding-block: 2rem;
	border-top: 1px solid var(--hairline);
}

h2 {
	margin-bottom: 1rem;
	font: 600 1.5rem/1.1 var(--display);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

section > p + p {
	margin-top: 0.75rem;
}

.stations {
	padding: 0;
	list-style: none;
	display: grid;
	gap: 1.25rem;
}

.stations li {
	display: grid;
	grid-template-columns: 7.25rem 1fr;
	gap: 1rem;
}

.when {
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

h3 {
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
}

.note {
	color: var(--muted);
	font-size: 0.9375rem;
}

.stack {
	display: grid;
	gap: 0.5rem;
}

.stack div {
	display: grid;
	grid-template-columns: 7.25rem 1fr;
	gap: 1rem;
}

.stack dt {
	color: var(--muted);
}

/* RaB-Logo neben dem Text über mich, ohne Link-Balken */
.rab-logo {
	float: right;
	width: clamp(7.5rem, 32vw, 9.5rem);
	margin: 0 0 0.5rem 1.25rem;
	background: none;
	padding: 0;
}

.rab-logo img {
	display: block;
	width: 100%;
	height: auto;
}

section::after {
	content: "";
	display: block;
	clear: both;
}

/* die übrigen Festivals bewusst leiser als die Stationen */
.also {
	margin-top: 1.5rem;
	color: var(--muted);
	font-size: 0.9375rem;
}

.also a {
	--bar: var(--muted);
}

.contact {
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
}

/* Zeitspalte über den Inhalt, wenn es schmal wird */
@media (max-width: 22rem) {
	.stations li, .stack div {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

/* Linie so breit wie die der Abschnitte, also ohne den Seitenrand von main */
footer {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	width: min(33.5rem, 100% - 2.5rem);
	padding: 2rem 0 3rem;
	border-top: 1px solid var(--hairline);
	font-size: 0.9375rem;
}

footer a {
	--bar: var(--muted);
	color: var(--muted);
}

/* --- Unterseiten (Impressum, Datenschutz, 404) --- */

.page {
	padding-block: 3rem 2rem;
}

.page h1 {
	font-size: clamp(2.5rem, 10vw, 3.5rem);
	margin-bottom: 1.5rem;
}

.page h2 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.page p + p {
	margin-top: 0.75rem;
}

.page ul {
	padding-left: 1.25rem;
	margin-top: 0.5rem;
}

.back {
	display: inline-block;
	margin-bottom: 2rem;
}