/* Theaterplaner — Design System, Apple-like. Themefähig über CSS-Variablen (Dark Mode
   05.08.2026, s. Ende der Datei) — neue Komponenten IMMER var(--...) statt Hex verwenden,
   sonst blitzt es im Dark Mode weiss auf. */
:root {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --line: #e3e3e8;
  --line-soft: #f0f0f3;
  --text: #1d1d1f;
  --text2: #6e6e73;
  --accent: #3478f6;
  --accent-soft: #eaf1fe;
  --red: #ff375f;
  --green: #34c759;
  --orange: #ff9f0a;
  --radius: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  --sidebar-w: 232px;
  --sidebar-bg: #eeeef1;
  --topbar-bg: rgba(255,255,255,.85);
  --seg-bg: #e6e6ea;
  --input-bg: #ffffff;
  --row-hover: #fafafc;
  --hover-bg: #f2f2f5;
  --hover-accent: #f6f9ff;
  --chip-bg: #ececf0;
  --popover-bg: rgba(250,250,252,.96);
  --search-bg: #f4f4f6;
  --overlay-bg: rgba(0,0,0,.35);
  --warn-soft: #fff4e5;
  --warn-text: #8a5300;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

/* ---------- Layout ---------- */
#app { display: flex; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar-bg);
  border-right: 1px solid var(--line); display: flex; flex-direction: column;
  padding: 18px 12px 14px;
}
.sidebar .logo { padding: 4px 10px 18px; }
.sidebar .logo img { width: 100%; max-width: 170px; display: block; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border-radius: 9px; color: var(--text); border: none; background: none;
  width: 100%; text-align: left; font-size: 14px; font-weight: 500;
  margin-bottom: 2px; transition: background .12s;
}
.nav-item:hover { background: rgba(0,0,0,.05); }
.nav-item.active { background: var(--accent); color: #fff; }
.nav-item .ico { width: 20px; text-align: center; font-size: 15px; }
a.nav-item { text-decoration: none; cursor: pointer; box-sizing: border-box; }
.sidebar .spacer { flex: 1; }
.user-foot { display: flex; align-items: center; gap: 9px; padding: 10px 12px 2px;
  border-top: 1px solid var(--line); margin-top: 8px; }
.sidebar .foot { font-size: 11px; color: var(--text2); padding: 8px 12px 0; }
.user-lang-toggle { display: flex; gap: 4px; padding: 6px 12px 2px; }
.user-lang-toggle button { flex: 1; border: 1px solid var(--line); background: var(--panel);
  color: var(--text2); border-radius: 7px; padding: 3px 0; font-size: 10.5px; font-weight: 700; }
.user-lang-toggle button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.topbar {
  height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  padding: 0 20px; background: var(--topbar-bg); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 17px; font-weight: 600; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.topbar .grow { flex: 1; }
.content { flex: 1; overflow: auto; padding: 20px; }
/* Burger-Menü/Drawer-Overlay: nur <=820px sichtbar (F1) — Basis hier, Verhalten im Media-Block. */
.burger-btn { display: none; border: none; background: none; color: var(--text);
  width: 36px; height: 36px; border-radius: 8px; align-items: center; justify-content: center;
  flex-shrink: 0; }
.burger-btn:hover { background: var(--chip-bg); }
.sidebar-overlay { display: none; }
/* Mobile-Kopfzeile: eigenes Logo + Avatar-Menü — beide nur <=820px sichtbar (Welle M),
   sonst zeigt die Sidebar das Logo/den user-foot bereits permanent (kein doppeltes Logo:
   das Drawer-Logo wird beim Öffnen ausgeblendet, s. Media-Block unten). */
.topbar-logo { display: none; }
.mobile-avatar-btn { display: none; border: none; background: none; padding: 0;
  border-radius: 50%; flex-shrink: 0; }
.mobile-avatar-panel { display: none; }
.ma-head { padding: 4px 6px 12px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.ma-head .nm { font-size: 13.5px; font-weight: 600; }
.ma-head .rl { font-size: 11.5px; color: var(--text2); }
.ma-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 8px;
  border: none; background: none; border-radius: 9px; font-size: 13.5px; color: var(--text);
  text-align: left; text-decoration: none; min-height: 44px; }
.ma-item:hover { background: var(--hover-bg); }
.ma-item.danger { color: var(--red); }

/* ---------- Controls ---------- */
.btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 8px; padding: 7px 14px; font-weight: 500; font-size: 13px;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--hover-bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.danger { color: var(--red); }
.btn.small { padding: 4px 10px; font-size: 12px; border-radius: 7px; }
.btn.plus { width: 32px; height: 32px; padding: 0; border-radius: 50%;
  font-size: 19px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; }
.seg { display: inline-flex; background: var(--seg-bg); border-radius: 8px; padding: 2px; }
.seg button {
  border: none; background: none; padding: 5px 14px; border-radius: 7px;
  font-size: 13px; font-weight: 500; color: var(--text2);
}
.seg button.active { background: var(--input-bg); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* `password` gehoert hier MIT hinein -- bis 22.08.2026 fehlte es, und jedes
   Passwortfeld im System fiel damit auf den Browser-Default zurueck (kein
   Rahmen, keine Polsterung, keine Breite). Auf der Anmeldung stand deshalb ein
   gestyltes E-Mail-Feld ueber einem nackten Passwortfeld. Gefunden beim
   Login-Facelift; derselbe Fehlertyp wie bei `input:not([type])` weiter unten. */
input[type=text], input[type=date], input[type=time], input[type=number],
input[type=email], input[type=password], select, textarea {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  background: var(--input-bg); font-size: 13px; outline: none; width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(52,120,246,.15); }
label.fld { display: block; font-size: 12px; color: var(--text2);
  font-weight: 500; margin-bottom: 4px; }
/* Interne-Notizen-Felder (Dispo-Beschreibung, Programm-Popover) — bewusst auffällig markiert. */
.note-internal { background: #fffbeb; border-color: #f2e3b3; }
:root[data-theme="dark"] .note-internal { background: #2e2508; border-color: #55480f; color: var(--text); }

/* ---------- Cards / Panels ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.card h3 { font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); margin-bottom: 12px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* ---------- Kalender ---------- */
/* Responsive: #content selbst schrumpft schon (.main hat min-width:0) — die Grids
   darunter aber nicht automatisch, weil CSS-Grid-Spuren mit 1fr ohne minmax(0,…) sich
   am min-content ihrer Zellen orientieren (Klassiker). Fix: minmax(0,1fr) app-weit für
   die Kalender-Grids + min-width:0 auf den Zellen, damit Ellipsis/Umbruch greifen kann. */
.cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; max-width: 100%; }
.cal-head h2 { font-size: 22px; font-weight: 700; min-width: 0; flex-shrink: 1; }
.cal-grid {
  display: grid; grid-template-columns: 34px repeat(7, minmax(0, 1fr));
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  max-width: 100%;
}
.cal-dow { padding: 8px 10px; font-size: 11px; font-weight: 600;
  color: var(--text2); text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 1px solid var(--line); text-align: right; min-width: 0; }
.cal-kw { display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--text2); background: var(--row-hover);
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
.cal-cell {
  min-height: 108px; min-width: 0; border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); padding: 6px; position: relative;
  cursor: default;
}
.cal-cell:nth-child(8n) { border-right: none; }
.cal-cell.other { background: var(--row-hover); color: #b6b6bb; }
.cal-cell .dnum {
  font-size: 13px; font-weight: 500; text-align: right; padding: 0 4px 4px;
}
.cal-cell.today .dnum span {
  background: var(--red); color: #fff; border-radius: 50%;
  width: 24px; height: 24px; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 600;
}
.ev-chip {
  display: block; width: 100%; max-width: 100%; box-sizing: border-box;
  text-align: left; border: none;
  border-radius: 5px; padding: 2px 7px; margin-bottom: 3px; font-size: 11.5px;
  font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; cursor: pointer;
}
.ev-more { font-size: 11px; color: var(--text2); padding: 0 6px; }

/* Wochenansicht */
.week-grid { display: grid; grid-template-columns: 54px repeat(7, minmax(0, 1fr));
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  max-width: 100%; }
.week-grid .wh { border-bottom: 1px solid var(--line); padding: 8px 6px;
  text-align: center; font-size: 12px; font-weight: 600; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.week-grid .wh .d { font-size: 18px; font-weight: 700; display: block; }
.week-grid .wh.today .d { color: var(--red); }
.week-col { position: relative; border-right: 1px solid var(--line);
  min-width: 0; height: 960px; }
.week-hours { position: relative; height: 960px; }
.week-hours div { position: absolute; right: 6px; font-size: 10px;
  color: var(--text2); transform: translateY(-50%); }
.hline { position: absolute; left: 0; right: 0; height: 1px;
  background: #f0f0f3; }
.week-ev { position: absolute; left: 3px; right: 3px; border-radius: 6px;
  padding: 3px 6px; font-size: 11px; color: #fff; overflow: hidden;
  cursor: pointer; border: none; text-align: left; }
.week-ev b { display: block; font-size: 11px; }

/* Liste */
.list-day { margin-bottom: 4px; }
.list-day h4 { font-size: 12px; color: var(--text2); font-weight: 600;
  padding: 12px 4px 6px; text-transform: uppercase; letter-spacing: .04em; }
.list-ev { display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px;
  margin-bottom: 6px; cursor: pointer; transition: transform .1s; }
.list-ev:hover { transform: translateX(2px); }
.list-ev .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.list-ev .t { font-weight: 600; }
.list-ev .sub { color: var(--text2); font-size: 12px; }
.list-ev .time { margin-left: auto; color: var(--text2); font-size: 13px;
  font-variant-numeric: tabular-nums; }

/* Tooltip */
#tooltip {
  position: fixed; z-index: 90; background: rgba(28,28,30,.94); color: #fff;
  border-radius: 10px; padding: 10px 12px; font-size: 12px; max-width: 280px;
  pointer-events: none; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
#tooltip b { font-size: 13px; }
#tooltip .row { color: #d0d0d5; margin-top: 3px; }

/* ---------- Modal ---------- */
/* Dialoge hängen OBEN, nicht in der Mitte (Phil 07.08.): zentriert verschiebt
   sich der ganze Dialog bei jeder Höhenänderung — ein Reiterwechsel liess ihn
   sichtbar über den Bildschirm springen. Oben verankert bleibt die Kopfzeile
   stehen und nur die Unterkante wandert. */
.modal-bg {
  position: fixed; inset: 0; background: var(--overlay-bg); z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: min(7vh, 64px) 24px 24px;
  overflow-y: auto;
}
.modal {
  background: var(--panel); border-radius: 14px; box-shadow: 0 24px 64px rgba(0,0,0,.3);
  width: 560px; max-width: 100%; max-height: 86vh; display: flex;
  flex-direction: column; overflow: hidden;
  /* Höhenwechsel beim Reiterwechsel weich statt ruckartig */
  transition: max-height .18s ease;
}
@media (max-width: 820px) {
  .modal-bg { padding: 16px 12px; }
}
.modal.wide { width: 760px; }
/* R25 (06.08.): Personen-Dialog-Facelift — Reiter statt einem langen Formular, Inhalt
   innerhalb der Reiter nutzt .grid2 (kollabiert wie überall bei ≤820px auf 1 Spalte). */
.modal.person-modal { width: 860px; }
.pm-tabs { margin-bottom: 16px; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.pm-tabs::-webkit-scrollbar { display: none; }
.pm-tabs button { white-space: nowrap; }
.perm-note { display: flex; align-items: center; gap: 8px; background: var(--chip-bg);
  color: var(--text2); border-radius: 8px; padding: 8px 12px; font-size: 12.5px; margin-bottom: 12px; }
.perm-groups { margin-top: 14px; }
.perm-group { margin-bottom: 14px; }
.perm-group-title { font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); margin-bottom: 4px; }
.perm-row { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; }
.perm-row input { margin-top: 3px; width: auto; }
.perm-row-label { display: flex; flex-direction: column; flex: 1; font-size: 13px; }
.perm-row-hint { font-size: 11.5px; color: var(--text2); margin-top: 1px; }
.perm-summary { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--text2); }
/* R4: Office-Bearbeiten (Collabora) — grosses Modal, iframe soll die volle Höhe nutzen */
.modal.modal-office { width: 96vw; max-width: 1400px; height: 92vh; max-height: 92vh; }
.modal.modal-office .body { padding: 0; flex: 1; }
.modal header { padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; }
.modal header h2 { font-size: 16px; font-weight: 600; flex: 1; }
.modal .body { padding: 18px 20px; overflow: auto; }
.modal footer { padding: 14px 20px; border-top: 1px solid var(--line);
  display: flex; gap: 10px; justify-content: flex-end; }
.x { border: none; background: var(--chip-bg); border-radius: 50%; width: 26px;
  height: 26px; font-size: 13px; color: var(--text2); }

/* ---------- Tables ---------- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); font-weight: 600;
  padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 5px 8px; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.tbl td input, .tbl td select { padding: 5px 8px; font-size: 13px; }
.tbl tr:hover td { background: var(--row-hover); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Dispo ---------- */
.dispo-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dispo-head select, .dispo-head .event-picker { width: 340px; }
.dispo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  align-items: start; }
.dispo-grid .full { grid-column: 1 / -1; }

/* ---------- Dispo-Gantt Gross-Ansicht (R21, 06.08.) ---------- */
/* Kein echtes Vollbild: Seitenleiste blendet aus (Navigation bleibt per Zahlentasten 1–0
   erreichbar, ausserdem jederzeit 1 Klick auf den Umschalter im Gantt-Kopf zurück), Topbar/
   Kopfbereich schrumpfen, alle anderen Dispo-Karten (Beschreibung, Bar/Einlass, Material,
   Tasks, Team, Warnungen, Attribute) blenden aus — nur die .gantt-card bleibt und wird voll
   breit. Zeilenhöhe/Zeitachse selbst skaliert JS-seitig (GANTT.PXH/LANEH/BLOCKH, s. app.js). */
#app.gantt-big .sidebar { display: none; }
#app.gantt-big .topbar { height: 42px; padding: 0 14px; }
#app.gantt-big .content { padding: 10px 16px; }
#app.gantt-big .dispo-head { margin-bottom: 8px; }
#app.gantt-big .dispo-head select { width: 260px; }
#app.gantt-big .team-tabs { margin-bottom: 8px; }
#app.gantt-big .dispo-grid { display: block; }
#app.gantt-big .dispo-grid > .card:not(.gantt-card) { display: none; }
#app.gantt-big .gantt-card { margin: 0; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 10px;
  align-items: center; }
.kv .k { font-size: 12.5px; color: var(--text2); font-weight: 500; }
.check-row { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
/* Tasks 2.0: Planung/Event-Gruppen in der Team-Tab-Karte */
.task-group + .task-group { margin-top: 4px; }
.task-group-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text2); padding: 8px 0 2px; }
.task-group:first-child .task-group-head { padding-top: 0; }
.check-btn { border: 1px solid var(--line); background: var(--input-bg); border-radius: 7px;
  padding: 3px 12px; font-size: 12px; font-weight: 600; min-width: 52px; }
.check-btn.ok { background: #e7f8ec; border-color: #b7e5c4; color: #1d7a3d; }
.check-btn.nok { background: #ffe9ed; border-color: #ffc3cf; color: #c22645; }
.check-btn.open { color: var(--text2); }

/* ---------- Gantt-Timeline (Dispo Zeitplan) ---------- */
.gantt-scroll { overflow-x: auto; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); }
.gantt-inner { position: relative; }
.g-row { display: flex; border-bottom: 1px solid var(--line-soft); }
.g-row:last-child { border-bottom: none; }
.g-row.dragging { opacity: .4; }
.g-row-drag { cursor: grab; color: var(--text2); font-size: 12px; letter-spacing: -2px;
  user-select: none; margin-right: 4px; }
.g-label { position: sticky; left: 0; width: 170px; flex-shrink: 0;
  background: var(--row-hover); z-index: 6; display: flex; align-items: center;
  gap: 8px; padding: 0 10px; font-size: 12px; font-weight: 600;
  border-right: 1px solid var(--line); }
.g-label .sub { display: block; font-weight: 400; font-size: 10.5px;
  color: var(--text2); }
.g-track { position: relative; flex-shrink: 0;
  background: repeating-linear-gradient(to right,
    #f1f1f4 0, #f1f1f4 1px, transparent 1px, transparent var(--g-pxh, 56px)); }
.g-axis { height: 26px; }
.g-axis .g-track { background: none; }
.g-hour { position: absolute; top: 4px; font-size: 10px; color: var(--text2);
  transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.g-block { position: absolute; height: 26px; border-radius: 7px; color: #fff;
  font-size: 11px; display: flex; align-items: center; gap: 6px;
  padding: 0 8px; cursor: grab; user-select: none; touch-action: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); overflow: hidden;
  white-space: nowrap; }
.g-block:active { cursor: grabbing; }
.g-block b { font-weight: 600; }
.g-block .g-time { font-size: 10px; opacity: .85;
  font-variant-numeric: tabular-nums; }
.g-block.prog { background: var(--input-bg); color: var(--text);
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.g-handle { position: absolute; top: 0; bottom: 0; width: 9px;
  cursor: ew-resize; z-index: 2; }
.g-handle.l { left: 0; } .g-handle.r { right: 0; }
.g-empty-hint { color: #c4c4c9; font-size: 11px; position: absolute;
  left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.g-avatar { width: 24px; height: 24px; border-radius: 50%; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; flex-shrink: 0; }
.g-night { position: absolute; top: 0; bottom: 0; background: rgba(60,60,90,.06);
  pointer-events: none; }
.g-mid { position: absolute; top: 0; bottom: 0; width: 2px;
  background: #c9c9d2; pointer-events: none; }
.g-daychip { position: absolute; top: 20px; font-size: 10.5px; font-weight: 700;
  color: var(--text); background: var(--chip-bg); border-radius: 8px; padding: 2px 8px;
  white-space: nowrap; }

/* ---------- Events: Räume-Ansicht (Zeitband-Diagramm, R21) ---------- */
.rm-scroll { overflow-x: auto; border: 1px solid var(--line);
  border-radius: 10px; background: var(--panel); }
.rm-inner { position: relative; }
.rm-row { display: flex; border-bottom: 1px solid var(--line-soft); }
.rm-row:last-child { border-bottom: none; }
.rm-row.rm-axis { position: sticky; top: 0; background: var(--panel); z-index: 7; }
.rm-label { position: sticky; left: 0; width: 148px; flex-shrink: 0;
  background: var(--row-hover); z-index: 6; display: flex; align-items: center;
  padding: 0 10px; font-size: 12px; font-weight: 600; line-height: 1.25;
  border-right: 1px solid var(--line); overflow: hidden;
  overflow-wrap: break-word; word-break: break-word; }
.rm-track { position: relative; flex-shrink: 0; }
.rm-hour { position: absolute; top: 6px; font-size: 10px; color: var(--text2);
  transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.rm-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red);
  pointer-events: none; z-index: 3; }
.rm-now-flag { position: absolute; top: -1px; font-size: 9.5px; font-weight: 700;
  color: #fff; background: var(--red); border-radius: 4px; padding: 1px 5px;
  transform: translateX(-50%); white-space: nowrap; z-index: 4; }
.rm-block { position: absolute; border-radius: 7px; color: #fff; font-size: 11px;
  display: flex; align-items: center; gap: 5px; padding: 0 7px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); overflow: hidden; white-space: nowrap; }
.rm-block:hover { filter: brightness(1.08); }
.rm-block b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.rm-block .rm-time { font-size: 10px; opacity: .85; font-variant-numeric: tabular-nums;
  flex-shrink: 0; }
.rm-block.conflict { box-shadow: 0 0 0 2px var(--red), 0 1px 3px rgba(0,0,0,.18); }
.rm-block.conflict::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--red); }
.rm-empty-hint { color: #c4c4c9; font-size: 11px; position: absolute; left: 12px;
  top: 50%; transform: translateY(-50%); pointer-events: none; }
.rm-daycol { position: absolute; top: 0; bottom: 0; text-align: center; font-size: 10.5px;
  color: var(--text2); padding-top: 6px; border-left: 1px solid var(--line-soft); }
.rm-daycol-dow { text-transform: uppercase; font-weight: 700; letter-spacing: .03em; }
.rm-daycol.today { background: var(--accent-soft); color: var(--accent); }
.rm-gridcol { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line-soft); }
.rm-gridcol.today { background: var(--accent-soft); opacity: .5; }
.rm-hideempty { display: inline-flex; align-items: center; gap: 5px; font-size: 12px;
  color: var(--text2); cursor: pointer; white-space: nowrap; user-select: none; }
/* Nachtrag Phil 06.08.: sichtbare Datumsspanne neben dem "Tage"-Umschalter,
   aktualisiert sich beim endlosen Scrollen mit (roomsRangeLabelText()). */
.rm-rangelabel { font-size: 12px; color: var(--text2); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* Files */
.file-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dropzone {
  border: 1.5px dashed #c9c9d0; border-radius: 10px; padding: 14px 10px;
  text-align: center; color: var(--text2); font-size: 12px; margin-bottom: 8px;
  transition: all .15s; cursor: pointer;
}
.dropzone.over { border-color: var(--accent); background: var(--accent-soft);
  color: var(--accent); }
.file-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px;
  border-radius: 7px; font-size: 12.5px; cursor: pointer; }
.file-item:hover { background: var(--hover-bg); }
.file-item .sz { margin-left: auto; color: var(--text2); font-size: 11px; }
/* M: Datei-Tabelle (ersetzt die alte 4-Spalten-Ansicht) */
.qf-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 16px;
  padding: 3px 11px; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid transparent; margin: 0 6px 6px 0; background: var(--chip-bg); color: var(--text2); }
.qf-chip.active { border-color: currentColor; font-weight: 700; }

/* ---------- Material-Modul (R17, 06.08. — Power-Table-Vollausbau) ---------- */
.mat-thumb { width: 36px; height: 36px; border-radius: 7px; object-fit: cover;
  display: block; border: 1px solid var(--line); }
.mat-thumb-empty { display: flex; align-items: center; justify-content: center;
  border-radius: 7px; flex: 0 0 auto; }
.set-nav button.mat-subcat { padding-left: 26px; font-size: 12px; color: var(--text2); }
.set-nav button .mat-cnt { float: right; color: var(--text2); font-size: 11px;
  font-weight: 400; }
.set-nav button.active .mat-cnt { color: inherit; }
/* Kategorie-/Unterkategorie-Chipleiste (R18, 06.08. — zweistufiger Facetten-Filter mit
   Trefferzahl, ersetzt den bis dahin nur über ein kleines Lupen-Icon im Spaltenkopf
   erreichbaren Ein-Spalten-Filter). Horizontal scrollbar statt Umbruch, damit die Leiste
   auf 390px nicht zur Zeilenwand wird; jede Zeile scrollt unabhängig. */
.mat-catfilter { margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; }
.mat-chip-row { display: flex; align-items: center; gap: 6px; overflow-x: auto;
  overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 2px; scrollbar-width: thin; }
.mat-chip-row::-webkit-scrollbar { height: 5px; }
.mat-chip-row::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.mat-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
  min-height: 30px; padding: 5px 12px; border-radius: 16px; font-size: 12.5px;
  font-weight: 500; white-space: nowrap; cursor: pointer; color: var(--text2);
  background: var(--chip-bg); border: 1.5px solid transparent; }
.mat-chip:hover { filter: brightness(0.96); }
.mat-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mat-chip.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.mat-chip-zero { opacity: .35; pointer-events: none; }
.mat-chip-count { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .8; }
.mat-chip-row-sub .mat-chip-sub { min-height: 28px; padding: 4px 11px; font-size: 12px; }
.mat-chip-empty { color: var(--text2); font-size: 12px; padding: 4px 2px; }
.mat-chip-reset { margin: 0; align-self: flex-start; }
@media (max-width: 480px) {
  .mat-chip { min-height: 44px; padding: 0 14px; }
  .mat-chip-row-sub .mat-chip-sub { min-height: 40px; padding: 0 12px; }
}
/* Gruppenzeile (Kategorie › Unterkategorie) in der Power-Table */
#mat-table tr.mat-group-row td { background: var(--chip-bg); font-weight: 700;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text2);
  padding: 6px 9px; white-space: nowrap; }
