/* Qualifikationsliste — Design übernommen aus EDV Tagesgeschäft.
   Basis, Navigation und Komponenten sind bewusst identisch, damit sich
   beide Anwendungen gleich anfühlen. */

:root {
  --c-bg: #16181d;
  --c-surface: #1f2329;
  --c-surface-2: #262b33;
  --c-border: #2e333c;
  --c-border-strong: #3a414c;
  --c-text: #e8eaef;
  --c-muted: #9aa1ad;
  --c-primary: #ff4d2e;      /* Feuerwehr-Rot */
  --c-primary-2: #ff7651;
  --c-accent: #4ea1ff;
  --c-accent-flaeche: #1f6fd6;  /* Blau als Knopffläche: weiße Schrift 4,9:1 (--c-accent nur 2,7:1) */
  --c-success: #34c777;
  --c-warning: #f0b429;
  --c-danger: #ff5a6a;
  /* Eingabefelder: dunkler als die Karte, mit Rahmen, der sich abhebt —
     mindestens 3:1 gegen Karte, Seite und Modal (WCAG 1.4.11), Platzhalter
     4,5:1 gegen das Feld. Vorher lagen Feld und Karte bei 1,1:1, der Rahmen
     bei 1,2:1: Wo ein Feld anfing, sah man erst beim Hineinklicken. */
  --c-input-bg: #12151a;
  --c-input-border: #687182;
  --c-input-border-hover: #818a9a;
  --c-placeholder: #8b93a1;
  --radius: 10px;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.35);
  --shadow-2: 0 6px 24px rgba(0,0,0,0.25);
}

html, body { background: var(--c-bg); color: var(--c-text); }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  position: relative;
}
/* Globaler Farbverlauf für alle Seiten (fixed → folgt nicht dem Scroll) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 520px at 5% -5%,   rgba(255, 77, 46, 0.18), transparent 55%),
    radial-gradient(1100px 520px at 100% -5%, rgba(78, 161, 255, 0.12), transparent 55%),
    radial-gradient(900px 600px at 50% 110%,  rgba(255, 77, 46, 0.08), transparent 60%);
}

a { color: var(--c-accent); }
a:hover { color: #7bbcff; }

/* === Focus Rings (sichtbar, on-brand) === */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 77, 46, 0.35);
}

/* === Skip Link === */
.skip-link {
  position: absolute; top: -42px; left: 12px;
  background: var(--c-primary); color: #fff;
  padding: 8px 14px; border-radius: 8px;
  z-index: 2000; font-weight: 500;
  transition: top 150ms;
}
.skip-link:focus { top: 12px; color: #fff; }

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === Auth (Login) === */
.auth-bg {
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 10%, rgba(255, 77, 46, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, rgba(78, 161, 255, 0.12) 0%, transparent 50%),
    var(--c-bg);
  display: grid; place-items: center; padding: 2rem 1rem;
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  padding: 2rem 1.75rem;
}
.auth-logo { display:flex; justify-content:center; margin-bottom: 1.25rem; }
.auth-logo img { width: 180px; max-width: 100%; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35)); }
.auth-title { font-size: 1.25rem; font-weight: 600; text-align: center; letter-spacing: -0.01em; margin-bottom: 0.25rem; }
.auth-subtitle { text-align: center; color: var(--c-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.auth-card .form-label { font-size: 0.85rem; color: var(--c-muted); font-weight: 500; }

/* === Navbar im Hero-Card-Stil === */
.topnav {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--c-border);
  padding: 1.35rem 0;
  background:
    radial-gradient(1000px 320px at 5% -20%,   rgba(255, 77, 46, 0.32), transparent 55%),
    radial-gradient(800px 320px at 100% -20%,  rgba(78, 161, 255, 0.22), transparent 55%),
    linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
}
.topnav::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.05), transparent 60%);
  background-size: 320px 320px;
}
.topnav .container-fluid {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem;
}
.topnav-brand {
  display: inline-flex; align-items: center; gap: 1rem;
  color: var(--c-text);
  text-decoration: none;
  min-width: 0;
}
.topnav-brand:hover { color: var(--c-text); }
.topnav-brand:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 4px;
  border-radius: 14px;
}
.topnav-logo {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--c-border);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.30);
  flex-shrink: 0;
}
.topnav-logo img { width: 38px; height: auto; display: block; }

.topnav-greeting {
  display: flex; flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.topnav-greeting-title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topnav-greeting-title strong { color: var(--c-primary); font-weight: 700; }
.topnav-greeting-sub {
  font-size: .9rem;
  color: var(--c-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topnav-actions {
  display: inline-flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}
.topnav-actions .btn-outline-secondary {
  background: rgba(0, 0, 0, 0.18);
}
.topnav-actions .btn-outline-secondary:hover {
  background: rgba(0, 0, 0, 0.28);
  border-color: var(--c-border-strong);
}
.topnav-logout {
  color: var(--c-text) !important;
}
.topnav-logout:hover {
  color: var(--c-danger) !important;
  border-color: rgba(255, 90, 106, 0.45);
  background: rgba(255, 90, 106, 0.10);
}
.topnav-logout:hover .bi { color: var(--c-danger); }

@media (max-width: 768px) {
  .topnav { padding: .85rem 0; }
  .topnav-logo { width: 44px; height: 44px; border-radius: 12px; }
  .topnav-logo img { width: 30px; }
  .topnav-greeting-title { font-size: 1.15rem; }
  .topnav-greeting-sub { font-size: .8rem; }
  .topnav-logout span,
  .topnav-logout { font-size: .85rem; }
}
@media (max-width: 480px) {
  /* Auf sehr kleinen Schirmen: Logout-Text einsparen, nur Icon */
  .topnav-logout {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .topnav-logout .topnav-logout-label { display: none; }
  .topnav-logout .bi { margin: 0 !important; }
}

/* === Cards === */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  color: var(--c-text);
  box-shadow: var(--shadow-1);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--c-border);
  font-weight: 600;
  color: var(--c-text);
}

/* === Forms === */
.form-control, .form-select {
  background-color: var(--c-input-bg);
  border: 1px solid var(--c-input-border);
  color: var(--c-text);
  border-radius: 8px;
}
.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) { border-color: var(--c-input-border-hover); }
.form-control::placeholder { color: var(--c-placeholder); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--c-input-bg);
  border-color: var(--c-primary);
  color: var(--c-text);
  box-shadow: 0 0 0 3px rgba(255, 77, 46, 0.18);
}
.form-select option { background: var(--c-surface-2); color: var(--c-text); }

/* === Buttons === */
.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  font-weight: 500;
}
.btn-primary:hover, .btn-primary:focus {
  background: #e34324; border-color: #e34324; box-shadow: 0 0 0 3px rgba(255,77,46,0.18);
}
.btn-outline-secondary {
  color: var(--c-text);
  border-color: var(--c-border-strong);
  background: transparent;
}
.btn-outline-secondary:hover {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}
.btn-danger { background: var(--c-danger); border-color: var(--c-danger); }
.btn-danger:hover { background: #e6404f; border-color: #e6404f; }
.btn-akzent {
  background: var(--c-accent-flaeche); border-color: var(--c-accent-flaeche);
  color: #fff; font-weight: 500;
}
.btn-akzent:hover, .btn-akzent:focus {
  background: #1a5fb8; border-color: #1a5fb8; color: #fff;
  box-shadow: 0 0 0 3px rgba(78,161,255,0.25);
}

/* === KPI === */
.kpi {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.35rem;
  overflow: hidden;
}
.kpi::after {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-border-strong);
  border-radius: var(--radius) 0 0 var(--radius);
}
.kpi .label {
  font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--c-muted);
  display: inline-flex; align-items: center; gap: 6px;
}
.kpi .label i { font-size: 0.9rem; opacity: 0.85; }
.kpi .value {
  font-size: 2rem; font-weight: 700; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.kpi .delta { font-size: 0.75rem; color: var(--c-muted); }
.kpi.aktiv   .value { color: var(--c-success); } .kpi.aktiv::after   { background: var(--c-success); }
.kpi.urlaub  .value { color: var(--c-accent); }  .kpi.urlaub::after  { background: var(--c-accent); }
.kpi.krank   .value { color: var(--c-warning); } .kpi.krank::after   { background: var(--c-warning); }
.kpi.inaktiv .value { color: var(--c-muted); }   .kpi.inaktiv::after { background: var(--c-muted); }
.kpi.total::after { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-2)); }

/* === Status-Pills === */
.status-pill {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
}
.status-pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.status-aktiv   { color: #4ade8b; background: rgba(52, 199, 119, 0.14); }
.status-urlaub  { color: #7bbcff; background: rgba(78, 161, 255, 0.14); }
.status-krank   { color: #ffce5e; background: rgba(240, 180, 41, 0.16); }
.status-inaktiv { color: #b0b6c2; background: rgba(154, 161, 173, 0.16); }

/* === Avatar === */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff; font-weight: 600; font-size: 0.85rem;
  /* `flex: none` statt einer festen Basis: Eine Basis von 36px überstimmt in
     einem Flex-Behälter die Breite — die große Variante wurde dadurch zum
     Oval (36 breit, 64 hoch). */
  flex: none;
}
.avatar.lg { width: 44px; height: 44px; font-size: 1.05rem; }

/* === Tables === */
.table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table { margin-bottom: 0; color: var(--c-text); --bs-table-bg: transparent; }
.table thead th {
  background: var(--c-surface-2);
  text-transform: uppercase; font-size: 0.7rem;
  letter-spacing: 0.08em; color: var(--c-muted);
  font-weight: 600; border-bottom: 1px solid var(--c-border);
}
.table tbody tr { border-color: var(--c-border); }
.table tbody tr:hover { background: var(--c-surface-2); }
.table td { vertical-align: middle; color: var(--c-text); }
.table a.row-link { color: var(--c-text); text-decoration: none; font-weight: 500; }
.table a.row-link:hover { color: var(--c-primary-2); }
.table .text-muted { color: var(--c-muted) !important; }

/* === Detail-Header === */
.detail-header {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.field {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 0.85rem 1rem;
}
.field .k {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--c-muted); margin-bottom: 0.2rem;
}
.field .v { font-weight: 500; word-break: break-word; color: var(--c-text); }
.field .v.empty-v { color: #6b7280; font-weight: 400; font-style: italic; }

/* === Page Header === */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;
}
/* Knopfleiste im Kopf: lieber in eine zweite Zeile als Knöpfe, die Wort für
   Wort umbrechen und rechts aus dem Bild ragen (Handy). Gilt auch für Knöpfe
   in Kartenköpfen — dort bricht stattdessen der Titel um. */
.page-header > .d-flex { flex-wrap: wrap; }
.page-header .btn, .card-header .btn { white-space: nowrap; }
.page-title { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.page-subtitle { color: var(--c-muted); font-size: 0.92rem; margin-top: 0.15rem; }

/* === Empty State === */
.empty {
  text-align: center; padding: 3rem 1rem; color: var(--c-muted);
}
.empty i { font-size: 2.4rem; color: #4b5260; }

/* === Hero / Home === */
.hero {
  position: relative;
  background:
    radial-gradient(1000px 320px at 5% -10%, rgba(255,77,46,0.28), transparent 55%),
    radial-gradient(800px 320px at 100% -10%, rgba(78,161,255,0.18), transparent 55%),
    linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 2.4rem 1.9rem;
  margin-bottom: 1.75rem;
  display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.05), transparent 60%);
  background-size: 320px 320px;
}
.hero > * { position: relative; }
.hero-logo-wrap {
  width: 84px; height: 84px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.hero-logo-wrap img { width: 56px; height: auto; }
.hero h1 { font-size: 1.85rem; letter-spacing: -0.025em; margin: 0; font-weight: 700; }
.hero .lead { color: var(--c-muted); margin: 0.3rem 0 0; font-size: 0.95rem; }
.hero .badge-row { margin-top: 0.65rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hero .chip {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 0.78rem;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.hero .chip i { font-size: 0.85rem; color: var(--c-primary-2); }

@media (max-width: 600px) {
  .hero { padding: 1.6rem 1.2rem; }
  .hero-logo-wrap { width: 64px; height: 64px; }
  .hero-logo-wrap img { width: 42px; }
  .hero h1 { font-size: 1.4rem; }
}

.tile {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 1.2rem;
  color: var(--c-text);
  text-decoration: none;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
.tile:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
  background: var(--c-surface-2);
  color: var(--c-text);
}
.tile:active {
  transform: translateY(0) scale(0.99);
  background: var(--c-surface-2);
}
.tile .tile-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff; font-size: 1.25rem;
  margin-bottom: 0.95rem;
  box-shadow: 0 4px 14px rgba(255,77,46,0.25);
}
.tile.subtle .tile-icon {
  background: rgba(78, 161, 255, 0.18);
  color: var(--c-accent);
  box-shadow: none;
}
.tile h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; }
.tile p { font-size: 0.88rem; color: var(--c-muted); margin: 0; }
.tile .arrow { color: var(--c-muted); float: right; transition: transform 120ms; }
.tile:hover .arrow { transform: translateX(3px); color: var(--c-primary-2); }

/* === Alerts in dark === */
.alert { border: 1px solid transparent; border-radius: 10px; }
.alert-success { background: rgba(52,199,119,0.12); color: #6ee7a3; border-color: rgba(52,199,119,0.25); }
.alert-danger  { background: rgba(255,90,106,0.12); color: #ff8d97; border-color: rgba(255,90,106,0.25); }
.alert-info    { background: rgba(78,161,255,0.12); color: #9cc8ff; border-color: rgba(78,161,255,0.25); }
.alert-warning { background: rgba(240,180,41,0.12); color: #ffd874; border-color: rgba(240,180,41,0.25); }

.footer { font-size: 0.8rem; color: var(--c-muted); }
.text-muted { color: var(--c-muted) !important; }

/* === WA-Switch === */
.wa-switch {
  display: inline-flex;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.wa-switch-btn {
  background: transparent;
  border: none;
  color: var(--c-muted);
  padding: 6px 16px;
  font-size: 0.85rem;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.wa-switch-btn:hover { color: var(--c-text); }
.wa-switch-btn.is-active {
  background: var(--c-primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(255,77,46,0.3);
}

/* === Home-Cards === */
.home-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  box-shadow: var(--shadow-1);
  height: 100%;
  display: flex; flex-direction: column;
}
.home-card-head {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--c-border);
  display: flex; align-items: center; gap: 0.65rem;
  font-size: 0.92rem;
}
.home-card-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255, 77, 46, 0.14);
  color: var(--c-primary-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
}
.home-card-title { font-weight: 600; letter-spacing: -0.01em; }
.home-card-wa-chip {
  margin-left: auto;
  background: rgba(78, 161, 255, 0.16);
  color: var(--c-accent);
  border: 1px solid rgba(78, 161, 255, 0.3);
  font-size: 0.7rem;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 500;
}
.home-card-body { padding: 1rem; flex: 1; }

.kpi-big {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.placeholder-card { opacity: 0.85; }

/* === Quali-Counts (Mini-Balken) === */
.quali-counts { display: flex; flex-direction: column; gap: 0.4rem; }
.quali-count-row {
  display: grid;
  grid-template-columns: 130px 1fr 32px;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
}
.quali-name { color: var(--c-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quali-bar-wrap {
  height: 6px;
  background: var(--c-surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.quali-bar {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2));
  border-radius: 999px;
  transition: width 250ms ease;
}
.quali-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
  font-weight: 500;
}

.section-label {
  font-size: .78rem; color: var(--c-muted);
  font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: .55rem; margin-top: 1.5rem;
}

/* === Modul-Buttons (Home) === */
.module-buttons { margin-top: 0.5rem; }
.module-btn {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.4rem 1.5rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  color: var(--c-text);
  text-decoration: none;
  height: 100%;
  position: relative; overflow: hidden;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.module-btn::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c-border-strong);
  transition: background 150ms;
}
.module-btn:hover {
  transform: translateY(-2px);
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
  color: var(--c-text);
}
.module-btn:active { transform: translateY(0) scale(0.99); }

.module-btn-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: 1.55rem;
  flex-shrink: 0;
}
.module-btn-text { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.module-btn-title {
  font-size: 1.05rem; font-weight: 600;
  letter-spacing: -0.01em;
}
.module-btn-subtitle {
  font-size: 0.84rem; color: var(--c-muted);
}
.module-btn-arrow {
  color: var(--c-muted);
  font-size: 1.05rem;
  transition: transform 150ms, color 150ms;
}
.module-btn:hover .module-btn-arrow { transform: translateX(4px); color: var(--c-text); }

.module-btn.accent-primary::before { background: linear-gradient(180deg, var(--c-primary), var(--c-primary-2)); }
.module-btn.accent-primary .module-btn-icon {
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 77, 46, 0.28);
}
.module-btn.accent-info::before { background: var(--c-accent); }
.module-btn.accent-info .module-btn-icon {
  background: rgba(78, 161, 255, 0.18);
  color: var(--c-accent);
}
.module-btn.accent-success::before { background: var(--c-success); }
.module-btn.accent-success .module-btn-icon {
  background: rgba(52, 199, 119, 0.18);
  color: var(--c-success);
}

/* ============================================================
   Mitarbeiter-Profil — Detail-Seite
   ============================================================ */

.profile-hero {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.profile-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 280px at 8% -20%, rgba(255,77,46,0.22), transparent 55%),
    radial-gradient(700px 280px at 100% -30%, rgba(78,161,255,0.18), transparent 55%);
  pointer-events: none;
}
.profile-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.5rem;
  padding: 1.75rem 1.75rem;
  align-items: center;
}
@media (max-width: 900px) {
  .profile-hero-inner { grid-template-columns: auto 1fr; }
  .profile-quick { grid-column: 1 / -1; margin-top: 0.75rem; }
}

.profile-avatar {
  width: 96px; height: 96px;
  border-radius: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff; font-weight: 700; font-size: 2rem;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 30px rgba(255,77,46,0.35), inset 0 0 0 1px rgba(255,255,255,0.1);
}
.profile-identity { min-width: 0; }
.profile-name {
  font-size: 2rem; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 0.35rem; color: var(--c-text);
  line-height: 1.1;
}
.profile-meta {
  display: flex; flex-wrap: wrap; gap: 1rem;
  color: var(--c-muted); font-size: 0.92rem;
  margin-bottom: 0.65rem;
}
.profile-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }
.profile-meta i { color: var(--c-primary-2); font-size: 0.9rem; }

.profile-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.profile-quick {
  display: flex; flex-direction: column; gap: 0.45rem;
  min-width: 240px;
  border-left: 1px solid var(--c-border);
  padding-left: 1.25rem;
}
.profile-quick-item {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--c-text); text-decoration: none;
  font-size: 0.88rem;
  padding: 0.3rem 0;
  border-bottom: 1px dashed transparent;
}
.profile-quick-item:hover { color: var(--c-primary-2); border-bottom-color: var(--c-border); }
.profile-quick-item i {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--c-surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--c-muted); font-size: 0.85rem;
  flex-shrink: 0;
}
.profile-quick-item:hover i { color: var(--c-primary-2); }
.profile-quick-item span { word-break: break-word; }
@media (max-width: 900px) {
  .profile-quick { border-left: none; padding-left: 0; padding-top: 0.75rem; border-top: 1px solid var(--c-border); }
}

/* === Alert-Cards === */
.alert-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.alert-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
}
.alert-card-danger::before { background: var(--c-danger); }
.alert-card-warning::before { background: var(--c-warning); }
.alert-card-head {
  padding: 0.85rem 1rem 0.6rem 1.25rem;
  font-weight: 600;
  display: flex; align-items: center; gap: 0.55rem;
}
.alert-card-danger .alert-card-head { color: #ff8d97; }
.alert-card-warning .alert-card-head { color: #ffd874; }
.alert-card-list { list-style: none; padding: 0 1rem 0.85rem 1.25rem; margin: 0; }
.alert-card-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0.35rem 0;
  border-top: 1px dashed var(--c-border);
  font-size: 0.88rem;
}
.alert-card-list li small { color: var(--c-muted); }

/* === Key-Facts (Mini-Tiles) === */
.kfact {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  display: flex; flex-direction: column; gap: 0.25rem;
  transition: border-color 120ms;
}
.kfact:hover { border-color: var(--c-border-strong); }
.kfact-lbl {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-muted);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.kfact-lbl i { color: var(--c-primary-2); }
.kfact-val {
  font-size: 1.05rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kfact-val.empty { color: #6b7280; font-weight: 400; font-style: italic; }

/* === Tabs === */
.profile-tabs {
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--c-border);
}
.profile-tab {
  background: transparent;
  border: none;
  color: var(--c-muted);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.45rem;
  border-radius: 6px 6px 0 0;
  transition: color 120ms, background 120ms, border-color 120ms;
}
.profile-tab i { font-size: 0.95rem; }
.profile-tab:hover { color: var(--c-text); background: var(--c-surface-2); }
.profile-tab.is-active {
  color: var(--c-text);
  border-bottom-color: var(--c-primary);
  background: transparent;
}
.profile-tab.is-active i { color: var(--c-primary-2); }
.tab-count {
  background: var(--c-surface-2);
  color: var(--c-text);
  font-size: 0.7rem;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.profile-tab.is-active .tab-count { background: rgba(255,77,46,0.18); color: var(--c-primary-2); }

.profile-tab-panes { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 1.25rem; }
.profile-pane { display: none; }
.profile-pane.is-active { display: block; animation: pane-fade 200ms ease; }
@keyframes pane-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* === Quali in Tabs === */
.quali-block { margin-bottom: 1.2rem; }
.quali-block:last-child { margin-bottom: 0; }
.quali-block-head {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.quali-block-label {
  font-size: 0.74rem; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--c-muted); font-weight: 600;
}
.quali-block-count {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  font-size: 0.7rem;
  padding: 1px 8px; border-radius: 999px;
  color: var(--c-muted); font-variant-numeric: tabular-nums;
}
.quali-chip {
  display: inline-flex; align-items: center;
  background: rgba(255, 77, 46, 0.12);
  border: 1px solid rgba(255, 77, 46, 0.28);
  color: #ffae90;
  font-size: 0.82rem;
  padding: 5px 11px;
  border-radius: 999px;
  font-weight: 500;
}

/* === Kleidung-Kategorien === */
.kleidung-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.kleidung-cat {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.85rem;
}
.kleidung-cat-label {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--c-muted); font-weight: 600;
  margin-bottom: 0.55rem;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.kleidung-cat-label i { color: var(--c-primary-2); font-size: 0.95rem; }
.kleidung-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; }
.kleidung-grid .field { background: var(--c-surface); }

/* === Notfallkontakte === */
.kontakt-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.85rem;
}
.kontakt-card {
  display: flex; align-items: center; gap: 0.85rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.kontakt-card-num {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--c-primary-2);
  flex-shrink: 0;
}
.kontakt-card-name { font-weight: 600; }
.kontakt-card-num-tel {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; color: var(--c-muted);
  text-decoration: none; margin-top: 2px;
}
.kontakt-card-num-tel:hover { color: var(--c-primary-2); }

/* === Bootstrap dark form-check tweaks === */
.form-check-input {
  background-color: var(--c-input-bg);
  border-color: var(--c-input-border);
}
.form-check-input:hover:not(:checked):not(:disabled) { border-color: var(--c-input-border-hover); }
/* Bootstraps Knopf im ausgeschalteten Schalter ist zu 25 % weiß — auf dunklem
   Grund kaum zu sehen, der Schalter wirkte leer. Mit [data-bs-theme], sonst
   gewinnt Bootstraps eigene Regel für das dunkle Thema. */
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.62%29'/%3e%3c/svg%3e");
}
.form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); }

