/* ============ SALES EDUCATION DESIGN SYSTEM ============
   Token layers (EPM-62):
     1  primitives: brand palette, alphas, radii, weights, motion, font. Never themed.
     B  BRIDGE: value-named type sizes and tracking, collapsed into role names in step 2 (H1).
        Do not add new usages; the audit counts them per PR.
     2  semantic roles: surfaces, text, borders, accent, focus, shadows, status, medals.
        The only layer a theme overrides: see the html[data-theme=dark] block below.
     3  component tokens.
   Theme selection happens in JS via html[data-theme] only; no prefers-color-scheme here. */
:root{
  /* 1 primitives */
  --se-black:#000000; --se-yellow:#f9cb0c; --se-slate:#2d3e50; --se-white:#ffffff;
  --se-yellow-50:#fffcee; --se-yellow-100:#fef7d8; --se-yellow-200:#fdeeab; --se-yellow-300:#e9d78a; --se-yellow-500:#dfb50a; --se-yellow-600:#c19c07;
  --ink-50:#f7f7f7; --ink-100:#efefef; --ink-200:#e2e2e2; --ink-300:#cfcfcf;
  --slate-100:#e8ecf1; --slate-900:#16202b;
  --white-a28:rgba(255,255,255,.28); --white-a40:rgba(255,255,255,.4); --white-a75:rgba(255,255,255,.75); --white-a88:rgba(255,255,255,.88); --white-a90:rgba(255,255,255,.9);
  --black-a35:rgba(0,0,0,.35); --black-a50:rgba(0,0,0,.5); --black-a55:rgba(0,0,0,.55); --black-a65:rgba(0,0,0,.65);
  --radius-sm:6px; --radius-md:8px; --radius-lg:14px; --radius-pill:99px; --radius-bar:4px;
  --fw-regular:400; --fw-medium:500; --fw-bold:700; --fw-extrabold:800; --fw-black:900;
  --ease:cubic-bezier(.2,.6,.2,1);
  --font:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  /* B BRIDGE: value-named, collapsed in step 2 (H1) */
  --fs-10:10px; --fs-10-5:10.5px; --fs-11:11px; --fs-11-5:11.5px; --fs-12:12px; --fs-12-5:12.5px; --fs-13:13px; --fs-13-5:13.5px;
  --fs-14:14px; --fs-14-5:14.5px; --fs-15:15px; --fs-16:16px; --fs-17:17px; --fs-18:18px; --fs-22:22px;
  --fs-r092:.92rem; --fs-r1:1rem; --fs-r102:1.02rem; --fs-r105:1.05rem; --fs-r110:1.1rem; --fs-r115:1.15rem; --fs-r125:1.25rem;
  --fs-r130:1.3rem; --fs-r1375:1.375rem; --fs-r150:1.5rem; --fs-r175:1.75rem;
  --fs-h1:clamp(1.9rem,4.2vw,2.5rem); --fs-h1-hero:clamp(2rem,5vw,3.4rem); --fs-h1-form:clamp(1.6rem,3.4vw,2.2rem); --fs-h1-dash:clamp(1.6rem,3vw,2.1rem); --fs-h2:clamp(1.35rem,2.8vw,1.875rem);
  --ls-tighter:-.02em; --ls-tight:-.01em; --ls-01:.01em; --ls-02:.02em; --ls-03:.03em; --ls-04:.04em; --ls-05:.05em; --ls-06:.06em;
  --ls-08:.08em; --ls-10:.1em; --ls-16:.16em; --ls-18:.18em; --ls-20:.2em; --ls-22:.22em; --ls-stars:1px;
  /* 2 semantic roles (themed) */
  --surface-page:#ffffff; --surface-card:#ffffff; --surface-raised:var(--surface-card); --surface-embed:var(--surface-page);
  --surface-input:var(--se-white); --surface-hover:#f3f3f3; --surface-hover-soft:var(--ink-50); --surface-zebra:#fafafa;
  --surface-muted:var(--ink-100); --surface-track:var(--ink-200); --surface-accent-soft:var(--se-yellow-50); --surface-accent-tint:var(--se-yellow-100);
  --surface-info:var(--slate-100); --surface-inverse:var(--se-black); --surface-backdrop:var(--black-a55);
  --text-heading:#000000; --text-body:#1c1c1c; --text-muted:#6b6b6b; --text-strong:var(--se-black);
  --text-on-accent:var(--se-black); --text-inverse:var(--se-white); --text-inverse-soft:var(--white-a88); --text-code:#f2efe2;
  --accent:var(--se-yellow); --accent-hover:var(--se-yellow-500); --accent-press:var(--se-yellow-600); --accent-edge:var(--se-yellow-600);
  --accent-text:#8a6d00; --info-accent:var(--se-slate);
  --border-subtle:#e4e4e4; --border-input:var(--ink-300); --border-strong:var(--se-black); --border-focus:var(--se-yellow);
  --border-accent-soft:var(--se-yellow-300); --border-accent-tint:var(--se-yellow-200); --border-info:#d3dbe4; --border-inverse-soft:var(--white-a28);
  --focus-ring:0 0 0 3px rgba(249,203,12,.3);
  --shadow-md:0 2px 6px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.07);
  --shadow-modal:0 24px 64px var(--black-a35);
  --shadow-accent:0 4px 18px rgba(249,203,12,.45);
  --heading-shadow-accent:1px 2px 0 var(--black-a50); --heading-shadow-accent-strong:1px 2px 0 var(--black-a65);
  --status-success-text:#2e9e5b; --status-success-fill:#2e9e5b; --status-danger-text:#d64545; --status-danger-text-strong:#B0402A; --status-danger-border:#d64545;
  --status-success-soft-bg:#e7f3ec; --status-success-soft-text:#1f6b3e; --status-success-soft-border:#bfdccb;
  --medal-gold-bg:var(--accent); --medal-gold-text:var(--se-black); --medal-gold-edge:var(--accent-edge);
  --medal-silver-bg:#d4d9df; --medal-silver-text:#2b2f36; --medal-silver-edge:#9aa3ad;
  --medal-bronze-bg:#d8b08a; --medal-bronze-text:#3a2614; --medal-bronze-edge:#a5744a;
  --badge-bronze:#A5744A; --badge-bronze-deep:#7E5433; --badge-silver:#8B95A1; --badge-silver-deep:#66707C;
  --badge-gold:#C69C43; --badge-gold-deep:#9A7628; --badge-platinum:#6E7F96; --badge-platinum-deep:#4C5B70;
  /* 3 component tokens */
  --strip-pad-y:11px; --strip-pad-x:16px;
}

