/* Postfach, Etappe 2 (27.10.2026, docs/postfach-etappe2.md): Rahmen nach Fassung 2 des Konzepts.
   Ordner in der Seitenleiste unter „Postfach“, rechts zwei Flächen (Liste und Mail). Werkbank-Sprache:
   grauer Grund, weiße Karten mit Schatten, Radius 0, Farbe nur mit Bedeutung. Hell und dunkel über die
   Tokens aus werkbank.css; keine festen Farben außer dem Stand-Vokabular. */

/* Die Farbwerte des alten Mail-Bereichs (--mc-*) zeigen auf die Werkbank-Tokens: Lesebereich und Schreiben
   aus dem Redesign vom 22.07.2026 stehen so schon im neuen Rahmen richtig, bis die Schritte 3 und 6 sie ersetzen. */
html.wb .mlc,html.wb .mlc-modal,html.wb .pf-panel,html.wb .acc-bst-werkzeug{
  --mc-card:var(--surface); --mc-line:var(--line); --mc-line2:var(--line); --mc-ink:var(--ink);
  --mc-text:var(--ink-mid); --mc-mut:var(--ink-mid); --mc-soft:var(--ink-faint); --mc-soft2:var(--ink-soft);
  --mc-bgsoft:var(--wb-soft); --mc-hover:var(--wb-hover); --mc-sel:var(--accent-soft); --mc-chipbg:var(--wb-hover);
  --mc-obd:var(--field-line); --mc-openbd:var(--field-line); --mc-editor:var(--ink); --mc-bronze:var(--accent);
  --mc-quotebd:var(--field-line); --mc-lead:var(--accent-dark); --mc-leadbd:var(--field-line);
  --mc-gold:var(--ink-mid); --mc-goldbg:var(--wb-hover); --mc-goldbd:var(--line)
}
html.wb .mlc{font-family:var(--font-body);color:var(--ink)}
html.wb .mlc .mlc-mono{font-family:var(--font-body)}

