/* ==========================================================================
   26 · Die Bereichs-Bühne – ein Kopf für jeden Bereich (14.10.2026)
   ==========================================================================
   Marc wählte am 14.10.2026 aus vier Entwürfen den Entwurf A („Hotel-Treue“,
   _entwurf-bereich-a.html): die Restaurant-Bühne der Hotel-App
   (hotelorbit/app/assets/css/style/22-restaurant.css), übertragen auf das
   ganze Dashboard. Präfix bb- („Bereichs-Bühne“). Nur Tokens aus :root;
   Zustandsfarben nie an der Hausfarbe. Das Blatt liegt als letztes in
   style/ und gewinnt damit gegen die älteren Köpfe (.cal-masthead bleibt als
   Rückfall für Seiten, die noch keinen Bereich nennen).

   VIER REGELN, die das Blatt durchziehen:
   1. EINE Kopfhöhe im ganzen Haus, fest: 13 rem – auf der Übersicht, der
      Arbeitsfläche, der Akte und dem Formular dieselbe. (Bis zum Abend des
      14.10.2026 15,5 rem mit vier Glaskacheln, den „Wegen“, rechts unten;
      Marc: „die Buttons können auf allen Seiten raus, dafür der obere Balken
      ein klein wenig schmäler“.) Nie vom Inhalt
      abhängig – langer Titel, zehn Knöpfe und Chips ändern nichts. Die
      schmale 7-rem-Fassung vom Morgen des 14.10.2026 ist weg (Marc, 14.10.
      abends: „nicht auf einer eine dünne und auf einer eine breite – über die
      ganzen Seiten weg eine Symmetrie, nie unruhig oder springend“).
   2. Ein Knopf, eine Höhe: --h-ctl (34 px), --r-ctl, drei Gewichte (gefüllt,
      leise, rot). Die eine Ausnahme: der Zeichen-Griff in Zeilen und
      Kartenköpfen, --h-ctl-sm (28 px), --r-sm, ohne Wort.
   3. Alles liegt auf derselben Spur: Bühne, Leiste, Kennzahlen, Flächen
      laufen von Kante zu Kante; Kennzahlen und Spalten teilen das Vierer-
      raster mit der Fuge --sp-4, die Nähte der Spalten sitzen auf
      --bb-kopf-h und --bb-fuss-h.
   4. Ein Rhythmus nach unten: Bühne 20, Leiste 16, Kennzahlen 20, danach
      die erste Fläche. Meldungen stehen UNTER der Leiste, nie über der Bühne.

   Die Wurzel ist `main.bb` (includes/header.php). Alles, was hier mit `.bb`
   beginnt, gilt damit auf jeder angemeldeten Seite – auch auf denen, die
   ihre Bühne erst in einer späteren Welle bekommen.
   ========================================================================== */
:root {
    --bb-buehne-h: 13rem;        /* jede Seite dieselbe Höhe */
    --bb-kpi-h: 5.75rem;         /* Kennzahlkachel, Mindesthöhe */
    --bb-kopf-h: 3.75rem;        /* Kopfzeile einer Fläche */
    --bb-fuss-h: 3.75rem;        /* Fußzeile einer Fläche */
    --bb-zeile-h: 3.75rem;       /* Listenzeile mit zwei Zeilen Text */
    --bb-lz-h: 4.75rem;          /* kurze Listenzeile mit Zustandschip */
}

/* --- 1 · Ein Knopf, eine Form (wie .rs .btn im Hotel) ----------------------- */
/* 34 px für alles, was für sich steht; 28 px (.btn-sm) nur noch für den
   Zeichen-Griff in Zeilen und Kartenköpfen. Die 33 und 26 Pixel, die die
   Durchsicht vom 13.10.2026 fand, gibt es damit nicht mehr. */
.bb .btn {
    height: var(--h-ctl); min-height: var(--h-ctl);
    padding: 0 var(--sp-5);
    border-radius: var(--r-ctl);
    font-size: var(--fs-6); font-weight: 600; line-height: 1.1;
    gap: var(--sp-2);
    white-space: nowrap;
}
.bb .btn-sm, .bb .ml-weg .ml-weg-knopf {
    height: var(--h-ctl-sm); min-height: var(--h-ctl-sm);
    padding: 0 var(--sp-3);
    border-radius: var(--r-sm);
    font-size: var(--fs-5);
}
.bb .btn svg { width: 16px; height: 16px; flex: none; margin: 0; }
.bb .btn-sm svg { width: 14px; height: 14px; }
/* Der leise Knopf: Tönung des Leuchtblaus, Schrift in der tiefen Stufe. Die
   Rahmenknöpfe aus Bootstrap und älteren Seiten landen hier – es gibt nur den
   einen. (.btn-link bleibt ein Textknopf: Er steht in Sätzen und Zeilen.) */
