/*! © 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 */
/*
 * DIE SPEISEKARTE IM PANEL — die Karte in ihren Abschnitten, jede Zeile an Ort und Stelle zu ändern (D-177).
 *
 * ⛔ EIN EIGENES BLATT, IN BEIDEN PANELS GELADEN. Dieselbe Seite rendert in der Konsole
 *    (`NeedsRestaurant`), und dort gibt es panel-haus.css nicht. Dieses Blatt liest deshalb NUR die
 *    `--bm-*`-Marken aus panel-ui.css, die beide Panels haben; im Inhaber-Panel zeigen sie auf das
 *    Haus (Petrol auf Grau), in der Konsole auf deren Farben. Keine eigene Farbe in dieser Datei
 *    ausser Weiss auf dem Schalterknopf.
 *
 * ⛔ DIE REGELN VON D-170 GELTEN HIER WIE ÜBERALL: kein Zustandspunkt, keine Versalien mit
 *    Sperrung, kein Mono als Zierrat, keine Verläufe, kein Glühen. Ein Zustand ist ein Wort, oft
 *    mit Zeichen; Farbe allein sagt nie etwas (siehe Kopf von panel-ui.css).
 *
 * ⚠️ PETROL HEISST AUSGEWÄHLT, AN, EMPFOHLEN — `--bm-ident-*`. Rot nur für den einen Befund, der
 *    ein Risiko ist (ein Allergen fehlt). Aufmerksamkeit (ausverkauft, prüfen) steht als Kante und
 *    Schrift, nie als Fläche: eine getönte Orange-Fläche liest sich auf dunklem Grund als Braun.
 *
 * ⚠️ DIE ZEILE RICHTET SICH NACH IHREM KASTEN, NICHT NACH DEM SCHIRM (`@container karte`). Die
 *    alte Liste wurde dreimal nachgemessen, weil die Seitenschiene 322 px nimmt und ein Schirm von
 *    1280 px darum ein Kasten von 958 px ist. Die Container-Abfrage misst, was wirklich da ist.
 */

/* ═════════════════════════════════════════════════════ Grundlagen */

.bm-kp {
    display: grid;
    /* ⚠️ `minmax(0, 1fr)`, nicht die Vorgabe `auto`: sonst dehnt die Abschnittsleiste, die auf
       dem Telefon in EINER Zeile rollt, mit ihrer ganzen Länge die Spalte — gemessen war die
       Seite dann breiter als der Schirm, und Preis und Schalter lagen hinter dem Rand. */
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    min-width: 0;
}

.bm-kp-vorrat {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.bm-kp-ic {
    width: 20px;
    height: 20px;
    flex: none;
}

.bm-kp-ic--klein {
    width: 16px;
    height: 16px;
}

.bm-kp-unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ═════════════════════════════════════════════════════ 1 · die Zahlen */

.bm-kp-zahlen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    margin: -8px 0 0;
    color: var(--bm-txt-2);
    font-size: var(--bm-t-sm);
    line-height: var(--bm-lh-sm);
    font-variant-numeric: tabular-nums;
}

.bm-kp-zahlen > * + *::before {
    content: '·';
    margin-inline: 10px;
    color: var(--bm-txt-3);
}

.bm-kp-zahlen > :first-child {
    color: var(--bm-txt-1);
    font-weight: 600;
}

.bm-kp-zahlen__befund {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bm-risk-fg);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bm-kp-zahlen__befund .bm-kp-ic {
    width: 16px;
    height: 16px;
}

@media (hover: hover) {
    .bm-kp-zahlen__befund:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ═════════════════════════════════════════════════════ 2 + 3 · die Leiste oben */

.bm-kp-kategorien {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.bm-kp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.bm-kp-kategorien__verwalten {
    margin-left: 6px;
    font-size: var(--bm-t-sm);
    white-space: nowrap;
}

.bm-kp-leiste {
    position: sticky;
    top: var(--bm-topbar-h, 52px);
    z-index: 20;
    margin: -8px -4px 0;
    padding: 8px 4px 12px;
    background-color: var(--bm-srf-0);
    border-bottom: 1px solid var(--bm-line-hair);
}

.bm-kp-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 999px;
    background-color: var(--bm-srf-1);
    color: var(--bm-txt-2);
    font-size: var(--bm-t-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--bm-dur-2) var(--bm-ease-out), border-color var(--bm-dur-2) var(--bm-ease-out), color var(--bm-dur-2) var(--bm-ease-out);
}

.bm-kp-chip__zahl {
    color: var(--bm-txt-3);
    font-size: var(--bm-t-xs);
    font-variant-numeric: tabular-nums;
}

.bm-kp-chip[data-aus] { color: var(--bm-txt-3); }

.bm-kp-chip[aria-pressed="true"] {
    border-color: var(--bm-ident-line);
    background-color: var(--bm-ident-bg);
    color: var(--bm-ident-fg);
    font-weight: 600;
}

.bm-kp-chip[aria-pressed="true"] .bm-kp-chip__zahl { color: var(--bm-ident-fg); }

@media (hover: hover) {
    .bm-kp-chip:hover { border-color: var(--bm-line-strong); color: var(--bm-txt-1); }
    .bm-kp-chip[aria-pressed="true"]:hover { border-color: var(--bm-ident-line); color: var(--bm-ident-fg); }
}

.bm-kp-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.bm-kp-suche {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    gap: 8px;
    max-width: 440px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--bm-line-strong);
    border-radius: 10px;
    background-color: var(--bm-srf-1);
    color: var(--bm-txt-3);
}

