/*! © 2026 Bemuar Technology (Resmuar). Alle Rechte vorbehalten. Urheberrechtlich geschützt (§§ 2, 69a UrhG): Vervielfältigung, Weitergabe und Nachbau ohne schriftliche Zustimmung nicht gestattet. https://resmuar.de/impressum */
/*
 * DER LEITSTAND — die Übersicht des Inhaber-Panels als Betriebszentrale (D-175, 26.09.2026).
 *
 * ⛔ WARUM EIN EIGENES BLATT. `panel-haus.css` trägt das ganze Haus (Seitenleiste, Kopfleiste,
 *    Formulare, Tabellen) und fünf Fassungen der Übersicht übereinander. Die Übersicht ist seit
 *    D-175 ein eigenes Raster mit eigenen Bauteilen (`bm-lt-*`); sie hier zu sammeln heisst, dass
 *    wer sie ändert, eine Datei liest und nicht die fünf Schichten darunter. Geladen NACH
 *    panel-haus.css, nur im Inhaber-Panel (OwnerPanelProvider), und es liest dessen Marken
 *    (`--color-*`, `--space-*`, `--r-*`) — eigene Farben erfindet es nicht.
 *
 * ⛔ FARBE HEISST ETWAS (Auftrag §2), UND SEIT D-176 GIBT ES ZWEI SORTEN DAVON (Abschnitt 0):
 *    KENNFARBEN sagen, WELCHE Zahl (Umsatz blau, Bestellungen orange, Gäste türkis,
 *    Reservierungen violett, Bestellwert magenta) — auf der Kachel, im Verlauf, in den Balken.
 *    ZUSTANDSFARBEN sagen, WIE es steht (da grün, zugesagt blau, angefragt bernstein, nicht
 *    gekommen rot, Tischservice violett, vorbei grau) — in Ringen, Tischen und Zeitleiste.
 *    Orange (`--bm-dash-akzent`) bleibt der Weg, den man gehen kann. Keine Farbe steht allein —
 *    jede trägt ihr Wort oder ihre Zahl daneben.
 *
 * ⛔ DER BETREIBER, 26.09.2026: «hâlâ renklendirme yok, hem gündüz hem gece». Die erste Fassung
 *    des Leitstands war Petrol auf Grau; man sah nicht, welche Zahl welche war. Die Farben unten
 *    sind GEPRÜFT, nicht gewählt: Helligkeitsband, Sättigung, Abstand benachbarter Farben für
 *    Rot-Grün- und Blau-Gelb-Schwäche, Kontrast zur Fläche — hell gegen #FFFFFF, dunkel gegen
 *    #181A1A, je eigene Stufen (dataviz-Prüfer).
 *
 * ⛔ NICHT JEDE FLÄCHE IST EINE KARTE (§19). Die Lage ist eine Zeile ohne Rahmen; die Kennzahlen
 *    sind EINE Leiste mit Haarfugen; der Handlungsbedarf trägt farbige Punkte; die Auswertung liegt
 *    in ruhigeren Karten. Was Handlung braucht, ist lauter als was berichtet.
 *
 * ⚠️ NICHTS BEWEGT SICH VON SELBST. Übergänge nur beim Zeigen und Drücken (150–220 ms), kein
 *    Pulsieren, kein Glühen, keine Verläufe ausser der Fläche unter der Diagrammlinie — und mit
 *    `prefers-reduced-motion` auch die nicht (Abschnitt 16).
 *
 * ⚠️ KEIN `prefers-color-scheme` (PanelDesignSystemTest): Filament schaltet über `.dark`, und die
 *    Marken von panel-haus.css schalten dort schon mit.
 */

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   0 · DIE FARBEN DES LEITSTANDS — Kennfarben und Zustandsfarben, Tag und Abend (D-176)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/*
 * ⛔ KEINE BLASSE ORANGE- ODER BERNSTEINFLÄCHE. Blasses Orange ist Creme, und Creme ist Braun
 *    (panel-haus.css, D-170) — am Tag wie am Abend. Orange und Bernstein stehen deshalb nur als
 *    Strich, Linie, Balken oder Kante; getönte Flächen gibt es nur in Grün, Blau und Violett.
 *
 * ⚠️ DIE REIHENFOLGE IN DEN RINGEN IST TEIL DER PRÜFUNG (Anteilsringe): benachbarte Teile müssen
 *    sich auch ohne volles Farbsehen trennen. Wer eine Farbe tauscht, prüft die Nachbarn neu.
 *
 * ⚠️ WO EINE FARBE UNTER 3 : 1 ZUR FLÄCHE BLEIBT (Türkis und Magenta am Tag), steht ihr Wert
 *    immer als Schrift daneben — die Farbe benennt, die Zahl sagt.
 *
 * ⚠️ AUCH DIE KONSOLE LIEST DIESE MARKEN (D-178): ihr Leitstand besteht aus denselben Bauteilen,
 *    und `plattform.css` (Abschnitt 20) legt die `--color-*`-Marken, die diese Datei liest, auf
 *    die Farben der Plattform um. Die Flächen der Konsole (#FFFFFF, dunkel #171918) liegen so nah
 *    an denen des Hauses, dass die Prüfung für beide gilt.
 */
.fi-panel-owner,
body.fi-panel-operator {
    /* Kennfarben: welche Zahl */
    --lt-k-umsatz: #2A78D6;
    --lt-k-bestellungen: #EB6834;
    --lt-k-gaeste: #1BAF7A;
    --lt-k-reservierungen: #4A3AA7;
    --lt-k-bestellwert: #E87BA4;

    /* Zustandsfarben: wie es steht */
    --lt-z-ok: #1A9E5C;          /* da, besetzt, abgeholt */
    --lt-z-wait: #2A78D6;        /* zugesagt, reserviert, in Arbeit */
    --lt-z-todo: #C98500;        /* angefragt, abgelehnt — nur als Strich */
    --lt-z-not: #C8323A;         /* nicht gekommen, nicht abgeholt */
    --lt-z-dienst: #4A3AA7;      /* Tischservice: offene Rechnung */
    --lt-z-aus: #A2A3A3;         /* vergeben, abgesagt, storniert */

    /* Wie stark eine Zustandsfläche getönt ist: am Tag leise, am Abend kräftiger. */
    --lt-toenung: 11%;
    --lt-kante: 55%;
}

.dark .fi-panel-owner,
.dark body.fi-panel-operator {
    --lt-k-umsatz: #3987E5;
    --lt-k-bestellungen: #D95926;
    --lt-k-gaeste: #199E70;
    --lt-k-reservierungen: #9085E9;
    --lt-k-bestellwert: #D55181;

    --lt-z-ok: #23A061;
    --lt-z-wait: #3987E5;
    --lt-z-todo: #C98500;
    --lt-z-not: #D64545;
    --lt-z-dienst: #9085E9;
    --lt-z-aus: #5C5E5E;

    --lt-toenung: 20%;
    --lt-kante: 60%;
}

/* Die Kennfarbe eines Bauteils: `data-kennfarbe` am Element, `--kf` für alles darin. */
[data-kennfarbe="umsatz"] { --kf: var(--lt-k-umsatz); }
[data-kennfarbe="bestellungen"],
[data-kennfarbe="kueche"] { --kf: var(--lt-k-bestellungen); }
[data-kennfarbe="gaeste"],
[data-kennfarbe="im-haus"] { --kf: var(--lt-k-gaeste); }
[data-kennfarbe="reservierungen"] { --kf: var(--lt-k-reservierungen); }
[data-kennfarbe="bestellwert"],
[data-kennfarbe="theke"] { --kf: var(--lt-k-bestellwert); }
[data-kennfarbe="tische"] { --kf: var(--lt-z-ok); }
[data-kennfarbe="rechnungen"] { --kf: var(--lt-z-dienst); }
[data-kennfarbe="ankunft"] { --kf: var(--lt-z-wait); }

/* Die Konsole (D-178): dieselben fünf Farben, andere Namen — Häuser blau, neu türkis, still
   violett, Meldungen rosa, Demo orange. Wer hier einen Namen ergänzt, nimmt eine der fünf. */
[data-kennfarbe="haeuser"],
[data-kennfarbe="funktionen"] { --kf: var(--lt-k-umsatz); }
[data-kennfarbe="neu"] { --kf: var(--lt-k-gaeste); }
[data-kennfarbe="still"] { --kf: var(--lt-k-reservierungen); }
[data-kennfarbe="meldungen"] { --kf: var(--lt-k-bestellwert); }
[data-kennfarbe="demo"] { --kf: var(--lt-k-bestellungen); }

/* Der Verlauf liest seine Linie aus `--chart-linie` (Verlauf.php) — hier bekommt sie die
   Kennfarbe der gewählten Zahl. Die Fläche darunter nur in Blau und Türkis; unter Orange bliebe
   auf dem dunklen Grund ein brauner Schleier, deshalb dort eine neutrale. */
.bm-lt-verlauf[data-kennfarbe] {
    --chart-linie: var(--kf);
    --chart-linie-heute: color-mix(in oklab, var(--kf) 45%, transparent);
    --chart-flaeche: color-mix(in oklab, var(--kf) 20%, transparent);
    --chart-flaeche-0: color-mix(in oklab, var(--kf) 0%, transparent);
}

