/* SCL Vereinsheim — club app. Light only (no dark mode, by choice).
   Palette: the club colours, schwarz-weiß. Neutral greys carry the layout; colour appears only where it means
   something (green = gut, amber = knapp, red = fehlt/offen). Layout: black crest header, white cards on a soft grey ground;
   phones get a bottom tab bar, wide screens get tabs in the header and two-column pages. */
/* Fonts are served from here instead of Google (no extra lookup, no waiting on a third party before the first paint).
   Instrument Sans is one variable file for all weights; the latin-ext files only load for names with such letters. */
@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url("/fonts/cinzel-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Cinzel";font-weight:700;font-display:swap;src:url("/fonts/cinzel-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Instrument Sans";font-weight:400 700;font-display:swap;src:url("/fonts/instrument-sans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F}
:root{
  --bg:#f4f4f2; --surface:#ffffff; --surface-2:#f0f0ee; --ink:#121212; --ink-2:#3d3d3b; --muted:#74726d; --line:#e4e3df;
  --head:#0f0f0f; --head-ink:#fafaf8; --head-muted:#9b9993;
  --on-ink:#ffffff;                          /* text on ink-coloured fills */
  --good:#2f7a52; --warn:#b07a1c; --bad:#b23b2b;
  --good-soft:#e8f2ec; --bad-soft:#f7e6e2;
  --hero-bg:#121212; --hero-ink:#fafaf8; --hero-muted:#a3a19b; --hero-btn:#ffffff; --hero-btn-ink:#121212; --hero-owe:#ff9d8c; --hero-ok:#86d9a9;
  --av-bg:#e9e8e4; --av-ink:#3d3d3b;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 4px 14px -6px rgba(0,0,0,.08);
  --shadow-lg:0 24px 60px -16px rgba(0,0,0,.35);
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  --crest:url("/img/crest-black.webp");
  --r:14px; --r-sm:10px; --nav-h:64px;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15.5px/1.5 var(--body);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--head)}
/* iOS colours the status bar and the gap you pull open from the body background (painted over the html one), not
   from the header. With the header on screen the body is black and the grey page ground moves to #app. Near the
   bottom (app.js sets .near-bottom) the body turns grey again so the bounce below the page matches. */
html:has(header.top),html:has(header.top) body{background:var(--head)}
html:has(header.top).near-bottom,html:has(header.top).near-bottom body{background:var(--bg)}
html:has(header.top) #app{background:var(--bg);min-height:100vh;min-height:100dvh}
img,svg{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:760px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:1024px){.wrap{max-width:1120px;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}}
p{margin:0}
h1,h2,h3{margin:0;text-wrap:balance}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:16px;height:16px}
.owe{color:var(--bad)} .ok{color:var(--good)}

/* ---------- header ---------- */
/* The header is fixed, not sticky: iOS drags sticky elements along when the page bounces past its top, but leaves
   fixed ones in place (like the bottom nav). Its black reaches up behind the status bar; #app starts below it. */
:root{--bar-h:60px;--head-h:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
@media (min-width:720px){:root{--bar-h:62px}}
header.top{position:fixed;top:0;left:0;right:0;padding-top:env(safe-area-inset-top,0px);z-index:20;background:var(--head);color:var(--head-ink)}
#app:has(> header.top){padding-top:var(--head-h)}
html:has(header.top){scroll-padding-top:calc(var(--head-h) + 12px)}
.bar{display:flex;align-items:center;gap:8px;height:var(--bar-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;flex:none}
.brand .crest{width:34px;height:34px;background:url("/img/crest-white.webp") center/contain no-repeat;flex:none}
.brand .txt{display:grid;gap:4px;justify-items:start}
.brand .wm{height:17px;width:auto;display:block}
.brand small{font:600 9px/1 var(--body);letter-spacing:.22em;text-transform:uppercase;color:var(--head-muted);white-space:nowrap}
.bar .spacer{flex:1}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0;flex:none}
header .icon-btn{color:var(--head-muted)}
header .icon-btn:hover,header .icon-btn[aria-current="page"]{color:var(--head-ink);background:rgba(255,255,255,.08)}
.access{display:flex;align-items:center;gap:10px;min-width:0;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--head-muted);font:600 12px/1 var(--body);white-space:nowrap;cursor:default}
.access span{display:inline-flex;align-items:center;gap:5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.access .ico{width:14px;height:14px;flex:none}
@media (max-width:480px){.bar:has(.access) .brand .txt{display:none}} /* phones: the crest alone leaves room for the badge */
.me-btn{display:flex;align-items:center;gap:9px;border:0;background:transparent;color:var(--head-ink);padding:4px 4px 4px 12px;border-radius:999px;cursor:pointer;font:600 14px var(--body);flex:none}
.me-btn:hover{background:rgba(255,255,255,.08)}
.me-btn .nm{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-btn .av{width:32px;height:32px;font-size:12px;background:#2c2c2c;color:#f2f2f0}
@media (max-width:420px){.me-btn .nm{display:none}}

nav.tabs{display:flex;gap:2px;margin-left:28px}
nav.tabs a{display:flex;align-items:center;gap:8px;color:var(--head-muted);text-decoration:none;font:600 14px/1 var(--body);padding:21px 12px 19px;border-bottom:2px solid transparent;white-space:nowrap}
nav.tabs a:hover{color:var(--head-ink)}
nav.tabs a[aria-current="page"]{color:var(--head-ink);border-bottom-color:var(--head-ink)}
nav.tabs a .ico{width:18px;height:18px}
nav.bottom{display:none}
@media (min-width:720px) and (max-width:900px){nav.tabs{margin-left:12px} nav.tabs a{padding-inline:8px} nav.tabs a .ico{display:none}}
@media (max-width:719px){
  .bar nav.tabs{display:none}
  nav.bottom{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);margin:0;gap:0;
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:saturate(1.3) blur(14px);-webkit-backdrop-filter:saturate(1.3) blur(14px);
    border-top:1px solid var(--line);padding:6px max(6px,env(safe-area-inset-right,0px)) max(4px,calc(env(safe-area-inset-bottom,0px) - 14px)) max(6px,env(safe-area-inset-left,0px))}
  nav.bottom a{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center;color:var(--muted);text-decoration:none;font:600 10.5px/1 var(--body);padding:6px 0;border:0}
  nav.bottom a .ico{width:23px;height:23px}
  nav.bottom a[aria-current="page"]{color:var(--ink)}
  nav.bottom a[aria-current="page"] .ico{stroke-width:2.2}
  /* Active tab: a soft pill behind the icon that grows in, like the native iOS/Android tab bars */
  nav.bottom a .ico{box-sizing:content-box;padding:4px 16px;margin-block:-4px -2px;border-radius:99px;transition:background-color .2s ease,transform .2s ease}
  nav.bottom a[aria-current="page"] .ico{background:var(--av-bg);animation:pill .25s cubic-bezier(.2,.8,.2,1)}
  nav.bottom a:active .ico{transform:scale(.9)}
  main{padding-bottom:calc(var(--nav-h) + 40px + env(safe-area-inset-bottom,0px))!important}
  .toast{bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px))!important}
}

.preview-bar{background:var(--surface);color:var(--ink);font-size:13.5px;border-bottom:1px solid var(--line)}
.preview-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-block:8px}
.preview-bar span{display:inline-flex;align-items:center;gap:6px}
.preview-bar button{padding:6px 12px;font-size:13px}