.mat-group-count { font-weight: 500; text-transform: none; letter-spacing: normal;
  color: var(--text2); margin-left: 4px; }
#mat-table tr.mat-row-inactive td { opacity: .5; }
.mat-active-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); }
.mat-active-dot.on { background: var(--green); }
/* ---------- KI-Assistent im Artikel-Modal (08.08.) ----------
   Sitzt bewusst ÜBER dem 260px-Spaltenraster und nutzt die volle Modalbreite: in der
   schmalen Spalte lief die Vorschlagstabelle über (Layoutbruch) und die Beschreibung
   wurde in jeder zweiten Zeile umbrochen. */
.ai-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 16px;
  margin-bottom: 18px; background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 62%); }
.ai-box-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ai-box-icon { display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  background: var(--accent); color: #fff; }
.ai-box-title { font-size: 15px; font-weight: 650; margin: 0 0 1px; line-height: 1.25; }
.ai-box-sub { font-size: 11.5px; color: var(--text2); line-height: 1.35; }
/* Grosszuegige Ablagefläche — der Nutzer trifft sie auch mit einer Datei in der Hand. */
.ai-drop { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; min-height: 116px; padding: 18px 14px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--line); border-radius: 12px; background: var(--panel);
  transition: border-color .15s, background .15s, color .15s; }
.ai-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.ai-drop.over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ai-drop.busy { pointer-events: none; opacity: .6; }
.ai-drop-icon { color: var(--accent); opacity: .75; line-height: 0; margin-bottom: 3px; }
.ai-drop-main { font-size: 13.5px; font-weight: 550; }
.ai-drop-hint { font-size: 11.5px; color: var(--text2); }
.ai-box-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* Ergebnis: Beschriftung | Wert | Knopf. Der Wert bekommt den ganzen Rest der Breite,
   damit lange Beschreibungen nicht zerhackt werden. */
.ai-res { margin-top: 12px; border: 1px solid var(--line); border-radius: 11px;
  overflow: hidden; background: var(--panel); }
.ai-res-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--chip-bg); border-bottom: 1px solid var(--line);
  font-size: 12px; }
.ai-res-note { padding: 10px 12px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.ai-res table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.ai-res td { padding: 7px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.ai-res tr:first-child td { border-top: 0; }
.ai-res .k { width: 108px; color: var(--text2); font-size: 11.5px; white-space: nowrap;
  padding-top: 9px; }
.ai-res .v { font-size: 12.5px; overflow-wrap: anywhere; }
.ai-res .a { width: 122px; text-align: right; white-space: nowrap; }
.ai-res-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 10px 12px; border-top: 1px solid var(--line); background: var(--chip-bg); }
.ai-applied { color: var(--green); font-weight: 600; font-size: 11.5px;
  display: inline-flex; align-items: center; gap: 4px; }
:root[data-theme="dark"] .ai-box { background:
  linear-gradient(180deg, rgba(52,120,246,.13) 0%, transparent 62%); }
:root[data-theme="dark"] .ai-drop { border-color: #3a3a42; }

/* Detail-Modal zweispaltig: links Bild/Dokumente, rechts alle Eigenschaften */
.mat-modal-grid { display: grid; grid-template-columns: 260px 1fr; gap: 20px; }
/* Grid-Items schrumpfen ohne min-width:0 nicht unter ihren Inhalt (Input-Default-Breite) —
   sonst sprengt die verschachtelte .grid2 (Kategorie/Team/…) rechts die Spalte und der
   ganze Modal-Body bekommt einen horizontalen Scrollbalken (gemessen: Mobile 375px). */
.mat-modal-grid > div { min-width: 0; }
@media (max-width: 820px) { .mat-modal-grid { grid-template-columns: 1fr; } }
.mat-modal-img { width: 100%; aspect-ratio: 1; border-radius: 12px; object-fit: cover;
  display: block; border: 1px solid var(--line); }
.mat-modal-img-empty { width: 100%; aspect-ratio: 1; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; }
/* Anmietung/Marge-Sektion prominent hervorgehoben (Phil fragt explizit danach) */
.mat-ext-box { border: 1.5px solid var(--orange); background: var(--warn-soft); }
/* Warnband, app-weit wiederverwendbar (W4, 07.08.) — gleiches Muster wie das bisherige
   #m-conflict im Event-Modal (Raumkonflikt), aber mit den dunkelmodus-fähigen Variablen
   statt fest verdrahteten Hex-Farben. Erster Einsatz: "Veranstalter fehlt". */
.warn-band { display: flex; align-items: center; gap: 8px; background: var(--warn-soft);
  border: 1px solid var(--orange); border-radius: 9px; padding: 9px 12px;
  font-size: 12.5px; color: var(--warn-text); margin-bottom: 12px; }
.warn-band svg { flex-shrink: 0; }
/* Kompakte Inline-Variante des Warnbands für Tabellenzellen/Kopfzeilen (Kontakt-Spalte
   Events-Tabelle, Dispo-Kopf) — gleiche Farben, ohne den vollen Block-Rahmen. */
.tag-missing { color: var(--warn-text); background: var(--warn-soft);
  border-radius: 6px; padding: 1px 7px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.mat-margin { display: flex; align-items: baseline; gap: 8px; margin-top: 10px;
  padding: 10px 12px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line); }
.mat-margin .mat-margin-val { font-size: 19px; font-weight: 700; }
.mat-margin .mat-margin-val.neg { color: var(--red); }
.mat-margin .mat-margin-val.pos { color: var(--green); }
/* Material-Dialog-Aufräumen (Nachtrag Phil, 06.08.2026): breiter, damit die Lieferanten-
   Tabelle (Kontakt/Preis/Einheit/Transport/Notiz) nicht mehr abschneidet ("Kontakt ·",
   "Noti" — Phils Befund). Muster wie .modal.person-modal. */
.modal.material-modal { width: 980px; }
/* Transportpauschale je Lieferant: Schalter + Betragsfeld in einer Zelle nebeneinander */
.mm-transport-cell { display: flex; align-items: center; gap: 6px; }
.mm-transport-cell input[type=number] { width: 76px; }
/* Seriennummern-Chips (add/remove) */
.mat-serial-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.mat-serial-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--chip-bg);
  border-radius: 14px; padding: 4px 6px 4px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.mat-serial-chip button { border: none; background: none; color: var(--text2); cursor: pointer;
  display: inline-flex; align-items: center; padding: 2px; border-radius: 50%; }
.mat-serial-chip button:hover { background: rgba(255,55,95,.15); color: var(--red); }
.mat-serial-warn { color: var(--orange); font-size: 11.5px; margin-top: 4px; }
/* Read-only-Chip in der Übersicht-Ansicht (kein Entfernen-Knopf) — symmetrisches Padding
   statt des Platzhalters für den button rechts (Detail-Modal 2.0, 13.08.2026). */
.mat-serial-chip.ro { padding: 4px 10px; }

/* Detail-Modal 2.0 (13.08.2026): Visitenkarte oben im Material-Modal, Optik von
   renderKontaktDetail() (.kd-card/.kd-avatar/.kd-tabseg/.kd-field, s. app.js) übernommen —
   nur die Bild-Darstellung ist artikeltypisch quadratisch statt rund (.avatar), darum ein
   eigenes kleines Klassenpaar statt .avatar wiederzuverwenden. */
.mm-avatar { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; overflow: hidden; }
.mm-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-avatar-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
/* Dokumente-Liste im Modal ist eine kleine, spaltenschmale Tabelle (Dateiname/Grösse/
   Löschen) — die globale Mobile-Regel "table.tbl { min-width:600px }" (für grosse
   Datentabellen wie Events-Liste gedacht) sprengt hier sonst die linke Modal-Spalte
   (gemessen: 600px Tabellenbreite in einer 327px-Spalte, horizontaler Scroll am ganzen
   Modal-Body). Innerhalb #mm-docsbox bewusst zurückgesetzt.
*/
#mm-docsbox table.tbl { min-width: 0; }
.mini-task-chip { display: inline-flex; align-items: center; border-radius: 10px;
  padding: 1px 8px; font-size: 10.5px; font-weight: 600; cursor: pointer;
  margin: 0 3px 3px 0; max-width: 140px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; }
.fl-readers { display: inline-flex; gap: 2px; vertical-align: middle; margin-right: 4px; }
#fl-table tbody tr { cursor: pointer; }
#fl-table tbody tr:hover { background: var(--hover-accent); }

/* Kontextmenü */
#ctxmenu { position: fixed; z-index: 200; background: var(--popover-bg);
  backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 5px; min-width: 170px;
  display: none; }
#ctxmenu button { display: block; width: 100%; text-align: left; border: none;
  background: none; padding: 7px 12px; border-radius: 7px; font-size: 13px; }
#ctxmenu button:hover { background: var(--accent); color: #fff; }
#ctxmenu hr { border: none; border-top: 1px solid var(--line); margin: 4px 8px; }

/* ---------- Such-Multi-Picker (staffPicker) ---------- */
.sp-wrap { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px;
  background: var(--input-bg); position: relative; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.sp-chips:not(:empty) { margin-bottom: 5px; }
.sp-chip { display: inline-flex; align-items: center; gap: 5px;
  border-radius: 14px; padding: 3px 7px 3px 8px; font-size: 12px; font-weight: 600; }
.sp-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.sp-chip-x { border: none; background: none; color: inherit; opacity: .55;
  font-size: 10.5px; padding: 0; line-height: 1; }
.sp-chip-x:hover { opacity: 1; }
.sp-input { border: none; padding: 4px 2px; width: 100%; font-size: 13px; }
.sp-input:focus { box-shadow: none; }
.sp-list { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.14); z-index: 60; max-height: 240px;
  overflow: auto; display: none; }
.sp-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  font-size: 13px; cursor: pointer; }
.sp-item:hover { background: var(--hover-bg); }
.sp-item-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sp-item-name { flex: 1; }
.sp-item-pos { color: var(--text2); font-size: 11px; }

/* ---------- Personalplanung ---------- */
/* Eigener Scroll-Container (F1): Personalplanung scrollt horizontal für sich, ohne
   Wochenkopf/Bedarfs-Karte darüber mitzuziehen — nur aktiv, wenn der Inhalt überläuft. */
.shift-grid-scroll { overflow-x: auto; }
.shift-grid { display: grid; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); }
.shift-grid > div { border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line); }
.sg-head { padding: 10px; font-weight: 600; font-size: 13px;
  background: var(--row-hover); }
.sg-head .sub { font-weight: 400; font-size: 11px; color: var(--text2); }
.sg-head.today { color: var(--accent); }
.sg-person { padding: 10px; display: flex; align-items: center; gap: 10px;
  background: var(--row-hover); }
.avatar { width: 34px; height: 34px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex-shrink: 0; }
.sg-person .nm { font-weight: 600; font-size: 13px; line-height: 1.25; }
.sg-person .hrs { font-size: 11px; color: var(--text2); }
.sg-cell { padding: 3px; min-height: 56px; cursor: pointer; }
.sg-cell:hover { background: var(--hover-accent); }
/* R23 (06.08., Phil mit Screenshot): Status linksbündig in der oberen Zeile, Zeit
   danach, untere Zeile Veranstaltung/Funktion.
   07.08. (Phil "schicht blöcke grösser, sollen zelle fast ausfüllen"): Balken folgte
   bisher nur dem Inhalt (fit-content) und sass mit viel Luft in der Zelle — füllt jetzt
   die Zelle fast aus (width:100%, .sg-cell-Padding auf 3px runter). Status ist seit dem
   Icon-Umbau (s. shiftStatusHTML) nur noch ein Symbol, der freiwerdende Platz gehört
   jetzt der Zeit/Funktion statt Luft. */
.shift-card { border-radius: 6px; padding: 4px 8px; font-size: 11.5px;
  margin-bottom: 3px; color: #fff; font-weight: 500; cursor: pointer;
  border-left: 3px solid rgba(0,0,0,.25); width: 100%; box-sizing: border-box; }
