:root {
  --bg: #05050d;
  --bg-1: #090a17;
  --panel: #0d0e1f;
  --panel-2: #131530;
  --line: rgba(255,255,255,.07);
  --line-hi: rgba(139,92,246,.45);
  --grad: linear-gradient(135deg, #a51fe3 0%, #7c3aed 60%, #6d28d9 100%); /* Logo-Verlauf, weiß darauf >= 4.5:1 */
  --text-dim: #7d86a6;
  --violet: #8b5cf6;
  --violet-hi: #a78bfa;
  --violet-dim: #6d28d9;
  --gold: #f0c14b;
  --text: #f2f3fa;
  --text-2: #8e97b3;
  --text-3: #4a5273;
  --win: #34d399;
  --loss: #f87171;
  --maybe: #fbbf24;
  --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --r: 10px;
  --ease: cubic-bezier(.4,0,.2,1);
  /* Tier-Farben */
  --t-splus: #f0c14b; --t-s: #e879f9; --t-a: #8b5cf6; --t-b: #38bdf8; --t-c: #64748b;
  --t-counter: #fb923c; --t-prac: #34d399;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; background: radial-gradient(1100px 520px at 88% -8%, rgba(124,58,237,.10), transparent 62%), var(--bg); }
body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background:
    radial-gradient(1.4px 1.4px at 43% 21%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 8% 11%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 48% 76%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 29% 6%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 55% 10%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 72% 56%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 17% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 76% 9%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 52% 8%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 73% 19%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 20% 71%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 41% 73%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 15% 76%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 26% 49%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 93% 10%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 81% 28%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 70% 56%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 76% 60%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 33% 25%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.4px 1.4px at 12% 75%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 65% 45%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 38% 79%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 67% 55%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1px 1px at 21% 64%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.4px 1.4px at 87% 11%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 42% 45%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 78% 65%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 10% 13%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 91% 87%, rgba(255,255,255,0.35), transparent),
    radial-gradient(1.4px 1.4px at 95% 91%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 75% 89%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 93% 51%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 4% 61%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 80% 16%, rgba(255,255,255,0.5), transparent); }
#app { position: relative; z-index: 1; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .01em; margin: 0; line-height: 1.05; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0; }
a { color: var(--violet-hi); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: 2px; }
::selection { background: rgba(139,92,246,.4); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; border-right: 1px solid var(--line); background: rgba(5,5,13,.6); backdrop-filter: blur(8px); }
.rail .mark { display: block; margin: 2px 0 18px; line-height: 0; border-radius: 12px; }
.rail .mark img { width: 76px; height: auto; display: block; filter: drop-shadow(0 4px 18px rgba(232,121,249,.45)); transition: filter .25s var(--ease), transform .25s var(--ease); }
.rail .mark:hover img { filter: drop-shadow(0 4px 24px rgba(232,121,249,.75)); transform: scale(1.05); }
.rail a.nav { position: relative; width: 72px; min-height: 56px; padding: 10px 0 8px; border-radius: var(--r); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-2); text-decoration: none; font-size: .78rem; transition: background .2s var(--ease), color .2s var(--ease); }
.rail a.nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rail a.nav:hover { color: var(--text); background: rgba(255,255,255,.04); }
.rail a.nav[aria-current="page"] { color: var(--text); background: rgba(139,92,246,.14); }
.rail a.nav[aria-current="page"]::before { content: ''; position: absolute; left: -10px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.rail .spacer { flex: 1; }
.rail .me { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .72rem; color: var(--text-2); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--panel-2) center/cover; border: 1px solid var(--line); display: grid; place-items: center; font: 800 .95rem var(--display); color: var(--violet-hi); flex: none; }
main { padding: 32px clamp(16px, 4vw, 48px) 64px; max-width: 1280px; width: 100%; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head p { color: var(--text-2); margin-top: 6px; max-width: 60ch; }

/* ---------- Bausteine ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.panel + .panel, .next + .panel, .next + .empty { margin-top: 16px; }
.grid > .panel { margin-top: 0; }
.grid { display: grid; gap: 16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--text-2); }
.small { font-size: .85rem; }
.num { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; }

.btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; font-weight: 500; transition: border-color .2s var(--ease), background .2s var(--ease); }
.btn:hover { border-color: var(--line-hi); }
.btn.primary { background: var(--grad); border-color: transparent; color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.12); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.danger:hover { border-color: var(--loss); color: var(--loss); }
.btn.sm { padding: 5px 10px; font-size: .85rem; }
.btn[disabled] { opacity: .5; pointer-events: none; }

input[type=text], input[type=number], input[type=datetime-local], input[type=search], select, textarea {
  background: var(--bg-1); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; width: 100%; }
input:focus, select:focus, textarea:focus { border-color: var(--line-hi); outline: none; }
label.f { display: grid; gap: 6px; font-size: .85rem; color: var(--text-2); }
.form { display: grid; gap: 12px; }
.form.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .form.two { grid-template-columns: 1fr; } }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: none; padding: 10px 16px; color: var(--text-2); cursor: pointer; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--violet); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: .78rem; border: 1px solid var(--line); color: var(--text-2); }
.chip.training { color: var(--violet-hi); border-color: rgba(139,92,246,.4); }
.chip.scrim { color: var(--gold); border-color: rgba(240,193,75,.4); }
.chip.match { color: #fff; background: var(--violet-dim); border-color: var(--violet); }
.chip.win { color: var(--win); border-color: rgba(52,211,153,.4); }
.chip.loss { color: var(--loss); border-color: rgba(248,113,113,.4); }

.empty { padding: 36px 20px; text-align: center; color: var(--text-2); border: 1px dashed var(--line); border-radius: var(--r); }
.empty strong { display: block; color: var(--text); margin-bottom: 4px; font-family: var(--display); font-size: 1.3rem; }

/* ---------- Champ-Icons ---------- */
.champ { width: 44px; height: 44px; border-radius: 8px; background: var(--panel-2) center/cover; border: 1px solid var(--line); flex: none; position: relative; }
.champ.sm { width: 32px; height: 32px; border-radius: 6px; }
.champ.lg { width: 56px; height: 56px; }
.champ.empty-slot { display: grid; place-items: center; color: var(--text-dim); border-style: dashed; cursor: pointer; font-size: 1.2rem; }
.champ.ban::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, transparent 46%, var(--loss) 47% 53%, transparent 54%); border-radius: inherit; }
.champs { display: flex; flex-wrap: wrap; gap: 6px; }
.champ-btn { padding: 0; background: none; border: none; cursor: pointer; border-radius: 8px; }
.champ-btn:hover .champ { border-color: var(--violet-hi); }
.champ-btn[title]:hover .champ::before { content: '×'; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,5,13,.7); border-radius: inherit; color: var(--loss); font-size: 1.4rem; }

