:root{
  --bg:#EEF2F7; --surface:#FFFFFF; --surface-2:#F5F7FB; --ink:#101B33; --muted:#5A6781; --line:#D5DCE7;
  --track:#2451B8; --track-2:#1F47A3; --lane-line:rgba(255,255,255,.5); --on-track:#FFFFFF;
  --accent:#2451B8; --accent-ink:#FFFFFF; --gold:#F5B82E; --danger:#C2344D; --ok:#1B8A5A;
  --shadow:0 1px 2px rgba(16,27,51,.06),0 6px 20px rgba(16,27,51,.07);
  --display:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0B1220; --surface:#131C30; --surface-2:#18233B; --ink:#E8EDF6; --muted:#95A2BA; --line:#26324A;
    --track:#1D3E8C; --track-2:#193578; --lane-line:rgba(255,255,255,.35);
    --accent:#86A8FF; --accent-ink:#0B1220; --danger:#FF6F86; --ok:#4FD08F;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1220; --surface:#131C30; --surface-2:#18233B; --ink:#E8EDF6; --muted:#95A2BA; --line:#26324A;
  --track:#1D3E8C; --track-2:#193578; --lane-line:rgba(255,255,255,.35);
  --accent:#86A8FF; --accent-ink:#0B1220; --danger:#FF6F86; --ok:#4FD08F;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img,svg{max-width:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.5}
.wrap{max-width:1100px;margin:0 auto;padding-inline:20px;padding-block:calc(28px + env(safe-area-inset-top,0px)) calc(60px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:24px}
html{-webkit-text-size-adjust:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

/* header */
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.brand h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,7vw,64px);line-height:.9;margin:0;letter-spacing:.01em;text-transform:uppercase;text-wrap:balance}
.brand p{margin:6px 0 0;color:var(--muted)}
.who{display:flex;align-items:center;gap:10px;font-weight:600}
.who .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* month bar */
.monthbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;justify-content:space-between}
.monthnav{display:flex;align-items:center;gap:8px}
.monthnav h2{font-family:var(--display);font-weight:700;font-size:30px;margin:0;min-width:9ch;text-align:center;text-transform:uppercase;letter-spacing:.02em}
.iconbtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:18px;line-height:1}
.iconbtn:disabled{opacity:.35;cursor:default}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;font-weight:600;font-size:13px;background:var(--surface);border:1px solid var(--line)}
.pill.hot{background:var(--gold);border-color:var(--gold);color:#1a1405}
.pill.done{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* stadium */
.stadium{position:relative;background:var(--track);border-radius:18px;padding:14px 14px 16px;box-shadow:var(--shadow);color:var(--on-track);overflow:hidden;--labelw:170px;--fw:64px;scroll-margin-top:12px}
.stadium h3{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.03em;margin:0 4px 8px}
.scale{display:flex;justify-content:space-between;margin-left:var(--labelw);margin-right:8px;font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;opacity:.75;padding-bottom:4px}
.lanes{position:relative}
.lane{display:grid;grid-template-columns:var(--labelw) 1fr;align-items:stretch;border-top:2px solid var(--lane-line);position:relative}
.lane:last-child{border-bottom:2px solid var(--lane-line)}
.lane .label{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:10px 12px 10px 4px;min-width:0}
.lane .nm{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:16px;min-width:0}
.lane .nm b{font-family:var(--display);font-size:22px;font-weight:800;opacity:.6;width:1.1em;flex:none}
.lane .nm span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lane .meta{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;font-size:12px;font-weight:600;opacity:.9}
.streak{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.16);border-radius:999px;padding:0 7px 0 4px}
.streak svg{width:11px;height:14px}
.run{position:relative;height:94px;margin-right:8px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(255,255,255,.07) calc(10% - 1px) 10%)}
.trail{position:absolute;left:0;bottom:8px;height:14px;width:calc((100% - var(--fw)) * var(--p) + 20px);transition:width 900ms cubic-bezier(.2,.8,.2,1);opacity:.9;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Cellipse cx='5' cy='4' rx='3.3' ry='2.1'/%3E%3Cellipse cx='16' cy='10' rx='3.3' ry='2.1'/%3E%3C/svg%3E") left center/22px 14px repeat-x;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='14'%3E%3Cellipse cx='5' cy='4' rx='3.3' ry='2.1'/%3E%3Cellipse cx='16' cy='10' rx='3.3' ry='2.1'/%3E%3C/svg%3E") left center/22px 14px repeat-x}
.runner-wrap{position:absolute;bottom:2px;left:calc((100% - var(--fw)) * var(--p));width:var(--fw);transition:left 900ms cubic-bezier(.2,.8,.2,1)}
.fig svg{width:var(--fw);height:calc(var(--fw) * 1.094);display:block;overflow:visible}
.bubble{position:absolute;bottom:22px;left:calc(var(--fw) + 2px);white-space:nowrap;font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:.02em;background:rgba(0,0,0,.3);padding:0 8px;border-radius:6px}
.runner-wrap.far .bubble{left:auto;right:calc(var(--fw) + 5px)}
.leadtag{background:var(--gold);color:#1a1405;border-radius:4px;padding:0 6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex:none}
.me-lane{background:rgba(255,255,255,.07)}
.example{opacity:.6}
.example .nm span::after{content:" · Beispiel";font-weight:500;font-size:12px}
.legend-row{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 4px 0;font-size:13px;opacity:.9}
.legend-row span{display:inline-flex;align-items:center;gap:6px}
.legend-row i{display:inline-block;width:10px;height:10px;border-radius:50%}
.stadium-note:empty{display:none}
.stadium-note{margin:8px 4px 0;font-size:13px;opacity:.85}

/* overtake flash */
.flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;background:var(--gold);color:#1a1405;font-family:var(--display);font-weight:800;font-size:clamp(28px,5vw,48px);text-transform:uppercase;letter-spacing:.02em;padding:8px 24px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);white-space:nowrap;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;animation:flash 3.2s ease forwards;pointer-events:none}
@keyframes flash{0%{transform:translate(-50%,-50%) scale(.3) rotate(-6deg);opacity:0}12%{transform:translate(-50%,-50%) scale(1.08) rotate(-2deg);opacity:1}20%{transform:translate(-50%,-50%) scale(1) rotate(-2deg)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%) scale(1) rotate(-2deg)}}

