/* Vereinslog · Gestaltungssystem, uebernommen aus dem Prototyp.
   Die Vereinsfarbe kommt zur Laufzeit als --accent aus den Mandantendaten. */
:root{
  --accent:#1B6B49; --accent-auf:#FFFFFF; --accent-rail:#1B6B49; --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent); --accent-ink:color-mix(in srgb,var(--accent) 82%,#000);
  --ground:#F3F6F4; --surface:#FFFFFF; --surface-2:#F7F9F8; --surface-3:#EDF1EF;
  --ink:#121A18; --ink-2:#4D5A56; --ink-3:#808E89;
  --line:#DDE4E1; --line-2:#C6D0CC;
  --rail:#0E1518; --rail-2:#161F22; --rail-ink:rgba(255,255,255,.74); --rail-ink-2:rgba(255,255,255,.40); --rail-line:rgba(255,255,255,.09);
  --good:#0ca30c; --good-bg:#E4F4E4; --warn:#fab219; --warn-bg:#FBF0D8; --warn-ink:#8A6206;
  --crit:#d03b3b; --crit-bg:#FAE4E4; --info:#2a78d6; --info-bg:#E3EDFA;
  --c1:#2a78d6; --c2:#eb6834; --c3:#1baf7a;
  --grid:#E5EAE7; --axis:#C6D0CC; --chart-ink:#121A18; --chart-muted:#808E89;
  --shadow-1:0 1px 2px rgba(10,20,17,.05);
  --shadow-2:0 2px 4px rgba(10,20,17,.05), 0 12px 28px -18px rgba(10,20,17,.35);
  --shadow-3:0 18px 50px -24px rgba(10,20,17,.55);
  --r:12px; --r-s:8px;
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --accent-soft:color-mix(in srgb,var(--accent) 26%,transparent); --accent-ink:color-mix(in srgb,var(--accent) 45%,#fff);
  --ground:#0B0F10; --surface:#141A1B; --surface-2:#1A2223; --surface-3:#212A2B;
  --ink:#E7EDEB; --ink-2:#A6B4B0; --ink-3:#7A8884;
  --line:#26302F; --line-2:#37433F;
  --rail:#080C0D; --rail-2:#111819;
  --good-bg:#122B12; --warn-bg:#2E2510; --warn-ink:#E3B65A; --crit-bg:#331616; --info-bg:#122238;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70;
  --grid:#242E2D; --axis:#37433F; --chart-ink:#E7EDEB; --chart-muted:#8A9894;
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.9);
  --shadow-3:0 18px 50px -24px rgba(0,0,0,1);
}}
:root[data-theme="dark"]{
  --accent-soft:color-mix(in srgb,var(--accent) 26%,transparent); --accent-ink:color-mix(in srgb,var(--accent) 45%,#fff);
  --ground:#0B0F10; --surface:#141A1B; --surface-2:#1A2223; --surface-3:#212A2B;
  --ink:#E7EDEB; --ink-2:#A6B4B0; --ink-3:#7A8884;
  --line:#26302F; --line-2:#37433F;
  --rail:#080C0D; --rail-2:#111819;
  --good-bg:#122B12; --warn-bg:#2E2510; --warn-ink:#E3B65A; --crit-bg:#331616; --info-bg:#122238;
  --c1:#3987e5; --c2:#d95926; --c3:#199e70;
  --grid:#242E2D; --axis:#37433F; --chart-ink:#E7EDEB; --chart-muted:#8A9894;
  --shadow-2:0 2px 4px rgba(0,0,0,.4), 0 12px 28px -18px rgba(0,0,0,.9);
  --shadow-3:0 18px 50px -24px rgba(0,0,0,1);
}
*{box-sizing:border-box}
/* Seitwaerts scrollt nur, was dafuer gebaut ist - eine breite Tabelle in
   ihrem Kasten. Die Seite selbst nie: auf dem Handy liess sie sich sonst
   ins Leere schieben. clip statt hidden, damit position:sticky bleibt. */
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.dsp{font-family:Archivo,system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0;text-wrap:balance}
.num{font-family:"IBM Plex Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent)}
::selection{background:var(--accent);color:var(--accent-auf)}

#app{display:flex;min-height:100%}
.rail{width:244px;flex:none;background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);border-right:1px solid var(--rail-line);transition:transform .2s ease}
.rail-head{padding:12px 12px 10px;border-bottom:1px solid var(--rail-line);flex:none}
.club{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:1px solid transparent;border-radius:10px;padding:6px;cursor:pointer;text-align:left}
.club:hover{background:rgba(255,255,255,.06);border-color:var(--rail-line)}
.crest{width:38px;height:38px;flex:none;border-radius:9px;background:var(--accent-rail);color:var(--accent-auf);display:grid;place-items:center;font-family:Archivo,sans-serif;font-weight:700;font-size:14px;letter-spacing:.03em;overflow:hidden}
.crest img{width:100%;height:100%;object-fit:cover;display:block}
.club-t{min-width:0;flex:1}
.club-t b{display:block;color:#fff;font-family:Archivo,sans-serif;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.club-t span{display:block;font-size:11px;color:var(--rail-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.club .caret{color:var(--rail-ink-2);font-size:11px}
.rail-nav{flex:1;min-height:0;overflow-y:auto;padding:8px 10px 14px;scrollbar-width:none;-ms-overflow-style:none;mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 18px),transparent 100%)}
.rail-nav::-webkit-scrollbar{width:0;height:0}
.nav-g{margin-top:9px}
.nav-g:first-child{margin-top:2px}
.nav-g{margin-top:2px}
.nav-g > summary{display:flex;align-items:center;gap:6px;list-style:none;cursor:pointer;font:600 9.5px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--rail-ink-2);padding:8px;margin:0;border-radius:6px}
.nav-g > summary::-webkit-details-marker{display:none}
.nav-g > summary::after{content:"";margin-left:auto;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg) translate(1px,-1px);transition:transform .15s ease}
.nav-g[open] > summary::after{transform:rotate(45deg) translate(-1px,-1px)}
.nav-g > summary:hover{background:rgba(255,255,255,.06);color:var(--rail-ink)}
.nav-g[open] > summary{color:var(--rail-ink)}
.nav-i{display:flex;align-items:center;gap:8px;text-decoration:none;width:100%;background:none;border:0;border-radius:7px;padding:5px 9px;color:var(--rail-ink);cursor:pointer;font-size:13px;line-height:1.35;text-align:left;position:relative}
.nav-i:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-i[aria-current="true"],.nav-i[aria-current="page"]{background:color-mix(in srgb,var(--accent-rail) 32%,transparent);color:#fff;font-weight:500}
.nav-i[aria-current="true"]::before,.nav-i[aria-current="page"]::before{content:"";position:absolute;left:0;top:5px;bottom:5px;width:3px;border-radius:0 3px 3px 0;background:var(--accent-rail)}
.nav-i .ic{width:17px;flex:none;opacity:.85;display:grid;place-items:center}
.nav-i .cnt{margin-left:auto;font:500 10.5px/16px "IBM Plex Mono",monospace;background:rgba(255,255,255,.12);border-radius:20px;padding:0 6px;min-width:20px;text-align:center}
.nav-i .cnt.hot{background:var(--crit);color:#fff}
.rail-foot{border-top:1px solid var(--rail-line);padding:8px 10px;flex:none}
.me-chip{display:flex;align-items:center;gap:9px;width:100%;background:none;border:1px solid transparent;border-radius:9px;padding:5px 6px;cursor:pointer;text-align:left}
.me-chip:hover{background:rgba(255,255,255,.06);border-color:var(--rail-line)}
.avi{width:28px;height:28px;flex:none;border-radius:50%;background:var(--rail-2);border:1px solid var(--rail-line);color:#fff;display:grid;place-items:center;font:600 11.5px/1 "IBM Plex Sans",sans-serif}
.me-chip .club-t b{font-family:"IBM Plex Sans",sans-serif;font-size:13px}

/* Breite Tabellen scrollen in ihrem eigenen Kasten. Ohne clip rechnet der
   Browser ihre volle Breite trotzdem der Seite zu - auf dem Handy liess
   sich die Seite dann ins Leere schieben. clip statt hidden, damit
   position:sticky weiter funktioniert. */
.main{flex:1;min-width:0;margin-left:244px;display:flex;flex-direction:column;overflow-x:clip}
.topbar{position:sticky;top:0;z-index:30;background:var(--surface);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.topbar-in{display:flex;align-items:center;gap:12px;padding:9px 20px;min-height:56px}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;width:34px;height:34px;cursor:pointer;color:var(--ink-2)}
.crumb{font-size:12.5px;color:var(--ink-3);display:flex;gap:6px;align-items:center;min-width:0}
.crumb b{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-sp{flex:1}
.search{display:flex;align-items:center;gap:7px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;min-width:140px;max-width:250px;flex:1}
.search input{border:0;background:none;outline:none;width:100%;font-size:13.5px}
.tb-btn{background:var(--surface);border:1px solid var(--line);border-radius:8px;height:34px;padding:0 10px;cursor:pointer;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px;font-size:13px;white-space:nowrap}
.tb-btn:hover{border-color:var(--line-2);color:var(--ink)}
.tb-btn .dot{width:6px;height:6px;border-radius:50%;background:var(--crit)}

.content{padding:22px 20px 64px;max-width:1340px;width:100%}
.scrim{position:fixed;inset:0;background:rgba(6,12,10,.5);z-index:45;display:none}
@media (max-width:1000px){
  .rail{transform:translateX(-100%);box-shadow:var(--shadow-3)}
  body.nav-open .rail{transform:none}
  .main{margin-left:0}
  .burger{display:grid;place-items:center}
  body.nav-open .scrim{display:block}
  .content{padding:18px 16px 64px}
}

.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.phead h1{font-size:26px;line-height:1.15}
.phead p{margin:5px 0 0;color:var(--ink-2);font-size:13.5px;max-width:76ch}
.phead .acts{display:flex;gap:8px;flex-wrap:wrap}
.sect{margin-top:22px}
.sect > h2{font:600 11px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);margin-bottom:10px}
.grid{display:grid;gap:14px}
/* min(...,100%) statt der festen Mindestbreite: bleibt weniger Platz uebrig,
   schrumpft die Spalte mit, statt aus ihrem Kasten zu laufen. */
.g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));align-items:start}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));align-items:start}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(186px,100%),1fr))}
/* Ein Feld ueber zwei Spalten braucht auch zwei. Bleibt auf dem Handy nur
   eine uebrig, erzeugt "span 2" eine zweite und sprengt den Kasten -
   deshalb nimmt es dort schlicht die ganze Zeile. */
