/* Bluesm@il – Stylesheet
   Nachtblau mit Bernstein-Akzent, mobile-first. Keine externen Ressourcen. */

:root {
	--bg: #0a1424;
	--surface: #0f1d33;
	--card: #13253f;
	--card-hover: #182e4e;
	--line: #24406a;
	--text: #eaf0f7;
	--text-soft: #d3dce8;
	--muted: #9db0c8;
	--blue: #0c85ca;
	--accent: #e0a94a;
	--accent-strong: #f3c068;
	--accent-ink: #1a1306;
	--danger: #b33a28;

	--font-head: "Bahnschrift SemiCondensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap: calc(902px + 2 * var(--gutter)); /* Inhalt max. 902 px = Breite der Kopf- und Slideshow-Bilder */
	--gutter: clamp(16px, 4vw, 32px);
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: 0 10px 30px rgb(0 0 0 / 0.35);
	--header-h: 64px;
}

/* ---------- Basis ---------- */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Platz für die Scrollbar immer freihalten – sonst springt der Inhalt
	   beim Wechsel zwischen kurzen und langen Seiten seitlich */
	scrollbar-gutter: stable;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background:
		radial-gradient(1200px 520px at 50% -180px, rgb(12 133 202 / 0.28), transparent 70%),
		var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
	line-height: 1.65;
}

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

img {
	height: auto;
}

a {
	color: var(--accent);
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:hover {
	color: var(--accent-strong);
}

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

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
	margin: 0 0 0.5em;
}

h1 {
	font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
}

h2 {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
}

h3 {
	font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.45rem);
}

p {
	margin: 0 0 1em;
}

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

.skip {
	position: absolute;
	left: 8px;
	top: -100px;
	z-index: 100;
	padding: 8px 14px;
	background: var(--accent);
	color: var(--accent-ink);
	border-radius: var(--radius-sm);
}

.skip:focus {
	top: 8px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Header & Navigation ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgb(10 20 36 / 0.88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: var(--header-h);
}

/* Offizielles Logo: schwarz auf weißem Schild */
.logo {
	flex: none;
	display: inline-flex;
	padding: 6px 12px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 10px rgb(0 0 0 / 0.3);
	line-height: 0;
}

.logo img {
	width: auto;
	height: 34px;
}

@media (max-width: 600px) {
	.logo img {
		height: 26px;
	}
}

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 14px;
	background: transparent;
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	font: 600 0.95rem var(--font-head);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-icon {
	position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle-icon::before {
	top: -6px;
}

.nav-toggle-icon::after {
	top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
	transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
	transform: translateY(-6px) rotate(-45deg);
}

.main-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav > ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.main-nav > ul > li > a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: var(--text);
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--radius-sm);
	position: relative;
}

.main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 6px;
	height: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transition: transform 0.2s ease;
}

.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a[aria-current="page"]::after,
.main-nav .is-section > a::after {
	transform: scaleX(1);
}

.main-nav > ul > li > a[aria-current="page"],
.main-nav .is-section > a {
	color: var(--accent);
}

/* Untermenüs */

.has-sub {
	position: relative;
	display: flex;
	align-items: center;
}

.has-sub > a {
	padding-right: 4px !important;
}

.has-sub > a::after {
	right: 4px !important;
}

.sub-toggle {
	display: grid;
	place-items: center;
	width: 26px;
	min-height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--muted);
	cursor: pointer;
}

.sub-toggle::before {
	content: "";
	width: 7px;
	height: 7px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.has-sub.is-open > .sub-toggle::before {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.sub-toggle:hover,
.has-sub.is-open > .sub-toggle {
	color: var(--accent);
}

.sub a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 14px;
	color: var(--text);
	font-size: 0.97rem;
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.sub a:hover {
	background: var(--card-hover);
	color: var(--text);
}

.sub a[aria-current="page"] {
	color: var(--accent);
	font-weight: 600;
}

.sub li.sep {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--line);
}

@media (min-width: 901px) {
	.sub {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 10;
		min-width: 230px;
		padding: 8px;
		background: var(--surface);
		border: 1px solid var(--line);
		border-radius: var(--radius);
		box-shadow: var(--shadow);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	}

	/* unsichtbare Brücke, damit das Menü beim Hinüberfahren offen bleibt */
	.sub::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -12px;
		height: 12px;
	}

	.has-sub.is-open > .sub {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition-delay: 0s;
	}

	@media (hover: hover) {
		.has-sub:hover > .sub {
			opacity: 1;
			visibility: visible;
			transform: none;
			transition-delay: 0s;
		}
	}
}

