/* ADVANGERS, V2 amped styles. Overrides + new sections */

/* ====== HERO V2 ====== */
.hero { min-height: 100vh; padding: 180px 0 80px; position: relative; overflow: hidden; display: flex; align-items: center; }

.hero-bg-clean { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: var(--bg); }
.hbc-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 30%, rgba(255,31,182,0.18), transparent 60%),
    radial-gradient(ellipse 40% 50% at 80% 70%, rgba(91,216,255,0.10), transparent 60%),
    radial-gradient(ellipse 30% 30% at 60% 20%, rgba(47,125,255,0.10), transparent 60%);
  filter: blur(40px);
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  from { transform: translate(0,0) scale(1); }
  to { transform: translate(3%, -2%) scale(1.05); }
}
.hbc-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
}
.hbc-noise {
  position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.hero-vword {
  position: absolute; right: -20px; top: 0; bottom: 0;
  writing-mode: vertical-rl;
  font-family: var(--display); font-weight: 700;
  font-size: 14vh; letter-spacing: -0.04em; line-height: 1;
  color: rgba(255,255,255,0.025);
  pointer-events: none; user-select: none;
  white-space: nowrap;
  animation: vword-scroll 30s linear infinite;
}
@keyframes vword-scroll {
  from { transform: translateY(0); } to { transform: translateY(-50%); }
}

.hero-content { position: relative; z-index: 5; width: 100%; }

/* Adventure Ranger Maskottchen-Statue im Hero */
.hero-mascot {
  position: absolute;
  bottom: 0;
  /* Die Statue steht jetzt MITTIG hinter dem Buchen-Knopf, nicht mehr am rechten
     Rand: sie ist der "Turm" der Komposition. Der Inhalt liegt mit z-index 5
     davor, die Ranger-Truppe mit z-index 2 dahinter. */
  left: 50%;
  transform: translateX(-50%);
  /* Ohne diese Zeile wird die Statue auf schmalen Displays verzerrt: ein absolut
     positionierter Kasten mit `left: 50%` darf hoechstens so breit werden wie der
     Rest rechts davon - auf 390px also 195px. Das Bild darin hat `height: 100%`,
     wurde also in die Laenge gezogen (gemessen: Verhaeltnis 0.222 statt 0.630,
     fast dreifach gestreckt). `max-content` hebt diese Deckelung auf. */
  width: max-content;
  /* Hoehe so bemessen, dass der KOPF in der Luecke der geteilten Ortszeile
     steht und nicht hinter "JEDEM WETTER." verschwindet. Gemessen: die Zeile
     endet bei 566px, die Statue beginnt jetzt darunter. Vorher 62vh - da lag
     der Kopf komplett hinter der Zeile und war nie zu sehen.
     Eine Ausblendung nach oben braucht es dadurch nicht mehr: es ueberlappt
     nichts, was ausgeblendet werden muesste. */
  /* Nachgemessen: mit 62vh/620px begann die Statue bei 413px, waehrend die
     Zeile "ACTION BEI" erst bei 496px endete — der Kopf ragte also eine Zeile
     zu hoch. Seit die Klammerzeile ueber der Headline steht, sitzt die
     Headline tiefer; die Statue musste mit. Jetzt landet der Kopf wieder in
     der Luecke von "JEDEM ... WETTER.". */
  height: clamp(340px, 55vh, 530px);
  z-index: 3;
  pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
  /* Die Deckkraft laeuft ueber diese Variable, NICHT ueber ein direktes
     opacity in den Media Queries: mascot-rise laeuft mit fill-mode "both",
     und ein gefuellter Animations-Endwert schlaegt jede normale Deklaration.
     Genau daran sind die frueheren opacity-Regeln wirkungslos geblieben. */
  --hm-op: 1;
  opacity: var(--hm-op);
  animation: mascot-rise 1.4s cubic-bezier(.34,1.4,.64,1) 0.2s both;
}
.hm-glow {
  position: absolute;
  inset: 12% 0 4% 0;
  background: radial-gradient(ellipse 60% 68% at 50% 48%, rgba(255,182,39,0.42), transparent 62%);
  filter: blur(34px);
  z-index: 0;
}
.hm-figure, .hm-canvas {
  position: relative;
  display: block;
  height: 100%; width: auto;
  filter: drop-shadow(0 28px 40px rgba(0,0,0,0.6)) drop-shadow(0 0 28px rgba(255,182,39,0.3));
  z-index: 1;
}
.hm-figure { animation: mascot-breathe 6s ease-in-out infinite; }
/* Die Animation muss das Zentrieren mittragen - ein blosses translateY wuerde
   das translateX(-50%) ueberschreiben und die Statue nach rechts springen lassen. */
@keyframes mascot-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(48px) scale(0.96); }
  100% { opacity: var(--hm-op); transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* --- Ranger-Truppe hinter der Statue --------------------------------------
   Dekoration in der Tiefe: nach aussen kleiner, blasser und leicht unscharf,
   damit die Statue vorne und der Knopf davor lesbar bleiben. */
.hero-crew {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(1180px, 96vw);
  height: clamp(200px, 34vh, 330px);
  z-index: 2;
  pointer-events: none;
}
.hc-figure {
  position: absolute;
  bottom: 0;
  width: auto;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.55));
  animation: crew-rise 1.2s cubic-bezier(.34,1.3,.64,1) both;
}
/* tief 0 steht am naechsten an der Statue: groesser, deckender, ohne Unschaerfe.
   Verdeckt wird es ohnehin zum Teil von der Statue davor (z-index 3 gegen 2). */
