:root, [data-theme="klassik"] {
  --bg: #15171c; --panel: #1e2128; --panel2: #262a33; --line: #323743; --text: #e8eaee; --muted: #9aa1ad;
  --accent: #E5A00D; --accent-ink: #1b1d22; --ok: #3ba55d; --bad: #e5484d; --blurple: #5865F2;
  --bg-deep: #0f1115; --off: #4a4f5b; --prem: #E5A00D; --prem-ink: #1b1d22;
}
/* Designs (17.10., Nutzer): Standard legt der Admin fest, der Server setzt <html data-theme="…">.
   „klassik“ = :root oben (bisheriges Gold). Farben aus dem Goblin-Logo: Salbeigrün, Kupfer, Bernstein, Leder. */
[data-theme="werkstatt"] {
  --bg: #121613; --panel: #1a201b; --panel2: #222a24; --line: #2e3830; --text: #e6ebe3; --muted: #9aa79c;
  --accent: #8fbf6a; --accent-ink: #10180c; --ok: #5f9a49; --bad: #e0675a;
  --bg-deep: #0d100e; --off: #3d4740; --prem: #c9844f; --prem-ink: #21120a;
}
[data-theme="pergament"] {
  --bg: #17120e; --panel: #211a14; --panel2: #2b221a; --line: #3a2e23; --text: #efe6d6; --muted: #b3a48d;
  --accent: #d08a4e; --accent-ink: #1f140b; --ok: #7fae5c; --bad: #e0675a;
  --bg-deep: #120d0a; --off: #4a3d31; --prem: #f0b84a; --prem-ink: #2a1c05;
}
[data-theme="leuchtaugen"] {
  --bg: #0e1110; --panel: #151a18; --panel2: #1c2320; --line: #28312c; --text: #e4ece7; --muted: #8e9b94;
  --accent: #6be07a; --accent-ink: #08140b; --ok: #3fae55; --bad: #ff6b6b;
  --bg-deep: #0a0c0b; --off: #333d38; --prem: #f5c542; --prem-ink: #2b1f02;
}
/* Banner-Archiv (24.10., Nutzer): Farben wie Leuchtaugen, Startseite als gewölbter Raum aus Spiel-Bannern */
[data-theme="archiv"] {
  --bg: #0e1110; --panel: #151a18; --panel2: #1c2320; --line: #28312c; --text: #e4ece7; --muted: #8e9b94;
  --accent: #6be07a; --accent-ink: #08140b; --ok: #3fae55; --bad: #ff6b6b;
  --bg-deep: #0a0c0b; --off: #333d38; --prem: #f5c542; --prem-ink: #2b1f02;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select, input { font: inherit; color: inherit; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px;
  background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 17px; }

