/* =====================================================================
   checkdat - schlichtes, handwerksnahes Design. Keine Spielereien,
   gut lesbar, funktioniert auf Baustellen-Tablet und Buero-Monitor.
   Branding seit 06/2026: Blau #2563EA, Schrift Outfit (selbst gehostet,
   kein Google-CDN wegen DSGVO), Logo-Dateien liegen in public/.
   ===================================================================== */

/* Outfit - selbst gehostet (fonts/, @fontsource, latin reicht fuer DE) */
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/outfit-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/outfit-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/outfit-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 700;
  font-display: swap; src: url('fonts/outfit-latin-700-normal.woff2') format('woff2');
}

/* Design-Tokens - Quelle der Wahrheit, siehe STYLEGUIDE.md. Nie Hex direkt
   ins CSS, immer ueber diese Variablen. */
:root {
  /* Marke */
  --brand: #2563ea;         /* Primaer (Designer-Styleguide) */
  --brand-dark: #1d4ed8;    /* Hover primaer / Info-Text */
  --brand-deep: #0c447c;    /* Text auf Hellblau, dunkle Akzente */
  --brand-mid: #185fa5;     /* sekundaerer blauer Text */
  --brand-200: #85b7eb;     /* blaue Raender, Hover-Rand, Radio */
  --brand-100: #dbeafb;     /* tiefere blaue Hover-/Aktiv-Flaeche */
  --brand-50: #e6f1fb;      /* helle blaue Flaeche (gewaehlt, Badges) */
  --on-brand: #c7ddfb;      /* heller Text/Icon auf der blauen Sidebar */
  /* Neutral */
  --ink: #020711;           /* Haupttext (Designer-Brand-Dunkel) */
  --muted: #64748b;         /* Sekundaertext */
  --hint: #94a3b8;          /* dezenteste Stufe (Meta, Platzhalter) */
  --line: #e2e8f0;          /* Standard-Rahmen */
  --line-strong: #cbd5e1;   /* kraeftiger Rahmen (Inputs, Chips) */
  --bg: #f4f6f9;            /* Seitenhintergrund */
  --card: #ffffff;          /* Kartenflaeche */
  --slate-50: #f1f5f9;      /* neutrale Pill-Flaeche */
  --slate-600: #475569;     /* Text auf neutraler Pill */
  /* Status */
  --ok: #15803d;   --ok-fill: #dcfce7;
  --warn: #854d0e; --warn-fill: #fef9c3; --warn-strong: #d97706; --warn-gelb: #eab308;
  --err: #b91c1c;  --err-fill: #fee2e2;
  --info: #1d4ed8; --info-fill: #eff6ff; --info-border: #bfdbfe;
  /* Radien */
  --radius: 10px;  /* Alias = --r-md (Altbestand) */
  --r-sm: 8px;     --r-md: 10px;  --r-lg: 14px;  --r-pill: 999px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Outfit', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  /* wie im Mockup: feineres Schriftbild auf Mac/Retina, sonst wirkt Outfit
     schwerer und "anders" als im Entwurf */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand); }

/* Formular-Elemente erben die Schrift NICHT automatisch: <button>,
   <input>, <select>, <textarea> nehmen sonst die Browser-Standardschrift
   statt Outfit. Deshalb hier einmal global erzwingen (sonst sieht z.B.
   die Menueleiste, die aus <button> besteht, nach System-Font aus). */
button, input, select, textarea { font-family: inherit; }

/* --- Login-Seite --- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.brand {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.5px;
  margin: 0 0 4px;
}
.brand span { color: var(--brand); }
.subtitle { color: var(--muted); margin: 0 0 24px; font-size: 14px; }

/* --- Formularelemente --- */
label { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
input, select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: #fff;
}
input:focus, select:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
/* Passwort ein-/ausblenden: Auge-Button rechts im Feld. */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 30px; height: 30px; padding: 0; border: none; background: none;
  color: var(--muted); cursor: pointer; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--brand); }

button {
  cursor: pointer;
  border: none;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 16px;
}
.btn-primary { background: var(--brand); color: #fff; width: 100%; margin-top: 20px; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { background: transparent; color: var(--muted); padding: 6px 10px; }
.btn-small { font-size: 13px; padding: 7px 12px; }

.linkrow { margin-top: 14px; text-align: center; font-size: 13px; }
.linkrow a { cursor: pointer; }

/* --- Meldungen --- */
.msg { margin-top: 16px; font-size: 14px; padding: 10px 12px; border-radius: var(--r-sm); display: none; }
.msg.show { display: block; }
.msg.error { background: #fef2f2; color: var(--err); border: 1px solid #fecaca; }
.msg.ok    { background: #f0fdf4; color: var(--ok);  border: 1px solid #bbf7d0; }
.msg.info  { background: var(--info-fill); color: var(--brand-dark); border: 1px solid var(--info-border); }

/* --- App-Shell (Etappe 14): blaue Seitenleiste + weisse Top-Leiste --- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 240px; flex: 0 0 auto;
  background: var(--brand);
  position: sticky; top: 0; height: 100vh;
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.sidebar-logo { padding: 6px 10px 16px; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: transparent; border: none; border-radius: var(--r-sm);
  padding: 10px 12px; font-size: 14px; font-weight: 400;
  color: var(--on-brand); text-align: left; cursor: pointer;
}
.nav-item svg { flex: none; }
/* hidden muss greifen: sonst ueberschreibt display:flex das Attribut und
   ausgeblendete Punkte (z.B. Auswertung = nur Superadmin) waeren sichtbar. */
.nav-item[hidden] { display: none; }
.nav-item:hover { background: rgba(255,255,255,.10); color: #fff; }
.nav-item.active { background: rgba(255,255,255,.20); color: #fff; font-weight: 500; }
/* E42: Zähler-Pill am Menüpunkt (z.B. E-Mail-Eingang). Weiss auf dem blauen
   Menue, damit der Kontrast auch auf der helleren Aktiv-Flaeche traegt. */
.nav-badge {
  margin-left: auto; flex: none;
  min-width: 20px; padding: 0 7px;
  background: #fff; color: var(--brand);
  font-size: 12px; font-weight: 500; line-height: 18px;
  text-align: center; border-radius: var(--r-pill);
}
.nav-badge[hidden] { display: none; }
.nav-group { margin-top: 14px; }
.nav-group-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: rgba(255,255,255,.65);
  padding: 4px 12px 6px;
}
.sidebar-foot { margin-top: auto; padding: 8px 4px 4px; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Top-Leiste weiss, ruhig - Blau lebt in der Seitenleiste (Etappe 14) */
.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  height: 60px; padding: 0 24px;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
/* Mobile-Navigation (Drawer). Auf Desktop unsichtbar. */
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: none; border-radius: var(--r-sm); color: var(--ink); cursor: pointer; padding: 0; }
.nav-burger:hover { background: var(--bg); }
.topbar-logo { display: none; height: 24px; }
.nav-overlay { display: none; }
.btn-newjob { width: auto; margin-top: 0; padding: 9px 15px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; }
.nb-plus { font-size: 16px; line-height: 1; }

/* Globale Suche links in der Topbar (Etappe 15-Nachzug / Etappe 16). Tippen
   springt auf "Alle Abgleiche" und filtert live ueber Titel + Profil. */
.searchbar { position: relative; flex: 1; max-width: 380px; min-width: 0; }
.searchbar-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--hint); display: flex; }
.searchbar input {
  width: 100%; height: 38px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 0 12px 0 38px; font-size: 14px; background: var(--bg);
}
.searchbar input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 3px rgba(37,99,234,.12); }

/* Avatar-Menue (Profil-Icon) rechts in der Topbar. */
.avatar-wrap { position: relative; }
.avatar {
  display: flex; align-items: center; gap: 5px; padding: 4px 8px 4px 5px;
  background: var(--bg); border: none; border-radius: var(--r-pill); cursor: pointer;
}
.avatar-circle {
  width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
.avatar-chev { color: var(--muted); display: flex; }
.avatar-menu {
  position: absolute; top: 46px; right: 0; z-index: 30;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 6px; min-width: 220px; box-shadow: 0 12px 30px rgba(2,7,17,.14);
}
.avatar-menu[hidden] { display: none; }
.avatar-cap-c {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 14px 10px 12px; text-align: center;
}
.avatar-circle-c {
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600;
}
.avatar-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.avatar-firma {
  font-size: 11px; font-weight: 600; color: var(--brand-deep);
  background: var(--brand-50); border: 1px solid var(--brand-200);
  border-radius: var(--r-pill); padding: 2px 10px;
}
.avatar-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: none; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink);
  padding: 9px 10px; text-align: left; cursor: pointer;
}
.avatar-item:hover { background: var(--brand-50); color: var(--brand-deep); }
.avatar-item svg { flex: none; color: var(--muted); }
.avatar-item:hover svg { color: var(--brand-mid); }
.avatar-item.danger { color: var(--err); }
.avatar-item.danger svg { color: var(--err); }
.avatar-item.danger:hover { background: var(--err-fill); color: var(--err); }
.avatar-item.danger:hover svg { color: var(--err); }
.avatar-item-gap { margin-top: 8px; }

/* Konto: Passwort-aendern-Unterseite (#konto/passwort) */
.konto-card { max-width: 440px; }
.konto-hint { font-size: 12px; color: var(--hint); margin: 6px 0 0; }
.konto-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.konto-actions .btn-primary { width: auto; margin-top: 0; }
.konto-actions .btn-ghost { color: var(--brand); border: 1px solid var(--line); padding: 10px 16px; }
@media (max-width: 560px){ .searchbar { display: none; } }

.content { flex: 1; }
/* Etappe 15-Nachzug: Inhalt sitzt linksbuendig an der blauen Leiste (vorher
   mittig zentriert). Breite gedeckelt, damit Zeilen lesbar bleiben. */
.main { max-width: 1000px; margin: 0; padding: 28px 28px 60px; }

/* Mobil: Seitenleiste wird zur schmalen Leiste oben */
@media (max-width: 760px) {
  /* Sidebar wird zum Off-Canvas-Drawer: faehrt von links rein. */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 264px; max-width: 84vw; transform: translateX(-100%);
    transition: transform .22s ease; z-index: 50;
    box-shadow: 0 0 40px rgba(2,7,17,.18);
  }
  .sidebar.open { transform: translateX(0); }
  .nav-overlay { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(2,7,17,.45); }
  .nav-overlay[hidden] { display: none; }
  .nav-burger { display: inline-flex; }
  .topbar-logo { display: block; }
  .searchbar { display: none; }
  /* Topbar kompakt: "Neuer Abgleich" wird zum runden +-Button. */
  .topbar { padding: 0 14px; gap: 10px; }
  .btn-newjob { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .nb-text { display: none; }
  .nb-plus { font-size: 22px; }
  .topbar-logo { height: 22px; }
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  margin-bottom: 24px;
}

