/* Startseite 2 — Aussehen (Demo; Bauplan in der Git-Geschichte von ~/neo, entwurf: nachtlauf-2610/startseite-2/bauplan.md)
 *
 * CHARAKTER: „Nachtmarkt“ — tiefes Violett-Schwarz, jedes Spiel bringt seine eigene Farbe mit (--h = Hue aus
 *   ../../daten/katalog.php) und färbt Glühen, Kante und Schatten seiner Kachel. Der Hero übernimmt die Farbe des Spiels im
 *   Rampenlicht (--held-h, weich überblendet). Tools leben in einer eigenen „Werkstatt“: Blaupausen-Raster,
 *   Monospace, Cyan — bewusst anders als der Spielebereich.
 * SCHRIFTEN (zentrales Archiv https://fonts.hirsing.eu/, absolut; vorher ../global-media/fonts, Umzug 27.10.2026): Bungee = Schau-Schrift (Titel, Ränge, Zahlen), Exo 2 = Haus-/Lesetext
 *   (wie im Bestand), IBM Plex Mono = Werkstatt und Messwerte.
 * AUFBAU: 1 Grundlagen · 2 Kopfleiste · 3 Hero · 4 Konto · 5 Reihen · 6 Raster/Kacheln · 7 Bestenliste ·
 *   8 Werkstatt · 8b Lifehacks-Band · 9 Band/Fuß · 10 Handy/Tablet · 11 Bewegung reduziert.
 * ÄNDERN: Farben/Abstände über die Variablen in :root. Breakpoints: 1100 (Tablet quer), 760 (Handy/Tablet hoch), 420.
 */

/* ── 1 Grundlagen ── */
@font-face { font-family: 'Bungee'; src: url('https://fonts.hirsing.eu/bungee-v17-latin/bungee-v17-latin-regular.woff2') format('woff2'); font-display: swap; }
/* Orbitron 900: nur der Slogan (h1) — Schrift der alten Startseite, Micha 29.10.2026 */
@font-face { font-family: 'Orbitron'; src: url('https://fonts.hirsing.eu/orbitron-v35-latin/orbitron-v35-latin-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('https://fonts.hirsing.eu/exo-2-v26/exo-2-v26-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('https://fonts.hirsing.eu/exo-2-v26/exo-2-v26-latin-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('https://fonts.hirsing.eu/exo-2-v26/exo-2-v26-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Exo 2'; src: url('https://fonts.hirsing.eu/exo-2-v26/exo-2-v26-latin-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('https://fonts.hirsing.eu/ibm-plex-mono-v20-latin/ibm-plex-mono-v20-latin-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('https://fonts.hirsing.eu/ibm-plex-mono-v20-latin/ibm-plex-mono-v20-latin-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('https://fonts.hirsing.eu/ibm-plex-mono-v20-latin/ibm-plex-mono-v20-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* Hue als registrierte Zahl → der Hero-Himmel blendet beim Wechsel weich über */
@property --held-h { syntax: '<number>'; inherits: true; initial-value: 28; }

:root {
  --bg: #07060f; --flaeche: #0f0d1e; --flaeche2: #16132b; --linie: rgba(255, 255, 255, 0.08); --linie2: rgba(255, 255, 255, 0.14);
  --text: #f4f1ff; --leise: #a8a2c8; --ganzleise: #8a85ad; /* ≥ 4,5:1 auf --bg (Prüfung 26.10.) */
  --pink: #ff3d8b; --orange: #ff9f43; --lila: #8b5cff; --cyan: #33e1ff; --mint: #3dffb0; --gold: #ffcf5a;
  --held-h: 28; --held-lauf: 0;
  --rand: 32px; --breite: 1320px; --leiste-h: 68px;
  --schau: 'Bungee', 'Exo 2', system-ui, sans-serif;
  --lese: 'Exo 2', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
  color-scheme: dark;
  transition: --held-h 1.2s ease;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--leiste-h) + 64px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--lese); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 10px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px;
  font: 800 16px/1 var(--lese); letter-spacing: 0.02em; border: 0; white-space: nowrap; transition: transform .18s, box-shadow .18s, background .18s; }
