/* ═══ v2 · mitglieder.css — Verwaltung → Mitglieder (Mockups 63a–63c).
   Liste und Person sind Screens (Zurueck-Chip oben), Anlegen ist eine Karte von unten.
   Titel/Chips kommen aus shell.css. Nur Werte aus tokens.css. ═══ */

.mb-body{padding:0 var(--edge) 8px}

/* Suche */
.mb-suche{display:flex;align-items:center;gap:8px;margin:16px var(--edge) 0;padding:12px 16px;
  border:1px solid var(--line);border-radius:14px;background:transparent}
.mb-suche svg{width:15px;height:15px;color:var(--muted);flex-shrink:0}
.mb-suche input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:400 16px/1.2 var(--f)}
.mb-suche input::placeholder{color:var(--muted)}
.mb-suche input:focus{outline:none}

/* Liste */
.mb-eb{font-size:12.5px;font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--muted);margin:20px 0 4px}
.mb-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--ink);text-align:left;font:inherit}
.mb-av{position:relative;width:38px;height:38px;border-radius:99px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;color:var(--c,var(--muted));
  background:color-mix(in srgb,var(--c,var(--muted)) 14%,transparent)}
/* 65c: gruener Punkt am Kreis = hat einen Zugang. Kein Punkt = keine Aussage. */
.mb-av.hat::after{content:"";position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border-radius:99px;
  background:var(--ok);border:2px solid var(--bg)}