.brand:hover { text-decoration: none; }
#usernav { display: flex; align-items: center; gap: 12px; }
#usernav img { width: 30px; height: 30px; border-radius: 50%; }
#usernav .name { color: var(--muted); }
main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; }
.loading { color: var(--muted); padding: 40px; text-align: center; }
.foot { text-align: center; padding: 20px; color: var(--muted); font-size: 13px; }
.foot a { color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 8px; padding: 9px 16px;
  background: var(--panel2); cursor: pointer; font-weight: 600; color: var(--text); }
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.discord { background: var(--blurple); color: #fff; }
.btn.small { padding: 5px 10px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.hero { text-align: center; padding: 70px 10px 40px; }
.hero h1 { font-size: 40px; margin: 0 0 12px; }
.hero p { color: var(--muted); max-width: 620px; margin: 0 auto 28px; font-size: 17px; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; margin-top: 30px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.feature b { display: block; margin-bottom: 6px; }
.feature .badge { margin-bottom: 8px; }
.beta-pill { display: inline-block; margin: 4px 0 18px; padding: 5px 12px; border-radius: 999px; font-size: 13px;
  color: var(--prem-ink, #1a1a1a); background: var(--prem, #e5a00d); font-weight: 600; }
.hero .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.how { max-width: 760px; margin: 10px auto 0; text-align: center; }
.how h2 { font-size: 18px; margin-bottom: 14px; }
.how ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;
  counter-reset: step; }
.how li { counter-increment: step; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px;
  text-align: left; font-size: 14px; }
.how li::before { content: counter(step); display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); color: var(--accent-ink, #000); font-weight: 700; font-size: 13px; }
.feature span { color: var(--muted); font-size: 14px; }
.compare { margin: 40px auto 0; max-width: 620px; border-collapse: collapse; width: 100%; }
.compare th, .compare td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; width: 110px; }
.yes { color: var(--ok); font-weight: 700; } .no { color: var(--bad); font-weight: 700; }

h2 { margin: 0 0 16px; font-size: 22px; }
.sub { color: var(--muted); margin: -8px 0 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.card img, .card .noicon { width: 64px; height: 64px; border-radius: 50%; background: var(--panel2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); }
.card .gname { font-weight: 600; word-break: break-word; }
.badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px;
  background: var(--panel2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.badge.premium { background: var(--prem); color: var(--prem-ink); }

.layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.side { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  position: sticky; top: 70px; max-height: calc(100vh - 90px); display: flex; flex-direction: column; }
/* 24.10. (Nutzer): Spieleliste bleibt IMMER stehen – sticky endete am Seitenende (Fußzeile schob sie hoch) -> fest am
   Fenster neben der Leiste; der Inhalt behält seine Spalte. Handy (≤ 800 px): wie bisher über dem Inhalt. */
@media (min-width: 801px) {
  body.with-rail .side { position: fixed; top: 81px; bottom: 16px;   /* 81 = Leiste 57 + Abstand 24 -> bündig mit dem Inhalt */ left: 96px; width: 300px; max-height: none; z-index: 2; }
  body.with-rail .layout > .side + * { grid-column: 2; }
}
.side .head { padding: 14px; border-bottom: 1px solid var(--line); }
.side .head .back { font-size: 13px; color: var(--muted); }
.side .head .gtitle { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 700; }
.side input { width: 100%; margin-top: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--panel); }
.side .list { overflow-y: auto; padding: 6px 0; }
.side .sect { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 14px 4px; }
.game { display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; border-left: 3px solid transparent; }
.game:hover { background: var(--panel); }
.game.active { background: var(--panel2); border-left-color: var(--accent); }
.game img { width: 64px; height: 30px; object-fit: cover; border-radius: 4px; background: var(--panel2); flex: none; }
.game .gn { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-left: auto; flex: none; }

.pane { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.banner { position: relative; height: 150px; background: #000 center/cover no-repeat; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(0,0,0,.85)); }
.banner .t { position: absolute; left: 20px; bottom: 14px; z-index: 1; }
.banner .t h2 { margin: 0; text-shadow: 0 2px 6px #000; }
.banner .t .links { font-size: 13px; display: flex; gap: 14px; margin-top: 4px; }
.pane .body { padding: 16px 20px 20px; }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.cat { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 4px; }
.chan { border-bottom: 1px solid var(--line); }
.chan .row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.chan .hash { color: var(--muted); font-weight: 700; }
.chan .cn { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan .cn small { color: var(--bad); margin-left: 8px; }
.chan .opts { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 0 12px 22px; }
.chan .opts label { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
select { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; min-width: 190px; }

.switch { position: relative; display: inline-block; vertical-align: middle; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--off); border-radius: 24px; cursor: pointer; transition: .15s; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + span { background: var(--ok); }
.switch input:checked + span::before { transform: translateX(20px); }
.switch input:disabled + span { opacity: .4; cursor: not-allowed; }
.switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.plan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; background: var(--panel2);
  border-radius: 10px; margin-bottom: 16px; }
.plan .muted { color: var(--muted); font-size: 14px; }
table.subs { width: 100%; border-collapse: collapse; font-size: 14px; }
table.subs td, table.subs th { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; }
table.subs th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; }
table.subs tr.click { cursor: pointer; } table.subs tr.click:hover { background: var(--panel2); }
.empty { color: var(--muted); padding: 20px 0; }
.side-empty { padding: 6px 14px; }
.admin-block { margin-bottom: 20px; }
.admin-block.highlight { border-color: var(--accent); }
.nav-prem { font-size: 12px; padding: 5px 12px; }
.nav-prem:hover { text-decoration: none; filter: brightness(1.1); }
.prem-note { background: var(--panel2); border-left: 3px solid var(--accent); padding: 10px 14px; border-radius: 6px; }
.spaced-top { margin-top: 28px; }
input.note.wide { width: 340px; max-width: 100%; }
/* Notiz: bricht um und wächst mit dem Text */
textarea.note.grow { width: 100%; min-width: 180px; resize: none; overflow: hidden; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--text); display: block;
  padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); }
textarea.note.grow:focus { outline: 1px solid var(--accent); }
td.note-cell { width: 34%; }
td.actions { display: flex; gap: 8px; justify-content: flex-end; }
.admin-block table.subs td:last-child, .admin-block table.subs th:last-child,
table.subs.right-last td:last-child { text-align: right; }
.pane .compare { margin: 10px 0 0; max-width: 100%; }
.intervals { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; }
.intervals label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.intervals .dur { display: flex; gap: 6px; }
.intervals input.num { width: 90px; }
.intervals select.unit { min-width: 80px; }
.field-row { margin-top: 12px; }
.rc-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; border: 1px solid var(--line); }
.rc-dot.none { background: transparent; }
tr.cat-row td { padding-top: 16px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); }
.mode-desc { display: block; max-width: 300px; margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.rc-name { display: inline-flex; align-items: center; gap: 8px; }
.row-btns.rc-toggle { margin-bottom: 14px; }
.rc-pick { display: flex; align-items: center; gap: 8px; }
.rc-pick input.wl-color { width: 44px; height: 28px; }
.intervals label.field-wide { flex: 1; min-width: 240px; max-width: 560px; } .intervals label.field-wide input { width: 100%; box-sizing: border-box; }
.hint.spaced { margin-top: 16px; }
input.note { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel2); width: 180px; }

#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--panel2);
  border: 1px solid var(--line); padding: 10px 18px; border-radius: 10px; transition: .2s; z-index: 10; max-width: 90vw; }
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.err { border-color: var(--bad); }

/* ---- Server-Leiste links (wie Discord) + Menü ---- */
body.with-rail main, body.with-rail .foot { margin-left: 76px; }
body.with-rail main { max-width: 1260px; }
/* Startseite auch angemeldet mittig im Bereich rechts der Leiste (18.10., Nutzer) */
body.with-rail.on-landing main { max-width: 1200px; margin-left: max(76px, calc(76px + (100vw - 76px - 1200px) / 2)); }
.rail { position: fixed; top: 51px; left: 0; bottom: 0; width: 72px; background: var(--bg-deep); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; overflow-y: auto; z-index: 4; }
.rail[hidden] { display: none; }   /* 18.10.: display:flex hob „hidden“ auf -> Leiste verdeckte die Startseite */
.rail .sep { width: 32px; height: 2px; background: var(--line); border-radius: 2px; flex: none; }
.rail .gap { flex: 1; }
.rail-btn { position: relative; width: 48px; height: 48px; border-radius: 50%; background: var(--panel2); flex: none;
  display: flex; align-items: center; justify-content: center; color: var(--text); font-weight: 700; font-size: 15px;
  cursor: pointer; border: 0; transition: border-radius .15s, background .15s; overflow: visible; }
.rail-btn:hover, .rail-btn.active { border-radius: 16px; background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.rail-btn img { width: 48px; height: 48px; border-radius: inherit; object-fit: cover; }
.rail-btn.dim { opacity: .45; }
.rail-btn.active::before { content: ""; position: absolute; left: -12px; width: 4px; height: 36px; background: var(--text);
  border-radius: 0 4px 4px 0; }
.rail-btn .star { position: absolute; right: -3px; bottom: -3px; font-size: 13px; line-height: 1;
  background: var(--bg-deep); border-radius: 50%; padding: 2px; }
.rail-btn.burger { background: transparent; font-size: 24px; }
.rail-btn.burger:hover, .rail-btn.burger.open { background: var(--panel2); color: var(--text); }
.menu { position: fixed; top: 60px; left: 80px; width: 260px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px; z-index: 6; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text); font-weight: 600; }
.menu a:hover, .menu a.active { background: var(--panel2); text-decoration: none; }
.menu a .ic { width: 22px; text-align: center; }
.menu .msep { height: 1px; background: var(--line); margin: 6px 4px; }

/* ---- Seiten Games / Konto / Einstellungen / Rechte ---- */
.page-grid { display: grid; gap: 20px; }
.kv { display: grid; grid-template-columns: 180px 1fr; gap: 8px 16px; margin: 10px 0 18px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.acc-head { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.acc-head img { width: 64px; height: 64px; border-radius: 50%; }
.row-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.games-list .game { border-radius: 8px; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lvl { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; text-transform: uppercase; white-space: nowrap; }
.lvl.required { background: var(--bad); color: #fff; } .lvl.recommended { background: var(--accent); color: var(--accent-ink); }
.lvl.optional { background: var(--panel2); color: var(--muted); }
td.why { color: var(--muted); font-size: 13px; }
select.wide { min-width: 280px; }
/* 👑 Premium-Kennzeichnung + Tooltip (Phase 3) */
.crown { background: none; border: 0; padding: 0 2px; margin-left: 4px; cursor: pointer; font-size: 13px; line-height: 1;
  vertical-align: middle; border-radius: 6px; }
.crown.locked { filter: grayscale(.6); opacity: .75; }
.crown:hover, .crown:focus-visible { filter: none; opacity: 1; outline: 1px solid var(--accent); }
.tip { position: absolute; z-index: 30; max-width: 300px; background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.5); font-size: 13px; }
.tip p { margin: 6px 0 0; } .tip .muted { color: var(--muted); }
.locked-ui { opacity: .55; }
.prem-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.prem-list li { background: var(--panel2); border-radius: 99px; padding: 4px 10px; font-size: 13px; display: flex; align-items: center; }
.used-box { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--panel2); border-left: 3px solid var(--accent); }
.used-box h3 { margin: 0 0 4px; font-size: 15px; }
/* Phase 4: Unter-Navigation, Gruppen, Checkbox-Listen */
.subnav { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.subnav a { font-size: 13px; padding: 4px 10px; border-radius: 99px; color: var(--muted); background: var(--panel); }
.subnav a.active, .subnav a:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }
.chk-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 10px; }
label.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.group { background: var(--panel2); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px; }
.group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .group-head .btn { margin-left: auto; }
.group.new { border: 1px dashed var(--line); background: transparent; }
.hint.warn { color: var(--accent); }
.chan .opts label.grow { flex: 1; min-width: 220px; } input.note.kw { width: 100%; }
.badge.ok { background: var(--ok); color: #fff; } .badge.bad { background: var(--bad); color: #fff; }
.prem-cell { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.prem-head { display: flex; align-items: center; gap: 8px; }
.muted.small { color: var(--muted); font-size: 12px; }
.prem-dates { display: flex; gap: 6px; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }
.prem-dates label { display: flex; flex-direction: column; font-size: 11px; color: var(--muted); gap: 2px; text-align: left; }
input.note.date { width: 140px; color-scheme: dark; }
input.note.date:disabled { opacity: .5; cursor: not-allowed; }
.panel-box { border-top: 1px solid var(--line); padding-top: 18px; }
.panel-box h3 { margin: 0 0 8px; font-size: 17px; }

/* ---- Einrichtungs-Seite: Bot hinzufügen (Admin) bzw. Link an den Admin schicken ---- */
.card.nobot img, .card.nobot .noicon { opacity: .55; }
a.badge:hover { text-decoration: none; filter: brightness(1.2); }
.setup { text-align: center; padding: 50px 10px 30px; }
.setup h1 { font-size: 34px; margin: 0 0 36px; }
.setup .flow { display: flex; align-items: center; justify-content: center; gap: 48px; margin-bottom: 36px; flex-wrap: wrap; }
.setup .who { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 180px; }
.setup .who img, .setup .who .noicon { width: 112px; height: 112px; border-radius: 50%; background: var(--panel2);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 28px; color: var(--muted);
  box-shadow: 0 0 0 4px var(--panel2); object-fit: cover; }
.setup .who b { font-size: 17px; word-break: break-word; }
.setup .arrow { font-size: 54px; color: var(--accent); line-height: 1; }
.setup .arrow.done { color: var(--ok); }
.setup .lead { font-size: 20px; max-width: 560px; margin: 0 auto 22px; color: var(--text); }
.setup .hint { max-width: 560px; margin-left: auto; margin-right: auto; }
.btn.big { padding: 14px 26px; font-size: 17px; }
.share { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share-link { width: 360px; max-width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg-deep); color: var(--text); font-size: 14px; }
.row-btns.center { justify-content: center; }
.offscreen { position: fixed; left: -9999px; top: 0; }

@media (max-width: 800px) {
  body.with-rail main, body.with-rail .foot, body.with-rail.on-landing main { margin-left: 64px; }
  .rail { width: 60px; } .rail-btn, .rail-btn img { width: 42px; height: 42px; }
  .menu { left: 66px; width: calc(100vw - 80px); }
  .kv { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 1fr; }
  .side { position: static; max-height: 360px; }
  .hero h1 { font-size: 30px; }
  .setup { padding-top: 24px; } .setup h1 { font-size: 22px; margin-bottom: 24px; }
  .setup .flow { gap: 10px; flex-wrap: nowrap; } .setup .who { width: 96px; } .setup .who b { font-size: 13px; }
  .setup .who img, .setup .who .noicon { width: 64px; height: 64px; font-size: 20px; } .setup .arrow { font-size: 30px; }
  .setup .lead { font-size: 16px; }
  #usernav .name { display: none; }
}

/* ---- Logo, Icons, Menü (17.10. überarbeitet: schlicht, ohne Verläufe/Deko) ---- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic-svg { width: 18px; height: 18px; display: block; flex: none; }
.brand-logo { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--panel2); flex: none; display: block; }
.brand .brand-logo img { width: 36px; height: 36px; transform: scale(2.2); transform-origin: 48% 20%; }
.rail-btn .ic-svg { width: 20px; height: 20px; }
.rail-btn.burger { background: transparent; color: var(--muted); }   /* 18.10.: wieder 3 Striche statt Logo */
.rail-btn.burger .ic-svg { width: 26px; height: 26px; }
.rail-btn.burger:hover, .rail-btn.burger.open { background: var(--panel2); color: var(--text); }
.rail-btn .star { display: flex; padding: 2px; color: var(--accent); }
.rail-btn .star .ic-svg { width: 12px; height: 12px; }
.menu { width: 240px; padding: 6px; }
.menu a { gap: 12px; padding: 9px 12px; font-weight: 500; color: var(--text); border-left: 3px solid transparent; border-radius: 6px; }
.menu a .ic-svg { color: var(--muted); }
.menu a:hover { background: var(--panel2); }
.menu a.active { background: var(--panel2); border-left-color: var(--accent); }
.menu a.active .ic-svg { color: var(--accent); }
/* Premium-Krone: kleines goldenes Symbol statt Emoji */
.crown { display: inline-flex; align-items: center; justify-content: center; color: var(--prem); margin-left: 0; padding: 2px; height: auto; vertical-align: middle; }
/* Text + Krone: als Flex-Zeile vertikal mittig (sonst hängt die Krone an der Schrift-Grundlinie) */
span:has(> .crown), label:has(> .crown) { display: inline-flex; align-items: center; gap: 4px; }
p:has(> .crown), h2:has(> .crown), h3:has(> .crown) { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crown .ic-svg { width: 14px; height: 14px; }
.crown.locked { color: var(--muted); filter: none; opacity: 1; }
.crown:hover, .crown:focus-visible { color: var(--prem); outline: none; }
.tip-h { display: flex; align-items: center; gap: 6px; } .tip-h .ic-svg { width: 14px; height: 14px; color: var(--accent); }
h3.with-ic { display: flex; align-items: center; gap: 6px; } h3.with-ic .ic-svg { width: 16px; height: 16px; color: var(--accent); }
.hero-logo { width: 180px; height: 180px; object-fit: contain; display: block; margin: 0 auto 8px; }
.setup .who img.logo-img { object-fit: contain; background: var(--panel2); padding: 6px; }
.wl { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; }
.wl-left { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 160px; text-align: center; }
.wl-avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; background: var(--panel2); }
.wl-right { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.wl-right label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
textarea.wl-bio { min-height: 70px; }
/* Reiter mit Premium-Krone (eine Krone je Premium-Bereich statt an jeder Funktion) */
.subnav a { display: inline-flex; align-items: center; gap: 5px; }
.tab-crown { display: inline-flex; color: var(--prem); }
.tab-crown .ic-svg { width: 13px; height: 13px; }
.tab-crown.locked { color: var(--muted); }
.subnav a.active .tab-crown, .subnav a:hover .tab-crown { color: var(--accent-ink); }
/* ---- Phase 6: eigene Spiele, Statistik, Markenhinweis ---- */
.foot small { display: block; margin-top: 6px; max-width: 640px; margin-left: auto; margin-right: auto; opacity: .8; }
.cg-img { width: 46px; height: 46px; border-radius: 8px; object-fit: contain; padding: 3px; background: var(--panel); flex: none; }   /* Thumbnail ganz zeigen, nicht beschneiden */
.cg-img.noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cg-feed { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.cg-feed.new { border: 0; } .cg-feed select { min-width: 120px; }
.cg-test { font-size: 13px; margin: 6px 0; } .cg-test div { margin: 2px 0; }
.cg-items { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.cg-items .badge { font-size: 10px; padding: 1px 6px; vertical-align: 1px; }
.cg-items .badge.sort-patch { background: var(--ok); color: #fff; }
.cg-items .badge.sort-build { background: var(--blurple); color: #fff; }
.group h4 { margin: 12px 0 4px; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.disclaimer { font-size: 12px; }
.stats { display: flex; gap: 12px; flex-wrap: wrap; }
.stat { background: var(--panel2); border-radius: 10px; padding: 10px 16px; min-width: 120px; }
.stat b { display: block; font-size: 22px; } .stat span { color: var(--muted); font-size: 13px; }
td.bar-cell { width: 30%; } .bar { height: 8px; border-radius: 4px; background: var(--accent); min-width: 2px; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 52px; padding: 2px 0; border-bottom: 1px solid var(--line); }
.spark span { flex: 1; background: var(--accent); opacity: .75; border-radius: 2px 2px 0 0; min-height: 2px; }
/* Eigene Spiele im Admin einklappbar */
.cg-head { cursor: pointer; user-select: none; margin-bottom: 0; }
.cg-head .btn { margin-left: 0; }   /* Knöpfe rechts zusammen (statt verteilt) */
.cg-head > .muted { margin-right: auto; }
.cg-toggle { background: none; border: 0; padding: 4px; color: var(--muted); cursor: pointer; display: flex; border-radius: 6px; }
.cg-toggle:hover, .cg-toggle:focus-visible { color: var(--text); background: var(--panel); outline: none; }
.cg-toggle .ic-svg { transition: transform .15s; }
.cg.open .cg-toggle .ic-svg { transform: rotate(90deg); }
.cg .cg-body { display: none; margin-top: 10px; }
.cg.open .cg-body { display: block; }
/* Repost-Knopf: in der Kanalzeile unten rechts, in der Übersicht als letzte Spalte */
.chan .opts .opt-btn { display: flex; align-items: flex-end; margin-left: auto; }
td.td-btn { text-align: right; white-space: nowrap; }
/* Vorlagen-Knöpfe unter „Eigene Spiele & Feeds“ */
.presets { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* Eigene Spiele ohne Banner: Logo ganz zeigen statt auf Bannerformat beschneiden */
.game img.logo-fit { object-fit: contain; background: var(--panel2); padding: 2px; }
/* Spielkopf eigener Spiele: Banner/Logo ganz zeigen (beliebige Formate), Titel darunter lesbar */
.banner.banner-fit { background-size: contain; background-repeat: no-repeat; background-position: center 30%;
  background-color: var(--panel2); }
/* Admin-Reiter (17.10.) */
.subnav.admin-tabs { margin: 0 0 16px; }
.subnav.admin-tabs a { font-size: 14px; padding: 6px 14px; }
.subnav .count { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--bad); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
/* Rechtstexte /terms, /privacy (17.10.) */
.foot a + a { margin-left: 14px; }
.legal { max-width: 820px; line-height: 1.55; }
.legal h3 { margin: 18px 0 4px; font-size: 15px; }
.legal p { margin: 0 0 10px; }
.legal hr { margin: 24px 0; border: 0; border-top: 1px solid var(--line); }
/* Reiter „Befehle“ (17.10.) */
.group.cmd .badge, .group.cmd .group-head > b { white-space: nowrap; flex: none; }
.group.cmd.fixed .group-head { gap: 10px; }
/* Bot-Auftritt: Farbe der Meldungen (17.10.) */
.wl-color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.wl-color { width: 44px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.wl-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.wl-swatch:hover, .wl-swatch:focus-visible { border-color: var(--text); outline: none; }
.wl-card { display: flex; flex-direction: column; gap: 4px; max-width: 420px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--panel2); border-radius: 6px; border-left: 4px solid var(--accent); }
.wl-none { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1;
  color: var(--muted); background: transparent; }
.wl-none.on, .wl-swatch.on { border-color: var(--accent); color: var(--text); }
.wl-card.no-color { border-left-color: var(--line); }
/* Farbe je Spiel + Hex-Eingabe (17.10.) */
.wl-hex { width: 96px; flex: 0 0 96px; min-width: 0; font-family: ui-monospace, Consolas, monospace; }
.wl-hex.bad { border-color: var(--bad); }
details.gc { margin: 10px 0 14px; padding: 8px 12px; background: var(--panel2); border-radius: 8px; }
details.gc summary { cursor: pointer; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
details.gc .gc-body { margin-top: 8px; }
/* Admin: Design-Auswahl (17.10.) – jede Karte nutzt die Variablen ihres eigenen data-theme */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.theme-card { display: flex; flex-direction: column; gap: 8px; text-align: left; cursor: pointer; padding: 12px;
  background: var(--bg); color: var(--text); border: 2px solid var(--line); border-radius: 12px; font: inherit; }
.theme-card:hover, .theme-card:focus-visible { border-color: var(--accent); outline: none; }
.theme-card.on { border-color: var(--accent); }
.theme-card.on .tc-top b::after { content: " ✓"; color: var(--accent); }
.tc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tc-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--prem); color: var(--prem-ink); }
.tc-row { display: flex; gap: 6px; }
.tc-pill { font-size: 11px; padding: 2px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); }
.tc-pill.off { background: var(--panel); color: var(--muted); }
.tc-emb { display: flex; flex-direction: column; padding: 7px 9px; background: var(--panel2); border-left: 4px solid var(--accent); border-radius: 0; font-size: 12px; }
.tc-emb small, .tc-desc { color: var(--muted); font-size: 11px; }
/* Spiel-Anfragen (17.10.) */
.badge.gr-open { background: var(--prem); color: var(--prem-ink); }
.badge.gr-accepted { background: var(--blurple); color: #fff; }
.badge.gr-done { background: var(--ok); color: #fff; }
.badge.gr-rejected { background: var(--bad); color: #fff; }
.gr-form label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; max-width: 560px; }
.gr-form label .note { width: 100%; }

/* ---------------------------------------------------------------- Industrie-Look (18.10., Nutzer)
   Boxen, Menüs, Tabellen und Seitenleisten wie aufgenietete Bleche – passend zum Metall-Hintergrund. Nur Licht/Schatten
   (weiß/schwarz transparent) + Design-Farben -> funktioniert in allen Designs. Große Platten: Nieten in allen Ecken +
   Schatten; innere Bleche: kleinere Nieten, nur Kante. */
:root {
  --rv: radial-gradient(circle at 50% 50%, rgba(220,232,222,.40) 0 1.3px, rgba(122,140,128,.32) 1.4px 3px,
        rgba(0,0,0,.6) 3.2px 4.2px, transparent 4.4px);
  --rv-s: radial-gradient(circle at 50% 50%, rgba(220,232,222,.28) 0 1px, rgba(122,140,128,.24) 1.1px 2.2px,
          rgba(0,0,0,.5) 2.4px 3.1px, transparent 3.3px);
  --sheen: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 40%, rgba(0,0,0,.14));
  --bevel: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.45);
}
.feature, .how li, .card, .side, .pane, .menu, table.compare, .rail {
  --plate: var(--panel);
  background:
    var(--rv) left 7px top 7px / 16px 16px no-repeat, var(--rv) right 7px top 7px / 16px 16px no-repeat,
    var(--rv) left 7px bottom 7px / 16px 16px no-repeat, var(--rv) right 7px bottom 7px / 16px 16px no-repeat,
    var(--sheen), var(--plate);
  border-color: rgba(255,255,255,.07);
  box-shadow: var(--bevel), 0 8px 18px rgba(0,0,0,.5);
}
.side, .rail { --plate: var(--bg-deep); }
.rail { box-shadow: var(--bevel), 6px 0 16px rgba(0,0,0,.45); }
.feature, .how li { padding: 22px 24px; }
table.compare { border-radius: 12px; border-collapse: separate; padding: 14px 18px; border: 1px solid rgba(255,255,255,.07); }
.group, .plan, .stat, .used-box, details.gc, .prem-note {
  --plate: var(--panel2);
  background:
    var(--rv-s) left 4px top 4px / 12px 12px no-repeat, var(--rv-s) right 4px top 4px / 12px 12px no-repeat,
    var(--rv-s) left 4px bottom 4px / 12px 12px no-repeat, var(--rv-s) right 4px bottom 4px / 12px 12px no-repeat,
    var(--sheen), var(--plate);
  box-shadow: var(--bevel);
}

/* 18.10.: Kategorieleiste (Spiele · Gratis-Spiele · Software/Treiber bald) + Gratis-Seite */
.catbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 10px 0 8px; padding: 4px; border-radius: 10px;
  background: var(--panel); box-shadow: var(--bevel, none); }
.catbar a, .catbar .soon { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 7px;
  font-size: 11px; line-height: 1.15; color: var(--muted); text-align: center; position: relative; }
.catbar .ic-svg { width: 20px; height: 20px; }
.catbar a:hover { color: var(--text); background: rgba(255,255,255,.05); text-decoration: none; }
.catbar a.active { background: var(--accent); color: var(--accent-ink); }
.catbar .soon { opacity: .45; cursor: default; }
.catbar .soon small { position: absolute; top: 1px; right: 2px; font-size: 8.5px; text-transform: uppercase; letter-spacing: .03em; }
.banner-free { background: linear-gradient(120deg, #3a2a12, #1d3324 60%, #1a2236); }
.banner-free h2 .ic-svg { width: 26px; height: 26px; }
.banner-free .links span { font-size: 13px; opacity: .85; }
.free-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.free-item { display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: var(--panel); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--bevel, none); }
.free-item:hover { text-decoration: none; border-color: var(--accent); }
.free-item img, .free-item .free-noimg { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0004; }
.free-item .free-noimg { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.free-item .free-noimg .ic-svg { width: 36px; height: 36px; }
.free-item .fi-t { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 10px; }
.free-item .fi-t b { font-size: 14px; }
.free-item .fi-t small { font-size: 12px; }
.free-item.soon img { filter: saturate(.6); }
.chk-row { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 4px; }
.banner-free .prov-logo { width: 34px; height: 34px; border-radius: 8px; }
.free-ping { flex-basis: 100%; margin: 2px 0 0; }
/* 18.10. (Nutzer): Anbieter-Logos quadratisch + größer, durchsichtig (kein Banner-Kasten); 3 Kategorien */
.game.prov-item img, .game.prov-item img.logo-fit { width: 40px; height: 40px; object-fit: contain; background: none; padding: 0; border-radius: 0; }
.game.prov-item { gap: 12px; }
.catbar { grid-template-columns: repeat(4, 1fr); }      /* 25.10.: Spiele · Gratis · KI · Treiber */
.banner-free .prov-logo { width: 42px; height: 42px; border-radius: 0; object-fit: contain; }
/* 18.10. (Nutzer): Spiele-Bilder in der Seitenleiste im Banner-Format (Steam-Header 460×215), ganz sichtbar, unverzerrt */
.side .game img { width: 86px; height: auto; aspect-ratio: 460 / 215; object-fit: contain; border-radius: 5px; }
.side .game img.logo-fit { padding: 2px; }
.side .game { gap: 12px; }
.side .game.prov-item img { width: 40px; height: 40px; aspect-ratio: auto; object-fit: contain; padding: 0; border-radius: 0; }
.warn-text { color: var(--danger, #e5534b); font-weight: 600; }
/* 23.10.: Admin-Serverliste – Suche/Filter oben, je Server einklappbare Karte */
.srv-tools { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; margin: 6px 0 12px; }
.srv-tools input[type=search] { flex: 1 1 260px; min-width: 200px; }
.srv-tools label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.srv-list .cg-head { gap: 10px; flex-wrap: wrap; }
.srv-list .cg-head .srv-name { min-width: 120px; }
.srv-list .cg-head .badge { margin-left: auto; }
.srv-meta { margin: 2px 0 10px; }
.srv-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.3fr); gap: 14px; align-items: start; }
.srv-grid .note-cell { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 760px) { .srv-grid { grid-template-columns: 1fr; } }
.plan.reach { margin-top: 8px; }
/* 23.10.: Gutscheine (Admin) + Einlösen (Premium-Seite) */
.cp-form { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: end; }
.cp-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.cp-form .cp-note { flex: 1 1 220px; }
.cp-list .cg-head { gap: 10px; flex-wrap: wrap; }
.cp-code { font-family: ui-monospace, monospace; letter-spacing: .04em; }
.cp-list .cg-head .badge { margin-left: auto; }
.cp-uses { margin: 4px 0 8px 18px; font-size: 13px; }
.coupon-box .mode-desc.warn { color: var(--danger, #e5534b); }
.srv-coupons { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.seo ul { text-align: left; max-width: 760px; margin: 0 auto; line-height: 1.6; }
.seo p { max-width: 760px; margin: 10px auto; }
textarea.note.grow { min-height: 2.4em; }   /* 23.10.: nie nur ein Strich */
/* Statistik: Zeile aufklappen -> Server mit diesem Abo (23.10.) */
table.subs tr.open { background: var(--panel2); }
.st-chev { display: inline-block; width: 1em; color: var(--muted); transition: transform .15s; }
tr.open .st-chev { transform: rotate(90deg); }
td.st-detail { background: var(--panel2); padding: 6px 12px 12px 28px; }
table.st-subs { font-size: 13px; }
table.st-subs td, table.st-subs th { padding: 5px 6px; }
.admin-block table.st-subs td:last-child, .admin-block table.st-subs th:last-child { text-align: right; }
.srv-subs { margin-top: 10px; }
.srv-subs table.st-subs { margin-top: 4px; }
/* Postfach (23.10.) */
.dm-log { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; margin: 8px 0; padding-right: 4px; }
.dm-msg { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--panel2); align-self: flex-start; }
.dm-msg.out { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--panel2)); }
.dm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.dm-reply { display: flex; gap: 8px; align-items: flex-end; }
.dm-reply textarea { flex: 1; }
.btn.danger { color: var(--danger, #e5534b); border-color: color-mix(in srgb, var(--danger, #e5534b) 50%, transparent); }

/* ---------------------------------------------------------------- Banner-Raum (Design „archiv“, 24.10., Nutzer)
   Gewölbte Wand aus Spiel-Bannern um den Goblin – seit 24.10. abends EIN vorgerendertes Bild (scripts/render-room.py,
   Quer room-wide.webp, Hochformat room-tall.webp) statt 3D-Aufbau: ~0,4 MB statt 2,8 MB + 323 Ebenen. Steht fest. */
#room-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #0a0d0b; }
body.room-on main { position: relative; z-index: 1; }
body.room-on .top { z-index: 5; }   /* bleibt sticky (24.10.: vorher versehentlich relative -> Leiste scrollte weg) */
.room-img { position: absolute; inset: 0; background: url(/static/room-wide.webp?v=1) center 52% / cover no-repeat;
  opacity: 0; transition: opacity .6s ease; }
.room-img.ready { opacity: 1; }
@media (max-aspect-ratio: 3/4) { .room-img { background-image: url(/static/room-tall.webp?v=1); } }
.room-shade { position: absolute; inset: 0; background:
  radial-gradient(ellipse 30% 36% at 50% var(--cy, 52%), #0e1110d9 0 45%, #0e111070 72%, transparent 100%),
  linear-gradient(#0008, transparent 14%, transparent 82%, #000a),   /* fest stehend: unten nur abdunkeln, nicht mehr in die Fläche auslaufen */
  radial-gradient(ellipse 80% 85% at 50% 50%, transparent 60%, #000a 100%); }
.room-dim { position: absolute; inset: 0; background: #0a0d0b; opacity: var(--dim, 0); }   /* beim Scrollen abdunkeln (Lesbarkeit) */
body.room-on .how h2 { text-shadow: 0 2px 10px #000; }
body.room-on .foot { position: relative; z-index: 1; }
.room-light { position: absolute; inset: 0; mix-blend-mode: screen; background:
  radial-gradient(ellipse 14% 22% at 50% 14%, #ffdca022, transparent 70%), radial-gradient(ellipse 12% 20% at 24% 18%, #ffdca01c, transparent 70%),
  radial-gradient(ellipse 12% 20% at 76% 18%, #ffdca01c, transparent 70%), radial-gradient(ellipse 26% 16% at 50% calc(var(--cy, 52%) + 6%), #e5a00d30, transparent 70%); }
/* Startseite im Raum: Goblin groß in der Mitte, Text darüber/darunter mit Schatten */
.hero.room { padding-top: 34px; }
.hero.room h1 { font-size: 48px; text-shadow: 0 2px 14px #000; }
.hero.room p { color: #c9d2cb; text-shadow: 0 1px 10px #000; }
.hero.room .hero-logo { width: min(440px, 76vw); height: auto; margin: 10px auto 18px; filter: drop-shadow(0 22px 28px #000d); }
.hero.room .beta-pill { box-shadow: 0 4px 14px #000a; }
/* Design löschen (24.10.) */
.theme-wrap { display: flex; flex-direction: column; gap: 6px; }
.theme-wrap .theme-card { flex: 1; }
.tc-del { align-self: flex-end; }
.theme-card.on + .tc-del { visibility: hidden; }
/* Design-Auswahl mit Vorschau (24.10.) */
.dwrap { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.dlist { display: flex; flex-direction: column; gap: 8px; }
.dl-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; text-align: left; }
.dl-item.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.dl-item small { color: var(--accent); }
.dl-sw { display: flex; gap: 3px; } .dl-sw i { width: 14px; height: 14px; border-radius: 4px; display: block; border: 1px solid #0006; }
.dright { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dinfo { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.dinfo .hint { margin: 4px 0 0; }
.dprev-win { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background-color: var(--bg); background-size: cover; background-position: center top; color: var(--text); font-size: 11px;
  box-shadow: 0 12px 30px #000a; }
.dprev-room { position: absolute; inset: 0; background: #0a0d0b center 52% / cover no-repeat; }
.dprev-shade { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 55%, #0006, #000b); }
.dp-top { position: relative; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dp-top img { width: 18px; height: 18px; } .dp-top .dp-btn { margin-left: auto; }
.dp-body { position: relative; display: grid; grid-template-columns: 20% 1fr; gap: 10px; padding: 12px; }
.dp-side { background: var(--bg-deep); border: 1px solid var(--line); border-radius: 8px; padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.dp-game { aspect-ratio: 460 / 215; border-radius: 4px; background: #000 center/cover; }
.dp-main { display: flex; flex-direction: column; gap: 10px; }
.dp-pane { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dp-pane > b { flex-basis: 100%; font-size: 13px; }
.dp-badge { background: var(--prem); color: var(--prem-ink); font-weight: 700; font-size: 9px; padding: 2px 7px; border-radius: 99px; }
.dp-emb { flex-basis: 100%; border-left: 3px solid var(--accent); background: var(--panel2); padding: 6px 8px; border-radius: 4px; display: flex; flex-direction: column; }
.dp-emb small { color: var(--muted); }
.dp-btn { padding: 4px 10px; border-radius: 6px; font-weight: 600; } .dp-btn.primary { background: var(--accent); color: var(--accent-ink); }
.dp-btn.discord { background: var(--blurple); color: #fff; }
.dp-pill { padding: 3px 9px; border-radius: 99px; background: var(--accent); color: var(--accent-ink); } .dp-pill.off { background: var(--panel2); color: var(--muted); }
.dp-switch { width: 30px; height: 16px; border-radius: 16px; background: var(--ok); position: relative; }
.dp-switch::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
@media (max-width: 760px) { .dwrap { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- Paywall-Bausteine (24.10.) */
.teaser { position: relative; border: 1px solid color-mix(in srgb, var(--prem) 45%, var(--line)); border-radius: 12px; padding: 18px 20px;
  margin: 12px 0 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--prem) 14%, var(--panel)), var(--panel) 60%); }
.teaser-h { display: flex; align-items: center; gap: 8px; font-size: 17px; } .teaser-h .ic-svg { width: 20px; height: 20px; color: var(--prem); }
.teaser-desc { margin: 8px 0 6px; color: var(--text); }
.teaser-pts { margin: 6px 0 12px; padding-left: 20px; color: var(--muted); } .teaser-pts li { margin: 3px 0; }
.teaser-paused { margin: 0 0 12px; color: var(--text); }
.teaser .btn .ic-svg { width: 15px; height: 15px; vertical-align: -2px; }
.paused-mark { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px;
  background: color-mix(in srgb, var(--prem) 22%, transparent); color: var(--prem); border: 1px solid color-mix(in srgb, var(--prem) 50%, transparent); vertical-align: middle; }
.locked-area { position: relative; opacity: .62; filter: saturate(.55); }
.locked-area input, .locked-area select, .locked-area textarea, .locked-area button { cursor: not-allowed; }
.locked-crown { position: absolute; top: 4px; right: 4px; z-index: 1; opacity: 1; filter: none; }
.wl-saved { border: 1px dashed var(--line); border-radius: 12px; padding: 14px 16px; }
.wl-saved h3 { margin-top: 0; }
.wl-color-ro { display: flex; align-items: center; gap: 8px; } .wl-swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid #0007; display: inline-block; }
.wl-swatch.none { background: repeating-linear-gradient(45deg, var(--panel2) 0 4px, transparent 4px 8px); }
.locked-area input:disabled, .locked-area textarea:disabled, .locked-area select:disabled { background: var(--panel2); color: var(--text); border-color: var(--line); }
/* ⓘ mit Erklärung beim Drüberfahren (24.10., Free-Stufen) */
.info-i { display: inline-block; cursor: help; color: var(--muted); font-size: .95em; margin-left: 2px; }
.info-i:hover, .info-i:focus { color: var(--prem); outline: none; }
.info-i { position: relative; }
.info-i::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  width: max-content; max-width: min(280px, 80vw); white-space: pre-line; text-align: left; font-size: 12.5px; line-height: 1.45;
  font-weight: 400; color: var(--text); background: var(--panel2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; box-shadow: 0 6px 20px #0009; z-index: 50; pointer-events: none; opacity: 0; visibility: hidden;
  transition: opacity .12s; }
.info-i::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 2px); transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--line); z-index: 51; opacity: 0; visibility: hidden; transition: opacity .12s; }
.info-i:hover::after, .info-i:focus::after, .info-i:hover::before, .info-i:focus::before { opacity: 1; visibility: visible; }
/* ---------------------------------------------------------------- Spieleseiten /games (25.10., ohne JavaScript) */
.gp-nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.gp-nav a:not(.btn) { color: var(--text); font-weight: 600; text-decoration: none; }
main.gp { max-width: 980px; margin: 0 auto; padding: 18px 16px 30px; }
main.gp h1 { font-size: 28px; margin: 4px 0 8px; }
main.gp .lead { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.gp-crumbs { font-size: 13px; color: var(--muted); margin: 4px 2px 10px; } .gp-crumbs a { color: var(--muted); }
.gp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.gp-card { display: flex; flex-direction: column; gap: 4px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; color: var(--text); text-decoration: none; padding-bottom: 10px; transition: border-color .12s, transform .12s; }
.gp-card:hover { border-color: var(--prem); transform: translateY(-2px); }
.gp-card img, .gp-noimg { width: 100%; aspect-ratio: 460 / 215; object-fit: cover; background: var(--panel); display: block; }
.gp-card b, .gp-card small { padding: 0 10px; } .gp-card small { color: var(--muted); font-size: 12px; }
.gp-hero .gp-banner { width: 100%; max-height: 260px; object-fit: cover; border-radius: 10px; margin-bottom: 12px; display: block; }
.gp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 6px; }
.gp-item { border-top: 1px solid var(--line); padding: 14px 0; } .gp-item:first-of-type { border-top: 0; }
.gp-item h3 { margin: 6px 0; font-size: 17px; } .gp-item h3 a { color: var(--text); }
.gp-item p { margin: 6px 0; color: var(--muted); line-height: 1.55; }
.gp-meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.gp-src { font-size: 13.5px; font-weight: 600; }
main.gp .pane { margin-bottom: 14px; }
@media (max-width: 600px) { main.gp h1 { font-size: 22px; } .gp-nav .btn { display: none; } }
/* KI-Reiter (25.10.) */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 12px; }
.ai-card { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; padding: 14px 10px;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--text); text-decoration: none;
  transition: border-color .12s, transform .12s; }
.ai-card:hover { border-color: var(--prem); transform: translateY(-2px); } .ai-card.on { border-color: color-mix(in srgb, var(--ok, #3ba55d) 60%, var(--line)); }
.ai-card img, .ai-noimg { width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--panel); display: grid; place-items: center; }
.ai-card small { color: var(--muted); font-size: 12px; }
/* KI-Symbole (25.10., Nutzer: rund + farbig wie bei PatchBot statt eckig) */
.side .game.prov-item.ai-item img, .ai-card img { border-radius: 10px; background: #fff; object-fit: contain; overflow: hidden; }
.side .game.prov-item.ai-item img { box-shadow: 0 1px 3px #0006; }
.ai-card img { border-radius: 14px; }