/* 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"]{background:color-mix(in srgb,var(--accent-rail) 32%,transparent);color:#fff;font-weight:500}
.nav-i[aria-current="true"]::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)}