/* =====================================================================
   DOGI'S ZOCKERANSTALT – gemeinsames Design-System "Neon Arcade"
   Alles lokal, keine externen Requests. Schriften liegen in /fonts.

   Zwei Grundsaetze ziehen sich durch die ganze Datei:

   1. AUGENSCHONEND. Dunkler Untergrund, aber nichts Grelles darauf:
      kein reines Weiss auf grossen Flaechen, gedaempfte statt voll
      gesaettigter Neontoene, weiche statt harter Leuchtkanten, keine
      schnellen Blink-/Flackereffekte. Der Arcade-Look bleibt, das
      Blenden geht weg.

   2. OPTISCH SAUBER ZENTRIERT. Gesperrte Grossbuchstaben (letter-spacing)
      haengen AUCH hinter den letzten Buchstaben noch eine Luecke. Wird so
      ein Text zentriert, sitzt er um die halbe Sperrweite zu weit links –
      das ist der Grund, warum Beschriftungen "leicht verrutscht" wirken.
      Die Gegenmassnahmen stehen gesammelt im Abschnitt
      "Optische Zentrierung".
   ===================================================================== */

/* ----------------------------- Schriften ---------------------------- */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500 900;
  font-display: swap;
  src: url('/fonts/orbitron-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/rubik-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/robotomono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/robotomono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------ Tokens ------------------------------ */
:root {
  /* Grundflaechen */
  --bg-0: #05030f;
  --bg-1: #0b0820;
  --bg-2: #12102e;
  --bg-3: #1b1740;
  --panel: rgba(20, 16, 52, 0.72);
  --panel-solid: #14103a;
  --line: rgba(150, 130, 255, 0.22);
  --line-strong: rgba(180, 160, 255, 0.42);

  /* Neon-Palette */
  --neon-pink: #ff2e88;
  --neon-cyan: #00e5ff;
  --neon-violet: #a855f7;
  --neon-lime: #b6ff3d;
  --neon-amber: #ffb627;
  --neon-red: #ff4d5e;

  /* Marken-Farbe DogFather: Babyblau (das hellblaue Herz 🩵) – dezenter
     als die reinen Neon-Toene, damit sie als "die echte Markenfarbe"
     erkennbar bleibt statt im Neon-Mix unterzugehen. */
  --baby-blau: #7dd6f7;

  /* Text – bewusst kein reines Weiss: gedaempftes Hellviolett ermuedet
     auf sehr dunklem Grund deutlich weniger, bleibt aber klar lesbar.
     Alle drei Stufen erreichen auf --bg-0 mindestens WCAG-AA (4.5:1). */
  --text: #e6e2fa;
  --text-dim: #aca5d6;
  --text-faint: #8d86bd;

  /* Typografie */
  --font-display: 'Orbitron', 'Bahnschrift', 'DIN Alternate', system-ui, sans-serif;
  --font-body: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'Roboto Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;

  /* Radien & Schatten */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --shadow-deep: 0 24px 60px -18px rgba(0, 0, 0, 0.85);

  /* Timing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Akzent, wird pro Seite ueberschrieben */
  --accent: var(--neon-cyan);
  --accent-2: var(--neon-pink);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Muss VOR allen Komponenten stehen und gewinnen: sonst ueberschreibt
   z. B. `.btn { display: inline-flex }` das hidden-Attribut, und angeblich
   versteckte Schalter bleiben sichtbar. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------- Hintergrund-Buehne ----------------------- */
/* Farbnebel + Perspektiv-Gitter + Scanlines + Vignette.
   Alles rein per CSS, keine Bilder. */
.buehne {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1100px 720px at 12% -10%, rgba(168, 85, 247, 0.34), transparent 62%),
    radial-gradient(900px 620px at 92% 4%, rgba(0, 229, 255, 0.24), transparent 60%),
    radial-gradient(1000px 700px at 50% 108%, rgba(255, 46, 136, 0.26), transparent 62%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 55%, #030209 100%);
}

.buehne::before {
  /* Perspektivischer Gitterboden */
  content: '';
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: -30%;
  height: 90%;
  background-image:
    linear-gradient(to right, rgba(0, 229, 255, 0.16) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 46, 136, 0.16) 1px, transparent 1px);
  background-size: 68px 68px;
  transform: perspective(340px) rotateX(66deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to bottom, transparent, #000 42%, #000);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, #000);
  animation: gitter 9s linear infinite;
}

@keyframes gitter {
  to {
    background-position: 0 68px, 0 68px;
  }
}

.buehne::after {
  /* CRT-Scanlines */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  /* Augenschonend gedaempft: Scanlines nur noch dezent angedeutet statt
     kraeftiger CRT-Look, der bei laengerem Hinsehen ermueden kann. */
  opacity: 0.28;
  pointer-events: none;
}

/* Schwebende Leucht-Orbs */
.orb {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(70px);
  /* Augenschonend gedaempft: sanfteres Leuchten der Hintergrund-Orbs. */
  opacity: 0.32;
  pointer-events: none;
  animation: schweben 18s ease-in-out infinite;
}
.orb-1 { width: 380px; height: 380px; left: -90px; top: 8%; background: var(--neon-violet); }
.orb-2 { width: 300px; height: 300px; right: -70px; top: 34%; background: var(--neon-cyan); animation-delay: -6s; }
.orb-3 { width: 340px; height: 340px; left: 42%; bottom: -140px; background: var(--neon-pink); animation-delay: -12s; }

@keyframes schweben {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(40px, -30px, 0) scale(1.12); }
  66% { transform: translate3d(-30px, 26px, 0) scale(0.94); }
}

/* ------------------------------ Layout ------------------------------ */
.huelle {
  width: min(1240px, 100% - 2.5rem);
  margin-inline: auto;
}

.stapel > * + * { margin-top: 1rem; }

/* ---------------------------- Typografie ---------------------------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.08;
  margin: 0;
}

.augen-brenner {
  /* Grosser Leucht-Schriftzug mit Farbverlauf + weicher Aura.
     Die helle Stelle im Verlauf ist bewusst kein reines Weiss – sonst
     entsteht genau der grelle Punkt, der beim Lesen blendet. */
  background: linear-gradient(100deg, var(--neon-cyan) 0%, #e8e4ff 26%, var(--neon-pink) 58%, var(--neon-violet) 84%, var(--neon-cyan) 100%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: verlauf-lauf 7s linear infinite;
  /* Augenschonend gedaempft: weniger Blur-Reichweite und geringere Deckkraft
     als ein grelles Neon-Leuchten, Farbverlauf bleibt sichtbar erhalten. */
  filter: drop-shadow(0 0 10px rgba(255, 46, 136, 0.32)) drop-shadow(0 0 26px rgba(0, 229, 255, 0.2));
}

@keyframes verlauf-lauf {
  to { background-position: 260% center; }
}

.ueberschrift-klein {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--accent);
}

