/* Workbench-Komponenten (W1, Runde 3) — EINE scrollbare Fläche:
   Kopf (Ampel + Gesellschaften-Dropdown) · Fall-Arbeitsbereich oben (40/60) · Pipeline darunter.
   Kommunikation immer fallbezogen. Abgeleitet aus der echten FNW-Workbench V4. Nutzt tokens.css. */

/* Self-gehostete Schriften (DSGVO: kein Google-/CDN-Aufruf, kein IP-Abfluss).
   Open Sans (SIL OFL) + Raleway (SIL OFL) als Variable Fonts, lokal unter
   /static/fonts. Gewichtsbereiche decken die im CSS genutzten Schnitte ab:
   Open Sans 400/600/700, Raleway 600/700/800. font-display: swap. */
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/opensans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('fonts/opensans-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/raleway-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/raleway-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg-base); color: var(--tx-1); font-family: var(--font-body); font-size: var(--f-md); }
h1,h2,h3 { font-family: var(--font); margin: 0; }
.num { font-variant-numeric: tabular-nums; }
.app { display: flex; flex-direction: column; min-height: 100dvh; }
button { font-family: inherit; }
a { color: var(--ac); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ic { width: 18px; height: 18px; display: inline-block; flex: none; }

/* ───────── Kopfzeile: Ampel prominent + Gesellschaften-Dropdown ───────── */
.topbar { display: flex; align-items: center; gap: var(--s3); padding: 8px var(--s4);
  background: var(--bg-panel); border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.tb-logo { display: flex; align-items: center; gap: var(--s2); font-family: var(--font); font-weight: 800;
  letter-spacing: .12em; color: var(--brand-khaki); }
.tb-logo .mark { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--brand-khaki);
  color: var(--brand-blau); display: grid; place-items: center; font-weight: 800; }
.tb-sub { font-size: var(--f-xs); color: var(--tx-3); font-weight: 700; letter-spacing: .04em; }
.vsep { width: 1px; align-self: stretch; background: var(--bd); margin: 4px 0; }

/* Wortmarke als Sichtwechsel-Dropdown (z. B. „WaMeGu — Holding ▾") */
.brand-dd { position: relative; }
.brand-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 8px; border-radius: var(--r-md); border: 1px solid transparent; }
.brand-dd > summary::-webkit-details-marker { display: none; }
.brand-dd > summary:hover, .brand-dd[open] > summary { border-color: var(--bd-light); background: var(--bg-hover); }
.brand-dd .mark { width: 30px; height: 30px; border-radius: var(--r-md); background: var(--brand-khaki);
  color: var(--brand-blau); display: grid; place-items: center; font-weight: 800; font-family: var(--font); }
.brand-dd .bn { font-family: var(--font); font-weight: 800; letter-spacing: .06em; color: var(--brand-khaki); }
.brand-dd .bn .ges { color: var(--tx-1); }
.brand-dd .dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 300px;
  background: var(--bg-modal); border: 1px solid var(--bd-light); border-radius: var(--r-lg); box-shadow: var(--shadow-2); padding: var(--s2); }
.brand-dd .dd-head { font-size: var(--f-xs); color: var(--tx-3); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px var(--s2) 6px; }

/* Ampel-Zähler PROMINENT (größer) */
.ampelbar { display: flex; align-items: center; gap: var(--s2); }
.ampel-c { display: inline-flex; align-items: center; gap: 7px; font-weight: 800; font-size: var(--f-lg);
  padding: 5px 12px; border-radius: var(--r-md); border: 1px solid var(--bd-light); cursor: pointer; }
.ampel-c .ad { width: 11px; height: 11px; border-radius: 50%; }
.ampel-c small { font-size: var(--f-xs); font-weight: 700; opacity: .8; }
.ampel-c.rot{color:var(--rot-text);background:var(--rot-bg);border-color:var(--rot-bd)} .ampel-c.rot .ad{background:var(--rot)}
.ampel-c.gelb{color:var(--gelb-text);background:var(--gelb-bg);border-color:var(--gelb-bd)} .ampel-c.gelb .ad{background:var(--gelb)}
.ampel-c.gruen{color:var(--gruen-text);background:var(--gruen-bg);border-color:var(--gruen-bd)} .ampel-c.gruen .ad{background:var(--gruen)}
.ampel-c.blau{color:var(--blau-text);background:var(--blau-bg);border-color:var(--blau-bd)} .ampel-c.blau .ad{background:var(--blau)}
.ampel-c.grau{color:var(--grau-text);background:var(--grau-bg);border-color:var(--grau-bd)} .ampel-c.grau .ad{background:var(--grau)}

/* Gesellschaften-Dropdown */
.ges-dd { position: relative; }
.ges-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-card); border: 1px solid var(--bd-light); color: var(--tx-1); border-radius: var(--r-md);
  padding: 7px 12px; font-weight: 700; font-size: var(--f-sm); }
.ges-dd > summary::-webkit-details-marker { display: none; }
.ges-dd[open] > summary { border-color: var(--ac); }
.ges-dd .dd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 320px;
  background: var(--bg-modal); border: 1px solid var(--bd-light); border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  padding: var(--s2); }
.dd-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: 8px var(--s2);
  border-radius: var(--r-md); cursor: pointer; text-decoration: none; color: var(--tx-1); }
.dd-row:hover { background: var(--bg-hover); }
.dd-row .dd-name { font-weight: 700; font-size: var(--f-sm); }
.dd-row .dd-kpi { font-size: var(--f-xs); color: var(--tx-3); }
.dd-sep { border-top: 1px solid var(--bd); margin: var(--s2) 0; }
.dd-kpis { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px var(--s2); }

.tb-berater { display: flex; align-items: center; gap: var(--s2); font-weight: 700; color: var(--tx-1); }
.badge-online { font-size: var(--f-xs); font-weight: 700; color: var(--gruen-text);
  background: var(--gruen-bg); border: 1px solid var(--gruen-bd); border-radius: var(--r-pill); padding: 2px 8px; }
.score-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: var(--f-sm);
  color: var(--brand-khaki); background: var(--brand-khaki-soft); border: 1px solid var(--brand-khaki-bd);
  border-radius: var(--r-pill); padding: 3px 10px; }
