/* DJ Boerschi, main.css */

@font-face { font-family: "Unbounded"; src: url("../fonts/unbounded.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("../fonts/figtree.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
	--bg: #07060d;
	--bg-2: #0e0c19;
	--bg-3: #161327;
	--ink: #f4f1ff;
	--muted: #b3adcf;
	--line: rgba(244, 241, 255, .12);
	--a: #ff2bd6;      /* Lichtfarbe, umschaltbar */
	--a2: #7a5cff;     /* Zweitfarbe */
	--a-ink: #12000e;  /* Text auf Akzentfläche */
	--font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
	--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wrap: 1240px;
	--gutter: clamp(16px, 4vw, 40px);
	--radius: 14px;
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--ease-io: cubic-bezier(.77, 0, .175, 1);
	--section: clamp(88px, 12vw, 168px);
	color-scheme: dark;
}
html[data-light="cyan"]  { --a: #1fe3ff; --a2: #2f6bff; --a-ink: #00141a; }
html[data-light="lime"]  { --a: #b8ff3c; --a2: #19d38a; --a-ink: #0d1400; }
html[data-light="amber"] { --a: #ffb020; --a2: #ff4d3d; --a-ink: #1a0d00; }

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
:where(body, h1, h2, h3, p, figure, ol, ul, blockquote, dl, dd) { margin: 0; }
:where(ol, ul) { padding: 0; list-style: none; }
:where(img, video, canvas, svg) { display: block; max-width: 100%; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(a) { color: inherit; }

body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(17px, 1.05vw + 12px, 19px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	transition: background-color .6s var(--ease-out);
}
::selection { background: var(--a); color: var(--a-ink); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; background: var(--a); color: var(--a-ink); padding: 10px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; transition: top .2s var(--ease-out); }
.skip:focus { top: 16px; }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--text { max-width: 860px; }
.section { padding-block: var(--section); position: relative; }

.h2 {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(2.1rem, 5.4vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	text-wrap: balance;
	max-width: 16ch;
}
.lead { color: var(--muted); font-size: clamp(1.08rem, 1.3vw, 1.3rem); max-width: 52ch; margin-top: 20px; text-wrap: pretty; }

/* ---------- Buttons ---------- */
.btn {
	--glow: color-mix(in srgb, var(--a) 55%, transparent);
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 26px;
	border: 0; border-radius: 999px;
	background: var(--a); color: var(--a-ink);
	font-weight: 750; font-size: 1rem; letter-spacing: .01em;
	text-decoration: none; cursor: pointer;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 70%, white), 0 8px 30px -6px var(--glow);
	transition: transform .16s var(--ease-out), box-shadow .3s var(--ease-out), background-color .4s;
	-webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
	.btn:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 70%, white), 0 10px 44px -4px var(--glow), 0 0 80px -10px var(--glow); }
}
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 40%, transparent); }
@media (hover: hover) and (pointer: fine) {
	.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--a), 0 0 30px -8px var(--glow); color: var(--ink); }
}
.btn--small { min-height: 40px; padding: 8px 18px; font-size: .92rem; }
.btn--big { min-height: 56px; padding: 14px 32px; font-size: 1.05rem; }

/* ---------- Header ---------- */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 50;
	padding-top: env(safe-area-inset-top);
	transition: background-color .3s, backdrop-filter .3s, box-shadow .3s;
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.site-header__in { display: flex; align-items: center; justify-content: space-between; min-height: 84px; }

.logo { display: inline-flex; align-items: center; text-decoration: none; padding-block: 6px; -webkit-tap-highlight-color: transparent; }
.logo-svg { display: block; height: clamp(50px, 5.2vw, 70px); width: auto; overflow: visible; }
.logo-svg path { transform-box: fill-box; }
.lg-top, .lg-bot { fill: var(--ink); stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ink) 35%, transparent)); transition: transform .28s var(--ease-out); }
.lg-play, .lg-de, .lg-bracket { fill: var(--a); transition: fill .4s; }
.lg-play { transform-origin: center; filter: drop-shadow(0 0 18px var(--a)); animation: lgPop .7s cubic-bezier(.34, 1.56, .64, 1) .55s both, lgPulse 2.6s ease-in-out 1.4s infinite; }
.lg-bracket { filter: drop-shadow(0 0 14px var(--a)); animation: lgBracket .6s var(--ease-out) .75s both; }
.lg-de { animation: lgDe .6s var(--ease-out) .9s both; }
.lg-top { animation: lgTop .8s var(--ease-out) .05s both; }
.lg-bot { animation: lgBot .8s var(--ease-out) .05s both; }
@keyframes lgTop { from { transform: translateX(-14%); opacity: 0; } }
@keyframes lgBot { from { transform: translateX(14%); opacity: 0; } }
@keyframes lgPop { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }
@keyframes lgBracket { from { transform: translateX(-60%); opacity: 0; } }
@keyframes lgDe { from { transform: translateY(-40%); opacity: 0; } }
@keyframes lgPulse { 0%, 100% { filter: drop-shadow(0 0 10px var(--a)); } 50% { filter: drop-shadow(0 0 26px var(--a)) brightness(1.25); } }
@media (hover: hover) and (pointer: fine) {
	.logo:hover .lg-top { transform: translateX(-1.2%); }
	.logo:hover .lg-bot { transform: translateX(1.2%); }
}
.logo--footer .logo-svg { height: 80px; }
.logo--footer .logo-svg path { animation: none; }
.logo--footer .lg-play, .logo--footer .lg-bracket { filter: drop-shadow(0 0 10px var(--a)); }

.nav__list { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav__list a:not(.btn) { text-decoration: none; font-weight: 600; font-size: .98rem; color: var(--muted); padding: 10px 2px; transition: color .2s; }
.nav__list a:not(.btn):hover { color: var(--ink); }
.nav__toggle { display: none; }

@media (max-width: 900px) {
	.nav__toggle { display: grid; place-items: center; width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer; border-radius: 12px; }
	.nav__bars, .nav__bars::before, .nav__bars::after { display: block; width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease-out), opacity .2s; }
	.nav__bars { position: relative; }
	.nav__bars::before, .nav__bars::after { content: ""; position: absolute; left: 0; }
	.nav__bars::before { top: -7px; } .nav__bars::after { top: 7px; }
	.nav__toggle[aria-expanded="true"] .nav__bars { background: transparent; }
	.nav__toggle[aria-expanded="true"] .nav__bars::before { transform: translateY(7px) rotate(45deg); }
	.nav__toggle[aria-expanded="true"] .nav__bars::after { transform: translateY(-7px) rotate(-45deg); }
	.nav__list {
		position: fixed; inset: calc(84px + env(safe-area-inset-top)) 0 auto; flex-direction: column; align-items: stretch; gap: 0;
		padding: 12px var(--gutter) 28px; background: color-mix(in srgb, var(--bg) 96%, transparent);
		-webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
		box-shadow: 0 1px 0 var(--line), 0 30px 60px -20px #000;
		opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
		transition: opacity .22s var(--ease-out), transform .22s var(--ease-out), visibility 0s .22s;
	}
	.nav__list.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
	.nav__list a:not(.btn) { display: block; padding: 14px 0; font-size: 1.15rem; color: var(--ink); border-bottom: 1px solid var(--line); }
	.nav__list .btn { margin-top: 18px; width: 100%; min-height: 52px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; padding: 120px 0 clamp(64px, 9vh, 110px); isolation: isolate; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__video { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) contrast(1.05); transform: scale(1.04); }
.hero__beams { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
.hero__scrim { position: absolute; inset: 0; background:
	linear-gradient(180deg, rgba(7,6,13,.55) 0%, rgba(7,6,13,.15) 30%, rgba(7,6,13,.55) 62%, var(--bg) 100%),
	linear-gradient(90deg, rgba(7,6,13,.85) 0%, rgba(7,6,13,.35) 55%, rgba(7,6,13,0) 100%); }
.hero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, min(8.4vw, 13.5vh), 8rem); line-height: .92; letter-spacing: -.035em; }
.hero__title > span { display: block; }
.hero__line2 { color: var(--ink); }
.hero__sub { margin-top: clamp(22px, 3vw, 34px); max-width: 46ch; font-size: clamp(1.08rem, 1.4vw, 1.32rem); color: color-mix(in srgb, var(--ink) 86%, transparent); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero__hint { margin-top: 22px; font-size: .92rem; color: var(--muted); }
.hero__scroll { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 42px; margin-left: -13px; border-radius: 20px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 45%, transparent); }
.hero__scroll span { position: absolute; left: 50%; top: 9px; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--a); animation: scrollDot 1.8s var(--ease-out) infinite; }
@keyframes scrollDot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* Neon-Röhre */
.neon {
	--glow:
		0 0 2px #fff,
		0 0 6px color-mix(in srgb, var(--a) 90%, white),
		0 0 16px var(--a),
		0 0 38px var(--a),
		0 0 80px color-mix(in srgb, var(--a) 75%, transparent),
		0 0 150px color-mix(in srgb, var(--a) 55%, transparent);
	color: color-mix(in srgb, var(--a) 30%, white);
	text-shadow: var(--glow);
	transition: color .4s, text-shadow .4s;
}
.neon { animation: neonOn .9s steps(1, end) .05s both, neonHum 5s ease-in-out 1.2s infinite; }
@keyframes neonHum { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes neonOn {
	0% { opacity: .08; text-shadow: none; }
	12% { opacity: 1; text-shadow: var(--glow); }
	18% { opacity: .15; text-shadow: none; }
	40% { opacity: 1; text-shadow: var(--glow); }
	46% { opacity: .3; text-shadow: none; }
	62%, 100% { opacity: 1; text-shadow: var(--glow); }
}
.hero__line2, .hero__sub, .hero__cta, .hero__hint { animation: heroUp .6s var(--ease-out) both; }
.hero__line2 { animation-delay: .25s; }
.hero__sub { animation-delay: .35s; }
.hero__cta { animation-delay: .45s; }
.hero__hint { animation-delay: .6s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Seit 1994 ---------- */
.since { position: relative; padding-block: clamp(56px, 8vw, 110px); border-block: 1px solid var(--line); background: linear-gradient(180deg, var(--bg), var(--bg-2)); overflow: hidden; }
.since__in { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 5vw, 80px); align-items: center; position: relative; z-index: 1; }
.since__num { font-family: var(--font-display); font-weight: 900; font-size: clamp(5rem, 17vw, 15rem); line-height: .8; letter-spacing: -.05em; font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, var(--ink) 20%, color-mix(in srgb, var(--a) 80%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.since__lead { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.1; margin-bottom: 12px; }
.since__text p:last-child { color: var(--muted); max-width: 40ch; }
.eq { position: absolute; inset: auto 0 0 0; height: 70%; display: flex; align-items: flex-end; gap: 1.2%; padding-inline: 2%; opacity: .16; z-index: 0; pointer-events: none; }
.eq span { flex: 1; height: 100%; border-radius: 4px 4px 0 0; background: linear-gradient(0deg, var(--a), var(--a2)); transform-origin: bottom; transform: scaleY(.2); animation: eq 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.17s); }
.eq span:nth-child(3n) { animation-duration: 1.05s; } .eq span:nth-child(4n+1) { animation-duration: 1.7s; }
@keyframes eq { 0% { transform: scaleY(.12); } 50% { transform: scaleY(.7); } 100% { transform: scaleY(.3); } }
@media (max-width: 700px) { .since__in { grid-template-columns: 1fr; } }

/* ---------- Anlässe ---------- */
.anlaesse__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); margin-top: clamp(40px, 6vw, 80px); align-items: start; }
.anlass { border-top: 1px solid var(--line); }
.anlass:last-child { border-bottom: 1px solid var(--line); }
.anlass__btn { display: flex; align-items: baseline; gap: 20px; width: 100%; padding: 22px 0 6px; background: none; border: 0; text-align: left; cursor: pointer; }
.anlass__no { font-family: var(--font-display); font-size: .9rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.anlass__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -.02em; color: color-mix(in srgb, var(--ink) 45%, transparent); transition: color .35s var(--ease-out), text-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.anlass__text { color: var(--muted); padding: 0 0 22px calc(20px + 1.6ch); max-width: 44ch; }
.anlass.is-active .anlass__name { color: var(--ink); text-shadow: 0 0 22px color-mix(in srgb, var(--a) 55%, transparent); transform: translateX(6px); }
.anlass.is-active .anlass__no { color: var(--a); }
.anlass__img-m { display: none; }
.anlaesse__stage { position: sticky; top: 110px; aspect-ratio: 4 / 3.3; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); box-shadow: 0 40px 80px -30px #000, 0 0 0 1px var(--line); }
.anlaesse__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .5s var(--ease-out), transform .9s var(--ease-out); }
.anlaesse__stage img.is-on { opacity: 1; transform: scale(1); }
.anlaesse__glow { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--a) 35%, transparent), transparent 60%); mix-blend-mode: color; pointer-events: none; }
@media (max-width: 860px) {
	.anlaesse__grid { grid-template-columns: 1fr; }
	.anlaesse__stage { display: none; }
	.anlass__img-m { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 12px; margin: 0 0 24px; }
	.anlass__name { color: var(--ink); }
	.anlass__text { padding-left: 0; }
	.anlass__btn { cursor: default; }
}

