/* ==========================================================
   ICE Minigolf Graz
   Leitidee: Die Schwesterseite minigolf-graz.at ist Neon auf
   Schwarz – hier ist es Eis auf Nachtblau. Gleiche Handschrift
   (Sprungleiste, Fortschritt, Blockwechsel, Partikelfeld),
   andere Welt: kein Leuchten, sondern Glanz. Kanten statt
   Rundungen, Milchglas statt Neonröhre.
   Regel wie drüben: Effekte schmücken. Adresse, Termin und
   Verweise funktionieren ohne JavaScript.
   ========================================================== */

:root{
	--grund:#04121e;
	--grund-tief:#020b13;
	--grund-hell:#0b2740;
	--schrift:#e8f6ff;
	--gedaempft:#94b6cd;

	--eis:#7fd8ff;          /* Leitfarbe: Eisblau */
	--eis-hell:#cfefff;     /* Glanzkante */
	--tiefe:#2f7fb8;        /* Schatten im Eis */
	--warm:#ff9d4d;         /* nur für den Verweis in die warme Halle */

	--sans:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	/* Bewusst eine andere Anzeigeschrift als drüben (Trebuchet):
	   schmaler und härter – passt zu Kanten und Kälte. */
	--display:"Haettenschweiler","Arial Narrow",Impact,"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;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--eis)}

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

/* ---------- Kufenspur: Fortschritt mit Puck ----------
   Drüben rollt ein Golfball mit. Hier zieht ein Puck eine Spur –
   dasselbe Prinzip, anderes Bild. */

.spur{
	position:fixed;left:0;right:0;top:0;height:3px;z-index:55;
	background:rgba(255,255,255,.06);
}
.spur i{
	display:block;height:100%;width:0;
	background:linear-gradient(90deg,rgba(127,216,255,.25),var(--eis-hell));
	box-shadow:0 0 10px 1px rgba(127,216,255,.6);
}
.spur b{
	position:absolute;top:-3px;left:0;
	width:16px;height:9px;
	border-radius:2px;
	background:#0b0f12;
	border:1px solid rgba(255,255,255,.55);
	box-shadow:0 0 8px 2px rgba(0,0,0,.6);
	transform:translateX(-50%);
	opacity:0;
	transition:opacity .4s ease;
}
.spur b.da{opacity:1}

/* ---------- 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(4,18,30,.72);
	backdrop-filter:blur(12px) saturate(1.4);
	border-bottom:1px solid rgba(207,239,255,.16);
}

.leiste__marke{
	font-family:var(--display);
	font-size:1.15rem;
	letter-spacing:.16em;
	color:var(--schrift);
	text-decoration:none;
	white-space:nowrap;
}
.leiste__marke b{color:var(--eis);font-weight:400}

.leiste__punkte{
	display:flex;gap:.1rem;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:.4rem .7rem;
	font-size:.86rem;
	letter-spacing:.06em;
	color:var(--gedaempft);
	text-decoration:none;
	white-space:nowrap;
	border-bottom:2px solid transparent;
	transition:color .2s ease,border-color .2s ease;
}
.leiste__punkte a:hover,.leiste__punkte a:focus-visible{
	color:var(--schrift);border-bottom-color:var(--eis);
}

.leiste__knopf{
	padding:.42rem 1rem;
	font-size:.85rem;font-weight:700;letter-spacing:.06em;
	color:var(--grund-tief);background:var(--eis);
	border-radius:2px;
	text-decoration:none;white-space:nowrap;
}

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

/* ---------- Knöpfe ----------
   Eckig, nicht rund – drüben sind es Pillen. */

.knopf{
	display:inline-block;
	padding:.72rem 1.4rem;
	font-size:.92rem;font-weight:600;letter-spacing:.04em;
	color:var(--schrift);
	border:1px solid rgba(207,239,255,.38);
	border-radius:2px;
	text-decoration:none;
	transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.knopf:hover,.knopf:focus-visible{
	background:rgba(207,239,255,.14);
	border-color:var(--eis-hell);
}

.knopf--stark{
	color:var(--grund-tief);
	background:linear-gradient(180deg,#eaf9ff,var(--eis));
	border-color:var(--eis-hell);
	box-shadow:0 0 24px -6px rgba(127,216,255,.9);
}
.knopf--stark:hover,.knopf--stark:focus-visible{
	background:#fff;border-color:#fff;color:var(--grund-tief);
}

.knopf--warm{
	color:#ffd0a6;
	border-color:rgba(255,157,77,.6);
}
.knopf--warm:hover,.knopf--warm:focus-visible{
	background:rgba(255,157,77,.16);border-color:var(--warm);
}

/* ---------- Einstieg mit Filmhintergrund ---------- */

.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;
}

.einstieg__film{position:absolute;inset:0;z-index:0}
.einstieg__film video{
	width:100%;height:100%;
	object-fit:cover;
	/* Das Rohbild ist wärmer als die Seite – kühl gerechnet, damit
	   Film und Farbwelt zusammenpassen. */
	filter:saturate(.85) contrast(1.05) brightness(.78) hue-rotate(-6deg);
}
.einstieg::after{
	content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	background:
		radial-gradient(120% 80% at 72% 28%,transparent 0%,rgba(3,16,26,.7) 72%),
		linear-gradient(180deg,rgba(3,16,26,.8) 0%,rgba(3,16,26,.3) 38%,rgba(4,18,30,.97) 100%);
}

.einstieg__logo{
	position:absolute;z-index:3;
	top:clamp(1rem,3vw,2.2rem);
	right:clamp(1.1rem,4vw,3rem);
	width:clamp(6rem,8rem + 4vw,10.5rem);
	max-width:33%;
	height:auto;
	/* Im Logo steckt dunkle Schrift auf durchsichtigem Grund – auf
	   nachtblauem Bild verschwände sie ohne helle Aura. */
	filter:
		drop-shadow(0 0 1px rgba(255,255,255,.95))
		drop-shadow(0 0 5px rgba(255,255,255,.65))
		drop-shadow(0 0 18px rgba(127,216,255,.5));
}

@media (max-width:34rem){
	.einstieg__logo{top:.7rem;right:.9rem}
}

.einstieg__text{position:relative;z-index:3;max-width:36rem}

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

.einstieg h1{
	margin:0 0 1rem;
	font-family:var(--display);
	font-weight:400;
	font-size:clamp(3rem,1.2rem + 9vw,7rem);
	line-height:.92;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--eis-hell);
	text-shadow:0 2px 30px rgba(3,16,26,.9);
}

/* Die Glanzkante: ein heller Streifen wandert über das Wort, wie
   Licht über eine Eisfläche. Kein Flackern wie bei der Neonröhre. */
.eis{
	display:inline-block;
	background:linear-gradient(100deg,
		#8fd3f2 0%,
		#ffffff 42%,
		#e6f8ff 50%,
		#8fd3f2 62%,
		#5fa9d6 100%);
	background-size:280% 100%;
	background-position:100% 0;
	-webkit-background-clip:text;
	background-clip:text;
	color:transparent;
	-webkit-text-fill-color:transparent;
}

body:not(.kein-js) .eis.glanz{
	animation:glanz 2.2s cubic-bezier(.3,0,.2,1) forwards;
}

@keyframes glanz{
	from{background-position:100% 0}
	to  {background-position:0% 0}
}

/* ⚠ Falls die Schrift-Beschneidung nicht unterstützt wird, stünde die
   Überschrift durchsichtig da. Diese Abfrage fängt das ab. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
	.eis{color:var(--eis-hell);-webkit-text-fill-color:var(--eis-hell);background:none}
}

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

.einstieg__unter{margin:0 0 1.8rem;font-size:1.06em;max-width:36ch}
.einstieg__unter strong{color:var(--eis-hell)}

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

/* Der Scroll-Hinweis ist ein Pfeil, kein Wort – er wippt langsam, damit
   man ihn bemerkt, ohne dass er zappelt. Fällt die Bewegung weg (Skript aus
   oder reduzierte Bewegung), steht der Pfeil einfach still da. */
.einstieg__runter{
	position:absolute;left:50%;bottom:1rem;z-index:3;
	transform:translateX(-50%);
	margin:0;
	line-height:0;
	color:var(--gedaempft);
}
.einstieg__runter svg{
	display:block;
	animation:wippen 2.6s ease-in-out infinite;
}

@keyframes wippen{
	0%,100%{transform:translateY(0);opacity:.55}
	50%    {transform:translateY(.4rem);opacity:1}
}

/* ---------- 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-weight:400;
	font-size:clamp(2.8rem,1.4rem + 4.5vw,4.8rem);
	line-height:1;
	letter-spacing:.02em;
	color:var(--eis-hell);
	text-shadow:0 0 .35em rgba(127,216,255,.55);
}

.fakten__reihe span{
	display:block;margin-top:.35rem;max-width:12rem;
	font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
	color:var(--gedaempft);
}

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

/* ---------- Blöcke: die Eisschollen ----------
   Der Wiedererkennungswert dieser Seite: Jeder Block ist eine Scholle
   mit schräg geschnittenen Kanten. Drüben laufen die Flächen weich
   aus – hier brechen sie. */

.block{
	position:relative;
	padding:clamp(3.4rem,9vw,6rem) clamp(1.1rem,4vw,3rem);
	background:
		linear-gradient(160deg,rgba(127,216,255,.09),transparent 55%),
		linear-gradient(180deg,var(--grund-hell),#071e33);
	clip-path:polygon(0 3.2vw,100% 0,100% calc(100% - 3.2vw),0 100%);
	margin-block:-1px;
}

.block--bahnen{
	background:
		linear-gradient(200deg,rgba(127,216,255,.07),transparent 55%),
		linear-gradient(180deg,#06203a,#041625);
	clip-path:polygon(0 0,100% 3.2vw,100% 100%,0 calc(100% - 3.2vw));
}

.block__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,3.2rem);
	align-items:center;
}

.block__marke{
	margin:0 0 .5rem;
	font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
	color:var(--eis);
}

.block h2,.halle h2,.wann h2,.anfahrt h2{
	margin:0 0 1rem;
	font-family:var(--display);
	font-weight:400;
	font-size:clamp(2.1rem,1.2rem + 3.4vw,3.8rem);
	line-height:1;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--eis-hell);
}

.block__satz{margin:0 0 1rem;font-size:1.1em;max-width:44ch}
.block__satz strong{color:var(--eis-hell)}
.block__text p{max-width:46ch}

.block__liste{margin:1.2rem 0 0;padding:0;list-style:none;max-width:46ch}
.block__liste li{
	position:relative;
	margin-bottom:.7rem;
	padding-left:1.5rem;
	color:var(--gedaempft);
}
/* Der Aufzählungspunkt ist ein Puck, keine Kugel */
.block__liste li::before{
	content:"";position:absolute;left:0;top:.72em;
	width:.7rem;height:.36rem;border-radius:1px;
	background:#0b0f12;
	border:1px solid rgba(207,239,255,.6);
}
.block__liste b{color:var(--schrift);font-weight:700}

.block__hinweis{
	margin:1.2rem 0 0;
	font-size:.8rem;letter-spacing:.06em;
	color:#7fa2ba;
}

/* Bilder als Eisscheiben: leichte Schräge, harte Glanzkante oben */
.block__bild{display:grid;gap:1rem}

.scheibe{
	position:relative;
	margin:0;
	overflow:hidden;
	border-radius:2px;
	clip-path:polygon(1.6rem 0,100% 0,calc(100% - 1.6rem) 100%,0 100%);
	box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
}
.scheibe img{width:100%;transition:transform 1.2s ease}
.scheibe:hover img{transform:scale(1.05)}

/* Kante wie frisch gebrochenes Eis */
.scheibe::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(115deg,rgba(255,255,255,.22) 0 6%,transparent 22%);
	mix-blend-mode:screen;
}