.bm-lt-verlauf[data-kennfarbe="bestellungen"] {
    --chart-flaeche: color-mix(in oklab, var(--color-text) 6%, transparent);
    --chart-flaeche-0: color-mix(in oklab, var(--color-text) 0%, transparent);
}

/* Die Farbe eines Teils (Ring, Legende): `data-teil`, `--teil`. */
[data-teil="besetzt"],
[data-teil="da"],
[data-teil="erledigt"] { --teil: var(--lt-z-ok); }
[data-teil="reserviert"],
[data-teil="zugesagt"],
[data-teil="offen"] { --teil: var(--lt-z-wait); }
[data-teil="angefragt"],
[data-teil="abgelehnt"] { --teil: var(--lt-z-todo); }
[data-teil="nicht_da"],
[data-teil="nicht_abgeholt"] { --teil: var(--lt-z-not); }
[data-teil="konto"] { --teil: var(--lt-z-dienst); }
[data-teil="vergeben"],
[data-teil="abgesagt"],
[data-teil="storniert"],
[data-teil="q-unbekannt"] { --teil: var(--lt-z-aus); }
[data-teil="frei"] { --teil: var(--color-spur); }
[data-teil="q-website"] { --teil: var(--lt-k-umsatz); }
[data-teil="q-telefon"] { --teil: var(--lt-k-bestellungen); }
[data-teil="q-google"] { --teil: var(--lt-k-gaeste); }
[data-teil="q-instagram"] { --teil: var(--lt-k-reservierungen); }
[data-teil="q-andere"] { --teil: var(--lt-k-bestellwert); }

/* Die Zustände unter ihrem eigenen Namen — für Ringe, deren Teile keine Buchung und kein Tisch
   sind (die Ringe der Konsole, D-178). Dieselbe Reihenfolge im Ring wie oben geprüft:
   grün, blau, bernstein, rot, grau. */
[data-teil="z-ok"] { --teil: var(--lt-z-ok); }
[data-teil="z-wait"] { --teil: var(--lt-z-wait); }
[data-teil="z-todo"] { --teil: var(--lt-z-todo); }
[data-teil="z-not"] { --teil: var(--lt-z-not); }
[data-teil="z-aus"] { --teil: var(--lt-z-aus); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   1 · SEITE UND RASTER
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Breiter als die Lesebreite der alten Übersicht (1320): ein Leitstand darf den Schirm nutzen. */
@media (min-width: 64rem) {
    .fi-panel-owner .fi-page.bm-uebersicht {
        max-width: 1600px;
    }
}

.fi-panel-owner .bm-uebersicht .fi-page-header-main-ctn { padding-block: 24px 12px; row-gap: 16px; }

.fi-panel-owner .bm-uebersicht .fi-header { flex-wrap: wrap; gap: 12px 24px; }

/* Die Knöpfe stehen auf dem breiten Schirm auf der Grundlinie des Grusses. Auf dem Telefon steht
   der Kopf untereinander — dort hiesse `flex-end` rechtsbündig, und der Gruss rückte nach rechts.
   Der Gruss behält daneben seine Zeile: bei 1024 px brach «Guten Abend» neben vier Knöpfen in
   zwei Zeilen.
   ⚠️ DIE BREITE NUR IN DER ZEILE (D-179): auf dem Telefon steht der Kopf als Spalte, und dort ist
      `flex-basis: 18rem` eine HÖHE — unter dem Datum standen 290 px Leere (gemessen bei 390 px). */
@media (min-width: 40rem) {
    .fi-panel-owner .bm-uebersicht .fi-header { align-items: flex-end; }
    .fi-panel-owner .bm-uebersicht .fi-header > :first-child { flex: 1 1 18rem; min-width: min(100%, 18rem); }
}

/* ⚠️ AUF DEM TELEFON NUR DER EINE WEG, DEN ES SONST NIRGENDS GIBT. Pass, Tischplan und Speisekarte
      stehen in der Leiste am unteren Rand; vier Knöpfe in zwei Reihen schoben den
      Handlungsbedarf unter den ersten Bildschirm (gemessen bei 390 px, 26.09.2026). */
@media (max-width: 39.99rem) {
    .fi-panel-owner .bm-uebersicht .fi-header .fi-ac .fi-btn:not(.fi-color-primary) { display: none; }
}

/*
 * ⛔ DAS RASTER MISST SEINEN EIGENEN KASTEN, NICHT DAS FENSTER (telefonda-olcmek-yetmiyor, 25.09.):
 *    bei 1024 px nimmt die Seitenleiste 256 px, und der Kasten ist schmaler als auf einem
 *    768er-Tablet. Deshalb eine Behälterabfrage auf `.bm-lt-rahmen` — dieselbe Schwelle bedeutet
 *    überall dieselbe Breite für die Felder.
 */
.bm-lt-rahmen {
    container-type: inline-size;
    container-name: leitstand-rahmen;
}

.bm-lt {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    container-type: inline-size;
    container-name: leitstand;
}

.bm-lt__feld { min-width: 0; }

.bm-lt__feld > .fi-wi-widget { height: 100%; }

/*
 * Ab 58 rem Kasten (928 px) stehen die Felder als Paare in zwölf Spalten, in der Reihenfolge von
 * `--reihe`, jedes so breit wie `--breite` (Dashboard::getFelder). Darunter bleibt die Reihenfolge
 * des Dokuments — die des Telefons.
 */
@container leitstand-rahmen (min-width: 58rem) {
    .bm-lt {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 20px;
        align-items: stretch;
    }

    .bm-lt__feld {
        grid-column: span var(--breite, 12);
        order: var(--reihe, 10);
    }

    /* Die Lage steht enger unter dem Gruss als die Karten untereinander. */
    .bm-lt__feld[data-feld="lage"] { margin-bottom: -8px; }
}

/* Bis 72 rem Kasten wird aus 8/4 ein 7/5: die schmale Spalte trüge sonst weniger als 300 px —
   zu wenig für einen Satz mit Weg. Nur, wenn es ein Paar ist (dann steht 8 bzw. 4 im Stil). */
@container leitstand-rahmen (min-width: 58rem) and (max-width: 72rem) {
    .bm-lt__feld[style*="--breite: 8"] { grid-column: span 7; }
    .bm-lt__feld[style*="--breite: 4"] { grid-column: span 5; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   2 · DIE KARTE — Kopf, Titel, Weg, leer
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-karte {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    height: 100%;
    padding: 20px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-panel);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.bm-lt-karte__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    min-height: 28px;
}

.bm-lt-karte__titel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.bm-lt-karte__unter {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--color-text-muted);
}

/* Eine Zahl neben dem Titel: wie viele es sind, bevor man liest. */
.bm-lt-karte__zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--color-surface-2);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-2);
}

.bm-lt-karte__weg {
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--bm-dash-akzent);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 4px;
    transition: color var(--dur-fast) var(--ease);
}

.bm-lt-karte__weg:hover { text-decoration: underline; text-underline-offset: 3px; }

.bm-lt-karte__weg:focus-visible,
.bm-lt-kz:focus-visible,
.bm-lt-jetzt__feld:focus-visible,
.bm-lt-tun__weg:focus-visible,
.bm-lt-tisch:focus-visible,
.bm-lt-reiter__knopf:focus-visible,
.bm-lt-knopf:focus-visible,
.bm-lt-tischblatt__zu:focus-visible,
.bm-lt-tischblatt__weg:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

.bm-lt-leer {
    margin: 0;
    font-size: 13.5px;
    line-height: 20px;
    color: var(--color-text-2);
}

.bm-lt-knopf {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: var(--r-control);
    background-color: var(--color-accent-strong);
    color: var(--color-on-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: filter var(--dur-fast) var(--ease);
}

.bm-lt-knopf:hover { filter: brightness(1.08); }

/* Eine Pille: Zustand als Wort, in der Farbe seiner Bedeutung. */
.bm-lt-pille {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-2);
    background-color: var(--color-surface-2);
}

.bm-lt-pille .bm-zeichen { font-size: 12px; }
.bm-lt-pille.is-kritisch { color: var(--color-danger-text); background-color: var(--color-danger-tint); }
.bm-lt-pille.is-achtung,
.bm-lt-pille.is-offen { color: var(--color-warning-text); background-color: var(--color-warning-tint); }
.bm-lt-pille.is-aktiv { color: var(--color-info-text); background-color: var(--color-info-tint); }
.bm-lt-pille.is-bereit { color: var(--color-success-text); background-color: var(--color-success-tint); }

/* Die Legende: kleine Farbfelder mit Wort — nur Zustände, die wirklich vorkommen. */
.bm-lt-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-muted);
}

.bm-lt-legende__eintrag { display: inline-flex; align-items: center; gap: 6px; }

.bm-lt-legende__marke {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface);
}

/* Die Reiter: ein Schalter aus zwei bis vier Knöpfen, der gewählte liegt erhoben darin. */
.bm-lt-reiter {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background-color: var(--color-surface-2);
}