/* ---------- Story ---------- */
.story { background: radial-gradient(70% 60% at 0% 50%, color-mix(in srgb, var(--a2) 16%, transparent), transparent 70%); }
.story__grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.story__photo { position: sticky; top: 110px; }
.story__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line), 0 30px 90px -30px color-mix(in srgb, var(--a) 60%, transparent); }
.story__tag { margin-top: 16px; font-family: var(--font-display); font-weight: 700; line-height: 1.3; }
.story__tag span { font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.timeline { position: relative; margin-top: clamp(36px, 5vw, 64px); padding-left: 34px; }
.timeline::before, .timeline::after { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; }
.timeline::before { background: var(--line); }
.timeline::after { background: linear-gradient(180deg, var(--a), var(--a2)); box-shadow: 0 0 14px var(--a); transform-origin: top; transform: scaleY(var(--p, 1)); }
.js .timeline::after { transform: scaleY(var(--p, 0)); }
.timeline li { position: relative; padding-bottom: clamp(30px, 4vw, 48px); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -34px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px var(--a); }
.timeline__when { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--a); margin-bottom: 6px; transition: color .4s; }
.timeline li p:last-child { color: color-mix(in srgb, var(--ink) 84%, transparent); max-width: 48ch; }
@media (max-width: 860px) {
	.story__grid { grid-template-columns: 1fr; }
	.story__photo { position: relative; top: 0; }
	.story__photo img { aspect-ratio: 1 / 1; }
}

/* ---------- Leistung ---------- */
.leistung { background: var(--bg-2); border-block: 1px solid var(--line); }
.leistung__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.leistung__item { padding: 32px 26px 8px 0; border-right: 1px solid var(--line); }
.leistung__item + .leistung__item { padding-left: 26px; }
.leistung__item:last-child { border-right: 0; }
.leistung__item svg { width: 46px; height: 46px; fill: none; stroke: var(--a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--a) 70%, transparent)); margin-bottom: 26px; transition: stroke .4s; }
.leistung__item h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin-bottom: 10px; }
.leistung__item p { color: var(--muted); font-size: 1rem; }
@media (max-width: 980px) {
	.leistung__list { grid-template-columns: 1fr 1fr; }
	.leistung__item, .leistung__item + .leistung__item { padding: 30px 20px 30px 0; border-right: 0; border-bottom: 1px solid var(--line); }
	.leistung__item:nth-child(odd) { border-right: 1px solid var(--line); }
	.leistung__item:nth-child(even) { padding-left: 20px; }
}
@media (max-width: 560px) {
	.leistung__list { grid-template-columns: 1fr; }
	.leistung__item:nth-child(odd) { border-right: 0; }
	.leistung__item:nth-child(even) { padding-left: 0; }
}

/* ---------- Galerie mit Spot ---------- */
.galerie__grid { --mx: -999px; --my: -999px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 250px); grid-auto-flow: dense; gap: 12px; margin-top: clamp(40px, 6vw, 72px); position: relative; }
.galerie__item { position: relative; overflow: hidden; border-radius: 12px; background: var(--bg-3); }
.galerie__item--wide { grid-column: span 2; }
.galerie__item--tall { grid-row: span 2; }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	.galerie__item:hover img { transform: scale(1.04); }
	.galerie__grid::after {
		content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
		background: radial-gradient(260px circle at var(--mx) var(--my), transparent 0, transparent 30%, rgba(7,6,13,.72) 100%);
		opacity: 0; transition: opacity .35s var(--ease-out);
	}
	.galerie__grid.is-spot::after { opacity: 1; }
	.galerie__grid::before {
		content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; mix-blend-mode: soft-light;
		background: radial-gradient(220px circle at var(--mx) var(--my), color-mix(in srgb, var(--a) 70%, transparent), transparent 70%);
		opacity: 0; transition: opacity .35s var(--ease-out);
	}
	.galerie__grid.is-spot::before { opacity: 1; }
}
@media (max-width: 760px) {
	.galerie__grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 42vw; gap: 8px; }
	.galerie__item--tall { grid-row: span 1; }
}

/* ---------- Referenzen Marquee ---------- */
.refs { overflow: hidden; }
.marquee { margin-top: clamp(32px, 5vw, 56px); }
.marquee__label { font-family: var(--font-body); font-size: .95rem; font-weight: 700; color: var(--a); margin-bottom: 12px; transition: color .4s; }
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; animation-duration: 40s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; flex-shrink: 0; }
.marquee__row li { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.4vw, 2.8rem); letter-spacing: -.015em; padding-inline: clamp(18px, 2.4vw, 34px); white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink) 55%, transparent); transition: color .3s, text-shadow .3s, -webkit-text-stroke-color .3s; position: relative; }
.marquee__row li::after { content: ""; position: absolute; right: -4px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a); }
@media (hover: hover) and (pointer: fine) {
	.marquee__row li:hover { color: var(--ink); -webkit-text-stroke-color: transparent; text-shadow: 0 0 20px var(--a), 0 0 50px var(--a); }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- FAQ ---------- */
.faq__list { margin-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; min-height: 48px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.3; }
.faq__icon { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .3s, transform .3s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-out); }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { box-shadow: inset 0 0 0 1.5px var(--a), 0 0 16px -2px var(--a); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__item p { color: var(--muted); padding: 0 50px 26px 0; max-width: 64ch; }

/* ---------- Anfrage ---------- */
.anfrage { background: radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--a) 18%, transparent), transparent 70%), var(--bg); }
.anfrage__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 100px); align-items: start; }
.anfrage__direct { display: grid; gap: 12px; margin-top: 36px; }
.direct { display: block; padding: 18px 22px; border-radius: var(--radius); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .3s var(--ease-out), transform .16s var(--ease-out); }
.direct:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .direct:hover { box-shadow: inset 0 0 0 1px var(--a), 0 0 30px -10px var(--a); } }
.direct__label { display: block; font-size: .88rem; color: var(--muted); font-weight: 600; }
.direct__value { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.45rem); overflow-wrap: anywhere; }

