/* get in touch · statische Website (4.11.2026)
   Schwarz, Creme, Silber. Fraunces (SOFT 50, WONK 0) für Titel, Jost für Labels und Text. */

@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/assets/fonts/fraunces-italic.woff2') format('woff2'); font-weight: 300 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/assets/fonts/jost.woff2') format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }

:root {
	--schwarz: #0d0d0c;
	--schwarz-2: #171715;
	--creme: #efebe4;
	--creme-2: #e3ded4;
	--hell-gedaempft: rgba(239, 235, 228, .74);
	--dunkel-gedaempft: rgba(13, 13, 12, .72);
	--linie-hell: rgba(239, 235, 228, .16);
	--linie-dunkel: rgba(13, 13, 12, .16);
	--silber: linear-gradient(100deg, #d6d5d0 0%, #ffffff 26%, #dedcd7 44%, #ffffff 60%, #d2d1cc 80%, #f4f3f0 100%);
	--graphit: linear-gradient(100deg, #1c1c1a 0%, #6d6c68 34%, #262624 52%, #8a8985 70%, #1c1c1a 100%);
	--serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
	--sans: 'Jost', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
	--rand: clamp(20px, 5vw, 72px);
	--kopf-h: 76px;
	--weich: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf-h) + 12px); background: var(--schwarz); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0;
	background: var(--schwarz);
	color: var(--creme);
	font: 400 17px/1.6 var(--sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
/* feines, ruhendes Korn über allem */
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	opacity: .07;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
em { font-style: italic; }
::selection { background: var(--creme); color: var(--schwarz); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--creme); color: var(--schwarz); padding: 10px 16px; border-radius: 99px; text-decoration: none; }
.skip:focus { top: 12px; }

.rahmen { width: min(1280px, 100%); margin: 0 auto; padding: 0 var(--rand); }

/* ---------- Typografie ---------- */
.label {
	margin: 0 0 18px;
	font: 500 12px/1.3 var(--sans);
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hell-gedaempft);
}
.sektion--hell .label { color: var(--dunkel-gedaempft); }

.titel, .hero__titel, .statement__text, .schluss__titel {
	font-family: var(--serif);
	font-weight: 300;
	font-variation-settings: 'opsz' 144;
	text-transform: lowercase;
	letter-spacing: -.03em;
	margin: 0;
}
.titel { font-size: clamp(44px, 7.4vw, 112px); line-height: .94; }
.titel--mittel { font-size: clamp(40px, 5.6vw, 84px); }

/* Silber auf Dunkel, Graphit auf Creme */
.titel em, .hero__titel em, .statement__text em, .schluss__titel em, .hero__karte em, .plakette span {
	font-style: italic;
	font-weight: 300;
	background: var(--silber);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-right: .06em;
}
.sektion--hell .titel em { background-image: var(--graphit); }

.text { max-width: 34em; margin: 22px 0 0; color: var(--hell-gedaempft); font-size: 18px; font-weight: 400; }
.sektion--hell .text { color: var(--dunkel-gedaempft); }
.text a, .fragen a, .next__vorbei a { text-underline-offset: 3px; }
.klein { margin: 16px 0 0; font-size: 14px; color: var(--hell-gedaempft); }