/* === Icon-Buttons mit ausreichender Hit-Area === */
.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 1rem;
}
.btn-icon.btn-icon-sm {
  width: 32px; height: 32px;
  font-size: 0.9rem;
  border-radius: 6px;
}
.btn-icon + .btn-icon { margin-left: 4px; }
.btn-danger-ghost {
  color: var(--c-danger);
  border-color: var(--c-border-strong);
  background: transparent;
}
.btn-danger-ghost:hover {
  background: rgba(255, 90, 106, 0.12);
  color: var(--c-danger);
  border-color: var(--c-danger);
}

/* === Logout (destructive, abgesetzt) === */
.nav-logout {
  color: var(--c-muted) !important;
  border-left: 1px solid var(--c-border);
  padding-left: 0.85rem !important;
  margin-left: 0.4rem;
}
.nav-logout:hover { color: var(--c-danger) !important; background: transparent !important; }

/* === Required-Sternchen === */
.required-star { color: var(--c-primary); margin-left: 2px; font-weight: 700; }

/* === Flatpickr Brand-Theme (Dark) === */
.flatpickr-calendar {
  background: var(--c-surface) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2) !important;
  color: var(--c-text);
}
.flatpickr-calendar.arrowTop::before { border-bottom-color: var(--c-border) !important; }
.flatpickr-calendar.arrowTop::after  { border-bottom-color: var(--c-surface) !important; }
.flatpickr-calendar.arrowBottom::before { border-top-color: var(--c-border) !important; }
.flatpickr-calendar.arrowBottom::after  { border-top-color: var(--c-surface) !important; }

.flatpickr-months,
.flatpickr-months .flatpickr-month {
  background: var(--c-surface-2);
  color: var(--c-text);
  border-radius: var(--radius) var(--radius) 0 0;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--c-text);
  fill: var(--c-text);
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--c-primary) !important; }
.flatpickr-current-month .numInputWrapper,
.flatpickr-current-month input.cur-year {
  color: var(--c-text);
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: var(--c-surface-2);
  color: var(--c-text);
}
.flatpickr-monthDropdown-month { background: var(--c-surface-2); color: var(--c-text); }

.flatpickr-weekdays { background: var(--c-surface-2); }
.flatpickr-weekday {
  color: var(--c-muted) !important;
  background: transparent !important;
  font-weight: 500;
}

.flatpickr-day {
  color: var(--c-text);
  border-color: transparent;
  border-radius: 8px;
}
.flatpickr-day:hover, .flatpickr-day:focus {
  background: var(--c-surface-2);
  border-color: var(--c-border-strong);
}
.flatpickr-day.today {
  border-color: var(--c-primary);
  color: var(--c-primary-2);
  font-weight: 600;
}
.flatpickr-day.today:hover { background: rgba(255,77,46,0.12); color: var(--c-text); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(255,77,46,0.4);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #5a6068; }
.flatpickr-day.flatpickr-disabled { color: #44494f; }

.numInputWrapper:hover { background: var(--c-surface-2); }
.numInputWrapper span { border-color: var(--c-border); }
.numInputWrapper span:hover { background: var(--c-surface-2); }
.numInputWrapper span.arrowUp::after { border-bottom-color: var(--c-text) !important; }
.numInputWrapper span.arrowDown::after { border-top-color: var(--c-text) !important; }

/* === Spinner für Loading-Buttons === */
.btn-spinner {
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: spin 700ms linear infinite;
  vertical-align: -3px; margin-right: 6px;
}
.btn[aria-busy="true"] .btn-spinner { display: inline-block; }
.btn[aria-busy="true"] .btn-label { opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Stammdaten-Modal: Mitarbeiter-Liste */
.stammdaten-list {
  max-height: 60vh;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .375rem;
}
.stammdaten-list .list-group-item {
  background: transparent;
  border-color: rgba(255,255,255,.06);
  color: inherit;
}
.stammdaten-list .list-group-item.active {
  background: var(--bs-primary, #d22);
  color: #fff;
  border-color: transparent;
}
.stammdaten-list .list-group-item:hover:not(.active) {
  background: rgba(255,255,255,.04);
}
.stammdaten-list .list-group-item.mb-list-inaktiv {
  opacity: .6;
}
.stammdaten-list .list-group-item.mb-list-inaktiv.active {
  opacity: 1;
}
@media (min-width: 992px) {
  .border-end-lg { border-right: 1px solid rgba(255,255,255,.08); }
}

/* === UI/UX-Pass: Lesebreite & Touch-Komfort ============================== */

/* Lesebreite cappen: auf sehr großen Monitoren wirken Listen sonst endlos. */
main.container-fluid { max-width: 1700px; margin-inline: auto; }

/* Touch-Targets ab Mobile (<=768px) auf min. 44px — Apple HIG / WCAG. */
@media (max-width: 768px) {
  .btn:not(.btn-icon):not(.btn-close) {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 40px;
    padding-top: .4rem;
    padding-bottom: .4rem;
  }
  .form-control,
  .form-select {
    min-height: 44px;
  }
  /* Verhindert iOS-Auto-Zoom: Mindest-Schriftgröße 16px in allen Eingabefeldern. */
  .form-control, .form-control-sm,
  .form-select, .form-select-sm {
    font-size: 16px;
  }
  .form-check-input {
    width: 1.15em;
    height: 1.15em;
  }
}

/* Verschachtelte Modal-Backdrops: zweite Ebene deutlich abdunkeln,
   damit das Edit-Overlay visuell vom Listen-Modal getrennt ist. */
/* Suche im Fenster „Alle ansehen" — steht fest über der scrollenden Liste. */
.kachel-alle-suche { padding: 0.6rem 1rem; border-bottom: 1px solid var(--c-border); }
/* Bearbeiten über dem Fenster „Alle ansehen" der Startseite (kachelfilter.js). */
.modal.ist-gestapelt { z-index: 1065; }
.modal-backdrop.ist-gestapelt { z-index: 1060; }
.modal-backdrop + .modal-backdrop {
  opacity: 0.7;
}

/* Card als Button (Konfig-Index): konsistentes Hover/Focus-Feedback. */
button.card,
a.card.text-decoration-none {
  text-align: left;
  transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
button.card:hover,
a.card.text-decoration-none:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
  background: var(--c-surface-2);
}
button.card:active,
a.card.text-decoration-none:active {
  transform: translateY(0) scale(.995);
}
button.card:focus-visible,
a.card.text-decoration-none:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(255, 77, 46, .25);
}

/* === Konfig-Modal: Kategorien-Liste & Open-Button === */
#kategorienModal .list-group-item {
  background: transparent;
  border-color: var(--c-border);
  color: var(--c-text);
  padding: .35rem .5rem;
  border-radius: 8px;
  margin-bottom: 2px;
  transition: background 120ms ease, border-color 120ms ease;
}
#kategorienModal .list-group-item:hover {
  background: var(--c-surface-2);
}
#kategorienModal .list-group-item.active {
  background: rgba(255, 77, 46, .12);
  border-color: rgba(255, 77, 46, .35);
  color: var(--c-text);
  box-shadow: inset 3px 0 0 var(--c-primary);
}
#kategorienModal .km-kat-open {
  color: var(--c-text);
  text-decoration: none;
  padding: .4rem .5rem;
  border-radius: 6px;
  line-height: 1.25;
}
#kategorienModal .km-kat-open:hover,
#kategorienModal .km-kat-open:focus-visible {
  color: var(--c-text);
  text-decoration: none;
}
#kategorienModal .km-kat-open .small { color: var(--c-muted); }
#kategorienModal .list-group-item.active .km-kat-open { color: var(--c-text); }
#kategorienModal .list-group-item.active .km-kat-open .small { color: var(--c-primary-2); }

/* Tabellen-Reihen in der Quals-Liste: dezentere Hover-Hervorhebung */
#kategorienModal #km-qual-tbody tr:hover { background: var(--c-surface-2); }
#kategorienModal #km-qual-tbody td { vertical-align: middle; }

/* === Funktionen-Modal: Karten-Grid pro Kategorie =========================== */
.funktionen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.funktion-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: border-color 120ms ease;
}
.funktion-card:hover { border-color: var(--c-border-strong); }
.funktion-card-head {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.funktion-card-head .bi {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(255, 77, 46, .14);
  color: var(--c-primary-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.funktion-card-title {
  font-weight: 600;
  font-size: .92rem;
  color: var(--c-text);
  letter-spacing: -0.005em;
}
.funktion-card-count {
  margin-left: auto;
  font-size: .72rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.funktion-card-body { padding: .5rem .35rem .35rem; }

/* Einzelne Checkbox-Zeile in der Karte (großzügige Hit-Area) */
.funktion-row {
  display: flex; align-items: center;
  padding: .45rem .55rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 100ms ease;
  gap: .65rem;
}
.funktion-row:hover { background: var(--c-surface-2); }
.funktion-row input[type="checkbox"] {
  width: 1.15em; height: 1.15em;
  flex-shrink: 0;
  cursor: pointer;
}
.funktion-row .funktion-label {
  font-size: .9rem;
  color: var(--c-text);
  user-select: none;
  flex: 1;
}
.funktion-row:has(input:checked) {
  background: rgba(255, 77, 46, .10);
}
.funktion-row:has(input:checked) .funktion-label {
  color: var(--c-primary-2);
  font-weight: 500;
}
.funktion-card-empty {
  padding: .85rem 1rem;
  color: var(--c-muted);
  font-size: .85rem;
}

/* "Im Dienstplan einsetzen"-Toggle pro Quali-Zeile (⊘-Pill).
   Default: ausgegraut/transparent — Klick toggelt zwischen "im Einsatz" und "gesperrt". */
.funktion-row-einsetzen {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--c-muted, #888);
  font-size: 1rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: .25;
  transition: opacity .15s, color .15s, border-color .15s, background .15s;
}
.funktion-row.is-checked .funktion-row-einsetzen,
.qual-row:has(.qual-cb:checked) .funktion-row-einsetzen {
  opacity: .55;
}
.funktion-row.is-checked .funktion-row-einsetzen:hover,
.qual-row:has(.qual-cb:checked) .funktion-row-einsetzen:hover {
  opacity: 1;
  color: #dc3545;
  border-color: rgba(220, 53, 69, .4);
}
.funktion-row-einsetzen.is-blocked {
  opacity: 1 !important;
  color: #fff;
  background: #dc3545;
  border-color: #dc3545;
}
.funktion-row-einsetzen.is-blocked:hover {
  background: #b02a37;
  border-color: #b02a37;
}

/* Funktionen-Modal im „Einsetzen-Only"-Modus (aus dem Dienstplan heraus geöffnet):
   linke Seitenleiste blenden, Haupt-Checkboxes sind disabled (JS), nur ⊘ aktiv. */
#funktionenModal.fm-einsetzen-only aside.col-lg-4 { display: none; }
#funktionenModal.fm-einsetzen-only section.col-lg-8 { flex: 0 0 100%; max-width: 100%; }
#funktionenModal.fm-einsetzen-only .fm-qual-cb {
  pointer-events: none;
  opacity: .65;
}
#funktionenModal.fm-einsetzen-only #fm-title::after {
  content: ' — nur „Im Dienstplan einsetzen" bearbeitbar';
  color: var(--c-muted, #999);
  font-style: italic;
}

/* === Action-Tile (Hero-Card-Stil als Button) ============================== */
.action-tile {
  position: relative;
  display: flex; align-items: center; gap: 1.3rem;
  padding: 1.6rem 1.75rem;
  background:
    radial-gradient(700px 240px at 5% -20%,   rgba(255, 77, 46, 0.26), transparent 55%),
    radial-gradient(600px 240px at 100% -20%, rgba(78, 161, 255, 0.18), transparent 55%),
    linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  border: 1px solid var(--c-border);
  border-radius: 16px;
  color: var(--c-text);
  text-decoration: none;
  overflow: hidden;
  height: 100%;
  box-shadow: var(--shadow-1);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
  -webkit-tap-highlight-color: transparent;
}
.action-tile::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.08), transparent 60%),
    radial-gradient(1px 1px at 70% 80%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.05), transparent 60%);
  background-size: 320px 320px;
}
.action-tile > * { position: relative; }
.action-tile:hover {
  transform: translateY(-2px);
  border-color: var(--c-border-strong);
  color: var(--c-text);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}
.action-tile:active { transform: translateY(0) scale(.997); }
.action-tile:focus-visible {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(255, 77, 46, 0.30);
}

.action-tile-icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-2));
  color: #fff;
  font-size: 1.7rem;
  box-shadow: 0 8px 22px rgba(255, 77, 46, 0.30),
              inset 0 0 0 1px rgba(255,255,255,0.10);
  flex-shrink: 0;
}
.action-tile.accent-info  .action-tile-icon {
  background: rgba(78, 161, 255, 0.20);
  color: var(--c-accent);
  box-shadow: 0 4px 14px rgba(78, 161, 255, 0.22),
              inset 0 0 0 1px rgba(78, 161, 255, 0.30);
}
.action-tile.accent-success .action-tile-icon {
  background: rgba(52, 199, 119, 0.20);
  color: var(--c-success);
  box-shadow: 0 4px 14px rgba(52, 199, 119, 0.20),
              inset 0 0 0 1px rgba(52, 199, 119, 0.30);
}
.action-tile.accent-warning .action-tile-icon {
  background: rgba(255, 184, 0, 0.20);
  color: #ffb800;
  box-shadow: 0 4px 14px rgba(255, 184, 0, 0.22),
              inset 0 0 0 1px rgba(255, 184, 0, 0.30);
}
.action-tile.accent-danger .action-tile-icon {
  background: rgba(255, 77, 77, 0.20);
  color: #ff6363;
  box-shadow: 0 4px 14px rgba(255, 77, 77, 0.22),
              inset 0 0 0 1px rgba(255, 77, 77, 0.30);
}

/* Kompakte Variante für In-Page-Aktionen */
.action-tile.action-tile-sm {
  padding: .85rem 1rem;
  gap: .85rem;
  border-radius: 12px;
}
.action-tile.action-tile-sm .action-tile-icon {
  width: 42px; height: 42px;
  font-size: 1.15rem;
  border-radius: 11px;
  box-shadow: 0 4px 12px rgba(255, 77, 46, 0.22),
              inset 0 0 0 1px rgba(255,255,255,0.10);
}
.action-tile.action-tile-sm .action-tile-title { font-size: .95rem; }
.action-tile.action-tile-sm .action-tile-sub   { font-size: .78rem; margin-top: .1rem; }
.action-tile.action-tile-sm .action-tile-arrow { font-size: 1.05rem; }
.action-tile.is-disabled {
  opacity: .55;
  pointer-events: none;
  filter: grayscale(.4);
}

/* Klickbare Tabellenzeilen (z.B. Wachbuch-Übersicht) */
tr.row-link { cursor: pointer; }
tr.row-link:hover { background: rgba(255, 77, 46, 0.06); }


/* =============================================================
   SweetAlert2 — Dark-Theme-Angleichung
   ============================================================= */
.swal2-popup {
  background: var(--c-surface) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-border);
  border-radius: 14px !important;
  box-shadow: var(--shadow-2);
}
.swal2-title,
.swal2-html-container {
  color: var(--c-text) !important;
}
.swal2-html-container { font-size: 1rem; }
.swal2-input,
.swal2-textarea,
.swal2-select,
.swal2-file {
  background: var(--c-input-bg) !important;
  color: var(--c-text) !important;
  border: 1px solid var(--c-input-border) !important;
  box-shadow: none !important;
}
.swal2-input::placeholder,
.swal2-textarea::placeholder { color: var(--c-placeholder) !important; }
.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 77, 46, 0.18) !important;
}
.swal2-validation-message {
  background: rgba(255, 90, 106, 0.12) !important;
  color: var(--c-danger) !important;
}
.swal2-validation-message::before {
  background: var(--c-danger) !important;
}
.swal2-footer { color: var(--c-muted) !important; border-top-color: var(--c-border) !important; }
.swal2-close { color: var(--c-muted) !important; }
.swal2-close:hover { color: var(--c-text) !important; }
.swal2-icon.swal2-warning { border-color: var(--c-warning); color: var(--c-warning); }
.swal2-icon.swal2-error { border-color: var(--c-danger); color: var(--c-danger); }
.swal2-icon.swal2-success { border-color: var(--c-success); color: var(--c-success); }
.swal2-icon.swal2-question { border-color: var(--c-accent); color: var(--c-accent); }
.swal2-icon.swal2-info { border-color: var(--c-accent); color: var(--c-accent); }
.swal2-loader { border-color: var(--c-primary) transparent var(--c-primary) transparent !important; }

.action-tile-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
}
.action-tile-title {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--c-text);
}
.action-tile-sub {
  font-size: .9rem;
  color: var(--c-muted);
  margin-top: .2rem;
}
.action-tile-arrow {
  color: var(--c-muted);
  font-size: 1.35rem;
  transition: transform 150ms ease, color 150ms ease;
}
.action-tile:hover .action-tile-arrow {
  transform: translateX(4px);
  color: var(--c-primary-2);
}

@media (max-width: 600px) {
  .action-tile { padding: 1.1rem 1.2rem; gap: 1rem; border-radius: 14px; }
  .action-tile-icon { width: 52px; height: 52px; font-size: 1.4rem; border-radius: 14px; }
  .action-tile-title { font-size: 1.05rem; }
  .action-tile-sub { font-size: .82rem; }
}

/* =============================================================
   Qualifikationsliste — eigene Bausteine
   ============================================================= */

/* Eine Qualifikation in der Bearbeitungsmaske: Bezeichnung links, rechts die
   Felder, die diese Qualifikation tatsächlich erfasst. Welche das sind,
   entscheidet der Baukasten am Modell — deshalb ein flexibles Layout statt
   fester Spalten. */
.qualifikation-zeile {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr);
  gap: .75rem 1rem;
  align-items: center;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--c-border);
}
.qualifikation-zeile:last-child { border-bottom: none; }
.qualifikation-zeile:hover { background: var(--c-surface-2); }
.qualifikation-name { font-weight: 500; display: block; }
.qualifikation-hinweis {
  display: block;
  font-size: .76rem;
  color: var(--c-muted);
  margin-top: .1rem;
}
/* Die Zeile, wegen der die Maske geöffnet wurde (Liste der ausgeschalteten Pflichten). */
.qualifikation-zeile.ist-hervorgehoben { box-shadow: inset 3px 0 0 var(--c-accent); background: var(--c-surface-2); }
/* „Pflicht für diese Person aus" unter dem Namen — die Begründung erscheint mit dem Häkchen. */
.pflicht-aus { margin-top: .35rem; font-size: .8rem; }
.pflicht-aus .form-check { min-height: 0; margin-bottom: 0; }
.pflicht-aus-grund { margin-top: .3rem; max-width: 28rem; }

.qualifikation-felder {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .8rem;
  align-items: flex-end;
}
.qualifikation-felder .feld { display: flex; flex-direction: column; min-width: 8.5rem; }
.qualifikation-felder .feld-breit { flex: 1 1 12rem; min-width: 10rem; }
.qualifikation-felder .feld-haken {
  display: flex; flex-direction: column; align-items: center;
  gap: .15rem; padding-bottom: .15rem;
}
.qualifikation-felder .feld-haken .form-check-input {
  width: 1.35rem; height: 1.35rem; margin: 0;
}
.feld-marke {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-muted);
  margin-bottom: .15rem;
  white-space: nowrap;
}
/* Errechnetes „gültig bis" — sichtbar, aber nicht eingebbar. */
.feld-errechnet {
  border: 1px dashed var(--c-border-strong);
  border-radius: 8px;
  padding: .25rem .55rem;
  font-size: .85rem;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: .4rem;
}
.feld-errechnet.ist-abgelaufen { color: var(--c-danger); border-color: var(--c-danger); }
.feld-errechnet.in-nachfrist { color: var(--stat-nach-text); border-color: var(--stat-nach-rand); }
.feld-errechnet.laeuft-ab { color: var(--c-warning); border-color: var(--c-warning); }
/* „einsetzbar bis …" unter dem errechneten Datum: Beim Eintragen ist das die
   Angabe, nach der jemand fragt — nicht das längst verstrichene Solldatum. */
.feld-nachfrist { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--stat-nach-text); }
/* „gültig bis" von Hand anders als vorgeschlagen — kein Fehler, aber sichtbar,
   damit beim nächsten Blick klar ist, dass jemand es bewusst so wollte. */
