/*!
 * GENX UI — Kopfzeile, Navigation, Formulare
 * Teil der Website https://www.genxpodcast.de
 *
 * Copyright (c) 2026 Markus Lach. Alle Rechte vorbehalten.
 *
 * Dieser Quelltext ist urheberrechtlich geschuetzt. Vervielfaeltigung,
 * Verbreitung, Bearbeitung oder oeffentliche Zugaenglichmachung — ganz
 * oder in Teilen — nur mit ausdruecklicher schriftlicher Zustimmung des
 * Urhebers. Das Auslesen im Browser ist technisch bedingt und stellt
 * keine Freigabe zur Weiterverwendung dar.
 */
/* ============================================================
   GenX UI — Kopfzeile, Navigation, REC-LED, Kontaktformular
   Ergaenzt custom.css. Eigene, explizite Farben (unabhaengig
   von den .genx-page-Variablen, da Topbar/Nav ausserhalb liegen).
   ============================================================ */

/* ---------- Sticky Kopfzeile ---------- */
.genx-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px clamp(14px, 4vw, 40px);
  background: rgba(23, 16, 31, .85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 2px solid #0c0330;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
}

.genx-topbar-logo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  font-family: 'Luckiest Guy', 'Arial Black', sans-serif;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
.genx-topbar-logo .tb-word { font-size: clamp(15px, 2.1vw, 20px); color: #ffd23f; -webkit-text-stroke: 1px #17101f; }
.genx-topbar-logo .tb-x {
  font-size: clamp(20px, 2.9vw, 27px);
  color: #ff2975;
  -webkit-text-stroke: 1.5px #17101f;
  display: inline-block;
  transform: rotate(-6deg);
  margin: 0 1px;
}
.genx-topbar-logo .tb-pod { font-size: clamp(15px, 2.1vw, 20px); color: #29c5f6; -webkit-text-stroke: 1px #17101f; }
.genx-topbar-logo img { display: block; height: clamp(26px, 4.5vw, 34px); width: auto; }

/* ---------- "Erinnerst du dich?" in der Kopfzeile (nur breite Screens) ----------
   Standard: aus — auf schmalen Screens zeigt ihn der Hero ueber dem Logo.
   Ab 960px: mittig in die Kopfzeile, absolut positioniert (aendert das
   Flex-Layout aus Logo|Steuerung nicht) und klick-durchlaessig. */
.genx-topbar-eyebrow { display: none; }
@media (min-width: 960px) {
  .genx-topbar-eyebrow {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    margin: 0;
    padding: 0;
    pointer-events: none;
    white-space: nowrap;
    font-family: 'Mr Dafoe', cursive;
    font-size: clamp(23px, 2.3vw, 31px);
    line-height: 1;
    color: #8dffab;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6), 0 0 12px rgba(0, 255, 65, .4);
  }
}

/* ---------- Logo-Bild im Hero ---------- */
.genx-hero-logo { margin: 0 auto 20px; text-align: center; line-height: 0; }
.genx-hero-logo img { width: min(620px, 88vw); height: auto; display: inline-block; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.45)); }

/* ---------- "Das sind wir": Blocksatz + zentrierter Spruch ---------- */
.genx-page .genx-wir-text p { text-align: justify; }
.genx-page .genx-wir-text p.genx-wir-script { text-align: center; line-height: 1.15; }