.bm-lt-reiter__knopf {
    min-height: 28px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--color-text-2);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.bm-lt-reiter__knopf:hover { color: var(--color-text); }

/* Gewählt: Petrol-Fläche und Petrol-Schrift, wie der gewählte Eintrag der Seitenleiste. */
.bm-lt-reiter__knopf.is-an {
    background-color: var(--color-accent-tint);
    color: var(--color-accent-text);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent) 40%, transparent);
}

/* Die Umschaltung Heute / Auswertung (D-179) — über dem Raster, zwei Links in der Form der Reiter
   (ein Segmented Control wie 21st.dev @cnippet-dev/segmented-control-tabs, ohne Skript). */
.bm-lt-ansicht { margin: 0 0 var(--space-4); }

.bm-lt-ansicht .bm-lt-reiter__knopf {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 16px;
    font-size: 13px;
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   3 · DIE LAGE — eine Zeile unter dem Gruss
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-lage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-2);
}

/* Ein Mittelpunkt zwischen den Teilen — Satzzeichen, kein Kasten. */
.bm-lt-lage__teil + .bm-lt-lage__teil::before {
    content: "·";
    margin: 0 10px;
    color: var(--color-text-faint);
}

.bm-lt-lage__live { font-weight: 600; color: var(--color-accent-text); }
.bm-lt-lage__offen.is-offen { font-weight: 600; color: var(--color-success-text); }
.bm-lt-lage__offen.is-zu { font-weight: 600; color: var(--color-text); }
.bm-lt-lage__stand { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   4 · DIE KENNZAHLEN — eine Leiste, fünf Kacheln, Haarfugen
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ DIE HAARFUGEN ZEICHNET JEDE KACHEL SELBST (Schattenring), nicht der Rasterhintergrund.
      Hier stand Fugen-Technik «Grund = Linienfarbe, gap: 1px» plus
      `.bm-lt-kz:last-child { grid-column-end: -1 }` mit dem Versprechen, die letzte Kachel
      fülle ihre Reihe. Tut sie nicht: `auto / -1` löst zu «eine Spalte breit, an der LETZTEN
      Linie» auf — bei fünf Kacheln in drei Spalten sprang Ø Bestellwert in Spalte 3, und
      Spalte 2 stand als Zelle in Haarfugen-Grau da (gemessen, 1024 px, 02.10.2026). Ein
      durchgehendes Füllen der Restreihe gibt das Raster nicht her (auch ein ::after mit
      `auto / -1` wird an die letzte Linie gepinnt). Seitdem: Grund in Flächenfarbe, jede
      Kachel trägt einen 1-px-Ring in Linienfarbe (die Ringe der Nachbarn fallen aufeinander,
      eine Fuge), und wo keine Kachel steht, steht einfach ruhige Fläche. */
.bm-lt-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 185px), 1fr));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--r-panel);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
}

/*
 * ⚠️ DIE PILLE STEHT NEBEN DER ZAHL, DER VERGLEICHSSATZ DARUNTER — und die Pille rutscht unter die
 *    Zahl, wenn die Kachel zu schmal ist. Beide kommen aus EINER Beschreibung
 *    (`HeuteInZahlen::zahl()`); `display: contents` löst deren Hüllen auf, und die Zeile
 *    `__zahl` bricht um: Satz und Zusammenhang nehmen je die ganze Breite (`flex-basis: 100%`).
 *    Vorher brach die Zeile je nach Breite einmal nach der Pille und einmal nicht (fünf Kacheln,
 *    drei Formen), und bei 1024 px lief die Pille aus der Kachel.
 */
.bm-lt-kz {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 18px 20px 14px;
    background-color: var(--color-surface);
    color: inherit;
    text-decoration: none;
    /* Die Kennfarbe als Kante oben (D-176) + der Haarfugen-Ring (siehe Kopf von §4). */
    box-shadow: inset 0 3px 0 var(--kf, transparent), 0 0 0 1px var(--color-border);
    transition: background-color var(--dur-fast) var(--ease);
}

/* Die Kachel, die etwas verlangt (`bm-stat--todo`, Konsole D-178): Kante und Wert in der Farbe der
   Aufgabe statt einer Kennfarbe — «Braucht Aufmerksamkeit» ist keine Grösse, sondern ein Auftrag. */
.bm-lt-kz.bm-stat--todo { box-shadow: inset 0 3px 0 var(--color-warning), 0 0 0 1px var(--color-border); }
.bm-lt-kz.bm-stat--todo .bm-lt-kz__wert { color: var(--color-warning-text); }

/* Eine Zeile unter dem Wert, wo die Konsole ihre Aufteilung sagt («von 5 insgesamt · 1 in
   Einrichtung»). */
