@font-face {
	font-family: 'Caviar Dreams';
	src: url("CaviarDreams/CaviarDreams.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: 'Caviar Dreams';
	font-weight: bold;
	src: url("CaviarDreams/CaviarDreams_Bold.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: 'Caviar Dreams';
	font-style: italic;
	src: url("CaviarDreams/CaviarDreams_Italic.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: Andada;
	src: url("andada/Andada-Regular.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: Andada;
	font-style: italic;
	src: url("andada/Andada-Italic.otf") format("opentype");
	font-display: swap;
}
@font-face {
	font-family: Andada;
	font-weight: bold;
	src: url("andada/Andada-Bold.otf") format("opentype");
	font-display: swap;
}

/* ###################################################### */
/* ####################### TOKENS ####################### */
/* ###################################################### */

:root {
	/* Markenfarben (siehe img/Farbcode.jpg) */
	--teal: #007d77;
	--teal-dark: #005f5a;
	--teal-photo: #40a9aa;   /* Hintergrund des Bandfotos, nur für Akzente auf Schwarz */
	--grey: #5c5a5b;

	--black: #000;
	--ink: #2d2d30;
	--paper: #fff;
	--tint: #eef5f4;
	--line: #dbe5e4;
	--on-dark: #dde1e0;
	--on-dark-muted: #9a9e9d;

	--font-display: 'Caviar Dreams', 'Century Gothic', 'Avenir Next', sans-serif;
	--font-serif: Andada, Georgia, serif;

	--header-h: 72px;
	--gutter: clamp(16px, 4vw, 40px);
	--section-y: clamp(64px, 10vw, 128px);
	--radius: 4px;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--hexagon: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ###################################################### */
/* ###################### GENERAL ####################### */
/* ###################################################### */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-h);
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--black);
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.125rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

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

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

a {
	color: var(--teal);
	text-underline-offset: .2em;
}
a:hover {
	color: var(--teal-dark);
}

:focus-visible {
	outline: 3px solid var(--teal);
	outline-offset: 3px;
}
.site-header :focus-visible,
.hero :focus-visible,
.offers :focus-visible,
.section-dark :focus-visible,
.section-teal :focus-visible,
.contact-bar :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--paper);
}

.container {
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 10px 16px;
	background: var(--paper);
	color: var(--black);
}
.skip-link:focus {
	top: 16px;
}

.eyebrow {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.05rem;
	color: var(--teal);
	margin-bottom: .5rem;
}

.lead {
	font-size: clamp(1.3rem, 2.2vw, 1.6rem);
	line-height: 1.4;
	font-weight: bold;
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	min-height: 48px;
	padding: 12px 28px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 1rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
@media (hover: hover) and (pointer: fine) {
	.btn:hover {
		transform: translateY(-2px);
	}
}
.btn-primary {
	background: var(--teal);
	color: var(--paper);
}
.btn-primary:hover {
	background: var(--teal-dark);
	color: var(--paper);
}
.btn-light {
	background: var(--paper);
	color: var(--teal);
}
.btn-light:hover {
	background: var(--black);
	color: var(--paper);
}
.btn-ghost {
	border-color: rgba(255, 255, 255, .8);
	color: var(--paper);
}
.btn-ghost:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--black);
}
.btn-outline {
	border-color: var(--teal);
	color: var(--teal);
}
.btn-outline:hover {
	background: var(--teal);
	color: var(--paper);
}

/* Einblende-Animation, nur mit JS und ohne reduzierte Bewegung */
.js .reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .7s ease-out, transform .7s ease-out;
}
.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.js .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.btn:hover {
		transform: none;
	}
}

/* ###################################################### */
/* ####################### HEADER ####################### */
/* ###################################################### */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	height: var(--header-h);
	background: var(--black);
	font-family: var(--font-serif);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--paper);
	text-decoration: none;
}
.brand img {
	width: 56px;
	height: 56px;
}
.brand-name {
	font-family: var(--font-display);
	font-weight: bold;
	font-size: 1.15rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--paper);
}
.brand-name span {
	color: var(--teal-photo);
}
.brand:hover {
	color: var(--paper);
}

.site-nav ul {
	display: flex;
	align-items: center;
	gap: 4px;
}
.site-nav a {
	display: block;
	padding: 8px 14px;
	color: var(--paper);
	font-size: 1.15rem;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color .2s, background-color .2s, border-color .2s;
}
.site-nav a:hover,
.site-nav a.is-active {
	color: var(--paper);
	border-bottom-color: var(--teal-photo);
}
.site-nav .nav-cta {
	margin-left: 12px;
	padding: 8px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--teal);
}
.site-nav .nav-cta:hover,
.site-nav .nav-cta.is-active {
	background: var(--paper);
	color: var(--teal);
}