.hc-t0 { height: 80%; opacity: 0.85; filter: drop-shadow(0 16px 26px rgba(0,0,0,0.6)); }
.hc-t1 { height: 72%; opacity: 0.72; filter: drop-shadow(0 14px 22px rgba(0,0,0,0.55)) blur(0.4px); }
.hc-t2 { height: 54%; opacity: 0.42; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.5)) blur(1.4px); }
.hc-l.hc-t0 { left: 34%; animation-delay: .28s; }
.hc-r.hc-t0 { right: 34%; animation-delay: .30s; }
.hc-l.hc-t1 { left: 26%; animation-delay: .35s; }
.hc-l.hc-t2 { left: 8%;  animation-delay: .45s; }
.hc-r.hc-t1 { right: 26%; animation-delay: .40s; }
.hc-r.hc-t2 { right: 8%;  animation-delay: .50s; }
@keyframes crew-rise {
  0% { opacity: 0; transform: translateY(28px); }
  100% { transform: translateY(0); }
}
@media (max-width: 1023px) {
  .hero-crew { height: clamp(150px, 24vh, 220px); }
  .hc-l.hc-t2, .hc-r.hc-t2 { display: none; }   /* aussen wird es zu eng */
}
/* Auf dem Handy war die Crew ganz ausgeblendet. Sie bleibt jetzt sichtbar, aber
   nur das innere Paar, deutlich kleiner und weiter aussen — so flankiert sie die
   Statue, statt sie und den Buchen-Knopf zu verdecken. */
@media (max-width: 720px) {
  /* Etwas angehoben, damit die beiden neben dem Sockel stehen statt auf der
     unteren Kante zu kleben, und groesser, damit man sie ueberhaupt erkennt. */
  .hero-crew { bottom: 6%; height: clamp(170px, 26vh, 220px); width: 100%; }
  .hc-t1 { height: 72%; opacity: 0.7; }
  .hc-l.hc-t1 { left: 0; }
  .hc-r.hc-t1 { right: 0; }
  /* Das nahe Paar steht weiter aussen als am Desktop und etwas hoeher: zwischen
     den Stiefeln klemmte es und wurde vom Sockel angeschnitten. So steht es
     sichtbar neben dem Sockel, leicht hinter dem aeusseren Paar. */
  .hc-t0 { height: 52%; opacity: 0.9; }
  .hc-l.hc-t0 { left: 16%; bottom: 14%; }
  .hc-r.hc-t0 { right: 16%; bottom: 14%; }
}
@media (max-width: 380px) {
  .hero-crew { display: none; }                 /* darunter wird es wirklich zu eng */
}
@media (prefers-reduced-motion: reduce) {
  .hc-figure { animation: none; }
}
/* Rechts Platz für die Statue freihalten, damit CTAs/Stats nicht unter der
   Figur liegen. Die Figur bleibt dadurch auf allen Breiten deckend im
   Vordergrund, statt als blasse Hintergrund-Deko wegdimmen zu müssen.
   Titel bleibt unberührt (steht links, oberhalb der Figur). */
/* Frueher wurde der Inhalt nach links aus dem Streifen der rechten Statue
   geschoben. Die Statue steht jetzt mittig hinter dem Inhalt - der Platzhalter
   rechts ist damit hinfaellig und wuerde die Mittelachse nur verschieben. */
/* Darunter wird die Statue kleiner, ragt aber immer noch in die Zone von Liste
   und Button-Reihe. Beide ruecken deshalb weiter ein; Headline und Klammerzeile
   stehen oberhalb der Figur und laufen ueber die volle Breite. */
