/* ARI GG ATO Hub – Styles auf Basis der PAD-Tokens (web/brand/tokens.css wird vorher geladen).
   UI neutral Schwarz/Weiß, Markenfarbe nur als Akzent. Kein Rot, Lila oder Pink. */

/* ---------- Ergänzende Tokens (gleiche Theme-Logik wie tokens.css) ---------- */
:root {
  color-scheme: light dark;
  --brand-text: #0B7A4B;            /* grüne Schrift auf Hell, aus #18C37E abgedunkelt: 5.4:1 auf Weiß */
  --muted: #6E6E73;                 /* statt #8E8E93: 5:1 auf Weiß (nur Light Mode) */
  --on-brand: #FFFFFF;
  --surface-2: #E5E5EA;
  --elevated: #FFFFFF;              /* Sheets und Dialoge */
  --inset: #F2F2F7;                 /* Flächen innerhalb von Sheets */
  --card-dark: #000000;             /* Saldo-Karte, Erfolgs-Overlay */
  --center-btn: #000000;
  --scrim: rgba(0, 0, 0, .4);
  --shadow: 0 12px 32px rgba(0, 0, 0, .14);
  --frame-gold: #FFC400;            /* nur für die Belohnung „Goldener Profilrahmen“ (Winner Gold aus tokens.json) */
  --d-light: block;
  --d-dark: none;
  --nav-h: 64px;
  --top-h: 64px;
}
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-text: var(--brand);
    --muted: #8E8E93;
    --surface-2: #2C2C2E;
    --elevated: #1C1C1E;
    --inset: #2C2C2E;
    --card-dark: #1C1C1E;
    --center-btn: #2C2C2E;
    --scrim: rgba(0, 0, 0, .64);
    --shadow: 0 12px 32px rgba(0, 0, 0, .6);
    --d-light: none;
    --d-dark: block;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand-text: var(--brand);
  --muted: #8E8E93;
  --surface-2: #2C2C2E;
  --elevated: #1C1C1E;
  --inset: #2C2C2E;
  --card-dark: #1C1C1E;
  --center-btn: #2C2C2E;
  --scrim: rgba(0, 0, 0, .64);
  --shadow: 0 12px 32px rgba(0, 0, 0, .6);
  --d-light: none;
  --d-dark: block;
}