/* --- Etappe 12: Vorgangs-Detailseite --- */
.detail-back { display: inline-block; font-size: 13px; color: var(--muted); text-decoration: none; margin-bottom: 10px; }
.detail-back:hover { color: var(--brand); }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.kpi { background: var(--bg); border-radius: var(--r-md); padding: 14px 16px; }
.kpi-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.kpi-wert { font-size: 22px; font-weight: 700; }
.kpi-rot   { background: var(--err-fill); }
.kpi-rot   .kpi-label, .kpi-rot   .kpi-wert { color: var(--err); }
.kpi-gruen { background: var(--ok-fill); }
.kpi-gruen .kpi-label, .kpi-gruen .kpi-wert { color: var(--ok); }

/* Etappe 22: zweispaltige Gegenueberstellung (Angebotsvergleich). Schlichte
   Tabelle aus Grid-Zeilen, die guenstigere Seite je Kriterium blau hinterlegt. */
.vgl-table { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin: 16px 0; }
/* DL-1061: Der Befund ist die laengste Spalte und bekommt den meisten Platz
   (vorher 1.4fr 1fr 1fr - ausgerechnet das kurze Kriterium war am breitesten). */
.vgl-head, .vgl-row {
  display: grid; align-items: start;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1.1fr) minmax(280px, 2.4fr);
}
.vgl-head { background: var(--bg); }
.vgl-row { border-top: 1px solid var(--line); }
.vgl-head > span, .vgl-row > span { padding: 12px 14px; font-size: 14px; line-height: 1.55; }
.vgl-head > span { font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.4; }
.vgl-krit { font-weight: 600; color: var(--ink); }
.vgl-cell { color: var(--ink); }
.vgl-cell.vgl-best { background: var(--brand-50); color: var(--brand-deep); font-weight: 600; }

/* --- DL-1061: Gegenueberstellung mit Status (Checklisten-Profile) --- */
.vgl-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.vgl-sum { display: flex; flex-wrap: wrap; gap: 6px; }

.vgl-status {
  display: inline-block; flex: none; white-space: nowrap;
  font-size: 11px; font-weight: 700; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--slate-50); color: var(--slate-600);
}
.vgl-status.ok      { background: var(--ok-fill);   color: var(--ok); }
.vgl-status.err     { background: var(--err-fill);  color: var(--err); }
.vgl-status.warn    { background: var(--warn-fill); color: var(--warn); }
.vgl-status.neutral { background: var(--slate-50);  color: var(--slate-600); }

/* Die Vorgabe ist Kontext, der Befund die Antwort - unterschiedlich gewichten. */
.vgl-row.has-status .vgl-a { color: var(--muted); }
.vgl-row.has-status .vgl-b { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.vgl-befund { color: var(--ink); }
.vgl-befund.clamp {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5;
  overflow: hidden;
}
/* Mehrere Feststellungen -> echte Bullets. line-clamp zaehlt Zeilenboxen und
   greift bei Block-Kindern (li) nicht zuverlaessig, darum hier die Hoehe kappen.
   Muss NACH .vgl-befund.clamp stehen: gleiche Spezifitaet, die letzte gewinnt. */
.vgl-liste { margin: 0; padding-left: 18px; }
.vgl-liste li { margin: 0 0 5px; }
.vgl-liste li:last-child { margin-bottom: 0; }
.vgl-liste.clamp { display: block; max-height: 7.9em; overflow: hidden; }
.vgl-mehr {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--brand);
}
.vgl-mehr:hover { color: var(--brand-dark); text-decoration: underline; }

@media (max-width: 860px) {
  .vgl-head { display: none; }
  .vgl-row { grid-template-columns: 1fr; padding: 6px 0; }
  .vgl-row > span { padding: 4px 14px; }
  .vgl-row .vgl-krit { padding-top: 10px; }
  .vgl-row .vgl-a { font-size: 13px; }
}

.pruefpunkte { border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px 14px; margin-bottom: 6px; }
.pp-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px dashed var(--line); }
.pp-row:first-child { border-top: none; }
.pp-row p { margin: 0; font-size: 14px; line-height: 1.5; min-width: 0; }
.pp-pill {
  flex: none; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--slate-50); color: var(--slate-600);
  height: fit-content; white-space: nowrap;
}
.pp-pill.pos { background: var(--warn-fill); color: var(--warn); }
.pp-pill.preis { background: var(--err-fill); color: var(--err); }
.pp-pill.guenstig { background: #ffedd5; color: #c2410c; }
.pp-lead { font-weight: 600; }
.pp-text { color: var(--muted); }
#pruef-more { color: var(--brand); margin-bottom: 14px; }

/* --- Etappe 21: Prüfpunkte als Mail-Vorlage --- */
.pruef-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.pruef-pick-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--brand);
  font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-pill);
}
.pruef-pick-toggle:hover { border-color: var(--brand-200); background: var(--bg); }
.pruef-pick-toggle.aktiv { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-deep); }

/* Checkbox-Spalte links der Pill (Auswahl-Modus) und in der Aktionsleiste.
   Ueberschreibt die globale input-Regel (width:100%), sonst riesig. */
.pruefpunkte input[type="checkbox"], .pruef-mail-bar input[type="checkbox"] {
  width: 16px; height: 16px; padding: 0; margin: 0; flex: none;
  accent-color: var(--brand); cursor: pointer;
}
.pp-row.pickable { align-items: flex-start; }
.pp-check { margin-top: 3px; }

.pruef-mail-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px;
  margin: 0 0 14px; padding: 12px 14px; background: var(--bg); border-radius: var(--r-md);
}
.pruef-all { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; }
.pruef-sel-count { font-size: 13px; color: var(--muted); }
.pruef-mail-spacer { flex: 1 1 auto; }
.pruef-mail-bar button { display: inline-flex; align-items: center; gap: 7px; }
.pruef-mail-bar button:disabled { opacity: .5; cursor: not-allowed; }
.pruef-mail-hint { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--muted); }
/* hidden-Attribut wirkt sonst nicht, weil display:flex/inline-flex es ueberschreibt */
.pruef-mail-bar[hidden], .pruef-pick-toggle[hidden] { display: none; }

.count-pill { background: var(--bg); color: var(--muted); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); }
/* E36: offene Klärungen am Tab deutlicher – rot hinterlegt (wie die Ampel-Pille). */
.count-pill-rot { background: var(--err-fill); color: var(--err); }

.beleg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.beleg-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; font-size: 13px; max-width: 100%;
}
.beleg-chip svg { flex: none; }
.beleg-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beleg-tag {
  flex: none; background: #e1f5ee; color: #085041;
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: var(--r-pill); white-space: nowrap;
}