@media (max-width: 1023px) {
  .hero-mascot { height: clamp(300px, 46vh, 460px); }
}
@media (max-width: 899px) {
  .hero-mascot { height: clamp(240px, 34vh, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mascot, .hm-figure { animation: none; }
  .hero-swoosh path { animation: none; stroke-dashoffset: 0; }
}

/* Background figures (decent placement on suitable pages/sections) */
.bg-figur {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  filter: saturate(0.7) blur(0.4px) drop-shadow(0 12px 24px rgba(0,0,0,0.6));
  mix-blend-mode: normal;
}
.bg-figur-stats { right: 5%; bottom: -8%; width: 220px; transform: rotate(8deg); }
.bg-figur-areas { left: -3%; bottom: 4%; width: 200px; transform: rotate(-6deg); opacity: 0.32; }
.bg-figur-pricing { right: -3%; top: 60%; width: 200px; transform: rotate(5deg); opacity: 0.32; }

@media (max-width: 900px) {
  .bg-figur { display: none; }
}

.hero-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 36px; }
.hero-counters { display: flex; gap: 20px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .08em; flex-wrap: wrap; }
.hc-item { display: inline-flex; align-items: center; gap: 8px; }
.hc-dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 10px currentColor; animation: pulse 1.6s infinite; }

/* Zentrierter Satz: Headline, Klammerzeile und Buttons stehen auf einer Mittelachse.
   Die Zeilen tragen deshalb keinen eigenen Maus-Versatz mehr - bei zentriertem
   Text laesst unterschiedlich weit verschobenes Zeilenwerk die Mittelachse
   ausfransen. Der Maus-Glow im Hintergrund bleibt. */
.hero-title {
  font-family: var(--display); font-weight: 700;
  /* 8.6vw stammt aus dem alten Satz, dessen laengste Zeile "ADVANGERS" war.
     Die laengste Zeile heisst jetzt "INDOOR-PARK BUCHHOLZ." und ist rund
     doppelt so breit - bei 8.6vw lief sie aus dem Container heraus. */
  font-size: clamp(30px, 7.2vw, 108px);
  line-height: 0.9; letter-spacing: -0.045em;
  margin: 0; display: flex; flex-direction: column; align-items: center;
  text-align: center;
  position: relative;
  /* Hinter der Schrift steht jetzt die Statue statt leerer Hintergrund. Der
     weiche Schatten haelt weisse Buchstaben auch auf hellem Gelb lesbar. */
  text-shadow: 0 2px 18px rgba(6,6,14,0.75), 0 0 44px rgba(6,6,14,0.55);
}
/* Gilt auch fuer die Klammerzeile darunter, die ueber dem Statuenkopf sitzt. */
.hero-bracket { text-shadow: 0 2px 14px rgba(6,6,14,0.8); }
/* Kein nowrap mehr: bei zentriertem Satz ist ein Umbruch harmlos (die Zeile
   bricht mittig um), ein Ueberlauf dagegen nicht. Auf schmalen Displays teilt
   sich die Ortszeile dadurch selbsttaetig auf zwei Zeilen. */
.hero-title .hl {
  display: block;
  text-wrap: balance;
}
/* Geteilte Ortszeile: die Luecke in der Mitte gibt die Statue frei. Ihre Breite
   folgt der Statuenbreite (clamp(360px,62vh,620px) Hoehe, rund 0,6 davon breit). */
/* Spezifitaet: `.hero-title .hl { display: block }` steht weiter unten und schlaegt
   ein blosses `.hl-split`. Deshalb hier mit derselben Tiefe. */
.hero-title .hl.hl-split {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 100%;
}
/* Nur die lange Ortszeile wird kleiner gesetzt: "INDOOR-PARK" + Luecke +
   "BUCHHOLZ." passt bei voller Groesse nicht in eine Zeile, die Woerter
   schrumpften und malten in die Luecke. "JEDEM WETTER." ist kurz genug und
   behaelt seine Groesse. */
.hero-title .hl.hl-split.hl-tight { font-size: 0.72em; }
/* Nicht schrumpfen lassen: sonst wird der Kasten schmaler als die Schrift und
   der Text laeuft ueber die Luecke. */
