/* =============================================================================
   RWD Customer Care – postfach.css
   Arbeitsplatz des Postfachs (Ticketsystem): Ansichten | Liste | Ticket.
   Ruhig, wenig Farbe: Farbe nur, wo sie Handlung bedeutet (ungelesen, dringend,
   Vorschlag). Alles andere in den Grautönen der App.
   Frischer Anstrich 30.09.2026: helle Flächen, weiße Karten mit weichem Schatten,
   runde Chips und Schalter wie in den Einstellungen; Bewegung nur über transform/
   opacity, kurz, einmalig, und aus bei „weniger Bewegung“ (ganz unten).
   ============================================================================= */
:root {
    --pf-flaeche: #f6f8fb;
    --pf-linie: #e8ecf1;
    --pf-akzent-weich: #eaf2fb;
    --pf-schatten: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 8px rgba(15, 23, 42, .05);
    --pf-schatten-hoch: 0 2px 4px rgba(15, 23, 42, .06), 0 8px 20px rgba(15, 23, 42, .08);
    --pf-fokus: 0 0 0 3px rgba(31, 78, 122, .14);
}

/* Feste Höhe, jede Spalte scrollt für sich. Die min-height:0 sind Pflicht: Rasterzeilen und Flex-Kinder wachsen sonst
   mit ihrem Inhalt über den Bildschirm hinaus — dann scrollt die ganze Seite, der Verlauf läuft aus dem weißen Feld
   und der Antwort-Editor unter dem Verlauf rutscht aus dem Blick. */
/* Spaltenbreiten zum Ziehen: Wer an einer Trennlinie zieht, setzt --pf-nav / --pf-liste / --pf-kontext am <html>
   (js/postfach.js, gemerkt je Browser). Ohne gemerkte Breite gelten die Standardwerte der Fensterbreite. Das min()
   hält das Ticket breit genug — auch wenn eine auf dem großen Bildschirm gemerkte Breite auf einem kleinen ankommt. */