/* ---------- Rahmen ---------- */
html.wb .mlc.pf{display:flex;flex-direction:column;gap:18px;box-shadow:none!important;background:transparent;min-height:0}
html.wb .pf-kopf{display:flex;align-items:flex-end;gap:14px 18px;flex-wrap:wrap;flex:none}
html.wb .pf-kopf-text{flex:1 1 300px;min-width:0}
html.wb .pf-titel{margin:0;font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
html.wb .pf-sub{margin:4px 0 0;font-size:15px;color:var(--ink-soft);overflow-wrap:anywhere}
html.wb .pf-kopf-akt{display:flex;gap:10px;flex:none}
/* Abrufen ist Nebenaktion: auf grauem Grund weiß mit Rand (DESIGN.md: nie grau auf grau). */
html.wb .pf-abrufen{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px;background:var(--surface);border:1px solid var(--field-line);color:var(--ink-mid);font:inherit;font-size:15px;font-weight:600;cursor:pointer;zoom:1}
html.wb .pf-abrufen:hover{border-color:var(--ink-faint);color:var(--ink)}
html.wb .pf-abrufen:disabled{cursor:default;color:var(--ink-faint)}

html.wb .pf-zwei{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px}
/* Ausnahme von „Kantig“ (DESIGN.md, Abschnitt 4, seit 29.10.2026): Die Karten des Postfachs sind gerundet, wie im Entwurf.
   Knöpfe, Felder und Marken darin bleiben eckig. Gerundet wird nur, was wb-keep-round trägt. */
html.wb .pf-liste-karte,html.wb .pf-lesen-karte{background:var(--surface);box-shadow:var(--wb-card);min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:14px}

/* ---------- Ordner in der Seitenleiste ---------- */
html.wb .ib-nav-pf{display:flex;flex-direction:column;gap:1px;margin:0 0 6px;position:relative}
html.wb .ib-nav-pf.hidden,html.wb .ib-collapsed .ib-nav-pf{display:none}
html.wb .ib-nav-pf::before{content:"";position:absolute;left:24px;top:2px;bottom:2px;width:1px;background:var(--line)}
html.wb .pf-ngruppe{padding:6px 12px 4px 47px;font-size:12.5px;font-weight:650;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-nzeile{position:relative;display:flex;align-items:center}
html.wb .pf-nord{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:7px 12px 7px calc(47px + var(--tiefe,0) * 12px);border:0;background:transparent;color:var(--ink-mid);font:inherit;font-size:14px;text-align:left;cursor:pointer}
html.wb .pf-nzeile:hover .pf-nord{background:var(--wb-hover);color:var(--ink)}
html.wb .pf-nzeile.an .pf-nord{background:var(--wb-hover);color:var(--ink);font-weight:650}
html.wb .pf-nzeile.an::before{content:"";position:absolute;left:23px;top:7px;bottom:7px;width:3px;background:var(--accent);z-index:1}
html.wb .pf-nname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-nzahl{flex:none;margin-left:auto;font-size:12.5px;color:var(--ink-faint);font-weight:500}
html.wb .pf-nzahl.wichtig{color:var(--ink);font-weight:700}
/* Arbeitsliste (Etappe 3): fällige Erinnerungen in Fristfarbe, Hinweise und Belege abgesetzt am Ende */
html.wb .pf-nzahl.frist{color:var(--wb-warn,#A4461A);font-weight:700}
html.wb .pf-ntrenn{height:1px;background:var(--line);margin:8px 12px 6px 47px}
/* Menü eigener Ordner: ⋯ beim Überfahren an der Stelle der Zahl */
html.wb .pf-nmehr{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:28px;height:26px;display:none;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink-faint);cursor:pointer}
html.wb .pf-nzeile:hover .pf-nmehr,html.wb .pf-nmehr:focus-visible{display:flex}
html.wb .pf-nzeile:hover .pf-nzahl{visibility:hidden}
html.wb .pf-nmehr:hover{color:var(--ink);background:var(--surface)}
html.wb .pf-nweiter,html.wb .pf-nneu{display:flex;align-items:center;gap:6px;width:100%;padding:7px 12px 7px 47px;border:0;background:transparent;color:var(--ink-faint);font:inherit;font-size:13.5px;text-align:left;cursor:pointer}
html.wb .pf-nweiter:hover,html.wb .pf-nneu:hover{background:var(--wb-hover);color:var(--ink)}
html.wb .pf-nweiter svg{transition:transform .15s}
html.wb .pf-nweiter[aria-expanded="true"] svg{transform:rotate(180deg)}
html.wb .pf-nneu svg{width:13px;height:13px;margin-left:-1px}

/* ---------- Kopf der Liste ---------- */
html.wb .pf-lkopf{flex:none;padding:18px 20px 14px;display:grid;gap:12px;border-bottom:1px solid var(--field-line)}
html.wb .pf-ltitel{display:flex;align-items:baseline;gap:9px;min-width:0}
html.wb .pf-ordnername{font-size:20px;font-weight:700;letter-spacing:-.015em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.wb .pf-ordnerwahl{display:none;align-items:center;gap:6px;border:0;background:transparent;padding:0;font:inherit;color:var(--ink);cursor:pointer;min-width:0}
html.wb .pf-ordnerwahl b{font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-lzahl{font-size:14px;color:var(--ink-soft);white-space:nowrap}
html.wb .pf-lmehr{margin-left:auto;align-self:center;width:32px;height:30px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink-soft);cursor:pointer}
html.wb .pf-lmehr:hover{background:var(--wb-hover);color:var(--ink)}
html.wb .pf-such{display:flex;align-items:center;gap:9px;height:40px;padding:0 9px 0 12px;background:var(--wb-hover);border:1px solid transparent;color:var(--ink-faint);cursor:text}
html.wb .pf-such kbd{flex:none;font-family:var(--font-body);font-size:11px;font-weight:700;min-width:20px;height:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink-soft);border:1px solid var(--field-line)}
html.wb .pf-such:focus-within{background:var(--surface);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html.wb .pf-such input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:0}
html.wb .pf-such input::-webkit-search-cancel-button{display:none}
html.wb .pf-such:focus-within kbd{display:none}
html.wb .pf-seg{display:flex;gap:2px;padding:3px;background:var(--wb-seg)}
html.wb .pf-seg.hidden{display:none}
html.wb .pf-seg button{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:6px 8px;font:inherit;font-size:13px;font-weight:500;color:var(--ink-soft);white-space:nowrap;cursor:pointer}
html.wb .pf-seg button:hover{color:var(--ink)}
html.wb .pf-seg button.an{background:var(--surface);color:var(--ink);font-weight:650;box-shadow:0 1px 3px rgba(22,32,27,.12)}
html.wb[data-theme="dark"] .pf-seg button.an{box-shadow:0 1px 3px rgba(0,0,0,.4)}
html.wb .pf-filter{display:flex;flex-wrap:wrap;gap:6px}
html.wb .pf-filter.hidden{display:none}
html.wb .pf-fchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 4px 3px 9px;background:var(--accent-soft);color:var(--accent-dark);font-size:12.5px;font-weight:650}
html.wb .pf-fchip button{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border:0;background:transparent;color:inherit;cursor:pointer;padding:0}
html.wb .pf-fchip button:hover{background:color-mix(in srgb,var(--accent) 16%,transparent)}

/* ---------- Liste ----------
   Nach dem Entwurf (29.10.2026): runde Kürzel in zarten Farben, Absender und Zeit, Betreff, Vorschau, darunter Notizen,
   Anhänge und die Zuordnung. Zeilen ohne Trennlinie mit Abstand zum Kartenrand, Abschnitte nach Datum. Ungelesen: Punkt
   und Zeit in der Akzentfarbe, Betreff fett. Kompakt bleibt eine Zeile je Mail, ohne Kürzel. */
html.wb .pf-liste{flex:1;min-height:0;overflow-y:auto;padding:0 10px 12px}
html.wb .pf-lgruppe{padding:16px 10px 6px;font-size:12.5px;font-weight:650;color:var(--ink-faint)}
html.wb .pf-zeile{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:baseline;align-content:start;padding:12px 10px 12px 12px;background:transparent;cursor:pointer;outline-offset:-2px}
html.wb .pf-zeile:hover{background:var(--wb-hover)}
html.wb .pf-zeile.sel{background:var(--accent-soft)}
html.wb .pf-av{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;font-size:12.5px;font-weight:700;line-height:1;user-select:none}
html.wb .pf-zeile > .pf-av{grid-column:1;grid-row:1 / span 3;align-self:start;margin-top:1px}
/* Kürzel-Farben: fest, folgen nicht dem Akzent (DESIGN.md). Kontrast der Schrift ≥ 4,5 : 1 */
html.wb .pf-av.f0{background:#F1E8DA;color:#7A5A2E}
html.wb .pf-av.f1{background:#E7E5F3;color:#4F4A86}
html.wb .pf-av.f2{background:#E2EEE7;color:#2F6A4C}
html.wb .pf-av.f3{background:#E1E9F1;color:#3B5873}
html.wb .pf-av.f4{background:#F3E4E0;color:#86453A}
html.wb .pf-av.f5{background:#ECECE8;color:#4A544D}
html.wb .pf-av.blass{background:var(--wb-hover);color:var(--ink-soft)}
html.wb[data-theme="dark"] .pf-av.f0{background:#3A3022;color:#EBD3AE}
html.wb[data-theme="dark"] .pf-av.f1{background:#2E2C44;color:#CFCBF2}
html.wb[data-theme="dark"] .pf-av.f2{background:#1F3529;color:#A9DCC0}
html.wb[data-theme="dark"] .pf-av.f3{background:#22303D;color:#B7CCE0}
html.wb[data-theme="dark"] .pf-av.f4{background:#3D2723;color:#F0C3B8}
html.wb[data-theme="dark"] .pf-av.f5{background:#2A2D2B;color:#CBD3CC}
html.wb .pf-pkt{display:none;width:8px;height:8px;border-radius:50%}
html.wb .pf-wer{grid-column:2;grid-row:1;min-width:0;font-size:15px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-anz{margin-left:7px;font-size:12.5px;font-weight:600;color:var(--ink-faint)}
html.wb .pf-zeit{grid-column:3;grid-row:1;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;font-size:13px;color:var(--ink-faint);white-space:nowrap;text-align:right}
html.wb .pf-zeile.neu .pf-zeit{color:var(--accent-dark);font-weight:700}
html.wb .pf-zeile.neu .pf-zeit::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
html.wb .pf-zeile.neu .pf-zeit.pf-zstand::before{display:none}
html.wb .pf-zstand{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}
html.wb .pf-zstand svg{width:13px;height:13px;flex:none}
html.wb .pf-zmarke{font-size:12px;font-weight:650;color:var(--ink-mid);margin-right:6px;white-space:nowrap}
html.wb .pf-zmarke.frist{color:var(--wb-warn,#A4461A)}
html.wb .pf-zeile.auto .pf-wer{color:var(--ink-soft);font-weight:500}
html.wb .pf-l2{grid-column:2 / 4;grid-row:2;min-width:0;display:grid;gap:2px}
html.wb .pf-betr{min-width:0;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-betr b{font-weight:500}
html.wb .pf-zeile.neu .pf-betr b{font-weight:700}
html.wb .pf-vorschau{min-width:0;font-size:13.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-trenn{display:none}
html.wb .pf-zusatz{grid-column:2 / 4;grid-row:3;min-width:0;display:flex;align-items:center;gap:14px;margin-top:5px;overflow:hidden;font-size:12.5px;color:var(--ink-soft)}
html.wb .pf-zusatz > span{flex:none;display:inline-flex;align-items:center;gap:5px;min-width:0;white-space:nowrap}
html.wb .pf-zusatz > .pf-obj{flex:0 1 auto}
html.wb .pf-zusatz svg{flex:none;width:13px;height:13px}
html.wb .pf-znotiz{color:var(--bronze-ink);font-weight:600}
html.wb .pf-obj{max-width:100%;overflow:hidden}
html.wb .pf-obj span{overflow:hidden;text-overflow:ellipsis}
/* Datum und Uhrzeit wählen (Zurückstellen, Später senden, Erinnern) */
html.wb .pf-zp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
/* Erinnern (Etappe 3): gesetzt in Akzentfläche im Kopf der Mail */
html.wb .pf-ik.an{background:var(--accent-soft);color:var(--accent-dark)}
/* Dialoge aus der Leiste „Neue E-Mail“ (Termin, Datum und Uhrzeit) liegen über der Leiste */
html.wb body:has(.pf-panel) .modal{z-index:960}
/* Listen im Editor (Termin vorschlagen, Aufzählung) mit Einzug, damit die Punkte im Textfeld bleiben */
html.wb .pf-text ul,html.wb .pf-text ol{margin:6px 0;padding-left:22px}
/* Senden mit Pfeil für „Später senden“ (Etappe 3) */
html.wb .pf-k-split{display:inline-flex;gap:1px}
html.wb .pf-k.pf-k-pfeil{padding:0 10px}
html.wb .pf-k.pf-k-pfeil svg{width:12px;height:12px}
/* Widerrufsbelehrung im Interessenten-Assistenten: Textknopf */
html.wb .pf-fl-link.pf-erinnern{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-weight:600}
html.wb .pf-fl-link.pf-erinnern[hidden]{display:none}
html.wb .pf-fl-link.pf-erinnern svg{width:14px;height:14px;flex:none}
html.wb .pf-fl-link.pf-erinnern.an{color:var(--accent-dark)}
html.wb .pf-zordner{display:inline-block;padding:0 6px;background:var(--wb-hover);color:var(--ink-mid);font-size:12px;font-weight:600}
html.wb .pf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.wb .pf-leer{padding:44px 24px;text-align:center;color:var(--ink-soft);font-size:14px;line-height:1.5}
html.wb .pf-liste .mlc-mehr{width:calc(100% - 8px);margin:10px 4px 6px;background:var(--surface);border:1px solid var(--field-line);color:var(--ink-mid)}
html.wb .pf-frisch{background:var(--accent-soft)!important;color:var(--accent-dark)!important;border:0!important;margin-top:8px}

/* Kompakt: eine Zeile je Mail (40 px) — Punkt, Absender, Betreff mit Vorschau, Zeit. Kürzel und Zusatzzeile entfallen. */
html.wb .pf.kompakt .pf-zwei{grid-template-columns:minmax(360px,44%) minmax(0,1fr)}
html.wb .pf.kompakt .pf-zeile{grid-template-columns:14px minmax(70px,140px) minmax(0,1fr) auto;column-gap:9px;align-items:center;min-height:40px;padding:7px 10px 7px 8px;row-gap:0}
html.wb .pf.kompakt .pf-zeile > .pf-av,html.wb .pf.kompakt .pf-zusatz{display:none}
html.wb .pf.kompakt .pf-pkt{display:block;grid-row:1;grid-column:1;justify-self:center}
html.wb .pf.kompakt .pf-zeile.neu .pf-pkt{background:var(--accent)}
html.wb .pf.kompakt .pf-zeile.neu .pf-zeit::before{display:none}
html.wb .pf.kompakt .pf-wer{font-size:14px;font-weight:500;color:var(--ink-mid)}
html.wb .pf.kompakt .pf-zeile.neu .pf-wer{font-weight:700;color:var(--ink)}
html.wb .pf.kompakt .pf-l2{grid-row:1;grid-column:3;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px;color:var(--ink-soft)}
html.wb .pf.kompakt .pf-betr,html.wb .pf.kompakt .pf-vorschau{display:inline;font-size:inherit}
html.wb .pf.kompakt .pf-trenn{display:inline}
html.wb .pf.kompakt .pf-zeit{grid-column:4}
html.wb .pf.kompakt .pf-lgruppe{padding:12px 8px 4px}

/* Mehrfachauswahl: Kästchen an der Stelle des Punkts, beim Überfahren und während einer Auswahl */
html.wb .pf-kasten{grid-row:1 / span 2;grid-column:1;justify-self:center;align-self:start;margin-top:10px;width:16px;height:16px;padding:0;display:none;place-items:center;border:1.5px solid var(--ink-faint);background:var(--surface);color:var(--accent-ink);cursor:pointer}
html.wb .pf.kompakt .pf-kasten{grid-row:1;align-self:center;margin-top:0;width:14px;height:14px}
html.wb .pf-kasten svg{width:11px;height:11px}
html.wb .pf-kasten:not(.an) svg{display:none}
html.wb .pf-kasten.an,html.wb .pf-kasten.teil{background:var(--accent);border-color:var(--accent)}
html.wb .pf-kasten.teil::after{content:"";width:7px;height:2px;background:var(--accent-ink)}
html.wb .pf-zeile:hover .pf-kasten,html.wb .pf-zeile .pf-kasten:focus-visible,html.wb .pf.auswahl .pf-zeile .pf-kasten{display:grid}
html.wb .pf-zeile:hover .pf-pkt,html.wb .pf.auswahl .pf-zeile .pf-pkt,html.wb .pf-zeile:has(.pf-kasten):hover > .pf-av,html.wb .pf.auswahl .pf-zeile:has(.pf-kasten) > .pf-av{visibility:hidden}
html.wb .pf-zeile.gewaehlt{background:var(--accent-soft)}
/* Während einer Auswahl wird der Kopf der Liste zur Leiste für Sammelaktionen. */
html.wb .pf.auswahl .pf-ltitel,html.wb .pf.auswahl .pf-such,html.wb .pf.auswahl .pf-seg,html.wb .pf.auswahl .pf-filter{display:none}
html.wb .pf-sammel{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:38px}
html.wb .pf-sammel[hidden]{display:none}
html.wb .pf-sammel .pf-kasten{display:grid;flex:none;margin:0 4px 0 1px}
html.wb .pf-sammel-zahl{font-size:14px;font-weight:700;color:var(--ink);margin-right:4px}
html.wb .pf-sammel-ik{margin-left:auto;display:inline-flex;gap:4px}

/* ---------- Lesen (Schritt 3) ---------- */
html.wb .pf-lesen-karte{position:relative}
html.wb .pf-lesen-leer{margin:auto;padding:40px 24px;text-align:center;color:var(--ink-soft);font-size:14px;display:grid;gap:6px;max-width:46ch;line-height:1.5}
html.wb .pf-lesen-leer b{color:var(--ink-mid);font-weight:600;font-size:15px}
html.wb .pf-lk{flex:none;display:flex;align-items:flex-start;gap:12px;padding:22px 24px 14px}
html.wb .pf-lk .mlc-back{display:none;width:32px;height:32px;flex:none;place-items:center;border:0;background:var(--wb-hover);color:var(--ink-mid);border-radius:0}
html.wb .pf-lk-text{flex:1;min-width:0}
html.wb .pf-betreff{margin:0;font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.28;color:var(--ink);overflow-wrap:anywhere}
html.wb .pf-lk-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:6px;font-size:13.5px;color:var(--ink-soft)}
html.wb .pf-lk-notizen::before{content:"·";margin-right:10px;color:var(--ink-faint)}
html.wb .pf-sichtbar{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;text-align:left}
html.wb .pf-sichtbar:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
html.wb .pf-sichtbar[hidden]{display:none}
html.wb .pf-sichtbar:not([hidden]) + .pf-lk-anz::before{content:"·";margin-right:10px;color:var(--ink-faint)}
html.wb .pf-lk-akt{display:flex;gap:4px;flex:none}
html.wb .pf-ik{width:32px;height:32px;display:inline-grid;place-items:center;border:0;background:var(--wb-hover);color:var(--ink-mid);cursor:pointer;padding:0}
html.wb .pf-ik:hover{background:var(--wb-seg);color:var(--ink)}

/* Fallleiste: eine Zeile, getönt, nur der Vorgang trägt Gewicht */
/* Fallleiste nach dem Entwurf (29.10.2026): zwischen zwei Linien, ohne Fläche. Nicht zugeordnet als gestrichelte Marke,
   die Aktionen als Links in der Akzentfarbe. */
html.wb .pf-fallleiste{flex:none;margin:0 24px;min-height:54px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:9px 0;border-top:1px solid var(--field-line);border-bottom:1px solid var(--field-line);font-size:13.5px;color:var(--ink-mid)}
html.wb .pf-fl-offen{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border:1px dashed color-mix(in srgb,var(--ink) 30%,var(--surface));color:var(--ink-mid);font-weight:600;white-space:nowrap}
html.wb .pf-fl-offen svg{color:var(--ink-faint)}
html.wb .pf-fl-aktionen{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin-left:8px}
html.wb .pf-fallleiste .pf-fl-rechts .pf-fl-aktionen{gap:6px 16px}
html.wb .pf-fallleiste:empty{display:none}
html.wb .pf-fallleiste > b{color:var(--ink);font-weight:700}
html.wb .pf-fl-haupt{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 0;border:0;background:transparent;padding:0;font:inherit;color:var(--ink-mid);text-align:left;cursor:pointer;min-width:0}
html.wb .pf-fl-haupt b{color:var(--ink);font-weight:700}
html.wb .pf-fl-haupt:hover b{text-decoration:underline;text-underline-offset:2px}
html.wb .pf-fl-teil{color:var(--ink-mid)}
html.wb .pf-fl-teil::before{content:"·";margin:0 8px;color:var(--ink-faint)}
html.wb .pf-fallleiste > .pf-fl-teil::before{margin:0 8px 0 -4px}
html.wb .pf-fl-blass{color:var(--ink-soft)}
html.wb .pf-fl-rechts{margin-left:auto;display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
html.wb .pf-fl-next{color:var(--ink-soft)}
html.wb .pf-fl-next.frist{color:var(--wb-warn,#A4461A);font-weight:700}
html.wb .pf-fl-link{display:inline-flex;align-items:center;gap:3px;border:0;background:transparent;padding:0;font:inherit;font-weight:650;color:var(--accent-dark);cursor:pointer;white-space:nowrap}
html.wb .pf-fl-link:hover{text-decoration:underline;text-underline-offset:2px}
html.wb .pf-fl-mehr{width:28px;height:28px;display:inline-grid;place-items:center;border:0;background:transparent;color:var(--ink-soft);cursor:pointer;padding:0}
html.wb .pf-fl-mehr:hover{background:var(--surface);color:var(--ink)}
html.wb .pf-fl-vorschlag b{color:var(--ink);font-weight:650}
html.wb .pf-fl-grund{color:var(--ink-soft)}
html.wb .pf-fl-grund::before{content:"· "}

/* Knöpfe: Hauptaktion in Akzent, Nebenaktionen getönt; auf getönter Fläche weiß mit Rand */
html.wb .pf-k{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;background:var(--wb-hover);color:var(--ink);font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap}
html.wb .pf-k:hover{background:var(--wb-seg)}
html.wb .pf-k-haupt{background:var(--accent);color:var(--accent-ink)}
html.wb .pf-k-haupt:hover{background:var(--accent-hover)}
html.wb .pf-k-klein{height:28px;padding:0 10px;font-size:12.5px;background:var(--surface);border:1px solid var(--field-line)}
html.wb .pf-k-klein:hover{background:var(--surface);border-color:var(--ink-faint)}
html.wb .pf-k-haupt.pf-k-klein{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html.wb .pf-k-haupt.pf-k-klein:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
html.wb .pf-k-ton{background:var(--accent-soft);color:var(--accent-dark);border-color:transparent}
html.wb .pf-k-ton:hover{background:var(--accent-soft);border-color:var(--accent)}
html.wb .pf-k:disabled{cursor:default;opacity:.6}

/* Verlauf: ältere eingeklappt, die jüngste offen, Text höchstens 72 Zeichen breit */
html.wb .pf-verlauf{flex:1;min-height:0;overflow-y:auto;padding:14px 24px 24px;display:flex;flex-direction:column}
html.wb .pf-alt{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:baseline;width:100%;min-height:36px;padding:9px 0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink-soft);text-align:left;cursor:pointer}
html.wb .pf-alt b{color:var(--ink-mid);font-weight:650;white-space:nowrap}
html.wb .pf-alt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-alt time{white-space:nowrap}
html.wb .pf-alt:hover{color:var(--ink)}
html.wb .pf-msg{flex:none;padding:12px 0 16px}
html.wb .pf-msg-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-height:36px;padding-top:7px;margin-bottom:8px;font-size:13.5px;color:var(--ink-soft)}
html.wb .pf-msg-kopf[role=button]{cursor:pointer}
html.wb .pf-msg-wer{color:var(--ink);font-weight:700;font-size:15px}
html.wb .pf-msg-adr{color:var(--ink-soft);overflow-wrap:anywhere}
html.wb .pf-msg-an{min-width:0;overflow-wrap:anywhere}
html.wb .pf-msg-zeit{margin-left:auto;white-space:nowrap}
/* Der Text der Mail als Karte mit Rand (Entwurf 29.10.2026), Text höchstens 72 Zeichen breit */
html.wb .pf-msg-text{max-width:calc(72ch + 42px);padding:16px 20px;border:1px solid var(--field-line);border-radius:10px;background:var(--surface);font-size:14.5px;line-height:1.62;color:var(--ink);overflow-wrap:anywhere}
html.wb .pf-msg-text .mlc-papier{max-width:none}
/* HTML-Mails nutzen die ganze Breite, damit gestaltete Mails mittig stehen (Rahmen-CSS in crm-core.js) */
html.wb .pf-msg-text:has(.mlc-papier){max-width:none;padding:0;overflow:hidden}
html.wb .pf-bildhinweis{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 10px;padding:0;background:transparent;border:0;font-size:13px;color:var(--ink-soft)}
html.wb .pf-bildhinweis svg{flex:none;color:var(--ink-faint)}
html.wb .pf-bildhinweis .pf-fl-link{font-size:13px}
html.wb .pf-msg .mlc-atts{margin-top:12px}
html.wb .pf-fuss{flex:none;display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 16px}
html.wb .pf-fuss.hidden{display:none}
html.wb .pf-verlauf .mlc-replybar{flex:none;margin:6px 0 4px;padding:0;background:transparent;border:0}
html.wb .pf-verlauf .mlc-replybar:not(.hidden){padding-bottom:12px}

/* Fallkarte: schiebt sich über die Mail, angeheftet eine eigene Spalte */
html.wb .pf-fallkarte{position:absolute;top:0;right:0;bottom:0;width:min(340px,100%);z-index:5;display:flex;flex-direction:column;overflow-y:auto;background:var(--surface);box-shadow:var(--shadow)!important}
html.wb .pf-fallkarte.hidden{display:none}
html.wb .pf-fk-kopf{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:8px;padding:10px 12px 10px 18px;border-bottom:1px solid var(--line);background:var(--surface);font-size:14px}
html.wb .pf-fk-kopf b{margin-right:auto;font-weight:700}
html.wb .pf-fk-block{display:grid;gap:5px;padding:12px 18px;border-bottom:1px solid var(--line)}
html.wb .pf-fk-block h3{margin:0;font-size:12.5px;font-weight:650;color:var(--ink-faint)}
html.wb .pf-fk-gross{margin:0;font-size:14px;font-weight:700;color:var(--ink)}
html.wb .pf-fk-klein{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.45}
html.wb .pf-fk-klein.frist{color:var(--wb-warn,#A4461A);font-weight:700}
html.wb .pf-fk-zeile{margin:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;font-size:13px;color:var(--ink-mid)}
html.wb .pf-fk-sig{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:12.5px;color:var(--ink-mid)}
html.wb .pf-fk-fuss{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px 18px}
html.wb .pf-lesen-karte.angeheftet{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto auto minmax(0,1fr)}
html.wb .pf-lesen-karte.angeheftet > .pf-lk,html.wb .pf-lesen-karte.angeheftet > .pf-fallleiste,html.wb .pf-lesen-karte.angeheftet > .pf-verlauf{grid-column:1}
html.wb .pf-lesen-karte.angeheftet > .pf-verlauf{grid-row:3}
html.wb .pf-lesen-karte.angeheftet > .pf-fallkarte{grid-column:2;grid-row:1 / 4;position:static;width:auto;box-shadow:none!important;border-left:1px solid var(--line)}

/* Abfolge der Phasen (DESIGN.md: erledigt grün mit Haken, als Nächstes sandfarbener Ring, gestrichelt dorthin) */
html.wb .pf-abfolge{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
html.wb .pf-abfolge li{position:relative;display:grid;justify-items:center;gap:5px;font-size:10.5px;color:var(--ink-soft);text-align:center;line-height:1.25}
html.wb .pf-abfolge li::before{content:"";position:absolute;top:8px;left:-50%;width:100%;height:2px;background:var(--field-line)}
html.wb .pf-abfolge li:first-child::before{display:none}
html.wb .pf-abfolge li.ok::before{background:var(--accent)}
html.wb .pf-abfolge li.jetzt::before{background:repeating-linear-gradient(90deg,#CC9550 0 4px,transparent 4px 7px)}
html.wb .pf-ab-p{position:relative;z-index:1;width:18px;height:18px;border-radius:50%;border:2px solid var(--field-line);background:var(--surface);display:grid;place-items:center}
html.wb .pf-ab-p svg{width:11px;height:11px}
html.wb .pf-abfolge li.ok .pf-ab-p{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
html.wb .pf-abfolge li.jetzt .pf-ab-p{border-color:#CC9550}
html.wb .pf-abfolge li.jetzt{color:var(--ink);font-weight:650}

/* Stand einer Einheit: Stand-Vokabular aus dem Wohnungsspiegel, bewusst fest */
html.wb .pf-stand{display:inline-flex;align-items:center;padding:2px 7px;font-size:11.5px;font-weight:700;white-space:nowrap}
html.wb .pf-stand-frei{background:#E3F0E8;color:#14513A}
html.wb .pf-stand-res{background:#F6EBD8;color:#6B4313}
html.wb .pf-stand-verk{background:#187A52;color:#FFFFFF}

/* Zuordnen: Auswahl mit Vorschlägen und Suche */
html.wb .pf-pop{position:fixed;z-index:1200;display:flex;flex-direction:column;max-height:min(440px,70vh);background:var(--surface);color:var(--ink);box-shadow:var(--shadow)!important}
html.wb .pf-pop-such{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-faint)}
html.wb .pf-pop-such input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:0}
html.wb .pf-pop-liste{flex:1;min-height:0;overflow-y:auto;padding:4px 0}
html.wb .pf-pop-gruppe{padding:8px 14px 2px;font-size:11.5px;font-weight:650;color:var(--ink-faint)}
html.wb .pf-pop-z{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;width:100%;padding:7px 14px;border:0;background:transparent;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
html.wb .pf-pop-z.an,html.wb .pf-pop-z:hover{background:var(--accent-soft)}
html.wb .pf-pop-ic{padding-top:2px;color:var(--ink-mid)}
html.wb .pf-pop-t{min-width:0}
html.wb .pf-pop-t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-pop-t small{display:block;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-pop-leer{margin:0;padding:14px;font-size:13px;color:var(--ink-soft)}
html.wb .pf-pop-hinweis{margin:6px 0 0;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
html.wb .pf-pop-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:8px 14px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-faint)}
html.wb .pf-pop-fuss .pf-fl-link{font-size:12.5px}
html.wb .pf-pop-tasten{margin-left:auto}
html.wb .mlc-menu-info{margin:0;padding:8px 14px 6px;max-width:280px;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}

/* ---------- Schreiben (Schritt 6, Gestaltung nach dem Entwurf vom 29.10.2026) ----------
   Gemeinsam für Antwort und neue Mail: Felder als Zeilen mit sichtbarer Linie, Formatknöpfe und „Einfügen“, dann die
   weiße Schreibfläche mit dem Text und darunter der Signatur, wie sie ankommt. Die Optionen (Signatur, Zitat, Erinnern,
   Widerrufsbelehrung) stehen als Kästchen darunter, der Fuß ist grau. */
html.wb .pf-feld{position:relative;display:flex;align-items:center;gap:8px;min-height:50px;padding:0 16px;border-bottom:1px solid var(--field-line)}
html.wb .pf-feld.hidden{display:none}
html.wb .pf-feld label,html.wb .pf-ablage-lbl{flex:none;width:64px;font-size:13.5px;color:var(--ink-soft)}
html.wb .pf-feld input{flex:1;min-width:0;height:44px;border:0;outline:none;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);padding:0}
html.wb .pf-feld input::placeholder{color:var(--ink-faint)}
html.wb .pf-feld:focus-within{box-shadow:inset 0 -2px 0 var(--accent)}
html.wb .pf-feld .pf-fl-link{font-size:13px}
html.wb .pf-feld .mlc-sug{left:78px;border-radius:0}
html.wb .pf-werkzeug{display:flex;align-items:center;gap:6px;padding:7px 12px 7px 10px;border-bottom:1px solid var(--field-line)}
html.wb .pf-werkzeug .mlc-fmtbar{border:0;padding:0;margin-right:auto}
html.wb .pf-werkzeug .mlc-fmtbar button{border-radius:0}
html.wb .pf-k kbd{font-family:var(--font-body);font-size:10.5px;font-weight:700;min-width:16px;height:16px;padding:0 4px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink-mid);border:1px solid var(--field-line)}
/* Schreibfläche: Text und Signatur auf einer weißen Fläche; ein Klick ins Leere setzt die Schreibmarke ans Ende (mail.js).
   Das Textfeld ist anfangs eine Zeile hoch und wächst mit dem Text, die Signatur folgt direkt darunter (Flavio,
   29.10.2026: sonst wirkt es, als käme viel Weißraum zwischen Nachricht und Signatur). Die Höhe hält die Fläche. */
html.wb .pf-schreibflaeche{display:flex;flex-direction:column;min-height:190px;padding-bottom:8px;background:var(--surface);cursor:text}
html.wb .pf-text{max-height:none;min-height:60px;margin:0;padding:16px 18px 20px;border:0;background:transparent;font-size:14.5px;line-height:1.62;color:var(--ink);outline:none}
html.wb .pf-text.tall{min-height:60px}
html.wb .pf-text:focus{outline:none}
html.wb .pf-text p{margin:0 0 .6em}
/* Datenfeld: Wert aus der Kalkulation, getönt und unterstrichen. Von Hand geändert, wird er normaler Text. */
html.wb .pf-df{background:var(--wb-hover);box-shadow:inset 0 -1.5px 0 var(--ink-faint);padding:0 3px;font-weight:650;white-space:nowrap}
html.wb .pf-vk{max-width:420px}
/* Signatur im Text: so, wie sie beim Empfänger ankommt (im Dunkelmodus in den Farben der Oberfläche) */
html.wb .pf-sig-text{padding:0 18px 4px;font-size:13px;line-height:1.5;color:#5C6862;cursor:default;overflow-wrap:anywhere}
html.wb .pf-sig-text:empty{display:none}
html.wb .pf-sig-eigen[hidden]{display:none}
html.wb .pf-sig-eigen img{max-width:160px;height:auto}
html.wb .pf-sig-pflicht{margin:12px 0 0;color:#7A847D;font-size:11.5px;line-height:1.5}
html.wb .pf-sig-eigen[hidden] + .pf-sig-pflicht{margin-top:4px}
html.wb[data-theme="dark"] .pf-sig-eigen,html.wb[data-theme="dark"] .pf-sig-eigen *{color:var(--ink-mid)!important}
html.wb[data-theme="dark"] .pf-sig-pflicht{color:var(--ink-soft)}
html.wb .pf-sig-fehlt{margin:8px 0 0;font-size:12.5px;color:var(--wb-warn)}
html.wb .pf-sig-fehlt a{color:inherit;font-weight:650}
html.wb .pf-anh{padding:0 16px 8px}
html.wb .pf-anh:has(.mlc-attchips:empty){display:none}
html.wb .pf-anh .mlc-attchips{display:flex;flex-wrap:wrap;gap:6px}
html.wb .pf-anh .mlc-attchip{border-radius:0;background:var(--wb-hover);color:var(--ink);font-size:12.5px}
/* Optionen als Kästchen mit Beschriftung; gewählt in der zarten Akzentfläche */
html.wb .pf-opts{display:flex;flex-wrap:wrap;gap:8px;padding:4px 16px 14px;background:var(--surface)}
html.wb .pf-opt{display:inline-flex;align-items:center;gap:9px;min-height:34px;padding:5px 12px 5px 9px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink-mid);font:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer}
html.wb .pf-opt:hover{border-color:var(--ink-faint);color:var(--ink)}
html.wb .pf-opt[hidden]{display:none}
html.wb .pf-opt-k{flex:none;width:16px;height:16px;display:grid;place-items:center;border:1.5px solid var(--ink-faint);background:var(--surface);color:var(--accent-ink)}
html.wb .pf-opt-k svg{width:11px;height:11px;visibility:hidden}
html.wb .pf-opt.an{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,var(--field-line));color:var(--accent-dark)}
html.wb .pf-opt.an .pf-opt-k{background:var(--accent);border-color:var(--accent)}
html.wb .pf-opt.an .pf-opt-k svg{visibility:visible}
html.wb .pf-opt:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
html.wb .pf-schreibfuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--field-line);background:var(--wb-soft)}
html.wb .pf-schreibfuss .pf-k{height:38px}
html.wb .pf-schreibfuss .pf-k:not(.pf-k-haupt){background:var(--surface);border:1px solid var(--field-line);color:var(--ink)}
html.wb .pf-schreibfuss .pf-k:not(.pf-k-haupt):hover{border-color:var(--ink-faint)}
html.wb .pf-schreibfuss .pf-k.pf-k-kiton{color:var(--accent-dark)}
html.wb[data-theme="dark"] .pf-schreibfuss .pf-k.pf-k-kiton{color:var(--ink)}
html.wb .pf-tastenhinweis{font-size:12.5px;color:var(--ink-faint);white-space:nowrap}
html.wb .pf-fill{flex:1}
/* Antwort über dem Verlauf: weiße Karte mit Rand in der Akzentfarbe, beim Schreiben kräftiger */
html.wb .pf-antwort{background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 32%,var(--field-line))}
html.wb .pf-antwort:focus-within{border-color:color-mix(in srgb,var(--accent) 70%,var(--field-line))}
html.wb .pf-antwort .pf-feld .pf-ik{margin-left:auto;width:28px;height:28px;background:transparent}
html.wb .pf-antwort .pf-feld .pf-ik:hover{background:var(--wb-hover)}
/* Neue E-Mail: Karte mit Abstand zum Rand über der abgedunkelten Seite (29.10.2026). Ein Klick daneben legt sie unten ab. */
html.wb .pf-panel-hg{position:fixed;inset:0;z-index:899;background:rgba(22,32,27,.22);animation:pf-hg-ein .2s ease-out both}
html.wb[data-theme="dark"] .pf-panel-hg{background:rgba(0,0,0,.5)}
html.wb .pf-panel-hg.aus{display:none}
@keyframes pf-hg-ein{from{opacity:0}to{opacity:1}}
html.wb .pf-panel{position:fixed;top:12px;right:12px;bottom:12px;z-index:900;width:min(700px,calc(100vw - 24px));display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:0 24px 60px rgba(22,32,27,.22),0 0 0 1px rgba(22,32,27,.06)!important}
html.wb[data-theme="dark"] .pf-panel{box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07)!important}
html.wb .pf-pn-kopf{flex:none;display:flex;align-items:flex-start;gap:6px;padding:20px 16px 16px 24px;border-bottom:1px solid var(--field-line);background:var(--surface)}
html.wb .pf-pn-titel{flex:1;min-width:0;display:grid;gap:3px}
html.wb .pf-pn-kopf b{font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
html.wb .pf-pn-von{min-width:0;font-size:13px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-pn-kopf .pf-ik{background:transparent;color:var(--ink-mid);width:34px;height:34px}
html.wb .pf-pn-kopf .pf-ik:hover{background:var(--wb-hover);color:var(--ink)}
html.wb .pf-pn-felder{flex:none;padding:0 24px}
html.wb .pf-panel .pf-feld{padding:0}
html.wb .pf-panel .pf-feld label,html.wb .pf-panel .pf-ablage-lbl{width:78px}
html.wb .pf-ablage{flex-wrap:wrap;gap:6px 10px;font-size:14px;color:var(--ink-mid)}
html.wb .pf-ablage b{color:var(--ink);font-weight:650}
html.wb .pf-ablage:focus-within{box-shadow:none}
html.wb .pf-privat{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink-mid);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
html.wb .pf-privat:hover{border-color:var(--ink-faint);color:var(--ink)}
html.wb .pf-privat.an{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark)}
html.wb .pf-panel .pf-werkzeug{padding:8px 16px 8px 20px}
html.wb .pf-pn-rumpf{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;background:var(--surface)}
html.wb .pf-pn-rumpf>*{flex:none}
html.wb .pf-pn-rumpf>.pf-schreibflaeche{flex:1 0 auto}
html.wb .pf-panel .pf-text{padding:18px 24px 20px}
html.wb .pf-panel .pf-sig-text{padding:0 24px 4px}
html.wb .pf-panel .pf-anh{padding:0 24px 8px}
html.wb .pf-panel .pf-opts{padding:8px 24px 16px}
html.wb .pf-panel .pf-schreibfuss{flex:none;padding:14px 18px 14px 24px}
html.wb .pf-entwurf-link{color:var(--ink-mid)}
html.wb .pf-entwurf-link:hover{color:var(--ink)}
/* Minimiert: nur der Kopf als Leiste unten rechts in der Akzentfarbe, mit Betreff oder Empfänger; ein Klick öffnet die
   Mail wieder. Der Weg dorthin ist animiert (mail.js, flug): eine Fläche .pf-pn-geist fliegt, die Leiste pulsiert einmal. */
html.wb .pf-panel.mini{top:auto;right:24px;bottom:0;width:min(380px,calc(100vw - 32px));border-radius:10px 10px 0 0;background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow)!important}
html.wb .pf-panel.mini>:not(.pf-pn-kopf){display:none}
html.wb .pf-panel.mini .pf-pn-kopf{cursor:pointer;align-items:center;padding:8px 10px 8px 16px;border-bottom:0;background:var(--accent);color:var(--accent-ink)}
html.wb .pf-panel.mini .pf-pn-kopf:hover{background:var(--accent-hover)}
html.wb .pf-panel.mini .pf-pn-titel{display:flex;align-items:baseline;gap:10px}
html.wb .pf-panel.mini .pf-pn-kopf b{flex:none;font-size:14.5px}
html.wb .pf-panel.mini .pf-pn-von{font-size:13px;color:var(--accent-ink);opacity:.82}
html.wb .pf-panel.mini .pf-pn-kopf .pf-ik{width:30px;height:30px;background:transparent;color:var(--accent-ink)}
html.wb .pf-panel.mini .pf-pn-kopf .pf-ik:hover{background:color-mix(in srgb,var(--accent-ink) 18%,transparent)}
html.wb .pf-panel.gelandet::after{content:"";position:absolute;inset:0;pointer-events:none;animation:pf-gelandet .75s ease-out 1}
@keyframes pf-gelandet{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}to{box-shadow:0 0 0 16px color-mix(in srgb,var(--accent) 0%,transparent)}}
html.wb .pf-pn-geist{position:fixed;z-index:901;pointer-events:none;border-radius:12px;box-shadow:var(--shadow)}
html.wb .pf-panel .mlc-fwd{padding:0 24px 8px}
@media (max-width:900px){
  html.wb .pf-panel{top:0;right:0;bottom:0;width:100vw;border-radius:0}
  html.wb .pf-panel.mini{right:0;width:100vw}
  html.wb .pf-pn-felder{padding:0 16px}
  html.wb .pf-feld label,html.wb .pf-ablage-lbl,html.wb .pf-panel .pf-feld label,html.wb .pf-panel .pf-ablage-lbl{width:58px}
  html.wb .pf-panel .pf-text,html.wb .pf-panel .pf-sig-text,html.wb .pf-panel .pf-opts,html.wb .pf-panel .pf-anh{padding-left:16px;padding-right:16px}
  html.wb .pf-tastenhinweis,html.wb .pf-such kbd{display:none}
}
@media (prefers-reduced-motion:reduce){html.wb .pf-panel.gelandet::after,html.wb .pf-panel-hg{animation:none}}

/* ---------- Textbausteine (Schritt 7) ---------- */
/* Feld im Baustein: eine Marke mit Beschriftung, kein Code. Offene Stelle nach dem Einfügen: orange, hält das Senden auf. */
html.wb .pf-feld-marke{display:inline-block;padding:0 5px;background:var(--accent-soft);color:var(--accent-dark);font-weight:650;box-shadow:inset 0 -1.5px 0 var(--accent);white-space:nowrap}
html.wb .pf-df-offen{background:var(--wb-warn-bg);color:var(--wb-warn);box-shadow:inset 0 -1.5px 0 var(--wb-warn)}
html.wb .acc-bst-liste{list-style:none;margin:0 0 12px;padding:0}
html.wb .acc-bst-z{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
html.wb .acc-bst-z:first-child{border-top:0}
html.wb .acc-bst-z div{flex:1;min-width:0;display:grid;gap:1px}
html.wb .acc-bst-z b{font-weight:650;color:var(--ink)}
html.wb .acc-bst-z span{font-size:12.5px;color:var(--ink-soft)}
html.wb .acc-bst-werkzeug{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:5px 6px;border:1px solid var(--field-line);border-bottom:0;background:var(--wb-soft)}
html.wb .acc-bst-werkzeug .mlc-fmtbar{border:0;padding:0;flex:none}
html.wb .acc-bst-werkzeug select{flex:0 1 190px;min-width:150px;height:32px;margin-left:auto;font-size:13px}
html.wb .acc-bst-text{min-height:160px;max-height:40vh;overflow-y:auto;padding:12px 14px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font-size:14px;line-height:1.6;outline:none}
html.wb .acc-bst-text:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html.wb .acc-bst-text p{margin:0 0 .6em}
html.wb #bstWeg{color:var(--wb-warn);border-color:var(--wb-warn-line)}

/* Kundenakte: woran eine Mail im Postfach hängt (blass, wie der Hinweis in der Liste) */
html.wb .ak-mfall{flex:none;max-width:220px;font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Befehlspalette (Schritt 9) ---------- */
html.wb .pf-palette-hg{position:fixed;inset:0;z-index:1300;display:flex;justify-content:center;align-items:flex-start;padding:14vh 16px 16px;background:rgba(22,32,27,.18)}
html.wb[data-theme="dark"] .pf-palette-hg{background:rgba(0,0,0,.45)}
html.wb .pf-palette{width:min(560px,100%);max-height:min(520px,72vh);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)!important}
html.wb .pf-pal-such{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);color:var(--ink-soft)}
html.wb .pf-pal-such input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:15px;font-weight:600;color:var(--ink);padding:0}
html.wb .pf-palette kbd{font-family:var(--font-body);font-size:11px;font-weight:700;min-width:19px;height:19px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--surface);color:var(--ink-mid);border:1px solid var(--field-line)}
html.wb .pf-pal-liste{flex:1;min-height:0;overflow-y:auto;padding:4px 0}
html.wb .pf-pal-z{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;padding:8px 16px;border:0;background:transparent;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
html.wb .pf-pal-z.an,html.wb .pf-pal-z:hover{background:var(--accent-soft)}
html.wb .pf-pal-z .pf-pop-t b{font-size:14px;font-weight:600}
html.wb .pf-pal-fuss{display:flex;flex-wrap:wrap;gap:6px 14px;padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-faint)}

/* ---------- Schmal ---------- */
/* Ordnerwahl im Kopf der Liste, wenn die Seitenleiste keine Ordner zeigt. */
html.wb .ib-collapsed .pf-ordnername{display:none}
html.wb .ib-collapsed .pf-ordnerwahl{display:inline-flex}
@media (max-width:1180px){
  html.wb .pf-zwei{grid-template-columns:minmax(280px,330px) minmax(0,1fr)}
}
@media (max-width:900px){
  html.wb .ib-nav-pf{display:none}
  html.wb .pf-ordnername{display:none}
  html.wb .pf-ordnerwahl{display:inline-flex}
  html.wb .mlc.pf{height:auto;min-height:calc(var(--wb-vh) - 120px)}
  html.wb .pf-titel{font-size:24px}
  html.wb .pf-sub{font-size:13.5px}
  html.wb .pf-abrufen span{display:none}
  html.wb .pf-abrufen{width:44px;padding:0;justify-content:center}
  /* Eine Fläche: ohne Auswahl die Liste, mit Auswahl die Mail (mit Zurück). */
  html.wb .pf-zwei{display:flex;flex-direction:column}
  html.wb .pf-zwei:not(.has-thread) .pf-lesen-karte{display:none}
  html.wb .pf-zwei.has-thread .pf-liste-karte{display:none}
  html.wb .pf-liste-karte,html.wb .pf-lesen-karte{flex:1;min-height:60vh}
  html.wb .pf-zwei .mlc-back{display:inline-grid}
  html.wb .pf-lk{padding:12px 14px 8px;flex-wrap:wrap;row-gap:10px}
  html.wb .pf-lk-text{order:2;flex-basis:100%}
  html.wb .pf-lk-akt{margin-left:auto}
  html.wb .pf-fallleiste{margin:0 14px}
  html.wb .pf-fl-rechts{margin-left:0}
  html.wb .pf-fl-haupt{display:grid;gap:2px}
  html.wb .pf-fl-haupt .pf-fl-teil::before{display:none}
  html.wb .pf-verlauf{padding:8px 14px 16px}
  html.wb .pf-lk-akt .pf-ik{width:36px;height:36px}
  html.wb .pf-zeile{min-height:62px}
}
@media (prefers-reduced-motion:reduce){html.wb .pf-nweiter svg{transition:none}}

/* ---------- Rechtliche Anlagen (Etappe 3, Schritt 7) ---------- */
html.wb .acc-ra-teil{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--line)}
html.wb .acc-ra-teil:first-of-type{border-top:0;padding-top:4px}
html.wb .acc-ra-teil > .btn{justify-self:start}
html.wb .acc-ra-datei{padding:10px 12px;border:1px solid var(--line);background:var(--surface)}
html.wb .acc-ra-datei .btn{flex:none}
html.wb .acc-ra-leer{margin:0;font-size:.88rem}
html.wb .acc-ra-hinweis{margin:0;font-size:.84rem}
html.wb .acc-ra-text{min-height:110px}
html.wb .acc-ra-lesen{background:var(--wb-soft)}
html.wb .acc-ra-fuss{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.84rem}
html.wb .acc-ra-ds{margin:0;font-size:.9rem;color:var(--ink-mid)}
html.wb .acc-ra-ds a:not(.ak-link){color:var(--accent-dark)}
html.wb .acc-ra-ds .ak-link{margin-left:6px}
@media (max-width:600px){html.wb .acc-ra-datei{flex-wrap:wrap}html.wb .acc-ra-datei div{flex-basis:100%}}

/* ---------- Interessenten-Assistent (Etappe 3, Schritt 8) ---------- */
html.wb .pf-fallleiste[hidden]{display:none}
html.wb .pf-ass{flex:none;margin:4px 0 14px;border:1px solid var(--line);background:var(--surface)}
html.wb .pf-ass-kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;padding:11px 16px;background:var(--wb-hover);font-size:13px;color:var(--ink-soft)}
html.wb .pf-ass-kopf b{font-size:14px;font-weight:700;color:var(--ink)}
html.wb .pf-ass-rumpf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
html.wb .pf-ass-erkannt,html.wb .pf-ass-antwort{padding:14px 16px;display:grid;align-content:start;gap:10px;min-width:0}
html.wb .pf-ass-antwort{border-left:1px solid var(--line)}
html.wb .pf-ass h3,html.wb .pf-ass h4{margin:0;font-size:12.5px;font-weight:650;color:var(--ink-faint)}
html.wb .pf-ass h4{margin-top:4px}
html.wb .pf-ass dl{margin:0;display:grid;gap:7px}
html.wb .pf-ass-z{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;font-size:13.5px;line-height:1.4}
html.wb .pf-ass-z dt{color:var(--ink-soft)}
html.wb .pf-ass-z dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
html.wb .pf-ass-z small{display:block;margin-top:2px;color:var(--ink-soft);font-size:12.5px}
html.wb .pf-ass-obj{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
html.wb .pf-ass-nachricht{margin:0;padding:9px 12px;background:var(--wb-hover);color:var(--ink-mid);font-size:13px;line-height:1.5;white-space:pre-line;max-height:9.5em;overflow:auto}
html.wb .pf-ass-marke{margin:0;display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-mid)}
html.wb .pf-ass-marke svg{flex:none;color:var(--accent-dark)}
html.wb .pf-ass-passt{margin:0;padding:0;list-style:none;display:grid;gap:4px}
html.wb .pf-ass-passt li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;background:var(--wb-hover);font-size:13px;color:var(--ink-mid)}
html.wb .pf-ass-betreff{margin:0;display:flex;gap:10px;font-size:13.5px;color:var(--ink)}
html.wb .pf-ass-betreff span{width:56px;flex:none;color:var(--ink-soft)}
html.wb .pf-ass-betreff b{font-weight:650}
/* Die Vorschau zeigt die Mail, wie sie ankommt: Mails sind immer hell. */
html.wb .pf-ass-vorschau{max-height:300px;overflow:auto;padding:12px 14px;border:1px solid var(--line);background:#FFFFFF;color:#1C2420;font-size:14px;line-height:1.55}
html.wb .pf-ass-vorschau p{margin:0 0 .7em}
html.wb .pf-ass-vorschau ul{margin:0 0 .7em;padding-left:22px}
html.wb .pf-ass-vorschau a{color:#136241;cursor:default}
html.wb .pf-ass-vorschau td,html.wb .pf-ass-vorschau th{background:transparent;color:inherit}
html.wb .pf-ass-klein{margin:0;font-size:12.5px;color:var(--ink-soft)}
html.wb .pf-ass-opt:has(> [hidden]:only-child){display:none}
html.wb .pf-ass-hinweise{margin:0;padding:8px 12px;list-style:none;display:grid;gap:4px;background:var(--wb-warn-bg);color:var(--wb-warn);font-size:12.5px;line-height:1.45}
html.wb .pf-ass-hinweise .pf-fl-link{color:inherit;text-decoration:underline;text-underline-offset:2px}
html.wb .pf-ass-fuss{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
html.wb .pf-ass-fuss > .pf-fl-blass{margin-right:auto;font-size:13px}
html.wb .pf-ass-fuss .pf-k[disabled]{opacity:.5;cursor:default}
@media (max-width:900px){
  html.wb .pf-ass-rumpf{grid-template-columns:minmax(0,1fr)}
  html.wb .pf-ass-antwort{border-left:0;border-top:1px solid var(--line)}
  html.wb .pf-ass-fuss .pf-k{flex:1 1 auto;justify-content:center}
}

/* ---------- Dokumente aus Objekten einfügen („Durchsuchen“, 28.10.2026) ---------- */
html.wb .pf-pop-such .pf-k-klein{flex:none;gap:6px;color:var(--ink-mid)}
html.wb .pf-pop-such .pf-k-klein svg path{stroke:currentColor}
html.wb .pf-abl-hg{position:fixed;inset:0;z-index:1250;display:flex;align-items:center;justify-content:center;padding:24px 16px;background:rgba(22,32,27,.28)}
html.wb[data-theme="dark"] .pf-abl-hg{background:rgba(0,0,0,.5)}
html.wb .pf-abl{width:min(940px,100%);height:min(660px,100%);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);box-shadow:var(--shadow)!important}
html.wb .pf-abl-kopf{display:flex;align-items:center;gap:12px;padding:16px 14px 10px 20px}
html.wb .pf-abl-kopf h3{flex:1;margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
html.wb .pf-abl-zu{width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-mid);cursor:pointer}
html.wb .pf-abl-zu:hover{background:var(--wb-hover)}
html.wb .pf-abl-such{display:flex;align-items:center;gap:8px;margin:0 20px 14px;height:38px;padding:0 12px;border:1px solid var(--field-line);background:var(--surface);cursor:text}
html.wb .pf-abl-such:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html.wb .pf-abl-such input{flex:1;min-width:0;height:36px;border:0;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:0}
html.wb .pf-abl-rumpf{flex:1;min-height:0;display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);border-top:1px solid var(--line)}
html.wb .pf-abl-obj{overflow-y:auto;border-right:1px solid var(--line);padding:4px 0 10px;background:var(--wb-soft)}
html.wb .pf-abl-doks{overflow-y:auto;padding:0 0 12px}
html.wb .pf-abl-gruppe{display:flex;align-items:baseline;gap:10px;padding:12px 16px 4px;font-size:11.5px;font-weight:650;color:var(--ink-faint)}
html.wb .pf-abl-gruppe span{flex:1;min-width:0}
html.wb .pf-abl-gruppe .pf-fl-link{font-size:12.5px;font-weight:600}
/* Objektzeile als Ordner: aufklappen, Name (öffnet die Dokumente rechts), Anzahl der Dokumente */
html.wb .pf-abl-oz{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:center;gap:6px;padding:0 8px 0 6px}
html.wb .pf-abl-oz.kind{padding-left:24px}
html.wb .pf-abl-oz.aktiv{background:var(--accent-soft)}
html.wb .pf-abl-oz:not(.aktiv):hover{background:var(--wb-hover)}
html.wb .pf-abl-dz input{width:16px;height:16px;margin:0;accent-color:var(--accent);cursor:pointer}
html.wb .pf-abl-auf{width:22px;height:22px;display:grid;place-items:center;border:0;padding:0;background:transparent;color:var(--ink-faint);cursor:pointer}
html.wb .pf-abl-auf svg{transition:transform .15s}
html.wb .pf-abl-auf.auf svg{transform:rotate(90deg)}
html.wb span.pf-abl-auf{cursor:default}
html.wb .pf-abl-oname{display:flex;align-items:center;gap:8px;min-width:0;min-height:36px;padding:6px 0;border:0;background:transparent;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
html.wb .pf-abl-oname>span:first-child{flex:1;min-width:0}
html.wb .pf-abl-oname b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-abl-oz.aktiv .pf-abl-oname b{font-weight:700}
html.wb .pf-abl-oname small{display:block;font-size:11.5px;color:var(--ink-soft)}
html.wb .pf-abl-n{flex:none;min-width:20px;height:20px;padding:0 6px;display:inline-grid;place-items:center;font-size:11.5px;font-weight:650;color:var(--ink-mid);background:var(--surface);border:1px solid var(--line)}
/* Rechts: Kopf des Objekts, darunter die Dokumente */
html.wb .pf-abl-dkopf{display:flex;flex-direction:column;gap:2px;padding:14px 16px 12px;border-bottom:1px solid var(--line)}
html.wb .pf-abl-dkopf b{font-size:15px;font-weight:700}
html.wb .pf-abl-dkopf small{font-size:12.5px;color:var(--ink-soft)}
html.wb .pf-abl-dz{display:flex;align-items:center;gap:4px;padding:0 10px 0 16px}
html.wb .pf-abl-dz:hover{background:var(--wb-hover)}
html.wb .pf-abl-dz label{flex:1;min-width:0;display:grid;grid-template-columns:16px 18px minmax(0,1fr);align-items:center;gap:10px;padding:8px 0;cursor:pointer}
html.wb .pf-abl-dic{display:grid;place-items:center;color:var(--ink-mid)}
html.wb .pf-abl-dt{min-width:0}
html.wb .pf-abl-dt b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-abl-dt small{display:block;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .pf-abl-auf-tab{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--ink-faint)}
html.wb .pf-abl-auf-tab:hover{color:var(--accent);background:var(--surface)}
html.wb .pf-abl-fuss{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 20px;border-top:1px solid var(--line)}
html.wb .pf-abl-zahl{flex:1;min-width:0}
html.wb .pf-abl-zahl b{display:block;font-size:13.5px;font-weight:650}
html.wb .pf-abl-zahl small{display:block;font-size:12px;color:var(--ink-soft)}
html.wb .pf-abl-fuss .pf-k-haupt:disabled{opacity:.45;cursor:default}
@media (max-width:700px){
  html.wb .pf-abl-hg{padding:0;align-items:stretch}
  html.wb .pf-abl{height:100%}
  html.wb .pf-abl-rumpf{grid-template-columns:1fr;grid-template-rows:minmax(0,42%) minmax(0,1fr)}
  html.wb .pf-abl-obj{border-right:0;border-bottom:1px solid var(--line)}
  html.wb .pf-abl-fuss{flex-wrap:wrap}
  html.wb .pf-abl-zahl{flex-basis:100%}
  html.wb .pf-abl-fuss .pf-k{flex:1;justify-content:center}
  html.wb .pf-pop-such .pf-k-klein span{display:none}
}

/* ---------- Formatierleiste beim Schreiben (28.10.2026) ----------
   Mehr Knöpfe: Die Leiste bricht um, statt „Einfügen“ zu verdrängen. Vollbild macht die neue Mail breit. */
html.wb .pf-werkzeug{align-items:flex-start}
html.wb .pf-werkzeug .mlc-fmtbar{flex:1 1 0;flex-wrap:wrap;row-gap:2px;min-width:0}
html.wb .pf-werkzeug>.pf-k{flex:none}
html.wb .pf-werkzeug .mlc-fmtbar button{width:28px;height:28px}
html.wb .pf-werkzeug .mlc-fmtbar-sep{margin:0 4px}
html.wb .pf-panel.gross{width:min(1100px,calc(100vw - 32px))}
html.wb .ed-menue,html.wb .ed-dlg,html.wb .ed-dlg-art label,html.wb .ed-dlg-f input,html.wb .ed-bild{border-radius:0}

/* „Einfügen“ beim Schreiben (Flavio, 28.10.2026: auffälliger): weiß mit Rahmen in der Akzentfarbe auf der blassen
   Akzentfläche, Plus davor; beim Überfahren voll in der Akzentfarbe. Senden bleibt die Hauptaktion. */
html.wb .pf-k.pf-einfuegen-k{height:30px;padding:0 9px 0 8px;gap:6px;background:var(--surface);color:var(--accent-dark);border:1.5px solid var(--accent);font-weight:700}
html.wb .pf-k.pf-einfuegen-k svg{width:13px;height:13px}
html.wb .pf-k.pf-einfuegen-k:hover{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
html.wb .pf-k.pf-einfuegen-k:hover kbd{background:transparent;color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent-ink) 55%,transparent)}
html.wb .pf-k.pf-einfuegen-k:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html.wb[data-theme="dark"] .pf-k.pf-einfuegen-k:not(:hover){color:var(--ink)}

/* ---------- Postfach freigeben (Etappe 4, Einstellungen) ---------- */
html.wb .acc-mitglied-zahl{font-size:12.5px;font-weight:650;color:var(--ink-soft)}
/* Leere Karte (kein Postfach, kein Hauptkonto): ohne Trennlinie danach, sonst stehen zwei Linien übereinander. */
.acc-card > div:empty + .acc-card-hr{display:none}
html.wb .acc-mitglieder{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:6px}
html.wb .acc-mitglied{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--field-line);background:var(--surface);cursor:pointer}
html.wb .acc-mitglied:hover{border-color:var(--ink-faint)}
html.wb .acc-mitglied:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
html.wb .acc-mitglied input{width:16px;height:16px;margin:0;accent-color:var(--accent);flex:none}
html.wb .acc-mitglied span{min-width:0}
html.wb .acc-mitglied b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.wb .acc-mitglied small{display:block;font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Seitenleiste: weitere Postfächer als eine Zeile */
html.wb .pf-npostfach .pf-nname{font-weight:600}

/* ---------- Verlauf teilen (Etappe 4, Schritt 4) ---------- */
html.wb .pf-abl.pf-teilen{width:min(520px,100%);height:auto;max-height:100%}
html.wb .pf-teilen-rumpf{padding:2px 20px 16px;overflow:auto}
html.wb .pf-teilen-text{margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
html.wb .pf-teilen-liste{display:grid;gap:6px;margin-bottom:14px}
html.wb .pf-teilen-zugang{opacity:.6;cursor:default}
html.wb .pf-teilen-zugang:hover{border-color:var(--field-line)}
html.wb .pf-teilen-notiz{display:block}
html.wb .pf-teilen-notiz span{display:block;margin-bottom:6px;font-size:12.5px;font-weight:650;color:var(--ink-soft)}
html.wb .pf-teilen-notiz textarea{display:block;width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.45;resize:vertical}
html.wb .pf-teilen-notiz textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
html.wb .pf-lk-geteilt::before{content:"·";margin-right:10px;color:var(--ink-faint)}
html.wb .pf-geteilt{flex:none;display:flex;gap:10px;align-items:flex-start;margin:0 24px 8px;padding:9px 12px;background:var(--accent-soft);color:var(--ink);font-size:13.5px;line-height:1.45}
html.wb .pf-geteilt > svg{flex:none;margin-top:2px;color:var(--accent)}
@media (max-width:700px){ html.wb .pf-geteilt{margin:0 14px 8px} }

/* ---------- Interne Notizen (Etappe 4, Schritt 5) ----------
   Hinweisfläche in Bronze (--bronze-100, im Dunkeln dunkles Bronze): nie mit Kundentext verwechselbar. */
/* Zeitleiste (29.10.2026, nach dem Entwurf): links eine Linie mit Kürzeln und Zeichen, rechts Mails, Notizen, Telefonate */
html.wb .pf-zeitleiste{position:relative;display:flex;flex-direction:column}
html.wb .pf-zeitleiste::before{content:"";position:absolute;left:17px;top:30px;bottom:20px;width:1px;background:var(--field-line)}
html.wb .pf-zeitleiste:not(:has(.pf-zl + .pf-zl))::before{display:none}
html.wb .pf-zl{position:relative;flex:none;padding-left:52px}
html.wb .pf-zl > .pf-av,html.wb .pf-zl-ic{position:absolute;left:0;top:12px;z-index:1;width:36px;height:36px}
html.wb .pf-zl-ic{display:grid;place-items:center;border-radius:50%;background:var(--wb-hover);color:var(--ink-mid);box-shadow:0 0 0 4px var(--surface)!important}
html.wb .pf-zl > .pf-av{box-shadow:0 0 0 4px var(--surface)!important}
html.wb .pf-zl-notiz .pf-zl-ic{background:var(--bronze-100);color:var(--bronze-ink)}
html.wb .pf-zl-sys .pf-zl-ic{left:5px;top:9px;width:26px;height:26px}
html.wb .pf-zl-sys .pf-zl-ic svg{width:13px;height:13px}
html.wb .pf-zl-alt > .pf-av{top:6px;left:4px;width:28px;height:28px;font-size:11px}
html.wb .pf-av.eigen{background:var(--accent-soft);color:var(--accent-dark)}
html.wb .pf-zl-notiz{padding-top:12px;padding-bottom:6px}
html.wb .pf-notizen-kopf{display:inline-flex;align-items:center;gap:6px;min-height:36px;border:0;background:transparent;padding:0;font:inherit;font-size:13.5px;color:var(--bronze-ink);cursor:pointer}
html.wb .pf-notizen-kopf b{font-weight:700}
html.wb .pf-notizen-kopf span{font-weight:600}
html.wb .pf-notizen-kopf svg{transition:transform .15s}
html.wb .pf-notizen-kopf svg polyline{stroke:currentColor}
html.wb .pf-notizen-kopf[aria-expanded="true"] svg{transform:rotate(180deg)}
html.wb .pf-notizen{margin:4px 0 8px;padding:2px 18px;border-radius:10px;background:var(--bronze-100)}
html.wb .pf-notizen .pf-notiz{margin:0;padding:12px 0;background:transparent;border-top:1px solid color-mix(in srgb,var(--bronze-ink) 16%,transparent)}
html.wb .pf-notizen .pf-notiz:first-child{border-top:0}
html.wb .pf-notizen .pf-notiz.weg{border:0;border-top:1px solid color-mix(in srgb,var(--bronze-ink) 16%,transparent)}
html.wb .pf-notizen .pf-notiz-kopf time{margin-left:0}
html.wb .pf-notizen .pf-notiz-weg{margin-left:auto}
html.wb .pf-notiz{flex:none;margin:10px 0;padding:10px 12px 11px;background:var(--bronze-100);color:var(--ink)}
html.wb .pf-notiz-kopf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12.5px;color:var(--bronze-ink)}
html.wb .pf-notiz-kopf svg{flex:none}
html.wb .pf-notiz-kopf b{font-weight:700}
html.wb .pf-notiz-art{font-weight:600}
html.wb .pf-notiz-kopf time{margin-left:auto;color:var(--bronze-ink);opacity:.8}
html.wb .pf-notiz-weg{border:0;background:transparent;padding:0 0 0 6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--bronze-ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
html.wb .pf-notiz-weg:hover{color:var(--red)}
html.wb .pf-notiz-text{margin:6px 0 0;font-size:14px;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
html.wb .pf-notiz.weg{background:transparent;border:1px dashed var(--line)}
html.wb .pf-notiz.weg .pf-notiz-text{color:var(--ink-faint);font-style:italic;font-size:13px}
html.wb .pf-erw{font-weight:700;color:var(--bronze-ink)}
html.wb .pf-k-notiz{margin-left:auto}
html.wb .pf-notiz-feld{flex:none;position:relative;margin:4px 0 10px}
html.wb .pf-notiz-ein{padding:10px 12px 12px;background:var(--bronze-100)}
html.wb .pf-notiz-ein textarea{display:block;width:100%;box-sizing:border-box;margin-top:8px;padding:9px 11px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.5;resize:vertical}
html.wb .pf-notiz-ein textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
html.wb .pf-notiz-fuss{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
html.wb .pf-notiz-fuss .pf-k-haupt:disabled{opacity:.45;cursor:default}
html.wb .pf-notiz-fuss kbd{margin-left:8px;font:inherit;font-size:11px;opacity:.75}
html.wb .pf-notiz-vorschlag{position:absolute;left:12px;z-index:5;min-width:220px;max-width:calc(100% - 24px);margin-top:4px;padding:4px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
html.wb .pf-notiz-wer{display:block;width:100%;padding:7px 10px;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);text-align:left;cursor:pointer}
html.wb .pf-notiz-wer:hover,html.wb .pf-notiz-wer.an{background:var(--accent-soft)}

/* ---------- Zuweisen und „antwortet gerade“ (Etappe 4, Schritt 6) ---------- */
html.wb .pf-zuweisung{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:0;font:inherit;font-size:13px;color:var(--ink-soft);cursor:pointer}
html.wb .pf-zuweisung::before{content:"·";margin-right:5px;color:var(--ink-faint)}
html.wb .pf-zuweisung:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
html.wb .pf-zuweisung.an{color:var(--ink);font-weight:600}
html.wb .pf-zzu{display:inline-block;margin-right:6px;padding:0 6px;background:var(--accent-soft);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
html.wb .pf-schreibt{flex:none;display:flex;align-items:center;gap:8px;margin:0 24px 8px;padding:7px 12px;background:var(--wb-hover);color:var(--ink-mid);font-size:13px}
html.wb .pf-schreibt[hidden]{display:none}
html.wb .pf-schreibt svg{flex:none}
html.wb .pf-sysz{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 0;font-size:13px;color:var(--ink-soft)}
html.wb .pf-sysz svg{flex:none}
html.wb .pf-sysz time{margin-left:auto;white-space:nowrap}
@media (max-width:700px){ html.wb .pf-schreibt{margin:0 14px 8px} }

/* ---------- Abwesenheit (Etappe 4, Schritt 7, Einstellungen) ---------- */
html.wb .acc-abw-notiz{margin-top:12px}
html.wb .acc-abw-schalter{display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
html.wb .acc-abw-notiz textarea{display:block;width:100%;box-sizing:border-box;margin-top:10px;padding:9px 11px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.5;resize:vertical}
html.wb .acc-abw-notiz textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
html.wb .acc-abw-notiz textarea[hidden]{display:none}

/* ---------- Kanäle: geteilter Vorgang und Kundenportal (Etappe 4, Schritt 8) ---------- */
html.wb .pf-kanal-hinweis{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 24px;padding:8px 12px;background:var(--wb-hover);font-size:13px;line-height:1.45;color:var(--ink-mid)}
html.wb .pf-kanal-hinweis > svg{flex:none}
html.wb .pf-kanal-hinweis > span{flex:1;min-width:220px}
html.wb .pf-kanal-antwort{flex:none;margin:6px 0 10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
html.wb .pf-kanal-antwort textarea{display:block;width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.5;resize:vertical}
html.wb .pf-kanal-antwort textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
html.wb .pf-kanal-fuss{display:flex;justify-content:flex-end;margin-top:8px}
html.wb .pf-kanal-fuss .pf-k-haupt:disabled{opacity:.45;cursor:default}
@media (max-width:700px){ html.wb .pf-kanal-hinweis{margin:0 14px} }

/* ---------- Telefonnotizen (Etappe 4, Schritt 9) ---------- */
html.wb .pf-tel{flex:none;margin:12px 0 8px;padding:10px 14px 11px;border:1px solid var(--field-line);border-radius:10px;background:var(--surface);color:var(--ink)}
html.wb .pf-tel .pf-notiz-kopf{color:var(--ink-mid)}
html.wb .pf-tel .pf-notiz-kopf time{color:var(--ink-soft)}
html.wb .pf-tel-richtung{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
html.wb .pf-tel-richtung label{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--field-line);background:var(--surface);font-size:13.5px;cursor:pointer}
html.wb .pf-tel-richtung label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
html.wb .pf-tel-richtung input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
html.wb .pf-tel-bis{margin-top:12px}
html.wb .pf-tel-bis input{display:block;padding:8px 10px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px}

/* ---------- KI im Postfach (Etappe 5): schmale Zeile über dem Verlauf, KI-Stern in Akzentfarbe ---------- */
html.wb .pf-ki{flex:none;display:grid;gap:6px;margin:12px 24px 0}
html.wb .pf-ki-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 8px 6px 12px;background:var(--wb-hover);font-size:13px;color:var(--ink-mid);min-height:40px}
html.wb .pf-ki-zeile > span:not(.ki-stern){flex:1 1 220px;min-width:0}
html.wb .pf-ki-zeile b{color:var(--ink);font-weight:650}
html.wb .pf-ki .ki-stern{color:var(--accent);margin-right:0}
html.wb .pf-ki-weg{width:28px;height:28px;background:transparent}
html.wb .pf-ki-kurz{display:flex;gap:10px;align-items:flex-start;margin:0;padding:9px 12px;background:var(--wb-hover);font-size:13.5px;line-height:1.5;color:var(--ink)}
html.wb .pf-ki-kurz .ki-stern{margin-top:1px}
html.wb .pf-ki-link{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px;border:0;background:none;font:inherit;font-size:13px;font-weight:650;color:var(--accent-dark);cursor:pointer}
html.wb .pf-ki-link:hover{text-decoration:underline;text-underline-offset:3px}
html.wb .pf-ki-link:disabled{color:var(--ink-soft);cursor:default;text-decoration:none}
html.wb .pf-ki-link:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
html.wb #mlcReplyKi .ki-stern{color:var(--accent);margin-right:0}
@media (max-width:900px){ html.wb .pf-ki{margin:8px 14px 0} }

/* KI-Knöpfe: Akzentfläche mit Stern. In der Zeile „Erkannt“ voll (Hauptvorschlag), im Antwortfuß getönt neben „Senden“. */
html.wb .pf-k.pf-k-ki{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);gap:7px;padding:0 12px 0 10px}
html.wb .pf-k.pf-k-ki:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
html.wb .pf-ki .pf-k-ki .ki-stern,html.wb .pf-k-ki .ki-stern{color:inherit;margin-right:0;width:1.35em;height:1.35em}
html.wb .pf-k.pf-k-kiton{gap:7px}
html.wb .pf-k-ki:hover .ki-stern,html.wb .pf-k-kiton:hover .ki-stern{animation:pf-ki-pop .55s ease-out}
html.wb .pf-ki-neu{animation:pf-ki-ein .3s ease-out both}
html.wb .pf-ki-neu .pf-k-ki .ki-stern{animation:pf-ki-pop .7s .25s ease-out both}
@keyframes pf-ki-ein{from{opacity:0}to{opacity:1}}
@keyframes pf-ki-pop{0%{transform:scale(.55) rotate(-35deg)}60%{transform:scale(1.18) rotate(8deg)}100%{transform:none}}

/* Schreibfläche, solange die KI den Entwurf schreibt: steht an der Stelle des Antwortfelds, im Fokus-Rahmen. */
html.wb .pf-ki-warte{margin:2px 12px 10px;padding:14px 16px 20px;min-height:140px;background:var(--surface);border:1px solid var(--accent);box-shadow:0 0 0 1px var(--accent);animation:pf-ki-ein .2s ease-out both}
html.wb .pf-ki-warte-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px}
html.wb .pf-ki-warte-kopf b{flex:1;min-width:0;font-size:14.5px;font-weight:650;color:var(--ink)}
html.wb .pf-ki-warte-kopf .pf-fl-link{flex:none}
html.wb .pf-ki-funkeln{flex:none;width:24px;height:24px;fill:var(--accent);overflow:visible}
html.wb .pf-ki-funkeln path{transform-box:fill-box;transform-origin:center;animation:pf-ki-gross 1.8s ease-in-out infinite}
html.wb .pf-ki-funkeln .k{animation-name:pf-ki-klein}
@keyframes pf-ki-gross{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.72) rotate(90deg)}}
@keyframes pf-ki-klein{0%,100%{transform:scale(.55) rotate(0)}50%{transform:scale(1.25) rotate(-90deg)}}
html.wb .pf-ki-schritte{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 18px;padding:0;list-style:none;font-size:12.5px;color:var(--ink-soft)}
html.wb .pf-ki-schritte li{display:inline-flex;align-items:center;gap:7px;transition:color .25s}
html.wb .pf-ki-schritte li::before{content:"";flex:none;box-sizing:border-box;width:11px;height:11px;border:1.5px solid var(--ink-faint);transition:background .25s,border-color .25s}
html.wb .pf-ki-schritte li.jetzt{color:var(--ink)}
html.wb .pf-ki-schritte li.jetzt::before{border-color:var(--accent);background:linear-gradient(var(--accent),var(--accent)) center/5px 5px no-repeat;animation:pf-ki-puls 1s ease-in-out infinite}
html.wb .pf-ki-schritte li.fertig{color:var(--ink-mid)}
html.wb .pf-ki-schritte li.fertig::before{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.6 8.4 2.9 2.9 5.9-6' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center/9px 9px no-repeat}
@keyframes pf-ki-puls{50%{background-size:9px 9px}}
html.wb .pf-ki-papier{display:grid;gap:13px;max-width:640px;transition:opacity .4s}
html.wb .pf-ki-papier.pf-ki-blass{opacity:0}
html.wb .pf-ki-papier i{position:relative;display:block;height:8px;width:0;background:color-mix(in srgb,var(--accent) 17%,var(--surface));transition:width .5s cubic-bezier(.3,.7,.3,1)}
html.wb .pf-ki-papier i.an{width:var(--w)}
html.wb .pf-ki-papier i.leer{height:0;margin-top:-3px}
html.wb .pf-ki-papier.pf-ki-zurueck i{transition:none}
html.wb .pf-ki-papier i.jetzt::after{content:"";position:absolute;right:-7px;top:-4px;width:2px;height:16px;background:var(--accent);animation:pf-ki-strich .7s steps(1) infinite}
@keyframes pf-ki-strich{50%{opacity:0}}
/* Fertig: der Entwurf erscheint Absatz für Absatz von oben */
html.wb .pf-text.pf-ki-auf > *{animation:pf-ki-absatz .42s cubic-bezier(.25,.8,.3,1) both;animation-delay:calc(var(--n,0) * 90ms)}
@keyframes pf-ki-absatz{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
html.wb .pf-ki-entwurf{display:flex;align-items:flex-start;gap:8px 10px;margin:-4px 12px 10px;font-size:12.5px;line-height:1.45;color:var(--ink-mid);animation:pf-ki-ein .3s ease-out both}
html.wb .pf-ki-entwurf .ki-stern{color:var(--accent);margin:0;vertical-align:0}
html.wb .pf-ki-entwurf span:not(.ki-stern){flex:1 1 auto;min-width:0;padding-top:1px}
html.wb .pf-ki-entwurf .pf-fl-link{flex:none;font-size:12.5px}
@media (prefers-reduced-motion:reduce){
  html.wb .pf-ki-neu,html.wb .pf-ki-neu .ki-stern,html.wb .pf-k-ki:hover .ki-stern,html.wb .pf-k-kiton:hover .ki-stern,html.wb .pf-ki-warte,
  html.wb .pf-ki-funkeln path,html.wb .pf-ki-schritte li.jetzt::before,html.wb .pf-ki-papier i.jetzt::after,html.wb .pf-text.pf-ki-auf > *,html.wb .pf-ki-entwurf{animation:none}
  html.wb .pf-ki-papier i{transition:none}
}

/* Einstellungen › Postfach: Hinweise für Entwürfe wie die übrigen Textfelder der Seite */
html.wb .acc-ki-text{display:block;width:100%;box-sizing:border-box;min-height:96px;padding:10px 12px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:1.55;resize:vertical}
html.wb .acc-ki-text::placeholder{color:var(--ink-soft)}
html.wb .acc-ki-text:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
html.wb .acc-ki-text[readonly]{background:var(--wb-hover);cursor:default}