.nav-toggle {
	display: none;
	position: relative;
	width: 48px;
	height: 48px;
	margin-right: -12px;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
	position: absolute;
	left: 12px;
	width: 24px;
	height: 2px;
	background: var(--paper);
	transition: transform .25s, background-color .25s;
}
.nav-toggle-bar {
	top: 23px;
}
.nav-toggle-bar::before,
.nav-toggle-bar::after {
	content: "";
	left: 0;
}
.nav-toggle-bar::before {
	transform: translateY(-8px);
}
.nav-toggle-bar::after {
	transform: translateY(8px);
}
.nav-open .nav-toggle-bar {
	background: transparent;
}
.nav-open .nav-toggle-bar::before {
	transform: rotate(45deg);
}
.nav-open .nav-toggle-bar::after {
	transform: rotate(-45deg);
}

/* ###################################################### */
/* ######################## HERO ######################## */
/* ###################################################### */

.hero {
	position: relative;
	background: var(--black);
	color: var(--paper);
}
.hero-stage {
	position: relative;
	display: grid;
	grid-template-areas: "media" "content";
	grid-template-rows: auto 1fr;
}
.hero-media,
.hero-intro {
	grid-area: media;
}
.hero-media {
	overflow: hidden;
}
.hero-media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	object-position: 50% 30%;
}

.hero-content {
	grid-area: content;
	position: relative;
	z-index: 3;
	padding-top: 32px;
	padding-bottom: 56px;
}
.hero h1 {
	max-width: 15em;
	font-size: clamp(2rem, 4.6vw, 3.9rem);
	line-height: 1.1;
	font-weight: bold;
	margin-bottom: 28px;
}
.hero h1 span {
	color: var(--teal-photo);
	white-space: nowrap;
}
.hero-lead {
	max-width: 34em;
	margin: -12px 0 28px;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	line-height: 1.5;
	color: var(--paper);
}
.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Schriftzug und Scroll-Hinweis gibt es nur mit Scroll-Animation */
.hero-intro,
.hero-scroll {
	display: none;
}

@media (min-width: 900px) {
	.hero-stage {
		grid-template-areas: "stage";
		grid-template-rows: 1fr;
		--hero-h: clamp(560px, calc(100vh - var(--header-h)), 1000px);
		min-height: var(--hero-h);
		overflow: hidden;
	}
	@supports (height: 100svh) {
		.hero-stage {
			--hero-h: clamp(560px, calc(100svh - var(--header-h)), 1000px);
		}
	}
	.hero-media,
	.hero-intro,
	.hero-content {
		grid-area: stage;
	}
	.hero-media {
		position: absolute;
		inset: 0;
	}
	.hero-media img {
		height: 100%;
		aspect-ratio: auto;
		/* Bisherige Verankerung (62 %), aber oben nie mehr als 4 % der Bildhöhe abschneiden,
		   sonst sind die Köpfe weg – bei flachen Fenstern fehlen stattdessen unten die Füße.
		   66.667vw = Höhe des 3:2-Fotos bei voller Breite. */
		object-position: 50% calc(-1 * max(0px, min(.62 * (66.667vw - var(--hero-h)), 2.67vw)));
	}
	.hero h1 {
		max-width: 23em;
		font-size: clamp(2rem, 3.3vw, 3.1rem);
	}
	.hero-stage::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .55) 28%, rgba(0, 0, 0, 0) 55%);
		pointer-events: none;
	}
	.hero-content {
		align-self: end;
		padding-bottom: 72px;
	}
	.hero h1 span {
		color: var(--paper);
		text-decoration: underline;
		text-decoration-color: var(--teal-photo);
		text-decoration-thickness: .08em;
		text-underline-offset: .12em;
	}
}

@media (min-width: 900px) and (max-height: 860px) {
	.hero h1 {
		font-size: clamp(1.8rem, 2.6vw, 2.5rem);
		margin-bottom: 20px;
	}
	.hero-content {
		padding-bottom: 44px;
	}
}