.form { background: color-mix(in srgb, var(--bg-2) 85%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: calc(var(--radius) + 6px); padding: clamp(22px, 3.4vw, 42px); box-shadow: inset 0 0 0 1px var(--line), 0 40px 100px -40px #000; display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label { font-size: .92rem; font-weight: 650; color: color-mix(in srgb, var(--ink) 88%, transparent); }
.field input, .field select, .field textarea {
	width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--ink);
	background: var(--bg); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line);
	transition: box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 120px; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 15px) 22px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--a), 0 0 20px -6px var(--a); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px #ff5a5a; }
.field input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .7; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: .94rem; color: var(--muted); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--a); }
.check a { color: var(--ink); }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__msg { padding: 14px 18px; border-radius: 10px; font-weight: 600; }
.form__msg--ok { background: color-mix(in srgb, var(--a) 18%, var(--bg)); box-shadow: inset 0 0 0 1px var(--a); }
.form__msg--err, .form__err { background: rgba(255, 90, 90, .12); box-shadow: inset 0 0 0 1px #ff5a5a; color: #ffd6d6; padding: 12px 16px; border-radius: 10px; }
.form .btn { justify-self: start; }
@media (max-width: 900px) { .anfrage__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } .form .btn { width: 100%; } }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 calc(110px + env(safe-area-inset-bottom)); background: var(--bg); }
.site-footer__in { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; align-items: start; }
.site-footer__claim { color: var(--muted); margin-top: 10px; }
.site-footer__contact { font-style: normal; display: grid; gap: 6px; }
.site-footer__contact a, .site-footer__legal a { text-decoration: none; color: var(--ink); padding-block: 4px; }
.site-footer__contact a:hover, .site-footer__legal a:hover { color: var(--a); }
.site-footer__contact span, .site-footer__legal span { color: var(--muted); }
.site-footer__legal { display: grid; gap: 6px; justify-items: start; }
@media (max-width: 760px) { .site-footer__in { grid-template-columns: 1fr; } }