.bm-lt-kz__satz { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

/* Die kleine Linie der letzten sieben Tage — unten in der Kachel, die Kennfarbe als Strich. */
.bm-lt-funke {
    display: block;
    height: 30px;
    margin-top: auto;
    padding-top: 4px;
}

.bm-lt-funke svg { display: block; width: 100%; height: 100%; overflow: visible; }

.bm-lt-funke__boden {
    fill: none;
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.bm-lt-funke__linie,
.bm-lt-funke__heute {
    fill: none;
    stroke: var(--kf, var(--color-accent));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

/* Heute läuft noch: gestrichelt und leiser, wie das letzte Stück im grossen Verlauf. */
.bm-lt-funke__heute { stroke-dasharray: 3 3; opacity: .7; }

.bm-lt-funke__punkt {
    fill: none;
    stroke: var(--kf, var(--color-accent));
    stroke-width: 6;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.bm-lt-funke__ziel { fill: transparent; }

.bm-lt-kz__zahl {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.bm-lt-kz__unter,
.bm-lt-kz__vergleich { display: contents; }

.bm-lt-kz .bm-delta__vor,
.bm-lt-kz .bm-lt-kz__kontext { flex-basis: 100%; font-size: 12px; line-height: 16px; }

.bm-lt-kz .bm-delta__vor { color: var(--color-text-muted); }



.bm-lt-kz:hover { background-color: color-mix(in oklab, var(--color-surface) 96%, var(--color-text)); }

.bm-lt-kz__wort {
    font-size: 13px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-kz__wert {
    font-size: 30px;
    line-height: 36px;
    font-weight: 600;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}

.bm-lt-kz__kontext { color: var(--color-text-2); font-weight: 500; }

/* `.bm-delta` steht in panel-haus.css (der Tooltip des Verlaufs zeichnet es auch); im Leitstand
   bekommt es eine Fläche, damit die Richtung auch ohne Farbe als Form lesbar ist. */
.bm-lt .bm-delta {
    height: 20px;
    padding: 0 6px;
    border-radius: 5px;
    background-color: var(--color-surface-2);
    font-size: 11.5px;
    line-height: 20px;
    font-weight: 600;
}

.bm-lt .bm-delta.is-auf { background-color: var(--color-success-tint); }
.bm-lt .bm-delta.is-ab { background-color: var(--color-danger-tint); }

/* Wo die Richtung nicht die Bedeutung ist (Wie das Haus läuft, D-176): der Pfeil bleibt die Richtung,
   die Farbe folgt der Bedeutung. Mehr «nicht erschienen» ist ▲ und rot. */
.bm-lt .bm-delta.is-auf.is-schlecht,
.bm-lt .bm-delta.is-ab.is-schlecht { color: var(--color-danger-text); background-color: var(--color-danger-tint); }
.bm-lt .bm-delta.is-auf.is-gut,
.bm-lt .bm-delta.is-ab.is-gut { color: var(--color-success-text); background-color: var(--color-success-tint); }
.bm-lt .bm-delta.is-neutral { color: var(--color-text-2); background-color: var(--color-surface-2); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   5 · JETZT IM RESTAURANT — Felder mit Wert, Wort und Satz
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* Die Felder füllen die Karte: steht der Handlungsbedarf daneben höher, wachsen die Felder mit,
   statt unter sich eine leere Fläche zu lassen. */
/* ⚠️ DIE SPALTENZAHL KOMMT AUS DER ZAHL DER FELDER (`--spalten`, Vorlage): bis vier in einer Reihe,
      fünf und sechs als zwei Reihen zu drei. `auto-fit` stellte bei 1920 fünf in die erste Reihe
      und liess das sechste allein darunter stehen. In einer schmalen Karte werden es zwei. */
.bm-lt-jetzt { container-type: inline-size; }

.bm-lt-jetzt__felder {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 12px;
}

/* Fünf Felder (D-179): drei oben, zwei unten über die ganze Breite — in sechs Spalten gerechnet. */
.bm-lt-jetzt__felder[data-anzahl="5"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.bm-lt-jetzt__felder[data-anzahl="5"] > * { grid-column: span 2; }
.bm-lt-jetzt__felder[data-anzahl="5"] > :nth-child(n+4) { grid-column: span 3; }

@container (max-width: 34rem) {
    .bm-lt-jetzt__felder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bm-lt-jetzt__felder[data-anzahl="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* `:nth-child(n)` hebt die Regel auf die Spezifität von `:nth-child(n+4)` oben — sonst
       spannten die letzten zwei auch hier drei Spalten, und die Felder wurden 100 px schmal. */
    .bm-lt-jetzt__felder[data-anzahl="5"] > :nth-child(n) { grid-column: auto; }
    .bm-lt-jetzt__felder[data-anzahl="5"] > :nth-child(n):last-child { grid-column: 1 / -1; }
}

.bm-lt-jetzt__feld {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 14px 16px 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-surface-2);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

a.bm-lt-jetzt__feld:hover { border-color: var(--color-border-strong); }

/*
 * D-180: DIE FELDER TRAGEN IHRE FARBE AUF DER FLÄCHE — «her şey dolu renkli görünsün». Getönt nur,
 * wo Abschnitt 0 es erlaubt: Gäste türkis, Ankunft blau, offene Rechnungen violett. Küche (orange)
 * und Theke (magenta) behalten die neutrale Fläche und ihre Kante; eine blasse orange Fläche wäre
 * am Abend Braun. Ein Ton (kritisch, still) steht weiter unten und gewinnt.
 */
.bm-lt-jetzt__feld[data-kennfarbe="im-haus"],
.bm-lt-jetzt__feld[data-kennfarbe="ankunft"],
.bm-lt-jetzt__feld[data-kennfarbe="rechnungen"] {
    border-color: color-mix(in oklab, var(--kf) 32%, var(--color-border));
    background-color: color-mix(in oklab, var(--kf) var(--lt-toenung), var(--color-surface));
}

.bm-lt-jetzt__feld[data-kennfarbe]::before { inset: 0 auto 0 0; width: 4px; border-radius: 9px 0 0 9px; }

.bm-lt-jetzt__feld.is-still { background-color: var(--color-surface-2); border-color: var(--color-border); }

/* Der Ton: eine Kante links und das Wort in seiner Farbe. */
.bm-lt-jetzt__feld::before {
    content: "";
    position: absolute;
    inset: 10px auto 10px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    /* Die Kennfarbe des Feldes (D-176); ein Ton weiter unten übermalt sie. */
    background-color: var(--kf, transparent);
}

.bm-lt-jetzt__feld.is-achtung::before { background-color: var(--color-warning); }
.bm-lt-jetzt__feld.is-kritisch::before { background-color: var(--color-danger); }
.bm-lt-jetzt__feld.is-bereit::before { background-color: var(--color-success); }
.bm-lt-jetzt__feld.is-kritisch { background-color: var(--color-danger-tint); border-color: color-mix(in oklab, var(--color-danger) 35%, transparent); }

.bm-lt-jetzt__wort {
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-jetzt__wert {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.bm-lt-jetzt__feld.is-still .bm-lt-jetzt__wert { color: var(--color-text-muted); }

.bm-lt-jetzt__satz {
    margin-top: auto;
    font-size: 12.5px;
    line-height: 17px;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

.bm-lt-jetzt__feld.is-achtung .bm-lt-jetzt__satz { color: var(--color-warning-text); font-weight: 500; }
.bm-lt-jetzt__feld.is-kritisch .bm-lt-jetzt__satz { color: var(--color-danger-text); font-weight: 600; }
.bm-lt-jetzt__feld.is-bereit .bm-lt-jetzt__satz { color: var(--color-success-text); font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════════════════════════════════
   6 · HANDLUNGSBEDARF — das Wichtigste oben, jede Stufe mit Wort und Zeichen
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-tun__anzahl {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--color-text-2);
    background-color: var(--color-surface-2);
}

.bm-lt-tun__anzahl.is-kritisch { color: var(--color-danger-text); background-color: var(--color-danger-tint); }
.bm-lt-tun__anzahl.is-achtung { color: var(--color-warning-text); background-color: var(--color-warning-tint); }

.bm-lt-tun__ruhe {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    margin: 0;
    padding: 16px;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text-2);
}

.bm-lt-tun__ruhe .bm-zeichen { font-size: 18px; color: var(--color-success-text); }

.bm-lt-tun__liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-lt-tun__punkt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 4px 12px;
    padding: 12px 14px;
    border: 1px solid var(--color-border);
    border-left-width: 3px;
    border-radius: 10px;
    background-color: var(--color-surface-2);
    transition: border-color var(--dur-fast) var(--ease);
}

.bm-lt-tun__punkt.is-kritisch { border-left-color: var(--color-danger); background-color: var(--color-danger-tint); }
.bm-lt-tun__punkt.is-achtung { border-left-color: var(--color-warning); background-color: var(--color-warning-tint); }
.bm-lt-tun__punkt.is-aktiv { border-left-color: var(--color-info); }
/* D-180: die offenen Angaben des Hauses — sie warten, sie brennen nicht: violett, ohne Fläche. */
.bm-lt-tun__punkt.is-einrichtung { border-left-color: var(--lt-z-dienst); }

.bm-lt-tun__zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--color-text-2);
    background-color: var(--color-surface);
}

.bm-lt-tun__punkt.is-kritisch .bm-lt-tun__zeichen { color: var(--color-danger-text); }
.bm-lt-tun__punkt.is-achtung .bm-lt-tun__zeichen { color: var(--color-warning-text); }
.bm-lt-tun__punkt.is-aktiv .bm-lt-tun__zeichen { color: var(--color-info-text); }
.bm-lt-tun__punkt.is-einrichtung .bm-lt-tun__zeichen { color: var(--lt-z-dienst); }

.bm-lt-tun__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bm-lt-tun__stufe {
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bm-lt-tun__punkt.is-kritisch .bm-lt-tun__stufe { color: var(--color-danger-text); }
.bm-lt-tun__punkt.is-achtung .bm-lt-tun__stufe { color: var(--color-warning-text); }
.bm-lt-tun__punkt.is-aktiv .bm-lt-tun__stufe { color: var(--color-info-text); }
.bm-lt-tun__punkt.is-einrichtung .bm-lt-tun__stufe { color: var(--lt-z-dienst); }

.bm-lt-tun__wort {
    font-size: 14px;
    line-height: 19px;
    font-weight: 600;
    color: var(--color-text);
}

.bm-lt-tun__satz {
    font-size: 12.5px;
    line-height: 17px;
    color: var(--color-text-2);
}

.bm-lt-tun__weg {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--bm-dash-akzent);
    text-decoration: none;
    border-radius: 4px;
}

.bm-lt-tun__weg:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   7 · RESERVIERUNGEN HEUTE — Tag, Zeitleiste, als Nächstes, morgen
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-abend__tag {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text-2);
}

.bm-lt-abend__wort { font-weight: 600; color: var(--color-text); }
.bm-lt-abend__zahl b { font-size: 15px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.bm-lt-abend__zahl.is-angefragt { color: var(--color-warning-text); font-weight: 600; }

.bm-lt-abend__leer { display: flex; flex-direction: column; gap: 12px; }

/* Die Leiste: oben die Stunden, darunter die Bahnen. */
.bm-lt-leiste {
    --bahn-hoehe: 26px;
    --bahn-luft: 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bm-lt-leiste__achse {
    position: relative;
    height: 16px;
    font-size: 11px;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bm-lt-leiste__stunde {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
}

.bm-lt-leiste__stunde:first-child { transform: none; }
.bm-lt-leiste__stunde:last-child { transform: translateX(-100%); }

.bm-lt-leiste__feld {
    position: relative;
    height: calc(var(--bahnen) * (var(--bahn-hoehe) + var(--bahn-luft)) + var(--bahn-luft));
    min-height: 40px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-surface-2);
}

.bm-lt-leiste__linie {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-border);
}

/* Geschlossen: eine leise, schraffierte Fläche — das Haus hat zu, das ist kein ruhiger Abschnitt. */
.bm-lt-leiste__zu {
    position: absolute;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--color-text) 5%, transparent) 6px 7px);
}

.bm-lt-leiste__bloecke { margin: 0; padding: 0; list-style: none; }

.bm-lt-block {
    position: absolute;
    top: calc(var(--bahn-luft) + var(--bahn) * (var(--bahn-hoehe) + var(--bahn-luft)));
    height: var(--bahn-hoehe);
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 6px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 11.5px;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-text);
    background-color: color-mix(in oklab, var(--lt-z-wait) var(--lt-toenung), var(--color-surface));
    border-color: color-mix(in oklab, var(--lt-z-wait) var(--lt-kante), transparent);
    box-shadow: inset 3px 0 0 var(--lt-z-wait);
}

.bm-lt-block__zeit { font-weight: 600; font-variant-numeric: tabular-nums; }
.bm-lt-block__name { overflow: hidden; text-overflow: ellipsis; }
.bm-lt-block__pers { margin-left: auto; font-weight: 600; color: var(--color-text-2); font-variant-numeric: tabular-nums; }

.bm-lt-block.is-da {
    background-color: color-mix(in oklab, var(--lt-z-ok) var(--lt-toenung), var(--color-surface));
    border-color: color-mix(in oklab, var(--lt-z-ok) var(--lt-kante), transparent);
    box-shadow: inset 3px 0 0 var(--lt-z-ok);
}

/* Angefragt: keine getönte Fläche (Bernstein blass = Creme), die Farbe steht in Kante und Strich. */
.bm-lt-block.is-angefragt {
    background-color: var(--color-surface);
    border: 1px dashed var(--lt-z-todo);
    box-shadow: inset 3px 0 0 var(--lt-z-todo);
}

.bm-lt-block.is-nicht-da {
    background-color: transparent;
    border: 1px dashed var(--color-border-strong);
    color: var(--color-text-muted);
    text-decoration: line-through;
    box-shadow: inset 3px 0 0 var(--lt-z-not);
}

/* Jetzt: eine senkrechte Linie in der Farbe des Hauses, ohne Puls. */
.bm-lt-leiste__jetzt {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background-color: var(--bm-dash-akzent);
}

.bm-lt-legende__marke.is-da { background-color: var(--lt-z-ok); border-color: var(--lt-z-ok); }
.bm-lt-legende__marke.is-zugesagt { background-color: var(--lt-z-wait); border-color: var(--lt-z-wait); }
.bm-lt-legende__marke.is-angefragt { background-color: var(--color-surface); border: 1.5px dashed var(--lt-z-todo); }
.bm-lt-legende__marke.is-nicht-da { background-color: transparent; border: 1.5px dashed var(--lt-z-not); }

.bm-lt-abend__naechste,
.bm-lt-abend__morgen {
    display: flex;
    flex-direction: column;
}

.bm-lt-abend__morgen {
    gap: 2px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

.bm-lt-abend__morgen .bm-lt-abend__tag { margin-bottom: 4px; }

.bm-lt-abend__unterkopf {
    margin: 0 0 4px;
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-abend__zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 4px 0;
    border-bottom: 1px solid var(--color-border-soft);
    font-size: 13.5px;
    line-height: 18px;
}

.bm-lt-abend__zeile:last-of-type { border-bottom: 0; }
.bm-lt-abend__zeile.is-morgen { min-height: 32px; font-size: 13px; color: var(--color-text-2); }

.bm-lt-abend__uhr { width: 44px; flex: none; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text); }
.bm-lt-abend__pers { width: 28px; flex: none; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bm-lt-abend__gast { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--color-text); }
.bm-lt-abend__zeile.is-morgen .bm-lt-abend__gast { font-weight: 400; color: var(--color-text-2); }

.bm-lt-abend__tisch {
    flex: none;
    padding: 2px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-2);
    white-space: nowrap;
}

.bm-lt-abend__zeile.is-ueber .bm-lt-abend__uhr { color: var(--color-warning-text); }

.bm-lt-abend__rest,
.bm-lt-fluss__rest {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   8 · TISCHSTATUS — das Raster der Tische
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-raum__stand {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0;
    font-size: 13px;
    color: var(--color-text-2);
}

.bm-lt-raum__zahl b { font-size: 15px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }
.bm-lt-raum__zahl.is-belegt b { color: var(--color-accent-text); }
.bm-lt-raum__gesamt { color: var(--color-text-muted); }

.bm-lt-raum__bereiche { display: flex; flex-direction: column; gap: 14px; }
.bm-lt-raum__bereich { min-width: 0; }

.bm-lt-raum__bereichname {
    margin: 0 0 6px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bm-lt-raum__tische {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.bm-lt-tisch {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 72px;
    padding: 9px 10px;
    border: 1px solid var(--color-border);
    border-radius: 9px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.bm-lt-tisch:hover { border-color: var(--color-border-strong); }
.bm-lt-tisch:active { transform: scale(.98); }
.bm-lt-tisch.is-rund { border-radius: 22px; }
.bm-lt-tisch.is-offen { outline: 2px solid var(--color-focus); outline-offset: 1px; }

.bm-lt-tisch__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; }
.bm-lt-tisch__etikett { font-size: 14px; line-height: 18px; font-weight: 700; }
.bm-lt-tisch__plaetze { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }

.bm-lt-tisch__satz {
    font-size: 11.5px;
    line-height: 15px;
    color: var(--color-text-2);
    overflow-wrap: anywhere;
}

.bm-lt-tisch__dauer { font-size: 11px; line-height: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/*
 * Die Zustände: Fläche und Kante in der Zustandsfarbe (D-176) — dieselbe wie im Ring «Tische ·
 * jetzt» darüber: besetzt grün, Rechnung offen violett, reserviert blau, angefragt bernstein
 * (nur als gestrichelte Kante, keine Creme-Fläche).
 */
.bm-lt-tisch.is-besetzt { background-color: color-mix(in oklab, var(--lt-z-ok) var(--lt-toenung), var(--color-surface)); border-color: color-mix(in oklab, var(--lt-z-ok) var(--lt-kante), transparent); }
.bm-lt-tisch.is-konto { background-color: color-mix(in oklab, var(--lt-z-dienst) var(--lt-toenung), var(--color-surface)); border-color: color-mix(in oklab, var(--lt-z-dienst) var(--lt-kante), transparent); }
.bm-lt-tisch.is-konto .bm-lt-tisch__dauer { color: var(--color-text-2); }
.bm-lt-tisch.is-reserviert { background-color: color-mix(in oklab, var(--lt-z-wait) var(--lt-toenung), var(--color-surface)); border-color: color-mix(in oklab, var(--lt-z-wait) var(--lt-kante), transparent); }
.bm-lt-tisch.is-angefragt { background-color: var(--color-surface); border-style: dashed; border-color: var(--lt-z-todo); }

/* Seit mehr als einem Dienst offen: vergessen, nicht besetzt (Handlungsbedarf nennt die Nummer). */
.bm-lt-tisch.is-alt { border-style: dashed; border-color: var(--color-warning); }
.bm-lt-tisch.is-alt .bm-lt-tisch__dauer { color: var(--color-warning-text); }
.bm-lt-tisch.is-vergeben { background: repeating-linear-gradient(135deg, var(--color-surface) 0 6px, var(--color-surface-2) 6px 8px); color: var(--color-text-muted); }
.bm-lt-tisch.is-frei .bm-lt-tisch__satz { color: var(--color-text-muted); }

.bm-lt-legende__marke.is-besetzt { background-color: var(--lt-z-ok); border-color: var(--lt-z-ok); }
.bm-lt-legende__marke.is-konto { background-color: var(--lt-z-dienst); border-color: var(--lt-z-dienst); }
.bm-lt-legende__marke.is-reserviert { background-color: var(--lt-z-wait); border-color: var(--lt-z-wait); }
.bm-lt-legende__marke.is-vergeben { background-color: var(--color-surface-2); }
.bm-lt-legende__marke.is-frei { background-color: var(--color-surface); }

/* Das Tischblatt: unter dem Raum, nicht darüber. */
.bm-lt-tischblatt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-surface-2);
}

.bm-lt-tischblatt__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bm-lt-tischblatt__wer { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 13px; color: var(--color-text-2); }
.bm-lt-tischblatt__wer b { font-size: 16px; color: var(--color-text); }

.bm-lt-tischblatt__zu {
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-control);
    background-color: var(--color-surface);
    color: var(--color-text-2);
    font: inherit;
    font-size: 12.5px;
    cursor: pointer;
}

.bm-lt-tischblatt__daten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px 16px;
    margin: 0;
}

.bm-lt-tischblatt__daten dt { font-size: 11.5px; color: var(--color-text-muted); }
.bm-lt-tischblatt__daten dd { margin: 2px 0 0; font-size: 13.5px; font-weight: 500; color: var(--color-text); }
.bm-lt-tischblatt__leise { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--color-text-muted); }

.bm-lt-tischblatt__weg {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--bm-dash-akzent);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   9 · LAUFENDE BESTELLUNGEN — die Warteschlange
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-fluss__warnung {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background-color: var(--color-danger-tint);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-danger-text);
}

/*
 * ⛔ EIN RASTER FÜR ALLE ZEILEN (D-180). Hier stand je Zeile ein eigenes Raster mit einer festen
 *    Spalte von 84 px für die Wartezeit — «52 dakikadır bekliyor» ist 130 px lang und lief nach
 *    links über den Zustand («Çok u52dakikadır …», Türkisch, gemessen 26.09.2026). Jetzt trägt die
 *    Liste die Spalten und jede Zeile übernimmt sie (`subgrid`): die breiteste Angabe bestimmt die
 *    Spalte, und alle Zeilen stehen darunter bündig.
 */
.bm-lt-fluss__liste {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    column-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-lt-fluss__zeile {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    min-height: 52px;
    padding: 6px 12px 6px 10px;
    border-bottom: 1px solid var(--color-border-soft);
    border-left: 3px solid transparent;
}

.bm-lt-fluss__zeile:last-child { border-bottom: 0; }
.bm-lt-fluss__zeile.is-kritisch { border-left-color: var(--color-danger); background-color: var(--color-danger-tint); border-radius: 6px; }
.bm-lt-fluss__zeile.is-achtung { border-left-color: var(--color-warning); }
.bm-lt-fluss__zeile.is-aktiv { border-left-color: var(--color-info); }
.bm-lt-fluss__zeile.is-bereit { border-left-color: var(--color-success); }

/* D-192 («siparişlerin geldiği yeri de daha güzel yap»): Code und Küchenzeit eine Stufe grösser
   und fetter — das sind die zwei Angaben, die am Pass zugerufen werden. Nichts sortiert sich um. */
.bm-lt-fluss__code {
    font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text-2);
}

.bm-lt-fluss__gast { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bm-lt-fluss__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--color-text); }
.bm-lt-fluss__posten { font-size: 12px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bm-lt-fluss__uhr { font-size: 13px; font-weight: 600; color: var(--color-text-2); }

.bm-lt-fluss__zeit {
    justify-self: end;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.bm-lt-fluss__zeit.is-spaet { font-weight: 700; color: var(--color-danger-text); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   10 · AUSWERTUNG — Verlauf, Gerichte, Stosszeiten
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-verlauf { gap: 14px; }
.bm-lt-verlauf__kopf { align-items: flex-start; }
.bm-lt-verlauf__titel { min-width: 0; }
.bm-lt-verlauf__legende { margin: 4px 0 0; font-size: 12px; line-height: 16px; color: var(--color-text-2); }
.bm-lt-verlauf__wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bm-lt-verlauf__wahl .fi-wi-chart-filter { min-width: 140px; }

.bm-lt-verlauf__bild { position: relative; }

/* Eine feste Höhe für das Bild: ohne sie zeichnete Chart.js auf dem Telefon 130 px hoch und liess
   darunter eine leere Fläche bis zur Mindesthöhe. */
.bm-lt-verlauf__bild .fi-wi-chart-canvas-ctn { height: 260px; }

.bm-lt-verlauf__still {
    position: absolute;
    inset: 30% 10% auto;
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    background-color: color-mix(in oklab, var(--color-surface) 90%, transparent);
    font-size: 13px;
    line-height: 19px;
    text-align: center;
    color: var(--color-text-2);
}

.bm-lt-verlauf__werte {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-border);
}

.bm-lt-verlauf__wert { padding: 12px 14px; background-color: var(--color-surface-2); }
.bm-lt-verlauf__wert dt { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }
.bm-lt-verlauf__wert dd { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-size: 12px; color: var(--color-text-muted); }
.bm-lt-verlauf__wann { flex-basis: 100%; font-size: 12px; color: var(--color-text-muted); }
.bm-lt-verlauf__wert b { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--color-text); font-variant-numeric: tabular-nums; }

/* Gerichte: Rang, Name, Zahl — der Balken als Spur darunter. */
.bm-lt-gerichte__liste { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }

.bm-lt-gerichte__zeile {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    grid-template-areas:
        "rang name zahl"
        ".    spur anteil";
    align-items: center;
    gap: 4px 10px;
}

.bm-lt-gerichte__rang { grid-area: rang; font-size: 13px; font-weight: 600; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bm-lt-gerichte__name { grid-area: name; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--color-text); }
.bm-lt-gerichte__zahl { grid-area: zahl; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-text-2); white-space: nowrap; }
.bm-lt-gerichte__anteil { grid-area: anteil; font-size: 11.5px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; text-align: right; }