.share-row { display: flex; gap: 10px; align-items: center; }
.share-row select, .share-row input { flex: 1; min-width: 0; }
.share-zeile { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.share-zeile:first-child { border-top: none; }

.vermerk { padding: 10px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.vermerk:first-child { border-top: none; }
.vermerk .job-meta { margin-bottom: 2px; }


/* Etappe 20: Hinweise zur 3-Monats-Aufbewahrung der Excel (Detailseite) */
.excel-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.excel-hint { font-size: 12px; color: var(--hint); }
.excel-weg { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.excel-weg[hidden] { display: none; }

/* Pruefbericht-Box: das Hauptergebnis prominent als eigene Karte (blau
   hinterlegt) mit grossem Download-Button. */
.bericht-box { display: flex; align-items: center; gap: 16px; border: 1px solid; border-radius: var(--r-lg); padding: 18px 20px; margin-bottom: 24px; }
.bericht-box[hidden] { display: none; }
.bericht-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--card); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.bericht-mark { fill: var(--brand); }
.bericht-main { flex: 1; min-width: 0; }
.bericht-titel { font-size: 16px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.bericht-sub { font-size: 13px; margin: 3px 0 0; line-height: 1.45; }
.bericht-action { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.btn-excel-lg { padding: 11px 18px; font-size: 15px; border-radius: var(--r-md); }
/* Zustandsfarben (Status-Ramps gruen/amber/rot - bewusste lokale Palette) */
.bericht-fertig { background: #eaf3de; border-color: #97c459; }
.bericht-fertig .bericht-titel { color: #27500a; } .bericht-fertig .bericht-sub { color: #3b6d11; }
.bericht-arbeit { background: #faeeda; border-color: #fac775; }
.bericht-arbeit .bericht-titel { color: #633806; } .bericht-arbeit .bericht-sub { color: #854f0b; }
.bericht-fehler { background: #fceaea; border-color: #f09595; }
.bericht-fehler .bericht-titel { color: #791f1f; } .bericht-fehler .bericht-sub { color: #a32d2d; }
/* E36: schlanke, neutrale Download-Zeile, wenn die Workflow-Leiste den Status
   schon zeigt – vermeidet das doppelte "fertig"-Signal (grüne Box + "Freigegeben"). */
.bericht-dot { width: 9px; height: 9px; border-radius: 50%; background: #ba7517; display: none; flex: 0 0 auto; }
/* Verdikt oben in der Ergebnis-Karte: gruen "Alles passt" (Normalmodus) oder
   neutral "Empfehlung: …" (Vergleich). Bei Abweichungen gar nicht. */
.detail-verdict { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: #3b6d11; margin-bottom: 14px; }
.detail-verdict[hidden] { display: none; }
.detail-verdict .vd-dot { width: 9px; height: 9px; border-radius: 50%; background: #639922; flex: 0 0 auto; }
.detail-verdict.neutral { color: var(--brand-mid); }
.detail-verdict.neutral .vd-dot { background: var(--brand); }
/* E36: "gelb / Bitte prüfen" – amberner Hinweis über den Summen. */
.detail-verdict.warn { color: var(--warn); }
.detail-verdict.warn .vd-dot { background: var(--warn); }
.bericht-arbeit .bericht-dot { display: inline-block; animation: berichtpuls 1.2s ease-in-out infinite; }
@keyframes berichtpuls { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (max-width: 640px) {
  .bericht-box { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bericht-action { align-items: stretch; width: 100%; }
  .btn-excel-lg { justify-content: center; }
}
.excel-weg svg { flex: 0 0 auto; color: var(--brand-mid); margin-top: 1px; }

/* --- Etappe 15: Dashboard (Startseite) --- */
.dash-head { margin-bottom: 22px; }
.dash-title { font-size: 23px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
.dash-sub { font-size: 14px; color: var(--muted); margin: 5px 0 0; }

.dash-block { margin-bottom: 26px; }
/* E36: Dashboard zweispaltig (Aufgaben | Letzte Prüfungen). Wrappt auf schmalen
   Viewports zu einer Spalte; ist die Aufgaben-Spalte hidden, füllt die andere. */
.dash-cols { display: flex; gap: 16px; align-items: flex-start; margin-top: 44px; margin-bottom: 26px; flex-wrap: wrap; }
.dash-col { flex: 1 1 300px; min-width: 0; margin-bottom: 0; }
.dash-blockhead { display: flex; align-items: center; margin-bottom: 12px; }
.dash-blocktitle { font-size: 16px; font-weight: 600; }
.dash-more {
  margin-left: auto; background: transparent; border: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--brand);
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px;
}
.dash-more svg { transition: transform .15s; }
.dash-more.open svg { transform: rotate(90deg); }

/* Kennzahlen (Etappe 15): drei gleichwertige weisse Karten mit blauem
   Mini-Icon. Werte fuellt loadGeldGespart aus der RPC pruefzeit_gespart. */
.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 22px;
}
/* E36: flacher – Icon-Kachel links, Label + Wert rechts. */
.metric {
  display: flex; align-items: center; gap: 11px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 11px 14px;
}
.metric .mi { width: 32px; height: 32px; border-radius: 9px; background: var(--brand-50); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.metric .mtext { min-width: 0; }
.metric .ml { font-size: 12px; color: var(--muted); }
.metric .mv { font-size: 20px; font-weight: 700; margin-top: 1px; letter-spacing: -.01em; }
/* Hervorgehobene Kennzahl (Gesparte Prüfzeit) - blau wie im Mockup */
#saved-zeit-card { background: var(--brand); border-color: var(--brand); }
#saved-zeit-card .ml, #saved-zeit-card .mv { color: #fff; }
#saved-zeit-card .mi { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px){ .metrics { grid-template-columns: 1fr; } }

/* Vorgangsliste auf dem Dashboard (Letzte Abgleiche) nutzt dieselben
   .job-Karten wie die volle Liste - nur als Flex-Spalte gruppiert. */
.liste { display: flex; flex-direction: column; }

.panel h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.panel .hint { color: var(--muted); font-size: 13px; margin: 0 0 16px; }

/* --- Dokumentzeilen im Anlage-Formular --- */
/* Etappe 7: Dateiname | Belegart-Dropdown | entfernen (Datei kommt aus der Dropzone) */
.doc-row .btn-ghost { color: var(--err); }

/* Etappe 7 (A): Dropzone fuer den Multi-Upload.
   Etappe 15: prominenter Look wie Wizard Schritt 1 - blau gestrichelt,
   hellblauer Grund, Upload-Icon und zweizeiliger Text. */
.dropzone {
  border: 2px dashed var(--brand-200);
  border-radius: var(--r-lg);
  padding: 16px 22px;
  text-align: center;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 12px;
  background: var(--brand-50);
}
/* E36: flacher – kleineres Icon, engere Abstände (Icon + Text bleiben). */
.dropzone .dz-icon { color: var(--brand); display: block; }
.dropzone .dz-icon svg { margin: 0 auto; width: 34px; height: 34px; }
.dropzone .dz-haupt { font-size: 15px; font-weight: 600; color: var(--brand-deep); margin-top: 7px; }
.dropzone .dz-haupt b { color: var(--brand); }
.dropzone .dz-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.dropzone:hover, .dropzone:focus, .dropzone.drag {
  border-color: var(--brand);
  background: var(--brand-100);
  outline: none;
}

/* --- Job-Liste --- */
/* Vorgangs-Zeilen sind weisse Karten wie im Mockup (.vorgang). */
.job { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 18px; margin-bottom: 12px; }
.job:hover { border-color: var(--brand-200); }
.job-head { display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.job-title { font-weight: 600; }
/* E36: Letzte-Prüfungen-Titel im Dashboard auf die Aufgaben-Größe (14px) bringen. */
#letzte-list .job-title { font-size: 14px; }
.job-meta { color: var(--muted); font-size: 13px; }
.badge { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
.badge.neu      { background: var(--info-fill); color: var(--info); }
.badge.in_arbeit{ background: var(--warn-fill); color: var(--warn); }
.badge.fertig   { background: var(--ok-fill); color: var(--ok); }
.badge.fehler   { background: var(--err-fill); color: var(--err); }
/* Etappe 5: Kopfzeile der Job-Liste mit Reload-Button */
.panel-head { display: flex; justify-content: space-between; align-items: center; }
.panel-head h2 { margin: 0; }
#reload-jobs { color: var(--brand); }
#reload-jobs:disabled { opacity: .5; cursor: wait; }

/* Etappe 5: Excel-Download-Button neben dem Status-Badge */
.job-actions { display: flex; align-items: center; gap: 10px; }
/* Mobil: Vorgangs-Zeile stapeln, damit der Titel die volle Breite hat und
   nicht hart umbricht. Badges/Excel/Status kommen als eigene Reihe darunter. */
@media (max-width: 640px) {
  .job-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .job-actions { flex-wrap: wrap; }
}
.btn-excel {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff; border: none; border-radius: var(--r-md);
  padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.btn-excel svg { flex: 0 0 auto; }
/* hidden muss greifen: sonst zeigt display:inline-flex den Button auch waehrend
   die Pruefung noch laeuft (kein storage_key -> btn.hidden = true). */
.btn-excel[hidden] { display: none; }
.btn-excel:hover { background: var(--brand-dark); }
.btn-excel:disabled { opacity: .6; cursor: wait; }
/* Etappe 6 / 15-Nachzug: Tarif-Kontingent als Box unten in der blauen
   Leiste (Label, Zaehler, Balken) wie im Mockup. Balkenfarbe faerbt app.js
   inline: weiss / ab 80% orange / bei 100% rot. */
.plan { border: 1px solid rgba(255,255,255,.22); border-radius: var(--r-md); padding: 11px 12px; }
.plan-label { font-size: 11px; color: var(--on-brand); }
.plan-value { font-size: 13px; font-weight: 600; margin-top: 2px; color: #fff; }
.plan-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.20); margin-top: 8px; overflow: hidden; }
.plan-bar span { display: block; height: 100%; width: 0; background: #fff; border-radius: 4px; transition: width .2s; }
/* Mobil (Leiste wird zur Zeile): kompakt, ohne Balken */

.job-docs { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); display: none; }
.job-docs.open { display: block; }
.job-docs ul { margin: 0; padding-left: 18px; font-size: 14px; }
.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* --- Etappe 8: Teilen-Anzeige + Teilen-UI --- */
.badge-share { background: #fff; border: 1px solid var(--brand); color: var(--brand); }
.badge-von   { background: var(--slate-50); color: var(--slate-600); }
.badge-vermerk { background: var(--slate-50); color: var(--slate-600); display: inline-flex; align-items: center; gap: 4px; }
.badge-vermerk svg { display: block; }
.badge-demo { background: #fff; border: 1px dashed var(--brand); color: var(--brand); }
.job-share {
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.share-item {
  background: var(--brand-50); border: 1px solid var(--brand-200); border-radius: var(--r-pill);
  padding: 2px 10px; color: var(--ink);
}
.share-remove { color: var(--err); cursor: pointer; margin-left: 6px; font-size: 12px; }
.share-select { width: auto; padding: 6px 8px; font-size: 13px; }
.job-share .share-add { color: var(--brand); border: 1px solid var(--brand); border-radius: var(--r-sm); }

/* --- Etappe 8: Akkordeon fuer aeltere Abgleiche --- */
/* E36: "Mehr laden" unter der serverseitig paginierten Prüfungsliste. */
.alle-more-row { display: flex; justify-content: center; margin-top: 16px; }
#old-jobs { margin-top: 10px; }
.job-alt { background: #fafbfc; }
#old-more {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--brand); margin-top: 4px;
}
#old-more:disabled { opacity: .5; cursor: wait; }

/* --- Etappe 9: Verwaltung (Admin-Tab) --- */
.admin-inline-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-top: 6px;
}
.admin-inline-form input, .admin-inline-form select {
  width: auto; flex: 1 1 160px; min-width: 140px;
}
.btn-inline { width: auto; margin-top: 0; flex: 0 0 auto; }
.admin-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
}
.admin-table th {
  text-align: left; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--muted);
  padding: 6px 10px; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.admin-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}
.admin-table tr:last-child td { border-bottom: none; }
.user-gesperrt td { color: var(--muted); }
.admin-actions { white-space: nowrap; text-align: right; }
.admin-actions button { margin-left: 6px; color: var(--brand); }
.admin-actions .u-toggle[data-active="1"] { color: var(--err); }
/* Tabelle auf schmalen Screens scrollbar statt gequetscht */
#admin-user-list { overflow-x: auto; }

/* --- Etappe 9b: Verwaltung als Master-Detail (Firmenliste links) --- */
/* Die Verwaltung darf breiter als der Arbeitsbereich (900px): mit
   Firmenliste + Usertabelle nebeneinander braucht sie den Platz,
   sonst scrollt die Tabelle horizontal, obwohl die Seite Luft hat. */
#admin-main { max-width: 1140px; }
.admin-layout {
  display: grid; grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px; align-items: start;
}
.admin-layout.solo { grid-template-columns: minmax(0, 1fr); }
.admin-side { margin-bottom: 0; }
.admin-detail .panel:last-child { margin-bottom: 0; }
@media (max-width: 760px) { .admin-layout { grid-template-columns: 1fr; } }

/* Anlage-Formular in der Seitenleiste, zugeklappt bis "+ Neue Firma" */
.org-form {
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: 12px; margin-bottom: 12px;
}
.org-form select { margin-top: 8px; }
.org-form .btn-primary { margin-top: 12px; }

#org-search { margin-bottom: 10px; }
.org-list { max-height: 480px; overflow-y: auto; }
.org-item { padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; border: 1px solid transparent; }
.org-item:hover { background: var(--bg); }
.org-item.aktiv { background: var(--brand-50); border-color: var(--brand-200); }
.org-item-name { font-weight: 600; font-size: 14px; }
.org-item-meta { color: var(--muted); font-size: 12px; }
.org-gesperrt { color: var(--err); font-weight: 600; }

/* Tarif-Zeile in der Firmen-Box (nur Superadmin) */
.tarif-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
.tarif-row label { margin: 0; }
.tarif-row select { width: auto; flex: 0 1 220px; padding: 6px 8px; font-size: 14px; }
.btn-danger { color: var(--err); margin-left: auto; }

/* --- Etappe 10: Auswertung (nur Superadmin) --- */
.stats-filter select { flex: 1 1 140px; }

#stats-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px; margin-top: 16px;
}
.kpi-card {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 12px; background: #fafbfc;
}
.kpi-card .kpi-wert { font-size: 22px; font-weight: 700; color: var(--brand); line-height: 1.2; }
.kpi-card .kpi-name { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ink); margin-top: 2px; }
.kpi-card .kpi-sub  { font-size: 12px; color: var(--muted); }
.kpi-card.kpi-warn .kpi-wert { color: var(--warn); }

.stats-sub { font-size: 14px; margin: 24px 0 8px; }

/* Balken-Chart: reine CSS-Balken, gruen = zaehlbar, rot = fehlgeschlagen.
   Hoehen setzt app.js inline (Prozent vom Monatsmaximum). */
.stats-chart {
  display: flex; align-items: flex-end; gap: 6px;
  border-bottom: 1px solid var(--line); padding-bottom: 4px;
}
.stats-bar {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; border-radius: var(--r-sm); padding: 2px 1px 4px;
}
.stats-bar:hover { background: var(--brand-50); }
.stats-bar.aktiv { background: var(--brand-100); }
.stats-bar-stack {
  height: 110px; width: 100%; max-width: 34px;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.stats-bar-ok     { background: var(--brand); border-radius: 0 0 2px 2px; }
.stats-bar-fehler { background: #f87171; border-radius: 3px 3px 0 0; }
.stats-bar-ok:only-child, .stats-bar-ok:first-child { border-radius: 3px 3px 2px 2px; }
.stats-bar.aktiv .stats-bar-ok { background: var(--brand-dark); }
.stats-bar-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.stats-bar-wert  { font-size: 11px; color: var(--ink); min-height: 16px; }

/* Firma ueber dem Monatslimit: dezent orange hinterlegt */
.row-ueber td { background: #fff7ed; }

#stats-orgs, #stats-users { overflow-x: auto; }

/* --- Nachtrag Etappe 10: Auslastungs-Box (laufender Monat) --- */
#ausl-suche { margin-bottom: 14px; }
.ausl-row { margin-bottom: 12px; }
.ausl-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 14px; margin-bottom: 4px; gap: 10px;
}
.ausl-chip {
  font-size: 11px; font-weight: 600; background: var(--slate-50); color: var(--slate-600);
  border-radius: var(--r-pill); padding: 1px 8px; margin-left: 4px; white-space: nowrap;
}
.ausl-pct { font-weight: 600; white-space: nowrap; }
.ausl-pct.gruen  { color: var(--ok); }    /* Ampel-Gruen, nicht Brand-Blau */
.ausl-pct.orange { color: var(--warn-strong); }
.ausl-pct.rot    { color: var(--err); }
.ausl-pct.intern { color: var(--muted); }
.ausl-track {
  height: 20px; background: #eef0f3; border-radius: var(--r-sm);
  position: relative; overflow: hidden;
}
.ausl-fill { height: 100%; border-radius: var(--r-sm); }
.ausl-fill.gruen  { background: var(--ok); } /* Ampel-Gruen, nicht Brand-Blau */
.ausl-fill.orange { background: var(--warn-strong); }
.ausl-fill.rot    { background: var(--err); }
.ausl-fill.intern {
  background: repeating-linear-gradient(45deg, #dde3e0, #dde3e0 6px, #eef0f3 6px, #eef0f3 12px);
}
.ausl-wert {
  position: absolute; left: 8px; top: 0; line-height: 20px;
  font-size: 12px; font-weight: 600; color: #fff;
}
.ausl-wert.dunkel { color: var(--ink); left: auto; }
.ausl-wert.dunkel { left: 8px; }
#ausl-mehr {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--brand); margin-top: 4px;
}
.ausl-row.gesperrt { opacity: .55; }

/* =====================================================================
   Etappe 16: Seite "Alle Abgleiche" - Status-Filter-Chips + Leer-Zustand
   ===================================================================== */
.quickcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; }
.quickcard .dropzone { margin-bottom: 0; }

.alle-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fchips { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.fchip {
  font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); color: var(--muted); background: #fff; cursor: pointer;
}
.fchip:hover { border-color: var(--brand); color: var(--brand); }
.fchip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.alle-toolbar #reload-jobs { flex: none; color: var(--brand); border: 1px solid var(--line); }

.platzhalter {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px;
}
.platzhalter .pt { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }

/* Generischer Seitenkopf (großer Titel + Kurzbeschreibung, optional eine
   Aktion rechts) wie im Mockup - auch fuer Verwaltung/Auswertung, damit
   alle Seiten gleich aufgebaut sind: Titel, Untertitel, dann weiße Box(en). */
.seiten-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.seiten-kopf .dash-sub { margin-top: 5px; }
.seiten-kopf .btn-ghost { flex: none; color: var(--brand); border: 1px solid var(--line); }
.admin-badge {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  font-size: 12px; font-weight: 600; color: var(--brand-dark); background: var(--brand-50);
  padding: 4px 10px; border-radius: var(--r-pill); margin-left: 10px;
}
.admin-badge svg { display: block; }

/* =====================================================================
   Etappe 17: Wizard "Neuer Abgleich" - Stepper, Profil-Karten, Navigation
   ===================================================================== */
.stepper { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 22px; }
.step { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; color: var(--muted); }
.step-no {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; background: #fff; border: 1px solid var(--line); color: var(--muted);
}
.step-label { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step::after { content: ""; flex: 1; height: 2px; background: var(--line); border-radius: 2px; margin-left: 4px; }
.step:last-child::after { display: none; }
.step.active .step-no { background: var(--brand); border-color: var(--brand); color: #fff; }
.step.active .step-label { color: var(--ink); }
.step.done .step-no { background: var(--brand-100); border-color: var(--brand-200); color: var(--brand); }
@media (max-width: 560px){ .step-label { display: none; } .step { flex: 0 0 auto; } .step::after { width: 24px; flex: none; } }

.wizard-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.btn-auto { width: auto; margin-top: 0; }
.btn-zurueck { color: var(--ink); border: 1px solid var(--line); background: #fff; }
.btn-zurueck:hover { background: var(--bg); }

/* Profil-Auswahl als Karten (Etappe 18 vertieft den Picker). */
/* Etappe 18: Profil-Picker im Wizard Schritt 2 (Suche + Gruppen +
   Radio-Zeilen, nach mockup-variante-2-schritt2-picker.html). Prefix pp-
   damit nichts mit der Profil-Verwaltung (Etappe 19) kollidiert. */
.pp-suche { position: relative; margin: 4px 0 18px; }
.pp-suche .pp-lupe { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hint); display: flex; }
.pp-suche input {
  width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--r-lg);
  padding: 0 42px; font-family: inherit; font-size: 14px; color: var(--ink); background: #fff;
}
.pp-suche input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,234,.15); }
.pp-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--hint); background: none; border: none; cursor: pointer; display: none; padding: 4px; }
.pp-clear.an { display: flex; }

.pp-gruppe { margin-bottom: 22px; }
.pp-gruppe:last-child { margin-bottom: 0; }
.pp-gruppe-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.pp-gic { color: var(--brand); display: flex; }
.pp-gt { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pp-anz { font-size: 12px; color: var(--hint); background: var(--bg); padding: 2px 9px; border-radius: var(--r-pill); font-weight: 500; }
.pp-neu { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--brand); display: inline-flex; align-items: center; gap: 4px; cursor: pointer; background: none; border: none; font-family: inherit; }
.pp-neu:hover { text-decoration: underline; }

.pp-liste { display: flex; flex-direction: column; gap: 10px; }
.pp-profil {
  border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 13px 15px;
  cursor: pointer; display: flex; gap: 13px; align-items: flex-start; text-align: left;
  background: #fff; font-family: inherit; width: 100%;
  transition: border-color .15s, background .15s;
}
.pp-profil:hover { border-color: var(--brand-200); background: #fafcff; }
.pp-profil.gewaehlt { border: 2px solid var(--brand); background: var(--brand-50); padding: 12px 14px; }
.pp-radio { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--line-strong); flex: 0 0 auto; margin-top: 2px; position: relative; }
.pp-profil.gewaehlt .pp-radio { border-color: var(--brand); }
.pp-profil.gewaehlt .pp-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); }
.pp-ptz { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pp-pt { font-size: 14px; font-weight: 600; color: var(--ink); }
.pp-profil.gewaehlt .pp-pt { color: var(--brand-deep); }
.pp-pd { font-size: 13px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.pp-profil.gewaehlt .pp-pd { color: var(--brand-mid); }
.pp-badge { font-size: 11px; font-weight: 600; color: var(--brand-mid); background: var(--brand-50); padding: 2px 8px; border-radius: var(--r-sm); }
/* Etappe 22: Kategorie (Abgleich/Vergleich) auf der Picker-Karte. */
.pp-kat { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--slate-50); color: var(--slate-600); }
.pp-kat.vergleich { background: var(--brand-50); color: var(--brand-deep); }
.pp-mark { background: #fef08a; color: inherit; border-radius: 3px; padding: 0 1px; }
.pp-leer { text-align: center; color: var(--muted); font-size: 14px; padding: 22px 0; }

/* Etappe 19: Profil-Verwaltung */
/* Etappe 20: Belegtypen frei eintippbar (Tag-Eingabe) statt Vorlagen-Checkboxen.
   Gewaehlte als blaue Pills mit x, freies Eingabefeld in derselben Box,
   darunter antippbare Haeufig-Vorschlaege (ghost mit +). */
/* Etappe 22: Abgleich/Vergleich-Umschalter im eigenen Profil-Formular. */
.pf-modus { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.pf-modus-opt { text-align: left; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: inherit; }
.pf-modus-opt:hover { border-color: var(--brand-200); }
.pf-modus-opt.aktiv { border-color: var(--brand); background: var(--brand-50); }
.pf-modus-t { font-size: 14px; font-weight: 600; color: var(--ink); }
.pf-modus-opt.aktiv .pf-modus-t { color: var(--brand-deep); }
.pf-modus-d { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pf-modus-opt.aktiv .pf-modus-d { color: var(--brand-mid); }

.pf-dt-box { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 8px 10px; background: #fff; }
.pf-dt-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,234,.12); }
.pf-dt-chosen { display: flex; flex-wrap: wrap; gap: 8px; }
.pf-dt-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--brand-50); color: var(--brand-deep); border: 1px solid var(--brand-200); border-radius: var(--r-pill); padding: 5px 7px 5px 12px; font-size: 13px; font-weight: 500; }
.pf-dt-chip button { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--brand-mid); border: none; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; cursor: pointer; padding: 0; }
.pf-dt-chip button:hover { background: var(--brand-100); }
.pf-dt-input { flex: 1 1 180px; min-width: 160px; width: auto; border: none; outline: none; background: transparent; margin: 0; padding: 6px 2px; font-family: inherit; font-size: 13px; color: var(--ink); }
.pf-dt-input:focus { outline: none; box-shadow: none; border: none; }
.pf-dt-vorschlag { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: -4px; }
.pf-dt-vlabel { font-size: 12px; color: var(--hint); }
.pf-dt-sugg { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 11px; font-size: 13px; color: var(--muted); background: #fff; cursor: pointer; font-family: inherit; }
.pf-dt-sugg:hover { border-color: var(--brand-200); color: var(--brand); }
.pf-dt-sugg i { font-size: 13px; color: var(--hint); }
.pf-dt-sugg:hover i { color: var(--brand); }
.pf-row { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.pf-row:first-child { border-top: none; }
.pf-row-main { flex: 1; min-width: 0; }
.pf-row-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pf-row-desc { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
.pf-row-meta { font-size: 12px; color: var(--hint); margin-top: 4px; }
.pf-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.pf-row-ic { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.pf-row-ib { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: #fff; color: var(--muted); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.pf-row-ib:hover { border-color: var(--brand-200); color: var(--brand); }
.pf-row-ib.danger { color: var(--err); }
.pf-row-ib.danger:hover { border-color: var(--err); color: var(--err); }
.pf-badge-aus { font-size: 11px; font-weight: 600; color: var(--warn); background: var(--warn-fill); padding: 2px 8px; border-radius: var(--r-sm); }

/* Redesign 06/2026: schicke Datei-Zeilen (Wizard Schritt 1+3, Detailseite),
   nach mockup-variante-2-wizard.html. */
.dateien { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.datei { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; }
.datei .dicon { color: var(--brand); flex: 0 0 auto; display: flex; }
.datei .dname { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.datei .dgr { color: var(--hint); margin-left: auto; font-size: 13px; flex: 0 0 auto; }
.datei .doc-type { flex: 0 0 auto; height: 34px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 8px; font-family: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.datei .remove-row { flex: 0 0 auto; }
.datei .beleg-tag { font-size: 11px; font-weight: 600; color: var(--brand-mid); background: var(--brand-50); padding: 2px 8px; border-radius: var(--r-sm); flex: 0 0 auto; }
/* doc-row aus Schritt 1 nutzt das Datei-Layout */
.doc-row { display: flex; align-items: center; gap: 12px; background: var(--bg); border-radius: var(--r-md); padding: 11px 14px; font-size: 14px; margin-top: 10px; }
.doc-row .dicon { color: var(--brand); flex: 0 0 auto; display: flex; }
.doc-row .doc-name { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.doc-row .doc-size { color: var(--hint); font-size: 13px; flex: 0 0 auto; }
.doc-row .doc-type { flex: 0 0 auto; width: 200px; max-width: 42vw; height: 36px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 10px; font-family: inherit; font-size: 13px; background: #fff; color: var(--ink); }
.doc-row .remove-row { flex: 0 0 auto; }
@media (max-width: 640px){
  .doc-row { flex-wrap: wrap; }
  .doc-row .doc-name { flex: 1 1 100%; order: -1; }
  .doc-row .doc-type { width: auto; flex: 1; max-width: none; }
}

/* Picker: Erstnutzer-Hinweis + Filter-Chips + Aufklapp-Button (Schritt 2) */
.pp-hinweis { display: flex; gap: 10px; align-items: flex-start; background: var(--info-fill); border: 1px solid var(--info-border); color: var(--brand-dark); border-radius: var(--r-lg); padding: 13px 15px; font-size: 13px; line-height: 1.5; margin: 2px 0 18px; }
.pp-hinweis .pp-hic { flex: 0 0 auto; display: flex; margin-top: 1px; }
.pp-filter { display: flex; gap: 9px; flex-wrap: wrap; margin: 0 0 20px; }
.pp-chip { padding: 8px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: #fff; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: all .15s; }
.pp-chip:hover { border-color: var(--brand-200); }
.pp-chip.an { background: var(--brand); border-color: var(--brand); color: #fff; }
.pp-cz { font-size: 12px; font-weight: 600; background: var(--bg); color: var(--muted); border-radius: var(--r-pill); padding: 1px 7px; }
.pp-chip.an .pp-cz { background: rgba(255,255,255,.25); color: #fff; }
.pp-mehr { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 9px; padding: 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; background: none; width: 100%; font-family: inherit; transition: background .15s, border-color .15s; }
.pp-mehr:hover { background: var(--brand-50); border-color: var(--brand-200); }

/* Schritt 3: Zusammenfassung */
.zusammenfassung { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.zf-block { padding: 16px 18px; }
.zf-block + .zf-block { border-top: 1px solid var(--line); }
.zf-kopf { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.zf-kopf .zf-ic { color: var(--brand); display: flex; }
.zf-wert { font-size: 14px; font-weight: 600; color: var(--ink); margin-top: 8px; }
.zf-desc { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 5px; }
.zf-datei { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-top: 10px; }
.zf-datei .dicon { flex: 0 0 auto; display: flex; color: var(--brand); }
.zf-datei .dgr { color: var(--hint); margin-left: auto; font-size: 13px; }

/* Detailseite: Abschnitts-Überschrift außerhalb der Box (wie Auswertung) */
.abschnitt-titel { font-size: 16px; font-weight: 600; color: var(--ink); margin: 26px 0 12px; }
.detail-kopf-back { display: inline-block; font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; margin-bottom: 14px; }
.detail-kopf-back:hover { color: var(--brand); }
.detail-kopf-titel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* (Etappe 17 Alt-Stil der Karten, fuer Rueckfall behalten) */
.profil-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 4px 0 2px; }
.profil-card {
  text-align: left; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 16px; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: 4px;
}
.profil-card:hover { border-color: var(--brand-200); }
.profil-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,234,.12); background: #f7faff; }
.profil-card .pc-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.profil-card .pc-desc { font-size: 13px; color: var(--muted); line-height: 1.45; }
.profil-desc-line { margin-top: 12px; }

/* Uebersicht in Schritt 3: Bezeichnung, Dateien, gewaehltes Profil. */
.summary { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.summary-row { display: flex; gap: 14px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 14px; }
.summary-row:first-child { border-top: none; }
.summary-key { flex: 0 0 110px; color: var(--muted); font-weight: 600; }
.summary-val { min-width: 0; }
.summary-val ul { margin: 0; padding-left: 18px; }
.summary-val li { margin: 2px 0; }
.summary-val .sv-desc { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* Etappe 24: Toast-Hinweise (Prüfung fertig / fehlgeschlagen). Unten rechts,
   gestapelt, schließen automatisch. */
.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; width: 360px; max-width: calc(100vw - 24px); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(2,7,17,.12); padding: 12px 14px; animation: toast-in .2s ease-out; }
.toast.ok { border-left-color: var(--ok); }
.toast.err { border-left-color: var(--err); }
.toast-body { flex: 1; min-width: 0; }
.toast-titel { font-size: 14px; font-weight: 600; color: var(--ink); }
.toast-text { font-size: 13px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.toast-link { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--brand); cursor: pointer; }
.toast-close { flex: 0 0 auto; background: none; border: none; color: var(--hint); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }
.toast-close:hover { color: var(--ink); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .toast-stack { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* Etappe 25: Glocke (Topbar) mit Zähler + Dropdown der letzten Fertigstellungen. */
.glocke-wrap { position: relative; display: flex; }
/* Option 4: Pille mit gefuellter Glocke + Zahl inline (kein Eck-Badge). */
.glocke { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: none; background: var(--bg); color: var(--ink); cursor: pointer; }
.glocke svg { width: 19px; height: 19px; flex: none; }
/* Hover nur auf echten Zeigegeräten: auf Touch bleibt der Hover sonst nach
   dem Tippen "kleben" und die Glocke wäre dauerhaft blau. */
@media (hover: hover) { .glocke:hover { background: var(--brand-50); color: var(--brand); } }
/* Mobil komplett ausblenden: das Dropdown verdeckt zu viel und die Glocke
   ist auf dem schmalen Topbar fehl am Platz. Der Fertig-Toast bleibt. */
@media (max-width: 760px) { .glocke-wrap { display: none; } }
.glocke-count { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1; }
.glocke-count[hidden] { display: none; }
.glocke-menu { position: absolute; right: 0; top: 46px; width: 320px; max-width: calc(100vw - 24px); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 8px 24px rgba(2,7,17,.12); padding: 8px; z-index: 100; }
.glocke-menu[hidden] { display: none; }
.glocke-kopf { font-size: 12px; font-weight: 600; color: var(--muted); padding: 6px 8px; }
.glocke-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.glocke-item { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: var(--r-sm); cursor: pointer; }
.glocke-item:hover { background: var(--bg); }
.glocke-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.glocke-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink); }
.glocke-item-meta { flex: none; font-size: 12px; color: var(--hint); }

/* Datenschutz-Hinweis (Upload-/Detail-Belege): dezente Zeile mit Schloss. */
.ds-hinweis { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.ds-hinweis svg { flex: 0 0 auto; margin-top: 1px; color: var(--hint); }
.glocke-leer { font-size: 13px; color: var(--muted); padding: 10px 8px; }

/* =====================================================================
   Etappe 26: Verwaltung neu - Firmen-Tabelle + Detail mit Tabs.
   ===================================================================== */

/* Listenkopf: Suche links (fuellt), "Neue Firma" rechts (Auto-Breite, da
   .btn-primary global width:100% setzt). */
.admin-listkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.admin-listkopf #org-search { flex: 1 1 auto; margin: 0; }
.admin-listkopf .btn-primary { flex: none; width: auto; margin: 0; }

/* Gemeinsame Anlage-Form (Neue Firma / User anlegen): zugeklappt bis Klick.
   .anlage-form[hidden] noetig, weil display:flex sonst das hidden-Attribut
   aushebelt (Autor-CSS schlaegt das Browser-Default [hidden]{display:none}). */
.anlage-form {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-sm);
  padding: 14px; margin-bottom: 12px;
}
.anlage-form[hidden] { display: none; }
.anlage-form input, .anlage-form select { width: auto; flex: 1 1 160px; min-width: 140px; margin: 0; }
.anlage-form .btn-primary { flex: 0 0 auto; width: auto; margin: 0; }

/* Firmen-Tabelle */
.admin-tabellen-panel { padding: 6px 6px; }
.admin-table-wrap { overflow-x: auto; }
.org-table td { white-space: nowrap; cursor: pointer; }
.org-table td.firm-cell { white-space: normal; }
.org-table tbody tr:hover { background: var(--brand-50); }
.org-firmname { font-weight: 600; }
.org-firmbranche { font-size: 12px; color: var(--hint); }

/* Auslastungsbalken in der Tabellenzelle (Ampel wie auf der Auswertung). */
.tbar-cell { display: flex; align-items: center; gap: 10px; }
.tbar { width: 90px; height: 6px; border-radius: var(--r-pill); background: #eef0f3; overflow: hidden; flex: none; }
.tbar > i { display: block; height: 100%; border-radius: var(--r-pill); }
.tbar > i.gruen  { background: var(--ok); }
.tbar > i.orange { background: var(--warn-strong); }
.tbar > i.rot    { background: var(--err); }
.tbar-num { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Tarif-Pills in der Tabelle */
.badge.badge-tarif { background: var(--brand-50); color: var(--brand-deep); }
.badge.badge-test  { background: var(--warn-fill); color: var(--warn); }

/* Zurueck-Link ueber dem Detail */
.link-zurueck {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; border-radius: 0; padding: 0; margin-bottom: 14px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--brand-mid); cursor: pointer;
}
.link-zurueck:hover { color: var(--brand); }
.link-zurueck[hidden] { display: none; }

/* Firmen-Kopf: Name + Status + Sperren, dann Kennzahlen, dann Tabs. */
.firm-kopf-top { display: flex; align-items: center; gap: 10px; }
.firm-kopf-top h2 { margin: 0; font-size: 19px; }
.firm-kopf-top .btn-danger { margin-left: auto; }
.firm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.firm-kpi { background: var(--slate-50); border-radius: var(--r-md); padding: 14px 16px; }
.firm-kpi b { display: block; font-size: 24px; font-weight: 700; line-height: 1.15; }
.firm-kpi b.kpi-tarif-wert { font-size: 20px; }
.firm-kpi span { font-size: 13px; color: var(--muted); }
@media (max-width: 620px) { .firm-kpis { grid-template-columns: 1fr; } }

/* Tabs */
.admin-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--line); margin-top: 18px; }
.admin-tab {
  background: none; border: none; border-radius: 0; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--muted); padding: 9px 2px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
.tabpanel { display: none; margin-top: 18px; }
.tabpanel.on { display: block; }

/* Kopfzeile im Nutzer-Tab: Titel links, Aktionen rechts. Buttons mit
   Auto-Breite (sonst greift global .btn-primary width:100%) und ohne Umbruch. */
.panel-head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.panel-head-actions .btn-primary { width: auto; margin: 0; white-space: nowrap; }
.panel-head-actions .btn-ghost { white-space: nowrap; }
#admin-reload { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Nutzer als Avatar-Zeilen */
.urow { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.urow:first-child { border-top: none; }
.urow.gesperrt { opacity: .6; }
.uav {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand-mid); font-weight: 600; font-size: 13px;
}
.uinfo { flex: 1; min-width: 0; }
.uname { font-weight: 600; font-size: 14px; }
.umeta { font-size: 12px; color: var(--hint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolepill { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); background: var(--slate-50); color: var(--slate-600); white-space: nowrap; }
.rolepill.admin { background: var(--brand-50); color: var(--brand-deep); }
.uactions { display: flex; gap: 6px; flex: none; }
.uactions button { color: var(--brand); }
.uactions .u-toggle[data-active="1"] { color: var(--err); }
@media (max-width: 620px) {
  .urow { flex-wrap: wrap; }
  .uinfo { flex: 1 1 100%; order: -1; }
}

/* Aktivitaets-Tab */
.aktiv-summary { margin-bottom: 14px; }
.aktiv-monat { margin: 0 0 4px; font-weight: 600; }
.aktiv-zahl { margin: 0; color: var(--muted); }

/* Tarif-Tab: Plan-Karten + Branche-Chips (Variante 4). */
.tb-block { margin-bottom: 22px; }
.tb-lab { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--hint); margin-bottom: 10px; }
/* Eigene Klassen (NICHT .plan - das ist die Kontingent-Box in der Sidebar). */
.tarif-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tarif-plan {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; cursor: pointer; font-family: inherit;
}
.tarif-plan:hover { border-color: var(--brand-200); }
.tarif-plan.on { border: 2px solid var(--brand); background: var(--brand-50); padding: 13px 15px; }
.tarif-plan-n { font-size: 15px; font-weight: 700; color: var(--ink); }
.tarif-plan-l { font-size: 13px; color: var(--muted); }
.tarif-plan-p { font-size: 13px; font-weight: 600; color: var(--brand-deep); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tb-chip {
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: #fff;
  padding: 8px 16px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; font-family: inherit;
}
.tb-chip:hover { border-color: var(--brand-200); }
.tb-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Etappe 35: Modul-Schalter im Tarif-Tab (Kollaboration/Daten) + Paket-Schnellwahl. */
.paket-quick { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.paket-quick-lab { font-size: 13px; color: var(--muted); margin-right: 2px; }
.modul-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .modul-row { grid-template-columns: 1fr; } }
.modul-switch { display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; cursor: pointer; background: #fff; }
.modul-switch:hover { border-color: var(--brand-200); }
.modul-switch:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-50); padding: 11px 13px; }
.modul-switch input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--brand); flex: none; }
.modul-switch-text { display: flex; flex-direction: column; gap: 2px; }
.modul-switch-n { font-size: 14px; font-weight: 700; color: var(--ink); }
.modul-switch-d { font-size: 12px; color: var(--muted); }
.tb-foot { display: flex; align-items: center; justify-content: flex-end; gap: 14px; margin-top: 18px; }
.tb-foot .btn-primary { width: auto; margin: 0; }
.tb-foot .btn-primary[disabled] { background: var(--brand-100); color: var(--brand-200); cursor: default; }

/* Org-Admin "Tarif"-Seite (Etappe 27). Karten teilen sich .tarif-plan mit
   dem Superadmin-Tab; hier markiert .cur den aktuellen, .sel den Wunsch. */
.tarif-status-panel { margin-bottom: 14px; }
.tarif-status-top { display: flex; align-items: baseline; gap: 10px; }
.tarif-aktuell-wert { font-size: 22px; font-weight: 700; }
.tarif-use { font-size: 13px; color: var(--muted); margin: 10px 0 8px; }
.tarif-bar { height: 8px; border-radius: var(--r-pill); background: #eef0f3; overflow: hidden; }
.tarif-bar[hidden] { display: none; }
.tarif-bar-fill { display: block; height: 100%; width: 0; border-radius: var(--r-pill); transition: width .2s; }
.tarif-bar-fill.gruen  { background: var(--ok); }
.tarif-bar-fill.orange { background: var(--warn-strong); }
.tarif-bar-fill.rot    { background: var(--err); }
.tarif-plan { position: relative; overflow: hidden; }
/* Aktueller Tarif: ruhiger heller Rand (informativ, nicht klickbar). */
.tarif-plan.cur { border: 2px solid var(--brand-200); background: var(--brand-50); padding: 13px 15px; cursor: default; }
.tarif-plan.cur:hover { border-color: var(--brand-200); }
/* Ausgewaehlter Wunsch-Tarif: kraeftiger Rand + blaue Kopfleiste (Variante 3). */
.tarif-plan.sel { border: 2px solid var(--brand); background: var(--brand-50); padding: 27px 15px 13px; }
.tarif-plan-tag { position: absolute; top: 10px; right: 12px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-mid); }
.tarif-plan-bar { position: absolute; top: 0; left: 0; right: 0; height: 22px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; }
.tarif-foot-note { font-size: 12px; color: var(--hint); margin-right: auto; }

/* =====================================================================
   Etappe 28: E-Mail-Eingang + Sichtbarkeit
   ===================================================================== */

/* "NEU"-Pille: Sidebar-Punkt (rechtsbuendig) und Abschnitts-Titel. */
.nav-neu {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-50); color: var(--brand); border-radius: var(--r-pill); padding: 1px 7px;
}
.nav-item .nav-neu { margin-left: auto; background: rgba(255,255,255,.22); color: #fff; }
.dash-title .nav-neu, .abschnitt-titel .nav-neu { vertical-align: middle; margin-left: 8px; }

/* Status-Badge "Eingang" + Mail-/privat-Badges (neutrale Palette). */
.badge.eingang { background: var(--slate-50); color: var(--slate-600); }
.badge-mail   { background: var(--brand-50); color: var(--brand-deep); display: inline-flex; align-items: center; gap: 4px; }
.badge-privat { background: #fff; border: 1px solid var(--line-strong); color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.badge-privat svg { display: block; }

/* Pruefbericht-Box im Zustand "Eingang" (neutral, kein Puls). */
.bericht-eingang { background: var(--slate-50); border-color: var(--line-strong); }
.bericht-eingang .bericht-titel { color: var(--ink); }
.bericht-eingang .bericht-sub { color: var(--muted); }

/* Toggle-Schalter (Sichtbarkeit + Eingang an/aus). */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; background: var(--line-strong); border-radius: var(--r-pill); transition: background .15s; }
.switch .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.switch input:checked + .slider { background: var(--brand); }
.switch input:checked + .slider::before { transform: translateX(18px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Monospace-Adresse (Eingangs-Adresse). */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; background: var(--slate-50); color: var(--ink); padding: 5px 10px; border-radius: var(--r-sm); }

/* E-Mail-Eingang-Seite. */
.mail-adr-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.mail-aktiv-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.feld-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.mail-allow { width: 100%; min-height: 70px; resize: vertical; font-family: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.mail-allow-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.mail-assign { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 13px; font-weight: 500; max-width: 180px; }

/* Sichtbarkeit-Zeile (Detailseite). */
.sicht-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* "Prüfung starten"-Panel (Eingang-Job). */
.start-profil { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); font-size: 14px; font-weight: 500; }
#detail-start-btn { width: auto; margin-top: 14px; }
#detail-start-files { font-size: 13px; }

/* --- E-Mail-Eingang-Seite (V1): Posteingang oben, Adresse im Kopf --- */

/* Kopfzeile: Titel links, Adress-Pille + Zahnrad rechts. */
.mail-kopf { align-items: center; flex-wrap: wrap; gap: 10px; }
.mail-kopf-rechts { display: flex; align-items: center; gap: 10px; flex: none; }

/* Schmale Adress-Pille im hellen Blau (volle Adresse, kein Abschneiden). */
.mail-adr-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-pill); padding: 5px 6px 5px 12px; color: var(--brand-mid); }
.mail-adr-pill .mono { background: transparent; padding: 0; font-size: 12px; color: var(--brand-deep); white-space: nowrap; }
.mail-adr-copy { background: transparent; border: none; color: var(--brand); padding: 5px 7px; border-radius: var(--r-pill); display: inline-flex; }
.mail-adr-copy:hover { background: var(--brand-100); }

/* Zahnrad + Einstellungs-Popover. */
.mail-settings-wrap { position: relative; flex: none; }
.mail-gear { background: transparent; border: 1px solid var(--line-strong); border-radius: var(--r-md); color: var(--muted); padding: 7px 9px; display: inline-flex; }
.mail-gear:hover, .mail-gear[aria-expanded="true"] { border-color: var(--brand-200); color: var(--brand); background: var(--brand-50); }
.mail-settings-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; max-width: 84vw; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); padding: 14px 16px; z-index: 40; box-shadow: 0 10px 28px rgba(2,7,17,.12); }
.mail-pop-titel { font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.mail-allow-wrap { margin-top: 12px; }

/* Posteingang im Mail-Tool-Look. overflow sichtbar, damit das Zuweisen-Menü
   (Kebab) nicht von der Karte abgeschnitten wird. */
.mail-inbox { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.mail-inbox-head { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.mail-inbox-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mail-inbox-titel { font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.mail-inbox-count { font-size: 11px; font-weight: 600; background: var(--brand-50); color: var(--brand); padding: 1px 8px; border-radius: var(--r-pill); }
/* Leerer Eingang: horizontal bündig zu Kopf (.mail-inbox-head) und Zeilen (.mail-row). */
#mail-eingang-list .empty { padding: 16px; }
.mail-aktiv-ind { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); }
.mail-aktiv-ind.aus { color: var(--muted); }
.mail-aktiv-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Eine Eingang-Zeile (wie eine Mail). */
.mail-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.mail-row:last-child { border-bottom: none; }
.mail-row:hover { background: var(--bg); }
.mail-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-50); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: 0 0 auto; }
.mail-row-main { min-width: 0; flex: 1; }
.mail-row-titel { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-row-sub { font-size: 12px; color: var(--muted); }
.mail-chip { font-size: 11px; color: var(--slate-600); background: var(--slate-50); padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.mail-time { font-size: 12px; color: var(--hint); white-space: nowrap; min-width: 56px; text-align: right; }
.mail-row-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; position: relative; }
.mail-uebernehmen { background: var(--brand); color: #fff; border: none; border-radius: var(--r-md); font-size: 13px; font-weight: 500; padding: 7px 13px; }
.mail-uebernehmen:hover { background: var(--brand-dark); }
.mail-kebab { background: transparent; border: 1px solid var(--line); border-radius: var(--r-md); color: var(--muted); padding: 7px 8px; display: inline-flex; }
.mail-kebab:hover { border-color: var(--brand-200); color: var(--brand); }
.mail-assign-menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 6px; min-width: 210px; z-index: 30; box-shadow: 0 10px 28px rgba(2,7,17,.12); }
.mam-titel { font-size: 12px; color: var(--hint); padding: 4px 8px; }
.mail-assign-opt { display: block; width: 100%; text-align: left; background: transparent; border: none; padding: 7px 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink); }
.mail-assign-opt:hover { background: var(--brand-50); color: var(--brand-deep); }
@media (max-width: 640px) {
  .mail-kopf { align-items: flex-start; }
  .mail-row { flex-wrap: wrap; }
  .mail-row-actions { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   Etappe 29/30: Lieferanten-Gedächtnis + Preislisten. Nutzt durchweg die
   bestehenden Tokens und Komponenten (.job, .panel, .kpi, .admin-table,
   .msg.info, .dropzone, .platzhalter). Hier nur die wenigen Layout-Helfer,
   die es noch nicht gab.
   ===================================================================== */

/* .seiten-kopf ist bereits flex/space-between – der Aktions-Button rechts
   (Preislisten: "+ importieren") sitzt also ohne Zusatzregel korrekt. */

/* Zeile mit einer rechtsbündigen Aktion (Preislisten-Tab im Lieferant-Detail) */
.blockkopf-zeile { display: flex; justify-content: flex-end; margin-bottom: 12px; }

/* Listenkopf-Import: drei Felder nebeneinander, auf schmal untereinander */
.pl-kopf-row { display: grid; grid-template-columns: 1fr 1fr 120px; gap: 12px; }
.pl-kopf-row label { display: block; }
.pl-kopf-row input { width: 100%; }
@media (max-width: 640px) { .pl-kopf-row { grid-template-columns: 1fr; } }

/* Vorschau-Tabelle des Imports: horizontal scrollbar bei vielen Spalten */
.pl-table-wrap { overflow-x: auto; margin-top: 4px; }
.pl-table { min-width: 720px; }
.pl-table th.num, .pl-table td.num { text-align: right; white-space: nowrap; }
.pl-table td { font-size: 13px; }
/* Gelbe Zeile = checkdat markiert sie zur Prüfung statt zu raten */
.pl-table tr.tr-warn td { background: var(--warn-fill); color: var(--warn); }
.pl-table tr.tr-warn td:first-child { border-left: 3px solid var(--warn-strong); }

/* Neutrales Status-Badge (Preislisten: abgelaufen/ersetzt) */
.badge.grau { background: var(--slate-50); color: var(--slate-600); }

/* Klickbarer Lieferant in der Vorgangs-Meta -> Lieferanten-Profil */
.meta-lief-link { color: var(--brand); text-decoration: none; font-weight: 600; }
.meta-lief-link:hover { text-decoration: underline; }

/* Rabattgruppen-Chips im Import-Listenkopf */
.pl-gruppen-liste { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pl-gruppe-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-deep); }
/* Staffel-Markierung in der Vorschau */
.pl-staffel-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: var(--r-pill); background: var(--slate-50); color: var(--slate-600); }

/* Preislisten-Übersicht: 4 Kennzahl-Karten responsiv (statt fixe 3 Spalten) */
#pl-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }

/* Preislisten-Toolbar (Suche + Lieferant-Filter bzw. Umschalter + Suche) */
.pl-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.pl-toolbar input[type="search"] { flex: 1; min-width: 160px; }
.pl-toolbar .fchips { flex: 1; }
.pl-toolbar #pl-lief-filter { min-width: 180px; }
/* Pager unter der Vorschau-Tabelle */
.pl-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; font-size: 13px; color: var(--muted); }
.pl-pager-ctrl { display: flex; gap: 8px; align-items: center; }
.pl-pager-seite { color: var(--hint); }

/* =====================================================================
   Etappe 32: Prüf- und Freigabe-Workflow, Klärungen, Verlauf
   ===================================================================== */
/* E36 (Entwurf 2): Workflow im Kopf, durch Trennlinie abgesetzt. */
.kopf-wf { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.kopf-wf[hidden] { display: none; }
/* E36 (Entwurf C): schlanker Inline-Stepper – alle Schritte in EINER Zeile,
   kleiner Kreis + Label nebeneinander, mit › getrennt. */
.wf-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.wfi-step { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; color: var(--hint); }
.wfi-ic { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.wfi-ic-todo { background: var(--line); }
.wfi-ic-done { background: var(--ok-fill); color: var(--ok); }
.wfi-ic-ok { background: var(--ok); color: #fff; }
.wfi-ic-err { background: var(--err); color: #fff; }
.wfi-ic-cur { background: var(--brand); color: #fff; }
.wfi-ic-cur-eingang { background: var(--slate-600); color: #fff; }
.wfi-ic-cur-klaerung { background: var(--warn); color: #fff; }
.wfi-done { color: var(--muted); }
.wfi-ok { color: var(--ok); font-weight: 500; }
.wfi-err { color: var(--err); font-weight: 500; }
.wfi-cur { color: var(--brand-deep); font-weight: 500; }
.wfi-cur-eingang { color: var(--slate-600); font-weight: 500; }
.wfi-cur-klaerung { color: var(--warn); font-weight: 500; }
.wfi-sep { color: var(--line-strong); font-size: 12px; }
.wf-ic { flex: 0 0 auto; }
.wf-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#wf-msg { flex-basis: 100%; margin-top: 0; }
.wf-btn { font-size: 13px; padding: 6px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.wf-btn:hover { border-color: var(--brand-200); }
.wf-btn-ok { border-color: var(--ok); color: var(--ok); background: var(--ok-fill); }
.wf-btn-err { border-color: var(--err); color: var(--err); }
.wf-btn-warn { border-color: var(--warn-strong); color: var(--warn); }
/* E36 (Entwurf C): Zuständig als Avatar, sekundäre Statuswechsel im "⋯"-Menü. */
.wf-av { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--brand-50); color: var(--brand); font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; }
.wf-av.leer { background: var(--line); color: var(--muted); }
.wf-av svg { width: 16px; height: 16px; }
.wf-more { padding: 6px 8px; color: var(--muted); }
.wf-menu-pop { padding: 4px; }
.wf-menu-item { width: 100%; border: none; background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.wf-menu-item:hover { background: var(--brand-50); }
.wf-menu-item.err { color: var(--err); }
.wf-menu-item.err:hover { background: var(--err-fill); }

/* Klärungen: Filter + kollabierbare Zeilen (voller Titel, klare Buttons) */
.klaer-filter { display: flex; gap: 6px; margin-bottom: 12px; }
.klaer-chip { font-size: 12px; padding: 3px 11px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.klaer-chip.on { background: var(--brand-50); color: var(--brand-deep); border-color: var(--brand-200); font-weight: 600; }
.klaer-row { border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 8px; }
.klaer-row.offen { border-color: var(--line-strong); }
.klaer-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; cursor: pointer; }
.kdot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: 6px; }
.kdot-offen { background: var(--warn-strong); }
.kdot-erledigt { background: var(--ok); }
.klaer-htext { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.klaer-row.erledigt .klaer-htext { font-weight: 400; color: var(--muted); }
.klaer-head .badge { flex: 0 0 auto; margin-top: 2px; }
.klaer-chev { color: var(--hint); display: inline-flex; flex: 0 0 auto; margin-top: 3px; transition: transform .15s; }
.klaer-row.open .klaer-chev { transform: rotate(180deg); }
.mini-av { width: 20px; height: 20px; border-radius: 50%; background: var(--brand-50); color: var(--brand-deep); font-size: 9px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.klaer-detail { padding: 0 13px 13px; border-top: 1px solid var(--line); }
.klaer-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.klaer-tools { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
/* Einheitliche Tool-Buttons (Variante C): gleiche Höhe, kein natives Select */
.klaer-btn { height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); cursor: pointer; user-select: none; }
.klaer-btn:hover { border-color: var(--brand-200); }
.klaer-box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #fff; }
.klaer-toggle.on .klaer-box { background: var(--ok); border-color: var(--ok); }
/* E36: "Erledigt" als klare Aktion statt Checkbox-Optik. Offen -> Primär (gefüllt),
   erledigt -> Ghost "Wieder öffnen" – gleiches Muster wie die Workflow-Leiste. */
.klaer-erledigt.primary { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.klaer-erledigt.primary:hover { background: #126c32; border-color: #126c32; }
.klaer-erledigt.on { color: var(--muted); }
.klaer-erledigt.on:hover { border-color: var(--brand-200); color: var(--ink); }
.klaer-del-btn { color: var(--err); border-color: var(--err); }
.klaer-del-btn:hover { border-color: var(--err); background: var(--err-fill); }
/* Zuständig-Auswahl: eigenes Popover statt nativem Select */
.assign-pop { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(2, 7, 17, .14); max-height: 240px; overflow: auto; padding: 4px; min-width: 180px; }
.assign-item { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink); cursor: pointer; }
.assign-item:hover, .assign-item.on { background: var(--brand-50); }
.klaer-komm-list { margin-bottom: 4px; }
.klaer-komm { font-size: 13px; padding: 7px 0; border-top: 1px solid var(--line); line-height: 1.5; }
.klaer-komm-row { display: flex; gap: 8px; margin-top: 10px; }
.klaer-komm-row input { flex: 1; }
.klaer-komm-add { font-size: 13px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--brand-200); background: var(--brand-50); color: var(--brand-deep); cursor: pointer; flex: 0 0 auto; }
.klaer-add { margin-top: 12px; }
.klaer-add-toggle { font-size: 13px; color: var(--brand); background: none; border: none; cursor: pointer; padding: 4px 0; }
.klaer-form { margin-top: 10px; }
.klaer-form #klaer-aus-pp { width: 100%; font-size: 13px; }
.mention { color: var(--brand); font-weight: 500; }
/* @-Erwähnung: Autocomplete-Dropdown */
.mention-ac { position: absolute; z-index: 60; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md); box-shadow: 0 8px 28px rgba(2, 7, 17, .14); max-height: 220px; overflow: auto; min-width: 180px; padding: 4px; }
.mention-ac-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; color: var(--ink); cursor: pointer; }
.mention-ac-item.active, .mention-ac-item:hover { background: var(--brand-50); }

/* Verlauf / Audit-Trail */
.verlauf-row { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; }
.verlauf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hint); margin-top: 5px; flex: 0 0 auto; }
.verlauf-dot.v-status { background: var(--brand); }
.verlauf-dot.v-zugewiesen { background: var(--brand-mid); }
.verlauf-dot.v-klaerung_neu { background: var(--warn-strong); }
.verlauf-dot.v-klaerung_status { background: var(--ok); }
.verlauf-text { font-size: 13px; color: var(--ink); }
.verlauf-zeit { font-size: 11px; color: var(--hint); margin-top: 1px; }

/* Workflow-Status in der Prüfungsliste (Variante D, nur Superadmin) */
.job.wf-eingang   { border-left: 3px solid var(--hint); }
.job.wf-pruefung  { border-left: 3px solid var(--brand); }
.job.wf-klaerung  { border-left: 3px solid var(--warn-gelb); }
.job.wf-frei      { border-left: 3px solid var(--ok); }
.job.wf-abgelehnt { border-left: 3px solid var(--err); }
/* E36: überfällige Aufgabe deutlich – roter Links-Akzent + zarte rote Fläche. */
.auf-job.auf-ueber { border-left: 3px solid var(--err); background: var(--err-fill); }
.wf-pill { font-size: 12px; padding: 3px 10px; border-radius: var(--r-md); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 500; }
.wf-pill-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.wf-pill-eingang     { background: var(--slate-50); color: var(--slate-600); }
.wf-pill-in_pruefung { background: var(--brand-50); color: var(--brand-deep); }
.wf-pill-klaerung    { background: var(--warn-fill); color: var(--warn); }
.wf-pill-freigegeben { background: var(--ok-fill); color: var(--ok); }
.wf-pill-abgelehnt   { background: var(--err-fill); color: var(--err); }
.badge-klaer { background: var(--warn-fill); color: var(--warn); display: inline-flex; align-items: center; gap: 3px; }
.job-zust { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); white-space: nowrap; }

/* =====================================================================
   Etappe 34: Projekt-Akte (Liste, Akte-Detail, Vorgangs-Zuordnung).
   Nutzt die bestehenden Bausteine (.panel, .kpi-grid, .admin-tabs,
   .liste, .verlauf-*); hier nur das Akten-Spezifische.
   ===================================================================== */

/* Formular-Felder (Anlegen/Bearbeiten). .feld kapselt Label+Eingabe. */
.feld { margin-bottom: 14px; }
.feld:last-child { margin-bottom: 0; }
.feld-zeile { display: flex; gap: 14px; }
.feld-zeile .feld { flex: 1; margin-bottom: 14px; }
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 14px;
  background: #fff;
  resize: vertical;
}
textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
@media (max-width: 600px) { .feld-zeile { flex-direction: column; gap: 0; } }

/* Variante A: Vorgangs-Detailkopf – Titelzeile mit Ampel + Meta als Chips. */
.detail-titelzeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.dchip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; padding: 4px 10px;
  border-radius: var(--r-pill); background: #fff;
  border: 1px solid var(--line-strong); color: var(--muted);
}
button.dchip { font-family: inherit; }
.dchip-link { color: var(--brand); cursor: pointer; }
.dchip-link:hover { border-color: var(--brand); }
.dchip-add { color: var(--brand); background: transparent; border-style: dashed; cursor: pointer; }
.dchip-add:hover { background: var(--brand-50); }
/* E36 (Entwurf 2): Prüfbericht-Download als Pill neben den Metadaten – pill-förmig
   wie die Info-Chips, aber leicht gefüllt, damit sie als Aktion erkennbar ist. */
.dchip-dl { color: var(--brand); background: var(--brand-50); border-color: transparent; cursor: pointer; }
.dchip-dl:hover { background: var(--brand-100, var(--brand-50)); border-color: var(--brand); }
.dchip svg { flex: none; }

/* E36 (Entwurf 2): Kopf-Zone als sichtbare Karte, klar abgegrenzt von Tabs/Inhalt. */
.detail-kopfzone { margin-bottom: 18px; }
.detail-kopf-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; }

/* Projekt-Zuordnung: Popover, das der Projekt-Chip öffnet (positioniert relativ
   zur Kopf-Karte, siehe .detail-kopf-card { position: relative }). */
.dproj-pop {
  position: absolute; z-index: 30; top: 0; left: 0;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 7px; width: 280px; max-width: 90vw;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
}
/* display:flex überschreibt sonst das hidden-Attribut -> explizit ausblenden. */
.dproj-pop[hidden] { display: none; }
.dproj-search { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 5px 9px; }
.dproj-search svg { flex: 0 0 auto; color: var(--hint); }
.dproj-search input { flex: 1; border: none; background: transparent; font-size: 13px; padding: 2px 0; outline: none; }
.dproj-list { display: flex; flex-direction: column; gap: 1px; max-height: 220px; overflow-y: auto; }
.dproj-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; font-weight: 400; font-family: inherit; text-align: left;
  background: transparent; border: none; border-radius: var(--r-sm); padding: 7px 10px;
  color: var(--ink); cursor: pointer;
}
.dproj-item:hover { background: var(--slate-50); }
.dproj-item.on { background: var(--brand-50); color: var(--brand-deep); }
.dproj-item svg { flex: 0 0 auto; color: var(--brand); }
.dproj-tag { font-size: 11px; color: var(--hint); }
.dproj-empty { font-size: 13px; color: var(--muted); padding: 8px 10px; }
.dproj-foot { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 4px; }
.dproj-foot[hidden] { display: none; }
.dproj-open, .dproj-remove {
  display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 400;
  font-family: inherit; text-align: left; background: transparent; border: none;
  border-radius: var(--r-sm); padding: 7px 10px; cursor: pointer;
}
.dproj-open { color: var(--brand); text-decoration: none; }
.dproj-open:hover { background: var(--slate-50); }
.dproj-remove { color: var(--err); }
.dproj-remove:hover { background: var(--err-fill); }
.dproj-open svg, .dproj-remove svg { flex: 0 0 auto; }

/* Verlauf-Punkt für die Projektzuordnung + Vorgangs-Kontext in der Akte. */
.verlauf-dot.v-projekt { background: var(--brand); }
.verlauf-vorgang a { color: var(--brand); text-decoration: none; }
.verlauf-vorgang a:hover { text-decoration: underline; }

/* Projektliste-Toolbar: Suchfeld rechts neben den Filter-Chips (E34). */
.alle-toolbar .proj-suche { flex: none; width: 260px; max-width: 50%; }
@media (max-width: 600px) { .alle-toolbar .proj-suche { width: 100%; max-width: none; } }

/* =====================================================================
   Etappe 32c: Aufgaben (Bereich + Dashboard-Box) + Fälligkeit.
   ===================================================================== */
/* Fälligkeits-Badge (auch an Klärungs-Karten genutzt). */
.faellig-badge { flex: 0 0 auto; font-size: 11px; font-weight: 500; padding: 3px 9px; border-radius: var(--r-pill); background: var(--slate-50); color: var(--muted); white-space: nowrap; }
.faellig-badge.ueber { background: var(--err-fill); color: var(--err); }

/* Aufgaben-Item = .job-Karte (gleiches Look & Feel + Hover wie Prüfungsliste).
   .job liefert bg/border/radius/margin/hover; hier nur die inneren Anpassungen. */
.auf-job .job-head { gap: 12px; }
.auf-jobmain { flex: 1; min-width: 0; }
.auf-jobtitle { font-weight: 600; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auf-job .job-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.auf-tag { flex: 0 0 auto; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: var(--r-md); }
.auf-tag-klaer { background: var(--warn-fill); color: var(--warn); }
.auf-tag-pruef { background: var(--brand-50); color: var(--brand-deep); }

/* Team: Kopf je MA als .job-Karte; aufgeklappt die Aufgaben eingerückt. */
.auf-member { margin-bottom: 12px; }
.auf-memberhead { margin-bottom: 0; cursor: pointer; }
.auf-memberhead.auf-leer { cursor: default; }
.auf-headrow { display: flex; align-items: center; gap: 10px; }
.auf-av { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-50); color: var(--brand-deep); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.auf-av-none { background: var(--slate-50); color: var(--muted); }
.auf-name { font-size: 14px; font-weight: 500; flex: 1; }
.auf-count { font-size: 12px; color: var(--muted); white-space: nowrap; }
.auf-erledigt { font-size: 12px; color: var(--ok); white-space: nowrap; }
.auf-chev { color: var(--hint); display: inline-flex; }
.auf-chev.open { transform: rotate(180deg); }
.auf-memberitems { margin: 8px 0 0 18px; }
.auf-memberitems .auf-job { margin-bottom: 8px; }

/* Klärungs-Karte: Inline-Fälligkeitsdatum in der Tools-Zeile. */
/* margin:0 hebt die globale label-Regel (margin:14px 0 6px) auf -> bündig. */
.klaer-faellig-wrap { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.klaer-faellig-edit { border: none; background: transparent; font-size: 12px; font-family: inherit; color: var(--ink); padding: 0; width: 118px; cursor: pointer; }
.klaer-faellig-edit:focus { outline: none; }
/* Fälligkeitsfeld im Anlege-Formular. */
.klaer-faellig-input { width: 150px; flex: 0 0 auto; }

/* Schnelles Umbenennen direkt am Titel (Stift) – Prüfungs-Detailseite. */
.title-rename-btn { background: transparent; border: none; padding: 4px; border-radius: var(--r-sm); color: var(--muted); cursor: pointer; display: inline-flex; line-height: 0; }
.title-rename-btn:hover { color: var(--brand); background: var(--brand-50); }
.title-edit { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }