/* =====================================================
   FIREHELMET - STYLE 8/8: ENTWURF-1C
   ---------------------------------------------------
   Alles aus dem 1c-Umbau: Icon-Leiste, Topbar, Kartensprache,
   Seitenkopf, Listenzeilen sowie die uebergreifenden Regeln
   (Koernung, Schnellsuche, Bewegung reduzieren).

   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.
===================================================== */

/* =====================================================
   NAVIGATION: EIGENE ICON-SPALTE
   ---------------------------------------------------
   Die Menuepunkte trugen ihr Emoji bisher im Uebersetzungstext
   selbst ("menu.home": "🏠 Home"). Weil i18n.js per textContent
   setzt, wurde damit bei den meisten Punkten der komplette
   Link-Inhalt zu EINEM Textknoten - bei den drei Punkten, die
   data-i18n stattdessen am inneren <span> hatten, blieb das
   Emoji dagegen ein eigener Knoten. Ergebnis: die Beschriftungen
   starteten je nach Variante an unterschiedlichen X-Positionen,
   und in der mobilen Bottom-Nav erschien das Emoji doppelt
   (einmal als .fh-bottom-nav-icon, einmal im Label).

   Jetzt liegt das Emoji einheitlich in <span class="fh-nav-icon">
   und die Uebersetzung nur noch im .fh-nav-label. Die feste
   Breite gibt allen Punkten dieselbe Icon-Spalte, unabhaengig
   davon wie breit die einzelne Emoji-Glyphe gerendert wird.
===================================================== */
.fh-nav-icon {
  /* 1.35em + der auf 10px reduzierte .fh-nav-item-Abstand halten den
     laengsten Punkt ("Repariere das Schiff") noch einzeilig - mit den
     urspruenglichen 1.55em/14px brach er auf zwei Zeilen um. */
  flex: 0 0 1.35em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
  /* Emoji nie kursiv/gesperrt mitziehen, wenn der Link im
     Hover/Active-Zustand letter-spacing veraendert. */
  letter-spacing: 0;
  font-style: normal;
}

.fh-nav-label {
  min-width: 0;
}

/* =====================================================
   ZAHLEN LAUFEN NICHT MEHR
   ---------------------------------------------------
   Tickende Werte (Countdowns, Dublonen, HP, Punkte) standen in
   proportionalen Ziffern - dadurch aendert sich bei jedem Tick
   die Textbreite und das Element zappelt. tabular-nums gibt
   allen Ziffern dieselbe Laufweite.
===================================================== */
.countdown,
.package-countdown,
.shop-rotation-countdown,
.streamraetsel-countdown,
.boss-reset-countdown,
.boss-hp-numeric,
.boss-hp-text,
.boss-hit-number,
.fh-boss-stat-value,
.fh-podium-score,
.fh-levelpath-node-number,
.piratenpass-node-number,
.shop-item-price,
.spielothek-bet-value,
.tournament-match-player-score,
.gateway-status-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* =====================================================
   TEXTUMBRUCH
   ---------------------------------------------------
   Ohne text-wrap landete regelmaessig ein einzelnes Wort allein
   in der letzten Zeile von Ueberschriften und Fliesstext.
   "balance" gleicht kurze Ueberschriften aus, "pretty" verhindert
   im Fliesstext nur die Schusterjungen - beide degradieren in
   aelteren Browsern still zu normalem Umbruch.
===================================================== */
h1, h2, h3,
.page-subtitle,
.fh-hero-kicker,
.fh-section-title {
  text-wrap: balance;
}

p,
.page-content li,
.fh-hero-sub {
  text-wrap: pretty;
}

/* =====================================================
   "ZUM INHALT SPRINGEN"
   ---------------------------------------------------
   Ohne diesen Link muessen Tastatur-Nutzer sich auf jeder Seite
   erst durch alle 19 Menuepunkte tabben. Sichtbar wird er nur
   bei Tastatur-Fokus.
===================================================== */
.fh-skip-link {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: var(--fh-z-skip-link);
  padding: 12px 20px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-gold);
  background: var(--fh-surface);
  color: var(--fh-gold-bright);
  font-family: var(--fh-font-display);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--fh-shadow-sm);
  transform: translateY(-160%);
  transition: transform .2s var(--fh-ease);
}

.fh-skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 3px;
}

/* =====================================================
   FH NOTICE (siehe scripts/core/notice.js)
   ---------------------------------------------------
   Allzweck-Kurzhinweis anstelle von window.alert().
   Position und Bewegung bewusst identisch zu .currency-toast,
   damit alle Kurzmeldungen der Seite von derselben Stelle
   kommen.
===================================================== */
.fh-notice {
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: var(--fh-z-toast);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(420px, calc(100vw - 60px));
  padding: 14px 16px 14px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(28,42,58,.96), rgba(10,10,20,.97));
  border: 1px solid var(--fh-border-strong);
  color: var(--fh-fg);
  font-family: var(--fh-font-sans);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: var(--fh-shadow);
  transform: translateX(120%);
  transition: transform .4s cubic-bezier(0.22, 0.9, 0.32, 1.2);
}

.fh-notice.visible { transform: translateX(0); }

.fh-notice-error {
  border-color: rgba(229,57,53,.6);
  box-shadow: var(--fh-shadow), 0 0 25px rgba(229,57,53,.2);
}

.fh-notice-success {
  border-color: rgba(85,200,120,.55);
  box-shadow: var(--fh-shadow), 0 0 25px rgba(85,200,120,.18);
}

.fh-notice-icon {
  flex: 0 0 auto;
  font-size: 17px;
  line-height: 1.4;
}

.fh-notice-text {
  flex: 1 1 auto;
  min-width: 0;
  text-wrap: pretty;
}

.fh-notice-close {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin: -3px -4px 0 0;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--fh-muted-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.fh-notice-close:hover {
  color: var(--fh-fg);
  background: rgba(255,255,255,.08);
}

.fh-notice-close:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .fh-notice {
    top: 16px;
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh-notice { transition: none; }
}

/* =====================================================
   FH SKELETON (siehe scripts/fx/skeleton.js)
   ---------------------------------------------------
   Platzhalter in der Form der spaeteren Liste. Der
   Schimmer laeuft ueber alle Zeilen, leicht versetzt
   (--fh-skeleton-delay), damit es nicht wie ein
   gleichfoermig blinkender Block wirkt.
===================================================== */
.fh-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
}

/* Nur fuer Screenreader - optisch sprechen die Balken fuer sich. */
.fh-skeleton-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fh-skeleton-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
  opacity: 0;
  animation: fhSkeletonIn .45s var(--fh-ease) forwards;
  animation-delay: var(--fh-skeleton-delay, 0s);
}

@keyframes fhSkeletonIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.fh-skeleton-cell {
  display: block;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--fh-muted) 0%,
    var(--fh-surface-light) 40%,
    var(--fh-muted) 80%
  );
  background-size: 240% 100%;
  animation: fhSkeletonShimmer 1.6s ease-in-out infinite;
  animation-delay: var(--fh-skeleton-delay, 0s);
}

@keyframes fhSkeletonShimmer {
  from { background-position: 140% 0; }
  to   { background-position: -60% 0; }
}

.fh-skeleton-rank   { width: 22px; }
.fh-skeleton-avatar { width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto; }
.fh-skeleton-name   { flex: 0 0 auto; }
.fh-skeleton-value  { width: 52px; margin-left: auto; }

@media (max-width: 640px) {
  .fh-skeleton-row { padding: 12px 14px; gap: 10px; }
  .fh-skeleton-value { width: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-skeleton-row  { opacity: 1; animation: none; }
  .fh-skeleton-cell { animation: none; background: var(--fh-muted); }
}

/* =====================================================
   KOERNUNG
   ---------------------------------------------------
   Die Seite besteht aus sehr grossen, sehr dunklen
   Flaechen mit weichen Farbverlaeufen. Auf guten Displays
   sieht man darin Streifenbildung (Banding), auf allen
   wirkt es flach und digital. Eine feine, unbewegte
   Koernung darueber bricht beides auf.

   Bewusst am <body>::after statt an jeder Sektion: ein
   einziger, fixierter Layer ohne Pointer-Events, der die
   bestehenden Hintergruende nicht anfasst. Der Wert ist
   absichtlich sehr niedrig (.028) - er soll spuerbar,
   aber nicht sichtbar sein.
===================================================== */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* Unter der gesamten Bedien-Ebene (Backdrop = 190), damit weder
     Menue noch Overlays davon ueberzogen werden. */
  z-index: 100;
  pointer-events: none;
  opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Buch-/Logbuchansicht hat ihre eigene, helle Pergament-Optik
   (Sepia, Georgia) - dort wuerde die Koernung wie Schmutz wirken. */
body:has(#book-reader.active-page)::after,
body:has(#story-detail.active-page)::after {
  opacity: 0;
}

/* =====================================================
   FH SCHNELLSUCHE (siehe scripts/nav/quick-search.js)
   ---------------------------------------------------
   Sucheingang ueber die 19 Menuepunkte. Liegt ueber den
   Kurzmeldungen, aber unter den Feier-Overlays - eine
   Level-Aufstiegs-Animation soll nicht von einem
   Suchfeld verdeckt werden.
===================================================== */
.fh-qs-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--fh-z-quicksearch);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(60px, 14vh, 160px) 20px 20px;
  background: rgba(3, 6, 11, .72);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .16s var(--fh-ease);
}

.fh-qs-overlay.is-open { opacity: 1; }

/* MUSS nach der Regel oben stehen: das hidden-Attribut setzt per
   Browser-Standard display:none, aber die Klassenregel mit
   display:flex ist spezifischer und gewinnt sonst. Ohne diese Zeile
   liegt das geschlossene Overlay unsichtbar ueber der Seite und
   schluckt JEDEN Klick. */
.fh-qs-overlay[hidden] { display: none; }

.fh-qs-panel {
  width: min(540px, 100%);
  max-height: min(560px, 72vh);
  display: flex;
  flex-direction: column;
  border-radius: var(--fh-radius);
  border: 1px solid var(--fh-border-strong);
  background: linear-gradient(180deg, var(--fh-surface-2), var(--fh-surface));
  box-shadow: var(--fh-shadow), 0 0 60px rgba(240, 201, 106, .08);
  overflow: hidden;
  transform: translateY(-12px) scale(.98);
  transition: transform .18s var(--fh-ease);
}

.fh-qs-overlay.is-open .fh-qs-panel { transform: none; }

.fh-qs-inputrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--fh-border);
}

.fh-qs-inputicon {
  font-size: 20px;
  line-height: 1;
  color: var(--fh-gold);
}

.fh-qs-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: none;
  color: var(--fh-fg);
  font-family: var(--fh-font-sans);
  font-size: 17px;
}

.fh-qs-input::placeholder { color: var(--fh-muted-fg); }
.fh-qs-input:focus { outline: none; }

.fh-qs-esc,
.fh-qs-foot kbd {
  padding: 3px 7px;
  border-radius: 6px;
  border: 1px solid var(--fh-border-strong);
  background: var(--fh-muted);
  color: var(--fh-muted-fg);
  font-family: var(--fh-font-sans);
  font-size: 11px;
  line-height: 1.4;
}

.fh-qs-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 8px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.fh-qs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--fh-radius-sm);
  cursor: pointer;
  color: var(--fh-fg);
  transition: background .14s, color .14s;
}

.fh-qs-item.is-active {
  background: rgba(240, 201, 106, .12);
  box-shadow: inset 0 0 0 1px rgba(240, 201, 106, .28);
}

.fh-qs-icon {
  flex: 0 0 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
}

.fh-qs-icon img {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  object-fit: cover;
}

.fh-qs-label {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--fh-font-display);
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fh-qs-group {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.fh-qs-ext {
  flex: 0 0 auto;
  color: var(--fh-muted-fg);
  font-size: 13px;
}

.fh-qs-empty {
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  color: var(--fh-muted-fg);
}

.fh-qs-foot {
  display: flex;
  gap: 18px;
  padding: 10px 18px;
  border-top: 1px solid var(--fh-border);
  color: var(--fh-muted-fg);
  font-size: 12px;
}

.fh-qs-foot span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ---- Einstieg in der Sidebar ----
   Die Tastenkombination allein waere auf Touch-Geraeten unerreichbar
   und auf dem Desktop unentdeckbar. */
.fh-qs-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--fh-border);
  background: var(--fh-muted);
  color: var(--fh-muted-fg);
  font-family: var(--fh-font-sans);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}

.fh-qs-trigger:hover {
  border-color: var(--fh-border-strong);
  color: var(--fh-fg);
  background: var(--fh-surface-2);
}

.fh-qs-trigger:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 2px;
}

.fh-qs-trigger-label { flex: 1 1 auto; }

.fh-qs-trigger kbd {
  flex: 0 0 auto;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--fh-border-strong);
  background: var(--fh-surface);
  font-family: var(--fh-font-sans);
  font-size: 11px;
}

/* Auf Touch-Geraeten gibt es keine Tastatur-Kombination zu zeigen. */
@media (hover: none), (max-width: 1023px) {
  .fh-qs-trigger kbd { display: none; }
}

