/* celox Audit-Plattform — M3-Dark-Look passend zu celox.io */
:root {
  --bg: #111318;
  --surface: #1a1c22;
  --surface-hi: #22242c;
  --outline: #2e3038;
  --text: #e3e2e9;
  --text-mut: #a8aab3;
  --text-dim: #888b96; /* AA-fest auch auf --surface */
  --primary: #adc6ff;
  --on-primary: #002e69;
  --primary-container: #294677;
  --on-primary-container: #d9e2ff;
  --ok: #7ee787;
  --mid: #ffd479;
  --warn: #ffab70;
  --crit: #ff7b72;
  --on-crit: #4e0f0c;   /* dunkler Rotton für Schrift AUF --crit (6:1) */
  --radius: 16px;
  --surface-container: var(--surface);
  --surface-container-high: var(--surface-hi);
  --surface-container-highest: #282a33;
  /* Radius-Scale (identisch zum Kunden-Frontend) */
  --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-xl: 14px; --r-2xl: var(--radius); --r-full: 999px;
  /* Motion: Das Admin-Panel fährt bewusst das STANDARD-Scheme (utilitaristisch,
     kein Bounce) — Kanon: .claude/rules/frontend-m3e.md */
  --m3-effect-fast: cubic-bezier(0.31, 0.94, 0.34, 1); --m3-effect-fast-dur: 150ms;
  --m3-effect-default: cubic-bezier(0.34, 0.8, 0.34, 1); --m3-effect-default-dur: 200ms;
  --m3-std-spatial-fast: cubic-bezier(0.27, 1.06, 0.18, 1); --m3-std-spatial-fast-dur: 300ms;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  background-image:
    radial-gradient(1000px 600px at 85% -10%, rgba(173, 198, 255, 0.10), transparent 60%),
    radial-gradient(800px 500px at -10% 100%, rgba(222, 188, 222, 0.07), transparent 55%);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
/* Login-Ansicht bleibt schmal zentriert (eigene max-width auf .login-box). */
header.site {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.75rem 0 1.5rem;
}
.brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; text-decoration: none; color: var(--text); }
.brand span { color: var(--primary); }
.brand small { display: block; font-size: 0.68rem; font-weight: 500; color: var(--text-dim); letter-spacing: 0.12em; text-transform: uppercase; }
.userbox { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--text-mut); }

/* Portal Icons (frontend/icons.js) — Material Symbols Rounded */
.pi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.2em; height: 1.2em; vertical-align: -0.22em; flex-shrink: 0;
  color: inherit; line-height: 0;
}
.pi svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.pi--sm { width: 1em; height: 1em; }
.pi--md { width: 1.35em; height: 1.35em; }
.pi--lg { width: 1.75em; height: 1.75em; }
.pi--xl { width: 2.25em; height: 2.25em; }
.pi--ok { color: var(--ok); }
.pi--warn { color: var(--warn); }
.pi--crit { color: var(--crit); }
.pi--muted { color: var(--text-dim); }
.btn-sm .pi, .btn-primary .pi, .btn-ghost .pi, .kebab-item .pi { margin-right: 0.15em; }
.dlg-title { display: flex; align-items: center; gap: 0.4rem; }
.dlg-title .pi { color: var(--primary); }
h2 .pi, h3 .pi { margin-right: 0.25em; color: var(--primary); vertical-align: -0.15em; }
.admin-tab .pi, .subtab .pi, .mt-seg .pi { margin-right: 0.2em; }
.ent-chip .pi, .solo-badge .pi, .badge-status .pi { margin-right: 0.15em; }
.pp-toggle .pi, .pp-lock .pi, .pp-caret .pi { vertical-align: -0.15em; }
.inc-group .pi { margin-right: 0.25em; }

.card {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--outline);
  border-radius: var(--radius);
  padding: 1.5rem;
}
h1 { font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1.25; }
h2 { font-size: 1.2rem; }
.sub { color: var(--text-mut); font-size: 0.95rem; }

button, .btn {
  font: inherit; cursor: pointer;
  border: 1px solid var(--outline); border-radius: var(--r-full);
  background: var(--surface-hi); color: var(--text);
  padding: 0.6rem 1.2rem; font-size: 0.9rem; font-weight: 600;
  transition: border-color var(--m3-effect-default-dur) var(--m3-effect-default), background var(--m3-effect-default-dur) var(--m3-effect-default), color var(--m3-effect-default-dur) var(--m3-effect-default);
}
button:hover { border-color: var(--primary); }
.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost { background: none; }
.btn-sm { padding: 0.35rem 0.8rem; font-size: 0.8rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

input, select {
  font: inherit; width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--r-md);
  padding: 0.65rem 0.85rem;
}
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(173, 198, 255, 0.18); }
label { display: block; font-size: 0.8rem; color: var(--text-mut); margin: 0.9rem 0 0.3rem; }
.error { color: var(--crit); font-size: 0.85rem; margin-top: 0.75rem; min-height: 1.2em; }

.hidden { display: none !important; }

/* Login */
.login-box { max-width: 400px; margin: 8vh auto 0; }
.login-box h1 { margin-bottom: 0.35rem; }

/* Dashboard */
.grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
.audit-card { display: flex; flex-direction: column; gap: 0.5rem; cursor: pointer; transition: border-color var(--m3-effect-default-dur) var(--m3-effect-default), transform var(--m3-std-spatial-fast-dur) var(--m3-std-spatial-fast); }
.audit-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.audit-card .icon { font-size: 1.6rem; }
.audit-card h2 { font-size: 1.05rem; }
.audit-card .meta { font-size: 0.78rem; color: var(--text-dim); }
.audit-card .tagline { font-size: 0.87rem; color: var(--text-mut); }
.badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 600; color: var(--primary); background: rgba(173, 198, 255, 0.12); border: 1px solid rgba(173, 198, 255, 0.3); border-radius: var(--r-full); padding: 0.15rem 0.6rem; }