/* Scroll-Animation: Das Logo-Sechseck öffnet sich zum Bandfoto.
   Ohne Unterstützung für Scroll-Timelines oder bei reduzierter Bewegung bleibt der statische Hero. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.hero {
			/* Am Handy kürzer, damit Slogan und Buttons früher erscheinen */
			height: 170vh;
			height: 170svh;
			view-timeline: --hero block;
			view-timeline-inset: var(--header-h) 0px;
		}
		.hero-stage {
			position: sticky;
			top: var(--header-h);
			--hero-h: calc(100svh - var(--header-h));
			height: var(--hero-h);
			min-height: 0;
			align-content: center;
			overflow: hidden;
		}

		.hero-media {
			animation: hero-open linear both;
			animation-timeline: --hero;
			animation-range: contain 0% contain 55%;
			animation-timing-function: var(--ease-in-out);
		}
		/* Zu Beginn füllt Türkis das Sechseck; beim Scrollen kommt darunter das Bandfoto zum Vorschein */
		.hero-media::after {
			content: "";
			position: absolute;
			inset: 0;
			background: var(--teal);
			pointer-events: none;
			animation: hero-reveal linear both;
			animation-timeline: --hero;
			animation-range: contain 3% contain 45%;
		}
		.hero-media img {
			transform-origin: 50% 55%;
			animation: hero-zoom linear both;
			animation-timeline: --hero;
			animation-range: contain 0% contain 65%;
			animation-timing-function: var(--ease-out);
		}

		.hero-intro {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			pointer-events: none;
			text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
			animation: hero-intro-out linear both;
			animation-timeline: --hero;
			animation-range: contain 0% contain 30%;
			animation-timing-function: var(--ease-out);
		}
		/* "THE" über und Untertitel unter dem Sechseck, wie im Logo */
		.hero-intro-the {
			margin-bottom: calc(22vmin - min(6vw, 5.5rem) + 1rem);
			font-size: clamp(1rem, 2.4vw, 1.8rem);
			font-weight: bold;
			letter-spacing: .6em;
			margin-right: -.6em;
			text-transform: uppercase;
		}
		.hero-intro-name {
			font-size: clamp(3rem, 12vw, 11rem);
			font-weight: bold;
			line-height: 1;
			letter-spacing: .08em;
			margin-right: -.08em;
			text-transform: uppercase;
		}
		.hero-intro-tag {
			margin-top: calc(22vmin - min(6vw, 5.5rem) + 1rem);
			font-family: var(--font-serif);
			font-style: italic;
			font-size: clamp(1rem, 2vw, 1.5rem);
			color: var(--teal-photo);
			text-shadow: none;
		}

		.hero-content {
			animation: hero-content-in linear both;
			animation-timeline: --hero;
			animation-range: contain 55% contain 85%;
			animation-timing-function: var(--ease-out);
		}
		/* Per Tastatur fokussierte Buttons sofort zeigen */
		.hero-content:focus-within {
			animation: none;
		}

		.hero-scroll {
			position: absolute;
			left: 50%;
			bottom: 24px;
			z-index: 3;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 6px;
			font-size: .75rem;
			letter-spacing: .3em;
			text-transform: uppercase;
			color: var(--on-dark-muted);
			translate: -50% 0;
			animation: hero-hint-out linear both;
			animation-timeline: --hero;
			animation-range: contain 0% contain 10%;
		}

		@media (max-width: 899px) {
			/* Foto und Text als Block zentrieren; zu Beginn sitzt das Sechseck in der Mitte
			   und rückt nach oben, sobald der Slogan darunter erscheint */
			.hero-stage {
				grid-template-rows: auto auto;
			}
			.hero-media,
			.hero-intro {
				translate: 0 22svh;
			}
			.hero-media {
				position: relative;
			}
			.hero-media {
				animation: hero-open linear both, hero-lift linear both;
				animation-timeline: --hero, --hero;
				animation-range: contain 0% contain 55%, contain 45% contain 80%;
				animation-timing-function: var(--ease-in-out), var(--ease-in-out);
			}
			.hero-intro {
				animation: hero-intro-out linear both, hero-lift linear both;
				animation-timeline: --hero, --hero;
				animation-range: contain 0% contain 30%, contain 45% contain 80%;
				animation-timing-function: var(--ease-out), var(--ease-in-out);
			}
		}

		@media (min-width: 900px) {
			.hero {
				height: 240vh;
				height: 240svh;
			}
			.hero-stage::after {
				animation: hero-fade-in linear both;
				animation-timeline: --hero;
				animation-range: contain 40% contain 70%;
			}
		}
	}
}

@keyframes hero-open {
	from {
		clip-path: polygon(50% calc(50% - 22vmin), calc(50% + 19.05vmin) calc(50% - 11vmin), calc(50% + 19.05vmin) calc(50% + 11vmin), 50% calc(50% + 22vmin), calc(50% - 19.05vmin) calc(50% + 11vmin), calc(50% - 19.05vmin) calc(50% - 11vmin));
	}
	to {
		/* Sechseck so groß, dass es jede Bildschirmecke abdeckt */
		clip-path: polygon(50% calc(50% - 90vmax), calc(50% + 77.94vmax) calc(50% - 45vmax), calc(50% + 77.94vmax) calc(50% + 45vmax), 50% calc(50% + 90vmax), calc(50% - 77.94vmax) calc(50% + 45vmax), calc(50% - 77.94vmax) calc(50% - 45vmax));
	}
}
@keyframes hero-reveal {
	to {
		opacity: 0;
	}
}
@keyframes hero-zoom {
	from {
		transform: scale(1.3);
	}
	to {
		transform: none;
	}
}
@keyframes hero-intro-out {
	to {
		opacity: 0;
		transform: translateY(-8vh) scale(1.08);
	}
}
@keyframes hero-content-in {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
}
@keyframes hero-fade-in {
	from {
		opacity: 0;
	}
}
@keyframes hero-lift {
	to {
		translate: none;
	}
}
@keyframes hero-hint-out {
	to {
		opacity: 0;
	}
}

