/* =====================================================================
   DC Ranked – Designsystem „Oche“
   Klar, ruhig, große Zahlen. Grün = Treffer/Sieg, Rot = Niederlage,
   Gold = Platz 1 und Abzeichen. Dunkel als Standard, Hell umschaltbar.
   ===================================================================== */

@font-face { font-family: "Inter"; src: url("fonts/Inter-Regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-SemiBold.woff") format("woff"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-Bold.woff") format("woff"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Inter Display"; src: url("fonts/InterDisplay-ExtraBold.woff") format("woff"); font-weight: 800; font-display: swap; }

:root {
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-num: "Inter Display", "Inter", system-ui, sans-serif;
  --r-xl: 20px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --wrap: 1160px;
  --tabbar-h: 0px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

:root, [data-theme="dark"] {
  --dpa: #d4a845; --dpa-hi: #f0d48a; --dpa-lo: #b98a2c; --dpa-soft: rgba(212, 168, 69, .16); --dpa-glow: rgba(240, 212, 138, .7);
  color-scheme: dark;
  --bg: #0d0d0f;
  --bg-2: #08080a;
  --s1: #16161a;
  --s2: #1e1e23;
  --s3: #28282e;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --text: #f6f3ec;
  --text-2: #b5b0a5;
  --text-3: #85807a;
  --acc: #d9b45a;
  --acc-2: #ecd08a;
  --acc-ink: #1a1404;
  --acc-soft: rgba(217, 180, 90, .14);
  --acc-grad: linear-gradient(135deg, #f0d48a 0%, #d4a845 55%, #b98a2c 100%);
  --win: #4cc38a;
  --win-soft: rgba(76, 195, 138, .14);
  --red: #f0625a;
  --red-soft: rgba(240, 98, 90, .14);
  --gold: #e3bd62;
  --gold-soft: rgba(227, 189, 98, .14);
  --blue: #8fb4ff;
  --blue-soft: rgba(143, 180, 255, .14);
  --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 12px 32px -20px rgba(0, 0, 0, .9);
  --appbar: rgba(13, 13, 15, .8);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f6f3;
  --bg-2: #f1efea;
  --s1: #ffffff;
  --s2: #f8f6f1;
  --s3: #efebe1;
  --line: rgba(30, 24, 10, .08);
  --line-2: rgba(30, 24, 10, .15);
  --text: #16130d;
  --text-2: #57514a;
  --text-3: #8b847a;
  --acc: #b8902e;
  --acc-2: #9c7720;
  --acc-ink: #1d1505;
  --acc-soft: rgba(201, 160, 60, .13);
  --acc-grad: linear-gradient(135deg, #f3d98f 0%, #d8ae4c 50%, #bb8d2b 100%);
  --win: #1f9d62;
  --win-soft: rgba(31, 157, 98, .1);
  --red: #d2423a;
  --red-soft: rgba(210, 66, 58, .09);
  --gold: #b8902e;
  --gold-soft: rgba(201, 160, 60, .13);
  --blue: #3a6fd0;
  --blue-soft: rgba(58, 111, 208, .09);
  --shadow: 0 1px 2px rgba(40, 30, 10, .04), 0 10px 30px -18px rgba(60, 45, 10, .22);
  --appbar: rgba(255, 255, 255, .82);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.js .nojs-only { display: none !important; }
html:not(.js) .js-only { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.5 var(--f-ui);
  font-feature-settings: "tnum" 1, "cv05" 1, "cv08" 1;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1; }
a { color: var(--acc-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="light"] a { color: var(--acc); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.12; letter-spacing: -.015em; font-weight: 700; }
h1 { font-family: var(--f-num); font-weight: 800; font-size: clamp(1.9rem, 4.2vw, 2.7rem); letter-spacing: -.035em; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }
small, .muted { color: var(--text-3); }
.muted2 { color: var(--text-2); }
.strong { font-weight: 600; color: var(--text); }
.num { font-family: var(--f-num); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }
code { font-size: .88em; background: var(--s2); padding: .1em .35em; border-radius: 5px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[data-theme="dark"] .only-dark, [data-theme="light"] .only-light { display: inline-flex; }
[data-theme="dark"] .only-light, [data-theme="light"] .only-dark { display: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
main.wrap { padding-top: 1.5rem; padding-bottom: 3rem; }

/* ---------- App-Leiste ---------- */
.appbar {
  position: sticky; top: 0; z-index: 30; background: var(--appbar);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top);
}
.appbar-inner { max-width: var(--wrap); margin: 0 auto; padding: .55rem 16px; display: flex; align-items: center; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); flex: none; }
.brand:hover { text-decoration: none; }
.brand-logo { height: 42px; width: auto; object-fit: contain; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-family: var(--f-num); font-weight: 800; font-size: 1.08rem; letter-spacing: -.01em; }
.brand-text small { font-size: .72rem; color: var(--text-3); }
.topnav { display: flex; gap: .1rem; flex: 1; justify-content: center; }
.topnav a { color: var(--text-2); padding: .45rem .7rem; border-radius: 999px; font-weight: 500; font-size: .93rem; white-space: nowrap; }
.topnav a:hover { color: var(--text); background: var(--s2); text-decoration: none; }
.topnav a[aria-current="page"] { color: var(--text); background: var(--s3); }
.appbar-actions { display: flex; align-items: center; gap: .45rem; flex: none; }
.iconbtn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--line); background: var(--s1); color: var(--text-2); cursor: pointer; }
.iconbtn:hover { color: var(--text); border-color: var(--line-2); text-decoration: none; }
.iconbtn .ic { width: 18px; height: 18px; }
.me-btn { position: relative; display: inline-flex; border-radius: 999px; }
.me-btn:hover { text-decoration: none; }
.me-btn[aria-current="page"] .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--acc); }
.badge-dot { position: absolute; top: -4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--bg); }
.live-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--red-soft); color: var(--red); font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.live-chip:hover { text-decoration: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.8); } }

@media (max-width: 1080px) { .topnav a { padding: .45rem .5rem; font-size: .88rem; } }
@media (max-width: 960px) {
  :root { --tabbar-h: 64px; }
  .topnav, .hide-mobile { display: none !important; }
  .appbar-inner { justify-content: space-between; }
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* ---------- Tab-Leiste (Handy) ---------- */
.tabbar { display: none; }
@media (max-width: 960px) {
  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--appbar); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
    border-top: 1px solid var(--line);
  }
  .tabbar > a, .tabbar > button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: var(--tabbar-h); color: var(--text-3); font: 600 .68rem var(--f-ui); background: none; border: 0; cursor: pointer;
  }
  .tabbar > a:hover { text-decoration: none; }
  .tabbar .ic { width: 22px; height: 22px; }
  .tabbar [aria-current="page"] { color: var(--text); }
  .tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--acc); }
  .tabbar .badge-dot { top: 6px; right: calc(50% - 22px); }
  .tabbar .tab-fab {
    width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 18px; background: var(--acc-grad); color: var(--acc-ink);
    box-shadow: 0 10px 26px -8px rgba(185, 138, 44, .7); align-self: center;
  }
  .tabbar .tab-fab .ic { width: 28px; height: 28px; stroke-width: 2.4; }
  .tabbar .tab-fab:active { transform: scale(.95); }
}

/* ---------- Sheet ---------- */
.sheet {
  border: 0; padding: 0 16px calc(16px + env(safe-area-inset-bottom)); margin: auto 0 0; width: 100%; max-width: 100%;
  background: var(--s1); color: var(--text); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0,0,0,.4);
}
.sheet::backdrop { background: rgba(0, 0, 0, .5); }
.sheet[open] { animation: sheet-in .28s var(--ease); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grab { width: 40px; height: 5px; border-radius: 9px; background: var(--line-2); margin: 10px auto 14px; }
.sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sheet-grid a { display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1rem .5rem; border-radius: var(--r-lg); background: var(--s2); color: var(--text); font-weight: 600; font-size: .85rem; text-align: center; }
.sheet-grid a:hover { text-decoration: none; background: var(--s3); }
.sheet-grid .ic { width: 24px; height: 24px; color: var(--text-2); }
.sheet-grid .sheet-live .ic { color: var(--red); }
.sheet-foot { display: flex; gap: .5rem; margin-top: 14px; flex-wrap: wrap; }
.sheet-foot .btn, .sheet-foot form { flex: 1; }
.sheet-foot form .btn { width: 100%; }
@media (min-width: 961px) { .sheet { max-width: 520px; margin: auto; border-radius: 22px; } }

/* ---------- Fußzeile ---------- */
.foot { color: var(--text-3); font-size: .82rem; border-top: 1px solid var(--line); }
.foot-inner { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; padding-top: 1rem; padding-bottom: 1.25rem; }
body.bare .foot, body.bare .tabbar { display: none; }

/* ---------- Meldungen ---------- */
.flash { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-md); margin-bottom: 1rem; background: var(--acc-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); animation: flash-in .35s var(--ease); }
.flash .ic { color: var(--acc); margin-top: .1rem; }
.flash-error { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 30%, transparent); }
.flash-error .ic { color: var(--red); }
.flash-info { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 30%, transparent); }
.flash-info .ic { color: var(--blue); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } }
.errors { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); border-radius: var(--r-md); padding: .8rem 1rem .8rem 2rem; margin: 0 0 1rem; }
.notice { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-md); background: var(--gold-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); margin-bottom: 1rem; }
.notice .ic { color: var(--gold); margin-top: .1rem; }
.hint { font-size: .9rem; color: var(--text-2); background: var(--s2); border-radius: var(--r-md); padding: .7rem .9rem; margin-bottom: 1rem; }

/* ---------- Seitenkopf & Tabs ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.page-head h1 { margin: 0; }
.page-head p { margin: .35rem 0 0; color: var(--text-2); }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-3); font-size: .85rem; font-weight: 500; margin-bottom: .35rem; }
.crumb { display: inline-flex; align-items: center; gap: .25rem; font-size: .88rem; color: var(--text-2); margin-bottom: .5rem; }
.crumb .ic { width: 16px; height: 16px; }
.tabs { display: flex; gap: .25rem; padding: 4px; background: var(--s1); border: 1px solid var(--line); border-radius: 999px; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.25rem; width: max-content; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .42rem .9rem; color: var(--text-2); white-space: nowrap; border-radius: 999px; font-weight: 600; font-size: .88rem; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a[aria-current="page"] { background: var(--s3); color: var(--text); }
.section { margin-top: 2rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 2rem 0 .8rem; }
.section-head h2 { margin: 0; }
.section-head a { font-size: .88rem; font-weight: 600; }

/* ---------- Flächen ---------- */
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .8rem; flex-wrap: wrap; }
.panel-head h2, .panel-head h3 { margin: 0; display: flex; align-items: center; gap: .5rem; }
.panel-head h2 .ic, .panel-head h3 .ic { color: var(--text-3); }
.panel-head a { font-size: .88rem; font-weight: 600; }
.panel.flush { padding: 0; overflow: hidden; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } .span2 { grid-column: auto; } }
.stack > * + * { margin-top: 14px; }
.empty { background: var(--s1); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 1.6rem; color: var(--text-2); text-align: center; }
.empty p { margin-bottom: .9rem; }