/* ---------- Unterseiten ---------- */
.subpage { padding: 150px 0 var(--section); min-height: 70vh; }
.subpage__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1.05; letter-spacing: -.02em; margin-bottom: 36px; }
.prose { color: color-mix(in srgb, var(--ink) 88%, transparent); margin-bottom: 48px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; margin-top: 2em; color: var(--ink); }
.prose h3 { font-weight: 750; font-size: 1.1rem; margin-top: 1.5em; color: var(--ink); }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose a { color: var(--a); }
.prose mark { background: color-mix(in srgb, var(--a) 30%, transparent); color: var(--ink); padding: 0 .25em; border-radius: 4px; }
.big404 { font-family: var(--font-display); font-weight: 900; font-size: clamp(6rem, 22vw, 16rem); line-height: .8; color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--a) 60%, transparent); margin-bottom: 24px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* ---------- Lichtpult ---------- */
.pult { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.pult__toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px 10px 14px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .95rem;
	background: color-mix(in srgb, var(--bg-3) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: inset 0 0 0 1px var(--line), 0 14px 40px -10px #000; transition: transform .16s var(--ease-out), box-shadow .3s; }
.pult__toggle:active { transform: scale(.96); }
.pult__led { width: 10px; height: 10px; border-radius: 50%; background: var(--a); box-shadow: 0 0 10px var(--a), 0 0 2px #fff inset; animation: led 2.4s ease-in-out infinite; }
@keyframes led { 50% { box-shadow: 0 0 18px var(--a), 0 0 2px #fff inset; } }
.pult__panel { width: 236px; padding: 18px; border-radius: 18px; background: color-mix(in srgb, var(--bg-3) 94%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -20px #000; transform-origin: bottom right; }
.pult__panel:not([hidden]) { animation: pultIn .22s var(--ease-out); }
@keyframes pultIn { from { opacity: 0; transform: scale(.94) translateY(6px); } }
.pult__label { font-size: .82rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.pult__colors { display: flex; gap: 10px; margin-bottom: 16px; }
.pult__color { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 3px transparent, 0 0 16px -2px var(--c); transition: transform .16s var(--ease-out), box-shadow .2s; }
.pult__color:active { transform: scale(.92); }
.pult__color[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg-3), 0 0 0 4px var(--ink), 0 0 22px var(--c); }
.pult__color[data-color="magenta"] { --c: #ff2bd6; }
.pult__color[data-color="cyan"] { --c: #1fe3ff; }
.pult__color[data-color="lime"] { --c: #b8ff3c; }
.pult__color[data-color="amber"] { --c: #ffb020; }
.pult__switch { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: .95rem; }
.pult__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pult__track { position: relative; width: 46px; height: 26px; border-radius: 20px; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .25s, box-shadow .25s; flex: none; }
.pult__knob { position: absolute; left: 4px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .25s var(--ease-out), background-color .25s; }
.pult__switch input:checked + .pult__track { background: color-mix(in srgb, var(--a) 30%, var(--bg)); box-shadow: inset 0 0 0 1.5px var(--a), 0 0 14px -3px var(--a); }
.pult__switch input:checked + .pult__track .pult__knob { transform: translateX(20px); background: var(--a); }
.pult__switch input:focus-visible + .pult__track { outline: 2px solid var(--a); outline-offset: 3px; }

/* ---------- Discokugel ---------- */
.disco { position: fixed; inset: 0; z-index: 40; pointer-events: none; visibility: hidden; }
.disco.is-on { visibility: visible; }
.disco__dots { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0; transition: opacity .8s var(--ease-out) .5s; }
.disco.is-on .disco__dots { opacity: 1; }
.disco__string { position: absolute; left: 50%; top: 0; width: 2px; height: 96px; margin-left: -1px; background: linear-gradient(#999, #555); transform-origin: top; transform: scaleY(0); transition: transform .55s var(--ease-out); }
.disco__ball {
	position: absolute; left: 50%; top: 92px; width: 96px; height: 96px; margin-left: -48px; border-radius: 50%;
	background:
		radial-gradient(circle at 34% 30%, rgba(255,255,255,.95) 0 6%, transparent 18%),
		repeating-linear-gradient(0deg, rgba(0,0,0,.45) 0 1px, transparent 1px 9px),
		repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, transparent 1px 9px),
		conic-gradient(from 0deg, #cfd3e6, #6d7087, #f4f6ff, #8b8fa8, #dfe2f2, #5e6178, #cfd3e6);
	background-size: auto, 100% 100%, 200% 100%, 200% 100%;
	box-shadow: inset -14px -16px 26px rgba(0,0,0,.55), inset 8px 8px 18px rgba(255,255,255,.25), 0 0 50px color-mix(in srgb, var(--a) 60%, transparent);
	transform: translateY(-200px);
	transition: transform .7s cubic-bezier(.34, 1.4, .64, 1);
	animation: ballSpin 4s linear infinite;
}
.disco.is-on .disco__string { transform: scaleY(1); }
.disco.is-on .disco__ball { transform: none; }
@keyframes ballSpin { to { background-position: 0 0, 0 0, -200% 0, -200% 0; } }

/* Saallicht aus */
html.is-blackout body { background: #000; }
html.is-blackout .hero__video { filter: brightness(.35) saturate(1.4); }
html.is-blackout .section:not(.hero), html.is-blackout .since { filter: brightness(.6); transition: filter .6s var(--ease-out); }
html.is-blackout .neon { filter: brightness(1.2); }

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.hero__video { display: none; }
	.hero__media { background: url("../img/hero-poster.webp") center / cover no-repeat; }
	.js .reveal { opacity: 1 !important; transform: none !important; }
	.js .timeline::after { transform: scaleY(1); }
	.eq span { transform: scaleY(.45); }
	.marquee__track { animation: none; flex-wrap: wrap; width: auto; padding-inline: var(--gutter); }
	.marquee__row[aria-hidden="true"] { display: none; }
	.marquee__row { flex-wrap: wrap; row-gap: 10px; }
}

@media print {
	.site-header, .pult, .disco, .hero__media, .eq { display: none !important; }
	body { background: #fff; color: #000; }
	.js .reveal { opacity: 1; transform: none; }
}
@media (hover: none) { .galerie__hint { display: none; } }
@media (max-width: 560px) { .pult__toggle { min-height: 44px; padding: 8px 14px 8px 12px; font-size: .88rem; } }

/* =========================================================
   Erweiterungen Oktober 2026
   ========================================================= */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn .ico { margin-inline: -2px 2px; }
.h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; }

/* Datums-Check im Hero */
.datecheck { margin-top: 30px; max-width: 520px; }
.datecheck__label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
.datecheck__row { display: flex; gap: 8px; padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 55%, transparent), 0 0 40px -12px var(--a); }
.datecheck__input { flex: 1; min-width: 0; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 16px; color-scheme: dark; }
.datecheck__input:focus { outline: none; }
.datecheck__row:focus-within { box-shadow: inset 0 0 0 2px var(--a), 0 0 50px -8px var(--a); }
.datecheck__input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .75; cursor: pointer; }
.hero__cta { margin-top: 18px; }
@media (max-width: 480px) { .datecheck__row { flex-direction: column; border-radius: 20px; } .datecheck__row .btn { width: 100%; } }
.form__prefill { padding: 12px 16px; border-radius: 10px; background: color-mix(in srgb, var(--a) 16%, var(--bg)); box-shadow: inset 0 0 0 1px var(--a); font-weight: 600; }

/* Anlässe: Mehr-Link */
.anlass__more { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; color: var(--a); font-weight: 700; text-decoration: none; white-space: nowrap; }
.anlass__more:hover { text-decoration: underline; }

/* Kontakt-Buttons */
.cbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cbtn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; min-height: 64px; padding: 12px 18px; border-radius: var(--radius); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .25s var(--ease-out), transform .16s var(--ease-out); }
.cbtn .ico { grid-row: span 2; width: 26px; height: 26px; color: var(--a); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--a) 60%, transparent)); }
.cbtn__label { font-size: .84rem; font-weight: 600; color: var(--muted); }
.cbtn__value { font-family: var(--font-display); font-weight: 700; font-size: 1rem; overflow-wrap: anywhere; }
.cbtn:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) { .cbtn:hover { box-shadow: inset 0 0 0 1px var(--a), 0 0 30px -10px var(--a); } }
.cbtn--wa .ico { color: #25d366; filter: drop-shadow(0 0 6px rgba(37,211,102,.5)); }
.cbtns--big { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 32px; }
.cbtns--compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cbtns--compact .cbtn__value { display: none; }
.cbtns--compact .cbtn { min-height: 52px; grid-template-rows: auto; }
.cbtns--compact .cbtn .ico { grid-row: auto; }
.anfrage__direct { margin-top: 36px; }
.anfrage__direct .cbtns { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .anfrage__direct .cbtns { grid-template-columns: 1fr; } }

/* Preis + Partner */
.preis { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 36px; align-items: center; margin-top: clamp(40px, 6vw, 72px); padding: clamp(24px, 3.5vw, 40px); border-radius: calc(var(--radius) + 6px); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%), var(--bg-3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 40%, var(--line)); }
.preis__label { grid-column: 1; font-weight: 700; color: var(--muted); font-size: .92rem; }
.preis__value { grid-column: 1; grid-row: 2; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.8rem); line-height: 1; white-space: nowrap; }
.preis__value span { color: var(--a); text-shadow: 0 0 24px color-mix(in srgb, var(--a) 60%, transparent); }
.preis__text { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); max-width: 46ch; }
.preis .btn { grid-column: 3; grid-row: 1 / span 2; }
@media (max-width: 860px) { .preis { grid-template-columns: 1fr; } .preis__text, .preis .btn, .preis__value { grid-column: 1; grid-row: auto; } .preis .btn { justify-self: start; } }
.partner { display: grid; grid-template-columns: auto 1fr; gap: 4px 28px; align-items: center; margin-top: 14px; padding: 22px clamp(22px, 3.5vw, 40px); border-radius: calc(var(--radius) + 6px); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .3s var(--ease-out); }
.partner__label { grid-column: 1 / -1; font-size: .85rem; font-weight: 700; color: var(--muted); }
.partner__name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -.02em; background: linear-gradient(90deg, var(--ink), var(--a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.partner__text { color: var(--muted); }
.partner__url { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: var(--a); font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .partner:hover { box-shadow: inset 0 0 0 1px var(--a), 0 0 40px -14px var(--a); } }
@media (max-width: 600px) { .partner { grid-template-columns: 1fr; } }

/* So läuft's */
.ablauf__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); margin-top: clamp(40px, 6vw, 72px); counter-reset: s; position: relative; }
.ablauf__list::before { content: ""; position: absolute; top: 34px; left: 34px; right: 34px; height: 2px; background: linear-gradient(90deg, var(--a), var(--a2)); box-shadow: 0 0 12px var(--a); transform-origin: left; transform: scaleX(var(--p, 1)); }
.js .ablauf__list::before { transform: scaleX(var(--p, 0)); transition: transform 1.2s var(--ease-out); }
.js .ablauf__list.is-in::before { --p: 1; }
.schritt { position: relative; }
.schritt__no { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--a), 0 0 30px -6px var(--a); font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--a); margin-bottom: 22px; }
.schritt h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; margin-bottom: 8px; }
.schritt p { color: var(--muted); max-width: 34ch; }
@media (max-width: 760px) { .ablauf__list { grid-template-columns: 1fr; } .ablauf__list::before { top: 34px; bottom: 34px; left: 33px; right: auto; width: 2px; height: auto; transform-origin: top; transform: scaleY(var(--p, 1)); } .js .ablauf__list::before { transform: scaleY(var(--p, 0)); } .schritt { padding-left: 92px; } .schritt__no { position: absolute; left: 0; top: 0; } }

/* Crossfader */
.xfade__stage { position: relative; aspect-ratio: 16 / 9; margin-top: clamp(32px, 5vw, 56px); border-radius: calc(var(--radius) + 6px); overflow: hidden; background: var(--bg-3); box-shadow: 0 40px 90px -40px #000, 0 0 0 1px var(--line); }
.xfade__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.xfade__img--a { filter: saturate(.75) brightness(.95); }
.xfade__img--b { clip-path: inset(0 0 0 calc(var(--x) * 100%)); }
.xfade__stage::after { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: 3px; margin-left: -1.5px; background: var(--a); box-shadow: 0 0 18px var(--a), 0 0 40px var(--a); }
.xfade__tag { position: absolute; top: 16px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: .85rem; background: color-mix(in srgb, var(--bg) 75%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.xfade__tag--a { left: 16px; } .xfade__tag--b { right: 16px; color: var(--a); }
.fader { display: flex; align-items: center; gap: 16px; max-width: 560px; margin: 22px auto 0; padding: 14px 22px; border-radius: 16px; background: linear-gradient(180deg, #1c1930, #0d0b18); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px -20px #000; }
.fader__end { font-family: var(--font-display); font-weight: 800; color: var(--muted); }
.fader__input { flex: 1; appearance: none; -webkit-appearance: none; height: 44px; background: transparent; cursor: grab; touch-action: pan-y; }
.fader__input:active { cursor: grabbing; }
.fader__input::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, transparent 1px 10%), #05040a; box-shadow: inset 0 1px 3px #000; }
.fader__input::-moz-range-track { height: 8px; border-radius: 8px; background: #05040a; }
.fader__input::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 44px; margin-top: -18px; border-radius: 6px; background: linear-gradient(180deg, #f4f4f8 0 44%, var(--a) 44% 56%, #c9c9d6 56%); box-shadow: 0 6px 14px rgba(0,0,0,.6), 0 0 18px -4px var(--a); }
.fader__input::-moz-range-thumb { width: 34px; height: 44px; border: 0; border-radius: 6px; background: linear-gradient(180deg, #f4f4f8 0 44%, var(--a) 44% 56%, #c9c9d6 56%); box-shadow: 0 6px 14px rgba(0,0,0,.6); }
.fader__input:focus-visible { outline: 2px solid var(--a); outline-offset: 4px; }

/* Stimmen */
.stimmen__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.gbadge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 700; }
.gbadge .ico { width: 22px; height: 22px; stroke-width: 1.4; }
.gbadge__score { font-family: var(--font-display); font-size: 1.3rem; }
.gbadge__stars, .stimme__stars { display: inline-flex; gap: 2px; color: #ffc93c; }
.gbadge__stars .ico, .stimme__stars .ico { width: 18px; height: 18px; stroke: none; }
.gbadge__label { color: var(--muted); }
.stimmen__list { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin-top: clamp(32px, 5vw, 56px); }
.stimme { display: flex; flex-direction: column; gap: 16px; padding: clamp(22px, 3vw, 32px); border-radius: calc(var(--radius) + 6px); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.stimme:first-child { background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--a) 16%, transparent), transparent 55%), var(--bg-2); }
.stimme__text { margin: 0; padding: 0; border: 0; flex: 1; font-size: 1.05rem; line-height: 1.55; }
.stimme:first-child .stimme__text { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.stimme__who { display: grid; gap: 2px; font-size: .95rem; }
.stimme__who span { color: var(--muted); }
.stimmen__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.stimmen__cta .btn .ico { color: #ffc93c; stroke: none; }
.stimmen__note { margin-top: 18px; font-size: .82rem; color: var(--muted); max-width: 70ch; }
@media (max-width: 900px) { .stimmen__list { grid-template-columns: 1fr; } }

/* Footer: Social + Leistungen */
.site-footer__in { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 980px) { .site-footer__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__in { grid-template-columns: 1fr; } }
.site-footer__pages { display: grid; gap: 6px; justify-items: start; }
.site-footer__pages a { text-decoration: none; padding-block: 4px; }
.site-footer__pages a:hover { color: var(--a); }
.social { display: flex; gap: 10px; margin-top: 18px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .25s, color .25s; }
.social a:hover { color: var(--a); box-shadow: inset 0 0 0 1px var(--a), 0 0 20px -6px var(--a); }
.social .ico { width: 20px; height: 20px; }

/* Mobile Schnellkontakt-Leiste */
.mbar { display: none; }
@media (max-width: 760px) {
	.mbar { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 6px; padding: 6px; border-radius: 20px; background: color-mix(in srgb, var(--bg-3) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 20px 40px -10px #000; }
	.mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: .92rem; }
	.mbar a:active { transform: scale(.97); }
	.mbar a:nth-child(2) .ico { color: #25d366; }
	.mbar__main { background: var(--a); color: var(--a-ink); }
	.pult { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 72px); }
	.site-footer { padding-bottom: calc(170px + env(safe-area-inset-bottom)); }
}

/* Leistungsseiten */
.lhero { position: relative; min-height: min(88svh, 820px); display: grid; align-items: end; padding: 140px 0 clamp(56px, 8vh, 96px); isolation: isolate; overflow: hidden; }
.lhero__media { position: absolute; inset: 0; z-index: -1; }
.lhero__media img { width: 100%; height: 100%; object-fit: cover; animation: kenburns 24s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
.lhero__fx { position: absolute; inset: 0; pointer-events: none; }
.crumbs { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--ink); }
.lhero__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 6.6vw, 6rem); line-height: .96; letter-spacing: -.03em; max-width: 14ch; text-wrap: balance; }
.lhero__price { margin-top: 20px; color: var(--muted); }
.lhero__price strong { color: var(--a); font-family: var(--font-display); font-size: 1.2em; }
.prose--landing { font-size: 1.08rem; }
.prose--landing h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; margin-top: 1.6em; }
.prose--landing ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.prose--landing ul li { position: relative; padding-left: 30px; }
.prose--landing ul li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 12px; height: 12px; border-radius: 50%; background: var(--a); box-shadow: 0 0 12px var(--a); }
.djcard { background: var(--bg-2); border-block: 1px solid var(--line); }
.djcard__grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: center; }
.djcard__photo { margin: 0; }
.djcard__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: calc(var(--radius) + 6px); box-shadow: 0 0 0 1px var(--line), 0 30px 90px -30px color-mix(in srgb, var(--a) 60%, transparent); }
@media (max-width: 760px) { .djcard__grid { grid-template-columns: 1fr; } .djcard__photo img { aspect-ratio: 1 / 1; } }
.ctaband { text-align: left; background: radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--a) 18%, transparent), transparent 70%); }
.ctaband__more { margin-top: 24px; }
.more-pages { padding-block: 56px; border-top: 1px solid var(--line); }
.more-pages__list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.more-pages__list a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 20px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; font-weight: 700; }
.more-pages__list a:hover { box-shadow: inset 0 0 0 1px var(--a); color: var(--a); }