/* Dark theme scaffold (EPM-62, inactive by default). Only semantic roles flip.
   Neutrals come from one ramp so the hue can be retuned in one place after the
   Mighty measurement. Not themed yet: primitives, inverse surfaces (header,
   footer, hero, calc box), accent, medals, badges, code. Values are provisional
   until measured against Mighty's dark UI. Activated by the widget parameter
   theme=dark|auto (head script in index.html); the standalone page has no switch. */
html[data-theme=dark]{
  color-scheme:dark;
  --dark-0:#121316; --dark-1:#15171a; --dark-2:#1b1d21; --dark-3:#1f2125; --dark-4:#24272c; --dark-5:#2a2d33;
  --surface-page:var(--dark-0); --surface-card:var(--dark-2); --surface-raised:var(--dark-4); --surface-embed:var(--surface-page);
  --surface-input:var(--dark-1); --surface-hover:var(--dark-4); --surface-hover-soft:var(--dark-3); --surface-zebra:var(--dark-3);
  --surface-muted:var(--dark-5); --surface-track:var(--dark-5); --surface-accent-soft:rgba(249,203,12,.10); --surface-accent-tint:rgba(249,203,12,.16);
  --surface-info:#1e2530; --surface-backdrop:rgba(0,0,0,.7);
  --text-heading:#f5f5f5; --text-body:#e6e6e6; --text-muted:#a6a9ae; --text-strong:#ffffff;
  --accent-text:var(--se-yellow); --info-accent:#a9bdd3;
  --border-subtle:#2c2f34; --border-input:#5c626b; --border-strong:#e6e6e6;
  --border-accent-soft:rgba(249,203,12,.35); --border-accent-tint:rgba(249,203,12,.3); --border-info:#2f3a48;
  --focus-ring:0 0 0 3px rgba(249,203,12,.55);
  --shadow-md:0 0 0 1px rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.5);
  --shadow-modal:0 0 0 1px rgba(255,255,255,.06), 0 24px 64px rgba(0,0,0,.6);
  --status-success-text:#4cc27a; --status-success-fill:#4cc27a; --status-danger-text:#f06a6a; --status-danger-text-strong:#f08a7a; --status-danger-border:#f06a6a;
  --status-success-soft-bg:#173523; --status-success-soft-text:#8fd9a8; --status-success-soft-border:#2b5a3c;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font);font-size:var(--fs-16);line-height:1.6}
h1,h2,h3,h4{font-family:var(--font);font-weight:var(--fw-bold);line-height:1.2;color:var(--text-heading);letter-spacing:var(--ls-tight)}
h1{font-size:var(--fs-h1);font-weight:var(--fw-black);text-transform:uppercase}
h2{font-size:var(--fs-h2);text-transform:uppercase}
h3{font-size:var(--fs-r125)}
p{color:var(--text-body)}
a{color:var(--accent-text);font-weight:var(--fw-medium)}
/* iOS Safari paints button text in its link blue unless a colour is set. */
button{font-family:var(--font);color:inherit}
.spot{color:var(--accent);font-style:italic;font-weight:var(--fw-black);text-shadow:var(--heading-shadow-accent)}
.on-dark .spot{text-shadow:var(--heading-shadow-accent-strong)}
.ico{width:1.2em;height:1.2em;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.22em;display:inline-block}
/* Small uppercase label role. Size, tracking and colour differ per member today
   (step 2 decision H2); the shared block carries only what they agree on. */
.label-caps,.kicker,.eyebrow,.tile .t-label,.filterbar label,.board-table th,.sum-table th,.badge-card .dur,.calc-box small,.brand-name small{text-transform:uppercase;font-weight:var(--fw-bold)}

