/* ==========================================================
   3D Schwarzlicht-Minigolf Graz/Gössendorf
   Leitidee: Der Seitenhintergrund übernimmt die Farbe der
   Welt, in der man gerade ist. Schwarz als Grund, Neon darauf.
   Regel: Effekte schmücken. Preise, Zeiten und Adresse
   funktionieren ohne JavaScript und ohne Bewegung.
   ========================================================== */

:root{
	--grund:#05010e;
	--grund-hell:#0d0620;
	--schrift:#f2ecff;
	--gedaempft:#a99fc4;

	/* Neon je Welt */
	--weltall:#7b3cff;
	--clown:#ff2d95;
	--maerchen:#e040fb;
	--wasser:#00e5d0;
	--jumper:#2bd9ff;
	--maze:#ff2b2b;

	--akzent:var(--wasser);
	--sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	--display:"Trebuchet MS","Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
}

body{
	margin:0;
	background:var(--grund);
	color:var(--schrift);
	font-family:var(--sans);
	font-size:clamp(1rem,.94rem + .3vw,1.14rem);
	line-height:1.7;
	overflow-x:hidden;
	/* der Farbwechsel der Welten läuft über diese Fläche */
	transition:background-color 1.1s ease;
}

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

a{color:var(--akzent)}

.weg{
	position:absolute;left:-9999px;
	background:var(--schrift);color:var(--grund);padding:.6rem 1rem;
}
.weg:focus{left:.5rem;top:.5rem;z-index:100}

/* ---------- Sprungleiste ---------- */

.leiste{
	position:sticky;top:0;z-index:50;
	display:flex;align-items:center;gap:1rem;
	padding:.55rem clamp(.8rem,3vw,1.6rem);
	background:rgba(5,1,14,.82);
	backdrop-filter:blur(9px);
	border-bottom:1px solid rgba(255,255,255,.09);
}

.leiste__marke{
	font-family:var(--display);
	font-weight:700;
	font-size:.95rem;
	letter-spacing:.02em;
	color:var(--schrift);
	text-decoration:none;
	white-space:nowrap;
}
.leiste__marke b{color:var(--akzent);font-weight:700}

.leiste__punkte{
	display:flex;gap:.2rem;flex:1;
	list-style:none;margin:0;padding:0;
	overflow-x:auto;
	scrollbar-width:none;
}
.leiste__punkte::-webkit-scrollbar{display:none}

.leiste__punkte a{
	display:block;padding:.35rem .6rem;
	font-size:.85rem;color:var(--gedaempft);
	text-decoration:none;white-space:nowrap;
	border-radius:.4rem;
}
.leiste__punkte a:hover,.leiste__punkte a:focus-visible{
	color:var(--schrift);background:rgba(255,255,255,.08);
}

.leiste__knopf{
	padding:.4rem .9rem;
	font-size:.85rem;font-weight:700;
	color:var(--grund);background:var(--akzent);
	border-radius:2rem;text-decoration:none;white-space:nowrap;
}

@media (max-width:52rem){
	.leiste__knopf{display:none}
}

/* ---------- Knöpfe ---------- */