@media (max-width: 640px) {
  .fh-qs-overlay { padding: 20px 14px; align-items: flex-start; }
  .fh-qs-panel { max-height: calc(100dvh - 40px); }
  .fh-qs-group { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-qs-overlay,
  .fh-qs-panel,
  .fh-qs-item,
  .fh-qs-trigger { transition: none; }
  .fh-qs-panel { transform: none; }
}

/* =====================================================
   NUR FUER SCREENREADER
   ---------------------------------------------------
   Vier Eingabefelder (Nickname, Code, Support-Text,
   Bewertungskommentar) hatten weder <label> noch
   aria-label - ein Screenreader las dort nur
   "Eingabefeld" vor. Die Beschriftungen sind jetzt da,
   bleiben optisch aber unsichtbar: das Layout hat an
   diesen Stellen bewusst keinen Platz dafuer, und die
   Platzhalter sagen sehenden Nutzern bereits, worum es
   geht.

   clip-path statt des alten clip: rect(...) - gleiches
   Ergebnis, ohne veraltete Eigenschaft.
===================================================== */
.fh-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   ZEICHENZAEHLER (siehe scripts/core/field-counter.js)
   ---------------------------------------------------
   Bleibt zurueckhaltend, solange noch Platz ist, und
   meldet sich erst ab 90 Prozent der erlaubten Laenge.
===================================================== */
.fh-field-counter {
  display: block;
  margin: 6px 2px 0;
  font-family: var(--fh-font-sans);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--fh-muted-fg);
  opacity: .65;
  transition: color .2s, opacity .2s;
}

.fh-field-counter.is-warn {
  color: var(--fh-gold-bright);
  opacity: 1;
}

.fh-field-counter.is-full {
  color: var(--fh-danger);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fh-field-counter { transition: none; }
}

/* <main> bekommt beim Seitenwechsel den Fokus (siehe
   moveFocusToPage in main.js). Ohne diese Regel zeichnet der
   Browser um den gesamten Inhaltsbereich einen Fokusrahmen -
   der Fokus dient hier nur als Einstiegspunkt, nicht als
   Bedienelement. Tastatur-Fokus auf echten Bedienelementen
   bleibt davon unberuehrt. */
#fh-main:focus {
  outline: none;
}

/* =====================================================
   SOCIALS-SEITE: RASTER UND FARBWELT
   ---------------------------------------------------
   Zwei Probleme, beide gemessen:

   1. Bei 1440px war der Container 1073px breit, vier Karten
      brauchten mit 250px Breite und 30px Abstand aber 1090px -
      17px zu viel. Instagram rutschte dadurch allein in eine
      zweite Reihe. Schmalere Karten und ein knapperer Abstand
      lassen alle vier nebeneinander; wird es enger, bricht es
      auf 2x2 um statt auf 3+1.

   2. Die beiden Aktionskarten (Hoerspiel, Schatzraub) waren im
      RUHEZUSTAND Spotify-gruen. Alle anderen Karten der Seite
      sind neutral und zeigen ihre Plattformfarbe erst beim
      Hover (siehe .social-youtube:hover usw.). Die zwei fielen
      dadurch aus der Seite heraus - und die Schatzraub-Karte
      trug Spotify-Gruen, obwohl sie gar nicht zu Spotify fuehrt.
      Jetzt folgen beide derselben Regel: neutral, Farbe beim
      Hover - Gruen fuers Hoerspiel, Gold fuer das Spiel.
===================================================== */
.social-container {
  gap: 24px;
}

/* Prozentuale Spalten statt fester Kartenbreite: der Inhaltsbereich
   ist je nach Breakpoint zwischen 576px und 1073px breit, und keine
   feste Breite ergibt ueber diese ganze Spanne verlaesslich zwei
   Karten pro Reihe - mal passten drei rein, mal nur eine. Mit
   calc(50% - Abstand) sind es IMMER genau zwei, unabhaengig davon,
   wie breit der Container gerade ist. */
.social-container a {
  width: auto;
  flex: 0 0 calc(50% - 12px);
  max-width: 340px;
}

/* Erst ab 1400px ist genug Platz fuer alle vier nebeneinander. */
@media (min-width: 1400px) {
  .social-container a {
    flex-basis: calc(25% - 18px);
    max-width: 260px;
  }
}

/* ---- Aktionskarten: Ruhezustand neutral wie die Plattformkarten ---- */
.fh-audiobook-card {
  background: linear-gradient(160deg, var(--fh-surface-light), var(--fh-surface));
  border-color: var(--fh-border);
}

.fh-audiobook-card:hover {
  border-color: rgba(30, 185, 84, .75);
  box-shadow: var(--fh-shadow), 0 0 40px rgba(30, 185, 84, .28);
}

.fh-audiobook-button {
  background: transparent;
  border: 1px solid rgba(30, 185, 84, .6);
  color: #4ade80;
}

.fh-audiobook-card:hover .fh-audiobook-button {
  background: #1eb954;
  border-color: #1eb954;
  color: #04170c;
}

/* ---- Die Spiel-Karte fuehrt nicht zu Spotify: Hausfarbe statt Gruen ---- */
.fh-audiobook-card-game:hover {
  border-color: rgba(240, 201, 106, .75);
  box-shadow: var(--fh-shadow), 0 0 40px rgba(240, 201, 106, .25);
}

.fh-audiobook-card-game .fh-audiobook-button {
  border-color: rgba(240, 201, 106, .6);
  color: var(--fh-gold-bright);
}

.fh-audiobook-card-game:hover .fh-audiobook-button {
  background: var(--fh-gold-bright);
  border-color: var(--fh-gold-bright);
  color: #221703;
}

/* Das Icon-Rund traegt ebenfalls Spotify-Gruen (radialer Verlauf +
   Rand). Fuer die Spiel-Karte ebenfalls auf die Hausfarbe. */
.fh-audiobook-card-game .fh-audiobook-icon {
  background: radial-gradient(circle at 35% 30%, rgba(240,201,106,.35), rgba(6,9,15,.9));
  border-color: rgba(240,201,106,.5);
}

/* Unter 640px eine Karte pro Reihe. */
@media (max-width: 640px) {
  .social-container a {
    flex-basis: 100%;
    max-width: 320px;
  }
}