.score-badge .up { color: var(--gruen-text); }
.tb-spacer { flex: 1; }
.tb-right { display: flex; align-items: center; gap: var(--s2); }
.tb-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--bd-light);
  color: var(--tx-2); border-radius: var(--r-md); padding: 6px 10px; font-size: var(--f-sm); font-weight: 700; cursor: pointer; }
.tb-btn:hover { background: var(--bg-hover); color: var(--tx-1); }

/* Mini-Ampel-Pills — in der TopBar (verdichtet) */
.ampel-mini { display: inline-flex; align-items: center; gap: 5px; }
.ampel-mini .am { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: var(--f-sm);
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--bd-light); font-variant-numeric: tabular-nums; }
.ampel-mini .am .d { width: 8px; height: 8px; border-radius: 50%; }
.ampel-mini .am.rot{color:var(--rot-text);background:var(--rot-bg);border-color:var(--rot-bd)} .ampel-mini .am.rot .d{background:var(--rot)}
.ampel-mini .am.gelb{color:var(--gelb-text);background:var(--gelb-bg);border-color:var(--gelb-bd)} .ampel-mini .am.gelb .d{background:var(--gelb)}
.ampel-mini .am.gruen{color:var(--gruen-text);background:var(--gruen-bg);border-color:var(--gruen-bd)} .ampel-mini .am.gruen .d{background:var(--gruen)}

/* Klickbare TopBar-Info (Belegung / Leads) */
.tbinfo { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--bd-light);
  border-radius: var(--r-md); padding: 4px 10px; color: var(--tx-2); font-size: var(--f-xs); font-weight: 700; cursor: pointer; }
.tbinfo:hover { background: var(--bg-hover); color: var(--tx-1); }
.tbinfo b { color: var(--tx-1); font-variant-numeric: tabular-nums; }

/* Schriftgrößen-Umschalter (neben Hell/Dunkel) */
.fontseg { display: inline-flex; border: 1px solid var(--bd-light); border-radius: var(--r-md); overflow: hidden; }
.fontseg button { background: transparent; border: 0; color: var(--tx-3); padding: 5px 9px; min-height: 34px; cursor: pointer;
  font-weight: 800; font-family: var(--font); }