/* ---------- Header / Tabs ---------- */
.site-header{position:sticky;top:0;z-index:60;background:var(--surface-inverse);border-bottom:3px solid var(--accent)}
.header-inner{max-width:1240px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
/* Platzhalter-Wortmarke: hier assets/logo-whiteyellow.png einsetzen */
.brand-mark{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-black);font-size:var(--fs-15);letter-spacing:var(--ls-tighter)}
.brand-name{color:var(--text-inverse);font-weight:var(--fw-black);font-size:var(--fs-17);line-height:1.15;text-transform:uppercase;letter-spacing:var(--ls-02)}
.brand-name small{display:block;font-size:var(--fs-10-5);letter-spacing:var(--ls-22);color:var(--accent)}
.main-tabs{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.main-tab{border:1px solid var(--border-inverse-soft);background:transparent;color:var(--text-inverse);padding:9px 16px;border-radius:var(--radius-md);font-size:var(--fs-13-5);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-04);cursor:pointer;transition:.2s var(--ease)}
.main-tab:hover{border-color:var(--accent);color:var(--accent)}
.main-tab.active{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.main-tab .num{display:inline-block;margin-right:7px;font-size:var(--fs-11-5);opacity:.6;font-weight:var(--fw-medium)}
.main-tab.active .num{opacity:.75}

.page{display:none}
.page.active{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.page-pad{max-width:1240px;margin:0 auto;padding:34px 24px 90px}

/* ---------- Hero (dunkel, Schräge mit gelb/weißem Randstreifen) ---------- */
.hero-dark{background:linear-gradient(135deg,var(--se-black) 0%,var(--slate-900) 55%,var(--se-slate) 100%);color:var(--text-inverse);position:relative}
.hero-inner{max-width:1240px;margin:0 auto;padding:74px 24px 84px;max-width:1240px}
.hero-inner .content{max-width:850px}
.hero-dark h1{color:var(--text-inverse);font-size:var(--fs-h1-hero)}
.hero-dark p.lead{font-size:var(--fs-r115);margin-top:20px;color:var(--text-inverse-soft);max-width:720px}
.hero-dark p.lead strong{color:var(--text-inverse)}
.slant{display:block;width:100%;height:56px;margin-top:-1px}
/* The two page-coloured wedges of the slant follow the page surface, so a dark
   theme does not leave a white wedge under the hero. */
.slant .to-page{fill:var(--surface-page)}
.eyebrow{display:inline-block;font-size:var(--fs-12);letter-spacing:var(--ls-18);color:var(--text-on-accent);background:var(--accent);padding:6px 14px;border-radius:var(--radius-md);margin-bottom:22px;font-weight:var(--fw-black)}
.hero-cta{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--radius-md);padding:12px 24px;font-size:var(--fs-14);font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:var(--ls-05);cursor:pointer;border:1px solid var(--border-input);background:var(--surface-card);color:var(--text-strong);transition:.2s var(--ease);text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn:hover{border-color:var(--border-strong);background:var(--surface-hover-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:var(--shadow-accent);transform:translateY(-1px)}
.btn.primary:active{background:var(--accent-press);transform:none}
.btn.on-dark{background:transparent;border-color:var(--white-a40);color:var(--text-inverse)}
.btn.on-dark:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.btn.small{padding:8px 14px;font-size:var(--fs-12)}
.btn.ghost{background:transparent}

.section{margin-top:64px}
.section-head{max-width:780px;margin-bottom:28px}
.section-head p{margin-top:12px}
.kicker{font-size:var(--fs-11-5);letter-spacing:var(--ls-18);color:var(--accent-text);font-weight:var(--fw-black);margin-bottom:10px}

/* Surface recipe shared by every card-like container. Padding, layout and margins
   stay with the component; .modal is not a surface (no border, own shadow). */
.surface,.card,.step,.filterbar,.tile,.board,.form-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.grid{display:grid;gap:18px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.pad{padding:26px}
.icon-chip{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;background:var(--surface-inverse);color:var(--accent);margin-bottom:16px}
.icon-chip .ico{width:22px;height:22px}
.card h3{margin-bottom:8px;text-transform:uppercase;font-size:var(--fs-r105)}
.card p{font-size:var(--fs-15)}
ul.clean{list-style:none;margin-top:12px}
ul.clean li{font-size:var(--fs-14-5);color:var(--text-body);padding:5px 0 5px 26px;position:relative}
ul.clean li::before{content:"";position:absolute;left:2px;top:12px;width:10px;height:10px;background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%)}

.calc-box{background:var(--surface-inverse);color:var(--text-inverse);border-radius:var(--radius-lg);padding:30px;font-weight:var(--fw-black);font-size:var(--fs-r150);text-align:center;text-transform:uppercase;letter-spacing:var(--ls-01)}
.calc-box small{display:block;font-size:var(--fs-11-5);color:var(--accent);margin-bottom:12px;letter-spacing:var(--ls-20)}
.calc-box .hl{color:var(--accent);font-style:italic}

.steps{display:grid;gap:14px;margin-top:8px}
.step{display:flex;gap:18px;padding:20px 22px;align-items:flex-start}
.step-no{flex:0 0 40px;height:40px;border-radius:var(--radius-md);background:var(--accent);color:var(--text-on-accent);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-black);font-size:var(--fs-18)}
.step h3{font-size:var(--fs-r1);margin-bottom:4px;text-transform:uppercase}
.step p{font-size:var(--fs-14-5)}

/* Uniform hairline, no accent bar on the left (decision of 3 Sep 2026): the
   tint already tells the box kinds apart, and the bar read as a template. */
.callout,.note,.info-callout{border:1px solid;border-radius:var(--radius-md);color:var(--text-body)}
.note{background:var(--surface-accent-tint);border-color:var(--border-accent-tint);padding:14px 18px;font-size:var(--fs-14);margin-top:16px}
.note strong{color:var(--text-strong)}

.badge-row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));margin-top:6px}
.badge-card{border-radius:var(--radius-lg);padding:22px;color:var(--text-inverse);position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.badge-card h3{color:var(--text-inverse);font-size:var(--fs-r1);text-transform:uppercase}
.badge-card .dur{font-size:var(--fs-11);letter-spacing:var(--ls-16);opacity:.9;margin-bottom:8px;display:block}
.badge-card p{color:var(--white-a90);font-size:var(--fs-13-5);margin-top:6px}
.badge-card.bronze{background:linear-gradient(135deg,var(--badge-bronze),var(--badge-bronze-deep))}
.badge-card.silber{background:linear-gradient(135deg,var(--badge-silver),var(--badge-silver-deep))}
.badge-card.gold{background:linear-gradient(135deg,var(--badge-gold),var(--badge-gold-deep))}
.badge-card.platin{background:linear-gradient(135deg,var(--badge-platinum),var(--badge-platinum-deep))}

/* ---------- Dashboard ---------- */
.dash-top{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.updated{font-size:var(--fs-12-5);color:var(--text-muted)}
.sub-nav{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}
.sub-tab{border:1px solid var(--border-input);background:var(--surface-card);padding:8px 16px;border-radius:var(--radius-md);font-size:var(--fs-13);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-03);color:var(--text-body);cursor:pointer;transition:.2s var(--ease)}
.sub-tab:hover{border-color:var(--border-strong)}
.sub-tab.active{background:var(--surface-inverse);border-color:var(--surface-inverse);color:var(--accent)}

.filterbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 16px;margin-bottom:18px}
.filterbar label{font-size:var(--fs-11);color:var(--text-muted);display:block;margin-bottom:3px;letter-spacing:var(--ls-08)}
.f-group{min-width:130px}
select,input[type=text],input[type=email],input[type=date],input[type=number]{
  font-family:var(--font);font-size:var(--fs-14);color:var(--text-body);
  background:var(--surface-input);border:1px solid var(--border-input);border-radius:var(--radius-md);
  padding:8px 11px;outline:none;width:100%;transition:border .2s,box-shadow .2s}
