/* ==========================================================================
   Klassentreffen Festival – Main Styles
   Asphalt, Spray-Orange, Kreide. Große Schrift, viel Kontrast.
   ========================================================================== */

:root {
	--orange: #FBB03B;
	--orange-deep: #F39200;
	--ink: #111111;
	--asphalt: #181818;
	--concrete: #222222;
	--line: #333333;
	--chalk: #F4F1EA;
	--muted: #B9B4AA;

	--f-display: "Anton", "Bebas Neue", Impact, "Arial Narrow Bold", sans-serif;
	--f-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--f-hand: "Permanent Marker", "Comic Sans MS", cursive;

	--spray-mask: radial-gradient(closest-side, #000 38%, transparent 58%), var(--speckle);

	--container: 82rem;
	--gutter: clamp(1rem, 4vw, 3rem);
	--radius: .9rem;
	--header-h: 5.5rem;
	--adminbar: 0px; /* Höhe der sichtbaren WP-Admin-Leiste (eingeloggt) */
	--ease: cubic-bezier(.2, .8, .2, 1);

	--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	--speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='1' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 -4.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* ---------- Reset & Basis ---------- */

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

html {
	font-size: 112.5%; /* 18px Basis */
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + var(--adminbar));
}

/* WordPress-Admin-Leiste (eingeloggt): Header & Overlays darunter einreihen.
   Unter 600px scrollt die Leiste mit – main.js setzt --adminbar dann live. */
html:has(> body.admin-bar), .admin-bar { --adminbar: 32px; }
@media (max-width: 782px) {
	html:has(> body.admin-bar), .admin-bar { --adminbar: 46px; }
}

body {
	margin: 0;
	background: var(--asphalt);
	color: var(--chalk);
	font-family: var(--f-body);
	font-size: 1.15rem;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

[data-stage].is-ready { opacity: 1; }

/* Grunge-Körnung über der ganzen Seite */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
	background-image: var(--noise);
	opacity: .07;
	mix-blend-mode: overlay;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
::selection { background: var(--orange); color: var(--ink); }

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

.skip-link {
	position: fixed; left: 1rem; top: -4rem; z-index: 10000;
	background: var(--orange); color: var(--ink);
	padding: .6rem 1rem; font-weight: 800; text-decoration: none;
	transition: top .2s;
}
.skip-link:focus { top: 1rem; }

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 8rem); position: relative; }
.section__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__lead { font-size: clamp(1.25rem, 2vw, 1.5rem); max-width: 42rem; color: var(--muted); margin: 1.25rem 0 0; }
.section__more { margin-top: 3rem; text-align: center; }
.empty { font-size: 1.4rem; color: var(--muted); }

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1;
	letter-spacing: .01em;
	margin: 0 0 .5em;
}

/* ---------- Spray-Titel (wie „FASTLANE“) ---------- */

.tag-title {
	--c: var(--orange);
	position: relative;
	display: inline-block;
	font-size: clamp(2.6rem, 6.5vw, 5.5rem);
	color: var(--c);
	padding: .08em .32em .02em;
	margin: 0 .95em;
	border: .06em solid var(--c);
	border-radius: .18em;
	box-shadow: 0 0 0 .04em var(--ink), inset 0 0 0 .04em var(--ink);
	-webkit-text-stroke: .07em var(--ink);
	paint-order: stroke fill;
	transform: rotate(-1.5deg);
}
.tag-title::before,
.tag-title::after {
	content: "";
	position: absolute;
	top: 50%;
	width: .5em;
	height: .07em;
	border-radius: 1em;
	background: var(--c);
	box-shadow: .08em -.32em 0 var(--c), .08em .32em 0 var(--c);
}
.tag-title::before { right: calc(100% + .35em); transform: translateY(-50%) rotate(-8deg); }
.tag-title::after  { left: calc(100% + .35em);  transform: translateY(-50%) rotate(8deg); }

/* ---------- Buttons ---------- */

.btn {
	--bg: var(--orange); --fg: var(--ink); --bd: var(--ink); --sh: var(--chalk);
	display: inline-flex;
	align-items: center;
	gap: .55em;
	font-family: var(--f-display);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1;
	text-decoration: none;
	padding: .75em 1.2em .7em;
	background: var(--bg);
	color: var(--fg);
	border: 3px solid var(--bd);
	border-radius: .45rem;
	box-shadow: 5px 5px 0 var(--sh);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
	white-space: nowrap;
}
.btn .ktf-icon { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--sh); }
.btn:hover .ktf-icon { transform: translateX(4px); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--sh); }

.btn--ghost { --bg: transparent; --fg: var(--chalk); --bd: var(--chalk); --sh: var(--orange); }
.btn--ghost:hover { --bg: var(--chalk); --fg: var(--ink); }
.btn--dark { --bg: var(--ink); --fg: var(--orange); --bd: var(--ink); --sh: var(--chalk); }
.btn--small { font-size: 1.15rem; padding: .6em .95em .55em; box-shadow: 3px 3px 0 var(--sh); }
.btn--small:hover { box-shadow: 5px 5px 0 var(--sh); }
.btn--xl { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }

/* WordPress-Buttons im Content an das Design angleichen */
.wp-block-button__link {
	font-family: var(--f-display);
	text-transform: uppercase;
	font-size: 1.35rem;
	letter-spacing: .03em;
	background: var(--orange) !important;
	color: var(--ink) !important;
	border: 3px solid var(--ink);
	border-radius: .45rem !important;
	box-shadow: 5px 5px 0 var(--chalk);
	padding: .7em 1.2em .65em;
	transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.wp-block-button__link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--chalk); }

/* ---------- Header ---------- */

.site-header {
	position: fixed;
	inset: 0 0 auto;
	top: var(--adminbar);
	z-index: 100;
	height: var(--header-h);
	transition: background .3s, backdrop-filter .3s, transform .35s var(--ease);
}
.site-header.is-scrolled {
	background: rgba(17, 17, 17, .88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--line);
}
.site-header.is-hidden { transform: translateY(calc(-100% - var(--adminbar))); }
.site-header__inner {
	height: 100%;
	width: min(100% - 2 * var(--gutter), 96rem);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 2rem;
}
.site-header__logo { flex: none; display: block; }
.site-header__logo img { height: 3.6rem; width: auto; transition: transform .3s var(--ease); }
.site-header__logo:hover img { transform: rotate(-4deg) scale(1.05); }
.home .site-header:not(.is-scrolled) .site-header__logo { opacity: 0; pointer-events: none; }

.site-nav { margin-left: auto; }
.site-nav__list { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.site-nav__list a {
	position: relative;
	font-family: var(--f-display);
	font-size: 1.3rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	white-space: nowrap;
	padding-block: .3rem;
}
.site-nav__list a::after {
	content: "";
	position: absolute; left: -.15em; right: -.15em; bottom: 0;
	height: .25em;
	background: var(--orange);
	border-radius: 1em;
	transform: scaleX(0) rotate(-2deg);
	transform-origin: left;
	transition: transform .3s var(--ease);
}
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item a::after { transform: scaleX(1) rotate(-2deg); }

.site-header__actions { display: flex; align-items: center; gap: 1rem; }

.burger {
	display: none;
	width: 3.2rem; height: 3.2rem;
	background: var(--orange);
	border: 3px solid var(--ink);
	border-radius: .45rem;
	position: relative;
}
.burger span:not(.sr-only) {
	position: absolute; left: 22%; right: 22%;
	height: 3px; background: var(--ink); border-radius: 2px;
	transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span:nth-child(1) { top: 38%; }
.burger span:nth-child(2) { top: 58%; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 48%; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { top: 48%; transform: rotate(-45deg); }

@media (max-width: 1240px) {
	.site-nav { display: none; }
	.burger { display: block; }
	.site-header__actions { margin-left: auto; }
}
@media (max-width: 520px) {
	.site-header__actions .btn { display: none; }
	.site-header__logo img { height: 3rem; }
}

/* ---------- Mobile-Menü ---------- */

.mobile-menu {
	position: fixed;
	inset: var(--adminbar) 0 0;
	z-index: 90;
	background: var(--ink);
	padding: calc(var(--header-h) + 2rem) var(--gutter) 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow-y: auto;
	clip-path: circle(0% at calc(100% - 3rem) 2.75rem);
	transition: clip-path .6s var(--ease);
}
.mobile-menu.is-open { clip-path: circle(150% at calc(100% - 3rem) 2.75rem); }
.mobile-menu[hidden] { display: none; }
.mobile-menu::before {
	content: "";
	position: absolute; right: -20vw; bottom: -10vh;
	width: 80vw; height: 80vw;
	background: radial-gradient(closest-side, var(--orange) 30%, transparent 72%);
	-webkit-mask-image: var(--spray-mask); mask-image: var(--spray-mask);
	opacity: .55;
	pointer-events: none;
}
.mobile-menu__list { list-style: none; margin: 0; padding: 0; position: relative; }
.mobile-menu__list li { overflow: hidden; }
.mobile-menu__list a {
	display: block;
	font-family: var(--f-display);
	font-size: clamp(2.6rem, 11vw, 5rem);
	line-height: 1.08;
	text-transform: uppercase;
	text-decoration: none;
	transform: translateY(110%);
	transition: transform .6s var(--ease), color .2s;
}
.mobile-menu.is-open .mobile-menu__list a { transform: none; }
.mobile-menu__list li:nth-child(2) a { transition-delay: .05s; }
.mobile-menu__list li:nth-child(3) a { transition-delay: .1s; }
.mobile-menu__list li:nth-child(4) a { transition-delay: .15s; }
.mobile-menu__list li:nth-child(5) a { transition-delay: .2s; }
.mobile-menu__list li:nth-child(6) a { transition-delay: .25s; }
.mobile-menu__list li:nth-child(7) a { transition-delay: .3s; }
.mobile-menu__list a:hover { color: var(--orange); }
.mobile-menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2.5rem; position: relative; }
body.menu-open { overflow: hidden; }

/* ---------- Socials ---------- */

.socials { display: flex; gap: .75rem; flex-wrap: wrap; }
.socials a {
	display: grid; place-items: center;
	width: 3.2rem; height: 3.2rem;
	border: 2px solid var(--chalk);
	border-radius: 50%;
	transition: background .2s, color .2s, transform .2s var(--ease);
}
.socials a:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: rotate(-8deg) scale(1.08); }
.socials .ktf-icon { width: 1.35rem; height: 1.35rem; }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	min-height: calc(100vh - var(--adminbar));
	min-height: calc(100svh - var(--adminbar));
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	/* Foto auch ohne WebGL sichtbar; das Canvas legt sich nach dem Laden deckungsgleich darüber. */
	background:
		linear-gradient(180deg, rgba(17, 17, 17, .3), transparent 35%, transparent 65%, rgba(17, 17, 17, .55)),
		var(--hero-img, none) 62% 98% / cover no-repeat,
		var(--ink);
	padding: calc(var(--header-h) + 1rem) var(--gutter) 5rem;
}
.hero__stage, .artist-hero__stage, .not-found__stage {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	z-index: -1;
	opacity: 0;
	transition: opacity .8s ease;
}
.hero__grain {
	position: absolute; inset: 0; z-index: -1;
	background-image: var(--noise);
	opacity: .14;
	mix-blend-mode: overlay;
	pointer-events: none;
}
.hero__content { text-align: center; width: 100%; max-width: 110rem; }