.knopf{
	display:inline-block;
	padding:.72rem 1.4rem;
	font-size:.95rem;font-weight:600;
	color:var(--schrift);
	border:1px solid rgba(255,255,255,.34);
	border-radius:2rem;
	text-decoration:none;
	transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.knopf:hover,.knopf:focus-visible{
	background:rgba(255,255,255,.14);
	border-color:var(--schrift);
}

.knopf--stark{
	color:#05010e;
	background:var(--akzent);
	border-color:var(--akzent);
	box-shadow:0 0 22px -4px var(--akzent);
}
.knopf--stark:hover,.knopf--stark:focus-visible{
	background:#fff;border-color:#fff;color:#05010e;
}

/* ---------- Einstieg ---------- */

.einstieg{
	position:relative;
	min-height:min(94vh,54rem);
	display:grid;
	align-items:end;
	padding:clamp(2rem,7vw,5rem) clamp(1.1rem,4vw,3rem) clamp(3rem,8vw,5rem);
	overflow:hidden;
}

/* --- Das Logo im Kopf: rechts oben, wie eine Leuchtreklame ---
   ⚠ Im Logo ist „3D SCHWARZLICHT" schwarze Schrift auf durchsichtigem Grund –
   auf dunklem Hintergrund verschwände sie. Die gestaffelten drop-shadows
   legen eine helle Aura um die Kontur; sie sind zugleich das Leuchtmittel,
   dessen Stärke im Flackern schwankt. */

.einstieg__logo{
	position:absolute;
	z-index:2;
	top:clamp(1rem,3vw,2.2rem);
	right:clamp(1.1rem,4vw,3rem);
	/* ⚠ Stetig über alle Breiten – keine Media Query.
	   Zuvor hielt clamp() unten bei 5,5 rem fest, während eine Media Query bei
	   34 rem schlagartig auf ein Drittel umschaltete: Beim Schmälerziehen wurde
	   das Logo erst immer kleiner und sprang dann plötzlich groß
	   (Nutzer, 13.08.2026). Der feste Sockel von 8 rem plus 4vw wächst langsamer
	   als die Seite schrumpft – dadurch nimmt das Logo auf schmalen Schirmen
	   anteilig mehr Platz ein, ohne Sprung. Die Drittelgrenze fängt es ab. */
	width:clamp(6rem,8rem + 4vw,10rem);
	max-width:33%;
	height:auto;
	filter:
		drop-shadow(0 0 1px rgba(255,255,255,.95))
		drop-shadow(0 0 4px rgba(255,255,255,.7))
		drop-shadow(0 0 14px rgba(143,220,255,.45));
}

body:not(.kein-js) .einstieg__logo{
	animation:reklame 9s linear infinite;
}

/* Angedeutet, nicht nervös: das Licht steht fast immer, nur hin und wieder
   ein kurzes Zucken – wie eine Leuchtreklame mit müder Röhre. */
@keyframes reklame{
	0%,   6%   {opacity:1}
	6.6%       {opacity:.62}
	7.2%       {opacity:1}
	38%        {opacity:1}
	38.5%      {opacity:.5}
	39%        {opacity:1}
	39.6%      {opacity:.72}
	40.2%      {opacity:1}
	72%        {opacity:1}
	72.4%      {opacity:.55}
	73%        {opacity:1}
	100%       {opacity:1}
}

@media (max-width:34rem){
	.einstieg__logo{top:.7rem;right:.9rem}   /* nur die Ränder, Größe bleibt stetig */
}

.einstieg__bild{position:absolute;inset:0;z-index:0}
.einstieg__bild img{width:100%;height:100%;object-fit:cover;opacity:.5}
.einstieg::after{
	content:"";position:absolute;inset:0;z-index:1;
	background:
		radial-gradient(120% 80% at 70% 30%,transparent 0%,rgba(5,1,14,.72) 70%),
		linear-gradient(180deg,rgba(5,1,14,.85) 0%,rgba(5,1,14,.35) 40%,rgba(5,1,14,.96) 100%);
}

.einstieg__text{position:relative;z-index:2;max-width:34rem}

.einstieg__ort{
	margin:0 0 .8rem;
	font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;
	color:var(--wasser);
}

.einstieg h1{
	margin:0 0 1.1rem;
	font-family:var(--display);
	font-size:clamp(2.5rem,1.2rem + 6vw,5.2rem);
	line-height:1.02;
	letter-spacing:-.02em;
	text-transform:uppercase;
}

/* Der Schriftzug als Neonröhre */
.roehre{
	color:#fff;
	text-shadow:
		0 0 .06em #fff,
		0 0 .2em var(--wasser),
		0 0 .5em var(--wasser),
		0 0 1.1em rgba(0,229,208,.7);
}

.einstieg__drei{
	margin:0 0 1.1rem;
	font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
	color:var(--gedaempft);
}

.einstieg__unter{
	margin:0 0 1.8rem;
	font-size:1.06em;
	color:var(--schrift);
	max-width:34ch;
}

.einstieg__knoepfe{display:flex;flex-wrap:wrap;gap:.7rem;margin:0}

.einstieg__runter{
	position:absolute;left:50%;bottom:1rem;z-index:2;
	transform:translateX(-50%);
	margin:0;
	font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
	color:var(--gedaempft);
}

/* ---------- Fakten ---------- */

.fakten{
	padding:clamp(2.6rem,7vw,4.5rem) clamp(1.1rem,4vw,3rem);
	max-width:64rem;margin-inline:auto;
	text-align:center;
}

.fakten__reihe{
	display:flex;flex-wrap:wrap;justify-content:center;
	gap:clamp(1.6rem,6vw,4.5rem);
	list-style:none;margin:0 0 1.8rem;padding:0;
}

.fakten__reihe b{
	display:block;
	font-family:var(--display);
	font-size:clamp(2.6rem,1.4rem + 4vw,4.4rem);
	line-height:1;
	color:#fff;
	text-shadow:0 0 .3em var(--wasser),0 0 .8em rgba(0,229,208,.55);
}

.fakten__reihe span{
	display:block;margin-top:.35rem;
	font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
	color:var(--gedaempft);
}

.fakten__text{margin:0 auto;max-width:44ch;color:var(--gedaempft)}
.fakten__text strong{color:var(--schrift)}

/* ---------- Überschrift zwischen den Bereichen ---------- */

.ueberschrift{
	margin:clamp(1rem,4vw,2.5rem) auto clamp(.5rem,2vw,1rem);
	padding-inline:clamp(1.1rem,4vw,3rem);
	max-width:64rem;
	font-family:var(--display);
	font-size:clamp(1.5rem,1.1rem + 1.8vw,2.4rem);
	text-transform:uppercase;
	letter-spacing:.02em;
}

/* ---------- Die vier Welten ---------- */

.welt{
	position:relative;
	padding:clamp(2.4rem,7vw,5rem) clamp(1.1rem,4vw,3rem);
}

.welt__innen{
	max-width:70rem;margin-inline:auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
	gap:clamp(1.6rem,4vw,3rem);
	align-items:center;
}

.welt__nr{
	margin:0 0 .5rem;
	font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
	color:var(--farbe);
}

.welt h3{
	margin:0 0 .9rem;
	font-family:var(--display);
	font-size:clamp(2rem,1.2rem + 3vw,3.4rem);
	line-height:1.04;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0 0 .28em var(--farbe),0 0 .9em var(--farbe);
}

.welt__text p:last-child{margin:0;color:var(--schrift);max-width:42ch}

.welt__bilder{display:grid;gap:.8rem}
.welt__bilder figure{margin:0;overflow:hidden;border-radius:.7rem}
.welt__bilder figure:first-child{grid-column:1/-1}

.welt__bilder img{
	width:100%;
	transition:transform 1.1s ease;
}
.welt__bilder figure:hover img{transform:scale(1.04)}

@media (min-width:34rem){
	.welt__bilder{grid-template-columns:1fr 1fr}
}

/* ★ Die Farbfläche gehört zur Sektion, nicht zum Body.
   Zuerst färbte der Scroll-Beobachter den Seitengrund um – dadurch lag der
   farbige Block je nach Scrollstand versetzt unter dem Abschnitt statt
   dahinter (Nutzer, 13.08.2026: „die farblichen Blöcke sind bei Märchenwelt
   und Weltall zu niedrig"). Jetzt trägt jede Welt ihre Fläche selbst, oben
   und unten weich auslaufend – damit deckt sie sich immer genau mit dem
   Abschnitt, unabhängig vom Scrollen. */
.welt{
	background-image:linear-gradient(180deg,
		transparent 0%,
		var(--flaeche) 16%,
		var(--flaeche) 84%,
		transparent 100%);
}

.welt--weltall {--farbe:var(--weltall); --flaeche:#0d0733}
.welt--clown   {--farbe:var(--clown);   --flaeche:#230722}
.welt--maerchen{--farbe:var(--maerchen);--flaeche:#1b062e}
.welt--wasser  {--farbe:var(--wasser);  --flaeche:#04212c}

/* Sternenfeld im Weltall, reines CSS */
.welt--weltall::before{
	content:"";position:absolute;inset:0;z-index:-1;
	background-image:
		radial-gradient(1px 1px at 12% 22%,rgba(255,255,255,.8) 50%,transparent 50%),
		radial-gradient(1px 1px at 68% 14%,rgba(255,255,255,.65) 50%,transparent 50%),
		radial-gradient(1.6px 1.6px at 84% 62%,rgba(255,255,255,.75) 50%,transparent 50%),
		radial-gradient(1px 1px at 34% 78%,rgba(255,255,255,.55) 50%,transparent 50%),
		radial-gradient(1.4px 1.4px at 52% 46%,rgba(255,255,255,.6) 50%,transparent 50%);
	opacity:.8;
}

/* Lichtpunkte in der Clownswelt */
/* Weiche Lichtflecken statt harter Kreise – die Spots am Boden im Foto
   haben keine Kante, ein Kreis mit harter Grenze sah aus wie ein Fehler. */
.welt--clown::before{
	content:"";position:absolute;inset:-15%;z-index:-1;
	background-image:
		radial-gradient(circle at 18% 30%,rgba(255,45,149,.16),transparent 42%),
		radial-gradient(circle at 72% 22%,rgba(255,214,0,.12),transparent 38%),
		radial-gradient(circle at 58% 74%,rgba(0,229,208,.12),transparent 44%),
		radial-gradient(circle at 88% 58%,rgba(124,77,255,.14),transparent 40%);
	/* Die Spots wandern wie die Lichtpunkte am Boden im Foto */
	animation:spots 26s ease-in-out infinite alternate;
}

@keyframes spots{
	from{transform:translate3d(0,0,0) scale(1)}
	to  {transform:translate3d(3%,-2%,0) scale(1.08)}
}

/* --- Märchenwelt: Nebelschleier über dem unteren Rand ------- */

.welt--maerchen::after{
	content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:45%;
	z-index:-1;pointer-events:none;
	background:
		radial-gradient(60% 100% at 25% 100%,rgba(224,64,251,.13),transparent 70%),
		radial-gradient(50% 100% at 70% 100%,rgba(120,80,255,.11),transparent 70%);
	animation:nebel 34s ease-in-out infinite alternate;
}

@keyframes nebel{
	from{transform:translateX(-3%) scaleY(1)}
	to  {transform:translateX(4%) scaleY(1.18)}
}

/* --- Unterwasser: Kaustik, wie Licht durch Wasser ----------- */

.welt--wasser::after{
	content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
	/* ⚠ Zuerst zu hart: die Streifen lagen als sichtbares Muster über der
	   ganzen Fläche. Wasserlicht ist eine Ahnung, kein Raster – daher sehr
	   schwache Farben, weite Abstände und eine Maske, die zu den Rändern
	   ausläuft. */
	background-image:
		repeating-linear-gradient(102deg,rgba(0,229,208,.028) 0 3px,transparent 3px 52px),
		repeating-linear-gradient(-64deg,rgba(140,240,255,.022) 0 4px,transparent 4px 68px);
	background-size:340px 340px,440px 440px;
	mask-image:radial-gradient(110% 90% at 50% 40%,#000 20%,transparent 85%);
	animation:kaustik 30s linear infinite;
	opacity:.5;
}

@keyframes kaustik{
	from{background-position:0 0,0 0}
	to  {background-position:340px 210px,-440px 280px}
}

/* --- Weltall: die Sterne im Grund atmen leicht ------------- */

.welt--weltall::before{animation:sternatem 14s ease-in-out infinite alternate}

@keyframes sternatem{
	from{opacity:.55}
	to  {opacity:.95}
}

/* ---------- Light Jumper und Laser Maze ---------- */

.spiel{
	position:relative;
	padding:clamp(2.6rem,7vw,5rem) clamp(1.1rem,4vw,3rem);
	overflow:hidden;
}

.spiel__innen{
	position:relative;z-index:2;
	max-width:70rem;margin-inline:auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
	gap:clamp(1.6rem,4vw,3rem);
	align-items:center;
}

.spiel__marke{
	margin:0 0 .5rem;
	font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
	color:var(--farbe);
}

.spiel h2{
	margin:0 0 1rem;
	font-family:var(--display);
	font-size:clamp(1.9rem,1.2rem + 2.8vw,3.2rem);
	line-height:1.05;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0 0 .28em var(--farbe),0 0 .9em var(--farbe);
}

.spiel__liste{margin:1rem 0;padding-left:1.1rem}
.spiel__liste li{margin-bottom:.5rem}

.spiel__schluss{
	font-weight:700;
	color:var(--farbe);
}

.spiel__preis{
	margin:1.2rem 0 0;
	font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
	color:var(--gedaempft);
}

.spiel__bilder{display:grid;gap:.8rem}
.spiel__bilder figure{margin:0;overflow:hidden;border-radius:.7rem}

.spiel--jumper{--farbe:var(--jumper);background:#060a18}
.spiel--maze{--farbe:var(--maze);background:#140306}

.tn{padding:0 .18em;border-radius:.2em;color:#05010e}
.tn--blau{background:#2bd9ff}
.tn--rot{background:#ff5470}
.tn--gruen{background:#5cff9d}

/* Kachelfeld hinter dem Light Jumper */
/* Das Kachelfeld füllt jetzt den ganzen Abschnitt – vorher lag es als
   schmaler Streifen unten und war kaum zu sehen (Nutzer, 13.08.2026:
   „bei Light Jump sind zu wenig Karos, die im Hintergrund auftauchen"). */
.kacheln{
	position:absolute;inset:0;z-index:1;
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(2.9rem,1fr));
	grid-auto-rows:2.9rem;
	gap:.2rem;
	padding:.2rem;
	overflow:hidden;
	/* Das Raster selbst soll man kaum sehen – nur die Kacheln, die
	   gerade leuchten. Vorher stand ein sichtbares Gitter über dem Text. */
	opacity:.82;
	/* zu den Rändern hin weich auslaufen, damit das Raster keine Kante bildet */
	mask-image:radial-gradient(120% 105% at 50% 45%,#000 35%,transparent 78%);
}
.kacheln i{
	display:block;
	background:rgba(255,255,255,.009);
	border-radius:.2rem;
	transition:background-color .9s ease,box-shadow .9s ease;
}

/* Laserstrahlen */
.strahlen{position:absolute;inset:0;z-index:1;overflow:hidden}
.strahlen span{
	position:absolute;left:-20%;width:140%;height:2px;
	background:linear-gradient(90deg,transparent,rgba(255,43,43,.62),transparent);
	box-shadow:0 0 12px 2px rgba(255,43,43,.32);
	transform-origin:center;
}

/* Die Strahlen liefen quer durch die Textzeilen. Sie bleiben, aber der Text
   bekommt eine dunkle Unterlage – lesbar geht vor Effekt. */
.spiel--maze .spiel__text{
	position:relative;
	padding:clamp(1rem,2.5vw,1.6rem);
	border-radius:.8rem;
	background:radial-gradient(120% 120% at 30% 40%,rgba(10,1,3,.92),rgba(10,1,3,.72));
}
.strahlen span:nth-child(1){top:18%;transform:rotate(9deg)}
.strahlen span:nth-child(2){top:34%;transform:rotate(-6deg)}
.strahlen span:nth-child(3){top:52%;transform:rotate(4deg)}
.strahlen span:nth-child(4){top:68%;transform:rotate(-11deg)}
.strahlen span:nth-child(5){top:84%;transform:rotate(7deg)}

/* ---------- Ice-Minigolf: die kalte Ausnahme ----------
   Bewusst gegen die Neonwelt gesetzt: kein Magenta, kein Grün, sondern
   Eisblau auf tiefem Nachtblau. Der Abschnitt soll sich anfühlen wie ein
   Schritt vor die Tür. */

.ice{
	position:relative;
	overflow:hidden;
	padding:clamp(2.8rem,7vw,4.8rem) clamp(1.1rem,4vw,3rem);
	background-image:linear-gradient(180deg,
		transparent 0%,
		#071a2c 14%,
		#0b2740 50%,
		#071a2c 86%,
		transparent 100%);
	--farbe:#8fdcff;
}

.ice__innen{
	position:relative;z-index:1;
	max-width:70rem;margin-inline:auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr));
	gap:clamp(1.6rem,4vw,3rem);
	align-items:center;
}

/* Text links, Bild rechts – davor steht die Unterwasserwelt mit Bild links,
   damit bleibt der Seitenwechsel über die ganze Seite erhalten. */
.ice__text{min-width:0}

.ice__bilder{display:grid;gap:.8rem}
.ice__bilder figure{margin:0;overflow:hidden;border-radius:.7rem}
.ice__bilder img{width:100%;transition:transform 1.1s ease}
.ice__bilder figure:hover img{transform:scale(1.04)}

.ice__hinweis{
	margin:.2rem 0 0;
	font-size:.78rem;
	line-height:1.55;
	color:#8fb4cc;
}

.ice__saison{
	margin:0 0 .6rem;
	font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
	color:#8fdcff;
}

.ice h2{
	margin:0 0 1.1rem;
	font-family:var(--display);
	font-size:clamp(2rem,1.2rem + 3vw,3.4rem);
	line-height:1.04;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0 0 .25em #8fdcff,0 0 .9em rgba(143,220,255,.75);
}

.ice__satz{
	margin:0 0 1rem;
	max-width:42ch;
	font-size:1.1em;
}
.ice__satz strong{color:#cfefff}

.ice__dazu{
	margin:0 0 1.4rem;
	max-width:44ch;
	color:#9fc4dc;
}

/* Der Domainname steht als Wortmarke, nicht als Knopf – die Domain zeigt
   künftig auf diese Seite, ein Link führte im Kreis. */
.ice__marke{
	margin:0;
	font-size:.86rem;
	letter-spacing:.22em;
	text-transform:lowercase;
	color:#8fdcff;
	text-shadow:0 0 .5em rgba(143,220,255,.55);
}

.ice .feld{opacity:.95}

/* ---------- Ruhige Bereiche: Preise, Zeiten, Anfahrt ---------- */

.ruhig{padding:clamp(2.6rem,7vw,4.5rem) clamp(1.1rem,4vw,3rem)}
.ruhig__innen{max-width:46rem;margin-inline:auto}

.ruhig h2{
	margin:0 0 1.4rem;
	font-family:var(--display);
	font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);
	text-transform:uppercase;
}

table{width:100%;border-collapse:collapse}
caption{text-align:left;color:var(--gedaempft);font-size:.85rem;padding-bottom:.7rem}

.preise th,.preise td,.zeiten th,.zeiten td{
	padding:.7rem .2rem;
	border-bottom:1px solid rgba(255,255,255,.12);
	text-align:left;
	font-weight:400;
}
.preise td,.zeiten td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.preise__kopf th{
	padding-top:1.5rem;
	font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;
	color:var(--akzent);
	border-bottom-color:rgba(255,255,255,.28);
}

.zeiten tr[data-heute] th,.zeiten tr[data-heute] td{
	color:#fff;font-weight:700;
}
.zeiten tr[data-heute] th::after{
	content:" · heute";
	color:var(--akzent);font-weight:400;font-size:.8em;
}

.ruhig__dazu{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 0}

.anschrift{font-size:1.1em;line-height:1.8}

/* ---------- Nachbar und Fuß ---------- */

.nachbar{
	position:relative;
	overflow:hidden;
	padding:clamp(2.8rem,7vw,4.6rem) clamp(1.1rem,4vw,3rem);
	background:#12060a;
	border-block:1px solid rgba(255,255,255,.1);
}

/* --- Videohintergrund (Demo, siehe Kommentar im HTML) ---
   Das iframe wird auf Deckung gerechnet: 16:9 bleibt erhalten, die Fläche
   wird gefüllt, der Überstand abgeschnitten. Bedienung ist ausgeschaltet –
   der Kasten ist Hintergrund, kein Abspieler. */

.nachbar__video{
	position:absolute;inset:0;z-index:0;
	overflow:hidden;
	pointer-events:none;
}

.nachbar__video iframe{
	position:absolute;
	top:50%;left:50%;
	width:177.78vh;      /* 16/9 der Höhe */
	min-width:100%;
	height:56.25vw;      /* 9/16 der Breite */
	min-height:100%;
	transform:translate(-50%,-50%);
	border:0;
	pointer-events:none;
}

/* Ohne Abdunkelung stünde der Text auf bewegtem Bild – unlesbar. */
.nachbar__video::after{
	content:"";position:absolute;inset:0;
	/* Heller gestellt (Nutzer, 13.08.2026) – links, wo der Text steht, bleibt es
	   dicht genug zum Lesen, nach rechts gibt die Abdunkelung das Bild frei. */
	background:
		linear-gradient(90deg,rgba(12,4,7,.9) 0%,rgba(12,4,7,.62) 42%,rgba(12,4,7,.22) 100%),
		linear-gradient(180deg,rgba(12,4,7,.42),rgba(12,4,7,.3));
}

.nachbar .ruhig__innen{position:relative;z-index:1}
.nachbar__marke{
	margin:0 0 .4rem;
	font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
	color:#ff8a3d;
}
.nachbar h2{font-family:var(--display);text-transform:uppercase;margin:0 0 .9rem;color:#ff8a3d}
.nachbar .knopf{border-color:rgba(255,138,61,.6);color:#ffb37a}

.nachbar__hinweis{
	max-width:52ch;
	font-size:.88em;
	color:#c99b7e;
}

.fuss{
	padding:clamp(2.2rem,5vw,3.4rem) clamp(1.1rem,4vw,3rem) 6rem;
	color:var(--gedaempft);
	font-size:.85rem;
}
.fuss__marken{
	display:flex;
	align-items:center;
	gap:clamp(1rem,3vw,2rem);
	margin:0 0 1.6rem;
}

/* Beide Logos tragen dunkle Anteile und brauchen auf schwarzem Grund
   eine helle Aura – dasselbe Mittel wie beim Logo im Kopf. */
.fuss__logo{
	width:clamp(5rem,12vw,7.5rem);
	height:auto;
	filter:
		drop-shadow(0 0 1px rgba(255,255,255,.9))
		drop-shadow(0 0 4px rgba(255,255,255,.6))
		drop-shadow(0 0 14px rgba(143,220,255,.4));
}

/* Optischer Ausgleich: Das Ice-Logo füllt seinen Rahmen fast vollständig aus,
   das 3D-Logo hat ringsum Luft. Gleiche Breite wirkt deshalb ungleich –
   das Ice-Logo steht auf gut vier Fünfteln. */
.fuss__logo--ice{
	width:clamp(4.1rem,9.8vw,6.1rem);
	filter:
		drop-shadow(0 0 1px rgba(255,255,255,.9))
		drop-shadow(0 0 4px rgba(255,255,255,.6))
		drop-shadow(0 0 14px rgba(143,220,255,.55));
}
.fuss p{margin:0 0 .8rem}
.fuss__links{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.4rem}
.fuss__links a{color:var(--schrift)}

/* --- Wortmarken aus dem Bestand ------------------------------
   Der Light-Jumper-Schriftzug und das BattleKart-Logo hängen so auch in der
   Halle. Sie ersetzen die gesetzte Überschrift, der Text bleibt im alt-Attribut
   erhalten – für Vorlesegeräte und Suchmaschinen ändert sich nichts. */

.spiel__wortmarke{margin:0 0 1rem}

/* ★ 06.09.2026: Light Jumper und Laser Maze liegen jetzt als echte Logos mit
   Transparenz vor (vom Nutzer geliefert). `mix-blend-mode: screen` und die
   Maske sind deshalb entfernt – sie waren die Notlösung für die alten,
   hochskalierten Menü-Icons mit dunklem Grund und würden die Logofarben
   jetzt nur aufhellen. */
.spiel__wortmarke img{
	width:clamp(13rem,30vw,19rem);
	height:auto;
}

/* Laser Maze steht schmaler als Light Jumper – sein Logo ist quadratischer
   und wirkt bei gleicher Breite deutlich größer. */
.spiel--maze .spiel__wortmarke img{
	width:clamp(9rem,20vw,12.5rem);
}

.nachbar__wortmarke{margin:0 0 1.1rem}

/* ★ Seit 06.09.2026 liegt das BattleKart-Logo als echtes PNG mit
   Transparenz vor (1000 × 750, vom Nutzer geliefert; hier als WebP mit
   900 px Breite). `mix-blend-mode: screen` und die Maske sind damit weg –
   sie waren nur die Notlösung für den dunkelblauen Grund des alten,
   fünffach hochskalierten Menü-Icons. */
.nachbar__wortmarke img{
	width:clamp(11rem,24vw,15rem);
	height:auto;
}

/* Partnerlogos im Fuß */
.fuss__partner{
	display:flex;align-items:center;flex-wrap:wrap;
	gap:clamp(1.2rem,4vw,2.4rem);
	margin-top:1.2rem;
}
.fuss__partner img{
	height:1.9rem;width:auto;
	opacity:.7;
	transition:opacity .2s ease;
}
.fuss__partner a:hover img,.fuss__partner a:focus-visible img{opacity:1}

/* ---------- Fester Balken am Handy ---------- */

.balken{
	position:fixed;left:0;right:0;bottom:0;z-index:60;
	display:none;gap:.6rem;
	padding:.6rem clamp(.8rem,4vw,1.2rem);
	background:rgba(5,1,14,.94);
	backdrop-filter:blur(9px);
	border-top:1px solid rgba(255,255,255,.12);
}
.balken .knopf{flex:1;text-align:center;padding:.62rem 1rem}

@media (max-width:52rem){
	.balken{display:flex}
	.fuss{padding-bottom:7rem}
}

/* ---------- Effekte: nur mit JavaScript ---------- */

body:not(.kein-js) .auf{
	opacity:0;
	transform:translateY(1.2rem);
	transition:opacity .8s ease,transform .8s ease;
}
body:not(.kein-js) .auf.da{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
	body:not(.kein-js) .auf{opacity:1;transform:none;transition:none}
	body{transition:none}
	.welt__bilder img{transition:none}
}

/* ==========================================================
   Effektschicht – aufwendigere Animationen (13.08.2026)
   Alles hier ist Schmuck. Jeder Block ist an
   prefers-reduced-motion gebunden oder harmlos, wenn er ausfällt.
   ========================================================== */

/* --- Leuchtstaub über der ganzen Seite --------------------- */

/* ★ Jede Box hat ihr eigenes Partikelfeld.
   Vorher lag ein einziges Canvas über der ganzen Seite (position:fixed) und
   wechselte nur die Gestalt. Der Effekt lief dadurch auch über Preise,
   Öffnungszeiten und Fuß hinweg. Jetzt liegt er dort, wo er hingehört –
   genauso wie die Laserstrahlen und das Kachelfeld (Nutzer, 13.08.2026).
   ⚠ canvas ist ein ersetztes Element: `inset:0` allein streckt es nicht,
   Breite und Höhe müssen ausdrücklich gesetzt werden. */
.feld{
	position:absolute;inset:0;z-index:0;
	width:100%;
	height:100%;
	pointer-events:none;
	opacity:.55;
}

/* Sterne und Glühwürmchen dürfen kräftiger stehen als Staub oder Konfetti */
.welt--weltall .feld{opacity:.85}
.welt--maerchen .feld{opacity:.85}

/* Der Inhalt muss über dem Feld liegen */
.welt__innen{position:relative;z-index:1}

/* ⚠ Hier stand zuerst eine Sammelregel mit `position:relative` über alle
   Bereiche – die hat der Sprungleiste ihr `sticky` und dem Handy-Balken sein
   `fixed` genommen. Deshalb: position nur dort setzen, wo sie fehlt,
   sonst ausschließlich z-index. */
.leiste{z-index:50}   /* bleibt sticky */
.balken{z-index:60}   /* bleibt fixed */

/* --- Scroll-Fortschritt in der Farbe der Welt -------------- */

.fortschritt{
	position:fixed;left:0;right:0;top:0;height:2px;z-index:55;
	background:rgba(255,255,255,.07);
}
.fortschritt i{
	display:block;height:100%;width:0;
	background:var(--akzent);
	box-shadow:0 0 10px 1px var(--akzent);
	transition:background-color .8s ease,box-shadow .8s ease;
}

/* --- Der Golfball rollt mit -------------------------------- */

.ball{
	position:fixed;z-index:3;
	right:clamp(.6rem,2.2vw,2rem);
	top:0;
	width:clamp(1.7rem,3.4vw,2.6rem);
	aspect-ratio:1;
	pointer-events:none;
	filter:drop-shadow(0 0 10px rgba(255,255,255,.5));
	opacity:0;
	transition:opacity .5s ease;
}
.ball svg{width:100%;height:100%;display:block}
.ball--da{opacity:.92}

@media (max-width:52rem){
	.ball{display:none}
}

/* --- Neonschrift zündet beim Hereinscrollen ---------------- */

.zuend{display:inline-block}

/* ⚠ Ausgangswert bewusst nicht zu dunkel: Sollte die Zündung einmal nicht
   auslösen – langsames Gerät, abgebrochenes Skript, Eigenheit des
   IntersectionObserver –, muss die Überschrift trotzdem lesbar bleiben.
   Eine Überschrift darf nie von einem Effekt abhängen. */
body:not(.kein-js) .zuend{opacity:.38}

body:not(.kein-js) .zuend.brennt{
	animation:zuenden .85s steps(1,end) forwards;
}

@keyframes zuenden{
	0%   {opacity:.38}
	8%   {opacity:1}
	14%  {opacity:.3}
	22%  {opacity:1}
	28%  {opacity:.32}
	34%  {opacity:.9}
	42%  {opacity:.25}
	52%  {opacity:1}
	60%  {opacity:.5}
	100% {opacity:1}
}

/* --- Parallaxe in den Welten ------------------------------ */

.welt__bilder figure{will-change:transform}

/* --- Laser schwenken und treffen -------------------------- */

.strahlen span{animation:schwenk 9s ease-in-out infinite alternate}
.strahlen span:nth-child(1){animation-duration:11s}
.strahlen span:nth-child(2){animation-duration:8s;animation-delay:-2s}
.strahlen span:nth-child(3){animation-duration:13s;animation-delay:-5s}
.strahlen span:nth-child(4){animation-duration:9.5s;animation-delay:-1s}
.strahlen span:nth-child(5){animation-duration:12s;animation-delay:-7s}

@keyframes schwenk{
	from{transform:rotate(var(--dreh,0deg)) translateY(0)}
	to  {transform:rotate(calc(var(--dreh,0deg) * -0.55)) translateY(1.6rem)}
}

.strahlen span:nth-child(1){--dreh:9deg}
.strahlen span:nth-child(2){--dreh:-6deg}
.strahlen span:nth-child(3){--dreh:4deg}
.strahlen span:nth-child(4){--dreh:-11deg}
.strahlen span:nth-child(5){--dreh:7deg}

.strahlen.treffer::after{
	content:"";position:absolute;inset:0;
	background:radial-gradient(circle at var(--tx,50%) var(--ty,50%),rgba(255,60,60,.5),transparent 22%);
	animation:blitz .42s ease-out forwards;
}

@keyframes blitz{
	from{opacity:1}
	to  {opacity:0}
}

/* --- Bilder kippen leicht unter dem Zeiger ---------------- */

.welt__bilder figure,.spiel__bilder figure{
	transform-style:preserve-3d;
	transition:transform .3s ease;
}

/* --- Seitenwechsel: Bild und Text tauschen abschnittsweise die Seite ---
   Vier gleich gebaute Blöcke untereinander lesen sich sonst als Liste.
   Gedreht werden Clownswelt, Unterwasserwelt und Laser Maze – damit
   ergibt sich über die ganze Seite ein durchgehender Wechsel:
     Weltall  Text links · Clownswelt  Bild links ·
     Märchen  Text links · Unterwasser Bild links ·
     Jumper   Text links · Maze        Bild links
   Nur ab zwei Spalten. Einspaltig bleibt der Text immer oben – dort ist
   die Überschrift die Orientierung, nicht das Bild. */

@media (min-width:60rem){
	.welt--clown .welt__text,
	.welt--wasser .welt__text,
	.spiel--maze .spiel__text{order:2}

	/* Der Text rückt an der Naht etwas ein, damit die Spalten nicht kleben */
	.welt--clown .welt__text,
	.welt--wasser .welt__text{padding-left:clamp(1rem,3vw,2.5rem)}
	.welt--weltall .welt__text,
	.welt--maerchen .welt__text{padding-right:clamp(1rem,3vw,2.5rem)}
}

/* --- Alles aus, wenn der Besucher das so eingestellt hat --- */

@media (prefers-reduced-motion:reduce){
	.feld,.ball{display:none}
	.einstieg__logo{animation:none}
	.strahlen span,
	.welt--clown::before,
	.welt--maerchen::after,
	.welt--wasser::after,
	.welt--weltall::before{animation:none}
	body:not(.kein-js) .zuend{opacity:1;animation:none}
	.fortschritt i{transition:none}
	.welt__bilder figure,.spiel__bilder figure{transition:none}
}

/* ==========================================================
   Hinweis-Knopf: der Golfball rollt herein (10.09.2026)
   Auftrag des Nutzers: dasselbe wie auf der Eisseite, Text
   „Neu! Ice-Minigolf ab 24. Oktober!". Nur bis 23.10.2026, 23:59,
   das Ein- und Ausblenden macht index.js.

   Übersetzung in diese Seite: statt Eiskugel der leuchtende
   Golfball (dasselbe Motiv wie der Ball am rechten Rand), statt
   Milchglas ein Neonschild in Eisblau, das nach dem Aufklappen
   flackernd zündet wie die Überschriften.

   Zwei Ebenen in der Kugel: `.start__kugel` wandert nur (Glanzlicht
   bleibt, wo das Licht ist), `.start__dreh` dreht die Dellen. Den
   Drehwinkel rechnet das Skript aus der Strecke, damit er rollt.
   Die Wartezeit steht als Animationsverzögerung hier und nicht als
   Timer im Skript: Sonst stünde vor dem Start kurz der fertige
   Knopf da (auf der Eisseite so passiert).
   ========================================================== */

.start{
	--kugel:clamp(3.2rem,2.5rem + 2.2vw,4.4rem);
	--roehre:#8fdcff;
	--weg:-100vw;          /* vom Skript überschrieben */
	--drehung:-2160deg;    /* vom Skript überschrieben */
	--dauer:1.7s;
	--warten:1.4s;
	position:fixed;
	z-index:57;
	/* Am Desktop läuft ganz rechts der Scroll-Ball. Der Knopf hält
	   seine Spur frei, sonst lägen beide am Seitenende übereinander. */
	right:calc(clamp(.6rem,2.2vw,2rem) + clamp(1.7rem,3.4vw,2.6rem) + 1rem);
	bottom:clamp(1rem,4vw,2.4rem);
}
/* ⚠ Die Klasse setzt Layout – ohne diese Zeile hätte `hidden` keine Wirkung */
.start[hidden]{display:none}

.start__knopf{
	position:relative;
	display:flex;
	align-items:center;
	text-decoration:none;
}

/* --- Das Neonschild --- */
.start__text{
	position:relative;
	display:block;
	max-width:calc(100vw - var(--kugel) - 2.4rem);
	margin-right:calc(var(--kugel) * -.5);
	padding:.8rem calc(var(--kugel) * .66) .8rem 1.5rem;
	font-family:var(--display);
	font-weight:700;
	font-size:clamp(1.02rem,.78rem + 1vw,1.55rem);
	line-height:1.14;
	letter-spacing:.03em;
	text-transform:uppercase;
	text-wrap:balance;
	color:#fff;
	background:rgba(5,1,14,.92);
	border:2px solid var(--roehre);
	border-radius:2rem 0 0 2rem;
	box-shadow:
		0 0 18px -2px rgba(143,220,255,.75),
		inset 0 0 16px -5px rgba(143,220,255,.6),
		0 16px 32px -14px #000;
	text-shadow:
		0 0 .1em #fff,
		0 0 .35em var(--roehre),
		0 0 .9em rgba(143,220,255,.75);
	transition:box-shadow .25s ease,background .25s ease;
}

.start__neu{
	color:#ffe0f0;
	text-shadow:
		0 0 .1em #fff,
		0 0 .35em var(--clown),
		0 0 .9em rgba(255,45,149,.8);
}

/* --- Der Golfball --- */
.start__kugel{
	position:relative;
	z-index:1;
	flex:none;
	width:var(--kugel);
	height:var(--kugel);
	border-radius:50%;
	background:radial-gradient(circle at 50% 50%,#fff 0%,#e4faff 55%,#86dcec 100%);
	box-shadow:
		0 0 18px -1px rgba(255,255,255,.75),
		0 0 36px -6px rgba(0,229,208,.65);
}

.start__dreh{
	position:absolute;inset:0;
	border-radius:50%;
	overflow:hidden;
}
.start__dreh svg{
	display:block;width:100%;height:100%;
	fill:rgba(0,60,80,.2);
}

/* Glanzlicht und Schattenseite drehen nicht mit */
.start__kugel::before{
	content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;
	background:
		radial-gradient(circle at 33% 27%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 28%),
		radial-gradient(circle at 70% 78%,rgba(0,40,60,0) 42%,rgba(0,40,60,.32) 100%);
}
/* Leuchtfleck auf dem Boden, wie Schwarzlicht unter dem Ball */
.start__kugel::after{
	content:"";position:absolute;z-index:-1;pointer-events:none;
	left:6%;right:6%;bottom:-16%;height:20%;
	border-radius:50%;
	background:radial-gradient(closest-side,rgba(0,229,208,.55),transparent);
	filter:blur(3px);
}

/* --- Schließen --- */
.start__zu{
	position:absolute;
	top:-.7rem;left:-.5rem;
	z-index:2;
	width:1.7rem;height:1.7rem;
	padding:0;
	font:700 1rem/1 var(--sans);
	color:#fff;
	background:#05010e;
	border:1px solid var(--roehre);
	border-radius:50%;
	box-shadow:0 0 10px -2px rgba(143,220,255,.8);
	cursor:pointer;
}
.start__zu:hover,.start__zu:focus-visible{background:#1a1030}

/* --- Zeigen --- */
.start__knopf:hover .start__text,
.start__knopf:focus-visible .start__text{
	background:rgba(20,10,40,.95);
	box-shadow:
		0 0 28px 0 rgba(143,220,255,.95),
		inset 0 0 22px -4px rgba(143,220,255,.75),
		0 16px 32px -14px #000;
}
.start__knopf:hover .start__dreh,
.start__knopf:focus-visible .start__dreh{
	transform:rotate(200deg);
	transition:transform .9s cubic-bezier(.3,.7,.2,1);
}
.start__knopf:focus-visible{outline:none}
.start__knopf:focus-visible .start__text{outline:2px solid #fff;outline-offset:3px}

/* ==========================================================
   Der Auftritt – nur, wenn das Skript `.rollt` setzt
   1. warten (--warten), dabei schon im Anfangszustand
   2. Ball rollt von links herein
   3. Schild klappt aus dem Ball nach links auf
   4. die Schrift zündet wie eine Neonröhre
   5. Schließen-Knopf erscheint
   ========================================================== */

.start.rollt .start__kugel{
	animation:start-rollen var(--dauer) cubic-bezier(.2,.75,.3,1.04) var(--warten) both;
}
.start.rollt .start__dreh{
	animation:start-drehen var(--dauer) cubic-bezier(.2,.75,.3,1.04) var(--warten) both;
}
.start.rollt .start__text{
	animation:start-aufklappen .6s cubic-bezier(.25,.8,.25,1) calc(var(--warten) + var(--dauer) - .15s) both;
}
.start.rollt .start__wort{
	animation:start-zuenden .9s steps(1,end) calc(var(--warten) + var(--dauer) + .35s) both;
}
.start.rollt .start__zu{
	animation:start-auftauchen .35s ease calc(var(--warten) + var(--dauer) + 1.1s) both;
}

@keyframes start-rollen{
	from{transform:translateX(var(--weg))}
	to  {transform:translateX(0)}
}
@keyframes start-drehen{
	from{transform:rotate(var(--drehung))}
	to  {transform:rotate(0deg)}
}
@keyframes start-aufklappen{
	from{clip-path:inset(0 0 0 100%)}
	to  {clip-path:inset(0 0 0 0)}
}
/* Dieselbe Zündfolge wie bei den Überschriften, nur hier für das Schild */
@keyframes start-zuenden{
	0%   {opacity:.15}
	10%  {opacity:1}
	18%  {opacity:.25}
	28%  {opacity:1}
	36%  {opacity:.35}
	48%  {opacity:.95}
	58%  {opacity:.4}
	100% {opacity:1}
}
@keyframes start-auftauchen{
	from{opacity:0;transform:scale(.4)}
	to  {opacity:1;transform:scale(1)}
}

/* Am Handy gibt es keinen Scroll-Ball, dafür unten den festen Balken */
@media (max-width:52rem){
	.start{right:.8rem;bottom:4.8rem}
}

/* Ohne Bewegung: gleich der fertige Knopf */
@media (prefers-reduced-motion:reduce){
	.start.rollt .start__kugel,
	.start.rollt .start__dreh,
	.start.rollt .start__text,
	.start.rollt .start__wort,
	.start.rollt .start__zu{animation:none}
	.start__knopf:hover .start__dreh{transform:none}
}