select:focus,input:focus{border-color:var(--border-focus);box-shadow:var(--focus-ring)}
/* iOS Safari gives date inputs an intrinsic width and ignores width:100%, which
   pushed the field out of the card on phones. */
input[type=date]{min-width:0;max-width:100%;display:block;-webkit-appearance:none;appearance:none}
.filterbar .spacer{flex:1}
/* Filter controls sit on the table's type size (13.5px), the form pages keep 14px. */
.filterbar select,.filterbar input{font-size:var(--fs-13-5);padding:7px 10px}
.linkish{background:none;border:none;color:var(--accent-text);font-size:var(--fs-13);font-weight:var(--fw-bold);cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.pill{border:1px solid var(--border-input);background:var(--surface-card);padding:6px 13px;border-radius:var(--radius-md);font-size:var(--fs-12-5);font-weight:var(--fw-bold);color:var(--text-body);cursor:pointer;transition:.2s var(--ease)}
.pill:hover{border-color:var(--border-strong)}
.pill.active{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}

.tiles{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:20px}
.tile{padding:18px 20px;text-align:center}
.tile .t-label{font-size:var(--fs-11);letter-spacing:var(--ls-10);color:var(--text-muted)}
.tile .t-value{font-weight:var(--fw-bold);font-size:var(--fs-r175);margin-top:4px;color:var(--text-strong)}
.tile .t-sub{font-size:var(--fs-12-5);color:var(--text-muted);margin-top:2px}

.board{margin-bottom:26px;overflow:hidden}
.board-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid var(--border-subtle)}
.board-head h3{font-size:var(--fs-r102);text-transform:uppercase}
.board-head .desc{font-size:var(--fs-13);color:var(--text-muted);flex-basis:100%;margin-top:2px}
.board-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.table-wrap{overflow-x:auto;max-width:100%}
table.board-table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--fs-13-5);min-width:640px}
.board-table th{font-size:var(--fs-11);letter-spacing:var(--ls-06);color:var(--text-strong);text-align:center;padding:10px 12px;border-bottom:1px solid var(--border-strong);white-space:nowrap;background:var(--surface-card)}
.board-table th.group-h{text-align:center;border-left:1px solid var(--border-subtle);color:var(--text-strong);background:var(--surface-accent-tint);border-bottom:1px solid var(--accent)}
.board-table th:first-child,.board-table td:first-child{text-align:center;width:52px}
.board-table th.txt,.board-table td.txt{text-align:left}
.board-table td{padding:9px 12px;border-bottom:1px solid var(--border-subtle);text-align:center;white-space:nowrap;color:var(--text-body)}
.board-table tbody tr:last-child td{border-bottom:none}
.board-table tbody tr:hover td{background:var(--surface-hover)}
.board-table td.rank{font-weight:var(--fw-bold);color:var(--text-strong)}
.board-table .nick{color:var(--text-strong);font-weight:var(--fw-medium);cursor:pointer;text-decoration:underline;text-decoration-color:transparent;transition:.2s}
.board-table .nick:hover{text-decoration-color:var(--accent);text-decoration-thickness:2px}
.board-table td.pts{font-weight:var(--fw-bold);color:var(--text-strong)}
/* Unfolded player row (widgets): a light grey band across the row, the content
   starting under the nickname column. Facts sit in one line where there is room
   and stack as label/value rows on phones. */