.shift-card .sc-top { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.shift-card .sc-status { display: inline-flex; align-items: center; }
.shift-card .sc-time { font-variant-numeric: tabular-nums; }
.shift-card .lbl { opacity: .85; font-weight: 400; font-size: 10.5px; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-pill { display: inline-flex; align-items: center; gap: 6px;
  border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600;
  background: #ffe9ed; color: #c22645; margin: 0 6px 6px 0; }
.cover-pill.ok { background: #e7f8ec; color: #1d7a3d; }
.cal-coverage { width: fit-content; padding: 10px 14px; }
.cal-coverage .cov-row { white-space: nowrap; margin-bottom: 4px; }
.cal-coverage .cov-row:last-child { margin-bottom: 0; }
.cal-coverage .cover-pill { padding: 2px 8px; font-size: 11px; margin: 0 4px 0 0; }
.cal-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 8px 0 14px; }
/* Eigener Scroll-Container (F1): Wochenansicht/Liste scrollen horizontal für sich, Kopf/Legende
   darüber bleiben stehen — nur aktiv, wenn der Inhalt überläuft (schmale Viewports). */
#cal-body { overflow-x: auto; }
.cal-legend .lg-pill { display: inline-flex; align-items: center; gap: 5px;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 2px 9px; font-size: 11px; color: var(--text); }
.cal-legend .lg-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.g-daynav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.g-daynav-btn { border: 1px solid var(--line); background: var(--input-bg); border-radius: 8px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; }
.g-daynav-btn:hover { background: var(--hover-accent); }
.g-daynav-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.t24 { font-variant-numeric: tabular-nums; }
.t24.invalid { border-color: var(--red); }
.btn-trash { border: none; background: none; color: var(--red); padding: 4px;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; }
.btn-trash:hover { background: rgba(255,55,95,.1); }
/* Datei-Notizen-Sprechblase (R16, 06.08.): leer = dezent/outline, gesetzt = gefüllt +
   Akzentfarbe, damit auf einen Blick sichtbar ist, welche Dateien eine interne Notiz haben. */
.note-btn { border: none; background: none; color: var(--text2); padding: 4px;
  border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; opacity: .55; }
.note-btn:hover { background: var(--hover-accent); opacity: 1; }
.note-btn.set { color: var(--accent); opacity: 1; }
.note-btn.set svg { fill: var(--accent-soft); }
/* Datei-Kategorie: Icon + Text statt Pille/Farbpunkt (R19, 06.08.) */
.filecat-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.filecat-tag svg { flex: 0 0 auto; }
/* Kompaktere, rahmenlose Zellen-Inputs für Rapport-Tabellen (K1b) */
.tbl-clean td input, .tbl-clean td select { border-color: transparent; background: transparent; }
.tbl-clean td input:focus, .tbl-clean td select:focus { border-color: var(--line); background: var(--panel); }
.tbl-clean td { padding: 3px 6px; }
/* Wiederverwendbarer Typeahead (K2/K3) */
.typeahead-drop { display: none; position: absolute; z-index: 50; top: 100%; left: 0; right: 0;
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 8px; margin-top: 3px;
  box-shadow: var(--shadow); max-height: 220px; overflow-y: auto; }
/* clampPopover() (app.js): Dropdown ragt unten über den Viewport -> über den Anker klappen
   statt abgeschnitten zu bleiben (Popover-Clamping-Welle 06.08.). */
.typeahead-drop.popover-flip-up { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 3px; }
.ta-item { padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.ta-item:hover { background: var(--hover-accent); }
.ta-item.active { background: var(--accent); color: #fff; }
.ta-item.ta-free { border-top: 1px solid var(--line); color: var(--text2); display: flex;
  align-items: center; gap: 5px; }
.ta-item.ta-free.active { color: #fff; }
.ta-item.ta-free i { font-style: italic; }
/* Event-Picker-Standard (R23, 06.08.): Gruppenkopfzeilen im groupedCombo()-Dropdown —
   nicht klickbar, trennt Spielzeiten-Gruppen (laufende/vergangene/ältere/kommende). */
.ta-group-header { padding: 7px 10px 3px; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); }
.ta-group-header:not(:first-child) { border-top: 1px solid var(--line-soft); margin-top: 4px; padding-top: 9px; }
.gc-drop { max-height: 320px; }
input.gc-input { cursor: text; }
/* Benachrichtigungs-Matrix (Mein Profil, R23) */
.notify-matrix th { text-align: center; font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; }
.notify-matrix td:first-child, .notify-matrix th:first-child { text-align: left; }
.notify-matrix th.notify-col-off { color: var(--text2); font-weight: 400; }
.notify-off-badge { display: inline-block; background: var(--text2); color: var(--panel); border-radius: 8px;
  padding: 1px 6px; font-size: 9px; font-weight: 700; text-transform: none; letter-spacing: 0; vertical-align: middle; }
.notify-matrix input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.notify-matrix input[type="checkbox"]:disabled { cursor: default; opacity: .5; }
.notify-hint { display: flex; align-items: flex-start; gap: 7px; background: var(--accent-soft); color: var(--text);
  border-radius: 9px; padding: 9px 12px; font-size: 12px; }
.notify-hint svg { flex-shrink: 0; color: var(--accent); margin-top: 1px; }
.notify-code { font-family: ui-monospace, "SF Mono", monospace; font-size: 13px; font-weight: 700;
  background: var(--hover-bg); border: 1px solid var(--line); border-radius: 7px; padding: 4px 9px; letter-spacing: .02em; }
/* Rabatt-Anzeige-Chip in Rapport-Mietmaterial (K2c) */
.rabatt-chip { display: inline-flex; align-items: center; gap: 3px; border: 1px dashed var(--line);
  border-radius: 8px; padding: 2px 8px; font-size: 11.5px; color: var(--text2); cursor: pointer; }
.rabatt-chip.set { border-style: solid; border-color: var(--accent); color: var(--accent); font-weight: 600; }
.rabatt-chip:hover { background: var(--hover-accent); }
/* Globale Suche (Topbar, P) */
/* Suchfeld rechtsbündig (Phil 07.08.2026: «suchfeld an die stelle der
   buttons, rechtsbündig»). «margin-left: auto» schiebt es ans rechte Ende der
   Zeile, direkt vor die Symbolknöpfe — dort, wo vorher die drei Modul-Knöpfe
   standen. Der Modultitel ist entfallen, dadurch ist links Platz frei. */
.topbar-search { position: relative; max-width: 320px; width: 100%;
  margin-left: auto; margin-right: 4px;
  /* «margin-left: auto» allein reicht nicht: In der Zeile steht hinter dem
     Suchfeld ein Platzhalter (.grow), der den freien Raum aufsaugt und das
     Feld dadurch links festhält. Mit «order» rutscht es hinter den
     Platzhalter und landet wirklich rechts, direkt vor den Symbolknöpfen. */
  order: 5; }
.topbar .grow { order: 1; }
.topbar .bell, .topbar #mobile-avatar-btn { order: 6; }
.topbar #topbar-actions { order: 2; margin-left: 0; }
.topbar-search .ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text2); pointer-events: none; display: flex; }
.search-toggle-btn { pointer-events: auto; padding: 0; border: none; background: none; cursor: pointer; }
.topbar-search input { width: 100%; padding: 7px 10px 7px 32px; border: 1px solid var(--line);
  border-radius: 9px; font-size: 13px; background: var(--search-bg); }
.topbar-search input:focus { background: var(--input-bg); border-color: var(--accent); }
.search-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 420px;
  max-height: 70vh; overflow: auto; background: var(--popover-bg);
  backdrop-filter: blur(14px); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22); z-index: 90; padding: 6px; }
.search-group h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2); padding: 8px 10px 4px; margin: 0; }
.search-item { display: flex; gap: 10px; align-items: center; padding: 7px 10px;
  border-radius: 9px; cursor: pointer; font-size: 12.5px; }
.search-item:hover, .search-item.active { background: var(--hover-bg); }
.search-item .si-ico { color: var(--accent); flex-shrink: 0; }
.search-item .si-body { min-width: 0; flex: 1; overflow: hidden; }
.search-item .si-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-item .si-sub { color: var(--text2); font-size: 11px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* Zeitplan-Listenansicht (Q, Alternative zum Gantt) */
.tl-list { padding: 4px 2px; }
.tl-day { margin-bottom: 18px; }
.tl-day:last-child { margin-bottom: 0; }
.tl-day h4 { font-size: 13px; font-weight: 700; margin: 0 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line); }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 5px 2px;
  font-size: 12.5px; border-bottom: 1px solid #f5f5f7; }
.tl-time { min-width: 92px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tl-chip { display: inline-block; padding: 2px 9px; border-radius: 6px; color: #fff;
  font-weight: 600; font-size: 12px; }
.tl-note { color: var(--text2); font-size: 11.5px; margin-left: auto; }
/* Spalten-Sortierung (generischer makeSortable-Helfer) */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--text); }
th.sortable.asc::after { content: " ▲"; font-size: 9px; }
th.sortable.desc::after { content: " ▼"; font-size: 9px; }
/* Standard-Farbwähler (H) */
.color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15);
  cursor: pointer; padding: 0; flex-shrink: 0; }
.cp-pop { position: fixed; z-index: 300; width: 192px; background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 8px;
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cp-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.12);
  cursor: pointer; padding: 0; }
.cp-swatch.ring { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent); }
/* Icon-Picker (R23, 06.08.: Team-Icons) — gleiche Popover-Mechanik wie Farbwähler
   oben, plus Suchfeld. iconPicker()/iconSwatchHTML() in app.js. */
.icon-swatch-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--input-bg); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex-shrink: 0; }
.icon-swatch-btn:hover { background: var(--hover-accent); }
.icon-pop { position: fixed; z-index: 300; width: 258px; background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 8px; }
.icon-pop-search { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.icon-pop-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  max-height: 224px; overflow-y: auto; }
.icon-swatch { width: 30px; height: 30px; border-radius: 7px; border: 1px solid transparent;
  background: none; color: var(--text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; }
.icon-swatch:hover { background: var(--hover-accent); }
.icon-swatch.active { background: var(--accent); color: #fff !important; }
.icon-swatch.current { box-shadow: inset 0 0 0 2px var(--accent); }
/* Team-Icon (ersetzt tt-dot-Farbpunkt) */
.tt-icon { display: inline-flex; align-items: center; }
/* Task-Vorlagen (N): sortierbare Sektionslisten */
.tpl-list { min-height: 8px; }
.tpl-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px;
  border-bottom: 1px solid var(--line-soft); }
.tpl-row:last-child { border-bottom: none; }
.tpl-row.dragging { opacity: .4; }
.tpl-drag { cursor: grab; color: var(--text2); font-size: 13px; letter-spacing: -2px;
  user-select: none; flex-shrink: 0; }
.tpl-title { flex: 1; font-size: 13px; cursor: pointer; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tpl-title:hover { text-decoration: underline; }
/* Rapport-Tabellen-Zeilen-Drag (Personal/Mietmaterial/Verkauf) — gleiches Muster wie tpl-drag */
.row-drag { cursor: grab; color: var(--text2); font-size: 13px; letter-spacing: -2px;
  user-select: none; text-align: center; }
#r-pers tbody tr.dragging, #r-mat tbody tr.dragging, #r-verk tbody tr.dragging { opacity: .4; }
/* Avatar-Crop-Editor (J1) */
.ac-frame { position: relative; width: 320px; height: 320px; margin: 0 auto;
  border-radius: 12px; overflow: hidden; background: #eceef1; cursor: grab;
  touch-action: none; user-select: none; }
.ac-frame.grabbing { cursor: grabbing; }
.ac-frame img { position: absolute; top: 0; left: 0; transform-origin: 0 0;
  will-change: transform; -webkit-user-drag: none; pointer-events: none; max-width: none; }
.ac-mask { position: absolute; inset: 0; pointer-events: none; border-radius: 50%;
  box-shadow: 0 0 0 9999px rgba(255,255,255,.85); }
.ac-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ac-ctrl input[type=range] { flex: 1; accent-color: var(--accent); }
.avatar-change-btn { border: none; background: none; color: var(--accent); font-size: 11px;
  font-weight: 600; cursor: pointer; padding: 3px 0; display: flex; align-items: center; gap: 4px; }
.avatar-change-btn:hover { text-decoration: underline; }
.badge-st { font-size: 11px; font-weight: 600; border-radius: 12px;
  padding: 3px 10px; background: var(--chip-bg); color: #555; }
.badge-st.st-bestätigt { background: #e7f8ec; color: #1d7a3d; }
.badge-st.st-angedacht { background: var(--warn-soft); color: var(--warn-text); }
.badge-st.st-abgesagt { background: #ffe9ed; color: #c22645; }
.badge-st.st-ausgeschrieben { background: #eaf1fe; color: #2456a8; }
/* Material 3.0 (06.08.): Statuskette einer Anmietung (rentalStatusChainHTML) */
.ro-chain { display: flex; align-items: center; margin-bottom: 10px; }
.ro-chain-step { font-size: 11px; font-weight: 600; color: var(--text2); white-space: nowrap; }
.ro-chain-step.done { color: var(--green); }
.ro-chain-step.current { color: var(--accent); font-weight: 700; }
.ro-chain-sep { flex: 1; height: 2px; background: var(--line); margin: 0 6px; min-width: 16px; }
.ro-chain-sep.done { background: var(--green); }

/* ---------- Settings ---------- */
.set-layout { display: grid; grid-template-columns: 220px 1fr; gap: 18px;
  align-items: start; }
.set-nav button { display: block; width: 100%; text-align: left; border: none;
  background: none; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  margin-bottom: 2px; }
.set-nav button.active { background: var(--accent-soft); color: var(--accent);
  font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 6px;
  background: var(--chip-bg); border-radius: 16px; padding: 3px 10px; font-size: 12px;
  margin: 0 5px 5px 0; }
.chip button { border: none; background: none; color: var(--text2); padding: 0;
  font-size: 13px; }
.chip-color { width: 15px; height: 15px; padding: 0; border: none; border-radius: 50%;
  overflow: hidden; cursor: pointer; flex-shrink: 0; }
.chip-color::-webkit-color-swatch-wrapper { padding: 0; }
.chip-color::-webkit-color-swatch { border: none; border-radius: 50%; }
.cat-check { display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; margin: 0 10px 6px 0; }
.cat-check input { width: auto; }

/* ---------- Dashboard ---------- */
.dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px;
  align-items: start; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 16px; }
.stat { background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; }
.stat-ico { width: 38px; height: 38px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center; }
.stat .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.stat .l { font-size: 12px; color: var(--text2); margin-top: 2px; }
/* Icon vor Karten-Überschriften — bewusst KEIN display:flex auf .card h3 (mind. eine
   Karte, Dispo-Tasks, verlässt sich auf float:right für ihr Zähler-Badge im h3). */
.card h3 svg { margin-right: 6px; color: var(--text2); }

/* ---------- Schnellerfassung / Blitz-Gesprächsnotiz (R22, 06.08.) ---------- */
/* Ein Textfeld + kompakte Auswahlfelder in einer Zeile, kein Modal — Enter speichert direkt,
   Umschalt+Enter macht Zeilenumbruch. Auf schmalen Screens bricht die Zeile um (jedes Feld
   bleibt einzeln bedienbar), das Textfeld nimmt immer die volle verfügbare Breite zuerst. */
.qn-bar { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 10px 12px; margin-bottom: 16px; color: var(--text2); }
.qn-bar > svg { flex: 0 0 auto; margin-top: 8px; }
.qn-text { flex: 4 1 220px; min-width: 180px; resize: none; overflow: hidden;
  min-height: 34px; max-height: 140px; line-height: 1.35; font-family: inherit; }
.qn-field { flex: 1 1 110px; min-width: 100px; width: auto; }
.qn-bar .qf-chip { margin: 0; flex: 0 0 auto; white-space: nowrap; align-self: center; }
.qn-bar .btn.primary { flex: 0 0 auto; white-space: nowrap; align-self: flex-start; }

/* ---------- Rapport Print ---------- */
.rap-tot { display: grid; grid-template-columns: 1fr auto; gap: 4px 30px;
  max-width: 380px; margin-left: auto; font-size: 13.5px; }
.rap-tot .num { text-align: right; font-variant-numeric: tabular-nums; }
.rap-tot .big { font-weight: 700; font-size: 15px; border-top: 2px solid var(--text);
  padding-top: 6px; }
@media print {
  body { background: var(--panel); }
  .sidebar, .topbar, .no-print, #tooltip, #ctxmenu { display: none !important; }
  .content { overflow: visible; padding: 0; }
  .card { box-shadow: none; border: none; padding: 0; }
  #print-area { display: block !important; }
  .print-only { display: block !important; }
}
.print-only { display: none; }

/* ---------- Glocke / Mitteilungen ---------- */
.bell { position: relative; border: none; background: none; width: 36px;
  height: 36px; border-radius: 50%; color: var(--text); display: flex;
  align-items: center; justify-content: center; }
.bell:hover { background: var(--chip-bg); }
.bell.active-accent { background: var(--accent-soft); color: var(--accent); }
.bell.active-accent:hover { background: var(--accent-soft); }
.bell-count { position: absolute; top: 1px; right: -2px; background: var(--red);
  color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px;
  min-width: 17px; height: 17px; display: flex; align-items: center;
  justify-content: center; padding: 0 4px; }
.bell-panel { position: absolute; top: 54px; right: 16px; width: 400px;
  max-height: 65vh; overflow: auto; background: var(--popover-bg);
  backdrop-filter: blur(14px); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.22); z-index: 80;
  padding: 6px; }
.bell-head { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px 6px; font-size: 13px; }
.bell-item { display: flex; gap: 10px; padding: 9px 12px; border-radius: 10px;
  cursor: pointer; font-size: 12.5px; }
.bell-item:hover { background: var(--hover-bg); }
.bell-item .bi-ico { color: var(--accent); flex-shrink: 0; padding-top: 1px; }
.bell-item.warn .bi-ico { color: var(--orange); }
.bell-item .bi-body { color: var(--text2); margin-top: 1px; }
.bell-item .bi-time { color: #b0b0b6; font-size: 10.5px; margin-top: 2px; }

/* ---------- Kommunikation ---------- */
.komm-tl { position: relative; padding-left: 24px; }
.komm-tl::before { content: ""; position: absolute; left: 7px; top: 6px;
  bottom: 6px; width: 2px; background: var(--line); border-radius: 2px; }
.komm-card { position: relative; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px;
  margin-bottom: 10px; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .1s; }
.komm-card:hover { transform: translateX(2px); }
.komm-card::before { content: ""; position: absolute; left: -21px; top: 18px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent);
  border: 2px solid #fff; }
.komm-card.quoted { background: var(--row-hover); }
.komm-card.quoted::before { background: #c4c4ca; }
.kc-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kc-ico { color: var(--text2); }
.kc-date { margin-left: auto; color: var(--text2); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.kc-subj { font-size: 13px; margin-top: 3px; }
.kc-q { font-size: 10.5px; color: var(--text2); background: var(--chip-bg);
  border-radius: 8px; padding: 1px 7px; }
.kc-sum { color: var(--text2); font-size: 12.5px; margin-top: 3px; }
.kc-meta { display: flex; gap: 16px; margin-top: 7px; font-size: 11.5px;
  color: var(--text2); }
.role-chip { background: var(--accent-soft); color: var(--accent);
  font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 2px 8px; }
.focus-row td { background: var(--accent-soft) !important; }

/* ---------- Team-Tabs (Dispo) ---------- */
.team-tabs { display: flex; gap: 4px; margin-bottom: 16px; background: var(--seg-bg);
  border-radius: 10px; padding: 3px; width: fit-content; max-width: 100%;
  overflow-x: auto; }
.team-tabs button { border: none; background: none; padding: 7px 16px;
  border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text2);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; }
.team-tabs button.active { background: var(--input-bg); color: var(--text);
  box-shadow: 0 1px 3px rgba(0,0,0,.12); font-weight: 600; }
.tt-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.task-progress { height: 5px; background: var(--chip-bg); border-radius: 3px;
  margin-bottom: 10px; overflow: hidden; }
.task-progress div { height: 100%; border-radius: 3px; transition: width .3s; }
.task-pill { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600;
  border-radius: 8px; padding: 1px 7px; white-space: nowrap; margin-right: 4px; }
.task-assign-btn { background: none; border: none; display: inline-flex; align-items: center;
  gap: 2px; padding: 2px; cursor: pointer; color: var(--text2); border-radius: 6px; }
.task-assign-btn:hover { background: var(--hover-bg); color: var(--text); }
/* Zuweisungs-Popover (Tasks) */
.asg-pop { position: fixed; z-index: 300; width: 220px; background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 6px; }
.asg-search { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px;
  font-size: 12.5px; width: 100%; margin-bottom: 4px; }
.asg-list { max-height: 220px; overflow: auto; }
.asg-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 7px;
  font-size: 12.5px; cursor: pointer; }
.asg-item:hover { background: var(--hover-bg); }
.asg-check { width: 14px; display: inline-flex; color: var(--accent); flex-shrink: 0; }

/* Team-Auswahl (Phil 07.08.: „Dropdown mit Häkchen links, Mehrfachauswahl, Farbe+Logo rein,
   überall gleich") — teamPicker() im app.js nutzt oben stehende .asg-* Klassen fürs Popover
   mit, hier nur der sichtbare Auslöser (ersetzt ein natives <select>) und die Chips darin. */
.team-trigger { display: flex; align-items: center; gap: 6px; width: 100%; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--input-bg);
  font-size: 13px; font-family: inherit; cursor: pointer; text-align: left; color: var(--text); }
.team-trigger:hover { border-color: var(--accent); }
.team-trigger-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; flex: 1; }
.team-trigger .chev { margin-left: auto; color: var(--text2); flex-shrink: 0; }
.team-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

.empty { text-align: center; color: var(--text2); padding: 40px 20px;
  font-size: 13px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #d4d4d9; border-radius: 4px; }

/* ---------- Mein Bereich (Freelancer, F2) ---------- */
.freelancer-mode .topbar-search, .freelancer-mode .bell { display: none; }
.me-group { margin-bottom: 22px; }
.me-group > h3, .me-group > summary { font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text2); margin-bottom: 10px; cursor: default;
  display: flex; align-items: center; gap: 8px; }
.me-group > summary { cursor: pointer; }
.me-group > summary::-webkit-details-marker { display: none; }
.me-group .cnt { background: var(--chip-bg); color: var(--text2); border-radius: 10px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; }
.me-collapsed[open] > summary { margin-bottom: 10px; }
.me-card { display: flex; align-items: center; gap: 14px; background: var(--panel);
  border: 1px solid var(--line); border-left: 4px solid #8e8e93; border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow); flex-wrap: wrap; }
.me-date { flex-shrink: 0; text-align: center; min-width: 40px; }
.me-date .me-day { font-size: 20px; font-weight: 700; line-height: 1; }
.me-date .me-mon { font-size: 10.5px; color: var(--text2); text-transform: uppercase;
  letter-spacing: .03em; }
.me-body { flex: 1; min-width: 180px; }
.me-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.me-meta { color: var(--text2); font-size: 12.5px; margin-top: 2px; }
.me-comment { color: var(--text2); font-size: 11.5px; margin-top: 5px;
  background: var(--row-hover); border-radius: 7px; padding: 4px 8px; display: inline-block; }
.me-actions { display: flex; gap: 8px; flex-shrink: 0; }
.me-abs-card { margin-top: 6px; }
.me-abs-row { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; flex-wrap: wrap; }
.me-abs-row:last-child { border-bottom: none; }
.me-abs-comment { color: var(--text2); }
.me-cal-legend { display: flex; align-items: center; gap: 14px; margin: -4px 0 14px; }
.me-lg-fade { opacity: .6; }
.ev-chip-fade { opacity: .42; cursor: default !important; }
.ev-chip-fade[disabled] { pointer-events: none; }
.tbl-wrap { overflow-x: auto; }

/* ---------- Datei-Versionierung (F5) ---------- */
.fv-badges { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.fv-vbadge { border: 1px solid var(--accent); color: var(--accent); background: var(--accent-soft);
  border-radius: 8px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; cursor: pointer; }
.fv-vbadge:hover { filter: brightness(0.95); }
.fv-lockbadge { display: inline-flex; align-items: center; gap: 3px; background: var(--warn-soft);
  color: var(--warn-text); border-radius: 8px; padding: 1px 7px; font-size: 10.5px; font-weight: 600; }
/* Stift-Badge "annotiert" (Welle E, PDF-Annotieren, 06.08.) */
.fv-annobadge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); vertical-align: middle; margin-left: 4px; }
.fv-lockinfo { background: var(--warn-soft); color: var(--warn-text); border-radius: 8px; padding: 8px 12px;
  font-size: 12.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.fv-lockinfo.me { background: var(--accent-soft); color: var(--accent); }
.fv-row { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line-soft); }
.fv-row:last-child { border-bottom: none; }
.fv-vnum { flex-shrink: 0; width: 96px; }
.fv-info { flex: 1; min-width: 0; }
.fv-who { font-size: 12px; color: var(--text2); margin-bottom: 4px; }
.fv-comment { width: 100%; }
.fv-comment-static { font-size: 12.5px; color: var(--text2); font-style: italic; }
.fv-dl { flex-shrink: 0; }

/* Events-Liste (Power-Table) — Klick auf Zeile, vergangene gedimmt, heute hervorgehoben */
#events-table tbody tr[data-ev] { cursor: pointer; }
#events-table tbody tr.list-row-past { color: var(--text2); }
#events-table tbody tr.list-row-past .role-chip { opacity: .6; }
#events-table tbody tr.list-row-today td { background: var(--accent-soft); }
/* Dichte, kaufmännische Tabelle: kompaktere Zeilen, kleinere Schrift, Zahlen/Zeiten tabular */
.tbl-dense th, .tbl-dense td { padding: 4px 9px; font-size: 12px; }
.tbl-dense td { font-variant-numeric: tabular-nums; }

/* ---------- Events Power-Table (05.08.2026) ---------- */
.evt-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.evt-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.evt-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-soft);
  color: var(--accent); border-radius: 14px; padding: 4px 10px; font-size: 11.5px; font-weight: 600;
  cursor: pointer; border: none; }
.evt-chip:hover { filter: brightness(0.96); }
.evt-chip-clear { background: none; color: var(--text2); font-weight: 500; text-decoration: underline; }
.evt-table-wrap {
  overflow: auto; max-height: 68vh; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); background: var(--panel);
}
/* Volle Resthöhe (Phils Nachtrag, R23, 06.08.): in der Events-Liste bekommt #app eine
   Layout-Klasse (renderKalender()/nav()), die .content zur Flex-Spalte macht — Kopfzeile
   behält ihre natürliche Höhe, #cal-body/.evt-table-wrap wachsen auf den Rest, eigener
   Scrollbereich mit stehenbleibendem Sticky-Header statt fester max-height/68vh. */