/* =====================================================
   ENTWURF 1c - RAHMEN: ICON-LEISTE + TOPBAR
   ---------------------------------------------------
   Uebertraegt die Bildsprache aus dem Entwurf "1c" auf den festen
   Seitenrahmen. Zwei Dinge aendern sich:

   1. Die Desktop-Sidebar wird von 248px auf eine 76px schmale
      Icon-Leiste eingedampft. Die Beschriftungen bleiben im Markup
      stehen und werden nur optisch ausgeblendet - sie werden an
      zwei Stellen weiterverwendet:
        - scripts/nav/nav-sync.js klont die Punkte samt Label in
          die Schublade (dort weiterhin mit Text),
        - scripts/nav/quick-search.js liest die Labels als
          Suchbegriffe.
      Statt eines Labels erscheint beim Hover eine Sprechblase
      neben der Leiste (scripts/nav/rail-flyout.js).

   2. Alles, was vorher frei in der Ecke schwebte (Musik, Teilen)
      oder in der Sidebar sass (Suche, Sprache), sammelt sich in
      einer Topbar. Die Leiste selbst nimmt bewusst KEINE Klicks an
      (pointer-events: none) und verschiebt kein Layout - nur die
      Bedienelemente darin sind anklickbar. Der Seiteninhalt liegt
      also unveraendert an derselben Stelle wie vorher.

   Alle Regeln hier sind auf .fh-sidebar-nav bzw. .fh-topbar
   eingegrenzt; die Schublade (.sidebar a) und die mobile
   Tableiste bleiben unberuehrt.
===================================================== */

/* ---- Logo-Kachel ---- */
@media (min-width: 1024px) {
  .fh-sidebar-logo {
    justify-content: center;
    gap: 0;
    padding: 0 0 4px;
  }

  /* Der Schriftzug hat in 76px keinen Platz. Er bleibt im Markup
     (Seitentitel/Vorlesen), verschwindet aber optisch. */
  .fh-sidebar-brand {
    display: none;
  }

  .fh-sidebar-flame {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    font-size: 20px;
    box-shadow: 0 0 22px -6px rgba(255,106,42,.85);
  }
}

/* ---- Navigationsliste ---- */
@media (min-width: 1024px) {
  .fh-sidebar-nav {
    align-items: center;
    width: 100%;
    margin-top: 14px;
    gap: 6px;
    padding: 2px 0;
    /* Die 19 Punkte passen bei niedrigen Fenstern nicht am Stueck
       hinein. Die Leiste scrollt daher - ohne sichtbaren Balken,
       der auf 76px die halbe Breite fraesse. */
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    /* Statt des Balkens verlaufen die Punkte an beiden Enden ins
       Nichts. Das ist der einzige Hinweis darauf, dass es weiter
       geht - ohne ihn braeche die Liste einfach hart ab. */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .fh-sidebar-nav::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  .fh-sidebar-nav .fh-nav-item {
    flex: 0 0 auto;
    justify-content: center;
    gap: 0;
    width: 44px;
    height: 40px;
    padding: 0;
    border-radius: 10px;
    font-size: 20px;
    /* Sichtbar statt hidden: der goldene Aktiv-Balken sitzt links
       ausserhalb des Feldes und wurde vorher weggeschnitten. */
    overflow: visible;
  }

  .fh-sidebar-nav .fh-nav-icon {
    flex: 0 0 auto;
    font-size: 20px;
  }

  /* Beschriftung bleibt im Dokument (nav-sync/quick-search lesen
     sie), ist aber unsichtbar. Kein display:none - das haette sie
     auch fuer Screenreader entfernt. */
  .fh-sidebar-nav .fh-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Fluessigkeits-Effekt und Glanzstreifen waren auf einen breiten
     Balken zugeschnitten. Auf 44px Quadraten wirken sie unruhig -
     der Entwurf setzt hier auf eine schlichte Goldflaeche. */
  .fh-sidebar-nav .fh-nav-item::after {
    display: none;
  }

  .fh-sidebar-nav .fh-nav-item:not(.fh-nav-active)::before {
    display: none;
  }

  .fh-sidebar-nav .fh-nav-item:hover {
    transform: none;
    color: var(--fh-gold-bright);
    background: rgba(214,168,79,.12);
  }

  /* Beim Antabben derselbe Zustand wie beim Zeigen - dazu kommt der
     Rahmen, damit sichtbar ist, wo man gerade steht. Die Blase
     daneben nennt den Punkt beim Namen (rail-flyout.js). */
  .fh-sidebar-nav .fh-nav-item:focus-visible {
    color: var(--fh-gold-bright);
    background: rgba(214,168,79,.12);
    outline: 2px solid var(--fh-gold-bright);
    outline-offset: 2px;
  }

  .fh-sidebar-nav .fh-nav-item.fh-nav-active {
    color: var(--fh-gold-bright);
    background: rgba(214,168,79,.14);
    border: 0;
    /* Ohne den Puls aus der breiten Fassung: der Schein lag dort um
       einen langen Balken, um ein kleines Quadrat flackert er. */
    animation: fhNavItemIn .5s cubic-bezier(0.22, 0.9, 0.32, 1.2) backwards;
  }

  /* Goldener Streifen an der linken Kante der Leiste.
     -16px = (76px Leiste - 44px Feld) / 2, also buendig mit dem Rand. */
  .fh-sidebar-nav .fh-nav-item.fh-nav-active::before {
    left: -16px;
  }

  /* Gruppenueberschriften werden zu Trennstrichen. Der Text bleibt
     im Markup, damit nav-sync ihn mit in die Schublade nimmt, wo er
     weiterhin als Ueberschrift erscheint. */
  .fh-sidebar-nav .fh-nav-section-label {
    flex: 0 0 auto;
    width: 34px;
    height: 1px;
    margin: 10px 0 8px;
    padding: 0;
    font-size: 0;
    overflow: hidden;
    opacity: 1;
    background: linear-gradient(90deg, transparent, var(--fh-border-strong), transparent);
  }

  .fh-sidebar-nav .fh-nav-section-label:first-of-type {
    margin-top: 4px;
  }
}

/* ---- Fuss der Leiste: Spielerbild + Gateway ---- */
@media (min-width: 1024px) {
  .fh-sidebar-footer-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 0 0;
  }

  .fh-sidebar-footer {
    min-height: 0;
  }

  /* Die Spielerkarte schrumpft auf ihr Bild zusammen. Der Knopf
     bleibt derselbe und oeffnet weiterhin den Levelpfad. */
  .fh-sidebar-footer .fh-player-card {
    width: auto;
    padding: 0;
    border: 0;
    background: none;
    gap: 0;
  }

  .fh-sidebar-footer .fh-player-card-info {
    display: none;
  }

  .fh-sidebar-footer .fh-player-card-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid var(--fh-border-strong);
    font-size: 16px;
    transition: border-color .2s;
  }

  .fh-sidebar-footer .fh-player-card:hover .fh-player-card-avatar,
  .fh-sidebar-footer .fh-player-card:focus-visible .fh-player-card-avatar {
    border-color: rgba(240,201,106,.6);
  }

  /* Solange niemand angemeldet ist, steht dort statt der Karte eine
     Statuszeile. In 76px bleibt davon der Punkt uebrig. */
  .fh-sidebar-footer .fh-sidebar-footer-status {
    justify-content: center;
    padding: 8px;
    font-size: 0;
    border: 0;
    background: none;
  }
}