/* ---------- Knöpfe ---------- */
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.knopf {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	padding: 0 26px;
	border-radius: 99px;
	font: 500 14px/1 var(--sans);
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .35s var(--weich), background-color .25s, color .25s, border-color .25s;
}
.knopf i { font-style: normal; display: inline-block; transition: transform .35s var(--weich); }
.knopf:hover i { transform: translateX(4px); }
.knopf:active { transform: scale(.97); }
.knopf--hell { background: var(--creme); color: var(--schwarz); }
.knopf--hell:hover { background: #fff; }
.knopf--rand { border: 1px solid var(--linie-hell); color: var(--creme); }
.knopf--rand:hover { border-color: var(--creme); }
.knopf--dunkel { background: var(--creme); color: var(--schwarz); width: 100%; justify-content: space-between; }
.knopf--dunkel:hover { background: #fff; }

.pille {
	display: inline-flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 18px; border-radius: 99px;
	background: var(--creme); color: var(--schwarz);
	font: 500 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
	transition: background-color .25s;
}
.pille span { opacity: .6; }
.pille:hover { background: #fff; }

/* Event vorbei: steuert site.js über html.event-vorbei */
.nur-nach-event { display: none !important; }
.event-vorbei .nur-nach-event { display: revert !important; }
.event-vorbei a.nur-nach-event.knopf, .event-vorbei a.nur-nach-event.pille { display: inline-flex !important; }
.event-vorbei .nur-vor-event { display: none !important; }

/* ---------- Kopf ---------- */
.kopf {
	position: fixed; inset: 0 0 auto; z-index: 50;
	height: calc(var(--kopf-h) + env(safe-area-inset-top, 0px));
	display: flex; align-items: center; gap: 28px;
	padding: env(safe-area-inset-top, 0px) var(--rand) 0;
	transition: background-color .35s, border-color .35s;
	border-bottom: 1px solid transparent;
}
/* deckend: Safari ab iOS 26 übernimmt die Farbe für die Statusleiste nur von einer vollen Fläche an der Oberkante */
.kopf.ist-gescrollt { background: var(--schwarz); border-bottom-color: var(--linie-hell); }
.kopf__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.kopf__logo img { width: 44px; height: auto; }
.kopf__logo span { font: 400 21px/1 var(--serif); letter-spacing: -.01em; }
.kopf__nav { display: flex; gap: 30px; }
.kopf__nav a { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .78; transition: opacity .2s; }
.kopf__nav a:hover { opacity: 1; }
.kopf__menue { display: none; }

.menue {
	position: fixed; inset: 0; z-index: 45;
	background: var(--schwarz);
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	padding: calc(var(--kopf-h) + 20px) var(--rand) 40px;
	text-align: center;
}
.menue[hidden] { display: none; }
.menue nav { display: flex; flex-direction: column; gap: 6px; }
.menue nav a { font: 300 clamp(44px, 13vw, 64px)/1.08 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; text-decoration: none; }
.menue nav a:nth-child(even) { font-style: italic; }
.menue__fuss { margin: 44px 0 0; font-size: 15px; color: var(--hell-gedaempft); line-height: 2; }
.menue__fuss a { text-decoration: none; }

/* ---------- Hero ---------- */
.hero {
	position: relative;
	min-height: max(680px, 100svh);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 40px;
	padding: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 60px) var(--rand) 132px;
	overflow: hidden;
	isolation: isolate;
}
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; filter: brightness(.56) contrast(1.04); }
.hero::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgba(13,13,12,.7) 0%, rgba(13,13,12,.08) 26%, rgba(13,13,12,.2) 50%, rgba(13,13,12,.94) 100%),
	            linear-gradient(90deg, rgba(13,13,12,.78) 0%, rgba(13,13,12,.35) 45%, rgba(13,13,12,0) 70%);
}
.hero__inhalt { max-width: 980px; text-shadow: 0 2px 22px rgba(0, 0, 0, .55); }
/* Schatten auf Silberschrift würde die Schrift selbst abdunkeln, deshalb als Filter */
.hero__titel em { text-shadow: none; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .6)); }
.hero .knopf { text-shadow: none; }
.hero__titel { font-size: clamp(56px, 10.4vw, 168px); line-height: .9; }
.zeile { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.zeile > span { display: block; }
.hero__text { max-width: 30em; margin: 28px 0 0; font-size: 19px; font-weight: 400; color: rgba(245, 242, 236, .94); }
.hero .label { color: rgba(239, 235, 228, .86); }

.hero__karte {
	position: relative;
	width: 320px;
	padding: 22px 22px 20px;
	border-radius: 22px;
	background: rgba(13, 13, 12, .62);
	border: 1px solid var(--linie-hell);
	text-decoration: none;
	transition: transform .5s var(--weich), border-color .3s;
}
.hero__karte:hover { transform: translateY(-4px) rotate(-1deg); border-color: rgba(239, 235, 228, .4); }
.hero__karte .label { margin-bottom: 12px; font-size: 11px; }
.hero__karte strong { display: block; font: 300 30px/1.02 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.02em; }
.hero__karte-fuss { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linie-hell); font-size: 14px; color: var(--hell-gedaempft); }
.countdown { white-space: nowrap; color: var(--creme); }

.laufband {
	position: absolute; left: 0; right: 0; bottom: 0;
	border-top: 1px solid var(--linie-hell);
	padding: 18px 0 20px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband__spur { display: flex; align-items: center; gap: 36px; width: max-content; animation: laufen 38s linear infinite; }
.laufband span { font: italic 300 clamp(26px, 3vw, 40px)/1 var(--serif); letter-spacing: -.01em; white-space: nowrap; color: rgba(239, 235, 228, .9); }
.laufband b { font-weight: 400; font-size: 18px; color: rgba(239, 235, 228, .5); }
@keyframes laufen { to { transform: translateX(calc(-50% - 18px)); } }

/* ---------- Sektionen ---------- */
.sektion { position: relative; padding: clamp(96px, 13vw, 176px) 0; overflow-x: clip; }
.sektion--hell { background: var(--creme); color: var(--schwarz); }
.sektion--dunkel { background: var(--schwarz); }
.sektion--hell + .sektion--hell { padding-top: 0; }

/* Nächstes Event */
.next__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 40px; }
.next__kopf .titel { max-width: 11em; }
.plakette { position: relative; width: 168px; aspect-ratio: 1; display: grid; place-items: center; flex: none; }
.plakette svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: drehen 28s linear infinite; }
.plakette text { font: 500 13.4px var(--sans); letter-spacing: .24em; text-transform: uppercase; fill: currentColor; }
.plakette .countdown, .plakette span { font: italic 300 22px/1.05 var(--serif); text-align: center; color: inherit; }
.sektion--hell .plakette span { background-image: var(--graphit); }
.plakette--gross { width: 230px; }
.plakette--gross span { font-size: 30px; }
@keyframes drehen { to { transform: rotate(360deg); } }