/* Runner */
.progress { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); padding: 0.75rem 0; margin-bottom: 1rem; }
.progress-track { height: 6px; background: var(--surface-hi); border-radius: var(--r-full); overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: var(--primary); border-radius: var(--r-full); transition: width var(--m3-std-spatial-fast-dur) var(--m3-std-spatial-fast); }
.progress-label { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-dim); margin-top: 0.4rem; }
.domain-head { margin: 2rem 0 0.75rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); }
.question { margin-bottom: 1rem; }
.question .q-text { font-weight: 600; margin-bottom: 0.6rem; }
.q-options { display: grid; gap: 0.45rem; }
.q-opt {
  display: flex; align-items: flex-start; gap: 0.6rem;
  border: 1px solid var(--outline); border-radius: var(--r-lg);
  padding: 0.6rem 0.85rem; cursor: pointer; font-size: 0.88rem; color: var(--text-mut);
  transition: border-color var(--m3-effect-fast-dur) var(--m3-effect-fast), background var(--m3-effect-fast-dur) var(--m3-effect-fast), color var(--m3-effect-fast-dur) var(--m3-effect-fast);
}
.q-opt:hover { border-color: var(--primary); }
.q-opt.sel { border-color: var(--primary); background: rgba(173, 198, 255, 0.1); color: var(--text); }
.q-opt input { width: auto; margin-top: 0.25rem; accent-color: var(--primary); }
.runner-actions { display: flex; gap: 0.75rem; justify-content: space-between; align-items: center; margin-top: 2rem; }

/* Ergebnis */
.score-hero { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.score-ring { position: relative; width: 130px; height: 130px; flex-shrink: 0; }
.score-ring svg { transform: rotate(-90deg); }
.score-ring .val { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 700; }
.maturity { font-size: 1.25rem; font-weight: 700; }
.tone-ok { color: var(--ok); } .tone-mid { color: var(--mid); } .tone-warn { color: var(--warn); } .tone-crit { color: var(--crit); }
.domain-bars { display: grid; gap: 0.7rem; margin-top: 1.25rem; }
.dbar .lbl { display: flex; justify-content: space-between; font-size: 0.82rem; margin-bottom: 0.25rem; }
.dbar .track { height: 8px; background: var(--surface-hi); border-radius: var(--r-full); overflow: hidden; }
.dbar .fill { height: 100%; border-radius: var(--r-full); }
.rec { border-left: 3px solid var(--warn); padding: 0.75rem 1rem; background: var(--surface-hi); border-radius: 0 10px 10px 0; margin-top: 0.9rem; }
.rec h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.rec ul { padding-left: 1.1rem; font-size: 0.87rem; color: var(--text-mut); }
.rec li { margin: 0.25rem 0; }

/* Ergebnis-Historie */
.hist-item { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0; border-bottom: 1px solid var(--outline); font-size: 0.88rem; }
.hist-item:last-child { border-bottom: none; }
.hist-item .pct { margin-left: auto; font-weight: 700; }

table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--outline); vertical-align: top; }
th { color: var(--text-dim); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; }

footer.site { margin-top: 3rem; font-size: 0.75rem; color: var(--text-dim); text-align: center; }
footer.site a { color: var(--text-dim); }