.text-dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ----------------------- Optische Zentrierung ----------------------- */
/*
   Warum das noetig ist: `letter-spacing: 0.38em` setzt die Luecke NICHT
   nur zwischen die Buchstaben, sondern auch hinter den letzten. Die
   Textzeile ist dadurch um eine volle Sperrweite breiter als das, was
   man tatsaechlich sieht. Zentriert man diese Zeile, landen die
   Buchstaben um die halbe Sperrweite zu weit links – bei 0.38em sind
   das schnell 4-5 Pixel sichtbarer Versatz. Genau daran erkennt man
   "irgendwie nicht sauber zentriert".

   Ausgleich, je nach Art der Zentrierung:
     - Textzeile mit text-align:center  -> text-indent = Sperrweite
     - Flex-/Grid-Element, das als Ganzes zentriert wird
                                        -> margin-inline-start = Sperrweite
     - Pille mit Innenabstand           -> rechts um die Sperrweite weniger
   In allen drei Faellen steht das Ergebnis danach exakt mittig.
*/

/* Kleine Ueberschrift wird auf allen Seiten zentriert eingesetzt –
   ausser im Spielkopf von "Wer ist es?", der linksbuendig ist. */
.ueberschrift-klein { text-indent: 0.38em; }
/* Die Spielkopfzeile ist linksbuendig – dort waere der Ausgleich falsch. */
.spiel-kopfzeile .ueberschrift-klein { text-indent: 0; }
/* Die restlichen Ausgleiche stehen am Dateiende, weil sie sonst von den
   spaeteren Kurzschreibweisen (padding/margin) wieder ueberschrieben
   wuerden. */

/* ------------------------------ Buttons ----------------------------- */
.btn {
  --btn-farbe: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.85em 1.7em;
  border: 1px solid color-mix(in srgb, var(--btn-farbe) 55%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--btn-farbe) 22%, transparent), color-mix(in srgb, var(--btn-farbe) 8%, transparent));
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.22s var(--ease-bounce), box-shadow 0.28s var(--ease-out),
    border-color 0.28s, background 0.28s;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--btn-farbe) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  -webkit-tap-highlight-color: transparent;
}