.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 64px 0 0; border-top: 1px solid var(--linie-dunkel); }
.fakten div { padding: 22px 24px 0 0; }
.fakten div + div { padding-left: 24px; border-left: 1px solid var(--linie-dunkel); }
.fakten dt { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--dunkel-gedaempft); margin-bottom: 12px; }
.fakten dd { margin: 0; font: 400 21px/1.3 var(--serif); letter-spacing: -.01em; }
.fakten a { text-decoration: none; border-bottom: 1px solid var(--linie-dunkel); }
.fakten a i { font-style: normal; font-family: var(--sans); font-size: .8em; }

.next__wahl { margin: 72px 0 24px; font: italic 300 clamp(24px, 2.6vw, 34px)/1.2 var(--serif); letter-spacing: -.01em; }
.next__vorbei { margin: 56px 0 0; font: 300 26px/1.35 var(--serif); max-width: 30em; }

/* Tickets: echte Abriss-Tickets mit Kerben und Perforation */
.tickets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 36px); }
.ticket {
	--stub: 76px;
	--kerbe: 15px;
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--stub);
	background: var(--schwarz);
	color: var(--creme);
	border-radius: 26px;
	-webkit-mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) top / 100% 51% no-repeat,
	              radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) bottom / 100% 51% no-repeat;
	mask: radial-gradient(circle at calc(100% - var(--stub)) 0, transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) top / 100% 51% no-repeat,
	      radial-gradient(circle at calc(100% - var(--stub)) 100%, transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) bottom / 100% 51% no-repeat;
	transition: transform .6s var(--weich);
}
.ticket:hover { transform: translateY(-6px) rotate(-.6deg); }
.ticket + .ticket:hover { transform: translateY(-6px) rotate(.6deg); }
.ticket__haupt { padding: 16px 28px 28px 16px; display: flex; flex-direction: column; }
.ticket__bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; filter: contrast(1.08) brightness(.88); margin-bottom: 26px; }
.ticket .label { margin-left: 12px; }
.ticket h3 { margin: 0 0 0 12px; font: 300 clamp(38px, 4vw, 56px)/.95 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; }
.ticket p:not(.label) { margin: 16px 0 0 12px; color: var(--hell-gedaempft); font-weight: 400; }
.ticket p a { color: var(--creme); text-underline-offset: 3px; }
.ticket__preis { display: flex; align-items: baseline; gap: 14px; margin: auto 0 22px 12px; padding-top: 28px; }
.ticket__preis span { font: 300 64px/1 var(--sans); letter-spacing: -.04em; background: var(--silber); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticket__preis small { font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--hell-gedaempft); border: 1px solid var(--linie-hell); border-radius: 99px; padding: 8px 12px; }
.ticket .knopf { margin-left: 12px; width: calc(100% - 12px); }
.ticket__abschnitt {
	position: relative;
	border-left: 2px dashed rgba(239, 235, 228, .22);
	display: grid; place-items: center;
	background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(239, 235, 228, .05) 5px 7px);
}
.ticket__abschnitt span { writing-mode: vertical-rl; transform: rotate(180deg); font: 500 12px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--hell-gedaempft); white-space: nowrap; }

.ablauf { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: a; }
.ablauf li { position: relative; padding: 26px 26px 0 0; border-top: 1px solid var(--schwarz); }
.ablauf li::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--schwarz); }
.ablauf time { display: block; font: 300 34px/1 var(--serif); letter-spacing: -.02em; margin-bottom: 12px; }
.ablauf span { color: var(--dunkel-gedaempft); }

/* Bald */
.bald { padding: clamp(80px, 10vw, 140px) 0; border-bottom: 1px solid var(--linie-hell); }
.bald__raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.bald .titel { max-width: 12em; }

/* Welten */
.welten { overflow: hidden; }
.welten__kopf { margin-bottom: 56px; }
.welten__liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie-hell); }
.welt {
	position: relative;
	display: grid;
	grid-template-columns: 70px minmax(0, 1fr) minmax(0, 22em);
	align-items: center;
	gap: 24px;
	padding: 26px 0;
	border-bottom: 1px solid var(--linie-hell);
	transition: opacity .35s;
}
.welt__nr { font: 500 13px/1 var(--sans); letter-spacing: .2em; color: var(--hell-gedaempft); }
.welt__name { font: 300 clamp(56px, 9vw, 136px)/.92 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.04em; transition: transform .6s var(--weich); }
.welt__text { color: var(--hell-gedaempft); font-weight: 400; }
.welt__mini { display: none; }
@media (hover: hover) and (pointer: fine) {
	.welt > span { transition: opacity .35s; }
	.welten__liste:hover .welt > span { opacity: .32; }
	.welten__liste .welt:hover > span { opacity: 1; }
	.welt:hover .welt__name { transform: translateX(18px); font-style: italic; }
}
.welt-bild {
	position: fixed; left: 0; top: 0; z-index: 5;
	width: 340px; aspect-ratio: 4 / 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s;
	border-radius: 18px;
	overflow: hidden;
}
.welt-bild.ist-an { opacity: 1; }
.welt-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Statement */
.statement { position: relative; min-height: min(86vh, 860px); display: grid; place-items: center; overflow: hidden; isolation: isolate; padding: 120px var(--rand); }
.statement__bild { position: absolute; left: 0; top: -12%; width: 100%; height: 124%; object-fit: cover; z-index: -2; filter: brightness(.5); will-change: transform; }
.statement::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--schwarz) 0%, rgba(13,13,12,.15) 28%, rgba(13,13,12,.15) 72%, var(--schwarz) 100%); }
.statement__text { max-width: 14em; text-align: center; font-size: clamp(46px, 7.6vw, 120px); line-height: .96; }