/* ---------- page ---------- */
main{padding-block:28px 72px;display:grid;gap:28px}
/* The running version, tiny, below every tab's content (outlives the tab's replaceChildren) */
#main::after{content:attr(data-ver);justify-self:center;margin-top:8px;font-size:10.5px;letter-spacing:.04em;color:var(--muted);opacity:.7}
section{display:grid;gap:12px;min-width:0;align-content:start}
.page-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-h h1,.hello h1{font:700 28px/1.15 var(--display);letter-spacing:.01em}
.page-h p,.hello p{color:var(--muted);font-size:14.5px;margin-top:5px}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:28px}
.sec-h h2{font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.link{display:inline-flex;align-items:center;gap:2px;color:var(--ink-2);font-weight:600;font-size:13.5px;text-decoration:none}
.link:hover{color:var(--ink)}
.hint{color:var(--muted);font-size:13.5px}
.err{color:var(--bad);font-size:14px}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);min-width:0;overflow:hidden}
.card.pad{padding:18px}
a.card{color:inherit;text-decoration:none}
.list>*+*{border-top:1px solid var(--line)}
.empty{padding:30px 18px;color:var(--muted);text-align:center;display:grid;gap:8px;justify-items:center}
.empty .ico{width:28px;height:28px;opacity:.55;stroke-width:1.6}
.empty b{color:var(--ink)}
.empty button{margin-top:6px}

/* desktop columns */
.two-col{display:grid;gap:28px}
.two-col>.col{display:grid;gap:24px;align-content:start;min-width:0}
/* phones/tablets: one column, member list before the Kasse form */
@media (max-width:1023px){.striche-grid>.col{display:contents}.striche-grid .kasse-sec{order:9}}
@media (min-width:1024px){
  .striche-grid{grid-template-columns:380px minmax(0,1fr)}
  .striche-grid>.col:first-child{position:sticky;top:90px}
  .admin-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
}

/* ---------- controls ---------- */
button,.btn{font:600 14.5px/1 var(--body);border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:11px 16px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:transform .08s ease,background-color .15s ease,border-color .15s ease,opacity .15s}
button:hover,.btn:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line))}
button:active,.btn:active{transform:scale(.97)}
button.primary,.btn.primary{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
button.primary:hover,.btn.primary:hover{opacity:.88}
button.quiet,.btn.quiet{background:transparent;border-color:transparent;color:var(--muted);padding:8px 10px}
button.quiet:hover,.btn.quiet:hover{color:var(--ink);background:var(--surface-2)}
button.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line));background:var(--surface)}
button.danger.solid{background:var(--bad);border-color:var(--bad);color:#fff}
button.sm,.btn.sm{padding:8px 12px;font-size:13.5px;border-radius:9px}
button.wide,.btn.wide{width:100%}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.chip{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--body);padding:5px 8px;border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;letter-spacing:.01em}
.chip.dark{background:var(--ink);color:var(--on-ink)}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}