.bm-lt-gerichte__spur {
    grid-area: spur;
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--color-spur);
}

/* Die Balken in der Kennfarbe der Bestellungen (D-176): hier wird gezählt, was bestellt wurde. */
.bm-lt-gerichte__spur > span { display: block; height: 100%; border-radius: 999px; background-color: var(--lt-k-bestellungen); }

.bm-lt-gerichte__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    font-size: 12px;
    color: var(--color-text-muted);
}

/*
 * Tagesrückblick (D-251): zwei Datumsfelder über denselben Kacheln und derselben Rangliste wie
 * der Rest der Auswertung. Die Felder in der Form der Reiter daneben (Haarlinie, 8 px Radius),
 * kein eigener Datumswähler — der des Geräts ist am Telefon der bessere.
 */
.bm-lt-rb { gap: 14px; }

.bm-lt-rb__felder { display: flex; flex-wrap: wrap; gap: 12px; }

.bm-lt-rb__feld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-rb__eingabe {
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background-color: var(--color-surface);
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    color-scheme: light dark;
}

.bm-lt-rb__eingabe:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Der stärkste Tag ist ein Datum, keine Zahl: am Telefon passt «Sa, 26.9.2026» in 30 px nicht in die
   halbe Breite und wurde abgeschnitten (Labor, 390 px). Kleiner, und notfalls umbrechen statt schneiden. */
