/* OanserHub — Verwaltung
   Believes: this is the club's record, and it has to be right.
   Dense tables at every width, by default. Brand colour only for status
   and identity, never decoration. Left rail on desktop. */

*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#FFFFFF;
  --sunk:#F6F7F8;
  --sunk-2:#EDEFF1;
  --line:#E1E4E7;
  --line-2:#CBD0D5;

  --ink:#15181C;
  --ink-2:#4E555D;
  --ink-3:#7C858E;

  --on-ink:#FFFFFF;       /* text on an ink-filled surface */

  --id:#B8940A;           /* club yellow, darkened to carry text on white */
  --unconf:#B8940A;       /* club yellow, as --id: an unconfirmed free name */
  --id-bg:#FDF6D8;
  --id-bg-2:#FAF0C8;
  --ok:#256B1B;           /* club green, darkened for AA */
  --ok-line:#BBD8B5;
  --bad:#A8231E;          /* club red, darkened for AA */
  --bad-line:#E7BEBC;
  --wait:#A83A0C;         /* club orange, darkened for AA */
  --wait-line:#E8C7B4;
  --wait-bg:#FDF1EA;
  --on-wait:#FFFFFF;
  --shadow:rgba(0,0,0,.14);

  /* Trainingsbeteiligung: one grey ramp, more = darker; validated as an ordinal ramp
     against --bg (dataviz validate_palette.js --ordinal): lightest step 2.17:1 */
  --cal-1:#A9B1B9;
  --cal-2:#7C858E;
  --cal-3:#4E555D;
  --cal-4:#15181C;

  /* Kalender: an event other than training or game — petrol, away from the club's gold and from
     the status colours; as text 5.4:1 on --bg */
  --k-event:#0E7490;
  --kx-event:#0E7490;

  --rail:236px;
  --pad:16px;
  color-scheme:light;
}

/* The same record after hours: neutral greys, no tint. Status colours
   lighten instead of darken so they still reach AA on the dark ground. */
:root[data-theme="dark"]{
  --k-event:#3FB3CC;
  --kx-event:#3FB3CC;
  --bg:#131518;
  --sunk:#1B1E22;
  --sunk-2:#252930;
  --line:#2C3138;
  --line-2:#3D444D;

  --ink:#E7EAED;
  --ink-2:#AEB5BD;
  --ink-3:#8A939C;
  --on-ink:#131518;

  --id:#E0BA22;
  --unconf:#E0BA22;
  --id-bg:#2A2410;
  --id-bg-2:#342D13;
  --ok:#6BBF5C;
  --ok-line:#2F5A28;
  --bad:#EF7A74;
  --bad-line:#6B2B28;
  --wait:#F08A55;
  --wait-line:#6B3A22;
  --wait-bg:#2B1A11;
  --on-wait:#131518;
  --shadow:rgba(0,0,0,.55);
  /* on the dark ground more = brighter; its own steps, validated against #131518: 2.31:1 */
  --cal-1:#4A525C;
  --cal-2:#7C858E;
  --cal-3:#AEB5BD;
  --cal-4:#E7EAED;
  color-scheme:dark;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;font-variant-numeric:tabular-nums}
a{color:var(--ink)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--on-ink);padding:10px 14px;z-index:99}
.skip:focus{left:0}

.shell{display:flex;min-height:100vh}