/* ---------- Picker (Modal) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(2,2,10,.75); display: grid; place-items: center; z-index: 50; padding: 16px; backdrop-filter: blur(3px); }
.dialog { width: min(720px, 100%); max-height: 86vh; overflow: auto; background: var(--panel); border: 1px solid var(--line-hi); border-radius: 14px; padding: 22px; }
.picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 8px; margin-top: 14px; }
.picker-grid button { display: grid; gap: 3px; justify-items: center; background: none; border: 1px solid transparent; border-radius: 8px; padding: 4px 2px; cursor: pointer; font-size: .68rem; color: var(--text-2); overflow: hidden; }
.picker-grid button:hover, .picker-grid button:focus-visible { border-color: var(--violet-hi); color: var(--text); }
.picker-grid button.on .champ { border-color: var(--violet-hi); box-shadow: 0 0 0 2px rgba(139,92,246,.45); }
.picker-grid span { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

/* ---------- Dashboard: nächster Block ---------- */
.next { position: relative; overflow: hidden; padding: 30px clamp(20px, 3vw, 40px) 26px; border-radius: 16px; border: 1px solid var(--line-hi); background: linear-gradient(160deg, rgba(124,58,237,.10), transparent 55%), var(--panel); }
.next-body { position: relative; z-index: 1; }
.next .when { font: 500 1.05rem var(--body); color: var(--text-2); margin-top: 8px; }
.next .countdown { font: 800 clamp(2.8rem, 7vw, 5rem)/1 var(--display); color: var(--text); margin-top: 16px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.next .countdown small { font-size: .38em; color: var(--text-2); font-weight: 600; margin-left: .25em; }
.next .orbit { position: absolute; right: -60px; top: -34px; width: min(640px, 70%); height: auto; pointer-events: none; }
.orbit .track { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1.5; }
.orbit .track2 { fill: none; stroke: rgba(255,255,255,.04); stroke-width: 1; }
.orbit .arc { fill: none; stroke: url(#orbit-grad); stroke-width: 3.5; stroke-linecap: round; }
@media (max-width: 720px) { .next .orbit { opacity: .3; right: -140px; width: 560px; } }
.lineup { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.slot { border: 1px solid var(--line); border-radius: 10px; padding: 12px 8px; text-align: center; background: rgba(5,5,13,.5); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); min-width: 0; }
.slot .role { font-size: .74rem; color: var(--text-2); }
.slot .who { font: 600 1rem var(--display); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .st { margin-top: 6px; font-size: .78rem; color: var(--text-dim); }
.slot.yes { border-color: rgba(52,211,153,.6); box-shadow: 0 0 22px -8px var(--win); }
.slot.yes .st { color: var(--win); }
.slot.maybe { border-color: rgba(251,191,36,.5); } .slot.maybe .st { color: var(--maybe); }
.slot.no { border-color: rgba(248,113,113,.5); opacity: .8; } .slot.no .st { color: var(--loss); }
@media (max-width: 720px) { .lineup { grid-template-columns: repeat(2, 1fr); } }
.rsvp { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.rsvp button { background: none; border: none; padding: 7px 14px; cursor: pointer; color: var(--text-2); font-weight: 500; }
.rsvp button + button { border-left: 1px solid var(--line); }
.rsvp button:hover { background: rgba(255,255,255,.04); }
.rsvp button.on.yes { background: rgba(52,211,153,.18); color: var(--win); }
.rsvp button.on.maybe { background: rgba(251,191,36,.16); color: var(--maybe); }
.rsvp button.on.no { background: rgba(248,113,113,.16); color: var(--loss); }

/* ---------- Wochenplan ---------- */
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); min-height: 180px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.day.today { border-color: var(--line-hi); }
.day h3 { font-size: 1rem; color: var(--text-2); font-weight: 600; }
.day.today h3 { color: var(--violet-hi); }
.ev { text-align: left; width: 100%; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--violet); border-radius: 8px; padding: 8px; cursor: pointer; }
.ev.scrim { border-left-color: var(--gold); } .ev.match { border-left-color: #fff; }
.ev:hover { border-color: var(--line-hi); }
.ev .t { font: 800 1.1rem var(--display); }
.ev .n { font-size: .82rem; color: var(--text-2); }
.ev .dots { display: flex; gap: 3px; margin-top: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.dot.yes { background: var(--win); } .dot.no { background: var(--loss); } .dot.maybe { background: var(--maybe); }
@media (max-width: 980px) { .week { grid-template-columns: 1fr; } .day { min-height: 0; } }

/* ---------- Tierlisten ---------- */
.tier { display: grid; grid-template-columns: 84px 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.tier + .tier { margin-top: 8px; }
.tier .label { display: grid; place-items: center; font: 800 1.5rem var(--display); color: #0a0a14; text-align: center; padding: 6px; line-height: 1.05; }
.tier .label.long { font-size: .95rem; }
.tier .drop { padding: 8px; min-height: 60px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tier .drop.over { background: rgba(139,92,246,.12); }
.tier .add { width: 44px; height: 44px; border-radius: 8px; border: 1px dashed var(--text-dim); background: none; color: var(--text-dim); cursor: pointer; font-size: 1.3rem; }
.tier .add:hover { color: var(--violet-hi); border-color: var(--violet-hi); }
[draggable=true] { cursor: grab; }

/* ---------- Scrims / Draft ---------- */
.match-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.match-row:last-child { border: none; }
.match-row:hover h3 { color: var(--violet-hi); }
.score { font: 800 1.8rem var(--display); }
.board { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .board { grid-template-columns: 1fr; } }
.side { border: 1px solid var(--line); border-radius: var(--r); padding: 14px; background: var(--bg-1); }
.side.blue { border-top: 3px solid #38bdf8; } .side.red { border-top: 3px solid var(--loss); }
.side h3 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.bans { display: flex; gap: 6px; margin-bottom: 12px; }
.pick-row { display: grid; grid-template-columns: 64px 44px 1fr; gap: 10px; align-items: center; padding: 6px 0; }
.pick-row .role { color: var(--text-2); font-size: .85rem; }
.pick-row input { padding: 6px 10px; }

/* ---------- SoloQ ---------- */
.soloq-table { width: 100%; border-collapse: collapse; }
.soloq-table th { text-align: left; font-weight: 500; color: var(--text-2); font-size: .82rem; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.soloq-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.soloq-table tr:last-child td { border: none; }
.rank { font: 800 1.15rem var(--display); }
.bar { height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; min-width: 90px; }
.bar > i { display: block; height: 100%; background: var(--win); }
.scroll-x { overflow-x: auto; }

/* ---------- Toasts ---------- */
#toasts { position: fixed; bottom: 20px; right: 20px; display: grid; gap: 8px; z-index: 100; }
.toast { background: var(--panel-2); border: 1px solid var(--line-hi); border-radius: 8px; padding: 10px 16px; animation: toast-in .25s var(--ease); }
.toast.err { border-color: var(--loss); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Login ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; text-align: center; }
.login-logo { width: min(280px, 62vw); height: auto; display: block; margin: 0 auto 8px; filter: drop-shadow(0 6px 22px rgba(232,121,249,.32)); }
.login h1 { font-size: clamp(2.6rem, 8vw, 4.5rem); color: var(--text); }
.login p { color: var(--text-2); margin: 12px 0 28px; }

/* ---------- Mobile: Nav nach unten ---------- */
@media (max-width: 720px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail { position: fixed; bottom: 0; left: 0; right: 0; top: auto; height: auto; flex-direction: row; justify-content: space-around; padding: 6px; border-right: none; border-top: 1px solid var(--line); background: rgba(5,5,13,.95); z-index: 40; }
  .rail .mark, .rail .spacer, .rail .me { display: none; }
  .rail a.nav { width: auto; flex: 1; font-size: .65rem; padding: 6px 0; }
  main { padding-bottom: 96px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---------- Profil und Diagramme ---------- */
:root {
  /* Diagrammfarben: als Set gegen die dunkle Panel-Fläche validiert (Kontrast, CVD-Abstand) */
  --viz-1: #8b5cf6; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; --viz-5: #d55181; --viz-6: #3987e5;
  --viz-other: #4a5273; --viz-muted: #6f7898; --viz-grid: rgba(255,255,255,.07); --viz-axis: rgba(255,255,255,.2);
  --viz-pos: #3987e5; --viz-neg: #e66767; --viz-win: #0ca30c; --viz-loss: #d03b3b;
  --delta-good: #0ca30c; --delta-bad: #ec835a;
}
.pf-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.pf-id { display: flex; gap: 16px; align-items: center; }
.pf-id .avatar { width: 64px; height: 64px; font-size: 1.6rem; }
.pf-hero { text-align: right; }
.pf-hero .big { font: 800 clamp(2.6rem, 5vw, 3.6rem)/1 var(--display); }
.pf-hero .sub { color: var(--text-2); margin-top: 4px; }
@media (max-width: 640px) { .pf-head { grid-template-columns: 1fr; } .pf-hero { text-align: left; } }
.pf-filters { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; margin: 20px 0; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: none; padding: 7px 14px; cursor: pointer; color: var(--text-2); font-weight: 500; }
.seg button + button { border-left: 1px solid var(--line); }
.seg button:hover { background: rgba(255,255,255,.04); color: var(--text); }
.seg button[aria-pressed="true"] { background: rgba(139,92,246,.2); color: var(--text); }
.pf-filters select { width: auto; }
.pf-demo { border: 1px dashed var(--line-hi); border-radius: var(--r); padding: 10px 14px; color: var(--text-2); font-size: .9rem; margin-bottom: 16px; }
.pf-section { margin-top: 28px; }
.pf-section > h2 { margin-bottom: 4px; }
.pf-section > p { color: var(--text-2); margin-bottom: 14px; max-width: 70ch; }

.b-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--text-2); font-size: .85rem; padding: 0 4px 12px; border-bottom: 1px solid var(--line); }
.b-legend span { display: inline-flex; align-items: center; gap: 8px; }
.b-legend i { display: inline-block; }
.k-fill { width: 22px; height: 10px; border-radius: 0 3px 3px 0; background: var(--viz-1); }
.k-own { width: 2px; height: 16px; background: var(--text-2); }
.k-team { width: 3px; height: 20px; background: var(--text); border-radius: 1px; }
.bullet { display: grid; grid-template-columns: minmax(170px, 230px) 1fr 104px; gap: 6px 22px; align-items: center; padding: 16px 6px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; border-radius: 4px; }
.bullet:last-child { border-bottom: none; }
.bullet.work { border-left-color: var(--delta-bad); background: linear-gradient(90deg, rgba(236,131,90,.07), transparent 40%); }
.bullet:focus-visible { outline: 2px solid var(--violet-hi); outline-offset: -2px; }
.b-name { display: grid; gap: 4px; }
.b-name .name { font-weight: 600; }
.badge { font-size: .8rem; color: var(--text-2); }
.badge.work { color: var(--delta-bad); } .badge.good { color: var(--delta-good); }
.b-track-wrap { padding: 8px 0; }
.b-track { position: relative; height: 14px; background: rgba(255,255,255,.05); border-radius: 0 4px 4px 0; }
.b-fill { height: 14px; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.b-own { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-2); }
.b-team { position: absolute; top: -7px; bottom: -7px; width: 3px; background: var(--text); border-radius: 1px; }
.b-val { text-align: right; display: grid; }
.b-val b { font: 800 1.7rem/1 var(--display); }
.b-val span { font-size: .8rem; color: var(--text-2); }
.b-tip { grid-column: 1 / -1; color: var(--text-2); font-size: .92rem; max-width: 80ch; padding-left: 0; }
@media (max-width: 720px) { .bullet { grid-template-columns: 1fr auto; } .b-track-wrap { grid-column: 1 / -1; order: 3; } }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.tile { background: var(--panel); padding: 16px 18px; display: grid; gap: 4px; align-content: start; }
.tile .l { color: var(--text-2); font-size: .85rem; }
.tile .v { font: 800 2rem/1.1 var(--display); }
.tile .d { font-size: .82rem; color: var(--text-2); }
.tile .d.good { color: var(--delta-good); } .tile .d.bad { color: var(--delta-bad); }
.tile .spark { margin-top: 4px; }

.pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .pf-grid { grid-template-columns: 1fr; } }
.pf-grid .wide { grid-column: 1 / -1; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px 14px; min-width: 0; }
.card h3 { font-size: 1.2rem; font-weight: 600; }
.card .note { color: var(--text-2); font-size: .88rem; margin: 2px 0 12px; }
.card .row { justify-content: space-between; }
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg .ax { fill: var(--text-2); font-size: 11px; }
svg .lbl { fill: var(--text); font-size: 12px; font-weight: 600; }
svg .donut-c { fill: var(--text); font: 800 28px var(--display); }
svg .donut-seg { transition: opacity .15s; } svg .donut-seg:hover, svg .donut-seg:focus { opacity: .85; outline: none; }
svg rect:focus, svg path:focus { outline: none; }
svg rect:focus-visible { outline: 2px solid var(--violet-hi); }

.hbars { display: grid; gap: 8px; }
.hbar-row { display: grid; grid-template-columns: 120px 1fr 92px; gap: 10px; align-items: center; padding: 3px 4px; border-radius: 6px; }
.hbar-row:hover, .hbar-row:focus-visible { background: rgba(255,255,255,.03); outline: none; }
.hbar-label { display: flex; gap: 8px; align-items: center; font-size: .9rem; min-width: 0; }
.hbar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { position: relative; height: 16px; }
.hbar-fill { height: 16px; border-radius: 0 4px 4px 0; }
.hbar-ref { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--viz-axis); }
.hbar-val { font-size: .85rem; color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }

.donut-wrap { display: grid; grid-template-columns: 160px 1fr; gap: 18px; align-items: center; }
.donut { width: 160px; height: 160px; }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; font-size: .9rem; }
.legend i { width: 12px; height: 12px; border-radius: 3px; }
.legend b { font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 500; }
@media (max-width: 480px) { .donut-wrap { grid-template-columns: 1fr; justify-items: center; } .hbar-row { grid-template-columns: 96px 1fr 78px; } }

.viz-tip { position: fixed; left: 0; top: 0; z-index: 90; display: none; pointer-events: none; background: var(--panel-2); border: 1px solid var(--line-hi); border-radius: 8px; padding: 8px 12px; font-size: .85rem; min-width: 140px; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
.viz-tip-h { font-weight: 600; margin-bottom: 4px; }
.viz-tip-s { color: var(--text-2); font-size: .8rem; margin-top: 2px; }
.viz-tip-row { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.viz-tip-row i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.viz-tip-row span { color: var(--text-2); margin-right: auto; }
.viz-tip-row b { font-weight: 600; }
.games-table .champ { width: 32px; height: 32px; }

/* ---------- Touch, Lesbarkeit, Übergänge ---------- */
@media (pointer: coarse), (max-width: 720px) {
  .btn, .btn.sm, .seg button, .rsvp button, .tabs button, select, input[type=text], input[type=number], input[type=datetime-local], input[type=search] { min-height: 44px; }
  .champ-btn { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .hbar-row { min-height: 44px; }
}
@media (max-width: 720px) {
  html, body { font-size: 16px; }
  .rail { gap: 0; }
  .rail a.nav { width: auto; min-width: 44px; flex: 1; min-height: 52px; font-size: .7rem; padding: 6px 0; }
  .rail a.nav[aria-current="page"]::before { left: 12px; right: 12px; top: 0; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
}
#main > div { animation: view-in .24s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
.skel { display: grid; gap: 14px; }
.skel i { display: block; height: 18px; border-radius: 6px; background: linear-gradient(90deg, var(--panel) 25%, var(--panel-2) 50%, var(--panel) 75%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.skel i.h { height: 44px; width: 38%; } .skel i.b { height: 150px; } .skel i.s { width: 60%; }
@keyframes shimmer { to { background-position: -200% 0; } }