/* =====================================================
   SPRECHBLASE NEBEN DER ICON-LEISTE
   ---------------------------------------------------
   Bewusst ein einzelnes Element am <body> statt eines ::after am
   Menuepunkt: die Navigationsliste scrollt, und ein Kind eines
   scrollenden Bereichs wird an dessen Rand abgeschnitten. Die
   Position setzt scripts/nav/rail-flyout.js.
===================================================== */
.fh-rail-flyout {
  position: fixed;
  left: 0;
  top: 0;
  z-index: var(--fh-z-sidebar);
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--fh-border-strong);
  background: rgba(13, 21, 32, .96);
  box-shadow: var(--fh-shadow-sm);
  font-family: var(--fh-font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fh-fg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s var(--fh-ease), visibility .16s;
}

.fh-rail-flyout.is-visible {
  opacity: 1;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .fh-rail-flyout { transition: none; }
}

/* =====================================================
   TOPBAR
===================================================== */
.fh-topbar {
  display: none;
}

@media (min-width: 1024px) {
  .fh-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: fixed;
    top: 0;
    left: var(--fh-rail-w);
    right: 0;
    height: var(--fh-topbar-h);
    padding: 0 22px;
    z-index: var(--fh-z-sidebar);
    /* Weicher Schleier statt harter Leiste: der Seiteninhalt liegt
       unveraendert an seiner Stelle und wird nicht abgeschnitten. */
    background: linear-gradient(180deg, rgba(5,7,11,.78), rgba(5,7,11,0));
    /* Die Flaeche selbst faengt keine Klicks ab - sonst waere der
       obere Rand jeder Seite tot. Nur die Bedienelemente sind aktiv. */
    pointer-events: none;
  }

  .fh-topbar > * {
    pointer-events: auto;
  }
}

.fh-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Der Sucheinstieg sass vorher in der Sidebar und war dort so breit
   wie diese. In der Topbar bekommt er eine feste, ruhige Breite. */
@media (min-width: 1024px) {
  .fh-topbar .fh-qs-trigger {
    width: auto;
    min-width: 240px;
    margin: 0;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(13, 21, 32, .8);
  }

  .fh-topbar .fh-qs-trigger .ph {
    font-size: 16px;
  }
}

/* Dublonenstand - dieselbe Zahl wie im Shop, gespeist von
   refreshShopCurrencyDisplay() in scripts/shop/shop.js. */
.fh-topbar-coins {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(214,168,79,.35);
  background: rgba(214,168,79,.08);
  color: var(--fh-gold-bright);
  font-family: var(--fh-font-display);
  font-size: 14px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.fh-topbar-coins[hidden] {
  display: none;
}

.fh-topbar-coins .ph {
  font-size: 16px;
}

/* Sprachknopf: in der Topbar ohne Schieberegler-Knubbel, nur die
   Kurzform der aktiven Sprache. Der Umschalter selbst
   (toggleLanguage) bleibt derselbe. */
@media (min-width: 1024px) {
  .fh-topbar-lang {
    position: static;
    display: inline-flex;
    margin: 0;
    overflow: visible;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 46px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--fh-border);
    background: rgba(13, 21, 32, .8);
    color: var(--fh-muted-fg);
    font-family: var(--fh-font-display);
    font-size: 12px;
    letter-spacing: .12em;
    cursor: pointer;
    transition: color .2s, border-color .2s, background .2s;
  }

  .fh-topbar-lang:hover {
    color: var(--fh-gold-bright);
    border-color: rgba(214,168,79,.35);
  }

  .fh-topbar-lang .lang-switch-label {
    position: static;
    flex: none;
    color: inherit;
    font: inherit;
  }

  /* Gezeigt wird nur die gerade aktive Sprache. Den Zustand traegt
     applyTranslations() als .is-en an JEDEN .lang-switch - dieselbe
     Quelle, die auch den Schieberegler in der Schublade stellt. */
  .fh-topbar-lang .lang-switch-label-en,
  .fh-topbar-lang.is-en .lang-switch-label-de {
    display: none;
  }

  .fh-topbar-lang.is-en .lang-switch-label-en {
    display: inline;
    color: inherit;
  }
}

.fh-topbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--fh-border);
  background: rgba(13, 21, 32, .8);
  color: var(--fh-muted-fg);
  font-size: 18px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.fh-topbar-btn:hover {
  color: var(--fh-gold-bright);
  border-color: rgba(214,168,79,.35);
  background: rgba(214,168,79,.08);
}

.fh-topbar-btn:focus-visible {
  outline: 2px solid var(--fh-gold-bright);
  outline-offset: 2px;
}

/* Wie der alte Schalter erst auf der Startseite eingeblendet
   (updateMusicForPage in scripts/music/music-player.js) - auf den
   uebrigen Seiten laeuft keine Musik, die man stummschalten koennte. */
.fh-topbar-music {
  display: none;
}

/* Der alte frei schwebende Musikknopf oben rechts wird von der
   Topbar-Fassung abgeloest - aber nur dort, wo es die Topbar gibt.
   Unter 1024px bleibt er unveraendert die einzige Bedienung. */
