/* =====================================================
   FIREHELMET - STYLE 4/8: EVENTS
   ---------------------------------------------------
   Community-Boss, Sprachumschalter, Support, Zahlenschloesser,
   Paket-Countdown, Riss-Effekt, Update-Mitteilung, Tagesbonus,
   Desktop-Sidebar, Ranglisten-Podest und die mobile Tableiste.

   ACHTUNG REIHENFOLGE: diese Dateien waren bis zum Aufteilen
   EINE Datei mit 13.539 Zeilen. An mehreren Stellen entscheidet
   allein die Reihenfolge, welche Regel gewinnt (gleich starke
   Selektoren, spaeter schlaegt frueher). Die Einbindung in
   index.html muss daher genau in dieser Nummerierung bleiben -
   eine umgestellte oder vergessene Datei aendert das Aussehen.
===================================================== */

/* =====================================================
   COMMUNITY-BOSS
===================================================== */
.boss-content {
  max-width: 650px;
  margin: auto;
}

.boss-reset-countdown {
  margin-top: 15px;
  font-size: 14px;
  color: #999;
  letter-spacing: .5px;
}

/* Bühne mit dem Boss-Emoji, inkl. Glow und Wackel-Effekt bei Treffern */
.boss-stage {
  position: relative;
  /* Waechst mit der Seite, bleibt aber quadratisch (das Canvas
     zeichnet in ein Quadrat). Vorher fest 320px - auf breiten
     Schirmen stand der Boss dadurch klein in viel leerem Raum. */
  width: min(420px, 78vw);
  height: min(420px, 78vw);
  margin: 18px auto 20px;
  perspective: 1000px;
}

.boss-content { max-width: 720px; }

/* Statischer, weich pulsierender Glow hinter der Bühne (nur
   opacity/filter, rührt nie an "transform" - das Zittern beim
   Treffer läuft komplett im Canvas selbst, damit sich hier
   nichts in die Quere kommt). Wird bei sinkender HP automatisch
   kräftiger und rötlicher, siehe --boss-rage (von JS gesetzt). */
.boss-stage::before {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--boss-accent), transparent 70%);
  background: radial-gradient(circle, color-mix(in srgb, var(--boss-accent), var(--fh-danger) calc(var(--boss-rage, 0) * 100%)), transparent 70%);
  filter: blur(30px);
  opacity: calc(.35 + var(--boss-rage, 0) * .35);
  animation: bossGlowPulse 3s ease-in-out infinite;
  z-index: 0;
}

@keyframes bossGlowPulse {
  0%, 100% { opacity: calc(.35 + var(--boss-rage, 0) * .35); }
  50%      { opacity: calc(.65 + var(--boss-rage, 0) * .35); }
}

/* Ovaler Boden-Schatten, gibt dem 3D-Dreh-Effekt eine "Bühne" */
.boss-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 55%;
  height: 24px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(0,0,0,.55), transparent 70%);
  z-index: 0;
  animation: bossShadowPulse 4.2s ease-in-out infinite;
}

@keyframes bossShadowPulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: .8; }
  50%      { transform: translateX(-50%) scaleX(.85); opacity: .5; }
}

/* Der Boss dreht sich kontinuierlich sanft wie auf einem Podest
   (echte CSS-3D-Rotation der Leinwand selbst) - läuft komplett
   unabhängig vom Canvas-internen Zittern beim Treffer, kann sich
   also nie in die Quere kommen */
.boss-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: boss3DTurn 8s ease-in-out infinite;
}

@keyframes boss3DTurn {
  0%, 100% { transform: rotateY(-9deg) rotateX(2deg); }
  50%      { transform: rotateY(9deg) rotateX(-2deg); }
}

.boss-hit-number {
  position: absolute;
  top: 20%;
  font-size: 26px;
  font-weight: bold;
  color: #ff6d6d;
  text-shadow: 0 0 12px rgba(255,109,109,.8);
  animation: bossHitFloat 1.2s ease-out forwards;
  pointer-events: none;
  z-index: 5;
}

@keyframes bossHitFloat {
  0%   { transform: translateY(0);    opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0; }
}

.boss-name {
  font-family: var(--fh-font-display);
  font-size: 32px;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 0 20px var(--boss-accent);
  margin-bottom: 8px;
}

.boss-flavor {
  color: #aaa;
  font-size: 15px;
  max-width: 480px;
  margin: 0 auto 25px;
  line-height: 1.5;
}

/* HP-Leiste mit Metallrahmen + verzögertem "Geister"-Balken
   dahinter (klassischer RPG-Schaden-Effekt: der helle Hauptbalken
   springt sofort, der dunklere Geister-Balken zieht erst danach
   sanft nach - so sieht man genau, wie viel gerade weggenommen
   wurde) */
.boss-hp-track {
  position: relative;
  max-width: 480px;
  height: 34px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--fh-border-strong);
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,.5),
    0 0 0 3px rgba(0,0,0,.35),
    0 0 18px -4px rgba(214,168,79,.4);
  overflow: hidden;
}

/* Glasige Hochglanz-Kante oben auf der Leiste - macht aus dem
   flachen Farbverlauf ein greifbareres, "poliertes" Metallrohr. */
.boss-hp-track::after {
  content: "";
  position: absolute;
  inset: 2px 3px auto 3px;
  height: 40%;
  border-radius: 999px 999px 40% 40% / 999px 999px 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 3;
}

.boss-hp-ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  background: rgba(210, 60, 40, .55);
  transition: width .9s ease-out;
}

.boss-hp-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  background: linear-gradient(90deg, #ff6d6d, #ffb020);
  box-shadow: 0 0 16px rgba(255,109,109,.5);
  transition: width .35s ease-out;
}

.boss-hp-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

.boss-hp-meta {
  max-width: 480px;
  margin: 10px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
}

.boss-hp-numeric {
  color: var(--fh-muted-fg);
}

.boss-phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.5);
  background: rgba(214,168,79,.12);
  color: var(--fh-gold-bright);
  font-family: var(--fh-font-display);
  font-size: 11px;
  letter-spacing: .1em;
}

.boss-phase-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fh-gold-bright);
  box-shadow: 0 0 8px rgba(240,201,106,.8);
  animation: fhBossPhaseBadgeDotPulse 1.8s ease-in-out infinite;
}

@keyframes fhBossPhaseBadgeDotPulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50%      { opacity: 1;  transform: scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
  .boss-phase-badge::before {
    animation: none;
  }
}

.boss-defeated-banner {
  margin-top: 25px;
  font-size: 20px;
  font-weight: bold;
  color: #7dffa8;
  text-shadow: 0 0 20px rgba(125,255,168,.6);
  animation: bossDefeatedPop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bossDefeatedPop {
  0%   { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}

.boss-attack-btn {
  margin-top: 30px;
  font-size: 19px;
  padding: 16px 46px;
  background: linear-gradient(135deg, var(--boss-accent), #1a0a05);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  transition: transform .15s, box-shadow .2s, filter .2s;
}

.boss-attack-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  filter: brightness(1.2);
  box-shadow: 0 14px 35px rgba(0,0,0,.5);
}

.boss-attack-btn:active:not(:disabled) {
  transform: translateY(0) scale(.97);
}

/* =====================================================
   SPRACH-UMSCHALTER (echter Toggle-Switch)
===================================================== */
.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  width: 148px;
  height: 42px;
  margin-bottom: 35px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .3s, background .3s;
}

.lang-switch:hover {
  border-color: rgba(var(--menu-rgb1), .6);
}

.lang-switch-label {
  position: relative;
  z-index: 2;
  flex: 1;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  transition: color .35s ease;
  pointer-events: none;
}

.lang-switch-label-de { color: #ffe9b0; }

.lang-switch.is-en .lang-switch-label-de { color: #888; }
.lang-switch.is-en .lang-switch-label-en { color: #ffe9b0; }

/* Gleitender Knopf hinter dem aktiven Label, mit sanftem Bounce */
.lang-switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 4px);
  height: calc(100% - 6px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(var(--menu-rgb1),.4), rgba(var(--menu-rgb2),.4));
  box-shadow: 0 0 14px rgba(var(--menu-rgb1),.5);
  transition: transform .4s cubic-bezier(0.34, 1.56, 0.64, 1), background .4s;
  z-index: 1;
}

.lang-switch.is-en .lang-switch-knob {
  transform: translateX(calc(100% + 2px));
}

/* Winziger, kaum sichtbarer versteckter Code (Easter Egg) */
.hidden-code-hint {
  display: block;
  margin-top: 60px;
  margin-bottom: 20px;
  text-align: right;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.09);
  user-select: text;
  cursor: default;
}

/* Discord-Login: eigene Marken-Farbe (Blurple) */
.discord-login-btn {
  border-color: rgba(88,101,242,.5);
  background: rgba(88,101,242,.2);
  color: #dcdfff;
}

.discord-login-btn:hover {
  background: rgba(88,101,242,.4);
  box-shadow: 0 0 30px rgba(88,101,242,.5);
}

.discord-login-btn .twitch-icon {
  fill: #dcdfff;
}

.twitch-login-area {
  flex-wrap: wrap;
  justify-content: center;
}

.login-provider-label {
  display: block;
  color: #999;
  font-size: 12px;
  font-weight: normal;
}

/* =====================================================
   SUPPORT
===================================================== */
.support-content {
  max-width: 680px;
  margin: auto;
  position: relative;
}

.support-report-box {
  position: relative;
  margin-top: 40px;
  padding: 28px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
  transition: box-shadow .4s, border-color .4s, transform .3s;
}

.support-report-box h2 {
  font-size: 21px;
  margin-bottom: 15px;
  color: var(--menu-hex3);
  text-shadow: 0 0 14px rgba(255,215,107,.35);
}

.support-report-textarea {
  width: 100%;
  min-height: 110px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.05);
  color: white;
  font-size: 15px;
  font-family: inherit;
  resize: vertical;
  margin-bottom: 15px;
  transition: border-color .2s, box-shadow .2s;
}

.support-report-textarea:focus {
  outline: none;
  border-color: rgba(77,163,255,.6);
  box-shadow: 0 0 20px rgba(77,163,255,.25);
}

/* =====================================================
   ZAHLENSCHLÖSSER (Streamrätsel-Finale)
===================================================== */
.combo-lock-wrap {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
  perspective: 900px;
}

.combo-lock {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-style: preserve-3d;
  animation: comboLockIdleTilt 6s ease-in-out infinite;
  transition: transform .4s ease;
}

.combo-lock:hover {
  animation-play-state: paused;
  transform: rotateX(10deg) rotateY(-14deg) translateY(-6px) scale(1.04);
}

@keyframes comboLockIdleTilt {
  0%, 100% { transform: rotateX(6deg) rotateY(-8deg); }
  50%      { transform: rotateX(6deg) rotateY(8deg); }
}

/* Bügel als 3D-Zylinder-Optik über einem Metall-Gradient */
.combo-shackle {
  width: 70px;
  height: 55px;
  border: 12px solid #8a8f99;
  border-image: linear-gradient(90deg, #52565e, #d7dbe2 35%, #9aa0aa 55%, #52565e) 1;
  border-bottom: none;
  border-radius: 35px 35px 0 0;
  margin-bottom: -18px;
  z-index: 1;
  box-shadow: 0 -2px 6px rgba(0,0,0,.4), inset 0 2px 3px rgba(255,255,255,.35);
  transform: translateZ(10px);
  transition: transform .6s cubic-bezier(0.34, 1.56, 0.64, 1), border-color .4s;
}

.combo-lock-red .combo-shackle {
  border-image: linear-gradient(90deg, #6e1f1f, #ff9a9a 35%, #c94c4c 55%, #6e1f1f) 1;
}

.combo-lock-black .combo-shackle {
  border-image: linear-gradient(90deg, #1a1a1a, #a0a0a0 35%, #555 55%, #1a1a1a) 1;
}

/* Schloss-Körper: mehrschichtiger 3D-Block mit Seitenkante + Glanz-Sweep */
.combo-body {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding: 20px 18px;
  border-radius: 16px;
  box-shadow:
    0 22px 40px rgba(0,0,0,.55),
    0 3px 0 rgba(255,255,255,.12) inset,
    0 -6px 14px rgba(0,0,0,.35) inset;
  transform: translateZ(0);
  transform-style: preserve-3d;
  overflow: hidden;
  transition: box-shadow .4s;
}

/* Fake-3D Seitenkante rechts, wie eine echte Gehäusetiefe */
.combo-body::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: -9px;
  width: 10px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1));
  transform: rotateY(70deg);
  transform-origin: left center;
  z-index: -1;
}

/* Wandernder Glanzstreifen über das Metallgehäuse */
.combo-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.25) 38%, transparent 55%);
  background-size: 250% 100%;
  animation: comboBodyShine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes comboBodyShine {
  0%   { background-position: 200% 0; }
  60%  { background-position: -50% 0; }
  100% { background-position: -50% 0; }
}

.combo-lock-red .combo-body {
  background: linear-gradient(160deg, #d15656, #6e1f1f 65%, #4a1414);
  border: 2px solid #e06060;
}

.combo-lock-black .combo-body {
  background: linear-gradient(160deg, #3a3a3a, #101010 65%, #050505);
  border: 2px solid #555;
}

.combo-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translateZ(6px);
}

.combo-arrow {
  width: 30px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  box-shadow: 0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.3);
  color: white;
  font-size: 12px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
}

.combo-arrow:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.15));
  transform: translateY(-1px);
}

.combo-arrow:active {
  transform: translateY(1px) scale(.95);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.5);
}

/* Ziffern-Walze: wirkt wie ein eingelassenes 3D-Zylinderrad */
.combo-digit {
  width: 34px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #050505, #141414 45%, #050505);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    inset 0 4px 6px rgba(0,0,0,.7),
    inset 0 -3px 4px rgba(255,255,255,.06);
  font-size: 26px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  color: #4ade80;
  text-shadow: 0 0 8px rgba(74,222,128,.7);
  transition: transform .3s, box-shadow .3s;
}

.combo-label {
  margin-top: 14px;
  font-size: 14px;
  color: #aaa;
  letter-spacing: 1px;
  transform: translateZ(4px);
}

/* Geöffneter Zustand */
.combo-lock-open .combo-shackle {
  transform: translateZ(10px) translateY(-22px) rotate(-25deg);
  border-color: var(--menu-hex3) !important;
}

.combo-lock-open .combo-body {
  box-shadow:
    0 0 55px rgba(255,215,107,.65),
    0 22px 40px rgba(0,0,0,.55),
    0 3px 0 rgba(255,255,255,.12) inset;
}

.combo-lock-open .combo-digit {
  color: var(--menu-hex3);
  text-shadow: 0 0 12px rgba(255,215,107,.9);
  transform: translateZ(4px);
}

.combo-lock-open .combo-arrow {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}

/* =====================================================
   FINALE-ANIMATION (beide Schlösser offen)
===================================================== */
.stream-finale {
  margin-top: 60px;
  opacity: 0;
  transform: scale(.85) translateY(20px);
  pointer-events: none;
  transition: opacity .8s ease, transform .8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stream-finale.visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
  animation: streamFinalePulse 2.4s ease-in-out infinite;
}

@keyframes streamFinalePulse {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(255,215,107,.4)); }
  50%      { filter: drop-shadow(0 0 45px rgba(255,215,107,.8)); }
}

.stream-finale-text {
  font-size: 34px;
  font-weight: bold;
  letter-spacing: 1px;
  color: var(--menu-hex3);
  text-shadow: 0 0 25px rgba(255,215,107,.8);
}

/* =====================================================
   PAKET-COUNTDOWN MIT LKW
===================================================== */
.package-countdown {
  margin-top: 50px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity .8s ease .3s, transform .8s cubic-bezier(0.34, 1.56, 0.64, 1) .3s;
}

.package-countdown.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.package-countdown-label {
  font-size: 18px;
  font-weight: 600;
  color: #ffe9b0;
  margin-bottom: 22px;
  letter-spacing: .5px;
}

.package-progress-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.5);
  overflow: visible;
}

.package-progress-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4af37, #ffe9b0);
  box-shadow: 0 0 14px rgba(255,215,107,.6);
  transition: width 1s linear;
}

/* kleine, sich wiederholende Fahrbahn-Streifen unterm Balken */
.package-progress-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 10px, transparent 10px 22px);
  opacity: .5;
}

.package-truck {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -60%);
  font-size: 26px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  transition: left 1s linear;
  animation: packageTruckBounce .5s ease-in-out infinite;
}

@keyframes packageTruckBounce {
  0%, 100% { transform: translate(-50%, -60%) rotate(0deg); }
  50%      { transform: translate(-50%, -66%) rotate(-2deg); }
}

.package-flag {
  position: absolute;
  top: 50%;
  font-size: 18px;
  transform: translateY(-50%);
}

.package-flag-start {
  left: -4px;
}

.package-flag-end {
  right: -4px;
}

.package-countdown.arrived .package-countdown-label {
  color: #7dffa8;
  text-shadow: 0 0 18px rgba(125,255,168,.7);
}

.package-countdown.arrived .package-progress-fill {
  background: linear-gradient(90deg, #4ade80, #7dffa8);
  box-shadow: 0 0 18px rgba(125,255,168,.7);
}

.package-countdown.arrived .package-truck {
  animation: packageArrivedPop .6s ease;
}

@keyframes packageArrivedPop {
  0%   { transform: translate(-50%, -60%) scale(1); }
  50%  { transform: translate(-50%, -60%) scale(1.5); }
  100% { transform: translate(-50%, -60%) scale(1.2); }
}

@media (max-width: 600px) {
  .package-countdown-label {
    font-size: 15px;
  }

  .package-truck {
    font-size: 20px;
  }
}

@media (max-width: 900px) {
  .combo-lock-wrap {
    gap: 30px;
  }

  .combo-digit {
    width: 26px;
    height: 36px;
    font-size: 20px;
  }

  .stream-finale-text {
    font-size: 22px;
  }
}

/* =====================================================
   COUNTDOWN RISS-EFFEKT
===================================================== */
.home-crack-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.home-reveal-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(25px) brightness(.6);
  transition: opacity 3s ease, filter 3s ease;
}

/* Ab Stufe 5: Bild ganz leicht und unscharf erkennbar */
.home-tier-5 .home-reveal-image {
  opacity: .16;
  filter: blur(18px) brightness(.7);
}

.home-crack-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-crack {
  fill: none;
  stroke: rgba(255,255,255,.5);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.3));
  transition: opacity 1.5s ease;
}

/* Stufe 3 (≤30 Tage): erste, dünne Risse langsam einzeichnen */
.home-tier-3 .tier-3-crack {
  opacity: .35;
  stroke-width: 1.2;
  animation: crackDrawIn 3s ease forwards;
}

/* Stufe 4 (≤20 Tage): mehr + etwas größere Risse */
.home-tier-4 .tier-3-crack {
  opacity: .55;
  stroke-width: 2;
}

.home-tier-4 .tier-4-crack {
  opacity: .5;
  stroke-width: 2.4;
  animation: crackDrawIn 2.5s ease forwards;
}

/* Stufe 5 (≤10 Tage): zersplittert - alle Risse kräftig sichtbar */
.home-tier-5 .tier-3-crack {
  opacity: .75;
  stroke-width: 2.4;
  stroke: rgba(255,255,255,.7);
}

.home-tier-5 .tier-4-crack {
  opacity: .7;
  stroke-width: 3;
  stroke: rgba(255,255,255,.7);
}

.home-tier-5 .tier-5-crack {
  opacity: .8;
  stroke-width: 2.6;
  stroke: rgba(255,255,255,.8);
  animation: crackDrawIn 2s ease forwards, crackFlicker 3.5s ease-in-out infinite 2s;
}

@keyframes crackDrawIn {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}

@keyframes crackFlicker {
  0%, 100% { opacity: .8; }
  50%      { opacity: .5; }
}

@media (max-width: 900px) {
  .home-crack {
    stroke-width: 1;
  }
}

/* =====================================================
   ZIFFER-ZUSTÄNDE IN DEN ZAHLENSCHLÖSSERN
===================================================== */
.combo-dial-locked {
  opacity: .35;
}

.combo-dial-locked .combo-digit {
  color: #666;
  text-shadow: none;
}

.combo-dial-active .combo-digit {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,.6);
}

.combo-dial-active .combo-arrow {
  background: rgba(255,215,107,.25);
}

.combo-dial-active .combo-arrow:hover {
  background: rgba(255,215,107,.45);
}

.combo-dial-confirmed .combo-digit {
  color: #4ade80;
  text-shadow: 0 0 10px rgba(74,222,128,.7);
}

.combo-dial-confirmed .combo-arrow {
  opacity: .25;
}

.combo-check-btn {
  margin-top: 35px;
}

/* ======================================================
   DECRYPT-HOVEREFFEKT FÜR DEN "BESTÄTIGEN"-BUTTON BEI CODES
====================================================== */
#code-confirm-btn {
  position: relative;
  overflow: visible;
  border: 1px solid transparent;
  background: rgba(0, 15, 8, .6);
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
  isolation: isolate;
  /* Dieser Knopf hat als einziger eine eigene ID-Regel und damit mehr
     Gewicht als die Sammelregel in css/80-interaktion.css. Das ist
     gewollt - der Decrypt-Effekt darunter ist von Hand gebaut. Nur
     die Kurve wird angeglichen, die Eigenschaften bleiben. */
  transition: color var(--fh-dauer-lang) var(--fh-ease),
              transform var(--fh-dauer) var(--fh-ease);
}

/* Rotierender Glow-Rahmen, nur beim Hover sichtbar */
#code-confirm-btn::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 17px;
  padding: 3px;
  background: conic-gradient(from 0deg, #50ff8c, #0a2, #50ff8c, #c8ffe0, #50ff8c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s;
  animation: codeBtnRotateBorder 2.5s linear infinite;
  z-index: -1;
}

/* Sweep-Glanz, der beim Hover einmal durchläuft */
#code-confirm-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background: linear-gradient(115deg, transparent 30%, rgba(200,255,224,.55) 48%, rgba(80,255,140,.35) 52%, transparent 70%);
  background-size: 250% 100%;
  background-position: 150% 0;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

#code-confirm-btn:hover {
  color: #dfffe9;
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 30px rgba(80,255,140,.35), 0 0 18px rgba(80,255,140,.5);
  animation: codeConfirmFlicker 1.4s infinite;
}

#code-confirm-btn:hover::before {
  opacity: 1;
}

#code-confirm-btn:hover::after {
  opacity: 1;
  animation: codeBtnSweep 1s ease forwards;
}

