/* Schrift Outfit lokal (SIL Open Font License) – keine Verbindung zu Google Fonts nötig */
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/outfit-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/outfit-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/outfit-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/outfit-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/outfit-latin-800-normal.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 900; font-display: swap; src: url('/assets/fonts/outfit-latin-900-normal.woff2') format('woff2'); }

/* ============================================================
   GuessTheAnime v3 – Design-System
   Aufbau: 1 Tokens · 2 Basis · 3 Layout · 4 Komponenten · 5 Seiten · 6 Responsive
   ============================================================ */

/* ---------- 1 · Tokens ---------- */
:root {
    color-scheme: dark;

    --bg:          #0e0d0c;
    --bg-glow:     rgba(249, 168, 120, .07);
    --surface:     #171615;      /* Karten */
    --surface-2:   #1f1d1c;      /* Kacheln in Karten, Inputs */
    --surface-3:   #282624;      /* Hover, neutrale Pills */
    --line:        rgba(255, 255, 255, .07);
    --line-2:      rgba(255, 255, 255, .12);

    --text:        #f4f1ee;
    --text-2:      #b3ada8;
    --text-3:      #7b7571;

    --accent:      #f8a878;
    --accent-2:    #f39363;      /* dunklere Kante (3D-Button) */
    --accent-ink:  #1a1210;      /* Text auf Akzent */
    --accent-soft: rgba(248, 168, 120, .14);
    --accent-text: #f8a878;      /* Akzent als Schriftfarbe */

    --green:       #4ade80;
    --green-soft:  rgba(74, 222, 128, .14);
    --red:         #f26b6b;
    --red-soft:    rgba(242, 107, 107, .15);
    --blue:        #7cc4f0;
    --blue-soft:   rgba(124, 196, 240, .14);
    --pink:        #f06292;
    --gold:        #f5b942;

    --m-screenshot: #f0a070;  --m-screenshot-bg: #33261d;
    --m-character:  #f075b0;  --m-character-bg:  #35202d;
    --m-emoji:      #f5cf4a;  --m-emoji-bg:      #34301b;
    --m-silhouette: #a68bf5;  --m-silhouette-bg: #2a2440;

    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 22px;
    --shadow:    0 10px 30px rgba(0, 0, 0, .35);

    --topbar-h:  76px;
    --bottomnav-h: 72px;
    --gap:       16px;
    --col-left:  256px;
    --col-right: 276px;
    --col-main:  640px;

    --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.2, .7, .3, 1);
}

[data-theme="light"] {
    color-scheme: light;
    --bg:          #f3eee8;
    --bg-glow:     rgba(240, 140, 90, .10);
    --surface:     #ffffff;
    --surface-2:   #f7f2ec;
    --surface-3:   #eee6dd;
    --line:        rgba(40, 25, 15, .08);
    --line-2:      rgba(40, 25, 15, .14);
    --text:        #1e1915;
    --text-2:      #5f5650;
    --text-3:      #968c85;
    --accent:      #f39a66;
    --accent-2:    #e07e48;
    --accent-soft: rgba(243, 154, 102, .16);
    --accent-text: #c25e26;
    --green:       #1f9d55;
    --green-soft:  rgba(31, 157, 85, .12);
    --red:         #d64545;
    --red-soft:    rgba(214, 69, 69, .12);
    --blue:        #2f8fcf;
    --blue-soft:   rgba(47, 143, 207, .12);
    --m-screenshot-bg: #fbe7da;
    --m-character-bg:  #fbe0ee;
    --m-emoji-bg:      #fbf2cf;
    --m-silhouette-bg: #ebe4fd;
    --m-emoji:     #d9a800;
    --shadow:      0 10px 30px rgba(60, 35, 20, .08);
}

/* ---------- 2 · Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(1200px 380px at 50% -120px, var(--bg-glow), transparent 70%),
        var(--bg);
    background-attachment: fixed;
    color: var(--text);
    font: 500 15px/1.45 var(--font);
    -webkit-font-smoothing: antialiased;
    padding-top: var(--topbar-h);
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.icon { width: 18px; height: 18px; flex-shrink: 0; }
.ic-flame  { color: var(--accent); }
.ic-coin   { color: var(--gold); }
.ic-freeze { color: var(--blue); }
.ic-heart  { color: var(--pink); }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.link-accent { color: var(--accent-text); font-weight: 600; font-size: 13px; }
.link-accent:hover { text-decoration: underline; }
[data-theme="dark"]  .only-light,
[data-theme="light"] .only-dark { display: none; }

/* ---------- 3 · Layout ---------- */
.topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 50;
    height: var(--topbar-h);
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line);
}
.topbar__inner {
    max-width: calc(var(--col-left) + var(--col-main) + var(--col-right) + 2 * 42px + 2 * 28px);
    height: 100%; margin: 0 auto; padding: 0 28px;
    display: flex; align-items: center; gap: 24px;
}
.logo { font-size: 21px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.logo span { color: var(--accent-text); }

.topnav { flex: 1; display: flex; justify-content: center; gap: 4px; }
.topnav__link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 14px; border-radius: 12px;
    color: var(--text-2); font-weight: 600; font-size: 15px;
    transition: background .15s, color .15s;
}
.topnav__link .icon { width: 17px; height: 17px; }
.topnav__link:hover { color: var(--text); background: var(--surface-2); }
.topnav__link.is-active { color: var(--accent-text); background: var(--accent-soft); }

.topbar__right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.topbar__me { display: block; margin-left: 2px; }

.shell {
    max-width: calc(var(--col-left) + var(--col-main) + var(--col-right) + 2 * 42px + 2 * 28px);
    margin: 0 auto; padding: 28px 28px 40px;
    display: grid;
    grid-template-columns: var(--col-left) minmax(0, var(--col-main)) var(--col-right);
    grid-template-areas: "left main right" ". footer .";
    column-gap: 42px;
    justify-content: center;
    align-items: start;
}
.side--left  { grid-area: left; }
.side--right { grid-area: right; }
.shell > .footer { grid-area: footer; }
.main        { grid-area: main; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.side__sticky {
    position: sticky; top: calc(var(--topbar-h) + 28px);
    display: flex; flex-direction: column; gap: var(--gap);
}
.plain { max-width: 460px; margin: 0 auto; padding: 48px 20px 80px; }

.footer {
    margin-top: 16px; padding: 20px 0 4px;
    border-top: 1px solid var(--line);
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px;
    font-size: 13px; color: var(--text-3);
}
.footer__links { display: flex; flex-wrap: wrap; gap: 16px; }
.footer__links a { color: var(--accent-text); font-weight: 500; }
.footer__links a.footer__lang { color: var(--text-3); }

.bottomnav { display: none; }

/* ---------- 4 · Komponenten ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 16px;
}
.card__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 10px;
}
.card__head h2 { font-size: 15.5px; font-weight: 700; }

.section { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; }
.section__head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 18px; border-radius: 12px; border: 1px solid transparent;
    font-weight: 700; font-size: 15px; cursor: pointer; white-space: nowrap;
    transition: transform .12s var(--ease), background .15s, filter .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: var(--surface-2); border-color: var(--line); color: var(--text); }
.btn--ghost:hover { background: var(--surface-3); }
.btn--sm { padding: 8px 14px; font-size: 14px; border-radius: 11px; }
.btn--lg { padding: 14px 20px; font-size: 16px; }
.btn--xl { padding: 16px 22px; font-size: 19px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border-radius: 16px; }
.btn--block { width: 100%; }
.btn--3d { box-shadow: 0 5px 0 var(--accent-2), 0 14px 30px rgba(248, 168, 120, .22); }
.btn--3d:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--accent-2), 0 8px 20px rgba(248, 168, 120, .2); }
.btn--xl .icon { width: 20px; height: 20px; }

.icon-btn {
    width: 34px; height: 34px; border-radius: 10px;
    display: inline-grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2);
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn .icon { width: 16px; height: 16px; }

/* Chips in der Topbar */
.chip {
    height: 40px; padding: 0 14px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--surface); border: 1px solid var(--line);
    font-weight: 700; font-size: 15px; cursor: pointer;
    transition: background .15s;
}
.chip:hover { background: var(--surface-2); }
.chip--icon { width: 40px; padding: 0; justify-content: center; color: var(--accent); }
.chip--freeze { height: 30px; padding: 0 10px; font-size: 13px; background: var(--blue-soft); border-color: transparent; color: var(--blue); }
.chip--freeze .icon { width: 14px; height: 14px; }

/* Pills (Status) */
.pill {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px; border-radius: 8px;
    font-size: 12.5px; font-weight: 700; white-space: nowrap;
    background: var(--surface-3); color: var(--text-2);
}
.pill .icon { width: 12px; height: 12px; stroke-width: 3; }
.pill--won      { background: var(--green-soft); color: var(--green); }
.pill--lost     { background: var(--red-soft); color: var(--red); }
.pill--progress { background: var(--accent-soft); color: var(--accent-text); }
.pill--new      { background: var(--accent); color: var(--accent-ink); }
.pill--soon     { background: transparent; color: var(--text-3); border: 1px dashed var(--line-2); }
.pill--idle     { background: transparent; color: var(--text-3); }

/* Badges im Hero */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px; border-radius: 10px;
    font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.badge .icon { width: 14px; height: 14px; }