.bm-lt-rb [data-rueckblick="staerkster-tag"] .bm-lt-kz__wert { white-space: normal; }

@media (max-width: 39.99rem) {
    .bm-lt-rb [data-rueckblick="staerkster-tag"] .bm-lt-kz__wert { font-size: 20px; line-height: 26px; }
}

.bm-lt-rb__unterkopf {
    margin: 4px 0 0;
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 600;
    color: var(--color-text);
}

/*
 * Stosszeiten (D-180): je Zahl eine Reihe Säulen, die Stunden als gemeinsame Achse darunter.
 * Form nach 21st.dev intentui/bar-chart «custom-label»: runde Köpfe, Zahl über der Säule — hier
 * nur an der Spitze und an «jetzt» (Stosszeiten::reihen()).
 *
 * ⛔ KEINE BLASSEN VERGANGENEN SÄULEN. Orange mit der Fläche gemischt ist am Abend Braun
 *    (Abschnitt 0). Die Vergangenheit erkennt man an «jetzt»: an der Säule mit Rand, an der Zahl
 *    über ihr und am Wort unter der Achse.
 */
.bm-lt-stoss { position: relative; }

.bm-lt-saeulen {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 0;
}

.bm-lt-saeulen__reihe {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 104px;
}

.bm-lt-saeulen__name {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-saeulen__marke {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: var(--kf);
}

.bm-lt-saeulen__feld,
.bm-lt-saeulen__achse {
    display: grid;
    grid-template-columns: repeat(var(--stunden, 12), minmax(0, 1fr));
    gap: 4px;
}

.bm-lt-saeulen__feld {
    flex: 1;
    align-items: end;
    min-height: 80px;
    /* Platz für die Zahl über der höchsten Säule. */
    padding-top: 16px;
    border-bottom: 1px solid var(--color-border);
}

.bm-lt-saeule {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
    min-width: 0;
}

/* Die laufende Stunde: ein leiser Streifen hinter ihrer Säule. */
.bm-lt-saeule.is-jetzt::before {
    content: "";
    position: absolute;
    inset: -16px -2px 0;
    border-radius: 6px 6px 0 0;
    background-color: var(--color-surface-2);
}

.bm-lt-saeule__balken {
    position: relative;
    display: block;
    width: min(100%, 28px);
    height: var(--hoehe, 0%);
    min-height: 2px;
    border-radius: 4px 4px 1px 1px;
    background-color: var(--kf);
    transition: filter var(--dur-fast) var(--ease);
}

.bm-lt-saeule:hover .bm-lt-saeule__balken { filter: saturate(1.15) brightness(1.06); }

/* Null ist ein Strich auf der Grundlinie, in der Farbe der Spur — keine Säule, aber eine Stelle. */
.bm-lt-saeule.is-null .bm-lt-saeule__balken { background-color: var(--color-spur); }

/* «Jetzt»: ein Rand aus Fläche und Kennfarbe um die Säule. */
.bm-lt-saeule.is-jetzt .bm-lt-saeule__balken {
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--kf);
}

.bm-lt-saeule__wert {
    position: absolute;
    left: 50%;
    bottom: calc(var(--hoehe, 0%) + 3px);
    transform: translateX(-50%);
    font-size: 11.5px;
    line-height: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text);
}

.bm-lt-saeulen__achse { margin-top: -6px; }

.bm-lt-saeulen__uhr {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    font-size: 11px;
    line-height: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

.bm-lt-saeulen__uhr.is-jetzt { font-weight: 700; color: var(--color-text); }

.bm-lt-saeulen__uhr small {
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--bm-dash-akzent);
}

/* Die Bitte um eine Bewertung (BewertungBitten, D-180): zwei Knöpfe und ein leiser Weg, eine Zeile. */
.bm-lt-bitte__wege {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 14px;
}

/* Die Tafel unter den Säulen: für den Vorleser da, für das Auge nicht. */
.bm-lt-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   11 · AUF EINEN BLICK — die Ringe (D-176)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

/* ⚠️ EINE, ZWEI ODER VIER SPALTEN — NIE DREI. `auto-fit` stellte bei 1280 px drei Ringe in die
      erste Reihe und den vierten allein darunter. */