@media print {
  body { background: #fff; color: #111; }
  header.site, .runner-actions, .no-print, footer.site { display: none !important; }
  .card { border-color: #ccc; background: #fff; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 1rem; }
  .score-hero { gap: 1rem; }
}

/* Admin: Produkt-Auswahl als klickbare Kacheln */
.pcheck-group { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin: 1rem 0 0.5rem; }
.pcheck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.6rem; }
.pcheck {
  display: flex; align-items: center; gap: 0.75rem;
  border: 1px solid var(--outline); border-radius: var(--r-lg);
  padding: 0.85rem 1rem; cursor: pointer;
  transition: border-color var(--m3-effect-fast-dur) var(--m3-effect-fast), background var(--m3-effect-fast-dur) var(--m3-effect-fast);
  position: relative;
}
.pcheck:hover { border-color: var(--primary); }
.pcheck input { position: absolute; opacity: 0; pointer-events: none; }
.pcheck-box {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--r-xs);
  border: 2px solid var(--outline); background: var(--bg);
  display: grid; place-items: center; transition: all var(--m3-effect-fast-dur) var(--m3-effect-fast);
}
.pcheck-box::after {
  content: ''; width: 0.85em; height: 0.85em; opacity: 0; transform: scale(0.5);
  background: var(--on-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.17 5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41L9 16.17z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: all var(--m3-effect-fast-dur) var(--m3-effect-fast);
}
.pcheck:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.pcheck:has(input:checked) .pcheck-box { background: var(--primary); border-color: var(--primary); }
.pcheck:has(input:checked) .pcheck-box::after { opacity: 1; transform: scale(1); }
.pcheck:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.pcheck-text { display: flex; flex-direction: column; gap: 0.15rem; }
.pcheck-title { font-size: 0.92rem; font-weight: 600; color: var(--text); }
.pcheck-sub { font-size: 0.75rem; color: var(--text-dim); }

/* GitHub-Login-Button */
.github-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: #24292e; color: #fff; border-color: #24292e; }
.github-btn:hover { background: #2f363d; border-color: #444; }
.google-btn { display: inline-flex; align-items: center; gap: 0.6rem; background: #fff; color: #1f1f1f; border-color: #dadce0; }
.google-btn:hover { background: #f7f8f8; border-color: #c6cacf; }
.login-divider { text-align: center; font-size: 0.78rem; color: var(--text-dim); margin: 1rem 0 0.25rem; }

/* ── Mitarbeiter-Verwaltung (Modal) + Konto-Badges ───────────────────── */
.emp-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; z-index: 100; overflow-y: auto; }
.emp-modal-box { max-width: 760px; width: 100%; }
.emp-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.4rem; }
.emp-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.emp-form input { flex: 1; min-width: 160px; }
#emp-modal-list table { width: 100%; }
.acct-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: var(--r-full); white-space: nowrap; }
.acct-emp { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.acct-lead { background: color-mix(in srgb, var(--primary) 18%, transparent); color: var(--primary); }
.acct-team { background: var(--surface-hi); color: var(--text-dim); }
.acct-share { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }

/* Nutzungsstatistik */
.usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.65rem; margin-top: 0.5rem; }
.usage-src { background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-lg); padding: 0.75rem 0.9rem; }
.usage-src .us-title { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.35rem; }
.usage-src .us-val { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.usage-src .us-sub { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.25rem; }
.usage-bar-wrap { display: flex; align-items: flex-end; gap: 0.35rem; height: 130px; margin: 0.7rem 0 0.2rem; }
.usage-bar { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 2px; height: 100%; }
.usage-bar .ub-stack { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-height: 0; }
.usage-bar .ub-seg { border-radius: 3px 3px 0 0; min-height: 0; }
.usage-bar .ub-a { background: color-mix(in srgb, var(--primary) 70%, transparent); }
.usage-bar .ub-t { background: color-mix(in srgb, var(--ok) 70%, transparent); }
.usage-bar .ub-s { background: color-mix(in srgb, var(--warn) 70%, transparent); }
.usage-bar .ub-lbl { font-size: 0.62rem; color: var(--text-dim); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usage-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; font-size: 0.74rem; color: var(--text-dim); margin-top: 0.35rem; }
.usage-legend i { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 2px; margin-right: 0.3rem; vertical-align: -1px; }
.usage-legend .l-a { background: color-mix(in srgb, var(--primary) 70%, transparent); }
.usage-legend .l-t { background: color-mix(in srgb, var(--ok) 70%, transparent); }
.usage-legend .l-s { background: color-mix(in srgb, var(--warn) 70%, transparent); }
#usage-modules-table td.num, #usage-companies-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Dashboard-Ausbau: Kennzahlen, Registrierungs-Queue ──────────────── */
.stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 0.6rem; }
.stat { background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-lg); padding: 0.7rem 0.85rem; }
.stat-val { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-sub { font-size: 0.9rem; color: var(--text-dim); font-weight: 400; }
.stat-lbl { font-size: 0.75rem; color: var(--text-mut); margin-top: 0.15rem; }
.stat-hint { font-size: 0.64rem; color: var(--text-dim); }
.stat-alert { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.stat-flags { grid-column: 1 / -1; font-size: 0.75rem; color: var(--warn); padding-top: 0.1rem; }
.count-badge { display: inline-block; background: var(--warn); color: #201a00; font-size: 0.8rem; font-weight: 700; border-radius: var(--r-full); padding: 0.05rem 0.55rem; margin-left: 0.4rem; }
.reg-item { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; padding: 0.75rem 0; border-bottom: 1px solid var(--outline); flex-wrap: wrap; }
.reg-item:last-child { border-bottom: none; }
.reg-main { flex: 1; min-width: 200px; line-height: 1.5; }
.reg-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.reg-recent-item { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; padding: 0.3rem 0; color: var(--text-mut); }
.row-suspended { opacity: 0.55; }

/* ── Vorfälle: Gruppen, Schweregrade, Trend-Chart ────────────────────── */
.inc-group td { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-mut); background: var(--surface-hi); padding: 0.4rem 0.6rem; }
.inc-group-n { font-weight: 400; color: var(--text-dim); text-transform: none; letter-spacing: 0; }
.sev-badge { display: inline-block; font-size: 0.68rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: var(--r-full); white-space: nowrap; }
.sev-hoch { background: color-mix(in srgb, var(--crit) 18%, transparent); color: var(--crit); }
.sev-mittel { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.sev-niedrig { background: var(--surface-hi); color: var(--text-dim); }
.inc-desc { max-width: 320px; font-size: 0.82rem; color: var(--text-mut); white-space: pre-wrap; word-break: break-word; }
.inc-notes { font-size: 0.78rem; color: var(--text-mut); background: var(--surface-hi); border-left: 3px solid var(--primary); border-radius: 0 8px 8px 0; padding: 0.35rem 0.55rem; margin-bottom: 0.35rem; max-width: 260px; white-space: pre-wrap; word-break: break-word; }
.inc-chart { display: flex; align-items: flex-end; gap: 0.35rem; height: 120px; margin: 0.9rem 0 0.3rem; }
.inc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.inc-col-vals { font-size: 0.68rem; color: var(--crit); font-weight: 700; line-height: 1.2; }
.inc-bars { display: flex; align-items: flex-end; gap: 2px; width: 100%; max-width: 34px; flex: 1; }
.inc-bar { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.inc-bar-i { background: var(--crit); }
.inc-bar-c { background: var(--ok); opacity: 0.75; }
.inc-col-lbl { font-size: 0.62rem; color: var(--text-dim); margin-top: 0.3rem; white-space: nowrap; }
.inc-legend { display: flex; gap: 1.1rem; font-size: 0.75rem; color: var(--text-mut); margin-bottom: 0.6rem; }
.leg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 0.3rem; }
.leg-i { background: var(--crit); }
.leg-c { background: var(--ok); opacity: 0.75; }
.inc-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.inc-cat-chip { font-size: 0.72rem; color: var(--text-mut); background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-full); padding: 0.15rem 0.6rem; }

/* ── Wiederkehrende Schulungen: Intervall + Überfällig ───────────────── */
.retrain-sel { width: auto; padding: 0.25rem 0.4rem; font-size: 0.75rem; border-radius: var(--r-sm); }
.retrain-bulk { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--outline); }
.retrain-bulk select, .retrain-bulk .cselect { width: auto; padding: 0.35rem 0.6rem; font-size: 0.82rem; border-radius: var(--r-sm); }
.ovd-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; vertical-align: middle; padding: 0.12rem 0.45rem; border-radius: var(--r-full); background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); margin-left: 0.35rem; }
.ovd-group { border-bottom: 1px solid var(--outline); padding: 0.6rem 0; }
.ovd-group:last-child { border-bottom: none; }
.ovd-company { font-size: 0.95rem; margin: 0 0 0.35rem; }
.ovd-user { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.35rem 0 0.35rem 0.9rem; border-left: 3px solid color-mix(in srgb, var(--warn) 55%, transparent); margin: 0.3rem 0; font-size: 0.88rem; line-height: 1.5; }
.ovd-user-main small { color: var(--text-mut); }

/* ── Admin-Tabellen-Feinschliff (Firmen/Nutzer kompakt & ohne Abschneiden) ── */
/* Gebucht-Spalte: kompakte Zähl-Chips statt langer Label-Liste (Details im Tooltip) */
.ent-chips { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; }
.ent-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.72rem; font-weight: 600; line-height: 1;
  padding: 0.22rem 0.5rem; border-radius: var(--r-full);
  background: var(--surface-hi); border: 1px solid var(--outline); color: var(--text-mut);
  white-space: nowrap; cursor: default;
}
.ent-chip.audit { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); }
.ent-chip.training { border-color: color-mix(in srgb, var(--ok) 45%, transparent); color: color-mix(in srgb, var(--ok) 80%, var(--text)); }
.ent-chip.none { color: var(--text-dim); }