#code-confirm-btn:active {
  transform: translateY(0) scale(.98);
}

@keyframes codeBtnRotateBorder {
  to { filter: hue-rotate(360deg); }
}

@keyframes codeBtnSweep {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@keyframes codeConfirmFlicker {
  0%, 100% { box-shadow: 0 8px 30px rgba(80,255,140,.35), 0 0 18px rgba(80,255,140,.55), 0 0 40px rgba(80,255,140,.25); }
  50%      { box-shadow: 0 8px 22px rgba(80,255,140,.2),  0 0 10px rgba(80,255,140,.3),  0 0 20px rgba(80,255,140,.12); }
}

/* ======================================================
   AMBIENTE HINTERGRUND-ANIMATION FÜR DIE CODES-SEITE
====================================================== */
#code {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 20%, rgba(10,40,25,.55), #060b09 70%);
}

.code-ambient-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Das Glitch-Zeichenraster (scripts/codes/code-ambient-fx.js).
   Es loeste den Matrix-Regen ab; die weichgezeichneten Glow-Orbs,
   die dessen duenne Spalten auffuellen sollten, sind damit
   entfallen. */
.code-glitch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .28;
}

/* Randabdunklung: das Raster reicht bis in die Ecken, soll dem
   Inhalt in der Mitte aber nicht ins Gehege kommen. Statisch, also
   ohne Kosten pro Bild. */
.code-ambient-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 34% at 50% 40%,
              rgba(6,11,9,.94) 0%, rgba(6,11,9,.72) 55%, rgba(6,11,9,0) 100%),
              radial-gradient(ellipse at 50% 50%,
              rgba(6,11,9,0) 40%, rgba(6,11,9,.85) 100%);
}

/* Scanlinie, die stetig über die Seite läuft */
#code::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(80,255,140,.06) 50%, transparent 100%);
  background-size: 100% 240px;
  animation: codeScanline 5s linear infinite;
}

@keyframes codeScanline {
  0%   { background-position: 0 -240px; }
  100% { background-position: 0 100vh; }
}

#code .page-content {
  position: relative;
  z-index: 2;
}

/* Kurzer RGB-Split-Glitch beim Reinhovern über den Codes-Button */
#code-confirm-btn.code-btn-glitching {
  animation: codeBtnGlitch .22s steps(2, end);
}

@keyframes codeBtnGlitch {
  0%   { text-shadow: 2px 0 #ff5d5d, -2px 0 #4da3ff; transform: translate(1px, 0); }
  25%  { text-shadow: -2px 0 #ff5d5d, 2px 0 #4da3ff; transform: translate(-1px, 0); }
  50%  { text-shadow: 2px 0 #4da3ff, -2px 0 #ff5d5d; transform: translate(1px, 0); }
  75%  { text-shadow: -1px 0 #ff5d5d, 1px 0 #4da3ff; transform: translate(-1px, 0); }
  100% { text-shadow: none; transform: translate(0, 0); }
}

/* 3D-Flip-Animation, wenn eine Ziffer am Zahlenschloss verstellt wird */
.combo-digit-flip {
  animation: comboDigitFlip .25s ease;
}

@keyframes comboDigitFlip {
  0%   { transform: rotateX(0deg); }
  50%  { transform: rotateX(90deg); filter: brightness(1.6); }
  100% { transform: rotateX(0deg); }
}

/* Krone über dem Namen des Erstplatzierten in der Rangliste */
.leaderboard-crown {
  display: inline-block;
  margin-right: 4px;
  font-size: 15px;
  animation: leaderboardCrownFloat 1.6s ease-in-out infinite;
}

@keyframes leaderboardCrownFloat {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-3px) rotate(6deg); }
}

/* =====================================================
   UPDATE-MITTEILUNG (Popup beim ersten Besuch)
===================================================== */
.update-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(2, 3, 10, 0);
  backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  perspective: 1200px;
  transition: opacity .35s ease, background .35s ease, backdrop-filter .35s ease;
}

.update-notice-overlay:empty {
  display: none;
}

.update-notice-overlay.visible {
  opacity: 1;
  pointer-events: auto;
  background: rgba(2, 3, 10, .8);
  backdrop-filter: blur(10px);
}

.update-notice-box {
  position: relative;
  max-width: 480px;
  width: 100%;
  padding: 46px 36px 36px;
  border-radius: 28px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(20,24,46,.97), rgba(8,10,22,.99));
  border: 1px solid rgba(var(--menu-rgb1, 77,163,255), .35);
  box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 80px rgba(var(--menu-rgb1, 77,163,255), .2);
  transform: translateY(40px) scale(.85) rotateX(8deg);
  opacity: 0;
  transition: transform .55s cubic-bezier(0.22, 1.3, 0.36, 1), opacity .45s;
}

.update-notice-overlay.visible .update-notice-box {
  transform: translateY(0) scale(1) rotateX(0deg);
  opacity: 1;
  animation: updateNoticeFloat 5s ease-in-out 1s infinite;
}

@keyframes updateNoticeFloat {
  0%, 100% { transform: translateY(0) scale(1) rotateX(0deg); }
  50%      { transform: translateY(-6px) scale(1) rotateX(0deg); }
}

/* Rotierender Farbverlauf-Rahmen, wie beim Menü-Button */
.update-notice-glow {
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--menu-hex1), var(--menu-hex2), var(--menu-hex3), var(--menu-hex2), var(--menu-hex1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: menuBorderSpin 4s linear infinite;
  opacity: .7;
  z-index: -1;
}

/* Konfetti-Partikel, die im Hintergrund der Box hochsteigen */
.update-notice-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.update-notice-confetti span {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--menu-hex1);
  opacity: 0;
  animation: updateNoticeConfettiRise 3.5s ease-in infinite;
}

.update-notice-confetti span:nth-child(odd)  { background: var(--menu-hex2); }
.update-notice-confetti span:nth-child(3n)   { background: var(--menu-hex3); }
.update-notice-confetti span:nth-child(1)  { left: 4%;  animation-delay: .1s; }
.update-notice-confetti span:nth-child(2)  { left: 11%; animation-delay: 1.3s; }
.update-notice-confetti span:nth-child(3)  { left: 19%; animation-delay: .6s; }
.update-notice-confetti span:nth-child(4)  { left: 27%; animation-delay: 2.1s; }
.update-notice-confetti span:nth-child(5)  { left: 35%; animation-delay: .3s; }
.update-notice-confetti span:nth-child(6)  { left: 43%; animation-delay: 1.7s; }
.update-notice-confetti span:nth-child(7)  { left: 52%; animation-delay: .9s; }
.update-notice-confetti span:nth-child(8)  { left: 60%; animation-delay: 2.4s; }
.update-notice-confetti span:nth-child(9)  { left: 68%; animation-delay: .4s; }
.update-notice-confetti span:nth-child(10) { left: 76%; animation-delay: 1.9s; }
.update-notice-confetti span:nth-child(11) { left: 83%; animation-delay: .8s; }
.update-notice-confetti span:nth-child(12) { left: 90%; animation-delay: 2.7s; }
.update-notice-confetti span:nth-child(13) { left: 96%; animation-delay: 1.2s; }
.update-notice-confetti span:nth-child(14) { left: 58%; animation-delay: 3.1s; }

@keyframes updateNoticeConfettiRise {
  0%   { transform: translateY(0) rotate(0deg);      opacity: 0; }
  15%  { opacity: .9; }
  85%  { opacity: .7; }
  100% { transform: translateY(-420px) rotate(340deg); opacity: 0; }
}

/* "NEU"-Badge oben rechts */
.update-notice-badge {
  position: absolute;
  top: 18px;
  right: -34px;
  width: 140px;
  transform: rotate(35deg);
  background: linear-gradient(90deg, var(--menu-hex1), var(--menu-hex2));
  color: white;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 2px;
  text-align: center;
  padding: 5px 0;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  animation: updateNoticeBadgePulse 1.6s ease-in-out infinite;
  z-index: 2;
}

@keyframes updateNoticeBadgePulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.3); }
}

/* Großes, hüpfendes Icon oben */
.update-notice-icon {
  position: relative;
  font-size: 46px;
  margin-bottom: 6px;
  animation: updateNoticeIconBounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(var(--menu-rgb1,77,163,255),.6));
}

@keyframes updateNoticeIconBounce {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-8px) rotate(6deg); }
}

.update-notice-title {
  position: relative;
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, #ffffff, var(--menu-hex1), var(--menu-hex2), #ffffff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sidebarTitleShine 5s linear infinite;
}

.update-notice-image {
  position: relative;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255,255,255,.15);
}

.update-notice-message {
  position: relative;
  font-size: 16px;
  line-height: 1.6;
  color: #d8dce6;
  white-space: pre-line;
  margin-bottom: 30px;
}

.update-notice-button {
  position: relative;
  padding: 15px 40px;
  border: none;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(var(--menu-rgb1,77,163,255),.4), rgba(var(--menu-rgb2,145,70,255),.4));
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .5px;
  cursor: pointer;
  box-shadow: 0 8px 25px rgba(0,0,0,.35);
  animation: updateNoticeButtonPulse 2.2s ease-in-out infinite;
  transition: transform .2s, box-shadow .2s, background .3s;
}

@keyframes updateNoticeButtonPulse {
  0%, 100% { box-shadow: 0 8px 25px rgba(0,0,0,.35), 0 0 0 rgba(var(--menu-rgb1,77,163,255),0); }
  50%      { box-shadow: 0 8px 25px rgba(0,0,0,.35), 0 0 25px rgba(var(--menu-rgb1,77,163,255),.5); }
}

.update-notice-button:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 12px 35px rgba(var(--menu-rgb1,77,163,255),.5);
  background: linear-gradient(135deg, rgba(var(--menu-rgb1,77,163,255),.6), rgba(var(--menu-rgb2,145,70,255),.6));
  animation-play-state: paused;
}

@media (max-width: 600px) {
  .update-notice-box {
    padding: 38px 24px 28px;
  }

  .update-notice-icon {
    font-size: 36px;
  }

  .update-notice-title {
    font-size: 22px;
  }

  .update-notice-message {
    font-size: 14px;
  }

  .update-notice-badge {
    width: 120px;
    font-size: 10px;
  }
}

/* =====================================================
   ZUSÄTZLICHE ANPASSUNGEN FÜR SEHR KLEINE BILDSCHIRME
   (kleine Handys, ca. iPhone SE und schmaler)
===================================================== */
@media (max-width: 400px) {
  .hero h1,
  .hero h2 {
    font-size: clamp(26px, 9.5vw, 38px);
    letter-spacing: clamp(1px, 0.5vw, 4px);
  }

  /* "WOCHENRENNEN" nutzt (anders als die uebrigen Seiten) keine der
     .hero/.page-content/.story-library-Ueberschriften-Regeln, daher
     hier ein eigener, minimaler Fix nur fuer sehr schmale Displays -
     Schrift/Look bleibt sonst unveraendert, nur die Groesse schrumpft
     genug, damit der Text nicht abgeschnitten wird. */
  .race-fullpage h1 {
    font-size: clamp(22px, 8vw, 32px);
  }

  .time-box {
    width: 100px;
    height: 100px;
  }

  .time-box span {
    font-size: 32px;
  }

  .page-content h1,
  .story-library h1 {
    font-size: clamp(26px, 9.5vw, 38px);
    letter-spacing: clamp(1px, 0.5vw, 4px);
  }

  .menu-button {
    top: 18px;
    left: 18px;
    width: 52px;
    height: 52px;
  }

  .code-button,
  .combo-check-btn {
    padding: 14px 26px;
    font-size: 15px;
  }

  .wheel-wrapper {
    width: 190px;
    height: 190px;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 8px 8px;
    font-size: 12px;
  }

  .update-notice-box {
    padding: 26px 18px 22px;
  }
}

/* Grundsätzliche Absicherung: nichts soll je breiter als der
   Bildschirm werden und seitliches Scrollen erzwingen */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

/* =====================================================
   TAGESBONUS-ANIMATION
===================================================== */
.daily-bonus-pop {
  animation: dailyBonusPop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dailyBonusPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.daily-bonus-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 20;
}

.daily-bonus-points {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 0);
  font-size: 22px;
  font-weight: bold;
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74,222,128,.9);
  white-space: nowrap;
  animation: dailyBonusPointsFloat 1.3s ease-out forwards;
}

@keyframes dailyBonusPointsFloat {
  0%   { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  20%  { transform: translate(-50%, -20px) scale(1.1); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}

.daily-bonus-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--menu-hex3);
  box-shadow: 0 0 8px rgba(255,215,107,.9);
  transform: rotate(calc(var(--i) * 36deg)) translateX(0);
  animation: dailyBonusSparkFly .8s ease-out forwards;
}

@keyframes dailyBonusSparkFly {
  0%   { transform: rotate(calc(var(--i) * 36deg)) translateX(0);   opacity: 1; }
  100% { transform: rotate(calc(var(--i) * 36deg)) translateX(60px); opacity: 0; }
}

/* =====================================================
   BOSS-GEGENANGRIFF: ROTER BILDSCHIRM-BLITZ
===================================================== */
.boss-counter-flash {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-boss-flash);
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,30,30,.05), rgba(180,0,0,.55) 120%);
  opacity: 0;
}

.boss-counter-flash.active {
  animation: bossCounterFlash .7s ease-out;
}

@keyframes bossCounterFlash {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* =====================================================
   BOSS-RANGLISTE (Top-Angreifer)
===================================================== */
.boss-leaderboard-title {
  margin-top: 55px;
  font-size: 22px;
  color: #d4af37;
  text-shadow: 0 0 14px rgba(212,175,55,.4);
}

.boss-leaderboard-hint {
  font-size: 13px;
  color: #999;
  margin-top: 4px;
  margin-bottom: 22px;
}

.boss-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 520px;
  margin: 0 auto;
}

.boss-leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  /* unten Platz fuer den Anteilsbalken, der als letztes Kind
     absolut am Fuss der Zeile sitzt */
  padding: 10px 16px 13px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  animation: leaderboardRowIn .4s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
}

/* Anteilsbalken: Schaden im Verhaeltnis zum Besten. Aus einer
   Spalte Zahlen wird damit auf einen Blick eine Verteilung - man
   sieht, ob die Spitze davonzieht oder ob es eng ist.
   aria-hidden im HTML: die Zahl steht ohnehin daneben, der Balken
   traegt fuer Screenreader nichts bei. */
.boss-leaderboard-balken {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, .05);
}

.boss-leaderboard-balken-fuellung {
  display: block;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, rgba(212,175,55,.5), var(--fh-gold, #f0c96a));
  transition: width var(--fh-dauer-lang, 600ms) var(--fh-ease-aus, ease-out);
}

/* Auslassung zwischen den ersten zehn und der eigenen Zeile,
   wenn man weiter hinten steht. */
.boss-leaderboard-trenner {
  margin: 6px 0 2px;
  text-align: center;
  letter-spacing: .4em;
  color: var(--fh-muted, #9aa4b2);
  opacity: .6;
}

.boss-leaderboard-row:nth-child(1) { animation-delay: .02s; }
.boss-leaderboard-row:nth-child(2) { animation-delay: .06s; }
.boss-leaderboard-row:nth-child(3) { animation-delay: .10s; }
.boss-leaderboard-row:nth-child(4) { animation-delay: .14s; }
.boss-leaderboard-row:nth-child(5) { animation-delay: .18s; }

.boss-leaderboard-top {
  background: linear-gradient(90deg, rgba(212,175,55,.16), rgba(212,175,55,.03));
  border-color: rgba(212,175,55,.35);
}

.boss-leaderboard-own {
  outline: 2px solid rgba(77,163,255,.6);
  outline-offset: -2px;
}

.boss-leaderboard-rank {
  font-size: 17px;
  font-weight: bold;
  width: 30px;
  text-align: center;
  flex-shrink: 0;
}

.boss-leaderboard-name {
  flex: 1;
  text-align: left;
  font-weight: 600;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.boss-leaderboard-damage {
  font-size: 13px;
  color: #ff9d9d;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .boss-leaderboard-name {
    font-size: 13px;
  }

  .boss-leaderboard-damage {
    font-size: 11px;
  }
}

/* =====================================================
   FESTE DESKTOP-SIDEBAR (v0-Design-Referenz)
   Nur ab 1024px sichtbar. Darunter bleibt das bisherige
   Hamburger-Menü (.menu-button/.sidebar) die Navigation.
===================================================== */
@media (min-width: 1024px) {
  .menu-button {
    display: none;
  }
}

.fh-sidebar {
  display: none;
}

@media (min-width: 1024px) {
  .fh-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    align-items: center;
    width: var(--fh-rail-w);
    height: 100dvh;
    padding: 14px 0 10px;
    z-index: var(--fh-z-sidebar);
    background: rgba(11, 18, 28, .86);
    backdrop-filter: blur(16px);
    border-right: 1px solid var(--fh-border);
  }
}

/* Canvas von scripts/fx/sidebar-ambient-3d.js - als erstes Kind
   von #fh-sidebar eingefuegt, damit die spaeteren Geschwister
   (Logo/Nav/Footer) im normalen Fluss darueber gerendert werden. */
#fh-sidebar-ambient-webgl {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fh-sidebar-logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 22px;
}

.fh-sidebar-flame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 22px;
  background: linear-gradient(135deg, var(--fh-fire), var(--fh-fire-deep));
  box-shadow: 0 0 22px -4px rgba(255,106,42,.8);
  flex-shrink: 0;
}

.fh-sidebar-brand {
  line-height: 1.1;
}

.fh-sidebar-title {
  font-family: var(--fh-font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--fh-gold-bright);
  text-shadow: 0 0 18px rgba(240,201,106,.5);
}

.fh-sidebar-title span {
  color: var(--fh-gold);
}

.fh-sidebar-subtitle {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.fh-sidebar-nav {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px;
  overflow-y: auto;
}

.fh-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: var(--fh-font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
  cursor: pointer;
  overflow: hidden;
  transition: color .2s, background .2s, transform .2s, letter-spacing .2s;
  text-decoration: none;
  animation: fhNavItemIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
}

/* nth-of-type statt nth-child: zaehlt nur <a>-Geschwister, damit die
   .fh-nav-section-label-<p>-Elemente (Menü-Gruppenueberschriften)
   dazwischen die Reihenfolge/Verzoegerung nicht verschieben. */
.fh-sidebar-nav .fh-nav-item:nth-of-type(1)  { animation-delay: .03s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(2)  { animation-delay: .07s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(3)  { animation-delay: .11s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(4)  { animation-delay: .15s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(5)  { animation-delay: .19s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(6)  { animation-delay: .23s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(7)  { animation-delay: .27s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(8)  { animation-delay: .31s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(9)  { animation-delay: .35s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(10) { animation-delay: .39s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(11) { animation-delay: .43s; }
.fh-sidebar-nav .fh-nav-item:nth-of-type(12) { animation-delay: .47s; }

@keyframes fhNavItemIn {
  0%   { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Flüssigkeits-artiger "Pour"-Effekt: steigt beim Hover von unten
   hoch, in der Farbe der aktuell aktiven Sprache (--menu-rgb*
   wechselt automatisch zwischen Blau/DE und Orange/EN) */
.fh-nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--menu-rgb3),.3), rgba(var(--menu-rgb1),.35), rgba(var(--menu-rgb2),.3));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .5s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
  border-radius: 10px;
}

.fh-nav-item:hover::before {
  transform: scaleY(1);
}

/* Wandernder Glanzstreifen beim Hover */
.fh-nav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(214,168,79,.18) 48%, transparent 66%);
  background-size: 250% 100%;
  background-position: 200% 0;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}

.fh-nav-item:hover::after {
  opacity: 1;
  animation: fhNavSweep .7s ease forwards;
}

@keyframes fhNavSweep {
  0%   { background-position: 200% 0; }
  100% { background-position: -50% 0; }
}

.fh-nav-item:hover {
  transform: translateX(4px);
  color: var(--fh-fg);
  background: rgba(255,255,255,.04);
}

.fh-nav-item.fh-nav-active {
  color: var(--fh-fg);
  background: linear-gradient(90deg, rgba(214,168,79,.15), transparent);
  border: 1px solid rgba(214,168,79,.4);
  animation: fhNavItemIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards, fhNavActivePulse 2.4s ease-in-out infinite;
}

@keyframes fhNavActivePulse {
  0%, 100% { box-shadow: 0 0 0 rgba(214,168,79,0); }
  50%      { box-shadow: 0 0 16px rgba(214,168,79,.35); }
}

.fh-nav-item.fh-nav-active::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--fh-gold);
  box-shadow: 0 0 12px rgba(240,201,106,.9);
}

.fh-sidebar-footer {
  padding: 18px;
}

.fh-sidebar-footer-label {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.fh-sidebar-footer-status {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--fh-border);
  background: rgba(255,255,255,.03);
  font-size: 13px;
  color: var(--fh-fg);
}

.fh-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fh-success);
  box-shadow: 0 0 8px var(--fh-success);
  flex-shrink: 0;
}

/* =====================================================
   RANGLISTEN-PODEST (v0-Design-Referenz)
   Ergänzt die bestehende Tabelle, ersetzt sie nicht.
===================================================== */
.fh-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  max-width: 480px;
  margin: 35px auto 45px;
}

.fh-podium-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  animation: leaderboardRowIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
}

.fh-podium-rank-2 { animation-delay: .05s; }
.fh-podium-rank-1 { animation-delay: .15s; }
.fh-podium-rank-3 { animation-delay: .25s; }

.fh-podium-crown {
  font-size: 20px;
  margin-bottom: 4px;
  animation: leaderboardCrownFloat 1.6s ease-in-out infinite;
}

.fh-podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 2px solid var(--fh-border-strong);
  margin-bottom: 8px;
}

.fh-podium-rank-1 .fh-podium-avatar {
  width: 72px;
  height: 72px;
  font-size: 32px;
  border-color: var(--fh-gold-bright);
  box-shadow: 0 0 22px rgba(240,201,106,.6);
}