.knopf svg { width: 18px; height: 18px; }
.knopf-spielen { color: #170a12;
  background: linear-gradient(135deg, hsl(var(--held-h) 100% 66%), hsl(calc(var(--held-h) + 35) 100% 60%));
  box-shadow: 0 10px 34px -6px hsl(var(--held-h) 100% 55% / 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.knopf-spielen svg { fill: currentColor; stroke: none; }
.knopf-spielen:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -6px hsl(var(--held-h) 100% 55% / 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.knopf-glas { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--linie2); color: var(--text); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.knopf-glas:hover { background: rgba(255, 255, 255, 0.13); }
.knopf-hell { background: #fff; color: #1a0b17; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.5); }
.knopf-hell:hover { transform: translateY(-2px); }
.knopf-klein { height: 38px; padding: 0 16px; font-size: 14px; background: hsl(var(--h) 90% 62%); color: #120914; }
.knopf-klein svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

.avatar { --h: 280; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: none;
  font: 800 12px/1 var(--lese); color: #fff; letter-spacing: 0.02em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  background: linear-gradient(135deg, hsl(var(--h) 85% 60%), hsl(calc(var(--h) + 70) 85% 48%)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18); }
.avatar.gross { width: 64px; height: 64px; font-size: 22px; }

/* ── 2 Kopfleiste ── */
.leiste { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--leiste-h); display: flex; align-items: center; gap: 22px;
  padding: 0 var(--rand); transition: background .3s, border-color .3s, backdrop-filter .3s;
  background: linear-gradient(180deg, rgba(7, 6, 15, 0.7), rgba(7, 6, 15, 0)); border-bottom: 1px solid transparent; }
.leiste.fest { background: rgba(11, 9, 24, 0.78); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--linie); }
.marke { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.marke-logo { width: 40px; height: 40px; border-radius: 50%; filter: drop-shadow(0 0 10px rgba(255, 61, 139, 0.45)); }
.marke-wort { font: 800 21px/1 var(--lese); letter-spacing: 0.01em; }
.marke-wort b { font-weight: 800; background: linear-gradient(90deg, var(--pink), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.leiste-nav { display: flex; gap: 4px; }
.leiste-nav a { padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--leise); transition: color .2s, background .2s; }
.leiste-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.suche { position: relative; flex: 1; max-width: 460px; margin-left: auto; }
.suche input { width: 100%; height: 44px; border-radius: 999px; border: 1px solid var(--linie2); background: rgba(255, 255, 255, 0.06);
  color: var(--text); font: 500 15px var(--lese); padding: 0 76px 0 44px; outline: none; transition: border-color .2s, background .2s, box-shadow .2s;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); -webkit-appearance: none; appearance: none; }
.suche input::-webkit-search-cancel-button { display: none; }
.suche input::placeholder { color: var(--ganzleise); }
.suche input:focus { border-color: hsl(var(--held-h) 90% 65% / 0.8); background: rgba(255, 255, 255, 0.1); box-shadow: 0 0 0 4px hsl(var(--held-h) 90% 60% / 0.18); }
.suche-lupe { position: absolute; left: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--leise); pointer-events: none; }
.suche-taste { position: absolute; right: 14px; top: 50%; translate: 0 -50%; font: 600 12px var(--mono); color: var(--ganzleise);
  border: 1px solid var(--linie2); border-radius: 6px; padding: 1px 7px; pointer-events: none; }
.suche-x { position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); display: none; font-size: 12px; }
.suche.gefuellt .suche-x { display: block; }
.suche.gefuellt .suche-taste { display: none; }
.leiste-rechts { display: flex; align-items: center; gap: 10px; flex: none; }
.rund-knopf { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linie2); background: rgba(255, 255, 255, 0.06); color: var(--text); }
.rund-knopf svg { width: 20px; height: 20px; }
.herz { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid rgba(255, 61, 139, 0.4);
  background: rgba(255, 61, 139, 0.1); color: var(--pink); font-weight: 700; font-size: 14px; transition: background .2s; }
.herz:hover { background: rgba(255, 61, 139, 0.2); }
.herz-text { color: #ffc3db; }
.herz svg { width: 19px; height: 19px; fill: currentColor; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 61, 139, 0.7)); }
.herz:hover svg { animation: schlag .8s ease; }
@keyframes schlag { 30% { transform: scale(1.25); } 60% { transform: scale(0.95); } }
.nur-handy { display: none; }
.sprache { display: flex; border: 1px solid var(--linie2); border-radius: 999px; padding: 3px; background: rgba(255, 255, 255, 0.04); }
.sprache a { padding: 6px 10px; border-radius: 999px; font: 700 12px/1 var(--lese); letter-spacing: 0.08em; color: var(--ganzleise); }
.sprache a.an { background: rgba(255, 255, 255, 0.14); color: var(--text); }
.knopf-login { height: 44px; padding: 0 22px; font-size: 15px; color: #160812; background: linear-gradient(135deg, #fff, #ffd9ea); }
.knopf-login:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(255, 61, 139, 0.7); }
.konto-wrap { position: relative; }
.konto-knopf { position: relative; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 6px 0 7px; border-radius: 999px;
  border: 1px solid var(--linie2); background: rgba(255, 255, 255, 0.06); }
.konto-knopf .avatar { width: 34px; height: 34px; }
.kk-name { font-weight: 700; font-size: 14px; }
.kk-level { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; font: 400 12px var(--schau); color: #1a0b00; background: linear-gradient(135deg, var(--gold), var(--orange)); }
.punkt { position: absolute; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #0e0b1d; }
.punkt.rot { left: 30px; top: 3px; background: var(--pink); box-shadow: 0 0 8px var(--pink); }
.punkt.blau { left: 30px; bottom: 3px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.konto-menue { position: absolute; right: 0; top: calc(100% + 10px); width: 250px; padding: 8px; border-radius: 18px; z-index: 60;
  background: rgba(20, 17, 40, 0.94); border: 1px solid var(--linie2); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7); }
.km-kopf { display: flex; align-items: center; gap: 12px; padding: 10px 10px 14px; border-bottom: 1px solid var(--linie); margin-bottom: 6px; }
.km-kopf .avatar.gross { width: 44px; height: 44px; font-size: 15px; }
.km-kopf b { display: block; } .km-kopf span { color: var(--leise); font-size: 13px; }
.konto-menue a { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--leise); }
.konto-menue a:hover { background: rgba(255, 255, 255, 0.07); color: var(--text); }
.km-zahl { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; text-align: center; }
.km-zahl.blau { background: var(--cyan); color: #04212a; }
.konto-menue .km-ab { color: #ff8db6; border-top: 1px solid var(--linie); border-radius: 0 0 10px 10px; margin-top: 6px; }

/* ── 3 Hero ── */
/* (vorher) height: clamp(640px, 100svh, 940px) — seit 29.10.2026 steht das Konto-Band (~190 px samt Leiste) darüber; Kasten + Spiel
   sollen zusammen in den ersten Bildschirm passen */
.held { position: relative; height: clamp(600px, calc(100svh - 190px), 940px); overflow: hidden; isolation: isolate; }
.held-himmel { position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(60% 70% at 70% 45%, hsl(var(--held-h) 90% 45% / 0.45), transparent 70%),
    radial-gradient(40% 50% at 92% 10%, hsl(calc(var(--held-h) + 60) 90% 50% / 0.28), transparent 70%),
    radial-gradient(50% 60% at 10% 100%, hsl(calc(var(--held-h) - 70) 90% 40% / 0.30), transparent 70%),
    linear-gradient(180deg, #0b0918, var(--bg)); }
/* feines Pixelraster als Bodentextur */
.held-himmel::after { content: ''; position: absolute; inset: 0; opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 80% at 65% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 80% at 65% 50%, #000 0%, transparent 75%); }
.held-buehne { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.held-vorhang { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 6, 15, 0.82) 0%, rgba(7, 6, 15, 0.45) 34%, rgba(7, 6, 15, 0) 58%),
              linear-gradient(0deg, var(--bg) 0%, rgba(7, 6, 15, 0) 26%),
              linear-gradient(180deg, var(--bg) 0%, rgba(7, 6, 15, 0) 14%); }   /* oben weich in den Grund: Konto-Band darüber (29.10.2026) */
/* Ohne WebGL: das Spiel im Rampenlicht als großes, schwebendes Bild im CSS-Himmel */
.ohne-3d .held-buehne { display: none; }
/* (vorher) padding: calc(var(--leiste-h) + 10px) var(--rand) 130px — oben Platz für die Leiste, unten für die Auswahlleiste;
   seit 29.10.2026 liegt das Konto-Band über dem Hero, die Auswahlleiste ist aus */
.held-inhalt { position: relative; height: 100%; max-width: var(--breite); margin: 0 auto; padding: 30px var(--rand) 60px;
  display: flex; flex-direction: column; justify-content: center; }
.held-text { max-width: min(620px, 43vw); }
.held-text.rein > * { animation: rein .7s cubic-bezier(.2, .8, .2, 1) both; }
.held-text.rein > :nth-child(2) { animation-delay: .06s; } .held-text.rein > :nth-child(3) { animation-delay: .12s; }
.held-text.rein > :nth-child(4) { animation-delay: .18s; } .held-text.rein > :nth-child(5) { animation-delay: .24s; }
@keyframes rein { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.held-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 7px 14px 7px 12px; border-radius: 999px;
  font: 700 13px/1 var(--lese); letter-spacing: 0.14em; text-transform: uppercase; color: hsl(var(--held-h) 100% 80%);
  background: hsl(var(--held-h) 90% 50% / 0.14); border: 1px solid hsl(var(--held-h) 90% 65% / 0.35); }
.kicker-punkt { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--held-h) 100% 65%); box-shadow: 0 0 0 0 hsl(var(--held-h) 100% 65% / 0.7); animation: puls 1.8s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px hsl(var(--held-h) 100% 65% / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--held-h) 100% 65% / 0); } }
.held-titel { margin: 0; font: 400 clamp(52px, 7.4vw, 112px)/0.92 var(--schau); letter-spacing: -0.01em; text-transform: uppercase;
  background: linear-gradient(180deg, #fff 30%, hsl(var(--held-h) 100% 78%) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 30px hsl(var(--held-h) 100% 50% / 0.45)); white-space: nowrap; }
.held-satz { margin: 20px 0 22px; max-width: 520px; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: #d9d4f2; }
.held-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.held-meta span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--leise);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--linie); }
.held-meta svg { width: 15px; height: 15px; color: hsl(var(--held-h) 100% 72%); }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.held-knoepfe .knopf { height: 58px; padding: 0 30px; font-size: 17px; }
/* Auswahl unten (Pause-Knopf + Spiel-Münzen mit Laufstrich): AUS seit 29.10.2026 (Micha: überflüssig), #held-wahl ist hidden.
   Wieder an: Block einkommentieren + main.js heldWahl() + hidden in index.php.
.held-wahl { position: absolute; left: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); bottom: 44px; display: flex; gap: 10px; }
.held-wahl .held-pause { flex: none; width: 52px; display: grid; place-items: center; padding: 0; border-radius: 999px; }
.held-wahl .held-pause svg { width: 18px; height: 18px; }
.held-wahl .held-pause.an { color: var(--text); border-color: var(--linie2); }
.held-wahl .held-pause.an svg { fill: currentColor; stroke: none; }
.held-wahl button { --h: 0; position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; border-radius: 999px; border: 1px solid var(--linie);
  background: rgba(14, 12, 28, 0.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--leise); font-weight: 700; font-size: 13px;
  transition: background .25s, color .25s, border-color .25s; overflow: hidden; }
.held-wahl img { width: 38px; height: 38px; border-radius: 50%; transition: transform .25s; }
.held-wahl button:hover { color: var(--text); border-color: var(--linie2); }
.held-wahl button.an { color: var(--text); border-color: hsl(var(--h) 90% 65% / 0.6); background: hsl(var(--h) 70% 30% / 0.45); }
.held-wahl button.an img { transform: scale(1.06); box-shadow: 0 0 18px hsl(var(--h) 100% 60% / 0.8); }
.wahl-lauf { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; transform-origin: left; transform: scaleX(0); background: hsl(var(--h) 100% 65%); }
.held-wahl button.an .wahl-lauf { transform: scaleX(var(--held-lauf)); }
*/
/* AUS (29.10.2026, Micha): Slogan klein unten rechts im Hero — jetzt .slogan im Konto-Band (Abschnitt 4)
.held-claims { position: absolute; right: max(var(--rand), calc((100% - var(--breite)) / 2 + var(--rand))); bottom: 44px; text-align: right; }
.claim-satz { margin: 0 0 8px; font: 400 15px/1 var(--schau); letter-spacing: 0.04em; color: var(--text); }
.held-claims ul { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
body.angemeldet .held-claims ul { display: none; }
.held-claims li { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--leise); }
.held-claims li::before { … Häkchen, übernommen in .slogan-punkte li::before }
*/

/* ── 4 Konto-Band ── */
main { position: relative; z-index: 2; }
/* (vorher, unter dem Hero) margin: -6px auto 0 — seit 29.10.2026 oben unter der festen Leiste, darum Abstand = Leistenhöhe */
.konto-band { width: min(calc(100% - 2 * var(--rand)), calc(var(--breite) - 2 * var(--rand))); margin: calc(var(--leiste-h) + 18px) auto 0; border-radius: 26px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)); border: 1px solid var(--linie2);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.konto-band::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 0% 0%, rgba(255, 61, 139, 0.16), transparent 60%), radial-gradient(50% 120% at 100% 100%, rgba(51, 225, 255, 0.12), transparent 60%); }
/* Slogan = h1 der Seite (seit 29.10.2026, Micha: Überschrift der alten Startseite). Steht fest im HTML; der Konto-Teil
   kommt per JS dazu (Gast: rechts daneben, angemeldet: darunter). Ohne Konto-Klasse (vor der Abfrage) nur der Slogan. */
.konto-band:not(.gast):not(.ich) { padding: 26px 32px; }
.slogan-teil { position: relative; grid-area: slogan; min-width: 0; }
/* Aussehen wie die alte Startseite (vhc/vhc-index.css .hero h1): Orbitron, weiß mit Cyan-Schein, Mittelwort im Verlauf
   Cyan→Violett, darunter eine pulsierende Linie (.slogan-teil::after) */
.slogan { margin: 0 0 12px; font: 900 clamp(26px, 2.9vw, 40px)/1.15 'Orbitron', var(--schau); letter-spacing: 0.06em; color: #fff;
  text-shadow: 0 0 40px rgba(0, 245, 255, 0.4); }