input,select,textarea{font:inherit;font-size:16px;font-weight:400;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 13px;width:100%;min-width:0;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 10%,transparent)}
textarea{resize:vertical}
input[type=date],input[type=time]{-webkit-appearance:none;appearance:none;display:block;min-height:45px;text-align:left}
input::-webkit-date-and-time-value{text-align:left;margin:0}
.tm{position:relative;display:block}
.tm-ph{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);opacity:.75;pointer-events:none;font-size:16px}
.tm input.is-empty:not(:focus){color:transparent}
.tm input:not(.is-empty)~.tm-ph,.tm input:focus~.tm-ph{display:none}
label.f{display:block;font:600 13px/1.2 var(--body);color:var(--ink-2)}
label.f>input,label.f>select,label.f>textarea,label.f>.pw{display:block;margin-top:7px;font-weight:400}
label.f small{font-weight:400;color:var(--muted)}
label.f>small:last-child{display:block;margin-top:6px;line-height:1.4}
.form{display:grid;gap:16px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions.end{justify-content:flex-end}
.actions.split{justify-content:space-between}

/* segmented control: the chosen option is filled black, its icon says what it means */
.seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--surface-2);border-radius:10px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;border-radius:8px;padding:8px 13px;font-size:13.5px;color:var(--ink-2);gap:6px}
.seg button:hover{background:color-mix(in srgb,var(--surface) 70%,transparent)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
/* RSVP answers in traffic-light colours: tinted icon when open, solid fill when chosen */
.seg button.ja{--tl:var(--good);--tl-on:#fff}
.seg button.spaeter{--tl:#e9a514;--tl-on:#1d1606}
.seg button.nein{--tl:var(--bad);--tl-on:#fff}
/* Bestand uses the same lights: voll green, knapp amber, leer red */
.seg button.voll{--tl:var(--good);--tl-on:#fff}
.seg button.knapp{--tl:#e9a514;--tl-on:#1d1606}
.seg button.leer{--tl:var(--bad);--tl-on:#fff}
.seg button:is(.ja,.spaeter,.nein) .ico{color:var(--tl)}
.seg button:is(.ja,.spaeter,.nein,.voll,.knapp,.leer):hover{background:color-mix(in srgb,var(--tl) 12%,var(--surface))}
.seg button:is(.ja,.spaeter,.nein,.voll,.knapp,.leer)[aria-pressed="true"]{background:var(--tl);color:var(--tl-on)}
.seg button:is(.ja,.spaeter,.nein)[aria-pressed="true"] .ico{color:currentColor}
.seg .tl-dot{width:8px;height:8px;border-radius:50%;background:var(--tl);flex:none}
.seg button[aria-pressed="true"] .tl-dot{background:currentColor;opacity:.85}
.seg.full{display:grid;width:100%}

/* avatars: neutral initials */
.av{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;font:700 12.5px/1 var(--body);letter-spacing:.03em;background:var(--av-bg);color:var(--av-ink)}
.av.sm{width:28px;height:28px;font-size:10px;letter-spacing:0}
.av.lg{width:56px;height:56px;font-size:19px}
.stack{display:flex;align-items:center}
.stack .av{box-shadow:0 0 0 2px var(--surface)}
.stack .av+.av{margin-left:-4px}
.stack .more{margin-left:6px;font-size:13px;color:var(--muted);font-weight:600}
.av.xs{width:21px;height:21px;font-size:8.5px;letter-spacing:0}
/* Faces inside the Dabei button: the ring takes the button's own colour so they read as cut out of it. */
.stack.mini .av{box-shadow:0 0 0 1.5px var(--surface-2)}
.stack.mini .av+.av{margin-left:-2px}
.stack.mini .more{margin-left:3px;font-size:12px;font-weight:700;color:var(--ink)}
.seg button[aria-pressed="true"] .stack.mini .av{box-shadow:0 0 0 1.5px var(--tl)}
.seg button[aria-pressed="true"] .stack.mini .more{color:currentColor}

/* ---------- Start ---------- */
/* one column in this order: own numbers, what needs you, then the next Termin */
.start-grid{display:grid;gap:24px;max-width:760px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{padding:16px;display:grid;gap:10px}
.tile-l{font-size:13px;color:var(--muted);font-weight:600}
.tile-row{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tile-n{font:700 30px/1 var(--body);letter-spacing:-.02em}
a.tile:hover{box-shadow:var(--shadow),0 0 0 1px var(--line)}
.task{display:flex;align-items:center;gap:12px;padding:12px 16px}
.task .ic{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;background:var(--surface-2);color:var(--ink-2)}
.task .ic.bad{color:var(--bad)} .task .ic.warn{color:var(--warn)}
.task .tx{flex:1;min-width:0}
.task .tx b{display:block;font-weight:600;line-height:1.3}
.task .tx span{font-size:13px;color:var(--muted)}
.mini-ev{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px;text-decoration:none;color:inherit}
.mini-ev .t{font-weight:600}

/* ---------- Termine ---------- */
.ev-grid{display:grid;gap:14px}
@media (min-width:1024px){.ev-grid{grid-template-columns:1fr 1fr;align-items:start}.ev-grid>.hero{grid-column:1/-1}}
.ev{padding:18px;display:grid;gap:14px;--ev-gap:14px}
@media (max-width:719px){.ev{padding:14px 13px;gap:12px;--ev-gap:12px}}
.ev-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--ev-gap);align-items:start}
.date{width:52px;text-align:center;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.date .wd{background:var(--ink);color:var(--on-ink);font:700 10px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;padding:5px 0 4px}
.date .d{font:700 21px/1 var(--body);padding-top:6px;letter-spacing:-.02em}
.date .m{font:600 10px/1 var(--body);text-transform:uppercase;letter-spacing:.1em;padding:3px 0 7px;color:var(--muted)}
.ev-t{font-weight:700;font-size:17px;line-height:1.3;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Creators edit a Termin by tapping its title: no cue at rest, only press feedback. */
.title-btn{all:unset;cursor:pointer;border-radius:6px;transition:opacity .12s,background .12s;-webkit-tap-highlight-color:transparent}
.title-btn:active{opacity:.55}
.title-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* "Morgen" and who created the Termin sit together as pills on their own line under the title. */
.ev-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip .ico{width:12px;height:12px;margin:-2px 0}
/* In the creator's own view the creator chip says how to edit, and is itself a way in. */
.chip-btn{border:0;min-height:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip-btn:active{opacity:.6}
.chip-btn .sep{margin:0 -1px;opacity:.6}
/* Time and place run the full card width under the date, starting at the card's left edge. */
.ev-meta{display:flex;flex-wrap:wrap;gap:4px 14px;color:var(--muted);font-size:13.5px;margin-top:-4px}
.ev-meta span{display:inline-flex;align-items:center;gap:5px}
.ev-note{font-size:14.5px;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;border-left:2px solid var(--line);padding:2px 0 2px 12px}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap}
.who-btn{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);background:transparent;border:0;padding:4px 0;font-weight:500}
.who-btn:hover{color:var(--ink);background:transparent}
.who-btn>.ico{max-width:none;opacity:.75}
.who-btn:has(.stack,span)>.ico{margin-left:-4px}
/* The info button sits at the right end of the answer row. */
.ev-foot{flex-wrap:nowrap}
.ev-foot>.seg+.who-btn{flex:none;padding:8px 2px 8px 4px}
/* A Termin without Programmpunkte: the answers span the card from its left edge, like time and place. */
.ev-foot>.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;flex:1}
.ev-foot>.seg button{padding-inline:8px} /* the faces always go on their own line under the answer buttons */
.ev-parts{display:grid;gap:2px;border-top:1px solid var(--line);padding-top:10px;margin-top:-2px}
.ev-parts.none{border-top:0;padding-top:0;margin-top:-10px}
.ev-parts-h{font:700 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
/* Programmpunkte hang off a timeline: a rail on the left, a dot per point, the time small and grey above its name. */
.part{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:8px 0 10px 22px}
.part::before{content:"";position:absolute;left:5px;top:0;bottom:0;width:2px;background:var(--line)}
.ev-parts-h+.part::before{top:16px}
.part:not(:has(~.part))::before{bottom:auto;height:16px}
.ev-parts-h+.part:not(:has(~.part))::before{display:none}
.part::after{content:"";position:absolute;left:1px;top:11px;width:10px;height:10px;box-sizing:border-box;border-radius:50%;background:var(--surface);border:2px solid var(--muted)}
.part-time{display:flex;align-items:center;gap:2px;font-weight:600;font-size:12px;line-height:16px;color:var(--muted);font-variant-numeric:tabular-nums;margin-bottom:1px}
.part-time .icon-btn{width:26px;height:26px;margin:-5px 0;padding:0}
.part-time .icon-btn .ico{width:13px;height:13px}
.part-t{font-weight:600;display:flex;align-items:center;gap:4px}
/* Titles break between words; a word too long for the line is hyphenated at a German syllable (lang="de"), never cut at a random letter. */
.tt{min-width:0;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ev-meta .maplink,.part-meta .maplink{display:inline-flex;align-items:flex-start;gap:5px;min-width:0;max-width:100%;color:var(--ink-2);text-decoration:none}
.maplink .ico{flex:none;margin-top:.15em}
.maplink .ml-t{min-width:0;overflow-wrap:anywhere}
.place-f{display:grid;gap:8px}
.place-f .suggest{padding:0}
.place-f .sg{display:flex;align-items:flex-start;gap:10px;width:100%;border:0;border-radius:0;background:none;padding:11px 14px;text-align:left;font-weight:400;justify-content:flex-start}
.place-f .sg+.sg{border-top:1px solid var(--line)}
.place-f .sg:hover{background:var(--surface-2)}
.place-f .sg .ico{margin-top:2px;color:var(--muted);flex:none}
.place-f .sg span{display:grid;gap:2px;min-width:0}
.place-f .sg b{font-weight:600;font-size:14px}
.place-f .sg small{font-size:12.5px;color:var(--muted)}
.part-meta{display:flex;flex-wrap:wrap;min-width:0;align-items:center;gap:2px 12px;color:var(--muted);font-size:13px}
.part-meta>span{display:inline-flex;align-items:center;gap:5px}
.part-meta .who-btn{font-size:13px;padding:2px 0;flex:none;white-space:nowrap}
.part-note{font-size:13.5px;color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere;margin-top:2px}
.seg.icons button{padding:5px 8px 4px;min-width:38px;flex-direction:column;gap:2px}
.seg button .cnt{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);margin-left:-1px}
.seg.icons button .cnt{margin:0;font-size:11.5px;line-height:13px;height:13px}
.seg button[aria-pressed="true"] .cnt{color:currentColor}
.seg button .cnt.none{color:var(--muted);font-weight:500;opacity:.6}
.part-add{justify-self:start;margin-top:4px}
/* Programm in the new-Termin form: title and remove on top, time and place below. */
.np{display:grid;gap:8px}
.np-h{font:600 13px/1.2 var(--body);color:var(--ink-2)}
.np .hint{font-size:12.5px;margin:-2px 0 0}
.np-list{display:grid;gap:8px}
.np-list:empty{display:none}
.np-row{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border-radius:12px;background:var(--surface-2)}
.np-row [data-np=title]{grid-column:1/3}
.np-row .tm{grid-column:1}
.np-row [data-np=place]{grid-column:2/4}
.np-row [data-np-del]{grid-column:3;grid-row:1;color:var(--muted)}
.np .part-add{margin:0}
.ev.hero{box-shadow:var(--shadow),0 0 0 1.5px var(--ink)}
.ev-acts{display:flex;margin:-8px -8px 0 0}
.ev .icon-btn{color:var(--muted)}
.ev .icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.who-sheet .row{display:flex;align-items:center;gap:10px;padding:7px 0}
.who-sheet h3{font:700 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.who-part+.who-part{border-top:1px dashed var(--line);margin-top:14px;padding-top:6px}
.who-part-h{font-weight:700;display:flex;gap:8px;margin-top:8px}
.who-part-h b{font-variant-numeric:tabular-nums}
details.past>summary{list-style:none;cursor:pointer;color:var(--muted);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
details.past>summary::-webkit-details-marker{display:none}
details.past[open]>summary .ico{transform:rotate(90deg)}
details.past .ico{transition:transform .2s}
details.past>.list{margin-top:8px}

/* ---------- Strichliste ---------- */
.tally-hero{padding:22px;display:grid;gap:14px;background:var(--hero-bg);color:var(--hero-ink);border-radius:var(--r);box-shadow:var(--shadow)}
.tally-hero .lbl{font:600 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--hero-muted)}
.tally-hero .n{font:700 56px/1 var(--body);letter-spacing:-.03em;display:inline-block;margin-top:6px}
.tally-hero .n.bump{animation:bump .35s ease}
.tally-hero .marks{color:var(--hero-ink)}
.tally-hero .row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tally-hero .bal{font-size:14px;color:var(--hero-muted);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pp-btn{display:inline-flex;align-items:center;gap:4px;background:var(--hero-btn);color:var(--hero-btn-ink);font-weight:700;font-size:14px;padding:8px 10px 8px 14px;border-radius:999px;text-decoration:none}
.pp-btn:hover{opacity:.9}
.claim-note{display:flex;align-items:center;justify-content:space-between;gap:4px 12px;flex-wrap:wrap;font-size:14px;color:var(--hero-muted);margin:-6px 0 -4px}
.claim-note>span{display:inline-flex;align-items:center;gap:6px;color:var(--hero-ink)}
.claim-note button{color:var(--hero-muted);background:transparent;border:0;padding:8px 0;text-decoration:underline;text-underline-offset:3px}
.claim-note button:hover{color:var(--hero-ink)}
.claim{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 12px;align-items:center;padding:14px 16px}
.claim .nm{font-weight:700}
.claim>b{font-size:17px}
.fr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding:12px 16px}
.fr .tx{white-space:pre-wrap;overflow-wrap:anywhere}
.fr .hint{font-size:12.5px;margin-top:2px}
.fr.done .tx{color:var(--muted)}
.claim-acts{grid-column:2/-1;display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.tally-hero .bal .owe{color:var(--hero-owe)} .tally-hero .bal .ok{color:var(--hero-ok)}
.tally-hero .links{display:flex;gap:4px;flex-wrap:wrap;margin:-2px 0 -8px -10px}
.tally-hero .links button{color:var(--hero-muted);background:transparent;border:0;padding:8px 10px}
.tally-hero .links button:hover{color:var(--hero-ink);background:rgba(255,255,255,.08)}
.strich-btn{width:88px;height:88px;border-radius:50%;border:0;background:var(--hero-btn);color:var(--hero-btn-ink);font:700 13.5px/1.1 var(--body);display:grid;place-items:center;align-content:center;flex:none;padding:0;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.strich-btn:hover{border:0;opacity:.92}
.strich-btn .plus{font-size:32px;line-height:.95;font-weight:500}
.strich-btn:active{transform:scale(.92)}
.marks{display:flex;flex-wrap:wrap;gap:6px;min-height:18px;color:var(--ink);align-items:center}
.marks svg{height:17px;width:auto}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kpi{padding:16px}
.kpi .v{font:700 22px/1.1 var(--body)}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:4px}
.tl{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 16px}
.tl.tap{cursor:pointer}.tl.tap:hover{background:var(--surface-2)}
.tl .nm{font-weight:600;display:flex;align-items:center;gap:6px}
.tl .num{text-align:right;white-space:nowrap}
.tl .num b{font-size:16px}
.tl .num small{display:block;font-size:12px;color:var(--muted)}
.tl .plus1{width:36px;height:36px;padding:0}
.hist .h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;align-items:center}
.hist .h .t{grid-column:1/-1;font-size:12px;color:var(--muted)}
.hist .h .amt{font-weight:600;white-space:nowrap}
.stat-line{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;background:var(--surface-2);border-radius:10px}
.stat-line b{font-size:20px}
.sheet-h3{font:700 11.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:18px}

/* ---------- Bestand ---------- */
.alert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow),inset 3px 0 0 var(--bad)}
.alert .ico{color:var(--bad);margin-top:1px}
.alert.good{box-shadow:var(--shadow),inset 3px 0 0 var(--good)} .alert.good .ico{color:var(--good)}
.alert b{display:block}
.alert span{font-size:13.5px;color:var(--muted)}
.stock-cols{display:grid;gap:20px}
@media (min-width:1024px){.stock-cols{display:block;columns:2;column-gap:24px}.stock-cols>.grp{break-inside:avoid;margin-bottom:24px}}
.grp{display:grid;gap:10px}
.grp-h{font:700 11.5px/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.st{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:14px 16px;align-items:center}
.st.voll{--tl:var(--good)} .st.knapp{--tl:#e9a514} .st.leer{--tl:var(--bad)}
.st:is(.voll,.knapp,.leer){box-shadow:inset 3px 0 0 var(--tl)}
.st .dot{width:12px;height:12px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--line);align-self:start;margin-top:5px}
.st:is(.voll,.knapp,.leer) .dot{background:var(--tl);box-shadow:0 0 0 4px color-mix(in srgb,var(--tl) 18%,transparent)}
.st .sub .stv{font-weight:600} .st .sub .stv.voll{color:var(--good)} .st .sub .stv.knapp{color:var(--warn)} .st .sub .stv.leer{color:var(--bad)}
/* the Ampel above the list: a dark housing, a lamp lights up when at least one item is in that state */
.lights{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:12px;border-radius:22px;background:var(--ink);box-shadow:var(--shadow)}
.lamp{--tl:var(--good);display:flex;flex-direction:column;align-items:center;gap:7px}
.lamp.leer{--tl:var(--bad)} .lamp.knapp{--tl:#e9a514}
.lamp .bulb{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:700 17px/1 var(--body);
  background:color-mix(in srgb,var(--tl) 22%,#1a1a1a);color:color-mix(in srgb,var(--tl) 45%,#1a1a1a)}
.lamp.on .bulb{background:var(--tl);color:#fff;box-shadow:0 0 18px color-mix(in srgb,var(--tl) 65%,transparent)}
.lamp.knapp.on .bulb{color:#1d1606}
.lamp .lbl{font:600 11.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;color:color-mix(in srgb,var(--on-ink) 55%,transparent)}
.lamp.on .lbl{color:var(--on-ink)}
.lights-note{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:center}
.st .nm{font-weight:600;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.st .nm .soll{font-weight:500;font-size:12.5px;color:var(--muted)}
.st .sub{grid-column:2;font-size:12.5px;color:var(--muted)}
.st .ctl{grid-column:2;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:8px}
.st .claim{display:flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}

/* ---------- Verein ---------- */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
@media (min-width:1024px){.people{grid-template-columns:repeat(5,minmax(0,1fr))}}
.person{display:grid;justify-items:center;text-align:center;gap:6px;padding:18px 10px}
.person .nm{font-weight:700;font-size:14.5px;line-height:1.25}
.person .rl{font-size:12px;color:var(--muted);line-height:1.3}
.progress{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.progress span{display:block;height:100%;background:var(--ink);border-radius:inherit;transition:width .4s ease}
.hon{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 16px}
.cup{width:40px;height:40px;border-radius:10px;background:var(--surface-2);color:var(--ink);display:grid;place-items:center}
.hon .y{font-size:13px;color:var(--muted);text-align:right;display:flex;align-items:center;gap:2px}
.dec{position:relative;padding:16px 16px 16px 42px}
.dec::before{content:"";position:absolute;left:19px;top:22px;width:9px;height:9px;border-radius:50%;background:var(--ink)}
.dec::after{content:"";position:absolute;left:23px;top:36px;bottom:-16px;width:1px;background:var(--line)}
.dec:last-child::after{display:none}
.dec .dt{font-size:12.5px;color:var(--muted);font-weight:600}
.dec .tt{font-weight:700;margin-top:1px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.dec .de-acts{display:flex;flex-shrink:0;margin:-4px -6px -4px 0}
.dec .tx{white-space:pre-wrap;font-size:14.5px;color:var(--ink-2);margin-top:6px;overflow-wrap:anywhere}
.list.timeline>*+*{border-top:0}

/* ---------- Admin ---------- */
.search{position:relative}
.search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search input{padding-left:40px}
.mem{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 16px}
.mem .nm{font-weight:600}
.mem .sub{font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:3px 10px;align-items:center;margin-top:2px}
.mem .user{font-family:var(--mono);font-size:12px}
.mem.off{opacity:.5}
.mem .icon-btn{color:var(--muted)} .mem .icon-btn:hover{color:var(--ink);background:var(--surface-2)}
.status{display:inline-flex;align-items:center;gap:5px;font-weight:600}
.status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.status.good{color:var(--good)} .status.warn{color:var(--warn)} .status.bad{color:var(--bad)} .status.off{color:var(--muted)}
.linkbox{display:grid;gap:10px;background:var(--surface);padding:16px;border-radius:var(--r);box-shadow:var(--shadow),inset 3px 0 0 var(--ink)}
.linkbox code{font:13px var(--mono);overflow-wrap:anywhere;color:var(--ink-2)}
fieldset.perms{border:1px solid var(--line);border-radius:10px;padding:4px 14px 8px;margin:0;display:grid}
fieldset.perms legend{font:600 13px var(--body);color:var(--ink-2);padding:0 4px}
fieldset.perms label{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;align-items:start;padding:8px 0;cursor:pointer;font-weight:600;font-size:14.5px}
fieldset.perms input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);grid-row:span 2}
fieldset.perms span{font-size:12.5px;color:var(--muted);font-weight:400}
.rem .lrow{justify-content:flex-start;cursor:pointer}
.rem .lrow input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.rem .lrow.off{cursor:default}
.rem .lrow.off .nm{color:var(--muted)}
.rem .sub{font-size:13px;color:var(--muted)}
#remRhythm{width:100%}
#remRhythm button{padding:8px 4px;white-space:nowrap}
.audit .h{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 16px;font-size:13.5px}
.audit .h .t{color:var(--muted);font-size:12px;white-space:nowrap}

/* ---------- account sheet ---------- */
.acct-head{display:flex;align-items:center;gap:14px}
.acct-head .nm{font-weight:700;font-size:17px}
.acct-head .sub{font-size:13px;color:var(--muted)}
.menu{display:grid}
.menu a,.menu button{display:flex;align-items:center;gap:12px;padding:14px 2px;border:0;border-radius:0;background:transparent;color:var(--ink);font:500 15.5px var(--body);text-decoration:none;width:100%;justify-content:flex-start}
.menu a:hover,.menu button:hover{background:transparent;opacity:.7}
.menu>*+*{border-top:1px solid var(--line)}
.menu .ico{color:var(--muted)}
.menu .danger,.menu .danger .ico{color:var(--bad)}
.menu .go{margin-left:auto;color:var(--muted)}

/* ---------- auth ---------- */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding-block:40px}
.auth .box{width:100%;max-width:380px;display:grid;gap:20px;justify-items:center}
.auth .crest-lg{width:124px;height:124px;background:var(--crest) center/contain no-repeat}
.auth h1{font:700 28px/1.1 var(--display);text-align:center}
.auth .sub{text-align:center;color:var(--muted);font-size:14.5px;margin-top:-12px}
.auth .card{width:100%;padding:22px;overflow:visible}
.auth{position:relative}
.auth-back{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));left:max(10px,env(safe-area-inset-left,0px));display:inline-flex;align-items:center;gap:4px;padding:6px;color:var(--muted);text-decoration:none;font-weight:600;font-size:14.5px}
.auth-back:hover{color:var(--ink)}
.auth .foot{text-align:center;color:var(--muted);font-size:13.5px;max-width:300px}
.pw{position:relative}
.pw input{padding-right:48px}
.pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--muted);padding:8px}
.pw button:active{transform:translateY(-50%)}

/* ---------- dialogs: bottom sheet on phones ---------- */
dialog{border:0;border-radius:18px;background:var(--surface);color:var(--ink);padding:0;width:min(520px,calc(100vw - 32px));max-height:min(88vh,860px);box-shadow:var(--shadow-lg)}
dialog[open]{animation:pop .2s ease}
dialog:focus{outline:none}
dialog::backdrop{background:rgba(0,0,0,.45);backdrop-filter:blur(2px)}
dialog .dh{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 22px 4px;position:sticky;top:0;background:var(--surface);z-index:1}
dialog .dh h2{font:700 19px/1.25 var(--display)}
dialog .dh .icon-btn{color:var(--muted);margin-right:-8px}
dialog .dh .icon-btn:hover{background:var(--surface-2);color:var(--ink)}
dialog .db{padding:14px 22px 22px}
dialog .grab{display:none}
@media (max-width:640px){
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:92vh;padding-bottom:env(safe-area-inset-bottom,0px)}
  dialog[open]{animation:sheet .26s cubic-bezier(.2,.8,.2,1)}
  dialog .grab{display:block;width:38px;height:5px;border-radius:99px;background:var(--line);margin:8px auto 0}
  dialog .dh{padding-top:10px}
}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--on-ink);padding:12px 14px 12px 18px;border-radius:12px;font-size:14.5px;z-index:50;
  width:max-content;max-width:calc(100vw - 32px);display:flex;align-items:center;gap:16px;box-shadow:var(--shadow-lg);animation:toast .22s ease}
.toast.err{background:var(--bad);color:#fff}
.toast button{background:transparent;border:0;color:inherit;padding:6px 4px;font-weight:700;text-decoration:underline;text-underline-offset:3px}

.skel{display:grid;gap:12px;padding-block:28px}
.skel div{height:90px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:200% 100%;animation:shimmer 1.2s infinite}

/* Saving: the tapped button keeps its size, its label fades out and a small spinner turns in its colour */
button.busy{position:relative;color:transparent!important;pointer-events:none}
button.busy>*{opacity:0}
button.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--spin);border-right-color:transparent;animation:spin .7s linear infinite}
/* Pull to refresh (home-screen app) */
.ptr{position:fixed;left:50%;top:calc(var(--head-h) - 44px);z-index:15;width:38px;height:38px;margin-left:-19px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-lg),0 0 0 1px var(--line);display:grid;place-items:center;color:var(--muted);opacity:0;
  transform:translateY(var(--pull,0px));transition:transform .25s cubic-bezier(.2,.8,.2,1),opacity .2s}
.ptr.show{opacity:1;transition:opacity .15s}
.ptr .ico{width:20px;height:20px;transform:rotate(var(--turn,0deg))}
.ptr.ready{color:var(--ink)}
.ptr.spin{opacity:1;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ptr.spin .ico{animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pill{from{transform:scaleX(.6);background-color:transparent}to{transform:none}}
dialog.dragging{transition:none!important;animation:none!important}
dialog.settle{transition:transform .24s cubic-bezier(.2,.8,.2,1)}
dialog::backdrop{opacity:var(--bd,1);transition:opacity .24s}
dialog.dragging::backdrop{transition:none}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}

@media (max-width:540px){
  main{padding-top:22px}
  .row2{grid-template-columns:minmax(0,1fr)}
  .page-h h1,.hello h1{font-size:24px}
  .strich-btn{width:82px;height:82px}
  .tally-hero .n{font-size:48px}
  .mem{align-items:start}
  .mem>.actions{grid-column:2/-1;margin-top:-2px}
  .mem>.av{margin-top:2px}
  .tile-n{font-size:26px}
}
@media (prefers-reduced-motion:reduce){*,*::before{animation:none!important;transition:none!important}}

/* ---------- install card (home-screen app) ---------- */
.install{position:fixed;z-index:30;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));width:min(380px,calc(100vw - 32px));
  background:var(--surface);color:var(--ink);border-radius:16px;box-shadow:var(--shadow-lg),0 0 0 1px var(--line);padding:14px 14px 10px 16px;display:grid;gap:10px;animation:pop .25s ease}
@media (max-width:719px){.install{left:16px;right:16px;width:auto;bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom,0px))}}
.install .ih{display:flex;align-items:center;gap:12px}
.install .ih img{border-radius:11px;box-shadow:0 0 0 1px var(--line)}
.install .ih b{display:block;font-weight:700;font-size:15.5px}
.install .ih small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.install .ih .icon-btn{margin:-6px -6px 0 auto;align-self:flex-start;color:var(--muted)}
.install p{font-size:14px;color:var(--ink-2)}
:is(.install,.moved) .steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--ink-2)}
:is(.install,.moved) .steps li{display:flex;gap:10px;align-items:flex-start}
:is(.install,.moved) .steps .n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:99px;background:var(--surface-2);font-weight:700;font-size:12.5px;color:var(--ink);margin-top:-1px}
.install .steps b,.install p b{color:var(--ink);font-weight:600}
.install .ico.sm{width:17px;height:17px;vertical-align:-3px;color:var(--ink)}
.install .perks{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;color:var(--ink-2)}
.install .perks li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.install .perks .ico.sm{flex:none;margin-top:1px;vertical-align:0}
.install .hint{font-size:12.5px;color:var(--muted)}
.install .actions{display:flex;justify-content:flex-end;gap:6px;margin-right:-4px}
.install .actions button{display:inline-flex;align-items:center;gap:6px}
.install .actions .primary .ico.sm{color:inherit}
.install .icon-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.install .icon-pick button{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-2)}
.install .icon-pick img{border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.install .icon-pick button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)}