.hero__title {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(.25rem, 1.5vw, 1.5rem);
	margin: 0;
}
.hero__year {
	font-family: var(--f-display);
	font-size: clamp(6rem, 24vw, 24rem);
	line-height: .82;
	color: var(--orange);
	letter-spacing: -.01em;
	text-shadow: 0 .03em 0 var(--orange-deep), 0 .08em .2em rgba(0, 0, 0, .5);
	will-change: transform;
}
.hero__logo { width: clamp(9.5rem, 36vw, 36rem); flex: none; will-change: transform; }
.hero__logo-img { width: 100%; filter: drop-shadow(0 .5rem 1.5rem rgba(0, 0, 0, .6)); animation: wobble 6s ease-in-out infinite; }

@keyframes wobble {
	0%, 100% { transform: rotate(-1.5deg); }
	50% { transform: rotate(1.5deg) scale(1.02); }
}

.hero__claim {
	font-family: var(--f-hand);
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	color: var(--chalk);
	margin: clamp(1rem, 3vw, 2rem) 0 1rem;
	transform: rotate(-2deg);
}
.hero__facts {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: .75rem 1.5rem;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 3.6vw, 3rem);
	text-transform: uppercase;
	line-height: 1.1;
}
.hero__date { color: var(--ink); background: var(--orange); padding: .05em .35em 0; transform: rotate(-1deg); }
.hero__loc { display: inline-block; }
.hero__loc .ktf-icon { display: inline-block; width: .75em; height: .75em; margin-right: .2em; vertical-align: -.02em; color: var(--orange); }

.countdown {
	display: flex; justify-content: center;
	gap: clamp(.5rem, 2vw, 1.25rem);
	margin: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.countdown div {
	min-width: clamp(4.4rem, 12vw, 7rem);
	padding: .6rem .5rem .5rem;
	border: 2px solid rgba(244, 241, 234, .25);
	border-radius: var(--radius);
	background: rgba(17, 17, 17, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.countdown b {
	display: block;
	font-family: var(--f-display);
	font-weight: 400;
	font-size: clamp(2.2rem, 5vw, 3.8rem);
	line-height: 1;
	color: var(--orange);
	font-variant-numeric: tabular-nums;
}
.countdown span { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--muted); }
.countdown.is-live { font-family: var(--f-display); font-size: 2.5rem; color: var(--orange); }

.hero__ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.25rem; }


@media (max-width: 700px) {
	.hero__year { font-size: 25vw; }
	.hero__logo { width: 38vw; }
}

/* ---------- Laufband ---------- */

.marquee {
	position: relative;
	z-index: 2;
	overflow: hidden;
	background: var(--orange);
	color: var(--ink);
	border-block: 3px solid var(--ink);
	transform: rotate(-2deg) scale(1.04);
	margin-block: -1.5rem;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, .35);
}
.marquee__track {
	display: flex;
	width: max-content;
	animation: marquee 40s linear infinite;
}
.marquee__track span {
	flex: none;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 3.2vw, 2.6rem);
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: .55rem .4em .45rem;
	white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee--footer { background: var(--ink); color: var(--orange); border-color: var(--orange); transform: rotate(1.5deg) scale(1.04); margin: 0 0 4rem; }
.marquee--footer .marquee__track { animation-direction: reverse; animation-duration: 55s; }

/* ---------- Line-up ---------- */