/* Community */
.community__raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--linie-dunkel); }
.zahlen div { padding-top: 22px; }
.zahlen div + div { padding-left: 24px; border-left: 1px solid var(--linie-dunkel); }
.zahlen dt { font: 300 clamp(64px, 7vw, 104px)/1 var(--serif); letter-spacing: -.04em; }
.zahlen dd { margin: 10px 0 0; color: var(--dunkel-gedaempft); }
.folgen { margin-top: 96px; }
.folgen ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.folgen a {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px;
	padding: 22px 24px; border-radius: 20px; border: 1px solid var(--linie-dunkel);
	text-decoration: none;
	transition: background-color .3s, color .3s, transform .4s var(--weich);
}
.folgen a:hover { background: var(--schwarz); color: var(--creme); transform: translateY(-3px); }
.folgen span { font: 400 21px/1.2 var(--serif); letter-spacing: -.01em; overflow-wrap: anywhere; }
.folgen small { grid-row: 2; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .6; }
.folgen i { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: 20px; }

/* Brands */
.brands__raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.brands__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 26px; filter: contrast(1.05); }
.bausteine { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--linie-hell); }
.bausteine li { padding: 14px 0 14px 30px; border-bottom: 1px solid var(--linie-hell); position: relative; }
.bausteine li::before { content: '✦'; position: absolute; left: 0; top: 14px; font-size: 13px; color: var(--hell-gedaempft); }
.modelle { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; }
.modelle span { padding: 8px 14px; border-radius: 99px; border: 1px solid var(--linie-hell); font: italic 300 18px/1.2 var(--serif); }

/* FAQ */
.faq__raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.fragen { border-top: 1px solid var(--linie-dunkel); }
.fragen details { border-bottom: 1px solid var(--linie-dunkel); }
.fragen summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center; gap: 20px;
	padding: 24px 0;
	font: 400 clamp(21px, 2vw, 26px)/1.25 var(--serif); letter-spacing: -.01em;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: '+'; flex: none; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linie-dunkel); display: grid; place-items: center; font: 300 22px/1 var(--sans); transition: transform .35s var(--weich), background-color .25s, color .25s; }
.fragen details[open] summary::after { transform: rotate(45deg); background: var(--schwarz); color: var(--creme); }
.fragen details p { margin: 0 0 26px; max-width: 36em; color: var(--dunkel-gedaempft); }

/* Schluss */
.schluss { padding: clamp(110px, 14vw, 200px) 0; text-align: center; }
.schluss .label, .schluss .text { margin-left: auto; margin-right: auto; }
.schluss__titel { font-size: clamp(64px, 15vw, 240px); line-height: .86; }
.schluss .knoepfe { justify-content: center; }

/* Fuß */
.fuss { border-top: 1px solid var(--linie-hell); padding: 56px 0 calc(48px + env(safe-area-inset-bottom)); font-size: 15px; color: var(--hell-gedaempft); }
.fuss__raster { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px 40px; align-items: center; }
.fuss__raster img { width: 72px; }
.fuss__raster p { margin: 0; font: italic 300 18px/1.35 var(--serif); color: var(--creme); }
.fuss nav { display: flex; gap: 24px; flex-wrap: wrap; }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { color: var(--creme); }
.fuss__klein { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 14px 24px; font: 400 14px/1.5 var(--sans) !important; color: var(--hell-gedaempft) !important; padding-top: 20px; border-top: 1px solid var(--linie-hell); }