@media (min-width: 1024px) {
  .music-toggle {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fh-topbar-btn,
  .fh-topbar-lang,
  .fh-sidebar-footer .fh-player-card-avatar {
    transition: none;
  }
}

/* =====================================================
   ENTWURF 1c - KARTEN-BILDSPRACHE
   ---------------------------------------------------
   Die Bausteine, aus denen der Entwurf seine Karten setzt.
   Bewusst als eigenstaendige, wiederverwendbare Klassen und NICHT
   in .fh-dash eingebettet: die naechsten Runden bauen Stories,
   Characters und Wochenrennen aus denselben Teilen. Bestehende
   Karten der Seite (.shop-item, .character-card
   usw.) bleiben unberuehrt - sie werden nicht umbenannt.
===================================================== */
.fh-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 14px;
  border: 1px solid var(--fh-border);
  background: linear-gradient(160deg, var(--fh-surface-light), #0b111a);
}

.fh-card[hidden] {
  display: none;
}

/* Hervorgehobene Karte (im Entwurf das Schatzrad): goldener Rand,
   waermerer Verlauf. */
.fh-card-gold {
  border-color: rgba(214,168,79,.32);
  background: linear-gradient(160deg, rgba(32,26,14,.9), #0b111a);
}

.fh-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fh-card-kicker {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

.fh-card-icon {
  font-size: 20px;
  line-height: 1;
}

.fh-card-title {
  margin: 0;
  font-family: var(--fh-font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--fh-fg);
}

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

.fh-card-note-sm {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Drueckt alles Folgende (in der Regel die Schaltflaeche) an den
   unteren Rand, damit in einer Reihe alle Knoepfe auf einer Linie
   sitzen - auch wenn die Karten unterschiedlich viel Text haben. */
.fh-card-spacer {
  flex: 1;
  min-height: 4px;
}

.fh-card-figure {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.fh-card-figure-value {
  font-family: var(--fh-font-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
}

/* ---- Fortschrittsbalken ---- */
.fh-bar {
  height: 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}

.fh-bar-fill {
  height: 100%;
  border-radius: inherit;
  transition: width .5s var(--fh-ease);
}

/* ---- Schaltflaeche im Kartenstil ---- */
.fh-cta {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 9px;
  border: 1px solid rgba(214,168,79,.55);
  background: none;
  color: var(--fh-gold-bright);
  font-family: var(--fh-font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}

.fh-cta:hover {
  background: rgba(214,168,79,.12);
  border-color: var(--fh-gold-bright);
}

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

.fh-cta .ph {
  font-size: 16px;
}

/* ---- Coverbild (Weiterlesen-Karte) ---- */
.fh-card-cover {
  flex: 0 0 auto;
  width: 108px;
  height: 148px;
  border-radius: 10px;
  border: 1px solid var(--fh-border-strong);
  object-fit: cover;
}

/* ---- Rangliste in Kartenform ---- */
.fh-card-ranks {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fh-card-rank {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fh-card-rank-nr {
  width: 18px;
  font-family: var(--fh-font-display);
  font-size: 15px;
  color: var(--fh-muted-fg);
}

.fh-card-rank-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--fh-border-strong);
  overflow: hidden;
  font-size: 14px;
}

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

.fh-card-rank-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--fh-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fh-card-rank-score {
  font-size: 13px;
  color: var(--fh-muted-fg);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .fh-bar-fill,
  .fh-cta { transition: none; }
}

/* =====================================================
   ENTWURF 1c - STARTSEITEN-UEBERSICHT
   ---------------------------------------------------
   Liegt UNTER der Cinematic-Sequenz und dem Countdown, nicht
   an deren Stelle: die Scroll-Reise ist der Auftakt der Seite
   und bleibt vollstaendig erhalten. Die Uebersicht ist das,
   was der Entwurf unter seinem Kopfbild zeigt - der eigene
   Stand auf einen Blick.
===================================================== */
.fh-dash {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 40px 34px 64px;
}

.fh-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Die Weiterlesen-Karte nimmt zwei Spalten und stellt Cover und
   Text nebeneinander. */
.fh-card-wide {
  grid-column: span 2;
  flex-direction: row;
  gap: 16px;
}

.fh-card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Unter 1024px sind zwei Spalten die ruhigere Aufteilung - drei
   Karten nebeneinander werden dort zu schmal fuer die
   Ueberschriften. */
@media (max-width: 1023px) {
  .fh-dash {
    padding: 32px 22px 56px;
  }

  .fh-dash-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .fh-dash {
    padding: 26px 16px 48px;
  }

  .fh-dash-grid {
    grid-template-columns: 1fr;
  }

  .fh-card-wide {
    grid-column: auto;
  }

  /* Auf dem Handy steht das Cover ueber dem Text - nebeneinander
     blieben von der Ueberschrift zwei Woerter pro Zeile. */
  .fh-card-cover {
    width: 84px;
    height: 116px;
  }
}

/* =====================================================
   ENTWURF 1c - HERO-VORZEILE
   ---------------------------------------------------
   Die goldene Kleinschrift ueber dem Countdown-Titel. Sie
   ordnet den Countdown ein ("Logbuch der Crew"), bevor die
   grosse Zeile kommt - genau wie im Entwurf.
===================================================== */
.fh-hero-kicker {
  margin: 0 0 14px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--fh-gold-bright);
}

/* ---- Countdown im Entwurfs-Stil: gerahmte Ziffernkaesten ---- */
.hero .countdown .time-box {
  border: 1px solid var(--fh-border-strong);
  border-radius: 8px;
  background: rgba(17, 26, 38, .8);
}

.hero .countdown .time-box small {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

/* =====================================================
   ENTWURF 1c - SEITENKOPF UND LISTENZEILEN
   ---------------------------------------------------
   Zwei weitere Bausteine, die im Entwurf auf JEDER Unterseite
   gleich aussehen und deshalb - wie schon .fh-card - als eigene
   Klassen und nicht pro Seite existieren:

   1. Der Seitenkopf: goldene Vorzeile, grosse Oswald-Zeile,
      Fliesstext daneben. Linksbuendig; die Seiten waren bisher
      mittig gesetzt, was bei langen Listen darunter jede Zeile
      neu ausrichten liess.

   2. Die Listenzeile: eine kompakte, gerahmte Reihe fuer
      Aufzaehlungen (Kapitel, Rennplatzierungen). Ersetzt Karten,
      die fuer eine Zeile Text 150px hoch waren.
===================================================== */
.fh-page-head {
  text-align: left;
  margin-bottom: 30px;
}

.fh-page-kicker {
  margin: 0 0 10px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--fh-gold-bright);
}

/* h1 mit im Selektor: .page-content h1 (weiter oben in dieser
   Datei) setzt fuer 14 Seiten eine eigene, deutlich groessere
   Schriftgroesse mit weiter Sperrung. Ohne das zusaetzliche h1
   waere jene Regel gewichtiger und der Seitentitel bekaeme auf
   genau diesen Seiten nicht die Masse des Entwurfs. */
h1.fh-page-title,
.fh-page-title {
  margin: 0;
  font-family: var(--fh-font-display);
  /* Der Entwurf setzt 56px. Nach unten mitwachsend, damit lange
     Titel auf dem Handy nicht ueber den Rand laufen. */
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--fh-fg);
  text-shadow: 0 0 50px rgba(240,201,106,.3);
}

.fh-page-lead {
  margin: 14px 0 0;
  max-width: 54ch;
  font-size: 16px;
  line-height: 1.55;
  color: #a6b6c9;
  text-wrap: pretty;
}

/* Zwischenueberschrift innerhalb einer Seite ("Kapitel",
   "Top 8 dieser Woche"). */
.fh-section-label {
  margin: 28px 0 12px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--fh-muted-fg);
}

/* ---- Listenzeile ---- */
.fh-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fh-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 18px;
  border-radius: 11px;
  border: 1px solid var(--fh-border);
  background: rgba(17, 26, 38, .6);
  text-align: left;
  transition: border-color .2s, background .2s;
}

.fh-row-clickable {
  cursor: pointer;
}

.fh-row-clickable:hover {
  border-color: rgba(214,168,79,.5);
  background: rgba(20, 32, 47, .8);
}

.fh-row-nr {
  flex: 0 0 auto;
  min-width: 18px;
  font-family: var(--fh-font-display);
  font-size: 15px;
  color: var(--fh-muted-fg);
  font-variant-numeric: tabular-nums;
}

.fh-row-main {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: var(--fh-fg);
}

/* Zustand am rechten Rand ("Gelesen", "Gesperrt", Punktzahl). */
.fh-row-state {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fh-font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fh-gold-bright);
}

.fh-row-state-muted {
  color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
  .fh-row { transition: none; }
}

@media (max-width: 640px) {
  .fh-row {
    gap: 10px;
    padding: 11px 14px;
  }

  .fh-row-main {
    font-size: 14px;
  }
}

/* =====================================================
   ENTWURF 1c - CHARACTERS
   ---------------------------------------------------
   Der Entwurf (2b) zeigt hier schlichte Karten mit einem
   Monogramm statt eines Bildes - er hatte die echten Portraets
   nicht vorliegen. Die 3D-Flip-Karten der Seite (Bild vorne,
   Rolle/Zitat/Beschreibung hinten, eigenes Farb-Thema und
   Emblem je Figur) bleiben deshalb vollstaendig erhalten; sie
   sind das Stueck Seite, das der Entwurf nicht besser konnte.

   Uebernommen wird die Kopfsprache und das Raster: die Karten
   lagen in einer zentrierten flex-Reihe, wodurch die letzte
   Zeile mittig unter den anderen haengenblieb. Ein Raster stellt
   sie in Spalten.
===================================================== */
#characters .page-content {
  width: 92%;
  max-width: 1180px;
  margin: auto;
  text-align: left;
}

/* Drei Spalten wie im Entwurf. Bewusst eine feste Leiter statt
   auto-fill: auto-fill ergab bei sechs Figuren fuenf Spalten und
   damit eine Reihe aus fuenf Karten und eine einzelne darunter. */
#characters .character-container {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-items: center;
  gap: 24px;
}