.feld-vorschlag { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--c-muted); }
/* „Auswahl nach Qualifikation": gewählt ist jemand, der sie nicht mehr hat. */
.feld-weg { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--stat-ab-text); }
option.ist-weg { color: var(--stat-ab-text); }
select:has(option.ist-weg:checked) { color: var(--stat-ab-text); border-color: var(--stat-ab-rand); }
/* Kennnummern im Freitext als „Nachname V." (namen.js) — nur Anzeige, gespeichert bleibt die Nummer. */
.feld-namen { display: block; margin-top: 0.2rem; font-size: 0.72rem; color: var(--c-muted); }
/* Namen zum Wählen unter einem Freitext- oder Suchfeld (namen.js, „Personen wählen"). */
.namen-wahl { position: relative; }
.namen-vorschlaege {
  position: absolute; z-index: 1080; top: 100%; left: 0; min-width: 100%; max-height: 16rem;
  overflow-y: auto; margin: 2px 0 0; padding: 0.25rem; list-style: none;
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-2);
}
.namen-vorschlaege button {
  display: flex; justify-content: space-between; gap: 0.8rem; width: 100%;
  padding: 0.3rem 0.5rem; border: 0; border-radius: 6px; background: none;
  color: var(--c-text); font-size: 0.85rem; text-align: left; white-space: nowrap;
}
.namen-vorschlaege button:hover, .namen-vorschlaege button.ist-aktiv { background: var(--c-border); }
.namen-vorschlaege .nummer { color: var(--c-muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
/* Auswahlliste mit Suchfeld (auswahlsuche.js): ganze Liste beim Klick, gefiltert beim Tippen. */
.suchliste { position: relative; }
.suchliste-feld { cursor: pointer; }
.suchliste-feld:focus { cursor: text; }
.suchliste-liste { max-height: 20rem; }
.suchliste-liste button { white-space: normal; }
.suchliste-liste button.ist-gewaehlt { font-weight: 600; }
.suchliste-leer { padding: 0.3rem 0.5rem; color: var(--c-muted); font-size: 0.85rem; }
/* Mehrfachauswahl: das Gewählte als Marken unter dem Suchfeld. */
.suchliste-marken { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.suchliste-marken:not(:empty) { margin-top: 0.4rem; }
.suchliste-weg { border: 0; background: none; padding: 0; color: inherit; line-height: 1; cursor: pointer; }

/* Hinweise unter „gültig bis" hängen unter dem Eingabefeld, statt es
   anzuheben. Im Fluss machten sie die Spalte höher — und weil die Felder
   einer Zeile unten bündig stehen, rutschten alle anderen nach oben, auch
   live, sobald datum.js den Vorschlagshinweis ein- oder ausblendet. Den
   Platz hält jede Zeile frei, die einen Hinweis zeigen *kann* — auch wenn er
   gerade verborgen ist; sonst rückte beim Umschalten die ganze Zeile, weil
   sie senkrecht mittig steht. `row-gap` hält ihn nach einem Umbruch frei. */
.qualifikation-felder .feld { position: relative; }
.qualifikation-felder .feld:has(.feld-hinweise) { min-width: 14.5rem; }
.feld-hinweise { position: absolute; top: 100%; left: 0; right: 0; }
.feld-hinweise > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qualifikation-felder:has(.feld-hinweise) { row-gap: 1.6rem; padding-bottom: 1.25rem; }
.qualifikation-felder:has(.feld-hinweise > * + *) { row-gap: 2.8rem; padding-bottom: 2.5rem; }

@media (max-width: 767.98px) {
  .qualifikation-zeile { grid-template-columns: 1fr; gap: .5rem; }
  .qualifikation-felder { gap: .5rem .6rem; }
}

/* Werte-Anzeige auf der Mitarbeiter-Seite */
.wert-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.wert-karte {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.wert-karte.leer { opacity: 0.45; }
.wert-karte .wert-name { font-size: 0.8rem; color: var(--c-muted); }
.wert-karte .wert-inhalt { font-weight: 500; }
.wert-karte.abgelaufen { border-color: var(--c-danger); }
.wert-karte.abgelaufen .wert-inhalt { color: var(--c-danger); }
.wert-karte.bald { border-color: var(--c-warning); }
.wert-karte.bald .wert-inhalt { color: var(--c-warning); }

/* Gesamtliste (Excel-Ansicht): erste Spalte bleibt beim Scrollen stehen.
   Begrenzte Höhe, damit der waagerechte Rollbalken immer in Reichweite ist
   statt erst hinter neunzig Zeilen — und damit der Kopf beim Blättern
   stehen bleibt. Mit tabindex erreichbar, dann schieben die Pfeiltasten. */
.matrix-wrap {
  overflow: auto;
  max-height: calc(100vh - 16rem);
  min-height: 18rem;
  scroll-padding-left: 2rem;
}
.matrix-wrap:focus-visible { outline: 2px solid var(--c-primary); outline-offset: -2px; }
.matrix-hinweis { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; }
.matrix-hinweis kbd {
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  border-radius: 5px; padding: 0 0.3rem; font-size: 0.9em; color: var(--c-text);
}
.matrix-tabelle { border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.matrix-tabelle th, .matrix-tabelle td {
  border-bottom: 1px solid var(--c-border);
  padding: 0.4rem 0.6rem;
}
.matrix-tabelle thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--c-surface-2);
  vertical-align: bottom;
  font-size: 0.72rem;
  /* Merkmalsnamen bleiben, wie sie geschrieben wurden: „KranMa" ist nicht
     dasselbe wie „KRANMA". Die Tabellen-Grundregel setzt sonst Versalien. */
  text-transform: none;
  letter-spacing: normal;
  color: var(--c-text);
}
/* Name und Wachabteilung nehmen nur die Breite, die ihr Inhalt braucht —
   alles Übrige gehört den Datenspalten. Bei einer Kategorie mit drei
   Einträgen streckte sich sonst auch die Namensspalte auf ein Viertel der
   Seite, obwohl dort nichts steht.

   `width: 1px` mit `nowrap` ist der Weg dahin: Die Zelle kann nicht unter
   ihre Inhaltsbreite, nimmt aber auch nichts vom verteilbaren Rest.
   (`max-width` wirkt bei Tabellenzellen nicht — das war der alte Fehler.) */
.matrix-tabelle .spalte-name {
  position: sticky; left: 0; z-index: 3;
  background: var(--c-surface);
  width: 1px;
  white-space: nowrap;
  text-align: left;
  padding-right: 1.1rem;
}
.matrix-tabelle .spalte-wa {
  background: var(--c-surface);
  width: 1px;
  white-space: nowrap;
  text-align: left;
  border-right: 1px solid var(--c-border);
}
/* Sie dockt an die Namensspalte an — aber erst, wenn deren Breite gemessen
   ist. Ohne JavaScript scrollt sie einfach mit, statt mit einem geratenen
   Abstand über dem Namen zu liegen. */
.matrix-tabelle.gemessen .spalte-wa {
  position: sticky; left: var(--spalte-name-breite); z-index: 3;
}
.matrix-tabelle.gemessen thead .spalte-wa { z-index: 4; }
/* Handy: Stünden Name und WA in voller Breite fest, verdeckten sie beim
   seitlichen Scrollen die Datenspalten — der Bildschirm war damit voll. Dort
   kürzt der Name auf eine feste Breite, und die WA scrollt mit. */
@media (max-width: 575.98px) {
  .matrix-tabelle .spalte-name .row-link {
    display: inline-block; max-width: 8.5rem; vertical-align: bottom;
    overflow: hidden; text-overflow: ellipsis;
  }
  .matrix-tabelle .spalte-name { padding-right: 0.5rem; }
  .matrix-tabelle.gemessen .spalte-wa { position: static; }
}
.matrix-tabelle thead .spalte-name,
.matrix-tabelle thead .spalte-wa { background: var(--c-surface-2); }
.matrix-tabelle thead .spalte-name { z-index: 4; }

/* Stehende Spalten müssen deckend sein — sonst scheint beim seitlichen
   Scrollen der Inhalt hindurch. Die Zebrastreifen sind halbdurchsichtig und
   überschrieben den deckenden Grund auf jeder zweiten Zeile; deshalb hier
   eigene, deckende Werte statt der Tönung. */
.matrix-tabelle tbody tr > .spalte-name,
.matrix-tabelle tbody tr > .spalte-wa { background: var(--c-surface); }
.matrix-tabelle tbody tr:nth-child(even) > .spalte-name,
.matrix-tabelle tbody tr:nth-child(even) > .spalte-wa {
  background: color-mix(in srgb, #fff 1.6%, var(--c-surface));
}
.matrix-tabelle tbody tr:hover > .spalte-name,
.matrix-tabelle tbody tr:hover > .spalte-wa {
  background: color-mix(in srgb, #fff 4.5%, var(--c-surface));
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .matrix-tabelle tbody tr:nth-child(even) > .spalte-name,
  .matrix-tabelle tbody tr:nth-child(even) > .spalte-wa { background: #22262c; }
  .matrix-tabelle tbody tr:hover > .spalte-name,
  .matrix-tabelle tbody tr:hover > .spalte-wa { background: var(--c-surface-2); }
}

/* --- Sortierschlüssel: die Stufe hinterlegt den Namen --------------------
   Deckend gemischt und nicht durchscheinend: Die Namensspalte der
   Gesamtliste steht beim seitlichen Scrollen fest, und alles Halbdurchsichtige
   ließe die Häkchen darunter durchwandern. Die Farbe kommt wie bei den
   Kategorien als --kat im Inline-Style. */
.personentabelle tbody tr > .spalte-person.stufen-grund,
.matrix-tabelle tbody tr > .spalte-name.stufen-grund {
  background: color-mix(in srgb, var(--kat) 45%, var(--c-surface));
}
.matrix-tabelle tbody tr:nth-child(even) > .spalte-name.stufen-grund {
  background: color-mix(in srgb, var(--kat) 45%,
                        color-mix(in srgb, #fff 1.6%, var(--c-surface)));
}
.personentabelle tbody tr:hover > .spalte-person.stufen-grund,
.matrix-tabelle tbody tr:hover > .spalte-name.stufen-grund {
  background: color-mix(in srgb, var(--kat) 45%, var(--c-surface-2));
}
/* Die Schrift wandert mit: Auf einem hellen Grund wird sie dunkel. Welche
   der beiden es ist, rechnet `Sortierschluessel.schriftfarbe` aus und
   liefert sie als --kat-schrift mit — CSS kann das noch nicht selbst. */
.stufen-grund,
.stufen-grund a,
.stufen-grund .personen-name,
.stufen-grund .row-link { color: var(--kat-schrift, var(--c-text)); }
.stufen-grund a:hover,
.stufen-grund .personen-zelle:hover .personen-name { color: var(--kat-schrift, var(--c-text)); opacity: .8; }
.stufen-grund .matrix-nummer { color: var(--kat-schrift, var(--c-muted)); opacity: .7; }
.stufen-grund .avatar { background: rgba(0, 0, 0, .22); color: var(--kat-schrift, var(--c-text)); }
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .personentabelle tbody tr > .spalte-person.stufen-grund,
  .matrix-tabelle tbody tr > .spalte-name.stufen-grund { background: var(--c-surface-2); }
}
/* Farbwahl: Farbrad plus benannte Tupfer. */
.farbwahl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.farbwahl input[type="color"] { width: 3rem; height: 2.25rem; padding: .2rem; flex: none; }
.farbtupfer-reihe { display: flex; flex-wrap: wrap; gap: .35rem; }
.farbtupfer-wahl {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; padding: 0;
  border: 2px solid transparent; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35) inset;
}
.farbtupfer-wahl:hover { transform: scale(1.15); }
.farbtupfer-wahl.ist-gewaehlt { border-color: var(--c-text); }

.wa-kuerzel { font-size: 0.75rem; color: var(--c-muted); white-space: nowrap; }
.matrix-tabelle tbody tr:hover td { background: var(--c-surface-2); }
.matrix-tabelle tbody tr:hover .spalte-name,
.matrix-tabelle tbody tr:hover .spalte-wa { background: var(--c-surface-2); }
.matrix-zelle { text-align: center; font-size: 0.8rem; }
/* Leere Zelle, aber die Angabe ist Pflicht — dasselbe Rot wie bei einer
   verstrichenen Frist, weil es dasselbe bedeutet. */
.matrix-zelle.ist-pflicht { color: var(--stat-ab-text); font-weight: 700; }
/* Geknüpfte Pflicht, deren Bedingung gerade nicht zutrifft — das
   Sternchen bleibt sichtbar, aber es mahnt nicht. */
.pflicht-marke.ist-ruhend { color: var(--c-muted); opacity: .6; }
/* Für diese Person ausgeschaltet (`PflichtAusnahme`) — durchgestrichen statt rot. */
.pflicht-marke.ist-aus { color: var(--c-muted); text-decoration: line-through; }
.matrix-zelle .bi-check-lg { color: var(--c-success); font-size: 1rem; }
/* Qualifikation liegt vor, wird aber gerade nicht ausgeübt. */
.matrix-zelle .bi-check-lg.ruht { color: var(--c-muted); opacity: 0.65; }
.matrix-zelle.leer { color: #4b5260; }
/* Anklickbare Zelle: Der Klick öffnet die Maske ihrer Kategorie für diese
   Person. Die Fläche liegt über der ganzen Zelle — auch über deren
   Innenabstand —, der Inhalt bleibt, wie er ist. */
.matrix-tabelle tbody td.matrix-zelle { position: relative; }
.matrix-zelle > .zellen-link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.matrix-zelle > .zellen-link::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.matrix-zelle > .zellen-link:hover::after,
.matrix-zelle > .zellen-link:focus-visible::after {
  outline: 2px solid var(--c-primary-2);
  outline-offset: -2px;
  border-radius: 3px;
}
/* Eintrag mit Bemerkung: blauer Streifen am unteren Rand, der Text erscheint
   beim Überfahren als Tooltip-Fenster (gesamtliste.js). Nur im Browser — das
   PDF hat seine eigene Vorlage. */
.matrix-tabelle tbody td.matrix-zelle.hat-kommentar::before {
  content: ""; position: absolute; left: 2px; right: 2px; bottom: 1px;
  height: 3px; border-radius: 2px; background: #4ea1ff; pointer-events: none;
}
.zellen-kommentar {
  position: fixed; z-index: 1080; max-width: 22rem; padding: 0.45rem 0.65rem;
  background: var(--c-surface-2); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-left: 3px solid #4ea1ff;
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-size: 0.8rem; line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere;
  pointer-events: none;
}
.zellen-kommentar[hidden] { display: none; }
.zellen-kommentar .zellen-kommentar-hinweis {
  display: block; margin-bottom: 0.2rem; font-weight: 700; color: var(--stat-ab-text);
}

/* Auf dem Telefon fressen zwei stehende Spalten den halben Bildschirm —
   dort scrollt die Wachabteilung mit. */
@media (max-width: 600px) {
  /* Zwei stehende Spalten fressen auf dem Telefon den halben Bildschirm. */
  .matrix-tabelle.gemessen .spalte-wa { position: static; }
}

/* Änderungslog */
.log-tabelle td { font-size: 0.85rem; vertical-align: top; }
.log-alt { color: var(--c-muted); text-decoration: line-through; }
.log-neu { color: var(--c-text); font-weight: 500; }
.log-zeit { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--c-muted); }

/* Fußzeile „zuletzt geändert von" */
.aenderungs-hinweis {
  font-size: 0.78rem;
  color: var(--c-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Kennzahlen im Hero der Startseite */
.kpi-mini { min-width: 6.5rem; }
.kpi-mini .fs-3 { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }

/* Wachabteilungs-Anzeige im Kopf */

/* Das Dropdown muss aus dem Kopf herausragen dürfen — die übernommene Regel
   .topnav { overflow: hidden } (dort für den Verlauf gesetzt) schnitt es ab.
   Die Verlaufsflächen sind ohnehin auf inset:0 begrenzt, brauchen das also nicht. */
.topnav { overflow: visible; }

.wa-schalter .dropdown-item.active { background: var(--c-primary); color: #fff; }
.wa-schalter .dropdown-item { border: 0; background: none; width: 100%; text-align: left; }
.wa-marke {
  display: inline-flex; align-items: center;
  padding: .35rem .7rem;
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--c-muted);
  white-space: nowrap;
}

/* Sortieren per Drag & Drop */
.sortier-hinweis {
  display: flex; align-items: center; gap: .4rem;
  color: var(--c-muted); font-size: .85rem;
  margin-bottom: .75rem;
}
.sortier-griff {
  cursor: grab;
  color: var(--c-muted);
  text-align: center;
  touch-action: none;         /* sonst scrollt das Tablet statt zu ziehen */
  user-select: none;
}
.sortier-griff:active { cursor: grabbing; }
tr:hover > .sortier-griff { color: var(--c-text); }
.sortier-platzhalter > td { background: rgba(255, 77, 46, .10); }
.sortier-gewaehlt > td { background: var(--c-surface-2); }
.sortier-laeuft { opacity: .6; }

.sortier-meldung {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1080;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  border-radius: 8px;
  padding: .55rem .9rem;
  font-size: .85rem;
  color: var(--c-text);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.sortier-meldung.sichtbar { opacity: 1; transform: none; }

/* Schalter, die direkt in den Übersichten liegen — „aktiv", „Kachel". */
.schalter-feld { display: flex; align-items: center; gap: 0.45rem; padding-left: 2.4rem; margin: 0; }
.schalter-feld .form-check-input { margin: 0 0 0 -2.4rem; cursor: pointer; flex: none; }
.schalter-feld .form-check-input:disabled { opacity: 0.5; }
.schalter-text { font-size: 0.8rem; color: var(--c-text); cursor: pointer; white-space: nowrap; }
.schalter-text.ist-aus { color: var(--c-muted); }

/* Kurz aufleuchten, damit man sieht, welche Zeile eben gespeichert wurde. */
@keyframes zeile-frisch { from { background: rgba(255, 77, 46, 0.22); } to { background: transparent; } }
.zeile-frisch > td { animation: zeile-frisch 1.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .zeile-frisch > td { animation: none; } }

/* Der Modalinhalt kommt vom Server und hängt dadurch in zwei zusätzlichen
   Ebenen: der Hülle, die ausgetauscht wird, und dem Formular. Bootstraps
   Scroll-Layout rechnet aber damit, dass .modal-body direkt unter
   .modal-content liegt. Ohne das Weiterreichen der Flex-Spalte wächst der
   Inhalt über .modal-content hinaus, wird von dessen overflow:hidden
   abgeschnitten — und die Fußzeile mit dem Speichern-Knopf ist auf kurzen
   Bildschirmen nicht mehr erreichbar. */
#konfig-modal-inhalt,
#konfig-modal-inhalt > form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;          /* sonst schrumpft ein Flex-Kind nie unter seinen Inhalt */
}
#konfig-modal .modal-body { min-height: 0; }

/* Startseite einrichten */
.kachel-halter { position: relative; }
/* Im Einrichten-Modus bekommt jede Kachel oben Luft für ihre Werkzeugleiste —
   sonst legt die sich über den Bearbeiten-Knopf im Kartenkopf. */
.kacheln-anpassen .kachel-halter { padding-top: 2.4rem; }
/* Beim Einrichten nur die Köpfe: So passen alle Kacheln auf wenige
   Bildschirmhöhen, und eine gegriffene Kachel ist nicht halb so groß wie
   die Seite. */
.kacheln-anpassen .kat > :not(.card-header) { display: none; }
.kacheln-anpassen .kat > .card-header { border-bottom: 0; }
.kacheln-anpassen .kachel-halter > .card,
.kacheln-anpassen .kachel-halter > .action-tile {
  outline: 1px dashed var(--c-border-strong);
  outline-offset: 3px;
}
/* Beim Einrichten wird nicht navigiert, sondern angeordnet. */
.kacheln-anpassen .kachel-halter > .action-tile,
.kacheln-anpassen .kachel-halter .card a,
.kacheln-anpassen .kachel-halter .card .btn { pointer-events: none; }

.kachel-werkzeuge {
  position: absolute;
  top: 0; right: .35rem;
  z-index: 3;
  display: flex; align-items: center; gap: .35rem;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  border-radius: 999px;
  padding: .2rem .5rem;
  box-shadow: var(--shadow-1);
}
.kachel-griff {
  cursor: grab;
  color: var(--c-muted);
  touch-action: none;      /* sonst scrollt das Tablet statt zu ziehen */
  user-select: none;
  display: inline-flex;
}
.kachel-griff:active { cursor: grabbing; }
.kachel-werkzeuge .btn { padding: .1rem .4rem; line-height: 1; }
.kachel-werkzeuge .form-check-input { margin-top: 0; cursor: pointer; }

/* Ausgeblendete Kacheln bleiben im Einrichten-Modus sichtbar, aber zurückgenommen. */
.ist-ausgeblendet > .card,
.ist-ausgeblendet > .action-tile {
  opacity: .35;
  filter: grayscale(.6);
}

/* ============================================================
   Statusanzeige — eine Bildsprache für alle Ansichten
   ============================================================
   Farbe trägt hier Bedeutung, nicht Schmuck. Vier Zustände, die im ganzen
   Haus dasselbe heißen: rot = Frist verstrichen, bernstein = Frist rückt
   heran, grün = befristet und in Ordnung, blau = liegt vor und ruht.
   Alles Übrige bleibt farblos, damit die drei Farben wirken.

   Die wichtigste Unterscheidung ist rot gegen bernstein: „abgelaufen" ist
   eine offene Aufgabe, „läuft ab" eine Vormerkung. Vorher sahen beide gleich
   aus — deshalb hat abgelaufen zusätzlich ein Symbol und einen kräftigeren
   Rand, damit es auch ohne Farbsehen auffällt.

   Dazwischen liegt orange: der Termin ist verstrichen, die Berechtigung noch
   da. Wer zuletzt 2024 geübt hat, ist 2025 überfällig und darf trotzdem
   eingesetzt werden — erst 2026 ist er raus. Orange und nicht gelb, weil
   bernstein schon die Vormerkung trägt und zwei Gelbtöne nebeneinander
   niemand auseinanderhält; die Stufe muss dringlicher aussehen als die
   Vormerkung und weniger dringlich als das Erlöschen. Das Dreieck
   unterscheidet sie zusätzlich von Uhr (Vormerkung) und Achteck (erloschen).
*/
:root {
  --stat-ab-bg:    rgba(255, 90, 106, 0.16);
  --stat-ab-rand:  rgba(255, 90, 106, 0.50);
  --stat-ab-text:  #ff97a1;
  --stat-bald-bg:  rgba(240, 180, 41, 0.15);
  --stat-bald-rand:rgba(240, 180, 41, 0.45);
  --stat-bald-text:#f5c95c;
  --stat-nach-bg:  rgba(255, 140, 66, 0.17);
  --stat-nach-rand:rgba(255, 140, 66, 0.50);
  --stat-nach-text:#ffa76b;
  --stat-gut-bg:   rgba(52, 199, 119, 0.12);
  --stat-gut-rand: rgba(52, 199, 119, 0.34);
  --stat-gut-text: #6bd99e;
  --stat-ruht-bg:  rgba(78, 161, 255, 0.12);
  --stat-ruht-rand:rgba(78, 161, 255, 0.32);
  --stat-ruht-text:#8dc2ff;
}

/* Ziffern in gleicher Breite: Datumsspalten stehen dadurch untereinander. */
.stat, .tabellenziffern, .matrix-tabelle td, .matrix-tabelle th,
.table td, .table th { font-variant-numeric: tabular-nums; }

.stat {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.16rem 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  line-height: 1.35;
  white-space: nowrap;
}
.stat .bi { font-size: 0.78em; align-self: center; }
.stat-frist { opacity: 0.8; font-size: 0.92em; }

.stat-abgelaufen { background: var(--stat-ab-bg);   border-color: var(--stat-ab-rand);   color: var(--stat-ab-text); font-weight: 600; }
.stat-laeuft_ab  { background: var(--stat-bald-bg); border-color: var(--stat-bald-rand); color: var(--stat-bald-text); }
.stat-nachfrist  { background: var(--stat-nach-bg); border-color: var(--stat-nach-rand); color: var(--stat-nach-text); font-weight: 600; }
.stat-gueltig    { background: var(--stat-gut-bg);  border-color: var(--stat-gut-rand);  color: var(--stat-gut-text); }
.stat-ruht       { background: var(--stat-ruht-bg); border-color: var(--stat-ruht-rand); color: var(--stat-ruht-text); }
.stat-erfasst    { background: rgba(255,255,255,0.05); border-color: var(--c-border); color: var(--c-text); }
.stat-leer       { color: #545b67; padding-left: 0; padding-right: 0; }
/* Pflichtangabe fehlt. Rot wie „abgelaufen", weil es dasselbe bedeutet —
   hier muss jemand tätig werden. Das Sternchen unterscheidet es davon,
   ohne eine neue Farbe zu erfinden. */
.stat-fehlt      { background: var(--stat-ab-bg); border-color: var(--stat-ab-rand);
                   color: var(--stat-ab-text); font-weight: 600; }
.stat-flach.stat-fehlt { color: var(--stat-ab-text); }

/* In der Gesamtliste zählt jede Zeile Platz — dort ohne Kapsel. */
.stat-flach { border: 0; background: none; padding: 0; border-radius: 0; }
.stat-flach.stat-abgelaufen { color: var(--stat-ab-text); }
.stat-flach.stat-laeuft_ab  { color: var(--stat-bald-text); }
.stat-flach.stat-nachfrist  { color: var(--stat-nach-text); }
.stat-flach.stat-gueltig    { color: var(--c-text); font-weight: 400; }

/* Zusammenfassung über der Startseite: die Zahl zuerst, dann das Wort. */
.lage { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; margin-bottom: 1rem; }
.lage-feld {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-border-strong);
  border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
a.lage-feld:hover { transform: translateY(-1px); border-color: var(--c-border-strong); color: inherit; }
.lage-zahl { font-size: 1.7rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.lage-wort { font-size: 0.78rem; color: var(--c-muted); line-height: 1.25; }
.lage-feld.ist-ab   { border-left-color: var(--c-danger); }
.lage-feld.ist-ab   .lage-zahl { color: var(--stat-ab-text); }
.lage-feld.ist-nachfrist { border-left-color: #ff8c42; }
.lage-feld.ist-nachfrist .lage-zahl { color: var(--stat-nach-text); }
.lage-feld.ist-bald { border-left-color: var(--c-warning); }
.lage-feld.ist-bald .lage-zahl { color: var(--stat-bald-text); }
.lage-feld.ist-gut  { border-left-color: var(--c-success); }
.lage-feld.ist-ruhe .lage-zahl { color: var(--c-muted); }

/* Zähler am Kachelkopf — getrennt nach „verstrichen" und „rückt heran". */
.zaehler {
  display: inline-block; min-width: 1.5rem; padding: 0.1rem 0.4rem;
  border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums;
}
.zaehler-ab   { background: var(--stat-ab-bg);   color: var(--stat-ab-text);   border: 1px solid var(--stat-ab-rand); }
.zaehler-bald { background: var(--stat-bald-bg); color: var(--stat-bald-text); border: 1px solid var(--stat-bald-rand); }
.zaehler-nachfrist { background: var(--stat-nach-bg); color: var(--stat-nach-text); border: 1px solid var(--stat-nach-rand); }
/* Eine Zahl ohne Befund — etwa ausgeschaltete Pflichten: nichts zu tun, nur zu wissen. */
.zaehler-ruhig { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border); }

/* Ein Kartenkopf, der etwas öffnet (Karte „Mitarbeiter mit ausgeschalteter Pflicht"). */
.karte-knopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .25rem 1rem; width: 100%; border: 0; border-radius: inherit;
  color: inherit; text-align: left; font: inherit; cursor: pointer;
}
.karte-knopf:hover { filter: brightness(1.15); }
.pflicht-aus-begruendung { min-width: 14rem; overflow-wrap: anywhere; }
/* Zähler im Kachelkopf der Startseite als Schalter (kachelfilter.js): aus =
   blass und durchgestrichen, damit der Unterschied auch ohne Farbe auffällt. */
.zaehler-schalter { font-family: inherit; line-height: inherit; cursor: pointer; }
.zaehler-schalter:hover { filter: brightness(1.2); }
.zaehler-schalter[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }

/* Kachel ohne Aufgaben: flach und leise, damit die mit Aufgaben auffallen. */
.kachel-ruhig {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1rem; font-size: 0.85rem; color: var(--c-muted);
}
.kachel-ruhig .bi { color: var(--c-success); opacity: 0.8; }

/* Datentabellen: ruhiger Wechsel, deutliche Zeile unter dem Zeiger,
   und ein farbiger Streifen links, wo etwas offen ist. */
.datentabelle tbody tr { transition: background-color 0.12s ease; }
.datentabelle tbody tr:nth-child(even) > td { background: rgba(255,255,255,0.014); }
.datentabelle tbody tr:hover > td { background: rgba(255,255,255,0.045); }
.datentabelle td, .datentabelle th { padding-top: 0.45rem; padding-bottom: 0.45rem; }

.frist-zeile > td:first-child { border-left: 3px solid transparent; }
/* Startseite: je Person eine Zeile, darin ihre offenen Punkte untereinander. */
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }

/* Filter als Knopfgruppe (Fristen, Anfragen): Passt die Reihe nicht, brechen
   die Knöpfe als Ganzes um — nie mitten im Wort, und keiner ragt hinaus. */
.filtergruppe { flex-wrap: wrap; }
.filtergruppe > .btn { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 767.98px) {
  /* Umbrochen sähen die halb verbundenen Kanten zerrissen aus — dann lieber
     einzelne Knöpfe mit Abstand. !important gegen Bootstraps btn-group-Regeln. */
  .filtergruppe { gap: 0.3rem; }
  .filtergruppe > .btn { border-radius: var(--bs-btn-border-radius) !important; margin-left: 0 !important; }
}
.kachel-tabelle .kopf-frist { width: 15rem; }
/* Jede Kategoriekachel ist gleich hoch: Kopf, die eingestellten Zeilen
   (Benutzer.kachel_zeilen, eine Zeile = ein Eintrag mit Fristmarke), der
   Tabellenkopf und die Fußzeile „Alle ansehen" — auch wenn sie weniger
   enthält. Was nicht hineinpasst, blendet kachelfilter.js ganzzeilig aus;
   `overflow: hidden` fängt nur den Augenblick davor ab. Auf dem Handy
   nicht, dort stehen die Kacheln untereinander und zählen nur Zeilen. */
.kachel-inhalt { display: flex; flex-direction: column; }
.kachel-inhalt > [data-alle] { margin-top: auto; }
.kachel-inhalt > .kachel-ruhig { flex: 0 0 auto; }   /* oben, wie die Einträge — nicht mitten in der leeren Kachel */
/* Breite Kachel (ganze Seite): Die Tabelle hat nur drei Spalten — dann
   laufen die Personen in zwei Spalten nebeneinander, erst links von oben
   nach unten, dann rechts (Wunsch 18.09.2026). Textspalten statt Raster:
   Jede Spalte füllt sich für sich, eine Person mit drei Punkten macht die
   Zeile daneben nicht mit hoch. Die Höhe setzt kachelfilter.js
   (--kachel-spaltenhoehe); ohne sie verteilt der Browser gleichmäßig. Das
   Fenster „Alle" liegt nicht in .kachel-inhalt und bleibt einspaltig. */
.kachel-inhalt { container-type: inline-size; }
@container (min-width: 56rem) {
  .kachel-tabelle { display: block; }
  .kachel-tabelle thead { display: none; }
  .kachel-tabelle tbody {
    display: block; column-count: 2; column-gap: 1.5rem; column-fill: auto;
    height: var(--kachel-spaltenhoehe, auto);
  }
  .kachel-tabelle tbody > tr {
    display: grid; grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr); break-inside: avoid;
  }
  .kachel-tabelle tbody > tr > td { display: block; }
}
/* Mittlere Breite: Neben dem Namen bräche jeder Eintrag auf zwei Zeilen um —
   dann steht der Name darüber, wie auf dem Handy. */
@container (min-width: 56rem) and (max-width: 89.99rem) {
  .kachel-tabelle tbody > tr { grid-template-columns: minmax(0, 1fr); }
  .kachel-tabelle tbody > tr > td:first-child { border-bottom: 0; padding-bottom: 0.1rem; }
  .kachel-tabelle tbody > tr > td + td { padding-top: 0.1rem; }
  .kachel-tabelle .frist-zeile > td { border-left: 3px solid transparent; }
  .kachel-tabelle .frist-zeile.ist-abgelaufen > td { border-left-color: var(--c-danger); }
  .kachel-tabelle .frist-zeile.ist-nachfrist > td  { border-left-color: #ff8c42; }
  .kachel-tabelle .frist-zeile.ist-laeuft_ab > td  { border-left-color: var(--c-warning); }
}
@media (min-width: 576px) {
  .kat[data-kachelfilter] {
    display: flex; flex-direction: column;
    height: calc(3.1rem + var(--kachel-zeilen, 10) * 2.15rem + 1.6rem + 2.3rem);
  }
  .kat[data-kachelfilter] > .kachel-inhalt { flex: 1 1 auto; min-height: 0; overflow: hidden; }
  .kacheln-anpassen .kat[data-kachelfilter] { height: auto; }
}
/* Handy: Name über seinen Punkten statt daneben. Nebeneinander trug die
   schmale Spalte die Fristmarke nicht, und die Tabelle scrollte seitwärts. */
@media (max-width: 575.98px) {
  .kachel-tabelle thead { display: none; }
  .kachel-tabelle tr, .kachel-tabelle td { display: block; width: 100%; }
  .kachel-tabelle td:first-child { border-bottom: 0; padding-bottom: 0.1rem; }
  .kachel-tabelle td + td { padding-top: 0.1rem; }
  .kachel-tabelle .frist-zeile > td { border-left: 3px solid transparent; }
  .kachel-tabelle .frist-zeile.ist-abgelaufen > td { border-left-color: var(--c-danger); }
  .kachel-tabelle .frist-zeile.ist-nachfrist > td  { border-left-color: #ff8c42; }
  .kachel-tabelle .frist-zeile.ist-laeuft_ab > td  { border-left-color: var(--c-warning); }
}
.punkte li { display: flex; justify-content: space-between; align-items: baseline;
             gap: 0.75rem; flex-wrap: wrap; }
/* Die ganze Kachelzeile trägt nach: Ein Klick irgendwo darin öffnet dieselbe
   Maske wie der Name (`kachelfilter.js`). Eigene Ziele in der Zeile — der Name,
   die Kennnummer — behalten ihren Weg. */
tr.frist-zeile.ist-eintragbar { cursor: pointer; }
tr.frist-zeile.ist-eintragbar:hover > td { background: var(--c-surface-2); }

.frist-zeile.ist-abgelaufen > td:first-child { border-left-color: var(--c-danger); }
.frist-zeile.ist-nachfrist  > td:first-child { border-left-color: #ff8c42; }
.frist-zeile.ist-laeuft_ab  > td:first-child { border-left-color: var(--c-warning); }

/* Kacheln wachsen mit ihrem Inhalt statt auf die Höhe der Nachbarin.
   Sonst bläht eine Kachel ohne Aufgaben sich auf die Höhe der vollen daneben
   auf — und der halbe Bildschirm sagt „nichts zu tun". */
#kachel-raster > .kachel-halter { align-self: flex-start; }

/* Detailseite: erfasste Angaben als dichte Liste, Fehlendes als leise Zeile.
   Vorher bekam jede leere Qualifikation eine gleich große Karte — bei
   neunundneunzig Qualifikationen war die Seite dadurch endlos und die paar
   erfassten Werte gingen darin unter. */
.wert-raster {
  display: grid;
  /* Breit genug, dass „22.06.2026 seit 81 Tagen fällig" neben den Namen passt. */
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  gap: 0.1rem 1.75rem;
}
.wert-zeile {
  /* umbruchfähig: Passt die Statuskapsel nicht mehr neben den Namen, rutscht
     sie in die nächste Zeile, statt in die Nachbarspalte zu ragen. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.6rem;
  padding: 0.3rem 0.1rem 0.3rem 0.55rem;
  border-left: 3px solid transparent;
  border-bottom: 1px solid rgba(255,255,255,0.035);
}
.wert-zeile .stat { flex: 0 0 auto; max-width: 100%; }
.wert-zeile:hover { background: rgba(255,255,255,0.03); }
.wert-name { font-size: 0.88rem; color: var(--c-text); flex: 0 1 auto; }
/* Führungslinie: verbindet den Namen mit seinem Wert, wenn die Spalte breit
   ist — sonst sucht das Auge über den leeren Raum hinweg die Zuordnung. */
.wert-linie { flex: 1 1 auto; min-width: 0.75rem; border-bottom: 1px dotted rgba(255,255,255,0.10); }
.wert-zeile.ist-abgelaufen { border-left-color: var(--c-danger); }
.wert-zeile.ist-fehlt      { border-left-color: var(--c-danger); }
.wert-zeile.ist-nachfrist  { border-left-color: #ff8c42; }
.wert-zeile.ist-laeuft_ab  { border-left-color: var(--c-warning); }
.wert-zeile.ist-ruht       { border-left-color: rgba(78,161,255,0.4); }

/* Fehlendes ist nachschlagbar, drängt sich aber nicht auf: Bei jemandem mit
   wenigen Einträgen war die graue Liste der Fehlstellen vorher länger als
   alles Erfasste zusammen. */
.wert-fehlend { padding-block: 0.4rem; }
.wert-fehlend > summary {
  cursor: pointer; list-style: none;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280;
}
.wert-fehlend > summary::-webkit-details-marker { display: none; }
.wert-fehlend > summary::before {
  content: "\F285";               /* bi-chevron-right */
  font-family: bootstrap-icons; font-size: 0.7rem;
  margin-right: 0.35rem; display: inline-block;
  transition: transform 0.15s ease;
}
.wert-fehlend[open] > summary::before { transform: rotate(90deg); }
.wert-fehlend > summary:hover { color: var(--c-text); }
.wert-fehlend-namen { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-top: 0.45rem; }
.wert-fehlend-marke {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #6b7280; margin-right: 0.3rem;
}
.wert-fehlend-name { font-size: 0.78rem; color: #6b7280; }
.wert-fehlend-name:not(:last-child)::after { content: " ·"; color: #4b5260; }

/* Gesamtliste: die Statusfarbe bekommt einen Grund, damit sie beim
   seitlichen Überfliegen auffällt — farbiger Text allein geht in einer
   Tabelle mit hundert Zeilen unter. */
.matrix-zelle.zelle-abgelaufen { background: var(--stat-ab-bg)   !important; }
.matrix-zelle.zelle-nachfrist  { background: var(--stat-nach-bg) !important; }
.matrix-zelle.zelle-laeuft_ab  { background: var(--stat-bald-bg) !important; }
.matrix-tabelle .stat-flach { font-size: 0.78rem; }

/* Eingabemaske: Zeilen mit Inhalt heben sich ab, offene Fristen tragen ihre
   Farbe auch hier — sonst muss man beim Pflegen zwischen Liste und Maske
   hin- und herspringen, um zu sehen, was dringend ist. */
.qualifikation-zeile { border-left: 3px solid transparent; }
.qualifikation-zeile.ist-abgelaufen { border-left-color: var(--c-danger); background: rgba(255,90,106,0.05); }
.qualifikation-zeile.ist-nachfrist  { border-left-color: #ff8c42; background: rgba(255,140,66,0.05); }
.qualifikation-zeile.ist-laeuft_ab  { border-left-color: var(--c-warning); background: rgba(240,180,41,0.05); }
.qualifikation-zeile.ist-gueltig    { border-left-color: rgba(52,199,119,0.45); }
.qualifikation-zeile.ist-erfasst,
.qualifikation-zeile.ist-ruht       { border-left-color: var(--c-border-strong); }
.qualifikation-zeile.ist-leer .qualifikation-name { color: var(--c-muted); }

/* flatpickr trägt ein helles Standardkleid — hier auf den dunklen Grund gebracht. */
.flatpickr-calendar {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  box-shadow: var(--shadow-2);
  color: var(--c-text);
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after { border-bottom-color: var(--c-surface-2); }
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { border-top-color: var(--c-surface-2); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays, span.flatpickr-weekday {
  background: var(--c-surface-2);
  color: var(--c-muted);
  fill: var(--c-muted);
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { fill: var(--c-muted); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--c-primary); }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months { color: var(--c-text); }
.flatpickr-day {
  color: var(--c-text);
  border-radius: 7px;
}
.flatpickr-day:hover { background: var(--c-border); border-color: var(--c-border); }
.flatpickr-day.today { border-color: var(--c-primary); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: #5b616c; }
.flatpickr-day.flatpickr-disabled:hover { background: none; }
.flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-days, .dayContainer { background: var(--c-surface-2); }
.numInputWrapper span.arrowUp, .numInputWrapper span.arrowDown { border-color: var(--c-border); }
.numInputWrapper:hover { background: var(--c-border); }
/* „Heute" unter dem Kalender (datum.js, heuteKnopf). */
.datum-fuss {
  display: flex; justify-content: center;
  padding: 0.3rem; border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.datum-heute {
  background: none; border: 0; border-radius: 7px;
  padding: 0.25rem 1rem;
  color: var(--c-primary); font-size: 0.85rem; font-weight: 600;
  cursor: pointer;
}
.datum-heute:hover, .datum-heute:focus-visible { background: rgba(255,77,46,0.12); outline: none; }

/* Monatsauswahl (flatpickr monthSelect, Felder „nur als Monat") — gekleidet wie die Tage. */
.flatpickr-monthSelect-months { background: var(--c-surface-2); }
.flatpickr-monthSelect-month { color: var(--c-text); border-radius: 7px; }
.flatpickr-monthSelect-month:hover,
.flatpickr-monthSelect-month:focus { background: var(--c-border); border-color: var(--c-border); }
.flatpickr-monthSelect-month.today { border-color: var(--c-primary); }
.flatpickr-monthSelect-month.today:hover,
.flatpickr-monthSelect-month.today:focus { background: rgba(255,77,46,0.12); border-color: var(--c-primary); color: var(--c-text); }
.flatpickr-monthSelect-month.selected,
.flatpickr-monthSelect-month.selected:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }

/* ============================================================
   Mitarbeiterübersicht
   ============================================================ */

/* Filterleiste statt Suchkarte: eine Zeile, alles sofort erreichbar. */
.filterleiste {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.suchfeld { position: relative; flex: 1 1 260px; max-width: 26rem; }
.suchfeld .bi {
  position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%);
  color: var(--c-muted); font-size: 0.85rem; pointer-events: none;
}
.suchfeld .form-control { padding-left: 2.1rem; }

.filtermarke {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--c-border); border-radius: 999px;
  background: var(--c-surface);
  color: var(--c-muted); font-size: 0.8rem; text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filtermarke:hover { color: var(--c-text); border-color: var(--c-border-strong); }
button.filtermarke { cursor: pointer; }

/* PDF-Dialog der Gesamtliste: drei kurze Fragen, luftig untereinander. */
.pdf-dialog fieldset + fieldset { margin-top: 0.9rem; }
.pdf-dialog legend { float: none; width: auto; margin-bottom: 0.3rem; }
.pdf-dialog .form-check-label { font-size: 0.88rem; }
.filtermarke.ist-an {
  background: rgba(255, 77, 46, 0.12);
  border-color: rgba(255, 77, 46, 0.45);
  color: var(--c-primary-2);
}
.filtermarke-zahl {
  background: rgba(255,255,255,0.08); border-radius: 999px;
  padding: 0 0.4rem; font-variant-numeric: tabular-nums; font-size: 0.75rem;
}
.filter-zuruecksetzen {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.78rem; color: var(--c-muted); text-decoration: none;
}
.filter-zuruecksetzen:hover { color: var(--c-text); }

/* Sortierbare Spaltenköpfe — der ruhende Pfeil zeigt, dass es geht. */
.sortkopf {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: inherit; text-decoration: none;
}
.sortkopf:hover { color: var(--c-text); }
.sortkopf .bi { font-size: 0.8em; }
.sortkopf-ruhend { opacity: 0; transition: opacity 0.15s ease; }
.sortkopf:hover .sortkopf-ruhend { opacity: 0.45; }
.sortkopf.ist-aktiv { color: var(--c-text); }

/* Namenszelle mit Initiale: hilft beim Springen in einer langen Liste. */
.personen-zelle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: inherit; text-decoration: none;
}
.personen-zelle:hover .personen-name { color: var(--c-primary-2); }
/* In der Liste bewusst farblos: Rot heißt hier „abgelaufen". Eine Reihe
   roter Initialen würde mit der Statusfarbe konkurrieren, ohne etwas zu
   sagen, was nicht schon danebensteht. */
.personen-zelle .avatar {
  width: 28px; height: 28px; font-size: 0.76rem; flex: none;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-strong);
  color: var(--c-muted); font-weight: 600;
}
.personen-zelle:hover .avatar { border-color: var(--c-primary); color: var(--c-text); }
.personen-name { font-weight: 500; }

/* Die Restzeit ist die Aussage, der Name nur der Beleg — deshalb kürzt der
   Name, wenn es eng wird, und die Restzeit bleibt vollständig stehen. */
/* Alle offenen Fristen einer Person untereinander, unter den Zählern. */
.frist-liste { list-style: none; margin: 0.2rem 0 0; padding: 0; }
.frist-eintrag {
  display: flex; align-items: baseline; gap: 0.3rem;
  /* Keine feste Höchstbreite: Die Fristenspalte ist die dehnbare, dort ist
     Platz. Gekürzt wird erst, wenn er wirklich nicht reicht. */
  max-width: 100%;
  font-size: 0.76rem; line-height: 1.35; color: var(--c-muted);
}
.frist-eintrag .frist-was {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.frist-eintrag .frist-wann { flex: none; white-space: nowrap; }
.frist-eintrag.ist-abgelaufen .frist-wann { color: var(--stat-ab-text); }
.frist-eintrag.ist-nachfrist  .frist-wann { color: var(--stat-nach-text); }
.frist-eintrag.ist-laeuft_ab  .frist-wann { color: var(--stat-bald-text); }
.alles-gut { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.78rem; color: #5f6670; }
.alles-gut .bi { color: var(--c-success); }

.personentabelle tbody tr.ist-ausgeschieden .personen-name,
.personentabelle tbody tr.ist-ausgeschieden td { color: var(--c-muted); }
.personentabelle tbody tr.ist-ausgeschieden .avatar { filter: grayscale(1); opacity: 0.6; }

/* Name und Personalnummer nehmen ihre Inhaltsbreite; was übrig bleibt, geht
   an die Fristenspalte — dort steht der lange Text, der sonst abbricht. */
/* `width: 1px` heißt in einer Tabelle nicht „ein Pixel breit", sondern
   „so schmal wie der Inhalt erlaubt" — zusammen mit nowrap ergibt das eine
   Spalte in Inhaltsbreite. max-width wirkt auf Tabellenzellen nicht.

   Das allein reicht aber nicht: Bei `table-layout: auto` verteilt der
   Browser den übrigen Platz auf alle Spalten, auch auf die schmalen. Erst
   eine Spalte mit `width: 100%` schluckt den Rest — das ist `.dehnspalte`.
   Ohne die wird eine „schmale" Spalte am Ende breiter als vorher. */
.schmalspalte { width: 1px; white-space: nowrap; }
.dehnspalte { width: 100%; }
/* Marken, die umbrechen dürfen — mit etwas Luft auch zwischen den Zeilen. */
.spalte-marken { min-width: 9rem; line-height: 1.9; }
.personentabelle .spalte-person,
.personentabelle .spalte-eng { width: 1px; white-space: nowrap; }
.personentabelle .spalte-person { padding-right: 1.5rem; }
.personentabelle .spalte-eng { padding-right: 1.2rem; }

/* Detailseite: zwei Spalten und ein Band für das Offene ------------------- */

/* Karten in zwei Spalten, damit die Seite nicht endlos nach unten läuft.
   Mehrspaltiger Textfluss statt Raster: Die Karten sind verschieden hoch,
   und so entstehen keine Lücken. */
.kategorie-spalten { columns: 2; column-gap: 1rem; }
.kategorie-spalten > .card {
  /* break-inside hält die Karte zusammen. `display: inline-block` täte das
     auch, verhindert aber das Ausbalancieren: Bei zwei Karten landeten dann
     beide links und die rechte Hälfte blieb leer. */
  break-inside: avoid;
  margin-bottom: 1rem;
  width: 100%;
}
@media (max-width: 1100px) { .kategorie-spalten { columns: 1; } }

/* Was offen ist, steht ganz oben — vorher musste man bis zur zwölften Karte
   scrollen, um zu sehen, dass zwei Führerscheine abgelaufen sind. */
.offen-band {
  border: 1px solid var(--stat-ab-rand);
  border-left: 3px solid var(--c-danger);
  background: linear-gradient(90deg, rgba(255,90,106,0.10), rgba(255,90,106,0.02));
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1rem;
}
/* Steht nichts Abgelaufenes darin, ist das Band eine Vormerkung und keine
   Meldung — dann trägt es die Farbe der Vormerkung. */
.offen-band.ist-bald {
  border-color: var(--stat-bald-rand);
  border-left-color: var(--c-warning);
  background: linear-gradient(90deg, rgba(240,180,41,0.10), rgba(240,180,41,0.02));
}
/* Nichts erloschen, aber etwas überfällig: dringlicher als eine Vormerkung,
   und doch steht niemand deswegen still. */
.offen-band.ist-nachfrist {
  border-color: var(--stat-nach-rand);
  border-left-color: #ff8c42;
  background: linear-gradient(90deg, rgba(255,140,66,0.10), rgba(255,140,66,0.02));
}
.offen-kopf {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem;
  color: var(--stat-ab-text); font-weight: 600; font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.offen-band.ist-bald .offen-kopf { color: var(--stat-bald-text); }
.offen-band.ist-nachfrist .offen-kopf { color: var(--stat-nach-text); }
.offen-auch { font-weight: 400; color: var(--stat-bald-text); }
.offen-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.offen-liste li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.offen-liste a { color: var(--c-text); text-decoration: none; font-size: 0.88rem; }
.offen-liste a:hover { color: var(--c-primary-2); text-decoration: underline; }

/* Kategorien ganz ohne Eintrag: eine Zeile am Fuß statt je einer leeren Karte. */
.ohne-inhalt .card-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; padding-block: 0.7rem; }
.leere-kategorie { font-size: 0.8rem; color: #6b7280; text-decoration: none; }
a.leere-kategorie:hover { color: var(--c-text); text-decoration: underline; }
.leere-kategorie:not(:last-child)::after { content: " ·"; color: #4b5260; }

/* ============================================================
   Kategoriefarben
   ============================================================
   Eine Orientierungshilfe, kein Zustand: Sie sagt „das ist die Kategorie
   Führerscheine", nicht „hier stimmt etwas nicht". Deshalb sehr zurückhaltend
   — eine Tönung im Kartenkopf, ein Streifen an der Kante. Die Farbe ist frei
   wählbar (Farbrad) und kommt als --kat im Inline-Style des Elements; die
   Vorschläge stehen in Kategorie.FARBVORSCHLAEGE, zu helle Farben lehnt das
   Formular ab (Kategorie.kopf_kontrast).
*/
.kat { --kat: var(--c-border-strong); border-left: 3px solid var(--kat); }
/* Karten kräftig getönt (Wunsch 18.09.2026, erst Startseite, dann überall) —
   sie sollen sich auf einen Blick unterscheiden. Kopf durchgehend getönt,
   breiter Streifen, Rahmen in der Farbe; der Titel bleibt bei jeder Farbe
   mindestens 4,5:1 — das prüft das Formular (Kategorie.kopf_kontrast). */
.card.kat {
  border-color: color-mix(in srgb, var(--kat) 45%, var(--c-border));
  border-left: 5px solid var(--kat);
}
.card.kat > .card-header {
  background: linear-gradient(90deg,
              color-mix(in srgb, var(--kat) 42%, var(--c-surface)),
              color-mix(in srgb, var(--kat) 18%, var(--c-surface)));
  border-bottom-color: color-mix(in srgb, var(--kat) 40%, var(--c-border));
}
.kat > .card-header > span:first-child { color: var(--c-text); }
.kachel-titel { color: inherit; text-decoration: none; }
.kachel-titel:hover, .kachel-titel:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* Bilder an Anfragen: Hinweis zum Einfügen und Vorschau (static/js/bilder.js). */
.bilder-ablage { margin-top: 0.4rem; }
.bilder-ablage-hinweis { font-size: 0.8rem; color: var(--c-muted); }
.bilder-ablage-hinweis kbd {
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  border-radius: 4px; padding: 0 0.3rem; font-size: 0.9em; color: var(--c-text);
}
.bilder-vorschau { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bilder-vorschau:not(:empty) { margin-top: 0.5rem; }
.bilder-kachel {
  position: relative; margin: 0; padding: 0.25rem;
  border: 1px solid var(--c-input-border); border-radius: 8px; background: var(--c-input-bg);
}
.bilder-kachel img { display: block; height: 6rem; max-width: 12rem; object-fit: contain; border-radius: 4px; }
.bilder-kachel figcaption { font-size: 0.7rem; color: var(--c-muted); text-align: center; margin-top: 0.15rem; }
.bilder-weg {
  position: absolute; top: 0.3rem; right: 0.3rem; padding: 0.35rem;
  background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; opacity: 1;
}
.bilder-meldung:not(:empty) { margin-top: 0.35rem; }

/* Hauptverantwortliche im Kachelkopf — in der Farbe der Kategorie, als Knopf,
   weil sie das Fenster mit allen Kategorien öffnet. */
.verantwortlich-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; line-height: 1.4; color: var(--c-text);
  background: color-mix(in srgb, var(--kat, var(--c-border-strong)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--kat, var(--c-border-strong)) 55%, transparent);
  max-width: 16rem; white-space: nowrap; cursor: pointer;
}
.verantwortlich-pill .person { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Rechts im Kachelkopf: Marke und Knopf. Wird es eng, kürzt die Marke den
   Namen — der Knopf bricht nie um. */
.kachel-kopf-rechts {
  display: flex; align-items: center; gap: 0.5rem; margin-left: auto;
  min-width: 0; max-width: 100%;
}
.kachel-kopf-rechts .verantwortlich-pill { flex: 0 1 auto; min-width: 0; }
.verantwortlich-pill:hover,
.verantwortlich-pill:focus-visible {
  background: color-mix(in srgb, var(--kat, var(--c-border-strong)) 30%, transparent);
}
.verantwortlich-pill .bi { color: var(--kat, var(--c-muted)); }
.verantwortlich-pill.ist-inaktiv { opacity: 0.75; border-style: dashed; }
.verantwortlich-inaktiv { font-size: 0.7rem; color: var(--c-muted); }
/* Welche Wachabteilung — nur in der Gesamtsicht, wo je Kategorie zwei Personen stehen. */
.verantwortlich-wa { font-size: 0.7rem; font-weight: 600; color: var(--c-muted); letter-spacing: 0.02em; }
/* Stellvertretungen unter der Hauptperson — eingerückt und leiser, damit die
   Hauptperson die erste Zeile bleibt. */
.verantwortlich-stv { font-size: 0.85em; color: var(--c-muted); margin-top: 0.1rem; }
.verantwortlich-stv .person { color: var(--c-text); }
.verantwortlich-stv-marke { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; cursor: help; margin-right: 0.15rem; }
/* Im Fenster sagt das am Bildschirm die Kopfzeile; auf dem Handy fehlt sie. */
.verantwortliche-tabelle .verantwortlich-wa { display: none; }
.verantwortliche-tabelle td, .verantwortliche-tabelle th { padding-left: 1rem; padding-right: 1rem; }
.verantwortliche-tabelle .kat-name-zelle { display: inline-flex; align-items: baseline; }
.verantwortliche-tabelle .kat-name-zelle .farbtupfer { flex: none; }
.verantwortliche-tabelle td:first-child { width: 40%; }
.verantwortliche-tabelle .person-zelle { overflow-wrap: anywhere; }
/* Handy: Kategorie und Person untereinander — nebeneinander reichte die
   Breite für zwei lange Wörter nicht, und die Person war abgeschnitten. */
@media (max-width: 575.98px) {
  .verantwortliche-tabelle thead { display: none; }
  .verantwortliche-tabelle tr, .verantwortliche-tabelle td { display: block; width: auto; }
  .verantwortliche-tabelle td:first-child { width: auto; }
  .verantwortliche-tabelle td:not(:last-child) { border-bottom: 0; padding-bottom: 0; }
  .verantwortliche-tabelle td + td { padding-top: 0.1rem; padding-left: calc(1rem + 1.1rem); }
  .verantwortliche-tabelle .verantwortlich-wa { display: inline-block; min-width: 2.6rem; }
}
@media (min-width: 576px) { .verantwortliche-dialog { max-width: 720px; } }

/* Farbtupfer in der Konfigurationsliste, damit man die Zuordnung sieht. */
.farbtupfer {
  display: inline-block; width: 0.65rem; height: 0.65rem;
  border-radius: 50%; margin-right: 0.45rem; vertical-align: baseline;
  background: var(--kat); border: 1px solid rgba(255,255,255,0.15);
}

/* Ältere Browser ohne color-mix bekommen wenigstens den Streifen. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .kat > .card-header { background: var(--c-surface-2); }
}

/* Kopf der Mitarbeiterseite ---------------------------------------------- */
.personenkopf {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
}
.personenkopf-wer { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.personenkopf .page-title { font-size: 1.3rem; }

/* Die Angaben als Marken statt als eine Zeile mit Mittelpunkten. */
.personenkopf-daten { display: flex; flex-wrap: wrap; gap: 0.3rem 0.45rem; }
.personenkopf-daten > span {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.5rem;
  background: var(--c-surface-2); border: 1px solid var(--c-border);
  border-radius: 999px;
  font-size: 0.76rem; color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
.personenkopf-daten .bi { font-size: 0.8em; opacity: 0.7; }

.personenkopf-tun { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.zurueck-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.82rem; color: var(--c-muted); text-decoration: none;
  padding-right: 0.35rem;
}
.zurueck-link:hover { color: var(--c-text); }

/* Löschen steht abseits: eigener Abstand, gedämpft, erst im Überfahren rot. */
.loeschen-abseits {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; margin-left: 0.6rem;
  border-radius: 8px; color: #5f6670; text-decoration: none;
  border: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.loeschen-abseits::before {
  content: ""; width: 1px; height: 1.4rem;
  background: var(--c-border); margin-right: 0.75rem; margin-left: -0.6rem;
}
.loeschen-abseits:hover {
  color: var(--c-danger); border-color: rgba(255,90,106,0.4);
  background: rgba(255,90,106,0.08);
}

/* Gesamtliste: der Name öffnet die Kategorie zum Bearbeiten, die Nummer
   führt weiterhin zur Übersicht der Person. */
.matrix-nummer {
  margin-left: 0.4rem; font-size: 0.78rem;
  color: var(--c-muted); text-decoration: none;
}
.matrix-nummer:hover { color: var(--c-text); text-decoration: underline; }

/* Pflichtangaben ---------------------------------------------------------- */
.pflicht-marke { color: var(--c-primary-2); margin-left: 0.15rem; font-weight: 700; }
.pflicht-hinweis { color: var(--stat-bald-text) !important; }
.qualifikation-zeile.pflicht-fehlt {
  border-left-color: var(--c-warning);
  background: rgba(240, 180, 41, 0.06);
}
.zaehler-pflicht {
  background: var(--stat-bald-bg); color: var(--stat-bald-text);
  border: 1px dashed var(--stat-bald-rand);
}

/* Gesamtliste mit vielen Spalten: Überschriften quer ---------------------- */
/* Bei zehn Einträgen bestimmte der längste Name („Atemschutzübung auf der
   Wache") die Spaltenbreite — 234 px für ein Datum von 95 px. Quer gestellt
   richtet sich die Breite nach dem Inhalt, und die Tabelle passt wieder. */
.matrix-quer thead th.matrix-zelle {
  vertical-align: bottom;
  padding: 0.4rem 0.25rem 0.55rem;
  text-align: center;
}
.matrix-quer thead th.matrix-zelle .spaltenkopf {
  writing-mode: vertical-rl;
  transform: rotate(180deg);      /* von unten nach oben lesbar */
  display: inline-block;
  /* Abgeschnitten wird mit Auslassungspunkten statt mitten im Wort; der
     vollständige Name steht im Titel der Zelle. */
  max-height: 12.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  font-size: 0.7rem;
  line-height: 1.1;
}

/* Welches Datum die Spalte zeigt („gültig bis") — klein unter dem Namen, im gedrehten Kopf
   daneben (eigene Zeile = im senkrechten Satz eine eigene Spalte). */
.spalten-datum {
  display: block;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--c-muted);
}
.matrix-quer thead th.matrix-zelle .spalten-datum { font-size: 0.6rem; }

/* Häkchenspalten zählen im Kopf, wie viele das Häkchen haben — unter dem Namen, auch im
   gedrehten Kopf aufrecht (steht außerhalb von `.spaltenkopf`). */
/* Häkchenzähler: eine kleine Tabelle — je WA eine Zeile, Kürzel leise, dann vorhanden als helle
   und eingesetzt als grüne Marke. Die Zeilen sind `display: contents`, damit die Zahlen beider
   WA in einem Raster bündig untereinander stehen. Steht außerhalb von `.spaltenkopf`, also auch im
   gedrehten Kopf aufrecht. */
.spalten-zaehler,
.zaehler-legende {
  display: grid;
  grid-template-columns: minmax(1.55em, auto);
  justify-content: center;
  gap: 2px 3px;
  margin-top: 0.4rem;
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
/* Beim Überfahren des Kopfs: beide Zahlen je WA in einem kleinen Fenster darunter. Der Kopf ist
   `position: sticky` und damit Bezug für `absolute`; die Breite der Spalte bleibt unberührt. */
.zaehler-voll {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;                       /* nach rechts öffnen — links liegen Namens- und WA-Spalte darüber */
  z-index: 6;
  width: max-content;            /* sonst schrumpft es auf die schmale Spalte */
  min-width: 16rem;
  max-width: 22rem;
  padding: 0.6rem 0.75rem 0.55rem;
  border: 1px solid var(--c-border-strong);
  border-top: 2px solid var(--kat, var(--c-border-strong));
  border-radius: 8px;
  background: var(--c-surface-2);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
.matrix-tabelle thead th:hover .zaehler-voll { display: block; }
.zaehler-titel { display: block; font-size: 0.82rem; font-weight: 600; color: var(--c-text); line-height: 1.25; }
.zaehler-unter { display: block; margin-top: 1px; font-size: 0.68rem; font-weight: 400; color: var(--c-muted); line-height: 1.3; }
.zaehler-raster {
  display: grid;
  grid-template-columns: auto minmax(4rem, 1fr) auto auto auto;
  align-items: center;
  gap: 0.3rem 0.6rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}
.zaehler-kopf { font-size: 0.62rem; font-weight: 400; letter-spacing: 0.02em; color: var(--c-muted); text-align: right; }
.zaehler-kopf.ist-eingesetzt { color: color-mix(in srgb, var(--c-success) 70%, white); }
.zaehler-raster .zaehler-wa { font-size: 0.72rem; color: var(--c-muted); }
.zaehler-raster .zahl-eingesetzt, .zaehler-raster .zahl-ruht, .zaehler-raster .zahl-gaeste { min-width: 2.1em; text-align: right; font-size: 0.8rem; }
.zaehler-raster .zahl-eingesetzt { color: color-mix(in srgb, var(--c-success) 70%, white); font-weight: 600;
                                    background: none; padding: 0; }
.zaehler-raster .zahl-ruht { color: var(--c-text); }
.zaehler-raster .zahl-gaeste { color: var(--c-muted); }
/* Minibalken: grün eingesetzt, grau ohne Einsatz — Maßstab ist die größere Zahl „vorhanden“ der beiden WA. */
.zaehler-balken { display: flex; gap: 2px; height: 0.45rem; border-radius: 3px; overflow: hidden;
                  background: color-mix(in srgb, var(--c-text) 7%, transparent); }
.zaehler-balken > span { display: block; height: 100%; border-radius: 3px; }
.zaehler-balken .teil-eingesetzt { background: var(--c-success); }
.zaehler-balken .teil-ruht { background: color-mix(in srgb, var(--c-text) 38%, transparent); }
.zaehler-fuss {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--c-muted);
}
.zaehler-zeile { display: contents; }
/* Die Kürzel vorn in der WA-Spalte: dieselben Maße wie die Zahlenzeilen, damit sie auf einer
   Höhe stehen; im gedrehten Kopf ist der untere Innenabstand der Spalten größer. */
.zaehler-legende { justify-content: start; font-size: 0.74rem; line-height: 1.25; font-weight: 400; color: var(--c-muted); }
.zaehler-legende > span { font-size: 0.62rem; line-height: calc(0.74rem * 1.25); }
.matrix-quer .zaehler-legende { margin-bottom: 0.15rem; }
.zaehler-wa {
  align-self: center;
  padding-right: 1px;
  font-size: 0.62rem;
  font-weight: 400;
  color: var(--c-muted);
  text-align: right;
}
.zahl-vorhanden, .zahl-eingesetzt {
  padding: 0 0.2rem;
  border-radius: 3px;
  font-weight: 600;
  text-align: center;
}
.zahl-vorhanden {
  color: var(--c-text);
  background: color-mix(in srgb, var(--c-text) 12%, transparent);
}
.zahl-eingesetzt {
  color: color-mix(in srgb, var(--c-success) 70%, white);
  background: color-mix(in srgb, var(--c-success) 24%, transparent);
}

/* Die Spalte, nach der eine Ansicht sortiert (`Ansicht.sortier_feld`). Im gedrehten Kopf
   steht das Zeichen aufrecht: eigene Schreibrichtung, und die Drehung des Kopfs wieder
   zurück. */
.spalte-sortiert {
  color: var(--c-accent);
  margin-inline-end: .25rem;
}
.matrix-quer thead th.matrix-zelle .spalte-sortiert {
  display: inline-block;
  writing-mode: horizontal-tb;
  transform: rotate(180deg);
}
/* Die Zellen dürfen jetzt eng stehen — sie tragen nur noch ihren Inhalt.
   `width: auto` statt der vollen Breite: Sonst verteilt die Tabelle den Rest
   auf die Spalten, und ein Datum von 95 px säße in einer von 218 px. Jetzt
   ist jede Spalte so breit wie ihr Inhalt, und rechts bleibt Platz übrig. */

.matrix-quer .matrix-zelle {
  padding-left: 0.4rem; padding-right: 0.4rem;
  width: 1px; white-space: nowrap;
}
/* Ohne JavaScript bleibt wenigstens ein gemeinsames Mindestmaß, damit das
   Raster nicht zwischen 20 und 100 px springt; den genauen Abgleich auf die
   breiteste Spalte macht `gesamtliste.js`. */
.matrix-tabelle .matrix-zelle { min-width: 2.6rem; }

/* Die übrige Breite nimmt eine Füllspalte am rechten Rand auf: Die Karte
   bleibt so breit wie die Seite und die Zeilen laufen bis zum Rand durch,
   während die Datenspalten trotzdem nur so breit sind wie ihr Inhalt.
   (Eine Karte, die sich an die Tabelle schmiegt, sah aus, als würde die
   Tabelle nach links gedrückt.) */
.matrix-fuell { width: 100%; border-left: 0 !important; background: transparent !important; }

/* Gesamtliste: mehrere Kategorien nebeneinander ---------------------------- */
/* Die Gruppenzeile trägt die Farbe ihrer Kategorie, die Spalten darunter eine
   sehr leise Tönung davon — so bleibt beim Wandern über die Tabelle klar,
   zu welchem Block eine Spalte gehört. */
.gruppenzeile th { border-bottom: 0; padding-bottom: 0.15rem; }
.gruppenkopf {
  text-align: left;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.5rem !important;
  border-left: 0 !important;
  border-bottom: 3px solid var(--kat) !important;
  /* Deckend gemischt: Der Kopf steht beim Scrollen fest (sticky). */
  background: color-mix(in srgb, var(--kat) 42%, var(--c-surface)) !important;
  color: var(--c-text);
  white-space: nowrap;
}
.matrix-tabelle thead .gruppenzeile th.spalte-name,
.matrix-tabelle thead .gruppenzeile th.spalte-wa { background: var(--c-surface-2); }

.matrix-tabelle thead th.matrix-zelle.kat-zelle {
  background: color-mix(in srgb, var(--kat) 16%, var(--c-surface-2));
}
/* Die Tönung der Zellen ist bewusst schwächer als jede Statusfarbe
   (--stat-*-bg: 15–17 %). */
.matrix-tabelle tbody td.matrix-zelle.kat-zelle {
  background: color-mix(in srgb, var(--kat) 8%, transparent);
}
.matrix-tabelle .gruppe-beginnt { border-left: 1px solid var(--c-border-strong); }
.matrix-tabelle tbody td.gruppe-beginnt { border-left: 1px solid var(--c-border); }
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .gruppenkopf { background: var(--c-surface-2) !important; }
  .matrix-tabelle tbody td.matrix-zelle.kat-zelle { background: transparent; }
}

/* Spaltenweg (gesamtliste.js): die Zelle unter dem Zeiger und alles zwischen
   ihr und ihrem Spaltenkopf. Zwei senkrechte Linien statt einer vollen
   Einfärbung — so bleiben die Statusfarben der Zellen lesbar. */
.matrix-tabelle tbody td.matrix-zelle.spalte-auf {
  box-shadow: inset 1px 0 0 var(--c-primary-2), inset -1px 0 0 var(--c-primary-2);
}
.matrix-tabelle tbody td.matrix-zelle.spalte-aktiv {
  box-shadow: inset 1px 0 0 var(--c-primary-2), inset -1px 0 0 var(--c-primary-2),
              inset 0 -2px 0 var(--c-primary-2);
}
.matrix-tabelle thead th.matrix-zelle.spalte-aktiv {
  background: var(--c-surface-2);
  background: color-mix(in srgb, var(--c-primary-2) 22%, var(--c-surface-2));
  color: var(--c-text);
}
/* Die Kategorie darüber behält ihre Farbe — sie bekommt nur einen Rahmen,
   sonst ginge verloren, zu welchem Block die Spalte gehört. */
.matrix-tabelle thead th.gruppenkopf.spalte-aktiv {
  box-shadow: inset 0 0 0 2px var(--c-primary-2);
}

/* Ankreuzliste (Kategorien einer Ansicht) --------------------------------- */
.ankreuzliste {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 0.6rem 0.9rem 0.8rem; margin: 0;
}
.ankreuzliste > legend {
  float: none; width: auto; padding: 0 0.3rem; margin: 0 0 0.3rem -0.3rem;
  font-size: 0.78rem; color: var(--c-muted);
}
.ankreuzliste .form-check {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.12rem 0; margin: 0; min-height: 0;
}
.ankreuzliste .form-check-input { margin: 0; flex: none; }
.ankreuzliste .form-check-label { display: flex; align-items: center; gap: 0.1rem; font-size: 0.86rem; cursor: pointer; }
.ankreuzliste .kat { border-left: 0; display: inline-flex; }
.ankreuzliste .farbtupfer { margin-right: 0.5rem; }
@media (min-width: 560px) { .ankreuzliste { columns: 2; column-gap: 1.5rem; } .ankreuzliste > legend { column-span: all; } }
/* Ansicht-Dialog: unter jeder angehakten Kategorie die Auswahlliste, was ihre Zellen zeigen
   (reines CSS, der Dialog führt kein Skript aus). Ohne Häkchen ausgeblendet. */
.ansicht-kategorie { break-inside: avoid; padding-bottom: 0.1rem; }
.ansicht-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; }
.ansicht-angaben { display: none; align-items: center; gap: 0.4rem;
                   margin: 0 0 0.35rem 1.45rem; font-size: 0.78rem; flex-basis: 100%; }
.ansicht-angaben .ansicht-angabe { width: auto; max-width: 100%; font-size: 0.78rem;
                                   padding-top: 0.1rem; padding-bottom: 0.1rem; }
.ansicht-kategorie:has(> .ansicht-zeile > .form-check > input:checked) .ansicht-angaben { display: flex; }

/* Gegliederte Formulare (Qualifikation) ------------------------------------
   Abschnitte mit Überschrift statt eines gleichförmigen Rasters. Was nur
   zusammen mit einem Häkchen wirkt, steht eingerückt als Unterblock darunter. */
.formular-abschnitt + .formular-abschnitt {
  margin-top: 1.3rem; padding-top: 1.1rem;
  border-top: 1px solid var(--c-border);
}
.formular-abschnitt-titel {
  margin: 0 0 0.75rem;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-muted);
}
.formular-unterblock {
  margin-top: 0.9rem; padding-left: 0.9rem;
  border-left: 2px solid rgba(255, 77, 46, 0.35);
}
.feld-schmal .form-control { max-width: 9rem; }

.haken-kacheln {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.haken-kachel-zelle { display: flex; flex-direction: column; }
.haken-kachel {
  flex: 1;
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--c-border); border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.haken-kachel:hover { border-color: var(--c-border-strong); }
.haken-kachel .form-check-input { flex: none; margin: 0.15rem 0 0; }
.haken-kachel-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.haken-kachel-name { font-size: 0.88rem; color: var(--c-text); }
.haken-kachel-hilfe { font-size: 0.76rem; line-height: 1.35; color: var(--c-muted); }

.optionsliste { margin: 0; }
.optionsliste > legend { float: none; width: auto; margin-bottom: 0.4rem; }
.optionsliste .option {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.35rem; padding: 0.45rem 0.7rem;
  border: 1px solid var(--c-border); border-radius: 8px;
  font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.optionsliste .option:hover { border-color: var(--c-border-strong); }
.optionsliste .option .form-check-input { flex: none; margin: 0; }
/* Zwei, drei kurze Wahlen nebeneinander — etwa „Feste Werte | Nach Qualifikation". */
.optionsliste.ist-nebeneinander { display: flex; flex-wrap: wrap; column-gap: 0.5rem; }
.optionsliste.ist-nebeneinander > legend { flex: 0 0 100%; }
.optionsliste.ist-nebeneinander .option { flex: 1 1 10rem; }

.haken-kachel:has(input:checked),
.optionsliste .option:has(input:checked) {
  border-color: rgba(255, 77, 46, 0.45);
  background: rgba(255, 77, 46, 0.08);
}
.haken-kachel:has(input:checked) .haken-kachel-name { color: var(--c-primary-2); font-weight: 500; }

/* Recht, das die gewählte Rolle schon mitbringt (Benutzerformular, konto/_recht_kachel.html).
   Statt des Häkchens ein Schloss; das Häkchen bleibt unsichtbar im Formular und
   behält seinen Wert. Selektoren bewusst spezifischer als :has(input:checked),
   sonst färbt ein gespeichertes Häkchen die Kachel doch orange. */
.haken-kachel-schloss,
.haken-kachel-rolle { display: none; }
.haken-kachel-zelle.ist-von-selbst .haken-kachel {
  cursor: default; pointer-events: none;
  border-style: dashed; border-color: rgba(78, 161, 255, 0.4);
  background: rgba(78, 161, 255, 0.07);
}
.haken-kachel-zelle.ist-von-selbst .haken-kachel .form-check-input { display: none; }
.haken-kachel-zelle.ist-von-selbst .haken-kachel-schloss { display: inline; flex: none; margin-top: 0.1rem; color: var(--c-accent); }
.haken-kachel-zelle.ist-von-selbst .haken-kachel .haken-kachel-name { color: var(--c-text); font-weight: 500; }
.haken-kachel-zelle.ist-von-selbst .haken-kachel-rolle { display: inline; font-size: 0.74rem; font-weight: 600; color: var(--c-accent); }

/* Datenschutzbericht (/datenschutz) --------------------------------------- */
/* Eine Lesestrecke, keine Arbeitsmaske: schmalere Spalte, größere Zeilen-
   höhe, ruhige Abstände. Farben tragen hier keine Bedeutung wie bei den
   Statusklassen, sie gliedern nur — deshalb eigene Klassen statt .stat-*. */

.ds-vertraulich,
.ds-hinweis {
  display: flex; gap: 0.8rem; align-items: flex-start;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-bottom: 1.5rem;
  font-size: 0.9rem; line-height: 1.55;
}
.ds-vertraulich { border-color: rgba(255,90,106,0.45); background: rgba(255,90,106,0.08); }
.ds-hinweis     { border-color: rgba(78,161,255,0.40); background: rgba(78,161,255,0.07); }
.ds-vertraulich > .bi, .ds-hinweis > .bi { font-size: 1.15rem; line-height: 1.4; flex: none; }
.ds-vertraulich > .bi { color: var(--c-danger); }
.ds-hinweis > .bi { color: var(--c-accent); }

.ds-h2 {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 1.28rem; font-weight: 600;
  margin: 2.6rem 0 1rem; padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--c-border-strong);
}
.ds-nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; flex: none;
  border-radius: 50%; background: var(--c-primary); color: #fff;
  font-size: 0.82rem; font-weight: 700;
}
.ds-h3 {
  font-size: 1rem; font-weight: 600; letter-spacing: 0.02em;
  margin: 1.9rem 0 0.9rem; padding-left: 0.65rem;
  border-left: 3px solid var(--c-border-strong);
}
.ds-h3-rot  { border-left-color: var(--c-danger);  color: #ffb3bb; }
.ds-h3-gelb { border-left-color: var(--c-warning); color: #f8d78a; }
.ds-h3-grau { border-left-color: var(--c-muted);   color: var(--c-muted); }

.ds-absatz, .ds-lead { max-width: 78ch; line-height: 1.68; }
.ds-absatz { margin-bottom: 1rem; }
.ds-lead { font-size: 1.02rem; margin-bottom: 0.9rem; }
.ds-absatz-klein { font-size: 0.9rem; line-height: 1.6; margin-bottom: 0.75rem; }

.ds-urteil {
  border: 1px solid var(--c-border); border-left: 3px solid var(--c-primary);
  border-radius: var(--radius); background: var(--c-surface);
  padding: 1.15rem 1.3rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-1);
}

/* Ampeln --------------------------------------------------------------- */
.ds-ampeln { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-bottom: 0.5rem; }
@media (min-width: 768px)  { .ds-ampeln { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .ds-ampeln { grid-template-columns: repeat(3, 1fr); } }
.ds-ampel {
  display: flex; gap: 0.7rem; align-items: flex-start;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); padding: 0.8rem 0.95rem;
}
.ds-ampel-punkt {
  width: 0.85rem; height: 0.85rem; border-radius: 50%; flex: none; margin-top: 0.22rem;
}
.ds-gruen .ds-ampel-punkt { background: var(--c-success); box-shadow: 0 0 0 3px rgba(52,199,119,0.18); }
.ds-gelb  .ds-ampel-punkt { background: var(--c-warning); box-shadow: 0 0 0 3px rgba(240,180,41,0.18); }
.ds-rot   .ds-ampel-punkt { background: var(--c-danger);  box-shadow: 0 0 0 3px rgba(255,90,106,0.18); }
.ds-ampel-text { display: flex; flex-direction: column; gap: 0.2rem; }
.ds-ampel-text strong { font-size: 0.9rem; }
.ds-ampel-text span { font-size: 0.82rem; color: var(--c-muted); line-height: 1.5; }

/* Kennzahlen ------------------------------------------------------------ */
.ds-zahlen { display: grid; gap: 0.7rem; grid-template-columns: 1fr; margin-bottom: 0.5rem; }
@media (min-width: 640px)  { .ds-zahlen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .ds-zahlen { grid-template-columns: repeat(3, 1fr); } }
.ds-zahl {
  display: flex; flex-direction: column; gap: 0.15rem;
  border: 1px solid var(--c-border); border-top: 3px solid var(--c-border-strong);
  border-radius: var(--radius); background: var(--c-surface); padding: 0.9rem 1rem;
}
.ds-zahl-rot   { border-top-color: var(--c-danger); }
.ds-zahl-gruen { border-top-color: var(--c-success); }
.ds-zahl-wert { font-size: 1.85rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-zahl-rot .ds-zahl-wert   { color: var(--c-danger); }
.ds-zahl-gruen .ds-zahl-wert { color: var(--c-success); }
.ds-zahl-lbl { font-size: 0.86rem; font-weight: 500; }
.ds-zahl-sub { font-size: 0.78rem; color: var(--c-muted); line-height: 1.45; }

/* Listen ---------------------------------------------------------------- */
.ds-liste { margin: 0; padding-left: 1.1rem; }
.ds-liste li { margin-bottom: 0.42rem; font-size: 0.9rem; line-height: 1.58; }
.ds-liste-durch li { color: var(--c-muted); text-decoration: line-through; text-decoration-color: rgba(255,90,106,0.55); }

/* Schutzschichten ------------------------------------------------------- */
.ds-schichten { counter-reset: schicht; list-style: none; margin: 0 0 1rem; padding: 0; }
.ds-schichten > li {
  counter-increment: schicht; position: relative;
  padding: 0 0 1.15rem 2.6rem; margin: 0;
  border-left: 1px solid var(--c-border-strong); margin-left: 0.85rem;
}
.ds-schichten > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.ds-schichten > li::before {
  content: counter(schicht);
  position: absolute; left: -0.86rem; top: 0;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  font-size: 0.78rem; font-weight: 700; color: var(--c-muted);
}
.ds-schicht-titel { display: block; font-weight: 600; font-size: 0.97rem; margin-bottom: 0.3rem; padding-top: 0.15rem; }
.ds-schichten p { max-width: 76ch; font-size: 0.89rem; line-height: 1.62; margin: 0; color: var(--c-text); }
.ds-ok   { color: var(--c-success); font-weight: 600; }
.ds-warn { color: var(--c-warning); font-weight: 600; }

/* Befunde --------------------------------------------------------------- */
.ds-befund {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); box-shadow: var(--shadow-1);
  padding: 1.1rem 1.25rem; margin-bottom: 1.1rem;
  scroll-margin-top: 5rem;
}
.ds-befund-hoch   { border-left: 4px solid var(--c-danger); }
.ds-befund-mittel { border-left: 4px solid var(--c-warning); }
.ds-befund > header { margin-bottom: 0.85rem; }
.ds-befund h4 { font-size: 1.08rem; font-weight: 600; margin: 0.45rem 0 0; }
.ds-marke {
  display: inline-block; border-radius: 999px; padding: 0.14rem 0.6rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.ds-marke-hoch   { background: rgba(255,90,106,0.16); color: #ffb3bb; }
.ds-marke-mittel { background: rgba(240,180,41,0.16); color: #f8d78a; }
.ds-marke-klein  { background: var(--c-surface-2); color: var(--c-muted); text-transform: none; letter-spacing: 0; }
.ds-befund-block { margin-bottom: 0.85rem; }
.ds-befund-block:last-child { margin-bottom: 0; }
.ds-befund-block h5 {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--c-muted); margin: 0 0 0.35rem;
}
.ds-befund-block p { max-width: 78ch; font-size: 0.91rem; line-height: 1.64; margin-bottom: 0.6rem; }
.ds-befund-block p:last-child { margin-bottom: 0; }
.ds-kette { margin: 0 0 0.6rem; padding-left: 1.2rem; max-width: 78ch; }
.ds-kette li { font-size: 0.9rem; line-height: 1.58; margin-bottom: 0.35rem; }
.ds-entwarnung {
  border-left: 3px solid var(--c-success); background: rgba(52,199,119,0.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.6rem 0.85rem; margin-top: 0.7rem;
}
.ds-entwarnung .bi { color: var(--c-success); }

/* Kleine Befunde und Sauber-Befunde ------------------------------------- */
/* minmax(0, …): Sonst ist eine Spalte mindestens so breit wie ihr längster
   Code-Schnipsel, und die rechte Karte ragt über den Rand. */
.ds-klein-gitter, .ds-ok-gitter { display: grid; gap: 0.7rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px)  { .ds-klein-gitter, .ds-ok-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ds-klein-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
                             .ds-ok-gitter    { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ds-klein code, .ds-ok-punkt code { overflow-wrap: anywhere; }
.ds-klein, .ds-ok-punkt {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); padding: 0.85rem 1rem;
}
.ds-klein h5, .ds-ok-punkt h5 {
  font-size: 0.9rem; font-weight: 600; margin: 0 0 0.4rem;
  display: flex; align-items: baseline; gap: 0.45rem; flex-wrap: wrap;
}
.ds-klein p, .ds-ok-punkt p { font-size: 0.845rem; line-height: 1.56; color: var(--c-muted); margin: 0; }
.ds-ok-punkt { border-left: 3px solid var(--c-success); }
.ds-ok-punkt h5::before {
  content: "\F26E"; font-family: "bootstrap-icons"; font-weight: 400;
  color: var(--c-success); font-size: 0.95rem;
}

/* DSGVO-Tabelle --------------------------------------------------------- */
.ds-tabelle td, .ds-tabelle th { font-size: 0.855rem; line-height: 1.55; vertical-align: top; }
.ds-tabelle td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.ds-artikel { font-size: 0.74rem; color: var(--c-muted); }
.ds-stand {
  display: inline-block; border-radius: 999px; padding: 0.12rem 0.55rem;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.ds-stand-gruen { background: rgba(52,199,119,0.16); color: #8ee7b6; }
.ds-stand-gelb  { background: rgba(240,180,41,0.16); color: #f8d78a; }
.ds-stand-rot   { background: rgba(255,90,106,0.16); color: #ffb3bb; }

/* Kästen und Maßnahmenplan --------------------------------------------- */
.ds-kasten { margin: 1.2rem 0; }
.ds-kasten p { max-width: 80ch; font-size: 0.9rem; line-height: 1.64; }
/* Absatz direkt im Kasten („Kurz gesagt“, „Ergebnis“): gleicher Einzug wie der Kopf */
.ds-kasten > p { padding: 0 1rem 0.85rem 1.25rem; }
.ds-plan { list-style: none; counter-reset: massnahme; margin: 0; padding: 0; }
.ds-plan > li {
  counter-increment: massnahme; position: relative;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); padding: 0.75rem 1rem 0.75rem 2.9rem;
  margin-bottom: 0.55rem; font-size: 0.9rem; line-height: 1.58;
}
.ds-plan > li::before {
  content: counter(massnahme);
  position: absolute; left: 0.85rem; top: 0.72rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-primary); color: #fff; font-size: 0.76rem; font-weight: 700;
}
.ds-plan-zeit {
  display: inline-block; min-width: 5.2rem; margin-right: 0.8rem; text-align: center;
  border-radius: 999px; background: var(--c-surface-2); color: var(--c-muted);
  padding: 0.1rem 0.5rem; font-size: 0.74rem; font-weight: 600;
}

/* Fuß ------------------------------------------------------------------- */
.ds-fuss {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.5rem; padding-top: 1rem;
  border-top: 1px solid var(--c-border-strong);
  font-size: 0.8rem; color: var(--c-muted); line-height: 1.6;
}
.ds-fuss-technik { text-align: right; }
@media (max-width: 600px) { .ds-fuss-technik { text-align: left; } }

/* Datenschutzbericht — technische Fassung --------------------------------- */
/* Dichter als die Laienfassung: Monospace trägt hier Bedeutung (Fundstellen,
   Befehle), deshalb eigene Blöcke statt der Lesestrecken-Typografie. */

.ds-fingerprint {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); padding: 0.5rem 0.9rem; margin-bottom: 1.2rem;
}
.ds-fingerprint > div {
  display: flex; gap: 0.9rem; align-items: baseline; flex-wrap: wrap;
  padding: 0.38rem 0; font-size: 0.855rem; line-height: 1.5;
  border-bottom: 1px solid var(--c-border);
}
.ds-fingerprint > div:last-child { border-bottom: 0; }
.ds-fingerprint > div > span:first-child {
  flex: none; width: 9rem; color: var(--c-muted);
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}

.ds-sev {
  display: inline-block; border-radius: 4px; padding: 0.08rem 0.45rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; white-space: nowrap;
}
.ds-sev-hoch    { background: rgba(255,90,106,0.18); color: #ffb3bb; }
.ds-sev-mittel  { background: rgba(240,180,41,0.18); color: #f8d78a; }
.ds-sev-niedrig { background: rgba(78,161,255,0.16); color: #a8cfff; }
.ds-sev-info    { background: var(--c-surface-2);    color: var(--c-muted); }
.ds-cwe {
  display: inline-block; font-size: 0.71rem; color: var(--c-muted);
  border: 1px solid var(--c-border-strong); border-radius: 4px;
  padding: 0.03rem 0.38rem; white-space: nowrap;
}
.ds-befundtabelle td { font-size: 0.82rem; }
.ds-befundtabelle code { font-size: 0.78rem; }
.ds-fussnote { font-size: 0.82rem; color: var(--c-muted); }

.ds-tbefund {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); box-shadow: var(--shadow-1);
  padding: 1.1rem 1.25rem; margin-bottom: 1.1rem; scroll-margin-top: 5rem;
}
.ds-tbefund-kopf { display: flex; gap: 0.45rem; align-items: center; flex-wrap: wrap; }
.ds-tbefund h3 { font-size: 1.05rem; font-weight: 600; margin: 0.5rem 0 0; }
.ds-id { font-size: 0.82rem; font-weight: 700; color: var(--c-primary-2); }

/* minmax(0, …) wie bei den Befundkarten: Ein langer Pfad in <code> machte die
   Spalte sonst breiter als das Handy. */
.ds-dl { margin: 1rem 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 900px) { .ds-dl { grid-template-columns: 9rem minmax(0, 1fr); } }
.ds-dl code, .ds-tabelle code { overflow-wrap: anywhere; }
.ds-dl dt {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--c-muted); padding: 0.85rem 0 0.3rem;
  border-top: 1px solid var(--c-border);
}
.ds-dl dd {
  margin: 0; padding: 0.85rem 0 0.5rem; border-top: 1px solid var(--c-border);
  font-size: 0.885rem; line-height: 1.62;
}
@media (max-width: 899px) { .ds-dl dd { border-top: 0; padding-top: 0.2rem; } }
.ds-dl dt:first-of-type, .ds-dl dd:first-of-type { border-top: 0; padding-top: 0.2rem; }
.ds-dl dd > p { margin-bottom: 0.6rem; max-width: 82ch; }
.ds-dl dd > p:last-child { margin-bottom: 0; }
.ds-dl dd > ol, .ds-dl dd > ul { padding-left: 1.15rem; margin-bottom: 0.5rem; }
.ds-dl dd > ol li, .ds-dl dd > ul li { margin-bottom: 0.5rem; }

.ds-tbefund pre, .ds-klein pre {
  background: #14161a; border: 1px solid var(--c-border-strong);
  border-radius: 7px; padding: 0.65rem 0.85rem; margin: 0.5rem 0 0.7rem;
  overflow-x: auto;
}
.ds-tbefund pre code, .ds-klein pre code {
  font-size: 0.795rem; line-height: 1.55; color: #cfd6e0;
  white-space: pre; background: none; padding: 0;
}
.ds-dl code, .ds-klein code, .ds-tabelle code {
  font-size: 0.815rem; color: #ffb59f;
  background: rgba(255,255,255,0.04); border-radius: 3px; padding: 0.03rem 0.26rem;
}

.ds-live {
  font-size: 0.8rem; color: var(--c-muted); font-style: italic; margin: 0.2rem 0 0;
}
.ds-live-gut {
  font-style: normal; color: var(--c-text);
  border-left: 3px solid var(--c-success); background: rgba(52,199,119,0.07);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.55rem 0.8rem; margin-top: 0.6rem;
}
.ds-live-gut .bi { color: var(--c-success); }
.ds-warnhinweis {
  border-left: 3px solid var(--c-warning); background: rgba(240,180,41,0.08);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 0.55rem 0.8rem; margin-top: 0.6rem;
}
.ds-warnhinweis .bi { color: var(--c-warning); }

.ds-minitab { margin: 0.4rem 0 0; }
.ds-minitab td { font-size: 0.8rem; padding: 0.3rem 0.5rem; border-color: var(--c-border); }
.ds-minitab-bad td { color: #ffb3bb; background: rgba(255,90,106,0.07); }
.ds-klein .ds-cwe { margin-left: auto; }

/* ============================================================
   Namensdatei — die Stelle in der Kopfleiste
   ============================================================
   Grün umrandet, solange Namen geladen sind: So sieht man auf einen Blick,
   ob hier echte Namen stehen oder die Nummern des Servers. */
.namensdatei .dropdown-menu { min-width: 17rem; }
.namensdatei-info { max-width: 19rem; white-space: normal; }
.namensdatei.ist-geladen > .btn { border-color: rgba(52, 199, 119, 0.55); color: var(--stat-gut-text); }
[data-namensdatei-pruefung].ist-ok { border-left: 3px solid var(--c-success); }
[data-namensdatei-pruefung].ist-luecke { border-left: 3px solid var(--c-warning); }


/* ---- Risikomatrix im Sicherheits-/Datenschutzbericht (templates/personal/datenschutz.html, Abschnitt B) ---- */
  .ds-matrixhuelle { overflow-x: auto; margin: 0 0 1rem; }
  .ds-matrix { display: grid; grid-template-columns: 7.5rem repeat(3, minmax(6rem, 1fr));
               gap: 5px; min-width: 30rem; }
  .ds-matrix .mx-titel { grid-column: 2 / -1; text-align: center; font-size: 0.78rem;
               font-weight: 600; color: var(--c-muted); letter-spacing: 0.02em; }
  .ds-matrix .mx-kopf { font-size: 0.78rem; font-weight: 600; color: var(--c-muted);
               text-align: center; padding: 0.25rem 0; }
  .ds-matrix .mx-yachse { display: flex; align-items: center; justify-content: flex-end;
               text-align: right; font-size: 0.78rem; font-weight: 600; color: var(--c-muted);
               padding-right: 0.5rem; }
  .ds-matrix .mx-zelle { min-height: 62px; border-radius: 10px; display: flex; align-items: center;
               justify-content: center; text-align: center; padding: 0.4rem; }
  .ds-matrix .mx-gruen { background: rgba(52,199,119,0.14); }
  .ds-matrix .mx-gelb  { background: rgba(240,180,41,0.14); }
  .ds-matrix .mx-rot   { background: rgba(255,90,106,0.12); }
  .ds-matrix .mx-marke { font-size: 0.8rem; font-weight: 700; line-height: 1.25; color: var(--c-text); }
  .ds-matrix .mx-marke small { display: block; font-weight: 500; font-size: 0.72rem; color: var(--c-muted); }

/* === Seitenmenü auf schmalen Schirmen (unter 768 px) ===
   Die Kopfleiste behält dort Logo, Namensdatei und den Menüknopf; WA-Auswahl,
   Seiten und der eigene Zugang stehen hier. Ab 768 px bleibt es bei der Leiste. */
.hauptmenue {
  --bs-offcanvas-width: min(320px, 86vw);
  --bs-offcanvas-bg: var(--c-surface);
  --bs-offcanvas-border-color: var(--c-border);
  --bs-offcanvas-color: var(--c-text);
}
/* `offcanvas-md` statt `offcanvas`: Wird das Fenster breiter als 768 px (Tablet gedreht),
   schließt Bootstrap das offene Menü selbst, statt den Hintergrund abgedunkelt zu lassen. */
.hauptmenue:focus-visible { outline: none; }   /* Bootstrap fokussiert beim Öffnen den Container */
.topnav-menueknopf .bi { font-size: 1.4rem; }
.hauptmenue .offcanvas-header { border-bottom: 1px solid var(--c-border); gap: .75rem; }
.hauptmenue-kopf { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.hauptmenue-kopf .offcanvas-title {
  font-size: 1rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hauptmenue-rolle { font-size: .8rem; color: var(--c-muted); }
.hauptmenue-abschnitt {
  margin: 1.1rem 0 .3rem; padding: 0 .75rem;
  font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted);
}
.hauptmenue-abschnitt:first-child { margin-top: 0; }
.hauptmenue-liste { list-style: none; margin: 0; padding: 0; }
.hauptmenue-liste form { margin: 0; }
/* Mindestens 44 px hoch — mit dem Daumen gut zu treffen. */
.hauptmenue-eintrag {
  display: flex; align-items: center; width: 100%; min-height: 44px;
  padding: .55rem .75rem;
  border: 0; border-radius: 10px;
  background: transparent; color: var(--c-text);
  font-size: 1rem; text-align: left; text-decoration: none;
}
.hauptmenue-eintrag:hover,
.hauptmenue-eintrag:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--c-text); }
.hauptmenue-eintrag.active { background: rgba(255, 77, 46, 0.14); color: var(--c-primary); font-weight: 600; }
.hauptmenue-trenner { margin: .5rem .75rem; border-color: var(--c-border); opacity: 1; }
.hauptmenue-hinweis { margin: 0 0 .25rem; padding: 0 .75rem; color: var(--c-muted); }

/* ---------------------------------------------------------------------------
   Anfragen und Support (App anfragen)
   --------------------------------------------------------------------------- */
.topnav-mit-zaehler { position: relative; }
.topnav-zaehler {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--c-warning);
  color: #1b1405;
  font-size: .7rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.anfrage-verlauf { display: flex; flex-direction: column; gap: .75rem; }
.beitrag {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
/* Die Bearbeitung antwortet von rechts eingerückt, mit Akzentkante —
   so bleibt im Verlauf auf einen Blick klar, wer spricht. */
.beitrag.ist-bearbeitung {
  margin-left: 2rem;
  border-left: 3px solid var(--c-accent);
  background: var(--c-surface-2);
}
.beitrag.ist-vermerk {
  padding: .35rem 1rem;
  background: transparent;
  border-style: dashed;
}
.beitrag-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem .6rem;
  font-size: .85rem;
}
.beitrag-verfasser { font-weight: 600; }
.beitrag-rolle {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--c-accent);
}
.beitrag-hinweis { color: var(--c-muted); }
.beitrag-zeit { margin-left: auto; color: var(--c-muted); font-size: .8rem; }
.beitrag-text { margin-top: .5rem; white-space: normal; overflow-wrap: anywhere; }
.beitrag-bilder { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.beitrag-bilder img {
  display: block;
  width: auto;
  height: auto;
  max-width: 220px;
  max-height: 160px;
  object-fit: contain;
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  background: var(--c-bg);
}
@media (max-width: 575.98px) {
  .beitrag.ist-bearbeitung { margin-left: .75rem; }
}

.anfrage-daten { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; }
.anfrage-daten dt { color: var(--c-muted); font-weight: 400; }
.anfrage-daten dd { margin: 0; }

/* Überwachung (personal/ueberwachung.py) -----------------------------------
   Auswahl je Kategorie in ihrer Farbe; auf der Seite je Qualifikation eine
   Karte mit „vorher → jetzt" oder dem vollständigen Stand. */
.ueberwachung-gruppe {
  margin: 0 0 0.9rem; padding: 0.1rem 0 0.2rem 0.75rem;
  border: 0; border-left: 3px solid var(--kat);
}
.ueberwachung-gruppe-titel {
  float: none; width: auto; margin-bottom: 0.35rem;
  font-size: 0.85rem; font-weight: 600; color: var(--c-text);
}
.ueberwachung-haekchen {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.15rem 1rem;
}
.ueberwachung-marke {
  display: inline-block; padding: 0.05rem 0.55rem; border-radius: 999px;
  background: color-mix(in srgb, var(--kat, var(--c-border-strong)) 30%, transparent);
  color: var(--c-text);
}
.ueberwachung-tabelle .ueberwachung-pfeil {
  width: 1.5rem; padding-left: 0; padding-right: 0; text-align: center; color: var(--c-muted);
}
.ueberwachung-tabelle .ueberwachung-vorher { color: var(--c-muted); }
.ueberwachung-tabelle .ueberwachung-nachher { font-weight: 500; }
.ueberwachung-ruhig li { padding: 0.45rem 1rem; border-left: 0; border-top: 1px solid var(--c-border); }
.ueberwachung-ruhig li:first-child { border-top: 0; }

/* ---------------------------------------------------------------- Anleitung
   (personal/anleitung.py). Jeder liest nur seine eigene Rolle; was nicht dazu
   gehört, lässt schon der Server weg (templatetags/anleitung_rollen.py). */
.anleitung { counter-reset: kapitel; max-width: 62rem; }

.anleitung-kurz { border-left: 4px solid var(--c-accent); }
.anleitung-kurz p { margin: 0; }

.anleitung-kapitel > .card-header {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 600; font-size: 1.02rem;
}
.anleitung-kapitel > .card-header::before {
  counter-increment: kapitel; content: counter(kapitel);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--c-accent-flaeche); color: #fff; font-size: .9rem;
  flex-shrink: 0;
}
.anleitung-kapitel .card-body > p:first-child { margin-top: 0; }
.anleitung-kapitel h3 {
  font-size: .95rem; font-weight: 600; margin: 1rem 0 .4rem;
  color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em;
}
.anleitung-kapitel h3:first-child { margin-top: 0; }

/* Schritte: Kreis mit Nummer, darunter Text — auch die Schritte zählen nur, was zu sehen ist. */
.anleitung-schritte { list-style: none; counter-reset: schritt; padding: 0; margin: 0; }
.anleitung-schritte > li {
  position: relative; padding-left: 2.3rem; margin-bottom: .6rem; line-height: 1.5;
}
.anleitung-schritte > li:last-child { margin-bottom: 0; }
.anleitung-schritte > li::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; left: 0; top: .1rem;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong);
  font-size: .8rem; font-weight: 600; color: var(--c-text);
}
.anleitung-punkte { padding-left: 1.2rem; margin: 0; }
.anleitung-punkte > li { margin-bottom: .35rem; line-height: 1.5; }

/* Ein Knopf, wie er in der Anwendung heißt. */
.knopf {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .05rem .5rem; border-radius: 6px;
  border: 1px solid var(--c-border-strong); background: var(--c-surface-2);
  font-size: .88em; white-space: nowrap; vertical-align: baseline;
}
.knopf .bi { font-size: .95em; }
.knopf-primaer { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.knopf-akzent { background: var(--c-accent-flaeche); border-color: var(--c-accent-flaeche); color: #fff; }

.anleitung-hinweis {
  margin: .8rem 0 0; padding: .55rem .8rem; border-radius: 8px;
  background: rgba(240,180,41,.10); border: 1px solid rgba(240,180,41,.35);
  font-size: .9rem; line-height: 1.45;
}
.anleitung-hinweis .bi { color: var(--c-warning); margin-right: .3rem; }
.anleitung-hinweis.ist-ruhig { background: var(--c-surface-2); border-color: var(--c-border); }
.anleitung-hinweis.ist-ruhig .bi { color: var(--c-accent); }

/* Erklärvideo zur Anleitung (personal/_anleitung_video.html) — nur am Bildschirm */
.anleitung-video { margin: 0 0 1rem; max-width: 960px; }
.anleitung-video video {
  display: block; width: 100%; aspect-ratio: 16 / 9; background: #000;
  border: 1px solid var(--c-border); border-radius: var(--radius);
}
.anleitung-recht .anleitung-video { margin: .5rem 0 .75rem; max-width: 720px; }
.anleitung-video figcaption { margin-top: .35rem; font-size: .85rem; color: var(--c-muted); }
.anleitung-video figcaption .bi { margin-right: .35rem; color: var(--c-primary); }

.anleitung-bild { margin: .9rem 0 0; }
.anleitung-bild img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--c-border-strong); border-radius: 10px;
}
.anleitung-bild figcaption { font-size: .82rem; color: var(--c-muted); margin-top: .35rem; line-height: 1.45; }
.anleitung-bild.ist-schmal img { max-width: 30rem; }
.anleitung-bild.ist-mittel img { max-width: 44rem; }
/* Hochformat vom Handy (Einsatz-Eingabe): schmal, sonst füllt es den ganzen Bildschirm. */
.anleitung-bild.ist-handy img { max-width: 17rem; }

/* Legende zu den nummerierten Marken in einem Bild. */
.bildmarke {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--c-primary); color: #fff; font-size: .72rem; font-weight: 700;
  margin-right: .25rem; vertical-align: text-bottom;
}

/* Zusatzrechte: je Recht ein Block mit dem Stand des Lesers. */
.anleitung-recht { padding: .75rem 0; border-top: 1px solid var(--c-border); }
.anleitung-recht:first-of-type { border-top: 0; padding-top: 0; }
.anleitung-recht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.anleitung-recht-kopf strong { font-size: .98rem; }
.anleitung-marke {
  font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--c-surface-2); border: 1px solid var(--c-border-strong); color: var(--c-muted);
}
.anleitung-marke.ist-an { background: var(--stat-gut-bg); border-color: var(--stat-gut-rand); color: var(--stat-gut-text); }
.anleitung-recht .anleitung-schritte > li { margin-bottom: .35rem; }

.anleitung-farben { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-top: .5rem; }
.anleitung-farben .stat { white-space: nowrap; }
.anleitung-recht-pdf {
  margin-left: auto; font-size: .8rem; color: var(--c-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: .25rem;
}
.anleitung-recht-pdf:hover { color: var(--c-text); }
/* Kleine Ausschnitte (Menüs) in natürlicher Größe, nicht hochgezogen. */
.anleitung-bild.ist-klein img { width: auto; max-width: 100%; }
/* Schmale Bilder rechts neben dem Text, damit der Text nicht als Block unter
   einem Bild mit viel Leerraum daneben steht. Erst ab Tablet-Breite; auf dem
   Handy stehen sie wie alle anderen im Fluss. Die Kapitelkarte räumt am Ende
   auf, damit ein hohes Bild nicht ins nächste Kapitel ragt. */
@media (min-width: 768px) {
  .anleitung-bild.ist-rechts { float: right; margin: 0 0 .75rem 1.5rem; }
  .anleitung-bild.ist-rechts.ist-schmal { width: 15rem; }
  .anleitung-bild.ist-rechts.ist-mittel { width: 28rem; }
  .anleitung-bild.ist-rechts.ist-handy { width: 14rem; }
  .anleitung-bild.ist-rechts.ist-klein { width: auto; max-width: 20rem; }
  .anleitung-bild.ist-rechts img { max-width: 100%; }
}
.anleitung-kapitel .card-body::after { content: ""; display: block; clear: both; }
/* Hinweiskästen neben einem Bild: eigener Formatierungskontext, sonst läuft der
   Kasten unter das Bild, und nur sein Text weicht aus. */
.anleitung-hinweis, .anleitung-farben { overflow: hidden; }

/* === Einsatzstatistik (Diensttage aus dem Dienstplan) ====================
   Dieselbe Tabelle wie die Gesamtliste (`matrix-tabelle`), nur mit Zahlen
   statt Häkchen: Namens- und WA-Spalte bleiben stehen, die Spaltenbreiten
   misst `gesamtliste.js`. Eigen ist hier, dass hinter jedem Fahrzeug seine
   Positionen stehen — zugeklappt, bis jemand den Namen anklickt
   (`dienststatistik.js`). */
.statistik-tabelle [hidden] { display: none !important; }
.statistik-tabelle .leer { color: #4b5260; }
/* Zahlen untereinander gleich breit — sonst zappelt die Spalte. */
.statistik-tabelle td.matrix-zelle { font-variant-numeric: tabular-nums; }
.statistik-tabelle .gruppen-zelle { font-weight: 600; }
/* Die Positionen sind die Feinheit dahinter und treten zurück. */
.statistik-tabelle .positions-zelle { color: var(--c-muted); font-weight: 400; font-size: 0.75rem; }
/* „Ohne Fahrzeug" und „Ohne Zuordnung" sind Sammelspalten, keine Fahrzeuge. */
.statistik-tabelle .ist-sammelspalte { font-weight: 400; color: var(--c-muted); }
.statistik-tabelle .summen-zelle { border-left: 1px solid var(--c-border-strong); font-weight: 600; }
.statistik-tabelle tfoot td {
  position: sticky; bottom: 0; z-index: 2;
  background: var(--c-surface-2); border-top: 1px solid var(--c-border-strong);
  font-weight: 600;
}
.statistik-tabelle tfoot td.spalte-name { z-index: 3; text-align: left; }
/* Der Spaltenkopf ist ein Schalter — sieht aus wie Text, ist aber anklickbar. */
.spalten-knopf {
  background: none; border: 0; padding: 0; color: inherit; font: inherit;
  cursor: pointer; display: inline-flex; align-items: center; gap: .25rem;
}
.spalten-knopf .bi { font-size: .7em; opacity: .55; transition: transform .15s ease; }
.spalten-knopf[aria-expanded="true"] .bi { transform: rotate(180deg); opacity: .9; }
.spalten-knopf:hover { color: var(--c-primary-2); }
/* Die Zahl führt zu den Tagen dahinter. */
.statistik-tabelle .zahl-link { color: inherit; text-decoration: none; display: block; }
.statistik-tabelle .zahl-link:hover,
.statistik-tabelle .zahl-link:focus-visible { color: var(--c-primary-2); text-decoration: underline; }
/* Die Bänder über den Spalten. `.gruppenkopf` rechnet mit --kat (in der
   Gesamtliste die Kategoriefarbe) — hier steht dafür je Band ein ruhiger Ton:
   Fahrzeuge blau, Funktionen grün, „Ohne Zuordnung" grau, damit auf einen Blick
   klar ist, wo die Fahrzeuge aufhören. */
.statistik-tabelle thead .gruppenkopf { --kat: var(--c-border-strong); }
.statistik-tabelle thead .gruppenkopf[data-band-kopf="fahrzeug"] { --kat: var(--c-accent-flaeche); }
.statistik-tabelle thead .gruppenkopf[data-band-kopf="funktion"] { --kat: var(--c-success); }

/* === Verteilung einer Person (Einsatzstatistik) ==========================
   Ist gegen Soll: Der Balken ist das Ist, der senkrechte Strich darin das
   Soll (beides in Prozent des größten Werts der Tabelle, als --ist/--soll). */
.verteilung-spalte { width: 30%; min-width: 8rem; }
.verteilung-balken {
  position: relative; display: block; height: 0.85rem; border-radius: 4px;
  background: var(--c-surface-2); overflow: hidden;
}
.verteilung-balken::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--ist, 0%);
  background: var(--c-accent-flaeche); border-radius: 4px;
}
/* Der Sollstrich liegt über dem Balken und bleibt auch sichtbar, wenn das Ist
   darüber hinausgeht — genau dann ist er die interessante Stelle. */
.verteilung-balken::after {
  content: ""; position: absolute; top: -2px; bottom: -2px; left: var(--soll, 0%);
  width: 2px; background: var(--c-text); opacity: .75;
}
/* Die Beschriftung über einer Gruppe von Spalten (nur ab mittlerer Breite). */
.verteilung-band th {
  font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  color: var(--c-muted); padding-bottom: .1rem; border-bottom: 1px solid var(--c-border);
}
.verteilung-band th.ohne-rand { border-bottom: 0; }
.verteilung-tabelle tr.ist-ueber .verteilung-balken::before { background: var(--c-warning); }
.verteilung-tabelle tr.ist-unter .verteilung-balken::before { background: var(--stat-ab-rand); }
.verteilung-tabelle td { vertical-align: middle; }

/* Probedienstplan: die Schicht als Fahrzeugkarten statt als Tabelle — ein Brett, das
   man wie den Plan an der Wand liest. Die Zahlen dahinter stehen aufklappbar darunter. */
.plan-brett {
  display: grid; gap: .75rem; align-items: start;   /* jede Karte nur so hoch wie ihr Inhalt */
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.plan-fahrzeug {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  background: var(--c-surface); box-shadow: var(--shadow-1); overflow: hidden;
}
.plan-fahrzeug-kopf {
  display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
  background: var(--c-surface-2); border-bottom: 1px solid var(--c-border); font-weight: 600;
}
.plan-fahrzeug-kopf i { color: var(--c-primary); }
.plan-anzahl { margin-left: auto; font-size: .75rem; font-weight: 500; color: var(--c-muted); }
.plan-fahrzeug.hat-luecke .plan-anzahl { color: var(--c-danger); }
.plan-sitze { list-style: none; margin: 0; padding: 0; }
.plan-sitz {
  display: flex; align-items: center; gap: .6rem; padding: .45rem .75rem;
  border-top: 1px solid var(--c-border);
}
.plan-sitz:first-child { border-top: 0; }
.plan-code { flex: 0 0 4.4rem; font-size: .72rem; font-weight: 600; color: var(--c-muted); }
.plan-wer { min-width: 0; }
.plan-person {
  display: block; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-rolle {
  display: block; font-size: .72rem; color: var(--c-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-rand { margin-left: auto; text-align: right; white-space: nowrap; }
.plan-sitz.ist-leer { background: rgba(255, 90, 106, 0.07); }
.plan-sitz.ist-leer .plan-person { color: var(--c-danger); font-weight: 500; }
.plan-details > summary { cursor: pointer; color: var(--c-muted); font-size: .85rem; }
.plan-details[open] > summary { margin-bottom: .5rem; }

/* Rohdaten des Dienstplans (nur technischer Support): JSON zum Vergleichen. */
.rohdaten-json {
  background: var(--c-input-bg); border: 1px solid var(--c-border); border-radius: 8px;
  padding: .75rem; font-size: .78rem; line-height: 1.45; color: var(--c-text);
  max-height: 32rem; overflow: auto; white-space: pre;
}

/* Kurzprofil-Dialog: je Praktikant ein Foto, wahlweise (`_kurzprofil_dialog.html`, kurzprofil.js). */
.kurzprofil-fotos { list-style: none; margin: 0; padding: 0; }
.kurzprofil-fotos li { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0;
                       border-bottom: 1px solid var(--c-border, rgba(127, 127, 127, 0.2)); }
.kurzprofil-fotos li:last-child { border-bottom: 0; }
.kurzprofil-person { flex: 1 1 auto; min-width: 0; }
.kurzprofil-vorschau { width: 2.25rem; height: 3rem; object-fit: cover; border-radius: 0.25rem; }

/* Name im Titel eines Eingabefensters: führt zur Übersicht der Person (modal.js). Wie der Titel,
   erst beim Darüberfahren als Link erkennbar. */
.modal-title .modal-person-link { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.modal-title .modal-person-link:hover,
.modal-title .modal-person-link:focus-visible { color: var(--c-accent); border-bottom-style: solid; }

/* Meldungen des Servers als Einblendung oben (werkzeug.js) — so breit wie der Text, Text links.
   SweetAlert setzt den Rahmen der Einblendungen sonst fest auf 360 px. */
body.swal2-toast-shown .swal2-container.ql-meldung-rahmen { width: auto; max-width: calc(100vw - 2rem); }
.swal2-popup.swal2-toast.ql-meldung { max-width: 42rem; padding: .6rem .9rem !important; }
.swal2-popup.swal2-toast.ql-meldung .swal2-title { font-size: .95rem; font-weight: 500; margin: 0 .5rem; text-align: left; }
.ql-meldung-liste { margin: .25rem 0 0; padding-left: 1.1rem; text-align: left; font-size: .9rem; }

/* Verteilung zwischen den Wachabteilungen (`wa_verteilung`) ------------------ */
/* Je Qualifikation ein Paar aus zwei Zeilen; die WA steht an der Zeile, die Farbe trägt
   dieselbe Bedeutung wie im Häkchenzähler: grün eingesetzt, grau vorhanden, nicht eingesetzt.
   Schmale Balken mit runden Enden, 2 px Abstand zwischen den Teilen, leise Spur dahinter. */
.waverteilung-kopf {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem;
  margin: 0 0 1rem;
}
.waverteilung-kennzahl {
  display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--c-border); border-radius: 8px; background: var(--c-surface);
}
.waverteilung-kennzahl-wert { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.waverteilung-kennzahl-text { font-size: 0.8rem; color: var(--c-muted); }
.waverteilung-legende { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; font-size: 0.8rem; }
.waverteilung-farbe {
  display: inline-block; width: 0.8rem; height: 0.55rem; margin-right: 0.35rem;
  border-radius: 2px; vertical-align: middle;
}
.waverteilung-farbe.ist-eingesetzt, .waverteilung-teil.ist-eingesetzt { background: var(--c-success); }
.waverteilung-farbe.ist-ruht, .waverteilung-teil.ist-ruht { background: color-mix(in srgb, var(--c-text) 38%, transparent); }

.waverteilung-tabelle td, .waverteilung-tabelle th { vertical-align: middle; font-variant-numeric: tabular-nums; }
.waverteilung-tabelle .spalte-wa { width: 1px; white-space: nowrap; color: var(--c-muted); font-size: 0.8rem; }
.waverteilung-name { font-weight: 600; padding-right: 1.25rem; overflow-wrap: anywhere; }
/* Das Paar bleibt als Einheit erkennbar: Linie nur zwischen den Paaren, nicht zwischen 1. und 2. WA. */
.waverteilung-paar tr:first-child > * { border-bottom-color: transparent; }
.waverteilung-paar tr:first-child > .waverteilung-name { border-bottom-color: var(--c-border); }
/* Feste Spaltenbreiten — sonst verteilt der Browser den Rest ungleich, und die fünf
   Zahlenspalten sind nicht gleich breit (Wunsch des Anwenders, 04.11.2026). Die Zahlenspalten
   haben eine feste, gleiche Breite; den Rest nimmt der Balken. */
.waverteilung-tabelle { table-layout: fixed; }
.waverteilung-tabelle th.waverteilung-name-kopf { width: 12rem; }
.waverteilung-tabelle thead th.spalte-wa { width: 4rem; }
.waverteilung-tabelle th.waverteilung-zahl { width: 7.5rem; white-space: normal; vertical-align: bottom;
                                             overflow-wrap: normal; word-break: normal; hyphens: manual; }
.waverteilung-balken-zelle { min-width: 0; }
.waverteilung-balken {
  display: flex; gap: 2px; height: 0.6rem;
  border-radius: 4px; background: color-mix(in srgb, var(--c-text) 6%, transparent);
  overflow: hidden;
}
.waverteilung-teil { display: block; height: 100%; border-radius: 4px; }
.waverteilung-differenz { font-weight: 600; white-space: nowrap; }
/* Zebrastreifen und Hervorhebung je Paar, nicht je Zeile — sonst wäre die 2. WA immer getönt. */
.waverteilung-tabelle tbody tr:nth-child(even) > td,
.waverteilung-tabelle tbody tr:hover > td { background: transparent; }
.waverteilung-tabelle .waverteilung-paar:nth-of-type(even) > tr > * { background: rgba(255,255,255,0.014); }
.waverteilung-tabelle .waverteilung-paar:hover > tr > * { background: rgba(255,255,255,0.045); }