.bm-kp-suche:focus-within {
    outline: 2px solid var(--bm-focus);
    outline-offset: 1px;
}

.bm-kp-suche__feld {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    outline: none;
    box-shadow: none;
}

.bm-kp-suche__feld:focus { outline: none; box-shadow: none; }

.bm-kp-suche__taste {
    padding: 0 6px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 5px;
    color: var(--bm-txt-3);
    font-family: inherit;
    font-size: var(--bm-t-xs);
    line-height: 18px;
}

.bm-kp-auswahlfeld {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.bm-kp-auswahlfeld select {
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--bm-line-strong);
    border-radius: 10px;
    background-color: var(--bm-srf-1);
    background-image: none;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-sm);
    font-weight: 500;
    appearance: none;
    cursor: pointer;
}

.bm-kp-auswahlfeld select[data-aktiv="true"] {
    border-color: var(--bm-ident-line);
    background-color: var(--bm-ident-bg);
    color: var(--bm-ident-fg);
    font-weight: 600;
}

.bm-kp-auswahlfeld .bm-kp-ic {
    position: absolute;
    right: 10px;
    color: var(--bm-txt-3);
    pointer-events: none;
}

.bm-kp-filter__stand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0 auto;
    color: var(--bm-txt-2);
    font-size: var(--bm-t-sm);
    font-variant-numeric: tabular-nums;
}

/* ═════════════════════════════════════════════════════ Knöpfe dieser Seite */

.bm-kp-knopf-haupt,
.bm-kp-knopf-neben {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: var(--bm-t-sm);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--bm-dur-2) var(--bm-ease-out), border-color var(--bm-dur-2) var(--bm-ease-out);
}

.bm-kp-knopf-haupt {
    border: 1px solid transparent;
    background-color: var(--primary-600, #1F6661);
    color: #FFFFFF;
}

.bm-kp-knopf-neben {
    border: 1px solid var(--bm-line-hair);
    background-color: var(--bm-srf-1);
    color: var(--bm-txt-1);
    box-shadow: var(--bm-lift-2);
}

.bm-kp-knopf-neben .bm-kp-ic { color: var(--bm-txt-3); }

.bm-kp-knopf-neben[data-aktiv="true"] {
    border-color: var(--bm-ident-line);
    background-color: var(--bm-ident-bg);
    color: var(--bm-ident-fg);
}

.bm-kp-knopf-neben[data-aktiv="true"] .bm-kp-ic { color: var(--bm-ident-fg); }

.bm-kp-knopf-neben[data-gefahr] { color: var(--bm-risk-fg); }
.bm-kp-knopf-neben[data-gefahr] .bm-kp-ic { color: var(--bm-risk-fg); }

.bm-kp-knopf__zahl {
    color: var(--bm-ident-fg);
    font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
    .bm-kp-knopf-haupt:hover { background-color: var(--primary-700, #19524E); }
    .bm-kp-knopf-neben:hover { background-color: var(--bm-row-hover); }
    .bm-kp-knopf-neben[data-gefahr]:hover { border-color: var(--bm-risk-line); background-color: var(--bm-risk-bg); }
}

.bm-kp-knopf-zeichen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--bm-txt-2);
    cursor: pointer;
}

@media (hover: hover) {
    .bm-kp-knopf-zeichen:hover { background-color: var(--bm-srf-2); color: var(--bm-txt-1); }
    .bm-kp-knopf-zeichen[data-gefahr]:hover { background-color: var(--bm-risk-bg); color: var(--bm-risk-fg); }
}

.bm-kp-textknopf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--bm-ident-fg);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

