/* TICKET 73a (21.09.2026): DIE SEITE SAGT DEM BROWSER, WELCHE MODI SIE KANN.
   Unsere Palette folgt seit jeher `prefers-color-scheme` -- dem BROWSER haben
   wir es nie gesagt. Alles, was er selbst malt, blieb deshalb hell: die
   aufgeklappte Optionsliste eines `<select>` (der gemeldete Fall auf
   „Projekte"), Bildlaufleisten, der Datumswaehler. `light dark` statt `dark`,
   weil beide Moden gelten sollen und der Mensch entscheidet. */
:root {
  color-scheme: light dark;
  --bg: #f4f6f9;
  --card: #ffffff;
  --ink: #1c2330;
  --muted: #6b7688;
  --line: #e3e8ef;
  --accent: #2f6bff;
  --accent-ink: #ffffff;
  --badge: #eef2ff;
  --badge-ink: #2f4fb0;
  --warn-bg: #fff6e6; --warn-ink: #8a5a00;
  --err-bg: #fdecec; --err-ink: #9b1c1c;
  --dot: #22c55e;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10141c;
    --card: #171d28;
    --ink: #e7ecf3;
    --muted: #9aa6b8;
    --line: #26303f;
    --accent: #5b86ff;
    --accent-ink: #0b1020;
    --badge: #1f2a44;
    --badge-ink: #a9c1ff;
    --warn-bg: #3a2f10; --warn-ink: #f0c86a;
    --err-bg: #3a1c1c; --err-ink: #ff9b9b;
    --dot: #22c55e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num { text-align: right; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--card); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot); }
.nav a { color: var(--muted); text-decoration: none; margin-left: 16px; }
.nav a:hover { color: var(--ink); }
/* Der gesperrte Menuepunkt „Jogi" (12.10.2026): sichtbar, ohne Link, mit Grund. */
.nav-gesperrt { color: var(--muted); margin-left: 16px; font-size: 12.5px; opacity: .8; cursor: not-allowed; }

/* Aufklappbares Nav-Dropdown (z. B. Verwaltung), reines <details> ohne JS */
.nav .navmenu { position: relative; display: inline-block; margin-left: 16px; }
.nav .navmenu > summary { list-style: none; cursor: pointer; color: var(--muted); white-space: nowrap; }
.nav .navmenu > summary::-webkit-details-marker { display: none; }
.nav .navmenu > summary::marker { content: ""; }
.nav .navmenu[open] > summary, .nav .navmenu > summary:hover { color: var(--ink); }
.nav .navmenu-body { position: absolute; top: 100%; left: 0; margin-top: 8px; z-index: 40;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 6px; min-width: 168px;
  display: flex; flex-direction: column; }
.nav .navmenu-body a { margin: 0; padding: 8px 12px; border-radius: 7px; color: var(--ink); white-space: nowrap; }
.nav .navmenu-body a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }

.wrap { max-width: 1760px; margin: 20px auto; padding: 0 28px; }
.foot { max-width: 1760px; margin: 12px auto 32px; padding: 0 28px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px; margin-bottom: 16px;
}
.empty { text-align: center; padding: 28px; }
.h2 { margin: 0 0 6px; font-size: 18px; }
.h3 { margin: 0 0 10px; font-size: 15px; }