/* ---------- Die warme Halle ----------
   Der einzige Ort auf dieser Seite, an dem es Farbe gibt.
   Genau das ist die Aussage: drinnen ist es warm. */

.halle{
	position:relative;
	overflow:hidden;
	padding:clamp(3rem,8vw,5rem) clamp(1.1rem,4vw,3rem);
	background:linear-gradient(180deg,#0a1320,#150c14 55%,#0a1320);
	border-block:1px solid rgba(255,157,77,.22);
}

.halle__innen{
	position:relative;z-index:2;
	max-width:46rem;margin-inline:auto;
}
.halle h2{color:#ffc79a}
.halle .block__marke{color:var(--warm)}
.halle p{max-width:52ch}
.halle strong{color:#ffd9bb}

/* Neonschimmer aus der Halle – angedeutet, nicht ausgemalt */
.halle__leuchten{
	position:absolute;inset:-20%;z-index:1;pointer-events:none;
	background:
		radial-gradient(circle at 78% 30%,rgba(255,45,149,.14),transparent 42%),
		radial-gradient(circle at 88% 72%,rgba(123,60,255,.14),transparent 40%),
		radial-gradient(circle at 62% 88%,rgba(0,229,208,.1),transparent 38%);
	animation:schimmer 24s ease-in-out infinite alternate;
}

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

/* ---------- Der Termin ---------- */

.wann{
	position:relative;
	overflow:hidden;
	padding:clamp(3.4rem,9vw,6rem) clamp(1.1rem,4vw,3rem);
	text-align:center;
}

.wann__innen{position:relative;z-index:2;max-width:48rem;margin-inline:auto}
.wann .block__marke{color:var(--eis)}

.wann__gross{
	font-size:clamp(3rem,1.5rem + 8vw,6.5rem) !important;
	margin-bottom:1.2rem !important;
}

.wann__satz{margin:0 auto 2.2rem;max-width:44ch;color:var(--gedaempft)}

/* Milchglaskarten statt Pillenknöpfe */
.folgen{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));
	gap:1rem;
	max-width:34rem;margin-inline:auto;
}

.folgen__karte{
	display:flex;align-items:center;gap:.9rem;
	padding:1rem 1.2rem;
	text-align:left;
	text-decoration:none;
	color:var(--schrift);
	background:rgba(207,239,255,.07);
	border:1px solid rgba(207,239,255,.2);
	border-radius:3px;
	backdrop-filter:blur(6px);
	transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.folgen__karte:hover,.folgen__karte:focus-visible{
	transform:translateY(-3px);
	background:rgba(207,239,255,.14);
	border-color:var(--eis);
}
.folgen__karte svg{width:26px;height:26px;fill:var(--eis);flex:none}
.folgen__karte span{display:block;font-size:.86rem;color:var(--gedaempft);line-height:1.35}
.folgen__karte b{display:block;font-size:1rem;color:var(--schrift);letter-spacing:.04em}

/* ---------- Anfahrt und Fuß ---------- */

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

.anschrift{
	padding:1.2rem 1.4rem;
	background:rgba(207,239,255,.05);
	border-left:3px solid var(--eis);
	line-height:1.9;
	font-size:1.05em;
}
.anfahrt__dazu{max-width:48ch;color:var(--gedaempft)}

.fuss{
	padding:clamp(2.2rem,5vw,3.4rem) clamp(1.1rem,4vw,3rem) 6rem;
	border-top:1px solid rgba(207,239,255,.14);
	color:var(--gedaempft);
	font-size:.85rem;
}
.fuss__logo{
	width:clamp(4.5rem,10vw,6rem);
	margin-bottom:1.4rem;
	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(127,216,255,.5));
}
.fuss p{margin:0 0 .6rem}
.fuss a{color:var(--schrift)}

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

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

@media (max-width:52rem){
	.balken{display:block}
	.fuss{padding-bottom:7rem}
	/* Die Schollenschräge wird auf schmalen Schirmen zu steil */
	.block,.block--bahnen{clip-path:none}
	.scheibe{clip-path:none}
}

/* ---------- Schneefeld ---------- */

/* ⚠ canvas ist ein ersetztes Element: inset:0 allein streckt es nicht,
   Breite und Höhe müssen ausdrücklich gesetzt werden. */
.schnee{
	position:absolute;inset:0;z-index:1;
	width:100%;height:100%;
	pointer-events:none;
	opacity:.85;
}
.einstieg .schnee{z-index:2}

/* ---------- Auftauchen beim Scrollen ---------- */

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

/* Ohne JS bleibt die Glanzkante stehen statt zu wandern */
body.kein-js .eis{background-position:0 0}

@media (prefers-reduced-motion:reduce){
	body:not(.kein-js) .auf{opacity:1;transform:none;transition:none}
	.scheibe img{transition:none}
	.halle__leuchten{animation:none}
	.einstieg__runter svg{animation:none}
	.schnee,.spur b{display:none}
	body:not(.kein-js) .eis{animation:none;background-position:0 0}
}

/* ==========================================================
   Die Angebote der Halle auf der Eisseite (03.09.2026)
   Auftrag des Nutzers: dieselben Inhalte wie minigolf-graz.at,
   nur „im style vom winter".
   Übersetzungsregel, an die ich mich hier halte:
   Drüben flutet das Neon die Fläche – hier bleibt der Grund kalt
   und das Neon steckt **in den Bildern**, gerahmt wie ein Fenster,
   durch das man von draußen in die warme Halle schaut.
   Jede Welt bekommt nur eine schmale Farbkante, keine Farbfläche.
   ========================================================== */

.ueberschrift{
	margin:clamp(2rem,6vw,3.4rem) auto clamp(.6rem,2vw,1.2rem);
	padding-inline:clamp(1.1rem,4vw,3rem);
	max-width:70rem;
	font-family:var(--display);
	font-weight:400;
	font-size:clamp(1.7rem,1.1rem + 2.2vw,2.8rem);
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--eis-hell);
}