/* Figuren-Animationen (js/figure.js, Wurzelklasse .kn am <svg>). Gelenke drehen um ihren eigenen Punkt (style="transform-origin" in Figur-Koordinaten). */
.kn{overflow:visible}
.kn .j,.kn .bob,.kn .flames,.kn .snot,.kn .zz g,.kn .speed path,.kn .sparkle{transform-box:view-box}
/* Laufen: Knöchelpfad mit 8 Stützpunkten (Aufsetzen, Stütz, Abdruck, Ferse hoch, Knie vor), daraus die Gelenkwinkel.
   Beide Beine um eine halbe Periode versetzt; der Körper ist oben, während die Beine unter ihm durchgehen,
   so bleibt der Schuh auf der Bodenlinie (y 66) statt in die Bahn zu sinken */
.kn.p-run .bob{animation:kn-hop .3s ease-in-out infinite}
.kn.p-run .lA-u{animation:kn-thighA .6s linear infinite}
.kn.p-run .lA-l{animation:kn-shinA .6s linear infinite}
.kn.p-run .lC-u{animation:kn-thighC .6s linear infinite}
.kn.p-run .lC-l{animation:kn-shinC .6s linear infinite}
.kn.p-run .af-u{animation:kn-armFu .6s ease-in-out infinite}
.kn.p-run .af-l{animation:kn-armFl .6s ease-in-out infinite}
.kn.p-run .ab-u{animation:kn-armBu .6s ease-in-out infinite}
.kn.p-run .ab-l{animation:kn-armBl .6s ease-in-out infinite}
@keyframes kn-hop{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.3px)}}
@keyframes kn-thighA{0%,100%{transform:rotate(0)}12.5%{transform:rotate(-2deg)}25%{transform:rotate(6deg)}37.5%{transform:rotate(38deg)}50%{transform:rotate(104deg)}62.5%{transform:rotate(108deg)}75%{transform:rotate(77deg)}87.5%{transform:rotate(-17deg)}}
@keyframes kn-shinA{0%,100%{transform:rotate(0)}12.5%{transform:rotate(21deg)}25%{transform:rotate(37deg)}37.5%{transform:rotate(34deg)}50%{transform:rotate(-13deg)}62.5%{transform:rotate(11deg)}75%{transform:rotate(59deg)}87.5%{transform:rotate(73deg)}}
@keyframes kn-thighC{0%,100%{transform:rotate(0)}12.5%{transform:rotate(4deg)}25%{transform:rotate(-27deg)}37.5%{transform:rotate(-121deg)}50%{transform:rotate(-104deg)}62.5%{transform:rotate(-106deg)}75%{transform:rotate(-98deg)}87.5%{transform:rotate(-66deg)}}
@keyframes kn-shinC{0%,100%{transform:rotate(0)}12.5%{transform:rotate(24deg)}25%{transform:rotate(72deg)}37.5%{transform:rotate(86deg)}50%{transform:rotate(13deg)}62.5%{transform:rotate(34deg)}75%{transform:rotate(50deg)}87.5%{transform:rotate(46deg)}}
/* vorderer Arm schwingt nur bis zur Rückenkante, damit er nicht quer über dem Trikot liegt */
@keyframes kn-armFu{0%,100%{transform:rotate(0)}50%{transform:rotate(42deg)}}
@keyframes kn-armFl{0%,100%{transform:rotate(0)}50%{transform:rotate(30deg)}}
@keyframes kn-armBu{0%,100%{transform:rotate(0)}50%{transform:rotate(-62deg)}}
@keyframes kn-armBl{0%,100%{transform:rotate(0)}50%{transform:rotate(-28deg)}}
/* Jubeln: kleine Sprünge, Arme winken */
.kn.p-cheer .bob{animation:kn-jump .5s ease-in-out infinite alternate}
.kn.p-cheer .aL-u{animation:kn-waveL .5s ease-in-out infinite alternate}
.kn.p-cheer .aR-u{animation:kn-waveR .5s ease-in-out infinite alternate}
@keyframes kn-jump{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes kn-waveL{from{transform:rotate(-6deg)}to{transform:rotate(8deg)}}
@keyframes kn-waveR{from{transform:rotate(6deg)}to{transform:rotate(-8deg)}}
/* Fahrrad: pedalieren, Räder drehen */
.kn.p-bike .bob{animation:kn-hop .25s ease-in-out infinite}
.kn.p-bike .kf-u{animation:kn-pedalU .5s ease-in-out infinite alternate}
.kn.p-bike .kf-l{animation:kn-pedalL .5s ease-in-out infinite alternate}
.kn.p-bike .kb-u{animation:kn-pedalU .5s ease-in-out infinite alternate-reverse}
.kn.p-bike .kb-l{animation:kn-pedalL .5s ease-in-out infinite alternate-reverse}
.kn .spin{animation:kn-spin .6s linear infinite}
@keyframes kn-pedalU{from{transform:rotate(-14deg)}to{transform:rotate(12deg)}}
@keyframes kn-pedalL{from{transform:rotate(18deg)}to{transform:rotate(-16deg)}}
@keyframes kn-spin{to{transform:rotate(360deg)}}
/* Klettern: oberer Arm greift nach, Körper zieht sich hoch, freies Bein pendelt */
.kn.p-climb .bob{animation:kn-climb 1.2s ease-in-out infinite alternate}
.kn.p-climb .cN-u{animation:kn-reach 1.2s ease-in-out infinite alternate}
.kn.p-climb .cN-l{animation:kn-reachL 1.2s ease-in-out infinite alternate}
.kn.p-climb .cD-u{animation:kn-dangle 1.2s ease-in-out infinite alternate}
@keyframes kn-climb{from{transform:translateY(.4px)}to{transform:translateY(-2px)}}
@keyframes kn-reach{from{transform:rotate(0)}to{transform:rotate(-8deg)}}
@keyframes kn-reachL{from{transform:rotate(0)}to{transform:rotate(10deg)}}
@keyframes kn-dangle{from{transform:rotate(0)}to{transform:rotate(-14deg)}}
/* Hantel: Kreuzheben, die Figur federt zu den Füßen hin */
.kn.p-workout .bob{transform-origin:32px 65px;animation:kn-lift .9s ease-in-out infinite alternate}
@keyframes kn-lift{from{transform:scale(1,1)}to{transform:scale(1.015,.96)}}
/* Yoga: atmen und schweben */
.kn.p-yoga .bob{transform-origin:32px 62px;animation:kn-breathe 2.4s ease-in-out infinite alternate}
.kn .sparkle{animation:kn-twinkle 1.6s ease-in-out infinite alternate}
@keyframes kn-breathe{from{transform:translateY(0) scale(1)}to{transform:translateY(-1.4px) scale(1.03)}}
@keyframes kn-twinkle{from{opacity:.3}to{opacity:1}}
/* Sofa: Chips zum Mund */
.kn.p-sofa .munch-l{animation:kn-munch 1.4s ease-in-out infinite}
.kn.p-sofa .munch-u{animation:kn-munchU 1.4s ease-in-out infinite}
@keyframes kn-munch{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(28deg)}}
@keyframes kn-munchU{0%,55%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}}
/* Schlafen: atmen, Rotzblase, Zs */
.kn.p-sleep .bob{transform-origin:32px 64px;animation:kn-snore 2.4s ease-in-out infinite alternate}
.kn .snot{animation:kn-snot 2.4s ease-in-out infinite alternate}
.kn .zz g{animation:kn-zz 2.4s ease-in-out infinite}
@keyframes kn-snore{from{transform:scale(1)}to{transform:scale(1.025,1.04)}}
@keyframes kn-snot{from{transform:scale(.6)}to{transform:scale(1.1)}}
@keyframes kn-zz{0%{opacity:0;transform:translateY(3px)}30%{opacity:1}100%{opacity:.2;transform:translateY(-3px)}}
/* Schweif, Schal, Umhang, Flammen, Speedlines */
.kn .tail{animation:kn-wag .6s ease-in-out infinite alternate}
.kn .cape{animation:kn-cape .5s ease-in-out infinite alternate}
.kn .flames{animation:kn-flicker .18s ease-in-out infinite alternate}
.kn .speed path{animation:kn-speed .45s linear infinite}
.kn .speed path:nth-child(2){animation-delay:-.15s}.kn .speed path:nth-child(3){animation-delay:-.3s}
@keyframes kn-wag{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
@keyframes kn-cape{from{transform:skewX(-4deg)}to{transform:skewX(6deg)}}
@keyframes kn-flicker{from{transform:scaleX(.8)}to{transform:scaleX(1.15)}}
/* Speedlines bleiben nah an der Figur, sonst streifen sie das Punkte-Schild (steht bei weit vorn laufenden Figuren links) */
@keyframes kn-speed{from{transform:translateX(6px);opacity:0}40%{opacity:.9}to{transform:translateX(-2px);opacity:0}}
/* Stillstand (idle): Körper, Glieder und Requisiten ruhen; nur Zs und Rotzblase beim Schlafen bleiben lebendig */
.kn.idle .bob,.kn.idle .j,.kn.idle .flames,.kn.idle .speed path,.kn.idle .sparkle{animation:none!important}

/* podium */
.podium{display:flex;justify-content:center;align-items:flex-end;gap:10px;padding-top:12px}
.pcol{display:flex;flex-direction:column;align-items:center;gap:4px;width:min(30%,150px)}
.pname{font-weight:700;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pfig{width:min(100%,84px);animation:drop .6s cubic-bezier(.3,1.4,.5,1) backwards}
.pfig svg{width:100%;height:auto;aspect-ratio:64/70;display:block;overflow:visible}
.pblock{width:100%;background:rgba(255,255,255,.16);border-radius:8px 8px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:6px;transform-origin:bottom;animation:rise .7s cubic-bezier(.2,.8,.2,1) backwards}
.pblock b{font-family:var(--display);font-size:40px;font-weight:800;line-height:1}
.pblock span{font-family:var(--display);font-size:17px;font-weight:600;opacity:.9}
.pl1 .pblock{height:120px;background:var(--gold);color:#1a1405;animation-delay:.9s}.pl1 .pfig{animation-delay:1.5s}
.pl2 .pblock{height:88px;animation-delay:.5s}.pl2 .pfig{animation-delay:1.1s}
.pl3 .pblock{height:64px;animation-delay:.1s}.pl3 .pfig{animation-delay:.7s}
.prest{list-style:none;margin:12px 4px 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14px;opacity:.9;justify-content:center}
@keyframes rise{from{transform:scaleY(0)}}
@keyframes drop{from{transform:translateY(-40px);opacity:0}}
@media (prefers-reduced-motion:reduce){
  .kn,.kn *,.pfig,.pblock,.flash{animation:none!important}
  .runner-wrap,.trail{transition:none}
}

/* lower grid */
.grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:16px;scroll-margin-top:12px}
.card h3{font-family:var(--display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.02em;margin:0}
.field{display:flex;flex-direction:column;gap:8px}
.field > label,.field > .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px 14px;font-weight:600;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:var(--muted)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.chip .sw{width:10px;height:10px;border-radius:50%}
.chip.big{font-family:var(--display);font-size:22px;font-weight:700;padding:4px 16px;min-width:64px;justify-content:center}
.chip.big small{font-family:var(--body);font-size:12px;font-weight:600;opacity:.7}
input[type=date],input[type=number],input[type=text]{padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2)}
input[type=number]{width:90px}
.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;padding:12px 20px;font-weight:700;font-size:16px}
.primary:disabled{opacity:.45;cursor:default}
.summary{color:var(--muted);font-size:14px;margin:0}
.side{display:flex;flex-direction:column;gap:24px}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feed li{display:grid;grid-template-columns:10px 1fr auto auto;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
.feed li:first-child{border-top:0}
.feed .sw{width:10px;height:10px;border-radius:50%}
.feed .min{font-family:var(--display);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
.feed .del{background:none;border:0;color:var(--muted);font-size:18px;line-height:1;padding:2px 6px;border-radius:6px}
.feed .del:hover{color:var(--danger)}
.muted{color:var(--muted)}
.hall{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.hall li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:14px}
.hall .m{font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase}
.legend{font-size:13px;color:var(--muted);margin:0}
.banner{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;font-weight:600;box-shadow:var(--shadow);z-index:10;max-width:calc(100% - 32px)}
.whofig{display:inline-block;width:34px;height:37px;background:var(--track);border-radius:10px;padding:2px}
.whofig svg{width:100%;height:100%;display:block;overflow:visible}
.row-btns{display:flex;flex-wrap:wrap;gap:10px}
.secondary{background:transparent;border:1.5px solid var(--line);border-radius:12px;padding:12px 20px;font-weight:700;font-size:16px}
.who{flex-wrap:wrap}
.players-quick{display:flex;flex-wrap:wrap;gap:8px}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
.fab{display:none}

@media (max-width:760px){
  .wrap{padding-inline:16px;padding-block:calc(18px + env(safe-area-inset-top,0px)) calc(112px + env(safe-area-inset-bottom,0px));gap:18px}
  .brand h1{font-size:44px}
  .brand p{font-size:14px}
  header{gap:12px}
  .who{width:100%;gap:8px 14px}
  .who .linkbtn{padding:10px 0}
  .monthbar{gap:10px}
  .monthnav{width:100%;justify-content:space-between}
  .monthnav h2{font-size:26px}
  .iconbtn{width:44px;height:44px;font-size:22px}
  .grid{grid-template-columns:1fr;gap:18px}
  .side{gap:18px}
  .stadium{--labelw:0px;--fw:54px;padding:10px 10px 14px;border-radius:14px}
  .lane{grid-template-columns:1fr}
  .lane .label{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px;padding:8px 4px 0}
  .lane .nm{font-size:15px}
  .scale{margin-left:0;font-size:12px}
  .run{height:78px;margin-right:0}
  .bubble{font-size:16px;bottom:18px;padding:0 6px}
  .legend-row{font-size:12px;gap:4px 12px}
  .flash{white-space:normal;text-align:center;font-size:26px;line-height:1.05;width:calc(100% - 24px);padding:10px 14px}
  .pblock b{font-size:30px}
  .card{padding:16px;gap:14px}
  .chips{gap:8px}
  .chip{min-height:44px;padding:8px 14px}
  .chip.big{min-height:48px;flex:1 1 calc(33.333% - 8px);font-size:22px}
  input[type=date],input[type=number],input[type=text]{font-size:16px;min-height:44px}
  #dateIn{flex:1 1 150px}
  #minIn{flex:1 1 100%;width:auto}
  .primary,.secondary{width:100%;min-height:52px;font-size:17px}
  .feed li{padding:6px 0}
  .feed .del{min-width:44px;min-height:40px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .fab{display:flex;align-items:center;justify-content:center;gap:8px;position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:9;min-height:54px;border:0;border-radius:16px;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:17px;box-shadow:0 8px 24px rgba(16,27,51,.3)}
}

/* ---------- Punkte ---------- */
.chip .fac{font-size:11px;font-weight:700;opacity:.65;font-variant-numeric:tabular-nums}
.points-preview{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:0}
.points-preview b{font-family:var(--display);font-size:28px;font-weight:800;line-height:1;color:var(--accent)}
.feed .pts{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.factors{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--muted);margin:0}
.factors span{display:inline-flex;align-items:center;gap:6px}
.factors i{width:10px;height:10px;border-radius:50%;display:inline-block}

/* ---------- Figuren-Baukasten ---------- */
/* Schmale Karte (Handy): Bühne und Reiter kleben oben. Karte ab 460 px: Bühne links (klebt), Auswahl rechts. */
.grid > *,.side > *,.card,.field,.builder,.b-host{min-width:0}
.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}
.b-host{container-type:inline-size}
.builder{--pad:20px;display:flex;flex-direction:column;gap:12px}
.b-top{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;display:flex;flex-direction:column;gap:8px;margin:0 calc(-1 * var(--pad));padding:6px var(--pad) 8px;background:var(--surface);box-shadow:0 9px 10px -11px rgba(16,27,51,.5)}
/* oben Luft für Partyhut, Bommel und Hasenohren, die über den Figurenrahmen ragen */
.b-stage{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;padding:10px 10px 4px 4px;border-radius:14px;background:var(--track);color:#fff}
.b-big svg{width:92px;height:101px;display:block}
.quick .b-big svg{width:84px;height:92px}
.b-side{display:flex;flex-direction:column;gap:8px;min-width:0}
.b-side p{margin:0;font-size:13px;line-height:1.35}
.b-act,.b-poses button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 10px;border-radius:12px;background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.35);color:#fff;font-weight:700;font-size:13px;white-space:nowrap}
.b-act:hover,.b-poses button:hover{background:rgba(255,255,255,.24)}
.b-act[aria-disabled="true"]{opacity:.4;cursor:default;background:rgba(255,255,255,.14)}
.b-cycle small{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.8}
.b-poses{display:none}
.b-poses button{border-color:transparent;font-weight:600;padding:0 6px}
.b-poses [aria-pressed="true"]{border-color:var(--gold);background:rgba(255,255,255,.24)}
.b-acts{display:flex;gap:6px}
.b-acts .b-act{flex:1 1 auto;min-width:0}
.b-acts .b-undo{flex:none;width:44px;padding:0}
.quick .b-acts .b-act{flex:0 1 auto;padding:0 16px}
.quick .b-acts .b-undo{flex:none;padding:0}
.b-undo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Fokus auf der blauen Bühne weiß (Gold ist dort schon die gewählte Pose) */
.b-stage :focus-visible{outline-color:#fff}
.b-nav:empty,.b-tryslot:empty{display:none}
.b-try{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1.5px dashed var(--gold);border-radius:10px;background:var(--track);color:#fff;font-size:12.5px;line-height:1.3}
.b-try > .ic{flex:none;color:var(--gold)}
.b-try span{flex:1 1 auto;min-width:0}
.b-try button{flex:none;min-height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--gold);color:#1a1405;font-weight:800;font-size:13px}
/* Bereiche (Segmente) und Unterpunkte: umbrechen statt seitlich scrollen */
.b-nav{display:flex;flex-direction:column;gap:8px}
.b-areas{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface-2)}
.b-areas button{min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;font-size:15px}
.b-areas button:hover{color:var(--ink)}
.b-areas [aria-selected="true"],.b-areas [aria-selected="true"]:hover{background:var(--ink);color:var(--bg)}
.b-subs{display:flex;flex-wrap:wrap;gap:6px}
.b-subs button{flex:1 1 auto;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-height:38px;padding:2px 10px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600;font-size:14px;line-height:1.1}
.b-subs button:hover{border-color:var(--muted)}
.b-subs [aria-selected="true"],.b-subs [aria-selected="true"]:hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.b-subs .off{border-style:dashed;background:transparent;color:var(--muted)}
.b-subs small{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
/* Auswahl */
.b-main,.b-panel{display:flex;flex-direction:column;gap:12px;min-width:0}
.p-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.p-head h4{margin:0;font-family:var(--display);font-size:21px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.p-head h4 span{margin-left:4px;font-family:var(--body);font-size:15px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted)}
.b-mini{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;border:1.5px solid var(--line);border-radius:999px;background:var(--surface-2);font-weight:600;font-size:13px}
.b-mini:hover{border-color:var(--muted)}
.b-hint{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--muted);font-size:13px;line-height:1.4}
.b-hint > .ic{flex:none}
.b-hint span{flex:1 1 180px}
.b-hint button{min-height:36px;padding:0 12px;border:1.5px solid var(--ink);border-radius:8px;background:transparent;color:var(--ink);font-weight:700;font-size:13px}
.b-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.b-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:4px 2px 6px;border:2px solid transparent;border-radius:12px;background:var(--track);color:#fff;font-size:12px;font-weight:700;line-height:1.2;text-align:center;hyphens:auto;overflow-wrap:anywhere}
.b-opt:hover{border-color:rgba(255,255,255,.5)}
/* Fokus anders als die (goldene) Auswahl: Ring in Schriftfarbe mit Abstand */
.b-opt:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.b-opt .th{display:grid;place-items:center;height:62px}
/* Ausschnitte: hohe Hüte, Ohren und Zöpfe dürfen oben und seitlich etwas überstehen, unten wird gerade abgeschnitten */
.b-opt .th svg{display:block;overflow:visible;clip-path:inset(-14px -4px 0 -4px)}
.k-portrait .th svg,.k-head .th svg{width:62px;height:62px}
.k-face .th svg{width:60px;height:60px;overflow:hidden;clip-path:none}
.k-feet .th svg{width:66px;height:33px;overflow:hidden;clip-path:none}
.k-full .th svg{width:62px;height:62px}
.b-opt[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}
.b-opt[aria-pressed="true"]::after{content:"";position:absolute;top:4px;left:4px;width:17px;height:17px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1405' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.b-opt.locked{background:var(--track-2)}
.b-opt.locked .th{filter:grayscale(.8);opacity:.55}
.b-opt.trying{border-style:dashed;border-color:var(--gold)}
.b-opt.trying .th{filter:none;opacity:1}
.b-opt .req{margin-top:1px;padding:1px 6px;border-radius:999px;background:rgba(0,0,0,.3);color:#FFE08A;font-size:10.5px;white-space:nowrap}
.b-opt .lk{position:absolute;top:4px;right:4px;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:rgba(0,0,0,.4);color:#FFE08A}
/* Farben mit Namen */
.b-color,.b-sec{display:flex;flex-direction:column;gap:8px}
.b-color .lbl,.b-sec .lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.b-color .lbl b,.b-sec .lbl b{margin-left:4px;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink)}
.b-sw{display:flex;flex-wrap:wrap;gap:6px}
/* Ring in --muted: auch Schwarz im Dunkelmodus und Weiß/Silber im Hellmodus heben sich ab (mind. 3:1) */
.b-sw button{display:grid;place-items:center;width:42px;height:42px;padding:0;border:3px solid var(--surface);border-radius:50%;background:var(--c);box-shadow:0 0 0 1.5px var(--muted),inset 0 0 0 1px rgba(255,255,255,.22);color:var(--k)}
.b-sw [aria-pressed="true"]{box-shadow:0 0 0 2.5px var(--ink),inset 0 0 0 1px rgba(255,255,255,.22)}
.b-jerseys{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.b-jc{display:flex;align-items:center;gap:10px;min-height:44px;padding:4px 10px;border:1.5px solid var(--line);border-radius:12px;background:var(--surface-2);font-weight:600;font-size:14px;text-align:left}
.b-jc:hover{border-color:var(--muted)}
.b-jc .shirt{width:28px;height:28px;flex:none}
.b-jc .shirt path{stroke:var(--ink);stroke-width:1.3;stroke-linejoin:round}
.b-jc .ic{margin-left:auto;flex:none}
.b-jc[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
/* Schnellstart bei der Anmeldung */
.b-more{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:52px;padding:10px 14px;border:1.5px dashed var(--line);border-radius:12px;background:var(--surface-2);font-weight:700;font-size:15px;text-align:left}
.b-more:hover{border-color:var(--muted)}
.b-more small{display:block;font-weight:500;font-size:13px;color:var(--muted)}
.b-less{align-self:flex-start;min-height:40px}
.b-note{font-size:13px;color:var(--muted);margin:0}
@container (min-width:460px){
  .builder:not(.quick){display:grid;grid-template-columns:188px minmax(0,1fr);grid-template-rows:auto auto auto 1fr;gap:0 18px;align-items:start}
  .builder:not(.quick) .b-top{display:contents;position:static}
  /* oben mehr Luft: Partyhut, Bommel und Hasenohren ragen über den Figurenrahmen */
  .builder:not(.quick) .b-stage{grid-column:1;grid-row:1 / span 4;position:sticky;top:12px;grid-template-columns:minmax(0,1fr);gap:8px;padding:30px 10px 10px}
  .builder:not(.quick) .b-big{justify-self:center}
  .builder:not(.quick) .b-big svg{width:160px;height:175px}
  .builder:not(.quick) .b-poses{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .builder:not(.quick) .b-cycle{display:none}
  .builder:not(.quick) .b-acts{flex-direction:column}
  .builder:not(.quick) .b-acts .b-undo{width:auto;padding:0 10px}
  .builder:not(.quick) .b-undo span{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .builder:not(.quick) .b-nav{grid-column:2;grid-row:1;margin-bottom:12px}
  .builder:not(.quick) .b-tryslot{grid-column:2;grid-row:2;margin-bottom:12px}
  .builder:not(.quick) .b-main{grid-column:2;grid-row:3}
}
/* sehr schmale Karte (Handy mit 320 px): kleinere Figur, „Würfeln“ ohne „Alles“ (bleibt für Screenreader) */
@container (max-width:300px){
  .b-big svg{width:80px;height:88px}
  .b-acts .b-all{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .quick .b-acts .b-act{padding:0 10px}
  .quick .b-acts .b-undo{padding:0}
}
/* niedrige Fenster (Handy quer): der klebende Block würde die Auswahl fast ganz verdecken */
@media (max-height:520px){
  .b-top,.builder:not(.quick) .b-stage{position:static}
}

/* ---------- Einladen und installieren ---------- */
.invite{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
#qr{background:#fff;padding:8px;border-radius:12px;border:1px solid var(--line);width:136px;height:136px}
#qr img,#qr canvas{display:block;width:118px!important;height:118px!important}
.invite-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.invite-actions .secondary{width:auto;min-height:44px;padding:8px 16px;font-size:15px}
.ios-hint{font-size:13px;color:var(--muted);margin:0}

@media (max-width:760px){
  .builder{--pad:16px}
  .b-areas{padding:2px;gap:2px}
  .b-areas button,.b-subs button,.b-act,.b-poses button,.b-mini,.b-hint button,.b-try button,.b-less{min-height:44px}
  .b-sw button{width:44px;height:44px}
  .b-opt .th{height:58px}
  .k-portrait .th svg,.k-head .th svg{width:58px;height:58px}
  .k-face .th svg{width:56px;height:56px}
  .k-feet .th svg{width:62px;height:31px}
  .k-full .th svg{width:58px;height:58px}
  .invite{grid-template-columns:1fr;justify-items:start}
  .invite-actions .secondary{width:100%}
}

/* ---------- Bestätigungsdialog ---------- */
.dlg{border:0;border-radius:18px;padding:22px;width:min(420px,calc(100% - 32px));background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.dlg::backdrop{background:rgba(11,18,32,.55)}
.dlg form,.dlg.sheet[open]{display:flex;flex-direction:column;gap:14px}
.dlg{max-height:calc(100dvh - 32px);overflow:auto}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dlg-x{background:none;border:0;font-size:30px;line-height:1;width:44px;height:44px;margin:-10px -10px -10px 0;border-radius:10px;color:var(--muted)}
.dlg.sheet{width:min(560px,calc(100% - 32px))}
.dlg-save{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.2}
.dlg-save small{font-weight:600;font-size:13px;opacity:.85}
@media (max-width:760px){
  .dlg.sheet{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:92dvh}
}
.dlg h3{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;letter-spacing:.02em;margin:0}
.dlg-warn{margin:0;padding:10px 12px;border-radius:10px;background:var(--gold);color:#1a1405;font-weight:600;font-size:14px}
.dlg .row-btns button{flex:1 1 auto}

/* ---------- Ohne Anmeldung: nur aktueller Stand und Mitmachen ---------- */
.guest .side > .card:not(#inviteCard),.guest .monthnav .iconbtn{display:none}
.guest .monthnav{width:auto}
.guest .grid{grid-template-columns:minmax(0,640px);justify-content:center}
.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.steps li{padding-left:4px}

/* ---------- Benachrichtigungen ---------- */
.bell{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:inline-grid;place-items:center;padding:0}
.bell svg{width:20px;height:20px}
.sw-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;cursor:pointer}
.sw-row > span{display:flex;flex-direction:column;gap:1px;min-width:0}
.sw-row b{font-weight:700}
.sw-row small{color:var(--muted);font-size:13px;line-height:1.35}
.sw-row.main{padding:12px 14px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)}
.sw-list{display:flex;flex-direction:column}
.sw-list .sw-row + .sw-row{border-top:1px solid var(--line)}
.sw-list.off{opacity:.45}
.switch{appearance:none;-webkit-appearance:none;flex:none;width:50px;height:30px;border-radius:999px;background:var(--line);position:relative;cursor:pointer;margin:0;transition:background .2s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
.switch:checked{background:var(--ok)}
.switch:checked::after{transform:translateX(20px)}
.switch:disabled{cursor:default}
.push-ask{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:11;width:min(420px,calc(100% - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:0 12px 40px rgba(0,0,0,.3);display:flex;flex-direction:column;gap:10px}
.push-ask p{margin:0;font-weight:600}
.push-ask .row-btns button{flex:1 1 auto;min-height:44px;padding:8px 14px;font-size:15px}
@media (max-width:760px){.push-ask{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
@media (prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}}