#app.events-liste .content { display: flex; flex-direction: column; overflow: hidden; }
#app.events-liste #cal-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
#app.events-liste .evt-table-wrap { flex: 1; min-height: 120px; max-height: none; }
/* "Heute"-Trennzeile: deutliche, volle Zeilenbreite statt nur eines Pünktchens — auch im
   Dunkelmodus lesbar (nur Theme-Variablen). scroll-margin-top kompensiert den Sticky-Header,
   damit ihn scrollIntoView()/der "Heute"-Knopf nicht darunter verschwinden lässt. */
.evt-today-divider, #events-table tbody tr[data-ev] { scroll-margin-top: 40px; }
.evt-today-divider td { padding: 3px 10px 8px !important; border-top: 2px solid var(--accent); background: transparent !important; }
.evt-today-label { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 0 0 7px 7px; position: relative; top: -2px; }
.evt-today-flash { animation: evt-today-flash 1.1s ease; }
@keyframes evt-today-flash { 0% { box-shadow: inset 0 0 0 2px var(--accent); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
.evt-table-wrap table.evt-table { border: none; box-shadow: none; width: 100%; table-layout: fixed; }
.evt-table thead th {
  position: sticky; top: 0; z-index: 5; background: var(--panel);
  box-shadow: 0 1px 0 var(--line), 0 3px 6px rgba(0,0,0,.05);
  text-align: left; padding: 0; overflow: hidden;
}
.evt-table th > * { box-sizing: border-box; }
.evt-th-label { display: inline-block; padding: 7px 8px 7px 9px; cursor: pointer; user-select: none;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text2);
  font-weight: 600; max-width: calc(100% - 40px); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: middle; }
.evt-th-label:hover { color: var(--text); }
.evt-th-label.evt-sort-asc::after { content: " ▲"; font-size: 9px; }
.evt-th-label.evt-sort-desc::after { content: " ▼"; font-size: 9px; }
.evt-th-filter { position: absolute; right: 14px; top: 7px; border: none; background: none;
  color: var(--text2); padding: 2px; border-radius: 5px; cursor: pointer; }
.evt-th-filter:hover, .evt-th-filter.active { background: var(--accent-soft); color: var(--accent); }
.evt-table th { position: relative; }
.evt-th-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize;
  touch-action: none; }
.evt-th-resize:hover { background: var(--accent-soft); }
.evt-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt-table td[data-col="titel"] { white-space: normal; }
/* Tages-Gruppierung: durchgehender vertikaler Strich links der Datums-Spalte über alle
   Zeilen desselben Tages — erste Zeile zeigt den Text, Folgezeilen nur den Strich weiter. */
.evt-date-cell { position: relative; padding-left: 14px !important; }
.evt-date-cell::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0;
  width: 2px; background: var(--line); }
.evt-date-inner { font-weight: 600; }
.row-focused { box-shadow: inset 0 0 0 2px var(--accent) !important; }
.seg-view button { font-weight: 600; }

/* ?-Shortcut-Overlay */
.shc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.shc-group h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text2); margin-bottom: 8px; }
.shc-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; }
.shc-row kbd { background: var(--chip-bg); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; padding: 2px 7px; font-size: 11.5px; font-family: inherit; font-weight: 700;
  min-width: 20px; text-align: center; color: var(--text); }
@media (max-width: 640px) { .shc-groups { grid-template-columns: 1fr; } }

/* F4: Rückmeldungs-Icon (Sprechblase) an Schicht-Zeilen/-Karten (Gantt-Label, Personalplanung) */
.sc-comment-ico { color: var(--accent); display: inline-flex; vertical-align: -2px; cursor: default; }
/* F4: Absenzen (krank/Ausfall) in der Personalplanung */
.shift-card-sick { box-shadow: inset 0 0 0 1.5px var(--red); }
/* Auftrag 2 (07.08., Phil "Ferien nicht als Pille, grün schraffieren"): Abwesenheit ist
   ein Zustand des ganzen Tages, keine Pille mehr — Fläche per Schraffur (::before,
   negativer z-index damit Schichtkarten/Badge normal darüber liegen), Farbe pro Art aus
   ABS_KINDS.tint via --abs-tint (renderPersonal in app.js setzt die Variable inline).
   sg-abs-badge bleibt als rundes Klick-Ziel fürs Bearbeiten-Modal (Klartext im Tooltip).
   GEMESSEN (07.08.): position:relative allein reicht NICHT als Stapelkontext-Grenze für
   z-index:-1 — ohne eigenes z-index auf .sg-cell-abs selbst sucht sich das ::before den
   nächsten Stapelkontext weiter oben im Baum (z.B. #content) und landet dadurch HINTER
   dem eigenen Grid-Hintergrund (.shift-grid { background:… }), unsichtbar (Screenshot
   zeigte reine weisse Zelle trotz korrekt berechnetem background-image). Fix: eigenes
   z-index:0 auf .sg-cell-abs macht die Zelle selbst zur Stapelkontext-Grenze. */
