/* 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)}
.railfoot .set{font-size:12px;color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;padding:6px 0}   /* Einstellungen */
.railfoot .set[aria-current="true"]{color:var(--ink);font-weight:600}

.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 .k{width:7px;height:7px;background:var(--id);flex:none}
.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{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)}

.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 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)}
table.t td .s{display:block;color:var(--ink-3);font-size:11.5px;margin-top:2px}
table.t td .s.soon{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}

/* a slot inside a table cell: the name, or "frei". One per line. */
.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-3);border-style:dashed}
.sl.free.soon{color:var(--wait);border-color:var(--wait-line)}  /* the gap notice's slots */
.sl.pend{color:var(--wait);border-color:var(--wait-line)}
/* free name, nobody from the squad yet: grey name, yellow dashed border and state word */
.sl.pend.unconf{color:var(--ink-2);border-style:dashed;border-color:var(--unconf)}
.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}
.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 ---------- */
.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)}
.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.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}
/* 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 */
.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,120px) 1fr 58px;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 .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}
.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)}
.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 i.o,.c.bo{background:var(--cal-4)}
.barrow .bt i.d,.c.bd{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.single .wk:has(input:checked){background:var(--id-bg);font-weight:600}
.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.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 */

/* doubled (not paid by the deadline): marked firmly on the entry */
.st.dbl{color:var(--ink);border-color:var(--ink);font-weight:700}
.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 */
.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}
/* 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 */
.h2h .nmfold{display:inline-flex;align-items:baseline;gap:6px;text-align:left}
.h2h .nmfold .ar{flex:none;width:.8em;color:var(--ink-3)}
.h2h td.rec{white-space:nowrap;font-variant-numeric:tabular-nums}
/* 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)}
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)}
.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 */
.h2h.bare thead{display:none}
.h2h.bare{margin-top:-8px}
.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)}