mit Knöpfen (.knopf.knopf-neutral, aria-pressed="true" = gewählt) oder
. Am Handy zwei je Zeile, 56 px hoch, ohne Querwischen. */
.wahl-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.wahl-knoepfe > :is(.knopf, button, label) { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: var(--knopf-hoehe); margin: 0; padding: 8px 14px;
text-align: center; white-space: normal; overflow-wrap: anywhere; }
.wahl-knoepfe > label { border: 1px solid var(--rand-stark); border-radius: var(--radius); background: var(--flaeche); font-size: 14.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.wahl-knoepfe > label > input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.wahl-knoepfe > label:has(> [required])::before { content: none; }
.wahl-knoepfe > :is(.knopf, button)[aria-pressed="true"], .wahl-knoepfe > label:has(> input:checked) { border-color: var(--signal); background: var(--flaeche-aktiv); color: var(--signal); }
.wahl-knoepfe > label:has(> input:focus-visible) { outline: 2px solid var(--fokus); outline-offset: 2px; }
/* Inventur: Variantenwahl bzw. Trefferliste unter dem Scanfeld (portal/lager/inventur.php) — der Knopf wächst mit dem Text,
Nummer bzw. Bestand stehen als zweite Zeile darunter; am Desktop breitere Spalten */
.inventur-wahl .wahl-knoepfe > .knopf { height: auto; flex-wrap: wrap; row-gap: 2px; line-height: 1.25; }
.inventur-wahl .wahl-knoepfe > .knopf > .klein { flex-basis: 100%; }
@media (min-width: 768px) { .inventur-wahl .wahl-knoepfe { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 767px) { .inventur-wahl .wahl-knoepfe.inventur-treffer { grid-template-columns: 1fr; } } /* lange Treffer: einer je Zeile */
/* === Klebende Absendeleiste (Handy) === */
/*
: am Handy bleibt „Buchen“ unten am Bildschirmrand stehen, solange das Formular zu
sehen ist (sticky innerhalb seines Blocks) — kein Wischen zum Knopf. Am Desktop eine normale Knopfzeile. */
@media (max-width: 767px) {
.wahl-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl-knoepfe > :is(.knopf, button, label) { min-height: 56px; font-size: 16px; }
.leiste-klebend { position: sticky; bottom: 0; z-index: 10; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--flaeche);
border-top: 1px solid var(--rand); box-shadow: 0 -6px 16px rgba(15, 23, 42, .06); }
.leiste-klebend > :is(.knopf, button) { flex: 1 1 auto; justify-content: center; }
}
/* === Aufklappbare Unterzeilen (Artikelliste: Varianten mit Bestand je Variante und je Lager) === */
/*
3 Varianten
Rot, 50 m
12 mHalle A 8 m · Werkstattwagen 4 m
…
in einer Tabellenzelle oder Karte, ohne Skript. Tabellen mit eigener Zeile je Variante:
(eingerückt, grau). */
details.unterzeilen { margin-top: 6px; border: 0; border-radius: 0; background: none; }
.unterzeilen > summary { display: inline-flex; min-height: 32px; padding: 4px 6px 4px 0; border: 0; font-size: 13px; color: var(--signal); }
.unterzeilen[open] > summary { border-bottom: 0; }
.unterzeilen > summary:hover { background: none; color: var(--primaer-dunkel); }
.unterzeilen > :not(summary) { padding: 0; margin: 0; }
:is(div, a).unterzeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 6px 0 6px 14px; border-top: 1px solid var(--rand-weich); font-size: 13.5px; color: var(--text); }
.unterzeile-titel { flex: 1 1 10em; min-width: 0; overflow-wrap: anywhere; }
.unterzeile-wert { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.unterzeile-info { flex: 1 1 100%; font-size: 12.5px; color: var(--text-schwach); overflow-wrap: anywhere; }
tr.unterzeile > td { background: var(--container); font-size: 13.5px; }
tr.unterzeile > td:first-child { padding-left: 28px; }
@media (max-width: 767px) { .unterzeilen > summary { min-height: 40px; } }
/* Lager-Artikel: Unterzeile als Link (ganze Zeile tippbar, öffnet die Variante), „⋯“ → Hier entnehmen in der Zeile eines
Lagerorts (zeilen_menue() ohne Hülle), Suchtreffer bzw. gewählte Variante markiert (.lager-markiert an Unter- oder Listenzeile) */
a.unterzeile { padding-right: 8px; text-decoration: none; }
a.unterzeile:hover { background: var(--container); }
.unterzeile > .zeilen-menue { flex: none; align-self: center; }
/* Bestand je Variante (Artikel → Überblick): Gibt es „hier entnehmen“, hält eine Zeile ohne den Knopf (z. B. Minusbestand) seinen
Platz frei — die Mengen stehen bündig untereinander (vorher sprangen sie um die Knopfbreite); Ort, Menge und Knopf mittig auf
einer Linie (vorher Text oben, Knopf 8 px tiefer). „Bestand · verfügbar“ je Variante gleich breit, also überall an derselben Stelle. */
#bestaende:has(.unterzeile > .zeilen-menue) .unterzeile { align-items: center; }
#bestaende:has(.unterzeile > .zeilen-menue) .unterzeile:not(:has(> .zeilen-menue))::after { content: ''; flex: none; order: 1; width: var(--icon-knopf-hoehe); height: var(--icon-knopf-hoehe); }
.unterzeile > .unterzeile-info { order: 2; }
@media (min-width: 768px) { .lager-var-zeile > .liste-werte > div { min-width: 6.5em; } }
:is(.unterzeile, .liste-zeile).lager-markiert { background: var(--flaeche-aktiv); box-shadow: inset 3px 0 0 var(--signal); }
.liste-zeile.lager-markiert { padding-left: 14px; padding-right: 8px; }
/* === Lager: Buchen (portal/lager/buchen.php) === */
/* Feldgruppe .buchen-feld: Überschrift (.buchen-titel bzw.