.fontseg button[aria-selected="true"] { background: var(--brand-blau); color: #fff; }
[data-color-mode="light"] .fontseg button[aria-selected="true"] { background: var(--ac); }
.fontseg button:nth-child(1){ font-size: 11px } .fontseg button:nth-child(2){ font-size: 13px } .fontseg button:nth-child(3){ font-size: 15px }

/* KPI-Mini — kleine Chips (in der schlanken Info-Zeile) */
.kpimini { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.kpimini .kpi { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f-xs); font-weight: 700; color: var(--tx-3);
  background: var(--bg-card); border: 1px solid var(--bd-light); border-radius: var(--r-pill); padding: 2px 9px; }
.kpimini .kpi b { color: var(--tx-2); font-variant-numeric: tabular-nums; }
.kpimini .kpi .kd { width: 7px; height: 7px; border-radius: 50%; background: var(--grau); }
.kpimini .kpi.rot .kd{background:var(--rot)} .kpimini .kpi.gelb .kd{background:var(--gelb)} .kpimini .kpi.gruen .kd{background:var(--gruen)}

/* Schlanke Info-Zeile: Gesellschaften-Reiter + kleine KPI nebeneinander */
.ampelrow { display: flex; align-items: center; gap: var(--s3); padding: 4px var(--s4); background: var(--bg-panel);
  border-bottom: 1px solid var(--bd); flex-wrap: wrap; }
.ges-tabs { display: inline-flex; align-items: stretch; gap: 2px; border: 1px solid var(--bd-light); border-radius: var(--r-md); padding: 2px; }
.ges-tabs .gt-lbl { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--tx-3); font-size: var(--f-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ges-tabs button { background: transparent; border: 0; color: var(--tx-2); border-radius: var(--r-sm); padding: 6px 12px; min-height: 36px;
  font-size: var(--f-sm); font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ges-tabs button[aria-selected="true"] { background: var(--brand-blau); color: #fff; }
[data-color-mode="light"] .ges-tabs button[aria-selected="true"] { background: var(--ac); }
.ges-tabs button:hover:not([aria-selected="true"]) { background: var(--bg-hover); color: var(--tx-1); }
.ampelrow .ar-right { margin-left: auto; font-size: var(--f-xs); color: var(--tx-3); }

/* Zuständigkeits-Badge (Person, farbcodiert) */
.zb { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f-xs); font-weight: 800;
  border-radius: var(--r-pill); padding: 1px 8px; border: 1px solid var(--bd-light); }
.zb .zd { width: 8px; height: 8px; border-radius: 50%; }
.zb.randolf { color: var(--brand-khaki); border-color: var(--brand-khaki-bd); background: var(--brand-khaki-soft); }
.zb.randolf .zd { background: var(--brand-khaki); }
.zb.lutz { color: var(--blau-text); border-color: var(--blau-bd); background: var(--blau-bg); }
.zb.lutz .zd { background: var(--blau); }
.zb.ludger { color: var(--gruen-text); border-color: var(--gruen-bd); background: var(--gruen-bg); }
.zb.ludger .zd { background: var(--gruen); }
.zb.frei { color: var(--tx-3); }

/* Fall-Suche */
.casesearch { display: flex; align-items: center; gap: var(--s2); background: var(--bg-card); border: 1px solid var(--bd-light);
  border-radius: var(--r-md); padding: 8px var(--s3); color: var(--tx-3); font-size: var(--f-sm); min-height: 44px; }
.casesearch .hit { margin-left: auto; font-size: var(--f-xs); color: var(--ac); font-weight: 700; }
/* Spracheingabe auch in der Suche: kleines Mikrofon+Tastatur-Paar am Feld */
.casesearch .cs-ways { margin-left: auto; display: inline-flex; gap: 4px; flex: none; }
.casesearch .hit + .cs-ways { margin-left: 8px; }
.casesearch .cs-ic { width: 26px; height: 26px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--bd-light); border-radius: var(--r-md); background: var(--bg-base); }
.casesearch .cs-ic .ic { width: 15px; height: 15px; }
.casesearch .cs-ic.mic .ic { color: var(--gelb-text); }
.casesearch .cs-ic.key .ic { color: var(--blau-text); }

/* ───────── FALL-ARBEITSBEREICH (oben, genau EIN Fall) ─────────
   3 Spalten: schmales Werkzeugfeld · senkrechte Aktionsspalte · breites Logbuch. */
/* DYNAMISCHE Aufteilung (§F): Werkzeugfeld-Breite ergibt sich aus der Iconzahl
   (bis 6 → eine Reihe; ab 7 → 4+3, Feld wird schmaler über .tools4); das Logbuch
   bekommt IMMER die maximale Restbreite (1fr). Höhe = senkrechte Aktionsspalte:
   das Logbuch endet auf Höhe des letzten Aktions-Icons (Termin), Inhalt scrollt. */
.workarea { --waleft-w: calc(6 * var(--iconbtn) + 5 * var(--btn-gap) + 2 * var(--s3));
  display: grid; grid-template-columns: var(--waleft-w) max-content 1fr; grid-template-rows: 100%;
  border-bottom: 3px solid var(--bd); background: var(--bg-expanded);
  box-shadow: inset 3px 0 0 var(--brand-khaki);   /* aktiver-Fall-Akzent */
  /* Höhe = senkrechte Aktionsspalte (Caption + 8 Buttons + Gaps + Padding):
     Logbuch endet auf Höhe des letzten Aktions-Icons (Termin), Inhalt scrollt. */
  height: calc(2 * var(--s3) + 20px + 8 * var(--iconbtn) + 8 * var(--btn-gap)); }
.workarea.tools4 { --waleft-w: calc(4 * var(--iconbtn) + 3 * var(--btn-gap) + 2 * var(--s3)); }
.wa-left { border-right: 1px solid var(--bd); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; min-height: 0; overflow-y: auto; }
.wa-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
/* „IN BEARBEITUNG"-Markierung des aktiven Falls */
.inwork { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f-xs); font-weight: 800;
  color: var(--brand-blau); background: var(--brand-khaki); border-radius: var(--r-pill); padding: 1px 9px; }
[data-color-mode="dark"] .inwork { color: #06121C; }
.wa-rhead .bind { font-size: var(--f-xs); color: var(--tx-3); font-weight: 700; }
.wa-rhead .bind b { color: var(--tx-1); }

/* Senkrechte Aktionsspalte (volle Höhe, zwischen Werkzeug- und Logbuchfeld).
   Buttongröße kommt aus der gemeinsamen .tool,.actbtn-Regel (identisch zu links). */
.actcol { display: flex; flex-direction: column; align-items: center; gap: var(--btn-gap); padding: var(--s3) 8px;
  border-right: 1px solid var(--bd); background: rgba(0,0,0,.10); }
[data-color-mode="light"] .actcol { background: var(--bg-panel); }
.actcol .ac-cap { font-size: 9px; color: var(--tx-3); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; text-align: center; line-height: 1.1; }
.actbtn { color: var(--tx-2); }   /* FARBIG je Aktion über die .ic-Farbe unten */
.actbtn.call .ic{color:var(--gruen-text)} .actbtn.mail .ic{color:var(--blau-text)} .actbtn.wa .ic{color:#3DDC84}
.actbtn.cam .ic{color:var(--rot-text)} .actbtn.clip .ic{color:var(--brand-khaki)} .actbtn.note .ic{color:var(--gelb-text)}
.actbtn.mic .ic{color:var(--ac)} .actbtn.cal .ic{color:#2BB3A3}

/* Fall-Kopf */
.wa-fallkopf { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.wa-fallkopf h2 { font-size: var(--f-lg); font-weight: 800; }
.merge-hint { display: flex; align-items: flex-start; gap: var(--s2); background: var(--brand-khaki-soft);
  border: 1px solid var(--brand-khaki-bd); border-radius: var(--r-md); padding: 8px var(--s3); font-size: var(--f-sm); color: var(--tx-1); }
.merge-hint .ic { color: var(--brand-khaki); margin-top: 1px; }
.merge-hint b { color: var(--brand-khaki); }

/* Werkzeug-Raster (erweiterbar) */
.tool-h { font-size: var(--f-xs); color: var(--tx-3); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
/* GEMEINSAME Button-Komponente — linke Werkzeug-Buttons UND Aktions-Buttons:
   exakt identische Gesamt-Buttongröße (Kante var(--iconbtn) inkl. Padding),
   identisches Icon-Maß (--icon-size) und identische Beschriftungsgröße (--f-xs).
   Beide skalieren mit der Schriftstufe gleich → Abweichung 0px in allen Stufen. */
.tool, .actbtn { box-sizing: border-box; width: var(--iconbtn); height: var(--iconbtn);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--bg-card); border: 1px solid var(--bd-light); border-radius: var(--r-md);
  font-size: var(--f-xs); font-weight: 700; text-align: center; line-height: 1.05; cursor: pointer;
  padding: 5px 3px; overflow: hidden; }
.tool:hover, .actbtn:hover { background: var(--bg-hover); color: var(--tx-1); border-color: var(--ac); }
.tool .ic, .actbtn .ic { width: var(--icon-size); height: var(--icon-size); }
/* Linke Werkzeug-Buttons: einheitlich Khaki */
.tool { color: var(--tx-2); }
.tool .ic { color: var(--brand-khaki); }
/* Werkzeug-Reihe OBEN im linken Feld: bis 6 Icons in EINER Reihe (gleiches
   Größen-Token wie die Aktionsspalte). Ab 7 Icons ausgewogener Umbruch (4+3,
   per Inline-Override grid-template-columns:repeat(4,…) am .toolgrid des Falls). */
.toolgrid { display: grid; grid-template-columns: repeat(6, var(--iconbtn)); gap: var(--btn-gap); justify-content: space-between; }
.unterlagen { display: flex; flex-direction: column; gap: 4px; }
.u-row { display: flex; align-items: center; gap: var(--s2); font-size: var(--f-sm); color: var(--tx-2);
  padding: 5px var(--s2); border: 1px solid var(--bd-subtle); border-radius: var(--r-md); background: var(--bg-card); }
.u-row .ic { width: 16px; height: 16px; color: var(--tx-3); }
.u-row .tag { margin-left: auto; font-size: var(--f-xs); color: var(--tx-3); background: var(--bg-base);
  border: 1px solid var(--bd-light); border-radius: var(--r-pill); padding: 0 7px; }

/* Verlauf-Kopfzeile (Übersetzungs-Hinweis etc.) statt waagerechter Aktionsleiste */
/* Fall-Kopfzeile über dem Verlauf — Kerninfos des Falls (ersetzt die „Aktionen wirken auf…"-Zeile) */
.wa-rhead { display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s4); border-bottom: 1px solid var(--bd); background: var(--bg-card); flex-wrap: wrap; }
.wa-rhead .ch-title { font-family: var(--font); font-weight: 800; font-size: var(--f-md); color: var(--tx-1); }
.wa-rhead .ch-meta { color: var(--tx-2); font-size: var(--f-sm); }
.wa-rhead .ch-meta b { color: var(--tx-1); font-weight: 700; }
.wa-rhead .ch-frist { color: var(--rot-text); font-weight: 800; font-size: var(--f-sm); }
.wa-rhead .ak-hint { margin-left: auto; font-size: var(--f-xs); color: var(--tx-3); }

/* E-Mail-Eingabewahl als KLICK-Popover direkt am E-Mail-Icon der Aktionsspalte.
   Klick auf das E-Mail-Icon öffnet ein kleines Popover mit zwei Buttons
   (Diktieren / Tippen). Position: am Icon (links neben der Spalte). */
.actbtn.mail { position: relative; overflow: visible; }   /* Popover darf über den Button hinausragen */
.actpop { position: absolute; top: 0; right: calc(100% + 8px); z-index: 60; width: 168px;
  background: var(--bg-modal); border: 1px solid var(--bd-light); border-radius: var(--r-md);
  box-shadow: var(--shadow-2); padding: 6px; text-align: left; }
.actpop .ap-h { font-size: 9px; font-weight: 800; color: var(--tx-3); text-transform: uppercase; letter-spacing: .04em; padding: 2px 4px 4px; }
.actpop .ap-way { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: var(--r-md);
  background: var(--bg-card); border: 1px solid var(--bd-light); color: var(--tx-1); font-weight: 700; font-size: var(--f-sm); cursor: pointer; margin-top: 4px; }
.actpop .ap-way:hover { border-color: var(--ac); background: var(--bg-hover); }
.actpop .ap-way .ic { width: 16px; height: 16px; flex: none; }
.actpop .ap-way.mic .ic { color: var(--gelb-text); }
.actpop .ap-way.key .ic { color: var(--blau-text); }
.actpop::after { content: ""; position: absolute; top: 16px; right: -6px; width: 0; height: 0;
  border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid var(--bd-light); }
/* Werkzeug-Popover (z. B. Feedback, „Im Vorgang suchen") — klappt nach UNTEN auf */
.tool.haspop { position: relative; overflow: visible; }
.actpop.down { top: calc(100% + 7px); left: auto; right: 0; }   /* rechtsbündig: bleibt im Werkzeugfeld */
.actpop.down::after { top: -6px; right: 16px; left: auto;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 0;
  border-bottom: 6px solid var(--bd-light); }

/* Mieter-/Kunde-Kontakt-Element in der Fall-Kopfzeile: aufklappbar, gespeicherte
   Kontaktdaten des Falls. JEDE Kommunikation (Anruf/E-Mail/WhatsApp) läuft über
   diesen gespeicherten Kontakt. */
.contactdd { position: relative; }
.contactdd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg-base); border: 1px solid var(--bd-light); color: var(--tx-1); border-radius: var(--r-pill);
  padding: 2px 9px; font-weight: 700; font-size: var(--f-sm); }
.contactdd > summary::-webkit-details-marker { display: none; }
.contactdd > summary .lbl { color: var(--tx-3); font-weight: 800; font-size: var(--f-xs); }
.contactdd > summary .chev { color: var(--tx-3); width: 13px; height: 13px; }
.contactdd[open] > summary { border-color: var(--ac); }
.contactdd .cd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 55; min-width: 232px;
  background: var(--bg-modal); border: 1px solid var(--bd-light); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; }
.contactdd .cd-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md);
  font-size: var(--f-sm); color: var(--tx-1); }