/* ###################################################### */
/* ####################### ANGEBOT ###################### */
/* ###################################################### */

/* Zwei Hauptangebote für die Kernzielgruppen, Nebenangebote als ruhige Zeile darunter */
.offers {
	background: var(--teal);
	color: var(--paper);
	padding: 56px 0;
}
.offers-main {
	display: grid;
	gap: 48px;
}
.offer h3 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	line-height: 1.15;
	letter-spacing: .12em;
	text-transform: uppercase;
}
.offer h3::before {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 16px;
	background: var(--paper);
	clip-path: var(--hexagon);
}
.offer p {
	max-width: 32em;
}
.offer-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-top: 12px;
	font-weight: bold;
	font-size: .9rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--paper);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-decoration-color: rgba(255, 255, 255, .5);
	text-underline-offset: 6px;
	transition: text-decoration-color 200ms ease;
}
.offer-link:hover {
	color: var(--paper);
	text-decoration-color: var(--paper);
}
.offer-link i {
	transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
	.offer-link:hover i {
		transform: translateX(4px);
	}
}

.offers-more {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .3);
}
.offers-more-title {
	margin-bottom: 8px;
	font-size: .8rem;
	letter-spacing: .3em;
	text-transform: uppercase;
}
.offers-more li {
	padding: 4px 0;
}

@media (min-width: 800px) {
	.offers {
		padding: 80px 0 64px;
	}
	.offers-main {
		grid-template-columns: 1fr 1fr;
		gap: 0;
	}
	.offer:first-child {
		padding-right: 56px;
	}
	.offer + .offer {
		padding-left: 56px;
		border-left: 1px solid rgba(255, 255, 255, .3);
	}
	.offers-more {
		display: flex;
		align-items: baseline;
		gap: 24px;
	}
	.offers-more-title {
		margin-bottom: 0;
	}
	.offers-more ul {
		display: flex;
		flex-wrap: wrap;
	}
	.offers-more li:not(:last-child)::after {
		content: "";
		display: inline-block;
		width: 7px;
		height: 8px;
		margin: 0 16px;
		vertical-align: middle;
		background: var(--paper);
		clip-path: var(--hexagon);
	}
}

/* ###################################################### */
/* ###################### SECTIONS ###################### */
/* ###################################################### */

.section {
	padding: var(--section-y) 0;
}
.section-light {
	background: var(--paper);
	color: var(--ink);
}
.section-tint {
	background: var(--tint);
	color: var(--ink);
}
.section-dark {
	background: var(--black);
	color: var(--on-dark);
}
.section-teal {
	background: var(--teal);
	color: var(--paper);
}

.section-head {
	text-align: center;
	margin-bottom: clamp(40px, 6vw, 64px);
}
.section-head-left {
	text-align: left;
}
.section-title {
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: bold;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: .45em;
	/* Ausgleich für den Abstand nach dem letzten Buchstaben */
	margin-right: -.45em;
	color: var(--teal);
}
.section-head-left .section-title {
	margin-right: 0;
}
.section-head .section-title::after {
	content: "";
	display: block;
	width: 22px;
	height: 25px;
	margin: 20px auto 0;
	background: currentColor;
	clip-path: var(--hexagon);
	transform: translateX(-.225em);
}
.section-head-left .section-title::after {
	margin-left: 0;
	transform: none;
}
.section-dark .section-title,
.section-dark .eyebrow {
	color: var(--teal-photo);
}
.section-teal .section-title,
.section-teal .eyebrow {
	color: var(--paper);
}

/* ###################################################### */
/* ######################## BAND ######################## */
/* ###################################################### */

#band {
	padding-bottom: 0;
}

.band-intro {
	display: grid;
	gap: 48px;
	align-items: center;
}
.band-text p + p {
	margin-top: 1.1em;
}
.band-text .lead {
	color: var(--teal);
}

.claims {
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.35;
	padding: 32px 0 32px 28px;
	border-left: 4px solid var(--teal);
}
.claims strong {
	color: var(--teal);
}
.claims-sign {
	margin-top: 16px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: .8em;
	color: var(--grey);
}

@media (min-width: 900px) {
	.band-intro {
		grid-template-columns: 3fr 2fr;
		gap: 80px;
	}
}