.bb .btn-leise, .bb .btn-outline-secondary, .bb .btn-outline-primary, .bb .btn-secondary, .bb .btn-light {
    background: var(--blau-hell); color: var(--btn-leucht-tief);
    border-color: transparent; box-shadow: none; text-decoration: none;
}
.bb .btn-leise:hover, .bb .btn-outline-secondary:hover, .bb .btn-outline-primary:hover, .bb .btn-secondary:hover, .bb .btn-light:hover,
.bb .btn-leise:focus, .bb .btn-outline-secondary:focus, .bb .btn-outline-primary:focus {
    background: var(--blau-rand); color: var(--btn-leucht-tief); border-color: transparent; text-decoration: none;
}
/* Der rote Knopf: ein Zustand, keine Stimmung. */
.bb .btn-rot, .bb .btn-outline-danger, .bb .btn-gefahr { background: var(--btn-red-bg-light); color: var(--btn-red-text); border-color: transparent; }
.bb .btn-rot:hover, .bb .btn-outline-danger:hover, .bb .btn-gefahr:hover { background: var(--btn-red-text); color: var(--auf-marke); border-color: transparent; }
.bb .btn-primary { box-shadow: inset 0 1px 0 var(--btn-kante), 0 1px 2px rgba(24, 44, 66, .16); }
/* Nur ein Zeichen: quadratisch, dieselbe Höhe. */
.bb .btn.ist-zeichen, .bb .btn.btn-zeichen:not(.btn-sm) { width: var(--h-ctl); padding: 0; }
.bb .btn-sm.btn-zeichen { width: var(--h-ctl-sm); padding: 0; }
.bb .btn:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; box-shadow: none; }
/* Die eine Ausnahme: der Zeichen-Griff in Zeilen und Kartenköpfen. */
.bb-griff {
    display: inline-grid; place-items: center;
    width: var(--h-ctl-sm); height: var(--h-ctl-sm);
    border: 0; border-radius: var(--r-sm);
    background: transparent; color: var(--brand-quiet);
    cursor: pointer;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.bb-griff svg { width: 15px; height: 15px; }
.bb-griff:hover, .bb-griff:focus-visible { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.bb-griff.ist-gefahr:hover, .bb-griff.ist-gefahr:focus-visible { background: var(--btn-red-bg-light); color: var(--btn-red-text); }
.bb-griff.ist-gut:hover { background: var(--btn-green-bg-light); color: var(--btn-green); }
.bb-griff:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 1px; }
/* Was neben Knöpfen steht, steht auf derselben Höhe. */
.bb .form-control:not(textarea), .bb .form-select { height: var(--h-ctl); min-height: var(--h-ctl); border-radius: var(--r-ctl); font-size: var(--fs-5); }
.bb textarea.form-control { height: auto; min-height: calc(var(--h-ctl) * 2); border-radius: var(--r-ctl); }
.bb .form-control-sm, .bb .form-select-sm { height: var(--h-ctl); min-height: var(--h-ctl); font-size: var(--fs-5); }
.bb .cal-seg { height: var(--h-ctl); border-radius: var(--r-ctl); }
.bb .cal-seg a { gap: var(--sp-2); }

/* --- 2 · Die Bühne ----------------------------------------------------------- */
.bb-buehne {
    position: relative;
    height: var(--bb-buehne-h);
    margin: 0 0 var(--sp-6);
    border-radius: var(--r-card);
    overflow: hidden;
    isolation: isolate;
    color: var(--brand-text);
    /* Dieselbe Fläche wie die Einrichtungs- und Hotelbühne des Hauses: hell eine
       Karte mit einem Hauch Blau, dunkel die tiefe Fläche – beides aus Tokens. */
    background: linear-gradient(105deg, var(--brand-surface) 0%, var(--brand-surface) 45%, var(--blau-hell) 100%);
    box-shadow: inset 0 0 0 1px var(--brand-border), var(--sh-1);
}
/* Das Bild: freigestellte Bänder aus Higgsfield, Motiv rechts. Es richtet sich
   nach der HÖHE der Bühne (nicht nach der Breite), damit das Motiv in jeder
   Spurbreite ganz zu sehen ist; nach links läuft es in die Fläche aus. */
.bb-buehne-bild {
    position: absolute; z-index: 0;
    top: 50%; right: 0;
    height: 112%; width: auto; max-width: none;
    transform: translateY(-50%);
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%);
    mask-image: linear-gradient(to right, transparent 0, #000 38%);
}
html[data-farbschema="dunkel"] .bb-buehne-bild { filter: brightness(.88) saturate(.95); }
@media (prefers-color-scheme: dark) { html[data-farbschema="system"] .bb-buehne-bild { filter: brightness(.88) saturate(.95); } }

.bb-buehne-inhalt {
    position: relative; z-index: 2;
    height: 100%;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--sp-5);
    padding: 2.25rem var(--sp-7) var(--sp-5);
    /* Überschrift und Handgriffe stehen auf JEDER Seite auf derselben Zeile –
       ob darunter ein Satz steht oder nicht. Die Zeilenhöhen sind fest, der
       Satz hängt unter dem Titel, nie darüber. */
    --bb-eyebrow-h: 1rem;
    --bb-titel-h: 2rem;
}
.bb-wort { min-width: 0; max-width: 36rem; align-self: flex-start; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sp-5); align-content: center; }
.bb-wort:has(> .bb-medien) { grid-template-columns: auto minmax(0, 1fr); }
.bb-wort-text { min-width: 0; }
/* Ein Bild zur Seite (die Kundenakte, das Büro): 64 px, rund wie im Seitenkopf,
   links neben Wort und Handgriffen über beide Zeilen. */
.bb-medien { grid-row: 1 / span 2; align-self: center; }
.bb-medien img, .bb-medien .company-header-logo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.bb-eyebrow {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-3); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; line-height: var(--bb-eyebrow-h);
    color: var(--brand-titel); opacity: .78;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-eyebrow-punkt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--btn-leucht); }
/* Der Titel: eine Zeile, immer. Ein langer Titel wird abgeschnitten, die
   Bühne wächst nie – das ist der ganze Sinn der festen Höhe. */