.bm-lt-ringe {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@container leitstand (min-width: 40rem) {
    .bm-lt-ringe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container leitstand (min-width: 78rem) {
    .bm-lt-ringe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container leitstand-rahmen (min-width: 58rem) {
    .bm-lt-ringe { gap: 20px; }
}

/* D-180: in der Auswertung stehen zwei Ringe (die dreissig Tage) — zwei Spalten, nicht vier mit
   zwei leeren; ein einzelner Ring nimmt die ganze Reihe. */
.bm-lt-ringe[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); }

@container leitstand (min-width: 78rem) {
    .bm-lt-ringe[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/*
 * D-180: DER RING IN SEINER KARTE — der Abend-Ring in den Reservierungen, der Raum-Ring im
 * Tischstatus. Jeder Ring misst seinen eigenen Kasten, damit die Regel unten (Legende unter den
 * Ring, wenn es eng wird) für seine Spalte gilt und nicht für die ganze Karte.
 */
.bm-lt-abend { container-type: inline-size; }

.bm-lt-abend__ring,
.bm-lt-raum__ring {
    container-type: inline-size;
    min-width: 0;
}

.bm-lt-abend__oben {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
}

@container (min-width: 36rem) {
    .bm-lt-abend__oben {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        align-items: start;
        gap: 24px;
    }

    .bm-lt-abend__ring {
        padding-right: 24px;
        border-right: 1px solid var(--color-border-soft);
    }
}

.bm-lt-raum__ring {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-soft);
}

.bm-lt-ringkarte { gap: 14px; container-type: inline-size; }

.bm-lt-ring {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* ⚠️ VIER RINGE IN EINER REIHE LASSEN DER LEGENDE NEBEN DEM RING ~150 PX — «Rechnung offen»
      wurde zu «Rechn…» (gemessen bei 1600 px, 26.09.2026). Unter 19 rem Innenbreite der Karte
      steht die Legende deshalb UNTER dem Ring, in voller Breite. Die Karte auf dem Telefon ist
      breiter (326 px innen bei 390) und behält Ring und Legende nebeneinander — sonst wären vier
      Ringe untereinander 1300 px Weg bis zum Abend. */
@container (max-width: 19rem) {
    .bm-lt-ring { flex-direction: column; align-items: stretch; gap: 14px; }
    .bm-lt-ring__bild { align-self: center; }
}

.bm-lt-ring__bild {
    position: relative;
    flex: none;
    width: 118px;
    height: 118px;
}

.bm-lt-ring__bild svg { display: block; width: 100%; height: 100%; }

.bm-lt-ring__spur {
    fill: none;
    stroke: var(--color-spur);
    stroke-width: 13;
}

.bm-lt-ring__teil {
    fill: none;
    stroke: var(--teil, var(--color-text-faint));
    stroke-width: 13;
    transition: stroke-width var(--dur-fast) var(--ease);
}

/* Der Teil unter dem Zeiger wird dicker; sein Titel nennt Wort, Zahl und Anteil. */
.bm-lt-ring__teil:hover { stroke-width: 16; }

.bm-lt-ring__mitte {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin: 0;
    /* Der Innenkreis ist ~79 px weit, auf Höhe der zweiten Zeile nur ~75 px: 25 px Rand je Seite
       lassen eine Zeile von höchstens 68 px, alles Längere bricht um (Griechisch, 26.09.2026). */
    padding: 0 25px;
    text-align: center;
    pointer-events: none;
}

.bm-lt-ring__mitte b {
    font-size: 21px;
    line-height: 25px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text);
}

/* Lange Wörter (Griechisch, Italienisch) brechen in der Mitte, statt unter den Ring zu laufen. */
.bm-lt-ring__mitte span { max-width: 100%; font-size: 11px; line-height: 13px; color: var(--color-text-muted); overflow-wrap: anywhere; hyphens: auto; }

.bm-lt-ring__leer { font-size: 11.5px; line-height: 15px; color: var(--color-text-muted); }

.bm-lt-ring__legende {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    /* Die Zahl bleibt nah an ihrem Wort, auch wenn die Karte breit ist. */
    max-width: 22rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 12.5px;
    line-height: 17px;
}

.bm-lt-ring__eintrag {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto 2.9em;
    align-items: center;
    gap: 8px;
}

.bm-lt-ring__marke {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: var(--teil, var(--color-text-faint));
}

/* «Frei» hat die Farbe der Spur — damit das Feld auf der Fläche steht, eine Haarkante. */
.bm-lt-ring__marke[data-teil="frei"] { box-shadow: inset 0 0 0 1px var(--color-border-strong); }

.bm-lt-ring__wort { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-2); }
.bm-lt-ring__wert { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text); }
.bm-lt-ring__anteil { font-size: 11.5px; font-variant-numeric: tabular-nums; text-align: right; color: var(--color-text-muted); }

.bm-lt-ring__eintrag.is-null .bm-lt-ring__wort,
.bm-lt-ring__eintrag.is-null .bm-lt-ring__wert { color: var(--color-text-muted); font-weight: 400; }
/* Null: nur der Umriss. Halb durchsichtiges Bernstein auf dem dunklen Grund wäre Braun. */
.bm-lt-ring__eintrag.is-null .bm-lt-ring__marke { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--teil, var(--color-text-faint)); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   11b · WAS AUFFÄLLT — Sätze aus Regeln, das Wichtigste zuerst (D-188)
   Form nach 21st.dev «Insight Cards»: Marke links, Satz rechts. Keine Bewegung, keine neue Farbe:
   die Marke ist die Pille aus §4.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-auffaellt { gap: 12px; }

.bm-lt-auffaellt__liste {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-lt-auffaellt__satz {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    align-items: baseline;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.bm-lt-auffaellt__satz:first-child { padding-top: 0; border-top: 0; }

.bm-lt .bm-lt-auffaellt__marke {
    justify-self: start;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Eine Höhe ohne Richtung (No-Shows): dieselbe Farbe wie §4, aber kein Pfeil — die Regeln dort
   verlangen is-auf/is-ab, und ein Pfeil hiesse «gestiegen» oder «gesunken». */
.bm-lt .bm-lt-auffaellt__marke.is-schlecht { color: var(--color-danger-text); background-color: var(--color-danger-tint); }
.bm-lt .bm-lt-auffaellt__marke.is-gut { color: var(--color-success-text); background-color: var(--color-success-tint); }

.bm-lt-auffaellt__satz p {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-text);
    text-wrap: pretty;
}

.bm-lt-auffaellt__leer {
    margin: 0;
    font-size: 13.5px;
    line-height: 19px;
    color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   12 · WOCHE UND MONAT — zwei Balken je Zahl (D-176)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-perioden { gap: 16px; }

.bm-lt-perioden__spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 18px 28px;
}

.bm-lt-perioden__spalte { min-width: 0; }

.bm-lt-perioden__kopf {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-border);
}

.bm-lt-perioden__kopf b { font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--color-text); }
.bm-lt-perioden__kopf span { font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

.bm-lt-perioden__liste { display: flex; flex-direction: column; gap: 14px; margin: 0; }

.bm-lt-perioden__zeile dt { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--color-text-2); }

.bm-lt-perioden__zeile dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 4px 0 0;
}

.bm-lt-perioden__wert {
    font-size: 20px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.bm-lt-perioden__balken {
    display: flex;
    flex-basis: 100%;
    flex-direction: column;
    gap: 3px;
}

/* Am Anfang gerade, am Ende rund: der Balken steht auf seiner Grundlinie. */
.bm-lt-perioden__balken > span { display: block; min-width: 2px; border-radius: 0 4px 4px 0; }
.bm-lt-perioden__balken > .is-jetzt { height: 9px; background-color: var(--kf, var(--color-accent)); }
.bm-lt-perioden__balken > .is-vorher { height: 5px; background-color: var(--chart-vergleich); }

.bm-lt-perioden__vorher { flex-basis: 100%; font-size: 12px; line-height: 16px; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   13 · DIE WOCHENTAGE — sieben Säulen, eine Farbe (D-176)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-wochentage { gap: 16px; }

/* Die Säulen wachsen mit der Karte: steht «Woche und Monat» daneben höher, bleibt unten kein Loch. */
.bm-lt-wochentage__saeulen {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-lt-wochentage__tag {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    text-align: center;
}

.bm-lt-wochentage__feld {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    min-height: 150px;
    border-bottom: 1px solid var(--color-border-strong);
}

.bm-lt-wochentage__saeule {
    display: block;
    width: min(100%, 40px);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    background-color: var(--kf, var(--color-accent));
    transition: height var(--dur-fast) var(--ease);
}

.bm-lt-wochentage__spitze {
    margin-bottom: 4px;
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--color-text);
}

/* Ein Tag, an dem das Haus in acht Wochen nie offen hatte: schraffiert, «zu» darunter. */
.bm-lt-wochentage__tag.is-zu .bm-lt-wochentage__feld {
    background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in oklab, var(--color-text) 5%, transparent) 6px 7px);
}