@media (max-width: 900px) {
	.js .nav-toggle {
		display: inline-flex;
	}

	.js .main-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		max-height: calc(100vh - var(--header-h));
		max-height: calc(100dvh - var(--header-h));
		overflow-y: auto;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		box-shadow: var(--shadow);
		display: none;
	}

	.js .main-nav.is-open {
		display: block;
	}

	.js .main-nav > ul {
		flex-direction: column;
		gap: 0;
		padding: 8px var(--gutter) 16px;
	}

	.js .main-nav > ul > li {
		border-bottom: 1px solid var(--line);
	}

	.js .main-nav > ul > li > a {
		min-height: 48px;
		font-size: 1.1rem;
		border-radius: 0;
	}

	.js .main-nav > ul > li > a::after {
		display: none;
	}

	.js .has-sub {
		flex-wrap: wrap;
	}

	.js .has-sub > a {
		flex: 1;
	}

	.js .sub-toggle {
		width: 48px;
		min-height: 48px;
		border-left: 1px solid var(--line);
	}

	.js .sub {
		display: none;
		flex-basis: 100%;
		padding: 0 0 10px 14px;
	}

	.js .has-sub.is-open > .sub {
		display: block;
	}

	.js .sub a {
		min-height: 44px;
		font-size: 1rem;
	}

	.no-js .header-inner {
		flex-wrap: wrap;
		padding-block: 8px;
	}

	.no-js .sub-toggle,
	.no-js .sub {
		display: none;
	}
}


/* ---------- Main / Footer ---------- */

main {
	flex: 1;
	padding-bottom: 64px;
}

.site-footer {
	border-top: 1px solid var(--line);
	background: var(--surface);
	color: var(--muted);
	font-size: 0.95rem;
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding-block: 24px;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.site-footer a:hover {
	color: var(--accent);
}

/* Mobil: eine schmale Zeile ohne Umbruch */
@media (max-width: 600px) {
	.footer-inner {
		flex-wrap: nowrap;
		gap: 12px;
		padding-block: 12px;
		font-size: 0.8rem;
		white-space: nowrap;
	}

	.footer-name {
		display: none;
	}

	.footer-links {
		flex-wrap: nowrap;
		gap: 12px;
	}

	.site-footer a {
		display: inline-block;
		padding-block: 6px;
	}
}

/* ---------- Seitenkopf (Panorama) ---------- */

.page-hero {
	position: relative;
	margin: 0 auto 32px;
	max-width: var(--wrap);
	padding-inline: var(--gutter);
	padding-top: 24px;
}

.page-hero-media {
	position: relative;
	border-radius: var(--radius);
	overflow: hidden;
	height: clamp(140px, 26vw, 260px);
	background: #000;
}

.page-hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	filter: saturate(0.9);
}

.page-hero-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgb(10 20 36 / 0.92) 0%, rgb(10 20 36 / 0.2) 55%, transparent 100%);
}

.page-hero h1 {
	position: absolute;
	left: calc(var(--gutter) + clamp(16px, 3vw, 32px));
	right: calc(var(--gutter) + clamp(16px, 3vw, 32px));
	font-size: clamp(1.7rem, 1.2rem + 3vw, 3.25rem);
	overflow-wrap: anywhere;
	hyphens: auto;
	bottom: clamp(8px, 2vw, 20px);
	margin: 0;
	z-index: 1;
	text-shadow: 0 2px 12px rgb(0 0 0 / 0.6);
}

/* ---------- Unternavigation (Tab-Leiste) ----------
   Eine Zeile Textlinks, aktive Seite mit Bernstein-Unterstrich.
   Passt sie nicht in die Breite (Handy), wird sie seitlich gewischt. */

.subnav {
	position: relative;
	margin-bottom: 28px;
}