@media (max-width: 900px) {
  #characters .character-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #characters .character-container {
    grid-template-columns: 1fr;
  }
}

/* Im Raster gibt die Spalte die Breite vor - die feste Kartenbreite
   wuerde sonst mit ihr konkurrieren und Luecken lassen. */
#characters .character-card-v2 {
  width: 100%;
  max-width: 300px;
  /* Seitenverhaeltnis der bisherigen Eckwerte (260x370) beibehalten,
     damit die Portraets nicht anders beschnitten werden. */
  height: auto;
  aspect-ratio: 26 / 37;
}

/* =====================================================
   ENTWURF 1c - WOCHENRENNEN
   ---------------------------------------------------
   Die Seite stand komplett mittig untereinander: Titel,
   Unterzeile, drei Statuszeilen, Knopf, Streckenname, Strecke,
   Podest, Liste. Der Entwurf (2c) stellt links die Einordnung
   und rechts die Handlung - der Rest bleibt darunter in der
   Reihenfolge, die er hatte.

   Alle IDs sind unveraendert; race.js schreibt weiter in
   dieselben Elemente.
===================================================== */
.race-fullpage {
  text-align: left;
  max-width: 1180px;
  padding: 30px 20px 40px;
}

.race-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.race-head-text {
  margin-bottom: 0;
  min-width: 0;
}

.race-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Der Streckenname ist jetzt die Vorzeile ueber dem Titel. Die
   frueheren 20px Fettschrift mit Leuchten sind entfallen - als
   Vorzeile traegt er die Kopfsprache der uebrigen Seiten. */
.race-track-theme {
  min-height: 1.2em;
}

/* Verbleibende Zeit bis zum Wochenwechsel - im Entwurf eine
   ruhige Pille neben dem Knopf, nicht mehr eine eigene Zeile. */
.race-pill {
  margin: 0;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid var(--fh-border);
  background: rgba(17, 26, 38, .75);
  font-size: 13px;
  color: var(--fh-fg);
  font-variant-numeric: tabular-nums;
}

/* Die drei Statuszeilen (eigener Stand, Tagesbonus, Sieger der
   Vorwoche) standen gross und mittig zwischen Titel und Strecke.
   Sie bleiben vollstaendig erhalten, aber als ruhige Zeile. */
.race-status-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 22px 0 18px;
}

.race-status-line .wheel-status {
  margin: 0;
  font-size: 13px;
  text-align: left;
}

.race-status-line .wheel-status:empty {
  display: none;
}

/* Abgeholt oder ohne Namen: der Knopf bleibt sichtbar, gibt aber
   deutlich zu erkennen, dass gerade nichts zu holen ist. */
.fh-cta:disabled {
  opacity: .45;
  cursor: not-allowed;
  border-color: var(--fh-border-strong);
  color: var(--fh-muted-fg);
}

.fh-cta:disabled:hover {
  background: none;
  border-color: var(--fh-border-strong);
}

/* ---- Ergebnisliste ---- */
.race-results-list {
  margin-top: 0;
  gap: 8px;
}

.race-result-row {
  gap: 12px;
}

.race-result-rank {
  min-width: 22px;
  font-weight: 500;
}

.race-result-name {
  font-weight: 500;
  color: var(--fh-fg);
}

.race-result-points {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: right;
  font-size: 13px;
  color: var(--fh-muted-fg);
  font-variant-numeric: tabular-nums;
}

/* Kurzer Balken je Zeile - zeigt denselben Stand zur Ziellinie,
   den auch die Kart-Position auf der Strecke darueber zeigt. */
.race-result-bar {
  flex: 0 0 auto;
  width: 92px;
  height: 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.07);
  overflow: hidden;
}

.race-result-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .5s var(--fh-ease);
}