.badge--accent { background: var(--accent); color: var(--accent-ink); }
.badge--glass  { background: rgba(10, 8, 7, .55); color: #fff; backdrop-filter: blur(6px); letter-spacing: .02em; font-variant-numeric: tabular-nums; }

/* Avatare */
.avatar { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.avatar__face {
    width: 100%; height: 100%; border-radius: 50%;
    display: grid; place-items: center; overflow: hidden;
    background: var(--surface-3); color: var(--text); font-weight: 700;
}
.avatar__face img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 30px; height: 30px; font-size: 13px; }
.avatar--sm { width: 42px; height: 42px; font-size: 15px; }
.avatar--md { width: 38px; height: 38px; font-size: 15px; }
.avatar--lg { width: 56px; height: 56px; font-size: 20px; }
.avatar--hl .avatar__face { box-shadow: 0 0 0 2px var(--accent); }
/* Level-Ring: konischer Verlauf als Fortschritt */
.avatar--ring { padding: 4px; border-radius: 50%;
    background: conic-gradient(var(--accent) var(--pct), color-mix(in srgb, var(--accent) 22%, transparent) 0); }
.avatar--ring .avatar__face { box-shadow: 0 0 0 2px var(--surface); }
.avatar--ring.avatar--sm .avatar__face { background: var(--surface); }
.avatar__lvl {
    position: absolute; right: -3px; bottom: -3px;
    min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
    background: var(--accent); color: var(--accent-ink);
    font-size: 11px; font-weight: 800; display: grid; place-items: center;
    box-shadow: 0 0 0 2px var(--bg);
}
.avatar--lg .avatar__lvl { min-width: 20px; height: 20px; font-size: 12px; }

/* Fortschrittsbalken */
.bar { height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }

/* Segmente (Versuche) */
.seg { display: block; border-radius: 99px; background: rgba(255,255,255,.14); }
.seg--correct { background: var(--green); }
.seg--wrong   { background: var(--red); }
.seg--skip    { background: color-mix(in srgb, var(--red) 55%, var(--surface-3)); }
.seg--current { background: var(--accent); }
[data-theme="light"] .seg { background: rgba(40,25,15,.12); }
[data-theme="light"] .seg--correct { background: var(--green); }
[data-theme="light"] .seg--wrong   { background: var(--red); }
[data-theme="light"] .seg--current { background: var(--accent); }

/* Modus-Icons */
.mode-ic {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center;
}
.mode-ic .icon { width: 18px; height: 18px; }
.mode-ic--lg { width: 46px; height: 46px; border-radius: 12px; }
.mode-ic--lg .icon { width: 22px; height: 22px; }
.mode-ic--screenshot { background: var(--m-screenshot-bg); color: var(--m-screenshot); }
.mode-ic--character  { background: var(--m-character-bg);  color: var(--m-character); }
.mode-ic--emoji      { background: var(--m-emoji-bg);      color: var(--m-emoji); }
.mode-ic--silhouette { background: var(--m-silhouette-bg); color: var(--m-silhouette); }

.countdown { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.countdown .icon { width: 14px; height: 14px; }

/* Formulare */
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.field input {
    height: 48px; padding: 0 14px; border-radius: 12px;
    background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text);
    font-size: 15px; font-weight: 500; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field.has-error input { border-color: var(--red); }
.field small { color: var(--red); font-weight: 500; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); cursor: pointer; }
.check input { accent-color: var(--accent); width: 16px; height: 16px; }
.alert { padding: 10px 14px; border-radius: 12px; background: var(--red-soft); color: var(--red); font-size: 14px; font-weight: 600; }

/* Werbung */
.ad { display: grid; place-items: center; border-radius: var(--radius-lg); }
.ad--placeholder {
    border: 1.5px dashed var(--line-2); color: var(--text-3);
    grid-auto-flow: row; gap: 4px; align-content: center; text-align: center;
    font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.ad--placeholder small { font-size: 11px; letter-spacing: .02em; font-weight: 500; text-transform: none; }
.ad--rect   { min-height: 150px; }
.ad--banner { min-height: 100px; display: flex; align-items: center; justify-content: center; gap: 8px; }

/* ---------- Seitenleiste links ---------- */
.profile-card__head { display: flex; align-items: center; gap: 12px; }
.profile-card__id { display: flex; flex-direction: column; min-width: 0; }
.profile-card__name { font-size: 17px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.profile-card__title { font-size: 13px; font-weight: 600; color: var(--accent-text); }
.xpbar { margin-top: 14px; }
.xpbar__meta { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-bottom: 6px; }
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.stat-tile {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 9px 4px 8px; border-radius: 12px; background: var(--surface-2);
}
.stat-tile .icon { width: 15px; height: 15px; }
.stat-tile b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }

.guest-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guest-card__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.guest-card p { font-size: 13px; color: var(--text-2); margin-bottom: 4px; }

.mode-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.mode-row {
    display: flex; align-items: center; gap: 12px;
    padding: 8px; border-radius: 12px; transition: background .15s;
}
.mode-row:hover { background: var(--surface-2); }
.mode-row__name { flex: 1; font-weight: 700; font-size: 15px; }

.promo-card {
    display: block;
    background:
        radial-gradient(120% 120% at 100% 100%, rgba(240, 98, 146, .16), transparent 60%),
        var(--surface);
}
.promo-card__title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; }
.promo-card p { margin: 8px 0 10px; font-size: 13px; color: var(--text-2); }
.promo-card__cta { color: var(--accent-text); font-weight: 700; font-size: 13.5px; }
.promo-card:hover .promo-card__cta { text-decoration: underline; }

/* ---------- Seitenleiste rechts ---------- */
.rank-list, .friend-list { display: flex; flex-direction: column; gap: 4px; }
.rank-row, .friend-row { display: flex; align-items: center; gap: 10px; padding: 5px 0; }
.rank-row__pos { width: 16px; text-align: center; font-weight: 700; color: var(--text-3); }
.rank-row__pos.is-first { color: var(--accent-text); }
.rank-row__name, .friend-row__name { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; display: flex; align-items: center; gap: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rank-row__name .icon { width: 13px; height: 13px; }
.rank-row__lv { font-size: 13.5px; font-weight: 700; color: var(--accent-text); }
.rank-row.is-me .rank-row__name { color: var(--accent-text); }

/* ---------- 5 · Seiten ---------- */

/* Hero */
.hero {
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 384px; border-radius: var(--radius-lg);
    border: 1px solid var(--line-2);
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 16px 16px 18px;
    color: #fff;
}
.hero__bg {
    position: absolute; inset: -40px; z-index: -2;
    background-size: cover; background-position: center;
    filter: blur(22px) saturate(1.15);
    transform: scale(1.05);
}
.hero__bg--fallback {
    background:
        radial-gradient(60% 70% at 75% 30%, rgba(220, 70, 80, .55), transparent 70%),
        radial-gradient(50% 60% at 25% 20%, rgba(248, 168, 120, .35), transparent 70%),
        radial-gradient(70% 80% at 50% 100%, rgba(120, 60, 160, .35), transparent 70%),
        #241a18;
}
.hero__shade { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(14,13,12,.15) 0%, rgba(14,13,12,.25) 40%, rgba(14,13,12,.88) 100%); }
.hero__top { display: flex; justify-content: space-between; align-items: center; }
.hero__body { display: flex; flex-direction: column; gap: 10px; }
.hero__title { font-size: 40px; line-height: 1; font-weight: 900; text-transform: uppercase; letter-spacing: -.015em; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
.hero__sub { font-size: 14.5px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 6px; }
.hero__sub .icon { width: 15px; height: 15px; color: var(--green); stroke-width: 3; }
.hero--won .hero__sub { color: var(--green); font-weight: 700; }

.segbar { display: flex; align-items: center; gap: 12px; margin: 6px 0 12px; }
.segbar__track { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.segbar__track .seg { height: 5px; background: rgba(255,255,255,.16); }
.segbar__track .seg--correct { background: var(--green); }
.segbar__track .seg--wrong   { background: var(--red); }
.segbar__track .seg--skip    { background: #b5545a; }
.segbar__track .seg--current { background: var(--accent); }
.segbar__label { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.75); font-variant-numeric: tabular-nums; }

/* Streak */
.streak-card { padding: 16px 18px 14px; }
.streak-card__head { display: flex; align-items: center; gap: 12px; }
.streak-card__flame .icon { width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 0 10px rgba(248,168,120,.35)); }
.streak-card__flame.is-off .icon { color: var(--text-3); filter: none; }
.streak-card__text { flex: 1; }
.streak-card__text h2 { font-size: 21px; font-weight: 800; line-height: 1.15; }
.streak-card__text p { font-size: 13px; color: var(--text-3); }
.week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 14px; }
.week__day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week__ic {
    width: 40px; height: 40px; border-radius: 11px;
    display: grid; place-items: center;
    background: var(--surface-2); border: 1px solid var(--line); color: var(--text-3);
}
.week__ic .icon { width: 17px; height: 17px; }
.week__day--played .week__ic { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
.week__day--freeze .week__ic { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 40%, transparent); color: var(--blue); }
.week__day--missed .week__ic .icon { width: 14px; height: 14px; opacity: .5; }
.week__day.is-today .week__ic { border: 1.5px solid var(--accent); color: var(--accent); background: transparent; }
.week__day.is-today.week__day--played .week__ic { background: var(--accent-soft); }
.week__lbl { font-size: 12px; font-weight: 600; color: var(--text-3); }
.week__day.is-today .week__lbl { color: var(--accent-text); font-weight: 700; }

/* Mehr Spiele */
.game-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.game-card {
    display: flex; flex-direction: column; gap: 4px;
    padding: 14px; border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    min-height: 196px;
    transition: transform .18s var(--ease), border-color .18s;
}
.game-card:hover { transform: translateY(-2px); border-color: var(--line-2); }
.game-card--character  { background: linear-gradient(150deg, color-mix(in srgb, var(--m-character-bg) 80%, var(--surface)) 0%, var(--surface) 60%); }
.game-card--emoji      { background: linear-gradient(150deg, color-mix(in srgb, var(--m-emoji-bg) 80%, var(--surface)) 0%, var(--surface) 60%); }
.game-card--silhouette { background: linear-gradient(150deg, color-mix(in srgb, var(--m-silhouette-bg) 80%, var(--surface)) 0%, var(--surface) 60%); }
.game-card--screenshot { background: linear-gradient(150deg, color-mix(in srgb, var(--m-screenshot-bg) 80%, var(--surface)) 0%, var(--surface) 60%); }
.game-card .mode-ic { margin-bottom: 14px; }
.game-card__name { font-size: 17px; font-weight: 800; }
.game-card__desc { font-size: 13px; color: var(--text-2); line-height: 1.35; }
.game-card__foot { margin-top: auto; padding-top: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 600; }

/* Supporter-Banner */
.supporter-banner {
    display: flex; align-items: center; gap: 14px;
    padding: 14px; border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--pink) 35%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 10%, var(--surface)) 0%, color-mix(in srgb, var(--pink) 4%, var(--surface)) 100%);
    transition: border-color .15s;
}
.supporter-banner:hover { border-color: color-mix(in srgb, var(--pink) 60%, transparent); }
.supporter-banner__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--pink) 18%, transparent); color: var(--pink); }
.supporter-banner__ic .icon { width: 22px; height: 22px; }
.supporter-banner__text { flex: 1; display: flex; flex-direction: column; }
.supporter-banner__text b { font-weight: 800; font-size: 16px; }
.supporter-banner__text span { font-size: 13.5px; color: var(--text-2); }
.supporter-banner__price { padding: 6px 10px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font-weight: 800; }