/* Nachweis im Fuß wie bei AACC: „Design & Umsetzung:“ + sleek-Logo, gedämpft; beim Darüberfahren läuft einmal der sleek-Verlauf hinein (keine Schleife) */
.sleek { --sleek-breite: 92px; --sleek-basis: #efebe4; --sleek-schein: rgba(239, 235, 228, .32); display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; white-space: nowrap; color: var(--hell-gedaempft); text-decoration: none; transition: color .35s; }
.sleek--hell { --sleek-basis: #0d0d0c; --sleek-schein: rgba(13, 13, 12, .12); color: var(--dunkel-gedaempft); }
.sleek--gross { --sleek-breite: 150px; gap: 16px; font-size: 18px; }
.sleek__marke { display: inline-block; line-height: 0; filter: drop-shadow(0 0 8px var(--sleek-schein)); transition: filter .7s ease; }
.sleek__logo { display: block; width: var(--sleek-breite); aspect-ratio: 1942 / 410; flex: none;
	background: linear-gradient(110deg, var(--sleek-basis) 0 42%, #C59A79 52%, #EC7A5C 62%, #D65CA0 72%, #7C62FF 84%, #4FB3D9 96%) 0 0 / 260% 100% no-repeat;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1942 410'%3E%3Cpath d='M435.804,163.017v87.681c0,12.516-2.423,24.176-7.247,34.968-4.835,10.804-11.232,20.336-19.19,28.572-7.97,8.248-17.484,14.644-28.572,19.19-11.087,4.558-22.892,6.825-35.391,6.825H0v68.225h345.405c21.602,0,42.071-4.118,61.406-12.366,19.323-8.236,36.096-19.468,50.318-33.684,14.205-14.216,25.437-30.839,33.684-49.902,8.236-19.04,12.366-39.653,12.366-61.828v-87.681h-67.375Z'/%3E%3Cpath d='M68.881,245.462v-87.681c0-12.516,2.423-24.176,7.247-34.968,4.835-10.804,11.232-20.336,19.19-28.572,7.97-8.248,17.484-14.644,28.572-19.19,11.087-4.558,22.892-6.825,35.391-6.825h345.405V0H159.281c-21.602,0-42.071,4.118-61.406,12.366-19.323,8.236-36.096,19.468-50.318,33.684-14.205,14.216-25.437,30.839-33.684,49.902C5.636,114.992,1.506,135.605,1.506,157.78v87.681h67.375Z'/%3E%3Cpath d='M565,393L565,377L647.8,377C737.8,377 738.9,376.9 749,371.4C755.9,367.6 763.5,359.3 767.3,351.3L770.5,344.5L770.8,318.8L771.1,293L787.1,293L803.1,293L802.8,321.2C802.4,348.8 802.4,349.7 799.7,357.5C793.4,376.5 779.7,392.2 761.9,400.8C744.7,409.3 748.4,409 650.5,409L565,409L565,393ZM1182.5,405.5C1151,399.6 1125.4,374.3 1119.4,343.3C1117.3,332 1117.3,214.3 1119.5,203.2C1124,180.4 1141,159.2 1163.5,148.1C1179.6,140.2 1172.9,140.6 1272.2,140.3L1361,139.9L1361,156L1361,172L1277.5,172C1220.5,172 1192.4,172.3 1188.8,173.1C1176.5,175.7 1162.2,185.6 1156.3,195.7C1150.8,205.1 1150,210.1 1150,235.1L1150,258L1388,258L1626,258L1626,274L1626,290L1388,290L1150,290L1150,312.4C1150,337.4 1150.9,342.5 1156.9,351.9C1161.1,358.4 1169.5,366.2 1175.8,369.4C1186.8,375 1186.3,375 1277.2,375L1361,375L1361,391L1361,407L1275.2,406.9C1208.8,406.8 1187.9,406.5 1182.5,405.5ZM1448,405.5C1423.7,400.5 1402.7,384.5 1391.7,362.5C1385.3,349.6 1383.8,343.3 1383.3,325.2L1382.7,309L1398.9,309L1415,309L1415,320.3C1415,343.6 1423.9,360.4 1440.8,368.9C1453.2,375.2 1450.3,375 1542.2,375L1626,375L1626,391L1626,407L1540.2,406.9C1473.2,406.8 1453.1,406.5 1448,405.5ZM854,274L854,142L869.5,142L885,142L885,258L885,374L988.5,374L1092,374L1092,390L1092,406L973,406L854,406L854,274ZM1672,274L1672,142L1687.5,142L1703,142L1703,198L1703,254L1752.8,254C1808.6,254 1814.8,253.5 1832.8,247.5C1876.2,232.9 1906.1,195.2 1908.7,151.8L1909.3,142L1925.3,142L1941.3,142L1940.7,152.6C1937.7,201.2 1910.8,244.4 1869.4,267.1L1861.8,271.3L1865.2,273.3C1912.1,301.4 1937.7,342.7 1940.7,395.2L1941.3,406L1925.3,406L1909.3,406L1908.7,396.2C1906,349.5 1872.3,306.1 1827.3,291.5C1812,286.5 1805.5,286 1752.2,286L1703,286L1703,346L1703,406L1687.5,406L1672,406L1672,274ZM566,233.6C566,203.6 566.9,197.5 573.9,183.5C581.9,167.3 593.3,156.3 610.4,148.5C624.5,142 623.7,142 719,142L805,142L805,158L805,174L722.8,174C625,174 624.5,174.1 612.6,185C600.3,196.4 598,204 598,234.6L598,258L582,258L566,258L566,233.6ZM1383,221C1383,203.4 1384.8,195.2 1391.6,181.1C1400.6,162.7 1416.7,148 1435.5,141C1448.9,136.1 1450.3,136 1541.1,136L1626,136L1626,152L1626,168L1542.2,168C1470.8,168 1457.6,168.2 1452.6,169.5C1428.1,175.9 1415,194.4 1415,222.7L1415,234L1399,234L1383,234L1383,221Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1942 410'%3E%3Cpath d='M435.804,163.017v87.681c0,12.516-2.423,24.176-7.247,34.968-4.835,10.804-11.232,20.336-19.19,28.572-7.97,8.248-17.484,14.644-28.572,19.19-11.087,4.558-22.892,6.825-35.391,6.825H0v68.225h345.405c21.602,0,42.071-4.118,61.406-12.366,19.323-8.236,36.096-19.468,50.318-33.684,14.205-14.216,25.437-30.839,33.684-49.902,8.236-19.04,12.366-39.653,12.366-61.828v-87.681h-67.375Z'/%3E%3Cpath d='M68.881,245.462v-87.681c0-12.516,2.423-24.176,7.247-34.968,4.835-10.804,11.232-20.336,19.19-28.572,7.97-8.248,17.484-14.644,28.572-19.19,11.087-4.558,22.892-6.825,35.391-6.825h345.405V0H159.281c-21.602,0-42.071,4.118-61.406,12.366-19.323,8.236-36.096,19.468-50.318,33.684-14.205,14.216-25.437,30.839-33.684,49.902C5.636,114.992,1.506,135.605,1.506,157.78v87.681h67.375Z'/%3E%3Cpath d='M565,393L565,377L647.8,377C737.8,377 738.9,376.9 749,371.4C755.9,367.6 763.5,359.3 767.3,351.3L770.5,344.5L770.8,318.8L771.1,293L787.1,293L803.1,293L802.8,321.2C802.4,348.8 802.4,349.7 799.7,357.5C793.4,376.5 779.7,392.2 761.9,400.8C744.7,409.3 748.4,409 650.5,409L565,409L565,393ZM1182.5,405.5C1151,399.6 1125.4,374.3 1119.4,343.3C1117.3,332 1117.3,214.3 1119.5,203.2C1124,180.4 1141,159.2 1163.5,148.1C1179.6,140.2 1172.9,140.6 1272.2,140.3L1361,139.9L1361,156L1361,172L1277.5,172C1220.5,172 1192.4,172.3 1188.8,173.1C1176.5,175.7 1162.2,185.6 1156.3,195.7C1150.8,205.1 1150,210.1 1150,235.1L1150,258L1388,258L1626,258L1626,274L1626,290L1388,290L1150,290L1150,312.4C1150,337.4 1150.9,342.5 1156.9,351.9C1161.1,358.4 1169.5,366.2 1175.8,369.4C1186.8,375 1186.3,375 1277.2,375L1361,375L1361,391L1361,407L1275.2,406.9C1208.8,406.8 1187.9,406.5 1182.5,405.5ZM1448,405.5C1423.7,400.5 1402.7,384.5 1391.7,362.5C1385.3,349.6 1383.8,343.3 1383.3,325.2L1382.7,309L1398.9,309L1415,309L1415,320.3C1415,343.6 1423.9,360.4 1440.8,368.9C1453.2,375.2 1450.3,375 1542.2,375L1626,375L1626,391L1626,407L1540.2,406.9C1473.2,406.8 1453.1,406.5 1448,405.5ZM854,274L854,142L869.5,142L885,142L885,258L885,374L988.5,374L1092,374L1092,390L1092,406L973,406L854,406L854,274ZM1672,274L1672,142L1687.5,142L1703,142L1703,198L1703,254L1752.8,254C1808.6,254 1814.8,253.5 1832.8,247.5C1876.2,232.9 1906.1,195.2 1908.7,151.8L1909.3,142L1925.3,142L1941.3,142L1940.7,152.6C1937.7,201.2 1910.8,244.4 1869.4,267.1L1861.8,271.3L1865.2,273.3C1912.1,301.4 1937.7,342.7 1940.7,395.2L1941.3,406L1925.3,406L1909.3,406L1908.7,396.2C1906,349.5 1872.3,306.1 1827.3,291.5C1812,286.5 1805.5,286 1752.2,286L1703,286L1703,346L1703,406L1687.5,406L1672,406L1672,274ZM566,233.6C566,203.6 566.9,197.5 573.9,183.5C581.9,167.3 593.3,156.3 610.4,148.5C624.5,142 623.7,142 719,142L805,142L805,158L805,174L722.8,174C625,174 624.5,174.1 612.6,185C600.3,196.4 598,204 598,234.6L598,258L582,258L566,258L566,233.6ZM1383,221C1383,203.4 1384.8,195.2 1391.6,181.1C1400.6,162.7 1416.7,148 1435.5,141C1448.9,136.1 1450.3,136 1541.1,136L1626,136L1626,152L1626,168L1542.2,168C1470.8,168 1457.6,168.2 1452.6,169.5C1428.1,175.9 1415,194.4 1415,222.7L1415,234L1399,234L1383,234L1383,221Z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-position .9s cubic-bezier(.16, 1, .3, 1); }
.sleek::after { content: '↗'; align-self: center; font-size: 13px; color: #C59A79; opacity: 0; transform: translate(-4px, 3px); transition: opacity .35s ease, transform .35s ease; }
.sleek:hover, .sleek:focus-visible { color: var(--creme); }
.sleek--hell:hover, .sleek--hell:focus-visible { color: var(--schwarz); }
.sleek:hover .sleek__logo, .sleek:focus-visible .sleek__logo { background-position: 100% 0; }
.sleek:hover .sleek__marke, .sleek:focus-visible .sleek__marke { filter: drop-shadow(0 0 5px rgba(236, 122, 92, .75)) drop-shadow(0 0 14px rgba(214, 92, 160, .55)) drop-shadow(0 0 26px rgba(124, 98, 255, .45)); }
.sleek:hover::after, .sleek:focus-visible::after { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .sleek__logo, .sleek__marke, .sleek::after { transition: none; } }

/* Leiste am Handy */
.leiste { display: none; }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: no-preference) {
	.js .zeile > span { animation: aufziehen 1.1s var(--weich) both; }
	.js .zeile:nth-child(2) > span { animation-delay: .08s; }
	.js .zeile:nth-child(3) > span { animation-delay: .16s; }
	.js .hero__text, .js .hero .knoepfe, .js .hero__karte, .js .hero .label { animation: einblenden 1s .35s var(--weich) both; }
	.js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--weich), transform 1s var(--weich); }
	.js [data-reveal].ist-da { opacity: 1; transform: none; }
	.titel em, .hero__titel em, .schluss__titel em { animation: glanz 9s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) {
	.laufband__spur, .plakette svg { animation: none; }
}
@keyframes aufziehen { from { transform: translateY(105%); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(16px); } }
@keyframes glanz { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
	.kopf__nav { gap: 20px; }
	.hero { grid-template-columns: minmax(0, 1fr); }
	.hero__karte { justify-self: start; }
	.welt { grid-template-columns: 50px minmax(0, 1fr); }
	.welt__text { grid-column: 2; margin-top: -8px; }
}

/* ---------- Handy ---------- */
@media (max-width: 860px) {
	:root { --kopf-h: 64px; }
	body { font-size: 16px; }
	.kopf { gap: 12px; }
	.kopf__nav { display: none; }
	.kopf__logo span { display: none; }
	.kopf__logo img { width: 40px; }
	.pille { height: 38px; padding: 0 14px; font-size: 12px; }
	.kopf__menue {
		display: grid; place-content: center; gap: 6px;
		width: 44px; height: 44px; margin-right: -8px;
		background: none; border: 0; color: inherit; cursor: pointer; padding: 0;
	}
	.kopf__menue span:not(.sr) { display: block; width: 24px; height: 1.5px; background: currentColor; transition: transform .35s var(--weich); }
	.kopf__menue[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
	.kopf__menue[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
	.menue-offen { overflow: hidden; }

	.hero { padding: calc(var(--kopf-h) + env(safe-area-inset-top, 0px) + 40px) var(--rand) 112px; gap: 32px; min-height: max(640px, 100svh); }
	.hero__bild img { object-position: 60% 30%; filter: brightness(.46) contrast(1.02); }
	.hero::before { background: linear-gradient(180deg, rgba(13,13,12,.72) 0%, rgba(13,13,12,.5) 22%, rgba(13,13,12,.55) 60%, rgba(13,13,12,.95) 100%); }
	.hero__titel { font-weight: 350; }
	.hero__titel { font-size: clamp(50px, 14.6vw, 84px); }
	.hero__text { font-size: 17px; margin-top: 22px; }
	.hero .knoepfe { margin-top: 26px; }
	.hero__karte { width: 100%; }
	.laufband { padding: 14px 0 16px; }

	.next__kopf { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.next .plakette { width: 116px; position: absolute; right: var(--rand); top: 26px; }
	.plakette .countdown { font-size: 16px; }
	.next { padding-top: 150px; }
	.fakten { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
	.fakten div, .fakten div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--linie-dunkel); }
	.fakten dd { font-size: 19px; }
	.next__wahl { margin: 48px 0 18px; }

	.tickets { grid-template-columns: minmax(0, 1fr); }
	.ticket {
		--stub: 58px;
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto var(--stub);
		-webkit-mask: radial-gradient(circle at 0 calc(100% - var(--stub)), transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) left / 51% 100% no-repeat,
		              radial-gradient(circle at 100% calc(100% - var(--stub)), transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) right / 51% 100% no-repeat;
		mask: radial-gradient(circle at 0 calc(100% - var(--stub)), transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) left / 51% 100% no-repeat,
		      radial-gradient(circle at 100% calc(100% - var(--stub)), transparent var(--kerbe), #000 calc(var(--kerbe) + .5px)) right / 51% 100% no-repeat;
	}
	.ticket:hover, .ticket + .ticket:hover { transform: none; }
	.ticket__haupt { padding: 12px 12px 26px; }
	.ticket .label, .ticket h3, .ticket p:not(.label), .ticket__preis { margin-left: 8px; margin-right: 8px; }
	.ticket .knopf { margin-left: 0; width: 100%; }
	.ticket__bild { margin-bottom: 22px; border-radius: 14px; }
	.ticket__preis span { font-size: 54px; }
	.ticket__abschnitt { border-left: 0; border-top: 2px dashed rgba(239, 235, 228, .22); background: repeating-linear-gradient(90deg, transparent 0 5px, rgba(239, 235, 228, .05) 5px 7px); }
	.ticket__abschnitt span { writing-mode: horizontal-tb; transform: none; font-size: 11px; letter-spacing: .24em; }

	.ablauf { grid-template-columns: minmax(0, 1fr); margin-top: 56px; border-left: 1px solid var(--schwarz); margin-left: 5px; }
	.ablauf li { border-top: 0; padding: 0 0 30px 26px; }
	.ablauf li::before { top: 8px; left: -6px; }
	.ablauf time { font-size: 28px; }

	.bald__raster { grid-template-columns: minmax(0, 1fr); }
	.plakette--gross { position: relative; top: 0; right: 0; width: 170px; color: var(--creme); justify-self: end; margin-top: -10px; }
	.plakette--gross span { font-size: 22px; }

	.welten__kopf { margin-bottom: 36px; }
	.welt { grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 18px; padding: 22px 0; }
	.welt__nr { grid-column: 1; }
	.welt__name { grid-column: 1; font-size: clamp(48px, 15vw, 72px); }
	.welt__text { grid-column: 1; margin-top: 4px; font-size: 15px; }
	.welt__mini { display: block; grid-column: 2; grid-row: 1 / 4; width: 96px; height: 96px; object-fit: cover; border-radius: 14px; }
	.welt-bild { display: none; }

	.statement { min-height: 70vh; }
	.community__raster, .brands__raster, .faq__raster { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.zahlen dt { font-size: 60px; }
	.folgen { margin-top: 64px; }
	.folgen ul { grid-template-columns: minmax(0, 1fr); }
	.brands__bild { order: 2; }
	.brands__bild img { aspect-ratio: 4 / 3; }
	.faq__raster { gap: 28px; }

	.fuss__raster { grid-template-columns: auto minmax(0, 1fr); }
	.fuss nav { grid-column: 1 / -1; }

	.leiste {
		position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40;
		display: flex; justify-content: space-between; align-items: center; gap: 12px;
		padding: 8px 8px 8px 20px; border-radius: 99px;
		background: rgba(13, 13, 12, .94); border: 1px solid var(--linie-hell);
		color: var(--creme); text-decoration: none; font-size: 14px;
		transform: translateY(140%); transition: transform .5s var(--weich);
	}
	.leiste.ist-an { transform: none; }
	.leiste__knopf { background: var(--creme); color: var(--schwarz); border-radius: 99px; padding: 12px 16px; font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
}

@media (max-width: 860px) { .sleek--gross { --sleek-breite: 120px; font-size: 16px; gap: 10px 14px; } }

@media (max-width: 380px) {
	.hero__titel { font-size: 46px; }
	.knopf { padding: 0 20px; letter-spacing: .1em; }
	.leiste > span:first-child { font-size: 13px; }
}

/* ---------- Rechtliche Seiten und 404 ---------- */
.seite-text .kopf { background: var(--schwarz); border-bottom-color: var(--linie-hell); }
.recht { background: var(--creme); color: var(--schwarz); padding: calc(var(--kopf-h) + clamp(56px, 8vw, 110px)) 0 clamp(80px, 10vw, 140px); }
.recht .rahmen { max-width: 860px; }
.recht h1 { font: 300 clamp(48px, 8vw, 96px)/.95 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.03em; text-transform: lowercase; margin: 0 0 40px; }
.recht h1 em { font-style: italic; }
.recht h2 { font: 400 26px/1.2 var(--serif); letter-spacing: -.01em; margin: 44px 0 10px; }
.recht p, .recht li { color: rgba(13, 13, 12, .78); max-width: 40em; }
.recht a { text-underline-offset: 3px; }
.recht .sleek { margin-top: 4px; }
.recht .stand { margin-top: 56px; font-size: 14px; color: var(--dunkel-gedaempft); }
.fehlt { background: #ffe36e; color: #000; padding: 1px 6px; border-radius: 4px; font-weight: 500; }
.zurueck { font: 500 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; opacity: .8; }
.zurueck:hover { opacity: 1; }
.leer { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--rand); }
.leer h1 { font: 300 clamp(64px, 14vw, 200px)/.9 var(--serif); font-variation-settings: 'opsz' 144; letter-spacing: -.04em; margin: 0 0 20px; }
.leer h1 em { font-style: italic; background: var(--silber); -webkit-background-clip: text; background-clip: text; color: transparent; }
.leer .knoepfe { justify-content: center; }