/* ---------- left rail (desktop) ---------- */
.rail{
  width:var(--rail);flex:none;border-right:1px solid var(--line);background:var(--sunk);
  padding:16px 0;position:sticky;top:0;height:100vh;overflow:auto;display:none;flex-direction:column;
}
@media (min-width:920px){.rail{display:flex}}
.rail .wm{display:block;padding:2px 18px 16px;color:inherit;text-decoration:none}   /* the logo is the way home */
/* the logo: wordmark with the strap under it, the player beside both; one variant per theme */
.brand{display:flex;align-items:stretch;gap:10px}
.brand .bw{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand .word{display:block;width:100%;max-width:150px;height:auto}
.brand small{display:block;font-size:9px;letter-spacing:.14em;color:var(--ink-3);font-weight:500;margin-top:6px;white-space:nowrap}
.brand .pl{display:block;height:48px;width:auto;flex:none}
/* the phone's bar: the wordmark instead of the page title (the page's own heading says where you are) */
.mark{display:flex;align-items:center;flex:none;margin-right:auto}
.mark .wmk{height:24px;width:auto;display:block}
@media (max-width:919px){.bar .where{display:none}}
@media (min-width:920px){.mark{display:none}}
:root[data-theme="dark"] .brand .light,:root[data-theme="dark"] .mark .light,
:root:not([data-theme="dark"]) .brand .dark,:root:not([data-theme="dark"]) .mark .dark{display:none}
.rail nav{display:flex;flex-direction:column}
.rail nav button{
  display:flex;align-items:center;gap:10px;text-align:left;padding:9px 18px;min-height:38px;
  font-size:13.5px;color:var(--ink-2);border-left:2px solid transparent;
}
.rail nav button[aria-current="true"]{background:var(--bg);color:var(--ink);font-weight:600;border-left-color:var(--id)}
.rail nav button .n{margin-left:auto;font-size:11px;background:var(--sunk-2);padding:1px 6px;color:var(--ink-2)}
.rail nav button .n.hot{background:var(--wait);color:var(--on-wait)}
/* the same counter in the "Mehr" menu and on a tab button */
.menu button .n,.b .n{font-size:11px;font-weight:700;padding:1px 6px;background:var(--sunk-2);color:var(--ink-2)}
.menu button .n{float:right}
.menu button .n.hot,.b .n.hot{background:var(--wait);color:var(--on-wait)}

/* ---------- the bar at the bottom (phone) ----------
   The most used areas one tap away, the rest under "Mehr". The current one as in the rail: ink and
   the club's stripe. It steps aside for the keyboard and for an open picker. */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;background:var(--bg);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.tabbar button{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;min-height:54px;padding:6px 2px 4px;font-size:11px;color:var(--ink-3);border-top:2px solid transparent;margin-top:-1px}
.tabbar svg{width:22px;height:22px;display:block}
.tabbar button[aria-current="true"]{color:var(--ink);font-weight:600;border-top-color:var(--id)}
.tabbar .n{position:absolute;top:3px;left:calc(50% + 7px);font-size:10px;font-weight:700;line-height:1.3;padding:0 4px;
  background:var(--wait);color:var(--on-wait)}
@media (min-width:920px){.tabbar{display:none}}
@media (max-width:919px){main{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.lp .tabbar,body.picking .tabbar,body.typing .tabbar{display:none}
.railfoot{margin-top:auto;padding:16px 18px 4px;font-size:11px;color:var(--ink-3);border-top:1px solid var(--line)}

.col{flex:1;min-width:0;display:flex;flex-direction:column}

/* ---------- bar ---------- */
.bar{
  position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top,0px) + 9px) var(--pad) 9px;
  display:flex;align-items:center;gap:12px;min-height:52px;
}
.where{flex:1;min-width:0;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.where small{color:var(--ink-3);font-weight:400}
/* the role switch is prominent — this design assumes you hold an Amt */
.as{
  display:flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;flex:none;
  border:1px solid var(--line-2);font-size:12.5px;white-space:nowrap;background:var(--bg);
}
.as b{font-weight:700}
.as::after{content:"▾";color:var(--ink-3);font-size:10px}

main{flex:1;padding:0 var(--pad) 70px;max-width:1160px;width:100%}
@media (min-width:920px){main{padding:0 26px 70px}}

/* ---------- headings ---------- */
.vh{padding:22px 0 0}
.vh h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.015em}
.vh p{margin:4px 0 0;color:var(--ink-3);font-size:12.5px}

.sec{display:flex;align-items:center;gap:10px;margin:26px 0 0;padding-bottom:7px;border-bottom:1px solid var(--line-2)}
.sec h2{margin:0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.sec .r{margin-left:auto;font-size:12px;color:var(--ink-3)}
.sec button.t,.gap.one button.t{font-size:11.5px;color:var(--ink-2);border:1px solid var(--line-2);padding:4px 9px;min-height:28px}
.sec button.t[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.sec .r .fwall{font-size:12px;color:var(--ink-2);background:none;border:0;padding:6px 0;margin-right:10px;cursor:pointer}   /* Andere Mannschaften: all boxes at once — text, not a second button */
.sec .r .fwall{display:inline-flex;align-items:center;white-space:nowrap}
.sec .r:has(.fwall){display:flex;align-items:center;flex-shrink:0}     /* switch and Bearbeiten stay side by side; the title gives way */
.sec .r .fwall .ar{font-size:15px;margin-right:4px;vertical-align:-2px}
.sec .r .fwall .lbs{display:inline-grid;text-align:right}
.sec .r .fwall .lbs>span{grid-area:1/1}
.sec .r .fwall .lbs>.off{visibility:hidden}

.note{font-size:12.5px;color:var(--ink-3);margin:10px 0 0;max-width:46rem}

/* ---------- tables: the whole design ---------- */
table.t{width:100%;border-collapse:collapse;margin-top:2px}
table.t caption{text-align:left;font-size:12px;color:var(--ink-3);padding:8px 0}
table.t th{
  text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line-2);white-space:nowrap;
  background:var(--bg);
}
table.t th.w{white-space:normal}   /* a head that may wrap: stacked roles (salesCols) */
table.t td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th.n,table.t td.n{text-align:right}
table.t th:first-child,table.t td:first-child{padding-left:0}
table.t th:last-child,table.t td:last-child{padding-right:0}
table.t tbody tr:hover td{background:var(--sunk)}
table.t tr.me td{background:var(--id-bg)}
table.t tr.me:hover td{background:var(--id-bg-2)}
/* the league table: six columns on the phone without scrolling sideways — narrower gaps */
.lt table.t th,.lt table.t td{padding-left:4px;padding-right:4px}
.lt table.t th:first-child,.lt table.t td:first-child{padding-left:0}
.lt table.t th:last-child,.lt table.t td:last-child{padding-right:0}
table.t td .s{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
table.t td .s.urgent{color:var(--wait);font-weight:600}   /* a date with gaps inside the gap notice's window */
table.t td b{font-weight:600}
table.t tr.sub td{background:var(--sunk);font-size:12.5px}
table.t tr.sub td .k{color:var(--ink-3)}
table.t tr.sub td > *{max-width:calc(100vw - 2 * var(--pad))}  /* a slot's detail stays on screen in a wide table */

/* DdW: one name per line; a free name from the old list carries the unconfirmed colour on its state word */
.dn{display:block;white-space:nowrap}
.dn .unc{color:var(--unconf);font-weight:600}
table.t td .dn.k,table.t td .k{color:var(--ink-3)}
table.t td .st{margin-top:4px}
.in.wide{flex:1;min-width:220px}
.inl{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.wrapx{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* a length bar inside a cell — one hue, never categorical */
.q{display:block;height:4px;background:var(--sunk-2);margin-top:5px;max-width:170px}
.q i{display:block;height:100%;background:var(--line-2)}
tr.me .q i{background:var(--id)}

/* gap notice: free sales slots soon. Orange edge + tint, text carries it. */
.gap{margin-top:16px;padding:11px 13px;border:1px solid var(--wait-line);border-left:4px solid var(--wait);
  background:var(--wait-bg)}
.gap b{display:block;color:var(--wait);font-size:13.5px}
.gap .s{display:block;margin-top:4px;font-size:12.5px;color:var(--ink)}
.gap .bs{margin-top:10px}
/* on Home only one line, its button the way to Verkauf (as a Home section's): no tint, a thin edge */
.gap.one{display:flex;align-items:center;gap:12px;background:none;border-left-width:3px;padding:8px 12px}
.gap.one b{font-weight:600;font-size:13px}
.gap.one .go{margin-left:auto;flex:none;white-space:nowrap}
.gap.one .gt{min-width:0}                        /* how many on top, when below — two lines on purpose */
.gap.one .gt .s{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}

/* a slot inside a table cell: the name, or "frei". One per line. */
.rl{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.rl ~ .rl{margin-top:8px}   /* stacked roles in one cell (salesCols): each under its name */
.sl{display:block;width:100%;text-align:left;margin-top:3px;padding:4px 7px;min-height:30px;
  border:1px solid var(--line);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
td>.sl:first-child{margin-top:0}
button.sl:hover{border-color:var(--line-2)}
.sl.free{color:var(--ink-2);border-style:dashed;border-color:var(--ink-3)}   /* free: as readable as a name, the dashed edge says so */
.sl.free.urgent{color:var(--wait);border-color:var(--wait)}  /* the gap notice's slots */
.sl.pend{color:var(--ink);border-color:var(--wait-line);border-left:3px solid var(--wait);
  background:repeating-linear-gradient(135deg,var(--wait-bg) 0 5px,var(--bg) 5px 10px)}   /* asked, not yet confirmed: hatched, an orange edge */
.sl.pend .stw,.sl.pend:not(.unconf){font-weight:400}
.sl.pend:not(.unconf) .stw{color:var(--wait);font-weight:600}
/* free name, nobody from the squad yet: grey name, yellow dashed border and state word */
.sl.pend.unconf{color:var(--ink-2);border:1px dashed var(--unconf);background:none}
.sl.pend.unconf .stw{color:var(--unconf);font-weight:600}
.sl.mine{background:var(--id-bg);border-color:var(--id);font-weight:600}
.sl[aria-expanded="true"]{outline:2px solid var(--ink);outline-offset:-1px}
.in{border:1px solid var(--line-2);padding:6px 9px;font:inherit;min-height:36px;background:var(--bg);
  color:var(--ink);border-radius:0;min-width:0;max-width:100%}
@media (max-width:919px){.in{min-height:44px}}
table.t td .in{width:100%;min-width:92px}

/* Verkauf: the link for the WhatsApp group — the address and the message as it will arrive */
.share{margin-top:12px;padding:12px 13px;border:1px solid var(--line-2);background:var(--sunk);max-width:46rem}
.share .note:first-child{margin-top:0}
.share .k{margin-top:12px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
.share .url{display:block;width:100%;margin-top:5px}
.share .msg{margin-top:5px;padding:9px 11px;background:var(--bg);border:1px solid var(--line);
  white-space:pre-wrap;overflow-wrap:anywhere}

/* The page behind the link: the record without the office around it */
.lp .rail,.lp .bar{display:none}
.lp main{margin:0 auto;max-width:760px}
.lhead{padding:22px 0 4px;border-bottom:1px solid var(--line)}
.lhead .wm .word{max-width:170px}
.lhead h1{margin:18px 0 4px;font-size:20px;letter-spacing:-.01em}
.lhead p{margin:0 0 14px;color:var(--ink-2);max-width:40rem}
table.t td .in[type="date"]{min-width:140px}

/* ---------- status ---------- */
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  border:1px solid var(--line-2);padding:1px 6px;color:var(--ink-2);white-space:nowrap}
/* a fine's amount and its state (Kasse): right, in one line where it fits — the amount outermost, the state
   wraps under it on a narrow screen */
.etag{display:flex;flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:4px 8px}
.etag>span:first-child{min-width:3.6em;text-align:right;font-variant-numeric:tabular-nums}   /* every amount as wide: the states line up */
/* on the phone the state goes under the amount: a narrow column, the text keeps the width */
@media (max-width:600px){.etag{flex-direction:column;align-items:flex-end;flex-wrap:nowrap}.etag .st{white-space:normal;text-align:right;max-width:7.5em}}
.st.ok{color:var(--ok);border-color:var(--ok-line)}
.st.bad{color:var(--bad);border-color:var(--bad-line)}
.st.wait{color:var(--wait);border-color:var(--wait-line)}
.st.src{border-style:dashed;color:var(--ink-3);font-weight:500}

/* ---------- figures row ---------- */
/* the Strafenkasse above the figures: the total big, a bar paid · open, the split under it */
.till{border:1px solid var(--line);border-bottom:0;margin-top:14px;padding:13px 13px 12px}
.till+.figs{margin-top:0;grid-template-columns:repeat(2,1fr)}   /* two figures under it, at every width */
.till+.figs .f:last-child{border-right:0}
.till .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.till .v{font-size:30px;font-weight:700;letter-spacing:-.02em;margin-top:3px;line-height:1.1;font-variant-numeric:tabular-nums}
.till .v small{font-size:13px;color:var(--ink-3);font-weight:400;letter-spacing:0}
.tbar{display:flex;gap:2px;height:10px;margin-top:10px}
.tbar i{display:block;height:100%}
.tsplit{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12.5px;color:var(--ink-2)}
.tsplit>span{display:inline-flex;align-items:center;gap:6px}
.tsplit b{color:var(--ink);font-variant-numeric:tabular-nums}
.tsplit>span:last-child{flex-basis:100%;color:var(--ink-3);font-size:11.5px}
/* a running Abrechnung (Kasse): its line highlighted, orange — red once the deadline is past */
p.due{padding:8px 11px;border-left:3px solid var(--wait);background:var(--wait-bg)}
p.due.bad{border-left-color:var(--bad)}
p.due .st{border:0;padding:0;font-size:inherit}
p.due .dueln{display:block;font-size:13px;margin-top:3px}   /* the second line: days left and the Abrechnung's date */   /* the days left as words in the line, not a box in the box */
.figs{display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);margin-top:14px}
@media (min-width:700px){.figs{grid-template-columns:repeat(4,1fr)}}
.figs .f{padding:11px 13px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
button.f{background:none;border-top:0;border-left:0;font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;display:flex;flex-direction:column;justify-content:flex-start}   /* Home: a figure that opens its page */
.figs.mine .f{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}   /* label, number, note: each on one line across the row, however long the label */
.figs .f:nth-child(2n){border-right:0}
@media (min-width:700px){.figs .f{border-right:1px solid var(--line);border-bottom:0}
  .figs .f:last-child{border-right:0}.figs .f:nth-child(2n){border-right:1px solid var(--line)}}
.figs .l{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.figs .v{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:3px;line-height:1.1}
.figs .v small{font-size:12.5px;color:var(--ink-3);font-weight:400}
.figs .n{font-size:11.5px;color:var(--ink-3);margin-top:2px}

/* ---------- buttons ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;padding:0 13px;
  border:1px solid var(--line-2);font-size:12.5px;font-weight:600;background:var(--bg)}
.b.p{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
a.b{text-decoration:none}
.b[disabled]{opacity:.42;cursor:default}
.bs{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (max-width:919px){.b{min-height:44px}}

.field{display:block;margin-top:11px;max-width:26rem}
.field span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;margin-bottom:4px}
.field span em{font-style:normal;text-transform:none;letter-spacing:0}   /* a hint in the label, in normal case */
.field select,.field input{width:100%;border:1px solid var(--line-2);padding:8px 10px;font:inherit;
  min-height:40px;background:var(--bg);color:var(--ink);border-radius:0}
@media (max-width:919px){.field select,.field input{min-height:46px}}

/* ---------- menu, flash ---------- */
.menu{position:fixed;z-index:40;background:var(--bg);border:1px solid var(--line-2);min-width:210px;
  box-shadow:0 10px 32px var(--shadow);max-height:78vh;overflow:auto}
.menu button{display:block;width:100%;text-align:left;padding:10px 14px;font-size:13.5px;min-height:42px}
.menu button[aria-selected="true"]{background:var(--id-bg);font-weight:600}
.menu button:hover{background:var(--sunk)}
.menu .lbl{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  padding:10px 14px 3px;font-weight:700}
.menu .sep{height:1px;background:var(--line);margin:5px 0}

.flash{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--ink);color:var(--on-ink);
  padding:10px 16px;font-size:12.5px;opacity:0;pointer-events:none;transition:opacity .16s;z-index:50;
  max-width:calc(100vw - 32px)}
.flash.on{opacity:1}
@media (max-width:919px){.flash{bottom:calc(70px + env(safe-area-inset-bottom,0px))}}   /* above the bar at the bottom */

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

/* labels on a player: SpielerPlus plain, OanserHub's own marked with the club colour */
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.st.own{border-color:var(--id);color:var(--ink)}
.st .x{border:0;background:none;color:var(--ink-3);font:inherit;padding:0 0 0 6px;margin:0;cursor:pointer;line-height:1}
.st .x:hover{color:var(--ink)}
.chips select.in.sm{min-height:28px;padding:2px 6px;font-size:12px;width:auto}
button.st.sug{border-style:dashed;border-color:var(--id);background:none;font-family:inherit;cursor:pointer;color:var(--ink-2)}
button.st.sug:hover{color:var(--ink)}
td input.in.sub{display:block;margin-top:6px;font-size:13px;color:var(--ink-2)}
.chips .b.tog{min-width:0;padding:4px 8px;font-size:12px}
.ob{padding:14px 0 16px;border-bottom:1px solid var(--line)}
.ob .k{display:block;margin-top:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ob .bs{align-items:flex-end}
.ob .oh{flex:1;min-width:140px;font-size:13.5px}
.ob .oh .k{margin:0 0 6px}
.moving{margin-top:12px;padding:10px 13px;border:1px solid var(--line-2);border-left:4px solid var(--ink);background:var(--sunk)}
.moving b{display:block;margin-bottom:2px}

/* Trainingsbeteiligung: the commit grid. A column per week, Monday on top;
   13px squares with a 3px gap, the whole thing scrolls sideways on its own. */
.calw{overflow-x:auto;margin-top:12px;padding-bottom:4px}
.cal{display:grid;grid-template-columns:22px auto;grid-template-rows:14px auto;column-gap:4px;width:max-content}
.cal .wd{grid-row:2;display:grid;grid-template-rows:repeat(7,13px);row-gap:3px;font-size:10px;color:var(--ink-3);line-height:13px}
.cal .ms{grid-column:2;display:grid;grid-template-columns:repeat(var(--weeks),13px);column-gap:3px;font-size:10px;color:var(--ink-3);white-space:nowrap}
.cal .grid{grid-column:2;display:grid;grid-template-rows:repeat(7,13px);grid-auto-flow:column;grid-auto-columns:13px;gap:3px}
.c{display:inline-block;width:13px;height:13px;border-radius:3px;background:var(--sunk-2)}
.c.l0{background:var(--sunk)}
.c.l1{background:var(--cal-1)}
.c.l2{background:var(--cal-2)}
.c.l3{background:var(--cal-3)}
.c.l4{background:var(--cal-4)}
.c.ln{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--cal-2)}   /* a training without an answer */
.c.lm{background:repeating-linear-gradient(135deg,var(--cal-4) 0 2px,var(--cal-1) 2px 4.5px)}   /* unsicher: hatched, between yes and no */
.c.out{background:none}
.cal .c[data-cal]{cursor:pointer}
.cal .c.on{outline:2px solid var(--ink);outline-offset:1px}
.calkey{display:flex;flex-wrap:wrap;align-items:center;gap:5px 6px;margin-top:10px;font-size:11.5px;color:var(--ink-3)}
.calkey span:not(.c){margin-right:6px}

/* All players × trainings: names pinned on the left while the trainings scroll */
.mx{display:grid;grid-template-columns:118px repeat(var(--days),13px) 44px;gap:3px;width:max-content;align-items:center}
.mx .nm{position:sticky;left:0;z-index:1;background:var(--bg);align-self:stretch;min-height:13px;font-size:11.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;padding-right:6px;line-height:13px}
.mx .nm.me{font-weight:700}
.mx .m,.mx .d{font-size:9.5px;color:var(--ink-3);text-align:center;white-space:nowrap;line-height:12px}
.mx .m{text-align:left;overflow:visible}
.mx .qt{font-size:11px;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.mx .c[data-cal]{cursor:pointer}
.mx .c.on{outline:2px solid var(--ink);outline-offset:1px}

/* A section without data yet: a visible, labelled placeholder (docs/02-brand.md) */
.soon{margin-top:18px;padding:22px 16px;border:1.5px dashed var(--line-2);background:var(--sunk);max-width:46rem}
.soon b{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.soon span{display:block;margin-top:6px;color:var(--ink-2)}

/* A number that unfolds its entries: looks like the number, underlined to show it opens */
.lnk{font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--line-2);padding:6px 4px;margin:-6px 0;min-width:32px}   /* big to tap, level with its row */
.lnk[aria-expanded="true"]{text-decoration-color:var(--ink)}
/* The days behind a DdW Teilnahmen count */
.days{list-style:none;margin:6px 0 0;padding:0}
.days li{padding:3px 0;border-top:1px solid var(--line)}
.days li > span:first-child{display:inline-block;min-width:74px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.days li.add{background:var(--sunk);box-shadow:inset 3px 0 0 var(--wait);padding-left:8px}   /* Depp without a Zusage: counted, marked */
.days li.add .k{display:block;font-size:11.5px;color:var(--ink-3)}
/* Stufen: one line per player — name, then the step and its date as plain text in fixed,
   right-aligned columns, so they line up from line to line and Amt to Amt */
.hls{display:block}
.hl{display:flex;align-items:baseline;gap:8px;padding:1px 0}
.hl .hnm{flex:1;white-space:nowrap}   /* never broken inside a name — and so the table gives the column its width */
.hl .hs{width:2ch;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.hl .hd{width:6.5ch;text-align:right;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.hl .hx{width:16px;text-align:center}
.hl .x{border:0;background:none;color:var(--ink-3);font:inherit;padding:0;cursor:pointer;line-height:1}
.chips + .hls{margin-top:6px}
.steplog{display:block;margin-top:6px}
.steplog span{display:block;color:var(--ink-3);font-size:11.5px;white-space:normal}
.mx .tot{border-top:1px solid var(--line-2);padding-top:4px;font-weight:600;color:var(--ink);align-self:stretch}
.mx .d.tot{font-size:10px;text-align:center}

/* Strafenkatalog: one heading per section of the team's catalogue */
h3.cat{margin:20px 0 0;font-size:13.5px;font-weight:700;color:var(--ink)}
h3.cat + .note{margin-top:4px}
/* DdW Rangliste: below the line, those not yet qualified for the year-end list */
table.t tr.cut td{padding-top:14px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-top:2px solid var(--line-2)}
table.t tr.unq td{color:var(--ink-2)}

/* Strafe melden: a long catalogue in a narrow field — smaller type, the full choice spelled out below */
.rules{margin-top:10px;max-width:26rem;font-size:12px;color:var(--ink-3)}
.rules summary{cursor:pointer;color:var(--ink-2);padding:7px 0}   /* keeps the native ▸ that says it opens */
.rules p{margin:4px 0 0}
/* the Strafe picker: a button that reads like the field, a searchable list under it */
/* Melden, several at once: the count of the Grund, further ones under it, each with − n + and × */
.fxl{margin:10px 0 14px;border-top:1px solid var(--line)}   /* the Gründe: a list of their own under the picker, not glued to it */
.fxr{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.fxr > span:first-child{flex:1;min-width:0}
.fxr > b{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.fxr .k{color:var(--ink-2)}
.fxa{display:flex;gap:18px;flex-wrap:wrap}
.stp{display:inline-flex;align-items:center;gap:6px;flex:none}
.stp .b{min-height:32px;min-width:32px;padding:0}
.stp b{min-width:1.4em;text-align:center;font-variant-numeric:tabular-nums}
.fxr .x{flex:none;font-size:18px;color:var(--ink-3);padding:4px 6px}
.fxl .tl{margin:10px 0 0}
.fxsum{margin-top:6px}
.pickbtn{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:1px solid var(--line-2);
  padding:9px 10px;min-height:46px;background:var(--bg);font-size:13px}
.pickbtn span{flex:1}
.pickbtn .ph{color:var(--ink-3)}
.pickbtn b{white-space:nowrap;font-variant-numeric:tabular-nums}
.pickbtn::after{content:"▾";color:var(--ink-3);font-size:11px}
.pickbtn[aria-expanded="true"]{border-color:var(--ink)}
.picker{border:1px solid var(--ink);border-top:0;background:var(--bg);padding:8px}
.picker .in{width:100%}
/* the catalogue's own search, the same field as in the picker */
#catQ{width:100%;margin:2px 0 4px}
#fCatList{max-height:55vh;overflow-y:auto;margin-top:6px}
.pkh{position:sticky;top:0;background:var(--sunk);padding:5px 8px;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);font-weight:700}
.pk{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;padding:8px;min-height:40px;
  border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.35}
.pk span{flex:1;color:var(--ink)}
.pk b{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--ink-2);font-weight:600}
.pk:hover,.pk[aria-selected="true"]{background:var(--id-bg)}
/* the field's label style (small caps) must not reach the texts inside the picker */
.field .pickbtn span,.field .pk span{display:block;font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--ink);margin:0}
.field .pickbtn .ph{color:var(--ink-3)}
/* Wer: ticks for one, some or all */
.wlist{max-height:50vh;overflow-y:auto;margin-top:8px}
.wk{display:flex;align-items:center;gap:10px;padding:8px 6px;min-height:40px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}
.field .wk span{display:inline;font-size:inherit;letter-spacing:normal;text-transform:none;color:var(--ink);margin:0}
.field .wk input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--ink)}
table.t tr.tot td{border-top:2px solid var(--line-2);font-weight:600}
.nmfold{font:inherit;text-align:left;padding:6px 0;margin:-6px 0;color:var(--ink)}   /* the name opens its entries */
.nmfold span{color:var(--ink-3);font-size:11px}

/* Summe je Spieler: horizontal bars from one baseline — one grey, the own bar in the identity colour */
.bars{margin-top:10px}
.barrow{display:grid;grid-template-columns:minmax(0,104px) 1fr 52px;align-items:center;gap:8px;width:100%;
  padding:3px 0;min-height:26px;text-align:left;font-size:12px}
.barrow .bn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.barrow .bn{display:flex;align-items:center;gap:4px}
.barrow .bn .bnm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}   /* the step box at the column's end: aligned */
/* a Stufe beside the name: a small outlined box — not money, a warning of what the next one costs */
.stb{flex:none;font-size:12px;font-weight:700;line-height:1;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.calkey .stb{margin-right:0}
.stepl{margin:6px 0 8px;font-size:12.5px}
.stepl table.t td small{display:block;color:var(--ink-3);font-size:11.5px}
.stepl table.t td:last-child{width:1%}
.stepl .b{min-height:30px;font-size:12px;padding:0 10px}
.stepl table.t th,.stepl table.t td{padding-left:6px;padding-right:6px}   /* five columns on a narrow phone: the −1 stays on screen */
.stepl table.t th:first-child,.stepl table.t td:first-child{padding-left:0}
.stepl table.t th:last-child,.stepl table.t td:last-child{padding-right:0}
.stepl table.t th{letter-spacing:.04em}
.barrow .bn .ar{color:var(--ink-3);font-size:10px}                 /* Strafen: the row opens its entries */
/* a player's Strafen opened under his bar */
.pfold{margin:2px 0 14px;padding:8px 0 0 12px;border-left:2px solid var(--line-2)}
.pfold>.s{margin:0;font-size:12px;color:var(--ink-2)}
.pfold .bs{margin-top:8px}
.pfold table.t{margin-top:6px;font-size:12.5px}
.barrow .bt{height:22px;display:flex;align-items:center;border-left:1px solid var(--line-2)}   /* the baseline */
.barrow .bt i{display:block;height:14px;background:var(--cal-3);border-radius:0 4px 4px 0}
.barrow.me .bt i{background:var(--id)}
.barrow .bv{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap;text-align:right}   /* the numbers line up on the right */
.barrow:hover .bt i,.barrow.on .bt i{background:var(--ink)}
.barrow.on .bn{color:var(--ink);font-weight:600}

/* Strafenkatalog: a deactivated Strafe stays listed, greyed — the rule stands, the Kasse is not involved */
table.t tr.off td{color:var(--ink-3)}
/* a past date (Verkauf, B&B): faded, names and slots too — the next one is the first row in full ink */
table.t tr.past td,table.t tr.past .s{color:var(--ink-3)}
table.t tr.past .sl{color:var(--ink-3);background:none;border-color:var(--line);font-weight:400}
/* today's line between past and coming dates (nowRow): only a dark rule */
table.t tr.now td,table.t tbody tr.now:hover td{padding:0;border-top:2px solid var(--ink);border-bottom:0;background:none}
.b.tog{min-width:96px;font-weight:500}
.b.tog[aria-pressed="false"]{border-style:dashed;color:var(--ink-3)}   /* the exception is the one that should catch the eye */

/* Katalog and Verwalten: many small tables, one per section — the same fixed columns
   for all of them, so prices and switches sit in one line from top to bottom */
.al table.t{table-layout:fixed;width:100%}
.al.al2 table.t th:nth-child(2){width:130px}
.al.al3 table.t th:nth-child(2){width:130px}
.al.al3 table.t th:nth-child(3){width:124px}
@media (max-width:600px){.al.al2 table.t th:nth-child(2),.al.al3 table.t th:nth-child(2){width:96px}.al.al3 table.t th:nth-child(3){width:112px}}

/* Kisten je Spieler: a stacked bar — open dark (still to bring), brought light; a 2px gap between the parts */
.barrow .bt.stack{gap:2px}
.barrow .bt.stack i{border-radius:0}
.barrow .bt.stack i:last-child{border-radius:0 4px 4px 0}
.barrow .bt.stack i.d,.barrow .bt.stack i.n,.barrow .bt.stack i.v{min-width:7px;flex-shrink:0}   /* a few € open still show next to 200 paid */
.barrow .bt i.o,.c.bo,.tbar i.o{background:var(--cal-4)}
.barrow .bt i.d,.c.bd,.tbar i.d{background:var(--cal-1)}
.barrow.on .bt i.o{background:var(--ink)}
.barrow.on .bt i.d{background:var(--cal-2)}
.barrow:hover .bt.stack i.o{background:var(--cal-4)}
.barrow:hover .bt.stack i.d{background:var(--cal-2)}

/* Wer, one player (the normal case): a plain list — tap and done; ticks, Keinen and Fertig only after "Alle" */
.picker.single .wk input,.picker.single [data-wnone],.picker.single [data-wdone]{display:none}
.picker:not(.single) [data-wmulti]{display:none}   /* already ticking */
.picker.single .wk:has(input:checked){background:var(--id-bg);font-weight:600}
.ppo{display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);
  padding:8px 6px;min-height:40px;cursor:pointer}            /* the player picker: one tap picks */
.ppo.on{background:var(--id-bg);font-weight:600}
.ppf{display:block;width:100%;text-align:left;font:inherit;font-size:13px;color:var(--ink);background:none;border:1px dashed var(--line-2);
  padding:8px 6px;min-height:40px;margin-top:6px;cursor:pointer}   /* a name of its own, not from the squad */
.pp{flex:1;min-width:0}
.b.danger{background:var(--bad);border-color:var(--bad);color:var(--on-wait)}   /* the one button that destroys */

/* a Verhandlung not yet held: counted at the minimum, marked until its amount is set */
.st.hear{color:var(--ink-2);border-style:dashed;border-color:var(--ink-3)}
.in.amt{width:90px;min-width:0}

/* the provisional part of a bar (a Verhandlung not yet held): the open tone, hatched — readable without colour */
.barrow .bt i.n,.c.bnx{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--cal-1)}
.barrow.on .bt i.n,.barrow:hover .bt.stack i.n{background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--cal-2)}
.t tr.eh td{font-size:12px;color:var(--ink-3);padding-top:10px;border-bottom:1px solid var(--line)}
.t tr.eh td.n{white-space:nowrap;color:var(--ink-2)}     /* a Kasse heading's sum (the Abrechnung's, the next one's) */
.barrow .bt i.v,.c.bv{background:repeating-linear-gradient(135deg,var(--cal-3) 0 3px,var(--bg) 3px 6px);box-shadow:inset 0 0 0 1px var(--cal-3)}
.barrow.on .bt i.v,.barrow:hover .bt.stack i.v{background:repeating-linear-gradient(135deg,var(--ink) 0 3px,var(--bg) 3px 6px)}
.in.miss{border-color:var(--wait);border-style:dashed}   /* a birthday still missing */
.dtb.miss b{color:var(--wait);text-decoration-color:var(--wait)}   /* Kader: a birthday still missing, as a link */

/* doubled (not paid by the deadline): marked firmly on the entry */
.raised{margin-top:2px;font-size:13px;color:var(--ink-2)}
.raised .lnk{font:inherit;color:var(--ink);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}
.al.albnb table.t th:nth-child(1){width:44%}   /* B&B: Hin- and Rückrunde, the same date column */
@media (min-width:700px){.al.albnb table.t th:nth-child(1){width:220px}}
table.t td .st.tagline{display:table;margin-top:8px;padding:2px 8px}   /* a state under the date, on its own line — not glued to it */
/* nuLiga: the season's address is long; a name waiting for its player */
.field.wide{max-width:46rem}
.nlname{align-self:center;min-width:160px;font-size:13.5px}
/* Spielbetrieb: scorers and Zeitstrafen side by side where there is room */
.nlcharts{display:grid;grid-template-columns:1fr;gap:0 32px}
@media (min-width:920px){.nlcharts{grid-template-columns:1fr 1fr}}
/* the total, then the average per game in its own column — both line up down the chart */
.barrow.wide{grid-template-columns:minmax(0,120px) 1fr 24px 48px}
.barrow.wide .bv{text-align:right}
.barrow .ba{font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap;text-align:right}
.barrow.head{min-height:0;padding:0 0 2px;cursor:default}
.barrow.head .ba{font-size:11px}
.ob .obh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ob .obh b{overflow-wrap:anywhere}
.ob.mine{background:var(--id-bg);padding-left:10px;padding-right:10px}
/* Zugänge: closed, a short line — the address and its roles */
.ob.acc{padding:11px 0 12px}
.ob.acc .obh{justify-content:flex-start}
.ob.acc > .s{display:block;margin:2px 0 0 1.3em;color:var(--ink-3);font-size:12px}
.ob.acc > .chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 0 1.3em}
/* an open picker lifts its search field to the top — the page needs room below for that */
body.picking main{padding-bottom:70vh}
/* the star behind a name: not in the Stammkader */
.xm{color:var(--ink-3);font-weight:600}
/* Liga: one small chart per team, two to a row on the phone. Goals solid, conceded dashed (so the
   pair never rests on colour alone), the gap a faint wash of ink; ours framed in the club colour. */
.lgkey{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin:4px 0 8px}
.lgkey span{display:inline-flex;align-items:center;gap:6px}
.lgkey i{display:inline-block;width:18px;height:0;border-top:2px solid var(--ink)}
.lgkey i.ka{border-top:2px dashed var(--ink-3)}
.lgkey i.kg{height:9px;border:0;background:var(--ink);opacity:.12}
.lg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:920px){.lg{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lgp{margin:0;border:1px solid var(--line);padding:7px 8px 6px}
.lgp.ours{border-color:var(--id);background:var(--id-bg)}
.lgp figcaption{font-size:12px;line-height:1.3;margin-bottom:4px;min-height:32px}
.lgp figcaption b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lgp figcaption .s{color:var(--ink-3);font-size:11.5px}
.lgp svg{display:block;width:100%;height:56px;overflow:visible}
.lgp .f,.lgp .a{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.lgp .f{stroke:var(--ink)}
.lgp .a{stroke:var(--ink-3);stroke-dasharray:4 3}
.lgp .g{fill:var(--ink);opacity:.12}
.lgp .hit{fill:transparent}
/* Umfragen: per answer its label and count, a thin bar below (one hue, from the left), the names
   under it where they are shown; after the end the leading answer in bold — never colour alone. */
.poll .pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;margin:10px 0 6px}
.pr .pl{overflow-wrap:anywhere}
.pr .pl.won{font-weight:700}
.pr .pc{font-variant-numeric:tabular-nums;text-align:right}
.pr .pb{grid-column:1/-1;height:6px;background:var(--line);margin-bottom:4px}
.pr .pb i{display:block;height:100%;background:var(--ink)}
.pr .pn{grid-column:1/-1;font-size:12px;color:var(--ink-3);margin:-2px 0 6px}
.lp .pr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;margin:14px 0 8px}
.b.sm{min-height:0;padding:2px 9px;font-size:12px}
/* names that voted over a poll's link: one slim line each, chips and a small list as on Ämter */
.lv{margin:10px 0 2px}
.lv .k{display:block;margin-bottom:4px}
.lvr{display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding:3px 0}
.lvr select.in.sm{min-height:28px;padding:2px 6px;font-size:12px;width:auto;max-width:60%}
.lvr button.st{cursor:pointer;font:inherit;font-size:11px;font-weight:600;background:none}
.lvr .st.sug{border-style:dashed;border-color:var(--id);color:var(--ink-2)}   /* still open, like a suggestion on Mannschaft */
/* the app's own question box (ask in app.js) instead of the browser's: same type, colours, buttons */
/* Neu in OanserHub: a news item as a card (page Neu) or in the popup — the screenshot on top, framed */
.nw{margin:18px 0;padding-bottom:18px;border-bottom:1px solid var(--line)}
.nwi{margin:0 0 10px;border:1px solid var(--line-2);border-radius:6px;overflow:hidden;background:var(--sunk)}
.nwi img{display:block;width:100%;height:auto}
.nwd{margin:0;font-size:12px;color:var(--ink-3)}
.nwt{margin:2px 0 6px;font-size:17px}
.nwb{margin:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
.nwa{margin-top:12px}
.nwx{margin-top:6px;font-size:13px;color:var(--ink-3)}
.nwh{margin:0 0 10px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.nwpop{max-width:420px;max-height:calc(100vh - 2 * var(--pad));overflow:auto}
.dlgb.nwpop .nwa{flex-direction:column;align-items:stretch;gap:8px}   /* in the popup: one button per line, full width, OK last */
.dlgb.nwpop .nwa .b{width:100%;justify-content:center;text-align:center}
.dlgb.nwpop .nwa .st{align-self:flex-start}
/* the Spielvideo over the page: dark around it, the video as wide as the screen allows, its own height kept */
.vpl{position:fixed;inset:0;z-index:60;background:#000;display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.vplb{width:100%;max-width:1100px;color:#fff}
.vplh{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:14px}
.vplh b{flex:1;font-weight:600;min-width:0}
.vplx{background:none;border:1px solid rgba(255,255,255,.5);color:#fff;min-width:40px;min-height:40px;font-size:16px;cursor:pointer}
.vplb video{display:block;width:100%;max-height:calc(100vh - 140px);background:#000}
.dlg{position:fixed;inset:0;z-index:50;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:var(--pad)}
.dlgb{background:var(--bg);color:var(--ink);border:1px solid var(--line-2);box-shadow:0 10px 30px var(--shadow);
  width:100%;max-width:420px;padding:18px 18px 14px}
.dlgb p{margin:0 0 12px;font-size:14.5px;line-height:1.45}
.dlgb .in{width:100%;margin-bottom:4px}
.dlgb textarea.in{min-height:110px;resize:vertical;font:inherit;padding:8px 10px}   /* Feedback */
.dlgb .field{margin-top:8px}
.dlgb .bs{justify-content:flex-end;margin-top:10px}
.dlgc{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.dlgc label{display:flex;gap:8px;align-items:center;font-size:14.5px}
.dlgc label input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ink)}
.dlgc .in[hidden]{display:none}
/* the login page (login/): one narrow column, the logo on top, on the plain page ground */
.login{display:flex;justify-content:center;padding:0 var(--pad)}
.lgn{width:100%;max-width:380px;margin:10vh 0 40px}
.lgn .brand{margin-bottom:26px}
.lgn h1{font-size:26px;margin:0 0 6px}
.lgn p{margin:0 0 14px;color:var(--ink-2)}
.lgn .field{display:block;margin-bottom:12px}
.lgn .in{width:100%;font-size:16px}       /* 16px: iOS does not zoom into the field */
.lgn .b.p{width:100%;justify-content:center;min-height:44px}
.lgn #lerr{color:var(--bad);min-height:1.4em}
.lgn.privacy{max-width:560px;margin-top:6vh}     /* the privacy notice: longer text than the login, still one column */
.lp main>.lgn{margin-left:auto;margin-right:auto}  /* notice and waiting page: centred in the app's column */
.lgn.privacy .bs{flex-direction:column;gap:8px;margin-top:22px}
.lgn.privacy .b{width:100%;justify-content:center;min-height:44px}
div.privacy h3{margin:6px 0 4px}                 /* the same text under Einstellungen */
div.privacy p{margin:0 0 8px;color:var(--ink-2)}
/* head to head: the goal difference per game, oldest left — above the line won, below lost (the
   direction tells it, not the colour); a draw a short tick on the line */
.h2c{margin:6px 0 4px;overflow-x:auto}
.h2c svg{display:block;height:72px;width:100%;min-width:min(100%,420px)}
.h2c line{stroke:var(--line-2);stroke-width:1}
.h2c rect.win{fill:var(--ink)}
.h2c rect.loss{fill:var(--ink-3)}
.h2c circle.draw{fill:var(--bg);stroke:var(--ink-2);stroke-width:1.5}
.h2c figcaption{font-size:11.5px;color:var(--ink-3)}
/* head to head on the phone: the arrow beside the name, the record never broken */
/* a team's games: the grey block starts at the team column, the place column stays clear */
.lt table.t tr.sub td.ltgap,.lt table.t tbody tr.sub:hover td.ltgap{background:transparent;border-bottom-color:transparent}
.lt table.t tr.sub td.ltgap + td{padding-left:8px}
.lt table.t tr.sub td:last-child{padding-right:8px}
.lt .nmfold{display:inline-flex;align-items:baseline;gap:5px}
.lt .nmfold .ar{flex:none;width:.8em;color:var(--ink-3)}
.h2h td.rec{white-space:nowrap;font-variant-numeric:tabular-nums}
.h2h .recb{font:inherit;color:inherit;text-align:right;padding:0}
.h2h .recb .tl{display:block;margin:4px 0 0;font-size:12.5px}   /* "▾ Bilanz" under the bars it opens */
.tn{font:inherit;color:var(--ink);text-align:left;padding:0;text-decoration:underline;text-decoration-color:var(--line-2);
  text-decoration-thickness:1px;text-underline-offset:3px}      /* a team's name: into its row of the table */
.tn:hover{text-decoration-color:var(--ink-3)}
/* S-U-N as three tiny columns (won dark, draw a hollow outline, lost grey — the order and the count
   below carry it too), goals for and against as two thin bars with their numbers */
.sun{display:inline-flex;align-items:flex-end;gap:3px;height:34px}
.sun .sc{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:13px;height:100%}
.sun i{display:block;width:8px;box-sizing:border-box}   /* height in px from app.js: 22px is the most games of any opponent */
.sun i.w{background:var(--ink)}
.sun i.d{border:1.5px solid var(--ink-2);background:none}
.sun i.l{background:var(--ink-3)}
.sun small{font-size:10.5px;line-height:1.2;color:var(--ink-2);margin-top:2px}
.gb{display:grid;grid-template-columns:minmax(0,1fr) 3.2em;gap:3px 8px;align-items:center}
.gb .gt{display:block;height:4px}
.gb i{display:block;height:4px;min-width:1px}
.gb i.f{background:var(--ink)}
.gb i.a{background:var(--ink-3)}
.gb small{font-size:10.5px;line-height:1;color:var(--ink-3);font-variant-numeric:tabular-nums;text-align:right}
/* the goal bars' own row: one block with the row above — no line between them */
.h2h tr:has(+ tr.gbr) td{border-bottom:0;padding-bottom:2px}
.h2h tr.gbr td{padding-top:0}
/* an away hall's address in the game's "where" line (.s), and right behind the town two quiet text links: copy, Google Maps */
.tl{font-size:inherit;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;margin-left:8px;padding:2px 0;white-space:nowrap}
.tl:hover{color:var(--ink)}
.lks{white-space:nowrap}   /* a game's links on one line of their own, the first one at the start */
.lks .tl{margin-left:7px}
.lks .tl:first-child{margin-left:0}
.vday{display:inline-flex;flex-direction:column;align-items:center}   /* the date with the Video box centred under it */
.vbtn{display:flex;align-items:center;justify-content:center;margin-top:6px;width:36px;height:22px;padding:0;border:0;border-radius:4px;
  background:var(--ink);color:var(--bg);font-size:10px;line-height:1;cursor:pointer}   /* the Video: a dark box with ▶ under the game's date */
.vbtn:hover{opacity:.85}
.ha{display:inline-block;min-width:4.4em}
.hs{display:inline-block;width:1.4em}   /* H / A before the opponent, one width: the names line up */   /* Heim / Auswärts, one width: the Bogen link after it lines up */
span.tl{text-decoration:none}                    /* the source without an address: no link to show */
.adr .tls{display:block;white-space:nowrap}      /* copy and Maps always on their own line under the address — */
.adr .tls .tl:first-child{margin-left:0}         /* the same on Home and on the Spielplan, whatever the width */
.sec .r .tl{margin-left:14px;padding:6px 0}      /* a nuLiga section's header: nuLiga ↗ — taller to tap */
.sec .r .go{margin-left:12px}                    /* a Home section's button to its full page (goBtn) */
/* a small table of label and value, without a header (Einstellungen → Zugang) */
.kv thead{display:none}
.kv td:first-child{white-space:nowrap;color:var(--ink-3);width:1%}
/* a switch as a tick with its label (Administration: nuLiga automatisch) */
.chk{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13.5px;cursor:pointer}
.chk input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--ink)}
.num{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:13.5px}
.num input{width:4.5em;flex:none;text-align:right}
.adrwarn{display:block;margin-top:5px;font-size:12px;font-weight:600;color:var(--wait)}   /* SpielerPlus names another place */
/* the Spielplan's divider between Hin- and Rückrunde: a heading inside the table, like .sec, the count at the right */
table.t tr.rd td{padding:22px 0 7px;border-bottom:1px solid var(--line-2);background:none}
table.t tr.rd td span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:700}
table.t tr.rd td span + span{float:right;letter-spacing:0;font-weight:400;font-size:12px;color:var(--ink-3)}
table.t tbody tr.rd:hover td{background:none}
/* the games against one opponent: one line each, in columns that never wrap */
.h2l{list-style:none;margin:6px 0 0;padding:0}
.h2l li{display:grid;grid-template-columns:5.6em minmax(0,1fr) 1.6em 3.6em 1.4em;gap:8px;align-items:baseline;
  padding:4px 0;border-top:1px solid var(--line);white-space:nowrap;font-variant-numeric:tabular-nums}
.h2l li > span:nth-child(2){overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.h2l li > span:first-child{color:var(--ink-2)}
.h2l b{text-align:right}
.h2l .o{text-align:center;font-weight:600}
.h2l .o.loss{color:var(--ink-3)}
/* Dokumente: the list, and a PDF page by page — each page a canvas the column's width; until drawn a
   placeholder of the page's proportions, so the page does not jump while scrolling */
.doclist{list-style:none;margin:0;padding:0}
.doclist li{padding:10px 0;border-bottom:1px solid var(--line)}
.doclist .s{display:block;color:var(--ink-3);font-size:12px;margin:2px 0 6px}
.doclist .lnk{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.pdfv{margin-top:8px}
.pdfp{margin:0 0 12px;width:100%;background:#fff;box-shadow:0 1px 4px var(--shadow);border:1px solid var(--line)}
.pdfp canvas{display:block;width:100%;height:auto}   /* its own proportions: never stretched */
.pdfp:not(.drawn) canvas{height:100%}
/* on Home, right under the next game: no header row of its own — it belongs to the line above */
.phys li{display:flex;align-items:flex-start;gap:8px;padding:6px 0}   /* the day on the left, its times below each other beside it */
.phys li > span:first-child{min-width:74px;padding-top:2px}
.phys .chips{margin-top:0;flex-direction:column;align-items:flex-start;gap:3px}   /* a day's slots one below the other */
/* catalogue editor: a form under the row it edits; a proposal's changes, one line each */
.cform{background:var(--sunk);padding:10px 12px;margin:6px 0 10px}
.cform .field{display:block;margin-bottom:8px}
.cform .in{width:100%}
.cform .bs .field{flex:1;min-width:120px}
.chg{list-style:none;margin:8px 0;padding:0}
.chg li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:2px 10px;padding:7px 0;border-top:1px solid var(--line)}
.chg .ty{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.chg .wh .s{display:block;color:var(--ink-3);font-size:12px}
.chg .bs{grid-column:2;margin:4px 0 0}
.chg li.reject .wh{text-decoration:line-through;color:var(--ink-3)}

/* ---------- Kalender ----------
   A month: the week number, then seven days; each week a grid of its own whose first row is the
   day number and the rest lanes for the bars. The day buttons span the whole week row; the bars
   lie on top of them. */
/* training and game: the club's gold as a stripe, the kind is the label (a game in bold, away with a
   dashed stripe); the chosen player's answer sets how strong it reads */
.k-training,.k-game{--kc:var(--id);--kx:var(--ink)}
.k-event{--kc:var(--k-event);--kx:var(--kx-event)}       /* anything else: petrol */
.calbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:14px}
.calbar .calm{font-size:17px;min-width:9.5em;text-align:center;letter-spacing:-.01em}
.calbar .b{min-width:40px}
.calspan{display:none;gap:4px;margin-left:auto}
@media (min-width:920px){.calspan{display:inline-flex}}


.cals{display:grid;gap:22px;margin-top:12px}
.cals.n3,.cals.n6{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px}
.calg{--dh:20px;--bh:17px;border-top:1px solid var(--line-2)}
.calg.sm{--dh:17px;--bh:13px}
.calt{font-weight:700;font-size:13.5px;padding:6px 0 4px}
.calw{display:grid;grid-template-columns:22px repeat(7,minmax(0,1fr));column-gap:1px;border-bottom:1px solid var(--line);min-height:44px}
.calg.sm .calw{grid-template-columns:18px repeat(7,minmax(0,1fr));min-height:30px}
.calw.calh{min-height:0;border-bottom:1px solid var(--line-2);font-size:10.5px;font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;text-transform:uppercase}
.calw.calh span{padding:5px 0 4px;text-align:center}
.calw .kw{grid-row:1 / -1;grid-column:1;font-size:9.5px;color:var(--ink-3);padding-top:4px;text-align:center;
  border-right:1px solid var(--line)}
.calw.calh .kw{padding:5px 0 4px;letter-spacing:0}
.cd{grid-row:1 / -1;display:flex;align-items:flex-start;justify-content:space-between;gap:2px;padding:2px 3px 0;
  background:none;border:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-width:0;border-radius:0}
.cd b{font-size:12px;font-weight:600;line-height:16px;min-width:18px;height:18px;text-align:center;border-radius:9px}
.calg.sm .cd b{font-size:10.5px;line-height:15px;height:15px;min-width:15px}
.cd small{font-size:9.5px;color:var(--ink-3);line-height:16px}
.cd.out{background:var(--sunk)}
.cd.out b{color:var(--ink-3);font-weight:400}
.cd.now b{background:var(--ink);color:var(--on-ink)}
.cd.sel{box-shadow:inset 0 0 0 2px var(--ink)}
.cd.abs{background-image:repeating-linear-gradient(135deg,transparent 0 5px,var(--line-2) 5px 6px)}
.cd:hover{background-color:var(--sunk-2)}
/* a bar is its text, in its kind's colour, with a thin stripe in front — an event over several days
   also underlined across them. On the phone it wraps (up to three lines, hyphenated) instead of
   being cut with "…", as phone calendars do */
.cb{position:relative;z-index:1;margin:0 0 1px;padding:0 1px 0 3px;overflow:hidden;min-width:0;cursor:pointer;
  font-family:"Roboto Condensed",sans-serif-condensed,"Avenir Next Condensed","Arial Narrow",system-ui,sans-serif;font-stretch:condensed;
  font-size:11px;line-height:12px;font-weight:600;letter-spacing:-.01em;color:var(--kx);border-left:2px solid var(--kc);
  white-space:normal;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto}
.cb .ct{display:block;max-height:calc(3 * 12px);overflow:hidden}
.cb .cn{display:flex;gap:3px;font-size:9.5px;line-height:11px;font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:0;margin-top:1px}
.cb.a-no .cn{opacity:.7}
.cb.span{border-bottom:2px solid var(--kc)}
.cb.k-game{font-weight:700}
.cb.k-training{font-weight:500}
.cb.a-maybe{color:var(--ink-2)}
.cb.k-event.a-maybe{color:var(--kx);opacity:.75}
.cb.a-no{color:var(--ink-3);border-left-color:var(--line-2);font-weight:400}
.cb.a-no.span{border-bottom-color:var(--line-2)}
.calg.sm .cb{font-size:9.5px;line-height:12px;white-space:nowrap}
.calg.sm .cb .ct{max-height:12px}
.cb.k-away{border-left-style:dashed}      /* an away game: its stripe dashed */
.cb.cont{border-left-style:dotted}
.cb.more{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 6px),transparent)}
.cb.x{text-decoration:line-through;color:var(--ink-3);border-color:var(--line-2)}
.cb i{font-style:normal;font-weight:800;font-size:10px;margin-right:1px}
.cb i.soft{opacity:.7}
.st-yes{color:var(--ok)}
.st-maybe{color:var(--wait)}
.st-no{color:var(--bad)}
@media (max-width:919px){
  .calpage .vh{padding-top:12px}
  .calpage .vh p{display:none}
  .calbar{margin-top:8px;gap:4px;flex-wrap:nowrap}
  .calbar .b{min-height:38px;min-width:38px;padding:0 10px}
  .calbar .calm{font-size:16px;flex:1;min-width:0}
  .calw{grid-template-columns:15px repeat(7,minmax(0,1fr));min-height:58px}
  .calw .kw{font-size:8.5px;padding-top:5px}
  .cd{padding:2px 1px 0}
}

/* the day under the calendar: its events as cards, each with who comes */
.ce{border:1px solid var(--line);border-left:4px solid var(--kc);padding:10px 12px;margin-top:8px}
.ce.k-away{border-left-style:dashed}
.ce.x .ceh b{text-decoration:line-through;color:var(--ink-3)}
.ceh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ceh .cet{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2);font-size:13px}
.ceh b{font-size:15px}
.ceh .src{margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.cem{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.cen{font-size:12.5px;color:var(--ink-2);margin-top:6px;white-space:pre-line;border-left:2px solid var(--line-2);padding-left:8px}
.cer{display:flex;align-items:center;gap:10px;margin-top:9px}
.cer .rb{display:flex;gap:2px;flex:1;height:8px;min-width:80px}
.cer .rb i{display:block;border-radius:2px}
.cer .rb .yes{background:var(--ok)}
.cer .rb .maybe{background:var(--wait)}
.cer .rb .no{background:var(--bad)}
.cer .rb .none{background:var(--line-2)}
.cer .rn{display:flex;gap:9px;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.cer .rn span:last-child{color:var(--ink-3)}
.cew{font-size:12.5px;margin-top:6px}
.cew small{color:var(--ink-3)}
.ce .bs{margin-top:8px}
.ce .bs .b{min-height:34px}
@media (max-width:919px){.ce .bs .b{min-height:40px}}
.cnl{font-size:12.5px;margin:8px 0 0;padding:6px 8px;background:var(--wait-bg);border-left:3px solid var(--wait)}
.cnl .b{margin-left:6px;min-height:30px}
.crl{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 16px;margin-top:10px}
.crl h4{margin:6px 0 2px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.crl ul{list-style:none;margin:0;padding:0;font-size:13px}
.crl li{padding:2px 0}
.crl li small{color:var(--ink-3);font-size:11px}
.crl li .s{display:block;color:var(--ink-3);font-size:11.5px}
.ce + .note,.crl + .note{margin-top:6px}
.cabs{font-size:12.5px;margin:10px 0 0;padding:8px 10px;background-image:repeating-linear-gradient(135deg,transparent 0 5px,var(--line) 5px 6px)}
.cabs .s{color:var(--ink-3)}
.cup{list-style:none;margin:6px 0 0;padding:0}
.cup button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 2px;border:0;border-bottom:1px solid var(--line);
  background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;min-height:44px}
.cup button b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cup button span:nth-child(2){font-variant-numeric:tabular-nums;color:var(--ink-2);min-width:5.5em;font-size:13px}
.cup .s{color:var(--ink-3);font-size:12px}
.cdot{width:10px;height:10px;background:var(--kc);flex:none}
.calform .field{max-width:none}
.calform .bs .field{min-width:110px}
.calform .chips .wk{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid var(--line-2);background:var(--bg)}
.calform .field.wk{display:flex;align-items:center;gap:8px}
.calform .field.wk span{display:inline;margin:0;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink)}
.calmin{max-width:8rem}
.calstd{align-items:flex-end}
.calstd > b{min-width:5.5em;padding-bottom:12px;font-size:13px}
.calstd .field{margin-top:0}
/* a tick inside a catalogue form (Kommentar Pflicht) */
.cform .field.wk{display:flex;align-items:center;gap:8px}
.cform .field.wk input{width:18px;height:18px;min-height:0;margin:0;flex:none;accent-color:var(--ink)}
.cform .field.wk span{display:inline;margin:0;font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink)}
/* the poll a link led to */
.ob.poll.focus{box-shadow:inset 4px 0 0 var(--id);padding-left:12px;background:var(--id-bg)}

/* a catalogue proposal as a diff (diffView): + new, − gone, a change as old line over new line */
.dsum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 4px;font-size:13px;font-weight:600}
.dmode{display:inline-flex;gap:4px;margin-left:auto}
.dmode .b.tog{min-width:0;min-height:32px;padding:0 10px;font-size:12px}
.dsec{margin-top:12px;border:1px solid var(--line)}
.dhead{padding:6px 10px;background:var(--sunk);font-weight:700;font-size:13px;border-bottom:1px solid var(--line)}
.dhead.add{background:color-mix(in srgb,var(--ok) 12%,var(--bg))}
ul.diff{list-style:none;margin:0;padding:0;font-size:13px}
.dl{display:flex;align-items:flex-start;gap:8px;padding:5px 8px 5px 0;border-top:1px solid var(--line)}
.dl:first-child{border-top:0}
.dg{width:22px;flex:none;text-align:center;font-weight:800;font-family:ui-monospace,Menlo,Consolas,monospace}
.dt{flex:1;min-width:0}
.dt .s{display:block;color:var(--ink-3);font-size:11.5px}
.dl.same{color:var(--ink-3)}
.dl.add,.dl.new{background:color-mix(in srgb,var(--ok) 10%,var(--bg))}
.dl.add .dg,.dl.new .dg{color:var(--ok)}
.dl.del,.dl.old{background:color-mix(in srgb,var(--bad) 9%,var(--bg))}
.dl.del .dg,.dl.old .dg{color:var(--bad)}
.dl.del .dx,.dl.old .dx{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 60%,transparent)}
.dl.old{border-top:1px solid var(--line)}
.dl.old + .dl.new{border-top:0}
.dl.reject{opacity:.45}
.dk{display:inline-flex;gap:4px;flex:none}
.dk .b{min-width:34px;min-height:30px;padding:0 8px;font-size:13px}
.dk .b[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.dfold{border:0;background:none;color:var(--ink-3);font:inherit;font-size:12px;padding:2px 0 2px 30px;cursor:pointer;text-decoration:underline}
@media (max-width:919px){.dk .b{min-height:38px}}
.dl mark{color:inherit;padding:0 2px;border-radius:2px}
.dl.old mark{background:color-mix(in srgb,var(--bad) 28%,var(--bg))}
.dl.new mark{background:color-mix(in srgb,var(--ok) 30%,var(--bg))}
.dhead .s{font-weight:400;color:var(--ink-3)}

/* Stufen im Verlauf (amtTimeline): per Amt a band over the time, darker the higher the step — the grey ramp
   of the Trainingsbeteiligung (--cal-*), the step also written in it; ticks for each Verstoß */
.tlc{margin-top:10px}
.tlax{position:relative;height:18px;margin-left:0;border-bottom:1px solid var(--line-2);font-size:10.5px;color:var(--ink-3)}
.tlax span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.tlax .tlnow{color:var(--ink);font-weight:700;top:-1px}
.tlr{padding:8px 0 6px;border-bottom:1px solid var(--line)}
.tln{font-size:13px;margin-bottom:5px}
.tln .s{color:var(--ink-3)}
.tlb{position:relative;height:20px;background:var(--sunk)}
.tlb .seg{position:absolute;top:2px;bottom:2px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;
  color:var(--ink);overflow:hidden}
.tlb .seg.s1{background:var(--cal-1)}
.tlb .seg.s2{background:var(--cal-2);color:var(--bg)}
.tlb .seg.s3,.tlb .seg.s4{background:var(--cal-3);color:var(--bg)}
.tlb .seg.fut{opacity:.45;outline:1px dashed var(--ink-2);outline-offset:-1px;color:var(--ink)}   /* the outlook: paler, dashed edge, number still legible */
.tlb .seg.fut.s2,.tlb .seg.fut.s3,.tlb .seg.fut.s4{color:var(--bg)}
.tlb .tick{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);z-index:1}
/* Protokoll: how much the app is used — a bar a day, one hue, the scale's top number at the left */
.ub{position:relative;display:flex;align-items:flex-end;gap:2px;height:96px;margin-top:10px;padding-left:22px;border-bottom:1px solid var(--line-2)}
.ub .ubmax{position:absolute;left:0;top:-2px;font-size:10.5px;color:var(--ink-3);border-top:1px solid var(--line);width:100%;padding-top:1px}
.ubc{flex:1;height:100%;display:flex;align-items:flex-end;padding:0;min-width:0;z-index:1}
.ubc i{display:block;width:100%;background:var(--ink-2);border-radius:2px 2px 0 0;min-height:0}
.ubc:hover i,.ubc.on i{background:var(--ink)}
.ubax{display:flex;gap:2px;padding-left:22px;font-size:10px;color:var(--ink-3);height:16px}
.ubax span{flex:1;min-width:0;white-space:nowrap;overflow:visible}
.ubtip{min-height:1.4em;margin-top:2px}
/* Protokoll: when who was there — a tick a login, a dot an hour in the app, a faint line each Monday */
.ju .tlb{height:16px}
.ju .tlb .jwk{position:absolute;top:0;bottom:0;border-left:1px solid var(--line)}
.ju .tlb .lg{position:absolute;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:var(--ink);border-radius:1px}
.ju .tlb .ac{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--ink-2)}
tr.bad td b{color:var(--bad)}
td.nw{white-space:nowrap}
.tlb .tlline{position:absolute;top:-6px;bottom:-6px;width:0;border-left:2px dashed var(--id);z-index:2}
.num.pl>span:first-child{flex:0 0 9.5em}   /* Verkauf: the places steppers in one column */
.dtb{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left}   /* Verkauf: the date opens its form */
.dtb b{text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}   /* tappable without a pen */
.dtb[aria-expanded="true"] b,.dtb:hover b{text-decoration-color:currentColor}
.dayh{display:block;margin:14px 0 4px;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:600}
.s.cell{color:var(--ink-2);margin-top:3px}   /* Verkauf: an extra column of a date — its name as a label, then the text */
.s.cell i{font-style:normal;text-decoration:underline;text-decoration-color:var(--ink-3);text-underline-offset:3px;margin-right:4px}
.cols{margin-top:14px}
.cols>.k{display:block;font-size:13.5px;color:var(--ink);margin-bottom:2px}
/* Verkauf: the tiny timeline of a date (shiftLine) — our game hatched above, the shift dark below */
.stl{display:block;position:relative;margin:6px 0 2px;max-width:150px}
.stl .ln{display:block;position:relative;height:7px;margin-bottom:2px;background:var(--sunk)}
.stl .ln i{position:absolute;top:0;bottom:0}
.stl .sh,.tlk.sh{background:var(--ink)}
.stl .sh.open{background:linear-gradient(90deg,var(--ink) 60%,transparent)}
.stl .gm,.tlk.gm{background:repeating-linear-gradient(135deg,var(--ink-3) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--ink-3)}
.stl .ax{display:block;position:relative;height:11px;font-size:9px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.stl .ax span{position:absolute;transform:translateX(-50%)}
.stl .ax span:first-child{transform:none}
.tlk{display:inline-block;width:18px;height:7px}
.kdr .chips .st{font-size:11.5px;padding:1px 6px}   /* Kader: the Ämter, small, beside each other */
/* SpielerPlus: the attendance as one block — the day it starts, what was read */
.attl{margin:14px 0 4px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.attl .inl{font-size:13px;color:var(--ink-2)}
.attl input.in.sm{min-height:30px;padding:2px 6px;font-size:13px;width:auto}
.attl .s.bad{color:var(--bad)}
/* a new player: what to take him in as, and OK */
.pnd{margin-top:6px}
.pnd select.in.sm{min-height:34px;padding:2px 6px;font-size:13px;width:auto;flex:1;min-width:0}
.pnd .b{min-height:34px}
.attl .s{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-3);margin-top:5px}
.bs.clr{display:flex;flex-wrap:nowrap;margin:0}
.bs.clr .in{flex:1;min-width:0}
/* Andere Mannschaften: the league's table opened under a followed team */
.fw tr.fwx > td{padding:0 0 10px;background:none}
.fw table.t tbody tr.fwx:hover td{background:none}       /* the opened row's hover must not grey the table inside */
.fw table.t tbody tr.fwx table.t tbody tr:hover td{background:var(--sunk)}
.fw table.t tbody tr.fwx table.t tbody tr.me td{background:var(--id-bg)}
.fw .nmfold{display:inline-flex;align-items:baseline;gap:5px}
.fw .nmfold .ar{flex:none;width:.8em;color:var(--ink-3)}
.fw tr.fwx .wrapx{margin:0}
.fw tr.fwx .note{margin:6px 0 0}
/* Live: our game's line under Nächstes Spiel, its ticker below on tap */
.livebox{margin:10px 0 0}
.livebox .nmfold{padding:6px 0}
/* Administration → Experimente: the logins of a feature for some */
.lbl.featwho{margin-top:14px}
.chk .s{display:block}
/* Andere Mannschaften: the search's hits, one per line, tapped to follow */
.fwres{margin:-4px 0 14px}
.fwhit{display:block;width:100%;text-align:left;font:inherit;color:var(--ink);background:none;border:0;border-bottom:1px solid var(--line);padding:9px 0;cursor:pointer}
.fwhit .s{display:block;color:var(--ink-3);font-size:12.5px}
.fwhit.off{color:var(--ink-3);cursor:default}
.fw .of{color:var(--ink-3);font-size:12.5px;margin-left:1px}
/* Andere Mannschaften, Bearbeiten: the handle a row is dragged by — no scrolling while on it */
.fw .drag{display:inline-block;padding:6px 12px 6px 0;margin:-6px 0;color:var(--ink-3);font-size:20px;line-height:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.fw tr.dragging td{background:var(--sunk)}
.fw .fwsrc{margin:6px 0 4px}
.fw .fwsrc .tl{margin-left:0}
/* A game on a card: one box, one line — grey before and after, the club colour while it runs */
.gbox{display:flex;align-items:baseline;gap:8px;margin:5px 0 1px;padding:3px 8px;background:var(--sunk);font-size:12.5px;color:var(--ink-2);line-height:1.4}
.gbox .gt{flex:1;min-width:0}
.gbox .sc{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.gbox.live{background:var(--id-bg);box-shadow:inset 3px 0 0 var(--id);color:var(--ink)}
.gbox .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--id);margin-right:5px;vertical-align:1px}
.livebox .nmfold{display:flex;align-items:flex-start;gap:6px;width:100%}
.livebox .nmfold .gbox{flex:1;margin-top:0}
/* inside our game's fold button: not the fold's small grey spans */
.livebox .nmfold .gbox,.livebox .nmfold .gbox .gt{font-size:12.5px;color:inherit}
.livebox .nmfold .gbox{color:var(--ink-2)}
.livebox .nmfold .gbox.live{color:var(--ink)}
.livebox .nmfold .gbox .sc{font-size:14px;color:var(--ink)}
/* a card with its game box: one block — no line between the team and its box */
.fw table.t tr.hasbox td{border-bottom:0;padding-bottom:2px}
.fw table.t tr.fwbox td{padding-top:0}
.fw table.t tr.fwbox .gbox{margin-top:0}
.fw table.t tbody tr.fwbox:hover td{background:none}
/* a team card's game box: its own slim line across the card — width 0 so it never widens the table, its text cut with … */
.fw .fwl{width:0;min-width:100%;display:flex;align-items:center;gap:10px}
.fw .fwl .gbox{flex:1;min-width:0}
.fw .fwl .gsp{flex:1}
.fw .fwl .fwpt{flex:none;min-width:58px;text-align:right;white-space:nowrap;font-size:12.5px;color:var(--ink-3)}
.fw .nmfold .fwlg{font-size:12px;color:var(--ink-3);white-space:nowrap}
.fw .fwl .gbox{margin:0;padding:2px 8px;font-size:12px}
.fw .fwl .gbox .gt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fw .fwl .gbox .sc{font-size:13px}
.fw .fwl .gbox .dot{width:5px;height:5px;margin-right:4px}
.fw .fwl .gbox.live{box-shadow:inset 2px 0 0 var(--id)}
/* a word only screen readers say (the gold live box: "LIVE") */
.gbox .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* the box line is a button when there is something to switch to: no button look */
.fw button.fwl{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}

/* Kasse → Strafen nach Art: who got it, how often — a Stufe's or a Sonderfall's entries under the name */
.kindw{list-style:none;margin:2px 0 8px;padding:0 0 0 12px;border-left:2px solid var(--line-2);font-size:12.5px}
.kindw li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:4px 0;border-bottom:1px solid var(--line)}
.kindw li:last-child{border-bottom:0}
.kindw .kc{color:var(--ink-2);text-align:right;white-space:nowrap}
.kindw .s{grid-column:1/-1;color:var(--ink-3);font-size:12px}
.nmfold.kfold{display:flex;align-items:baseline;gap:5px}
.nmfold.kfold .kt{color:var(--ink);font-size:inherit}

/* Kasse, a player's Strafe: the Kassenwart's actions in a row of their own under it, small — paid, the changes, Löschen apart */
table.t tr.hasact td{border-bottom:0;padding-bottom:2px}
table.t tr.eactr td{padding-top:2px;contain:inline-size}   /* the buttons spanning both columns must not widen the amount column */
.eact{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.eact .b.sm{min-height:30px;padding:0 8px}
.eact .seg{display:inline-flex;gap:6px}
.eact .del{margin-left:auto;padding:0 2px;color:var(--ink-3);border-color:transparent}
.eact .in.amt{width:84px;min-height:30px;padding:0 8px}