/* ---------- Kennzahlen ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: .85rem 1rem; }
.stat .v { font-family: var(--f-num); font-weight: 800; font-size: 1.9rem; line-height: 1; letter-spacing: -.03em; display: block; }
.stat .l { color: var(--text-2); font-size: .84rem; display: block; margin-top: .35rem; }
.stat .s { color: var(--text-3); font-size: .78rem; }
.stat.hl { background: linear-gradient(160deg, var(--acc-soft), transparent 70%), var(--s1); border-color: color-mix(in srgb, var(--acc) 25%, transparent); }

/* ---------- Avatare & Spieler ---------- */
.av { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-size: .72rem; font-weight: 700; flex: none; letter-spacing: .02em; color: #10161c; font-family: var(--f-ui); }
.av-sm { width: 30px; height: 30px; font-size: .68rem; }
.av-m { width: 44px; height: 44px; font-size: .95rem; }
.av-l { width: 72px; height: 72px; font-size: 1.5rem; }
.av-xl { width: 96px; height: 96px; font-size: 2rem; }
.av0 { background: linear-gradient(135deg, #f6e3ad, #dcb35a); }
.av1 { background: linear-gradient(135deg, #efe6d6, #cdbb9a); }
.av2 { background: linear-gradient(135deg, #e9cfa8, #c1935a); }
.av3 { background: linear-gradient(135deg, #e4e1da, #b9b2a6); }
.av4 { background: linear-gradient(135deg, #f3dcb8, #d9a86a); }
.av5 { background: linear-gradient(135deg, #ddd3bf, #a9977a); }
.plink { display: inline-flex; align-items: center; gap: .55rem; color: var(--text); min-width: 0; font-weight: 500; }
[data-theme="light"] .plink { color: var(--text); }
.plink span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plink:hover { text-decoration: none; }
.plink:hover span { text-decoration: underline; text-underline-offset: 3px; }
.title-badge { color: var(--gold); font-size: .78rem; font-weight: 700; }
.inactive { opacity: .55; }

.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pcard { position: relative; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; display: flex; flex-direction: column; gap: .9rem; transition: border-color .15s, transform .15s var(--ease); }
.pcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.pcard-top { display: flex; align-items: center; gap: .7rem; }
.pcard-top a { color: var(--text); font-weight: 600; }
.pcard-top a::after { content: ""; position: absolute; inset: 0; }
.pcard dl { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; gap: .3rem; }
.pcard dt { font-size: .72rem; color: var(--text-3); }
.pcard dd { margin: 0; font-family: var(--f-num); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }

.form { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.fchip { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: .7rem; font-weight: 800; color: var(--acc-ink); }
.fchip:hover { text-decoration: none; transform: translateY(-1px); }
.fchip.w { background: var(--win); color: #fff; }
.fchip.l { background: var(--red); color: #fff; }
.fchip.d { background: var(--text-3); }

/* ---------- Profilkopf ---------- */
.profile-hero { position: relative; overflow: hidden; display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; padding: 1.4rem; border-radius: var(--r-xl); background: radial-gradient(120% 140% at 0% 0%, var(--acc-soft), transparent 60%), var(--s1); border: 1px solid var(--line); margin-bottom: 1.25rem; }
.profile-hero h1 { margin: 0; }
.profile-hero .meta { color: var(--text-2); margin-top: .25rem; }
.profile-hero .actions { margin-left: auto; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.hero-nums { display: flex; gap: 1.6rem; margin-top: .8rem; flex-wrap: wrap; }
.hero-nums div { display: flex; flex-direction: column; }
.hero-nums b { font-family: var(--f-num); font-weight: 800; font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; }
.hero-nums span { font-size: .78rem; color: var(--text-3); margin-top: .25rem; }

/* ---------- Abzeichen ---------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.ach { display: flex; gap: .65rem; align-items: center; padding: .7rem .8rem; border-radius: var(--r-md); background: var(--s2); border: 1px solid var(--line); }
.ach-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; flex: none; }
.ach-ic .ic { width: 20px; height: 20px; }
.ach b { display: block; font-size: .86rem; line-height: 1.2; }
.ach small { display: block; font-size: .72rem; line-height: 1.25; margin-top: .1rem; }
.ach.locked { opacity: .45; filter: grayscale(1); }
.tier-bronze .ach-ic { background: rgba(205, 127, 50, .18); color: #e0954f; }
.tier-silver .ach-ic { background: rgba(170, 186, 204, .2); color: #b9c6d4; }
.tier-gold .ach-ic { background: var(--gold-soft); color: var(--gold); }
.tier-platinum .ach-ic { background: linear-gradient(135deg, rgba(127, 178, 255, .25), rgba(196, 138, 224, .25)); color: #c6b6ff; }
[data-theme="light"] .tier-silver .ach-ic { color: #6b7a8a; }
[data-theme="light"] .tier-platinum .ach-ic { color: #6a52c9; }

/* ---------- Aktivitäts-Feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: grid; grid-template-columns: 34px 1fr auto; gap: .7rem; align-items: center; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .fi { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: var(--s2); color: var(--text-2); }
.feed .fi .ic { width: 18px; height: 18px; }
.feed .k-hot .fi { background: var(--red-soft); color: var(--red); }
.feed .k-good .fi { background: var(--win-soft); color: var(--win); }
.feed .k-badge .fi { background: var(--gold-soft); color: var(--gold); }
.feed .ft { font-size: .92rem; line-height: 1.35; }
.feed .ft a.who { color: var(--text); font-weight: 600; }
.feed time { font-size: .76rem; color: var(--text-3); white-space: nowrap; }

/* ---------- Podium ---------- */
.podium3 { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; align-items: end; margin-bottom: 1.25rem; }
.pod { position: relative; text-align: center; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem .8rem 1rem; color: var(--text); }
.pod:hover { text-decoration: none; border-color: var(--line-2); }
.pod .place { position: absolute; top: .7rem; left: .8rem; font-family: var(--f-num); font-weight: 800; font-size: 1.1rem; color: var(--text-3); }
.pod .av { margin: .2rem auto .55rem; }
.pod .n { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .p { font-family: var(--f-num); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; line-height: 1.1; display: block; margin-top: .25rem; }
.pod .u { font-size: .74rem; color: var(--text-3); }
.pod.first { padding-top: 1.5rem; background: radial-gradient(100% 120% at 50% 0%, var(--gold-soft), transparent 70%), var(--s1); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.pod.first .place { color: var(--gold); }
.pod.first .p { font-size: 2.1rem; }
.pod.first .crown { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); color: var(--gold); background: var(--bg); border-radius: 50%; padding: 4px; }
.pod.first .crown .ic { width: 20px; height: 20px; display: block; }
@media (max-width: 560px) {
  .podium3 { gap: 8px; }
  .pod { padding: .9rem .4rem .8rem; }
  .pod .p { font-size: 1.3rem; }
  .pod.first .p { font-size: 1.6rem; }
  .pod .av-l { width: 52px; height: 52px; font-size: 1.1rem; }
  .pod .n { font-size: .82rem; }
}

/* ---------- Ranglisten-Kacheln (Übersicht) ---------- */
.ranklist { list-style: none; margin: 0; padding: 0; }
.ranklist li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.ranklist li:last-child { border-bottom: 0; }
.ranklist .rk { font-family: var(--f-num); font-weight: 800; width: 1.6rem; color: var(--text-3); }
.ranklist li:first-child .rk { color: var(--gold); }
.ranklist .val { margin-left: auto; font-family: var(--f-num); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.podium { list-style: none; margin: 0; padding: 0; }
.podium li { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
.podium li:last-child { border-bottom: 0; }
.podium .rk { font-family: var(--f-num); font-weight: 800; width: 1.6rem; color: var(--text-3); }
.podium li:first-child .rk { color: var(--gold); }
.podium .val { margin-left: auto; font-family: var(--f-num); font-weight: 800; font-size: 1.15rem; }
.movers { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.movers li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .35rem 0; }

/* ---------- Tabellen ---------- */
.table-wrap { overflow-x: auto; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .62rem .75rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: .74rem; font-weight: 600; color: var(--text-3); white-space: nowrap; background: var(--s1); position: sticky; top: 0; letter-spacing: .01em; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--s2); }
tfoot td { border-top: 1px solid var(--line-2); border-bottom: 0; }
td.n, th.n { text-align: right; white-space: nowrap; }
td.c, th.c { text-align: center; }
td.rank { width: 3.6rem; white-space: nowrap; color: var(--text-3); font-family: var(--f-num); font-weight: 800; }
tr.top1 td.rank { color: var(--gold); }
td.strong { font-weight: 600; color: var(--text); }
td.big { font-family: var(--f-num); font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text); }
th[aria-sort="descending"]::after { content: " ↓"; }
th[aria-sort="ascending"]::after { content: " ↑"; }
.col-hidden { display: none; }
.pos { color: var(--win); } .neg { color: var(--red); }
.move { display: inline-block; font-family: var(--f-ui); font-size: .68rem; font-weight: 700; margin-left: .3rem; padding: .05rem .3rem; border-radius: 6px; vertical-align: 2px; }
.move.up { color: var(--win); background: var(--win-soft); } .move.down { color: var(--red); background: var(--red-soft); }
table.compact th, table.compact td { padding: .45rem .55rem; }
.table-note { font-size: .8rem; color: var(--text-3); margin-top: .7rem; }
tr.me td { background: var(--acc-soft); }
tr.me:hover td { background: var(--acc-soft); }
.cancelled-row td { text-decoration: line-through; color: var(--text-3); }

.coltoggles { position: relative; }
.coltoggles summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--text-2); background: var(--s1); }
.coltoggles summary::-webkit-details-marker { display: none; }
.coltoggles[open] summary { color: var(--text); border-color: var(--line-2); }
.coltoggles > div { position: absolute; right: 0; top: calc(100% + 6px); background: var(--s1); border: 1px solid var(--line-2); border-radius: var(--r-md); padding: .5rem .8rem; z-index: 20; display: grid; gap: .1rem; min-width: 230px; box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); }
.coltoggles label { display: flex; gap: .55rem; align-items: center; font-size: .9rem; padding: .25rem 0; cursor: pointer; }

/* ---------- Spielplan / Match-Karten ---------- */
.mlist { display: grid; gap: 8px; }
.mcard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .8rem; padding: .75rem .9rem; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); transition: border-color .12s, transform .12s var(--ease); }
.mcard:hover { text-decoration: none; border-color: var(--line-2); }
.mcard:active { transform: scale(.995); }
.mcard .side { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.mcard .side.p2 { justify-content: flex-end; text-align: right; }
.mcard .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text-2); }
.mcard .side.win .nm { color: var(--text); font-weight: 700; }
.mcard .sub { display: block; font-size: .74rem; color: var(--text-3); font-weight: 400; }
.mcard .score { display: flex; align-items: center; gap: .15rem; font-family: var(--f-num); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.mcard .score b { min-width: 1.6rem; text-align: center; padding: .1rem .2rem; border-radius: 8px; color: var(--text-3); }
.mcard .score b.w { color: var(--acc-ink); background: var(--acc); }
.mcard .score i { font-style: normal; color: var(--text-3); font-size: 1rem; }
.mcard .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; font-size: .76rem; color: var(--text-3); margin-top: -.15rem; }
.spx { display: inline-flex; align-items: center; gap: .2rem; font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 6px; background: var(--s2); color: var(--text-2); }
.spx.hot { background: var(--red-soft); color: var(--red); }
.spx.good { background: var(--win-soft); color: var(--win); }
.spx.gold { background: var(--gold-soft); color: var(--gold); }
.spx .ic { width: 12px; height: 12px; }
.day-head { display: flex; justify-content: space-between; align-items: baseline; margin: 1.4rem 0 .6rem; }
.day-head h3 { margin: 0; font-size: 1rem; }
.day-head span { font-size: .8rem; color: var(--text-3); }
@media (max-width: 560px) {
  .mcard { padding: .65rem .7rem; gap: .5rem; }
  .mcard .av { display: none; }
  .mcard .score { font-size: 1.15rem; }
}
/* ältere Klassen */
.match-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); color: var(--text); }
.match-row:hover { background: var(--s2); text-decoration: none; }
.match-row .p2 { justify-content: flex-end; text-align: right; }
.match-row .score { font-family: var(--f-num); font-weight: 800; font-size: 1.3rem; min-width: 4rem; text-align: center; }
.match-row .meta { grid-column: 1 / -1; font-size: .78rem; color: var(--text-3); margin-top: -.3rem; }
.side { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.side .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side.win .nm { font-weight: 700; }

/* ---------- Anzeigetafel ---------- */
.scoreboard {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; text-align: center;
  background: radial-gradient(90% 120% at 50% 0%, var(--s2), var(--s1) 70%); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.6rem 1.2rem 1.4rem; overflow: hidden;
}
.scoreboard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--acc-grad); }
.scoreboard .name { font-weight: 700; font-size: 1.15rem; margin-top: .5rem; }
.scoreboard .name a { color: var(--text); }
.scoreboard .legs { font-family: var(--f-num); font-weight: 800; font-size: clamp(3.2rem, 9vw, 5rem); line-height: 1; letter-spacing: -.04em; display: flex; gap: .4rem; align-items: center; }
.scoreboard .legs i { font-style: normal; color: var(--text-3); font-size: .6em; }
.scoreboard .legs .w { color: var(--acc); }
.scoreboard .elo { color: var(--text-2); font-size: .85rem; margin-top: .2rem; }
.scoreboard .winner .name { color: var(--text); }
.scoreboard .loser { opacity: .75; }
.scoreboard .result-label { font-size: .78rem; font-weight: 700; color: var(--text-3); margin-top: .35rem; }
.scoreboard .av { margin: 0 auto; }
@media (max-width: 560px) { .scoreboard { padding: 1.3rem .7rem 1.1rem; gap: .4rem; } .scoreboard .name { font-size: .95rem; } .scoreboard .av-l { width: 54px; height: 54px; font-size: 1.1rem; } }

/* Vergleichsbalken */
.bars { display: grid; gap: .9rem; }
.bar-row { display: grid; grid-template-columns: 4.2rem 1fr 4.2rem; gap: .6rem; align-items: center; }
.bar-row .bl { grid-column: 1 / -1; text-align: center; font-size: .76rem; color: var(--text-3); margin-bottom: -.45rem; }
.bar-row .v { font-family: var(--f-num); font-weight: 800; font-size: 1.05rem; }
.bar-row .v:last-child { text-align: right; }
.bar-row .v.better { color: var(--acc); }
.bar-track { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--s3); gap: 2px; }
.bar-track span { display: block; height: 100%; }
.bar-track .a { background: var(--acc); border-radius: 99px 0 0 99px; }
.bar-track .b { background: var(--text-3); border-radius: 0 99px 99px 0; margin-left: auto; }

.vs-table { table-layout: fixed; }
.vs-table th { white-space: normal; overflow-wrap: anywhere; }
.vs-table td { overflow-wrap: anywhere; }
.vs-table td:first-child, .vs-table th:first-child { text-align: right; width: 35%; }
.vs-table td:last-child, .vs-table th:last-child { text-align: left; width: 35%; }
.vs-table td:nth-child(2), .vs-table th:nth-child(2) { text-align: center; color: var(--text-3); font-size: .84rem; }
.vs-table .better { color: var(--acc); font-weight: 700; }
.vs-table .cat td { background: var(--s2); font-weight: 600; color: var(--text-2); }

/* ---------- Diagramm ---------- */
.chartbox { position: relative; margin: 0; }
.chart { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--text-3); font-size: 13px; font-family: var(--f-ui); }
.chart .line { fill: none; stroke: var(--acc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .dot { fill: var(--acc); stroke: var(--s1); stroke-width: 2; }
.chart .hover-x { stroke: var(--text-3); stroke-dasharray: 3 3; }
.chart .hover-dot { fill: var(--text); stroke: var(--s1); stroke-width: 2; }
.chart-tip { position: absolute; pointer-events: none; background: var(--s3); border: 1px solid var(--line-2); color: var(--text); font-size: .8rem; padding: .3rem .55rem; border-radius: 8px; white-space: nowrap; transform: translate(-50%, -125%); }

/* ---------- Formulare ---------- */
label { display: block; }
.field { margin-bottom: 1rem; }
.field > span, .field > label > span, .flabel { display: block; font-size: .84rem; font-weight: 600; color: var(--text-2); margin-bottom: .35rem; }
.field small { display: block; margin-top: .3rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], input[type=file], select, textarea {
  width: 100%; min-height: 46px; padding: .6rem .8rem; font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line-2); border-radius: var(--r-md); transition: border-color .12s, box-shadow .12s;
}
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: #fff; }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input:focus, select:focus, textarea:focus { border-color: var(--acc); outline: none; box-shadow: 0 0 0 3px var(--acc-soft); }
input[readonly] { color: var(--text-2); }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237b8692' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.2rem; }
textarea { min-height: 6rem; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 1.15rem; height: 1.15rem; accent-color: var(--acc); vertical-align: middle; }
.check { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; cursor: pointer; }
.row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.row2 { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem .4rem; margin: 0 0 1rem; min-width: 0; }
legend { padding: 0 .4rem; font-weight: 700; }
.form-narrow { max-width: 30rem; }
.form-mid { max-width: 48rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 44px; padding: .55rem 1.1rem;
  border-radius: var(--r-md); border: 1px solid transparent; font: 600 .93rem/1.2 var(--f-ui); cursor: pointer; white-space: nowrap;
  background: var(--acc-grad); color: var(--acc-ink); transition: transform .1s, background .15s, border-color .15s;
}
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: scale(.97); }
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--acc-grad); color: var(--acc-ink); }
[data-theme="light"] .btn, [data-theme="light"] .btn-primary { color: var(--acc-ink); }
.btn-secondary { background: var(--s2); color: var(--text); border-color: var(--line); }
[data-theme="light"] .btn-secondary { color: var(--text); }
.btn-secondary:hover { border-color: var(--line-2); filter: none; }
.btn-ghost { background: transparent; color: var(--text-2); border-color: var(--line); }
[data-theme="light"] .btn-ghost { color: var(--text-2); }
.btn-ghost:hover { color: var(--text); border-color: var(--line-2); filter: none; }
.btn-ok { background: var(--acc-grad); color: var(--acc-ink); }
.btn-danger { background: transparent; color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, transparent); }
[data-theme="light"] .btn-danger { color: var(--red); }
.btn-danger:hover { background: var(--red-soft); filter: none; }
.btn-sm, .btn-s { min-height: 34px; padding: .3rem .75rem; font-size: .84rem; border-radius: 10px; }
.btn-lg { min-height: 54px; padding: .8rem 1.4rem; font-size: 1.02rem; border-radius: 14px; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: .45; pointer-events: none; }
.linklike { background: none; border: 0; color: var(--acc-2); padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
[data-theme="light"] .linklike { color: var(--acc); }
.linklike:hover { text-decoration: underline; }
form.inline { display: inline; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

.seg { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.seg label { padding: .45rem 1rem; cursor: pointer; color: var(--text-2); border-radius: 999px; font-weight: 600; font-size: .9rem; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg label:has(input:checked) { background: var(--s3); color: var(--text); }
.seg label:has(input:focus-visible) { outline: 2px solid var(--blue); }
.switcher { display: inline-flex; padding: 3px; gap: 3px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.switcher button { background: none; border: 0; color: var(--text-2); padding: .25rem .65rem; font: 600 .8rem var(--f-ui); cursor: pointer; border-radius: 999px; }
.switcher button[aria-pressed="true"] { background: var(--s3); color: var(--text); }

.filters { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-bottom: 1rem; }
.filters .field { margin: 0; min-width: 140px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; margin: 0; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; }

/* ---------- Eintragen: Bausteine ---------- */
.picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .75rem .3rem .6rem; border-radius: var(--r-md); background: var(--s2); border: 1.5px solid transparent; cursor: pointer; text-align: center; transition: border-color .12s, transform .12s var(--ease), background .12s; }
.pick:hover { border-color: var(--line-2); }
.pick:active { transform: scale(.97); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick .pn { font-size: .78rem; font-weight: 600; line-height: 1.2; color: var(--text); overflow-wrap: anywhere; }
.pick .ph { font-size: .66rem; color: var(--text-3); }
.pick .ph.new { color: var(--gold); font-weight: 700; }
.pick:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.pick:has(input:checked)::after { content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1404' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17 19 7'/%3E%3C/svg%3E") center / 11px no-repeat; }
.pick:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.pick-search { margin-bottom: .7rem; }

.stepper { justify-self: start; width: max-content; display: inline-flex; align-items: center; gap: .4rem; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 14px; padding: 4px; }
.stepper button { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--s2); color: var(--text); font-size: 1.2rem; cursor: pointer; display: grid; place-items: center; }
.stepper button:active { transform: scale(.93); }
.stepper button .ic { width: 18px; height: 18px; }
.stepper output, .stepper input { width: 2.6rem; text-align: center; font-family: var(--f-num); font-weight: 800; font-size: 1.35rem; background: none; border: 0; min-height: 0; padding: 0; color: var(--text); }
.stepper input:focus { box-shadow: none; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .7rem; min-height: 36px; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); color: var(--text); font: 700 .88rem var(--f-ui); cursor: pointer; font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--line-2); }
.chip:active { transform: scale(.95); }
.chip.on { background: var(--acc-soft); border-color: var(--acc); color: var(--text); }
.chip.ghost { background: transparent; border-style: dashed; color: var(--text-2); }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.token { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .35rem .3rem .65rem; border-radius: 10px; background: var(--acc-grad); color: var(--acc-ink); font: 800 .9rem var(--f-num); animation: pop .25s var(--ease); }
.token button { width: 22px; height: 22px; border-radius: 7px; border: 0; background: rgba(0,0,0,.18); color: inherit; cursor: pointer; display: grid; place-items: center; }
.token button .ic { width: 13px; height: 13px; }
.token .pts { font: 600 .68rem var(--f-ui); opacity: .8; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

.scorepad { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; padding: 1.1rem; border-radius: var(--r-xl); background: radial-gradient(90% 140% at 50% 0%, var(--s2), var(--s1) 70%); border: 1px solid var(--line); }
.scorepad .who { text-align: center; }
.scorepad .who .pn { font-weight: 700; margin-top: .35rem; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scorepad .legsctl { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.scorepad .legnum { font-family: var(--f-num); font-weight: 800; font-size: clamp(3rem, 12vw, 4.6rem); line-height: 1; letter-spacing: -.04em; width: 1.4em; text-align: center; background: none; border: 0; color: var(--text); padding: 0; min-height: 0; }
.scorepad .legnum:focus { box-shadow: none; }
.scorepad .legbtns { display: flex; gap: .35rem; }
.scorepad .legbtns button { width: 42px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--s2); color: var(--text); cursor: pointer; display: grid; place-items: center; }
.scorepad .legbtns .ic { width: 18px; height: 18px; }
.scorepad .colon { font-family: var(--f-num); font-weight: 800; font-size: 2.4rem; color: var(--text-3); }
.scorepad.win1 .p1 .legnum, .scorepad.win2 .p2 .legnum { color: var(--acc); }
.quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(50px, 1fr)); gap: 6px; margin-top: .9rem; }
.quick .chip { justify-content: center; padding-left: .2rem; padding-right: .2rem; font-family: var(--f-num); font-weight: 800; }

.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 720px) { .statgrid { grid-template-columns: 1fr; } }
.pstats { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; }
.pstats-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.pstats-head b { font-size: 1rem; }
.pstats-head .pts { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--acc); background: var(--acc-soft); padding: .2rem .5rem; border-radius: 8px; }
.srow { display: grid; grid-template-columns: 7.5rem 1fr; gap: .7rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--line); }
.srow:first-of-type { border-top: 0; }
.srow > .sl { font-size: .84rem; font-weight: 600; color: var(--text-2); line-height: 1.25; }
.srow > .sl small { display: block; font-weight: 400; }
.bigin { font-family: var(--f-num); font-weight: 800; font-size: 1.4rem; letter-spacing: -.02em; max-width: 9rem; }
.addrow { display: flex; gap: .4rem; align-items: center; }
.addrow input { max-width: 7.5rem; }
@media (max-width: 420px) { .srow { grid-template-columns: 1fr; gap: .45rem; } }

.preview { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.pv { background: var(--s2); border-radius: var(--r-md); padding: .75rem .9rem; }
.pv span { display: block; font-size: .76rem; color: var(--text-3); }
.pv b { font-family: var(--f-num); font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }

.stickybar { position: sticky; bottom: 0; z-index: 20; margin: 1rem -16px 0; padding: .75rem 16px calc(.75rem + 0px); background: var(--appbar); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); display: flex; gap: .7rem; align-items: center; }
.stickybar .sum { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickybar .sum small { display: block; font-weight: 400; }
@media (max-width: 960px) { .stickybar { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); } }

.step { margin-bottom: 1.4rem; }
.step-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.step-h .no { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--s3); font-weight: 800; font-size: .8rem; color: var(--text-2); }
.step-h h2 { margin: 0; font-size: 1.1rem; }
.step.done .step-h .no { background: var(--acc); color: var(--acc-ink); }

/* ---------- PIN ---------- */
.pinbox { max-width: 360px; margin: 0 auto; text-align: center; }
.pindots { display: flex; justify-content: center; gap: 14px; margin: 1rem 0 1.4rem; }
.pindots span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-2); transition: background .12s, transform .12s; }
.pindots span.on { background: var(--acc); border-color: var(--acc); transform: scale(1.1); }
.pindots.shake, input.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.keypad button { height: 64px; border-radius: 18px; border: 1px solid var(--line); background: var(--s1); color: var(--text); font: 800 1.6rem var(--f-num); cursor: pointer; display: grid; place-items: center; }
.keypad button:active { transform: scale(.95); background: var(--s2); }
.keypad button .ic { width: 24px; height: 24px; }
.keypad .k-muted { background: transparent; border-color: transparent; color: var(--text-2); font-size: .9rem; font-family: var(--f-ui); font-weight: 600; }

/* ---------- Ergebnis-Enthüllung ---------- */
.reveal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(8, 11, 14, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.reveal-card { width: 100%; max-width: 440px; background: var(--s1); border: 1px solid var(--line-2); border-radius: 26px; padding: 1.6rem 1.3rem 1.3rem; text-align: center; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); animation: card-in .5s var(--ease) both; position: relative; overflow: hidden; }
.reveal-card .rl { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.reveal-card .rl.win { color: var(--win); }
.reveal-card .rl.loss { color: var(--red); }
.reveal-card .rs { font-family: var(--f-num); font-weight: 800; font-size: 5rem; letter-spacing: -.05em; line-height: 1; margin: .3rem 0 .2rem; animation: score-in .6s .15s var(--ease) both; }
.reveal-card .rv { color: var(--text-2); margin-bottom: 1rem; }
.reveal-elo { display: inline-flex; flex-direction: column; align-items: center; padding: .7rem 1.2rem; border-radius: 16px; background: var(--s2); margin-bottom: 1rem; animation: card-in .5s .45s var(--ease) both; }
.reveal-elo b { font-family: var(--f-num); font-weight: 800; font-size: 2rem; letter-spacing: -.03em; }
.reveal-elo span { font-size: .78rem; color: var(--text-3); }
.reveal-ach { display: grid; gap: 8px; margin-bottom: 1rem; text-align: left; }
.reveal-ach .ach { animation: card-in .5s var(--ease) both; }
.reveal-card .btns { justify-content: center; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@keyframes score-in { from { opacity: 0; transform: scale(.6); filter: blur(6px); } }
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 61; }

/* ---------- Termine ---------- */
.ev { display: grid; grid-template-columns: 3.8rem 1fr auto; gap: .9rem; align-items: center; padding: .8rem .9rem; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev-date { text-align: center; background: var(--s2); border-radius: 12px; padding: .35rem 0; line-height: 1.05; }
.ev-date b { font-family: var(--f-num); font-weight: 800; font-size: 1.45rem; display: block; letter-spacing: -.02em; }
.ev-date span { font-size: .7rem; color: var(--text-2); font-weight: 600; }
.ev-title { font-weight: 600; }
.ev-title a { color: var(--text); }
.ev-meta { font-size: .82rem; color: var(--text-3); }
.ev.cancelled .ev-title { text-decoration: line-through; color: var(--text-3); }
.rsvp { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.rsvp button { background: var(--s2); border: 1px solid var(--line); color: var(--text-2); border-radius: 10px; padding: .35rem .7rem; font: 600 .82rem var(--f-ui); cursor: pointer; min-height: 34px; }
.rsvp button:hover { color: var(--text); border-color: var(--line-2); }
.rsvp button.on-yes { background: var(--win); border-color: var(--win); color: #fff; }
.rsvp button.on-no { background: var(--red); border-color: var(--red); color: #fff; }
.rsvp button.on-maybe { background: var(--gold); border-color: var(--gold); color: #1d1503; }

.tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; background: var(--s2); color: var(--text-2); white-space: nowrap; }
.tag.yes { background: var(--win-soft); color: var(--win); }
.tag.no { background: var(--red-soft); color: var(--red); }
.tag.maybe, .tag.open { background: var(--gold-soft); color: var(--gold); }
.tag.info { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 620px) {
  .ev { grid-template-columns: 3.3rem 1fr; }
  .ev .rsvp { grid-column: 1 / -1; justify-content: flex-start; }
  .ev .rsvp button { flex: 1; }
}
.people { display: flex; flex-wrap: wrap; gap: .35rem; }
.people .tag { font-size: .8rem; padding: .25rem .6rem; }

/* ---------- Übersicht ---------- */
.welcome { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 860px) { .welcome { grid-template-columns: 1fr; } }
.hello { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: 1.4rem; background: radial-gradient(120% 120% at 100% 0%, var(--acc-soft), transparent 55%), var(--s1); border: 1px solid var(--line); }
.hello h1 { font-size: clamp(1.8rem, 4.5vw, 2.5rem); margin-bottom: .35rem; }
.hello p { color: var(--text-2); max-width: 34rem; }
.hello .quickstats { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: .9rem 0 1.1rem; }
.hello .quickstats div { display: flex; flex-direction: column; }
.hello .quickstats b { font-family: var(--f-num); font-weight: 800; font-size: 1.55rem; line-height: 1; letter-spacing: -.02em; }
.hello .quickstats span { font-size: .76rem; color: var(--text-3); margin-top: .25rem; }
.season-pill { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--text-2); background: var(--s2); padding: .25rem .65rem; border-radius: 999px; margin-bottom: .8rem; }
.season-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }

.highlights { border-radius: var(--r-xl); padding: 1.2rem; background: var(--s1); border: 1px solid var(--line); }
.hl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hl { background: var(--s2); border-radius: var(--r-md); padding: .75rem .85rem; }
.hl .k { font-size: .75rem; color: var(--text-3); font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.hl .k .ic { width: 14px; height: 14px; }
.hl .v { font-family: var(--f-num); font-weight: 800; font-size: 1.8rem; letter-spacing: -.03em; line-height: 1.1; display: block; margin-top: .2rem; }
.hl .w { font-size: .82rem; color: var(--text-2); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl .w a { color: var(--text-2); }
.hl.wide { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }

.countdown { display: flex; gap: 6px; }
.countdown div { background: var(--s2); border-radius: 12px; padding: .45rem .5rem; text-align: center; min-width: 3.4rem; }
.countdown b { font-family: var(--f-num); font-weight: 800; font-size: 1.6rem; display: block; line-height: 1; letter-spacing: -.02em; }
.countdown span { font-size: .68rem; color: var(--text-3); }

.livebar { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--red-soft), transparent 70%), var(--s1); border: 1px solid color-mix(in srgb, var(--red) 25%, transparent); margin-bottom: 14px; color: var(--text); }
.livebar:hover { text-decoration: none; border-color: color-mix(in srgb, var(--red) 45%, transparent); }
.livebar .ic { color: var(--red); }
.livebar b { display: block; }
.livebar small { display: block; color: var(--text-2); }
.livebar .go { margin-left: auto; color: var(--text-3); }

/* ---------- Kasse ---------- */
.money { font-family: var(--f-num); font-weight: 800; letter-spacing: -.02em; }
.acc { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; }
.acc .money { font-size: 1.85rem; display: block; line-height: 1.15; }
.acc .l { color: var(--text-2); font-size: .86rem; font-weight: 600; }
.acc.total { background: radial-gradient(120% 140% at 0% 0%, var(--acc-soft), transparent 60%), var(--s1); border-color: color-mix(in srgb, var(--acc) 30%, transparent); }
.acc.total .money { font-size: 2.3rem; color: var(--text); }
.acc.total .money.neg { color: var(--red); }
.acc.total.owed { background: radial-gradient(120% 140% at 0% 0%, var(--gold-soft), transparent 60%), var(--s1); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.acc.total.owed .money { color: var(--gold); }
.accordion { display: grid; gap: 8px; }
.accordion details { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-md); }
.accordion summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .chev { color: var(--text-3); transition: transform .15s; }
.accordion details[open] summary .chev { transform: rotate(90deg); }
.accordion summary .nm { font-weight: 600; }
.accordion summary .cnt { font-size: .78rem; color: var(--text-3); }
.accordion summary .money { margin-left: auto; font-size: 1.15rem; }
.accordion .acc-body { padding: 0 1rem 1rem; }
.hist { list-style: none; margin: 0; padding: 0; }
.hist li { display: grid; grid-template-columns: auto 1fr; gap: .2rem .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.hist li:last-child { border-bottom: 0; }
.hist .tag { align-self: start; margin-top: .1rem; }
.hist small { grid-column: 2; }

/* ---------- Live ---------- */
.live-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.live-head h1 { margin: 0; }
.live-badge { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--red); background: var(--red-soft); padding: .3rem .7rem; border-radius: 999px; }
.pairs { display: grid; gap: 8px; }
.pair { display: flex; align-items: center; gap: .6rem; padding: .7rem .85rem; background: var(--s2); border-radius: var(--r-md); }
.pair .vs { color: var(--text-3); font-size: .78rem; font-weight: 700; }
.pair .why { margin-left: auto; font-size: .74rem; color: var(--text-3); }
body.bare main.wrap { max-width: 1500px; }
body.bare { font-size: 17px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 560px) {
  main.wrap { padding-top: 1rem; }
  th, td { padding: .5rem .45rem; }
  td.rank { width: 2.6rem; }
  .move { display: block; margin: .1rem 0 0; width: max-content; }
  .table-wrap .plink .av { display: none; }
  .table-wrap .plink span { white-space: normal; }
  td.big { font-size: 1rem; }
  .page-head .actions { width: 100%; }
  .hide-s { display: none; }
  .panel { padding: 1rem; }
  .hl .v { font-size: 1.5rem; }
}

/* ---------- Druck ---------- */
@media print {
  :root, [data-theme] { --bg: #fff; --s1: #fff; --s2: #f3f3f3; --line: #ccc; --line-2: #999; --text: #000; --text-2: #333; --text-3: #555; }
  .appbar, .foot, .tabbar, .no-print, .btn, .tabs, .filters { display: none !important; }
  body { font-size: 11pt; padding: 0; }
  .table-wrap, .panel, .acc { box-shadow: none; overflow: visible; }
  th { position: static; }
}
@media (max-width: 560px) { [data-mobile-acc] { display: inline-flex !important; } }
.accordion summary .money { white-space: nowrap; }
.accordion summary > span:nth-child(3) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) {
  .rank-table [data-col="sp"] { display: none; }
  .accordion summary { padding: .7rem .8rem; gap: .5rem; }
  .accordion summary .cnt { display: none; }
}
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 92px); z-index: 50; max-width: 480px; margin: 0 auto; box-shadow: 0 16px 40px -12px rgba(0,0,0,.6); background: var(--s3); }

/* ---------- Weiß & Gold: Akzente ---------- */
.brand-text strong { background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topnav a[aria-current="page"] { background: var(--acc-soft); color: var(--acc-2); }
[data-theme="dark"] .topnav a[aria-current="page"] { color: var(--acc); }
.tabs a[aria-current="page"] { background: var(--acc-grad); color: var(--acc-ink); }
.hello h1, .page-head h1 { letter-spacing: -.035em; }
.panel, .stat, .pcard, .acc, .table-wrap, .mcard, .accordion details { box-shadow: var(--shadow); }
.pod.first { background: radial-gradient(100% 120% at 50% 0%, var(--acc-soft), transparent 70%), var(--s1); }
.scorepad.win1 .p1 .legnum, .scorepad.win2 .p2 .legnum, .scoreboard .legs .w { color: var(--acc); }
.mcard .score b.w { background: var(--acc-grad); color: var(--acc-ink); }
.step.done .step-h .no { background: var(--acc-grad); }
.live-chip, .live-badge { background: var(--acc-soft); color: var(--acc-2); }
[data-theme="dark"] .live-chip, [data-theme="dark"] .live-badge { color: var(--acc); }
.live-dot { background: var(--acc); }
.livebar { background: linear-gradient(90deg, var(--acc-soft), transparent 70%), var(--s1); border-color: color-mix(in srgb, var(--acc) 30%, transparent); }
.livebar .ic { color: var(--acc); }
.hello { background: radial-gradient(120% 120% at 100% 0%, var(--acc-soft), transparent 55%), var(--s1); }
.ring, .scoreboard::before { background: var(--acc-grad); }

/* ---------- Titelverteidiger (Krone) ---------- */
.champ-crown { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: .3rem; border-radius: 50%; background: var(--acc-grad); color: var(--acc-ink); flex: none; box-shadow: 0 2px 8px -2px rgba(185, 138, 44, .6); }
.champ-crown .ic { width: 12px; height: 12px; }
tr.champ td { background: linear-gradient(90deg, rgba(216, 174, 76, .22), rgba(216, 174, 76, .06) 70%, transparent); }
tr.champ:hover td { background: linear-gradient(90deg, rgba(216, 174, 76, .28), rgba(216, 174, 76, .1) 70%, transparent); }
tr.champ td:first-child { box-shadow: inset 4px 0 0 var(--acc); color: var(--acc-2); }
[data-theme="dark"] tr.champ td:first-child { color: var(--acc); }
tr.champ .plink > span:not(.champ-crown) { font-weight: 800; }
tr.champ .plink .av { box-shadow: 0 0 0 2px var(--s1), 0 0 0 4px var(--acc); }
tr.me:not(.champ) td { background: var(--s2); }
tr.me:not(.champ):hover td { background: var(--s3); }
.champ-chip { display: inline-flex; align-items: center; gap: .4rem; margin-top: .45rem; padding: .3rem .75rem .3rem .45rem; border-radius: 999px; background: var(--acc-grad); color: var(--acc-ink); font-weight: 700; font-size: .82rem; box-shadow: 0 6px 18px -8px rgba(185, 138, 44, .8); }
.champ-chip .ic { width: 16px; height: 16px; }

/* ---------- Unter-Reiter ---------- */
.tabs-sub { border-radius: 14px; }

/* ---------- Altdaten-Raster ---------- */
.legacy-grid table { min-width: max-content; }
.legacy-grid th[scope="row"] { position: sticky; left: 0; z-index: 2; background: var(--s1); font-weight: 600; white-space: nowrap; min-width: 10rem; text-align: left; }
.legacy-grid thead th:first-child { position: sticky; left: 0; z-index: 3; background: var(--s1); }
.legacy-grid td { padding: .3rem .25rem; }
.legacy-grid input { width: 4.4rem; min-height: 36px; padding: .3rem .45rem; text-align: right; font-variant-numeric: tabular-nums; border-radius: 9px; }
.legacy-grid tr.has-data th[scope="row"] { box-shadow: inset 3px 0 0 var(--acc); }
.legacy-bar { justify-content: space-between; }

/* ---------- Hall of Fame / Shame ---------- */
.hof-hero { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1.6rem; border-radius: var(--r-xl); border: 1px solid var(--line); margin-bottom: 1.25rem; box-shadow: var(--shadow);
  background: radial-gradient(90% 140% at 100% 0%, rgba(216, 174, 76, .28), transparent 60%), radial-gradient(60% 100% at 0% 100%, rgba(216, 174, 76, .12), transparent 70%), var(--s1); }
.hof-hero.shame { background: radial-gradient(90% 140% at 100% 0%, var(--red-soft), transparent 60%), var(--s1); }
.hof-hero h1 { margin: 0; }
.hof-hero.fame h1 { background: var(--acc-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hof-hero p { margin: .35rem 0 0; color: var(--text-2); }
.hof-switch { display: inline-flex; padding: 4px; gap: 4px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; }
.hof-switch a { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 1.05rem; border-radius: 999px; color: var(--text-2); font-weight: 700; font-size: .9rem; }
.hof-switch a:hover { text-decoration: none; color: var(--text); }
.hof-switch a .ic { width: 16px; height: 16px; }
.hof-switch a[aria-current="page"] { background: var(--acc-grad); color: var(--acc-ink); }
.hof-hero.shame .hof-switch a[aria-current="page"] { background: var(--text); color: var(--s1); }
.hof-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1rem; }
.hof-card { background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.05rem .6rem; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.hof-card header { display: flex; gap: .7rem; align-items: center; margin-bottom: .6rem; }
.hof-card h3 { margin: 0; font-size: 1rem; }
.hof-card header small { color: var(--text-3); font-size: .78rem; }
.hof-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--acc-soft); color: var(--acc-2); flex: none; }
[data-theme="dark"] .hof-ic { color: var(--acc); }
.hof-ic .ic { width: 20px; height: 20px; }
.shame-page .hof-ic { background: var(--red-soft); color: var(--red); }
.hof-row { display: grid; grid-template-columns: 1.4rem 1fr auto; gap: .6rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); }
.hof-row.first { border-top: 0; padding: .65rem .7rem; margin: 0 -.5rem .2rem; border-radius: 14px; background: linear-gradient(90deg, var(--acc-soft), transparent); }
.hof-rk { font-family: var(--f-num); font-weight: 800; color: var(--text-3); text-align: center; }
.hof-row.first .hof-rk { color: var(--acc-2); font-size: 1.15rem; }
[data-theme="dark"] .hof-row.first .hof-rk { color: var(--acc); }
.hof-who { display: flex; align-items: center; gap: .55rem; min-width: 0; color: var(--text); font-weight: 600; }
.hof-who:hover { text-decoration: none; }
.hof-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-row.first .hof-who { font-weight: 800; }
.hof-val { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.hof-val b { font-family: var(--f-num); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hof-row.first .hof-val b { font-size: 1.3rem; letter-spacing: -.02em; }
.hof-val small { font-size: .74rem; color: var(--text-3); white-space: nowrap; }
.hof-val small a { color: var(--text-3); }
.hof-empty { margin: .4rem 0 .6rem; }
.hof-hero.shame ~ .hof-grid .hof-ic { background: var(--red-soft); color: var(--red); }
.hof-hero.shame ~ .hof-grid .hof-row.first { background: linear-gradient(90deg, var(--red-soft), transparent); }
.hof-hero.shame ~ .hof-grid .hof-row.first .hof-rk { color: var(--red); }

/* ---------- Termine: ganze Zeile anklickbar ---------- */
.ev { position: relative; transition: background .15s; }
.ev:hover { background: var(--s2); }
.ev-title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.ev .rsvp, .ev .tag, .ev form { position: relative; z-index: 1; }
.hof-card a.hof-who, .hof-card a.hof-who:visited { color: var(--text); }
.hof-who span { white-space: normal; overflow: visible; line-height: 1.2; overflow-wrap: anywhere; }
.hof-row.first .hof-val b { font-size: 1.15rem; }
.hof-row { grid-template-columns: 1.4rem minmax(0, 1fr) auto; }
tr.champ td, tr.champ:hover td { background: rgba(216, 174, 76, .14); }
tr.champ:hover td { background: rgba(216, 174, 76, .2); }
.legacy-grid th[scope="row"] { font-size: .9rem; color: var(--text); text-transform: none; letter-spacing: 0; }

.login-logo { display: block; height: 128px; width: auto; margin: .5rem auto 1.25rem; filter: drop-shadow(0 10px 24px rgba(60, 45, 10, .18)); }
@media (max-width: 640px) { .brand-logo { height: 36px; } .login-logo { height: 104px; } }

/* ---------- Spielerprofil: alle Statistiken ---------- */
.stat-table { min-width: max-content; }
.stat-table th[scope="row"] { position: sticky; left: 0; background: var(--s1); font-weight: 600; color: var(--text-2); text-transform: none; letter-spacing: 0; font-size: .88rem; white-space: nowrap; z-index: 1; }
.stat-table thead th:first-child { position: sticky; left: 0; background: var(--s1); z-index: 2; }
.stat-table td.n { font-weight: 600; white-space: nowrap; }
.stat-table thead th:nth-child(2), .stat-table td:nth-child(2) { background: var(--acc-soft); }
.stat-table td:nth-child(2) { font-weight: 800; }
.catlist { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.catlist li { display: grid; grid-template-columns: 7.5rem 1fr 2.2rem; gap: .6rem; align-items: center; font-size: .9rem; }
.catlist .cb { height: 8px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.catlist .cb i { display: block; height: 100%; border-radius: 99px; background: var(--acc-grad); }
.catlist .cb.lose i { background: var(--text-3); opacity: .5; }
.catlist li > b { text-align: right; font-family: var(--f-num); font-weight: 800; }
dd.stack { display: flex; flex-direction: column; align-items: flex-start; }
dd.stack small { font-size: .75rem; }
html { scroll-behavior: smooth; }
#statistik { scroll-margin-top: 80px; }

/* ---------- Profilbilder ---------- */
.av-photo { background: var(--s3); overflow: hidden; padding: 0; }
.av-photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.av-xxl { width: 160px; height: 160px; font-size: 3.2rem; }
.hero-photo { position: relative; display: inline-block; border-radius: 50%; flex: none; }
.hero-photo:hover { text-decoration: none; }
.hero-photo-edit { position: absolute; right: 0; bottom: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-grad); color: var(--acc-ink); border: 3px solid var(--s1); box-shadow: var(--shadow); }
.hero-photo-edit .ic { width: 14px; height: 14px; }
.photo-form { text-align: center; }
.photo-preview { display: grid; place-items: center; margin: .4rem 0 1.2rem; }
.photo-preview > * { grid-area: 1 / 1; }
.photo-preview #photo-new { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--s1), 0 0 0 6px var(--acc); }
.photo-pick { position: relative; cursor: pointer; }
.photo-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }

/* ---------- Umfragen (Verwaltung) ---------- */
.poll-list { display: grid; gap: .6rem; }
.poll-item { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; padding: 1rem 1.2rem; background: var(--s1); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--text); box-shadow: var(--shadow); }
.poll-item:hover { text-decoration: none; border-color: var(--line-2); }
.poll-main b { display: block; font-size: 1.05rem; }
.poll-main small { color: var(--text-3); }
.poll-votes { text-align: right; }
.poll-votes b { display: block; font-family: var(--f-num); font-weight: 800; font-size: 1.6rem; line-height: 1; }
.poll-votes small { color: var(--text-3); font-size: .75rem; }
.poll-state { display: inline-block; padding: .2rem .6rem; border-radius: 999px; background: var(--s3); color: var(--text-2); font-size: .75rem; font-weight: 700; }
.poll-state.on { background: var(--win-soft); color: var(--win); }
.mode-pick { display: grid; gap: .5rem; }
.mode-opt { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem .95rem; border: 1px solid var(--line-2); border-radius: 14px; cursor: pointer; }
.mode-opt:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.mode-opt input { margin-top: .25rem; accent-color: var(--acc); }
.mode-opt b { display: block; }
.mode-opt small { color: var(--text-2); }
.pq { border: 1px solid var(--line-2); border-radius: 16px; padding: .9rem 1rem .6rem; margin: 0 0 .8rem; }
.pq-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .3rem; }
.pq-no { font-weight: 800; color: var(--acc-2); }
.pq-types { margin: .2rem 0 .7rem; flex-wrap: wrap; }
.pq-types label { display: inline-flex; align-items: center; gap: .3rem; }
.pq-types input { position: static; opacity: 1; pointer-events: auto; accent-color: var(--acc); }
.share { display: flex; gap: 1rem 2rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.25rem; }
.share h2 { margin: 0; }
.share p { margin: .2rem 0 0; }
.share-row { display: flex; gap: .5rem; flex: 1; min-width: 300px; flex-wrap: wrap; }
.share-row input { flex: 1; min-width: 200px; font-family: var(--f-ui); }
.poll-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1rem; }
.poll-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.pb-head { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.pb-head b { font-family: var(--f-num); font-weight: 800; white-space: nowrap; }
.pb-head small { color: var(--text-3); font-weight: 600; margin-left: .25rem; }
.pb-bar { height: 10px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.pb-bar i { display: block; height: 100%; border-radius: 99px; background: var(--text-3); opacity: .45; }
.poll-bars li.top .pb-bar i { background: var(--acc-grad); opacity: 1; }
.poll-bars li.top .pb-head span { font-weight: 700; }
.pb-names { font-size: .8rem; color: var(--text-3); margin-top: .3rem; }
.poll-texts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.poll-texts li { padding: .6rem .8rem; background: var(--s2); border-radius: 12px; }
.poll-texts small { display: block; color: var(--text-3); margin-top: .2rem; }

/* ---------- Umfragen (öffentliche Abstimmseite) ---------- */
body.page-umfrage { background: radial-gradient(80% 50% at 50% 0%, var(--acc-soft), transparent 70%), var(--bg); }
.vote-page { max-width: 36rem; margin: 0 auto; padding: 1.5rem 0 3rem; }
.vote-head { display: flex; align-items: center; justify-content: center; gap: .7rem; margin-bottom: 1.2rem; color: var(--text-2); font-weight: 600; }
.vote-head img { height: 56px; }
.vote-card { background: var(--s1); border: 1px solid var(--line); border-radius: 28px; padding: 1.8rem 1.6rem; box-shadow: var(--shadow); }
.vote-card h1 { font-size: clamp(1.7rem, 6vw, 2.2rem); margin: 0; }
.vote-desc { color: var(--text-2); margin: .6rem 0 0; }
.vote-form { margin-top: 1.4rem; }
.vote-q { border: 0; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem; }
.vote-q legend { font-weight: 700; font-size: 1.08rem; margin-bottom: .5rem; }
.vote-q legend .vote-no { margin-right: .5rem; }
.vote-q legend small { font-weight: 500; }
.vote-no { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--acc-soft); color: var(--acc-2); font-size: .85rem; flex: none; }
.vote-opts { display: grid; gap: .5rem; }
.vote-opt { position: relative; display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; min-height: 54px; border: 1.5px solid var(--line-2); border-radius: 16px; cursor: pointer; font-weight: 600; transition: border-color .15s, background .15s; }
.vote-opt input { width: 20px; height: 20px; accent-color: var(--acc); flex: none; }
.vote-opt:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.vote-opt:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.vote-who { background: var(--acc-soft); padding: .7rem 1rem; border-radius: 14px; margin: 0 0 1.2rem; }
.vote-foot { font-size: .82rem; text-align: center; margin: .8rem 0 0; }
.vote-done { text-align: center; padding: 1.4rem 0 .4rem; }
.vote-done h2 { font-size: 1.3rem; margin: .8rem 0 .3rem; }
.vote-done p { color: var(--text-2); margin: 0 0 1rem; }
.vote-check { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--acc-grad); color: var(--acc-ink); box-shadow: 0 12px 30px -12px rgba(185, 138, 44, .8); }
.vote-check .ic { width: 30px; height: 30px; }
.vote-msg p { color: var(--text-2); }

/* ---------- Fakt des Tages ---------- */
.fact { display: flex; gap: 1rem; align-items: flex-start; padding: 1.05rem 1.2rem; margin-bottom: 14px; border-radius: var(--r-lg); background: linear-gradient(100deg, var(--acc-soft), transparent 75%), var(--s1); border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); box-shadow: var(--shadow); }
.fact-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--acc-grad); color: var(--acc-ink); flex: none; }
.fact-ic .ic { width: 22px; height: 22px; }
.fact-body { min-width: 0; }
.fact-head { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--text-3); }
.fact-head b { color: var(--acc-2); font-size: .9rem; }
[data-theme="dark"] .fact-head b { color: var(--acc); }
.fact p { margin: .2rem 0 0; font-size: 1.08rem; font-weight: 600; line-height: 1.45; color: var(--text); }
.fact-ai { display: inline-block; padding: .05rem .45rem; border-radius: 6px; background: var(--text); color: var(--s1); font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.fact-cands { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; max-height: 26rem; overflow: auto; }
.fact-cands li { padding: .55rem .7rem; background: var(--s2); border-radius: 12px; font-size: .9rem; }
.fact-cands b { display: block; font-size: .78rem; color: var(--text-3); font-weight: 600; }

/* ================= Scorer: Eingabe (Tablet) ================= */
body.page-scorer main.wrap { max-width: 1400px; padding-top: 10px; }
.sc-head { display: flex; align-items: center; gap: .7rem; margin-bottom: .6rem; color: var(--text-2); font-weight: 600; font-size: .9rem; }
.sc-head img { height: 30px; }
.sc-back { display: inline-flex; align-items: center; gap: .3rem; margin-right: auto; }
.sc-back .ic { width: 16px; }
.sc-setup { max-width: 760px; margin: 0 auto; background: var(--s1); border: 1px solid var(--line); border-radius: 24px; padding: 1.6rem; box-shadow: var(--shadow); }
.sc-setup h1 { margin: 0 0 1rem; }
.sc-pick { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: end; }
.sc-pick select { min-height: 54px; font-size: 1.05rem; }
.sc-vs { padding-bottom: 1rem; color: var(--text-3); font-weight: 600; }
.sc-opts { display: grid; gap: .3rem; margin: 1rem 0; }
.sc-seg { display: flex; gap: .4rem; flex-wrap: wrap; }
.sc-seg button { min-width: 54px; min-height: 48px; padding: 0 1rem; border-radius: 14px; border: 1.5px solid var(--line-2); background: var(--s1); color: var(--text); font: 700 1rem var(--f-ui); cursor: pointer; }
.sc-seg button.on { background: var(--acc-grad); border-color: transparent; color: var(--acc-ink); }
.sc-go { width: 100%; min-height: 64px; font-size: 1.2rem; }
.sc-err { color: var(--red); font-weight: 600; }
.sc-ok { color: var(--win); font-weight: 700; text-align: center; }
.sc-display-help { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.sc-resume { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .9rem 1rem; border-radius: 16px; background: var(--acc-soft); margin-bottom: 1.2rem; }
.sc-resume span { flex: 1; min-width: 14rem; }

.sc-game { display: grid; gap: 12px; }
.sc-bar { display: flex; align-items: center; gap: .5rem; color: var(--text-2); font-weight: 600; }
.sc-sp { flex: 1; }
.sc-players { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sc-pl { background: var(--s1); border: 2px solid var(--line); border-radius: 22px; padding: .9rem 1.1rem; transition: border-color .15s, box-shadow .15s; }
.sc-pl.on { border-color: var(--acc); box-shadow: 0 0 0 4px var(--acc-soft); }
.sc-pl-top { display: flex; align-items: center; gap: .5rem; }
.sc-nm { font-weight: 800; font-size: 1.15rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--acc); }
.sc-legs { font-family: var(--f-num); font-weight: 800; font-size: 1.6rem; background: var(--s2); border-radius: 12px; min-width: 2.6rem; text-align: center; padding: 0 .5rem; }
.sc-rest { font-family: var(--f-num); font-weight: 800; font-size: clamp(3.5rem, 9vw, 6.5rem); line-height: 1; letter-spacing: -.04em; margin: .2rem 0 .1rem; }
.sc-pl:not(.on) .sc-rest { color: var(--text-3); }
.sc-co { min-height: 1.4em; color: var(--acc-2); font-weight: 800; letter-spacing: .02em; }
[data-theme="dark"] .sc-co { color: var(--acc); }
.sc-mini { display: flex; gap: 1.1rem; color: var(--text-3); font-size: .9rem; margin-top: .3rem; }
.sc-mini b { color: var(--text); font-family: var(--f-num); }
.sc-entry { display: grid; grid-template-columns: 1fr 1.25fr; grid-template-areas: "input pad" "quick pad" "act pad"; gap: 12px; align-items: start; }
.sc-input { grid-area: input; background: var(--s1); border: 1px solid var(--line); border-radius: 22px; padding: .9rem 1.1rem; display: flex; flex-direction: column; }
.sc-who { color: var(--text-3); font-weight: 600; }
.sc-num { font-family: var(--f-num); font-weight: 800; font-size: 4.2rem; line-height: 1; letter-spacing: -.03em; }
.sc-num.empty { color: var(--line-2); }
.sc-msg { min-height: 1.4em; font-weight: 600; color: var(--text-2); }
.sc-msg.bad { color: var(--red); }
.sc-quick { grid-area: quick; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.sc-quick button { min-height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--s1); font: 800 1.15rem var(--f-num); color: var(--text); cursor: pointer; }
.sc-quick .sc-rest-btn { grid-column: span 1; background: var(--acc-soft); border-color: var(--acc); font-size: .95rem; font-family: var(--f-ui); }
.sc-pad { grid-area: pad; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sc-pad button { min-height: 78px; border-radius: 18px; border: 1px solid var(--line-2); background: var(--s1); font: 800 2rem var(--f-num); color: var(--text); cursor: pointer; box-shadow: var(--shadow); touch-action: manipulation; }
.sc-pad button:active, .sc-quick button:active { transform: scale(.97); background: var(--s2); }
.sc-pad .fn { color: var(--text-2); }
.sc-pad .ok { background: var(--acc-grad); border-color: transparent; color: var(--acc-ink); }
.sc-actions { grid-area: act; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-actions .btn { min-height: 54px; }
.sc-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(20, 16, 8, .45); backdrop-filter: blur(4px); padding: 16px; }
.sc-modal-box { background: var(--s1); border-radius: 26px; padding: 1.6rem; width: min(460px, 100%); text-align: center; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); }
.sc-modal-box h2 { margin: 0; font-size: 1.8rem; }
.sc-darts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 1rem 0; }
.sc-darts button { min-height: 90px; border-radius: 20px; border: 0; background: var(--acc-grad); color: var(--acc-ink); font: 800 2.4rem var(--f-num); cursor: pointer; }
.sc-darts button:disabled { background: var(--s3); color: var(--text-3); opacity: .5; cursor: not-allowed; }
.sc-menu { display: grid; gap: .6rem; margin-top: 1rem; }
.sc-sum { max-width: 760px; margin: 0 auto; background: var(--s1); border-radius: 26px; padding: 1.8rem; text-align: center; box-shadow: var(--shadow); border: 1px solid var(--line); }
.sc-sum-head h1 { margin: .3rem 0 1rem; }
.sc-trophy { font-size: 3rem; }
.sc-sum-t { width: 100%; border-collapse: collapse; margin-bottom: 1.2rem; }
.sc-sum-t th, .sc-sum-t td { padding: .55rem; border-bottom: 1px solid var(--line); }
.sc-sum-t td { font-family: var(--f-num); font-weight: 800; font-size: 1.2rem; }
.sc-sum-t tbody th { text-align: left; color: var(--text-2); font-weight: 600; }
.sc-sum-act { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin-bottom: .8rem; }
@media (max-width: 900px) {
  .sc-entry { grid-template-columns: 1fr; grid-template-areas: "input" "pad" "quick" "act"; }
  .sc-pad button { min-height: 64px; }
  .sc-quick { grid-template-columns: repeat(5, 1fr); }
}

/* ================= Scorer: Anzeige (großer Bildschirm) ================= */
body.page-scorer_display { background: #0d0c0a; color: #f6f1e6; overflow: hidden; }
body.page-scorer_display main.wrap { max-width: none; padding: 0; margin: 0; }
body.page-scorer_display .flash, body.page-scorer_display .appbar { display: none; }
#scorer-display { height: 100vh; }
.dp-board { height: 100vh; display: flex; flex-direction: column; padding: 2.2vh 2.2vw; gap: 2vh; }
.dp-top { display: flex; align-items: center; gap: 1.2vw; font-size: 2.2vh; color: #b9b1a1; font-weight: 600; }
.dp-top img { height: 5.5vh; }
.dp-full { margin-left: auto; background: transparent; border: 1px solid #3a352c; color: #8c8476; border-radius: 999px; padding: .4em 1em; font: 600 1.6vh var(--f-ui); cursor: pointer; }
body.is-full .dp-full { opacity: 0; }
.dp-halves { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2vw; min-height: 0; }
.dp-half { position: relative; display: flex; flex-direction: column; border-radius: 3vh; padding: 3vh 2.4vw; background: #171511; border: .35vh solid #24211b; transition: border-color .25s, background .25s; overflow: hidden; }
.dp-half.on { border-color: var(--dpa); background: radial-gradient(120% 70% at 50% 0%, var(--dpa-soft), transparent 70%), #1a1712; }
.dp-half.on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: .9vh; background: linear-gradient(90deg, var(--dpa-hi), var(--dpa), var(--dpa-lo)); }
.dp-half header { display: flex; align-items: center; gap: 1.2vw; }
.dp-av { width: 9vh; height: 9vh; border-radius: 50%; display: grid; place-items: center; background: #2a261f; color: #e9dfc8; font: 800 3.2vh var(--f-num); overflow: hidden; flex: none; }
.dp-av img { width: 100%; height: 100%; object-fit: cover; }
.dp-name { font: 800 5.4vh/1.05 var(--f-num); letter-spacing: -.02em; }
.dp-half:not(.on) .dp-name { color: #9c9484; }
.dp-rest { font: 800 24vh/0.9 var(--f-num); letter-spacing: -.05em; text-align: center; margin: auto 0 0; font-variant-numeric: tabular-nums; }
.dp-half:not(.on) .dp-rest { color: #5f584b; }
.dp-co { display: flex; justify-content: center; gap: 1vw; min-height: 8vh; margin: 1vh 0 1.4vh; }
.dp-co b { padding: .4vh 1.6vw; border-radius: 1.4vh; background: linear-gradient(135deg, var(--dpa-hi), var(--dpa-lo)); color: var(--acc-ink); font: 800 5vh var(--f-num); }
.dp-stats { display: grid; grid-template-columns: 1fr 1fr .8fr; gap: 1vw; border-top: 1px solid #2c2820; padding-top: 1.6vh; }
.dp-stats div { display: flex; flex-direction: column; }
.dp-stats span { color: #8c8476; font-size: 2vh; font-weight: 600; }
.dp-stats b { font: 800 5.4vh/1.05 var(--f-num); letter-spacing: -.02em; }
.dp-stats b.bust { color: #f0625a; }
.dp-dots { display: flex; gap: .5vw; margin-top: .6vh; }
.dp-dots i { width: 1.6vh; height: 1.6vh; border-radius: 50%; background: #3a352c; }
.dp-dots i.on { background: var(--dpa); }
.dp-wait { height: 100vh; display: grid; place-content: center; text-align: center; gap: 1vh; }
.dp-wait img { height: 26vh; margin: 0 auto 2vh; }
.dp-wait h1 { font: 800 6vh var(--f-num); margin: 0; }
.dp-wait p { color: #8c8476; font-size: 2.4vh; margin: 0 0 2vh; }
.dp-wait .dp-full { margin: 0 auto; }
.dp-win { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; text-align: center; background: radial-gradient(60% 60% at 50% 45%, rgb(66, 52, 20), rgb(13, 12, 10) 72%); animation: dpFade .5s ease-out; }
.dp-win-k { color: var(--dpa); font: 700 3vh var(--f-ui); }
.dp-win h1 { font: 800 13vh/1 var(--f-num); margin: 1vh 0; letter-spacing: -.03em; }
.dp-win-score { font: 800 18vh/1 var(--f-num); background: linear-gradient(135deg, var(--dpa-hi), var(--dpa) 50%, var(--dpa-lo)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dp-win p { font-size: 3.2vh; color: #cfc6b4; }
.dp-fx { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; }
.dp-fx small { font: 700 4vh var(--f-ui); color: #f6f1e6; }
.dp-180 { background: radial-gradient(55% 55% at 50% 50%, rgb(74, 58, 22), rgb(13, 12, 10) 75%); animation: dpFade 2.6s ease-out forwards; }
.dp-180 span { font: 800 46vh/0.85 var(--f-num); letter-spacing: -.05em; background: linear-gradient(135deg, #fff2c4, #e8bf55 45%, #a8781a); -webkit-background-clip: text; background-clip: text; color: transparent; animation: dpPop 2.6s cubic-bezier(.2, .9, .3, 1.3) forwards; }
.dp-leg { background: radial-gradient(55% 55% at 50% 50%, rgb(52, 42, 18), rgb(13, 12, 10) 75%); animation: dpFade 2.2s ease-out forwards; }
.dp-leg span { font: 800 20vh/1 var(--f-num); color: var(--dpa-hi); animation: dpPop 2.2s cubic-bezier(.2, .9, .3, 1.2) forwards; }
.dp-ton { background: rgba(13, 12, 10, .93); animation: dpFade 2.2s ease-out forwards; }
.dp-ton span { font: 800 30vh/1 var(--f-num); color: var(--dpa-hi); animation: dpPop 2.2s ease-out forwards; }
@keyframes dpFade { 0% { opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dpPop { 0% { transform: scale(.4); } 18% { transform: scale(1.08); } 30% { transform: scale(1); } 100% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .dp-fx, .dp-fx span, .dp-win { animation-duration: .01s !important; animation-iteration-count: 1; } .dp-fx { animation: none; opacity: 1; } }

/* ================= Live-Seite: Board ================= */
.live-boards { display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.lb-game { background: var(--s1); border: 1.5px solid var(--acc); border-radius: var(--r-lg); padding: .9rem 1.1rem; box-shadow: var(--shadow); }
.lb-head { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .85rem; color: var(--acc-2); margin-bottom: .5rem; }
[data-theme="dark"] .lb-head { color: var(--acc); }
.lb-row { display: grid; grid-template-columns: 1fr 2.4rem 4.5rem 5.5rem; gap: .6rem; align-items: center; padding: .35rem 0; }
.lb-row.on .lb-n::before { content: "▶ "; color: var(--acc); }
.lb-n { font-weight: 700; }
.lb-l { font-family: var(--f-num); font-weight: 800; text-align: center; background: var(--s2); border-radius: 8px; }
.lb-r { font-family: var(--f-num); font-weight: 800; font-size: 1.5rem; text-align: right; }
.lb-a { color: var(--text-3); font-size: .85rem; text-align: right; }
.scorer-tip { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; margin-bottom: 1rem; border-radius: var(--r-lg); background: var(--acc-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.scorer-tip:hover { text-decoration: none; }
.scorer-tip > .ic { width: 22px; height: 22px; color: var(--acc-2); flex: none; }
.scorer-tip span { flex: 1; font-size: .92rem; }

/* Letzte Aufnahmen */
.dp-recent { display: flex; align-items: center; justify-content: center; gap: 1.4vw; margin-bottom: 2vh; }
.dp-recent > span { color: #8c8476; font-size: 2vh; font-weight: 600; }
.dp-recent > div { display: flex; gap: .8vw; }
.dp-chip { min-width: 9vh; padding: .6vh 1.2vw; border-radius: 1.4vh; background: #24211b; color: #b9b1a1; font: 800 4.6vh/1.1 var(--f-num); text-align: center; }
.dp-chip.new { background: #3a3326; color: #f6f1e6; box-shadow: inset 0 0 0 .3vh var(--dpa); }
.dp-chip.bust { color: #f0625a; }
.dp-chip.empty { background: transparent; color: #4a443a; }
.dp-half:not(.on) .dp-chip.new { box-shadow: none; }
.sc-rec { display: inline-flex; align-items: center; gap: .3rem; }
.sc-chip { padding: 0 .4rem; border-radius: 6px; background: var(--s2); }
.sc-chip.new { background: var(--acc-soft); }
.sc-chip.bust { color: var(--red); }

.dp-stats2 { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: .8vw; margin-top: 1.6vh; }
.dp-stats2 div { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .8vh .4vw; border-radius: 1.4vh; background: #201d18; }
.dp-stats2 span { color: #8c8476; font-size: 1.8vh; font-weight: 600; }
.dp-stats2 b { font: 800 4.4vh/1.1 var(--f-num); }
.dp-stats2 .hc { align-items: flex-start; padding-left: 1vw; }
.dp-stats2 .t180 { background: #2c2617; }
.dp-stats2 .t180 b { color: var(--dpa-hi); }

/* Legs – groß und auffällig */
.dp-half header { position: relative; }
.dp-legs { margin-left: auto; display: grid; grid-template-columns: auto auto; grid-template-areas: "l n" "d n"; align-items: center; column-gap: 1.2vw; padding: 1.2vh 1.6vw; border-radius: 2.2vh; background: #24211b; border: .35vh solid #3a352c; transform-origin: center; }
.dp-legs > span:first-child { grid-area: l; color: #a39b8c; font: 700 2.2vh var(--f-ui); }
.dp-legs b { grid-area: n; font: 800 11vh/0.9 var(--f-num); color: #f6f1e6; letter-spacing: -.03em; min-width: 6vh; text-align: center; }
.dp-legs .dp-dots { grid-area: d; margin: 0; gap: .5vw; }
.dp-legs .dp-dots i { width: 2.2vh; height: 2.2vh; background: #3a352c; }
.dp-legs .dp-dots i.on { background: var(--dpa-hi); box-shadow: 0 0 1.4vh var(--dpa-glow); }
.dp-legs.lead { background: linear-gradient(135deg, var(--dpa-hi), var(--dpa-lo) 60%, var(--dpa-lo)); border-color: var(--dpa-hi); }
.dp-legs.lead > span:first-child { color: #3a2c08; }
.dp-legs.lead b { color: var(--acc-ink); }
.dp-legs.lead .dp-dots i { background: rgba(26, 20, 4, .25); }
.dp-legs.lead .dp-dots i.on { background: var(--acc-ink); box-shadow: none; }
.dp-legs.bump { animation: legBump 1.6s cubic-bezier(.2, .9, .3, 1.4) 2.1s both; }
@keyframes legBump {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 212, 138, 0); }
  18% { transform: scale(1.35) rotate(-4deg); box-shadow: 0 0 0 2vh rgba(240, 212, 138, .55); }
  34% { transform: scale(.95) rotate(3deg); }
  50% { transform: scale(1.12) rotate(-1deg); box-shadow: 0 0 0 4vh rgba(240, 212, 138, 0); }
  70% { transform: scale(.99); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .dp-legs.bump { animation: none; } }
.sc-legs { display: inline-flex; align-items: baseline; gap: .35rem; font-size: 2rem; padding: .1rem .7rem; border: 2px solid var(--line-2); }
.sc-legs small { font: 700 .7rem var(--f-ui); color: var(--text-3); }
.sc-legs.lead { background: var(--acc-grad); border-color: transparent; color: var(--acc-ink); }
.sc-legs.lead small { color: var(--acc-ink); opacity: .7; }

/* ---------- Spielverlauf (Scorer-Spiele) ---------- */
.legs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.leg-card { padding: 0; overflow: hidden; }
.leg-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .75rem 1rem; cursor: pointer; list-style: none; border-bottom: 1px solid var(--line); }
.leg-head::-webkit-details-marker { display: none; }
.leg-score { font-family: var(--f-num); font-weight: 700; color: var(--acc); font-variant-numeric: tabular-nums; }
.leg-head .muted { font-size: .85rem; margin-left: auto; }
.vt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .92rem; }
.vt th { font-size: .78rem; font-weight: 600; color: var(--text-2); text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 9rem; }
.vt td { padding: .32rem .6rem; border-bottom: 1px solid var(--line); }
.vt tbody tr:last-child td { border-bottom: 0; }
.vt .vt-n { color: var(--text-3); font-size: .78rem; width: 3rem; }
.vt .vt-s { font-weight: 600; width: 28%; }
.vt .vt-r { color: var(--text-3); width: 16%; }
.vt .vt-s small { font-weight: 400; color: var(--text-3); font-size: .72rem; }
.vt .vt-s.bust s { color: var(--text-3); }
.vt .vt-s.ton { color: var(--acc-2); }
.vt .vt-s.max { color: var(--acc-ink); background: var(--acc-grad); border-radius: 6px; }
.vt .vt-s.co { color: var(--acc-ink); background: var(--acc); border-radius: 6px; }
.vt .vt-s.c26 { color: var(--text-2); font-style: italic; }
.vt tfoot td { font-weight: 600; color: var(--text-2); border-top: 1px solid var(--line-2); border-bottom: 0; }
.vt-start { color: var(--acc); font-size: .7rem; }

/* Scorer-PIN */
.sc-pin { max-width: 380px; margin: 8vh auto 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center; padding: 2rem 1.5rem; }
.sc-pin h1 { margin: 0; font-size: 1.5rem; }
.sc-pin p { margin: 0; }
.sc-pin-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--acc-soft); color: var(--acc); }
.sc-pin-ic svg { width: 26px; height: 26px; }
.sc-pin input[name=pin] { width: 100%; max-width: 220px; text-align: center; font-size: 1.8rem; letter-spacing: .4em; padding: .6rem; font-family: var(--f-num); }
.sc-pin .btn { width: 100%; max-width: 220px; justify-content: center; }

/* Mehrfachauswahl Spieler */
.pick-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 15rem; overflow-y: auto; padding: 2px; }
.mpick { position: relative; cursor: pointer; }
.mpick input { position: absolute; opacity: 0; pointer-events: none; }
.mpick span { display: inline-flex; align-items: center; min-height: 36px; padding: .35rem .7rem; border-radius: 10px; background: var(--s2); border: 1px solid var(--line); font-weight: 600; font-size: .88rem; user-select: none; transition: background .12s, border-color .12s; }
.mpick input:checked + span { background: var(--acc-soft); border-color: var(--acc); color: var(--text); }
.mpick input:checked + span::before { content: "✓"; color: var(--acc); font-weight: 800; margin-right: .35rem; }
.mpick input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.pick-tools { display: flex; gap: .9rem; align-items: center; margin-top: .4rem; font-size: .85rem; }

/* Kein Doppeltipp-Zoom auf Handys (Pinch-Zoom bleibt möglich) */
html, body, a, button, input, select, textarea, label, summary, [data-act], [data-k] { touch-action: manipulation; }
/* iOS zoomt beim Antippen von Feldern unter 16px – daher auf kleinen Geräten mindestens 16px */
@media (max-width: 760px) {
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time], input[type=search], input[type=tel], select, textarea { font-size: max(16px, 1em); }
}

/* Scorer: nicht gewertetes Spiel */
.sc-unranked { margin-left: .6rem; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--s3); color: var(--text-2); border: 1px dashed var(--line-2); }
.sc-ok.sc-ok-muted { color: var(--text-2); }
.dp-unranked { font-style: normal; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; font-size: .8em; }

/* ---------- Turniere ---------- */
.row3 { display: grid; gap: .8rem; grid-template-columns: repeat(3, 1fr); }
.pick-list.pick-tall { max-height: 32rem; }
.tour-form fieldset.panel { padding: 1rem 1.1rem .6rem; }
.tour-form [hidden] { display: none !important; }
.tour-card { display: flex; flex-direction: column; gap: .35rem; color: inherit; text-decoration: none; transition: border-color .12s, transform .12s var(--ease); }
.tour-card:hover { border-color: var(--acc); transform: translateY(-1px); }
.tour-card h2 { margin: .2rem 0 0; font-size: 1.15rem; }
.tour-card p { margin: 0; font-size: .88rem; }
.tour-card-top { display: flex; justify-content: space-between; align-items: center; }
.tour-card-win { display: flex; gap: .4rem; align-items: center; font-weight: 700; color: var(--acc) !important; }
.tour-card-win svg { width: 18px; height: 18px; }
.tour-progress { height: 6px; border-radius: 99px; background: var(--s3); overflow: hidden; }
.tour-progress span { display: block; height: 100%; background: var(--acc-grad); border-radius: 99px; }
.tour-teams { margin: 0; padding-left: 1.3rem; display: grid; gap: .35rem; }
.tour-teams li { font-weight: 600; }
.tour-champ { display: flex; gap: .9rem; align-items: center; padding: 1rem 1.2rem; margin-bottom: 1rem; border-radius: var(--r-lg); background: var(--acc-grad); color: var(--acc-ink); }
.tour-champ svg { width: 34px; height: 34px; }
.tour-champ small { display: block; font-weight: 600; opacity: .75; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }
.tour-champ b { font-size: 1.35rem; }
tr.tour-adv td:first-child { box-shadow: inset 3px 0 0 var(--acc); }
tr.tour-adv td { background: var(--acc-soft); }

.tg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tg-row { display: flex; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: var(--r-md); background: var(--s1); border: 1px solid var(--line); flex-wrap: wrap; }
.tg-row.is-live { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.tg-compact .tg-row { padding: .45rem .6rem; background: transparent; }
.tg-no { font: 700 .8rem var(--f-num); color: var(--text-3); min-width: 1.6rem; }
.tg-main { flex: 1; min-width: 14rem; }
.tg-label { display: block; color: var(--text-3); font-size: .75rem; font-weight: 600; margin-bottom: .1rem; }
.tg-line { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; }
.tg-team { font-weight: 600; overflow-wrap: anywhere; }
.tg-team:last-child { text-align: right; }
.tg-team.win { color: var(--text); font-weight: 800; }
.tg-team.lose { color: var(--text-3); }
.tg-score { font: 800 1.05rem var(--f-num); color: var(--acc); white-space: nowrap; }
.tg-vs { color: var(--text-3); font-size: .8rem; }
.tg-live { display: inline-flex; gap: .3rem; align-items: center; font-size: .78rem; font-weight: 700; color: var(--acc); white-space: nowrap; }
.tg-live svg { width: 14px; height: 14px; }
.tg-avg { display: block; text-align: center; font-size: .75rem; }
.tg-more { font-size: .8rem; display: block; text-align: center; }
.tg-act { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.tg-enter > summary { list-style: none; }
.tg-enter > summary::-webkit-details-marker { display: none; }
.tg-enter[open] { flex-basis: 100%; }
.tg-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .5rem 0 .2rem; }
.tg-form label { display: flex; gap: .4rem; align-items: center; font-weight: 600; font-size: .88rem; }
.tg-form select { width: auto; min-height: 40px; padding-right: 2rem; }

.br-wrap { overflow-x: auto; padding: 1rem; }
.bracket { display: flex; gap: 22px; min-width: max-content; }
.br-col { display: flex; flex-direction: column; min-width: 190px; }
.br-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); margin-bottom: .6rem; text-align: center; }
.br-games { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 12px; }
.br-game { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--s1); position: relative; }
.br-game.is-live { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.br-team { display: flex; justify-content: space-between; gap: .6rem; padding: .4rem .65rem; font-size: .88rem; font-weight: 600; }
.br-team + .br-team { border-top: 1px solid var(--line); }
.br-team b { font-family: var(--f-num); min-width: 1rem; text-align: right; }
.br-team.win { background: var(--acc-soft); font-weight: 800; }
.br-team.win b { color: var(--acc); }
.br-team.lose { color: var(--text-3); }

.tg-big { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; text-align: center; padding: 1.2rem; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line); margin-bottom: 1rem; }
.tg-big b { display: block; font-size: 1.2rem; }
.tg-big small { color: var(--text-3); }
.tg-big .win b { color: var(--acc); }
.tg-big-score { font: 800 2.4rem var(--f-num); }
@media (max-width: 560px) { .row3 { grid-template-columns: 1fr 1fr; } .tg-big-score { font-size: 1.8rem; } }

/* Scorer: Turnier-Spielplan */
.sc-tour { margin-bottom: 1.6rem; }
.sc-tour-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.sc-tour-head h1 { margin: 0; }
.sc-tour-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin-top: .8rem; }
.sc-tg { display: flex; flex-direction: column; gap: .35rem; text-align: left; padding: .85rem 1rem; border-radius: var(--r-lg); background: var(--s1); border: 1px solid var(--line-2); color: var(--text); font: inherit; cursor: pointer; box-shadow: var(--shadow); touch-action: manipulation; }
.sc-tg:active { transform: scale(.98); }
.sc-tg.next { border-color: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft); }
.sc-tg.busy { opacity: .55; }
.sc-tg-k { font-size: .75rem; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.sc-tg.next .sc-tg-k { color: var(--acc); }
.sc-tg-p { display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; font-size: 1.1rem; }
.sc-tg-p i { font-style: normal; color: var(--text-3); font-size: .85rem; }
.sc-tg-m { font-size: .8rem; color: var(--text-2); }
.sc-tlabel { color: var(--acc); }

/* Live-Ticker: Änderungen hervorheben */
.lb-last { font-size: .75rem; font-weight: 700; color: var(--acc); margin-left: .3rem; }
.lb-last.bust { color: var(--red); }
.lb-r.bump { animation: lbBump .9s var(--ease); }
@keyframes lbBump { 0% { color: var(--acc); transform: scale(1.25); } 100% { color: inherit; transform: none; } }
.sc-hint-warn { color: var(--acc) !important; font-weight: 600; }
.sc-seg button:disabled { opacity: .4; cursor: not-allowed; }

/* Scorer: Board-Auswahl */
.sc-board { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .7rem .9rem; margin-bottom: 1.2rem; border-radius: var(--r-md); background: var(--acc-soft); border: 1px solid var(--line); }
.sc-board > span { font-weight: 700; font-size: .9rem; }
.sc-board small { flex-basis: 100%; color: var(--text-2); font-size: .8rem; }
.sc-board .sc-seg button { min-height: 40px; padding: 0 .8rem; }
.sc-boardno { color: var(--acc); }

/* Scorer: Check-Schnelltasten */
.sc-check { grid-column: 1 / -1; display: grid; grid-template-columns: auto repeat(3, 1fr); gap: 8px; align-items: center; margin-top: 2px; }
.sc-check > span { font-weight: 800; font-size: .85rem; color: var(--acc); text-transform: uppercase; letter-spacing: .05em; padding: 0 .3rem; }
.sc-quick .sc-check button { background: var(--acc-grad); border-color: transparent; color: var(--acc-ink); font: 800 1rem var(--f-ui); }
.sc-quick .sc-check button:disabled { background: var(--s2); color: var(--text-3); border-color: var(--line); opacity: .55; cursor: not-allowed; }
.sc-darts.sc-yn { grid-template-columns: 1fr 1fr; }
.sc-darts.sc-yn button { font-size: 1.5rem; font-family: var(--f-ui); }
.sc-change { text-align: left; }
.sc-change .field { margin-bottom: .8rem; }
.sc-change select { min-height: 50px; font-size: 1.05rem; }

/* Hall of Fame/Shame: lange Details umbrechen statt Namen zu quetschen */
.hof-row { grid-template-columns: 1.4rem minmax(7rem, 1fr) minmax(0, auto); }
.hof-val { max-width: 11.5rem; min-width: 0; }
.hof-val small { white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
.vt .vt-s small.vt-who { display: block; font-size: .68rem; color: var(--text-3); font-style: normal; line-height: 1.1; }

/* Scorer: Doppel */
.sc-pick-d { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; }
.sc-pick-d[hidden] { display: none; }
.sc-team { display: grid; gap: .5rem; }
.sc-team b { font-size: .85rem; color: var(--text-2); }
.sc-team select { min-height: 50px; }
.sc-team-hint { grid-column: 1 / -1; color: var(--text-3); font-size: .8rem; }
@media (max-width: 640px) { .sc-pick-d { grid-template-columns: 1fr; } }
.sc-thr { display: inline-flex; align-items: center; gap: .3rem; margin-left: .5rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--acc); background: var(--acc-soft); color: var(--text); font: 700 .8rem var(--f-ui); cursor: pointer; vertical-align: middle; touch-action: manipulation; }
.sc-thr i { font-style: normal; color: var(--acc); }
.sc-yn button.sc-def { outline: 3px solid var(--text); outline-offset: 2px; }
.dp-thr { display: block; font-size: .5em; font-weight: 700; color: var(--acc); margin-top: .2em; }
.lb-thr { color: var(--text-3); font-weight: 600; }

/* Einstellungen: Farbpalette */
.swatches { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: .8rem; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: .3rem; cursor: pointer; width: 4.6rem; text-align: center; }
.swatch > input { position: absolute; opacity: 0; pointer-events: none; }
.swatch > span { width: 44px; height: 44px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); display: grid; place-items: center; position: relative; transition: transform .12s; }
.swatch > input:checked + span { box-shadow: 0 0 0 3px var(--s1), 0 0 0 5px var(--text); transform: scale(1.05); }
.swatch > input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 4px; }
.swatch small { font-size: .74rem; color: var(--text-2); line-height: 1.2; }
.sw-custom { background: conic-gradient(#e04848, #f08a24, #d4a845, #22a55a, #0f9fa8, #3b82f6, #8b5cf6, #e0569b, #e04848) !important; }
.sw-custom input[type=color] { width: 30px; height: 30px; border: 2px solid #fff; border-radius: 50%; padding: 0; cursor: pointer; background: none; min-height: 0; }
.sw-custom input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.sw-custom input[type=color]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.swatch-preview { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; padding: .7rem .9rem; border-radius: var(--r-md); background: var(--bg-2); border: 1px solid var(--line); margin-bottom: .6rem; }
.acc-text { color: var(--acc-2); }

/* ---------- Nachrichten ---------- */
.msg-btn { position: relative; }
.msg-btn .badge-dot { position: absolute; top: -4px; right: -4px; }
.badge-dot.static { position: static; }
.msg-layout { display: grid; grid-template-columns: 320px 1fr; gap: 14px; align-items: start; }
.msg-list { padding: .4rem; max-height: 72vh; overflow-y: auto; }
.msg-item { display: flex; gap: .65rem; align-items: center; padding: .6rem .6rem; border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.msg-item:hover { background: var(--s2); text-decoration: none; }
.msg-item.on { background: var(--acc-soft); }
.msg-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.msg-item-body small { color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msg-item.unread b, .msg-item.unread small { color: var(--text); font-weight: 700; }
.msg-item-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.msg-item-meta small { color: var(--text-3); font-size: .74rem; }
.msg-thread { display: flex; flex-direction: column; min-height: 60vh; padding: 0; overflow: hidden; }
.msg-head { display: flex; gap: .6rem; align-items: center; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.msg-back { display: none; color: var(--text-2); }
.msg-scroll { flex: 1; overflow-y: auto; max-height: 56vh; padding: 1rem; display: flex; flex-direction: column; gap: .45rem; background: var(--bg-2); }
.msg { max-width: 78%; padding: .55rem .8rem .35rem; border-radius: 16px; line-height: 1.35; }
.msg p { margin: 0; overflow-wrap: anywhere; }
.msg small { display: block; font-size: .7rem; opacity: .7; margin-top: .2rem; text-align: right; }
.msg.in { align-self: flex-start; background: var(--s1); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg.out { align-self: flex-end; background: var(--acc-grad); color: var(--acc-ink); border-bottom-right-radius: 5px; }
.msg-day { align-self: center; font-size: .72rem; color: var(--text-3); padding: .2rem .6rem; border-radius: 99px; background: var(--s1); margin: .4rem 0; }
.msg-form { display: flex; gap: .6rem; padding: .75rem; border-top: 1px solid var(--line); align-items: flex-end; }
.msg-form textarea { flex: 1; resize: vertical; min-height: 46px; }
.msg-new { padding: 1.2rem; }
.msg-empty { margin: auto; text-align: center; color: var(--text-3); padding: 2rem; }
.msg-empty svg { width: 42px; height: 42px; opacity: .5; }
@media (max-width: 760px) {
  .msg-layout { grid-template-columns: 1fr; }
  .msg-layout.has-thread .msg-list { display: none; }
  .msg-layout:not(.has-thread) .msg-thread { display: none; }
  .msg-back { display: inline-flex; }
  .msg-scroll { max-height: 60vh; }
}

/* Turnier: Teilbäume, Platzierungen, Boards */
.br-title { margin: 1.2rem 0 .5rem; font-size: .9rem; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.br-wrap .br-title:first-child { margin-top: 0; }
.tour-standings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; }
.tour-standings li { display: flex; gap: .6rem; align-items: baseline; padding: .35rem 0; border-bottom: 1px solid var(--line); }
.tour-standings b { font-family: var(--f-num); min-width: 2.2rem; color: var(--text-3); }
.tour-standings .pl-1 b, .tour-standings .pl-1 span { color: var(--acc-2); font-weight: 800; }
.tour-standings .pl-2 b, .tour-standings .pl-3 b { color: var(--text); }
.tour-boards { margin-bottom: 1rem; }
.tour-boards summary { cursor: pointer; display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.tour-boards summary svg { width: 16px; height: 16px; vertical-align: -2px; }
.tour-board-form { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: flex-end; margin-top: .8rem; }
.tour-board-form .field { margin: 0; min-width: 9.5rem; }
.push-btn.on { border-color: var(--acc); background: var(--acc-soft); }
.push-hint { flex-basis: 100%; font-size: .85rem; margin: .4rem 0 0; }
.board-pick { border: 0; padding: 0; margin: 0; min-width: 10rem; }
.board-pick legend { font-size: .82rem; font-weight: 700; color: var(--text-2); padding: 0; margin-bottom: .3rem; }
.board-pick .pick-list { max-height: none; }
.tour-board-form { align-items: flex-start; }
.tour-board-form > .btn { align-self: flex-end; }