/* Aktionen: kompakte, umbrechende Button-Gruppe (nichts wird abgeschnitten) */
td.col-actions { white-space: normal; }
.act-group { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.act-group .btn-sm { padding: 0.28rem 0.6rem; font-size: 0.75rem; }
.act-group .btn-sm.danger { color: var(--crit); }

/* Kennzeichnungen */
.hint-pill {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; vertical-align: middle;
  padding: 0.15rem 0.55rem; border-radius: var(--r-full); margin-left: 0.4rem;
  background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary);
}
.solo-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 600;
  padding: 0.12rem 0.5rem; border-radius: var(--r-full); white-space: nowrap;
  background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary);
}
/* ── Custom-Dialoge (ersetzen native alert/confirm/prompt) ── */
.dlg-host { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.dlg-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.62); backdrop-filter: blur(3px); animation: dlg-fade 0.18s ease; }
.dlg-card {
  position: relative; z-index: 1; width: 100%; max-width: 440px;
  background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5); padding: 1.4rem 1.4rem 1.1rem;
  animation: dlg-pop 0.22s cubic-bezier(0.2, 0.9, 0.2, 1.05); max-height: 85vh; overflow-y: auto;
}
.dlg-title { font-size: 1.1rem; margin-bottom: 0.6rem; color: var(--text); /* flex+gap from .pi block above */ }
.dlg-title.hidden { display: none !important; }
.dlg-msg { color: var(--text-mut); font-size: 0.95rem; line-height: 1.55; white-space: normal; }
.dlg-input { width: 100%; margin-top: 0.9rem; }
textarea.dlg-input { resize: vertical; min-height: 90px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; flex-wrap: wrap; }
.dlg-actions .btn-sm { padding: 0.5rem 1.1rem; font-size: 0.85rem; }
/* Destruktive Bestätigung: gefüllt in der Fehlerfarbe.
   Sie kommt aus `ui.confirm(…, {danger:true})` und trägt dort IMMER auch
   `.btn-primary`. Die alte Regel setzte nur `color` — die hellblaue Primärfläche
   blieb stehen, Ergebnis war rote Schrift auf Hellblau: schlecht lesbar, und
   inhaltlich widersprüchlich, weil die Fläche „weiter so" sagt und die Schrift
   „Achtung". Gefüllt behält der Knopf das Gewicht des Primärknopfs, den er
   ersetzt, und zeigt zugleich, dass hier etwas Unwiderrufliches passiert. */
.dlg-actions .btn-sm.danger { background: var(--crit); color: var(--on-crit); border-color: var(--crit); }
.dlg-actions .btn-sm.danger:hover { background: var(--crit); border-color: var(--crit); filter: brightness(1.06); }
.dlg-actions .btn-sm.danger:focus-visible { outline: 2px solid var(--crit); outline-offset: 2px; }
.dlg-checks { display: flex; flex-direction: column; gap: 0.1rem; margin-top: 0.4rem; }
.dlg-group { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin: 0.7rem 0 0.15rem; }
.dlg-check { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.5rem; border-radius: var(--r-md); cursor: pointer; font-size: 0.9rem; color: var(--text); }
.dlg-check:hover { background: var(--surface-hi); }
.dlg-check input { width: auto; accent-color: var(--primary); flex-shrink: 0; }
body.dlg-open { overflow: hidden; }
@keyframes dlg-fade { from { opacity: 0; } }
@keyframes dlg-pop { from { opacity: 0; transform: translateY(12px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) { .dlg-backdrop, .dlg-card { animation: none; } }

/* ══════════ Admin-Panel v2: Tabs, KPIs, Kebab, ProductPicker, Toast ══════════ */
/* Tab-Navigation */
.admin-tabs { display: flex; gap: 0.25rem; overflow-x: auto; border-bottom: 1px solid var(--outline); margin-bottom: 1.25rem; -webkit-overflow-scrolling: touch; }
.admin-tab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: var(--r-sm) var(--r-sm) 0 0; color: var(--text-mut); font-weight: 600; font-size: 0.92rem; padding: 0.7rem 0.95rem; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.admin-tab:hover { color: var(--text); border-color: transparent; background: var(--surface-hi); }
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.35rem; border-radius: var(--r-full); font-size: 0.72rem; font-weight: 700; background: var(--surface-hi); color: var(--text-mut); }
.tab-badge.alert { background: var(--crit); color: #2a0d0b; }
.tab-panel { animation: tabfade 0.18s ease; }
@keyframes tabfade { from { opacity: 0; transform: translateY(4px); } }

/* Dashboard-KPIs */
.stats-primary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; }
.stats-secondary { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 0.55rem; margin-top: 0.7rem; }
button.stat { text-align: left; cursor: pointer; font: inherit; transition: border-color var(--m3-effect-fast-dur) var(--m3-effect-fast), transform var(--m3-std-spatial-fast-dur) var(--m3-std-spatial-fast), background var(--m3-effect-fast-dur) var(--m3-effect-fast); }
button.stat:hover { transform: translateY(-2px); border-color: var(--primary); }
.stats-primary .stat { padding: 1rem 1.1rem; }
.stats-primary .stat .stat-val { font-size: 2rem; }
.stat-quiet { opacity: 0.68; }
.stat-mini { padding: 0.55rem 0.7rem; }
.stat-mini .stat-val { font-size: 1.25rem; }
.stat-flags { font-size: 0.75rem; color: var(--warn); margin-top: 0.6rem; }

/* Sektions-Header + Suche */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.sec-head h2 { display: flex; align-items: center; gap: 0.4rem; }
.sec-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sec-info { cursor: help; color: var(--text-dim); font-size: 0.95rem; }
.tbl-search { width: auto; min-width: 210px; padding: 0.42rem 0.75rem; font-size: 0.85rem; border-radius: var(--r-full); }
.action-card .sec-head { margin-bottom: 0.2rem; }

/* ── Einklappbare Karten (Nutzung) ─────────────────────────────────────────
   Der Chevron ist ein drittes Kind der Kopfzeile. `space-between` verteilte
   den freien Raum sonst auf alle drei und schöbe ⓘ bzw. Filter in die MITTE —
   der wachsende Titel hält Kopf links und Bedienelemente rechts zusammen. */
/* ⚠️ Basis 0, nicht `auto`: die Kopfzeile darf umbrechen, und ein umbrechender
   Flex-Container bildet die ZEILEN nach der Basisgröße — geschrumpft wird erst
   innerhalb einer Zeile. Mit `auto` beanspruchte der Titel auf 320 px seine
   volle Inhaltsbreite (211 px), zusammen 286 px auf 238 px Kopfbreite, und der
   unschrumpfbare Chevron wich in eine zweite Zeile aus. `min-width: 0` hebt
   zusätzlich das Standard-`min-width: auto` auf, damit der Titel umbricht,
   statt aus dem Kopf zu laufen. */
.card[data-collapse] .sec-head > h2 { flex: 1 1 0; min-width: 0; cursor: pointer; }
.card[data-collapse] .sec-head > .sec-actions { order: 2; }
.card-chev {
  order: 3; flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-dim);
}
.card-chev:hover { background: var(--surface-hi); color: var(--text); }
.card-chev:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.card[data-collapse].collapsed > *:not(.sec-head) { display: none; }
.card[data-collapse].collapsed .sec-actions { display: none; }
.card[data-collapse].collapsed .sec-head { margin-bottom: 0; }
.card[data-collapse].collapsed { padding-top: 1.1rem; padding-bottom: 1.1rem; }
@media (pointer: coarse) { .card-chev { width: 44px; height: 44px; } }
.allclear { text-align: center; color: var(--text-mut); font-size: 0.95rem; padding: 1.4rem; margin-top: 1.25rem; }
.dash-inc-row { padding: 0.42rem 0; border-bottom: 1px solid var(--outline); font-size: 0.88rem; }
.dash-inc-row:last-child { border-bottom: none; }