.members {
	margin-top: var(--section-y);
	padding: var(--section-y) 0;
	background: var(--tint);
}
.members-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 24px;
}
.member img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 0;
	border-radius: var(--radius);
	transition: transform .4s ease-out, box-shadow .4s ease-out;
}
@media (hover: hover) and (pointer: fine) {
	.member:hover img {
		transform: translateY(-6px);
		box-shadow: 0 18px 40px -18px rgba(0, 61, 58, .55);
	}
}
.member-name {
	margin-top: 16px;
	font-weight: bold;
	font-size: 1.05rem;
	line-height: 1.25;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--teal);
}
.member-role {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--grey);
}

@media (max-width: 1099px) {
	/* Horizontal wischbare Reihe statt gequetschter Spalten */
	.members-grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(220px, 34%);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-padding: 0 var(--gutter);
		padding-bottom: 16px;
		scrollbar-width: thin;
		scrollbar-color: var(--teal) transparent;
	}
	.member {
		scroll-snap-align: start;
	}
}
@media (max-width: 599px) {
	.members-grid {
		grid-auto-columns: 68%;
		gap: 16px;
	}
}

.members-progress {
	display: none;
}

/* Auf schmalen Bildschirmen: Die Porträt-Reihe bleibt stehen und läuft beim vertikalen
   Scrollen von links nach rechts durch; danach geht es normal weiter nach unten. */
@supports (animation-timeline: view()) {
	@media (max-width: 1099px) and (prefers-reduced-motion: no-preference) {
		.members {
			--card: min(40vw, calc((100svh - var(--header-h) - 150px) * .8));
			--card-gap: 24px;
			/* Weg, den die Reihe seitlich zurücklegt */
			--members-travel: calc(5 * var(--card) + 4 * var(--card-gap) + 2 * var(--gutter) - 100vw);
			height: calc(100vh - var(--header-h) + var(--members-travel));
			height: calc(100svh - var(--header-h) + var(--members-travel));
			padding: 0;
			view-timeline: --members block;
			view-timeline-inset: var(--header-h) 0px;
		}
		.members-stage {
			position: sticky;
			top: var(--header-h);
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: calc(100vh - var(--header-h));
			height: calc(100svh - var(--header-h));
			overflow: hidden;
		}
		.members-grid {
			grid-auto-columns: var(--card);
			gap: var(--card-gap);
			width: max-content;
			max-width: none;
			margin: 0;
			padding-bottom: 0;
			overflow: visible;
			scroll-snap-type: none;
			animation: members-slide linear both;
			animation-timeline: --members;
			animation-range: contain 0% contain 100%;
		}
		/* Die Reihe bewegt sich schon selbst, die Karten blenden nicht zusätzlich ein */
		.js .members .reveal {
			opacity: 1;
			transform: none;
			transition: none;
		}

		.members-progress {
			display: block;
			height: 3px;
			margin: 28px var(--gutter) 0;
			background: var(--line);
			border-radius: 3px;
			overflow: hidden;
		}
		.members-progress span {
			display: block;
			height: 100%;
			background: var(--teal);
			transform-origin: left;
			animation: members-progress linear both;
			animation-timeline: --members;
			animation-range: contain 0% contain 100%;
		}
	}
	@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
		.members {
			--card: min(72vw, calc((100svh - var(--header-h) - 150px) * .8));
			--card-gap: 16px;
		}
	}
}

@keyframes members-slide {
	to {
		transform: translateX(calc(-1 * var(--members-travel)));
	}
}
@keyframes members-progress {
	from {
		transform: scaleX(0);
	}
}

/* ###################################################### */
/* ####################### VIDEO ######################## */
/* ###################################################### */

.video-grid {
	display: grid;
	gap: 24px;
}
.video-frame {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius);
	background: #111;
}
.video-frame img,
.video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
}
.video-frame img {
	opacity: .8;
	transition: opacity .3s, transform .5s ease-out;
}
.video-frame:hover img {
	opacity: 1;
	transform: scale(1.04);
}
.video-play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 64px;
	height: 72px;
	padding-left: 4px;
	transform: translate(-50%, -50%);
	background: var(--teal);
	color: var(--paper);
	font-size: 1.4rem;
	clip-path: var(--hexagon);
	transition: background-color .2s, transform .2s;
}
.video-frame:hover .video-play {
	background: var(--paper);
	color: var(--teal);
	transform: translate(-50%, -50%) scale(1.08);
}
.video figcaption {
	margin-top: 10px;
	font-size: .95rem;
	color: var(--on-dark-muted);
}
.video-note {
	margin-top: 32px;
	font-size: .85rem;
	text-align: center;
	color: var(--on-dark-muted);
}