@media (max-width:560px){.grid > [style*="grid-column"]{grid-column:1 / -1 !important}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-1);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:15.5px}
.card-h .meta{font-size:12px;color:var(--ink-3)}
.card-b{padding:14px}
.card-b.flush{padding:0}

.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:1px;min-width:0}
.kpi .l{font-size:11.5px;color:var(--ink-3)}
.kpi .v{font-family:Archivo,sans-serif;font-weight:700;font-size:27px;line-height:1.12;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .s{font-size:12px;color:var(--ink-2)}
.kpi.t-good .v{color:var(--good)} .kpi.t-crit .v{color:var(--crit)} .kpi.t-accent .v{color:var(--accent)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap;border:1px solid transparent}
.pill.good{background:var(--good-bg);color:var(--good)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.crit{background:var(--crit-bg);color:var(--crit)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.acc{background:var(--accent-soft);color:var(--accent-ink)}
.pill.mut{background:var(--surface-3);color:var(--ink-2);border-color:var(--line)}

/* text-decoration:none - ein Knopf sieht wie ein Knopf aus, auch wenn er
   technisch ein Link ist. Sonst erbt er die Unterstreichung von <a>. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:8px;padding:7px 13px;font-size:13.5px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--ink-3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-auf)}
.btn.pri:hover{filter:brightness(1.09)}
.btn.gho{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.gho:hover{background:var(--surface-3);color:var(--ink)}
.btn.sm{padding:4px 9px;font-size:12.5px;border-radius:7px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.nav-i:focus-visible,.club:focus-visible,.me-chip:focus-visible,input:focus-visible,select:focus-visible,.tb-btn:focus-visible,.seg button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.inp{width:100%;min-width:0;height:38px;background:var(--surface);border:1px solid var(--line-2);border-radius:8px;padding:7px 10px;font-size:13.5px;line-height:1.4;outline:none}
/* Datums- und Zeitfelder bringen in Chrome eine eigene Mindestbreite mit
   und sprengen damit auf dem Handy ihre Spalte. */
.inp[type=date],.inp[type=time]{min-width:0;max-width:100%}
textarea.inp{height:auto;min-height:76px;resize:vertical}
select.inp{padding-right:28px}
input[type=color].inp{width:58px;padding:3px;cursor:pointer}
.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.fld{display:flex;flex-direction:column;gap:4px}
.grid .fld{min-height:72px}
.grid .fld > label{min-height:15px}
.fld .hint{display:block;line-height:1.3}
input[type=file].inp{padding:5px 8px;font-size:12.5px;background:var(--surface-2);line-height:26px}
input[type=file].inp::file-selector-button{font:inherit;font-size:12.5px;margin-right:9px;padding:4px 10px;border:1px solid var(--line-2);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer}
.fld label{font-size:11.5px;color:var(--ink-3);font-weight:500}
.fld .hint{font-size:11.5px;color:var(--ink-3)}

/* Breite Tabellen scrollen in ihrem Kasten - nicht die ganze Seite. */
.tw{overflow-x:auto;max-width:100%}
.card-b.flush > .tw{max-width:100%}
table{border-collapse:collapse;width:100%;font-size:13.5px;min-width:620px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{background:var(--surface-2);font:600 10.5px/1.4 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--surface-2)}
tbody tr.sel{background:var(--accent-soft)}
td.n,th.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
td.clk{cursor:pointer}
.tname{font-weight:600}
.tsub{font-size:11.5px;color:var(--ink-3)}

.bar{height:6px;border-radius:20px;background:var(--surface-3);overflow:hidden;min-width:56px}
.bar>span{display:block;height:100%;border-radius:20px;background:var(--good)}
.bar.mid>span{background:var(--warn)} .bar.low>span{background:var(--crit)}
.note{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--surface);border-radius:0 var(--r-s) var(--r-s) 0;padding:11px 13px;font-size:13px;color:var(--ink-2)}
.note b{color:var(--ink)} .note.w{border-left-color:var(--warn)} .note.c{border-left-color:var(--crit)}
.hint-l{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--ink-3);margin-top:9px}
.hint-l .i{flex:none;width:15px;height:15px;border-radius:50%;border:1px solid var(--ink-3);display:grid;place-items:center;font:600 9.5px/1 sans-serif;margin-top:2px}
.empty{padding:26px 14px;text-align:center;color:var(--ink-3);font-size:13.5px}
.fl{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.seg{display:inline-flex;background:var(--surface-3);border-radius:8px;padding:2px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;border-radius:6px;padding:4px 11px;font-size:12.5px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.kv:first-child{border-top:0}
.kv .k{color:var(--ink-2)} .kv .v{font-weight:500;text-align:right}
.kv.tot{border-top:2px solid var(--line-2);font-weight:600}
.mono-box{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);padding:11px;font:400 11.5px/1.65 "IBM Plex Mono",monospace;color:var(--ink-2);overflow-x:auto;white-space:pre}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);margin-top:8px}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:-1px}