.lineup {
	position: relative;
	padding-block: clamp(6rem, 12vw, 10rem) clamp(4rem, 9vw, 8rem);
	text-align: center;
	overflow: hidden;
}
.lineup__bg {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(38rem 30rem at 92% 12%, rgba(251, 176, 59, .5), transparent 70%),
		radial-gradient(34rem 28rem at 4% 88%, rgba(251, 176, 59, .35), transparent 70%);
	-webkit-mask-image: var(--speckle); mask-image: var(--speckle);
	opacity: .5;
}
.lineup__head { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; margin-bottom: 2.5rem; }
.lineup__date { font-family: var(--f-hand); font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--orange); margin: 0; }

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.chip {
	font-family: var(--f-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: .55em 1.15em .45em;
	background: transparent;
	border: 2px solid var(--chalk);
	border-radius: 2rem;
	transition: background .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
[data-filter-group="hotels"] { justify-content: flex-start; }
.chip:hover { transform: rotate(-3deg); }
.chip.is-active { background: var(--orange); border-color: var(--orange); color: var(--ink); }

.lineup__list { display: flex; flex-direction: column; align-items: center; gap: clamp(.2rem, 1vw, .7rem); }
.lineup__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--f-display);
	font-size: var(--fs);
	line-height: 1.02;
	text-transform: uppercase;
}
.lineup__item {
	display: inline-flex;
	align-items: center;
	transition: opacity .35s, transform .35s var(--ease), filter .35s;
}
.lineup__item:not(:last-child)::after {
	content: "✦";
	font-size: .4em;
	color: var(--orange);
	margin-inline: .45em;
	transform: translateY(-.1em);
}
.lineup__item a {
	text-decoration: none;
	display: inline-block;
	transition: color .2s, transform .25s var(--ease), opacity .25s;
}
/* Antons hohe Schriftbox ragt in die Nachbarzeilen. Der Text selbst ist daher nicht klickbar,
   geklickt wird nur die Box des Links – die endet genau an der eigenen Zeile. Umlaute bleiben sichtbar. */
.lineup__item a > span { pointer-events: none; }
.lineup__item.is-highlight a { color: var(--orange); }
.lineup__row--w10 .lineup__item a,
.lineup__row--w9 .lineup__item a { text-shadow: 0 .04em 0 rgba(0, 0, 0, .6); }

/* Hover: Rest dimmen, Aktiver springt raus */
.lineup__list:hover .lineup__item a { opacity: .35; }
.lineup__list .lineup__item a:hover,
.lineup__list .lineup__item a:focus-visible { opacity: 1; color: var(--orange); transform: skewX(-8deg) scale(1.04); }
.lineup__item.is-highlight a:hover { color: var(--chalk); }
.lineup__item.is-filtered { display: none; }
.lineup__row:not(:has(.lineup__item:not(.is-filtered))) { display: none; }

.lineup__more { font-family: var(--f-hand); font-size: clamp(1.5rem, 3vw, 2.4rem); color: var(--orange); margin: 2rem 0 0; transform: rotate(-2deg); }

/* Bild folgt dem Cursor */
.cursor-preview {
	position: fixed; left: 0; top: 0; z-index: 200;
	width: 15rem; aspect-ratio: 4 / 5;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s;
}
.cursor-preview.is-visible { opacity: 1; }
.cursor-preview img {
	width: 100%; height: 100%; object-fit: cover;
	border: 4px solid var(--chalk);
	box-shadow: 10px 10px 0 var(--orange);
	filter: grayscale(1) contrast(1.15);
}
@media (hover: none) { .cursor-preview { display: none; } }

/* ---------- Artist-Grid ---------- */

.artist-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
	margin-top: 3rem;
}
.artist-card {
	display: block;
	text-decoration: none;
	background: var(--concrete);
	border-radius: var(--radius);
	overflow: hidden;
	border: 2px solid var(--line);
	transition: border-color .25s, box-shadow .25s;
	transform-style: preserve-3d;
}
.artist-card:hover { border-color: var(--orange); box-shadow: 8px 8px 0 var(--orange); }
.artist-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ink); position: relative; }
.artist-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1); transition: filter .4s, transform .6s var(--ease); }
.artist-card:hover .artist-card__media img { filter: none; transform: scale(1.06); }
.artist-card__placeholder, .hotel-card__placeholder {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	font-family: var(--f-display);
	font-size: 9rem;
	color: var(--orange);
	background:
		radial-gradient(closest-side, rgba(251, 176, 59, .2), transparent),
		var(--ink);
	-webkit-text-stroke: 3px var(--ink);
}
.artist-card__body { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; padding: 1rem 1.1rem 1.1rem; }
.artist-card__name { font-family: var(--f-display); font-size: 1.75rem; text-transform: uppercase; line-height: 1.05; }
.artist-card__day { font-size: 1rem; font-weight: 600; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }

/* ---------- Artist-Einzelseite ---------- */