/* ---------- Basis ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font-ui); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.only-light { display: var(--d-light) !important; }
.only-dark { display: var(--d-dark) !important; }

/* ---------- Marke ---------- */
.wordmark { font-family: var(--font-brand); font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.gg { color: var(--brand); }
.mark { width: 32px; height: 32px; flex-shrink: 0; }
.brandmark { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.brandmark img { width: 36px; height: 36px; }
.brandmark .wordmark { font-size: 19px; }

/* 3D-Icons: Hell/Dunkel wechseln mit dem Theme, aktiv = grün */
.ic3d { display: inline-grid; place-items: center; flex-shrink: 0; }
.ic3d img { width: 100%; height: 100%; display: none; }
.ic3d .ic-l { display: var(--d-light); }
.ic3d .ic-d { display: var(--d-dark); }
.ic3d .ic-a { display: none; }
.ic3d.on .ic-l, .ic3d.on .ic-d, .active .ic3d .ic-l, .active .ic3d .ic-d { display: none; }
.ic3d.on .ic-a, .active .ic3d .ic-a { display: block; }

.ggcoin { width: 22px; height: 22px; flex-shrink: 0; background: url(/brand/icons/aktiv/gg-punkte.png) center / contain no-repeat; }

/* ---------- Kopfleiste (Desktop) ---------- */
.topnav { position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 16px; padding: 0 24px; background: var(--nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.mainnav { display: flex; gap: 4px; margin: 0 auto; }
.mainnav a { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 8px; border-radius: 12px; color: var(--muted); font-weight: 600; font-size: 15px; transition: background .15s, color .15s; }
.mainnav a .ic3d { width: 28px; height: 28px; opacity: .8; }
.mainnav a:hover { color: var(--ink); background: var(--surface); }
.mainnav a.active { color: var(--brand-text); background: var(--brand-tint); font-weight: 800; }
.mainnav a.active .ic3d { opacity: 1; }
.ggchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 7px; border-radius: var(--r-chip); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.userchip { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 4px; border-radius: var(--r-chip); background: var(--surface); font-weight: 600; font-size: 14px; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.avatar.framed { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--frame-gold); }
.badge-pass { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--on-brand); background: var(--brand); padding: 2px 7px; border-radius: 999px; }

main { max-width: 1080px; margin: 0 auto; padding: 24px 24px 32px; outline: none; }
.sitefoot { max-width: 1080px; margin: 0 auto; padding: 8px 24px 56px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; font-size: 12px; font-weight: 600; }
.sitefoot a { color: var(--muted); text-decoration: none; }
.sitefoot a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- Unterer Tab-Bar (Mobil) ---------- */
.bottomnav { display: none; }

/* ---------- Kopf je Seite ---------- */
.pagehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; min-height: 44px; }
.pagehead h1, .pagetitle { font-family: var(--font-brand); font-weight: 700; font-size: 34px; letter-spacing: 0; }
.pagehead .ggchip { display: none; }
.apphead { display: none; }
.backlink { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--brand-text); font-weight: 600; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 12px; }
.section-head h2 { font-size: 20px; font-weight: 800; }
.caps { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--r-btn); background: var(--surface); color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.2; text-align: center; cursor: pointer; transition: background .15s, opacity .15s, transform .05s; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { background: var(--btn); opacity: .86; }
.btn.outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.outline:hover { background: var(--surface); }
.btn.tint { background: var(--brand-tint); color: var(--brand-text); }
.btn.tint:hover { background: var(--brand-tint); opacity: .85; }
.btn.light { background: #FFFFFF; color: #000000; }
.btn.light:hover { background: #FFFFFF; opacity: .9; }
.btn.quiet { background: transparent; color: var(--muted); font-weight: 600; }
.btn.quiet:hover { background: var(--surface); color: var(--ink); }
.btn.big { min-height: 52px; padding: 0 24px; font-size: 16px; }
.btn.sm { min-height: 36px; padding: 0 14px; font-size: 14px; border-radius: 11px; }
.btn.pill { border-radius: var(--r-chip); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.link { color: var(--brand-text); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; }
.roundbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; flex-shrink: 0; }
.roundbtn.onart { background: rgba(255, 255, 255, .92); color: #000000; }
.roundbtn .ic3d { width: 26px; height: 26px; }

/* Kleine Bedienelemente behalten ihre Optik, bekommen aber eine Tap-Fläche von mindestens 44 px */
.segment button, .btn.sm, .ggchip, .hero .btn, .hero h2 a, .block-head .link { position: relative; }
.segment button::after, .btn.sm::after, .ggchip::after, .hero .btn::after, .hero h2 a::after, .block-head .link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; min-height: 100%; transform: translateY(-50%); }

/* ---------- Segment-Control ---------- */
.segment { display: flex; gap: 2px; padding: 3px; border-radius: 13px; background: var(--surface); }
.segment button { flex: 1; min-height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.segment button[aria-pressed=true] { background: var(--brand); color: var(--on-brand); }
.segment.inline { display: inline-flex; }
.segment.sm button { min-height: 32px; padding: 0 12px; font-size: 13px; }

/* ---------- Fortschrittsbalken ---------- */
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bar > div { height: 100%; border-radius: 3px; background: var(--brand); }

/* ---------- Spiel-Art ---------- */
.cover-bg { background-color: var(--surface-2); background-size: cover; background-position: center; }

/* ---------- Spiele (Store) ---------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; min-height: 300px; padding: 32px; border-radius: 22px; color: #FFFFFF; }
.hero > .cover-bg { position: absolute; inset: 0; }
.hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, 0) 62%); pointer-events: none; }
.hero > .content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.hero .eyebrow { color: rgba(255, 255, 255, .88); }
.hero h2 { font-family: var(--font-brand); font-weight: 700; font-size: 40px; letter-spacing: 0; text-shadow: 0 1px 12px rgba(0, 0, 0, .18); }
.hero .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.hero .meta { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); }
/* Mit echtem Titelbild: Bild vollständig oben, Text darunter (das Logo steckt im Bild) */
.hero.has-cover { display: block; min-height: 0; padding: 0; background: var(--surface); color: var(--ink); }
.hero.has-cover::after { display: none; }
.hero.has-cover > .cover-bg { position: relative; inset: auto; aspect-ratio: 16 / 10; max-height: 440px; width: 100%; }
.hero.has-cover > .content { max-width: none; padding: 14px 18px 16px; gap: 4px; }
.hero.has-cover .eyebrow { color: var(--muted); }
.hero.has-cover h2 { font-size: 22px; text-shadow: none; }
.hero.has-cover .meta { color: var(--muted); }
.hero-emblem { position: absolute; right: 6%; top: 50%; width: min(34%, 240px); transform: translateY(-58%) rotate(-8deg); opacity: .95; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .18)); z-index: 1; pointer-events: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); background: var(--surface); transition: transform .15s; }
.card:hover { transform: translateY(-2px); }
.card .cover { position: relative; aspect-ratio: 16 / 10; }
.card .body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 13px; min-width: 0; }
.card h3 { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .subrow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.card .dev { flex-shrink: 0; max-width: 55%; font-size: 12px; font-weight: 700; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { position: absolute; top: 8px; left: 8px; padding: 3px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; background: rgba(0, 0, 0, .55); color: #FFFFFF; }
.tag.live { background: #FFFFFF; color: #000000; }
.ext { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #FFFFFF; font-size: 14px; font-weight: 800; }
.search { display: flex; align-items: center; gap: 8px; height: 44px; margin: -2px 0 14px; padding: 0 14px; border-radius: 12px; background: var(--surface); color: var(--muted); }
.search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.search:focus-within { box-shadow: 0 0 0 2px var(--brand); }
.card[hidden] { display: none; }
.nohits { margin-top: 8px; }
.ptitle { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-text); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

.passbanner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 32px; padding: 22px 24px; border-radius: 20px; background: var(--surface); }
.passbanner .pb-text { display: flex; align-items: center; gap: 14px; }
.passbanner .pb-text .ic3d { width: 52px; height: 52px; }
.passbanner h2 { font-size: 18px; }

.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 20px; text-align: center; color: var(--muted); }
.empty h2 { color: var(--ink); font-size: 22px; }
.empty img.pad3d { width: 132px; height: 132px; }

/* ---------- Spiel-Detail ---------- */
.gd-hero { position: relative; aspect-ratio: 21 / 9; min-height: 220px; max-height: 340px; border-radius: 22px; overflow: hidden; display: grid; place-items: center; }
.gd-hero .roundbtn { position: absolute; top: 14px; left: 14px; z-index: 1; }
.gd-hero .emblem { width: min(30%, 180px); filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .2)); transform: rotate(-6deg); }
.gd-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 32px; align-items: start; margin-top: 22px; }
.gd-info { display: flex; flex-direction: column; gap: 10px; }
.gd-info h1 { font-family: var(--font-brand); font-weight: 700; font-size: 34px; letter-spacing: 0; }
.gd-info .meta { color: var(--muted); font-size: 14px; }
.gd-info .desc { font-size: 16px; }
.gd-side { display: flex; flex-direction: column; gap: 22px; }
.gd-play { display: flex; flex-direction: column; gap: 8px; }
.features { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.features li { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.features li::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex-shrink: 0; }

.block { display: flex; flex-direction: column; gap: 10px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.block-head h2 { font-size: 18px; }
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rowitem { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 14px; border-radius: 14px; background: var(--surface); }
.rowitem .grow { flex: 1; min-width: 0; }
.rowitem .grow b { display: block; font-size: 15px; }
.rowitem .grow small { display: block; color: var(--muted); font-size: 13px; line-height: 1.3; }
.rowitem .ic3d { width: 36px; height: 36px; }
.rowitem.locked { opacity: .5; }
.plus { color: var(--brand-text); font-weight: 800; font-size: 14px; white-space: nowrap; }
.locked .plus { color: var(--muted); }
.lb-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 12px; background: var(--surface); font-variant-numeric: tabular-nums; }
.lb-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .rk { color: var(--muted); font-weight: 700; }
.lb-row.me { background: var(--brand-tint); }
.lb-row.me .rk { color: var(--brand-text); }
.lb-list { display: flex; flex-direction: column; gap: 6px; }

/* ---------- Spieler ---------- */
.player { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; background: #000000; }
.player .pbar { display: flex; align-items: center; gap: 10px; height: calc(52px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.player .pbar .title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.iconbtn { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.iconbtn:hover { background: var(--surface); }
.player iframe { flex: 1; width: 100%; border: 0; background: #000000; }

/* ---------- Ranking ---------- */
.rk-top { display: flex; flex-direction: column; gap: 14px; }
.rk-note { font-size: 14px; color: var(--muted); max-width: 620px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; margin-top: 8px; max-width: 520px; }
.podium .pcol { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.podium .pname { font-size: 13px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .pscore { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.podium .avatar { width: 44px; height: 44px; font-size: 16px; background: var(--surface); color: var(--ink); }
.podium .pblock { width: 100%; display: grid; place-items: center; border-radius: 14px 14px 0 0; background: var(--surface); font-family: var(--font-brand); font-weight: 700; font-size: 26px; }
.podium .p1 .pblock { height: 108px; background: var(--brand); color: var(--on-brand); }
.podium .p2 .pblock { height: 76px; }
.podium .p3 .pblock { height: 60px; }
.podium .me .pname { color: var(--brand-text); }
.podium .empty-slot { opacity: .45; }
.rk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.rk-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 52px; padding: 0 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rk-row .rk-rank { color: var(--muted); font-weight: 700; }
.rk-row .rk-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row .rk-score { font-weight: 700; }
.rk-row.me { border-radius: 12px; border-bottom-color: transparent; background: var(--brand-tint); }
.rk-row.me .rk-rank { color: var(--brand-text); }
.rk-sep { list-style: none; text-align: center; color: var(--muted); padding: 4px 0; }
.rk-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 32px; align-items: start; margin-top: 22px; }
.rk-me { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface); }
.rk-me .nums { display: flex; gap: 28px; flex-wrap: wrap; }
.rk-me .nums b { display: block; font-family: var(--font-brand); font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rk-me .nums span { font-size: 12px; color: var(--muted); }
.tier { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tier .ggcoin { width: 18px; height: 18px; }
.notice { padding: 14px 16px; border-radius: 14px; background: var(--surface); font-size: 14px; overflow-wrap: anywhere; }
.notice.tinted { background: var(--brand-tint); }
.cta-card { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px; border-radius: 18px; background: var(--surface); }
.cta-card h3 { font-size: 17px; }

/* ---------- Belohnungen ---------- */
.balance-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 22px; background: var(--card-dark); color: #FFFFFF; }
.balance-card .top { display: flex; align-items: center; gap: 14px; }
.balance-card .top img { width: 52px; height: 52px; }
.balance-card .bal { display: block; font-family: var(--font-brand); font-weight: 700; font-size: 34px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.balance-card small { font-size: 13px; color: rgba(255, 255, 255, .7); }
.balance-card .bar { background: rgba(255, 255, 255, .18); }
.rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.rcard { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: var(--r-card); background: var(--surface); }
.rcard .ic3d { width: 56px; height: 56px; margin-bottom: 10px; }
.rcard h3 { font-size: 15px; font-weight: 700; }
.rcard .sub { font-size: 12px; color: var(--muted); }
.rcard .desc { font-size: 13px; color: var(--muted); line-height: 1.35; }
.rcard .act { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; }
.rcard .btn { width: 100%; }
.rcard .btn[disabled] { background: var(--surface-2); color: var(--muted); opacity: 1; }
.owned { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; color: var(--brand-text); font-weight: 700; font-size: 14px; }
.earn-list .rowitem { min-height: 48px; justify-content: space-between; }

/* ---------- Pass ---------- */
.passcard { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; padding: 18px 20px; border-radius: 22px; background: linear-gradient(135deg, var(--brand) 0%, var(--brand-600) 100%); color: #FFFFFF; max-width: 560px; }
.passcard .pc-top { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.passcard .pc-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 2px; }
.passcard .pc-bottom small { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.passcard .pc-name { font-family: var(--font-brand); font-weight: 700; font-size: 30px; line-height: 1.1; overflow-wrap: anywhere; }
.passcard .pc-mark { position: absolute; right: -6%; bottom: -26%; width: 62%; max-width: 320px; opacity: .22; pointer-events: none; }
.pass-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: 32px; align-items: start; }
.pass-intro { margin-top: 14px; color: var(--muted); max-width: 52ch; }
.pass-active { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--brand-tint); }
.pass-active b { color: var(--brand-text); }
.perklist .rowitem .ic3d { width: 40px; height: 40px; }
.missed { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 18px; background: var(--surface); }
.missed-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.missed-grid b { display: block; font-family: var(--font-brand); font-weight: 700; font-size: 24px; color: var(--brand-text); }
.missed-grid span { font-size: 13px; color: var(--muted); }
.drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.drop { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: var(--r-card); background: var(--surface); }
.drop .sub { font-size: 12px; color: var(--muted); }
.drop h3 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.drop h3 svg { color: var(--muted); flex-shrink: 0; }
.drop p { font-size: 13px; color: var(--muted); }
.compare-wrap { overflow-x: auto; border-radius: 18px; background: var(--surface); }
.compare { width: 100%; border-collapse: collapse; min-width: 340px; font-size: 14px; }
.compare th, .compare td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare th { font-size: 12px; font-weight: 700; color: var(--muted); }
.compare td:not(:first-child), .compare th:not(:first-child) { text-align: center; white-space: nowrap; }
.compare .pcol { font-weight: 800; }
.compare .yes { color: var(--brand-text); font-weight: 800; }
.compare .no { color: var(--muted); }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.plan { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px; border: 0; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line); text-align: left; cursor: pointer; }
.plan[aria-checked=true] { box-shadow: inset 0 0 0 2px var(--brand); background: var(--brand-tint); }
.plan b { font-family: var(--font-brand); font-weight: 700; font-size: 24px; font-variant-numeric: tabular-nums; }
.plan .muted { font-size: 13px; }
.plan-badge { position: absolute; top: -10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: var(--btn); color: var(--btn-ink); font-size: 11px; font-weight: 800; white-space: nowrap; }
.buybox { display: flex; flex-direction: column; gap: 12px; }
.pass-cta { position: sticky; bottom: 16px; z-index: 5; display: flex; flex-direction: column; gap: 6px; padding: 12px 0 0; background: linear-gradient(0deg, var(--bg) 70%, transparent); }
.pass-cta small { text-align: center; color: var(--muted); font-size: 12px; }

/* ---------- Profil ---------- */
.ptop { display: flex; justify-content: flex-end; min-height: 44px; }
.phead { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; margin-top: -8px; }
.phead .avatar { width: 88px; height: 88px; font-size: 36px; margin-bottom: 6px; }
.phead h1 { font-size: 26px; font-weight: 800; overflow-wrap: anywhere; }
.phead .tierline { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.phead .tierline .ggcoin { width: 18px; height: 18px; }
.statrow { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px auto 0; max-width: 520px; padding: 12px 6px; border-radius: 18px; background: var(--surface); text-align: center; }
.statrow > * { display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
.statrow b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.statrow span { font-size: 12px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; border-radius: 18px; background: var(--surface); text-align: center; }
.tile .ic3d { width: 46px; height: 46px; }
.tile span { max-width: 100%; font-size: 12px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile.locked { opacity: .35; }
.profile-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.libitem { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; background: var(--surface); }
.libitem .thumb { width: 72px; aspect-ratio: 16 / 10; border-radius: 10px; flex-shrink: 0; }
.libitem .grow { flex: 1; min-width: 0; }
.libitem b { display: block; font-size: 15px; }
.libitem small { color: var(--muted); font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--surface); font-size: 13px; font-weight: 600; }

/* ---------- Einstellungen (gruppierte Listen wie iOS) ---------- */
.settings-wrap { max-width: 640px; margin: 0 auto; }
.grouph { margin: 26px 0 8px 16px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.group { overflow: hidden; border-radius: 14px; background: var(--surface); }
.setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; padding: 8px 16px; border: 0; background: transparent; color: var(--ink); font-size: 15px; font-weight: 400; text-align: left; position: relative; }
.setrow + .setrow::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--line); }
.setrow .val { color: var(--muted); display: inline-flex; align-items: center; gap: 4px; text-align: right; overflow-wrap: anywhere; }
.setrow .lbl { display: flex; flex-direction: column; }
.setrow .lbl small { color: var(--muted); font-size: 12px; }
button.setrow, a.setrow { cursor: pointer; }
button.setrow:hover, a.setrow:hover { background: var(--surface-2); }
.chev { color: var(--muted); font-size: 18px; line-height: 1; }
.switch { appearance: none; -webkit-appearance: none; position: relative; width: 51px; height: 31px; margin: 0; border-radius: 16px; background: var(--surface-2); flex-shrink: 0; cursor: pointer; transition: background .2s; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .2s; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(20px); }
.select { min-height: 36px; padding: 0 8px; border: 0; border-radius: 10px; background: var(--surface-2); color: var(--ink); }
.settings-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }

/* ---------- Anmelden ---------- */
.auth { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 400px; margin: 24px auto 0; text-align: center; }
.auth .auth-mark { width: 92px; height: 92px; }
.auth .wordmark { font-size: 22px; margin-top: -6px; }
.auth h1 { font-size: 26px; font-weight: 800; margin-top: 18px; }
.auth > p { color: var(--muted); font-size: 15px; }
.authform { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; }
.authform .btn { width: 100%; }
.authform .or { text-align: center; font-size: 12px; color: var(--muted); margin: 4px 0; }
.authform .guest { align-self: center; min-height: 44px; }
.soon { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }

/* ---------- Formulare ---------- */
label { font-weight: 600; font-size: 14px; }
input[type=email], input[type=text] { width: 100%; min-height: 50px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--bg); color: var(--ink); font-size: 16px; }
input[type=email]:focus, input[type=text]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.field { display: flex; flex-direction: column; gap: 8px; }
.agecheck { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.agecheck legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.agerow { display: flex; gap: 8px; }
.agerow select { flex: 1; min-width: 0; min-height: 50px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--bg); color: var(--ink); font-size: 16px; }
.agerow select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.error { color: var(--ink); font-size: 14px; font-weight: 600; }
.error:empty { display: none; }
.error::before { content: '!'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: var(--bg); font-size: 12px; font-weight: 800; vertical-align: 1px; }

/* Checkbox (Widerrufsverzicht) */
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--surface); font-weight: 400; font-size: 13px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; display: grid; place-items: center; width: 22px; height: 22px; margin: 0; border: 2px solid var(--muted); border-radius: 6px; background: transparent; flex-shrink: 0; cursor: pointer; }
.check input:checked { border-color: var(--brand); background: var(--brand); }
.check input:checked::after { content: ''; width: 6px; height: 11px; margin-top: -2px; border: solid #FFFFFF; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ---------- Dialoge und Bottom-Sheets ---------- */
.modal-back { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: var(--scrim); animation: fade .15s; }
.modal { position: relative; display: flex; flex-direction: column; gap: 14px; width: min(440px, 100%); max-height: calc(100dvh - 32px); overflow: auto; padding: 24px; border-radius: 24px; background: var(--elevated); box-shadow: var(--shadow); }
.modal h2 { font-size: 22px; padding-right: 36px; }
.modal .close { position: absolute; top: 10px; right: 10px; }
.modal .grip { display: none; }
.modal .check, .modal .notice, .modal .rowitem { background: var(--inset); }
.prodrow { display: flex; align-items: center; gap: 12px; }
.prodrow .prodart { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.prodrow .prodart img { width: 38px; height: 38px; }
.prodrow .grow { flex: 1; min-width: 0; }
.prodrow .grow b { display: block; font-size: 17px; line-height: 1.2; }
.prodrow .grow small { color: var(--muted); font-size: 13px; }
.prodrow .price { font-size: 18px; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fineprint { text-align: center; color: var(--muted); font-size: 12px; }

/* ---------- Erfolgs-Overlay ---------- */
.ach-overlay { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, .55); animation: fade .2s; }
.ach-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(340px, 100%); padding: 30px 22px 22px; border-radius: 28px; background: #1C1C1E; color: #FFFFFF; text-align: center; box-shadow: 0 0 0 1px rgba(24, 195, 126, .25), 0 0 80px rgba(24, 195, 126, .38), 0 24px 60px rgba(0, 0, 0, .5); animation: pop .35s cubic-bezier(.2, .9, .3, 1.3); }
.ach-card .ach-img { width: 116px; height: 116px; filter: drop-shadow(0 10px 24px rgba(24, 195, 126, .45)); }
.ach-card .eyebrow { color: var(--brand); margin-top: 6px; }
.ach-card h2 { font-size: 24px; }
.ach-card p { color: rgba(255, 255, 255, .7); font-size: 14px; }
.ach-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 8px; margin: 6px 0 8px; border-radius: 999px; background: rgba(24, 195, 126, .16); color: var(--brand); font-weight: 800; }
.ach-card .btn { width: 100%; }
.confetti { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.confetti i { position: absolute; top: -10px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); opacity: 0; animation: drop 2.6s ease-in forwards; }
.confetti i:nth-child(even) { background: #FFFFFF; width: 5px; height: 5px; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { min-width: 240px; max-width: 360px; padding: 12px 16px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: 14px; box-shadow: var(--shadow); animation: slide .25s; }
.toast b { display: block; font-size: 14px; }

/* ---------- Splash / Laden ---------- */
.splash { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 60dvh; }
.splash img { width: 150px; height: 150px; }
.splash .wordmark { font-size: 24px; }
.skeleton { border-radius: var(--r-card); background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }

@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateY(12px); opacity: 0; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
@keyframes drop { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(420px) rotate(160deg); } }
@keyframes sheet { from { transform: translateY(100%); } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .topnav { gap: 10px; padding: 0 16px; }
  .mainnav a { padding: 0 10px 0 6px; font-size: 14px; }
  .brandmark .wordmark, .userchip .name, #installBtn { display: none; }
  .userchip { padding: 0 4px; }
}

/* ---------- Mobil ---------- */
@media (max-width: 760px) {
  .topnav { display: none; }
  main { padding: calc(10px + env(safe-area-inset-top)) 16px 24px; }
  .sitefoot { padding: 4px 16px calc(var(--nav-h) + 32px + env(safe-area-inset-bottom)); }
  .pagehead { margin-bottom: 14px; }
  .pagehead h1, .pagetitle { font-size: 30px; }
  .pagehead .ggchip { display: inline-flex; }
  .apphead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .apphead .brandmark img { width: 30px; height: 30px; }
  .apphead .brandmark .wordmark { font-size: 16px; }

  .bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; align-items: stretch; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: var(--nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid var(--line); }
  .bottomnav a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); }
  .bottomnav a:not(.center) { opacity: .8; }
  .bottomnav a.active { opacity: 1; }
  .bottomnav .ic3d { width: 28px; height: 28px; }
  .bottomnav .tabicon { display: grid; place-items: center; height: 32px; padding: 2px 10px; border-radius: 12px; }
  .bottomnav a.active .tabicon { background: var(--brand-tint); }
  .bottomnav .tablabel { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 600; }
  .bottomnav a.active .tablabel { color: var(--brand-text); font-weight: 800; }
  .bottomnav a.center { justify-content: flex-end; padding-bottom: 7px; }
  .bottomnav .center-btn { display: grid; place-items: center; width: 52px; height: 52px; margin-top: -24px; margin-bottom: 2px; border-radius: 18px; background: var(--center-btn); box-shadow: 0 0 0 4px var(--bg); transition: background .15s, box-shadow .15s; }
  .bottomnav .center-btn img { width: 34px; height: 34px; }
  .bottomnav a.center.active .center-btn { background: var(--brand); box-shadow: 0 0 0 4px var(--bg), 0 8px 18px rgba(24, 195, 126, .35); }

  .hero { min-height: 200px; padding: 18px; border-radius: 20px; margin-top: 10px; }
  .hero h2 { font-size: 24px; }
  .hero .btn.light { min-height: 36px; padding: 0 16px; font-size: 14px; }
  .hero-emblem { display: none; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card .body { padding: 8px 11px 10px; }
  .card h3 { font-size: 13px; }
  .card .sub { font-size: 11px; }
  .passbanner { padding: 16px; }

  .gd-hero { margin: calc(-10px - env(safe-area-inset-top)) -16px 0; border-radius: 0; aspect-ratio: auto; height: calc(230px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .gd-hero .roundbtn { top: calc(12px + env(safe-area-inset-top)); left: 16px; }
  .gd-main { grid-template-columns: 1fr; gap: 22px; margin-top: 18px; }
  .gd-info h1 { font-size: 26px; }

  .rk-layout, .profile-cols, .pass-layout { grid-template-columns: 1fr; }
  .podium { max-width: none; }
  .rewards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rcard { padding: 12px; }
  .rcard .ic3d { width: 48px; height: 48px; }
  .rcard .desc { display: none; }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .passcard { min-height: 170px; }
  .passcard .pc-name { font-size: 26px; }
  .pass-cta { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 16px 16px 10px; }
  .pass-page { padding-bottom: 96px; }
  .auth { margin-top: 8vh; }

  .modal-back { align-items: end; padding: 0; }
  .modal { width: 100%; max-height: 92dvh; padding: 10px 20px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; animation: sheet .25s ease-out; }
  .modal .grip { display: block; align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--surface-2); margin-bottom: 6px; }
  .modal .close { top: 14px; right: 12px; }
  .modal h2 { margin-top: 6px; }

  #toasts { left: 16px; right: 16px; bottom: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}
@media (max-width: 380px) {
  .bottomnav .tablabel { font-size: 9px; }
  .bottomnav .tabicon { padding: 2px 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* =====================================================================
   Wärmere CI (24.09.2026): warme Neutraltöne statt kaltem Grau, runde
   Schriften, weiche Schatten, Gold als zweiter Akzent für GG und Belohnungen.
   Markengrün #18C37E bleibt. Kein Rot, Lila oder Pink.
   ===================================================================== */
:root {
  --font-brand: 'Fredoka', 'Nunito', system-ui, sans-serif;   /* Überschriften: rund und freundlich */
  --font-ui: 'Nunito', -apple-system, system-ui, sans-serif;   /* Fließtext */
  --bg: #FBF8F2; --surface: #F3EEE4; --surface-2: #E8E0D1; --line: #E6DDCC;
  --ink: #221E18; --muted: #6B6358; --nav: rgba(251, 248, 242, .92);
  --btn: #221E18; --btn-ink: #FFFDF8; --elevated: #FFFDF8; --inset: #F3EEE4;
  --card: #FFFDF8; --card-dark: #1B4D38; --center-btn: #221E18;
  --gold: #FFC400; --gold-tint: rgba(255, 196, 0, .18); --gold-ink: #7A5A00;
  --glow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 6px 18px rgba(80, 55, 15, .08);
  --shadow: 0 14px 34px rgba(80, 55, 15, .16);
  --r-card: 22px; --r-btn: 16px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14130F; --surface: #211F1A; --surface-2: #2E2B24; --line: #36322A;
    --ink: #F7F2E8; --muted: #A89F92; --nav: rgba(20, 19, 15, .92);
    --btn: #F7F2E8; --btn-ink: #14130F; --elevated: #221F1A; --inset: #2E2B24;
    --card: #221F1A; --card-dark: #173F2F; --center-btn: #2E2B24;
    --gold-ink: #FFD54A; --glow: 0 6px 18px rgba(0, 0, 0, .35); --shadow: 0 14px 34px rgba(0, 0, 0, .55);
  }
}
:root[data-theme="dark"] {
  --bg: #14130F; --surface: #211F1A; --surface-2: #2E2B24; --line: #36322A;
  --ink: #F7F2E8; --muted: #A89F92; --nav: rgba(20, 19, 15, .92);
  --btn: #F7F2E8; --btn-ink: #14130F; --elevated: #221F1A; --inset: #2E2B24;
  --card: #221F1A; --card-dark: #173F2F; --center-btn: #2E2B24;
  --gold-ink: #FFD54A; --glow: 0 6px 18px rgba(0, 0, 0, .35); --shadow: 0 14px 34px rgba(0, 0, 0, .55);
}
/* Die Wortmarke bleibt in der Logo-Schrift */
.wordmark { font-family: 'Chakra Petch', system-ui, sans-serif; }
h1, h2, h3 { font-family: var(--font-brand); font-weight: 600; letter-spacing: 0; }
.pagehead h1, .pagetitle { font-weight: 700; }
.greet { margin: -12px 0 16px; color: var(--muted); font-size: 15px; font-weight: 600; }
body { background: radial-gradient(120% 60% at 50% -10%, rgba(24, 195, 126, .07), transparent 60%), var(--bg); background-attachment: fixed; }

/* Karten heben sich weich vom warmen Grund ab */
.card, .rcard, .drop, .hero.has-cover, .cta-card, .rk-me, .missed, .libitem, .tile, .rowitem, .group, .statrow, .passbanner, .compare-wrap {
  background: var(--card); box-shadow: var(--glow); }
.card:hover { transform: translateY(-3px) rotate(-.3deg); box-shadow: var(--shadow); }
.card .cover { border-radius: 16px; margin: 6px 6px 0; }
.tag { border-radius: 10px; }
.tag.live { background: var(--gold); color: #3A2A00; }

/* Gold als zweiter, warmer Akzent: GG-Punkte, Belohnungen, Stufen */
.ggchip { background: var(--gold-tint); color: var(--ink); }
.tier { background: var(--gold-tint); }
.ach-chip { background: var(--gold-tint); color: var(--gold); }
.btn.tint { background: var(--gold-tint); color: var(--gold-ink); }
.plus { color: var(--gold-ink); }
.balance-card { background: linear-gradient(135deg, var(--card-dark) 0%, #0F3A28 100%); box-shadow: var(--shadow); }
.balance-card .bar > div { background: linear-gradient(90deg, var(--brand), var(--gold)); }
.bar > div { background: linear-gradient(90deg, var(--brand), #7BDC57); }

/* Buttons weicher und etwas verspielter */
.btn { font-weight: 800; }
.btn.primary { box-shadow: 0 4px 0 rgba(0, 0, 0, .12); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); }
.segment button[aria-pressed=true] { box-shadow: 0 3px 8px rgba(24, 195, 126, .35); }
.switch:checked { background: linear-gradient(90deg, var(--brand), #3FD99A); }

/* Navigation: warmer Grund, aktiver Spiele-Button leuchtet grün */
.topnav, .bottomnav { border-color: var(--line); }
.bottomnav .center-btn { box-shadow: 0 0 0 4px var(--bg), 0 6px 14px rgba(80, 55, 15, .18); }
.avatar { background: linear-gradient(135deg, #2AD892, var(--brand-600)); }
.podium .p1 .pblock { background: linear-gradient(180deg, var(--brand) 0%, var(--brand-600) 100%); }
.podium .p2 .pblock, .podium .p3 .pblock { background: var(--card); box-shadow: var(--glow); }
.rk-row.me { background: var(--brand-tint); }
.passcard { box-shadow: 0 16px 36px rgba(24, 195, 126, .35); }
.splash img { filter: drop-shadow(0 18px 30px rgba(24, 195, 126, .35)); }