.hero-title .hl-split > .glitch,
.hero-title .hl-split > .accent { flex: 0 0 auto; }
.hls-gap { flex: 0 0 clamp(150px, 20vw, 320px); }
@media (max-width: 900px) {
  /* Zu schmal fuer eine Luecke - die Zeile laeuft wieder normal durch. */
  .hero-title .hl.hl-split { display: block; font-size: 1em; }
  /* Die Luecke faellt weg, aber nicht ersatzlos: im Markup steht zwischen
     "JEDEM" und "WETTER." kein Leerzeichen, das uebernahm der Abstandhalter.
     Mit `display: none` klebten die Woerter zusammen ("JEDEMWETTER."). */
  .hls-gap { display: inline; flex: none; width: auto; }
  .hls-gap::before { content: "\00a0"; }
}

.hero-title .accent {
  color: var(--accent); position: relative; line-height: 1;
  display: inline-block; padding-bottom: 0.04em;
}

/* Der handgezogene Schwung ersetzt den frueheren geraden Unterstrich. Er wird
   beim Laden gezeichnet (stroke-dashoffset), liegt ausserhalb des Textflusses
   und skaliert mit der Headline mit. */
.hero-swoosh {
  position: absolute; left: -1.5%; width: 103%;
  /* Sitzt dicht unter "WETTER." statt tief darunter - so laeuft der Schwung
     nicht mehr in die Ortszeile "BUCHHOLZ." hinein. */
  bottom: -0.02em; height: 0.24em; overflow: visible;
  pointer-events: none;
}
.hero-swoosh path {
  fill: none; stroke: var(--accent-3); stroke-width: 7;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: swoosh-draw 1.1s .8s cubic-bezier(.7,0,.2,1) forwards;
}
@keyframes swoosh-draw { to { stroke-dashoffset: 0; } }

.hero-bracket {
  /* Sitzt jetzt ueber der Headline, deshalb Abstand nach unten statt nach oben. */
  margin: 4px auto 22px; text-align: center; max-width: 40ch;
  font-family: var(--mono); font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .18em; text-transform: uppercase;
  /* Cyan statt Gelb: Gelb verschwand auf der goldenen Ranger-Statue dahinter,
     und Magenta ist in der Headline schon vergeben. */
  color: var(--accent-2); line-height: 1.7;
}

/* Die sechs Welten als Chip-Reihe. Zwei Zeilen statt sechs: der Block bleibt
   flach, die Ranger-Statue behaelt Luft und die Headline bleibt die
   dominierende Flaeche im Hero. */
/* Traeger fuer die Reihe plus die beiden Pfeile. Die Pfeile liegen ueber den
   Raendern der Reihe, nicht daneben - sonst nehmen sie auf dem Handy Breite weg,
   die die Chips brauchen. */
.hero-areas-wrap {
  position: relative;
  max-width: 820px;
  margin: 40px auto 0;
  z-index: 6;
}
.ha-pfeil {
  position: absolute; top: 50%; transform: translateY(-50%);
  /* Muss ueber der Liste liegen: die traegt selbst z-index 6, sonst fangen die
     Chips die Klicks ab und der Pfeil ist zwar sichtbar, aber tot. */
  z-index: 8;
  display: none;                 /* nur auf dem Handy, siehe Media Query */
  align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(9,9,20,0.82);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transition: opacity .2s ease, transform .15s ease, border-color .2s ease;
}
.ha-pfeil.l { left: -4px; }
.ha-pfeil.r { right: -4px; }
.ha-pfeil:active { transform: translateY(-50%) scale(0.92); }
.ha-pfeil:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Am Ende der Reihe bleibt der Pfeil stehen, wird aber unsichtbar und
   unantippbar - das Wegspringen eines Knopfes waere unruhiger als ein
   ausgeblendeter. */
.ha-pfeil.aus { opacity: 0; pointer-events: none; }