.slogan-akzent { background: linear-gradient(90deg, #00f5ff, #b060ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.slogan-teil::after { content: ''; display: block; width: 200px; height: 2px; margin-top: 16px; background: linear-gradient(90deg, #00f5ff, transparent);
  animation: slogan-linie 2s ease-in-out infinite; }
@keyframes slogan-linie { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.slogan-punkte { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
body.angemeldet .slogan-punkte { display: none; }
.slogan-punkte li { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--leise); }
.slogan-punkte li::before { content: ''; width: 16px; height: 16px; border-radius: 50%; background: hsl(var(--held-h) 90% 60% / 0.18) center/10px no-repeat
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3 5 8.7l4.6-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.angemeldet .slogan { margin: 0; }
/* Wechselbühne im Slogan-Feld (02.11.2026, Micha; index.php #kopf-buehne, Logik main.js kopfBuehne)
 * Reine Anzeige (keine Links, keine Auswahl). Alle Tafeln liegen in DERSELBEN Rasterzelle → das Feld ist so hoch wie die höchste
 * Tafel und springt beim Wechsel nicht. Unsichtbare Tafeln: visibility hidden. Jede Tafel: links Text im Stil des Slogans
 * (.slogan: weiß, Schein; ein Wort im Verlauf der Bereichsfarbe, .kb-akzent), darunter eine Zeile (.kb-sub); rechts schwebende
 * Bilder (.kb-bilder, von main.js aus KB_BILDER gefüllt). Wechsel: alte Tafel wird von links nach rechts weggeschnitten, die neue im
 * selben Takt aufgedeckt (clip-path), davor ein Lichtstreifen; danach fliegen Titel, Zeile und Bilder versetzt herein. Das Feld
 * färbt sich weich in der Bereichsfarbe (--kb-wash, registriert → Farbübergang). */
@property --kb-wash { syntax: '<color>'; inherits: true; initial-value: rgba(176, 96, 255, 0.16); }
.kb-buehne { position: relative; display: grid; --kb-wash: rgba(176, 96, 255, 0.16); transition: --kb-wash 1.2s ease; }
.kb-buehne::before { content: ''; position: absolute; inset: -60px -40px -60px -80px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 90% at 30% 50%, var(--kb-wash), transparent 72%); }
.kb-buehne[data-kb="tools"] { --kb-wash: rgba(51, 225, 255, 0.2); }
.kb-buehne[data-kb="tipps"] { --kb-wash: rgba(255, 175, 67, 0.24); }
.kb-tafel { grid-area: 1 / 1; min-width: 0; visibility: hidden; display: flex; align-items: center; gap: 28px; }
.kb-tafel.an, .kb-tafel.raus { visibility: visible; }
.kb-text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.kb-tafel[data-ziel="slogan"] { --kb-f: #00f5ff; --kb-f2: #b060ff; }
.kb-tafel[data-ziel="tools"] { --kb-f: var(--cyan); --kb-f2: var(--mint); }
.kb-tafel[data-ziel="tipps"] { --kb-f: var(--gold); --kb-f2: var(--pink); }
.kb-satz { display: block; }
.kb-akzent { background: linear-gradient(90deg, var(--kb-f), var(--kb-f2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kb-sub { color: rgba(255, 255, 255, 0.86); font-size: 17px; font-weight: 600; line-height: 1.45; }
/* Bilder rechts: kleine leuchtende Kacheln, leicht gefächert, schweben versetzt */
.kb-bilder { flex: none; display: flex; align-items: center; padding-right: 6px; }
.kb-bild { position: relative; display: block; width: 56px; height: 56px; margin-left: -10px; border-radius: 16px; overflow: hidden;
  background: #120e24; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--kb-f) 70%, transparent), 0 10px 26px -8px color-mix(in srgb, var(--kb-f) 70%, transparent);
  animation: kb-schweben 4.8s ease-in-out infinite; }
.kb-bild:first-child { margin-left: 0; }
.kb-bild img { width: 100%; height: 100%; object-fit: cover; }
.kb-bild.kb-w img { object-fit: contain; padding: 8px; }
.kb-bild video { display: block; width: 100%; height: 100%; object-fit: cover; }   /* animierte Kachel (main.js KB_LOOPS) */
.kb-bild:nth-child(odd) { transform: rotate(-6deg); } .kb-bild:nth-child(even) { transform: rotate(5deg) translateY(8px); }
.kb-bild:nth-child(2) { animation-delay: -1s; } .kb-bild:nth-child(3) { animation-delay: -2s; z-index: 1; width: 66px; height: 66px; }
.kb-bild:nth-child(4) { animation-delay: -3s; } .kb-bild:nth-child(5) { animation-delay: -4s; }
@keyframes kb-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
/* Einflug nach dem Wisch */
.kb-tafel.rein .kb-satz { animation: kb-titel .8s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes kb-titel { 0% { opacity: 0; transform: translateY(0.35em) scale(0.96); filter: blur(10px); } 60% { opacity: 1; filter: blur(0) brightness(1.5); } 100% { opacity: 1; transform: none; filter: none; } }
.kb-tafel.rein .kb-sub { animation: kb-sanft .6s ease .8s both; }
@keyframes kb-sanft { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kb-tafel.rein .kb-bilder { animation: kb-bilder-rein .9s cubic-bezier(.2, .9, .25, 1.15) .45s both; }
@keyframes kb-bilder-rein { from { opacity: 0; transform: translateX(40px) scale(0.85); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.kb-tafel.rein { animation: kb-aufdecken .75s cubic-bezier(.6, .05, .3, 1) both; }
.kb-tafel.raus { animation: kb-wegnehmen .75s cubic-bezier(.6, .05, .3, 1) both; }
@keyframes kb-aufdecken { from { clip-path: inset(-40px 100% -40px -40px); } to { clip-path: inset(-40px -40px -40px -40px); } }
@keyframes kb-wegnehmen { from { clip-path: inset(-40px -40px -40px -40px); } to { clip-path: inset(-40px -40px -40px 100%); } }
.kb-wisch { position: absolute; top: -10px; bottom: -10px; left: 0; width: 6px; border-radius: 6px; pointer-events: none; opacity: 0;
  background: #fff; box-shadow: 0 0 18px 6px var(--kb-wf, var(--cyan)), 0 0 60px 20px color-mix(in srgb, var(--kb-wf, var(--cyan)) 45%, transparent); }
.kb-buehne[data-kb="tools"] .kb-wisch { --kb-wf: var(--cyan); }
.kb-buehne[data-kb="tipps"] .kb-wisch { --kb-wf: var(--gold); }
.kb-buehne[data-kb="slogan"] .kb-wisch { --kb-wf: #b060ff; }
.kb-wisch.laeuft { animation: kb-wischen .75s cubic-bezier(.6, .05, .3, 1) both; }
@keyframes kb-wischen { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
body.still .kb-bild { animation: none; }
/* Schmaler Desktop/Tablet: weniger Bilder; Handy: Bilder als Reihe unter dem Text, Titel dürfen umbrechen */
/* Desktop: Titel etwas kleiner als früher der Slogan allein (Micha 02.11.: „Haupttext etwas kleiner“), 4 Bilder; schmaler: 3 */
@media (min-width: 761px) { .kb-buehne .slogan { font-size: clamp(22px, 1.9vw, 28px); } .kb-bild:nth-child(n+5) { display: none; } }
@media (min-width: 761px) and (max-width: 1300px) { .kb-bild:nth-child(n+4) { display: none; } }
@media (max-width: 760px) {
  .kb-tafel { flex-direction: column; align-items: flex-start; gap: 14px; }
  .kb-satz { white-space: normal; }
  .kb-sub { font-size: 15px; }
  .kb-bild { width: 48px; height: 48px; border-radius: 14px; }
  .kb-bild:nth-child(3) { width: 56px; height: 56px; }
  .kb-bild:nth-child(n+4) { display: block; }
}
/* (vorher) .konto-band.gast { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 32px; } */
.konto-band.gast { display: flex; align-items: center; gap: 32px; padding: 26px 32px; }
.konto-band.gast .slogan-teil { flex: 1; }
.konto-band.gast .gast-text { position: relative; padding-left: 32px; border-left: 1px solid var(--linie2); }
/* Breiter Schirm: Slogan in EINER Zeile (wie auf der alten Startseite) — dafür Knopf unter die Vorteile statt eigener Spalte */
@media (min-width: 1101px) {
  .slogan { white-space: nowrap; font-size: clamp(24px, 2.3vw, 32px); }
  .konto-band.gast { display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'slogan text' 'slogan knopf'; gap: 0 32px; }
  .konto-band.gast .slogan-teil { align-self: center; }
  .konto-band.gast .gast-text { grid-area: text; }   /* Zeilenabstand als Polster, nicht als gap — sonst reißt die Trennlinie */
  .konto-band.gast .gast-knoepfe { grid-area: knopf; padding: 14px 0 0 32px; border-left: 1px solid var(--linie2); }
  .konto-band.gast .gast-text h2 { margin-bottom: 10px; }
}
/* Tablet: zu schmal für Slogan + Konto nebeneinander (Slogan wurde dreizeilig) → Slogan oben, Konto-Teil + Knopf darunter */
@media (min-width: 761px) and (max-width: 1100px) {
  .konto-band.gast { flex-wrap: wrap; gap: 18px 32px; }
  .konto-band.gast .slogan-teil { flex: 1 1 100%; padding-bottom: 18px; border-bottom: 1px solid var(--linie2); }
  .slogan { white-space: nowrap; }
  .konto-band.gast .gast-text { flex: 1; padding-left: 0; border-left: 0; }
}
/* (vorher) .gast-text h2 { margin: 0 0 6px; font: 800 22px/1.25 var(--lese); } */
.gast-text h2 { margin: 0 0 12px; font: 800 20px/1.25 var(--lese); }
.gast-text p { margin: 0 0 12px; color: var(--leise); }
.gast-punkte { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 600; }
.gast-punkte li { display: flex; align-items: center; gap: 8px; }
.gast-punkte svg { width: 18px; height: 18px; color: var(--gold); }
.gast-knoepfe { display: flex; gap: 10px; flex: none; position: relative; }
.gast-knoepfe .knopf-spielen { --held-h: 335; }
/* (vorher) .konto-band.ich { … grid-template-areas: 'ich zahlen mp' 'weiter weiter weiter'; … } — seit 29.10.2026 Slogan als erste Zeile */
.konto-band.ich { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'slogan slogan slogan' 'ich zahlen mp' 'weiter weiter weiter'; gap: 22px 32px; padding: 26px 30px; align-items: center; }
.konto-band.ich .slogan-teil { padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.konto-ich { grid-area: ich; display: flex; align-items: center; gap: 18px; position: relative; }
.ich-avatar { position: relative; width: 84px; height: 84px; display: grid; place-items: center; }
.xp-ring { position: absolute; inset: 0; width: 84px; height: 84px; transform: rotate(-90deg); }
.xp-ring circle { fill: none; stroke-width: 5; }
.ring-grund { stroke: rgba(255, 255, 255, 0.1); }
.ring-xp { stroke: var(--gold); filter: drop-shadow(0 0 4px rgba(255, 207, 90, 0.7)); }
.ich-level { position: absolute; right: -4px; bottom: -2px; min-width: 30px; height: 30px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px;
  font: 400 13px var(--schau); color: #1d0e00; background: linear-gradient(135deg, var(--gold), var(--orange)); border: 3px solid #141128; }
.ich-text .leise { margin: 0; color: var(--leise); font-size: 14px; }
.ich-text h2 { margin: 0 0 8px; font: 400 26px/1 var(--schau); }
.xp-zeile { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--leise); font-weight: 600; }
.xp-balken { width: 140px; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.xp-balken i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--orange), var(--gold)); }
.konto-zahlen { grid-area: zahlen; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; position: relative; }
.konto-zahlen > * { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--linie); }
.konto-zahlen b { display: flex; align-items: baseline; gap: 8px; font: 400 24px/1.1 var(--schau); }
.konto-zahlen b small.gold { font: 700 12px var(--lese); color: var(--gold); }
.konto-zahlen span { font-size: 12px; color: var(--leise); font-weight: 600; }
.zahl-hinweis { position: relative; }
.zahl-hinweis::after { content: ''; position: absolute; right: 12px; top: 12px; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }
.mp-alarm { grid-area: mp; position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(51, 225, 255, 0.18), rgba(51, 225, 255, 0.05)); border: 1px solid rgba(51, 225, 255, 0.45);
  box-shadow: 0 0 30px -8px rgba(51, 225, 255, 0.6); }
.mp-alarm img { width: 46px; height: 46px; border-radius: 50%; }
.mp-alarm b { display: block; color: var(--cyan); font-size: 15px; }
.mp-alarm small { color: var(--leise); font-size: 13px; }
.mp-alarm svg { width: 20px; height: 20px; color: var(--cyan); margin-left: 6px; }
.weiter { grid-area: weiter; position: relative; }
.weiter h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ganzleise); }
.weiter-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.weiter-karte { --h: 0; position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(90deg, hsl(var(--h) 60% 22% / 0.6), rgba(255, 255, 255, 0.03)); border: 1px solid hsl(var(--h) 70% 60% / 0.25); transition: transform .2s, border-color .2s; }
.weiter-karte:hover { transform: translateY(-2px); border-color: hsl(var(--h) 80% 65% / 0.6); }
.weiter-karte img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.wk-text b { display: block; font-size: 15px; } .wk-text small { color: var(--leise); font-size: 12.5px; }
.wk-balken { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.06); }
.wk-balken i { display: block; height: 100%; background: hsl(var(--h) 95% 62%); }

/* ── 5 Abschnitte + Reihen ── */
.reihe, .raster-teil, .beste, .such-kopf, .such-leer { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.reihe { margin-top: 64px; }
.such-kopf { padding-top: 40px; }
.such-kopf p { margin: 0; font: 400 22px var(--schau); }
.such-leer { padding: 60px var(--rand) 20px; text-align: center; color: var(--leise); font-size: 18px; }
.abschnitt-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.abschnitt-kopf h2 { margin: 0; font: 800 clamp(24px, 2.4vw, 32px)/1.1 var(--lese); letter-spacing: -0.01em; display: flex; align-items: center; gap: 12px; }
.abschnitt-kopf h2::before { content: ''; width: 6px; height: 0.9em; border-radius: 4px; background: linear-gradient(180deg, var(--pink), var(--orange)); }
.abschnitt-kopf p { margin: 6px 0 0 18px; color: var(--leise); font-size: 15px; }
.reihe-pfeile { display: flex; gap: 8px; }
.reihe-pfeile button { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linie2); background: rgba(255, 255, 255, 0.05); font-size: 22px; line-height: 1; }
.reihe-pfeile button:hover { background: rgba(255, 255, 255, 0.12); }
.reihe-band { display: grid; grid-auto-flow: column; grid-auto-columns: 340px; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px var(--rand) 24px; margin: -10px calc(-1 * var(--rand)) 0; scroll-padding: 0 var(--rand); }
.reihe-band::-webkit-scrollbar { display: none; }
.gross-karte { --h: 0; position: relative; aspect-ratio: 16 / 10; border-radius: 24px; overflow: hidden; scroll-snap-align: start; isolation: isolate;
  background: hsl(var(--h) 55% 16%); border: 1px solid hsl(var(--h) 80% 70% / 0.2);
  transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.gross-karte.kippt { transition: transform .08s linear, box-shadow .35s, border-color .35s; }
.gk-nebel { position: absolute; inset: -30%; width: 160%; height: 160%; object-fit: cover; filter: blur(42px) saturate(1.7); opacity: 0.85; z-index: -2; transform: scale(1.1); }
.gross-karte::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(8, 6, 18, 0.92) 0%, rgba(8, 6, 18, 0.55) 45%, rgba(8, 6, 18, 0) 70%); }
.gross-karte::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.22), transparent 50%); }
.gk-bild { position: absolute; right: -8%; top: 50%; width: 64%; transform: translateY(-50%) rotate(-10deg); z-index: -1;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.55)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.gk-text { position: absolute; left: 22px; bottom: 20px; right: 40%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.gk-text b { font: 400 22px/1.05 var(--schau); text-transform: uppercase; margin-top: 6px; }
.gk-text small { color: #d6d0ee; font-size: 14px; }
.gk-play { position: absolute; left: 22px; top: 20px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(10, 8, 22, 0.55); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, transform .25s; }
.gk-play svg { width: 16px; height: 16px; fill: #fff; stroke: none; margin-left: 2px; }
.gross-karte:hover { border-color: hsl(var(--h) 90% 70% / 0.6); box-shadow: 0 24px 60px -18px hsl(var(--h) 90% 50% / 0.65); }
.gross-karte:hover::after { opacity: 1; }
.gross-karte:hover .gk-bild { transform: translateY(-52%) rotate(-4deg) scale(1.08); }
.gross-karte:hover .gk-play { background: hsl(var(--h) 95% 62%); transform: scale(1.08); }
.top-band { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.top-platz { --h: 0; position: relative; display: flex; align-items: flex-end; min-height: 230px; padding-left: 84px; }
.top-zahl { position: absolute; left: -10px; bottom: -22px; font: 400 210px/1 var(--schau); color: transparent; -webkit-text-stroke: 2px hsl(var(--h) 90% 66% / 0.85);
  text-shadow: 0 0 40px hsl(var(--h) 90% 50% / 0.35); z-index: 0; letter-spacing: -0.06em; }
.top-karte { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 12px 16px; border-radius: 22px;
  background: linear-gradient(180deg, hsl(var(--h) 50% 20% / 0.92), rgba(15, 13, 30, 0.96)); border: 1px solid hsl(var(--h) 80% 65% / 0.25);
  transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; box-shadow: -12px 0 30px -10px rgba(0, 0, 0, 0.6); }
.top-karte.kippt { transition: transform .08s linear, box-shadow .35s; }
.top-karte img { width: 92px; height: 92px; margin-bottom: 10px; filter: drop-shadow(0 10px 18px hsl(var(--h) 90% 30% / 0.7)); transition: transform .35s; }
.top-karte b { font-size: 16px; } .top-karte small { color: var(--leise); font-size: 12.5px; }
.top-platz:hover .top-karte { box-shadow: 0 20px 50px -16px hsl(var(--h) 90% 50% / 0.7); }
.top-platz:hover .top-karte img { transform: translateY(-6px) scale(1.06); }

/* ── 6 Raster + Kacheln ── */
.raster-teil { margin-top: 72px; }
.chips { position: sticky; top: var(--leiste-h); z-index: 20; display: flex; gap: 8px; padding: 12px var(--rand); margin: 0 calc(-1 * var(--rand)) 10px;
  overflow-x: auto; scrollbar-width: none; background: linear-gradient(180deg, rgba(7, 6, 15, 0.92) 70%, rgba(7, 6, 15, 0)); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linie2);
  background: rgba(255, 255, 255, 0.05); font-weight: 700; font-size: 14px; color: var(--leise); transition: background .2s, color .2s, border-color .2s; }
.chip:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.28); }
.chip[aria-pressed="true"] { background: var(--text); color: #120e22; border-color: var(--text); }
.chip-zahl { font: 600 11px var(--mono); padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); }
.chip[aria-pressed="true"] .chip-zahl { background: rgba(18, 14, 34, 0.12); }
/* .gruppe { margin-top: 18px; }   bis 01.11.: Arcade/Klassiker nur per 15-px-Untertitel getrennt — las sich als eine Liste (Micha)
.gruppe-titel { display: flex; align-items: center; gap: 16px; margin: 18px 0 16px; font: 400 15px var(--schau); letter-spacing: 0.16em; } */
/* Arcade und Klassiker = zwei sichtbare Bänder: eigener Hintergrund-Ton (Arcade kühl, Klassiker warm), Titel in Größe der Abschnittsköpfe,
   48 px Abstand (Handy 32 px unten im Medienblock). Filter/Suche blenden ein leeres Band per [hidden] aus (start/js/main.js filtern()). */
.gruppe { margin-top: 48px; padding: 24px; border-radius: 22px; border: 1px solid var(--linie); }
.gruppe:first-child { margin-top: 18px; }
/* Tönung allein ging auf dem bunten Hintergrundbild unter (gemessen 01.11.) → dunkle Fläche + farbige Oberkante je Gruppe */
.gruppe[data-kat="arcade"] { background: linear-gradient(180deg, rgba(40, 20, 60, 0.82), rgba(12, 10, 26, 0.78)); border-top: 3px solid #ff3d8b; }
.gruppe[data-kat="klassiker"] { background: linear-gradient(180deg, rgba(50, 34, 14, 0.82), rgba(12, 10, 26, 0.78)); border-top: 3px solid var(--gold); }
.gruppe-titel { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; font: 400 clamp(24px, 2.4vw, 32px)/1.1 var(--schau); letter-spacing: 0.12em; }
.gruppe[data-kat="arcade"] .gruppe-titel span { color: #ff7ab0; text-shadow: 0 0 18px rgba(255, 61, 139, 0.6); }
.gruppe[data-kat="klassiker"] .gruppe-titel span { color: var(--gold); text-shadow: 0 0 18px rgba(255, 207, 90, 0.5); }
.gruppe-titel i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--linie2), transparent); }
.gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.kachel { --h: 260; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 12px 18px; border-radius: 22px;
  background: radial-gradient(90% 60% at 50% 28%, hsl(var(--h) 85% 50% / 0.30), transparent 70%), linear-gradient(180deg, #17142d, #0e0c1c);
  border: 1px solid var(--linie); isolation: isolate; transform: perspective(700px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0));
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; transform-style: preserve-3d; }
.kachel.kippt { transition: transform .08s linear, border-color .3s, box-shadow .3s; }
.kachel-glanz { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 2;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.2), transparent 48%); }
.kachel-buehne { width: 64%; aspect-ratio: 1; margin: 6px 0 12px; transform: translateZ(30px); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.kachel-buehne img { width: 100%; height: 100%; border-radius: 50%; filter: drop-shadow(0 12px 18px hsl(var(--h) 85% 25% / 0.75)); }
.kachel-name { font-weight: 800; font-size: 15px; line-height: 1.2; transform: translateZ(18px); }
.kachel-sub { font-size: 13px; color: var(--leise); margin-top: 3px; transition: opacity .25s, transform .25s; }
.kachel-mehr { position: absolute; left: 10px; right: 10px; bottom: 14px; display: flex; justify-content: center; gap: 8px; opacity: 0; transform: translateY(8px);
  transition: opacity .25s, transform .25s; pointer-events: none; }
.km-play, .km-rekord { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.km-play { background: hsl(var(--h) 95% 64%); color: #120914; }
.km-play svg { width: 11px; height: 11px; fill: currentColor; stroke: none; }
.km-rekord { background: rgba(0, 0, 0, 0.4); color: var(--gold); font-family: var(--mono); font-weight: 500; }
.km-rekord svg { width: 12px; height: 12px; }
a.kachel:hover { border-color: hsl(var(--h) 90% 66% / 0.65); box-shadow: 0 22px 50px -18px hsl(var(--h) 90% 50% / 0.75), inset 0 0 0 1px hsl(var(--h) 90% 66% / 0.2); }
a.kachel:hover .kachel-glanz { opacity: 1; }
a.kachel:hover .kachel-buehne { transform: translateZ(50px) translateY(-6px) scale(1.07) rotate(-3deg); }
a.kachel:hover .kachel-sub { opacity: 0; transform: translateY(-4px); }
a.kachel:hover .kachel-mehr { opacity: 1; transform: none; }
a.kachel:active { transform: scale(0.97); }
.marken { position: absolute; left: 10px; top: 10px; z-index: 3; }
.marken-re { position: absolute; right: 10px; top: 10px; z-index: 3; display: flex; gap: 5px; }
.marke-chip { display: inline-block; padding: 4px 8px; border-radius: 8px; font: 800 10.5px/1 var(--lese); letter-spacing: 0.1em; text-transform: uppercase; }
.m-neu { background: linear-gradient(135deg, var(--pink), #ff6a5b); color: #fff; box-shadow: 0 4px 14px -4px rgba(255, 61, 139, 0.8); }
.m-update { background: linear-gradient(135deg, var(--mint), #2fd6ff); color: #04261b; box-shadow: 0 4px 14px -4px rgba(61, 255, 176, 0.7); }
.m-bald { background: rgba(255, 255, 255, 0.12); color: var(--leise); }
.m-wartung { background: rgba(255, 176, 60, 0.22); color: #ffc46b; }   /* gesperrt wegen Überarbeitung (Tower Defense 11/2026) */
.zeichen { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 8px; background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--linie2); color: #d8d3f5; font: 800 10.5px/1 var(--lese); }
.zeichen svg { width: 13px; height: 13px; }
.zeichen-multi { color: var(--orange); }
.kachel.bald { filter: grayscale(0.85); opacity: 0.5; cursor: default; }
.kachel.mehr { justify-content: center; border: 1.5px dashed var(--linie2); background: transparent; color: var(--ganzleise); }
.mehr-plus { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 50%; border: 1.5px dashed var(--linie2); font-size: 30px; font-weight: 300; }

/* ── 7 Bestenliste + Live ── */
.beste { margin-top: 88px; }
.beste-gitter { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; }
.beste-tafel { --h: 30; position: relative; padding: 22px; border-radius: 26px; overflow: hidden; border: 1px solid var(--linie2);
  background: radial-gradient(80% 60% at 100% 0%, hsl(var(--h) 85% 45% / 0.25), transparent 70%), linear-gradient(180deg, #15122a, #0e0c1c); transition: background .4s; }
.beste-reiter { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.beste-reiter button { --h: 0; flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; border: 1px solid var(--linie);
  background: rgba(255, 255, 255, 0.04); color: var(--leise); font-weight: 700; font-size: 13px; }
.beste-reiter img { width: 28px; height: 28px; border-radius: 50%; }
.beste-reiter button[aria-pressed="true"] { color: var(--text); border-color: hsl(var(--h) 90% 65% / 0.6); background: hsl(var(--h) 70% 35% / 0.35); }
.beste-spiel { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 8px; border-bottom: 1px solid var(--linie); }
.beste-spiel img { width: 56px; height: 56px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5)); }
.beste-spiel div { flex: 1; } .beste-spiel b { display: block; font: 400 20px var(--schau); } .beste-spiel small { color: var(--leise); }
.beste-liste { list-style: none; margin: 0; padding: 0; }
.beste-liste li { display: grid; grid-template-columns: 40px 34px 1fr auto; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 14px; }
.beste-liste li:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.beste-liste.rein li { animation: rein .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); }
.bl-rang { font: 400 18px var(--schau); color: var(--ganzleise); text-align: center; }
.platz-1 .bl-rang { color: var(--gold); text-shadow: 0 0 14px rgba(255, 207, 90, 0.7); }
.platz-2 .bl-rang { color: #d7dbe8; } .platz-3 .bl-rang { color: #e3a26b; }
.platz-1 { background: linear-gradient(90deg, rgba(255, 207, 90, 0.14), transparent) !important; }
.bl-name { font-weight: 700; }
.bl-wert { font: 500 16px var(--mono); color: var(--text); }
.beste-live { display: flex; flex-direction: column; gap: 18px; }
.zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.zahl { padding: 18px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--linie); }
.zahl b { display: block; font: 400 clamp(22px, 2.2vw, 32px)/1.1 var(--schau); background: linear-gradient(90deg, #fff, #ffc1d9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zahl:nth-child(2) b { background-image: linear-gradient(90deg, #fff, #a6f3ff); }
.zahl:nth-child(3) b { background-image: linear-gradient(90deg, #fff, #ffe39a); }
.zahl span { font-size: 13px; color: var(--leise); font-weight: 600; }
.ticker { flex: 1; padding: 18px 18px 8px; border-radius: 24px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--linie); }
.ticker h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--leise); }
.live-punkt { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255, 77, 77, 0.7); animation: puls-rot 1.6s infinite; }
@keyframes puls-rot { 70% { box-shadow: 0 0 0 9px rgba(255, 77, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 77, 0); } }
.ticker ol { list-style: none; margin: 0; padding: 0; }
.ticker li { --h: 0; display: grid; grid-template-columns: 32px 1fr 30px; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--linie); }
.ticker li:last-child { border-bottom: 0; }
.ticker .avatar { grid-row: span 2; }
.tk-text { font-size: 14px; color: var(--leise); line-height: 1.35; } .tk-text b { color: var(--text); }
.ticker img { grid-row: span 2; grid-column: 3; width: 30px; height: 30px; }
.ticker small { grid-column: 2; font-size: 12px; color: var(--ganzleise); }
.ticker li.frisch { animation: tick-rein .6s cubic-bezier(.2, .8, .2, 1) both; }
.ticker li.frisch small { color: hsl(var(--h) 90% 70%); }
@keyframes tick-rein { from { opacity: 0; transform: translateY(-14px); background: hsl(var(--h) 80% 50% / 0.18); } to { opacity: 1; transform: none; background: transparent; } }

/* ── 8 Werkstatt (Tools) — eigene Welt: Blaupause, Mono, Cyan ── */
.werkstatt { position: relative; margin-top: 96px; padding: 72px 0 80px; overflow: hidden;
  background:
    linear-gradient(rgba(51, 225, 255, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(51, 225, 255, 0.055) 1px, transparent 1px) 0 0 / 32px 32px,
    radial-gradient(60% 80% at 80% 0%, rgba(51, 225, 255, 0.14), transparent 70%),
    linear-gradient(180deg, #041419, #061a20 60%, #05141a);
  border-top: 1px solid rgba(51, 225, 255, 0.35); border-bottom: 1px solid rgba(51, 225, 255, 0.2); }
.werkstatt::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--cyan), transparent); box-shadow: 0 0 24px 2px rgba(51, 225, 255, 0.6); }
.werkstatt-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.werkstatt-kopf { margin-bottom: 26px; }
.prompt { margin: 0 0 8px; font: 500 14px var(--mono); color: var(--cyan); }
.prompt > span:first-child { color: var(--mint); }
.cursor { display: inline-block; width: 9px; height: 16px; margin-left: 4px; vertical-align: -3px; background: var(--cyan); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.werkstatt h2 { margin: 0; font: 700 clamp(30px, 3.4vw, 46px)/1.1 var(--mono); letter-spacing: -0.02em; color: #e8fbff; text-shadow: 0 0 30px rgba(51, 225, 255, 0.35); }
.werkstatt-kopf > p:last-child { margin: 10px 0 0; max-width: 640px; color: #8fb6bf; font-size: 15px; }
.werkstatt-steuer { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(51, 225, 255, 0.18); }
.reiter { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.reiter::-webkit-scrollbar { display: none; }
.reiter button { flex: none; padding: 12px 14px; border: 0; background: none; font: 500 13.5px var(--mono); color: #7fa4ad; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter button:hover { color: #d9f8ff; }
.reiter button[aria-pressed="true"] { color: var(--cyan); border-bottom-color: var(--cyan); text-shadow: 0 0 12px rgba(51, 225, 255, 0.6); }
.ansicht { display: flex; flex: none; padding: 3px; border-radius: 10px; border: 1px solid rgba(51, 225, 255, 0.25); margin-bottom: 8px; }
.ansicht button { padding: 6px 12px; border: 0; border-radius: 7px; background: none; font: 500 12.5px var(--mono); color: #7fa4ad; }
.ansicht button.an { background: rgba(51, 225, 255, 0.16); color: var(--cyan); }
.tool-feld { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.tool { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 14px; overflow: hidden;
  background: rgba(3, 20, 26, 0.72); border: 1px solid rgba(51, 225, 255, 0.14); transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.tool::after { content: ''; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(51, 225, 255, 0.12), transparent); transition: transform .6s; }
a.tool:hover { border-color: rgba(51, 225, 255, 0.6); background: rgba(6, 34, 42, 0.9); transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(51, 225, 255, 0.45); }
a.tool:hover::after { transform: translateX(100%); }
/* Tool-Icon in eigener Form (29.10.2026, Micha): ganz eingepasst statt auf das Feld zugeschnitten — die Icons sind
   zwischen 1:1 und 1,7:1 breit, `cover` schnitt die breiten ab. Kein Kasten dahinter, damit die Form selbst wirkt.
   Gegenstück Liste: .als-liste .tool-bild (nur kleineres Feld). Sollen alle einheitlich werden: Icons neu, nicht wieder `cover`.
(vorher) .tool-bild { flex: none; width: 64px; height: 60px; border-radius: 10px; overflow: hidden; background: #021015; border: 1px solid rgba(51, 225, 255, 0.15); }
(vorher) .tool-bild img { width: 100%; height: 100%; object-fit: cover; } */
.tool-bild { flex: none; width: 64px; height: 60px; display: grid; place-items: center; }
.tool-bild img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 8px rgba(51, 225, 255, 0.22)); }
.tool-text { flex: 1; min-width: 0; }
.tool-text b { display: block; font: 700 14px/1.35 var(--mono); color: #e6fbff; }
.tool-text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: 13px; line-height: 1.4; color: #86a9b2; }
.tool-marke { display: inline-block; margin-left: 8px; vertical-align: 1px; padding: 2px 6px; border-radius: 5px; font: 700 10px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.tool-marke.m-neu { background: var(--mint); color: #022418; box-shadow: none; }
.tool-marke.m-bald { background: rgba(255, 255, 255, 0.1); color: #86a9b2; }
.tool-los { flex: none; display: flex; align-items: center; gap: 6px; font: 500 12px var(--mono); color: var(--cyan); opacity: 0; transform: translateX(-6px); transition: opacity .2s, transform .2s; }
.tool-los svg { width: 15px; height: 15px; }
a.tool:hover .tool-los { opacity: 1; transform: none; }
.tool.bald { opacity: 0.45; }
.tool-feld.als-liste { grid-template-columns: 1fr; gap: 0; border: 1px solid rgba(51, 225, 255, 0.14); border-radius: 14px; overflow: hidden; }
.als-liste .tool { border-radius: 0; border: 0; border-bottom: 1px solid rgba(51, 225, 255, 0.1); padding: 8px 14px; background: rgba(3, 20, 26, 0.5); }
.als-liste a.tool:hover { transform: none; }
/* (vorher) .als-liste .tool-bild { width: 34px; height: 32px; border-radius: 7px; } */
.als-liste .tool-bild { width: 34px; height: 32px; }
.als-liste .tool-text { display: grid; grid-template-columns: minmax(190px, 260px) 1fr; align-items: center; gap: 16px; }
.als-liste .tool-text small { -webkit-line-clamp: 1; margin: 0; }
.als-liste .tool-los { opacity: 1; transform: none; }

/* ── 8b Lifehacks, Tipps und Tricks (02.11.2026, Micha: Neon-Laufband; Neo todo-web #73) ──
 * Eigene Welt nach der Werkstatt: warmes Neon (Gold → Orange → Pink → Lila) statt Cyan. Kategorien als Leuchtschilder, die
 * versetzt kurz flackern; darunter zwei Reihen Karten, die gegeneinander laufen (Endlos-Trick und Kulissen-Hälfte: main.js
 * tippsBauen). Halt bei Maus oder Tastaturfokus; bei „Bewegung reduzieren“/body.still steht das Band und lässt sich wischen.
 * FARBE je Kategorie: --f über [data-kat] unten — neue Kategorie in daten/tipps-kategorien.php braucht hier eine Zeile (sonst Cyan), ebenso tipps/css/tipps.css.
 * TEMPO: Laufzeit fest (.lh-band 80 s / .lh-rueck 95 s) für 12 Karten je Reihe (TIPPS_JE_REIHE in main.js) — beides zusammen ändern. */
.lifehacks { position: relative; padding: 64px 0 70px; overflow: hidden; isolation: isolate;
  background: radial-gradient(50% 70% at 12% 0%, rgba(255, 159, 67, 0.13), transparent 70%),
              radial-gradient(50% 70% at 92% 100%, rgba(139, 92, 255, 0.16), transparent 70%), #0a0716; }
.lifehacks::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--orange), var(--pink), transparent); box-shadow: 0 0 24px 2px rgba(255, 61, 139, 0.5); }
.lh-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }
.lh-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.lh-kopf h2 { margin: 0; font: 400 clamp(26px, 3.2vw, 42px)/1.08 var(--schau); color: var(--gold);
  background: linear-gradient(90deg, var(--gold), var(--orange) 30%, var(--pink) 62%, var(--lila)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 18px rgba(255, 159, 67, 0.35)); }
.lh-kopf p { margin: 8px 0 0; color: var(--leise); max-width: 640px; }
.lh-alle { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(255, 207, 90, 0.5);
  color: var(--gold); font: 600 14px var(--lese); white-space: nowrap; transition: background .2s, box-shadow .2s; }
.lh-alle:hover, .lh-alle:focus-visible { background: rgba(255, 207, 90, 0.12); box-shadow: 0 0 18px -4px var(--gold); }
/* Farben je Kategorie (gilt für Schild und Karte) */
.lifehacks [data-kat] { --f: var(--cyan); }
.lifehacks [data-kat="spielideen"] { --f: var(--pink); }
.lifehacks [data-kat="technik"] { --f: var(--cyan); }
.lifehacks [data-kat="kueche"] { --f: var(--orange); }
.lifehacks [data-kat="haushalt"] { --f: var(--mint); }
.lifehacks [data-kat="draussen"] { --f: #7dff6a; }
.lifehacks [data-kat="auto"] { --f: var(--gold); }
.lifehacks [data-kat="werkzeug"] { --f: #ff6b4a; }
.lifehacks [data-kat="alltag"] { --f: var(--lila); }
.lifehacks [data-kat="garten"] { --f: #9be15d; }
.lifehacks [data-kat="haustiere"] { --f: #ff9ad5; }
.lifehacks [data-kat="gesundheit"] { --f: #7ab8ff; }
/* Leuchtschilder */
.lh-schilder { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.lh-schild { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--f);
  color: var(--f); font: 600 14px var(--lese); text-shadow: 0 0 10px var(--f);
  box-shadow: 0 0 12px -2px var(--f), inset 0 0 12px -4px var(--f); transition: background .2s, color .2s;
  animation: lh-flackern 8s infinite; }
.lh-schild:nth-child(3n+2) { animation-delay: 2.7s; } .lh-schild:nth-child(3n) { animation-delay: 5.3s; }
.lh-schild:nth-child(4n+1) { animation-duration: 9.5s; }
.lh-schild:hover, .lh-schild:focus-visible { background: var(--f); color: #0a0716; text-shadow: none; animation: none; }
.lh-schild-icon { font-size: 16px; line-height: 1; text-shadow: none; }
.lh-schild-icon img { display: block; width: 18px; height: 18px; border-radius: 5px; }   /* Neon-Symbol statt Emoji (main.js zeichen) */
.lh-icon img { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
@keyframes lh-flackern { 0%, 91%, 100% { opacity: 1; } 92% { opacity: 0.35; } 93% { opacity: 1; } 94.5% { opacity: 0.5; } 95.5% { opacity: 1; } }
/* Laufband */
.lh-bahn { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.lh-band { display: flex; gap: 16px; width: max-content; padding: 10px 8px; animation: lh-laufen 80s linear infinite; }
.lh-rueck { animation-direction: reverse; animation-duration: 95s; }
.lh-bahn:hover .lh-band, .lh-bahn:focus-within .lh-band { animation-play-state: paused; }
@keyframes lh-laufen { to { transform: translateX(-50%); } }
.lh-karte { position: relative; flex: none; width: 280px; min-width: 0; border-radius: 18px; overflow: hidden; color: var(--text);
  background: linear-gradient(135deg, color-mix(in srgb, var(--f) 16%, #120e24), #0f0c1f 70%); border: 1px solid color-mix(in srgb, var(--f) 40%, transparent);
  transition: transform .25s, box-shadow .25s; }
.lh-karte:hover, .lh-karte:focus-visible { transform: translateY(-6px) scale(1.03); box-shadow: 0 18px 40px -14px var(--f), 0 0 0 1px var(--f); }
.lh-bild { position: relative; display: block; height: 150px; }
.lh-bild img { width: 100%; height: 100%; object-fit: cover; }
.lh-bild::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #0f0c1f); }
.lh-icon { position: absolute; left: 12px; top: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 22px;
  background: rgba(10, 7, 22, 0.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 0 0 1px var(--f), 0 0 14px -2px var(--f); }
.lh-text { display: block; height: 96px; padding: 10px 16px 16px; }
.lh-kat { display: block; font: 700 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--f); }
.lh-titel { display: -webkit-box; margin-top: 4px; font: 600 15.5px/1.3 var(--lese); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Stillstand (Systemeinstellung oder body.still): kein Lauf, kein Flackern — Reihen lassen sich seitlich wischen */
body.still .lh-band, body.still .lh-schild { animation: none; }
body.still .lh-bahn { overflow-x: auto; scrollbar-width: none; }
@media (max-width: 760px) {
  .lifehacks { padding: 48px 0 52px; }
  .lh-kopf { flex-direction: column; align-items: flex-start; gap: 14px; }
  .lh-schilder { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--rand)) 20px; padding: 4px var(--rand) 8px; }
  .lh-schild { flex: none; font-size: 13.5px; }
  .lh-karte { width: 240px; }
  .lh-bild { height: 128px; }
}

/* ── 9 Spenden-Band + Fuß ── */
.band { position: relative; width: min(calc(100% - 2 * var(--rand)), calc(var(--breite) - 2 * var(--rand))); margin: 88px auto 0; display: flex; align-items: center; gap: 26px; padding: 34px 40px; border-radius: 30px; overflow: hidden;
  background: linear-gradient(120deg, #ff3d8b, #ff7a59 45%, #8b5cff); background-size: 200% 200%; animation: band-fliessen 14s ease-in-out infinite alternate; box-shadow: 0 30px 80px -30px rgba(255, 61, 139, 0.7); }
@keyframes band-fliessen { to { background-position: 100% 50%; } }
.band::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1.4px) 0 0 / 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.band-herz { flex: none; display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); font-size: 38px; color: #fff; animation: herzschlag 2.4s ease-in-out infinite; }
@keyframes herzschlag { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.14); } 20% { transform: scale(0.98); } 30% { transform: scale(1.08); } }
.band-text { flex: 1; position: relative; z-index: 1; }
.band-text h2 { margin: 0 0 6px; font: 800 clamp(20px, 2.1vw, 28px)/1.2 var(--lese); color: #fff; }
.band-text p { margin: 0; color: rgba(255, 255, 255, 0.88); max-width: 620px; }
.band .knopf { position: relative; z-index: 1; }
.fuss { max-width: var(--breite); margin: 70px auto 0; padding: 36px var(--rand) 40px; border-top: 1px solid var(--linie); color: var(--ganzleise); font-size: 13.5px; }
.fuss-oben { display: flex; gap: 40px; align-items: flex-start; }
.fuss-oben .marke-wort { font-size: 18px; color: var(--text); }
.fuss-info { margin: 0; max-width: 760px; line-height: 1.6; }
.fuss-hinweis { margin: 22px 0; }
.fuss-hinweis summary { cursor: pointer; color: var(--leise); font-weight: 600; width: max-content; }
.fuss-hinweis p { margin: 8px 0 0; max-width: 760px; }
.fuss-unten { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.fuss-links { display: flex; gap: 22px; flex-wrap: wrap; }
.fuss-links a { color: var(--leise); font-weight: 600; } .fuss-links a:hover { color: var(--text); }
/* „Fehler melden“ (Knopf, öffnet das Bug-Report-Fenster) wie die Fußlinks — Zwilling: _rahmen/rahmen.css .fuss-fehler */
.fuss-fehler { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: 600 13.5px/1.5 var(--lese); color: var(--leise); cursor: pointer; }
.fuss-fehler:hover { color: var(--text); }
.fuss-fehler .kaefer { width: 46px; height: auto; margin: -8px 0; }
@media (prefers-reduced-motion: no-preference) { .fuss-fehler:hover .kaefer, .fuss-fehler:focus-visible .kaefer { animation: kaefer-wackeln .5s ease-in-out 2; } }
@keyframes kaefer-wackeln { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) translateY(-2px); } 75% { transform: rotate(10deg) translateY(-1px); } }
.nach-oben { position: fixed; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--linie2);
  background: rgba(20, 17, 40, 0.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: 20px; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s, transform .3s; }
.nach-oben.da { opacity: 1; transform: none; pointer-events: auto; }

/* Suche aktiv: Reihen/Band weg, Ergebnisse nach oben */
body.sucht .nur-ohne-suche { display: none; }
/* Pause-Knopf oder reduzierte Bewegung: CSS-Dauerbewegungen ebenfalls aus */
body.still .kicker-punkt, body.still .live-punkt, body.still .cursor, body.still .band, body.still .band-herz { animation: none; }
body.sucht .raster-teil { margin-top: 24px; }
body.sucht #spiele > .abschnitt-kopf { display: none; }
body.sucht .werkstatt { margin-top: 40px; }

/* ── 10 Tablet / Handy ── */
@media (max-width: 1100px) {
  :root { --rand: 24px; }
  .leiste-nav { display: none; }
  .herz-text { display: none; }
  .herz { width: 44px; padding: 0; justify-content: center; }
  /* (vorher) .held-claims { display: none; }  — Hero-Slogan aus seit 29.10.2026 */
  .top-band { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 240px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; scroll-snap-type: x mandatory; }
  .top-platz { scroll-snap-align: start; }
  .beste-gitter { grid-template-columns: 1fr; }
  /* (vorher) .konto-band.ich { grid-template-columns: 1fr auto; grid-template-areas: 'ich mp' 'zahlen zahlen' 'weiter weiter'; } */
  .konto-band.ich { grid-template-columns: 1fr auto; grid-template-areas: 'slogan slogan' 'ich mp' 'zahlen zahlen' 'weiter weiter'; }
  .weiter-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  :root { --rand: 16px; --leiste-h: 60px; }
  body { font-size: 15px; }
  .leiste { gap: 10px; }
  .marke-wort { font-size: 18px; }
  .nur-handy { display: inline-grid; }
  .suche { display: none; position: absolute; left: var(--rand); right: var(--rand); top: calc(var(--leiste-h) + 6px); max-width: none; margin: 0; }
  .leiste.suche-offen .suche { display: block; }
  .leiste.suche-offen { background: rgba(11, 9, 24, 0.94); }
  .suche input { height: 48px; font-size: 16px; background: rgba(20, 17, 40, 0.96); }
  .suche-taste { display: none; }
  .leiste-rechts { margin-left: auto; gap: 8px; }
  .rund-knopf { width: 40px; height: 40px; }
  .herz { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .herz-text { display: none; }
  .marke-logo { width: 34px; height: 34px; }
  .chips, .reiter, .beste-reiter { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .sprache a { padding: 6px 8px; }
  .knopf-login { height: 40px; padding: 0 16px; font-size: 14px; }
  .kk-name { display: none; }
  .konto-knopf { height: 42px; padding: 0 4px; gap: 6px; }
  .kk-level { min-width: 26px; height: 26px; font-size: 11px; }
  .konto-menue { position: fixed; left: 12px; right: 12px; top: calc(var(--leiste-h) + 6px); width: auto; }

  .gruppe { margin-top: 32px; padding: 16px 12px; }
  .gruppe:first-child { margin-top: 14px; }
  .gruppe-titel { font-size: 22px; margin-bottom: 14px; }
  .konto-band { border-radius: 22px; }
  .konto-band.gast { flex-direction: column; align-items: stretch; padding: 20px; gap: 16px; }
  .konto-band:not(.gast):not(.ich) { padding: 20px; }
  .slogan { font-size: clamp(22px, 7vw, 30px); margin-bottom: 10px; }
  .slogan-punkte { gap: 6px 14px; }
  .slogan-punkte li { font-size: 13px; }
  .konto-band.gast .gast-text { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--linie2); }
  .gast-text h2 { font-size: 19px; }
  .gast-punkte { gap: 8px 14px; font-size: 13px; }
  .gast-knoepfe .knopf { flex: 1; height: 48px; padding: 0 14px; }
  /* (vorher) .konto-band.ich { grid-template-columns: 1fr; grid-template-areas: 'ich' 'mp' 'zahlen' 'weiter'; padding: 20px 16px; gap: 16px; } */
  .konto-band.ich { grid-template-columns: 1fr; grid-template-areas: 'slogan' 'ich' 'mp' 'zahlen' 'weiter'; padding: 20px 16px; gap: 16px; }
  .konto-band.ich .slogan-teil { padding-bottom: 14px; }
  .ich-avatar, .xp-ring { width: 72px; height: 72px; }
  .ich-text h2 { font-size: 22px; }
  .xp-balken { width: 110px; }
  .konto-zahlen { grid-template-columns: repeat(2, 1fr); }
  .weiter-band { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; }
  .weiter-karte { scroll-snap-align: start; }

  .reihe { margin-top: 44px; }
  .reihe-pfeile { display: none; }
  .abschnitt-kopf { margin-bottom: 14px; }
  .abschnitt-kopf p { font-size: 14px; }
  .reihe-band { grid-auto-columns: 82%; gap: 12px; }
  .gk-text b { font-size: 20px; }
  .top-band { grid-auto-columns: 200px; gap: 10px; }
  .top-platz { min-height: 196px; padding-left: 52px; }
  .top-zahl { font-size: 150px; }
  .top-karte img { width: 80px; height: 80px; }
  .raster-teil { margin-top: 52px; }
  .chips { padding-top: 10px; padding-bottom: 10px; }
  .chip { height: 36px; padding: 0 13px; font-size: 13px; }
  .gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .kachel { min-height: 0; padding: 12px 6px 12px; border-radius: 18px; }
  .kachel-buehne { width: 70%; margin: 10px 0 8px; }
  .kachel-name { font-size: 12.5px; }
  .kachel-sub { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .kachel-mehr { display: none; }
  .marken { left: 6px; top: 6px; } .marken-re { right: 6px; top: 6px; gap: 3px; }
  .marke-chip { padding: 3px 5px; font-size: 8.5px; border-radius: 6px; letter-spacing: 0.06em; }
  .zeichen { min-width: 19px; height: 19px; padding: 0 3px; border-radius: 6px; font-size: 9px; }
  .zeichen svg { width: 11px; height: 11px; }
  .mehr-plus { width: 48px; height: 48px; font-size: 24px; }
  .beste { margin-top: 60px; }
  .beste-tafel { padding: 16px; }
  .beste-liste li { grid-template-columns: 30px 32px 1fr auto; gap: 10px; padding: 10px 6px; }
  .zahlen { gap: 8px; }
  .zahl { padding: 12px 10px; border-radius: 16px; }
  .zahl b { font-size: 19px; }
  .zahl span { font-size: 11.5px; line-height: 1.25; display: block; margin-top: 2px; }
  .werkstatt { margin-top: 64px; padding: 48px 0 56px; }
  .werkstatt-steuer { flex-direction: column; align-items: stretch; gap: 6px; }
  .ansicht { align-self: flex-end; order: -1; margin: 0; }
  .tool-feld { grid-template-columns: 1fr; gap: 8px; }
  .tool-bild { width: 56px; height: 52px; }
  .tool-los { display: none; }
  .als-liste .tool-text { grid-template-columns: 1fr; gap: 0; }
  .band { margin: 60px auto 0; flex-direction: column; text-align: center; padding: 30px 22px; gap: 16px; }
  .band .knopf { width: 100%; }
  .fuss-oben { flex-direction: column; gap: 16px; }
  .nach-oben { right: 14px; bottom: 14px; width: 46px; height: 46px; }
}
@media (max-width: 420px) {
  .leiste .sprache { display: none; }
}

@media (max-width: 760px), (orientation: portrait) and (max-width: 1100px) {
  /* (vorher) height: max(680px, 100svh) — Konto-Band steht seit 29.10.2026 darüber */
  .held { height: max(600px, 82svh); }
  /* (vorher) padding-bottom: 116px — Platz für die Auswahlleiste, aus seit 29.10.2026 */
  .held-inhalt { justify-content: flex-end; padding-bottom: 40px; }
  .held-text { max-width: 640px; }
  /* (vorher, Hero-Slogan oben mittig — aus seit 29.10.2026)
  .held-claims { display: block; top: calc(var(--leiste-h) + 14px); bottom: auto; left: var(--rand); right: var(--rand); text-align: center; pointer-events: none; }
  .held-claims ul { display: none; }
  .claim-satz { font-size: 12.5px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.75); } */
  .held-vorhang { background: linear-gradient(0deg, var(--bg) 0%, rgba(7, 6, 15, 0.92) 30%, rgba(7, 6, 15, 0.35) 52%, rgba(7, 6, 15, 0) 66%),
                              linear-gradient(180deg, var(--bg) 0%, rgba(7, 6, 15, 0) 12%); }
  .held-himmel { background:
    radial-gradient(90% 50% at 50% 30%, hsl(var(--held-h) 90% 45% / 0.55), transparent 70%),
    radial-gradient(60% 40% at 100% 0%, hsl(calc(var(--held-h) + 60) 90% 50% / 0.3), transparent 70%),
    linear-gradient(180deg, #0b0918, var(--bg)); }
  .held-kicker { font-size: 11.5px; margin-bottom: 12px; padding: 6px 12px 6px 10px; }
  .held-titel { font-size: clamp(40px, 10vw, 96px); }
  .held-satz { margin: 12px 0 14px; font-size: 15.5px; }
  .held-meta { gap: 6px; margin-bottom: 18px; }
  .held-meta span { font-size: 12px; padding: 5px 10px; }
  .held-meta span:nth-child(n+4) { display: none; }
  .held-knoepfe { flex-wrap: nowrap; }
  .held-knoepfe .knopf { height: 52px; padding: 0 20px; font-size: 16px; flex: 1; }
  /* (vorher, Münzen über die volle Breite — bis 29.10.2026)
  .held-wahl { left: var(--rand); right: var(--rand); bottom: 34px; justify-content: space-between; gap: 6px; }
  .held-wahl button { padding: 4px; flex: 1; justify-content: center; border-radius: 16px; }
  .held-wahl img { width: 44px; height: 44px; }
  .wahl-name { white-space: nowrap; font-size: 12px; } */

}
@media (max-width: 760px) {
  /* (vorher) .wahl-name { display: none; } */
  .held-titel { font-size: clamp(40px, 12.5vw, 58px); }
}
/* ── 11 Bewegung reduziert ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .kachel, .gross-karte, .top-karte { transform: none !important; }
}

/* Erster Versuch 27.10. (Lichtspuren, Micha: „gääähn“) — ersetzt durch die Spielwelt unten:
/* ── Hintergrundbild links im Kopfbereich (Desktop; Micha 27.10.: „links fehlt ein schicker Hintergrund“) ──
 * Lichtspuren aus _rahmen/hg/dunkel.webp (SwarmUI, FLUX.2 klein 4B, 27.10.2026; Rohbild: Zwischenstand gelöscht),
 * nach rechts ausgeblendet, damit die Icon-Bühne frei bleibt. Am Handy bleibt es wie es ist (Micha: dort prima). * /
@media (min-width: 900px) {
  .held-himmel::before { content: ''; position: absolute; inset: 0; z-index: 0;
    background: url('../../_rahmen/hg/dunkel.webp') left center / cover no-repeat; opacity: 0.9;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 70%); }
  .held-vorhang { background: linear-gradient(90deg, rgba(7, 6, 15, 0.5) 0%, rgba(7, 6, 15, 0.3) 34%, rgba(7, 6, 15, 0) 58%),
                              linear-gradient(0deg, var(--bg) 0%, rgba(7, 6, 15, 0) 26%); }
}
*/

/* ── Spielwelt hinter dem Kopfbereich (Desktop; Micha 27.10.: Hintergrund mit Wow statt Lichtstreifen) ──
 * _rahmen/hg/start.webp: schwebende Inseln im Weltall mit Burg, Panzer, Arcade-Automaten, Raumschiffen, Ringplanet (SwarmUI, FLUX.2 klein 4B,
 * 27.10.2026; Rohbild: Zwischenstand gelöscht; Micha: Sonne raus, spaciger). Links abgedunkelt für den Text, rechts leicht für die
 * Icon-Bühne. Am Handy bleibt der Kopf wie er ist (Micha: dort prima). */
@media (min-width: 900px) {
  .held-himmel::before { content: ''; position: absolute; inset: 0; z-index: 0;
    /* Das farbige Leuchten der Bühne (wie in .held-himmel) über dem Bild, sonst verdeckt das Bild es (Micha 27.10.) */
    background:
      radial-gradient(34% 46% at 70% 48%, hsl(var(--held-h) 95% 55% / 0.75), transparent 72%),
      radial-gradient(60% 70% at 70% 45%, rgba(7, 6, 15, 0.45), transparent 75%),
      url('../../_rahmen/hg/start.webp') center 40% / cover no-repeat; }
  .held-himmel::after { display: none; }
  .held-vorhang { background: linear-gradient(90deg, rgba(7, 6, 15, 0.86) 0%, rgba(7, 6, 15, 0.62) 36%, rgba(7, 6, 15, 0.22) 62%, rgba(7, 6, 15, 0.4) 100%),
                              linear-gradient(0deg, var(--bg) 0%, rgba(7, 6, 15, 0) 30%),
                              linear-gradient(180deg, var(--bg) 0%, rgba(7, 6, 15, 0) 14%); }   /* oben weich: Konto-Band darüber (29.10.2026) */
}

/* ── Spielwelt hinter „Neu“ und dem Spiele-Raster (Micha 27.10.: zwischen Kopf und Werkstatt nur schwarzer Grund) ──
 * _rahmen/hg/spiele.webp: schwebende Inseln mit Burg, Panzer, Arcade, Schachfiguren im Nebel (SwarmUI, FLUX.2 klein 4B,
 * 27.10.2026; Rohbild: Zwischenstand gelöscht). Stark gedimmt, oben/unten in den Grund auslaufend,
 * damit die Kacheln führen. Volle Breite, fest beim Scrollen (Tiefe); am Handy ohne fixed (iOS). */
.spielwelt { position: relative; isolation: isolate; padding-bottom: 8px; }
.spielwelt::before { content: ''; position: absolute; inset: -40px 0 -60px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 6, 15, 0.55) 14%, rgba(7, 6, 15, 0.62) 86%, var(--bg) 100%),
              url('../../_rahmen/hg/spiele.webp') center / cover no-repeat fixed; }
@media (max-width: 900px) { .spielwelt::before { background-attachment: scroll, scroll; } }