.bm-lt-wochentage__name {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12.5px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-wochentage__heute { font-size: 10.5px; line-height: 13px; font-weight: 600; color: var(--bm-dash-akzent); }

.bm-lt-wochentage__tag.is-heute .bm-lt-wochentage__name { color: var(--color-text); }

/* Der stärkste Tag trägt seinen Wert über der Säule — und darunter in voller Schrift. */
.bm-lt-wochentage__tag.is-staerkster .bm-lt-wochentage__wert { font-weight: 600; color: var(--color-text); }
.bm-lt-wochentage__tag.is-heute .bm-lt-wochentage__saeule { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3.5px var(--kf, var(--color-accent)); }

.bm-lt-wochentage__wert {
    font-size: 11.5px;
    line-height: 15px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   14 · WIE DAS HAUS LÄUFT — Quoten und Schnitte (D-176)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-haus { gap: 16px; }

.bm-lt-haus__kacheln {
    display: grid;
    grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-lt-haus__kachel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background-color: var(--color-surface-2);
}

/* Die Spur einer Quote in der Farbe ihrer Bedeutung: Verlust rot, Absage bernstein, Treue grün. */
.bm-lt-haus__kachel[data-zustand="not"] { --hk: var(--lt-z-not); }
.bm-lt-haus__kachel[data-zustand="todo"] { --hk: var(--lt-z-todo); }
.bm-lt-haus__kachel[data-zustand="ok"] { --hk: var(--lt-z-ok); }

.bm-lt-haus__wort { font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--color-text-2); }

.bm-lt-haus__zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }

.bm-lt-haus__wert {
    font-size: 22px;
    line-height: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}

.bm-lt-haus__spur {
    display: block;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background-color: var(--color-spur);
}

.bm-lt-haus__spur > span { display: block; height: 100%; border-radius: 999px; background-color: var(--hk, var(--color-accent)); }

.bm-lt-haus__satz { margin-top: auto; font-size: 12px; line-height: 16px; color: var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   15 · SCHMALE KÄSTEN — das Telefon ist kein verkleinerter Schreibtisch (§24)
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@container leitstand (max-width: 40rem) {
    .bm-lt-karte { padding: 16px; gap: 14px; }
    .bm-lt-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bm-lt-kz { padding: 14px 14px 12px; }
    .bm-lt-kz__wert { font-size: 24px; line-height: 30px; }
    .bm-lt-jetzt__feld { padding: 12px; }
    .bm-lt-jetzt__wert { font-size: 22px; line-height: 28px; }
    .bm-lt-fluss__liste { display: flex; flex-direction: column; }
    .bm-lt-fluss__zeile { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "gast pille" "code zeit"; gap: 4px 10px; }
    .bm-lt-fluss__gast { grid-area: gast; }
    .bm-lt-fluss__zeile .bm-lt-pille { grid-area: pille; justify-self: end; }
    .bm-lt-fluss__code { grid-area: code; }
    .bm-lt-fluss__zeit { grid-area: zeit; }
    .bm-lt-raum__tische { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
    .bm-lt-tisch { min-height: 64px; padding: 8px; }
    .bm-lt-leiste { --bahn-hoehe: 22px; }
    .bm-lt-block__name { display: none; }
    .bm-lt-verlauf__wahl { width: 100%; }
    .bm-lt-verlauf__werte { grid-template-columns: minmax(0, 1fr); }
    .bm-lt-verlauf__bild .fi-wi-chart-canvas-ctn { height: 200px; }
    /* Jede zweite Stunde über der Leiste: dreizehn Zahlen auf 330 px stossen aneinander. */
    .bm-lt-leiste__stunde:nth-child(even):not(:last-child) { visibility: hidden; }
    .bm-lt-ring__bild { width: 96px; height: 96px; }
    .bm-lt-ring__mitte b { font-size: 18px; line-height: 22px; }
    .bm-lt-ring { gap: 14px; }
    .bm-lt-wochentage__feld { min-height: 120px; }
    .bm-lt-wochentage__saeulen { gap: 3px; }
    .bm-lt-wochentage__wert { font-size: 10.5px; }
    .bm-lt-haus__kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bm-lt-haus__kachel { padding: 12px; }
    .bm-lt-haus__wert { font-size: 19px; line-height: 24px; }
}

/* Auf dem Telefon ist die erste Kachel (Umsatz) die ganze Breite: sie ist Punkt zwei der Reihenfolge. */
@container leitstand (max-width: 40rem) {
    .bm-lt-zahlen > .bm-lt-kz:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   16 · BEWEGUNG
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .bm-lt *,
    .bm-lt *::before {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   17 · WEBSITE / REICHWEITE (D-184)
   Besucher und Aufrufe aus dem Zugriffsprotokoll — im Haus als Karte der Auswertung, in der
   Konsole als eigene Seite. Dieselben Bauteile wie überall (Kacheln, Säulen, Ranglisten); hier
   nur, was neu ist: zwei Listen nebeneinander, eine Achse mit zwei Daten, ein Vergleichswort.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

[data-kennfarbe="besucher"] { --kf: var(--lt-k-gaeste); }
[data-kennfarbe="aufrufe"] { --kf: var(--lt-k-umsatz); }

.bm-lt-web .bm-lt-saeulen { margin-top: 16px; }

.bm-lt-web__listen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 18px;
}

.bm-lt-web__liste { min-width: 0; }

.bm-lt-web__titel {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-2);
}

.bm-lt-web__achse {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 14px;
    color: var(--color-text-muted);
}

.bm-lt-web__delta {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.bm-lt-web__delta.is-auf { color: var(--color-success-text); }
.bm-lt-web__delta.is-ab { color: var(--color-danger-text); }

.bm-lt-web__fuss {
    margin: 14px 0 0;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-muted);
}

@container leitstand (max-width: 40rem) {
    .bm-lt-web__listen { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════
   18 · SCHNELLZUGRIFF — die meistbenutzten Arbeitsplätze als grosse Türen (D-192)
   Der Betreiber (02.10.2026) wollte POS-Klarheit: grosse Ziele, sofortige Lesbarkeit. Von der
   Referenz kommt nur die FORM. Jede Tür ist EIN grosses <a> — Kennfarben-Kante links, Wortmarke
   gross, Zahlzeile darunter, Pfeil rechts. Keine Icon-Kachel, keine Versalien, kein Glühen
   (D-170); Hover und Druck nur 150–220 ms, und Abschnitt 16 hält alles an.
   ═══════════════════════════════════════════════════════════════════════════════════════════ */

.bm-lt-zugriff { container-type: inline-size; }

.bm-lt-tueren {
    display: grid;
    grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bm-lt-tueren__feld { min-width: 0; display: flex; }

/* Die Speisekarte hat keine Kennfarbe in Abschnitt 0 — sie nennt keine Zahl des Dienstes.
   Petrol, die Farbe des Panels selbst, statt einer neu erfundenen. */
.bm-lt-tuer[data-kennfarbe="speisekarte"] { --kf: var(--color-accent); }

.bm-lt-tuer {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 16px 16px 16px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--r-panel);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

/* Die Kante: 3 px in der Kennfarbe — dieselbe Sprache wie die Felder von «Jetzt im Restaurant». */
.bm-lt-tuer::before {
    content: "";
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: var(--kf, var(--color-border-strong));
}

.bm-lt-tuer:hover { border-color: var(--color-border-strong); }
.bm-lt-tuer:active { transform: scale(.99); }
.bm-lt-tuer:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.bm-lt-tuer__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.bm-lt-tuer__wort {
    font-size: var(--bm-t-lg);
    line-height: var(--bm-lh-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--color-text);
}

.bm-lt-tuer__zahl {
    font-size: 13.5px;
    line-height: 18px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-2);
}

.bm-lt-tuer__satz {
    font-size: 12.5px;
    line-height: 17px;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}

/* Der Ton — und die Farbe nie allein: der Satz daneben sagt dasselbe als Wort.
   Überfällig: rote Kante und roter Satz auf NEUTRALEM Grund (keine getönte Fläche). */
.bm-lt-tuer.is-kritisch::before { background-color: var(--color-danger); }
.bm-lt-tuer.is-kritisch { border-color: color-mix(in oklab, var(--color-danger) 35%, var(--color-border)); }
.bm-lt-tuer.is-still .bm-lt-tuer__zahl { font-weight: 500; color: var(--color-text-muted); }
.bm-lt-tuer__satz.is-kritisch { color: var(--color-danger-text); font-weight: 600; }
/* Hinweiston der Karte: Bernstein nur als Schrift, nie als Fläche (Abschnitt 0: Creme-Verbot). */
.bm-lt-tuer__satz.is-achtung { color: var(--color-warning-text); font-weight: 500; }

.bm-lt-tuer__pfeil {
    margin-left: auto;
    font-size: 16px;
    line-height: 1;
    color: var(--color-text-muted);
    transition: color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.bm-lt-tuer:hover .bm-lt-tuer__pfeil { color: var(--bm-dash-akzent); transform: translateX(2px); }

/* Drei, zwei, eine Spalte — gemessen am eigenen Kasten, nie am Fenster. Keine Löcher: stehen
   drei Türen in zwei Spalten, nimmt die letzte die ganze Reihe. */
@container (max-width: 52rem) {
    .bm-lt-tueren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bm-lt-tueren[data-anzahl="1"] { grid-template-columns: minmax(0, 1fr); }
    .bm-lt-tueren[data-anzahl="3"] > :last-child { grid-column: 1 / -1; }
}

@container (max-width: 34rem) {
    .bm-lt-tueren { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .bm-lt-tueren[data-anzahl="3"] > :last-child { grid-column: auto; }
    .bm-lt-tuer { min-height: 72px; padding: 12px 14px 12px 16px; }
}