.hero-areas {
  list-style: none; padding: 0;
  margin: 40px auto 0;
  max-width: 820px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  position: relative; z-index: 6;
}
.hero-areas a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 20px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ac, var(--accent-3)) 42%, transparent);
  /* Deckend statt glasig: die zweite Chip-Reihe liegt genau auf der Statue.
     Gemessen lagen die Chips zwar davor, aber bei 88% Deckkraft schlug das Gold
     der Figur durch und die Beschriftung war nicht mehr zu lesen. */
  background: color-mix(in srgb, var(--ac, var(--accent-3)) 16%, #0b0b18);
  font-family: var(--mono); font-size: clamp(11px, 1vw, 13.5px);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
/* Rundes Bild der Aktivitaet als Kennung. Der Farbring darum haelt denselben
   Farbschluessel, den vorher der blosse Punkt getragen hat (Nav-Untermenue). */
.ha-thumb {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background-size: cover; background-position: center;
  background-color: var(--ac, var(--accent-3));
  box-shadow:
    0 0 0 1.5px var(--ac, var(--accent-3)),
    0 0 12px -2px var(--ac, var(--accent-3));
  margin-left: -6px;   /* die Pille wird sonst links kopflastig */
}
.hero-areas a { padding: 7px 18px 7px 12px; }
.hero-areas a:hover .ha-thumb {
  box-shadow: 0 0 0 2px var(--ac, var(--accent-3)), 0 0 18px -2px var(--ac, var(--accent-3));
}
@media (max-width: 560px) {
  .ha-thumb { width: 20px; height: 20px; }
}
/* Beim Hover bleibt der Grund dunkel und faerbt sich nur an. Eine voll
   gefuellte Pille mit dunkler Schrift kaeme bei Blau (#2f7dff) und Rot
   (#ff3358) nur auf rund 4:1 und damit unter die Lesbarkeitsschwelle. */
.hero-areas a:hover {
  background: color-mix(in srgb, var(--ac, var(--accent-3)) 20%, transparent);
  border-color: var(--ac, var(--accent-3));
  color: var(--ac, var(--accent-3));
  transform: translateY(-2px);
}
.hero-areas a:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 3px;
}

/* Die Ecken-Marken lagen auf 90px und damit mitten in der Navigationsleiste:
   die schwebt ab 63px und ist rund 88px hoch, im kompakten Zustand ab 14px.
   Die Marke lief dadurch hinter den Nav-Links ("Anfahrt", "Kontakt") durch.
   172px raeumt beide Zustaende frei und bleibt oberhalb des Hero-Inhalts,
   der bei 180px Innenabstand beginnt. */
.hero-corner.top-left, .hero-corner.top-right { top: 172px; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }

/* Der Buchen-Knopf ist der eine Weg in die Buchungsstrecke und steht jetzt vor
   der Statue - er muss sich gegen ein volles Bild behaupten, nicht mehr gegen
   leeren Hintergrund. Deshalb groesser, fetter und mit einem eigenen Ring. */
.btn.mega {
  padding: 22px 44px;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.01em;
  position: relative; overflow: hidden;
}
.btn.mega svg { width: 19px; height: 19px; }
.hero-cta .btn-yellow.mega {
  box-shadow:
    0 0 0 5px rgba(10,10,12,0.55),                    /* dunkler Ring loest ihn vom Bild */
    0 0 0 7px rgba(255,182,39,0.30),
    0 10px 30px rgba(255,182,39,0.45),
    0 18px 50px -10px rgba(0,0,0,0.8),
    inset 0 -4px 0 rgba(0,0,0,0.2);
  border-width: 2px;
}
.hero-cta .btn-yellow.mega:hover {
  box-shadow:
    0 0 0 5px rgba(10,10,12,0.55),
    0 0 0 9px rgba(255,182,39,0.45),
    0 14px 40px rgba(255,182,39,0.6),
    0 22px 60px -10px rgba(0,0,0,0.85),
    inset 0 -4px 0 rgba(0,0,0,0.2);
}
/* Mittig unter der Klammerzeile, egal wie breit die Liste darueber laeuft. */
.hero-cta { display: flex; justify-content: center; }
.btn-pulse {
  position: absolute; inset: 0; border-radius: 999px;
  box-shadow: 0 0 0 0 var(--accent); animation: btn-pulse 2s infinite;
  pointer-events: none;
}
@keyframes btn-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,31,182,0.6); }
  70% { box-shadow: 0 0 0 16px rgba(255,31,182,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,31,182,0); }
}

.stat-num { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3.6vw, 52px); letter-spacing: -0.03em; line-height: 1; }
.stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 6px; line-height: 1.3; }

@media (max-width: 800px) {
  .hero-vword { display: none; }
}
@media (max-width: 899px) {
  .hero-areas { margin-top: 30px; gap: 9px; }
  .hero-areas a { padding: 9px 16px; font-size: 11.5px; letter-spacing: .12em; }
  .hero-cta { margin-top: 30px; }
}