.artist-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: calc(var(--header-h) + 3rem) 0 clamp(3rem, 7vw, 6rem);
	background: radial-gradient(ellipse at 70% 0%, #333, transparent 60%), var(--ink);
}
.artist-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.artist-hero__media { position: relative; transform-style: preserve-3d; }
.artist-hero__media::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--orange);
	clip-path: polygon(4% 2%, 30% 0, 62% 3%, 98% 0, 100% 35%, 97% 70%, 100% 100%, 60% 97%, 25% 100%, 0 98%, 2% 60%, 0 25%);
	transform: rotate(4deg) translate(4%, 3%);
	z-index: -1;
}
.artist-hero__img, .artist-hero__placeholder {
	width: 100%;
	aspect-ratio: 9 / 11;
	object-fit: cover;
	filter: grayscale(1) contrast(1.2);
	clip-path: polygon(2% 1%, 40% 0, 70% 2%, 99% 0, 100% 40%, 98% 75%, 100% 99%, 65% 100%, 30% 98%, 0 100%, 1% 65%, 0 30%);
	border: 0;
}
.artist-hero__placeholder { display: grid; place-items: center; background: var(--concrete); padding: 15%; filter: none; }
.artist-hero__credit { margin: 1.75rem 0 0; font-size: 1rem; color: var(--muted); letter-spacing: .02em; }
.back-link {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--f-display);
	font-size: 1.25rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	text-decoration: none;
	color: var(--muted);
	margin-bottom: 1.5rem;
	transition: color .2s;
}
.back-link .ktf-icon { width: 1em; height: 1em; transform: scaleX(-1); transition: transform .25s var(--ease); }
.back-link:hover { color: var(--orange); }
.back-link:hover .ktf-icon { transform: scaleX(-1) translateX(4px); }
.artist-hero__genre { font-family: var(--f-hand); font-size: clamp(1.4rem, 2.5vw, 2rem); color: var(--orange); margin: 0 0 .5rem; transform: rotate(-2deg); transform-origin: left; }
/* Anton ist sehr hoch: der Text des riesigen Namens ragt über seine Zeile hinaus und würde
   Link/Socials darüber und darunter abdecken. Alles andere im Textblock liegt deshalb eine Ebene höher. */
.artist-hero__text > :not(.artist-hero__name) { position: relative; z-index: 1; }
.artist-hero__name {
	font-size: clamp(3.5rem, 10vw, 10rem);
	line-height: .88;
	margin: 0 0 2rem;
	overflow-wrap: anywhere;
	hyphens: auto;
}
.artist-hero__facts {
	display: flex; flex-wrap: wrap; gap: 1rem;
	list-style: none; margin: 0 0 2rem; padding: 0;
}
.artist-hero__facts li {
	font-family: var(--f-display);
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	text-transform: uppercase;
	line-height: 1.1;
	padding: .55rem 1.1rem .45rem;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .03);
}
.artist-hero__facts span { display: block; font-family: var(--f-body); font-size: .9rem; font-weight: 600; letter-spacing: .1em; color: var(--orange); }
@media (max-width: 860px) {
	.artist-hero__inner { grid-template-columns: 1fr; }
	.artist-hero__media { max-width: 26rem; }
}

.artist-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
@media (max-width: 960px) { .artist-body { grid-template-columns: 1fr; } }
.artist-aside { display: grid; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + var(--adminbar) + 1rem); }

.consent-embed { border-radius: var(--radius); overflow: hidden; background: var(--concrete); border: 2px solid var(--line); }
.consent-embed__placeholder { padding: 1.5rem; }
.consent-embed__placeholder p { margin: 0 0 1rem; font-size: 1.05rem; color: var(--muted); }
.consent-embed iframe { width: 100%; display: block; border: 0; }

.ticket-sticker {
	background: var(--orange);
	color: var(--ink);
	padding: 1.75rem;
	border-radius: var(--radius);
	transform: rotate(-2deg);
	box-shadow: 8px 8px 0 var(--chalk);
	font-weight: 600;
}
.ticket-sticker__title { font-family: var(--f-display); font-size: 2.6rem; text-transform: uppercase; line-height: 1; margin: 0 0 .5rem; font-weight: 400; }
.ticket-sticker p { margin: 0 0 1.25rem; }

.artist-nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
	padding-bottom: clamp(4rem, 8vw, 7rem);
}
.artist-nav__link {
	display: block;
	text-decoration: none;
	font-family: var(--f-display);
	font-size: clamp(1.6rem, 4vw, 3.4rem);
	text-transform: uppercase;
	line-height: 1;
	padding: 1.5rem;
	border: 2px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .2s, color .2s, background .2s;
}
.artist-nav__link span { display: block; font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); margin-bottom: .5rem; }
.artist-nav__link--next { text-align: right; }
.artist-nav__link:hover { border-color: var(--orange); color: var(--orange); background: rgba(251, 176, 59, .06); }

/* ---------- Seitenkopf ---------- */