/* Status-Badges */
.badge-status { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.6rem; border-radius: var(--r-full); }
.badge-status.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.badge-status.off { background: color-mix(in srgb, var(--crit) 16%, transparent); color: var(--crit); }

/* Kebab-Menü */
.kebab-btn { padding: 0.28rem 0.55rem; font-size: 1.05rem; line-height: 1; }
.kebab-menu { position: absolute; z-index: 200; min-width: 200px; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0,0,0,0.5); padding: 0.35rem; }
.kebab-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: var(--r-sm); color: var(--text); font-size: 0.85rem; font-weight: 500; padding: 0.5rem 0.7rem; }
.kebab-item:hover { background: var(--surface-hi); border-color: transparent; }
.kebab-item.danger { color: var(--crit); }
.kebab-item.danger:hover { background: color-mix(in srgb, var(--crit) 12%, transparent); }
.kebab-sep { height: 1px; background: var(--outline); margin: 0.3rem 0.25rem; }

/* Sub-Tabs */
.subtabs { display: flex; gap: 0.3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--outline); }
.subtab { background: none; border: none; border-bottom: 2px solid transparent; border-radius: var(--r-xs) var(--r-xs) 0 0; color: var(--text-mut); font-weight: 600; font-size: 0.88rem; padding: 0.5rem 0.8rem; }
.subtab:hover { color: var(--text); border-color: transparent; background: var(--surface-hi); }
.subtab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ProductPicker */
.product-picker { border: 1px solid var(--outline); border-radius: var(--r-lg); padding: 0.7rem; margin-top: 0.3rem; }
/* Auswahl-Chips stehen UNTER den Checkbox-Sektionen (2026-07-17) */
.pp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--outline); }
.pp-empty { color: var(--text-dim); font-size: 0.82rem; }
.pp-chip { display: inline-flex; align-items: center; gap: 0.25rem; background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); border-radius: var(--r-full); padding: 0.15rem 0.3rem 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 600; }
.pp-chip-x { background: none; border: none; color: inherit; padding: 0 0.2rem; font-size: 0.8rem; line-height: 1; cursor: pointer; }
.pp-chip-x:hover { border-color: transparent; }
.pp-group { border-top: 1px solid var(--outline); }
.pp-group:first-of-type { border-top: none; }
.pp-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.pp-toggle { flex: 1; text-align: left; background: none; border: none; color: var(--text); font-weight: 600; font-size: 0.9rem; padding: 0.55rem 0.2rem; display: flex; align-items: center; gap: 0.4rem; }
.pp-toggle:hover { border-color: transparent; color: var(--primary); }
.pp-caret { color: var(--text-dim); font-size: 0.8rem; width: 0.9rem; display: inline-block; }
.pp-count { color: var(--text-dim); font-weight: 500; font-size: 0.8rem; }
.pp-all { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: var(--text-mut); cursor: pointer; white-space: nowrap; }
.pp-all input { width: auto; accent-color: var(--primary); }
.pp-body { padding: 0.2rem 0 0.6rem; }
.pp-search { margin-bottom: 0.5rem; padding: 0.4rem 0.7rem; font-size: 0.85rem; border-radius: var(--r-sm); }
.pp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.1rem; }
.pp-check { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.88rem; color: var(--text); }
.pp-check:hover { background: var(--surface-hi); }
.pp-check input { width: auto; accent-color: var(--primary); flex-shrink: 0; }

/* Zugangsdaten-Box (im Custom-Dialog) */
.creds-box { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.85rem; white-space: pre-wrap; background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-md); padding: 0.8rem; margin: 0.6rem 0 0.7rem; overflow-x: auto; }

/* Toast */
.toast-host { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100; display: flex; flex-direction: column; gap: 0.5rem; align-items: center; pointer-events: none; }
.toast { background: var(--surface); border: 1px solid var(--outline); border-left: 3px solid var(--ok); border-radius: var(--r-md); padding: 0.7rem 1.1rem; font-size: 0.88rem; color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,0.4); opacity: 0; transform: translateY(10px); transition: opacity 0.25s, transform 0.25s; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast-warn { border-left-color: var(--warn); }
.toast-err { border-left-color: var(--crit); }

@media (prefers-reduced-motion: reduce) { .tab-panel, .toast { animation: none; transition: none; } }
@media (max-width: 640px) {
  .stats-primary { grid-template-columns: 1fr; }
  .sec-actions { width: 100%; }
  .tbl-search { flex: 1; min-width: 0; }
  /* Volle Breite für die Aktionen heißt: sie brechen um. Der Chevron gehört
     dann in die erste Zeile neben den Titel — hinter einer umgebrochenen
     Filterzeile stünde er allein auf einer dritten. */
  .card[data-collapse] .sec-head > .card-chev { order: 1; }
}