/* Freunde (breite Liste) */
.list-card { padding: 0; overflow: hidden; }
.friend-wide { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.friend-wide + .friend-wide { border-top: 1px solid var(--line); }
.friend-wide__id { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.friend-wide__id b { font-size: 15px; }
.friend-wide__id .small { display: flex; align-items: center; gap: 4px; }
.friend-wide__id .icon { width: 12px; height: 12px; }
.minisegs { display: grid; grid-template-columns: repeat(6, 10px); gap: 4px; }
.minisegs .seg { height: 18px; border-radius: 4px; }

/* Leerer Zustand / Platzhalter */
.empty-state { text-align: center; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-state__ic { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.empty-state__ic .icon { width: 28px; height: 28px; }
.empty-state h1 { font-size: 24px; font-weight: 800; }
.empty-state .btn { margin-top: 10px; }

/* Login / Registrierung */
.auth { display: flex; justify-content: center; }
.auth-body .auth { min-height: 100vh; align-items: center; padding: 20px; }
.auth-body { padding-top: 0; }
.auth__card { width: 100%; max-width: 420px; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.auth__title { font-size: 26px; font-weight: 800; }
.auth__sub { color: var(--text-2); font-size: 14px; margin-top: -10px; }
.auth__alt { text-align: center; font-size: 14px; color: var(--text-2); }

/* ---------- 6 · Responsive ---------- */

/* Mittelgroß: rechte Spalte wandert unter den Inhalt */
@media (max-width: 1239px) {
    .shell {
        grid-template-columns: var(--col-left) minmax(0, 1fr);
        grid-template-areas: "left main" "left right" "left footer";
        column-gap: 28px; row-gap: var(--gap);
        max-width: 1000px;
    }
    .side--right .side__sticky { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
    .topnav__link { padding: 9px 11px; }
    .side-friends { display: none; }
}

/* Tablet: Navigation nur noch Icons */
@media (max-width: 1023px) {
    .topnav__link span { display: none; }
    .topnav__link { padding: 10px; }
}

@media (min-width: 820px) { .only-mobile { display: none !important; } }

/* Mobil: eine Spalte, Navigation unten */
@media (max-width: 819px) {
    :root { --topbar-h: 62px; }
    body { padding-bottom: calc(10px + var(--bottomnav-h) + 16px + env(safe-area-inset-bottom)); }
    .hide-mobile { display: none !important; }
    .topbar__inner { padding: 0 14px; gap: 10px; }
    .logo { font-size: 18px; }
    .topnav { display: none; }
    .chip { height: 36px; padding: 0 11px; font-size: 14px; }
    .chip--icon { width: 36px; padding: 0; }
    .avatar--sm { width: 38px; height: 38px; font-size: 14px; }

    .shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "main" "right" "footer";
        padding: 16px 14px 24px;
    }
    .side--left { display: none; }
    .side--right .side__sticky { grid-template-columns: 1fr; }

    .hero { min-height: 330px; }
    .hero__title { font-size: 32px; }
    .btn--xl { font-size: 17px; padding: 15px 18px; }
    .week { gap: 5px; }
    .week__ic { width: 100%; max-width: 42px; aspect-ratio: 1; height: auto; }
    .game-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; padding-bottom: 4px; margin: 0 -14px; padding-inline: 14px; scrollbar-width: none; }
    .game-cards::-webkit-scrollbar { display: none; }
    .game-card { scroll-snap-align: start; min-height: 180px; }
    .supporter-banner__text span { font-size: 12.5px; }
    .footer { flex-direction: column; align-items: center; text-align: center; }

    .bottomnav {
        display: grid; grid-template-columns: repeat(5, 1fr); align-items: center;
        position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50;
        height: var(--bottomnav-h); padding: 0 6px;
        background: color-mix(in srgb, var(--surface-2) 96%, transparent);
        backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
        /* dicker dunkler Rahmen wie im Design, außen eine feine Linie */
        border: 6px solid var(--bg); border-radius: 28px; background-clip: padding-box;
        box-shadow: 0 0 0 1px var(--line-2), 0 12px 34px rgba(0,0,0,.45);
    }
    [data-theme="light"] .bottomnav { box-shadow: 0 12px 30px rgba(60,35,20,.14); }
    .bottomnav__item {
        position: relative; height: 100%;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        color: var(--text-3); font-size: 11px; font-weight: 700;
    }
    .bottomnav__item .icon { width: 21px; height: 21px; }
    .bottomnav__item.is-active { color: var(--accent-text); }
    .bottomnav__item.is-active .icon { fill: currentColor; fill-opacity: .18; }
    .bottomnav__item.is-active::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
    .bottomnav__play {
        justify-self: center; width: 66px; height: 66px; margin-top: -30px;
        display: grid; place-items: center; border-radius: 22px;
        border: 5px solid var(--bg); background-clip: padding-box;
        background: var(--accent); color: var(--accent-ink);
        box-shadow: 0 5px 0 var(--accent-2), 0 10px 28px color-mix(in srgb, var(--accent) 45%, transparent);
        transform: rotate(-4deg); transition: transform .15s var(--ease), box-shadow .15s;
    }
    .bottomnav__play .icon { width: 26px; height: 26px; margin-left: 3px; }
    .bottomnav__play:active { transform: rotate(-4deg) translateY(4px); box-shadow: 0 1px 0 var(--accent-2), 0 6px 18px color-mix(in srgb, var(--accent) 40%, transparent); }

    .ad-sticky {
        position: fixed; left: 24px; right: 24px; z-index: 49;
        bottom: calc(10px + var(--bottomnav-h) + 8px + env(safe-area-inset-bottom));
        height: 50px; border-radius: 14px; background: var(--bg);
    }
    .ad-sticky .ad { height: 100%; min-height: 0; border-radius: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .is-app::after {
        content: ''; position: fixed; left: 0; right: 0; bottom: 0; z-index: 48; pointer-events: none;
        height: calc(10px + var(--bottomnav-h) + 30px + env(safe-area-inset-bottom));
        background: linear-gradient(to bottom, transparent, var(--bg) 45%);
    }
    .has-sticky-ad::after { height: calc(10px + var(--bottomnav-h) + 8px + 50px + 28px + env(safe-area-inset-bottom)); }
    body.has-sticky-ad { padding-bottom: calc(10px + var(--bottomnav-h) + 8px + 50px + 16px + env(safe-area-inset-bottom)); }

    .topbar__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .topbar__user > span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
    .topbar__user b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .topbar__user small { font-size: 11.5px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
    .chip__plus { display: inline-grid; place-items: center; margin-left: 2px; padding-left: 7px; border-left: 1px solid var(--line-2); color: var(--text-3); }
    .chip__plus .icon { width: 13px; height: 13px; }
    .side--right { display: none; }
    .is-plain .plain { padding-top: 24px; }
}

@media (max-width: 419px) {
    .hide-sm { display: none; }
    .topbar__right { gap: 6px; }
    .chip { padding: 0 9px; gap: 5px; }
    .logo { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   Spielseite
   ============================================================ */
.accent { color: var(--accent-text); }
.eyebrow { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.icon-btn--lg { width: 44px; height: 44px; border-radius: 13px; }
.icon-btn--lg .icon { width: 18px; height: 18px; }

.game { display: flex; flex-direction: column; gap: 14px; }
.game-body { display: flex; flex-direction: column; gap: 14px; transition: opacity .15s; }
.game-body.is-busy { opacity: .7; pointer-events: none; }

.game-head { display: flex; align-items: center; gap: 10px; }
.game-head__nav {
    flex: 1; min-width: 0; height: 44px; display: flex; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 13px;
}
.game-head__arrow { width: 40px; height: 100%; display: grid; place-items: center; color: var(--text-2); flex-shrink: 0; }
.game-head__arrow:hover { color: var(--text); }
.game-head__arrow.is-off { opacity: .3; }
.game-head__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.game-head__title b { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 800; white-space: nowrap; }
.game-head__title small { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--text-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.game-head__title small .icon { width: 11px; height: 11px; }
.mode-dot .icon { width: 15px; height: 15px; }
.mode-dot--screenshot { color: var(--m-screenshot); }
.mode-dot--character  { color: var(--m-character); }
.mode-dot--emoji      { color: var(--m-emoji); }
.mode-dot--silhouette { color: var(--m-silhouette); }

.game-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: -4px; }
.game-meta__try { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.hearts { display: flex; gap: 3px; }
.heart .icon { width: 17px; height: 17px; color: var(--text-3); fill: none; opacity: .6; }
.heart.is-full .icon { color: var(--accent); fill: var(--accent); opacity: 1; }

/* Screenshot + Hinweis */
.shot {
    margin: 0; border-radius: var(--radius-lg); overflow: hidden;
    border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent);
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.shot__frame { position: relative; aspect-ratio: 16 / 9; background: var(--surface-2); }
.shot__frame img { width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.shot__badge {
    position: absolute; top: 12px; left: 12px;
    padding: 4px 9px; border-radius: 8px; background: rgba(10,8,7,.7); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; backdrop-filter: blur(6px);
}
.shot.shake { animation: shake .42s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.hintbar { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.hintbar__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex-shrink: 0; }
.hintbar__ic .icon { width: 17px; height: 17px; }
.hintbar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hintbar__text small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.hintbar__text b { font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hintbar__letter { padding: 5px 10px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; }
.hintbar__count { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 11px; color: var(--text-3); font-weight: 600; white-space: nowrap; }
.dots { display: flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--surface-3); }
.dots i.on { background: var(--accent); }

/* Schritt-Pills 1–6 */
.steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.step {
    height: 44px; border-radius: 12px; border: 1.5px solid var(--line-2);
    background: var(--surface); color: var(--text);
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    font-weight: 800; font-size: 15px; cursor: pointer; transition: border-color .15s, background .15s;
}
.step .icon { width: 13px; height: 13px; }
.step:hover:not(:disabled) { border-color: var(--text-3); }
.step--locked { color: var(--text-3); background: transparent; cursor: default; opacity: .65; }
.step--bad { color: var(--red); background: color-mix(in srgb, var(--red) 8%, var(--surface)); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.step--hint { color: var(--gold); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.step--hint.is-active { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent); }
.step--ok  { color: var(--green); background: color-mix(in srgb, var(--green) 10%, var(--surface)); border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.step.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 4px 0 color-mix(in srgb, var(--accent) 40%, transparent); color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.step--ok.is-active { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); color: var(--green); }

/* Suche */
.guessbox { display: flex; gap: 10px; }
.search { position: relative; flex: 1; }
.search__ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); display: grid; }
.search__ic .icon { width: 18px; height: 18px; }
.search input {
    width: 100%; height: 52px; padding: 0 14px 0 44px; border-radius: 14px;
    background: var(--surface); border: 1.5px solid var(--line-2); color: var(--text);
    font-size: 16px; font-weight: 600; outline: none; transition: border-color .15s, box-shadow .15s;
}
.search input::placeholder { color: var(--text-3); }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.search__list {
    position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px);
    padding: 6px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2);
    box-shadow: var(--shadow); max-height: 330px; overflow-y: auto;
}
.search__opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.search__opt .icon { width: 16px; height: 16px; color: var(--text-3); flex-shrink: 0; }
.search__opt span { display: flex; flex-direction: column; min-width: 0; }
.search__opt b { font-weight: 700; font-size: 15px; }
.search__opt small { color: var(--text-3); font-size: 12px; }
.search__opt.is-active { background: var(--surface-3); }
.search__opt.is-used { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.search__empty { padding: 12px; color: var(--text-3); font-size: 14px; }
.skip-btn { height: 52px; padding: 0 18px; border-radius: 14px; font-size: 15px; }
.skip-btn .icon { width: 15px; height: 15px; }

/* Verlauf */
.guesses { display: flex; flex-direction: column; gap: 6px; }
.guess { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.guess__ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); }
.guess__ic .icon { width: 13px; height: 13px; stroke-width: 3; }
.guess--skip .guess__ic { background: var(--surface-3); color: var(--text-3); }
.guess__name { flex: 1; font-weight: 700; font-size: 14.5px; }
.guess--skip .guess__name { color: var(--text-2); }
.guess__n { font-size: 12px; color: var(--text-3); font-weight: 600; }

/* Power-Ups */
.powerups { margin-top: 4px; }
.powerups__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.powerups__coins { display: flex; align-items: center; gap: 5px; color: var(--accent-text); letter-spacing: 0; font-size: 13px; }
.powerups__coins .icon { width: 14px; height: 14px; color: var(--gold); }
.powerups__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pu {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 16px 8px 14px; border-radius: 16px; border: 1px solid var(--line);
    background: var(--surface); cursor: pointer; transition: transform .15s var(--ease), border-color .15s;
}
.pu:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--line-2); }
.pu:disabled { cursor: not-allowed; opacity: .55; }
.pu__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 6px; background: var(--accent-soft); color: var(--accent); }
.pu--video .pu__ic { background: var(--green-soft); color: var(--green); }
.pu__ic .icon { width: 18px; height: 18px; }
.pu b { font-size: 13.5px; font-weight: 800; text-align: center; }
.pu em { display: flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.pu em .icon { width: 13px; height: 13px; color: var(--gold); }
.pu em .icon-lock { color: var(--text-3); }
.pu em.free { color: var(--green); }
.pu__soon { position: absolute; top: 8px; right: 8px; font-size: 10px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }

/* Ergebnis-Kopf */
.result { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 6px; text-align: center; }
.result__ic {
    width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center;
    background: var(--green-soft); color: var(--green); border: 2px solid color-mix(in srgb, var(--green) 55%, transparent);
    box-shadow: 0 0 50px color-mix(in srgb, var(--green) 35%, transparent);
}
.result__ic .icon { width: 36px; height: 36px; stroke-width: 2.6; }
.result--lost .result__ic { background: var(--red-soft); color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); box-shadow: 0 0 50px color-mix(in srgb, var(--red) 25%, transparent); }
.result h1 { font-size: 34px; font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; }
.result__chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 700; }
.result__chip .icon { width: 13px; height: 13px; }
.result--lost .result__chip { background: var(--surface-2); color: var(--text-2); }
.result.is-fresh .result__ic { animation: pop .55s var(--ease) both; }
.result.is-fresh h1, .result.is-fresh .result__chip { animation: rise .5s .15s var(--ease) both; }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Antwort-Karte */
.answer { padding: 0; overflow: hidden; }
.answer .shot { border: 0; border-radius: 0; box-shadow: none; }
.answer__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.answer__title { font-size: 22px; font-weight: 800; line-height: 1.15; margin-top: -6px; }
.answer .steps { margin: 4px 0; }
.answer .step { height: 38px; font-size: 14px; }
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
.info--wide { grid-column: 1 / -1; }
.info__ic { color: var(--accent); display: grid; }
.info__ic .icon { width: 15px; height: 15px; }
.info span:last-child { display: flex; flex-direction: column; min-width: 0; }
.info small { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.info b { font-size: 14px; font-weight: 700; }

.sharecard { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.squares { display: flex; gap: 6px; }
.sq { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-3); }
.sq--ok  { background: var(--green); }
.sq--bad { background: var(--red); }
.squares--sm { gap: 3px; }
.squares--sm .sq { width: 10px; height: 10px; border-radius: 3px; }

.watch .eyebrow { margin-bottom: 10px; }
.watch__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.watch__item {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 14px 8px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
    font-weight: 700; font-size: 13.5px; transition: border-color .15s, transform .15s var(--ease);
}
.watch__item:hover { border-color: var(--line-2); transform: translateY(-2px); }
.watch__item .icon { width: 20px; height: 20px; }
.w-cr { color: #f78b2b; } .w-am { color: #f5b942; } .w-mal { color: #5b8def; }

.rewards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reward { display: flex; flex-direction: column; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.reward span .icon { width: 20px; height: 20px; }
.reward--xp span { color: var(--accent); }
.reward--coins span { color: var(--gold); }
.reward b { font-size: 34px; font-weight: 900; line-height: 1.1; margin-top: 4px; }
.reward small { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.levelcard .xpbar__meta { font-size: 13px; color: var(--text-2); }
.levelcard .xpbar__meta b { color: var(--text); }
.levelcard .bar { height: 9px; }
.levelcard .bar i { transition: width 1.1s var(--ease); }

.guest-reward { display: flex; align-items: center; gap: 14px; border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.guest-reward__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.guest-reward b { display: block; color: var(--accent-text); }
.guest-reward small { color: var(--text-2); font-size: 13px; }

.vs ul { display: flex; flex-direction: column; gap: 2px; margin: 0 -8px; }
.vs__row { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.vs__row.is-me { background: var(--accent-soft); }
.vs__row.is-me .avatar__face { background: var(--accent); color: var(--accent-ink); }
.vs__name { flex: 1; font-weight: 700; font-size: 14.5px; }
.vs__score { min-width: 44px; text-align: right; font-weight: 800; font-size: 13px; color: var(--text-3); }
.vs__score.is-ok { color: var(--green); }
.vs__score.is-bad { color: var(--red); }

/* Toast + Dialog */
.toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100;
    padding: 11px 18px; border-radius: 12px; font-weight: 700; font-size: 14px;
    background: var(--surface-3); color: var(--text); box-shadow: var(--shadow); border: 1px solid var(--line-2);
    animation: rise .25s var(--ease);
}
.toast--error { background: color-mix(in srgb, var(--red) 22%, var(--surface)); }
.toast--ok { background: color-mix(in srgb, var(--green) 22%, var(--surface)); }
.modal { border: 0; padding: 0; background: transparent; color: var(--text); max-width: min(440px, calc(100vw - 32px)); width: 100%; }
.modal::backdrop { background: rgba(5,4,3,.7); backdrop-filter: blur(6px); }
.modal__box { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.modal__box h2 { font-size: 22px; font-weight: 800; }
.rules { display: flex; flex-direction: column; gap: 12px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; color: var(--text-2); font-size: 14.5px; }
.rules li span { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 800; font-size: 13px; }

@media (max-width: 819px) {
    .toast { bottom: calc(var(--bottomnav-h) + 16px + env(safe-area-inset-bottom)); }
    .steps { gap: 6px; }
    .step { height: 40px; font-size: 14px; }
    .hintbar__count { display: none; }
    .powerups__grid, .watch__grid { gap: 8px; }
    .pu b { font-size: 12.5px; }
    .result h1 { font-size: 28px; }
    .sq { width: 24px; height: 24px; }
    .reward b { font-size: 28px; }
    .skip-btn { padding: 0 14px; }
}

/* Admin: Verbindungstest */
.checks { display: flex; flex-direction: column; gap: 6px; }
.checks__row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.checks__row span:last-child { display: flex; flex-direction: column; min-width: 0; }
.checks__row small { color: var(--text-2); font-size: 13px; word-break: break-word; }
.checks__ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; }
.checks__ic .icon { width: 14px; height: 14px; stroke-width: 3; }
.checks__ic.is-ok { background: var(--green-soft); color: var(--green); }
.checks__ic.is-bad { background: var(--red-soft); color: var(--red); }

/* ============================================================
   Archiv
   ============================================================ */
.page-head { display: flex; align-items: baseline; justify-content: space-between; }
.page-head h1 { font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    height: 38px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2);
    font-weight: 700; font-size: 14px; color: var(--text-2); background: var(--surface);
}
.tab .mode-dot .icon { width: 14px; height: 14px; }
.tab:hover { color: var(--text); }
.tab.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }

.filter-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ftile {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px;
    border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line);
}
.ftile b { font-size: 24px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ftile span { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ftile.is-won b  { color: var(--green); }
.ftile.is-lost b { color: var(--red); }
.ftile.is-open b { color: var(--accent-text); }
.ftile:hover { border-color: var(--line-2); }
.ftile.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.arch-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.acard {
    display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 9px;
    border-radius: 13px; border: 1px solid var(--line); background: var(--surface);
    transition: transform .15s var(--ease), border-color .15s;
}
.acard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.acard__top { display: flex; justify-content: space-between; align-items: center; }
.acard__top b { font-size: 14px; font-weight: 800; }
.acard__ic { display: grid; place-items: center; width: 16px; height: 16px; }
.acard__ic .icon { width: 14px; height: 14px; stroke-width: 3; }
.acard__ic .dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text-3); }
.acard__segs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.acard__segs .seg { height: 5px; }
.acard__label { font-size: 12px; font-weight: 800; color: var(--text-3); }
.acard.is-won  { background: color-mix(in srgb, var(--green) 7%, var(--surface)); border-color: color-mix(in srgb, var(--green) 25%, transparent); }
.acard.is-won .acard__ic, .acard.is-won .acard__label { color: var(--green); }
.acard.is-lost { background: color-mix(in srgb, var(--red) 7%, var(--surface)); border-color: color-mix(in srgb, var(--red) 22%, transparent); }
.acard.is-lost .acard__ic, .acard.is-lost .acard__label { color: var(--red); }
.acard.is-perfect { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.acard.is-perfect .acard__ic, .acard.is-perfect .acard__label { color: var(--accent-text); }
.acard.is-perfect .acard__ic .icon { stroke-width: 2; }
.acard.is-open .acard__label { color: var(--text-2); }
.arch-ad { grid-column: 1 / -1; }
.ad--native { min-height: 64px; display: flex; align-items: center; justify-content: center; gap: 8px; }

@media (max-width: 819px) {
    .page-head h1 { font-size: 26px; }
    .arch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .filter-tiles { gap: 6px; }
    .ftile b { font-size: 20px; }
    .ftile span { font-size: 10px; letter-spacing: .06em; }
}

/* Seitennavigation */
.pager { display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pager__btn {
    min-width: 40px; height: 40px; padding: 0 10px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); border: 1.5px solid var(--line); font-weight: 800; font-size: 14px; color: var(--text-2);
    font-variant-numeric: tabular-nums;
}
.pager__btn .icon { width: 16px; height: 16px; }
a.pager__btn:hover { border-color: var(--line-2); color: var(--text); }
.pager__btn.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.pager__btn.is-off { opacity: .35; }
.pager__gap { color: var(--text-3); padding: 0 2px; }

/* ============================================================
   Statistik
   ============================================================ */
.ic-crown { color: var(--gold); }
.stats-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: 12px; }
.winrate {
    display: flex; flex-direction: column; gap: 10px;
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%), var(--surface);
}
.ring { position: relative; width: 116px; height: 116px; }
.ring svg { width: 100%; height: 100%; }
.ring circle { fill: none; stroke-width: 9; }
.ring__track { stroke: var(--surface-3); }
.ring__val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 1s var(--ease); }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.stats-streaks { display: grid; gap: 12px; }
.bigstat { display: flex; align-items: center; gap: 12px; }
.bigstat__ic .icon { width: 24px; height: 24px; }
.bigstat b, .smallstat b { display: block; font-size: 26px; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.bigstat small, .smallstat small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

.dist { display: flex; flex-direction: column; gap: 8px; }
.dist__row { display: flex; align-items: center; gap: 12px; }
.dist__n { width: 12px; font-weight: 800; color: var(--text-2); font-size: 14px; text-align: center; }
.dist__track { flex: 1; height: 26px; border-radius: 8px; background: var(--surface-2); }
.dist__bar {
    display: flex; align-items: center; justify-content: flex-end; height: 100%; width: fit-content; min-width: 28px; padding: 0 9px;
    border-radius: 8px; background: var(--surface-3); transition: width .8s var(--ease);
}
.dist__bar b { font-size: 12.5px; font-weight: 800; }
.dist__bar.is-top { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: var(--accent-ink); }

.heat { display: flex; gap: 8px; }
.heat__days { display: grid; grid-template-rows: 18px repeat(7, 1fr); gap: 4px; font-size: 10.5px; color: var(--text-3); font-weight: 700; }
.heat__days::before { content: ''; }
.heat__days span { display: flex; align-items: center; height: 100%; }
.heat__scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.heat__scroll::-webkit-scrollbar { display: none; }
.heat__months, .heat__grid { display: grid; grid-template-columns: repeat(26, minmax(12px, 1fr)); gap: 4px; min-width: 410px; }
.heat__months { height: 18px; font-size: 10.5px; color: var(--text-3); font-weight: 700; margin-bottom: 4px; }
.heat__months span { white-space: nowrap; }
.heat__col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; }
.hc { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--surface-2); }
.hc--first  { background: var(--accent); }
.hc--won    { background: var(--green); }
.hc--lost   { background: var(--red); }
.hc--freeze { background: var(--blue); }
.hc--future { background: transparent; }
.heat__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--text-2); font-weight: 600; }
.heat__legend span { display: inline-flex; align-items: center; gap: 6px; }
.heat__legend .hc { width: 10px; }

@media (max-width: 819px) {
    .stats-top { grid-template-columns: 1fr; }
    .stats-streaks { grid-template-columns: 1fr 1fr; }
    .stat-row { gap: 8px; }
    .bigstat b, .smallstat b { font-size: 22px; }
}

/* Ergebnis: Wie geht's weiter? */
.nextcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.nextcard__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.nextcard__ic .icon { width: 18px; height: 18px; }
.nextcard__text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.nextcard__text small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.nextcard__text b { font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; }
.nextcard .btn .icon { width: 15px; height: 15px; }

/* ============================================================
   Rangliste
   ============================================================ */
.lb-head { align-items: center; }
.segctl { display: inline-flex; padding: 4px; gap: 2px; border-radius: 13px; background: var(--surface); border: 1px solid var(--line); }
.seg__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.seg__btn .icon { width: 14px; height: 14px; }
.seg__btn:hover { color: var(--text); }
.seg__btn.is-active { background: var(--accent); color: var(--accent-ink); }

.period { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.period__btn {
    height: 40px; display: grid; place-items: center; border-radius: 999px;
    border: 1.5px solid var(--line-2); background: var(--surface); font-weight: 700; font-size: 14px; color: var(--text-2);
}
.period__btn:hover { color: var(--text); }
.period__btn.is-active { border-color: var(--accent); color: var(--text); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }

.lb-legend { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.lb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lb-legend .icon { width: 13px; height: 13px; }

.avatar--lg2 { width: 60px; height: 60px; font-size: 22px; }
.avatar--xl  { width: 76px; height: 76px; font-size: 28px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 10px; margin-top: 18px; }
.podium__spot { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.podium__who { display: flex; flex-direction: column; align-items: center; gap: 4px; position: relative; min-width: 0; max-width: 100%; }
.podium__who .avatar__face { box-shadow: 0 0 0 2.5px var(--text-3); background: var(--surface-2); }
.podium__spot--1 .podium__who .avatar__face { box-shadow: 0 0 0 3px var(--accent), 0 0 30px color-mix(in srgb, var(--accent) 40%, transparent); }
.podium__crown { position: absolute; top: -26px; color: var(--accent); }
.podium__crown .icon { width: 24px; height: 24px; }
.podium__name { display: flex; align-items: center; gap: 4px; font-weight: 800; font-size: 14.5px; margin-top: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium__name .icon { width: 13px; height: 13px; flex-shrink: 0; }
.podium__pts { font-size: 13px; font-weight: 800; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.podium__block {
    width: 100%; display: grid; place-items: center; border-radius: 16px 16px 6px 6px;
    background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
    font-size: 30px; font-weight: 900; color: var(--text-2);
}
.podium__spot--1 .podium__block { height: 100px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, var(--surface)), var(--surface)); color: var(--text); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.podium__spot--2 .podium__block { height: 72px; }
.podium__spot--3 .podium__block { height: 56px; color: var(--accent-text); }
.podium__spot.is-me .podium__name { color: var(--accent-text); }
.podium__spot.is-empty .podium__name { color: var(--text-3); font-weight: 700; }
.podium__spot.is-empty .podium__pts { color: var(--text-3); }
.podium__spot.is-empty .podium__block { opacity: .55; }
.podium__spot.is-empty .podium__crown { opacity: .4; }
.avatar--empty .avatar__face { background: var(--surface-2); color: var(--text-3); box-shadow: 0 0 0 2.5px var(--line-2) !important; border: 2px dashed var(--line-2); }
.avatar--empty .avatar__face .icon { width: 40%; height: 40%; }

.lb-list { display: flex; flex-direction: column; gap: 8px; }
.lb-row {
    display: flex; align-items: center; gap: 12px; padding: 10px 14px;
    border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
}
.lb-row.is-me { border: 1.5px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.lb-row__rank { width: 22px; text-align: center; font-weight: 800; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lb-row__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lb-row__who b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row__who b .icon { width: 13px; height: 13px; flex-shrink: 0; }
.lb-row__who small { font-size: 12.5px; font-weight: 600; color: var(--accent-text); }
.lb-row__pts { display: flex; flex-direction: column; align-items: flex-end; }
.lb-row__pts b { font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.lb-row__pts small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.lb-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 12.5px; font-weight: 800; }
.lb-delta .icon { width: 10px; height: 10px; }
.lb-delta.is-up { color: var(--green); }
.lb-delta.is-down { color: var(--red); }
.lb-gap { text-align: center; color: var(--text-3); font-weight: 800; letter-spacing: .3em; margin: -2px 0; }
.lb-note { text-align: center; }

@media (max-width: 819px) {
    .lb-head { flex-wrap: wrap; gap: 10px; }
    .avatar--xl { width: 64px; height: 64px; font-size: 24px; }
    .avatar--lg2 { width: 52px; height: 52px; font-size: 19px; }
    .podium__spot--1 .podium__block { height: 84px; }
    .podium__spot--2 .podium__block { height: 62px; }
    .podium__spot--3 .podium__block { height: 48px; }
    .podium__block { font-size: 24px; }
}

/* ============================================================
   Profil & Einstellungen
   ============================================================ */
.profile-hero {
    display: flex; flex-direction: column; gap: 16px; padding: 20px;
    background:
        radial-gradient(70% 90% at 100% 0%, rgba(166, 139, 245, .16), transparent 60%),
        radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
        var(--surface);
}
.profile-hero__top { display: flex; align-items: center; gap: 16px; }
.profile-hero__id h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 26px; font-weight: 900; letter-spacing: -.01em; }
.profile-hero__title { color: var(--accent-text); font-weight: 700; font-size: 14px; }
.chip-supporter { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.chip-supporter .icon { width: 11px; height: 11px; }
.profile-hero__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.profile-hero__stats div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 85%, transparent); }
.profile-hero__stats b { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
.profile-hero__stats small { font-size: 11px; color: var(--text-3); font-weight: 600; }
.profile-hero .xpbar { margin-top: 0; }

.title-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tchip {
    display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 13px; border-radius: 999px;
    border: 1.5px solid var(--line-2); background: var(--surface); color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer;
}
.tchip .icon { width: 13px; height: 13px; }
.tchip:hover { border-color: var(--text-3); }
.tchip.is-active { border-color: var(--accent); color: var(--accent-text); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.tchip.is-locked { color: var(--text-3); border-style: dashed; cursor: help; background: transparent; }

.badge-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.badge-tile {
    display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 6px 12px; text-align: center;
    border-radius: 16px; border: 1px solid var(--line); background: var(--surface); opacity: .45; cursor: help;
}
.badge-tile.is-owned { opacity: 1; }
.badge-tile__ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 6px; background: var(--surface-3); color: var(--text-2); }
.badge-tile__ic .icon { width: 22px; height: 22px; }
.badge-tile b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.badge-tile small { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.badge-tile.is-owned.badge-tile--rare .badge-tile__ic { background: var(--blue-soft); color: var(--blue); }
.badge-tile.is-owned.badge-tile--rare small { color: var(--blue); }
.badge-tile.is-owned.badge-tile--epic .badge-tile__ic { background: color-mix(in srgb, var(--m-silhouette) 18%, transparent); color: var(--m-silhouette); }
.badge-tile.is-owned.badge-tile--epic small { color: var(--m-silhouette); }
.badge-tile.is-owned.badge-tile--legendary .badge-tile__ic { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--gold); }
.badge-tile.is-owned.badge-tile--legendary small { color: var(--gold); }
.badge-tile.is-owned.badge-tile--common .badge-tile__ic { background: var(--surface-3); color: var(--text); }
.badge-tile.is-owned.badge-tile--rare, .badge-tile.is-owned.badge-tile--epic, .badge-tile.is-owned.badge-tile--legendary { border-color: var(--line-2); }

.settings { padding: 0; overflow: hidden; }
.set-form { margin: 0; }
.set-row {
    width: 100%; display: flex; align-items: center; gap: 14px; padding: 13px 16px;
    background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit;
}
.settings > * + * .set-row, .settings > .set-row + .set-row, .settings > .set-row + .set-form .set-row { border-top: 1px solid var(--line); }
a.set-row:hover, button.set-row:hover { background: var(--surface-2); }
.set-row__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex-shrink: 0; }
.set-row__ic .icon { width: 17px; height: 17px; }
.set-row__ic--pink { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink); }
.set-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.set-row__text b { font-size: 15px; font-weight: 700; }
.set-row__text small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.set-row__go { width: 16px; height: 16px; color: var(--text-3); }
.set-row--danger, .set-row--danger .set-row__ic { color: var(--red); }
.set-row--danger .set-row__ic { background: var(--red-soft); }
.segctl--sm { padding: 3px; }
.segctl--sm .seg__btn { height: 28px; padding: 0 10px; font-size: 12.5px; }

.switch { position: relative; width: 48px; height: 28px; border-radius: 999px; border: 0; background: var(--surface-3); cursor: pointer; transition: background .2s; flex-shrink: 0; }
.switch i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s var(--ease); }
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"] i { transform: translateX(20px); }

@media (max-width: 819px) {
    .badge-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-hero__id h1 { font-size: 22px; }
    .profile-hero__stats b { font-size: 17px; }
}

/* ============================================================
   Freunde
   ============================================================ */
.page-head--back { justify-content: flex-start; align-items: center; gap: 12px; }
.page-head--back .pill { margin-left: auto; }
.flash { padding: 12px 16px; border-radius: 14px; font-weight: 700; font-size: 14px; background: var(--green-soft); color: var(--green); }
.flash--error { background: var(--red-soft); color: var(--red); }

.code-card {
    display: flex; flex-direction: column; gap: 12px; padding: 18px;
    background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%), var(--surface);
}
.code-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code-card__code { font-size: 32px; font-weight: 900; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

.people { display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.person__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.person__who b { font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person__who small { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.person__who small .icon { width: 12px; height: 12px; }
.person__form { margin: 0; }
.person .btn--sm .icon { width: 14px; height: 14px; }
.round-btn { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); cursor: pointer; }
.round-btn .icon { width: 16px; height: 16px; stroke-width: 2.5; }
.round-btn:hover { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.round-btn--ok { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.round-btn--ok:hover { color: var(--accent-ink); filter: brightness(1.05); }
.count-dot { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 6px; border-radius: 11px; background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 900; vertical-align: 3px; }
.section .search input[type=search]::-webkit-search-cancel-button { filter: invert(.6); }

@media (max-width: 819px) {
    .code-card__code { font-size: 26px; }
    .person .btn--add span { display: none; }
    .person .btn--add { padding: 8px 10px; }
}

/* ============================================================
   Shop
   ============================================================ */
.balance {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px;
    background: radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 60%), var(--surface);
}
.balance__ic { color: var(--gold); display: grid; }
.balance__ic .icon { width: 44px; height: 44px; }
.balance__amt { display: flex; flex-direction: column; }
.balance__amt b { font-size: 34px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.balance__hint { margin-left: auto; max-width: 180px; text-align: right; font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.shop-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.shop-tabs__btn { height: 38px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--text-2); }
.shop-tabs__btn.is-active { background: var(--accent); color: var(--accent-ink); }

.shop-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.shop-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; margin: 0;
    padding: 18px 12px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line);
}
.shop-item__ic { position: relative; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 8px; background: var(--blue-soft); color: var(--blue); }
.shop-item--hint .shop-item__ic { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.shop-item__ic .icon { width: 26px; height: 26px; }
.shop-item__ic i { position: absolute; top: -8px; right: -10px; padding: 2px 7px; border-radius: 8px; font-style: normal; font-size: 11.5px; font-weight: 900; background: var(--text); color: var(--bg); }
.shop-item b { font-size: 15.5px; font-weight: 800; }
.shop-item small { font-size: 12.5px; color: var(--text-2); min-height: 34px; margin-bottom: 8px; }
.shop-item .btn .icon, .av-card .btn .icon { width: 15px; height: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.shop-own { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.shop-own .icon { width: 14px; height: 14px; }

.avatar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.av-card { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 16px 12px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-align: center; }
.av-card.is-equipped { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.av-card__img { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--surface-2); box-shadow: 0 0 0 3px var(--line-2); }
.av-card.is-equipped .av-card__img { box-shadow: 0 0 0 3px var(--accent); }
.av-card__img img { width: 100%; height: 100%; object-fit: cover; }
.av-card.is-locked .av-card__img img { filter: grayscale(.7) brightness(.7); }
.av-card b { font-size: 14.5px; font-weight: 800; }
.av-card .pill .icon { width: 11px; height: 11px; }
.pu em.stock { color: var(--accent-text); }

@media (max-width: 819px) {
    .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .shop-item { padding: 16px 12px 14px; }
    .shop-item b { font-size: 15px; }
    .shop-item small { font-size: 12px; }
    .avatar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .balance__hint { max-width: 110px; text-align: right; font-size: 12px; }
}

/* ============================================================
   Supporter
   ============================================================ */
.sup-kicker { display: inline-flex; align-items: center; gap: 6px; color: var(--pink); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.sup-kicker .icon { width: 14px; height: 14px; }
.sup-hero {
    position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px;
    background: radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--pink) 22%, transparent), transparent 65%), var(--surface);
}
.sup-hero__heart { position: absolute; top: 18px; right: 20px; color: var(--pink); filter: drop-shadow(0 6px 24px color-mix(in srgb, var(--pink) 60%, transparent)); }
.sup-hero__heart .icon { width: 64px; height: 64px; }
.sup-hero__eyebrow { color: var(--accent-text); font-weight: 800; font-size: 13px; }
.sup-hero h1 { font-size: 34px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; max-width: 340px; }
.sup-hero p { color: var(--text-2); font-size: 14.5px; max-width: 520px; }
.sup-goal { margin-top: 6px; padding: 14px; border-radius: 14px; background: color-mix(in srgb, var(--surface-2) 85%, transparent); display: flex; flex-direction: column; gap: 8px; }
.sup-goal__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.sup-goal__meta span { color: var(--accent-text); font-weight: 800; }
.sup-goal small { color: var(--text-3); font-size: 12px; }
.bar--pink { height: 9px; }
.bar--pink i { background: linear-gradient(90deg, var(--pink), var(--accent)); }

.sup-active { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid color-mix(in srgb, var(--pink) 55%, transparent); background: color-mix(in srgb, var(--pink) 6%, var(--surface)); }
.sup-active__row { display: flex; align-items: center; gap: 14px; }
.sup-active__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--pink); color: #fff; flex-shrink: 0; box-shadow: 0 6px 20px color-mix(in srgb, var(--pink) 40%, transparent); }
.sup-active__ic .icon { width: 24px; height: 24px; }
.sup-active__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sup-active__text b { font-size: 18px; font-weight: 900; }
.sup-active__text small { color: var(--text-2); font-size: 13px; }
.sup-active form { margin: 0; }
.sup-active .btn .icon { width: 15px; height: 15px; }

.sup-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.plan { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); cursor: pointer; }
.plan input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.plan.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: 0 0 0 3px var(--accent-soft); }
.plan__tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 8px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.plan__name { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.plan__price { display: flex; align-items: baseline; gap: 4px; font-size: 26px; font-weight: 900; }
.plan__price small { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.plan__custom { display: inline-flex; align-items: baseline; gap: .12em; font-weight: 900; }
.plan__input { width: 1.6ch; min-width: 1.2ch; padding: 0; border: 0; border-bottom: 2px dashed transparent; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: inherit; font-weight: 900; text-align: left; -moz-appearance: textfield; appearance: textfield; outline: none; }
.plan__input::-webkit-outer-spin-button, .plan__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.plan:hover .plan__input, .plan__input:focus { border-bottom-color: var(--accent); }
.plan__note { font-size: 12px; color: var(--text-3); }

.perks { padding: 0; }
.perk { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.perk + .perk { border-top: 1px solid var(--line); }
.perk__ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.perk__ic .icon { width: 17px; height: 17px; }
.perk > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.perk b { font-size: 14.5px; }
.perk small { font-size: 12.5px; color: var(--text-3); }
.perk__ok { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--green); color: #fff; flex-shrink: 0; }
.perk__ok .icon { width: 14px; height: 14px; stroke-width: 3.2; }
.perk__ic .icon-heart-fill { color: var(--pink); }
.sup-fair { display: flex; align-items: center; gap: 6px; }
.sup-fair .icon { width: 13px; height: 13px; }
.sup-cta .icon { width: 18px; height: 18px; }
.sup-cta { text-transform: none; letter-spacing: 0; }
.sup-pay { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.sup-pay .icon { width: 13px; height: 13px; }
.paylogos { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; }
.paylogos span { padding: 4px 9px; border-radius: 7px; border: 1px solid var(--line-2); font-size: 11.5px; font-weight: 700; color: var(--text-2); }

.faq { display: flex; flex-direction: column; gap: 8px; }
.faq__item { padding: 0; }
.faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 700; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 16px; height: 16px; color: var(--text-3); transition: transform .2s; }
.faq__item[open] summary .icon { transform: rotate(45deg); color: var(--accent); }
.faq__item p { padding: 0 16px 14px; color: var(--text-2); font-size: 14px; }

@media (max-width: 819px) {
    .plans { grid-template-columns: 1fr; gap: 14px; }
    .plan__tag { left: auto; right: 12px; transform: none; }
    .sup-hero h1 { font-size: 28px; max-width: 240px; }
    .sup-hero__heart .icon { width: 48px; height: 48px; }
}

/* Danke-Popup nach Abschluss */
.thanks .thanks__box { position: relative; align-items: center; text-align: center; gap: 14px; padding: 34px 24px 24px; border: 1.5px solid color-mix(in srgb, var(--pink) 60%, transparent); background: radial-gradient(120% 70% at 50% 0%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 70%), var(--surface); box-shadow: 0 20px 60px color-mix(in srgb, var(--pink) 25%, transparent); animation: thanks-pop .45s cubic-bezier(.2,1.4,.4,1); }
.thanks__ic { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: var(--pink); color: #fff; transform: rotate(-8deg); box-shadow: 0 0 0 8px color-mix(in srgb, var(--pink) 15%, transparent), 0 12px 40px color-mix(in srgb, var(--pink) 60%, transparent); margin-bottom: 6px; }
.thanks__ic .icon { width: 38px; height: 38px; }
.thanks h2 { font-size: 24px; font-weight: 900; line-height: 1.15; }
.thanks p { color: var(--text-2); font-size: 14.5px; max-width: 300px; }
.thanks__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.thanks__chips span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 13px; font-weight: 700; }
.thanks__chips .icon { width: 14px; height: 14px; color: var(--pink); }
.thanks form { width: 100%; margin: 0; }
@keyframes thanks-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thanks .thanks__box { animation: none; } }

/* Schwierigkeitsgrad */
.diffbars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.diffbars i { width: 3px; border-radius: 2px; background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.diffbars i:nth-child(1) { height: 5px; } .diffbars i:nth-child(2) { height: 7px; } .diffbars i:nth-child(3) { height: 10px; } .diffbars i:nth-child(4) { height: 12px; }
.diffbars i.on { background: currentColor; }
.diff--easy, .diffbars--easy { color: var(--green); }
.diff--medium, .diffbars--medium { color: var(--gold); }
.diff--hard, .diffbars--hard { color: var(--accent); }
.diff--extreme, .diffbars--extreme { color: var(--red); }
.game-meta__try { display: inline-flex; align-items: center; gap: 10px; }
.game-meta__diff { display: inline-flex; align-items: center; gap: 5px; padding-left: 10px; border-left: 1px solid var(--line-2); letter-spacing: .06em; }
.acard__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.acard__foot .diffbars { height: 10px; }
.acard__foot .diffbars i:nth-child(1) { height: 4px; } .acard__foot .diffbars i:nth-child(2) { height: 6px; } .acard__foot .diffbars i:nth-child(3) { height: 8px; } .acard__foot .diffbars i:nth-child(4) { height: 10px; }
.diffcard { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
.diffcard__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.diffcard__head > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.diffcard__head small { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.diffcard__head b { display: inline-flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 900; }
.diffcard__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diffcard__stats span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.diffcard__stats b { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.diffcard__stats small { font-size: 12px; color: var(--text-3); font-weight: 600; }

/* Emoji-Rätsel */
.shot__frame--emoji { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 28px 16px 20px;
    background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--m-emoji) 22%, transparent), transparent 70%), var(--m-emoji-bg); }
.emojis { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; font-size: clamp(44px, 11vw, 72px); line-height: 1.1;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.emojis span { filter: drop-shadow(0 6px 14px rgba(0,0,0,.25)); animation: emoji-pop .35s var(--ease) both; }
.emojis span:nth-child(2) { animation-delay: .06s; } .emojis span:nth-child(3) { animation-delay: .12s; } .emojis span:nth-child(4) { animation-delay: .18s; }
.emojis-prev { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 18px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.emojis-prev span { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 35%, transparent); letter-spacing: 2px; }
@keyframes emoji-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.game-card__emojis { font-size: 26px; letter-spacing: 4px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }

/* ============================================================
   Admin
   ============================================================ */
.admin-shell { max-width: 1180px; margin: 0 auto; padding: 24px 28px 60px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 28px; align-items: start; }
.admin-nav { position: sticky; top: calc(var(--topbar-h) + 24px); display: flex; flex-direction: column; gap: 4px; }
.admin-nav__title { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.admin-nav__title .icon { width: 15px; height: 15px; }
.admin-nav__link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text-2); font-weight: 700; }
.admin-nav__link:hover { background: var(--surface-2); color: var(--text); }
.admin-nav__link.is-active { background: var(--accent-soft); color: var(--accent-text); }
.admin-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.adm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.adm-head h1 { font-size: 28px; font-weight: 900; letter-spacing: -.02em; }
.adm-head .ok { color: var(--green); } .adm-head .bad { color: var(--red); }
.adm-card p + p { margin-top: 8px; }
.adm-list { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; color: var(--text-2); }
.adm-warn { display: flex; flex-direction: column; gap: 6px; }
.adm-warn__row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.adm-warn__row > span:nth-child(2) { flex: 1; }
.adm-warn__ic { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.adm-warn__ic .icon { width: 14px; height: 14px; stroke-width: 3; }
.adm-warn__row.is-bad .adm-warn__ic { background: var(--red-soft); color: var(--red); }
.adm-warn__row.is-warn .adm-warn__ic { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adm-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px; }
.adm-stat__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.adm-stat__ic .icon { width: 15px; height: 15px; }
.adm-stat b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.adm-stat small { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.adm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.adm-toolbar form { margin: 0; }
.adm-table-wrap { padding: 0; overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-table th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.adm-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table tr.is-today td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.adm-table tr.is-past td { opacity: .6; }
.adm-table .pill { white-space: nowrap; }
.adm-imgs { display: inline-flex; gap: 3px; }
.adm-imgs i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 900; }
.adm-imgs i.ok { background: var(--green-soft); color: var(--green); }
.adm-imgs i.bad { background: var(--red-soft); color: var(--red); }
.adm-user { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.adm-user > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.adm-user b { display: inline-flex; align-items: center; gap: 4px; }
.adm-user b .icon { width: 12px; height: 12px; }
.adm-user small { font-size: 12px; color: var(--text-3); }
.adm-search { display: flex; align-items: center; gap: 8px; position: relative; }
.adm-search .search__ic { position: absolute; left: 14px; color: var(--text-3); display: grid; }
.adm-search .input { flex: 1; padding-left: 40px; }
.input { height: 44px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--surface-2); color: var(--text); font: inherit; font-size: 14.5px; outline: none; min-width: 0; }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input--sm { height: 36px; padding: 0 10px; border-radius: 10px; font-size: 14px; }
.input--emoji { font-size: 18px; letter-spacing: 2px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font); }
.adm-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.adm-menu { position: relative; }
.adm-menu summary { list-style: none; cursor: pointer; }
.adm-menu summary::-webkit-details-marker { display: none; }
.adm-menu__box { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 230px; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.adm-menu__box form { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.adm-menu__btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: none; text-align: left; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--text-2); }
.adm-menu__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.adm-menu__btn:disabled { opacity: .4; cursor: default; }
.adm-menu__btn .icon { width: 15px; height: 15px; }
.adm-menu__coins { flex-direction: row !important; gap: 6px !important; padding-top: 6px; border-top: 1px solid var(--line); }
.adm-menu__coins .input { flex: 1; width: 0; }
.adm-danger { color: var(--red) !important; }

.emoji-plan { display: flex; flex-direction: column; gap: 12px; }
.emoji-day { display: flex; flex-direction: column; gap: 12px; }
.emoji-day.is-today { border: 1.5px solid var(--accent); }
.emoji-day.is-past { opacity: .7; }
.emoji-day__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.emoji-day__date { display: flex; flex-direction: column; min-width: 86px; line-height: 1.2; }
.emoji-day__date b { font-size: 15px; font-weight: 900; }
.emoji-day__date small { font-size: 12px; color: var(--text-3); font-weight: 700; }
.emoji-day__anime { display: flex; flex-direction: column; flex: 1; min-width: 160px; line-height: 1.25; }
.emoji-day__anime small { font-size: 12px; color: var(--text-3); }
.emoji-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.emoji-steps li { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; background: var(--surface-2); }
.emoji-steps__n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 11.5px; font-weight: 900; background: var(--surface-3); color: var(--text-2); }
.emoji-steps__e { display: inline-flex; gap: 4px; font-size: 22px; white-space: nowrap; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font); }
.emoji-steps small { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.emoji-day__conf { display: flex; align-items: center; gap: 6px; }
.emoji-day__conf .icon { width: 13px; height: 13px; }
.emoji-day__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.emoji-day__actions form { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.emoji-edit { flex-basis: 100%; order: 10; }
.emoji-edit > summary { list-style: none; display: inline-flex; cursor: pointer; }
.emoji-edit > summary::-webkit-details-marker { display: none; }
.emoji-edit[open] { flex-basis: 100%; }
.emoji-edit__form { margin-top: 10px !important; display: flex !important; flex-direction: column; gap: 8px !important; padding: 14px; border-radius: 14px; background: var(--surface-2); }
.emoji-edit__row { display: grid; grid-template-columns: 70px minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.emoji-edit__row:first-child { grid-template-columns: 70px minmax(0, 2fr); }
.emoji-edit__check { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.anime-pick { position: relative; display: block; }
.anime-pick .input { width: 100%; }
.anime-pick__list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30; max-height: 240px; overflow: auto; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.anime-pick__list li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); font-weight: 600; }
.anime-pick__list li:hover { background: var(--surface-2); }
.anime-pick__list small { color: var(--text-3); }
.adm-busy { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(4px); font-weight: 700; text-align: center; padding: 20px; }
.adm-busy[hidden] { display: none; }
.adm-busy__spin { width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--surface-3); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; padding: 1px 6px; border-radius: 6px; background: var(--surface-2); }

@media (max-width: 819px) {
    .admin-shell { grid-template-columns: minmax(0, 1fr); padding: 14px 14px 30px; gap: 14px; }
    .admin-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; }
    .admin-nav__title { display: none; }
    .admin-nav__link { flex-shrink: 0; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); }
    .adm-head h1 { font-size: 24px; }
    .emoji-edit__row { grid-template-columns: 56px minmax(0, 1fr); }
    .emoji-edit__row input[name="notes[]"], .emoji-edit__row input[name="notes_en[]"] { grid-column: 2; }
}
.emoji-steps__e i { font-style: normal; }

/* Bestätigungs-Dialog */
.confirm__box { align-items: center; text-align: center; gap: 12px; padding: 28px 24px 22px; animation: thanks-pop .3s cubic-bezier(.2,1.3,.4,1); }
.confirm__ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 4px; }
.confirm__ic .icon { width: 28px; height: 28px; }
.confirm--danger .confirm__box { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.confirm--danger .confirm__ic { background: var(--red-soft); color: var(--red); transform: rotate(-6deg); }
.confirm__box h2 { font-size: 21px; font-weight: 900; }
.confirm__box p { color: var(--text-2); font-size: 14.5px; max-width: 320px; }
.confirm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 8px; }
.btn--danger { background: var(--red); color: #fff; box-shadow: 0 4px 0 color-mix(in srgb, var(--red) 60%, #000); }
.btn--danger:hover { filter: brightness(1.06); }

/* Admin: Dashboard, Games, Bearbeiten */
:root { --viz-1: #d9733f; --viz-2: #3a8ed4; --viz-3: #26a85c; }
[data-theme="light"] { --viz-1: #c95f2c; --viz-2: #2a7fc4; --viz-3: #1f9d55; }
.adm-sub { font-size: 13px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin-top: 6px; }
.adm-sub--row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.adm-sub--row h2 { font-size: inherit; font-weight: inherit; }
.adm-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-stat { align-items: center; text-align: center; }
.adm-stat b.ok, td.ok, .adm-mini b.ok { color: var(--green); }
.adm-stat b.bad, td.bad, .adm-mini b.bad, .adm-head .bad { color: var(--red); }
.trend { margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--surface-2); color: var(--text-3); }
.trend.is-up { color: var(--green); background: var(--green-soft); }
.trend.is-down { color: var(--red); background: var(--red-soft); }
.adm-pad { padding: 14px 14px 0; }
.adm-bar { display: block; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.adm-bar i { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.adm-bar--ok i, .adm-bar--win i { background: var(--green); } .adm-bar--mid i { background: var(--gold); } .adm-bar--low i { background: var(--red); }
.adm-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); align-items: center; }
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend .icon { width: 13px; height: 13px; }
.lg { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.lg--ok { background: var(--green); } .lg--some { background: var(--gold); } .lg--none { background: var(--red); } .lg--imdb { background: var(--surface-3); box-shadow: inset 0 0 0 2px var(--gold); }
.lg--v1 { background: var(--viz-1); } .lg--v2 { background: var(--viz-2); } .lg--v3 { background: var(--viz-3); }
.adm-chart__wrap { position: relative; }
.adm-chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.adm-chart .grid { stroke: var(--line); stroke-width: 1; }
.adm-chart .axis { fill: var(--text-3); font-size: 10.5px; font-family: var(--font); }
.adm-chart .axis--v1 { fill: var(--viz-1); opacity: .85; } .adm-chart .axis--v2 { fill: var(--viz-2); opacity: .85; }
[data-period-box] { display: flex; flex-direction: column; gap: inherit; transition: opacity .15s; }
.adm-chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line--v1 { stroke: var(--viz-1); } .line--v2 { stroke: var(--viz-2); } .line--v3 { stroke: var(--viz-3); }
.adm-chart .dot { stroke: var(--surface); stroke-width: 2; }
.dot--v1 { fill: var(--viz-1); } .dot--v2 { fill: var(--viz-2); } .dot--v3 { fill: var(--viz-3); }
.adm-chart .cross { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 3 3; }
.adm-chart .hit { fill: transparent; cursor: crosshair; }
.adm-tip { position: absolute; top: 0; min-width: 140px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; color: var(--text-2); }
.adm-tip span { display: flex; align-items: center; gap: 6px; } .adm-tip span b { margin-left: auto; color: var(--text); }
.adm-chart details { margin-top: 10px; }
.adm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.adm-today__title { display: block; font-size: 17px; margin-bottom: 10px; }
.adm-mini { display: flex; flex-direction: column; align-items: center; padding: 12px 6px; border-radius: 12px; background: var(--surface-2); }
.adm-mini b { font-size: 22px; font-weight: 900; } .adm-mini small { font-size: 12px; color: var(--text-3); }
.adm-split .adm-bar--win { margin-top: 12px; }
.adm-ret { display: grid; grid-template-columns: 80px 1fr; gap: 4px 10px; align-items: center; margin-bottom: 10px; font-size: 14px; }
.adm-ret b { text-align: right; } .adm-ret b small { color: var(--text-3); font-weight: 600; }
.adm-ret .adm-bar { grid-column: 1 / -1; }
.adm-split .muted .icon { width: 12px; height: 12px; vertical-align: -1px; }

.gen { display: flex; flex-direction: column; gap: 12px; }
.gen__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.gen__help summary { cursor: pointer; font-weight: 700; }
.gen__help[open] { flex-basis: 100%; }
.gen__preview { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.gen__name b { display: block; font-size: 17px; font-weight: 900; } .gen__name small { color: var(--text-2); }
.gen__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gen__msg.is-ok { color: var(--green); } .gen__msg.is-warn { color: var(--gold); } .gen__msg.is-bad { color: var(--red); }
.adm-pager2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gcard { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-width: 1.5px; }
.gcard.is-ok { border-color: color-mix(in srgb, var(--green) 45%, transparent); }
.gcard.is-some, .gcard.is-imdb { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.gcard.is-none { border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.gcard.is-today { box-shadow: 0 0 0 3px var(--accent-soft); }
.gcard__head { display: flex; justify-content: space-between; align-items: center; }
.gcard__nr { display: inline-flex; align-items: center; gap: 5px; font-weight: 900; color: var(--accent-text); }
.gcard__nr .icon { width: 12px; height: 12px; color: var(--text-3); }
.gcard__title { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .adm-imgs { align-items: center; flex-wrap: wrap; gap: 3px; }
.gcard .adm-imgs .pill { margin-left: 4px; font-size: 10.5px; }
.gcard__actions { display: flex; gap: 6px; margin-top: 2px; }
.btn.is-off { opacity: .45; cursor: default; pointer-events: none; }
.flash--info { display: flex; align-items: center; gap: 8px; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2); }
.flash--info .icon { width: 15px; height: 15px; flex-shrink: 0; }
.adm-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 12px; }
.adm-dl div.wide { grid-column: span 2; } .adm-dl div.full { grid-column: 1 / -1; }
.adm-dl dt { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.adm-dl dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.adm-dl dd.muted { font-weight: 500; font-size: 13.5px; }
.adm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.adm-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.adm-form label small { color: var(--text-3); font-weight: 500; }
.adm-form .input:disabled { opacity: .5; }
.adm-form > div { grid-column: 1 / -1; }
.adm-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.adm-thumb { position: relative; margin: 0; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--surface-2); border: 2px solid var(--line-2); display: grid; place-items: center; }
.adm-thumb.is-ok { border-color: var(--green); } .adm-thumb.is-bad { border-color: var(--red); border-style: dashed; }
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-thumb span { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-3); }
.adm-thumb figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 4px; font-size: 10.5px; font-weight: 800; text-align: center; background: rgba(0,0,0,.55); color: #fff; }
.upload { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px; border-radius: 14px; border: 2px dashed var(--line-2); color: var(--text-2); cursor: pointer; text-align: center; }
.upload.is-over, .upload:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload .icon { width: 26px; height: 26px; color: var(--accent); } .upload small { color: var(--text-3); }
.crops { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.crop { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 12px; background: var(--surface-2); }
.crop__img { height: 180px; overflow: hidden; border-radius: 8px; } .crop__img img { display: block; max-width: 100%; }
.crop__bar { display: flex; gap: 6px; } .crop__bar select { flex: 1; }
.crops__bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.adm-badge-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.adm-badge-ic .icon { width: 16px; height: 16px; }
.adm-head h1 .icon-btn { vertical-align: middle; margin-right: 6px; }
@media (max-width: 819px) {
    .adm-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-split, .adm-form { grid-template-columns: 1fr; }
    .adm-dl { grid-template-columns: 1fr 1fr; }
    .adm-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.adm-users td .ok, .adm-users td .bad { display: inline-grid; } .adm-users td .ok { color: var(--green); } .adm-users td .bad { color: var(--red); } .adm-users td .icon { width: 15px; height: 15px; stroke-width: 3; }
.gcard__actions .btn { flex: 1; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; }

.emoji-steps__en { color: var(--text-3); opacity: .8; }
/* Ergebnis: Erklärung der Emoji-Hinweise */
.explain { display: flex; flex-direction: column; gap: 10px; }
.explain ol { display: flex; flex-direction: column; gap: 6px; }
.explain li { display: grid; grid-template-columns: 26px auto 1fr; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--surface-2); }
.explain__n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 900; background: var(--surface-3); color: var(--text-2); }
.explain li.is-hit .explain__n { background: var(--green-soft); color: var(--green); }
.explain__e { font-size: 24px; letter-spacing: 2px; white-space: nowrap; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font); }
.explain__t { font-size: 13.5px; color: var(--text-2); line-height: 1.35; }
@media (max-width: 419px) { .explain li { grid-template-columns: 26px 1fr; } .explain__t { grid-column: 1 / -1; } }

/* Echte Anzeigen: kein Platzhalter-Rahmen; leere Flächen (nicht befüllt) ausblenden */
.ad--live { display: block; min-height: 0; border: 0; background: none; overflow: hidden; text-align: center; }
.ad--live:has(ins[data-ad-status="unfilled"]) { display: none; }
.ad-sticky .ad--live { display: flex; align-items: center; justify-content: center; }
.ad-sticky:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Supporter: kleine Einmal-Spende („Kaffee“) */
.coffee { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0; }
.coffee__ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: color-mix(in srgb, var(--gold) 15%, transparent); color: var(--gold); }
.coffee__ic .icon { width: 20px; height: 20px; }
.coffee__text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.coffee__text b { font-size: 14.5px; }
.coffee__text small { font-size: 12.5px; color: var(--text-3); }
.coffee__step { display: inline-flex; align-items: center; gap: 2px; height: 36px; padding: 0 4px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--line-2); }
.coffee__step b { display: inline-flex; align-items: baseline; font-size: 16px; font-weight: 900; padding: 0 2px; }
.coffee__step input { width: 1.2em; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: right; outline: none; -moz-appearance: textfield; appearance: textfield; }
.coffee__step input::-webkit-outer-spin-button, .coffee__step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.coffee__btn { width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font-size: 17px; font-weight: 800; cursor: pointer; }
.coffee__btn:hover { background: var(--surface-3); color: var(--text); }
@media (max-width: 479px) { .coffee { flex-wrap: wrap; } .coffee__text { flex-basis: calc(100% - 52px); } .coffee__step { margin-left: 52px; } .coffee .btn { flex: 1; } }

/* Unterstützen: ein Formular für einmalig und monatlich */
.give { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 18px; }
.give__title { font-size: 18px; font-weight: 900; }
.give__tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.give__tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.give__tier > input { position: absolute; opacity: 0; pointer-events: none; }
.give__tier.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); box-shadow: 0 0 0 3px var(--accent-soft); }
.give__emoji { font-size: 28px; line-height: 1.1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.give__tier b { font-size: 19px; font-weight: 900; display: inline-flex; align-items: baseline; justify-content: center; }
.give__tier small { font-size: 11.5px; color: var(--text-3); font-weight: 600; line-height: 1.2; }
.give__tier--custom input { width: 2.2ch; padding: 0; border: 0; border-bottom: 2px dashed var(--line-2); background: none; color: inherit; font: inherit; text-align: center; outline: none; -moz-appearance: textfield; appearance: textfield; }
.give__tier--custom input:focus { border-bottom-color: var(--accent); }
.give__tier--custom input::-webkit-outer-spin-button, .give__tier--custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.give__freq { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 13px; background: var(--surface-2); border: 1px solid var(--line); }
.give__freq label { height: 38px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 14px; color: var(--text-2); cursor: pointer; }
.give__freq input { position: absolute; opacity: 0; pointer-events: none; }
.give__freq label.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 0 var(--line-2), 0 2px 10px rgba(0,0,0,.18); }
.give__reward { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--text-2); line-height: 1.4; }
.give__reward .icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.give__hint { text-align: center; margin-top: -6px; }
.give .sup-cta:disabled { opacity: .5; box-shadow: none; }
.give__fair { justify-content: center; }
@media (max-width: 479px) { .give__tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } .give { padding: 14px; } }

/* ---------- Bezahlen auf der Seite ---------- */
/* Kopfzeile fest, nur das Stripe-Formular scrollt. Breit genug, damit Stripe am PC zweispaltig (Übersicht | Formular) darstellt. */
.paybox { max-width: min(1000px, calc(100vw - 32px)); height: calc(100dvh - 32px); max-height: 900px; }
.paybox__box { height: 100%; gap: 0; padding: 0; overflow: hidden; }
.paybox__head { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.paybox__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--pink); color: #fff; }
.paybox__ic .icon { width: 18px; height: 18px; }
.paybox__text { flex: 1; min-width: 0; }
.paybox__text b { font-size: 17px; font-weight: 800; }
.paybox__close { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.paybox__close:hover { color: var(--text); }
.paybox__mount { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.paybox__loading { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: var(--text-2); font-size: 14px; }
.paybox__spin { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line-2); border-top-color: var(--accent); animation: paybox-spin .8s linear infinite; }
@keyframes paybox-spin { to { transform: rotate(360deg); } }
.paybox__error { flex: none; color: var(--red); font-size: 14px; text-align: center; padding: 12px 16px; }
.paybox__foot { flex: none; margin: 0; justify-content: center; padding: 10px 16px; border-top: 1px solid var(--line-2); font-size: 12px; }
@media (max-width: 560px) {
    /* Handy: fast volle Höhe als Blatt von unten */
    .paybox { max-width: 100vw; width: 100vw; height: calc(100dvh - 24px); max-height: none; margin: auto 0 0; }
    .paybox__box { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
    .paybox__head { padding: 12px 14px; }
    .paybox[open] { animation: paybox-up .28s cubic-bezier(.2,.9,.3,1); }
}
@keyframes paybox-up { from { transform: translateY(40px); opacity: 0; } }

/* Supporter: Weg zur Status-Seite (statt Werbe-Hinweis) */
.promo-card--sup { border-color: color-mix(in srgb, var(--pink) 35%, transparent); }
.supporter-banner--thanks .supporter-banner__text span { color: var(--text-2); }
.supporter-banner__go { width: 20px; height: 20px; color: var(--text-3, var(--text-2)); flex: none; }

/* ================= Login / Registrierung (neu) ================= */
.is-plain .plain:has(.auth2) { max-width: none; padding: 0; }
.auth2 { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.auth2--narrow { grid-template-columns: 1fr; }
.auth2__side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 36px 44px 44px;
    background: radial-gradient(90% 70% at 20% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 65%), radial-gradient(70% 60% at 100% 100%, color-mix(in srgb, var(--pink) 16%, transparent), transparent 70%), var(--surface);
    border-right: 1px solid var(--line-2); }
.auth2__logo { position: relative; z-index: 2; }
.auth2__mosaic { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; transform: rotate(-6deg); margin: auto -80px;
    /* sanft ausblenden statt Overlay – so entsteht keine Kante */
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 70%, transparent 100%), linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%); mask-composite: intersect; }
.auth2__lane { display: flex; gap: 14px; width: max-content; animation: auth2-lane var(--dur, 60s) linear infinite; }
.auth2__lane--rev { animation-direction: reverse; }
.auth2__lane span { flex: none; width: 240px; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.auth2__lane img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* -50% minus halbe Lücke = genau eine Kopie weiter → nahtlos */
@keyframes auth2-lane { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (prefers-reduced-motion: reduce) { .auth2__lane { animation: none; } }
@keyframes auth2-in { from { opacity: 0; transform: translateY(16px); } }
.auth2__pitch { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; max-width: 440px; }
.auth2__pitch h2 { font-size: 34px; line-height: 1.08; font-weight: 900; letter-spacing: -.02em; }
.auth2__pitch p { color: var(--text-2); font-size: 15px; }
.auth2__perks { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 0; font-weight: 600; font-size: 14.5px; }
.auth2__perks li { display: flex; align-items: center; gap: 12px; }
.auth2__perk-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.auth2__perk-ic .icon { width: 18px; height: 18px; }
.auth2__perk-ic--flame { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.auth2__perk-ic--gold  { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.auth2__perk-ic--blue  { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.auth2__count { color: var(--text-3); font-size: 13px; margin-top: 4px; }

.auth2__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 40px 24px; }
.auth2__mlogo { display: none; }
.auth2__mlogo--always { display: block; }
.auth2__card { max-width: 420px; gap: 14px; padding: 28px; }
.auth2__head { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.auth2__head .auth__sub { margin-top: 0; }
.auth2__back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 13.5px; font-weight: 600; }
.auth2__back .icon { width: 16px; height: 16px; }
.auth2__back:hover { color: var(--text); }
.auth2__or { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; font-weight: 600; }
.auth2__or::before, .auth2__or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.auth2__legal { color: var(--text-3); font-size: 12px; text-align: center; line-height: 1.45; }
.auth2__done { align-items: center; text-align: center; }
.auth2__big-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.auth2__big-ic .icon { width: 30px; height: 30px; }
.auth2__big-ic--bad { background: var(--red-soft); color: var(--red); }
.auth2__gmail { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.field__row { display: flex; justify-content: space-between; align-items: baseline; }
.field__link { font-size: 13px; font-weight: 600; }
.field__hint { font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--text-3); }
.pw { position: relative; display: block; }
.pw input { width: 100%; padding-right: 46px; }
.pw__eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: transparent; color: var(--text-3); border-radius: 10px; display: grid; place-items: center; cursor: pointer; }
.pw__eye .icon { width: 18px; height: 18px; }
.pw__eye.is-on, .pw__eye:hover { color: var(--text); }

/* Google-Button nach den Google-Vorgaben: weiß, „G“-Logo, klarer Text */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 18px; border-radius: 14px; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; font-weight: 700; font-size: 15.5px; transition: box-shadow .15s, transform .1s; }
.gbtn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.gbtn:active { transform: translateY(1px); }
.gbtn__g { width: 20px; height: 20px; flex: none; }
.set-row__ic--google { background: #fff; }
.set-row__ic--google .gbtn__g { width: 18px; height: 18px; }

@media (max-width: 960px) {
    .auth2 { grid-template-columns: 1fr; align-content: start; }
    .auth2__side { display: none; }
    .auth2__mlogo { display: block; }
    .auth2__main { justify-content: flex-start; padding: 36px 16px 40px; }
}
@media (max-width: 480px) {
    .auth2__card { padding: 22px 18px; }
    .auth2__main { padding-top: 28px; }
}
/* Auf Login/Registrierung keine Navigation – Logo und „Ohne Konto weiterspielen“ führen zurück */
body:has(.auth2) .topbar, body:has(.auth2) .bottomnav { display: none; }
body:has(.auth2) { padding-top: 0; padding-bottom: 0; }
.auth2__side { justify-content: flex-start; }

/* ================= Konto & Sicherheit ================= */
.acc__item > summary { list-style: none; cursor: pointer; }
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__edit { color: var(--accent-text); font-weight: 700; font-size: 13.5px; flex: none; }
.acc__item[open] .acc__edit { color: var(--text-3); }
.acc__item + .acc__item, .acc__item + .set-row, .set-row + .acc__item { border-top: 1px solid var(--line); }
.acc__form { display: flex; flex-direction: column; gap: 12px; padding: 4px 18px 18px 70px; }
.acc__form > .btn, .acc__sub > .btn { align-self: flex-start; }
.acc__sub { display: flex; flex-direction: column; gap: 12px; }
.acc__note { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.acc__why { max-width: 160px; text-align: right; }
.acc__lose { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.acc--danger { border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.acc--danger .acc__form > .btn { align-self: stretch; }
@media (max-width: 560px) { .acc__form { padding: 4px 14px 16px; } .acc__note { flex-direction: column; align-items: flex-start; } }

.verify-bar { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--gold) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); margin-bottom: 16px; }
.verify-bar__ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.verify-bar__ic .icon { width: 19px; height: 19px; }
.verify-bar__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.verify-bar__text b { font-size: 14.5px; }
.verify-bar__text small { color: var(--text-2); font-size: 12.5px; overflow-wrap: anywhere; }
@media (max-width: 420px) { .verify-bar__ic { display: none; } .verify-bar { padding: 10px 12px; } }

/* ================= Rechtliche Seiten / Markdown ================= */
.legal { padding: 24px 26px; display: flex; flex-direction: column; gap: 12px; line-height: 1.6; font-size: 15px; color: var(--text-2); overflow-wrap: anywhere; }
.legal h2 { font-size: 19px; font-weight: 800; color: var(--text); margin-top: 10px; line-height: 1.3; }
.legal h2:first-child { margin-top: 0; }
.legal h3 { font-size: 16px; font-weight: 800; color: var(--text); margin-top: 4px; }
.legal p, .legal ul { margin: 0; }
.legal ul { padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.legal strong { color: var(--text); }
.legal a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal hr { border: 0; border-top: 1px solid var(--line-2); margin: 6px 0; }
.legal__date { font-size: 13px; color: var(--text-3); margin-top: 8px !important; }
.legal__admin { margin-bottom: 14px; }
.legal__admin .link-accent { margin-left: auto; font-weight: 700; }
.md-todo { background: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--text); padding: 0 4px; border-radius: 5px; font-weight: 700; }
@media (max-width: 560px) { .legal { padding: 18px 16px; font-size: 14.5px; } }

/* ================= News ================= */
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-item { padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.news-item h2 { font-size: 21px; font-weight: 900; letter-spacing: -.01em; line-height: 1.2; }
.news-item--latest { border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.news-item__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--text-3); font-weight: 600; }
.news-item__body.legal { padding: 0; gap: 8px; }
.news-empty .icon { width: 30px; height: 30px; color: var(--text-3); }
.news-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .02em; background: var(--accent-soft); color: var(--accent-text); width: fit-content; }
.news-tag .icon { width: 14px; height: 14px; }
.news-tag--event { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.news-tag--info { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue); }
.news-tag--maintenance { background: var(--red-soft); color: var(--red); }
.newsdlg { max-width: min(460px, calc(100vw - 32px)); }
.newsdlg__box { position: relative; gap: 12px; padding: 26px 24px 22px; max-height: calc(100dvh - 48px); overflow: auto; animation: thanks-pop .4s cubic-bezier(.2,1.4,.4,1); }
.newsdlg__box h2 { font-size: 23px; font-weight: 900; line-height: 1.2; padding-right: 32px; }
.newsdlg__body.legal { padding: 0; font-size: 14.5px; gap: 8px; }
.newsdlg__x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
.newsdlg__actions { display: flex; gap: 10px; margin-top: 6px; }
.newsdlg__actions .btn { flex: 1; }

/* ================= Admin: Seiten & News ================= */
.adm-pages { display: flex; flex-direction: column; gap: 12px; }
.adm-pages__lang { align-self: flex-start; }
.adm-pages__pane { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.adm-pages__edit { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.adm-pages__text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.55; resize: vertical; min-height: 420px; }
.adm-pages__preview { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; }
.adm-pages__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
@media (max-width: 1000px) { .adm-pages__pane { grid-template-columns: 1fr; } .adm-pages__preview { position: static; max-height: none; } }
.adm-news-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.adm-news-form h2 { font-size: 18px; font-weight: 800; }
.adm-news-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.adm-news-form__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
.adm-news-form__bar { display: flex; gap: 10px; }
.adm-news-form textarea { resize: vertical; }
@media (max-width: 800px) { .adm-news-form__grid { grid-template-columns: 1fr; } }
.adm-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.adm-actions form { display: contents; }
textarea.input { height: auto; padding: 10px 14px; line-height: 1.5; }
.legal ul { list-style: disc; }
.legal li::marker { color: var(--accent); }
.segctl button.seg__btn { border: 0; background: transparent; font: inherit; cursor: pointer; color: inherit; }
.segctl button.seg__btn.is-active { background: var(--accent); color: var(--accent-ink); }

/* ================= Admin: Spenden ================= */
.adm-don { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.adm-don__tiers { display: flex; flex-direction: column; gap: 8px; }
.adm-don__row { display: grid; grid-template-columns: 64px 110px 1fr 1fr 40px; gap: 8px; align-items: center; }
.adm-don__row--head { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.adm-don__emoji { text-align: center; font-size: 20px; padding: 0 4px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.adm-don__add { align-self: flex-start; }
.adm-don__rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
.adm-don__rules .check { margin-top: 4px; }
.adm-don__bar { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) {
    .adm-don__row { grid-template-columns: 56px 1fr 40px; grid-template-areas: "e a x" "d d d" "n n n"; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
    .adm-don__row > :nth-child(1) { grid-area: e; } .adm-don__row > :nth-child(2) { grid-area: a; }
    .adm-don__row > :nth-child(3) { grid-area: d; } .adm-don__row > :nth-child(4) { grid-area: n; } .adm-don__row > :nth-child(5) { grid-area: x; }
    .adm-don__row--head { display: none; }
}
.adm-don__prod { display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 6px 16px; align-items: end; }
.adm-don__prod-state { padding-bottom: 12px; color: var(--text-2); }
@media (max-width: 760px) { .adm-don__prod { grid-template-columns: 1fr; } .adm-don__prod-state { padding-bottom: 0; } }
/* ================= Admin: Übernahme ================= */
.adm-mig { display: flex; flex-direction: column; gap: 10px; padding-bottom: 16px; }
.adm-mig__checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.adm-mig__checks li { padding: 9px 12px; border-radius: 10px; background: var(--surface-2); }
.adm-mig__checks li::before { content: "✓ "; color: var(--green); font-weight: 800; }
.adm-mig__checks li.warn::before { content: "! "; color: var(--gold); }
.adm-mig__checks li.info::before { content: "i "; color: var(--blue); }
.adm-mig__steps { display: flex; flex-direction: column; gap: 10px; }
.adm-mig__step { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border-radius: 12px; background: var(--surface-2); }
.adm-mig__bar { width: 100%; height: 8px; }
.adm-mig__bar span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .3s; }
.adm-mig__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-mig__setup .ok { color: var(--green); }
.adm-mig__inline { display: inline-block; margin-left: 10px; }

/* ---------- Admin: Nutzer ---------- */
.adm-ufilter { display: flex; flex-direction: column; gap: 10px; }
.adm-ufilter__sort { width: auto; flex: 0 0 auto !important; padding-left: 12px !important; padding-right: 30px; height: 44px; }
.adm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-chips .tchip small { margin-left: 4px; color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-users td, .adm-users th { padding: 9px 12px; }
.adm-users .nowrap, .adm-table .nowrap { white-space: nowrap; }
.adm-table th.num, .adm-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.adm-users .adm-user { min-width: 0; }
.adm-users .adm-user > span:last-child { max-width: 280px; }
.adm-users .adm-user small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-users__row { cursor: pointer; }
.adm-users__row:hover td, .adm-users__row:focus-visible td { background: var(--surface-2); }
.adm-users__row:focus-visible { outline: none; }
.adm-users__go { width: 1%; text-align: right; }
.adm-tag { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 6px; font-size: 10.5px; font-weight: 800; background: var(--surface-3); color: var(--text-2); vertical-align: middle; }
.adm-tag .icon { width: 11px !important; height: 11px !important; }
.adm-tag--sup { background: color-mix(in srgb, var(--pink) 18%, transparent); color: var(--pink); }
.adm-tag--admin { background: var(--accent-soft); color: var(--accent); }
.adm-tag--ban { background: var(--red-soft); color: var(--red); }
.adm-users__row.is-past td { opacity: 1; }
.adm-users__row.is-past td > * { opacity: .6; }

.adm-udlg { max-width: min(620px, calc(100vw - 24px)); }
.adm-udlg__box { max-height: calc(100dvh - 40px); overflow-y: auto; gap: 16px; padding: 20px; }
.adm-ud__head { display: flex; align-items: flex-start; gap: 14px; }
.adm-ud__who { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.adm-ud__who h2 { font-size: 20px; font-weight: 900; }
.adm-ud__who .small { overflow-wrap: anywhere; }
.adm-ud__pills { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-ud__x { flex: 0 0 auto; }
.adm-ud__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adm-ud__grid .adm-mini small { text-align: center; }
.adm-ud__facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; font-size: 13.5px; margin: 0; }
.adm-ud__facts dt { color: var(--text-3); font-weight: 700; }
.adm-ud__facts dd { margin: 0; color: var(--text-2); }
.adm-ud__more summary, .adm-ud__del summary { cursor: pointer; font-weight: 800; font-size: 13.5px; }
.adm-ud__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.adm-ud__list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.adm-ud__list li:last-child { border-bottom: 0; }
.adm-ud__list small { min-width: 108px; text-align: right; }
.adm-ud__acts { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-ud__acts h3 { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.adm-ud__row { display: flex; align-items: center; gap: 8px; margin: 0; }
.adm-ud__row label { flex: 0 0 120px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.adm-ud__row .input { flex: 1; min-width: 0; }
.adm-ud__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-ud__btns form { margin: 0; }
.adm-ud__btns .btn .icon { width: 14px; height: 14px; }
.adm-ud__del form { margin-top: 8px; }
@media (max-width: 560px) {
    .adm-ud__grid { grid-template-columns: repeat(2, 1fr); }
    .adm-ud__row { flex-wrap: wrap; }
    .adm-ud__row label { flex-basis: 100%; }
    .adm-ud__list li { grid-template-columns: 1fr auto; }
    .adm-ud__list small { grid-column: 1 / -1; text-align: left; }
    .adm-users .adm-user > span:last-child { max-width: 170px; }
}
.adm-udlg:focus, .adm-udlg:focus-visible { outline: none; }
@media (max-width: 560px) {
    .adm-ufilter .adm-search { flex-wrap: wrap; }
    .adm-ufilter .adm-search input[type=search] { flex: 1 1 100%; }
    .adm-ufilter .adm-search .search__ic { top: 12px; }
    .adm-ufilter__sort { flex: 1 1 auto !important; }
    .adm-users__go { display: none; }
    .adm-users td, .adm-users th { padding: 9px 10px; }
}
.adm-mails { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.adm-mails__list { list-style: none; margin: 0; padding: 0; }
.adm-mails__list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.adm-mails__list li > span:first-child { display: flex; flex-direction: column; }
.adm-mails__list small { font-size: 12.5px; }
.adm-mails__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-mails__acts form, .adm-mails__all { margin: 0; }
.adm-mails__acts .icon, .adm-mails__all .icon { width: 14px; height: 14px; }
.adm-mails__all { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.adm-mails__all .input { width: auto; }

/* ---------- Admin: E-Mails ---------- */
.adm-mailed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.adm-mailed__form { display: flex; flex-direction: column; gap: 14px; }
.adm-mailed__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.adm-mailed__top > span { display: flex; flex-direction: column; }
.adm-mailed__vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.adm-mailed__vars .tchip { height: 28px; padding: 0 9px; font-size: 12.5px; font-family: ui-monospace, Menlo, monospace; cursor: pointer; }
.adm-mailed__field { display: flex; flex-direction: column; gap: 6px; }
.adm-mailed__field > span { font-size: 13px; font-weight: 800; color: var(--text-2); }
.adm-mailed__field textarea.input { padding: 10px 14px; line-height: 1.5; resize: vertical; }
.adm-mailed__mod { font-style: normal; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); margin-left: 4px; }
.adm-mailed__form code { font-size: 12px; }
.adm-mailed__bar { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-mailed__test { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.adm-mailed__row { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-mailed__row .input { flex: 1 1 200px; }
.adm-mailed__row .icon { width: 14px; height: 14px; }
.adm-mailed__preview { position: sticky; top: 16px; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.adm-mailed__preview header { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.adm-mailed__preview iframe { width: 100%; height: 640px; border: 0; background: #f3efec; align-self: center; transition: width .2s; }
.adm-mailed__size { align-self: center; margin: 10px; }
@media (max-width: 1100px) { .adm-mailed { grid-template-columns: 1fr; } .adm-mailed__preview { position: static; } }

/* ---------- Profilbild wählen ---------- */
.avpick-open { position: relative; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; flex-shrink: 0; }
.avpick-open__ic { position: absolute; left: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--surface); color: var(--text); box-shadow: var(--shadow); transition: transform .15s; }
.avpick-open__ic .icon { width: 13px; height: 13px; }
.avpick-open:hover .avpick-open__ic, .avpick-open:focus-visible .avpick-open__ic { transform: scale(1.1); background: var(--accent); color: var(--accent-ink); }
.avpick { max-width: min(520px, calc(100vw - 24px)); }
.avpick .modal__box { max-height: calc(100dvh - 40px); overflow-y: auto; }
.avpick__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.avpick__item { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.avpick__item:hover:not(:disabled) { border-color: var(--accent); }
.avpick__item:disabled { cursor: default; }
.avpick__item.is-equipped { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.avpick__img { position: relative; width: 64px; height: 64px; }
.avpick__img img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.avpick__item.is-equipped .avpick__img img { box-shadow: 0 0 0 3px var(--accent); }
.avpick__item.is-locked .avpick__img img { filter: grayscale(.8) brightness(.55); }
.avpick__img i { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.avpick__img i .icon { width: 20px; height: 20px; }
.avpick__item b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.avpick__item small { font-size: 11px; color: var(--text-3); font-weight: 700; min-height: 13px; }
.avpick__item.is-equipped small { color: var(--accent-text, var(--accent)); }
.avpick__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.avpick__foot form { margin: 0; }
@media (max-width: 420px) { .avpick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.adm-reset { border: 1px solid color-mix(in srgb, var(--red) 35%, var(--line)); }
.adm-reset__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.adm-reset__cols ul { margin: 6px 0 0; }
@media (max-width: 700px) { .adm-reset__cols { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.contact-intro { margin: -4px 0 0; }
.contact { display: flex; flex-direction: column; gap: 16px; padding: 22px; }
.contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact__cats { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.contact__cats legend { padding: 0; margin-bottom: 8px; }
.contact__cat input { position: absolute; opacity: 0; pointer-events: none; }
.contact__cat span { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--surface-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.contact__cat span .icon { width: 20px; height: 20px; color: var(--text-3); }
.contact__cat b { font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.contact__cat input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.contact__cat input:checked + span .icon { color: var(--accent); }
.contact__cat input:focus-visible + span { box-shadow: 0 0 0 3px var(--accent-soft); }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact textarea { min-height: 150px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text); font: inherit; font-size: 15px; font-weight: 500; line-height: 1.5; resize: vertical; outline: none; }
.contact textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.contact .field.has-error textarea { border-color: var(--red); }
.contact .field__hint { font-weight: 500; }
.contact__as { display: flex; align-items: center; gap: 6px; margin: 0; }
.contact__as .icon { width: 14px; height: 14px; }
.contact .check a { font-weight: 700; }
.contact > .btn { align-self: flex-start; }
.contact > .btn .icon { width: 17px; height: 17px; }
.contact-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 22px; }
.contact-done__ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); }
.contact-done__ic .icon { width: 26px; height: 26px; }
.contact-done h2 { font-size: 22px; font-weight: 900; }
.contact-done__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
@media (max-width: 640px) {
    .contact { padding: 16px; }
    .contact__cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contact__row { grid-template-columns: 1fr; }
    .contact > .btn { align-self: stretch; }
}
.adm-inbox { display: flex; flex-direction: column; gap: 12px; }
.adm-msg { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.adm-msg.is-new { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.adm-msg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.adm-msg__subj { flex: 1; min-width: 180px; font-size: 15.5px; }
.adm-msg__cat { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 800; background: var(--surface-2); color: var(--text-2); }
.adm-msg__cat .icon { width: 13px; height: 13px; }
.adm-msg__cat--bug { background: var(--red-soft); color: var(--red); }
.adm-msg__cat--idea { background: var(--accent-soft); color: var(--accent); }
.adm-msg__cat--account { background: color-mix(in srgb, var(--pink) 16%, transparent); color: var(--pink); }
.adm-msg__from { margin: 0; color: var(--text-3); overflow-wrap: anywhere; }
.adm-msg__body { font-size: 14.5px; line-height: 1.55; color: var(--text); white-space: normal; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.adm-msg__ua { margin: 0; font-size: 11.5px; overflow-wrap: anywhere; }
.adm-msg__acts { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-msg__acts form { margin: 0; }
.adm-msg__acts .icon { width: 14px; height: 14px; }
.adm-toolbar .adm-chips .tchip .icon { width: 13px; height: 13px; }
.admin-nav__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 11.5px; font-weight: 900; }
.lb-row__pts b i { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-3); }
.lb-row__pts small { white-space: nowrap; }
.podium__lv { font-size: 11.5px; font-weight: 700; color: var(--text-3); }