.page-head {
	position: relative;
	overflow: hidden;
	padding: calc(var(--header-h) + clamp(3rem, 8vw, 6rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
	background: var(--ink);
	border-bottom: 3px solid var(--orange);
}
.page-head__splash {
	position: absolute; right: -10vw; top: -20vw;
	width: 60vw; height: 60vw;
	background: radial-gradient(closest-side, var(--orange) 25%, transparent 70%);
	-webkit-mask-image: var(--spray-mask); mask-image: var(--spray-mask);
	opacity: .7;
	pointer-events: none;
}
.page-head .container { position: relative; }
.page-head__kicker { font-family: var(--f-hand); font-size: clamp(1.3rem, 2.4vw, 1.9rem); color: var(--orange); margin: 0 0 .5rem; transform: rotate(-2deg); transform-origin: left; }
.page-head__title {
	font-size: clamp(3.5rem, 11vw, 10rem);
	line-height: .88;
	margin: 0;
	text-shadow: .05em .05em 0 var(--orange);
	overflow-wrap: anywhere;
}
.page-head__intro { font-size: clamp(1.25rem, 2vw, 1.55rem); max-width: 44rem; margin: 1.5rem 0 0; color: var(--muted); }

/* ---------- Fließtext ---------- */

.prose { font-size: clamp(1.15rem, 1.4vw, 1.3rem); line-height: 1.7; }
.prose > :where(p, ul, ol, h2, h3, h4, blockquote, .wp-block-details, figure:not(.alignwide):not(.alignfull)) { max-width: 50rem; }
.prose--wide > :where(p, h2, h3) { max-width: 60rem; }
.prose > * { margin-block: 0; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-top: 1.6em; color: var(--orange); }
.prose h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 1.4em; }
.prose a:not(.wp-block-button__link):not(.btn) { color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: .2em; }
.prose ul:not(.wp-block-list.is-plain) { padding-left: 1.2em; }
.prose li::marker { color: var(--orange); }
.prose img { border-radius: var(--radius); }
.prose blockquote {
	margin-inline: 0;
	padding: 1rem 0 1rem 1.5rem;
	border-left: 6px solid var(--orange);
	font-family: var(--f-hand);
	font-size: 1.6rem;
	line-height: 1.4;
}
.prose__hero { margin: 0 0 2rem; }

/* FAQ (core/details) */
.wp-block-details {
	border: 2px solid var(--line);
	border-radius: var(--radius);
	background: var(--concrete);
	padding: 0;
	transition: border-color .2s;
}
.wp-block-details + .wp-block-details { margin-top: 1rem; }
.wp-block-details[open] { border-color: var(--orange); }
.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	font-family: var(--f-display);
	font-size: clamp(1.4rem, 2.5vw, 1.9rem);
	text-transform: uppercase;
	line-height: 1.15;
	padding: 1.25rem 4rem 1.15rem 1.5rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
/* Plus als zwei gezeichnete Balken statt Schriftzeichen – sitzt dadurch exakt mittig. */
.wp-block-details summary::after {
	content: "";
	position: absolute; right: 1.25rem; top: 50%;
	width: 2.2rem; height: 2.2rem;
	margin-top: -1.1rem;
	border-radius: 50%;
	background:
		linear-gradient(var(--ink), var(--ink)) center / 45% 3px no-repeat,
		linear-gradient(var(--ink), var(--ink)) center / 3px 45% no-repeat,
		var(--orange);
	transition: transform .3s var(--ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { padding: 0 1.5rem 1.4rem; margin: 0; }

/* FAQ (CPT) */
.chips--start { justify-content: flex-start; }
.faq-group + .faq-group { margin-top: clamp(2.5rem, 5vw, 4rem); }
.faq-group.is-filtered { display: none; }
.faq-group__title { font-size: clamp(2rem, 4vw, 3rem); color: var(--orange); margin-bottom: 1.25rem; }
.faq-item { max-width: 56rem; }
.faq-item:target { border-color: var(--orange); box-shadow: 6px 6px 0 var(--orange); }
.faq-item__answer { font-size: clamp(1.15rem, 1.4vw, 1.3rem); line-height: 1.7; color: var(--chalk); }
.faq-item__answer > * { margin: 0; }
.faq-item__answer > * + * { margin-top: 1em; }
.faq-item__answer a { color: var(--orange); }

/* Ticket-Karten (Pattern) */
.ticket-grid { gap: 1.5rem !important; align-items: stretch; margin-block: 2.5rem !important; }
.ticket-card {
	position: relative;
	background: var(--concrete);
	border: 3px solid var(--line);
	border-radius: 1.2rem;
	padding: 2rem 1.75rem !important;
	display: flex !important;
	flex-direction: column;
	transition: transform .3s var(--ease), border-color .3s;
}
.ticket-card:hover { transform: translateY(-6px) rotate(-.5deg); border-color: var(--orange); }
.ticket-card > * { margin: 0 !important; }
.ticket-card > * + * { margin-top: 1rem !important; }
.ticket-card h3 { font-size: 2.4rem; color: var(--chalk); }
.ticket-card__price { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--orange); }
.ticket-card ul { list-style: none; padding: 0 !important; flex: 1; }
.ticket-card li { padding: .45rem 0 .45rem 1.8rem; border-bottom: 1px dashed var(--line); position: relative; }
.ticket-card li::before { content: "✦"; position: absolute; left: 0; color: var(--orange); }
.ticket-card.is-featured { background: var(--orange); color: var(--ink); border-color: var(--ink); box-shadow: 10px 10px 0 var(--chalk); }
.ticket-card.is-featured h3, .ticket-card.is-featured .ticket-card__price { color: var(--ink); }
.ticket-card.is-featured li { border-color: rgba(0, 0, 0, .25); }
.ticket-card.is-featured li::before { color: var(--ink); }
.ticket-card.is-featured .wp-block-button__link { background: var(--ink) !important; color: var(--orange) !important; }
.ticket-card__badge {
	position: absolute; top: -1.1rem; right: 1.25rem;
	margin: 0 !important;
	font-family: var(--f-hand); font-size: 1.3rem;
	background: var(--ink); color: var(--orange);
	padding: .25rem .9rem;
	border-radius: .4rem;
	transform: rotate(4deg);
}

/* Sticker-Kacheln (Pattern) */
.sticker-grid, .ticket-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)) !important;
}
.sticker-grid { gap: clamp(1.5rem, 3vw, 2.5rem) !important; margin-block: 1rem !important; }
.sticker-tile {
	position: relative;
	text-align: center;
	padding: 2.5rem 1.5rem 2rem !important;
	background: var(--ink);
	border-radius: 1.2rem;
	border: 2px solid var(--line);
	transition: transform .35s var(--ease);
}
.sticker-tile:nth-child(odd) { transform: rotate(-1.2deg); }
.sticker-tile:nth-child(even) { transform: rotate(1.2deg); }
.sticker-tile:hover { transform: rotate(0) translateY(-6px); }
.sticker-tile > * { margin: 0 !important; }
.sticker-tile > * + * { margin-top: .8rem !important; }
.sticker-tile__icon {
	position: relative;
	width: 7.5rem; height: 7.5rem;
	margin-inline: auto !important;
	display: grid; place-items: center;
	font-family: var(--f-display);
	font-size: 3.6rem;
	line-height: 1;
	color: var(--ink);
	isolation: isolate;
}
.sticker-tile__icon::before {
	content: "";
	position: absolute; inset: -30%;
	background: radial-gradient(closest-side, var(--orange) 50%, transparent 75%);
	-webkit-mask-image: var(--spray-mask); mask-image: var(--spray-mask);
	z-index: -1;
}
.sticker-tile h3 {
	font-size: 2.4rem;
	color: var(--orange);
	-webkit-text-stroke: .06em var(--ink);
	paint-order: stroke fill;
}
.sticker-tile p:not(.sticker-tile__icon) { font-size: 1.15rem; color: var(--muted); }