@media (hover: hover) {
    .bm-kp-textknopf:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ═════════════════════════════════════════════════════ Aufklapper (Mehr Filter, Auswahl) */

.bm-kp-aufklapp { position: relative; }

.bm-kp-aufklapp__flaeche {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 30;
    display: grid;
    min-width: 220px;
    max-height: min(60vh, 380px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-3);
}

.bm-kp-filter .bm-kp-aufklapp__flaeche {
    right: 0;
    left: auto;
}

.bm-kp-aufklapp--oben .bm-kp-aufklapp__flaeche {
    top: auto;
    bottom: calc(100% + 6px);
}

.bm-kp-haken {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    cursor: pointer;
}

@media (hover: hover) {
    .bm-kp-haken:hover { background-color: var(--bm-row-hover); }
}

/* ═════════════════════════════════════════════════════ 4 · die Abschnitte */

.bm-kp-abschnitte {
    container: karte / inline-size;
    display: grid;
    gap: 28px;
    transition: opacity var(--bm-dur-2) var(--bm-ease-out);
}

.bm-kp-abschnitt { min-width: 0; }

.bm-kp-abschnitte[data-laedt] {
    opacity: .55;
    pointer-events: none;
}

.bm-kp-abschnitt__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    min-height: 32px;
    /* 37 px: Rahmen 1 + Zeilenrand 4 + Griff 16 + Abstand 12 + halbe Differenz 4 — der Haken
       über den Haken der Zeilen. */
    padding: 0 12px 8px 37px;
}

.bm-kp-abschnitt__titel {
    margin: 0;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-lg);
    font-weight: 600;
    line-height: var(--bm-lh-lg);
}

.bm-kp-abschnitt__zahl {
    color: var(--bm-txt-3);
    font-size: var(--bm-t-sm);
}

.bm-kp-abschnitt__aus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bm-off-fg);
    font-size: var(--bm-t-xs);
    font-weight: 500;
}

.bm-kp-abschnitt__neu {
    margin-left: auto;
    font-size: var(--bm-t-sm);
}

.bm-kp-abschnitt__leer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0;
    padding: 16px;
    color: var(--bm-txt-3);
    font-size: var(--bm-t-sm);
}

.bm-kp-liste {
    overflow: clip;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-1);
}

/* ═════════════════════════════════════════════════════ die Zeile */

.bm-kp-zeile {
    display: grid;
    grid-template-columns: 16px 24px 44px minmax(220px, 3fr) minmax(88px, 1fr) 128px 132px 112px 72px;
    grid-template-areas: "griff wahl bild text allerg preise verf stern aktionen";
    align-items: center;
    column-gap: 12px;
    min-height: 64px;
    padding: 10px 12px 10px 4px;
    background-color: var(--bm-srf-1);
    transition: background-color var(--bm-dur-2) var(--bm-ease-out);
}

.bm-kp-zeile + .bm-kp-zeile { border-top: 1px solid var(--bm-line-hair); }

/* Ausgewählt heisst sichtbar ausgewählt — nicht nur ein Haken am Rand. */
.bm-kp-zeile:has(.bm-kp-zeile__wahl input:checked),
.bm-kp-zeile:has(.bm-kp-zeile__wahl input:checked):hover { background-color: var(--bm-row-sel); }

@media (hover: hover) {
    .bm-kp-zeile:hover { background-color: var(--bm-row-hover); }
}

.bm-kp-zeile.fi-sortable-ghost { opacity: .35; }

.bm-kp-zeile__wahl { grid-area: wahl; display: flex; align-items: center; justify-content: center; align-self: stretch; cursor: pointer; }
.bm-kp-zeile__griff { grid-area: griff; }
.bm-kp-zeile__bild { grid-area: bild; }
.bm-kp-zeile__text { grid-area: text; }
.bm-kp-allergene { grid-area: allerg; }
.bm-kp-preise { grid-area: preise; }
.bm-kp-verfuegbar { grid-area: verf; }
.bm-kp-stern { grid-area: stern; }
.bm-kp-zeile__aktionen { grid-area: aktionen; }

.bm-kp-zeile__griff {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--bm-txt-3);
    opacity: 0;
    cursor: grab;
    touch-action: none;
}

.bm-kp-zeile__griff .bm-kp-ic { width: 16px; height: 16px; }

.bm-kp-zeile:hover .bm-kp-zeile__griff,
.bm-kp-zeile:focus-within .bm-kp-zeile__griff,
.bm-kp-zeile__griff:focus-visible { opacity: 1; }