.contactdd .cd-row .ic { width: 15px; height: 15px; flex: none; }
.contactdd .cd-row.call .ic { color: var(--gruen-text); }
.contactdd .cd-row.mail .ic { color: var(--blau-text); }
.contactdd .cd-row.wa .ic { color: #3DDC84; }
.contactdd .cd-row .k { color: var(--tx-3); font-size: var(--f-xs); min-width: 64px; }
.contactdd .cd-note { font-size: var(--f-xs); color: var(--tx-3); padding: 4px 8px 2px; border-top: 1px solid var(--bd-subtle); margin-top: 4px; }

/* Klickbare Richtlinien-/Wissens-Zeilen (Chevron) */
.u-row.click { cursor: pointer; }
.u-row.click:hover { border-color: var(--ac); background: var(--bg-hover); }
.u-row .chev { margin-left: auto; color: var(--tx-3); width: 16px; height: 16px; flex: none; }
.u-row .tag + .chev { margin-left: 6px; }

/* Spaltenkopf: Abkürzung mit ausgeschriebenem Label (selbsterklärend) */
.colhead .abbr { display: inline-flex; flex-direction: column; line-height: 1.05; }
.colhead .abbr small { font-size: 8px; color: var(--tx-4); font-weight: 600; text-transform: none; letter-spacing: 0; }

.verlauf { flex: 1; overflow-y: auto; padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.vh { font-size: var(--f-xs); color: var(--tx-3); font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  display: flex; align-items: center; gap: var(--s2); }

/* Sicht-Umschalter des Kommunikationsbereichs (EINE Komponente, mandant-gefilterte Sichten) */
.cz-viewbar { display: flex; align-items: center; gap: var(--s2); padding: 7px var(--s4); border-bottom: 1px solid var(--bd);
  background: var(--bg-card); font-size: var(--f-sm); }
.cz-viewbar .vb-lbl { color: var(--tx-3); font-weight: 700; font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .04em; }
.view-dd { position: relative; }
.view-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-base); border: 1px solid var(--ac); color: var(--tx-1); border-radius: var(--r-md);
  padding: 5px 10px; font-weight: 800; font-size: var(--f-sm); }
.view-dd > summary::-webkit-details-marker { display: none; }
.view-dd .vd-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 230px;
  background: var(--bg-modal); border: 1px solid var(--bd-light); border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 4px; }