.banner { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.banner.warn { background: var(--warn-bg); color: var(--warn-ink); }
.banner.error { background: var(--err-bg); color: var(--err-ink); }

.layout { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
@media (max-width: 820px) { .layout { grid-template-columns: 1fr; } }

.controls { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.ctrl-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }

/* Agenten-Auswahl-Panel (Popover) */
.agentpanel { position: relative; }
.agentpanel > summary {
  cursor: pointer; list-style: none; padding: 8px 14px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg);
  color: var(--ink); white-space: nowrap;
}
.agentpanel > summary::-webkit-details-marker { display: none; }
.agentpanel > summary::marker { content: ""; }
/* TICKET 71 (21.09.2026): DER KASTEN ROLLT, NICHT DIE EINZELNE LISTE.
   Bis heute deckelte `max-height` hier, ohne dass `overflow` dabeistand -- der
   Inhalt lief also unten HERAUS und wurde ausserhalb des Hintergrunds
   gezeichnet. Gemessen am 21.09.: Kasten 558 px, Inhalt 1247 px, 690 px im
   Freien. Sichtbar wurde es erst mit dem zweiten Block aus Ticket 43; vorher
   war die einzige Liste ein schrumpfbarer Flex-Sohn und passte immer.
   UND DER SCHWERERE TEIL: Genau dieses Schrumpfen quetschte die Liste der
   AKTIVEN Agenten auf 0 px, sobald der zweite Block offen stand -- die eigenen
   Agenten waren nicht mehr erreichbar. Deshalb rollt jetzt der Kasten und die
   Listen behalten ihre Hoehe (`flex-shrink: 0` unten). */
.ap-body {
  position: absolute; z-index: 30; margin-top: 6px; min-width: 300px; max-height: 62vh;
  display: flex; flex-direction: column; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 0 12px 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
}
/* Kopf (alle/keine/Uebernehmen) bleibt fix -- was er seit jeher verspricht und
   was ohne `sticky` nicht mehr stimmte, sobald der KASTEN rollt. Das
   Innenabstands-Polster wandert dafuer von `.ap-body` hierher: Sonst klebte
   der Kopf beim Rollen am oberen Rand des Kastens. Der eigene Hintergrund ist
   Pflicht, nicht Kosmetik -- ohne ihn scheinen die Namen durch ihn hindurch. */
.ap-actions {
  display: flex; gap: 10px; align-items: center; flex-shrink: 0;
  position: sticky; top: 0; z-index: 1; background: var(--card);
  padding: 12px 0 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.ap-actions a { color: var(--accent); text-decoration: none; }
.ap-actions .btn.sm { margin-left: auto; }
.ap-list { display: flex; flex-direction: column; flex-shrink: 0; }
.ctrl { display: flex; flex-direction: column; gap: 4px; }
input[type="date"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
.btn {
  padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent);
  color: var(--accent-ink); border-radius: 8px; cursor: pointer; font-size: 14px;
  text-decoration: none; display: inline-block;
}
.btn.ghost { background: transparent; color: var(--accent); }
.btn.full { width: 100%; margin-top: 10px; }

.statrow { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.statbox {
  flex: 1; min-width: 120px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 14px 16px;
}
.statnum { font-size: 26px; font-weight: 700; }
.statlbl { color: var(--muted); font-size: 12.5px; }

.agentblock { padding: 0; overflow: hidden; }
.timeline { padding: 0; overflow: hidden; }

/* Projekt-Kreuztabelle (Projekt x Tag, letzte Spalte + Zeile = Summe) */
/* Intern scrollbar (statt mit der Seite), damit die sticky Kopfzeile + Projekt-
   spalte beim Runterscrollen stehen bleiben. Hoehe = Viewport minus Steuerung. */
.ptbl-wrap { padding: 0; overflow: auto; max-height: calc(100vh - 190px); }
.ptbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.ptbl th, .ptbl td {
  padding: 7px 5px; border-bottom: 1px solid var(--line);
  text-align: right; white-space: nowrap;
}
.ptbl thead th {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  color: var(--muted); font-weight: 600; font-size: 12px;
}
.pcol-name {
  position: sticky; left: 0; z-index: 1; background: var(--card);
  text-align: left; font-weight: 600; min-width: 220px; max-width: 320px;
  overflow: hidden; text-overflow: ellipsis;
}
.ptbl thead .pcol-name { z-index: 3; background: var(--bg); }
.pcol-day { min-width: 30px; font-variant-numeric: tabular-nums; }
.pcol-day.is-today { outline: 2px solid var(--accent); outline-offset: -2px; }
.pcol-day.is-zero { color: var(--line); }
/* Wochenende/Feiertag: leicht schraffiert -> hier muss nichts stehen */
.pcol-day.is-free {
  color: var(--muted);
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    color-mix(in srgb, var(--muted) 22%, transparent) 4px,
    color-mix(in srgb, var(--muted) 22%, transparent) 5px
  );
}
.pcol-sum {
  font-weight: 700; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line); background: var(--bg); min-width: 56px;
}
.pcol-avg {
  font-variant-numeric: tabular-nums; color: var(--muted);
  background: var(--bg); min-width: 72px;
}
.ptbl tfoot .pcol-avg, .ptbl tfoot .pcol-sum { color: inherit; }
.ptbl tfoot td {
  position: sticky; bottom: 0; background: var(--bg);
  font-weight: 700; border-top: 2px solid var(--line);
}
.ptbl tbody tr:hover td { background: var(--bg); }
.ptbl tbody tr:hover .pcol-name { background: var(--bg); }
.agenthead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.lrow {
  display: grid; grid-template-columns: 60px 1.4fr minmax(200px, 1fr) 160px;
  gap: 16px; align-items: center; padding: 11px 18px;
  border-bottom: 1px solid var(--line);
}
.lrow:last-child { border-bottom: none; }
.lclick { cursor: pointer; }
.lclick:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.lhead {
  padding-top: 9px; padding-bottom: 9px; background: var(--bg);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 820px) { .lhead { display: none; } }
.ltime { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
.lmain { min-width: 0; }
.lfirma { font-weight: 600; }
.lproj {
  min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lagent {
  justify-self: start; white-space: nowrap; font-weight: 600;
  color: var(--badge-ink); background: var(--badge);
  border-radius: 999px; padding: 3px 12px;
}
/* Schmale Viewports: Zeile bricht in Zeit + Rest um. */
@media (max-width: 820px) {
  .lrow { grid-template-columns: 52px 1fr; }
  .lproj, .lagent { grid-column: 2; justify-self: start; }
}

.badge {
  display: inline-block; background: var(--badge); color: var(--badge-ink);
  border-radius: 999px; padding: 2px 10px; font-size: 12.5px; font-weight: 600;
}
.badge.sm { padding: 1px 8px; font-size: 11.5px; }
/* Abrechnung und Stammdaten auf /admin (18.10.2026): die Pillen in den Hausfarben. */
.badge.ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge.na { background: var(--na-bg); color: var(--na-ink); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); }
/* Stammdaten-Karte: Bank- oder Wallet-Felder je nach Auswahl, ohne Skript
   (bis 19.10.2026 hiess der zweite Wert `bitcoin`, seitdem `usdc_polygon`). */
.sd-zahl:has(input[name="zahlungsart"][value="usdc_polygon"]:checked) .sd-bank { display: none; }
.sd-zahl:has(input[name="zahlungsart"][value="eur_bank"]:checked) .sd-wallet { display: none; }
/* Seit dem Umbau nach Entwurf (18.10.2026): ohne Auswahl beide aus und der
   Hinweis an; der Kontoinhaber nur mit Haken (Wunsch aus FELDER Abschnitt 4).
   Der Server leert die Felder der anderen Zahlungsart wie bisher. */
.sd-zahl:not(:has(input[name="zahlungsart"]:checked)) :is(.sd-bank, .sd-wallet) { display: none; }
.sd-zahl:has(input[name="zahlungsart"]:checked) .sd-wahl-hinweis { display: none; }
.sd-bank:has(input[name="kontoinhaber_abweichend"]:not(:checked)) .sd-inhaber { display: none; }
/* Verguetung (19.10.2026): das Betragsfeld nur bei Festgehalt. */
.sd-verg:not(:has(input[name="verguetung"][value="festgehalt"]:checked)) .sd-festgehalt { display: none; }

.sidehead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.side-actions a { color: var(--accent); text-decoration: none; }
.agentcheck {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px;
  border-bottom: 1px solid var(--line);
}
.agentcheck:last-of-type { border-bottom: none; }
.acname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th, .tbl td {
  text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tbl th { color: var(--muted); font-weight: 600; }
.tbl th.num, .tbl td.num { text-align: right; }

/* Zeit-Check */
.zc-diff { font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 8px; border-radius: 6px; }
.zc-ok { color: var(--badge-ink); background: var(--badge); }
.zc-bad { color: #fff; background: #dc2626; }
@media (prefers-color-scheme: dark) { .zc-bad { background: #b91c1c; } }
.zc-gaps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.zc-gap { font-size: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }
details summary { cursor: pointer; color: var(--accent); font-size: 13px; }

/* Zeit-Check: Tages-Timeline (aufklappbar) */
.zc-agent-row { cursor: pointer; }
.zc-agent-row:hover td { background: var(--bg); }
.zc-expand { color: var(--accent); font-weight: 700; }
.tl-row > td { background: var(--bg); padding: 16px 18px; }
.tl-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 14px; }
.tl-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tl-win { margin-bottom: 22px; }
.tl-lanerow { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.tl-name { width: 96px; flex: none; font-size: 12px; font-weight: 600; color: var(--muted); text-align: right; }
.tl-lane {
  position: relative; flex: 1; height: 54px;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
}
.tl-axis { height: 18px; }
.tl-tick::before { content: ""; position: absolute; top: -4px; left: 0; width: 1px; height: 4px; background: var(--line); }
.tl-seg { position: absolute; top: 5px; bottom: 5px; border-radius: 2px; }
.tl-cm { top: 0; bottom: 0; border-radius: 0; background: #b9c2d0; }        /* eingestempelt (neutral) */
.tl-busy { background: var(--accent); opacity: .45; }                        /* Bearbeitung */
.tl-talk { background: #16a34a; }                                            /* Gespraech */
.tl-over { background: #f59e0b; border-radius: 0; top: 0; bottom: 0; }       /* Nachbearb. offen gelassen (Warnung) */
.tl-gap  { background: #dc2626; border-radius: 0; top: 0; bottom: 0; }       /* Leerlauf (Status) */
.tl-axis { position: relative; flex: 1; height: 16px; }
.tl-tick { position: absolute; top: 0; font-size: 10px; color: var(--muted); transform: translateX(-50%); }
@media (prefers-color-scheme: dark) {
  .tl-cm { background: #3b4657; }
  .tl-talk { background: #22c55e; }
  .tl-over { background: #fbbf24; }
  .tl-gap { background: #ef4444; }
}

/* Dialfire Edit */
.banner.ok { background: color-mix(in srgb, var(--dot) 20%, transparent); color: var(--ink); }
input[type="text"], textarea, select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit; width: 100%;
}
textarea { resize: vertical; }
.dfcheck {
  display: flex; align-items: center; gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--line); margin-bottom: 14px;
}
.dffollowup { padding: 4px 0 14px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
/* Wiedervorlage als Einheit */
.wvbox { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
.wvhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.wvhead strong { font-size: 15px; }
.wvcur {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 6px; padding: 3px 9px; font-size: 13px;
}
.wvgrid { display: grid; grid-template-columns: 180px 130px 360px; gap: 14px; align-items: end; }
.wvbox .dffu-quick { margin-top: 12px; }
.wvmehr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 720px) { .wvgrid { grid-template-columns: 1fr; } }
.cmttext { max-width: 860px; display: block; }
.dffu-inputs { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.dffu-inputs input[type="time"] {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit;
}
.dffu-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.btn.sm { padding: 4px 12px; font-size: 13px; }
.dfgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.dffield { display: flex; flex-direction: column; gap: 4px; }
.dffield.wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .dfgrid { grid-template-columns: 1fr; } }
/* Kampagnen-Formular (reproduzierte Agenten-Ansicht) */
.dfsec { grid-column: 1 / -1; margin: 20px 0 2px; font-size: 14px; font-weight: 700;
  border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.req { color: #dc2626; }
.dfradio { display: flex; flex-direction: column; gap: 5px; padding-top: 2px; }
.dfradio-opt, .dfcheck-inline { display: flex; align-items: center; gap: 8px; font-weight: 400; }
.dfradio-opt input, .dfcheck-inline input { width: auto; }

/* Kontaktsuche (Such-Modus) */
.dfsearch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 860px) { .dfsearch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .dfsearch-grid { grid-template-columns: 1fr; } }
.dfrow { cursor: pointer; }
.dfrow:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* Anruf-Historie (Detailansicht) */
/* Ticket 56: die Anruf-Historie ist eine aufklappbare Karte. Dieselbe
   Bauform wie `.dbfields` weiter unten -- ein zweites Muster fuer dieselbe
   Geste waere die zweite Wahrheit. */
.callcard > summary { cursor: pointer; list-style: revert; }
.callcard[open] > summary { margin-bottom: 12px; }
.callcard > summary .h3 { display: inline; }
.callhist { display: flex; flex-direction: column; gap: 10px; }
.callitem { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.callmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.callzeit { font-weight: 600; }
.badge.decisive { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); font-weight: 600; }
.callaudio { width: 100%; max-width: 520px; height: 34px; margin-top: 8px; }
.calltx { margin-top: 8px; }
.calltx summary { cursor: pointer; color: var(--muted); font-size: 13px; }
/* Ticket 48 (01.09.2026): das Transkript laesst sich mitnehmen. Der Knopf
   sitzt IN der Zusammenfassung, damit er sichtbar ist, ohne dass jemand
   aufklappen muss -- und `pointer-events` bleiben beim <a>, sonst klappte ein
   Klick darauf nur das <details> auf, statt herunterzuladen. */
.calltx summary .txdl { margin-left: 8px; text-decoration: none; opacity: .75; }
.calltx summary .txdl:hover { opacity: 1; }
.txturns { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.turn { display: flex; flex-direction: column; gap: 3px; max-width: 74%; }
.turn-kunde { align-self: flex-start; align-items: flex-start; }
.turn-agent { align-self: flex-end; align-items: flex-end; }
.turnspk {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); padding: 0 6px;
}
.turn-agent .turnspk { color: var(--accent); }
.turntxt { padding: 8px 13px; border-radius: 14px; line-height: 1.45; }
.turn-kunde .turntxt {
  background: color-mix(in srgb, var(--ink) 7%, transparent); border-bottom-left-radius: 4px;
}
.turn-agent .turntxt {
  background: color-mix(in srgb, var(--accent) 16%, transparent); border-bottom-right-radius: 4px;
}
@media (max-width: 640px) { .turn { max-width: 90%; } }
.txtplain { margin-top: 10px; white-space: pre-wrap; line-height: 1.5; }

/* Alle DB-Felder (rohe Adress-Sicht) */
.dbfields > summary { cursor: pointer; font-weight: 600; }
.dbfields[open] > summary { margin-bottom: 12px; }
.dbtbl td { vertical-align: top; padding: 6px 10px; }
.dbtbl .dbkey { white-space: nowrap; width: 1%; }
.dbtbl .dbval { word-break: break-word; }

/* Kampagnenuebersicht */
.cp-rot { color: #dc2626; font-weight: 700; }
.cp-row { cursor: pointer; }
.cp-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cp-detail > td { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.subtbl { width: auto; margin: 2px 0; border-collapse: collapse; }
.subtbl th { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 600;
  text-align: left; padding: 2px 18px 4px 0; }
.subtbl td { padding: 3px 18px 3px 0; }
.subtbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Sync-Monitor (Diagnose) ---- */
.mon-head { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 8px; }
.mon-stale { color: var(--warn-ink); font-weight: 600; }
.mon-summary { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px;
  padding: 10px 12px; border-radius: 8px; font-size: 14px; }
.mon-summary.is-red { background: var(--err-bg); color: var(--err-ink); }
.mon-summary.is-yellow { background: var(--warn-bg); color: var(--warn-ink); }
.mon-summary.is-green { background: color-mix(in srgb, var(--dot) 14%, transparent); }
.mon-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  flex: none; }
.mon-dot.red { background: #ef4444; }
.mon-dot.yellow { background: #f0a020; }
.mon-dot.green { background: var(--dot); }
.mon-dot.unknown { background: var(--muted); }
/* Heatmap: Kampagnen-Zeilen x Viertelstunden-Spalten */
.hm-legend { display: flex; flex-wrap: wrap; gap: 16px; margin: 10px 0 6px; align-items: center; }
.hm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hm-legend .hm-cell { display: inline-block; }
.hm-wrap { overflow-x: auto; padding-bottom: 4px; }
.hm { border-collapse: separate; border-spacing: 2px; }
.hm-hours th { font-size: 11px; color: var(--muted); font-weight: 600; text-align: left;
  padding: 0 0 3px 1px; }
.hm-corner { position: sticky; left: 0; background: var(--card); }
.hm-name { font-size: 12.5px; padding: 0 10px 0 0; white-space: nowrap; max-width: 210px;
  overflow: hidden; text-overflow: ellipsis; text-align: right;
  position: sticky; left: 0; background: var(--card); z-index: 1; }
.hm-cell { width: 15px; height: 15px; padding: 0; border-radius: 2px; }
/* synchron */
.hm-green { background: #3fae6e; }
/* Verzug: Farbe + diagonale Schraffur (sekundaere Kodierung fuer Rot-Gruen-Schwaeche) */
.hm-red { background-color: #e5484d;
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.38) 0 2px, transparent 2px 4px); }
/* nicht gemessen: Karenz, vor Monitor-Start, oder kuenftig -> einheitlich grau */
.hm-unmeasured,
.hm-pending { background: color-mix(in srgb, var(--muted) 24%, transparent); }
.hm-future { background: color-mix(in srgb, var(--muted) 10%, transparent); }
/* nicht abrufbar */
.hm-unknown { background-image: repeating-linear-gradient(45deg,
  var(--muted) 0 2px, transparent 2px 5px); opacity: .5; }

/* ---- admin/status: veralteter Messstand (Klasse A, 20.08.2026) ----
   Der Hinweis stand als graue Fussnote neben zwanzig Kacheln voller Zahlen.
   Ueber zwei Stunden faerbt er sich; die Seite bekommt zusaetzlich einen
   Streifen, damit niemand die Zahlen fuer frisch haelt. */
.ds-alt-warn { color: var(--err-ink); background: var(--err-bg);
  border-radius: 6px; padding: 2px 9px; font-weight: 600; }
body.ds-veraltet .wrap { border-top: 3px solid var(--err-ink);
  padding-top: 14px; }

/* ---- Pruefstrecke: Liste (Umbau 20.08.2026) ----
   Formensprache wie die Ticket-Liste: .tbl als Grundlage, Farbtokens des
   Hauses, keine eigenen Hex-Werte. */
.ps-tbl th, .ps-tbl td { padding: 10px; vertical-align: middle; }
.ps-row { cursor: pointer; }
.ps-row:hover { background: var(--bg); }
/* Kampagnen-Kopfzeile: die Wiederholung von 27 gleichen Zellen wird zu EINER
   Zeile. Sie traegt den Namen, die Anzahl und -- wenn es weh tut -- wie viele
   Fristen darin verstrichen sind. */
.ps-gruppe td { background: var(--bg); border-top: 1px solid var(--line);
  padding: 7px 10px; }
.ps-gruppe-name { font-weight: 600; font-size: 13px; }
.ps-gruppe-zahl { font-size: 11.5px; color: var(--muted); margin-left: 7px;
  font-variant-numeric: tabular-nums; }
.ps-c-amp, .ps-c-dim, .ps-c-agent, .ps-c-stufe, .ps-c-gespraech, .ps-c-dauer,
.ps-c-frist, .ps-c-akt { width: 1%; white-space: nowrap; }
.ps-c-kontakt { font-weight: 500; }
/* Miniampel je Dimension: drei Punkte statt einer Wortwiederholung. Der
   Buchstabe traegt die Aussage mit -- wer Rot und Gruen nicht unterscheidet,
   liest V/I/D und den Titel im Tooltip. */
.ps-dim { display: inline-block; width: 18px; height: 18px; line-height: 18px;
  text-align: center; border-radius: 5px; font-size: 10.5px; font-weight: 700;
  margin-right: 3px; background: var(--bg); color: var(--muted);
  border: 1px solid var(--line); }
.ps-dim-rot { background: var(--neg-bg); color: var(--neg-ink); border-color: transparent; }
.ps-dim-gelb { background: var(--warn-bg); color: var(--warn-ink); border-color: transparent; }
.ps-dim-gruen { background: var(--ok-bg); color: var(--ok-ink); border-color: transparent; }
.ps-stichprobe { font-size: 11px; color: var(--muted); }
/* Verstrichene Frist: eine Aussage, keine Zahl. */
.ps-alt { color: var(--neg-ink); background: var(--neg-bg); border-radius: 6px;
  padding: 1px 7px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ps-z-teilung { display: inline-flex; gap: 5px; margin-left: 8px; }
.ps-z-alt { color: var(--neg-ink); font-weight: 600; margin-left: 8px; }

/* Agent ohne Termine in der Projekt-Aufschluesselung (Ticket 20, 20.08.2026).
   Gedaempft: Die Zeile ist ein Hinweis, kein Alarm -- und sie steht in einer
   Tabelle, in der die Zahlen sprechen sollen. */
.pa-ohne { font-size: 11.5px; color: var(--muted); white-space: nowrap; }

/* ---- Ticket-Liste (IT), 19.08.2026 ----
   Alles hier baut auf den Haus-Bausteinen auf: `.card`, `.tbl`, `.btn ghost`
   und die Farbtokens. Vorher trug die Seite `class="tabelle"` und
   `class="seiten-titel"` -- beides gibt es nirgends, die Tabelle war also
   ungestaltet. Eigene Hex-Werte stehen hier bewusst keine. */
.tk-kopf { margin-bottom: 14px; }
.tk-kopf .h2 { margin-bottom: 2px; }
.tk-unter { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 60ch; }

/* Reiter. Die aktive Lasche traegt den Akzent als Unterstrich, nicht als
   Flaeche -- eine gefuellte Pille konkurriert mit den Status-Marken in der
   Tabelle darunter. */
.tk-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--line);
  margin: -4px -4px 12px; padding: 0 4px; }
.tk-reiter-knopf { display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; color: var(--muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; border-radius: 8px 8px 0 0; }
.tk-reiter-knopf:hover { color: var(--ink); background: var(--bg); }
.tk-reiter-knopf.an { color: var(--ink); border-bottom-color: var(--accent); }
.tk-zahl { font-variant-numeric: tabular-nums; font-size: 12px;
  font-weight: 600; padding: 1px 8px; border-radius: 999px;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.tk-reiter-knopf.an .tk-zahl { background: var(--badge); color: var(--badge-ink);
  border-color: transparent; }

.tk-artfilter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 10px; }
.tk-artlabel { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin-right: 2px; }
.tk-artfilter .btn.an { background: var(--badge); color: var(--badge-ink);
  border-color: transparent; }

/* Wide-content-Regel des Hauses: Die Tabelle scrollt in ihrem Kasten, die
   Seite selbst nie seitlich. */
.tk-scroll { overflow-x: auto; }
.tk-tbl { table-layout: auto; }
.tk-tbl th, .tk-tbl td { padding: 11px 10px; vertical-align: middle; }
.tk-tbl tbody tr + tr td { border-top: 0; }
.tk-zeile { cursor: pointer; }
.tk-zeile:hover { background: var(--bg); }
/* Der Betreff ist die breiteste Spalte und traegt normale Textfarbe: In einer
   Tabelle, in der jede Zeile ein Link ist, sagt eine blaue Unterstreichung
   nichts. */
.tk-c-betreff a { color: var(--ink); text-decoration: none; font-weight: 500; }
.tk-zeile:hover .tk-c-betreff a { text-decoration: underline; }
.tk-c-nr { width: 1%; white-space: nowrap; color: var(--muted);
  font-variant-numeric: tabular-nums; }
.tk-c-art, .tk-c-stand { width: 1%; white-space: nowrap; }
.tk-c-von { width: 1%; white-space: nowrap; color: var(--muted); }
.tk-c-zeit { width: 1%; white-space: nowrap; color: var(--muted);
  font-variant-numeric: tabular-nums; font-size: 12.5px; }
.tk-fuss { margin: 10px 0 0; color: var(--muted); font-size: 12.5px; }
.tk-karte .empty { color: var(--muted); }

/* Art-Marke: EINE gedaempfte Form fuer beide Arten. Zwei Farben (rot/lila)
   standen vorher nebeneinander und konkurrierten mit den Status-Marken --
   die Liste wird nach Stand gelesen, nicht nach Art. */
.tk-art { display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.tk-art-fehler { color: var(--err-ink); border-color: var(--err-bg);
  background: var(--err-bg); }

@media (max-width: 720px) {
  /* Auf dem Telefon fallen die beiden schmalsten Spalten weg -- beides steht
     im Ticket selbst. Betreff und Stand bleiben, und darum geht es. */
  .tk-c-von, .tk-c-zeit { display: none; }
  .tk-reiter-knopf { padding: 9px 10px; }
}

/* ---- Ticket-Status-Pille (Ticket 15, 19.08.2026) ----
   STAND VORHER DREIMAL: in tickets.html, tickets_it.html und
   tickets_detail.html -- jedes Mal nur mit `background`, ohne `color`. Die
   Schriftfarbe kam damit aus der Umgebung, und im Dunkelmodus stand heller
   Text auf hellem Pastellgrund: unlesbar, wenn man ihn nicht markiert.

   Jetzt EINMAL hier, und ueber die Farbtokens des Hauses -- die haben ihre
   Dunkelmodus-Fassung schon. Feste Hex-Werte haetten den Fehler nur an eine
   Stelle verschoben. */
.tk-status { border-radius: 999px; padding: .1rem .6rem; font-size: .85em;
             white-space: nowrap; }
.tk-status-offen       { background: var(--warn-bg); color: var(--warn-ink); }
.tk-status-in_arbeit   { background: var(--badge);   color: var(--badge-ink); }
.tk-status-geschlossen { background: var(--ok-bg);   color: var(--ok-ink); }

/* TICKET 89 (24.09.2026, Entscheid Lorenz 16:12 „fixen"): der Kasten
   „Erledigt" und die Typ-Marke der Ticket-Detailseite. Sie standen in
   `tickets_detail.html` mit fester HELLER Flaeche und OHNE Textfarbe -- im
   Dunkelmodus hell auf hell (Anhang 78). Dieselbe Klasse wie Ticket 15 und
   73. Die HELLEN Werte sind die von vorher (der Hellmodus bleibt, wie er
   war); `color` kommt dazu, und der Dunkelmodus bekommt eigene Flaechen. */
.tk-abschluss { background: #eef5ec; color: var(--ink);
                border-left: 3px solid #6a9c5e;
                padding: .6rem 1rem; max-width: 46rem; margin-top: 1.2rem; }
.tk-typ-fehler { background: #f7dede; color: var(--ink); }
.tk-typ-wunsch { background: #e5dcf5; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  .tk-abschluss { background: #14321f; border-left-color: #6ee7a0; }
  .tk-typ-fehler { background: #3a1c1c; color: #ff9b9b; }
  .tk-typ-wunsch { background: #2e2344; color: #d4c2ff; }
}

/* ---- Aktivitaeten: Kachel-Grid + Mini-Timeline + Kalender-Detail ---- */
:root {
  --akt-cm: #b9c2d0; --akt-prep: #22b8cf; --akt-call: #16a34a;
  --akt-wrap: #6366f1; --akt-over: #f59e0b; --akt-gap: #dc2626;
  --ok-bg: #e7f6ec; --ok-ink: #157347;
  --wv-bg: #eaf0ff; --wv-ink: #2f4fb0;
  --neg-bg: #fdecec; --neg-ink: #9b1c1c;
  --na-bg: #eef1f5; --na-ink: #6b7688;
}
@media (prefers-color-scheme: dark) {
  :root {
    --akt-cm: #3b4657; --akt-prep: #38bdf8; --akt-call: #22c55e;
    --akt-wrap: #818cf8; --akt-over: #fbbf24; --akt-gap: #ef4444;
    --ok-bg: #14321f; --ok-ink: #6ee7a0;
    --wv-bg: #1f2a44; --wv-ink: #a9c1ff;
    --neg-bg: #3a1c1c; --neg-ink: #ff9b9b;
    --na-bg: #222b3a; --na-ink: #9aa6b8;
  }
}
.sw-akt-cm { background: var(--akt-cm); }
.sw-akt-prep { background: var(--akt-prep); }
.sw-akt-call { background: var(--akt-call); }
.sw-akt-wrap { background: var(--akt-wrap); }
.sw-akt-over { background: var(--akt-over); }
.sw-akt-gap { background: var(--akt-gap); }

.akt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr));
  gap: 16px; align-items: start; }
.act { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.act-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.act-name { font-size: 15px; font-weight: 700; }
.act-name[title] { cursor: help; }
.act-proj { color: var(--muted); font-size: 13px; }
.act-proj b { color: var(--ink); font-weight: 600; }
.act-termine { margin-left: auto; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.act-termine b { color: var(--ok-ink); font-size: 15px; font-weight: 700; }
.act-detail { padding: 3px 12px; font-size: 12.5px; align-self: center; }
/* Ergebnis-Statistik des Tages (eigene Zeile unter Name/Projekt), Chips = Filter */
.act-stats { flex-basis: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.act-stats .res { font-size: 11.5px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.stat-chip { border: none; cursor: pointer; font: inherit; line-height: 1.5; transition: box-shadow .1s; }
.stat-chip:hover { box-shadow: 0 0 0 1px currentColor; }
.stat-chip.active { box-shadow: 0 0 0 2px currentColor; }
.act-stats-total { font-size: 11.5px; color: var(--muted); margin-left: 2px;
  background: none; border: none; cursor: pointer; font-family: inherit; }
.act-stats-total:hover { color: var(--ink); text-decoration: underline; }

/* Globale Ergebnis-Filterleiste ueber allen Agentenkacheln */
.akt-gfilter { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 9px 11px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; }
.akt-gfilter .gf-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; margin-right: 2px; }
.akt-gfilter .res { font-size: 11.5px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
/* Der Sammel-Chip ("negativ · alle") steht vor den einzelnen Kategorien
   desselben Typs. Kraeftigerer Rand statt eigener Farbe: Er gehoert sichtbar
   zur Gruppe, ist aber der weitere Griff. */
.gf-sammel { font-weight: 600; border-width: 1.5px; }
.akt-gfilter .act-stats-total { margin-left: 4px; }

.act-scroll { max-height: 231px; overflow-y: auto; }   /* ~7 Zeilen, dann Scrollbalken (kompakt -> mehr Agenten sichtbar) */
table.calls { table-layout: fixed; width: 100%; border-collapse: collapse; }
/* Spaltenbreiten der Gespraechsliste. Die Firma hat als EINZIGE keine feste
   Breite -- sie bekommt, was uebrig bleibt. Jede Breite hier ist also direkt
   Platz, der ihr fehlt.

   URSACHE des Fehlers vom 03.08.2026: Mit e27a08c (Bewertungsstrecke Phase 3)
   kam die KI-Spalte dazu -- OHNE Breitenangabe. Bei table-layout:fixed teilt
   der Browser den Rest dann unter allen Spalten ohne Breite auf. Aus 92px
   fuer die Firma allein wurden 92px fuer Firma UND KI zusammen; Firmennamen
   standen seither abgeschnitten da ("e.on", "Mur...", "kies...").

   MERKSATZ: Eine neue Spalte in dieser Tabelle braucht IMMER eine Breite --
   sonst nimmt sie sie sich von der Firma, und das faellt erst auf, wenn
   jemand die Namen lesen will.

   Dazu Ergebnis von 195 auf 130px: Der laengste Chip ist "Wiedervorlage" mit
   Icon, mehr braucht die Spalte nicht. */
.calls col.c-zeit { width: 52px; }   /* '08:07' braucht 54 -- nicht kuerzen */
.calls col.c-erg  { width: 120px; }  /* '↻ Wiedervorlage' misst ~116 */
.calls col.c-ampc { width: 26px; }   /* ein Zeichen */
.calls col.c-verl { width: 88px; }   /* nur Balken, Proportionen bleiben */
.calls col.c-dur  { width: 50px; }   /* '2:48' */
.calls thead th { position: sticky; top: 0; z-index: 1; background: var(--card);
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600; padding: 7px 8px; border-bottom: 1px solid var(--line); }
.calls td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calls tbody tr:last-child td { border-bottom: none; }
.call-row { cursor: pointer; }
.call-row:hover td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.c-time { color: var(--muted); font-size: 12.5px; }
.c-firma { font-weight: 600; }
.c-dur { text-align: right; color: var(--muted); font-size: 12.5px; }

.res { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: 999px; font-size: 12px; font-weight: 600; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-ok { background: var(--ok-bg); color: var(--ok-ink); }
.res-wv { background: var(--wv-bg); color: var(--wv-ink); }
.res-neg { background: var(--neg-bg); color: var(--neg-ink); }
.res-na { background: var(--na-bg); color: var(--na-ink); }

.mtl { position: relative; height: 13px; border-radius: 3px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); }
.mtl-cm { position: absolute; top: 0; bottom: 0; background: var(--akt-cm); opacity: .5; }
.mtl-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.seg-prep { background: var(--akt-prep); }
.seg-call { background: var(--akt-call); }
.seg-wrap { background: var(--akt-wrap); }
.seg-over { background: var(--akt-over); top: 0; bottom: 0; border-radius: 0; }
.seg-gap  { background: var(--akt-gap); top: 0; bottom: 0; border-radius: 0; opacity: .85; }

/* Overlays (Kalender + eingebettetes Dialfire Edit) */
.ovl { position: fixed; inset: 0; background: rgba(10, 14, 22, .5); display: none;
  align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.ovl.open { display: flex; }
.dlg { width: min(780px, 94vw); max-height: 90vh; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column;
  overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.35); }
.dlg-wide { width: min(1150px, 96vw); height: 90vh; }
.dlg-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.dlg-name { font-size: 16px; font-weight: 700; }
.dlg-proj { color: var(--muted); font-size: 13px; }
.dlg-proj b { color: var(--ink); font-weight: 600; }
.dlg-close { margin-left: auto; border: 1px solid var(--line); background: var(--bg);
  color: var(--muted); border-radius: 8px; width: 30px; height: 30px; cursor: pointer;
  font-size: 15px; line-height: 1; flex: none; }
.dlg-close:hover { color: var(--ink); }
.dlg-sub { padding: 8px 18px; border-bottom: 1px solid var(--line); }
.dlg-body { overflow-y: auto; padding: 12px 18px 24px; }
.df-frame { flex: 1; border: none; width: 100%; background: var(--bg); }

/* Kalender-Tagesansicht */
.cal { display: flex; position: relative; }
.cal-axis { width: 46px; position: relative; flex: none; }
.cal-hour { position: absolute; right: 10px; transform: translateY(-50%);
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cal-track { flex: 1; position: relative; border-left: 1px solid var(--line); }
.cal-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); opacity: .75; }
.cal-line.half { border-top-style: dashed; opacity: .38; }
.cal-cm { position: absolute; left: 0; right: 0; background: var(--akt-cm); opacity: .16; }
.cal-idle { position: absolute; left: 24px; right: 10px; border-radius: 4px;
  background: color-mix(in srgb, var(--akt-gap) 13%, transparent);
  border: 1px dashed color-mix(in srgb, var(--akt-gap) 55%, transparent);
  color: var(--akt-gap); font-size: 10.5px; display: flex; align-items: center;
  justify-content: center; overflow: hidden; }
.cal-ev { position: absolute; left: 24px; right: 10px; display: flex; z-index: 2;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.10); cursor: pointer; }
.cal-ev:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); z-index: 3; }
.cal-ev-slim .ev-body { font-size: 9.5px; line-height: 1; padding: 0 6px; }
.cal-ev-slim .ev-body .ev-time { font-size: 9px; }
.ev-stripe { width: 13px; flex: none; position: relative; background: var(--bg); }
.ev-seg { position: absolute; left: 2px; right: 2px; border-radius: 2px; }
.ev-body { flex: 1; min-width: 0; padding: 0 9px; display: flex; flex-direction: column;
  justify-content: center; font-size: 11.5px; line-height: 1.25; }
.ev-l1 { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.ev-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.ev-firma { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.ev-dur { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.ev-l2 { margin-top: 1px; }
.ev-l2 .res { font-size: 11px; padding: 0 7px; }
.ev-mark { font-weight: 700; flex: none; }
.ev-mark.ok { color: var(--ok-ink); } .ev-mark.wv { color: var(--wv-ink); }
.ev-mark.neg { color: var(--neg-ink); } .ev-mark.na { color: var(--na-ink); }

/* embed-Modus (Seite im Dialog-iframe): kompakter, ohne Topbar/Footer */
body.is-embed .wrap { max-width: none; padding: 12px 16px; }

/* ---- Login / Nutzerverwaltung / Nutzung ---- */
.inp { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font-size: 14px; }
.banner.notice { background: color-mix(in srgb, var(--dot) 16%, transparent);
  padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; }
.login-wrap { display: flex; justify-content: center; padding-top: 7vh; }
.login-card { width: min(400px, 92vw); overflow: hidden; }
.login-card .dffield { margin-bottom: 10px; }
.login-hero { display: block; width: calc(100% + 32px); margin: -16px -16px 4px;
  max-height: 210px; object-fit: cover; }
.login-brand { display: flex; align-items: baseline; gap: 8px; font-size: 20px;
  margin: 4px 0 14px; }
.login-brand .dot { width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); align-self: center; }
.nav-user { color: var(--ink); font-weight: 600; margin-left: 16px; font-size: 14px; }
.nav-logout { font-size: 15px; }
.adm-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.adm-actions form { display: flex; gap: 6px; align-items: center; }
.small-btn { padding: 3px 10px; font-size: 12.5px; }
.adm-pw .inp { width: 150px; padding: 4px 8px; font-size: 12.5px; }

/* ---- Umgebungs-Kennzeichnung (Staging) ---- */
.env-band { background: repeating-linear-gradient(45deg,
    #f59e0b 0 14px, #1c2330 14px 28px);
  color: #fff; text-align: center; font-size: 12px; font-weight: 800;
  letter-spacing: .08em; padding: 3px 8px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
/* "Ansicht als"-Simulation (Admin): Band + Dropdown */
.viewas-band { background: #6b46c1; color: #fff; text-align: center; font-size: 12.5px;
  font-weight: 600; padding: 4px 10px; display: flex; gap: 10px; align-items: center;
  justify-content: center; }
.viewas-back { border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.15);
  color: #fff; border-radius: 6px; padding: 1px 10px; cursor: pointer; font: inherit; }
.viewas-back:hover { background: rgba(255,255,255,.28); }
/* ---- Lector: Skript-Auswahl (Chips bzw. Liste) ----
   Stand bis zum 10.08.2026 als <style>-Block IN lector.html — dort aber
   innerhalb von `{% if payload %}`, also nur ausgeliefert, wenn ein Skript
   geöffnet war. In der Auswahl-Ansicht (dem Gegen-Zweig) fehlte es, und die
   Chips erschienen als nackte blaue Links: „sieht aus wie vor der
   Neugestaltung". Hier steht es unabhängig vom Zustand der Seite. */
.sv-top { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.sv-top select { max-width: 520px; }
.sv-titel { font: inherit; font-weight: 800; font-size: 15px; color: var(--ink);
  background: none; border: 0; border-bottom: 1px dashed var(--line);
  padding: 0 0 1px; cursor: pointer; }
.sv-titel:hover { border-bottom-color: var(--accent); color: var(--accent); }
.sv-wahl { display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  margin-bottom: 12px; }
.sv-chip { display: inline-flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--line); border-radius: 10px; padding: 5px 12px;
  background: var(--card); text-decoration: none; color: var(--ink);
  font-size: 12.5px; }
.sv-chip:hover { border-color: var(--accent); }
.sv-chipstufe { font-size: 11px; color: var(--muted); }

.viewas { display: inline; margin: 0; }
/* „Ansicht als" in der Kopfleiste — folgt dem Hausstil `.inp`, nur kompakter.
   Bis zum 10.08.2026 fiel dieses Feld aus der Gestaltung heraus, und zwar aus
   zwei Gruenden:
     * Es erbte `width: 100%` aus der globalen Formularregel weiter oben. Mit
       `max-width: 190px` war es dadurch IMMER exakt 190 px breit — ein starrer
       Kasten neben Textlinks, unabhaengig davon, wie lang der Name ist.
     * Radius und Schriftgroesse wichen von `.inp` ab (7px/12.5px statt
       8px/14px), sodass es neben jedem anderen Feld der Seite aelter wirkte.
   `width: auto` laesst es mitwachsen, `max-width` verhindert weiterhin, dass
   ein langer Name die Leiste sprengt. */
.viewas select { font: inherit; font-size: 13px; padding: 4px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink);
  width: auto; max-width: 190px; cursor: pointer; }
.env-chip { background: #f59e0b; color: #1c2330; font-size: 11px; font-weight: 800;
  padding: 2px 8px; border-radius: 6px; letter-spacing: .05em; }

/* ---- Verwaltung: Mandanten | Detail-Fenster (Stammdaten + Projekte) ---- */
.verw { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
@media (max-width: 900px) { .verw { grid-template-columns: 1fr; } }
.vlist { padding: 0; overflow: hidden; }
.vlist-head { padding: 12px 15px; border-bottom: 1px solid var(--line); font-weight: 700; }
.vlist-scroll { overflow-y: auto; max-height: calc(100vh - 320px); }
.vli { display: flex; align-items: center; gap: 8px; padding: 10px 15px;
  border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink);
  text-decoration: none; }
a.vli:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.vli.sel { background: color-mix(in srgb, var(--accent) 11%, transparent);
  border-left: 3px solid var(--accent); padding-left: 12px; font-weight: 600; }
.vli-sub { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.vertrag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.vertrag.voll { background: var(--ok-bg); color: var(--ok-ink); }
.vertrag.alt { background: var(--warn-bg); color: var(--warn-ink); }
.vnew { border-top: 1px solid var(--line); padding: 8px 14px; }
.vnew summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.vform { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.vform .inp { flex: 1 1 120px; min-width: 0; }
.vimport { margin-top: 10px; }
.pick-grid { display: flex; flex-wrap: wrap; gap: 6px; max-height: 260px; overflow-y: auto; }
.pick input { display: none; }
.pick span { display: inline-block; padding: 3px 11px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--bg); font-size: 12.5px;
  cursor: pointer; user-select: none; }
.pick span:hover { border-color: var(--accent); }
.pick input:checked + span { background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); font-weight: 700; }
/* Import-Vorschlag: Dialfires Funktion steht IN der Pille, nicht als zweite.
   Der Reset ist noetig, weil `.pick span` auch verschachtelte Spans trifft --
   ohne ihn saesse hier eine Pille in der Pille. */
.pick span .fn { display: inline; padding: 0 0 0 6px; border: 0; background: none;
  font-size: 11px; font-weight: 400; opacity: .6; }
.pick input:checked + span .fn { opacity: .85; }
.pick span .fn.unklar { color: var(--warn-ink); opacity: 1; }
/* Ignorierte: Zeile mit Knopf, also kein Pillen-Layout. */
.ign-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

/* Auswahlzeile in Dialogen (Task-Dialog, Status-Scope). Gehoert hierher und
   nicht in einen <style>-Block einer einzelnen Seite: als lokale Definition in
   verwaltung.html fehlte sie auf der Bewertungsseite, und die Zeilen sind dort
   in den Fliesstext zurueckgefallen. */
.st-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px;
  border-bottom: 1px solid var(--line); }
.st-row:last-child { border-bottom: 0; }
.st-row .t { font-weight: 600; }
.st-row .id { color: var(--muted); font-size: 12px; }

/* Detail-Fenster */
.detail { padding: 22px 24px; }
.det-top { display: flex; align-items: flex-start; gap: 16px; }
.m-name { font-size: 22px; font-weight: 800; letter-spacing: -.01em;
  border: 1px solid transparent; border-radius: 8px; padding: 3px 8px; margin: -3px -8px;
  background: transparent; color: var(--ink); width: 100%; max-width: 460px; font-family: inherit; }
.m-name:hover, .m-name:focus { border-color: var(--line); background: var(--bg); outline: none; }
.m-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.aktiv { margin-left: auto; display: inline-flex; gap: 7px; align-items: center;
  font-size: 13px; color: var(--muted); white-space: nowrap; }
.stamm { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-top: 18px; align-items: flex-end; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld > label, .hf > label { font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.inp { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; }
select.inp { cursor: pointer; }
.soll { margin-top: 20px; }
.soll-lab, .kamp-lab { font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.soll-meter { height: 12px; border-radius: 999px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; }
.soll-meter > span { display: block; height: 100%; background: var(--ok-ink); }
.soll-meter > span.over { background: var(--neg-ink); }
.soll-legend { display: flex; gap: 18px; margin-top: 8px; font-size: 13px; }
/* Ticket 65: die Kennzeichnung einer unvollstaendigen Abschrift. Sie steht VOR
   dem Transkript-Aufklapper und ist nicht zuklappbar -- eine Warnung, die man
   erst sieht, wenn man schon hineingesehen hat, kommt zu spaet. Rot waere hier
   falsch: Es ist kein Ausfall, sondern ein Vorbehalt. */
.txwarn { margin: 6px 0; padding: 7px 10px; border-radius: 8px; font-size: 12.5px;
  line-height: 1.5; color: var(--warn-ink, #8a6d00);
  background: color-mix(in srgb, #d9a400 12%, transparent);
  border: 1px solid color-mix(in srgb, #d9a400 40%, transparent); }
.txwarn > div:first-child { font-weight: 700; font-family: ui-monospace, monospace; }
.st-aktiv { color: var(--ok-ink); font-weight: 600; }
.st-beendet { color: var(--neg-ink); font-weight: 600; }
.hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
.proj-head-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.proj-head-row h3 { margin: 0; font-size: 16px; }

.btn.danger { color: var(--neg-ink); border-color: transparent; background: transparent; }
.btn.danger:hover { border-color: var(--neg-ink); }

/* Projekt-Block: Einstellungen im Header, Ausklappen = Kampagnen */
/* TICKET 64, 18.09.2026: HIER STAND `overflow: hidden`, UND DAS HAT DAS
   ⋯-MENUE DER LETZTEN KAMPAGNE ABGESCHNITTEN.

   Das Menue (`.kk .kk-menue`) ist `position: absolute` und haengt an seiner
   Karte; bei der LETZTEN Karte eines Projekts reicht es ueber die Unterkante
   des Blocks hinaus -- bei zwei Karten um 99 px von 159 px Menuehoehe.

   DER UEBERHANG IST NICHT DAS MASS, und das ist hier eine Falle: Er ist VOR
   und NACH dem Fix derselbe (99 px), denn die Rundung aendert nichts am
   Layout, nur am Malen. Wer ihn misst, kann die zwei Zustaende gar nicht
   unterscheiden (CLAUDE.md: „unterscheiden sich die ERGEBNISSE?"). Gemessen
   wird deshalb, was der Bediener ERREICHT: je Eintrag der Mittelpunkt durch
   `document.elementFromPoint`. Am 18.09.2026 im Browser, 1400x1700:
   **vorher 1 von 2 Eintraegen erreichbar, nachher 2 von 2** -- „Vom Projekt
   loesen" lag unter der Kante. Die Zusicherung steht in
   `browser_bedienung.py [10b]`, nicht hier als Behauptung.

   `overflow: hidden` stand nicht ohne Grund da: Es hat die eckigen
   Hintergruende der inneren Koepfe (`.phdr-view`, `.phdr`, `.pdelform` --
   alle `background: var(--bg)`) an der Rundung des Blocks beschnitten. Wer es
   ersatzlos streicht, bekommt vier ueberstehende Ecken.

   DESHALB WEG A (Entscheid Lorenz): Die Rundung wandert an die INNEREN
   KANTEN. 10 px und nicht 11: Der Block hat 11 px Radius und 1 px Rahmen, der
   Inhalt beginnt also 1 px weiter innen -- 11 - 1 = 10. Welches Element unten
   sitzt, haengt am Zustand, und deshalb sind es vier Regeln und nicht eine:

     * zugeklappt          -> `.phdr-view` ist zugleich Kopf UND Fuss
     * zugeklappt + ✏️      -> `.pdelform` ist der Fuss
     * aufgeklappt         -> `.proj-body` ist der Fuss, und der hat GAR
                              KEINEN eigenen Hintergrund; dort scheint die
                              gerundete Flaeche des Blocks durch, es ist
                              nichts zu runden
     * archiviert          -> `.phdr-view` ist nur dann auch Fuss, wenn KEINE
                              Kampagnenliste folgt (`:last-child`)

   GEMESSEN, DASS DIE RUNDUNG GENAU DIESE ARBEIT TUT (18.09.2026, Pixel
   gezaehlt am zugeklappten Block, 1042x69): Nimmt man die vier Regeln wieder
   weg, weichen **124 Pixel** ab -- und **alle 124 liegen in den Ecken**.
   Vergleicht man den alten Stand mit dem neuen, sind es **16 Pixel, keines
   davon in einer Ecke**: Sie liegen im Chip „kein Massstab", unterscheiden
   sich um 1 von 255 und kommen vom weggefallenen `overflow` selbst, nicht von
   der Rundung (eingegrenzt, indem `overflow: hidden` einzeln wieder gesetzt
   wurde). Zwei Laeufe desselben Standes ergeben 0 abweichende Pixel -- die
   Zahlen sind also echt und kein Rauschen.
*/
.proj { border: 1px solid var(--line); border-radius: 11px; margin-bottom: 14px;
  background: var(--card); }
.proj > .phdr-view,
.proj .phdr-edit > .phdr { border-radius: 10px 10px 0 0; }
.proj:not(.open):not(.archiv-proj) > .phdr-view,
.proj.archiv-proj > .phdr-view:last-child { border-radius: 10px; }
.proj:not(.open).editing .phdr-edit > .pdelform { border-radius: 0 0 10px 10px; }
.phdr { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--bg); margin: 0; }
.tw { cursor: pointer; user-select: none; color: var(--muted); font-size: 12px;
  align-self: center; transition: transform .15s; padding: 4px; border: none; background: none; }
.proj.open .tw { transform: rotate(90deg); }
.hf { display: flex; flex-direction: column; gap: 4px; }
.hf[hidden] { display: none; }   /* sonst gewinnt display:flex ueber [hidden] */
.hf .inp { padding: 6px 9px; font-size: 13.5px; }
.hf.name { flex: 1 1 200px; min-width: 160px; }
.hf.name .inp { font-weight: 700; width: 100%; }
/* Terminhuette (24.10.2026): Preis bei Schalter aus nur GEDAEMPFT, nie
   gesperrt -- ein `disabled` schickte das Feld nicht mit. Reines CSS, ohne JS. */
.phdr:has(input[name="terminhuette"]:not(:checked)) .th-preis { opacity: .45; }
.p-count { align-self: center; margin-left: auto; color: var(--muted);
  font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.proj-body { padding: 16px; border-top: 1px solid var(--line); display: none; }
.proj.open .proj-body { display: block; }

/* Projektkopf: Ansicht (Standard) vs. Editieren (per ✏️) */
.phdr-view { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: var(--bg); }
.phdr-view .pv-name { font-weight: 700; font-size: 15px; }
.phdr-view .pv-meta { display: flex; align-items: center; gap: 12px; color: var(--muted);
  font-size: 12.5px; flex-wrap: wrap; }
.phdr-view .pv-st { text-transform: capitalize; border-radius: 999px; padding: 1px 10px;
  font-weight: 600; font-size: 12px; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--ink); }
.phdr-view .pv-st.st-aktiv { background: color-mix(in srgb, var(--ok-ink) 20%, transparent); }
.phdr-view .pv-st.st-pausiert { background: color-mix(in srgb, var(--warn-ink, #b8860b) 22%, transparent); }
.phdr-view .pv-st.st-geplant { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.phdr-view .pen { margin-left: 4px; }
.phdr-edit { display: none; }
.phdr-edit .pdelform { padding: 0 16px 12px; background: var(--bg); }
.proj.editing .phdr-view { display: none; }
.proj.editing .phdr-edit { display: block; }

.camp-box { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 10px; }
.camp-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.camp-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; align-items: center; }
.chip-form { display: inline-flex; gap: 6px; align-items: center; }
.chip { background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--ink); border-radius: 999px; padding: 2px 10px; font-size: 12.5px;
  display: inline-flex; gap: 6px; align-items: center; }
.chip button { border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 12px; padding: 0; }
.chip button:hover { color: var(--neg-ink); }
.cscript { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.cscript .cs-lab { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.newproj { border: 1px dashed var(--line); border-radius: 11px; padding: 14px 16px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---- Skriptverwaltung (Drag & Drop) ---- */
.sk-top { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.sk-upload { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sk-dnd { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .sk-dnd { grid-template-columns: 1fr; } }
.sk-scroll { max-height: calc(100vh - 300px); overflow-y: auto; padding-right: 4px; }
.col-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.grouplab { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 14px 0 8px; }
.grouplab:first-child { margin-top: 0; }
/* Deutlich breite Karten, damit Skriptnamen nicht abgeschnitten werden. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 8px; }
.pcard { display: flex; align-items: center; gap: 7px; background: var(--card);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px;
  font-size: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.pcard.dragging { opacity: .4; }
.pcard .grip { color: var(--muted); cursor: grab; padding: 0 2px; }
.pcard .grip:active { cursor: grabbing; }
.card-act { margin-left: 4px; color: var(--muted); text-decoration: none;
  border: none; background: none; cursor: pointer; font-size: 13px; padding: 2px 3px;
  border-radius: 6px; line-height: 1; }
.card-act:hover { background: var(--bg); color: var(--ink); }
.card-act.del:hover { color: var(--neg-ink); }
/* Schulungsskript (Ticket 137): aus = blass, an = voll und hinterlegt. */
.card-act.sch { opacity: .4; }
.card-act.sch.an { opacity: 1; background: var(--bg); color: var(--ink); }
.pcard .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1; min-width: 0; }
.pcard .dt { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; flex: none; }
.cnt { background: var(--ok-bg); color: var(--ok-ink); border-radius: 999px; padding: 1px 6px;
  font-size: 10.5px; font-weight: 700; }
.slot { min-height: 42px; border: 1px dashed var(--line); border-radius: 8px; padding: 5px;
  display: flex; align-items: center; background: var(--bg); }
.slot.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, var(--bg)); }
.slot-empty { color: var(--muted); font-size: 12px; width: 100%; text-align: center; }
.archiv-zone { margin-top: 14px; border: 2px dashed var(--line); border-radius: 12px;
  padding: 12px 14px; background: var(--bg); transition: border-color .1s, background .1s; }
.archiv-zone.over { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg)); }
.archiv-head { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
#poolArea.over { outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 10px; }
.orphan-row { display: flex; align-items: baseline; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--line); cursor: pointer; }
.orphan-nm { flex: 1; } .orphan-text { display: block; margin-top: 2px; }
.orphan-hint { white-space: nowrap; }
.camp { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; background: var(--card); }
.camp .camp-name { flex: 1; min-width: 0; } .camp .camp-name b { font-weight: 700; }
.camp .slot { flex: 0 0 240px; }
.slot .chip { width: 100%; background: var(--ok-bg); color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ok-ink) 30%, var(--line)); }
.slot .chip .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot .chip .x { margin-left: auto; }

/* ---- Team-Arena (Rangliste, bewusst bunt) ---- */
.arena-hero { background: linear-gradient(120deg,
    color-mix(in srgb, #f59e0b 22%, var(--card)),
    color-mix(in srgb, #ec4899 16%, var(--card)) 45%,
    color-mix(in srgb, var(--accent) 20%, var(--card)));
  border-color: color-mix(in srgb, #f59e0b 45%, var(--line)); }
.arena-title { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.arena-cup { font-size: 40px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.25)); }
.arena-day { margin-left: auto; }
.arena-prev { margin-top: 12px; padding: 9px 14px; border-radius: 10px; font-size: 14px;
  background: color-mix(in srgb, #f59e0b 18%, var(--card));
  border: 1px dashed color-mix(in srgb, #f59e0b 55%, transparent); }

.me-card { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.me-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.me-label { font-weight: 700; }
.me-score { font-size: 34px; font-weight: 800; line-height: 1;
  background: linear-gradient(120deg, #f59e0b, #ec4899, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.me-week { margin-left: auto; }
.me-parts { display: flex; flex-direction: column; gap: 7px; }
.me-part { display: flex; align-items: center; gap: 10px; }
.mp-ico { flex: none; }
.mp-label { flex: none; width: 300px; font-size: 13.5px; }
.mp-bar { flex: 1; height: 12px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; }
.mp-fill { height: 100%; border-radius: 6px; }
.sb-a { background: linear-gradient(90deg, #16a34a, #4ade80); }
.sb-b { background: linear-gradient(90deg, #0ea5e9, #67e8f9); }
.sb-c { background: linear-gradient(90deg, #8b5cf6, #d8b4fe); }
.sb-d { background: linear-gradient(90deg, #f59e0b, #fde047); }
.sb-e { background: linear-gradient(90deg, #ec4899, #f9a8d4); }
.sb-f { background: linear-gradient(90deg, #14b8a6, #99f6e4); }

.pts-list { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.pts-list li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 4%, transparent); }
.pts-ico { flex: none; }
.pts-val { font-weight: 800; color: var(--ok-ink); white-space: nowrap; }
.mp-pts { flex: none; width: 44px; text-align: right; font-weight: 700; }

.arena-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px; align-items: start; margin-bottom: 4px; }
.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rank-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: 10px; border: 1px solid transparent; }
.rank-top { background: color-mix(in srgb, #f59e0b 9%, transparent); }
.rank-row:first-child { background: color-mix(in srgb, #f59e0b 16%, transparent);
  border-color: color-mix(in srgb, #f59e0b 45%, transparent); }
.rank-me { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.rank-pos { flex: none; width: 34px; text-align: center; font-size: 17px; }
.rank-name { flex: none; width: 170px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-weight: 600; }
.rank-bar { flex: 1; height: 10px; border-radius: 5px; background: var(--bg);
  border: 1px solid var(--line); overflow: hidden; }
.rank-fill { height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #f59e0b, #ec4899); }
.rank-fill-week { background: linear-gradient(90deg, var(--accent), #8b5cf6); }
.rank-score { flex: none; width: 52px; text-align: right; font-weight: 800; font-size: 15px; }

/* ---- globales Diagnose-Badge in der Topbar ---- */
.nav-diag { position: relative; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 8px;
  font-size: 11px; font-weight: 700; line-height: 1; vertical-align: middle; }
.nav-badge.red { background: #ef4444; color: #fff; }
.nav-badge.yellow { width: 9px; min-width: 9px; height: 9px; padding: 0; border-radius: 50%;
  background: #f0a020; }

/* ---- Spocks Rueckstands-Ampel in der Kopfleiste (06.09.2026) ----
   Ein PUNKT, kein Zaehler: Die Zahl daneben (`nav-badge` der Pruefstrecke)
   zaehlt offene Faelle in JARVIS; diese Ampel sagt, ob bei SPOCK etwas liegen
   bleibt. Zwei Zahlen nebeneinander waeren zwei Bestaende, die niemand
   auseinanderhaelt.
   GRAU IST EINE EIGENE FARBE und nicht das Fehlen einer: „keine Aussage" darf
   nicht wie „alles gut" aussehen (SPEC_engine_api: `ampel: null` heisst
   *keine Aussage*, nicht *alles gut* und nicht *Alarm*). */
.nav-spock { position: relative; display: inline-flex; align-items: center; }
.nav-badge.spock-rot { width: 9px; min-width: 9px; height: 9px; padding: 0;
  border-radius: 50%; background: #ef4444; }
.nav-badge.spock-gelb { width: 9px; min-width: 9px; height: 9px; padding: 0;
  border-radius: 50%; background: #f0a020; }
/* GRUEN KOMMT AUS DEM HAUS-TOKEN `--dot` (06.09.2026, Nachbesserung N8).
   Hier stand `#22a06b` -- ein DRITTES Hausgruen, hart und nirgends sonst
   verwendet, waehrend `--dot` in hell UND dunkel definiert ist. Rot und Gelb
   daneben bleiben zeichengleich die der bestehenden `.nav-badge.red/.yellow`;
   dort ist nichts umgewidmet, und ein Token dafuer gaebe es nicht. */
.nav-badge.spock-gruen { width: 9px; min-width: 9px; height: 9px; padding: 0;
  border-radius: 50%; background: var(--dot); }
.nav-badge.spock-grau { width: 9px; min-width: 9px; height: 9px; padding: 0;
  border-radius: 50%; background: var(--muted); }
/* DER VIERTE WERT (Spock M6, 09.09.2026): `takt_haengt` heisst nicht „es
   liegt etwas an", sondern „es wird gerade gar nichts bearbeitet". Rot in
   derselben Farbe wie `spock-rot` -- es ist mindestens so schlimm --, aber
   mit einem hellen Kern, damit die zwei am Punkt selbst unterscheidbar sind
   und nicht erst im Titel. */
.nav-badge.spock-takt_haengt { width: 9px; min-width: 9px; height: 9px;
  padding: 0; border-radius: 50%; background: #ef4444;
  box-shadow: inset 0 0 0 2.5px var(--card, #fff); }
/* UND DER FALL, DEN ES FRUEHER NICHT GAB: ein Wort, das dieses Haus nicht
   kennt. Vorher entstand daraus eine Klasse ohne Regel -- ein Punkt ohne
   Hintergrund, also unsichtbar, und Spocks Meldung war weg. `unbekannt` ist
   deshalb SICHTBAR und ausdruecklich NICHT grau: grau heisst „keine
   Aussage" (Spocks Antwort), unbekannt heisst „eine Aussage, die hier
   niemand liest" (unsere Luecke). */
.nav-badge.spock-unbekannt { width: 9px; min-width: 9px; height: 9px;
  padding: 0; border-radius: 50%; background: var(--card, #fff);
  box-shadow: inset 0 0 0 2px var(--muted); }
/* Der Tooltip ist SERVERSEITIG FERTIG und wird nur ein- und ausgeblendet --
   kein JavaScript, keine zweite Abfrage. Er haengt an `:hover` UND an
   `:focus-within`, damit er ohne Maus erreichbar ist. */
.spock-tip { position: absolute; top: 100%; right: -8px; z-index: 60;
  display: none; flex-direction: column; gap: 6px; margin-top: 7px;
  min-width: 280px; max-width: 420px; padding: 9px 11px;
  background: var(--card, #fff); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .13);
  font-size: 12px; font-weight: 400; color: var(--ink); text-align: left;
  white-space: normal; }
.nav-spock:hover .spock-tip, .nav-spock:focus-within .spock-tip { display: flex; }
.spock-tip-kopf { font-weight: 600; }
.spock-tip-k { display: flex; flex-wrap: wrap; gap: 4px 10px;
  padding-top: 6px; border-top: 1px solid var(--line); }
.spock-tip-k[data-ampel="rot"] b { color: #ef4444; }
.spock-tip-k[data-ampel="takt_haengt"] b { color: #ef4444; }
.spock-tip-k[data-ampel="unbekannt"] b { color: var(--muted);
  text-decoration: underline dotted; }
.spock-tip-w { color: var(--muted); font-variant-numeric: tabular-nums; }
.spock-tip-z { color: var(--muted); font-style: italic; }

/* ---- Eigener Audio-Player: alles in EINER grauen Pille ---- */
.player { display: flex; align-items: center; gap: 9px; margin-top: 6px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 4px; }
.player audio { display: none; }
.player .pp { flex: none; width: 30px; height: 30px; border-radius: 50%; border: none;
  background: var(--accent); color: var(--accent-ink); cursor: pointer; font-size: 12px; line-height: 1; }
.player .seek { flex: 1; min-width: 70px; accent-color: var(--accent); cursor: pointer; height: 4px; }
.player .ptime { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.player .pdiv { width: 1px; align-self: stretch; background: var(--line); margin: 3px 0; }
.speedctl { display: inline-flex; align-items: center; flex: none; gap: 1px; }
.speedctl button { border: none; background: transparent; color: var(--muted);
  padding: 2px 7px; font-size: 11px; border-radius: 999px; cursor: pointer;
  font-family: inherit; font-variant-numeric: tabular-nums; line-height: 1.6; }
.speedctl button:hover { color: var(--ink); }
.speedctl button.on { background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.player .pdl { flex: none; text-decoration: none; color: var(--muted); font-size: 15px;
  line-height: 1; padding: 4px 6px; border-radius: 7px; }
.player .pdl:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---- Nutzerverwaltung: Rollenfilter-Chips ---- */
.rolefilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.rolefilter .rf { padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--bg); color: var(--muted); font-size: 12.5px; text-decoration: none; }
.rolefilter .rf:hover { border-color: var(--accent); color: var(--ink); }
.rolefilter .rf.on { background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); font-weight: 700; }

/* ---- Nutzerliste: Inline-Edit mit Stift ---- */
.utbl td { vertical-align: top; }
.ed .ed-edit { display: none; align-items: center; gap: 5px; }
.ed.editing .ed-edit { display: flex; }
.ed.editing .ed-view { display: none; }
.pen { border: none; background: none; cursor: pointer; font-size: 12px; opacity: .5;
  padding: 0 2px; margin-left: 4px; }
.pen:hover { opacity: 1; }
tr:hover .pen { opacity: .8; }
.btn.small-btn { padding: 3px 8px; font-size: 12px; }

/* ---- Mandant: Postfach-Box + Passwort-Auge ---- */
.pf-box { margin-top: 18px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); }
.pw-wrap { display: inline-flex; align-items: center; gap: 4px; }
.pw-eye { border: none; background: none; cursor: pointer; font-size: 14px; padding: 2px; }
/* Loeschen-Kaestchen unter dem Passwortfeld: Seit das Feld nicht mehr
   vorbelegt ist (Issue #2), heisst leer "unveraendert" -- ohne diesen Weg
   liesse sich ein Postfach-Passwort nie mehr entfernen. */
.pw-del { display: block; margin-top: 4px; font-size: 11px; color: var(--muted);
  cursor: pointer; user-select: none; }
.pw-del input { margin-right: 4px; vertical-align: middle; }

/* ---- Mandant: eingeklapptes Detailfeld ---- */
.mdetails { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 10px; }
.mdetails > summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }

/* ---- Mandant: Abrechnung fuer GrafZahl (20.10.2026) ---- */
.abr .stamm { margin-top: 12px; }
.abr-betrag { width: 130px; }
.abr-kurz { width: 150px; }
.abr-wert { font-size: 13.5px; padding: 6px 0; }
/* Kapazitaet in Formen (Ticket 133; seit 22.10.2026 am Mandanten) */
.pform-zahl { width: 64px; }
.pform-soll { font-size: 13px; padding: 6px 0; }
.pform-fehlt { color: var(--bad-ink, #b42318); font-weight: 600; }
.abr-pausen { margin-top: 14px; font-size: 13px; }
.abr-pausen .tbl { margin: 6px 0; }
.abr-pausen form.inline { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.abr-pause-kopf { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.abr-pause-neu > summary { list-style: none; cursor: pointer; display: inline-block; }
.abr-pause-neu > summary::-webkit-details-marker { display: none; }
.abr-pause-neu[open] > summary { display: none; }
.abr-pause-neu form.inline { margin-left: 4px; }
.abr-verlauf { margin-top: 14px; }
.abr-verlauf > summary { cursor: pointer; font-size: 13px; }

/* ---- Verwaltung: grünes Plus für neues Projekt + kompakte Kampagnenzeile ---- */
.proj-head-row .newproj-inline { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.btn-plus { width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--ok-ink); color: #fff; font-size: 18px; line-height: 1; flex: none;
  display: inline-flex; align-items: center; justify-content: center; }
.btn-plus:hover { filter: brightness(1.08); }
.btn-plus.sm { width: 24px; height: 24px; font-size: 15px; }
/* Kampagne verknüpfen: grünes + rechts neben der „Kampagnen"-Überschrift, klappt die Auswahl auf */
.kamp-head-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.kamp-head-row .kamp-lab { margin-bottom: 0; }
.kamp-head-row .camp-add { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.camp-add-form { display: none; align-items: center; gap: 6px; }
/* Kampagnen-Karte: gestapelt (Name / Skript+Status / Agenten) statt einer
   ueberladenen Zeile. */
.camp2 { display: flex; flex-direction: column; gap: 7px;
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; margin-bottom: 8px; }
.camp2 .c-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.camp2 .c-name { font-size: 14px; } .camp2 .c-name b { font-weight: 700; }
.camp2 .c-skript { display: flex; align-items: center; gap: 6px; flex: none; }
.camp2 .c-skript .cs-lab { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); }
.camp2 .c-skript .inp { padding: 4px 8px; font-size: 12.5px; max-width: 240px; }
.camp2 .c-agents { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.camp2 .c-unlink { margin-left: auto; flex: none; }

/* ---- Gespraechsexport (Mockup 04.08.2026) ----
   Eigene Variablen mit dunkler Entsprechung -- wie der Aktivitaeten-Block
   weiter oben. Der erste Entwurf griff auf --panel/--fg/--accent-bg zu, die
   es hier nicht gibt: Im hellen Thema waeren die Fallbacks nicht aufgefallen,
   im dunklen haette die Seite weisse Kaesten gehabt. */
:root {
  --ge-flaeche: #eef1f5; --ge-akzent-bg: #eef2ff; --ge-akzent-ink: #2f4fb0;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ge-flaeche: #1b2330; --ge-akzent-bg: #1f2a44; --ge-akzent-ink: #a9c1ff;
  }
}
.ge-kopf { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; }
.ge-titel { font-size: 18px; font-weight: 500; }
.ge-rolle, .ge-sub { font-size: 12px; color: var(--muted); }
.ge-lbl { font-size: 12px; color: var(--muted); margin: 0 0 5px; }
.ge-zeile1 { display: grid; grid-template-columns: 1fr 2fr; gap: 12px;
  margin-bottom: 12px; }
.ge-zeile2 { display: grid; grid-template-columns: auto auto 1fr; gap: 10px;
  align-items: end; margin-bottom: 12px; }
.ge-feld { width: 100%; padding: 7px 9px; font-size: 13px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: inherit;
  font-family: inherit; }
.ge-schnell { padding-bottom: 1px; display: flex; gap: 6px; }
.ge-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Die Chips SIND Knoepfe -- sie muessen sich auch so verhalten, nicht nur so
   aussehen. Ohne cursor/hover haelt man sie fuer Etiketten und klickt nie. */
.ge-chips .chip, .ge-schnell .chip {
  font-size: 12px; padding: 4px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--bg); color: var(--muted);
  font-family: inherit; line-height: 1.5; }
.ge-chips .chip.an, .ge-schnell .chip.an {
  background: var(--ge-akzent-bg); color: var(--ge-akzent-ink);
  border-color: var(--ge-akzent-ink); }
.ge-chips .chip:hover, .ge-schnell .chip:hover { border-color: var(--muted); }
.ge-chips .chip:focus-visible, .ge-schnell .chip:focus-visible,
.ge-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ge-chips .chip b { font-weight: 600; }
.ge-statuskopf { display: flex; justify-content: space-between; align-items: baseline; }
.ge-link { border: 0; background: none; font-size: 11px; cursor: pointer;
  color: var(--accent); font-family: inherit; padding: 0; }
.ge-status { margin-bottom: 12px; }
/* Agenten-Filter (Ticket 26): Der Ausschnitt-Hinweis erscheint, sobald
   gefiltert wird -- nicht erst in der Datei. */
.ge-ag-hinweis { margin-top: 7px; font-size: 12px; padding: 5px 9px;
  border-radius: 8px; background: var(--warn-bg); color: var(--warn-ink); }
.ge-schalter { display: flex; gap: 18px; align-items: center; font-size: 13px;
  border-top: 1px solid var(--line); padding-top: 11px; flex-wrap: wrap; }
.ge-schalter label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ge-treffer { background: var(--ge-flaeche); border-radius: 8px; padding: 11px 13px;
  margin-bottom: 12px; }
.ge-trefferzeile { display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 8px; font-size: 13px; }
.ge-groesse { font-size: 12px; color: var(--muted); }
.ge-knoepfe { margin-top: 9px; display: flex; gap: 8px; }
.ge-knopf-primaer, .ge-knopf { font-size: 13px; padding: 8px 16px; border-radius: 8px;
  cursor: pointer; font-family: inherit; font-weight: 500;
  border: 1px solid var(--line); }
.ge-knopf-primaer { background: var(--ink); color: var(--bg); border-color: transparent; }
.ge-knopf { background: var(--card); color: var(--muted); font-weight: 400; }
.ge-warn { display: flex; gap: 10px; border-radius: 8px; padding: 9px 12px;
  margin-bottom: 14px; font-size: 12.5px;
  background: var(--warn-bg); color: var(--warn-ink); }
.ge-hinweis { display: flex; gap: 10px; align-items: baseline; border-radius: 8px;
  padding: 9px 12px; margin-bottom: 12px; font-size: 13px;
  background: var(--ge-flaeche); color: var(--muted); }
.ge-grund { font-size: 12px; }
@media (max-width: 720px) {
  .ge-zeile1, .ge-zeile2 { grid-template-columns: 1fr; }
}

/* Auswerten-Knopf: Der Grundfilter wird bewusst ausgewertet, weil die
   Abfrage ueber zwei Datenbanken laeuft. Die Status-Chips danach rechnen
   lokal -- deshalb sitzt der Knopf oben beim Filter, nicht bei den
   Ergebnissen. */
.ge-auswerten { display: flex; align-items: center; gap: 10px;
  margin: 4px 0 12px; }
.ge-auswerten .ge-knopf-primaer { padding: 7px 18px; }
/* Hervorgehoben, solange der Filter geaendert und noch nicht ausgewertet
   ist -- der Knopf soll dann auffallen, sonst nicht. */
.ge-hervor { box-shadow: 0 0 0 3px rgba(47, 107, 255, .22); }
/* Veraltete Zahlen gedaempft: Alte Treffer, die wie neue aussehen, sind
   schlimmer als eine Wartezeit. */
.ge-veraltet { opacity: .45; }
.ge-veraltet .ge-knopf-primaer, .ge-veraltet .ge-knopf { pointer-events: none; }

/* ---- Aktivitaeten: Mini-Statistik in der Kachel-Kopfzeile (05.08.2026) ----
   Variante "nur Zahlen" (abgenommen). Alle Werte sind TAGESSUMMEN DES
   AGENTEN, nicht der Kachel -- die Arbeitszeit kommt aus Crewmeister und
   ist agentenweit. Deshalb steht "Tag gesamt" dabei. */
.act-zeit { display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  margin-top: 7px; padding-top: 6px; border-top: 0.5px solid var(--line);
  font-size: 12.5px; font-variant-numeric: tabular-nums; }
.act-zeit .az-lbl { color: var(--muted); }
.act-zeit b { font-weight: 600; }
.az-pkt { display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 5px; vertical-align: 0; }
/* Dieselben Farben wie die Mini-Timeline darunter -- die Zeile erklaert die
   Balken, also muessen die Farben dieselben sein. */
.az-call { background: var(--akt-call); }
/* Ein Punkt fuer beide Phasen: Die Zahl fasst Vor- und Nachbereitung
   zusammen, also zeigt der Punkt beide Farben statt einer willkuerlich
   gewaehlten. Die Mini-Timeline darunter faerbt sie weiter getrennt. */
.az-drum { background: linear-gradient(90deg,
  var(--akt-prep) 0 50%, var(--akt-wrap) 50% 100%); }
.az-flag { color: #b45309; font-weight: 600; }
.act-zeit-warn .az-g b { color: #b45309; }
.act-zeit-hinweis { margin-top: 5px; padding: 5px 9px; border-radius: 6px;
  background: var(--warn-bg); color: var(--warn-ink); font-size: 12px; }
@media (prefers-color-scheme: dark) {
  .az-flag, .act-zeit-warn .az-g b { color: #fbbf24; }
}

/* Warteanzeige am Auswerten-Knopf. Die Abfrage geht ueber zwei Datenbanken
   und dauert bei grossen Zeitraeumen mehrere Sekunden -- ohne Rueckmeldung
   klickt man ein zweites Mal. */
.ge-auswerten .ge-knopf-primaer:disabled { opacity: .75; cursor: progress; }
.ge-laeuft { display: inline-flex; align-items: center; gap: 7px; }
.ge-spinner { width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  animation: ge-dreh .7s linear infinite; }
@keyframes ge-dreh { to { transform: rotate(360deg); } }
/* Wer Bewegung nicht mag, bekommt einen ruhigen Punkt statt eines Rades --
   die Aussage "es laeuft" steht ohnehin im Knopftext. */
@media (prefers-reduced-motion: reduce) {
  .ge-spinner { animation: none; border-top-color: rgba(255, 255, 255, .35); }
}

/* Bilder-Stand in der Skriptverwaltung (11.08.2026). Eine Zeile unter dem
   Upload -- sichtbar, ohne die Flaeche zu belasten. */
.sk-bilder { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--line,#e5e7eb); }
.sk-bilder .btn.mini { padding:3px 10px; font-size:12px; }

/* "laeuft noch" in der Rohdaten-Ansicht (12.08.2026): weder gruen noch grau --
   es ist ein Zwischenstand, keine Wertung. */
.st-laeuft { color: var(--accent, #2f7fd1); font-weight: 600; }

/* Sync-Keys je Kampagne (12.08.2026) */
.sync-row { gap:8px; flex-wrap:wrap; align-items:center; }
.sync-maske { font-family:ui-monospace,monospace; font-size:12px; }
.sync-maske.ohne { font-style:italic; }
.sync-maske.klartext { color:var(--bad-ink,#b42318); font-weight:600;
  user-select:all; }
.sync-an { display:flex; align-items:center; gap:4px; font-size:12px; }

/* Roter Balken: fehlender Sync-Schluessel (25.08.2026, Ticket 30).
   KEIN neues Farbsystem -- es sind die Fehlerfarben, die die Flaeche ohnehin
   fuehrt (--err-bg/--err-ink, hell und dunkel definiert). Neu ist nur die
   Kante links: Sie macht aus dem Hinweisfeld einen BALKEN, der auch im
   ueberflogenen Blick als solcher gelesen wird. */
.banner.sync-alarm { border-left: 6px solid var(--err-ink); }
.sync-alarm-kopf { font-weight: 700; font-size: 15px; }
.sync-alarm-liste { margin: 6px 0; }
.sync-alarm-fuss { font-size: 12px; opacity: .9; }
.sync-alarm-zeile { color: var(--err-ink); background: var(--err-bg);
  border-radius: 8px; padding: 4px 8px; font-weight: 600; }
.sync-alarm-tag { background: var(--err-ink); color: #fff; border-radius: 6px;
  padding: 1px 6px; font-size: 11px; font-weight: 700; margin-left: 6px;
  white-space: nowrap; }
/* Spalte „Letztes Gespraech" der Kontaktsuche (Ticket 31, 26.08.2026).
   KEINE neue Farbwelt: `--ok-ink` fuehrt die Flaeche ohnehin, hell und dunkel. */
.letztgespr { white-space: nowrap; }
.letztgespr .lgok { color: var(--ok-ink); font-weight: 700; }

/* ================= Kampagnen-Karte (/verwaltung) =================
   Design-Handoff vom 28.08.2026 (Freigabe Lorenz), Vorlage im Repo unter
   `docs/design/kampagnenkarte/`. Der Block liegt HIER und nicht inline in
   `verwaltung.html`, weil die Seite 34 Karten traegt: 10,4 KB Stil in der
   Vorlage waeren 10,4 KB in JEDER Antwort, hier sind sie einmal geholt und
   danach im Browser-Cache (`css_v()` als Kennung). Dieselbe Ueberlegung wie
   bei `.st-row` weiter oben. */
  /* ================= KAMPAGNEN-KARTE (Design-Handoff, 28.08.2026) =========

     DIE FARBEN DES HANDOFFS STEHEN ALS EIGENE VARIABLEN, nicht als feste
     Hexwerte im Regelwerk -- und das ist der einzige Punkt, an dem diese
     Umsetzung von der Vorlage abweicht: Jarvis hat seit je einen DUNKLEN
     Modus (`@media (prefers-color-scheme: dark)` in `app.css`, Zeile 15).
     Wer die 22 Hexwerte des Entwurfs direkt hinschreibt, baut eine weisse
     Karte in eine dunkle Seite. Im hellen Modus stehen deshalb exakt die
     Werte des Handoffs; im dunklen zeigen dieselben Namen auf die
     Haus-Variablen. Derselbe Gedanke wie „Formularelemente bleiben nativ im
     Jarvis-Stil" (Handoff, Abschnitt Fidelity). */
  .kk, .kk-ovl .kk-dlg, .kk-archiv {
    --kkc-karte: #ffffff;  --kkc-rand: #dbe0e8;   --kkc-innen: #e8ebf0;
    --kkc-bedien: #c9d2de; --kkc-chip: #e2e6ec;   --kkc-box: #fafbfc;
    --kkc-archiv: #f7f8fa; --kkc-zaehler: #e5e8ee;
    --kkc-ink: #1f2937;    --kkc-ink2: #374151;   --kkc-ink3: #4b5563;
    --kkc-daempf: #6b7280; --kkc-leise: #9ca3af;
    --kkc-blau: #2563eb;   --kkc-blau-h: #1d4ed8;
    --kkc-gruen: #15803d;  --kkc-gruen-r: #bbe3c5; --kkc-gruen-b: #f2fbf4;
    --kkc-amber: #b45309;  --kkc-amber-t: #8a5a00;
    --kkc-amber-r: #f0dcbb; --kkc-amber-b: #fffaf0;
    --kkc-rot: #b42318;    --kkc-rot-b: #fef3f2;
    --kkc-hover: #f3f4f6;  --kkc-hover-b: #f0f5ff; --kkc-hover-m: #f3f6fb;
  }
  @media (prefers-color-scheme: dark) {
    .kk, .kk-ovl .kk-dlg, .kk-archiv {
      --kkc-karte: var(--card);   --kkc-rand: var(--line);
      --kkc-innen: var(--line);   --kkc-bedien: var(--line);
      --kkc-chip: var(--line);    --kkc-box: var(--bg);
      --kkc-archiv: var(--bg);    --kkc-zaehler: var(--line);
      --kkc-ink: var(--ink);      --kkc-ink2: var(--ink);
      --kkc-ink3: var(--muted);   --kkc-daempf: var(--muted);
      --kkc-leise: var(--muted);
      --kkc-blau: var(--accent);  --kkc-blau-h: var(--accent);
      --kkc-gruen: #4ade80;       --kkc-gruen-r: #1f4a30; --kkc-gruen-b: #12261a;
      --kkc-amber: var(--warn-ink); --kkc-amber-t: var(--warn-ink);
      --kkc-amber-r: #4a3a12;     --kkc-amber-b: var(--warn-bg);
      --kkc-rot: var(--err-ink);  --kkc-rot-b: var(--err-bg);
      --kkc-hover: var(--bg);     --kkc-hover-b: var(--bg); --kkc-hover-m: var(--bg);
    }
  }

  /* `hidden` MUSS GEWINNEN, und das ist kein Selbstlaeufer: Das Attribut wirkt
     ueber die Browser-Vorgabe `[hidden] { display: none }` -- eine Regel mit
     der schwaechsten Spezifitaet, die JEDE eigene `display`-Angabe schlaegt.
     Am 28.08.2026 beim ersten Browserlauf gemessen: Der Sync-Detailbereich
     (`display: grid`) stand offen, obwohl er `hidden` trug, und die
     Primaeraktion des Dialogs (`.btn` ist `display: inline-block`) blieb im
     Loesen-Fall sichtbar -- also genau der Knopf, den es dort NICHT geben
     darf. Wer hier eine `display`-Regel ergaenzt, ergaenzt die zugehoerige
     `[hidden]`-Zeile mit. */
  .kk .kk-sync-detail[hidden], .kk .kk-menue[hidden],
  .kk-dlg-ziel[hidden], .kk-dlg-fuss .btn[hidden] { display: none; }

  /* ---- Die Karte selbst: Ruhe-Zustand ---- */
  .camp2.kk { display: block; position: relative; padding: 0; gap: 0;
    background: var(--kkc-karte); border: 1px solid var(--kkc-rand);
    border-radius: 8px; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); }
  .kk .kk-kopf { display: flex; align-items: center; gap: 14px; padding: 12px 14px; }
  .kk .kk-caret { border: none; background: none; cursor: pointer; padding: 2px;
    width: 20px; color: var(--kkc-daempf); font-size: 12px; line-height: 1; }
  .kk .kk-titel { min-width: 280px; display: flex; align-items: baseline; gap: 8px; }
  .camp2.kk .c-name { font-size: 15px; }
  .camp2.kk .c-name b { font-weight: 700; color: var(--kkc-ink); }
  .kk .kk-titel .camp-id { font-size: 11px; color: var(--kkc-leise); }
  .kk .kk-chips { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
  .kk .kk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    padding: 3px 9px; border-radius: 99px; white-space: nowrap;
    border: 1px solid var(--kkc-chip); background: var(--kkc-box);
    color: var(--kkc-ink2); }
  .kk .kk-chip.kk-leise { color: var(--kkc-leise); }
  .kk .kk-chip.kk-gruen { color: var(--kkc-gruen); border-color: var(--kkc-gruen-r);
    background: var(--kkc-gruen-b); }
  .kk .kk-chip.kk-warn { color: var(--kkc-amber); border-color: var(--kkc-amber-r);
    background: var(--kkc-amber-b); }
  .kk .kk-punkt { font-size: 9px; line-height: 1; }
  .kk .btn.kk-bearbeiten { font-size: 13px; padding: 5px 14px; border-radius: 6px;
    border: 1px solid var(--kkc-bedien); background: var(--kkc-karte);
    color: var(--kkc-blau); flex: none; }
  .kk .btn.kk-bearbeiten:hover { background: var(--kkc-hover-b); color: var(--kkc-blau-h); }
  .kk .btn.kk-mehr { font-size: 16px; padding: 3px 9px; border-radius: 6px;
    border: 1px solid var(--kkc-bedien); background: var(--kkc-karte);
    color: var(--kkc-ink3); line-height: 1.1; flex: none; }
  .kk .btn.kk-mehr:hover { background: var(--kkc-hover); }

  /* Der Blocker-Satz bleibt im Ruhe-Zustand stehen -- eingerueckt unter den
     Namen, damit die Zeile darueber als Kopf lesbar bleibt. */
  .kk .kk-blocker { padding: 0 14px 11px 48px; font-size: 12.5px;
    color: var(--kkc-amber-t); }
  .kk .kk-blocker .kk-neben, .kk .kk-blocker.kk-neben { color: var(--kkc-leise); }
  .camp2.kk .c-row.sync-alarm-zeile { margin: 0 14px 11px 48px; }
  .kk .kk-ohne-agent { font-size: 12px; color: var(--kkc-amber); }

  /* ---- Das ⋯-Menue ---- */
  .kk .kk-menue { position: absolute; right: 12px; top: 48px; z-index: 30;
    background: var(--kkc-karte); border: 1px solid var(--kkc-bedien);
    border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
    min-width: 280px; padding: 6px 0; }
  .kk .kk-menue-kopf { font-size: 11px; font-weight: 700; letter-spacing: .05em;
    color: var(--kkc-leise); padding: 6px 14px 4px; }
  .kk .kk-menue-eintrag { display: block; width: 100%; text-align: left; border: none;
    background: none; padding: 8px 14px; font-size: 13.5px; color: var(--kkc-ink);
    cursor: pointer; font-family: inherit; }
  .kk .kk-menue-eintrag:hover { background: var(--kkc-hover-m); }
  .kk .kk-menue-eintrag.kk-rot { color: var(--kkc-rot); }
  .kk .kk-menue-eintrag.kk-rot:hover { background: var(--kkc-rot-b); }
  .kk .kk-menue-aus { padding: 8px 14px; font-size: 13.5px; color: var(--kkc-leise); }
  .kk .kk-menue-aus span { display: block; font-size: 12px; margin-top: 2px; }

  /* ---- Aufgeklappt: zwei Spalten ---- */
  .kk .kk-auf { display: none; border-top: 1px solid var(--kkc-innen);
    grid-template-columns: 1fr 1fr; }
  .camp2.kk.kk-offen .kk-auf { display: grid; }
  .kk .kk-spalte { padding: 16px 18px 18px; min-width: 0; }
  .kk .kk-betrieb { border-right: 1px solid var(--kkc-innen); }
  .kk .kk-abschnitt { font-size: 11px; font-weight: 700; letter-spacing: .05em;
    color: var(--kkc-leise); }
  .kk .kk-betrieb .kk-abschnitt { margin-bottom: 12px; }
  .kk .kk-spalte-kopf { display: flex; align-items: center;
    justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .kk .kk-grid { display: grid; grid-template-columns: 88px 220px 1fr;
    gap: 10px 12px; align-items: center; font-size: 13px; }
  .kk .kk-lab { color: var(--kkc-daempf); }
  .kk .kk-weit { grid-column: 2 / 4; display: flex; align-items: center; gap: 10px;
    min-width: 0; }
  .camp2.kk .kk-weit .inp { width: 100%; font-size: 12.5px; padding: 5px 8px;
    border: 1px solid var(--kkc-bedien); border-radius: 5px; max-width: none; }
  .kk .kk-stift { font-size: 13px; padding: 3px 9px; border-radius: 5px;
    border: 1px solid var(--kkc-bedien); background: var(--kkc-karte);
    color: var(--kkc-ink3); margin-left: auto; flex: none; line-height: 1.4; }
  .kk .kk-stift:hover { background: var(--kkc-hover); }
  .camp2.kk .c-bew { display: flex; flex-wrap: nowrap; gap: 10px; padding: 0;
    margin: 0; background: none; border: none; border-radius: 0;
    overflow: hidden; }
  .camp2.kk .c-bew .muted { white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; }
  .camp2.kk .c-aktiv { grid-column: 2 / 4; }
  .camp2.kk .c-skript { flex: 1 1 auto; }

  /* Sync: Kaestchen und Abzeichen links (220px, wie im Raster), die zwei
     Knoepfe rechtsbuendig -- alle Bedienelemente der Spalte enden an
     derselben Kante. */
  .kk .kk-sync { grid-column: 2 / 4; display: grid;
    grid-template-columns: 220px 1fr; gap: 8px 12px; align-items: center; }
  .kk .kk-sync-links { display: flex; align-items: center; gap: 10px; }
  .kk .kk-sync-rechts { display: flex; align-items: center; gap: 8px;
    justify-content: flex-end; min-width: 0; }
  .kk .kk-sync-rechts .sync-meldung { overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
  .kk .sync-an { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
  .kk .kk-dbsync { font-size: 11px; font-weight: 700; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 5px; color: #fff;
    background: var(--kkc-leise); }
  .kk .kk-dbsync.kk-dbsync-da { background: var(--kkc-gruen); }
  .kk .kk-sync-detail { grid-column: 1 / 3; display: grid; gap: 8px;
    border: 1px solid var(--kkc-innen); border-radius: 6px; padding: 10px 12px;
    background: var(--kkc-box); }
  .kk .kk-sync-token { display: flex; align-items: center; gap: 8px; }
  .kk .kk-sync-token .sync-maske { font-family: ui-monospace, Menlo, monospace;
    font-size: 11.5px; color: var(--kkc-daempf); }
  .camp2.kk .kk-sync-detail .inp { width: 100%; font-size: 12.5px; padding: 5px 8px;
    border: 1px solid var(--kkc-bedien); border-radius: 5px; }

  /* Besetzung: je Stufe eine Box. */
  .camp2.kk .stufe { border: 1px solid var(--kkc-innen); border-left-width: 1px;
    border-radius: 6px; padding: 10px 12px; margin: 0 0 8px;
    background: var(--kkc-box); }
  .kk .kk-stufe-kopf { display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; }
  .kk .kk-stufe-kopf > b { font-weight: 700; font-size: 13.5px; }
  .kk .kk-stufe-kopf .task-chip { font-size: 11px; color: var(--kkc-leise); }
  .camp2.kk .stufe-skript { margin: 0 0 0 auto; max-width: 150px; }
  .camp2.kk .stufe-skript .inp { font-size: 12px; padding: 3px 6px;
    border: 1px solid var(--kkc-bedien); border-radius: 5px; max-width: 150px; }
  .camp2.kk .c-agents { gap: 6px; }
  .camp2.kk .c-agents .chip { font-size: 12px; padding: 3px 6px 3px 10px;
    border-radius: 99px; background: var(--kkc-chip); color: var(--kkc-ink2); }
  .camp2.kk .kk-agent-wahl { font-size: 12px; padding: 3px 10px; border-radius: 99px;
    border: 1px dashed var(--kkc-bedien); background: var(--kkc-karte);
    color: var(--kkc-blau); }

  /* ---- Der Dialog (einer je Seite) ---- */
  .kk-ovl { align-items: center; }
  .kk-ovl .kk-dlg { width: 480px; max-width: 90vw; border-radius: 10px;
    padding: 22px 24px; background: var(--kkc-karte); color: var(--kkc-ink);
    box-shadow: 0 20px 50px rgba(16, 24, 40, .3); }
  .kk-dlg-titel { font-weight: 700; font-size: 16px; margin-bottom: 4px; }
  .kk-dlg-kampagne { font-size: 12.5px; color: var(--kkc-daempf); margin-bottom: 14px; }
  .kk-dlg-text { font-size: 13px; margin-bottom: 18px; line-height: 1.5; }
  .kk-dlg-text.kk-rot { color: var(--kkc-rot); }
  .kk-dlg-text .kk-geprueft { color: var(--kkc-daempf); display: block; margin-top: 4px; }
  .kk-dlg-ziel { margin-bottom: 18px; }
  .kk-ovl .kk-dlg .inp { width: 100%; font-size: 13.5px; padding: 8px 10px;
    border: 1px solid var(--kkc-bedien); border-radius: 6px; }
  .kk-dlg-fuss { display: flex; justify-content: flex-end; gap: 10px; }
  .kk-dlg-fuss .btn { font-size: 13.5px; padding: 7px 16px; border-radius: 6px; }
  .kk-dlg-fuss .btn.ghost { border: 1px solid var(--kkc-bedien);
    background: var(--kkc-karte); color: var(--kkc-ink); }
  .kk-dlg-fuss .btn.kk-primaer { border: 1px solid var(--kkc-blau);
    background: var(--kkc-blau); color: #fff; }

  /* ---- Seitenkopf des Projekts (Handoff §5) ----
     Der Entwurf zeichnet einen Seitenkopf ueber EINEM Kartenstapel:
     Projektname 19px/700, daneben „Mandant · N Kampagnen" in 13px gedaempft.
     `/verwaltung` ist eine Zweispalten-Flaeche mit GESTAPELTEN Projekten --
     uebernommen sind deshalb die Masse, nicht die Seitenstruktur. */
  .proj > .phdr-view .pv-name { font-size: 19px; }
  .proj > .phdr-view .p-count { font-size: 13px; }

  /* ---- Der Archiv-Abschnitt (Handoff §5) ---- */
  .archiv-block.kk-archiv { background: var(--kkc-archiv); border: 1px solid var(--kkc-rand);
    border-radius: 8px; margin: 22px 0 0; }
  .archiv-block.kk-archiv > summary { display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; font-size: 13px; font-weight: 400; color: var(--kkc-daempf);
    list-style: none; }
  .archiv-block.kk-archiv > summary::-webkit-details-marker { display: none; }
  .archiv-block.kk-archiv[open] > summary { border-bottom: none; }
  .archiv-block.kk-archiv[open] .kk-archiv-caret { transform: rotate(90deg); }
  .kk-archiv-caret { font-size: 11px; display: inline-block; transition: transform .1s; }
  .kk-zaehler { background: var(--kkc-zaehler); border-radius: 99px; padding: 1px 8px;
    font-size: 11.5px; color: var(--kkc-ink3); }
  .kk-archiv-zeile { display: flex; align-items: center; gap: 14px; padding: 8px 12px;
    margin: 0 14px; border-top: 1px solid var(--kkc-innen); font-size: 13px;
    color: var(--kkc-daempf); flex-wrap: wrap; }
  .kk-archiv-zeile:last-child { padding-bottom: 12px; }
  .kk-archiv-name { min-width: 260px; color: var(--kkc-ink3); }
  .kk-archiv-name .camp-id { font-size: 11px; }
  .kk-archiv-wann { flex: 1; font-size: 12px; }
  .kk-link { border: none; background: none; padding: 0; cursor: pointer;
    font-size: 12.5px; color: var(--kkc-blau); font-family: inherit; }
  .kk-link:hover { color: var(--kkc-blau-h); text-decoration: underline; }

  /* Schmale Fenster: die zwei Spalten werden eine. */
  @media (max-width: 900px) {
    .camp2.kk.kk-offen .kk-auf { grid-template-columns: 1fr; }
    .kk .kk-betrieb { border-right: none; border-bottom: 1px solid var(--kkc-innen); }
    .kk .kk-titel { min-width: 0; }
  }

/* Ticket 67: der Ladeschirm fuer langsame Seiten (Wochenuebersicht, 13-83 s).
   Er legt sich UEBER die alte Seite und laesst sie durchscheinen -- wer klickt,
   soll sehen, dass etwas passiert, und trotzdem wissen, wo er herkommt.
   Der Balken ist UNBESTIMMT: Die Route liefert keinen Fortschritt (Begruendung
   in base.html), und ein Balken, der Fortschritt vortaeuscht, waere schlimmer
   als keiner -- er verspricht ein Ende, das er nicht kennt. */
#ladeschirm { position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg, #fff) 78%, transparent); }
#ladeschirm .ls-box { max-width: 30rem; padding: 18px 22px; text-align: center;
  border-radius: 10px; background: var(--card, #fff);
  border: 1px solid var(--line, #d5dde6); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
#ladeschirm .ls-text { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
#ladeschirm .ls-fuss { font-size: 12px; color: var(--muted, #667); margin-top: 10px; }
#ladeschirm .ls-bar { height: 6px; border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--muted, #889) 20%, transparent); }
#ladeschirm .ls-bar-in { height: 100%; width: 38%; border-radius: 3px;
  background: var(--acc, #2f6fed); animation: ls-lauf 1.4s ease-in-out infinite; }
@keyframes ls-lauf { 0% { margin-left: -38%; } 100% { margin-left: 100%; } }
/* Wer Bewegung abgestellt hat, bekommt einen ruhigen Balken statt keiner
   Rueckmeldung -- die Aussage „es laeuft" haengt nicht an der Animation. */
@media (prefers-reduced-motion: reduce) {
  #ladeschirm .ls-bar-in { animation: none; width: 100%; opacity: .6; }
}

/* TICKET 74 (21.09.2026): der Haken „gutes Gespraech" neben dem Abspieler.
   Er steht auf beiden Hoerflaechen (Dialfire-Edit und Fall-Dialog) und sieht
   dort gleich aus -- zwei Gestalten fuer dieselbe Handlung waeren zwei
   Handlungen. Gedaempft, solange nicht gesetzt: Die Markierung ist die
   Ausnahme, nicht der Normalfall, und ein Dutzend leuchtender Haken je Seite
   wuerde niemand mehr lesen. */
.gutercall {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12.5px; color: var(--muted); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); white-space: nowrap;
}
.gutercall:hover { border-color: var(--accent); color: var(--ink); }
.gutercall:has(.gc-haken:checked) {
  color: var(--ink); border-color: var(--dot);
  background: color-mix(in srgb, var(--dot) 14%, transparent);
}
/* Ein Haken, dessen Schreibweg gescheitert ist, darf NICHT gesetzt aussehen --
   sonst glaubt der Teamleiter, er habe markiert. Das Skript setzt die Klasse. */
.gutercall.gc-fehler { border-color: var(--err-ink); color: var(--err-ink); }

/* Kontaktseite: Lector-Knopf im Kopf und Agenten-Notiz (Wort Lorenz 23.09.2026). */
.kkopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lectork { margin-left: auto; font-size: 12px; font-weight: 700; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--accent); color: var(--accent);
  text-decoration: none; white-space: nowrap; }
.lectork:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lectork.aus { border-color: var(--line); color: var(--muted); cursor: not-allowed; }
.agnotiz-text { white-space: pre-wrap; margin: 6px 0 4px; font-size: 14px; }

/* Kontaktseite, Ticket 83: Zeitmarke je Beitrag, Klick springt im Abspieler. */
.turn.tsprung { cursor: pointer; }
.turn.tsprung:hover .turntxt { outline: 1px solid var(--accent); outline-offset: 2px; }
.turnts { font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* Ticket 82: Fenster fuer den Pflichtsatz zum guten Gespraech. */
.gc-fenster { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
  width: min(460px, calc(100vw - 32px)); background: var(--card); color: var(--ink); }
.gc-fenster::backdrop { background: rgba(0, 0, 0, .35); }
.gc-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.gc-frage { font-weight: 700; font-size: 14px; }
.gc-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 8px;
  border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.gc-knoepfe { display: flex; justify-content: flex-end; gap: 8px; }
.gg-satz { font-size: 13px; max-width: 360px; }

/* Ticket 84, Stufe 1: Bearbeitungen in Jarvis auf der Kontaktseite. */
.bearb-tbl { margin: 6px 0 4px; }
.bearb-tbl tr.bearb-fehler td { color: var(--neg-ink, #b3261e); }

/* Zustandsfeld (Vertrag B §2): Wort + Grund an der Stelle des Transkripts,
   eine Farbe je Klasse; der Rollen-Hinweis bei `bewertbar` leise. */
.txzustand { margin: 6px 0; padding: 6px 10px; border-radius: 8px; font-size: 13px;
  border: 1px solid var(--line); background: var(--card); }
.txzustand.txz-kommt_noch { border-color: var(--accent); color: var(--accent); }
.txzustand.txz-kommt_nie { border-color: var(--line); color: var(--muted); }
.txzustand.txz-nicht_bewertbar { border-color: var(--warn-ink, #8a5a00);
  background: var(--warn-bg, #fff6e0); color: var(--warn-ink, #8a5a00); }
.txrollen { margin: 4px 0; font-size: 12px; color: var(--muted); }

/* Dialfire-Anlage auf /admin (18.10.2026): Knopf an der Zeile, Fehler darunter,
   das Startpasswort gut lesbar und einmal. */
.df-knopf { display: flex; gap: 4px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.df-knopf .inp.small { padding: 2px 4px; font-size: 12px; max-width: 120px; }
.df-fehler { display: block; margin-top: 4px; white-space: normal; }
.einmal-pw { font-size: 18px; letter-spacing: 1px; padding: 2px 8px; }

/* Benutzerübersicht + Nutzer-Fenster (Mockup A/B, 18.10.2026), seit dem Umbau
   nach Entwurf (18.10.2026, Wort Lorenz „speichern und nächster: nein.
   ansonsten übergabe machen für claude code"): die Liste beginnt ohne die drei
   Karten, das Fenster ist 1280 breit mit drei Spalten. Farben NUR aus den
   Haus-Variablen -- hell und dunkel folgen damit `prefers-color-scheme`. */
.nf-ico { flex: none; vertical-align: -2px; }
.nf-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nf-klein { font-size: 12.5px; }
.nf-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-wrap: anywhere; }
details.card > summary { cursor: pointer; }

/* -- Liste: Kopf mit den zwei Aufklapp-Knoepfen -- */
.nf-kopfzeile { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; }
.nf-kopfzeile .h2 { margin: 0; font-size: 22px; letter-spacing: -0.01em; }
.nf-kopf-zahl { font-size: 13.5px; }
.nf-zahl { display: flex; gap: 6px; flex-wrap: wrap; }
.nf-knoepfe { margin-left: auto; display: flex; gap: 8px; align-items: flex-start; }
.nf-auf { position: relative; }
.nf-auf > summary { display: inline-flex; align-items: center; gap: 7px; list-style: none; white-space: nowrap; }
.nf-auf > summary::-webkit-details-marker { display: none; }
.nf-auf > summary::marker { content: ""; }
.nf-auf > summary.btn.ghost { background: var(--card); }
.nf-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(440px, calc(100vw - 32px));
  margin: 0; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 18px 50px rgba(10, 14, 22, .22); }
.nf-panel p { margin: 0; }
.nf-panel-knoepfe { display: flex; gap: 8px 10px; align-items: center; flex-wrap: wrap; }
.nf-neu-form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.nf-ignoriert > summary { cursor: pointer; }
.nf-ignoriert .pick-grid { margin-top: 8px; }
.nf-hinweis-sv { margin: -6px 0 14px; }
.nf-gespeichert { display: flex; align-items: center; gap: 10px; background: var(--ok-bg); color: var(--ok-ink); font-size: 14px; }

/* -- Startpasswort, einmalig -- */
.einmal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 18px; }
.einmal-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border-radius: 10px; background: var(--badge); color: var(--badge-ink); }
.einmal-text { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.einmal-text #spTitel { font-size: 15px; }
.einmal-login { color: var(--ink); }
.einmal .einmal-pw { font-size: 18px; letter-spacing: .06em; padding: 6px 14px; border-radius: 8px;
  border: 1px dashed var(--line); background: var(--bg); }

/* -- Listenkarte -- */
.nf-liste { display: flex; flex-direction: column; gap: 14px; }
.nf-liste > p { margin: 0; }
.nf-kennung-band { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 9px 14px;
  border-radius: 10px; background: var(--warn-bg); color: var(--warn-ink); font-size: 14px; }
.nf-kennung-form { margin: 0 0 0 auto; display: flex; align-items: center; gap: 10px; }
.nf-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.nf-trenner { width: 1px; height: 18px; background: var(--line); margin: 0 6px; }
.nf-suche { margin-left: auto; flex: 1 1 150px; max-width: 260px; height: 34px; }
.utbl { table-layout: fixed; }
.utbl th { font-size: 12.5px; padding: 8px 12px; }
.utbl td { padding: 11px 12px; overflow-wrap: anywhere; }
.utbl td.nf-zwei { padding-top: 9px; }
.utbl .nf-sp-nutzer { width: 20%; } .utbl .nf-sp-rolle { width: 10%; } .utbl .nf-sp-std { width: 72px; }
.utbl .nf-sp-df { width: 14%; } .utbl .nf-sp-abr { width: 17%; } .utbl .nf-sp-sd { width: 16%; }
.utbl .nf-sp-status { width: 104px; } .utbl .nf-sp-auf { width: 34px; }
.utbl td .badge + .nf-klein { margin-top: 3px; }
.utbl tr.rolegroup td { background: color-mix(in srgb, var(--line) 38%, var(--card)); padding: 7px 12px; font-size: 13px; }
.utbl tr.rolegroup .rg-count { color: var(--muted); margin-left: 4px; }
tr.nf-zeile { cursor: pointer; }
tr.nf-zeile:hover td { background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.nf-name { color: inherit; text-decoration: none; font-size: 14px; }
.nf-oeffnen { color: var(--muted); display: inline-flex; }
.nf-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); margin-right: 7px; vertical-align: 1px; }
.nf-archiv-karte > summary { display: flex; align-items: center; gap: 8px; list-style: none; font-size: 14px; flex-wrap: wrap; }
.nf-archiv-karte > summary::-webkit-details-marker { display: none; }
.nf-archiv-karte > summary::marker { content: ""; }
.nf-archiv-karte > summary strong { color: var(--accent); }
.nf-archiv-pfeil { display: inline-flex; color: var(--accent); transition: transform .15s; }
.nf-archiv-karte[open] .nf-archiv-pfeil { transform: rotate(90deg); }
.nf-archiv-karte[open] > summary { margin-bottom: 12px; }

/* -- Fenster: Rahmen -- */
.nf-dlg { width: min(1280px, calc(100vw - 48px)); max-height: calc(100vh - 32px); }
#nfOvl { padding: 16px 24px; }
/* Fehlermeldung Lorenz 18.10.2026 11:52 („das Pop-up ist nicht scrollbar"):
   `.dlg` ist eine Flex-Spalte mit overflow hidden. Das nachgeladene Fenster
   `.nf` muss diese Spalte fortsetzen, sonst bekommt das Formular nie eine
   Hoehe, ab der es selbst scrollt. Kopf, Meldungen und Fuss bleiben stehen,
   nur das Formular rollt -- falls es doch eng wird (auf 1366x768 soll es nicht). */
.nf-dlg > .nf { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.nf-dlg > .nf > .nf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nf-seite { width: min(1280px, 100%); max-height: none; margin: 0 auto; }
.nf-seite-pfad { width: min(1280px, 100%); margin: 0 auto 10px; }
.nf-seite-meldung { width: min(1280px, 100%); margin-left: auto; margin-right: auto; }

/* -- Kopf -- */
.nf-kopf { align-items: center; gap: 14px; padding: 12px 20px; flex-wrap: nowrap; }
.nf-kopf-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nf-kopf-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nf-kopf .dlg-name { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.nf-kopf-knoepfe { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.nf-hist-knopf { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 8px;
  font: inherit; font-size: 13.5px; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.nf-hist-knopf[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.nf-hist-knopf[hidden] { display: none; }
.nf-kopf .nf-x { margin-left: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }

/* -- Meldungsplatz -- */
.nf-meldungen { display: flex; flex-direction: column; gap: 8px; margin: 12px 20px 0; }
.nf-band { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 14px; border-radius: 10px; font-size: 14px; }
.nf-band-ansicht { background: var(--badge); color: var(--badge-ink); }
.nf-band-archiv { background: var(--na-bg); color: var(--ink); }
.nf-band-archiv .nf-ico { color: var(--muted); }

/* -- Koerper: drei Spalten, Tab-Reihenfolge = Markup --
   Die Abstaende sind gegenueber der Uebergabe (Spalte 18/20, Kopf 14, Band 10,
   Fuss 12) um je 2 bis 4 px enger: Erst damit passt der hoechste Zustand
   (archiviert, abweichender Kontoinhaber, Archiv-Band) auf 1366x768 ohne
   Rollen -- gemessen in `tests/browser_nutzer_design.py` [1]. */
.nf-body { padding: 0; }
.nf-felder { border: 0; padding: 0; margin: 0; min-width: 0; }
.nf-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.nf-spalte { padding: 16px 22px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nf-spalte + .nf-spalte { border-left: 1px solid var(--line); }
.nf-bereich { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nf-bereich + .nf-bereich { border-top: 1px solid var(--line); padding-top: 12px; }
.nf-bereich .h3, .nf-bereich > legend { margin: 0; font-size: 15px; font-weight: 700; padding: 0; }
/* Ein gefloatetes <legend> ist kein „gerendertes": Es sitzt nicht im Rahmen
   (die Trennlinie laeuft sonst neben „Zahlung" weiter) und ist ein
   gewoehnliches Element der Flex-Spalte. */
.nf-bereich > legend { float: left; width: 100%; }
.nf-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nf-anschrift { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.nf-bank { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.nf-unten { align-items: end; }
.nf-ganz { grid-column: 1 / -1; }
.nf .fld { min-width: 0; }
.nf .fld > label { display: flex; justify-content: space-between; gap: 6px; }
.nf .fld > .nf-label-mit-zusatz { justify-content: flex-start; flex-wrap: wrap; gap: 0 5px; }
.nf-label-zusatz { text-transform: none; letter-spacing: 0; font-weight: 400; }
.nf .inp { width: 100%; height: 36px; padding: 7px 11px; font-size: 14px; }
.nf .nf-mono-feld .inp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.nf-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nf-anzeige { gap: 2px; padding-bottom: 2px; }
.nf-notiz { margin: 0; font-size: 12.5px; color: var(--muted); }
.nf-unter { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; }
.nf-pille { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; }
.nf-df-liste { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 13.5px; }
.nf-df-liste dt { color: var(--muted); }
.nf-df-liste dd { margin: 0; }
.nf-df-anlegen { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.nf-df-knopf { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; }
.nf-df-nachziehen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* -- Schalter- und Optionskarten -- */
.nf-wahl { display: flex; gap: 12px; align-items: center; padding: 7px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); }
.nf-wahl > input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); flex: none; }
.nf-schalter strong { font-size: 14.5px; }
.nf-schalter:has(> input:checked) { border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.nf-wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nf-option { align-items: flex-start; gap: 10px; }
.nf-option > input { width: 16px; height: 16px; margin-top: 3px; }
.nf-option strong { font-size: 14px; }
.nf-option .nf-unter { font-size: 12px; }
.nf-option:has(input:checked) { border: 1.5px solid var(--accent); padding: 6.5px 11.5px;
  background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.nf-schalter-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nf-schalter-paar > .nf-wahl { align-items: flex-start; padding: 7px 10px; gap: 8px; }
.nf-schalter-paar > .nf-wahl > input { margin-top: 1px; }
.nf-schalter-paar strong { font-size: 14px; white-space: nowrap; }
/* Abrechnungsrhythmus (31.10.2026) in der Kachel „wird abgerechnet":
   zwei Radios in der Hoehe der Unterzeile. */
.nf-rhythmus { display: flex; flex-wrap: wrap; gap: 0 10px; }
.nf-rhythmus .nf-haken { font-size: 12.5px; gap: 4px; line-height: inherit; }
.nf-rhythmus .nf-haken > input { width: 12px; height: 12px; }
.nf-haken { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.nf-haken > input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.nf-bereich-kopf { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.nf-empfaenger { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.nf-empfaenger-lbl { font-size: 13px; color: var(--muted); }
.sd-zahl .sd-bank, .sd-zahl .sd-wallet { display: flex; flex-direction: column; gap: 12px; }
.sd-wahl-hinweis { margin: 0; font-size: 13px; color: var(--muted); }
/* Nur-Ansicht (Admin-Konto fuer den Supervisor): Karten gedaempft. */
.nf-felder:disabled .nf-wahl, .nf-felder:disabled .nf-haken { opacity: .65; cursor: default; }
.nf-felder:disabled .btn { opacity: .5; cursor: default; }

/* -- Hervorhebungen: fehlt, archiviert -- */
.nf-fehlt-tag { font-size: 11px; font-weight: 700; color: var(--warn-ink); text-transform: none; letter-spacing: 0; }
.nf .nf-fehlt > .inp { border-color: var(--warn-ink); background: var(--warn-bg); color: var(--ink); }
.nf .nf-status-archiv { border: 1.5px solid var(--na-ink); background: var(--na-bg); }

/* -- Historie: ohne Skript ein <details> unter den Spalten, im Dialog umgeschaltet -- */
.nf-historie { padding: 0 22px 16px; }
.nf-historie > details > summary { cursor: pointer; padding: 12px 0 8px; }
.nf-hist-tbl { table-layout: fixed; }
.nf-hist-tbl th:nth-child(1) { width: 150px; } .nf-hist-tbl th:nth-child(2) { width: 130px; }
.nf-hist-tbl th, .nf-hist-tbl td { padding: 8px 10px; }
.nf-hist-feld { font-weight: 600; }
.nf-js .nf-historie { display: none; }
.nf-js.nf-hist-an .nf-historie { display: block; padding-top: 8px; }
.nf-js.nf-hist-an .nf-historie > details > summary { display: none; }
.nf-hist-an .nf-spalten { display: none; }

/* -- Fuss -- */
.nf-fuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 20px;
  border-top: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 3%, var(--card)); }
.nf-speichern { padding: 9px 20px; font-weight: 600; }
.nf-abbrechen { padding: 8px 12px; color: var(--muted); text-decoration: none; font: inherit; font-size: 14px;
  background: none; border: 0; cursor: pointer; }
.nf-abbrechen:hover { color: var(--ink); }
.nf-fuss-hinweis { font-size: 12.5px; color: var(--muted); }
.nf-archiv { margin-left: auto; color: var(--err-ink); border-color: var(--err-ink); padding: 7px 14px; }

/* -- Schmale Bildschirme: unter 1100 px zwei Spalten (Annahme der Uebergabe,
   im Entwurf nicht gezeichnet), die Anschrift rutscht darunter; ab 640 px eine. */
@media (max-width: 1100px) {
  .nf-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nf-spalte:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .nf-spalten { grid-template-columns: minmax(0, 1fr); }
  .nf-spalte + .nf-spalte { border-left: 0; border-top: 1px solid var(--line); }
  .nf-knoepfe { margin-left: 0; }
  .nf-suche { margin-left: 0; width: 100%; }
  .nf-kopf { flex-wrap: wrap; }
}