/* 103 – Flipper · Der Flipperautomat: Rückscheibe mit Lauflichtern, Spielfeld mit Bumpern, Targets und Flipperfingern */
:root {
  --cab: #08070c;
  --cab-2: #121019;
  --pf: #0d1c4a;
  --pf-2: #132a66;
  --cherry: #e3173e;
  --cherry-d: #8d0c24;
  --yel: #ffd23a;
  --amber: #ff9a1f;
  --cyan: #38d4ff;
  --green: #3be07f;
  --pink: #ff5fb7;
  --ink: #f4f1ea;
  --mute: #c9cde4;
  --cream: #f6ecd3;
  --chrome: linear-gradient(180deg, #fbfcfd 0%, #a9b0bb 42%, #eef1f4 55%, #78808c 100%);
  --chrome-h: linear-gradient(90deg, #6d7480 0%, #eef1f4 28%, #a2a9b4 52%, #fbfcfd 72%, #737a86 100%);
  --disp: 'Bungee', 'Arial Black', Impact, system-ui, sans-serif;
  --inl: 'Bungee Inline', 'Bungee', 'Arial Black', Impact, system-ui, sans-serif;
  --sans: 'Rubik', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --wrap: 1240px;
  --pad: clamp(16px, 3.6vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--cab); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.05; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
svg { fill: currentColor; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yel); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--yel); color: #000; padding: 10px 16px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }

/* ---------- Lampen-Einsätze (Inserts) ---------- */
.ins { --c: var(--cherry); display: inline-block; width: 20px; height: 26px; flex: none; clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); background: radial-gradient(circle at 50% 62%, #fff 0 10%, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000) 100%); filter: drop-shadow(0 0 6px var(--c)); }
.ins--r { --c: var(--cherry); } .ins--y { --c: var(--yel); } .ins--c { --c: var(--cyan); } .ins--g { --c: var(--green); }
.label { display: flex; align-items: center; gap: 12px; font: 400 13px/1 var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--yel); }

/* ---------- Kopf ---------- */
.top { position: sticky; top: 0; z-index: 40; background: linear-gradient(180deg, #16131f, #0a090e); }
.top::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--chrome); }
.top__in { display: flex; align-items: center; gap: 24px; min-height: 76px; padding-bottom: 4px; }
.logo { flex: none; display: block; padding: 5px 8px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 2px #c9cfd8, 0 0 0 2px #000; position: relative; }
.logo img { width: 54px; height: auto; aspect-ratio: 1510 / 1300; }
.nav { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.ramps { display: flex; gap: 4px; }
.ramp { --c: var(--cherry); display: flex; align-items: center; gap: 10px; padding: 10px 14px; font: 400 14px/1 var(--disp); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--ink); border-radius: 22px; transition: background .2s, color .2s; }
.ramp .ins { --c: inherit; width: 16px; height: 20px; opacity: .5; filter: none; transition: opacity .15s, filter .15s; }
.ramp--r { --c: var(--cherry); } .ramp--y { --c: var(--yel); } .ramp--c { --c: var(--cyan); } .ramp--g { --c: var(--green); }
.ramp .ins { background: radial-gradient(circle at 50% 62%, #fff 0 10%, var(--c) 55%, color-mix(in srgb, var(--c) 60%, #000) 100%); }
.ramp:hover .ins, .ramp:focus-visible .ins { opacity: 1; filter: drop-shadow(0 0 8px var(--c)); }
.ramp:hover, .ramp:focus-visible { background: rgba(255,255,255,.07); color: #fff; }
.nav__end { display: flex; align-items: center; gap: 14px; }
.tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; text-decoration: none; font-variant-numeric: tabular-nums; }
.tel svg { width: 17px; height: 17px; color: var(--yel); }
.lang { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff6b85, var(--cherry) 55%, var(--cherry-d)); box-shadow: 0 0 0 3px #c9cfd8, 0 0 0 5px #000, 0 0 14px rgba(227,23,62,.6); font: 400 13px/1 var(--disp); text-decoration: none; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.lang:hover { filter: brightness(1.15); }
.menu { display: none; margin-left: auto; align-items: center; gap: 10px; min-height: 46px; padding: 6px 16px 6px 6px; background: #1c1924; border: 2px solid #c9cfd8; border-radius: 26px; font: 400 14px/1 var(--disp); text-transform: uppercase; cursor: pointer; color: #fff; }
.menu__knob { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff6b85, var(--cherry) 55%, var(--cherry-d)); box-shadow: 0 0 10px rgba(227,23,62,.6); transition: transform .15s; }
.top.open .menu__knob { transform: scale(.86); background: radial-gradient(circle at 40% 35%, #fff3a6, var(--yel) 55%, #b88d00); box-shadow: 0 0 14px rgba(255,210,58,.8); }

/* ---------- Rückscheibe (Hero) ---------- */
.backbox { padding-top: 18px; background: radial-gradient(ellipse at 50% 0, #1f1a2c, var(--cab) 70%); }
.cabinet { position: relative; padding: 12px; border-radius: 20px 20px 0 0; background: var(--chrome-h); box-shadow: 0 0 0 2px #000, 0 30px 60px rgba(0,0,0,.6); }
.glass { position: relative; isolation: isolate; overflow: hidden; border-radius: 12px 12px 0 0; min-height: clamp(360px, calc(100vh - 520px), 500px); display: grid; place-items: center; background: #0c0616; box-shadow: inset 0 0 0 3px #000; }
.art { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 45%, #6d0f22 0%, #3a0815 45%, #0a0508 100%); }
.art__rays { position: absolute; inset: -20%; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255,210,58,.22) 0deg 4deg, rgba(255,210,58,0) 4deg 12deg); -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 8%, #000 22%, transparent 62%); mask-image: radial-gradient(circle at 50% 50%, transparent 8%, #000 22%, transparent 62%); }
@media (prefers-reduced-motion: no-preference) { .art__rays { animation: spin 90s linear infinite; } }
@keyframes spin { to { transform: rotate(360deg); } }
.art__sun { position: absolute; left: 50%; bottom: -70%; width: min(50%, 540px); aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 38% 30%, #9ff0ff 0%, var(--cyan) 22%, #1679b8 55%, #0b2a63 85%); box-shadow: 0 0 0 6px #08040c, 0 0 0 10px var(--yel), 0 0 50px 10px rgba(56,212,255,.35); }
.art__sun::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(180deg, transparent 0 34px, rgba(8,20,60,.55) 34px 37px); }
.art__sun::after { content: ''; position: absolute; inset: 0 22%; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(8,20,60,.55), 0 0 0 3px rgba(8,20,60,.0); border-left: 3px solid rgba(8,20,60,.55); border-right: 3px solid rgba(8,20,60,.55); }
.art__stars { position: absolute; inset: 0 0 40% 0; background:
  radial-gradient(circle, #fff 0 1.2px, transparent 2px) 30px 40px / 190px 130px,
  radial-gradient(circle, #ffe9a6 0 1.6px, transparent 2.4px) 110px 20px / 270px 170px,
  radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 1.6px) 70px 90px / 130px 110px; }
.art__horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 6%; background: repeating-linear-gradient(90deg, var(--yel) 0 22px, #0a0508 22px 44px); opacity: .9; box-shadow: 0 -3px 0 #0a0508; }
.art__palm { position: absolute; bottom: 8%; width: clamp(150px, 19vw, 280px); height: auto; aspect-ratio: 200 / 260; color: #0a0508; filter: drop-shadow(0 0 1.5px var(--yel)); }
.art__palm--l { left: 1.5%; transform: rotate(-4deg); }
.art__palm--r { right: 1.5%; transform: scaleX(-1) rotate(-6deg); width: clamp(120px, 15vw, 220px); }
.art__jet { position: absolute; right: 16%; top: 13%; width: clamp(90px, 9vw, 140px); color: #fff; transform: rotate(-12deg) scaleX(-1); filter: drop-shadow(0 0 8px rgba(255,255,255,.4)); }
.art__jet svg { width: 100%; height: auto; aspect-ratio: 2 / 1; }
.art__jet::after { content: ''; position: absolute; left: 92%; top: 34%; width: 220%; height: 14px; background: repeating-linear-gradient(180deg, var(--cherry) 0 4px, transparent 4px 5px, var(--yel) 5px 9px, transparent 9px 10px, var(--cyan) 10px 14px); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); }
.bulbs { position: absolute; inset: 8px; z-index: 3; pointer-events: none; }
.b { position: absolute; --g: radial-gradient(circle, #fff6cc 0 3px, #ffbf3a 4.2px, rgba(255,160,40,.35) 6px, transparent 8px); --d: radial-gradient(circle, #7a4a1a 0 3px, #3b2410 4.2px, transparent 5.5px); }
.b--t, .b--b { left: 0; right: 0; height: 16px; background: var(--d) 0 0 / 28px 16px repeat-x; }
.b--t { top: 0; } .b--b { bottom: 0; }
.b--l, .b--r { top: 16px; bottom: 16px; width: 16px; background: var(--d) 0 0 / 16px 28px repeat-y; }
.b--l { left: 0; } .b--r { right: 0; }
.b::after { content: ''; position: absolute; inset: 0; }
.b--t::after, .b--b::after { background: var(--g) 0 0 / 56px 16px repeat-x; }
.b--l::after, .b--r::after { background: var(--g) 0 0 / 16px 56px repeat-y; }
@media (prefers-reduced-motion: no-preference) {
  .b--t::after, .b--b::after { animation: chaseX .9s steps(2) infinite; }
  .b--l::after, .b--r::after { animation: chaseY .9s steps(2) infinite; }
  .b--b::after { animation-direction: reverse; } .b--l::after { animation-direction: reverse; }
}
@keyframes chaseX { to { background-position: 56px 0; } }
@keyframes chaseY { to { background-position: 0 56px; } }
.glass__in { position: relative; z-index: 2; display: grid; justify-items: center; gap: 20px; padding: 48px clamp(24px, 6vw, 96px) 64px; text-align: center; }
.kicker { display: inline-flex; align-items: center; gap: 12px; padding: 9px 18px; border-radius: 30px; background: rgba(8,4,14,.72); box-shadow: inset 0 0 0 2px rgba(255,210,58,.6); font: 400 13px/1.25 var(--disp); letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.kicker svg { width: 14px; height: 14px; color: var(--yel); flex: none; }
.backbox h1 { font: 400 clamp(30px, 4.6vw, 70px)/1.04 var(--inl); color: var(--yel); max-width: 15.5em; text-wrap: balance;
  text-shadow: 1px 1px 0 var(--cherry), 2px 2px 0 var(--cherry), 3px 3px 0 var(--cherry), 4px 4px 0 #b80f30, 5px 5px 0 #b80f30, 6px 6px 0 var(--cherry-d), 7px 7px 0 #000, 0 0 34px rgba(255,170,40,.45); }

.speaker { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(290px, 340px) 44px; gap: 26px; align-items: center; padding: 20px 22px; background: linear-gradient(180deg, #1a1722, #0d0b12); border-top: 4px solid #000; box-shadow: inset 0 2px 0 rgba(255,255,255,.08); }
.grille { align-self: stretch; min-height: 140px; border-radius: 12px; background: radial-gradient(circle, #000 0 1.8px, transparent 2.4px) 0 0 / 8px 8px, linear-gradient(180deg, #2e2a37, #1c1922); box-shadow: inset 0 0 0 2px #3c3746, inset 0 0 18px rgba(0,0,0,.7); }
.speaker__txt { display: grid; gap: 20px; }
.lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; color: #ece9f2; max-width: 60ch; }
.dmd { position: relative; display: grid; gap: 4px; padding: 14px 18px 12px; border-radius: 6px; background: #170700; box-shadow: 0 0 0 5px #222, 0 0 0 7px #000, inset 0 0 26px rgba(0,0,0,.8); color: #ff8f1f; font-family: var(--disp); text-transform: uppercase; text-shadow: 0 0 6px rgba(255,140,30,.75); overflow: hidden; text-align: center; }
.dmd::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, transparent 0 1.1px, rgba(14,5,0,.7) 1.45px) 0 0 / 3px 3px; pointer-events: none; }
.dmd__row { font-size: 17px; letter-spacing: .08em; line-height: 1.2; }
.dmd__row--top { display: flex; justify-content: space-between; font-size: 13px; opacity: .85; }
.dmd__big { font-size: clamp(54px, 5.4vw, 76px); line-height: .95; letter-spacing: .02em; }
.dmd__tick { display: block; overflow: hidden; white-space: nowrap; font-size: 15px; letter-spacing: .06em; margin-top: 4px; padding-top: 6px; border-top: 1px dashed rgba(255,143,31,.5); }
.dmd__tick span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .dmd__tick span { animation: tick 16s linear infinite; } }
@keyframes tick { to { transform: translateX(-50%); } }

/* Flipperfinger als Buttons */
.flips { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: center; }
.flip { --rot: -4deg; position: relative; display: inline-flex; align-items: center; min-height: 56px; padding: 10px 24px 10px 50px; border-radius: 30px 16px 16px 30px / 30px 16px 16px 30px; background: linear-gradient(180deg, #ffffff 0%, #ece8f2 45%, #c6c0d2 100%); border: 5px solid var(--cherry); color: #160a10; text-decoration: none; font: 400 13.5px/1.15 var(--disp); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 6px 0 var(--cherry-d), 0 12px 22px rgba(0,0,0,.55); transform: rotate(var(--rot)); transform-origin: 28px 50%; transition: transform .12s cubic-bezier(.3, 1.6, .5, 1), box-shadow .12s; }
.flip::before { content: ''; position: absolute; left: 12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: radial-gradient(circle at 38% 35%, #fff, #9aa3b0 60%, #555c66); box-shadow: 0 0 0 2px #2a2a2a; }
.flip span { display: inline-flex; align-items: center; gap: 10px; }
.flip svg { width: 18px; height: 18px; flex: none; }
.flip--r { --rot: 4deg; padding: 10px 50px 10px 24px; border-radius: 16px 30px 30px 16px / 16px 30px 30px 16px; background: linear-gradient(180deg, #fff6c8 0%, var(--yel) 50%, #d9a800 100%); border-color: var(--cherry); transform-origin: calc(100% - 28px) 50%; }
.flip--r::before { left: auto; right: 12px; }
.flip:hover, .flip:focus-visible { --rot: -16deg; box-shadow: 0 8px 0 var(--cherry-d), 0 16px 26px rgba(0,0,0,.6), 0 0 22px rgba(255,210,58,.45); }
.flip--r:hover, .flip--r:focus-visible { --rot: 16deg; }
.flip:active { --rot: -22deg; }
.flip--r:active { --rot: 22deg; }
@media (prefers-reduced-motion: reduce) { .flip { transition: none; } .flip:hover, .flip:focus-visible { --rot: -5deg; } .flip--r:hover, .flip--r:focus-visible { --rot: 5deg; } }

/* ---------- Spielfeld ---------- */
.playfield { background: linear-gradient(180deg, #050408, var(--cab) 120px); padding-bottom: 0; }
.pf { position: relative; isolation: isolate; max-width: none; width: min(var(--wrap), calc(100% - 2 * var(--pad))); padding-inline: clamp(30px, 4.4vw, 64px); background:
  radial-gradient(ellipse 40% 22% at 18% 6%, rgba(56,212,255,.18), transparent 70%),
  radial-gradient(ellipse 36% 18% at 86% 30%, rgba(255,95,183,.16), transparent 70%),
  radial-gradient(ellipse 50% 20% at 30% 58%, rgba(255,210,58,.1), transparent 70%),
  radial-gradient(ellipse 40% 18% at 78% 84%, rgba(59,224,127,.12), transparent 70%),
  repeating-linear-gradient(62deg, rgba(255,255,255,.028) 0 2px, transparent 2px 46px),
  linear-gradient(180deg, var(--pf-2), var(--pf) 30%, #0a1538 100%); box-shadow: inset 0 0 80px rgba(0,0,0,.55); }
.pf::after { content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: linear-gradient(105deg, transparent 0 30%, rgba(255,255,255,.035) 30% 36%, transparent 36% 62%, rgba(255,255,255,.025) 62% 64%, transparent 64%); }
.rail { position: absolute; top: 0; bottom: 0; width: 16px; background: var(--chrome-h); box-shadow: 0 0 0 2px #000; z-index: 2; }
.rail--l { left: 0; } .rail--r { right: 0; }
.zone { position: relative; padding-block: clamp(80px, 9vw, 130px); }
.zone + .zone::before { content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 8px; border-radius: 4px; background: var(--chrome); box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.zone + .zone::after { content: ''; position: absolute; top: -7px; left: calc(6% - 11px); right: calc(6% - 11px); height: 22px; background: radial-gradient(circle, var(--cherry) 0 8px, #5a0716 9px, transparent 10.5px) left center / 22px 22px no-repeat, radial-gradient(circle, var(--cherry) 0 8px, #5a0716 9px, transparent 10.5px) right center / 22px 22px no-repeat; }
.zone__head { display: grid; gap: 18px; max-width: 820px; }
.zone__head--c { margin-inline: auto; text-align: center; justify-items: center; }
.zone__head h2 { font: 400 clamp(30px, 3.7vw, 54px)/1.06 var(--inl); color: #fff; text-shadow: 2px 2px 0 var(--cherry), 4px 4px 0 var(--cherry-d), 0 0 26px rgba(255,255,255,.18); text-wrap: balance; }
.intro { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.6; color: var(--mute); max-width: 60ch; }

/* Schwerpunkt: Missionen */
.missions { margin-top: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mission { --c: var(--cherry); display: flex; gap: 18px; align-items: flex-start; padding: 24px 22px 26px; border-radius: 16px; background: rgba(4,8,26,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); transition: box-shadow .2s, background .2s; }
.m2 { --c: var(--yel); } .m3 { --c: var(--cyan); } .m4 { --c: var(--green); } .m5 { --c: var(--amber); } .m6 { --c: var(--pink); }
.mission__lamp { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font: 400 20px/1 var(--disp); color: #10091a; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--c) 70%, #fff) 0 18%, var(--c) 60%, color-mix(in srgb, var(--c) 50%, #000) 100%); box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 16px color-mix(in srgb, var(--c) 70%, transparent); transition: box-shadow .2s, filter .2s; }
.mission h3 { font: 400 clamp(17px, 1.45vw, 20px)/1.15 var(--disp); color: #fff; margin: 4px 0 8px; hyphens: auto; }
.mission p { font-size: 15.5px; line-height: 1.55; color: var(--mute); }
.mission:hover { background: rgba(4,8,26,.75); box-shadow: inset 0 0 0 2px var(--c); }
.mission:hover .mission__lamp { box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 30px var(--c), 0 0 60px color-mix(in srgb, var(--c) 50%, transparent); filter: brightness(1.15); }
.js .missions:not(.in) .mission__lamp { filter: brightness(.45) saturate(.6); box-shadow: 0 0 0 3px rgba(0,0,0,.6); }
.missions .mission__lamp { transition: filter .25s, box-shadow .25s; }
.missions.in .m2 .mission__lamp { transition-delay: .12s; } .missions.in .m3 .mission__lamp { transition-delay: .24s; }
.missions.in .m4 .mission__lamp { transition-delay: .36s; } .missions.in .m5 .mission__lamp { transition-delay: .48s; } .missions.in .m6 .mission__lamp { transition-delay: .6s; }

/* Kennzahlen als Pop-Bumper */
.bumpfield { position: relative; margin-top: clamp(64px, 7vw, 100px); height: 560px; border-radius: 260px 260px 24px 24px / 160px 160px 24px 24px; background: radial-gradient(ellipse at 50% 40%, rgba(255,210,58,.08), transparent 60%), radial-gradient(circle, rgba(255,255,255,.07) 0 1.5px, transparent 2px) 0 0 / 26px 26px, #091337; box-shadow: inset 0 0 0 4px #b7bec8, inset 0 0 0 7px #000, inset 0 0 50px rgba(0,0,0,.6); overflow: hidden; }
.bumpers { position: absolute; inset: 0; }
.bumper { --c: var(--cherry); position: absolute; width: 190px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.bumper--1 { left: calc(26% - 95px); top: 70px; }
.bumper--2 { left: calc(74% - 95px); top: 70px; --c: var(--yel); }
.bumper--3 { left: calc(50% - 95px); top: 250px; --c: var(--cyan); }
.bumper__cap { position: relative; display: grid; place-items: center; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #ffffff 0 30%, color-mix(in srgb, var(--c) 30%, #fff) 52%, color-mix(in srgb, var(--c) 60%, #fff) 66%); border: 14px solid var(--c); box-shadow: 0 0 0 5px #d6dbe2, 0 0 0 8px #3a3f47, 0 12px 0 8px rgba(0,0,0,.45), 0 0 40px color-mix(in srgb, var(--c) 55%, transparent); transition: transform .08s, box-shadow .08s; }
.bumper__cap::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--c) 70%, #000); opacity: .35; }
.bumper b { position: relative; font: 400 34px/1 var(--disp); color: #1b0b14; letter-spacing: -.01em; }
.bumper--3 b { font-size: 19px; white-space: nowrap; }
.bumper__lbl { font: 600 13.5px/1.35 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; max-width: 190px; text-shadow: 0 1px 2px #000; }
.bumper.hit .bumper__cap { transform: scale(.93); box-shadow: 0 0 0 5px #fff, 0 0 0 8px #3a3f47, 0 0 70px var(--c), 0 0 0 30px color-mix(in srgb, var(--c) 18%, transparent); }
.sling { position: absolute; bottom: 70px; width: 120px; height: 170px; background: linear-gradient(180deg, #fff, #dfe3ea); clip-path: polygon(0 0, 100% 100%, 0 100%); filter: drop-shadow(0 0 0 #000); }
.sling::after { content: ''; position: absolute; inset: 10px 30px 10px 10px; background: linear-gradient(180deg, var(--cherry), var(--cherry-d)); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.sling--l { left: 40px; }
.sling--r { right: 40px; transform: scaleX(-1); }
.launch { position: absolute; right: 26px; bottom: 22px; display: none; align-items: center; gap: 14px; z-index: 3; }
.js .launch { display: flex; }
@media (prefers-reduced-motion: reduce) { .js .launch { display: none; } }
.launch__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 18px 6px 6px; border: 2px solid #c9cfd8; border-radius: 26px; background: #14111b; color: #fff; font: 400 13px/1 var(--disp); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.launch__knob { width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #a9b0bb 55%, #5a616b); box-shadow: 0 0 0 2px #000; }
.launch__btn:hover .launch__knob { background: radial-gradient(circle at 40% 35%, #fff3a6, var(--yel) 55%, #b88d00); }
.launch__score { font: 400 13px/1 var(--disp); color: #ff8f1f; background: #170700; padding: 10px 12px; border-radius: 4px; box-shadow: 0 0 0 3px #222; text-transform: uppercase; text-shadow: 0 0 6px rgba(255,140,30,.7); }
.ball { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, #c9cfd8 45%, #4b525c 100%); box-shadow: 0 4px 6px rgba(0,0,0,.6); display: none; z-index: 4; will-change: transform; }
.bumpfield.playing .ball { display: block; }

/* Beispielroute als Drahtrampe */
.ramp-route { margin-top: clamp(64px, 7vw, 100px); display: grid; gap: 18px; padding: clamp(22px, 3vw, 36px); border-radius: 22px; background: rgba(4,8,26,.55); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); }
.ramp-route__cap { display: flex; align-items: center; gap: 12px; font: 400 15px/1 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--yel); }
.ramp-route__svg { width: 100%; height: auto; overflow: visible; }
.ramp-route__svg .wire { fill: none; stroke: #dfe4ea; stroke-width: 15; stroke-linecap: round; }
.ramp-route__svg .wire-in { fill: none; stroke: #0b1640; stroke-width: 8; stroke-linecap: round; }
.ramp-route__svg .car { fill: none; stroke: var(--amber); stroke-width: 6; stroke-dasharray: 14 12; stroke-linecap: round; }
.ramp-route__svg .stop circle { fill: #0b0a12; stroke: var(--yel); stroke-width: 4; filter: drop-shadow(0 0 8px rgba(255,210,58,.6)); }
.ramp-route__svg .stop text { font: 400 20px var(--disp); fill: var(--yel); text-anchor: middle; }
.ramp-route__svg .seg { font: 400 15px var(--disp); fill: #fff; letter-spacing: .08em; text-anchor: middle; opacity: .85; }
.ramp-route__svg .seg--car { fill: var(--amber); }
.rball { opacity: 0; }
.ramp-route__svg.run .rball { opacity: 1; }
.ramp-route__txt { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px 40px; padding-top: 18px; border-top: 2px dashed rgba(255,255,255,.18); }
.ramp-route__text { font-weight: 600; color: #fff; }
.ramp-route__note { color: var(--mute); font-size: 15.5px; }

/* Leistungen: Stand-up-Targets */
.targets { margin-top: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.target { --c: var(--cherry); position: relative; display: grid; grid-template-columns: 62px 1fr; grid-template-rows: auto 1fr; column-gap: 20px; row-gap: 8px; padding: 26px 24px 28px; border-radius: 14px; background: rgba(4,8,26,.62); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08); outline-offset: 4px; transition: box-shadow .2s, transform .2s; }
.t2 { --c: var(--yel); } .t3 { --c: var(--cyan); } .t4 { --c: var(--green); } .t5 { --c: var(--amber); } .t6 { --c: var(--pink); }
.target__face { grid-row: 1 / 3; align-self: start; position: relative; width: 62px; height: 88px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%), linear-gradient(180deg, transparent 38%, #fff 38% 50%, transparent 50%), var(--c); box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 12px 0 -4px #9aa3b0, 0 14px 0 -4px #000; transition: transform .12s, box-shadow .2s, filter .2s; filter: saturate(.9) brightness(.92); }
.target__lamp { position: absolute; left: 24px; top: 128px; width: 62px; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--c) 35%, #000); box-shadow: inset 0 0 0 2px rgba(0,0,0,.5); transition: background .2s, box-shadow .2s; }
.target h3 { font: 400 clamp(18px, 1.5vw, 21px)/1.15 var(--disp); color: #fff; hyphens: auto; }
.target p { font-size: 15.5px; line-height: 1.55; color: var(--mute); }
.target:hover, .target:focus-visible { box-shadow: inset 0 0 0 2px var(--c), 0 0 30px color-mix(in srgb, var(--c) 30%, transparent); }
.target:hover .target__face, .target:focus-visible .target__face { transform: perspective(200px) rotateX(18deg) translateY(4px); filter: none; box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 8px 0 -4px #9aa3b0, 0 0 26px var(--c); }
.target:hover .target__lamp, .target:focus-visible .target__lamp { background: radial-gradient(ellipse, #fff 0 18%, var(--c) 70%); box-shadow: 0 0 18px var(--c); }

/* Ablauf: Rollover-Bahnen */
.lanes { margin-top: clamp(44px, 5vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lane { position: relative; display: grid; justify-items: center; align-content: start; gap: 12px; padding: 0 24px 10px; text-align: center; }
.lane::before { content: ''; position: absolute; top: 18px; left: -7px; width: 14px; height: 170px; border-radius: 7px; background: var(--chrome-h); box-shadow: 0 0 0 2px #000; }
.lane:first-child::before { display: none; }
.lane::after { content: ''; position: absolute; top: 4px; left: -13px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff6b85, var(--cherry) 60%, var(--cherry-d)); box-shadow: 0 0 0 2px #000; }
.lane:first-child::after { display: none; }
.lane__lamp { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font: 400 22px/1 var(--disp); color: #08131c; background: radial-gradient(circle at 50% 45%, #e6fbff 0 16%, var(--cyan) 60%, #0b6f8f 100%); box-shadow: 0 0 0 3px rgba(0,0,0,.6), 0 0 24px rgba(56,212,255,.6); margin-bottom: 6px; }
.lane h3 { font: 400 clamp(19px, 1.6vw, 23px)/1.1 var(--disp); color: #fff; }
.lane p { font-size: 15.5px; line-height: 1.55; color: var(--mute); max-width: 26ch; }

/* Über uns: Bullauge */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.porthole { position: relative; aspect-ratio: 1; border-radius: 50%; padding: 22px; background: var(--chrome); box-shadow: 0 0 0 4px #000, 0 0 0 16px var(--cherry), 0 0 0 19px #000, 0 0 60px rgba(227,23,62,.4); margin: 20px; }
.porthole img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 50%; box-shadow: inset 0 0 0 3px #000; }
.porthole::after { content: ''; position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.35), rgba(255,255,255,0) 40%); box-shadow: inset 0 0 0 3px #000; pointer-events: none; }
.about__txt { display: grid; gap: 22px; }
.about__txt h2 { font: 400 clamp(30px, 3.7vw, 54px)/1.06 var(--inl); color: #fff; text-shadow: 2px 2px 0 var(--cherry), 4px 4px 0 var(--cherry-d); }
.about__body { font-size: clamp(17px, 1.3vw, 19px); color: var(--mute); max-width: 56ch; }
.pills { display: flex; flex-wrap: wrap; gap: 12px; }
.pills li { --c: var(--green); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 26px; background: rgba(0,0,0,.4); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 60%, transparent); font-weight: 600; font-size: 15px; }
.pills li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, var(--c) 60%); box-shadow: 0 0 10px var(--c); }
.pills li:nth-child(2) { --c: var(--yel); } .pills li:nth-child(3) { --c: var(--cyan); } .pills li:nth-child(4) { --c: var(--cherry); }

/* Kontakt: Flipperfinger + Schürze */
.contact { padding-bottom: 0; }
.flipzone { position: relative; height: 290px; margin-top: 40px; }
.inlane { position: absolute; top: 0; width: 36%; height: 14px; border-radius: 7px; background: var(--chrome); box-shadow: 0 0 0 2px #000; }
.inlane--l { left: -2%; transform-origin: left center; transform: translateY(60px) rotate(18deg); }
.inlane--r { right: -2%; transform-origin: right center; transform: translateY(60px) rotate(-18deg); }
.flips--big { position: absolute; left: 0; right: 0; top: 104px; justify-content: center; gap: 22px 110px; }
.flips--big .flip { min-height: 66px; font-size: 15px; --rot: 14deg; }
.flips--big .flip--r { --rot: -14deg; }
.flips--big .flip:hover, .flips--big .flip:focus-visible { --rot: -8deg; }
.flips--big .flip--r:hover, .flips--big .flip--r:focus-visible { --rot: 8deg; }
.drain { position: absolute; left: 50%; bottom: 0; width: 120px; height: 26px; transform: translateX(-50%); border-radius: 60px 60px 0 0; background: radial-gradient(ellipse at 50% 100%, #000 55%, #1d1a26 75%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.1); }
.apron { display: grid; grid-template-columns: 1fr minmax(120px, 200px) 1fr; gap: 26px; align-items: stretch; padding: 34px 30px 46px; margin-inline: calc(clamp(30px, 4.4vw, 64px) * -1 + 16px); background: linear-gradient(180deg, #1b1825, #0e0c14); border-top: 6px solid #000; box-shadow: inset 0 3px 0 rgba(255,255,255,.1); border-radius: 60px 60px 0 0; }
.card { display: grid; align-content: start; gap: 6px; padding: 22px 24px 24px; background: var(--cream); color: #1a1218; border-radius: 6px; box-shadow: inset 0 0 0 3px var(--cherry), inset 0 0 0 5px var(--cream), inset 0 0 0 6px var(--cherry), 0 8px 18px rgba(0,0,0,.5); font-size: 16px; line-height: 1.5; }
.card__h { font: 400 13px/1.2 var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--cherry-d); }
.card__h--2 { margin-top: 14px; }
.card__big { font: 700 18px/1.35 var(--sans); }
.card a { color: #1a1218; text-decoration-color: var(--cherry); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.card a:hover { color: var(--cherry-d); }
.card :focus-visible { outline-color: var(--cherry-d); }
.apron__mid { display: grid; place-items: center; }
.apron__plate { display: grid; place-items: center; width: 100%; min-height: 80px; padding: 12px; border-radius: 10px; background: var(--chrome); color: #1a1a22; font: 400 18px/1 var(--disp); letter-spacing: .14em; box-shadow: 0 0 0 2px #000, inset 0 0 0 2px rgba(255,255,255,.6); }

/* ---------- Fuß: Münztür ---------- */
.foot { padding-block: 40px 70px; background: var(--cab); }
.door { display: grid; grid-template-columns: auto 1fr auto; gap: 28px 40px; align-items: center; padding: 28px 32px; border-radius: 14px; background: linear-gradient(180deg, #2b2834, #16141c); box-shadow: inset 0 0 0 2px #4a4655, inset 0 0 0 5px #0a090e, 0 20px 40px rgba(0,0,0,.6); }
.foot__logo { display: block; padding: 8px 10px; background: #fff; border-radius: 8px; box-shadow: inset 0 0 0 2px #c9cfd8; }
.foot__logo img { width: 84px; height: auto; aspect-ratio: 1510 / 1300; }
.coins { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.coin { display: grid; justify-items: center; gap: 10px; min-width: 104px; padding: 12px 12px 10px; border-radius: 8px; background: linear-gradient(180deg, #d6dbe2, #8d95a1); color: #111; text-decoration: none; font: 400 12.5px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .04em; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6), 0 0 0 2px #000; }
.coin__slot { width: 64px; height: 30px; border-radius: 4px; background: linear-gradient(90deg, transparent 46%, #000 46% 54%, transparent 54%), radial-gradient(ellipse at 50% 40%, #ff8a9f, var(--cherry) 60%, var(--cherry-d)); box-shadow: 0 0 0 2px #000, 0 0 14px rgba(227,23,62,.6); }
.coin:hover .coin__slot, .coin:focus-visible .coin__slot { background: linear-gradient(90deg, transparent 46%, #000 46% 54%, transparent 54%), radial-gradient(ellipse at 50% 40%, #fff7c2, var(--yel) 60%, #b88d00); box-shadow: 0 0 0 2px #000, 0 0 18px rgba(255,210,58,.8); }
.foot__addr { display: grid; gap: 2px; font-size: 15px; color: var(--mute); text-align: right; }
.foot__brand { font: 400 14px/1.3 var(--disp); color: #fff; margin-bottom: 4px; }
.foot__addr a { color: #fff; text-decoration-color: var(--yel); text-underline-offset: 3px; }
.foot__copy { margin-top: 22px; text-align: center; font-size: 14px; color: #a9adc4; }

/* ---------- Rechtsseiten ---------- */
.legal { padding-block: clamp(50px, 6vw, 90px) clamp(70px, 8vw, 110px); }
.legal .zone__head { margin-bottom: 36px; }
.legal__card { max-width: 860px; margin-inline: auto; padding: clamp(26px, 4vw, 56px); background: var(--cream); color: #1a1218; border-radius: 8px; box-shadow: inset 0 0 0 4px var(--cherry), inset 0 0 0 7px var(--cream), inset 0 0 0 8px var(--cherry), 0 18px 40px rgba(0,0,0,.55); }
.back-wrap { max-width: 860px; margin: 0 auto 34px; }
.back { display: inline-flex; align-items: center; min-height: 48px; padding: 8px 22px; border-radius: 26px; background: #14111b; border: 2px solid #c9cfd8; color: #fff; text-decoration: none; font: 400 13.5px/1 var(--disp); text-transform: uppercase; letter-spacing: .04em; }
.back:hover { border-color: var(--yel); color: var(--yel); }
.legal h1 { font: 400 clamp(28px, 3.8vw, 52px)/1.08 var(--inl); color: #fff; text-shadow: 2px 2px 0 var(--cherry), 4px 4px 0 var(--cherry-d); hyphens: auto; overflow-wrap: anywhere; }
.legal-body { max-width: 68ch; margin-inline: auto; font-size: 16.5px; line-height: 1.65; }
.legal-body h2 { font: 400 clamp(17px, 1.6vw, 21px)/1.25 var(--disp); color: var(--cherry-d); margin: 40px 0 12px; padding-top: 18px; border-top: 2px dashed rgba(141,12,36,.35); }
.legal-body h2:first-child, .legal-body .legal-note + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body p, .legal-body ul { margin: 0 0 14px; }
.legal-body li { position: relative; padding-left: 24px; margin-bottom: 6px; }
.legal-body li::before { content: ''; position: absolute; left: 2px; top: .5em; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ff8a9f, var(--cherry) 60%); }
.legal-body a { color: #1a1218; text-decoration-color: var(--cherry); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal-body a:hover { color: var(--cherry-d); }
.legal-body :focus-visible { outline-color: var(--cherry-d); }
.legal-body .legal-note { padding: 14px 18px; border-radius: 6px; background: #170700; color: #ffb066; font-weight: 500; margin-bottom: 32px; }
.legal-body .legal-note a { color: #ffd9a8; text-decoration-color: #ff8f1f; }
.legal-body .legal-address { padding: 14px 18px; border-left: 6px solid var(--cherry); background: rgba(227,23,62,.07); }

/* ---------- Responsiv ---------- */
@media (max-width: 1180px) {
  .ramp { padding: 10px 9px; font-size: 13px; gap: 7px; }
  .tel { font-size: 14px; }
  .speaker { grid-template-columns: minmax(0, 1fr) minmax(260px, 330px); }
  .grille { display: none; }
  .missions, .targets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .menu { display: inline-flex; }
  .top__in { min-height: 70px; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: #0e0c14; padding: 10px var(--pad) 24px; border-bottom: 4px solid #c9cfd8; box-shadow: 0 20px 40px rgba(0,0,0,.6); }
  .top.open .nav { display: flex; }
  .ramps { flex-direction: column; gap: 2px; }
  .ramp { padding: 14px 10px; font-size: 16px; }
  .ramp .ins { opacity: 1; filter: drop-shadow(0 0 6px var(--c)); }
  .nav__end { justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,.15); }
  .tel { font-size: 16px; }
  .about { grid-template-columns: 1fr; }
  .porthole { max-width: 380px; margin-inline: auto; }
  .lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .lane:nth-child(3)::before, .lane:nth-child(3)::after { display: none; }
  .bumper--1 { left: calc(22% - 95px); } .bumper--2 { left: calc(78% - 95px); }
}
@media (max-width: 760px) {
  .speaker { grid-template-columns: 1fr; padding: 22px 18px; }
  .glass { min-height: 0; }
  .glass__in { padding: 44px 26px 86px; }
  .art__palm--l { width: 110px; left: -20px; } .art__palm--r { width: 90px; right: -16px; }
  .art__jet { right: 6%; top: 6%; width: 70px; }
  .art__sun { width: 90%; bottom: -36%; }
  .missions, .targets { grid-template-columns: 1fr; }
  .bumpfield { height: auto; border-radius: 120px 120px 20px 20px / 80px 80px 20px 20px; padding: 56px 16px 40px; }
  .bumpers { position: static; display: grid; gap: 34px; justify-items: center; }
  .bumper { position: static; }
  .sling { display: none; }
  .js .launch { display: none; }
  .ramp-route__txt { grid-template-columns: 1fr; }
  .ramp-route__svg .stop text { font-size: 26px; }
  .ramp-route__svg .seg { font-size: 22px; }
  .lanes { grid-template-columns: 1fr; }
  .lane::before, .lane::after { display: none; }
  .lane { padding-inline: 0; }
  .flipzone { height: auto; padding-top: 10px; }
  .inlane, .drain { display: none; }
  .flips--big { position: static; flex-direction: column; gap: 30px; }
  .flips--big .flip, .flips--big .flip--r { --rot: 0deg; }
  .apron { grid-template-columns: 1fr; border-radius: 30px 30px 0 0; padding: 26px 18px 36px; margin-top: 40px; }
  .apron__mid { display: none; }
  .door { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 26px 18px; }
  .foot__addr { text-align: center; }
  .coin { min-width: 0; flex: 1 1 40%; }
  .pf { padding-inline: 26px; width: calc(100% - 16px); }
  .apron { margin-inline: -10px; }
  .rail { width: 10px; }
}
@media (max-width: 420px) {
  .backbox h1 { font-size: 27px; }
  .kicker { font-size: 11px; padding: 8px 12px; gap: 8px; }
  .flip { font-size: 13px; padding-left: 48px; }
  .flip--r { padding-left: 24px; padding-right: 48px; }
}