.btn::before {
  /* Glanz-Sweep beim Hover */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Gedaempfter Glanz statt greller Weissblitz beim Ueberfahren. */
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.2) 46%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.7s var(--ease-out);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-3px);
  border-color: var(--btn-farbe);
  box-shadow: 0 0 26px -2px color-mix(in srgb, var(--btn-farbe) 65%, transparent),
    0 14px 34px -16px #000, inset 0 1px 0 rgba(255, 255, 255, 0.2);
  outline: none;
}
.btn:hover::before,
.btn:focus-visible::before { transform: translateX(130%); }
.btn:active { transform: translateY(-1px) scale(0.97); }

.btn-voll { --btn-farbe: var(--accent); background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #08061c; border-color: transparent; }
.btn-voll:hover { color: #08061c; }
.btn-geist { background: rgba(255, 255, 255, 0.04); }
.btn-klein { padding: 0.6em 1.15em; font-size: 0.72rem; }

.btn[disabled],
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.42;
  filter: grayscale(0.7);
  transform: none !important;
  box-shadow: none !important;
  border-style: dashed;
}
.btn[disabled]::before,
.btn[aria-disabled='true']::before { display: none; }

/* Tooltip fuer deaktivierte "Kommt bald"-Elemente */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  translate: -50% 6px;
  padding: 0.45em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #0b0822;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, translate 0.2s var(--ease-out);
  z-index: 40;
  filter: none;
}
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after { opacity: 1; translate: -50% 0; }

/* ------------------------------ Karten ------------------------------ */
.karte {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: var(--shadow-deep);
}

.glas { background: rgba(16, 13, 44, 0.6); }

/* -------------------------- Kopf-Navigation ------------------------- */
.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-bottom: 1.5rem;
  padding: 0.85rem 0;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  background: linear-gradient(180deg, rgba(5, 3, 15, 0.9), rgba(5, 3, 15, 0.35));
  border-bottom: 1px solid var(--line);
}
.kopf-inhalt {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  transition: filter 0.25s;
}
.marke:hover { filter: drop-shadow(0 0 12px var(--accent)); }
.marke-zeichen {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--neon-pink), var(--neon-violet));
  box-shadow: 0 0 18px -2px var(--neon-pink);
  font-size: 1.05rem;
}

/* Echtes DogFather-Logo: weisses Rund-Badge (das Motiv ist schwarz auf
   weiss gezeichnet), dezenter Babyblau-Schimmer statt Neon-Verlauf. */
.marke-zeichen-bild {
  border-radius: 999px;
  background: #f4f7fb;
  box-shadow: 0 0 16px -2px color-mix(in srgb, var(--baby-blau) 70%, transparent);
  overflow: hidden;
  padding: 2px;
}
.marke-zeichen-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }

.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; }

/* Auf schmalen Geraeten passen Markenname und Schalter nicht mehr in eine
   Zeile. Vorher rutschten die Schalter dann rechtsbuendig in eine zweite
   Zeile und das sah aus wie ein Umbruchfehler. Jetzt bricht die Kopfzeile
   bewusst in zwei mittig ausgerichtete Reihen um – das wirkt gewollt und
   steht sauber unter dem Markennamen. */
@media (max-width: 620px) {
  .kopf-inhalt { justify-content: center; gap: 0.55rem 0.75rem; }
  .marke { font-size: 0.86rem; letter-spacing: 0.12em; }
  .kopf-rechts { margin-left: 0; }
}

/* -------------------------- HUD / Anzeigen -------------------------- */
.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.hud-feld {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(8, 6, 26, 0.72);
}
.hud-feld dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0;
}
.hud-feld dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  /* Augenschonend gedaempft */
  text-shadow: 0 0 9px color-mix(in srgb, var(--accent) 38%, transparent);
  line-height: 1.2;
}
.hud-feld.puls dd { animation: hud-puls 0.5s var(--ease-bounce); }
@keyframes hud-puls {
  0% { transform: scale(1); }
  40% { transform: scale(1.32); color: var(--text); }
  100% { transform: scale(1); }
}

/* ------------------------- Fortschrittsbalken ----------------------- */
.balken {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  border: 1px solid var(--line);
}
.balken-fuellung {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 70%, transparent);
  transition: width 0.5s var(--ease-out);
}