.board-table tr.player-detail td{white-space:normal;text-align:left;padding:14px 12px 16px;background:transparent;border-bottom:1px solid var(--border-subtle);cursor:default}
.board-table tr.player-detail.alt td{background:var(--surface-zebra)}
.board-table tr.player-detail:hover td{background:transparent}
.board-table tr.player-detail.alt:hover td{background:var(--surface-zebra)}
.board-table tr.player-detail .player-badge{font-size:var(--fs-13);color:var(--text-muted);margin:0}
.board-table tr.player-detail .player-facts{display:flex;flex-direction:column;margin-top:8px;font-size:var(--fs-13)}
.board-table tr.player-detail .fact{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--border-subtle)}
.board-table tr.player-detail .fact:last-child{border-bottom:none}
.board-table tr.player-detail .fact b{font-weight:var(--fw-bold);color:var(--text-strong);margin-right:6px}
.board-table tr.player-detail .player-facts tr:last-child td{border-bottom:none}
/* Ranking rows alternate white and light grey (decision of 28 Aug 2026, the medal
   tints for places 1 to 3 are gone, the medals themselves stay). The unfolded
   player row shares its row's colour, the row border is the divider. */
.board-table tbody tr.alt td{background:var(--surface-zebra)}
/* Rank medals (decision of 28 Aug 2026): flat discs, gold in the brand yellow, silver
   and bronze as soft tints, a hairline edge in a darker tone, dark numerals. */
.medal{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;font-size:var(--fs-11);font-weight:var(--fw-extrabold);line-height:1;padding-top:1px;box-sizing:border-box;border:1px solid transparent}
.medal.m1{background:var(--medal-gold-bg);color:var(--medal-gold-text);border-color:var(--medal-gold-edge)}
.medal.m2{background:var(--medal-silver-bg);color:var(--medal-silver-text);border-color:var(--medal-silver-edge)}
.medal.m3{background:var(--medal-bronze-bg);color:var(--medal-bronze-text);border-color:var(--medal-bronze-edge)}
/* Neutral mark for places 4+ in the player profile; the tables keep the plain number. */
.medal.mn{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-input)}
/* Player profile head (modal and unfolded row): mark, name, badge line. */
.player-head{display:flex;align-items:center;gap:12px}
.player-head .medal{flex:0 0 auto;width:28px;height:28px;font-size:var(--fs-12-5)}
.player-head .player-name{font-size:var(--fs-r110);font-weight:var(--fw-bold);text-transform:none;margin:0;line-height:1.3}
.modal .player-badge{font-size:var(--fs-13);color:var(--text-muted);margin:10px 0 0}
.empty-state{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:var(--fs-14-5)}
/* Board area while the live data loads, and when the first load fails (30 Aug 2026). */
.loading-state{padding:40px 24px;text-align:center;color:var(--text-muted);font-size:var(--fs-14-5)}
.loading-state .spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--surface-accent-tint);border-top-color:var(--accent);border-radius:50%;vertical-align:-5px;margin-right:10px;animation:epm-spin .8s linear infinite}
@keyframes epm-spin{to{transform:rotate(360deg)}}
.load-error{padding:32px 24px;text-align:center;color:var(--text-body);font-size:var(--fs-14-5);line-height:1.6}
.load-error .btn{margin-top:14px}
.dim{color:var(--text-muted)}
.board-foot{padding:10px 20px;border-top:1px solid var(--border-subtle);font-size:var(--fs-12);color:var(--text-muted);display:flex;gap:16px;flex-wrap:wrap}

.info-callout{display:flex;gap:12px;background:var(--surface-info);border-color:var(--border-info);padding:13px 16px;font-size:var(--fs-13-5);margin-bottom:18px;align-items:flex-start}
.info-callout .ic{flex:0 0 auto;color:var(--info-accent);margin-top:2px}

.chip,.badge-chip,.focus-chip,.streak-chip{border-radius:var(--radius-md);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-03)}
.badge-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;font-size:var(--fs-11-5);color:var(--text-inverse)}
.badge-chip.bronze{background:var(--badge-bronze)} .badge-chip.silber{background:var(--badge-silver)}
.badge-chip.gold{background:var(--badge-gold-deep)} .badge-chip.platin{background:var(--badge-platinum-deep)}
.badge-chip.none{background:var(--surface-muted);color:var(--text-muted);border:1px solid var(--border-input)}
.badge-chip.sm{font-size:var(--fs-11);padding:2px 8px}
.stars{color:var(--accent-text);letter-spacing:var(--ls-stars);font-weight:var(--fw-bold)}
.focus-chip{display:inline-block;padding:2px 9px;font-size:var(--fs-11);border:1px solid var(--border-input);color:var(--text-body);background:var(--surface-input)}
.streak-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;font-size:var(--fs-11);background:var(--status-success-soft-bg);color:var(--status-success-soft-text);border:1px solid var(--status-success-soft-border)}
.streak-chip .ico{width:1em;height:1em}