@media (max-width: 700px) {
  /* Auf dem Handy hat die Zeile nur Platz fuer Platz, Name und
     Punkte - der Balken waere dort kaum noch ablesbar. */
  .race-result-bar {
    display: none;
  }

  .race-head-actions {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .race-result-bar-fill { transition: none; }
}

/* Strecke und Platzierungen nebeneinander (Entwurf 2c). Unter
   1024px untereinander wie bisher - zwei Spalten waeren dort
   beide zu schmal. */
.race-main {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

/* Die Strecke bekommt deutlich mehr Platz als die Liste daneben.
   Mit 1,35 zu 1 lag sie bei rund 57 Prozent der Breite - sie ist aber
   das, wofuer man die Seite oeffnet, und seit der Schraegsicht steckt
   dort auch mehr drin (Himmel, Horizont, Landschaft). Die Liste
   braucht nur so viel Platz, dass Name und Punktzahl nebeneinander
   passen.

   Ab 1400px wird sie noch etwas breiter: dort ist Platz genug, dass
   die Liste trotzdem nicht gedraengt wirkt. */
@media (min-width: 1024px) {
  .race-main {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  }
}

@media (min-width: 1400px) {
  .race-main {
    grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  }
}

/* Die linke Spalte: Bahn und darunter die Fahrzeugwahl. min-width: 0
   ist noetig, damit das breite SVG die Spalte nicht aufblaeht - ohne
   das waere die Mindestbreite eines Rasterkindes seine
   Inhaltsbreite. */
.race-bahn-spalte {
  min-width: 0;
}

.race-side {
  min-width: 0;
}

.race-side .fh-section-label {
  margin-top: 0;
}

/* Der Rahmen der Strecke uebernimmt die Kartenmasse der uebrigen
   Seite (14px statt 24px, ein Pixel Rand statt zwei). */
.race-track-wrap {
  margin-top: 0;
  border-radius: 14px;
  border: 1px solid var(--fh-border);
}

/* =====================================================
   PLATZ FUER DIE TOPBAR
   ---------------------------------------------------
   Die Topbar (Runde 1) schwebt ueber dem Inhalt und faengt selbst
   keine Klicks ab. Auf Seiten, deren Inhalt hoeher ist als der
   Bildschirm, lag der obere Rand aber unter ihr - auf der
   Characters-Seite war die Vorzeile "AN BORD" halb vom
   Suchfeld verdeckt.

   Die Seite bekommt deshalb oben die Hoehe der Topbar als
   Innenabstand. Durch box-sizing: border-box schrumpft der
   Inhaltsbereich entsprechend, die vorhandene Zentrierung bleibt
   unveraendert - der Inhalt kann nur nicht mehr unter die Leiste
   rutschen.
===================================================== */
@media (min-width: 1024px) {
  .page {
    padding-top: var(--fh-topbar-h);
  }
}

/* =====================================================
   ENTWURF 1c - RUNDE 4: AUSRICHTUNG DER UNTERSEITEN
   ---------------------------------------------------
   Die gemeinsame Spalte (.page-content) ist jetzt linksbuendig.
   Ein paar Bloecke hingen noch an margin-inline: auto und
   standen dadurch mittig unter einem linksbuendigen Kopf - hier
   werden genau diese an dieselbe Kante geholt.

   BEWUSST NICHT angefasst: das Schatzrad (.wheel-wrapper) und
   seine Ergebniszeile, die Boss-Buehne und die Sternebewertung.
   Das sind in sich runde bzw. symmetrische Bauteile, bei denen
   mittig die richtige Ausrichtung ist - der Entwurf zeigt an
   diesen Stellen ebenfalls zentrierte Bedienteile.
===================================================== */
.leaderboard-list,
.shop-earn-hint,
.fh-audiobook-card,
.boss-flavor,
/* Das Boss-Feld bleibt mittig. Es kam aus einem Durchgang, der
   alle Bloecke linksbuendig gesetzt hat - richtig fuer Inhalts-
   listen, falsch hier: das Feld ist ein Bedienteil unter einer
   mittigen Buehne, und linksbuendig stand es sichtbar schief
   darunter. auto statt 0, damit die Regel aus 50-redesign.css
   (margin: 26px auto 0) wieder greift. */
.fh-boss-panel {
  margin-inline: auto;
}

/* Innerhalb des Feldes gilt dasselbe: Angriffsknopf, Statuszeile
   und Zahlenreihe gehoeren unter die mittige Lebensleiste, nicht
   an den linken Rand. Bewusst nur hier und nicht allgemein - der
   Rest der Seite bleibt linksbuendig, so wie er gedacht war. */
.fh-boss-panel .boss-attack-btn { display: block; margin-inline: auto; }
.fh-boss-panel #boss-status { text-align: center; }
.fh-boss-panel .fh-boss-stats-row { justify-content: center; }

/* Reihen, die ihre Elemente in der Mitte sammelten, beginnen
   jetzt links - sie sind Inhaltslisten, keine Bedienteile. */
.twitch-login-area {
  justify-content: flex-start;
}

/* =====================================================
   BEWEGUNG REDUZIEREN - ABSCHLIESSENDE REGEL
   ---------------------------------------------------
   Die Seite hat 163 Keyframe-Bloecke, aber nur ein Teil davon war
   bisher an prefers-reduced-motion angebunden. Gemessen liefen mit
   der Systemeinstellung "Bewegung reduzieren" noch 23 verschiedene
   Animationen weiter - darunter Dauerschleifen wie die blinkenden
   Lampen am Schatzrad, der kreisende Muenzregen im Shop, das
   pulsierende Charakter-Emblem und der sich drehende Boss.
   Genau diese Endlosbewegungen sind es, die Menschen mit
   Bewegungsempfindlichkeit Beschwerden machen.

   Statt 23 Einzelregeln steht hier eine abschliessende: jede
   Animation und jeder Uebergang laeuft praktisch sofort ab.

   WARUM NICHT "animation: none": eine Animation, die gar nicht
   erst startet, wird auch nicht fertig - Elemente, die ihren
   sichtbaren Zustand erst im 100%-Bild bekommen, blieben dann
   unsichtbar, und ein animationend-Ereignis (scripts/core/main.js)
   kaeme nie an. Mit .01ms laeuft sie durch und endet sofort im
   Endzustand: alles ist da, nur ohne Bewegung.

   Die bestehenden, gezielteren Bloecke weiter oben bleiben stehen -
   sie schalten teils zusaetzlich Transformationen ab und
   widersprechen dieser Regel nicht.

   Nicht abgedeckt: von GSAP gesteuerte Bewegungen. Die pruefen die
   Einstellung in ihrem eigenen Code (siehe path-draw.js,
   der Startseite); die Schatzrad-Drehung laeuft bewusst weiter, weil
   man sonst nicht sehen wuerde, wo das Rad stehenbleibt.
===================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* Platzhalter fuer Bereiche, die keine Liste sind (Turniertafel,
   Ergebnisfeld der Verlosung). Dieselben Balken wie oben, nur
   untereinander in einem Kasten statt in Zeilen.
   Siehe fhSkeletonKasten() in scripts/fx/skeleton.js. */
.fh-skeleton-kasten {
  gap: 12px;
  padding: 20px 18px;
  border-radius: var(--fh-radius-sm);
  border: 1px solid var(--fh-border);
  background: var(--fh-surface);
}