.fh-podium-rank-2 .fh-podium-avatar { border-color: #c8c8dc; }
.fh-podium-rank-3 .fh-podium-avatar { border-color: #cd7f32; }

.fh-podium-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fh-podium-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fh-podium-score {
  font-size: 12px;
  color: var(--fh-muted-fg);
  margin-bottom: 8px;
}

.fh-podium-pedestal {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 8px;
  font-family: var(--fh-font-display);
  font-weight: 700;
  font-size: 20px;
  color: rgba(255,255,255,.5);
  border-radius: 8px 8px 0 0;
}

.fh-podium-rank-1 .fh-podium-pedestal {
  height: 90px;
  background: linear-gradient(180deg, rgba(240,201,106,.35), rgba(240,201,106,.08));
  border: 1px solid rgba(240,201,106,.5);
  border-bottom: none;
  color: var(--fh-gold-bright);
}

.fh-podium-rank-2 .fh-podium-pedestal {
  height: 65px;
  background: linear-gradient(180deg, rgba(200,200,220,.3), rgba(200,200,220,.06));
  border: 1px solid rgba(200,200,220,.4);
  border-bottom: none;
}

.fh-podium-rank-3 .fh-podium-pedestal {
  height: 48px;
  background: linear-gradient(180deg, rgba(205,127,50,.3), rgba(205,127,50,.06));
  border: 1px solid rgba(205,127,50,.4);
  border-bottom: none;
}

@media (max-width: 600px) {
  .fh-podium-avatar { width: 44px; height: 44px; font-size: 20px; }
  .fh-podium-rank-1 .fh-podium-avatar { width: 58px; height: 58px; font-size: 26px; }
  .fh-podium-name { font-size: 11px; max-width: 75px; }
}

/* =====================================================
   UNTERE TAB-LEISTE (Mobile/Tablet)
===================================================== */
/* Gemeinsamer fixierter Wrapper fuer Spielerkarte + Tableiste, siehe
   index.html - beide stapeln sich per Flex-Layout, dadurch muss die
   Hoehe der Tableiste nirgendwo als fester Pixelwert geraten werden. */
.fh-mobile-bottom-stack {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--fh-z-bottom-nav);
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .fh-mobile-bottom-stack {
    display: none;
  }
}

.fh-bottom-nav {
  display: flex;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: rgba(10, 14, 24, .92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--fh-border);
}

.fh-bottom-nav-item {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--fh-muted-fg);
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  transition: color .2s, background .2s, transform .15s;
  text-decoration: none;
  font-family: var(--fh-font-sans);
}

.fh-bottom-nav-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--menu-rgb3),.3), rgba(var(--menu-rgb1),.35), rgba(var(--menu-rgb2),.3));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(0.65, 0, 0.35, 1);
  z-index: -1;
  border-radius: 10px;
}

.fh-bottom-nav-item:hover::before,
.fh-bottom-nav-item:active::before,
.fh-bottom-nav-item.fh-nav-active::before {
  transform: scaleY(1);
}

.fh-bottom-nav-item:hover {
  color: var(--fh-fg);
  transform: translateY(-2px);
}

.fh-bottom-nav-item:active {
  background: rgba(255,255,255,.06);
}

.fh-bottom-nav-item.fh-nav-active {
  color: var(--fh-gold-bright);
}

.fh-bottom-nav-item.fh-nav-active .fh-bottom-nav-icon {
  animation: fhBottomNavBounce .4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fhBottomNavBounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35) translateY(-3px); }
  100% { transform: scale(1); }
}

/* Seit dem 1c-Umbau Phosphor-Symbole statt bunter Emoji - dieselbe
   Bildsprache wie in der Icon-Leiste und in der Schublade. Etwas
   groesser als die 19px der Emoji: eine Linienzeichnung wirkt bei
   gleicher Schriftgroesse kleiner als eine ausgefuellte Glyphe. */
.fh-bottom-nav-icon {
  font-size: 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: transform .15s;
}

.fh-bottom-nav-item:active .fh-bottom-nav-icon {
  transform: scale(.85);
}

.fh-bottom-nav-label {
  font-size: 10px;
  letter-spacing: .02em;
}

/* Platz am Seitenanfang/-ende lassen, damit Inhalte nicht hinter dem
   festen Hamburger-Button bzw. der unteren Tab-Leiste verschwinden
   (Punkt 1: Texte duerfen nicht von anderen Elementen ueberdeckt
   werden - betraf bisher v.a. Seiten mit wenig/kurzem Inhalt, bei
   denen die Ueberschrift durch die vertikale Zentrierung von .page
   zu nah am oberen Rand landete). */
@media (max-width: 1023px) {
  .page {
    padding-top: calc(90px + env(safe-area-inset-top));
    /* --fh-mobile-stack-height wird von syncMobileBottomStackHeight()
       in scripts/core/progression.js live aus der tatsaechlichen
       Hoehe von #fh-mobile-bottom-stack gemessen (Tableiste +
       ggf. sichtbare Spielerkarte) - kein geratener Pixelwert, der
       bei sich aenderndem Inhalt (z.B. Karte erscheint/verschwindet)
       aus dem Ruder laufen kann. 78px ist nur der Fallback, bevor
       JS einmal gemessen hat.
    */
    padding-bottom: calc(var(--fh-mobile-stack-height, 78px) + 16px);
  }
}

/* ======================================================
   LOGBÜCHER UND SCHATZRAD
   ---------------------------------------------------
   Beide hatten kurzzeitig eine EIGENE WebGL-Leinwand samt Huelle im
   Markup. Das ist wieder raus: es gibt jetzt EINE Effektflaeche fuer
   alle Seiten (scripts/fx/seiten-fx.js) - Chromium haelt nur 16
   WebGL-Kontexte und raeumt darueber hinaus lautlos ab. Tauwerk und
   Schatzstaub sind dorthin gezogen.

   Geblieben ist nur, was der Inhalt braucht: er muss ueber der
   Flaeche liegen. Die liegt fest positioniert bei z-index -4, also
   reicht dafuer eigentlich schon die normale Stapelung - die
   Angaben hier sind die Absicherung fuer den Fall, dass eine Seite
   spaeter einen eigenen Stapelkontext bekommt.
====================================================== */

#story,
#wheel {
  position: relative;
}

#story .story-library,
#wheel .wheel-content {
  position: relative;
  z-index: 1;
}

/* ======================================================
   BOSS: ANGRIFFSWAHL UND GEHEIMCODES
   ---------------------------------------------------
   Drei Grundangriffe, darunter die elf Spezialangriffe. Nicht
   freigeschaltete werden absichtlich NICHT versteckt - man soll
   sehen, dass es sie gibt, ohne zu erfahren, wie der Code lautet.

   Die ganze Leiste ist ausgeblendet, solange die Migration
   10-boss-attacks.sql nicht eingespielt ist (das hidden-Attribut
   setzt renderBossAngriffswahl()).
====================================================== */
.fh-boss-angriffswahl {
  margin: 18px 0 14px;
  text-align: left;
}

.fh-boss-wahl-titel {
  margin: 0 0 8px;
  font-family: var(--fh-font-display, inherit);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fh-muted, #9aa4b2);
}

.fh-boss-wahl-titel + .fh-boss-angriff-reihe { margin-bottom: 18px; }

.fh-boss-angriff-reihe {
  display: grid;
  /* auto-fit statt fester Spaltenzahl: drei Grundangriffe stehen
     nebeneinander, elf Spezialangriffe umbrechen von selbst. */
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
}

.fh-boss-angriff {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--fh-radius, 12px);
  background: rgba(12, 16, 26, .58);
  color: inherit;
  cursor: pointer;
  transition-duration: var(--fh-dauer, 200ms);
  transition-timing-function: var(--fh-ease-aus, ease-out);
  transition-property: border-color, background-color, transform, opacity;
}

.fh-boss-angriff:hover:not(:disabled) {
  border-color: rgba(240, 201, 106, .45);
  background: rgba(20, 26, 40, .75);
}

.fh-boss-angriff:active:not(:disabled) { transform: scale(.97); }

.fh-boss-angriff.ist-gewaehlt {
  border-color: var(--fh-gold, #f0c96a);
  background: rgba(240, 201, 106, .10);
}

/* Verschlossen und noch-nicht-bereit sehen unterschiedlich aus:
   das eine hat man nie gehabt, das andere gerade erst benutzt. */
.fh-boss-angriff.ist-zu { opacity: .45; cursor: default; }
.fh-boss-angriff.ist-gesperrt { opacity: .6; cursor: default; }

/* Ruhepause ist etwas anderes als eine Sperre: der Angriff selbst
   waere bereit, aber man darf ueberhaupt nicht angreifen. Deshalb
   ein eigener, kuehler Ton statt derselben Graustufe. */
.fh-boss-angriff.ist-ruhe {
  opacity: .55;
  cursor: default;
  border-color: rgba(120, 170, 255, .25);
}

/* Kopfzeile: Symbol links, Schadensspanne rechts. Die Spanne kommt
   aus boss_attack_defs auf dem Server - sie steht bewusst neben dem
   Symbol und nicht im Text, damit man die vierzehn Karten an dieser
   einen Stelle vergleichen kann, ohne zu lesen. */
.fh-boss-angriff-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fh-boss-angriff-symbol { font-size: 22px; line-height: 1; }

.fh-boss-angriff-spanne {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
  color: var(--fh-gold, #f0c96a);
  background: color-mix(in srgb, var(--fh-gold, #f0c96a) 12%, transparent);
}

/* Zaehler neben "Spezialangriffe": wie viele der elf man hat.
   Das Raster zeigt die verschlossenen ja weiterhin mit an - ohne
   Zaehler muesste man sie abzaehlen. */
.fh-boss-wahl-zaehler {
  margin-left: .5em;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--fh-gold, #f0c96a);
  background: color-mix(in srgb, var(--fh-gold, #f0c96a) 12%, transparent);
}

.fh-boss-angriff-name {
  font-family: var(--fh-font-display, inherit);
  font-size: 15px;
  letter-spacing: .02em;
}

.fh-boss-angriff-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--fh-muted, #9aa4b2);
}

.fh-boss-angriff-marke {
  align-self: flex-start;
  margin-top: auto;      /* immer an den Fussrand, egal wie lang der
                            Beschreibungstext der Karte ausfaellt */
  padding: 2px 7px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--fh-muted, #9aa4b2);
}

.fh-boss-angriff.ist-gesperrt .fh-boss-angriff-marke {
  color: #f0b46a;
  background: rgba(240, 180, 106, .14);
}

.fh-boss-angriff.ist-ruhe .fh-boss-angriff-marke {
  color: #8ab4ff;
  background: rgba(138, 180, 255, .14);
}

/* Gleich hohe Karten, damit die Marken auf einer Linie sitzen. */
.fh-boss-angriff-reihe { align-items: stretch; }

/* ---- Geheimcode ---- */
.fh-boss-code { margin-top: 16px; }

.fh-boss-code-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--fh-muted, #9aa4b2);
}

.fh-boss-code-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fh-boss-code-input {
  flex: 1 1 180px;
  min-width: 0;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--fh-radius, 12px);
  background: rgba(8, 11, 18, .7);
}

.fh-boss-code-input:focus-visible {
  outline: 2px solid var(--fh-gold, #f0c96a);
  outline-offset: 2px;
}

.fh-boss-code-btn { flex: 0 0 auto; }

.fh-boss-code-status {
  margin: 8px 0 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--fh-muted, #9aa4b2);
}

@media (max-width: 700px) {
  .fh-boss-angriff-reihe { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .fh-boss-angriff { padding: 10px 11px; }
  .fh-boss-angriff-text { font-size: 11.5px; }
}

/* ======================================================
   FEATURE-FLAGS + SKILL-BAUM
   (scripts/core/feature-flags.js, scripts/skilltree/)
====================================================== */

/* Gegatete Elemente ausblenden. Eigene Klasse statt [hidden],
   weil [hidden] die eigene display-Angabe eines flex-Nav-Eintrags
   nicht schlaegt (siehe Notiz in css/20-spiele.css). */
.fh-flag-aus { display: none !important; }

/* Vom Admin abgeschaltete Seiten (scripts/core/seiten-sperre.js):
   fuer Besucher weg, fuer den Admin gedimmt mit rotem Punkt. */
.fh-seite-aus { display: none !important; }
.fh-seite-vorschau { opacity: .55; }
.fh-nav-item.fh-seite-vorschau { position: relative; }
.fh-nav-item.fh-seite-vorschau::before {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fh-danger);
}

/* Admin-Vorschau: der Nav-Eintrag ist sichtbar, obwohl das Flag
   noch aus ist - dezent markiert, damit klar ist "sieht nur ich". */
.fh-nav-item.fh-flag-vorschau { position: relative; }
.fh-nav-item.fh-flag-vorschau::after {
  content: "👁";
  margin-left: auto;
  font-size: 12px;
  opacity: .8;
}

.fh-skill-vorschau {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px dashed var(--fh-gold, #d6a84f);
  background: rgba(240, 201, 106, .08);
  color: var(--fh-gold-bright, #f0c96a);
  font-size: 13px;
}

/* ======================================================
   SKILL-BAUM ALS STERNBILD (scripts/skilltree/skilltree.js)
   ---------------------------------------------------
   Die Sterne sitzen per left/top in Prozent und werden mit
   translate(-50%, -50%) zentriert. Alles, was beim Zeigen oder
   Druecken waechst, liegt deshalb auf .fh-stern-kern - ein
   transform auf .fh-stern selbst wuerde die Zentrierung
   ueberschreiben und den Stern springen lassen. Aus demselben
   Grund steht .fh-stern NICHT in den Druck-Listen von
   80-interaktion.css.
====================================================== */

.fh-skill-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 18px 0 14px;
}

.fh-skill-punkte {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--fh-muted-fg);
  font-size: 14px;
}

.fh-skill-punkte strong {
  font-family: var(--fh-font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  color: var(--fh-gold-bright);
  text-shadow: var(--fh-glow-gold);
  font-variant-numeric: tabular-nums;
}

.fh-skill-herkunft {
  margin: 0;
  font-size: 13px;
  color: var(--fh-muted-fg);
}

.fh-skill-fortschritt {
  margin: 0 0 0 auto;
  font-size: 13px;
  color: var(--fh-muted-fg);
}

.fh-skill-fortschritt strong {
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
}

/* Himmel links, Karte rechts - schmaler untereinander. */
.fh-skill-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 20px;
  align-items: start;
}

/* ---------- Der Himmel ---------- */
.fh-himmel {
  position: relative;
  width: 100%;
  border-radius: var(--fh-radius-lg);
  border: 1px solid var(--fh-border);
  background:
    radial-gradient(38% 42% at 50% 50%, color-mix(in srgb, var(--fh-gold) 12%, transparent), transparent 70%),
    radial-gradient(60% 50% at 18% 20%, color-mix(in srgb, var(--fh-blue) 45%, transparent), transparent 70%),
    radial-gradient(55% 45% at 85% 85%, color-mix(in srgb, var(--fh-red-deep) 30%, transparent), transparent 70%),
    var(--fh-ocean);
  box-shadow: inset 0 0 80px rgba(0, 0, 0, .55);
  overflow: hidden;
}

.fh-himmel-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fh-himmel-punkt {
  fill: var(--fh-fg);
  opacity: .32;
}

.fh-himmel-punkt.funkelt {
  animation: fhHimmelFunkeln 4.5s ease-in-out infinite;
}

@keyframes fhHimmelFunkeln {
  0%, 100% { opacity: .15; }
  50%      { opacity: .85; }
}

/* Linien: gepunktet, solange nichts leuchtet; gold, sobald beide
   Enden frei sind. pathLength="1" im Markup - die Strichmuster
   sind deshalb Bruchteile der Linienlaenge. */
.fh-himmel-linie {
  stroke: var(--fh-border-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: .006 .03;
  vector-effect: non-scaling-stroke;
}

/* Bereit: der Strich fliesst vom freien Stern zum naechsten. */
.fh-himmel-linie.ist-bereit {
  stroke: color-mix(in srgb, var(--fh-gold) 70%, transparent);
  stroke-dasharray: .03 .025;
  animation: fhHimmelFluss 1.4s linear infinite;
}

.fh-himmel-linie.ist-frei {
  stroke: var(--fh-gold-bright);
  stroke-width: 2.5;
  stroke-dasharray: none;
  filter: drop-shadow(0 0 4px var(--fh-gold));
}

/* Der Pfad zum gewaehlten Stern tritt hervor. */
.fh-himmel-linie.im-pfad {
  stroke: var(--fh-paper);
  stroke-width: 2;
  stroke-dasharray: .012 .03;
  opacity: .75;
}
.fh-himmel-linie.ist-bereit.im-pfad {
  stroke: var(--fh-gold-bright);
  stroke-width: 2.5;
  stroke-dasharray: .03 .025;
  opacity: 1;
}
.fh-himmel-linie.ist-frei.im-pfad {
  stroke: var(--fh-gold-bright);
  stroke-width: 3.5;
  stroke-dasharray: none;
  opacity: 1;
}

/* Lichtpuls auf freien Linien: ein kurzer heller Strich wandert
   von Stern zu Stern. */
.fh-himmel-puls {
  stroke: var(--fh-paper);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .12 2;
  stroke-dashoffset: .12;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 5px var(--fh-gold-bright));
  animation: fhHimmelPuls 2.8s linear infinite;
}

.fh-himmel-schnuppe {
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0;
  animation: fhHimmelSchnuppe 11s ease-in 3s infinite;
}

@keyframes fhHimmelFluss { to { stroke-dashoffset: -.11; } }
@keyframes fhHimmelPuls {
  from { stroke-dashoffset: .12; }
  to   { stroke-dashoffset: -1; }
}
@keyframes fhHimmelSchnuppe {
  0%, 86%   { opacity: 0; transform: translate(0, 0); }
  88%       { opacity: 1; }
  96%, 100% { opacity: 0; transform: translate(-300px, 160px); }
}

/* Zweig-Namen am weiten Himmel, mit Fortschritt n/3. */
.fh-himmel-zweig {
  position: absolute;
  display: flex;
  gap: 8px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fh-muted-fg);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.fh-himmel-zweig.ist-start { transform: translate(0, -50%); }
.fh-himmel-zweig.ist-voll { color: var(--fh-gold); }
.fh-himmel-zweig-zahl { opacity: .7; font-variant-numeric: tabular-nums; }
.fh-himmel-zweig.ist-voll .fh-himmel-zweig-zahl { opacity: 1; color: var(--fh-gold-bright); }

/* Tooltip beim Zeigen auf einen Stern. */
.fh-himmel-tipp {
  position: absolute;
  z-index: 5;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--fh-border-strong);
  background: color-mix(in srgb, var(--fh-surface) 94%, transparent);
  box-shadow: var(--fh-shadow-sm);
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - var(--abstand, 40px)));
}
.fh-himmel-tipp.ist-da { animation: fhHimmelTipp .18s var(--fh-ease) both; }
.fh-himmel-tipp-name {
  font-family: var(--fh-font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--fh-fg);
}
.fh-himmel-tipp-info {
  margin-top: 2px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--fh-muted-fg);
}
.fh-himmel-tipp-info.ist-offen { color: var(--fh-gold-bright); }
.fh-himmel-tipp-info.ist-frei  { color: var(--fh-success); }
@keyframes fhHimmelTipp {
  from { opacity: 0; margin-top: 6px; }
  to   { opacity: 1; margin-top: 0; }
}

/* Gerade freigeschaltet: Licht laeuft vom Vorgaenger zum neuen
   Stern. forwards haelt das Ende fest (siehe CLAUDE.md). */
.fh-himmel-linie.ist-neu {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fhLinieZuenden 700ms var(--fh-ease) forwards;
}

@keyframes fhLinieZuenden {
  to { stroke-dashoffset: 0; }
}

/* ---------- Die Sterne ---------- */
.fh-stern {
  --stern: 46px;
  position: absolute;
  z-index: 1;
  width: var(--stern);
  height: var(--stern);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--fh-muted-fg);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.fh-stern.groesse-2 { --stern: 56px; }
.fh-stern.groesse-3 { --stern: 92px; }

/* Die Huelle waechst beim Zeigen - mit Kern, Ring und Strahlen. */
.fh-stern-huelle {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 200ms var(--fh-ease);
}

.fh-stern-kern {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px solid var(--fh-border-strong);
  background: radial-gradient(circle at 50% 38%, var(--fh-surface-light), var(--fh-bg) 78%);
  transition:
    box-shadow var(--fh-dauer) var(--fh-ease),
    border-color var(--fh-dauer) var(--fh-ease),
    background 300ms var(--fh-ease);
}

.fh-stern-symbol {
  width: 46%;
  height: 46%;
}

/* Kostenpunkte unter dem Stern: ein Punkt je Skillpunkt. */
.fh-stern-pips {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  display: flex;
  gap: 4px;
  transform: translateX(-50%);
}

.fh-stern-pips i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fh-border-strong);
}

/* Gesperrt: Voraussetzung fehlt. */
.fh-stern.ist-gesperrt .fh-stern-kern {
  border-style: dashed;
  opacity: .55;
}

/* Erreichbar, aber zu teuer. */
.fh-stern.ist-zuteuer {
  color: var(--fh-fg);
}

.fh-stern.ist-zuteuer .fh-stern-kern {
  border-color: color-mix(in srgb, var(--fh-gold) 40%, transparent);
}

/* Bereit zum Freischalten: ruft mit einem sanften Ring. */
.fh-stern.ist-offen {
  color: var(--fh-gold-bright);
}

.fh-stern.ist-offen .fh-stern-kern {
  border-color: var(--fh-gold-bright);
  animation: fhSternRuf 2.4s ease-out infinite;
}

.fh-stern.ist-offen .fh-stern-pips i {
  background: var(--fh-gold-bright);
}

@keyframes fhSternRuf {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fh-gold-bright) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Freigeschaltet: der Stern brennt. */
.fh-stern.ist-frei {
  color: var(--fh-bg);
}

.fh-stern.ist-frei .fh-stern-kern {
  border-color: var(--fh-gold-bright);
  background: radial-gradient(circle at 50% 35%, var(--fh-paper) 0%, var(--fh-gold-bright) 38%, var(--fh-gold) 72%, var(--fh-fire-deep) 100%);
  box-shadow:
    0 0 18px color-mix(in srgb, var(--fh-gold-bright) 70%, transparent),
    0 0 46px color-mix(in srgb, var(--fh-gold) 35%, transparent);
}

.fh-stern.ist-frei .fh-stern-kern {
  animation: fhSternGlimmen 4s ease-in-out infinite;
}

.fh-stern.ist-frei .fh-stern-pips i {
  background: var(--fh-gold);
}

@keyframes fhSternGlimmen {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.14); }
}

/* Ausgewaehlt: ein atmender Ring um den Stern. */
.fh-stern-auswahl {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid var(--fh-gold-bright);
  pointer-events: none;
  animation: fhSternAuswahl 2.4s ease-in-out infinite;
}

@keyframes fhSternAuswahl {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.06); opacity: .55; }
}