.view-dd .vd-item { display: flex; align-items: center; gap: var(--s2); padding: 7px 10px; border-radius: var(--r-md);
  cursor: pointer; color: var(--tx-2); font-weight: 700; font-size: var(--f-sm); }
.view-dd .vd-item:hover { background: var(--bg-hover); color: var(--tx-1); }
.view-dd .vd-item[aria-selected="true"] { background: var(--ac-soft); color: var(--tx-1); }
.cz-viewbar .vb-hint { margin-left: auto; color: var(--tx-3); font-size: var(--f-xs); }

/* GmbH-Kürzel-Badge im aggregierten Verlauf */
.gmbh-badge { font-size: 9px; font-weight: 800; letter-spacing: .04em; border-radius: var(--r-sm); padding: 1px 5px;
  border: 1px solid var(--bd-light); color: var(--tx-2); background: var(--bg-base); }
.gmbh-badge.svc   { color: var(--blau-text);  border-color: var(--blau-bd); }
.gmbh-badge.immo1 { color: var(--gruen-text); border-color: var(--gruen-bd); }
.gmbh-badge.bet   { color: var(--brand-khaki); border-color: var(--brand-khaki-bd); }

/* Entwurf-Karte (oben) */
.draft { border: 1px solid var(--gelb-bd); background: var(--gelb-bg); border-radius: var(--r-md); padding: var(--s3); }
.draft .d-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.draft .d-badge { font-size: var(--f-xs); font-weight: 800; color: var(--gelb-text); border: 1px solid var(--gelb-bd);
  border-radius: var(--r-pill); padding: 1px 8px; }
.draft .d-to { font-weight: 700; color: var(--tx-1); }
.draft .d-text { font-size: var(--f-sm); color: var(--tx-2); margin: 6px 0; }
.draft .d-send { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; background: var(--brand-blau);
  color: #fff; border: 1px solid var(--ac-bd); border-radius: var(--r-md); padding: 7px 14px; font-weight: 700; font-size: var(--f-sm); cursor: pointer; }

/* Verlaufseintrag — anklickbar, Inhalt direkt lesbar, Aufklapp-Detail */
.ve { border: 1px solid var(--bd-subtle); border-radius: var(--r-md); background: var(--bg-card); overflow: hidden; }
.ve.in { border-left: 3px solid var(--brand-khaki); }
.ve.out { border-left: 3px solid var(--ac); }
.ve.auto { border-left: 3px solid var(--gruen); }
.ve-head { display: grid; grid-template-columns: 26px 1fr auto; gap: var(--s2); align-items: center; padding: 8px var(--s3); cursor: pointer; }
.ve-head .vch { width: 26px; height: 26px; border-radius: var(--r-md); display: grid; place-items: center; }
.vch.mail{background:rgba(45,104,173,.20)} .vch.mail .ic{color:var(--blau-text)}
.vch.call{background:rgba(39,174,96,.18)} .vch.call .ic{color:var(--gruen-text)}
.vch.wa{background:rgba(39,174,96,.14)} .vch.wa .ic{color:#3DDC84}
.vch.qr{background:rgba(216,106,96,.18)} .vch.qr .ic{color:var(--rot-text)}
.vch.doc{background:var(--brand-khaki-soft)} .vch.doc .ic{color:var(--brand-khaki)}
.ve-head .v-from { font-weight: 700; color: var(--tx-1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ve-head .v-time { font-size: var(--f-xs); color: var(--tx-3); white-space: nowrap; }
.ve-body { padding: 0 var(--s3) 8px 46px; }
.ve-text { font-size: var(--f-sm); color: var(--tx-1); line-height: 1.5; }
.ve-detail { margin-top: 8px; padding: 8px var(--s3); border: 1px dashed var(--bd-light); border-radius: var(--r-md);
  background: var(--bg-base); font-size: var(--f-sm); color: var(--tx-2); }
.ve-detail .dt-h { font-size: var(--f-xs); font-weight: 800; color: var(--tx-3); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
/* Vollansicht eines Eintrags (komplette E-Mail, scrollbar) */
.ve.open { box-shadow: 0 0 0 2px var(--ac-bd); }
.ve-full { margin-top: 8px; border: 1px solid var(--bd-light); border-radius: var(--r-md); background: var(--bg-base); }
.ve-full .vf-bar { display: flex; align-items: center; gap: var(--s2); padding: 6px var(--s3); border-bottom: 1px solid var(--bd);
  font-size: var(--f-xs); color: var(--tx-3); font-weight: 700; }
.ve-full .vf-bar .x { margin-left: auto; cursor: pointer; }
.ve-full .vf-body { max-height: 220px; overflow-y: auto; padding: var(--s3); font-size: var(--f-sm); color: var(--tx-1); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Lebenszyklus-Hinweis in der Entwurf-Karte */
.draft .d-life { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--f-xs); color: var(--gelb-text); }
.draft .d-life .arrow { color: var(--tx-3); }
.dir { font-size: var(--f-xs); font-weight: 800; border-radius: var(--r-pill); padding: 0 6px; }
.dir.in { color: var(--brand-khaki); background: var(--brand-khaki-soft); }
.dir.out { color: var(--blau-text); background: var(--ac-soft); }
.dir.auto { color: var(--gruen-text); background: var(--gruen-bg); }
.ve .toggle { color: var(--tx-3); }

/* ───────── PIPELINE (darunter) ───────── */
.section-head { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4) var(--s2); }
.section-head h2 { font-size: var(--f-lg); font-weight: 800; }
.section-head .hint { font-size: var(--f-xs); color: var(--tx-3); }
.count-pill { background: var(--bg-card); border: 1px solid var(--bd-light); color: var(--tx-2);
  border-radius: var(--r-pill); padding: 1px 9px; font-size: var(--f-xs); font-weight: 800; }
.colhead, .row { display: grid; align-items: center;
  grid-template-columns: 14px 1.6fr 1.1fr .9fr .6fr .9fr .7fr .7fr .9fr .5fr 24px; gap: var(--s2); }
.colhead { padding: 4px var(--s4); font-size: var(--f-xs); color: var(--tx-3); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--bd); }
.pipeline { display: flex; flex-direction: column; }
.pgroup { display: flex; flex-direction: column; }
.row { padding: 9px var(--s4); border-bottom: 1px solid var(--bd-subtle); border-left: 3px solid transparent; cursor: pointer; }
.row:hover { background: var(--bg-hover); }
.row.active { box-shadow: inset 0 0 0 1px var(--brand-khaki-bd); }
.pgroup.rot .row{border-left-color:var(--rot);background:var(--rot-bg)}
.pgroup.gelb .row{border-left-color:var(--gelb);background:var(--gelb-bg)}
.pgroup.gruen .row{border-left-color:var(--gruen);background:var(--gruen-bg)}
.pgroup.blau .row{border-left-color:var(--blau);background:var(--blau-bg)}
.pgroup.grau .row{border-left-color:var(--grau);background:var(--grau-bg)}
.row .pdot{width:9px;height:9px;border-radius:50%}
.pgroup.rot .pdot{background:var(--rot)} .pgroup.gelb .pdot{background:var(--gelb)} .pgroup.gruen .pdot{background:var(--gruen)} .pgroup.blau .pdot{background:var(--blau)} .pgroup.grau .pdot{background:var(--grau)}
.row .c-name{font-weight:700;color:var(--tx-1)} .row .c-sub{color:var(--tx-2)} .row .c-num{color:var(--tx-1);font-variant-numeric:tabular-nums}
.row .c-rot{color:var(--rot-text);font-weight:700} .row .c-gelb{color:var(--gelb-text);font-weight:700} .row .c-gruen{color:var(--gruen-text);font-weight:700}
.row .c-mut{color:var(--tx-3)} .row .c-exp{color:var(--tx-3);text-align:center}

/* ───────── StatusBar ───────── */
.statusbar { display: flex; align-items: center; gap: var(--s4); padding: 6px var(--s4); background: var(--bg-panel);
  border-top: 1px solid var(--bd); font-size: var(--f-xs); color: var(--tx-3); }
.sb-item { display: inline-flex; align-items: center; gap: 6px; }
.sb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); }
.sb-spacer { flex: 1; }

/* Badges / Chips / Claim / Score */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--r-pill);
  font-size: var(--f-xs); font-weight: 800; border: 1px solid var(--bd-light); background: var(--bg-card); color: var(--tx-2); }