/* ---------------------------------------------------------------------------
   HERO AUF DEM HANDY
   Muss nach den Basis-Regeln stehen (gleiche Spezifitaet, spaeter gewinnt).
   Der Hero wirkte hier leer und zerfasert: kleine Headline in viel Luft, dazu
   grosse Luecken zwischen Badge, Titel, Text und Buttons. Die Headline traegt
   den Hero, also wird sie deutlich groesser und alles rueckt zusammen.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Der Hero war 100vh hoch, begann aber erst unterhalb der Kontaktleiste.
     Dadurch ragte er um deren Hoehe ueber den Bildschirmrand hinaus - die
     Statue steht auf `bottom: 0` und war unten abgeschnitten. Zugleich zentrierte
     `align-items: center` den Text in der zu hohen Flaeche: oben blieben rund
     150px leer, und der Knopf lag auf der Statue. Jetzt passt die Hoehe genau
     in das Sichtbare (svh statt vh, sonst springt es beim Ein- und Ausblenden
     der Browserleiste), der Text sitzt oben, die Statue schliesst unten ab. */
  .hero {
    min-height: calc(100svh - var(--topbars-h, 70px));
    align-items: flex-start;
    padding: 128px 0 0;
  }
  .hero-top { margin-bottom: 20px; }

  /* Auf 390px ergaeben 7.2vw nur 28px - fuer eine Hero-Headline zu zaghaft.
     "INDOOR-PARK BUCHHOLZ." bricht hier auf zwei Zeilen um, das ist so gewollt. */
  .hero-title { font-size: clamp(32px, 9.4vw, 52px); letter-spacing: -0.05em; }

  .hero-bracket { margin: 0 auto 16px; letter-spacing: .12em; line-height: 1.6; }

  /* Die Chips stehen oberhalb der Statue und duerfen mittig bleiben. */
  .hero-areas { margin-top: 24px; gap: 8px; }
  .hero-areas a { padding: 8px 14px; font-size: 10.5px; letter-spacing: .1em; gap: 7px; }
  /* Statt drei zerfranster Zeilen eine Wischreihe: die sechs Welten stehen
     nebeneinander, man zieht sie durch. Die Maske laesst die Reihe an beiden
     Raendern ausblenden - das zeigt, dass es weitergeht. */
  .hero-areas {
    flex-wrap: nowrap;
    justify-content: flex-start;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 6px;
    /* Bis unter die Pfeile ausblenden (34px Knopf + Rand), sonst schiebt sich
       ein Chip halb hinter den Knopf und seine Beschriftung ist angeschnitten
       statt sauber ausgeblendet. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 42px, #000 calc(100% - 42px), transparent 100%);
  }
  .hero-areas::-webkit-scrollbar { display: none; }
  .hero-areas li { flex: 0 0 auto; scroll-snap-align: center; }
  /* Erst hier sichtbar: am grossen Bildschirm passen alle sechs Chips in zwei
     Reihen, dort waere ein Pfeil sinnlos. */
  .ha-pfeil { display: flex; }
  .hero-areas-wrap { margin-top: 24px; }
  /* Platz an den Enden, damit der erste und letzte Chip nicht unter einem
     Pfeil verschwinden. */
  .hero-areas { padding: 2px 34px 6px; }

  /* Fruehere Fassung: linksbuendig, weil die Figur rechts stand und den Platz
     nahm. Die Statue steht jetzt mittig hinter dem Knopf - linksbuendig wuerde
     ihn aus seiner eigenen Mitte schieben. */
  .hero-cta { margin-right: 0; margin-top: 28px; gap: 10px; justify-content: center; }
  .btn.mega { padding: 17px 30px; font-size: 17px; }

  /* Wie am grossen Bildschirm: die Statue steht IN der Headline - links "JEDEM",
     rechts "WETTER.", der Turm in der Luecke dazwischen. Die 900px-Regel weiter
     oben loest die Teilung auf; hier kommt sie zurueck, nur mit schmalerer
     Luecke und kleinerer Schrift, damit beide Woerter nebeneinander passen. */
  .hero-title .hl.hl-split { display: flex; font-size: 1em; }
  /* "INDOOR-PARK" + Luecke + "BUCHHOLZ." ist die lange Zeile und wird staerker
     heruntergesetzt als am Desktop (dort 0.72em) - sonst passt sie nicht. */
  .hero-title .hl.hl-split.hl-tight {
    font-size: 0.6em;
    /* Luft fuer den Schwung unter "WETTER.": er haengt 0.16em unter der Zeile
       und ist 0.24em hoch. Bei line-height 0.9 lag er dadurch quer auf
       "BUCHHOLZ." - hier bekommt er seinen Platz zurueck. */
    margin-top: 0.5em;
  }
  /* Etwas schmaler als zuvor (30vw): sonst standen die Woerter mit nur 12px
     Abstand an den Displayraendern und wirkten eingeklemmt. */
  .hls-gap { display: block; flex: 0 0 clamp(80px, 25vw, 130px); width: auto; }
  .hls-gap::before { content: none; }

  /* Hoch genug, dass der Kopf in der Luecke der ersten geteilten Zeile steht
     und nicht erst unter dem Text beginnt. Gemessen: die Zeile setzt bei rund
     270px an, der Hero endet bei 844px - macht rund 68vh Statuenhoehe. */
  /* Die Statue war in voller Laenge zu sehen - Kopf bis Sockel auf einem
     schmalen Display - und wirkte dadurch duenn und beinlastig. Jetzt ist sie
     deutlich groesser und laeuft unterhalb der Knie aus dem Bild: sichtbar
     bleibt der Oberkoerper, wie bei einem Standbild in einer Halle.
     Der Kopf soll dabei auf derselben Hoehe bleiben, naemlich in der Luecke
     der geteilten Zeile - rund 211px unter der Oberkante des Heros. Der
     Fussversatz wird deshalb aus der Statuenhoehe zurueckgerechnet, statt
     ihn fest einzutragen: so wandert der Kopf nicht mit, wenn die Hoehe
     sich mit dem Display aendert. */
  /* Sie steht auf dem Boden des Heros (bottom: 0), sonst schwebt der Sockel auf
     halber Hoehe. Die Hoehe ist so gewaehlt, dass die Breite bei einem
     Seitenverhaeltnis von 0.63 rund 85% des Displays einnimmt - gross genug fuer
     den "Turm", aber mit Luft an den Raendern. Der Kopf landet damit in der
     Luecke der Ortszeile. */
  /* Auf dem Handy gibt es fuer den Kopf keine Luecke: darueber steht die
     Ueberschrift, darunter liegen Chip-Reihe und Buchen-Knopf, und beide sind
     deckend. Bei 50vh landete der Kopf hinter dem Knopf — die Statue sah
     kopflos aus. Die Figur steht deshalb KOMPLETT unterhalb des Knopfes.
     An sechs Geraetegroessen gemessen: 30vh laesst ueberall Luft (28 bis
     117 px), ohne dass die Statue zur Briefmarke wird. */
  /* Der Kopf soll in der Luecke der Ortszeile stehen ("INDOOR-PARK ___
     BUCHHOLZ."). Diese Zeile sitzt auf allen geprueften Handys bei y 306-313,
     also praktisch unabhaengig von der Bildschirmhoehe. Deshalb kein
     Prozentwert, sondern 100vh minus fester Abstand: die Statue steht unten
     buendig, ihre Oberkante landet damit exakt auf diesem Abstand — auf jedem
     Geraet an derselben Stelle relativ zum Text. */
  .hero-mascot { height: clamp(220px, calc(100vh - 315px), 720px); bottom: 0; }

  /* Abdunklung NUR unterhalb der Ortszeile: Dort liegen Klammerzeile, Chips und
     Knopf auf dem Oberkoerper und brauchen Trennung. Der Kopf darueber bleibt
     unangetastet sichtbar. Die Ebene sitzt zwischen Statue (z-index 3) und
     Inhalt (z-index 5). */
  .hero-content::before {
    content: "";
    position: absolute;
    left: -8vw; right: -8vw; top: 40%; bottom: 4%;
    z-index: -1;
    pointer-events: none;
    /* Erst ab der Haelfte abdunkeln. Der Kopf endet je nach Geraet bei 32
       bis 52 Prozent dieser Flaeche — faengt der Verlauf frueher an, liegt ein
       Grauschleier auf dem Gesicht. Die Chips tragen ihren eigenen Hintergrund;
       Trennung braucht vor allem der Knopf weiter unten. */
    background: linear-gradient(180deg,
      rgba(8,6,18,0) 0%,
      rgba(8,6,18,0) 52%,
      rgba(8,6,18,0.62) 66%,
      rgba(8,6,18,0.80) 88%,
      rgba(8,6,18,0) 100%);
  }
  /* Die Ortszeile liegt direkt auf dem Kopf — ein Schatten reicht dort aus. */
  .hero-split, .hl-split { text-shadow: 0 2px 14px rgba(8,6,18,0.9), 0 0 4px rgba(8,6,18,0.8); }

  /* Die Ranger bleiben auf dem Handy aus (Regel bei 720px). Kurz waren sie
     drin, weil die Statue damals klein und verzerrt war und die untere Haelfte
     leer liess. Mit korrekten Proportionen fuellt sie den Ausschnitt allein -
     die Ranger lugten nur noch hinter dem Sockel hervor. */

  /* Klammerzeile und Chips liegen jetzt vor der Statue statt vor leerem
     Hintergrund - ohne kraeftigeren Schatten beziehungsweise deckendere
     Flaeche waeren sie dort schlecht zu lesen. */
  .hero-bracket { text-shadow: 0 2px 10px rgba(6,6,14,0.95), 0 0 22px rgba(6,6,14,0.85); }
  .hero-areas a {
    background: color-mix(in srgb, var(--ac, var(--accent-3)) 16%, #0b0b18);
  }
}

/* ====== LIVE ARENA / LEADERBOARD ====== */
.live-arena {
  padding: 120px 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-1) 100%);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.live-arena::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}