@media (min-width: 640px) {
	.video-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.video:first-child {
		grid-column: 1 / -1;
	}
}
@media (min-width: 1000px) {
	.video-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.video:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
	.video:first-child .video-play {
		width: 88px;
		height: 100px;
		font-size: 2rem;
	}
	.video:first-child figcaption {
		font-size: 1.1rem;
		color: var(--on-dark);
	}
}

/* ###################################################### */
/* ####################### MUSIK ######################## */
/* ###################################################### */

.setlist {
	display: grid;
	gap: 20px;
}
.set {
	padding: 28px;
	background: var(--paper);
	border-radius: var(--radius);
}
.set h3 {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
	font-size: 1.3rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--teal);
}
.set li {
	padding: 8px 0;
	border-bottom: 1px solid var(--line);
	line-height: 1.35;
}
.set li:last-child {
	border-bottom: 0;
}
.set li span {
	display: block;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: .9rem;
	color: var(--grey);
}
.setlist-note {
	margin-top: 40px;
	text-align: center;
	color: var(--grey);
}

/* Aufklappbare Setlist-Boxen (nur Handy, per JS aktiviert) */
.set-toggle {
	display: none;
}
.set.is-collapsible {
	padding-bottom: 14px;
}
.set.is-collapsible ul {
	position: relative;
	overflow: hidden;
	transition: height 240ms var(--ease-out);
}
/* Der dritte Song blendet nach unten aus */
.set.is-collapsible ul::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3.2em;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper) 85%);
	pointer-events: none;
	transition: opacity 200ms var(--ease-out);
}
.set.is-expanded ul::after {
	opacity: 0;
}
/* Die weiteren Songs blenden beim Aufklappen leicht versetzt ein */
.set.is-collapsible li:nth-child(n+4) {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
.set.is-expanded li:nth-child(n+4) {
	opacity: 1;
	transform: none;
}
.set.is-expanded li:nth-child(4) {
	transition-delay: 60ms;
}
.set.is-expanded li:nth-child(5) {
	transition-delay: 100ms;
}
.set.is-expanded li:nth-child(n+6) {
	transition-delay: 140ms;
}

.set.is-collapsible .set-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-top: 4px;
	padding: 8px 0;
	border: 0;
	background: none;
	font-family: var(--font-display);
	font-weight: bold;
	font-size: .85rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--teal);
	cursor: pointer;
	transition: transform 120ms var(--ease-out);
}
.set-toggle:active {
	transform: scale(.97);
}
.set-toggle i {
	transition: transform 200ms var(--ease-out);
}
.set.is-expanded .set-toggle i {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	/* Ohne Bewegung: Höhe springt, die Songs blenden nur sanft ein */
	.set.is-collapsible ul,
	.set-toggle,
	.set-toggle i {
		transition: none;
	}
	.set.is-collapsible li:nth-child(n+4) {
		transform: none;
		transition: opacity 200ms ease;
	}
}

@media (min-width: 640px) {
	.setlist {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1000px) {
	.setlist {
		grid-template-columns: repeat(3, 1fr);
		gap: 28px;
	}
}

/* ###################################################### */
/* ###################### TERMINE ####################### */
/* ###################################################### */

.gigs {
	max-width: 960px;
	margin: 0 auto;
	border-top: 1px solid var(--line);
}
.gig {
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 8px 24px;
	align-items: center;
	padding: 24px 0;
	border-bottom: 1px solid var(--line);
}
.gig-date {
	text-align: center;
	color: var(--teal);
	line-height: 1;
}
.gig-day {
	display: block;
	font-size: 2.6rem;
	font-weight: bold;
}
.gig-month {
	display: block;
	margin-top: 6px;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--grey);
}
.gig-info h3 {
	font-size: 1.25rem;
	line-height: 1.3;
}
.gig-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin-top: 6px;
	font-size: .95rem;
	color: var(--grey);
}
.gig-meta i {
	color: var(--teal);
	margin-right: 4px;
}
.gig-cal {
	grid-column: 2;
	justify-self: start;
	min-height: 40px;
	padding: 8px 18px;
	font-size: .8rem;
}

@media (min-width: 760px) {
	.gig {
		grid-template-columns: 130px 1fr auto;
	}
	.gig-cal {
		grid-column: 3;
	}
}

.gigs-empty {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--tint);
	border-radius: var(--radius);
}
.gigs-empty p + p {
	margin-top: 8px;
	color: var(--grey);
}

/* ###################################################### */
/* ###################### KONTAKT ####################### */
/* ###################################################### */

.contact {
	display: grid;
	gap: 56px;
}
.contact .lead {
	max-width: 30em;
	margin-bottom: 28px;
}