/* Variante Hochzeit: warm, champagner, Lichterketten statt Laser */
body.v-hochzeit { --a: #f2c6a8; --a2: #e8a0b4; --a-ink: #2a120a; --bg: #0d0a0c; --bg-2: #161013; --bg-3: #201619; --muted: #c9b7b2; background: var(--bg); }
body.v-hochzeit .lhero__title, body.v-hochzeit .h2 { font-weight: 700; letter-spacing: -.02em; }
body.v-hochzeit .lhero__title em { font-style: normal; color: var(--a); text-shadow: 0 0 30px color-mix(in srgb, var(--a) 60%, transparent); }
body.v-hochzeit .hero__scrim { background: linear-gradient(180deg, rgba(13,10,12,.55) 0%, rgba(13,10,12,.2) 35%, rgba(13,10,12,.7) 70%, var(--bg) 100%), linear-gradient(90deg, rgba(13,10,12,.85), rgba(13,10,12,.2) 70%); }
body.v-hochzeit .lhero__media img { filter: sepia(.25) saturate(.9) brightness(.95); }
body.v-hochzeit .lhero__fx { background:
	radial-gradient(4px 4px at 12% 22%, #ffe9c9, transparent 70%), radial-gradient(3px 3px at 28% 12%, #ffe9c9, transparent 70%),
	radial-gradient(5px 5px at 46% 18%, #ffd9b8, transparent 70%), radial-gradient(3px 3px at 63% 9%, #ffe9c9, transparent 70%),
	radial-gradient(4px 4px at 78% 20%, #ffd9b8, transparent 70%), radial-gradient(3px 3px at 90% 11%, #ffe9c9, transparent 70%);
	filter: drop-shadow(0 0 6px #ffcf9a); animation: twinkle 3.6s ease-in-out infinite alternate; }
body.v-hochzeit .lhero__fx::before { content: ""; position: absolute; inset: 0; background:
	radial-gradient(60px 60px at 20% 70%, rgba(255,215,180,.16), transparent 70%), radial-gradient(90px 90px at 70% 60%, rgba(242,198,168,.14), transparent 70%),
	radial-gradient(50px 50px at 85% 80%, rgba(232,160,180,.14), transparent 70%), radial-gradient(70px 70px at 45% 85%, rgba(255,215,180,.12), transparent 70%);
	animation: bokeh 14s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: .55; } to { opacity: 1; } }
@keyframes bokeh { to { transform: translate(2%, -4%) scale(1.06); } }
body.v-hochzeit .btn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 70%, white), 0 10px 30px -10px color-mix(in srgb, var(--a) 60%, transparent); }
body.v-hochzeit .prose--landing ul li::before { border-radius: 0; width: 10px; height: 10px; transform: rotate(45deg); }

/* Variante Firma: klar, kühl, Business */
body.v-firma { --a: #6fd3ff; --a2: #7b8cff; --a-ink: #001520; --bg: #070a10; --bg-2: #0c111a; --bg-3: #131a26; --muted: #a7b3c6; background: var(--bg); }
body.v-firma .lhero__media img { filter: saturate(.8) contrast(1.05); animation-duration: 30s; }
body.v-firma .hero__scrim { background: linear-gradient(180deg, rgba(7,10,16,.6), rgba(7,10,16,.25) 35%, rgba(7,10,16,.75) 72%, var(--bg)), linear-gradient(90deg, rgba(7,10,16,.9), rgba(7,10,16,.2) 70%); }
body.v-firma .lhero__fx { background-image: linear-gradient(rgba(111,211,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(111,211,255,.07) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 60%, transparent); }
body.v-firma .lhero__fx::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: linear-gradient(90deg, transparent, rgba(111,211,255,.12), transparent); animation: sweep 7s ease-in-out infinite; }
@keyframes sweep { from { left: -30%; } to { left: 100%; } }
body.v-firma .prose--landing ul li::before { border-radius: 3px; }
body.has-variant .pult__label, body.has-variant .pult__colors { display: none; }

/* Musikwunsch (Gäste) */
.wunsch { min-height: 100svh; padding: 120px 0 80px; background: radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 70%); }
.wunsch__in { max-width: 560px; text-align: center; }
.wunsch__icon .ico { width: 56px; height: 56px; margin: 0 auto 10px; color: var(--a); filter: drop-shadow(0 0 14px var(--a)); }
.wunsch__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 10vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.wunsch .lead { margin-inline: auto; }
.wunsch__form, .wunsch .form__msg { margin-top: 28px; text-align: left; }
.wunsch__form .btn { width: 100%; justify-self: stretch; }
.wunsch__note { font-size: .82rem; color: var(--muted); text-align: center; }
.wunsch__rate { display: grid; gap: 12px; margin: 34px 0 24px; padding: 26px; border-radius: 20px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.wunsch__rate .btn .ico { color: #ffc93c; stroke: none; }
.wunsch__ask { font-weight: 700; font-size: 1.1rem; }
.wunsch__count { font-size: .88rem; color: var(--muted); }
.wunsch .neon { animation-delay: .1s; }

/* Musikwünsche live (Pult) */
.live { min-height: 100svh; padding: 110px 0 80px; }
.live__login { max-width: 460px; }
.live__login form { display: grid; gap: 14px; margin-top: 24px; }
.live__login label { display: block; font-weight: 650; margin-bottom: 6px; }
.live__login input[type=text], .live__login input[type=password] { width: 100%; min-height: 52px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: var(--bg-2); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); }
.live__login input[type=submit] { min-height: 52px; padding: 12px 28px; border: 0; border-radius: 999px; background: var(--a); color: var(--a-ink); font-weight: 800; cursor: pointer; }
.live__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.live__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1; }
.live__meta { display: flex; gap: 18px; align-items: center; color: var(--muted); }
.live__logout { color: var(--muted); }
.live__tabs { display: flex; gap: 8px; margin-top: 26px; overflow-x: auto; }
.live__tabs button { min-height: 44px; padding: 8px 18px; border: 0; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; cursor: pointer; white-space: nowrap; }
.live__tabs button[aria-selected="true"] { background: var(--a); color: var(--a-ink); box-shadow: none; }
.live__tabs span { display: inline-block; min-width: 1.6em; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: rgba(0,0,0,.25); font-variant-numeric: tabular-nums; }
.live__help { margin-top: 14px; font-size: .88rem; color: var(--muted); }
.live__list { display: grid; gap: 8px; margin-top: 16px; }
.wish { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 12px 12px 12px 6px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s var(--ease-out), opacity .2s; }
.wish.is-new { box-shadow: inset 0 0 0 1.5px var(--a), 0 0 30px -10px var(--a); }
.wish.is-dragging { opacity: .5; }
.wish.is-over { box-shadow: inset 0 3px 0 var(--a); }
.wish__grip { display: grid; place-items: center; width: 44px; height: 56px; border: 0; background: none; color: var(--muted); cursor: grab; touch-action: none; font-size: 1.2rem; }
.wish__pos { font-family: var(--font-display); font-weight: 800; color: var(--a); margin-right: 8px; }
.wish__titel { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.25; overflow-wrap: anywhere; }
.wish__sub { color: var(--muted); font-size: .92rem; }
.wish__actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wish__actions button { min-width: 44px; min-height: 44px; padding: 6px 12px; border: 0; border-radius: 10px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; cursor: pointer; }
.wish__actions .is-play { background: var(--a); color: var(--a-ink); box-shadow: none; }
.wish__actions .is-hide { color: #ff9a9a; }
.live__empty { margin-top: 28px; color: var(--muted); }
.live__qr { margin-top: 40px; font-size: .88rem; color: var(--muted); }
body.boerschi-live .site-footer, body.boerschi-live .pult, body.boerschi-live .site-header .nav { display: none; }
@media (max-width: 560px) { .wish { grid-template-columns: 40px 1fr; } .wish__actions { grid-column: 1 / -1; justify-content: stretch; } .wish__actions button { flex: 1; } }

/* Beat-Modus */
html.is-beat { --beat: 0; }
html.is-beat .neon { filter: brightness(calc(1 + var(--beat) * .55)); }
html.is-beat .eq span { animation: none; transform: scaleY(calc(.15 + var(--beat) * .85 * var(--r, 1))); transition: transform .08s; }
html.is-beat .logo .lg-play { filter: drop-shadow(0 0 calc(8px + var(--beat) * 30px) var(--a)); }
html.is-beat .pult__led { transform: scale(calc(1 + var(--beat) * .8)); }
@media (prefers-reduced-motion: reduce) {
	.lhero__media img, body.v-hochzeit .lhero__fx, body.v-hochzeit .lhero__fx::before, body.v-firma .lhero__fx::after { animation: none !important; }
}

/* Veranstaltungen im Pult */
.evbox { margin-top: 24px; padding: clamp(18px, 3vw, 28px); border-radius: 20px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.evbox__kicker { font-size: .82rem; font-weight: 800; color: var(--a); }
.evbox__kicker::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #3dff8f; box-shadow: 0 0 10px #3dff8f; animation: led 1.6s ease-in-out infinite; }
.evbox__title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 3.5vw, 2rem); line-height: 1.1; margin-top: 4px; }
.evbox__time { color: var(--muted); margin-top: 4px; }
.evbox__close { margin-top: 16px; }
.evbox__h { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; margin-bottom: 12px; }
.evbox__row { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; align-items: end; }
.evbox__row .field input { min-height: 50px; padding: 12px 14px; font-size: 16px; color: var(--ink); background: var(--bg); border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1.5px var(--line); color-scheme: dark; width: 100%; }
.evbox__hint { margin-top: 10px; font-size: .85rem; color: var(--muted); }
.evbox__upcoming { display: grid; gap: 6px; margin-top: 14px; }
.evbox__upcoming:empty { display: none; }
.evbox__upcoming li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--bg); }
.evbox__upcoming button, .archiv__list button { border: 0; cursor: pointer; }
.evbox__upcoming button { min-height: 40px; padding: 6px 12px; border-radius: 8px; background: var(--bg-3); color: #ff9a9a; font-weight: 700; }
@media (max-width: 640px) { .evbox__row { grid-template-columns: 1fr; } }
.archiv { margin-top: 16px; }
.archiv__list { display: grid; gap: 8px; }
.archiv__list button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 14px 18px; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.archiv__list button span { color: var(--muted); font-size: .9rem; }
.archiv__none { color: var(--muted); }
.archiv__detail .evbox__title { margin: 16px 0 12px; }
.archiv__wishes { display: grid; gap: 6px; }
.archiv__wishes li { padding: 10px 14px; border-radius: 10px; background: var(--bg-2); }
.archiv__wishes li span { display: block; color: var(--muted); font-size: .85rem; }
.archiv__wishes li.is-ausgeblendet { opacity: .55; }
.wunsch__event { margin-bottom: 18px; color: var(--muted); }
.wunsch__event strong { color: var(--ink); }
.anfrage__direct .cbtns { grid-template-columns: 1fr; }

/* CuePal-Logo */
.partner__name { background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; }
.partner__name img { display: block; width: clamp(170px, 20vw, 240px); height: auto; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--a) 35%, transparent)); }