/* ---------- Unterkünfte ---------- */

.hotel-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: clamp(1.25rem, 2.5vw, 2rem);
}
.hotel-card {
	display: flex;
	flex-direction: column;
	background: var(--concrete);
	border: 2px solid var(--line);
	border-radius: 1.1rem;
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
	transform-style: preserve-3d;
}
.hotel-card:hover { border-color: var(--orange); box-shadow: 8px 8px 0 var(--orange); }
.hotel-card.is-filtered { display: none; }
.hotel-card__media { position: relative; aspect-ratio: 16 / 10; background: var(--ink); overflow: hidden; }
.hotel-card__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.6) contrast(1.1); transition: filter .4s, transform .6s var(--ease); }
.hotel-card:hover .hotel-card__media img { filter: none; transform: scale(1.05); }
.hotel-card__placeholder { font-size: 7rem; }
.hotel-card__type {
	position: absolute; left: 1rem; top: 1rem;
	font-family: var(--f-display); font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em;
	background: var(--orange); color: var(--ink);
	padding: .3rem .8rem .2rem;
	border-radius: .35rem;
	transform: rotate(-3deg);
}
.hotel-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem 1.4rem 1.6rem; flex: 1; }
.hotel-card__title { font-size: 2rem; margin: 0; }
.hotel-card__meta { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 600; color: var(--orange); }
.hotel-card__meta .ktf-icon { width: 1.1rem; height: 1.1rem; }
.hotel-card__address, .hotel-card__text { margin: 0; color: var(--muted); font-size: 1.05rem; }
.hotel-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: auto; padding-top: .75rem; }
.hotel-card__price { font-family: var(--f-display); font-size: 1.6rem; text-transform: uppercase; }
.hotel-card__code {
	background: transparent;
	border: 2px dashed var(--orange);
	color: var(--chalk);
	border-radius: .4rem;
	padding: .3rem .7rem;
	font-size: 1rem;
	transition: background .2s, color .2s;
}
.hotel-card__code:hover { background: var(--orange); color: var(--ink); }
.hotel-card__code.is-copied::after { content: " ✓ kopiert"; }
.hotel-card__btn { align-self: flex-start; margin-top: .5rem; }