/* Ablauf einer Anfrage */
.steps {
	display: grid;
	gap: 14px;
	margin-bottom: 32px;
	counter-reset: step;
}
.steps li {
	display: grid;
	grid-template-columns: 36px 1fr;
	gap: 16px;
	align-items: center;
	counter-increment: step;
}
.steps li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 36px;
	height: 40px;
	background: var(--paper);
	color: var(--teal);
	font-weight: bold;
	clip-path: var(--hexagon);
}
.contact-actions {
	margin-bottom: 32px;
}
.contact a {
	color: var(--paper);
}
.contact a:hover {
	color: var(--paper);
	text-decoration-thickness: 2px;
}
.contact .btn {
	text-decoration: none;
}
.contact .btn-light {
	color: var(--teal);
}
.contact .btn-ghost:hover {
	color: var(--black);
}
/* Auf Touch-Geräten ist Anrufen der naheliegende Weg */
@media (pointer: coarse) {
	.contact-actions .btn-call {
		order: -1;
		background: var(--paper);
		border-color: var(--paper);
		color: var(--teal);
	}
	.contact-actions .btn-mail {
		background: transparent;
		border-color: rgba(255, 255, 255, .8);
		color: var(--paper);
	}
}

.contact-list {
	margin-bottom: 0;
}
.contact-list li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 0;
	font-size: 1.15rem;
}
.contact-list i {
	width: 20px;
	text-align: center;
	opacity: .8;
}

.downloads {
	margin-top: 28px;
}
.downloads-title {
	margin-bottom: 4px;
	font-size: .8rem;
	letter-spacing: .25em;
	text-transform: uppercase;
}
.downloads li + li {
	border-top: 1px solid rgba(255, 255, 255, .2);
}
.downloads a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	text-decoration: none;
}
.downloads a span {
	margin-left: auto;
	font-size: .8rem;
}
.downloads a:hover {
	text-decoration: underline;
}
.eventpeppers {
	display: inline-block;
}

@media (min-width: 900px) {
	.contact {
		grid-template-columns: 3fr 2fr;
		gap: 80px;
		align-items: center;
	}
}

/* ###################################################### */
/* ###################### UNTERWEGS ##################### */
/* ###################################################### */

.section-rings {
	/* Konzentrische Ringe um "Zuhause" Schwetzingen */
	background-image: radial-gradient(circle at 50% 42%, transparent 0 120px, rgba(64, 169, 170, .12) 121px 122px, transparent 123px 240px, rgba(64, 169, 170, .09) 241px 242px, transparent 243px 380px, rgba(64, 169, 170, .06) 381px 382px, transparent 383px 540px, rgba(64, 169, 170, .04) 541px 542px, transparent 543px);
}

.stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	max-width: 880px;
	margin: 0 auto 56px;
	text-align: center;
}
.stat {
	display: flex;
	flex-direction: column;
}
.stat dd {
	order: -1;
	margin: 0;
	font-size: clamp(2.6rem, 8vw, 4.6rem);
	font-weight: bold;
	line-height: 1;
	color: var(--paper);
}
.stat dt {
	margin-top: 10px;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(.85rem, 2vw, 1.05rem);
	color: var(--teal-photo);
}

.places {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px 12px;
	max-width: 960px;
	margin: 0 auto;
}
.place {
	padding: 6px 16px;
	border: 1px solid rgba(64, 169, 170, .45);
	border-radius: 999px;
	line-height: 1.3;
	color: var(--on-dark);
}
.place-2 {
	font-size: 1.2rem;
	border-color: var(--teal-photo);
}
.place-3 {
	padding: 8px 22px;
	font-size: 1.5rem;
	font-weight: bold;
	background: var(--teal);
	border-color: var(--teal);
	color: var(--paper);
}

.occasions {
	max-width: 880px;
	margin: 56px auto 0;
	padding-top: 32px;
	border-top: 1px solid #222;
	text-align: center;
}
.occasions-title {
	margin-bottom: 12px;
	font-size: .85rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--on-dark-muted);
}
.occasions ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 0;
}
.occasions li {
	color: var(--on-dark);
}
.occasions li:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 8px;
	margin: 0 14px;
	vertical-align: middle;
	background: var(--teal-photo);
	clip-path: var(--hexagon);
}

/* ###################################################### */
/* ###################### STIMMEN ####################### */
/* ###################################################### */

.stars {
	display: inline-flex;
	gap: 3px;
	color: #e0a526;
	font-size: .9rem;
}

.quotes-featured {
	display: grid;
	gap: 48px;
	margin-bottom: 56px;
}
.quote-featured {
	position: relative;
}
.quote-featured::before {
	content: "\201E";
	display: block;
	height: .55em;
	font-family: var(--font-serif);
	font-size: 7rem;
	line-height: 0;
	color: var(--teal);
}
.quote-featured blockquote {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(1.25rem, 2.2vw, 1.6rem);
	line-height: 1.45;
	color: var(--ink);
}
.quote-featured figcaption {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	margin-top: 24px;
}