.progress-outer{height:8px;border-radius:var(--radius-pill);background:var(--surface-muted);overflow:hidden;min-width:90px}
.progress-inner{height:100%;border-radius:var(--radius-pill);background:var(--accent)}
.progress-inner.done{background:var(--status-success-fill)}

.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:170px 1fr 60px;gap:12px;align-items:center;font-size:var(--fs-13-5)}
.bar-track{height:12px;background:var(--surface-muted);border-radius:var(--radius-bar);overflow:hidden}
.bar-fill{height:100%;background:var(--accent)}
.bar-fill.alt{background:var(--info-accent)}
.bar-val{text-align:right;font-weight:var(--fw-bold)}

/* ---------- Modals ---------- */
.modal-back{position:fixed;inset:0;background:var(--surface-backdrop);display:none;align-items:flex-start;justify-content:center;padding:6vh 18px;z-index:100;overflow-y:auto}
.modal-back.open{display:flex}
.modal{background:var(--surface-raised);border-radius:var(--radius-lg);max-width:640px;width:100%;padding:28px;position:relative;box-shadow:var(--shadow-modal);margin:auto}
.modal .modal-actions{margin-top:22px;text-align:center}
.modal h3{margin-bottom:6px;text-transform:uppercase}
.modal .close-x{position:absolute;top:14px;right:16px;background:none;border:none;font-size:var(--fs-22);color:var(--text-muted);cursor:pointer}
/* Player modal: a profile card that reads like the step-6 summary. Name one step
   above body size, badge line muted, facts as the label/value list. */
#playerModal .modal{max-width:480px}
.modal .player-facts{margin-top:18px}
.modal .player-facts td{padding-top:8px;padding-bottom:8px}
textarea.code{width:100%;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:var(--fs-12-5);background:var(--surface-inverse);color:var(--text-code);border:none;border-radius:var(--radius-md);padding:14px;min-height:150px;margin-top:12px;line-height:1.5}
.modal .row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.modal .row .f-group{flex:1;min-width:110px}

/* ---------- Formular ---------- */
.form-shell{max-width:760px;margin:0 auto}
/* Intro block above the two forms (hidden in embed mode, see the embed rules). */
.form-intro{text-align:center;margin-top:10px}
.form-intro h1{font-size:var(--fs-h1-form)}
.form-intro p{margin-top:12px;color:var(--text-muted);font-size:var(--fs-15)}
h1.dash-title{font-size:var(--fs-h1-dash)}
.form-err{display:none;margin-top:12px;color:var(--status-danger-text-strong);font-size:var(--fs-13)}
.copy-ok{display:none;color:var(--status-success-text);font-size:var(--fs-13);align-self:center;font-weight:var(--fw-bold)}
.accent-text{color:var(--accent-text)}
.demo-note{font-size:var(--fs-12-5);color:var(--text-muted);margin-top:22px}
.status-done{color:var(--status-success-text);font-weight:600}
.board-body{padding:20px}
.board-head .actions select{min-width:180px}
.progress-steps{display:flex;gap:6px;margin:26px 0 22px}
.p-step{flex:1;height:5px;border-radius:var(--radius-pill);background:var(--surface-track)}
.p-step.done{background:var(--accent)}
.form-card{padding:32px}
.form-card h2{font-size:var(--fs-r130);margin-bottom:6px}
.form-card .sub{color:var(--text-muted);font-size:var(--fs-14-5);margin-bottom:22px}
.field{margin-bottom:18px}
.field label.f-label{display:block;font-size:var(--fs-14);font-weight:var(--fw-bold);color:var(--text-strong);margin-bottom:6px}
.field .hint{font-size:var(--fs-12-5);color:var(--text-muted);margin-top:5px}
.field .err{display:none;font-size:var(--fs-12-5);color:var(--status-danger-text);margin-top:5px;font-weight:var(--fw-medium)}
.field.invalid .err{display:block}
.field.invalid input{border-color:var(--status-danger-border)}
.choice-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.choice{border:1.5px solid var(--border-input);border-radius:var(--radius-md);background:var(--surface-input);color:var(--text-strong);padding:16px;cursor:pointer;transition:.2s var(--ease);text-align:left;font-size:var(--fs-15)}
.choice:hover{border-color:var(--border-strong)}
.choice.selected{border:2.5px solid var(--accent);background:var(--surface-accent-tint)}
.choice .c-title{font-weight:var(--fw-black);display:block;text-transform:uppercase;font-size:var(--fs-13-5);letter-spacing:var(--ls-03)}
.choice .c-sub{font-size:var(--fs-12-5);color:var(--text-muted);display:block;margin-top:4px;text-transform:none;font-weight:var(--fw-regular)}
.choice .c-ico{display:block;margin-bottom:10px;color:var(--text-strong)}
.choice .c-ico .ico{width:24px;height:24px}
.num-row{display:grid;grid-template-columns:1fr 130px;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--border-subtle)}
.num-row:last-child{border-bottom:none}
.num-row .q{font-size:var(--fs-14-5);color:var(--text-strong);font-weight:var(--fw-medium)}
.num-row .ptval{font-size:var(--fs-12);color:var(--text-muted);display:block;margin-top:2px;font-weight:var(--fw-regular)}
.num-row input{text-align:center;font-size:var(--fs-16);font-weight:var(--fw-bold)}
.phase-block{margin-top:24px}
.phase-block>h3{font-size:var(--fs-r092);color:var(--text-strong);padding-bottom:8px;border-bottom:2px solid var(--accent);margin-bottom:4px;letter-spacing:var(--ls-06);text-transform:uppercase}
/* The points strip (steps 4 to 6): quiet type, but its own block. It stands
   34px clear of the list above (the list rows are 22px apart), has some height
   of its own and a visible edge, so it does not read as one more list row. */