/* ---------- Die vier Welten als Fenster ---------- */

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

.welt__innen{
	max-width:70rem;margin-inline:auto;
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(18rem,100%),1fr));
	gap:clamp(1.2rem,3vw,2.4rem);
	align-items:center;
	padding:clamp(1.2rem,3vw,2rem);
	/* Milchglas: der Rahmen ist das Fenster, nicht die Welt */
	background:rgba(207,239,255,.045);
	border:1px solid rgba(207,239,255,.14);
	border-left:3px solid var(--farbe);
	border-radius:3px;
	backdrop-filter:blur(4px);
}

.welt__nr{
	margin:0 0 .4rem;
	font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;
	color:var(--farbe);
}

.welt h3{
	margin:0 0 .8rem;
	font-family:var(--display);
	font-weight:400;
	font-size:clamp(1.7rem,1.1rem + 2.4vw,2.8rem);
	line-height:1.02;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--eis-hell);
	/* Nur ein Hauch der Weltfarbe – der Grund bleibt kalt */
	text-shadow:0 0 .5em color-mix(in srgb,var(--farbe) 45%,transparent);
}

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

.welt__bilder{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.welt__bilder figure{
	margin:0;overflow:hidden;border-radius:2px;
	position:relative;
	box-shadow:0 14px 30px -18px #000;
}
.welt__bilder img{
	width:100%;
	/* Kalter Filter über dem Neon: als sähe man es durch eine
	   beschlagene Scheibe. Beim Zeigen taut sie auf. */
	filter:saturate(.82) brightness(.86) contrast(1.05);
	transition:transform 1.1s ease,filter .5s ease;
}
.welt__bilder figure:hover img{transform:scale(1.05);filter:none}

/* Reif an der Fensterkante */
.welt__bilder figure::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(140deg,rgba(207,239,255,.3) 0 4%,transparent 20%);
	mix-blend-mode:screen;
}