.mb-legende{display:flex;align-items:center;gap:8px;padding:16px var(--edge) 0;font-size:var(--fs-eb);color:var(--muted)}
.mb-legende i{width:10px;height:10px;border-radius:99px;background:var(--ok);flex-shrink:0}
.mb-mid{flex:1;min-width:0;display:flex;flex-direction:column}   /* Name oben, Unterzeile darunter */
.mb-name{display:block;font-size:15.75px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-sub{display:block;font-size:13.25px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-stat{font-size:12.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;flex-shrink:0}
.mb-stat.warn{color:var(--hl-text)}
.mb-stat.admin{color:var(--bad)}
.mb-chev{width:16px;height:16px;color:var(--muted);flex-shrink:0}

/* Person: Kopf kommt aus shell.css (Pfeil + Titel + Unterzeile) */
/* 71a: Abschnittskopf traegt seine Handlung als Plus rechts — nur wo man etwas hinzufuegen kann. */
.mb-eb2{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--hl-text);
  padding:24px var(--edge) 4px}
.mb-plus{position:relative;width:26px;height:26px;border-radius:99px;border:1px solid var(--hl);background:transparent;
  color:var(--hl-text);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.mb-plus svg{width:14px;height:14px}
.mb-plus::after{content:"";position:absolute;inset:-9px}   /* 44px Trefferfeld */
/* Wertzeile: Label links, Wert rechts, Chevron nur wo etwas passiert */
.mb-z.tap{width:calc(100% - 2*var(--edge));border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left}
.mb-z .lab{flex:1;min-width:0;font-size:var(--fs-body);color:var(--muted)}
.mb-z .wert{font-size:var(--fs-row);font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-z .wert.leise{color:var(--muted)}
.mb-link{display:block;width:100%;text-align:center;background:transparent;border:0;padding:24px 0 0;
  font:700 var(--fs-sub)/1 var(--f);color:var(--muted)}
.mb-link.rot{color:var(--bad);padding-top:16px}
.mb-z{display:flex;align-items:center;gap:12px;margin:0 var(--edge);padding:12px 0;border-bottom:1px solid var(--line)}
.mb-dot{width:9px;height:9px;border-radius:99px;background:var(--c,var(--muted));flex-shrink:0}
.mb-z .t{flex:1;min-width:0;font-size:15.75px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-z .r{font-size:13.25px;color:var(--muted);white-space:nowrap;flex-shrink:0}
.mb-z .r.ok{color:var(--ok);font-weight:700}
.mb-z .r.stark{font-weight:700;color:var(--ink)}
.mb-z .mb-av{width:38px;height:38px;font-size:12.5px}
.mb-z .who{flex:1;min-width:0}
.mb-z .who b{display:block;font-size:15.75px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mb-z .who i{display:block;font-style:normal;font-size:13.25px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* kleine gelbe Knoepfe unter einem Abschnitt */
.mb-add{margin:16px var(--edge) 0;border:1px solid var(--hl);border-radius:var(--r-chip);background:transparent;
  color:var(--hl-text);padding:8px 16px;font:700 13.25px/1 var(--f)}

/* Infokasten */
.mb-info{margin:0 var(--edge);padding:16px 16px;border:1px solid var(--line);border-radius:14px;
  font-size:14.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* grosse Knoepfe (nur umrandet) */
.mb-btn{display:block;width:calc(100% - 2*var(--edge));margin:24px var(--edge) 0;padding:16px 0;
  border:1px solid var(--hl);border-radius:var(--r-chip);background:transparent;color:var(--hl-text);
  font:700 15.75px/1 var(--f)}
.mb-btn.rot{margin-top:12px;border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}

/* Karte: anlegen */
.mb-seg{display:flex;gap:4px;background:var(--field);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:2px;margin:4px var(--edge) 0}
.mb-seg button{flex:1;background:transparent;border:0;border-radius:var(--r-chip);padding:12px 0;color:var(--muted);font:700 14.5px/1 var(--f)}
.mb-seg button.on{background:var(--head);color:var(--hl-text);font-weight:800}
.mb-in{margin:16px var(--edge) 0}
.mb-in i{display:block;font-style:normal;font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--hl-text)}
.mb-in input{width:100%;max-width:100%;min-width:0;-webkit-appearance:none;appearance:none;margin-top:8px;
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-field);padding:16px 16px;
  color:var(--ink);font:400 16px/1.2 var(--f)}
.mb-in input::placeholder{color:var(--muted)}
.mb-in input:focus{outline:none;border-color:var(--hl)}
.mb-in input[type="date"]{text-align:left;min-height:52px;line-height:1.4}
.mb-pick{display:flex;flex-wrap:wrap;gap:8px;margin:8px var(--edge) 0}

.mb-empty{font-size:14.5px;color:var(--muted);padding:20px 0 2px;line-height:1.5}

/* 78e: Wahl der Beitragsklasse und Handlungszeile im Antrag */
.mb-haken{width:22px;height:22px;border-radius:99px;border:1.5px solid #4a4f54;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--hl-ink)}
[data-theme="light"] .mb-haken{border-color:var(--line)}
.mb-haken.an{background:var(--hl);border-color:var(--hl)}
.mb-haken svg{width:14px;height:14px}
.mb-z.hell .t{color:var(--hl-text);font-weight:700}
.mb-z.hell .mb-chev,.mb-z.hell svg{color:var(--hl-text)}

/* Hinweis mit Nachdruck (frühere Mitgliedschaft) */
.mb-info.rot{border-color:color-mix(in srgb, var(--bad) 55%, transparent);color:var(--ink)}

/* Kuendigung in der Verwaltung: das Enddatum traegt den Screen. */
.mb-ende{font-size:var(--fs-zahl);font-weight:800;letter-spacing:-1.2px;line-height:1.1;color:var(--bad);padding:var(--sp-1) 0 0}
.mb-sig{margin-top:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-field);background:var(--field);
  height:104px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mb-sig img{max-width:100%;max-height:100%}

/* Quartalsabrechnung Jugendtraining (84d) */
/* Die EINE grosse Kennzahl — derselbe Schritt wie in den Dokumenten. */
.mb-zahl,.mb-gross{font-size:var(--fs-zahl);font-weight:800;letter-spacing:-1.2px;line-height:1.1;
  color:var(--hl-text);padding:var(--sp-1) 0 0}
.mb-unter{font-size:var(--fs-sub);color:var(--muted);padding-top:var(--sp-2)}
.mb-z .wert{min-width:72px;text-align:right;font-size:var(--fs-row);font-weight:700;color:var(--ink)}

/* Eingabefeld in der Verwaltung — gleiche Maße wie in den Karten (fs-input, 53px). */
.mb-feld{margin-top:var(--sp-5)}
.mb-feld i{display:block;font-style:normal;font-size:var(--fs-eb);font-weight:800;
  letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--hl-text)}
.mb-feld input{display:block;width:100%;max-width:100%;box-sizing:border-box;height:53px;
  -webkit-appearance:none;appearance:none;margin-top:var(--sp-3);
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-field);padding:var(--sp-5);
  color:var(--ink);font:400 var(--fs-input)/1.2 var(--f)}
.mb-feld input:focus{outline:none;border-color:var(--hl)}

/* Stundeneintrag entfernen: still, rechts in der Zeile. */
.mb-weg{flex:0 0 auto;width:30px;height:30px;background:transparent;border:0;padding:0;
  font:400 var(--fs-val)/1 var(--f);color:var(--muted)}

/* ── Jugendtraining-Verwaltung (86a) ──
   Der Kopfblock sitzt auf derselben Kante wie Zeilen und Titel: 20 links, kein zweiter Rahmen. */
.vt-kopf{padding:0 var(--edge)}
.vt-eb{font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);text-transform:uppercase;
  color:var(--hl-text);padding-top:var(--sp-7)}
.vt-zeile{display:flex;align-items:baseline;gap:var(--sp-3);padding-top:var(--sp-1)}
.vt-zeile .mb-zahl{flex:0 0 auto;padding:0}
.vt-neben{flex:1;min-width:0;font-size:var(--fs-sub);color:var(--muted)}
.vt-tx{margin:var(--sp-3) 0 0;font-size:var(--fs-body);line-height:1.6;color:var(--muted);text-wrap:pretty}
.vt-tx b{color:var(--ink);font-weight:700}
/* Ohne festgesetzten Beitrag: ein Strich statt einer Null. */
.mb-zahl.aus{color:var(--muted);padding-top:var(--sp-1)}
/* Zahl rechts im Abschnittskopf — Beiwerk, deshalb grau. */
.vt-zahl{margin-left:auto;font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);color:var(--muted)}
.mb-eb2 .vt-zahl + .mb-plus{margin-left:var(--sp-4)}
.mb-z .r.stark{color:var(--ink);font-weight:700;font-size:var(--fs-row)}
.mb-z .who i.hell{color:var(--hl-text)}
.vt-fuss{height:var(--sp-7)}

/* ── Strafen (88a/88c) ── */
.mb-z.leise .who b{color:var(--muted)}
.mb-z.leise .who i{color:var(--muted)}
.mb-z .r.stark.leise{color:var(--muted)}
.mb-z .who i.gut{color:var(--ok)}
/* Eigene Zeile in der Rangliste: nur getönt, kein Kasten. */
.mb-z.du{background:color-mix(in srgb, var(--hl) 7%, transparent)}
.mb-z.du .t,.mb-z.du .r{color:var(--hl-text)}
.st-rang{width:22px;flex:0 0 auto;font-size:var(--fs-sub);color:var(--muted)}
/* Abhaken direkt in der Zeile — 44px Trefferfeld über ::after. */
.st-haken{position:relative;flex:0 0 auto;width:26px;height:26px;border-radius:99px;
  border:1.5px solid var(--hl);background:transparent;padding:0;display:flex;align-items:center;justify-content:center;
  color:var(--hl-text)}
.st-haken svg{width:14px;height:14px}
.st-haken::after{content:"";position:absolute;inset:-9px}
.st-satz{flex:0 0 auto;font-size:var(--fs-sub);font-weight:700;color:var(--muted);margin-right:var(--sp-2)}

/* Waehrend gespeichert wird: Inhalt bleibt lesbar, ist aber nicht anklickbar. */
.scr-scroll.wartet{opacity:.6;pointer-events:none}

/* ── Kader (92a / 89b) ──
   Das Passfoto ist die schnellste Kennung; der Punkt daran sagt, ob eine
   Spielberechtigung vorliegt (grün ja, grau nein) — dieselbe Sprache wie die
   Zugangspunkte in der Mitgliederliste. */
.kd-bild{position:relative;flex:0 0 auto;width:38px;height:38px;border-radius:12px;
  background:var(--field);border:1px solid var(--line);overflow:visible;
  display:flex;align-items:center;justify-content:center}
.kd-bild.ohne{border-style:dashed;border-color:var(--line)}
.kd-bild img{width:100%;height:100%;border-radius:11px;object-fit:cover;display:block}
.kd-bild i{font-style:normal;font-size:var(--fs-eb);font-weight:800;letter-spacing:var(--lsp-eb);color:var(--muted)}
.kd-punkt{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:99px;
  background:var(--muted);border:2px solid var(--bg)}
.kd-punkt.ja{background:var(--ok)}
/* Person: das Bild groß über den Angaben. */
.kd-bild.gross{width:72px;height:72px;border-radius:18px}
.kd-bild.gross img{border-radius:17px}
.kd-bild.gross i{font-size:var(--fs-val)}
.kd-kopf{padding:var(--sp-5) var(--edge) 0}
/* Bild machen: der Stift sitzt am Bild, das Trefferfeld ist das ganze Bild (72px). */
.kd-fotoknopf{position:relative;display:inline-flex;padding:0;border:0;background:transparent}
.kd-fotostift{position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;border-radius:999px;
  background:var(--hl);color:var(--hl-ink);border:2px solid var(--bg);
  display:flex;align-items:center;justify-content:center}
.kd-fotostift svg{width:15px;height:15px}
.kd-fotonote{padding:var(--sp-4) var(--edge) 0;font-size:var(--fs-sub);color:var(--muted);line-height:1.5;text-wrap:pretty}
.kd-fotoweg{background:transparent;border:0;padding:0;font:700 var(--fs-sub)/1.5 var(--f);color:var(--muted);
  text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
/* Symbolkachel der Verbandszeile — wie in Dokumente. */
.kd-ic{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--ok)}
.kd-ic svg{width:15px;height:15px}
/* Legende: einmal unter der Liste statt an jeder Zeile. */
.kd-legende{display:flex;gap:var(--sp-5);padding:var(--sp-5) var(--edge) 0}
.kd-legende span{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sub);color:var(--muted)}
.kd-legende i{width:9px;height:9px;border-radius:99px;background:var(--muted);display:block}
.kd-legende i.ja{background:var(--ok)}
.mb-z .r.leise{color:var(--muted)}
.mb-z.tap.wartet{opacity:.6;pointer-events:none}

/* Letzte Zeile eines Abschnitts traegt keine Trennlinie — sie wuerde ins Leere zeigen.
   Gilt in der ganzen Verwaltung, im Kader und bei den Strafen. */
.scr-scroll .mb-z:last-of-type,
.scr-scroll .mb-z:has(+ .mb-eb2),
.scr-scroll .mb-z:has(+ .mb-info),
.scr-scroll .mb-z:has(+ .mb-link),
.scr-scroll .mb-z:has(+ .vt-kopf),
.scr-scroll .mb-z:has(+ .vt-fuss),
.scr-scroll .mb-z:has(+ .kd-legende){border-bottom:0}

/* Verband noch nicht abgeglichen: kein Erfolgshaken, sondern eine offene Handlung. */
.kd-ic.offen{border-color:var(--hl);color:var(--hl-text)}

/* Verbandslogo in der Symbolfläche — passt sich ein, ohne sie zu sprengen. */
.kd-portal{width:22px;height:22px;object-fit:contain;display:block}

/* ── Ablage (105a–105c) ── */
.ab-ic{position:relative;flex:0 0 auto;width:30px;height:30px;border-radius:10px;
  background:var(--field);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-mini);font-weight:800;letter-spacing:.5px}
