/* Stempeluhr – Stylesheet.
   Design: hell und reduziert. Hellgraue Fläche, weiße Karten, schwarze Pillen-Buttons, Farbe nur für Bedeutung
   (grün = Plus, rot = Minus, orange = Urlaub, blau = Feiertag). Bewusst nur ein helles Erscheinungsbild.
   Layout: oben Stempeluhr + Monatskonto nebeneinander (ab 900px), darunter das Tagesbuch als Tabelle. */
:root {
  --bg: #F5F5F7;          /* Seitenfläche */
  --surface: #FFFFFF;     /* Karten */
  --surface-2: #F5F5F7;   /* Kacheln in Karten, Tabellenkopf, Wochenenden */
  --surface-3: #E8E8ED;   /* Nebenbuttons, Umschalter-Spur */
  --surface-3h: #DCDCE1;
  --surface-band: #FAFAFC; /* Wochenendzeilen */
  --ink: #1D1D1F;         /* Text, Hauptbuttons */
  --ink-hover: #3A3A3C;
  --muted: #6E6E73;
  --faint: #86868B;
  --rule: #D2D2D7;
  --rule-soft: #E8E8ED;
  --focus: #0071E3;
  --plus: #177A36;  --plus-soft: #E7F5EC;
  --minus: #C8102E; --minus-soft: #FDEDEF;
  --vac: #A84E00;   --vac-soft: #FFF2E6;
  --sick: #A0205F;  --sick-soft: #FBEAF2;
  --hol: #0066CC;   --hol-soft: #E8F1FC;
  --shadow-dlg: 0 30px 80px rgb(0 0 0 / .18), 0 2px 8px rgb(0 0 0 / .06);
  --f-display: system-ui, -apple-system, "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-body: system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r-card: 20px;
  --r-tile: 14px;
  --r-field: 12px;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.5 var(--f-body); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Zahlen: Systemschrift mit gleich breiten Ziffern */
.mono, .num { font-family: var(--f-body); font-variant-numeric: tabular-nums; }
.faint { color: var(--muted); }
.muted { color: var(--muted); }

.app { max-width: 1200px; margin-inline: auto; padding-inline: 16px; padding-block: 24px 72px; display: grid; gap: 20px; }
@media (min-width: 700px) { .app { padding-inline: 28px; } }

/* ---------- Kopf ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 4px 8px; }
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-mark { width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: #FFFFFF; display: grid; place-items: center; flex: none; }
.brand h1 { margin: 0; font: 700 28px/1.05 var(--f-display); letter-spacing: -.02em; }
.brand p { margin: 3px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.top-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sync { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; margin-right: 4px; }
.sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.sync[data-s="saved"]::before { background: var(--plus); }
.sync[data-s="saving"]::before { background: var(--ink); }
.sync[data-s="error"]::before, .sync[data-s="readonly"]::before { background: var(--minus); }
.sync[data-s="local"]::before { background: var(--vac); }
.top .btn.ghost { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.top .btn.ghost:hover { background: var(--surface-3); }
@media (max-width: 560px) {
  .top-actions { width: 100%; }
  .sync { flex-basis: 100%; margin: 0; }
  .top-actions .btn { flex: 1 1 auto; padding-inline: 12px; }
}

/* ---------- Buttons: Pillen ---------- */
.btn { appearance: none; border: 0; background: var(--surface-3); color: var(--ink); border-radius: 980px; padding: 9px 18px; font-weight: 500; font-size: 14px; line-height: 1.2; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; transition: background-color .15s, color .15s, transform .08s; text-decoration: none; white-space: nowrap; }
.btn:hover { background: var(--surface-3h); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--ink); color: #FFFFFF; }
.btn.primary:hover { background: var(--ink-hover); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--surface-3); }
.btn.danger { color: var(--minus); }
.btn.danger:hover { background: var(--minus-soft); }
.btn.icon { width: 40px; padding: 0; font-size: 18px; }
.btn.small { min-height: 34px; padding: 6px 14px; font-size: 13px; }
.btn.big { min-height: 50px; font-size: 16px; font-weight: 600; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

.card { background: var(--surface); border-radius: var(--r-card); min-width: 0; }

/* ---------- Hinweise oben ---------- */
#banner { display: grid; gap: 10px; }
.banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-radius: var(--r-tile); background: var(--minus-soft); color: var(--minus); font-weight: 500; font-size: 14px; }
.banner.info { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); }
.banner span { min-width: 0; flex: 1 1 280px; }