/* ------------------------------ Dialoge ----------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 1.25rem;
  background: rgba(3, 2, 10, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.32s var(--ease-out), visibility 0.32s;
}
.overlay[data-offen='true'] { opacity: 1; visibility: visible; }

.overlay-inhalt {
  width: min(560px, 100%);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(160deg, rgba(30, 24, 78, 0.96), rgba(10, 8, 30, 0.98));
  box-shadow: var(--shadow-deep), 0 0 90px -30px var(--accent);
  text-align: center;
  transform: translateY(26px) scale(0.94);
  opacity: 0;
  transition: transform 0.45s var(--ease-bounce), opacity 0.35s;
}
.overlay[data-offen='true'] .overlay-inhalt { transform: none; opacity: 1; }

/* --------------------------- Effekt-Canvas -------------------------- */
#partikel-canvas {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
}

/* --------------------------- Toast-Meldung -------------------------- */
#toast-schiene {
  position: fixed;
  left: 50%;
  bottom: 24px;
  translate: -50% 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(12, 9, 34, 0.94);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 0 24px -6px var(--accent);
  animation: toast-rein 0.35s var(--ease-bounce), toast-raus 0.35s var(--ease-out) 2.1s forwards;
}
.toast[data-art='gut'] { color: var(--neon-lime); border-color: color-mix(in srgb, var(--neon-lime) 50%, transparent); }
.toast[data-art='schlecht'] { color: var(--neon-red); border-color: color-mix(in srgb, var(--neon-red) 50%, transparent); }
@keyframes toast-rein { from { opacity: 0; transform: translateY(18px) scale(0.9); } }
@keyframes toast-raus { to { opacity: 0; transform: translateY(-10px) scale(0.95); } }

/* ------------------------------- Fuss ------------------------------- */
.fuss {
  margin-top: 4rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line);
  color: var(--text-faint);
  /* Etwas groesser und luftiger als zuvor – Fusstexte waren mit 0.82rem
     und enger Zeile unnoetig anstrengend zu lesen. */
  font-size: 0.88rem;
  line-height: 1.7;
  /* Die Trennlinie laeuft ueber die volle Breite, der Text darunter steht
     mittig in angenehmer Lesebreite. Nur den ganzen Fuss zu verschmaelern
     haette die Linie mit eingezogen und schief wirken lassen. */
  text-align: center;
}
.fuss p {
  max-width: 78ch;
  margin-inline: auto;
}
.fuss a { color: var(--text-dim); text-decoration-color: var(--line-strong); }
.fuss a:hover { color: var(--accent); }

/* Crew-Streifen (12.08.2026): die echten Gesichter hinter der Seite, auch
   im Fuss noch einmal praesent -- ruhig, klein, ohne Bewegung (der Fuss ist
   der Ort fuer Ruhe, nicht fuer weiteres Funkeln). */