.la-head {
  display: flex; justify-content: space-between; align-items: end;
  flex-wrap: wrap; gap: 32px;
  margin-bottom: 60px; position: relative;
}
.la-meta { display: flex; gap: 32px; }
.la-meta-item { text-align: right; }
.la-mn { font-size: 40px; font-weight: 700; letter-spacing: -0.025em; }
.la-ml { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .15em; }

.kinetic-row { display: inline; }

.la-board { display: flex; flex-direction: column; gap: 6px; position: relative; }
.la-row {
  display: grid; grid-template-columns: 64px 220px 1fr 140px;
  gap: 20px; align-items: center;
  padding: 16px 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line); border-radius: 10px;
  transition: border-color .2s, background .2s, transform .2s;
}
.la-row:hover { border-color: var(--c); background: rgba(255,255,255,0.04); transform: translateX(4px); }
.la-rank { font-family: var(--mono); font-size: 18px; color: var(--ink-3); font-weight: 700; }
.la-row:nth-child(1) .la-rank { color: var(--accent); font-size: 22px; }
.la-player { display: flex; gap: 14px; align-items: center; }
.la-avatar {
  width: 40px; height: 40px; border-radius: 8px; color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; font-family: var(--mono);
}
.la-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.la-area { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }
.la-bar-wrap { height: 14px; background: var(--bg-2); border-radius: 4px; overflow: hidden; position: relative; }
.la-bar { height: 100%; border-radius: 4px; position: relative; transition: width .8s cubic-bezier(.2,.9,.3,1); overflow: hidden; }
.la-bar-glint {
  position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: glint 2.4s linear infinite;
}
@keyframes glint { from { left: -30%; } to { left: 100%; } }
.la-score {
  font-family: var(--mono); font-size: 18px; font-weight: 700;
  text-align: right; font-variant-numeric: tabular-nums;
  display: flex; justify-content: flex-end; align-items: baseline; gap: 8px;
}
.la-trend { font-size: 14px; color: var(--ink-3); }
.la-trend.up { color: var(--accent-2); }
.la-trend.dn { color: var(--danger); }

