@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.
			   Die letzte Animation endet bei contain 100 %, danach scrollt die Seite sofort weiter */
			height: 145vh;
			height: 145svh;
			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 70%;
			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 55%;
		}
		.hero-media img {
			transform-origin: 50% 55%;
			animation: hero-zoom linear both;
			animation-timeline: --hero;
			animation-range: contain 0% contain 80%;
			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 35%;
			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 60% contain 100%;
			/* Linear statt ease-out: Die Buttons stehen erst genau dann still, wenn der Hero losgelassen wird */
			animation-timing-function: linear;
		}
		/* 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 12%;
		}

		@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 */
			/* Das Foto gibt nach, wenn der Platz knapp wird (iPhone SE, Safari mit Leisten),
			   damit Überschrift und beide Buttons immer ganz zu sehen sind */
			.hero-stage {
				grid-template-rows: minmax(0, auto) auto;
			}
			.hero-media img {
				height: 100%;
			}
			.hero-content {
				padding-top: 24px;
				padding-bottom: 32px;
			}
			.hero h1 {
				margin-bottom: 20px;
			}
			.hero-lead {
				margin-bottom: 20px;
			}
			/* Beide Buttons in einer Zeile */
			.hero-actions {
				flex-wrap: nowrap;
				gap: 10px;
			}
			.hero-actions .btn {
				flex: 1 1 0;
				padding-inline: 10px;
				font-size: .85rem;
				letter-spacing: .05em;
				white-space: nowrap;
			}
			.hero-intro {
				translate: 0 22svh;
			}
			/* Öffnen und Hochrücken in einer Animation: Safari wendet bei mehreren
			   Scroll-Animationen auf einem Element nur die erste an */
			.hero-media {
				position: relative;
				animation: hero-open-lift linear both;
				animation-timeline: --hero;
				animation-range: contain 0% contain 80%;
			}
			/* Text erst einblenden, wenn das Foto oben angekommen ist, sonst liegt er kurz über dem Foto */
			.hero-content {
				animation-range: contain 78% contain 100%;
			}
		}
		/* Flache Displays (iPhone SE): Untertitel weglassen, damit das Foto groß genug bleibt */
		@media (max-width: 899px) and (max-height: 700px) {
			.hero-lead {
				display: none;
			}
		}

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

@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;
	}
}
/* Handy: Sechseck öffnet sich bis 70 %, ab 45 % rückt das Foto nach oben (Anteile von contain 0–80 %) */
@keyframes hero-open-lift {
	0% {
		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));
		translate: 0 22svh;
		animation-timing-function: var(--ease-in-out);
	}
	56.25% {
		translate: 0 22svh;
		animation-timing-function: var(--ease-in-out);
	}
	87.5% {
		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));
	}
	100% {
		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));
		translate: 0 0;
	}
}
@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;
}

@media (max-width: 1099px) {
	/* Die Karten liegen nebeneinander, ein Einblenden beim Wischen würde nur flackern */
	.js .members .reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Fortschrittsbalken unter der Reihe, der beim seitlichen Wischen mitläuft.
   Ohne Unterstützung für Scroll-Timelines bleibt die normale Scrollleiste. */
@supports (scroll-timeline: --a inline) {
	@media (max-width: 1099px) {
		.members-stage {
			timeline-scope: --members-x;
		}
		.members-grid {
			scroll-timeline: --members-x inline;
			padding-bottom: 0;
			scrollbar-width: none;
		}
		.members-grid::-webkit-scrollbar {
			display: none;
		}
		.members-progress {
			display: block;
			max-width: 240px;
			height: 4px;
			margin: 24px auto 0;
			background: var(--line);
			border-radius: 4px;
			overflow: hidden;
		}
		.members-progress span {
			display: block;
			height: 100%;
			background: var(--teal);
			border-radius: 4px;
			transform-origin: left;
			animation: members-progress linear both;
			animation-timeline: --members-x;
		}
	}
}

@keyframes members-progress {
	from {
		transform: scaleX(.2);
	}
}

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

.video-grid {
	display: grid;
	/* Am Handy zwei Videos nebeneinander, damit die Section nicht so lang wird */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 12px;
}
.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 (max-width: 639px) {
	.video-play {
		width: 44px;
		height: 50px;
		padding-left: 3px;
		font-size: 1rem;
	}
	.video figcaption {
		margin-top: 8px;
		font-size: .8rem;
		line-height: 1.35;
	}
}
@media (min-width: 640px) {
	.video-grid {
		gap: 24px;
	}
	.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.is-collapsed .quote:nth-child(n+2) {
	display: none;
}
/* Aufgeklappte Bewertungen blenden kurz ein */
.quotes:not(.is-collapsed) .quote:nth-child(n+2) {
	animation: quote-in 240ms var(--ease-out);
}
@keyframes quote-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
}
.quotes-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 44px;
	margin: 0 auto 8px;
	padding: 8px 16px;
	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);
}
.quotes-toggle[hidden] {
	display: none;
}
.quotes-toggle:active {
	transform: scale(.97);
}
.quotes-toggle i {
	transition: transform 200ms var(--ease-out);
}
.quotes-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	.quotes:not(.is-collapsed) .quote:nth-child(n+2),
	.quotes-toggle,
	.quotes-toggle i {
		animation: none;
		transition: none;
	}
}
.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;
	}
}