.sg-cell-abs { position: relative; z-index: 0; }
.sg-cell-abs::before {
  /* 07.08.: Schraffur raus, flaeche rein. Das Streifenmuster war unruhig und
     machte die Schichtkarten darueber schlecht lesbar — eine ruhige, leichte
     Einfaerbung in der Farbe der Absenzart sagt dasselbe (Ferien gruen, Krank
     rot, Ausfall orange, Frei grau). */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: 4px;
  background-color: var(--abs-tint, #8e8e93);
  opacity: .13;
}
.sg-cell-abs-pending { box-shadow: inset 0 0 0 1.5px var(--abs-tint); border-radius: 4px; }
/* 07.08.: statt rundem Icon-Badge schlichter Klartext ("Ferien", "Krank", …).
   Phil: keine Pille, kein Sonnen-Symbol — man soll lesen koennen, was los ist. */
.sg-abs-text { display: inline-block; font-size: 11px; font-weight: 600;
  line-height: 1.3; cursor: pointer; margin-bottom: 3px; letter-spacing: .01em; }
.sg-abs-text:hover { text-decoration: underline; }
/* Auftrag 3 (07.08., Phil "Schichtfarbe muss was anderes bedeuten"): Umschalter +
   Legende über dem Wochenraster — Produktion/Team/Funktion, Wahl merkt sich in
   localStorage (s. renderPersonal). Ohne Legende wäre die Farbcodierung eine
   Geheimsprache (Phil hat schon einmal gefragt, was die Farben bedeuten). */
.pg-legend-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 10px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); }
.pg-legend-label { font-size: 11.5px; font-weight: 600; color: var(--text2); flex-shrink: 0; }
.pg-colormode { display: inline-flex; gap: 2px; background: var(--chip-bg, #f0f0f3);
  border-radius: 8px; padding: 2px; flex-shrink: 0; }
.pg-colormode button { border: none; background: transparent; padding: 5px 10px; font-size: 12px;
  border-radius: 6px; cursor: pointer; color: var(--text2); }
.pg-colormode button.active { background: var(--panel); color: var(--text); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.pg-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--text2); }
.pg-legend-chip { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pg-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.pg-legend-empty { color: var(--text2); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(12px);
  background: rgba(28,28,30,.94); color: #fff; padding: 10px 18px; border-radius: 10px;
  font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 400; opacity: 0;
  transition: opacity .25s, transform .25s; pointer-events: none; max-width: 80vw; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* R2: Logo-Slots (Settings → Mein Haus → Logos) */
.logo-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.logo-slot-preview { border: 1px solid var(--line); border-radius: 10px; padding: 10px;
  display: flex; align-items: center; justify-content: center; height: 64px; margin-bottom: 8px; }
.logo-slot-preview img { max-height: 44px; max-width: 100%; display: block; }
.logo-slot input[type=file] { font-size: 11.5px; }

/* R8: E-Mail-/Dokument-Design — Formular + Live-Vorschau nebeneinander */
.design-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.design-fields textarea { width: 100%; }
.design-preview-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text2); margin-bottom: 6px; }
.design-preview iframe { width: 100%; height: 420px; border: 1px solid var(--line); border-radius: 10px;
  background: #f4f4f6; }
@media (max-width: 860px) { .design-layout, .logo-slots { grid-template-columns: 1fr; } }

/* R9: Passkey-Hinweisbanner (einmalig, dismissible) */
.pk-prompt { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; max-width: min(640px, 92vw);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 10px 14px; font-size: 12.5px; z-index: 450; }
.pk-prompt svg { flex-shrink: 0; color: var(--accent); }

/* "Als App ablegen"-Hinweisleiste (R23, 06.08.) — nur auf schmalem Viewport, dismissible,
   env(safe-area-inset-bottom) respektiert die Handy-Sicherheitszone unten (Home-Indikator). */
.a2hs-banner { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 460; background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 12px 34px 12px 14px; font-size: 12.5px; }
.a2hs-banner-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.a2hs-banner-head svg { color: var(--accent); flex-shrink: 0; }
.a2hs-close { position: absolute; top: 8px; right: 8px; border: none; background: none;
  color: var(--text2); padding: 4px; border-radius: 6px; cursor: pointer; }
.a2hs-close:hover { background: var(--hover-bg); color: var(--text); }
.a2hs-step { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.a2hs-step svg { color: var(--accent); flex-shrink: 0; }
.a2hs-benefit { color: var(--text2); font-size: 11.5px; margin-top: 4px; }
.a2hs-modal-body .a2hs-step { font-size: 14px; margin-bottom: 10px; }
@media (min-width: 560px) { .a2hs-banner { left: auto; width: 360px; right: 20px; bottom: 20px; } }

/* Mobiler Monats-Kalender (F1): Punkte statt Text-Chips + Tagesliste darunter */
.cal-dots { display: flex; flex-wrap: wrap; gap: 3px; padding-top: 2px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-dot-more { font-size: 8.5px; color: var(--text2); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-daylist { margin-top: 12px; }
.cal-daylist h4 { font-size: 12px; color: var(--text2); font-weight: 600;
  padding: 4px 2px 8px; text-transform: uppercase; letter-spacing: .04em; }

/* ================================================================
   F1 — MOBILE / RESPONSIVE (<=820px). Gleiche Codebasis wie Desktop,
   nur CSS + ein paar JS-Verzweigungen (Monats-Punkte, Burger-Drawer,
   Search-Toggle) — kein Fork. #content bleibt der einzige Scroll-
   Container (auch horizontal, wo eine Grid/Tabelle das erzwingt) —
   der <body> selbst scrollt nie (App-Layout ist 100vh/flex, siehe oben).
   ================================================================ */
@media (max-width: 820px) {
  .burger-btn { display: flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 210; width: 258px;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 14px 0 36px rgba(0,0,0,.2);
  }
  #app.sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0); z-index: 200;
    pointer-events: none; transition: background .22s ease;
  }
  #app.sidebar-open .sidebar-overlay { background: rgba(0,0,0,.42); pointer-events: auto; }
  .nav-item, .burger-btn { min-height: 44px; }

  /* Kein Logo mehr in der Kopfleiste (Phil 07.08.2026: «nimm das Logo raus,
     dafür landet der Menü-Button ganz links, das Logo haben wir dann wenn sich
     das Menü öffnet»). Es stand vorher links vom Menüknopf und drückte diesen
     um gut hundert Pixel nach rechts — auf einem Telefon ist die linke Ecke
     die am besten erreichbare Stelle für den Daumen, und die gehört dem Menü.
     Im geöffneten Menü zeigt die Seitenleiste ohnehin ihr eigenes Logo. */
  .topbar-logo { display: none; }
  .burger-btn { order: -1; margin-left: -4px; }

  /* Aufgeräumte Kopfleiste (Phil 07.08.2026: «mach ein kleines Facelift»).
     Gemessen war sie 151 Pixel hoch und brach in DREI Zeilen um: fünf
     Symbolknöpfe, Avatar und «Neues Event» passten nicht nebeneinander —
     Avatar und Plus rutschten unter die Leiste und sahen aus wie verirrte
     Elemente auf der Seite.
     Was auf dem Telefon wegfällt und warum:
       · Tastenkürzel — es gibt keine Tastatur
       · Handbuch und Kontexthilfe — stehen im Avatar-Menü oben rechts
         (app.js, «Mobile-Avatar-Menü»: Handbuch / Kontexthilfe ein-aus).
         ACHTUNG: Diese Zeile behauptete ab 07.08.2026 «beides über das Menü
         erreichbar» — das stimmte NICHT, es gab damals weder in der
         Seitenleiste noch im Avatar-Menü einen Weg dorthin (nachgemessen mit
         Playwright, 390x844). Wer hier etwas ausblendet, legt den Ersatz
         gleich mit an und schreibt hin, WO er steht.
     Was bleibt: Menü, Titel, Suche, Hell/Dunkel, Mitteilungen, Konto.
     Das sind die Dinge, die man unterwegs wirklich antippt. */
  .topbar { flex-wrap: nowrap; height: 52px; gap: 2px; }
  #shortcut-help-btn, #handbuch-link, #help-toggle-btn { display: none !important; }
  .topbar h1 {
    font-size: 17px; min-width: 0; flex: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .topbar .bell { width: 36px; height: 36px; flex: none; }
  .mobile-avatar-btn:not([hidden]) { order: 9; margin-left: 2px; flex: none; }
  /* «Neues Event» als runder Knopf ganz rechts statt als breite Schaltfläche.
     Der Knopf steckt in einem eigenen Behälter (#topbar-actions), der ohne
     Breitenbegrenzung die volle Zeile beanspruchte und dadurch den Umbruch
     erzwang — deshalb wird hier der Behälter geschrumpft, nicht nur der Knopf. */
  /* «flex: 1 1 100%» erzwingt hier eine ganze Zeile — auf dem grossen Bildschirm
     richtig (dort stehen Reiterleisten drin), auf dem Telefon der Grund für den
     Umbruch. Mit dem Elternteil-Selektor wird die bestehende Regel überstimmt,
     ohne sie anzufassen (sie gilt weiterhin für breite Fenster). */
  .topbar #topbar-actions:has(> .btn.primary.plus) {
    order: 10; flex: 0 0 auto; width: auto; min-width: 0; margin: 0;
  }
  .topbar #topbar-actions:empty { display: none; }
  .topbar .btn.primary.plus {
    width: 36px; height: 36px; min-height: 36px;
    padding: 0; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .topbar .btn.primary.plus span,
  .topbar .btn.primary.plus .label { display: none; }   /* nur das Pluszeichen */

  /* Das Menü war unten abgeschnitten (gemessen 07.08.: 969 Pixel Inhalt bei
     844 Pixel Höhe — «Screen» und «Einstellungen» fehlten, und scrollen ging
     nicht, weil overflow auf «visible» stand). Jetzt scrollt die Leiste selbst,
     mit weichem Ausrollen und Platz für die Home-Leiste des iPhones. */
  .sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;          /* kein Mitscrollen der Seite darunter */
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  /* Schlanker Scrollbalken, damit sichtbar ist, dass es weitergeht. */
  .sidebar::-webkit-scrollbar { width: 4px; }
  .sidebar::-webkit-scrollbar-thumb {
    background: var(--text2); opacity: .3; border-radius: 3px;
  }
  /* Das Logo im Menü bleibt beim Scrollen oben stehen — es ist der Ankerpunkt. */
  .sidebar > .brand, .sidebar > img:first-child {
    position: sticky; top: 0; z-index: 2;
    background: var(--panel);
    padding-bottom: 8px;
  }

  /* Avatar-Menü (Tap auf Avatar): Name/Rolle + Mein Profil + Einstellungen + Abmelden —
     macht die eingeloggte Person + Logout auf dem Phone sichtbar, ohne den Drawer zu
     öffnen (Phil-Befund 1+2). */
  .mobile-avatar-btn:not([hidden]) { display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; }
  .mobile-avatar-btn .avatar { width: 30px; height: 30px; font-size: 11.5px; pointer-events: none; }
  .mobile-avatar-panel:not([hidden]) { display: block; padding: 6px; }

  /* Topbar kompakt: Titel + Burger + Lupe (Suchfeld klappt erst auf) + Glocke */
  /* Höhe wächst mit (min-height statt height) — Ansichten wie Dispo/Rapport hängen mehrere
     Buttons in #topbar-actions, die auf 375px umbrechen; ein starres 52px hätte das abgeschnitten. */
  .topbar { padding: 8px 10px; gap: 6px; min-height: 52px; height: auto; flex-wrap: wrap; row-gap: 6px; }
  .topbar h1 { font-size: 15px; flex: 1 1 auto; }
  .topbar-search { margin-left: 0; max-width: none; width: auto; position: static; }
  .topbar-search input {
    position: fixed; left: 8px; right: 8px; top: 58px; z-index: 95;
    width: auto; padding-left: 12px; display: none; box-shadow: var(--shadow);
  }
  .topbar-search.expanded input { display: block; }
  .topbar-search .search-panel { position: fixed; left: 8px; right: 8px; top: 104px; width: auto; }
  /* Aktionsleiste (z.B. "Kalender einrichten" + "Krankheit melden" bei Mein Bereich):
     nebeneinander statt rechtsbündig gestapelt — teilt sich die Breite gleichmässig,
     Text bricht innerhalb des Buttons statt Leerraum rechts zu verschwenden. */
  #topbar-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-start;
    flex: 1 1 100%; order: 3; }
  #topbar-actions .btn:not(.plus) { flex: 1 1 0; min-width: 0; white-space: normal;
    text-align: center; }
  .topbar .grow { flex-basis: 0; }
  .topbar > .bell, .topbar > .mobile-avatar-btn { order: 2; }
  .content { padding: 12px; }

  /* Grids auf 1 Spalte */
  .grid2, .grid3, .dispo-grid, .dash-grid, .stat-row, .set-layout { grid-template-columns: 1fr !important; }
  .kv { grid-template-columns: 130px 1fr; }
  .set-nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .set-nav button { width: auto; }
  .dispo-head { flex-wrap: wrap; }
  .dispo-head select { width: 100%; }
  .file-cats { grid-template-columns: repeat(2, 1fr); }

  /* Tabellen: eigener horizontaler Scroll-Container statt Body-/Content-weitem Scroll */
  .card { overflow-x: auto; }
  table.tbl { min-width: 600px; }
  #list-table { min-width: 760px; }
  #haus-users-table { min-width: 680px; }
  #stundenzettel-table, #staff-table { min-width: 520px; }

  /* Modals: Vollbild mit angehefteter Fusszeile */
  .modal-bg { padding: 0; align-items: stretch; }
  .modal, .modal.wide { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal footer { position: sticky; bottom: 0; background: var(--panel); flex-wrap: wrap; z-index: 2; }

  /* Touch-Targets ≥44px (Apple HIG) */
  .btn { min-height: 44px; padding: 8px 14px; }
  .btn.small { min-height: 40px; }
  .btn.plus { width: 44px; height: 44px; }
  .seg button { min-height: 40px; }
  /* Font-size 16px Pflicht: iOS Safari zoomt sonst beim Fokussieren automatisch rein. */
  input[type=text], input[type=date], input[type=time], input[type=number],
  input[type=email], input[type=month], select, textarea { min-height: 44px; font-size: 16px; }
  .x { width: 44px; height: 44px; }

  /* Kalender: Wochenansicht/Personalplanung/Gantt bleiben als Grid, scrollen aber innerhalb
     ihres eigenen Containers statt die ganze Seite zu verbreitern — .gantt-scroll hat das
     schon immer getan; week-grid/shift-grid bekommen hier eine Mindestbreite dazu. */
  .week-grid { min-width: 640px; }
  /* width:fit-content + white-space:nowrap sprengte auf schmalen Viewports #content (Personalplanung) */
  .cal-coverage { width: auto; max-width: 100%; }
  .cal-coverage .cov-row { white-space: normal; }
  .shift-grid { min-width: 680px; }
  .team-tabs { -webkit-overflow-scrolling: touch; }
  /* Räume-Ansicht: Raumnamen-Spalte etwas schmaler, damit auf 390px mehr vom
     scrollbaren Zeitbereich sichtbar bleibt (Rest bleibt horizontal scrollbar). */
  .rm-label { width: 108px; font-size: 11.5px; padding: 0 8px; }
  .rm-block { font-size: 10.5px; }

  /* Popovers/Kontextmenüs: bereits per Math.min(..., innerWidth-X) geklemmt (JS) — hier nur
     zusätzlich in der Breite deckeln, damit sie auf 375px nicht trotzdem zu breit werden. */
  .asg-pop, .cp-pop, #tc-popover { max-width: calc(100vw - 24px); }
  .search-panel { max-width: calc(100vw - 16px); }
  .bell-panel { right: 8px; left: 8px; width: auto; }

  /* Dashboard/Rapport-Statzeilen etc. schon durch .stat-row-Regel oben erledigt */
}

/* ---------- PDF-Annotieren (Welle E, 06.08.2026) ----------
   Handgebauter Mini-Viewer auf pdf.js-Core-Exports (AnnotationEditorLayer,
   AnnotationEditorUIManager, AnnotationLayer, TextLayer, DrawLayer) — kein
   vorgefertigter Viewer-Baustein vendored, deshalb hier die nötigen Layer-Styles
   aus pdf.js' eigenem web/annotation_editor_layer_builder.css + text_layer_builder.css
   übernommen/eingedampft (verschachtelte &-Syntax zugunsten der Codebase-Konvention
   flach geschrieben), Farben auf unsere CSS-Variablen gemappt statt fixer Hex-Werte. */
/* PFLICHT: pdf.js liest diese Variablen zur Laufzeit selbst per getComputedStyle(document.
   documentElement) aus (FreeTextEditor.initialize() in src/display/editor/freetext.js) —
   fehlen sie, liefert parseFloat("") ein NaN, das sich in this.x/this.y jedes neu erzeugten
   FreeText-Editors einnistet (kaputte /Rect [NaN NaN NaN NaN] im gespeicherten PDF, per
   pypdf-Reparse verifiziert). Werte 1:1 aus pdf.js' eigenem :root in
   web/annotation_editor_layer_builder.css übernommen — NICHT löschen/umbenennen. */
:root {
  --freetext-line-height: 1.35;
  --freetext-padding: 2px;
  --outline-width: 2px;
}
.modal.modal-pdfannot { width: 96vw; max-width: 1500px; height: 94vh; max-height: 94vh; }
.modal.modal-pdfannot .body { padding: 0; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.pa-toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pa-tools, .pa-nav, .pa-zoom { display: flex; align-items: center; gap: 4px; }
.pa-tbtn { border: 1px solid var(--line); background: var(--panel); color: var(--text);
  border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px; min-height: 34px; }
.pa-tbtn:hover { background: var(--hover-bg); }
.pa-tbtn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pa-stamps { display: flex; align-items: center; gap: 8px; padding: 8px 14px;
  border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--hover-bg); }
.pa-stampbtn { border: 1px solid var(--line); background: var(--panel); border-radius: 8px;
  padding: 4px 8px; min-height: 40px; display: inline-flex; align-items: center; }
.pa-stampbtn:hover { border-color: var(--accent); }
.pa-stampbtn img { height: 30px; display: block; }
.pa-stampbtn-dyn { color: var(--accent); font-size: 12px; font-weight: 600; gap: 6px; }
.pa-scroll { flex: 1; overflow: auto; background: var(--bg); padding: 20px; }
.pdfViewer { position: relative; }
.pdfViewer .page { position: relative; margin: 0 auto 16px; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18); }

/* ---- pdf.js Core-Layer (Klassennamen von pdf.js selbst vergeben, nicht umbenennen) ---- */
.canvasWrapper { overflow: hidden; width: 100%; height: 100%; position: absolute; inset: 0; }
.canvasWrapper canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
.canvasWrapper svg.draw { position: absolute; mix-blend-mode: normal; }
.canvasWrapper svg.highlight { position: absolute; mix-blend-mode: multiply; }
.canvasWrapper svg.highlightOutline { position: absolute; mix-blend-mode: normal; fill-rule: evenodd; fill: none; }
.canvasWrapper svg.highlightOutline:not(.free).hovered:not(.selected) { stroke: var(--text2); stroke-width: 2px; }
.canvasWrapper svg.highlightOutline:not(.free).selected .mainOutline { stroke: var(--accent-soft); stroke-width: 4px; }
.canvasWrapper svg.highlightOutline:not(.free).selected .secondaryOutline { stroke: var(--accent); stroke-width: 2px; }

.textLayer { position: absolute; inset: 0; text-align: initial; overflow: clip; opacity: 1;
  line-height: 1; transform-origin: 0 0; z-index: 0; }
.textLayer.highlighting { cursor: crosshair; touch-action: none; }
.textLayer span, .textLayer br { color: transparent; position: absolute; white-space: pre;
  cursor: text; transform-origin: 0% 0%; }
.textLayer span[role="img"] { user-select: none; cursor: default; }
.textLayer .highlight { margin: -1px; padding: 1px; background-color: rgb(255 212 0 / 0.4); border-radius: 4px; }
.textLayer .highlight.selected { background-color: rgb(255 150 0 / 0.4); }
.textLayer .endOfContent { display: block; position: absolute; inset: 100% 0 0; z-index: 0; cursor: default; user-select: none; }
.textLayer.selecting .endOfContent { top: 0; }

.annotationLayer { position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 0 0; inset: 0; }
.annotationLayer section { position: absolute; text-align: initial; pointer-events: auto; box-sizing: border-box; }

.annotationEditorLayer { background: transparent; position: absolute; inset: 0;
  font-size: calc(100px * var(--scale-factor, 1)); transform-origin: 0 0; cursor: auto; }
.annotationEditorLayer.disabled { pointer-events: none; }
.annotationEditorLayer.freetextEditing { cursor: text; }
.annotationEditorLayer.inkEditing { cursor: crosshair; }
.annotationEditorLayer .selectedEditor { z-index: 100000 !important; }
.annotationEditorLayer.drawing * { pointer-events: none !important; }

.annotationEditorLayer .freeTextEditor,
.annotationEditorLayer .inkEditor,
.annotationEditorLayer .stampEditor,
.annotationEditorLayer .highlightEditor {
  position: absolute; background: transparent; z-index: 1; transform-origin: 0 0; cursor: auto;
  max-width: 100%; max-height: 100%; border: solid 2px transparent;
}
.annotationEditorLayer .freeTextEditor.draggable.selectedEditor,
.annotationEditorLayer .inkEditor.draggable.selectedEditor,
.annotationEditorLayer .stampEditor.draggable.selectedEditor { cursor: move; }
.annotationEditorLayer .freeTextEditor.selectedEditor,
.annotationEditorLayer .inkEditor.selectedEditor,
.annotationEditorLayer .stampEditor.selectedEditor,
.annotationEditorLayer .highlightEditor.selectedEditor {
  border: solid 2px var(--accent); outline: solid 1px var(--accent-soft);
}
.annotationEditorLayer .freeTextEditor:hover:not(.selectedEditor),
.annotationEditorLayer .inkEditor:hover:not(.selectedEditor),
.annotationEditorLayer .stampEditor:hover:not(.selectedEditor) {
  border: solid 2px var(--text2); outline: solid 1px var(--line);
}
.annotationEditorLayer .freeTextEditor { padding: 2px; width: auto; height: auto; touch-action: none; }
.annotationEditorLayer .freeTextEditor .internal { background: transparent; border: none; inset: 0;
  overflow: visible; white-space: nowrap; font: 16px sans-serif; line-height: 1.35; color: var(--accent); user-select: none; }
.annotationEditorLayer .freeTextEditor .internal:empty::before { content: attr(default-content); color: var(--text2); }
.annotationEditorLayer .freeTextEditor .internal:focus { outline: none; user-select: auto; }
.annotationEditorLayer .inkEditor { width: 100%; height: 100%; }
.annotationEditorLayer .inkEditor.editing { cursor: inherit; }
.annotationEditorLayer .inkEditor .inkEditorCanvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; }
.annotationEditorLayer .stampEditor { width: auto; height: auto; }
.annotationEditorLayer .stampEditor canvas { position: absolute; width: 100%; height: 100%; margin: 0; top: 0; left: 0; }

/* Resize-Handles (8 Punkte um den fokussierten Editor) */
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers { position: absolute; inset: 0; }
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers.hidden { display: none; }
.annotationEditorLayer :is(.freeTextEditor, .inkEditor, .stampEditor) > .resizers > .resizer {
  width: 8px; height: 8px; background: var(--accent); border: 1px solid #fff; border-radius: 2px; position: absolute;
}
.annotationEditorLayer .resizers > .resizer.topLeft { top: -5px; left: -5px; cursor: nwse-resize; }
.annotationEditorLayer .resizers > .resizer.topMiddle { top: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.annotationEditorLayer .resizers > .resizer.topRight { top: -5px; right: -5px; cursor: nesw-resize; }
.annotationEditorLayer .resizers > .resizer.middleRight { top: calc(50% - 4px); right: -5px; cursor: ew-resize; }
.annotationEditorLayer .resizers > .resizer.bottomRight { bottom: -5px; right: -5px; cursor: nwse-resize; }
.annotationEditorLayer .resizers > .resizer.bottomMiddle { bottom: -5px; left: calc(50% - 4px); cursor: ns-resize; }
.annotationEditorLayer .resizers > .resizer.bottomLeft { bottom: -5px; left: -5px; cursor: nesw-resize; }
.annotationEditorLayer .resizers > .resizer.middleLeft { top: calc(50% - 4px); left: -5px; cursor: ew-resize; }

/* Kleine Editor-Toolbar (Löschen etc.) — von AnnotationEditor selbst ins DOM gehängt
   (editor.js #addEditToolbar), hier nur die Optik dazu. */
.editToolbar { display: flex; width: fit-content; height: 28px; align-items: center; gap: 2px;
  cursor: default; pointer-events: auto; box-sizing: content-box; padding: 2px;
  position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px);
  border-radius: 6px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: var(--shadow); z-index: 100001; }
.editToolbar.hidden { display: none; }
.editToolbar .buttons { display: flex; align-items: center; height: 100%; }
.editToolbar .buttons > * { height: 100%; border: none; background: transparent; color: var(--text2);
  padding: 0 8px; border-radius: 4px; }
.editToolbar .buttons > *:hover { background: var(--hover-bg); color: var(--text); }
.editToolbar .buttons .delete { -webkit-mask-image: none; }
.editToolbar .buttons .divider { width: 1px; background: var(--line); margin-inline: 2px; }

/* Dark Mode: PDF bleibt bewusst "Papier" (weiss) wie in jedem PDF-Reader — nur die
   Werkzeugleisten und der Scroll-Hintergrund folgen dem Theme (via var(--...) oben
   ohnehin automatisch). Textlayer-Selektion etwas heller fuer Kontrast auf Papier. */
:root[data-theme="dark"] .pa-scroll { background: #1c1c1e; }

/* ================================================================
   DARK MODE (05.08.2026) — Umschalter tpTheme ('light'|'dark'|'auto')
   in der Topbar, siehe app.js applyTheme()/initTheme(). Struktur-Farben
   laufen fast komplett über die CSS-Variablen oben (var(--panel) etc.),
   deshalb reicht hier meist eine Neudefinition der Variablen; die paar
   Stellen, die noch feste Hex-Werte brauchten (Statuspillen, Gantt-Raster,
   Dropzone-Rahmen, Screen-artige Sonderfälle), kriegen eigene Overrides.
   Screen (/screen) ist bereits eigenständig dunkel — hier nicht anfassen.
   ================================================================ */
:root[data-theme="dark"] {
  --bg: #0f0f12;
  --panel: #1c1c21;
  --line: #2c2c31;
  --line-soft: #26262b;
  --text: #f5f5f7;
  --text2: #98989f;
  --accent: #4c8bff;
  --accent-soft: #16223d;
  --red: #ff6b81;
  --green: #30d977;
  --orange: #ffb44d;
  --shadow: 0 1px 3px rgba(0,0,0,.5), 0 4px 20px rgba(0,0,0,.35);
  --sidebar-bg: #17171b;
  --topbar-bg: rgba(23,23,27,.85);
  --seg-bg: #232328;
  --input-bg: #17171b;
  --row-hover: #212127;
  --hover-bg: #26262c;
  --hover-accent: #16223d;
  --chip-bg: #2a2a30;
  --popover-bg: rgba(28,28,33,.97);
  --search-bg: #232328;
  --overlay-bg: rgba(0,0,0,.6);
  --warn-soft: #3a2a0a;
  --warn-text: #fbbf74;
}
:root[data-theme="dark"] body { background: var(--bg); }
/* Vereinzelte feste rgba(0,0,0,…)-Hovers/Schatten, die nicht über eine Variable liefen. */
:root[data-theme="dark"] .nav-item:hover { background: rgba(255,255,255,.07); }
:root[data-theme="dark"] .seg button.active,
:root[data-theme="dark"] .team-tabs button.active { box-shadow: 0 1px 3px rgba(0,0,0,.4); }
:root[data-theme="dark"] .cal-cell.other { color: #5c5c62; }
:root[data-theme="dark"] .g-empty-hint { color: #55555c; }
/* Gantt-Zeitraster: das Zebra-Gitter war fest auf #f1f1f4 verdrahtet (Gradient, kein var()). */
:root[data-theme="dark"] .g-track {
  background: repeating-linear-gradient(to right,
    #232328 0, #232328 1px, transparent 1px, transparent var(--g-pxh, 56px));
}
:root[data-theme="dark"] .g-night { background: rgba(140,160,255,.08); }
:root[data-theme="dark"] .g-mid { background: #3a3a42; }
:root[data-theme="dark"] .dropzone { border-color: #3a3a42; }
:root[data-theme="dark"] .dropzone.over { background: var(--accent-soft); }
:root[data-theme="dark"] .ac-frame { background: #232328; }
:root[data-theme="dark"] .ac-mask { box-shadow: 0 0 0 9999px rgba(15,15,18,.88); }
:root[data-theme="dark"] .cp-swatch.ring { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--accent); }
/* Status-/Badge-Pillen: waren feste Pastelltöne (hell), auf Dunkel entsättigt+abgedunkelt. */
:root[data-theme="dark"] .badge-st { background: var(--chip-bg); color: var(--text2); }
:root[data-theme="dark"] .badge-st.st-bestätigt { background: #0f2e1c; color: #4ade80; }
:root[data-theme="dark"] .badge-st.st-angedacht { background: var(--warn-soft); color: var(--warn-text); }
:root[data-theme="dark"] .badge-st.st-abgesagt { background: #3a1220; color: #fb7185; }
:root[data-theme="dark"] .badge-st.st-ausgeschrieben { background: var(--accent-soft); color: #7dbcff; }
:root[data-theme="dark"] .check-btn.ok { background: #0f2e1c; border-color: #1d5c37; color: #4ade80; }
:root[data-theme="dark"] .check-btn.nok { background: #3a1220; border-color: #6e2536; color: #fb7185; }
:root[data-theme="dark"] .cover-pill { background: #3a1220; color: #fb7185; }
:root[data-theme="dark"] .cover-pill.ok { background: #0f2e1c; color: #4ade80; }
:root[data-theme="dark"] .list-row-past,
:root[data-theme="dark"] #events-table tbody tr.list-row-past { color: #6c6c74; }
/* Popovers/Kontextmenü: dunkler Blur statt hellem — sonst weisser Blitz beim Öffnen. */
:root[data-theme="dark"] #ctxmenu button:hover { background: var(--accent); color: #fff; }
:root[data-theme="dark"] .shc-row kbd { background: #2a2a30; color: var(--text); }
:root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a3a42; }
:root[data-theme="dark"] .toast { background: rgba(245,245,247,.95); color: #1d1d1f; }
@media print { :root[data-theme="dark"] body { background: #fff; } }

/* Gruppentitel in der Sidebar («Mein Bereich») — 06.08.2026 */
.nav-group-label{margin:14px 12px 4px;font-size:10.5px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase;color:var(--text2);opacity:.75}
body.freelancer-mode .nav-group-label{display:none}

/* Vorstellungen-Gruppe (Menü-Umbau, 06.08.2026): der Hauptpunkt bleibt ein normaler
   nav-item (führt auf den Kalender), daneben ein eigener Caret-Knopf zum Ein-/Ausklappen
   der fünf Untermodule — bewusst NICHT ineinander verschachtelt (kein <button> in
   <button>), sondern zwei Geschwister in einer Flex-Zeile. */
.nav-parent-row{display:flex;align-items:center;gap:2px}
.nav-parent-row .nav-item{flex:1;margin-bottom:0}
.nav-caret{display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border:none;background:none;color:var(--text2);
  border-radius:7px;transition:transform .15s, background .12s}
.nav-caret:hover{background:rgba(0,0,0,.05)}
:root[data-theme="dark"] .nav-caret:hover{background:rgba(255,255,255,.07)}
.nav-caret svg{transition:transform .15s}
.nav-group-events.collapsed .nav-caret svg{transform:rotate(-90deg)}
.nav-sub{display:flex;flex-direction:column;margin:2px 0 4px 21px;
  border-left:2px solid var(--line);padding-left:8px;overflow:hidden}
.nav-group-events.collapsed .nav-sub{display:none}
.nav-sub-item{font-size:13px;padding:7px 10px}
body.freelancer-mode .nav-group-events{display:none}

/* Leerer eventbezogener Bestand (Material/Kommunikation/Kontakte, Menü-Umbau 06.08.2026):
   Erklärtext statt kommentarlosem "keine Einträge" + Knopf auf "Alle". */
.scope-empty p{margin-bottom:12px}

/* Kennzahl-Kacheln im Arbeitszeit-Modul — nutzen Theme-Variablen, damit die
   Werte auch im Dunkelmodus lesbar sind (Bug 06.08.: heller Fallback-Hintergrund
   + helle Schrift = unsichtbare Zahlen) */
.az-kpi{flex:1;min-width:110px;background:var(--panel);border:1px solid var(--line-soft);
  border-radius:10px;padding:10px 12px;color:var(--text)}
.az-kpi-label{font-size:11px;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.az-kpi-value{font-size:19px;font-weight:600;margin-top:2px;color:var(--text)}

/* ================================================================ Modul «Übersicht»
   (06.08.2026, Phil-Auftrag) — Tagesansicht einer Veranstaltung: Zeitplan, Phasen,
   Personaleinteilung, "wo sind wir gerade". Phone-first: grosse Blöcke, Daumen-
   bedienbar, kein Querscrollen auf 390px. Eigene Klassen alle mit ev-Präfix. */
.ev-wrap{display:flex;flex-direction:column;gap:14px;max-width:820px}
.ev-switch{position:relative}
.ev-switch input{width:100%;max-width:360px}

.ev-banner{border-left:5px solid var(--c,var(--accent));padding:16px 18px}
.ev-banner-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ev-title{font-size:19px;font-weight:700;line-height:1.25}
.ev-meta{color:var(--text2);font-size:13px;margin-top:4px}
.ev-daynav{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.ev-daylabel{font-weight:600;font-size:14px;min-width:0}
.ev-dayidx{color:var(--text2);font-weight:500;font-size:12px}

/* «Jetzt»-Karte — die wichtigste Karte im Modul, deshalb visuell abgesetzt */
.ev-now{background:var(--accent-soft);border:1px solid var(--accent);position:relative}
.ev-now-pending{background:var(--panel);border:1px solid var(--line-soft)}
.ev-now-badge{display:inline-flex;align-items:center;gap:5px;background:var(--red);color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:3px 10px 3px 8px;
  animation:ev-pulse 1.8s infinite}
@keyframes ev-pulse{50%{opacity:.6}}
.ev-now-phase{display:inline-block;margin-top:8px;margin-right:6px;background:var(--phc,var(--accent));
  color:#fff;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px}
.ev-now-title{font-size:22px;font-weight:700;margin-top:8px;line-height:1.25}
.ev-now-time{font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;font-size:15px;margin-top:2px}
.ev-now-note{color:var(--text2);font-size:13px;margin-top:4px}
.ev-now-next{color:var(--text2);font-size:13px;margin-top:10px;border-top:1px solid var(--line-soft);padding-top:8px}
.ev-now-next b{color:var(--text)}

.ev-phasebar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.ev-phase{border:1px solid var(--line-soft);border-radius:10px;padding:6px 10px;font-size:12.5px;color:var(--text2)}
.ev-phase.active{background:var(--phc,var(--accent));border-color:transparent;color:#fff;font-weight:700;
  box-shadow:0 2px 12px rgba(0,0,0,.18)}
.ev-phase.done{opacity:.4}
.ev-phase-t{font-size:11px;opacity:.85;margin-left:4px}
.ev-helm{display:inline-block;vertical-align:-3px;margin-left:4px;color:#b8860b}
.ev-phase.active .ev-helm{color:#fff}

.ev-timeline{position:relative;padding-left:18px}
.ev-timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line-soft)}
.ev-titem{position:relative;display:flex;align-items:baseline;gap:14px;padding:9px 8px;border-radius:9px}
.ev-titem::before{content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--line);border:2px solid var(--panel)}
.ev-titem.done{opacity:.4}
.ev-titem.active{background:var(--accent-soft)}
.ev-titem.active::before{background:var(--accent)}
.ev-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:13.5px;min-width:88px;flex-shrink:0}
.ev-titem.active .ev-time{color:var(--accent)}
.ev-what{font-size:14px;font-weight:500}
.ev-titem.active .ev-what{font-weight:700}
.ev-note{color:var(--text2);font-size:12px;margin-top:2px}
.ev-live{margin-left:auto;flex-shrink:0;background:var(--red);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.05em;border-radius:999px;padding:2px 8px;animation:ev-pulse 1.8s infinite}

.ev-stafflist{display:flex;flex-direction:column}
.ev-staff-item{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line-soft)}
.ev-staff-item:last-child{border-bottom:none}
.ev-staff-mid{flex:1;min-width:0;display:flex;flex-direction:column}
.ev-staff-name{font-weight:600;font-size:13.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.ev-staff-role{color:var(--text2);font-size:12px;margin-top:1px}
.ev-staff-time{font-variant-numeric:tabular-nums;color:var(--text2);font-size:12.5px;flex-shrink:0;white-space:nowrap}
.ev-tel{display:inline-flex;align-items:center;justify-content:center;color:var(--accent);opacity:.7;
  flex-shrink:0;border-radius:50%;width:28px;height:28px}
.ev-tel:hover{opacity:1;background:var(--hover-bg)}
.ev-tel-duty{color:var(--green)}

@media (max-width: 820px) {
  .ev-title{font-size:20px}
  .ev-now-title{font-size:24px}
  .ev-daynav .btn.small{min-width:44px}
  /* Diensttelefon soll auf dem Phone die naheliegende Aktion sein — grosser Kreis
     statt dezentem Icon, sofort mit dem Daumen treffbar (Phil: Freelancer/Teilzeit
     rufen von unterwegs an). */
  .ev-tel{width:40px;height:40px;background:var(--accent-soft);opacity:1}
  .ev-tel-duty{background:#e7f8ec}
  :root[data-theme="dark"] .ev-tel-duty{background:#0f2e1c}
  .ev-staff-item{padding:12px 2px}
  .ev-timeline{padding-left:16px}
  .ev-time{min-width:76px;font-size:13px}
}

/* ---------- Kosten-Modul (06.08., ex Rapport) — Team-Akkordeon im Kostenplan-Tab ---------- */
.kt-team > summary { cursor: pointer; display: flex; align-items: center; list-style: none;
  font-size: 14px; }
.kt-team > summary::-webkit-details-marker { display: none; }
.kt-team > summary::before { content: "▸"; display: inline-block; margin-right: 8px;
  color: var(--text2); transition: transform .15s; flex-shrink: 0; }
.kt-team[open] > summary::before { transform: rotate(90deg); }
@media (max-width: 820px) {
  .kt-team > summary { flex-wrap: wrap; gap: 4px; }
  .kt-team > summary > span:last-child { margin-left: 0 !important; width: 100%; }
}

/* Anmietungs-Abgleich (06.08.): Vorschau-Dialog «Aus Dispo generieren». Zeigt je
   Lieferant, was neu angelegt, aktualisiert oder bewusst NICHT angefasst wird. */
.rs-block { margin: 0 0 16px; }
.rs-block h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.rs-block > p { margin: 0 0 10px; font-size: 12.5px; color: #666; }
.rs-row { padding: 8px 10px; margin-bottom: 6px; border: 1px solid #e6e6e6;
  border-radius: 8px; background: #fafafa; }
.rs-row > b { margin-right: 6px; }
.rs-diff { margin: 6px 0 0; padding-left: 16px; font-size: 12.5px; line-height: 1.7; }
.rs-diff li { list-style: none; }
.rs-diff em { color: #888; font-style: normal; }
.rs-add { color: #1d7a3d; }
.rs-del { color: #b3261e; }
.rs-chg { color: #8a5a00; }
.rs-warn { border: 1px solid #f0c98a; border-radius: 10px; padding: 12px;
  background: #fffaf0; }
.rs-warn h4 { color: #8a5a00; }
.rs-force { display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12.5px; font-weight: 600; }
:root[data-theme="dark"] .rs-row { background: #1c1c1e; border-color: #3a3a3c; }
:root[data-theme="dark"] .rs-block > p { color: #9a9a9e; }
:root[data-theme="dark"] .rs-diff em { color: #8a8a8e; }
:root[data-theme="dark"] .rs-add { color: #4ade80; }
:root[data-theme="dark"] .rs-del { color: #f87171; }
:root[data-theme="dark"] .rs-chg { color: #fbbf24; }
:root[data-theme="dark"] .rs-warn { background: #2e2508; border-color: #55480f; }
:root[data-theme="dark"] .rs-warn h4 { color: #fbbf24; }

/* Such-/Auswahlfeld-Standard (06.08.2026, Phil): dunklerer Grund für bessere
   Lesbarkeit, Datum dezent hinter dem Titel, Aufklapp-Pfeil wie beim
   gewöhnlichen Auswahlfeld. */
.typeahead-drop { background: var(--panel); }
:root[data-theme="dark"] .typeahead-drop { background: #23232a; }
.ta-item .ta-date { color: var(--text2); font-size: 11.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-left: 6px; }
.ta-item.active .ta-date { color: rgba(255,255,255,.85); }
.gc-arrow { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--text2); cursor: pointer; border-radius: 6px; }
.gc-arrow:hover { background: var(--hover-accent); color: var(--text); }
.gc-input { padding-right: 28px; }

/* Mail-Modul (06.08.): Versand-Fenster, Postausgangsbuch, Einstellungen. */
.ml-compose input, .ml-compose textarea { width: 100%; }
.ml-compose textarea { font-family: inherit; font-size: 13.5px; line-height: 1.55; }
.ml-cc-toggle { margin: 6px 0 2px; }
.ml-hidden { display: none; }
.ml-warn { background: #fffaf0; border: 1px solid #f0c98a; color: #8a5a00;
  border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; font-size: 12.5px; }
.ml-sig { margin-top: 12px; font-size: 12.5px; }
.ml-sig pre, .ml-body { white-space: pre-wrap; font-family: inherit;
  background: #fafafa; border: 1px solid #ececf0; border-radius: 8px; padding: 10px; }
.ml-row { cursor: pointer; }
.ml-st { font-size: 11px; font-weight: 600; border-radius: 12px; padding: 2px 9px; }
.ml-st-gesendet { background: #e7f8ec; color: #1d7a3d; }
.ml-st-dormant { background: #f0f0f2; color: #6b6b70; }
.ml-st-fehler { background: #fdeaea; color: #b3261e; }
.ml-team { display: grid; grid-template-columns: 140px 1fr; gap: 8px;
  align-items: start; margin-bottom: 10px; }
.ml-team textarea { grid-column: 2; width: 100%; font-family: inherit; }
.ml-actions { margin: 14px 0 22px; }
:root[data-theme="dark"] .ml-sig pre, :root[data-theme="dark"] .ml-body {
  background: #1c1c1e; border-color: #3a3a3c; }
:root[data-theme="dark"] .ml-warn { background: #2e2508; border-color: #55480f; color: #fbbf24; }
:root[data-theme="dark"] .ml-st-dormant { background: #2c2c2e; color: #9a9a9e; }

/* Eventliste: lange Titel sauber auf zwei Zeilen begrenzen statt gequetscht
   umbrechen zu lassen (Phil 06.08.). Der vollständige Titel steht im Tooltip;
   der Statuspunkt hängt an der ersten Zeile, nicht mittig im Block. */
.evl-title { display: flex; align-items: flex-start; gap: 7px; min-width: 0; }
.evl-title .dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 5px; }
.evl-title b { font-weight: 600; line-height: 1.35; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  word-break: break-word; hyphens: auto; }
.tbl td[data-col="titel"] { padding-top: 6px; padding-bottom: 6px; }

/* ================================================================ Kommunikations-Timeline
   (06.08.2026, komm.js) — Konversationsansicht statt Einzelkarten: flach, chronologisch,
   Antwortbezug nur als Referenzzeile (keine Baum-Einrückung, s. komm.js für die Begründung).
   Präfix kt- (Kommunikations-Timeline); .komm-card/.komm-tl/.kc-* aus dem alten Design
   bleiben bestehen (werden von der Dashboard-Teamübersicht weiterhin genutzt, s. kommCard()
   in app.js) und werden hier nicht angefasst. */
.kt-tl { display: flex; flex-direction: column; gap: 22px; }

/* Konversationsblock: Kopfzeile (Betreff/Anzahl/Datum) + die Nachrichten darin */
.kt-thread { display: flex; flex-direction: column; gap: 8px; }
.kt-thead { display: flex; align-items: baseline; gap: 10px; padding: 0 2px;
  border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.kt-thead-subj { font-weight: 700; font-size: 13.5px; }
.kt-thead-count { color: var(--text2); font-size: 11.5px; }
.kt-thead-date { margin-left: auto; color: var(--text2); font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.kt-msgs { display: flex; flex-direction: column; gap: 8px; }

/* Eine Nachricht — Typ-Unterscheidung über Rahmen+Hintergrund (PLUS Icon+Label im Kopf,
   s. kt-typebadge), nie über Farbe allein. */
.kt-msg { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; }
.kt-msg-aus { border-color: var(--text2); border-width: 1.5px; }
.kt-msg-notiz { background: #fffbeb; border-color: #f2e3b3; }
:root[data-theme="dark"] .kt-msg-notiz { background: #2e2508; border-color: #55480f; }
.kt-ref { color: var(--text2); font-size: 11px; margin-bottom: 6px; }
.kt-msg-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kt-avatar { display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; color: #fff;
  font-size: 11px; font-weight: 700; }
.kt-avatar.small { width: 20px; height: 20px; font-size: 9px; }
.kt-sender { font-weight: 600; font-size: 13px; }
.kt-typebadge { display: inline-flex; align-items: center; gap: 4px; background: var(--chip-bg);
  color: var(--text2); font-size: 10.5px; font-weight: 600; border-radius: 9px; padding: 2px 8px; }
.kt-date { margin-left: auto; color: var(--text2); font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Aktionen (Antworten, Gelesen, Task, Details) erst bei Hover/Fokus einblenden, damit die
   Ansicht ruhig bleibt — genau ein sichtbares Element weniger pro Nachricht im Ruhezustand. */
.kt-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .12s; }
.kt-msg:hover .kt-actions, .kt-msg:focus-within .kt-actions { opacity: 1; }
.kt-abtn { border: none; background: none; color: var(--text2); padding: 5px; border-radius: 7px;
  display: inline-flex; cursor: pointer; }
.kt-abtn:hover { background: var(--hover-bg); color: var(--text); }
.kt-notizhint { display: flex; align-items: center; gap: 5px; color: var(--warn-text);
  font-size: 11px; margin-top: 5px; }
.kt-body { margin-top: 7px; }
.kt-body-text { white-space: pre-wrap; font-size: 13px; line-height: 1.5; }
.kt-quote-btn { margin-top: 5px; border: 1px solid var(--line); background: none;
  color: var(--text2); font-size: 11px; border-radius: 999px; padding: 1px 10px; cursor: pointer; }
.kt-quote-btn:hover { background: var(--hover-bg); }
.kt-quote-body { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line);
  color: var(--text2); font-size: 12.5px; white-space: pre-wrap; }

/* ---------- gantt2.js: Drag&Drop Zuweisen/Freigeben/Kopieren + Ansicht «Anwesenheit» (06.08.2026) ---------- */
.g2-hint { font-size: 11px; color: var(--text2); margin: 0 0 8px; display: flex; gap: 4px; flex-wrap: wrap; }
.g2-hint span[data-help] { cursor: help; border-bottom: 1px dotted var(--text2); }
.g2-openzone { display: none; align-items: center; gap: 8px; margin: 0 0 8px;
  padding: 10px 14px; border: 2px dashed var(--line); border-radius: 10px;
  color: var(--text2); font-size: 12.5px; background: var(--panel); }
.g2-openzone.g2-show { display: flex; }
.g2-openzone.g2-drop-target { border-color: var(--accent); background: var(--hover-accent); color: var(--text); }
.g-row.g2-drop-target .g-label { background: var(--hover-accent); box-shadow: inset 0 0 0 2px var(--accent); }
.g2-dragtip { position: fixed; z-index: 9999; display: none; pointer-events: none;
  background: var(--text); color: var(--panel); font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Ansicht «Anwesenheit» — eigene Klassen (g2-att-*), bewusst getrennt von .g-* des
   Haupt-Gantt, damit künftige Änderungen an der einen Ansicht die andere nicht berühren. */
.g2-att-toprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.g2-att-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.g2-att-inner { position: relative; }
.g2-att-row { display: flex; border-bottom: 1px solid var(--line-soft); }
.g2-att-row:last-child { border-bottom: none; }
.g2-att-label { position: sticky; left: 0; width: 170px; flex-shrink: 0;
  background: var(--row-hover); z-index: 6; display: flex; align-items: center;
  gap: 8px; padding: 0 10px; font-size: 12px; font-weight: 600; border-right: 1px solid var(--line); }
.g2-att-track { position: relative; flex-shrink: 0;
  background: repeating-linear-gradient(to right, #f1f1f4 0, #f1f1f4 1px, transparent 1px, transparent var(--g-pxh, 56px)); }
.g2-att-axis .g2-att-track { background: none; }
.g2-att-hour { position: absolute; top: 4px; font-size: 10px; color: var(--text2);
  transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.g2-att-block { position: absolute; border-radius: 7px; color: #fff; font-size: 11px;
  display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden;
  white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.18); user-select: none; }
.g2-att-block .g-time { font-size: 10px; opacity: .85; font-variant-numeric: tabular-nums; }
.g2-att-handle { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 2; }
.g2-att-handle.l { left: 0; } .g2-att-handle.r { right: 0; }
:root[data-theme="dark"] .g2-att-track { background: repeating-linear-gradient(to right,
    #232328 0, #232328 1px, transparent 1px, transparent var(--g-pxh, 56px)); }
:root[data-theme="dark"] .g2-dragtip { background: #e8e8ec; color: #1c1c1e; }
.kt-meta { display: flex; gap: 16px; margin-top: 7px; font-size: 11.5px; color: var(--text2); }
.kt-sum { color: var(--text2); font-size: 12.5px; margin-top: 7px; }

/* Klappzeile "N weitere Nachrichten" + die dahinter versteckte Nachrichtengruppe */
.kt-more { display: flex; align-items: center; gap: 7px; padding: 8px 14px;
  background: var(--row-hover); border: 1px dashed var(--line); border-radius: 10px;
  color: var(--text2); font-size: 12.5px; cursor: pointer; }
.kt-more:hover { background: var(--hover-bg); color: var(--text); }
.kt-mid-group { display: flex; flex-direction: column; gap: 8px; }

/* Einzelne eingeklappte Nachricht (kompakt: Avatar, Absender fett, Textanriss, Datum) */
.kt-msg-compact { display: flex; align-items: center; gap: 10px; padding: 6px 10px;
  border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.kt-msg-compact:hover { background: var(--hover-bg); }
.kt-compact-sender { flex-shrink: 0; }
.kt-compact-snip { flex: 1; min-width: 0; color: var(--text2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* Zuschauerstatistik (06.08.): Jahresauswertung mit Monatsbalken. Bewusst ohne
   Diagramm-Bibliothek — reine Balken aus divs, das reicht fuer Monatswerte und
   spart eine Abhaengigkeit im Auslieferungspfad. */
.st-head { display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin-bottom: 18px; }
.st-jahr { display: flex; align-items: center; gap: 8px; font-size: 17px; }
.st-kacheln { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.st-kachel { min-width: 108px; padding: 10px 14px; border: 1px solid #e6e6e6;
  border-radius: 10px; background: #fafafa; display: flex; flex-direction: column; }
.st-wert { font-size: 20px; font-weight: 700; line-height: 1.2; }
.st-label { font-size: 11.5px; color: #6b6b70; }
.st-chart { display: flex; align-items: flex-end; gap: 6px; height: 170px;
  padding: 10px 4px 0; margin-bottom: 18px; border-bottom: 1px solid #e6e6e6;
  overflow-x: auto; }
.st-bar-wrap { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; height: 100%; }
.st-bar { width: 62%; min-height: 2px; background: var(--accent, #3478f6);
  border-radius: 4px 4px 0 0; }
.st-bar-lbl { font-size: 11px; color: #6b6b70; padding-top: 5px; }
:root[data-theme="dark"] .st-kachel { background: #1c1c1e; border-color: #3a3a3c; }
:root[data-theme="dark"] .st-label, :root[data-theme="dark"] .st-bar-lbl { color: #9a9a9e; }
:root[data-theme="dark"] .st-chart { border-bottom-color: #3a3a3c; }

/* Faktura-PDF (Accounting E4, 06.08.2026) — Rechnungsliste + Entwurf/Detail-Dialog. */
.fa-head { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fa-row { cursor: pointer; }
.fa-modal .grid2 { margin-top: 4px; }
.fa-modal textarea { width: 100%; font-family: inherit; }
.fa-items input { width: 100%; }
.fa-items td, .fa-items th { vertical-align: middle; }
.fa-total { text-align: right; margin-top: 8px; font-size: 14px; }
.fa-hint { border-color: var(--accent, #3478f6); }
:root[data-theme="dark"] .fa-hint { border-color: var(--accent, #0a84ff); }
/* Zwischensumme/MwSt/Total-Aufschlüsselung (E4-Ergänzung 07.08.2026, Rechnungs-
   detail + «Rechnung aus Rapport»-Vorschau) — .fa-total bleibt die fett hervor-
   gehobene Total-Zeile, die beiden Zeilen davor sind gedämpft. */
.fa-breakdown { text-align: right; margin-top: 10px; font-size: 13px; color: var(--text2); }
.fa-breakdown div { margin-top: 3px; }
.fa-breakdown .fa-total { color: var(--text); margin-top: 6px; }

/* ===== Adressbuch 2.0 (06.08.2026) ===== */
/* Liste: Kopfbereich (Suche/Kind-Segment/Zähler) + Filterzeile (Kategorie-Chips/Arbeitslisten) */
.k-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.k-search { max-width: 360px; flex: 1 1 260px; }
.k-count { color: var(--text2); font-size: 12.5px; white-space: nowrap; margin-left: auto; }
.k-filterrow { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; }
.k-catchips { display: flex; gap: 6px; flex-wrap: wrap; }
.k-worklists { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.small.active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Kategorie-Filterchip: gefüllt wenn aktiv, sonst nur umrandet, beides in --chip-color
   (aus S.ds.kontakt_kategorien.colors, wie .role-chip roh-hex — funktioniert dadurch
   unverändert in beiden Themes, s. Kommentar oben bei :root). */
.k-filterchip { border: 1.5px solid var(--chip-color, var(--line)); background: transparent;
  color: var(--chip-color, var(--text2)); border-radius: 12px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 600; }
.k-filterchip.active { background: var(--chip-color, var(--accent)); color: #fff;
  border-color: var(--chip-color, var(--accent)); }
.k-sub { color: var(--text2); font-size: 11.5px; margin-top: 1px; }
.k-sub[data-orgopen] { cursor: pointer; }
.k-sub[data-orgopen]:hover { text-decoration: underline; }
.k-badge { background: var(--chip-bg); color: var(--text2); }
.k-badge-warn { background: var(--warn-soft); color: var(--warn-text); }

/* Visitenkarten-Detailansicht */
.k-back { border: none; background: none; color: var(--text2); font-size: 12.5px;
  font-weight: 500; padding: 4px 0; margin-bottom: 10px; display: inline-flex;
  align-items: center; gap: 6px; }
.k-back:hover { color: var(--text); }
.kd-card-top { display: flex; gap: 18px; }
.kd-main { flex: 1 1 auto; min-width: 0; }
.kd-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.kd-sub { color: var(--text2); font-size: 13px; margin-top: 3px; }
.kd-sub a { color: var(--text2); }
.kd-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; }
.kd-right { flex: 0 0 200px; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kd-actions { display: flex; gap: 6px; }
.kd-iconbtn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); display: inline-flex; align-items: center;
  justify-content: center; }
.kd-iconbtn:hover { background: var(--hover-bg); }
.kd-meta { text-align: right; font-size: 12px; color: var(--text2); display: flex;
  flex-direction: column; gap: 4px; }
.kd-statline { white-space: nowrap; }
.kd-tabseg { margin: 16px 0; flex-wrap: wrap; height: auto; }

.kd-ways div { padding: 3px 0; }
.kd-ways a { display: inline-flex; align-items: center; gap: 6px; }
.kd-addr { font-size: 13px; line-height: 1.6; }
.kd-notes { font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.kd-list-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0;
  border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.kd-list-row:last-child { border-bottom: none; }
.kd-list-row span { color: var(--text2); white-space: nowrap; }

.kd-stamm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kd-fields { display: flex; flex-direction: column; gap: 8px; }
.kd-fields.kd-fields-edit { display: grid; gap: 12px 14px; }
.kd-field { display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
  padding: 3px 0; border-bottom: 1px solid var(--line-soft); }
.kd-field-l { color: var(--text2); flex: 0 0 40%; }
.kd-field-v { text-align: right; flex: 1; min-width: 0; }
.kd-editbar { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line); }

.k-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.k-person-card { cursor: pointer; padding: 12px; }
.k-person-card:hover { background: var(--hover-bg); }

/* Tab Produktionen (Jobzettel W3-B) */
.k-prod-summary { color: var(--text2); font-size: 12.5px; margin-bottom: 10px; }
.k-prod-filters { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.k-prod-filters select { max-width: 220px; }
.k-prod-role-select { border: 1px solid transparent; background: transparent; color: var(--text);
  font: inherit; font-size: 13px; padding: 3px 4px; border-radius: 6px; cursor: pointer;
  max-width: 100%; }
.k-prod-role-select:hover, .k-prod-role-select:focus { border-color: var(--line); background: var(--panel); }

/* Tab Kommunikation (Jobzettel W3-B) */
.k-versand-lists { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.k-versand-locks { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line-soft); }
.k-lock { color: var(--text2); }
.k-lock-active { color: var(--warn-text); font-weight: 600; }
.k-planned-box { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--line);
  border-radius: var(--radius); font-size: 12.5px; color: var(--text2); }
.k-planned-badge { display: inline-block; background: var(--chip-bg); color: var(--text);
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  border-radius: 8px; padding: 2px 7px; margin-right: 8px; vertical-align: middle; }

/* Tab Standort (Jobzettel W3-B) */
#kd-map { background: var(--panel2, var(--chip-bg)); }
#kd-map .leaflet-container { font: inherit; }
.k-route-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.k-route-tile { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 13px; font-weight: 600; }
.k-route-tile.disabled { opacity: .6; font-weight: 400; font-size: 12px; }

@media (max-width: 820px) {
  .kd-card-top { flex-direction: column; }
  .kd-right { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .kd-meta { text-align: left; }
  .kd-stamm-grid { grid-template-columns: 1fr; }
  .k-route-tiles { grid-template-columns: 1fr; }
}

/* Posteingang (07.08.2026) — automatisches E-Mail-Abholen mit KI-Zuordnung.
   Präfix pe-, eigener Block statt Vermischung mit komm.js (kt-*) — andere
   Session/Modul, siehe static/posteingang.js Kopfkommentar. */
.pe-nav-count { margin-left: auto; background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 10px; min-width: 17px;
  height: 17px; padding: 0 5px; display: flex; align-items: center;
  justify-content: center; }
.nav-item.active .pe-nav-count { background: #fff; color: var(--accent); }
.pe-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  flex-wrap: wrap; }
.pe-auto-banner-box { background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px; }
.pe-auto-banner-box ul { margin: 6px 0 0 18px; padding: 0; }
.pe-row { margin-bottom: 12px; padding: 14px 16px; }
.pe-row-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; flex-wrap: wrap; }
.pe-sender { font-weight: 600; font-size: 13.5px; }
.pe-subject { font-size: 14.5px; margin: 4px 0 2px; }
.pe-team-chip { display: inline-block; margin-left: 8px; padding: 1px 8px;
  border-radius: 10px; background: var(--chip-bg); color: var(--text2);
  font-size: 10.5px; font-weight: 600; vertical-align: middle; }
.pe-summary { color: var(--text2); font-size: 13px; margin-bottom: 8px; }
.pe-vorschlag { display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--accent); font-size: 13px; font-weight: 600; }
.pe-vorschlag:hover { text-decoration: underline; }
.pe-begr { margin: 2px 0 8px; }
.pe-auto-chip { display: inline-flex; align-items: center; gap: 5px; color: #1d7a3d;
  font-size: 12.5px; font-weight: 600; margin-bottom: 6px; }
.pe-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pe-ev-pick { flex: 1 1 240px; min-width: 200px; }
.ml-imap { display: flex; gap: 8px; margin-top: 6px; }
.ml-imap input { flex: 1; }
:root[data-theme="dark"] .pe-auto-banner-box { background: var(--accent-soft); border-color: var(--accent); }
:root[data-theme="dark"] .pe-team-chip { background: var(--chip-bg); color: var(--text2); }
:root[data-theme="dark"] .pe-auto-chip { color: #4ade80; }

/* ============================================================ Settings 2.0 (07.08.2026)
   Phil: "die settings sind sowieso ranzig, riesen puff... mach tabs, mach das schön
   ordentlich" — Reiter statt Endlos-Liste, Suche quer über alle Reiter, klappbare
   Abschnitte + Sprungleiste. Präfix s2-, eigener Block statt Vermischung mit dem alten
   .set-nav/.set-layout (bleibt ungenutzt stehen, siehe static/settings2.js Kopfkommentar
   — überschreibt window.renderSettings, app.js unangetastet). */
.s2-shell { display: flex; flex-direction: column; gap: 14px; max-width: 1100px; }
.s2-search-row { position: relative; }
.s2-search-box { display: flex; align-items: center; gap: 8px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; max-width: 420px; }
.s2-search-box svg { flex: none; color: var(--text2); }
.s2-search-box input { flex: 1; border: none; background: transparent; outline: none;
  font-size: 13.5px; color: var(--text); }
.s2-search-box button { flex: none; border: none; background: transparent; color: var(--text2);
  display: flex; padding: 2px; border-radius: 6px; }
.s2-search-box button:hover { background: var(--hover-bg); color: var(--text); }
.s2-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line);
  padding-bottom: 10px; }
.s2-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: none;
  border-radius: 9px; background: transparent; color: var(--text2); font-weight: 600;
  font-size: 13px; transition: opacity .12s; }
.s2-tab:hover { background: var(--hover-bg); color: var(--text); }
.s2-tab.active { background: var(--accent-soft); color: var(--accent); }
.s2-tab.s2-dim { opacity: .35; }
.s2-subtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.s2-subtab { padding: 6px 12px; border: 1px solid var(--line); border-radius: 20px;
  background: var(--panel); color: var(--text2); font-size: 12.5px; font-weight: 600;
  transition: opacity .12s; }
.s2-subtab:hover { background: var(--hover-bg); color: var(--text); }
.s2-subtab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.s2-subtab.s2-dim { opacity: .35; }
.s2-jumpbar { display: flex; flex-wrap: wrap; gap: 6px; }
.s2-jumpbar button { padding: 4px 10px; border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--search-bg); color: var(--text2); font-size: 11.5px; }
.s2-jumpbar button:hover { background: var(--hover-bg); color: var(--text); }
.s2-body .card { position: relative; }
.s2-fold-btn { position: absolute; top: 14px; right: 14px; border: none; background: transparent;
  color: var(--text2); padding: 2px; border-radius: 6px; display: flex; }
.s2-fold-btn:hover { background: var(--hover-bg); color: var(--text); }
.s2-fold-btn svg { transition: transform .15s; }
.card.s2-collapsed { padding-bottom: 16px; overflow: hidden; }
.card.s2-collapsed > *:not(:first-child) { display: none !important; }
.card.s2-collapsed .s2-fold-btn { display: flex !important; }
.card.s2-collapsed .s2-fold-btn svg { transform: rotate(-90deg); }
.s2-saved-hint { color: var(--green); font-size: 12px; margin-left: 10px; }
.s2-cp-team { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.s2-cp-team:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.s2-cp-kind { margin-top: 8px; }
.s2-cp-kind-label { font-size: 11px; color: var(--text2); text-transform: uppercase;
  display: block; margin-bottom: 4px; }
.s2-cp-kind .cat-check { margin: 2px 10px 2px 0; display: inline-flex; }
@media (max-width: 720px) {
  .s2-tabs, .s2-subtabs { gap: 4px; }
  .s2-tab { padding: 7px 10px; font-size: 12.5px; }
  .s2-tab span { display: inline; }
  .s2-search-box { max-width: none; }
}
:root[data-theme="dark"] .s2-search-box { background: var(--panel); border-color: var(--line); }
:root[data-theme="dark"] .s2-subtab { background: var(--panel); border-color: var(--line); }
:root[data-theme="dark"] .s2-jumpbar button { background: var(--search-bg); border-color: var(--line-soft); }

/* --------------------------------------------------------------------------
   Waagrechte Scrollbalken sichtbar machen (Phil 07.08.2026: «horiz
   scrollbalken nicht sichtbar, nur 2px davon»).

   Ursache: macOS blendet überlagernde Scrollbalken aus, bis jemand scrollt —
   und wer nicht weiss, DASS es rechts weitergeht, scrollt nie. Genau bei den
   breiten Zeitrastern (Räume, Gantt, Tabellen) ist das fatal: Der halbe Tag
   liegt ausserhalb des Sichtfelds und wirkt, als gäbe es ihn nicht.
   Deshalb hier dauerhaft sichtbare, schlanke Balken statt der überlagernden.
   -------------------------------------------------------------------------- */
.rm-scroll, .g2-att-scroll, .tbl-scroll, .gantt-scroll,
.scroll-x, [data-scroll-x] {
  scrollbar-width: thin;                       /* Firefox */
  scrollbar-color: var(--line) transparent;
  scrollbar-gutter: stable;                    /* Platz reservieren, kein Springen */
}
.rm-scroll::-webkit-scrollbar,
.g2-att-scroll::-webkit-scrollbar,
.tbl-scroll::-webkit-scrollbar,
.gantt-scroll::-webkit-scrollbar,
.scroll-x::-webkit-scrollbar,
[data-scroll-x]::-webkit-scrollbar {
  height: 11px;                                /* waagrecht */
  width: 11px;                                 /* senkrecht */
  -webkit-appearance: none;
}
.rm-scroll::-webkit-scrollbar-track,
.g2-att-scroll::-webkit-scrollbar-track,
.tbl-scroll::-webkit-scrollbar-track,
.gantt-scroll::-webkit-scrollbar-track,
.scroll-x::-webkit-scrollbar-track,
[data-scroll-x]::-webkit-scrollbar-track {
  background: transparent;
}
.rm-scroll::-webkit-scrollbar-thumb,
.g2-att-scroll::-webkit-scrollbar-thumb,
.tbl-scroll::-webkit-scrollbar-thumb,
.gantt-scroll::-webkit-scrollbar-thumb,
.scroll-x::-webkit-scrollbar-thumb,
[data-scroll-x]::-webkit-scrollbar-thumb {
  background: var(--text2);
  opacity: .45;
  border-radius: 6px;
  border: 3px solid transparent;               /* schlanker Griff mit Luft */
  background-clip: content-box;
}
.rm-scroll::-webkit-scrollbar-thumb:hover,
.g2-att-scroll::-webkit-scrollbar-thumb:hover,
.tbl-scroll::-webkit-scrollbar-thumb:hover,
.gantt-scroll::-webkit-scrollbar-thumb:hover,
.scroll-x::-webkit-scrollbar-thumb:hover,
[data-scroll-x]::-webkit-scrollbar-thumb:hover {
  background: var(--text);
  background-clip: content-box;
}

/* --------------------------------------------------------------------------
   Textfarbe in Menüs und Popovers (Phil 07.08.2026: «dark mode alle
   kontextmenus: text im menu muss weiss sein»).

   Ursache: «#ctxmenu button» setzte «background: none», aber KEINE Farbe —
   der Knopf erbte damit die Standardfarbe des Browsers, die im Dunkelmodus
   dunkel bleibt. Auf dunklem Grund also praktisch unlesbar.

   Die Regeln greifen bewusst breit über alle schwebenden Flächen, damit
   dieselbe Falle beim nächsten neuen Menü nicht wieder zuschlägt: Wer eine
   Fläche baut und die Hintergrundfarbe setzt, vergisst die Schriftfarbe fast
   immer — im Hellmodus fällt es nicht auf, im Dunkelmodus sofort.
   -------------------------------------------------------------------------- */
#ctxmenu, #ctxmenu button,
.popover, .popover button, .popover a,
.dropdown, .dropdown button, .dropdown a,
.menu-pop, .menu-pop button,
.gc-list, .gc-list button, .gc-item,
.evt-popover, .evt-popover button, .evt-popover label {
  color: var(--text);
}
/* Beim Überfahren gewinnt die Akzentfläche — dort ist Weiss richtig, weil
   der Akzent in beiden Modi dunkel genug ist. */
#ctxmenu button:hover,
.popover button:hover,
.dropdown button:hover,
.menu-pop button:hover,
.gc-list button:hover, .gc-item:hover {
  background: var(--accent);
  color: #fff;
}
/* Ausgegraute Einträge bleiben erkennbar gedämpft, aber lesbar. */
#ctxmenu button:disabled, .popover button:disabled, .dropdown button:disabled {
  color: var(--text2);
  opacity: .7;
}
.mobile-avatar-btn { color: var(--text); }

/* --------------------------------------------------------------------------
   Telefonnummern (Phil 07.08.2026).
   Erst stand hier ein grüner Kreisknopf neben der Nummer — er überlappte den
   Text und stach aus der Gestaltung heraus («ultrahässlich»). Direkt darüber
   steht die E-Mail-Zeile als schlichtes Symbol mit Text, und die sieht gut aus.
   Telefon wird jetzt genauso dargestellt: Hörersymbol, Nummer, ruhig.
   -------------------------------------------------------------------------- */
a.tel-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--accent); text-decoration: none;
  vertical-align: middle;
}
a.tel-link:hover { text-decoration: underline; }
a.tel-link .tel-ico { flex: none; opacity: .8; }
a.tel-link:hover .tel-ico { opacity: 1; }
/* Auf dem Telefon eine Trefferfläche, die man mit dem Daumen erwischt,
   ohne dass die Zeile optisch wächst (Apple empfiehlt 44 Punkte). */
@media (max-width: 700px) {
  a.tel-link { padding: 6px 0; min-height: 34px; }
}

/* --------------------------------------------------------------------------
   Statistik-Ausbau (07.08.2026, Phil: "grafiken, kuchen und kurven bro").
   Nur var(--...) für Text/Linien/Flächen — SVG-Diagramme sind reines Markup
   ohne eigene Farbwerte, damit sie im Dark Mode automatisch mitziehen (in der
   Nacht auf den 07.08. ist eine andere Ansicht genau daran gescheitert: fixer
   heller Wert, unsichtbarer Text im Dark Mode). Alte .st-kachel/.st-chart/
   .st-bar*-Regeln weiter oben bleiben unverändert stehen (Datei nur ergänzen,
   nichts Bestehendes anfassen) — .st-chart/.st-bar* werden von hier aus nicht
   mehr benutzt, das ersetzt jetzt die SVG-Kurve.
   -------------------------------------------------------------------------- */
.st-wrap { display: flex; flex-direction: column; gap: 16px; }
.st-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.st-nav { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.st-nav b { min-width: 64px; text-align: center; }
.st-kachel-gross { min-width: 130px; }
.st-kachel-gross .st-wert { font-size: 26px; }
.st-card h3 { display: flex; align-items: center; gap: 6px; }
.st-chartbox { width: 100%; }
.st-svg { display: block; width: 100%; height: auto; }
.st-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.st-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 10px; font-size: 12px; color: var(--text); }
.st-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.st-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.st-legend-line { width: 16px; height: 2.5px; border-radius: 2px; display: inline-block; }
.st-legend-line-dash { background: var(--text2); background-image: linear-gradient(90deg, var(--text2) 60%, transparent 0);
  background-size: 6px 2.5px; }
.st-legend-pct { color: var(--text2); }
@media (max-width: 720px) {
  .st-grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .st-kachel-gross { min-width: 44%; flex: 1 1 44%; }
  .st-kachel-gross .st-wert { font-size: 21px; }
  .st-toolbar { gap: 10px; }
}

/* ============================================================ Komm-Facelift (07.08.2026,
   zweite Welle) — nur Ergänzungen, s. static/komm.js für die Begründung jeder Regel. */

/* Punkt 2 des Auftrags ("textfeld style sind auch falsch in komm modul"): mehrere Felder
   (u.a. .pe-ev-pick in posteingang.js, das ganze Formular in mail.js) setzen kein
   type="text" — Browser-Default ist zwar "text", die bestehende Hausregel weiter oben
   ("input[type=text], ...") verlangt aber das ATTRIBUT und matcht darum nicht: das Feld
   fällt auf den unstylten Browser-Rahmen zurück (gemessen: 2px inset grau, 0 Radius, 0
   Padding). Ergänzung statt Änderung der bestehenden Regel (dort haben mehrere gearbeitet)
   — :not([type]) trifft ausschliesslich Felder ganz ohne type-Attribut, überschreibt also
   nie eine schon korrekt gesetzte Regel. */
input:not([type]) {
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  background: var(--input-bg); font-size: 13px; outline: none; width: 100%;
}
input:not([type]):focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(52,120,246,.15); }

/* Reiterleiste jetzt in #content (komm.js kmHeadHTML/kmStartObserver) statt #topbar-actions
   — #km-tabs nutzt bewusst dieselbe .seg-Klasse wie KOSTEN_TABS (app.js), hier nur der
   Zähler-Badge auf dem Posteingang-Reiter dazu. */
.km-badge { display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; margin-left: 4px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700; }

/* Posteingang-Volltextansicht (komm.js kmInboxDetail, Punkt 3 des Auftrags). */
.km-mailhead { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text); }
.km-mailhead div { display: flex; gap: 6px; }
.km-mailhead span { color: var(--text2); display: inline-block; width: 52px; flex-shrink: 0; }
.km-assign { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* Posteingang-Zeilen sind jetzt klickbar (volle Mail + Anhang-Vorschau) — Hover-Kante wie
   an anderer Stelle im Haus üblich (var(--accent)), signalisiert das zusätzlich zum Zeiger. */
.pe-row { cursor: pointer; }
.pe-row:hover { border-color: var(--accent); }

/* Gemessen an einer echten Mail in Prod (TICKETINO-Newsletter, lange Tracking-URLs ohne
   Leerzeichen): .kt-body-text (bestehende Klasse, auch im Verlauf-Reiter genutzt) hatte
   kein word-break — der Modal-Body bekam dadurch einen horizontalen Scrollbalken statt
   "sauber gesetzt" (Punkt 3 des Auftrags). Ergänzung statt Änderung der bestehenden Regel:
   overflow-wrap:anywhere bricht nur dort um, wo ein normales Wort sonst nicht bräche
   (lange URLs), normaler Fliesstext bleibt unangetastet. */
.kt-body-text { overflow-wrap: anywhere; }

/* Telefonnotiz (07.08.): Knopf auf dem Dashboard + Modal. Die alte Leiste hatte
   alle Felder nebeneinander, dadurch war der Platzhaltertext abgeschnitten. */
.tn-leiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px; }
.tn-knopf { white-space: nowrap; }
.tn-leiste-hint, .tn-hint { color: var(--text2); font-size: 11.5px; }
.tn-body .fld { margin-top: 12px; }
.tn-body .fld:first-child { margin-top: 0; }
.tn-text { width: 100%; font-family: inherit; font-size: 14px; line-height: 1.5;
  resize: vertical; min-height: 120px; }
.tn-body input[type="text"], .tn-body select { width: 100%; }
.tn-rueckruf { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px;
  padding: 12px; border: 1px solid var(--border, #e6e6e6); border-radius: 10px;
  cursor: pointer; }
.tn-rueckruf input { margin-top: 2px; }
:root[data-theme="dark"] .tn-rueckruf { border-color: #3a3a3c; }

/* --------------------------------------------------------------------------
   Werkzeugleiste der Datei-Vorschau (Phil 07.08.2026: «mach geile icons und
   schöne buttons, kann ja keiner zuschauen»).
   Vorher standen dort fünf gleich grosse Kästen mit zweizeiligem Text
   («Bearbeiten in App», «Als gelesen markieren», «Auf dem Computer öffnen») —
   sie füllten die halbe Kopfzeile und liessen den Dateinamen kaum Platz.
   Jetzt runde Symbolknöpfe wie im Kontaktkopf; der Text steht im Tooltip.
   -------------------------------------------------------------------------- */
.fp-tools {
  display: flex; align-items: center; gap: 6px;
  margin-right: 10px; flex: none;
}
.fp-tool {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; flex: none;
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.fp-tool:hover:not(:disabled) { background: var(--accent); color: #fff; transform: translateY(-1px); }
.fp-tool:active:not(:disabled) { transform: translateY(0); }
.fp-tool:disabled { opacity: .38; cursor: not-allowed; }
/* «Gelesen» bleibt sichtbar an — grün gefüllt statt nur ein Häkchen daneben. */
.fp-tool.on { background: var(--green); border-color: var(--green); color: #fff; }
.fp-tool.on:hover { background: var(--green); }
/* Auf dem Telefon wandert die Leiste unter den Dateinamen, statt ihn zu quetschen. */
@media (max-width: 700px) {
  .fp-tools { margin: 8px 0 0; width: 100%; order: 3; justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   Suche im Telefon-Menü (Phil 07.08.2026: «suchen lupe weg da, pack das ins
   menu, mach schick»). Die Lupe stand allein in einer zweiten Kopfzeile —
   eine halbe Zeile Höhe für einen einzigen Knopf. Im Menü ist das Feld
   dauerhaft offen und gleich benutzbar, ohne Zwischenschritt.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  #search-toggle, .search-toggle-btn { display: none !important; }
  #sidebar-search-slot { padding: 0 12px 10px; }
  #sidebar-search-slot .topbar-search {
    max-width: none; width: 100%; margin: 0; display: block;
  }
  #sidebar-search-slot .topbar-search input {
    width: 100%; height: 40px; font-size: 15px;   /* gut treffbar */
    background: var(--input-bg);
  }
  /* Die Trefferliste hängt sonst am Fenster statt am Feld. */
  #sidebar-search-slot .search-results {
    position: static; width: 100%; max-height: 42vh; margin-top: 6px;
    box-shadow: none; border: 1px solid var(--line);
  }
}

/* --------------------------------------------------------------------------
   Dispo-Kopf zweizeilig (Phil 07.08.2026).
   Zeile 1: Vorstellungsauswahl. Zeile 2: die Kopfdaten — kleiner, einzeilig,
   mit grosszügigen Abständen zwischen den Angaben. Vorher standen beide
   nebeneinander, wodurch die Auswahl gequetscht wurde und die Daten bei
   schmalem Fenster umbrachen.
   -------------------------------------------------------------------------- */
.dispo-head-2z {
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.dispo-head-2z .event-picker { max-width: 460px; }
.dispo-meta {
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 14px;                          /* die «grossen Abstände» */
  font-size: 12.5px; color: var(--text2);
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
}
.dispo-meta::-webkit-scrollbar { display: none; }
.dispo-meta > * { flex: none; }
/* Die Trennpunkte sind eigene Elemente, damit der Abstand links und rechts
   gleich gross ist — mit «·» im Text säße er schief. */
.dispo-meta i { font-style: normal; opacity: .35; }
.dispo-meta .role-chip { font-size: 11px; padding: 1px 7px; }
.dispo-meta .tag-missing { font-size: 11px; padding: 1px 7px; border-radius: 5px; }
@media (max-width: 700px) {
  .dispo-meta { gap: 10px; font-size: 12px; }
}

/* --------------------------------------------------------------------------
   Warn-Chips — app-weiter Standard (Phil 07.08.2026: «all diese warnungen:
   viel schmaler, rechtsbündig, gleiche höhe wie die Datum/Planer-Zeile,
   mach geiler, sieht popelig aus — und app-weit bauen»).

   Vorher: ein Kasten quer über die halbe Seite mit einem Satz darin. Eine
   Warnung ist ein Hinweis, kein Aushang — sie gehört an den Rand der Zeile,
   die sie betrifft. Rot heisst «blockiert etwas», Orange «solltest du wissen».
   Ist der Chip anklickbar, führt er direkt zur Abhilfe.
   -------------------------------------------------------------------------- */
.warn-chips {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;            /* rechtsbündig in der Kopfdaten-Zeile */
  flex: none;
}
.warn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis;
}
.warn-chip span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.warn-chip svg { flex: none; }
/* Rot: etwas fehlt, das gebraucht wird. Anklickbar → führt zur Zuweisung. */
.warn-chip.rot {
  background: var(--red-bg, #ffe9ed); color: var(--red-text, #c22645);
  border-color: var(--red-line, #ffc3cf); cursor: pointer;
}
.warn-chip.rot:hover {
  background: var(--red-text, #c22645); color: #fff;
  border-color: var(--red-text, #c22645);
}
/* Orange: Hinweis ohne Handlungszwang. */
.warn-chip.orange {
  background: var(--warn-bg, #fff4e5); color: var(--warn-text, #8a5300);
  border-color: var(--warn-line, #ffd9a0);
}
/* Quittiert: bleibt sichtbar, tritt aber zurück. */
.warn-chip.quittiert { opacity: .5; font-weight: 500; }

@media (prefers-color-scheme: dark) {
  .warn-chip.rot { background: #3a1520; color: #ff8fa3; border-color: #5c2233; }
  .warn-chip.rot:hover { background: #ff8fa3; color: #2a0e16; }
  .warn-chip.orange { background: #3a2c14; color: #ffc978; border-color: #5c451f; }
}
:root[data-theme="dark"] .warn-chip.rot { background: #3a1520; color: #ff8fa3; border-color: #5c2233; }
:root[data-theme="dark"] .warn-chip.rot:hover { background: #ff8fa3; color: #2a0e16; }
:root[data-theme="dark"] .warn-chip.orange { background: #3a2c14; color: #ffc978; border-color: #5c451f; }

/* Auf schmalen Fenstern rutschen die Chips unter die Kopfdaten statt sie
   zusammenzuquetschen. */
@media (max-width: 900px) {
  .warn-chips { margin-left: 0; flex-wrap: wrap; }
  .dispo-meta { flex-wrap: wrap; }
}

/* ======================================================================
   APP-KOPFZEILE: Auswahl oben, Kenndaten darunter        (07.08.2026)
   Phil: «Das Eventsuchfeld oben auf die gleiche Höhe wie das Suchfeld
   und die Zeile mit dem Datum … direkt darunter. Alles in die Kopfzeile
   der App, nicht da wo's jetzt ist.»
   Vorher lebten beide im Modulinhalt und schoben ihn nach unten.
   ====================================================================== */
.topbar-event {
  order: 0;                 /* links, noch vor dem Platzhalter .grow */
  flex: 1 1 380px; max-width: 480px; min-width: 0;
}
.topbar-event:empty { display: none; }     /* Module ohne Auswahl: kein Loch */
.topbar-event .event-picker { width: 100%; max-width: none; margin: 0; }

.topbar-sub {
  flex-shrink: 0; display: flex; align-items: center; gap: 14px;
  padding: 0 20px; min-height: 34px;
  background: var(--topbar-bg); border-bottom: 1px solid var(--line);
}
.topbar-sub[hidden] { display: none; }
/* Die Kenndaten selbst behalten ihre Gestaltung (s. .dispo-meta oben),
   füllen hier aber die ganze Breite, damit die Warnungen rechts andocken. */
.topbar-sub .dispo-meta { flex: 1 1 auto; min-width: 0; padding-bottom: 0; }

@media (max-width: 900px) {
  /* Schmales Fenster: die Auswahl bekommt eine eigene Zeile, sonst quetscht
     sie sich mit Suchfeld und Symbolen auf 56 Pixel Höhe. */
  .topbar { flex-wrap: wrap; height: auto; padding-top: 8px; padding-bottom: 8px; }
  .topbar-event { order: 9; flex: 1 1 100%; max-width: none; }
  .topbar-sub { padding: 0 12px; }
}

/* ---- Auswahl-Dropdown: Sektionen nach Zeitnähe        (07.08.2026) ----
   Phil: «Sectionüberschriften ganz klein und dunkelgrau … mach endlich
   diesen Dropdown geilomat — und der ist Standard ganze App.»
   Die Überschriften bleiben beim Scrollen oben stehen, damit man in einer
   langen Liste nie den Bezug verliert, in welchem Abschnitt man gerade ist. */
.gc-drop .ta-group-header {
  position: sticky; top: 0; z-index: 2;
  background: var(--panel);
  color: var(--text2); font-size: 9.5px; letter-spacing: .07em;
}
/* Der erste Abschnitt braucht oben keine zusätzliche Luft — er sitzt direkt
   unter dem Eingabefeld. */
.gc-drop .ta-group-header:first-child { padding-top: 8px; }
.gc-drop { max-height: 380px; }
.gc-drop .ta-item { display: flex; align-items: baseline; gap: 8px; }
/* Das Datum rechts, in einer Spalte untereinander — so liest sich die Liste
   wie ein Kalenderauszug statt wie Fliesstext. */
.gc-drop .ta-item .ta-date { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }
/* Hinweis auf gekürzte Abschnitte im Auswahl-Dropdown — kein Eintrag, nur
   Information: nicht anklickbar, zurückhaltend gesetzt. */
.ta-more { padding: 5px 10px 8px; font-size: 11px; color: var(--text2);
  opacity: .8; cursor: default; }