/* ---------- Sprachumschalter (Polylang) ---------- */
.genx-topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.genx-langs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 3px;
  background: rgba(12, 3, 48, .55);
  border: 1px solid #3a3048;
  border-radius: 999px;
}
.genx-langs li {
  list-style: none;
  margin: 0;
  display: block;
}
.genx-langs a {
  display: block;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  color: #9a90b6;
  transition: color .15s ease, background .15s ease;
}
.genx-langs a:hover { color: #ffd23f; }
.genx-langs .current-lang a {
  color: #17101f;
  background: linear-gradient(180deg, #7fe3ff, #29c5f6);
}

/* ---------- Hamburger (3 Striche) ---------- */
.genx-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 10px;
  cursor: pointer;
  background: #241c30;
  border: 2px solid #0c0330;
  border-radius: 9px;
  box-shadow: 2px 2px 0 rgba(10, 5, 18, .5);
}
.genx-burger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #ffd23f;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.genx-burger:hover span { background: #29c5f6; }
.genx-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.genx-burger.open span:nth-child(2) { opacity: 0; }
.genx-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Vollbild-Navigation ---------- */
.genx-nav {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 90px 20px 40px;
  background: rgba(12, 3, 48, .97);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.genx-nav.open { opacity: 1; visibility: visible; transform: none; }
.genx-nav a {
  font-family: 'Luckiest Guy', 'Arial Black', sans-serif;
  font-size: clamp(24px, 5vw, 40px);
  color: #f4ead8;
  text-decoration: none;
  -webkit-text-stroke: 1px #17101f;
  padding: 4px 14px;
  transition: color .18s ease, transform .18s ease;
}
.genx-nav a:hover { color: #ffd23f; transform: scale(1.05) rotate(-1.5deg); }
body.genx-nav-open { overflow: hidden; }

/* ---------- REC-LED (links ueber der Kassette) ---------- */
.genx-hero { position: relative; }
.genx-rec {
  position: absolute;
  top: 5%;
  left: 5%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: .28em;
  color: #ff2743;
  text-shadow: 0 0 8px rgba(255, 39, 67, .6);
  pointer-events: none;
}
.genx-rec-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff2743;
  box-shadow: 0 0 10px 2px rgba(255, 39, 67, .85);
  animation: genxRecBlink 1s steps(1) infinite;
}
@keyframes genxRecBlink {
  50% { opacity: .12; box-shadow: 0 0 4px rgba(255, 39, 67, .35); }
}

/* ---------- Equalizer-Gimmick (rechts über der Schallplatte) ---------- */
.genx-eq {
  position: absolute;
  top: 5%;
  right: 6%;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 28px;
  pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(41, 197, 246, .55));
}
.genx-eq span {
  width: 5px;
  min-height: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #7fe3ff, #29c5f6 55%, #1a6ff0);
  animation: genxEq 0.9s ease-in-out infinite;
}
.genx-eq span:nth-child(1) { animation-delay: 0s; }
.genx-eq span:nth-child(2) { animation-delay: .18s; }
.genx-eq span:nth-child(3) { animation-delay: .36s; }
.genx-eq span:nth-child(4) { animation-delay: .10s; }
.genx-eq span:nth-child(5) { animation-delay: .28s; }
@keyframes genxEq {
  0%, 100% { height: 6px; }
  50% { height: 28px; }
}

/* ---------- Kontaktformular ---------- */
.genx-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 26px 0;
  max-width: 560px;
}
.genx-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9a90b6;
}
.genx-form input,
.genx-form textarea {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  color: #f4f0fb;
  background: #17101f;
  border: 2px solid #3a3048;
  border-radius: 9px;
  padding: 12px 14px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.genx-form input:focus,
.genx-form textarea:focus {
  outline: none;
  border-color: #29c5f6;
  box-shadow: 0 0 0 3px rgba(41, 197, 246, .25);
}
.genx-form textarea { resize: vertical; min-height: 150px; }
.genx-form button { align-self: flex-start; cursor: pointer; margin-top: 4px; }
.genx-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.genx-formmsg {
  padding: 14px 16px;
  border-radius: 9px;
  margin: 0 0 20px;
  font-weight: 600;
}
.genx-formmsg.genx-ok { background: rgba(0, 255, 65, .12); border: 2px solid #00ff41; color: #b8ffcf; }
.genx-formmsg.genx-err { background: rgba(255, 41, 117, .12); border: 2px solid #ff2975; color: #ffc4d8; }

/* ---------- Startseiten-Spielautomat (Arcade-Cabinet) ---------- */
.genx-cab-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 34px;
  max-width: 760px;
  margin: 6px auto 22px;
}
.genx-cabinet {
  display: block;
  width: min(300px, 78vw);
  flex: 0 0 auto;
  text-decoration: none;
  filter: drop-shadow(0 16px 34px rgba(0, 0, 0, .55));
  transition: transform .2s ease;
}
.genx-cabinet:hover,
.genx-cabinet:focus-visible { transform: translateY(-5px) scale(1.02); outline: none; }

/* Automat-Foto (transparentes PNG/WebP) + eingeblendetes Display */
.genx-cabinet-img {
  position: relative;
  display: block;
  container-type: inline-size;   /* cqw-Einheiten skalieren mit der Automatenbreite */
}
.genx-cabinet-img img { width: 100%; height: auto; display: block; }

/* Bildschirm-Overlay: sitzt exakt auf dem schwarzen Display des Automaten */
.genx-cab-fx {
  position: absolute;
  left: 35%;
  top: 24%;
  width: 31%;
  height: 15.5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4%;
  text-align: center;
  line-height: 1;
  overflow: hidden;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  pointer-events: none;
}
.cabfx-hi {
  font-size: 3.4cqw;
  font-weight: 700;
  letter-spacing: .1em;
  color: #7fe3ff;
  text-shadow: 0 0 5px rgba(41, 197, 246, .7);
}
.cabfx-start {
  font-weight: 700;
  font-size: 7cqw;
  line-height: .96;
  letter-spacing: .05em;
  color: #ffd23f;
  text-shadow: 0 0 7px rgba(255, 210, 63, .8), 0 0 2px rgba(255, 140, 26, .9);
  animation: cabfxBlink 1.15s steps(1) infinite;
}
@keyframes cabfxBlink { 50% { opacity: .3; } }
.cabfx-icons {
  display: inline-flex;
  gap: 1.5em;
  font-size: 4.4cqw;
  line-height: 1;
}
.cabfx-i { animation: cabfxPulse 1s steps(1) infinite; }
.cabfx-ship { color: #29c5f6; text-shadow: 0 0 5px rgba(41, 197, 246, .85); animation-delay: 0s; }
.cabfx-star { color: #e246a2; text-shadow: 0 0 5px rgba(226, 70, 162, .85); animation-delay: .33s; }
.cabfx-rock { color: #ff8c1a; text-shadow: 0 0 5px rgba(255, 140, 26, .85); animation-delay: .66s; }
@keyframes cabfxPulse { 0%, 100% { opacity: 1; } 50% { opacity: .18; } }
.genx-cabinet:hover .cabfx-start { color: #7fe3ff; text-shadow: 0 0 9px rgba(127, 227, 255, .9); }

.genx-cabinet-sub {
  text-align: center;
  max-width: 46ch;
  margin: 0 auto 18px;
  color: #cbb8d8;
}
.genx-ctas-center { justify-content: center; }

/* ---------- Startseiten-Bestenliste (neben dem Automaten) ---------- */
.genx-scoreboard {
  flex: 1 1 300px;
  max-width: 360px;
  min-width: 240px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, rgba(23, 16, 31, .92), rgba(11, 8, 18, .92));
  border: 2px solid #0c0330;
  border-radius: 14px;
  box-shadow: 0 0 0 2px rgba(41, 197, 246, .22), 0 14px 30px rgba(0, 0, 0, .5), inset 0 0 40px rgba(0, 0, 0, .5);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.genx-scoreboard-head {
  margin: 0 0 12px;
  text-align: center;
  font-family: 'Luckiest Guy', 'Arial Black', sans-serif;
  font-size: 19px;
  letter-spacing: .05em;
  color: #ffd23f;
  -webkit-text-stroke: 1px #17101f;
  text-shadow: 0 0 12px rgba(255, 210, 63, .4);
}
.genx-scoreboard-empty {
  margin: 8px 0;
  text-align: center;
  color: #9a90b6;
  font-size: 14px;
}
.genx-scoreboard-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Scrollbarer Bereich (Top 50), ~6 Zeilen sichtbar */
.genx-scoreboard-scroll {
  max-height: 218px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #29c5f6 rgba(255, 255, 255, .06);
}
.genx-scoreboard-scroll::-webkit-scrollbar { width: 8px; }
.genx-scoreboard-scroll::-webkit-scrollbar-track { background: rgba(255, 255, 255, .05); border-radius: 8px; }
.genx-scoreboard-scroll::-webkit-scrollbar-thumb { background: #29c5f6; border-radius: 8px; }
.genx-scoreboard-scroll::-webkit-scrollbar-thumb:hover { background: #5ad2ff; }
/* Medaillen-Sterne Platz 1–3 */
.gsb-star { font-size: 1.15em; line-height: 1; }
.gsb-medal-1 .gsb-star { color: #ffd23f; text-shadow: 0 0 6px rgba(255, 210, 63, .6); }
.gsb-medal-2 .gsb-star { color: #cfd6e2; text-shadow: 0 0 6px rgba(207, 214, 226, .5); }
.gsb-medal-3 .gsb-star { color: #cd7f32; text-shadow: 0 0 6px rgba(205, 127, 50, .5); }
.gsb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 6px;   /* rechts mehr Platz, damit die Scrollbar nicht in die Zahlen ragt */
  border-bottom: 1px solid rgba(138, 120, 168, .16);
  font-size: 14px;
  letter-spacing: .04em;
  color: #f4ead8;
}
.gsb-row:last-child { border-bottom: none; }
.gsb-rank { width: 2.6ch; text-align: center; color: #9a90b6; font-weight: 700; }
.gsb-medal-1 .gsb-name { color: #ffd23f; }
.gsb-medal-2 .gsb-name { color: #cfd6e2; }
.gsb-medal-3 .gsb-name { color: #cd7f32; }
.gsb-name {
  flex: 1 1 auto;
  font-weight: 700;
  letter-spacing: .08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gsb-score { color: #ffd23f; font-weight: 700; white-space: nowrap; }
/* Erreichter Level (L012) zwischen Rang und Punkten — dezent, in HUD-Orange. */
.gsb-lvl { color: #ff8c1a; font-weight: 700; font-size: .82em; letter-spacing: .03em; white-space: nowrap; opacity: .9; }
.gsb-row.gsb-empty .gsb-rank,
.gsb-row.gsb-empty .gsb-name,
.gsb-row.gsb-empty .gsb-score { color: #5a4d70; font-weight: 400; }
.genx-scoreboard-topn {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: #29c5f6;
  -webkit-text-stroke: 0;
  vertical-align: middle;
}

/* ---------- All Time Highscore (Hall of Fame — bleibt dauerhaft) ---------- */
.genx-alltime {
  margin: 0 0 9px;
  padding: 11px 13px 9px;
  background: linear-gradient(180deg, rgba(255, 210, 63, .12), rgba(23, 16, 31, .55));
  border: 2px solid #ffd23f;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 210, 63, .22), 0 0 18px rgba(255, 210, 63, .2), inset 0 0 22px rgba(0, 0, 0, .4);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
.genx-alltime-title {
  margin: 0 0 7px;
  text-align: center;
  font-family: 'Luckiest Guy', 'Arial Black', sans-serif;
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #ffd23f;
  -webkit-text-stroke: .5px #17101f;
  text-shadow: 0 0 12px rgba(255, 210, 63, .5);
}
.genx-alltime-list { list-style: none; margin: 0; padding: 0; }
.genx-alltime-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 4px;
  font-size: 15px;
  letter-spacing: .04em;
  color: #f4ead8;
}
.genx-alltime-row + .genx-alltime-row { border-top: 1px solid rgba(255, 210, 63, .16); }
.genx-alltime-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.genx-alltime-p1 .genx-alltime-name { color: #ffd23f; }
.genx-alltime-p2 .genx-alltime-name { color: #e5dcf0; }
.genx-alltime-medal { flex: 0 0 auto; font-size: 1.15em; line-height: 1; }
/* Erreichter Level (L012) der ewigen Bestleistung — dezent, in HUD-Orange. */
.genx-alltime-lvl { flex: 0 0 auto; font-weight: 700; font-size: .82em; color: #ff8c1a; opacity: .9; white-space: nowrap; }
.genx-alltime-score { flex: 0 0 auto; font-weight: 700; color: #ffd23f; white-space: nowrap; }
.genx-alltime-empty { opacity: .55; }
.genx-alltime-empty .genx-alltime-name,
.genx-alltime-empty .genx-alltime-score { color: #7a6a92; font-weight: 400; }
.genx-alltime-note {
  margin: 0 0 12px;
  text-align: center;
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: #b3a3c9;
}

@media (prefers-reduced-motion: reduce) {
  .genx-rec-dot { animation: none; }
  .genx-eq span { animation: none; height: 18px; }
  .genx-nav, .genx-burger span, .genx-nav a { transition: none; }
  .cabfx-start, .cabfx-i { animation: none; }
  .genx-cabinet { transition: none; }
}

/* ============================================================
   Politur: Anker-Sprünge, sanftes Scrollen, Tastatur-Fokus
   ============================================================ */

/* Anker-Ziele landen unter der Sticky-Kopfzeile (kein Verstecken). */
.genx-section[id] { scroll-margin-top: 76px; }

/* Sanftes Scrollen für Anker-Navigation (nur ohne Reduced-Motion). */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Sichtbarer Fokusrahmen für Tastatur-Navigation (Barrierefreiheit). */
.genx-topbar a:focus-visible,
.genx-nav a:focus-visible,
.genx-langs a:focus-visible,
.genx-burger:focus-visible,
.genx-music-btn:focus-visible,
.genx-page a:focus-visible,
.genx-page button:focus-visible,
.genx-page input:focus-visible,
.genx-page textarea:focus-visible {
  outline: 2px solid #29c5f6;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ===================================================================
   "NEU IM SPIEL" — Hinweiskasten zum Arcade-Update
   Erscheint an ZWEI Stellen: auf /arcade/ ueber dem Spielrahmen und auf
   der Startseite unter der Bestenliste.

   Steht deshalb HIER und nicht in genx-arcade.css — die wird nur auf
   Seiten mit dem Spiel geladen, auf der Startseite waere der Kasten sonst
   unformatiert. genx-ui.css liegt auf jeder Seite.

   Kein width/max-width: der Kasten nimmt sich die Breite des Elternteils.
   Feste Breiten sind in diesem Projekt schon zweimal ueber den Rand
   gelaufen (Backstage-Reaktor).

   Zum Entfernen, wenn das Update kein Thema mehr ist: diesen Block,
   genx_render_neuerungen() und ihre zwei Aufrufe loeschen.
   =================================================================== */
.genx-neu {
  margin: 0 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid rgba(0, 255, 65, .28);
  border-radius: 10px;
  background: rgba(0, 255, 65, .05);
  font-family: 'Share Tech Mono', ui-monospace, monospace;
}
/* Auf der Startseite sitzt er UNTER der Liste — dort oben Abstand halten. */
.genx-scoreboard .genx-neu { margin: 16px 0 0; }

.genx-neu-titel {
  margin: 0 0 9px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: clamp(12px, 2.6vw, 15px);
  color: #00ff41;
  /* Titel und Datum duerfen umbrechen — auf dem Handy passt sonst beides
     nicht in eine Zeile und das Datum wird abgeschnitten. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
/* Das Datum tritt bewusst zurueck: Es beantwortet nur die Frage "ist das
   neu oder haengt der Kasten hier seit Wochen?" und soll dem eigentlichen
   Hinweis nicht die Aufmerksamkeit wegnehmen. */
.genx-neu-datum {
  font-family: 'Share Tech Mono', ui-monospace, monospace;
  text-transform: none;
  letter-spacing: .04em;
  font-size: clamp(10px, 2vw, 12px);
  color: #b6a8c9;
  opacity: .85;
}
.genx-neu-liste {
  margin: 0 0 10px;
  padding-left: 18px;
  color: #efe9f5;
  font-size: clamp(12px, 2.5vw, 14px);
  line-height: 1.55;
}
.genx-neu-liste li { margin-bottom: 5px; }
.genx-neu-liste li::marker { color: #00ff41; }
.genx-neu-reset {
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(0, 255, 65, .18);
  color: #b6a8c9;
  font-size: clamp(11px, 2.3vw, 13px);
  line-height: 1.5;
}
/* Am Handy wird .genx-arcade randlos ueber die volle Breite gezogen (100vw).
   Ohne Seitenrand klebte der Kasten dort am Bildschirmrand. Gilt nur fuer
   den Kasten IM Spiel-Container, nicht fuer den auf der Startseite. */
@media (max-width: 680px) {
  .genx-arcade > .genx-neu { margin-left: 12px; margin-right: 12px; }
}