.subnav ul {
	display: flex;
	align-items: stretch;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden; /* nur seitlich wischen, nicht hoch/runter */
	box-shadow: inset 0 -1px 0 var(--line); /* Grundlinie, der Unterstrich liegt darüber */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.subnav ul::-webkit-scrollbar {
	display: none;
}

.subnav li {
	flex: none;
	display: flex;
}

/* Trennstrich vor einer neuen Gruppe (z. B. Presse) */
.subnav li.sep {
	position: relative;
	padding-left: 26px;
}

.subnav li.sep::before {
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	bottom: 12px;
	width: 1px;
	background: var(--line);
}

.subnav a {
	display: flex;
	align-items: center;
	min-height: 46px;
	color: var(--muted);
	font-family: var(--font-head);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.subnav a:hover {
	color: var(--text);
}

.subnav a[aria-current="page"] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* Pfeile links/rechts, solange es seitlich noch weitergeht (Verlauf dahinter) */
.subnav-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	display: none;
	align-items: center;
	width: 48px;
	padding: 0;
	border: 0;
	color: var(--accent);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.subnav-arrow.is-prev {
	left: 0;
	justify-content: flex-start;
	background: linear-gradient(to left, transparent, var(--bg) 55%);
}

.subnav-arrow.is-next {
	right: 0;
	justify-content: flex-end;
	background: linear-gradient(to right, transparent, var(--bg) 55%);
}

.subnav-arrow::before {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding-bottom: 3px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--card);
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
}

.subnav-arrow:hover::before {
	border-color: var(--accent);
}

.subnav-arrow.is-prev::before {
	content: "‹";
}

.subnav-arrow.is-next::before {
	content: "›";
}

.subnav.has-prev .subnav-arrow.is-prev,
.subnav.has-more .subnav-arrow.is-next {
	display: flex;
}

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

.section {
	margin-bottom: 48px;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 20px;
}

.section-head h2 {
	margin: 0;
}

.eyebrow {
	display: block;
	color: var(--accent);
	font-family: var(--font-head);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(18px, 3vw, 28px);
}

.prose {
	max-width: 70ch;
}

.prose strong,
.prose b {
	color: #fff;
}

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

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 999px;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}

.btn:hover {
	background: var(--accent-strong);
	color: var(--accent-ink);
}

.btn-ghost {
	background: transparent;
	color: var(--accent);
	border: 1px solid var(--accent);
}

.btn-ghost:hover {
	background: rgb(224 169 74 / 0.12);
	color: var(--accent-strong);
}

.split {
	display: grid;
	gap: clamp(20px, 4vw, 40px);
	align-items: start;
}