.badge .bdot { width: 7px; height: 7px; border-radius: 50%; }
.badge.rot{color:var(--rot-text);border-color:var(--rot-bd);background:var(--rot-bg)} .badge.rot .bdot{background:var(--rot)}
.badge.gelb{color:var(--gelb-text);border-color:var(--gelb-bd);background:var(--gelb-bg)} .badge.gelb .bdot{background:var(--gelb)}
.badge.gruen{color:var(--gruen-text);border-color:var(--gruen-bd);background:var(--gruen-bg)} .badge.gruen .bdot{background:var(--gruen)}
.badge.blau{color:var(--blau-text);border-color:var(--blau-bd);background:var(--blau-bg)} .badge.blau .bdot{background:var(--blau)}
.badge.grau{color:var(--grau-text);border-color:var(--grau-bd);background:var(--grau-bg)} .badge.grau .bdot{background:var(--grau)}
.claim { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-khaki-soft); border: 1px solid var(--brand-khaki-bd);
  color: var(--brand-khaki); border-radius: var(--r-pill); padding: 2px 8px; font-size: var(--f-xs); font-weight: 800; }
.claim .ini { width: 18px; height: 18px; border-radius: 50%; background: var(--brand-khaki); color: var(--brand-blau); display: grid; place-items: center; font-size: 9px; }
.matchbox { background: var(--bg-card); border: 1px solid var(--bd); border-radius: var(--r-md); padding: var(--s3); }
.matchbox.lead { border-color: var(--ac-bd); }
.rank { display: inline-flex; align-items: center; gap: 5px; font-size: var(--f-xs); font-weight: 800;
  background: var(--brand-khaki-soft); border: 1px solid var(--brand-khaki-bd); color: var(--brand-khaki); border-radius: var(--r-pill); padding: 1px 8px; }
.scoreline { display: grid; grid-template-columns: 1fr auto; gap: 3px var(--s3); align-items: center; margin-top: var(--s2); }
.scoreline .bar { height: 8px; border-radius: var(--r-pill); background: var(--bg-base); border: 1px solid var(--bd); overflow: hidden; }
.scoreline .bar > span { display: block; height: 100%; background: var(--gruen); }
.scoreline .big { grid-row: 1 / 3; font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--gruen-text); }
.scoreline .lbl { font-size: var(--f-xs); font-weight: 800; color: var(--gruen-text); }
.notice { display: flex; align-items: center; gap: var(--s2); background: var(--bg-card); border: 1px solid var(--bd);
  border-radius: var(--r-md); padding: 8px var(--s3); font-size: var(--f-sm); color: var(--tx-2); }
.notice.xlate { border-left: 3px solid var(--blau); } .notice .ni { color: var(--blau-text); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--bd); padding: 0 var(--s4); overflow-x: auto; }
.tabs button { background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--tx-3);
  padding: 8px 12px; font-size: var(--f-sm); font-weight: 700; cursor: pointer; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--tx-1); border-bottom-color: var(--brand-khaki); }
.acc { border-top: 1px solid var(--bd); padding: 6px 0; color: var(--tx-2); font-weight: 700; font-size: var(--f-sm); display: flex; align-items: center; gap: var(--s2); }
.acc .badge-n { margin-left: auto; background: var(--bg-card); border: 1px solid var(--bd-light); color: var(--tx-2); border-radius: var(--r-pill); padding: 0 7px; font-size: var(--f-xs); }

