/* ============================================================
   Plank CRM — design prototype
   Aesthetic: dark, dense "observability tool" look.
   Mock data only. Not wired to Radix.
   ============================================================ */

/* ---- Theme tokens ---- */
body.dark {
  --bg:        #0a0b0e;
  --surface:   #141519;
  --surface2:  #0f1013;
  --surface3:  #1b1d23;
  --rail:      #0c0d10;
  --border:    rgba(255,255,255,0.07);
  --border2:   rgba(255,255,255,0.04);
  --text:      #e7e8ea;
  --text2:     #9498a1;
  --text3:     #5b5e66;
  /* Accent = PLANK-Rot (CI). Bewusst etwas ruhiger als das grelle Logo-Rot (#e63027), damit
     große Flächen/Buttons nicht „fressen". Semantik (ok/warn/danger/info) bleibt getrennt. */
  --accent:    #e0392e;
  --accent2:   #f4695d;
  --accent-rgb: 224,57,46;
  --ok:        #22c55e;
  --warn:      #f59e0b;
  --danger:    #ef4444;
  --info:      #3b82f6;
  --shadow:    0 8px 32px rgba(0,0,0,.45);
}
body.light {
  --bg:        #f4f5f7;
  --surface:   #ffffff;
  --surface2:  #f8fafc;
  --surface3:  #f1f3f5;
  --rail:      #ffffff;
  --border:    #e4e7ec;
  --border2:   #eef1f4;
  --text:      #16191d;
  --text2:     #5b6675;
  --text3:     #98a1ad;
  /* Light: dunkleres Rot, damit weiße Button-Schrift + roter Link-Text auf Weiß gut lesen. */
  --accent:    #d02f26;
  --accent2:   #c22c24;
  --accent-rgb: 208,47,38;
  --ok:        #16a34a;
  --warn:      #d97706;
  --danger:    #dc2626;
  --info:      #2563eb;
  --shadow:    0 8px 32px rgba(15,23,42,.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Letzte Instanz gegen seitliches Scrollen: clip (nicht hidden!) kappt Ausreißer, ohne den
   sticky-Topbar zu brechen oder eine Scroll-Achse zu erzwingen. */
html { overflow-x: clip; }
body { max-width: 100%; }
/* Links global ohne Unterstrich (Hover-Unterstreichungen einzelner Komponenten bleiben). */
a { text-decoration: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
/* Global: KEINE Monospace-Schrift mehr — alles in der System-UI-Schrift (Wunsch Martin
   2026-06-07). `.mono` bleibt als Klasse erhalten (vielfach im Markup), erbt aber nur noch
   die Basisschrift; tabular-nums hält Zahlenspalten weiterhin sauber ausgerichtet. */
.mono { font-family: inherit; font-variant-numeric: tabular-nums; }

/* ---- App grid ---- */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100vh;
  transition: grid-template-columns .18s ease;
}
/* .app.rail-Regeln: konsolidiert im Sidebar-Zuklappen-Block (~Z.213 ff.) und Desktop-gescoped —
   der gemerkte 'plank-rail'-Zustand darf mobil am DOM hängen, ohne den Drawer zu zerlegen. */

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
  background: var(--rail);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sb-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  height: 56px;
  border-bottom: 1px solid var(--border2);
}
/* Echte PLANK-Wortmarke (wie am Login) + „CRM"-Suffix; im Rail-Modus stattdessen das
   kompakte rote Quadrat (favicon.svg), weil die Wortmarke dort nicht hinpasst. */
.sb-wordmark { height: 18px; width: auto; flex: none; display: block; }
.sb-crm { font-size: 10px; font-weight: 700; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; margin-top: 5px; } /* leicht nach unten = optisch baseline-bündig zur 18px-Wortmarke */
.sb-mark { display: none; width: 28px; height: 28px; flex: none; border-radius: 8px; box-shadow: 0 2px 10px rgba(var(--accent-rgb),.4); }
.sb-name { font-weight: 700; font-size: 15px; letter-spacing: -.2px; white-space: nowrap; } /* Fallback ohne Logo-Datei */

.sb-scroll { flex: 1; overflow-y: auto; padding: 12px 10px; }
.sb-group { margin-bottom: 14px; }
.sb-group-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); padding: 4px 10px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: 9px;
  color: var(--text2);
  cursor: pointer;
  font-size: 13.5px; font-weight: 500;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface3); color: var(--text); }
.nav-item.active {
  background: rgba(var(--accent-rgb),.13);
  color: var(--accent2);
  border-color: rgba(var(--accent-rgb),.22);
}
.nav-item.active .nav-ico { color: var(--accent2); }
.nav-ico { width: 18px; height: 18px; flex: none; color: var(--text3); }
/* Ungelesen-Zähler am Sidebar-Eintrag (farbiger Badge). */
.nav-badge { margin-left: auto; flex: none; min-width: 19px; height: 18px; padding: 0 6px;
  border-radius: 9px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums; }
.nav-item.active .nav-badge { background: var(--accent2); }
/* @-Erwähnungs-Badge (Teamchat) — echtes Violett wie die „Erwähnung"-Pille, klar abgesetzt vom
   Indigo-Zähler; gilt auch im aktiven Zustand (sonst überschreibt .nav-item.active .nav-badge). */
.nav-badge-mention,
.nav-item.active .nav-badge-mention { background: #8b5cf6; }

.sb-foot { border-top: 1px solid var(--border2); padding: 10px; }
/* user-chip ist ein <button> (öffnet das Profil-Menü) — Browser-Defaults neutralisieren */
.user-chip { width: 100%; border: 0; background: none; font: inherit; color: inherit; text-align: left; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px; border-radius: 10px; cursor: pointer;
  transition: background .12s;
}
.user-chip:hover { background: var(--surface3); }
.uc-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 11px;
}
.uc-meta { min-width: 0; }
.uc-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uc-mail { font-size: 11px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   Top bar
   ============================================================ */
.main { display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: 56px; flex: none;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.icon-btn {
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text2);
  border-radius: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.icon-btn:hover { background: var(--surface3); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; }
/* .icon-btn.is-locked steht weiter unten (bei der Privatsphäre-Regel) — hier stand ein
   zweiter, vollständig überschriebener Block; entfernt, damit es EINE Quelle gibt. */

/* Hero-Karten-Raster (Kanal-Dashboard): füllt die Breite, gleichmäßige Höhe, 3→2→1 Spalten. */
.hero3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 860px) { .hero3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hero3 { grid-template-columns: 1fr; } }

/* Kanal-Kachel (Marketing-Statistik): grafischer Einstieg ins Kanal-Dashboard — farbiges Icon
   links, Hover-Lift, klar von den KPI-Wert-Karten unterscheidbar. */
.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 10px; align-items: stretch; }
.ch-tile { display: flex; gap: 12px; align-items: stretch; min-height: 92px; padding: 12px 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); text-decoration: none; color: var(--text);
  transition: transform .12s, border-color .12s, background .12s, box-shadow .12s; }
.ch-tile:hover { transform: translateY(-2px); border-color: var(--accent2); background: var(--surface2);
  box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.ch-tile .ch-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-tile .ch-foot { margin-top: auto; }        /* Status-Zeile immer unten → einheitliche Höhe */
.ch-av { width: 40px; height: 40px; flex: none; align-self: center; border-radius: 11px; display: flex; align-items: center;
  justify-content: center; font-weight: 700; font-size: 16px; color: #fff; letter-spacing: -.5px; }

/* Hinweis-/Tutorial-Modus: Erklärtexte (Klasse .hint) sind standardmäßig versteckt
   (body.hints-off, serverseitig gesetzt) und nur im Hint-Modus sichtbar. Echte Daten/
   Status tragen die Klasse NICHT und bleiben immer sichtbar. */
body.hints-off .hint { display: none !important; }

/* Topbar zeigt nur den Seitentitel — „Plank CRM ›"-Heimkrümel entfernt (2026-07-07). */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text3); min-width: 0; }
.crumbs .cur { color: var(--text); font-weight: 600; font-size: 14px; }

/* Sidebar-Zuklappen: der Knopf wohnt in der Sidebar (rechts vom Logo), NICHT in der Topbar.
   Der Topbar-Hamburger existiert nur noch mobil (öffnet den Drawer). */
.sb-collapse { margin-left: auto; width: 30px; height: 30px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; border: 0; background: transparent; color: var(--text3);
  border-radius: 8px; cursor: pointer; }
.sb-collapse:hover { background: var(--surface3); color: var(--text); }
.sb-collapse svg { width: 17px; height: 17px; }
/* Rail-Modus NUR Desktop (720.02 statt 721 schließt fraktionale Zoom-Breiten ein): der über
   localStorage gemerkte Zustand darf mobil am DOM hängen — dort existieren die Regeln nicht,
   der Drawer bleibt der normale 240px-Drawer mit Labels/Logout. */
@media (min-width: 720.02px) {
  #railBtn { display: none; }
  .app.rail { grid-template-columns: 60px 1fr; }
  .app.rail .sb-wordmark, .app.rail .sb-crm, .app.rail .sb-name, .app.rail .sb-group-label, .app.rail .nav-label, .app.rail .uc-meta { display: none; }
  .app.rail .sb-mark { display: block; }
  /* eingeklappter Rail-Modus: kleiner Punkt statt Zahl */
  .app.rail .nav-badge { position: absolute; top: 4px; right: 4px; min-width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; }
  /* Zähler („1" an Aufgaben/Teamchat) und das „Bald"-Tag haben im 60px-Rail keinen Platz:
     sie standen neben dem zentrierten Icon und schoben es aus der Achse (Martins Befund
     25.08.2026). Information, kein Alarm — im Rail einfach weg, ausgeklappt wie gehabt. */
  .app.rail .nav-count, .app.rail .nav-item > .tag { display: none; }
  .app.rail .nav-item { justify-content: center; padding: 9px 0; position: relative; }
  .app.rail .sb-group-label { text-align: center; font-size: 0; padding: 4px 0; }
  /* Rail-Brand: Mark bleibt in der 56px-Zeile (Trennlinie fluchtet weiter mit der
     Topbar-Unterkante, via ::after), der Zuklappen-Knopf sitzt darunter. */
  .app.rail .sb-brand { flex-direction: column; gap: 0; height: auto; padding: 0 0 10px;
    border-bottom: 0; position: relative; }
  .app.rail .sb-brand::after { content: ""; position: absolute; top: 55px; left: 0; right: 0;
    height: 1px; background: var(--border2); }
  .app.rail .sb-mark { margin: 14px 0; }   /* 14+28+14 = 56px-Zeile wie ausgeklappt */
  .app.rail .sb-collapse { margin: 11px 0 0; }
}
@media (max-width: 720px) {
  /* Zeile bleibt einzeilig: der Rumpf darf schrumpfen, rechts stehen nur Datum/Kürzel. */
  .inbox-row .inbox-body { flex: 1 1 0; min-width: 0; }
 .sb-collapse { display: none; } }

.search {
  margin-left: 8px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 7px 12px;
  width: 320px; max-width: 34vw;
  color: var(--text3);
}
.search input { background: none; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; font-family: inherit; }
.search svg { width: 15px; height: 15px; flex: none; }
.search kbd {
  font-size: 10px; color: var(--text3); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; background: var(--surface2);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 9px;
  font-size: 13px; font-weight: 600; font-family: inherit;
  cursor: pointer; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
  transition: all .12s;
}
.btn:hover { background: var(--surface3); }
.btn svg { width: 15px; height: 15px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn-sm { padding: 5px 10px; font-size: 12px; }

/* ---- page tabs + range ---- */
.subbar {
  flex: none;
  display: flex; align-items: center; gap: 4px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: var(--text2);
  cursor: pointer; border: 1px solid transparent;
}
.tab svg { width: 14px; height: 14px; }
.tab:hover { color: var(--text); background: var(--surface); }
.tab.active { background: var(--surface3); color: var(--text); border-color: var(--border); }
.range {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  font-size: 13px; color: var(--text2); cursor: pointer;
}
.range svg { width: 14px; height: 14px; }

/* ============================================================
   Content
   ============================================================ */
.content { flex: 1; overflow-y: auto; padding: 22px 24px 60px; }
.view { display: none; }
.view.active { display: block; }
.maxw { max-width: 1480px; margin: 0 auto; }

.page-head { margin-bottom: 20px; }
.page-title { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.page-sub { font-size: 13.5px; color: var(--text2); margin-top: 3px; }
/* Steht derselbe Titel schon in der Topbar (body.dup-title, layout.php), fällt er hier weg —
   die Unterzeile (Zähler/Stand) und die Aktionen bleiben. */
/* Gehärtet (26.08.2026): der Vergleich in layout.php ignoriert Beiwerk im Titel (Zähler-Pille,
   „· Vertrieb"). Damit dieses Beiwerk beim Wegblenden nicht mit verschwindet, klappt hier nur
   der TEXT weg (font-size:0) — Kind-Elemente behalten ihre Größe. Ein Titel ohne Kinder fällt
   ganz weg. (Ohne :has-Unterstützung bleibt er auf Schriftgröße 0 — also ebenfalls unsichtbar.) */
body.dup-title .page-head .page-title { font-size: 0; line-height: 0; letter-spacing: 0; }
body.dup-title .page-head .page-title > * { font-size: 13px; line-height: 1.5; letter-spacing: normal; }
body.dup-title .page-head .page-title:not(:has(> *)) { display: none; }
body.dup-title .page-head .page-title + .page-sub { margin-top: 0; font-size: 14px; }

/* ---- KPI cards ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 15px 16px 14px;
}
.kpi-top { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.kpi-ico { width: 16px; height: 16px; color: var(--text3); }
.kpi-label { font-size: 12.5px; color: var(--text2); font-weight: 500; }
.kpi-dots { margin-left: auto; color: var(--text3); cursor: pointer; font-size: 16px; line-height: 0; }
.kpi-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.kpi-num { font-size: 30px; font-weight: 600; letter-spacing: -1px; line-height: 1; }
.kpi-num .pre { font-size: 17px; color: var(--text2); font-weight: 500; margin-right: 1px; }
.kpi-num .suf { font-size: 15px; color: var(--text2); font-weight: 500; margin-left: 2px; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.spark span { width: 6px; border-radius: 2px; opacity: .9; }
.kpi-foot { margin-top: 13px; font-size: 11.5px; color: var(--text3); display: flex; align-items: center; gap: 6px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.delta svg { width: 11px; height: 11px; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--danger); }

/* gradients for sparklines */
.g-blue   span { background: linear-gradient(180deg, #60a5fa, #3b82f6); }
.g-violet span { background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.g-amber  span { background: linear-gradient(180deg, #fbbf24, #f97316); }
.g-emerald span{ background: linear-gradient(180deg, #34d399, #10b981); }

/* ---- generic card ---- */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols-2-1 { grid-template-columns: 1.55fr 1fr; }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; overflow: hidden;
}
.card-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--border2);
}
.card-head .ch-ico { width: 16px; height: 16px; color: var(--text3); }
.card-title { font-size: 13.5px; font-weight: 650; font-weight: 600; }
.card-head .ch-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.card-body { padding: 16px; }
.muted { color: var(--text2); }
.tiny { font-size: 11px; color: var(--text3); }

/* ---- node / pipeline diagram ---- */
.nodewrap { padding: 22px 16px; }
.node-row { display: flex; justify-content: center; gap: 26px; position: relative; }
.node-row + .node-row { margin-top: 30px; }
.node {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; width: 210px;
}
.node-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.node-h .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.node-name { font-size: 12.5px; font-weight: 600; }
.node-badge { margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.node-badge.ok { background: rgba(34,197,94,.14); color: var(--ok); }
.node-badge.warn { background: rgba(245,158,11,.14); color: var(--warn); }
.node-stat { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text2); padding: 2px 0; }
.node-stat b { color: var(--text); font-weight: 600; }
.node-connector { height: 26px; border-left: 1.5px solid var(--border); margin: 0 auto; width: 0; }

/* ---- config rows (detail panel) ---- */
.cfg-section { padding: 6px 0 2px; }
.cfg-section + .cfg-section { border-top: 1px solid var(--border2); margin-top: 6px; padding-top: 12px; }
.cfg-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text3); text-transform: uppercase; margin-bottom: 9px; }
.cfg-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 13px; }
.cfg-row .k { color: var(--text2); display: flex; align-items: center; gap: 8px; }
.cfg-row .k svg { width: 14px; height: 14px; color: var(--text3); }
.cfg-row .v { font-weight: 600; }
.chip-val { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; background: var(--surface3); border: 1px solid var(--border); color: var(--text); }

/* ---- pills ---- */
.pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.pill.red    { background: rgba(239,68,68,.14);  color: var(--danger); }
.pill.amber  { background: rgba(245,158,11,.14); color: var(--warn); }
.pill.blue   { background: rgba(59,130,246,.14); color: var(--info); }
.pill.green  { background: rgba(34,197,94,.14);  color: var(--ok); }
.pill.violet { background: rgba(139,92,246,.16); color: #a78bfa; }
.pill.teal   { background: rgba(20,184,166,.15); color: #2dd4bf; }
.pill.pink   { background: rgba(236,72,153,.15); color: #f472b6; }
.pill.orange { background: rgba(249,115,22,.15); color: #f97316; }   /* VK-Stufe „Wartet auf Antwort" (v3.79) */
.pill.gray   { background: var(--surface3); color: var(--text2); }
.pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Lange Labels (z. B. Kategorie-Ableitung) dürfen umbrechen statt über den Panel-Rand zu laufen. */
.pill.pill-wrap { white-space: normal; max-width: 100%; align-items: flex-start; text-align: left; }
.pill.pill-wrap .pdot { flex: none; margin-top: 4px; }

.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface3); border: 1px solid var(--border); color: var(--text2); }
/* Tag-Farben aus der zentralen Tag-Verwaltung (/ops/einstellungen) — Palette wie .pill. */
.tag.tg-gray   { background: var(--surface3); color: var(--text2); }
.tag.tg-blue   { background: rgba(59,130,246,.12);  border-color: rgba(59,130,246,.3);  color: var(--info); }
.tag.tg-amber  { background: rgba(245,158,11,.12);  border-color: rgba(245,158,11,.3);  color: var(--warn); }
.tag.tg-green  { background: rgba(34,197,94,.12);   border-color: rgba(34,197,94,.3);   color: var(--ok); }
.tag.tg-red    { background: rgba(239,68,68,.12);   border-color: rgba(239,68,68,.3);   color: var(--danger); }
.tag.tg-violet { background: rgba(139,92,246,.12);  border-color: rgba(139,92,246,.3);  color: #a78bfa; }
.tag.tg-teal   { background: rgba(20,184,166,.12);  border-color: rgba(20,184,166,.3);  color: #2dd4bf; }
.tag.tg-pink   { background: rgba(236,72,153,.12);  border-color: rgba(236,72,153,.3);  color: #f472b6; }

/* ---- tables ---- */
table.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text3);
  padding: 10px 16px; border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}
.tbl tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border2); font-size: 13px; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr { cursor: pointer; transition: background .1s; }
.tbl tbody tr:hover { background: var(--surface2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.cell-strong { font-weight: 600; color: var(--text); }
.cell-sub { font-size: 11.5px; color: var(--text3); }

/* Verkaufschancen-Kanban-Karten: Hover, 2-zeilige Text-Preview, Betreuer-Avatar. */
.lead-card { transition: border-color .12s, background .12s; }
.lead-card:hover { border-color: rgba(var(--accent-rgb),.4); background: var(--surface3); }
.list-prev { margin-top: 3px; font-size: 12px; color: var(--text2); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Anfragen-Liste im Outlook-Stil: Avatar + gestapelt (Absender/Zeit · Betreff · Vorschau).
   Flex-Zeilen statt Tabelle (Tabellenzellen + -webkit-line-clamp kollabieren in Chrome);
   ganze Zeile ist ein <a> → nativ klickbar. */
.inbox-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 16px;
  border-bottom: 1px solid var(--border2); text-decoration: none; color: var(--text);
  cursor: pointer; position: relative; transition: background .1s; }
.inbox-row:last-child { border-bottom: none; }
.inbox-row:hover { background: var(--surface2); }
/* Ungelesen: KEIN Links-Balken (Design-Regel) — fette Zeile + farbige Zeit tragen den Status. */
/* Avatar trägt KEINE Deko-Farbe mehr (Minimalismus 25.08.: Farbe nur für Zustand) —
   die frühere crc32-Palette inkl. --danger ist in inbox-list.php ersatzlos entfallen. */
.inbox-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
  background: var(--surface3); color: var(--text2); border: 1px solid var(--border); }
.inbox-body  { flex: 1 1 auto; min-width: 0; }
.inbox-line1 { display: flex; align-items: baseline; gap: 10px; }
.inbox-from  { font-size: 13px; font-weight: 500; color: var(--text2); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-time  { margin-left: auto; flex: 0 0 auto; font-size: 11.5px; color: var(--text3);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.inbox-subj  { font-size: 12.5px; font-weight: 400; color: var(--text2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox-prev  { font-size: 12px; color: var(--text3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* UNGELESEN: Absender + Betreff fett — das Datum bleibt ein WERT (text3, kein Blau);
   den Zustand trägt allein der neutrale Punkt davor. */
.inbox-row.is-unread .inbox-from { font-weight: 700; color: var(--text); }
.inbox-row.is-unread .inbox-subj { font-weight: 600; color: var(--text); }
.inbox-row.is-unread .inbox-time { color: var(--text3); font-weight: 500; }
.inbox-row.is-unread .inbox-time::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: var(--text2); margin-right: 6px; vertical-align: 1px; }
/* Der Betreff ist seit dem CSP-Umbau ein echter <a> in einer data-row-href-Zeile —
   damit bleibt die Liste per Tastatur erreichbar, obwohl die Zeile Formulare enthält. */
a.inbox-subj { display: block; text-decoration: none; color: inherit; }
a.inbox-subj:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Zeilen-Link in einer Tabellenzelle (die Zeile selbst ist über data-row-href klickbar, der Link
   trägt sie für Tastatur und „in neuem Tab öffnen"). Erbt die Farbe, zeigt beim Überfahren, dass
   er klickbar ist. EIN Baustein statt zweier Varianten — vorher .an-link in brain-anrufe.php und
   ein Inline-Style ohne Hover-Affordanz in brain-produkte.php. */
a.cell-link { display: block; color: inherit; text-decoration: none; }
a.cell-link:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Posteingang-Detail im Outlook-Stil: Lesebereich (E-Mail-Konversation) + schmale
   rechte Spalte (Kontaktdaten/Notiz/Anhänge/Verlauf, gedämpft). */
.inbox2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.inbox2-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.inbox2-rail { display: flex; flex-direction: column; gap: 12px; }
.inbox2-rail .card-title { font-size: 12px; }
.inbox2-rail .card-head { padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 900px) { .inbox2 { grid-template-columns: 1fr; } }
/* Inline gerenderte E-Mail (auto-Höhe via JS); kein innerer Scroll bei normaler Länge. */
.mail-inline { width: 100%; min-height: 220px; border: 0; border-radius: 8px; background: #fff; display: block; }
/* kleine Empfänger-Zeile unter dem Kopf einer gesendeten Antwort */
.msg-sub { font-size: 11px; color: var(--text3); margin-bottom: 5px; }
.msg-avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border-radius: 50%; font-size: 10px; font-weight: 700; color: #fff; flex: none; }
.lead-ini { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface3); border: 1px solid var(--border); font-size: 9px;
  font-weight: 700; color: var(--text2); }

/* Produkt-Thumbnail in den Angebots-Positionen (Bild aus dem Artikel-Grafik-Slot). */
.pos-thumb { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 8px; object-fit: contain; background: var(--surface3); border: 1px solid var(--border); display: inline-block; }
.pos-thumb--empty {
  background: var(--surface3) center / 22px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239498a1' stroke-width='1.7'%3E%3Cpath d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/%3E%3Cpolyline points='3.27 6.96 12 12.01 20.73 6.96'/%3E%3Cline x1='12' y1='22.08' x2='12' y2='12'/%3E%3C/svg%3E");
}

/* Größeres Artikel-Icon (Modellbild) in der Angebots-Positionstabelle. */
.pos-thumb--lg { width: 64px; height: 64px; flex: 0 0 64px; background-size: 30px; }

.who { display: flex; align-items: center; gap: 10px; }
.who .av { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }

.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
/* .seg selbst ist weiter unten definiert (Track + Pille) — der frühere Block hier war
   Eigenschaft für Eigenschaft überschrieben und damit wirkungslos; entfernt. */
.seg button { border: none; background: none; color: var(--text2); font-family: inherit; font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--surface3); color: var(--text); }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.filter-chip svg { width: 13px; height: 13px; }

/* ---- segmented toggle (z.B. Tabelle ⇄ Board): Track + Pille ----
   Innere Pillen sind selbst gerundet und sitzen mit Innenabstand im Track →
   Hover/Aktiv folgen sauber den Rundungen (kein eckiges Überstehen). */
.seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: var(--text2); text-decoration: none; background: transparent; border: 0; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; }
.seg-btn svg { width: 13px; height: 13px; }
.seg-btn:not(.active):hover { background: var(--surface3); color: var(--text); }
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.14); }

/* ---- customer detail ---- */
.detail-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.detail-av { width: 54px; height: 54px; border-radius: 13px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#6366f1,#8b5cf6); }
.detail-meta h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; }
.detail-meta .row { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.detail-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
/* Funnel-Wechsler exakt auf .btn-sm-Höhe — ein Kopf-UI auf Desktop UND Mobil (Martins
   Vorgabe 14.07.: „solche Buttons in den Header", keine Sonder-Pille mehr im head-meta). */
.detail-actions .stage-pick { height: 28px; min-height: 28px; padding: 2px 24px 2px 10px; font-size: 12px; font-weight: 600; }
.detail-cols { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }

/* notes / activity timeline */
.note-add { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border2); }
.note-add textarea { flex: 1; resize: none; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; color: var(--text); padding: 9px 11px; font-family: inherit; font-size: 13px; min-height: 38px; outline: none; }
.note-add textarea:focus { border-color: var(--accent); }
.timeline { padding: 6px 16px 14px; }
.tl-item { display: flex; gap: 12px; padding: 12px 0; position: relative; }
.tl-item::before { content:''; position: absolute; left: 13px; top: 30px; bottom: -12px; width: 1.5px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-ico { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--surface3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text2); z-index: 1; }
.tl-ico svg { width: 14px; height: 14px; }
.tl-body { flex: 1; min-width: 0; }
.tl-top { display: flex; align-items: center; gap: 8px; }
.tl-actor { font-size: 13px; font-weight: 600; }
.tl-time { font-size: 11.5px; color: var(--text3); margin-left: auto; }
.tl-text { font-size: 13px; color: var(--text2); margin-top: 3px; }
.tl-note { background: var(--surface2); border: 1px solid var(--border2); border-radius: 9px; padding: 9px 11px; margin-top: 6px; color: var(--text); }

/* ---- funnel / kanban ---- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; gap: 14px; overflow-x: auto; padding-bottom: 14px; }
.col { background: var(--surface2); border: 1px solid var(--border); border-radius: 13px; display: flex; flex-direction: column; max-height: calc(100vh - 230px); }
.col-h { display: flex; align-items: center; gap: 8px; padding: 13px 14px; border-bottom: 1px solid var(--border2); }
.col-h .cdot { width: 9px; height: 9px; border-radius: 50%; }
.col-h .ct { font-size: 13px; font-weight: 600; }
.col-h .cc { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text2); background: var(--surface3); border-radius: 20px; padding: 2px 8px; }
.col-sum { font-size: 11.5px; color: var(--text3); padding: 8px 14px 4px; }
.col-cards { padding: 8px 10px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 9px; }
.deal { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px; cursor: grab; transition: border-color .12s, transform .06s; }
.deal:hover { border-color: rgba(var(--accent-rgb),.4); }
.deal-cust { font-size: 11.5px; color: var(--text3); margin-bottom: 3px; }
.deal-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.deal-val { font-size: 15px; font-weight: 700; margin: 9px 0 10px; letter-spacing: -.3px; }
.deal-foot { display: flex; align-items: center; gap: 8px; }
.deal-foot .av { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; }
.prob { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text2); }
.prob-bar { height: 4px; border-radius: 3px; background: var(--surface3); margin-top: 9px; overflow: hidden; }
.prob-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent2)); }

/* scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text3); background-clip: padding-box; }

/* mobile */
.scrim { display: none; }
@media (max-width: 980px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .cols, .cols-2-1 { grid-template-columns: 1fr; }
  .detail-cols { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  /* Sidebar wird fixed (Off-Canvas) → ist KEIN Grid-Item mehr. Darum NUR eine Spalte für
     .main; sonst landet .main in der ersten (0px-)Spalte und der Inhalt kollabiert auf 0 Breite
     (= leerer Bildschirm im Hochformat). */
  /* iOS-Safari-robust: KEIN 100vh-Grid mit innerem Scroll (iOS gibt .content dann oft 0 Höhe
     → weißer/leerer Screen). Stattdessen natürlicher Dokumentfluss, der Body scrollt. */
  .app { display: block; height: auto; min-height: 100vh; }
  .main { overflow: visible; }
  .content { overflow: visible; flex: none; }
  .topbar { position: sticky; top: 0; z-index: 20; }
  .app .sidebar { position: fixed; z-index: 200; width: 240px; height: 100%; transform: translateX(-100%); transition: transform .2s; }
  .app.drawer .sidebar { transform: translateX(0); }
  .app.drawer .scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150; }
  .topbar .search { display: none; } /* nur die Topbar-Suche ausblenden — In-Page-Suchfelder bleiben! */
  .kpi-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none !important; }
  /* topbar-right hält jetzt die primäre Aktion (per JS gehoben) — sichtbar auf allen Breiten.
     Der frühere Deko-Tag „Radix · live" ist global entfernt (2026-07-09). */
  .crumbs .cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ============================================================
   Dashboard KPI sizing (revenue redesign) · privacy blur · PIN modal
   ============================================================ */

/* primary (large) revenue cards — 2-up */
.kpi-grid-primary { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.kpi.lg { padding: 20px 22px 18px; }
.kpi.lg .kpi-num { font-size: 44px; }
.kpi.lg .kpi-num .pre { font-size: 22px; }
.kpi.lg .kpi-num .suf { font-size: 20px; }
.kpi.lg .spark { height: 56px; gap: 4px; }
.kpi.lg .spark span { width: 8px; }
.kpi.sm .kpi-num { font-size: 24px; }
.kpi.sm .spark { height: 30px; }
@media (max-width: 980px) { .kpi-grid-primary { grid-template-columns: 1fr; } }

/* Der seitenweite Weichzeichner (body.is-private über alle .sensitive-Elemente + Ziffern-
   Verwürfelung in app.js) ist seit v3.51.6 ausgebaut: das Schloss in der Kopfzeile sperrt nur
   noch die Beträge des Auftragseingangs (Regeln beim Block „Dashboard „Auftragseingang"",
   .dz-card.is-veiled). Die Klasse .sensitive bleibt als Markierung im Markup, wirkt aber nicht mehr. */
.icon-btn.is-locked { color: var(--accent2); border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.13); }

/* PIN unlock modal (first modal in the app) */
.modal {
  display: none; position: fixed; inset: 0; z-index: 300; padding: 20px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
.modal.open { display: flex; }
.modal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  box-shadow: var(--shadow); width: 320px; max-width: 92vw; padding: 20px;
}
.modal-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.modal-card p { font-size: 12.5px; color: var(--text2); margin-bottom: 14px; }
.pin-row { display: flex; gap: 10px; }
.pin-input {
  flex: 1; text-align: center; letter-spacing: 12px; font-size: 22px;
  font-family: inherit; font-variant-numeric: tabular-nums;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); padding: 10px 12px; outline: none;
}
.pin-input:focus { border-color: var(--accent); }
.pin-input.bad { border-color: var(--danger); animation: shake .3s; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }

/* dashboard section labels (Auftragseingang / Umsatz …) */
.sec-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); margin: 0 2px 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sec-title .sec-note { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text3); }

/* edit forms (Stammdaten bearbeiten · neuer Ansprechpartner) */
/* Formular-Raster: bricht am CONTAINER um, nicht am Fenster. Vorher stand hier
   `1fr 1fr` plus ein Umbruch erst unter 980px FENSTERbreite — in einer 400px-Spalte
   (Steckbrief, VK-Seite, Aufgaben-Modal) blieben die Felder deshalb zweispaltig und
   klebten „auf einem Haufen" (Martins Befund 27.08.2026). `auto-fit` mit Mindestbreite
   löst das überall auf einmal: passt eine zweite 230px-Spalte nicht mehr, wird gestapelt. */
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; }
.fld { display: flex; flex-direction: column; gap: 5px; }
.fld.full { grid-column: 1 / -1; }
.fld label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
.fld input, .fld textarea, .fld select, .inp {
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 8px 10px; font-family: inherit; font-size: 13px; outline: none;
}
.fld input:focus, .fld textarea:focus, .fld select:focus, .inp:focus { border-color: var(--accent); }
/* Textfeld: brauchbare Anfangshöhe; die Feinhöhe macht app.js (autosizeTextareas). */
.fld textarea, textarea.inp { min-height: 62px; resize: vertical; line-height: 1.5; }
@media (max-width: 980px) { .edit-grid { grid-template-columns: 1fr; } }

/* ---- Lead detail: mail-client layout (Schritt 2.4) ---- */
.lead-cols { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 980px) { .lead-cols { grid-template-columns: 1fr; } }

.term-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.term { flex: 1 1 120px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; }
.term-k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); }
.term-v { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-top: 2px; }
.term-v.is-due { color: var(--danger); }

.thread { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; }
/* Lesebreite gedeckelt: Seiten laufen einheitlich auf .maxw-Standardbreite — Text-Mails
   sollen dabei nicht zu 1300px-Zeilen werden. */
.msg { max-width: min(88%, 900px); border: 1px solid var(--border); border-radius: 12px; padding: 9px 12px; }
.msg-in { align-self: flex-start; background: var(--surface2); border-top-left-radius: 4px; }
.msg-out { align-self: flex-end; background: rgba(var(--accent-rgb), .10); border-color: rgba(var(--accent-rgb), .30); border-top-right-radius: 4px; }
.msg-note { align-self: stretch; max-width: 100%; background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .28); }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.msg-from { font-size: 12px; font-weight: 600; color: var(--text); }
.msg-time { font-size: 11px; color: var(--text3); margin-left: auto; white-space: nowrap; }
.msg-body { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.sys-line { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text3); padding: 2px 2px; }
.sys-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--text3); flex: none; }
.sys-time { margin-left: auto; white-space: nowrap; }

.composer { border-top: 1px solid var(--border); padding: 14px 16px; background: var(--surface2); border-radius: 0 0 13px 13px; }
.comp-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.comp-row label { width: 64px; flex: none; font-size: 11.5px; color: var(--text2); }
.comp-row .inp { flex: 1; }
.composer textarea { width: 100%; resize: vertical; }

/* Full inbound HTML email, isolated in a sandboxed iframe (Phase A.0) */
.msg-html { width: 100%; height: 460px; border: 1px solid var(--border); border-radius: 8px; background: #fff; resize: vertical; display: block; }

/* Full-width inbound email (table-heavy web-form mails need the whole column) */
.msg-full { max-width: 100% !important; align-self: stretch !important; }
.msg-open { margin-left: 8px; font-size: 11px; color: var(--accent2); text-decoration: none; white-space: nowrap; }
.msg-open:hover { text-decoration: underline; }

/* Mail popup (full inbound email, bounded + internally scrollable) */
.modal-card.lg { width: 92vw; max-width: 1100px; height: 85vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.mail-modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 13px; }
.mail-frame { flex: 1; width: 100%; border: 0; background: #fff; }
/* Zweizeilige Beschriftung: lange Fassung im Web, kurze in der App (html.app-nav dreht es um) */
.lbl-short { display: none; }
.msg-preview { max-height: 120px; overflow: hidden; }
.msg-open-btn { margin-top: 8px; }

/* Generic content modal (Interessent-Formular, Kunde-Info, Logs, gesendete Mail) */
.modal-card.md { width: 600px; max-width: 94vw; max-height: 88vh; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; }
.modal-head .modal-x { margin-left: auto; }
.modal-body { padding: 16px; overflow: auto; }
.modal-body .fld label { display: block; font-size: 11px; color: var(--text2); margin-bottom: 4px; }
.modal-body .inp { width: 100%; }
.modal-body pre { white-space: pre-wrap; word-break: break-word; font: 13px/1.55 -apple-system, 'Segoe UI', sans-serif; margin: 0; }
.modal-body .cfg-row { display: flex; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--border2); }
.modal-body .cfg-row .k { color: var(--text2); min-width: 130px; font-size: 12.5px; }
.modal-body .cfg-row .v { font-size: 12.5px; }
.log-line { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border2); font-size: 12.5px; }
.log-line .log-time { margin-left: auto; color: var(--text3); font-size: 11px; white-space: nowrap; }

/* Full-width project checklist grid (Phase A.1) */
.cl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.cl-grid .cl-wide { grid-column: 1 / -1; }

/* Globaler, dezenter Status-Toast (löst die alten Inline-Flash-Karten ab) */
.toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(10px);
  z-index: 9999; max-width: 440px;
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 10px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px; line-height: 1.4;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
  opacity: 0; pointer-events: none;
  transition: opacity .26s ease, transform .26s ease;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; cursor: default; }
/* Wo eine feste Leiste am unteren Rand klebt (Post-Builder), legt sich der Toast sonst genau
   über die Knöpfe, die man gerade bedient — beim Klicktest hat er den „Sofort"-Schalter
   blockiert. Also darüber setzen. Die Leiste ist rund 62 px hoch. */
body:has(.pub-bar) .toast { bottom: 88px; }
@media (max-width: 720px) { body:has(.pub-bar) .toast { bottom: 28px; } }   /* mobil steht die Leiste im Fluss */
/* Fehler-Variante: bleibt stehen bis zum Wegklicken (kein Auto-Hide) — roter Rand, ✕ sichtbar. */
.toast-err { border-color: rgba(239, 68, 68, .55); cursor: pointer; }
.toast .toast-x { flex: none; border: 0; background: none; color: var(--text3); cursor: pointer; font-size: 12px; padding: 2px 4px; margin-left: 4px; }
.toast .toast-x:hover { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .12s linear; transform: translateX(-50%); } }
@media (max-width: 480px) { .toast { left: 12px; right: 12px; bottom: 14px; max-width: none; transform: translateY(10px); } .toast.show { transform: translateY(0); } }

/* Teamchat-Einblender (assets/chatpop.js): neue Nachricht auf JEDER Seite sichtbar.
   Oben rechts, weil unten schon Toast (9999) und Job-Dock (900) sitzen — z-index 9998
   hält ihn über Modals (300–320), lässt aber den Status-Toast oben auf.
   STAPEL (v3.30): /chat/neu meldet bis zu 3 neue Nachrichten; jede bekommt ihre eigene
   Karte (neueste unten), sonst gingen die älteren verloren, während das Fenster im
   Vordergrund ist (sw.js unterdrückt dann die System-Meldung). */
#chatpop-stack {
  position: fixed; top: 14px; right: 14px; z-index: 9998; width: 380px;
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;                   /* Lücken zwischen den Karten bleiben durchklickbar */
}
.chatpop {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .45), 0 2px 8px rgba(0, 0, 0, .08);
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity .22s ease, transform .26s cubic-bezier(.2, .8, .2, 1);
  cursor: pointer;
}
.chatpop.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.chatpop .cp-av {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.chatpop .cp-txt { min-width: 0; flex: 1; }
.chatpop .cp-from { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chatpop .cp-msg {
  font-size: 12.5px; color: var(--text2); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.chatpop .cp-go { flex: none; font-size: 17px; color: var(--text3); }
@media (prefers-reduced-motion: reduce) { .chatpop { transition: opacity .12s linear; transform: none; } }
/* Mobil/PWA: volle Breite oben, unter der Statusleiste. */
@media (max-width: 760px) {
  #chatpop-stack { left: 10px; right: 10px; width: auto; top: calc(10px + env(safe-area-inset-top)); }
}

/* Hintergrund-Job-Dock (v3.20): Status laufender Radix-Writes unten rechts — Spinner
   solange es läuft, grün wenn fertig (Klick öffnet Ergebnis), rot bei Fehler. Status
   als Pille, bewusst KEIN linker Akzentbalken (CI-Regel). */
.jobdock {
  position: fixed; right: 14px; bottom: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));   /* iOS Home-Indicator (MNAV-lose Seiten) */
  z-index: 900;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
/* Modal offen = ein Fokus: Dock weicht hinter den Scrim, kommt nach dem Schließen wieder. */
body:has(.modal.open) .jobdock { z-index: 290; }
.jobpill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  max-width: min(92vw, 400px);
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.35;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .34);
}
.jobpill .jobtxt { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.jobpill.done { border-color: rgba(34, 197, 94, .55); background: rgba(34, 197, 94, .14); }
.jobpill.fail { border-color: rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .12); }
.jobpill.linked { cursor: pointer; }
.jobpill .jobx {
  flex: none; border: 0; background: none; color: var(--text3); cursor: pointer;
  font-size: 12px; padding: 2px 4px; border-radius: 6px;
}
.jobpill .jobx:hover { color: var(--text); }
/* Touch: Ausblenden-✕ auf volle Tap-Fläche bringen (optisch unverändert). */
@media (pointer: coarse) { .jobpill .jobx { padding: 10px 12px; margin: -8px -10px -8px -6px; } }
.jobspin {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent2);
  animation: jobspin .8s linear infinite;
}
@keyframes jobspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jobspin { animation: none; opacity: .6; } }
/* Mobil: über der MNAV-Kapsel schweben (wie der Toast); auf FAB-Seiten zusätzlich über
   den runden Primär-Knopf heben (72 + 52 + 12 Luft), sonst deckt eine laufende Pille
   genau den „Antworten"-FAB der VK-Seite ab. */
@media (max-width: 720px) {
  body:has(.mnav:not([hidden])) .jobdock { bottom: calc(92px + env(safe-area-inset-bottom)); }
  body:has(.mnav:not([hidden]) .mnav-fab) .jobdock { bottom: calc(136px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   R1 — Mobile-Fundament: Touch-Targets · 480px-Tier · Header-Stack
   (Track B, Phase R1 — wirkt seitenübergreifend)
   ============================================================ */

/* Touch-Geräte: interaktive Elemente auf ≥44px Tap-Fläche bringen.
   Über `pointer: coarse` statt Breakpoint → Desktop-Maus bleibt kompakt. */
@media (pointer: coarse) {
  /* Touch-Skala (abgestimmt 2026-07-06): kompakt statt aufgeblasen — Buttons wachsen
     über ihr Polster, nicht über tote Mindesthöhen. Nur Eingabefelder bleiben 44px. */
  .btn            { min-height: 40px; }
  .btn-sm         { min-height: 34px; }
  /* Kopf-Funnel-Wechsler: bewusst 34px wie .btn-sm daneben (statt 44px-Feld-Standard) —
     er steht in der Button-Zeile des Seitenkopfs, nicht in einem Formular. */
  .detail-actions select.stage-pick { min-height: 34px; height: 34px; }
  .icon-btn       { width: 42px; height: 42px; }
  .sb-collapse    { width: 42px; height: 42px; }   /* iPad/iPhone quer: Desktop-Layout, aber Touch */
  .hchip          { min-height: 38px; padding: 7px 14px; }   /* Chat-Filter-Chips (Touch >720px sichtbar) */
  .hchip:active, .uc-menu .cm-item:active, .set-row .icon-btn:active { background: var(--surface3); }
  .hub-row:active, .user-chip:active { background: var(--surface3); transform: scale(.99); }
  .icon-btn svg   { width: 18px; height: 18px; }
  .nav-item       { min-height: 44px; }
  .user-chip      { min-height: 44px; }
  .filter-chip, .tab { min-height: 34px; }
  .fld input, .fld textarea, .fld select, .inp, select, .search input { min-height: 44px; }
  .pin-input      { min-height: 52px; }
  .seg button, .seg-btn { min-height: 34px; }
  .tbl thead th, .tbl tbody td { padding-top: 10px; padding-bottom: 10px; }

  /* iOS-Safari-Kernfix: Das 100vh-Gerüst mit innerem Scroll lässt iOS den Inhalt auf 0 Höhe
     kollabieren → weißer Screen (bei JEDER Breite, auch im „Desktop-Website"-Modus, denn das
     bleibt ein Touch-Gerät). Auf Touch daher durchgehend natürlicher Dokumentfluss. */
  .app     { display: block; height: auto; min-height: 100vh; }
  .main    { overflow: visible; height: auto; }
  .content { overflow: visible; height: auto; flex: none; }
  .topbar  { position: sticky; top: 0; z-index: 20; }
}

/* Kleinstes Tier (Smartphone-Hochformat) */
@media (max-width: 480px) {
  /* zusätzliche Sichtbarkeits-Utility (ergänzt .hide-sm aus dem 720er-Tier) */
  .hide-xs { display: none !important; }

  /* Inhalt enger ans Display, kein horizontaler Body-Overflow */
  .content { padding: 14px 12px 56px; }
  .maxw    { max-width: 100%; }
  .page-title { font-size: 19px; }

  /* Seiten-/Detail-Header vertikal stapeln, Aktionen umbrechen lassen */
  .detail-head    { flex-direction: column; align-items: stretch; gap: 12px; }
  .detail-actions { flex-wrap: wrap; }

  /* k/v-Zeilen stapeln, damit lange Werte (Adressen/E-Mails) nicht zerquetschen */
  .cfg-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  /* gestapelte k/v: Werte immer linksbündig (überstimmt Inline-text-align der Link-Karten) */
  .cfg-row .v { text-align: left !important; }

  /* Topbar entzerren: weniger Padding. topbar-right hält jetzt die primäre Aktion (per JS
     gehoben) und bleibt sichtbar; der frühere „Radix · live"-Tag ist global entfernt. */
  .topbar { padding: 0 12px; gap: 10px; }
}

/* ============================================================
   R2 — Tabellen mobil: horizontaler Scroll als Sicherheitsnetz
   Gilt für ALLE .tbl (auch nicht einzeln angefasste) → kein Layout-Bruch.
   display:block macht die Tabelle zum Scroll-Container; die Zeilen behalten
   ihr Layout über anonyme Tabellen-Boxen. nowrap erzwingt sauberen H-Scroll.
   ============================================================ */
@media (max-width: 720px) {
  table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Header bleibt einzeilig (kurze Labels), aber INHALTSZELLEN dürfen umbrechen — sonst
     blähen lange Texte (Angebots-/Artikel-Beschreibungen) die Tabelle zu absurdem H-Scroll auf. */
  table.tbl thead th { white-space: nowrap; }
  table.tbl tbody td { white-space: normal; overflow-wrap: anywhere; }
  /* Zahlen-/Währungsspalten bleiben einzeilig (kurz) — sonst bricht „€ 420" zwischen € und Zahl. */
  table.tbl tbody td.num { white-space: nowrap; overflow-wrap: normal; }
  /* dezenter Hinweis-Schatten am rechten Rand, dass weiter scrollbar ist */
  table.tbl { background:
    linear-gradient(90deg, transparent 70%, rgba(0,0,0,.05)) right / 24px 100% no-repeat; }
}

/* ============================================================
   R3 — Grids mobil stapeln
   `.stack-sm` ergänzt INLINE `grid-template-columns` (überschreibt es per !important
   nur am Phone) — so müssen die Inline-Styles in den Views nicht ersetzt werden.
   `.grid-2`/`.grid-3` sind die wiederverwendbaren Klassen für neues Markup.
   ============================================================ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.row-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stack-sm { grid-template-columns: 1fr !important; }
}

/* ============================================================
   R4 — Komplexe Module: Kanban-Spalten + Modals mobil
   ============================================================ */
/* Kanban: Spalten ~Display-breit → eine Spalte sichtbar, seitlich durchwischen */
@media (max-width: 640px) {
  .board { grid-auto-columns: 84vw; }
  .col { max-height: none; }
}
/* Große/mittlere Modals (Mail-Popup, Artikel-Suche, Formulare) am Phone (fast) vollflächig */
@media (max-width: 480px) {
  .modal { padding: 0; }
  .modal-card.lg, .modal-card.md {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border-left: 0; border-right: 0;
  }
  /* Vollbild-md-Modal: Aktionen am unteren Rand nicht in der Home-Indicator-Zone
     (nachgeladener Inhalt wie der Gewonnen-Dialog endet mit modal-actions). */
  .modal-card.md .modal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  /* Default-Modals (ohne .lg/.md, z. B. Umwandeln/Interessent-anlegen): am Phone breiten-
     begrenzt & innen scrollbar statt rechts rausragend. */
  .modal-card { width: 100%; max-width: 100vw; max-height: 92dvh; overflow-y: auto; }
  /* eingebettete HTML-Mail nicht über den Bildschirm hinaus */
  .msg-html { height: 60vh; }
}

/* ── Posteingang-Detail v2 — volle Breite, klare Aktionen, kein Box-in-Box ── */
/* Inline-Mail als ein sauberer, voller Block (Border/Radius per inline-style überschrieben) */
.inbox-detail .mail-inline { width: 100%; background: #fff; display: block; }
.ix-sent { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 18px; }
.ix-sent-head { display: flex; gap: 6px; font-size: 12.5px; color: var(--text2); margin-bottom: 8px; }
.ix-sent-body { font-size: 14px; line-height: 1.55; }
.ix-reply { margin-top: 22px; border-top: 1px solid var(--border); padding-top: 20px; }
.ix-reply-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); margin: 0 0 12px; font-weight: 700; }

/* ── Conversation-Thread (neueste offen, ältere als „>"-Zeilen) ── */
.ix-thread { display: flex; flex-direction: column; gap: 10px; }
.ix-msg .mail-inline { border-radius: 0 0 12px 12px; }
/* Deckel unter langen Mails (app.js setzt die Höhe): der Knopf macht die Mail ganz auf.
   Ohne ihn wuchs eine weitergeleitete Outlook-Mail über mehrere Bildschirme (08.09.2026). */
.mail-more { position: relative; display: block; width: 100%; margin: -1px 0 0;
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 12px 12px;
  background: var(--surface); color: var(--accent2); font-size: 14px; font-weight: 600;
  padding: 13px 12px; min-height: 44px; cursor: pointer; }
.mail-more::before { content: ''; position: absolute; left: 1px; right: 1px; bottom: 100%; height: 42px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; }
.mail-more:active { background: var(--surface2, var(--surface)); }
.ix-msg:has(> .mail-more:not([hidden])) .mail-inline,
details:has(> .mail-more:not([hidden])) .mail-inline { border-radius: 0 !important; }
.ix-msg-head { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 12.5px;
  background: var(--surface2); border: 1px solid var(--border); border-bottom: 0; border-radius: 12px 12px 0 0; }
.ix-msg-head .ix-who { font-weight: 600; color: var(--text); }
/* Richtung („gesendet"/„erhalten") trägt seit 26.08.2026 keine Kapsel mehr (.ix-dir ist raus):
   der gesendete Kopf bekommt den Akzent-Ton (Block „Posteingang" unten), der Absender sagt den Rest. */
.ix-msg-head .ix-when { margin-left: auto; color: var(--text2); }
/* zugeklappte ältere Nachricht */
details.ix-msg-collapsed > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  padding: 9px 14px; font-size: 12.5px; background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; color: var(--text2); }
details.ix-msg-collapsed[open] > summary { border-radius: 12px 12px 0 0; border-bottom: 0; }
details.ix-msg-collapsed > summary::-webkit-details-marker { display: none; }
details.ix-msg-collapsed .ix-who { font-weight: 600; color: var(--text); flex: none; }
details.ix-msg-collapsed .ix-snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
details.ix-msg-collapsed .ix-when { flex: none; color: var(--text2); }
.ix-chev { flex: none; color: var(--text2); transition: transform .15s; }
details.ix-msg-collapsed[open] .ix-chev { transform: rotate(90deg); }

/* ── Teamchat (Phase 2) — Tabs, Bubbles, @-Autocomplete ── */
.ctabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); padding: 6px 8px 0; flex-wrap: wrap; }
.ctab { padding: 8px 13px; font-size: 12.5px; color: var(--text2); border: 1px solid transparent; border-bottom: 0;
  border-radius: 9px 9px 0 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: none; font-family: inherit; }
.ctab svg { width: 14px; height: 14px; }
.ctab.active { color: var(--text); background: var(--surface); border-color: var(--border); font-weight: 600; }
.ctab .dot { width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; display: inline-block; }
.ctab .b { background: #f59e0b; color: #1a1a1a; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 6px; }
.chat { display: flex; flex-direction: column; }
/* Bubbles v2 „Soft" (freigegeben 2026-07-07): Verlaufsfläche abgesetzt (--bg), Bubbles OHNE
   Rahmen mit Hauch-Schatten, „Sprech-Ecke" nur am Cluster-Anfang (.first, setzt chat.js),
   Folge-Nachrichten desselben Absenders rücken eng zusammen, Datums-Pille je Tag. */
.chat-list { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; max-height: 46vh; overflow-y: auto; background: var(--bg); }
/* „Ältere laden" (chat.js): Leiste ÜBER der Verlaufsfläche — die Liste selbst enthält
   ausschließlich Bubbles/Pillen (davon leben .cmsg.first:first-child & Co.). Der Server
   liefert je Abruf nur einen Block; ohne den Knopf endete der Verlauf dort. */
.chat-older { display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px 10px; background: var(--bg); border-bottom: 1px solid var(--border); }
.chat-older[hidden] { display: none; }   /* display:flex schlägt sonst das hidden-Attribut */
.chat-older span[hidden], .chat-older button[hidden] { display: none; }
.cmsg { max-width: 72%; padding: 7px 11px 5px; border-radius: 15px; font-size: 14px; line-height: 1.45; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.cmsg.them { align-self: flex-start; background: var(--surface3); }
body.light .cmsg.them { background: var(--surface); }   /* hell: weiße Bubble auf grauer Fläche */
/* rgba-Zeile = Fallback für Browser ohne color-mix (iOS <16.2) — sonst wären eigene
   Nachrichten transparent/unsichtbar auf der Verlaufsfläche. */
.cmsg.me { align-self: flex-end; background: rgba(var(--accent-rgb), .16); }
.cmsg.me { background: color-mix(in srgb, var(--accent) 16%, var(--surface3)); }
body.light .cmsg.me { background: rgba(var(--accent-rgb), .09); }
body.light .cmsg.me { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); }
.cmsg.first { margin-top: 10px; }
.cmsg.first:first-child, .cday + .cmsg.first { margin-top: 0; }
.cmsg.them.first { border-top-left-radius: 5px; }
.cmsg.me.first { border-top-right-radius: 5px; }
.cmsg .cwho { font-size: 11.5px; font-weight: 700; color: var(--text2); margin-bottom: 1px; }
.cmsg .cbody { white-space: pre-wrap; word-break: break-word; }
.cmsg .cbody .clink { color: var(--accent2); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.cmsg.me .cbody .clink { color: inherit; }

/* ── Antworten im Chat (v3.69) ─────────────────────────────────────────────────────
   Zitat oben in der Blase, Antwort-Griff je Nachricht, Zitat-Leiste über dem Eingabefeld. */
.cmsg { position: relative; }
/* Kein linker Akzentbalken (Hausregel): das Zitat setzt sich über Fläche und den
   farbigen Autorennamen ab — wie in iMessage, nicht wie ein Warn-Toast. */
.cmsg .cquote { display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  background: rgba(127, 127, 127, .16);
  border-radius: 8px; padding: 6px 10px; margin: 0 0 6px; font: inherit; }
.cmsg .cq-who { display: block; font-size: 12px; font-weight: 600; color: var(--accent2); }
.cmsg .cq-txt { display: block; font-size: 13px; color: var(--text2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cmsg .creply { position: absolute; top: 2px; right: 6px; width: 26px; height: 26px;
  border: 0; border-radius: 999px; background: var(--surface); color: var(--text3);
  font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.cmsg:hover .creply, .cmsg .creply:focus-visible { opacity: 1; }
/* Touch kennt kein :hover — auf Zeigegeräten ohne Hover steht der Griff immer da,
   sonst wäre er auf dem iPhone unsichtbar und trotzdem anklickbar. */
@media (hover: none) { .cmsg .creply { opacity: .55; } }
/* Zitat ohne geladene Ursprungsnachricht: kurzes Aufblitzen statt stummem Klick */
.cmsg .cquote.cq-leer { animation: cqLeer .9s ease-out; }
@keyframes cqLeer { 0%, 55% { background: rgba(127, 127, 127, .3); } 100% { background: rgba(127, 127, 127, .16); } }
.cmsg.me .creply { right: auto; left: 6px; }
.cmsg-blink { animation: cmsgBlink 1.2s ease-out; }
@keyframes cmsgBlink { 0%, 60% { background: rgba(var(--accent-rgb), .22); } 100% { background: transparent; } }
.creply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: rgba(127, 127, 127, .14);
  border-radius: 8px; margin: 0 0 8px; }
.creply-bar .crb-txt { flex: 1; min-width: 0; }
.creply-bar .crb-who { display: block; font-size: 12px; font-weight: 600; color: var(--accent2); }
.creply-bar .crb-body { display: block; font-size: 13px; color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creply-bar .crb-x { flex: none; width: 32px; height: 32px; border: 0; background: none;
  color: var(--text3); font-size: 15px; cursor: pointer; border-radius: 999px; }
.cmsg .cat { font-size: 10px; color: var(--text3); margin-top: 1px; text-align: right; }
/* Gelesen-Haken (nur eigene Bubbles): einfacher Haken = gesendet · Doppelhaken grau =
   mind. einer gelesen · Doppelhaken blau = alle gelesen. Antippen öffnet „Gelesen von …". */
.cmsg .ctick { display: inline-block; cursor: pointer; margin-left: 3px; vertical-align: -1px; color: var(--text3); }
.cmsg .ctick svg { height: 10px; width: auto; display: block; }
.cmsg .ctick.part { color: var(--text2); }
.cmsg .ctick.read { color: var(--info); }
.readers-pop { position: fixed; z-index: 9999; min-width: 190px; max-width: 280px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 18px 44px -14px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.08);
  padding: 8px 6px; }
.readers-pop .rp-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text3); padding: 4px 10px 8px; }
.readers-pop .rp-row { display: flex; gap: 12px; align-items: baseline; padding: 5px 10px; font-size: 13px; }
.readers-pop .rp-n { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.readers-pop .rp-t { flex: none; color: var(--text3); font-variant-numeric: tabular-nums; }
.readers-pop .rp-row.un .rp-n, .readers-pop .rp-row.un .rp-t { color: var(--text3); opacity: .7; }
/* Sprecher-Farben (Gruppen): deterministisch pro Person — chat.js hasht die Mail auf c0–c7.
   Default (dunkles Theme) = helle 400er-Töne; helles Theme = kräftige 700er. c6 bewusst
   Richtung Orange statt CI-Rot (Rot gehört den CTAs). */
.cwho.c0 { color: #fbbf24; } .cwho.c1 { color: #22d3ee; } .cwho.c2 { color: #a78bfa; } .cwho.c3 { color: #4ade80; }
.cwho.c4 { color: #f472b6; } .cwho.c5 { color: #818cf8; } .cwho.c6 { color: #fb923c; } .cwho.c7 { color: #facc15; }
body.light .cwho.c0 { color: #b45309; } body.light .cwho.c1 { color: #0e7490; }
body.light .cwho.c2 { color: #7c3aed; } body.light .cwho.c3 { color: #15803d; }
body.light .cwho.c4 { color: #be185d; } body.light .cwho.c5 { color: #4f46e5; }
body.light .cwho.c6 { color: #c2410c; } body.light .cwho.c7 { color: #a16207; }
.cday { align-self: center; margin: 6px 0 4px; }
.cday span { font-size: 10.5px; font-weight: 600; color: var(--text3); background: var(--surface);
  border: 1px solid var(--border2); border-radius: 999px; padding: 3px 10px; }
/* Eigener Hintergrund: ohne ihn ist die Leiste durchsichtig, und das Safe-Area-Polster
   darunter wirkt am iPhone wie 44px Leere unter dem Feld („schwebt in der Luft").
   Gleiches Rezept wie der Composer der PLANK-App. */
.composer-c { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); align-items: center; background: var(--surface); }
.composer-c .at-wrap { position: relative; flex: 1; display: flex; } /* display:flex killt die Inline-Baseline-Lücke (wie im Hub) */
/* 📎 + Feld + Senden auf EINER 40px-Linie (VK-/Projekt-Chat; Hub/Mobile überschreiben später mit 44/48px) */
.composer-c .chat-attach { width: 40px; height: 40px; }
.composer-c .chat-send { height: 40px; min-height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 16px; }
.composer-c textarea { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); padding: 9px 11px; font-family: inherit; font-size: 13.5px; resize: none; min-height: 40px; max-height: 140px; }
.at-menu { position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 200px; max-width: 260px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 5px; box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 20; }
.at-item { padding: 7px 10px; border-radius: 7px; font-size: 13px; cursor: pointer; }
.at-item.sel, .at-item:hover { background: rgba(var(--accent-rgb), .18); }
/* @-Mention im Nachrichtentext (zentral, Token statt Hex) + „Neu"-Trenner */
.mention { background: rgba(var(--accent-rgb), .22); color: var(--accent2); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.chat-newdiv { display: flex; align-items: center; gap: 8px; color: #f59e0b; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin: 2px 0; }
.chat-newdiv::before, .chat-newdiv::after { content: ""; flex: 1; height: 1px; background: rgba(245,158,11,.35); }
/* Web-Push wohnt in den Einstellungen (#pushRow) — der schwebende Chip unten links ist
   entfernt (blockierte die UI; Martin 2026-07-07). */

/* Dashboard „Mein Fokus" — eine priorisierte Aktionsliste (echte Links, tastatur-/screenreader-tauglich) */
.focus-list { display: flex; flex-direction: column; }
.focus-list .frow { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--border2); color: inherit; text-decoration: none; }
.focus-list .frow:first-child { border-top: 0; }
.focus-list .frow:hover { background: var(--surface2); }
.focus-list .frow:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.focus-list .fico { width: 30px; height: 30px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface3); }
.focus-list .fico svg { width: 16px; height: 16px; }
.focus-list .ft { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.focus-list .ftitle { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-list .fsub { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Kompakte Kennzahlen-Kacheln (Dashboard) — dicht statt großer KPI-Boxen */
.statband { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px; display: flex; flex-direction: column; gap: 2px; }
.stat.stat-link { text-decoration: none; color: inherit; }
.stat.stat-link:hover { border-color: var(--accent); }
.stat .stat-l { font-size: 11px; color: var(--text2); }
.stat .stat-v { font-size: 19px; font-weight: 700; line-height: 1.15; }
.stat .stat-d { font-size: 10.5px; color: var(--text2); }

/* (Der frühere .aestrip-Streifen ist mit dem Dashboard-Umbau entfallen — der
   Auftragseingang reitet jetzt auf .mstrip/.mstat, siehe Minimalismus-Welle 1.) */

/* iOS zoomt beim Fokus auf Eingabefelder mit <16px Schrift rein und verschiebt den Viewport.
   16px am Phone unterbindet das Auto-Zoom → stabiler Viewport, echtes App-Feeling.
   !important, weil viele Felder eine kleinere Inline-font-size tragen. */
@media (max-width: 640px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
  select, textarea, .inp { font-size: 16px !important; }
}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE-INHALTS-LAYER (Responsive-Discovery 2026-06-28) — behebt die
   wiederkehrenden Inhalts-Probleme am Phone. Navi/Sidebar bleibt unberührt.
   ════════════════════════════════════════════════════════════════════════ */
/* Grid-Kinder dürfen schrumpfen (default min-width:auto sprengt sonst die Seite, wenn eine
   breite Tabelle/Inhalt im Grid-Item sitzt → seitliches Scrollen). Gilt auf allen Größen. */
.detail-cols > *, .lead-cols > *, .cols > *, .edit-grid > *, .hero3 > * { min-width: 0; }
/* Lange Pfade/Tokens/Code sprengen nie die Karte. */
code, .mono, pre { overflow-wrap: anywhere; }
/* Tabellen-Wrapper scrollt horizontal statt zu croppen (konsistent mit table.tbl). */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

@media (max-width: 640px) {
  /* Karten-Kopf bleibt EINE Zeile: Titel links, Zähler/Meta rechts (margin-left:auto).
     Nur echte Bedien-Elemente (seg) dürfen umbrechen. [Martin 2026-07-06] */
  .card-head { flex-wrap: wrap; row-gap: 6px; }
  .card-head .ch-right { margin-left: auto; width: auto; text-align: right; }
  .card-head .seg { margin-left: 0 !important; }
  /* KPI-Fußzeile (Delta + langer Vorjahres-Text) umbrechen statt überlaufen. */
  .kpi-foot { flex-wrap: wrap; row-gap: 2px; }
  /* Modal-Aktionsleiste & Toolbars sicher umbrechen. */
  .modal-actions { flex-wrap: wrap; }
  .toolbar { flex-wrap: wrap; }
  /* Org-/Funnel-Baum untereinander statt nebeneinander. */
  .node-row { flex-direction: column; align-items: center; gap: 14px; }
  .node-row + .node-row { margin-top: 14px; }
  .node-connector { display: none; }
  .node { width: 100%; max-width: 320px; }
}
@media (max-width: 480px) {
  /* „Neue Verkaufschance"-Popover u. ä. nie breiter als der Schirm. */
  .lead-new > .card { min-width: 0 !important; width: 100%; }
  /* Reply-Composer-Zeilen: Label über das Feld statt fixe 64px daneben. */
  .comp-row { flex-wrap: wrap; }
  .comp-row label { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════
   Teamchat-Modul (/chat) — Hub (DM-Liste + Stränge) + Teilnehmer/Betrachter
   ════════════════════════════════════════════════════════════════════════ */
.chat-hub { display: grid; grid-template-columns: 270px 1fr; gap: 16px; align-items: start; }
.hub-side { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 10px; max-height: calc(100dvh - 150px); }
.hub-scroll { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hub-group-label { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); padding: 6px 8px 2px; }
.hub-row { display: flex; align-items: center; gap: 10px; padding: 8px 9px; border-radius: 10px; text-decoration: none; color: var(--text); }
.hub-row:hover { background: var(--surface2); }
.hub-row.active { background: rgba(var(--accent-rgb), .14); }
.hub-av { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--surface3); color: var(--text2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.hub-av-t { border-radius: 9px; background: rgba(var(--accent-rgb), .16); color: var(--accent2); font-size: 11px; }
.hub-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-rtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hub-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-when { flex: none; font-size: 10.5px; color: var(--text3); }
.hub-prev { font-size: 12px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-badge { flex: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #8b5cf6; color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hub-chat { display: flex; flex-direction: column; height: calc(100dvh - 150px); }
.hub-chat .chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.hub-chat .chat-list { flex: 1; min-height: 0; overflow-y: auto; max-height: none; }

/* Teilnehmer/Betrachter-Box (lead/project) */
.parts { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.parts-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 7px; }
.parts-title { font-size: 12px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; }
.parts-list { display: flex; flex-wrap: wrap; gap: 6px; }
.part-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--surface3); border: 1px solid var(--border); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 12px; }
.part-x { border: 0; background: none; color: var(--text3); cursor: pointer; font-size: 11px; line-height: 1; padding: 2px; border-radius: 50%; }
.part-x:hover { color: var(--danger); }
.parts-add { display: flex; gap: 6px; margin-top: 8px; }
.parts-add[hidden] { display: none !important; }  /* display:flex schlägt sonst das hidden-Attribut */
.parts-add select { flex: 1; min-width: 0; }
/* Avatar-Stack „Teilnehmer & Betrachter" (Martins Variante A, 14.07.): überlappende
   Initialen-Kreise + „+"-Kreis. Standalone (Projekt/Posteingang) = runde Box (Basis .parts);
   im Tab einer Karte (VK-Teamchat) = flacher Karten-Fuß mit Trennlinie. */
.parts-av { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.card [data-panel] .parts-av,
/* v3.76: im Aufgaben-Fenster hängt der Chat an [data-tpanel] (kein .card-Vorfahr) — ohne
   diesen Zweig blieb die Betrachterzeile eine runde, gerahmte Box in einer Box. */
.tm-side [data-tpanel="chat"] .parts-av { background: var(--surface2); border: 0; border-top: 1px solid var(--border2); border-radius: 0; padding: 8px 12px; margin: 0; flex: none; }
.parts-av .avs { display: flex; align-items: center; }
.cav-p { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff; border: 2px solid var(--surface); flex: none; padding: 0; cursor: default; font-family: inherit; }
button.cav-p { cursor: pointer; }
.avs .cav-p + .cav-p { margin-left: -7px; }
.avs .cav-p:hover { z-index: 1; transform: scale(1.08); transition: transform .1s; }
.cav-plus { background: transparent; border: 1.5px dashed var(--text3); color: var(--text2); font-size: 13px; margin-left: -3px; }
.cav-plus:hover { border-color: var(--text2); color: var(--text); }
.parts-av .parts-add { margin: 0 0 0 auto; flex: 1 1 100%; }
@media (min-width: 721px) { .parts-av .parts-add { flex: 0 1 auto; min-width: 260px; } }
@media (pointer: coarse) { .cav-p { width: 30px; height: 30px; font-size: 11px; } }

/* Hub-Kopf: Suche + kräftiges rundes Plus; Plus öffnet den Wähler (DM | Gruppe). */
.hub-top { display: flex; align-items: center; gap: 10px; }
.hub-search { flex: 1; margin: 0; min-width: 0; width: auto; max-width: none; border-radius: 999px;
  height: 46px; padding: 0 16px; }
.hub-search input { min-height: 0; }   /* uebersteuert die coarse-44px-Regel — die Pille traegt die Hoehe */
/* Neutral statt Rot und eine Nummer kleiner — „rot to much" (Martin, 2026-07-07) */
.hub-plus { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer;
  background: var(--surface2); color: var(--text2); display: flex; align-items: center; justify-content: center; }
.hub-plus:hover { background: var(--surface3); color: var(--text); }
.hub-plus svg { width: 19px; height: 19px; transition: transform .15s; }
.hub-plus.open svg { transform: rotate(45deg); }
.hub-plus:active { transform: scale(.94); }
.hub-newpanel { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.hub-newpanel[hidden] { display: none; }   /* display:flex wuerde das hidden-Attribut sonst uebersteuern */
.np-list { display: flex; flex-direction: column; }
.np-person { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 8px; border: 0;
  background: none; border-radius: 12px; cursor: pointer; color: var(--text); font-size: 14px;
  font-family: inherit; text-align: left; }
.np-person:hover, .np-person:active { background: var(--surface2); }
.np-person .hub-av { width: 38px; height: 38px; font-size: 13px; }
.ng-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.ng-members { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.ng-members label { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.ng-form .btn { align-self: flex-start; }

/* „Zurück zur Liste" nur am Handy im Chat sichtbar (Master-Detail). */
.hub-back { display: none; }
/* Messenger-Kopf-Elemente + Icon-Senden: nur mobil (Basis aus) */
.chat-backbtn, .chathead-av { display: none; }
.chat-send .cs-ico { display: none; }
@media (max-width: 720px) {
  .chat-hub { grid-template-columns: 1fr; }
  /* Am Handy NICHT beides gleichzeitig: entweder die Liste ODER der Vollbild-Chat. */
  .chat-hub.is-list .hub-main { display: none; }
  .chat-hub.is-chat .hub-side { display: none; }
  /* EIN Kopf-Balken (Martin 15.07.2026): im Vollbild-Chat entfällt die globale Topbar —
     der Chat-Kopf (Zurück + Avatar + Name + ⋯) sitzt selbst ganz oben. */
  body:has(.chat-hub.is-chat) .topbar { display: none; }
  body.has-topbar-back .topbar #railBtn { order: 9; margin-left: auto; }
  /* Liste entkanten (iOS-Stil): keine Rahmen-Kiste — groß, rund, fingerfreundlich.
     Zeilen bewusst wuchtig (~72px) mit Drück-Feedback — „haptisch zum Drücken". */
  .hub-side { max-height: none; background: none; border: 0; padding: 0; gap: 6px; }
  .hub-scroll { overflow: visible; }
  .hub-group-label { margin-top: 18px; padding: 6px 10px 8px; font-size: 11px; }
  .hub-row { padding: 12px 10px; border-radius: 14px; gap: 12px; position: relative;
             transition: background .1s, transform .08s; }
  .hub-row:active { background: var(--surface2); transform: scale(.98); }
  /* iOS-Trennlinie: ab der TEXTKANTE eingerückt (läuft nicht über den Avatar) — trennt die
     Zeilen klar, ohne Kisten-Optik („unübersichtlich, die Chats zu trennen", 2026-07-07) */
  .hub-row + .hub-row::before { content: ""; position: absolute; top: 0; left: 70px; right: 6px;
    height: 1px; background: var(--border2); }
  .hub-av { width: 48px; height: 48px; font-size: 15px; }
  .hub-av-t { border-radius: 50%; font-size: 14px; }
  .hub-rt { gap: 3px; }
  .hub-name { font-size: 16.5px; }
  .hub-prev { font-size: 14px; }
  .hub-when { font-size: 12px; }
  .hub-badge { min-width: 22px; height: 22px; border-radius: 11px; font-size: 12px; padding: 0 7px; }
  /* Chat-Vollbild (App-Feeling): Seitenkopf + „Alle Chats"-Link weg — der Rückweg ist der
     große Zurück-Knopf im Chat-Kopf. Höhen-Feinjustierung übernimmt das chatFit-JS
     (VisualViewport, Tastatur!) — das calc hier ist der No-JS-/Erst-Render-Fallback. */
  body:has(.chat-hub.is-chat) .page-head { display: none; }
  /* VOLLBILD ohne Rand (2026-07-07): Chat dockt bündig an Topbar und Kanten an — kein
     Content-Padding, keine Karte-in-Karte. Composer trägt die safe-area unten selbst. */
  body:has(.chat-hub.is-chat) .content { padding: 0; }
  /* Kein Seiten-Gummiband im Vollbild-Chat: nur die Nachrichtenliste scrollt; iOS soll die
     Seite beim Tastatur-Öffnen nicht über das Dokumentende hinausschieben (chatFit setzt
     Rest-Pans per scrollTo(0,0) zurück). */
  /* background: Der Home-App-Container ist auf iPhones teils kürzer als der Bildschirm
     (gemessen 24.07.: Seite 894pt, Display 956pt — oben bündig, unten bleiben 62pt übrig).
     Diesen Rest malt iOS mit dem Body-Hintergrund; mit --bg lief die Eingabeleiste unten in
     einen schwarzen Streifen aus. Composer-Farbe = die Leiste zieht optisch bis zur Kante. */
  body:has(.chat-hub.is-chat) { overscroll-behavior-y: none; overflow: hidden; height: 100dvh;
    background: var(--surface); }
  .chat-hub.is-chat { gap: 0; }
  .chat-hub.is-chat .card.hub-chat { border: 0; border-radius: 0; }
  /* Topbar entfällt im Chat → die Karte füllt den vollen Viewport (kein unterer Spalt),
     der Chat-Kopf trägt die Notch-Safe-Area oben selbst. */
  .hub-chat { height: 100dvh; }
  /* Chat-Kopf = oberster Balken (Messenger-Stil): Zurück + Avatar + Name links, ⋯ rechts.
     Die Notch-Safe-Area sitzt im Kopf-Polster, damit nichts unter die Statusleiste rutscht. */
  .chathead { padding: calc(8px + env(safe-area-inset-top)) 10px 10px; gap: 10px; border-bottom: 1px solid var(--border); }
  .chathead .ch-ico { display: none; }
  .chathead .card-title { font-size: 17px; flex: 1; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
  /* Zurück-Pfeil sitzt jetzt IM Kopf (kein eigener Balken mehr) — schlanker Chevron ohne
     Kreis, an der Bildschirmkante (Fitts). Farbe = globale Zurück-Konvention (.topbar-back
     ist neutral), Trefferfläche ≥40px. */
  .chathead .chat-backbtn { display: flex; align-items: center; justify-content: center; flex: none;
    width: 40px; height: 42px; margin: 0 -4px 0 -6px; padding: 0 0 3px; background: none; border: 0;
    color: var(--text2); text-decoration: none; font-size: 30px; line-height: 1; }
  .chathead .chat-backbtn:active { opacity: .5; }
  .chathead-av { display: inline-flex; width: 38px; height: 38px; font-size: 13px; }
  .chathead .chat-menu-wrap { margin-left: 0; }
  /* Nachrichten + Eingabe: groß und sauber ausgerichtet (Cluster-Gap 2px kommt aus der Basis) */
  .chat-list { padding: 14px; }
  .cmsg { max-width: 86%; font-size: 15.5px; padding: 9px 13px 6px; border-radius: 16px; }
  .cmsg .cwho { font-size: 12px; }
  .cmsg .cat { font-size: 11px; }
  /* Polster unten: NUR so viel, dass das Feld nicht auf dem Home-Indikator klebt. Die alte
     Rechnung (10px + volle 34px Safe-Area) ließ 44px Leere unter dem Feld stehen — am iPhone
     sah das aus, als schwebe die Leiste. 12px weniger reicht für den Indikator locker. */
  .composer-c { align-items: center; gap: 10px;
    padding: 10px 12px max(10px, calc(env(safe-area-inset-bottom) - 12px)); }
  /* Tastatur offen (app.js setzt body.kb-open): der Home-Indikator liegt unter der Tastatur —
     sein Safe-Area-Polster bliebe sonst als Totraum zwischen Textfeld und Tastatur stehen. */
  body.kb-open .composer-c, body.kb-open .bc-form { padding-bottom: 10px; }
  .composer-c textarea { font-size: 16px; min-height: 48px; padding: 13px 16px; border-radius: 24px; }
  /* .composer-c-Präfix nötig: die Basis-Zeile (40px, Polster) ist seit v2.25.3 spezifischer */
  .composer-c .chat-send { height: auto; min-height: 48px; min-width: 48px; width: 48px; border-radius: 50%; padding: 0; flex: none; }
  .chat-send .cs-txt { display: none; }
  .chat-send .cs-ico { display: block; width: 21px; height: 21px; margin: 0 auto; }
}

/* ════════════════════════════════════════════════════════════════════════
   Outlook-Add-in Einrichtung (/outlook)
   ════════════════════════════════════════════════════════════════════════ */
.ol-code { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px; padding: 12px 14px; margin: 4px 0 6px; }
.ol-code code { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: .02em; overflow-wrap: anywhere; color: var(--text); }
.ol-steps { counter-reset: ol; list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.ol-steps li { position: relative; padding-left: 38px; font-size: 13.5px; line-height: 1.55; color: var(--text); }
.ol-steps li::before { counter-increment: ol; content: counter(ol); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(var(--accent-rgb), .16); color: var(--accent2); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; }

/* ============================================================
   MNAV — Mobile Bereichs-Navigation für Detailseiten (iOS-26-Stil)
   Opt-in pro Seite: Wrapper [data-mtabs], Sektionen data-mtab="key"
   (mehrere Keys mit Leerzeichen = Gruppe), Kapsel via mnav()-Helper.
   Ohne JS bleibt die Kapsel hidden → Fallback = gestapelte Seite.
   Desktop (>720px): sämtliche Regeln wirkungslos.
   ============================================================ */
.mnav { display: none; }
.head-meta { display: none; }
/* .logs-link hat keine Basisregel mehr: der Link steht auf ALLEN Breiten am Verlaufsende
   (einzige Definition: .lead-pg .logs-link, Minimalismus-Welle 1). */
.conv-panel { padding: 12px 14px; }
/* Verlauf-Trimmung (alle Breiten): ältere Nachrichten hinter dem Aufklapp-Knopf */
.older-wrap { display: contents; }
.older-wrap.older-hidden { display: none; }

@media (max-width: 720px) {
  /* viewport-fit=cover (layout.php): PWA-Statusleiste (Uhr/Akku) und Notch-Ohren nicht
     überlappen — Topbar/Sidebar schlucken die Insets (Browser: 0, nur Home-App rückt). */
  .topbar  { height: calc(56px + env(safe-area-inset-top));   /* Basis-Höhe 56px (app.css:167) + Notch */
             padding-top: env(safe-area-inset-top);
             padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  .app .sidebar { padding-top: env(safe-area-inset-top); }
  .content { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
  /* Vollbreite Tab-Bar, unten angedockt (bündig links/rechts/unten) — Martins Regel
     2026-07-06: "komplett unten bündig … damit man nicht verwirrt wird". */
  .mnav:not([hidden]) { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; }
  .mnav-bar { display: flex; gap: 2px;
    padding: 6px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
    border-top: 1px solid var(--border); box-shadow: 0 -10px 30px rgba(0,0,0,.16); }
  .mnav-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 7px 6px 6px; border: 0; background: none; border-radius: 12px;
    color: var(--text2); font-family: inherit; font-size: 9.5px; font-weight: 600;
    letter-spacing: .02em; cursor: pointer; position: relative; white-space: nowrap; }
  .mnav-item svg { width: 19px; height: 19px; }
  .mnav-item.active { background: var(--surface3); color: var(--text); }
  .mnav-item .mdot { position: absolute; top: 5px; right: calc(50% - 17px);
    width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
  /* Primäraktion: runder Knopf schwebt ÜBER der Bar rechts (klassisches FAB-Muster) */
  .mnav-fab { position: fixed; right: 14px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 41;
    width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(var(--accent-rgb), .4); }
  .mnav-fab svg { width: 21px; height: 21px; }
  .mnav-fab[disabled] { opacity: .45; }
  body.mnav-typing .mnav { display: none; }
  /* Platz über der Kapsel: Inhalt, Toast und Push-Chip nicht verdecken */
  body:has(.mnav:not([hidden])) .content { padding-bottom: 116px; }
  body:has(.mnav:not([hidden])) .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }

  /* Sektions-Umschaltung (JS setzt .mtabs-on am Wrapper + .mtab-on an Sektionen) */
  [data-mtabs].mtabs-on [data-mtab]:not(.mtab-on) { display: none !important; }
  /* Kontakt-Tab: rechte Spalte (Kunde/Projekt) VOR der linken (Angebot) zeigen */
  [data-mtabs].mtabs-on .lead-cols > div:first-child:has([data-mtab~="kontakt"].mtab-on) { order: 2; }
  .mtabs-on .ctabs { display: none; }        /* innere Tab-Leiste ersetzt die Kapsel */

  /* Kompakter Seitenkopf (nur auf mtabs-Seiten) */
  [data-mtabs].mtabs-on .detail-av { display: none; }
  [data-mtabs].mtabs-on .detail-head { gap: 10px; margin-bottom: 12px; }
  [data-mtabs].mtabs-on .detail-meta h1 { font-size: 17px; line-height: 1.3; }
  [data-mtabs].mtabs-on .detail-meta .row { display: none; }
  [data-mtabs].mtabs-on .head-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    margin-top: 7px; color: var(--text3); font-size: 12px; }

  /* Fakten kompakt als Raster — kein Seitwärts-Scrollen */
  [data-mtabs].mtabs-on .term-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  [data-mtabs].mtabs-on .term { min-width: 0; padding: 6px 10px; }
  [data-mtabs].mtabs-on .term-k { font-size: 9.5px; }
  [data-mtabs].mtabs-on .term-v { font-size: 12.5px; margin-top: 1px; }
  [data-mtabs].mtabs-on .term:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* (Das Datum-Ändern der VK sitzt seit der Minimalismus-Welle in .ls-facts, nicht mehr
     in einer .term-Kachel — die beiden .fu-edit-Regeln hier waren tot und sind entfallen.) */

  /* Konversation: Messenger-Logik (Kunde links, wir rechts) + randnah */
  [data-mtabs].mtabs-on .conv-panel { padding: 10px 6px; }
  [data-mtabs].mtabs-on .ix-thread .ix-in  { align-self: flex-start; width: 97%; }
  [data-mtabs].mtabs-on .ix-thread .ix-out { align-self: flex-end;   width: 97%; }
  [data-mtabs].mtabs-on .ix-thread .ix-out .ix-msg-head,
  [data-mtabs].mtabs-on details.ix-msg-collapsed.ix-out > summary { background: rgba(var(--accent-rgb), .12); }
  [data-mtabs].mtabs-on details.ix-msg-collapsed > summary { flex-wrap: wrap; row-gap: 2px; }
  [data-mtabs].mtabs-on details.ix-msg-collapsed .ix-snip { flex: 1 1 100%; order: 9; color: var(--text3); padding-left: 18px; }
  [data-mtabs].mtabs-on details.ix-msg-collapsed .ix-when { margin-left: auto; }
  /* Chat-Tab: mehr Verlauf sichtbar als die globalen 46vh (Kapsel weicht beim Tippen) */
  [data-mtabs].mtabs-on [data-panel="chat"] .chat-list { max-height: 56vh; }
}

/* ============================================================
   TBL-CARDS — Listen-Tabellen werden am Handy zu Karten-Zeilen
   (kein H-Scroll, Text bricht um). Opt-in: <table class="tbl tbl-cards">.
   Zellen-Utilities: .m-first (eigene Zeile ganz oben), .m-full (eigene
   volle Zeile in Fließreihenfolge), .m-last (rechtsbündig ans Ende),
   .m-off (mobil weglassen). Desktop: unverändert.
   ============================================================ */
@media (max-width: 720px) {
  table.tbl.tbl-cards { display: block; background: none; }
  table.tbl.tbl-cards thead { display: none; }
  table.tbl.tbl-cards tbody { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
  table.tbl.tbl-cards tbody tr { display: flex; flex-wrap: wrap; align-items: center;
    row-gap: 7px; column-gap: 10px; background: var(--surface2);
    border: 1px solid var(--border); border-radius: 12px; padding: 13px 14px; }
  table.tbl.tbl-cards tbody tr:hover td { background: none; }
  table.tbl.tbl-cards tbody td { display: block; border: 0; padding: 0; background: none;
    white-space: normal; overflow-wrap: anywhere; text-align: left; }
  table.tbl.tbl-cards td.m-first { order: -1; flex: 1 1 100%; }
  table.tbl.tbl-cards td.m-full  { flex: 1 1 100%; }
  table.tbl.tbl-cards td.m-last  { order: 9; margin-left: auto; text-align: right; white-space: nowrap; }
  table.tbl.tbl-cards td.m-off   { display: none; }
  table.tbl.tbl-cards .m-hide    { display: none; }    /* Inline-Elemente (Pillen etc.) mobil weglassen */
}

/* ── Gruppen-Optionen: ⋯-Menü im Chat-Kopf + einblendbare Unter-Panels ── */
.chat-menu-wrap { position: relative; margin-left: auto; }
.chat-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35); padding: 6px; display: flex; flex-direction: column; }
.chat-menu[hidden] { display: none; }
.cm-item { display: block; width: 100%; text-align: left; padding: 11px 12px; border: 0; background: none;
  color: var(--text); font-size: 14px; font-family: inherit; border-radius: 8px; cursor: pointer; }
.cm-item:hover, .cm-item:active { background: var(--surface2); }
.cm-danger { color: var(--danger); }
.chat-subpanel { padding: 10px 14px; border-bottom: 1px solid var(--border); flex: none; }
.chat-subpanel[hidden] { display: none; }
.chat-subpanel .parts { margin-bottom: 0; }

/* ============================================================
   Drück-Haptik (mobil): tappbare Zeilen/Karten geben spürbares
   Feedback — Teil des App-Gefühls (Rework 2026-07-06).
   ============================================================ */
@media (max-width: 720px) {
  /* Klickbare Zeilen tragen seit der CSP-Härtung data-row-href statt onclick (inline
     Handler sind unter der neuen script-src-Regel nicht mehr erlaubt). */
  .tbl tbody tr[data-row-href], .inbox-row, .lead-card, .tile, .deal[data-row-href] {
    transition: background .1s, transform .08s; }
  .tbl-cards tbody tr[data-row-href]:active, .inbox-row:active, .lead-card:active, .tile:active {
    transform: scale(.985); background: var(--surface3); }
  /* Posteingang: größere, fingerfreundliche Zeilen */
  .inbox-row { padding: 13px 14px; gap: 12px; }
}

/* ============================================================
   Rework-Welle 2026-07-06 (Design-Audit): Haptik, Umbrüche,
   Board-Wischen, Touch-Höhen — alles mobil-gescoped.
   ============================================================ */
/* Klickbare KPI-Karten ehrlich klickbar (Dashboard Marketing) */
a.kpi { color: inherit; text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }
@media (pointer: coarse) {
  select.filter-chip { min-height: 34px; }
  .focus-list .frow:active, .stat.stat-link:active, a.kpi:active, .ch-tile:active {
    background: var(--surface2); transform: scale(.98); }
}
@media (max-width: 720px) {
  /* Karten-Listen: Drück-Feedback (hub-row-Haptik) */
  table.tbl.tbl-cards tbody tr:active { background: var(--surface3); transform: scale(.98); transition: transform .08s; }
  /* Fokus-Titel (Dashboard) brechen voll um statt Ellipsis */
  .focus-list .ftitle { white-space: normal; overflow: visible; text-overflow: clip; }
  .focus-list .frow { align-items: flex-start; }
  /* Posteingang: Betreff bis 2 Zeilen statt abgeschnitten */
  .inbox-row .inbox-subj { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  /* Finanzen: Länderzeilen stapeln (fixe Grid-Spalten liefen 641–720px über) */
  .country-row { grid-template-columns: 1fr !important; gap: 10px; }
  /* Angebots-Builder: Summenfuß als saubere Label/Wert-Zeilen */
  table.tbl-cards.pos-tbl tfoot { display: flex; flex-direction: column; gap: 4px; padding: 0 10px 10px; }
  table.tbl-cards.pos-tbl tfoot tr { display: flex; justify-content: space-between; gap: 10px; background: none; border: 0; padding: 0; }
  table.tbl-cards.pos-tbl tfoot td { border: 0; padding: 2px 0; background: none; }
  table.tbl-cards.pos-tbl tfoot td:empty { display: none; }
}
/* Kanban-Board: mobil eine Spalte pro Screen, durchwischen (statt 280px-Quetsch-Strip) */
@media (max-width: 640px) {
  .kanban { scroll-snap-type: x mandatory; gap: 10px !important; }
  .kanban .kan-col { flex: 0 0 86vw !important; min-width: 86vw !important; scroll-snap-align: center; }
}

/* ============================================================
   Teamchat Desktop: verbundenes Messenger-Panel (WhatsApp-Web-Stil)
   Freigegeben 2026-07-07 (Entwurf chat-desktop-entwurf). Randlos bis an
   Topbar/Sidebar — Scope über :has(.chat-hub): NUR die Chat-Seite verliert
   Content-Padding und Seiten-Scroll. Mobil (≤720px) unverändert.
   Zusätzlich `pointer: fine`: das Panel braucht das 100vh-Innenscroll-Gerüst,
   das der pointer:coarse-Block (iOS-Weißbild-Fix, ~Z.721) bewusst aufhebt —
   iPad/iPhone quer behalten deshalb das alte, dvh-begrenzte Karten-Layout.
   @supports :has(): Browser ohne :has droppen das Panel komplett (Fallback =
   altes Layout), statt nur die Höhen-Anker zu verlieren.
   ============================================================ */
@media (min-width: 720.02px) and (pointer: fine) {
  @supports selector(:has(a)) {
    .content:has(> .maxw > .chat-hub) { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
    .content:has(> .maxw > .chat-hub) > .maxw { flex: 1; min-height: 0; display: flex; flex-direction: column;
      margin: 0; width: 100%; max-width: none; }
    .content:has(> .maxw > .chat-hub) .page-head { display: none; }   /* Titel steckt in der Topbar */
    .chat-hub { grid-template-columns: 320px 1fr; gap: 0; align-items: stretch;
      background: var(--surface); overflow: hidden; flex: 1; min-height: 0; }
    .hub-side { border: 0; border-right: 1px solid var(--border); border-radius: 0;
      max-height: none; background: none; padding: 12px 10px; min-height: 0; }
    .hub-side .hub-scroll { flex: 1; min-height: 0; }   /* Liste scrollt, Suche+Plus bleiben stehen */
    .hub-row { padding: 10px 8px; }
    .hub-av { width: 40px; height: 40px; }
    .hub-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
    .hub-main > .card { border: 0; border-radius: 0; box-shadow: none; flex: 1; min-height: 0; }
    .hub-chat { height: auto; }
    .chathead { padding: 12px 16px; }
    .chathead .ch-ico { display: none; }                /* Avatar ersetzt das Sprechblasen-Icon */
    .chathead-av { display: inline-flex; width: 38px; height: 38px; font-size: 13px; }
    .chathead .card-title { font-size: 15.5px; }
  }
  /* Composer NUR auf der Chat-Seite: Feld und Knopf FEST auf identische 44px-Basis
     (chat.js-Autosize wächst weiter bis 140px). Die Teamchat-Karten in VK/Projekt/
     Posteingang behalten bewusst ihren bisherigen Composer. */
  .chat-hub .composer-c { align-items: center; }
  .chat-hub .composer-c .at-wrap { display: flex; }   /* killt die Inline-Baseline-Lücke — sonst sitzt der Knopf ~3px tiefer als das Feld */
  .chat-hub .composer-c .at-wrap textarea { height: 44px; min-height: 44px; }
  .chat-hub .composer-c .btn { height: 44px; min-height: 44px; box-sizing: border-box;
    display: inline-flex; align-items: center; padding: 0 18px; }
  .chat-hub .composer-c .chat-attach { width: 44px; height: 44px; }   /* 📎 auf 44px-Basis der Reihe */
}
/* Senden ohne hellen 1px-Rahmen — ließ den Knopf optisch größer wirken (alle Breiten/Composer) */
.composer-c .btn-primary { border-color: transparent; }

/* ============================================================
   Teamchat v2 (2026-07-07): Filter-Chips über der EINEN Chat-Liste (Desktop —
   mobil filtert die Tab-Bar unten) + Profil-Menü/Modals unten links.
   ============================================================ */
.hub-chips { display: flex; gap: 6px; padding: 0 2px; flex-wrap: wrap; }
.hchip { border: 1px solid var(--border); background: var(--surface2); color: var(--text2);
  font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.hchip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.hchip:not(.active):hover { background: var(--surface3); color: var(--text); }
@media (max-width: 720px) { .hub-chips { display: none; } }

/* Profilbilder: füllen den runden/eckigen Avatar-Rahmen (Liste, Chat-Kopf, user-chip, Modal) */
.hub-av img, .uc-avatar img, .pav img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.hub-av { overflow: hidden; }

/* Initialen-Avatare: feste Farbe pro Chat (Hash auf av0–av7, setzt die View) — ohne Foto
   waren alle Avatare gleich grau/rot und die Zeilen kaum zu unterscheiden (2026-07-07).
   Heller Text fürs dunkle Theme, kräftige 700er im hellen. */
.hub-av.av0 { background: rgba(245,158,11,.16); color: #fbbf24; }
.hub-av.av1 { background: rgba(6,182,212,.16);  color: #22d3ee; }
.hub-av.av2 { background: rgba(139,92,246,.16); color: #a78bfa; }
.hub-av.av3 { background: rgba(34,197,94,.16);  color: #4ade80; }
.hub-av.av4 { background: rgba(236,72,153,.16); color: #f472b6; }
.hub-av.av5 { background: rgba(99,102,241,.16); color: #818cf8; }
.hub-av.av6 { background: rgba(249,115,22,.16); color: #fb923c; }
.hub-av.av7 { background: rgba(234,179,8,.16);  color: #facc15; }
body.light .hub-av.av0 { color: #b45309; } body.light .hub-av.av1 { color: #0e7490; }
body.light .hub-av.av2 { color: #6d28d9; } body.light .hub-av.av3 { color: #15803d; }
body.light .hub-av.av4 { color: #be185d; } body.light .hub-av.av5 { color: #4338ca; }
body.light .hub-av.av6 { color: #c2410c; } body.light .hub-av.av7 { color: #a16207; }

/* Profil-Menü (user-chip → Profil bearbeiten | Einstellungen | Abmelden) */
.sb-foot { position: relative; }
.uc-menu { position: absolute; left: 10px; right: 10px; bottom: calc(100% + 6px); z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 34px rgba(0,0,0,.35); padding: 6px; display: flex; flex-direction: column; }
.uc-menu[hidden] { display: none; }
.uc-menu .cm-item { text-decoration: none; }
/* Rail-Modus (60px-Sidebar): Menü als fixes Popover NEBEN der Sidebar — absolut wäre es
   40px schmal und von .sidebar{overflow:hidden} beschnitten. */
@media (min-width: 720.02px) {
  .app.rail .uc-menu { position: fixed; left: 68px; right: auto; bottom: 14px; width: 210px; }
}

/* Profil-Modal: Foto + Anzeigename */
#profileModal .modal-card, #settingsModal .modal-card { width: 400px; }
.prow { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.pav { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none;
  box-shadow: 0 0 0 2px var(--border); display: flex; align-items: center; justify-content: center;
  background: var(--surface3); }
.pav-ini { font-weight: 700; font-size: 20px; color: var(--text2); }
.pbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.phint { font-size: 11.5px; color: var(--text3); margin: 10px 0 14px; line-height: 1.5; }

/* Einstellungs-Zeilen (Theme / Privatsphäre / Hinweise / Push). Trennlinie als border-top
   ZWISCHEN Zeilen (:last-of-type griffe nie — .modal-actions ist auch ein div). */
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 2px; }
.set-row[hidden] { display: none; }   /* sonst schlägt display:flex das hidden-Attribut (pushRow!) */
.set-row + .set-row { border-top: 1px solid var(--border2); }
.set-t { font-size: 13.5px; font-weight: 600; }
.set-s { font-size: 11.5px; color: var(--text3); margin-top: 1px; }

/* Überwachung v2 (2026-07-07): Fallliste — die EINE Kennzahl „Tage ohne Notiz" groß rechts,
   Zuständiger deutlich, Lasten-Chips mit Aktiv-Zustand (filtern die Liste). */
.uw-tage { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.uw-tage.red { color: var(--danger); }
.uw-tage.amber { color: var(--warn); }
.uw-tage.green { color: var(--ok); }
.uw-wer { font-size: 13px; font-weight: 600; }
.uw-note { margin-top: 2px; }
.filter-chip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.filter-chip.active .sensitive { color: inherit; }

/* Nachfassen v3 (2026-07-07): EINE Liste — Zuständiger deutlich, ☎-Direktwahl, mobil rahmenlos.
   (.nf-wer ist entfallen — der Zuständige steht jetzt ruhig als .nf-who, siehe Welle 1.) */
.nf-call { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--surface3); border: 1px solid var(--border); color: var(--text); }
.nf-call svg { width: 16px; height: 16px; }
.nf-call:hover { background: var(--surface2); }
.nf-call:active { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(.94); }
@media (max-width: 720px) {
  .maxw > .card.nf-card { background: none; border: 0; }
  .nf-card table.tbl.tbl-cards tbody { padding: 0 0 6px; }
  .nf-call { width: 44px; height: 44px; }
}

/* Nachfassen: leise Kopf-Zeile — Farbpunkte statt Pillen-Kästen. */
.nf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.nf-dot.red { background: var(--danger); }
.nf-dot.amber { background: var(--warn); }

/* ============================================================
   Teamchat-Anhänge (v2.15): 📎 im Composer, Drag&Drop-Highlight,
   Bild-Vorschau + Datei-Chip in der Bubble.
   ============================================================ */
.chat-attach { flex: none; align-self: center; border-radius: 50%; }
.cfile-img { display: block; max-width: 260px; max-height: 240px; border-radius: 10px; margin: 2px 0 3px; }
.cfile { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 3px; padding: 8px 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; max-width: 100%;
  overflow-wrap: anywhere; }
.cfile:hover { background: var(--surface3); }
/* Ziel-Zustand beim Datei-Ziehen: gestrichelter Akzent-Rahmen um die ganze Chat-Fläche */
[data-chat].chat-drop { outline: 2px dashed var(--accent2); outline-offset: -6px; border-radius: 12px; }
[data-chat].chat-uploading .chat-attach { opacity: .45; }
@media (max-width: 720px) {
  .cfile-img { max-width: 210px; }
  .chat-attach { width: 44px; height: 44px; }
}

/* ══ MOBILE-STANDARD v2.16 (Martins Freigabe 2026-07-09) ═══════════════════════
   Kopfzeile mit festem Werkzeug-Platz: Titel links, rechts .ph-actions
   (Filter-Chips, Aktualisieren, genau EIN roter Primär-Knopf pro Screen).
   Die Suche wohnt in einer eigenen Zeile und läuft mobil IMMER voll breit
   (der 34vw-Deckel von .search galt der Topbar-Suche, nicht den Listen). */
.page-head-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.page-head-row .ph-actions { margin-left: auto; display: flex; gap: 8px; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; }
.li-search { width: 100%; max-width: 100%; margin: 0 0 12px; }
@media (max-width: 720px) {
  .content .search { width: 100%; max-width: 100%; }
  /* Mobil: Titel/Untertitel oben, Werkzeug-Zeile darunter rechtsbündig auf EIGENER Zeile
     (nebeneinander drängt ein langer Untertitel den Primär-Knopf aus dem Bild). */
  .page-head-row { flex-direction: column; align-items: stretch; }
  /* Umbrechen, nicht überlaufen (v3.50.8): die Werkzeug-Zeile stand in EINER Zeile und schob
     das letzte Element aus dem Bild — im Brain-Chat war „Produktwissen" am Handy nur noch
     halb da. */
  .page-head-row .ph-actions { margin-left: 0; justify-content: flex-end; flex-wrap: wrap;
    row-gap: 8px; }
  .ph-actions select.filter-chip { max-width: 46vw; }
}

/* Kippschalter (Einstellungen): Zeile ohne Icons — Label links, Schalter rechts.
   Der Schalter IST der Button (IDs bleiben für app.js/push.js), Zustand via aria-checked. */
.switch { position: relative; flex: none; width: 46px; height: 28px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface3); cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px;
  border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s; }
body.light .switch::after { background: #fff; }
.switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch:disabled { opacity: .5; cursor: default; }
.set-row .sr-text { flex: 1; min-width: 0; }
.set-row .sr-text .tiny { color: var(--text3); }

/* ══ TOPBAR-ANKER v2.17 (global, Martins Freigabe 2026-07-09) ══════════════════
   Zurück-Pfeil links + Primär-Aktion rechts werden von app.js in die Topbar gehoben. */
.topbar-back { flex: none; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border: 1px solid var(--border); background: var(--surface);
  color: var(--text2); border-radius: 8px; cursor: pointer; text-decoration: none; transition: all .12s; }
.topbar-back:hover { background: var(--surface3); color: var(--text); }
.topbar-back svg { width: 17px; height: 17px; }
.topbar-right .topbar-cta { flex: none; }
/* Popover-CTA (VK „Neue Verkaufschance", Ops „Neue Anfrage") in der Topbar: das Formular-
   Kärtchen als Dropdown unter dem Knopf aufklappen statt die Topbar-Höhe zu sprengen. */
.topbar-right .lead-new, .topbar-right .mw-new { position: relative; }
.topbar-right .lead-new > .card, .topbar-right .mw-new > .card { position: absolute; top: calc(100% + 8px); right: 0;
  margin-top: 0 !important; z-index: 60; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
/* Mobile-Filter-Gerüst ist nur ≤720px aktiv (JS baut es nur dort). Basis-Regel hält den
   „Filter"-Knopf auf Desktop verborgen — falls ein Fenster über die 720px-Grenze GEWEITET
   wird (JS läuft einmalig), bleibt kein ungestylter Knopf stehen. */
.li-filterbtn { display: none; }
@media (max-width: 720px) {
  /* Mobil: Zurück-Pfeil rund und größer (Touch), spiegelt den Hamburger. */
  .topbar-back { width: 42px; height: 42px; border-radius: 50%; }
  /* Filter-Leiste: Suche wächst, „Filter"-Knopf rechts daneben; Panel klappt darunter auf. */
  .li-filterbar { display: flex; gap: 8px; align-items: stretch; margin-bottom: 12px; }
  .li-filterbar .search { flex: 1; margin: 0; max-width: 100%; }
  .li-filterbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px;
    min-height: 44px; border: 1px solid var(--border); background: var(--surface); color: var(--text2);
    border-radius: 9px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
  .li-filterbtn.is-open { border-color: var(--accent2); color: var(--accent2); }
  .li-filterbtn .fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); }
  .li-filterpanel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
  .li-filterpanel.is-collapsed { display: none; }
}

/* ══ ZUGÄNGLICHKEIT v2.18 (Web Interface Guidelines) ══════════════════════════
   1) Sichtbarer Tastatur-Fokus auf allen interaktiven Elementen. Nur :focus-visible →
   Maus-/Touch-Klick zeigt KEINEN Ring, echte Tastatur-Navigation schon. */
a:focus-visible, button:focus-visible, summary:focus-visible,
[role="button"]:focus-visible, [role="switch"]:focus-visible, [role="tab"]:focus-visible,
.btn:focus-visible, .btn-sm:focus-visible, .filter-chip:focus-visible, .seg-btn:focus-visible,
.icon-btn:focus-visible, .topbar-back:focus-visible, .topbar-cta:focus-visible,
.mnav-item:focus-visible, .mnav-fab:focus-visible, .li-filterbtn:focus-visible,
.switch:focus-visible, .tab:focus-visible, .hchip:focus-visible {
  outline: 2px solid var(--accent2); outline-offset: 2px;
}
/* Klickbare Tabellenzeilen (data-row-href) für Tastatur erreichbar machen, wenn sie tabindex tragen. */
tr[data-row-href]:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }

/* 2) Bewegung reduzieren, wenn das System es verlangt (global, nicht nur Toast). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* type="search"-Felder ohne native WebKit-Dekoration (Clear-„×") — optisch identisch zu
   type=text, aber mit Such-Tastatur (mobil) und korrekter Semantik. */
input[type="search"] { -webkit-appearance: none; appearance: none; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }

/* ============ COMPOSER-POPUP v3.21 „Mail-Fenster" (E-Mail verfassen + Pflicht-Vorschau) ============
   Martins Entwurf-Freigabe 23.07.: deutlich größer (min(960px,94vw) × 86vh), An/Betreff als
   LINIEN statt Eingabe-Kästen (Cc versteckt hinter „Cc"-Link), Schreibfläche füllt das Fenster,
   Anhänge als Leiste unten, Kopf/Fuß stehen fest — nur die Mitte scrollt/schrumpft.
   IDs + Zwei-Schritt-Flow (Pflicht-Vorschau) UNVERÄNDERT — reines Layout. */
.modal-card.compose{width:min(960px,94vw);display:flex;flex-direction:column;height:86vh;max-height:86dvh;padding:0;overflow:hidden}
.compose .modal-head{flex:none;display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--border);margin:0}
.compose .modal-head h3{margin:0;font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modal-card.compose .modal-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0;overflow:hidden}
/* Notfall-Scroll (Review-Auflage): reicht die Höhe nicht (iPhone quer, Tastatur offen),
   scrollt der Schritt als Ganzes — die Fußleiste bleibt so IMMER erreichbar. */
#compStep1,#compStep2{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto}
/* Adress-/Betreffzeilen: Linien statt Kästen */
.compose .comp-row{flex:none;display:flex;align-items:baseline;gap:12px;margin:0 18px;padding:10px 2px;border-bottom:1px solid var(--border2)}
.compose .comp-row label{width:52px;flex:none;color:var(--text3);font-size:12px}
.compose .comp-row .inp{flex:1;min-width:0;border:0;background:none;border-radius:0;padding:2px 0;font-size:13.5px}
.compose .comp-row .inp:focus{outline:none;box-shadow:none}
.compose .comp-row:focus-within{border-bottom-color:var(--text3)}
.compose .comp-row:has(#compSubject) .inp{font-size:15px;font-weight:650}
.compose .cc-link{flex:none;font-size:12px;color:var(--text3);cursor:pointer;background:none;border:0;padding:2px 6px;border-radius:6px}
.compose .cc-link:hover{color:var(--text);background:var(--surface3)}
/* Vorlagen-Chip: dezent rechts über der Schreibfläche (nur Schritt 1) */
.compose .body-head{flex:none;display:flex;justify-content:flex-end;margin:0;padding:8px 18px 0}
.compose .body-head select{font-size:12px;font-weight:600;color:var(--text2);max-width:260px;min-height:0;
  border:1px solid var(--border);border-radius:999px;padding:5px 12px;background:var(--surface2);cursor:pointer}
.compose .body-head select:hover{color:var(--text)}
/* Schreibfläche = Star: füllt die Resthöhe, kein Rahmen, kein Nachwachs-Gezerre */
.compose textarea.inp{flex:1;min-height:120px;width:100%;box-sizing:border-box;resize:none;border:0;background:none;border-radius:0;
  padding:14px 20px 8px;font-size:14px;line-height:1.62}
.compose textarea.inp:focus{outline:none;box-shadow:none}
.compose .sig-hint{flex:none;display:flex;align-items:center;gap:8px;padding:4px 20px 10px;color:var(--text3);font-size:12px}
.compose .sh-toggle{background:none;border:0;color:var(--text2);text-decoration:underline;cursor:pointer;font-size:12px;padding:2px}
.compose .sig-block{flex:none;margin:0 20px 10px;border-top:1px solid var(--border2);padding:10px 0 0;color:var(--text2);font-size:12.5px;line-height:1.55;max-height:180px;overflow-y:auto}
.compose .sig-block img{display:block;margin-top:10px}
/* Anhang-Leiste unten (wie im Mail-Programm) */
.compose .att-zone{flex:none;margin:0;border-top:1px solid var(--border);background:var(--surface2);padding:10px 18px}
.compose .att-zone.flat{border-top:0;padding-top:8px}
.compose .az-head{font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--text3);margin-bottom:7px}
.compose .az-head small{font-size:inherit;text-transform:none;letter-spacing:0}
/* Vorschau-Anhänge deckeln — viele Chips dürfen den Senden-Fuß nicht wegdrücken */
.compose #pvAttZone .att-chips{max-height:96px;overflow-y:auto}
.compose .att-chips{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.compose #offerGhosts{display:flex;flex-wrap:wrap;gap:7px;margin-top:7px}
.compose #offerGhosts[hidden]{display:none!important}
.att-chip{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:300px;padding:7px 10px;
  border:1px solid var(--border);border-radius:8px;background:var(--surface3);font-size:12.5px;overflow:hidden}
.att-chip .an{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.att-chip em{font-style:normal;color:var(--text2);font-size:11.5px;flex:none}
.att-chip .att-x{flex:none;border:0;background:none;color:var(--text2);cursor:pointer;font-size:14px;line-height:1;padding:2px}
.att-chip .att-x:hover{color:var(--danger)}
.att-chip .att-bar{position:absolute;left:0;bottom:0;height:2px;background:var(--text2);opacity:.75;transition:width .2s}
.att-chip.is-err{border-color:var(--danger)}
.att-chip.is-err em{color:var(--danger)}
.compose .att-add{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.att-ghost{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px dashed var(--border);border-radius:8px;
  background:transparent;font-size:12.5px;color:var(--text2);cursor:pointer;text-align:left}
.att-ghost{max-width:100%}
.att-ghost b{font-weight:600;color:var(--text);overflow-wrap:anywhere}
.att-ghost .plus{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--border);display:inline-flex;
  align-items:center;justify-content:center;font-size:12px;line-height:1}
.compose .prev-row{flex:none;display:flex;gap:12px;margin:0 18px;padding:9px 2px;border-bottom:1px solid var(--border2);font-size:13.5px}
.compose .prev-row .pl{width:52px;flex:none;color:var(--text3);font-size:12px}
.compose .prev-row b{min-width:0;overflow-wrap:anywhere}
.compose .prev-body{flex:1;min-height:0;margin:0;border:0;border-radius:0;background:none;
  padding:14px 20px;white-space:pre-wrap;font-size:14px;line-height:1.62;max-height:none;overflow-y:auto}
.compose .prev-body .sig{display:block;margin-top:16px;padding-top:12px;border-top:1px solid var(--border2);color:var(--text2);font-size:12.5px;line-height:1.55;white-space:normal}
.compose .prev-body .sig img{display:block;margin-top:10px}
.compose #composeSendForm{flex:none;display:flex;flex-direction:column}
/* Fußleiste: steht fest, Kopf/Fuß rahmen die Mail */
.compose .modal-actions{flex:none;margin:0;padding:12px 18px;border-top:1px solid var(--border);justify-content:flex-end}
.compose .modal-actions .btn-primary{padding:10px 18px}
/* Mobil: NUR das Composer-Popup als Vollbild (globale Modal-Regeln unberührt); Kopf und
   Senden-Leiste stehen fest, die 100dvh schrumpfen mit der iOS-Tastatur — die Schreibfläche
   bleibt dadurch immer im Bild. */
@media (max-width:720px){
  .modal:has(.modal-card.compose){padding:0;align-items:stretch}
  /* Relative Masse: ohne :has() bleibt die Karte im Modal-Padding statt rauszuragen. */
  .modal-card.compose{width:100%;max-width:100vw;height:100%;max-height:100dvh;border-radius:0;border-left:0;border-right:0}
  .compose .modal-head{padding-top:calc(13px + env(safe-area-inset-top))}
  .compose .modal-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .compose .comp-row,.compose .prev-row{margin:0 max(14px, env(safe-area-inset-left))}
  /* Seitliche safe-area auch für Kopf/Schreibfläche/Leisten (Notch-Querformat). */
  .compose .modal-head, .compose .att-zone, .compose .modal-actions{
    padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right))}
  .compose textarea.inp, .compose .prev-body{
    padding-left:max(20px, env(safe-area-inset-left));padding-right:max(20px, env(safe-area-inset-right))}
  .compose textarea.inp{min-height:110px}
  .compose .body-head select{max-width:52vw}
  /* iOS-Zoom-Guard: der globale 16px-Block endet bei 640px, das Composer-Vollbild bei 720px —
     die Lücke (iPhone quer) zoomt sonst beim Fokus der 13.5px-Zeilen-Inputs. */
  .compose .comp-row .inp, .compose textarea.inp{font-size:16px}
}
/* Touch-Ziele der kleinen Bedienelemente (Headless/Desktop bleibt kompakt) */
@media (pointer: coarse){
  .compose .cc-link, .compose .sh-toggle{min-height:34px;padding:6px 8px}
  .att-chip .att-x{min-width:34px;min-height:34px}
  /* Vorlagen-Chip bewusst kompakter als 44px — Ausnahme wie die Stufen-Pille */
  .compose .body-head select{min-height:38px}
}
/* hidden-Attribut muss auch gegen display:flex-Klassen gewinnen (CC-Zeile, Schritt-Wechsel) */
.compose [hidden]{display:none!important}

/* ── NACHFASS-ASSISTENT (Kadenz v2.24) ──────────────────────────────────────────
   Karte in voller Breite über den lead-cols. Stepper-Punkte klein (Rot nur als
   Aktiv-Punkt), Ausgänge als DREI farbige Flächen-Buttons (Martins Vorgabe),
   Erklärtexte laufen über class="hint" (globale Einstellung „Hinweise"). */
.kad-steps{display:flex;align-items:center;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.kad-step{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--text3)}
.kad-step .kdot{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface3);color:var(--text3);font-size:11px;border:1px solid var(--border);flex:none}
.kad-step.done{color:var(--ok)}.kad-step.done .kdot{background:rgba(34,197,94,.14);color:var(--ok);border-color:transparent}
.kad-step.act{color:var(--text)}.kad-step.act .kdot{background:var(--accent);color:#fff;border-color:transparent}
.kad-sep{flex:0 0 14px;height:1px;background:var(--border)}

/* ── Auftrags-Status-Timeline (orders-detail) — Icon-Boxen mit Datum.
      Farben wie .kad-step: done=grün-Tint, act=Akzent (einziger Rot-Einsatz), warn=amber. ── */
.otl{display:flex;align-items:flex-start;gap:2px;padding:14px 14px 10px}
.otl-step{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 1 108px;min-width:76px;text-align:center}
.otl-ico{width:34px;height:34px;border-radius:10px;background:var(--surface3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--text3)}
.otl-ico svg{width:16px;height:16px}
.otl-lab{font-size:11px;font-weight:700;color:var(--text3);line-height:1.2}
.otl-sub{font-size:10.5px;color:var(--text3);line-height:1.25;font-variant-numeric:tabular-nums}
.otl-sep{flex:1 1 10px;height:2px;border-radius:1px;background:var(--border);margin-top:16px;min-width:6px}
.otl-sep.done{background:var(--ok);opacity:.5}
.otl-step.done .otl-ico{background:rgba(34,197,94,.14);border-color:transparent;color:var(--ok)}
.otl-step.done .otl-lab{color:var(--ok)}
.otl-step.done .otl-sub{color:var(--text2);font-weight:600}
.otl-step.act .otl-ico{background:var(--accent);border-color:transparent;color:#fff}
.otl-step.act .otl-lab{color:var(--text)}
.otl-step.warn .otl-ico{background:rgba(245,158,11,.14);border-color:transparent;color:var(--warn)}
.otl-step.warn .otl-lab{color:var(--warn)}
.otl-foot{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px}
.otl-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--text2);background:var(--surface3);border:1px solid var(--border2);border-radius:7px;padding:3px 8px}
.otl-chip b{color:var(--text);font-weight:650}
.otl-delivered{color:var(--ok);font-weight:650}
@media (max-width:720px){
  .otl{display:grid;grid-template-columns:repeat(3,1fr);row-gap:14px}
  .otl-sep{display:none}
  .otl-step{flex:none;min-width:0}
}

/* ── Dokumenten-Explorer (orders-detail): Stufen-Akkordeon, gestaffelt nach Timeline ── */
.odoc-fold{border-top:1px solid var(--border2)}
.odoc-sum{display:flex;align-items:center;gap:9px;padding:10px 16px;background:var(--surface2);cursor:pointer;list-style:none;font-size:12.5px;font-weight:650}
.odoc-sum::-webkit-details-marker{display:none}
.odoc-sum .cnt{margin-left:auto;font-size:11px;color:var(--text3);font-weight:600;white-space:nowrap}
.odoc-sum .st{font-size:10.5px;font-weight:600}
.odoc-empty{opacity:.55}
.odoc-file{display:flex;align-items:center;gap:10px;padding:8px 16px 8px 24px;border-top:1px solid var(--border2)}
.odoc-ico{width:26px;height:26px;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;background:var(--surface3);color:var(--text2)}
.odoc-ico.pdf{background:rgba(var(--accent-rgb),.12);color:var(--accent2)}
.odoc-ico.msg{background:rgba(59,130,246,.13);color:var(--info)}
.odoc-ico.img{background:rgba(34,197,94,.14);color:var(--ok)}
.odoc-meta{flex:1;min-width:0}
.odoc-meta .fn{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.odoc-meta .fs{font-size:10.5px;color:var(--text3);font-variant-numeric:tabular-nums}
.otl-step[data-dok]{cursor:pointer}
@media (max-width:720px){
  .odoc-file{flex-wrap:wrap}
  .odoc-file .btn{margin-left:36px}
}
.kad-grid{display:grid;grid-template-columns:290px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.kad-grid{grid-template-columns:1fr}}
.kad-dial{padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface2)}
.kad-dial .knum{font-size:18px;font-weight:700;margin:2px 0 12px}
.kad-out{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}
.kad-out.two{grid-template-columns:repeat(2,1fr)}
@media(max-width:720px){.kad-out,.kad-out.two{grid-template-columns:1fr}}
.kad-btn{border:1px solid transparent;border-radius:10px;padding:11px 12px;font-weight:700;font-size:13px;cursor:pointer;text-align:center;font-family:inherit}
.kad-btn.ok{background:rgba(34,197,94,.14);color:var(--ok)}
.kad-btn.warn{background:rgba(245,158,11,.16);color:var(--warn)}
.kad-btn.bad{background:rgba(239,68,68,.12);color:var(--danger)}
.kad-btn:hover{filter:brightness(1.06)}
/* .kad-focus trägt KEINEN roten Rahmen mehr: der Verzug steht einmal am Datum
   (Regel „eine Zahl, ein Ort"); die Klasse bleibt als Sprungmarke/Haken im Markup.
   Das frühere „?" (#kadHelp) ist ersatzlos entfallen — Erklärtexte laufen hub-weit
   über class="hint" und die globale Einstellung „Hinweise". */
@media(pointer:coarse){.kad-btn{min-height:44px}}

/* ── OPS-WELT: Welten-Wechsler (Workspace-Muster) ────────────────────────────────
   Wird NUR mit users.ops_access gerendert — ohne Flag bleibt die Brand-Zeile wie
   bisher (statisches „CRM"). Titel in .sb-crm-Optik + ⇅; Klickziel = ganze Zeile. */
.sb-brand.world-on{position:relative;cursor:pointer}
.world-btn{display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:0;cursor:pointer;color:var(--text3);font-family:inherit}
.world-btn .sb-crm{margin-top:0}
.world-btn svg{width:12px;height:12px;margin-top:4px;opacity:.85}
.world-menu{position:absolute;left:8px;right:8px;top:calc(100% + 2px);z-index:220;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.35);padding:6px;display:flex;flex-direction:column;cursor:default}
.world-menu[hidden]{display:none}
.wm-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none}
.wm-item:hover{background:var(--surface2)}
.wm-item svg{width:16px;height:16px;color:var(--text3);flex:none}
.wm-item .wm-check{margin-left:auto;color:var(--accent2);width:14px;height:14px}

/* ── OPS-WELT: Sidebar — Bereichs-Untermenü + gedämpfte Zähler ───────────────────
   .nav-count = bewusst KEIN rotes Badge (Zähler sind Information, kein Alarm). */
.nav-sub{display:flex;flex-direction:column;gap:1px;margin:1px 0 3px}
/* Spaces liegen auf der Top-Level-Kante (Martins Vorgabe: „ganz nach links, ohne Verschiebung") */
.nav-sub .nav-item{padding:6px 10px;font-size:12.5px}
.nav-count{margin-left:auto;flex:none;font-size:10.5px;font-weight:600;color:var(--text3);font-variant-numeric:tabular-nums}
.area-dot{width:21px;height:21px;border-radius:6px;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.area-dot svg{width:12px;height:12px;color:#fff;stroke:currentColor;stroke-width:2.2;fill:none}
/* ════════════════════════════════════════════════════════════════════════════════
   OPS-WELT — CSS-Delta aus docs/mockups/ops-entwurf.html (Stand 14.07.2026)
   Zum ANHÄNGEN ans Ende von public/assets/app.css.
   Regeln: nur NEUE Selektoren (Duplikat-Check gegen app.css gefahren, s. Kommentar
   am Datei-Ende); Farben über Tokens; keine linken Akzentbalken; !important nur wo
   begründet (hidden-Guards, Leaflet-Override). Welten-Wechsler/.nav-sub/.nav-count/
   .area-dot sind BEREITS in app.css (Datei-Ende) und hier bewusst NICHT enthalten.
   ════════════════════════════════════════════════════════════════════════════════ */

/* ── OPS-WELT: Aufgaben-Zeilen & -Tabelle (.tlist/.trow + .ttable) ───────────────
   Kompakte Zeilen (ClickUp-Dichte) für Listen (z. B. Bestellungen im Laster) UND
   die klassische Spalten-Tabelle .ttable (auf .tbl.tbl-cards aufgesetzt: Spalten
   tragen data-col, der Spalten-Schalter togglet das hidden-Attribut live; mobil
   greift die vorhandene tbl-cards-Karte, m-first/m-last/m-off wie gehabt). */
.tlist { display: flex; flex-direction: column; }
.trow { display: flex; align-items: center; gap: 9px; padding: 6px 14px; border-top: 1px solid var(--border2);
  min-height: 37px; cursor: pointer; background: none; border-left: 0; border-right: 0; border-bottom: 0;
  color: var(--text); font: inherit; text-align: left; width: 100%; }
.trow:hover { background: var(--surface2); }
.trow-title { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.trow-title { color: var(--text); text-decoration: none; }
a.trow-title:hover { text-decoration: underline; }
.trow .tag { flex: none; font-size: 9px; }
.trow-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: none; }
/* Zuständigen-Knopf in der Unteraufgaben-Zeile: .ck-who bringt für die Listen-Ansicht ein
   eigenes margin-left:auto mit — hier sitzt es schon am Container (.trow-right), sonst
   würde es den Termin-Chip nach rechts wegdrücken. */
.trow-right .ck-who { margin-left: 0; padding: 2px 6px; }
.trow-due { font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.trow-due.red { color: var(--danger); font-weight: 600; }
.trow-due.amber { color: var(--warn); font-weight: 600; }
.trow-sub { padding-left: 46px; }
.trow-sp { width: 13px; flex: none; }
.trow-caret { background: none; border: 0; color: var(--text3); cursor: pointer; padding: 0; width: 13px;
  flex: none; font-size: 9px; font-family: inherit; }
.trow-caret:hover { color: var(--text); }
.trow-add { color: var(--text3); font-size: 12.5px; cursor: pointer; }
.trow-add:hover { color: var(--text); background: var(--surface2); }
.trow-note { padding: 4px 14px 6px 36px; }
/* klassische Aufgaben-Tabelle (Spaltenköpfe wie ClickUp, Spalten schaltbar) */
.ttable thead th { white-space: nowrap; }
/* min-width:0 am Flex-Container + Umbruch für die MOBILE Karte (tbl-cards). Auf dem Desktop
   bleibt es bewusst beim einzeiligen Titel mit Ellipsis — siehe „Spalten wie ClickUp" weiter
   unten: eng werdende Spalten kürzen den Namen, statt das Raster zu verschieben. */
.ttable .tname { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ttable .tname .trow-title { white-space: normal; overflow: visible; overflow-wrap: anywhere; min-width: 0; }
/* Anlege-Zeile der Unteraufgaben: eine Zeile, kein halbhohes Feld. */
.ttable tr.sub-addrow > td { padding: 2px 14px 6px 34px; }
.ttable tr.sub-addrow .g-addform { margin: 0; }
.ttable td { white-space: nowrap; }
.ttable td.m-first { white-space: normal; }
/* Tags in EINER Reihe: die Spalte hat feste Breite (table-layout), ohne Riegel liefen die
   Kapseln sichtbar in die Nachbarspalte. Überzählige fasst der Renderer zu „+n" zusammen. */
.ttable td[data-col="tags"] { overflow: hidden; }
.ttable td.th-tags, .ttable td:has(> .tagrow) { overflow: hidden; }
.tagrow { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.tagrow .tag { flex: none; max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
.tagrow .tag-more { flex: none; background: var(--surface3); color: var(--text3); }

/* Unteraufgaben-Einrückung in der Tabelle */
.sub-row td.m-first { padding-left: 34px; }
/* Spalten-Schalter + Zeilen-Zuklappen: hidden muss auch gegen display-Regeln
   gewinnen (mobil macht tbl-cards aus tr ein display:flex → !important nötig). */
tr[hidden], td[hidden], th[hidden] { display: none !important; }
/* Spalten-Menü (Häkchenliste, sitzt in einem .st-menu-Popover) */
.col-menu label { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 8px; font-size: 12.5px; cursor: pointer; color: var(--text); }
.col-menu label:hover { background: var(--surface2); }
.col-menu input { accent-color: var(--accent); }   /* Auswahl-Akzent = PLANK-Rot */

/* ── OPS-WELT: Status — Torten-Kreis, Chip-Button, Auswahl-Popover ───────────────
   .st-ic = Status-Kreis vor dem Titel: zeigt FORTSCHRITT als Torte (ClickUp-
   Prinzip) — offen = leer gestrichelt, in Arbeit/wartet = Tortenstück, erledigt =
   voll + Haken. Torten-Füllstand real = Checklisten-Fortschritt (inline per
   conic-gradient überschreibbar), die %-Werte hier sind Status-Standards.
   Weiß (#fff) bewusst: Haken auf Farbfläche. */
.st-ic { --sic: var(--text2); width: 15px; height: 15px; border-radius: 50%; flex: none; cursor: pointer; padding: 0;
  background: none; border: 1.7px solid var(--text3); display: inline-flex; align-items: center;
  justify-content: center; font-size: 8.5px; font-weight: 800; line-height: 1; color: #fff; font-family: inherit; }
.st-ic:hover { filter: brightness(1.15); transform: scale(1.12); }
/* Form nach VERHALTENS-Klasse (kind), Tinte --sic = Statusfarbe (Status seit v3.2
   DB-verwaltet, /ops/einstellungen — eigene Status erben die Form ihrer Klasse). */
.st-ic-k-offen { border-style: dashed; }
.st-ic-k-aktiv { border-color: var(--sic); background: conic-gradient(var(--sic) 0 35%, transparent 35% 100%); }
.st-ic-k-wartet { border-color: var(--sic); background: conic-gradient(var(--sic) 0 65%, transparent 65% 100%); }
.st-ic-k-erledigt { border-color: var(--sic); background: var(--sic); }
.st-ic-k-erledigt::after { content: '✓'; }
.st-ic-k-verworfen { border-color: var(--text3); background: var(--surface3); }
.st-ic-k-verworfen::after { content: '✕'; color: var(--text3); }
/* Status als App-Button (ClickUp-Stil): farbiger Chip, Klick öffnet das Menü.
   Farbklassen .st-c-<palette> — Hintergrund-Alphas hart wie bei den .pill-Klassen. */
.st-btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent;
  border-radius: 999px; padding: 5px 13px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  letter-spacing: .02em; white-space: nowrap; font-family: inherit; transition: filter .12s; }
.st-btn:hover { filter: brightness(1.18); }
.st-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.st-c-gray   { background: var(--surface3); color: var(--text2); border-color: var(--border); }
.st-c-blue   { background: rgba(59,130,246,.16); color: var(--info); }
.st-c-amber  { background: rgba(245,158,11,.15); color: var(--warn); }
.st-c-green  { background: rgba(34,197,94,.15);  color: var(--ok); }
.st-c-red    { background: rgba(239,68,68,.15);  color: var(--danger); }
.st-c-violet { background: rgba(139,92,246,.15); color: #a78bfa; }
.st-c-teal   { background: rgba(20,184,166,.15); color: #2dd4bf; }
.st-c-pink   { background: rgba(236,72,153,.15); color: #f472b6; }
.st-x        { color: var(--text3); text-decoration: line-through; }
@media (pointer: coarse) { .st-btn { min-height: 34px; } }
/* .st-menu = generisches Popover der Ops-Welt (Status-Auswahl, Aufgaben-Kontext-
   menü, Bereichs-Einstellungen, Spalten-Schalter, Mehr-Menü) — JS positioniert. */
.st-menu { position: absolute; z-index: 310; background: var(--surface3); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1px; min-width: 224px; }
.st-menu[hidden] { display: none; }
/* Falle 14: das display:flex der nächsten Regel schlägt sonst das hidden-Attribut —
   Geist-Zeilen („Eigener Laster …") blieben stehen, statt dem Feld Platz zu machen. */
.st-menu button[hidden] { display: none; }
.st-menu button { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px;
  background: none; border: 0; color: var(--text); font-size: 13px; font-weight: 550; cursor: pointer; text-align: left; font-family: inherit; }
.st-menu button:hover { background: var(--surface2); }
/* Kitemaker-Anatomie (Martins Vorlage 23.07.): ✓-Slot links (nur Auswahl-Menüs),
   rechte Hinweise (Chevron/Submenu), Trenner zwischen Gruppen. */
.mi-ck { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.5; opacity: 0; }
.st-menu .on > .mi-ck { opacity: 1; }
.mi-right { margin-left: auto; color: var(--text3); display: inline-flex; align-items: center; gap: 4px; padding-left: 14px; }
.mi-right svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.mi-sep { height: 1px; background: var(--border2); margin: 5px 4px; flex: none; }
/* .mi-search = Feld-Wrapper in Menüs: Picker-Suchschlitz (filtert live) UND einfaches
   Eingabefeld (Transport: „Grund", „Eigener Laster"). Ein künftiger globaler Filter darf
   deshalb NICHT an `.mi-search input` hängen, sondern nur an den Pickern selbst. */
.mi-search { padding: 2px 4px 4px; }
.mi-search .inp { width: 100%; height: 30px; font-size: 12.5px; box-sizing: border-box; }
.st-menu .lead-ini { width: 22px; height: 22px; font-size: 10px; flex: none; }
.mi-date { display: flex; align-items: center; gap: 9px; padding: 4px 10px 6px; }
.mi-date .cm-ic, .mi-date .mi-ck { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; color: var(--text2); }
.mi-date .inp { flex: 1; height: 30px; font-size: 12.5px; }
.area-dot-sm { width: 14px; height: 14px; border-radius: 5px; flex: none; display: inline-flex; }
/* Inline-Eingabe-Panel (.ip-panel in .st-menu): ersetzt window.prompt() für Anlegen/
   Umbenennen (Martins Vorgabe 30.07.) — Felder gestapelt, OK-Knopf rechts unten.
   Der Knopf braucht die .btn-Optik zurück (die generische .st-menu button-Regel
   würde ihn sonst zum nackten Menü-Eintrag machen). */
.ip-panel { padding: 10px; min-width: 250px; gap: 0; }
.ip-panel .ctx-label { padding: 0 2px 7px; }
.ip-panel .inp { display: block; width: 100%; box-sizing: border-box; margin: 3px 0; font-size: 13px; }
.ip-panel input.inp { height: 32px; }
.ip-panel .ip-acts { display: flex; justify-content: flex-end; margin-top: 9px; }
.ip-panel .ip-acts .btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; justify-content: center; padding: 5px 12px; }
.ip-panel .ip-acts .btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.st-dot-gray { color: var(--text2); }  .st-dot-blue { color: var(--info); }
.st-dot-amber { color: var(--warn); }  .st-dot-green { color: var(--ok); }
.st-dot-red { color: var(--danger); }  .st-dot-violet { color: #a78bfa; }
.st-dot-teal { color: #2dd4bf; }  .st-dot-pink { color: #f472b6; }

/* ── OPS-WELT: Kontextmenü-Bausteine — Labels, Farb-/Symbol-Wahl (Bereiche) ──────
   Sitzen IN .st-menu-Popovers. Feste Farbreihe = ClickUp-Space-Palette; grau/
   violett haben keine Tokens (app.css nutzt #8b5cf6 ebenso hart, z. B. Mention-
   Badge) — bewusste Hex-Ausnahmen. */
.ctx-label { font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text3); padding: 7px 11px 3px; }
.swatches { display: flex; gap: 6px; padding: 3px 11px 7px; flex-wrap: wrap; }
.sw { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border); cursor: pointer; padding: 0; }
.sw:hover { transform: scale(1.15); }
.sw-gray { background: #6b7280; } .sw-blue { background: var(--info); } .sw-green { background: var(--ok); }
.sw-amber { background: var(--warn); } .sw-violet { background: #8b5cf6; } .sw-red { background: var(--danger); }
/* Werte MÜSSEN mit .st-dot-teal/.st-dot-pink oben übereinstimmen — sonst klickt man
   im Farbwähler eine andere Farbe, als der Punkt danach zeigt. */
.sw-teal { background: #2dd4bf; } .sw-pink { background: #f472b6; }
.sw-none { background: transparent; border: 1px dashed var(--border); }
.swi { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2);
  color: var(--text2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.swi:hover { color: var(--text); border-color: var(--text3); }
.swi svg { width: 14px; height: 14px; }
/* Inline-Icon-Slot vor Bereichsnamen (in Pillen/Tabellen; leer = hidden) */
.area-ico { display: inline-flex; margin-right: 4px; }
.area-ico svg { width: 12px; height: 12px; }
/* „Farbe und Symbol"-Panel (ClickUp-Vorbild): Suche, Farbreihe, scrollbares Icon-Grid */
.sym-panel { position: absolute; z-index: 315; background: var(--surface3); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); padding: 12px; width: 320px; }
.sym-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.sym-reset { background: none; border: 0; color: var(--text2); cursor: pointer; font-size: 12px;
  font-family: inherit; padding: 3px 6px; border-radius: 6px; }
.sym-reset:hover { background: var(--surface2); color: var(--text); }
.sym-search { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sym-search .inp { flex: 1; height: 32px; font-size: 12.5px; }
.sym-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; max-height: 236px;
  overflow-y: auto; margin-top: 6px; }
.sym-grid button { width: 33px; height: 33px; border-radius: 8px; border: 0; background: none;
  color: var(--info); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sym-grid button:hover { background: var(--surface2); }
.sym-grid button svg { width: 16px; height: 16px; }

/* ── OPS-WELT: Aufgaben-Modal (Viewport-Popup, ClickUp-Aufbau) ───────────────────
   Links Eigenschaften + Beschreibung + Unteraufgaben, rechts Chat|Verlauf-Panel
   (nutzt vorhandene .ctabs); Chat-Spalte = volle Modalhöhe, Composer fix unten.
   Mobil: Vollbild + Sektions-Tabs (eigene .mnav-Kapsel #taskMnav über dem Modal).
   z-Index 300/310/315/320 liegt bewusst ÜBER .modal (200) und Sidebar (200). */
.task-ov { position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55); display: flex;
  align-items: center; justify-content: center; padding: 26px; }
.task-ov[hidden] { display: none !important; }
.task-modal { width: min(1240px, 100%); height: calc(100vh - 52px); background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden; }
.tm-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid var(--border2); flex: none; }
.tm-head .tag { display: inline-flex; align-items: center; gap: 5px; }
button.tag-btn { cursor: pointer; font-family: inherit; }
button.tag-btn:hover { border-color: var(--text3); color: var(--text); }
.tm-body { display: flex; flex: 1; min-height: 0; }
.tm-main { flex: 1; overflow-y: auto; padding: 22px 26px; min-width: 0; }
.tm-side { width: 360px; flex: none; border-left: 1px solid var(--border2);
  display: flex; flex-direction: column; min-height: 0; }
.tm-side .ctabs { flex: none; }
.tm-side .act-panel { flex: 1; max-height: none; min-height: 0; }
.tm-side .act-comp { flex: none; }
.tm-title { font-size: 22px; font-weight: 700; letter-spacing: -.3px; line-height: 1.25; }
@media (max-width: 720px) {
  .task-ov { padding: 0; }
  .task-modal { height: 100dvh; padding-bottom: env(safe-area-inset-bottom); border-radius: 0; border: 0; }
  .tm-body { flex-direction: column; }
  .tm-side { width: 100%; border-left: 0; border-top: 1px solid var(--border2); flex: 1; }
}
#taskMnav { z-index: 320; } /* Sektions-Tabs über dem Modal (mobil) */
/* Eigenschaften-Zeilen + Sofort-Speichern (kein Speichern-Knopf) */
.props { display: flex; flex-direction: column; }
.prop { display: flex; align-items: center; gap: 10px; padding: 6px 0; min-height: 38px; }
.prop-k { width: 150px; flex: none; color: var(--text2); font-size: 12.5px; display: inline-flex; align-items: center; gap: 8px; }
.prop-k svg { width: 15px; height: 15px; color: var(--text3); }
.prop-v { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pv-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0;
  border-radius: 8px; padding: 4px 8px; margin-left: -8px; color: var(--text); font-size: 13px;
  cursor: pointer; font-family: inherit; min-height: 30px; }
.pv-btn:hover { background: var(--surface3); }
.pv-add { border: 1px dashed var(--border); color: var(--text3); margin-left: 0; padding: 1px 9px;
  min-height: 24px; border-radius: 999px; }
.pv-add:hover { color: var(--text); border-color: var(--text3); background: none; }
.prop-sep { border-top: 1px solid var(--border2); margin: 10px 0; }
.tag-chip { display: inline-flex; align-items: center; gap: 3px; }
.tag-rm { background: none; border: 0; color: var(--text3); cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 0 0 2px; font-family: inherit; }
.tag-rm:hover { color: var(--danger); }
/* Fälligkeits-Picker: Schnellwahl links, Kalender rechts (Vorbild ClickUp) */
.date-menu { position: absolute; z-index: 310; display: flex; background: var(--surface3);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.dm-left { width: 205px; border-right: 1px solid var(--border2); padding: 6px; display: flex; flex-direction: column; }
.dm-left button { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 8px 10px; border-radius: 8px; background: none; border: 0; color: var(--text);
  font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: left; font-family: inherit; }
.dm-left button span { color: var(--text3); font-size: 11.5px; }
.dm-left button:hover { background: var(--surface2); }
.dm-sep { border-top: 1px solid var(--border2); margin: 6px 0; }
.dm-right { padding: 10px 12px; width: 252px; }
.dm-head { display: flex; align-items: center; gap: 2px; margin-bottom: 8px; font-size: 13px; }
.dm-head b { margin-right: auto; }
.dm-head button { background: none; border: 0; color: var(--text2); cursor: pointer; padding: 4px 7px;
  border-radius: 6px; font-family: inherit; font-size: 11.5px; }
.dm-head button:hover { background: var(--surface2); color: var(--text); }
.dm-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.dm-grid .dw { color: var(--text3); font-size: 10.5px; padding: 4px 0; font-weight: 700; }
.dm-grid button { background: none; border: 0; color: var(--text); width: 30px; height: 30px;
  border-radius: 50%; cursor: pointer; font-family: inherit; font-size: 12px; margin: 0 auto; padding: 0; }
.dm-grid button.other { color: var(--text3); }
.dm-grid button:hover { background: var(--surface2); }
.dm-grid button.today { box-shadow: inset 0 0 0 1px var(--border); }
.dm-grid button.sel { background: var(--text); color: var(--bg); font-weight: 700; }
/* Chat|Verlauf-Panel (rechte Modalspalte; nutzt vorhandenes .lead-ini) */
.act-panel { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px;
  min-height: 240px; max-height: 46vh; overflow-y: auto; }
.act-msg { display: flex; gap: 10px; align-items: flex-start; }
.act-msg .lead-ini { flex: none; margin-top: 2px; }
.act-txt { font-size: 13px; margin-top: 1px; }
.act-comp { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border2); background: var(--surface2); }
/* Beschreibung + Titel direkt editierbar */
.desc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); margin: 2px 0 4px; }
.desc-edit { width: 100%; background: none; border: 0; color: var(--text); font-size: 13.5px;
  line-height: 1.55; resize: vertical; min-height: 64px; font-family: inherit; border-radius: 8px; padding: 8px; }
.desc-edit:hover { background: var(--surface2); }
.desc-edit:focus { outline: none; background: var(--surface2); }
/* Klick-zum-Bearbeiten-Titel (Aufgabe, Produktion, Datei, Ordner): EINE Klasse statt ID-Regeln. */
#tTitle[contenteditable], .ce-title[contenteditable] { border-radius: 6px; padding: 0 4px; margin: 0 -4px; }
#tTitle[contenteditable]:hover, .ce-title[contenteditable]:hover { background: var(--surface2); }
#tTitle[contenteditable]:focus, .ce-title[contenteditable]:focus { outline: 1px solid var(--border); background: var(--surface2); }
/* hidden-Guards: [hidden] muss auch gegen display-flex-Klassen gewinnen
   (Muster wie .compose [hidden] / .parts-add[hidden] in app.css) */
.mnav-fab[hidden], .pill[hidden], .tag[hidden],
.act-panel[hidden], #tChatIso[hidden], #tLogIso[hidden] { display: none !important; }

/* ── OPS-WELT: Balken-Ranking .hbar (Cockpit-Baustein) ───────────────────────────
   Regeln: EIN Farbton je Diagramm (Magnitude), Balken-Ende gerundet, Basislinie
   eckig, Werte in Text-Tokens (nie in der Serienfarbe). */
.hbar { display: flex; align-items: center; gap: 10px; padding: 6px 0; text-decoration: none; color: inherit; }
a.hbar:hover .hbar-l { color: var(--text); }
.hbar-l { width: 128px; flex: none; font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar-track { flex: 1; height: 10px; background: var(--surface3); border-radius: 4px; overflow: hidden; }
.hbar-track i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--info); }
.hbar.is-hot .hbar-track i { background: var(--danger); }   /* Status-Farbe NUR für echte Probleme */
.hbar-v { width: 84px; flex: none; text-align: right; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── OPS-WELT: Fortschritts-Zelle .prog (Checklisten-Fortschritt, ClickUp-Spalte) */
.prog { display: inline-flex; align-items: center; gap: 7px; }
.prog-track { width: 84px; height: 6px; background: var(--surface3); border-radius: 3px; overflow: hidden; }
.prog-track i { display: block; height: 100%; border-radius: 0 3px 3px 0; background: var(--info); }
.prog .tiny { font-variant-numeric: tabular-nums; }

/* ── OPS-WELT: Board/Kanban — Bündelung der leads-board-Inline-Styles ────────────
   Werte 1:1 aus views/pages/leads-board.php (dort inline gestylt); die mobilen
   Snap-Regeln für .kanban/.kan-col stehen bereits in app.css (Media-Block).
   .lead-card existiert in app.css nur mit transition/hover — die Grundoptik hier
   ergänzt DISJUNKTE Properties mit identischen Werten wie das Inline-Styling
   (kein Override, keine sichtbare Änderung am CRM-Board; die Inline-Styles in
   leads-board.php können bei Gelegenheit entfallen). */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: flex-start; }
.kan-col { flex: 0 0 280px; min-width: 280px; }
.kan-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; min-height: 60px; }
.lead-card { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 11px; cursor: pointer; }

/* ── OPS-WELT: Transport — KW-Board (Umbau 21.07.2026, Peters Feedback) ──────────
   Je KW ein Band: Rail links (KW-Nummer + Datumsspanne), rechts die Laster in einem
   IMMER 4-spaltigen Grid — max. 4 Laster, Karten bleiben gleich breit, egal ob 2
   oder 4 belegt sind. 1 Box = 1 Bestellung (Variante C: Kürzel·Nr / Lieferant /
   Inhalt); Klick = Detail-Popover („Verschieben ▾" darin = mobiler Move-Pfad),
   Drag = Umladen. KEINE Akzentbalken, Token-Farben. „Ohne Frächter" = .card+.trow. */
.kw-band { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; margin-bottom: 14px; align-items: start;
  padding: 10px; border: 1px solid transparent; border-radius: 14px; }
/* Aktuelle Woche: deutlich hervorgehoben; beim Laden wird sie mittig gescrollt (ops.js) */
.kw-band.now { background: rgba(59,130,246,.05); border-color: rgba(59,130,246,.25); }
.kw-band.now .kw-no { color: var(--info); }
.kw-rail { position: sticky; top: 66px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; padding-top: 2px; }
.kw-no { font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--text2); font-variant-numeric: tabular-nums; }
.kw-range { font-variant-numeric: tabular-nums; }
.kw-trucks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.truck-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; }
.truck-card.drop { border-color: var(--info); background: rgba(59,130,246,.05); }
.truck-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px 4px; flex-wrap: wrap; }
.truck-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truck-tour { padding: 0 12px 2px; }
/* Tagesstreifen Mo–Fr: blau = Fahrer laut Tour-Kalender unterwegs (ersetzt den Tour-Text).
   Die Boxen sind KLICKBAR: Start- + End-Tag anklicken trägt die Tour in Outlook ein. */
.tday-strip { display: inline-flex; gap: 3px; }
.tday { width: 26px; height: 20px; border-radius: 5px; background: var(--surface2); border: 1px solid var(--border);
  color: var(--text3); font-size: 9.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; padding: 0; cursor: pointer; }
.tday:hover { border-color: var(--text3); color: var(--text); }
.tday.on { background: var(--info); border-color: var(--info); color: #fff; }
.tday.sel { border-color: var(--info); color: var(--info); border-style: dashed; }
.tday.on.sel { color: #fff; border-color: #fff; }
/* „+" im Kartenkopf: Abholung/Zustellung als freie Zeile notieren */
.truck-plus { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text2); font-size: 15px; font-weight: 700; line-height: 1;
  cursor: pointer; font-family: inherit; padding: 0; flex: none; }
.truck-plus:hover { color: var(--text); border-color: var(--text3); }
.plus-inp { padding: 4px 11px 10px; }
.plus-inp .inp { width: 100%; font-size: 12.5px; }
.truck-sec { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); padding: 10px 12px 5px; }
.truck-foot { padding: 8px 12px 10px; margin-top: auto; display: flex; align-items: center; gap: 10px; }
.truck-foot a { color: var(--text3); }
.truck-foot a:hover { color: var(--text); }
.truck-del { background: none; border: 0; color: var(--text3); cursor: pointer; padding: 0; font-family: inherit; margin-left: auto; }
.truck-del:hover { color: var(--danger); }
/* „+ Laster" ist seit 26.08.2026 ein Textlink (.kw-addlink, Block „Transport" unten) statt einer
   gestrichelten Geister-Kachel im Grid; der Haken bleibt button[data-truck-add]. */
/* Detail-Popover der Boxen: Anzeige + seit v3.30 der Abtelefonier-Ablauf (Bestätigt /
   Nicht fertig → neuer Termin). Zeilen-Anatomie wie im Kitemaker-Standard (.mi-ck/.cm-ic). */
.d-body { padding: 2px 11px 6px; }
.d-line { font-size: 12px; color: var(--text2); line-height: 1.45; overflow-wrap: anywhere; }
.d-line.pre { white-space: pre-line; }
.d-line.tiny { padding: 0 11px 8px; }
/* Positionszeile im Detail-Popover: schmale Mengenspalte, Artikel fett, Zusatzangaben
   (sigla/Peso/Hinweise aus demselben Radix-Textfeld) klein und EINZEILIG darunter. */
.d-pos { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-top: 1px solid var(--border2); }
.d-pos:first-child { border-top: 0; }
.d-q { flex: none; min-width: 34px; text-align: right; font-size: 11.5px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; }
.d-t { flex: 1; min-width: 0; font-size: 12px; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.d-s { display: block; font-size: 10.5px; color: var(--text3); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-line.d-st { font-weight: 600; padding: 0 11px 6px; }
.d-line.d-st.ok { color: var(--ok); }
.d-line.d-st.nok { color: var(--warn); }
.d-st-note { font-weight: 400; color: var(--text2); }
.mv-menu .d-act .mi-right { font-size: 10.5px; color: var(--text3); }
.mv-menu .d-back { color: var(--text3); font-size: 12px; }
/* Ladefläche = 2er-Grid geordneter Boxen (Martins Vorgabe: „nicht wahllos, 1–2 pro Zeile") */
.bed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 12px 6px; padding: 8px; border: 1.5px dashed var(--border); border-radius: 10px; background: var(--surface2); }
.bed-empty { display: flex; justify-content: center; padding: 12px 8px; }
/* Bestell-Box (Variante C): dreizeilig — Kürzel · Nr / Lieferant / Inhalt; Punkte oben rechts */
.pkg { width: 100%; min-width: 0; padding: 7px 9px; border-radius: 8px; background: var(--surface3); border: 1px solid var(--border); color: var(--text2); display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; cursor: grab; font-family: inherit; position: relative; }
.pkg:hover { border-color: var(--text3); color: var(--text); }
.pkg.dragging { opacity: .5; }
.pkg-l1 { display: flex; align-items: baseline; gap: 6px; width: 100%; min-width: 0; }
/* Kopfzeile = FIRMA fett (Martins Vorgabe — kein Kürzel/LS-Label/Icon), Nummer rechts */
.pkg-t1 { font-size: 11px; font-weight: 700; color: var(--text); line-height: 1.2; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-t1w { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pkg-tx { font-size: 9.5px; color: var(--text3); line-height: 1.2; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-dots { position: absolute; top: 5px; right: 6px; display: flex; align-items: center; gap: 3px; }
.pkg-dot { width: 6px; height: 6px; border-radius: 50%; }
.pkg-dot.note { background: var(--info); }
/* Abtelefonier-Stand der Box: NUR die Tönung, kein Symbol (Peters Vorgabe 31.07.2026 —
   der Haken hat dem Firmennamen zu viel Breite gefressen). Klartext steht im title-Tooltip,
   im Detail-Popover und als Zähler `.tsec-ok` in der Sektionszeile. */
/* rgba-Zeile VOR color-mix (Haus-Muster) — iOS < 16.2 bekommt so wenigstens die Tönung.
   Hover muss NACH den Status-Regeln stehen: gleiche Spezifität, sonst gewinnt der Status
   und bestätigte Boxen reagieren nicht mehr auf die Maus. */
/* Peters Vorgabe 31.07.: „kann man das Feld grün machen, der Haken fällt zu wenig auf" —
   die ganze Box wird getönt (sanktionierte Abweichung von „keine Farbflächen": das ist
   der Arbeitsstand einer 140px-Kachel, den er über 4 Laster hinweg scannt, kein Alarm). */
.pkg.pkg-ok { background: rgba(34,197,94,.14); background: color-mix(in srgb, var(--ok) 14%, var(--surface3));
  border-color: rgba(34,197,94,.5); border-color: color-mix(in srgb, var(--ok) 50%, var(--border)); }
.pkg.pkg-nok { background: rgba(245,158,11,.12); background: color-mix(in srgb, var(--warn) 12%, var(--surface3));
  border-color: rgba(245,158,11,.5); border-color: color-mix(in srgb, var(--warn) 50%, var(--border)); }
.pkg.pkg-ok:hover { border-color: color-mix(in srgb, var(--ok) 80%, var(--border)); color: var(--text); }
.pkg.pkg-nok:hover { border-color: color-mix(in srgb, var(--warn) 80%, var(--border)); color: var(--text); }
/* Geister-Kachel: die Bestellung ist in eine andere Woche gewandert, der Abdruck bleibt
   am alten Laster (Peter 31.07.). Durchscheinend + rot gestrichelt = „kommt hier NICHT
   mehr"; bewusst --danger (Storno-Semantik), nicht der PLANK-Akzent. */
.pkg.pkg-ghost { background: none; border-style: dashed; border-color: rgba(239,68,68,.45);
  border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); opacity: .55; cursor: pointer; }
.pkg.pkg-ghost:hover { opacity: .85; border-color: color-mix(in srgb, var(--danger) 70%, var(--border)); }
.pkg.pkg-ghost .pkg-t1 { font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; }
.pkg.pkg-ghost .pkg-tx { color: var(--danger); }
.tsec-ok { margin-left: 6px; font-size: 11px; color: color-mix(in srgb, var(--ok) 80%, var(--text)); font-weight: 700; text-transform: none; letter-spacing: 0; }
/* Zustell-/Manuell-Box: gleiche Optik; erledigt = gedimmt + durchgestrichen; ✎ = Hand-Zeile */
.pkg-dlv { cursor: pointer; }
/* Move-Popover (ops.js): Basis-Look kommt von .st-menu, hier nur die Maße */
.mv-menu { width: 268px; max-height: 70vh; overflow: auto; }
.mv-menu .cm-chips button.on { background: var(--surface2); font-weight: 700; }
.mv-date { display: flex; align-items: center; gap: 8px; padding: 4px 11px 10px; }
.mv-date input { font-family: inherit; font-size: 12.5px; }
.mv-note { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 11px 10px; }
.mv-note textarea { width: 100%; font-family: inherit; font-size: 12.5px; resize: vertical; }
/* „Eigener Laster …": Namensfeld klappt erst auf Klick auf (Falle 14: display-Klassen
   brauchen die eigene [hidden]-Regel, sonst gewinnt der Autor gegen das Attribut). */
.ta-eigen[hidden] { display: none; }
/* Karten-Abstand + statische Zeilen + noscript-Inline-Formulare (statt Inline-Styles) */
.card.tr-block { margin-bottom: 14px; }
.trow.trow-static { cursor: default; }
.noscript-inline { margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.noscript-inline.pad { padding: 4px 12px; }
/* Schmaler: 4er-Grid → 2er, mobil 1 Spalte; die Rail rückt ÜBER die Laster (eine
   kompakte Kopfzeile „KW 30 · 20.07.–24.07."), Karten volle Breite. */
@media (max-width: 1150px) {
  .kw-trucks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kw-band { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
  .kw-rail { position: static; flex-direction: row; align-items: baseline; gap: 8px; padding: 0 2px; }
  .kw-trucks { grid-template-columns: minmax(0, 1fr); }
  .truck-name { white-space: normal; }
}
.truck-liefs details { border-top: 1px solid var(--border2); }
.truck-liefs summary { display: flex; align-items: center; gap: 9px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; flex-wrap: wrap; }
.truck-liefs summary::-webkit-details-marker { display: none; }
.truck-liefs summary::before { content: '\25B8'; font-size: 9px; color: var(--text3); }
.truck-liefs details[open] summary::before { content: '\25BE'; }
.truck-liefs summary .tiny { font-weight: 500; }
.truck-liefs .trow { cursor: default; }

/* ── OPS-WELT: Druck — die Empfangsliste ist eine BARE Seite (ops-empfangsliste.php,
   eigenes Inline-CSS, ohne app.css) — hier bewusst KEINE globalen @media-print-Regeln
   (Design-Review M1: sie machten Strg+P auf jeder App-Seite leer). */

/* ── OPS-WELT: MW — Lieferanten-Karte (Leaflet self-hosted + statischer Fallback) ─
   .map-mock = Offline-/No-JS-Platzhalter (CSS-Raster mit statischen Pins);
   .lmap-div = Leaflet-divIcon-Pins im CI-Stil statt der Standard-Marker
   (!important nötig: überschreibt Leaflets .leaflet-div-icon-Defaults);
   .lmap-hint = „Strg + Scrollen zum Zoomen"-Overlay. HQ-Pin = einziger
   Akzent-Einsatz auf der Karte. */
.map-mock { position: relative; height: 280px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface2);
  background-image: repeating-linear-gradient(0deg, transparent 0 39px, var(--border2) 39px 40px),
                    repeating-linear-gradient(90deg, transparent 0 39px, var(--border2) 39px 40px);
  overflow: hidden; }
.map-mock.mini { height: 150px; }
.map-pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.map-pin svg { width: 20px; height: 20px; color: var(--info); filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.map-pin.warn svg { color: var(--danger); }  /* nur Pins mit Urlaubs-/Terminkonflikt */
.map-pin .tag { font-size: 9px; background: var(--surface3); }
.map-cap { position: absolute; left: 10px; bottom: 8px; max-width: calc(100% - 20px); white-space: normal; }
.lmap-div { background: none !important; border: 0 !important; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.lmap-div svg { width: 20px; height: 20px; color: var(--info); filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.lmap-div .tag { font-size: 9px; background: var(--surface3); white-space: nowrap; }
.lmap-div.hq svg { color: var(--accent); }
.lmap-div.hq .tag { font-weight: 700; }
.lmap-hint { position: absolute; inset: 0; z-index: 800; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.28); color: #fff; font-size: 13px; font-weight: 600; opacity: 0; transition: opacity .2s;
  pointer-events: none; border-radius: 12px; }
.lmap-hint.show { opacity: 1; }
/* MW: Vorschlags-Rechnung als Kurzterm in der Zelle (z. B. „Ø 12/W × 3W − 8") */
.calc { font-variant-numeric: tabular-nums; }

/* ── OPS-WELT: Mobile-Feinheiten (≤720px) ────────────────────────────────────────
   Seg-Tab-Zeilen dürfen umbrechen (drei MW-Tabs > 390px); kompakte Zähler-Kacheln
   (.kpi.sm existiert in app.css) stehen mobil 2-spaltig — überschreibt bewusst
   das generische .kpi-grid:1fr, damit der Arbeitsbereich oben bleibt; hbar-
   Spalten schmaler. */
@media (max-width: 720px) {
  body.ops .seg[role="tablist"], body.mkt .seg[role="tablist"] { flex-wrap: wrap; }
  body.ops .kpi-grid:has(.kpi.sm), body.mkt .kpi-grid:has(.kpi.sm) { grid-template-columns: 1fr 1fr; }
  .hbar-l { width: 110px; }
  .hbar-v { width: 64px; }
}

/* ── OPS-WELT: bewusst NICHT übernommen (aus dem Mockup-<style>) ─────────────────
   .screen/.screen.active            — Mockup-Screen-Umschaltung (Demo); Produktion rendert je Route.
   .world-btn/.world-menu/.wm-check,
   .nav-sub/.nav-count/.area-dot     — bereits am Ende von app.css ergänzt (nicht duplizieren).
   .world-menu .wm-ico               — Produktions-world-menu stylt Icons direkt (.wm-item svg in
                                       app.css); die 24px-Icon-Kachel des Mockups entfällt.
   .sb-brand-Hover-Regeln            — app.css hat bereits .sb-brand.world-on (Klickziel-Muster).
   .area-badge (+ Farbvarianten)     — produktionsseitig durch vorhandenes .area-dot abgedeckt
                                       (Bereichsfarbe kommt inline aus der DB, keine feste Palette).
   .fr-row/.fr-name/.fr-sup          — v1-Frächterzeile, im Mockup-Body ungenutzt (v2.1 = Laster-
                                       Karten); „Ohne Frächter" nutzt .card + .trow.
   .sub-arrow                        — definiert, aber ungenutzt (Einrückung via .sub-row td.m-first).
   .phones/.phone/.ph-frame/.ph-cap  — Handy-Rahmen der Mobile-Vorschau (nur Demo).
   .mock-tag/.mock-toast             — Entwurfs-Badge/Demo-Toast; Produktion hat .toast.
   #tbBack                           — Mockup-Nachbau des echten .page-back-Hebens (app.js kann das).
   body.mock-mobile …                — iframe-Mobilmodus der Vorschau (nur Demo).
   Duplikat-Check gegen app.css (Selektor-Abgleich, 14.07.2026): alle Selektoren neu; Ausnahmen
   dokumentiert und gewollt:
   .lead-card (nur disjunkte Properties ergänzt, Werte = leads-board-Inline, kein Override),
   .kanban/.kan-col (in app.css bisher nur im Mobile-Block mit !important — Basisregeln neu,
   Mobile-Regeln gewinnen weiter), body/.toast/.mnav (NUR im @media print: App-Chrome beim
   Druck der Empfangsliste ausblenden — keine Screen-Wirkung),
   .pill[hidden]/.tag[hidden]/.mnav-fab[hidden] (reine hidden-Guards, Muster aus app.css),
   .kpi-grid:has(.kpi.sm) (gewollte mobile Verfeinerung, vom Entwurf so vorgesehen). */

/* ── OPS-WELT: Nachträge zum Mockup-Delta (Bausteine, die das Mockup über
   Bestandsklassen löste bzw. die erst in der Produktions-JS entstehen) ─────────── */
/* (Die Swatch-Farben teal/pink stehen einmalig oben bei .sw-* — der frühere zweite Block
   hier trug abweichende Hex-Werte und ließ den Farbwähler anders aussehen als den Punkt.) */
/* Chip-Zeilen in JS-generierten Kontextmenüs (Status-/Fälligkeits-Schnellwahl) */
.cm-chips { display: flex; gap: 6px; padding: 4px 11px 8px; flex-wrap: wrap; align-items: center; }
/* Board: Spalten-Kopf + Drop-Ziel-Markierung beim Drag&Drop */
.kan-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px 12px 0 0; font-size: 12px; font-weight: 700; }
.kan-head .tiny { margin-left: auto; }
.kan-col.drop .kan-body { border-color: var(--info); background: rgba(59,130,246,.05); }
.lead-card.dragging { opacity: .5; }
/* Aufgaben-Modal: Checkliste (Torte im Kreis speist sich hieraus) */
.ck-list { display: flex; flex-direction: column; margin: 2px 0 6px; }
.ck-row { display: flex; align-items: center; gap: 9px; padding: 6px 4px; border-radius: 8px; }
.ck-row:hover { background: var(--surface2); }
.ck-row.done .ck-text { text-decoration: line-through; color: var(--text3); }
.ck-row .ck-box { accent-color: var(--ok); width: 15px; height: 15px; flex: none; }
.ck-text { font-size: 13px; flex: 1; min-width: 0; }
.ck-del { background: none; border: 0; color: var(--text3); cursor: pointer; padding: 2px 6px;
  border-radius: 6px; font-family: inherit; font-size: 13px; opacity: 0; }
.ck-row:hover .ck-del { opacity: 1; }
.ck-del:hover { color: var(--danger); background: var(--surface3); }
@media (pointer: coarse) { .ck-del { opacity: 1; min-width: 34px; min-height: 34px; } }

/* ── OPS-WELT: Mehrfach-Zuständige (Martins Vorgabe 14.07.2026) ──────────────────
   Auswahl-Popover: Personen togglen (.on = zugewiesen, Haken sichtbar), „Übernehmen"
   speichert die ganze Liste. Initialen-Stapel in Listen/Modal überlappen leicht. */
.st-menu button .pv-check { margin-left: auto; color: var(--ok); opacity: 0; font-weight: 800; }
.st-menu button.on .pv-check { opacity: 1; }
.st-menu button.on { background: var(--surface2); }

/* ── OPS-WELT: Review-Nachträge (Design-Review 14.07.2026) ───────────────────────
   S5: Touch-Ziele der kleinen Bedienelemente; S10: Zeilen-Titel bricht mobil um
   (Regel „Titel bricht voll um" — Ellipsis nur Desktop). .st-ic bleibt 15px:
   die GANZE Zeile ist Klickziel, der Kreis nur der Status-Shortcut (dokumentierte
   Ausnahme wie die Stufen-Pille). */
@media (pointer: coarse) {
  .pkg { min-height: 40px; }
  .truck-del { min-height: 34px; padding: 0 6px; }
  .truck-plus { width: 34px; height: 34px; }
  .tday { width: 34px; height: 32px; }
  .tag-rm { min-width: 34px; min-height: 34px; }
  .row-grip, .row-sel, .row-exp { opacity: 1; }
  .row-sel { width: 18px; height: 18px; }
  .row-exp { padding: 10px 5px; min-height: 34px; }  /* Höhe 34; Breite schmal (50px-.rh) — Ausnahme wie .st-ic */
  .g-ghost { min-height: 34px; }
  .bk-ico { width: 38px; height: 38px; }
  .lsec-more { min-width: 34px; min-height: 34px; }
  /* Picker-/Panel-Eingaben in Popovers: 16px verhindert den iOS-Auto-Zoom; min-height
     muss mit runter, sonst gewinnt die generische 44px-Touch-Regel und bläht die Felder. */
  .st-menu .mi-search .inp, .st-menu .mi-date .inp, .mv-date input, .ip-panel input.inp { height: 34px !important; min-height: 34px; font-size: 16px !important; }
  .st-menu textarea.inp, .ip-panel textarea.inp { font-size: 16px !important; }
}
@media (max-width: 720px) {
  .tlist .trow-title { white-space: normal; }
}

/* ── OPS-WELT: Aufgaben-Übersicht im Modul-Layout (Entwurf D, Martins Wahl 14.07.2026)
   Je Bereich ein Modul: Kopf mit Farb-Slot + Fortschritts-Ring + KPI-Boxen
   (Demnächst · Überfällig · Offen), innen die Spalten-Tabelle mit TONALER
   Status-Zelle (V4 aus dem Status-Lab — bewusst KEINE Kapsel-Pillen). ─────────── */
/* Werkzeugzeile über einer Liste. Schwester: .vk-tools (/leads) — beide tragen das
   .seg links; text-decoration:none steht schon global an .seg-btn. */
.lc-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.lc-tools .seg, .vk-tools .seg { flex: none; }
/* Die Suche im rechten Werkzeugblock: feste Breite statt des globalen `width:100%` von
   .li-search — sonst beansprucht sie die ganze Zeile und schiebt „Spalten" in die zweite. */
.pg-ops-tasks .lc-tools-right .search { flex: 0 1 240px; width: 240px; max-width: 100%; margin: 0; }
.ld { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
.lb-head { display: flex; align-items: center; gap: 11px; padding: 13px 16px 11px; }
.lb-head .slot { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; color: #fff; font-size: 13px; font-weight: 800; flex: none; }
.lb-head .slot svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.lb-name { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: none; }
.lb-name:hover { text-decoration: underline; }
.lb-head .sub { font-size: 11px; color: var(--text3); margin-top: 1px; }
.lb-ring { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex;
  align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: var(--text2);
  background: conic-gradient(var(--ok) 0 var(--p), var(--surface3) var(--p) 100%); }
.lb-ring i { width: 26px; height: 26px; border-radius: 50%; background: var(--surface); display: flex;
  align-items: center; justify-content: center; font-style: normal; }
/* .lb-kpis/.lb-kpi entfernt (21.08.2026): die drei Kästchen je Modul sind raus —
   die Summen stehen einmal oben (.mstat-row im page-head). */
.ld .lc-wrap { border-top: 1px solid var(--border2); }
.ld-more { display: block; text-align: center; font-size: 11.5px; color: var(--text3); padding: 8px 0;
  text-decoration: none; border-top: 1px solid var(--border2); }
.ld-more:hover { color: var(--text); background: var(--surface2); }
/* Tonale Status-Zelle: ganze Zelle hauchzart in der Statusfarbe, eckig, klickbar
   (Status-Menü). KEIN border-left-Balken — die Fläche ist die Information. */
.ttable td.stc { font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; width: 106px; }
/* Tonale Farbklassen (Status DB-verwaltet — Palette wie .st-c-*, nur zarter). */
.ttable td.stc.stc-gray   { background: rgba(255,255,255,.02); color: var(--text2); }
.ttable td.stc.stc-blue   { background: rgba(59,130,246,.09);  color: var(--info); }
.ttable td.stc.stc-amber  { background: rgba(245,158,11,.09);  color: var(--warn); }
.ttable td.stc.stc-green  { background: rgba(34,197,94,.09);   color: var(--ok); }
.ttable td.stc.stc-red    { background: rgba(239,68,68,.09);   color: var(--danger); }
.ttable td.stc.stc-violet { background: rgba(139,92,246,.09);  color: #a78bfa; }
.ttable td.stc.stc-teal   { background: rgba(20,184,166,.09);  color: #2dd4bf; }
.ttable td.stc.stc-pink   { background: rgba(236,72,153,.09);  color: #f472b6; }
.ttable td.stc.stc-x      { color: var(--text3); text-decoration: line-through; }
.ttable td.stc:hover { filter: brightness(1.25); }
@media (max-width: 720px) {
  /* Mobil wird die Status-Zelle zum kompakten farbigen Label in der Karte. */
  .ttable td.stc { width: auto; border-radius: 7px; padding: 3px 9px; font-size: 11px; }
  .lb-kpis { padding: 0 14px 10px; }
  .lb-kpi { flex: 1 1 0; }
}

/* ── OPS-WELT: Einstellungen (/ops/einstellungen) — Status- und Tag-Verwaltung ───
   Eine Zeile = ein Formular (Vorschau-Chip, Name, Farbe, Klasse, Verwendung,
   Aktionen). Mobil bricht die Zeile um, Aktionen rutschen in die volle Breite. */
/* Lesebreite an den KARTEN (nicht am .maxw-Wrapper — „Eine Inhaltsbreite"). */
.ops-settings .card { max-width: 980px; }
.oset-card { margin-bottom: 16px; }
.oset-list { display: flex; flex-direction: column; gap: 8px; }
.oset-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Vorschau-Chip ist statisch — keine Klick-Affordanz (Hover-Aufhellung aus). */
.st-btn.is-static { cursor: default; }
.st-btn.is-static:hover { filter: none; }
/* Unsichtbarer Default-Submit (Enter = Speichern) — NICHT display:none, sonst würde
   der Browser ihn bei der impliziten Formular-Absendung übergehen. */
.vh-submit { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.oset-row .oset-name { flex: 1; min-width: 140px; max-width: 260px; height: 32px; }
.oset-row .oset-color, .oset-row .oset-kindsel { width: auto; height: 32px; font-size: 12px; }
.oset-row .oset-usage { min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.oset-row .oset-actions { display: flex; gap: 6px; margin-left: auto; flex: none; }
/* ClickUp-Look (23.07.): Zeile = ruhige Hover-Fläche, Aktionen erst on hover/focus, Punkt statt Doppel-Pille */
.oset-grplbl { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin: 8px 0 -2px; }
.oset-list .oset-grplbl:first-child { margin-top: 0; }
.oset-row { padding: 3px 8px; border-radius: 8px; }
.oset-row:hover, .oset-row:focus-within { background: var(--surface2); }
.oset-dot { width: 10px; height: 10px; }
.oset-row .pv-inp.oset-name { flex: 1; min-width: 140px; max-width: 260px; }
.oset-row .oset-color, .oset-row .oset-kindsel { background: var(--surface2); border-color: transparent; }
.oset-row:hover .oset-color, .oset-row:hover .oset-kindsel { border-color: var(--border); }
.oset-row .oset-actions { opacity: 0; }
.oset-row:hover .oset-actions, .oset-row:focus-within .oset-actions { opacity: 1; }
.oset-actions .btn { border-color: transparent; background: none; color: var(--text2); }
.oset-actions .btn:hover { background: var(--surface3); color: var(--text); }
@media (pointer: coarse) { .oset-row .oset-actions { opacity: 1; } }
/* Farbwahl via Punkt-Popover; Select bleibt No-JS-Fallback. NUR in Zeilen MIT Punkt-Button
   verstecken — die Anlege-Zeilen haben keinen und brauchen ihr Select. */
.oset-js .oset-row:has(.oset-dotbtn) .oset-color { display: none; }
.oset-dotbtn { cursor: pointer; border: 0; padding: 0; transition: transform .1s; }
.oset-dotbtn:hover, .oset-dotbtn:focus-visible { transform: scale(1.3); outline-offset: 3px; }
details.oset-add summary { cursor: pointer; color: var(--text3); font-size: 12.5px; padding: 6px 8px; border-radius: 8px; list-style: none; width: fit-content; }
details.oset-add summary::-webkit-details-marker { display: none; }
details.oset-add summary:hover { background: var(--surface2); color: var(--text); }
details.oset-add .oset-row { margin-top: 4px; }
@media (pointer: coarse) { details.oset-add summary { min-height: 34px; display: inline-flex; align-items: center; } }
@media (max-width: 720px) {
  .oset-row { row-gap: 8px; }
  .oset-row .oset-name { max-width: none; }
  .oset-row .oset-actions { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ── MKT-WELT: Monatskalender Content-Plan (.mkt-cal) ────────────────────────────
   Standard-Ansicht im Modul Content-Pläne (v3.5.0). Grid Mo–So + schmale KW-Spalte;
   jeder Post = Chip mit Status-Punkt (Farb-Semantik der Status-Pillen: blau=geplant,
   grün=aktiv, amber=Freigabe, grau=veröffentlicht, rot=verworfen). Mobil (≤720px)
   zeigen die Zellen nur Punkte — die Agenda-Liste darunter übernimmt (kein H-Scroll).
   Alles gescoped unter .mkt-cal / .cal-head → andere Seiten bleiben unberührt. */
.cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.cal-head .cal-title { font-size: 15px; font-weight: 700; }
.mkt-cal .cal-grid { display: grid; grid-template-columns: 40px repeat(7, 1fr); gap: 4px; }
.mkt-cal .cal-dow { font-size: 10.5px; font-weight: 600; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; text-align: center; padding: 2px 0 4px; }
.mkt-cal .cal-kw { display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; font-size: 10px; color: var(--text2); font-variant-numeric: tabular-nums; }
.mkt-cal .cal-cell { min-height: 88px; min-width: 0; padding: 5px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; }
.mkt-cal .cal-cell.out { opacity: .38; }
.mkt-cal .cal-day-num { font-size: 11px; font-weight: 600; color: var(--text2); font-variant-numeric: tabular-nums; }
/* Heute: NUR die rote Tageszahl — der rote Zellrahmen ist am 26.08.2026 gefallen (ein Rot je Seite). */
.mkt-cal .cal-today .cal-day-num { color: var(--accent2); }
.mkt-cal .cal-chips { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; min-width: 0; }
.mkt-cal .cal-chip { display: flex; align-items: center; gap: 5px; min-width: 0; padding: 2px 6px; border-radius: 6px; background: var(--surface3); font-size: 11px; color: var(--text); text-decoration: none; }
.mkt-cal .cal-chip:hover { background: var(--surface2); }
.mkt-cal .cal-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mkt-cal .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mkt-cal .dot.blue  { background: var(--info); }
.mkt-cal .dot.green { background: var(--ok); }
.mkt-cal .dot.amber { background: var(--warn); }
.mkt-cal .dot.red   { background: var(--danger); }
.mkt-cal .dot.gray  { background: var(--text2); }
.mkt-cal .cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.mkt-cal .cal-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
.mkt-cal .cal-agenda { display: none; }
@media (max-width: 720px) {
  .mkt-cal .cal-grid { grid-template-columns: repeat(7, 1fr); gap: 3px; }
  .mkt-cal .cal-kw { display: none; }
  .mkt-cal .cal-cell { min-height: 44px; padding: 3px 4px; border-radius: 7px; }
  .mkt-cal .cal-chips { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
  .mkt-cal .cal-chip { padding: 0; background: none; }
  .mkt-cal .cal-chip-t { display: none; }         /* Zelle = nur Status-Punkte … */
  .mkt-cal .cal-agenda { display: block; margin-top: 14px; }   /* … die Agenda ist die Arbeitsliste */
  .mkt-cal .cal-ag-day { margin-bottom: 10px; }
  .mkt-cal .cal-ag-h { font-size: 12px; font-weight: 700; color: var(--text2); padding: 4px 0; border-bottom: 1px solid var(--border); }
  .mkt-cal .cal-ag-h.today { color: var(--accent2); }
  .mkt-cal .cal-ag-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 2px; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
  .mkt-cal .cal-ag-t { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── MKT-Kalender v2 (Martins Runde 2026-07-16): Vergangenheit, Viewport, Drag&Drop ── */
.mkt-cal .cal-cell.past { opacity: .55; }                     /* vergangene Tage leicht grau */
.mkt-cal .cal-cell.past.cal-today { opacity: 1; }
.mkt-cal .cal-chip[draggable="true"] { cursor: grab; }
.mkt-cal .cal-chip.dragging { opacity: .5; cursor: grabbing; }
.mkt-cal .cal-cell.dragover { border-color: rgba(var(--accent-rgb), .6); background: var(--surface2); }
@media (min-width: 720.02px) {
  /* Kalender nimmt den Viewport ein: Kopfzeile fix, Wochenzeilen teilen sich die Resthöhe.
     100dvh − (Topbar+Seitenkopf+Karten-Chrom ≈ 320px); Zellen behalten ihr min-height als Boden. */
  .mkt-cal .cal-grid { min-height: calc(100dvh - 320px); grid-template-rows: 26px; grid-auto-rows: minmax(88px, 1fr); }
}

/* ── MKT-WERKBANK v3.7 (freigegebener Entwurf „Post-Werkbank" + Planer + Content Freigabe) ──
   Neue Bausteine der Marketing-Welt; Ops-Vokabular (st-btn/st-menu/pv-btn/desc-edit/ck-row)
   wird wiederverwendet. Sanktionierte Ausnahmen: kein .detail-av auf mkt-Posts (Martins Regel);
   „✓ Gespeichert"-Blitz als Mikro-Quittung am Feld; .btn-ok analog .kad-btn-Farbausgängen. */

/* Karten-Rhythmus der Werkbank/Planer-Spalten: sauberer 14px-Box-Abstand (Haus-Standard —
   .card hat bewusst keinen Default-Margin; Martins Fix 16.07.). */
#mktEntry .card + .card, #mktPlaner .card + .card { margin-top: 14px; }

/* .pv-inp — randloser Sofort-Speicher-Input (Ein-Zeilen-Schwester von .desc-edit). */
.pv-inp { background: none; border: 0; color: var(--text); font: inherit; font-size: 13px;
  border-radius: 8px; padding: 4px 8px; margin-left: -8px; min-height: 30px; width: 100%; max-width: 340px; }
.pv-inp:hover { background: var(--surface3); }
.pv-inp:focus { outline: 1px solid var(--border); background: var(--surface2); }

/* Fakten-Zellen mit Klick-Pille: Ausrichtung ohne Inline-Hacks. */
.term .pv-btn { margin: -2px 0 0 -8px; }

/* .props-2col — Eigenschaften zweispaltig (Liste kurz halten, Breite nutzen). */
@media (min-width: 720.02px) {
  .props-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

/* .mkt-side — Kontext-Spalte: Karten natürlich hoch, NUR die letzte (Verlauf) wächst und
   scrollt innen. Sticky nur Desktop+Maus (pointer:fine-Gate wie Chat-Panel — iOS-Fallen). */
@media (min-width: 980.02px) and (pointer: fine) {
  .mkt-side { position: sticky; top: 70px; display: flex; flex-direction: column; max-height: calc(100vh - 84px); } /* 56px Topbar + Luft */
  .mkt-side .card { flex: none; }
  .mkt-side .card:last-child { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .mkt-side .card:last-child .act-panel { flex: 1; max-height: none; min-height: 0; }
}
.mkt-side .act-panel { padding: 10px 14px; overflow-y: auto; }
.mkt-side .act-comp { flex: none; display: flex; gap: 8px; align-items: center; }

/* .ck-who — Schritt-Zuweisungs-Chip in der Checklisten-Zeile. */
.ck-who { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex: none;
  background: none; border: 0; border-radius: 999px; padding: 2px 9px; min-height: 26px;
  font-size: 12px; color: var(--text2); cursor: pointer; font-family: inherit; }
.ck-who:hover { background: var(--surface3); color: var(--text); }
.ck-who .lead-ini { width: 18px; height: 18px; font-size: 9px; }
.ck-who.unset { border: 1px dashed var(--border2); color: var(--text3); opacity: 0; }
.ck-row:hover .ck-who.unset, .ck-who.unset:focus-visible { opacity: 1; }
.ck-del:focus-visible { opacity: 1; }
@media (pointer: coarse) {
  .ck-who.unset { opacity: 1; }
  .pv-btn, .pv-inp, .ck-who { min-height: 34px; }   /* Touch-Skala: Chips/Pillen-Stufe */
}

/* .brief-doc — Lese-Typografie für Kive-Brief + Caption (Dokument, kein Formularfeld). */
.desc-edit.brief-doc { font-size: 15px; line-height: 1.7; max-width: 100%; min-height: 96px; }
/* Listen-Zeilen mit data-href sind ganz klickbar (Ops-Gefühl) — mkt.js navigiert. */
.tbl tr[data-href] { cursor: pointer; }
.tbl tr[data-href]:hover td { background: var(--surface2); }
.cap-meta { margin-top: 2px; font-variant-numeric: tabular-nums; }

/* .dl-row — Label-Zeile über einer Textfläche: Label links, Quittung + Kopieren rechts. */
.dl-row { display: flex; align-items: baseline; gap: 10px; }
.dl-row .desc-label { margin: 0; }
.dl-row .save-flash { color: var(--ok); }
.dl-row .copy-btn { margin-left: auto; opacity: 0; font-size: 11.5px; padding: 2px 8px; min-height: 24px; }
.card-body:hover .dl-row .copy-btn, .dl-row .copy-btn:focus-visible { opacity: 1; }
@media (pointer: coarse) { .dl-row .copy-btn { opacity: 1; } }

/* .pipe-dots — READ-ONLY Status-Anzeige (5 Punkte); geschaltet wird NUR am st-btn.
   Farbklassen spiegeln st-c-* (Hex-Ausnahme violett wie .st-dot-violet). */
.pipe-dots { display: inline-flex; align-items: center; gap: 7px; padding-top: 3px; }
.pipe-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--text3); opacity: .5; }
.pipe-dots i.done { background: var(--text3); border-color: var(--text3); opacity: .8; }
.pipe-dots i.cur { border-color: var(--pipe-cur, var(--info)); opacity: 1; background: var(--pipe-cur, var(--info));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pipe-cur, var(--info)) 22%, transparent); }
.pipe-dots.pc-blue   { --pipe-cur: var(--info); }
.pipe-dots.pc-green  { --pipe-cur: var(--ok); }
.pipe-dots.pc-amber  { --pipe-cur: var(--warn); }
.pipe-dots.pc-violet { --pipe-cur: #a78bfa; }
.pipe-dots.pc-gray   { --pipe-cur: var(--text2); }
.pipe-dots.pc-red    { --pipe-cur: var(--danger); }

/* Status-Punkt im Verlaufstext. */
.act-txt .st-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: currentColor; margin-right: 5px; }

/* .ck-row.next — der erste OFFENE Schritt trägt Gewicht. */
.ck-row.next .ck-text { font-weight: 600; }

/* „als Nächstes"-Anker im Status-Menü. */
.st-menu .st-next-hint { margin-left: auto; font-size: 10.5px; color: var(--text3); }

/* date-menu mobil: stapeln statt sprengen (gilt auch dem Ops-Task-Modal). */
@media (max-width: 720px) {
  .date-menu { flex-direction: column; max-width: calc(100vw - 24px); }
  .dm-left { width: auto; border-right: 0; border-bottom: 1px solid var(--border2); }
}

/* ── Planer (Veröffentlichen-Unterseite) ── */
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.asset-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--border); background: var(--surface3); cursor: pointer; padding: 0; }
.asset-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset-tile .at-check { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--surface); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; }
.asset-tile.sel { border-color: var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent); }
.asset-tile.sel .at-check { background: var(--ok); border-color: var(--ok); color: #fff; }
.asset-tile.add { border-style: dashed; border-color: var(--border2); background: none;
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  color: var(--text2); font-size: 11.5px; font-family: inherit; }
.asset-tile.add:hover { background: var(--surface2); color: var(--text); }
/* Drei Bedienpunkte je Kachel, DREI Ecken: Auswahl-Nummer oben rechts, Zuschneiden oben links,
   Löschen unten rechts. Bis v3.49.3 lagen Zuschneiden (4/4) und Löschen (6/6) exakt aufeinander —
   Martin 27.08.2026: „die Buttons vom Entfernen und Editieren sind übereinander". Löschen liegt
   bewusst am weitesten weg vom Zuschneiden: ein Fehlklick ist dort nicht rückholbar. */
.asset-del { position: absolute; right: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; }
.asset-tile:hover .asset-del, .asset-del:focus-visible { opacity: 1; }
@media (pointer: coarse) { .asset-del { opacity: 1; } }

/* .chan-row (Kanal-Zeilen mit Kippschalter) ist in v3.50.1 entfallen — die Kanäle sind
   jetzt runde Punkte in der festen Leiste unten (.pb-chan). Das Kanal-Zeichen .chan-ico
   bleibt: es beschriftet die Vorschau-Karten. */
.chan-ico { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex: none; }
.chan-ico.ig { background: #d6349f; } .chan-ico.fb { background: #1877f2; } .chan-ico.pin { background: #e60023; }
.chan-ico.li { background: #0a66c2; }
/* Trägt das Zeichen ein SVG (v3.50.2), braucht es keine farbige Kachel mehr — die Marke
   erkennt man an der Form, und in der Vorschau steht der Name gleich daneben. */
.chan-ico:has(svg) { background: none; width: 18px; height: 18px; }
.chan-ico svg { width: 18px; height: 18px; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.pv-one[data-pv="ig"]  .chan-ico svg { stroke: #d6349f; }
.pv-one[data-pv="fb"]  .chan-ico svg { stroke: #1877f2; }
.pv-one[data-pv="li"]  .chan-ico svg { stroke: #0a66c2; }
.pv-one[data-pv="pin"] .chan-ico svg { stroke: #e60023; }

/* „Gemeinsam posten" in der Instagram-Vorschau: geschlossen ein Satz, offen ein Feld. */
.pp-collab { padding: 6px 4px 0; }
.pp-collab-btn { border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  font-size: 11.5px; color: var(--text3); text-align: left; }
.pp-collab-btn:hover { color: var(--accent2); }
.pp-collab-edit { display: flex; gap: 6px; align-items: center; margin-top: 2px; }
.pp-collab-edit .inp { font-size: 12px; padding: 6px 8px; }

.pub-prev { width: 320px; max-width: 100%; border: 1px solid var(--border); border-radius: 24px;
  background: var(--bg); padding: 12px 10px 16px; }
.pub-prev .pp-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 8px; }
.pub-prev .pp-name { font-size: 12px; font-weight: 700; }
.pub-prev .pp-sub { font-size: 10px; color: var(--text2); }
.pub-prev .pp-img { border-radius: 10px; overflow: hidden; background: var(--surface3); aspect-ratio: 1; }
/* Freigabe-Vorschau: ganzes Bild zeigen (contain) statt quadratisch beschneiden — der Freigeber
   muss den vollen Ausschnitt prüfen (Martins Befund 23.07. „Bild wird nicht voll angezeigt"). */
.pub-prev .pp-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Umbrüche sind Teil des Textes (Martin 29.08.2026: „berücksichtigst du Umbrüche beim Push /
   in der Vorschau"). Der Push transportiert sie unversehrt (form-kodiert als %0A) — nur HTML
   klappte sie zusammen, weshalb die Vorschau eine Textwand zeigte, die so nie erscheint.
   `pre-wrap` statt `pre-line`: auch die LEERZEILE zwischen zwei Absätzen bleibt, und genau
   die trennt bei Instagram Fließtext von der Produkt-/Ortsangabe. */
.pub-prev .pp-cap { font-size: 11.5px; line-height: 1.5; padding: 8px 4px 0; color: var(--text);
  word-break: break-word; white-space: pre-wrap; }
/* Karussell, Caption-Prüfbox, Kanal-/Meta-Zeile und Fußlink der alten Freigabe-Box sind am
   26.08.2026 in die Post-Kachel aufgegangen (.fk-*, Block „Post-Wand" unten). */

.pub-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-chips .pill { display: inline-flex; align-items: center; gap: 6px; }

/* „Bald verfügbar"-Karte (gesperrtes Modul, z. B. KPI-Tracking). */
.soon-card { max-width: 560px; margin: 18px auto 0; }
.soon-ico { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 14px; display: flex;
  align-items: center; justify-content: center; background: var(--surface3); color: var(--text2); }
.soon-ico svg { width: 26px; height: 26px; }

/* Freigabe-Boxen (Content Freigabe): Karten-Kopf m. Post-Name (Link zum Post) + Kanal-Icons. */
/* Titel bricht auf 2 Zeilen um statt abzuschneiden (Mobile-Regel: Identifier nie kappen). */
.fg-title { font-size: 13px; font-weight: 700; min-width: 0; color: var(--text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fg-title:hover { color: var(--accent2); }
.fg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fg-grid .card { margin: 0; }
/* Freigeben/Ablehnen: NEUTRAL im Ruhezustand (kein Dauer-Grün, das zum Klick drängt).
   Grün/Rot nur als Farb-Andeutung beim Hover und als volle Quittung beim Klick (.is-armed).
   Ruhe- und Hover-Optik von „Freigeben" stehen im Kachelfuß-Block (.fk-act, unten) — seit
   26.08.2026 lebt der Knopf ausschließlich dort. */
.fg-approve.is-armed { background: var(--ok); color: #fff; border-color: var(--ok); }
.fg-reject-btn { color: var(--text2); }
.fg-reject-btn:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.fg-reject-btn.is-armed { background: var(--danger); color: #fff; border-color: var(--danger); }

/* .btn-ok — grüner Flächen-Button: sanktioniert für den „Gewonnen"-Abschluss
   (VK-Detail + Gewonnen-Dialog/-Popup, v3.20) — analog .kad-btn. */
.btn-ok { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent); font-weight: 700; }
.btn-ok:hover { background: color-mix(in srgb, var(--ok) 28%, var(--surface)); }

/* ═══ Creation-Modus (Werkbank v3.8, Entwurf 16.07.2026) ══════════════════════
   Mode-Switch stellt die Post-Seite zwischen Übersicht und Creation-Arbeitsplatz um. */

/* Mode-Switch: Übersicht | Creation — gleitender Daumen, SVG-Icons, kein Emoji. */
.mode-switch { position: relative; display: inline-flex; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.mode-switch button { position: relative; z-index: 1; display: inline-flex; align-items: center;
  gap: 7px; border: 0; background: none; color: var(--text2); font: inherit; font-size: 12px;
  font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer;
  transition: color .18s; }
.mode-switch button svg { width: 13px; height: 13px; }
.mode-switch button.on { color: var(--text); }
@media (pointer: coarse) { .mode-switch button { min-height: 34px; } }
.mode-switch .ms-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border2);
  box-shadow: 0 1px 2px rgba(0,0,0,.14); transition: left .22s cubic-bezier(.3,.9,.3,1), width .22s cubic-bezier(.3,.9,.3,1); }
@media (prefers-reduced-motion: reduce) { .mode-switch .ms-thumb { transition: none; } }

/* Creation-Arbeitsplatz: abgesenkte Bühne, links MATERIAL (lesen), rechts ERGEBNIS (machen). */
.creation-stage { background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px 24px 26px; }
.creation-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.creation-head .ch-pipe { font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); }
.creation-head .ch-step { font-size: 13px; color: var(--text2); }
.creation-cols { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px) { .creation-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .creation-stage { padding: 16px 14px 20px; } }

.cr-zone-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cr-zone-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Material: Briefing + Kive-Background als ruhige Lese-Blöcke. */
.cr-brief { background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; }
.cr-brief + .cr-brief { margin-top: 12px; }
.cr-brief .cb-k { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cr-brief .cb-k .desc-label { margin: 0; }
.cr-brief .cb-k .copy-btn { margin-left: auto; opacity: 1; font-size: 11.5px; padding: 2px 8px; min-height: 24px; }
.cr-brief .cb-text { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.cr-brief.cb-bg .cb-text { font-size: 14px; line-height: 1.8; }
.cr-brief .cb-text p { margin: 0 0 8px; }
.cr-brief .cb-text p:last-child { margin: 0; }

/* Produkt-Panel: stille Fakten als Kette. */
.cr-product { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px;
  padding: 12px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.cr-product .cp { min-width: 0; }
.cr-product .cp b { display: block; font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 2px; }
.cr-product .cp span { font-size: 13px; }

/* Ergebnis: Caption + Assets + CTA. */
.cr-out { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.cr-out + .cr-out { margin-top: 12px; }
.cr-cta { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-cta .tiny { color: var(--text3); }
.cr-shoot { display: inline-flex; align-items: center; gap: 8px; }

/* Übersicht ↔ Creation: weiches Umschalten; Creation blendet die Mobile-Tab-Kapsel aus
   (die mnav-Tabs zielen auf Karten der Übersicht). */
#viewUebersicht, #viewCreation { animation: crFade .18s ease; }
@keyframes crFade { from { opacity: .4; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #viewUebersicht, #viewCreation { animation: none; } }
#mktEntry.creation-on .mnav { display: none !important; }

/* ── OPS-WELT: Aufgaben-Zeilen im ClickUp-Muster (Martins Vorgabe 22.07.2026) ────
   Schmale Hover-Zelle links: Griff (⠿ = Drag in Bereich/Liste) + Auswahl-Checkbox.
   Sichtbar erst beim Zeilen-Hover, bei aktiver Auswahl (body.bulk-on) dauerhaft;
   auf Touch-Geräten immer sichtbar (coarse-Block). Mobil (≤720px) entfällt die
   Spalte BEWUSST — Bulk/Drag sind Desktop-Werkzeuge, Einzelpfade (Modal, Status-
   Popover, Kontextmenü) decken das Handy ab; die #bulkBar-Regel dort ist defensiv.
   Bulk-Leiste unten mittig; Drop-Ziele (Sidebar-Bereich, Listen-Chip) leuchten. */
.ttable th.rh, .ttable td.rh { width: 50px; min-width: 50px; padding: 0 0 0 2px; border-right: 0; }
.row-exp { background: none; border: 0; color: var(--text3); padding: 1px; border-radius: 5px; cursor: pointer; opacity: 0; vertical-align: middle; margin-left: 1px; }
.row-exp svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; display: block; transition: transform .12s; }
.row-exp[aria-expanded="true"] svg { transform: rotate(90deg); }
tr:hover .row-exp, .row-exp.has, .row-exp[aria-expanded="true"] { opacity: 1; }
.row-exp:focus-visible, .row-sel:focus-visible { opacity: 1; outline: 2px solid var(--info); outline-offset: 1px; }
.row-exp:hover { color: var(--text); background: var(--surface2); }
.sub-addrow td { padding: 0 16px 4px; border-bottom: 0; }
.tbl tbody tr.sub-addrow { cursor: default; }
.tbl tbody tr.sub-addrow:hover { background: none; }
.sub-addrow .g-ghost { padding-left: 0; }
@media (min-width: 721px) { .sub-addrow .g-addform { margin-left: 38px; } }  /* 16+16+38 = 70 = Torten-Kante */
/* Gruppierter Modus: „Aufgabe"-Header fluchtet mit dem TEXT (Torte davor = 22px) */
.sgrp .ttable th.th-task, .sgrp .ttable td.m-first { padding-left: 4px; }
td.rh { white-space: nowrap; }
.row-grip { display: inline-block; cursor: grab; color: var(--text3); font-size: 13px; padding: 2px 3px;
  border-radius: 5px; opacity: 0; vertical-align: middle; user-select: none; }
.row-grip:hover { color: var(--text); background: var(--surface2); }
.row-sel { accent-color: var(--accent); width: 14px; height: 14px; vertical-align: middle; opacity: 0; margin-left: 2px; }
tr:hover .row-grip, tr:hover .row-sel, body.bulk-on .row-sel, .row-sel:checked { opacity: 1; }
tr.dragging { opacity: .45; }
.drop-ok { outline: 2px dashed var(--info); outline-offset: -2px; border-radius: 8px; }
#bulkBar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
#bulkBar b { font-size: 12.5px; margin-right: 4px; }
/* Unterlisten: Chip-Leiste im Bereich + eingerückte Sidebar-Einträge */
.li-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; }
.nav-sub .nav-liste { padding-left: 14px; font-size: 12px; gap: 7px; }
.nav-lidot { width: 15px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text3); }
.nav-lidot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@media (max-width: 720px) {
  .ttable th.rh, .ttable td.rh { display: none; }
  #bulkBar { bottom: 84px; }   /* über der MNAV-Kapsel */
}

/* ── OPS-WELT: Bereichs-Seite im ClickUp-Muster + Self-Service (Martins GO 22.07.2026) ─
   .lsec = Listen-Sektion (Karte), .sgrp = Status-Gruppe mit farbiger Kapsel (einklappbar),
   .bk-* = dezente Toolbar (Lupe/Filter-Menü), .nav-add = Self-Service-Einträge in der
   Sidebar, .cm-ic = Icons der Kontextmenüs. Token-Farben, keine Akzentbalken. */
.lsec { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-bottom: 16px; padding: 14px 16px 8px; }
.lsec-pre { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.lsec-head { display: flex; align-items: center; gap: 8px; margin: 2px -16px 10px; padding: 0 16px 10px; border-bottom: 1px solid var(--border2); }
.lsec-head b { font-size: 15px; letter-spacing: -.2px; }
.lsec-head .lsec-more { opacity: 0; }
.lsec-head:hover .lsec-more, .lsec-head .lsec-more:focus-visible { opacity: 1; }
@media (pointer: coarse) { .lsec-head .lsec-more { opacity: 1; } }
.lsec-more { background: none; border: 0; color: var(--text3); cursor: pointer; font-size: 15px; padding: 0 6px; border-radius: 6px; font-family: inherit; }
.lsec-more:hover { color: var(--text); background: var(--surface2); }
.lsec-n { font-size: 11px; color: var(--text3); }
.lsec-ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; color: var(--text2); flex: none; }
.lsec-add { display: block; width: 100%; text-align: center; border-style: dashed; color: var(--text3);
  font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 14px; }
.lsec-add:hover { color: var(--text); border-color: var(--text3); }
.sgrp { margin: 10px 0 2px; }
.sgrp-head { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; padding: 3px 0; }
.sgrp-head:hover .sgrp-car { color: var(--text); }
.sgrp-car { color: var(--text2); display: inline-flex; align-items: center; justify-content: center; width: 18px; flex: none; }
.sgrp-car svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform .12s; }
.sgrp.closed .sgrp-car svg { transform: rotate(-90deg); }
.sgrp-pill { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; color: #fff; }
.sgrp-pill.sgp-amber, .sgrp-pill.sgp-teal { color: rgba(0,0,0,.72); }   /* helle Flächen → dunkler Text */
/* Grau (Offen/Verworfen) NICHT als dunkle Fläche — weiche Kapsel wie ClickUps „ZU ERLEDIGEN"
   (Inline-Background aus ops_status_color wird hier bewusst überstimmt). */
.sgrp-pill.sgp-gray { background: var(--surface3) !important; color: var(--text2); }
/* Kompakter Bereichs-Kopf: kleiner Farb-Slot inline im Titel (statt 40px-Avatar-Block).
   display:inline-flex ist PFLICHT — .area-dot ist sonst flex/block und bricht die Zeile. */
.detail-meta h1:has(> .area-dot) { display: flex; align-items: center; gap: 8px; }
.detail-meta h1 .area-dot { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; flex: none; }
/* Status-Torte vor dem Titel im gruppierten Modus */
/* Gruppierter Modus: Torte + Header fluchten auf der 4px-Kante hinter der .rh-Zelle (th-task-Regel) */
.sgrp-n { font-size: 11px; color: var(--text3); font-weight: 600; }
.sgrp.closed .sgrp-body { display: none; }
.sgrp .ttable { margin-top: 2px; }
.lsec .g-addform, .g-addform { display: flex; gap: 8px; align-items: center; padding: 8px 2px; }
.lsec .g-addform .inp { font-size: 12.5px; }
.g-fields { display: flex; gap: 8px; align-items: center; flex: 1; }
/* ClickUp-Muster: mit JS wird die Zeile zur Geister-Zeile — Klick öffnet das Feld */
.g-addform.js .g-fields { display: none; }
.g-addform.js.open .g-fields { display: flex; }
.g-addform.js.open .g-ghost { display: none; }
.g-ghost { background: none; border: 0; color: var(--text3); font: inherit; font-size: 12.5px;
  cursor: pointer; padding: 6px 8px; border-radius: 8px; text-align: left; flex: 1; }
.g-ghost:hover { color: var(--text); background: var(--surface2); }
/* Kopf, Caret und Kapsel ganz links (Martins Vorgabe 22.07.: „alles weiter nach links");
   nur der Quick-Add fluchtet auf die Torten-Kante (54 = rh 50 + m-first-Pad 4). */
@media (min-width: 721px) {
  .lsec > .g-addform { margin-left: 54px; padding-left: 0; }
  .lsec > .g-addform .g-ghost { padding-left: 0; }
}
/* Mobil ist die Werkzeug-Zelle (samt Pfeil) weg → Kind-Zeilen IMMER zeigen.
   !important nötig (globales tr[hidden] ist !important); flex, weil tbl-cards die Zeilen
   als Flex-Karten rendert. Die „+ Unteraufgabe"-Zeile bleibt zu (Anlage mobil via Modal). */
@media (max-width: 720px) {
  .ttable tr[data-par][hidden]:not(.sub-addrow) { display: flex !important; }
}
/* Task-Modal: Felder größer + Chat unten angepinnt (Composer am Boden, Leerzustand füllt) */
.task-modal .prop { min-height: 40px; padding: 7px 0; }

/* ── Arbeitsleiste im Aufgaben-Fenster (v3.76, Defcon-Muster: erledigen · blättern) ──
   Die Werkzeuge stehen LINKS vor den Fakten; die Blätter-Knöpfe blendet ops.js nur ein,
   wenn hinter dem Fenster wirklich eine Liste steht. */
.tm-head .tm-done { gap: 6px; padding-left: 10px; padding-right: 11px; }
.tm-head .tm-done svg { width: 14px; height: 14px; color: var(--ok); }
.tm-head .tm-done.is-done svg { color: var(--text3); }
.tm-sep { width: 1px; height: 18px; background: var(--border); flex: none; }
.tm-head .tm-navbtn { width: 28px; height: 28px; border-radius: 7px; }
.tm-head .tm-navbtn svg { width: 14px; height: 14px; }
.tm-head .tm-navbtn:disabled { opacity: .35; cursor: default; }
.tm-head .tm-navbtn:disabled:hover { background: var(--surface); color: var(--text2); }
.tm-pos { flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Leere Eigenschaften: standardmäßig weg, Aufklapper als Trennstrich mit Aufschrift.
   `[hidden]` allein reicht im Raster nicht — die Zeile bliebe als Grid-Item stehen. */
.prop[hidden] { display: none !important; }
.props-more { display: flex; align-items: center; gap: 12px; margin: 12px 0 2px; }
.props-more::before, .props-more::after { content: ''; flex: 1; height: 1px; background: var(--border2); }
.props-more-btn { background: none; border: 0; font: inherit; font-size: 12px; color: var(--text3);
  cursor: pointer; padding: 3px 8px; border-radius: 7px; }
.props-more-btn:hover { color: var(--text); background: var(--surface2); }
.task-modal .prop-k { font-size: 13px; width: 150px; }
/* Eigenschaften im Aufgaben-Fenster: EINE Spalte (v3.76). Zweispaltig sprang die Lesefolge
   (links/rechts/links), und seit die leeren Felder zugeklappt sind, franste das Raster aus:
   mal stand rechts etwas, mal nicht. Untereinander liest sich die Liste wie ein Datenblatt. */
.task-modal .props-2col { grid-template-columns: 1fr; column-gap: 0; }
.task-modal .props-2col .prop { border-bottom: 1px solid var(--border2); }
.task-modal .props-2col .prop:last-of-type { border-bottom: 0; }
/* Der Fälligkeitswert ist hier ein WERT wie jeder andere — nicht die kleine graue Zelle der
   Liste. Rot/Amber (überfällig/heute) gewinnen weiterhin, sie tragen den Zustand. */
.task-modal .prop .trow-due { font-size: 13px; color: var(--text); }
.task-modal .prop .trow-due.red { color: var(--danger); }
.task-modal .prop .trow-due.amber { color: var(--warn); }
.task-modal .pv-btn, .task-modal .st-btn { font-size: 13px; }
.task-modal .desc-edit { font-size: 14px; min-height: 84px; }
.tm-side-head { padding: 10px 12px; border-bottom: 1px solid var(--border2); flex: none; }
.tm-side .act-panel[data-tpanel="chat"] { padding: 0; }
.tm-side [data-tpanel="chat"] .chat { flex: 1; min-height: 0; height: 100%; }
.tm-side [data-tpanel="chat"] .chat-list { flex: 1; min-height: 0; max-height: none; }
.tm-side .chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
/* Toolbar: Icon-Knöpfe + aufklappbare Suche + Filter-Menü */
.bk-form { display: inline-flex; align-items: center; gap: 4px; }
.bk-ico { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: none;
  color: var(--text3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.bk-ico:hover { color: var(--text); background: var(--surface2); }
.bk-ico svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.bk-search { display: none; }
.bk-search.open { display: inline-flex; }
.bk-search input { width: 180px; height: 30px; font-size: 12.5px; }
.bk-filter { position: relative; display: inline-flex; }
.bk-filter .fdot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--info); pointer-events: none; }
.bk-menu { width: 240px; }
.bk-mrow { padding: 2px 11px 8px; }
.bk-mrow .inp { width: 100%; }
.bk-noscript { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Sidebar-Spaces im ClickUp-Muster (Martins Vorgabe 22.07. nachts): der Farb-Slot
   WIRD on hover zum Klapp-Pfeil (kein Layout-Shift — gleiche 21px), ⋯/+ erscheinen
   rechts erst on hover (ersetzen den Zähler). Touch: Pfeil + Aktionen immer sichtbar. */
.nav-slot { position: relative; width: 21px; height: 21px; flex: none; }
.nav-slot .area-dot { position: absolute; inset: 0; }
.nav-car { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: var(--surface3); border: 1px solid var(--border); border-radius: 6px; color: var(--text);
  cursor: pointer; padding: 0; font-family: inherit; }
.nav-car svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.5; transition: transform .12s; }
.nav-car[aria-expanded="true"] svg { transform: rotate(90deg); }
/* Dot nur verstecken, wenn ein Pfeil ihn ERSETZT (:has) — ein Bereich ohne Listen hat
   keinen Pfeil, sein Farb-Punkt bliebe sonst on hover ein leeres Loch. */
.nav-space:hover .nav-slot:has(.nav-car) .area-dot, .nav-space:focus-within .nav-slot:has(.nav-car) .area-dot { visibility: hidden; }
.nav-space:hover .nav-car, .nav-space:focus-within .nav-car { display: flex; }
.nav-car:hover { color: var(--text); border-color: var(--text3); }
.nav-acts { display: none; margin-left: auto; gap: 2px; }
/* EXAKT Slot-Höhe (21px): die alten 22px machten die Zeile on hover 1px höher — die ganze
   Sidebar wackelte unter dem Mauszeiger (Martins „CSS verbuggt", 21.08., nachgemessen). */
.nav-actbtn { background: none; border: 0; color: var(--text3); cursor: pointer; font-size: 13px;
  width: 21px; height: 21px; border-radius: 6px; padding: 0; font-family: inherit; line-height: 1; }
.nav-actbtn:hover { color: var(--text); background: var(--surface3); }
.nav-space:hover .nav-acts, .nav-space:focus-within .nav-acts { display: inline-flex; }
.nav-space:hover .nav-count { display: none; }
@media (pointer: coarse) {
  .nav-slot:has(.nav-car) .area-dot { visibility: hidden; }
  .nav-car { display: flex; min-width: 21px; min-height: 21px; }
  .nav-acts { display: inline-flex; }
}
.nav-lists { display: flex; flex-direction: column; }
.nav-lists[hidden] { display: none; }   /* display:flex schlägt sonst das hidden-Attribut — DER „Klappen geht nicht"-Bug */
.nav-lico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
/* Icon-Picker im Listen-Modus: nur Symbole, keine Bereichs-Farben */
.sym-panel.icon-only .swatches, .sym-panel.icon-only .ctx-label { display: none; }
/* Sidebar-Self-Service: + Neuer Bereich / + Liste */
.nav-add { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit;
  color: var(--text3); font-size: 12.5px; }
.nav-add:hover { color: var(--text); }
/* Kontextmenüs im CI: Icon je Eintrag, Danger-Zeile */
.st-menu button .cm-ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2;
  margin-right: 8px; vertical-align: -2px; flex: none; }
.st-menu .cm-danger { color: var(--danger); }
.st-menu .cm-danger:hover { background: rgba(239,68,68,.09); }   /* --danger-Familie, nicht PLANK-Akzent */
/* Einstellungen: Bereichs-Umschalter */
.oset-scope { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 16px; }
@media (max-width: 720px) {
  .bk-search, .bk-search.open { display: inline-flex; width: 100%; }   /* mobil: Suche immer sichtbar, vollbreit */
  .bk-search input { width: 100%; }
  .bk-form { flex-wrap: wrap; }
  .lsec { padding: 10px 10px 6px; }
}

/* ═══ Aufgaben-Übersicht Marketing (v3.21, ClickUp-Standard) ═══════════════════
   Sektionen MIT rh-Zelle (nur .row-exp — Drag/Bulk gibt es in mkt nicht): die EINE
   Inhaltskante kommt aus den globalen Ops-Regeln (54px-Geisterzeile, sgrp-Polster). */
/* (Lösch-× in der Todo-Zeile ENTFERNT — Martins Befund 23.07.: fehl am Platz, blähte die
   Zeilenhöhe. Löschen lebt im Status-Popover der Torte, abgetrennt hinter einem Divider.) */

/* ═══ Spalten fluchten GLOBAL (v3.21, Martins Befund 23.07. — gilt für OPS UND MKT) ═══
   Jede Status-Gruppe/Sektion ist eine EIGENE Tabelle — im Auto-Layout rechnet jede ihre
   Spalten nach der Titel-Länge, die Spalten „springen" zwischen den Gruppen. Fix:
   table-layout:fixed + feste Breiten für alle Nicht-Titel-Spalten (der Titel nimmt den
   Rest). Breiten hängen an den th (fixed liest die erste Zeile); der Ops-Spalten-Schalter
   togglet [hidden] → alle Tabellen derselben Seite verlieren dieselben Spalten und bleiben
   deckungsgleich. Nur Desktop — mobil sind es tbl-cards-Karten ohne Spaltenraster. */
@media (min-width: 720.02px) {
  .ttable { table-layout: fixed; width: 100%; }
  .ttable th.th-stc { width: 118px; }                 /* Status-Spalte (Alt-Muster, ops) */
  /* 190/150 statt 150/170: zwei ganze Tag-Namen + „+n" brauchen die Breite, ein Name mit
     Avatar kommt mit 150 aus (Martins Befund 09.09.2026 zu den umgebrochenen Tags). */
  .ttable th[data-col="tags"] { width: 190px; }
  .ttable th[data-col="wer"] { width: 150px; }
  .ttable th[data-col="prio"] { width: 92px; }
  .ttable th[data-col="start"] { width: 108px; }
  .ttable th[data-col="fortschritt"] { width: 128px; }
  .ttable th[data-col="faellig"] { width: 118px; }
  .ttable th.th-who { width: 170px; }                 /* mkt: Zuständig */
  .ttable th.th-due { width: 150px; }                 /* mkt: Termin (Datum · KW) */
  .ttable th.th-plan { width: 190px; }                /* mkt-Shooting: Plan */
  .ttable th.th-act { width: 150px; }                 /* mkt-Shooting: Aktions-Knopf */
}

/* ═══ Spalten wie ClickUp (v3.21 Runde 5): Titel quetscht, Griffe ziehen ═══════════
   ① Titel einzeilig mit Ellipsis — werden Spalten eng, wird der NAME gekürzt, nie das
   Raster verschoben (title-Attribut zeigt den vollen Namen). ② .col-rz = Zieh-Griff am
   th-Rand (app.js): Breite gilt sofort für ALLE .ttable der Seite (globale Fluchtung
   bleibt) und wird als „View" gespeichert (localStorage 'plank-col-widths');
   Doppelklick setzt die Spalte zurück. Nur Desktop/Maus — mobil sind es Karten. */
@media (min-width: 720.02px) {
  .ttable .tname { min-width: 0; }
  .ttable .tname .trow-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
  .ttable thead th { position: relative; }
  .col-rz { position: absolute; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; z-index: 2; }
  .col-rz::after { content: ''; position: absolute; top: 18%; bottom: 18%; right: 3px; width: 2px; border-radius: 2px; background: transparent; }
  .col-rz:hover::after, .col-rz.on::after { background: var(--border2); }
}

/* ── ANFRAGE-COCKPIT (Stufe Neu, COCKPIT_ENABLED) ─────────────────────────────
   Eigenes cp- Präfix (NICHT ck-* — das gehört der Projekt-Checkliste/Aufgaben und
   würde global kollidieren). .cp-row = Kandidaten-/Händler-Zeile (gemeinsamer
   Baustein, auch fürs Radar in Phase 5); .cp-box = Unterbereich; .cp-af = Autofill-
   Feld mit ✦-Herkunfts-Marker (color --info, dezent — verschwindet beim manuellen
   Ändern, app.js "Cockpit"). .cp-facts = Radix-Fakten-Zeile (Bestandskunde, Stufe ②).
   Erklärtexte im Cockpit = class="hint" (globale Einstellung, body.hints-off). */
.cp-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); }
.cp-row + .cp-row { margin-top: 8px; }
.cp-main { min-width: 0; flex: 1; }
.cp-name { font-size: 13.5px; font-weight: 650; }
.cp-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 3px;
  font-size: 11.5px; color: var(--text2); }
.cp-act { flex: none; }
.cp-alt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.cp-box { border: 1px solid var(--border); border-radius: 11px; background: var(--surface2); padding: 12px; }
.cp-box + .cp-box { margin-top: 10px; }
.cp-box .bt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 8px; }
.cp-af { position: relative; }
.cp-af .inp { width: 100%; padding-right: 30px; }
.cp-afico { position: absolute; right: 9px; bottom: 9px; font-size: 12px; color: var(--info);
  opacity: .75; cursor: help; display: none; }
.cp-af.cp-af-on .cp-afico { display: block; }

/* Stufe ② — Bestandskunde: read-only Radix-Fakten (nichts fragen). */
.cp-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.cp-fact { display: flex; flex-direction: column; gap: 2px; min-width: 120px; flex: 1 1 120px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 8px 11px; }
.cp-fk { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text3); }
.cp-fv { font-size: 13.5px; font-weight: 650; }
.cp-fv.muted { color: var(--text3); font-weight: 500; }

/* Schritt ① — Firmen-Steckbrief (zweigeteilt: Recherche oben, Radix-Ableitung unten). */
.cp-sb { margin-bottom: 12px; }
/* Live-Denk-Anzeige während der KI-Recherche (v3.23): dezent — kein Rot, keine Balken, nur eine
   leise, ausgegraute Gedankenzeile mit weichem oberen Fade (liest sich wie ein stiller Strom). */
.cp-sb-live { margin-top: 8px; padding: 7px 9px; border-radius: 8px; background: var(--surface2); }
.cp-sb-think {
  font-size: 11.5px; line-height: 1.55; color: var(--text3); font-style: italic;
  max-height: 3.1em; overflow: hidden; overflow-wrap: anywhere;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0, #000 55%);
}
/* KI-Kontext-Modul (v3.25): eigene Karte oben in der Verlauf-Spalte, nutzt die cp-sb-*-Bausteine mit. */
.kx-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.kx-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.kx-points { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.kx-points li { font-size: 12.5px; line-height: 1.45; color: var(--text2); overflow-wrap: anywhere; }
.kx-pos { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.kx-pline { font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.kx-qty { display: inline-block; min-width: 2.2em; font-weight: 700; color: var(--text); }
.kx-card .cp-sb-radix { background: var(--surface2); }   /* Empfehlungs-Panel abheben (scoped — nicht der Steckbrief) */
/* KI-Kontext-Vorschläge im Angebots-Composer (v3.25): Prefill-Chips für die Radix-Artikelsuche. */
.ofr-sugg { padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface2); }
.ofr-sugg-h { font-size: 11.5px; color: var(--text2); margin-bottom: 8px; }
.ofr-sugg-list { display: flex; flex-direction: column; gap: 6px; }
.ofr-sugg-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text); font-size: 12.5px; cursor: pointer; overflow-wrap: anywhere; }
.ofr-sugg-item:hover { background: var(--surface3); border-color: var(--accent2); }
.ofr-sugg-qty { font-weight: 700; min-width: 2.4em; }
.ofr-sugg-go { margin-left: auto; font-size: 11px; color: var(--text3); white-space: nowrap; }
/* Firmensteckbrief 2-spaltig (Martins Vorgabe 24.07.): Recherche links, Ableitung rechts.
   ≤720px stapelt es wieder (kein H-Scroll). */
/* Cockpit Schritt ① 2-spaltig (Entwurf .ck-grid): Inhalt links, Firmen-Steckbrief 380px rechts;
   der Steckbrief stapelt intern (Recherche oben, Radix-Ableitung darunter). ≤900px untereinander. */
.ck-grid { display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start; }
.ck-grid .cp-sb { margin-bottom: 0; }
@media (max-width: 900px) { .ck-grid { grid-template-columns: 1fr; } }
/* „Vorbereitete Mail"-Box (Verweis/Übergabe wartet unter der Konversation, poppt nicht sofort auf). */
.na-card { border-color: var(--accent2); margin-bottom: 14px; }
.na-body { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.na-ico { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; background: color-mix(in srgb, var(--accent2) 15%, var(--surface)); color: var(--accent2); font-size: 15px; }
.na-txt { flex: 1; min-width: 180px; }
.na-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
/* Ausgegraute Doppelungs-Box (Kunde/Interessent, solange das Anfrage-Cockpit offen ist). */
.cp-dim { opacity: .55; }
/* Projekt-Box zugeklappt via <details> (JS-frei): Summary = Kartenkopf, +/− rein per CSS
   (kein textContent-in-Icon). Klick auf den Kopf klappt Anlegen/Zuweisen auf. */
.cp-projekt-sum { cursor: pointer; list-style: none; display: flex; align-items: center; }
.cp-projekt-sum::-webkit-details-marker { display: none; }
.cp-projekt-sum .cp-projekt-toggle { margin-left: auto; pointer-events: none; font-size: 16px; line-height: 1; }
.cp-projekt-toggle::before { content: '+'; }
details[open] > .cp-projekt-sum .cp-projekt-toggle::before { content: '\2212'; }
.cp-sb-desc { font-size: 13px; line-height: 1.5; }
.cp-sb-sec { margin-top: 10px; }
.cp-sb-sec .cp-fk { display: block; margin-bottom: 5px; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-sb-src { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.cp-sb-src a { color: var(--info); text-decoration: none; }
.cp-sb-src a:hover { text-decoration: underline; }
/* Abgesetztes Panel „Ableitung für Radix ✦" — visuell klar getrennt von der Recherche. */
.cp-sb-radix { margin-top: 12px; padding: 11px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); }
.cp-sb-radix.warn { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
.cp-sb-radix-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 8px; }
.cp-star { color: var(--info); }
.inp.cp-suggested { border-color: var(--info); }

/* ── Zuständigen-Zelle MEHRFACH (v3.21.5, mkt = ops-Standard): gestapelte Avatare +
   „+"-Kreis für leer. Der Trigger ist ein .ck-who-Button (Inline-Picker, mkt.js). ── */
.wer-stack { display: inline-flex; align-items: center; }
.wer-stack .lead-ini { width: 18px; height: 18px; font-size: 9px; box-shadow: 0 0 0 1.5px var(--surface); }
.wer-add { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border-radius: 50%; border: 1px dashed var(--border2); color: var(--text3); font-size: 13px; line-height: 1; }
.ck-who:hover .wer-add { border-color: var(--text3); color: var(--text); }
/* In den Aufgaben-Tabellen + im Detail-Feld ist „+ wer?" IMMER sichtbar (kein Hover-Reveal
   wie in der Checkliste — man soll direkt zuweisen können). */
.ttable .ck-who.unset, .tbl-cards .ck-who.unset, .term-v .ck-who.unset { opacity: .65; }
.ttable .ck-who.unset:hover, .tbl-cards .ck-who.unset:hover, .term-v .ck-who.unset:hover { opacity: 1; }
/* v3.76 — die im Design-System notierte Falle, diesmal im Aufgaben-FENSTER: `.ck-who.unset`
   ist global `opacity: 0` und wird nur in Tabellen bzw. über `.ck-row:hover` sichtbar. Die
   Unteraufgaben-Liste dort ist weder das eine noch das andere (`.tlist .trow`) — das „+" zum
   Zuweisen war unsichtbar und damit faktisch nicht vorhanden (Martins Befund 09.09.2026:
   „konnte nie eine Zuteilung machen"). Dazu: die ganze Zeile hebt es beim Überfahren an. */
.tlist .trow .ck-who.unset, .task-modal .prop .ck-who.unset { opacity: .65; }
.tlist .trow:hover .ck-who.unset, .tlist .trow .ck-who.unset:hover,
.task-modal .prop .ck-who.unset:hover { opacity: 1; }
/* In der Liste war das „+" zwar sichtbar (.65), aber es rührte sich beim Überfahren der Zeile
   nicht — wer es nicht kannte, hielt es für Deko. */
.ttable tr:hover .ck-who.unset, .tbl-cards tr:hover .ck-who.unset { opacity: 1; }
.term-v .ck-who { min-height: 30px; margin-left: -8px; }
.cp-sb-opins { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; }
.cp-sb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
/* Lange Strings (E-Mail/URL/Quellen) dürfen die schmalen Fakten-Boxen mobil nicht sprengen. */
.cp-fv, .cp-sb-src a { overflow-wrap: anywhere; }
/* Board-Filter „Agenten": violetter Punkt ohne Inline-Hex im View. */
.filter-chip.cp-agent .pdot { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; flex: none; }

/* Stufe ② — neuer Interessent: Typ als echte Radio-Segmente + Konditionen. */
.cp-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; background: var(--surface2);
  border: 1px solid var(--border); border-radius: 10px; }
.cp-seg label { display: inline-flex; align-items: center; padding: 5px 12px; font-size: 12px;
  font-weight: 600; color: var(--text2); border-radius: 7px; cursor: pointer; }
.cp-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.cp-seg label:hover { color: var(--text); }
.cp-seg label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.14); }
.cp-seg label:has(input:focus-visible) { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35); }
@media (max-width: 720px) {
  /* Kandidaten-Zeile stapelt mobil: Aktion unter den Text (kein Quetschen). */
  [data-mtabs].mtabs-on .cp-row { flex-wrap: wrap; }
  [data-mtabs].mtabs-on .cp-act { margin-left: auto; }
  [data-mtabs].mtabs-on .cp-seg { width: 100%; }
  /* Selects mit min-width sonst H-Scroll-Gefahr in der doppelt gepolsterten Karte. */
  [data-mtabs].mtabs-on #cockpit select { width: 100%; min-width: 0; max-width: 100%; }
}

/* ============================================================
   KI-Kontext-Drawer (v3.27): rechts einschwebendes Panel, ausgelöst
   über dezente ✨-Buttons an den Kundenmails + Cockpit-Reiter ③.
   JS: kxdrawer.js. Rot bewusst nur auf kleinen Akzenten (Send/Hover);
   Bubbles/Panels neutral. Reuse: .cp-sb-*, .kx-head/-tags/-points/-pos.
   ============================================================ */
/* Dezenter Per-Mail-Trigger im ix-msg-head / summary */
.ix-kx-btn { margin-left: 8px; border: 1px solid var(--border); background: none; color: var(--text3);
  font: inherit; font-size: 10.5px; line-height: 1; padding: 3px 8px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: color .12s, border-color .12s; }
.ix-kx-btn:hover { color: var(--accent2); border-color: var(--accent2); }
.ix-msg-head { flex-wrap: wrap; row-gap: 6px; }   /* Platz für den ✨-Button; Basis-Flex bleibt von oben (Z.953) */
summary .ix-kx-btn { margin-left: 6px; }

/* Reiter ③ als klickbarer kad-step */
/* NICHT die Kurzform `font: inherit` — die setzt font-size/-weight aus .kad-step (11px/700)
   zurück auf den Body-Wert, und der Reiter ③ stand dann größer da als ① und ②.
   Nur die Familie erben (Buttons erben sie sonst nicht), Größe/Gewicht kommen aus .kad-step. */
.kad-step-btn { border: 0; background: none; font-family: inherit; cursor: pointer; padding: 0; }
.kad-step-btn:hover { color: var(--accent2); }

/* Backdrop + Panel */
.kxd-backdrop { position: fixed; inset: 0; z-index: 9990; background: rgba(0,0,0,.42); opacity: 0; transition: opacity .2s; }
.kxd-backdrop.show { opacity: 1; }
.kxd-backdrop[hidden] { display: none; }
.kxd { position: fixed; top: 0; right: 0; z-index: 9991; height: 100%; width: 440px; max-width: 94vw;
  display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -14px 0 40px rgba(0,0,0,.32); transform: translateX(100%);
  transition: transform .26s cubic-bezier(.2,.8,.2,1); }
.kxd.show { transform: translateX(0); }
.kxd[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .kxd, .kxd-backdrop { transition: none; } }

.kxd-head { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border2);
  flex: none; padding-top: calc(13px + env(safe-area-inset-top)); }
.kxd-spark { font-size: 15px; }
.kxd-title { font-size: 14px; font-weight: 600; }
.kxd-x { margin-left: auto; border: 0; background: none; color: var(--text3); font-size: 17px; line-height: 1;
  cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.kxd-x:hover { background: var(--surface2); color: var(--text); }

.kxd-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px; }

/* Mail als Start der Session */
.kxd-mail { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 11px 13px; }
.kxd-mail[hidden] { display: none; }
.kxd-mail-head { display: flex; align-items: baseline; gap: 8px; }
.kxd-mail-who { font-weight: 600; font-size: 12.5px; overflow-wrap: anywhere; }
.kxd-mail-when { margin-left: auto; font-size: 11px; color: var(--text3); white-space: nowrap; }
.kxd-mail-subj { font-size: 12.5px; color: var(--text2); margin-top: 3px; overflow-wrap: anywhere; }
.kxd-mail-snip { font-size: 12px; color: var(--text3); line-height: 1.45; margin-top: 4px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.kxd-mail-open { display: inline-block; margin-top: 6px; color: var(--text3); text-decoration: underline; }
.kxd-mail-open[hidden] { display: none; }

.kxd .cp-sb-radix { background: var(--surface2); }

/* Dubletten-Warnung */
.kx-warn { border: 1px solid rgba(245,158,11,.4); background: rgba(245,158,11,.07); border-radius: 10px; padding: 10px 12px; }
.kx-warn-h { font-size: 12px; font-weight: 700; color: var(--warn); }
.kx-dupes { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.kx-dupe { display: flex; gap: 7px; align-items: baseline; font-size: 12px; text-decoration: none; color: var(--text);
  padding: 4px 6px; border-radius: 7px; overflow-wrap: anywhere; }
.kx-dupe:hover { background: var(--surface3); }

/* Wer ist der Kunde */
.kx-cust { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface2); }
.kx-cust-h { font-size: 12px; font-weight: 700; }
.kx-cust-facts { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 7px; }
.kx-fact { display: flex; flex-direction: column; }
.kx-fact-k { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; }
.kx-fact-v { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Positionen → SKU + Lager */
.kx-match { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 3px 0 0 12px; font-size: 12px; }
.kx-match-ico { color: var(--text3); }
.kx-match-none { margin: 2px 0 0 12px; }
.kx-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }

/* Antwortentwurf-Ausgabe */
.kxd-reply { border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; background: var(--surface2); }
.kxd-reply[hidden] { display: none; }
.kxd-reply-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.55; margin-top: 8px;
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.kxd-reply-text[hidden] { display: none; }
.kxd-reply-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.kxd-reply-acts[hidden] { display: none; }

/* Chat unten */
.kxd-chat { border-top: 1px solid var(--border2); padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  flex: none; display: flex; flex-direction: column; gap: 8px; background: var(--surface); }
.kxd-chat-log { display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow-y: auto; }
.kxd-chat-log:empty { display: none; }
/* Dieselbe Regel wie im Brain-Chat (v3.50): die KI-Antwort ist Lesetext ohne Rahmen, nur die
   eigene Frage bleibt eine dezente Fläche rechts. Im 440-px-Panel ist das doppelt richtig —
   eine Blase mit Rahmen ließ vom Text kaum Breite übrig. */
.kxc-msg { font-size: 14.5px; line-height: 1.65; white-space: pre-wrap; word-break: break-word; }
.kxc-user { align-self: flex-end; max-width: 88%; margin: 12px 0 2px; padding: 8px 12px;
  border-radius: 14px; background: var(--surface3); }
.kxc-ai { align-self: stretch; margin: 4px 0 6px; }
.kxc-ai.kxc-think { color: var(--text3); font-style: italic; }
.kxd-chat-form { display: flex; align-items: flex-end; gap: 8px; }
.kxd-chat-inp { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2);
  color: var(--text); font: inherit; font-size: 14px; padding: 10px 12px; max-height: 160px; }
.kxd-chat-inp:focus { outline: none; border-color: var(--accent2); }
.kxd-chat-send { flex: none; width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--accent);
  color: #fff; font-size: 16px; cursor: pointer; }
.kxd-chat-send:disabled { opacity: .5; cursor: default; }
.kxd-chat-hint { margin: 0; }

/* Mobil: Drawer vollflächig */
@media (max-width: 720px) {
  .kxd { width: 100%; max-width: 100%; border-left: 0; }
  .kxd-chat-log { max-height: 28vh; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Einkauf (/ops/mw/einkauf) — Peters Morgen-Seite.
   Gerüst sind die vorhandenen Bausteine (.kpi-grid, .card, .cols, .tbl.tbl-cards);
   neu ist nur, was IN den Karten steckt. Nur var(--token); Rot/Amber ausschließlich
   als Semantik, PLANK-Rot genau einmal (laufende Kalenderwoche).
   ══════════════════════════════════════════════════════════════════════════ */

/* Kennzahl-Kachel als Sprungziel */
a.kpi { display: block; text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--text3); }

/* Handlungsliste */
.todo-row { display: flex; align-items: flex-start; gap: 11px; padding: 11px 16px;
            border-bottom: 1px solid var(--border2); }
.todo-row:last-child { border-bottom: 0; }
.todo-txt { min-width: 0; flex: 1 1 auto; }
.todo-row .sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; margin-top: 6px;
                  background: var(--text3); }
.todo-row .sdot.warn { background: var(--warn); }
.todo-row .sdot.bad  { background: var(--danger); }
.todo-t { font-size: 13.5px; line-height: 1.45; }
.todo-s { font-size: 11.5px; color: var(--text3); margin-top: 2px; }
.todo-v { margin-left: auto; padding-left: 14px; font-size: 12.5px; color: var(--text2);
          white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Wareneingang je Kalenderwoche — bis 12 Bestellungen ist JEDES Kästchen eine
   Bestellung (zählbar), darüber vier Zustands-Segmente mit der Anzahl darin. */
.tchart { display: flex; align-items: flex-end; gap: 9px; position: relative; }
.tchart::after { content: ''; position: absolute; left: 0; right: 0; bottom: 31px; height: 1px;
                 background: var(--border); }
.tcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center;
        padding: 0 2px 2px; border-radius: 8px; text-decoration: none; color: inherit; }
.tcol:hover { background: var(--surface2); }
.tcol.sep { margin-right: 15px; }
.tval { display: block; font-size: 10.5px; color: var(--text2); margin-bottom: 6px;
        min-height: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tstack { position: relative; width: 100%; max-width: 46px; height: 132px; display: flex;
          flex-direction: column; justify-content: flex-end; gap: 2px; margin: 0 auto; }
.tseg { display: block; border-radius: 3px; min-height: 5px; background: var(--text3); }
.tseg.late { background: var(--warn); }
.tseg.over { background: var(--danger); }
.tseg.none { background: var(--surface3); box-shadow: inset 0 0 0 1px var(--border); }
.tcnt { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; font-size: 10px;
        font-weight: 700; color: var(--surface); font-variant-numeric: tabular-nums; }
.tkw { display: block; font-size: 10.5px; color: var(--text3); margin-top: 9px; height: 20px;
       line-height: 16px; padding: 2px 8px; border-radius: 10px; white-space: nowrap;
       font-variant-numeric: tabular-nums; }
.tcol.now .tkw { background: var(--accent); color: #fff; font-weight: 700; }
.tcol.past .tkw { color: var(--danger); font-weight: 600; }
.ckeys { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.ckey { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); }
.ckey i { width: 8px; height: 8px; border-radius: 2px; background: var(--text3); display: block; }
.ckey i.late { background: var(--warn); } .ckey i.over { background: var(--danger); }
.ckey i.none { background: var(--surface3); box-shadow: inset 0 0 0 1px var(--border); }

/* Einkaufsvolumen: die FLÄCHE ist der Anteil — Klumpenrisiko braucht keine Erklärung. */
.tmap { display: flex; flex-direction: column; gap: 4px; height: 214px; }
.tmap-row { display: flex; gap: 4px; min-height: 0; }
.tcell { position: relative; border-radius: 9px; border: 1px solid var(--border);
         background: var(--surface3); padding: 10px 12px; min-width: 0; overflow: hidden;
         display: flex; flex-direction: column; justify-content: flex-end;
         text-decoration: none; color: inherit; }
.tcell.s4 { background: color-mix(in srgb, var(--text) 13%, var(--surface3)); }
.tcell.s3 { background: color-mix(in srgb, var(--text) 8%,  var(--surface3)); }
.tcell.s2 { background: color-mix(in srgb, var(--text) 4%,  var(--surface3)); }
.tcell:hover { border-color: var(--text3); }
.tcell .tp { font-size: 20px; font-weight: 600; letter-spacing: -.5px; line-height: 1.1;
             font-variant-numeric: tabular-nums; }
.tcell .tps { font-size: 12px; font-weight: 500; }
.tcell .tn { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.tcell .ts { font-size: 10.5px; color: var(--text3); margin-top: 2px; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.tcell.small { padding: 7px 9px; }
.tcell.small .tp { font-size: 14px; } .tcell.small .tn { font-size: 11px; }
.tcell.small .ts { display: none; }

/* Zahl in der Tabellenzelle: der Spaltenkopf sagt WAS sie ist, deshalb reichen
   zwei Stufen — Zahl laut, Einordnung leise. */
.zbig { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.02em;
        font-variant-numeric: tabular-nums; color: var(--text); }
.zbig.is-hot { color: var(--danger); }
.zsub { display: block; font-size: 10.5px; color: var(--text3); margin-top: 1px;
        font-variant-numeric: tabular-nums; }
.knp tbody tr.is-bad .zbig  { color: var(--danger); }
.knp tbody tr.is-soon .zbig { color: var(--warn); }

/* Gruppenzeile = die drei Körbe nach Handlungsbedarf */
.tbl tbody tr.grp > td { padding: 14px 16px 6px; border-bottom: 1px solid var(--border2);
                         background: none; cursor: default; }
.tbl tbody tr.grp:hover > td { background: none; }
.grp-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
         color: var(--text3); }
.grp-n { font-size: 10.5px; font-weight: 700; color: var(--text3); margin-left: 8px;
         font-variant-numeric: tabular-nums; }
.grp.g-order .grp-t, .grp.g-order .grp-n { color: var(--danger); }
.grp.g-chase .grp-t, .grp.g-chase .grp-n { color: var(--warn); }

/* Fortsetzung: eigene Zeile mit Zeilenhöhe — eine Fußnote übersieht, wer nicht
   weiß, dass sie da ist. Die Kürzung steht zusätzlich im Karten- und Gruppenkopf. */
.tbl tbody tr.mehr-row > td { padding: 0; border-bottom: 0; background: var(--surface2);
                              border-top: 1px solid var(--border); cursor: default; }
.tbl tbody tr.mehr-row:hover > td { background: var(--surface2); }
.mehr { display: flex; align-items: center; gap: 6px; width: 100%; padding: 11px 16px;
        font-size: 12.5px; font-weight: 600; color: var(--text2); text-decoration: none; }
.mehr:hover { color: var(--accent); background: var(--surface3); }
.mehr svg { width: 14px; height: 14px; flex: none; }

/* Preisverlauf */
.sprk { width: 66px; height: 20px; display: block; overflow: visible; }
.sprk polyline { fill: none; stroke: var(--text3); stroke-width: 1.4; stroke-linejoin: round; }

/* Termin neu setzen — der einzige Radix-Write der Seite, deshalb als eigener
   Block mit Rahmen: sichtbar verlässt hier etwas den Hub. */
/* .tset IN einer Tabellenzelle (Handlungsliste): zu = nur der Knopf, kein leerer Rahmen;
   offen = Formular als abgesetzte Karte unter dem Knopf, rechtsbündig, ohne die Zeile
   aufzublasen (Martins Befund 21.08.: „Termin neu setzen … hin und her"). */
td .tset { border: 0; margin: 0; position: relative; display: inline-block; }
td .tset > summary { padding: 0; }
td .tset[open] > summary { border-bottom: 0; }
td .tset[open] > .tset-b { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 300px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); text-align: left; }
.tset { border: 1px solid var(--border); border-radius: 10px; margin: 10px 0 2px;
        background: var(--surface2); }
.tset > summary { list-style: none; padding: 8px 10px; cursor: pointer; }
.tset > summary::-webkit-details-marker { display: none; }
.tset[open] > summary { border-bottom: 1px solid var(--border); }
.tset-b { padding: 12px; }
.tset-q { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.tset-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tset-row label { font-size: 11.5px; color: var(--text3); }
.tset-row .inp { width: 160px; }

@media (max-width: 720px) {
  .tchart { gap: 4px; } .tstack { height: 96px; } .tval { font-size: 9px; }
  .tkw { padding: 2px 5px; font-size: 9.5px; } .tcol.sep { margin-right: 8px; }
  .tmap { height: auto; } .tmap-row { flex-wrap: wrap; }
  .tcell { flex: 1 1 46% !important; min-height: 80px; }
}

/* ============================================================
   Marketing-Welt v3.38 — Content-Pipelines + neue Start-Leiste
   (Martins Neu-Aufsatz 20.08.2026)

   Leitgedanke: die Kennzahlen sind BEIWERK, die Arbeit ist der Fokus.
   Deshalb keine Kachel-Boxen mehr für Zahlen, sondern eine schmale
   Leiste; die Verteilung der laufenden Produktionen liest man als EIN
   Band (die Fläche IST der Anteil, wie die Treemap der Einkaufsseite).
   ============================================================ */

/* ---- Kennzahlen-Leiste (Start) ---- */
.mstrip { display: flex; align-items: center; justify-content: space-between; gap: 20px;
          flex-wrap: wrap; padding: 2px 2px 14px; border-bottom: 1px solid var(--border2); }
.mstat-row { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.page-head-row > .mstat-row { margin-left: auto; }
.mstat { display: flex; flex-direction: column; gap: 1px; padding: 0 18px; color: inherit;
         position: relative; min-width: 88px; }
.mstat:first-child { padding-left: 2px; }
/* Neutrale Haarlinie zwischen den Zahlen — KEIN Status-Akzent (CI: keine farbigen Balken). */
.mstat + .mstat::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px;
                          width: 1px; background: var(--border2); }
.mstat-n { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15;
           font-variant-numeric: tabular-nums; color: var(--text); }
.mstat-n.is-warn { color: var(--danger); }
.mstat-l { font-size: 10.5px; color: var(--text3); white-space: nowrap; }
.mstat:hover .mstat-l { color: var(--text2); }

/* Zahl in einer Tabellenzelle, die Kontext trägt statt zu rufen — leiser als .zbig. */
.zmid { display: block; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
        font-variant-numeric: tabular-nums; }

.mmix { display: flex; flex-direction: column; gap: 6px; min-width: 220px; flex: 0 1 340px; }
.mbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface3); }
.mbar-seg { display: block; height: 100%; }
.mbar-seg + .mbar-seg { box-shadow: inset 1px 0 0 var(--surface); }
.mlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.mleg { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text3); }
.mleg i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mleg b { color: var(--text2); font-weight: 600; }

/* ---- Die vier Wege (Content-Einstieg) ----
   Nur der Name. Die Kachel IST der Knopf: Überfahren tönt sie im Akzent an, Anklicken
   färbt sie und legt Titel + „Produktion starten" frei (Martins Vorgabe 20.08.2026).
   Der Akzent bleibt klein und flächig-zart — kein roter Balken, kein Glühen. */
/* Kompakte Kacheln nebeneinander, LINKSBÜNDIG — kein Raster, das vier Einstiege über die
   volle Breite zieht und sie dabei aufbläht (Martins Befund 21.08.2026). Die Höhe folgt dem
   Inhalt: zu ist die Kachel eine Zeile hoch, offen wächst sie um Feld und Knopf. */
.pipe-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.pipe-card { flex: 0 1 208px; background: var(--surface); border: 1px solid var(--border);
             border-radius: 12px; padding: 11px 13px 12px; display: flex; flex-direction: column; gap: 10px;
             transition: background .12s, border-color .12s; }
.pipe-card[data-pipe-open] { cursor: pointer; }
.pipe-card[data-pipe-open]:hover { background: rgba(var(--accent-rgb), .06); border-color: rgba(var(--accent-rgb), .35); }
.pipe-card.is-open { background: rgba(var(--accent-rgb), .09); border-color: rgba(var(--accent-rgb), .5); cursor: default; }
.pipe-card:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
/* Name groß, Gattung leise darunter — zwei Stufen statt einer nackten Zeile. */
.pipe-name { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pipe-word { font-size: 15.5px; font-weight: 650; letter-spacing: -.25px; line-height: 1.15; }
.pipe-kind { font-size: 8.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
             color: var(--text3); }
.pipe-card.is-open .pipe-word { color: var(--accent2); }
.pipe-card.is-open .pipe-kind { color: rgba(var(--accent-rgb), .75); }
.pipe-card.is-soon { background: var(--surface2); border-style: dashed; }
.pipe-card.is-soon .pipe-word { color: var(--text3); font-variant-numeric: tabular-nums; }
/* Die Anlage-Felder stapeln in der Kachel (nebeneinander wäre bei 230px Breite unlesbar). */
/* Zu bleibt vom Formular NICHTS übrig — sonst wäre die Location-Kachel um die Lücke höher
   als die anderen. Nur mit JS (.js), damit der No-JS-Weg die Felder weiter zeigt. */
.pipe-card:not(.is-open) .pipe-start.js { display: none; }
.pipe-start { padding: 0 !important; }
.pipe-start .g-fields { flex-direction: column; align-items: stretch; gap: 8px; }
.pipe-start .inp { font-size: 12.5px; }
/* Der Startknopf bleibt kompakt und rechts — ein vollbreiter roter Balken ist CI-Tabu. */
.pipe-start .btn { align-self: flex-end; }

/* ── Rahmen um die Wege-Kacheln (Martin 25.08.2026: „oben nochmals einrahmen, dass es nicht so
   lose wirkt"). Ruhige Fläche wie .lsec, keine zweite Kachel-Optik — die Kacheln bleiben die
   Knöpfe. Darunter EINE Tabelle ohne Kasten, Spalte „Pipeline" statt Tag im Titel. ── */
.pipe-frame { background: var(--surface2); border: 1px solid var(--border); border-radius: 14px;
              padding: 12px 14px 14px; margin: 0 0 18px; }
.pipe-frame .pipe-card.is-soon { background: var(--surface); }
.pipe-table { margin: 0; }

/* ---- Eine laufende Produktion: die Schritt-Kette ---- */
.psteps { list-style: none; margin: 16px 0 0; padding: 0;
          background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pstep + .pstep { border-top: 1px solid var(--border2); }
.pstep.is-cur { background: var(--surface2); }
.pstep-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; }
/* Der aktuelle Schritt bekommt den EINZIGEN Akzent der Seite: klein und rund. */
.pstep-no { display: inline-flex; align-items: center; justify-content: center; flex: none;
            width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--border);
            font-size: 10.5px; font-weight: 700; color: var(--text3);
            font-variant-numeric: tabular-nums; background: var(--surface); }
.pstep.is-cur .pstep-no { border-color: rgba(var(--accent-rgb), .55); color: var(--accent2); }
.pstep.is-done .pstep-no { border-color: var(--border2); color: var(--text3); opacity: .5; }
.pstep-t { font-size: 13.5px; font-weight: 550; min-width: 0; overflow-wrap: anywhere; }
.pstep.is-done .pstep-t { color: var(--text3); text-decoration: line-through; }
.pstep-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.pstep-n { font-size: 10.5px; color: var(--text3); flex: none; margin-left: auto; }
/* Nur das ERSTE rechtsbündige Element trägt auto — sonst verteilt Flexbox den Leerraum
   auf ALLE auto-Margins und die Zähler treiben auseinander (Review-Befund 24.08.2026). */
.pstep-n ~ .pstep-n, .pstep-n ~ .pstep-tools { margin-left: 0; }
/* In der Kette gibt es keinen Zeilen-Hover wie in Tabellen — Werkzeuge bleiben sichtbar,
   sonst wären Zuweisen und Aufklappen unauffindbar (die .ck-who/.row-exp-Grundregeln
   blenden sie für Tabellenzeilen auf opacity:0). */
.pstep-tools .row-exp, .term-v .ck-who.unset { opacity: 1; }
/* Ungesetztes (+ Zuständig, + Termin) taucht erst beim Überfahren der Zeile auf; gesetzte
   Werte stehen immer da. Acht Zeilen mit je zwei leeren Knöpfen sind sonst reiner Lärm. */
.pstep-tools .ck-who.unset, .pstep-tools .pv-btn.pv-add { opacity: 0; }
.pstep:hover .pstep-tools .ck-who.unset, .pstep:hover .pstep-tools .pv-btn.pv-add,
.pstep-tools .ck-who.unset:focus-visible, .pstep-tools .pv-btn.pv-add:focus-visible { opacity: 1; }
.pstep-head { cursor: pointer; }
.pstep-head input, .pstep-head button { cursor: pointer; }
.pstep-ck { flex: none; }

.pstep-termin { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                margin: 0 14px 11px 59px; padding: 8px 11px; background: var(--surface3);
                border: 1px solid var(--border2); border-radius: 10px; }
.pstep-termin .term-k { margin: 0; }
.pterm-inp { max-width: 210px; font-size: 12.5px; }

.pstep-body { padding: 0 14px 12px 59px; }
.pstep-body[hidden] { display: none; }
.pstep-note { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border2); }
.pnote { font-size: 12.5px; min-height: 42px; }
.pstep-note.is-empty { border-top: 0; padding-top: 2px; margin-top: 2px; }
.pstep-note.is-empty .pnote { min-height: 0; color: var(--text3); }
.pstep-note.is-empty .pnote:focus { min-height: 42px; color: var(--text); }

/* ── Aufbau der Produktionsseite (v3.40, wie das Aufgaben-Modal): links Beschreibung +
   Schritte | Ablage (Untertabs), rechts EIN Panel mit Reitern Chat | Verlauf. Desktop
   zwei Spalten, die rechte klebt beim Scrollen; ≤980px gestapelt (Chat unter den Schritten). ── */
.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.pl-cols > * { min-width: 0; }
.pl-tabs { margin: 2px 0 14px; }
.term-v .pv-btn.is-late { color: var(--danger); }
/* Der Erledigt-Haken der Kette: .ck-row .ck-box greift hier nicht (kein .ck-row) — sonst
   bliebe der native ~13px-Haken, auch am iPhone. */
.pstep-ck { width: 16px; height: 16px; accent-color: var(--ok); }
@media (pointer: coarse) { .pstep-ck { width: 22px; height: 22px; } }
/* Zähler im Segment-Reiter (Produktionsseite, Bilder-Typ, Chat|Verlauf). */
.seg .seg-n { font-size: 10.5px; font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }
.seg .seg-btn.active .seg-n { color: var(--text2); }
.pl-desc .desc-edit { min-height: 64px; }
.pl-main .psteps { margin-top: 6px; }
.pl-side { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
/* Chat unten ANGEPINNT (ClickUp-Standard Regel 12): Panel wächst, nur die Liste scrollt.
   .act-panel bringt global max-height:46vh mit — hier explizit aufheben. */
.pl-side .act-panel { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.pl-side .act-panel[data-ppanel="chat"] { padding: 0; overflow: hidden; }
.pl-side [data-ppanel="chat"] .parts { padding: 10px 12px 0; }
.pl-side [data-ppanel="chat"] .chat { flex: 1; min-height: 0; }
.pl-side [data-ppanel="chat"] .chat-list { flex: 1; min-height: 160px; max-height: 56vh; }
.pl-side .chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; }
.pl-empty { padding: 26px 14px; text-align: center; }
/* Kleben NUR Desktop+Maus (Gate wie .mkt-side): der Scroller ist .content (100vh − 56px
   Topbar), nicht das Fenster — deshalb 84px Abzug, sonst liegt der Composer unter der Kante. */
@media (min-width: 980.02px) and (pointer: fine) {
  .pl-side { position: sticky; top: 14px; max-height: calc(100vh - 84px); }
  .pl-side [data-ppanel="chat"] .chat-list { max-height: none; }
}
@media (max-width: 980px) {
  .pl-cols { grid-template-columns: 1fr; }
  /* Diese zwei Regeln standen durch eine überzählige „}" nach .pl-cols AUSSERHALB des
     Medienblocks — damit hat „position: static" die Sticky-Regel darüber auch am Desktop
     überschrieben (die Chat-Spalte klebte nirgends mehr). Wieder eingerückt. */
  .pl-side { position: static; max-height: none; }
  .pl-side [data-ppanel="chat"] .chat-list { max-height: 46vh; }
}

/* ── Ablage-Zone (Content-Strecke): die Dateien der Produktion, seit v3.40 im Untertab
   „Ablage" (das Gate hängt weiter am Schritt „Selektion & Bearbeitung"). Kachel-Raster mit
   Drag-&-Drop-Feld; der Hochladen-Knopf existiert nur ohne JS (echte Form als Fallback). ── */
.passets { margin: 2px 0 12px; }
.pa-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-tile { position: relative; margin: 0; width: 92px; }
.pa-tile img { display: block; width: 92px; height: 92px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); }
.pa-vid { display: flex; align-items: center; justify-content: center; width: 92px; height: 92px;
  border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); color: var(--text3); }
.pa-vid svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.pa-tile figcaption { margin-top: 3px; max-width: 92px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: var(--text3); }
.pa-del { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text2); cursor: pointer;
  line-height: 1; font-size: 13px; opacity: 0; }
.pa-tile:hover .pa-del, .pa-del:focus-visible { opacity: 1; }
/* pixx.io-Marke unten links auf der Kachel: „…" = unterwegs, „!" = Fehler (Titel erklärt). */
.pa-sync { position: absolute; left: 4px; bottom: 26px; width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border2); color: var(--text3);
  font-size: 10px; font-weight: 700; line-height: 1; cursor: default; }
.pa-sync.is-err { color: var(--warn); border-color: currentColor; }
.pa-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 92px; height: 92px; border: 1.5px dashed var(--border); border-radius: 8px; cursor: pointer;
  color: var(--text3); font-size: 10.5px; text-align: center; padding: 6px; }
.pa-drop svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.pa-drop:hover, .passets.is-over .pa-drop { border-color: rgba(var(--accent-rgb), .55); color: var(--accent2); }
.pa-drop input { display: none; }
.passets.js .pa-send { display: none; }
.passets.is-busy .pa-grid { opacity: .55; pointer-events: none; }
.pbridge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 12px; }
.pa-send { margin-top: 8px; }
/* Im Ablage-Reiter hat das Raster die ganze Spalte — größere Kacheln, damit man Bilder
   wirklich beurteilen kann (im Schritt-Körper waren 92 px ein Zähler mit Vorschau). */
.pl-ablage .pa-tile, .pl-ablage .pa-tile img, .pl-ablage .pa-vid, .pl-ablage .pa-drop { width: 132px; }
.pl-ablage .pa-tile img, .pl-ablage .pa-vid, .pl-ablage .pa-drop { height: 132px; }
.pl-ablage .pa-tile figcaption { max-width: 132px; }
.pl-ablage .pa-grid { gap: 10px; }
/* Touch: der ×-Knopf ist immer sichtbar und größer — 20 px am Kachel-Eck trifft kein Daumen.
   Die pixx.io-Marke wird tippbar (Toast statt Tooltip), also ebenfalls größer. */
@media (pointer: coarse) {
  .pa-del { opacity: 1; width: 26px; height: 26px; top: -8px; right: -8px; font-size: 15px; }
  .pa-sync { width: 22px; height: 22px; font-size: 12px; }
}

/* ── Zuschnitt-Editor (Content-Strecke): Popup mit Format-Reitern + Rahmen. ── */
.asset-crop { position: absolute; left: 6px; top: 6px; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
  background: rgba(0, 0, 0, .45); color: #fff; opacity: 0; cursor: pointer; }
.asset-crop svg { width: 13px; height: 13px; }
.asset-tile:hover .asset-crop, .asset-crop:focus-visible { opacity: 1; }
@media (pointer: coarse) { .asset-crop { opacity: 1; width: 26px; height: 26px; } }
@media (pointer: coarse) { .asset-del { width: 26px; height: 26px; } }
.cropov { position: fixed; inset: 0; z-index: 240; background: rgba(0, 0, 0, .55);
  display: flex; align-items: center; justify-content: center; padding: 16px; }
/* Das Job-Dock weicht hinter den Editor (dieselbe Regel wie bei .modal.open). */
body:has(.cropov) .jobdock { z-index: 230; }
.cropdlg { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35); padding: 12px; max-width: min(92vw, 720px);
  display: flex; flex-direction: column; gap: 10px; }
.crop-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crop-head .seg-btn.has-crop::after { content: '●'; font-size: 7px; margin-left: 4px;
  vertical-align: 2px; color: var(--accent2); }
.crop-stage { position: relative; overflow: hidden; align-self: center; line-height: 0;
  touch-action: none; }
.crop-stage img { max-width: min(86vw, 660px); max-height: 62vh; display: block;
  user-select: none; -webkit-user-drag: none; }
.crop-box { position: absolute; border: 2px solid #fff; outline: 1px dashed rgba(0, 0, 0, .5);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45); cursor: move; }
.crop-foot { display: flex; align-items: center; gap: 10px; }
.crop-size { flex: 1 1 auto; min-width: 0; }
@media (max-width: 720px) { .cropdlg { max-width: 96vw; } .crop-stage img { max-width: 90vw; max-height: 52vh; } }
@media (pointer: coarse) { .crop-size { min-height: 34px; } }

/* ── Assets Management (Marketing, v3.41): „Bilder" = alle Dateien flach, „Ordner" =
   Baum + „Ohne Ordner" + Sammlungen, Detailseite je Datei. ── */
/* Suche = Standard-Suchzeile (.search.li-search), Sortierung = filter-chip im Kopf;
   darunter der Typ als Segment-Links. */
.px-typ { margin: 0 0 10px; }
.px-count { margin: 0 0 10px 2px; }
.px-count a { color: var(--accent2); }
.px-tile { position: relative; }
.px-sub { display: block; font-size: 10.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-badge { position: absolute; top: 6px; left: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; }
.px-grid-sm { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.px-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 6px; }
/* Die Datei-Seite /mkt/bilder/{id} ist am 26.08.2026 neu gebaut (Block „Datei-Seite" unten,
   .pg-min-bild): Bühne links, EINE Leiste rechts, Filmstreifen unten. .px-detail/.px-preview/
   .px-facts/.px-stars/.px-kw* hatten dort ihren einzigen Nutzer und sind entfallen. */
/* Mobil mit Sektions-Kapsel (Ordner | Inhalt): die aktive Sektion nimmt die Seite, kein
   40vh-Deckel mehr auf dem Baum. */
@media (max-width: 720px) {
  [data-mtabs].mtabs-on .px-nav { max-height: none; overflow: visible; }
}
/* Ordner-Modul: Baum mit Zählern, „Ohne Ordner" gestrichelt, Sammlungen als zweiter Abschnitt. */
.px-nav-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text3); padding: 4px 10px 6px; }
.pxd-n { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--text3); font-variant-numeric: tabular-nums; flex: none; padding-left: 6px; }
.pxd.is-on .pxd-n { color: var(--text2); }
.px-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.px-crumbs a { color: inherit; }
.px-head-actions { display: flex; gap: 8px; align-items: center; flex: none; }
.px-newdir { margin: 0 0 10px; max-width: 460px; }
.px-newdir[hidden] { display: none; }
.px-newdir-row { display: flex; gap: 8px; align-items: center; }
.px-newdir-row .inp { flex: 1; }
.px-up { margin: 0 0 12px; }
.px-up-drop { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px dashed var(--border);
  border-radius: 10px; color: var(--text2); font-size: 12.5px; cursor: pointer; }
.px-up-drop svg { width: 18px; height: 18px; flex: none; color: var(--text3); }
.px-up-drop input { display: none; }
.px-up-drop:hover, .px-up.is-over .px-up-drop { border-color: rgba(var(--accent-rgb), .55); color: var(--accent2); }
.px-up.js .px-up-send { display: none; }
.px-up-send { margin-top: 8px; }
.px-up.is-busy { opacity: .55; pointer-events: none; }

/* Verwalten (v3.42): Auswahl-Haken auf der Kachel, Bulk-Leiste unten, editierbare Fakten. */
.px-tile-link { display: block; text-decoration: none; color: inherit; min-width: 0; }
/* Auswahl = --info wie .row-sel/.drop-ok (Rot ist Storno/Überfällig, nie „ausgewählt");
   das Kästchen über Tokens, damit es auf .px-noimg im Dark-Theme nicht weiß leuchtet. */
.px-sel { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
  opacity: 0; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.px-sel[hidden] { display: none; }
/* Auswahl-Akzent = PLANK-Rot (Hub-Regel 26.08.2026) — Blau bleibt Information/Termin. */
.px-sel input { width: 15px; height: 15px; margin: 0; cursor: pointer; accent-color: var(--accent); }
.px-tile:hover .px-sel, .px-tile.is-sel .px-sel, .px-sel:focus-within { opacity: 1; }
.px-tile.is-sel img, .px-tile.is-sel .px-noimg { outline: 2px solid var(--accent); outline-offset: -2px; }
.px-tile-rm { position: absolute; top: -6px; left: -6px; margin: 0; }
.px-tile-rm .pa-del { position: static; }
.px-tile:hover .px-tile-rm .pa-del { opacity: 1; }
.px-tile:has(.px-tile-rm) .px-badge { left: 22px; }
@media (pointer: coarse) { .px-tile-rm .pa-del { opacity: 1; } }
/* Auswahl-Leiste (25.08.2026, Martins Vorgabe: unten, im Hub-Stil wie #bulkBar der Ops-Welt —
   nicht 1:1 pixx.io): schwebende Pille am unteren Rand, × + Zähler + „Alle" links, rechts die
   Aktionen als Icon-Knöpfe; jedes Icon öffnet sein Kontextmenü NACH OBEN. */
.px-bulk { position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 230;
  display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 8px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
  max-width: min(96vw, 720px); }
.px-bulk[hidden] { display: none; }
.px-bulk-n { font-size: 12.5px; font-weight: 600; white-space: nowrap; padding: 0 4px; }
.px-bulk-all { background: none; border: 0; color: var(--text2); font-size: 11.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; cursor: pointer; padding: 8px 8px; border-radius: 999px; font-family: inherit; }
.px-bulk-all:hover { background: var(--surface2); color: var(--text); }
.px-bulk-acts { display: flex; align-items: center; gap: 2px; margin-left: 4px; padding-left: 6px; border-left: 1px solid var(--border2); }
.px-bulk-menu { max-height: min(60vh, 520px); overflow-y: auto; min-width: 260px; }
/* Mobil über der Kapsel (wie #bulkBar); der FAB weicht — Auswahl-Modus ersetzt die Primäraktion. */
@media (max-width: 720px) {
  .px-bulk { bottom: calc(env(safe-area-inset-bottom) + 84px); gap: 4px; }
  .px-bulk-all { display: none; }
  body.has-bulk .mnav-fab { display: none; }
  body.has-bulk:has(.mnav:not([hidden])) .content { padding-bottom: 180px; }
}

/* Masonry (pixx.io-Vorbild): Kacheln im ECHTEN Format (Hoch/Quer/Panorama), Spalten
   statt Quadrat-Raster. Das Verhältnis kommt als aspect-ratio aus dem Index — kein Springen
   beim Laden. Lesereihenfolge läuft spaltenweise, wie in pixx.io. */
/* Spezifität .px-grid.px-masonry: die Basisregel .px-grid { display:grid } steht später im Blatt. */
.px-grid.px-masonry { display: block; columns: 5 220px; column-gap: 10px; }
.px-grid.px-masonry .px-tile { break-inside: avoid; margin: 0 0 10px; display: block; }
.px-grid.px-masonry .px-tile img, .px-grid.px-masonry .px-noimg { aspect-ratio: auto; height: auto; }
.px-grid.px-masonry .px-noimg { min-height: 90px; }
/* Format-Marke oben links (das Kästchen sitzt oben rechts) — relativ zur Kachel robust,
   egal wie viele Beschriftungszeilen darunter stehen. */
.px-grid.px-masonry .px-badge { top: 6px; left: 6px; bottom: auto; }
.px-grid.px-masonry .px-tile:has(.px-tile-rm) .px-badge { left: 22px; }
/* Ohne Beschriftung trägt die Kachel nur noch das Bild — der Rahmen sitzt direkt am Bild. */
.px-grid.px-masonry .px-tile-link { line-height: 0; }
.px-grid.px-masonry .px-badge { line-height: 1.4; }
@media (max-width: 720px) { .px-grid.px-masonry { columns: 2 140px; column-gap: 8px; } .px-grid.px-masonry .px-tile { margin-bottom: 8px; } }

.px-inline { font-size: 12.5px; min-height: 30px; padding: 3px 8px; max-width: 100%; }
.pv-edit { display: inline-block; min-width: 40px; padding: 2px 6px; margin-left: -6px; border-radius: 6px; cursor: text; }
.pv-edit:hover { background: var(--surface2); }
.pv-edit:focus { outline: 1px solid var(--border); background: var(--surface2); }
.pv-edit.is-empty::before { content: '+ Betreff'; color: var(--text3); }
.pv-edit.is-empty:focus::before { content: ''; }
.px-nav-label-row { display: flex; align-items: center; justify-content: space-between; }
.px-nav-add { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text2); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.px-nav-add:hover { background: var(--surface2); color: var(--text); }
.px-newcoll { margin: 0 6px 6px; }
.px-coll-desc { font-size: 12.5px; margin-top: 4px; min-height: 0; }
/* Touch-Skala: 34 = dokumentierte Ausnahme wie .stage-pick (Fakten-Zeile, kein Formular);
   16px Schrift gegen den iOS-Auto-Zoom auch zwischen 640 und 720px. */
@media (pointer: coarse) {
  .px-nav-add { width: 34px; height: 34px; }
  .px-sel { opacity: 1; width: 34px; height: 34px; }
  .px-sel input { width: 20px; height: 20px; }
  .px-inline { height: 34px !important; min-height: 34px; font-size: 16px !important; }
}

/* ── Social Media (v3.43): „Aus pixx.io wählen" im Post-Builder (Modal-Fragment) + Posts-Liste. ── */
.pxp-body { overflow-y: auto; padding: 12px 16px; flex: 1; min-height: 0; }
.pxp-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; }
.pxp-search { flex: 1 1 260px; margin: 0; max-width: none; width: auto; }
.pxp-grid { display: block; columns: 5 150px; column-gap: 8px; }
.pxp-tile { position: relative; display: block; break-inside: avoid; margin: 0 0 8px; cursor: pointer; line-height: 0; }
.pxp-tile img, .pxp-tile .px-noimg { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--border2); background: var(--surface2); }
.pxp-tile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pxp-check { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 7px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pxp-tile input:checked ~ img, .pxp-tile input:checked ~ .px-noimg { outline: 2px solid var(--accent); outline-offset: -2px; }
.pxp-tile input:checked ~ .pxp-check { background: var(--accent); border-color: var(--accent); }
.pxp-tile input:checked ~ .pxp-check::after { content: ''; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pxp-tile input:focus-visible ~ .pxp-check { outline: 2px solid var(--accent); outline-offset: 2px; }
.pxp-actions { position: sticky; bottom: 0; background: var(--surface); padding: 10px 0 2px; margin-top: 8px;
  align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
@media (max-width: 720px) { .pxp-grid { columns: 3 100px; column-gap: 6px; } }
/* Die Post-Kachel selbst (.fk-*) steht im Block „Post-Wand" unten — sie hat am 26.08.2026 den
   alten .post-card-Kasten samt Bildrahmen, Textanriss und Aktionsleiste abgelöst. Von den alten
   Klassen lebt nur noch `.post-grid` (neues Raster, ebenfalls unten). */
/* Kalender-Modul ohne Kasten: das Raster nimmt die Seite ein, Zellen bekommen mehr Höhe. */
.cal-full { margin-top: 4px; }
.cal-full .cal-head { margin-bottom: 10px; }
@media (min-width: 981px) { .cal-full .mkt-cal .cal-cell { min-height: 118px; } }
/* Fenster „Post anlegen": drei Felder, ein Knopf. */
.post-new-form { display: flex; flex-direction: column; gap: 10px; }
.post-new-form .row2 { display: flex; gap: 8px; }
.post-new-form .row2 > * { flex: 1; }

/* ── Ordnerbaum + Vorschau-Raster (Basis seit v3.39). ── */
.px-split { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; }
.px-nav { flex: 0 0 240px; max-height: 72vh; overflow-y: auto; padding: 8px 4px; }
.px-main { flex: 1 1 auto; min-width: 0; }
.pxdirs, .pxdirs ul { list-style: none; margin: 0; padding: 0; }
.pxd { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 7px;
  color: var(--text2); text-decoration: none; font-size: 12.5px; min-width: 0; }
.pxd span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxd svg { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }
.pxd:hover { background: var(--surface2); color: var(--text); }
.pxd.is-on { background: var(--surface2); color: var(--accent2); font-weight: 600; }
.px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
/* Hub-Regel (26.08.2026): das Bild IST die Kachel — kein Rahmen, keine Platte darunter. Nur die
   Nicht-Bild-Kachel (.px-noimg) behält ihre Fläche, weil sie sonst gar nichts zu zeigen hätte.
   Der Hinweis „anklickbar" ist der Ring beim Zeigen, die Auswahl der ROTE Ring (weiter unten). */
.px-tile { display: block; text-decoration: none; color: var(--text2); min-width: 0; }
.px-tile img, .px-noimg { display: block; width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 9px; }
.px-noimg { display: flex; align-items: center; justify-content: center; color: var(--text3);
  background: var(--surface2); }
.px-noimg svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.px-name { display: block; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-tile:hover img { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35); }
@media (max-width: 720px) {
  .px-split { flex-direction: column; }
  .px-nav { flex: none; width: 100%; max-height: 40vh; }
  .px-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
}
/* 40 statt 44 wie .nav-item: der Baum hat 120+ Zeilen, Knopf-Stufe der Touch-Skala reicht. */
@media (pointer: coarse) { .pxd { min-height: 40px; } }

/* Zusatz NEBEN dem Etikett einer Fakten-Zelle („Deadline  in 23 Tagen"). Als zweite Zeile im
   WERT würde sie die ganze .term-bar-Reihe höher ziehen — alle Kästen sind gleich hoch. */
.term-note { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600;
             color: var(--text3); margin-left: 6px; }
.term-note.is-late { color: var(--danger); }

.ev-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ev-list li { display: flex; gap: 9px; align-items: baseline; }
.ev-list li .mono { flex: none; }

@media (pointer: coarse) {
  .pstep-tools .ck-who.unset, .pstep-tools .pv-btn.pv-add { opacity: 1; }
}
@media (max-width: 720px) {
  .mstrip { gap: 12px; padding-bottom: 12px; }
  .mstat { padding: 0 12px; min-width: 74px; }
  .mstat-n { font-size: 16px; }
  .mmix { flex: 1 1 100%; min-width: 0; }
  .pipe-card { flex: 1 1 100%; }
  /* Mobil ist Platz die knappste Ware: Notiz und Brücke rücken unter den Schritt-Titel
     statt eingerückt zu bleiben, sonst bleibt für den Text nichts übrig. */
  .pstep-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .pstep-t { flex: 1 1 100%; order: 3; }
  .pstep-tools { margin-left: auto; }
  .pstep-body, .pstep-termin { margin-left: 0; padding-left: 12px; }
  .pstep-body { padding-right: 12px; }
  .pstep-termin { margin-right: 12px; }
}

/* Sortierbare Spaltenköpfe (v3.38.2): Klick sortiert, Pfeil zeigt Spalte + Richtung.
   Der Pfeil ist RESERVIERTER Platz (::after immer da) — sonst würde der Kopf beim
   ersten Sortieren breiter und die fixed-Spalten verschöben sich. */
.ttable thead th[data-sort] { cursor: pointer; user-select: none; }
.ttable thead th[data-sort]:hover { color: var(--text); }
.ttable thead th[data-sort]::after { content: ''; display: inline-block; width: 11px; }
.ttable thead th[data-sort][aria-sort="ascending"]::after { content: ' ↑'; width: 11px; color: var(--text2); }
.ttable thead th[data-sort][aria-sort="descending"]::after { content: ' ↓'; width: 11px; color: var(--text2); }

/* ============================================================
   SCHALE v2 (Welle 1, 26.08.2026) — Kopfzeile, Sidebar-Gruppen, Anwesenheit
   Grundlage: der abgenommene Entwurf (nav2/shell.html) + Martins Entscheide 25.08.
   Kein Suchfeld, keine Glocke (Attrappen). Alle Regeln hier sind ADDITIV zu den
   Basis-Blöcken oben (.topbar/.sidebar/.nav-item) — dort nichts duplizieren.
   ============================================================ */

/* ── Brotkrume: Modul-Icon · Modul (verlinkt) / Seite ── */
.crumb-ico { width: 16px; height: 16px; flex: none; color: var(--text3); }
.crumbs .crumb { color: var(--text3); text-decoration: none; white-space: nowrap; }
.crumbs .crumb:hover { color: var(--text); text-decoration: underline; }
.crumbs .sep { color: var(--text3); }
.crumbs .cur { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Mobil zählt jeder Punkt Breite: die Eltern-Stufe fällt weg, der Titel bleibt. */
@media (max-width: 720px) { .crumbs .crumb, .crumbs .sep { display: none; } }

/* ── Werkzeuge neben der Brotkrume (⋯ und Schloss): randlos, damit die Kopfzeile ruhig
   bleibt — Rahmen bekommt nur, was gerade AN ist. */
.tb-ghost { border-color: transparent; background: none; color: var(--text3); }
.tb-ghost:hover { background: var(--surface3); color: var(--text); }
.tb-wrap { position: relative; flex: none; display: flex; align-items: center; }
/* Falle wie bei .st-menu: das display:flex oben schlägt sonst das hidden-Attribut — der
   ⋯-Knopf stünde da, obwohl die Seite gar kein Menü liefert. */
.tb-wrap[hidden] { display: none; }
.tb-menu { top: calc(100% + 6px); right: 0; left: auto; }
.tb-menu .cm-item { text-decoration: none; }

/* Schloss über den Beträgen (v3.51.6): GESCHLOSSEN ist der Normalzustand — leiser Umriss, kein
   Akzent (sonst stünde auf jeder Seite dauerhaft ein rotes Schloss). OFFEN = Beträge sichtbar =
   der Ausnahmezustand, der die Farbe trägt: nur die Linie, keine Fläche. */
#privacyLock .lk-open { display: none; }
#privacyLock[aria-pressed="false"] { color: var(--accent2); }
#privacyLock[aria-pressed="false"] .lk-closed { display: none; }
#privacyLock[aria-pressed="false"] .lk-open { display: block; }

/* ── Anwesenheit: gestapelte Initialen, Klick öffnet die Namen ── */
.pres-stack { display: flex; align-items: center; border: 0; background: none; padding: 0 2px; cursor: pointer; font: inherit; }
/* Neutral, NICHT im Akzent: PLANK-Rot bleibt der Primäraktion vorbehalten — ein Stapel
   roter Köpfe in der Kopfzeile wäre der lauteste Punkt jeder Seite (Katalog §3). */
.pres-ava { width: 24px; height: 24px; flex: none; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: 9.5px; font-weight: 700; letter-spacing: .02em; color: var(--text2);
  background: var(--surface3); border: 2px solid var(--bg); margin-left: -6px; }
.pres-stack .pres-ava:first-child { margin-left: 0; }
.pres-more { background: none; border-color: var(--border); color: var(--text3); }
.pres-row { display: flex; align-items: center; gap: 9px; padding: 6px 10px; font-size: 13px; color: var(--text); }
.pres-row .pres-ava { border-color: transparent; margin-left: 0; }
/* Primäraktion rechts bekommt eine ruhige Kante zum Stapel (app.js hängt sie hier ein). */
.topbar-right > .tb-wrap ~ * { padding-left: 10px; border-left: 1px solid var(--border); }

.nav-right { margin-left: auto; display: inline-flex; align-items: center; color: var(--text3); }
.nav-right svg { width: 15px; height: 15px; }
body.dark .th-sun, body:not(.dark) .th-moon { display: none; }
/* Rolle + Version wohnen im Profil-Menü (statt als Kapsel am Chip / eigene Zeile). */
.uc-who { font-size: 10.5px; color: var(--text3); padding: 6px 11px 5px; letter-spacing: .02em; }

@media (min-width: 720.02px) {
  /* Rail: kein Gruppenkopf, und die Gruppe ist IMMER offen — ein gemerkter Zu-Zustand
     dürfte die Icon-Spalte nicht verschieben (Martins Vorgabe: Rail verschiebt nichts). */
  .app.rail   .app.rail   .app.rail .sb-group { margin-bottom: 10px; }
  .app.rail .sb-footitem { justify-content: center; padding: 9px 0; }
  .app.rail .nav-right { display: none; }
}

/* Bleibt vom Seitenkopf nur der Titel übrig, den die Kopfzeile schon trägt, fällt der
   ganze Block weg — sonst klafft unter der Brotkrume ein leerer Abstand. */
body.dup-title .page-head:has(> .page-title:only-child),
body.dup-title .page-head:has(> div:only-child > .page-title:only-child) { display: none; }

@media (max-width: 720px) {
  /* Ein Fokus je Screen: der Anwesenheits-Stapel ist Desktop-Beiwerk — mobil braucht die
     Kopfzeile den Platz für Titel und Primäraktion. */
  .topbar-right > .tb-wrap { display: none; }
  .topbar-right > .tb-wrap ~ * { padding-left: 0; border-left: 0; }
  .pres-ava { margin-left: -6px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   ── Minimalismus-Welle 1 (25.08.2026) ──
   Zusammenführung der Seiten-Umbauten: Dashboard, Posteingang, Kunden,
   Verkaufschancen (Liste + Board), VK-Detail, Nachfassen, Listen-Kleinkram.
   Leitplanken (docs/DESIGN_SYSTEM.md + Entscheide 25.08.): Werte sind Text und nie
   graue Kapsel · höchstens EINE Zustandspille je Zeile · EIN roter Knopf je Seite
   (in der Kopfzeile) · Zeilen-Knöpfe sind Hover-Werkzeuge nach dem Muster
   .ck-who.unset und bleiben auf `pointer:coarse` sichtbar · keine linken
   Akzentbalken · mobil ein Fokus je Screen ohne Seitwärts-Scrollen.
   Der Block steht bewusst am Ende: die Seiten-Regeln nehmen den älteren Blöcken
   gezielt Farbe und Chrom zurück und müssen deshalb NACH ihnen greifen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Hub-weite Bausteine ─────────────────────────────────────────────────── */

/* Seiten-Menü: app.js hebt die Einträge aus [data-page-menu] in das ⋯-Popover der
   Kopfzeile und entfernt den Container — bis dahin darf er nicht aufblitzen. */
[data-page-menu] { display: none; }

/* Klickbare Tabellenzeile: den Zeiger gab es bisher nur im Mobil-Block (app.css:1500).
   Damit entfällt der Inline-Style, den die Listen dafür trugen. */
.tbl tbody tr[data-row-href] { cursor: pointer; }

/* .sortsel — Sortieren-Select NUR am Phone (/offers, /orders). Am Desktop sortieren
   die Spaltenköpfe; am Phone versteckt .tbl-cards den thead, dort wäre Sortieren
   sonst unerreichbar. Löst das frühere Inline-<style> in offers-list.php ab. */
.sortsel { display: none; }

/* .li-clip — lange Freitext-Zelle (Projekt-Beschreibung): ungekürzt im Markup, am
   Desktop eine Zeile mit Ellipse (max-width deckelt den Spaltenbeitrag, sonst wüchse
   die Tabelle auf die volle Textbreite), am Phone voller Umbruch. Volltext im title. */
.li-clip { display: block; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 720px) {
  .sortsel { display: inline-flex; }
  .li-clip { max-width: none; white-space: normal; overflow: visible; }
}

/* ── 2 · Geteilt: Detail-Kopf (Kunde /customers/{id} + VK /leads/{id}) ────────── */
/* Beide Seiten tragen jetzt denselben Kopf: EINE Karte aus Identitätszeile
   (Initialen · Name · Meta-Textzeile · Primäraktion) und Faktenzeile (vier Zahlen
   + Stift). Die Regeln stehen zusammen, damit die zwei Köpfe nicht auseinanderdriften. */

.cu-detail .cu-top,
.lead-pg .ls-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }

/* Initialen-Kreis in Chat-Größe statt des früheren 54-px-Indigo-Verlaufs (.detail-av). */
.cu-detail .cu-ini,
.lead-pg .ls-top .lead-ini { width: 30px; height: 30px; font-size: 11px; flex: none; }

.cu-detail .cu-id,
.lead-pg .ls-id { flex: 1; min-width: 0; }
.cu-detail .cu-id h1,
.lead-pg .ls-id h1 { font-size: 18px; font-weight: 700; letter-spacing: -.3px;
  line-height: 1.2; overflow-wrap: anywhere; }

/* Meta-Textzeile (Kd-Nr. · Ort, Land · Betreuer bzw. VCH-Nr. · Partei · Betreuer):
   Werte als Text, keine Kapseln. app.css blendet .head-meta außerhalb des
   Mobil-Layouts aus — auf der VK ist sie die einzige Meta-Zeile und gilt überall. */
.cu-detail .cu-sub,
.lead-pg .head-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-top: 3px; font-size: 12.5px; color: var(--text2); }
.cu-detail .cu-sub .cu-x { color: var(--text3); }
.cu-detail .cu-right { flex: none; }
.lead-pg .ls-right { display: flex; align-items: center; gap: 6px; flex: none; }
.lead-pg .ls-right .stage-pick { width: auto; height: 28px; min-height: 28px;
  padding: 2px 24px 2px 10px; font-size: 12px; font-weight: 600; }

/* .card bringt overflow:hidden mit — die <details>-Popovers (⋯, Stift) müssen aber
   aus der Karte herausragen dürfen. */
.cu-detail .cu-head { padding: 0; margin-bottom: 16px; }
.lead-pg .lead-head { padding: 0; overflow: visible; margin-bottom: 14px; }

/* Faktenzeile: vier gleich breite Zahlen + der Stift, der die Stammdaten öffnet. */
.cu-detail .cu-facts,
.lead-pg .ls-facts { display: grid; align-items: center; padding: 12px 16px 13px;
  border-top: 1px solid var(--border2); background: var(--surface2); }
.cu-detail .cu-facts { grid-template-columns: repeat(4, 1fr) 34px; }
.lead-pg .ls-facts { grid-template-columns: repeat(4, 1fr) 30px; }
.cu-detail .cu-facts .mstat,
.lead-pg .ls-facts .mstat { padding: 0 18px; min-width: 0; border-left: 1px solid var(--border2); }
.cu-detail .cu-facts .mstat:first-child,
.lead-pg .ls-facts .mstat:first-child { padding-left: 0; border-left: 0; }
/* Die Trennlinie kommt hier vom border-left des Rasters — die ::before-Linie des
   Kennzahlen-Bausteins würde sie sonst doppeln. */
.cu-detail .cu-facts .mstat + .mstat::before,
.lead-pg .ls-facts .mstat + .mstat::before { display: none; }
.cu-detail .cu-facts .mstat-n,
.lead-pg .ls-facts .mstat-n { font-size: 18px; letter-spacing: -.3px; }
/* Ungepflegter Wert bleibt sichtbar, aber leise — statt „—"-Wüste oder Null-Kapsel. */
.cu-detail .cu-facts .mstat-n.cu-empty,
.lead-pg .ls-facts .mstat-n.empty { color: var(--text3); font-weight: 500; }
.cu-detail .cu-facts .cu-sub2,
.lead-pg .ls-facts .mstat-l .sub { color: var(--text3); }
.cu-detail .cu-facts .mstat-l { overflow: hidden; text-overflow: ellipsis; }

/* ── 3 · Geteilt: Icon-Werkzeug (Zeilen, Karten-Köpfe, Faktenzeile) ──────────── */
/* Ein Baustein für alle drei Seiten: neutral (nie rot), 26 px, Touch-Ziel 34 px. */
.cu-list .cu-rt,
.cu-detail .cu-ib,
.lead-pg .ib { width: 26px; height: 26px; border: 0; background: none; border-radius: 7px;
  color: var(--text3); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font: inherit; padding: 0; text-decoration: none; }
.cu-list .cu-rt:hover,
.cu-detail .cu-ib:hover,
.lead-pg .ib:hover { background: var(--surface3); color: var(--text); }
.cu-list .cu-rt svg,
.cu-detail .cu-ib svg,
.lead-pg .ib svg { width: 14px; height: 14px; }
/* Falle wie bei .st-menu: die display-Regel oben schlüge sonst das hidden-Attribut
   (die Angebots-Versand-Zustandsmaschine schaltet den Knopf per el.hidden). */
.cu-list .cu-rt[hidden],
.cu-detail .cu-ib[hidden],
.lead-pg .ib[hidden] { display: none; }
.cu-detail .cu-ib { justify-self: end; }
.lead-pg .card-head .ch-edit { margin-left: auto; }
/* Diese SVGs tragen ihre Strich-Attribute nicht im Markup. */
.cu-list .cu-rt svg,
td.nf-chev svg { fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }

@media (pointer: coarse) {
  .cu-detail .cu-ib, .lead-pg .ib { width: 34px; height: 34px; }
}

/* ── 4 · Dashboard (/) ───────────────────────────────────────────────────────── */
/* Einspaltig, drei Abschnitte: Heute · Zahlen · Meine Wiedervorlagen. Die Zahlen
   reiten auf .mstrip/.mstat, die Pipeline auf .mbar — beide gibt es schon oben. */

/* Zeilenliste ohne Tabellen-Chrome; die Trennlinie ist die einzige Struktur. */
.pg-dash .dash-rows { display: flex; flex-direction: column; }
.pg-dash .drow { display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  min-height: 42px; border-top: 1px solid var(--border2); cursor: pointer; }
.pg-dash .dash-rows > .drow:first-child { border-top: 0; }
.pg-dash .drow:hover { background: var(--surface2); }

/* Der Punkt ist der EINZIGE Zustandsmarker der Zeile — eine Kapsel entfällt hier
   bewusst, weil in „Heute" jede Zeile eine Abweichung ist. */
.pg-dash .ddot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text3); }
.pg-dash .ddot.red { background: var(--danger); }
.pg-dash .ddot.amber { background: var(--warn); }
.pg-dash .ddot.green { background: var(--ok); }
.pg-dash .ddot.violet { background: var(--accent2); }
.pg-dash .ddot.orange { background: #f97316; }
.pg-dash .ddot.gray { background: var(--text3); opacity: .6; }

.pg-dash .dmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pg-dash .dtitle { font-size: 13px; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-dash .dsub { font-size: 11px; color: var(--text3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Zeilen-Knopf = Hover-Werkzeug; nie rot — Rot gehört der Kopfzeile. */
.pg-dash .dact { flex: none; opacity: 0; white-space: nowrap; text-decoration: none; }
.pg-dash .drow:hover .dact, .pg-dash .dact:focus-visible { opacity: 1; }

/* Leerzustand: EIN Satz, keine Kapsel, kein Emoji. */
.pg-dash .dash-empty { padding: 14px; }   /* Schrift/Farbe: Gruppe .leer, unten */

/* Abschnitt „Zahlen": EIN Streifen. „Auftragseingang" steht als Wort vor den
   €-Zahlen (früher die graue Kapsel .aestrip-cap „AE" — Block oben entfallen). */
.pg-dash .dz-cap { align-self: center; font-size: 10.5px; font-weight: 600; color: var(--text3);
  white-space: nowrap; padding-right: 8px; flex: none; }
/* Bricht die Zahlen-Reihe um, sitzt die zweite Reihe bündig unter der ersten Zahl. */
.pg-dash .mstrip > .mstat-row { flex: 1 1 auto; row-gap: 10px; }
/* Gruppen-Fuge zwischen Auftragseingang und offenen Posten: kräftiger als die
   Haarlinie zwischen zwei Zahlen, aber weiterhin neutral (kein Farbakzent). */
.pg-dash .mstat.is-grp { margin-left: 10px; padding-left: 28px; }
.pg-dash .mstat.is-grp::before { top: 0; bottom: 0; background: var(--border); }
/* Dritte Zeile der Kennzahl: nur mit Substanz (Delta oder €-Summe), nie ein Kommentar. */
.pg-dash .mstat-d { font-size: 10px; color: var(--text3); white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.pg-dash .mstat-d .up { color: var(--ok); font-weight: 600; }
.pg-dash .mstat-d .dn { color: var(--danger); font-weight: 600; }
/* Neun Zahlen auf einer Linie: enger als der Marketing-Standard, damit der Streifen
   auf einem 13"-Fenster nicht in zwei Reihen bricht. */
.pg-dash .mstat { padding: 0 9px; min-width: 64px; }

/* Pipeline als schmales Band im Kartenkopf statt als eigener Karte. */
.pg-dash .dash-pipe { padding: 9px 14px 10px; border-bottom: 1px solid var(--border2); }
.pg-dash .dp-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 10.5px; color: var(--text3); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.pg-dash .dp-cap b { color: var(--text); font-weight: 700; }
.pg-dash .dash-pipe .mbar { height: 7px; }

/* ── 5 · Posteingang / Anfragen (/inbox, /inbox/{id}) ────────────────────────── */
/* Die Avatar-, Ungelesen- und Betreff-Regeln sind direkt in den .inbox-*-Block oben
   eingearbeitet (dort stand der Widerspruch), hier steht nur das Neue. */

/* Strich-Icons statt Emoji. In Knöpfen greift .btn svg (15px). */
.ix-ico { width: 15px; height: 15px; flex: none; }
.ix-ico-xs { width: 12px; height: 12px; }
.ix-ico-warn { color: var(--warn); }

/* Ansichten (Offen | Erledigt | Sonstiges) stehen in der Werkzeugzeile. Fällt der
   Seitentitel per body.dup-title weg, rutscht das Segment hoch. */
.ix-head .ix-views { margin-top: 6px; }
body.dup-title .ix-head .ix-views { margin-top: 0; }

/* Hinweis „Import pausiert": eine Zeile, kein Farbfeld (den Zustand trägt das Icon). */
.ix-paused { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  margin-bottom: 12px; font-size: 13px; line-height: 1.4; color: var(--text2); }

/* Beiwerk-Zeile (Zuständiger, Aussortier-Grund): schlichter Text, eine Zeile. */
.inbox-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 11.5px; color: var(--text3); min-width: 0; }
.inbox-meta > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Detail: Richtung ohne Kapsel — der gesendete Kopf trägt den Akzent-Ton, den Rest
   sagt der Absender (dasselbe Muster, das mobil in der VK schon gilt). */
.inbox-detail .ix-out .ix-msg-head,
.inbox-detail details.ix-msg-collapsed.ix-out > summary { background: rgba(var(--accent-rgb), .12); }
.inbox-detail .ix-att { display: inline-flex; color: var(--text3); }
.inbox-detail .ix-chev { width: 13px; height: 13px; }
/* v3.81.8 — Systemmail im Verlauf (Lese-/Zustellbestätigung, Abwesenheitsnotiz; MailNoise): schmal und leise wie
   .sys-line — rahmenlos, die Art steht statt eines Textauszugs. Gestrichelt heißt im Hub „Platzhalter/Entwurf"
   (Design-Prüfung 16.09.). Nie Akzent-Ton, auch nicht in Senderichtung: steht NACH den .ix-out-Regeln. */
details.ix-msg-collapsed.ix-sys > summary { padding: 6px 14px; font-size: 12px; color: var(--text3); }
details.ix-msg-collapsed.ix-sys .ix-sys-art { flex: none; color: var(--text2); }
details.ix-msg-collapsed.ix-sys .ix-who { flex: 1; min-width: 0; font-weight: 500; color: var(--text2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-detail details.ix-msg-collapsed.ix-sys > summary { background: transparent; border-color: transparent; }
.inbox-detail details.ix-msg-collapsed.ix-sys[open] > summary { border-color: var(--border); }
@media (max-width: 720px) {
  [data-mtabs].mtabs-on details.ix-msg-collapsed.ix-sys > summary { background: transparent; border-color: transparent; }
  [data-mtabs].mtabs-on details.ix-msg-collapsed.ix-sys[open] > summary { border-color: var(--border); }
}
@media (pointer: coarse) { details.ix-msg-collapsed.ix-sys > summary { min-height: 34px; } }
/* Zuständiger neben den Aktionen: rechts, dezent, nur wenn gepflegt. */
/* „+ Interne Notiz" ist kein Primärweg — Rot bleibt der Kopfzeile vorbehalten. */

/* ── 6 · Kunden (/customers, /customers/{id}) ────────────────────────────────── */

/* Feste Spaltenbreiten: der Firmenname bekommt den Platz, Nr./Klassifizierung bleiben ruhig. */
.cu-list .tbl { table-layout: fixed; }
.cu-list .tbl .cu-c-name { width: 40%; }
.cu-list .tbl .cu-c-name .cell-strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-list .tbl .cu-c-no { width: 190px; color: var(--text2); font-size: 12.5px; white-space: nowrap; }
/* Land + ABC sind Werte, keine Kapseln: schlichter Text mit Abstand zur Nummer. */
.cu-list .cu-dim { color: var(--text3); margin-left: 8px; }
.cu-list .tbl .cu-c-kat .tag { display: inline-block; max-width: 100%; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
/* Zeilen-Werkzeuge (E-Mail, Öffnen) erst beim Überfahren. */
.cu-list .tbl .cu-c-tools { width: 72px; padding-left: 0; text-align: right; }
.cu-list .cu-rtools { display: inline-flex; gap: 2px; opacity: 0; transition: opacity .1s; }
.cu-list tr:hover .cu-rtools, .cu-list tr:focus-within .cu-rtools { opacity: 1; }

/* Detail: Ansprechpartner. */
.cu-detail .cu-cp { padding: 8px 0; border-top: 1px solid var(--border2); }
.cu-detail .cu-cp:first-child { border-top: 0; padding-top: 2px; }
.cu-detail .cu-cp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Geöffnet nimmt das Bearbeiten-Formular die volle Kartenbreite (sonst quetscht es der Flex-Rest). */
.cu-detail .cu-cp .contact-edit[open] { flex: 1 0 100%; margin-left: 0; }
/* „Bearbeiten" ist ein Hover-Werkzeug und neutral statt rot (das margin-top des
   Helfers steht inline — align-self fängt den Versatz ab). */
.cu-detail .cu-cp .contact-edit { margin-left: auto; align-self: center; opacity: 0; transition: opacity .1s; }
.cu-detail .cu-cp:hover .contact-edit,
.cu-detail .cu-cp:focus-within .contact-edit,
.cu-detail .cu-cp .contact-edit[open] { opacity: 1; }
/* !important, weil render_contact_edit() (src/helpers.php) die Akzentfarbe INLINE
   setzt — ohne Eingriff in den geteilten Helfer geht es hier nicht leiser. */
.cu-detail .cu-cp .contact-edit > summary { color: var(--text3) !important; }
.cu-detail .cu-cp .contact-edit > summary:hover { color: var(--text) !important; }

/* Geisterzeile „+ Neuer Ansprechpartner" — neutral, kein Rot. */
.cu-detail .cu-cp-add { margin-top: 10px; }
.cu-detail .cu-cp-add > summary { list-style: none; cursor: pointer; font-size: 12.5px; color: var(--text2); }
.cu-detail .cu-cp-add > summary::-webkit-details-marker { display: none; }
.cu-detail .cu-cp-add > summary:hover { color: var(--text); }

/* Rot-Budget: einziger roter Knopf der Seite ist „Speichern" der Notiz — der
   Notiz-Avatar und die Primärknöpfe der geteilten Helfer werden neutral. */
.cu-detail .note-add .uc-avatar { background: var(--surface3); color: var(--text2);
  border: 1px solid var(--border); }
.cu-detail .cu-cp .btn-primary,
.cu-neutral .btn-primary { background: var(--surface2); border-color: var(--border); color: var(--text); }
.cu-detail .cu-cp .btn-primary:hover,
.cu-neutral .btn-primary:hover { background: var(--surface3); filter: none; }

/* ── 7 · Verkaufschancen: Liste + Board (/leads) ─────────────────────────────── */
/* Präfix vk-. Vorhandene Bausteine bleiben: .seg (Sicht), .filter-chip (Filter),
   .pill (EIN Zustand), .lead-ini, .tbl/.tbl-cards, .kan-col. */

/* Werkzeugzeile: Sicht links, Filter rechts. Das `.seg { flex:none }` teilt sie sich
   mit .lc-tools (Ops) — siehe dort. */
.vk-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border); }
/* Rechte Hälfte der Werkzeugzeile — derselbe Baustein in CRM (.vk-tools) und Ops (.lc-tools). */
.vk-tools .vk-tools-right, .lc-tools-right { margin-left: auto; display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap; }

/* ── „Wer hat was" (v3.76): Avatar-Stapel als Personen-Filter in der Werkzeugzeile ──
   Reine GET-Links (kein JS): Klick setzt ?wer=, nochmal klicken hebt auf. Der aktive Kreis
   trägt den Akzent-Ring — die EINZIGE Stelle mit Rot in dieser Zeile. */
.wer-filter { display: inline-flex; align-items: center; flex: none; }
.wer-filter .lead-ini { width: 26px; height: 26px; font-size: 9.5px; text-decoration: none;
  box-shadow: 0 0 0 2px var(--surface); transition: transform .1s, box-shadow .1s; }
.wer-filter .lead-ini + .lead-ini, .wer-filter .wer-pop { margin-left: -7px; }
.wer-filter .lead-ini:hover { transform: translateY(-1px); z-index: 2; }
.wer-filter .lead-ini.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent);
  color: var(--accent); z-index: 3; }
.wer-filter .lead-ini.more { background: var(--surface); color: var(--text3); cursor: pointer; }
.wer-clear { margin-left: 8px; color: var(--text3); font-size: 15px; line-height: 1; padding: 2px 5px;
  border-radius: 6px; text-decoration: none; }
.wer-clear:hover { color: var(--text); background: var(--surface3); }
/* Überzähler klappt die restlichen Personen auf (Haus-Muster: <details> + absolute Karte). */
.wer-pop { position: relative; }
.wer-pop > summary { list-style: none; }
.wer-pop > summary::-webkit-details-marker { display: none; }
.wer-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 190px; }
.wer-pop[open] .wer-menu { display: block; }
.wer-menu a { display: flex; align-items: center; gap: 8px; }
.wer-menu .wer-n { margin-left: auto; color: var(--text3); font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  /* Suche bleibt am Telefon volle Breite (Mobile-Standard Punkt 2) — Flex-Basis schlüge width. */
  .pg-ops-tasks .lc-tools-right { margin-left: 0; width: 100%; }
  .pg-ops-tasks .lc-tools-right .search { flex: 1 1 100%; width: 100%; }
}

/* Kopf ohne Seitentitel (den trägt die Topbar): nur noch die Zahlenzeile. */
.vk-head { margin-bottom: 14px; }
.vk-head .page-sub { margin-top: 0; }
.vk-head .vk-flash { margin-top: 6px; }
.vk-nw { white-space: nowrap; }
.vk-empty { padding: 24px 16px; }

/* Sortier-Kopf: aktive Spalte in Textfarbe (nicht Rot — Rot bleibt der Primäraktion). */
.vk-th { color: inherit; text-decoration: none; white-space: nowrap; cursor: pointer; }
.vk-th:hover { color: var(--text); }
.vk-th.is-on { color: var(--text); font-weight: 700; }
/* Der Pfeil wird IMMER gerendert (auch an der inaktiven Spalte) und hier nur versteckt — so
   bleibt der Platz reserviert und die Spalte springt beim Sortieren nicht (/offers, /orders). */
.vk-th .vk-arrow { display: inline-block; width: 7px; font-size: 9px; color: var(--text3); visibility: hidden; }
.vk-th.is-on .vk-arrow { visibility: visible; }

/* Titelzelle: Firma fett, darunter Angebots-Nr. · Person · Typ — alles schlichter Text. */
.vk-sub { margin-top: 2px; font-size: 11.5px; color: var(--text3);
  font-variant-numeric: tabular-nums; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-sub .vk-nr { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.vk-sub .vk-sep { color: var(--text3); opacity: .6; }
/* Bricht lieber um, als ein Wort abzuschneiden - die Karte ist schmal. */
.vk-sub > span { display: inline; }
.vk-sub .vk-sep { margin: 0 4px; }

/* Gewinnchance: nur die Zahl (Balken raus), gedämpft — der Verzug steht schon in der
   Nachfass-Spalte; zwei Rot-Signale je Zeile wären eines zu viel. */
.vk-pct { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }

/* Nachfass-Datum als Text; rot NUR wenn überfällig. */
.vk-due { font-variant-numeric: tabular-nums; }
.vk-due.is-late { color: var(--danger); font-weight: 600; }

/* Betreuer: Initialen oder „—"; „Übernehmen" ist ein Hover-Werkzeug. Beide Zustände
   liegen im selben Raster-Feld — so springt beim Hovern nichts. */
.vk-owner { display: inline-grid; align-items: center; }
.vk-owner > * { grid-area: 1 / 1; }
.vk-owner .vk-dash { color: var(--text3); transition: opacity .12s; }
.vk-owner .vk-claim { opacity: 0; pointer-events: none; line-height: 0; transition: opacity .12s; }
.tbl tbody tr:hover .vk-owner .vk-claim,
.vk-card:hover .vk-owner .vk-claim,
.vk-owner .vk-claim:focus-within { opacity: 1; pointer-events: auto; }
.tbl tbody tr:hover .vk-owner .vk-dash,
.vk-card:hover .vk-owner .vk-dash,
.vk-owner .vk-claim:focus-within + .vk-dash { opacity: 0; }

/* Board. */
.vk-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.vk-board .kan-col { flex: 0 0 268px; min-width: 268px; }
/* Spaltenkopf: Text + Farbpunkt + Zähler + Summe — keine Pille. */
.vk-kh { display: flex; align-items: baseline; gap: 7px; padding: 4px 6px 8px;
  font-size: 12.5px; font-weight: 650; color: var(--text); }
.vk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--text3); align-self: center; }
.vk-dot.red    { background: var(--danger); }
.vk-dot.amber  { background: var(--warn); }
.vk-dot.blue   { background: var(--info); }
.vk-dot.green  { background: var(--ok); }
.vk-dot.violet { background: #a78bfa; }
.vk-dot.teal   { background: #2dd4bf; }
.vk-dot.pink   { background: #f472b6; }
.vk-dot.orange { background: #f97316; }
.vk-dot.gray   { background: var(--text3); }
.vk-kh .vk-kh-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vk-kh .vk-kh-n { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--text3);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Leere Spalte bleibt leer (kein „—"-Platzhalter), die Mindesthöhe reicht. */
.vk-kb { display: flex; flex-direction: column; gap: 6px; padding: 6px;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 12px; min-height: 48px; }
/* Karte: Firma, Angebots-Nr., Betrag, EINE Pille (nur Überfälligkeit). */
.vk-card { display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 10px 8px; color: inherit; text-decoration: none;
  cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.vk-card:hover { border-color: var(--text3); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.vk-card .vk-name { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vk-card .vk-sub { margin-top: 2px; flex-wrap: nowrap; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.vk-card .vk-state { margin-top: 7px; }
.vk-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.vk-foot .vk-val { font-size: 13px; font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; }
.vk-foot .vk-pct { margin-left: auto; }
.vk-foot .lead-ini { width: 20px; height: 20px; font-size: 8.5px; }
.vk-foot .vk-owner { margin-left: 2px; }

/* ── 8 · VK-Detail (/leads/{id}) ─────────────────────────────────────────────── */
/* Kopf + Faktenzeile stehen oben unter „Geteilt"; hier der Rest der Seite. */

/* ⋯-Menü der Kopfkarte: <details> statt JS-Popover (strikte CSP, kein Inline-Handler). */
.lead-pg .lead-menu { position: relative; }
.lead-pg .lead-menu > summary { list-style: none; cursor: pointer; }
.lead-pg .lead-menu > summary::-webkit-details-marker { display: none; }
.lead-pg .lead-menu .lm-pop { right: 0; top: calc(100% + 6px); min-width: 210px; white-space: nowrap; }

/* Stift in der Faktenzeile: öffnet Nachfass-Datum + Grund als Popover. */
.lead-pg .fu-edit { position: relative; justify-self: end; }
.lead-pg .fu-edit > summary { list-style: none; cursor: pointer; }
.lead-pg .fu-edit > summary::-webkit-details-marker { display: none; }
.lead-pg .fu-edit .fu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 310;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 12px 14px; min-width: 440px; }
.lead-pg .fu-edit .fu-row { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.lead-pg .fu-edit .fu-row:first-child { margin-top: 0; }
.lead-pg .fu-edit .fu-row .lab { width: 92px; flex: none; font-size: 11.5px; color: var(--text2); }
.lead-pg .fu-edit .fu-row .inp { width: auto; padding: 4px 8px; font-size: 12px; }
.lead-pg .fu-edit .fu-row .inp.rsn { flex: 1; min-width: 150px; }

/* Verlauf: Mail-Zeile, Notiz-Geisterzeile, System-Logs. */
.lead-pg .mrow { display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer; }
.lead-pg .mrow svg { width: 18px; height: 18px; flex: none; opacity: .6; }
.lead-pg .mrow .mt { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-pg .mrow .ms { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lead-pg .note-ghost { padding: 8px 14px; border-top: 1px solid var(--border2); }
.lead-pg .note-ghost .g-ghost { background: none; border: 0; padding: 0; font: inherit;
  font-size: 12.5px; color: var(--text3); cursor: pointer; }
.lead-pg .note-ghost .g-ghost:hover { color: var(--text); }
.lead-pg .note-ghost .g-fields { flex: 1; gap: 8px; align-items: center; }
.lead-pg .note-ghost .g-fields .inp { flex: 1; }
/* System-Logs: EIN dezenter Link am Verlaufsende, auf allen Breiten — die frühere
   Basis-Regel .logs-link{display:none} + der Mobil-Zwilling sind oben entfallen. */
.lead-pg .logs-link { display: flex; justify-content: flex-end; padding: 8px 14px 10px; }
.lead-pg .sys-link { background: none; border: 0; padding: 0; font: inherit; font-size: 11px;
  color: var(--text3); cursor: pointer; }
.lead-pg .sys-link:hover { color: var(--text); text-decoration: underline; }
/* Anhang-/KI-Icons im Nachrichtenkopf (früher Emojis). */
.lead-pg .i-att, .lead-pg .i-kx { width: 13px; height: 13px; vertical-align: -2px; }

/* Angebote: Zeilen mit Hover-Werkzeugen statt Knopfreihe. */
.lead-pg .offers-card .srow { display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 16px; border-top: 1px solid var(--border2); font-size: 13px;
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0;
  border-bottom: 0; font-family: inherit; color: inherit; text-decoration: none; }
.lead-pg .offers-card .srow:first-of-type { border-top: 0; }
.lead-pg .offers-card .srow:hover { background: var(--surface2); }
.lead-pg .offers-card .sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--text3); }
.lead-pg .offers-card .sdot.ok { background: var(--ok); }
.lead-pg .offers-card .sbody { flex: 1; min-width: 0; }
.lead-pg .offers-card .stitle { font-weight: 600; display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.lead-pg .offers-card .stitle a { color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.lead-pg .offers-card .stitle a:hover { text-decoration: underline; }
.lead-pg .offers-card .stitle .tiny { color: var(--text3); font-weight: 500; }
.lead-pg .offers-card .sval { font-weight: 650; font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
.lead-pg .offers-card .smeta { display: flex; align-items: center; gap: 8px; margin-top: 2px;
  font-size: 11.5px; color: var(--text3); min-width: 0; }
.lead-pg .offers-card .sacts { display: inline-flex; gap: 2px; flex: none; margin-left: auto;
  opacity: 0; transition: opacity .12s; }
.lead-pg .offers-card .srow:hover .sacts,
.lead-pg .offers-card .sacts:focus-within { opacity: 1; }
.lead-pg .offers-card .sacts .ib { width: 24px; height: 24px; }
.lead-pg .offers-card .srow.ghost { color: var(--text3); font-size: 12.5px; cursor: pointer; }
.lead-pg .offers-card .srow.ghost:hover { color: var(--text); background: none; }
.lead-pg .offers-card .srow.ghost .sdot { background: none; border: 1px dashed var(--text3); }

/* ── 9 · Nachfassen (/nachfassen) ────────────────────────────────────────────── */
/* EINE Tabelle mit Gruppenzeilen, Werte als Text statt Kapsel, „Übernehmen" als
   Hover-Werkzeug, Zeilenende = leiser Chevron statt roter Knopf-Spalte. */

/* Kopf-Zahlenzeile: Farbpunkte + Zahlen auf einer Linie (löst den Inline-Style ab). */
.nf-sub { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.nf-sub b { color: var(--text); }
/* Geplant-Termin ist ein WERT → schlichter Text, nie graue Kapsel. */
.nf-when { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Angebots-Nummer leise neben dem Betreff (Wert, keine Kapsel, kein Fettdruck). */
.nf-no { font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums;
  margin-left: 6px; white-space: nowrap; }
/* Unterzeile in der Zelle (Kadenz-Schritt, Kontakt, „N× verschoben"). */
.nf-step { display: block; margin-top: 3px; }
/* Zuständiger: Initialen + Name, ruhig (kein Fettdruck-Block wie das frühere .nf-wer). */
.nf-zust { white-space: nowrap; }
.nf-who { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text2); }
.nf-who .lead-ini { width: 20px; height: 20px; font-size: 8px; flex: none; }
.nf-none { color: var(--text3); font-size: 12.5px; }
/* „Übernehmen" = Hover-Werkzeug. .always = Sicht „Ohne Betreuer", dort ist es die
   Hauptgeste und bleibt sichtbar. */
.nf-claim { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 9px;
  border: 1px dashed var(--border2); border-radius: 999px; background: none; color: var(--text3);
  font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; opacity: 0; transition: opacity .12s; }
.tbl tbody tr:hover .nf-claim, .nf-claim:focus-visible, .nf-claim.always { opacity: 1; }
.nf-claim:hover { border-style: solid; color: var(--text); background: var(--surface3); }
/* Zeilenende: leiser Chevron (die ganze Zeile ist der Link). Die Strich-Attribute des
   SVG kommen aus dem geteilten Icon-Block oben. */
th.nf-chev, td.nf-chev { width: 1%; padding-left: 0; padding-right: 14px; }
td.nf-chev svg { width: 14px; height: 14px; display: block; color: var(--text3); }
.tbl tbody tr:hover td.nf-chev svg { color: var(--text); }

/* ── 10 · Grobzeiger: Hover-Werkzeuge gibt es dort nicht ─────────────────────── */
/* (Muster .ck-who.unset, app.css:2751 — auf Fingergeräten immer sichtbar.) */
@media (pointer: coarse) {
  .pg-dash .dact { opacity: 1; }
  .cu-list .cu-rtools { opacity: 1; }
  .cu-detail .cu-cp .contact-edit { opacity: 1; }
  .vk-owner .vk-claim { opacity: 1; pointer-events: auto; }
  .vk-owner .vk-dash { opacity: 0; }
  .lead-pg .offers-card .sacts { opacity: 1; }
  .lead-pg .offers-card .sacts .ib { width: 32px; height: 32px; }
  .nf-claim { opacity: 1; min-height: 30px; }
}

/* ── 11 · Mobil ≤720px: ein Fokus je Screen, kein Seitwärts-Scrollen ─────────── */
@media (max-width: 720px) {
  /* Dashboard */
  .pg-dash .dact { opacity: 1; }
  .pg-dash .dtitle, .pg-dash .dsub { white-space: normal; }
  .pg-dash .drow { align-items: flex-start; padding: 10px 12px; }
  .pg-dash .ddot { margin-top: 6px; }
  .pg-dash .dz-cap { flex: 1 1 100%; padding: 0 0 4px 2px; }
  .pg-dash .mstat { padding: 0 12px; min-width: 74px; }   /* Touch-Luft zurück */
  .pg-dash .mstat.is-grp { margin-left: 0; padding-left: 12px; }

  /* Kunden: die Kartenansicht ersetzt die Werkzeug-Spalte ganz. */
  .cu-list .tbl .cu-c-tools { display: none; }
  .cu-list .tbl .cu-c-name, .cu-list .tbl .cu-c-no { width: auto; }
  /* Zwei Zahlen je Reihe, der Stift rückt in die erste Reihe. */
  .cu-detail .cu-facts { grid-template-columns: 1fr 1fr 34px; row-gap: 12px; }
  .cu-detail .cu-facts .mstat { padding: 0 12px; }
  .cu-detail .cu-facts .mstat:nth-child(3) { padding-left: 0; border-left: 0; }
  .cu-detail .cu-facts .mstat-n { font-size: 16px; }
  .cu-detail .cu-facts .mstat-l { white-space: normal; }
  .cu-detail .cu-ib { grid-row: 1; grid-column: 3; }

  /* Verkaufschancen */
  .vk-tools { padding-bottom: 8px; margin-bottom: 10px; }
  .vk-tools .seg { width: 100%; }
  .vk-tools .seg-btn { flex: 1; justify-content: center; }

  /* VK-Detail: Kopf umbrechen, Fakten 2×2, Stift in eigener Zelle. */
  .lead-pg .ls-top { flex-wrap: wrap; padding: 12px 14px; }
  .lead-pg .ls-id h1 { font-size: 17px; }
  .lead-pg .ls-right { width: 100%; }
  .lead-pg .ls-right .stage-pick { flex: 1; height: 34px; min-height: 34px; font-size: 13px; }
  .lead-pg .ls-facts { grid-template-columns: 1fr 1fr; gap: 8px 0; padding: 11px 14px 12px; }
  .lead-pg .ls-facts .mstat { padding: 0 12px; }
  .lead-pg .ls-facts .mstat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .lead-pg .ls-facts .mstat-n { font-size: 16px; }
  .lead-pg .fu-edit { grid-column: 1 / -1; justify-self: start; }
  .lead-pg .fu-edit .fu-pop { position: static; min-width: 0; width: 100%; padding: 10px 0 0;
    border: 0; background: none; box-shadow: none; }
  .lead-pg .fu-edit .fu-row { flex-wrap: wrap; }
  /* Kadenz-Karte schmal: Grid-Kinder dürfen schrumpfen (min-width:auto ließ die Karte
     sonst über den Bildschirmrand laufen — kein Seitwärts-Scrollen). */
  .lead-pg .kad-grid > * { min-width: 0; }
  .lead-pg .kad-dial .btn { width: 100%; justify-content: center; }
  .lead-pg .kad-focus textarea.inp { width: 100%; box-sizing: border-box; }

  /* Nachfassen */
  .nf-no { display: block; margin-left: 0; }   /* Karte: Nummer unter den Betreff */
  .nf-none { display: none; }                  /* kein „—"-Platzhalter in der Karte */
  /* Die Gruppenzeile ist mobil eine Überschrift, keine Kachel — tbl-cards machte
     sonst auch aus tr.grp eine Karte mit Rahmen. Nur für diese Tabelle. */
  .nf-tbl tbody tr.grp { background: none; border: 0; border-radius: 0; padding: 6px 2px 0; }
  .nf-tbl tbody tr.grp > td { border-bottom: 0; padding: 0; }
}

/* Finanzen — Länderzeilen (/finance/quarterly): letzte Zeile ohne Trennlinie, Hover-Ton.
   Standen bis 26.08.2026 als Inline-<style> in der View; Seiten-CSS gehört hierher. */
.country-row:last-child { border-bottom: none !important; }
.country-row:hover { background: var(--surface2); transition: background .12s; }

/* Verweise in Fakten-Zeilen tragen die Textfarbe — Browser-Blau ist ein Fremd-Akzent. */
.cfg-row .v a, .cfg-row a.sensitive, .props .v a { color: inherit; }
.cfg-row .v a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ══════════════════════════════════════════════════════════════════════════════
   ── Minimalismus-Wellen 2+3 (26.08.2026) ──
   Zusammenführung der zweiten Runde: Operations (Start · Aufgaben · Transport ·
   Materialwirtschaft) und Marketing (Start · Aufgaben · Content · Post-Wand ·
   Kalender · Mediathek · Datei-Seite), dazu die Politur-Befunde aus Welle 1.
   Dieselben Leitplanken wie oben (docs/DESIGN_SYSTEM.md): Werte sind Text und nie
   graue Kapsel · höchstens EINE Zustandspille je Zeile · EIN roter Knopf je Seite
   in der Kopfzeile · Zeilen-Knöpfe sind Hover-Werkzeuge nach dem Muster
   .ck-who.unset und bleiben auf `pointer:coarse` sichtbar · Auswahl-Akzent ist
   PLANK-Rot · keine linken Akzentbalken · mobil ein Fokus je Screen ohne
   Seitwärts-Scrollen.
   Steht wieder ganz am Ende: die Seiten-Regeln nehmen älteren Blöcken gezielt
   Farbe und Chrom zurück und müssen deshalb NACH ihnen greifen.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 12 · Hub-weite Bausteine (Welle 2+3) ────────────────────────────────────── */

/* Leerzustand: EIN Satz Tatsache, kein Kasten, kein Emoji, keine Kapsel — und nie
   hinter `class="hint"`. `.leer` ist der hub-weite Normalfall, `.thread-empty` der
   VK-Verlauf, `.pg-dash .dash-empty` das Dashboard (Box-Maße stehen dort). */
.leer, .thread-empty, .pg-dash .dash-empty { font-size: 12.5px; color: var(--text3); }
.leer { margin: 10px 0 2px; }
.thread-empty { padding: 14px 16px; }
/* In der Listen-Sektion auf die Einrückung der Gruppen-Zeilen, sonst klebt der Satz am Rand. */
.lsec > .leer { margin: 4px 0 4px 12px; }
/* Content-Produktion: der Leersatz sitzt außerhalb der Karte unter dem Wege-Rahmen. */
.pipe-leer { margin: 14px 0 0 4px; }

/* .m-only — Gegenstück zu .m-off/.m-hide: NUR am Handy sichtbar. Trägt die Beschriftung
   von Zahlen, die am Desktop in eigenen Spalten stehen (mobil ist der thead versteckt). */
.m-only { display: none; }
@media (max-width: 720px) { table.tbl.tbl-cards td .m-only { display: block; } }

/* .ph-cta — Kopf-Aktion einer Seite ohne .page-head (Titel = Brotkrume): „Stand …" +
   der Knopf wandern als EIN Container per data-page-cta in die Topbar. */
.ph-cta { display: flex; align-items: center; gap: 8px; }
.ph-cta form { display: inline-flex; margin: 0; }
.ph-cta .ph-stand { white-space: nowrap; }
@media (max-width: 720px) {
  /* In der schmalen Topbar zählt nur der Knopf — der Stand steht in seinem title. */
  .ph-cta .ph-stand { display: none; }
}

/* „alle ›" im Kartenkopf: Textlink statt .btn — der Kopf ist kein Aktionsbalken. */
.card-head .ch-right .ch-link { font-size: 11.5px; font-weight: 600; color: var(--text3);
  text-decoration: none; white-space: nowrap; }
.card-head .ch-right .ch-link:hover { color: var(--text); }

/* ── 13 · Operations: Start · Aufgaben · Einstellungen ───────────────────────── */

/* Leere KPI-Füße (Überfällig/Erledigt tragen nur noch Zahlen) dürfen die Kacheln nicht
   unterschiedlich hoch machen. */
.pg-ops-home .kpi-foot { min-height: 15px; }
/* „N ohne Frächter" auf der Transport-Kachel: Warnfarbe, aber KEIN Rot — Rot bleibt der
   einen Primäraktion vorbehalten. */
.pg-ops-home .oh-warn { color: var(--warn); font-weight: 600; }
/* Bleibt von den beiden Fokus-Karten nur eine übrig (die leere wird nicht gerendert),
   nimmt sie die volle Breite statt halb leer dazustehen. */
.pg-ops-home .oh-cards:has(> .card:only-child) { grid-template-columns: 1fr; }
/* Leerzustand „noch keine Bereiche": EIN Satz, daneben der Weg zur Anlage. */
.pg-ops-home .oh-empty { font-size: 13px; color: var(--text2); margin: 6px 2px 0;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pg-ops-home .oh-empty a { color: var(--text3); text-decoration: none; font-size: 12.5px; }
.pg-ops-home .oh-empty a:hover { color: var(--text); }
/* Die mobile Zahlen-Zeile ersetzt die vier Kacheln; .mstat trägt hier Links. */
.pg-ops-home .oh-mstat { display: none; }
.pg-ops-home a.mstat { text-decoration: none; }
.pg-ops-home a.mstat:hover .mstat-n { color: var(--accent); }

/* /ops/aufgaben: „+ Neuer Bereich" ist eine Geisterzeile (.g-addform) statt einer Karte
   mit Farb-Select. Sie steht unter den Modulen und braucht dort Luft. */
.oa-newarea { margin-top: 4px; }
.oa-newarea .g-fields { flex: 1; max-width: 420px; }
.oa-newarea .g-fields .inp { flex: 1; }

/* ── 14 · Operations: Transport (/ops/transport) ─────────────────────────────── */

/* KW-Nummer ist ein WERT: Fließtextgröße statt Riesen-Ziffer; die aktuelle Woche bleibt
   blau (die Regel muss NACH der neutralen stehen, gleiche Spezifität). */
.pg-transport .kw-no { font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--text); }
.pg-transport .kw-band.now .kw-no { color: var(--info); }
/* „überfällig" = Textfarbe, keine Kapsel: daneben stehen schon KW + Datum. */
.pg-transport .kw-late { font-size: 11px; font-weight: 600; color: var(--danger); }

.pg-transport .kw-band { padding: 8px 10px; margin-bottom: 10px; }
/* Pflicht-Rendern (Vorwoche + 2 Folgewochen) bleibt — eine leere Woche schrumpft aber auf
   eine schmale Zeile: Rail links, „+ Laster" rechts. */
.pg-transport .kw-band.kw-empty { padding: 6px 10px; margin-bottom: 6px; }
.pg-transport .kw-band.kw-empty .kw-rail { position: static; gap: 1px; padding: 0; }
.pg-transport .kw-band.kw-empty .kw-trucks { display: flex; align-items: flex-start; }
.pg-transport .kw-band.kw-empty .kw-addlink { padding: 3px 6px; margin-left: -6px; }
/* „+ Laster": Textlink statt gestrichelter Geister-Kachel (die stand in jeder Woche als
   vierte, leere Karte im Grid). Bleibt ein <button data-truck-add> — ops.js hängt sein Menü an. */
.pg-transport .kw-addlink {
  align-self: start; background: none; border: 0; font: inherit; font-size: 12px;
  color: var(--text3); text-decoration: none; padding: 9px 6px; border-radius: 8px;
  cursor: pointer; text-align: left;
}
.pg-transport .kw-addlink:hover { color: var(--text); background: var(--surface2); }

/* Kopf ohne Icon (14× dasselbe LKW-Symbol sagte nichts) — der Frächtername steht allein. */
.pg-transport .truck-head { padding: 10px 12px 4px; gap: 6px; flex-wrap: nowrap; }
.pg-transport .truck-name { font-size: 13px; }
.pg-transport .truck-plus { width: 24px; height: 24px; }
.pg-transport .truck-sec { padding: 8px 12px 4px; }
/* Werkzeuge erst bei Bedarf: „+" und der Kartenfuß (Tourenliste ↗ / Laster entfernen)
   blenden sich beim Überfahren ein. Fläche bleibt reserviert (opacity), sonst springt das Grid. */
.pg-transport .truck-plus,
.pg-transport .truck-foot { opacity: 0; transition: opacity .12s; }
.pg-transport .truck-card:hover .truck-plus,
.pg-transport .truck-card:hover .truck-foot,
.pg-transport .truck-card:focus-within .truck-plus,
.pg-transport .truck-card:focus-within .truck-foot { opacity: 1; }
.pg-transport .truck-foot { padding: 6px 12px 9px; }
.pg-transport .truck-foot a { text-decoration: none; }

/* Ladefläche: EINE Spalte (bei 4 Lastern nebeneinander war die 2er-Reihe ~65 px breit) und
   eine ruhige, durchgezogene Linie statt gestricheltem Kasten mit Füllfläche. */
.pg-transport .bed {
  grid-template-columns: minmax(0, 1fr); gap: 4px;
  border-style: solid; border-width: 1px; background: none; padding: 5px;
}
.pg-transport .pkg { padding: 5px 8px; gap: 1px; }
.pg-transport .pkg-t1 { font-size: 11.5px; }
.pg-transport .pkg-tx { font-size: 10px; }
/* Bestellnummer als Präfix der Unterzeile (nur bei doppeltem Lieferanten auf dem Laster —
   Peters Regel vom 31.07. bleibt); die Kopfzeile gehört dem Namen. */
.pg-transport .pkg-nr { color: var(--text2); font-weight: 600; font-variant-numeric: tabular-nums; }
/* Zustell-Sektion nur mit Zeilen: der Knoten bleibt im Markup (ops.js hängt neue Zeilen daran),
   sichtbar wird er erst mit Inhalt. `:empty` verlangt einen whitespace-freien .bed — die View
   rendert ihn deshalb einzeilig. */
.pg-transport .truck-zu:has(.bed.dlv-list:empty) { display: none; }

.pg-transport .card.tr-block { margin-top: 6px; }
.pg-transport .card-head.tr-head { padding: 10px 14px; min-height: 42px; }
/* „Ohne Frächter · N" ist der Kartentitel; rot NUR als Textfarbe und NUR, wenn N > 0 ist. */
.pg-transport .card-title.red { color: var(--danger); }
/* Drop-Rückmeldung für „Box hierher ziehen = Frächter entziehen" — dieselbe blaue Kante wie
   an der Laster-Karte. --info, nie Rot: Rot ist Storno/Überfällig. */
.pg-transport .card.tr-block.drop { border-color: var(--info); background: rgba(59,130,246,.05); }
.pg-transport .tr-note { margin: 0; padding: 0 14px 10px; }
.pg-transport .tlist .trow { padding: 7px 14px; min-height: 40px; }
.pg-transport .trow-title b { font-weight: 600; }
.pg-transport .trow-title .tiny { margin-left: 4px; }
/* KW bzw. Frächtername in der Zeile = Wert, also Text (vorher graue Pille). */
.pg-transport .trow-kw { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
/* „Zuordnen ▾" / „Woche setzen ▾" erst beim Überfahren — Muster .nf-claim. */
.pg-transport .trow-right .btn { opacity: 0; transition: opacity .12s; }
.pg-transport .trow:hover .trow-right .btn,
.pg-transport .trow:focus-within .trow-right .btn { opacity: 1; }
.pg-transport .trow:hover { background: var(--surface2); }
/* Aufklapper: Titel + Zahl, ohne den Erklärsatz in der Zusammenfassung. */
.pg-transport .truck-liefs summary { padding: 10px 14px; font-size: 13.5px; gap: 6px; }
.pg-transport .truck-liefs summary .n { font-weight: 500; color: var(--text2); font-size: 12px; }

/* ── 15 · Operations: Materialwirtschaft (Einkauf · Bestand) ─────────────────── */

/* Werkzeugzeile: die Sichten-Kapsel ist das erste Element der Seite. */
.mw-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }

/* ── Werte-Raster „Bestand" (.mw-grid, v3.74) ─────────────────────────────────
   Martin 09.09.2026: „Peter will die Werte wie in der Excel-Tabelle auf meinem Schreibtisch —
   am Desktop technischer, nicht so verspielt, damit man alles spalten-/zeilenmäßig rauslesen
   kann." Also: JEDER Wert eine Spalte, dichte Zeilen, Haarlinien zwischen den Zahlenspalten,
   mitlaufender Spaltenkopf. Es bleibt eine .tbl.tbl-cards — mobil ist die Zeile weiterhin eine
   Karte, die Zusatzspalten sind dort .m-off. Deshalb steht ALLES hier in Breiten-Blöcken. */

/* Die Null ist ein Wert (nicht „leer"), aber kein Blickfang — gilt auch für „—" und den
   Lieferzeit-Default. Keine Kapsel, nur Farbe: Werte bleiben Text (DESIGN_SYSTEM 25.08.). */
.mw-z { color: var(--text3); }
/* Minus IMMER rot (Martin 09.09.2026). Ausnahme von „Rot sparsam": ein negativer Lagerstand
   ist kein Zustand, den man einordnen müsste, sondern ein Buchungsfehler — er darf in keiner
   Spalte übersehen werden. Farbe + Gewicht am WERT, keine Kapsel und keine Flächen-/Zeilen-
   einfärbung (Werte-Doktrin 25.08.: Werte bleiben Text). */
.mw-neg { color: var(--danger); font-weight: 600; }
/* Greift der Lagerfilter nicht, sind ALLE Zahlen der Seite zu hoch — das ist keine Fußnote,
   sondern der Vorbehalt über der ganzen Tabelle. Warnfarbe als TEXT (keine Fläche, keine
   Kapsel — Werte-Doktrin 25.08.). */
.mw-scope-warn { margin: -4px 0 12px; font-size: 11px; font-weight: 600; color: var(--warn); }

@media (min-width: 720.02px) {
  /* Kopf läuft mit — 455 Zeilen ohne Spaltenkopf sind unlesbar. position:sticky misst gegen
     den nächsten Scroll-Container: .card { overflow:hidden } wäre einer (und scrollt nie),
     der Kopf bliebe stehen. overflow:clip klippt genauso, ist aber KEIN Scroll-Container —
     damit gilt wieder .content als Scrollfläche. */
  .card:has(> .mw-grid) { overflow: clip; }
  .mw-grid thead th { position: sticky; top: 0; z-index: 2; background: var(--surface);
    padding: 7px 10px; font-size: 10px;
    /* border-collapse malt die Kopf-Unterkante ins Zellgitter — die bliebe beim Scrollen
       zurück und der Kopf schwebte kantenlos über den Zeilen. */
    box-shadow: inset 0 -1px 0 var(--border2); }
  /* Werte-Raster, keine Navigationsliste: die Zeile tut nichts, also verspricht der Zeiger
     auch nichts (global gilt .tbl tbody tr { cursor: pointer }). Der Hover-Ton bleibt — er
     ist die Zeilenverfolgung über zehn Spalten. */
  .mw-grid tbody tr { cursor: default; }
  .mw-grid tbody td { padding: 5px 10px; font-size: 12.5px; }
  /* Senkrechte Haarlinien NUR im Zahlenblock: das ist der Teil, den man zeilenweise
     vergleicht — Bezeichnung und Lieferant bleiben ohne Gitter (sonst wirkt es wie ein Formular). */
  .mw-grid th.num, .mw-grid td.num { border-left: 1px solid var(--border2); }
  .mw-grid td.c-code { color: var(--text2); white-space: nowrap; font-variant-numeric: tabular-nums; }
  /* Die Bezeichnung schluckt die freie Breite, damit der Zahlenblock zusammenrückt: sonst
     verteilt der Browser den Platz auf alle Spalten und die Zahlen stehen mit Lücken
     nebeneinander — genau das Gegenteil einer Tabelle, die man zeilenweise liest. */
  .mw-grid th.c-name, .mw-grid td.c-name { width: 100%; }
  /* Lange Bezeichnungen/Lieferantennamen dürfen die Zahlenspalten nicht wegdrücken:
     eine Zeile mit Ellipse, der volle Text steht im title. */
  .mw-grid td.c-name .cell-strong { display: block; max-width: 38ch; }
  .mw-grid td.c-lief > span { display: block; max-width: 22ch; }
  .mw-grid td.c-name .cell-strong,
  .mw-grid td.c-lief > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Gruppenzeile (Hauptlieferant) im dichten Raster: schmaler Deckel, keine halbe Leerzeile. */
  .mw-grid tbody tr.grp > td { padding: 11px 10px 3px; }
}

/* Schmales Desktop-Band (Notebook 1280/1440 mit offener Sidebar): elf Spalten passen dort
   nicht mehr in die Karte — und `overflow: clip` oben gibt sie NICHT als Scrollbalken frei,
   sie wären lautlos weg (live nachgemessen 09.09.2026 bei 1100px: Min, Vorschlag und der
   Anfrage-Knopf fehlten). Also zwei Ventile, in dieser Reihenfolge:
   1. Bezeichnung/Lieferant dürfen umbrechen — ihr `white-space: nowrap` ist es, das die
      Mindestbreite der Tabelle hochtreibt und die Zahlen hinausschiebt.
   2. Erst danach fällt die HERLEITUNG (.c-derive: Verbrauch je Lieferzeit, Lieferzeit) —
      das Ergebnis (Vorschlag) und die Aktion bleiben immer stehen. */
@media (min-width: 720.02px) and (max-width: 1240px) {
  /* Einzeilig BLEIBEN sie (ein Umbruch macht aus der Tabelle wieder eine Liste) — sie werden
     nur früher gekappt; der volle Text steht weiter im title. */
  .mw-grid td.c-name .cell-strong { max-width: 24ch; }
  .mw-grid td.c-lief > span { max-width: 13ch; }
  .mw-grid th.c-derive, .mw-grid td.c-derive { display: none; }
  .mw-grid thead th, .mw-grid tbody td { padding-left: 7px; padding-right: 7px; }
  /* Sicherheitsnetz: reicht es unter ~1050px trotzdem nicht (Vorschlag-Tab), scrollt die
     KARTE seitlich, statt Spalten zu verschlucken — Muster .tbl-wrap. Der Kopf klebt hier
     nicht mehr (ein Scroll-Container ist seine Bezugsfläche); lieber kein Sticky als eine
     unsichtbare Spalte. Am Phone bleibt es die Karten-Liste, dort greift das nie. */
  /* Kurzform, nicht overflow-x allein: neben dem `overflow: clip` des breiten Blocks wird
     die Karte sonst KEIN Scroll-Container (nachgemessen 09.09.2026 — die Spalte blieb weg). */
  .card:has(> .mw-grid) { overflow: auto; }
}

/* ── Bestellvorschlag (v3.80) — Ergänzungen zum Werte-Raster ────────────────────────────
   Die eine Kapsel der Zeile (Priorität) steht in der Aktionszelle vor dem Knopf; vorgezogene
   Zeilen der Bündelung treten zurück; die Parameterseite darf ihre Bedeutungsspalte umbrechen. */
.mw-grid td.mw-act { white-space: nowrap; }
.mw-grid td.mw-act .pill { margin-right: 8px; vertical-align: middle; }
.mw-grid td.mw-act form { display: inline-block; vertical-align: middle; }
.mw-grid tr.mw-vorgezogen td { color: var(--text2); }
.mw-param td.c-name .cell-strong { max-width: none; white-space: normal; }
.mw-param td.num .inp { width: 96px; text-align: right; }
.mw-param + .toolbar { padding: 12px 14px; margin: 0; justify-content: flex-end; }
/* 16 Spalten statt 11: im Band zwischen Notebook mit Sidebar und breitem Desktop fällt die Herleitung
   früher, und die Karte scrollt, statt Menge/Aktion unter `overflow: clip` zu verschlucken (Ventile 2 + 3). */
@media (min-width: 1240.02px) and (max-width: 1560px) {
  .mw-vorschlag th.c-derive, .mw-vorschlag td.c-derive { display: none; }
  .card:has(> .mw-vorschlag) { overflow: auto; }
}

/* Rot NUR bei echtem Verzug (Mengen/Werte bleiben schwarz-fett über .zbig). */
.zbig.late { color: var(--danger); }
/* Der leise „dringend"-Vermerk in den Fachkarten — kein Rot, keine Kapsel: nur Gewicht. */
.dring { color: var(--text2); font-weight: 700; }

/* Zeilen-Werkzeug („Termin setzen", „Anfrage") erscheint erst beim Hover — Muster .nf-claim. */
td.rt { white-space: nowrap; }
/* Am Desktop nur so breit wie sein Werkzeug; mobil zerlegt tbl-cards die Zeile zur Karte —
   dort würde width:1% den Knopf aus der Karte drücken (H-Scroll!). */
@media (min-width: 720.02px) { td.rt { width: 1%; } }
td.rt > .btn, td.rt > .tset, td.rt > form { opacity: 0; transition: opacity .12s; }
tr:hover > td.rt > .btn, tr:hover > td.rt > .tset, tr:hover > td.rt > form,
td.rt > .tset[open], td.rt > .tset:focus-within, td.rt > form:focus-within,
td.rt > .btn:focus-visible { opacity: 1; }

/* Treemap: Kacheln unter 5 % tragen nur noch den Prozentwert (der Name steht im title —
   die Fläche IST der Anteil, DESIGN_SYSTEM v3.37). */
.tcell.small.pct { align-items: center; justify-content: center; padding: 7px 6px; }
.tcell.small.pct .tp { font-size: 13px; }

/* Gruppenzeile mit einem NAMEN statt einem Etikett: „Fotolito Varesco Alfred GmbH" wäre in
   Versalien mit Sperrung unlesbar. Gewicht und Farbe bleiben die der Gruppenzeile. */
.grp-t.grp-name { text-transform: none; letter-spacing: .01em; font-size: 12.5px; }

/* ── 16 · Operations: Bestellungen · Lieferanten · Anfragen ──────────────────── */

/* Werte sind Text: Zahlen-/Datumszelle, echter Verzug (rot), Schwelle überschritten (amber).
   Bewusst NUR Farbe + Gewicht, keine Kapsel — Datum/Alter/KW/WT sind Werte. */
.mw-num  { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mw-bad  { color: var(--danger); font-weight: 600; }
.mw-warn { color: var(--warn); font-weight: 600; }

/* Zeilen-Werkzeug am Zeilenende: unsichtbar bis Hover/Fokus; ein gesetzter Zustand
   (.is-on: getaggter Lieferant, verknüpfte Aufgabe) bleibt sichtbar. */
.mw-rt { width: 96px; text-align: right; padding-right: 10px; white-space: nowrap; }
.mw-rtb {
  opacity: 0; border: 1px solid transparent; background: none; color: var(--text2);
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 7px;
  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}
.mw-rtb.is-on { opacity: 1; }
tr:hover > .mw-rt .mw-rtb,
tr:focus-within > .mw-rt .mw-rtb,
.mw-rtb:focus-visible { opacity: 1; }
.mw-rtb:hover { background: var(--surface3); color: var(--text); border-color: var(--border); }

/* Stern (Einkaufs-Tag) + Chevron der klickbaren Zeile. */
.mw-star { font-size: 17px; line-height: 1; padding: 3px 7px; color: var(--text3); }
.mw-star.is-on { color: var(--warn); }
.mw-chev { width: 14px; height: 14px; color: var(--text3); vertical-align: middle; margin-left: 6px; }
tr:hover .mw-chev { color: var(--text); }

/* Bestellungen */
.mw-best .mw-bt  { font-size: 13px; color: var(--text2); }
.mw-best .mw-bt b { font-weight: 600; color: var(--text); }
.mw-best .mw-bno { font-variant-numeric: tabular-nums; color: var(--text2); }  /* BL/BLF als Text, nicht als .tag */
.mw-best .mw-t1  { font-size: 12.5px; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mw-best .mw-t1 b { font-weight: 600; }
.mw-best .mw-tl  { color: var(--text3); }   /* Feld-Beschriftung („Wunsch", „Liefer") */
/* .mw-ico — leises Inline-Zeichen in der Namenszelle (Telefon-Link, Notiz-Hover). Ersetzt dort
   .icon-btn: der ist display:flex/32 px und riss die Zeile auf. */
.mw-ico { display: inline-flex; align-items: center; color: var(--text3); margin-left: 5px; vertical-align: -2px; }
.mw-ico svg { width: 13px; height: 13px; }
a.mw-ico:hover { color: var(--text); }
.mw-ico.is-note { cursor: help; }

/* Lieferanten */
.mw-lief .mw-search { margin: 0; flex: 1 1 200px; max-width: 300px; }
/* Karte unter der Liste, hinter EINEM Knopf (statt 280 px Attrappe über der Liste). */
.mw-map { margin-top: 14px; }
.mw-map > .mw-mapsum {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; font-size: 12.5px; font-weight: 600; color: var(--text2);
}
.mw-map > .mw-mapsum::-webkit-details-marker { display: none; }
.mw-map > .mw-mapsum svg { width: 15px; height: 15px; }
.mw-map > .mw-mapsum:hover { color: var(--text); }
.mw-map[open] > .mw-mapsum { border-bottom: 1px solid var(--border2); }

/* Anfragen: die Werkzeugzeile trägt hier NUR die Primäraktion. Hebt app.js sie in die
   Kopfzeile, bleibt eine leere Zeile zurück — die soll keinen Platz beanspruchen. */
.mw-anf .lc-tools:has(> .lc-tools-right:empty) { display: none; }

@media (min-width: 721px) {
  .mw-best table.tbl { table-layout: fixed; width: 100%; }
  .mw-best .tbl tbody td { vertical-align: middle; }
  .mw-best .c-best .mw-bt,
  .mw-best .c-best .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mw-best .c-term { width: 240px; }
  .mw-best .c-term .cell-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .mw-best .c-vers { width: 128px; }
  .mw-best td.c-vers { font-size: 12.5px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; }
  .mw-best .c-st  { width: 128px; }
  .mw-best .c-val { width: 92px; font-weight: 600; white-space: nowrap; }
  .mw-best .c-age { width: 96px; }
  .mw-best .c-kw  { width: 96px; }

  .mw-lief table.tbl { table-layout: fixed; width: 100%; }
  .mw-lief .tbl tbody td { vertical-align: middle; }
  .mw-lief .c-name .cell-strong { display: block; }
  .mw-lief .c-name .cell-strong,
  .mw-lief .c-name .cell-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mw-lief .c-abc  { width: 64px; }
  .mw-lief td.c-abc { color: var(--text2); }
  .mw-lief td.c-abc b { color: var(--text); font-weight: 700; }
  .mw-lief .c-open { width: 108px; }
  .mw-lief .c-ek   { width: 136px; font-weight: 600; white-space: nowrap; }  /* „€ 147.872" darf nicht umbrechen */
  .mw-lief .c-last { width: 148px; }
  .mw-lief td.c-last { color: var(--text2); }
  .mw-lief .c-dd   { width: 104px; }
  .mw-lief .c-vac  { width: 168px; }
  .mw-lief .mw-rt  { width: 84px; }

  .mw-anf table.tbl { table-layout: fixed; width: 100%; }
  .mw-anf .tbl tbody td { vertical-align: middle; }
  .mw-anf .c-anf .cell-strong,
  .mw-anf .c-anf .cell-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mw-anf .c-wt  { width: 92px; }
  .mw-anf .c-st  { width: 140px; }
  .mw-anf .c-due { width: 128px; }
}

/* ── 17 · Marketing: Start · Aufgaben · Content · Kampagnen ──────────────────── */

/* Der Hinweis über den Wege-Kacheln ist ein reiner .hint-Absatz (das Wort „Pipelines" steht
   nur noch EINMAL auf der Seite: als Spaltenkopf). Ohne Hinweis-Modus fällt der Absatz ganz
   weg — deshalb hängt der Rand am Absatz und nicht am Rahmen, sonst bliebe eine Lücke. */
.pipe-hint { margin: 0 0 10px; }
/* Kachel-Höhe: definierte Wege tragen kein Micro-Label mehr, undefinierte weiterhin
   „Definition folgt" — ohne Mindesthöhe säßen die Titelzeilen auf zwei Grundlinien. */
.pipe-name { min-height: 18px; }
/* Kampagnen-Karte: Targeting und Creative/Copy werden nur gerendert, wenn gepflegt; stehen
   beide da, brauchen sie einen Abstand zueinander. */
.kmp-txt { line-height: 1.6; }
.kmp-txt + .kmp-txt { margin-top: 8px; }

/* ── 18 · Marketing: Post-Wand (/mkt/posts, /mkt/freigabe) ───────────────────── */

/* Vier Kacheln je Reihe, kein Kartenrahmen: das Bild trägt die Kachel. Gleiche Höhe je Reihe
   (align-items: stretch + .fk { height: 100% }), damit die Aktionszeilen fluchten. */
/* Enger gerastert (v3.50.5): 236px liessen auf einem 1500er-Fenster vier Kacheln zu und
   damit zwei Zeilen pro Bildschirm. Das Kachelformat selbst (Bild 4:5) bleibt, wie am
   25.08.2026 abgenommen — nur passen jetzt mehr nebeneinander. */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr));
  gap: 12px; align-items: stretch; }
/* EINGERAHMT (v3.50.6). Die Kachel war randlos gebaut; ohne Rahmen ist nicht erkennbar, wo
   eine endet — Titel, Meta und vor allem die Knöpfe darunter wirken lose. Martin 28.08.2026:
   „die haben keine Umrahmung und somit schweben die Buttons." Derselbe Griff wie damals bei
   den Pipeline-Kacheln (.pipe-frame): ein Rahmen um das Bestehende, kein Neubau. */
.fk { display: flex; flex-direction: column; min-width: 0; height: 100%;
  border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
  padding: 9px 9px 11px; transition: border-color .12s, background .12s; }
.fk:hover { border-color: var(--border2); background: var(--surface2); }

/* Bild 4:5, rund, randlos. position:relative für Pfeile/Punkte/Zähler/Status-Kapsel. */
.fk-img { position: relative; display: block; border-radius: 9px; overflow: hidden;
  background: var(--surface2); aspect-ratio: 4 / 5; text-decoration: none; color: var(--text3); }
.fk-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Die Verlinkung ist eine Deckschicht statt eines <a> um die Blätter-Knöpfe (gültiges Markup). */
.fk-lnk { position: absolute; inset: 0; z-index: 1; display: block; }
.fk-ph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 28px; height: 28px; }

/* Karussell: Pfeile erst beim Hover — auf Touch immer sichtbar. */
.fk-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 26px; height: 26px;
  border-radius: 50%; border: 0; padding: 0; z-index: 2; cursor: pointer;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--text);
  display: grid; place-items: center; opacity: 0; transition: opacity .12s; }
.fk-img:hover .fk-nav, .fk-nav:focus-visible { opacity: .95; }
.fk-nav.l { left: 6px; } .fk-nav.r { right: 6px; }
.fk-nav svg { width: 14px; height: 14px; }

.fk-dots { position: absolute; left: 0; right: 0; bottom: 7px; display: flex;
  justify-content: center; gap: 4px; z-index: 2; }
.fk-dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.65);
  box-shadow: 0 0 3px rgba(0,0,0,.4); }
.fk-dots i.on { background: #fff; }

/* „3 Bilder" — Wert-Text auf dem Bild, keine Zustands-Kapsel (Schrift + Schleier statt Pille). */
.fk-count { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10.5px;
  font-weight: 600; color: #fff; background: rgba(0,0,0,.42); border-radius: 6px;
  padding: 2px 6px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
/* Die EINE Kapsel je Kachel: der Status (nur /mkt/posts — die Freigabe-Wand übergibt keinen). */
.fk-img > .pill { position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.25); }

.fk-body { padding: 8px 2px 0; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.fk-title { font-size: 13px; font-weight: 650; line-height: 1.3; color: var(--text);
  text-decoration: none; overflow-wrap: anywhere; margin-bottom: 4px; }
.fk-title:hover { color: var(--accent2); }
/* Der Beitragstext IST der Post: volle Caption, scrollt in der Kachel (max ~128px). */
.fk-txt { font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; }
.fk-txt.full { display: block; -webkit-line-clamp: unset; max-height: 128px; overflow-y: auto;
  overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }

/* Eine ruhige Meta-Zeile: Termin · (Warnung) · Format · Kanäle · Autor — alles Text. */
.fk-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: auto;
  padding-top: 8px; font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.fk-when.is-late { color: var(--danger); font-weight: 600; }
.fk-warn { color: var(--danger); text-decoration: none; }
.fk-warn:hover { text-decoration: underline; }
.fk-ch { display: inline-flex; gap: 3px; }
.fk-meta .chan-ico { width: 18px; height: 18px; font-size: 8.5px; border-radius: 5px; }
.fk-meta .lead-ini { width: 18px; height: 18px; font-size: 8px; margin-left: auto; }

/* Kachelfuß: zwei gleich breite, NEUTRALE Knöpfe. Die <form>-Hüllen sind die Rasterzellen. */
.fk-act { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.fk-act > form { min-width: 0; display: block; }
.fk-act .btn { width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; height: 30px; padding: 0 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
/* „Termin setzen" (abgelaufener Termin) steht ohne Icon und eine Spur kleiner — sonst bricht
   das lange Wortpaar um und die Kachel wird höher als ihre Nachbarn in derselben Reihe. */
.fk-act .fk-yes:not(.fg-approve) { font-size: 12px; }
.fk-act svg { width: 14px; height: 14px; flex: none; }
/* Farbe erst bei Hover; die volle Quittung (.is-armed) bleibt dem Klick vorbehalten. */
.fk-act .fg-approve { font-weight: 600; color: var(--text2); border-color: var(--border);
  background: var(--surface); }
.fk-act .fg-approve:hover { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, var(--surface));
  border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.fk-act .fg-approve.is-armed { background: var(--ok); color: #fff; border-color: var(--ok); }
.fk-act .fg-reject-btn:hover { color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--surface));
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }

/* Kopfzeilen der Marketing-Wände — kein .page-head mehr (die Schale trägt die Brotkrume).
   .mk-head = Abschnittskopf der Freigabe-Wand, .mk-bar = Werkzeugzeile von /mkt/posts,
   .mk-n = die Zahl als schlichter Wert-Text (nie Kapsel). */
.mk-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.mk-head b { font-size: 14px; font-weight: 650; }
.mk-head .n { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.mk-head .mk-tools { margin-left: auto; }
.mk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.mk-bar .li-search { flex: 1 1 220px; width: auto; min-width: 160px; margin: 0; }
.mk-n { font-size: 12.5px; color: var(--text3); font-variant-numeric: tabular-nums; }

/* Format als WERT-Text ($mktFormatText) statt .tag-Kapsel — Post-Kachel, Aufgaben-Tabelle,
   Kalender-Agenda. */
.fmt-t { font-size: 11.5px; color: var(--text3); white-space: nowrap; }
td .fmt-t { font-size: 12px; }

/* ── 19 · Marketing: Mediathek (/mkt/bilder, /mkt/ordner, Auswahl-Leiste) ────── */

/* EINE Werkzeugzeile (Segment · Suche · Sortierung) statt drei Zeilen. */
.px-bar { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; flex-wrap: wrap; }
.px-bar .px-typ { margin: 0; flex: none; }
.px-bar .search { flex: 1 1 220px; min-width: 0; width: auto; max-width: none; margin: 0; }
.px-bar .filter-chip { flex: none; }
/* Seitenzähler ist ein WERT: schlichter Text, tabellarische Ziffern, keine Kapsel. */
.px-page { font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }

/* Auswahl-Leiste unten: × · „N ausgewählt" · „Alle N" · drei beschriftete Aktionen · EIN roter Knopf. */
.px-bulk-x { width: 26px; height: 26px; flex: none; border: 0; border-radius: 50%;
  background: var(--surface3); color: var(--text2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
.px-bulk-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.px-bulk-x:hover { background: var(--surface2); color: var(--text); }
/* Trennstrich weg — die Aktionen tragen jetzt selbst Kontur. */
.px-bulk-acts { gap: 6px; margin-left: 4px; padding-left: 0; border-left: 0; }
.px-bulk-acts .btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.px-bulk .cm-ic { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.px-bulk-post { margin-left: 4px; white-space: nowrap; }
.px-bulk-all { white-space: nowrap; }

/* /mkt/ordner: die Ablagefläche erscheint NUR beim Ziehen. mkt.js hängt `js` an jedes
   [data-px-upload] — ohne JS bleibt das Formular ganz normal in der Seite (Auswählen +
   „Hochladen"), mit JS wird es zur Überblendung über der ganzen Seite (sonst säße die Karte
   bei langen Ordnern weit unten außerhalb des Bildes). Der Weg zum Dateiwähler steht im
   Ordnerkopf (label[for="pxFile"]). */
.px-up.js.px-up-quiet { position: fixed; inset: 0; z-index: 240; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.px-up.js.px-up-quiet.is-over { opacity: 1; pointer-events: auto; }
.px-up.js.px-up-quiet::before { content: ''; position: absolute; inset: 0;
  background: var(--surface); opacity: .88; }
.px-up.js.px-up-quiet .px-up-drop { position: relative; justify-content: center;
  width: min(520px, 82%); padding: 22px 18px; background: var(--surface);
  border-color: rgba(var(--accent-rgb), .55); color: var(--accent2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28); }

/* Sammlungs-Beschreibung: Textlink statt dauerhaft offenem Feld (data-reveal). */
.px-desc-add { margin: 2px 0 0; padding: 0; border: 0; background: none; font: inherit;
  font-size: 12.5px; color: var(--accent2); cursor: pointer; }
.px-desc-add:hover { text-decoration: underline; }

/* ── 20 · Marketing: Datei-Seite (/mkt/bilder/{id}) ──────────────────────────── */
/* Links die Bühne (Bild FREI: kein Kasten, kein Schatten, nichts darunter), rechts EINE
   ruhige Leiste, unten der Filmstreifen der Serie. Icons aus dem Feather-Sprite. */
.pg-min-bild .i { width: 15px; height: 15px; flex: none; }

/* Vollflächiges Gerüst wie beim Teamchat-Panel: NUR mit :has + feinem Zeiger; der
   pointer:coarse-Block (iOS-Weißbild-Fix) hebt das Innenscroll-Gerüst bewusst auf. */
@media (min-width: 720.02px) and (pointer: fine) {
  @supports selector(:has(a)) {
    .content:has(> .pg-min-bild) { padding: 14px 18px 18px; overflow: hidden; display: flex; flex-direction: column; }
    .pg-min-bild { flex: 1; min-height: 0; margin: 0; width: 100%; max-width: none;
      display: grid; grid-template-columns: minmax(0, 1fr) 320px;
      grid-template-rows: auto auto minmax(0, 1fr) auto;
      grid-template-areas: "back back" "menu menu" "stage rail" "strip strip";
      column-gap: 14px; row-gap: 0; }
    .pg-min-bild > .pg-back      { grid-area: back; }
    .pg-min-bild > [data-page-menu] { grid-area: menu; margin-bottom: 8px; }
    .pg-min-bild > .stage        { grid-area: stage; }
    .pg-min-bild > .rail         { grid-area: rail; }
    .pg-min-bild > .strip        { grid-area: strip; margin-top: 12px; }
  }
}
/* Zurück-Link: app.js hebt ihn als runden Pfeil in die Kopfzeile und blendet die Zeile aus;
   ohne JS führt zusätzlich die Brotkrume zurück. */
.pg-min-bild > .pg-back { margin-bottom: 10px; }

.pg-min-bild .stage { position: relative; min-height: 0; background: none; border: 0;
  display: flex; align-items: center; justify-content: center; gap: 14px; }
.pg-min-bild .st-img { display: flex; min-width: 0; max-width: calc(100% - 100px); max-height: 100%; }
.pg-min-bild .st-img img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; display: block; }
.pg-min-bild .st-noimg { width: 220px; height: 220px; border-radius: 14px; background: var(--surface3);
  display: grid; place-items: center; color: var(--text3); }
.pg-min-bild .st-noimg .i { width: 40px; height: 40px; }
/* Blätter-Pfeile direkt neben dem Bild (nicht darunter, nicht in der Kopfzeile). */
.pg-min-bild .st-nav { flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text2);
  display: grid; place-items: center; cursor: pointer; opacity: .85; text-decoration: none; }
.pg-min-bild .st-nav:hover { opacity: 1; color: var(--text); }
.pg-min-bild .st-nav .i { width: 16px; height: 16px; }
/* Am Anfang/Ende der Serie: Platzhalter, damit das Bild nicht springt. */
.pg-min-bild .st-nav.is-off { opacity: .18; cursor: default; pointer-events: none; }

/* Leiste rechts: Werte als Text, Bearbeiten erst bei Hover. */
.pg-min-bild .rail { min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.pg-min-bild .rail > * { padding: 14px 16px; border-top: 1px solid var(--border2); }
.pg-min-bild .rail > *:first-child { border-top: 0; }
.pg-min-bild .r-name h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px;
  line-height: 1.25; overflow-wrap: anywhere; }
.pg-min-bild .r-name .sub { margin-top: 3px; font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }
.pg-min-bild .r-acts { display: flex; gap: 6px; flex-wrap: wrap; }
.pg-min-bild .r-acts .btn { gap: 6px; }
.pg-min-bild .r-acts .btn .i { width: 14px; height: 14px; }
.pg-min-bild .r-act-form { margin: 0; display: flex; }
.pg-min-bild .r-lab { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text3); margin: 0 0 8px; display: flex; align-items: center; gap: 6px; min-height: 22px; }
.pg-min-bild .r-lab .edit { margin-left: auto; width: 22px; height: 22px; border: 0; background: none;
  color: var(--text3); border-radius: 6px; display: grid; place-items: center; cursor: pointer; opacity: 0; }
.pg-min-bild .rail > *:hover .r-lab .edit,
.pg-min-bild .r-lab .edit:focus-visible { opacity: 1; }
.pg-min-bild .r-lab .edit:hover { background: var(--surface3); color: var(--text); }
.pg-min-bild .r-lab .edit .i { width: 13px; height: 13px; }
.pg-min-bild .r-row { display: flex; align-items: center; gap: 9px; font-size: 13px; padding: 4px 0;
  color: var(--text); text-decoration: none; }
.pg-min-bild .r-row .i { color: var(--text3); }
.pg-min-bild .r-row .v { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-min-bild .r-row .v.empty { font-weight: 500; color: var(--text3); }
.pg-min-bild .r-row .chev { margin-left: auto; color: var(--text3); display: flex; }
.pg-min-bild .r-row.link { cursor: pointer; border-radius: 8px; margin: 0 -8px; padding: 6px 8px; }
.pg-min-bild .r-row.link:hover { background: var(--surface2); }
/* Eingabefelder klappen erst über den Stift auf (app.js [data-reveal] setzt display:block). */
.pg-min-bild .r-edit { display: none; margin-top: 8px; }
.pg-min-bild .r-edit.is-on { display: block; }
.pg-min-bild .r-edit select, .pg-min-bild .r-edit input { width: 100%; margin-top: 6px; }
.pg-min-bild .r-edit > :first-child { margin-top: 0; }
.pg-min-bild .r-sublab { font-size: 11px; color: var(--text3); margin: 2px 0 4px; }

/* Sterne: leise, bis man hinfährt — 5 leere Sterne im Ruhezustand sind Lärm. */
.pg-min-bild .stars { display: inline-flex; gap: 1px; margin-left: auto; }
.pg-min-bild .r-row.rated .stars { margin-left: 0; }
.pg-min-bild .star { width: 20px; height: 20px; border: 0; background: none; color: var(--text3);
  opacity: .45; cursor: pointer; padding: 0; display: grid; place-items: center; }
.pg-min-bild .star .i { width: 14px; height: 14px; fill: none; }
.pg-min-bild .star.on { opacity: 1; color: var(--warn); }
.pg-min-bild .star.on .i { fill: currentColor; }
.pg-min-bild .stars:hover .star { opacity: 1; color: var(--warn); }
.pg-min-bild .stars:hover .star:hover ~ .star { opacity: .45; color: var(--text3); }
.pg-min-bild .stars:hover .star:hover ~ .star .i { fill: none; }

/* Schlagwörter: leise umrandete Kapseln, × erst bei Hover. */
.pg-min-bild .kws { display: flex; flex-wrap: wrap; gap: 5px; }
.pg-min-bild .kw { display: inline-flex; align-items: center; font-size: 12px; color: var(--text2);
  padding: 2px 7px 2px 9px; border-radius: 6px; border: 1px solid var(--border); background: none; }
.pg-min-bild .kw a { color: inherit; text-decoration: none; }
.pg-min-bild .kw:hover { border-color: var(--text3); }
.pg-min-bild .kw-x { border: 0; background: none; color: var(--text3); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0 0 0 3px; opacity: 0; }
.pg-min-bild .kw:hover .kw-x, .pg-min-bild .kw-x:focus-visible { opacity: 1; }
.pg-min-bild .kw-add { font: inherit; font-size: 12px; padding: 2px 9px; border-radius: 6px;
  border: 1px dashed var(--border); background: none; color: var(--text3); cursor: text; min-width: 104px; }
.pg-min-bild .kw-add:focus { outline: none; border-color: var(--text3); color: var(--text); }

/* Beschreibung/Betreff: klicken = schreiben. Leer zeigt nur den Platzhalter (data-ph) — kein
   Text im Element, der sonst versehentlich gespeichert würde. */
.pg-min-bild .desc { font-size: 13px; color: var(--text); line-height: 1.5; min-height: 20px;
  border-radius: 6px; padding: 2px 4px; margin: -2px -4px; cursor: text; outline: none; }
.pg-min-bild .desc:hover { background: var(--surface2); }
.pg-min-bild .desc:focus { background: var(--surface2); box-shadow: 0 0 0 1px var(--border); }
.pg-min-bild .desc:empty::before { content: attr(data-ph); color: var(--text3); }
.pg-min-bild .desc:focus:empty::before { content: ''; }
.pg-min-bild .px-nojs { display: flex; flex-direction: column; gap: 8px; }

/* Filmstreifen der Serie. */
.pg-min-bild .strip { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pg-min-bild .strip .fs-lab { flex: none; font-size: 12px; color: var(--text2); width: 150px; line-height: 1.3; }
.pg-min-bild .strip .fs-lab b { display: block; color: var(--text); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-min-bild .strip .fs { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding: 3px; scrollbar-width: none; }
.pg-min-bild .strip .fs::-webkit-scrollbar { display: none; }
.pg-min-bild .fs-th { flex: none; height: 76px; width: 76px; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; background: var(--surface3); opacity: .8; transition: opacity .12s; }
.pg-min-bild .fs-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-min-bild .fs-th .fs-noimg { display: block; width: 100%; height: 100%; }
.pg-min-bild .fs-th:hover { opacity: 1; }
.pg-min-bild .fs-th.is-cur { border-color: var(--text); opacity: 1; }
.pg-min-bild .strip .fs-hint { flex: none; font-size: 11px; color: var(--text3); }
.pg-min-bild .strip .fs-hint kbd { font: inherit; font-size: 10px; padding: 1px 5px;
  border-radius: 4px; border: 1px solid var(--border); background: var(--surface3); }

/* ── 21 · Politur: Dashboard-Kartenkopf über dem Zahlenstreifen ──────────────── */
/* Der Abschnitt „Zahlen" sitzt jetzt in einer section.card — der Streifen bringt seine eigene
   Trennlinie und ein Kopf-Padding mit, beides ist im Kartenrahmen falsch. */
.pg-dash .card > .mstrip { padding: 12px 8px; border-bottom: 0; }
/* Der Kartenrahmen kostet Breite: die neun Zahlen rücken enger zusammen, damit der Streifen
   auf einem 1280er-Fenster EINE Reihe bleibt. */
.pg-dash .card > .mstrip .mstat { padding: 0 7px; min-width: 60px; }

/* ── 22 · Grobzeiger (Touch): Hover-Werkzeuge gibt es dort nicht ─────────────── */
@media (pointer: coarse) {
  .pg-transport .truck-plus,
  .pg-transport .truck-foot,
  .pg-transport .trow-right .btn { opacity: 1; }
  td.rt > .btn, td.rt > .tset, td.rt > form { opacity: 1; }
  .mw-rtb { opacity: 1; min-height: 34px; }
  .fk-nav { opacity: .95; }
  .pg-min-bild .r-lab .edit,
  .pg-min-bild .kw-x { opacity: 1; }
  .pg-min-bild .star { opacity: 1; }
  .pg-min-bild .star:not(.on) { color: var(--text3); opacity: .5; }
  .pg-min-bild .strip .fs-hint { display: none; }   /* Pfeiltasten gibt es am Handy nicht */
  .pg-min-bild .st-nav { width: 40px; height: 40px; }
}

/* ── 23 · Schmal / Mobil: ein Fokus je Screen, kein Seitwärts-Scrollen ───────── */

/* Datei-Seite gestapelt schon ab 900px (die Leiste braucht 320px neben dem Bild). */
@media (max-width: 900px) {
  .pg-min-bild { display: block; }
  .pg-min-bild > .stage { margin-bottom: 14px; }
  .pg-min-bild .st-img { max-height: 58vh; }
  .pg-min-bild > .rail { overflow: visible; margin-bottom: 14px; }
}

@media (max-width: 720px) {
  /* Ops-Start: eine Zahlen-Zeile und „Mein Fokus". Aufgaben, Transport und Material erreicht
     die MNAV-Kapsel — Kachelwand, Team-Überfällig-Karte und Bereichs-Liste sind dort Ballast. */
  .pg-ops-home .oh-kpi,
  .pg-ops-home .oh-overdue,
  .pg-ops-home .oh-areas { display: none; }
  .pg-ops-home .oh-mstat { display: flex; margin: 0 0 16px; }
  /* Bleibt nach dem Ausblenden nur die leere Karten-Hülle übrig: auch die weg. */
  .pg-ops-home .oh-cards:not(:has(.oh-fokus)) { display: none; }
  /* Ohne Bereiche bleibt allein der Leersatz — der braucht keinen Abstand nach oben. */
  .pg-ops-home .oh-empty { margin-top: 0; }

  /* Transport: am Phone liegt die Rail als Kopfzeile — „KW 34" und die Datumsspanne
     brauchen den normalen Wortabstand zurück, sonst kleben sie aneinander. */
  .pg-transport .kw-band.kw-empty .kw-rail { gap: 8px; }

  /* Materialwirtschaft: die Sichten-Kapsel darf umbrechen statt seitlich zu rutschen. */
  .mw-tools .seg { flex-wrap: wrap; }
  /* Gruppenzeilen sind mobil Überschriften, keine Karten (tbl-cards macht sonst fast leere
     Kästen aus tr.grp) — Muster .nf-tbl, hier für „Was knapp wird" und die Mindermengen. */
  .knp tbody tr.grp, .mw-minder tbody tr.grp, .mw-vorschlag tbody tr.grp {
    background: none; border: 0; border-radius: 0; box-shadow: none; padding: 10px 4px 2px; }
  .knp tbody tr.grp > td, .mw-minder tbody tr.grp > td, .mw-vorschlag tbody tr.grp > td { padding: 0; border-bottom: 0; }
  /* Vorschlag: Menge UND Aktion stehen rechts — der zweite auto-Rand ließe die Menge mittig hängen. */
  .mw-vorschlag tbody td.m-last ~ td.m-last { margin-left: 10px; }
  /* Eine leere Zelle ist keine Karten-Zeile — sonst reißt z. B. der leere Status eine Lücke. */
  .mw-best table.tbl.tbl-cards tbody td:empty,
  .mw-lief table.tbl.tbl-cards tbody td:empty,
  .mw-anf  table.tbl.tbl-cards tbody td:empty { display: none; }
  /* Lieferanten: die Suche bekommt eine eigene Zeile, Umfang + ABC teilen sich die zweite —
     sonst schiebt das Auswahlfeld die Seite in den Querlauf. */
  .mw-lief .mw-search { flex: 1 1 100%; max-width: none; }
  .mw-lief .lc-tools-right { margin-left: 0; width: 100%; }
  .mw-lief .lc-tools-right .seg { flex: 1 1 auto; }
  .mw-lief .lc-tools-right .seg .seg-btn { flex: 1; justify-content: center; }
  .mw-lief .lc-tools-right select.filter-chip { flex: 1 1 110px; min-width: 0; max-width: 46vw; }
  /* Anfragen: das Topbar-Popover nie breiter als der Schirm. */
  .topbar-right .mw-new > .card { min-width: 0 !important; width: min(92vw, 360px); }

  /* Marketing: die drei undefinierten Wege-Kacheln sind flex 1 1 100% und füllten
     untereinander den halben Schirm mit toten Kästen. Ein Fokus je Screen. */
  .pipe-card.is-soon { display: none; }

  /* Post-Wand: zwei Kacheln je Reihe. */
  .post-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .fk-txt.full { max-height: 96px; }
  .fk-act .btn { font-size: 12px; }
  .mk-bar { gap: 8px; }
  .mk-bar .li-search { flex: 1 1 100%; order: -1; }

  /* Mediathek */
  .px-bar { gap: 8px; }
  .px-bar .px-typ { width: 100%; }
  .px-bar .search { flex: 1 1 140px; }
  /* Schmal: die Bulk-Aktionen bleiben als Icons, der rote Knopf behält sein Wort. */
  .px-bulk-acts .btn .px-bulk-lab { display: none; }
  .px-bulk-acts .btn { padding-left: 10px; padding-right: 10px; }
  .px-bulk .cm-ic { width: 16px; height: 16px; }

  /* Datei-Seite */
  .pg-min-bild .st-img { max-width: calc(100% - 88px); max-height: 52vh; }
  .pg-min-bild .strip { flex-wrap: wrap; }
  .pg-min-bild .strip .fs-lab { width: 100%; }
  .pg-min-bild .fs-th { height: 64px; width: 64px; }

  /* Dashboard: Touch-Luft für die Zahlen der Karte „Zahlen" zurück. */
  .pg-dash .card > .mstrip { padding: 10px 6px 12px; }
  .pg-dash .card > .mstrip .mstat { padding: 0 12px; min-width: 74px; }
}

@media (max-width: 460px) {
  .px-bulk-n .px-bulk-word { display: none; }
}

/* ── Dashboard „Auftragseingang" (26.08.2026): vier gleich breite Felder statt neun
   gequetschter Kennzahlen in einer Reihe; die Statuszahlen darunter als EINE ruhige
   Zeile aus klickbaren Zahlen. Rot nur, wo wirklich etwas liegen bleibt. ── */
.dz-card .card-head { border-bottom: 0; padding-bottom: 2px; }
.dz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 6px 16px 14px; }
.dz-cell { padding: 0 18px; border-left: 1px solid var(--border2); min-width: 0; }
.dz-cell:first-child { padding-left: 0; border-left: 0; }
.dz-num { font-size: 24px; font-weight: 650; letter-spacing: -.6px; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-lab { margin-top: 3px; font-size: 11.5px; color: var(--text2); }
.dz-delta { margin-top: 2px; font-size: 11px; color: var(--text3); min-height: 15px; }
/* Der Pfeil trägt die Aussage: grün hoch, rot runter (der Bezugstext bleibt leise). */
.dz-delta .up { color: var(--ok); font-weight: 600; }
.dz-delta .dn { color: var(--danger); font-weight: 600; }
.dz-line { display: flex; flex-wrap: wrap; gap: 0 22px; padding: 11px 16px 12px;
  border-top: 1px solid var(--border2); background: var(--surface2); border-radius: 0 0 12px 12px; }
.dz-item { font-size: 12.5px; color: var(--text2); text-decoration: none; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.dz-item b { font-weight: 700; color: var(--text); font-size: 13.5px; }
.dz-item span { color: var(--text3); }
.dz-item:hover { color: var(--text); }
.dz-item:hover b { text-decoration: underline; text-underline-offset: 3px; }
.dz-item.is-bad b { color: var(--danger); }
.dz-item.is-due b { color: var(--warn); }
@media (max-width: 720px) {
  .dz-grid { grid-template-columns: repeat(2, 1fr); row-gap: 14px; padding: 6px 14px 12px; }
  .dz-cell:nth-child(odd) { padding-left: 0; border-left: 0; }
  .dz-num { font-size: 20px; }
  .dz-line { gap: 4px 16px; }
}

/* Schloss über den Beträgen (Martin 01.09.2026): die Beträge stehen erst da, wenn das Schloss in
   der Kopfzeile mit der PIN geöffnet ist. Die Karte kommt vom Server verhüllt (.is-veiled; app.js
   tauscht die data-v-Werte ein): Betrag = Punkte in der leisen Textfarbe, Delta-Zeile unsichtbar
   (der Platz bleibt, nichts springt), die Zähler darunter bleiben lesbar. Ein Klick auf die
   Punkte öffnet dieselbe PIN-Abfrage wie das Schloss. */
.dz-card.is-veiled .dz-v { color: var(--text3); letter-spacing: .06em; }
.dz-card.is-veiled .dz-delta { visibility: hidden; }
.dz-card.is-veiled .dz-grid { cursor: pointer; }

/* „System" sieht nur ein Admin — der Gruppenkopf sagt es (Martin 26.08.2026). */
.sb-group-label.is-admin { color: var(--accent2); display: flex; align-items: baseline; gap: 6px; }
.sb-only { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent2); background: rgba(var(--accent-rgb), .12); border-radius: 4px; padding: 1px 4px; }
.app.rail .sb-only { display: none; }

/* ============================================================================
   Posteingang — LISTE (views/pages/inbox-list.php), Welle 3 · 26.08.2026
   Martins Befund: „das Datum stimmt nicht" + „wenn dann aufmachen muss man die mail".

   Folge im Markup: die vier Zeilen-Werkzeuge (Zuordnen / VK anlegen / Übernehmen /
   Erledigt) sind ersatzlos weg — die Zeile hat GENAU EINE Geste (öffnen). Rechts
   steht nur noch, WANN die Mail kam und WER sich kümmert.

   Diese Regeln stehen NACH dem .inbox-*-Block (~446); die Regeln der Welle 1 für das
   Hover-Werkzeug der Zeile sind mit dem Markup zusammen ersatzlos entfallen.
   ========================================================================= */

/* Firma neben dem Absender: Wert als Text, kein Chip. Sie schrumpft VOR dem Namen
   (flex-shrink 2), damit bei engen Zeilen der Absender lesbar bleibt. */
.ix-firm { flex: 0 2 auto; min-width: 0; font-size: 12.5px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-firm::before { content: "·"; margin-right: 5px; color: var(--text3); }

/* Die einzige Pille der Zeile (Quelle „Anruf" statt Mail) — ohne Emoji, ohne Farbe. */
.ix-chip { flex: 0 0 auto; font-weight: 600; }

/* Aussortier-Grund („Sonstiges"): EINE Zeile wie die Vorschau — zweizeilige Begründungen
   haben die Zeilen dort unterschiedlich hoch gemacht. Der ganze Satz steht in der Mail. */
.inbox-row .inbox-meta { display: block; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }

/* ── Rechte Spalte: Datum oben, Zuständiger darunter, Chevron beim Überfahren.
   Feste Mindestbreite, damit die Datumsspalte über alle Zeilen auf einer Kante steht
   (heute „08:31", gestern „Gestern 17:12", älter „21.08.2026"). */
.inbox-row .ix-side { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 5px; min-width: 96px; padding-top: 1px; }
.inbox-row .ix-side .inbox-time { margin-left: 0; }
/* Feste Höhe = kein Springen, wenn der Chevron beim Überfahren erscheint. */
.ix-side-b { display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-height: 22px; }

/* Chevron: reine Wegweisung, kein Werkzeug — leise und nur bei Hover/Fokus. */
.ix-chev-row { color: var(--text3); opacity: 0; transition: opacity .12s; }
.inbox-row:hover .ix-chev-row, .inbox-row:focus-within .ix-chev-row { opacity: .9; }

@media (pointer: coarse) {
  /* Finger kennt kein Überfahren — der Pfeil wäre dort dauerhafte Deko. */
  .ix-chev-row { display: none; }
}
@media (max-width: 720px) {
  /* Die Spalte bleibt rechts (kein Umbruch mehr — es gibt nichts mehr zu bedienen),
     nur schmaler: die Uhrzeit reicht, das Jahr trägt der Rest der Zeile. */
  .inbox-row .ix-side { min-width: 0; }
  .ix-firm { display: none; }
}

/* ── Minimalismus Welle 2 · POSTEINGANG „Mail-Ansicht" ───────────────────────────────
   Betrifft: views/pages/inbox-detail.php  (.ixh*, .ixn*, .ixq*, .ix-solo)
             src/helpers.php::render_attachments()  (.mailatt* — auch auf der VK-Seite!)

   Vorhandene Bausteine bleiben und werden NICHT dupliziert: .card, .btn/.btn-primary,
   .pill.green, .lead-ini, .cm-item/.mi-sep, .modal/.modal-card, .mnav, .ctabs/.ctab,
   .ix-thread/.ix-msg/.ix-msg-head/.ix-msg-collapsed/.ix-when/.ix-who/.ix-snip/.ix-att.

   ERSETZT beim Merge diese app.css-Regeln (dort ändern statt zwei Wahrheiten zu führen):
     app.css:1000  .inbox-detail .ix-actions …      → ungenutzt (Knopfreihe ist jetzt .ixh-acts)
     app.css:1010-1011 + 4308-4309  .ix-note …      → ungenutzt (Notiz schreibt man im Popup)
     app.css:4305-4307  .inbox-detail .ix-who-note  → ungenutzt (Zuständiger steht in .ixh-meta)
   Der Kommentar in app.css:1001 („Border/Radius per inline-style überschrieben") stimmt
   nicht mehr: die iframes tragen nur noch min-height inline, Rahmen kommt von hier.

   ACHTUNG Reihenfolge: `.mailatt*` gilt AUCH für views/pages/leads-detail.php (dieselbe
   Helper-Funktion). Beim Merge einmal aufnehmen, nicht je Seite kopieren. ────────────── */

/* ── Kopfkarte: WER · WANN · WOHIN, dann der Betreff als Überschrift ───────────────── */
.inbox-detail .ixh { padding: 0; overflow: visible; margin-bottom: 14px; }
.inbox-detail .ixh-top { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 0; }
.inbox-detail .ixh-ini { width: 30px; height: 30px; font-size: 11px; flex: none; margin-top: 1px; }
.inbox-detail .ixh-id { flex: 1; min-width: 0; }
/* Absender + Firma: EINE fette Zeile. Kein Titel-Gewicht — die Überschrift ist der Betreff. */
.inbox-detail .ixh-from { font-size: 14px; font-weight: 700; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Metazeile: alles Werte, alles Text, keine Kapseln. Bricht statt zu scrollen. */
.inbox-detail .ixh-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 3px; font-size: 12.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.inbox-detail .ixh-meta .mono { font-size: 12px; }
.inbox-detail .ixh-sep { color: var(--text3); }
.inbox-detail .ixh-acts { display: flex; align-items: center; gap: 8px; flex: none; }
/* Betreff = Überschrift der Seite. 18px wie jede Detail-Überschrift im Hub (.ls-id h1). */
.inbox-detail .ixh-subj { font-size: 18px; font-weight: 700; letter-spacing: -.3px;
  line-height: 1.3; color: var(--text); margin: 10px 0 0; padding: 0 16px 14px; }
/* Anhänge an der Kopfkarte (wenn sie zu einer zugeklappten Nachricht gehören). */
.inbox-detail .ixh-att { padding: 0 16px 14px; margin-top: -4px; }

/* ── Interne Notizen: was da ist, steht da (geschrieben wird im ⋯-Popup) ───────────── */
.inbox-detail .ixn-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.inbox-detail .ixn { background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 13px; }
.inbox-detail .ixn-h { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text2); }
.inbox-detail .ixn-who { font-weight: 600; color: var(--text); }
.inbox-detail .ixn-when { margin-left: auto; font-variant-numeric: tabular-nums; }
.inbox-detail .ixn-b { font-size: 13.5px; line-height: 1.5; color: var(--text); margin-top: 5px; }

/* ── Mail-Block: Rahmen kommt aus dem Stylesheet, nicht mehr aus style="" ──────────── */
.inbox-detail .mail-inline { border: 1px solid var(--border); border-top: 0;
  border-radius: 0 0 12px 12px; }
/* Einzelne Mail ohne Nachrichtenkopf (Absender/Zeit stehen in der Kopfkarte). */
.inbox-detail .ix-solo .mail-inline { border-top: 1px solid var(--border); border-radius: 12px; }

/* ── „Zitierten Verlauf anzeigen": leise, unter der Mail, versteckt bis gebraucht ──── */
/* Sichtbar wird der Knopf erst, wenn der Renderer wirklich geschnitten hat — app.js
   nimmt das [hidden] weg, sobald das Dokument .crm-quoted-cut trägt (js/inbox-mail.js). */
.inbox-detail .ixq { display: flex; }
.inbox-detail .ixq-btn { display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 0; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: none; color: var(--text2); font-size: 12px; cursor: pointer; }
/* [hidden]-FALLE: das eigene `display` oben schlägt die Browser-Regel [hidden]{display:none}.
   Ohne diese Zeile stünde der Knopf IMMER da — auch wenn gar nichts geschnitten wurde. */
.inbox-detail .ixq-btn[hidden] { display: none; }
.inbox-detail .ixq-btn:hover { color: var(--text); border-color: var(--text3); }
.inbox-detail .ixq-ico { width: 13px; height: 13px; flex: none; transition: transform .15s; }
.inbox-detail .ixq-btn[aria-pressed="true"] .ixq-ico { transform: rotate(180deg); }
/* Anhänge, die an einer Nachricht hängen (nicht an der Kopfkarte). */
.inbox-detail .ix-att-row { margin-top: 10px; }

/* ── Anhang-Chips: kleiner und ruhiger (Icon · Name · Größe) ──────────────────────────
   Gilt für Posteingang UND Verkaufschance (render_attachments). Riskante Typen behalten
   Rot + Warnung + Rückfrage — das ist der einzige Ort, an dem hier Farbe stehen darf.
   NAME BEACHTEN: `.att-chip` ist SCHON VERGEBEN (app.css:1837, die Datei-Chips im
   Mail-Composer der VK). Die empfangenen Anhänge heißen deshalb `.mailatt*` — beim Merge
   die beiden NICHT zusammenlegen, sie tun verschiedene Dinge (löschen vs. herunterladen). */
/* Überschrift über den Chips: ein Anhang steht nie als anonyme Box da. */
.mailatt-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 12px; color: var(--text2); }
.mailatt-head b { color: var(--text); font-weight: 600; }
.mailatt-clip { width: 13px; height: 13px; flex: none; color: var(--text3); }
.mailatt-total { color: var(--text3); font-variant-numeric: tabular-nums; }
.mailatt-total::before { content: '·'; margin-right: 6px; }
.mailatt-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mailatt { display: inline-flex; align-items: center; gap: 8px; max-width: 260px;
  padding: 5px 10px 5px 7px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface2); text-decoration: none; color: var(--text); }
.mailatt:hover { background: var(--surface3); border-color: var(--text3); }
.mailatt-ico { width: 16px; height: 16px; flex: none; color: var(--text3); }
.mailatt-thumb { width: 26px; height: 26px; flex: none; object-fit: cover; border-radius: 5px; }
.mailatt-txt { min-width: 0; display: block; line-height: 1.25; }
.mailatt-name { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailatt-size { display: block; font-size: 11px; color: var(--text2); font-variant-numeric: tabular-nums; }
.mailatt.is-risky { border-color: var(--danger); }
.mailatt.is-risky .mailatt-ico, .mailatt.is-risky .mailatt-size { color: var(--danger); }

/* ── Mobil (≤720): Kopf bricht um, Aktionen liegen in der MNAV-Kapsel unten ────────── */
@media (max-width: 720px) {
  .inbox-detail .ixh-top { padding: 12px 14px 0; gap: 10px; }
  .inbox-detail .ixh-subj { font-size: 17px; padding: 0 14px 12px; }
  .inbox-detail .ixh-att { padding: 0 14px 12px; }
  /* Metazeile darf brechen, aber niemals seitlich scrollen. */
  .inbox-detail .ixh-meta { font-size: 12px; }
  .inbox-detail .ixh-meta .mono { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  /* Erledigt-Zustand: die Kapsel gibt es dort nicht, „Wieder öffnen" bleibt sichtbar. */
  .inbox-detail .ixh-acts { flex-wrap: wrap; }
  /* Zugeklappte Zeilen: Schnipsel in die zweite Zeile, damit Name + Zeit lesbar bleiben. */
  .inbox-detail details.ix-msg-collapsed > summary { flex-wrap: wrap; row-gap: 2px; }
  .inbox-detail details.ix-msg-collapsed .ix-snip { flex: 1 1 100%; order: 9; color: var(--text3); padding-left: 19px; }
  .inbox-detail details.ix-msg-collapsed .ix-when { margin-left: auto; }
  .mailatt { max-width: 100%; }
}

/* ── Anhangs-Vorschau: die Datei öffnet IN der Seite, nicht in einem Download-Tab ─────
   PDF und Text bekommen den eingebauten Betrachter des Browsers (iframe auf
   …/attachment/{i}?inline=1), Bilder werden als Bild gezeigt. Herunterladen bleibt in
   der Leiste. Die Hülle baut app.js beim ersten Klick — kein Markup in 3 Views doppeln. */
.attv { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 24px; background: rgba(12, 14, 18, .72); }
.attv[hidden] { display: none; }
html.attv-open, html.attv-open body { overflow: hidden; }
.attv-sheet { display: flex; flex-direction: column; width: min(1040px, 100%);
  height: min(88vh, 100%); background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.attv-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface2); }
.attv-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 14px; font-weight: 600; }
.attv-act { flex: none; padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 12.5px; text-decoration: none;
  cursor: pointer; line-height: 1.5; }
.attv-act:hover { background: var(--surface3); border-color: var(--text3); }
.attv-body { flex: 1; min-height: 0; display: flex; background: var(--surface3); }
.attv-frame { flex: 1; width: 100%; border: 0; background: #fff; }
/* Das Bild füllt den Rahmen und wird eingepasst: `scale-down` verkleinert ein hohes Foto, bläst
   ein kleines Logo aber nicht auf. Über max-height in Prozent liefe es nicht — ein Flex-Element
   wird ohne min-height:0 nie kleiner als sein Inhalt und lief unten aus dem Fenster. */
.attv-img { flex: 1; min-width: 0; min-height: 0; width: 100%; height: 100%;
  padding: 12px; box-sizing: border-box; object-fit: scale-down; }

@media (max-width: 720px) {
  /* Vorschau nimmt mobil den ganzen Schirm — ein Fokus pro Screen (Regel: DESIGN_SYSTEM.md). */
  .attv { padding: 0; }
  .attv-sheet { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .attv-name { font-size: 13px; }
  .attv-bar { padding: calc(10px + env(safe-area-inset-top)) 12px 10px; }
}


/* ══════════════════════════════════════════════════════════════════════════════════
   PRODUCT BRAIN (v3.49) — Produktwissen, Brain-Chat, Anrufe (fonio)

   Bis v3.48 trugen die Brain-Views ihr CSS in eigenen <style>-Blöcken; der Selbsttest
   führte das als „offene Schuld, kein Freibrief — beim nächsten Anfassen wandert das CSS
   nach app.css". Mit dem Datenblatt-Umbau (Martins Befund 26.08.2026: „sehr unübersichtlich")
   ist es so weit. Regeln dieser Schicht:
     • Werte sind TEXT, keine Kapseln; höchstens EIN Zustandszeichen je Zeile.
     • Rot nur für die eine Primäraktion (Radix-Sync) — sonst Semantikfarben.
     • Alles über var(--token), damit hell/dunkel beide gelten.
   ══════════════════════════════════════════════════════════════════════════════════ */

/* ── Steckbrief-Seite — Stammbaum (Kern, Dokumente, Quellen, Matrix) ─────────────────────────────────────────── */
.br-cols { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 16px; align-items: start; }
.br-side { display: flex; flex-direction: column; gap: 14px; }
.br-side .card { margin: 0; }
.br-main > .card { margin-bottom: 14px; }
.br-n { font-size: 11px; font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }

/* Typenschild statt Kontaktkarte (Martin 27.08.2026: „der Header-Bereich ist zu allgemein …
   es ist ja keine normale Sache wie eine Kundenkarte"). Der Anker ist die MODELLNUMMER —
   sie identifiziert das Produkt in Radix, auf der Preisliste und in jedem Auftrag. Kein
   Avatar (Personen-Baustein, dazu das einzige Violett der Seite), keine Gattungs-Ikone. */
.br-plate { display: flex; align-items: stretch; background: var(--surface);
            border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
.br-plate-id { flex: none; display: flex; flex-direction: column; justify-content: center; gap: 1px;
               padding: 12px 18px; background: var(--surface2); border-right: 1px solid var(--border); }
.br-plate-l { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); }
.br-plate-n { font-size: 25px; font-weight: 650; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.br-plate-main { flex: 1; min-width: 0; padding: 12px 18px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.br-plate-main h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; margin: 0; overflow-wrap: anywhere; }
.br-plate-m { font-size: 12.5px; color: var(--text2); overflow-wrap: anywhere; }
.br-plate-s { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 18px; }

/* Verkaufsteil: fünf Blöcke in der Reihenfolge eines Gesprächs, nur der erste offen.
   Zwei Spalten, Haarlinien, sonst nichts — keine Quelle, kein Datum, kein Feldpfad;
   das steht alles unten am Ast, wo es hingehört. */
.br-blk { border-top: 1px solid var(--border2); }
.br-blk > summary { display: flex; align-items: center; gap: 9px; padding: 10px 16px; cursor: pointer; list-style: none; }
.br-blk > summary::-webkit-details-marker { display: none; }
.br-blk > summary:hover { background: var(--surface2); }
.br-blk[open] > summary { border-bottom: 1px solid var(--border2); }
.br-blk[open] > summary .br-caret { transform: rotate(90deg); }
.br-blk-t { font-size: 12.5px; font-weight: 650; color: var(--text); }
.br-blk-n { margin-left: auto; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; }
.br-key { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px;
          padding: 9px 16px; border-top: 1px solid var(--border2); }
.br-keys > .br-key:first-child { border-top: 0; }
/* Eine Zeile mit Fakt dahinter ist anklickbar (öffnet das Fenster); Fließtext ist es nicht. */
.br-key[role="button"] { cursor: pointer; }
.br-key[role="button"]:hover { background: var(--surface2); }
.br-key[role="button"]:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.br-key.is-text .br-key-v { -webkit-line-clamp: 4; color: var(--text2); }
.br-key-k { font-size: 12px; color: var(--text2); }
.br-key-v { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
             font-size: 13.5px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }

/* Basisdokumente — die Wurzel: was man öffnen kann, ist ein Link mit Pfeil-Symbol;
   Ablageorte (NAS, Radix-Archiv) bleiben Text, weil sie von außen nicht erreichbar sind. */
.br-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px;
          padding: 9px 16px; border-top: 1px solid var(--border2); align-items: baseline; }
.br-docs > .br-doc:first-child { border-top: 0; }
.br-doc-l { font-size: 12.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 5px; }
.br-doc-l svg { width: 12px; height: 12px; flex: none; color: var(--text3); }
.br-doc-l:hover { color: var(--accent2); }
.br-doc-l:hover svg { color: var(--accent2); }
.br-doc-l.is-plain { color: var(--text2); }
.br-doc-n { font-size: 12px; color: var(--text3); overflow-wrap: anywhere; }

/* Stammbaum: je Quelle EIN Ast, zugeklappt. Der Kopf trägt Art, Anzahl und Stand — deshalb
   braucht keine einzelne Zeile mehr eine Quellen- oder Datumsspalte. */
.br-src { border-top: 1px solid var(--border2); }
.br-src > summary { display: flex; align-items: baseline; gap: 9px; padding: 11px 16px; cursor: pointer; list-style: none; }
.br-src > summary::-webkit-details-marker { display: none; }
.br-src > summary:hover { background: var(--surface2); }
.br-caret { width: 13px; height: 13px; flex: none; color: var(--text3); align-self: center; transition: transform .14s ease; }
.br-src[open] > summary .br-caret { transform: rotate(90deg); }
.br-src-t { font-size: 13px; font-weight: 600; color: var(--text); }
.br-src-k { font-size: 11.5px; color: var(--text3); }
.br-src-n { margin-left: auto; font-size: 11px; color: var(--text3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.br-facts { padding-bottom: 8px; }

/* Fakten-Zeile am Ast: Feld · Wert. Ein Klick öffnet das Bearbeiten-Fenster — kein Stift in
   der Zeile, kein Aufklappen mitten in der Liste (Martins Befund 26.08.2026). Lange Werte sind
   auf drei Zeilen gedeckelt; der volle Wortlaut steht im title und im Fenster. */
.br-f { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 14px;
        padding: 7px 16px 7px 38px; border-top: 1px solid var(--border2); cursor: pointer; }
.br-facts > .br-f:first-child { border-top: 0; }
.br-f:hover { background: var(--surface2); }
.br-f:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.br-f.is-text { cursor: default; }
.br-f.is-text:hover { background: transparent; }
.br-label { font-size: 12px; color: var(--text2); overflow-wrap: anywhere; }
.br-val { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
          font-size: 12.5px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.br-f.is-text .br-val { -webkit-line-clamp: 6; color: var(--text2); }

/* Bearbeiten-Fenster: EIN Fenster für alle Fakten, brain.js füllt es aus der Zeile. */
.br-fe-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text3); margin-bottom: 10px; }
.br-fe-tel { font-size: 11.5px; color: var(--text2); margin-top: 8px; }
.br-fe-tel.is-on  { color: var(--ok); }
.br-fe-tel.is-off { color: var(--warn); }
.br-ck { display: flex; gap: 6px; align-items: flex-start; margin-top: 4px; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text); }

/* Radix-Matrix: Farbe × Gleiter. Die Zahl ist der Bestand, der Preis steht EINMAL im Kopf. */
.br-mx { width: 100%; border-collapse: collapse; table-layout: fixed; }
.br-mx th, .br-mx td { padding: 7px 8px; font-size: 12px; }
.br-mx col.br-mx-first { width: 47%; }
.br-mx thead th { border-bottom: 1px solid var(--border); text-align: right; font-weight: 600; vertical-align: bottom; }
.br-mx thead th:first-child { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--text3); font-weight: 700; }
.br-mx-g { display: block; font-size: 11px; color: var(--text); }
.br-mx-p { display: block; font-size: 10px; color: var(--text3); font-variant-numeric: tabular-nums; }
.br-mx tbody td { border-top: 1px solid var(--border2); text-align: right; font-variant-numeric: tabular-nums; }
.br-mx tbody tr:hover td { background: var(--surface2); }
.br-mx td:first-child { text-align: left; overflow-wrap: anywhere; line-height: 1.35; }
.br-mx-code { color: var(--text3); font-variant-numeric: tabular-nums; margin-right: 5px; }
.br-mx .is-zero { color: var(--text3); }
.br-mx .is-none { color: var(--text3); opacity: .5; }
.br-foot { padding: 9px 16px; font-size: 11px; color: var(--text3); border-top: 1px solid var(--border2); }
.br-alist { padding: 4px 0; }
.br-a { display: flex; gap: 10px; align-items: baseline; padding: 6px 16px; border-top: 1px solid var(--border2); }
.br-alist > .br-a:first-child { border-top: 0; }
.br-a-t { flex: 1; min-width: 0; font-size: 12px; }
.br-a-t .tiny { display: block; }
.br-a-n { font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* Offene Punkte + fonio-Karte */
.br-open { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border2); }
.br-openlist > .br-open:first-child { border-top: 0; padding-top: 0; }
.br-open form { margin-left: auto; flex: none; }
.br-open-q { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.br-dec { padding: 8px 0; border-top: 1px solid var(--border2); }
.br-dec:first-child { border-top: 0; padding-top: 0; }
.br-sum { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text2); padding: 7px 0; }
.br-sum:hover { color: var(--text); }
.br-tel { font-size: 12.5px; color: var(--text2); }
.br-tel strong { color: var(--text); }
.br-links { display: flex; flex-wrap: wrap; gap: 8px; }
.br-json { font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 420px; overflow: auto;
           background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px; }

@media (max-width: 1180px) { .br-key, .br-doc, .br-f { grid-template-columns: 180px minmax(0, 1fr); } }
@media (max-width: 980px) { .br-cols { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  /* Typenschild mobil: Nummer und Name in EINE Zeile, Meta darunter — kompakter Kopf
     (Mobile-Prinzip 4), aber ohne die Identität zu verlieren. */
  .br-plate { flex-wrap: wrap; }
  /* justify-content aus dem Grundzustand wirkt in der Zeile auf die HAUPTachse und würde
     Nummer und Beschriftung mittig setzen — deshalb hier ausdrücklich linksbündig. */
  .br-plate-id { flex-direction: row; align-items: baseline; justify-content: flex-start;
                 gap: 8px; padding: 10px 14px; border-right: 0;
                 border-bottom: 1px solid var(--border); width: 100%; }
  .br-plate-main { flex: 1 1 100%; }   /* Status-Pillen in eine eigene Zeile, nie neben den Titel */
  .br-plate-n { font-size: 19px; }
  .br-plate-main { padding: 10px 14px; }
  .br-plate-main h1 { font-size: 18px; }
  .br-plate-s { padding: 0 14px 10px; flex-wrap: wrap; }
  /* Mobil: Feld über Wert — nie Links-rechts-Scrollen. */
  .br-key, .br-doc, .br-f { grid-template-columns: 1fr; gap: 2px; }
  .br-f { padding: 9px 14px 9px 26px; }
  .br-key, .br-doc { padding: 9px 14px; }
  .br-src > summary { padding: 11px 14px; flex-wrap: wrap; }
  .br-src-n { margin-left: 0; flex-basis: 100%; padding-left: 22px; }
  .br-json { max-height: none; overflow: visible; }
  .br-mx th, .br-mx td { padding: 7px 5px; font-size: 11.5px; }
}


/* ── Modell-Liste — Filterzeile + Abdeckungs-Anzeige ─────────────────────────────────────────── */
.br-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
/* Abdeckung: ein Segment je Kapitel — monochrom, kein Status-Akzent. */
.br-cov { display: inline-flex; gap: 2px; margin-top: 5px; }
.br-cov i { width: 15px; height: 3px; border-radius: 2px; background: var(--border); }
.br-cov i.on { background: var(--text3); }
@media (max-width: 720px) { .br-cov i { width: 13px; } }

/* ── Brain-Chat — Lesetext, keine Blasen ─────────────────────────────────────────────────
   Martin 28.08.2026: „mach Chats mit KI nicht so in kleinen Chat-Boxen-Design, sondern wie
   z. B. Claude auf dem Handy: größerer Text und zugleich keine Umrahmung beim Text selbst."
   Also: die ANTWORT ist Fließtext in einer zentrierten Lesespalte — keine Fläche, kein
   Rahmen, kein Schatten. Nur die eigene FRAGE bleibt eine dezente Fläche rechts, damit man
   im Verlauf sieht, wo man selbst gesprochen hat. Der Mensch-zu-Mensch-Teamchat behält
   seine Messenger-Blasen (.msg-*) — dort ist das Gegenüber ein Kollege, kein Text zum Lesen.

   Der Verlauf ist ein Grid mit EINER zentrierten Spalte: so steht die Antwort auf jeder
   Fensterbreite in Lesebreite, ohne dass Nachrichten einzeln ausgerichtet werden müssen. */
.bc-wrap { display: flex; flex-direction: column; height: calc(100vh - 220px); min-height: 360px; }   /* feste Höhe → .bc-log scrollt innen, Composer bleibt unten */
.bc-log { display: grid; grid-template-columns: min(var(--bc-col, 46rem), 100%); justify-content: center;
  align-content: start; gap: 4px; padding: 22px 16px 28px; flex: 1; overflow-y: auto;
  background: var(--bg); border-radius: 12px 12px 0 0; }
.bc-log:has(.bc-empty) { align-content: center; }   /* leerer Chat: Einstieg in der Mitte */
.bc-msg { font-size: 15.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Die eigene Frage: rechts, dezente Fläche, kein Rahmen und kein Schatten. */
.bc-user { justify-self: end; max-width: 85%; margin: 18px 0 2px; padding: 10px 14px;
  border-radius: 16px; background: var(--surface2); }
/* Die Antwort: reiner Text über die volle Lesespalte. */
.bc-ai { justify-self: stretch; margin: 6px 0 4px; }
.bc-ai.bc-think { color: var(--text3); font-style: italic; }
.bc-ai.bc-err { color: var(--danger); }
.bc-meta { justify-self: stretch; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 6px; }
.bc-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface3); border: 1px solid var(--border); color: var(--text2); font-variant-numeric: tabular-nums; }
.bc-chip.bc-chip-model { color: var(--text); }
.bc-gap { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--warn); }
.bc-gap button { font-size: 11px; padding: 2px 8px; }
.bc-cost { font-size: 11px; color: var(--text3); margin-left: auto; }
/* Die Eingabe steht in derselben Lesespalte wie der Text darüber — sonst säße sie schief. */
.bc-form { display: flex; align-items: flex-end; gap: 8px; width: 100%; max-width: calc(var(--bc-col, 46rem) + 32px);
  margin: 0 auto; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); border-radius: 0 0 12px 12px; }
.bc-inp { flex: 1; resize: none; min-height: 46px; max-height: 200px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); color: var(--text); font: inherit; font-size: 15px; padding: 12px 14px; }
.bc-inp:focus-visible { outline: none; border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .30); }
.bc-send { flex: none; height: 46px; min-height: 46px; min-width: 46px; padding: 0 16px; border-radius: 12px; border-color: transparent; }
.bc-send:disabled { opacity: .55; cursor: default; }
.bc-gap .btn.is-armed { color: var(--ok); border-color: var(--ok); }
.bc-empty { justify-self: center; text-align: center; color: var(--text2); font-size: 14px; }
.bc-empty .bc-ex { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.bc-empty .bc-ex button { font: inherit; font-size: 12.5px; }
@media (max-width: 720px) {
  .bc-wrap { height: calc(100dvh - 150px); }   /* No-JS-Fallback; chatFit misst nach */
  /* Kein Seiten-Gummiband, solange der Chat den Schirm füllt (v3.50.8): NUR der Verlauf
     scrollt. Ohne das schiebt iOS beim Tastatur-Öffnen die ganze Seite über ihr Ende hinaus,
     und die Eingabe rutscht hinter die Tastatur — derselbe Fehler, den der Teamchat im Juli
     hatte und der dort mit genau dieser Sperre plus dem Pan-Reset behoben wurde. */
  body:has(.bc-wrap) { overscroll-behavior-y: none; overflow: hidden; height: 100dvh;
    background: var(--surface); }
  /* NUR unten andocken. Das seitliche Polster gehört der SEITE — nimmt man es dem Rumpf weg,
     klebt auch der Seitenkopf am Rand und die Werkzeugzeile läuft rechts hinaus (so gesehen
     beim ersten Versuch: „Produktwissen" war am Handy nur noch halb da). */
  body:has(.bc-wrap) .content { padding-bottom: 0; }
  .bc-log  { padding: 16px 14px 22px; }
  .bc-msg  { font-size: 16px; line-height: 1.65; }      /* Handy: Lesegröße, nicht Chat-Klein */
  .bc-user { max-width: 92%; }
  .bc-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .bc-inp  { font-size: 16px; }                         /* iOS-Zoom-Guard: der globale 16px-Block endet bei 640px (iPhone quer) */
}

/* ── Anrufe (fonio) — Liste ─────────────────────────────────────────── */
/* Anliegen darf umbrechen (Mobile-Regel „Titel nie abschneiden"), aber nie die Tabelle schieben. */
.an-topic { overflow-wrap: anywhere; }

/* ── Anruf (fonio) — Detailseite ─────────────────────────────────────────── */
/* Zwei Spalten wie im Steckbrief: Gespräch links, Kontakt/Verweise rechts. */
.an-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.an-side { display: flex; flex-direction: column; gap: 14px; }
/* Den Abstand zwischen den rechten Karten macht der gap der Spalte — ein margin dazu ergäbe 28px. */
.an-side .card { margin: 0; }
.an-main .card { margin: 0 0 14px; }
.an-main .card:last-child { margin-bottom: 0; }
.an-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.55; }
/* Transkript: eigener Scrollbereich am Desktop — die Seite bleibt ruhig. */
.an-script { max-height: 60vh; overflow: auto; background: var(--surface2);
             border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
/* Mobil ist der Verlauf ein eigener Tab: kein Scroll im Scroll (Mobile-Prinzip 7). */
@media (max-width: 720px) { .an-script { max-height: none; overflow: visible; } }
.an-turn { font-size: 13.5px; line-height: 1.55; max-width: 78ch; overflow-wrap: anywhere; margin-top: 2px; }
.an-turn.is-new { margin-top: 10px; }   /* Sprecherwechsel = Luft (Teamchat-Cluster-Regel) */
.an-who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
          text-transform: uppercase; color: var(--text3); margin-bottom: 2px; }
.an-kv { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border2); }
.an-kv:first-child { border-top: 0; padding-top: 0; }
.an-kv b { flex: none; width: 118px; font-weight: 600; font-size: 12px; color: var(--text2); }
.an-kv span { min-width: 0; overflow-wrap: anywhere; }
.an-raw { font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
          max-height: 320px; overflow: auto; background: var(--surface2); border: 1px solid var(--border);
          border-radius: 8px; padding: 10px; }
@media (max-width: 720px) { .an-raw { max-height: none; overflow: visible; } }   /* wie .an-script: kein Scroll im Scroll */
@media (max-width: 980px) { .an-cols { grid-template-columns: 1fr; } }

/* ── Marketing-Aufgabe: Detailfenster + Zeilen-Öffner (v3.49) ───────────────────────
   Bis dahin konnte man eine Marketing-Aufgabe anlegen, aber nicht öffnen. Das Fenster
   erbt die Ops-Bausteine (.task-ov/.tm-*/.props/.desc-edit); hier steht nur, was dort
   fehlt. */
/* Verlaufsliste im rechten Panel (eine Spalte, Haarlinien) */
.act-list { display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.act-list .act-msg { display: block; }
/* Fußzeile eines Popovers: führt zur Verwaltung statt zum Wildwuchs */
.mi-foot { display: block; padding: 7px 10px; font-size: 12px; color: var(--text2); border-radius: 8px; }
.mi-foot:hover { background: var(--surface2); color: var(--text); }

/* Tag-Spalte der Aufgabenliste: schmal, umbruchfrei — sie ordnet, sie erzählt nicht. */
.th-tags { width: 160px; }
td[data-col="tags"] { white-space: nowrap; }
td[data-col="tags"] .tag { font-size: 10px; padding: 2px 7px; }
td[data-col="tags"] .tag + .tag { margin-left: 4px; }

/* ── Gliederung der Post-Übersicht nach Termin (v3.50.2) ───────────────────────────
   Eine Trennung, die man liest, ohne sie zu bemerken: kleiner Titel, Zähler, feine Linie
   bis zum Rand. Keine Kapsel, kein Kasten — die Gruppe ist Struktur, nicht Zustand. */
.pg-head { display: flex; align-items: baseline; gap: 10px; margin: 30px 0 12px; }
.pg-head:first-of-type { margin-top: 2px; }
/* Der Gruppenkopf muss man BEIM SCROLLEN wiederfinden — vorher war er kleiner und blasser als
   der Kachel-Titel darunter und ging schlicht unter (Martin 28.08.2026: „der Overview ist nicht
   richtig erkennbar"). Jetzt in Textfarbe, in Lesegröße, mit der Zeitspanne daneben. */
.pg-title { font-size: 14.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.pg-span { font-size: 12px; color: var(--text3); white-space: nowrap; }
.pg-n { font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums;
  background: var(--surface2); border-radius: 999px; padding: 1px 8px; }
.pg-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Der Kopf bleibt beim Scrollen an der Oberkante stehen, solange seine Gruppe läuft — so weiß
   man auch nach zwanzig Kacheln noch, in welchem Zeitraum man liest. */
.pg-head { position: sticky; top: 0; z-index: 5; background: var(--bg);
  padding: 8px 0 6px; margin-top: 22px; }

/* ── Vorschau: alle Kanäle untereinander (v3.50.1) ─────────────────────────────────
   Vorher eine Karte mit Reitern. Martin 28.08.2026: „mach nicht so komische Buttons pro
   Socials, sondern zeig untereinander einfach jede Social-Art an." Was sich je Kanal
   unterscheidet, ist wenig: das Seitenverhältnis des Bildes und der Platz des Textes
   (Instagram darunter, Facebook und LinkedIn darüber, Pinterest keiner am Bild). */
/* [hidden] muss gewinnen — sonst ist es wirkungslos (v3.50.1).
   Klassenregeln wie .btn{display:inline-flex} oder .pp-img img{display:block} schlagen das
   Attribut, weil sie dieselbe oder höhere Spezifität haben. Das hat in diesem Projekt schon
   dreimal zugeschlagen: sichtbare Karussell-Pfeile bei Pinterest, ein kaputtes Bild in der
   leeren Vorschau, ein „Auf Basis zurücksetzen"-Knopf im Basis-Reiter. Eine Zeile beendet die
   ganze Gattung — wer etwas trotz hidden zeigen will, hat ohnehin ein anderes Problem. */
[hidden] { display: none !important; }

.pv-stack { display: flex; flex-direction: column; gap: 26px; }
.pv-one { display: flex; flex-direction: column; gap: 8px; }
.pv-one.off { opacity: .42; }            /* nicht gewählt — sichtbar, damit nichts springt */
.pv-cap-head { display: flex; align-items: center; gap: 8px; }
.pv-cap-name { font-size: 12.5px; font-weight: 600; }
.pv-cap-note { margin-left: auto; }
/* Das Bild FÜLLT den Rahmen: die Plattformen schneiden mittig zu, und genau diesen
   Ausschnitt soll man vorher sehen (vorher: contain — zeigte Balken, die es nie gibt). */
.pub-prev .pp-img img { object-fit: cover; }
.pp-dots { display: flex; justify-content: center; gap: 4px; padding-top: 8px; }
.pub-prev.pp-pin .pp-dots { display: none; }
.pv-prev { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); }
.pv-next { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.pub-prev.pp-pin .pv-prev, .pub-prev.pp-pin .pv-next { display: none; }

/* ── Feste Leiste unten: Kanäle + Termin + Freigabe (v3.50.1) ──────────────────────
   Martin: „Zeitplan ist unten nicht immer sichtbar … sticky machen, wie Hootsuite" und
   „Kanäle auswählen minimalistischer". Also runde Punkte zum Antippen statt vier Zeilen
   mit Kippschaltern — und alles, was den Post scharf macht, bleibt im Blick. */
/* Die Leiste LIEGT AUF, sie schwebt nicht: sie zieht sich über die volle Inhaltsbreite
   (negative Ränder heben die Polsterung des Rumpfes auf), sitzt am unteren Rand und trägt
   eine Kante plus einen Schatten nach oben, damit der Inhalt sichtbar darunter durchläuft.
   Martin 28.08.2026: „sie schwebt und schaut komisch aus." */
/* Der scrollende Rumpf (.content) hat 60px Polsterung unten, und `sticky bottom:0` klemmt an
   dessen CONTENT-Box — also 60px über dem sichtbaren Boden. Ein negativer Rand ändert daran
   nichts (er verschiebt das Layout danach, nicht die Klemmkante); das war mein erster,
   falscher Versuch. Richtig ist, dem Rumpf die Polsterung zu nehmen, SOLANGE diese Leiste auf
   der Seite steht — sie bringt ihren eigenen Abstand mit. Martin 28.08.2026, zweimal:
   „die Leiste unten schwebt". */
.content:has(.pub-bar) { padding-bottom: 0; }
.pub-bar { position: sticky; bottom: 0; z-index: 30;
  /* Seitlich die 24px Rumpf-Polsterung aufheben, damit sie über die volle Breite geht. */
  margin: 18px -24px 0;
  background: var(--surface); border-top: 1px solid var(--border2);
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .18);
  padding: 10px 24px calc(14px + env(safe-area-inset-bottom)); }
/* Ohne inneren Scroll (Mobil, s. Regel bei 601) gibt es keinen Scrollport zum Kleben —
   dort steht die Leiste einfach am Ende der Seite, was dort auch richtig ist. */
@media (max-width: 720px) { .pub-bar { position: static; margin-bottom: 0; } }
.pub-bar-in { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pb-chans { display: flex; gap: 6px; }
/* Kanal = Zeichen + Name, nicht ein Buchstabe im farbigen Kreis (den las niemand).
   Aus: stiller Umriss. An: Markenfarbe — der Unterschied muss auf einen Blick lesbar sein. */
.pb-chan { height: 34px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text2); cursor: pointer; padding: 0 12px 0 10px;
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 12.5px; font-weight: 600; transition: filter .12s, opacity .12s; }
.pb-chan svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pb-chan:hover:not(:disabled) { filter: brightness(1.12); }
.pb-chan.on { color: #fff; border-color: transparent; }
.pb-chan.ig.on  { background: #d6349f; }
.pb-chan.fb.on  { background: #1877f2; }
.pb-chan.li.on  { background: #0a66c2; }
.pb-chan.pin.on { background: #e60023; }
.pb-chan.nc { opacity: .38; cursor: not-allowed; }   /* Konto nicht verbunden */
@media (max-width: 560px) { .pb-name { display: none; } .pb-chan { padding: 0 10px; } }
/* Sofort ODER einplanen (v3.51.3): ein schlichter Zweier-Schalter, kein zweites Formular.
   Die Auswahl steht LINKS vom Datum, weil sie darüber entscheidet, ob das Datum überhaupt
   eine Rolle spielt. */
.pb-seg { display: inline-flex; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; flex: none; }
.pb-seg-b { background: none; border: 0; padding: 6px 12px; font-size: 12.5px; color: var(--muted);
  cursor: pointer; white-space: nowrap; }
.pb-seg-b + .pb-seg-b { border-left: 1px solid var(--border2); }
.pb-seg-b.on { background: var(--bg2, rgba(127,127,127,.12)); color: var(--text); font-weight: 600; }
/* Collab-Partner als Kapseln (v3.51.6): man sieht auf einen Blick, wer mitpostet, und nimmt
   einzelne wieder weg. Das ist der EINE Fall, in dem eine Kapsel richtig ist — sie steht für
   eine Person, nicht für einen Wert in einer Tabelle. */
.pp-collab-list { display: flex; flex-wrap: wrap; gap: 5px; }
.pp-collab-list:empty { display: none; }
.pp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; line-height: 1;
  padding: 4px 6px 4px 8px; border-radius: 999px; background: var(--bg2, rgba(127,127,127,.14)); color: var(--text); }
.pp-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px;
  line-height: 1; padding: 0 2px; }
.pp-chip-x:hover { color: var(--red, #d0021b); }
.pp-collab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 4px 0; }
.pp-collab-edit { display: inline-flex; gap: 6px; align-items: center; }
.pp-collab-edit .inp { width: 170px; }
.pb-when { display: flex; gap: 8px; align-items: center; }
.pb-when .inp { width: auto; }
.pb-go { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) {
  .pb-go { margin-left: 0; width: 100%; }
  .pb-go form, .pb-go .btn { width: 100%; }
}

/* Reste des Reiter-Umschalters (v3.49.3) — die Regeln bleiben, weil dieselben
   Kanalklassen jetzt am Stapel hängen. */
/* Ohne gewähltes Asset bleibt der Rahmen leer statt ein kaputtes Bild samt Alt-Text zu zeigen.
   `hidden` allein reicht nicht: .pp-img img setzt display:block und schlägt [hidden]. */
.pub-prev .pp-img img[hidden] { display: none; }
.pub-prev .pp-cap-top { display: none; padding: 0 4px 8px; }
.pub-prev.pp-fb .pp-cap-top, .pub-prev.pp-li .pp-cap-top { display: block; }
.pub-prev.pp-fb .pp-cap-bottom, .pub-prev.pp-li .pp-cap-bottom { display: none; }
.pub-prev.pp-fb .pp-cap-bottom b, .pub-prev.pp-li .pp-cap-bottom b { display: none; }
.pub-prev.pp-pin .pp-cap-bottom b { display: none; }
/* Pinterest ist ein Pin: hochkant, EIN Bild, runder Rahmen — also keine Karussell-Bedienung.
   Das muss über CSS laufen: .icon-btn setzt display:inline-flex und schlägt [hidden]. */
.pub-prev.pp-pin .pp-img { border-radius: 16px; }
.pub-prev.pp-pin .pp-img .icon-btn, .pub-prev.pp-pin #ppDots { display: none; }

/* ── Personen im Bild markieren (v3.51, nur Instagram) ───────────────────────────────────
   Martin 29.08.2026: „wie tag ich jdm … kann man das im Insta-Style machen?" — ja: die Marke
   sitzt als dunkles Fähnchen unter ihrem Punkt, mit Spitze nach oben, wie in der App.
   Diese Optik gilt bewusst NUR innerhalb der Vorschaukachel: die Kachel ist ein Abbild von
   Instagram, der Rahmen drumherum bleibt unsere CI.
   Die Ebene liegt über dem Bild und ist im Ruhezustand DURCHLÄSSIG — sonst würden die
   Karussell-Pfeile darunter nicht mehr reagieren. */
/* Profilbild im Vorschau-Kopf: liegt ÜBER dem Anfangsbuchstaben. Lädt es nicht (Kopie fehlt
   oder ist kaputt), nimmt app.js ihm das src und `is-weg` blendet es aus — dann steht wieder
   der Buchstabe da, statt eines kaputten Bild-Symbols. */
.pp-ava { position: relative; overflow: hidden; }
.pp-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pp-ava img.is-weg { display: none; }

.pv-tags { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.pv-tags.an { pointer-events: auto; cursor: crosshair; }
/* Die Blätterpfeile müssen ÜBER der Markier-Ebene liegen (v3.51.1). Sonst fängt die Ebene im
   Markiermodus jeden Klick ab — und beim Karussell wäre Bild 2 nur erreichbar, indem man das
   Markieren erst wieder ausschaltet. Genau das fiel im Klicktest auf. */
.pub-prev .pv-prev, .pub-prev .pv-next { z-index: 3; }
.pv-tag { position: absolute; transform: translate(-50%, 9px); pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px; max-width: 70%;
  background: rgba(0, 0, 0, .72); border-radius: 5px; padding: 5px 8px; }
.pv-tags.an .pv-tag { pointer-events: auto; cursor: grab; }
.pv-tags.an .pv-tag.zieht { cursor: grabbing; }
/* Die Spitze zum markierten Punkt: ein gedrehtes Quadrat, das halb hinter dem Fähnchen liegt.
   Bewusst NICHT der übliche border-Dreieck-Trick — der käme als „farbiger border-left-Balken"
   in die Design-Prüfung, und die Regel soll scharf bleiben. */
.pv-tag::before { content: ''; position: absolute; top: -3px; left: 50%; width: 8px; height: 8px;
  transform: translateX(-50%) rotate(45deg); background: rgba(0, 0, 0, .72); }
.pv-tag-name { color: #fff; font-size: 11px; line-height: 1.1; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pv-tag-x { background: rgba(255, 255, 255, .18); color: #fff; border: 0; border-radius: 50%;
  width: 15px; height: 15px; line-height: 1; font-size: 11px; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.pv-tag-x:hover { background: var(--red, #d0021b); }
.pv-tag-inp { background: none; color: #fff; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45);
  border-radius: 0; font-size: 11px; padding: 0 0 2px; width: 130px; outline: none; }
.pv-tag-inp::placeholder { color: rgba(255, 255, 255, .55); }

/* Beteiligten-Zeile unter dem Bild: markieren + gemeinsam posten stehen zusammen, weil beides
   dieselbe Frage beantwortet — wer gehört zu diesem Beitrag. */
.pp-people { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 4px 0; }
.pp-tag-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0;
  padding: 0; font-size: 11.5px; color: var(--muted); cursor: pointer; }
.pp-tag-btn svg { width: 14px; height: 14px; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pp-tag-btn:hover, .pp-tag-btn.on { color: var(--text); }
.pp-tag-btn.on { font-weight: 600; }
/* Was Instagram nach dem Posten zurückmeldet (angenommen / offen / abgelehnt) — Text, keine
   Kapsel: es ist eine Auskunft, kein Zustand, den man auf einen Blick scannen muss. */
.pp-collab-state { padding: 4px 4px 0; color: var(--muted); line-height: 1.45; }

/* ═══ OUTLET (Ops-Welt, v3.52) — Liste dessen, was im Lager 002 steht ════════════════════
   Bild-Thumb links, Titel führt, Code darunter; Werte als Text (keine Kapseln). Die
   Druckliste ist eine bare Seite mit eigenem Stylesheet (views/pages/ops-outlet-druck.php). */
.out-tbl .out-th-img, .out-tbl .out-td-img { width: 52px; padding-right: 0; }
.out-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 6px; background: var(--surface2); display: block; }
@media (max-width: 720px) {
  /* Karte: Bild links, Titel/Code/Zahlen daneben, Kapsel rechts unten — gescoped auf .out-tbl. */
  table.tbl.tbl-cards.out-tbl td.out-td-img { order: -2; flex: none; width: 40px; margin-right: 10px; }
  table.tbl.tbl-cards.out-tbl td.m-first    { flex: 1 1 0; min-width: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════════
   PLANKOS (v3.53) — die vierte Welt: Anweisungen, Prozesse (ISO-Tafel), Vorlagen, Lexikon.
   Regeln (Martins Abnahmen 01./02.09.2026): Start = Suchleiste + Modul-Kacheln, Flow statt
   Unterlisten (Bereich → Kapitel → Liste → Seite), Leseseite = EINE Spalte mit „Auf dieser Seite"
   rechts, Fenster über Tafel/Liste statt Unterseiten, Kachel-Titel = ein Wort, Werte als Text,
   Kapsel nur für echten Zustand. Zugangsdaten in eigenem Kasten, gesperrt bis zum PIN.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* ── Start & Suche ─────────────────────────────────────────────────────────────── */
.os-start { max-width: 920px; margin: 28px auto 0; }
.os-search { position: relative; margin: 6px 0 18px; }
.os-search input { width: 100%; height: 48px; padding: 0 44px 0 16px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 15px; outline: none; }
.os-search input:focus { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .12); }
.os-search kbd { position: absolute; right: 12px; top: 14px; font-size: 10px; color: var(--text3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; background: var(--surface2); }
.os-search-hero { margin: 0 0 22px; }
.os-search-hero input { height: 56px; font-size: 16px; padding-left: 20px; border-radius: 14px; }
.os-search-hero kbd { top: 18px; }
.os-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.os-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 124px; color: var(--text); text-decoration: none; }
.os-tile:hover { border-color: rgba(var(--accent-rgb), .4); }
.os-tile.is-off { opacity: .55; }
.os-tile .n { font-size: 16.5px; font-weight: 650; letter-spacing: -.2px; line-height: 1.25; }
.os-tile .t { font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.os-tile .c { margin-top: auto; font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; padding-top: 6px; }
.os-fordich { margin-top: 18px; font-size: 13px; }
.os-fordich a { color: var(--text2); }
.os-fordich a:hover { color: var(--text); text-decoration: underline; }
/* ── Listen (Suche, Fenster, Verlauf) ─────────────────────────────────────────── */
.os-list { list-style: none; margin: 0; padding: 0; }
.os-list li { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--border2); font-size: 13px; align-items: baseline; }
.os-list li:first-child { border-top: 0; }
.os-list .l { color: var(--text); font-weight: 500; }
.os-list a.l:hover { text-decoration: underline; }
.os-list .k { display: inline-block; min-width: 68px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); }
.os-list .sub { display: block; font-size: 11.5px; color: var(--text2); margin-top: 2px; font-weight: 400; }
.os-list .s { font-size: 11.5px; color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.os-list.os-plain li { padding-left: 0; padding-right: 0; }
.os-lsec-head { display: flex; align-items: flex-end; gap: 10px; margin: 2px 0 8px; }
.os-lsec-t { font-size: 15px; font-weight: 700; }
.os-n { font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; margin-left: 8px; padding-bottom: 2px; }
.os-tbl td { white-space: normal; vertical-align: middle; }
.os-tbl th.th-task { width: 44%; }
.os-tbl .os-title { white-space: normal; overflow: visible; text-overflow: clip; display: inline; }
.os-tbl td.m-last { white-space: nowrap; text-align: right; }
.os-tbl td .pill { white-space: nowrap; display: inline-flex; }
.os-typ { font-size: 11px; color: var(--text3); }
.os-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.os-var { color: var(--text2); font-size: 12px; }
/* ── Leseseite ────────────────────────────────────────────────────────────────── */
.os-readwrap { display: grid; grid-template-columns: minmax(0, 740px) 200px; gap: 40px; align-items: start; }
.os-read { max-width: 740px; min-width: 0; }
.os-head { margin: 2px 0 18px; }
.os-head h1 { font-size: 26px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; text-wrap: balance; overflow-wrap: anywhere; }
.os-lede { font-size: 14px; color: var(--text2); margin-top: 6px; line-height: 1.5; }
.os-summary { font-size: 15px; line-height: 1.55; max-width: 72ch; margin: 0 0 6px; }
.os-p { font-size: 14.5px; line-height: 1.55; max-width: 72ch; }
.os-h { font-size: 15px; font-weight: 700; margin: 26px 0 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.os-h .btn { margin-left: auto; }
.os-h-s { font-size: 12px; font-weight: 500; color: var(--text3); }
.os-h3 { font-size: 13px; font-weight: 700; margin: 18px 0 6px; }
.os-steps { list-style: none; margin: 0; padding: 4px 0 0; counter-reset: os; }
.os-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; padding: 6px 0 26px; }
.os-step-n { width: 28px; height: 28px; border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; z-index: 1; }
.os-step::after { content: ''; position: absolute; left: 13.5px; top: 36px; bottom: 0; width: 1.5px; background: var(--border); }
.os-step:last-child::after { display: none; }
.os-step-t { font-size: 15px; line-height: 1.5; max-width: 66ch; padding-top: 4px; overflow-wrap: anywhere; }
.os-step-img { grid-column: 2; justify-self: start; margin: 10px 0 0; padding: 10px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border2); max-width: 100%; cursor: zoom-in; }
.os-step-img img { display: block; max-width: 100%; height: auto; border-radius: 6px; }
.os-block { padding: 0 0 16px 44px; }
.os-ul { padding-left: 20px; font-size: 14.5px; line-height: 1.6; }
.os-warn { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 9px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.35); font-size: 14px; line-height: 1.5; max-width: 66ch; }
.os-warn svg { width: 16px; height: 16px; flex: none; color: var(--warn); margin-top: 3px; }
abbr.os-term { text-decoration: none; border-bottom: 1px dotted var(--text3); cursor: help; }
.os-file { margin-top: 8px; }
.os-pdf { width: 100%; height: 72vh; border: 0; display: block; background: #fff; }
.os-secret { margin-top: 14px; }
.os-secret-txt { font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.os-unlock-row { display: flex; gap: 8px; align-items: center; margin-top: 10px; max-width: 320px; }
.os-unlock-row input { text-align: center; letter-spacing: .4em; font-size: 16px; }
.os-done { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; flex-wrap: wrap; }
.os-more { border-top: 1px solid var(--border); padding-top: 4px; }
.os-more > summary, .os-rawdet > summary { cursor: pointer; list-style: none; font-size: 13px; color: var(--text2); padding: 10px 0; display: flex; align-items: center; gap: 8px; }
.os-more > summary::-webkit-details-marker, .os-rawdet > summary::-webkit-details-marker { display: none; }
.os-more > summary::before, .os-rawdet > summary::before { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
.os-more[open] > summary::before, .os-rawdet[open] > summary::before { transform: rotate(45deg); }
.os-more > summary:hover { color: var(--text); }
.os-more-body { padding: 4px 0 14px; }
.os-found { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; font-size: 13px; margin: 0; }
.os-found dt { color: var(--text3); }
.os-found dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.os-edit > summary.os-sum { cursor: pointer; font-size: 13px; color: var(--text2); padding: 6px 0; }
.os-edit-form { padding: 8px 0 0; }
.os-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }
.os-note { display: flex; gap: 8px; align-items: flex-start; margin-top: 8px; }
.os-note textarea { flex: 1; }
.os-toc { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.os-toc-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.os-toc a { color: var(--text2); padding: 4px 0 4px 10px; border-left: 1.5px solid var(--border); }
.os-toc a:hover { color: var(--text); border-left-color: var(--text2); }
.os-toc-meta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border2); font-size: 11.5px; color: var(--text3); line-height: 1.7; }
.os-toc-meta a { color: var(--text2); padding: 0; border: 0; }
.os-light { position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.82); display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.os-light[hidden] { display: none; }
.os-light img { max-width: 100%; max-height: 100%; border-radius: 8px; background: #fff; }
/* ── Schritt-Modus ────────────────────────────────────────────────────────────── */
.os-prog { height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.os-prog i { display: block; height: 100%; background: var(--accent); }
.os-mode-step { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: stretch; min-height: 60vh; }
.os-mode-step[hidden] { display: none; }
.os-mode-img { border: 1px solid var(--border); border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 10px; }
.os-mode-img img { max-width: 100%; max-height: 70vh; }
.os-mode-txt { display: flex; flex-direction: column; gap: 14px; }
.os-mode-txt .n { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.os-mode-txt .t { font-size: 18px; line-height: 1.45; font-weight: 500; }
.os-mode-nav { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
/* ── ISO-Tafel + Fenster ──────────────────────────────────────────────────────── */
.os-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: 22px; grid-auto-rows: 64px; gap: 10px; align-content: start;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px 18px; max-width: 1080px; position: relative; }
.os-col { grid-row: 2 / span 5; background: var(--surface2); border-radius: 10px; margin: -6px; }
.os-colh { grid-row: 1; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); text-align: center; align-self: end; padding-bottom: 2px; line-height: 1.1; }
.os-cell { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 8px; border-radius: 8px; font-size: 11.5px; font-weight: 650; line-height: 1.2;
  border: 1px solid transparent; color: var(--text); text-decoration: none; hyphens: auto; overflow-wrap: anywhere; z-index: 1; }
.os-cell:hover { filter: brightness(1.08); }
.os-cell.is-new { border-style: dashed; }
.os-cell.is-empty { opacity: .55; }
.os-cell.c-grey   { background: var(--surface3); border-color: var(--border); }
.os-cell.c-amber  { background: rgba(245,158,11,.26); border-color: rgba(245,158,11,.55); }
.os-cell.c-pink   { background: rgba(236,72,153,.20); border-color: rgba(236,72,153,.5); }
.os-cell.c-yellow { background: rgba(250,204,21,.28); border-color: rgba(250,204,21,.6); }
.os-cell.c-green  { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.55); }
.os-cell.c-red    { background: rgba(239,68,68,.22); border-color: rgba(239,68,68,.55); }
.os-cell.c-orange { background: rgba(249,115,22,.24); border-color: rgba(249,115,22,.55); }
.os-ov { position: fixed; inset: 0; z-index: 1150; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 26px; }
.os-ov[hidden] { display: none; }
.os-ov-card { width: min(760px, 96vw); max-height: 86vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.os-ov-head { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border2); }
.os-ov-head .icon-btn { margin-left: auto; flex: none; }
.os-ov-t { font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.os-ov-m { font-size: 12.5px; color: var(--text2); margin-top: 3px; }
.os-ov-body { padding: 14px 18px 18px; overflow-y: auto; }
.os-list-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.os-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--border2); color: var(--text); font-size: 13px; font-weight: 500; }
.os-row:first-child { border-top: 0; }
.os-row:hover { background: var(--surface2); }
.os-row .sub { display: block; font-size: 11.5px; color: var(--text2); font-weight: 400; margin-top: 2px; }
.os-row-s { font-size: 11.5px; color: var(--text3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.os-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.os-vars a { font-size: 11.5px; font-weight: 600; padding: 6px 9px; border-radius: 7px; background: var(--surface2); border: 1px solid var(--border2); color: var(--text2); }
.os-vars a.is-on { border-color: var(--accent); color: var(--text); background: rgba(var(--accent-rgb), .08); }
/* ── Einpflegen, Ausfüllen, Lexikon, Pflege ───────────────────────────────────── */
.os-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.os-drop { display: block; border: 1.5px dashed var(--border); border-radius: 13px; padding: 22px 20px; text-align: center; color: var(--text2); background: var(--surface2); cursor: pointer; }
.os-drop b { display: block; color: var(--text); font-size: 15px; margin-bottom: 4px; }
.os-drop .tiny { display: block; }
.os-steps-h { display: flex; gap: 6px; align-items: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); margin: 2px 0 12px; }
.os-steps-h b { color: var(--text); }
.os-steps-h i { font-style: normal; color: var(--text3); }
.os-kunde { position: relative; }
.os-kunde-hits { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: var(--surface3); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; margin-top: 4px; }
.os-kunde-hits[hidden] { display: none; }
.os-kunde-hit { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-top: 1px solid var(--border2); background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.os-kunde-hit:first-child { border-top: 0; }
.os-kunde-hit:hover { background: var(--surface2); }
.os-kunde-hit.is-none { color: var(--text3); cursor: default; }
.os-abc { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.os-abc span { font-size: 11px; font-weight: 700; color: var(--text3); padding: 3px 6px; border-radius: 6px; background: var(--surface2); }
.os-abc span.on { color: var(--text); }
.os-lex { columns: 2; column-gap: 28px; }
.os-lex dl { break-inside: avoid; padding: 10px 0; border-top: 1px solid var(--border2); margin: 0; }
.os-lex dt { font-weight: 650; font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
.os-lex dt .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); font-weight: 700; }
.os-lex dd { font-size: 13px; color: var(--text2); line-height: 1.5; margin: 3px 0 0; max-width: 60ch; }
.os-lex-edit { margin-left: auto; border: 0; background: none; color: var(--text3); cursor: pointer; font-size: 13px; }
.os-lex-edit:hover { color: var(--text); }
.os-dup { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 8px 0; border-top: 1px solid var(--border2); font-size: 13px; }
.os-dup a { color: var(--text); }
.os-inline { display: inline-flex; align-items: center; gap: 8px; }
/* ── Mobil ────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) { .os-readwrap { grid-template-columns: minmax(0, 740px); } .os-toc { display: none; } }
@media (max-width: 980px) { .os-mode-step { grid-template-columns: 1fr; } .os-cols2 { grid-template-columns: 1fr; } .os-lex { columns: 1; } }
@media (max-width: 900px) { .os-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .os-board { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto; } .os-col, .os-colh { display: none; } .os-cell { grid-column: auto !important; grid-row: auto !important; } }
@media (max-width: 560px) { .os-tiles { grid-template-columns: 1fr; } .os-start { margin-top: 8px; } .os-block { padding-left: 0; } }
/* Bild-Block ohne Nummer (weiteres Bild desselben Schritts) — fluchtet mit dem Schritttext */
.os-block-img { padding: 0 0 20px 44px; margin-top: -12px; }
.os-block-img .os-step-img { margin-top: 0; }
/* Schritt-Modus: mehrere Bilder eines Schritts untereinander */
.os-mode-img.multi { flex-direction: column; gap: 8px; }
.os-mode-img.multi img { max-height: 34vh; }
/* Handy: der gehobene „Gelesen"-Knopf darf den Menü-Knopf nicht verdrängen */
@media (max-width: 720px) { .os [data-page-cta].btn, .os-done .btn { padding: 6px 10px; font-size: 12px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
/* Pflege: ähnliche Paare (Stufe 3) + Ersetzt-Hinweis auf der Seite (Doppelgänger-Stufen, 02.09.2026) */
.os-pairs { padding: 4px 16px; }
.os-pair { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); }
.os-pair:last-child { border-bottom: 0; }
.os-pair .t { font-weight: 600; color: var(--text); text-decoration: none; }
.os-pair .t:hover { text-decoration: underline; }
.os-pair .s { font-size: 12px; color: var(--text2); margin-top: 3px; }
.os-pair .acts { display: flex; flex-direction: column; gap: 6px; }
.os-pair .acts form { margin: 0; }
.os-pair .acts .btn { width: 100%; justify-content: center; white-space: nowrap; }
.os-replaced { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin: 0 0 16px; line-height: 1.5; }
.os-replaced a { font-weight: 600; }
@media (max-width: 720px) { .os-pair { grid-template-columns: 1fr; } .os-pair .acts { flex-direction: row; flex-wrap: wrap; } .os-pair .acts .btn { width: auto; } }
/* Prozess-Schritte aus Visio-Diagrammen (OsProcess): Wer / Input / Output / Entscheidung unter dem Schritttext */
.os-proc { display: grid; gap: 3px; margin-top: 6px; font-size: 13px; color: var(--text2); }
.os-proc > div { display: grid; grid-template-columns: 110px 1fr; gap: 8px; align-items: baseline; }
.os-proc-k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
.os-proc em { font-style: normal; color: var(--text3); }
.os-step-dec > .os-step-n { background: var(--surface3); color: var(--text); border: 1px solid var(--border); }
@media (max-width: 720px) { .os-proc > div { grid-template-columns: 98px 1fr; } }
/* Handbuch-Lesart (Inhaltsprüfung 03.09.2026): Überschriften, Tabellen, Kapitelmenü, Rohfassung-Hinweis */
.os-prose .os-block { padding-left: 0; }
.os-prose .os-block-img { padding-left: 0; margin-top: -4px; }
.os-hblock { padding-bottom: 6px !important; }
.os-hd { font-weight: 700; letter-spacing: -.2px; line-height: 1.25; margin: 0; overflow-wrap: anywhere; }
.os-hd1 { font-size: 21px; margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--border); }
.os-hd2 { font-size: 17px; margin-top: 22px; }
.os-hd3 { font-size: 14.5px; margin-top: 14px; color: var(--text2); }
.os-hblock:first-child .os-hd1 { margin-top: 4px; padding-top: 0; border-top: 0; }
.os-chap { margin: 0 0 22px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.os-chap-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; }
.os-chap ol { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; font-size: 13px; line-height: 1.5; }
.os-chap li { break-inside: avoid; padding: 2px 0; }
.os-chap li.l2 { padding-left: 14px; font-size: 12.5px; }
.os-chap li.l3 { padding-left: 28px; font-size: 12px; color: var(--text3); }
.os-chap a { color: var(--text2); }
.os-chap a:hover { color: var(--text); text-decoration: underline; }
@media (min-width: 1180.02px) { .os-readwrap .os-chap { display: none; } }   /* ab hier steht das Kapitelmenü rechts unter „Auf dieser Seite" */
.os-toc a.os-toc-k.is-sub { padding-left: 20px; font-size: 12px; }
.os-tblblock { padding-bottom: 20px; }
.os-tscroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); max-width: 100%; }
.os-table { border-collapse: collapse; font-size: 12.5px; line-height: 1.4; min-width: 100%; }
.os-table th, .os-table td { padding: 6px 10px; border-bottom: 1px solid var(--border2); border-right: 1px solid var(--border2); vertical-align: top; text-align: left; white-space: normal; min-width: 60px; max-width: 360px; overflow-wrap: anywhere; }
.os-table th:last-child, .os-table td:last-child { border-right: 0; }
.os-table tr:last-child td { border-bottom: 0; }
.os-table th { font-weight: 650; background: var(--surface2); font-size: 11.5px; }
.os-table tr[hidden] { display: none; }
.os-table-wide th, .os-table-wide td { white-space: nowrap; max-width: 420px; min-width: 0; }
.os-table-wide td:first-child { white-space: normal; min-width: 160px; }
.os-tfilter { width: 100%; max-width: 360px; margin: 0 0 8px; height: 34px; }
.os-rawnote { margin: 0 0 16px; max-width: none; overflow-wrap: anywhere; }   /* Hinweiskasten = .os-warn, hier nur Abstand */
.os-rawnote strong { display: block; margin-bottom: 2px; }
.os-rawdet { margin: 0 0 16px; }
.os-rawdet > summary { padding: 6px 0; }
.os-rawdet[open] > summary { margin-bottom: 8px; }
@media (max-width: 720px) { .os-chap ol { columns: 1; } .os-table th, .os-table td { padding: 5px 8px; font-size: 12px; } }

/* ═══ iPhone-App PLANK HUB (v3.55) — html.native-ios setzt die App-Bridge (plank-hub-ios, BridgeScript.swift) ═══
   Der Hub läuft dort in einem WKWebView. Apple-Gefühl heißt: nichts, was nach Website aussieht —
   keine Tipp-Blitzer, keine Text-Auswahl in der Bedienoberfläche, keine Halten-Menüs auf Knöpfen,
   kein Quer-Überziehen. Inhalt (Mails, Notizen, Tabellen) bleibt auswählbar; Desktop/PWA unberührt. */
html.native-ios { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
html.native-ios .topbar, html.native-ios .sidebar, html.native-ios .mnav, html.native-ios .btn,
html.native-ios .filter-chip, html.native-ios .switch, html.native-ios .tile, html.native-ios .seg,
html.native-ios .jobdock, html.native-ios .toast .btn, html.native-ios .modal-actions
  { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Toast-TEXT bleibt kopierbar (Radix-Ablehnungsgründe); Inhalts-Links (Chat, Notizen, tel:) behalten ihr Halten-Menü. */
html.native-ios button, html.native-ios .btn, html.native-ios .icon-btn,
html.native-ios .sidebar a, html.native-ios .topbar a, html.native-ios .mnav a { -webkit-touch-callout: none; }
html.native-ios body { overscroll-behavior-x: none; }

/* ── Startseiten der Welten: „Im Betrieb" — je Modul eine Zeile (v3.72, partials/welt-betrieb.php).
   Baut auf .frow (Fokus-Liste)
   auf: gleiche Zeilenhöhe, gleiche Trefferfläche. Die Zahl steht rechts als Text mit
   Einheit darunter — keine Kapsel (Werte-Regel), Signalfarbe trägt der Untertext. */
/* .card bringt im Hub KEINEN eigenen Abstand mit (den setzen sonst die Raster-Container) —
   ohne diese Zeile klebte „Im Betrieb" direkt auf „Mein Fokus" (Martins Befund 09.09.2026). */
.w-betrieb { margin-bottom: 16px; }
.w-betrieb .focus-list { padding: 2px 0 4px; }
.wsig .wsig-ic { color: var(--text2); }
.wsig .wsig-ic svg { stroke: currentColor; fill: none; stroke-width: 2; }
.wsig:hover .wsig-ic { color: var(--text); }
.wsig-n { flex: none; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end;
  font-size: 17px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); }
.wsig-u { font-size: 10.5px; font-weight: 500; color: var(--text3); letter-spacing: .01em; }
.wsig-warn { color: var(--warn); font-weight: 600; }
.wsig-danger { color: var(--danger); font-weight: 600; }
.wsig-ok { color: var(--ok); }

/* ═══ OPS: VERSAND (Wochenboard) + PRODUKTION (Teams) — v3.71 ═══════════════════════════════
   Lese-Sicht der Radix-Monitore aus dashboard.plank.it. Bewusst NICHT die Farbcodierung von
   dort übernommen (dort ist die ganze Karte eingefärbt — im Hub wäre das die verbotene
   Alarm-Fläche): Zustand steht in EINER Pille je Zeile, ein vergangener Tag mit offenen
   Aufträgen färbt nur seinen KOPF. Mobil (≤720px) stapeln die Tage, leere Tage fallen weg. */
.vs-week { display: flex; align-items: center; gap: 6px; }
/* Wochenwechsel ist die Hauptnavigation der Seite — am Finger die sanktionierten 42px. */
.vs-week .btn { min-width: 34px; justify-content: center; }
@media (pointer: coarse) { .vs-week .btn { min-width: 42px; min-height: 42px; } }
.vs-kw { font-size: 13px; font-weight: 700; min-width: 78px; text-align: center; }
.vs-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: start; }
.vs-day { background: var(--surface2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.vs-day.is-today { border-color: rgba(var(--accent-rgb), .45); }
/* „Heute" trägt EIN Zeichen in Marken-Rot (Rahmen + Punkt); der Wochentag-TEXT bleibt neutral,
   damit das Alarm-Rot der überfälligen Kopfzeile eindeutig bleibt. */
.vs-day.is-today .vs-wd::after { content: ''; display: inline-block; width: 5px; height: 5px;
  margin-left: 5px; border-radius: 999px; background: var(--accent); vertical-align: 2px; }
.vs-day-hd { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.vs-day-hd.is-late .vs-wd, .vs-day-hd.is-late .vs-dt { color: var(--danger); }
.vs-wd { font-size: 13px; font-weight: 700; color: var(--text); }
.vs-dt { font-size: 11px; color: var(--text3); }
.vs-cnt { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--text2); }
.vs-day-bd { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.vs-ship { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 9px; color: var(--text); text-decoration: none; }
/* Stufenfarben wie im Versand-Monitor des Dashboards (Martin 09.09.2026: „die Akzentfarben gehen
   verloren"). Die Fläche trägt den Zustand, die Pille nennt ihn beim Namen — über eine ganze
   Woche liest man so schneller als über Text allein. Deckkraft wie dort (.11–.20). */
.vs-ship.vs-st-verladen      { background: rgba(34,197,94,.14);  border-color: rgba(34,197,94,.5); }
.vs-ship.vs-st-lieferschein  { background: rgba(37,99,235,.11);  border-color: rgba(37,99,235,.45); }
.vs-ship.vs-st-versandbereit { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); }
.vs-ship.vs-st-overdue       { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.5); }
.vs-ship.vs-st-gesperrt      { background: rgba(239,68,68,.2);   border-color: rgba(239,68,68,.8); }
.vs-ship:hover { filter: brightness(1.05); }
/* Die Pille rutscht in die zweite Zeile, statt am Kartenrand abgeschnitten zu werden. */
.vs-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 3px; }
.vs-auf { font-size: 12px; font-weight: 700; white-space: nowrap; }
.vs-line .pill { margin-left: auto; flex: none; }
.vs-kunde { font-size: 11.5px; color: var(--text2); line-height: 1.35; overflow-wrap: anywhere; }
.vs-sped, .vs-meta { font-size: 11px; color: var(--text3); overflow-wrap: anywhere; }
.vs-empty { margin: 0; padding: 6px 0; font-size: 11px; color: var(--text3); text-align: center; }
.vs-foot { margin-top: 14px; }

/* ── Produktions-Zeitplan (Gantt, v3.73). 21 Tage ab heute als CSS-Raster, ein Balken je
   Auftrag von Fertigungsbeginn bis -ende. Kein JS, kein SVG: die Spalten rechnet
   Produktionsliste::balken(), die Tageslinien malt ein Verlauf. Das Diagramm ist breit —
   es scrollt in seinem EIGENEN Kasten, die Seite bleibt ruhig. */
.gt-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.gt { min-width: 860px; }
.gt-row { display: grid; grid-template-columns: 190px 1fr; align-items: stretch;
  border-top: 1px solid var(--border2); min-height: 32px; }
.gt-head { border-top: 0; background: var(--surface2); }
.gt-lbl { padding: 4px 10px; display: flex; flex-direction: column; justify-content: center; gap: 1px;
  min-width: 0; color: var(--text); text-decoration: none; border-right: 1px solid var(--border); }
a.gt-lbl:hover { background: var(--surface2); }
.gt-nr { font-size: 12px; font-weight: 700; white-space: nowrap; }
.gt-art { font-size: 10.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-track { display: grid; grid-template-columns: repeat(21, 1fr); align-items: center; min-width: 0;
  background-image: linear-gradient(to right, var(--border2) 1px, transparent 1px);
  background-size: calc(100% / 21) 100%; }
.gt-day { grid-row: 1; display: flex; flex-direction: column; align-items: center; padding: 5px 0;
  font-size: 9.5px; line-height: 1.25; color: var(--text3); }
.gt-day b { font-size: 10px; font-weight: 700; color: var(--text2); }
.gt-day i { font-style: normal; }
.gt-day.is-we { background: var(--surface3); }
.gt-day.is-today b { color: var(--accent); }
.gt-bar { grid-row: 1; height: 20px; margin: 0 1px; border-radius: 5px; display: flex; align-items: center;
  padding: 0 6px; overflow: hidden; }
.gt-bar-t { font-size: 10px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-bar-plan   { background: var(--surface3); color: var(--text2); }
.gt-bar-run    { background: rgba(34,197,94,.2);  color: var(--text); }
.gt-bar-warn   { background: rgba(245,158,11,.26); color: var(--text); }
.gt-bar-danger { background: rgba(239,68,68,.24);  color: var(--text); }
/* Ragt der Balken aus dem Fenster, bleibt die Kante dort gerade — sichtbares „geht weiter". */
.gt-bar.is-vor  { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.gt-bar.is-nach { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.gt-team { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--surface2);
  border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 700; }
.gt-team.is-late .gt-team-n { color: var(--danger); }
.gt-team-c { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--text2); }
.gt-row-leer .gt-lbl { color: var(--text3); }
.gt-spaeter { grid-row: 1; justify-self: end; padding-right: 8px; font-size: 10px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-none { grid-row: 1; grid-column: 1 / 5; font-size: 10px; color: var(--text3); padding-left: 6px; }

/* Produktions-Board: dieselben Spalten wie das Versand-Wochenboard (.vs-grid), nur mit
   Mitarbeiter-Köpfen. Die Karte trägt zusätzlich den Materialstand als Fläche — rot heißt
   „hier fehlt etwas", amber „teils bestellt". Der Planstatus bleibt Pille: „Plan gedruckt"
   ist bei manchen Teams der Normalfall — als Fläche wäre die halbe Spalte grün. */
.pr-board .vs-day-hd .vs-wd { font-size: 12.5px; }
.pr-card { display: flex; flex-direction: column; gap: 2px; }
.pr-card.pr-st-danger { background: rgba(239,68,68,.12);  border-color: rgba(239,68,68,.5); }
.pr-card.pr-st-warn   { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.45); }
.pr-card .pr-art { font-size: 11.5px; color: var(--text2); line-height: 1.35; overflow-wrap: anywhere; }
.pr-card .pr-notiz { font-size: 10.5px; }
.pr-card { margin-bottom: 14px; }
.pr-nr { font-size: 12.5px; font-weight: 700; }
.pr-art { font-size: 12px; color: var(--text2); line-height: 1.35; }
.pr-notiz { margin-top: 2px; font-size: 11px; color: var(--text3); }
.pr-auf { font-size: 12.5px; font-weight: 600; color: var(--text); text-decoration: none; }
a.pr-auf:hover { text-decoration: underline; }
.pr-kunde { font-size: 11.5px; color: var(--text2); }
.pr-mat { font-size: 11px; font-weight: 600; margin-top: 2px; }
.pr-mat-danger { color: var(--danger); }
.pr-mat-warn { color: var(--warn); }
.pr-late { color: var(--danger); font-weight: 700; }
.pr-foot { margin-top: 14px; }
.pr-warn { color: var(--warn); }

/* Die Woche bleibt so lange wie möglich EIN Blick — die Pille bricht notfalls um (.vs-line).
   Erst wenn die Spalte die Auftragsnummer nicht mehr trägt, fallen Spalten weg (Muster .kw-trucks). */
@media (max-width: 1050px) { .vs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .vs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 720px) {
  .vs-grid { grid-template-columns: 1fr; gap: 8px; }
  /* Ein leerer Tag ist auf dem Telefon nur Rauschen — Desktop zeigt weiter die ganze Woche. */
  .vs-day.is-empty { display: none; }
  /* Team-Segment: bündig über die ganze Breite statt quer scrollend (Regel „nie H-Scroll"). */
  .pg-produktion .lc-tools .seg { flex: 1 1 100%; min-width: 0; }
  .pg-produktion .lc-tools .seg-btn { flex: 1 1 auto; justify-content: center; }
  /* Start: die drei Zahlen der Zahlenzeile führen; Versand/Produktion erreicht man über Sidebar/Kapsel. */
  .pg-ops-home .oh-kpi .kpi-fert { display: none; }
  .vs-week { flex: 1 1 100%; }
  .vs-kw { flex: 1; }
}

/* ═══ App-Navigationsmodus (iPhone-App 1.2, html.app-nav) — die App stellt Titelleiste, Zurück, Aktion,
   Tab-Leiste; die Website-Schale (Topbar, Sidebar, Hamburger) verschwindet. Martin 07.09.2026: „es
   macht keinen Sinn, unten einen Hub-Reiter zu machen und dort die Hub-Emulation reinzuknallen". ═══ */
html.app-nav .topbar, html.app-nav .sidebar, html.app-nav .scrim { display: none !important; }
html.app-nav .app { grid-template-columns: 1fr; }
html.app-nav .content { padding-top: calc(10px + env(safe-area-inset-top)); }
html.app-nav a.page-back, html.app-nav .topbar-back { display: none !important; }
/* Modul-Titel doppelt (native Leiste zeigt ihn): Seitentitel bleibt, wenn er Beiwerk trägt (dup-title-Logik greift) */
/* Bereichsleisten, die nur zwischen SEITEN verlinken (Welt-Startseiten: Start · Produktion · Aufgaben …), sind in
   der App die Aufgabe der nativen Pille/des Menüs → aus. Abschnitts-Tabs EINER Seite (data-mtab-btn) bleiben,
   der runde FAB rückt ohne Leiste an den unteren Rand. */
/* Die Bridge stempelt jede .mnav: .mnav-links (nur Links = Welt-Kapsel, in der App überflüssig) oder .mnav-tools (Knöpfe).
   ACHTUNG: :has() darf NICHT in :has() stehen (Selectors 4) — WebKit verwirft den ganzen Selektor still. Deshalb Klassen. */
html.app-nav .mnav.mnav-links .mnav-bar, html.app-nav .mnav:not(:has(button.mnav-item)) .mnav-bar { display: none !important; }
html.app-nav .mnav.mnav-links .mnav-fab { bottom: calc(18px + env(safe-area-inset-bottom)); }
html.app-nav body:has(.mnav.mnav-links:not([hidden])) .content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
html.app-nav body:has(.mnav.mnav-links:not([hidden])) .jobdock, html.app-nav body:has(.mnav.mnav-links:not([hidden])) .toast { bottom: calc(14px + env(safe-area-inset-bottom)); }
/* Seitentitel in der App: die native Titelleiste zeigt ihn (Bridge liest .page-head .page-title) — in der Seite
   fällt der TEXT weg, Beiwerk (Zähler-Pille, Tag) und die Unterzeile bleiben (dieselbe Mechanik wie body.dup-title). */
html.app-nav .page-head .page-title { font-size: 0; line-height: 0; letter-spacing: 0; }
html.app-nav .page-head .page-title > * { font-size: 13px; line-height: 1.5; letter-spacing: normal; }
html.app-nav .page-head .page-title:not(:has(> *)) { display: none; }
html.app-nav .page-head .page-title + .page-sub { margin-top: 0; font-size: 14px; }

/* ═══ WEBSITE-MANAGEMENT (Consent Hub) — GENERIERT von cookietool_DSGVO_web/dev/build-crm-css.mjs aus hub/app/app.css. NICHT von Hand ändern, ./dev/sync-crm.sh laufen lassen. ═══ */
/* Tokens des Hubs, die das CRM nicht kennt (Farben kommen von body.dark/body.light). */
.wm { --ink: var(--text); --t-accept: var(--text); --t-custom: var(--text3); --t-reject: rgba(0,0,0,.14); --shadow-sm: 0 1px 2px rgba(0,0,0,.14); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.45; }
body.dark .wm { --t-reject: rgba(255,255,255,.18); }
.wm svg.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wm .toolbar { margin-bottom: 0; }
.wm .tbl tbody tr { cursor: default; }
.wm .tbl tbody tr:hover { background: inherit; }
.wm .tbl tbody tr.click { cursor: pointer; }
.wm .tbl tbody tr.click:hover { background: var(--surface2); }
.wm a { color: inherit; text-decoration: none; }
.wm svg.ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.wm .tiny { font-size: 11px; color: var(--text3); }
.wm .muted { color: var(--text2); }
.wm .mono { font-variant-numeric: tabular-nums; }
.wm .num { text-align: right; font-variant-numeric: tabular-nums; }
.wm .leer { font-size: 12.5px; color: var(--text3); margin: 10px 0 2px; }
.wm .leer.center { text-align: center; padding: 30px 16px; margin: 0; }
.wm .row { display: flex; align-items: center; gap: 10px; }
.wm .wrap { flex-wrap: wrap; }
.wm .grow { flex: 1 1 auto; min-width: 0; }
.wm .right { margin-left: auto; }
.wm .is-neg { color: var(--danger); }
.wm .pub { display: flex; align-items: center; gap: 8px; flex: none; }
.wm .pub-state { font-size: 12.5px; color: var(--text3); white-space: nowrap; }
.wm .wm-back { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--text3); text-decoration: none; margin-bottom: 4px; }
.wm .wm-back:hover { color: var(--text); }
.wm .wm-back svg.ico { width: 13px; height: 13px; }
.wm .wm-tabs { margin: -6px 0 16px; flex-wrap: wrap; }
.wm .wm-tabs .seg-btn { text-decoration: none; }
.wm .plate { display: flex; align-items: stretch; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; margin-bottom: 14px; }
.wm .plate-main { flex: 1; min-width: 0; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
.wm .plate-main h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; margin: 0; overflow-wrap: anywhere; }
.wm .plate-m { font-size: 12.5px; color: var(--text2); overflow-wrap: anywhere; }
.wm .plate-s { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 18px; }
.wm .plate-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text3); margin: 0 5px 1px 0; vertical-align: middle; }
.wm .plate-dot.ok { background: var(--ok); }
.wm .plate-dot.warn { background: var(--warn); }
.wm .plate-m a.plate-link { color: var(--text2); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.wm .plate-m a.plate-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.wm .plate-m a.plate-link svg.ico { width: 11px; height: 11px; color: var(--text3); }
.wm .stats { display: flex; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; margin-bottom: 16px; overflow: hidden; }
.wm .stat { flex: 1 1 160px; min-width: 0; padding: 15px 18px 13px; border-right: 1px solid var(--border2); }
.wm .stat:last-of-type { border-right: 0; }
.wm .stat-l { font-size: 12px; font-weight: 500; color: var(--text2); }
.wm .stat-n { font-size: 28px; font-weight: 600; letter-spacing: -.8px; line-height: 1.1; margin: 5px 0 4px; font-variant-numeric: tabular-nums; color: var(--text); }
.wm .stat-n .suf { font-size: 15px; font-weight: 500; color: var(--text2); margin-left: 2px; letter-spacing: 0; }
.wm .stat-d { font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.wm .stat-band { flex: 1 1 100%; padding: 2px 18px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border2); padding-top: 12px; }
.wm .mbar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--surface3); flex: 1 1 260px; }
.wm .mbar-seg { display: block; height: 100%; }
.wm .mbar-seg + .mbar-seg { box-shadow: inset 1px 0 0 var(--surface); }
.wm .mlegend { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.wm .mleg { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text3); }
.wm .mleg i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.wm .mleg b { color: var(--text2); font-weight: 600; font-variant-numeric: tabular-nums; }
.wm .tone-accept { background: var(--t-accept); }
.wm .tone-custom { background: var(--t-custom); }
.wm .tone-reject { background: var(--t-reject); }
.wm .chart-wrap { position: relative; }
.wm .chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm .chart-wrap .grid line { stroke: var(--border2); stroke-width: 1; }
.wm .chart-wrap .axis text { fill: var(--text3); font-size: 11px; font-family: var(--font); font-variant-numeric: tabular-nums; }
.wm .chart-wrap .area { fill: var(--ink); fill-opacity: .05; }
.wm .chart-wrap .line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.wm .chart-wrap .dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.wm .chart-wrap .hair { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 2 3; }
.wm .chart-wrap .hit { fill: transparent; cursor: crosshair; }
.wm .chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 9px 12px; font-size: 12px; min-width: 170px; }
.wm .chart-tip b { display: block; font-weight: 700; margin-bottom: 5px; }
.wm .chart-tip .r { display: flex; align-items: center; gap: 8px; padding: 1px 0; color: var(--text2); }
.wm .chart-tip .r i { width: 10px; height: 2px; border-radius: 1px; }
.wm .chart-tip .r span { margin-left: auto; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wm .chart-tip .r.total { border-top: 1px solid var(--border2); margin-top: 4px; padding-top: 4px; }
.wm .bd-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; font-size: 13px; margin: 0 -10px; border-radius: 7px; overflow: hidden; }
.wm .bd-row + .bd-row { margin-top: 2px; }
.wm .bd-row .bar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--surface3); z-index: 0; border-radius: 7px; }
.wm .bd-row .k, .wm .bd-row .v { position: relative; z-index: 1; }
.wm .bd-row .k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm .bd-row .v { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; white-space: nowrap; }
.wm .bd-row .v small { color: var(--text3); font-weight: 500; margin-left: 6px; }
.wm .bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 1100px) {
	.wm .bd-grid { grid-template-columns: 1fr; }
}
.wm .boxes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.wm .boxes > .card, .wm .boxes > .card + .card { margin: 0; min-width: 0; }
.wm .boxes .span-4 { grid-column: span 4; }
.wm .boxes .span-6 { grid-column: span 6; }
.wm .boxes .span-8 { grid-column: span 8; }
.wm .box-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px; }
.wm .box-val small { font-size: 11.5px; font-weight: 500; color: var(--text3); }
.wm .hbars { display: flex; flex-direction: column; gap: 9px; }
.wm .hbar { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.wm .hb-k { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.wm .hb-track { display: block; height: 8px; border-radius: 4px; background: var(--surface3); overflow: hidden; }
.wm .hb-track i { display: block; height: 100%; border-radius: 4px; background: var(--ink); min-width: 2px; }
.wm .hb-v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.wm .hb-v small { color: var(--text3); font-weight: 500; margin-left: 6px; }
.wm .donut-row { display: flex; align-items: center; gap: 18px; }
.wm .donut-wrap { position: relative; width: 132px; height: 132px; flex: none; }
.wm .donut { width: 100%; height: 100%; display: block; }
.wm .donut circle { fill: none; stroke-width: 11; transform: rotate(-90deg); transform-origin: 50% 50%; }
.wm .donut .track { stroke: var(--surface3); }
.wm .donut .tone-accept { stroke: var(--t-accept); background: none; }
.wm .donut .tone-custom { stroke: var(--t-custom); background: none; }
.wm .donut .tone-reject { stroke: var(--t-reject); background: none; }
.wm .donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.wm .donut-c b { font-size: 20px; font-weight: 600; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wm .donut-c span { font-size: 11px; color: var(--text3); }
.wm .dlegend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wm .dleg { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text2); }
.wm .dleg i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.wm .dleg b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.wm .dleg small { color: var(--text3); font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.wm .chk-list { display: flex; flex-direction: column; margin: -6px 0; }
.wm .chk { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border2); color: var(--text); font-size: 13px; }
.wm .chk:last-child { border-bottom: 0; }
.wm .chk:hover .chk-l { color: var(--accent2); }
.wm .chk-ic { width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.wm .chk.ok .chk-ic { background: rgba(34,197,94,.14); color: var(--ok); }
.wm .chk.warn .chk-ic { background: rgba(245,158,11,.16); color: var(--warn); }
.wm .chk-l { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wm .chk-l small { font-size: 11.5px; color: var(--text3); }
.wm .chk > svg.ico { color: var(--text3); }
.wm .ring { position: relative; flex: none; }
.wm .ring svg { display: block; width: 100%; height: 100%; }
.wm .ring circle { fill: none; stroke-width: 3.4; transform: rotate(-90deg); transform-origin: 50% 50%; }
.wm .ring .track { stroke: var(--surface3); }
.wm .ring .val { stroke: var(--ink); stroke-linecap: round; }
.wm .ring .n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; letter-spacing: -.3px; font-variant-numeric: tabular-nums; color: var(--text); }
.wm .score-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; background: none; border: 1px solid transparent; padding: 6px 10px 6px 8px; border-radius: 10px; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.wm .score-btn:hover { background: var(--surface3); }
.wm .score-k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.wm .score-r { display: flex; align-items: center; gap: 10px; }
.wm .score-r b { font-size: 13.5px; font-weight: 600; }
.wm.modal-card.md { width: 760px; }
.wm .score-modal .score-head { padding-bottom: 14px; border-bottom: 1px solid var(--border2); margin-bottom: 2px; }
.wm .sp-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); padding: 14px 0 4px; display: flex; align-items: center; }
.wm .score-modal .chk-list { margin: 0; }
.wm .chk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.wm .chk-grid .chk:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
@media (max-width: 860px) {
	.wm .chk-grid { grid-template-columns: 1fr; }
}
.wm .score-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.wm .score-big { font-size: 28px; font-weight: 600; letter-spacing: -.8px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.wm .score-big small { font-size: 13px; color: var(--text3); font-weight: 500; letter-spacing: 0; margin-left: 4px; }
.wm .score-sub { font-size: 12.5px; color: var(--text2); margin-top: 3px; }
.wm .score-head + .chk-list { border-top: 1px solid var(--border2); padding-top: 6px; margin-top: 0; }
@media (max-width: 1100px) {
	.wm .boxes .span-4, .wm .boxes .span-6, .wm .boxes .span-8 { grid-column: span 12; }
}
.wm .card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; overflow: hidden; }
.wm .card + .card { margin-top: 16px; }
.wm .card-head { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--border2); min-height: 50px; }
.wm .card-title { font-size: 13.5px; font-weight: 600; }
.wm .card-head .ch-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wm .card-body { padding: 16px; }
.wm .card-body.flush { padding: 0; }
.wm .card-foot { padding: 10px 16px; border-top: 1px solid var(--border2); }
.wm .toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wm .toolbar .state { font-size: 12.5px; color: var(--text3); }
.wm .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.wm .cols-2-1 { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
.wm .detail-cols { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.wm .design-cols { display: grid; grid-template-columns: 410px 1fr; gap: 16px; align-items: start; }
.wm .cols > *, .wm .cols-2-1 > *, .wm .detail-cols > *, .wm .design-cols > * { min-width: 0; }
.wm .cols .card + .card, .wm .cols-2-1 .card + .card, .wm .detail-cols .card + .card, .wm .design-cols .card + .card { margin-top: 0; }
.wm .stack { display: flex; flex-direction: column; gap: 16px; }
.wm .stack .card + .card { margin-top: 0; }
.wm .savebar { position: sticky; bottom: 12px; z-index: 5; margin-top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 10px 16px; box-shadow: var(--shadow); }
.wm .lang-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wm .doc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.wm .doc-tile { text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 16px 18px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: var(--text); font: inherit; transition: border-color .12s; }
.wm .doc-tile:hover { border-color: var(--text3); }
.wm .doc-tile.active { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.wm .dt-head { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; }
.wm .dt-head svg.ico { color: var(--text3); width: 18px; height: 18px; }
.wm .doc-tile.active .dt-head svg.ico { color: var(--accent2); }
.wm .dt-sub { font-size: 12.5px; color: var(--text2); }
.wm .dt-state { font-size: 11.5px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm code.url { display: inline-block; max-width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; padding: 5px 8px; overflow-wrap: anywhere; }
.wm .embed-cols { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.wm .legal-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.wm .embed-cols > *, .wm .legal-cols > * { min-width: 0; }
.wm .embed-cols .card + .card, .wm .legal-cols .card + .card { margin-top: 0; }
.wm .sticky { position: sticky; top: 0; }
@media (max-width: 1100px) {
	.wm .cols-2-1, .wm .detail-cols, .wm .design-cols, .wm .embed-cols, .wm .legal-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.wm .doc-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
	.wm .cols { grid-template-columns: 1fr; }
}
.wm .cfg-section { padding: 6px 0 2px; }
.wm .cfg-section + .cfg-section { border-top: 1px solid var(--border2); margin-top: 8px; padding-top: 14px; }
.wm .cfg-h { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--text3); text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.wm .cfg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
.wm .cfg-row .k { color: var(--text2); display: flex; align-items: center; gap: 8px; min-width: 0; }
.wm .cfg-row .v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.wm .cfg-row .v.dim { color: var(--text3); font-weight: 500; }
.wm .cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.wm .cfg-grid .cfg-row { padding: 6px 0; }
.wm .props { display: flex; flex-direction: column; }
.wm .prop { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid var(--border2); }
.wm .prop:last-child { border-bottom: 0; }
.wm .prop-k { width: 120px; flex: none; color: var(--text2); font-size: 12.5px; padding-top: 1px; }
.wm .prop-v { flex: 1; min-width: 0; }
.wm .acc { padding: 6px 16px 4px; }
.wm .acc-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 4px; border: 0; border-bottom: 1px solid var(--border2); background: none; color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; }
.wm .acc-h svg.ico:first-child { color: var(--text3); }
.wm .acc-h .acc-l { flex: none; }
.wm .acc-h .acc-sum { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.wm .acc-h > svg.ico:last-child { color: var(--text3); transition: transform .15s; }
.wm .acc-h.open > svg.ico:last-child { transform: rotate(90deg); }
.wm .acc-h.open { border-bottom-color: transparent; }
.wm .acc-h.open svg.ico:first-child { color: var(--accent2); }
.wm .acc-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .22s ease; border-bottom: 1px solid transparent; }
.wm .acc-b.open { grid-template-rows: 1fr; border-bottom-color: var(--border2); }
.wm .acc-i { overflow: hidden; min-height: 0; }
.wm .acc-p { padding: 2px 4px 12px; opacity: 0; transition: opacity .18s ease .06s; }
.wm .acc-b.open .acc-p { opacity: 1; }
.wm .acc-p .anat:last-child, .wm .acc-p .cfg-row:last-child { border-bottom: 0; }
.wm .lay-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 2px 0 8px; }
.wm .lay-pick.two { grid-template-columns: repeat(2, 1fr); margin: 0; min-width: 190px; }
.wm .lay-pick.two .lay-btn { padding: 6px 6px 5px; font-size: 11px; }
.wm .lay-pick.two .lay-btn svg { width: 40px; height: 28px; }
.wm .lay-pick.presets { min-width: 228px; gap: 6px; }
.wm .lay-pick.presets .lay-btn { white-space: nowrap; }
.wm .lay-pick.presets .lay-btn svg { width: 44px; height: 30px; }
.wm .fold { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .2s ease, opacity .2s ease; }
.wm .fold.open { grid-template-rows: 1fr; opacity: 1; }
.wm .fold-i { overflow: hidden; min-height: 0; }
.wm .acc-p .anat { transition: border-color .2s ease; }
.wm .acc-p .anat:has(+ .fold:not(.open)) { border-bottom-color: transparent; }
.wm .ptiles { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.wm .ptile { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); color: var(--text2); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: border-color .12s, background .12s, color .12s; }
.wm .ptile svg.ico { width: 15px; height: 15px; color: var(--text3); }
.wm .ptile:hover { background: var(--surface); color: var(--text); }
.wm .ptile.active { border-color: var(--text); background: var(--surface); color: var(--text); }
.wm .ptile.active svg.ico { color: var(--text); }
.wm .preview-note { font-size: 12.5px; color: var(--text2); background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; margin-bottom: 10px; }
.wm .preview-full { position: fixed; inset: 0; z-index: 250; background: var(--bg); display: flex; flex-direction: column; padding: 12px 16px 16px; gap: 10px; }
.wm .preview-full .pf-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wm .preview-full .pf-bar .ptiles { margin: 0; }
.wm .preview-full .pf-bar .ch-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.wm .preview-full .preview { flex: 1 1 auto; min-height: 0; }
.wm .preview-full .preview iframe { height: 100%; min-height: 0; }
.wm .preview-full .preview-note { margin: 0; }
.wm .lay-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface2); font-size: 12px; font-weight: 600; color: var(--text2); cursor: pointer; transition: border-color .12s, background .12s; }
.wm .lay-btn svg { width: 52px; height: 36px; display: block; }
.wm .lay-btn .pg { fill: var(--surface3); stroke: var(--border); stroke-width: 1; }
.wm .lay-btn .dl { fill: var(--text3); }
.wm .lay-btn:hover { background: var(--surface); color: var(--text); }
.wm .lay-btn.active { border-color: var(--text); background: var(--surface); color: var(--text); }
.wm .lay-btn.active .dl { fill: var(--text); }
.wm .lay-btn .bt { fill: var(--surface); }
.wm .lay-btn .ln { fill: var(--surface); opacity: .6; }
.wm .lay-btn .x { fill: none; stroke: var(--surface); stroke-width: 1.1; stroke-linecap: round; }
.wm .anat { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border2); }
.wm .anat:last-child { border-bottom: 0; }
.wm .anat-k { display: flex; flex-direction: column; min-width: 0; flex: 1 1 120px; font-size: 13px; color: var(--text); }
.wm .anat-k small { font-size: 11.5px; color: var(--text3); line-height: 1.35; }
.wm .anat.sub { padding-left: 14px; border-bottom: 0; margin-top: -4px; }
.wm .anat.sub .anat-k { color: var(--text2); font-size: 12.5px; }
.wm .anat-c { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.wm .anat-c select.inp.compact { max-width: 230px; }
.wm .doc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border2); flex-wrap: wrap; }
.wm .doc-row:last-child { border-bottom: 0; }
.wm .doc-k { display: flex; flex-direction: column; min-width: 160px; }
.wm .doc-k small { font-size: 11.5px; color: var(--text3); }
.wm .doc-c { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wm .steps { display: flex; flex-direction: column; gap: 20px; }
.wm .step { display: flex; gap: 14px; }
.wm .step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--text); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.wm .step-b { flex: 1; min-width: 0; }
.wm .step-t { font-size: 13.5px; font-weight: 600; margin: 4px 0 10px; }
.wm .step-note { font-size: 12.5px; color: var(--text2); margin-top: 8px; }
.wm .pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 1.3; }
.wm .pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.wm .pill.green { background: rgba(34,197,94,.14); color: var(--ok); }
.wm .pill.amber { background: rgba(245,158,11,.14); color: var(--warn); }
.wm .pill.red { background: rgba(239,68,68,.14); color: var(--danger); }
.wm .pill.blue { background: rgba(59,130,246,.14); color: var(--info); }
.wm .pill.gray { background: var(--surface3); color: var(--text2); }
.wm .pill.solid { background: var(--surface3); color: var(--text2); }
.wm .tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--surface3); border: 1px solid var(--border); color: var(--text2); white-space: nowrap; }
.wm .filter-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text2); padding: 6px 11px; min-height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.wm .filter-chip:hover { color: var(--text); }
.wm .filter-chip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.wm .filter-chip svg.ico { width: 13px; height: 13px; }
.wm select.filter-chip { appearance: none; -webkit-appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6675' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 9px center; }
.wm .btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all .12s; white-space: nowrap; }
.wm .btn:hover { background: var(--surface3); }
.wm .btn:disabled { opacity: .5; cursor: default; }
.wm .btn svg.ico { width: 15px; height: 15px; }
.wm .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.wm .btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.wm .btn-sm { padding: 5px 10px; font-size: 12px; }
.wm .btn-danger-text { color: var(--danger); }
.wm .icon-btn { width: 32px; height: 32px; flex: none; border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; padding: 0; }
.wm .icon-btn:hover { background: var(--surface3); color: var(--text); }
.wm .icon-btn svg.ico { width: 16px; height: 16px; }
.wm .icon-btn.sm { width: 28px; height: 28px; }
.wm .icon-btn.sm svg.ico { width: 14px; height: 14px; }
.wm .fld.is-dirty label::after, .wm .cfg-row.is-dirty .k::after, .wm .doc-row.is-dirty .cell-strong::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 7px; vertical-align: middle; }
.wm .fld.is-dirty input, .wm .fld.is-dirty textarea, .wm .fld.is-dirty select, .wm .cfg-row.is-dirty .inp, .wm .doc-row.is-dirty .inp { border-color: var(--text2); background: var(--surface); }
.wm .fld.is-invalid input, .wm .fld.is-invalid textarea, .wm .fld.is-invalid select, .wm .cfg-row.is-invalid .inp, .wm .doc-row.is-invalid .inp, .wm .inp.is-invalid { border-color: var(--danger) !important; background: rgba(220,38,38,.04); }
.wm .fld-err { font-size: 11.5px; color: var(--danger); margin-top: -1px; }
.wm .toolbar .state.is-err { color: var(--danger); font-weight: 600; }
.wm .edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 16px; }
.wm .edit-grid > * { min-width: 0; }
.wm .fld { display: flex; flex-direction: column; gap: 5px; }
.wm .fld.full { grid-column: 1 / -1; }
.wm .fld label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text3); }
.wm .fld input, .wm .fld textarea, .wm .fld select, .wm .inp { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 8px 10px; font-size: 13px; outline: none; width: 100%; min-width: 0; }
.wm .fld input:focus, .wm .fld textarea:focus, .wm .fld select:focus, .wm .inp:focus { border-color: var(--accent); }
.wm .fld textarea, .wm textarea.inp { min-height: 62px; resize: vertical; line-height: 1.5; }
.wm .inp.compact { width: auto; padding: 5px 8px; font-size: 12px; }
.wm .color-row { display: flex; align-items: center; gap: 8px; }
.wm .color-row input[type="color"] { width: 32px; height: 30px; padding: 2px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface2); cursor: pointer; }
.wm .color-row input[type="text"] { width: 92px; font-variant-numeric: tabular-nums; }
.wm .search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 7px 12px; width: 320px; max-width: 100%; color: var(--text3); }
.wm .search input { background: none; border: none; outline: none; color: var(--text); font-size: 13px; width: 100%; }
.wm .search svg.ico { width: 15px; height: 15px; }
.wm .li-search { width: 100%; max-width: 100%; margin: 0 0 12px; }
.wm .keybox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm .keybox code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .08em; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; min-width: 200px; }
.wm .set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 2px; }
.wm .set-row + .set-row { border-top: 1px solid var(--border2); }
.wm .set-t { font-size: 13.5px; font-weight: 600; }
.wm .set-s { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.wm .switch { position: relative; flex: none; width: 46px; height: 28px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface3); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.wm .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.wm .switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.wm .switch[aria-checked="true"]::after { transform: translateX(18px); }
.wm .switch:disabled { opacity: .5; cursor: default; }
.wm .seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; }
.wm .seg-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; min-height: 28px; font-size: 12px; font-weight: 600; color: var(--text2); background: transparent; border: 0; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; }
.wm .seg-btn:not(.active):hover { background: var(--surface3); color: var(--text); }
.wm .seg-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.wm .seg-n { font-size: 10.5px; font-weight: 600; color: var(--text3); font-variant-numeric: tabular-nums; }
.wm .seg-btn.active .seg-n { color: var(--text2); }
.wm .tbl { width: 100%; border-collapse: collapse; }
.wm .tbl thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text3); padding: 10px 16px; border-bottom: 1px solid var(--border2); white-space: nowrap; }
.wm .tbl thead th.num { text-align: right; }
.wm .tbl tbody td { padding: 11px 16px; border-bottom: 1px solid var(--border2); font-size: 13px; vertical-align: middle; }
.wm .tbl tbody tr:last-child td { border-bottom: none; }
.wm .tbl tbody tr.click { cursor: pointer; transition: background .1s; }
.wm .tbl tbody tr.click:hover { background: var(--surface2); }
.wm .tbl tr.grp td { padding: 12px 16px 6px; border-bottom: 0; }
.wm .tbl tr.grp + tr td { border-top: 1px solid var(--border2); }
.wm .grp-t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.wm .grp-n { font-size: 10.5px; font-weight: 700; color: var(--text3); margin-left: 8px; font-variant-numeric: tabular-nums; }
.wm .cell-strong { font-weight: 600; color: var(--text); }
.wm .cell-sub { font-size: 11.5px; color: var(--text3); margin-top: 1px; }
.wm .cell-actions { text-align: right; white-space: nowrap; }
.wm .cell-actions .icon-btn { vertical-align: middle; }
.wm .tbl-wrap { overflow-x: auto; }
.wm .td-tight { width: 1%; white-space: nowrap; }
.wm .tbl a.cell-link { font-weight: 600; color: var(--text); text-decoration: none; }
.wm .tbl a.cell-link:hover { color: var(--accent2); text-decoration: underline; text-underline-offset: 3px; }
.wm .pick-list { max-height: 52vh; overflow-y: auto; margin: 0 -4px; }
.wm .pick { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border2); }
.wm .pick:last-child { border-bottom: 0; }
.wm .back { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 500; color: var(--text3); text-decoration: none; margin-bottom: 2px; }
.wm .back:hover { color: var(--text); }
.wm .back svg.ico { width: 13px; height: 13px; }
.wm .mono-list { display: flex; flex-direction: column; gap: 6px; }
.wm .mono-list code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--text2); overflow-wrap: anywhere; }
.wm .code { position: relative; background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; padding-right: 100px; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--text); }
.wm .code .copy { position: absolute; top: 8px; right: 8px; }
.wm .preview { background: #e9ebef; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; justify-content: center; }
.wm .preview iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; transition: width .2s, opacity .2s; }
.wm .preview.loading iframe { opacity: .55; }
.wm .preview.loading iframe { opacity: .5; }
.wm .preview.mobile iframe { width: 390px; }
.wm .preview.doc iframe { height: 760px; background: #fff; }
.wm.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); }
.wm.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); width: 600px; max-width: 94vw; max-height: 88vh; display: flex; flex-direction: column; }
.wm.modal-card.sm { width: 400px; }
.wm.modal-head { padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.wm.modal-body { padding: 16px; overflow: auto; }
.wm.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border2); }
.wm.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); z-index: 9999; max-width: 440px; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 10px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); font-size: 13px; line-height: 1.4; box-shadow: 0 10px 34px rgba(0,0,0,.34); opacity: 0; pointer-events: none; transition: opacity .26s ease, transform .26s ease; }
.wm.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.wm.toast-err { border-color: rgba(239,68,68,.55); }
@media (max-width: 720px) {
	.wm .plate { flex-wrap: wrap; }
	.wm .plate-s { width: 100%; border-top: 1px solid var(--border2); }
	.wm .cfg-grid { grid-template-columns: 1fr; }
}
/* ═══ ENDE WEBSITE-MANAGEMENT ═══ */

/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   iOS-SKIN (App-Modus, html.app-nav) — Martin 07.09.2026: „alles richtig neu erdenken, das andere ist nur
   Webapp-Basic". Die Seiten sehen in der App aus wie native iOS-Screens: gruppierter Hintergrund, Zellen
   ohne Rahmen mit Haarlinien, Typografie nach Apple (17/15/13), Kennzahlen als Zahlenreihe statt
   Kacheln, Modul-Kacheln als Listenzeilen mit Chevron, Segmentsteuerung, Suchfeld, Kapseln und Knöpfe
   wie im System. NUR in der App (html.app-nav setzt die Bridge) — Browser/PWA/Desktop unberührt.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Farbwelt: iOS „grouped" — dunkel wie Einstellungen (Schwarz + #1c1c1e), hell #f2f2f7 + Weiß ── */
html.app-nav body {
  --bg: #000; --surface: #1c1c1e; --surface2: #1c1c1e; --surface3: #2c2c2e;
  --border: #38383a; --border2: #38383a; --text: #fff; --text2: #98989f; --text3: #6e6e73;
  --ios-fill: rgba(120,120,128,.24); --ios-fill2: rgba(120,120,128,.18); --ios-sep: #38383a;
  font-size: 15px; -webkit-font-smoothing: antialiased;
}
html.app-nav body.light {
  --bg: #f2f2f7; --surface: #fff; --surface2: #fff; --surface3: #e5e5ea;
  --border: #e5e5ea; --border2: #e5e5ea; --text: #000; --text2: #6c6c70; --text3: #8e8e93;
  --ios-fill: rgba(120,120,128,.16); --ios-fill2: rgba(120,120,128,.10); --ios-sep: #d1d1d6;
}
html.app-nav .content { padding-left: 16px; padding-right: 16px; }

/* ── Typografie: Seitentext 15, Zeilentitel 17, Unterzeilen 15, Bildunterschrift 13 ── */
html.app-nav .page-sub { font-size: 15px; color: var(--text2); }
html.app-nav .tiny { font-size: 13px; }
html.app-nav .muted { color: var(--text2); }
html.app-nav h2, html.app-nav .sec-title { font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
html.app-nav .detail-meta h1 { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }

/* ── Karten = gruppierte Zellen: kein Rahmen, 12er Radius, Kopf als iOS-Abschnittstitel ── */
html.app-nav .card { border: 0; border-radius: 12px; background: var(--surface); box-shadow: none; }
html.app-nav .card + .card { margin-top: 16px; }
html.app-nav .card-head { padding: 12px 16px 8px; border-bottom: 0; }
html.app-nav .card-title { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--text2); }
html.app-nav .card-body { padding: 4px 16px 16px; font-size: 15px; }

/* ── Listenzeilen: Zellen mit Haarlinie (eingerückt) und Chevron bei tippbaren Zeilen ── */
html.app-nav table.tbl.tbl-cards tbody { gap: 0; padding: 0; background: var(--surface); border-radius: 12px; overflow: visible; }
html.app-nav table.tbl.tbl-cards tbody tr:first-child { border-radius: 16px 16px 0 0; }
html.app-nav table.tbl.tbl-cards tbody tr:last-child { border-radius: 0 0 16px 16px; }
html.app-nav table.tbl.tbl-cards tbody tr { background: transparent; border: 0; border-radius: 0; padding: 12px 16px;
  position: relative; row-gap: 4px; }
html.app-nav table.tbl.tbl-cards tbody tr + tr::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--ios-sep); transform: scaleY(.5); }
html.app-nav table.tbl.tbl-cards tbody tr[data-row-href] { padding-right: 34px; }
html.app-nav table.tbl.tbl-cards tbody tr[data-row-href]::after { content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: translateY(-50%) rotate(-45deg); }
html.app-nav table.tbl.tbl-cards td.m-first { font-size: 17px; font-weight: 600; letter-spacing: -.2px; line-height: 1.25; }
html.app-nav table.tbl.tbl-cards td { font-size: 15px; }
html.app-nav table.tbl.tbl-cards td.m-last { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
html.app-nav .list-prev { font-size: 15px; color: var(--text2); }

html.app-nav .inbox-row { padding: 12px 16px; border-bottom: 0; position: relative; }
html.app-nav .inbox-row + .inbox-row::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--ios-sep); transform: scaleY(.5); }
html.app-nav .lead-card, html.app-nav .vk-card { border: 0; border-radius: 12px; background: var(--surface); padding: 14px 16px; }
html.app-nav .hub-row, html.app-nav .os-row, html.app-nav .trow { padding-top: 12px; padding-bottom: 12px; font-size: 17px; }

/* ── Kennzahlen: keine Kacheln — EINE Zahlenreihe (wie Health/Aktien), Zahl groß, Bezeichnung darunter ── */
html.app-nav .kpi-grid, html.app-nav .hero3, html.app-nav .statband {
  display: flex; gap: 0; margin: 0 -16px 16px; padding: 0 16px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; }
html.app-nav .kpi-grid::-webkit-scrollbar, html.app-nav .hero3::-webkit-scrollbar, html.app-nav .statband::-webkit-scrollbar { display: none; }
html.app-nav .kpi, html.app-nav .stat {
  flex: 0 0 auto; min-width: 128px; background: transparent; border: 0; border-radius: 0; padding: 8px 22px 6px 0;
  display: flex; flex-direction: column; gap: 2px; position: relative; }
html.app-nav .kpi + .kpi::before, html.app-nav .stat + .stat::before { content: ''; position: absolute; left: -11px; top: 12px; bottom: 12px; width: 1px; background: var(--ios-sep); }
html.app-nav .kpi-top { margin-bottom: 4px; order: 2; }
html.app-nav .kpi-label, html.app-nav .stat-l { font-size: 13px; color: var(--text2); font-weight: 500; white-space: nowrap; }
html.app-nav .kpi-body { order: 1; }
html.app-nav .kpi-num, html.app-nav .stat-v { font-size: 28px; font-weight: 700; letter-spacing: -.6px; font-variant-numeric: tabular-nums; line-height: 1.05; }
html.app-nav .kpi.sm .kpi-num { font-size: 24px; }
html.app-nav .kpi-foot { order: 3; margin-top: 2px; font-size: 13px; color: var(--text3); white-space: nowrap; }
html.app-nav .kpi-dots, html.app-nav .kpi-ico, html.app-nav .kpi .spark { display: none; }
html.app-nav .mstat-row { margin: 0 -16px 14px; padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
html.app-nav .mstat-row::-webkit-scrollbar { display: none; }
html.app-nav .mstat { padding: 0 20px 0 0; min-width: 0; }
html.app-nav .mstat + .mstat { padding-left: 20px; }
html.app-nav .mstat-n { font-size: 24px; font-weight: 700; letter-spacing: -.5px; }
html.app-nav .mstat-l { font-size: 13px; color: var(--text2); }

/* ── Modul-Kacheln (PLANKOS-Start u. a.) → Listenzeilen mit Chevron, eine Gruppe ── */
html.app-nav .os-tiles { display: flex; flex-direction: column; gap: 0; background: var(--surface); border-radius: 12px; overflow: hidden; }
html.app-nav .os-tile { min-height: 0; border: 0; border-radius: 0; padding: 13px 40px 13px 16px; gap: 2px; position: relative; }
html.app-nav .os-tile + .os-tile::before { content: ''; position: absolute; left: 16px; right: 0; top: 0; height: 1px; background: var(--ios-sep); transform: scaleY(.5); }
html.app-nav .os-tile::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: translateY(-50%) rotate(-45deg); }
html.app-nav .os-tile .n { font-size: 17px; font-weight: 600; }
html.app-nav .os-tile .t { font-size: 15px; color: var(--text2); line-height: 1.35; }
html.app-nav .os-tile .c { font-size: 13px; padding-top: 2px; margin-top: 0; }
html.app-nav .os-search-hero { background: var(--ios-fill2); border: 0; border-radius: 10px; }

/* ── Bedienelemente: Suche, Segment, Kapseln, Knöpfe, Felder ── */
html.app-nav .search, html.app-nav .li-search { background: var(--ios-fill2); border: 0; border-radius: 10px; padding: 8px 12px; margin-left: 0; }
html.app-nav .search input { font-size: 17px; }
/* .seg/.seg-btn: siehe Teil 9 — eine Zeile runder Kapseln (Segment-Wanne abgeschafft). */
html.app-nav .filter-chip { font-size: 15px; padding: 7px 14px; border: 0; border-radius: 999px; background: var(--ios-fill2); color: var(--text); }
html.app-nav .filter-chip.on, html.app-nav .filter-chip.active, html.app-nav .filter-chip[aria-pressed="true"] { background: var(--text); color: var(--bg); }
html.app-nav .btn { font-size: 15px; font-weight: 600; padding: 9px 16px; border: 0; border-radius: 10px; background: var(--ios-fill2); color: var(--text); }
html.app-nav .btn-sm { font-size: 15px; padding: 7px 14px; }
html.app-nav .btn-primary { background: var(--accent); color: #fff; }
html.app-nav .toolbar .btn-primary { flex: 1; justify-content: center; min-height: 48px; font-size: 17px; border-radius: 12px; }
html.app-nav .icon-btn { border: 0; background: var(--ios-fill2); border-radius: 999px; width: 36px; height: 36px; }
html.app-nav .fld label { font-size: 13px; letter-spacing: .03em; color: var(--text2); text-transform: uppercase; padding-left: 4px; }
html.app-nav .fld input, html.app-nav .fld textarea, html.app-nav .fld select, html.app-nav .inp {
  font-size: 17px; padding: 12px 14px; border: 0; border-radius: 10px; background: var(--ios-fill2); color: var(--text); }
html.app-nav .fld input::placeholder, html.app-nav .fld textarea::placeholder, html.app-nav .inp::placeholder { color: var(--text3); }
html.app-nav .fld input:focus, html.app-nav .fld textarea:focus, html.app-nav .fld select:focus, html.app-nav .inp:focus { box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .35); border: 0; }
html.app-nav .edit-grid { gap: 14px; }
html.app-nav .set-row { padding: 13px 0; font-size: 17px; }
html.app-nav .pill { font-size: 12px; font-weight: 600; padding: 3px 9px; }
html.app-nav .tag { font-size: 12px; border: 0; padding: 3px 9px; border-radius: 999px; }
html.app-nav .note-add textarea { font-size: 17px; border: 0; background: var(--ios-fill2); border-radius: 12px; }

/* ── Fenster (Modale) als iOS-Blatt von unten ── */
@media (max-width: 720px) {
  html.app-nav .modal { align-items: flex-end; padding: 0; backdrop-filter: none; background: rgba(0,0,0,.4); }
  html.app-nav .modal-card { width: 100%; max-width: 100%; border: 0; border-radius: 16px 16px 0 0; padding: 18px 18px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0,0,0,.3); }
  html.app-nav .modal-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  html.app-nav .modal-card p { font-size: 15px; }
  html.app-nav .modal-actions .btn { min-height: 46px; font-size: 17px; border-radius: 12px; flex: 1; justify-content: center; }
}

/* ── Bereichs-Tabs unten (Abschnitte EINER Seite) wie eine System-Tab-Leiste ── */
html.app-nav .mnav-bar { background: color-mix(in srgb, var(--surface) 82%, transparent); border-top: 1px solid var(--ios-sep); box-shadow: none; }
html.app-nav .mnav-item { font-size: 10px; font-weight: 500; color: var(--text2); }
html.app-nav .mnav-item.active { color: var(--accent); background: transparent; }
html.app-nav .mnav-item svg { width: 24px; height: 24px; }
html.app-nav .mnav-fab { box-shadow: 0 6px 18px rgba(0,0,0,.25); }

/* ── Detailkopf: Avatar rund, Meta als Untertitel ── */
html.app-nav .detail-av { border-radius: 999px; }
html.app-nav .head-meta { font-size: 15px; color: var(--text2); }

/* ═══ iOS-SKIN, Teil 2 — Bediensystem (Martin 07.09. abends: „jeden Knopf, Box, Tag, Filter — ein neues System"):
   EIN Vokabular für die App:
   · Primär   = gefüllter Akzent (max. EINER je Screen, in der Titelleiste oder als Vollbreiten-Knopf unten)
   · Sekundär = grau gefüllte Kapsel/Knopf (.btn, .btn-sm, .icon-btn, .filter-chip)
   · Tertiär  = Text in Akzentfarbe ohne Fläche (.btn-link, Details ›)
   · Auswahl  = Segmentsteuerung (.seg, .tab(s), .ctab(s), .cp-seg, .mode-switch, MNAV-Abschnitte OBEN)
   · Zustand  = Kapsel mit getöntem Hintergrund (.pill, .tag, .chip), nie mehr als eine je Zeile
   · Schalter = iOS-Schalter (.switch), Boxen = gruppierte Zellen (.card, .lsec, .cp-box, .os-block)
   Unterseiten mit eigener Navigation (data-mtab) bekommen ihre Abschnitte als Segmentsteuerung OBEN,
   der runde FAB bleibt unten rechts — die Bridge (pageInfo) hebt die Leiste an den Anfang des Inhalts. ═══ */

/* Abschnitts-Navigation einer Unterseite → Segmentsteuerung oben, klebt unter der Titelleiste */
html.app-nav .mnav.mnav-top { position: sticky !important; top: env(safe-area-inset-top); bottom: auto !important; left: auto !important; right: auto !important;
  z-index: 30; display: block; margin: -10px -16px 14px; padding: 6px 16px 8px; background: var(--bg); }
html.app-nav .mnav.mnav-top .mnav-bar { display: flex; }   /* Optik: Teil 9 (Chips) */
html.app-nav .mnav.mnav-top .mnav-bar::-webkit-scrollbar { display: none; }
html.app-nav .mnav.mnav-top .mnav-item { flex-direction: row; justify-content: center; gap: 5px; position: relative; }   /* Optik: Teil 9 */
html.app-nav .mnav.mnav-top .mnav-item svg { width: 15px; height: 15px; flex: 0 0 15px; stroke-width: 1.8; }
html.app-nav .mnav.mnav-top .mnav-item .mdot { position: absolute; top: 5px; right: 8px; }
html.app-nav .mnav.mnav-top .mnav-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); }
html.app-nav body:has(.mnav.mnav-top) .content { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
html.app-nav body:has(.mnav.mnav-top .mnav-fab) .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }   /* nur mit rundem Knopf */
html.app-nav body:has(.mnav.mnav-top) .jobdock, html.app-nav body:has(.mnav.mnav-top) .toast { bottom: calc(14px + env(safe-area-inset-bottom)); }
html.app-nav body.mnav-typing .mnav.mnav-top { display: block; }

/* Tabs/Konversations-Tabs/Cockpit-Segment/Modus-Schalter: siehe Teil 9 — eine Zeile runder Kapseln. */

/* Filter: Auswahlfelder als graue Kapsel mit Pfeil, der mobile „Filter"-Knopf als Kapsel mit Punkt */
html.app-nav select.filter-chip { -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2.4'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px 14px; }
html.app-nav .li-filterbtn { border: 0; border-radius: 999px; background: var(--ios-fill2); color: var(--text); font-size: 15px; min-height: 40px; padding: 0 16px; }
html.app-nav .li-filterbtn.is-open { background: var(--text); color: var(--bg); }
html.app-nav .li-filterpanel { gap: 8px; }
html.app-nav details > summary { list-style: none; cursor: pointer; }
html.app-nav details > summary::-webkit-details-marker { display: none; }
/* Nur schlichte Text-Aufklapper („Parken bis …", Filter, Weitere Felder) bekommen Akzent + ▸ — die Bridge setzt
   .app-disclosure; gestaltete Griffe (Mail-Zeilen, Brain-Blöcke, Belege, Transport-Listen, PLANKOS „Mehr") bleiben. */
html.app-nav details > summary.app-disclosure { font-size: 15px; color: var(--accent); padding: 8px 0; }
html.app-nav details > summary.app-disclosure::before { content: '▸ '; color: var(--text3); }
html.app-nav details[open] > summary.app-disclosure::before { content: '▾ '; }

/* Knöpfe: Text-Knopf (tertiär), Icon-Knopf rund, Ok-/Kadenz-Knöpfe getönt, Werkzeugleiste vollbreit */
html.app-nav .btn-link, html.app-nav a.btn.btn-ghost, html.app-nav .btn.ghost { background: transparent; color: var(--accent); padding-left: 4px; padding-right: 4px; }
html.app-nav .btn-ok { background: rgba(52,199,89,.16); color: #248a3d; }
html.app-nav body:not(.light) .btn-ok { color: #30d158; }
html.app-nav .kad-btn { border-radius: 12px; font-size: 15px; padding: 13px 12px; }
html.app-nav .toolbar { gap: 10px; }
html.app-nav .toolbar .btn { min-height: 44px; }
html.app-nav .hub-plus, html.app-nav .st-btn { border: 0; background: var(--ios-fill2); border-radius: 999px; }
html.app-nav .btn:active, html.app-nav .filter-chip:active, html.app-nav .icon-btn:active, html.app-nav .os-tile:active,
html.app-nav table.tbl.tbl-cards tbody tr[data-row-href]:active { opacity: .6; }

/* Zustand: Kapseln einheitlich (Größe, Ton), Tags wie Kapseln */
html.app-nav .pill, html.app-nav .tag, html.app-nav .chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 0; line-height: 1.5; }
html.app-nav .tag:not([class*="tg-"]) { background: var(--ios-fill2); color: var(--text2); }

/* Schalter wie iOS (51×31, grüner Ein-Zustand) */
html.app-nav .switch { width: 51px; height: 31px; border: 0; background: rgba(120,120,128,.32); }
html.app-nav .switch::after { top: 2px; left: 2px; width: 27px; height: 27px; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 3px 1px rgba(0,0,0,.06); }
html.app-nav .switch[aria-checked="true"] { background: #34c759; }
html.app-nav .switch[aria-checked="true"]::after { transform: translateX(20px); }

/* Boxen: Lead-Abschnitte, Cockpit-Boxen, PLANKOS-Blöcke, Notiz-Eingabe = gruppierte Zellen */
html.app-nav .lsec, html.app-nav .cp-box, html.app-nav .os-block, html.app-nav .os-ov-card { border: 0; border-radius: 12px; background: var(--surface); }
html.app-nav .lsec { padding: 12px 16px 10px; }
html.app-nav .lsec-pre { font-size: 12px; letter-spacing: .06em; }
html.app-nav .lsec-head { border-bottom: 0; margin-bottom: 6px; padding-bottom: 4px; }
html.app-nav .lsec-head b { font-size: 17px; }
html.app-nav .sgrp-head { padding: 10px 0; font-size: 15px; }
html.app-nav .hbar { padding: 10px 0; }
html.app-nav .hbar-l { font-size: 15px; color: var(--text); width: 140px; }
html.app-nav .note-add { gap: 8px; }
/* Aktionsleiste unten (Anfrage: VK · Erledigt · Übernehmen · Spam) = iOS-Werkzeugleiste:
   Material mit Haarlinie statt Schatten, 24-pt-Symbole in Akzentfarbe, 10-pt-Beschriftung, Druck = Opazität.
   (Martin 08.09. 19:12: „die Navigation unten ist nicht im richtigen Stil — mach sie apple-like.") */
/* Farbe wie in der Pille auf Home: Symbol dunkel, Beschriftung grau — kein Rot-Teppich.
   Rot bleibt der Hauptaktion und dem Löschen vorbehalten (Martin 08.09.: „warum ROOOOT"). */
html.app-nav .mnav.mnav-tools:not(.mnav-top) .mnav-item {
  gap: 3px; padding: 7px 4px 5px; border-radius: 0; background: none !important;
  color: var(--text2); font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.1; }
html.app-nav .mnav.mnav-tools:not(.mnav-top) .mnav-item svg { width: 24px; height: 24px; stroke-width: 1.8; color: var(--text); }
/* Zerstörende Aktion (Spam/Löschen) — die einzige rote in der Leiste */
html.app-nav .mnav.mnav-dock .mnav-item[data-req-submit-form] svg,
html.app-nav .mnav.mnav-dock .mnav-item[data-req-submit-form] { color: var(--danger); }
html.app-nav .mnav.mnav-tools:not(.mnav-top) .mnav-item:active { opacity: .4; }
html.app-nav .mnav.mnav-tools:not(.mnav-top) .mnav-item[disabled] { opacity: .35; }
/* Nicht klickbare Anzeige („übernommen von …") bleibt grau — sie ist keine Aktion */
html.app-nav .mnav.mnav-tools:not(.mnav-top) span.mnav-item, html.app-nav .mnav.mnav-tools:not(.mnav-top) span.mnav-item svg { color: var(--text3); }

/* ═══ iOS-SKIN, Teil 3 — Blätter (Martin 07.09. abends: „für Interaktionen wie ‚Neuen Interessenten anlegen'
   eine Art, das smoother darzustellen"): aufklappbare Popover (<details>) werden in der App zu Blättern von
   unten — abgedunkelter Hintergrund, Griff, Aufwärts-Animation, Tipp auf den Hintergrund schließt (Bridge).
   Welche: .lead-new (Neue Verkaufschance), .mw-new (Neue Anfrage), .cu-cp-add (Neuer Ansprechpartner),
   .fu-edit (Termine ändern), .lead-menu (⋯ als Aktionsblatt). Die Bridge setzt dafür .app-sheet. ═══ */
html.app-nav details.app-sheet > summary { position: relative; z-index: 1; }
html.app-nav details.app-sheet[open]::before { content: ''; position: fixed; inset: 0; z-index: 310; background: rgba(0,0,0,.42); animation: appFade .25s ease; }
html.app-nav details.app-sheet[open] > summary + * {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 320;
  width: auto !important; min-width: 0 !important; max-width: none !important; max-height: 88vh; overflow-y: auto; margin: 0 !important;
  background: var(--surface); border: 0 !important; border-radius: 16px 16px 0 0 !important; box-shadow: 0 -12px 44px rgba(0,0,0,.35);
  padding: 14px 18px calc(20px + env(safe-area-inset-bottom)) !important; animation: appSheetUp .32s cubic-bezier(.2,.8,.2,1); }
html.app-nav details.app-sheet[open] > summary + *::before { content: ''; display: block; width: 36px; height: 5px; border-radius: 3px; background: var(--ios-fill); margin: 0 auto 14px; }
html.app-nav details.app-sheet[open] > .card .card-body { padding: 0; }
/* KEIN overflow:hidden auf .content bei offenem Blatt — das setzte die Scrollposition zurück und verschob den
   Inhalt hinter dem Blatt (Martins Screenshot 21:31). Das Blatt scrollt selbst und hält das Überziehen bei sich. */
html.app-nav details.app-sheet[open] > summary + * { overscroll-behavior: contain; }
html.app-nav details.app-sheet[open] .edit-grid { grid-template-columns: 1fr; }
html.app-nav details.app-sheet[open] .toolbar { position: sticky; bottom: 0; padding-top: 10px; background: var(--surface); margin-bottom: 0; }
/* ⋯-Menü als Aktionsblatt: Zeilen groß, zentriert, Haarlinien */
html.app-nav details.lead-menu.app-sheet[open] > .st-menu { padding-left: 0 !important; padding-right: 0 !important; }
html.app-nav details.lead-menu.app-sheet[open] .cm-item, html.app-nav details.lead-menu.app-sheet[open] button.cm-item {
  display: block; width: 100%; text-align: center; font-size: 17px; padding: 15px 18px; color: var(--accent); background: none; border: 0; border-top: 1px solid var(--ios-sep); font-family: inherit; }
html.app-nav details.lead-menu.app-sheet[open] .mi-sep { display: none; }
html.app-nav details.lead-menu.app-sheet[open] .ctx-label { display: block; text-align: center; font-size: 13px; color: var(--text2); padding: 6px 18px 10px; }
@keyframes appSheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes appFade { from { opacity: 0; } to { opacity: 1; } }
html.app-nav details.app-sheet[open] .btn-primary { width: 100%; justify-content: center; min-height: 48px; font-size: 17px; border-radius: 12px; margin-top: 6px; }
html.app-nav select.filter-chip { display: inline-block; width: auto; max-width: 100%; border-radius: 999px; }

/* ═══ iOS-SKIN, Teil 4 — Linientreue (Martin 07.09.: „wirklich alles designlinear, keine verschobenen Elemente,
   keine Platzlöcher"): Aktualisieren-Knöpfe verschwinden (Ziehen nach unten löst dieselbe Aktion aus — Bridge
   PlankApp._refresh), leere Aktionszeilen klappen zu (Bridge), Filterzeilen laufen waagrecht durch statt zu
   stapeln, der Stift der Termin-Zeile sitzt fest rechts. ═══ */
html.app-nav .app-refresh { display: none !important; }
html.app-nav .app-empty { display: none !important; }
html.app-nav .ph-actions, html.app-nav .vk-tools-right, html.app-nav .lc-tools-right, html.app-nav .vk-filter, html.app-nav .li-filterpanel:not(.is-collapsed) {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; margin-left: 0; max-width: 100%; }
html.app-nav .ph-actions::-webkit-scrollbar, html.app-nav .vk-tools-right::-webkit-scrollbar, html.app-nav .vk-filter::-webkit-scrollbar, html.app-nav .li-filterpanel::-webkit-scrollbar { display: none; }
html.app-nav .ph-actions > *, html.app-nav .vk-filter > *, html.app-nav .li-filterpanel > * { flex: 0 0 auto; }
html.app-nav .vk-filter { flex-wrap: nowrap !important; overflow: visible !important; }   /* Inline-Style sagt wrap; die Zeile scrollt, nicht das Formular */
html.app-nav .vk-tools-right > details.lead-new > summary { white-space: nowrap; }
html.app-nav .vk-tools { flex-direction: column; align-items: stretch; gap: 10px; }
html.app-nav .vk-tools > .seg { display: flex; }
html.app-nav .vk-tools > .seg > * { flex: 1; justify-content: center; }
html.app-nav .page-head-row { flex-direction: column; align-items: stretch; gap: 8px; }
html.app-nav .page-head:not(:has(.page-sub, .ph-actions:not(.app-empty), .mstat-row)) { margin: 0; }
html.app-nav .ls-facts { position: relative; padding-right: 44px; }
html.app-nav .ls-facts .fu-edit { position: absolute; right: 0; top: 0; padding: 0; }
html.app-nav .ls-facts .fu-edit > summary { padding: 0; }
/* Hauptaktion, die die native Leiste übernommen hat: Popover-Griff und Block-Knöpfe verschwinden aus der Seite */
html.app-nav details.app-cta-native > summary { display: none !important; }
html.app-nav a.app-cta-native, html.app-nav button.app-cta-native { display: none !important; }

/* ═══ iOS-SKIN, Teil 5 — Rundungen + Formulare (Martin 07.09.: „Boxen so rechteckig, bisschen abgerundet — arg;
   die Anordnung der Eingabefelder sieht katastrophal aus — mach das Apple-like"):
   · Flächen mit 16er Radius (kontinuierlich), Blätter 20, Knöpfe/Felder 12, Bilder 12
   · Formulare = EINE Gruppe je Karte: jede Eingabe eine Zeile, Bezeichnung links (15, grau), Wert rechts (17),
     Haarlinie dazwischen — kein Grau-Kasten je Feld, keine Großbuchstaben-Labels. Mehrzeiliges (Textarea) und
     Optionen (Radio/Checkbox) als eigene Zeilen. ═══ */
html.app-nav .card, html.app-nav .lsec, html.app-nav .cp-box, html.app-nav .os-block, html.app-nav .os-ov-card,
html.app-nav .lead-card, html.app-nav .vk-card, html.app-nav .pipe-card, html.app-nav .os-tiles,
html.app-nav table.tbl.tbl-cards tbody { border-radius: 16px; }
html.app-nav .btn, html.app-nav .btn-sm, html.app-nav .kad-btn { border-radius: 12px; }
html.app-nav .toolbar .btn-primary, html.app-nav details.app-sheet[open] .btn-primary, html.app-nav .modal-actions .btn { border-radius: 14px; }
html.app-nav details.app-sheet[open] > summary + *, html.app-nav .modal-card { border-radius: 20px 20px 0 0 !important; }
html.app-nav .search, html.app-nav .li-search, html.app-nav .os-search-hero { border-radius: 12px; }
html.app-nav .asset-tile, html.app-nav .px-tile, html.app-nav .os-step-img img, html.app-nav .card img { border-radius: 12px; }
html.app-nav .card-body { padding: 0 0 4px; }
html.app-nav .card-head { padding: 14px 18px 6px; }
html.app-nav .card-body > :not(.edit-grid):not(form):not(.fld):not(.tbl) { margin-left: 18px; margin-right: 18px; }
html.app-nav .card-body > p, html.app-nav .card-body > div:not(.edit-grid):not(.fld) { font-size: 15px; }

/* Formular-Gruppe: Zeilen statt Kästen */
html.app-nav .edit-grid { display: flex; flex-direction: column; gap: 0; }
html.app-nav .fld { display: flex; flex-direction: row; align-items: center; gap: 12px; min-height: 48px; padding: 6px 18px; position: relative; }
html.app-nav .fld + .fld::before, html.app-nav .edit-grid > .fld:not(:first-child)::before { content: ''; position: absolute; left: 18px; right: 0; top: 0; height: 1px; background: var(--ios-sep); transform: scaleY(.5); }
html.app-nav .fld label { flex: 0 0 38%; max-width: 38%; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text2); padding: 0; line-height: 1.3; }
html.app-nav .fld input, html.app-nav .fld select, html.app-nav .fld textarea, html.app-nav .fld .inp {
  flex: 1 1 auto; min-width: 0; background: transparent !important; border: 0; border-radius: 0; padding: 10px 0; font-size: 17px; color: var(--text); }
html.app-nav .fld input:focus, html.app-nav .fld select:focus, html.app-nav .fld textarea:focus, html.app-nav .fld .inp:focus { box-shadow: none; outline: none; }
html.app-nav .fld input::placeholder, html.app-nav .fld textarea::placeholder { color: var(--text3); }
html.app-nav .fld select { -webkit-appearance: none; appearance: none; padding-right: 22px; text-align: right;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c7c7cc' stroke-width='2.4'%3E%3Cpath d='M8 9l4-4 4 4M8 15l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 0 center !important; background-size: 14px 14px !important; }
html.app-nav .fld:has(textarea) { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 10px; padding-bottom: 8px; }
html.app-nav .fld:has(textarea) label { flex: none; max-width: none; font-size: 13px; }
html.app-nav .fld textarea { min-height: 88px; padding: 4px 0; line-height: 1.4; }
html.app-nav .fld { flex-wrap: wrap; }
html.app-nav .fld > label { flex: 0 0 38%; }
html.app-nav .fld > input, html.app-nav .fld > select, html.app-nav .fld > .inp { flex: 1 1 50%; }
html.app-nav .fld > .tiny, html.app-nav .fld > small, html.app-nav .fld > .hint { flex: 1 1 100%; order: 9; font-size: 13px; color: var(--text3); padding: 0 0 6px; }
html.app-nav .fld:not(:has(textarea)) > .tiny, html.app-nav .fld:not(:has(textarea)) > small, html.app-nav .fld:not(:has(textarea)) > .hint { margin-left: calc(38% + 12px); }
html.app-nav .fld:has(> input[type="checkbox"]), html.app-nav .fld:has(> label > input[type="checkbox"]) { justify-content: space-between; }
html.app-nav .fld input[type="checkbox"], html.app-nav .fld input[type="radio"] { flex: none; width: 22px; height: 22px; accent-color: var(--accent); padding: 0; }
html.app-nav .fld input[type="date"], html.app-nav .fld input[type="number"] { text-align: right; }
/* Optionen-Zeilen (Radios nebeneinander in einem Flex-Div) → eine Zeile je Option */
html.app-nav .card-body > div[style*="flex-wrap"]:has(> label > input[type="radio"]) { display: flex; flex-direction: column; gap: 0 !important; margin: 0 !important; }
html.app-nav .card-body > div:has(> label > input[type="radio"]) > label { display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; padding: 12px 18px; font-size: 17px; font-weight: 400; position: relative; margin: 0; }
html.app-nav .card-body > div:has(> label > input[type="radio"]) > label + label::before { content: ''; position: absolute; left: 18px; right: 0; top: 0; height: 1px; background: var(--ios-sep); transform: scaleY(.5); }
html.app-nav .card-body > div:has(> label > input[type="radio"]) input[type="radio"] { width: 22px; height: 22px; accent-color: var(--accent); }
html.app-nav .card-body > .tiny { padding: 8px 0 12px; }
/* Werkzeugleiste eines Formulars: Abbrechen links (Text), Speichern rechts vollbreit */
html.app-nav form .toolbar { margin: 16px 0 0; }
html.app-nav form .toolbar .filter-chip { background: transparent; color: var(--accent); padding-left: 4px; }

/* ═══ iOS-SKIN, Teil 6 — Verkaufschance/Kunde-Kopf in der Linie (Martins Screenshot 07.09. 20:58: Zahlenleiste
   bricht aus der Karte, Stift/⋯ mit falschem „▸", Antwort-Knöpfe hängen links, Segment außerhalb der Karte) ═══ */
/* Faktenzeile bleibt IN der Kopfkarte: 2×2 + Stift rechts, keine Voll-Bleed-Leiste */
html.app-nav .lead-pg .ls-facts, html.app-nav .cu-detail .cu-facts { display: grid !important; grid-template-columns: 1fr 1fr 36px !important; gap: 10px 0 !important;
  margin: 0 !important; padding: 12px 14px 14px 18px !important; overflow: visible !important; background: transparent; border-top: 1px solid var(--ios-sep); position: relative; }
html.app-nav .lead-pg .ls-facts .mstat, html.app-nav .cu-detail .cu-facts .mstat { padding: 0 12px 0 0 !important; border-left: 0 !important; min-width: 0; }
html.app-nav .lead-pg .ls-facts .mstat:nth-child(2n), html.app-nav .cu-detail .cu-facts .mstat:nth-child(2n) { padding-left: 14px !important; border-left: 1px solid var(--ios-sep) !important; }
html.app-nav .lead-pg .ls-facts .mstat-n, html.app-nav .cu-detail .cu-facts .mstat-n { font-size: 20px; }
html.app-nav .lead-pg .ls-facts .mstat-l, html.app-nav .cu-detail .cu-facts .mstat-l { font-size: 13px; }
html.app-nav .lead-pg .ls-facts .fu-edit, html.app-nav .cu-detail .cu-facts .cu-ib { position: static !important; grid-column: 3; grid-row: 1 / span 2; align-self: center; justify-self: end; padding: 0 !important; }
/* Zusammenklapp-Griffe, die nur ein Symbol sind (Stift, ⋯): kein „▸" davor */
html.app-nav details > summary.icon-btn::before, html.app-nav details > summary.ib::before, html.app-nav details > summary:has(> svg:only-child)::before { content: none !important; }
html.app-nav details > summary.icon-btn, html.app-nav details > summary.ib { padding: 0; color: var(--text2); }
/* Kopfkarte: Titel 20, Meta 15, Stufen-Kapsel + ⋯ in einer Zeile */
html.app-nav .lead-head .ls-top { padding: 16px 18px 12px; }
html.app-nav .lead-head h1 { font-size: 20px; }
html.app-nav .lead-head .head-meta { font-size: 15px; }
/* Segment-Umschalter innerhalb der Karte, Antwort-Knöpfe als gleich breites Paar, Notiz/Logs als Text */
html.app-nav .card > .ctabs, html.app-nav .card > .tabs { margin: 10px 12px 4px; }
html.app-nav .composer-actions { padding: 8px 14px 14px !important; gap: 10px !important; flex-direction: column; align-items: stretch !important; }
html.app-nav .composer-actions .btn { width: 100%; justify-content: center; min-height: 46px; font-size: 17px; white-space: nowrap; }
html.app-nav .composer-actions .tiny { flex: 1 1 100%; }
html.app-nav .note-add { padding: 12px 14px; border-bottom: 0; }
html.app-nav .logs-link { padding: 4px 14px 12px; text-align: right; }
html.app-nav .sys-link { font-size: 13px; color: var(--text3); background: none; border: 0; font-family: inherit; }
/* Kopfzeilen mit Filtern beginnen links (nicht rechtsbündig abgeschnitten); Werkzeug-Knöpfe „Übernehmen" als Text */
html.app-nav .page-head-row .ph-actions { justify-content: flex-start; width: auto; max-width: none; margin: 0 -16px; padding: 0 16px; }
html.app-nav .nf-claim, html.app-nav .cav-plus, html.app-nav .pv-add, html.app-nav .att-ghost { border: 0; border-radius: 999px; background: var(--ios-fill2); color: var(--accent); opacity: 1; font-size: 13px; font-weight: 600; padding: 5px 10px; }
/* Detail-Aktionen (Angebot: PDF · Herunterladen · Duplizieren; Auftrag; Projekt): Primär vollbreit, Rest als Paar darunter */
html.app-nav .detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
html.app-nav .detail-actions .btn-primary { flex: 1 1 100%; justify-content: center; min-height: 46px; font-size: 17px; }
html.app-nav .detail-actions .btn:not(.btn-primary) { flex: 1 1 calc(50% - 4px); justify-content: center; min-height: 42px; }
/* Karten-Kopf-Aktionen („Bearbeiten") = Text in Akzentfarbe, nicht rot gefüllt */
html.app-nav .card-head .btn, html.app-nav .lsec-head .btn, html.app-nav .card-head .btn-primary { background: transparent; color: var(--accent); padding: 0 2px; font-size: 15px; font-weight: 500; min-height: 0; }
html.app-nav .card-head .btn svg { display: none; }
/* Avatar im Detailkopf: neutral wie in Kontakte, kein Farbverlauf */
html.app-nav .detail-av { background: var(--ios-fill2) !important; color: var(--text2); font-weight: 600; }
html.app-nav .fld input::placeholder, html.app-nav .fld textarea::placeholder { color: var(--text3); opacity: 1; }
/* Zahlenreihe: nie überlappen — jede Zahl eine feste Spalte im waagrechten Lauf */
html.app-nav .mstat-row { display: flex !important; flex-wrap: nowrap !important; gap: 0; }
html.app-nav .mstat-row .mstat { flex: 0 0 auto; min-width: 0; padding-right: 22px; }
html.app-nav .mstat-row .mstat + .mstat { padding-left: 22px; }
html.app-nav .mstat-row .mstat-l { white-space: nowrap; }
/* Aufgaben-Fenster (Ops/Marketing, .task-ov): unter der nativen Titelleiste, randlos, ohne Abdunkelung */
html.app-nav .task-ov { top: env(safe-area-inset-top); padding: 0; background: var(--bg); align-items: stretch; }
html.app-nav .task-modal { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
html.app-nav .tm-head { padding: 10px 16px; }
html.app-nav .tm-main { padding: 16px 18px; }
html.app-nav .stat .stat-v { order: 1; } html.app-nav .stat .stat-l { order: 2; }   /* Zahl über Bezeichnung — wie .kpi/.mstat */
/* Einstellungs-Zeilen (Tags/Status in Ops- und Marketing-Einstellungen): eine Zeile — Punkt · Name · Farbe · Speichern · Löschen */
html.app-nav .oset-row { flex-wrap: wrap; gap: 8px; padding: 8px 0; }
html.app-nav .oset-row .inp[type="text"], html.app-nav .oset-row .oset-name { flex: 1 1 160px; min-width: 160px; max-width: none; padding: 9px 12px; font-size: 15px; }
html.app-nav .oset-row select.inp, html.app-nav .oset-row .oset-color { flex: 0 0 auto; width: 96px; padding: 9px 26px 9px 10px; font-size: 13px; }
html.app-nav .oset-row .tiny { display: none; }
html.app-nav .oset-row .btn { flex: 0 0 auto; padding: 8px 12px; font-size: 13px; }
html.app-nav .oset-row .icon-btn { flex: 0 0 auto; width: 34px; height: 34px; }
/* Was das Mobil-CSS versteckt, bleibt versteckt (der Skin setzt display:flex auf Zahlenreihen) */
html.app-nav .pg-ops-home .oh-kpi, html.app-nav .hide-sm { display: none !important; }
/* Ops-Start in der App: Bereiche + Überfällig als Gruppen sichtbar (das Mobil-CSS versteckt sie — in der App wäre die Wurzel sonst leer) */
html.app-nav .pg-ops-home .oh-areas, html.app-nav .pg-ops-home .oh-overdue { display: block !important; }
html.app-nav .pg-ops-home .oh-areas .hbar { padding: 12px 0; font-size: 17px; }
html.app-nav .pg-ops-home .oh-areas .hbar + .hbar { border-top: 1px solid var(--ios-sep); }
/* Seiten OHNE Schale (Druck-/Tourenlisten, View::bare): Inhalt unter der nativen Titelleiste beginnen */
html.app-nav body:not(:has(.app)) { padding: calc(env(safe-area-inset-top) + 10px) 16px 24px; }
/* Zeilen, die schon einen eigenen Pfeil tragen (Lieferanten .mw-chev, .row-caret): nur EIN Chevron */
html.app-nav tr[data-row-href] .mw-chev, html.app-nav tr[data-row-href] .trow-caret, html.app-nav tr[data-row-href] .chev { display: none !important; }
/* PLANKOS-Fenster (ISO-Tafel → Seite) als Blatt von unten */
html.app-nav .os-ov { align-items: flex-end !important; padding: 0 !important; }
html.app-nav .os-ov-card { width: 100% !important; max-width: 100% !important; max-height: 88vh; border-radius: 20px 20px 0 0 !important; border: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); animation: appSheetUp .32s cubic-bezier(.2,.8,.2,1); }
html.app-nav .os-search { background: var(--ios-fill2); border: 0; border-radius: 12px; }
html.app-nav .app-dup { display: none !important; }

/* Termine-Blatt (.fu-pop): je Datum eine Gruppe — Bezeichnung, Datum, Grund, Setzen vollbreit */
html.app-nav details.fu-edit.app-sheet[open] .fu-row { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 6px 0 14px; }
html.app-nav details.fu-edit.app-sheet[open] .fu-row + .fu-row { border-top: 1px solid var(--ios-sep); padding-top: 14px; }
html.app-nav details.fu-edit.app-sheet[open] .fu-row .lab { width: auto !important; max-width: none !important; flex: none; white-space: nowrap; font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: .04em; padding-left: 4px; }
html.app-nav details.fu-edit.app-sheet[open] .fu-row .inp { width: 100%; min-height: 46px; font-size: 17px; padding: 10px 14px; background: var(--ios-fill2); border: 0; border-radius: 12px; text-align: left; }
html.app-nav details.fu-edit.app-sheet[open] .fu-row .btn { width: 100%; min-height: 46px; justify-content: center; font-size: 17px; background: var(--accent); color: #fff; border-radius: 12px; }
/* Blätter allgemein: Knöpfe am Ende vollbreit, Felder als Gruppe */
html.app-nav details.app-sheet[open] .inp { font-size: 17px; }

/* ═══ iOS-SKIN, Teil 7 — Geometrie + Tastatur (Bughunt 07.09. nachts, 6 Linsen × 2 Skeptiker):
   Der WebView füllt jetzt IMMER den ganzen Bildschirm (auch unten, auch auf Wurzel-Seiten) — env(safe-area-inset-bottom)
   ist damit überall echt, Blätter/Fenster/Werkzeugleisten enden an der Kante. Wurzel-Seiten (html.app-root) halten
   unten Platz für die schwebende Pille (78 pt); öffnet sich ein Blatt, blendet die App die Pille aus (Bridge „sheet"). ═══ */
/* Wurzel-Seiten: Pille unten — Inhalt und feste Elemente rücken darüber */
html.app-nav.app-root .content { padding-bottom: calc(102px + env(safe-area-inset-bottom)) !important; }
html.app-nav.app-root .jobdock, html.app-nav.app-root .toast { bottom: calc(92px + env(safe-area-inset-bottom)) !important; }
html.app-nav.app-root .mnav-fab, html.app-nav.app-root .mnav.mnav-top .mnav-fab { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
html.app-nav.app-root .mnav.mnav-tools:not(.mnav-top) { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
/* Vollbild-Fenster (Mail, Aufgabe, Composer) beginnen UNTER der nativen Titelleiste — Kopf mit ✕ bleibt erreichbar */
@media (max-width: 720px) {
  html.app-nav .modal, html.app-nav .modal:has(.modal-card.compose) { padding: env(safe-area-inset-top) 0 0; align-items: flex-end; }
  html.app-nav .modal-card.md, html.app-nav .modal-card.lg { height: calc(100dvh - env(safe-area-inset-top)); max-height: calc(100dvh - env(safe-area-inset-top)); padding: 0; }
  html.app-nav .modal-card.compose { height: calc(100dvh - env(safe-area-inset-top)); max-height: calc(100dvh - env(safe-area-inset-top)); padding: 0; border-radius: 20px 20px 0 0 !important; box-shadow: none; width: 100%; max-width: 100%; }
  html.app-nav .modal-card.md .modal-body, html.app-nav .modal-card.lg .modal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}
/* Job-Dock/Toast über dem Antworten-FAB (Segment-oben-Seiten): 18 + 52 + 14 Luft */
html.app-nav body:has(.mnav.mnav-top .mnav-fab) .jobdock, html.app-nav body:has(.mnav.mnav-top .mnav-fab) .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
/* Tastatur offen: der FAB weicht (sonst liegt er auf dem Senden-Knopf des Teamchats) */
html.app-nav body.mnav-typing .mnav.mnav-top .mnav-fab { display: none !important; }
/* Formulare direkt in der Karte: Innenabstand wie die übrigen Kinder, Feldzeilen laufen bis zur Kante */
html.app-nav .card-body > form { padding: 0 18px; }
html.app-nav .card-body > form > .edit-grid, html.app-nav .card-body > form > .fld, html.app-nav .card-body > form > table.tbl { margin-left: -18px; margin-right: -18px; }
html.app-nav .card-body > form > .fld { width: auto; }
/* Doppelte Segmentsteuerung (E-Mail-Verlauf | Teamchat) verschwindet, wenn die Kapsel oben schaltet */
html.app-nav [data-mtabs].mtabs-on .ctabs { display: none; }
/* Faktenzeile ohne Stift (Nur-Lese-Rolle): zwei Spalten, keine leere dritte */
html.app-nav .lead-pg .ls-facts:not(:has(.fu-edit)), html.app-nav .cu-detail .cu-facts:not(:has(.cu-ib)) { grid-template-columns: 1fr 1fr !important; padding-right: 18px !important; }
/* Auswahl-Leiste der Bildablage an der Kante, Inhalt darüber frei */
html.app-nav .px-bulk { bottom: calc(18px + env(safe-area-inset-bottom)); }
html.app-nav body.has-bulk .content { padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important; }
/* Angebot: „Duplizieren" steckt in einem Formular — gleiche Paar-Breite wie die Nachbarn */
html.app-nav .detail-actions > form { flex: 1 1 calc(50% - 4px); display: flex; margin: 0; }
html.app-nav .detail-actions > form .btn { width: 100%; justify-content: center; min-height: 42px; }
/* Composer unter der Titelleiste: der Kopf braucht keinen zweiten Notch-Ausgleich mehr (das Fenster beginnt schon darunter) */
html.app-nav .modal-card.compose .modal-head { padding-top: 13px; }
/* Angebots-Anhang („+ ANG-2026-348.pdf · 87 KB") als EINE Zeile: Name bricht, Größe nicht */
html.app-nav .att-ghost { display: flex; flex-wrap: wrap; width: 100%; max-width: 100%; border-radius: 12px; padding: 9px 12px; font-weight: 500; color: var(--text); white-space: nowrap; }
html.app-nav .att-ghost b { flex: 0 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
html.app-nav .att-ghost .tiny { flex: 1 1 100%; white-space: normal; padding-left: 26px; color: var(--text3); font-weight: 400; }
html.app-nav .att-ghost .plus { border-color: var(--accent); color: var(--accent); }
/* Blatt mit Formular: der Absende-Knopf ist die Hauptaktion — vollbreit, gefüllt (Neuer Ansprechpartner) */
html.app-nav details.app-sheet[open] .edit-grid > div:has(> .btn[type="submit"]) { display: block; }
html.app-nav details.app-sheet[open] .edit-grid .btn[type="submit"] { display: flex; width: 100%; justify-content: center; min-height: 48px; font-size: 17px; border-radius: 12px; background: var(--accent); color: #fff; margin-top: 6px; }
/* Geschobene Seiten ohne Leiste: das Seitenende bleibt über dem Home-Indikator (WebView reicht bis zur Kante) */
html.app-nav:not(.app-root) body:not(:has(.mnav:not([hidden]))) .content { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
/* Content-Produktion: die Wege als Gruppenzeilen statt Kachel-in-Kasten (Tipp klappt Titel + Start auf); „Definition folgt"-Kacheln bleiben weg */
html.app-nav .pipe-frame { padding: 0; border: 0; border-radius: 16px; background: var(--surface); overflow: hidden; }
html.app-nav .pipe-grid { gap: 0; }
html.app-nav .pipe-card { flex: 1 1 100%; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 14px 18px; gap: 12px; }
html.app-nav .pipe-card + .pipe-card { border-top: 1px solid var(--ios-sep) !important; }
html.app-nav .pipe-card.is-soon { display: none; }
html.app-nav .pipe-word { font-size: 17px; font-weight: 500; letter-spacing: 0; }
html.app-nav .pipe-card[data-pipe-open]:not(.is-open) .pipe-name::after { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--text3); border-bottom: 2px solid var(--text3); transform: rotate(45deg); position: absolute; right: 22px; top: 18px; }
html.app-nav .pipe-card { position: relative; }
html.app-nav .pipe-start .inp { font-size: 17px; padding: 12px 14px; border-radius: 12px; background: var(--ios-fill2); border: 0; }
html.app-nav .pipe-start .btn { align-self: stretch; justify-content: center; min-height: 46px; font-size: 17px; border-radius: 12px; }
html.app-nav .pipe-leer { margin: 14px 4px 0; font-size: 15px; color: var(--text3); }
/* Toast/Job-Dock auf geschobenen Seiten ohne Leiste: über dem Home-Indikator, nicht darauf */
html.app-nav .toast, html.app-nav .jobdock { bottom: calc(14px + env(safe-area-inset-bottom)); }
/* Seiten mit Werkzeugleiste unten (Anfrage-Detail): Seitenende über Leiste + Antworten-FAB */
html.app-nav body:has(.mnav.mnav-tools:not(.mnav-top):not([hidden])) .content { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
html.app-nav body:has(.mnav.mnav-tools:not(.mnav-top):not([hidden]) .mnav-fab) .content { padding-bottom: calc(164px + env(safe-area-inset-bottom)); }
/* Post-Builder: die Veröffentlichen-Leiste ist das Seitenende und bringt ihr Polster selbst mit (nur geschoben; auf Wurzeln bleibt der Pillen-Platz) */
html.app-nav:not(.app-root) .content:has(.pub-bar.mtab-on) { padding-bottom: 0; }

/* ═══ iOS-SKIN, Teil 8 — Verlauf/Composer der Verkaufschance (Martins Screenshot 08.09. 18:24: „der Antworten-Knopf
   schwebt doppelt, es geht Breite verloren, die zwei Knöpfe sind riesig"): die Mail füllt die Karte, die Knöpfe
   stehen als Paar in einer Zeile, der schwebende Knopf verschwindet, sobald seine Aktion sichtbar ist. ═══ */
/* Kurzform der Beschriftung nur in der App (Web bleibt ausgeschrieben; die Basisregel steht oben bei den Knöpfen) */
html.app-nav .lbl-short { display: inline; }
html.app-nav .lbl-long { display: none; }
/* Drei verschachtelte Innenabstände (content · conv-panel · thread) → einer. Die Nachricht bekommt die volle Breite. */
html.app-nav .conv-panel { padding: 0; }
html.app-nav .thread { padding: 10px 0; gap: 10px; }
html.app-nav .ix-msg, html.app-nav .ix-msg-collapsed { border: 0 !important; background: var(--ios-fill2); }
/* Luft kommt aus dem Innenabstand der Zeile, nicht aus einer Lücke dazwischen (iOS-Zellen-Muster):
   die Zeilen kleben nicht, bleiben aber eine durchgehende Liste. */
html.app-nav .ix-msg-head, html.app-nav .ix-msg-collapsed > summary { padding: 13px 16px; row-gap: 4px; background: transparent; }
html.app-nav .ix-msg { background: var(--surface2); }
html.app-nav .ix-msg .mail-inline { margin-bottom: 0; }
html.app-nav .ix-msg > .ix-sent-body, html.app-nav .ix-msg > .ix-body { padding-bottom: 16px; }
html.app-nav .thread > .note-ev, html.app-nav .thread > .ix-note, html.app-nav .ix-thread > .ix-note { padding: 14px 16px; }
html.app-nav .ix-msg .mail-inline, html.app-nav .mail-inline { border-radius: 0 !important; }
html.app-nav .ix-msg .ix-sent-body, html.app-nav .ix-body, html.app-nav .thread-empty { padding-left: 16px; padding-right: 16px; }
html.app-nav .note-add, html.app-nav .composer { padding-left: 16px; padding-right: 16px; }
/* Kein Messenger-Versatz in der App: die Nachrichten sind Listenzeilen über die volle Breite,
   ausgehende bleiben getönt (Martin: „nicht stimmig, viel Platz verloren in der Breite"). */
html.app-nav .ix-thread { gap: 0; }
html.app-nav .ix-thread .ix-in, html.app-nav .ix-thread .ix-out { width: 100% !important; align-self: stretch !important; }
/* Getrennte Blöcke über die VOLLE Breite: 10 px Luft dazwischen, leichte Rundung, keine Trennlinie
   (Martin 08.09.: „einen Mindestabstand brauchts schon — in der Breite egal, aber sie kleben aufeinander"). */
html.app-nav .thread > *, html.app-nav .ix-thread > * { border-radius: 12px !important; overflow: hidden; }
html.app-nav .ix-thread { gap: 10px; }
html.app-nav details.ix-msg-collapsed > summary { background: transparent; }
html.app-nav details.ix-msg-collapsed.ix-out > summary, html.app-nav .ix-out .ix-msg-head { background: rgba(var(--accent-rgb), .07); }
/* v3.81.8: eine ausgehende Systemmail (Lesebestätigung von uns) bekommt keinen Akzent-Ton — gleiche Spezifität, steht dahinter. */
html.app-nav details.ix-msg-collapsed.ix-sys > summary { background: transparent; }
html.app-nav .ix-msg > .mail-frame, html.app-nav .ix-msg > .ix-sent-body, html.app-nav .ix-msg > div:not(.ix-msg-head) { border: 0 !important; }
/* Antwort-Knöpfe: ein Paar in EINER Zeile, iOS-Maß (44 pt), nicht zwei Vollbreiten-Blöcke */
html.app-nav .composer-actions { flex-direction: row !important; flex-wrap: nowrap !important; gap: 8px !important; padding: 10px 0 14px !important; }
html.app-nav .composer-actions .btn { flex: 1 1 0; width: auto; min-height: 44px; font-size: 15px; font-weight: 600; white-space: nowrap; padding: 0 10px; }
html.app-nav .composer-actions .btn svg { width: 15px; height: 15px; }
html.app-nav .composer-actions .tiny { flex: 1 1 100%; padding-top: 6px; }
/* Der schwebende Knopf blendet sich aus, sobald seine eigene Aktion auf dem Schirm steht (Bridge setzt die Klasse) */
html.app-nav .mnav-fab.app-fab-idle { opacity: 0; transform: scale(.85); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
html.app-nav .mnav-fab { transition: opacity .18s ease, transform .18s ease; }

/* ═══ iOS-SKIN, Teil 9 — EIN Filter-Muster + Glas-Leisten (Martin 08.09. 19:16/19:20: „diese Filter wie im
   Teamchat global überall ausrollen, mit Scroll links/rechts" · „die Navigation soll so hovery sein wie iOS 26"):
   · Filter/Tabs/Segmente sind ÜBERALL dieselbe Zeile runder Kapseln, die waagrecht scrollt (kein Wannen-Segment mehr)
   · schwebende Leisten (Werkzeugleiste unten, Segment oben) bekommen Glas: starker Blur, heller Rand, weicher Schatten ═══ */

/* ── 1) Filterzeile: runde Kapseln, waagrecht scrollend, randlos bis zur Kante ── */
html.app-nav .tabs, html.app-nav .ctabs, html.app-nav .cp-seg, html.app-nav .mode-switch,
html.app-nav .hub-chips, html.app-nav .seg {
  display: flex; flex-wrap: nowrap; gap: 8px; align-items: center;
  background: transparent; border: 0; border-radius: 0; padding: 2px 16px 2px; margin: 0 -16px 12px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html.app-nav .tabs::-webkit-scrollbar, html.app-nav .ctabs::-webkit-scrollbar, html.app-nav .cp-seg::-webkit-scrollbar,
html.app-nav .mode-switch::-webkit-scrollbar, html.app-nav .hub-chips::-webkit-scrollbar, html.app-nav .seg::-webkit-scrollbar { display: none; }
html.app-nav .tab, html.app-nav .ctab, html.app-nav .hchip,
html.app-nav .cp-seg > *, html.app-nav .mode-switch > *, html.app-nav .seg > * {
  /* Passt alles nebeneinander, teilen sich die Kapseln die volle Breite; wird es zu viel, scrollt die Zeile
     (Martin 08.09.: „Filter-Knöpfe volle Breite, nicht wie bei Liste/Board, wo es rechts aufhört"). */
  flex: 1 1 auto; min-width: max-content; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--ios-fill2); color: var(--text2); font-size: 14px; font-weight: 600; line-height: 1;
  white-space: nowrap; box-shadow: none; }
html.app-nav .tab.active, html.app-nav .ctab.active, html.app-nav .hchip.active,
html.app-nav .cp-seg > .on, html.app-nav .cp-seg > .active, html.app-nav .mode-switch > .on,
html.app-nav .mode-switch > .active, html.app-nav .seg > .on, html.app-nav .seg > .active {
  background: var(--text); color: var(--bg); }
html.app-nav .cp-seg label:has(input:checked), html.app-nav .seg > *[aria-selected="true"],
html.app-nav .seg > label:has(input:checked), html.app-nav .mode-switch label:has(input:checked) {
  background: var(--text) !important; color: var(--bg) !important; box-shadow: none !important; }
html.app-nav .tab:active, html.app-nav .ctab:active, html.app-nav .hchip:active, html.app-nav .seg > *:active { opacity: .55; }
html.app-nav .tab svg, html.app-nav .ctab svg, html.app-nav .seg > * svg { width: 15px; height: 15px; flex: 0 0 15px; stroke-width: 1.8; }
/* Zähler im Chip (Posteingang „Offen 286") als eigene, ruhige Zahl */
html.app-nav .tab .cnt, html.app-nav .ctab .cnt, html.app-nav .tab .tab-n, html.app-nav .tab small,
html.app-nav .seg .seg-n, html.app-nav .seg .seg-btn.active .seg-n, html.app-nav .hchip .cnt {
  font-size: 12px; font-weight: 500; opacity: .65; color: inherit; }
/* Auch die Filterzeile der Kopfzeile folgt dem Muster (Auswahlfelder bleiben Kapseln) */
html.app-nav .ph-actions, html.app-nav .vk-filter, html.app-nav .li-filterpanel:not(.is-collapsed) { gap: 8px; }
html.app-nav .filter-chip, html.app-nav select.filter-chip { min-height: 34px; border-radius: 999px; font-size: 14px; font-weight: 600; }

/* ── 2) Werkzeugleiste unten = DIESELBE Sprache wie die Pille auf Home (Martin 08.09.: „sonst haben wir
   Designbrüche"): schwebende Kapsel mit Material + Schatten, daneben der runde Knopf für die Hauptaktion,
   genau wie Suche/Plus dort. Maße 1:1 aus FloatingBar.swift: Kapsel 56 pt, Knopf 56 pt, 10 pt Abstand,
   14 pt Rand, Schatten 0/6/14 bei 18 % Schwarz. ── */
html.app-nav .mnav.mnav-dock:not([hidden]) {
  display: flex; align-items: center; gap: 10px; background: none; border: 0; box-shadow: none;
  padding: 0 14px calc(6px + env(safe-area-inset-bottom)); }
html.app-nav .mnav.mnav-dock .mnav-bar {
  flex: 1 1 auto; min-width: 0; height: 56px; align-items: center; gap: 0; padding: 0 6px;
  border-radius: 999px; border: .5px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 6px 14px rgba(0,0,0,.18); }
html.app-nav body:not(.light) .mnav.mnav-dock .mnav-bar { background: color-mix(in srgb, #1c1c1e 70%, transparent); }
/* Alle Symbole in derselben Box, alle Beschriftungen auf EINER Linie (Martin 08.09.: „die Icons gleich groß
   mit System und Text in einer Linie") — unabhängig davon, wie viel Fläche der einzelne Pfad füllt. */
html.app-nav .mnav.mnav-dock .mnav-item {
  padding: 0 2px; gap: 0; justify-content: center; height: 100%; }
html.app-nav .mnav.mnav-dock .mnav-item svg {
  width: 22px; height: 22px; flex: 0 0 22px; display: block; margin: 0 0 4px; }
html.app-nav .mnav.mnav-dock .mnav-item > span {
  display: block; height: 12px; line-height: 12px; font-size: 10px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Hauptaktion: runder Knopf NEBEN der Kapsel — das Gegenstück zum Plus auf Home */
html.app-nav .mnav.mnav-dock .mnav-fab {
  position: static; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%;
  border: .5px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--surface) 66%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  color: var(--text); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
html.app-nav body:not(.light) .mnav.mnav-dock .mnav-fab { background: color-mix(in srgb, #1c1c1e 70%, transparent); }
html.app-nav .mnav.mnav-dock .mnav-fab svg { width: 22px; height: 22px; stroke-width: 1.8; }
html.app-nav .mnav.mnav-dock .mnav-fab.app-fab-idle { opacity: 1; transform: none; pointer-events: auto; }
/* Inhalt endet über der schwebenden Leiste (Kapselhöhe + Rand + Home-Indikator) */
html.app-nav body:has(.mnav.mnav-dock:not([hidden])) .content { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
html.app-nav body:has(.mnav.mnav-dock:not([hidden])) .jobdock,
html.app-nav body:has(.mnav.mnav-dock:not([hidden])) .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
/* Segment oben klebt unter der Titelleiste und bekommt denselben Glas-Grund statt einer harten Fläche */
html.app-nav .mnav.mnav-top {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); }
html.app-nav .mnav.mnav-top .mnav-bar {
  background: transparent; padding: 0; gap: 8px; overflow-x: auto; scrollbar-width: none; box-shadow: none; border: 0; }
html.app-nav .mnav.mnav-top .mnav-bar::-webkit-scrollbar { display: none; }
html.app-nav .mnav.mnav-top .mnav-item {
  flex: 0 0 auto; min-width: 0; min-height: 34px; padding: 0 14px; border-radius: 999px;
  background: var(--ios-fill2); color: var(--text2); font-size: 14px; font-weight: 600; box-shadow: none; }
html.app-nav .mnav.mnav-top .mnav-item.active, html.app-nav body:not(.light) .mnav.mnav-top .mnav-item.active {
  background: var(--text); color: var(--bg); box-shadow: none; }
html.app-nav .mnav.mnav-top .mnav-item svg { width: 15px; height: 15px; }

/* ═══ iOS-SKIN, Teil 10 — Fenster als Blatt von unten, mit Wischen zum Schließen (Martin 08.09.:
   „das E-Mail-Popup soll von unten reinschieben und ich muss runterwischen können, wie bei Apple Mail"):
   Vollbild-Fenster (Composer, Mail-Ansicht, Aufgabe, Stammdaten) fahren auf, tragen oben einen Griff und
   folgen dem Finger. app.js meldet das Ziehen über --sheet-y; ab einem Drittel Höhe schließt das Blatt. ═══ */
@media (max-width: 720px) {
  html.app-nav .modal-card.md, html.app-nav .modal-card.lg, html.app-nav .modal-card.compose {
    transform: translateY(var(--sheet-y, 0px));
    animation: appSheetUp .34s cubic-bezier(.2,.8,.2,1);
    border-radius: 20px 20px 0 0 !important; }
  html.app-nav .modal.is-dragging .modal-card { animation: none; transition: none; }
  html.app-nav .modal.is-closing .modal-card { animation: appSheetDown .26s cubic-bezier(.4,0,.8,.2) forwards; }
  html.app-nav .modal.is-closing { animation: appFadeOut .26s ease forwards; }
  /* Griff: das sichtbare Versprechen „du kannst mich wegwischen" */
  html.app-nav .modal-card.md::before, html.app-nav .modal-card.lg::before, html.app-nav .modal-card.compose::before {
    content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 36px; height: 5px; border-radius: 3px; background: var(--ios-fill); z-index: 5; }
  html.app-nav .modal-card.md, html.app-nav .modal-card.lg, html.app-nav .modal-card.compose { position: relative; }
  html.app-nav .modal-card.md .modal-head, html.app-nav .modal-card.lg .mail-modal-head,
  html.app-nav .modal-card.compose .modal-head { padding-top: 18px; }
}
@keyframes appSheetDown { from { transform: translateY(var(--sheet-y, 0px)); } to { transform: translateY(100%); } }
@keyframes appFadeOut { from { opacity: 1; } to { opacity: 0; } }

/* Antworten im Posteingang: kein Formular mitten auf der Seite, sondern ein Blatt von unten — dieselbe
   Mechanik wie beim Composer der Verkaufschance (Martin 08.09.: „von unten reinschieben, runterwischen können"). */
html.app-nav .app-sheet-scrim {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.42);
  animation: appFade .25s ease; }
html.app-nav .app-sheet-scrim.is-closing { animation: appFadeOut .26s ease forwards; }
html.app-nav body.sheet-open, html.app-nav body.sheet-open .content { overflow: visible; }
html.app-nav .ix-reply.app-sheet-live {
  position: fixed !important; left: 0; right: 0; bottom: 0; top: auto; z-index: 320;
  margin: 0 !important; padding: 20px 16px calc(16px + env(safe-area-inset-bottom)) !important;
  max-height: calc(100dvh - env(safe-area-inset-top) - 56px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 0 !important; border-top: 0 !important;
  border-radius: 20px 20px 0 0; box-shadow: 0 -12px 44px rgba(0,0,0,.35);
  transform: translateY(var(--sheet-y, 0px)); animation: appSheetUp .34s cubic-bezier(.2,.8,.2,1); }
html.app-nav .ix-reply.app-sheet-live.is-dragging { animation: none; }
html.app-nav .ix-reply.app-sheet-live.is-closing { animation: appSheetDown .26s cubic-bezier(.4,0,.8,.2) forwards; }
html.app-nav .ix-reply.app-sheet-live::before {
  content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: 3px; background: var(--ios-fill); }
/* Kopfband bleibt stehen, auch wenn die Tastatur offen ist — sonst weiß man nicht mehr, worin man tippt */
html.app-nav .ix-reply.app-sheet-live .ix-reply-h {
  position: sticky; top: 0; z-index: 3; margin: 2px 0 12px; padding: 6px 0 10px;
  background: var(--surface); display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text); }
html.app-nav .ix-reply.app-sheet-live .sheet-x {
  border: 0; background: var(--ios-fill2); color: var(--text2); width: 30px; height: 30px;
  border-radius: 50%; font-size: 17px; line-height: 1; font-family: inherit; cursor: pointer; }
html.app-nav .ix-reply.app-sheet-live .toolbar { position: sticky; bottom: 0; background: var(--surface); padding-top: 10px; margin-bottom: 0; }

/* ═══ iOS-SKIN, Teil 11 — Verfassen wie Apple Mail (Martins Screenshot 08.09. 20:24): Felder als Zeilen mit
   Haarlinie statt grauer Kästen, „An:" als Vorsatz, Schreibfläche randlos, Schließen links und Senden rechts
   oben im Blattkopf. Gilt für den Antwort-Bereich im Posteingang UND den Composer der Verkaufschance. ═══ */
html.app-nav .ix-reply.app-sheet-live .comp-row,
html.app-nav .modal-card.compose .comp-row {
  gap: 8px; margin: 0; padding: 12px 0; border-bottom: 1px solid var(--ios-sep); align-items: baseline; }
html.app-nav .ix-reply.app-sheet-live .comp-row label,
html.app-nav .modal-card.compose .comp-row label {
  width: auto; flex: none; font-size: 17px; color: var(--text2); }
html.app-nav .ix-reply.app-sheet-live .comp-row label::after,
html.app-nav .modal-card.compose .comp-row label::after { content: ':'; }
html.app-nav .ix-reply.app-sheet-live .comp-row .inp,
html.app-nav .modal-card.compose .comp-row .inp {
  background: transparent !important; border: 0 !important; border-radius: 0; padding: 0; font-size: 17px; min-height: 0; }
html.app-nav .ix-reply.app-sheet-live textarea,
html.app-nav .modal-card.compose textarea {
  background: transparent !important; border: 0 !important; border-radius: 0; padding: 14px 0 0; font-size: 17px; min-height: 220px; }
html.app-nav .ix-reply.app-sheet-live textarea:focus, html.app-nav .modal-card.compose textarea:focus { box-shadow: none; outline: none; }
/* Blattkopf: großer Titel, links Schließen, rechts Senden — der Knopf unten entfällt */
html.app-nav .ix-reply.app-sheet-live .ix-reply-h {
  font-size: 26px; font-weight: 700; padding: 10px 0 14px; }
html.app-nav .ix-reply.app-sheet-live .sheet-head {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0 2px; background: var(--surface); }
html.app-nav .ix-reply.app-sheet-live .sheet-head button {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--ios-fill2);
  color: var(--text); font-size: 17px; line-height: 1; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; }
html.app-nav .ix-reply.app-sheet-live .sheet-head button.send { background: var(--accent); color: #fff; }
html.app-nav .ix-reply.app-sheet-live .sheet-head button[disabled] { opacity: .4; }
/* Senden sitzt oben rechts — die Knopfzeile am Formularende entfällt */
html.app-nav .ix-reply.app-sheet-live .toolbar,
html.app-nav .ix-reply.app-sheet-live .comp-send { display: none !important; }
html.app-nav .ix-reply.app-sheet-live .sheet-x { display: none; }
/* Das Blatt beginnt unter der nativen Titelleiste, nie darunter hindurch */
html.app-nav .ix-reply.app-sheet-live { padding-top: 8px !important; }

/* Entwurf andocken statt schließen (Martin 08.09.: „kann man es auch während man schreibt zuwischen, dass es
   unten andockt, und nur in der VK was lesen?") — genau wie in Apple Mail: das Blatt wird zur schmalen Leiste
   am unteren Rand, der Text bleibt erhalten, ein Tipp holt es zurück. */
html.app-nav .ix-reply.app-sheet-live.is-docked {
  max-height: none; height: auto; overflow: visible; padding: 0 !important;
  border-radius: 16px 16px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.22);
  animation: appDock .28s cubic-bezier(.2,.8,.2,1); }
html.app-nav .ix-reply.app-sheet-live.is-docked > *:not(.sheet-dock) { display: none !important; }
html.app-nav .sheet-dock {
  display: none; align-items: center; gap: 10px; width: 100%;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--text); }
html.app-nav .ix-reply.app-sheet-live.is-docked .sheet-dock { display: flex; }
html.app-nav .sheet-dock .dock-sub { font-weight: 400; color: var(--text2); font-size: 13px; }
html.app-nav .sheet-dock .dock-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 5px; border-radius: 3px; background: var(--ios-fill); }
html.app-nav .sheet-dock .dock-x {
  margin-left: auto; width: 30px; height: 30px; border-radius: 50%; border: 0;
  background: var(--ios-fill2); color: var(--text2); font-size: 15px; line-height: 1; font-family: inherit; }
@keyframes appDock { from { transform: translateY(60%); } to { transform: translateY(0); } }

/* Auch der Composer der Verkaufschance dockt an, statt zu schließen — Entwurf bleibt, VK bleibt lesbar. */
@media (max-width: 720px) {
  html.app-nav .modal.is-docked { background: transparent; backdrop-filter: none; pointer-events: none; align-items: flex-end; }
  html.app-nav .modal.is-docked .modal-card {
    pointer-events: auto; height: auto !important; max-height: none !important; min-height: 0;
    border-radius: 16px 16px 0 0 !important; box-shadow: 0 -8px 28px rgba(0,0,0,.22);
    animation: appDock .28s cubic-bezier(.2,.8,.2,1); transform: none !important; }
  html.app-nav .modal.is-docked .modal-card > *:not(.sheet-dock) { display: none !important; }
  html.app-nav .modal.is-docked .modal-card::before { display: none; }
  html.app-nav .modal.is-docked .sheet-dock { display: flex; }
}

/* ═══ iOS-SKIN, Teil 12 — Tippflächen (Martin 08.09.: „Buttons schön groß immer und nicht verbuggt"):
   Apple verlangt 44 pt. Das gilt für JEDEN Knopf in der App — auch für kleine Icon-Knöpfe, Karten-Kopf-Aktionen
   und Zeilen-Werkzeuge. Die sichtbare Fläche darf kleiner wirken, die Trefferfläche nicht. ═══ */
html.app-nav .btn, html.app-nav .btn-sm, html.app-nav button.filter-chip, html.app-nav .kad-btn,
html.app-nav .seg > *, html.app-nav .tab, html.app-nav .ctab, html.app-nav .hchip {
  min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
html.app-nav .icon-btn, html.app-nav .ib, html.app-nav .st-btn, html.app-nav .hub-plus, html.app-nav .sheet-x,
html.app-nav .dock-x, html.app-nav .sheet-head button,
/* Diese drei standen nur in der ::after-Zeile darunter, nicht hier — ihre 44-pt-Trefferfläche
   bezog sich damit auf einen weit entfernten Vorfahren und wurde zu einem kartengroßen
   unsichtbaren Rechteck, das Tipps auf Nachbarelemente schluckte (gefunden 09.09.2026 beim
   Bughunt „Mail klappt nicht auf"). */
html.app-nav .ix-kx-btn, html.app-nav .sys-link, html.app-nav .card-head .btn {
  position: relative; min-width: 34px; min-height: 34px; }
/* Unsichtbare Vergrößerung der Trefferfläche auf 44 pt — ohne das Layout zu verschieben */
html.app-nav .icon-btn::after, html.app-nav .ib::after, html.app-nav .st-btn::after,
html.app-nav .sheet-x::after, html.app-nav .dock-x::after, html.app-nav .sheet-head button::after,
html.app-nav .ix-kx-btn::after, html.app-nav .sys-link::after, html.app-nav .card-head .btn::after {
  content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px); }
/* Knöpfe im Fluss brechen nicht mehr um und quetschen den Text nicht (Martin: „nicht verbuggt") */
html.app-nav .btn, html.app-nav .btn-sm { white-space: nowrap; }
html.app-nav .toolbar { flex-wrap: wrap; gap: 10px; }
html.app-nav .toolbar > .btn { flex: 1 1 auto; }

/* ═══ iOS-SKIN, Teil 13 — Kanon-Nachzug (Durchgang 08.09. über alle vier Welten, 36 bestätigte Brüche):
   alles, was noch eigene Filterleisten, Wannen, Desktop-Menüs oder fremde Leisten-Sprachen hatte. ═══ */

/* — Kapselzeilen, die durch Inline-Styles oder Alt-Regeln brachen — */
html.app-nav .seg, html.app-nav .ph-actions, html.app-nav .oset-scope, html.app-nav .lc-tools .seg,
html.app-nav .ix-views, html.app-nav .az-row {
  flex: 1 1 auto !important; flex-wrap: nowrap !important; overflow-x: auto; margin-left: 0 !important; }
html.app-nav .oset-scope, html.app-nav .az-row { gap: 8px; scrollbar-width: none; }
html.app-nav .oset-scope::-webkit-scrollbar, html.app-nav .az-row::-webkit-scrollbar { display: none; }
/* Lexikon A–Z und ähnliche Buchstabenreihen: Kapseln statt Kästchen */
html.app-nav .az-row a, html.app-nav .az-row button, html.app-nav .os-az a {
  min-width: 34px; min-height: 34px; border-radius: 999px !important; border: 0 !important;
  background: var(--ios-fill2); color: var(--text2); font-size: 14px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; }
html.app-nav .az-row a.active, html.app-nav .os-az a.active { background: var(--text); color: var(--bg); }

/* — Filterzeilen, die noch Werkzeugleisten oder Eingabefelder waren — */
html.app-nav .filter-chip, html.app-nav select.filter-chip, html.app-nav .oset-scope .inp,
html.app-nav .os-pflege .inp[name], html.app-nav .term-filter .inp {
  min-height: 34px; border-radius: 999px; background: var(--ios-fill2); border: 0;
  font-size: 14px; font-weight: 600; padding: 0 14px; color: var(--text); }
html.app-nav select.filter-chip { padding-right: 30px; }

/* — Post-Builder und Freigabe: Rahmen-Segmente werden Kapseln — */
html.app-nav .pub-when, html.app-nav .pub-chan, html.app-nav .fr-views, html.app-nav .plan-seg {
  display: flex; gap: 8px; background: transparent; border: 0; padding: 0; flex-wrap: nowrap; overflow-x: auto; }
html.app-nav .pub-when > *, html.app-nav .pub-chan > *, html.app-nav .fr-views > *, html.app-nav .plan-seg > * {
  min-height: 34px; padding: 0 14px; border-radius: 999px !important; border: 0 !important;
  background: var(--ios-fill2); color: var(--text2); font-size: 14px; font-weight: 600; box-shadow: none !important; }
html.app-nav .pub-when > .on, html.app-nav .pub-when > .active, html.app-nav .pub-chan > .on,
html.app-nav .fr-views > .active, html.app-nav .plan-seg > .active {
  background: var(--text) !important; color: var(--bg) !important; }

/* — Zweite Leisten-Sprache unten (Bildablage-Auswahl) wird zur Glas-Kapsel wie das Dock — */
html.app-nav .px-bulk {
  border-radius: 999px !important; border: .5px solid color-mix(in srgb, var(--text) 6%, transparent) !important;
  background: color-mix(in srgb, var(--surface) 66%, transparent) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important; min-height: 56px; padding: 0 8px; }
html.app-nav .px-bulk .btn, html.app-nav .px-bulk button { min-height: 40px; }

/* — Desktop-Auswahlmenüs (Ops) werden Blätter von unten — */
html.app-nav .st-menu, html.app-nav .mv-menu, html.app-nav .bk-menu, html.app-nav .tm-menu {
  position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
  width: auto !important; min-width: 0 !important; max-width: none !important; max-height: 70dvh; overflow-y: auto;
  margin: 0 !important; border: 0 !important; border-radius: 20px 20px 0 0 !important;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom)) !important;
  box-shadow: 0 -12px 44px rgba(0,0,0,.35); z-index: 320; animation: appSheetUp .3s cubic-bezier(.2,.8,.2,1); }
html.app-nav .st-menu button, html.app-nav .mv-menu button, html.app-nav .bk-menu button,
html.app-nav .st-menu a, html.app-nav .mv-menu a, html.app-nav .bk-menu a {
  display: block; width: 100%; text-align: left; min-height: 48px; padding: 0 20px; font-size: 17px;
  border: 0; border-top: 1px solid var(--ios-sep); background: none; color: var(--text); }

/* — PLANKOS: Suchfeld und ISO-Tafel — */
html.app-nav .os-search-hero, html.app-nav .os-search, html.app-nav .os-search input {
  border: 0 !important; border-radius: 12px; background: var(--ios-fill2); box-shadow: none !important; font-size: 17px; }
html.app-nav .os-search input:focus { box-shadow: none !important; outline: none; }
html.app-nav .os-kbd, html.app-nav .os-search kbd { display: none; }
html.app-nav .os-board, html.app-nav .iso-board { display: flex !important; flex-direction: column; gap: 10px; }
html.app-nav .os-board-col, html.app-nav .iso-col { width: 100% !important; }
html.app-nav .os-board .os-cell, html.app-nav .iso-board .iso-cell {
  min-height: 48px; font-size: 15px !important; border-radius: 12px; border: 0; padding: 12px 14px; }

/* — Produktwissen: Kennzahlenleiste als Zeile statt gerahmter Kästchen — */
html.app-nav .term-bar { display: flex; gap: 0; background: var(--surface); border-radius: 16px; padding: 4px 0; border: 0; }
html.app-nav .term-bar > * { flex: 1; border: 0 !important; border-radius: 0 !important; padding: 10px 12px; }
html.app-nav .term-bar > * + * { border-left: 1px solid var(--ios-sep) !important; }

/* — Kleine Symbol-Knöpfe auf Ops-Seiten wie überall (rund, 34, gleiche Strichstärke) — */
html.app-nav .oa-tool, html.app-nav .lc-tool, html.app-nav .os-tool {
  width: 34px; height: 34px; border-radius: 999px !important; border: 0 !important; background: var(--ios-fill2); }
html.app-nav .oa-tool svg, html.app-nav .lc-tool svg, html.app-nav .os-tool svg { width: 17px; height: 17px; stroke-width: 1.8; }

/* — Werkzeugleiste weicht der Tastatur (wie die native Pille) — */
html.app-nav body.mnav-typing .mnav.mnav-dock { display: none !important; }
/* — Runder Hauptaktions-Knopf überall in Glas und 56 pt (nicht nur im Dock) — */
html.app-nav .mnav-fab {
  width: 56px; height: 56px; border: .5px solid color-mix(in srgb, var(--text) 6%, transparent);
  background: color-mix(in srgb, var(--surface) 66%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(30px) saturate(1.9); backdrop-filter: blur(30px) saturate(1.9);
  box-shadow: 0 6px 14px rgba(0,0,0,.18); }
html.app-nav body:not(.light) .mnav-fab { background: color-mix(in srgb, #1c1c1e 70%, transparent); }
html.app-nav .mnav-fab svg { width: 22px; height: 22px; stroke-width: 1.8; }

/* — Segment oben randlos (der 16-px-Rahmen brach die Kapselzeile) — */
html.app-nav .mnav.mnav-top { padding-left: 16px; padding-right: 16px; margin-left: -16px; margin-right: -16px; }

/* — Ops-Start: „Überfällig (Team)" bleibt sichtbar (Mobil-CSS versteckte sie) — */
html.app-nav .pg-ops-home .oh-overdue, html.app-nav .pg-ops-home .oh-cards { display: block !important; }

/* ═══ iOS-SKIN, Teil 14 — Eine Suchzeile, eine Filterzeile (Martins Screenshot 08.09. 20:45: „Findest du sowas
   designtechnisch korrekt? Die Filter, der Button, das Loch?"): In der App gibt es keinen „Filter"-Knopf mit
   Klappfach — die Suche steht oben über die volle Breite, darunter EINE Kapselzeile, die immer sichtbar ist
   und bei Bedarf scrollt. Kein zweiter Knopf, keine Löcher zwischen ungleich breiten Kapseln. ═══ */
html.app-nav .li-filterbtn { display: none !important; }
html.app-nav .li-filterbar { display: block; margin: 0 0 10px; }
html.app-nav .li-filterbar .search, html.app-nav .search, html.app-nav .li-search {
  display: flex; width: 100%; max-width: 100%; margin: 0 0 10px; min-height: 40px;
  border-radius: 12px; background: var(--ios-fill2); border: 0; padding: 0 12px; align-items: center; gap: 8px; }
html.app-nav .search input, html.app-nav .li-search input {
  flex: 1; min-width: 0; background: transparent; border: 0; font-size: 17px; padding: 10px 0; }
html.app-nav .search input:focus { box-shadow: none; outline: none; }
html.app-nav .search svg { width: 17px; height: 17px; color: var(--text3); flex: none; }
/* Das Klappfach ist in der App immer offen — die Kapseln SIND die Filter */
html.app-nav .li-filterpanel, html.app-nav .li-filterpanel.is-collapsed {
  display: flex !important; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px 12px; padding: 0 16px; }
html.app-nav .li-filterpanel::-webkit-scrollbar { display: none; }
/* Filterkapseln teilen sich die Breite, solange Platz ist — sonst scrollt die Zeile (keine Löcher) */
html.app-nav .ph-actions > .filter-chip, html.app-nav .li-filterpanel > .filter-chip,
html.app-nav .ph-actions > select.filter-chip, html.app-nav .li-filterpanel > select.filter-chip,
html.app-nav .ph-actions > form, html.app-nav .li-filterpanel > form {
  flex: 1 1 auto; min-width: max-content; }
html.app-nav .ph-actions > form > .filter-chip { width: 100%; }
/* Suche zuerst, Filter darunter — im Markup steht die Filterzeile im Seitenkopf */
html.app-nav .page-head-row { display: flex; flex-direction: column; }
html.app-nav .page-head-row > div:first-child { order: 0; }
html.app-nav .page-head-row .ph-actions { order: 2; }
html.app-nav .content > .search, html.app-nav .content > .li-search, html.app-nav .content > form.search { order: 1; }

/* Kunden-Filter: der Aufklapper „› Filter" versteckt in der App nur die Kapseln, die ohnehin hingehören —
   also immer offen zeigen und den Griff weglassen (eine Suchzeile, eine Filterzeile). */
/* Jeder Aufklapper, der nur Filter enthält, ist in der App offen — egal wo er im Markup sitzt. */
html.app-nav details:has(.filter-chip) { flex: 1 1 auto; min-width: 0; }
html.app-nav details:has(.filter-chip) > summary { display: none !important; }
html.app-nav details:has(.filter-chip) > *:not(summary) {
  display: flex !important; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none;
  margin: 0 -16px !important; padding: 0 16px; }
html.app-nav details:has(.filter-chip) > *:not(summary)::-webkit-scrollbar { display: none; }
html.app-nav details:has(.filter-chip) > *:not(summary) > .filter-chip { flex: 1 1 auto; min-width: max-content; }

/* ═══ iOS-SKIN, Teil 15 — Filterzeilen bündig (Martin 08.09.: „die Badges vom Filter volle Breite und nicht
   Padding nach innen am Rand"): Gemessen waren es 16 px Loch rechts, weil die Zeile eine feste Breite hatte
   und der negative Rand nicht griff. Jetzt füllt die Kapselzeile denselben Bereich wie die Karten darunter —
   linke und rechte Kante fluchten, kein Rest. ═══ */
html.app-nav .ph-actions, html.app-nav .li-filterpanel, html.app-nav .li-filterpanel.is-collapsed,
html.app-nav .tabs, html.app-nav .ctabs, html.app-nav .seg, html.app-nav .cp-seg,
html.app-nav .mode-switch, html.app-nav .hub-chips, html.app-nav .vk-filter, html.app-nav .oset-scope,
html.app-nav details:has(.filter-chip) > *:not(summary) {
  width: auto !important; align-self: stretch; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; }
/* Die Kapseln teilen sich diesen Bereich vollständig auf */
html.app-nav .ph-actions > *, html.app-nav .li-filterpanel > *, html.app-nav .tabs > *, html.app-nav .ctabs > *,
html.app-nav .seg > *, html.app-nav .cp-seg > *, html.app-nav .mode-switch > *, html.app-nav .hub-chips > *,
html.app-nav details:has(.filter-chip) > *:not(summary) > * {
  flex: 1 1 auto; min-width: max-content; }
/* Beim Segment oben bleibt der Rand, weil es unter der Titelleiste klebt */
html.app-nav .mnav.mnav-top { padding-left: 16px !important; padding-right: 16px !important;
  margin-left: -16px !important; margin-right: -16px !important; }

/* ═══ iOS-SKIN, Teil 16 — nichts läuft mehr in die Breite (Martin 08.09.: „Nachfass-Seite Bug,
   Seite geht in die Breite, check global"). GEMESSEN auf /nachfassen: Titelblock UND Kapselzeile
   waren 684 px breit in einem 459 px breiten Kopf. Beide sind Kinder eines Spalten-Flex, und ein
   Flex-Kind schrumpft NICHT unter seinen Inhalt, solange die Mindestbreite `auto` ist — die
   Kapselzeile scrollte deshalb nicht mehr in sich, sondern schob die ganze Seite nach rechts
   (ihr `max-width: 100%` war weiter oben durch `max-width: none` gekippt worden).
   Erst die Ursache: jede Spalte darf schrumpfen. Dann das Fangnetz: die Seite scrollt nie
   waagrecht — Kapselzeilen scrollen weiterhin in sich selbst. ═══ */
html.app-nav .page-head > *, html.app-nav .page-head-row > *, html.app-nav .content > *,
html.app-nav .vk-tools > *, html.app-nav .lc-tools > * { min-width: 0; max-width: 100%; }
html.app-nav .ph-actions, html.app-nav .li-filterpanel, html.app-nav .li-filterpanel.is-collapsed,
html.app-nav .vk-filter, html.app-nav .vk-tools-right, html.app-nav .lc-tools-right,
html.app-nav .tabs, html.app-nav .ctabs, html.app-nav .seg, html.app-nav .cp-seg,
html.app-nav .mode-switch, html.app-nav .hub-chips, html.app-nav .oset-scope, html.app-nav .az-row,
html.app-nav .ix-views, html.app-nav details:has(.filter-chip) > *:not(summary) {
  min-width: 0; max-width: 100%; }
/* Fangnetz — `clip` statt `hidden`, damit klebende Kopfzeilen (position: sticky) heil bleiben. */
html.app-nav body { overflow-x: clip; }

/* ═══ iOS-SKIN, Teil 17 — Ruhe in den Zeilen (Martin 08.09.: „die Kacheln pro VK linearer
   positionieren, so ist keine optische Linie") ═══

   Die Nachfass-Zeile war ein FLUSS: Pille, Betreuer und Wert liefen hintereinander weg, und
   weil die Pille je Zeile anders breit ist („1 T" vs. „5 T überfällig"), sprang der Betreuer
   in jeder Zeile woanders hin. Jetzt ein Raster mit ZWEI Kanten — links aller Text, rechts
   der Wert. Die rechte Spalte darf NUR so breit werden wie der Betrag: der Betreuer steht
   dort als Kürzel (der volle Name hätte dem Titel den Platz genommen und ihn umbrechen lassen).

       Bibliothek Lesesaal — Kastell Planung GmbH     € 656   ›
       ANG - 2026 - 245 · Elena Rossi
       ● 5 T überfällig · Schritt 1 · Anruf              AB          */
html.app-nav .nf-tbl tbody tr {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: 10px; row-gap: 4px; }
html.app-nav .nf-tbl tbody tr.grp { display: block !important; }
html.app-nav .nf-tbl tbody td.m-first { grid-column: 1; grid-row: 1; min-width: 0; }
html.app-nav .nf-tbl tbody td.m-last  { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
html.app-nav .nf-tbl tbody td:first-child { grid-column: 1; grid-row: 2; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
html.app-nav .nf-tbl tbody td.nf-zust { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
/* Zustand und Schritt lesen sich als EINE Zeile, nicht als zwei Blöcke übereinander */
html.app-nav .nf-tbl tbody td:first-child .nf-step { font-size: 13px; color: var(--text2); }
html.app-nav .nf-tbl tbody td:first-child .nf-step::before { content: '· '; color: var(--text3); }
/* Betreuer nur als Kürzel — der Name steht im Titel-Attribut und auf der VK selbst */
html.app-nav .nf-tbl td.nf-zust .nf-who { font-size: 0; gap: 0; }
html.app-nav .nf-tbl td.nf-zust .nf-who .lead-ini { font-size: 11px; }
/* Nummer und Kontakt unter dem Titel — eine Kante, kein Fettdruck */
html.app-nav .nf-tbl td.m-first { display: block; }
html.app-nav .nf-tbl td.m-first .cell-strong { display: block; }
html.app-nav .nf-tbl td.m-first .nf-no,
html.app-nav .nf-tbl td.m-first .cell-sub { display: inline; font-size: 13px; color: var(--text2);
  font-weight: 400; letter-spacing: 0; }
html.app-nav .nf-tbl td.m-first .cell-sub::before { content: ' · '; color: var(--text3); }
html.app-nav .nf-tbl td.m-first .nf-no + .cell-sub::before { content: ' · '; }

/* Termine-Blatt: EIN Primärknopf, der zweite ist sekundär (Martin: „was für ein Popup,
   Gestaltungsrichtlinie ZERO" — es standen zwei knallrote Knöpfe übereinander). */
html.app-nav details.fu-edit.app-sheet[open] .fu-row + .fu-row .btn {
  background: var(--ios-fill2); color: var(--text); }

/* Schritt-Zeile mit Aktion (.srow): der Knopf steht auf eigener Zeile und füllt sie —
   vorher quetschte er sich neben den Text und riss die Zeile auseinander. */
html.app-nav .srow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
html.app-nav .srow > .sbody { flex: 1 1 auto; min-width: 0; }
html.app-nav .srow > .btn { flex: 1 1 100%; justify-content: center; min-height: 44px; font-size: 16px; }

/* Dieselbe Linie für die VK-Liste: Titel links, Wert IMMER oben rechts. Vorher rutschte der
   Wert je nach Zeile hoch oder runter, weil nur manche VKs ein Nachfass-Datum tragen. */
html.app-nav .vk-tbl tbody tr {
  display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: 10px; row-gap: 4px; }
html.app-nav .vk-tbl tbody td.m-full { grid-column: 1; grid-row: 1; min-width: 0; }
html.app-nav .vk-tbl tbody td.m-last { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
html.app-nav .vk-tbl tbody td:nth-child(2) { grid-column: 1; grid-row: 2; min-width: 0; }
html.app-nav .vk-tbl tbody td:last-child { grid-column: 2; grid-row: 2; justify-self: end;
  align-self: center; font-size: 13px; white-space: nowrap; }
html.app-nav .vk-tbl tbody td.vk-empty { grid-column: 1 / -1; }

/* ═══ iOS-SKIN, Teil 18 — Filterzeile der VK-Übersicht (Martin 09.09.2026: „die Filter nach
   Phasen und Sortieren sind fast zu breit, und eine Doppelung der Form zu den Switchern
   darüber") ═══

   Ein <select> ist immer so breit wie seine LÄNGSTE Option — mit „Sortieren: Auftragswert"
   füllte es die halbe Zeile. Die Beschriftungen sind jetzt kurz (View), hier kommt der Deckel
   dazu. Und die Auswahlfelder tragen einen leiseren Ton als die Segmentsteuerung über ihnen:
   das Segment ist die SICHT (Liste | Board), die Felder sind Filter — gleiche Optik hieß
   zweimal dieselbe Bedeutung. */
html.app-nav .vk-filter select.filter-chip { max-width: 44vw; }
/* Leiser als das Segment darüber: flacher, kleinere Schrift, kein Fettdruck. Oben steht die
   SICHT (Liste | Board), hier stehen Filter — gleiche Höhe und gleiches Gewicht lasen sich
   wie zweimal dasselbe Bedienelement. */
html.app-nav .vk-filter select.filter-chip,
html.app-nav .vk-filter .vk-dir { min-height: 30px; font-size: 13.5px; }
html.app-nav .vk-filter { margin-top: 2px; }
/* background-COLOR, nicht die Kurzform: die Kurzform hätte das Chevron-Hintergrundbild
   der Auswahlfelder (Zeile ~6553) mit zurückgesetzt und die Felder blind gemacht. */
html.app-nav .vk-filter select.filter-chip,
html.app-nav .vk-filter .vk-dir { background-color: var(--ios-fill2); font-weight: 500; }
/* Richtungsknopf: quadratisch, nur der Pfeil — er kehrt um und zeigt zugleich den Zustand */
html.app-nav .vk-filter .vk-dir { flex: 0 0 auto; width: 30px; padding: 0; display: inline-flex;
  align-items: center; justify-content: center; border: 0; }
html.app-nav .vk-filter .vk-dir svg { width: 17px; height: 17px; }

/* ═══ iOS-SKIN, Teil 19 — zwei Nachwehen auf der VK-Seite (Martin 09.09.2026) ═══ */

/* (1) „Die Breite der Kartenseiten ist nicht volle Breite."
   GEMESSEN auf der VK: Viewport 402, die Leiste nur 370 — 32 px fehlten rechts, der letzte
   Reiter brach mitten im Wort ab. Ursache war mein eigener Breiten-Riegel aus Teil 16:
   `max-width: 100%` gilt dort für jedes Kind von .content, und für eine randlose Leiste sind
   100 % eben die 370 des Inhalts, nicht die 402 des Schirms. Leisten, die bewusst mit
   negativem Rand aus der Spalte ausbrechen, brauchen die Ausnahme — überlaufen können sie
   trotzdem nicht, ihre Kapselreihe scrollt in sich. */
html.app-nav .content > .mnav,
html.app-nav .content > .mnav.mnav-top,
html.app-nav .content > .mnav.mnav-tools { max-width: none; }

/* (2) „Oben in der Navigation versteckt sich der Antworten-Knopf."
   GEMESSEN: der runde Knopf stand `position: fixed` bei y = 56 — halb hinter der nativen
   Titelleiste. Die Regeln, die ihn nach unten setzen, greifen nur für `.mnav.mnav-top`;
   trägt die Leiste die andere Variante (`.mnav-tools`), blieb er ohne jede Ortsangabe an
   seiner Stelle im Fluss stehen. Jetzt sitzt er in JEDEM Fall unten rechts. */
/* Der eigentliche Grund, warum keine Ortsangabe half: die Leiste trägt Glas
   (`backdrop-filter: blur(24px)`), und ein Element mit Hintergrundfilter wird zum Bezugsrahmen
   für `position: fixed`. Der Knopf maß seine 18 px also nicht vom Bildschirmrand, sondern vom
   unteren Rand einer 48 px hohen Leiste — und landete DARÜBER, halb hinter der Titelleiste.
   Eine Leiste mit freistehendem Knopf bekommt deshalb kein Glas, sondern eine deckende Fläche.
   Sie klebt ohnehin oben; durchscheinender Inhalt war dort schon vorher unerwünscht. */
/* NACHTRAG 09.09. abends — der Riegel oben war zu weit gefasst und hat auf der Anfrage-Seite
   den umgekehrten Fehler gemacht (Martin: „dieser Antworten-Knopf, der fehl am Platz ist").
   GEMESSEN dort: Leiste y 778–834, Knopf y 766–822 — er lag AUF dem letzten Eintrag „Spam".
   Grund: es gibt zwei Bauformen. Wandert die Leiste als Abschnitts-Segment nach OBEN
   (`.mnav-top`), schwebt der Knopf allein unten rechts — nur DA braucht er `position: fixed`
   und nur da stört das Glas. Bleibt sie unten als Werkzeugleiste, stempelt die Bridge
   `.mnav-dock`: dann ist die Leiste eine Flex-Zeile [Kapsel | runder Knopf] wie die Pille auf
   Home, der Knopf steht `position: static` NEBEN der Kapsel (app.css 6970) und die Leiste
   selbst ist absichtlich hintergrundlos. Beides hatte der pauschale Riegel überschrieben. */
html.app-nav .mnav.mnav-top:has(> .mnav-fab) {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: var(--bg) !important; }
html.app-nav .mnav.mnav-top .mnav-fab,
html.app-nav .mnav.mnav-tools.mnav-top .mnav-fab {
  position: fixed; top: auto; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); }
html.app-nav.app-root .mnav.mnav-top .mnav-fab,
html.app-nav.app-root .mnav.mnav-tools.mnav-top .mnav-fab {
  bottom: calc(96px + env(safe-area-inset-bottom)) !important; }

/* ═══ iOS-SKIN, Teil 20 — Aufgabenliste (Martin 09.09.2026: „Tags schweben so rum und die
   Suchleiste ist nur halb so lang wie das Display") ═══

   (1) Die Suche trug einen Inline-Stil `max-width: 280px` — für den Schreibtisch gedacht, wo sie
   neben den Reitern steht. Inline schlägt jede Regel ohne `!important`; GEMESSEN endete sie bei
   296 von 402. In der App gilt: eine Suchzeile, volle Breite. */
html.app-nav .search, html.app-nav .li-search { max-width: none !important; }

/* (2) Die Prioritäts-Kapsel begann bei 93 statt bei 33: vor ihr stand die 50 pt breite
   Griff-Zelle der Tabelle (Ziehgriff, Mehrfachauswahl-Kästchen, Aufklapp-Pfeil) — leer und
   unsichtbar, aber platzraubend. Das sind Werkzeuge für Maus und großen Schirm; auf dem iPhone
   führt der Weg über die Aufgabe selbst. Weg damit, dann fluchtet die Kapsel mit dem Titel. */
html.app-nav table.tbl.tbl-cards td.rh { display: none !important; }

/* ═══ iOS-SKIN, Teil 21 — die Prioritäts-Kapsel in der Aufgabenkarte (Martin 09.09.2026:
   „das Tag möchte ich nicht so unter dem Task haben, es verwirrt — kann man da eine
   dezentere Sache machen statt dem Bum-Dingsbums") ═══

   Die Karte trug zwei Farbcodes übereinander: die Kapsel „Dringend/Hoch/Normal" UND das
   Fälligkeitsdatum, das selbst rot (überfällig) oder amber (heute) wird. Zwei Rot-Töne in
   derselben Zeile, die Verschiedenes meinen — genau das verwirrt. Die Hausregel sagt es
   ohnehin: Kapsel nur für ZUSTAND, höchstens eine je Zeile; die Zeile trägt schon die
   Status-Torte vor dem Titel.

   Also: die Kapsel verliert ihre Fläche. Der farbige Punkt bleibt (die Dringlichkeit ist
   auf einen Blick da), das Wort wird ruhiger Fließtext in Zweitfarbe. Die Farbe des Datums
   bleibt die einzige Warnung, die schreit. Desktop bleibt unberührt — dort steht die
   Priorität in einer eigenen Spalte, da ist die Kapsel richtig. */
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill {
  background: none !important; box-shadow: none !important; border: 0 !important;
  padding: 0; gap: 7px; font-size: 13px; font-weight: 500; color: var(--text2); }
/* Der Punkt erbt sonst `currentColor` — er bekommt seine Bedeutung darum ausdrücklich zurück. */
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.red    .pdot { background: var(--danger); }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.amber  .pdot { background: var(--warn); }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.blue   .pdot { background: var(--info); }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.green  .pdot { background: var(--ok); }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.violet .pdot { background: #a78bfa; }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.teal   .pdot { background: #2dd4bf; }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.pink   .pdot { background: #f472b6; }
html.app-nav table.tbl.tbl-cards td[data-col="prio"] .pill.gray   .pdot { background: var(--text3); }

/* ═══ iOS-SKIN, Teil 22 — das Antwort-Blatt und die Tastatur (Martin 09.09.2026, zwei Befunde
   aus EINER Ursache: „das Popup ist oben unter der Navi und verschwindet" und „Texteingabe und
   Ausgabe versetzt") ═══

   GEMESSEN auf dem Gerät: env(safe-area-inset-top) = 118 px — die native Titelleiste steckt
   also schon drin, die Reserve stimmte. Ohne Tastatur beginnt das volle Blatt bei y = 174 und
   sitzt sauber darunter. Mit Tastatur kippt das Bild: `position: fixed` klebt am LAYOUT-
   Ansichtsfenster (874 px hoch), dessen unteres Drittel liegt unter der Tastatur, und WebKit
   verschiebt darauf die ganze Darstellung um visualViewport.offsetTop nach oben. Das Blatt
   wandert mit — der Kopf mit Schließen und Senden rutscht hinter die Titelleiste. Derselbe
   Versatz erklärt die zweite Beschwerde: die Einfügemarke wird in Koordinaten gezeichnet, die
   diese Verschiebung nicht kennen, und steht darum eine Zeile neben dem Text.

   Antwort: nicht gegen WebKit anrechnen, sondern das SICHTBARE Fenster benutzen. app.js pflegt
   --kb (unten verdeckte Höhe) und --vvh (sichtbare Höhe); das Blatt hängt sich daran und steht
   damit immer genau über der Tastatur und immer unter der Titelleiste. */
html.app-nav .ix-reply.app-sheet-live {
  bottom: var(--kb, 0px);
  max-height: calc(var(--vvh, 100dvh) - env(safe-area-inset-top) - 12px); }
/* Über der Tastatur gibt es keinen Home-Balken, für den man Platz lassen müsste. */
html.app-nav.kb-live .ix-reply.app-sheet-live { padding-bottom: 14px !important; }

/* Zweitens: im Ruhezustand trägt das Blatt gar keine Verschiebung mehr. `transform` war bisher
   IMMER gesetzt (translateY(0)) — das allein macht aus dem Blatt eine eigene Zeichenebene und
   einen Bezugsrahmen, und genau dort verrechnet WebKit die Einfügemarke. Gebraucht wird die
   Verschiebung nur, solange der Finger zieht; danach übernimmt wieder die Animation. */
html.app-nav .ix-reply.app-sheet-live { transform: none; }
html.app-nav .ix-reply.app-sheet-live.is-dragging { transform: translateY(var(--sheet-y, 0px)); }
@media (max-width: 720px) {
  html.app-nav .modal-card.md, html.app-nav .modal-card.lg, html.app-nav .modal-card.compose { transform: none; }
  html.app-nav .modal.is-dragging .modal-card { transform: translateY(var(--sheet-y, 0px)); }
}

/* ═══ iOS-SKIN, Teil 23 — die Mail sitzt in der Karte, nicht in einem Kasten (Martin 09.09.2026:
   „warum geht die Mail so nach außen … kann man die nicht inline machen, dass es aussieht, als
   wäre sie dort richtig?") ═══

   Drei Dekorationen haben den App-Modus überlebt und machten aus dem Mailtext einen
   aufgeklebten Zettel:
   (1) Der 1-px-Rahmen aus Zeile 5528/5531. Die Regel, die im Skin alle Ränder der Nachricht
       wegnimmt (Zeile 6898), zählt `.mail-frame`, `.ix-sent-body` und `div` auf — ein
       `<iframe>` ist keines davon, der Rahmen blieb also stehen.
   (2) Zeile 6885 zwingt dem Rahmen zusätzlich eckige Ecken auf; die Einzelmail steht außerhalb
       von `.ix-thread`, also rundet auch Zeile 6894 sie nicht. Ergebnis: ein rechteckiger
       weißer Kasten mit grauer Linie auf gerundetem, randlosem Grund.
   (3) Der Boden `min-height: 340px` steht als Inline-Stil am Rahmen und schlägt jede Regel.
       Eine kurze Anfrage misst 150 px — die Differenz war die weiße Leere darunter.

   Das Dokument selbst wird NICHT angefasst: fremdes Design bleibt fremd (Doktrin seit v3.49),
   und das eigene Blatt bringt sein Weiß bewusst mit. Geändert wird nur die Hülle — dann ist die
   Mail das Papier IN der Karte statt ein Kasten AUF der Karte. */
html.app-nav .inbox-detail .mail-inline,
html.app-nav .ix-msg .mail-inline { border: 0 !important; background: var(--surface); }
html.app-nav .inbox-detail .mail-inline { min-height: 120px !important; }
html.app-nav .ix-msg { border-radius: 12px; overflow: hidden; }
/* Der Deckel-Knopf („Ganze E-Mail anzeigen") ist Teil desselben Blattes, keine eigene Kachel. */
html.app-nav .mail-more { border: 0 !important; border-radius: 0 !important; }

/* ═══ iOS-SKIN, Teil 24 — der eingebettete Teamchat (Martin 09.09.2026: „Teamchat bei VK /
   Posteingang / Todos ist so nicht comfort und sieht behämmert aus") ═══

   GEMESSEN auf der Anfrage-Seite: Betrachter-Kasten 52 hoch, Nachrichtenfläche 46 hoch,
   Eingabefeld 81 hoch, danach 272 Punkte graue Leere bis zur Leiste. Drei Ursachen:
   (1) `.chat-list` trägt einen Deckel (46vh bzw. 56vh) und wächst nicht — ohne Nachrichten
       schrumpft sie auf ihren Inhalt, und das Eingabefeld hängt mitten auf der Seite.
   (2) Die Betrachterzeile ist ein eigener Kasten mit Rand und Rundung, der wie ein Menüpunkt
       aussieht und den Chat vom Reiter abtrennt — dazu ein Erklärsatz „Betrachter hinzufügen —
       ‚+'", der nur beschreibt, was das Pluszeichen daneben ohnehin sagt.
   (3) Der Leer-Hinweis steht als graue Zeile oben links statt in der Mitte der Fläche.

   Das Fenster der Aufgabe macht es längst richtig (app.css 3112-3115) — dieselbe Sprache gilt
   jetzt auch für den Chat auf einer Seite. Die Höhe selbst setzt app.js (die Oberkante des
   Reiters kennt CSS nicht). */
html.app-nav [data-panel="chat"] { display: flex; flex-direction: column; min-height: 0; }
html.app-nav [data-panel="chat"] > .chat-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html.app-nav [data-panel="chat"] .chat { flex: 1; min-height: 0; }
html.app-nav [data-panel="chat"] .chat-list { flex: 1; min-height: 0; max-height: none !important; }
/* Leer-Hinweis in die Mitte der Fläche, wie im Aufgaben-Fenster (app.css:3115). */
html.app-nav [data-panel="chat"] .chat-empty {
  flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
/* Betrachter: eine ruhige Zeile unter den Reitern, kein Kasten. Das „+" erklärt sich selbst. */
html.app-nav [data-panel="chat"] .parts-av, html.app-nav [data-tpanel="chat"] .parts-av,
html.app-nav .card [data-panel="chat"] .parts-av {
  flex: none; border: 0; border-radius: 0; padding: 8px 12px; margin: 0;
  /* Dieselbe Fläche wie der Verlauf darunter: auf der VK-Seite liegt der Reiter in einer weißen
     Karte, und eine durchsichtige Zeile hätte dort als weißer Streifen über dem grauen Verlauf
     gestanden. Auf der Anfrage-Seite ist es ohnehin der Seitengrund. */
  background: var(--bg); }
html.app-nav .parts-av [data-parts-hint] { display: none; }
/* Auf der VK-Seite steht die Betrachterzeile im Markup UNTER dem Chat (dort war sie „dezent
   darunter" gedacht). In der App säße sie damit zwischen Eingabefeld und schwebender Leiste —
   zwei Leisten übereinander. Sie rückt deshalb auch dort nach oben unter die Reiter. */
html.app-nav [data-panel="chat"] .parts-av { order: -1; }
/* Steht der Chat auf voller Höhe, hält die Seite unten kein Polster mehr für die Leiste frei —
   sonst wäre es doppelt und der Bildschirm ließe sich um 14 Punkte verschieben (gemessen: Dokument
   888 statt 874). Der erste Selektor muss die zwei Polster-Regeln überbieten, die dasselbe mit
   `!important` setzen (Dock: Zeile 6980, oben klebende Leiste mit rundem Knopf: Zeile 6546) —
   deshalb steht ein `:has()` derselben Gewichtsklasse hier noch einmal mit drin. */
html.app-nav body.chat-fuellt:has(.mnav.mnav-tools:not([hidden])) .content,
html.app-nav body.chat-fuellt .content { padding-bottom: 0 !important; }
/* Wenige Nachrichten kleben am unteren Rand wie in jedem Messenger — `margin-top: auto` löst
   sich von selbst auf, sobald der Verlauf die Fläche füllt, und lässt das Scrollen unberührt. */
html.app-nav [data-panel="chat"] .chat-list > *:first-child:not(.chat-empty) { margin-top: auto; }
/* Der Antwort-Griff steht am Handy dauerhaft da (Touch kennt kein :hover) — als weiße Pille mit
   Schatten sah er auf der Blase wie ein Abzeichen aus. In der App bleibt nur das Zeichen: leiser,
   dafür mit größerer Trefferfläche. Weg darf er nicht, im Web ist er der einzige Weg zum Zitat. */
html.app-nav .cmsg .creply {
  background: none; box-shadow: none; opacity: .45; width: 30px; height: 30px; top: 0; right: 2px; }
html.app-nav .cmsg.me .creply { right: auto; left: 2px; }

/* ═══ iOS-SKIN, Teil 25 — native Formulare (Hub v3.74, Martin 09.09.2026: „die ganzen
   Eingabefelder und Popups möchte ich nativ haben") ═══
   Ein Formular mit `data-app-form` gibt es in der App nicht mehr als Web-Formular: die Brücke
   stellt EINEN Knopf an seine Stelle, der ein natives Blatt öffnet (BridgeScript.pageInfo).
   Das Formular selbst bleibt im Markup stehen — ohne App (Browser, Kollege am Rechner) ist es
   unverändert das, was es immer war. */
html.app-nav .app-form-web { display: none !important; }
html.app-nav .app-form-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 16px; border-radius: 20px;
  background: var(--chip-bg, rgba(120, 120, 128, .12)); color: var(--fg);
  border: 0; font: inherit; font-weight: 600; font-size: 15px; }
/* In einer Filter-/Aktionszeile sitzt er wie eine Filterkapsel, in einer Liste als volle Zeile. */
html.app-nav .ph-actions .app-form-btn,
html.app-nav .li-filterbar .app-form-btn,
html.app-nav .toolbar .app-form-btn { min-height: 36px; font-size: 14px; }
html.app-nav .focus-list + .app-form-btn,
html.app-nav .card-body > .app-form-btn,
html.app-nav .oa-mod .app-form-btn { display: flex; width: 100%; margin-top: 8px; }