.welt--weltall {--farbe:#7b3cff}
.welt--clown   {--farbe:#ff2d95}
.welt--maerchen{--farbe:#e040fb}
.welt--wasser  {--farbe:#00e5d0}

/* Der Seitenwechsel wie drüben: abwechselnd Text und Bild vorne */
@media (min-width:60rem){
	.welt--clown .welt__text,
	.welt--wasser .welt__text{order:2;padding-left:clamp(1rem,3vw,2rem)}
	.welt--weltall .welt__text,
	.welt--maerchen .welt__text{padding-right:clamp(1rem,3vw,2rem)}
}

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

.block--jumper{
	background:
		linear-gradient(160deg,rgba(43,217,255,.1),transparent 55%),
		linear-gradient(180deg,#062031,#04141f);
}
.block--maze{
	background:
		linear-gradient(200deg,rgba(255,43,43,.08),transparent 55%),
		linear-gradient(180deg,#0a1622,#041322);
	clip-path:polygon(0 0,100% 3.2vw,100% 100%,0 calc(100% - 3.2vw));
}

.block--jumper .block__marke{color:#2bd9ff}
.block--maze .block__marke{color:#ff6b6b}
.block--maze h2{color:#ffd9d9}

.block--jumper .block__liste li::before{border-color:rgba(43,217,255,.7)}
.block--maze .block__liste li::before{border-color:rgba(255,107,107,.7)}

/* Die Wortmarken tragen dunkle, nicht durchsichtige Gründe –
   `screen` rechnet sie heraus, die Maske nimmt die Kante. */
.wortmarke{margin:0 0 1rem}
/* ★ 06.09.2026: Alle drei Wortmarken (Light Jumper, Laser Maze, BattleKart)
   liegen als echte Logos mit Transparenz vor. `mix-blend-mode: screen` und
   die Maske sind entfernt – sie waren die Notlösung für die alten,
   hochskalierten Menü-Icons mit dunklem Grund. */
.wortmarke img{
	width:clamp(11rem,24vw,15rem);
	height:auto;
}

/* Laser Maze steht schmaler: sein Logo ist quadratischer als der breite
   Light-Jumper-Schriftzug und wirkt bei gleicher Breite viel größer. */
.block--maze .wortmarke img{
	width:clamp(8rem,18vw,11rem);
}

.tn{padding:0 .2em;border-radius:2px;color:#04121e;font-weight:700}
.tn--blau{background:#2bd9ff}
.tn--rot{background:#ff5470}
.tn--gruen{background:#5cff9d}

/* ---------- BattleKart ---------- */

.nachbar{
	position:relative;
	overflow:hidden;
	padding:clamp(2.8rem,7vw,4.6rem) clamp(1.1rem,4vw,3rem);
	background:linear-gradient(180deg,#0a1320,#150d13 55%,#0a1320);
	border-block:1px solid rgba(255,157,77,.2);
}

/* --- 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.
   Der Verlauf ist hier kühler gemischt als auf minigolf-graz.at, damit das
   Video nicht aus der Farbwelt dieser Seite fällt. */
.nachbar__video::after{
	content:"";position:absolute;inset:0;
	background:
		linear-gradient(90deg,rgba(6,15,26,.92) 0%,rgba(6,15,26,.66) 42%,rgba(6,15,26,.26) 100%),
		linear-gradient(180deg,rgba(6,15,26,.45),rgba(6,15,26,.34));
}

/* Der Text muss über dem Video liegen */
.nachbar .anfahrt__innen{position:relative;z-index:1}
.nachbar .block__marke{color:var(--warm)}
.nachbar p{max-width:52ch}

/* ---------- Tabellen ---------- */

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(207,239,255,.14);
	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:.74rem;letter-spacing:.2em;text-transform:uppercase;
	color:var(--gedaempft);
	border-bottom-color:rgba(207,239,255,.3);
}
/* Die eigene Zeile hebt sich ab – sie ist der Grund für diese Seite */
.preise__kopf--eis th{color:var(--eis)}

.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(--eis);font-weight:400;font-size:.8em;
}

/* ---------- Fuß: zwei Marken, zwei Partner ---------- */

.fuss__marken{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);margin:0 0 1.4rem}
.fuss__logo--schwarz{
	width:clamp(4rem,9vw,5.4rem);
	margin-bottom:0;
}
.fuss__partner{
	display:flex;align-items:center;flex-wrap:wrap;
	gap:clamp(1.2rem,4vw,2.4rem);
	margin-top:1.4rem;
}
.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}
.fuss__jahr{margin-top:1.4rem;opacity:.6}

@media (max-width:52rem){
	.block--jumper,.block--maze{clip-path:none}
	.welt__bilder{grid-template-columns:1fr}
	.welt__bilder figure:nth-child(n+2){display:none}
}

@media (prefers-reduced-motion:reduce){
	.welt__bilder img{transition:none}
}



/* ==========================================================
   Eröffnungs-Knopf: die Eiskugel rollt herein (10.09.2026)
   Auftrag des Nutzers: großer Knopf „Wir eröffnen am 24. Oktober!",
   eine Kugel rollt ins Bild und bleibt rechts als Knopf hängen.
   Nur bis 23.10.2026, 23:59 – das Ein- und Ausblenden macht index.js.

   Aufbau: Die Kugel sitzt rechts, der Schriftzug klappt nach links
   aus ihr heraus. Zwei Ebenen in der Kugel, damit das Rollen echt
   aussieht: `.start__kugel` wandert nur seitlich (Glanzlicht und
   Schatten bleiben, wo das Licht ist), `.start__dreh` darin dreht
   sich mit dem Frostmuster. Strecke und Drehwinkel rechnet das
   Skript aus – der Winkel passt zum Umfang, die Kugel rutscht nicht.
   ========================================================== */

.start{
	--kugel:clamp(3.4rem,2.6rem + 2.4vw,4.8rem);
	--weg:-100vw;          /* vom Skript überschrieben */
	--drehung:-2160deg;    /* vom Skript überschrieben */
	--dauer:1.7s;
	/* Wartezeit vor dem Auftritt. ★ Steht bewusst hier als Animations-
	   verzögerung und nicht als Timer im Skript: Während der Verzögerung
	   gilt dank `both` schon der Anfangszustand (Kugel draußen, Schriftzug
	   zu). Mit einem Timer im Skript stand vorher 1,4 s lang der fertige
	   Banner da und sprang dann zurück (Nutzer, 10.09.2026). */
	--warten:1.4s;
	position:fixed;
	z-index:57;
	right:clamp(.8rem,3vw,2.2rem);
	bottom:clamp(1rem,4vw,2.4rem);
}
/* ⚠ Die Klasse setzt `display` – ohne diese Zeile hätte `hidden` keine Wirkung */
.start[hidden]{display:none}

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

/* --- Der Schriftzug --- */
.start__text{
	position:relative;
	display:block;
	max-width:calc(100vw - var(--kugel) - 2.4rem);
	margin-right:calc(var(--kugel) * -.5);
	padding:.85rem calc(var(--kugel) * .62) .85rem 1.4rem;
	font-family:var(--display);
	font-size:clamp(1.1rem,.85rem + 1.1vw,1.7rem);
	line-height:1.1;
	letter-spacing:.05em;
	text-transform:uppercase;
	text-wrap:balance;
	color:var(--grund-tief);
	background:linear-gradient(180deg,#f4fcff 0%,#c9ecfb 55%,var(--eis) 100%);
	border:1px solid var(--eis-hell);
	border-radius:2px;
	box-shadow:
		0 14px 34px -14px rgba(0,0,0,.8),
		0 0 30px -6px rgba(127,216,255,.75);
	transition:background .25s ease,box-shadow .25s ease;
}

/* Glanzstreifen, der gelegentlich über den Schriftzug zieht */
.start__text::after{
	content:"";position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.75) 46%,transparent 62%);
	background-size:300% 100%;
	background-position:120% 0;
}

/* --- Die Kugel --- */
.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%,#eaf8ff 0%,#a9def4 55%,#4f9fcb 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.6),
		0 0 22px -2px rgba(127,216,255,.8);
}

/* Die drehende Ebene mit dem Frostmuster */
.start__dreh{
	position:absolute;inset:0;
	border-radius:50%;
	overflow:hidden;
}
.start__dreh svg{
	display:block;width:100%;height:100%;
	fill:rgba(255,255,255,.9);
	stroke:rgba(255,255,255,.85);
	stroke-width:2.6;
	stroke-linecap:round;
}
.start__dreh path{fill:none}

/* Licht und Schatten drehen nicht mit – sonst sähe es aus, als drehe
   sich die Lampe mit, nicht die Kugel. */
.start__kugel::before{
	content:"";position:absolute;inset:0;z-index:2;border-radius:50%;pointer-events:none;
	background:
		radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 9%,rgba(255,255,255,0) 30%),
		radial-gradient(circle at 70% 78%,rgba(10,40,70,0) 40%,rgba(10,40,70,.45) 100%);
}
/* Schatten auf dem Boden */
.start__kugel::after{
	content:"";position:absolute;z-index:-1;pointer-events:none;
	left:12%;right:12%;bottom:-14%;height:18%;
	border-radius:50%;
	background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);
	filter:blur(2px);
}

/* --- Schließen --- */
.start__zu{
	position:absolute;
	top:-.7rem;left:-.7rem;
	z-index:2;
	width:1.7rem;height:1.7rem;
	padding:0;
	font:700 1rem/1 var(--sans);
	color:var(--grund-tief);
	background:var(--eis-hell);
	border:1px solid #fff;
	border-radius:50%;
	box-shadow:0 4px 12px -4px rgba(0,0,0,.7);
	cursor:pointer;
}
.start__zu:hover,.start__zu:focus-visible{background:#fff}

/* --- Zeigen --- */
.start__knopf:hover .start__text,
.start__knopf:focus-visible .start__text{
	background:linear-gradient(180deg,#fff 0%,#e4f6ff 60%,#aee3f9 100%);
	box-shadow:0 14px 34px -14px rgba(0,0,0,.8),0 0 42px -4px rgba(127,216,255,.95);
}
.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. Kugel rollt von links herein, mit leichtem Nachschwingen
   2. Schriftzug klappt aus der Kugel nach links auf
   3. Schließen-Knopf erscheint
   4. danach alle 8 s ein Glanzstreifen über den Schriftzug
   ========================================================== */

.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 .65s cubic-bezier(.25,.8,.25,1) calc(var(--warten) + var(--dauer) - .15s) both;
}
.start.rollt .start__text::after{
	animation:start-glanz 8s ease-in-out calc(var(--warten) + var(--dauer) + 1.2s) infinite;
}
.start.rollt .start__zu{
	animation:start-auftauchen .35s ease calc(var(--warten) + var(--dauer) + .5s) 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%);opacity:.4}
	to  {clip-path:inset(0 0 0 0);opacity:1}
}
@keyframes start-auftauchen{
	from{opacity:0;transform:scale(.4)}
	to  {opacity:1;transform:scale(1)}
}
@keyframes start-glanz{
	0%,78%{background-position:120% 0}
	100%  {background-position:-20% 0}
}

/* Am Handy liegt unten der feste Balken – die Kugel parkt darüber */
@media (max-width:52rem){
	.start{bottom:4.8rem;right:.8rem}
}

/* Wer Bewegung abgestellt hat, bekommt den Knopf ohne Auftritt */
@media (prefers-reduced-motion:reduce){
	.start.rollt .start__kugel,
	.start.rollt .start__dreh,
	.start.rollt .start__text,
	.start.rollt .start__text::after,
	.start.rollt .start__zu{animation:none}
	.start__knopf:hover .start__dreh{transform:none}
}