.points-strip,.live-sum,.sum-points tfoot .total td{background:var(--surface-accent-soft);color:var(--text-body);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:var(--ls-08);font-weight:var(--fw-bold)}
.live-sum{border:1px solid var(--border-accent-soft);border-radius:var(--radius-sm);margin-top:34px;padding:var(--strip-pad-y) var(--strip-pad-x);display:flex;justify-content:space-between;align-items:center}
/* Label and value share size, weight and colour (decision of 28 Aug 2026). */
.live-sum b{font-weight:var(--fw-bold);white-space:nowrap}
.live-sum .lbl-short{display:none}
.form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:38px;gap:12px}
/* Turnstile sits in the button row at its native size. Scaling it with a CSS
   transform renders the iframe blurry and throws off its inner spacing. */
.ts-box{flex:0 0 auto}
.sum-table{width:100%;border-collapse:collapse;font-size:var(--fs-14);margin-top:14px}
.sum-table th{text-align:left;font-size:var(--fs-11);letter-spacing:var(--ls-06);color:var(--text-strong);padding:8px 10px;border-bottom:1px solid var(--border-strong)}
.sum-table td{padding:8px 10px;border-bottom:1px solid var(--border-subtle);color:var(--text-body)}
.sum-table td:last-child,.sum-table th:last-child{text-align:right}
/* Outer cells align with the card's heading and text: no padding on the outside.
   The highlighted total keeps its inset so the text does not touch the box edge. */
.sum-table th:first-child,.sum-table td:first-child{padding-left:0}
.sum-table th:last-child,.sum-table td:last-child{padding-right:0}
/* Step 6 points table: the number columns sit centred under their headers.
   Written with the element so it outranks the last-child right alignment. */
.sum-points th.mid,.sum-points td.mid{text-align:center}
/* Same optical air above and below the label table, measured text edge to text
   edge: the first row's cell padding and the subtitle's line-height sit above,
   only the header's padding below, so the top margin is smaller. */
.sum-meta,.kv-table{margin-top:31px}
.sum-points{margin-top:36px;border-collapse:separate;border-spacing:0}
/* Step 6 total: the same strip as on steps 4 and 5, but built as a table footer
   behind a spacer row, so the total sits in the Punkte column of the rows above.
   Keep the values in sync with .live-sum. */