@media (max-width: 800px) {
  .la-row { grid-template-columns: 32px 1fr 80px; gap: 12px; padding: 12px; }
  .la-bar-wrap { display: none; }
  .la-meta { gap: 16px; }
  .la-mn { font-size: 28px; }
}

/* ====== MANIFESTO ====== */
.manifesto {
  padding: 140px 0 160px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.manifesto::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% 50%, rgba(255,31,182,0.06), transparent 70%);
}
.mf-eyebrow { display: flex; justify-content: space-between; margin-bottom: 60px; }
.mf-prog { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: .15em; }
.mf-lines {
  display: flex; flex-wrap: wrap; gap: 0.18em 0.3em;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(48px, 8.5vw, 132px);
  line-height: 0.92; letter-spacing: -0.04em;
  word-break: break-word;
}
.mf-w { color: var(--ink); transition: opacity .15s, color .25s, transform .25s; display: inline-block; }
.mf-foot { margin-top: 80px; max-width: 600px; }
.mf-bar { height: 2px; background: var(--bg-3); border-radius: 2px; overflow: hidden; }
.mf-bar > div { height: 100%; background: var(--accent); transition: width .15s; }

/* ====== NOW PLAYING ====== */
.now-playing { padding: 100px 0; background: var(--bg-1); border-top: 1px solid var(--line); }
.np-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.np-update { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .12em; }
.np-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.np-cell {
  padding: 20px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 12px; position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s;
}
.np-cell:hover { border-color: var(--c); transform: translateY(-2px); }
.np-cell::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c);
}
.np-cell.full { opacity: 0.5; }
.np-time { font-family: var(--mono); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.np-area { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .12em; margin: 8px 0 16px; }
.np-status { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.np-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.np-status-dot.free { background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.np-status-dot.warn { background: var(--accent-3); box-shadow: 0 0 8px var(--accent-3); }
.np-status-dot.full { background: var(--danger); }
.np-players { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-top: 8px; }