/* Schwebende Kontakt-Buttons am rechten Bildrand */
.mbar { display: none !important; }
.fab { position: fixed; z-index: 58; right: max(12px, env(safe-area-inset-right)); top: 50%; display: grid; gap: 10px; transform: translateY(-50%); }
.fab__btn { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--ink); text-decoration: none;
	background: color-mix(in srgb, var(--bg-3) 86%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 55%, var(--line)), 0 10px 26px -8px #000, 0 0 22px -8px var(--a);
	transition: transform .18s var(--ease-out), box-shadow .25s var(--ease-out), background-color .25s;
	animation: fabIn .5s var(--ease-out) both; animation-delay: calc(1.6s + var(--i) * 70ms); -webkit-tap-highlight-color: transparent; }
.fab__btn .ico { width: 24px; height: 24px; }
.fab__btn--phone { background: var(--a); color: var(--a-ink); box-shadow: 0 10px 26px -8px #000, 0 0 30px -4px var(--a); }
.fab__btn--wa { background: #25d366; color: #04200f; box-shadow: 0 10px 26px -8px #000, 0 0 26px -6px #25d366; }
.fab__btn:active { transform: scale(.92); }
.fab__label { position: absolute; right: calc(100% + 10px); top: 50%; padding: 7px 12px; border-radius: 999px; background: var(--bg-3); color: var(--ink); font-weight: 700; font-size: .88rem; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line), 0 10px 20px -8px #000; opacity: 0; pointer-events: none; transform: translate(6px, -50%); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out); }
.fab__btn:focus-visible .fab__label { opacity: 1; transform: translate(0, -50%); }
@media (hover: hover) and (pointer: fine) {
	.fab__btn:hover { transform: scale(1.08); box-shadow: inset 0 0 0 1.5px var(--a), 0 10px 26px -8px #000, 0 0 34px -4px var(--a); }
	.fab__btn:hover .fab__label { opacity: 1; transform: translate(0, -50%); }
}
@keyframes fabIn { from { opacity: 0; transform: translateX(24px) scale(.8); } }
@media (max-width: 760px) {
	.fab { gap: 8px; right: max(8px, env(safe-area-inset-right)); }
	.fab__btn { width: 46px; height: 46px; }
	.fab__btn .ico { width: 21px; height: 21px; }
	.pult { bottom: max(14px, env(safe-area-inset-bottom)); }
	.site-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}
body.boerschi-live .fab { display: none; }
@media print { .fab { display: none !important; } }
.fab__list { display: grid; gap: 10px; }
.fab__toggle { display: none; }
@media (max-width: 760px) {
	.fab { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; right: max(12px, env(safe-area-inset-right)); }
	.fab__toggle { display: grid; width: 56px; height: 56px; background: var(--a); color: var(--a-ink); box-shadow: 0 10px 26px -8px #000, 0 0 30px -4px var(--a); order: 2; }
	.fab__toggle .ico { width: 26px; height: 26px; transition: transform .25s var(--ease-out); }
	.fab.is-open .fab__toggle { transform: scale(.9); box-shadow: inset 0 0 0 3px var(--a-ink), 0 0 30px -4px var(--a); }
	.fab__list { order: 1; justify-items: center; }
	.fab__list .fab__btn { width: 48px; height: 48px; animation: none; opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); transition-delay: calc((4 - var(--i)) * 30ms); }
	.fab.is-open .fab__list .fab__btn { opacity: 1; transform: none; pointer-events: auto; }
	.fab.is-open .fab__label { opacity: 1; transform: translate(0, -50%); }
	.fab__list .fab__btn--phone { display: grid; }
	.pult { right: auto; left: max(14px, env(safe-area-inset-left)); align-items: flex-start; }
	.pult__panel { transform-origin: bottom left; }
}
.stimmen__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .stimmen__list { grid-template-columns: 1fr; } }

/* Untermenü Anlässe */
.nav__has-sub { position: relative; display: flex; align-items: center; gap: 2px; }
.nav__sub-toggle { display: grid; place-items: center; width: 28px; height: 36px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; }
.nav__sub-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.nav__has-sub.is-open .nav__sub-toggle svg { transform: rotate(180deg); }
.nav__sub { position: absolute; top: calc(100% + 10px); left: -16px; min-width: 250px; padding: 8px; border-radius: 16px; background: color-mix(in srgb, var(--bg-3) 96%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -16px #000;
	opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s .18s; }
.nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__has-sub.is-open .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
	.nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.nav__has-sub:hover .nav__sub-toggle svg { transform: rotate(180deg); }
}
.nav__sub a { display: block; padding: 11px 14px !important; border-radius: 10px; color: var(--ink) !important; font-weight: 600; white-space: nowrap; }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { background: color-mix(in srgb, var(--a) 16%, transparent); color: var(--ink) !important; }
.nav__sub li:first-child { margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.nav__sub li:first-child a { color: var(--muted) !important; font-size: .9rem; }
@media (max-width: 900px) {
	.nav__has-sub { flex-wrap: wrap; border-bottom: 1px solid var(--line); }
	.nav__has-sub > a { flex: 1; border-bottom: 0 !important; }
	.nav__sub-toggle { width: 48px; height: 48px; }
	.nav__sub-toggle svg { width: 22px; height: 22px; }
	.nav__sub { position: static; flex-basis: 100%; min-width: 0; padding: 0 0 10px 12px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; transform: none; opacity: 1; visibility: visible; display: none; }
	.nav__has-sub.is-open .nav__sub { display: block; }
	.nav__sub a { padding: 10px 12px !important; font-size: 1.02rem; border-bottom: 0 !important; }
}
.facts__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: clamp(32px, 5vw, 56px) 0 0; border-radius: calc(var(--radius) + 6px); overflow: hidden; background: var(--line); box-shadow: inset 0 0 0 1px var(--line); }
.facts__list > div { padding: 22px 24px; background: var(--bg-2); }
.facts__list dt { font-size: .85rem; font-weight: 700; color: var(--a); margin-bottom: 4px; }
.facts__list dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
@media (max-width: 900px) { .facts__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .facts__list { grid-template-columns: 1fr; } }

/* =========================================================
   Layout-Feinschliff nach Geräte-Check
   ========================================================= */
:where(img) { height: auto; }
:root { --section: clamp(64px, 9vw, 128px); }
.wrap--text { max-width: var(--wrap); }
.wrap--text > * { max-width: 860px; }
.subpage .wrap--text > * { max-width: 760px; }
.prose, .subpage__title, .prose h2, .prose h3 { overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.lhero + .section { padding-top: clamp(48px, 6vw, 88px); }
.anlass__more { padding-block: 8px; }
.datecheck__input { min-height: 50px; }
.live__login input[type=checkbox] { width: 22px; height: 22px; vertical-align: middle; margin-right: 8px; accent-color: var(--a); }
.live__login p > a { display: inline-block; padding-block: 10px; }
.cbtns--big { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.gbadge .ico { stroke: none; }
.social .ico path[fill] { stroke: none; }
.djcard__grid { grid-template-columns: minmax(0, .55fr) minmax(0, 1fr); }
.djcard__photo img { max-height: 620px; }

/* Anlässe: zweispaltig schon ab Tablet */
@media (min-width: 701px) and (max-width: 860px) {
	.anlaesse__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.anlaesse__stage { display: block; }
	.anlass__img-m { display: none; }
	.anlass__name { color: color-mix(in srgb, var(--ink) 45%, transparent); font-size: clamp(1.4rem, 3.4vw, 2rem); }
	.anlass__text { padding-left: calc(20px + 1.6ch); }
	.anlass__btn { cursor: pointer; }
}
@media (max-width: 860px) {
	.story__photo, .djcard__photo { max-width: 460px; }
}
@media (max-width: 760px) {
	.hero__scroll { display: none; }
	.djcard__photo img { max-height: none; }
}
/* Kontakt-Buttons: auf Tablets einklappen, damit sie nichts überdecken */
@media (min-width: 761px) and (max-width: 1100px) {
	.fab { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
	.fab__toggle { display: grid; width: 56px; height: 56px; background: var(--a); color: var(--a-ink); box-shadow: 0 10px 26px -8px #000, 0 0 30px -4px var(--a); order: 2; }
	.fab__toggle .ico { width: 26px; height: 26px; }
	.fab.is-open .fab__toggle { transform: scale(.9); }
	.fab__list { order: 1; justify-items: center; }
	.fab__list .fab__btn { width: 48px; height: 48px; animation: none; opacity: 0; transform: translateY(16px) scale(.8); pointer-events: none; transition: opacity .2s var(--ease-out), transform .25s var(--ease-out); transition-delay: calc((4 - var(--i)) * 30ms); }
	.fab.is-open .fab__list .fab__btn { opacity: 1; transform: none; pointer-events: auto; }
	.fab.is-open .fab__label { opacity: 1; transform: translate(0, -50%); }
	.pult { right: auto; left: max(14px, env(safe-area-inset-left)); align-items: flex-start; }
	.pult__panel { transform-origin: bottom left; }
}
.cbtns--big { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---------- Vorab-Fragebogen ---------- */
.fb { min-height: 100svh; padding: 130px 0 90px; background: radial-gradient(70% 40% at 50% 0%, color-mix(in srgb, var(--a) 20%, transparent), transparent 70%); }
.fb__in { max-width: 820px; }
.fb__kicker, .fbteaser__kicker { font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--a); margin-bottom: 12px; }
.fb__title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 7.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.03em; margin-bottom: 18px; overflow-wrap: break-word; hyphens: manual; }
.fb .lead { max-width: 640px; }
.fb__note { margin-top: 14px; font-size: .9rem; color: var(--muted); }
.fb .form__msg { margin-top: 22px; }
.fb__form { margin-top: 34px; display: grid; gap: 22px; }
.fb__progress { display: none; height: 6px; border-radius: 99px; background: var(--bg-3); overflow: hidden; }
.fb__progress span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--a2), var(--a)); box-shadow: 0 0 16px var(--a); transition: width .5s var(--ease-out); }
.fb__stepinfo { display: none; font-size: .85rem; color: var(--muted); margin-top: -12px; }
.fb__form.is-stepped .fb__progress, .fb__form.is-stepped .fb__stepinfo { display: block; }
.fb__step { padding: clamp(20px, 3.4vw, 38px); border-radius: calc(var(--radius) + 6px); background: color-mix(in srgb, var(--bg-2) 88%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 40px 100px -50px #000; display: grid; gap: 22px; }
.fb__step[hidden] { display: none; }
.fb__h { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 3vw, 1.7rem); letter-spacing: -.02em; display: flex; gap: 12px; align-items: baseline; outline: none; }
.fb__h span { font-family: var(--font-body); font-size: .85rem; font-weight: 800; color: var(--a); letter-spacing: .04em; }
.fb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.fb__grid > .fb__group, .fb__grid > .fb__field--wide { grid-column: 1 / -1; }
.fb__help { font-size: .84rem; color: var(--muted); margin-top: -3px; }
.fb__req { color: var(--a); }
.fb__group { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 9px; }
.fb__group legend { padding: 0; margin-bottom: 9px; font-size: .92rem; font-weight: 650; color: color-mix(in srgb, var(--ink) 88%, transparent); }
.fb__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 99px; font-size: .93rem; font-weight: 600; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s, background-color .2s, color .2s, transform .15s var(--ease-out); }
.chip:active span { transform: scale(.97); }
.chip input:checked + span { background: color-mix(in srgb, var(--a) 18%, var(--bg)); box-shadow: inset 0 0 0 1.5px var(--a), 0 0 18px -6px var(--a); color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--a); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chip:hover span { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--a) 60%, var(--line)); } }
.fb__consent { display: flex; gap: 12px; align-items: flex-start; font-size: .9rem; line-height: 1.5; color: var(--muted); cursor: pointer; }
.fb__consent input { width: 22px; height: 22px; flex: none; margin-top: 1px; accent-color: var(--a); }
.fb__consent input[aria-invalid="true"] { outline: 2px solid #ff5a5a; outline-offset: 2px; }
.fb__nav { display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
.fb__nav .btn:only-child, .fb__nav [data-fb-next], .fb__nav [type="submit"] { margin-left: auto; }
.fb__form:not(.is-stepped) .fb__nav [data-fb-prev], .fb__form:not(.is-stepped) .fb__nav [data-fb-next] { display: none; }
.fb__alt { margin-top: 26px; text-align: center; color: var(--muted); font-size: .92rem; }
.fb__alt a { color: var(--ink); font-weight: 700; }
.fb__done { text-align: center; max-width: 560px; margin: 0 auto; }
.fb__done .lead { margin-inline: auto; }
.fb__sig { margin: 18px 0 30px; font-weight: 700; color: var(--a); }
.fb__pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 34px; }
.fb__pickcard { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 84px; padding: 20px 22px; border-radius: 18px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--c); transition: transform .2s var(--ease-out), box-shadow .2s; }
.fb__pickcard .ico { width: 22px; height: 22px; color: var(--c); flex: none; }
@media (hover: hover) and (pointer: fine) { .fb__pickcard:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--c), inset 0 3px 0 var(--c), 0 20px 40px -24px var(--c); } }
@media (max-width: 640px) {
	.fb { padding-top: 110px; }
	.fb__grid { grid-template-columns: 1fr; }
	.fb__nav .btn { flex: 1 1 auto; }
	.fb__nav [type="submit"] { width: 100%; }
}