@media (hover: hover) {
  .fh-stern:not(.ist-gesperrt):hover .fh-stern-huelle {
    transform: scale(1.08);
  }
}

.fh-stern:active .fh-stern-huelle {
  transform: scale(.94);
  transition-duration: 120ms;
}

.fh-stern:focus-visible {
  outline: none;
}

.fh-stern:focus-visible .fh-stern-kern {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 4px;
}

/* Die Legende: groesser, mit langsam kreisenden Strahlen. */
.fh-stern.groesse-3 .fh-stern-kern {
  border-width: 2px;
}

.fh-stern-strahlen {
  position: absolute;
  inset: -26%;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-conic-gradient(color-mix(in srgb, var(--fh-gold) 22%, transparent) 0deg 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 46%, transparent 72%);
  mask: radial-gradient(circle, transparent 42%, #000 46%, transparent 72%);
  animation: fhLegendeStrahlen 40s linear infinite;
  opacity: .5;
}

.fh-stern.ist-frei .fh-stern-strahlen {
  opacity: 1;
  background: repeating-conic-gradient(color-mix(in srgb, var(--fh-gold-bright) 55%, transparent) 0deg 6deg, transparent 6deg 30deg);
}

/* Ring um die Legende: fuellt sich mit jeder freigeschalteten Stufe. */
.fh-stern-ring {
  position: absolute;
  inset: -13%;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(var(--fh-gold-bright) var(--fortschritt, 0%), color-mix(in srgb, var(--fh-border-strong) 80%, transparent) 0);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67.5%, #000 70%, transparent 71.5%);
  mask: radial-gradient(circle, transparent 66%, #000 67.5%, #000 70%, transparent 71.5%);
}

@keyframes fhLegendeStrahlen {
  to { transform: rotate(360deg); }
}

/* Gerade freigeschaltet: kurzes Aufflammen. forwards + Endwert
   opacity 0, sonst bliebe der Schein stehen (siehe CLAUDE.md). */
.fh-stern.ist-neu .fh-stern-kern {
  animation: fhSternZuenden 650ms var(--fh-ease) forwards;
}

.fh-stern-flare {
  position: absolute;
  inset: -45%;
  z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle, var(--fh-paper) 0%, color-mix(in srgb, var(--fh-gold-bright) 60%, transparent) 30%, transparent 68%);
  pointer-events: none;
  animation: fhSternFlare 900ms var(--fh-ease) forwards;
}

/* Zwei Druckwellen - opacity 0 am Ende, forwards (siehe CLAUDE.md). */
.fh-stern-welle {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--fh-gold-bright);
  pointer-events: none;
  animation: fhSternWelle 900ms ease-out forwards;
}
.fh-stern-welle.ist-zweite {
  border: 1px solid var(--fh-paper);
  opacity: 0;
  animation: fhSternWelle 1100ms ease-out 160ms forwards;
}

.fh-stern-funken i {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fh-gold-bright);
  box-shadow: 0 0 6px var(--fh-gold-bright);
  pointer-events: none;
  animation: fhSternFunke 800ms var(--fh-ease) forwards;
}
.fh-stern-funken i:nth-child(even) { background: var(--fh-paper); }

@keyframes fhSternWelle {
  0%   { transform: scale(.7); opacity: .9; }
  100% { transform: scale(2.8); opacity: 0; }
}

@keyframes fhSternFunke {
  0%   { transform: translate(-50%, -50%) translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

@keyframes fhSternZuenden {
  0%   { transform: scale(.8); }
  55%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes fhSternFlare {
  0%   { opacity: 1; transform: scale(.3); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* ---------- Die Karte zum gewaehlten Stern ---------- */
.fh-stern-karte {
  position: sticky;
  top: calc(var(--fh-topbar-h) + 16px);
  padding: 18px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border-strong);
  background: var(--fh-surface);
  box-shadow: var(--fh-shadow-sm);
}

.fh-stern-karte.ist-leer {
  border-style: dashed;
  color: var(--fh-muted-fg);
  text-align: center;
  font-size: 14px;
}

.fh-stern-karte.ist-legende {
  border-color: color-mix(in srgb, var(--fh-gold) 60%, transparent);
  box-shadow: var(--fh-shadow-sm), var(--fh-glow-gold);
}

.fh-stern-karte-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.fh-stern-karte-symbol {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--fh-gold);
  color: var(--fh-gold-bright);
}

.fh-stern-karte-symbol svg {
  width: 22px;
  height: 22px;
}

.fh-stern-karte-zustand {
  margin: 0 0 2px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.fh-stern-karte.ist-offen .fh-stern-karte-zustand { color: var(--fh-gold-bright); }
.fh-stern-karte.ist-frei .fh-stern-karte-zustand { color: var(--fh-success); }

.fh-stern-karte-name {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--fh-fg);
}

.fh-stern-karte-wirkung {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--fh-fg);
}

.fh-stern-karte-kosten {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
  color: var(--fh-muted-fg);
}

.fh-stern-karte-kosten .fh-stern-pips {
  position: static;
  transform: none;
}

.fh-stern-karte-kosten .fh-stern-pips i {
  background: var(--fh-gold);
}

.fh-stern-karte-knopf {
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--fh-radius-sm);
  background: linear-gradient(180deg, var(--fh-gold-bright), var(--fh-gold));
  color: var(--fh-bg);
  font-family: var(--fh-font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--fh-glow-gold);
  transition: filter var(--fh-dauer) var(--fh-ease), transform var(--fh-dauer-kurz) var(--fh-ease);
}


@media (hover: hover) {
  .fh-stern-karte-knopf:not([disabled]):hover { filter: brightness(1.08); }
}

.fh-stern-karte-knopf:active:not([disabled]) { transform: scale(.97); }
.fh-stern-karte-knopf[disabled] { opacity: .6; cursor: progress; }

.fh-stern-karte-knopf:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 3px;
}

.fh-stern-karte-frei {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 17px;
  letter-spacing: .06em;
  color: var(--fh-gold-bright);
}

.fh-stern-karte-hinweis {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--fh-fg);
}

.fh-stern-karte-klein {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fh-muted-fg);
}

.fh-skill-status {
  min-height: 1.3em;
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--fh-muted-fg);
}

/* Die Karte gleitet bei jedem Wechsel neu herein. Zwei gleiche
   Keyframes im Wechsel, damit die Animation auch bei gleicher
   Klasse neu startet. */
.fh-stern-karte.rein-1 { animation: fhKarteRein1 .35s var(--fh-ease) both; }
.fh-stern-karte.rein-2 { animation: fhKarteRein2 .35s var(--fh-ease) both; }
@keyframes fhKarteRein1 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fhKarteRein2 { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.fh-stern-karte-etikett {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

/* Spur I - II - III eines Zweigs */
.fh-stern-karte-spur { margin: 0 0 14px; }
.fh-spur { display: flex; align-items: center; }
.fh-spur-schritt { display: flex; flex: 1 1 0; align-items: center; }
.fh-spur-schritt:last-child { flex: 0 0 auto; }
.fh-spur-punkt {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid var(--fh-border-strong);
  font-family: var(--fh-font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--fh-muted-fg);
}
.fh-spur-punkt.ist-gesperrt { border-style: dashed; }
.fh-spur-punkt.ist-offen { border-color: var(--fh-gold-bright); color: var(--fh-gold-bright); }
.fh-spur-punkt.ist-frei {
  border-color: var(--fh-gold-bright);
  background: linear-gradient(180deg, var(--fh-gold-bright), var(--fh-gold));
  color: var(--fh-bg);
}
.fh-spur-punkt.ist-aktiv { outline: 1.5px solid var(--fh-gold-bright); outline-offset: 3px; }
.fh-spur-linie {
  flex: 1;
  height: 2px;
  margin: 0 6px;
  border-radius: 1px;
  background: var(--fh-border-strong);
}
.fh-spur-linie.ist-frei { background: var(--fh-gold-bright); box-shadow: 0 0 8px var(--fh-gold); }

/* Voraussetzungen der Titel, des Abzeichens und der Legende */
.fh-stern-karte-bedingungen {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--fh-border);
  background: var(--fh-surface-2);
}
.fh-stern-karte-bedingungen .fh-stern-karte-etikett { margin-bottom: 2px; }
.fh-bedingung {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fh-muted-fg);
}
.fh-bedingung.ist-ok { color: var(--fh-success); }
.fh-bedingung svg { width: 14px; height: 14px; flex-shrink: 0; }

/* "Freigeschaltet!" direkt nach dem Klick: ein Stempel. */
.fh-stern-karte-frei.ist-stempel {
  display: inline-block;
  padding: 4px 12px;
  border: 1.5px solid var(--fh-gold-bright);
  border-radius: 8px;
  text-shadow: 0 0 16px rgba(240, 201, 106, .6);
  animation: fhKarteStempel 520ms var(--fh-ease) both;
}
@keyframes fhKarteStempel {
  0%   { opacity: 0; transform: scale(1.7) rotate(-9deg); }
  60%  { opacity: 1; transform: scale(.95) rotate(-3deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}

/* Freischalten-Knopf: ein Lichtstreif laeuft darueber. */
.fh-stern-karte-knopf { position: relative; overflow: hidden; }
.fh-stern-karte-glanz {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 250, 235, .55) 50%, transparent 65%);
  background-size: 250% 100%;
  pointer-events: none;
  animation: fhKnopfGlanz 3.2s ease-in-out infinite;
}
.fh-stern-karte-knopftext { position: relative; }
.fh-stern-karte-knopf .fh-stern-karte-knopftext > span { opacity: .75; }
@keyframes fhKnopfGlanz {
  from { background-position: 130% 0; }
  to   { background-position: -70% 0; }
}