/* Verwaltung: one panel at a time, picked from a dropdown */
.panel-pick{position:relative;display:flex;align-items:center;max-width:420px}
.panel-pick select{appearance:none;-webkit-appearance:none;font:600 16px var(--body);padding:13px 44px 13px 44px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow, none)}
.panel-pick>.ico{position:absolute;pointer-events:none}
.panel-pick>.ico:first-child{left:14px}
.panel-pick>.ico:last-child{right:14px;transform:rotate(90deg);color:var(--muted)}
.panel-stats{margin-top:-10px}
/* Verein/Verwaltung: the panel sits right under its picker, its action button on the picker's row on wide screens */
.panel-pick~.admin-panel{margin-top:-12px}
.admin-panel>.actions.end:first-child{margin-bottom:-4px}
.panel-stats:empty,#inviteOut:empty{display:none}
.admin-panel{display:grid;gap:14px;max-width:760px}
.admin-panel .sec-h .search{flex:1}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px}
.lrow+.lrow{border-top:1px solid var(--line)}
.lrow .nm{font-weight:600}
.lrow .sub{font-size:13px;color:var(--muted);margin-top:2px}
#ledger{display:grid;gap:14px}
#ledger:empty{display:none}
.pw button[hidden]{display:none}

/* Statistik */
.stats .sec-h .seg button{padding:5px 10px;font-size:12.5px}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart .bar{fill:color-mix(in srgb,var(--ink) 55%,var(--surface))}
.chart .bar.now{fill:var(--ink)}
.chart .hit{fill:transparent}
.chart .col:hover .bar{fill:var(--ink)}
.chart .col:hover .tick{fill:var(--ink)}
.chart text{font:600 12.5px var(--body);text-anchor:middle}
.chart .val{fill:var(--ink)}
.chart .tick{fill:var(--muted);font-weight:500}
.heat{display:grid;grid-template-columns:22px repeat(24,minmax(0,1fr));gap:2px;align-items:center}
.heat .hh{font-size:10px;color:var(--muted);text-align:left;white-space:nowrap;overflow:visible}
.heat .dd{font-size:11px;color:var(--muted)}
.heat .cell{aspect-ratio:1;border-radius:3px;background:color-mix(in srgb,var(--ink) calc(var(--a) * 100%),var(--surface-2))}
.heat .cell:hover{outline:2px solid var(--ink);outline-offset:1px}
.rank{display:grid;gap:12px}
.rk{display:grid;grid-template-columns:22px 1fr auto;gap:2px 8px;align-items:baseline}
.rk .pos{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.rk .nm{font-weight:600}
.rk .v{font-variant-numeric:tabular-nums;font-weight:600}
.rk .track{grid-column:2/4;height:4px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.rk .track span{display:block;height:100%;border-radius:999px;background:var(--ink)}

/* ---------- landing page (visitors who are not logged in) ---------- */
main.landing{display:block;padding:0!important}
.land-login{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.22);background:transparent;color:var(--head-ink);font:600 14px/1 var(--body);padding:9px 14px;border-radius:999px;cursor:pointer}
.land-login:hover{background:rgba(255,255,255,.08)}
.land-login .ico{width:17px;height:17px}
/* Built like a product page: a black hero, big tight headlines in the body font, white tiles on the grey ground,
   a black section for the crest close-ups. Motion only runs with html.lp-motion (app.js, off for reduced motion). */
header.top.glass{background:rgba(12,12,12,.7);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.wrap-wide{max-width:1080px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.lp-eyebrow{margin:0;font:600 13px/1.2 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--head-muted)}
.lp-eyebrow.dark{color:var(--muted)}
.lp-h2{margin:0 0 .3em;font:700 clamp(38px,6.6vw,76px)/1.02 var(--body);letter-spacing:-.035em;text-wrap:balance}
.lp-sub{margin:0 auto;max-width:600px;font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--muted);text-wrap:pretty}
.lp-pill{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:13px 24px;font:600 16.5px/1 var(--body);background:#fff;color:#0b0b0b;cursor:pointer;transition:transform .2s,opacity .2s}
.lp-pill:hover{opacity:.9}.lp-pill:active{transform:scale(.97)}
.lp-pill.dark{background:var(--ink);color:var(--on-ink)}
.lp-link{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:13px 6px;color:#fff;font:600 16.5px/1 var(--body);cursor:pointer}
.lp-link:hover{text-decoration:underline;text-underline-offset:4px}

/* hero */
.lp-hero{position:relative;overflow:hidden;margin-top:calc(-1 * var(--head-h));min-height:100vh;min-height:100svh;padding:calc(var(--head-h) + clamp(40px,9vh,96px)) 20px 0;display:grid;align-content:start;justify-items:center;text-align:center;color:#fff;
  background:radial-gradient(70% 50% at 50% 78%,rgba(255,255,255,.11),transparent 70%),radial-gradient(120% 60% at 50% 0%,#1c1c1c,transparent 60%),#000}
.lp-hero-txt{display:grid;justify-items:center;gap:18px;will-change:transform,opacity}
.lp-hero h1{margin:0;font:700 clamp(48px,11.5vw,124px)/.98 var(--body);letter-spacing:-.045em}
.lp-hero h1 span{display:block;background:linear-gradient(180deg,#fff 35%,#a3a3a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.04em}
.lp-hero h1 span:last-child{background-image:linear-gradient(180deg,#9a9a9a,#4d4d4d)}
.lp-lede{margin:0;max-width:520px;font-size:clamp(17px,2.2vw,21px);line-height:1.45;color:#a1a1a6;text-wrap:balance}
.lp-ctas{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;margin-top:4px}
.lp-crest{width:min(600px,92vw);aspect-ratio:1;margin-top:clamp(28px,6vh,64px);margin-bottom:calc(min(600px,92vw) * -.28);background:url("/img/crest-hero.webp") center/contain no-repeat;will-change:transform,opacity}

/* statement that lights up word by word */
.lp-statement{background:var(--surface);padding:clamp(110px,20vh,220px) max(24px,env(safe-area-inset-left,0px));display:grid;gap:22px;justify-items:center}
.lp-words{margin:0;max-width:980px;text-align:center;font:650 clamp(30px,5.4vw,60px)/1.14 var(--body);letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
html.lp-motion .lp-words span{color:#cfcdc8;transition:color .45s ease}
html.lp-motion .lp-words span.lit{color:var(--ink)}

/* bento tiles */
.lp-bento{padding-block:clamp(90px,14vh,150px);text-align:center}
.bento{display:grid;gap:16px;margin-top:40px;text-align:left}
.bento .tile{position:relative;overflow:hidden;background:var(--surface);border-radius:28px;padding:30px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.bento .tile:hover{transform:translateY(-4px);box-shadow:0 22px 50px -24px rgba(0,0,0,.25)}
.bento .tile h3{margin:0;font:700 23px/1.15 var(--body);letter-spacing:-.02em}
.bento .tile p{margin:0;color:var(--muted);font-size:16.5px;line-height:1.45}
.bento .tile-ico{position:absolute;top:26px;left:28px;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;background:var(--surface-2)}
.bento .tile-ico .ico{width:25px;height:25px}
.bento .tile-year{background:#0b0b0b;color:#fff;min-height:300px;background-image:radial-gradient(90% 90% at 100% 0%,#2a2a2a,transparent 60%)}
.bento .tile-year .k{margin-bottom:auto;font:600 13px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:#8d8d92}
.bento .tile-year .year{font:700 clamp(96px,17vw,190px)/.86 var(--body);letter-spacing:-.06em;background:linear-gradient(180deg,#fff 30%,#6e6e6e);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.bento .tile-year .v{color:#a1a1a6;font-size:17px;max-width:340px}
.bento .tile-sw{grid-column:1/-1;min-height:260px;justify-content:center;align-items:center;text-align:center;background:linear-gradient(90deg,#000 50%,#fff 50%);box-shadow:inset 0 0 0 1px var(--line)}
.sw-txt,.sw-sub{color:#fff;mix-blend-mode:difference}
.sw-txt{font:700 clamp(46px,10vw,124px)/.95 var(--body);letter-spacing:-.045em}
.sw-sub{font:600 13px/1 var(--body);letter-spacing:.2em;text-transform:uppercase;margin-top:10px}
@media (min-width:640px){.bento{grid-template-columns:1fr 1fr}.tile-year{grid-column:span 2}}
@media (min-width:960px){.bento{grid-template-columns:repeat(3,1fr)}.bento .tile{min-height:250px}}

/* crest close-ups */
.lp-crestory{background:#000;color:#fff;padding-block:clamp(100px,16vh,180px);text-align:center}
.lp-crestory .lp-eyebrow{margin-bottom:14px}
.lp-crestory .lp-sub{color:#a1a1a6}
.lp-figs{display:grid;gap:16px;margin-top:56px}
.lp-fig{position:relative;margin:0;height:clamp(300px,44vw,480px);border-radius:28px;overflow:hidden;background:radial-gradient(80% 80% at 50% 45%,#1d1d1f,#0a0a0a)}
/* The images are white already (no CSS filter), and only the inner <i> scales, under a mask that stays put: cheap on phones. */
.lp-zoom{position:absolute;inset:8% 8% 16%;-webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 70%,transparent 100%)}
.lp-zoom i{position:absolute;inset:0;background:var(--img) center/contain no-repeat;will-change:transform}
.lp-fig figcaption{position:absolute;left:28px;bottom:22px;font:600 19px/1 var(--body);letter-spacing:-.01em;color:#e8e8ed}
@media (min-width:760px){.lp-figs{grid-template-columns:1.7fr 1fr}}

/* join + members */
.lp-join{padding-block:clamp(100px,16vh,170px) 56px;text-align:center}
.lp-member{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;max-width:760px;margin:52px auto 0;padding:22px 24px;border-radius:28px;background:var(--surface);text-align:left;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.lp-member>div:nth-child(2){flex:1 1 280px;display:grid;gap:3px}
.lp-member b{font-size:17px}
.lp-member span{color:var(--muted);font-size:15px}
.crest-sm{width:52px;height:52px;flex:none;background:var(--crest) center/contain no-repeat}
.lp-foot{padding-block:22px calc(36px + env(safe-area-inset-bottom,0px));color:var(--muted);font-size:13px}
.lp-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-top:20px;border-top:1px solid var(--line)}
.lp-flink{border:0;background:none;padding:0;color:var(--ink-2);font:inherit;cursor:pointer}
.lp-flink:hover{text-decoration:underline}
.lp-foot .ver{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.04em;opacity:.7}

/* motion */
html.lp-motion .landing .rv{opacity:0;transform:translateY(36px);transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms),transform 1s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
html.lp-motion .landing .rv.in{opacity:1;transform:none}
html.lp-motion .landing .tile.rv.in:hover{transform:translateY(-4px)}
@keyframes lp-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes lp-rise{from{opacity:0;transform:translateY(80px) scale(.94)}to{opacity:1;transform:none}}
html.lp-motion .lp-hero-txt>*{animation:lp-up 1.1s cubic-bezier(.2,.7,.2,1) both}
html.lp-motion .lp-hero-txt>:nth-child(2){animation-delay:.08s}
html.lp-motion .lp-hero-txt>:nth-child(3){animation-delay:.2s}
html.lp-motion .lp-hero-txt>:nth-child(4){animation-delay:.3s}
html.lp-motion .lp-crest{animation:lp-rise 1.6s .25s cubic-bezier(.2,.7,.2,1) backwards}
.pager{overflow:hidden;transition:height .25s;margin-inline:-16px} /* to the screen edges, so pages slide in from there */
.pager-track{display:flex;align-items:flex-start;transition:transform .3s cubic-bezier(.2,.8,.2,1);touch-action:pan-y}
.pager-track.drag{transition:none}
.pager-page{flex:0 0 100%;min-width:0;display:grid;gap:14px;padding:0 16px 4px}
@media (min-width:1024px){.pager{margin-inline:-32px}.pager-page{padding-inline:32px}}
.page-hint{margin:0}.page-hint:empty{display:none}

/* Join by QR code: the admin's switch, the name list on the phone and the big code for the projector */
.join-box b{display:flex;align-items:center;gap:8px}
.join-box.on{box-shadow:var(--shadow),inset 3px 0 0 #2f8f4e}
.join-pick{width:100%;padding:8px!important;display:grid;gap:6px}
.join-pick .search{margin:6px 6px 2px}
.join-pick .list button{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:0;border-radius:12px;background:none;font:600 16px var(--body);color:var(--ink);text-align:left}
.join-pick .list button span:not(.av){flex:1}
.join-pick .list button:active{background:var(--surface-2)}
.join-pick .list button .ico{color:var(--muted)}
.auth .foot a{color:var(--ink);font-weight:600}
dialog.qr-show[open]{display:grid}
dialog.qr-show{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;border-radius:0;background:#fff;place-items:center}
dialog.qr-show .qr-x{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:16px}
.qr-in{display:grid;justify-items:center;gap:14px;text-align:center;padding:24px}
.qr-in h2{font:700 clamp(28px,5vw,52px)/1.1 var(--display)}
.qr-in>p{color:var(--muted);font-size:clamp(16px,2vw,22px)}
.qr-code svg{display:block;width:min(70vh,82vw);height:auto}
.qr-count{font-size:clamp(18px,2.4vw,26px);color:var(--ink-2)}
.qr-count b{font:700 1.6em/1 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
/* After a Termin's "Antworten bis" the answer buttons stay readable but can't be tapped. */
.seg.shut button[aria-pressed="true"]{opacity:.8}
.ev-meta .until.shut{color:var(--ink)}
.move-bar{background:var(--surface);color:var(--ink);font-size:13.5px;border-bottom:1px solid var(--line)}
.move-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-block:8px}
.move-bar .wrap>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
.move-bar button{flex:none}
.moved{display:grid;gap:14px} .moved p{margin:0}