.rule{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2);font-size:13.5px}
.rule + .rule{margin-top:8px}
.rule .txt{color:var(--ink-2)}
.rule select{background:var(--surface);border:1px solid var(--line-2);border-radius:7px;padding:3px 7px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;max-width:100%}
.schicht-hinweis{margin:4px 0 2px;padding:5px 9px;border-left:2px solid var(--accent);background:var(--surface-2);border-radius:0 6px 6px 0;font-size:12.5px;color:var(--ink-2)}
.sr{border-top:1px solid var(--line)}
.sr:first-child{border-top:0}
.kette{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.kette .kg{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface)}
.kette .kn{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;background:var(--accent);color:var(--accent-auf);font-size:11px;font-weight:700;margin-bottom:3px}
.kette .kg.hier{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.kette .kg b{font-size:13.5px}
.kette .kg span:last-child{font-size:12.5px;color:var(--ink-3)}
.kette .kp{display:flex;align-items:center;color:var(--ink-3);font-size:17px}
@media (max-width:820px){.kette .kp{display:none}}
.matrix{min-width:680px}
@media (max-width:520px){.matrix{min-width:560px}
.matrix th.mp,.matrix td.mp{width:130px;padding-left:12px}
.matrix .md{display:none}}
.matrix th{vertical-align:bottom;padding:9px 6px;text-align:center;position:relative}
.matrix th.mp{text-align:left;padding-left:15px;width:210px}
.matrix .mn{display:block;font-size:12px;line-height:1.25;text-transform:none;letter-spacing:0;color:var(--ink);font-weight:600}
.matrix .mz{display:block;font-family:'Roboto Mono',monospace;font-size:12.5px;color:var(--ink-2);margin-top:3px}
.matrix .mz.knapp{color:var(--crit);font-weight:700}
.matrix .md{display:block;font-size:10.5px;line-height:1.25;color:var(--ink-3);text-transform:none;letter-spacing:0;margin-top:2px;max-width:104px}
.matrix .mx{position:absolute;top:2px;right:2px;border:0;background:none;color:transparent;cursor:pointer;font-size:14px;line-height:1;padding:1px 4px;border-radius:5px}
.matrix th:hover .mx{color:var(--ink-3)}
.matrix .mx:hover{background:var(--crit-bg);color:var(--crit)}
.matrix td.mp{padding-left:15px}
.matrix td.mc{text-align:center;padding:0}
.matrix td.mc label{display:block;padding:9px 0;cursor:pointer}
.matrix td.mc label:hover{background:var(--surface-2)}
.matrix tbody tr:hover td{background:var(--surface-2)}
/* Nur fuer Vorlesehilfen. position:absolute ohne gesetzten Bezugspunkt
   haengt am Seitenrand - deshalb zusaetzlich links festgenagelt. */
.sr-only{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sr > summary{list-style:none;cursor:pointer}
.sr > summary::-webkit-details-marker{display:none}
.sr > summary:hover{background:var(--surface-2)}
.sr-k{display:grid;grid-template-columns:132px minmax(0,1fr) 186px 96px 92px;gap:14px;align-items:start;padding:13px 15px}
.sr-zeit{white-space:nowrap}
.sr-zeit b{display:block;font-size:13.5px;color:var(--ink)}
.sr-zeit span{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.sr-name{font-family:Archivo,sans-serif;font-weight:700;font-size:14.5px;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.sr-was .tsub{margin-top:2px}
.sr-wer{font-size:13px}
.sr-wer .num{font-size:13.5px}
.sr-stand{text-align:right}
.sr-auf{text-align:right;font-size:12.5px;color:var(--ink-3)}
.sr-auf::after{content:' \25BE'}
.sr[open] .sr-auf{color:var(--ink)}
.sr[open] .sr-auf::after{content:' \25B4'}
.sr-f{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;align-items:start;margin:0 15px 14px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface-2)}
@media (max-width:1100px){.sr-k{grid-template-columns:120px minmax(0,1fr) 92px}.sr-wer{grid-column:2;grid-row:2}.sr-auf{grid-column:3;grid-row:2;align-self:end}.sr-f{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Auf dem Handy reicht eine Spalte - zwei lassen die Beschriftungen
   aus ihren Feldern laufen. */
@media (max-width:560px){.sr-f{grid-template-columns:1fr}
.sr-f .fld[style*='span']{grid-column:auto!important}}
/* Ein verstecktes Element ist versteckt - auch wenn seine Klasse
   display:flex setzt. Ohne das steht .fld[hidden] weiter da. */
[hidden]{display:none!important}
.rule .felder{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.rule .felder select{flex:1 1 128px;min-width:0}
.rule .felder .jahre{display:inline-flex;align-items:center;gap:5px}
.rule input[type=number]{background:var(--surface);border:1px solid var(--line-2);border-radius:7px;font-weight:600;color:var(--ink)}
.rule .rm{color:var(--ink-3);background:none;border:0;cursor:pointer;font-size:16px;line-height:1;padding:2px 5px;border-radius:6px}
.rule .rm:hover{background:var(--crit-bg);color:var(--crit)}

.pop{position:fixed;z-index:70;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-3);min-width:246px;max-width:min(330px,calc(100vw - 24px));overflow:hidden}
.pop h6{font:600 10px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;letter-spacing:.11em;color:var(--ink-3);padding:11px 13px 6px;margin:0}
.pop-i{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:8px 13px;cursor:pointer;text-align:left;font-size:13.5px}
.pop-i:hover{background:var(--surface-2)}
.pop-i[aria-current="true"]{background:var(--accent-soft)}
.pop-sep{height:1px;background:var(--line);margin:5px 0}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(450px,100vw);background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-3);z-index:80;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
.drawer-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.drawer-b{overflow-y:auto;padding:14px;flex:1}
.scrim2{position:fixed;inset:0;background:rgba(6,12,10,.45);z-index:75}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:90;background:var(--ink);color:var(--ground);padding:9px 16px;border-radius:22px;font-size:13px;box-shadow:var(--shadow-3);max-width:calc(100vw - 32px);text-align:center}
@media (prefers-reduced-motion:no-preference){
  #toast{animation:tin .2s ease-out}
  @keyframes tin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
  .drawer{animation:din .22s ease-out}
  @keyframes din{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
  .pop{animation:pin .13s ease-out}
  @keyframes pin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}

.login{display:grid;grid-template-columns:1.05fr .95fr;min-height:100%;background:var(--surface)}
@media (max-width:900px){.login{grid-template-columns:1fr}.login-art{display:none}
  /* Am Handy scrollt die Seite, nicht ein Kasten darin. */
  .login-form{max-height:none;overflow:visible;padding:26px 18px}}
.login-art{position:relative;background:var(--rail);color:#fff;padding:40px;display:flex;flex-direction:column;justify-content:space-between;gap:28px;overflow:hidden}
.login-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(90deg,transparent 0 78px,rgba(255,255,255,.045) 78px 79px),radial-gradient(120% 80% at 78% 10%,color-mix(in srgb,var(--accent) 52%,transparent) 0%,transparent 62%)}
.login-art > *{position:relative;z-index:1}
.brandmark{display:flex;align-items:center;gap:10px;font-family:Archivo,sans-serif;font-weight:700;font-size:17px}
.brandmark .m{width:30px;height:30px;border-radius:8px;background:var(--accent-rail);color:var(--accent-auf);display:grid;place-items:center;font-size:13px}
.login-art h2{font-size:clamp(27px,3.4vw,40px);line-height:1.08;max-width:15ch;margin-bottom:12px}
.login-art p{color:rgba(255,255,255,.66);max-width:44ch;font-size:14.5px;margin:0}
.art-stats{display:flex;gap:26px;flex-wrap:wrap;border-top:1px solid var(--rail-line);padding-top:18px}
.art-stats div b{display:block;font-family:Archivo,sans-serif;font-size:21px;font-weight:700}
.art-stats div span{font-size:11.5px;color:rgba(255,255,255,.5)}
/* Die rechte Spalte scrollt bei Bedarf in sich - die Seite selbst nie.
   Sonst rutscht der Anmeldeknopf auf einem 768er Laptop unter den Rand. */
/* 'safe center' heisst: mittig, solange Platz ist - sonst oben anfangen,
   statt beide Enden abzuschneiden. */
.login-form{display:flex;flex-direction:column;align-items:center;
            justify-content:safe center;padding:36px 20px;
            max-height:100vh;overflow-y:auto;overscroll-behavior:contain}
.login-inner{width:100%;max-width:392px}
.login-inner h1{font-size:25px;margin-bottom:4px}
.login-inner > p{color:var(--ink-2);font-size:13.5px;margin:0 0 20px}
.demo-acc{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 10px;cursor:pointer;margin-bottom:5px}
.demo-acc:hover{border-color:var(--accent);background:var(--surface-2)}
.demo-acc .club-t b{color:var(--ink);font-family:"IBM Plex Sans",sans-serif;font-size:13.5px;font-weight:600}
.demo-acc .club-t span{color:var(--ink-3);font-size:11.5px}
.sep{display:flex;align-items:center;gap:10px;color:var(--ink-3);font-size:11.5px;margin:13px 0}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.tenant-pick{max-width:470px;margin:0 auto;padding:44px 20px}

/* ---- Am Handy wird getippt, nicht gezielt ----------------------------------
   Zwei Dinge, die am Schreibtisch nicht auffallen:
   Erstens trifft ein Daumen keine 28px hohe Zeile. Die Leiste ist hier
   ohnehin eine Schublade ueber dem halben Bildschirm - Platz ist da.
   Zweitens zoomt iOS beim Antippen in jedes Feld unter 16px hinein und
   laesst die Seite danach verschoben stehen. Also 16px, ueberall wo man
   hineinschreibt. */
@media (max-width:1000px){
  .nav-i{padding:10px 11px;min-height:42px;font-size:14.5px;gap:10px}
  .nav-i .cnt{font:500 11.5px/18px "IBM Plex Mono",monospace}
  .nav-g > summary{font-size:12px;letter-spacing:.1em;padding:11px 9px;min-height:40px}
  .club-t span,.club .caret{font-size:12px}
  .me-chip{padding:9px 7px}
  .burger{width:40px;height:40px}
  .tb-btn{height:40px;padding:0 12px}
  .crumb{font-size:13px;min-width:0}
  .crumb .oben{display:none}
  .crumb b{overflow:visible;text-overflow:clip}

  .inp{height:42px;font-size:16px}
  select.inp{height:42px}
  textarea.inp{height:auto;min-height:88px}
  .search input{font-size:16px}
  input[type=file].inp{font-size:14px;line-height:30px}
  input[type=file].inp::file-selector-button{font-size:14px;padding:6px 11px}

  /* 11,5px liest sich am Schreibtisch als feiner Nebentext. In der Hand,
     bei Sonne, auf dem Sportplatz liest es sich gar nicht. Ab 12px. */
  .fld label,.fld .hint,.tsub,.kpi .l,.pill,.sep,.crumb,
  .demo-acc .club-t span,.art-stats div span{font-size:12.5px}
  .mono-box{font-size:12.5px}
  thead th{font-size:12px}
  .sect > h2,.pop h6,.matrix .md{font-size:12px}
  .kette .kn{font-size:12px;width:21px;height:21px}
}

/* Schaltflaechen, Kaestchen und Griffe fuer den Daumen. 29px hoch trifft man
   am Schreibtisch mit der Maus, in der Hand nicht mehr. */
@media (max-width:1000px){
  .btn{min-height:40px}
  .btn.sm{min-height:40px;padding:8px 12px}
  .btn.gho.sm{min-width:36px}
  .burger{flex:none}

  .rule{padding:12px}
  .rule select,.rule .felder select{min-height:36px;padding:6px 9px}
  .rule .rm{min-width:36px;min-height:36px;font-size:19px}

  .matrix td.mc label{padding:12px 0}
  .matrix input[type=checkbox]{width:18px;height:18px}
  .matrix .mx{min-width:30px;min-height:30px;font-size:17px}

  /* Ein 13px-Kaestchen trifft kein Daumen. Gleiches gilt ausserhalb
     der Matrix - Wochentage, Flutlicht, Rechnung ja/nein. */
  input[type=checkbox],input[type=radio]{width:18px;height:18px}
  .rail-marke span{font-size:12px!important}
}

/* Ohne Maus gibt es kein "darueberfahren". Was sich nur beim Zeigen zeigt,
   ist auf dem Handy schlicht nicht da - deshalb steht das Kreuz zum Entfernen
   einer Spalte dort dauerhaft sichtbar. */
@media (hover:none){
  .matrix .mx{color:var(--ink-3)}
}

/* ---- Navigation: ein Punkt ohne Gruppe, und der eigene Bereich unten ------
   Cockpit stand bisher als Gruppe aus einem einzigen Punkt da und musste
   aufgeklappt werden. Jetzt steht es fuer sich. */
.nav-solo{margin:2px 0 10px;font-weight:500}
.nav-eigen{margin-top:4px;padding-top:6px;border-top:1px solid var(--rail-line)}
.nav-eigen .nav-i{font-size:12.5px;padding:5px 9px;color:var(--rail-ink-2)}
.nav-eigen .nav-i:hover{color:#fff}
.rail-marke{display:flex;align-items:center;gap:7px;padding:10px 7px 2px;opacity:.45}
.rail-marke img{width:15px;height:15px;object-fit:contain}
.rail-marke span{font:600 10px/1 "IBM Plex Sans",sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--rail-ink-2)}

/* ---- Rollen: drei Stufen statt zweier Haekchen ----------------------------
   "aendern ohne sehen" ergibt keinen Sinn. Drei Knoepfe, von denen genau
   einer gilt, koennen diesen Zustand gar nicht erst herstellen. */
.stufen{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;
  overflow:hidden;background:var(--surface)}
.stufen label{position:relative;display:block}
.stufen input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.stufen span{display:block;padding:7px 10px;font-size:12.5px;color:var(--ink-3);
  border-left:1px solid var(--line);cursor:pointer;white-space:nowrap;min-height:36px;
  display:flex;align-items:center;justify-content:center}
.stufen label:first-child span{border-left:0}
.stufen input:checked + span{background:var(--accent);color:var(--accent-auf);font-weight:600}
.stufen input:focus-visible + span{outline:2px solid var(--accent);outline-offset:-2px}
.stufen input:disabled + span{opacity:.35;cursor:not-allowed}
.matrix td.mc .stufen{margin:7px 0}
.satz-zeile td{background:var(--surface-2);border-top:0;padding:9px 12px}
.satz-zeile .pill{white-space:normal;text-align:left;line-height:1.45}


/* ---- Nur ansehen ----------------------------------------------------------
   Jede Aenderung in dieser Anwendung geht durch ein POST-Formular. Wer den
   Bereich nur sehen darf, sieht deshalb dessen Schaltflaechen nicht - die
   Felder bleiben, denn ihr Inhalt ist genau das, was "sehen" meint. */
[data-nurlesen] form[method="post" i] button,
[data-nurlesen] form[method="post" i] input[type="submit"],
[data-nurlesen] form[method="post" i] input[type="file"]{display:none!important}
[data-nurlesen] form[method="post" i] .inp,
[data-nurlesen] form[method="post" i] input[type="checkbox"],
[data-nurlesen] form[method="post" i] input[type="radio"]{
  pointer-events:none;background:var(--surface-2);color:var(--ink-2)}

/* Eine Werteliste ist rechtsbuendig, solange rechts Zahlen stehen. Steht
   dort ein Satz, liest er sich so nicht - dann links. */
.kv.lang{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:start}
.kv.lang .k{font-weight:600;color:var(--ink)}
.kv.lang .v{text-align:left;font-weight:400;color:var(--ink-2);line-height:1.5}

/* Die Spaltenerklaerung in der Rechtematrix darf umbrechen. Abgeschnitten
   sagt "Vereinsdaten, Erscheinungsb..." weniger als gar nichts. */
.matrix th .md{max-width:none;white-space:normal;overflow:visible}
.matrix thead th{vertical-align:bottom;min-width:150px}
.matrix thead th.mp{min-width:170px}

/* ---- Aufgaben: Bereich als Ueberschrift, Aufgaben darunter ----------------
   Vorher lag dasselbe an drei Orten: eine Freigabenmatrix (Personen mal
   Freigaben - lief quer aus dem Bild), die Bedingungen je Dienst und die
   Verantwortlichen. Jetzt steht die Abhaengigkeit als Aufbau da:
   Bereich > Aufgabe > wer darf. Alles untereinander, nichts quer. */
.bereich{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  box-shadow:var(--shadow-1);padding:15px 16px 16px}
.bereich.ohne{border-style:dashed;background:var(--surface-2)}
.bereich-k{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:flex-start}
.bereich-k h2{font-size:19px;margin:0}
.bereich-k p{margin:4px 0 0;color:var(--ink-2);font-size:13px;max-width:60ch}
.bereich-wer{display:flex;flex-direction:column;gap:3px;font-size:13px;text-align:right}
.bereich-wer .k{display:inline-block;min-width:96px;color:var(--ink-3);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.07em}
.bereich-bearbeiten{margin-top:10px}
.bereich-bearbeiten > summary{cursor:pointer;font-size:12.5px;color:var(--ink-3);
  list-style:none;padding:4px 0;display:inline-block}
.bereich-bearbeiten > summary::-webkit-details-marker{display:none}
.bereich-bearbeiten > summary::before{content:"+ ";font-weight:600}
.bereich-bearbeiten[open] > summary::before{content:"− "}
.bereich-bearbeiten > summary:hover{color:var(--ink)}

.auf{border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);margin-top:9px}
.auf[open]{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.auf-k{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.4fr) auto;
  gap:14px;align-items:center;padding:11px 13px;cursor:pointer;list-style:none}
.auf-k::-webkit-details-marker{display:none}
.auf-k:hover{background:var(--surface-2)}
.auf-n{font-weight:600}
.auf-s{color:var(--ink-2);font-size:12.5px;line-height:1.45;text-align:left}
.auf-z{font-size:12px;color:var(--ink-3);white-space:nowrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.auf-z.keiner{color:var(--crit);border-color:var(--crit);background:var(--crit-bg)}
.auf-b{padding:4px 13px 15px;border-top:1px solid var(--line)}

.auf-wer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:13px}

/* Die Personenauswahl: ein umbrechendes Raster. Eine Tabelle mit einer
   Spalte je Aufgabe waechst mit jeder neuen Aufgabe aus dem Bild heraus -
   ein Raster nicht, es wird nur laenger. */
.auf-leute{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));
  gap:2px 14px;margin-top:11px;padding:11px;border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface-2)}