/* Die Punktezahl ploppt auf, wenn sie sich aendert. */
.fh-skill-punkte strong { display: inline-block; }
.fh-skill-punkte strong.ist-pop-1 { animation: fhPunktePop1 520ms var(--fh-ease); }
.fh-skill-punkte strong.ist-pop-2 { animation: fhPunktePop2 520ms var(--fh-ease); }
@keyframes fhPunktePop1 { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes fhPunktePop2 { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  .fh-skill-buehne {
    grid-template-columns: minmax(0, 1fr);
  }
  .fh-stern-karte {
    position: static;
  }
}

@media (max-width: 700px) {
  .fh-stern { --stern: 42px; }
  .fh-stern.groesse-2 { --stern: 50px; }
  .fh-stern.groesse-3 { --stern: 76px; }
  .fh-skill-punkte strong { font-size: 38px; }
  .fh-skill-fortschritt { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-himmel-punkt.funkelt,
  .fh-himmel-linie.ist-bereit,
  .fh-stern.ist-offen .fh-stern-kern,
  .fh-stern.ist-frei .fh-stern-kern,
  .fh-stern-strahlen,
  .fh-stern-auswahl,
  .fh-stern.ist-neu .fh-stern-kern,
  .fh-stern-karte.rein-1,
  .fh-stern-karte.rein-2,
  .fh-stern-karte-glanz,
  .fh-stern-karte-frei.ist-stempel,
  .fh-skill-punkte strong,
  .fh-himmel-tipp.ist-da {
    animation: none;
  }
  /* Nur Zier: ohne Bewegung ganz weglassen. */
  .fh-himmel-puls,
  .fh-himmel-schnuppe,
  .fh-stern-flare,
  .fh-stern-welle,
  .fh-stern-funken {
    display: none;
  }
  .fh-himmel-linie.ist-neu {
    animation: none;
    stroke-dashoffset: 0;
  }
  .fh-stern-kern,
  .fh-stern-huelle {
    transition: none;
  }
}

/* ======================================================
   LIVE-EVENT (scripts/liveevent/live-event.js)
====================================================== */

/* Admin-Panel: Zeile je Funktion unter "Freigaben" */
.gateway-flag-row { display: flex; align-items: flex-start; gap: 10px; }
.gateway-flag-row input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; }

/* ---------- Banderole (Entwurf "Skill-Baum & Live-Event") ----------
   Faellt federnd herein, Buchstaben bauen sich auf, ein Lichtstreif
   laeuft darueber, die Leiste unten zeigt die Restzeit (6 s). */
.fh-live-banderole {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 14px;
  padding: 18px 24px 21px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(8,10,16,.96), rgba(8,10,16,.82));
  text-align: center;
  pointer-events: none;
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
  perspective: 600px;
  animation: fhStBanderoleRein .6s cubic-bezier(.22,1.35,.36,1) both;
}
.fh-live-banderole.ist-weg { animation: fhStBanderoleRaus .5s ease forwards; }
.fh-live-glanz {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--live-farbe) 22%, transparent) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: fhStSweep 1.8s .35s ease-out both;
}
.fh-live-von {
  position: relative;
  font-family: var(--fh-font-display);
  font-size: clamp(16px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--live-farbe, #f0c96a);
  text-shadow: 0 0 18px color-mix(in srgb, var(--live-farbe, #f0c96a) 60%, transparent);
  animation: fhStBuchstabe .5s .1s both, fhStVonPuls 1.6s ease-in-out .6s infinite;
}
.fh-live-text {
  position: relative;
  font-family: var(--fh-font-display);
  font-size: clamp(18px, 3.2vw, 40px);
  font-weight: 500;
  color: var(--fh-fg);
}
.fh-live-wort { display: inline-block; white-space: nowrap; }
.fh-live-buchstabe {
  display: inline-block;
  white-space: pre;
  animation: fhStBuchstabe 520ms cubic-bezier(.22,.9,.32,1) both;
}
.fh-live-banderole.ist-mono .fh-live-von,
.fh-live-banderole.ist-mono .fh-live-text {
  font-family: var(--fh-mono);
  letter-spacing: .14em;
}
.fh-live-banderole.ist-mono .fh-live-text {
  font-size: clamp(15px, 2.2vw, 26px);
  color: var(--live-farbe);
  animation: fhStGlitchText 2.6s steps(1, end) 1.6s infinite;
}
.fh-live-leiste,
.fh-live-leiste-lauf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
}
.fh-live-leiste { background: color-mix(in srgb, var(--live-farbe) 25%, transparent); }
.fh-live-leiste-lauf {
  background: var(--live-farbe);
  box-shadow: 0 0 12px var(--live-farbe);
  transform-origin: left;
  animation: fhStBalken 6s linear forwards;
}

/* ---------- Disco ---------- */
@keyframes fhDiscoHue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes fhDiscoLicht {
  0%   { background: radial-gradient(60% 60% at 20% 20%, rgba(224,64,42,.5), transparent 60%); }
  25%  { background: radial-gradient(60% 60% at 80% 20%, rgba(90,160,224,.5), transparent 60%); }
  50%  { background: radial-gradient(60% 60% at 80% 80%, rgba(79,143,92,.5), transparent 60%); }
  75%  { background: radial-gradient(60% 60% at 20% 80%, rgba(240,201,106,.5), transparent 60%); }
  100% { background: radial-gradient(60% 60% at 20% 20%, rgba(224,64,42,.5), transparent 60%); }
}
body.fh-live-disco { animation: fhDiscoHue 6s linear infinite; }
.fh-live-disco-licht {
  position: fixed; inset: 0; z-index: 9996; pointer-events: none;
  mix-blend-mode: screen;
  animation: fhDiscoLicht 2.4s steps(1) infinite;
}
/* Ruhig-Variante: kein Stroboskop, nur ein sanfter Farbschimmer. */
body.fh-live-disco-ruhig { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fh-live-disco-licht { animation: fhDiscoLicht 8s ease-in-out infinite; mix-blend-mode: normal; opacity: .35; }
}

/* ---------- Konfetti ---------- */
/* Kanonen aus beiden unteren Ecken; Flugbahn ueber --mx/--my
   (Scheitel) und --ex/--ey (Ende), gesetzt in live-event.js. */
.fh-live-konfetti { position: fixed; inset: 0; z-index: 9999; pointer-events: none; overflow: hidden; }
.fh-live-konfetti-stueck {
  position: absolute;
  bottom: -14px;
  animation-name: fhStKanone;
  animation-timing-function: cubic-bezier(.15,.7,.3,1);
  animation-fill-mode: both;
}

/* ---------- Blitz ---------- */
.fh-live-blitz {
  position: fixed; inset: 0; z-index: 10001; pointer-events: none; opacity: 0;
  background: radial-gradient(80% 70% at 50% 20%, #fff, color-mix(in srgb, var(--fh-cold) 40%, #fff) 60%, var(--fh-cold));
}
.fh-live-blitz.ist-an { animation: fhStBlitz .75s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .fh-live-blitz.ist-an { animation: none; opacity: 0; }
}

/* ---------- Bildschirm-Uebernahme ---------- */
.fh-live-buehne {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 30%, rgba(20,28,46,.98), rgba(5,6,12,.99));
  text-align: center;
}
.fh-live-buehne-logo { font-size: clamp(48px, 12vw, 96px); display: block; }
.fh-live-buehne-titel {
  margin: 12px 0 0;
  font-family: var(--fh-font-display, "Oswald", system-ui, sans-serif);
  font-size: clamp(26px, 5vw, 52px);
  color: var(--fh-gold-bright, #f0c96a);
}
.fh-live-buehne-sub { margin: 8px 0 0; color: var(--fh-muted-fg, #a7aec0); }

/* ======================================================
   LIVE-STORYS (scripts/liveevent/live-storys.js)
   ---------------------------------------------------
   Die Szenen selbst tragen ihre Stile inline (wie im Entwurf).
   Hier stehen nur die Dinge, die Klassen brauchen: der Farbfilter
   der Seite, die Bewegung der ganzen Seite, die Stimmung des
   Skill-Baums - und alle Keyframes der Storys (fhSt...).
====================================================== */

/* Farbfilter ueber der ganzen Seite. backdrop-filter statt filter
   auf #fh-main: ein filter machte #fh-main zum Bezugsrahmen aller
   fest positionierten Elemente darin (Dialoge, Karten). */
#fh-story-filter {
  position: fixed;
  inset: 0;
  z-index: 9988;
  pointer-events: none;
  opacity: 0;
}

/* Bewegung der ganzen Seite - nur kurz oder waehrend einer Szene. */
#fh-main.fh-story-glitch { animation: fhStGlitchSeite 1.4s steps(1, end) both; }
#fh-main.fh-story-schwanken { animation: fhStSchwanken 3s ease-in-out infinite; }
#fh-main.fh-story-schaukeln { animation: fhStSchaukeln 3.2s ease-in-out infinite; }
#fh-main.fh-story-gehackt-flackern { animation: fhStGehacktFlackern 7s steps(1, end) infinite; }
#fh-main.fh-story-beben-1 { animation: fhStWackeln1 .45s cubic-bezier(.22,.9,.32,1); }
#fh-main.fh-story-beben-2 { animation: fhStWackeln2 .45s cubic-bezier(.22,.9,.32,1); }

/* Schatzregen: die Zahl ploppt bei jedem Fang. */
.fh-story-pop-1 { animation: fhStPop1 .35s cubic-bezier(.22,.9,.32,1); }
.fh-story-pop-2 { animation: fhStPop2 .35s cubic-bezier(.22,.9,.32,1); }

/* Die Hintertueren nach "Hacked" wachsen beim Zeigen. */
.fh-story-loch > div { transition: transform 200ms var(--fh-ease); }
@media (hover: hover) {
  .fh-story-loch:hover > div { transform: scale(1.14); }
}
.fh-story-loch:focus-visible { outline: 2px solid var(--fh-neon); outline-offset: 4px; border-radius: 50%; }
.fh-spiel-hack:hover { background: rgba(57,255,20,.18) !important; box-shadow: 0 0 26px rgba(57,255,20,.35); }
.fh-spiel-hack:active { transform: scale(.97); }

/* Der Skill-Baum spielt mit: gekapert (neon), Beat, aufgeladen,
   geisterhaft, schwimmend, Wunsch. */
body.fh-story-hack .fh-stern-kern {
  color: var(--fh-neon);
  border-color: var(--fh-neon);
  border-style: solid;
  opacity: 1;
  background: radial-gradient(circle at 50% 38%, #0c2410, var(--fh-bg) 78%);
  box-shadow: 0 0 16px color-mix(in srgb, var(--fh-neon) 45%, transparent);
  animation: fhStHackFlackern .8s steps(1) infinite;
}
body.fh-story-hack .fh-himmel-linie { stroke: var(--fh-neon); filter: drop-shadow(0 0 4px var(--fh-neon)); }
body.fh-story-hack .fh-himmel { border-color: rgba(57,255,20,.4); }
body.fh-story-hack .fh-skill-punkte strong { color: var(--fh-neon); font-family: var(--fh-mono); text-shadow: 0 0 16px rgba(57,255,20,.6); }
body.fh-story-beat .fh-stern-kern { animation: fhStBeatStern .5s cubic-bezier(.22,.9,.32,1) infinite; }
body.fh-story-beat .fh-himmel { border-color: var(--fh-gold-bright); }
body.fh-story-geladen .fh-stern.ist-frei .fh-stern-kern,
body.fh-story-geladen .fh-stern.ist-offen .fh-stern-kern {
  border-color: var(--fh-cold);
  box-shadow: 0 0 20px var(--fh-cold), 0 0 44px color-mix(in srgb, var(--fh-cold) 40%, transparent);
  animation: fhStHackFlackern .3s steps(1) infinite;
}
body.fh-story-geladen .fh-himmel { border-color: var(--fh-cold); }
body.fh-story-geist .fh-stern-kern {
  color: var(--fh-paper);
  border-color: color-mix(in srgb, var(--fh-paper) 60%, transparent);
  border-style: dashed;
  background: radial-gradient(circle at 50% 38%, rgba(232,213,168,.18), var(--fh-bg) 80%);
  box-shadow: 0 0 24px rgba(232,213,168,.25);
  animation: fhStGeist 2.6s ease-in-out infinite;
}
body.fh-story-geist .fh-himmel { border-color: rgba(232,213,168,.4); }
body.fh-story-schwimmt .fh-stern-kern { animation: fhStSchweben 2.3s ease-in-out infinite; }
body.fh-story-schwimmt .fh-himmel { border-color: rgba(90,160,224,.5); }
body.fh-story-wunsch .fh-stern.ist-frei .fh-stern-kern {
  box-shadow: 0 0 22px rgba(166,107,255,.6), 0 0 50px rgba(85,200,120,.3);
}

/* Reduzierte Bewegung: Szenen stehen still (Texte bleiben lesbar).
   Muenzen und der Gegenhack-Cursor brauchen Bewegung - ohne sie
   waeren die Spiele nicht spielbar -, deshalb ausgenommen. */
@media (prefers-reduced-motion: reduce) {
  #fh-story > :not(#fh-story-muenzen):not(#fh-story-spiel),
  #fh-story > :not(#fh-story-muenzen):not(#fh-story-spiel) * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
  }
  #fh-main[class*="fh-story-"],
  body[class*="fh-story-"] .fh-stern-kern,
  .fh-live-banderole, .fh-live-banderole *, .fh-story-pop-1, .fh-story-pop-2 {
    animation: none !important;
  }
}

/* Keyframes der Storys - aus dem Entwurf uebernommen, mit Praefix
   fhSt, damit sie keine gleichnamigen Keyframes der Seite
   ueberschreiben. Wer hier etwas aendert, sucht den Namen in
   live-storys.js / live-event.js. */
@keyframes fhStAlarm {
  0%,100%{opacity:.35}
  50%{opacity:1}
}
@keyframes fhStAn {
  to{opacity:1}
}
@keyframes fhStAurora {
  0%{transform:translateX(-10%) skewY(-6deg) scaleY(.8)}
  100%{transform:translateX(10%) skewY(5deg) scaleY(1.25)}
}
@keyframes fhStAus {
  to{opacity:0}
}
@keyframes fhStBalken {
  from{transform:scaleX(1)}
  to{transform:scaleX(0)}
}
@keyframes fhStBanderoleRaus {
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(-140%);opacity:0}
}
@keyframes fhStBanderoleRein {
  from{transform:translateY(-140%)}
  to{transform:translateY(0)}
}
@keyframes fhStBeat {
  0%{opacity:1}
  100%{opacity:0}
}
@keyframes fhStBeatStern {
  0%{transform:scale(1.14);filter:brightness(1.45)}
  100%{transform:scale(1);filter:none}
}
@keyframes fhStBlase {
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:1}
  100%{transform:translate(18px,-70vh);opacity:0}
}
@keyframes fhStBlitz {
  0%{opacity:0}
  10%{opacity:.92}
  30%{opacity:.2}
  42%{opacity:.7}
  100%{opacity:0}
}
@keyframes fhStBoltAus {
  0%,55%{opacity:1}
  65%{opacity:.2}
  72%{opacity:1}
  100%{opacity:0}
}
@keyframes fhStBuchstabe {
  from{opacity:0;transform:translateY(.55em) rotateX(70deg);filter:blur(4px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes fhStCodeRegen {
  from{transform:translateY(-110%)}
  to{transform:translateY(110vh)}
}
@keyframes fhStCrtAus {
  0%{transform:scale(1,1);opacity:.85}
  55%{transform:scale(1,.006);opacity:1}
  100%{transform:scale(0,.006);opacity:0}
}
@keyframes fhStCursor {
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes fhStCursorLauf1 {
  from{left:0}
  to{left:calc(100% - 4px)}
}
@keyframes fhStCursorLauf2 {
  from{left:0}
  to{left:calc(100% - 4px)}
}
@keyframes fhStDiscoLicht {
  0%{background:radial-gradient(60% 60% at 20% 20%,rgba(224,64,42,.5),transparent 60%)}
  25%{background:radial-gradient(60% 60% at 80% 20%,rgba(90,160,224,.5),transparent 60%)}
  50%{background:radial-gradient(60% 60% at 80% 80%,rgba(79,143,92,.5),transparent 60%)}
  75%{background:radial-gradient(60% 60% at 20% 80%,rgba(240,201,106,.5),transparent 60%)}
  100%{background:radial-gradient(60% 60% at 20% 20%,rgba(224,64,42,.5),transparent 60%)}
}
@keyframes fhStEinblenden {
  from{opacity:0}
  to{opacity:1}
}
@keyframes fhStEntschl {
  from{transform:translateY(0)}
  to{transform:translateY(-9.9em)}
}
@keyframes fhStFerneBlitz {
  0%,18%{opacity:0}
  20%{opacity:1}
  23%{opacity:.1}
  25%{opacity:.8}
  30%,58%{opacity:0}
  60%{opacity:.6}
  64%,100%{opacity:0}
}
@keyframes fhStFluestern {
  0%{opacity:0;transform:translateY(8px)}
  40%{opacity:.75;transform:none}
  100%{opacity:0;transform:translateY(-8px)}
}
@keyframes fhStFuellen {
  from{width:0}
  to{width:100%}
}
@keyframes fhStGehacktFlackern {
  0%,91%,100%{transform:none}
  92%{transform:translate(-6px,1px) skewX(2deg)}
  93%{transform:translate(4px,-1px)}
  94%{transform:none}
  97%{transform:translateX(3px)}
  98%{transform:none}
}
@keyframes fhStGeist {
  0%,100%{opacity:.35}
  50%{opacity:.8}
}
@keyframes fhStGeistBuchstabe {
  0%{opacity:0;filter:blur(14px);transform:translateY(20px)}
  35%{opacity:.95;filter:blur(0);transform:none}
  80%{opacity:.85}
  100%{opacity:0;filter:blur(10px);transform:translateY(-10px)}
}
@keyframes fhStGeistLicht {
  from{transform:translateX(0)}
  to{transform:translateX(160vw)}
}
@keyframes fhStGeistText {
  0%{opacity:0;filter:blur(12px);letter-spacing:.5em}
  30%{opacity:.9;filter:blur(1px);letter-spacing:.3em}
  45%{opacity:.4}
  55%{opacity:.9}
  85%{opacity:.8;filter:blur(0)}
  100%{opacity:0;filter:blur(8px);letter-spacing:.3em}
}
@keyframes fhStGischt {
  0%{opacity:0;transform:translate(0,0)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(var(--dx),var(--dy))}
}
@keyframes fhStGlitchBalken {
  0%,100%{opacity:0;transform:none}
  12%{opacity:1;transform:translateX(-24px)}
  24%{opacity:1;transform:translateX(32px)}
  36%{opacity:0}
  58%{opacity:1;transform:translateX(-10px)}
  64%{opacity:0}
}
@keyframes fhStGlitchSeite {
  0%{transform:none;filter:none}
  8%{transform:translate(-9px,2px) skewX(3deg);filter:hue-rotate(95deg) saturate(2.2)}
  16%{transform:none;filter:none}
  30%{transform:translate(7px,-3px);filter:hue-rotate(-70deg) contrast(1.4)}
  38%{transform:none;filter:none}
  52%{transform:translate(-3px,0) skewX(-5deg);filter:hue-rotate(120deg)}
  60%{transform:none;filter:none}
  74%{transform:translate(11px,4px);filter:contrast(1.7) hue-rotate(80deg)}
  82%{transform:none;filter:none}
  92%{transform:translate(-5px,-2px) skewX(2deg);filter:hue-rotate(100deg) saturate(1.6)}
  100%{transform:none;filter:saturate(.3) brightness(.55)}
}
@keyframes fhStGlitchText {
  0%,100%{text-shadow:-3px 0 #e53935,3px 0 #42b8ff,0 0 24px rgba(57,255,20,.6);transform:none}
  18%{text-shadow:3px 0 #e53935,-3px 0 #42b8ff,0 0 24px rgba(57,255,20,.6);transform:translateX(3px) skewX(-7deg)}
  36%{transform:translateX(-4px)}
  54%{text-shadow:-1px 0 #e53935,1px 0 #42b8ff,0 0 24px rgba(57,255,20,.6);transform:skewX(5deg)}
  72%{transform:none}
}
@keyframes fhStHackFlackern {
  0%,100%{opacity:1}
  50%{opacity:.35}
}
@keyframes fhStHoch {
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@keyframes fhStHuepf {
  0%,100%{transform:translateY(0)}
  30%{transform:translateY(-.18em)}
}
@keyframes fhStIrrlicht {
  from{transform:translate(-40px,20px)}
  to{transform:translate(60px,-30px)}
}
@keyframes fhStKanone {
  0%{transform:translate(0,0) rotate(0);opacity:1}
  45%{transform:translate(var(--mx),var(--my)) rotate(var(--r1));opacity:1}
  100%{transform:translate(var(--ex),var(--ey)) rotate(var(--r2));opacity:0}
}
@keyframes fhStKaustik {
  to{background-position:320px 220px}
}
@keyframes fhStKegel {
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes fhStLaufband {
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@keyframes fhStLinieZuenden {
  to{stroke-dashoffset:0}
}
@keyframes fhStLivePunkt {
  0%,100%{opacity:1}
  50%{opacity:.25}
}
@keyframes fhStLochAuf {
  0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg);opacity:0}
  60%{transform:translate(-50%,-50%) scale(1.2) rotate(6deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
}
@keyframes fhStLochDreh {
  to{transform:rotate(360deg)}
}
@keyframes fhStLochFlackern {
  0%,46%,100%{opacity:1;transform:none}
  48%{opacity:.55;transform:translateX(3px) skewX(-6deg)}
  51%{opacity:1;transform:translateX(-2px)}
  53%{transform:none}
}
@keyframes fhStLochZu {
  0%{transform:translate(-50%,-50%) scale(1);opacity:1}
  35%{transform:translate(-50%,-50%) scale(1.15);opacity:1}
  100%{transform:translate(-50%,-50%) scale(0);opacity:0}
}
@keyframes fhStMuenzeDreh {
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.3)}
}
@keyframes fhStMuenzeFall {
  from{transform:translate(-50%,-80px)}
  to{transform:translate(-50%,calc(100vh + 80px))}
}
@keyframes fhStNebelDrift {
  from{transform:translateX(-6%)}
  to{transform:translateX(6%)}
}
@keyframes fhStNebelWeg {
  to{opacity:0;transform:translateY(-6%)}
}
@keyframes fhStPop1 {
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  100%{transform:scale(1)}
}
@keyframes fhStPop2 {
  0%{transform:scale(1)}
  35%{transform:scale(1.35)}
  100%{transform:scale(1)}
}
@keyframes fhStPunktPop {
  0%{opacity:1;transform:translate(-50%,-50%) scale(.7)}
  30%{opacity:1;transform:translate(-50%,-110%) scale(1.25)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}
}
@keyframes fhStRauschen {
  to{background-position:0 6px,3px 0}
}
@keyframes fhStRegen {
  from{background-position:0 0}
  to{background-position:-60px 220px}
}
@keyframes fhStScan {
  to{background-position:0 8px,0 0}
}
@keyframes fhStSchaukeln {
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(8px) rotate(-.4deg)}
}
@keyframes fhStSchnuppeFlug {
  0%{opacity:0;translate:0 0}
  15%{opacity:1}
  100%{opacity:0;translate:-420px 230px}
}
@keyframes fhStSchwanken {
  0%,100%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(.5deg) translateY(2px)}
  75%{transform:rotate(-.5deg) translateY(-2px)}
}
@keyframes fhStSchweben {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes fhStStrahlenAuf {
  from{opacity:0;transform:translateX(-50%) rotate(-10deg)}
  to{opacity:1;transform:translateX(-50%) rotate(10deg)}
}
@keyframes fhStStrudel {
  from{transform:translate(-50%,50%) rotate(0) scale(1)}
  to{transform:translate(-50%,50%) rotate(720deg) scale(.2);opacity:0}
}
@keyframes fhStSweep {
  from{background-position:130% 0}
  to{background-position:-70% 0}
}
@keyframes fhStTippDots {
  0%,60%,100%{opacity:.3;transform:none}
  30%{opacity:1;transform:translateY(-3px)}
}
@keyframes fhStTippen {
  to{max-width:var(--w)}
}
@keyframes fhStTresor {
  from{width:12%}
  to{width:100%}
}
@keyframes fhStUmkehr {
  0%,39%,44%,71%,74%,100%{filter:none}
  40%,72%{filter:invert(1) hue-rotate(180deg)}
}
@keyframes fhStVonPuls {
  0%,100%{filter:drop-shadow(0 0 0 transparent)}
  50%{filter:drop-shadow(0 0 10px var(--live-farbe))}
}
@keyframes fhStWabern {
  0%,100%{translate:0 0}
  50%{translate:0 -6px}
}
@keyframes fhStWackeln1 {
  0%,100%{transform:none}
  15%{transform:translate(-7px,3px)}
  35%{transform:translate(6px,-4px)}
  55%{transform:translate(-4px,-2px)}
  75%{transform:translate(3px,2px)}
}
@keyframes fhStWackeln2 {
  0%,100%{transform:none}
  15%{transform:translate(-7px,3px)}
  35%{transform:translate(6px,-4px)}
  55%{transform:translate(-4px,-2px)}
  75%{transform:translate(3px,2px)}
}
@keyframes fhStWelle {
  0%{transform:scale(.7);opacity:.9}
  100%{transform:scale(2.8);opacity:0}
}
@keyframes fhStWellenZug {
  to{transform:translateX(-50%)}
}
@keyframes fhStWisch {
  from{clip-path:inset(0 0 0 0)}
  to{clip-path:inset(0 0 0 100%)}
}
@keyframes fhStWischLinie {
  0%{left:0;opacity:0}
  6%{opacity:1}
  94%{opacity:1}
  100%{left:100%;opacity:0}
}
@keyframes fhStZahl {
  0%{opacity:0;transform:scale(2.2)}
  20%{opacity:1;transform:scale(1)}
  80%{opacity:1;transform:scale(.96)}
  100%{opacity:0;transform:scale(.7)}
}
@keyframes fhStZeile {
  from{max-height:0;opacity:0;margin-top:0}
  to{max-height:140px;opacity:1;margin-top:12px}
}
@keyframes fhStZoomRein {
  from{opacity:0;transform:scale(1.3);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}

/* ======================================================
   EVENT-TITEL MIT FARBANIMATION (scripts/liveevent/event-titel.js)
   ---------------------------------------------------
   Fuenf feste Stile. Die Verlaufs-Stile legen die Farbe in den
   Hintergrund und schneiden sie mit dem Text aus (background-clip:
   text); die Animation schiebt den Verlauf durch. Erste und letzte
   Farbe sind gleich, damit der Lauf nahtlos wirkt.
====================================================== */
.fh-event-titel {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .03em;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.fh-titel-regenbogen,
.fh-titel-gold,
.fh-titel-feuer,
.fh-titel-eis {
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fhTitelLauf 4s linear infinite;
}

.fh-titel-regenbogen {
  background-image: linear-gradient(90deg,
    var(--fh-danger), var(--fh-fire), var(--fh-gold-bright), var(--fh-success),
    var(--fh-cold), var(--fh-violett), var(--fh-danger));
}

/* Gold: ein heller Lichtstreif wandert ueber den Text. */
.fh-titel-gold {
  background-image: linear-gradient(100deg,
    var(--fh-gold) 0%, var(--fh-gold) 38%, var(--fh-paper) 50%, var(--fh-gold) 62%, var(--fh-gold) 100%);
  animation-duration: 3s;
}

/* Feuer: schneller Lauf, dazu flackerndes Glimmen. */
.fh-titel-feuer {
  background-image: linear-gradient(90deg,
    var(--fh-fire-deep), var(--fh-fire), var(--fh-gold-bright), var(--fh-fire), var(--fh-fire-deep));
  animation: fhTitelLauf 2.2s linear infinite, fhTitelFlackern 1.6s ease-in-out infinite;
}

/* Eis/Neon: kuehler Lauf, dazu pulsierendes Leuchten. */
.fh-titel-eis {
  background-image: linear-gradient(90deg,
    var(--fh-cold), var(--fh-fg), var(--fh-cold), var(--fh-blue), var(--fh-cold));
  animation: fhTitelLauf 5s linear infinite, fhTitelPuls 2.4s ease-in-out infinite;
}

@keyframes fhTitelLauf {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

@keyframes fhTitelFlackern {
  0%, 100% { filter: drop-shadow(0 0 3px var(--fh-fire)); }
  30%      { filter: drop-shadow(0 0 7px var(--fh-fire-deep)); }
  55%      { filter: drop-shadow(0 0 2px var(--fh-gold-bright)); }
  80%      { filter: drop-shadow(0 0 6px var(--fh-fire)); }
}

@keyframes fhTitelPuls {
  0%, 100% { filter: drop-shadow(0 0 2px var(--fh-cold)); }
  50%      { filter: drop-shadow(0 0 8px var(--fh-cold)); }
}

/* hacked: gruene Konsolenschrift, farbversetzte Kanten, kurze
   Glitch-Spruenge und ein blinkender Cursor. steps() laesst die
   Spruenge hart springen statt weich zu gleiten - so wirkt es kaputt. */
.fh-titel-hacked {
  color: var(--fh-neon);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  text-shadow: 0 0 6px color-mix(in srgb, var(--fh-neon) 70%, transparent);
  animation: fhTitelGlitch 3s steps(1, end) infinite;
}

.fh-titel-hacked::after {
  content: "_";
  animation: fhTitelCursor 1s steps(1, end) infinite;
}

@keyframes fhTitelGlitch {
  0%, 84%, 100% {
    transform: none;
    text-shadow: 0 0 6px color-mix(in srgb, var(--fh-neon) 70%, transparent);
  }
  86% {
    transform: translateX(1px) skewX(-8deg);
    text-shadow: -2px 0 var(--fh-danger), 2px 0 var(--fh-cold);
  }
  89% {
    transform: translateX(-2px);
    text-shadow: 2px 0 var(--fh-danger), -2px 0 var(--fh-cold);
  }
  92% {
    transform: skewX(6deg);
    text-shadow: -1px 0 var(--fh-danger), 1px 0 var(--fh-cold);
  }
}

@keyframes fhTitelCursor {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Wo die Titel stehen */
.fh-player-card-eventtitel {
  display: block;
  font-size: 12px;
}

.leaderboard-eventtitel,
.fh-podium-eventtitel {
  display: block;
  margin-top: 2px;
  font-size: 13px;
}

.fh-podium-eventtitel {
  margin-inline: auto;
  font-size: 12px;
  text-align: center;
}

/* Reduzierte Bewegung: stehende Farbe statt Lauf, kein Glitch. */
@media (prefers-reduced-motion: reduce) {
  .fh-event-titel,
  .fh-titel-hacked::after {
    animation: none;
  }
}

/* ======================================================
   LIVE-EVENT FUER ZUSCHAUER (scripts/liveevent/live-zuschauer.js)
   ---------------------------------------------------
   Entwurf "Live-Event Zuschauer": Live-Anzeige oben, Flyout mit
   Logbuch, Countdown-Uebernahme, Crew-Abstimmung, Andenken und
   Abzeichen-Sammlung. Keyframes heissen fhZu...
====================================================== */
@keyframes fhZuPuls { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,57,53,.7); } 70% { box-shadow: 0 0 0 7px rgba(229,57,53,0); } }
@keyframes fhZuRechtsIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes fhZuHochIn { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fhZuZahl { 0% { opacity: 0; transform: scale(1.6); } 40% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fhZuMedaille { 0% { opacity: 0; transform: scale(.3) rotate(-30deg); } 60% { opacity: 1; transform: scale(1.12) rotate(6deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes fhZuDrehen { to { transform: rotate(360deg); } }
@keyframes fhZuSieg { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fhZuGlitchText {
  0%, 100% { text-shadow: -3px 0 #e53935, 3px 0 #42b8ff, 0 0 24px rgba(57,255,20,.6); transform: none; }
  18% { text-shadow: 3px 0 #e53935, -3px 0 #42b8ff, 0 0 24px rgba(57,255,20,.6); transform: translateX(3px) skewX(-7deg); }
  36% { transform: translateX(-4px); }
  54% { text-shadow: -1px 0 #e53935, 1px 0 #42b8ff, 0 0 24px rgba(57,255,20,.6); transform: skewX(5deg); }
  72% { transform: none; }
}

/* ---------- Live-Anzeige ---------- */
.fh-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 34px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(229,57,53,.5);
  background: rgba(229,57,53,.1);
  color: var(--fh-fg);
  font-family: var(--fh-font-display);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  animation: fhZuRechtsIn .4s var(--fh-ease);
  transition: background-color var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.fh-live-pill:hover { background: rgba(229,57,53,.18); border-color: rgba(229,57,53,.75); }
.fh-live-pill:focus-visible { outline: 2px solid var(--fh-gold-bright); outline-offset: 2px; }
.fh-live-pill-punkt {
  display: inline-block;
  flex: none;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fh-danger);
  animation: fhZuPuls 1.6s infinite;
}
.fh-live-pill:not(.ist-live) .fh-live-pill-punkt { background: var(--fh-gold-bright); animation: none; }
.fh-live-pill-trenner { width: 1px; height: 14px; background: rgba(232,237,244,.2); }
.fh-live-pill-icon { width: 15px; height: 15px; color: var(--fh-muted-fg); }
.fh-live-pill-zahl { font-variant-numeric: tabular-nums; }
/* Schmal: fest oben mittig, ueber dem Inhalt. */
.fh-live-pill.ist-schwebend {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 50%;
  z-index: 950;
  transform: translateX(-50%);
  background: rgba(20,8,10,.92);
  box-shadow: var(--fh-shadow-sm);
  animation: none;
}

.fh-live-flyout {
  position: fixed;
  z-index: 960;
  padding: 16px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border-strong);
  background: rgba(13,21,32,.97);
  box-shadow: var(--fh-shadow);
  color: var(--fh-fg);
  animation: fhZuHochIn .3s var(--fh-ease);
}
.fh-live-flyout-kopf { display: flex; align-items: center; gap: 12px; }
.fh-live-flyout-kopf img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(214,168,79,.4); }
.fh-live-flyout-kopf > div { min-width: 0; }
.fh-live-flyout-kicker { margin: 0; font-family: var(--fh-font-display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #e57373; }
.fh-live-flyout-name { margin: 2px 0 0; font-family: var(--fh-font-display); font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.fh-live-flyout-log { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fh-live-flyout-zeile { display: flex; gap: 10px; align-items: baseline; font-size: 13px; color: #a6b6c9; }
.fh-live-flyout-zeit { flex: none; min-width: 42px; font-family: var(--fh-font-display); color: var(--fh-muted-fg); font-variant-numeric: tabular-nums; }
.fh-live-flyout-leer { margin: 0; font-size: 13px; color: var(--fh-muted-fg); }

/* ---------- Countdown-Uebernahme ---------- */
.fh-live-countdown {
  position: fixed; inset: 0; z-index: 9998;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
  background: radial-gradient(120% 90% at 50% 30%, rgba(20,28,46,.98), rgba(5,6,12,.99));
  color: var(--fh-fg);
  text-align: center;
  animation: fhZuHochIn .5s ease;
}
.fh-live-countdown-kicker { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--fh-font-display); font-size: 13px; letter-spacing: .42em; text-transform: uppercase; color: #e57373; }
.fh-live-countdown-name {
  margin: 14px 0 0;
  max-width: 900px;
  font-family: var(--fh-font-display);
  font-size: clamp(34px, 8vw, 64px);
  font-weight: 500; line-height: 1.05; letter-spacing: .03em;
  color: var(--fh-gold-bright);
  text-shadow: 0 0 50px rgba(240,201,106,.35);
  overflow-wrap: anywhere;
}
.fh-live-countdown-ring { position: relative; width: min(240px, 60vw); aspect-ratio: 1; margin-top: 34px; }
.fh-live-countdown-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fh-live-countdown-ring circle { fill: none; stroke-width: 3; }
.fh-live-countdown-ring .ist-grund { stroke: rgba(240,201,106,.15); }
.fh-live-countdown-ring .ist-lauf {
  stroke: var(--fh-gold-bright);
  stroke-linecap: round;
  stroke-dasharray: 691;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 8px rgba(240,201,106,.8));
  transition: stroke-dashoffset .25s linear;
}
.fh-live-countdown-zahl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--fh-font-display);
  font-size: clamp(72px, 22vw, 112px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.fh-live-countdown-zahl.ist-neu { animation: fhZuZahl .6s var(--fh-ease); }
.fh-live-countdown-crew { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.fh-live-countdown-crew[hidden] { display: none; }
.fh-live-countdown-bilder { display: flex; padding-left: 10px; }
.fh-live-countdown-bilder img { width: 34px; height: 34px; margin-left: -10px; border-radius: 50%; object-fit: cover; border: 2px solid var(--fh-surface); }
.fh-live-countdown-crew p { margin: 0; font-size: 15px; color: #a6b6c9; }
.fh-live-countdown-crew strong { font-family: var(--fh-font-display); font-size: 18px; font-weight: 500; color: var(--fh-fg); font-variant-numeric: tabular-nums; }
.fh-live-countdown-hinweis { margin: 10px 0 0; font-size: 13px; color: var(--fh-muted-fg); }

/* ---------- Crew-Abstimmung ---------- */
.fh-live-abst {
  position: fixed;
  left: 50%;
  bottom: calc(var(--fh-mobile-stack-height, 0px) + 16px);
  z-index: 940;
  width: min(680px, calc(100vw - 32px));
  transform: translateX(-50%);
}
@media (min-width: 1024px) {
  .fh-live-abst { left: calc(50% + var(--fh-rail-w) / 2); bottom: 40px; }
}
.fh-live-abst-karte {
  position: relative;
  overflow: hidden;
  padding: 22px 24px 24px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid rgba(214,168,79,.4);
  background: linear-gradient(180deg, rgba(13,21,32,.98), rgba(8,12,20,.98));
  box-shadow: var(--fh-shadow), 0 0 30px rgba(240,201,106,.15);
  color: var(--fh-fg);
  animation: fhZuHochIn .5s cubic-bezier(.22,1.2,.36,1);
}
.fh-live-abst-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.fh-live-abst-kicker { margin: 0 0 6px; display: flex; align-items: center; gap: 8px; font-family: var(--fh-font-display); font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: var(--fh-gold-bright); }
.fh-live-abst-kicker svg { width: 14px; height: 14px; flex: none; }
.fh-live-abst-frage { margin: 0; font-family: var(--fh-font-display); font-size: clamp(22px, 4.5vw, 30px); font-weight: 500; line-height: 1.1; letter-spacing: .02em; overflow-wrap: anywhere; }
.fh-live-abst-uhr { flex: none; text-align: right; }
.fh-live-abst-zeit { margin: 0; font-family: var(--fh-font-display); font-size: clamp(22px, 4.5vw, 30px); font-weight: 500; line-height: 1.1; color: var(--fh-fg); font-variant-numeric: tabular-nums; }
.fh-live-abst-zeit.ist-knapp { color: var(--fh-danger); }
.fh-live-abst-stimmen { margin: 2px 0 0; font-size: 12px; color: var(--fh-muted-fg); }
.fh-live-abst-optionen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
@media (max-width: 520px) { .fh-live-abst-optionen { grid-template-columns: 1fr; } }
.fh-live-abst-opt {
  position: relative;
  overflow: hidden;
  display: block;
  padding: 16px 16px 14px;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border-strong);
  background: rgba(22,34,49,.7);
  color: var(--fh-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: opacity .4s var(--fh-ease), border-color .3s var(--fh-ease), box-shadow .3s var(--fh-ease);
}
.fh-live-abst-opt.ist-a { --abst-farbe: var(--fh-cold); --abst-fuellung: rgba(66,184,255,.16); }
.fh-live-abst-opt.ist-b { --abst-farbe: var(--fh-gold-bright); --abst-fuellung: rgba(240,201,106,.16); }
.fh-live-abst-opt:not(:disabled):hover { border-color: var(--abst-farbe); }
.fh-live-abst-opt:focus-visible { outline: 2px solid var(--abst-farbe); outline-offset: 2px; }
.fh-live-abst-opt:disabled { cursor: default; }
.fh-live-abst-opt.ist-meine { border-color: var(--abst-farbe); box-shadow: 0 0 18px var(--abst-fuellung); }
.fh-live-abst-opt.ist-sieger { border-color: var(--abst-farbe); box-shadow: 0 0 26px var(--abst-fuellung); animation: fhZuSieg .6s var(--fh-ease); }
.fh-live-abst-opt.ist-verlierer { opacity: .45; }
.fh-live-abst-fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--abst-fuellung); transition: width .6s var(--fh-ease); }
.fh-live-abst-inhalt { position: relative; display: flex; align-items: center; gap: 12px; }
.fh-live-abst-buchst {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--abst-fuellung);
  color: var(--abst-farbe);
  font-family: var(--fh-font-display);
  font-size: 22px;
}
.fh-live-abst-titel { flex: 1; min-width: 0; font-family: var(--fh-font-display); font-size: 20px; font-weight: 500; letter-spacing: .02em; overflow-wrap: anywhere; }
.fh-live-abst-prozent { flex: none; font-family: var(--fh-font-display); font-size: 26px; font-weight: 500; color: var(--abst-farbe); font-variant-numeric: tabular-nums; }
.fh-live-abst-meine { position: relative; display: none; align-items: center; gap: 5px; margin-top: 10px; font-family: var(--fh-font-display); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--abst-farbe); }
.fh-live-abst-meine svg { width: 13px; height: 13px; }
.fh-live-abst-opt.ist-meine .fh-live-abst-meine { display: inline-flex; }
.fh-live-abst-hinweis { margin: 14px 0 0; font-size: 13px; color: var(--fh-muted-fg); text-wrap: pretty; }
.fh-live-abst-karte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(240,201,106,.18); }
.fh-live-abst-balken { position: absolute; left: 0; bottom: 0; z-index: 1; height: 3px; width: 100%; background: var(--fh-gold-bright); box-shadow: 0 0 12px var(--fh-gold-bright); transition: width .25s linear; }

/* ---------- Andenken ---------- */
.fh-andenken {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(2,3,10,.72);
  backdrop-filter: blur(6px);
}
.fh-andenken-karte {
  width: min(460px, 100%);
  padding: 30px 30px 24px;
  border-radius: var(--fh-radius-lg);
  border: 1px solid rgba(214,168,79,.45);
  background: linear-gradient(180deg, rgba(20,28,46,.98), rgba(8,12,20,.98));
  box-shadow: var(--fh-glow-gold), var(--fh-shadow);
  color: var(--fh-fg);
  text-align: center;
  animation: fhZuHochIn .5s cubic-bezier(.22,1.2,.36,1);
}
.fh-andenken-exe { margin: 0 0 18px; font-size: 11px; letter-spacing: .14em; color: #6fa86b; text-align: left; }
.fh-andenken-medaille { position: relative; width: 148px; height: 148px; margin: 0 auto; animation: fhZuMedaille .9s .15s cubic-bezier(.22,1.2,.36,1) both; }
.fh-andenken-glanz { position: absolute; inset: -14px; border-radius: 50%; background: conic-gradient(from 0deg, transparent, rgba(240,201,106,.55), transparent 30%, transparent 50%, rgba(255,106,42,.45), transparent 80%); animation: fhZuDrehen 5s linear infinite; }
.fh-andenken-rund { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #2a2210, #05070b 78%); border: 3px solid var(--fh-gold-bright); box-shadow: 0 0 30px rgba(240,201,106,.45), inset 0 0 20px rgba(0,0,0,.6); }
.fh-andenken-strich { position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(240,201,106,.45); }
.fh-andenken-symbol { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; color: var(--fh-gold-bright); }
.fh-andenken-kicker { margin: 22px 0 0; font-family: var(--fh-font-display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--fh-gold); }
.fh-andenken-titel { margin: 10px 0 0; font-family: var(--fh-font-display); font-size: 24px; letter-spacing: .04em; line-height: 1.2; color: var(--fh-gold-bright); overflow-wrap: anywhere; }
.fh-andenken-text { margin: 12px 0 0; font-size: 13px; line-height: 1.6; color: #c5cfdb; text-wrap: pretty; }
.fh-andenken-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fh-andenken-chips span { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(240,201,106,.25); font-size: 11px; color: var(--fh-gold-bright); }
.fh-andenken-knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fh-andenken-knoepfe button {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid rgba(240,201,106,.2);
  background: transparent;
  color: var(--fh-muted-fg);
  font: inherit; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.fh-andenken-knoepfe svg { width: 16px; height: 16px; }
.fh-andenken-knoepfe .fh-andenken-sammlung { border-color: rgba(240,201,106,.6); background: rgba(240,201,106,.1); color: var(--fh-gold-bright); }
.fh-andenken-knoepfe button:hover { border-color: var(--fh-gold-bright); }
.fh-andenken-knoepfe button:focus-visible { outline: 2px solid var(--fh-gold-bright); outline-offset: 2px; }
/* Gehackt (nach "Systemausfall"): Konsole in Neongruen, wie im Entwurf. */
.fh-andenken.ist-gehackt .fh-andenken-karte {
  border-color: rgba(57,255,20,.45);
  background: repeating-linear-gradient(0deg, rgba(57,255,20,.04) 0 1px, transparent 1px 3px), rgba(3,10,5,.96);
  box-shadow: 0 0 30px rgba(57,255,20,.2), var(--fh-shadow);
  font-family: var(--fh-mono);
}
.fh-andenken.ist-gehackt .fh-andenken-glanz { background: conic-gradient(from 0deg, transparent, rgba(57,255,20,.55), transparent 30%, transparent 50%, rgba(229,57,53,.45), transparent 80%); }
.fh-andenken.ist-gehackt .fh-andenken-rund { background: radial-gradient(circle at 50% 38%, #0c2410, #05070b 78%); border-color: var(--fh-neon); box-shadow: 0 0 30px rgba(57,255,20,.45), inset 0 0 20px rgba(0,0,0,.6); }
.fh-andenken.ist-gehackt .fh-andenken-strich { border-color: rgba(57,255,20,.45); }
.fh-andenken.ist-gehackt .fh-andenken-symbol { color: var(--fh-neon); animation: fhZuGlitchText 2.6s steps(1, end) 1s infinite; }
.fh-andenken.ist-gehackt .fh-andenken-kicker { font-family: inherit; color: var(--fh-danger); }
.fh-andenken.ist-gehackt .fh-andenken-titel { font-family: inherit; color: var(--fh-neon); animation: fhZuGlitchText 2.6s steps(1, end) 1.6s infinite; }
.fh-andenken.ist-gehackt .fh-andenken-text { color: #b7d9b4; }
.fh-andenken.ist-gehackt .fh-andenken-chips span { border-color: rgba(57,255,20,.25); color: #8fd98a; }
.fh-andenken.ist-gehackt .fh-andenken-knoepfe button { border-color: rgba(57,255,20,.2); color: #6fa86b; }
.fh-andenken.ist-gehackt .fh-andenken-knoepfe .fh-andenken-sammlung { border-color: rgba(57,255,20,.6); background: rgba(57,255,20,.1); color: var(--fh-neon); }

/* ---------- Abzeichen-Sammlung ---------- */
.fh-sammlung { position: fixed; inset: 0; z-index: 9400; }
.fh-sammlung-schleier { position: absolute; inset: 0; background: rgba(2,3,10,.55); }
.fh-sammlung-leiste {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100vw);
  display: flex; flex-direction: column;
  border-left: 1px solid var(--fh-border-strong);
  background: #0b121c;
  box-shadow: -18px 0 40px rgba(0,0,0,.45);
  color: var(--fh-fg);
  animation: fhZuRechtsIn .45s var(--fh-ease);
}
.fh-sammlung-kopf { display: flex; align-items: center; gap: 14px; padding: 24px 24px 18px; border-bottom: 1px solid var(--fh-border); }
.fh-sammlung-kopf > div { flex: 1; min-width: 0; }
.fh-sammlung-name { margin: 0; font-family: var(--fh-font-display); font-size: 20px; font-weight: 500; overflow-wrap: anywhere; }
.fh-sammlung-unter { margin: 2px 0 0; font-size: 13px; color: var(--fh-muted-fg); }
.fh-sammlung-zu {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-border);
  background: rgba(13,21,32,.8);
  color: var(--fh-muted-fg);
  cursor: pointer;
}
.fh-sammlung-zu svg { width: 18px; height: 18px; }
.fh-sammlung-zu:hover { color: var(--fh-fg); border-color: var(--fh-border-strong); }
.fh-sammlung-inhalt { padding: 20px 24px; overflow: auto; }
.fh-sammlung-zeile { display: flex; align-items: baseline; justify-content: space-between; }
.fh-sammlung-zeile p { margin: 0; font-family: var(--fh-font-display); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--fh-muted-fg); }
.fh-sammlung-zeile .fh-sammlung-zahl { font-size: 13px; letter-spacing: 0; color: var(--fh-gold-bright); }
.fh-sammlung-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.fh-sammlung-leer { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--fh-muted-fg); }
.fh-sammlung-abzeichen {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 8px 12px;
  border-radius: var(--fh-radius);
  border: 1px dashed var(--fh-border-strong);
  background: rgba(13,21,32,.5);
  text-align: center;
  opacity: .4;
  --abz-farbe: var(--fh-gold-bright);
  --abz-innen: #2a2210;
}
.fh-sammlung-abzeichen.ist-gegenhacker { --abz-farbe: var(--fh-neon); --abz-innen: #0c2410; }
.fh-sammlung-abzeichen.ist-da { opacity: 1; border-style: solid; border-color: color-mix(in srgb, var(--abz-farbe) 45%, transparent); background: color-mix(in srgb, var(--abz-farbe) 6%, transparent); }
.fh-sammlung-medaille {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--abz-farbe);
  background: radial-gradient(circle at 50% 35%, var(--abz-innen), #0b1824 80%);
  color: var(--abz-farbe);
}
.fh-sammlung-abzeichen:not(.ist-da) .fh-sammlung-medaille { border-color: var(--fh-border-strong); color: var(--fh-muted-fg); background: none; }
.fh-sammlung-medaille svg { width: 26px; height: 26px; }
.fh-sammlung-titel { font-family: var(--fh-font-display); font-size: 14px; line-height: 1.15; letter-spacing: .02em; overflow-wrap: anywhere; }
.fh-sammlung-datum { font-size: 11px; color: var(--fh-muted-fg); }
.fh-sammlung-neu { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 999px; background: var(--fh-neon); color: var(--fh-bg); font-family: var(--fh-font-display); font-size: 10px; letter-spacing: .1em; }
.fh-sammlung-fuss { margin: 18px 0 0; font-size: 13px; line-height: 1.5; color: var(--fh-muted-fg); text-wrap: pretty; }

/* ---------- Knopf auf der Spielerkarte ---------- */
.fh-player-card-abzeichen {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex: none;
  height: 34px; padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(240,201,106,.35);
  background: rgba(240,201,106,.08);
  color: var(--fh-gold-bright);
  font-family: var(--fh-font-display);
  font-size: 13px;
  cursor: pointer;
}
.fh-player-card-abzeichen svg { width: 16px; height: 16px; }
.fh-player-card-abzeichen.ist-neu::after { content: ""; position: absolute; top: -2px; right: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--fh-neon); box-shadow: 0 0 8px var(--fh-neon); }
.fh-player-card-abzeichen:focus-visible { outline: 2px solid var(--fh-gold-bright); outline-offset: 2px; }
/* In der schmalen Leiste nur als kleine Medaille am Bild. */
@media (min-width: 1024px) {
  .fh-sidebar-footer .fh-player-card { position: relative; }
  .fh-sidebar-footer .fh-player-card-abzeichen {
    position: absolute; right: -8px; bottom: -6px;
    width: 20px; height: 20px; padding: 0;
    background: var(--fh-surface);
  }
  .fh-sidebar-footer .fh-player-card-abzeichen svg { width: 12px; height: 12px; }
  .fh-sidebar-footer .fh-player-card-abzeichen span { display: none; }
}

/* ---------- Chip in der Rangliste ---------- */
.fh-abzeichen-chip {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(240,201,106,.45);
  background: rgba(240,201,106,.08);
  color: var(--fh-gold-bright);
  font-family: var(--fh-mono);
  font-size: 10px;
  letter-spacing: .06em;
  vertical-align: middle;
  white-space: nowrap;
}
.fh-abzeichen-chip svg { width: 11px; height: 11px; }
.fh-abzeichen-chip.ist-gegenhacker { border-color: rgba(57,255,20,.45); background: rgba(57,255,20,.08); color: var(--fh-neon); }

@media (prefers-reduced-motion: reduce) {
  .fh-live-pill, .fh-live-pill-punkt, .fh-live-flyout, .fh-live-countdown, .fh-live-countdown-zahl.ist-neu,
  .fh-live-abst-karte, .fh-live-abst-opt.ist-sieger, .fh-andenken-karte, .fh-andenken-medaille,
  .fh-andenken-glanz, .fh-andenken.ist-gehackt .fh-andenken-symbol, .fh-andenken.ist-gehackt .fh-andenken-titel,
  .fh-sammlung-leiste { animation: none; }
}

/* ======================================================
   COMMUNITY-QUEST GEGENHACK (scripts/liveevent/gegenhack.js)
   ---------------------------------------------------
   Das "Bordnetz der Crew" im Nocturne-Violett. --gh-hk (0..1) ist
   der Hack-Grad: bei 1 gekapert (Neon, Konsole, Flackern), bei 0
   sauber. Alle Farben mischen sich darueber. Keyframes: fhGh...
====================================================== */
@keyframes fhGhPuls { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes fhGhFragIn { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 60% { opacity: 1; transform: scale(1.15) rotate(8deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes fhGhSchweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes fhGhTippZeile { from { max-width: 0; } to { max-width: 22ch; } }
@keyframes fhGhFaceRein { 0% { opacity: 0; transform: scale(2.4); filter: blur(8px); } 60% { opacity: 1; transform: scale(.94); filter: none; } 100% { opacity: 1; transform: scale(1); } }
@keyframes fhGhFaceZurueck { to { opacity: .18; transform: scale(.8); } }
@keyframes fhGhFinaleGlitch {
  0% { transform: none; filter: none; }
  10% { transform: translate(-9px, 2px) skewX(3deg); filter: hue-rotate(95deg) saturate(2.2); }
  20% { transform: none; filter: none; }
  40% { transform: translate(7px, -3px); filter: hue-rotate(-70deg) contrast(1.4); }
  50% { transform: none; filter: none; }
  70% { transform: translate(-4px, 0) skewX(-5deg); filter: hue-rotate(120deg); }
  80%, 100% { transform: none; filter: none; }
}
@keyframes fhGhWackeln { 0%, 100% { translate: 0 0; } 20% { translate: -4px 1px; } 40% { translate: 4px -2px; } 60% { translate: -3px 2px; } 80% { translate: 3px 0; } }
@keyframes fhGhRegenbogen { to { filter: hue-rotate(360deg); } }
@keyframes fhGhPumpen { 0%, 100% { scale: 1; } 50% { scale: 1.1; } }
@keyframes fhGhDvdX { from { left: 0; } to { left: calc(100% - 64px); } }
@keyframes fhGhDvdY { from { top: 0; } to { top: calc(100% - 30px); } }
@keyframes fhGhTanz { 0% { transform: translateY(0) rotate(-14deg) scaleX(1); } 50% { transform: translateY(-14px) rotate(0) scaleX(-1); } 100% { transform: translateY(0) rotate(14deg) scaleX(1); } }
@keyframes fhGhPunkt { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes fhGhRad { to { transform: rotate(360deg); } }
@keyframes fhGhDrehbild { to { transform: rotate(360deg) scale(1.3); } }

/* Symbol im Menue (lucide statt Phosphor-Schrift) */
.fh-nav-icon svg { width: 1em; height: 1em; }

/* ---------- Farben je Hack-Grad ---------- */
.fh-gh-panel, .fh-gh-hinweis {
  --gh-p: calc(var(--gh-hk, 0) * 100%);
  --gh-akzent: color-mix(in oklch, var(--fh-neon) var(--gh-p), var(--fh-nocturne));
  --gh-hell: color-mix(in oklch, var(--fh-neon-hell) var(--gh-p), var(--fh-nocturne-hell));
  --gh-tief: color-mix(in oklch, var(--fh-neon-tief) var(--gh-p), var(--fh-nocturne-tief));
  --gh-dunkel: color-mix(in oklch, rgba(57,255,20,.12) var(--gh-p), var(--fh-nocturne-dunkel));
  --gh-flaeche: color-mix(in oklch, #07140a var(--gh-p), var(--fh-nocturne-karte));
  --gh-text: color-mix(in oklch, var(--fh-neon-text) var(--gh-p), var(--fh-muted-fg));
  --gh-zahl: color-mix(in oklch, var(--fh-neon) var(--gh-p), var(--fh-fg));
}

/* ---------- Seite und Panel ---------- */
.fh-gh-seite { display: flex; justify-content: center; padding-top: 24px; padding-bottom: 48px; }
#gegenhack-inhalt { width: min(620px, 100%); }
.fh-gh-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: var(--fh-radius-lg);
  background: linear-gradient(180deg, var(--gh-flaeche), var(--fh-nocturne-grund) 70%);
  box-shadow: 0 0 0 1px color-mix(in oklch, rgba(57,255,20,.55) var(--gh-p), #595d6c), 0 0 calc(var(--gh-hk, 0) * 30px) rgba(57,255,20,.25), var(--fh-shadow);
  color: var(--fh-fg);
  font-family: var(--fh-font-sans, "Inter"), system-ui, sans-serif;
  animation: fhZuRechtsIn .6s var(--fh-ease);
  transition: box-shadow 1s var(--fh-ease);
}
.fh-gh-panel.ist-gekapert { animation: fhZuRechtsIn .6s var(--fh-ease), fhStGehacktFlackern 5s steps(1, end) .6s infinite; }
.fh-gh-panel.ist-konsole { font-family: var(--fh-mono); }
.fh-gh-panel.ist-glitch .fh-gh-titel { animation: fhStGlitchText 3s steps(1, end) infinite; }
.fh-gh-scan {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: calc(var(--gh-hk, 0) * .9);
  background: repeating-linear-gradient(0deg, rgba(57,255,20,.07) 0 1px, transparent 1px 3px);
  animation: fhStScan .6s linear infinite;
  transition: opacity 1s;
}
.fh-gh-glitch { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: calc(var(--gh-hk, 0) * .9); mix-blend-mode: screen; }
.fh-gh-glitch span { position: absolute; left: 0; right: 0; opacity: 0; animation: fhStGlitchBalken 3.2s steps(1, end) infinite; }
.fh-gh-glitch span:nth-child(1) { top: 22%; height: 3px; background: rgba(57,255,20,.6); }
.fh-gh-glitch span:nth-child(2) { top: 58%; height: 14px; background: rgba(229,57,53,.35); animation-duration: 4.6s; animation-delay: 1.1s; }
.fh-gh-glitch span:nth-child(3) { top: 81%; height: 6px; background: rgba(57,255,20,.35); animation-duration: 5.4s; animation-delay: 2.3s; }
.fh-gh-warnung {
  position: absolute; top: 14px; right: 14px; z-index: 7;
  display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(229,57,53,.6);
  background: rgba(20,4,4,.85);
  font-family: var(--fh-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fh-danger);
  pointer-events: none;
}
.fh-gh-warnung[hidden] { display: none; }
.fh-gh-warnung .fh-gh-punkt { background: var(--fh-danger); box-shadow: none; animation: fhStLivePunkt 1s steps(1) infinite; }
.fh-gh-punkt { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gh-akzent); box-shadow: 0 0 8px var(--gh-akzent); animation: fhStLivePunkt 1.4s infinite; }
.fh-gh-kante { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gh-akzent) 48px, var(--gh-akzent) calc(100% - 48px), transparent); }
.fh-gh-kopf { padding: 22px 22px 14px; }
.fh-gh-kicker { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--gh-hell, var(--fh-nocturne-hell)); }
.fh-gh-kicker svg { width: 14px; height: 14px; flex: none; }
/* h1 im Selektor: .page-content h1 (10-inhaltsseiten.css) setzt
   sonst die grosse, weit gesperrte Seitentitel-Schrift. */
.fh-gh-titel, .page-content h1.fh-gh-titel { margin: 8px 0 0; font-family: inherit; font-size: clamp(22px, 5vw, 28px); font-weight: 500; letter-spacing: -.015em; line-height: 1.12; text-shadow: none; color: var(--fh-fg); overflow-wrap: anywhere; }
.fh-gh-intro { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--gh-text); text-wrap: pretty; }
.fh-gh-stand { padding: 4px 22px 16px; }
.fh-gh-stand-zeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fh-gh-prozent { font-size: 42px; font-weight: 500; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--gh-zahl); }
.fh-gh-prozent.ist-puls { animation: fhGhPuls .5s var(--fh-ease); }
.fh-gh-zahlen { text-align: right; font-size: 12px; line-height: 1.5; color: var(--fh-muted-fg); }
.fh-gh-zahlen p { margin: 0; }
.fh-gh-zahlen p:first-child { color: #c4cad6; font-variant-numeric: tabular-nums; }
.fh-gh-aktiv { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font-variant-numeric: tabular-nums; }
.fh-gh-balken { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); }
.fh-gh-balken.ist-gross { height: 8px; margin-top: 12px; }
.fh-gh-balken-fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--gh-tief), var(--gh-akzent)); box-shadow: 0 0 14px var(--gh-akzent); transition: width .8s var(--fh-ease); }
.fh-gh-marke { position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px; background: #5b6070; }
.fh-gh-meilensteine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.fh-gh-meilenstein { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: var(--fh-radius-sm); box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.fh-gh-meilenstein.ist-erreicht { background: var(--gh-dunkel); box-shadow: 0 0 0 1px var(--gh-tief); }
.fh-gh-meilenstein-titel { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: color-mix(in oklch, var(--fh-neon-matt) var(--gh-p), #8b90a0); }
.fh-gh-meilenstein.ist-erreicht .fh-gh-meilenstein-titel { color: var(--gh-hell); }
.fh-gh-meilenstein-titel svg { width: 13px; height: 13px; flex: none; }
.fh-gh-meilenstein-text { font-size: 11px; line-height: 1.35; color: var(--fh-muted-fg); text-wrap: pretty; }
.fh-gh-prognose {
  display: flex; align-items: center; gap: 10px;
  margin: 0 22px; padding: 10px 12px;
  border-radius: var(--fh-radius-sm);
  background: rgba(60,10,10,.55);
  box-shadow: 0 0 0 1px rgba(229,57,53,.5);
  --gh-prog: #ff7a6a;
  transition: background-color .6s, box-shadow .6s;
}
.fh-gh-prognose[hidden] { display: none; }
.fh-gh-prognose.ist-gut { background: var(--gh-dunkel); box-shadow: 0 0 0 1px var(--gh-tief); --gh-prog: var(--gh-hell); }
.fh-gh-prognose-icon { display: flex; flex: none; color: var(--gh-prog); }
.fh-gh-prognose-icon svg { width: 20px; height: 20px; }
.fh-gh-prognose > div { flex: 1; min-width: 0; }
.fh-gh-prognose-titel { margin: 0; font-size: 13px; font-weight: 500; color: var(--gh-prog); font-variant-numeric: tabular-nums; }
.fh-gh-prognose-text { margin: 1px 0 0; font-size: 12px; line-height: 1.4; color: var(--gh-text); text-wrap: pretty; }
.fh-gh-aufgaben { padding: 16px 22px 6px; }
.fh-gh-abschnitt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.fh-gh-label { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fh-muted-fg); }
.fh-gh-beitrag { font-size: 12px; color: var(--gh-hell); font-variant-numeric: tabular-nums; }
.fh-gh-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fh-gh-aufgabe {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px;
  border-radius: var(--fh-radius-sm);
  background: var(--fh-nocturne-karte);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04);
  transition: opacity var(--fh-dauer) var(--fh-ease);
}
.fh-gh-aufgabe.ist-erledigt { background: rgba(43,39,65,.45); }
.fh-gh-aufgabe.ist-gedimmt { opacity: .45; }
.fh-gh-aufgabe-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--fh-radius-sm); background: var(--gh-dunkel); color: var(--gh-hell); }
.fh-gh-aufgabe-icon svg { width: 19px; height: 19px; }
.fh-gh-aufgabe-text { min-width: 0; }
.fh-gh-aufgabe-titel { margin: 0; font-size: 14px; font-weight: 500; color: var(--fh-fg); }
.fh-gh-aufgabe-sub { margin: 1px 0 0; font-size: 12px; line-height: 1.4; color: var(--gh-text); text-wrap: pretty; }
.fh-gh-fertig { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--gh-dunkel); color: var(--gh-hell); font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fh-gh-fertig[hidden] { display: none; }
.fh-gh-fertig svg { width: 12px; height: 12px; }
.fh-gh-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--gh-akzent, var(--fh-nocturne));
  background: transparent;
  color: var(--gh-hell, var(--fh-nocturne-hell));
  font: inherit; font-size: 13px; font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fh-dauer) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.fh-gh-knopf[hidden] { display: none; }
.fh-gh-knopf svg { width: 15px; height: 15px; }
.fh-gh-knopf:hover:not(:disabled) { background: var(--gh-dunkel, var(--fh-nocturne-dunkel)); }
.fh-gh-knopf:focus-visible { outline: 2px solid var(--gh-hell, var(--fh-nocturne-hell)); outline-offset: 2px; }
.fh-gh-knopf:disabled { opacity: .5; cursor: default; }
.fh-gh-knopf.ist-voll { background: var(--gh-akzent, var(--fh-nocturne)); color: var(--fh-nocturne-grund); border-color: transparent; }
.fh-gh-knopf.ist-voll:hover { background: var(--gh-hell, var(--fh-nocturne-hell)); }
.fh-gh-knopf.ist-an { background: var(--gh-dunkel); }
.fh-gh-crew { padding: 14px 22px 4px; }
.fh-gh-feed { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-height: 60px; }
.fh-gh-feed-zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; color: #9aa0ae; animation: fhZuHochIn .4s ease; }
.fh-gh-feed-zeile img, .fh-gh-feed-bild { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.fh-gh-feed-bild { display: flex; align-items: center; justify-content: center; background: var(--fh-nocturne-dunkel); font-size: 12px; }
.fh-gh-feed-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fh-gh-feed-text strong { font-weight: 500; color: #d8dce4; }
.fh-gh-feed-text strong.ist-ich { color: var(--gh-hell); }
.fh-gh-feed-zeit { color: #6b7080; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fh-gh-feed-leer { margin: 0; font-size: 12px; color: var(--fh-muted-fg); }
.fh-gh-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding: 12px 22px; border-top: 1px solid rgba(255,255,255,.06); background: rgba(0,0,0,.18); }
.fh-gh-fuss[hidden] { display: none; }
.fh-gh-termin { margin: 0; font-size: 13px; font-weight: 500; color: var(--fh-fg); }
.fh-gh-rest { margin: 1px 0 0; font-size: 12px; color: var(--fh-muted-fg); font-variant-numeric: tabular-nums; }
.fh-gh-leer { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; border-radius: var(--fh-radius-lg); background: var(--fh-nocturne-karte); box-shadow: 0 0 0 1px #3a3d4c; }
.fh-gh-leer-text { margin: 0; font-size: 15px; line-height: 1.5; color: #c4cad6; }

/* ---------- Hinweis auf der Startseite ---------- */
.fh-gh-hinweis {
  position: fixed;
  right: 16px;
  bottom: calc(var(--fh-mobile-stack-height, 0px) + 16px);
  z-index: 930;
  width: min(320px, calc(100vw - 32px));
  padding: 16px 16px 14px;
  border-radius: var(--fh-radius);
  background: linear-gradient(180deg, var(--gh-flaeche), var(--fh-nocturne-grund));
  box-shadow: 0 0 0 1px color-mix(in oklch, rgba(57,255,20,.55) var(--gh-p), #595d6c), var(--fh-shadow);
  color: var(--fh-fg);
  animation: fhZuHochIn .5s var(--fh-ease);
}
@media (min-width: 1024px) { .fh-gh-hinweis { right: 24px; bottom: 24px; } }
.fh-gh-hinweis-zu {
  position: absolute; top: 8px; right: 8px;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--fh-muted-fg); cursor: pointer;
}
.fh-gh-hinweis-zu:hover { background: rgba(255,255,255,.06); color: var(--fh-fg); }
.fh-gh-hinweis-zu svg { width: 16px; height: 16px; }
.fh-gh-hinweis-titel { margin: 6px 28px 0 0; font-size: 18px; font-weight: 500; line-height: 1.2; overflow-wrap: anywhere; }
.fh-gh-hinweis-text { margin: 6px 0 12px; font-size: 13px; line-height: 1.45; color: var(--gh-text); }
.fh-gh-hinweis-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.fh-gh-hinweis-prozent { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--gh-zahl); }

/* ---------- Toast ---------- */
.fh-gh-toast {
  position: fixed; left: 50%; top: 84px; z-index: 9100;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px 10px 12px;
  border-radius: var(--fh-radius-sm);
  background: var(--fh-nocturne-karte);
  box-shadow: 0 0 0 1px #3a3d4c, var(--fh-shadow);
  color: var(--fh-fg);
  transform: translateX(-50%);
  animation: fhZuHochIn .4s cubic-bezier(.22,1.2,.36,1);
}
.fh-gh-toast-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: var(--fh-radius-sm); background: var(--fh-nocturne-dunkel); color: var(--fh-nocturne-hell); }
.fh-gh-toast-icon svg { width: 16px; height: 16px; }
.fh-gh-toast-titel { margin: 0; font-size: 14px; font-weight: 500; }
.fh-gh-toast-text { margin: 0; font-size: 12px; color: #9aa0ae; }

/* ---------- Minispiele ---------- */
.fh-gh-spiel { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.fh-gh-spiel.ist-modal { display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(5,6,12,.55); pointer-events: auto; }
.fh-gh-frag-hud {
  position: absolute; left: 50%; top: 76px;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--fh-nocturne-karte);
  box-shadow: 0 0 0 1px #3a3d4c, var(--fh-shadow);
  color: var(--fh-fg); font-size: 14px; font-weight: 500; white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: auto;
}
.fh-gh-frag-hud > svg { width: 18px; height: 18px; color: var(--fh-nocturne-hell); }
.fh-gh-frag-zahl { color: var(--fh-nocturne-hell); font-variant-numeric: tabular-nums; }
.fh-gh-frag-zeit { font-size: 13px; color: #9aa0ae; font-variant-numeric: tabular-nums; }
.fh-gh-frag-zeit.ist-knapp { color: var(--fh-fire); }
.fh-gh-rund-zu, .fh-gh-eckig-zu {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 30px; height: 30px;
  border: 1px solid #3a3d4c;
  border-radius: 50%;
  background: transparent; color: #9aa0ae; cursor: pointer;
}
.fh-gh-eckig-zu { width: 32px; height: 32px; border-radius: var(--fh-radius-sm); }
.fh-gh-rund-zu:hover, .fh-gh-eckig-zu:hover { background: rgba(255,255,255,.06); color: var(--fh-fg); }
.fh-gh-rund-zu svg, .fh-gh-eckig-zu svg { width: 16px; height: 16px; }
.fh-gh-frag-feld { position: absolute; inset: 0; }
.fh-gh-fragment {
  position: absolute;
  width: 58px; height: 58px;
  padding: 0; border: 0; background: none;
  cursor: crosshair;
  pointer-events: auto;
  animation: fhGhFragIn .35s cubic-bezier(.22,1.2,.36,1) both;
  transition: opacity .3s;
}
.fh-gh-fragment.ist-zerfall { opacity: .35; }
.fh-gh-fragment span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-neon);
  background: rgba(3,10,5,.88);
  box-shadow: 0 0 18px rgba(57,255,20,.45);
  color: var(--fh-neon);
  font-family: var(--fh-mono); font-size: 13px;
  animation: fhGhSchweben 1.2s ease-in-out infinite, fhStGlitchText 1.8s steps(1, end) infinite;
}
.fh-gh-fragment:focus-visible span { outline: 2px solid var(--fh-fg); outline-offset: 2px; }
.fh-gh-modal {
  width: min(540px, 100%);
  padding: 22px;
  border-radius: var(--fh-radius-lg);
  background: var(--fh-nocturne-karte);
  box-shadow: 0 0 0 1px #3a3d4c, var(--fh-shadow);
  color: var(--fh-fg);
  animation: fhZuHochIn .4s cubic-bezier(.22,1.2,.36,1);
}
.fh-gh-modal.ist-schmal { width: min(420px, 100%); }
.fh-gh-modal-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fh-gh-modal-kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fh-nocturne-hell); }
.fh-gh-modal-titel { margin: 6px 0 0; font-size: clamp(20px, 5vw, 25px); font-weight: 500; line-height: 1.12; }
.fh-gh-modal-text { margin: 6px 0 0; font-size: 13px; color: #9aa0ae; }
.fh-gh-welle { margin-top: 16px; border-radius: var(--fh-radius-sm); background: var(--fh-nocturne-grund); overflow: hidden; }
.fh-gh-welle svg { display: block; width: 100%; height: 150px; }
.fh-gh-welle line { stroke: #3f424d; stroke-width: 1; }
.fh-gh-welle path { fill: none; }
.fh-gh-welle .ist-ziel { stroke: var(--fh-neon); stroke-width: 2; stroke-dasharray: 5 5; opacity: .75; }
.fh-gh-welle .ist-dein { stroke: var(--fh-nocturne); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(145,132,217,.7)); }
.fh-gh-regler { display: grid; grid-template-columns: 90px minmax(0, 1fr) 44px; align-items: center; gap: 10px 12px; margin-top: 16px; font-size: 13px; color: #9aa0ae; }
.fh-gh-regler input { width: 100%; accent-color: var(--fh-nocturne); }
.fh-gh-regler span { text-align: right; color: var(--fh-fg); font-variant-numeric: tabular-nums; }
.fh-gh-deckung { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13px; color: #9aa0ae; --gh-deck: #9aa0ae; }
.fh-gh-deckung.ist-ok { --gh-deck: var(--fh-nocturne-hell); }
.fh-gh-deckung-balken { position: relative; flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); }
.fh-gh-deckung-fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: var(--gh-deck); transition: width .15s; }
.fh-gh-deckung-marke { position: absolute; left: 92%; top: -4px; bottom: -4px; width: 2px; background: #6b7080; }
.fh-gh-deckung-text { min-width: 110px; text-align: right; font-weight: 500; color: var(--gh-deck); font-variant-numeric: tabular-nums; }
.fh-gh-code-hinweis { margin: 8px 0 0; min-height: 20px; font-size: 13px; color: #9aa0ae; }
.fh-gh-code-hinweis.ist-falsch { color: var(--fh-fire); }
.fh-gh-code-feld { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.fh-gh-code-feld.ist-falsch { animation: fhStGehacktFlackern .5s steps(1, end); }
.fh-gh-code-feld button {
  height: clamp(64px, 18vw, 84px);
  border-radius: var(--fh-radius-sm);
  border: 1px solid #2c2e3a;
  background: var(--fh-nocturne-grund);
  color: #c4cad6;
  font-family: var(--fh-mono); font-size: 20px;
  cursor: pointer;
  transition: background-color .12s, box-shadow .12s, color .12s;
}
.fh-gh-code-feld button:disabled { cursor: default; }
.fh-gh-code-feld button.ist-an { background: var(--fh-nocturne); border-color: var(--fh-nocturne-hell); color: var(--fh-nocturne-grund); box-shadow: 0 0 22px rgba(145,132,217,.7); }
.fh-gh-code-feld button:focus-visible { outline: 2px solid var(--fh-nocturne-hell); outline-offset: 2px; }
.fh-gh-code-punkte { display: flex; gap: 6px; margin-top: 14px; }
.fh-gh-code-punkte span { flex: 1; height: 4px; border-radius: 999px; background: #2c2e3a; }
.fh-gh-code-punkte span.ist-an { background: var(--fh-nocturne); }

/* ---------- Sieg-Bildschirm ---------- */
.fh-gh-sieg {
  position: fixed; inset: 0; z-index: 9600;
  display: flex; align-items: center;
  padding: 24px clamp(16px, 10vw, 160px);
  overflow: auto;
  background: radial-gradient(90% 80% at 30% 40%, var(--fh-nocturne-dunkel), var(--fh-nocturne-grund) 70%);
  color: var(--fh-fg);
  animation: fhZuHochIn .6s ease;
}
.fh-gh-sieg-inhalt { max-width: 620px; }
.fh-gh-sieg .fh-gh-kicker { font-size: 12px; color: var(--fh-nocturne-hell); }
.fh-gh-sieg .fh-gh-kicker svg { width: 16px; height: 16px; }
.fh-gh-sieg-titel { margin: 14px 0 0; font-size: clamp(36px, 8vw, 64px); font-weight: 500; letter-spacing: -.02em; line-height: 1.02; }
.fh-gh-sieg-text { margin: 16px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.55; color: #c4cad6; text-wrap: pretty; }
.fh-gh-sieg-folgen { display: flex; flex-direction: column; gap: 8px; margin: 26px 0 30px; }
.fh-gh-sieg-folge { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #d8dce4; }
.fh-gh-sieg-folge p { margin: 0; }
.fh-gh-sieg-folge span { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: var(--fh-radius-sm); background: var(--fh-nocturne-dunkel); color: var(--fh-nocturne-hell); }
.fh-gh-sieg-folge svg { width: 16px; height: 16px; }
.fh-gh-sieg .fh-gh-knopf { height: 40px; padding: 0 18px; font-size: 14px; }

/* ======================================================
   WERBUNGSFLUT (scripts/liveevent/werbungsflut.js)
   Fenster im Stil von 2003 - deshalb bewusst Tahoma und die
   alten Systemfarben statt der Seiten-Tokens.
====================================================== */
.fh-wf { position: fixed; inset: 0; z-index: 10003; pointer-events: none; }
.fh-wf-flaeche { position: absolute; inset: 0; }
.fh-wf-fenster {
  position: absolute;
  pointer-events: auto;
  font-family: Tahoma, Verdana, sans-serif;
  background: #d4d0c8;
  box-shadow: inset -1px -1px #404040, inset 1px 1px #fff, 5px 7px 0 rgba(0,0,0,.5);
  animation: fhGhFragIn .28s cubic-bezier(.22,1.2,.36,1) both;
}
.fh-wf-fenster.ist-wackeln { animation: fhGhFragIn .28s cubic-bezier(.22,1.2,.36,1) both, fhGhWackeln .3s linear infinite; }
.fh-wf-fenster.ist-pumpen { animation: fhGhFragIn .28s cubic-bezier(.22,1.2,.36,1) both, fhGhPumpen 1.1s ease-in-out infinite; }
.fh-wf-fenster.ist-regenbogen { animation: fhGhFragIn .28s cubic-bezier(.22,1.2,.36,1) both, fhGhRegenbogen 2s linear infinite; }
.fh-wf-leiste { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 3px 3px 8px; background: linear-gradient(90deg, #0a246a, #3a6ea5); color: #fff; font-size: 12px; font-weight: 700; }
.fh-wf-leiste-titel { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; }
.fh-wf-leiste-titel svg { width: 13px; height: 13px; flex: none; }
.fh-wf-zu { flex: none; width: 22px; height: 19px; padding: 0; border: 0; background: #d4d0c8; box-shadow: inset -1px -1px #404040, inset 1px 1px #fff; font: inherit; font-size: 11px; font-weight: 700; color: #000; cursor: pointer; }
.fh-wf-zu:focus-visible, .fh-wf-cta:focus-visible { outline: 2px dotted #000; outline-offset: -4px; }
.fh-wf-inhalt { margin: 4px; padding: 14px; text-align: center; }
.fh-wf-bild { position: relative; height: 168px; margin: -10px -10px 12px; overflow: hidden; background: #111; border: 2px solid; }
.fh-wf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fh-wf-bild img.ist-drehbild { animation: fhGhDrehbild 2.4s linear infinite; }
.fh-wf-meme { position: absolute; left: 6px; right: 6px; font-family: Impact, "Arial Black", sans-serif; font-size: 21px; line-height: 1.05; color: #fff; text-transform: uppercase; text-shadow: 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000; }
.fh-wf-meme.ist-oben { top: 6px; }
.fh-wf-meme.ist-unten { bottom: 6px; }
.fh-wf-stempel { position: absolute; right: 10px; bottom: 34px; padding: 4px 10px; border: 3px solid #e00; color: #e00; background: rgba(255,255,255,.75); font-family: Impact, "Arial Black", sans-serif; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-14deg); }
.fh-wf-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -10px -10px 12px; }
.fh-wf-duo div { position: relative; height: 130px; overflow: hidden; background: #111; }
.fh-wf-duo img { width: 100%; height: 100%; object-fit: cover; }
.fh-wf-duo img.ist-nachher { filter: hue-rotate(95deg) saturate(3) contrast(1.6) blur(1px); transform: scale(1.9) rotate(172deg) translateY(12px); }
.fh-wf-duo span { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px; background: #000; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.fh-wf-duo span.ist-rot { background: #e00; }
.fh-wf-head { margin: 0; font-size: 21px; font-weight: 800; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; overflow-wrap: anywhere; }
.fh-wf-body { margin: 8px 0 0; font-size: 13px; line-height: 1.4; }
.fh-wf-captcha { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin-top: 10px; padding: 3px; background: #fff; border: 1px solid #bbb; }
.fh-wf-captcha img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fh-wf-laufband { margin: 10px -10px 0; overflow: hidden; background: #000; color: #fff200; font-size: 13px; font-weight: 700; text-transform: uppercase; }
.fh-wf-laufband div { display: flex; width: max-content; padding: 5px 0; animation: fhStLaufband 7s linear infinite; }
.fh-wf-laufband span { padding-right: 30px; white-space: nowrap; }
.fh-wf-rad { position: relative; width: 130px; height: 130px; margin: 12px auto 0; }
.fh-wf-rad-zeiger { position: absolute; left: 50%; top: -8px; z-index: 1; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 16px solid #fff; }
.fh-wf-rad-scheibe { position: absolute; inset: 0; border-radius: 50%; border: 4px solid #fff; background: conic-gradient(#ff2d2d 0 45deg, #fff200 0 90deg, #00d26a 0 135deg, #1a73e8 0 180deg, #ff3fb4 0 225deg, #ff8a00 0 270deg, #39ff14 0 315deg, #fff 0 360deg); animation: fhGhRad .9s linear infinite; }
.fh-wf-rad-mitte { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); border-radius: 50%; background: #111; border: 3px solid #fff; }
.fh-wf-dvd { position: relative; height: 110px; margin: 10px -10px 0; background: #000; overflow: hidden; }
.fh-wf-dvd span { position: absolute; width: 64px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #39ff14; color: #000; font-family: Impact, "Arial Black", sans-serif; font-size: 18px; animation: fhGhDvdX 2.3s linear infinite alternate, fhGhDvdY 1.7s linear infinite alternate, fhGhRegenbogen 3s linear infinite; }
.fh-wf-tanz { display: flex; justify-content: center; margin-top: 12px; }
.fh-wf-tanz img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; animation: fhGhTanz .45s ease-in-out infinite alternate; }
.fh-wf-tippt { display: inline-flex; gap: 5px; margin-top: 12px; padding: 10px 14px; border-radius: 14px 14px 14px 2px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.fh-wf-tippt span { width: 8px; height: 8px; border-radius: 50%; background: #555; animation: fhGhPunkt 1s ease-in-out infinite; }
.fh-wf-tippt span:nth-child(2) { animation-delay: .15s; }
.fh-wf-tippt span:nth-child(3) { animation-delay: .3s; }
.fh-wf-countdown { margin: 10px 0 0; font-family: var(--fh-mono); font-size: 38px; font-weight: 700; color: #ff2d2d; font-variant-numeric: tabular-nums; animation: fhStLivePunkt .5s steps(1) infinite; }
.fh-wf-ladebalken { margin-top: 12px; height: 18px; padding: 2px; background: #fff; box-shadow: inset 1px 1px #404040, inset -1px -1px #fff; }
.fh-wf-ladebalken div { width: 99%; height: 100%; background: repeating-linear-gradient(90deg, #0a246a 0 10px, transparent 10px 12px); }
.fh-wf-klein { margin: 4px 0 0; font-size: 11px; text-align: left; }
.fh-wf-cta { margin-top: 12px; padding: 6px 16px; border: 0; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: inset -2px -2px rgba(0,0,0,.35), inset 2px 2px rgba(255,255,255,.5); animation: fhStLivePunkt .9s steps(1) infinite; }
.fh-wf-enthuellt { margin: 4px; padding: 14px; background: var(--fh-neon-nacht); color: #b7d9b4; font-family: var(--fh-mono); animation: fhZuHochIn .3s ease; }
.fh-wf-enthuellt-kopf { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fh-danger); }
.fh-wf-enthuellt-kopf.ist-secret { color: var(--fh-neon); }
.fh-wf-enthuellt-kopf svg { width: 13px; height: 13px; }
.fh-wf-enthuellt-text { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--fh-fg); text-wrap: pretty; }
.fh-wf-hud {
  position: absolute; left: 50%; bottom: calc(var(--fh-mobile-stack-height, 0px) + 24px);
  z-index: 900;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 14px;
  max-width: calc(100vw - 24px);
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(57,255,20,.5);
  background: rgba(3,10,5,.94);
  font-family: var(--fh-mono); font-size: 13px;
  transform: translateX(-50%);
  pointer-events: auto;
  animation: fhZuHochIn .4s ease;
}
.fh-wf-hud-titel { color: var(--fh-danger); letter-spacing: .12em; text-transform: uppercase; }
.fh-wf-hud-secrets { color: var(--fh-neon); font-variant-numeric: tabular-nums; }
.fh-wf-hud-fenster { color: var(--fh-neon-matt); font-variant-numeric: tabular-nums; }
.fh-wf-hud-weiter, .fh-wf-weiter {
  height: 28px; padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(57,255,20,.4);
  background: transparent;
  color: var(--fh-neon-text);
  font: inherit; font-size: 12px;
  cursor: pointer;
}
.fh-wf-hud-weiter:hover, .fh-wf-weiter:hover { background: rgba(57,255,20,.1); }
.fh-wf-ende {
  position: absolute; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overflow: auto;
  background: rgba(3,6,4,.94);
  font-family: var(--fh-mono);
  color: var(--fh-fg);
  pointer-events: auto;
  animation: fhZuHochIn .5s ease;
}
.fh-wf-ende-inhalt { width: min(560px, 100%); }
.fh-wf-ende-kicker { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fh-danger); }
.fh-wf-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fh-danger); animation: fhStLivePunkt 1s steps(1) infinite; }
.fh-wf-ende-titel { margin: 14px 0 0; font-size: clamp(32px, 7vw, 48px); font-weight: 500; letter-spacing: .02em; line-height: 1.05; color: var(--fh-neon); animation: fhStGlitchText 2.2s steps(1, end) infinite; }
.fh-wf-ende-text { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: #b7d9b4; text-wrap: pretty; }
.fh-wf-ende-secrets { margin-top: 22px; padding: 14px 16px; border: 1px solid rgba(57,255,20,.25); border-radius: 8px; background: rgba(3,16,10,.8); }
.fh-wf-ende-label { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fh-neon-matt); }
.fh-wf-ende-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.fh-wf-ende-secret { margin: 0; display: flex; gap: 8px; font-size: 13px; line-height: 1.45; }
.fh-wf-ende-secret span:first-child { color: var(--fh-neon); }
.fh-wf-ende-leer { margin: 0; font-size: 13px; color: var(--fh-neon-matt); }
.fh-wf-ende-beute { margin: 14px 0 0; min-height: 1.4em; font-size: 15px; color: var(--fh-gold-bright); }
.fh-wf-weiter { margin-top: 16px; height: 40px; padding: 0 18px; border-radius: 8px; border-color: rgba(57,255,20,.6); background: rgba(57,255,20,.08); color: var(--fh-neon); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }

@media (prefers-reduced-motion: reduce) {
  .fh-gh-panel, .fh-gh-panel.ist-gekapert, .fh-gh-panel.ist-glitch .fh-gh-titel, .fh-gh-scan, .fh-gh-glitch span,
  .fh-gh-prozent.ist-puls, .fh-gh-hinweis, .fh-gh-toast, .fh-gh-modal, .fh-gh-sieg, .fh-gh-fragment, .fh-gh-fragment span,
  .fh-gh-code-feld.ist-falsch, .fh-gh-feed-zeile, .fh-gh-punkt,
  .fh-wf-fenster, .fh-wf-fenster.ist-wackeln, .fh-wf-fenster.ist-pumpen, .fh-wf-fenster.ist-regenbogen,
  .fh-wf-bild img.ist-drehbild, .fh-wf-laufband div, .fh-wf-rad-scheibe, .fh-wf-dvd span, .fh-wf-tanz img, .fh-wf-tippt span,
  .fh-wf-countdown, .fh-wf-cta, .fh-wf-ende, .fh-wf-ende-titel, .fh-wf-hud, .fh-wf-enthuellt { animation: none; }
}

/* ======================================================
   LIVE-STORY "DER RISS" (scripts/liveevent/riss-film.js)
   Die Buehne ist 1920 x 1080 und wird per JS eingepasst; alles im
   Film ist Inline-Stil wie im Entwurf.
====================================================== */
.fh-riss { position: fixed; inset: 0; z-index: 10050; overflow: hidden; background: #000; animation: fhRissRein .6s var(--fh-ease) both; }
.fh-riss.ist-aus { animation: fhRissRaus 1.2s var(--fh-ease-aus) forwards; }
.fh-riss-buehne { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; transform-origin: 50% 50%; overflow: hidden; font-family: var(--fh-font-sans, 'Inter'), sans-serif; color: var(--fh-fg); }
.fh-riss-hinweis { display: none; position: absolute; left: 0; right: 0; top: 18px; margin: 0; padding: 0 16px; text-align: center; font-size: 13px; letter-spacing: .08em; color: var(--fh-muted-fg); }
.fh-riss.ist-hochkant .fh-riss-hinweis { display: block; }
.fh-riss-weiter { position: absolute; right: 16px; bottom: 16px; height: 36px; padding: 0 14px; border: 1px solid rgba(232,237,244,.18); border-radius: 8px; background: rgba(5,7,11,.55); color: var(--fh-muted-fg); font: 500 12px/1 var(--fh-font-display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: .55; transition: opacity .2s var(--fh-ease), color .2s var(--fh-ease); }
.fh-riss-weiter:hover, .fh-riss-weiter:focus-visible { opacity: 1; color: var(--fh-gold-bright); }
/* "Zwei Hälften eines Herzens" (herz-film.js) nutzt die Bühne des
   Risses; dazu zwei Knöpfe unten rechts: Stimme an/aus, Überspringen. */
.fh-herz { background: #07080e; }
.fh-herz-leiste { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 8px; }
.fh-herz-leiste .fh-herz-knopf { position: static; }
.fh-herz-knopf[aria-pressed="true"] { color: var(--fh-fg); }
/* "Liebeslied" (lied-film.js, Migration 70): Lyric-Video auf der Bühne
   des Risses. Hintergrund im Canvas, Ringe und Text als DOM darüber. */
.fh-lied { background: var(--fh-lied-nacht); }
.fh-lied-grund { position: absolute; inset: 0; width: 100%; height: 100%; }
.fh-lied-text { position: absolute; inset: 0; }
.fh-lied-zeile { position: absolute; left: 50%; top: 50%; width: 1500px; text-align: center; transform: translate(-50%, -50%); transform-style: preserve-3d; color: var(--fh-lied-licht); text-shadow: 0 0 22px color-mix(in srgb, var(--fh-lied-lila) 45%, transparent), 1px 1px 0 color-mix(in srgb, var(--fh-lied-lila) 60%, transparent), 2px 2px 0 color-mix(in srgb, var(--fh-lied-lila-tief) 45%, transparent); will-change: transform, opacity; }
.fh-lied-reihe { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0 .3em; }
.fh-lied-wort, .fh-lied-zeichen { display: inline-block; opacity: 0; transform-origin: 50% 80%; transition: color .7s var(--fh-ease); }
.fh-lied-wort.ist-neu, .fh-lied-zeichen.ist-neu, .ist-neu > .fh-lied-zeichen { color: var(--fh-lied-lila); }
.fh-lied-wort.ist-betont { color: var(--fh-lied-lila); font-size: 1.22em; font-weight: 700; }
/* Kippen am Zeilenende: dicke 3D-Schrift in Lila. */
.fh-lied-zeile.ist-tief { text-shadow: 1px 1px 0 #d9d3ff, 2px 2px 0 #c4bbfb, 3px 3px 0 #ada2f2, 4px 4px 0 #978be6, 5px 5px 0 #8175d8, 6px 6px 0 #6c60c6, 7px 7px 0 var(--fh-lied-lila-tief), 0 0 40px color-mix(in srgb, var(--fh-lied-lila) 50%, transparent); }
/* Intro und Outro: Versalien, weit gesperrt, eher klein. */
.fh-lied-zeile.ist-intro, .fh-lied-zeile.ist-outro { font: 500 54px/1.3 var(--fh-font-sans); letter-spacing: .2em; text-transform: uppercase; }
.fh-lied-zeile.ist-intro .ist-betont, .fh-lied-zeile.ist-outro .ist-betont { color: var(--fh-lied-licht); font-size: 1.25em; font-weight: 600; }
/* Strophe: kräftig, an wechselnden Stellen. */
.fh-lied-zeile.ist-strophe { width: 1300px; font: 600 112px/1.12 var(--fh-font-sans); letter-spacing: -.012em; }
/* Refrain: kräftig, betonte Wörter weiß und größer. */
.fh-lied-zeile.ist-refrain { font: 600 100px/1.15 var(--fh-font-sans); letter-spacing: -.01em; }
.fh-lied-zeile.ist-refrain .ist-betont { color: var(--fh-lied-licht); }
/* Brücke: kursiv und leicht, Betontes aufrecht und fett. */
.fh-lied-zeile.ist-bruecke { font: italic 400 78px/1.2 var(--fh-font-sans); }
.fh-lied-zeile.ist-bruecke .ist-betont { font-style: normal; font-weight: 600; color: var(--fh-lied-licht); }
/* Ringe um den Text: drei dünne Kreise, innen ein Hauch Licht. */
.fh-lied-ringe { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; transform: translate(-50%, -50%); }
.fh-lied-ring { position: absolute; left: 0; top: 0; border: 2px solid color-mix(in srgb, var(--fh-lied-licht) 55%, transparent); border-radius: 50%; transform: translate(-50%, -50%); }
.fh-lied-ring:nth-child(1) { width: 440px; height: 440px; background: radial-gradient(circle, color-mix(in srgb, var(--fh-lied-lila) 22%, transparent), transparent 70%); }
.fh-lied-ring:nth-child(2) { width: 860px; height: 860px; border-color: color-mix(in srgb, var(--fh-lied-licht) 38%, transparent); }
.fh-lied-ring:nth-child(3) { width: 1300px; height: 1300px; border-color: color-mix(in srgb, var(--fh-lied-licht) 22%, transparent); }
.fh-lied-note { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; color: var(--fh-lied-lila); opacity: 0; }
.fh-lied-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes fhRissRein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fhRissRaus { from { opacity: 1; } to { opacity: 0; } }
/* Sterne im Hintergrund des Films: funkeln per CSS statt per Bild aus
   JavaScript - so malt der Browser die Buehne nicht in jedem Bild neu
   (riss-film.js setzt nur die Verzoegerung je Stern). */
.fh-riss-stern { position: absolute; border-radius: 50%; background: #dfe6f0; opacity: .25; animation: fhRissFunkeln 3.49s ease-in-out infinite alternate; will-change: opacity; }
@keyframes fhRissFunkeln { from { opacity: .25; } to { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .fh-riss, .fh-riss.ist-aus { animation-duration: .01s; }
  .fh-riss-stern { animation: none; opacity: .42; }
}

/* Ton-Freigabe auf dem Handy (live-storys.js): Handys spielen Ton erst
   nach einem Tippen - dann steht hier "Ton an". */
.fh-ton-an {
  position: fixed; left: 50%; bottom: max(84px, env(safe-area-inset-bottom)); z-index: 10004;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--fh-gold) 60%, transparent); border-radius: 999px;
  background: rgba(5, 7, 11, .88); color: var(--fh-gold-bright);
  font: 500 14px/1 var(--fh-font-display); letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 24px -6px var(--fh-gold); cursor: pointer; white-space: nowrap;
  transform: translateX(-50%); animation: fhTonAn 1.6s var(--fh-ease) infinite;
}
@keyframes fhTonAn { 0%, 100% { box-shadow: 0 0 24px -6px var(--fh-gold); } 50% { box-shadow: 0 0 34px -2px var(--fh-gold-bright); } }
@media (prefers-reduced-motion: reduce) { .fh-ton-an { animation: none; } }

/* =====================================================
   NORDLICHT: WUNSCHSTERNE (scripts/liveevent/nordlicht-wunsch.js,
   Migration 52). Haengt an body, steht in den :not-Listen von 95/96.
   Liegt ueber dem Nordlicht (9996) und den Story-Texten, unter der
   Banderole (10004). Die Sterne schweben unter "Wuensch dir was".
===================================================== */
.fh-wunsch {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 0 16px calc(9vh + env(safe-area-inset-bottom));
  pointer-events: none;
  color: var(--fh-fg);
  font-family: var(--fh-font-sans);
  background: linear-gradient(180deg, transparent 45%, rgba(5, 7, 11, .55) 100%);
  transition: opacity var(--fh-dauer-lang) var(--fh-ease);
}
.fh-wunsch.ist-aus { opacity: 0; }
.fh-wunsch-kopf { display: grid; justify-items: center; gap: 2px; text-align: center; }
.fh-wunsch-kicker { margin: 0; font-family: var(--fh-font-display); font-size: clamp(20px, 3.2vw, 30px); letter-spacing: .04em; text-shadow: 0 0 24px color-mix(in srgb, var(--fh-violett) 70%, transparent); }
.fh-wunsch-tipp { margin: 0; font-size: 14px; color: var(--fh-muted-fg); }
.fh-wunsch-sterne { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: 760px; }
.fh-wunsch-stern {
  pointer-events: auto;
  width: 160px;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 16px 12px 14px;
  border-radius: var(--fh-radius);
  border: 1px solid color-mix(in srgb, var(--fh-violett) 45%, transparent);
  background:
    radial-gradient(90% 70% at 50% 20%, color-mix(in srgb, var(--fh-success) 18%, transparent), transparent 70%),
    color-mix(in srgb, var(--fh-bg) 72%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: inherit;
  font: inherit;
  cursor: pointer;
  box-shadow: 0 0 24px color-mix(in srgb, var(--fh-violett) 30%, transparent);
  transition: transform var(--fh-dauer) var(--fh-ease), box-shadow var(--fh-dauer) var(--fh-ease), opacity var(--fh-dauer-lang) var(--fh-ease), border-color var(--fh-dauer) var(--fh-ease);
}
.fh-wunsch-stern:hover, .fh-wunsch-stern:focus-visible {
  outline: none;
  border-color: var(--fh-success);
  box-shadow: 0 0 34px color-mix(in srgb, var(--fh-success) 45%, transparent), 0 0 60px color-mix(in srgb, var(--fh-violett) 35%, transparent);
  transform: translateY(-4px) scale(1.03);
}
.fh-wunsch-stern:disabled { opacity: .35; cursor: default; transform: none; }
.fh-wunsch-kreis {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--fh-gold-bright);
  background: radial-gradient(circle, color-mix(in srgb, var(--fh-gold-bright) 30%, transparent), transparent 70%);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--fh-gold-bright) 60%, transparent));
}
.fh-wunsch-kreis svg { width: 30px; height: 30px; }
.fh-wunsch-stern.ist-skillpunkt .fh-wunsch-kreis { color: var(--fh-success); }
.fh-wunsch-stern.ist-pass_xp .fh-wunsch-kreis { color: var(--fh-cold); }
.fh-wunsch-stern.ist-titel .fh-wunsch-kreis { color: var(--fh-violett); }
.fh-wunsch-name { font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; }
.fh-wunsch-sub { font-size: 12px; color: var(--fh-muted-fg); text-align: center; }
.fh-wunsch.ist-waehlend .fh-wunsch-stern:not(.ist-gewaehlt),
.fh-wunsch.ist-erfuellt .fh-wunsch-stern:not(.ist-gewaehlt) { opacity: .2; pointer-events: none; }
.fh-wunsch-stern.ist-gewaehlt {
  border-color: var(--fh-gold-bright);
  box-shadow: 0 0 40px color-mix(in srgb, var(--fh-gold-bright) 55%, transparent), 0 0 90px color-mix(in srgb, var(--fh-success) 35%, transparent);
  transform: scale(1.08);
}
.fh-wunsch-status { margin: 0; min-height: 1.4em; font-weight: 600; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.fh-wunsch-status.ist-fehler { color: var(--fh-danger); }
.fh-wunsch-zu {
  pointer-events: auto;
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--fh-border);
  background: color-mix(in srgb, var(--fh-bg) 60%, transparent);
  color: inherit;
  cursor: pointer;
}
.fh-wunsch-zu svg { width: 20px; height: 20px; }
.fh-wunsch-zu:hover, .fh-wunsch-zu:focus-visible { border-color: var(--fh-violett); outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .fh-wunsch:not(.ist-ruhig) .fh-wunsch-stern {
    animation: fh-wunsch-herein .9s var(--fh-ease) calc(var(--i) * 140ms) both, fh-wunsch-schweben 4.2s ease-in-out calc(1s + var(--i) * 300ms) infinite;
  }
  .fh-wunsch:not(.ist-ruhig) .fh-wunsch-stern:hover,
  .fh-wunsch:not(.ist-ruhig) .fh-wunsch-stern.ist-gewaehlt { animation-play-state: paused; }
}
/* Nur der Anfang: mit "both" haelt ein "to" seine Werte fest und
   ueberdeckt danach Abblenden (.ist-waehlend) und Hover. */
@keyframes fh-wunsch-herein {
  from { opacity: 0; transform: translateY(40px) scale(.8); filter: blur(6px); }
}
@keyframes fh-wunsch-schweben {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@media (max-width: 560px) {
  .fh-wunsch-stern { width: calc(50% - 8px); }
}