.quotes {
	columns: 1;
	column-gap: 24px;
}
.quote {
	display: inline-block;
	width: 100%;
	margin: 0 0 24px;
	padding: 28px;
	background: var(--paper);
	border-radius: var(--radius);
	break-inside: avoid;
}
.quote blockquote {
	margin: 12px 0 18px;
	line-height: 1.55;
}
.quote figcaption {
	display: flex;
	flex-direction: column;
}
.quote-occasion {
	font-weight: bold;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .9rem;
	color: var(--teal);
}
.quote-meta {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: .9rem;
	color: var(--grey);
}
.quotes-source {
	margin-top: 16px;
	text-align: center;
	font-size: .95rem;
	color: var(--grey);
}

@media (min-width: 700px) {
	.quotes {
		columns: 2;
	}
}
@media (min-width: 900px) {
	.quotes-featured {
		grid-template-columns: 1fr 1fr;
		gap: 64px;
	}
}

/* ###################################################### */
/* ################ SCHNELLKONTAKT (HANDY) ############## */
/* ###################################################### */

.contact-bar {
	display: none;
}
@media (max-width: 899px) {
	/* Erscheint per JS, sobald der Hero vorbei ist, und verschwindet im Kontaktbereich */
	.js .contact-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 10px;
		padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
		background: rgba(0, 0, 0, .92);
		border-top: 1px solid #222;
		transform: translateY(100%);
		visibility: hidden;
		transition: transform 240ms var(--ease-out), visibility 0s 240ms;
	}
	.js .contact-bar.is-visible {
		transform: none;
		visibility: visible;
		transition: transform 240ms var(--ease-out);
	}
	.contact-bar .btn {
		min-height: 48px;
		padding: 10px 12px;
		font-size: .9rem;
	}
	.contact-bar .btn-call {
		background: var(--teal);
		color: var(--paper);
	}
	.contact-bar .btn-mail {
		border-color: rgba(255, 255, 255, .8);
		color: var(--paper);
	}
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
	.js .contact-bar,
	.js .contact-bar.is-visible {
		transform: none;
		opacity: 0;
		transition: opacity 200ms ease, visibility 0s 200ms;
	}
	.js .contact-bar.is-visible {
		opacity: 1;
		transition: opacity 200ms ease;
	}
}

/* ###################################################### */
/* ####################### FOOTER ####################### */
/* ###################################################### */

.site-footer {
	position: relative;
	padding: 72px 0 56px;
	background: var(--black);
	color: var(--on-dark-muted);
	font-size: .95rem;
}
.footer-grid {
	display: grid;
	gap: 48px;
}
.footer-brand img {
	width: 160px;
	height: auto;
}
.footer-links {
	display: flex;
	gap: 8px;
	margin-top: 20px;
	margin-left: -12px;
}
.footer-links a {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	font-size: 1.6rem;
	color: var(--on-dark);
	text-decoration: none;
	transition: color .2s;
}
.footer-links a:hover {
	color: var(--teal-photo);
}
.impressum h2 {
	margin-bottom: 16px;
	font-size: 1rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--on-dark);
}
.impressum p + p {
	margin-top: 12px;
}
.impressum a {
	color: var(--on-dark);
}
.to-top {
	position: absolute;
	right: var(--gutter);
	top: -28px;
	display: grid;
	place-items: center;
	width: 50px;
	height: 56px;
	background: var(--paper);
	color: var(--teal);
	clip-path: var(--hexagon);
	text-decoration: none;
	transition: background-color .2s;
}
.to-top:hover {
	background: var(--teal-photo);
	color: var(--paper);
}

@media (min-width: 800px) {
	.footer-grid {
		grid-template-columns: 1fr 2fr;
		gap: 80px;
	}
}

/* ###################################################### */
/* ################## MOBILE NAVIGATION ################# */
/* ###################################################### */

@media (max-width: 899px) {
	:root {
		--header-h: 64px;
	}
	.brand img {
		width: 48px;
		height: 48px;
	}
	.nav-toggle {
		display: block;
	}
	.site-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - var(--header-h));
		overflow-y: auto;
		background: var(--black);
		border-top: 1px solid #222;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .2s, transform .2s, visibility 0s .2s;
	}
	.nav-open .site-nav {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: opacity .2s, transform .2s;
	}
	.site-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 24px;
	}
	.site-nav a {
		padding: 14px 0;
		font-size: 1.35rem;
		border-bottom: 1px solid #222;
	}
	.site-nav a:hover,
	.site-nav a.is-active {
		border-bottom-color: #222;
		color: var(--teal-photo);
	}
	.site-nav .nav-cta {
		margin: 20px 0 0;
		padding: 14px;
		text-align: center;
	}
}
@media (max-width: 380px) {
	.brand-name {
		font-size: 1rem;
		letter-spacing: .12em;
	}
}