.crew-streifen {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
}
.crew-streifen img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: #0d0a28;
  border: 1.5px solid var(--line-strong);
  opacity: 0.85;
  transition: transform 0.25s var(--ease-out), opacity 0.25s, border-color 0.25s;
}
.crew-streifen img:hover {
  transform: translateY(-3px);
  opacity: 1;
  border-color: var(--baby-blau);
}
.crew-streifen-titel {
  margin: 0 0 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* --------------------------- Hilfsklassen --------------------------- */
.nur-fuer-screenreader {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "backwards" statt "both": waehrend der Verzoegerung gilt der Startzustand,
   danach der normale (sichtbare) Zustand. So bleibt nie etwas unsichtbar
   haengen, falls Animationen nicht laufen. */
.einblenden { animation: einblenden 0.6s var(--ease-out) backwards; }
@keyframes einblenden { from { opacity: 0; transform: translateY(18px); } }

/* ------------- Optische Zentrierung, Teil 2 (siehe oben) ------------- */
/* Bewusst ganz am Ende: diese Regeln korrigieren Werte, die weiter oben
   per Kurzschreibweise gesetzt werden, und muessen deshalb spaeter
   kommen. Fachlich gehoeren sie zum Abschnitt "Optische Zentrierung". */

/* Knopfbeschriftungen sind gesperrte Versalien in einem zentrierenden
   Flex-Container. Eine Sperrweite mehr Polster links gleicht die Luecke
   hinter dem letzten Buchstaben genau aus. */
.btn { padding-inline-start: calc(1.7em + 0.14em); }
.btn-klein { padding-inline-start: calc(1.15em + 0.14em); }

/* HUD-Beschriftung ("ZEIT", "PUNKTE"): der ganze Block wird zentriert. */
.hud-feld dt { margin-inline-start: 0.22em; }

/* Toast-Pille: rechts eine Sperrweite weniger Polster. */
.toast { padding-inline-end: calc(1.2rem - 0.1em); }

/* Reduzierte Bewegung respektieren.
   Neben der pauschalen Verkuerzung werden die Effekte, die als Blitzen
   oder Zucken wahrgenommen werden koennten, ausdruecklich ganz
   abgeschaltet statt nur beschleunigt. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .buehne::before { animation: none; }
  .orb { animation: none; }
  .glitch::before,
  .glitch::after { display: none; }
  .muenzeinwurf { animation: none; opacity: 1; }
  .laufband-spur { animation: none; }
}

/* ============================ Konto-Widget ============================ */
.konto-widget { display: inline-flex; align-items: center; }
.konto-pille { color: var(--baby-blau); border-color: color-mix(in srgb, var(--baby-blau) 45%, transparent); }
.konto-pille:hover { border-color: var(--baby-blau); box-shadow: 0 0 18px -4px var(--baby-blau); }

.konto-modal { max-width: 420px; }
.konto-reiter {
  display: flex;
  gap: 0.4rem;
  margin: 1.1rem 0 1rem;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 6, 26, 0.7);
}
.konto-reiter-taste {
  flex: 1;
  padding: 0.55em 0.8em;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.konto-reiter-taste[aria-pressed='true'] {
  background: linear-gradient(135deg, var(--baby-blau), var(--neon-violet));
  color: #08061c;
}

.konto-formular { display: flex; flex-direction: column; gap: 0.7rem; text-align: left; }
.konto-formular label {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.konto-formular input,
.konto-formular select {
  padding: 0.65em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(8, 6, 26, 0.72);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
}
.konto-formular input[type='file'] { padding: 0.5em 0.6em; font-size: 0.82rem; }
.konto-formular input:focus-visible,
.konto-formular select:focus-visible {
  outline: none;
  border-color: var(--baby-blau);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--baby-blau) 30%, transparent);
}
.konto-formular button { margin-top: 0.3rem; }

/* ======================= Konto-Avatare & Profil ======================== */
.konto-avatar {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  object-fit: cover;
  vertical-align: middle;
  border: 1px solid var(--line-strong);
}
.konto-avatar.krone { border-color: var(--neon-amber); box-shadow: 0 0 8px -1px var(--neon-amber); }
.konto-pille-crew {
  border-color: color-mix(in srgb, var(--neon-amber) 55%, transparent) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--neon-amber) 16%, transparent), transparent) !important;
}

.konto-bild-waehler {
  display: block;
  margin: 0 auto 0.3rem;
  width: 84px;
  height: 84px;
  cursor: pointer;
}
.konto-bild-vorschau {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border: 1px dashed var(--line-strong);
  border-radius: 999px;
  font-size: 0.62rem;
  line-height: 1.3;
  text-align: center;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.konto-bild-vorschau img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }

.profil-modal { max-width: 460px; text-align: center; }
.profil-avatar-waehler {
  position: relative;
  display: inline-block;
  width: 96px;
  height: 96px;
  margin: 0.4rem auto 0;
  cursor: pointer;
}
.profil-avatar-waehler img { width: 96px; height: 96px; border-radius: 24px; object-fit: cover; border: 2px solid var(--line-strong); }
.profil-avatar-waehler img.krone { border-color: var(--neon-amber); box-shadow: 0 0 22px -4px var(--neon-amber); }
.profil-avatar-stift {
  position: absolute;
  bottom: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #08061c;
  font-size: 0.8rem;
  border: 2px solid var(--bg-0);
}

.profil-werte { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; margin: 1.1rem 0; }
.profil-wert { padding: 0.7rem 0.3rem; border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.03); }
.profil-wert strong { display: block; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent); }
.profil-wert span { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }

.profil-rangliste-feld { margin-top: 1rem; text-align: left; }

/* ------------------------------ Rangliste ------------------------------ */
.rangliste-liste { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; max-height: 320px; overflow-y: auto; }
.rangliste-eintrag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.6rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.86rem;
}
.rangliste-eintrag .rang { width: 1.6em; font-family: var(--font-mono); font-weight: 700; color: var(--text-faint); flex-shrink: 0; }
.rangliste-eintrag .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangliste-eintrag .siege { color: var(--neon-lime); font-family: var(--font-mono); font-weight: 700; font-size: 0.78rem; }
.rangliste-eintrag .niederlagen { color: var(--text-faint); font-family: var(--font-mono); font-size: 0.78rem; }
.rangliste-eintrag.crew {
  background: linear-gradient(90deg, color-mix(in srgb, var(--neon-amber) 14%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--neon-amber) 30%, transparent);
}
.krone-abzeichen { font-size: 0.78em; }