.sum-points tfoot .spacer td{padding:0;height:34px;border:0}
.sum-points tfoot .total td{border:0;border-top:1px solid var(--border-accent-soft);border-bottom:1px solid var(--border-accent-soft);padding-top:var(--strip-pad-y);padding-bottom:var(--strip-pad-y);white-space:nowrap}
.sum-points tfoot .total td:first-child{border-left:1px solid var(--border-accent-soft);border-radius:var(--radius-sm) 0 0 var(--radius-sm);padding-left:var(--strip-pad-x)}
.sum-points tfoot .total td:last-child{border-right:1px solid var(--border-accent-soft);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.sum-points .lbl-short{display:none}
/* Step 6: the entry as a label/value list. Labels bold, values right-aligned. */
.sum-meta td,.kv-table td{padding:9px 10px;vertical-align:top}
.sum-meta td:first-child,.kv-table td:first-child{width:1%;font-weight:var(--fw-bold);color:var(--text-strong);white-space:nowrap}
.sum-meta td:last-child,.kv-table td:last-child{text-align:right;color:var(--text-body);word-break:break-word}
.confirm-hero{text-align:center;padding:26px 10px}
.confirm-hero .big{margin-bottom:16px;color:var(--status-success-fill)}
.confirm-hero .big .ico{width:56px;height:56px;stroke-width:1.6}
.confirm-hero .sub{margin-top:12px}
.confirm-hero .hero-cta{justify-content:center;margin-top:26px}

.site-footer{background:var(--surface-inverse);color:var(--white-a75);border-top:3px solid var(--accent);padding:28px 24px;text-align:center;font-size:var(--fs-13);margin-top:70px}
.site-footer strong{color:var(--accent);text-transform:uppercase;letter-spacing:var(--ls-08)}
@media (max-width:720px){
  .header-inner{gap:12px}
  .main-tabs{margin-left:0;width:100%}
  .pad{padding:20px}
  .form-card{padding:22px}
  /* Smaller type on phones: heading and subtitle step down, the heading gets
     more air below it, and the step-6 tables use a smaller size. */
  .form-card h2{font-size:var(--fs-r110);margin-bottom:12px}
  .form-card .sub{font-size:var(--fs-13-5);margin-bottom:20px}
  .sum-table{font-size:var(--fs-12-5)}
  .sum-meta,.kv-table{margin-top:29px}
  .sum-points{margin-top:34px}
  .sum-table th{font-size:var(--fs-10);padding:7px 8px}
  .sum-table td{padding:7px 8px}
  .sum-meta td,.kv-table td{padding:8px}
  .num-row{grid-template-columns:1fr 96px}
  /* The points strip keeps to one line on phones: short label, value beside it. */
  .points-strip,.live-sum,.sum-points tfoot .total td{font-size:var(--fs-10-5)}
  .live-sum{margin-top:30px;padding:9px 14px;gap:10px}
  .sum-points tfoot .spacer td{height:30px}
  .sum-points tfoot .total td{padding-top:9px;padding-bottom:9px}
  .sum-points tfoot .total td:first-child{padding-left:14px}
  .sum-points .lbl-long{display:none}
  .sum-points .lbl-short{display:inline}
  .live-sum .lbl-long{display:none}
  .live-sum .lbl-short{display:inline}
  /* Form buttons stack in full width on phones, primary on top, so long labels
     no longer wrap into three lines next to a one-line "Zurück". */
  .form-nav{flex-direction:column-reverse;align-items:stretch;gap:10px}
  .form-nav .btn{justify-content:center;margin-left:0}
  .form-nav > span:empty{display:none}
}
/* Top-10 at narrow widths (Mighty's column, phones): fewer columns instead of a
   horizontal scrollbar. "Aktive Tage" and "Letzte Aktivität" stay in the full
   table and in the player detail modal. */
@media (max-width:760px){
  #board-gesamt-top10 table.board-table{min-width:0}
  #board-gesamt-top10 .board-table th:nth-child(n+6),#board-gesamt-top10 .board-table td:nth-child(n+6){display:none}
}
@media (max-width:520px){
  #board-gesamt-top10 .board-table th:nth-child(4),#board-gesamt-top10 .board-table td:nth-child(4),
  #board-gesamt-top10 .board-table th:nth-child(5),#board-gesamt-top10 .board-table td:nth-child(5){display:none}
}

/* Reduced motion: no transitions, no lifting buttons. Nothing here is visible in
   a static screenshot. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
  html{scroll-behavior:auto}
  .btn.primary:hover{transform:none}
}

/* ---------- Embed mode (/widget/<name>, iframes in Mighty) ----------
   The class is set on <html> before the first paint (see <head>). Only the page
   frame is hidden and the width limits are lifted. The content is the same
   markup and JS as on the standalone page, so every rule here must carry the
   html.embed prefix: without the class nothing may change. */
html.embed body{background:var(--surface-embed)}
.embed-bar{display:none}
html.embed.with-bar .embed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 12px;background:var(--surface-inverse);border-bottom:2px solid var(--accent);color:var(--text-inverse);font-size:var(--fs-11-5);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:var(--ls-08)}
/* Widgets never link out of the iframe (Mighty's sandbox forbids navigating the
   page and a new tab would leave the app). Where the standalone page has a
   navigation button, the widget shows a hint naming the Mighty page instead. */
html.embed .embed-hint{display:block;flex-basis:100%;font-size:var(--fs-14);color:var(--text-muted);font-weight:var(--fw-medium);text-transform:none;letter-spacing:0}
html.embed .hero-cta .embed-hint{text-align:center}
html.embed .note .embed-hint{display:inline;color:var(--text-body)}
html.embed .embed-bar a{color:var(--accent);text-decoration:none;white-space:nowrap}
html.embed .site-header,html.embed .site-footer,html.embed #page-willkommen,html.embed #dashSubNav,html.embed .dash-top>div:first-child,html.embed .board-head .actions .btn{display:none}
html.embed .page-pad{max-width:none;padding:12px 12px 20px}
html.embed .form-shell{max-width:none}
html.embed .dash-top{margin-bottom:10px}
html.embed .filterbar{margin-bottom:14px}
/* Every board is its own widget (decision of 30 Aug 2026, EPM-64): the pill bar
   that switches the channel stays on the standalone page only. */
html.embed .pills{display:none}
/* Compact area widgets: no update line, no board description (the Mighty page
   carries the heading; several boards stack on one page). */
html.embed .compact-board .dash-top,html.embed .compact-board .board-head .desc{display:none}
/* Mighty's standard embed column is about 640px wide: four KPI tiles must
   still share one row there (two by two on phones). */
html.embed .tiles{grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px}
/* Inside an iframe position:fixed means the iframe box, not the reader's screen, and
   the host page cannot be scrolled from here. The backdrop covers the whole widget
   document and placeModal() centres the card on the tapped point. */
html.embed .modal-back{position:absolute;inset:auto;top:0;left:0;right:0;padding:0 18px;overflow:visible}
html.embed .modal{margin:0 auto}
html.embed .tile{padding:14px 14px}
html.embed .tile .t-value{font-size:var(--fs-r1375)}
html.embed .embed-view{text-align:center;padding:2px 0 10px}
/* Form widgets: the Mighty page carries the heading, so the intro block (badge,
   heading, note) above the two forms is hidden. */
html.embed #page-registrieren .form-shell>div:first-child,html.embed #page-einreichen .form-shell>div:first-child{display:none}