.ab-ic svg{width:15px;height:15px}
.ab-punkt{width:9px;height:9px;border-radius:99px;display:block}
/* Was auf mich wartet: erste Zeile, in Vereinsgelb. */
.ab-warte{margin-top:var(--sp-5)}
/* Speicherstand: 80 GB sind endgueltig, das gehoert sichtbar hin. */
.ab-speicher{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-6) var(--edge) 0}
.ab-speicher .bar{flex:1;height:4px;border-radius:99px;background:var(--line);overflow:hidden;display:block}
.ab-speicher .bar i{display:block;height:100%;background:var(--hl)}
.ab-speicher span:last-child{flex:0 0 auto;font-size:var(--fs-sub);color:var(--muted)}
/* Bitte an mich, oben in der Datei. */
.ab-bitte{padding:0 var(--edge)}
/* Dateiwahl beim Hochladen: eine Zeile, kein Systemknopf. */
.ab-wahl{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:13px 0;
  border-bottom:1px solid var(--line);cursor:pointer}
.ab-wahl .ic{width:30px;height:30px;border-radius:10px;background:var(--field);border:1px solid var(--hl);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--hl-text)}
.ab-wahl .ic svg{width:15px;height:15px}
.ab-wahl .tx{flex:1;min-width:0}
.ab-wahl .tx b{display:block;font-size:var(--fs-row);font-weight:700;color:var(--hl-text)}
.ab-wahl .tx i{display:block;font-style:normal;font-size:var(--fs-sub);color:var(--muted);margin-top:var(--sp-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Fortschritt beim Hochladen. */
.ab-fort{display:flex;align-items:center;gap:var(--sp-4);padding-top:var(--sp-6)}
.ab-fort .bar{flex:1;height:4px;border-radius:99px;background:var(--line);overflow:hidden;display:block}
.ab-fort .bar i{display:block;height:100%;background:var(--hl);transition:width .2s ease}
.ab-fort span:last-child{flex:0 0 auto;font-size:var(--fs-sub);color:var(--muted)}

/* 179b/179d: Code-Felder und die Handlung in der Kaderzeile.
   Abstaende auf der Leiter, Groessen aus der Skala, Gelb nur fuer die Handlung. */
.kd-code{display:flex;gap:var(--sp-3);margin-top:var(--sp-3)}
.kd-code span{flex:1;aspect-ratio:1;background:var(--kachel);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-lead);font-weight:800;color:var(--ink)}
.mb-tun{flex-shrink:0;font-size:var(--fs-sub);font-weight:700;color:var(--hl-text)}
.tm-link.haupt{color:var(--hl-text);font-weight:800}