/* Freischaltungs-Matrix: Sektions-Sperre */
.pp-ctl { display: inline-flex; align-items: center; gap: 0.55rem; }
.pp-lock { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.78rem; color: var(--text-mut); cursor: pointer; white-space: nowrap; }
.pp-lock input { width: auto; accent-color: var(--crit); }
.pp-group.pp-locked .pp-list { opacity: 0.45; }
.pp-group.pp-locked > .pp-head .pp-toggle { color: var(--crit); }
.pp-group.pp-locked > .pp-head .pp-toggle::before {
  content: ''; display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.25em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Zielgruppen-Restriktion (P2-C) */
.mg-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; max-height: 55vh; overflow-y: auto; }
.mg-row { border: 1px solid var(--outline); border-radius: var(--r-md); padding: 0.5rem 0.7rem; }
.mg-name { font-weight: 600; font-size: 0.88rem; margin-bottom: 0.35rem; }
.mg-groups { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mg-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: var(--text-mut); background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-full); padding: 0.15rem 0.55rem; cursor: pointer; }
.mg-chip input { width: auto; accent-color: var(--primary); }

/* Admin/Vorschau-Umschalter (segmentiert) — konsistent zur Kundenseite */
.mode-toggle { display: inline-flex; border: 1px solid var(--outline); border-radius: var(--r-full); overflow: hidden; background: var(--surface-hi); }
.mode-toggle .mt-seg { font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.75rem; color: var(--text-mut); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; border: none; background: none; cursor: pointer; white-space: nowrap; }
.mode-toggle .mt-seg:hover { color: var(--text); border-color: transparent; }
.mode-toggle .mt-seg.active { background: var(--primary); color: var(--on-primary); }
/* ═══ Custom-Dropdown (cselect.js) — Progressive Enhancement über native <select> ═══ */
.cselect-wrap { display: contents; }
.cs-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; pointer-events: none; }
.cselect {
  font: inherit; width: 100%; text-align: left; line-height: 1.3;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--r-md);
  padding: 0.65rem 0.85rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  transition: border-color var(--m3-effect-fast-dur) var(--m3-effect-fast), background var(--m3-effect-fast-dur) var(--m3-effect-fast);
}
.cselect:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--outline)); }
.cselect:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.cselect[aria-expanded="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--bg)); }
.cselect:disabled { opacity: 0.5; cursor: not-allowed; }
.cselect .cs-val { display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cselect .cs-ph { color: var(--text-dim); }
.cselect .cs-caret { flex: none; color: var(--text-mut); font-size: 0.75em; transition: transform var(--m3-effect-fast-dur) var(--m3-effect-fast); }
.cselect[aria-expanded="true"] .cs-caret { transform: rotate(180deg); }
/* Größen-Klassen erneut (nach .cselect), damit kompakte Tabellen-Selects klein bleiben */
.cselect.retrain-sel { width: auto; padding: 0.3rem 0.5rem; font-size: 0.78rem; border-radius: var(--r-sm); gap: 0.35rem; }

.cs-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent) inset; }
.cs-ic { flex: none; font-size: 0.95em; line-height: 1; }