/* ---------- Stempeluhr + Monatskonto ---------- */
.deck { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .deck { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); } }
.deck.single { grid-template-columns: minmax(0, 1fr); }

.clock { padding: 26px; display: grid; gap: 16px; align-content: start; }
.clock-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.eyebrow { font: 600 12px/1 var(--f-body); letter-spacing: .02em; color: var(--muted); }
.clock-date { color: var(--muted); font-size: 14px; }
.clock-time { font: 600 clamp(48px, 13vw, 68px)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.clock-time .sec { color: var(--faint); font-size: .42em; font-weight: 500; margin-left: 4px; letter-spacing: 0; }
.status { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 980px; font-weight: 500; font-size: 13.5px; background: var(--surface-2); color: var(--muted); max-width: 100%; }
.status .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--minus); flex: none; }   /* rot: nicht eingestempelt */
.status[data-s="run"] .dot, .status[data-s="pause"] .dot { background: var(--plus); }   /* grün: eingestempelt */
.status[data-s="loading"] .dot { background: var(--faint); }
.status[data-s="run"] { background: var(--plus-soft); color: var(--plus); }
.status[data-s="pause"] { background: var(--plus-soft); color: var(--plus); }
.status[data-s="warn"] { background: var(--minus-soft); color: var(--minus); }
.status[data-s="done"] { background: var(--surface-3); color: var(--ink); }
.status[data-s="run"] .dot { animation: pulse 1.6s ease-in-out infinite; }
.status.stamp { animation: stamp .3s ease-out; }
@keyframes pulse { 50% { opacity: .35; } }
@keyframes stamp { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

.clock-buttons { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.punch { min-height: 56px; font-size: 17px; font-weight: 600; }
.punch[data-state="in"], .punch[data-state="out"] { background: var(--ink); color: #FFFFFF; }
.punch[data-state="in"]:hover, .punch[data-state="out"]:hover { background: var(--ink-hover); }
.punch[data-state="fix"] { background: var(--minus); color: #FFFFFF; }
.pause-btn { min-height: 56px; padding-inline: 20px; }
.btn.fix-btn { justify-self: start; color: var(--muted); background: transparent; padding-inline: 0; min-height: 28px; text-decoration: underline; text-underline-offset: 3px; font-size: 13.5px; }
.btn.fix-btn:hover { background: transparent; color: var(--ink); }

/* Tagesfortschritt als dünner Balken mit Stundenmarken */
.strip { position: relative; height: 12px; border-radius: 980px; background: var(--surface-3); overflow: hidden; }
.strip .tick { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); opacity: .9; }
.strip .fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink); }
.strip .fill.over { background: var(--plus); }
.strip .goal { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--faint); }
.strip-cap { margin: 8px 0 0; font-size: 12.5px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }

.today-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.today-stats div { display: grid; gap: 2px; min-width: 0; background: var(--surface-2); border-radius: var(--r-tile); padding: 12px 14px; }
.today-stats dt { font-size: 12.5px; color: var(--muted); }
.today-stats dd { margin: 0; font: 600 22px/1.2 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hint { font-size: 13px; color: var(--muted); margin: 0; }
.hint.warn { color: var(--minus); }
.hint:empty { display: none; }

.summary { padding: 26px; display: grid; gap: 18px; align-content: start; container-type: inline-size; }
.sum-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sum-head h2 { margin: 6px 0 0; font: 700 30px/1.05 var(--f-display); letter-spacing: -.02em; }
.asof { font-size: 13px; color: var(--muted); }
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 620px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--surface-2); border-radius: var(--r-tile); padding: 14px 16px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.kpi.key { background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.k-label { font-size: 12.5px; color: var(--muted); }
.k-val { font: 600 clamp(19px, 5.4cqi, 26px)/1.15 var(--f-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-val small { font: 500 13px var(--f-body); color: var(--muted); margin-left: 5px; letter-spacing: 0; }
.k-val.plus { color: var(--plus); }
.k-val.minus { color: var(--minus); }
.k-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.loading-note { padding: 32px 20px; color: var(--muted); text-align: center; }

/* Überstunden zum Monatsende mit Umschalter (wie ein Segment-Control) */
.settle { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-tile); background: var(--surface-2); }
.settle-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.settle-head .k-label { font-weight: 600; color: var(--ink); font-size: 14px; }
.settle-head b { font: 600 20px/1.2 var(--f-display); font-variant-numeric: tabular-nums; }
.settle-head b.plus { color: var(--plus); }
.settle-head b.minus { color: var(--minus); }
.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface-3); border-radius: 980px; max-width: 480px; }
.seg button { appearance: none; border: 0; background: transparent; color: var(--ink); padding: 9px 16px; font: 500 14px/1.2 var(--f-body); cursor: pointer; min-height: 40px; border-radius: 980px; transition: background-color .15s; }
.seg button:hover { background: rgb(0 0 0 / .05); }
.seg button[aria-pressed="true"] { background: var(--ink); color: #FFFFFF; }
.seg button:disabled { cursor: default; color: #545458; }
.seg button:disabled:hover { background: transparent; }
.seg button:disabled[aria-pressed="true"] { background: var(--muted); color: #FFFFFF; }
@media (max-width: 480px) { .seg { border-radius: 18px; } .seg button { border-radius: 14px; padding: 8px 10px; } }
.summary, .settle { grid-template-columns: minmax(0, 1fr); }

/* ---------- Monat / Tabelle ---------- */
.month { overflow: hidden; }
.month-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 18px 22px; }
.month-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.month-nav h2 { margin: 0 6px; font: 700 24px/1 var(--f-display); letter-spacing: -.02em; width: 9em; min-width: 0; text-align: center; white-space: nowrap; }
#thisM { margin-left: 8px; }
.month-nav .btn.ghost { background: var(--surface-2); }
.month-nav .btn.ghost:hover { background: var(--surface-3); }
@media (max-width: 480px) {
  .month-bar { padding: 16px; }
  .month-nav { width: 100%; }
  .month-nav h2 { flex: 1 1 0; width: auto; font-size: 20px; margin: 0; }
  #thisM { order: 3; margin-left: 0; }
}
.month-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.days { width: 100%; min-width: 900px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.days thead th { background: var(--surface); font: 600 12px/1.2 var(--f-body); color: var(--muted); text-align: left; padding: 10px 12px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.days td, .days tbody th, .days tfoot th { padding: 9px 12px; border-bottom: 1px solid var(--rule-soft); white-space: nowrap; background: var(--surface); text-align: left; font-weight: 400; font-variant-numeric: tabular-nums; }
.days .num, .days thead th.num { text-align: right; }
.days tbody tr { cursor: pointer; }
.days tbody tr.off td, .days tbody tr.off th { background: var(--surface-band); }
.days tbody tr:hover td, .days tbody tr:hover th { background: var(--surface-2); }
.days tbody tr.pre td, .days tbody tr.pre th { color: var(--muted); }
.days tbody tr.today th { box-shadow: inset 3px 0 0 var(--ink); }
.days thead th:first-child, .days tbody th, .days tfoot th { position: sticky; left: 0; z-index: 1; }
.days tfoot th, .days tfoot td { background: var(--surface-2); font-weight: 600; border-bottom: 0; }
.day-btn { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font: 500 14px/1.4 var(--f-body); font-variant-numeric: tabular-nums; color: inherit; text-align: left; }
.day-btn .wd { display: inline-block; width: 2.4ch; font-weight: 600; color: var(--muted); }
.days .strong { font-weight: 600; }
.days .plus { color: var(--plus); font-weight: 600; }
.days .minus { color: var(--minus); font-weight: 600; }
.days sup { font-size: 10px; color: var(--muted); margin-left: 1px; }
.days.readonly tbody tr { cursor: default; }
.days.readonly tbody tr:hover td, .days.readonly tbody tr:hover th { background: var(--surface); }
.days.readonly tbody tr.off:hover td, .days.readonly tbody tr.off:hover th { background: var(--surface-band); }
.chips { display: flex; gap: 6px; align-items: center; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 980px; font-size: 12.5px; font-weight: 500; line-height: 1.35; max-width: 230px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.chip.vac { background: var(--vac-soft); color: var(--vac); }
.chip.sick { background: var(--sick-soft); color: var(--sick); }
.chip.hol { background: var(--hol-soft); color: var(--hol); }
.chip.comp { background: var(--surface-3); color: var(--ink); }
.chip.off { background: var(--surface-2); color: var(--muted); }
.chip.miss { background: var(--minus-soft); color: var(--minus); }
.chip.run { background: var(--plus-soft); color: var(--plus); }
.c-note { color: var(--muted); }
/* Notiz-Spalte: Vermerk und eigene Notiz umbrechen statt abschneiden */
.days td.c-note { white-space: normal; min-width: 220px; max-width: 340px; line-height: 1.35; }
@media (max-width: 480px) { .days td.c-note { min-width: 170px; max-width: 180px; } }
.warn-dot { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--minus-soft); color: var(--minus); font: 700 11px/1 var(--f-body); margin-left: 6px; vertical-align: 1px; cursor: help; }
.legend { padding: 14px 22px 20px; margin: 0; font-size: 12.5px; color: var(--muted); max-width: 120ch; }

/* ---------- Dialoge ---------- */
dialog { border: 0; border-radius: 22px; padding: 0; width: min(560px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-dlg); }
dialog::backdrop { background: rgb(0 0 0 / .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog.wide { width: min(820px, calc(100vw - 24px)); }
#dlgReport { width: min(780px, calc(100vw - 24px)); }
.dlg { display: grid; gap: 18px; padding: 24px; }
.dlg-inner { display: grid; gap: 16px; }
.dlg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dlg-head h3 { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -.015em; text-wrap: balance; }
.dlg-head .btn.icon { flex: none; }
.dlg-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label, .lbl { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--rule); border-radius: var(--r-field); background: var(--surface); font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus, .field textarea:focus, .vac-table input:focus, .copy-row input:focus { border-color: var(--focus); outline: 3px solid rgb(0 113 227 / .2); outline-offset: 0; }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--surface-2); color: var(--muted); border-color: var(--rule-soft); cursor: not-allowed; }
::placeholder { color: var(--muted); opacity: 1; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) {
  .row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row3 > :last-child { grid-column: 1 / -1; }
  .row2.stack { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  #formAbs .row2 { grid-template-columns: minmax(0, 1fr); }
  #formSet .row3 > :first-child { grid-column: 1 / -1; }
}
.quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.quick .btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.preview { padding: 14px 16px; border-radius: var(--r-tile); background: var(--surface-2); font-size: 14px; display: grid; gap: 4px; }
.preview:empty { display: none; }
.preview .w { color: var(--minus); }
.err { color: var(--minus); font-size: 13.5px; margin: 0; }
.err:empty { display: none; }
.ok { color: var(--plus); }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.dlg-actions .spacer { flex: 1 1 auto; }
@media (max-width: 480px) {
  .dlg-actions .spacer { display: none; }
  .dlg-actions > .btn.ghost { flex: 1 0 100%; justify-content: flex-start; padding-inline: 0; }
  .dlg-actions > .btn:not(.ghost) { flex: 1 1 0; }
}
.set-group { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--rule-soft); }
.set-group h4 { margin: 0; font: 600 16px/1.2 var(--f-display); }
.vac-wrap { overflow-x: auto; }
.vac-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.vac-table th { text-align: left; font-weight: 500; font-size: 12.5px; line-height: 1.25; color: var(--muted); padding: 4px 6px; vertical-align: bottom; }
.vac-table td { padding: 4px 6px; font-variant-numeric: tabular-nums; }
.vac-table input { width: 100%; min-width: 0; min-height: 44px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: var(--r-field); background: var(--surface); font-variant-numeric: tabular-nums; }
#exportTxt { width: 100%; font: 12px/1.4 var(--f-code); border: 1px solid var(--rule); border-radius: var(--r-field); padding: 8px; background: var(--surface-2); }
.report-preview { background: var(--surface-2); border-radius: var(--r-tile); padding: 12px; max-height: 62vh; overflow: auto; min-height: 120px; display: grid; place-items: center; }
.report-preview img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 12px rgb(0 0 0 / .12); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--ink); margin: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; }

/* ---------- Meldungen ---------- */
.toasts { position: fixed; inset: auto auto calc(20px + env(safe-area-inset-bottom, 0px)) 50%; transform: translateX(-50%); margin: 0; padding: 0; border: 0; background: none; overflow: visible; color: inherit; display: grid; gap: 8px; z-index: 50; width: min(480px, calc(100vw - 32px)); pointer-events: none; }
.toasts[popover]:not(:popover-open) { display: none; }
.toast { background: var(--ink); color: #FFFFFF; padding: 12px 18px; border-radius: 16px; font-size: 14px; box-shadow: 0 10px 30px rgb(0 0 0 / .18); animation: toastIn .2s ease-out; }
.toast.error { background: var(--minus); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Anmeldung ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding-inline: 16px; padding-block: 32px; }
.auth-card { width: min(420px, 100%); padding: 34px 30px; display: grid; gap: 24px; }
.auth-form { display: grid; gap: 14px; }
.auth-form h2 { margin: 0; font: 700 22px/1.2 var(--f-display); letter-spacing: -.015em; }

/* ---------- Ansichtswahl, Konten ---------- */
.view-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.view-pick select { min-height: 40px; padding: 6px 14px; border: 0; border-radius: 980px; background: var(--surface-3); color: var(--ink); font-size: 14px; font-weight: 500; max-width: 220px; }
.table-wrap.bordered { border-radius: var(--r-tile); box-shadow: inset 0 0 0 1px var(--rule-soft); }
table.users { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 14px; }
.users th { text-align: left; font: 600 12px/1.2 var(--f-body); color: var(--muted); background: var(--surface-2); padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); }
.users td { padding: 10px 12px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.users tr:last-child td { border-bottom: 0; }
.users .who b { display: block; font-weight: 600; }
.users .who span { color: var(--muted); font-size: 12.5px; }
.users .rights { display: grid; gap: 4px; }
.users .rights .check { font-size: 13px; }
.users .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.users .acts .btn { min-height: 32px; padding: 4px 12px; font-size: 13px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 980px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--plus-soft); color: var(--plus); }
.pill.wait { background: var(--surface-2); color: var(--ink); }
.pill.off { background: var(--minus-soft); color: var(--minus); }
.link-box { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-tile); background: var(--surface-2); }
.link-box p { margin: 0; }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: var(--r-field); background: var(--surface); font: 13px/1.3 var(--f-code); color: var(--ink); }

#invToLogin { margin: 0; }
#invToLogin .btn { width: 100%; }
#invSub { margin-top: 6px; }