.auf-p{display:flex;align-items:center;gap:8px;padding:6px 5px;border-radius:6px;
  font-size:13.5px;cursor:pointer;min-height:34px}
.auf-p:hover{background:var(--surface)}
.auf-p.sperrt > span:first-of-type{color:var(--ink-3)}
.auf-warn{margin-left:auto;font-size:11.5px;color:var(--crit);white-space:nowrap}

.auf-bed{margin-top:16px;padding-top:13px;border-top:1px solid var(--line)}
.auf-bed h4{font:600 11px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-3);margin:0 0 9px}
.auf-neu{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.auf-neu .inp{width:auto;min-width:150px}
.auf-neu .inp.num{min-width:88px}

@media (max-width:820px){
  .auf-k{grid-template-columns:1fr auto;gap:6px 12px}
  .auf-s{grid-column:1 / -1}
  .bereich-wer{text-align:left}
  .bereich-wer .k{min-width:0;margin-right:6px}
}


/* Ein Bereich ohne Verantwortlichen ist eine Luecke, kein Nebensatz: dann
   weiss niemand, wen er fragen soll. */
.bereich-wer .fehlt b{color:var(--crit);font-weight:600}
.bereich-wer .btn{margin-top:7px;align-self:flex-end}
@media (max-width:820px){.bereich-wer .btn{align-self:flex-start}}

/* ---- Filter in der Tabellenkopfzeile -------------------------------------
   Ein Filter ueber der Tabelle laesst offen, worauf er wirkt. Steht er in
   der Spalte, die er filtert, braucht das keine Erklaerung. */
.filterbar thead tr.filter th{background:var(--surface);padding:8px 12px;
  border-bottom:2px solid var(--line-2);vertical-align:top}
.filterbar thead tr.filter .inp{display:block;width:100%;height:32px;font-size:12.5px;
  padding:5px 8px;min-width:0}
.filterbar thead tr.filter .inp + .inp{margin-top:5px}
.filterbar thead tr.filter .tsub{display:block;padding-top:7px;text-align:center;opacity:.5}
.filterbar thead tr.filter .btn{width:100%}
.mschaft{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mschaft + .mschaft{margin-top:4px}
.filterbar tfoot td{background:var(--surface-2);border-bottom:0}
@media (max-width:1000px){
  .filterbar thead tr.filter .inp{height:38px;font-size:16px}
}

/* ---- Hilfe ---------------------------------------------------------------
   Zugeklappt sagt die Zeile schon, worum es geht - wer nur nachsehen will,
   ob er richtig ist, muss nicht aufklappen. */
.hilfe{border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);
  margin-bottom:8px}
.hilfe[open]{border-color:var(--line-2);box-shadow:var(--shadow-1)}
.hilfe > summary{display:grid;grid-template-columns:minmax(150px,1fr) minmax(0,2.2fr) auto;
  gap:14px;align-items:center;padding:12px 14px;cursor:pointer;list-style:none}
.hilfe > summary::-webkit-details-marker{display:none}
.hilfe > summary:hover{background:var(--surface-2)}
.h-t{font-weight:600}
.h-w{color:var(--ink-2);font-size:12.5px;line-height:1.45;text-align:left}
.hilfe-b{padding:2px 14px 16px;border-top:1px solid var(--line)}
.hilfe-b h4{font:600 11px/1 "IBM Plex Sans",sans-serif;text-transform:uppercase;
  letter-spacing:.11em;color:var(--ink-3);margin:15px 0 8px}
.h-schritte,.h-wissen{margin:0;padding-left:20px;max-width:78ch}
.h-schritte li,.h-wissen li{margin-bottom:7px;line-height:1.6;font-size:13.5px}
.h-schritte li::marker{font-weight:600;color:var(--accent)}
.hilfe-b .btn{margin-top:14px}
@media (max-width:820px){
  .hilfe > summary{grid-template-columns:1fr auto;gap:5px 12px}
  .h-w{grid-column:1 / -1}
}


/* --- Mitgliederliste: Sortierung und Ausgetretene ---------------------- */

/* Der Spaltenkopf ist der Schalter. Ein eigener Pfeil-Knopf daneben waere
   ein zweites Ziel fuer dieselbe Sache. */
.sortk{color:inherit;text-decoration:none;white-space:nowrap}
.sortk:hover{color:var(--accent)}

/* Ausgetreten heisst nicht geloescht - nur leiser. */
tr.ausgetreten .tname{color:var(--ink-3)}
tr.ausgetreten td{opacity:.72}

/* --- Schrittfolge (Import) --------------------------------------------- */

/* Wo bin ich, was kommt noch? Ein Import ohne diese Anzeige fuehlt sich an
   wie ein Formular, das nie aufhoert. */
.schritte{display:flex;gap:8px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.schritte li{display:flex;align-items:center;gap:8px;padding:7px 13px 7px 8px;
  border:1px solid var(--line);border-radius:999px;font-size:13px;color:var(--ink-3)}
.schritte .nr{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;background:var(--line);
  color:var(--ink-2);font-size:11.5px;font-weight:600}
.schritte li.jetzt{border-color:var(--accent);color:var(--ink-1);font-weight:600}
.schritte li.jetzt .nr{background:var(--accent);color:var(--accent-auf)}
.schritte li.fertig{color:var(--ink-2)}
.schritte li.fertig .nr{background:var(--good, #2f7d4f);color:#fff}

/* --- Balken in der Statistik ------------------------------------------ */

/* Ohne Achse: die Zahl steht daneben, der Balken zeigt das Verhaeltnis.
   Eine beschriftete Achse waere mehr Zeichnung als Information. */
.stat{display:grid;grid-template-columns:minmax(90px,1fr) 2.4fr auto;
  gap:10px;align-items:center;padding:6px 0}
.stat + .stat{border-top:1px solid var(--line)}
.stat-t{font-size:13px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere}
.stat-b{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.stat-b i{display:block;height:100%;background:var(--accent);border-radius:999px}
.stat-z{font-weight:600;min-width:34px;text-align:right}
@media (max-width:560px){
  .stat{grid-template-columns:1fr auto;grid-template-areas:"t z" "b b";gap:4px 10px}
  .stat-t{grid-area:t} .stat-b{grid-area:b} .stat-z{grid-area:z}
}

/* Der Griff zum Umsortieren im Formularbaukasten. Nur er ist ziehbar -
   waere es die ganze Zeile, liesse sich der Text darin nicht markieren. */
.griff{cursor:grab;color:var(--ink-3);user-select:none;padding:5px 3px;line-height:1;
  font-size:15px;align-self:center}
.griff:active{cursor:grabbing}
[data-feld][draggable="true"]{background:var(--surface-3);border-radius:var(--r-s)}

/* ---- Handy: Menue ohne Scrollen ------------------------------------------
   Der eigene Bereich stand fest unten und nahm mit Namenskarte und Marke
   fast die halbe Schublade ein. Am Handy ist er eine Gruppe wie die anderen
   (nav-eigen-g), unten bleibt nur, wer man ist. */
.nav-eigen-g{display:none}
@media (max-width:1000px){
  .rail{width:min(300px,86vw)}
  .nav-eigen-g{display:block;margin-top:6px;padding-top:6px;border-top:1px solid var(--rail-line)}
  .rail-foot .nav-eigen,.rail-marke{display:none}
  .rail-foot{padding:6px 10px}
  .me-chip{padding:6px 7px}
  .nav-i{min-height:40px;padding:8px 11px}
  .nav-solo{margin:2px 0 6px}
  .nav-g > summary{min-height:38px;padding:10px 9px}
}

/* ---- Handy: Datumsfelder -------------------------------------------------
   Safari auf dem iPhone gibt Datums- und Zeitfeldern eine eigene Breite und
   ignoriert width:100% - sie standen breiter da als alle anderen Felder.
   Ohne die Safari-eigene Darstellung gehorchen sie wieder. Nur dort, denn
   in Chrome verschwaende sonst das Kalendersymbol. */
@supports (-webkit-touch-callout:none){
  .inp[type=date],.inp[type=time],.inp[type=datetime-local],.inp[type=month]{
    -webkit-appearance:none;appearance:none;display:block;width:100%;min-width:0;max-width:100%}
  .inp::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.4em}
}

/* ---- Handy: Kennzahlen zu zweit ------------------------------------------
   Vier Kacheln untereinander schieben die eigentliche Liste zwei
   Bildschirme nach unten. */
@media (max-width:560px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi .v{font-size:23px}
}

/* ---- Handy: Tabellen als Karten ------------------------------------------
   Seitwaerts scrollen heisst am Handy: man sieht nie eine ganze Zeile.
   Unter 700px wird jede Zeile eine Karte in zwei Spalten, jede Zelle mit
   ihrer Spaltenueberschrift darueber (data-l, gesetzt in schale.blade.php).
   Die erste Zelle ist der Titel, eine Zelle ohne Ueberschrift - meist die
   Knoepfe - nimmt die ganze Breite, eine leere ("–") faellt weg.
   Wer das nicht will: data-breit am <table>. */
@media (max-width:700px){
  .tw > table.karten{display:block;min-width:0 !important;width:100%}
  .karten thead,.karten tbody,.karten tfoot{display:block}
  .karten tr{display:block}
  .karten tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 14px;
    padding:12px 14px;border-bottom:1px solid var(--line)}
  .karten tbody tr:last-child{border-bottom:0}
  .karten tbody tr:hover,.karten tbody tr:hover td{background:none}
  .karten th,.karten td{display:block;border:0;padding:0}
  .karten td{min-width:0;text-align:left !important;overflow-wrap:anywhere;line-height:1.35}
  .karten td[data-l]::before{content:attr(data-l);display:block;font-size:12px;color:var(--ink-3);
    margin-bottom:1px}
  .karten td[data-leer]{display:none}
  .karten tbody td:first-child,.karten td[colspan],.karten td:not([data-l]),.karten td[data-lang]{grid-column:1 / -1}
  .karten tbody td:first-child{font-size:15px}
  .karten tbody td:first-child::before{display:none}
  .karten td:last-child:not([data-l]):has(.btn,form){display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
  .karten tfoot td{padding:11px 14px}
  .karten td[data-l]::before,.filterbar.karten tr.filter th[data-l]::before{
    font-family:"IBM Plex Sans",system-ui,sans-serif;font-weight:400;letter-spacing:0;text-transform:none}
  .karten .pill{white-space:normal;max-width:100%}

  /* Der Kopf: Sortieren bleibt, als Reihe von Schaltern. */
  .karten thead tr:first-child{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;
    padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--line)}
  .karten thead tr:first-child th{display:none;background:none;padding:0}
  .karten thead tr:first-child th:has(.sortk){display:block}
  .karten thead tr:first-child:not(:has(.sortk)){display:none}
  .karten thead tr:first-child:has(.sortk)::before{content:"Sortieren";font-size:12px;color:var(--ink-3)}

  /* Die Filterzeile: Felder untereinander statt unter ihrer Spalte. */
  .filterbar.karten thead tr.filter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;padding:12px 14px;border-bottom:2px solid var(--line-2)}
  .filterbar.karten thead tr.filter th{border:0;padding:0;text-align:left}
  .filterbar.karten thead tr.filter th:first-child{grid-column:1 / -1}
  .filterbar.karten thead tr.filter th:has(> .tsub:only-child){display:none}
  .filterbar.karten thead tr.filter th:last-child{grid-column:1 / -1}
  .filterbar.karten thead tr.filter th[data-l]::before{content:attr(data-l);display:block;
    font-size:12px;color:var(--ink-3);margin-bottom:3px}
  .filterbar.karten thead tr.filter th:first-child::before{display:none}

  /* Rollen & Rechte: je Rolle eine Karte, je Bereich eine Zeile. */
  .karten.matrix tbody tr{gap:0}
  .karten.matrix td.mp{width:auto;padding:0 0 6px}
  .karten.matrix td.mc{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
    gap:10px;padding:5px 0;border-top:1px solid var(--line)}
  .karten.matrix td.mc::before{flex:1;margin:0;font-size:13px;color:var(--ink-2)}
  .karten.matrix td.mc > label{padding:6px 0}
  .karten.matrix td.mc > label.fl{justify-content:flex-end !important}
  .karten.matrix tr.satz-zeile{padding-top:0}
  .karten.matrix tr.satz-zeile .inp{min-width:0 !important}
  .karten.matrix tbody tr:not(.satz-zeile){border-bottom:0;padding-bottom:4px}
}

/* ---- Schicht in Boerse und Anlaessen --------------------------------------
   Drei Spalten: Zeit, was, Stand und Knopf. Am Handy blieb fuer den Text
   dazwischen ein Streifen von sechs Zeichen - jedes Wort eine Zeile. Dort
   rutschen Stand und Knopf unter den Text. */
.schicht{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:6px 12px;align-items:center;
  padding:11px 0;border-top:1px solid var(--line)}
.schicht-zeit{font-size:12.5px;color:var(--ink-2);align-self:start;padding-top:2px}
.schicht-tun{justify-content:flex-end}
.schicht-grund{max-width:220px;text-align:right}
@media (max-width:700px){
  .schicht{grid-template-columns:48px minmax(0,1fr);align-items:start;padding:13px 0}
  .schicht-tun{grid-column:2;justify-content:flex-start;gap:8px}
  .schicht-grund{max-width:none;text-align:left}
  .schicht-tun form{justify-content:flex-start !important}
}

/* ---- Vorstand traegt ein ------------------------------------------------- */
.eintragen{gap:8px;margin-top:9px}
.eintragen .inp{width:auto;min-width:220px;max-width:100%;height:34px;font-size:13px;flex:1 1 220px}
@media (max-width:1000px){.eintragen .inp{height:40px;font-size:16px}}

/* ---- Helferkonto in der Akte --------------------------------------------- */
.hk-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:12px}
.hk-zahlen div{background:var(--surface-2);border-radius:var(--r-s);padding:8px 10px}
.hk-zahlen span{display:block;font-size:11.5px;color:var(--ink-3)}
.hk-zahlen b{font-family:Archivo,sans-serif;font-size:18px;font-variant-numeric:tabular-nums}
.hk-zeile{display:flex;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px}
.hk-zeile .was{flex:1;min-width:0}
.hk-zeile .std{font-family:"IBM Plex Mono",monospace;white-space:nowrap}
.hk-neu{display:grid;grid-template-columns:150px 110px minmax(0,1fr) auto;gap:8px;align-items:end;margin-top:12px;
  padding-top:12px;border-top:1px solid var(--line)}
@media (max-width:700px){
  .hk-zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hk-neu{grid-template-columns:1fr 1fr}
  .hk-neu .fld:nth-child(3),.hk-neu .btn{grid-column:1 / -1}
}

/* Umschalter aus Radioknoepfen, im Aussehen wie .seg button */
.seg label{display:block;cursor:pointer}
.seg label span{display:block;border-radius:6px;padding:4px 11px;font-size:12.5px;color:var(--ink-2)}
.seg input:checked + span{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}

/* ---- Programm & Details zum Anlass --------------------------------------- */
.programm .card-b{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.programm-klapp{border-bottom:1px solid var(--line);background:var(--surface-2)}
.programm-klapp > summary{padding:9px 14px;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent-ink,var(--accent))}
.programm-klapp > div{padding:0 14px 12px;font-size:13.5px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}

/* Lauf stornieren: aufklappen statt Knopf */
.storno > summary{list-style:none;cursor:pointer;display:flex;gap:6px;align-items:center;justify-content:flex-end}
.storno > summary::-webkit-details-marker{display:none}
.storno form{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:6px;max-width:300px;text-align:right}

/* Familie in der Akte: Name, Person dazu, Speichern */
.familie-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:10px;align-items:end;margin-top:12px}
@media (max-width:700px){.familie-form{grid-template-columns:1fr}.familie-form .btn{justify-self:start}}