.cs-pop {
  position: absolute; z-index: 1200; box-sizing: border-box;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface-hi); color: var(--text);
  border: 1px solid var(--outline); border-radius: var(--r-lg);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  padding: 0.3rem; scrollbar-width: thin;
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top center;
  transition: opacity var(--m3-effect-fast-dur) var(--m3-effect-fast), transform var(--m3-effect-fast-dur) var(--m3-effect-fast);
}
.cs-pop.up { transform-origin: bottom center; transform: translateY(4px) scale(0.98); }
.cs-pop.in { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) { .cs-pop { transition: opacity 0.1s ease; transform: none; } .cs-pop.up { transform: none; } .cselect .cs-caret { transition: none; } }
.cs-grp { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); padding: 0.5rem 0.6rem 0.25rem; }
.cs-opt {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.6rem; border-radius: var(--r-sm); cursor: pointer;
  font-size: 0.88rem; color: var(--text); white-space: nowrap;
}
.cs-opt .cs-opt-lbl { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.cs-opt .cs-check { flex: none; color: var(--primary); opacity: 0; font-size: 0.9em; }
.cs-opt.sel { color: var(--primary); font-weight: 600; }
.cs-opt.sel .cs-check { opacity: 1; }
.cs-opt.active { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.cs-opt.disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══ Mobile/Touch (2026-07) — Admin ist desktop-first; nur das Nötigste für Touch ═══ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
button, .btn, .btn-sm, .btn-primary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* iOS zoomt bei Fokus auf Felder < 16px — nur auf Touch-Geräten anheben (Desktop bleibt kompakt) */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  button, .btn, .btn-primary { min-height: 44px; }
}

/* ═══ Einklappbare Audit-Ergebnis-Gruppen (Ergebnisse-Tab), Zustand persistent ═══ */
.res-group { border: 1px solid var(--outline); border-radius: var(--r-md); margin-bottom: 0.6rem; background: var(--surface); overflow: hidden; }
.res-group > summary { cursor: pointer; list-style: none; padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.res-group > summary::-webkit-details-marker { display: none; }
.res-group > summary::before {
  content: ''; width: 0.85em; height: 0.85em; flex: none; color: var(--text-mut);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.29 6.71a.996.996 0 0 0 0 1.41L13.17 12l-3.88 3.88a.996.996 0 1 0 1.41 1.41l4.59-4.59a.996.996 0 0 0 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--m3-effect-fast-dur) var(--m3-effect-fast);
}
.res-group[open] > summary::before { transform: rotate(90deg); }
.res-count { font-size: 0.8rem; color: var(--text-mut); background: var(--surface-hi); border-radius: var(--r-full); padding: 0.1rem 0.55rem; }
.res-meta { font-size: 0.78rem; font-weight: 600; }
.res-mini { width: 100%; border-collapse: collapse; }
.res-mini th, .res-mini td { text-align: left; padding: 0.45rem 0.9rem; border-top: 1px solid var(--outline); font-size: 0.85rem; }
.res-mini th { color: var(--text-mut); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .res-group > summary::before { transition: none; } }

/* ── Mobile-Pass (2026-07-17): kein horizontaler Seiten-Scroll ─────────────
   1) Header: Userbox (Ansicht-Umschalter + Abmelden) darf umbrechen — sie war
      der einzige echte Seiten-Overflow (+59 px bei 360 px).
   2) Tabellen mit fester Spaltenzuordnung werden unter 700 px zu gestapelten
      Karten (Label via ::before aus dem Spaltenindex). Die Matrix im
      Mitarbeiter-Modal (dynamische Spalten) bleibt ein Scroll-Container. */
@media (max-width: 700px) {
  header.site { flex-wrap: wrap; }
  .userbox { flex-wrap: wrap; row-gap: 0.4rem; min-width: 0; justify-content: flex-end; }

  #emp-modal-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tabelle → Karten */
  #companies-table, table.users-table, #incidents-table, #completions-table, table.res-mini { border: 0; }
  #companies-table thead, table.users-table thead, #incidents-table thead, #completions-table thead, table.res-mini thead { display: none; }
  #companies-table, table.users-table, #incidents-table, #completions-table, table.res-mini,
  #companies-table tbody, table.users-table tbody, #incidents-table tbody, #completions-table tbody, table.res-mini tbody,
  #companies-table tr, table.users-table tr, #incidents-table tr, #completions-table tr, table.res-mini tr,
  #companies-table td, table.users-table td, #incidents-table td, #completions-table td, table.res-mini td { display: block; width: 100%; }
  #companies-table tr, table.users-table tr, #incidents-table tr, #completions-table tr, table.res-mini tr {
    background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-lg);
    padding: 0.55rem 0.8rem; margin-bottom: 0.65rem;
  }
  #companies-table td, table.users-table td, #incidents-table td, #completions-table td, table.res-mini td {
    display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap;
    border: 0; padding: 0.22rem 0; text-align: left;
  }
  #companies-table td::before, table.users-table td::before, #incidents-table td::before, #completions-table td::before, table.res-mini td::before {
    flex: 0 0 96px; color: var(--text-dim); font-size: 0.74rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  /* Leere Zellen + Leerzustands-Zeile (colspan) ohne Label */
  #companies-table td:empty, table.users-table td:empty, #incidents-table td:empty, #completions-table td:empty, table.res-mini td:empty { display: none; }
  #companies-table td[colspan]::before, table.users-table td[colspan]::before, #incidents-table td[colspan]::before, #completions-table td[colspan]::before, table.res-mini td[colspan]::before { content: none; }

  /* Spalten-Labels (Reihenfolge = thead der jeweiligen Tabelle) */
  #companies-table td:nth-child(1)::before { content: 'Firma'; }
  #companies-table td:nth-child(2)::before { content: 'Leitung'; }
  #companies-table td:nth-child(3)::before { content: 'Gebucht'; }
  #companies-table td:nth-child(4)::before { content: 'Team-Code'; }
  #companies-table td:nth-child(5)::before { content: 'Ergebnisse'; }
  #companies-table td:nth-child(6)::before { content: 'Status'; }
  #companies-table td:nth-child(7)::before { content: 'Aktionen'; }

  table.users-table td:nth-child(1)::before { content: 'Name'; }
  table.users-table td:nth-child(2)::before { content: 'Login'; }
  table.users-table td:nth-child(3)::before { content: 'Rolle'; }
  table.users-table td:nth-child(4)::before { content: 'Firma'; }
  table.users-table td:nth-child(5)::before { content: 'Weg'; }
  table.users-table td:nth-child(6)::before { content: 'Aktivität'; }
  table.users-table td:nth-child(7)::before { content: 'Wiederholung'; }
  table.users-table td:nth-child(8)::before { content: 'Status'; }
  table.users-table td:nth-child(9)::before { content: 'Aktionen'; }

  #incidents-table td:nth-child(1)::before { content: 'Datum'; }
  #incidents-table td:nth-child(2)::before { content: 'Firma'; }
  #incidents-table td:nth-child(3)::before { content: 'Melder'; }
  #incidents-table td:nth-child(4)::before { content: 'Kategorie'; }
  #incidents-table td:nth-child(5)::before { content: 'Schwere'; }
  #incidents-table td:nth-child(6)::before { content: 'Beschreibung'; }
  #incidents-table td:nth-child(7)::before { content: 'Status'; }
  #incidents-table td:nth-child(8)::before { content: 'Maßnahmen'; }

  #completions-table td:nth-child(1)::before { content: 'Datum'; }
  #completions-table td:nth-child(2)::before { content: 'Firma'; }
  #completions-table td:nth-child(3)::before { content: 'Schulung'; }
  #completions-table td:nth-child(4)::before { content: 'Teilnehmer'; }
  #completions-table td:nth-child(5)::before { content: 'Konto'; }
  #completions-table td:nth-child(6)::before { content: 'Ergebnis'; }
  #completions-table td:nth-child(7)::before { content: 'Bestanden'; }
  #completions-table td:nth-child(8)::before { content: 'Zertifikat'; }

  table.res-mini td:nth-child(1)::before { content: 'Datum'; }
  table.res-mini td:nth-child(2)::before { content: 'Audit'; }
  table.res-mini td:nth-child(3)::before { content: 'Person'; }
  table.res-mini td:nth-child(4)::before { content: 'Ergebnis'; }
  table.res-mini td:nth-child(5)::before { content: 'Reifegrad'; }
  table.res-mini td:nth-child(6)::before { content: 'Kritisch'; }

  .inc-desc { max-width: none; }
}

/* Geteilte Inhalte: Tabelle → Karten unter 700 px (gleiche Mechanik wie oben) */
@media (max-width: 700px) {
  #shares-table { border: 0; }
  #shares-table thead { display: none; }
  #shares-table, #shares-table tbody, #shares-table tr, #shares-table td { display: block; width: 100%; }
  #shares-table tr { background: var(--surface-hi); border: 1px solid var(--outline); border-radius: var(--r-lg); padding: 0.55rem 0.8rem; margin-bottom: 0.65rem; }
  #shares-table td { display: flex; gap: 0.6rem; align-items: baseline; flex-wrap: wrap; border: 0; padding: 0.22rem 0; text-align: left; }
  #shares-table td::before { flex: 0 0 96px; color: var(--text-dim); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  #shares-table td:empty { display: none; }
  #shares-table td[colspan]::before { content: none; }
  #shares-table td:nth-child(1)::before { content: 'Empfänger'; }
  #shares-table td:nth-child(2)::before { content: 'Inhalt'; }
  #shares-table td:nth-child(3)::before { content: 'Zertifikat'; }
  #shares-table td:nth-child(4)::before { content: 'Erstellt'; }
  #shares-table td:nth-child(5)::before { content: 'Öffnungen'; }
  #shares-table td:nth-child(6)::before { content: 'Abschlüsse'; }
  #shares-table td:nth-child(7)::before { content: 'Zuletzt fertig'; }
  #shares-table td:nth-child(8)::before { content: 'Status'; }
  #shares-table td:nth-child(9)::before { content: 'Aktionen'; }
}