/* Teaser auf den Anlass-Seiten */
.fbteaser { padding-block: 0 var(--section); }
.fbteaser__card { display: grid; grid-template-columns: 1fr auto; gap: 28px 40px; align-items: center; padding: clamp(26px, 4vw, 48px); border-radius: 24px; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%), var(--bg-2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 40%, var(--line)), 0 40px 100px -50px var(--a); }
.fbteaser__card .h2 { margin-bottom: 12px; }
@media (max-width: 860px) { .fbteaser__card { grid-template-columns: 1fr; } .fbteaser__card .btn { justify-self: start; } }
@media (max-width: 560px) { .fbteaser__card .btn { width: 100%; justify-content: center; } }

/* Pult: Navigation und Fragebögen */
.pultnav { display: flex; gap: 6px; margin-top: 18px; padding: 5px; border-radius: 99px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); width: max-content; max-width: 100%; }
.pultnav a { padding: 9px 18px; border-radius: 99px; text-decoration: none; font-weight: 700; font-size: .93rem; color: var(--muted); }
.pultnav a[aria-current="page"] { background: var(--a); color: var(--a-ink); }
.fbl__list, .fbin__list { display: grid; gap: 10px; margin-top: 18px; }
.fbl__item, .fbin__item { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; justify-content: space-between; padding: 16px 18px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--c); }
.fbl__info, .fbin__main { display: grid; gap: 3px; min-width: 0; }
.fbl__info span { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.fbl__actions, .fbin__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fbl__actions .ico { width: 16px; height: 16px; }
.fbin { margin-top: 28px; }
.fbin__tag { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--c); }
.fbin__main span { color: var(--muted); font-size: .92rem; }
.fbin__main small { color: var(--muted); font-size: .8rem; }
.fbin__del { background: none; border: 0; color: #ff8a8a; font-weight: 700; cursor: pointer; padding: 8px 6px; font-size: .9rem; }
.fbl .evbox__row .field { flex: 1 1 220px; }
.fbl .evbox__row { grid-template-columns: 1fr 1fr; } @media (max-width: 640px) { .fbl .evbox__row { grid-template-columns: 1fr; } }

/* ---------- DJ-Bereich: Anfragen und Kalender ---------- */
.anf .live__meta { flex-wrap: wrap; gap: 8px; }
.anf section { margin-top: 28px; }
.anf__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.achip { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 99px; border: 0; cursor: pointer; font-weight: 700; font-size: .88rem; color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.achip b { color: var(--a); }
.achip.is-on { box-shadow: inset 0 0 0 1.5px var(--a); }
.achip.st-neu b { color: #ff5a8a; }
.abo__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.abo__url { margin-top: 12px; font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.abo__help { margin-top: 10px; font-size: .9rem; color: var(--muted); }
.abo__help summary { cursor: pointer; font-weight: 700; color: var(--ink); }
.abo__help p { margin-top: 8px; }
.abo__warn { margin-top: 12px; font-size: .82rem; color: var(--muted); }
.abo__renew { background: none; border: 0; padding: 0; color: var(--a); font-weight: 700; cursor: pointer; text-decoration: underline; }

.cal__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cal__nav { display: flex; gap: 6px; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 14px; }
.cal__wd { font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 4px 6px; }
.cal__day { min-height: 112px; padding: 6px; border-radius: 10px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal__day.is-out { opacity: .4; }
.cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--a); }
.cal__num { align-self: flex-start; background: none; border: 0; color: var(--muted); font-weight: 700; font-size: .85rem; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
.cal__day.is-today .cal__num { background: var(--a); color: var(--a-ink); }
@media (hover: hover) and (pointer: fine) { .cal__num:hover { color: var(--ink); background: var(--bg-3); } }
.cal__ev { display: grid; gap: 3px; min-width: 0; }
.cal__more { font-size: .72rem; color: var(--muted); padding-left: 4px; }
.cal__dots { display: none; }
.cpill { display: flex; align-items: center; gap: 5px; width: 100%; min-width: 0; padding: 4px 6px; border: 0; border-radius: 6px; cursor: pointer; text-align: left; font-size: .74rem; line-height: 1.25; color: var(--ink); background: color-mix(in srgb, var(--c) 22%, var(--bg)); box-shadow: inset 3px 0 0 var(--c); }
.cpill--termin { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 70%, transparent); border-radius: 6px; }
.cpill__t { font-weight: 800; flex: none; }
.cpill__n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; }
.cpill__s { flex: none; font-size: .66rem; font-weight: 700; color: var(--muted); }
.cpill.st-gebucht .cpill__s { color: #7dffa8; }
.cpill.st-neu .cpill__s { color: #ff8ab0; }
.cal__agenda { display: none; margin-top: 12px; gap: 6px; }
.cal__agenda li { display: grid; grid-template-columns: 86px 1fr; gap: 8px; align-items: center; }
.cal__ad { font-size: .8rem; color: var(--muted); font-weight: 700; }
.cal__none { color: var(--muted); font-size: .9rem; grid-template-columns: 1fr !important; }
.cal__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 14px; font-size: .8rem; color: var(--muted); }
.cal__legend li { display: inline-flex; align-items: center; gap: 6px; }
.cal__legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.cal__legend i.is-t { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
@media (max-width: 760px) {
	.cal { gap: 2px; }
	.cal__day { min-height: 52px; padding: 3px; align-items: center; }
	.cal__wd { text-align: center; padding: 4px 0; font-size: .68rem; }
	.cal__num { align-self: center; padding: 3px 7px; }
	.cal__ev { display: none; }
	.cal__dots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
	.cal__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
	.cal__dots i.is-t { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }
	.cal__agenda { display: grid; }
}

.alist { display: grid; gap: 8px; margin-top: 14px; }
.acard { display: flex; align-items: stretch; gap: 0; border-radius: 14px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line), inset 4px 0 0 var(--c); overflow: hidden; }
.acard__main { flex: 1 1 auto; min-width: 0; display: grid; gap: 3px; padding: 14px 16px 14px 20px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
@media (hover: hover) and (pointer: fine) { .acard__main:hover { background: var(--bg-3); } }
.acard__date { font-size: .8rem; font-weight: 800; color: var(--c); letter-spacing: .02em; }
.acard__date.is-past { color: var(--muted); }
.acard__meta { font-size: .9rem; color: var(--muted); }
.acard__sub { font-size: .8rem; color: var(--muted); }
.acard__new { color: #ff5a8a; }
.acard__warn { color: #ffb020; }
.acard__st { flex: none; display: flex; align-items: center; padding: 10px 12px; border-left: 1px solid var(--line); }
.acard__st select { min-height: 40px; max-width: 190px; padding: 8px 30px 8px 12px; border: 0; border-radius: 10px; color: var(--ink); background: var(--bg) linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 16px) 18px / 5px 5px no-repeat, var(--bg) linear-gradient(135deg, var(--muted) 50%, transparent 50%) calc(100% - 11px) 18px / 5px 5px no-repeat; appearance: none; box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: .85rem; font-weight: 700; }
.acard.st-gebucht .acard__st select { box-shadow: inset 0 0 0 1.5px #3ddc84; }
.acard.st-neu .acard__st select { box-shadow: inset 0 0 0 1.5px #ff5a8a; }
.acard.st-abgesagt { opacity: .6; }
@media (max-width: 640px) { .acard { flex-direction: column; } .acard__st { border-left: 0; border-top: 1px solid var(--line); padding: 10px 16px 12px 20px; } .acard__st select { max-width: none; width: 100%; } }
.anf__past { margin-top: 28px; }
.anf__past summary { cursor: pointer; font-weight: 800; color: var(--muted); }

.adlg { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; color: var(--ink); background: var(--bg-2); box-shadow: 0 0 0 1px var(--line), 0 40px 120px -20px #000; }
.adlg::backdrop { background: rgba(4, 3, 10, .72); backdrop-filter: blur(4px); }
.adlg__in { display: grid; gap: 16px; padding: clamp(18px, 3vw, 30px); }
.adlg__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; position: sticky; top: calc(-1 * clamp(18px, 3vw, 30px)); background: var(--bg-2); padding-block: 4px; z-index: 1; }
.adlg__x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bg-3); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.adlg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adlg__contact, .adlg__fbbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.adlg__contact:empty { display: none; }
.adlg__conflict { padding: 10px 14px; border-radius: 10px; background: rgba(255, 176, 32, .12); box-shadow: inset 0 0 0 1px #ffb020; color: #ffe2a8; font-size: .9rem; font-weight: 600; }
.adlg__msg p:last-child { white-space: pre-line; color: var(--muted); font-size: .95rem; }
.adlg__label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.adlg__block { padding: 14px 16px; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.adlg__block .btn { margin-top: 4px; }
.adlg__ok { color: #7dffa8; font-weight: 700; margin-bottom: 8px; }
.adlg__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.adlg__foot > div { display: flex; gap: 8px; margin-left: auto; }
.tlist { display: grid; gap: 6px; margin-bottom: 10px; }
.tlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .92rem; }
.tlist li.is-past { opacity: .55; }
.tlist__none { color: var(--muted); }
.tadd { display: grid; grid-template-columns: auto auto auto 1fr auto; gap: 8px; }
.tadd input, .tadd select { min-height: 42px; padding: 8px 10px; border: 0; border-radius: 10px; color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: inherit; font-size: 16px; color-scheme: dark; min-width: 0; }
@media (max-width: 700px) { .adlg__grid { grid-template-columns: 1fr; } .tadd { grid-template-columns: 1fr 1fr; } .tadd [data-t-notiz], .tadd .btn { grid-column: 1 / -1; } }
.cal__ev .cpill--termin .cpill__s { display: none; }
.acard__st select { max-width: 240px; }
@media (max-width: 480px) { .pultnav { gap: 2px; } .pultnav a { padding: 9px 12px; font-size: .88rem; } }
.preis__note { margin-top: 10px; font-size: .82rem; color: var(--muted); }
/* Lichtpult im Hero, wandert beim Scrollen in die Ecke */
.hero__pultslot { height: 48px; margin-top: 22px; }
html:not(.js) .hero__pultslot { display: none; }
.pult.is-docked { position: absolute; right: auto; bottom: auto; flex-direction: column; align-items: flex-start; }
.pult.is-docked .pult__panel { position: absolute; left: 0; top: calc(100% + 10px); transform-origin: top left; }
.pult.is-docked.opens-up .pult__panel { top: auto; bottom: calc(100% + 10px); transform-origin: bottom left; }
@media (max-width: 560px) { .hero__pultslot { height: 44px; } }
/* Lichtpult-Button pulsiert leicht, bis er einmal geöffnet wurde */
.pult__toggle { position: relative; }
.pult__toggle::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px var(--a), 0 0 22px 2px var(--a); opacity: 0; pointer-events: none; animation: pultPulse 2.6s cubic-bezier(.23, 1, .32, 1) infinite; }
@keyframes pultPulse { 0% { opacity: .55; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
.pult.was-opened .pult__toggle::after, .pult__toggle[aria-expanded="true"]::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pult__toggle::after { animation: none; } }
.stimmen__intro { flex: 1 1 420px; } .stimmen__intro .lead { margin-top: 16px; max-width: 560px; }

/* Danke-Pop-up nach dem Absenden des Anfrageformulars */
.okpop { width: min(440px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: calc(var(--radius) + 6px); background: var(--bg-2); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a) 45%, transparent), 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px color-mix(in srgb, var(--a) 22%, transparent); }
.okpop::backdrop { background: rgba(7, 6, 13, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.okpop__in { padding: 32px 28px 26px; text-align: center; }
.okpop__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--a) 16%, var(--bg-3)); box-shadow: inset 0 0 0 1.5px var(--a); color: var(--a); }
.okpop__icon svg { width: 30px; height: 30px; }
.okpop__title { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; line-height: 1.15; margin: 0 0 12px; }
.okpop__text { color: var(--muted); line-height: 1.55; margin: 0 0 22px; }
.okpop__btn { appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 13px 26px; border-radius: 999px; background: var(--a); color: var(--a-ink); min-width: 160px; transition: transform .16s var(--ease-out); }
.okpop__btn:active { transform: scale(.97); }
.okpop__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.okpop[open] { animation: okpop-in .32s var(--ease-out); }
.okpop[open]::backdrop { animation: okpop-fade .32s ease-out; }
@keyframes okpop-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes okpop-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .okpop[open], .okpop[open]::backdrop { animation: none; } }

/* Fragebögen-Seite: drei Felder (Name, Datum, E-Mail) */
.fbl .evbox__row { grid-template-columns: 1fr .8fr 1.3fr; }
.fbl [data-fbl-msg] { margin: 14px 0 0; }
@media (max-width: 640px) { .fbl .evbox__row { grid-template-columns: 1fr; } }

/* H1-Suchbegriff als Zeile ueber dem Slogan (02.11.2026) */
.h1-kicker { display: block; font-family: var(--font-body); font-size: clamp(.8rem, 1.5vw, 1rem); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; line-height: 1.35; color: var(--a); margin-bottom: .9rem; text-shadow: none; max-width: 40ch; }
.hero__title > .h1-kicker { animation: heroUp .6s var(--ease-out) both; }