/* ---- Rechnung von Hand ----------------------------------------------------- */
.rn-posten{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.rn-kopf,.rn-zeile{display:grid;grid-template-columns:minmax(0,1fr) 80px 120px;gap:6px}
.rn-kopf span{font-size:11.5px;color:var(--ink-3)}
@media (max-width:700px){
  .rn-kopf{display:none}
  .rn-zeile{grid-template-columns:1fr 1fr;padding-bottom:6px;border-bottom:1px solid var(--line)}
  .rn-zeile input:first-child{grid-column:1 / -1}
}

/* Mannschaft umbenennen: der Name ist der Schalter */
.umbenennen > summary{list-style:none;cursor:pointer}
.umbenennen > summary::-webkit-details-marker{display:none}
.umbenennen > summary .tsub{opacity:0;transition:opacity .15s}
.umbenennen:hover > summary .tsub,.umbenennen[open] > summary .tsub{opacity:1}
@media (hover:none){.umbenennen > summary .tsub{opacity:1}}
.umbenennen form{margin-top:6px;gap:6px;flex-wrap:nowrap}
.umbenennen form .inp{min-width:0;flex:1}

/* Karten: eine Sortierspalte (Pfeile) gehoert in die Ecke, der Name
   daneben ist der Titel. */
@media (max-width:700px){
  .karten tbody tr:has(> td.sortier){position:relative}
  .karten td.sortier{position:absolute;top:8px;right:10px;padding:0 !important}
  .karten td.sortier > div{flex-direction:row !important;gap:4px !important}
  .karten td.sortier + td{grid-column:1 / -1;font-size:15px;padding-right:80px}
  .karten td.sortier + td::before{display:none}
}

/* ---- Kalender (Anlagen & Termine) -------------------------------------------
   Eine Zeile je Termin, die Art als farbiger Streifen. Vorher war jeder
   Termin ein Kasten mit vier Zeilen - bei fuenfzehn Mannschaften wurde die
   Woche sechs Bildschirme hoch. */
:root{--k-training:#7a8884;--k-spiel:var(--accent);--k-veranstaltung:var(--info,#2f6fb5);--k-sperre:var(--crit)}
.kal-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.kal-filter .inp{width:auto;min-width:170px;flex:0 1 220px}
.kal-legende{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;color:var(--ink-3)}
.kal-legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.k-training{--k:var(--k-training)} .k-spiel{--k:var(--k-spiel)} .k-veranstaltung{--k:var(--k-veranstaltung)}
.k-sperre{--k:var(--k-sperre)} .k-anlass{--k:var(--warn,#c98a1b)}
.kal-legende i{background:var(--k)}

table.kal{table-layout:fixed;min-width:760px}
table.kal th,table.kal td{vertical-align:top;padding:6px 7px}
table.kal thead th{white-space:normal}
table.kal .kal-par{display:block;font-weight:400;text-transform:none;letter-spacing:0;font-size:11px;color:var(--ink-3)}
table.kal th.kal-tag,table.kal td.kal-tag{width:74px}
table.kal td.kal-tag b{display:block}
table.kal td.kal-tag .num{font-size:12px;color:var(--ink-3)}
table.kal tr.heute td{background:var(--accent-soft)}
table.kal tbody tr:hover td{background:inherit}
.kal-t{display:block;border-left:3px solid var(--k);background:var(--surface-2);border-radius:0 5px 5px 0;
  padding:2px 6px;margin-bottom:3px;font-size:12.5px;line-height:1.3;text-decoration:none;color:var(--ink);
  overflow-wrap:break-word;hyphens:auto}
.kal-t .z{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-2);margin-right:3px}
.kal-t.k-sperre{background:var(--crit-bg)}
.kal-t.konflikt,.kal-a.konflikt{outline:1.5px solid var(--crit);outline-offset:-1.5px}
.kal-offen{color:var(--crit);font-size:11px;font-weight:600;margin-left:3px}

.kal-agenda{display:none}
@media (max-width:760px){
  .kal-raster{display:none}
  .kal-agenda{display:block}
  .kal-legende{margin-left:0;width:100%}
  .kal-filter .inp{flex:1 1 140px;min-width:0}
}
.kal-a-tag{border-top:1px solid var(--line);padding:8px 14px 10px}
.kal-a-tag:first-child{border-top:0}
.kal-a-tag.heute{background:var(--accent-soft)}
.kal-a-tag.leer{padding-bottom:8px}
.kal-a-kopf{display:flex;gap:8px;align-items:center;font-size:13.5px;margin-bottom:4px}
.kal-a-tag.leer .kal-a-kopf{margin-bottom:0;color:var(--ink-3)}
.kal-a{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:8px;align-items:baseline;
  border-left:3px solid var(--k);padding:4px 0 4px 8px;margin:2px 0;font-size:14px;text-decoration:none;color:var(--ink)}
.kal-a .z{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ink-2)}
.kal-a .w{font-weight:500;overflow-wrap:break-word;hyphens:auto;min-width:0}
.kal-a .o{font-size:12px;color:var(--ink-3);text-align:right}
.kal-a.k-anlass .o{color:var(--crit);font-weight:600}

/* Aufklappbare Abschnitte unter dem Kalender */
.klapp > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.klapp > summary::-webkit-details-marker{display:none}
.klapp > summary h3{font-size:15.5px}
.klapp > summary h3::before{content:"\25B8  ";color:var(--ink-3)}
.klapp[open] > summary h3::before{content:"\25BE  "}
.klapp > summary .meta{white-space:nowrap;font-size:12px;color:var(--ink-3)}

/* ---- Dokumentvorlage: Editor ---------------------------------------------- */
.vl{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
.vl-palette{position:sticky;top:70px}
.vl-knoepfe{display:flex;flex-wrap:wrap;gap:5px}
.vl-knoepfe .btn{font-size:12px}
.vl-seiten{display:flex;flex-direction:column;gap:16px}
.vl-seite{position:relative;width:100%;max-width:820px;background:#fff;box-shadow:var(--shadow-2);
  touch-action:none;user-select:none;cursor:crosshair}
.vl-seite > img{width:100%;height:100%;display:block}
.vl-feld{position:absolute;white-space:nowrap;line-height:1;color:#0b1a4a;font-family:"DejaVu Sans",Verdana,sans-serif;
  background:rgba(255,230,120,.45);outline:1px dashed #b58900;cursor:move;padding:0}
.vl-feld.an{background:rgba(120,180,255,.45);outline:2px solid #1f6fd6}
.vl-stempel img{width:100%;display:block}
.vl-stempel span{display:block;padding:14px 6px;font-size:11px;text-align:center}
@media (max-width:900px){
  .vl{grid-template-columns:1fr}
  .vl-palette{position:static}
}
.vl-akte{border-bottom:1px solid var(--line);background:var(--surface-2);padding:8px 14px}
.vl-akte-z{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0;font-size:13.5px;font-weight:500}

/* "Formular erstellen" oben in der Akte: ein kleines Menue */
.formulare-knopf{position:relative}
.formulare-knopf > summary{list-style:none}
.formulare-knopf > summary::-webkit-details-marker{display:none}
.formulare-menue{position:absolute;right:0;top:calc(100% + 4px);z-index:20;min-width:240px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r-s);box-shadow:var(--shadow-3);padding:6px;display:flex;flex-direction:column}
.formulare-menue a{padding:9px 10px;border-radius:6px;text-decoration:none;color:var(--ink);font-weight:500}
.formulare-menue a:hover{background:var(--surface-2)}
.formulare-menue .tsub{padding:6px 10px 4px;border-top:1px solid var(--line);margin-top:4px}
@media (max-width:700px){.formulare-menue{left:0;right:auto}}