/* Ansichts-Umschalter im Kopf: auf Touch eine echte Trefferfläche (war 32 px) */
@media (pointer: coarse) { .mode-toggle .mt-seg { min-height: 44px; } }

/* ── Übergabe-Dialog: Share-Link scannen ODER kopieren ──────────────────────
   Das Kärtchen ist weiß und behält seinen Rand — die Oberfläche ist dunkel,
   und ein QR ohne helle Ruhezone wird von vielen Kameras nicht erkannt.
   Feste Pixelbreite statt Prozent: der Code muss aus ~40 cm scannbar bleiben,
   unabhängig davon, wie breit der Dialog gerade ist.
   Spiegelbild des Blocks in frontend/styles.css — der Dialog (`share-qr.js`)
   ist geteilt, die Stylesheets sind es nicht. */
.qr-tl { font-weight: 700; font-size: 0.85rem; color: var(--text-mut); margin: 1.05rem 0 0.3rem; }
.qr-card {
  width: fit-content; margin: 0 auto; padding: 10px; line-height: 0;
  background: #fff; border-radius: var(--r-lg); box-shadow: 0 2px 10px rgb(0 0 0 / 35%);
}
.qr-img { display: block; width: min(260px, 60vw); height: auto; }
.qr-hint { margin-top: 0.9rem; font-size: 0.88rem; }
.qr-url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.qr-opens { margin-top: 0.7rem; font-size: 0.82rem; }
@media (pointer: coarse) { .qr-actions .btn-sm { min-height: 44px; } }
@media (max-width: 560px) { .qr-img { width: min(230px, 66vw); } }

/* ── Firmendetail (#firma-<id>) ── */
.cd-link { color: var(--text); text-decoration: none; }
.cd-link:hover strong { color: var(--primary); text-decoration: underline; }
.cd-list { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.cd-list li { padding: 0.32rem 0; border-bottom: 1px solid var(--outline); font-size: 0.88rem; }
.cd-list li:last-child { border-bottom: 0; }

/* ── Command-Palette (⌘K) ── */
#cmdk { position: fixed; inset: 0; z-index: 300; }
.cmdk-back { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.cmdk-box { position: relative; max-width: 560px; margin: 12vh auto 0; background: var(--surface-high, var(--surface)); border: 1px solid var(--outline); border-radius: var(--r-2xl, 16px); overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5); }
#cmdk-input { width: 100%; border: 0; border-bottom: 1px solid var(--outline); background: transparent; color: var(--text); font: inherit; font-size: 1rem; padding: 0.9rem 1rem; outline: none; }
#cmdk-list { list-style: none; margin: 0; padding: 0.3rem; max-height: 46vh; overflow-y: auto; }
#cmdk-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 10px; cursor: pointer; }
#cmdk-list li small { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#cmdk-list li.active, #cmdk-list li:hover { background: var(--primary-container); color: var(--on-primary-container); }
#cmdk-list li.active small { color: inherit; opacity: 0.8; }
#cmdk-list .cmdk-empty { color: var(--text-dim); cursor: default; }
.cmdk-hint { margin: 0; padding: 0.45rem 1rem 0.55rem; font-size: 0.75rem; color: var(--text-dim); border-top: 1px solid var(--outline); }
.cd-userlink { background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer; }
.cd-userlink:hover strong { color: var(--primary); text-decoration: underline; }

/* Nutzer gruppiert nach Firma (gleiches Muster wie die Ergebnis-Gruppen) */
details.ugroup { border: 1px solid var(--outline); border-radius: var(--r-lg, 12px); margin-bottom: 0.7rem; background: var(--surface-container, transparent); }
.ugroup-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; min-height: 44px; }
.ugroup-head::-webkit-details-marker { display: none; }
.ugroup-head::before { content: '▸'; color: var(--text-dim); transition: transform 150ms ease; }
details.ugroup[open] > .ugroup-head::before { transform: rotate(90deg); }
.ugroup-head a { margin-left: auto; }
details.ugroup > div { padding: 0 0.9rem 0.8rem; }
@media (prefers-reduced-motion: reduce) { .ugroup-head::before { transition: none; } }

/* Dialog-Radio-/Checkbox-Zeilen (Muster Kunde .asg-row): der globale
   input{width:100%} würde Radios sonst aufblasen — Feldbefund Wiederholungs-Dialog. */
.asg-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 8px; cursor: pointer; }
.asg-row:hover { background: var(--surface-hi, rgba(255,255,255,0.05)); }
.asg-row input[type=radio], .asg-row input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); margin: 0; }
.asg-row .asg-name { flex: 1; }

/* Globales Dialog-✕ (ersetzt „Schließen"-Textknöpfe) */
.dlg-x { position: absolute; top: 0.65rem; right: 0.65rem; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--text-dim); font-size: 1.05rem; line-height: 1; cursor: pointer; }
.dlg-x:hover { background: var(--surface-hi, rgba(255,255,255,0.08)); color: var(--text); }
.dlg-x:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dlg-card { position: relative; padding-right: 3.2rem; }
.emp-modal-head { position: relative; padding-right: 3rem; }
.emp-modal-head .dlg-x { top: 50%; transform: translateY(-50%); }

/* Schnellwahl-Chips im Dialog */
.dlg-chiprow { display: flex; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.55rem; }


/* Empfängerblock im Versand-Dialog (ui.confirmMail). Die Adresse ist die
   Angabe, die vor einem Versand zählt — deshalb abgesetzt und dicktengleich,
   damit ein Tippfehler wie „firma@gmial.com" auch wirklich auffällt. */
.dlg-to { margin: 0.9rem 0 0.2rem; padding: 0.7rem 0.85rem; border-radius: var(--r-lg);
  border: 1px solid var(--outline); background: var(--surface-hi); }
.dlg-to-label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.dlg-to-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; }
.dlg-to-list li { font: 600 0.95rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); overflow-wrap: anywhere; }
.dlg-to-leer { color: var(--warn); font-size: 0.9rem; }