@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* ───────── Mobil ≤768 — fluid (relative Breiten), volle Fläche, kein toter Raum ───────── */
@media (max-width: 768px) {
  /* generelle Overflow-Härtung: nichts darf horizontal überlaufen */
  .app, .topbar, .ampelrow, .workarea, .wa-left, .actcol, .wa-right, .verlauf, .ve, .ve-head, .ve-body, .pipeline, .row { min-width: 0; max-width: 100%; }
  /* Kopf KOMPLETT leer: nur Wortmarke + Theme/Profil. Keine Chips/Balken darunter. */
  .topbar { gap: var(--s2); padding: 8px var(--s3); }
  .tb-sub, .tb-berater, .vsep, .tb-right .tb-btn span, .fontseg, .ampel-mini, .tbinfo { display: none; }
  /* Der Sichtwechsel-Dropdown (auf Desktop als geöffneter Beleg) darf mobil NICHT
     die Aktionsleiste überlagern — Panel mobil zu, nur die Wortmarke bleibt sichtbar. */
  .brand-dd[open] .dd-panel, .ges-dd[open] .dd-panel { display: none; }
  .ampelrow { display: none; }                         /* Ampel-/KPI-/Gesellschaften-Zeile entfällt mobil */
  /* Direkt unter der TopBar beginnt die Aktionsleiste, darunter der Fall/Inhalt.
     WICHTIG: die Desktop-Höhenregel (feste height + grid-template-rows:100% +
     min-height:0) gilt MOBIL NICHT — sonst kollabiert das Layout (Runde-11-Bug).
     Mobil fließt alles natürlich (Stand Runde 10). */
  .workarea { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .actcol { order: 1; flex-direction: row; flex-wrap: wrap; width: 100%; gap: 8px; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--bd); padding: 10px var(--s3); }
  .actcol .ac-cap { width: 100%; text-align: left; }
  /* EXAKT 4 je Reihe × 2 Reihen, iPhone-Klickgröße, alle identisch */
  .actbtn { flex: 1 1 calc(25% - 6px); width: auto; height: 58px; min-width: 0; }
  .actbtn.cam { background: var(--rot-bg); border-color: var(--rot-bd); }
  .actcol .ac-sep { display: none; }
  .wa-right { order: 2; min-height: auto; }
  .wa-left { order: 3; border-right: 0; border-top: 1px solid var(--bd); min-height: auto; overflow: visible; }
  .verlauf { flex: none; overflow-y: visible; }   /* mobil natürlich fließend, kein interner Scrollkasten */
  .wa-rhead { padding: 8px var(--s3); }
  .verlauf { padding: var(--s3); gap: var(--s3); }
  /* Nachrichten-Karten: Kopf sauber, Zeit in eigene Zeile (kein Überlappen), volle Breite */
  .ve-head { grid-template-columns: 26px 1fr; row-gap: 3px; padding: 9px var(--s3); }
  .ve-head .v-from { overflow-wrap: anywhere; line-height: 1.4; }
  .ve-head .v-time { grid-column: 2; justify-self: start; }
  .ve-text { overflow-wrap: anywhere; line-height: 1.5; }
  .ve-body { padding: 2px var(--s3) 10px 46px; }
  .vf-body { max-height: 260px; }
  .draft, .merge-hint, .matchbox, .casesearch, .u-row { overflow-wrap: anywhere; }
  .draft .d-top { gap: 6px; }
  .draft .d-send { margin-left: 0; }
  /* Werkzeug-Buttons unten = exakt gleiche Buttongröße wie die Aktionsleiste oben
     (Token --iconbtn), 4 je Reihe, keine Riesendinger */
  .toolgrid { display: flex; flex-wrap: wrap; gap: 8px; grid-template-columns: none; }
  .tool { flex: 1 1 calc(25% - 6px); width: auto; height: var(--iconbtn); min-width: 0; }
  .actbtn { height: var(--iconbtn); }
  .actpop { display: none; }   /* Popover-Beleg nur im Desktop-02; mobil saubere Aktionsleiste */
  .colhead { display: none; }
  .section-head { padding: var(--s3); }
  /* Pipeline mobil: je Fall eine KARTE statt gequetschter Spalten.
     Zeile 1: Ampelpunkt + Titel + Zuständig-Badge.  Zeile 2: Meta klein. */
  .row { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 4px;
    grid-template-columns: none; padding: 11px var(--s3); min-height: 0;
    border-bottom: 1px solid var(--bd-subtle); }
  .row > * { display: none; }                                  /* alles aus, gezielt einblenden */
  .row .pdot { display: block; }
  .row .c-name { display: block; flex: 1 1 50%; font-size: var(--f-sm); font-weight: 700; white-space: normal; }
  .row::after { content: ""; flex-basis: 100%; height: 0; order: 50; }   /* Zeilenumbruch nach Zeile 1 */
  /* Zuständig-Badge (enthält .zb) ans Zeilenende von Zeile 1 */
  .row > span:has(.zb) { display: inline-flex; margin-left: auto; }
  /* Zeile 2 (Meta klein): WaMeGu = Status-Badge + Frist (Span direkt nach Badge) */
  .row .badge { display: inline-flex; order: 60; font-size: var(--f-xs); }
  .row .badge + span { display: inline-block; order: 61; font-size: var(--f-xs); color: var(--tx-3); }
  /* FNW (keine Status-Badge): Zuständig = vorletztes Kind, Frist = drittletztes Kind */
  [data-brand="fnw"] .row > span:nth-last-child(2) { display: inline-flex; margin-left: auto; }
  [data-brand="fnw"] .row > span:nth-last-child(3) { display: inline-block; order: 61; font-size: var(--f-xs); color: var(--tx-3); }
  .statusbar { padding: 6px var(--s3); overflow-x: auto; white-space: nowrap; }
}

/* ───────── UI-Runde Mobil 12.06.2026 (FNW iPhone-Abnahme, 16 Pro Max) ───────── */
/* Werkzeuge zum Fall: exakt 3+3, alle gleich groß, volle Containerbreite
   (gleiche Token-Systematik wie die Aktionsleiste — W1-Regeln). */
.toolgrid-3x3 { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }
.toolgrid-3x3 .tool { width: auto; }