@media (min-width: 760px) {
	.split {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

.figure {
	margin: 0;
}

/* Bilder nie über ihre Originalgröße hinaus vergrößern (sonst unscharf) */
.figure img {
	width: auto;
	max-width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.split .figure {
	justify-self: center;
}

.figure figcaption {
	margin-top: 10px;
	color: var(--muted);
	font-size: 0.92rem;
}

/* ---------- Home ---------- */

.hero {
	padding-top: 24px;
	margin-bottom: 40px;
}

.slideshow {
	position: relative;
	max-width: min(100%, calc(72vh * 1.513));
	margin-inline: auto;
	aspect-ratio: 902 / 596;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
	box-shadow: var(--shadow);
}

.slideshow img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 2s ease;
}

.slideshow img.is-active {
	opacity: 1;
}

.intro-grid {
	display: grid;
	gap: 20px;
}

@media (min-width: 860px) {
	.intro-grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
}

/* ---------- Termine ---------- */

.gig-list {
	display: grid;
	gap: 14px;
}

.gig {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: clamp(14px, 3vw, 24px);
	align-items: start;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(14px, 2.5vw, 22px);
}

.gig-date {
	display: grid;
	justify-items: center;
	align-content: center;
	width: clamp(68px, 14vw, 88px);
	padding: 10px 6px;
	border-radius: var(--radius-sm);
	background: var(--bg);
	border: 1px solid var(--line);
	font-family: var(--font-head);
	line-height: 1;
	text-align: center;
}

.gig-day {
	font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
	font-weight: 700;
	color: var(--accent);
}

.gig-month {
	margin-top: 4px;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gig-year {
	margin-top: 4px;
	font-size: 0.8rem;
	color: var(--muted);
}

.gig-date.is-year-only {
	align-self: stretch;
}

.gig .gig-date.is-year-only .gig-day {
	font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
	text-decoration: none;
}

/* Text links, Link-Buttons rechts auf Höhe der letzten Textzeile; bei wenig Platz darunter */
.gig-body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px 20px;
	min-width: 0;
}

.gig-text {
	flex: 1 1 260px;
	min-width: 0;
}

.gig-title {
	font-size: clamp(1.2rem, 1.1rem + 0.6vw, 1.45rem);
	margin-bottom: 4px;
}

.gig-meta {
	margin: 0 0 6px;
	color: var(--muted);
}

.gig-meta .time {
	color: var(--text);
	font-weight: 600;
}

.gig-info {
	margin: 0 0 8px;
}

.gig-text > :last-child {
	margin-bottom: 0;
}

.gig-action {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 100%;
}

.gig-action .btn {
	min-height: 38px;
	max-width: 100%;
	font-size: 0.92rem;
	line-height: 1.25;
	padding-block: 8px;
	text-align: left;
}

.badge {
	display: inline-block;
	margin-bottom: 6px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--danger);
	color: #fff;
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gig.is-cancelled .gig-title,
.gig.is-cancelled .gig-day {
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.gig-list.is-compact .gig {
	padding: 12px 16px;
}

.archive-year {
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	display: flex;
	align-items: baseline;
	gap: 12px;
}

/* Abstand zwischen den Jahresblöcken (unter den Tabs gilt der normale Tab-Abstand) */
.archive-section + .archive-section {
	margin-top: 40px;
}

.archive-year .count {
	color: var(--muted);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 400;
}

.empty {
	margin: 0;
	padding: 28px;
	text-align: center;
	color: var(--muted);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}

/* ---------- News ---------- */

.news-list {
	display: grid;
	gap: 24px;
}

.news-item {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(18px, 3vw, 28px);
}

.news-kopf {
	display: block;
	color: var(--accent);
	font-family: var(--font-head);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 4px;
}

.news-item h2 {
	font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
	margin-bottom: 4px;
}

.news-sub {
	color: var(--muted);
	margin-bottom: 16px;
}

.news-media {
	display: grid;
	gap: 14px;
	margin: 16px 0;
}

.news-media img {
	width: auto;
	max-width: 100%;
	max-height: 80vh;
	margin-inline: auto;
	border-radius: var(--radius-sm);
}

.news-text {
	color: var(--text-soft);
}

.news-text b,
.news-text strong {
	color: #fff;
}

.news-more {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* ---------- Band / Personen ---------- */

.person {
	display: grid;
	gap: clamp(20px, 4vw, 36px);
	align-items: start;
}

@media (min-width: 760px) {
	.person {
		grid-template-columns: fit-content(45%) minmax(0, 1fr);
	}
}

/* Kontakt: Foto und Kasten gleich hoch */
.person.is-contact {
	align-items: stretch;
}

.person.is-contact .card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-block: 20px;
}

.person.is-contact h2 {
	margin-bottom: 0;
}

.person.is-contact .contact-list {
	margin-top: 10px;
	gap: 8px;
}

@media (min-width: 760px) {
	.person.is-contact .figure img {
		height: 100%;
		object-fit: cover;
	}
}

.person-facts {
	color: var(--muted);
	margin-bottom: 16px;
}

.quote-list {
	display: grid;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quote {
	margin: 0;
	padding: 18px 22px;
	background: var(--card);
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.quote p {
	margin: 0 0 8px;
}

.quote cite {
	color: var(--accent);
	font-family: var(--font-head);
	font-size: 0.9rem;
	font-style: normal;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Media ---------- */

.gallery {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}

.gallery figure {
	margin: 0;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain; /* ganzes Foto zeigen, auch Collagen */
	background: #000;
	transition: transform 0.25s ease;
}

.gallery figure:hover img {
	transform: scale(1.03);
}

/* ---------- Foto-Viewer ---------- */

[data-lightbox] img {
	cursor: zoom-in;
}

.lightbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 56px 16px 24px;
	border: 0;
	background: transparent;
	color: var(--text);
	overflow: hidden;
}

.lightbox[open] {
	display: grid;
	place-items: center;
}

.lightbox::backdrop {
	background: rgb(5 10 20 / 0.94);
}

.lightbox-figure {
	display: grid;
	justify-items: center;
	gap: 12px;
	margin: 0;
	max-width: 100%;
}

/* Bild mit direkt angehängten Bedienelementen */
.lightbox-stage {
	position: relative;
	line-height: 0;
	touch-action: pan-y; /* waagerechtes Wischen an das Skript geben */
}

.lightbox-stage img {
	/* Platz links/rechts für die Pfeile lassen */
	max-width: min(calc(100vw - 160px), 1400px);
	max-height: calc(100vh - 150px);
	width: auto;
	height: auto;
	border-radius: var(--radius-sm);
	box-shadow: 0 20px 60px rgb(0 0 0 / 0.6);
	user-select: none;
	-webkit-user-drag: none;
}

.lightbox-figure figcaption {
	max-width: 70ch;
	color: var(--muted);
	text-align: center;
}

.lightbox-btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: rgb(15 29 51 / 0.9);
	color: var(--text);
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.lightbox-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.lightbox-close {
	top: -56px;
	right: 0;
}

.lightbox-prev,
.lightbox-next {
	top: 50%;
	transform: translateY(-50%);
}

.lightbox-prev {
	right: calc(100% + 14px);
}

.lightbox-next {
	left: calc(100% + 14px);
}

.lightbox.is-single .lightbox-prev,
.lightbox.is-single .lightbox-next {
	display: none;
}

.lightbox-count {
	position: absolute;
	top: -42px;
	left: 0;
	color: var(--muted);
	font-size: 0.9rem;
	line-height: 1;
}

/* Mobil: Pfeile unter das Bild */
@media (max-width: 600px) {
	.lightbox-stage img {
		max-width: calc(100vw - 32px);
		max-height: calc(100vh - 220px);
	}

	.lightbox-figure {
		gap: 76px;
	}

	.lightbox-prev,
	.lightbox-next {
		top: calc(100% + 12px);
		transform: none;
	}

	.lightbox-prev {
		right: auto;
		left: 0;
	}

	.lightbox-next {
		left: auto;
		right: 0;
	}
}

.gallery figcaption {
	padding: 12px 16px;
	color: var(--muted);
	font-size: 0.95rem;
}

.video-grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
}

.video {
	margin: 0;
}

.video h2 {
	font-size: 1.1rem;
}

.video-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: #000;
}

.video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.disco {
	display: grid;
	gap: 20px;
}

@media (min-width: 700px) {
	.disco {
		grid-template-columns: 1fr 1fr;
	}
}

.disco ol,
.disco ul {
	margin: 0;
	padding-left: 1.3em;
}

.disco li {
	margin-bottom: 6px;
}

/* ---------- Download ---------- */

.download-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}

.download {
	display: flex;
	flex-direction: column;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.download-thumb {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #000;
}

.download-thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.download-thumb.is-logo {
	background: #fff;
}

.download-thumb.is-logo img {
	object-fit: contain;
	padding: 16px;
}

.download-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1;
	padding: 16px;
}

.download-body h2 {
	margin: 0;
	font-size: 1.15rem;
}

.download-body dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 12px;
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 0.92rem;
}

.download-body dd {
	margin: 0;
	color: var(--text);
}

.download-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.download-actions .btn {
	min-height: 38px;
	font-size: 0.92rem;
}

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

.contact-list {
	display: grid;
	gap: 14px;
	margin: 20px 0 0;
}

.contact-list div {
	display: grid;
	gap: 2px;
}

.contact-list dt {
	color: var(--muted);
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.contact-list dd {
	margin: 0;
	font-size: 1.2rem;
	font-weight: 600;
}

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

.legal h2 {
	font-size: 1.35rem;
	margin-top: 1.6em;
}

.legal h3 {
	font-size: 1.15rem;
	margin-top: 1.4em;
}

.legal {
	overflow-wrap: anywhere;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}

/* Fokusrahmen in der Galerie nach innen, sonst schneidet overflow:hidden ihn ab */
.gallery img:focus-visible {
	outline-offset: -3px;
}

/* Mobilmenü offen: Seite dahinter nicht scrollen */
html.nav-open {
	overflow: hidden;
}

@media (min-width: 901px) {
	html.nav-open {
		overflow: visible;
	}
}

.news-video {
	max-width: 640px;
	margin: 16px auto;
}

/* Sehr schmale Handys (≤ 360 px): Footer-Zeile etwas enger, damit sie ohne Umbruch passt */
@media (max-width: 360px) {
	.footer-inner,
	.footer-links {
		gap: 8px;
	}

	.footer-inner {
		font-size: 0.74rem;
	}
}