.bb-titel {
    margin: var(--sp-2) 0 0;
    font-family: 'Plus Jakarta Sans', 'IBM Plex Sans', sans-serif;
    font-weight: 700; font-size: var(--fs-12); line-height: var(--bb-titel-h); letter-spacing: -.02em;
    /* Platz für Unterlängen (g, p) unter der Zeile, ohne sie zu verschieben */
    height: calc(var(--bb-titel-h) + .5rem); padding-bottom: .5rem; margin-bottom: -.5rem;
    color: var(--brand-titel);
    font-variant-numeric: tabular-nums;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-zusatz { font-size: var(--fs-6); font-weight: 500; letter-spacing: 0; color: var(--brand-quiet); margin-left: var(--sp-2); vertical-align: .3em; }
.bb-satz {
    margin: var(--sp-2) 0 0;
    max-width: 48ch;
    font-size: var(--fs-6); line-height: 1.45; color: var(--brand-quiet);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Kurze Merkmale (Rechtsform, Alter, Beruf …) als Chips unter dem Titel – eine Zeile. */
.bb-chips { display: flex; gap: var(--sp-1); flex-wrap: nowrap; min-width: 0; overflow: hidden; margin-top: var(--sp-2); }
.bb-chip { display: inline-flex; align-items: center; height: 1.375rem; padding: 0 8px; border-radius: var(--r-sm); background: var(--btn-gray-bg); color: var(--brand-text); font-size: var(--fs-3); font-weight: 600; white-space: nowrap; }
/* Mit Chips darüber nur eine Zeile Satz – die Bühne bleibt 13 rem. */
.bb-chips + .bb-satz { -webkit-line-clamp: 1; }
/* Höchstens drei Handgriffe in der Bühne: ein Hauptknopf, zwei leise. Mehr
   gehört in die Leiste – die Reihe bricht nie um. */
.bb-aktionen { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); height: var(--h-ctl); margin-top: var(--sp-5); }
.bb-aktionen .btn { height: var(--h-ctl); font-size: var(--fs-5); }
.bb-aktionen form { margin: 0; display: contents; }

/* --- 3 · Die Leiste: Ansichten links, Filter und Suche rechts, 34 px, nie umbrechend --- */
.bb-leiste {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    height: var(--h-ctl);
    margin: 0 0 var(--sp-5);
    flex-wrap: nowrap;
}
.bb-leiste:empty { display: none; }
.bb-leiste-gruppe { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; flex: 1 1 auto; overflow: hidden; }
.bb-leiste-gruppe:empty { display: none; }
.bb-leiste-gruppe.ist-rechts { margin-left: auto; flex: none; overflow: visible; justify-content: flex-end; }
.bb-leiste-gruppe form { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
/* Wird die Spur schmal, schrumpft der Schalter und rollt innen – die Leiste
   bleibt eine Zeile von 34 px, nichts bricht um. */
.bb-leiste .cal-seg { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bb-leiste .cal-seg::-webkit-scrollbar { display: none; }
.bb-leiste .btn, .bb-leiste .form-control, .bb-leiste .form-select { height: var(--h-ctl); font-size: var(--fs-5); }
.bb-leiste .btn { padding-left: .8rem; padding-right: .8rem; }
/* Blättern im Kalender: dieselbe Bahn wie der Segmentschalter daneben. */
.bb-leiste .cal-nav { height: var(--h-ctl); border-radius: var(--r-ctl); overflow: hidden; }
.bb-leiste .cal-side-toggle { height: var(--h-ctl); }
/* DIE FILTERREIHE DER ARBEITSFLÄCHEN IST DIESELBE LEISTE (14.10.2026). Das
   Postfach (E-Mail, Nachrichten, Telefon, Fax), Leads, Formulare, Objekte und
   die übrigen Listen bauen ihre Reihe unter der Bühne aus .ml-bar
   (04-arbeitsflaechen.css) – mit eigener Fuge (0,6 rem) und einer Höhe, die
   vom Inhalt kam. Hier bekommt sie das Maß der Leiste: 34 px, Fuge --sp-3,
   --sp-5 nach unten, die Knöpfe darin 34 px. Der Segmentschalter schrumpft und
   rollt innen, statt die Reihe umzubrechen; die Reihe bricht nur noch um, wenn
   etwas darin gar nicht schrumpfen kann. Die Kachelbreiten (.is-kachelbreit)
   der Seiten mit Kennzahlenreihe bleiben, was sie sind. Die Handgriffe rechts
   stehen in .ml-bar-rechts, damit zwei Formulare nicht beide „nach rechts“
   wollen und die Mitte teilen. */
.bb .ml-bar { min-height: var(--h-ctl); gap: var(--sp-3); margin-bottom: var(--sp-5); }
.bb .ml-bar > .cal-seg:not([class*="is-kachelbreit"]) { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.bb .ml-bar > .cal-seg::-webkit-scrollbar { display: none; }
.bb .ml-bar .btn, .bb .ml-bar .form-control, .bb .ml-bar .form-select { height: var(--h-ctl); font-size: var(--fs-5); }
.bb .ml-bar .btn { padding-left: .8rem; padding-right: .8rem; }
.bb .ml-bar form { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
.bb .ml-bar > .ml-bar-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex: none; }
/* Ab 900 px eine Zeile wie die Leiste: Die Schalter schrumpfen und rollen,
   statt dass das „+/−" der Etiketten allein in die zweite Zeile fällt (bei
   1100 px im Nachrichtenpostfach so gesehen). Darunter darf die Reihe weiter
   umbrechen – dort ist Rollen in drei Schaltern keine Hilfe mehr. */
@media (min-width: 900px) {
    .bb .ml-bar { flex-wrap: nowrap; }
}
/* NICHTS WIRD ABGESCHNITTEN (14.10.2026, Nachrichten bei ~1480 px): Reichte die
   Breite nicht, rollte der erste Schalter innen und schnitt „Mir zugewiesen"
   hinter den Kanälen ab – die Reihe sah ineinandergeschoben aus. Jetzt behält
   jeder Schalter seine Breite, und die Reihe bricht um: Suche und Handgriffe
   rutschen in die zweite Zeile nach rechts. Etikettengruppe samt „+/−" bleibt
   beieinander (sie schrumpft nicht und bricht nicht in sich um). */
.bb .ml-bar { flex-wrap: wrap; row-gap: var(--sp-3); }
.bb .ml-bar > .cal-seg:not([class*="is-kachelbreit"]) { flex: 0 0 auto; max-width: 100%; }
.bb .ml-bar > .pf-etikettgruppe { flex: none; }
.bb-suche { position: relative; }
.bb-suche svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--brand-faint); pointer-events: none; }
.bb-suche .form-control { padding-left: 32px; width: 15rem; }
@media (max-width: 1279.98px) { .bb-suche .form-control { width: 11rem; } }

/* --- 4 · Kennzahlen: Kacheln gleicher Höhe auf dem Raster der Spalten -------- */
/* Die Kachelreihe des Hauses (.kpi-grid/.kpi, 22 Seiten) bekommt dieselben
   Maße, ohne dass eine Seite umgebaut werden muss: eine Mindesthöhe, eine
   Ziffernschrift (IBM Plex, wie die Hotelkacheln), ein Abstand.

   MINDESTHÖHE, NICHT HÖHE (14.10.2026). Bis dahin stand hier `height`, und
   die drei Umsatzkacheln mit Fortschrittsleiste am Fuß (.um-kpi-leiste, 3 px
   plus 0,55 rem Luft) passten nicht mehr hinein: Beschriftung, Zahl und
   Fußnote tragen `overflow: hidden`, dürfen als Flex-Kinder also schrumpfen,
   und die Zahl wurde unten beschnitten, die Zeile rutschte. Mit `min-height`
   wächst eine Kachel, die mehr trägt, und das Raster zieht ihre Nachbarn auf
   dieselbe Höhe – Ober- und Unterkante der Reihe bleiben eine Linie. Die
   Grundkachel (Mikrolabel, Ziffer, Fußnote) füllt die 5,75 rem gerade aus,
   dort ändert sich nichts. */
.bb-kpi-reihe, .bb .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: 0 0 var(--sp-6); }
.bb .kpi-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb .kpi-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bb .kpi-grid.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bb .kpi-grid.is-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bb .kpi-grid.mb-4 { margin-bottom: var(--sp-6) !important; }
/* Die sieben Filterkacheln der Vermarktung behalten ihre Sieben (vermarktung/stil.css). */
.bb .kpi-grid.vm-filter { grid-template-columns: repeat(7, minmax(0, 1fr)); }
@media (max-width: 1199px) { .bb .kpi-grid.vm-filter { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
.bb-kpi, .bb .kpi {
    min-height: var(--bb-kpi-h);
    padding: var(--sp-4) var(--sp-5);
    display: flex; flex-direction: column; justify-content: center; gap: 2px;
    min-width: 0;
    border: 1px solid var(--brand-border); border-radius: var(--r-card);
    background: var(--brand-surface); box-shadow: var(--sh-1);
    color: var(--brand-text); text-decoration: none;
    transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.bb-kpi-wort, .bb .kpi > .section-label {
    display: flex; align-items: center; gap: var(--sp-2);
    margin: 0;
    /* 1,25 statt der 1,5 des Grundtexts: So füllt die Grundkachel (Mikrolabel
       14 px, Ziffer 29,4 px, Fußnote 18 px, zwei Fugen) die 5,75 rem gerade
       aus und bleibt auf allen Seiten exakt so hoch wie bisher – mit 1,5
       stünde sie 2 px darüber, seit die Höhe eine Mindesthöhe ist. */
    line-height: 1.25;
    font-size: var(--fs-3); font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--brand-quiet);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-kpi-wort svg, .bb .kpi > .section-label svg { width: 14px; height: 14px; color: var(--btn-leucht); }
/* Eine Ziffer im ganzen Haus: IBM Plex, 600, Tabellenziffern – wie die Hotelkacheln. */
.bb-kpi-zahl, .bb .kpi b {
    display: block; margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: var(--fs-11); font-weight: 600; line-height: 1.15; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--brand-titel);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bb-kpi-zahl small, .bb .kpi b small { font-size: var(--fs-6); font-weight: 500; color: var(--brand-quiet); margin-left: 2px; }
.bb-kpi-note, .bb .kpi-note { font-size: var(--fs-4); color: var(--brand-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-kpi.ist-null .bb-kpi-zahl, .bb .kpi.is-null b { color: var(--brand-faint); }
.bb-kpi.ist-alert .bb-kpi-zahl, .bb .kpi.is-alert b { color: var(--btn-red-text); }
.bb-kpi.ist-gut .bb-kpi-zahl, .bb .kpi.is-gut b { color: var(--btn-green); }
a.bb-kpi:hover, .bb a.kpi:hover { color: var(--brand-text); box-shadow: var(--sh-2); transform: translateY(-1px); }
a.bb-kpi:focus-visible, .bb a.kpi:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 2px; }

/* --- 5 · Die Fläche und ihr Kopf ----------------------------------------------- */
.bb-flaeche {
    border: 1px solid var(--brand-border); border-radius: var(--r-card);
    background: var(--brand-surface); box-shadow: var(--sh-1);
    overflow: hidden;
    min-width: 0;
}
.bb-flaeche-kopf {
    display: flex; align-items: center; gap: var(--sp-3);
    height: calc(var(--bb-kopf-h) - 1px);
    padding: 0 var(--sp-4) 0 var(--sp-5);
    border-bottom: 1px solid var(--brand-border);
    background: var(--card-header-bg);
    flex: none;
}
.bb-flaeche-kopf h2 { margin: 0; font-size: var(--fs-6); font-weight: 700; color: var(--brand-titel); white-space: nowrap; }
.bb-flaeche-kopf .bb-leise { font-size: var(--fs-4); color: var(--brand-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bb-flaeche-kopf .ist-rechts { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); flex: none; }

/* --- 6 · Die Listenzeile: fest 3,75 rem, Balken links, Griffe mit dem Zeiger --- */
.bb-zeilen { padding: 3px 0; }
.bb-zeile {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7rem 7.5rem 9.5rem 6.5rem auto;
    align-items: center;
    gap: var(--sp-4);
    height: var(--bb-zeile-h);
    margin: 3px 6px;
    padding: 0 var(--sp-3) 0 16px;
    border-radius: calc(var(--r-card) - 3px);   /* konzentrisch zur Fläche */
    background: var(--brand-surface);
    transition: background-color var(--t-fast) var(--ease-out);
}
.bb-zeile::before {
    content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 3px;
    border-radius: var(--r-pill); background: var(--kante, transparent);
    transition: background-color var(--t-fast) var(--ease-out);
}
.bb-zeile:hover, .bb-zeile:focus-within { background: var(--brand-row); --kante: var(--btn-leucht); }
/* Zustände: genau die Zeilenfarben des Hauses. Ein Entwurf hat keinen Zustand – nur eine Reihenfolge. */
.bb-zeile.ist-geplant  { --kante: var(--zeile-neu);      background: color-mix(in srgb, var(--zeile-neu) var(--zeile-ton), var(--brand-surface)); }
.bb-zeile.ist-gesendet { --kante: var(--zeile-erledigt); background: color-mix(in srgb, var(--zeile-erledigt) var(--zeile-ton), var(--brand-surface)); }
.bb-zeile.ist-fehler   { --kante: var(--zeile-fehler);   background: color-mix(in srgb, var(--zeile-fehler) var(--zeile-ton), var(--brand-surface)); }
.bb-zeile.ist-geplant:hover  { background: color-mix(in srgb, var(--zeile-neu) var(--zeile-ton-hover), var(--brand-surface)); }
.bb-zeile.ist-gesendet:hover { background: color-mix(in srgb, var(--zeile-erledigt) var(--zeile-ton-hover), var(--brand-surface)); }
.bb-zeile.ist-fehler:hover   { background: color-mix(in srgb, var(--zeile-fehler) var(--zeile-ton-hover), var(--brand-surface)); }
.bb-zeile-titel { min-width: 0; display: grid; line-height: 1.25; }
.bb-zeile-titel a { font-weight: 600; font-size: var(--fs-7); color: var(--brand-text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-zeile-titel a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* die ganze Zeile führt hinein */
.bb-zeile-titel a:focus-visible { outline: none; }
.bb-zeile:has(.bb-zeile-titel a:focus-visible) { outline: 2px solid var(--focus-col); outline-offset: -2px; }
.bb-zeile-meta { font-size: var(--fs-4); color: var(--brand-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-zeile-zelle { min-width: 0; display: grid; line-height: 1.25; font-size: var(--fs-5); color: var(--brand-quiet); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-zeile-zelle b { font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; color: var(--brand-text); }
.bb-zeile-zelle small { font-size: var(--fs-3); color: var(--brand-faint); }
.bb-zeile-zelle.ist-leer b { color: var(--brand-faint); font-weight: 500; }
.bb-griffe { position: relative; z-index: 1; display: flex; gap: 2px; opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.bb-zeile:hover .bb-griffe, .bb-zeile:focus-within .bb-griffe, .bb-lz:hover .bb-griffe { opacity: 1; }

/* Der Zustand als Chip – Punkt und Wort, Tönung der Zustandsfarbe. */
.bb-stand {
    --ton: var(--brand-quiet);
    display: inline-flex; align-items: center; gap: 6px;
    height: 1.375rem; padding: 0 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-3); font-weight: 600; white-space: nowrap;
    color: var(--ton); background: color-mix(in srgb, var(--ton) 10%, transparent);
    justify-self: start;
}
.bb-stand::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ton); flex: none; }
.bb-stand.ist-entwurf       { --ton: var(--brand-quiet); }
.bb-stand.ist-geplant       { --ton: var(--zeile-neu); }
.bb-stand.ist-gesendet      { --ton: var(--btn-green); }
.bb-stand.ist-fehler        { --ton: var(--btn-red-text); }
.bb-stand.ist-neu           { --ton: var(--zeile-neu); }
.bb-stand.ist-arbeit        { --ton: var(--btn-orange-text); }
.bb-stand.ist-kontaktiert   { --ton: var(--btn-leucht-dark); }
.bb-stand.ist-abgeschlossen { --ton: var(--btn-green); }
.bb-stand.ist-kein-interesse{ --ton: var(--brand-quiet); }

/* Die Zustellquote: Zahl und Bahn. Die Bahn berichtet, also Blaugrau. */
.bb-quote { display: grid; gap: 4px; min-width: 0; }
.bb-quote-zahl { font-family: 'IBM Plex Sans', sans-serif; font-size: var(--fs-5); font-weight: 600; color: var(--brand-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-quote-zahl small { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; color: var(--brand-faint); font-size: var(--fs-3); margin-left: 4px; }
.bb-quote.ist-leer .bb-quote-zahl { color: var(--brand-faint); font-weight: 500; }
.bb-quote-bahn { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--brand-quiet) 18%, transparent); overflow: hidden; }
.bb-quote-bahn > i { display: block; height: 100%; width: calc(var(--q, 0) * 1%); border-radius: 2px; background: var(--btn-blue); }

/* Griffe in Formularen (Löschen, Kopieren): das Formular ist nur die Hülle. */
.bb-griffe form { margin: 0; display: contents; }
a.bb-griff { text-decoration: none; }
a.bb-griff:hover { color: var(--btn-leucht-tief); }
/* Zustände, die der Entwurf nicht kannte: ein laufendes oder angehaltenes Mailing. */
.bb-zeile.ist-laeuft, .bb-zeile.ist-pausiert { --kante: var(--btn-orange-text); background: color-mix(in srgb, var(--btn-orange-text) var(--zeile-ton), var(--brand-surface)); }
.bb-zeile.ist-laeuft:hover, .bb-zeile.ist-pausiert:hover { background: color-mix(in srgb, var(--btn-orange-text) var(--zeile-ton-hover), var(--brand-surface)); }
.bb-stand.ist-laeuft, .bb-stand.ist-pausiert { --ton: var(--btn-orange-text); }
/* Der leere Platz in einer Fläche. */
.bb-flaeche > .leer-zeile { margin: var(--sp-5); }

/* --- 7 · Die kurze Zeile (Liste neben einer Akte) ------------------------------- */
.bb-lz {
    position: relative;
    display: grid; gap: 2px; align-content: start;
    height: var(--bb-lz-h);
    margin: 3px 6px;
    padding: 10px 10px 0 16px;
    border-radius: calc(var(--r-card) - 3px);
    background: var(--brand-surface);
    color: var(--brand-text); text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-out);
}
.bb-lz::before { content: ""; position: absolute; left: 7px; top: 9px; bottom: 9px; width: 3px; border-radius: var(--r-pill); background: var(--kante, transparent); }
.bb-lz:hover { background: var(--brand-row); color: var(--brand-text); --kante: var(--btn-leucht); }
.bb-lz.ist-neu { --kante: var(--zeile-neu); background: color-mix(in srgb, var(--zeile-neu) var(--zeile-ton), var(--brand-surface)); }
.bb-lz.ist-neu:hover { background: color-mix(in srgb, var(--zeile-neu) var(--zeile-ton-hover), var(--brand-surface)); }
.bb-lz.ist-aktiv, .bb-lz.ist-aktiv:hover { background: var(--blau-hell); --kante: var(--zeile-offen); }
.bb-lz:focus-visible { outline: 2px solid var(--focus-col); outline-offset: -2px; }
.bb-lz-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.bb-lz-name { min-width: 0; font-weight: 600; font-size: var(--fs-6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-lz-zeit { flex: none; font-size: var(--fs-3); color: var(--brand-faint); font-variant-numeric: tabular-nums; }
.bb-lz-meta { font-size: var(--fs-4); color: var(--brand-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-lz .bb-stand { margin-top: 3px; }

/* --- 8 · Der Bearbeitungsstand als Stufenleiste --------------------------------- */
/* Vier Stufen auf einer Linie, der Abzweig „kein Interesse“ hinter einer Kante.
   Erreichte Stufen sind gefüllt, die jetzige trägt Ring und Tönung, die
   kommenden nur den Rand. Jede Stufe hat ihre feste Farbe – Zustände hängen
   nie an der Hausfarbe. --zeile-neu ist das Blaugrau „neu, ungesehen“ des
   Hauses (DESIGN.md), kein Rot. Ersetzt .ld-status-btn (erste Serie, 2025). */
.bb-stufen { display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; overflow-x: auto; padding: 2px 0; scrollbar-width: none; margin-top: var(--sp-2); }
.bb-stufen::-webkit-scrollbar { display: none; }
.bb-stufe {
    --ton: var(--brand-faint);
    position: relative; flex: none;
    display: inline-flex; align-items: center; gap: var(--sp-2);
    height: var(--h-ctl);
    padding: 0 var(--sp-4) 0 var(--sp-3);
    border: 0; border-radius: var(--r-ctl);
    background: transparent;
    color: var(--brand-quiet);
    font: inherit; font-size: var(--fs-5); font-weight: 600; white-space: nowrap;
    cursor: pointer; text-decoration: none;
    transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.bb-stufe::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ton); background: transparent; transition: background-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
.bb-stufe:hover { background: color-mix(in srgb, var(--ton) 10%, transparent); color: var(--ton); text-decoration: none; }
.bb-stufe:focus-visible { outline: 2px solid var(--focus-col); outline-offset: 1px; }
.bb-stufe.ist-erreicht { color: var(--brand-text); }
.bb-stufe.ist-erreicht::before { background: var(--ton); box-shadow: none; }
.bb-stufe.ist-jetzt { background: color-mix(in srgb, var(--ton) 12%, transparent); color: var(--ton); cursor: default; }
.bb-stufe.ist-jetzt::before { background: var(--ton); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ton) 28%, transparent); }
/* Der Stand, für den das Formular gerade offen steht (noch nicht gespeichert). */
.bb-stufe.ist-gewaehlt { box-shadow: var(--focus-ring); }
.bb-stufe.ist-neu           { --ton: var(--zeile-neu); }
.bb-stufe.ist-arbeit        { --ton: var(--btn-orange-text); }
.bb-stufe.ist-kontaktiert   { --ton: var(--btn-leucht-dark); }
.bb-stufe.ist-abgeschlossen { --ton: var(--btn-green); }
.bb-stufe.ist-kein-interesse{ --ton: var(--brand-quiet); }
.bb-stufen-strich { flex: 1 1 1.5rem; min-width: 1rem; max-width: 3rem; height: 2px; border-radius: 1px; background: var(--brand-border); }
.bb-stufen-strich.ist-erreicht { background: var(--brand-line-strong); }
.bb-stufen-abzweig { flex: none; display: flex; align-items: center; gap: var(--sp-2); margin-left: var(--sp-4); padding-left: var(--sp-4); border-left: 1px solid var(--brand-border); color: var(--brand-faint); }
.bb-stufen-abzweig svg { width: 14px; height: 14px; }
.bb-stufen-abzweig .bb-stufe { padding-left: var(--sp-3); }
.bb-stufen-abzweig .bb-stufe::before { border-radius: 2px; }   /* ein Abzweig ist kein Punkt auf der Linie */

/* Verlauf einer Akte: Punkt in der Zustandsfarbe, Zeile daneben. */
.bb-verlauf-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.bb-verlauf-liste li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: var(--sp-3); align-items: start; font-size: var(--fs-5); color: var(--brand-quiet); }
.bb-verlauf-liste li i { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--ton, var(--brand-faint)); }
.bb-verlauf-liste li b { color: var(--brand-text); font-weight: 600; }
.bb-verlauf-liste li time { font-variant-numeric: tabular-nums; color: var(--brand-faint); margin-left: var(--sp-2); }

/* --- 9 · Der Dreispalter des Postfachs: alle Nähte auf einer Höhe --------------- */
/* E-Mail, Nachrichten und Telefon bauen ihren Dreispalter aus .ml-list-pane,
   .ml-read-pane (Kopf, Inhalt, Fuß) und .ml-side-pane (Vorgang, Kunde,
   Notizen). Die Liste und die Mitte lagen schon auf einer Kante; die rechte
   Spalte bestand aus Kästen, deren Nähte nirgends mit dem Kopf und dem
   Antwortfeld der Mitte zusammenfielen (Marc, 13.10.2026). Jetzt: Der Kopf der
   Mitte und der erste Kasten rechts sind gleich hoch, der Fuß der Mitte und
   der letzte Kasten rechts auch – und der letzte Kasten sitzt unten, damit
   die Unterkanten sich treffen, auch wenn rechts weniger steht. */
.bb .ml-split.hat-akte { --bb-kopf-h: 3.75rem; --bb-fuss-h: 3.75rem; } /* wie im Entwurf A: 60 px statt 84/68 */
.bb .ml-split.hat-akte .ml-read-pane > .ml-read-head { min-height: var(--bb-kopf-h); box-sizing: border-box; }
.bb .ml-read-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb .ml-split.hat-akte .ml-read-pane > .ml-read-fuss { min-height: var(--bb-fuss-h); box-sizing: border-box; }
.bb .ml-split.hat-akte .ml-side-pane > :first-child { min-height: var(--bb-kopf-h); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; align-content: center; }
.bb .ml-split.hat-akte .ml-side-pane > .pf-werkzeuge { background: var(--brand-surface); border-bottom: 1px solid var(--brand-border); }
.bb .ml-split.hat-akte .ml-side-pane > :last-child { margin-top: auto; min-height: var(--bb-fuss-h); box-sizing: border-box; }
.bb .ml-split.hat-akte .ml-side-pane > .ml-kontakt { margin-top: 0; }
/* Ohne Vorgangsleiste (Telefon, Fax – sie sind keine Postfach-Vorgänge) stehen
   die Kontaktkacheln zuoberst in der Akte. Sie sind keine Fläche, sondern die
   Karten selbst, und bleiben ein Raster – die Flex-Regel für den ersten Kasten
   darüber machte aus ihnen eine Reihe gequetschter Kacheln. */
.bb .ml-split.hat-akte .ml-side-pane > .ml-kontakt:first-child { display: grid; min-height: 0; }

/* --- 10 · Das Hausfenster: ein Schleier, ein Blatt --------------------------------- */
/* DER EINE SCHLEIER: die Bühnentinte zu 42 %, ein leichter Weichzeichner –
   ein Element, einmal je Fenster. Rückfall und reduced-transparency nach GLAS.md.
   Gilt für das Hausfenster (.bd-overlay), das Blattfenster (.fw-overlay), die
   Etikettenwahl und den Schleier der Seitenleiste – vorher vier Schleier. */
.bb .bd-overlay, .bb .fw-overlay, .fw-overlay, .pf-etikettwahl[open]::before, .site-schleier.ist-sichtbar {
    background: color-mix(in srgb, var(--stage-ink) 42%, transparent);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bb .bd-overlay, .bb .fw-overlay, .fw-overlay, .pf-etikettwahl[open]::before, .site-schleier.ist-sichtbar { background: color-mix(in srgb, var(--stage-ink) 55%, transparent); }
}
@media (prefers-reduced-transparency: reduce) {
    .bb .bd-overlay, .bb .fw-overlay, .fw-overlay, .pf-etikettwahl[open]::before, .site-schleier.ist-sichtbar { background: color-mix(in srgb, var(--stage-ink) 60%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.bb .bd-dialog, .bb .fw-dialog, .fw-dialog, .dp-popup, .tp-popup, .mk-popup, .tv-card { border-radius: var(--r-card); box-shadow: var(--sh-3), inset 0 0 0 1px var(--brand-border); }
.bb .bd-dialog { background: var(--brand-surface); overflow: hidden; }
.bb .frage-dialog { max-width: 460px; }
.bb-fenster-kopf { display: flex; align-items: center; gap: var(--sp-3); height: var(--bb-kopf-h); padding: 0 var(--sp-4) 0 var(--sp-5); border-bottom: 1px solid var(--brand-border); }
.bb-fenster-kopf h3 { margin: 0; flex: 1 1 auto; min-width: 0; font-size: var(--fs-8); font-weight: 700; color: var(--brand-titel); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-fenster-koerper { padding: var(--sp-5); display: grid; gap: var(--sp-4); font-size: var(--fs-6); color: var(--brand-text); }
.bb-fenster-koerper p { margin: 0; line-height: 1.5; }
.bb-fenster-koerper p.ist-leise { font-size: var(--fs-5); color: var(--brand-quiet); }
.bb-fenster-fakten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px var(--sp-5); margin: 0; font-size: var(--fs-5); }
.bb-fenster-fakten dt { font-weight: 500; color: var(--brand-quiet); }
.bb-fenster-fakten dd { margin: 0; color: var(--brand-text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-fenster-fuss { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--brand-border); background: var(--card-header-bg); }

/* --- 11 · Ausschalter ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    a.bb-kpi, .bb-stufe, .bb-stufe::before, .bb-zeile, .bb-lz, .bb-griff { transition: none !important; animation: none !important; }
    a.bb-kpi:hover, .bb a.kpi:hover { transform: none; }
}
@media (max-width: 899.98px) {
    .bb-kpi-reihe, .bb .kpi-grid, .bb .kpi-grid.is-5, .bb .kpi-grid.is-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bb-zeile { grid-template-columns: minmax(0, 1fr) 7rem auto; }
    .bb-zeile > .bb-zeile-zelle, .bb-zeile > .bb-quote { display: none; }
    .bb-buehne-inhalt { flex-direction: column; align-items: stretch; justify-content: flex-end; padding: var(--sp-5); }
    .bb-buehne { height: auto; }
    .bb-buehne-bild { opacity: .5; }
    .bb-leiste { height: auto; flex-wrap: wrap; }
}

/* --- 12 · Das Postfach nach Entwurf A, Bildschirm 3 (14.10.2026 abends) ---------- */
/* Marc (14.10.2026): „Die Nachrichtenseite sieht anders aus als die aus den
   Entwürfen.“ Der Dreispalter stand zwar auf einer Kante, aber in den
   Kästen war noch die Optik von vorher: ein Pillen-Kopf über der Liste,
   Rahmen um jede Kontaktkachel, 28-px-Knöpfe im Kopf der Mitte, der
   Verlauf als Kasten im Kasten, die Akte zugeklappt. Hier bekommt jeder
   dieser Kästen die Form aus dem Entwurf – für E-Mail, Nachrichten, Telefon
   und Fax zugleich, weil alle vier dieselben Klassen tragen. */

/* Der Kopf der Liste: das Wort als Titel, daneben leise die Zahl – wie
   .bb-flaeche-kopf, auf derselben Höhe wie der Kopf der Mitte. */
.bb .ml-pick-bar {
    height: calc(var(--bb-kopf-h) - 1px);
    padding: 0 var(--sp-4) 0 var(--sp-5);
    gap: var(--sp-3);
    flex-wrap: nowrap;
}
.bb .ml-pick-text {
    padding: 0; border: 0; border-radius: 0; background: transparent;
    font-size: var(--fs-6); font-weight: 700; letter-spacing: 0; text-transform: none;
    color: var(--brand-titel); white-space: nowrap;
}
.bb .ml-pick-leise { min-width: 0; font-size: var(--fs-4); color: var(--brand-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.bb .ml-pick-leise strong { font-weight: 600; color: var(--brand-quiet); }
.bb .ml-pick-actions { margin-left: auto; }
.bb .ml-pick-alle { padding: 0 0 0 1px; }
/* Mit dem Kopf der Liste rechnen die Nähte: Er ist der Kopf der ersten Spalte. */
.bb .ml-split.hat-akte .ml-pick-bar { height: var(--bb-kopf-h); }

/* Die kurze Zeile: feste Mindesthöhe, der Name trägt das Gewicht, der Auszug
   steht leise darunter, der Zustand als Chip mit Punkt (.bb-stand-Form). */
.bb .ml-row { min-height: var(--bb-lz-h); box-sizing: border-box; padding: 10px 10px 8px 16px; }
.bb .ml-row-partner { font-size: var(--fs-6); font-weight: 600; color: var(--brand-text); }
.bb .ml-row-subject { font-size: var(--fs-4); font-weight: 400; color: var(--brand-quiet); margin-top: 2px; }
.bb .ml-row-snippet { font-size: var(--fs-3); }
.bb .ml-row.is-unread .ml-row-subject { color: var(--brand-text); font-weight: 500; }
.bb .ml-row-marks { margin-top: 5px; }
.bb .ml-row-marks .bd-chip, .bb .ml-row-marks .pf-marke {
    --ton: var(--brand-quiet);
    display: inline-flex; align-items: center; gap: 6px;
    height: 1.375rem; padding: 0 8px;
    border-radius: var(--r-sm);
    font-size: var(--fs-3); font-weight: 600; white-space: nowrap;
    color: var(--ton); background: color-mix(in srgb, var(--ton) 10%, transparent);
}
.bb .ml-row-marks .bd-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ton); flex: none; }
.bb .ml-row-marks .bd-chip svg { display: none; }
.bb .ml-row-marks .bd-chip.is-offen { --ton: var(--zeile-neu); }
.bb .ml-row-marks .bd-chip.is-full  { --ton: var(--btn-green); }
.bb .ml-row-marks .bd-chip.is-over, .bb .ml-row-marks .bd-chip.is-today { --ton: var(--btn-red-text); }
.bb .ml-row-marks .pf-marke { padding: 0 8px; }
.bb .ml-row-marks .pf-marke.ist-eigen { --ton: var(--btn-leucht-dark); background: color-mix(in srgb, var(--ton) 12%, transparent); color: var(--ton); }
.bb .ml-row-marks .ml-dir { font-size: var(--fs-2); }

/* Der Kopf der Mitte: der runde Kopf mit Initialen, Name und Merkmalzeile,
   rechts die Handgriffe in voller Knopfhöhe – eine Zeile, --bb-kopf-h hoch. */
.bb-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blau-hell); color: var(--btn-leucht-tief); font-weight: 700; font-size: var(--fs-5); letter-spacing: .02em; }
.bb-avatar svg { width: 16px; height: 16px; }
.bb .ml-split.hat-akte .ml-read-pane > .ml-read-head {
    display: flex; align-items: center; flex-wrap: nowrap;
    gap: var(--sp-4);
    padding: 0 var(--sp-4) 0 var(--sp-5);
}
.bb .ml-split.hat-akte .ml-read-pane > .ml-read-head > :not(.bb-avatar):not(.ml-tools) { min-width: 0; flex: 1 1 16rem; }
.bb .ml-read-head > .bb-avatar { flex: none; }
.bb .pf-werkzeuge .btn-sm.ist-zeichen { width: var(--h-ctl); padding: 0; }
.bb .ml-read-subject { font-size: var(--fs-7); font-weight: 700; color: var(--brand-titel); margin: 0; }
.bb .ml-read-meta { font-size: var(--fs-4); margin-top: 1px; flex-wrap: nowrap; overflow: hidden; }
.bb .ml-read-meta > span { white-space: nowrap; }
.bb .ml-tools { padding: 0; flex-wrap: nowrap; }
.bb .ml-tools .btn, .bb .ml-tools .btn-sm {
    height: var(--h-ctl); min-height: var(--h-ctl);
    padding: 0 .8rem; border-radius: var(--r-ctl); font-size: var(--fs-5);
}
.bb .ml-tools .btn.ist-zeichen { width: var(--h-ctl); padding: 0; }
.bb .ml-tools .btn svg { width: 15px; height: 15px; }

/* Der Verlauf füllt die Mitte: kein Kasten im Kasten mehr. Die Bänderfläche
   (25-verlauf.css) liegt direkt in der Fläche, die Blasen darauf. */
.bb .wa-page .ml-read-pane > .ml-read-inhalt { padding: 0; }
.bb .wa-page .ml-read-inhalt .wa-verlauf { border: 0; border-radius: 0; min-height: 100%; box-sizing: border-box; padding: var(--sp-5); }
.bb .wa-page .ml-read-inhalt .leer-zeile { margin: var(--sp-5); }
/* Der Fuß: das Schreibfeld in der Form der übrigen Felder. */
.bb .wa-schreibleiste { border-radius: var(--r-ctl); background: var(--brand-surface); }
.bb .wa-schreibleiste:hover { background: var(--brand-row); }

/* Die Akte rechts: Vorgang als eine Zeile, Kontaktzeilen ohne Rahmen, die
   Zuordnung hinter einer Linie, die Notizen zuunterst. */
.bb .ml-split.hat-akte .ml-side-pane > .pf-werkzeuge { flex-wrap: nowrap; gap: var(--sp-2); padding: 0 var(--sp-4) 0 var(--sp-5); position: relative; }
.bb .pf-werkzeuge > .section-label { margin: 0 auto 0 0; white-space: nowrap; }
.bb .pf-werkzeuge form:not(.pf-zuweisen) { display: flex; }
.bb .pf-werkzeuge .btn.is-an { background: var(--btn-green-bg-light); color: var(--btn-green); }
.bb .pf-weiter > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.bb .pf-weiter > summary::-webkit-details-marker { display: none; }
.bb .pf-weiter[open] > summary { background: var(--blau-hell); color: var(--btn-leucht-tief); }
.bb .pf-weiter .pf-zuweisen {
    position: absolute; z-index: 5; left: var(--sp-4); right: var(--sp-4); top: calc(100% - var(--sp-2));
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3); border: 1px solid var(--brand-border); border-radius: var(--r-card);
    background: var(--brand-surface); box-shadow: var(--sh-2, var(--sh-1));
}
.bb .pf-weiter .pf-zuweisen > .section-label { flex: 1 1 100%; margin: 0; }
.bb .pf-weiter .pf-zuweisen > .form-select { flex: 1 1 auto; min-width: 0; }
.bb .pf-werkzeuge .btn-sm { height: var(--h-ctl); min-height: var(--h-ctl); border-radius: var(--r-ctl); padding: 0 .8rem; font-size: var(--fs-5); }
.bb .ml-side-pane .wa-akte > .section-label { display: block; margin-bottom: var(--sp-3); }
.bb .ml-side-pane .ml-kontakt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); margin: 0; }
.bb .ml-side-pane .ml-kontakt-item {
    padding: 0; border: 0; border-radius: 0; background: transparent;
    gap: var(--sp-3); font-size: var(--fs-6);
}
.bb .ml-side-pane .ml-kontakt-item > svg { flex: none; width: 16px; height: 16px; color: var(--btn-blue-dark); }
.bb .ml-side-pane .ml-kontakt-item > span { display: grid; min-width: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb .ml-side-pane .ml-kontakt-item > span > .section-label { font-size: var(--fs-2); margin: 0; }
.bb .ml-side-pane .ml-kontakt-item.is-off > span { color: var(--brand-faint); }
.bb .ml-side-pane a.ml-kontakt-item:hover, .bb .ml-side-pane button.ml-kontakt-item:hover { background: transparent; color: var(--btn-leucht-tief); }
.bb .ml-side-pane .wa-zuordnung, .bb .ml-side-pane .ml-zuordnung { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--brand-border); }
.bb .ml-side-pane .wa-zuordnung > .section-label, .bb .ml-side-pane .ml-zuordnung > .section-label { display: block; margin-bottom: var(--sp-2); }
.bb .ml-side-pane .ml-assign { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); align-items: stretch; }
.bb .ml-side-pane .ml-assign .btn { justify-self: start; height: var(--h-ctl); min-height: var(--h-ctl); border-radius: var(--r-ctl); padding: 0 .8rem; font-size: var(--fs-5); }
.bb .ml-side-pane .wa-zuordnung p, .bb .ml-side-pane .ml-zuordnung p { margin: var(--sp-2) 0 0; font-size: var(--fs-4); color: var(--brand-faint); line-height: 1.4; }
.bb .ml-side-pane .pf-akte .pf-notizen { padding: 0; }

/* Die Kanalreihe trägt ihre Wörter (Entwurf A: „Alle Kanäle | WhatsApp |
   Instagram | Webchat“) – nicht nur am gewählten. */
.bb .kanal-seg a:not(.active) .kanal-wort { display: inline; }
.bb .kanal-seg a:not(.active) { padding: 0 .7rem; }
.bb .kanal-seg a:not(.active) .kanal-zeichen { margin-right: .35rem; }
@media (max-width: 1279.98px) {
    .bb .kanal-seg a:not(.active) .kanal-wort { display: none; }
    .bb .kanal-seg a:not(.active) { padding: 0 .55rem; }
    .bb .kanal-seg a:not(.active) .kanal-zeichen { margin-right: 0; }
}
/* Die Suche rechts in der Filterreihe: dieselbe wie in der Leiste. */
.bb .ml-bar-rechts .bb-suche .form-control { width: 13rem; }
@media (max-width: 1279.98px) { .bb .ml-bar-rechts .bb-suche .form-control { width: 10rem; } }

/* Das „+/−" der Etikettenreihe ist auf den Nachrichten weg (14.10.2026); der
   Etikett-Knopf im Vorgang öffnet dasselbe Fenster über seinen Kopf. */
.pf-etikettgruppe.ohne-plus > .pf-etikettwahl > summary { display: none; }

/* --------------------------------------------------------------------------
   Die Filterleiste fährt ein und aus (14.10.2026, assets/js/leiste-einfahren.js)
   Eingefahren zeigt jede Gruppe nur ihren ersten Knopf und den gewählten; die
   übrigen schrumpfen auf Breite 0 und fahren beim Ausfahren nach rechts auf.
   Der Gruppenabstand (gap) bleibt bei verborgenen Knöpfen stehen und wird mit
   einem negativen Rand zurückgenommen.
   -------------------------------------------------------------------------- */
.cal-seg[data-einfahrbar] > a {
    max-width: 22rem;
    overflow: hidden;
    transition: max-width var(--t-lang) var(--ease-out), padding var(--t-lang) var(--ease-out),
                margin var(--t-lang) var(--ease-out), opacity var(--t-fast) var(--ease-out),
                background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.cal-seg[data-einfahrbar].ist-zu > a:not(:first-of-type):not(.active) {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: -2px;
    opacity: 0;
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .cal-seg[data-einfahrbar] > a { transition: none; }
}

/* Das Zeichen im gewählten Kanalreiter behält seine Kanalfarbe (14.10.2026):
   whatsapp.css machte es weiß, als der gewählte Reiter noch leuchtblau
   gefüllt war. Seit dem Daumen (hell) stand es weiß auf hell und war weg –
   bei WhatsApp, Instagram, Messenger und Webchat. */
.bb .kanal-seg a.active .kanal-zeichen {
    background: color-mix(in srgb, var(--kanal-farbe) 14%, transparent);
    color: var(--kanal-farbe);
}
/* Dasselbe beim Etikett: der Punkt im gewählten Reiter war auf 75 % Weiß
   gesetzt (04-arbeitsflaechen.css, aus der Zeit des blauen Reiters) und
   verschwand auf der hellen Fläche. Er behält die Farbe des Etiketts. */
.bb .pf-seg a.active .pf-etikett-punkt { background: var(--pf-ton, var(--brand-border)); }

/* Der Rückrufknopf im Kopf des Anrufs, solange der Weg noch nicht bereit ist
   (Telefon, 14.10.2026): leiser, aber anfassbar – der Tipp sagt, was fehlt. */
.ml-tools .btn.is-wartet { opacity: .55; }

/* TELEFON: KUNDE ZUORDNEN STEHT OBEN IN DER AKTE (14.10.2026). Seit die
   Kachelreihe Rückruf/Kunde weg ist, ist der Abschnitt das erste Kind der
   Spalte und bekam die Fassung des Kopfes (eine Zeile, mittig). Er ist aber
   ein Abschnitt: Überschrift oben, darunter das Suchfeld über die ganze
   Breite, darunter „Übernehmen" links und „Neuen Kunden anlegen" rechts. */
.bb .ml-split.hat-akte .ml-side-pane > .ml-block:first-child {
    display: block;
    min-height: 0;
}
.bb .ml-side-pane .ml-block .ml-assign { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bb .ml-side-pane .ml-block .ml-assign > input[type="text"],
.bb .ml-side-pane .ml-block .ml-assign > .suchauswahl { grid-column: 1 / -1; max-width: none; width: 100%; }
.bb .ml-side-pane .ml-block .ml-assign > .btn { justify-self: stretch; justify-content: center; }

/* DIE KARTEN RÜCKEN AUF (Telefon, 14.10.2026): Die Spalte drückte die letzte
   Karte an den Boden, damit sie in Nachrichten und E-Mail auf einer Höhe mit
   dem Antwortfeld links endet. Am Telefon gibt es links kein Antwortfeld – die
   Notiz steht dort lose am Ende und ließ ein Loch. Jetzt folgt jede Karte
   unmittelbar der vorigen. */
.bb .ml-split.hat-akte .ml-side-pane.ruecke-auf > :last-child { margin-top: 0; min-height: 0; }

/* DIE KONTAKTZEILEN DER E-MAIL ALS WEISSE KARTE (14.10.2026): Sie standen
   ohne Fläche zwischen den Karten (04-arbeitsflaechen.css nimmt dem
   .ml-kontakt in der Spalte absichtlich die Fassung, weil die Kacheln früher
   selbst Karten waren). Mit .ist-karte bekommen An/Von, Gesendet und Kunde
   dieselbe Fläche wie Notiz und Zuordnung darunter. */
.ml-side-pane > .ml-kontakt.ist-karte {
    border: 1px solid var(--brand-border);
    border-radius: var(--r-card);
    background: var(--brand-surface);
    box-shadow: var(--sh-1);
    padding: var(--sp-5);
}

/* KUNDE ZUORDNEN IN DER E-MAIL: die beiden Knöpfe nebeneinander, gleich groß
   (14.10.2026). Das Suchfeld liegt darüber über die ganze Breite; „Übernehmen"
   und „Keinem Kunden zuordnen" teilen sich die Zeile darunter. Die zwei
   Formulare lösen sich dafür im Raster auf (display: contents). */
.bb .ml-side-pane .ml-zuordnung-doppel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-2);
    align-items: stretch;
}
.bb .ml-side-pane .ml-zuordnung-doppel > * { grid-column: 1 / -1; }
.bb .ml-side-pane .ml-zuordnung-doppel > form.ml-assign,
.bb .ml-side-pane .ml-zuordnung-doppel > form.ml-zuordnung-aus { display: contents; }
.bb .ml-side-pane .ml-zuordnung-doppel form > input[type="text"],
.bb .ml-side-pane .ml-zuordnung-doppel form > .suchauswahl { grid-column: 1 / -1; max-width: none; width: 100%; }
.bb .ml-side-pane .ml-zuordnung-doppel form > .btn {
    grid-column: auto;
    justify-self: stretch;
    justify-content: center;
    height: var(--h-ctl);
    min-height: var(--h-ctl);
    border-radius: var(--r-ctl);
    padding: 0 .8rem;
    font-size: var(--fs-5);
    white-space: nowrap;
}
.bb .ml-side-pane .ml-zuordnung-doppel > .form-text { order: 9; }

/* Die zwei Knöpfe sind nicht gleich breit (14.10.2026, Marc): „Übernehmen" nur
   so breit wie sein Wort, „Keinem Kunden zuordnen" nimmt den Rest. Farben aus
   der Leiter des Hauses: der Hauptweg im hellen Blau (--blau-hell, wie die
   gewählte Zeile), der Nebenweg in einem ruhigen Grau (Textfarbe, 7 % auf der
   Fläche) – das Grau der Kundenblasen. */
.bb .ml-side-pane .ml-zuordnung-doppel form.ml-assign > .btn {
    background: var(--blau-hell);
    border-color: transparent;
    color: var(--btn-leucht-tief);
}
.bb .ml-side-pane .ml-zuordnung-doppel form.ml-assign > .btn:hover { background: color-mix(in srgb, var(--btn-leucht) 22%, var(--brand-surface)); }
.bb .ml-side-pane .ml-zuordnung-doppel form.ml-zuordnung-aus > .btn {
    background: color-mix(in srgb, var(--brand-text) 7%, var(--brand-surface));
    border-color: transparent;
    color: var(--brand-text);
}
.bb .ml-side-pane .ml-zuordnung-doppel form.ml-zuordnung-aus > .btn:hover { background: color-mix(in srgb, var(--brand-text) 12%, var(--brand-surface)); }

/* Telefon, Kunde zuordnen: der dritte Knopf „Kontaktdaten erfragen" geht über
   die ganze Breite unter den beiden anderen (14.10.2026). */
.bb .ml-side-pane .ml-block .ml-assign > a.btn-outline-secondary { grid-column: 1 / -1; }