/* TopBar rechts: Desktop-Controls (.tb-desktop) + mobiles Benutzermenü (.user-dd) */
.tb-rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; min-width: 0; }
.tb-desktop { display: flex; gap: 8px; align-items: center; }
.tb-desktop .inline { display: inline-flex; gap: 6px; align-items: center; }
.user-dd { display: none; position: relative; }
.user-dd > summary { list-style: none; cursor: pointer; }
.user-dd > summary::-webkit-details-marker { display: none; }
.user-dd .dd-panel { position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 70;
  min-width: 272px; background: var(--bg-panel); border: 1px solid var(--bd-light);
  border-radius: var(--r-lg); padding: var(--s2); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.user-dd .dd-head { font-size: var(--f-xs); color: var(--tx-3); font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em; padding: 4px var(--s2) 6px; }
.user-dd .dd-row { display: flex; align-items: center; gap: 8px; padding: 8px var(--s2);
  border-radius: var(--r-md); color: var(--tx-1); text-decoration: none; }
.user-dd .dd-row:hover { background: var(--bg-hover); }

@media (max-width: 768px) {
  /* Kein horizontales Scrollen der Seite (iPhone-Befund: Leiste lief über) */
  html, body { overflow-x: hidden; }
  /* Zeile 1: Brand + Sicht-Dropdown; rechts NUR das Benutzer-Icon */
  .tb-desktop { display: none; }
  .user-dd { display: block; }
  /* Sicht-Dropdown ist mobil PFLICHT (rollenbasierte Sichten) — Panel volle
     Breite unter der TopBar; ersetzt das alte mobile display:none. */
  .brand-dd[open] .dd-panel { display: block; position: fixed; left: var(--s3);
    right: var(--s3); top: 56px; min-width: 0; z-index: 80; }
  .user-dd[open] .dd-panel { display: block; }
  /* Werkzeuge: 3 je Reihe (3+3), gleiche Buttongröße wie die Aktionsleiste */
  .toolgrid-3x3 .tool { flex: 1 1 calc(33.333% - 6px); }
}

/* ══ Komponenten-Makros (components/makros.html) — additiv, km-Namespace.
      Nur Token-Variablen aus tokens.css; kein Eingriff in Bestands-Klassen.
      Ampel-Punkte bewusst NUR innerhalb km-Komponenten definiert (kein Bleed). ══ */
.km-tbl { display: flex; flex-direction: column; border: 1px solid var(--bd-light); border-radius: var(--r-lg); overflow: hidden; }
.km-tr { display: grid; gap: 10px; align-items: center; padding: 10px var(--s3); border-bottom: 1px solid var(--bd-light); }
.km-tr:last-child { border-bottom: 0; }
.km-th { font-size: var(--f-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); font-weight: 800; }
.km-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--s3); }
.km-filter select, .km-filter input { background: var(--bg-base); border: 1px solid var(--bd-light);
  border-radius: var(--r-md); color: var(--tx-1); padding: 6px var(--s2); font-size: var(--f-sm); }
.km-btn { background: var(--brand-blau); color: #fff; border: 1px solid var(--ac-bd, var(--bd-light));
  border-radius: var(--r-md); padding: 6px 12px; font-weight: 700; font-size: var(--f-sm);
  cursor: pointer; text-decoration: none; display: inline-block; }
.km-btn[disabled], .km-btn.dis { opacity: .5; cursor: not-allowed; pointer-events: none; }
.km-btn-sub { background: var(--bg-card); color: var(--tx-2); }
.km-paging { display: flex; gap: 10px; align-items: center; margin-top: var(--s3); }
.km-pill .bdot, .km-amp .bdot, .km-badge .bdot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.km-pill .bdot.gruen, .km-amp .bdot.gruen, .km-badge .bdot.gruen { background: var(--gruen); }
.km-pill .bdot.gelb,  .km-amp .bdot.gelb,  .km-badge .bdot.gelb  { background: var(--gelb, #d8a400); }
.km-pill .bdot.rot,   .km-amp .bdot.rot,   .km-badge .bdot.rot   { background: var(--rot); }
.km-pill .bdot.grau,  .km-amp .bdot.grau,  .km-badge .bdot.grau  { background: var(--tx-3); }
.km-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: var(--f-xs); font-weight: 700; border: 1px solid var(--bd-light); }
.km-amp { display: inline-flex; align-items: center; gap: 6px; }
.km-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-pill, 999px);
  font-size: var(--f-xs); font-weight: 800; border: 1px solid var(--bd-light); color: var(--tx-2); }
.km-badge-kritisch { color: var(--rot-text); border-color: var(--rot-bd); background: var(--rot-bg); }
.km-badge-warnung  { color: var(--gelb-text); border-color: var(--gelb-bd); background: var(--gelb-bg); }
.km-card { background: var(--bg-card); border: 1px solid var(--bd); border-radius: var(--r-xl);
  padding: var(--s4); margin-bottom: var(--s3); }
.km-card-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: var(--s3); }
.km-card-kopf h2 { font-size: var(--f-md); font-weight: 800; color: var(--tx-1); margin: 0; }
.km-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.km-dl dt { color: var(--tx-3); font-size: var(--f-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.km-dl dd { margin: 0; color: var(--tx-1); font-size: var(--f-sm); }
.km-drawer { border: 1px solid var(--bd-light); border-radius: var(--r-lg); margin: var(--s3) 0; background: var(--bg-panel); }
.km-drawer > summary { cursor: pointer; padding: 10px var(--s3); font-weight: 800; font-size: var(--f-sm); color: var(--tx-2); list-style: none; }
.km-drawer > summary::before { content: '▸ '; }
.km-drawer[open] > summary::before { content: '▾ '; }
.km-drawer-inhalt { padding: var(--s3); border-top: 1px solid var(--bd-light); }
.km-vn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.km-vn-spalte { border: 1px solid var(--bd-light); border-radius: var(--r-lg); padding: var(--s3); }
.km-vn-vorher  { border-color: var(--rot-bd); }
.km-vn-nachher { border-color: var(--gruen-bd); }
.km-vn-titel { font-size: var(--f-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tx-3); margin-bottom: 6px; }
@media (max-width: 768px) {
  .km-th { display: none; }
  .km-tr { grid-template-columns: 1fr !important; gap: 4px; padding: 12px var(--s3); }
  .km-vn-grid { grid-template-columns: 1fr; }
}

/* ── Buchhaltungs-Seiten: gemeinsamer Kopf (Etappe 4, Makro-Ueberfuehrung).
      Vorher in jedem buchhaltung_*.html-Template dupliziert; Seiten duerfen
      max-width im eigenen style-Block ueberschreiben. ── */
.bh-wrap { padding: var(--s3); max-width: 1150px; margin: 0 auto; }
.bh-head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s3); flex-wrap: wrap; }
.bh-head h1 { font-size: var(--f-lg); margin: 0; }
.bh-link { color: var(--tx-2); text-decoration: none; font-size: var(--f-sm); }
.bh-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bh-form input, .bh-form select { background: var(--bg-base); border: 1px solid var(--bd-light);
  border-radius: var(--r-md); color: var(--tx-1); padding: 6px 8px; font-size: var(--f-sm); }
.km-plus { color: #2e9e5b; } .km-minus { color: #d1435b; }