@font-face { font-family: "Perchta"; src: url(fonts/grenze-gotisch-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Perchta"; src: url(fonts/grenze-gotisch-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }
:root {
  --bg: #0b0807;
  --text: #f3ead6;
  --bone: #e8dcc4;
  --muted: #b8a68a;
  --ember: #ff6a1a;
  --fire: #ffb347;
  --blood: #c0262d;
  --brass: #d9a441;
  --gold: #f2c94c;
  --silver: #dfe3e6;
  --bronze: #cd7f45;
  --line: #e8dcc41f;
  --gothic: "Perchta", "Old English Text MT", Georgia, serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { font-size: min(1.25vw, 2.2vh); }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background: linear-gradient(180deg, #05070d 0%, #0b0b12 45%, #1a0d07 100%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Ubuntu, sans-serif;
  cursor: default; user-select: none;
}
[hidden] { display: none !important; }

/* ---------- Nacht in den Bergen ---------- */
.sky { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.stars span { position: absolute; border-radius: 50%; background: #fff8e6; animation: twinkle var(--d, 3s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes twinkle { 50% { opacity: .15; } }
.moon {
  position: absolute; right: 22vw; top: 4vh; width: 10vh; height: 10vh; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fffaf0, #efe4c8 55%, #cbbd9b 85%);
  box-shadow: 0 0 5vh 1vh #efe4c833, 0 0 18vh 6vh #8fa4c522;
}
.moon::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 58%, #a8977244 0 10%, transparent 11%), radial-gradient(circle at 40% 70%, #a8977233 0 7%, transparent 8%), radial-gradient(circle at 70% 30%, #a8977233 0 6%, transparent 7%); }
.mountains { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 42vh; }
.fog { position: absolute; left: -20%; right: -20%; height: 26vh; bottom: 6vh; background: radial-gradient(40% 60% at 30% 70%, #c9d3e01a, transparent 70%), radial-gradient(35% 50% at 75% 80%, #c9d3e012, transparent 70%); filter: blur(1.2vh); animation: fog 50s linear infinite alternate; }
.fog.f2 { bottom: 2vh; animation-duration: 70s; animation-direction: alternate-reverse; opacity: .7; }
@keyframes fog { to { transform: translateX(12%); } }
.glow { position: absolute; bottom: -18vh; width: 70vh; height: 60vh; border-radius: 50%; background: radial-gradient(closest-side, #ff6a1a55, #ff6a1a18 55%, transparent); animation: flicker 2.6s ease-in-out infinite alternate; }
.glow.gl { left: -22vh; } .glow.gr { right: -22vh; animation-delay: -1.3s; }
@keyframes flicker { 0% { opacity: .75; transform: scale(1); } 40% { opacity: 1; } 70% { opacity: .82; transform: scale(1.04); } 100% { opacity: .95; } }

/* Fackeln */
.torch { position: absolute; bottom: 0; width: 1.4vh; height: 22vh; background: linear-gradient(90deg, #2a1a10, #5a3a22, #2a1a10); border-radius: .3vh; }
.torch.tl { left: 2.2vw; } .torch.tr { right: 2.2vw; }
.torch::before { content: ""; position: absolute; left: -1vh; right: -1vh; top: -1.2vh; height: 2.4vh; background: linear-gradient(#3a2414, #1c120b); border-radius: .4vh; }
.torch i { position: absolute; left: 50%; bottom: 100%; width: 5vh; height: 9vh; margin-left: -2.5vh; margin-bottom: 1vh; border-radius: 50% 50% 35% 35% / 65% 65% 35% 35%; transform-origin: 50% 90%; filter: blur(.25vh); mix-blend-mode: screen; }
.torch i:nth-child(1) { background: radial-gradient(ellipse at 50% 80%, #ff3d0a, #ff6a1a 40%, transparent 70%); animation: flame 0.9s ease-in-out infinite alternate; }
.torch i:nth-child(2) { width: 3.4vh; margin-left: -1.7vh; height: 7vh; background: radial-gradient(ellipse at 50% 85%, #ffd27a, #ffb347 45%, transparent 72%); animation: flame 0.7s ease-in-out infinite alternate-reverse; }
.torch i:nth-child(3) { width: 1.8vh; margin-left: -.9vh; height: 4vh; background: radial-gradient(ellipse at 50% 85%, #fffbe8, #fff1b8 50%, transparent 75%); animation: flame 0.5s ease-in-out infinite alternate; }
@keyframes flame { 0% { transform: scale(1, 1) skewX(-3deg); } 50% { transform: scale(.92, 1.1) skewX(4deg); } 100% { transform: scale(1.05, .95) skewX(-2deg); } }

/* Funken */
.embers span { position: absolute; bottom: -2vh; width: var(--s); height: var(--s); border-radius: 50%; background: #ffc46b; box-shadow: 0 0 .6vh .2vh #ff6a1a, 0 0 1.4vh .4vh #ff6a1a66; animation: ember var(--t) linear infinite; animation-delay: var(--dl); opacity: 0; }
@keyframes ember {
  0% { transform: translate(0, 0); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(var(--dx), -45vh); }
  80% { opacity: .7; }
  100% { transform: translate(calc(var(--dx) * -0.6), -95vh); opacity: 0; }
}

.witch-fly { position: fixed; top: 8vh; left: 0; width: 15vh; height: 6.5vh; fill: #050304; opacity: .92; animation: fly 50s linear infinite; pointer-events: none; z-index: 1; }
.witch-fly svg { width: 100%; height: 100%; filter: drop-shadow(0 0 .5vh #efe4c855); }
@keyframes fly { 0% { transform: translate(-25vw, 8vh) rotate(-4deg); } 22% { transform: translate(110vw, -2vh) rotate(2deg); } 100% { transform: translate(110vw, -2vh); } }

/* ---------- Grundlayout ---------- */
.screen { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; padding: 1.3rem 2rem 1.2rem; gap: 1rem; }
.d-head { display: flex; align-items: center; justify-content: space-between; }
.d-brand { display: flex; align-items: center; gap: 1rem; }
.d-brand .logo { width: 4.6rem; height: 5.75rem; filter: drop-shadow(0 0 1.2rem #ff6a1a66); }
.d-brand .logo .eye, .wbig .eye { animation: eyes 3s ease-in-out infinite; }
@keyframes eyes { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 50% { opacity: .2; } 53% { opacity: 1; } }
.d-brand h1 {
  margin: 0; font-family: var(--gothic); font-size: 3.4rem; font-weight: 900; letter-spacing: .01em; line-height: .95;
  background: linear-gradient(180deg, #fff3d6 10%, #ffb347 55%, #ff5a0a 95%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .15rem 0 #2a0e05) drop-shadow(0 0 1.2rem #ff6a1a55);
}
.d-brand p { margin: .3rem 0 0; color: var(--muted); font-size: 1.05rem; letter-spacing: .35em; text-transform: uppercase; }
.d-brand .hdr-bobby { width: 6rem; height: 3.6rem; color: #d7261e; align-self: flex-end; margin-left: .4rem; filter: drop-shadow(0 .3rem .4rem #000a); }
.d-right { display: flex; align-items: center; gap: 1.2rem; }
.wall { font-size: 2rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.d-conn { color: #ffb3a8; font-size: 1rem; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }

.ticker { overflow: hidden; background: linear-gradient(90deg, #7a1410, #c0262d 30%, #ff6a1a); color: #fff3d6; border-radius: .6rem; font-size: 1.9rem; font-weight: 800; padding: .5rem 0; white-space: nowrap; box-shadow: 0 0 2rem #c0262d66; border: 1px solid #ffb34766; }
.ticker span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* dunkle Holz-/Fell-Paneele */
.live-head, .lrow, .rk, .tile, .nextbar {
  background: linear-gradient(180deg, #1d1410e6, #0f0a08e6);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 #e8dcc41a, inset 0 -2px 0 #00000066, 0 .8rem 2rem #0008;
}

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.view > * { flex: 1; min-height: 0; }
.enter .stagger > * { animation: rowIn .55s cubic-bezier(.2, .9, .3, 1.2) backwards; }
.enter .stagger > *:nth-child(1) { animation-delay: .05s; } .enter .stagger > *:nth-child(2) { animation-delay: .1s; }
.enter .stagger > *:nth-child(3) { animation-delay: .15s; } .enter .stagger > *:nth-child(4) { animation-delay: .2s; }
.enter .stagger > *:nth-child(5) { animation-delay: .25s; } .enter .stagger > *:nth-child(6) { animation-delay: .3s; }
.enter .stagger > *:nth-child(7) { animation-delay: .35s; } .enter .stagger > *:nth-child(8) { animation-delay: .4s; }
.enter .stagger > *:nth-child(9) { animation-delay: .45s; } .enter .stagger > *:nth-child(n+10) { animation-delay: .5s; }
@keyframes rowIn { from { opacity: 0; transform: translateX(-3rem) scale(.98); } }
.enter .fade { animation: fadeIn .6s backwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(1rem); } }

.v-title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; font-family: var(--gothic); font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--bone); text-shadow: 0 .15rem 0 #000, 0 0 1.5rem #ff6a1a44; }
.v-title svg { width: 2.4rem; height: 2.4rem; flex: none; }
.cat-chip { font-family: "Segoe UI", system-ui, sans-serif; font-size: 1.5rem; font-weight: 800; padding: .3rem 1.1rem; border-radius: .4rem; background: linear-gradient(180deg, #ff8a3a, #c2410c); color: #1b0700; text-shadow: none; box-shadow: inset 0 1px 0 #ffd3a8; }
.cat-chip.all { background: linear-gradient(180deg, #efe4c8, #b9ab90); }

/* ---------- Live ---------- */
.v-live { display: flex; flex-direction: column; gap: 1rem; }
.live-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-radius: 1rem; padding: .5rem 2rem; border-top: 2px solid #ff6a1a55; }
.live-label { font-family: var(--gothic); font-size: 2.6rem; font-weight: 900; line-height: 1; }
.live-label small { display: block; font-family: "Segoe UI", system-ui, sans-serif; font-size: 1.05rem; color: var(--muted); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-top: .4rem; }
.bigclock { font-size: 8.5rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.03em; color: var(--bone); text-shadow: 0 .2rem 0 #000, 0 0 2rem #ff6a1a55; }
.bigclock.running { color: #fff1d0; text-shadow: 0 0 1rem #ffb347, 0 0 3rem #ff6a1a; }
.live-state { justify-self: end; font-size: 1.5rem; font-weight: 900; letter-spacing: .15em; padding: .5rem 1.4rem; border-radius: .4rem; background: #e8dcc414; color: var(--muted); }
.live-state.running { background: linear-gradient(180deg, #ff8a3a, #d4430c); color: #1b0700; animation: pulse 1s infinite; }
.live-state.finished { background: linear-gradient(180deg, #ffe08a, #c99a2e); color: #2a1a00; }
.live-state.ready { background: linear-gradient(180deg, #efe4c8, #b9ab90); color: #1b120a; }
@keyframes pulse { 50% { box-shadow: 0 0 2.5rem #ff6a1a; } }

.rows { flex: 1; min-height: 0; display: grid; grid-template-rows: repeat(var(--n), minmax(0, 1fr)); gap: .8rem; font-size: calc(1rem * min(1, 4.5 / var(--n))); }
.lrow {
  position: relative; display: grid; grid-template-columns: 6em minmax(0, 1fr) auto 14em 5.5em; align-items: center; gap: 1.4em;
  max-height: 11rem; padding: 0 1.6em 0 0; border-radius: .9em; overflow: hidden; transition: background .4s, transform .4s;
}
.lrow::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 20%, transparent), transparent 45%); }
.lrow .r-lane { align-self: stretch; display: grid; place-items: center; font-family: var(--gothic); font-size: 4.4em; font-weight: 900; background: linear-gradient(180deg, color-mix(in srgb, var(--c), #fff 15%), color-mix(in srgb, var(--c) 70%, #000)); color: #140c08; text-shadow: 0 1px 0 #fff6; box-shadow: inset -3px 0 0 #0005; }
.lrow .r-who { position: relative; z-index: 1; min-width: 0; display: flex; align-items: center; gap: 1em; }
.lrow .r-txt { min-width: 0; }
.lrow .r-car { flex: none; width: 5.4em; height: 3.25em; color: var(--c); filter: drop-shadow(0 .25em .3em #000a); transition: transform .4s; }
.lrow .r-car.dnf { transform: rotate(-26deg) translateY(.4em); opacity: .8; }
.lrow .r-name { font-family: var(--gothic); font-size: 3.6em; font-weight: 700; line-height: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); }
.lrow .r-cat { font-size: 1.3em; color: var(--muted); margin-top: .25em; }
.lrow .r-pen { font-size: 1.6em; font-weight: 800; color: var(--fire); white-space: nowrap; position: relative; z-index: 1; }
.lrow .r-time { font-size: 4.4em; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em; position: relative; z-index: 1; }
.lrow .r-time.tick { color: #ffd9a0; opacity: .9; }
.lrow .r-place { justify-self: center; width: 2.2em; height: 2.2em; border-radius: 50%; display: grid; place-items: center; font-size: 2.2em; font-weight: 900; background: #e8dcc414; color: var(--muted); position: relative; z-index: 1; }
.lrow.done { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 26%, #1d1410), #120c09 70%); }
.lrow.p1 .r-place, .rk.p1 .medal { background: radial-gradient(circle at 35% 30%, #fff1b0, var(--gold) 50%, #9a7414); color: #2a1a00; box-shadow: 0 0 2em #f2c94c88; }
.lrow.p2 .r-place, .rk.p2 .medal { background: radial-gradient(circle at 35% 30%, #fff, var(--silver) 50%, #8a9298); color: #222; }
.lrow.p3 .r-place, .rk.p3 .medal { background: radial-gradient(circle at 35% 30%, #ffd2a8, var(--bronze) 50%, #7a3f16); color: #2a1300; }
.lrow.p1 { border-color: #f2c94c99; box-shadow: 0 0 2.4em #f2c94c33, inset 0 1px 0 #f2c94c55; }
.lrow.dnf { filter: grayscale(.8); opacity: .6; }
.lrow.dnf .r-time { font-size: 3em; color: #ff8a7a; }
.lrow.flash { animation: flash 1.1s ease-out; }
@keyframes flash { 0% { transform: scale(1.03); box-shadow: 0 0 0 .3em var(--c), 0 0 5em #ff6a1a; } 100% { transform: none; } }
.lrow.waiting .r-time { color: var(--muted); font-size: 3em; font-family: var(--gothic); font-weight: 700; }

/* ---------- Rangliste ---------- */
.v-rank { display: flex; flex-direction: column; }
.rank-list { flex: 1; min-height: 0; display: grid; grid-auto-rows: minmax(0, 5.1rem); gap: .6rem; align-content: start; }
.rank-list.two { grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows: repeat(10, minmax(0, 4.6rem)); column-gap: 1.2rem; }
.rk { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr) auto auto; align-items: center; gap: 1.2rem; padding: 0 1.6rem 0 .6rem; border-radius: .8rem; }
.rk .medal { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 1.7rem; background: #e8dcc414; color: var(--muted); }
.rk.p1 { background: linear-gradient(90deg, #f2c94c2e, #120c09e6 60%); border-color: #f2c94c88; }
.rk.p2 { background: linear-gradient(90deg, #dfe3e622, #120c09e6 60%); }
.rk.p3 { background: linear-gradient(90deg, #cd7f4526, #120c09e6 60%); }
.rk .nm { font-family: var(--gothic); font-size: 2.7rem; font-weight: 700; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--bone); }
.rk .nm small { font-family: "Segoe UI", system-ui, sans-serif; font-size: 1.1rem; color: var(--muted); font-weight: 600; margin-left: .8rem; }
.rk .meta { color: var(--muted); font-size: 1.2rem; text-align: right; white-space: nowrap; }
.rk .tm { font-size: 2.6rem; font-weight: 900; font-variant-numeric: tabular-nums; min-width: 8.5rem; text-align: right; }
.rk.fresh { animation: fresh 2s ease-out 2; }
@keyframes fresh { 0% { box-shadow: 0 0 0 .3rem var(--ember), 0 0 3rem var(--ember); } }
.two .rk .nm { font-size: 2.2rem; } .two .rk .tm { font-size: 2.2rem; }
.more { color: var(--muted); font-size: 1.3rem; margin-top: .6rem; }

/* ---------- Podium ---------- */
.v-podium, .v-ceremony { display: flex; flex-direction: column; }
.podium { flex: 1; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 2rem; padding: 0 6rem; }
.pod { display: flex; flex-direction: column; align-items: center; gap: .8rem; }
.pod .who { text-align: center; min-height: 8rem; display: flex; flex-direction: column; justify-content: flex-end; }
.pod .who b { display: block; font-family: var(--gothic); font-size: 3.6rem; font-weight: 900; line-height: 1; color: var(--bone); }
.pod .who span { font-size: 2.2rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: .3rem; }
.pod .block { width: 100%; border-radius: .6rem .6rem 0 0; display: grid; place-items: center; font-family: var(--gothic); font-size: 7rem; font-weight: 900; color: #140c08; box-shadow: inset 0 0 3rem #0006, inset 0 2px 0 #fff6; }
.pod.p1 .block { height: 34vh; background: repeating-linear-gradient(90deg, #0000 0 2.4rem, #0001 2.4rem 2.6rem), linear-gradient(180deg, #ffe08a, #b88a1c); box-shadow: 0 0 5rem #f2c94c66, inset 0 2px 0 #fff8; }
.pod.p2 .block { height: 24vh; background: repeating-linear-gradient(90deg, #0000 0 2.4rem, #0001 2.4rem 2.6rem), linear-gradient(180deg, #f4f6f7, #9aa3a9); }
.pod.p3 .block { height: 17vh; background: repeating-linear-gradient(90deg, #0000 0 2.4rem, #0001 2.4rem 2.6rem), linear-gradient(180deg, #e9a874, #8e4d1e); }
.pod.p1 .who b { font-size: 4.6rem; color: #fff1c4; text-shadow: 0 0 2rem #f2c94c99; }
.pod.hidden .who b, .pod.hidden .who span { visibility: hidden; }
.pod.hidden .who::after { content: "?"; font-family: var(--gothic); font-size: 7rem; font-weight: 900; color: #e8dcc433; }
.pod.reveal .who { animation: reveal 1s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.pod.reveal .block { animation: grow .8s ease-out backwards; }
@keyframes reveal { from { opacity: 0; transform: scale(.4) translateY(4rem); } }
@keyframes grow { from { transform: scaleY(.2); transform-origin: bottom; } }
.drumroll .pod.next .who::after { animation: shake .08s infinite; display: inline-block; }
@keyframes shake { 50% { transform: translateX(.3rem) rotate(4deg); } }

/* ---------- Statistik ---------- */
.v-stats { display: flex; flex-direction: column; }
.tiles { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(0, 1fr); gap: 1.2rem; }
.tile { border-radius: .9rem; padding: 1.4rem 1.6rem; display: flex; flex-direction: column; justify-content: center; min-height: 0; overflow: hidden; }
.tile .lbl { font-size: 1.15rem; color: var(--muted); text-transform: uppercase; letter-spacing: .16em; font-weight: 700; }
.tile .big { font-size: 4.2rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile .big .name { font-family: var(--gothic); }
.tile .sub { font-size: 1.6rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.hl { background: linear-gradient(160deg, #ff6a1a33, #120c09e6 60%); border-color: #ff6a1a66; }
.tile.hl .big { color: var(--fire); text-shadow: 0 0 1.5rem #ff6a1a88; }
.tile ul { list-style: none; padding: 0; margin: .5rem 0 0; font-size: 1.5rem; }
.tile li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.tile li b { font-variant-numeric: tabular-nums; }
.tile .best-list { font-size: 2.2rem; }
.tile .best-list li { align-items: flex-end; padding: .35rem 0; }
.tile .best-list li > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .best-list small { display: block; font-size: 1.1rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.tile .best-list .name { font-family: var(--gothic); font-weight: 700; color: var(--fire); }
.tile .best-list b { color: #fff; }

/* ---------- Splash ---------- */
.v-splash { display: grid; place-items: center; text-align: center; }
.v-splash .stage { position: relative; display: inline-block; }
.v-splash { position: relative; padding-bottom: 9rem; }
.bobby-lane { position: absolute; left: 0; right: 0; bottom: 0; height: 10rem; pointer-events: none; overflow: hidden; }
.splash-bobby { position: absolute; left: 0; bottom: 0; width: 11rem; height: 10rem; color: #d7261e; filter: drop-shadow(0 .4rem .5rem #000a); animation: patrol 16s linear infinite; }
@keyframes patrol {
  0% { transform: translateX(-12rem); }
  46% { transform: translateX(calc(100vw - 2rem)); }
  50% { transform: translateX(calc(100vw - 2rem)) scaleX(-1); }
  96% { transform: translateX(-12rem) scaleX(-1); }
  100% { transform: translateX(-12rem); }
}
.v-splash .wbig { width: 14rem; height: 17.5rem; filter: drop-shadow(0 0 2rem #ff6a1a88); animation: bob 4s ease-in-out infinite; }
.v-splash .sb { position: absolute; top: 4rem; width: 6rem; height: 6rem; transform-origin: 50% 8%; animation: swing 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 1rem #d9a44188); }
.v-splash .sb.l { left: -12rem; } .v-splash .sb.r { right: -12rem; animation-delay: -.7s; }
@keyframes swing { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes bob { 50% { transform: translateY(-1rem); } }
.v-splash h2 { font-family: var(--gothic); font-size: 6rem; margin: 1rem 0 .4rem; font-weight: 900; line-height: 1; background: linear-gradient(180deg, #fff3d6 10%, #ffb347 55%, #ff5a0a 95%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 .2rem 0 #2a0e05); }
.v-splash p { font-size: 2rem; color: var(--muted); margin: 0; }

/* ---------- Footer ---------- */
.d-foot { min-height: 0; }
.d-foot:empty { display: none; }
.nextbar { display: flex; align-items: center; gap: 1rem; border-radius: .8rem; padding: .6rem 1.2rem; font-size: 1.5rem; flex-wrap: wrap; border-color: #ff6a1a55; }
.nextbar .lbl { font-family: var(--gothic); font-size: 2.1rem; font-weight: 900; color: var(--fire); animation: blink 1.6s infinite; }
.chip { display: inline-flex; align-items: center; gap: .5rem; padding: .2rem .9rem .2rem .25rem; border-radius: 99px; background: #e8dcc414; font-weight: 700; }
.chip i { width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 1rem; background: var(--c); color: #140c08; }

/* ---------- QR ---------- */
.qr { position: fixed; right: 2rem; bottom: 1.4rem; z-index: 5; background: var(--bone); border-radius: .6rem; padding: .6rem .6rem .3rem; text-align: center; box-shadow: 0 0 2rem #ff6a1a55; border: .2rem solid #5a3a22; }
.qr #qrCode svg { width: 7.5rem; height: 7.5rem; display: block; }
.qr span { display: block; color: #3a2414; font-weight: 800; font-size: .9rem; margin-top: .2rem; }
body.has-qr .d-foot { margin-right: 10rem; }

/* ---------- Effekte ---------- */
.overlay { position: fixed; inset: 0; z-index: 20; pointer-events: none; display: grid; place-items: center; }
.overlay > * { grid-area: 1 / 1; }
.los { font-family: var(--gothic); font-size: 24rem; font-weight: 900; line-height: 1; padding: 0 2rem; background: linear-gradient(180deg, #fffbe8 10%, #ffb347 50%, #ff3d0a 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 3rem #ff6a1a) drop-shadow(0 .4rem 0 #3a1004); animation: los 1.3s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.los.bad { background-image: linear-gradient(180deg, #ffd6d0, #c0262d 60%, #5a0a0a); font-size: 14rem; filter: drop-shadow(0 0 3rem #c0262d) drop-shadow(0 .3rem 0 #000); }
@keyframes los { 0% { transform: scale(.2); opacity: 0; } 25% { transform: scale(1.1); opacity: 1; } 70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.best {
  background: linear-gradient(180deg, #2a1a10f5, #120a07f5); border: .3rem solid var(--gold); border-radius: 1.2rem; padding: 2.4rem 4rem; text-align: center;
  box-shadow: 0 0 6rem #ff6a1a88, inset 0 0 3rem #ff6a1a33; animation: bestIn .7s cubic-bezier(.2, 1.4, .4, 1) backwards, bestOut .5s ease-in 5.5s forwards;
}
.best h2 { margin: 0; font-family: var(--gothic); font-size: 6.4rem; font-weight: 900; line-height: 1; color: var(--gold); text-shadow: 0 0 2rem #ff6a1a, 0 .2rem 0 #000; }
.best .who { font-family: var(--gothic); font-size: 5rem; font-weight: 900; margin-top: .8rem; color: var(--bone); }
.best .tm { font-size: 6rem; font-weight: 900; font-variant-numeric: tabular-nums; color: #fff; text-shadow: 0 0 2rem #ffb347; }
.best .ct { font-size: 1.8rem; color: var(--muted); }
@keyframes bestIn { from { transform: scale(.3) rotate(-6deg); opacity: 0; } }
@keyframes bestOut { to { transform: scale(.8); opacity: 0; } }
.bigwitch { position: fixed; top: 30vh; left: 0; width: 50vh; height: 22vh; fill: #050304; filter: drop-shadow(0 0 2rem #ff6a1a); animation: bigfly 3.4s ease-in forwards; z-index: 21; }
@keyframes bigfly { from { transform: translate(-60vh, 10vh) rotate(-8deg); } to { transform: translate(120vw, -25vh) rotate(6deg); } }
.bigmask { width: 66vh; height: 82vh; filter: drop-shadow(0 0 4rem #ff3d0a); animation: maskIn 1.8s ease-out forwards; }
@keyframes maskIn { 0% { transform: scale(.3) translateY(30vh); opacity: 0; } 25% { transform: scale(1.05); opacity: 1; } 35% { transform: scale(1) rotate(-2deg); } 45% { transform: rotate(2deg); } 55% { transform: rotate(-1deg); } 75% { opacity: 1; transform: scale(1.02); } 100% { opacity: 0; transform: scale(1.3); } }
.quake .screen { animation: quake .5s linear 2; }
@keyframes quake { 0%, 100% { transform: none; } 20% { transform: translate(-.4rem, .2rem); } 40% { transform: translate(.4rem, -.2rem); } 60% { transform: translate(-.3rem, -.3rem); } 80% { transform: translate(.3rem, .3rem); } }
.bellfx { display: flex; gap: 30vw; animation: fadeOut 2.8s forwards; }
.bellfx svg { width: 22vh; height: 22vh; transform-origin: 50% 8%; animation: ring .25s ease-in-out infinite alternate; filter: drop-shadow(0 0 2rem #d9a441); }
.bellfx svg:last-child { animation-delay: -.12s; }
@keyframes ring { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes fadeOut { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Besen fegt über den Boden und fliegt davon */
.broomfx { position: fixed; left: 0; bottom: 8vh; width: 64vh; height: 22vh; z-index: 21; pointer-events: none; transform-origin: 85% 55%; animation: sweep 3s cubic-bezier(.45, .05, .55, .95) forwards; filter: drop-shadow(0 1rem 1.5rem #000a); }
/* um ~150° gedreht: Borsten unten links am Boden, Stiel zeigt schräg nach oben rechts */
.broomfx svg { width: 100%; height: 100%; transform-origin: 85% 50%; animation: brush .42s ease-in-out 4 alternate; }
@keyframes brush { from { transform: rotate(-7deg); } to { transform: rotate(8deg) translateY(1vh); } }
@keyframes sweep {
  0% { transform: translate(95vw, 0) rotate(148deg); }
  60% { transform: translate(-10vw, 0) rotate(148deg); }
  75% { transform: translate(-14vw, -12vh) rotate(110deg); }
  100% { transform: translate(-18vw, -120vh) rotate(92deg); }
}
.bobbyfx { position: fixed; left: 0; bottom: 3vh; width: 40vh; height: 36vh; z-index: 21; pointer-events: none; color: #d7261e; animation: dash 3.2s cubic-bezier(.3, .1, .6, 1) forwards; filter: drop-shadow(0 1rem 1rem #000a); }
.bobbyfx svg { width: 100%; height: 100%; animation: wheelie 3.2s ease-in-out forwards; transform-origin: 30% 95%; }
.bobbyfx::before { content: ""; position: absolute; right: 88%; top: 48%; width: 34vh; height: 42%; background: repeating-linear-gradient(180deg, #e8dcc466 0 .35vh, transparent .35vh 2.4vh); -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
@keyframes dash { from { transform: translateX(-45vh); } to { transform: translateX(calc(100vw + 10vh)); } }
@keyframes wheelie { 0%, 30% { transform: none; } 42% { transform: rotate(-9deg); } 56% { transform: rotate(-9deg); } 64%, 100% { transform: none; } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 22; pointer-events: none; }
.tap { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 30; font: inherit; font-size: 1.2rem; font-weight: 700; background: linear-gradient(180deg, #ff8a3a, #c2410c); color: #1b0700; border: 0; border-radius: .5rem; padding: .7rem 1.4rem; cursor: pointer; box-shadow: 0 0 2rem #ff6a1a; }

/* ---------- Handy / Hochformat ---------- */
@media (max-aspect-ratio: 1/1) {
  html { font-size: 2.4vw; }
  html, body { height: auto; overflow: auto; }
  .screen { min-height: 100vh; height: auto; padding: 1rem; }
  .d-brand h1 { font-size: 3.6rem; }
  .wall, .witch-fly, .moon, .torch, .hdr-bobby { display: none; }
  .lrow .r-car { width: 4em; height: 2.4em; }
  .mountains { height: 30vh; }
  .live-head { grid-template-columns: 1fr; text-align: center; gap: .4rem; padding: 1rem; }
  .live-state { justify-self: center; }
  .bigclock { font-size: 9rem; }
  .rows { display: flex; flex-direction: column; font-size: .85rem; }
  .lrow { min-height: 7rem; grid-template-columns: 4.4em minmax(0, 1fr) auto 3.6em; }
  .lrow .r-pen { display: none; }
  .lrow .r-time { font-size: 3.6em; }
  .rank-list, .rank-list.two { display: flex; flex-direction: column; }
  .rk { min-height: 5rem; }
  .rk .meta { display: none; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .tile .big { font-size: 3.4rem; }
  .podium { padding: 0; gap: .8rem; min-height: 60vh; }
  .pod .who b { font-size: 2.4rem; } .pod.p1 .who b { font-size: 2.8rem; }
  .los { font-size: 12rem; }
  .best { padding: 2rem; margin: 1rem; }
  .best h2 { font-size: 4rem; }
  .v-splash .sb.l { left: -7rem; } .v-splash .sb.r { right: -7rem; }
}