.pf { --pf-nav-std: 210px; --pf-liste-std: 380px; position: relative;
      display: grid; grid-template-rows: minmax(0, 1fr); gap: 0; height: calc(100vh - 48px);
      grid-template-columns: min(var(--pf-nav, var(--pf-nav-std)), 22%) min(var(--pf-liste, var(--pf-liste-std)), 36%) minmax(0, 1fr);
      margin: -24px; border-top: 1px solid var(--border); background: #fff; min-width: 0; }
.pf > * { min-height: 0; }
/* Die Griffe liegen genau auf der Trennlinie und ragen nur nach rechts in die Nachbarspalte — so bleibt die
   Bildlaufleiste links davon frei greifbar. Sichtbar werden sie erst unter der Maus. */
.pf-griff { position: absolute; top: 0; bottom: 0; width: 8px; z-index: 5; cursor: col-resize; touch-action: none; }
.pf-griff::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: transparent; transition: background-color .15s; }
.pf-griff:hover::after, .pf-griff.zieht::after { background: var(--rwd-blue-700); }
.pf-griff.nav { left: calc(min(var(--pf-nav, var(--pf-nav-std)), 22%) - 1px); }
.pf-griff.liste { left: calc(min(var(--pf-nav, var(--pf-nav-std)), 22%) + min(var(--pf-liste, var(--pf-liste-std)), 36%) - 1px); }
.pf-griff.kontext { right: calc(var(--pf-kontext-ist) - 7px); }
html.pf-zieht, html.pf-zieht * { cursor: col-resize !important; user-select: none !important; }
.pf-nav { border-right: 1px solid var(--pf-linie); background: var(--pf-flaeche); overflow-y: auto; display: flex; flex-direction: column; }
.pf-nav-kopf { padding: 16px 16px 10px; font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-nav-gruppe { padding: 14px 18px 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.pf-nav-eintrag { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: auto; margin: 1px 8px; text-align: left;
                  padding: 7px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: inherit; font-size: 13px; color: var(--text);
                  transition: background-color .15s, color .15s, box-shadow .15s; }
.pf-nav-eintrag:hover { background: #eaeef3; }
.pf-nav-eintrag.aktiv { background: #fff; color: var(--rwd-blue-700); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px var(--pf-linie); }
.pf-nav-zahl { font-size: 11.5px; color: var(--text-muted); min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }
.pf-nav-zahl.rot { color: #b91c1c; font-weight: 700; background: #fee2e2; border-radius: 999px; padding: 0 7px; min-width: 0; text-align: center; }
.pf-nav-fuss { margin-top: auto; padding: 12px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-muted);
               display: flex; flex-direction: column; gap: 6px; }
.pf-modus { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
            letter-spacing: .04em; text-transform: uppercase; background: #e5e7eb; color: #374151; }
.pf-modus.vorschau { background: #fef3c7; color: #92400e; }
.pf-modus.aktiv { background: #d1fae5; color: #065f46; }

.pf-liste { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.pf-suche { padding: 12px 12px 10px; border-bottom: 1px solid var(--pf-linie); display: flex; flex-direction: column; gap: 8px; }
.pf-suche input { width: 100%; padding: 9px 12px; border: 1px solid transparent; border-radius: 10px; font: inherit; font-size: 13px; background: var(--pf-flaeche);
                  transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pf-suche input:hover { border-color: var(--pf-linie); }
.pf-suche input:focus { outline: none; background: #fff; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-chip { border: 1px solid var(--pf-linie); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; color: var(--text); font: inherit;
           transition: background-color .15s, border-color .15s, color .15s, transform .08s; }
.pf-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.pf-chip.aktiv, .pf-chip.aktiv:hover { background: var(--rwd-blue-700); border-color: var(--rwd-blue-700); color: #fff; }
.pf-zeilen { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: 6px; }
/* Zeilen als ruhige, runde Flächen statt Trennlinien — die gewählte trägt den blauen Streifen links. */
.pf-zeile { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 4px 8px; width: calc(100% - 12px); margin: 2px 6px; text-align: left; border: 0;
            border-radius: 10px; background: #fff; padding: 10px 12px 10px 10px; cursor: pointer; font: inherit; color: var(--text);
            transition: background-color .12s, box-shadow .12s; }
.pf-zeile:hover { background: #f5f7fa; }
.pf-zeile.aktiv { background: var(--pf-akzent-weich); box-shadow: inset 3px 0 0 var(--rwd-blue-700); }
.pf-punkt { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: transparent; }
.pf-zeile.ungelesen .pf-punkt { background: var(--rwd-blue-700); }
.pf-zeile.ungelesen .pf-betreff { font-weight: 700; }
.pf-betreff { font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-zeit { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.pf-absender { grid-column: 2; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-vorschau { grid-column: 2 / 4; font-size: 12px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Chips einer Zeile in fester Reihenfolge und ohne Umbruch — jede Zeile gleich hoch, das Auge findet alles am selben Platz.
   Der Markt-Chip gibt bei Platzmangel nach; das Kürzel des Bearbeiters sitzt rechts neben der Absenderzeile. */
.pf-bezuege { grid-column: 2 / 4; display: flex; gap: 4px; flex-wrap: nowrap; overflow: hidden; align-items: center; margin-top: 3px; min-width: 0; }
.pf-bezuege > * { flex: none; }
.pf-bezuege > .pf-markt { flex: 0 1 auto; min-width: 5.5em; overflow: hidden; text-overflow: ellipsis; }
.pf-bezuege > .pf-auftrag { flex: 0 1 auto; min-width: 6.5em; overflow: hidden; text-overflow: ellipsis; }
.pf-bezug.pf-art { background: #ecfeff; color: #155e75; }
.pf-zeile > .pf-initialen { grid-column: 3; justify-self: end; align-self: center; width: 24px; height: 24px; font-size: 10px; }
.pf-bezug { font-size: 11px; background: #f1f5f9; border-radius: 999px; padding: 1px 8px; color: #334155; white-space: nowrap; }
.pf-bezug.vorschlag { background: #fff7ed; color: #9a3412; border: 1px dashed #fdba74; }
.pf-bezug.ticket { background: #eef2ff; color: #3730a3; }
.pf-status { font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: #e5e7eb; color: #374151; white-space: nowrap; }
.pf-status.neu { background: #dbeafe; color: #1d4ed8; }
.pf-status.offen { background: #fee2e2; color: #b91c1c; }
.pf-status.wartetaufkunde { background: #fef3c7; color: #92400e; }
.pf-status.wartetintern { background: #ede9fe; color: #5b21b6; }
.pf-status.geloest { background: #d1fae5; color: #065f46; }
.pf-status.geschlossen, .pf-status.verworfen { background: #e5e7eb; color: #6b7280; }
.pf-prio { font-size: 11px; font-weight: 700; }
.pf-prio.hoch { color: #c2410c; }
.pf-prio.dringend { color: #b91c1c; }
.pf-initialen { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
                background: #e2e8f0; color: #334155; font-size: 10px; font-weight: 700; }
.pf-leer { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

.pf-ticket { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.pf-ticket-leer { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 14px; text-align: center; padding: 20px; }
.pf-kopf { padding: 14px 20px 12px; border-bottom: 1px solid var(--pf-linie); display: flex; flex-direction: column; gap: 9px; }
.pf-kopf h2 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pf-kopf h2 .pf-nr { font-size: 11.5px; color: #64748b; font-weight: 600; background: #f1f5f9; border-radius: 6px; padding: 1px 7px; letter-spacing: 0; }
.pf-kopf-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; }
.pf-kopf-zeile select, .pf-kopf-zeile input { padding: 5px 9px; border: 1px solid transparent; border-radius: 8px; font: inherit; font-size: 12.5px; background: var(--pf-flaeche);
                                              transition: background-color .15s, border-color .15s, box-shadow .15s; }
.pf-kopf-zeile select:hover, .pf-kopf-zeile input:hover { border-color: var(--pf-linie); }
.pf-kopf-zeile select:focus, .pf-kopf-zeile input:focus { outline: none; background: #fff; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
/* Segmentschalter wie auf dem Telefon: graue Schiene, der gewählte Teil hebt sich weiß heraus. */
/* Beschriftungen brechen nicht um; ist die Schiene breiter als der Platz (Telefon), lässt sie sich seitlich wischen. */
.pf-segment { display: inline-flex; gap: 2px; padding: 3px; border: 0; border-radius: 10px; background: #eef1f5; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pf-segment::-webkit-scrollbar { display: none; }
.pf-segment button { border: 0; border-radius: 8px; background: transparent; padding: 4px 11px; font: inherit; font-size: 12px; cursor: pointer; color: #475569;
                     white-space: nowrap; flex: none; transition: background-color .15s, color .15s, box-shadow .15s; }
.pf-segment button:hover:not(:disabled):not(.aktiv) { background: rgba(255, 255, 255, .65); color: var(--text); }
.pf-segment button.aktiv { background: #fff; color: var(--rwd-blue-700); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .12), 0 0 0 1px rgba(15, 23, 42, .04); }
.pf-segment button:disabled { opacity: .5; cursor: default; }

/* Der Kontext lässt sich breiter ziehen, bis der Verlauf noch 360 px behält — schmaler als 220 px wird er nie. */
.pf-koerper { --pf-kontext-ist: max(220px, min(var(--pf-kontext, 300px), calc(100% - 360px)));
              display: grid; grid-template-columns: minmax(0, 1fr) var(--pf-kontext-ist); grid-template-rows: minmax(0, 1fr);
              flex: 1; min-height: 0; position: relative; }
.pf-verlauf { overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; background: #fafbfd; }
/* Seit der Verlauf eine feste Höhe hat, würde Flexbox die Nachrichten stauchen, statt zu scrollen — Karten mit
   overflow:hidden haben keine Mindesthöhe und verlören Signatur und Systemzeilen ihre untere Hälfte. */
.pf-verlauf > *, .pf-nav > * { flex-shrink: 0; }
.pf-kontext { border-left: 1px solid var(--pf-linie); overflow-y: auto; min-height: 0; padding: 14px 14px 18px; background: var(--pf-flaeche); font-size: 12.5px; }
/* Einbettung in die neue Oberfläche (06.11.2026): nur die rechte Spalte, volle Breite, Composer erst, wenn eine Karte ihn öffnet. */
.einbettung { height: 100vh; display: flex; flex-direction: column; background: var(--pf-flaeche, #fff); }
.einbettung .pf-koerper.nur-kontext { display: block; overflow-y: auto; flex: 1; }
.einbettung .pf-kontext { border-left: 0; overflow: visible; }
.einbettung .pf-griff, .einbettung .pf-composer-zu { display: none; }
/* Neue Oberfläche 09.11.2026: nur ein Auftragsdialog über der React-Seite — Hintergrund durchsichtig. */
html:has(.einbettung.dialog), body:has(.einbettung.dialog), .einbettung.dialog { background: transparent !important; }
.einbettung.karten { height: auto; }
.einbettung.karten .pf-kontext { padding-top: 0; padding-bottom: 0; }
.pf-kontext h4 { margin: 12px 0 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.pf-kontext h4:first-child { margin-top: 0; }
/* Kategorien der rechten Spalte (User 29.09.2026): der Kopf ist ein Knopf, der Pfeil dreht sich beim Aufklappen,
   die Zahl zeigt auch eingeklappt, was darin steckt. */
.pf-kategorie-kopf { display: flex; align-items: center; gap: 6px; width: 100%; margin: 14px 0 7px; padding: 3px 2px; border: 0; border-radius: 6px; background: none;
    cursor: pointer; text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7b8698; transition: color .15s; }
.pf-kontext > .pf-kategorie:first-child .pf-kategorie-kopf { margin-top: 0; }
.pf-kategorie-kopf:hover { color: var(--text, #111827); }
.pf-kategorie-kopf:focus-visible { outline: none; box-shadow: var(--pf-fokus); }
.pf-kategorie-kopf .pfeil { display: inline-block; width: 10px; font-size: 9px; transition: transform .18s ease; }
.pf-kategorie-kopf.offen .pfeil { transform: rotate(90deg); }
.pf-kategorie-kopf .zahl { padding: 0 7px; border-radius: 999px; background: #e8edf3; color: #475569; font-size: 10px; line-height: 16px; letter-spacing: 0; text-transform: none; }
.pf-kategorie-kopf .zahl.hinweis { background: #d1fae5; color: #065f46; }
.pf-kein-bezug { margin: 8px 0 2px; }
.pf-karte { background: #fff; border: 1px solid var(--pf-linie); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.pf-karte .k { color: var(--text-muted); font-size: 11.5px; }
.pf-karte a { color: var(--rwd-blue-700); }
/* Aufträge in der Akte: verknüpft grün umrandet, Vorschlag gestrichelt orange, Knopf rechts im Kopf */
.pf-karte.verknuepft { border-color: #86efac; background: #f0fdf4; }
.pf-karte.vorschlag { border: 1px dashed #fdba74; background: #fff7ed; }
/* Auftragskarte mit fester KW-Spalte links (30.09.2026): alle Karten gleich breit, die Wochen stehen untereinander */
.pf-karte.pf-auftrag { display: flex; gap: 10px; }
.pf-auftrag-kw { flex: none; width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center;
                 padding-right: 9px; border-right: 1px solid var(--pf-linie); text-align: center; line-height: 1.15; cursor: default; }
.pf-auftrag-kw strong { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text, #111827); }
.pf-auftrag-kw span { font-size: 9.5px; color: var(--text-muted); }
.pf-auftrag-kw span:first-child { text-transform: uppercase; letter-spacing: .08em; }
.pf-karte.verknuepft .pf-auftrag-kw { border-right-color: #bbf7d0; }
.pf-karte.vorschlag .pf-auftrag-kw { border-right-color: #fed7aa; }
.pf-auftrag-inhalt { flex: 1; min-width: 0; }
.pf-auftrag-meta { margin-top: 5px; }
.pf-auftrag-kopf { display: flex; align-items: center; gap: 3px 6px; flex-wrap: wrap; }
.pf-auftrag-ok { margin-left: auto; font-size: 11px; font-weight: 600; color: #15803d; white-space: nowrap; }
.pf-auftrag-knopf { margin-left: auto; border: 1px solid var(--rwd-blue-700); color: var(--rwd-blue-700); background: #fff; border-radius: 8px;
                    padding: 2px 9px; font: inherit; font-size: 11.5px; cursor: pointer; white-space: nowrap; transition: background-color .15s, color .15s, transform .08s; }
.pf-auftrag-knopf:hover { background: var(--rwd-blue-700); color: #fff; }
.pf-auftrag-knopf:disabled { opacity: .5; cursor: default; }
.pf-auftrag-vorschlag { font-size: 11px; color: #9a3412; margin: 2px 0; }
.pf-auftrag-markt { font-size: 11.5px; font-weight: 600; color: var(--text); margin: 10px 0 4px; }
/* Gebuchte Aufträge unter den laufenden: leiser Trenner, drei sichtbar, der Rest auf Klick */
.pf-auftrag-trenner { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 5px;
                      display: flex; align-items: center; gap: 6px; }
.pf-auftrag-trenner::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.pf-auftrag-mehr { border: 0; background: none; padding: 0 2px 8px; font: inherit; font-size: 11.5px; color: var(--rwd-blue-700); cursor: pointer; }
.pf-auftrag-erp { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px solid #bbf7d0;
                  font-size: 11.5px; color: #166534; }
.pf-auftrag-hinweis { font-size: 11.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 5px 8px; margin-bottom: 8px; }
/* Aufträge und Termine: je Sonderauftrag eine Karte, die Belegnummer vorn — die Termine hängen als Chips darunter */
.pf-auftrag-nr { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-nav-link { font-weight: 700; color: var(--rwd-blue-700, #1F4E7A); text-decoration: none; border-radius: 4px; padding: 0 3px; margin-left: -3px; }
.pf-nav-link:hover { background: #e8f0fa; text-decoration: underline; }
.pf-lz-btn { border: 1px solid #e2e8f0; background: #fff; color: #475569; border-radius: 6px; font-size: 12px; padding: 0 6px; margin-left: 4px; cursor: pointer; }
.pf-lz-btn:hover { background: #e8f0fa; color: #14375E; }
.pf-termine-zeile { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 5px; font-size: 11px; }
.pf-termine-zeile .k { color: var(--text-muted); font-size: 11.5px; margin-right: 2px; }
.pf-termine-zeile.ohne { margin: 2px 0 8px; }
.pf-termin-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--pf-linie); border-radius: 999px;
                  padding: 1px 7px; white-space: nowrap; }
.pf-termin-chip .badge { font-size: 10.5px; }
.pf-termin-ohne { font-size: 11.5px; color: var(--text-muted); padding: 2px 2px 8px; }
.pf-auftrag-loesen { margin-left: auto; border: 0; background: none; padding: 0 2px; font: inherit; font-size: 11px; color: var(--text-muted); cursor: pointer; }
.pf-auftrag-loesen:hover { color: #b91c1c; text-decoration: underline; }
.pf-loesen-frage { flex-basis: 100%; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: #7f1d1d; }
.pf-chips-verkn { display: flex; flex-direction: column; gap: 4px; }
.pf-verkn { display: flex; align-items: center; gap: 6px; font-size: 12px; background: #fff; border: 1px solid var(--pf-linie); border-radius: 10px; padding: 5px 9px; }
.pf-verkn.vorschlag { background: #fff7ed; border: 1px dashed #fdba74; }
.pf-verkn .grund { color: var(--text-muted); font-size: 11px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-verkn button { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 0 3px; }
.pf-verkn-eingabe { display: flex; gap: 6px; margin-top: 6px; }
.pf-verkn-eingabe input { flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; }

.pf-msg { border: 1px solid var(--pf-linie); border-radius: 12px; background: #fff; overflow: hidden; box-shadow: var(--pf-schatten); }
.pf-msg.ausgehend { border-color: #cfe0f3; }
.pf-msg.intern { background: #fffbeb; border-color: #fde68a; }
.pf-msg.system { background: transparent; border: 0; padding: 0 6px; font-size: 12px; color: var(--text-muted); box-shadow: none; }
.pf-msg.system .pf-msg-kopf { padding: 0; background: none; border: 0; }
/* Anlage eines Sonderauftrags im ERP deutlich (User 06.10.2026) */
.pf-msg.system.erp-anlage { background: #e6f4ef; border: 1px solid #9fd3bd; border-left: 4px solid #1c7a5a; border-radius: 8px; padding: 8px 12px; margin: 6px 0; color: #14532d; font-size: 13px; }
.pf-msg.system.erp-anlage .erp-anlage-text { font-weight: 700; }
/* Antwort des Hausleiters per Link deutlich (User 13.10.2026): grün bestätigt, rot passt nicht */
.pf-msg.system.hl-antwort { border-radius: 8px; padding: 8px 12px; margin: 6px 0; font-size: 13px; }
.pf-msg.system.hl-antwort .hl-antwort-text { font-weight: 700; }
.pf-msg.system.hl-antwort.ja { background: #e6f4ef; border: 1px solid #9fd3bd; border-left: 4px solid #1c7a5a; color: #14532d; }
.pf-msg.system.hl-antwort.nein { background: #fdecec; border: 1px solid #f5b5b5; border-left: 4px solid #b91c1c; color: #7f1d1d; }
.pf-msg.auto { opacity: .8; }
/* Nebenkonversation (Weiterleitung an Dispo, Kältefirma … und die Antworten darauf): sichtbar, aber vom Kundenfaden abgesetzt. */
.pf-msg.neben { border-style: dashed; border-color: #c4b5fd; margin-left: 28px; }
@media (max-width: 1023px) { .pf-msg.neben { margin-left: 10px; } }
.pf-msg-kopf { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: #fff; border-bottom: 1px solid #f1f5f9; font-size: 12px; flex-wrap: wrap; }
.pf-msg.ausgehend .pf-msg-kopf { background: #f5f9fe; }
.pf-msg.intern .pf-msg-kopf { background: #fef3c7; }
.pf-msg.neben .pf-msg-kopf { background: #f5f3ff; }
.pf-bezug.neben { background: #ede9fe; color: #5b21b6; }
.pf-msg-kopf .wer { font-weight: 600; }
.pf-msg-kopf .an { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.pf-msg-kopf .zeit { margin-left: auto; color: var(--text-muted); white-space: nowrap; }
.pf-msg-body { padding: 12px 16px; font-size: 13.5px; line-height: 1.55; overflow-x: auto; contain: layout paint; word-break: break-word; }
.pf-msg-body img { max-width: 100%; height: auto; cursor: zoom-in; }
#pf-lightbox { position: fixed; inset: 0; z-index: 500; background: rgba(15, 23, 42, .8); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; cursor: zoom-out; }
#pf-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 6px; cursor: zoom-in; }
#pf-lightbox.zoom { display: block; }
#pf-lightbox.zoom img { max-width: none; max-height: none; height: auto; cursor: zoom-in; }
/* Outlook-Absätze: Word setzt MsoNormal & Co. im eigenen <style> auf margin 0 — der Block wird beim
   Bereinigen entfernt, ohne diese Zeile stünde nach jeder Zeile ein ganzer Leerabsatz. */
.pf-msg-body [class^="Mso"], .pf-msg-body [class*=" Mso"] { margin-top: 0; margin-bottom: 0; }
.pf-msg-body table { max-width: 100%; }
.pf-msg-body blockquote { border-left: 2px solid #cbd5e1; margin: 8px 0; padding-left: 10px; color: #64748b; }
.pf-msg-body .mail-bild-weg { display: inline-block; font-size: 10.5px; color: #94a3b8; background: #f8fafc; border: 1px dashed #e2e8f0; border-radius: 4px; padding: 0 5px; }
.pf-msg-body .mail-bild-blockiert { display: inline-block; min-width: 40px; min-height: 14px; background: #f1f5f9; color: #94a3b8; font-size: 10px; }
.pf-msg-fuss { padding: 6px 12px 10px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.pf-anhang { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; background: #fff; color: var(--rwd-blue-700); text-decoration: none; }
.pf-anhang:hover { border-color: var(--rwd-blue-700); }
button.pf-anhang { font: inherit; font-size: 12px; cursor: pointer; }

/* Dateivorschau über dem Verlauf */
.pf-modal-hg { position: fixed; inset: 0; background: rgba(15, 23, 42, .55); z-index: 400; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pf-modal { background: #fff; border-radius: 12px; width: min(1100px, 100%); height: min(90vh, 100%); display: flex; flex-direction: column;
            overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
.pf-modal-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pf-modal-kopf strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-modal-kopf .k { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.pf-modal-kopf a { color: var(--rwd-blue-700); font-size: 12.5px; white-space: nowrap; }
.pf-modal-kopf button { border: 1px solid var(--border); background: #fff; border-radius: 6px; min-width: 28px; height: 26px; cursor: pointer; font: inherit; }
.pf-modal-kopf button:disabled { opacity: .4; cursor: default; }
.pf-modal-inhalt { flex: 1; min-height: 0; background: #f1f5f9; display: flex; align-items: center; justify-content: center; overflow: auto; }
.pf-modal-inhalt iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.pf-modal-inhalt img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.pf-modal-inhalt:has(img.zoom) { display: block; }
.pf-modal-inhalt img.zoom { max-width: none; max-height: none; cursor: zoom-out; }
.pf-anhang-bild { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px; max-width: 260px; }
.pf-anhang-bild img { max-height: 160px; max-width: 250px; border-radius: 4px; border: 1px solid var(--border); background: #fff; }
.pf-anhang-bild span { font-size: 11px; max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) { .pf-modal-hg { padding: 0; } .pf-modal { border-radius: 0; height: 100%; } }
.pf-msg-hinweis { font-size: 11.5px; color: var(--text-muted); }
.pf-bilder-knopf { border: 1px solid var(--border); background: #fff; border-radius: 6px; font: inherit; font-size: 11.5px; padding: 2px 8px; cursor: pointer; }

.pf-composer { border-top: 1px solid var(--pf-linie); background: #fff; padding: 10px 20px 12px; display: flex; flex-direction: column; gap: 8px;
               box-shadow: 0 -6px 18px rgba(15, 23, 42, .04); position: relative; }
.pf-composer-zu { flex-direction: row; align-items: center; gap: 8px; padding: 8px 18px; }
.pf-composer-zu .hinweis { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.pf-composer-tabs { display: flex; gap: 4px; align-items: center; }
.pf-composer-tabs button { border: 0; background: none; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; border-radius: 999px; color: var(--text-muted);
                           transition: background-color .15s, color .15s; }
.pf-composer-tabs button:hover:not(.aktiv) { background: #f5f7fa; color: var(--text); }
.pf-composer-tabs button.aktiv { background: #eef1f5; color: var(--text); font-weight: 600; }
.pf-composer-tabs button.notiz.aktiv { background: #fef3c7; }
.pf-composer-tabs button.weiter.aktiv { background: #ede9fe; }
/* Antwort und Weiterleitung stehen beide im DOM (Entwurf bleibt beim Reiterwechsel) — der nicht gewählte ist versteckt. */
.pf-composer-teil { display: flex; flex-direction: column; gap: 8px; }
.pf-composer-teil[hidden] { display: none; }
.pf-composer-felder { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 6px 8px; align-items: center; font-size: 12.5px; }
.pf-composer-felder label { color: var(--text-muted); text-align: right; }
.pf-composer-felder input { padding: 6px 9px; border: 1px solid var(--pf-linie); border-radius: 8px; font: inherit; font-size: 12.5px; transition: border-color .15s, box-shadow .15s; }
.pf-composer-felder input:focus { outline: none; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
.pf-composer-felder select { min-width: 0; padding: 5px 7px; border: 1px solid var(--pf-linie); border-radius: 8px; font: inherit; font-size: 12.5px; background: #fff; }
label.pf-anhang { cursor: pointer; color: var(--text); }
label.pf-anhang input { margin: 0; }
.pf-editor { min-height: 120px; max-height: 38vh; overflow-y: auto; border: 1px solid var(--pf-linie); border-radius: 10px; padding: 10px 12px;
             font-size: 13.5px; line-height: 1.55; background: #fff; transition: border-color .15s, box-shadow .15s; }
.pf-editor:focus { outline: none; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
.pf-editor:empty::before { content: attr(data-platzhalter); color: #94a3b8; }
.pf-editor .pf-offen { background: #fee2e2; color: #b91c1c; border-radius: 3px; padding: 0 2px; }
.pf-editor.mk-editor { min-height: 260px; max-height: 62vh; }
.pf-editor[contenteditable="false"] { background: #f8fafc; color: #475569; }
/* Platzhalter als graue Felder (Makros, Massenversand) — statt {{markt.nr}} steht „Markt-Nr.“ da. */
.pf-ph { display: inline-block; margin: 0 1px; padding: 0 7px; border-radius: 6px; background: #e2e8f0; color: #334155;
         font-size: .92em; line-height: 1.55; white-space: nowrap; cursor: default; user-select: all; vertical-align: baseline; }
.pf-ph-block { background: #dcfce7; color: #166534; font-weight: 600; }
.mk-betreff-zeile { display: flex; gap: 6px; align-items: center; }
.mk-betreff-zeile select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; }
.pf-editor.mk-betreff { flex: 1; min-height: 0; max-height: none; padding: 6px 10px; white-space: nowrap; overflow-x: auto; overflow-y: hidden; }
.mk-vorschau { margin-top: 16px; border-top: 1px dashed var(--pf-linie); padding-top: 12px; }
.mk-vorschau-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mk-vorschau-kopf select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; max-width: 420px; }
.mk-vorschau-kopf .btn { margin-left: auto; }
.mk-vorschau-hinweis { font-size: 12px; color: #64748b; margin: 6px 0; }
.mk-vorschau-betreff { font-size: 13.5px; margin: 0 0 6px; }
.mk-vorschau-betreff span { display: inline-block; min-width: 64px; color: #64748b; font-size: 12px; }
.mk-vorschau-mail { border: 1px solid var(--pf-linie); border-radius: 10px; background: #fff; }
.es-band.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.pf-editor-leiste { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pf-editor-leiste button { border: 1px solid var(--pf-linie); background: #fff; border-radius: 8px; min-width: 28px; height: 26px; font: inherit; font-size: 12px; cursor: pointer;
                           transition: border-color .15s, background-color .15s, transform .08s; }
.pf-editor-leiste button:hover { border-color: var(--rwd-blue-700); background: #f8fafc; }
.pf-editor-leiste select { padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; max-width: 320px; }
.pf-notiz { position: relative; }
.pf-notiz textarea { width: 100%; min-height: 90px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 8px; font: inherit; font-size: 13.5px; background: #fffbeb; resize: vertical; }
/* @-Erwähnung: Die Liste öffnet nach oben — das Notizfeld sitzt am unteren Rand der Akte. In der Notiz steht der Name markiert. */
.pf-notiz .pf-erw-liste { top: auto; bottom: calc(100% + 3px); max-height: 260px; }
.pf-erw { background: #e0e7ff; color: #3730a3; border-radius: 4px; padding: 0 3px; font-weight: 600; white-space: nowrap; }
/* Was der Absender in den zitierten Verlauf geschrieben hat — gesammelt über dem Text, damit es nicht im Zitat untergeht. */
.pf-zitat-ergaenzt { margin: 10px 14px 0; padding: 8px 12px; background: #fefce8; border: 1px solid #fde68a; border-left: 3px solid #eab308; border-radius: 8px; font-size: 13px; }
.pf-zitat-ergaenzt strong { display: block; font-size: 12px; color: #854d0e; margin-bottom: 4px; }
.pf-zitat-ergaenzt ul { margin: 0; padding-left: 18px; }
.pf-zitat-ergaenzt li { margin: 1px 0; }
.pf-composer-aktion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-composer-aktion .hinweis { font-size: 12px; color: var(--text-muted); margin-left: auto; }
.pf-composer-aktion .fehler { font-size: 12px; color: #b91c1c; margin-left: auto; }
.pf-split { display: inline-flex; }
.pf-split .btn { border-radius: 8px 0 0 8px; }
.pf-split .btn:only-child { border-radius: 8px; }
.pf-split select { border: 1px solid var(--rwd-blue-700); border-left: 0; border-radius: 0 8px 8px 0; background: var(--rwd-blue-700); color: #fff; font: inherit; font-size: 12.5px; padding: 0 6px; }
.pf-anhang-liste { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; }

.pf-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-tabelle th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.pf-tabelle td { padding: 8px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.pf-uebergangen { padding: 12px; overflow-y: auto; }

/* ── Schmale Fenster ── */
@media (max-width: 1439px) { .pf { --pf-nav-std: 190px; --pf-liste-std: 340px; } .pf-koerper { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .pf-kontext { border-left: 0; border-top: 1px solid var(--border); max-height: 40vh; } .pf-griff.kontext { display: none; } }
@media (max-width: 1279px) {
    .pf { --pf-liste-std: 300px; grid-template-columns: min(var(--pf-liste, var(--pf-liste-std)), 36%) minmax(0, 1fr); }
    .pf-nav { display: none; } .pf-nav.offen { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 240px; z-index: 150; box-shadow: 0 0 30px rgba(0,0,0,.2); }
    .pf-griff.nav { display: none; }
    .pf-griff.liste { left: calc(min(var(--pf-liste, var(--pf-liste-std)), 36%) - 1px); }
}
@media (max-width: 1023px) {
    .pf-griff { display: none; }
    .pf { grid-template-columns: minmax(0, 1fr); height: auto; margin: -14px -12px; border-top: 0; }
    .pf-liste { border-right: 0; }
    .pf.mit-ticket .pf-liste { display: none; }
    .pf:not(.mit-ticket) .pf-ticket { display: none; }
    .pf-zurueck { display: inline-flex; }
    .pf-koerper { display: block; }
    .pf-verlauf { padding: 10px 12px; }
    .pf-composer { padding: 10px 12px; }
    .pf-kontext { max-height: none; }
}
.pf-zurueck { display: none; }

/* ── Markt-Detail: Kommunikationskarte ── */
.pf-markt-zeile { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 2px 8px; padding: 8px 4px; border-bottom: 1px solid #f1f5f9; text-decoration: none; color: var(--text); }
.pf-markt-zeile:hover { background: #f8fafc; }

/* ── Ansichten: Filterleiste, Gruppen, Ampel ── */
.pf-select { border: 1px solid var(--border); border-radius: 999px; padding: 3px 8px; font: inherit; font-size: 11.5px; background: #fff; color: var(--text); max-width: 170px; }
/* Kundenauswahl mit Häkchen (21.10.2026) — Knopf wie .pf-select, Liste klappt darunter auf */
.pf-mehrfach { position: relative; display: inline-block; }
.pf-mehrfach > .pf-select { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-mehrfach-hinter { position: fixed; inset: 0; z-index: 40; }
.pf-mehrfach-liste { position: absolute; top: calc(100% + 4px); left: 0; z-index: 41; background: #fff; border: 1px solid var(--border);
    border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.12); padding: 6px 4px; min-width: 170px; max-height: 320px; overflow-y: auto; }
.pf-mehrfach-liste label { display: flex; gap: 6px; align-items: center; padding: 3px 8px; font-size: 12px; cursor: pointer; border-radius: 6px; white-space: nowrap; }
.pf-mehrfach-liste label:hover { background: #f1f5f9; }
.pf-nav-knopf { display: none; }
.pf-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 8px; padding: 6px 0 2px; }
.pf-filter label { display: flex; flex-direction: column; gap: 2px; color: var(--text-muted); font-size: 11px; }
.pf-filter select, .pf-filter input { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; background: #fff; color: var(--text); min-width: 0; }
.pf-filter-aktionen { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-top: 4px; border-top: 1px dashed var(--border); margin-top: 2px; font-size: 12px; }
.pf-filter-aktionen input[type=text] { flex: 1; min-width: 140px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; }
.pf-filter-aktionen .fehler { color: #b91c1c; font-size: 12px; }
.pf-filter-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.pf-filter-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; background: #eef4fa; color: #1f4e7a; border-radius: 6px; padding: 1px 4px 1px 7px; }
.pf-filter-chip button { border: 0; background: none; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 2px; color: inherit; }
.pf-gruppe { display: flex; justify-content: space-between; align-items: center; width: 100%; border: 0; border-bottom: 1px solid var(--pf-linie);
             background: #fff; padding: 8px 16px 6px; font: inherit; font-size: 10.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
             color: #94a3b8; cursor: pointer; position: sticky; top: 0; z-index: 1; text-align: left; transition: color .15s; }
.pf-gruppe:hover { color: var(--text); }
.pf-gruppe .zahl { font-weight: 700; }
.pf-ampel { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.pf-ampel.ok { background: #2ba587; }
.pf-ampel.knapp { background: #f59e0b; }
.pf-ampel.ueber { background: #dc2626; }
/* „Wir sind am Ball“: der Kunde wartet auf uns — wie lange, in der Farbe der Ampel */
.pf-amball { flex: none; white-space: nowrap; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 0 7px; line-height: 18px; }
.pf-amball.ok { background: #dcfce7; color: #166534; }
.pf-amball.knapp { background: #fef3c7; color: #92400e; }
.pf-amball.ueber { background: #fee2e2; color: #b91c1c; }
.pf-hinweis-cap { padding: 6px 12px; font-size: 12px; color: #92400e; background: #fffbeb; border-bottom: 1px solid var(--border); }
@media (max-width: 1279px) { .pf-nav-knopf { display: inline-block; } }

/* ── Bestätigungslink: Stand im Chip ── */
.pf-bezug.best-offen { background: #fef3c7; color: #92400e; }
.pf-bezug.best-ja { background: #d1fae5; color: #065f46; }
.pf-bezug.best-nein { background: #fee2e2; color: #b91c1c; }

/* ── Bestellkarte (Phase 3b) ── */
/* Kopf als Liste mit fester Beschriftungsspalte (30.09.2026) — je Angabe eine Zeile, Kontaktwege leise darunter */
.best-karte .best-kopf { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 5px 10px; font-size: 12.5px; margin: 0 0 8px; }
.best-karte .best-kopf dt { font-weight: 400; color: var(--text-muted); }
.best-karte .best-kopf dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.best-karte .best-kopf .best-zweit { font-size: 11.5px; color: var(--text-muted); margin-top: 1px; }
.best-karte .best-kopf .best-zweit a { color: inherit; }
.best-tab { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 2px; }
.best-tab th, .best-tab td { text-align: left; padding: 5px 4px; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.best-tab th { color: #7b8698; font-weight: 600; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; }
.best-tab th[title] { cursor: help; }
.best-tab tbody tr:last-child td { border-bottom: 0; }
.best-tab td.num { text-align: right; white-space: nowrap; }
.best-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #e0f2fe; color: #075985; font-size: 11px; font-weight: 600; }
.best-chip.frei { background: #fee2e2; color: #991b1b; }
.best-warn { background: #fff7ed; border: 1px solid #fdba74; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 6px 0; }
.best-dup { background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; padding: 6px 8px; font-size: 12px; margin: 6px 0; }
/* Bestellung schon im ERP: grün, statt eines Angebots zum Anlegen */
.best-imerp { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px; padding: 7px 10px; font-size: 12px; margin: 6px 0; color: #14532d;
               display: flex; flex-direction: column; gap: 2px; }
.best-imerp:empty { display: none; }
.best-imerp .best-warn { margin: 4px 0 0; color: #7c2d12; }
/* Auftrag anlegen (30.09.2026): oben je Auftrag eine Zeile, darunter ein Formular mit fester Beschriftungsspalte,
   die Sperr-Häkchen und rechts der Knopf */
.best-anlage { border-top: 1px solid #eef1f5; margin-top: 8px; padding-top: 8px; font-size: 12.5px; }
.best-anlage-titel { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #7b8698; margin-bottom: 6px; }
.best-anlage-gruppen { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.best-anlage-gruppen label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--pf-linie);
                             border-radius: 8px; background: #f8fafc; cursor: pointer; }
.best-anlage-gruppen label .k { margin-left: auto; white-space: nowrap; }
.best-anlage-formular { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; align-items: center; }
.best-anlage-formular label { color: #475569; }
/* Ausführung: mit Datum / ohne Datum als Knopfpaar (User 07.10.2026) */
.best-anlage-formular .ausf-wahl { grid-column: 1 / -1; }
.ausf-wahl { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ausf-seg { display: flex; border: 1px solid var(--pf-linie); border-radius: 8px; overflow: hidden; }
.ausf-seg button { flex: 1 1 0; }
.ausf-seg button { border: 0; background: #fff; padding: 3px 8px; font: inherit; font-size: 12px; white-space: nowrap; color: #475569; cursor: pointer; }
.ausf-seg button + button { border-left: 1px solid var(--pf-linie); }
.ausf-seg button.an { background: #1F4E7A; color: #fff; font-weight: 600; }
.ausf-hinweis { font-size: 12px; color: #92400e; background: #fef3c7; border-radius: 6px; padding: 3px 8px; }
.best-anlage-formular input { width: 100%; min-width: 0; font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--pf-linie);
                              border-radius: 8px; background: #fff; }
.best-anlage-formular input[type="date"] { max-width: 170px; }
.best-anlage-formular input:focus { outline: none; box-shadow: var(--pf-fokus); }
.best-anlage-sperren { display: flex; flex-direction: column; gap: 4px; margin-top: 9px; color: #991b1b; }
.best-anlage-sperren label { display: flex; align-items: center; gap: 6px; }
.best-anlage-fuss { display: flex; justify-content: flex-end; margin-top: 9px; }
/* Formloser Auftrag (05.10.2026): Zitat der Mail, je Gewerk die Vertragszeilen mit Menge */
.fa-zitat { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid #cbd5e1; background: #f8fafc; font-size: 12.5px; color: #334155; font-style: italic; }
.fa-gewerk { font-weight: 600; font-size: 12.5px; margin: 6px 0 4px; }
.best-anlage-gruppen label .fa-menge-feld { margin-left: auto; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.best-anlage-gruppen label .fa-menge-feld .k { margin-left: 0; }
.fa-menge { width: 64px; font: inherit; font-size: 12.5px; padding: 2px 6px; border: 1px solid var(--pf-linie); border-radius: 6px; background: #fff; text-align: right; }
.fa-menge:disabled { background: #f1f5f9; color: #94a3b8; }
.best-anlage-fuss .btn + .btn, .best-anlage-fuss .k + .btn { margin-left: 8px; }
.fa-dazu { margin: 2px 0 10px; }
.fa-laufend-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.fa-laufend-zeile .btn { padding: 1px 8px; font-size: 12px; }
.fa-dazu select { font: inherit; font-size: 12.5px; padding: 3px 8px; border: 1px dashed var(--pf-linie); border-radius: 8px; background: #fff; color: #475569; }
.best-pdf { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.best-bem pre { white-space: pre-wrap; font-family: inherit; font-size: 12px; margin: 4px 0; }
/* Doppel-Prüfung (Status quo): rot, solange niemand entschieden hat — danach ruhig mit dem Stand */
/* Hinweiskasten mit farbigem Rand links: rot = offen, gelb = entschieden, grün = erledigt. Kopf sagt warum, Zeilen darunter
   sind die Belege — je Angabe eine Zeile, das Symbol in einer festen Spalte. */
.best-doppel { background: #fef2f2; border: 1px solid #fecaca; border-left: 4px solid #ef4444; border-radius: 10px; padding: 9px 12px 10px;
               font-size: 12.5px; margin: 8px 0; color: #7f1d1d; }
.best-doppel.entschieden { background: #fffbeb; border-color: #fde68a; border-left-color: #f59e0b; color: #78350f; }
.best-doppel.erledigt { background: #f0fdf4; border-color: #bbf7d0; border-left-color: #22c55e; color: #14532d; }
.best-doppel-kopf { display: flex; gap: 6px; align-items: flex-start; font-weight: 700; margin-bottom: 5px; line-height: 1.35; cursor: help; }
.best-glocke { display: inline-block; flex: none; transform-origin: 50% 10%; }
.best-doppel .fakt { display: flex; gap: 6px; align-items: baseline; margin-top: 3px; line-height: 1.4; }
.best-doppel .fakt .sym { flex: none; width: 16px; text-align: center; }
.best-doppel-stand { margin-top: 7px; font-weight: 600; }
.best-doppel-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.best-doppel-knoepfe .btn { font-size: 12px; border-radius: 8px; }
/* Umriss-Knöpfe gab es im Stylesheet nicht (der Browser malte graue Klötze) — hier nur für den Alarm definiert. */
.best-doppel-knoepfe .btn-outline-success { background: #fff; color: #15803d; border-color: #86efac; }
/* Karte „Status quo“ in der Akte (08.10.2026): je Fall ein Block wie die Storno-Blöcke der Bestellkarte. */
.sqk-karte .sqk-fall { margin-bottom: 8px; }
.sqk-text { line-height: 1.4; }
.sqk-stand { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sqk-chip { display: inline-block; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; background: #eef2f6; color: #4b5563; }
.sqk-chip.gruen { background: #e3f4ee; color: #1c7a5a; }
.sqk-chip.orange { background: #fdf0e3; color: #a3560f; }
.sqk-chip.grau { background: #eceff2; color: #6b7784; }
.sqk-tickets { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.sqk-bitte { margin-top: 8px; background: #fff; border: 1px solid var(--pf-linie); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; color: inherit; }
.sqk-bitte label { display: grid; gap: 2px; font-size: 12px; font-weight: 600; }
.sqk-bitte label input { font-weight: 400; }
.sqk-vorschau { font-size: 12px; max-height: 220px; overflow: auto; border: 1px dashed var(--pf-linie); border-radius: 6px; padding: 6px 8px; background: #fafafa; }
.sqk-vorschau table { font-size: 11.5px; }
.sqk-meldung { font-size: 12.5px; color: #15803d; margin-top: 4px; white-space: pre-line; }
.sqk-meldung.fehler { color: #b91c1c; }
.sqk-hinweis { font-size: 11px; margin-top: 6px; line-height: 1.35; }
.best-doppel-knoepfe .btn-outline-success:hover:not(:disabled) { background: #f0fdf4; border-color: #22c55e; }
.best-doppel-knoepfe .btn-outline-danger { background: #fff; color: #b91c1c; border-color: #fca5a5; }
.best-doppel-knoepfe .btn-outline-danger:hover:not(:disabled) { background: #fef2f2; border-color: #ef4444; }
/* Bestellung nennt einen anderen Markt als das Ticket — das einzige Mal, dass die Karte den Markt zeigt. */
.best-anders { grid-column: 1 / -1; color: #9a3412; background: #fff7ed; border-radius: 8px; padding: 3px 8px; }
.pf-bezug.pf-doppel { background: #fee2e2; color: #991b1b; font-weight: 700; }
.pf-bezug.pf-doppel.rueckfrage { background: #fef3c7; color: #92400e; }
@media (max-width: 700px) { .best-karte .best-kopf { grid-template-columns: 1fr; } }

/* Stand je Gewerk im Bestätigungs-Block der Akte */
.best-gewerk { display: inline-flex; gap: 4px; align-items: center; padding: 1px 7px; border-radius: 10px; background: #f1f5f9; color: #334155; font-size: 11px; font-weight: 600; }
.best-gewerk.ja { background: #d1fae5; color: #065f46; }
.best-gewerk.nein { background: #fee2e2; color: #b91c1c; }
.best-gewerk a { text-decoration: none; color: inherit; font-weight: 700; }

/* ── Sortierung, Vertretung, Zusammenführen (28.09.2026) ── */
.pf-sortierung { display: inline-flex; gap: 3px; align-items: center; }
.pf-richtung { min-width: 28px; text-align: center; padding: 3px 7px; }
.pf-hinweis-vertretung { padding: 7px 12px; font-size: 12px; color: #3730a3; background: #eef2ff; border-bottom: 1px solid var(--border); line-height: 1.45; }
.pf-zusammen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 12.5px; background: #f8fafc; border: 1px solid var(--border);
               border-radius: 10px; padding: 9px 12px; }
.pf-zusammen input[type=number] { width: 110px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12.5px; }
.pf-zusammen .hinweis { flex-basis: 100%; font-size: 11.5px; color: var(--text-muted); }
.pf-zusammen .fehler { flex-basis: 100%; font-size: 12px; color: #b91c1c; }
/* Personen: Profilbilder der Kollegen füllen den Kreis, Logos der Organisationen werden eingepasst. */
.pf-avatar { display: inline-block; flex-shrink: 0; border-radius: 50%; vertical-align: middle; background: #fff; border: 1px solid #e2e8f0; box-sizing: border-box; }
img.pf-avatar.foto { object-fit: cover; }
img.pf-avatar.logo { object-fit: contain; padding: 1px; }
.pf-avatar-init { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; border: 0; letter-spacing: .02em; line-height: 1; }
.pf-absender-logo { margin-right: 4px; vertical-align: -3px; }
.pf-msg-kopf .pf-avatar { margin-right: -4px; }
.pf-kontakt-karte { display: flex; gap: 10px; align-items: flex-start; }
.pf-kontakt-text { min-width: 0; }
.pf-kontakt-text a.k { display: inline-block; margin-top: 4px; color: var(--rwd-blue-700); }
.pf-zusammen .pf-chip .pf-avatar { margin-right: 3px; }

/* Kontakte: Endnutzer und Organisationen (mit Logo und Domänen). */
.kt { max-width: 1200px; margin: 0 auto; padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 12px; }
.kt-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kt-kopf h1 { font-size: 20px; margin: 0; }
.kt-reiter { margin-left: auto; }
.kt-meldung { padding: 8px 12px; border-radius: 8px; background: #ecfdf5; color: #065f46; font-size: 13px; }
.kt-meldung.fehler { background: #fef2f2; color: #b91c1c; }
.kt-leiste { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kt-leiste .hinweis { font-size: 12px; color: var(--text-muted); }
.kt-suche { flex: 1; min-width: 240px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; }
.kt-leiste select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; max-width: 260px; }
.kt-formular { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: #fff; }
.kt-formular h3 { font-size: 15px; margin: 0 0 10px; }
.kt-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 14px; }
.kt-felder label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--text-muted); margin: 0; }
.kt-felder label.breit { grid-column: 1 / -1; }
.kt-felder input, .kt-felder select, .kt-felder textarea { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 13px; color: var(--text); background: #fff; }
.kt-knoepfe { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.kt-knoepfe .hinweis, .kt-logo .hinweis { flex: 1; font-size: 12px; color: var(--text-muted); }
.kt-logo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.kt-logo img { width: 48px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 50%; background: #fff; padding: 2px; }
.kt-datei { position: relative; overflow: hidden; margin: 0; }
.kt-datei input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.kt-tabelle tr.klickbar { cursor: pointer; }
.kt-tabelle tr.klickbar:hover td { background: #f8fafc; }
.kt-tabelle .k { font-size: 11.5px; color: var(--text-muted); }
.kt-hinweis { font-size: 12px; color: var(--text-muted); }
.es-bild-knoepfe { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* Führung durchs Postfach: Lichtkegel auf der erklärten Stelle, Karte daneben; alles andere ist gesperrt. */
.pf-tour { position: fixed; inset: 0; z-index: 1000; }
.pf-tour-sperre { position: fixed; inset: 0; }
.pf-tour.ohne-ziel .pf-tour-sperre { background: rgba(15, 23, 42, .55); }
.pf-tour-licht { position: fixed; border-radius: 10px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .55); outline: 2px solid #fff;
                 pointer-events: none; transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; }
.pf-tour-karte { position: fixed; width: min(360px, calc(100vw - 24px)); background: #fff; border-radius: 12px; padding: 16px 18px 12px;
                 box-shadow: 0 18px 50px rgba(0, 0, 0, .3); font-size: 13.5px; line-height: 1.5; transition: left .25s ease, top .25s ease; }
.pf-tour-karte.mitte { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); }
.pf-tour-schritt { font-size: 11px; color: var(--text-muted); letter-spacing: .05em; }
.pf-tour-karte h3 { margin: 2px 0 6px; font-size: 16px; color: #14375E; }
.pf-tour-karte p { margin: 0 0 12px; color: #334155; }
.pf-tour-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pf-tour-links a { border: 1px solid var(--rwd-blue-700); color: var(--rwd-blue-700); border-radius: 8px; padding: 5px 10px; font-size: 12.5px; text-decoration: none; }
.pf-tour-knoepfe { display: flex; gap: 8px; align-items: center; }
.pf-tour-knoepfe span { flex: 1; }
.pf-tour-knoepfe button { border: 1px solid var(--border); background: #fff; border-radius: 8px; padding: 5px 12px; font: inherit; font-size: 12.5px; cursor: pointer; }
.pf-tour-knoepfe button:disabled { opacity: .4; cursor: default; }
.pf-tour-knoepfe .pf-tour-weiter { background: var(--rwd-blue-700); border-color: var(--rwd-blue-700); color: #fff; }
.pf-tour-knoepfe .pf-tour-ende { border: 0; padding-left: 0; color: var(--text-muted); }
.pf-hilfe { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.pf-hilfe .pf-chip { text-decoration: none; }

/* Empfängerfeld mit Vorschlägen: Kollegen und Endnutzer beim Tippen. */
.pf-empf { position: relative; min-width: 0; }
.pf-empf input { width: 100%; box-sizing: border-box; }
.pf-empf-liste { position: absolute; left: 0; right: 0; top: calc(100% + 3px); z-index: 60; background: #fff; border: 1px solid var(--border);
                 border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .14); max-height: 320px; overflow-y: auto; padding: 4px; }
.pf-empf-eintrag { display: flex; gap: 9px; align-items: center; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
.pf-empf-eintrag.aktiv, .pf-empf-eintrag:hover { background: #eff6ff; }
.pf-empf-eintrag .txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pf-empf-eintrag .name { font-weight: 600; font-size: 12.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-empf-eintrag .adr { font-size: 11.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-empf-eintrag .info { margin-left: auto; font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42%; }
.pf-empf-neu { padding: 7px 9px; font-size: 12px; color: var(--text-muted); }
.pf-empf-neu a { color: var(--rwd-blue-700); }

/* KI im Postfach: ✨ markiert, was die KI formuliert oder gesetzt hat — ruhig, ein Farbton. */
.pf-anliegen-zeile { font-size: 12.5px; color: #6d28d9; margin: -2px 0 2px; }
.pf-vorschau.pf-anliegen { color: #5b21b6; }
.pf-ki-marke { margin-left: -4px; font-size: 13px; cursor: help; }
.pf-ki-vorschlag { border: 1px dashed #c4b5fd; background: #f5f3ff; color: #5b21b6; border-radius: 999px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer; }
.pf-ki-karte { border: 1px solid #ddd6fe; background: #faf5ff; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
.pf-ki-karte .kopf { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.pf-ki-karte .kopf .stand { color: var(--text-muted); font-size: 11.5px; }
.pf-ki-karte .kopf button { border: 0; background: none; cursor: pointer; font: inherit; font-size: 12px; color: #5b21b6; }
.pf-ki-karte .kopf button:first-of-type { margin-left: auto; }
.pf-ki-karte .text { white-space: pre-line; line-height: 1.5; color: var(--text); }
.pf-editor-leiste button.pf-ki-knopf { border-color: #c4b5fd; color: #5b21b6; background: #faf5ff; padding: 0 8px; }
.pf-editor-leiste button.pf-ki-knopf.aktiv { background: #ede9fe; }
.pf-ki-hinweis { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf-ki-hinweis input { flex: 1; min-width: 220px; padding: 6px 8px; border: 1px solid #c4b5fd; border-radius: 6px; font: inherit; font-size: 12.5px; }
.pf-ki-hinweis .hinweis { flex-basis: 100%; font-size: 11.5px; color: var(--text-muted); }

/* Beobachter: Namen als Chips mit ✕, Kollegen per Auswahl dazu. */
.pf-zusammen span.pf-chip { cursor: default; display: inline-flex; align-items: center; gap: 2px; }
.pf-zusammen .pf-chip button { border: 0; background: none; cursor: pointer; padding: 0 0 0 4px; font: inherit; color: var(--text-muted); }
.pf-zusammen select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12.5px; background: #fff; }
.pf-vorgaenger { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; background: #fff7ed; border: 1px solid #fdba74;
                 border-radius: 10px; padding: 9px 12px; color: #7c2d12; }
.pf-vorgaenger > span { flex: 1; min-width: 220px; line-height: 1.45; }
.pf-vorgaenger a { color: inherit; }

/* ── Benachrichtigungen: Glocke, Liste, Pop-ups ── */
.mz-glocke { position: relative; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; cursor: pointer; font: inherit; }
.mz-glocke.seite { width: 100%; padding: 9px 12px; border-radius: 7px; margin-bottom: 2px; font-size: 13.5px; color: rgba(255,255,255,0.78); text-align: left; }
.mz-glocke.seite:hover, .mz-glocke.seite.offen { background: rgba(255,255,255,0.08); color: #fff; }
.mz-glocke.seite svg { width: 16px; height: 16px; flex: none; }
.mz-glocke.seite .mz-zahl { margin-left: auto; }
.mz-glocke.oben .mz-zahl { position: absolute; top: 4px; right: 1px; }
.mz-zahl { background: #dc2626; color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 6px; line-height: 1.4; min-width: 18px; text-align: center; }

.mz-schleier { position: fixed; inset: 0; z-index: 1600; background: transparent; }
.mz-panel { position: fixed; left: 252px; top: 14px; width: 390px; max-width: calc(100vw - 24px); max-height: calc(100vh - 28px); z-index: 1610;
            background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(15,23,42,.22);
            display: flex; flex-direction: column; overflow: hidden; }
.mz-panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.mz-panel-aktionen { display: inline-flex; gap: 12px; align-items: center; }
.mz-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; color: var(--rwd-blue-700); cursor: pointer; text-decoration: none; }
.mz-link:hover { text-decoration: underline; }
.mz-zu { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--text-muted); padding: 3px 6px; border-radius: 6px; line-height: 1; }
.mz-zu:hover { background: #f1f5f9; color: var(--text); }
.mz-panel-liste { overflow-y: auto; }
.mz-eintrag { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid #f1f5f9;
              background: #fff; padding: 10px 14px; cursor: pointer; font: inherit; color: var(--text); }
.mz-eintrag:hover { background: #f8fafc; }
.mz-eintrag.neu { background: #f3f8fd; box-shadow: inset 3px 0 0 var(--rwd-blue-700); }
.mz-symbol { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
             background: #e8f0f8; color: var(--rwd-blue-700); font-size: 14px; flex: none; }
.mz-symbol.gut { background: #d1fae5; color: #065f46; }
.mz-symbol.achtung { background: #fee2e2; color: #b91c1c; }
.mz-symbol.person { background: #ede9fe; color: #5b21b6; }
.mz-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 12.5px; }
.mz-text strong { font-size: 13px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-text > span { color: #475569; line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mz-text > span.mz-zeit { font-size: 11px; color: var(--text-muted); }
.mz-leer { padding: 34px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }

.mz-popups { position: fixed; right: 18px; top: 16px; z-index: 1620; display: flex; flex-direction: column; gap: 10px; width: 360px;
             max-width: calc(100vw - 24px); pointer-events: none; }
.mz-popup { pointer-events: auto; display: flex; align-items: flex-start; gap: 2px; background: #fff; border: 1px solid var(--border);
            border-left: 4px solid var(--rwd-blue-700); border-radius: 12px; box-shadow: 0 14px 36px rgba(15,23,42,.20); padding: 4px 6px 4px 0;
            animation: mz-ein .22s ease-out; }
.mz-popup.gut { border-left-color: #2ba587; }
.mz-popup.achtung { border-left-color: #dc2626; }
.mz-popup.person { border-left-color: #7c3aed; }
.mz-popup-inhalt { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; flex: 1; min-width: 0; text-align: left; border: 0; background: none;
                   padding: 8px 4px 8px 12px; cursor: pointer; font: inherit; color: var(--text); }
@keyframes mz-ein { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mz-popup { animation: none; } }
@media (max-width: 1023px) {
    .mz-panel { left: 8px; right: 8px; top: calc(58px + env(safe-area-inset-top)); width: auto; max-height: 70vh; }
    .mz-popups { right: 8px; left: 8px; width: auto; top: calc(60px + env(safe-area-inset-top)); }
    .mz-glocke.seite { padding: 13px 14px; font-size: 15px; }
}

/* ── Einstellungen (neu gestaltet 28.09.2026): links die Bereiche, rechts genau einer ── */
.es-kopfzeile { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.es-kopfzeile h1 { margin: 0; }
.es { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 30px; align-items: start; }
.es-nav { position: sticky; top: calc(var(--kopf, 0px) + 24px); display: flex; flex-direction: column; gap: 2px; }
.es-nav-gruppe { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 16px 12px 6px; }
.es-nav-gruppe:first-child { padding-top: 0; }
.es-nav button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; border-radius: 10px;
                 padding: 8px 12px; font: inherit; font-size: 13.5px; color: var(--text); cursor: pointer; }
.es-nav button .ico { width: 28px; height: 28px; border-radius: 8px; background: #e8edf3; display: inline-flex; align-items: center; justify-content: center;
                      font-size: 13px; flex: none; }
.es-nav button:hover { background: #e8edf3; }
.es-nav button.aktiv { background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.06), 0 0 0 1px var(--border); font-weight: 600; }
.es-nav button.aktiv .ico { background: var(--rwd-blue-700); color: #fff; }

.es-inhalt { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.es-titel { margin: 0 0 4px; font-size: 19px; font-weight: 700; }
.es-unter { margin: 0; color: var(--text-muted); font-size: 13px; max-width: 760px; line-height: 1.55; }
.es-karte { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); overflow: hidden; }
.es-karte > header { padding: 16px 18px 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.es-karte > header h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.es-karte > header p { margin: 3px 0 0; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; max-width: 720px; }
.es-karte > header + .es-zeile { margin-top: 8px; }
.es-karte-innen { padding: 16px 18px 18px; }
.es-zeile { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 18px; border-top: 1px solid #f1f5f9; }
.es-karte > .es-zeile:first-child { border-top: 0; }
.es-zeile .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.es-zeile .t strong { font-size: 13.5px; font-weight: 600; }
.es-zeile .t span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.es-zeile .r { display: flex; align-items: center; gap: 22px; flex: none; }
.es-zeile .r .zelle { width: 58px; display: flex; justify-content: center; }
.es-spalten { display: flex; justify-content: flex-end; gap: 22px; padding: 12px 18px 2px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
              color: var(--text-muted); font-weight: 600; }
.es-spalten span { width: 58px; text-align: center; }
.es-fuss { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid #f1f5f9; background: #fafbfc; flex-wrap: wrap; }
.es-fuss .hinweis { margin-right: auto; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.es-abschnitt { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin: 18px 0 8px; }
.es-abschnitt:first-child { margin-top: 0; }
.es-wort { color: var(--rwd-blue-700); font-weight: 800; }
.es-signatur { border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px; font-family: Calibri, Arial, sans-serif; font-size: 14px;
               line-height: 1.45; color: #1f2937; background: #fcfcfd; overflow-x: auto; }

/* Schalter */
.es-schalter { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; color: var(--text-muted); user-select: none; }
.es-schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.es-schalter .bahn { width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .15s; flex: none; }
.es-schalter .bahn::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff;
                            box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.es-schalter input:checked + .bahn { background: var(--rwd-teal-600); }
.es-schalter input:checked + .bahn::after { transform: translateX(16px); }
.es-schalter input:focus-visible + .bahn { box-shadow: 0 0 0 3px rgba(31,78,122,.25); }
.es-schalter input:disabled + .bahn { opacity: .5; }
.es-schalter .was { display: none; }

/* Auswahl-Karten (Modus, ERP-Rückweg) */
.es-optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.es-option { text-align: left; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; padding: 13px 40px 13px 14px; cursor: pointer; font: inherit;
             color: var(--text); display: flex; flex-direction: column; gap: 4px; position: relative; }
.es-option:hover:not(:disabled) { border-color: #94a3b8; }
.es-option.aktiv { border-color: var(--rwd-blue-700); background: #f3f8fd; box-shadow: 0 0 0 3px rgba(31,78,122,.10); }
.es-option.aktiv::after { content: '✓'; position: absolute; top: 11px; right: 12px; width: 20px; height: 20px; border-radius: 50%;
                          background: var(--rwd-blue-700); color: #fff; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.es-option strong { font-size: 13.5px; }
.es-option span { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.es-option:disabled { cursor: default; opacity: 1; }
.es-option:disabled:not(.aktiv) { opacity: .6; }

/* Felder */
.es-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 14px; }
.es-feld { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: #475569; min-width: 0; }
.es-feld.breit { grid-column: 1 / -1; }
.es-feld input, .es-feld select, .es-feld textarea, .es-eingabe { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit;
             font-size: 13.5px; font-weight: 400; background: #fff; color: var(--text); min-width: 0; width: 100%; }
.es-feld textarea { resize: vertical; line-height: 1.45; }
.es-feld input:focus, .es-feld select:focus, .es-feld textarea:focus, .es-eingabe:focus { outline: none; border-color: var(--rwd-blue-700);
             box-shadow: 0 0 0 3px rgba(31,78,122,.12); }
.es-feld input:disabled, .es-feld select:disabled, .es-feld textarea:disabled { background: #f8fafc; color: var(--text-muted); }

/* Hinweisband */
.es-band { border-radius: 12px; padding: 11px 14px; font-size: 13px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.es-band.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.es-band.fehler { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.es-band.info { background: #f3f8fd; color: #1f4e7a; border: 1px solid #cfe0f1; }
.es-band a { color: inherit; }

/* Verteilregeln */
.es-regel { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 18px; border-top: 1px solid #f1f5f9; }
.es-regel.aus .t, .es-regel.aus .nr { opacity: .55; }
.es-regel .nr { width: 28px; height: 28px; border-radius: 8px; background: #e8edf3; display: inline-flex; align-items: center; justify-content: center;
                font-size: 12px; font-weight: 700; color: #475569; }
.es-regel .t { min-width: 0; }
.es-regel .t strong { font-size: 13.5px; }
.es-regel .t .satz { font-size: 12.5px; color: #475569; line-height: 1.45; margin-top: 2px; }
.es-regel .t .stat { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.es-regel .a { display: flex; align-items: center; gap: 6px; }
.es-mini { border: 1px solid var(--border); background: #fff; border-radius: 8px; min-width: 30px; height: 30px; padding: 0 9px; font: inherit; font-size: 12.5px;
           cursor: pointer; color: var(--text); white-space: nowrap; }
.es-mini:hover:not(:disabled) { border-color: var(--rwd-blue-700); color: var(--rwd-blue-700); }
.es-mini.rot:hover:not(:disabled) { border-color: #dc2626; color: #dc2626; }
.es-bedingung { display: grid; grid-template-columns: minmax(150px, 1fr) minmax(130px, .8fr) minmax(170px, 1.5fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.es-bedingung.aktion { grid-template-columns: minmax(150px, 1fr) minmax(200px, 2.3fr) auto; }

/* Tabellen, Marken, Personen */
.es-rollen { overflow-x: auto; }
.es-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.es-tabelle th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 600;
                 padding: 11px 14px; border-bottom: 1px solid var(--border); background: #fafbfc; white-space: nowrap; }
.es-tabelle td { padding: 11px 14px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.es-tabelle tr:last-child td { border-bottom: 0; }
.es-tabelle td > input, .es-tabelle td > select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: #fff;
                 min-width: 0; max-width: 100%; }
.es-marke { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: #e5e7eb;
            color: #374151; white-space: nowrap; }
.es-marke.gruen { background: #d1fae5; color: #065f46; }
.es-marke.gelb { background: #fef3c7; color: #92400e; }
.es-marke.rot { background: #fee2e2; color: #b91c1c; }
.es-marke.blau { background: #dbeafe; color: #1d4ed8; }
.es-person { display: flex; align-items: center; gap: 12px; }
.es-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--rwd-blue-700); color: #fff; display: inline-flex; align-items: center;
             justify-content: center; font-size: 12.5px; font-weight: 700; flex: none; }
.es-avatar.aus { background: #cbd5e1; }

/* Massenversand (28.09.2026) */
.mv-schritte { display: flex; gap: 8px; margin: 0 0 16px; flex-wrap: wrap; }
.mv-schritte button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: #fff; border-radius: 999px;
                      padding: 7px 14px 7px 7px; font: inherit; font-size: 13px; cursor: pointer; }
.mv-schritte button span { width: 24px; height: 24px; border-radius: 50%; background: #e8edf3; display: inline-flex; align-items: center;
                           justify-content: center; font-weight: 700; font-size: 12px; }
.mv-schritte button.aktiv { border-color: var(--rwd-blue-700); box-shadow: 0 0 0 3px rgba(31,78,122,.10); font-weight: 600; }
.mv-schritte button.aktiv span { background: var(--rwd-blue-700); color: #fff; }
.mv-schritte button:disabled { opacity: .5; cursor: default; }
.mv-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.mv-quelle { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.mv-quelle button { text-align: left; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; padding: 10px 12px; font: inherit;
                    cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.mv-quelle button strong { font-size: 13.5px; }
.mv-quelle button span { font-size: 12px; color: var(--text-muted); }
.mv-quelle button.aktiv { border-color: var(--rwd-blue-700); background: #f3f8fd; box-shadow: 0 0 0 3px rgba(31,78,122,.10); }
.mv-leise { font-weight: 400; text-transform: none; letter-spacing: 0; }
.mv-gewerke, .mv-anhaenge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mv-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
           font-size: 12.5px; cursor: pointer; background: #fff; user-select: none; }
.mv-chip input { display: none; }
.mv-chip.an { background: #dbeafe; border-color: #93c5fd; color: #1d4ed8; font-weight: 600; }
.mv-chip button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 0 0 2px; }
.mv-datei { position: relative; overflow: hidden; display: inline-flex; align-items: center; cursor: pointer; }
.mv-datei input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.mv-touren { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin-top: 12px; max-height: 360px; overflow-y: auto; }
.mv-tour { text-align: left; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; padding: 9px 11px; font: inherit; cursor: pointer;
           display: flex; flex-direction: column; gap: 2px; }
.mv-tour strong { font-size: 13px; }
.mv-tour span { font-size: 12.5px; color: #334155; }
.mv-tour em { font-style: normal; font-size: 11.5px; color: var(--text-muted); }
.mv-tour.an { border-color: var(--rwd-blue-700); background: #f3f8fd; }
.mv-tabelle tr.aus td { opacity: .5; }
.mv-tabelle tr.fehler td { background: #fef2f2; }
.mv-mail { font-size: 12.5px; color: #475569; word-break: break-all; }
.mv-editor { min-height: 220px; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-top: 8px; background: #fff; }
.mv-vorschau { border: 1px dashed var(--border); border-radius: 10px; padding: 14px 16px; background: #fff; overflow-x: auto; }
.mv-lauf { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 13px 18px; border-top: 1px solid #f1f5f9;
           color: inherit; text-decoration: none; }
.mv-lauf:first-child { border-top: 0; }
.mv-lauf:hover { background: #fafbfc; }
.mv-lauf .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mv-lauf .t strong { font-size: 13.5px; }
.mv-lauf .t span { font-size: 12.5px; color: var(--text-muted); }
.mv-lauf .r { display: flex; align-items: center; gap: 10px; }
.mv-lauf .mv-balken { grid-column: 1 / -1; }
.mv-zahl { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; }
.mv-balken { height: 6px; border-radius: 999px; background: #e8edf3; overflow: hidden; }
.mv-balken span { display: block; height: 100%; background: var(--rwd-teal-600); border-radius: 999px; transition: width .4s; }
.mv-balken.gross { height: 10px; }
.mv-fortschritt { display: flex; flex-direction: column; gap: 10px; }
.mv-zahlen { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; }
.mv-zahlen .rot { color: #b91c1c; }
.mv-daten { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; font-size: 12.5px; color: #475569; }
.mv-filter { display: inline-flex; gap: 4px; }
.mv-filter button { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.mv-filter button.aktiv { background: var(--rwd-blue-700); border-color: var(--rwd-blue-700); color: #fff; }
/* Bestätigungslauf: Einstieg hervorgehoben, Rücklauf je Markt (Zähler als Filter, Chips je Woche) */
.mv-schnell .mv-haupt { background: var(--rwd-blue-700); border-color: var(--rwd-blue-700); color: #fff; font-weight: 600; }
.mv-bestaetigung { margin-bottom: 14px; }
.mv-rueck-zahlen { display: flex; flex-wrap: wrap; gap: 10px; }
.mv-rueck-kachel { display: inline-flex; align-items: baseline; gap: 6px; border: 1px solid var(--border); background: #fff; border-radius: 10px;
                   padding: 8px 14px; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; }
.mv-rueck-kachel strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.mv-rueck-kachel.bestaetigt strong { color: #15803d; }
.mv-rueck-kachel.abgelehnt strong { color: #b91c1c; }
.mv-rueck-kachel.offen strong { color: #b45309; }
.mv-rueck-kachel.sonst { cursor: default; color: var(--text-muted); }
.mv-rueck-kachel.aktiv { border-color: var(--rwd-blue-700); box-shadow: 0 0 0 2px rgba(31,78,122,.15); }
.mv-rueck { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 8px; margin: 1px 4px 1px 0; }
.mv-rueck.bestaetigt { background: #dcfce7; color: #166534; }
.mv-rueck.abgelehnt { background: #fee2e2; color: #b91c1c; }
.mv-rueck.offen { background: #fef3c7; color: #92400e; }
.mv-rueck.sonst { background: #f1f5f9; color: #475569; }

/* Zuständigkeiten je Kunde bzw. Gesellschaft (28.09.2026) */
.zs-kunde { padding: 14px 18px 4px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--rwd-blue-700); font-weight: 800;
            border-top: 1px solid #eef2f6; }
.es-karte > header + .zs-kunde { margin-top: 8px; border-top: 0; }
.zs-zeile { padding-top: 9px; padding-bottom: 9px; }
/* 16.10.2026: rechte Spalte bricht um statt über den Rand zu laufen (Bearbeiten-Knopf saß außerhalb). */
.zs-zeile .t, .zs-rueckfall .t { flex: 1 1 0; }
.zs-zeile .r, .zs-rueckfall .r { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.zs-zeile.aus .t { opacity: .55; }
.zs-merkmale { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 3px; }
.zs-merkmal { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: #f1f5f9; color: #475569;
              font-size: 11px; line-height: 1.6; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.zs-agent { min-width: 210px; max-width: 260px; }
.zs-agentname { font-size: 13px; font-weight: 600; }
.zs-rueckfall { background: #fafbfc; }
.zs-vorschlag { display: flex; flex-wrap: wrap; gap: 6px; }
.zs-hilfe { margin: 10px 0 0; font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 760px; }
.zs-probe-kopf { font-size: 13px; }
.zs-beispiel { display: block; font-size: 12.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1023px) {
    .es { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .es-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; }
    .es-nav-gruppe { display: none; }
    .es-nav button { width: auto; white-space: nowrap; border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 7px 13px; }
    .es-nav button .ico { display: none; }
    .es-nav button.aktiv { background: var(--rwd-blue-700); color: #fff; box-shadow: none; border-color: var(--rwd-blue-700); }
    .es-zeile { flex-direction: column; align-items: stretch; gap: 10px; }
    .es-zeile .r { justify-content: flex-start; flex-wrap: wrap; gap: 16px; }
    .es-zeile .r .zelle { width: auto; }
    .es-spalten { display: none; }
    .es-schalter .was { display: inline; }
    .es-regel { grid-template-columns: auto minmax(0, 1fr); }
    .es-regel .a { grid-column: 1 / -1; justify-content: flex-end; flex-wrap: wrap; }
    .es-bedingung, .es-bedingung.aktion { grid-template-columns: minmax(0, 1fr); }
    .zs-agent { min-width: 0; max-width: none; flex: 1 1 auto; }
}

/* ── Markt-Karte der Akte (30.09.2026): ohne Debitor und Region, die Verknüpfung löst das ✕ im Kopf ── */
.pf-markt-kopf { display: flex; align-items: flex-start; gap: 6px; }
.pf-markt-kopf strong { flex: 1; min-width: 0; }
.pf-markt-loesen { flex: none; border: 0; background: none; color: #94a3b8; cursor: pointer; font: inherit; font-size: 12px; line-height: 1;
                   padding: 3px 5px; border-radius: 6px; transition: background-color .15s, color .15s; }
.pf-markt-loesen:hover:not(:disabled) { background: #fee2e2; color: #b91c1c; }
.pf-markt-loesen:disabled { opacity: .4; cursor: default; }
/* Stammdaten live aus dem ERP: Telefon und Postfach in einer Zeile, der Einsatzhinweis einzeilig (ganz im Tooltip) */
.pf-markt-kontakt { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; margin: 2px 0; }
.pf-markt-kontakt a { text-decoration: none; white-space: nowrap; }
.pf-markt-kontakt a:hover { text-decoration: underline; }
/* Info-Zeile im neuen Ticket: Kontakt und Markt (12.10.2026) */
.pf-neu-info { margin: 0; padding: 7px 10px; font-size: 12.5px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-neu-info .k { color: var(--text-muted); }
.pf-neu-info-tickets { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 2px; color: var(--text-muted); }
.pf-neu-info-tickets a { color: var(--rwd-blue-700); text-decoration: none; max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-neu-info-tickets a:hover { text-decoration: underline; }
.pf-markt-hinweis { margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help; }
/* Anrede in der Kontakt-Karte: kleiner Segmentschalter Herr | Frau | neutral */
.pf-anrede { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.pf-anrede-wahl { padding: 2px; border-radius: 8px; }
.pf-anrede-wahl button { padding: 1px 8px; font-size: 11px; border-radius: 6px; }

/* ── Bewegung (User 30.09.2026: „paar kleine, wenig performance-starke Animationen“) ──
   Nur transform und opacity (laufen auf der Grafikkarte, kein Neuberechnen des Layouts), kurz, einmal beim Einfügen —
   nie in Endlosschleife. Wer im System „Bewegung reduzieren“ eingestellt hat, sieht keine davon. */
@keyframes pf-auf { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes pf-ein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pf-blende { from { opacity: 0; } to { opacity: 1; } }
@keyframes pf-zoom { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes pf-glocke { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); }
                       60% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: no-preference) {
    /* Kategorie klappt auf, neue Nachricht und neue Listenzeile gleiten herein. */
    .pf-kategorie-inhalt { animation: pf-auf .18s ease-out; }
    .pf-msg { animation: pf-ein .22s ease-out; }
    .pf-zeile { animation: pf-blende .16s ease-out; }
    /* Vorschlagslisten und Dateivorschau öffnen weich. */
    .pf-empf-liste, .pf-erw-liste { animation: pf-auf .14s ease-out; }
    .pf-modal-hg { animation: pf-blende .15s ease-out; }
    .pf-modal { animation: pf-zoom .18s ease-out; }
    /* Offener Doppel-Alarm: die Glocke schwingt zweimal, dann ist Ruhe. */
    .best-doppel:not(.entschieden):not(.erledigt) .best-glocke { animation: pf-glocke .9s ease-in-out .25s 2; }
    /* Knöpfe geben beim Drücken ein wenig nach. */
    .pf-chip:active, .pf-auftrag-knopf:active:not(:disabled), .pf-editor-leiste button:active, .best-doppel-knoepfe .btn:active:not(:disabled),
    .pf-segment button:active:not(:disabled) { transform: scale(.97); }
    .pf-segment button, .best-doppel-knoepfe .btn { transition: background-color .15s, color .15s, box-shadow .15s, transform .08s; }
}

/* Spalten ausblenden (User 05.10.2026: kleine Laptops, „Senden“ war nicht mehr erreichbar) — Klassen am <html>, js/postfach.js */
.pf-spalten { position: absolute; left: 6px; bottom: 6px; z-index: 20; display: flex; gap: 2px; background: #fff; border: 1px solid var(--pf-linie);
              border-radius: 8px; padding: 2px; box-shadow: 0 1px 4px rgba(20,55,94,.12); }
.pf-spalten button { border: 0; background: #eef4fb; color: #14375E; border-radius: 6px; width: 26px; height: 24px; cursor: pointer; font-size: 13px; line-height: 1; }
.pf-spalten button:hover { background: #dbe9f8; }
html.pf-aus-nav .pf-spalten [data-pf-spalte="nav"], html.pf-aus-liste .pf-spalten [data-pf-spalte="liste"],
html.pf-aus-kontext .pf-spalten [data-pf-spalte="kontext"] { background: #f1f5f9; color: #94a3b8; text-decoration: line-through; }
@media (max-width: 1023px) { .pf-spalten { display: none; } }
@media (max-width: 1279px) { .pf-spalten [data-pf-spalte="nav"] { display: none; } }
@media (min-width: 1024px) {
    html.pf-aus-nav .pf-nav:not(.offen), html.pf-aus-nav .pf-griff.nav { display: none !important; }
    html.pf-aus-nav .pf { grid-template-columns: min(var(--pf-liste, var(--pf-liste-std)), 36%) minmax(0, 1fr); }
    html.pf-aus-nav .pf-griff.liste { left: calc(min(var(--pf-liste, var(--pf-liste-std)), 36%) - 1px); }
    html.pf-aus-liste .pf-liste, html.pf-aus-liste .pf-griff.liste { display: none !important; }
    html.pf-aus-liste .pf { grid-template-columns: min(var(--pf-nav, var(--pf-nav-std)), 22%) minmax(0, 1fr); }
    html.pf-aus-nav.pf-aus-liste .pf { grid-template-columns: minmax(0, 1fr); }
    html.pf-aus-kontext .pf-kontext, html.pf-aus-kontext .pf-griff.kontext { display: none !important; }
    html.pf-aus-kontext .pf-koerper { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr) !important; }
}
@media (min-width: 1024px) and (max-width: 1279px) { html.pf-aus-liste .pf { grid-template-columns: minmax(0, 1fr); } }

/* Kleine Bildschirme ohne Ausblenden (User 05.10.2026, 1280×720: „Senden“ lag bei 780 px): Antwortfeld scrollt in sich,
   die Knopfzeile klebt unten; der Kopf scrollt ab begrenzter Höhe; die Mail behält immer einen sichtbaren Streifen. */
.pf-composer { flex: 0 1 auto; max-height: 62%; overflow-y: auto; }
.pf-composer-aktion { position: sticky; bottom: -12px; background: #fff; padding: 6px 0 4px; z-index: 2; }
.pf-koerper { min-height: 110px; }
@media (max-height: 900px) { .pf-kopf { flex-shrink: 1; max-height: 30%; overflow-y: auto; } }

/* Laptop-Layout (User 05.10.2026: „auf dem Laptop kann man damit überhaupt nicht arbeiten“): bis 1599 px Breite sind die
   Ansichten ein Ausklapp-Menü (☰ in der Liste), die Liste wird schmaler, und Aufträge/Markt stehen RECHTS neben dem Ticket
   statt darunter — so bleiben Liste, Mail mit Antwortfeld und Aufträge gleichzeitig sichtbar, nichts schiebt sich übereinander. */
@media (min-width: 1024px) and (max-width: 1599px) {
    .pf { --pf-liste-std: 270px; grid-template-columns: min(var(--pf-liste, var(--pf-liste-std)), 30%) minmax(0, 1fr); }
    .pf-nav { display: none; }
    /* Rechts neben der Tool-Leiste (fest 240 px, z-index 200) — mit left: 0 lag das Menü unsichtbar darunter. */
    .pf-nav.offen { display: flex; position: fixed; left: 240px; top: 0; bottom: 0; width: 240px; z-index: 150; box-shadow: 0 0 30px rgba(0,0,0,.2); }
    .pf-griff.nav, .pf-spalten [data-pf-spalte="nav"] { display: none; }
    .pf-griff.liste { left: calc(min(var(--pf-liste, var(--pf-liste-std)), 30%) - 1px); }
    .pf-nav-knopf { display: inline-block; }
    html.pf-aus-liste .pf { grid-template-columns: minmax(0, 1fr); }
    /* Aufträge/Markt als eigene Spalte über die volle Höhe — das Antwortfeld liegt links darunter, beide bleiben sichtbar. */
    .pf-ticket { --pf-kontext-ist: max(220px, min(var(--pf-kontext, 260px), calc(100% - 440px))); position: relative;
                 display: grid; grid-template-columns: minmax(0, 1fr) var(--pf-kontext-ist);
                 grid-template-rows: auto minmax(110px, 1fr) auto; }
    .pf-ticket > .pf-kopf { grid-column: 1; grid-row: 1; max-height: 24vh; overflow-y: auto; }
    .pf-ticket > .pf-koerper { display: contents; }
    .pf-koerper > .pf-verlauf { grid-column: 1; grid-row: 2; }
    .pf-ticket > .pf-composer { grid-column: 1; grid-row: 3; max-height: 55vh; }
    .pf-koerper > .pf-kontext { grid-column: 2; grid-row: 1 / 4; border-left: 1px solid var(--pf-linie); border-top: 0; max-height: none;
                                padding: 10px 10px 14px; }
    html.pf-aus-kontext .pf-ticket { grid-template-columns: minmax(0, 1fr); }
    .pf-griff.kontext { display: block; }
    .pf-verlauf { padding: 12px 14px; }
    .pf-composer { padding: 8px 14px 10px; }
}

/* Drag & Drop: Rahmen, solange Dateien über dem Antwortfeld schweben */
.pf-composer.pf-drop { outline: 2px dashed var(--rwd-blue-700); outline-offset: -4px; background: #f3f8fd; }
.pf-composer { position: relative; }
.pf-drop-wahl { position: absolute; inset: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 20; }
.pf-drop-wahl.nur-anhang { grid-template-columns: 1fr; }
.pf-drop-wahl.nur-anhang .inline { display: none; }
.pf-drop-zone { border: 2px dashed #9fb3c8; border-radius: 10px; background: rgba(243,248,253,.95); display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; color: var(--rwd-blue-700); font-size: 13px; }
.pf-drop-zone b { font-size: 15px; pointer-events: none; }
.pf-drop-zone span { font-size: 12px; color: #64748b; pointer-events: none; }
.pf-drop-zone.aktiv { border-color: var(--rwd-blue-700); background: #e3eefa; }

/* ── Antwortfeld Variante E (User 08.10.2026): Editor links, Makro-Spalte rechts. Die Spalte scrollt in sich und ist nie
   höher als der Editor — unter dem Textfeld bleibt keine Lücke. ── */
.pf-e { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 0 14px; }
.pf-e[hidden] { display: none; }
.pf-e-links { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pf-e-links .pf-editor { flex: 1 1 auto; min-height: 170px; }
.pf-e-rechts { position: relative; border-left: 1px solid var(--pf-linie); min-height: 240px; }
.pf-e-rechts-inhalt { position: absolute; inset: 0; overflow-y: auto; padding: 0 2px 0 12px; display: flex; flex-direction: column; gap: 6px; }
.pf-e-rechts h4 { margin: 4px 0 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.pf-e-rechts h4 span { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.pf-makro-suche { padding: 5px 9px; border: 1px solid var(--pf-linie); border-radius: 8px; font: inherit; font-size: 12.5px; }
.pf-makro-suche:focus { outline: none; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
.pf-baustein { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid var(--pf-linie); background: #fff; border-radius: 8px;
               padding: 6px 9px; font: inherit; font-size: 12px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.pf-baustein:hover:not(:disabled) { border-color: var(--rwd-blue-700); background: #f8fafc; }
.pf-baustein .n { font-weight: 600; color: var(--text); display: flex; gap: 5px; align-items: baseline; flex-wrap: wrap; }
.pf-baustein .gw { font-size: 10.5px; font-weight: 600; color: #1F4E7A; background: #e8eef6; border-radius: 999px; padding: 0 6px; }
.pf-baustein .v { color: var(--text-muted); font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pf-e-leer { font-size: 11.5px; color: var(--text-muted); }
.pf-werte { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; margin: 0; font-size: 11.5px; }
.pf-werte dt { color: var(--text-muted); font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; font-weight: 400; }
.pf-werte dd { margin: 0; overflow-wrap: anywhere; }
.pf-werte dd.leer { color: #b45309; }
/* Neues Ticket: dieselbe Karte, eigener Rahmen. */
.pf-composer.pf-composer-neu { border: 1px solid var(--pf-linie); border-radius: 10px; padding: 14px; box-shadow: none; }
@media (max-width: 1100px) {
    .pf-e { grid-template-columns: minmax(0, 1fr); }
    .pf-e-rechts { border-left: 0; border-top: 1px solid var(--pf-linie); min-height: 0; margin-top: 8px; }
    .pf-e-rechts-inhalt { position: static; max-height: 220px; padding: 8px 0 0; }
}

/* Werkzeugleiste: Farben, Textmarker, Datei */
.pf-editor-leiste .pf-trenn { width: 1px; height: 18px; background: var(--pf-linie); margin: 0 3px; }
.pf-editor-leiste button.pf-farbe { min-width: 0; width: 18px; height: 18px; border-radius: 50%; padding: 0; background: var(--f); border: 2px solid #fff;
                                    box-shadow: 0 0 0 1px #cbd5e1; }
.pf-editor-leiste button.pf-farbe:hover { box-shadow: 0 0 0 2px var(--rwd-blue-700); background: var(--f); }
.pf-editor-leiste button.pf-marker { min-width: 26px; font-weight: 600; color: #334155; }
.pf-editor-leiste button.pf-marker:hover { filter: brightness(.95); }
.pf-datei-knopf { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--pf-linie); background: #fff; border-radius: 8px; height: 26px;
                  padding: 0 9px; font-size: 12px; cursor: pointer; margin-left: auto; }
.pf-datei-knopf:hover { border-color: var(--rwd-blue-700); background: #f8fafc; }
.pf-datei-knopf input { display: none; }

/* KI-Vorschläge (aus Variante H) */
.pf-ki-leiste { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; background: linear-gradient(90deg, #eef4fb, #f5f0fd);
                border: 1px solid #d7e0ea; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; }
.pf-ki-leiste > b { color: #5b21b6; font-size: 12px; }
.pf-ki-chip { border: 1px solid #d7e0ea; background: #fff; border-radius: 999px; padding: 3px 11px; font: inherit; font-size: 12px; cursor: pointer; color: #1d2733;
              transition: border-color .15s, background-color .15s; }
.pf-ki-chip:hover:not(:disabled) { border-color: #9fb3c8; background: #e3eefa; }
.pf-ki-chip.ueber { border-style: dashed; }
.pf-ki-chip:disabled { opacity: .55; cursor: default; }
.pf-ki-leiste input { flex: 1; min-width: 200px; padding: 4px 9px; border: 1px solid #d7e0ea; border-radius: 8px; font: inherit; font-size: 12.5px; background: #fff; }
.pf-ki-leiste input:focus { outline: none; border-color: #a78bfa; }
.pf-entwurf-hinweis { font-size: 12px; color: var(--text-muted); }
.pf-entwurf-hinweis button { border: 0; background: none; color: var(--rwd-blue-700); cursor: pointer; text-decoration: underline; font: inherit; padding: 0; }

/* Zitierter Verlauf eingeklappt (RWD#603) */
.pf-zitat-knopf { align-self: flex-start; border: 1px dashed #cbd5e1; background: #f8fafc; color: var(--text-muted); border-radius: 999px; padding: 2px 12px;
                  font: inherit; font-size: 11.5px; cursor: pointer; margin: 2px 0 4px; }
.pf-zitat-knopf:hover { border-color: var(--rwd-blue-700); color: var(--rwd-blue-700); }

/* Neues Ticket aus einer Mail (abspalten) */
.pf-abspalten { background: #fff; border-radius: 12px; width: min(620px, 100%); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px;
                box-shadow: 0 20px 50px rgba(15, 23, 42, .25); font-size: 13px; }
.pf-abspalten h3 { margin: 0; font-size: 16px; }
.pf-abspalten .k { color: var(--text-muted); font-size: 12px; }
.pf-abspalten-vorschau { background: #f8fafc; border: 1px solid var(--pf-linie); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; white-space: pre-wrap;
                         max-height: 140px; overflow-y: auto; color: #334155; }
.pf-abspalten label { font-weight: 600; font-size: 12px; margin-top: 4px; }
.pf-abspalten input { padding: 7px 10px; border: 1px solid var(--pf-linie); border-radius: 8px; font: inherit; }
.pf-abspalten input:focus { outline: none; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
.pf-abspalten ul { margin: 2px 0; padding-left: 18px; color: var(--text-muted); font-size: 12px; }
.pf-abspalten .fehler { color: #b91c1c; font-size: 12px; }
.pf-abspalten .aktion { display: flex; gap: 8px; }

/* Unteransichten (Bestellungen: neu / geändert / storniert) eingerückt unter ihrer Oberansicht */
.pf-nav-eintrag.unter { margin-left: 24px; font-size: 12.5px; padding-top: 3px; padding-bottom: 3px; }
.pf-nav-eintrag.unter span:first-child::before { content: "↳ "; color: #94a3b8; }

/* Linke Spalte: Gruppen einklappbar (08.10.2026) */
button.pf-nav-gruppe { display: flex; align-items: center; gap: 5px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
button.pf-nav-gruppe:hover { color: var(--rwd-blue-700); }
.pf-nav-pfeil { display: inline-block; width: 10px; font-size: 10px; }
button.pf-nav-gruppe.zu { color: #64748b; }

/* Status in der Liste deutlich (08.10.2026): kräftigere Plakette und Farbstreifen am Zeilenrand */
.pf-zeile .pf-status { font-size: 11.5px; font-weight: 700; padding: 2px 10px; }
.pf-zeile .pf-status::before { content: "●"; font-size: 8px; margin-right: 5px; vertical-align: 2px; }
.pf-zeile.st-neu { background-image: linear-gradient(to right, #3b82f6 3px, transparent 3px); }
.pf-zeile.st-offen { background-image: linear-gradient(to right, #ef4444 3px, transparent 3px); }
.pf-zeile.st-wartetaufkunde { background-image: linear-gradient(to right, #f59e0b 3px, transparent 3px); }
.pf-zeile.st-wartetintern { background-image: linear-gradient(to right, #8b5cf6 3px, transparent 3px); }
.pf-zeile.st-geloest { background-image: linear-gradient(to right, #10b981 3px, transparent 3px); }

/* Hinweis ans ERP (Fenster an der Auftragskarte) */
.pf-hinweis { background: #fff; border-radius: 12px; width: min(680px, 100%); max-height: 92vh; overflow-y: auto; padding: 18px 20px; display: flex;
              flex-direction: column; gap: 8px; box-shadow: 0 20px 50px rgba(15, 23, 42, .25); font-size: 13px; }
.pf-hinweis h3 { margin: 0; font-size: 16px; }
.pf-hinweis .k { color: var(--text-muted); font-size: 12px; }
.pf-hinweis .feld { font-weight: 600; font-size: 12px; margin-top: 4px; }
.pf-hinweis .liste { display: flex; flex-direction: column; gap: 4px; background: #f8fafc; border: 1px solid var(--pf-linie); border-radius: 8px; padding: 8px 10px; }
.pf-hinweis .liste label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.pf-hinweis .liste input { margin-top: 3px; }
.pf-hinweis textarea { padding: 8px 10px; border: 1px solid var(--pf-linie); border-radius: 8px; font: inherit; resize: vertical; }
.pf-hinweis textarea:focus { outline: none; border-color: var(--rwd-blue-700); box-shadow: var(--pf-fokus); }
.pf-hinweis .ziele { display: flex; gap: 16px; flex-wrap: wrap; }
.pf-hinweis .ziele label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.pf-hinweis .zuviel { color: #b91c1c; font-weight: 700; font-size: 12px; }
.pf-hinweis .fehler { color: #b91c1c; font-size: 12px; }
.pf-hinweis .aktion { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Status-Gruppen der Liste als farbiges Band (08.10.2026) */
.pf-gruppe[class*="gst-"] { font-size: 12.5px; font-weight: 700; text-transform: none; letter-spacing: 0; padding-top: 7px; padding-bottom: 7px;
                            border-left: 4px solid transparent; position: sticky; top: 0; z-index: 2; }
.pf-gruppe.gst-neu { background: #dbeafe; color: #1d4ed8; border-left-color: #3b82f6; }
.pf-gruppe.gst-offen { background: #fee2e2; color: #b91c1c; border-left-color: #ef4444; }
.pf-gruppe.gst-wartetaufkunde { background: #fef3c7; color: #92400e; border-left-color: #f59e0b; }
.pf-gruppe.gst-wartetintern { background: #ede9fe; color: #5b21b6; border-left-color: #8b5cf6; }
.pf-gruppe.gst-geloest { background: #d1fae5; color: #065f46; border-left-color: #10b981; }
.pf-gruppe.gst-geschlossen, .pf-gruppe.gst-verworfen { background: #f1f5f9; color: #475569; border-left-color: #94a3b8; }
.pf-gruppe[class*="gst-"] .zahl { background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 0 8px; }

/* ERP-Stand der Bestellung in der Liste (08.10.2026) */
.pf-bezug.pf-erp { font-weight: 700; }
.pf-bezug.pf-erp.ok { background: #d1fae5; color: #065f46; }
.pf-bezug.pf-erp.laeuft { background: #e0e7ff; color: #3730a3; }
.pf-bezug.pf-erp.fehler { background: #fee2e2; color: #b91c1c; }
.pf-bezug.pf-erp.fehlt { background: #fff7ed; color: #c2410c; border: 1px solid #fdba74; }

/* ── Navigation oben (08.10.2026): Postfach-Höhe, Ansichten-Menü, Glocke und Pop-ups unter der Leiste ── */
.mz-glocke.leiste { padding: 7px; border-radius: 7px; color: rgba(255,255,255,0.85); }
.mz-glocke.leiste:hover, .mz-glocke.leiste.offen { background: rgba(255,255,255,0.12); color: #fff; }
.mz-glocke.leiste .mz-zahl { position: absolute; top: 0; right: -4px; }
@media (min-width: 1024px) {
    .pf { height: calc(100vh - 48px - var(--kopf)); }
    .mz-panel { left: auto; right: 14px; top: calc(var(--kopf) + 8px); max-height: calc(100vh - var(--kopf) - 22px); }
    .mz-popups { top: calc(var(--kopf) + 12px); }
}
@media (min-width: 1024px) and (max-width: 1599px) {
    .pf-nav.offen { left: 0; top: var(--kopf); }
}
/* Neues Ticket (12.10.2026): Textfeld nutzt die Höhe und lässt sich unten rechts mit der Maus größer/kleiner ziehen. */
.pf-verlauf > .pf-composer-neu { flex: 1 1 auto; min-height: 0; max-height: none; }
.pf-composer-neu.pf-e { align-items: stretch; }
.pf-composer-neu .pf-e-links { min-height: 0; }
.pf-composer-neu .pf-editor { flex: 1 1 auto; height: auto; min-height: 240px; max-height: none; resize: vertical; }

/* Wiedervorlage rechts im Ticket (22.10.2026): eingeklappt eine Zeile, aufgeklappt im Stil der Verknüpfen-Eingabe */
.pf-wv { margin-bottom: 8px; }
.pf-wv-kopf { display: flex; align-items: center; gap: 6px; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #fff; padding: 5px 8px; font: inherit; font-size: 12px; color: var(--text-muted); cursor: pointer; text-align: left; }
.pf-wv-kopf.gesetzt { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.pf-wv-feld { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.pf-wv-feld input { padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font: inherit; font-size: 12px; min-width: 0; }
.pf-wv-feld input[type=text] { flex: 1 1 100%; }
.pf-wv-feld .pf-chip { font-size: 12px; }

.pf-kopf-panel { margin: 6px 0 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }

/* =============================================================================
   Postfach-Umbau 02.11.2026 (User): Optik angelehnt an das Faktura-Tool — dunkelblaue linke Spalte mit türkisem
   Aktiv-Balken, weiche Karten, kurze Bewegungen. Schalter Meine/Team, Status als oberste Kategorie mit farbigen Zahlen
   wie die Plaketten der Liste, eigene Ansichten per Ziehen, 48-h-Stoppuhr, Makro-Menü statt Makro-Spalte.
   ============================================================================= */
.pf { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --pf-teal: #2BA587; --pf-ease: cubic-bezier(.2, .8, .2, 1); }

/* ── Linke Spalte dunkel ── */
.pf-nav { background: linear-gradient(180deg, #14375E 0%, #10304f 100%); color: #fff; border-right: 0;
          box-shadow: 4px 0 24px rgba(10, 30, 55, .14); padding-bottom: 4px; }
.pf-nav-kopf { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 12px; }
.pf-nav-kopf .btn { background: rgba(255, 255, 255, .1); border: 0; color: #fff; transition: background .15s, transform .15s var(--pf-ease); }
.pf-nav-kopf .btn:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.pf-nav-kopf .btn-primary { background: var(--pf-teal); }
.pf-nav-kopf .btn-primary:hover { background: #239377; }
.pf-nav-gruppe, button.pf-nav-gruppe { color: rgba(255, 255, 255, .5); padding: 16px 16px 6px; }
button.pf-nav-gruppe:hover { color: #fff; }
button.pf-nav-gruppe.zu { color: rgba(255, 255, 255, .38); }
button.pf-nav-gruppe.status { color: #9ee0cb; font-size: 11px; }
.pf-nav-eintrag { position: relative; color: rgba(255, 255, 255, .8); background: transparent; border-radius: 10px;
                  transition: background .18s, color .18s, transform .18s var(--pf-ease), opacity .15s; }
.pf-nav-eintrag:hover { background: rgba(255, 255, 255, .09); color: #fff; transform: translateX(2px); }
.pf-nav-eintrag.aktiv { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; box-shadow: none; }
.pf-nav-eintrag.aktiv::before { content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 4px; border-radius: 0 4px 4px 0;
                                background: var(--pf-teal); animation: pf-balken .3s var(--pf-ease) both; }
@keyframes pf-balken { from { transform: scaleY(0); } to { transform: none; } }
.pf-nav-eintrag.unter span:first-child::before { color: rgba(255, 255, 255, .35); }
.pf-nav-eintrag.eigen span:first-child { color: #fde68a; }
.pf-nav-eintrag.aktiv.eigen span:first-child { color: #fff; }
.pf-nav-zahl { color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .12); border-radius: 999px; padding: 0 7px; min-width: 22px;
               height: 19px; line-height: 19px; text-align: center; font-weight: 600; }
.pf-nav-zahl.rot { color: #fff; background: #ef4444; }
/* Status-Zahlen in den Farben der Plaketten: Neu blau, Offen rot, Wartet intern violett, Wartet auf Kunde gelb. */
.pf-nav-zahl.st { color: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.pf-nav-zahl.st.neu { background: #3b82f6; }
.pf-nav-zahl.st.offen { background: #ef4444; }
.pf-nav-zahl.st.intern { background: #8b5cf6; }
.pf-nav-zahl.st.kunde { background: #f59e0b; color: #1f1300; }
.pf-nav-fuss { border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .55); }
.pf-nav-fuss .pf-chip { background: rgba(255, 255, 255, .08); border-color: transparent; color: #fff; }
.pf-nav-fuss .pf-chip:hover { background: rgba(255, 255, 255, .18); }

/* Schalter Meine/Team */
.pf-umfang { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 12px 12px 2px; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .22); }
.pf-umfang button { border: 0; border-radius: 9px; padding: 7px 6px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
                    background: transparent; color: rgba(255, 255, 255, .7); transition: background .2s var(--pf-ease), color .2s; }
.pf-umfang button:hover:not(.aktiv) { color: #fff; background: rgba(255, 255, 255, .06); }
.pf-umfang button.aktiv { background: #fff; color: #14375E; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }

/* Ziehen: das Ziel zeigt eine türkise Linie, wo die Ansicht landet. */
.pf-nav-eintrag[draggable="true"] { cursor: grab; }
.pf-nav-eintrag.zieht { opacity: .4; }
.pf-nav-eintrag.ziel { box-shadow: inset 0 3px 0 var(--pf-teal); }
button.pf-nav-gruppe.ziel { color: #fff; box-shadow: inset 0 -3px 0 var(--pf-teal); }
.pf-nav-ende { margin: 8px 12px; padding: 8px; border: 1px dashed rgba(255, 255, 255, .3); border-radius: 10px; text-align: center; font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.pf-nav-ende.ziel { border-color: var(--pf-teal); color: #fff; background: rgba(43, 165, 135, .15); }
.pf-nav-zurueck { margin: 8px 12px 0; border: 0; background: none; color: rgba(255, 255, 255, .45); font: inherit; font-size: 11.5px; cursor: pointer; text-align: left; }
.pf-nav-zurueck:hover { color: #fff; }

/* „+ als Ansicht“ */
.pf-chip.pf-als-ansicht { border-color: var(--pf-teal); color: #1f7a63; font-weight: 600; }
.pf-chip.pf-als-ansicht:hover { background: #e6f6f1; }
.pf-als-ansicht-zeile { display: flex; gap: 6px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #e6f6f1; animation: pf-ein .2s var(--pf-ease) both; }
.pf-als-ansicht-zeile input { flex: 1; min-width: 0; padding: 5px 9px !important; background: #fff !important; }
.pf-als-ansicht-zeile .fehler { color: #b91c1c; font-size: 12px; }
@keyframes pf-ein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ── Liste: Karten wie im Faktura-Tool ── */
.pf-zeile { transition: background-color .15s, box-shadow .2s var(--pf-ease), transform .2s var(--pf-ease); }
.pf-zeile:hover { background: #fff; box-shadow: 0 10px 30px rgba(20, 55, 94, .10), 0 2px 6px rgba(20, 55, 94, .06); transform: translateY(-1px); }
.pf-zeile.aktiv { box-shadow: inset 3px 0 0 var(--rwd-blue-700), 0 2px 8px rgba(20, 55, 94, .08); }

/* ── 48-Stunden-Stoppuhr ── */
.pf-uhr { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 34px; height: 34px; flex: none; }
.pf-uhr svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pf-uhr circle { fill: none; stroke-width: 3.5; }
.pf-uhr .bahn { stroke: #e5e7eb; }
.pf-uhr .rest { stroke-linecap: round; transition: stroke-dasharray .6s var(--pf-ease); }
.pf-uhr b { position: relative; font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.pf-uhr.ok .rest { stroke: #16a34a; } .pf-uhr.ok b { color: #15803d; }
.pf-uhr.halb .rest { stroke: #f59e0b; } .pf-uhr.halb b { color: #b45309; }
.pf-uhr.knapp .rest { stroke: #ef4444; } .pf-uhr.knapp b { color: #b91c1c; }
.pf-uhr.ueber .bahn { stroke: #fecaca; } .pf-uhr.ueber b { color: #b91c1c; font-size: 8.5px; }
.pf-uhr.ueber { animation: pf-puls 1.6s ease-in-out infinite; }
@keyframes pf-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
/* Eigene Spalte rechts unter dem Bearbeiter — Vorschau und Chips rücken dafür ein. */
.pf-zeile.mit-uhr .pf-vorschau, .pf-zeile.mit-uhr .pf-bezuege { grid-column: 2; }
.pf-zeile > .pf-uhr { grid-column: 3; grid-row: 3 / span 2; justify-self: end; align-self: center; margin: 0; width: 38px; height: 38px; }

/* ── Makros: Knopf in der Werkzeugleiste, Menü Kunde › Gewerk › Makro ── */
.pf-e { grid-template-columns: minmax(0, 1fr); }
.pf-makro-menue { position: relative; display: inline-flex; }
.pf-makro-knopf { border: 1px solid var(--pf-linie); background: #fff; border-radius: 8px; height: 26px; padding: 0 10px; font: inherit; font-size: 12px;
                  font-weight: 600; cursor: pointer; color: var(--rwd-blue-700); transition: background .15s, border-color .15s; }
.pf-makro-knopf:hover:not(:disabled), .pf-makro-knopf.aktiv { border-color: var(--rwd-blue-700); background: #eef4fb; }
.pf-makro-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 41; width: 360px; max-width: calc(100vw - 40px); max-height: 52vh;
                overflow-y: auto; background: #fff; border: 1px solid var(--pf-linie); border-radius: 12px; padding: 8px; display: flex;
                flex-direction: column; gap: 4px; box-shadow: 0 10px 30px rgba(20, 55, 94, .16), 0 2px 6px rgba(20, 55, 94, .08);
                animation: pf-ein .18s var(--pf-ease) both; }
.pf-makro-pfad { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 2px 2px 6px; border-bottom: 1px solid var(--pf-linie); margin-bottom: 2px;
                 font-size: 12px; color: var(--text-muted); }
.pf-makro-pfad button { border: 0; background: none; padding: 2px 6px; border-radius: 6px; font: inherit; cursor: pointer; color: var(--rwd-blue-700); }
.pf-makro-pfad button:hover { background: #eef4fb; }
.pf-makro-pfad button.aktiv { color: var(--text); font-weight: 700; cursor: default; background: none; }
.pf-makro-ordner { display: flex; justify-content: space-between; align-items: center; border: 1px solid transparent; background: #f8fafc; border-radius: 8px;
                   padding: 7px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: left; color: var(--text);
                   transition: background .15s, border-color .15s, transform .15s var(--pf-ease); }
.pf-makro-ordner:hover { background: #eef4fb; border-color: #cfe0f3; transform: translateX(2px); }
.pf-makro-ordner .z { font-size: 11px; color: var(--text-muted); font-weight: 500; }

/* ── Antwortfeld nur so breit wie der Verlauf (User 02.11.2026): Aufträge/Markt bleiben rechts daneben sichtbar ── */
@media (min-width: 1600px) {
    .pf-ticket { --pf-kontext-ist: max(220px, min(var(--pf-kontext, 300px), calc(100% - 360px))); position: relative;
                 display: grid; grid-template-columns: minmax(0, 1fr) var(--pf-kontext-ist); grid-template-rows: auto minmax(110px, 1fr) auto; }
    .pf-ticket > .pf-kopf { grid-column: 1 / -1; grid-row: 1; }
    .pf-ticket > .pf-koerper { display: contents; }
    .pf-koerper > .pf-verlauf { grid-column: 1; grid-row: 2; }
    .pf-ticket > .pf-composer { grid-column: 1; grid-row: 3; }
    .pf-koerper > .pf-kontext { grid-column: 2; grid-row: 2 / 4; }
    html.pf-aus-kontext .pf-ticket { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .pf-uhr.ueber, .pf-nav-eintrag.aktiv::before, .pf-makro-pop, .pf-als-ansicht-zeile { animation: none; }
    .pf-zeile:hover, .pf-nav-eintrag:hover { transform: none; }
}
.pf-nav-kopf { flex-wrap: wrap; row-gap: 8px; }

/* Kategorien deutlich (User 02.11.2026): jede Überschrift wie „Status“ — hell, türkis, mit Trennlinie. */
button.pf-nav-gruppe, button.pf-nav-gruppe.zu { color: #9ee0cb; font-size: 11px; font-weight: 700; margin-top: 6px; padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08); }
button.pf-nav-gruppe.zu { opacity: .7; }
.pf-umfang + button.pf-nav-gruppe { border-top: 0; margin-top: 2px; }

/* Höhe des Antwortbereichs ziehen (User 02.11.2026): Griff an der Oberkante, der Editor wächst mit. Gemerkt als --pf-antwort. */
.pf-composer { position: relative; }
.pf-griff-h { position: absolute; left: 0; right: 0; top: -4px; height: 8px; cursor: row-resize; z-index: 6; touch-action: none; }
.pf-griff-h::after { content: ""; position: absolute; left: 50%; top: 2px; width: 44px; height: 4px; margin-left: -22px; border-radius: 4px;
                     background: #cbd5e1; opacity: 0; transition: opacity .15s, background-color .15s; }
.pf-composer:hover .pf-griff-h::after { opacity: 1; }
.pf-griff-h:hover::after, .pf-griff-h.zieht::after { opacity: 1; background: var(--rwd-blue-700); }
html.pf-zieht { user-select: none; }
html.pf-antwort-hoehe .pf-ticket > .pf-composer:not(.pf-composer-zu) { height: min(var(--pf-antwort), 85vh); max-height: none; overflow-y: auto; }
html.pf-antwort-hoehe .pf-composer:not(.pf-composer-zu) > .pf-composer-teil:not([hidden]) { flex: 1 1 auto; min-height: 0; }
html.pf-antwort-hoehe .pf-composer-teil.pf-e > .pf-e-links { min-height: 100%; }
html.pf-antwort-hoehe .pf-composer-teil .pf-editor { flex: 1 1 auto; max-height: none; }
html.pf-antwort-hoehe .pf-composer-teil:not(.pf-e):not([hidden]) { display: flex; flex-direction: column; }
html.pf-antwort-hoehe .pf-composer-teil.pf-e:not([hidden]) { grid-template-rows: minmax(0, 1fr); }
.pf-filter-aktionen .pf-ansicht-name { flex: 1 1 220px; min-width: 180px; padding: 5px 9px; border: 1px solid var(--pf-linie); border-radius: 8px; font: inherit; font-size: 12.5px; }
.pf-bilder-hinweis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; background: #fff7ed; color: #9a3412; font-size: 12px; }
.pf-bilder-hinweis .pf-bilder-knopf { border-color: #fdba74; color: #9a3412; font-weight: 600; }
.pf-anhang-name { border: 0; background: none; padding: 0; font: inherit; color: var(--rwd-blue-700); cursor: pointer; text-decoration: underline; text-decoration-color: transparent; }
.pf-anhang-name:hover { text-decoration-color: currentColor; }
.pf-bezug.pf-auto { background: #f5f3ff; color: #5b21b6; }

/* FAR-Liste in der Bestellkarte (09.11.2026) */
.best-far { margin: 8px 0; padding: 8px 10px; border-radius: 6px; font-size: 13px; line-height: 1.45; }
.best-far.ok { background: #ecfdf3; border: 1px solid #a7e3bf; }
.best-far.warn { background: #fff4e5; border: 1px solid #f5c27a; }
.best-far ul { margin: 4px 0 0 18px; padding: 0; }
.best-far details summary { cursor: pointer; margin-top: 4px; color: #555; }

/* Einzelnes Ticket im eigenen Fenster (/postfach/fenster/{id}) */
.pf.pf-fenster { display: block; height: 100vh; margin: 0; border-top: 0; }
.pf.pf-fenster .pf-ticket { height: 100vh; }

/* Mehrere Termine im formlosen Auftrag (11.11.2026) */
.fa-termin { display: inline-flex; gap: 4px; align-items: center; margin-left: 6px; }
.fa-termine-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; }
.fa-termine-knoepfe .es-mini { height: 26px; }
.es-mini.an { background: var(--rwd-blue-700); border-color: var(--rwd-blue-700); color: #fff; }