.bm-kp-zeile__bild {
    display: block;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.bm-kp-zeile__bild .bm-bild { display: flex; object-fit: cover; }

.bm-kp-zeile__text { min-width: 0; }

.bm-kp-zeile__namenszeile {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bm-kp-name {
    display: -webkit-box;
    min-width: 0;
    max-width: 100%;
    margin: -2px -6px;
    padding: 2px 6px;
    overflow: hidden;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    font-weight: 600;
    line-height: var(--bm-lh-md);
    text-align: left;
    /* Zwei Zeilen, wie die alte Liste (`lineClamp(2)`): ein Name ist die Auskunft der Zeile. */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    cursor: text;
}

.bm-kp-zeile__beschreibung {
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--bm-txt-3);
    font-size: var(--bm-t-sm);
    line-height: var(--bm-lh-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-kp-marke {
    flex: none;
    color: var(--bm-off-fg);
    font-size: var(--bm-t-xs);
    font-weight: 500;
    white-space: nowrap;
}

/* Was heute nicht auf der Karte steht, tritt zurück — ohne Durchstrich (siehe Zeilenvorlage). */
.bm-kp-zeile[data-zustand="ausverkauft"] :is(.bm-kp-zeile__bild, .bm-kp-zeile__text, .bm-kp-preise),
.bm-kp-zeile[data-zustand="runter"] :is(.bm-kp-zeile__bild, .bm-kp-zeile__text, .bm-kp-preise, .bm-kp-allergene) {
    opacity: .55;
}

/* Name und Preis sind Knöpfe: beim Zeigen sagt ein feiner Rahmen «hier lässt sich tippen». */
@media (hover: hover) {
    .bm-kp-name:hover,
    .bm-kp-preis__wert:hover,
    .bm-kp-allergene:hover { box-shadow: inset 0 0 0 1px var(--bm-line-strong); }
}

.bm-kp-eingabe {
    width: 100%;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--bm-line-strong);
    border-radius: 8px;
    background-color: var(--bm-srf-1);
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    font-weight: 600;
    box-shadow: none;
}

.bm-kp-eingabe:focus {
    border-color: var(--bm-focus);
    outline: 2px solid var(--bm-focus);
    outline-offset: 0;
    box-shadow: none;
}

.bm-kp-eingabe[aria-invalid="true"],
.bm-kp-eingabe[aria-invalid="true"]:focus {
    border-color: var(--bm-risk-fg);
    outline-color: var(--bm-risk-fg);
}

.bm-kp-eingabe--name { max-width: 420px; }

.bm-kp-eingabe--preis {
    width: 76px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bm-kp-status {
    flex: none;
    color: var(--bm-txt-3);
    font-size: var(--bm-t-xs);
    font-weight: 500;
    line-height: var(--bm-lh-xs);
    white-space: nowrap;
}

.bm-kp-status[data-art="gespeichert"] { color: var(--bm-ok-fg); }

.bm-kp-status[data-art="fehler"] {
    color: var(--bm-risk-fg);
    white-space: normal;
}

/* ─────────── Allergene */

.bm-kp-allergene {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-width: 0;
    min-height: 30px;
    margin: -4px;
    padding: 4px;
    border: 0;
    border-radius: 8px;
    background: none;
    text-align: left;
    cursor: pointer;
}

.bm-kp-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 6px;
    background-color: var(--bm-srf-2);
    color: var(--bm-txt-2);
    font-size: var(--bm-t-xs);
    font-weight: 600;
}

.bm-kp-befund {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 22px;
    padding: 0 7px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: var(--bm-t-xs);
    font-weight: 600;
    white-space: nowrap;
}

.bm-kp-befund[data-art="fehlt"] {
    border-color: var(--bm-risk-line);
    background-color: var(--bm-risk-bg);
    color: var(--bm-risk-fg);
}

.bm-kp-befund[data-art="pruefen"] {
    border-color: var(--bm-todo-line);
    color: var(--bm-todo-fg);
}

.bm-kp-befund[data-art="unbekannt"] {
    border-style: dashed;
    border-color: var(--bm-unknown-line);
    color: var(--bm-unknown-fg);
}

.bm-kp-leise {
    color: var(--bm-txt-3);
    font-size: var(--bm-t-sm);
}

/* ─────────── Preis */

.bm-kp-preise {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.bm-kp-preis {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.bm-kp-preis__groesse {
    color: var(--bm-txt-3);
    font-size: var(--bm-t-xs);
}

.bm-kp-preis__wert {
    margin: -2px -6px;
    padding: 2px 6px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    font-weight: 600;
    line-height: var(--bm-lh-md);
    font-variant-numeric: tabular-nums;
    cursor: text;
}

.bm-kp-preis__feld {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--bm-txt-2);
    font-size: var(--bm-t-md);
}

/* ─────────── verfügbar: ein Schalter mit Wort */

.bm-kp-verfuegbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.bm-kp-verfuegbar__wort {
    overflow: hidden;
    color: var(--bm-txt-2);
    font-size: var(--bm-t-sm);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bm-kp-zeile[data-zustand="ausverkauft"] .bm-kp-verfuegbar__wort { color: var(--bm-todo-fg); }
.bm-kp-zeile[data-zustand="runter"] .bm-kp-verfuegbar__wort { color: var(--bm-off-fg); }

.bm-kp-schalter {
    position: relative;
    flex: none;
    width: 36px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: var(--bm-line-strong);
    cursor: pointer;
    transition: background-color var(--bm-dur-2) var(--bm-ease-out);
}

/* 20 px Höhe ist kein Daumen. Die Fläche, die antwortet, ist grösser als die, die man sieht. */
.bm-kp-schalter::before {
    content: '';
    position: absolute;
    inset: -12px -6px;
}

.bm-kp-schalter[aria-checked="true"] { background-color: var(--bm-ident-line); }

.bm-kp-schalter:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.bm-kp-schalter__knopf {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform var(--bm-dur-2) var(--bm-ease-out);
}

.bm-kp-schalter[aria-checked="true"] .bm-kp-schalter__knopf { transform: translateX(16px); }

/* ─────────── Empfehlung */

.bm-kp-stern {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 6px;
    height: 30px;
    padding: 0 10px 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--bm-txt-disabled);
    font-size: var(--bm-t-xs);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.bm-kp-stern .bm-kp-ic { width: 18px; height: 18px; }

.bm-kp-stern__voll,
.bm-kp-stern__wort { display: none; }

.bm-kp-stern[aria-pressed="true"] {
    border-color: var(--bm-ident-line);
    background-color: var(--bm-ident-bg);
    color: var(--bm-ident-fg);
}

.bm-kp-stern[aria-pressed="true"] .bm-kp-stern__leer { display: none; }
.bm-kp-stern[aria-pressed="true"] .bm-kp-stern__voll { display: block; }
.bm-kp-stern[aria-pressed="true"] .bm-kp-stern__wort { display: inline; }

@media (hover: hover) {
    .bm-kp-stern:hover { color: var(--bm-txt-2); }
    .bm-kp-stern[aria-pressed="true"]:hover { color: var(--bm-ident-fg); }
}

.bm-kp-zeile__aktionen {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

/* ═════════════════════════════════════════════════════ die Zeile, schmaler */

/* Unter 1100 px Kasten: der Stern ohne Wort, die Allergene schmaler. */
@container karte (max-width: 1099px) {
    .bm-kp-zeile {
        grid-template-columns: 16px 24px 44px minmax(180px, 3fr) minmax(80px, 1fr) 116px 124px 40px 72px;
    }

    .bm-kp-stern { padding: 0; width: 30px; justify-content: center; }
    .bm-kp-stern[aria-pressed="true"] .bm-kp-stern__wort { display: none; }
}

/* Unter 860 px: zwei Zeilen — oben was es ist und kostet, darunter wie es heute steht. */
@container karte (max-width: 859px) {
    .bm-kp-zeile {
        grid-template-columns: 24px 44px minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "wahl bild text   text  preise aktionen"
            "wahl bild allerg stern verf   aktionen";
        row-gap: 8px;
        padding-left: 12px;
    }

    .bm-kp-zeile__griff { display: none; }
}

/* Das Telefon: das Gericht und sein Preis oben, darunter Schalter und Menü unter dem Daumen. */
@container karte (max-width: 599px) {
    .bm-kp-zeile {
        grid-template-columns: 24px 44px minmax(0, 1fr) auto auto auto;
        grid-template-areas:
            "wahl bild text text   text  preise"
            ".    verf verf allerg stern aktionen";
        row-gap: 6px;
        column-gap: 10px;
        padding: 12px 10px 12px 8px;
    }

    .bm-kp-allergene:not(:has(> .bm-kp-befund, > .bm-kp-code)) { display: none; }

    .bm-kp-zeile__aktionen .bm-kp-knopf-zeichen:first-child { display: none; }

    .bm-kp-abschnitt__kopf { padding-inline: 13px 8px; }
}

/*
 * DAS TELEFON: die Abschnitte als eine Zeile zum Wischen, die Suche nicht klebend und kompakt.
 * Umgebrochen standen fünfzehn Abschnitte auf sieben Zeilen, und eine klebende Leiste aus Suche
 * und drei Filtern nahm 150 px — ein Viertel des Schirms — für immer.
 */
@media (max-width: 639px) {
    .bm-kp-chips {
        flex-wrap: nowrap;
        margin-inline: -16px;
        padding: 2px 16px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .bm-kp-chips::-webkit-scrollbar { display: none; }

    .bm-kp-kategorien__verwalten { flex: none; }

    .bm-kp-leiste {
        position: static;
        margin-top: 0;
        padding-top: 0;
    }

    .bm-kp-filter {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .bm-kp-suche {
        grid-column: 1 / -1;
        max-width: none;
    }

    .bm-kp-suche__taste { display: none; }

    .bm-kp-filter .bm-kp-auswahlfeld select { width: 100%; }

    .bm-kp-knopf__wort { display: none; }

    .bm-kp-filter__stand {
        grid-column: 1 / -1;
        justify-content: space-between;
        margin: 0;
    }

    /* Die Auswahl: Zahl und Schliessen oben in einer Zeile, die Knöpfe darunter. */
    .bm-kp-auswahl {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 8px 8px 10px 14px;
    }

    .bm-kp-auswahl__knoepfe {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ═════════════════════════════════════════════════════ Leerzustände */

.bm-kp-leerzustand {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 48px 24px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-1);
    text-align: center;
}

/* Kein Treffer ist ein Zustand der Suche, nicht der Karte: leiser, ohne Fläche. */
.bm-kp-leerzustand--treffer { background-color: transparent; }

.bm-kp-leerzustand__ic {
    width: 24px;
    height: 24px;
    padding: 12px;
    border-radius: 12px;
    background-color: var(--bm-srf-2);
    color: var(--bm-txt-3);
    box-sizing: content-box;
}

.bm-kp-leerzustand__titel {
    margin: 8px 0 0;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-lg);
    font-weight: 600;
}

.bm-kp-leerzustand__text {
    max-width: 48ch;
    margin: 0;
    color: var(--bm-txt-2);
    font-size: var(--bm-t-md);
    line-height: var(--bm-lh-md);
}

.bm-kp-leerzustand__knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

/* ═════════════════════════════════════════════════════ 5 · die Auswahl */

.bm-kp-auswahl {
    position: sticky;
    bottom: 16px;
    z-index: 25;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--bm-line-strong);
    border-radius: 14px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-4);
}

.bm-kp-auswahl__zahl {
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.bm-kp-auswahl__knoepfe {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 8px;
}

/* Im Inhaber-Panel liegt unter 64rem die Daumenleiste unten (panel-haus.css, Abschnitt 18). */
@media (max-width: 63.99rem) {
    .fi-panel-owner .bm-kp-auswahl { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ═════════════════════════════════════════════════════ das Menü der drei Punkte */

.bm-kp-menu {
    position: fixed;
    z-index: 40;
    min-width: 232px;
    max-height: min(70vh, 440px);
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-3);
}

.bm-kp-menu__punkt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.bm-kp-menu__punkt .bm-kp-ic {
    width: 18px;
    height: 18px;
    color: var(--bm-txt-3);
}

.bm-kp-menu__punkt:focus-visible,
.bm-kp-menu__punkt:hover { background-color: var(--bm-row-hover); }

.bm-kp-menu__punkt[data-gefahr],
.bm-kp-menu__punkt[data-gefahr] .bm-kp-ic { color: var(--bm-risk-fg); }

.bm-kp-menu__zurueck {
    color: var(--bm-txt-2);
    font-weight: 600;
}

.bm-kp-menu__strich {
    margin: 6px 4px;
    border: 0;
    border-top: 1px solid var(--bm-line-hair);
}

/* ═════════════════════════════════════════════════════ der eine Tooltip */

.bm-kp-tipp {
    position: fixed;
    z-index: 45;
    max-width: 280px;
    padding: 8px 10px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 8px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-3);
    color: var(--bm-txt-1);
    font-size: var(--bm-t-sm);
    line-height: var(--bm-lh-sm);
    pointer-events: none;
}

.bm-kp-tipp b {
    display: inline-block;
    min-width: 22px;
    font-weight: 700;
}

/* ═════════════════════════════════════════════════════ Seitenfenster: die Abschnitte */

.bm-kp-abs {
    display: grid;
    gap: 16px;
}

.bm-kp-abs__neu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bm-kp-abs__feld { flex: 1 1 200px; }

.bm-kp-abs__feld .bm-kp-eingabe {
    height: 36px;
    border-radius: 10px;
    font-weight: 400;
}

.bm-kp-abs__liste {
    margin: 0;
    padding: 0;
    overflow: clip;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-1);
    list-style: none;
}

.bm-kp-abs__zeile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 6px;
    background-color: var(--bm-srf-1);
}

.bm-kp-abs__zeile + .bm-kp-abs__zeile { border-top: 1px solid var(--bm-line-hair); }

.bm-kp-abs__zeile.fi-sortable-ghost { opacity: .35; }

.bm-kp-abs .bm-kp-zeile__griff { opacity: 1; }

.bm-kp-abs__mitte {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.bm-kp-abs__name {
    width: 100%;
    margin-left: -7px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--bm-txt-1);
    font-size: var(--bm-t-md);
    font-weight: 600;
    box-shadow: none;
}

.bm-kp-abs__name:focus {
    border-color: var(--bm-focus);
    outline: 2px solid var(--bm-focus);
    outline-offset: 0;
    box-shadow: none;
}

@media (hover: hover) {
    .bm-kp-abs__name:hover { border-color: var(--bm-line-strong); }
}

.bm-kp-abs__zeile[data-sichtbar="0"] .bm-kp-abs__name { color: var(--bm-txt-3); }

.bm-kp-abs__zahl {
    color: var(--bm-txt-3);
    font-size: var(--bm-t-xs);
}

.bm-kp-abs__leer,
.bm-kp-abs__fuss {
    margin: 0;
    color: var(--bm-txt-3);
    font-size: var(--bm-t-sm);
}

/* ═════════════════════════════════════════════════════ Seitenfenster: die Vorschau */

.bm-kp-vorschau {
    display: grid;
    gap: 10px;
}

.bm-kp-vorschau__kopf {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    font-size: var(--bm-t-sm);
}

.bm-kp-vorschau__buehne {
    position: relative;
    height: calc(100dvh - 210px);
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-2);
}

.bm-kp-vorschau__laedt {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    color: var(--bm-txt-3);
    font-size: var(--bm-t-md);
    pointer-events: none;
}

.bm-kp-vorschau__rahmen {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ═════════════════════════════════════════════════════ 6 · die Kacheln (D-193) */

/*
 * DIE KARTE ALS KACHELN: das Foto führt, fünf nebeneinander — die FORM eines POS-Rasters
 * (Operator, 02.10.2026; Referenz der Bauform: 21st.dev @deltacomponents/product-card —
 * Bildfeld oben, Titel/Preis darunter, Fussleiste). Die Fähigkeiten sind die der Zeile:
 * dieselben Bausteine (bm-kp-name, bm-kp-preise, bm-kp-allergene, Schalter, Stern), nur ihr
 * Kasten ist ein anderer.
 *
 * ⛔ EXPLIZITE SPALTEN, KEIN auto-fit (Leitstand-Präzedenz): auto-fit entscheidet nach der
 *    Mindestbreite und springt an keiner nachvollziehbaren Stelle. Hier sagt der Kasten, wie
 *    viele nebeneinander stehen — fünf ab 1100 px, wie das POS-Referenzbild, zwei auf dem Telefon.
 */
.bm-kp-kacheln {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

@container karte (min-width: 600px) {
    .bm-kp-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container karte (min-width: 860px) {
    .bm-kp-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container karte (min-width: 1100px) {
    .bm-kp-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Radius und Ring wie die bm-kp-liste-Karten; Hover nur als Ton, keine Bewegung. */
.bm-kp-kachel {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: clip;
    border: 1px solid var(--bm-line-hair);
    border-radius: 12px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-1);
    transition: background-color var(--bm-dur-2) var(--bm-ease-out), border-color var(--bm-dur-2) var(--bm-ease-out);
}

@media (hover: hover) {
    .bm-kp-kachel:hover { background-color: var(--bm-row-hover); }
}

.bm-kp-kachel.fi-sortable-ghost { opacity: .35; }

/* Ausgewählt heisst sichtbar ausgewählt — dieselbe Regel wie an der Zeile. */
.bm-kp-kachel:has(.bm-kp-zeile__wahl input:checked),
.bm-kp-kachel:has(.bm-kp-zeile__wahl input:checked):hover {
    border-color: var(--bm-ident-line);
    background-color: var(--bm-row-sel);
}

/* Der Griff liegt auf dem Foto und erscheint wie an der Zeile erst beim Zeigen. */
.bm-kp-kachel__griff {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background-color: var(--bm-srf-1);
    box-shadow: var(--bm-lift-1);
}

.bm-kp-kachel:hover .bm-kp-zeile__griff,
.bm-kp-kachel:focus-within .bm-kp-zeile__griff { opacity: 1; }

/* Ohne Zeiger gibt es kein Hover: unsichtbar fing der Griff auf der Foto-Ecke Tipps ab und
   unterdrückte dort beginnende Wischgesten (touch-action, Befund D-193). Sichtbar ist er eine
   ehrliche Fläche — matte Platte, damit er auf jedem Foto lesbar ist. */
@media (hover: none) {
    .bm-kp-kachel .bm-kp-zeile__griff {
        opacity: 1;
        background-color: color-mix(in oklab, var(--bm-srf-1) 78%, transparent);
        border-radius: 8px;
    }
}

/* ─────────── das Foto: 4:3, volle Kachelbreite; das Monogramm füllt dieselbe Fläche */

.bm-kp-kachel__bild {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* `position: absolute; inset: 0` statt `height: 100%`: ein hochformatiges Foto löst 100 %
      nach dem Lazy-Load gegen seine eigene Höhe auf und zog den 4:3-Kasten in die Länge
      (gemessen: 5 von 81 Kacheln, 02.10.2026). Absolut gesetzt misst es den Kasten. */
.bm-kp-kachel__bild .bm-bild {
    position: absolute;
    inset: 0;
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
    border-radius: 0;
    transition: filter var(--bm-dur-2) var(--bm-ease-out), opacity var(--bm-dur-2) var(--bm-ease-out);
}

.bm-kp-kachel__bild .bm-bild--leer { font-size: 32px; }
/* Das Zeichen (D-229) in der 4:3-Fläche: kleiner als im Quadrat, der Name darunter. */
.bm-kp-kachel__bild .bm-bild--zeichen .bm-bild__zeichen { width: 44%; max-height: 54%; }

/*
 * Was heute nicht zu haben ist, tritt IM BILD zurück: grau und gedämpft, kein Durchstrich,
 * keine Orange-Fläche (D-170). Das Wort dazu steht auf dem Foto (unten), die Zeilenregel
 * für Text und Preis gilt daneben weiter.
 */
.bm-kp-kachel[data-zustand="ausverkauft"] .bm-kp-kachel__bild .bm-bild,
.bm-kp-kachel[data-zustand="runter"] .bm-kp-kachel__bild .bm-bild {
    filter: grayscale(.7);
    opacity: .6;
}

.bm-kp-kachel[data-zustand="ausverkauft"] .bm-kp-kachel__mitte,
.bm-kp-kachel[data-zustand="runter"] .bm-kp-kachel__mitte { opacity: .65; }

/* Das Wort zum Zustand — nur sichtbar, wenn das Gericht heute aus ist; «von der Karte» trägt
   stattdessen die bm-kp-marke in der Namenszeile, wie die Zeile. */
.bm-kp-kachel__zustand {
    position: absolute;
    top: 50%;
    left: 50%;
    display: none;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--bm-todo-line);
    border-radius: 999px;
    background-color: var(--bm-srf-1);
    color: var(--bm-todo-fg);
    font-size: var(--bm-t-xs);
    font-weight: 600;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.bm-kp-kachel[data-zustand="ausverkauft"] .bm-kp-kachel__zustand { display: inline-flex; }

/* ─────────── Mitte und Fuss */

.bm-kp-kachel__mitte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 10px 12px 8px;
}

/* ⛔ DIE ZEILENKLASSEN TRAGEN DIE GRID-AREAS DES ZEILENRASTERS (§Zeile: text/allerg/preise/…).
      In der Kachel gelten sie nicht — ohne diesen Reset legte das Raster Name und Beschreibung
      nebeneinander und zog eine Linie quer durch den Preis (gemessen, 1440 px, 02.10.2026). */
.bm-kp-kachel__mitte > * { grid-area: auto; grid-column: 1; min-width: 0; }

/* Eine Zeile, der volle Text steht im title-Attribut. */
.bm-kp-kachel__mitte .bm-kp-zeile__beschreibung {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Die Preise der Kachel stehen in einer Zeile links, nicht als rechte Spalte wie in der Zeile. */
.bm-kp-kachel .bm-kp-preise {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
}

.bm-kp-kachel .bm-kp-preis { justify-content: flex-start; }

/* Der Stern ohne Wort — die Kachel ist schmaler als jede Zeile. */
.bm-kp-kachel .bm-kp-stern {
    width: 30px;
    padding: 0;
    justify-content: center;
}

.bm-kp-kachel .bm-kp-stern[aria-pressed="true"] .bm-kp-stern__wort { display: none; }

.bm-kp-kachel__fuss {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 8px 10px 10px 12px;
    border-top: 1px solid var(--bm-line-hair);
}

.bm-kp-kachel__fuss .bm-kp-zeile__aktionen { margin-left: auto; }

.bm-kp-kachel .bm-kp-zeile__wahl { padding: 4px; }

/* ─────────── der Umschalter Kacheln/Liste — zwei Links in der Form der bm-lt-reiter */

.bm-kp-ansicht {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--bm-line-hair);
    border-radius: 10px;
    background-color: var(--bm-srf-2);
}

.bm-kp-ansicht__knopf {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--bm-txt-2);
    font-size: var(--bm-t-sm);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--bm-dur-2) var(--bm-ease-out), color var(--bm-dur-2) var(--bm-ease-out);
}

@media (hover: hover) {
    .bm-kp-ansicht__knopf:hover { color: var(--bm-txt-1); }
}

/* Der Zustand steht im Attribut, nicht in einer Klasse — aria-current ist, was vorgelesen wird. */
.bm-kp-ansicht__knopf[aria-current="page"] {
    background-color: var(--bm-ident-bg);
    color: var(--bm-ident-fg);
    font-weight: 600;
    box-shadow: inset 0 0 0 1px var(--bm-ident-line);
}

@media (max-width: 639px) {
    .bm-kp-ansicht { justify-self: start; }
}

/* ═════════════════════════════════════════════════════ Bewegung: aus, wer es so will */

/* `.bm-kp *` deckt auch die Kacheln (Abschnitt 6): Raster, Foto-Dämpfung und Umschalter stehen
   alle unter `.bm-kp`, ihre Übergänge enden hier mit. */
@media (prefers-reduced-motion: reduce) {
    .bm-kp *,
    .bm-kp-menu { transition: none !important; }
}