/* ---------- Großer CTA ---------- */

.big-cta {
	position: relative;
	isolation: isolate;
	background: var(--orange);
	color: var(--ink);
	text-align: center;
	padding-block: clamp(6rem, 14vw, 11rem);
	margin-top: 3rem;
	clip-path: polygon(0 4%, 8% 1%, 20% 3.5%, 33% 0, 47% 3%, 60% .5%, 74% 3.5%, 88% 1%, 100% 3%, 100% 97%, 90% 99.5%, 77% 96.5%, 63% 99%, 50% 96%, 36% 99.5%, 22% 97%, 10% 99.5%, 0 97%);
	overflow: hidden;
}
.big-cta__splash {
	position: absolute; inset: 0; z-index: -1;
	background:
		radial-gradient(closest-side at 15% 30%, rgba(0, 0, 0, .3), transparent 60%),
		radial-gradient(closest-side at 90% 80%, rgba(0, 0, 0, .25), transparent 60%);
	-webkit-mask-image: var(--speckle); mask-image: var(--speckle);
}
.big-cta__kicker { font-family: var(--f-hand); font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 0; transform: rotate(-2deg); }
.big-cta__title { font-size: clamp(4rem, 13vw, 13rem); line-height: .85; margin: .2em 0 .35em; }
.big-cta .btn { --sh: var(--chalk); }

/* ---------- Posts ---------- */

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 2rem; }
.post-card { display: flex; flex-direction: column; gap: .5rem; text-decoration: none; }
.post-card__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post-card:hover img { transform: scale(1.05); }
.post-card__date { color: var(--orange); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; }
.post-card__title { font-family: var(--f-display); font-size: 2rem; text-transform: uppercase; line-height: 1.05; }
.post-card__text { color: var(--muted); }
.pagination { margin-top: 3rem; font-family: var(--f-display); font-size: 1.4rem; }
.pagination .nav-links { display: flex; gap: .75rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .3rem .8rem; border: 2px solid var(--line); border-radius: .4rem; text-decoration: none; }
.pagination .current { background: var(--orange); color: var(--ink); border-color: var(--orange); }

/* ---------- 404 ---------- */

.not-found {
	position: relative;
	isolation: isolate;
	min-height: calc(100svh - var(--adminbar));
	display: grid;
	place-items: center;
	text-align: center;
	padding: calc(var(--header-h) + 2rem) 0 4rem;
	background: var(--ink);
	overflow: hidden;
}
.not-found__code { font-family: var(--f-display); font-size: clamp(8rem, 30vw, 22rem); line-height: .8; color: var(--orange); margin: 0; }
.not-found__title { font-size: clamp(2.5rem, 7vw, 5.5rem); margin: .5rem 0; }
.not-found__text { font-size: 1.4rem; color: var(--muted); margin: 0 0 2.5rem; }

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

.site-footer { background: var(--ink); padding: 0 0 2.5rem; overflow: hidden; border-top: 3px solid var(--orange); }
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 3rem;
	align-items: end;
	padding-bottom: 3rem;
	border-bottom: 1px solid var(--line);
}
.site-footer__logo { width: clamp(12rem, 22vw, 18rem); }
.site-footer__text { font-family: var(--f-hand); font-size: 1.5rem; color: var(--muted); max-width: 28rem; margin: 1.25rem 0 0; }
.site-footer__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; text-align: right; }
.site-footer__date { font-family: var(--f-display); font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--orange); line-height: 1; margin: 0; }
.site-footer__loc { display: flex; align-items: center; gap: .4rem; font-size: 1.25rem; font-weight: 600; margin: 0 0 .75rem; }
.site-footer__loc .ktf-icon { width: 1.2rem; height: 1.2rem; color: var(--orange); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-top: 2rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.footer-nav a { text-decoration: none; font-weight: 600; font-size: 1.05rem; color: var(--muted); }
.footer-nav a:hover { color: var(--orange); }
.site-footer__copy { margin: 0; color: var(--muted); font-size: 1rem; }
.site-footer__copy a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-footer__copy a:hover { color: var(--orange); }
@media (max-width: 760px) {
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__cta { align-items: flex-start; text-align: left; }
}

/* ---------- Scroll-Reveal & Split-Text ---------- */

.reveal { opacity: 0; translate: 0 2.5rem; transition: opacity .8s var(--ease), translate .8s var(--ease), transform .35s var(--ease), border-color .25s, box-shadow .25s; }
.reveal.is-in { opacity: 1; translate: none; }

[data-split] .char {
	display: inline-block;
	transform: translateY(.6em) rotate(8deg);
	opacity: 0;
	transition: transform .6s var(--ease), opacity .6s var(--ease);
	transition-delay: calc(var(--i) * 25ms);
}
[data-split].is-in .char { transform: none; opacity: 1; }

/* ---------- Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.reveal, [data-split] .char { opacity: 1; transform: none; translate: none; }
}