/* ═══════════════════════════════════════════════════════════════════════
Kiosk-Umbau — Gestaltungsblatt
Liegt über css/kiosk-base.css und ersetzt Gerüst, Anordnung und Bedienmaße.
Spec: specs/kiosk-umbau/spec.md
Plan: specs/kiosk-umbau/plan.md
Aufbau
1 Grundwerte
2 Rasterhülle
3 Hinweisstreifen
4 Kopfzeile
5 Reiterleiste
6 Inhaltsbereich und feste Kopfbereiche
7 Filterleisten als Chips
8 Bedienmaße (44 px)
9 Listen, Karten, Text
10 Dialoge als Blatt
11 Modulanpassungen
12 Dunkles Farbschema
═══════════════════════════════════════════════════════════════════════ */
/* ── 1 Grundwerte ────────────────────────────────────────────────────── */
/* Die Werte des Schemas — Farben, Maße, Rundungen, Schatten, Umschaltpunkte —
stehen seit dem CMS-Redesign gemeinsam in css/dl-design.css (Spec
cms-redesign, F1). Sie werden dort gepflegt, nicht hier: Ein Wert, eine
Stelle. Dieses Blatt setzt darauf auf und beschreibt nur noch, wie der
Kiosk daraus aussieht. */
html, body{ height:100%; overflow:hidden }
/* Umlaute brauchen Luft nach oben – die Grundregel in dl-design.css deckt
h1–h4 ab; diese Klassen sind keine Überschriften und brauchen sie extra. */
.k-header h1, .k-tab-lbl,
.k-oc-name, .k-modal-head h2{ line-height:1.3 }
/* ── 2 Rasterhülle ──────────────────────────────────────────────────── */
.k-app{
flex:1;
min-height:0;
display:grid;
grid-template-areas:
"hd"
"main"
"foot"
"nav";
grid-template-rows:auto minmax(0,1fr) auto auto;
grid-template-columns:minmax(0,1fr);
background:var(--c-bg);
}
.k-app > .k-header{ grid-area:hd }
.k-app > .k-tabs { grid-area:nav }
.k-app > .k-main { grid-area:main; min-width:0; min-height:0 }
.k-app > .k-bottom{ grid-area:foot }
/* Ab Tablet wandert die Reiterleiste an den linken Rand. */
@media (min-width:640px){
.k-app{
grid-template-areas:
"nav hd"
"nav main"
"nav foot";
grid-template-columns:var(--nav-w) minmax(0,1fr);
grid-template-rows:auto minmax(0,1fr) auto;
}
}
/* ── 3 Hinweisstreifen: wirkt auf echte Daten ───────────────────────── */
.k-umbau-hinweis{
flex:0 0 auto;
display:flex;
align-items:center;
gap:8px;
padding:7px calc(12px + var(--sar)) 7px calc(12px + var(--sal));
background:repeating-linear-gradient(135deg,#7c2d12 0 14px,#9a3412 14px 28px);
color:#fff;
font-size:var(--schrift-klein);
line-height:1.3;
}
.k-umbau-hinweis i, .k-umbau-hinweis svg{ width:16px; height:16px; flex:0 0 auto }
/* Der Hinweis muss auffallen, aber er darf der Arbeitsflaeche keine zweite
Zeile wegnehmen. Ab Tablet steht der volle Satz, darunter das Nötigste. */
.k-umbau-hinweis span{
flex:1;
min-width:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
@media (max-width:759px){
.k-umbau-hinweis{ padding-top:5px; padding-bottom:5px; font-size:11.5px }
.k-umbau-hinweis span strong ~ *{ display:none }
.k-umbau-hinweis span{ font-size:0 }
.k-umbau-hinweis span strong:first-child{ font-size:11.5px }
.k-umbau-hinweis span strong:first-child::after{
content:' Echte Daten – Änderungen wirken sofort.';
font-weight:500;
}
}
.k-umbau-hinweis a{
color:#fff;
background:rgba(255,255,255,.18);
border-radius:999px;
padding:6px 12px;
font-weight:600;
text-decoration:none;
white-space:nowrap;
min-height:32px;
display:inline-flex;
align-items:center;
}
@media (max-width:479px){
.k-umbau-hinweis a{ display:none }
}
/* ── 4 Kopfzeile ────────────────────────────────────────────────────── */
/* Ab Tablet nimmt die Reiterleiste am linken Rand Breite weg. Die Kopfzeile
ist deshalb schmaler als das Fenster und muss sich nach ihrer eigenen
Breite richten – sonst wird die Überschrift bei 640–768 px abgeschnitten. */
.k-header{
container-type:inline-size;
container-name:kopf;
display:flex;
align-items:center;
flex-wrap:wrap;
gap:10px;
padding:8px calc(var(--pad) + var(--sar)) 8px calc(var(--pad) + var(--sal));
background:linear-gradient(135deg,#2d5016 0%,#3f7522 100%);
color:#fff;
flex-shrink:0;
}
/* Die Marke behält ihre Zeile: Sonst quetschen die Knöpfe den Titel auf
wenige Pixel und „Kiosk" endet als Auslassungszeichen (gemessen bei
320 px: 34 px Text auf 21 px Platz). Reicht die Breite nicht für beides,
rücken die Knöpfe in die zweite Zeile. */
.k-header-brand{ flex:1 1 200px; display:flex; align-items:center; gap:9px; min-width:0 }
.k-header-logo{ display:inline-flex; flex:0 0 auto }
.k-header-logo i, .k-header-logo svg{ width:22px; height:22px }
.k-header h1{
font-size:clamp(14px, 3.6vw, 19px);
font-weight:600;
margin:0;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.k-header-when{ flex:0 0 auto; text-align:right; line-height:1.2 }
.k-header .k-clock{ font-size:17px; font-weight:600; font-variant-numeric:tabular-nums }
.k-header .k-date { font-size:12px; opacity:.85; white-space:nowrap }
.k-header #k-sparkline{ flex:0 0 auto; width:72px; height:28px; opacity:.75 }
.k-header-acts{ flex:0 1 auto; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px }
.k-hbtn{
min-width:var(--tap-min);
min-height:var(--tap-min);
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(255,255,255,.28);
background:rgba(255,255,255,.14);
color:#fff;
border-radius:var(--r-s);
cursor:pointer;
padding:0;
text-decoration:none;
transition:background .12s;
}
.k-hbtn:hover{ background:rgba(255,255,255,.26) }
.k-hbtn:active{ background:rgba(255,255,255,.34) }
.k-hbtn i, .k-hbtn svg{ width:20px; height:20px }
.k-hbtn:focus-visible{ outline:3px solid #fff; outline-offset:2px }
/* Was die Kopfzeile zeigt, hängt von ihrer eigenen Breite ab, nicht von der
Fensterbreite – ab Tablet nimmt die Reiterleiste links Platz weg. Zuerst
weicht das Datum, dann die Uhr, zuletzt die Verlaufskurve. Die Knöpfe
behalten immer ihre volle Größe (F4).
Die Grenzen sind gemessen (Innenbreite der Kopfzeile):
Titel 138 px + Zeichen 31 px, Knöpfe 194 bzw. 294 px, Uhr 62 px,
Uhr mit Datum 174 px (längster Fall „Donnerstag, 30. September 2026"),
Verlaufskurve 72 px, Zwischenraum je 10 px.
Die Verweise „Zur Website" und „Zum CMS" waren unter 490 px ausgeblendet.
Das sparte Platz, nahm der Verkäuferin auf dem Telefon aber zwei Wege, die
der gewohnte Kiosk anbietet — gemessen mit tools/pruef-funktionen-laufend.js.
Anzeige und Uhr dürfen weichen, eine Funktion nicht: Passt die Reihe nicht,
bricht sie jetzt um, statt Knöpfe verschwinden zu lassen. */
.k-header-when,
.k-header #k-sparkline{ display:none }
@container kopf (min-width:560px){
.k-header-when{ display:block }
.k-header .k-date{ display:none }
}
@container kopf (min-width:650px){
.k-header .k-date{ display:block; font-size:11px }
}
@container kopf (min-width:740px){
.k-header #k-sparkline{ display:block }
}
@container kopf (min-width:780px){
.k-header .k-date{ font-size:12px }
}
/* ── 5 Reiterleiste ─────────────────────────────────────────────────── */
.k-tabs{
display:grid;
grid-auto-rows:auto;
grid-template-columns:repeat(auto-fit, minmax(var(--tap-min), 1fr));
gap:2px;
background:var(--c-card);
border-bottom:none;
border-top:1px solid var(--c-border);
padding:4px calc(4px + var(--sar)) calc(4px + var(--sab)) calc(4px + var(--sal));
flex-shrink:0;
overflow:visible;
}
.k-tab{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:3px;
min-height:var(--tap);
min-width:var(--tap-min);
padding:6px 2px;
border:none;
border-radius:var(--r-s);
background:transparent;
color:var(--c-muted);
font-weight:600;
cursor:pointer;
text-align:center;
transition:background .12s, color .12s;
}
.k-tab:hover{ background:var(--c-surf2) }
.k-tab:focus-visible{ outline:3px solid var(--c-green); outline-offset:-3px }
.k-tab.active{
background:var(--c-tint);
color:var(--c-pri);
border-bottom-color:transparent;
}
/* Der aktive Reiter trägt einen Balken – auf dem Telefon oben, an der
Seitenleiste links. So ist er unabhängig von der Farbe erkennbar. */
.k-tab.active::before{
content:"";
position:absolute;
left:12px; right:12px; top:0;
height:3px;
border-radius:0 0 3px 3px;
background:var(--c-green);
}
.k-tab .k-tab-icon{ display:inline-flex; line-height:0 }
.k-tab .k-tab-icon i, .k-tab .k-tab-icon svg{ width:22px; height:22px }
.k-tab-lbl{
font-size:clamp(9px, 2.5vw, 12px);
line-height:1.25;
overflow-wrap:anywhere;
hyphens:auto;
max-width:100%;
}
/* Kurze Beschriftungen auf dem Telefon, ausgeschriebene ab Tablet.
Bei acht Reitern bleiben auf 320 px nur 40 px Breite je Reiter. */
.k-tab-lbl .lang{ display:none }
.k-tab-lbl .kurz{ display:inline }
@media (min-width:640px){
.k-tab-lbl .lang{ display:inline }
.k-tab-lbl .kurz{ display:none }
}
.k-header h1 .lang{ display:none }
.k-header h1 .kurz{ display:inline }
@container kopf (min-width:380px){
.k-header h1 .lang{ display:inline }
.k-header h1 .kurz{ display:none }
}
/* Zähler: müssen in jeder Anordnung sichtbar bleiben (F1, F9). */
.k-tabs .k-tab-badges{
position:absolute;
top:1px;
right:calc(50% - 26px);
display:flex;
gap:2px;
margin:0;
pointer-events:auto;
z-index:2;
}
.k-tabs .k-tab .k-tab-badge{
font-size:11px;
font-weight:600;
min-width:20px;
min-height:20px;
padding:2px 6px;
border-radius:999px;
line-height:16px;
box-shadow:0 0 0 2px var(--c-card);
}
.k-tab.active .k-tab-badge{ box-shadow:0 0 0 2px var(--c-tint) }
/* Ein Reiter mit dringendem Zustand hebt sich zusätzlich ab. */
.k-tab:has(.k-tab-badge.show.badge-overdue),
.k-tab:has(.k-tab-badge.blink){
background:#fef2f2;
color:var(--c-red);
}
html[data-theme="dark"] .k-tab:has(.k-tab-badge.show.badge-overdue),
html[data-theme="dark"] .k-tab:has(.k-tab-badge.blink){ background:#2a1717 }
/* Seitenleiste ab 640 px */
@media (min-width:640px){
.k-tabs{
grid-template-columns:minmax(0,1fr);
grid-auto-rows:max-content;
align-content:start;
gap:4px;
padding:10px 8px calc(10px + var(--sab)) calc(8px + var(--sal));
border-top:none;
border-right:1px solid var(--c-border);
overflow-y:auto;
scrollbar-width:thin;
}
.k-tab{ min-height:56px; padding:8px 4px }
.k-tab.active::before{
left:0; top:12px; bottom:12px; right:auto;
width:3px; height:auto;
border-radius:0 3px 3px 0;
}
.k-tab-lbl{ font-size:11px }
.k-tabs .k-tab-badges{ right:8px; top:6px }
}
/* Breite Seitenleiste ab 1180 px: Symbol neben Beschriftung */
@media (min-width:1180px){
.k-tab{
flex-direction:row;
justify-content:flex-start;
gap:12px;
padding:10px 14px;
min-height:52px;
text-align:left;
}
.k-tab-lbl{ font-size:15px; flex:1; overflow-wrap:normal }
.k-tabs .k-tab-badges{ position:static; right:auto; top:auto; flex:0 0 auto }
.k-tabs .k-tab .k-tab-badge{ box-shadow:none }
}
/* ── 6 Inhaltsbereich und feste Kopfbereiche ────────────────────────── */
.k-main{
position:relative;
overflow:hidden;
min-width:0;
min-height:0;
background:var(--c-bg);
}
.k-panel{
position:absolute;
inset:0;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding:var(--pad) calc(var(--pad) + var(--sar)) calc(var(--pad) + 8px) calc(var(--pad) + var(--sal));
scrollbar-gutter:stable;
}
.k-panel.active{ display:block }
/* Alles, was Überblick gibt, bleibt beim Scrollen stehen: Tagesleiste,
Kennzahlen, Kochbedarf, Sonderwünsche und die Filterleiste. Nur die
eigentliche Liste läuft darunter durch. (F3) */
.k-panel > .k-day-bar,
.k-panel > .k-filter-bar,
.k-panel > .k-hist-bar,
.k-panel > #mittag-stats,
.k-panel > #metzger-stats{
position:sticky;
z-index:20;
background:var(--c-bg);
}
.k-panel > .k-day-bar{ top:calc(var(--pad) * -1); padding-top:6px; padding-bottom:6px }
/* `top` ist bei allen diesen Leisten negativ und nicht 0: Der Bezugsrahmen
beginnt am Innenrand des Rollbereichs, also --pad unterhalb der Reiterkante.
Mit `top:0` rastet die Leiste --pad zu tief ein, und der weggescrollte
Inhalt zieht in diesem Spalt darueber sichtbar vorbei. Nur der gehaltene
Zustand verschiebt sich dadurch - im normalen Fluss aendert `top` nichts. */
.k-panel > #mittag-stats,
.k-panel > #metzger-stats{ top:calc(var(--pad) * -1) }
.k-panel > .k-filter-bar{ top:calc(var(--pad) * -1) }
.k-panel > .k-hist-bar{ top:calc(var(--pad) * -1) }
/* Tagesleiste: waagerecht scrollbar, ragt bewusst über den Rand hinaus. */
.k-day-bar{
display:flex;
gap:6px;
overflow-x:auto;
scrollbar-width:none;
margin:0 calc(var(--pad) * -1);
padding-inline:var(--pad);
scroll-snap-type:x proximity;
}
.k-day-bar::-webkit-scrollbar{ display:none }
.k-day-pill{
min-height:var(--tap);
min-width:60px;
scroll-snap-align:start;
border-radius:var(--r-s);
}
/* ── 7 Filterleisten als Chips ──────────────────────────────────────── */
.k-filter-bar{
display:flex;
gap:6px;
margin:0 calc(var(--pad) * -1) var(--gap);
padding:6px var(--pad);
border-bottom:1px solid var(--c-border);
overflow-x:auto;
overflow-y:hidden;
scrollbar-width:none;
background:var(--c-bg);
}
.k-filter-bar::-webkit-scrollbar{ display:none }
.k-filter-btn{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:6px;
min-height:var(--tap-min);
padding:8px 14px;
border:1px solid var(--c-border);
border-bottom:1px solid var(--c-border);
border-radius:999px;
background:var(--c-card);
color:var(--c-text);
font-size:13px;
font-weight:600;
white-space:nowrap;
cursor:pointer;
transition:background .12s, border-color .12s;
}
.k-filter-btn:hover{ background:var(--c-surf2) }
.k-filter-btn:focus-visible{ outline:3px solid var(--c-green); outline-offset:2px }
.k-filter-btn.active{
background:var(--c-pri);
border-color:var(--c-pri);
color:#fff;
}
.k-filter-btn.active .k-filter-count{ background:rgba(255,255,255,.24); color:#fff }
.k-filter-count{
background:var(--c-surf2);
border-radius:999px;
padding:1px 7px;
font-size:12px;
min-width:20px;
text-align:center;
}
.k-filter-btn i, .k-filter-btn svg{ width:15px; height:15px; flex:0 0 auto }
.k-hist-bar{ display:flex; gap:6px; flex-wrap:wrap; padding:6px 0; margin-bottom:var(--gap) }
.k-hist-pill{
min-height:var(--tap-min);
padding:8px 14px;
border-radius:999px;
border:1px solid var(--c-border);
background:var(--c-card);
font-size:13px;
font-weight:600;
cursor:pointer;
}
.k-hist-pill.active{ background:var(--c-pri); border-color:var(--c-pri); color:#fff }
/* ── 8 Bedienmaße ───────────────────────────────────────────────────── */
/* Viele Knöpfe tragen im Bestand eigene Maßangaben direkt am Element
(min-height:36px und kleiner) oder in den Modulblättern. Statt sie einzeln
aufzuzählen gilt eine Grundregel für alles, was angetippt wird – deshalb
hier ausnahmsweise !important. */
.k-app button,
.k-app [role=button],
.k-app [onclick],
.k-app a.k-btn,
.k-app summary{
min-height:var(--tap-min) !important;
}
.k-app button,
.k-app [role=button],
.k-app a.k-btn{
min-width:var(--tap-min) !important;
}
.k-app button,
.k-app .k-btn,
.k-app .mb-btn,
.k-app .bk-btn,
.k-app .kal-btn{
border-radius:var(--r-s);
font-size:14px;
}
.k-app .k-btn-xs,
.k-app .k-btn-sm{ padding:8px 12px !important }
.k-app .k-btn-lg{ min-height:56px !important; font-size:16px }
/* Auf ganz schmalen Schirmen fehlten "Neue Telefonbestellung" drei Pixel,
und `white-space:nowrap` schnitt das Wort ab. Umbrechen statt kappen. */
.k-app .k-btn{ white-space:normal }
/* Ein blasser Knopf ohne sichtbaren Grund laesst ratlos zurueck: warum
geht das nicht? Der Grund stand bisher nur im title und war damit auf
einem Beruehrungsschirm unerreichbar. Jetzt steht er unter der
Beschriftung. */
.k-app .k-bottom .k-btn[disabled][title]{
flex-direction:column;
gap:1px;
line-height:1.2;
opacity:.72 !important;
}
.k-app .k-bottom .k-btn[disabled][title]::after{
content:attr(title);
font-size:10.5px;
font-weight:500;
}
/* Ausnahmen: Elemente, die zwar einen Klickhandler tragen, aber Fläche und
keine Schaltfläche sind – bei ihnen erzwingt die Grundregel nichts Sinnvolles. */
.k-app tr[onclick],
.k-app td[onclick],
.k-app span[onclick],
.k-app label[onclick]{ min-width:0 !important }
/* Eingabefelder, Auswahllisten und Schalter */
.k-app input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.k-app select,
.k-app textarea{
min-height:var(--tap-min) !important;
font-size:16px; /* verhindert das Heranzoomen unter iOS */
border-radius:var(--r-s);
padding:10px 12px;
line-height:1.3;
}
.k-app textarea{ min-height:88px !important; padding:10px 12px }
/* Ankreuzfelder: Die Bedienfläche muss 44 px messen, das Kästchen soll aber
klein bleiben. Deshalb wird es selbst gezeichnet – die Fläche ist 44 px,
der negative Außenabstand gibt den Platz im Satz wieder frei. */
.k-app input[type=checkbox],
.k-app input[type=radio]{
appearance:none;
-webkit-appearance:none;
width:var(--tap-min);
height:var(--tap-min);
min-height:var(--tap-min) !important;
min-width:var(--tap-min) !important;
margin:-10px;
padding:0;
border:none;
background:transparent;
display:inline-grid;
place-content:center;
cursor:pointer;
flex:0 0 auto;
vertical-align:middle;
}
.k-app input[type=checkbox]::before,
.k-app input[type=radio]::before{
content:"";
width:24px;
height:24px;
border:2px solid var(--c-muted);
background:var(--c-card);
transition:background .1s, border-color .1s;
}
.k-app input[type=checkbox]::before{ border-radius:6px }
.k-app input[type=radio]::before{ border-radius:50% }
.k-app input[type=checkbox]:checked::before{
border-color:var(--c-green);
background:var(--c-green) no-repeat center/15px
url("data:image/svg+xml;utf8,");
}
.k-app input[type=radio]:checked::before{
border-color:var(--c-green);
border-width:7px;
}
.k-app input[type=checkbox]:focus-visible::before,
.k-app input[type=radio]:focus-visible::before{ outline:3px solid var(--c-green); outline-offset:2px }
.k-app input[type=checkbox]:disabled::before,
.k-app input[type=radio]:disabled::before{ opacity:.45 }
.k-app label:has(> input[type=checkbox]),
.k-app label:has(> input[type=radio]){
min-height:var(--tap-min);
display:inline-flex;
align-items:center;
gap:14px;
cursor:pointer;
}
/* Der Metzger-Reiter arbeitet mit einem eigenen Maß von 38 px. */
.mb{ --mb-touch:44px }
/* ── 9 Listen, Karten, Text ─────────────────────────────────────────── */
/* Lange Artikel- und Kundennamen werden umgebrochen, nicht abgeschnitten.
* Vorher standen hier zusaetzlich zwei Zeilen Klemmung - damit wurde aus
* "Cordon bleu mit Pommes oder Kartoffelsalat" auf dem Handy
* "Cordon bleu mit Pommes oder" und der Rest fehlte kommentarlos. */
.k-oc-name,
.mb-nm, .mb-aname,
.bk-art .nm, .bk-art .art-n,
.kk-name,
.k-cook-name, .k-sw-name{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:anywhere;
line-height:1.3;
}
.k-order{
border-radius:var(--r-m);
box-shadow:var(--schatten-1);
margin-bottom:var(--gap);
border-left-width:4px;
}
.k-order-hdr{ min-height:var(--tap) ; gap:8px; padding:10px 12px }
.k-empty{ padding:36px 16px; text-align:center; color:var(--c-muted) }
.k-empty-icon{ opacity:.5; margin-bottom:8px }
/* Mehrspaltig, sobald Platz da ist – gegen Leerräume auf großen Schirmen. */
@media (min-width:940px){
#mittag-orders, #abhol-orders, #metzger-orders, #kontakt-list{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));
gap:var(--gap);
align-items:start;
}
#mittag-orders > .k-order,
#abhol-orders > .k-order,
#metzger-orders > .k-order,
#kontakt-list > .kk-card{ margin-bottom:0 }
/* Gruppenüberschriften laufen über die volle Breite. */
#mittag-orders > .k-slot-group,
#mittag-orders > .k-dish-group,
#mittag-orders > .k-dish-sep-row,
#metzger-orders > .k-slot-group{ grid-column:1 / -1 }
}
.k-stats{ gap:6px; padding:6px 0 }
.k-stat{ min-height:36px; border-radius:999px; padding:6px 12px }
/* ── 10 Dialoge als Blatt ───────────────────────────────────────────── */
/* Grundsatz F6: Ein Dialog liegt immer vollständig im Blickfeld.
Auf dem Telefon als Blatt am unteren Rand, ab 1180 px als Spalte
neben der Liste. Damit entfällt jedes Nachschieben per JavaScript. */
.k-modal-bg,
.mb-overlay,
.bk-overlay,
.kal-modal{
position:fixed;
inset:0;
z-index:9000;
background:rgba(15,23,42,.5);
align-items:flex-end;
justify-content:center;
padding:0;
}
.k-modal-bg.show,
.k-modal-bg[style*="flex"]{ display:flex }
.k-modal,
.mb-dlg,
.bk-dlg,
.kal-modal-card{
width:100%;
max-width:none;
max-height:88dvh;
max-height:88svh;
display:flex;
flex-direction:column;
border-radius:var(--r-l) var(--r-l) 0 0;
box-shadow:var(--schatten-blatt);
overflow:hidden;
padding-bottom:var(--sab);
}
/* Griff am oberen Rand: zeigt, dass sich das Blatt schließen lässt. */
.k-modal::before,
.mb-dlg::before,
.bk-dlg::before,
.kal-modal-card::before{
content:"";
flex:0 0 auto;
width:44px;
height:4px;
border-radius:999px;
background:var(--c-border);
margin:8px auto 4px;
}
.k-modal-head,
.bk-dlg-h,
.kal-modal-head{ flex:0 0 auto }
.k-modal-body,
.bk-dlg-b{ flex:1 1 auto; overflow-y:auto; min-height:0; max-height:none }
.k-modal-footer,
.bk-dlg-f,
.kal-modal-foot,
.mb-dlg-acts{
flex:0 0 auto;
position:sticky;
bottom:0;
background:var(--c-card);
border-top:1px solid var(--c-border);
padding:10px 14px calc(10px + var(--sab));
display:flex;
gap:8px;
}
/* Die wichtigste Schaltfläche liegt rechts und ist die breiteste. */
.k-modal-footer .k-btn-confirm,
.bk-dlg-f .bk-btn.primary,
.mb-dlg-acts .mb-send{ flex:1 1 auto }
.mb-dlg{ padding:0 16px }
.mb-dlg-kopf{ padding-top:6px }
/* Ab Tablet mittig als Karte, ab 1180 px als angedockte Spalte. */
@media (min-width:640px){
.k-modal-bg, .mb-overlay, .bk-overlay, .kal-modal{ align-items:center; padding:24px }
.k-modal, .mb-dlg, .bk-dlg, .kal-modal-card{
max-width:640px;
max-height:86dvh;
border-radius:var(--r-l);
padding-bottom:0;
}
.k-modal-lg, .k-modal-full{ max-width:900px }
.k-modal::before, .mb-dlg::before, .bk-dlg::before, .kal-modal-card::before{ display:none }
}
@media (min-width:1180px){
.k-modal-bg, .mb-overlay, .bk-overlay, .kal-modal{
justify-content:flex-end;
padding:0;
background:rgba(15,23,42,.28);
}
.k-modal, .mb-dlg, .bk-dlg, .kal-modal-card{
height:100%;
max-height:none;
width:min(560px, 42vw);
border-radius:0;
box-shadow:-8px 0 32px rgba(16,24,40,.18);
}
}
/* Die Erfassung steht unter dem Artikel — im Fluss der Liste, nicht als
Blatt darüber. Sie war zuvor `position:sticky; bottom:…` und klebte am
unteren Rand: Sobald man die Liste bewegte, schob sie sich über den
Artikel, zu dem sie gehört, und über die Zeilen darunter. Artikel und
Erfassung müssen zusammen sichtbar bleiben (Spec kiosk-bestellreiter-
mobil, F1). Dafür sorgt zeigeGanz() in js/kiosk-metzger-bestellung.js. */
.mb-ed{
grid-column:1 / -1;
margin:6px 0 0;
padding:10px 12px calc(10px + var(--sab));
background:var(--c-card);
border-top:2px solid var(--c-green);
border-radius:var(--r-s);
}
/* Die Erfassung rollt nicht mehr innen — sie steht im Fluss der Liste.
Die Abschlusszeile braucht deshalb kein Kleben mehr. */
.mb-ed .mb-quick{ padding-top:8px }
/* Fußleisten der Reiter bleiben stehen. */
.mb-foot, .bk-foot{
position:sticky;
bottom:0;
z-index:25;
padding-bottom:calc(9px + var(--sab));
box-shadow:0 -4px 14px rgba(16,24,40,.08);
}
/* ── 11 Modulanpassungen ────────────────────────────────────────────── */
/* Wie viele Spalten eine Liste verträgt, hängt an der Breite des Reiters,
nicht an der des Fensters: ab 640 px nimmt die Reiterleiste links 84 bis
252 px weg. Die Listenhüllen werden deshalb zu Messgrößen. Nicht der
Reiter selbst – in ihm liegt mit `#kal-modal` ein fest positionierter
Dialog, den eine Eingrenzung an den Reiter binden würde. */
#baecker-body, #metzgerbest-body{ container-type:inline-size; container-name:liste }
/* Bäcker: Wie viele Spalten die Artikelliste verträgt, entscheidet
Abschnitt 14.10 anhand der Reiterbreite. Hier bleibt nur das
Artikelraster, das dort keine Entsprechung hat. Eine Kachel braucht
54 px Nummer + 150 px Name + 60 px Menge + 34 px + 46 px Schalter +
36 px Zwischenraum + 22 px Rand = 402 px. */
@container liste (min-width:860px){
.bk-artgrid{ display:grid; gap:0 var(--gap); grid-template-columns:repeat(auto-fill, minmax(420px, 1fr)) }
}
.bk-sticky{ position:sticky; top:0; z-index:20; background:var(--c-bg) }
/* Metzger Mair: Die Grundlage schaltet erst ab 1180 px Fensterbreite auf
560 px breite Spalten – bei 1280 px blieb der Reiter mit 1005 px damit
einspaltig und 3 979 px hoch. Maßgeblich ist die Breite des Reiters. */
.mb-subs{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding:4px 0 }
.mb-sub{ flex:0 0 auto; min-height:var(--tap-min); border-radius:999px; padding:8px 14px }
.mb-chips, .mb-quick{ display:flex; flex-wrap:wrap; gap:6px }
/* Portions-Chip: schlank gezeichnet, aber in voller Größe antippbar.
*
* Der Chip muss 44 px hoch sein, damit er sicher zu treffen ist. Als volle
* Farbfläche wirkte er dadurch klobig und fraß Höhe. Deshalb ist der obere
* und untere Rand jetzt durchsichtig: Er zählt zur Antippfläche, wird aber
* nicht gezeichnet. Sichtbar bleibt eine 32 px hohe Pille — ein Drittel
* weniger Fläche bei unveränderter Treffsicherheit.
*
* Die Kontur kommt als innenliegender Schatten statt als Rahmen, weil ein
* echter Rahmen den durchsichtigen Streifen mitzeichnen würde.
*
* Wichtig: Der Chip darf keinen senkrechten Innenabstand bekommen. Die beiden
* Knöpfe darin (Beschriftung und ✕) holen sich ihre Antippfläche über
* `align-self:stretch` aus der Chiphöhe. Jeder Innenabstand geht ihnen direkt
* verloren — 6 px oben und unten ließen von 34 px nur noch 22 px übrig.
*/
.mb-chip{
min-height:var(--tap-min);
height:var(--tap-min);
border:0;
border-top:5px solid transparent;
border-bottom:5px solid transparent;
background-clip:padding-box;
box-shadow:inset 0 0 0 1.5px #2e7d4f;
border-radius:999px;
padding:0 4px 0 2px;
font-size:13px;
gap:1px;
}
.mb-chip.hw{ box-shadow:inset 0 0 0 1.5px #e65100 }
/* Die durchsichtigen Ränder halten die Reihen schon auseinander; ein
zusätzlicher Zeilenabstand würde die Liste wieder auseinanderziehen. */
#panel-metzgerbest .mb-chips{ gap:0 4px }
.mb-chip .lab{
min-height:0 !important;
min-width:0 !important;
align-self:stretch;
padding:0 2px 0 11px !important;
}
.mb-chip .x{
min-height:0 !important;
min-width:0 !important;
align-self:stretch;
padding:0 8px !important;
font-size:15px;
}
.mb-chip.hw .lab{ padding:0 2px 0 11px !important }
/* Die Fußleiste („4 Positionen … Speichern · Bestellung senden") klebt am
* unteren Rand des Reiters. Der Reiter hatte dort aber 20 px Polsterung, und
* die Leiste rastet am Innenrand ein — in diesem Streifen schauten
* Listenzeilen unter ihr hervor. Es sah aus, als liefe die Liste durch die
* Knöpfe hindurch. Außerdem war die Leiste seitlich eingerückt und fluchtete
* dadurch nicht mit der Menüleiste darunter.
*
* Sie sitzt jetzt bündig am unteren Rand und reicht über die volle Breite.
*/
#panel-metzgerbest{ padding-bottom:0 }
#panel-metzgerbest .mb-foot{
margin-left:calc(var(--pad) * -1);
margin-right:calc(var(--pad) * -1);
padding-left:var(--pad);
padding-right:var(--pad);
border-radius:0;
background:var(--karte);
border-top:1px solid var(--line);
row-gap:2px;
}
/* „Speichern" und „Bestellung senden" landeten auf zwei verschiedenen Zeilen,
weil der Sendeknopf hinter dem Zwischenstand nicht mehr in die Zeile passte.
Ein leerer Umbruchpunkt trennt Zwischenstand und Knöpfe sauber, danach
stehen beide Knöpfe zusammen in einer Zeile — 26 px weniger Höhe. */
#panel-metzgerbest .mb-foot::before{
content:'';
flex:0 0 100%;
order:1;
height:0;
}
#panel-metzgerbest .mb-foot .mb-btn,
#panel-metzgerbest .mb-foot .mb-send{ order:2 }
/* Der „geschätzt mindestens"-Betrag half beim Bestellen nie weiter: Er ist
eine Schätzung, abgerechnet wird ohnehin nach Gewicht durch den Metzger.
Er kostete aber eine eigene Zeile in der Fußleiste und entfällt deshalb.
Die Fußleiste führt zuerst die vier Zähler (Positionen, Kilo, Stück,
Vakuum); alles danach ist der Schätzwert. */
#panel-metzgerbest .mb-foot .mb-st:nth-of-type(n+5){ display:none }
/* Auf dem Handy zählt jeder Millimeter. Positionen, Kilo, Stück und
Vakuumzahl stehen als Zwischenstand in der Liste darüber ohnehin fest;
in der Fußleiste bleiben die beiden Knöpfe, um die es dort geht.
Die Höhenbedingung kam dazu, als der Kiosk auf dem Ladentablett ins
Hochformat gedreht wurde: Das Gerät meldet dort 686 × 1095 CSS-Pixel.
Über die Breite allein galt es als Handy — die vier Zähler verschwanden,
obwohl über tausend Pixel Höhe zur Verfügung stehen. Eng ist ein Gerät
erst, wenn es schmal UND niedrig ist.
(Spec metzger-tablett-hoch, F4) */
@media (max-width:699px) and (max-height:950px){
#panel-metzgerbest .mb-foot .mb-st{ display:none }
}
/* Ab 620 px steht der Name in einer eigenen Spalte, die starr bis zu 230 px
breit war — auch bei einem kurzen Namen wie „Rouladen". Den Portions-Badges
blieb dadurch so wenig Platz, dass sie einzeln untereinander umbrachen,
während links daneben eine leere Fläche stand. Die Spalte richtet sich
jetzt nach dem Namen: eine Untergrenze hält die Zeilen ruhig ausgerichtet,
die Obergrenze bleibt wie bisher. So laufen die Badges nebeneinander. */
@media (min-width:620px){
#panel-metzgerbest .mb-zeile{ grid-template-columns:auto minmax(0,1fr) }
#panel-metzgerbest .mb-nm{ min-width:118px; max-width:var(--mb-np,200px) }
}
/* Der Knopf zum Öffnen der Erfassung steht in einer eigenen Spalte am rechten
Rand der Zeile (`.mb-akt`) und ist in der Hausfarbe gezeichnet. Früher lag
er im Fluss der Portions-Badges und wanderte je nach Bildschirmbreite
einmal neben, einmal unter den Namen. */
#panel-metzgerbest .mb-chips{ align-items:center }
/* Der Vorschlag „so war es zuletzt" trug `white-space:nowrap` und wurde
dadurch am Rand abgeschnitten, sobald die letzte Bestellung mehrere
Portionsgrößen hatte („1 × 2 kg + 1 × 4 St + 1 × 2 St + …"). Gerade dann
ist er am nützlichsten. Er bricht jetzt um. */
#panel-metzgerbest .mb-frueher{
order:0;
white-space:normal;
text-align:left;
overflow-wrap:anywhere;
line-height:var(--zh);
padding:6px 11px;
}
#panel-metzgerbest .mb-add:not(.del){
border:2px solid var(--gr);
border-style:solid;
background:#fff;
color:var(--gr);
font-size:22px;
line-height:1;
}
#panel-metzgerbest .mb-add:not(.del):hover{ background:#eaf4ee }
/* Das ✕ zum Entfernen einer zusätzlichen Position bleibt am Ende und ruhig. */
#panel-metzgerbest .mb-add.del{ order:2 }
/* Zwei Zeilen statt zweier Spalten: Der Artikelname steht für sich, die
erfassten Mengen stehen darunter.
Bisher teilten sich Name und Portions-Badges die Breite. Bei mehreren
Portionsgrößen brachen die Badges in der schmalen rechten Spalte um,
während links neben dem Namen Platz frei blieb — unruhig und schwer zu
lesen. Über die volle Breite passen sie meist in eine Zeile.
Der blasse Anhalt „so war es zuletzt" bleibt oben beim Namen: Er ist
keine Bestellung, also darf er die Zeile auch nicht höher machen. Die
Zeile wächst nur, wenn wirklich etwas erfasst ist.
`.mb-chips` wird dafür aufgelöst (display:contents), damit Name, Anhalt
und Badges in einem gemeinsamen Fluss liegen; ein leerer Umbruchpunkt
(::after) trennt Kopfzeile und Badges. Der Öffnen-Knopf gehört nicht in
diesen Fluss, er steht in der eigenen Spalte `.mb-akt`. */
#panel-metzgerbest .mb-zeile{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:0 8px;
}
#panel-metzgerbest .mb-chips{ display:contents }
#panel-metzgerbest .mb-nm{
order:0;
flex:0 1 auto;
min-width:0;
max-width:none;
/* Lange zusammengesetzte Woerter — „Sonnenblumenkernbrot", „Oberschalen-
schnitzel" — passen in einer schmalen Spalte nicht in eine Zeile. Ohne
Trennung brach der Browser mitten im Wort um und liess ein einzelnes
„t" in der zweiten Zeile stehen. Mit `hyphens:auto` und `lang="de"` am
Dokument wird stattdessen an einer erlaubten Stelle mit Bindestrich
getrennt. (Spec metzger-tablett-hoch, F8) */
hyphens:auto;
-webkit-hyphens:auto;
}
#panel-metzgerbest .mb-frueher{ order:1 }
#panel-metzgerbest .mb-add.del{ order:3 }
#panel-metzgerbest .mb-zeile::after{
content:'';
order:4;
flex:0 0 100%;
height:0;
}
#panel-metzgerbest .mb-chip{ order:5; margin-top:4px }
/* Die Nummer gehoert zum Namen, nicht zu den Mengen: Sie stand mittig zur
ganzen Zeile und rutschte damit neben die Badges. Sie richtet sich jetzt
an der Kopfzeile aus. */
#panel-metzgerbest .mb-nr{
align-items:flex-start;
padding-top:13px;
}
/* Ab Tablet-Breite zwei Spalten: einspaltig passten die zweizeiligen
Metzger-Zeilen (Name + Portionen) nicht in ausreichender Zahl auf den
Schirm. Die Metzger-Spec will ohnehin, dass die Breite die Spaltenzahl
bestimmt (F17). */
/* Das Ladentablett im Hochformat bleibt mit 574 px Listenbreite knapp
unter der 600er-Schwelle und stand deshalb einspaltig da — obwohl es
1095 px hoch ist. Gemessen: 8 von 12 Artikeln sichtbar gegenüber 12 von
12 bei zwei Spalten. Die Kacheln sind dann 274 statt 315 px breit;
längere Namen brechen auf zwei Zeilen um, die Zeile bleibt aber
bedienbar und die Antippflächen unverändert.
Diese Stufe steht VOR der 600er-Regel, damit breitere Behälter weiterhin
ihre 300 px bekommen — sonst kippten sie bei 880 px auf drei Spalten.
(Spec metzger-tablett-hoch, F2) */
@container liste (min-width:560px){
.mb-liste{ --mb-sp:272px }
}
@container liste (min-width:600px){
.mb-liste{ --mb-sp:300px }
}
@container liste (min-width:960px){
.mb-liste{ --mb-sp:470px }
}
@container liste (min-width:1440px){
.mb-liste{ --mb-sp:450px }
}
/* Kalender: Wochenraster mit ausreichend großen Tagesflächen. */
.kal-day{ min-height:var(--tap) }
.kal-tp-btn, .kal-pill, .kal-chip{ min-height:var(--tap-min); border-radius:999px }
/* ── Serienende im Terminfenster ────────────────────────────────────────
Aus dem Laden: „Bei der Terminserie sollte es auch möglich sein
anzugeben, wie lange die Serie laufen soll … oder endlos." Der Block
erscheint nur, wenn überhaupt eine Wiederholung gewählt ist.
(Spec kalender-serienende, F1/F2) */
.kal-ende{
margin-top:10px;
padding-top:10px;
border-top:1px solid var(--c-border,#e5e7eb);
}
.kal-ende[hidden]{ display:none }
.kal-ende-lbl{
display:block;
margin-bottom:6px;
font-size:12px; font-weight:600; color:#374151;
}
.kal-ende-datum{
margin-top:8px;
width:100%;
min-height:var(--tap-min);
padding:8px 12px;
border:1px solid var(--c-border,#d1d5db);
border-radius:10px;
font-size:15px;
box-sizing:border-box;
}
.kal-ende-datum[hidden]{ display:none }
.kal-ende-hint{
margin-top:6px;
font-size:12px; color:#6b7280;
}
.kal-toolbar{ position:sticky; top:0; z-index:20; background:var(--c-bg); padding:6px 0 }
/* Kontakt: Nachrichtenkarten. */
.kk-card{ border-radius:var(--r-m); box-shadow:var(--schatten-1) }
.kk-sec{ scroll-margin-top:60px }
/* Der Kopf „Kundennachrichten … Aktualisieren" passte bei 320 px nicht in
eine Zeile und wurde zum Rollstreifen. Er bricht jetzt um. */
#panel-kontakt #kontakt-filter-bar{ flex-wrap:wrap; overflow:visible; row-gap:6px }
/* Dieselbe Zählerleiste steht im Abhol- und im alten Metzger-Reiter: bei
320 px waren die Zähler-Chips zusammen breiter als der Schirm und liefen
als Rollstreifen weg. Umbruch statt Schieben. */
#panel-abhol #abhol-filter-bar,
#panel-metzger #metzger-filter-bar{ flex-wrap:wrap; overflow:visible; row-gap:6px }
/* Die Grundlage schaltet die Kopfzeile einer Nachricht bei 900 px
Fensterbreite auf feste Spalten (190 px Name, 168 px Gerät). Im neuen
Raster stehen die Karten auf breiten Schirmen aber nebeneinander und sind
dann nur rund 490 px breit – die festen Spalten ragten über den Rand
hinaus. Maßgeblich ist deshalb die Breite der Karte, nicht die des
Fensters. Bedarf der Spaltenform: 425 px feste Spalten + 70 px
Zwischenräume + Uhrzeit 66 px = 561 px. */
.kk-card{ container-type:inline-size; container-name:kkkarte }
@container kkkarte (max-width:619px){
.kk-hdr{
display:grid;
grid-template-columns:var(--tap-min) 14px 11px minmax(0,1fr) auto;
grid-template-areas:"chk arw dot name state" "l2 l2 l2 l2 l2";
align-items:center;
column-gap:7px;
row-gap:4px;
}
.kk-hdr>input.kk-sel{ grid-area:chk }
.kk-hdr .kk-arrow{ grid-area:arw }
.kk-hdr .kk-dot{ grid-area:dot }
.kk-hdr .kk-name{ grid-area:name; min-width:0 }
.kk-hdr .kk-state{ grid-area:state }
.kk-hdr .kk-l2{ grid-area:l2; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; min-width:0 }
.kk-hdr .kk-l2 .kk-dev{ flex:0 0 auto }
.kk-hdr .kk-l2 .kk-prev{ flex:1 1 100%; min-width:0 }
.kk-hdr .kk-l2 .kk-time{ flex:0 0 auto; margin-left:auto }
}
@container kkkarte (min-width:620px){
.kk-hdr{
display:grid;
grid-template-columns:var(--tap-min) 14px 11px minmax(140px,190px) minmax(120px,168px) minmax(0,1fr) auto 26px;
grid-template-areas:none;
align-items:center;
column-gap:10px;
row-gap:0;
}
.kk-hdr>input.kk-sel,
.kk-hdr .kk-arrow,
.kk-hdr .kk-dot,
.kk-hdr .kk-name,
.kk-hdr .kk-state,
.kk-hdr .kk-l2{ grid-area:auto }
.kk-hdr .kk-l2{ display:contents }
.kk-hdr .kk-name, .kk-hdr .kk-dev, .kk-hdr .kk-prev{ min-width:0 }
.kk-hdr .kk-dev{ justify-self:start }
.kk-hdr .kk-time{ justify-self:end }
}
/* Die Kopfzeile trug ihre Maße als Inline-Stil: `text-overflow:ellipsis`
schnitt Gerätekennung und Nachrichtenvorschau ab, `font-weight:800/700`
hob ungelesene Nachrichten über den erlaubten Halbfett-Grad. Beides wird
hier überschrieben – Umbruch statt Verschnitt, höchstens 600. */
#panel-kontakt .kk-dev,
#panel-kontakt .kk-prev{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:anywhere;
line-height:1.3;
}
#panel-kontakt .kk-unread .kk-name,
#panel-kontakt .kk-unread .kk-prev,
#panel-kontakt .kk-unread .kk-time{ font-weight:600 !important }
/* Die Auswahl-Ankreuzfelder messen 44 px (Abschnitt 8) und rückten mit dem
negativen Außenabstand in Pfeil und zweite Zeile hinein. In der dichten
Kopfzeile bekommen sie eine eigene 44-px-Spalte und keinen Versatz. */
#panel-kontakt .kk-hdr>input.kk-sel{ margin:0 }
/* Social: der Katalog wird in T026 auf Zeilen mit „Bearbeiten" umgestellt.
Bis dahin sorgen diese Regeln wenigstens für bedienbare Maße. */
#panel-social input, #panel-social select, #panel-social textarea{ max-width:100% }
.soc-cat-chip{ min-height:var(--tap-min); border-radius:999px; padding:8px 14px }
.soc-cat-chip[style*="font-size:11px"]{ font-size:13px !important }
/* Katalogzeilen: Bild, Name und Eingabefelder standen in keinem Verhältnis.
*
* - Das Vorschaubild war fest auf 40 px gesetzt. Die Quelle ist 128 px groß,
* auf 40 px erkennt man den Artikel aber nicht mehr — es sah aus, als
* fehlten die Bilder.
* - Preisfeld und Uhrzeit-Auswahl tragen 11 px Schrift, werden von der
* 44-px-Regel aber auf volle Bedienhöhe gebracht: ein großes Feld mit
* winziger Beschriftung. Die Schrift wächst auf Lesegröße mit.
* - Der Artikelname war mit 13 px kleiner als die Felder daneben.
*
* Alle Werte stehen als Inline-Stil im Modul; da die Fachmodule unberührt
* bleiben, werden sie hier über ihre Signatur überschrieben.
*/
#panel-social .soc-pick-row img[style*="width:40px"],
#panel-social .soc-pick-row div[style*="width:40px"]{
width:56px !important;
height:56px !important;
}
#panel-social .soc-pick-row div[style*="font-size:13px"]{
font-size:15px !important;
line-height:var(--zh) !important;
}
#panel-social .soc-pick-preis,
#panel-social .soc-pick-ab{
font-size:15px !important;
padding:4px 8px !important;
}
#panel-social .soc-pick-preis{ width:78px !important }
/* Der runde Knopf „Bild ändern" sitzt als Eckmarke auf dem Vorschaubild und
ist im Modul 22 px groß. Die 44-px-Regel blies ihn auf vier Fünftel des
Bildes auf — man sah den Artikel nicht mehr, sondern nur die Eckmarke.
Er bleibt jetzt eine kleine Marke, behält aber über den durchsichtigen
Rand die volle Antippfläche und rückt aus dem Bild heraus. */
#panel-social .soc-pick-row button[style*="border-radius:50%"]{
width:var(--tap-min) !important;
height:var(--tap-min) !important;
border:10px solid transparent !important;
background-clip:padding-box !important;
background-color:#fff !important;
box-shadow:inset 0 0 0 1px #d1d5db !important;
bottom:-13px !important;
right:-13px !important;
font-size:12px !important;
}
/* „45 Produkte" war mit 10 px kaum zu entziffern. */
#panel-social div[style*="font-size:10px"]{ font-size:12px !important }
/* ── T026 Katalog: ruhige Zeilen statt Formularteppich ─────────────────
*
* Der Katalog hielt für jeden der 45 Artikel ein Preisfeld und eine
* Uhrzeit-Auswahl gleichzeitig offen — im ganzen Reiter 469 Felder. Wer
* drei Artikel für den Tagespost auswählen wollte, suchte sie zwischen
* hundert Eingabefeldern.
*
* Die Hilfeschicht klappt die Felder ein und setzt eine ruhige Zeile davor,
* die den Wert im Klartext zeigt. Die Felder bleiben samt Werten im
* Dokument — das Fachmodul liest sie beim Absenden unverändert aus. Offen
* ist immer höchstens ein Artikel.
*/
#panel-social .kneu-kat-felder{ display:none !important }
#panel-social .kneu-kat-zeile.kneu-kat-offen .kneu-kat-felder{
display:flex !important;
margin-top:4px;
}
#panel-social .kneu-kat-zeile.kneu-kat-offen .kneu-kat-wert{ display:none }
#panel-social .kneu-kat-kurz{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-top:3px;
}
#panel-social .kneu-kat-wert{
font-size:13px;
font-weight:600;
color:var(--mut);
line-height:var(--zh);
}
/* Wie die Portions-Badges: schlank gezeichnet, in voller Größe antippbar.
Bei 45 Zeilen untereinander würde ein 44 px hoher Kasten die Liste sonst
zu einer Knopfwand machen. */
#panel-social .kneu-kat-btn{
min-height:var(--tap-min);
height:var(--tap-min);
padding:0 12px;
border:9px solid transparent;
background-clip:padding-box;
background-color:var(--karte);
box-shadow:inset 0 0 0 1.5px var(--gr);
border-radius:999px;
color:var(--gr);
font-size:13px;
font-weight:600;
line-height:1;
cursor:pointer;
}
#panel-social .kneu-kat-zeile.kneu-kat-offen .kneu-kat-btn{
background-color:var(--gr);
color:#fff;
}
/* Die Beitragsvorschau kürzte ihre Warenplättchen und den Freitext per
Inline-Stil (`max-width:140px`/`text-overflow:ellipsis`): aus „Cordon bleu
mit Pommes oder Kartoffelsalat" wurde „Cordon bleu mit Pommes oder Kart".
Die Module bleiben unberührt, deshalb werden die Inline-Stile hier über
ihre Signatur überschrieben – Umbruch statt Verschnitt. */
#panel-social span[style*="max-width:140px"]{
max-width:none !important;
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:anywhere;
}
#panel-social div[style*="font-style:italic"]{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
overflow-wrap:anywhere;
}
/* ── 17 Rückfrage vor folgenschweren Schritten ──────────────────────────
*
* Am Telefon ein Blatt am unteren Rand — dort, wo der Daumen ist. Ab 640 px
* eine Karte in der Mitte. Die verneinende Antwort steht links und trägt den
* Bedienfokus, damit ein zweiter Tipper aus Versehen nichts auslöst.
*/
.kneu-frage{
position:fixed;
inset:0;
z-index:9800;
display:flex;
align-items:flex-end;
justify-content:center;
background:rgba(15,42,30,.44);
padding:0;
}
.kneu-frage-blatt{
width:100%;
max-width:520px;
background:var(--karte);
border-radius:var(--r-l) var(--r-l) 0 0;
padding:18px var(--pad) calc(var(--pad) + 6px);
box-shadow:0 -8px 30px rgba(15,42,30,.28);
}
.kneu-frage-titel{
font-size:17px;
font-weight:600;
line-height:var(--zh);
color:var(--ink);
}
.kneu-frage-text{
margin-top:6px;
font-size:14px;
font-weight:400;
line-height:var(--zh);
color:var(--mut);
}
.kneu-frage-knoepfe{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px;
}
.kneu-frage-knoepfe button{
flex:1 1 140px;
min-height:var(--tap);
padding:0 16px;
border-radius:var(--r-m);
font-size:15px;
font-weight:600;
line-height:var(--zh);
cursor:pointer;
}
.kneu-frage-nein{
border:1.5px solid var(--line);
background:var(--karte);
color:var(--ink);
}
.kneu-frage-ja{
border:1.5px solid var(--gr);
background:var(--gr);
color:#fff;
}
.kneu-frage-nein:focus-visible,
.kneu-frage-ja:focus-visible{ outline:3px solid var(--gr); outline-offset:2px }
@media (min-width:640px){
.kneu-frage{ align-items:center; padding:var(--pad) }
.kneu-frage-blatt{ border-radius:var(--r-l); box-shadow:0 12px 40px rgba(15,42,30,.3) }
}
/* ── 18 Dunkles Farbschema ─────────────────────────────────────────── */
html[data-theme="dark"] .k-tabs{ background:var(--c-card); border-color:var(--c-border) }
html[data-theme="dark"] .k-filter-btn{ background:var(--c-card); border-color:var(--c-border); color:var(--c-text) }
html[data-theme="dark"] .k-filter-bar,
html[data-theme="dark"] .k-panel > .k-day-bar{ background:var(--c-bg) }
html[data-theme="dark"] .k-modal,
html[data-theme="dark"] .mb-dlg,
html[data-theme="dark"] .bk-dlg,
html[data-theme="dark"] .mb-ed,
html[data-theme="dark"] .kal-modal-card{ background:var(--c-card); color:var(--c-text) }
/* ── Rückmeldungen der Hilfeschicht ──────────────────────────────────── */
.kneu-melder{
position:fixed;
left:50%;
transform:translateX(-50%);
bottom:calc(12px + var(--sab));
z-index:9500;
display:flex;
flex-direction:column-reverse;
gap:8px;
width:min(560px, calc(100vw - 24px));
pointer-events:none;
}
.kneu-meld{
pointer-events:auto;
display:flex;
align-items:center;
gap:10px;
padding:10px 12px;
border-radius:var(--r-m);
background:#1f2937;
color:#fff;
font-size:14px;
line-height:1.35;
box-shadow:var(--schatten-2);
animation:kneuAuf .18s ease-out;
}
.kneu-meld-warn { background:#92400e }
.kneu-meld-fehler{ background:#991b1b }
.kneu-meld-txt{ flex:1; min-width:0 }
.kneu-meld-btn{
flex:0 0 auto;
min-height:var(--tap-min);
padding:8px 14px;
border-radius:999px;
border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.16);
color:#fff;
font-size:13px;
font-weight:600;
cursor:pointer;
}
.kneu-meld-zu{
flex:0 0 auto;
width:var(--tap-min);
height:var(--tap-min);
min-height:var(--tap-min);
border:none;
background:transparent;
color:#fff;
font-size:22px;
line-height:1;
cursor:pointer;
border-radius:999px;
}
.kneu-meld-aus{ opacity:0; transition:opacity .2s }
@keyframes kneuAuf{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
/* ── 13 Mittagstisch: Inhalte im neuen Entwurf ──────────────────────────
*
* Bis hierher wurde nur das Geruest ersetzt - der Panel-Inhalt behielt das
* Aussehen aus kiosk-base.css. Dieser Abschnitt gestaltet die Inhaltsklassen
* des Mittagstischs nach dem abgenommenen Entwurf.
*
* Leitgedanke: Kochbedarf und Sonderwuensche belegten zusammen rund 380 px,
* ohne dass eine einzige Bestellung sichtbar war. Beide werden auf je eine
* Zeile verdichtet, damit die Arbeitsliste sofort im Blick ist.
*
* Die Klassen kommen aus renderCookBar(), renderSonderwunschBar() und
* _renderOrderCard() in kiosk.html - dort wird nichts geaendert, der
* laufende Kiosk bleibt unberuehrt.
*/
#panel-mittag{ background:var(--flaeche) }
/* ── 13.1 Tagesleiste: alle sieben Tage auf einen Blick ─────────────────
*
* Als Rollstreifen waren nur drei der sieben Tage zu sehen - dass es
* ueberhaupt bis Sonntag geht, erfuhr man nur durch Schieben.
*
* Jetzt ein Raster mit gleich breiten Feldern: unter 430 px vier Spalten
* (zwei Zeilen), darueber alle sieben nebeneinander. Gleiche Breiten
* heisst auch, dass die Felder sauber untereinander stehen.
*/
#panel-mittag .k-day-bar{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:5px;
overflow:visible;
padding:8px 0 9px;
margin:0;
}
#panel-mittag .k-day-bar > *{
scroll-snap-align:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
min-height:var(--tap-min);
padding:0 8px;
border:1px solid var(--line);
border-radius:999px;
background:var(--karte);
color:var(--ink);
font-size:12.5px;
font-weight:600;
line-height:var(--zh);
white-space:nowrap;
box-shadow:none;
}
#panel-mittag .k-day-bar > *.active,
#panel-mittag .k-day-bar > *[aria-selected="true"]{
background:var(--gr);
border-color:var(--gr);
color:#fff;
}
/* Ab 430 px stehen alle sieben Tage nebeneinander - eine Zeile statt zwei
und trotzdem nichts versteckt. */
@media (min-width:430px){
#panel-mittag .k-day-bar{ grid-template-columns:repeat(7,1fr) }
}
@media (min-width:700px){
#panel-mittag .k-day-bar > *{ font-size:13.5px; padding:0 12px }
}
/* ── 13.2 Kochbedarf auf eine Zeile ─────────────────────────────────── */
#panel-mittag .k-cook{
background:var(--karte);
border:1px solid var(--line);
border-radius:var(--r-m);
box-shadow:var(--sh);
padding:0;
margin:0 0 var(--gap);
overflow:hidden;
}
/* Die Überschrift „Kochbedarf — über alle Status" kostete eine volle Zeile für
* eine Selbstverständlichkeit: links das Wort, rechts der Einklapp-Knopf, und
* dazwischen 200 px Leere. Zusammen 54 px Höhe für 18 px Text.
*
* Der Knopf sitzt jetzt als Eckmarke auf der Karte, die Überschrift entfällt —
* die Karte darunter sagt mit „15 Port. · Cordon bleu …" ohnehin deutlicher,
* worum es geht. Das spart die Zeile vollständig.
*/
#panel-mittag .k-cook{ position:relative }
#panel-mittag .k-cook-head{
position:absolute;
top:4px;
right:4px;
z-index:1;
display:flex;
align-items:center;
gap:0;
padding:0;
min-height:0;
border:0;
background:none;
}
#panel-mittag .k-cook-title{ display:none }
#panel-mittag .k-cook-actions{ padding:0 }
/* Nur noch das Zeichen: der Zustand ist am Pfeil ablesbar, das Wort
"Einklappen" kostete eine halbe Zeile Hoehe fuer keinen Gewinn. */
#panel-mittag .k-cook-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:var(--tap-min);
height:34px;
padding:0;
border:1px solid var(--line);
border-radius:var(--r-s);
background:var(--gr-t);
color:var(--mut);
font-size:0;
overflow:hidden;
}
#panel-mittag .k-cook-btn svg{ width:17px; height:17px; flex:0 0 auto }
#panel-mittag .k-cook-grid{
display:grid;
grid-template-columns:1fr;
gap:0;
padding:0;
}
#panel-mittag .k-cook-card{
display:grid;
grid-template-columns:auto 1fr;
align-items:center;
gap:12px;
padding:8px 12px;
border:0;
border-top:1px solid var(--line);
border-radius:0;
background:none;
box-shadow:none;
}
#panel-mittag .k-cook-grid > .k-cook-card:first-child{ border-top:0 }
/* Die Eckmarke zum Einklappen liegt über der ersten Karte; dort bleibt Platz
für sie frei, damit kein Text darunter verschwindet. */
#panel-mittag .k-cook-grid > .k-cook-card:first-child{ padding-right:52px }
/* Die Portionszahl ist die eigentliche Botschaft - sie bekommt eine Kachel. */
#panel-mittag .k-cook-n{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:52px;
padding:6px 8px;
border-radius:var(--r-s);
background:var(--gr-l);
color:var(--gr-d);
font-size:19px;
font-weight:600;
line-height:1.1;
}
#panel-mittag .k-cook-n::after{
content:'Port.';
font-size:9px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
opacity:.75;
}
#panel-mittag .k-cook-info{ min-width:0 }
#panel-mittag .k-cook-name{
font-size:14.5px;
font-weight:600;
color:var(--ink);
line-height:1.25;
overflow-wrap:anywhere;
}
#panel-mittag .k-cook-chips{
display:flex;
flex-wrap:wrap;
gap:4px 10px;
margin-top:2px;
}
/* Aus Chips wird eine ruhige Aufzaehlung - fuenf bunte Pillen fuer fuenf
Zahlen waren mehr Unruhe als Information. */
#panel-mittag .k-cook-chip{
display:inline-flex;
align-items:center;
gap:3px;
padding:0;
border:0;
border-radius:0;
background:none;
color:var(--mut);
font-size:12px;
font-weight:600;
white-space:nowrap;
}
#panel-mittag .k-cook-chip svg{ width:12px; height:12px }
#panel-mittag .k-cook-chip.b{ color:var(--blu) }
#panel-mittag .k-cook-chip.o{ color:var(--amb) }
#panel-mittag .k-cook-chip.g{ color:var(--gr) }
#panel-mittag .k-cook-foot{
padding:6px 12px;
border-top:1px solid var(--line);
background:var(--gr-t);
color:var(--mut);
font-size:11px;
line-height:var(--zh);
}
#panel-mittag .k-cook-foot b{ color:var(--ink) }
/* Bei einem einzigen Gericht wiederholt die Fusszeile nur, was die Kachel
und die Kennzahlen schon sagen - auf schmalen Geraeten faellt sie weg. */
@media (max-width:759px){
#panel-mittag .k-cook:has(.k-cook-card:only-child) .k-cook-foot{ display:none }
}
#panel-mittag .k-cook.collapsed .k-cook-grid,
#panel-mittag .k-cook.collapsed .k-cook-foot{ display:none }
/* ── 13.3 Sonderwünsche als einzeiliges Band ────────────────────────── */
#panel-mittag .k-sw-bar{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:10px;
width:100%;
min-height:var(--tap);
padding:8px 12px;
margin:0 0 var(--gap);
border:1px solid var(--amb-b);
border-radius:var(--r-m);
background:var(--amb-l);
box-shadow:none;
text-align:left;
cursor:pointer;
}
#panel-mittag .k-sw-n{
display:flex;
align-items:center;
justify-content:center;
min-width:30px;
height:30px;
padding:0 7px;
border-radius:999px;
background:var(--amb);
color:#fff;
font-size:14px;
font-weight:600;
}
#panel-mittag .k-sw-bar-txt{ min-width:0 }
#panel-mittag .k-sw-bar-t1{
display:flex;
align-items:center;
gap:6px;
color:var(--amb);
font-size:14.5px;
font-weight:600;
line-height:var(--zh);
}
#panel-mittag .k-sw-bar-t2{
display:block;
color:#8a5a1c;
font-size:11.5px;
font-weight:500;
line-height:var(--zh);
}
/* "Alle anzeigen" als eigener Knopf suggerierte eine zweite Handlung -
das ganze Band ist antippbar, deshalb genuegt ein Pfeil. */
#panel-mittag .k-sw-go{
display:flex;
align-items:center;
justify-content:center;
width:26px;
height:26px;
padding:0;
border:0;
border-radius:999px;
background:none;
color:var(--amb);
font-size:0;
overflow:hidden;
}
#panel-mittag .k-sw-go::after{
content:'›';
font-size:24px;
font-weight:600;
line-height:1;
}
/* ── 13.4 Filterleiste: alles sichtbar, nichts zum Schieben ─────────────
*
* Die sechs Filter sind zusammen 807 px breit. Als Rollstreifen sah man
* auf dem Handy nur zweieinhalb davon - dass es "Storniert" oder
* "Nachrichten" ueberhaupt gibt, erfuhr man nur durch Schieben.
*
* Jetzt brechen sie um. Damit die Zeilen nicht ausgefranst enden, wachsen
* die Chips auf die volle Breite (`flex:1 1 auto`) - jede Zeile schliesst
* links und rechts buendig ab. Kompaktere Chips halten den Zuwachs klein.
*/
#panel-mittag .k-filter-bar{
display:flex;
flex-wrap:wrap;
gap:3px;
overflow:visible;
padding:2px 0 9px;
margin:0;
border:0;
background:none;
}
/* Der Umschalter „Alle" trug einen Inline-Stil `margin-left:auto` und wurde
dadurch an den rechten Rand geschoben — er bekam eine dritte Zeile ganz
für sich allein, obwohl daneben Platz war. Er läuft jetzt einfach mit.
Sein Symbol entfällt wie bei den Filterchips: neben dem ausgeschriebenen
Wort sagt es nichts, kostet aber die Breite, die über eine dritte Zeile
entscheidet. Die Beschriftung setzt die Hilfeschicht — „Alle" stand sonst
zweimal nebeneinander (Filter und Umschalter). */
#panel-mittag #mt-toggle-wrap{ margin-left:0 !important }
#panel-mittag #mt-toggle-wrap svg{ display:none }
#panel-mittag #mt-toggle-wrap .k-btn{ padding:0 8px !important; font-size:12px !important }
#panel-mittag .k-filter-btn{
flex:0 1 auto;
display:inline-flex;
align-items:center;
justify-content:center;
gap:4px;
min-height:36px;
padding:0 7px;
border:1px solid var(--line);
border-radius:999px;
background:var(--karte);
color:var(--mut);
font-size:12px;
font-weight:600;
line-height:var(--zh);
white-space:nowrap;
}
/* Der Text war auf schmalen Geräten ausgeblendet - übrig blieb ein Symbol,
das niemand ohne Schulung deuten kann. Er bleibt jetzt immer stehen.
Umgekehrt sagt das Symbol neben dem ausgeschriebenen Wort nichts mehr
dazu: es kostete 19 px je Chip und faellt deshalb weg. Die Farbe des
Chips traegt die Unterscheidung weiter. */
#panel-mittag .k-filter-btn .k-filter-label{
display:inline !important;
font-size:12px;
}
#panel-mittag .k-filter-btn svg{ display:none }
/* Der Umschalter rechts gehoert nicht zu den Filtern und darf nicht
mitwachsen. */
#panel-mittag .k-filter-bar > span{ flex:0 0 auto }
#panel-mittag .k-filter-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-width:0;
height:auto;
padding:0;
border-radius:0;
background:none;
color:inherit;
font-size:12.5px;
font-weight:600;
opacity:.72;
}
#panel-mittag .k-filter-btn.active{
background:var(--gr);
border-color:var(--gr);
color:#fff;
}
#panel-mittag .k-filter-btn.active .k-filter-count{
background:none;
color:#fff;
opacity:.85;
}
/* Auf dem Handy waren es drei Zeilen (148 px). Zwei Dinge sagen dasselbe
doppelt und fliegen deshalb raus: das Symbol neben dem ausgeschriebenen
Wort und die Pille um den Zaehler. Die Farbe des Chips traegt die
Unterscheidung weiter, der Zaehler bleibt als Zahl stehen.
Ergebnis: zwei Zeilen statt drei, ab Tablet sogar eine. */
#panel-mittag .k-filter-btn[data-mt-filter="sonderwunsch"]{ color:var(--amb); border-color:var(--amb-b) }
#panel-mittag .k-filter-btn[data-mt-filter="sonderwunsch"].active{ background:var(--amb); border-color:var(--amb); color:#fff }
#panel-mittag .k-filter-btn[data-mt-filter="nachrichten"]{ color:var(--blu); border-color:var(--blu-b) }
#panel-mittag .k-filter-btn[data-mt-filter="nachrichten"].active{ background:var(--blu); border-color:var(--blu); color:#fff }
#panel-mittag .k-filter-btn[data-mt-filter="storniert"]{ color:var(--red); border-color:var(--red-b) }
#panel-mittag .k-filter-btn[data-mt-filter="storniert"].active{ background:var(--red); border-color:var(--red); color:#fff }
/* Auf dem Handy noch etwas enger - jedes Wort bleibt vollstaendig.
Enger als die Grundregel, sonst passen die acht Filter nicht in zwei
Zeilen und die Leiste frisst eine dritte, in der oft nur ein einzelner
Knopf steht. */
@media (max-width:699px){
#panel-mittag .k-filter-bar{ gap:2px }
#panel-mittag .k-filter-btn{ padding:0 5px }
}
/* ── 13.5 Gerichtsgruppe: Trennzeile statt Kasten ───────────────────── */
#panel-mittag .k-dish-group{
margin:0 0 var(--gap);
border:0;
background:none;
box-shadow:none;
}
#panel-mittag .k-dish-sep-row{
display:flex;
align-items:center;
gap:8px;
min-height:34px;
padding:0 2px 6px;
border:0;
background:none;
cursor:pointer;
}
#panel-mittag .k-dish-sep-arrow{
color:var(--mut);
font-size:10px;
transition:transform .18s;
}
#panel-mittag .k-dish-group.collapsed .k-dish-sep-arrow{ transform:rotate(-90deg) }
/* Keine Grossbuchstaben: Die Zeile traegt den Gerichtsnamen, und lange Namen
wie „Cordon bleu mit Pommes oder Kartoffelsalat" sind in Versalien deutlich
schwerer zu lesen. Die zurueckgenommene Farbe reicht als Abstufung. */
#panel-mittag .k-dish-sep-label{
flex:1;
min-width:0;
color:var(--mut);
font-size:11.5px;
font-weight:600;
letter-spacing:.02em;
line-height:var(--zh);
}
#panel-mittag .k-dish-sep-label span{ letter-spacing:0 }
#panel-mittag .k-dish-body{
display:flex !important;
flex-direction:column;
gap:8px;
}
/* ── 13.6 Bestellkarte ──────────────────────────────────────────────── */
#panel-mittag .k-order{
position:relative;
margin:0;
border:1px solid var(--line);
border-radius:var(--r-m);
background:var(--karte);
box-shadow:var(--sh);
overflow:hidden;
}
/* Statusstreifen links: der Zustand ist so schon vor dem Lesen erkennbar. */
#panel-mittag .k-order::before{
content:'';
position:absolute;
left:0; top:0; bottom:0;
width:4px;
background:var(--mut);
}
#panel-mittag .k-order.st-0::before{ background:var(--amb) }
#panel-mittag .k-order.st-1::before{ background:var(--gr) }
#panel-mittag .k-order.st-2::before{ background:var(--red) }
#panel-mittag .k-order.st-3::before{ background:#9fb3a8 }
#panel-mittag .k-order-hdr{
display:grid;
/* Die erste Spalte muss schrumpfen duerfen. Stand sie auf "auto", forderte
die Kennzeichenzeile ihre volle Breite, schob Preis und Menge nach rechts
und legte sie unter die Knoepfe. */
grid-template-columns:minmax(0,1fr) auto auto auto;
align-items:center;
column-gap:8px;
row-gap:5px;
padding:11px 12px 11px 16px;
min-height:var(--tap);
cursor:pointer;
}
/* Der Pfeil kostete Platz und Klarheit - die ganze Zeile ist antippbar. */
#panel-mittag .k-order-hdr .k-oc-arrow{ display:none }
#panel-mittag .k-order-hdr .k-oc-name{
grid-column:1 / 4;
grid-row:1;
min-width:0;
font-size:15.5px;
font-weight:600;
color:var(--ink);
line-height:var(--zh);
overflow-wrap:anywhere;
}
#panel-mittag .k-order-hdr .k-oc-r2{ display:contents }
#panel-mittag .k-order-hdr .k-oc-badges{
grid-column:1;
grid-row:2;
display:flex;
flex-wrap:wrap;
align-items:center;
gap:5px;
min-width:0;
white-space:normal;
}
#panel-mittag .k-order-hdr .k-oc-price{
grid-column:2;
grid-row:2;
min-width:0;
color:var(--mut);
font-size:12px;
font-weight:600;
text-align:left;
white-space:nowrap;
}
/* Die Menge ist beim Zusammenstellen die wichtigste Zahl der Zeile — sie
entscheidet, wie viele Portionen auf den Teller kommen. Sie stand bisher
klein und grau neben dem Preis. Jetzt trägt sie ein eigenes Feld in der
Hausfarbe und ist auf einen Blick zu erfassen. */
#panel-mittag .k-order-hdr .k-oc-qty{
grid-column:3;
grid-row:2;
justify-self:start;
min-width:0 !important;
display:inline-flex;
align-items:center;
padding:1px 9px;
border-radius:999px;
background:var(--gr-l);
color:var(--gr-d);
font-size:14px;
font-weight:600;
font-variant-numeric:tabular-nums;
white-space:nowrap;
}
/* Der Trennpunkt entfällt: Das Feld grenzt sich selbst ab. */
#panel-mittag .k-order-hdr .k-oc-qty::before{ content:none }
#panel-mittag .k-order-hdr .k-oc-actions{
grid-column:4;
grid-row:1 / 3;
display:flex;
align-items:center;
gap:8px;
margin:0;
}
/* Kennzeichen ruhig und einheitlich - vorher sechs Formen nebeneinander.
Die Schrift bleibt bei 11 px: Darunter sind „Online", „Telefon" und
„Bestätigt" in Grossbuchstaben in Eile nicht mehr sicher zu unterscheiden,
und der bestehende Test kiosk.spec.js prueft genau diese Untergrenze. */
#panel-mittag .k-order-src,
#panel-mittag .k-order-st,
#panel-mittag .k-order-mitnehmen{
display:inline-flex;
align-items:center;
gap:3px;
padding:2px 8px;
border:1px solid transparent;
border-radius:999px;
font-size:11px;
font-weight:600;
letter-spacing:.02em;
text-transform:uppercase;
white-space:nowrap;
}
#panel-mittag .k-order-st{ background:var(--gr-l); border-color:#cfe6d9; color:var(--gr-d) }
#panel-mittag .k-order-st.stx-neu{ background:var(--amb-l); border-color:var(--amb-b); color:var(--amb) }
#panel-mittag .k-order-st.stx-storno{ background:var(--red-l); border-color:var(--red-b); color:var(--red) }
#panel-mittag .k-order-src{ background:var(--gr-t); border-color:var(--line); color:var(--mut) }
#panel-mittag .k-order-src.src-telefon,
#panel-mittag .k-order-src.src-vorort{ background:var(--amb-l); border-color:var(--amb-b); color:var(--amb) }
#panel-mittag .k-order-mitnehmen{ background:var(--blu-l); border-color:var(--blu-b); color:var(--blu) }
/* Bedienflächen: im Entwurf grosse, eindeutig getrennte Ziele. */
#panel-mittag .k-oc-actions .k-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:6px;
min-width:var(--tap);
min-height:var(--tap);
padding:0 12px;
border-radius:var(--r-s);
font-size:13px;
font-weight:600;
}
#panel-mittag .k-oc-actions .k-btn-confirm{ background:var(--gr); border-color:var(--gr); color:#fff }
#panel-mittag .k-oc-actions .k-btn-pickup{ background:var(--gr); border-color:var(--gr); color:#fff }
#panel-mittag .k-oc-actions .k-btn-cancel{ background:var(--red-l); border:1px solid var(--red-b); color:var(--red) }
#panel-mittag .k-oc-actions .k-btn svg{ width:19px; height:19px }
/* Unter 400 px reicht der Platz nicht fuer Symbol und Wort nebeneinander.
Das Symbol allein ist bei diesen drei Handlungen eindeutig. */
@media (max-width:399px){
#panel-mittag .k-oc-actions .oc-btn-label{ display:none }
#panel-mittag .k-oc-actions .k-btn{ padding:0 }
}
#panel-mittag .k-order-body{
padding:0 12px 12px 16px;
border-top:1px solid var(--line);
}
#panel-mittag .k-order-note{
margin-top:8px;
padding:8px 10px;
border-radius:var(--r-s);
font-size:12.5px;
line-height:var(--zh);
}
/* ── 13.7 Leermeldung ───────────────────────────────────────────────── */
#panel-mittag .k-empty{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
padding:28px 16px;
border:1px dashed var(--line);
border-radius:var(--r-m);
background:var(--karte);
color:var(--mut);
font-size:13.5px;
}
#panel-mittag .k-empty-icon{ color:#b9cdc2 }
/* ── 13.8 Niedrige Bildschirme: Rahmen verdichten ───────────────────────
*
* Gemessen auf 320 x 568 px: Hinweis, Kopfzeile, Tagesleiste, Kochbedarf,
* Sonderwuensche, Filter und Gruppenzeile belegten zusammen 471 px - fuer
* Bestellungen blieb nichts uebrig. Hier wird jeder Baustein gekuerzt,
* ohne dass eine Bedienmoeglichkeit wegfaellt.
*
* Die Eckmarke fuer den Einklapp-Knopf gilt inzwischen ueberall (13.4) und
* steht deshalb nicht mehr hier. Auf flachen Schirmen faellt zusaetzlich die
* Fusszeile der Kochbedarfs-Karte weg.
*
* Die Schranke liegt bei 820 px Hoehe, damit auch das quer gehaltene
* Tablet (1024 x 768) und der Buero-Bildschirm (1280 x 800) profitieren -
* dort ist die Hoehe knapp, nicht die Breite.
*/
@media (max-height:820px){
#panel-mittag .k-cook-card{ padding:9px 12px }
#panel-mittag .k-cook-grid > .k-cook-card:first-child{ padding-right:52px }
#panel-mittag .k-cook-foot{ display:none }
#panel-mittag .k-day-bar{ padding:6px 0 8px }
#panel-mittag .k-day-bar > *{ min-height:var(--tap-min) }
#panel-mittag .k-sw-bar{ min-height:var(--tap-min); padding:6px 12px }
#panel-mittag .k-sw-bar-t1{ font-size:13.5px; display:block }
#panel-mittag .k-sw-bar-t2{ font-size:11px }
/* Die Verdichtung der Filterleiste steht in 13.10 - dort, wo auch ihre
Fixierung und ihr deckender Grund gesetzt werden. */
/* Die Gruppenzeile wiederholt den Gerichtsnamen, der zwei Zeilen darueber
schon steht - auf niedrigen Schirmen bleibt sie deshalb knapp. */
#panel-mittag .k-dish-sep-row{ min-height:0; padding:0 2px 5px }
}
/* Ganz kleine Schirme (iPhone SE): der Hinweisstreifen gehoert nur zur
* Testseite und darf dort dem Inhalt weichen. */
@media (max-height:600px){
.k-umbau-hinweis{ display:none }
#panel-mittag .k-day-bar{ padding:4px 0 6px }
#panel-mittag .k-filter-bar > *{ min-height:var(--tap-min) }
}
/* ── 13.9 Ab Tablet: zwei Spalten, damit die Breite genutzt wird ────── */
@media (min-width:760px){
#panel-mittag .k-cook-grid{ grid-template-columns:1fr 1fr }
#panel-mittag .k-cook-card{ border-top:1px solid var(--line) }
#panel-mittag .k-cook-grid > .k-cook-card:nth-child(2){ border-top:0 }
#panel-mittag .k-cook-grid > .k-cook-card:nth-child(2n){ border-left:1px solid var(--line) }
#panel-mittag .k-dish-body{
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(330px, 1fr));
gap:10px;
}
}
/* ── 13.10 Beim Scrollen bleibt nur die Filterleiste stehen ─────────────
*
* Vorher klebten Tagesleiste und Filterleiste gleichzeitig - die eine bei
* top:-12px, die andere bei top:0. Die Filterleiste rastete damit mitten in
* der Tagesleiste ein, beide lagen sichtbar uebereinander. Der Ausgleich
* (`top:var(--mt-daybar)`) steht in kiosk-base.css hinter
* @media(min-width:900px) und griff auf dem Handy nie.
*
* Gemessen bei 360 px: Tagesleiste 111 px + Filterleiste 102 px = 213 px
* fester Kopf bei 844 px Schirmhoehe. Ein Viertel des Bildschirms nur fuer
* den Kopf ist zu viel.
*
* Deshalb klebt jetzt nur noch die Filterleiste - sie traegt die Zaehler,
* die immer sichtbar bleiben muessen. Die Tagesleiste scrollt mit. Der
* gewaehlte Tag geht dabei nicht verloren: kiosk-neu-shell.js setzt ihn als
* erstes Feld in die Filterleiste, und ein Antippen holt die Tagesleiste
* zurueck nach oben.
*/
#panel-mittag > #mittag-day-bar,
#panel-mittag > #mittag-stats{ position:static }
/* Die Leiste muss ueber die Reiterpolsterung hinausreichen und deckend sein,
sonst scrollt die Liste an den Seiten daran vorbei.
`top` ist negativ, nicht 0: Der Bezugsrahmen fuer `top` beginnt am
Innenrand des Rollbereichs, also unterhalb der 12 px Polsterung des
Reiters. Mit `top:0` rastete die Leiste 12 px zu tief ein und die Liste
lief durch den Spalt darueber sichtbar vorbei. Nur der gestockte Zustand
verschiebt sich dadurch - im normalen Fluss aendert `top` nichts. */
#panel-mittag > .k-filter-bar{
position:sticky;
top:calc(var(--pad) * -1);
z-index:20;
background:var(--c-bg);
margin:0 calc(var(--pad) * -1);
padding:6px var(--pad) 9px;
border-bottom:1px solid var(--line);
}
/* Der gewaehlte Tag als erstes Feld der Leiste. Bewusst anders gezeichnet als
die Filter: heller Grund mit gruener Kante, damit er nicht wie ein
ausgewaehlter Filter aussieht. */
#panel-mittag .k-tag-jetzt{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:5px;
min-height:36px;
padding:0 10px;
border:1px solid var(--gr);
border-radius:999px;
background:var(--karte);
color:var(--gr);
font-size:12.5px;
font-weight:600;
line-height:var(--zh);
white-space:nowrap;
cursor:pointer;
}
#panel-mittag .k-tag-jetzt:active{ background:var(--gr); color:#fff }
/* Solange die Tagesleiste selbst im Bild ist, sagt das Feld nichts Neues und
nimmt der Filterleiste die Breite, die über eine dritte Zeile entscheidet.
Die Hilfeschicht setzt diese Kennzeichnung beim Scrollen. */
#panel-mittag .k-tag-jetzt.k-tag-jetzt-aus{ display:none }
/* Niedrige Schirme: senkrecht verdichten, aber die seitliche Polsterung
behalten - sie traegt den deckenden Grund bis an den Rand. */
@media (max-height:820px){
#panel-mittag > .k-filter-bar{ padding:4px var(--pad) 8px }
}
@media (max-height:600px){
#panel-mittag > .k-filter-bar{ padding:3px var(--pad) 6px }
}
/* ══════════════════════════════════════════════════════════════════════
* 14 BAECKER
*
* Ausgangslage, gemessen auf 390 x 844 px mit echten Daten:
* - Der feste Kopf belegte 645 px bei 700 px Sichtflaeche. Bevor eine
* einzige Artikelzeile erschien, war der Bildschirm voll.
* - Jede Artikelzeile brach unter 900 px auf zwei Zeilen um und kostete
* 85 px - bei 34 Artikeln allein 2890 px.
* - Gesamte Scrolltiefe: 5,9 Bildschirme.
*
* Alle Regeln sind mit #panel-baecker praefixiert und gelten nur auf der
* Umbau-Seite. Es faellt keine Bedienmoeglichkeit weg - die Bausteine
* werden verdichtet, nicht entfernt.
* ═════════════════════════════════════════════════════════════════════ */
/* ── 14.1 Fettschrift: die Regel gilt auch hier ─────────────────────── */
#panel-baecker .bk-day.faellig .st{ font-weight:600 }
/* ── 14.2 Fester Kopf: von 645 px auf gut ein Drittel ───────────────── */
#panel-baecker .bk-sticky{
background:var(--flaeche);
padding-top:2px;
}
/* Filterreiter (Freundl / Martins / …) */
#panel-baecker .k-filter-bar.bk-sub{
padding:0 0 7px;
gap:7px;
}
/* Die Beschriftung "Liefertag" wiederholt, was die Chips selbst zeigen. */
#panel-baecker .bk-days-lbl{
padding:0 2px 3px;
font-size:10.5px;
letter-spacing:.4px;
color:var(--mut);
}
/* ── 14.3 Tagesleiste: alle sieben Liefertage auf einen Blick ───────────
*
* Als Rollstreifen (656 px Inhalt) waren auf dem Handy nur drei bis vier
* der sieben Tage zu sehen - dass es ueberhaupt weitergeht, erfuhr man
* nur durch Schieben. Wie bei der Mittag-Tagesleiste jetzt ein Raster:
* unter 560 px vier Spalten (zwei Zeilen), darueber alle sieben.
*
* Die Grenze liegt hier hoeher als bei Mittag (430 px), weil jeder Tag
* zusaetzlich eine Statuszeile traegt ("keine Lieferung", "heute
* bestellen"). Bei sieben Spalten auf 430 px blieben davon 57 px - zu
* wenig, ohne wieder zu kappen.
*/
#panel-baecker .bk-days{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:6px;
overflow:visible;
padding:0 0 8px;
margin-bottom:8px;
border-bottom:1px solid var(--line);
}
#panel-baecker .bk-day{
min-width:0;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-height:48px;
padding:6px 7px;
border-radius:var(--r-m);
border:1px solid var(--line);
background:var(--karte);
color:var(--ink);
font-size:13px;
font-weight:600;
line-height:1.15;
/* Der Statustext darf umbrechen statt zu verschwinden. */
white-space:normal;
overflow-wrap:break-word;
text-align:center;
}
/* Wochentag und Datum in eine Zeile - spart pro Chip eine Textzeile. */
#panel-baecker .bk-day .d{
display:inline;
margin:0 0 0 5px;
font-size:12px;
font-weight:500;
color:var(--mut);
}
#panel-baecker .bk-day .st{
margin-top:2px;
font-size:10.5px;
letter-spacing:.2px;
}
@media (min-width:560px){
#panel-baecker .bk-days{ grid-template-columns:repeat(7,1fr) }
#panel-baecker .bk-day{ padding:6px 9px }
}
#panel-baecker .bk-day.active{
background:var(--gr);
border-color:var(--gr);
color:#fff;
}
#panel-baecker .bk-day.active .d{ color:rgba(255,255,255,.85) }
#panel-baecker .bk-day.faellig:not(.active){
background:var(--bk-bg);
border-color:var(--bk-line);
color:var(--bk-dark);
}
#panel-baecker .bk-day.faellig.active{
box-shadow:0 0 0 2px var(--bk-line);
}
/* ── 14.4 Hinweiszeilen: je eine Zeile, nicht mehr ──────────────────── */
#panel-baecker .bk-offen,
#panel-baecker .bk-test{
min-height:0;
padding:6px 11px;
margin-bottom:8px;
border-radius:var(--r-m);
font-size:12px;
line-height:1.25;
}
/* Hinweiszeilen duerfen umbrechen. Einzeilig gekappt wurde aus
"Bestellung fuer Mittwoch (Baeckerei Freundl) noch offen" schnell
"Bestellung fuer Mittwoch (Baeck..." - genau die Angabe, auf die es
ankommt, fiel weg.
Als Flexbehaelter machte `.bk-test` aus dem Testbetrieb ein
eigenes Flex-Element, das schrumpfen durfte - heraus kam der Umbruch
mitten im Wort ("Testbet / rieb"). Als Block fliesst der Text normal
und bricht nur an Wortgrenzen. */
#panel-baecker .bk-test{
display:block;
}
#panel-baecker .bk-test svg{
display:inline-block;
vertical-align:-2px;
margin-right:5px;
}
#panel-baecker .bk-offen > span,
#panel-baecker .bk-test > *:not(svg){
min-width:0;
overflow-wrap:break-word;
}
#panel-baecker .bk-test b{ font-weight:600 }
#panel-baecker .bk-sortnote{
padding:0 2px 5px;
font-size:11px;
}
#panel-baecker .bk-sticky .bk-sortnote{ padding-bottom:6px }
/* ── 14.5 Statusblock: Text vollstaendig, Knopf gut erreichbar ──────────
*
* Vorher 174 px, weil `.txt{flex:1 1 240px}` unter 390 px umbrach und
* Symbol, Text und Knopf uebereinander stapelte.
*
* Der erste Umbau presste alles in eine Zeile und schnitt den Text ab -
* "Lieferung am M..." war unbrauchbar. Jetzt bleibt der Text vollstaendig;
* auf dem Handy ruecken Symbol und Text in die erste Zeile, der
* Sendeknopf ueber die volle Breite darunter.
*/
#panel-baecker .bk-stat{
flex-wrap:nowrap;
gap:10px;
padding:9px 12px;
margin-bottom:9px;
border-radius:var(--r-m);
}
#panel-baecker .bk-stat .ico{
width:38px; height:38px;
border-radius:10px;
}
#panel-baecker .bk-stat .txt{
flex:1 1 auto;
min-width:0;
}
#panel-baecker .bk-stat .t1{
font-size:14px;
font-weight:600;
line-height:1.25;
}
#panel-baecker .bk-stat .t2{
margin-top:1px;
font-size:11.5px;
line-height:1.3;
}
#panel-baecker .bk-cta{
flex:0 0 auto;
min-height:44px;
padding:0 14px;
border-radius:10px;
font-size:13.5px;
}
#panel-baecker .bk-cta-note{
padding:7px 11px;
font-size:11.5px;
}
/* Auf dem Handy bleiben neben dem Sendeknopf nur rund 120 px fuer den
Text - "Lieferung am Mittwoch, 10.09.2026" wurde dort zu
"Lieferung am M..." verstuemmelt. Deshalb bekommt der Knopf hier eine
eigene Zeile und der Text die volle Breite. Etwas hoeher, dafuer
lesbar - und der Knopf ist als Hauptaktion leichter zu treffen. */
@media (max-width:699px){
#panel-baecker .bk-stat{
display:grid;
grid-template-columns:auto minmax(0,1fr);
align-items:center;
row-gap:9px;
}
#panel-baecker .bk-stat .bk-cta{
grid-column:1 / -1;
width:100%;
justify-content:center;
}
}
/* ── 14.6 Werkzeugleiste: alles sichtbar, ohne Rollen ───────────────────
*
* Erster Versuch war ein waagerechter Rollstreifen. Der spart zwar Platz,
* verbirgt aber, was noch kommt - man muss schieben, um es zu erfahren.
*
* Jetzt passt alles in eine Zeile:
* - Die beiden Umschalter bilden ein zusammenhaengendes Segment
* (ein Rahmen statt zwei, kein Zwischenraum). Das spart nicht nur
* Breite, es zeigt auch, dass genau eine der beiden Ansichten gilt.
* - Der entbehrliche Teil der Beschriftung steckt in .kn-lang
* (siehe kiosk-neu-shell.js) und faellt unter 700 px weg:
* "Uebliche | Alle 60" und "Zuruecksetzen" bleiben voll lesbar.
* Keine Bedienung wird ausgeblendet, nichts muss gescrollt werden.
*/
#panel-baecker .bk-tools{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:6px;
margin-bottom:8px;
}
#panel-baecker .bk-tools .sp{ flex:1 1 auto; min-width:0 }
#panel-baecker .bk-btn{
min-height:44px;
padding:0 11px;
border-radius:10px;
font-size:12.5px;
gap:5px;
white-space:nowrap;
}
#panel-baecker .bk-btn.on{
background:var(--bk);
border-color:var(--bk);
}
#panel-baecker .bk-btn .c{
padding:1px 6px;
font-size:10.5px;
}
/* Segment: zwei Knoepfe, ein Block - spart Rahmen und Zwischenraum und
zeigt, dass genau eine der beiden Ansichten gilt. */
#panel-baecker .bk-tools .kn-seg-a{
border-top-right-radius:0;
border-bottom-right-radius:0;
}
#panel-baecker .bk-tools .kn-seg-b{
border-top-left-radius:0;
border-bottom-left-radius:0;
margin-left:-7px;
}
#panel-baecker .bk-tools .kn-seg.on{ position:relative; z-index:1 }
@media (max-width:699px){
#panel-baecker .bk-tools .sp{ display:none }
#panel-baecker .bk-tools .bk-btn{ padding:0 9px }
/* Passt nicht alles in eine Zeile, bekommt der selten gebrauchte
Ruecksetz-Knopf die zweite - lieber eine Zeile mehr als ein
abgeschnittenes Wort. */
#panel-baecker .bk-tools .kn-seg-b{ margin-right:auto }
#panel-baecker .bk-test{
font-size:11.5px;
line-height:1.2;
padding:5px 10px;
}
}
/* ── 14.7 Gruppenzeile ──────────────────────────────────────────────── */
#panel-baecker .bk-grp{
min-height:0;
margin:9px 0 5px;
padding:5px 11px;
border-radius:var(--r-m);
font-size:12.5px;
}
#panel-baecker .bk-grp .n{ font-size:10.5px; padding:1px 8px }
/* ── 14.8 Artikelzeile: wieder einzeilig ────────────────────────────────
*
* Das Grundblatt stellt unter 900 px auf zwei Reihen um
* ("nr nm" / "hist step") - 85 px je Artikel. Hier bleibt der Schrittzaehler
* rechts stehen und ueberspannt beide Textzeilen: 85 px werden zu 56 px.
* Bei 34 Artikeln sind das rund 1000 px weniger Scrollweg.
*/
#panel-baecker .bk-row{
grid-template-columns:38px minmax(0,1fr) auto;
grid-template-areas:
"nr nm step"
"nr hist step";
align-items:center;
gap:0 8px;
padding:5px 9px;
margin-bottom:5px;
border-radius:var(--r-m);
border-left-width:4px;
}
#panel-baecker .bk-row .nr { grid-area:nr; align-self:center }
#panel-baecker .bk-row .nm { grid-area:nm; align-self:end }
#panel-baecker .bk-row .hist{ grid-area:hist; align-self:start }
#panel-baecker .bk-row .step{ grid-area:step; align-self:center; justify-self:end }
/* Ohne Verlaufszeile soll der Name senkrecht mittig stehen. */
#panel-baecker .bk-row:not(:has(.hist)) .nm{
grid-row:1 / span 2;
align-self:center;
}
#panel-baecker .bk-row .nr{
padding:3px 0;
font-size:10.5px;
border-radius:6px;
}
#panel-baecker .bk-row .nm{
font-size:13.5px;
line-height:1.25;
overflow-wrap:anywhere;
}
#panel-baecker .bk-row .hist{
gap:3px;
font-size:11px;
line-height:1.2;
overflow:hidden;
}
#panel-baecker .bk-row .hist .v{ padding:1px 6px }
#panel-baecker .bk-row .step{ gap:3px }
#panel-baecker .bk-row .step button{
width:40px; height:44px;
border-radius:10px;
font-size:18px;
}
#panel-baecker .bk-row .step input{
width:48px; height:44px;
border-radius:10px;
font-size:15.5px;
}
/* ── 14.9 Neue Zeile und Fussleiste ──────────────────────────────────────
*
* Die Fussleiste rastete am Innenrand des Reiters ein, nicht an dessen
* Unterkante. Durch den Streifen darunter (der untere Innenabstand des
* Reiters) schienen Artikelzeilen hindurch. Der negative `bottom`-Wert
* schiebt sie bis zur Kante; der gleich grosse zusaetzliche Innenabstand
* haelt die Knoepfe dabei an ihrem Platz.
*
* Statt Flexumbruch (Summe, dann "Entwurf speichern" rechts, dann
* "An Baeckerei senden" ueber die volle Breite - drei ungleiche Zeilen)
* jetzt ein Raster: Summe oben, darunter beide Knoepfe gleich breit
* nebeneinander. Ab Tablet steht alles in einer Zeile.
*/
#panel-baecker .bk-addrow{
min-height:44px;
margin:8px 0 2px;
border-radius:var(--r-m);
font-size:13px;
}
#panel-baecker .bk-foot{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:7px 8px;
bottom:calc((var(--pad) + 8px) * -1);
margin:10px calc(var(--pad) * -1) calc((var(--pad) + 8px) * -1);
padding:9px var(--pad) calc(9px + var(--pad) + 8px);
background:var(--flaeche);
border-top:1px solid var(--line);
box-shadow:0 -7px 12px -9px rgba(15,42,30,.45);
}
#panel-baecker .bk-foot .sum{
grid-column:1 / -1;
font-size:12.5px;
}
#panel-baecker .bk-foot .sum b{ font-size:14px; font-weight:600 }
#panel-baecker .bk-foot .bk-autosave{ grid-column:1 / -1 }
#panel-baecker .bk-foot .bk-autosave:empty{ display:none }
#panel-baecker .bk-foot .sp{ display:none }
#panel-baecker .bk-foot .bk-btn,
#panel-baecker .bk-foot .bk-send{
width:100%;
justify-content:center;
}
#panel-baecker .bk-send{
min-height:48px;
padding:0 14px;
border-radius:var(--r-m);
font-size:14.5px;
}
@media (min-width:700px){
#panel-baecker .bk-foot{ grid-template-columns:minmax(0,1fr) auto auto auto }
#panel-baecker .bk-foot .sum,
#panel-baecker .bk-foot .bk-autosave{ grid-column:auto }
#panel-baecker .bk-foot .bk-btn,
#panel-baecker .bk-foot .bk-send{ width:auto }
#panel-baecker .bk-send{ padding:0 20px }
}
/* ── 14.10 Breitere Schirme: frueher zwei und drei Spalten ──────────────
*
* Das Grundblatt schaltet erst bei 1080 px auf zwei Spalten. Auf dem
* iPad mini (744 px) und dem Galaxy Tab S2 (768 px) blieb die Liste
* einspaltig und damit unnoetig lang.
*
* Massgeblich ist die Breite des Reiters, nicht die des Fensters: die
* Reiterleiste nimmt links 84 bis 252 px weg. Die Grenzen sind so
* gewaehlt, dass jede Spalte 300 bis 400 px breit bleibt – schmaler
* quetscht sie den Artikelnamen, breiter verschenkt sie Flaeche.
*/
@container liste (min-width:600px){
#panel-baecker .bk-grid{ grid-template-columns:1fr 1fr; gap:0 10px }
}
@container liste (min-width:940px){
#panel-baecker .bk-grid{ grid-template-columns:1fr 1fr 1fr }
}
@container liste (min-width:1300px){
#panel-baecker .bk-grid{ grid-template-columns:repeat(4,1fr) }
}
/* Ab Tablet passt der Statusblock wieder in eine Zeile. */
/* ── 14.11 Liefertag zuerst, und er bleibt stehen ───────────────────────
*
* Das Grundblatt fixiert den Kopf erst ab 900 px Breite - mit gutem Grund:
* mit 645 px haette er auf dem Handy die halbe Liste verdeckt.
*
* Nach dem Arbeitsablauf gehoert der Liefertag nach oben: Er ist das
* Hauptmerkmal, nach dem ausgewaehlt wird, danach erst die Baeckerei. Beide
* muessen ausserdem stehen bleiben, damit man sich beim 30. Artikel nicht
* verirrt.
*
* Beides zusammen geht nur, wenn sie ein gemeinsamer Block sind. Den legt
* `baeckerKopfOrdnen()` in js/kiosk-neu-shell.js an - das Fachmodul bleibt
* unberuehrt. Hier bleibt dieser Block oben stehen, waehrend Statuskarte,
* Hinweise und Werkzeuge darunter wegscrollen.
*/
#panel-baecker .bk-sticky{
position:static;
/* Ohne Klebewirkung braucht die Huelle auch keine eigene Ebene mehr.
Blieb sie auf 20, zeichnete der weggescrollte Inhalt ueber die
Kopfleiste hinweg. */
z-index:auto;
display:flex;
flex-direction:column;
margin:0 calc(var(--pad) * -1);
padding:0 var(--pad);
background:none;
box-shadow:none;
}
#panel-baecker .kneu-bk-fest{
position:sticky;
/* Der Reiter hat oben einen Rand von --pad. Eine klebende Leiste bleibt
jedoch am *Inhaltsrand* stehen, also --pad unterhalb der Panelkante.
In diesem Streifen zog der weggescrollte Inhalt sichtbar vorbei.
Deshalb: negativer Haltepunkt (Leiste haelt an der Panelkante) und der
Rand wandert als Innenabstand in die Leiste - so bleibt das Bild in
Ruhe unveraendert und die Leiste springt beim Anscrollen nicht. */
top:calc(var(--pad) * -1);
/* Ueber allem, was im Reiter darunter durchlaeuft (Werkzeugleiste 10,
Alt-Huelle 20) - aber unter der Fussleiste (25). */
z-index:22;
margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 0;
padding:calc(var(--pad) + 2px) var(--pad) 4px;
background:var(--flaeche);
box-shadow:0 7px 10px -9px rgba(15,42,30,.45);
}
/* Die Baeckereiauswahl steht unter dem Liefertag - erst wann, dann wer.
Sie war ein waagerechter Rollstreifen mit fester Zeile: Zwei Knoepfe zu
je 148 px passten nicht in 317 px, der zweite Name war angeschnitten und
eine Bildlaufleiste fraß zwei Pixel Hoehe. Jetzt bricht die Zeile um und
die Namen stehen vollstaendig. */
#panel-baecker .kneu-bk-fest > .bk-btabs{
display:flex;
flex-wrap:wrap;
overflow:visible;
gap:6px;
margin:4px 0 0;
}
#panel-baecker .kneu-bk-fest > .bk-btabs > button{
flex:1 1 auto;
min-width:0;
white-space:normal;
overflow:visible;
text-overflow:clip;
}
#panel-baecker .kneu-bk-fest > .bk-btabs > button *{
white-space:normal !important;
overflow:visible !important;
text-overflow:clip !important;
max-width:none !important;
}
#panel-baecker .kneu-bk-fest > .bk-days{ margin-bottom:0 }
/* ══════════════════════════════════════════════════════════════════
Hinweis zur Bestellung — Knopf und Textgestalter
(Spec bestell-freitext, F1/F6)
Der Knopf sitzt in der Fußleiste des Metzger-Reiters und bei der
gewählten Bäckerei. Er sieht ruhig aus, solange kein Hinweis erfasst
ist, und wird hervorgehoben, sobald einer da ist — sonst müsste man
ihn öffnen, um zu wissen, ob etwas drinsteht.
══════════════════════════════════════════════════════════════════ */
.kn-knopf{
min-height:var(--tap-min, 44px);
display:inline-flex;
align-items:center;
gap:8px;
max-width:100%;
padding:6px 14px;
border:1.5px dashed var(--c-border, #d5dbe3);
border-radius:10px;
background:#fff;
color:var(--c-text, #1f2937);
font-size:13px;
font-weight:600;
cursor:pointer;
text-align:left;
}
.kn-knopf:hover{ border-color:var(--gr, #2e7d4f); color:var(--gr, #2e7d4f) }
/* Mit Hinweis: durchgezogener Rahmen in der Hausfarbe - der gestrichelte
Rahmen heißt im Kiosk durchgehend „hier ist noch nichts". */
.kn-knopf.hat{
border-style:solid;
border-color:var(--gr, #2e7d4f);
background:#eef6f1;
color:#1d5c3a;
}
.kn-knopf .kn-vorschau{
font-weight:400;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0;
}
.kn-modal{ max-width:620px }
.kn-erklaerung{
margin:0 0 12px;
font-size:13px;
color:var(--c-muted, #6b7280);
}
.kn-leiste{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-bottom:8px;
}
.kn-werkzeug{
min-height:var(--tap-min, 44px);
min-width:var(--tap-min, 44px);
padding:6px 14px;
border:1.5px solid var(--c-border, #d5dbe3);
border-radius:9px;
background:#fff;
color:var(--c-text, #1f2937);
font-size:13px;
cursor:pointer;
}
.kn-werkzeug:hover{ border-color:var(--gr, #2e7d4f); color:var(--gr, #2e7d4f) }
/* Das Feld wächst mit dem Text, bleibt aber im Dialog: Auf dem Telefon
ist wenig Platz, ein davonlaufendes Feld würde die beiden Knöpfe unter
den Bildschirmrand schieben. */
.kn-feld{
min-height:132px;
max-height:44vh;
overflow-y:auto;
padding:12px 14px;
border:1.5px solid var(--c-border, #d5dbe3);
border-radius:12px;
background:#fff;
font-size:15px;
line-height:1.5;
color:var(--c-text, #1f2937);
}
.kn-feld:focus{ outline:2px solid var(--gr, #2e7d4f); outline-offset:1px }
.kn-feld[contenteditable="false"]{ background:#f7f8fa }
.kn-feld p{ margin:0 0 8px }
.kn-feld p:last-child{ margin-bottom:0 }
.kn-feld ul{ margin:0 0 8px; padding-left:22px }
.kn-feld b, .kn-feld strong{ font-weight:600 }
.kn-zaehler{
margin-top:8px;
font-size:12px;
color:var(--c-muted, #6b7280);
}
.kn-zaehler.knapp{ color:#b45309 }
.kn-zaehler.voll{ color:#b91c1c; font-weight:600 }
.kn-modal .k-modal-footer{ justify-content:flex-end }
.kn-modal .k-modal-footer .k-btn{ min-height:var(--tap-min, 44px) }
html[data-theme="dark"] .kn-knopf,
html[data-theme="dark"] .kn-werkzeug,
html[data-theme="dark"] .kn-feld{
background:var(--c-surf2, #1f2933);
color:var(--c-text, #e5e7eb);
}
html[data-theme="dark"] .kn-knopf.hat{ background:#1d3a2b; color:#a7e0c0 }
/* Reihenfolge des Restes: erst das Gelesene, dann die Werkzeuge. */
#panel-baecker .bk-sticky > * { order:1 }
#panel-baecker .bk-sticky > .bk-stat { order:2 }
#panel-baecker .bk-sticky > .bk-offen { order:3 }
#panel-baecker .bk-sticky > .bk-test { order:4 }
#panel-baecker .bk-sticky > .bk-tools { order:5 }
#panel-baecker .bk-sticky > .bk-sortnote{ order:6 }
#panel-baecker .bk-sticky > .bk-sub { order:7 }
/* Die Baeckereileiste ist als Filterleiste selbst fixiert (top:-12px) und
rastete dadurch unabhaengig vom Kopf ein - sie sass um
"Innenabstand minus 12 px" zu tief, sichtbar als schmaler Streifen, in
dem Artikelzeilen durchschienen. Im mitfixierten Kopf braucht sie das
nicht. */
#panel-baecker .bk-sticky > .bk-sub{ position:static }
/* Der Sortierhinweis stand vorher direkt ueber der Liste - jetzt ueber
der Baeckereileiste, deshalb etwas Luft darunter. */
#panel-baecker .bk-sticky > .bk-sortnote{ padding-bottom:7px }
/* ── 14.12 Niedrige Bildschirme: Kopf weiter verdichten ─────────────── */
@media (max-height:820px){
#panel-baecker .bk-days-lbl{ display:none }
#panel-baecker .bk-day{ min-height:44px; padding:5px 10px }
#panel-baecker .bk-day .st{ font-size:10px; margin-top:1px }
#panel-baecker .bk-stat{ padding:7px 11px; margin-bottom:7px }
#panel-baecker .bk-stat .ico{ width:34px; height:34px }
#panel-baecker .bk-sortnote{ display:none }
#panel-baecker .bk-offen,
#panel-baecker .bk-test{ padding:5px 10px; margin-bottom:6px }
}
/* ── 15 Kalender: Wochenleiste ohne Rollstreifen ────────────────────────
*
* Die Wochenleiste `.kal-days` war ein Flex-Rollstreifen (`overflow-x:auto`);
* bei 320 px lagen zwei der sieben Tage außerhalb des Bildschirms. Zugleich
* kappte `.dnum` (20 px, `line-height:1.1`) die Tageszahl um zwei Pixel –
* gemessen scrollHeight 24 gegen clientHeight 22, ein senkrechter Verschnitt.
*
* Jetzt ein Raster wie beim Mittagstisch: unter 430 px vier Spalten (zwei
* Zeilen), darüber alle sieben nebeneinander. Vier Spalten halten die
* Tagesfläche auch bei 320 px über den 44 px, die F4 verlangt.
*/
#panel-kalender .kal-days{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:6px;
overflow:visible;
padding-bottom:4px;
}
/* Ab 360 px stehen alle sieben Tage nebeneinander statt in zwei Reihen. Mit
4 px Zwischenraum bleibt jede Tagesfläche auch bei 360 px über den 44 px,
die F4 verlangt ((360 − 24 − 24) / 7 = 44,6). Das spart auf dem Handy eine
ganze Reihe Kopfhöhe. */
@media (min-width:360px){
#panel-kalender .kal-days{ grid-template-columns:repeat(7,1fr); gap:4px }
}
#panel-kalender .kal-day{
flex:none;
min-width:0;
min-height:var(--tap);
}
/* Zeilenhöhe großzügig, damit die große Tageszahl nicht am Rahmen kappt. */
#panel-kalender .kal-day .dnum{ line-height:1.3; overflow:visible }
#panel-kalender .kal-day .dow{ line-height:1.3 }
/* Auf dem Handy war der Kopf des Terminkalenders höher als der Inhalt:
Wochenzeile, „+ Neuer Eintrag", zwei Reihen Tage und drei Reihen Filter
ergaben rund 400 px, bevor der erste Termin zu sehen war. Die Tage stehen
jetzt in einer Reihe (oben), und die Filter rücken enger zusammen. */
@media (max-width:699px){
/* Schlank gezeichnet, in voller Größe antippbar — wie die Portions-Badges
beim Metzger. Die sieben Filter brauchen bei 390 px zwangsläufig drei
Reihen (676 px Inhalt auf 351 px Breite); flacher gezeichnet kosten sie
104 statt 140 px, ohne dass die Treffsicherheit leidet. */
#panel-kalender .kal-chip{
height:var(--tap-min);
margin:-6px 0;
padding:0 9px;
border:6px solid transparent;
background-clip:padding-box;
box-shadow:inset 0 0 0 1.5px var(--line);
font-size:12px;
gap:4px;
}
#panel-kalender .kal-chip.active{ box-shadow:inset 0 0 0 1.5px var(--gr) }
#panel-kalender .kal-filters{ gap:4px }
/* Der Zeitraum steht schon in der Tagesreihe darunter. */
#panel-kalender #kal-range{ display:none }
}
/* ── 15.1 Datum wählen statt Woche für Woche blättern ───────────────────
*
* Für einen Termin in einigen Monaten musste man ein Dutzend Mal auf „›"
* tippen. Die Wochenangabe ist deshalb selbst die Datumsauswahl: Ein Tippen
* öffnet die Datumsauswahl des Geräts. Das kostet keinen zusätzlichen Platz
* — wichtig, weil der Kopf auf dem Handy ohnehin knapp ist.
*/
#panel-kalender .kal-week{
position:relative;
cursor:pointer;
border-radius:var(--r-s);
}
#panel-kalender .kal-week::after{
content:'Datum wählen';
display:block;
font-size:10.5px;
font-weight:600;
letter-spacing:.04em;
text-transform:uppercase;
color:var(--gr);
line-height:1.3;
}
/* Das Datumsfeld liegt unsichtbar über der Wochenangabe: Die Geräte öffnen
ihre Auswahl nur bei einer echten Bedienung des Feldes, ein nachgebauter
Knopf könnte das nicht. */
#panel-kalender .kneu-kal-datum{
position:absolute;
inset:0;
width:100%;
height:100%;
min-height:var(--tap-min);
opacity:0;
border:0;
padding:0;
cursor:pointer;
}
/* ── 16 Metzger Mair: Liefertagsleiste ohne Rollstreifen ────────────────
*
* `.mb-days` war ein Flex-Rollstreifen mit bis zu vierzehn Liefertagen.
* Die Tagesknöpfe schrumpften unter ihre Textbreite (`min-width:64px` griff
* im schrumpfenden Flex nicht durch), sodass das Datum `.d2 «08.09.»`
* waagerecht abschnitt – gemessen scrollWidth 28 gegen clientWidth 24.
*
* Der Metzger liefert nur an festen Wochentagen (hier Do und Mo). Die übrigen
* fünf Wochentage waren dauerhaft ausgegraut und nie antippbar — sie füllten
* zwei volle Rasterzeilen mit toter Fläche. Sie werden ausgeblendet; übrig
* bleiben die tatsächlichen Liefertage. Ein verpasster Liefertag („zu spät —
* bestellt wird spätestens am Vortag") bleibt als Hinweis stehen, weil er den
* nächsten möglichen Termin einordnet.
*
* Weil nur noch wenige Felder übrig sind, wäre ein starres Sieben-Spalten-
* Raster verschwenderisch breit. Die Leiste bricht stattdessen um und die
* Felder behalten eine ruhige, gleichmäßige Breite.
*/
#panel-metzgerbest .mb-days{
display:flex;
flex-wrap:wrap;
gap:5px;
overflow:visible;
padding-bottom:8px;
}
/* Strukturelle Nicht-Liefertage (Di, Mi, Fr, Sa, So) verschwinden ganz. */
#panel-metzgerbest .mb-days .mb-day.off[title*="liefert der Metzger nicht"]{
display:none;
}
#panel-metzgerbest .mb-day{
flex:0 0 auto;
min-width:88px;
min-height:var(--tap-min);
padding:5px 6px;
white-space:normal;
}
/* Wochentag und Datum stehen zweizeilig, jede Zeile mittig. */
#panel-metzgerbest .mb-day .d2{ line-height:1.3 }
/* ── Statuszeile auf der Tageskachel ────────────────────────────────────
Rueckmeldung aus dem Laden: „Es sollte auch hier der Status der
Bestellung angezeigt werden, so dass man gleich sieht, was an welchem
Tag bestellt wurde." Vorher trug die Kachel nur Wochentag und Datum —
ob dort etwas lief, war ihr nicht anzusehen.
(Spec bestellung-loeschen, F13) */
#panel-metzgerbest .mb-day{ line-height:1.25 }
#panel-metzgerbest .mb-day .d3{
display:block;
margin-top:2px;
font-size:10px;
font-weight:600;
color:#6b7280;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#panel-metzgerbest .mb-day.on .d3{ color:#dcfce7 }
#panel-metzgerbest .mb-day.sent .d3,
#panel-metzgerbest .mb-day.korr .d3{ color:#166534 }
/* Ein vergangener, gesendeter Liefertag: anklickbar, aber sichtbar
abgesetzt — er wird nur gelesen. (Spec bestellung-loeschen, F11) */
#panel-metzgerbest .mb-day.lesen{
opacity:1;
cursor:pointer;
border-style:dashed;
background:#f7faf8;
}
#panel-metzgerbest .mb-day.lesen.on{
border-style:solid;
background:#2e7d4f;
}
/* Hinweis in der Fusszeile, wenn nichts mehr zu tun ist. */
#panel-metzgerbest .mb-foot-note{
display:inline-flex; align-items:center; gap:6px;
font-size:.82rem; color:#6b7280;
}
/* ── Vergangene Liefertage beim Bäcker ──────────────────────────────────
Gestrichelter Rand: anklickbar, aber nichts mehr zu tun.
(Spec bestellung-loeschen, F11) */
#panel-baecker .bk-day.lesen,
.bk-days .bk-day.lesen{
border-style:dashed;
background:#f7faf8;
opacity:1;
}
/* „Löschen" ist ein Abriss — er darf nicht aussehen wie die Knöpfe daneben.
(Spec bestellung-loeschen, F1) */
.bk-hist-fuss .bk-btn.weg,
#panel-baecker .bk-btn.weg{
border-color:#e7c9c9; color:#b42318;
}
.bk-hist-fuss .bk-btn.weg:hover,
#panel-baecker .bk-btn.weg:hover{
background:#fdf3f2; border-color:#d98b8b;
}
/* „Löschen" steht beim Bäcker in der zugeklappten Zeile — sonst fand es
niemand. (Spec bestellung-loeschen, F1) */
.bk-hist .bk-btn.bk-hist-weg{ white-space:nowrap }
/* ── Getränke: Verlauf aufklappbar und löschbar ─────────────────────────
Aus dem Laden: „Bei Getränke möchte ich nach Klick auch sehen, was
bestellt wurde" — und Testbestellungen sollen verschwinden können.
(Spec bestellung-loeschen, F1/F14) */
#panel-getraenke .gk-vrow{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
padding:8px 12px;
background:#fff;
border-radius:10px;
box-shadow:0 1px 2px rgba(0,0,0,.05);
margin-bottom:6px;
}
#panel-getraenke .gk-vkopf{
flex:1 1 auto;
display:flex; align-items:center; gap:8px;
min-width:0;
background:none; border:0; padding:0;
font:inherit; text-align:left; cursor:pointer;
min-height:var(--tap-min);
}
#panel-getraenke .gk-vkopf .pf{ flex:0 0 auto; color:#6b7280; font-size:12px }
#panel-getraenke .gk-vkopf .tx{ display:flex; flex-direction:column; gap:2px; min-width:0 }
#panel-getraenke .gk-vkopf .tx span{ font-size:12px; color:#6b7280 }
/* Die aufgeklappte Liste nimmt die ganze Breite unter der Zeile ein. */
#panel-getraenke .gk-vliste{
flex:1 1 100%; margin-top:6px;
border-top:1px solid #eef1f0; padding-top:8px;
}
#panel-getraenke .gk-vtab{ width:100%; border-collapse:collapse; font-size:.85rem }
#panel-getraenke .gk-vtab th{
text-align:left; font-size:.72rem; font-weight:600; color:#8a9491;
padding:2px 6px; border-bottom:1px solid #eef1f0;
}
#panel-getraenke .gk-vtab td{ padding:4px 6px; border-bottom:1px solid #f4f6f5 }
#panel-getraenke .gk-vtab .r{ text-align:right; font-variant-numeric:tabular-nums }
#panel-getraenke .gk-vtab .nr{ color:#6b7280; font-variant-numeric:tabular-nums }
#panel-getraenke .gk-vtab .gb{ font-size:.72rem; color:#8a9491 }
#panel-getraenke .gk-vleer{ font-size:.82rem; color:#6b7280; padding:6px }
/* „Löschen" ist ein Abriss — er darf nicht aussehen wie die Knöpfe daneben. */
#panel-getraenke .gk-btn.weg{
border:1.5px solid #e7c9c9; background:#fff; color:#b42318;
border-radius:9px; min-height:var(--tap-min); padding:0 12px;
font-size:.8rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
#panel-getraenke .gk-btn.weg:hover{ background:#fdf3f2; border-color:#d98b8b }
/* „Löschen" im Verlauf ist ein Abriss — er darf nicht aussehen wie
„Formular ansehen" daneben. (Spec bestellung-loeschen, F1) */
#panel-metzgerbest .mb-vrow .mb-btn.weg{
border-color:#e7c9c9; color:#b42318;
}
#panel-metzgerbest .mb-vrow .mb-btn.weg:hover{
background:#fdf3f2; border-color:#d98b8b;
}
/* Die Sprungleiste `.mb-jump` (Warengruppen) war ebenfalls ein Rollstreifen
mit versteckter Bildlaufleiste; lange Namen wie „Aufschnitt & Wurstwaren"
schnitten ab, sobald die Knöpfe schrumpften. Jetzt bricht die Leiste um. */
#panel-metzgerbest .mb-jump{
display:flex;
flex-wrap:wrap;
gap:6px;
overflow:visible;
}
#panel-metzgerbest .mb-jump button{
flex:0 0 auto;
white-space:normal;
}
/* ── Bewegung sparsam ────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}
/* ── Drucken: Gerüst tritt zurück ────────────────────────────────────── */
@media print{
.k-umbau-hinweis, .k-tabs, .k-header, .k-bottom{ display:none !important }
.k-app{ display:block; height:auto }
.k-main, .k-panel, .k-panel.active{ position:static; overflow:visible; display:block !important }
}
/* ═══════════════════════════════════════════════════════════════════════
15 Bestellreiter auf dem Telefon
Spec: specs/kiosk-bestellreiter-mobil/spec.md
Der Reiter zerfällt in drei Teile: ein fester Kopf, die scrollende
Arbeitsliste und die Fußzeile. Nur der mittlere Teil bewegt sich.
Gemessen wurde vorher: 710 px Kopfbereich auf einem 640 px hohen
Bildschirm — die erste Artikelzeile begann bei y = 810 und war nie zu
sehen. Erlaubt sind jetzt 45 % oben und 25 % unten (F2).
═══════════════════════════════════════════════════════════════════════ */
.k-panel.k-geteilt.active{
display:flex;
flex-direction:column;
overflow:hidden; /* nur .k-liste rollt */
padding:0;
}
/* Die Fachmodule hängen ihren Inhalt in einen eigenen Behälter
(#baecker-body, #getraenke-body, …). Er muss die Aufteilung
durchreichen, sonst bliebe die Liste unbegrenzt und die Fußzeile legte
sich über die letzte Artikelzeile. */
.k-panel.k-geteilt > div[id$="-body"]{
display:flex;
flex-direction:column;
flex:1 1 auto;
min-height:0;
}
.k-panel.k-geteilt .bk-fest,
.k-panel.k-geteilt .gk-fest,
.k-panel.k-geteilt .mb-fest{
flex:0 0 auto;
padding:6px calc(var(--pad) + var(--sar)) 0 calc(var(--pad) + var(--sal));
background:var(--flaeche);
}
.k-panel.k-geteilt .k-liste{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
overscroll-behavior:contain;
padding:4px calc(var(--pad) + var(--sar)) 8px calc(var(--pad) + var(--sal));
}
.k-panel.k-geteilt .bk-foot,
.k-panel.k-geteilt .gk-foot,
.k-panel.k-geteilt .mb-foot{
flex:0 0 auto;
position:static; /* im Fluss, nicht mehr klebend */
margin:0;
padding:6px calc(var(--pad) + var(--sar)) calc(6px + var(--sab)) calc(var(--pad) + var(--sal));
}
/* ── 15.1 Kontextzeile statt Infokasten (F3) ─────────────────────────
Sie trägt zwei Textzeilen: wer liefert und in welchem Zustand die
Bestellung ist. Der Liefertag steht in der markierten Kachel darüber. */
.bk-kontext{
display:flex;
align-items:center;
gap:8px;
margin:5px 0 0;
padding:5px 8px;
border:1px solid var(--bk-line, #fde68a);
border-radius:var(--r-m);
background:var(--bk-bg, #fefce8);
}
.bk-kontext .ico{
width:28px; height:28px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
border-radius:8px;
background:var(--karte, #fff);
border:1px solid var(--bk-line, #fde68a);
color:var(--bk, #a16207);
}
.bk-kontext .ico svg{ width:17px; height:17px }
.bk-kontext .txt{ flex:1; min-width:0 }
.bk-kontext .z1{
font-size:13.5px; font-weight:700; line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bk-kontext .z2{
font-size:12px; line-height:1.25; color:var(--mut, #688073);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bk-kontext.done{ background:var(--gr-t, #f5faf7); border-color:var(--line, #e1ebe5) }
.bk-kontext.done .ico{ border-color:var(--line, #e1ebe5); color:var(--gr, #2e7d4f) }
.bk-kontext.late{ background:#fdeeed; border-color:#f3c8c5 }
.bk-kontext.late .ico{ border-color:#f3c8c5; color:#b91c1c }
.bk-kontext.late .z2{ color:#b91c1c; font-weight:700 }
.bk-kontext.test:not(.late){ background:#eaf1ff; border-color:#c3d8fb }
.bk-kontext.test:not(.late) .ico{ border-color:#c3d8fb; color:#1d4ed8 }
.bk-kontext.test:not(.late) .z2{ color:#1d4ed8 }
/* Der i-Knopf öffnet das Blatt mit allem Weiteren. */
.bk-mehr{
width:var(--tap-min, 44px); height:var(--tap-min, 44px); flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-s);
border:1px solid var(--bk-line, #fde68a);
background:var(--karte, #fff);
color:var(--bk-dark, #713f12);
cursor:pointer;
}
.bk-mehr svg{ width:19px; height:19px }
.bk-kontext.done .bk-mehr{ border-color:var(--line, #e1ebe5); color:var(--ink, #132a1e) }
/* ── 15.2 Das Blatt hinter dem i ─────────────────────────────────────── */
.bk-blatt{
position:fixed;
left:0; right:0; bottom:0;
z-index:60;
max-height:80%;
overflow-y:auto;
padding:14px calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal));
border-radius:18px 18px 0 0;
background:var(--karte, #fff);
box-shadow:var(--schatten-blatt, 0 -8px 32px rgba(16,24,40,.18));
}
.bk-blatt[hidden]{ display:none }
.bk-blatt-kopf h4{ margin:0; font-size:16px }
.bk-blatt-sub{ margin:2px 0 10px; font-size:13px; color:var(--mut, #688073) }
.bk-blatt-z{
display:flex; gap:9px; align-items:flex-start;
padding:8px 0;
border-top:1px solid var(--line, #e1ebe5);
font-size:13.5px; line-height:1.4;
}
.bk-blatt-z svg{ width:16px; height:16px; flex:0 0 auto; margin-top:2px; color:var(--mut, #688073) }
.bk-blatt-wz{ display:flex; flex-direction:column; gap:8px; margin-top:12px }
.bk-blatt-wz > button,
.bk-blatt-wz > .kn-knopf{
min-height:var(--tap, 48px);
justify-content:flex-start;
gap:9px;
padding:0 12px;
text-align:left;
}
.bk-blatt-zu{
width:100%;
min-height:var(--tap, 48px);
margin-top:12px;
border-radius:var(--r-s);
border:1px solid var(--line, #e1ebe5);
background:var(--karte, #fff);
font:inherit; font-weight:600; cursor:pointer;
}
/* ── 15.3 Umfang-Umschalter am Listenende (F1) ───────────────────────── */
.bk-umfang{ display:flex; gap:8px; margin:8px 0 2px }
.bk-umfang > button{ flex:1; min-height:var(--tap, 48px); justify-content:center }
.bk-foot-note{
display:inline-flex; align-items:center; gap:6px;
font-size:12.5px; color:var(--mut, #688073);
}
.bk-foot-note svg{ width:14px; height:14px }
/* ── 15.4 Nur auf dem Telefon: Kopfzeile und Kacheln straffen ────────── */
@media (max-width:559px){
/* Sechs Symbole und der Titel passen nicht in eine Zeile — deshalb standen
sie in zweien (92 px). Vier passen, die drei selteneren klappen aus.
Damit die Zeile nicht doch umbricht, darf die Marke schrumpfen und die
Knopfreihe behält ihre Breite. */
.k-header{ flex-wrap:nowrap; gap:8px; padding-top:4px; padding-bottom:4px }
.k-header-brand{ flex:1 1 auto; min-width:0 }
.k-header-acts{ flex:0 0 auto; flex-wrap:nowrap }
.k-header #k-sparkline{ display:none }
.k-header .k-header-acts > .k-head-extra{ display:none }
.k-header .k-header-acts.mehr-auf > .k-head-extra{ display:inline-flex }
/* Aufgeklappt sind es sieben — dann darf die Reihe umbrechen. */
.k-header .k-header-acts.mehr-auf{ flex-wrap:wrap; justify-content:flex-end }
.k-header-when{ display:none }
/* Die Kachel trug vier gestapelte Zeilen. Jetzt zwei: Wochentag, Datum
und Punkte oben, der Status darunter — und nur, wenn er etwas sagt. */
#panel-baecker .bk-day{
display:grid;
grid-template-columns:auto auto auto;
place-content:center;
column-gap:4px;
row-gap:1px;
min-height:var(--tap, 48px);
padding:4px;
}
#panel-baecker .bk-day > span:first-child{ grid-area:1 / 1 }
#panel-baecker .bk-day .d{ grid-area:1 / 2; display:inline; margin:0 }
#panel-baecker .bk-day .bk-who{ grid-area:1 / 3; margin:0; gap:2px }
#panel-baecker .bk-day .st{ grid-area:2 / 1 / 2 / 4; font-size:11.5px; margin:0 }
#panel-baecker .bk-days{ gap:4px; padding:5px 0 }
#panel-baecker .kneu-bk-fest{ padding-top:4px; padding-bottom:2px }
/* Die Gruppenüberschrift kostete mit Rändern rund 40 px — eine dreiviertel
Artikelzeile. Schrift und Farbe bleiben, nur die Luft weicht. */
#panel-baecker .bk-grp{ margin:5px 0 3px; padding:3px 10px }
/* Auf dem Telefon steht der Bereichswechsel im Blatt („Artikel verwalten",
„Verlauf ansehen"), nicht im Kopf — dort fehlt der Platz. */
#panel-baecker .bk-sub.nur-breit{ display:none }
/* Die Zeile bleibt 44 px bedienbar; nur die Luft um sie herum gibt nach.
Vier vollständige Zeilen passen dadurch auch auf 640 px Höhe (F1). */
#panel-baecker .bk-row{ margin-bottom:3px; padding:4px 9px }
/* Ein langer Artikelname („Roggensemmel mit Kümmel") brach zweizeilig um
und machte gerade die vierte Zeile so hoch, dass sie unter den
Listenrand rutschte. Auf dem Telefon bleibt der Name einzeilig — wie bei
Getränke und Metzger —, damit vier Zeilen sicher ganz sichtbar sind (F1). */
#panel-baecker .bk-row .nm{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
overflow-wrap:normal;
}
.k-panel.k-geteilt .k-liste{ padding-top:3px; padding-bottom:4px }
/* „An Bäckerei senden" brach auf zwei Zeilen um und machte den Knopf
76 px hoch statt 48 — die Fußzeile kostete dadurch eine ganze
Artikelzeile. Auf dem Telefon stehen die Kurzformen. */
#panel-baecker .bk-foot .bk-btn .lang,
#panel-baecker .bk-foot .bk-send .lang{ display:none }
#panel-baecker .bk-foot .bk-send,
#panel-baecker .bk-foot .bk-btn{ white-space:nowrap }
/* Die Fußzeile trug noch die Maße ihres klebenden Zustands: negative
Ränder und 29 px Innenabstand unten, damit sie über den Panelrand
hinausragte. Im geteilten Aufbau steht sie im Fluss und braucht das
nicht — 109 px werden so zu 76. */
#panel-baecker.k-geteilt .bk-foot{
margin:0;
padding:6px var(--pad) calc(6px + var(--sab));
bottom:auto;
box-shadow:none;
}
}
/* Ab Tablet stehen wieder alle Symbole nebeneinander. */
@media (min-width:560px){
.k-header .k-head-mehr{ display:none }
}
/* ── 15.5 Dunkles Schema ─────────────────────────────────────────────── */
html[data-theme="dark"] .bk-kontext{ background:#2a2410; border-color:#5c4a12 }
html[data-theme="dark"] .bk-kontext .ico{ background:#1f2933; border-color:#5c4a12 }
html[data-theme="dark"] .bk-kontext .z1{ color:var(--c-text, #e5e7eb) }
html[data-theme="dark"] .bk-kontext.done{ background:#16281e; border-color:#245038 }
html[data-theme="dark"] .bk-blatt{ background:var(--c-surf, #111827) }
html[data-theme="dark"] .bk-blatt-zu,
html[data-theme="dark"] .bk-mehr{ background:var(--c-surf2, #1f2933); color:var(--c-text, #e5e7eb) }
.gk-subs.im-blatt, .gk-nur-tel{ display:none }
/* ── 15.6 Getränke: dieselbe Gliederung wie beim Bäcker ────────────────
Der Reiter gab bisher alles als einen 5276 px hohen Block aus. Jetzt:
fester Kopf, scrollende Liste, Fußzeile (Spec F6). */
.gk-kontext{
display:flex;
align-items:center;
gap:8px;
margin:5px 0 0;
padding:5px 8px;
border:1px solid var(--line, #e1ebe5);
border-radius:var(--r-m);
background:var(--karte, #fff);
}
.gk-kontext .ico{
width:28px; height:28px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
border-radius:8px;
border:1px solid var(--line, #e1ebe5);
background:var(--gr-t, #f5faf7);
color:var(--gr, #2e7d4f);
}
.gk-kontext .ico svg{ width:17px; height:17px }
.gk-kontext .txt{ flex:1; min-width:0 }
.gk-kontext .z1{ font-size:13.5px; font-weight:700; line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gk-kontext .z2{ font-size:12px; line-height:1.25; color:var(--mut, #688073);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gk-kontext.test .z2{ color:#1d4ed8 }
.gk-kontext.gesendet{ background:var(--gr-t, #f5faf7) }
.gk-mehr{
width:var(--tap-min, 44px); height:var(--tap-min, 44px); flex:0 0 auto;
display:flex; align-items:center; justify-content:center;
border-radius:var(--r-s);
border:1px solid var(--line, #e1ebe5);
background:var(--karte, #fff);
color:var(--ink, #132a1e);
cursor:pointer;
}
.gk-mehr svg{ width:19px; height:19px }
/* „Neue Bestellung": sichtbarer Weg zum nächsten Liefertermin, sobald der
aktuelle abgeschickt ist. Auf dem Telefon bleibt nur das Symbol. */
.gk-neubest{
display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
min-height:var(--tap-min, 44px); padding:0 12px;
border-radius:var(--r-s);
border:1.5px solid var(--gr, #2e7d4f);
background:var(--gr-t, #f5faf7); color:var(--gr, #2e7d4f);
font:inherit; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
}
.gk-neubest svg{ width:17px; height:17px }
.gk-blatt-hinweis{
margin:0 0 8px; font-size:12.5px; line-height:1.35; color:var(--mut, #688073);
}
/* Das Mengenfeld ist ein input[type=number]. Die Pfeilchen des Browsers
schoben sich über die 52 px breite Zelle — aus „10" wurde sichtbar „1(".
Sie entfallen (wie beim Bäcker), das Feld wird etwas breiter. */
.gk-step input{ width:60px; -moz-appearance:textfield; appearance:textfield }
.gk-step input::-webkit-outer-spin-button,
.gk-step input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.gk-blatt{
position:fixed;
left:0; right:0; bottom:0;
z-index:60;
max-height:80%;
overflow-y:auto;
padding:14px calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal));
border-radius:18px 18px 0 0;
background:var(--karte, #fff);
box-shadow:var(--schatten-blatt, 0 -8px 32px rgba(16,24,40,.18));
}
.gk-blatt[hidden]{ display:none }
.gk-blatt-kopf h4{ margin:0; font-size:16px }
.gk-blatt-sub{ margin:2px 0 10px; font-size:13px; color:var(--mut, #688073) }
.gk-blatt-t{ margin:12px 0 5px; font-size:12.5px; font-weight:700; color:var(--mut, #688073) }
.gk-blatt-z{ display:flex; align-items:center; gap:9px; padding:8px 0;
border-top:1px solid var(--line, #e1ebe5); font-size:13.5px }
.gk-blatt-z.klein{ font-size:12.5px; color:var(--mut, #688073) }
.gk-blatt-z label{ flex:0 0 auto; font-weight:600 }
.gk-blatt-z input[type="date"]{ flex:1; min-height:var(--tap-min, 44px);
border:1px solid var(--line, #e1ebe5); border-radius:var(--r-s); padding:0 10px; font:inherit }
.gk-blatt .gk-take{ width:100%; min-height:var(--tap, 48px); margin-top:8px }
.gk-blatt .gk-tgl{ display:flex; gap:6px }
.gk-blatt .gk-tgl button{ flex:1; min-height:var(--tap-min, 44px) }
.gk-blatt .gk-jump{ display:flex; flex-wrap:wrap; gap:6px }
.gk-blatt .gk-jump button{ min-height:var(--tap-min, 44px); padding:0 12px }
.gk-blatt-zu{
width:100%; min-height:var(--tap, 48px); margin-top:14px;
border-radius:var(--r-s); border:1px solid var(--line, #e1ebe5);
background:var(--karte, #fff); font:inherit; font-weight:600; cursor:pointer;
}
html[data-theme="dark"] .gk-blatt{ background:var(--c-surf, #111827) }
html[data-theme="dark"] .gk-kontext{ background:var(--c-surf2, #1f2933) }
/* ── 15.7 Metzger: dieselbe Gliederung wie Bäcker und Getränke ─────────
Der Reiter gab bisher alles (Statuskarte, Werkzeugleiste, lange Liste)
als einen hohen Block aus. Jetzt: fester Kopf (Liefertag, Zustandszeile,
Suche), scrollende Liste, Fußzeile; alles Übrige im Blatt (Spec F1/F3). */
.mb-kontext{
display:flex; align-items:center; gap:8px; margin:5px 0 0; padding:5px 8px;
border:1px solid var(--line, #e1ebe5); border-radius:var(--r-m);
background:var(--karte, #fff);
}
.mb-kontext .ico{
width:28px; height:28px; flex:0 0 auto;
display:flex; align-items:center; justify-content:center; border-radius:8px;
border:1px solid var(--line, #e1ebe5); background:var(--gr-t, #f5faf7);
color:var(--gr, #2e7d4f);
}
.mb-kontext .ico svg{ width:17px; height:17px }
.mb-kontext .txt{ flex:1; min-width:0 }
.mb-kontext .z1{ font-size:13.5px; font-weight:700; line-height:1.25;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mb-kontext .z2{ font-size:12px; line-height:1.25; color:var(--mut, #688073);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mb-kontext.test .z2{ color:#1d4ed8 }
.mb-kontext.gesendet{ background:var(--gr-t, #f5faf7) }
.mb-mehr{
width:var(--tap-min, 44px); height:var(--tap-min, 44px); flex:0 0 auto;
display:flex; align-items:center; justify-content:center; border-radius:var(--r-s);
border:1px solid var(--line, #e1ebe5); background:var(--karte, #fff);
color:var(--ink, #132a1e); cursor:pointer;
}
.mb-mehr svg{ width:19px; height:19px }
#panel-metzgerbest .mb-fest .mb-bar{ margin:5px 0 0 }
#panel-metzgerbest .mb-fest .mb-bar input{
width:100%; min-height:var(--tap-min, 44px); box-sizing:border-box;
border:1px solid var(--line, #e1ebe5); border-radius:var(--r-s);
padding:0 12px; font:inherit;
}
/* Umfang-Umschalter und Zusatzartikel am Listenende. */
.mb-umfang{ display:flex; gap:8px; margin:10px 2px 4px }
.mb-umfang .mb-btn{ flex:1; min-height:var(--tap-min, 44px) }
.mb-umfang .mb-btn.on{ border-color:var(--gr, #2e7d4f); color:var(--gr, #2e7d4f);
font-weight:600 }
.mb-addrow{
display:block; width:100%; min-height:var(--tap-min, 44px); margin:10px 0 0;
border:1px dashed var(--gr, #2e7d4f); border-radius:var(--r-s);
background:var(--gr-t, #f5faf7); color:var(--gr, #2e7d4f); font:inherit;
font-weight:600; cursor:pointer;
}
/* Fußzeile im geteilten Layout: die ID-Regel oben zieht die Fußzeile
full-width mit Negativrändern — im Flexlayout würde das überlaufen. */
#panel-metzgerbest.k-geteilt .mb-foot{ margin:0 }
.mb-blatt{
position:fixed; left:0; right:0; bottom:0; z-index:60; max-height:80%;
overflow-y:auto;
padding:14px calc(14px + var(--sar)) calc(14px + var(--sab)) calc(14px + var(--sal));
border-radius:18px 18px 0 0; background:var(--karte, #fff);
box-shadow:var(--schatten-blatt, 0 -8px 32px rgba(16,24,40,.18));
}
.mb-blatt[hidden]{ display:none }
.mb-blatt-kopf h4{ margin:0; font-size:16px }
.mb-blatt-sub{ margin:2px 0 10px; font-size:13px; color:var(--mut, #688073) }
.mb-blatt-t{ margin:12px 0 5px; font-size:12.5px; font-weight:700; color:var(--mut, #688073) }
.mb-blatt-z{ display:flex; align-items:center; gap:9px; padding:8px 0;
border-top:1px solid var(--line, #e1ebe5); font-size:13.5px }
.mb-blatt .mb-tgl{ display:flex; gap:6px }
.mb-blatt .mb-tgl button{ flex:1; min-height:var(--tap-min, 44px);
border:1px solid var(--line, #e1ebe5); border-radius:var(--r-s);
background:var(--karte, #fff); font:inherit; cursor:pointer }
.mb-blatt .mb-tgl button.on{ border-color:var(--gr, #2e7d4f);
color:var(--gr, #2e7d4f); font-weight:600 }
.mb-blatt .mb-jump{ display:flex; flex-wrap:wrap; gap:6px; overflow:visible }
.mb-blatt .mb-jump button{ min-height:var(--tap-min, 44px); padding:0 12px }
.mb-blatt .mb-subs.im-blatt{ display:flex; gap:6px }
.mb-blatt .mb-subs.im-blatt button{ flex:1; min-height:var(--tap-min, 44px) }
.mb-blatt-wz{ display:flex; flex-direction:column; gap:6px; margin-top:10px }
.mb-blatt-wz .mb-btn{ width:100%; min-height:var(--tap-min, 44px) }
.mb-blatt-zu{
width:100%; min-height:var(--tap, 48px); margin-top:14px; border-radius:var(--r-s);
border:1px solid var(--line, #e1ebe5); background:var(--karte, #fff);
font:inherit; font-weight:600; cursor:pointer;
}
/* Der Bereichswechsel (Bestellung · Verlauf · Artikel) steht ab Tablet
sichtbar im festen Kopf — über ihn erreicht man die Artikelverwaltung.
Auf dem Telefon fehlt dafür der Platz; dort steht er im Blatt hinter dem
„i" (siehe Telefon-Abschnitte weiter unten). */
.bk-sub.nur-breit, .mb-subs.nur-breit{ display:flex }
.mb-subs.im-blatt, .mb-nur-tel{ display:none }
.mb-blatt .mb-nur-tel{ display:block }
/* Auf dem Telefon: Kopf schmal halten und Zeilen straffen, damit vier
Artikelzeilen ganz sichtbar sind (Spec F1). Antippflächen bleiben ≥44 px. */
@media (max-width:559px){
#panel-metzgerbest .mb-days-lbl{ display:none }
/* Auf dem Telefon steht der Bereichswechsel im Blatt, nicht im Kopf. */
#panel-metzgerbest .mb-subs.nur-breit{ display:none }
#panel-metzgerbest .mb-fest .mb-bar{ margin:5px 0 0 }
#panel-metzgerbest .mb-kontext{ margin-top:4px }
#panel-metzgerbest .mb-liste{ gap:2px 10px }
#panel-metzgerbest .mb-grp{ margin:4px 0 1px; padding-bottom:2px }
#panel-metzgerbest .mb-row{ padding:1px 8px; gap:0 8px }
#panel-metzgerbest .mb-nr{ min-height:32px; padding-top:7px }
#panel-metzgerbest .mb-nm{ line-height:1.1 }
#panel-metzgerbest .mb-chip{ margin-top:1px; min-height:32px }
#panel-metzgerbest .mb-chip .lab{ min-height:32px }
#panel-metzgerbest .mb-chip .x{ min-height:32px }
/* Der Knopf steht in der eigenen Spalte; auf dem Telefon rückt er nur
ein wenig nach unten, damit er auf Höhe des Namens sitzt. */
#panel-metzgerbest .mb-akt{ padding-top:2px }
/* Die Zähler sind auf dem Telefon ausgeblendet; ohne sie soll die Fußzeile
nicht noch eine leere erste Zeile führen. Speichern und Senden stehen so
in einer Zeile statt in zweien (spart ~40 px für die Liste). */
#panel-metzgerbest .mb-foot::before{ display:none }
#panel-metzgerbest .mb-foot{ flex-wrap:nowrap; align-items:center }
#panel-metzgerbest .mb-foot .mb-btn,
#panel-metzgerbest .mb-foot .mb-send{ order:0 }
#panel-metzgerbest .mb-foot .mb-send .lang{ display:none }
}
html[data-theme="dark"] .mb-blatt{ background:var(--c-surf, #111827) }
html[data-theme="dark"] .mb-kontext{ background:var(--c-surf2, #1f2933) }
/* Auf dem Tablet bleibt der Kopf mit seinen Zählern, aber die Zeilen werden
ebenso gestrafft wie auf dem Telefon. Zusammen mit den zwei Spalten passen
so genügend Zeilen auf den Schirm (Spec F1, F17). */
@media (min-width:560px) and (max-width:1100px){
#panel-metzgerbest .mb-liste{ gap:3px 10px }
#panel-metzgerbest .mb-grp{ margin:6px 0 2px; padding-bottom:2px }
#panel-metzgerbest .mb-row{ padding:2px 8px; gap:0 8px }
#panel-metzgerbest .mb-akt{ padding-top:2px }
}
@media (max-width:559px){
/* Die Artikelzeile war 136 px hoch — knapp drei Bäckerzeilen für einen
Artikel. Gebinde, Preis und Pfand rücken unter den Namen statt in
eigene Blöcke; die Mengenbedienung bleibt 44 px. */
#panel-getraenke .gk-row{ padding:5px 8px; margin-bottom:4px; gap:0 8px }
#panel-getraenke .gk-grp{ margin:5px 0 3px; padding:3px 10px }
#panel-getraenke .gk-fest{ padding-bottom:4px }
#panel-getraenke .gk-bar{ margin:5px 0 0 }
#panel-getraenke .gk-bar input[type="search"]{ width:100%; min-height:var(--tap-min, 44px) }
/* Auch hier trug die Fußzeile noch die Maße ihres klebenden Zustands. */
#panel-getraenke.k-geteilt .gk-foot{
margin:0;
padding:6px var(--pad) calc(6px + var(--sab));
bottom:auto;
box-shadow:none;
border-radius:0;
gap:6px;
}
#panel-getraenke.k-geteilt .gk-foot .gk-send,
#panel-getraenke.k-geteilt .gk-foot .gk-btn{ white-space:nowrap }
/* Warenwert und Pfand stehen im Blatt, nicht in der Fußzeile. */
#panel-getraenke.k-geteilt .gk-foot .gk-st.extra{ display:none }
/* Die Zeile war 146 px hoch — fast drei Bäckerzeilen für einen Artikel.
Das Gebinde stand in einer eigenen Spalte, Name, Preis und Schnellwahl
darunter. Auf dem Telefon steht das Gebinde jetzt in der Preiszeile,
und die Vorschlagsknöpfe erscheinen nur dort, wo sie helfen: solange
noch nichts erfasst ist. Der Schrittzähler bleibt 44 px. */
#panel-getraenke .gk-row{ grid-template-columns:minmax(0,1fr); padding:5px 8px }
#panel-getraenke .gk-geb{ display:none }
/* Name, Vorschläge und Schrittzähler teilen sich ein Raster: Der Zähler
steht rechts über beide Textzeilen, die Vorschläge unter dem Namen.
Vorher stand jedes in einer eigenen Zeile — 146 px je Artikel. */
#panel-getraenke .gk-zeile{
grid-template-columns:minmax(0,1fr) auto auto;
gap:0 6px;
align-items:center;
}
#panel-getraenke .gk-chips{ display:contents }
#panel-getraenke .gk-step{ align-self:center }
#panel-getraenke .gk-sugg{ display:flex; gap:5px }
/* Zwei Vorschlagsknöpfe passen neben den Zähler nicht in eine Zeile.
Der übliche bleibt; die zuletzt bestellte Menge steht ohnehin als
Marke am Namen („letzte: 3"), sodass nichts verlorengeht. */
#panel-getraenke .gk-sugg button:nth-child(n+2){ display:none }
#panel-getraenke .gk-sugg button{ min-height:var(--tap-min, 44px); padding:0 9px }
#panel-getraenke .gk-row.has .gk-sugg{ display:none }
#panel-getraenke .gk-fest > .gk-subs{ display:none }
#panel-getraenke .gk-grp{ padding:3px 10px; font-size:12px; line-height:1.2 }
#panel-getraenke .gk-row{ padding:3px 10px }
#panel-getraenke .gk-nm{ line-height:1.25 }
/* Die Preiszeile darf die Zeile nicht auf drei Zeilen aufblaehen. */
#panel-getraenke .gk-pr{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
#panel-getraenke .gk-sugg button{ white-space:nowrap; font-size:12px }
/* Auf dem Telefon trägt „Neue Bestellung" nur das Symbol — die Kontextzeile
hat neben dem „i" keinen Platz für Text. */
#panel-getraenke .gk-neubest{ padding:0 10px }
#panel-getraenke .gk-neubest .lang{ display:none }
#panel-getraenke .gk-subs.im-blatt,
#panel-getraenke .gk-nur-tel{ display:flex }
}
/* Ab Tablet steht das Gebinde in seiner eigenen Spalte — dann entfällt die
Zeile darunter, sonst stünde es doppelt. */
@media (min-width:560px){
.gk-geb-klein{ display:none }
#panel-getraenke .gk-nm .gk-pr{ display:none }
}
/* Am Listenende: anlegen und leeren (Spec kiosk-bestellreiter-mobil, F2). */
.gk-listenende{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 4px }
.gk-listenende > button{ flex:1 1 140px; min-height:var(--tap, 48px) }
/* ═══════════════════════════════════════════════════════════════════════
16 Erfassung und Filter (Spec specs/kiosk-erfassung-filter)
Zwei Beschwerden: Die Portions-Erfassung bei Mair war auf dem Telefon
nicht ganz sichtbar und die Liste sprang danach; die Filter steckten im
Blatt hinter dem „i", wo sie niemand sucht.
═══════════════════════════════════════════════════════════════════════ */
/* ── 16.1 Gemeinsamer Filter-Baustein (F7, F8) ───────────────────────── */
.k-suchzeile{ display:flex; gap:6px; align-items:center; flex-wrap:wrap }
.k-suchzeile > input{ flex:1 1 160px; min-width:0 }
/* Suche und Filterzeile teilen sich eine Reihe, sobald der Platz reicht —
eine eigene Zeile kostete den Kopf sonst rund 50 px (Spec F2 des
Mobil-Umbaus verlangt höchstens 45 % Kopfbereich). */
.k-suchzeile .k-filterzeile{ margin:0; flex:1 1 100% }
@media (min-width:620px){
.k-suchzeile .k-filterzeile{ flex:0 1 auto }
.k-suchzeile .k-filterzeile button{ flex:0 0 auto }
}
.k-filterknopf{
position:relative; flex:0 0 auto;
width:var(--tap-min, 44px); height:var(--tap-min, 44px);
display:flex; align-items:center; justify-content:center;
border:1.5px solid var(--line, #e1ebe5); border-radius:var(--r-s);
background:var(--karte, #fff); color:var(--ink, #132a1e); cursor:pointer;
}
.k-filterknopf.aktiv{ border-color:var(--gr, #2e7d4f); background:var(--gr-t, #f5faf7);
color:var(--gr, #2e7d4f) }
.k-filterknopf svg{ width:19px; height:19px }
.k-filterknopf .punkt{
position:absolute; top:5px; right:5px; width:8px; height:8px;
border-radius:50%; background:var(--gr, #2e7d4f);
}
.k-filterzeile{ display:flex; gap:5px; margin:5px 0 0 }
.k-filterzeile button{
flex:1; min-height:var(--tap-min, 44px); padding:0 6px;
border:1.5px solid var(--line, #e1ebe5); border-radius:var(--r-s);
background:var(--karte, #fff); color:var(--mut, #688073);
font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
}
.k-filterzeile button.on{ border-color:var(--gr, #2e7d4f); background:var(--gr, #2e7d4f);
color:#fff }
.k-filterzeile .anz{ font-weight:700; opacity:.75 }
.k-filterblatt{
position:fixed; inset:0;
/* Dieselbe Ebene wie die übrigen Dialoge - sonst bleiben Fußzeile und
Reiterleiste über der Abdunkelung stehen. */
z-index:9000;
display:flex; align-items:flex-start; justify-content:flex-end;
padding:calc(76px + var(--sat, 0px)) 10px 10px;
background:rgba(16,24,40,.34);
}
.k-filterblatt[hidden]{ display:none }
.k-filterblatt-karte{
width:min(280px, 82%);
background:var(--karte, #fff); border-radius:14px; padding:11px;
box-shadow:0 12px 32px rgba(16,24,40,.28);
}
.k-filterblatt-karte h4{ margin:0 0 8px; font-size:12px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; color:var(--mut, #688073) }
.k-filterblatt-karte button{
display:flex; width:100%; align-items:center; gap:8px;
min-height:var(--tap-min, 44px); margin-bottom:5px; padding:0 11px;
border:1.5px solid var(--line, #e1ebe5); border-radius:var(--r-s);
background:var(--karte, #fff); color:var(--ink, #132a1e);
font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; text-align:left;
}
.k-filterblatt-karte button.on{ border-color:var(--gr, #2e7d4f);
background:var(--gr-t, #f5faf7); color:var(--gr, #2e7d4f) }
.k-filterblatt-karte .anz{ margin-left:auto; font-weight:700; opacity:.75 }
/* Zweiter Abschnitt im Blatt: Sprungmarken zu den Warengruppen. Sie standen
im „i" und sahen dort wie Filter aus. */
.k-filterblatt-t{ margin:12px 0 6px; font-size:12px; font-weight:700;
text-transform:uppercase; letter-spacing:.4px; color:var(--mut, #688073) }
.k-filterblatt-karte .gk-jump,
.k-filterblatt-karte .mb-jump{
display:flex; flex-wrap:wrap; gap:6px; overflow:visible; margin:0;
}
.k-filterblatt-karte .gk-jump button,
.k-filterblatt-karte .mb-jump button{
flex:0 1 auto; width:auto; min-height:var(--tap-min, 44px); padding:0 12px;
margin:0; text-align:center;
}
/* Die Höhe entscheidet, welche Form erscheint — beide stehen im Markup. */
@media (min-height:700px){
.k-filterknopf{ display:none }
}
@media (max-height:699px){
.k-filterzeile{ display:none }
}
/* ── 16.2 Erfassung bei Mair (F3, F4, F6) ────────────────────────────── */
/* Erste Reihe: Anzahl · vak · Einheit. Zweite Reihe: Mengen. */
.mb-erf{ display:flex; gap:6px; align-items:center; margin-bottom:5px }
.mb-erf .mb-step{ flex:0 0 auto }
#panel-metzgerbest .mb-vak{
flex:0 0 auto; gap:5px; min-height:36px; padding:0 9px; font-size:12.5px;
}
/* Der Haken im Kästchen ist ein Symbol, kein Textzeichen — sonst läse sich
die Beschriftung als „✓vak". `color:transparent` blendet ihn aus, solange
nicht vakuumiert wird. */
#panel-metzgerbest .mb-vak .box svg{ width:12px; height:12px }
.mb-erf .mb-einh{ flex:1 1 auto; min-width:0; flex-wrap:nowrap;
overflow-x:auto; scrollbar-width:none }
.mb-erf .mb-einh::-webkit-scrollbar{ display:none }
.mb-erf .mb-einh button{ flex:0 0 auto; min-height:36px }
.mb-mengen{ display:flex; gap:5px; align-items:center }
.mb-mengen .mb-kach{ flex:1 1 auto; min-width:0; flex-wrap:nowrap;
overflow-x:auto; scrollbar-width:none; gap:4px }
.mb-mengen .mb-kach::-webkit-scrollbar{ display:none }
.mb-mengen .mb-kach button{ flex:0 0 auto; min-width:40px; min-height:38px }
/* Freies Maß: Der Haken erscheint erst, wenn eine gültige Zahl dasteht —
so kostet er keinen Platz und ist trotzdem sichtbar (F4). Das frühere
„+ Hinzufügen" belegte dauerhaft eine Zeile und war irreführend, weil
eine Kachel bereits anlegt. */
.mb-frei{ position:relative; flex:0 0 auto }
#panel-metzgerbest .mb-frei .mb-mg{
width:92px; min-height:38px; padding:0 32px 0 8px; margin:0;
-moz-appearance:textfield;
}
#panel-metzgerbest .mb-frei .mb-mg::-webkit-outer-spin-button,
#panel-metzgerbest .mb-frei .mb-mg::-webkit-inner-spin-button{
-webkit-appearance:none; margin:0 }
.mb-frei-ok{
position:absolute; right:4px; top:50%; transform:translateY(-50%);
width:28px; height:28px; border:0; border-radius:7px;
background:var(--gr, #2e7d4f); color:#fff; cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.mb-frei-ok[hidden]{ display:none }
.mb-frei-ok svg{ width:15px; height:15px }
.mb-frei.bereit .mb-mg{ border-color:var(--gr, #2e7d4f) }
/* Kurzeingabe und Hinweisfeld kosten zusammen rund 120 px. Sie entfallen nur
dort, wo es wirklich eng ist: auf schmalen UND niedrigen Schirmen, also auf
Telefonen. Auf dem Tablet und am Rechner bleiben sie — dort ist die Liste
mehrspaltig und der Platz reicht, auch bei 800 px Fensterhöhe. */
.mb-hw-knopf{ display:none }
@media (max-height:819px) and (max-width:619px){
#panel-metzgerbest .mb-g.kurz,
#panel-metzgerbest .mb-g.hinweis{ display:none }
#panel-metzgerbest .mb-hw-knopf{ display:inline-flex; align-items:center }
}
html[data-theme="dark"] .k-filterblatt-karte{ background:var(--c-surf, #111827) }
html[data-theme="dark"] .k-filterknopf{ background:var(--c-surf2, #1f2933) }
/* ══════════════════════════════════════════════════════════════════════
17 Das Blatt hinter dem „i" — Bäcker, Mair und Getränke gemeinsam
Spec: specs/kiosk-infoblatt/spec.md
Rückmeldung aus dem Laden: „Info-Button reagiert nicht" und „die
Darstellung schaut nach nichts aus". Beides hatte dieselbe Ursache: Das
Blatt schob sich ohne jeden Kontrast von unten herein — der Hintergrund
blieb hell, nichts hob sich ab. Am Rechner lief es dabei über die volle
Breite von 1460 px und wirkte wie ein angehängter Fußbereich, nicht wie
ein Dialog.
Der Aufbau bleibt unverändert; nur die Gestaltung ist neu. Damit gilt
sie für alle drei Reiter, ohne dass drei Fachmodule angefasst werden.
── Warum jede Regel `.k-blatt-bereit` verlangt ──────────────────────
Diese Gestaltung setzt voraus, dass die Hilfeschicht
(js/kiosk-neu-shell.js) das Blatt umgruppiert hat: Karte, Kopf, Körper,
Fuß. Ohne diese Umgruppierung wäre das Blatt nur noch eine
bildschirmfüllende Schicht auf z-index 9000 — sie verdeckte den ganzen
Kiosk und fing jeden Klick ab.
Genau das ist beim Ausrollen passiert: Der Service Worker lieferte das
alte Skript aus seinem Zwischenspeicher, während das Gestaltungsblatt
schon neu war. Nach einem Tipp auf das „i" ließ sich nichts mehr
bedienen — die Knöpfe der Kopfzeile reagierten nicht mehr, nur
„Link in neuem Tab öffnen" ging noch.
Die Klasse setzt die Hilfeschicht erst, wenn die Karte wirklich steht.
Fehlt sie, gilt die alte Gestaltung weiter: unschön, aber bedienbar.
Bei einer PWA ist ein gemischter Stand kein Sonderfall, sondern der
Normalzustand während des Ausrollens.
══════════════════════════════════════════════════════════════════════ */
.bk-blatt.k-blatt-bereit,
.gk-blatt.k-blatt-bereit,
.mb-blatt.k-blatt-bereit{
position:fixed;
inset:0;
/* Auf der Ebene der übrigen Dialoge (.k-modal-bg, .bk-overlay). Mit dem
früheren Wert 60 lagen die feste Fußzeile und die Reiterleiste des
Telefons darüber: Sie blieben hell, während alles andere abdunkelte —
die Abdunkelung sah aus wie ein Darstellungsfehler. */
z-index:9000;
display:flex;
flex-direction:column;
justify-content:flex-end;
align-items:center;
padding:0;
background:rgba(15,23,42,.55);
border-radius:0;
box-shadow:none;
overflow:hidden;
/* Die frühere Regel begrenzte das Blatt auf 80 % der Fensterhöhe — als
es selbst die Karte war, ergab das Sinn. Jetzt ist es die
abdunkelnde Schicht und muss den ganzen Schirm einnehmen; sonst
blieben Fußzeile und Reiterleiste hell stehen (bei 844 px waren das
genau die fehlenden 169 px). Die Begrenzung sitzt jetzt an der Karte. */
max-height:none;
}
/* Verborgen heißt verborgen — und das muss stärker wiegen als die Regel
oben. Ohne diese Zeile fängt das geschlossene Blatt jeden Klick ab: Es
liegt mit `inset:0` über dem ganzen Kiosk, nur eben unsichtbar. Die
Regel braucht dieselbe Klasse, sonst gewinnt bei gleicher Spezifität
die später notierte. */
.bk-blatt.k-blatt-bereit[hidden],
.gk-blatt.k-blatt-bereit[hidden],
.mb-blatt.k-blatt-bereit[hidden]{ display:none }
/* Die eigentliche Karte. Sie wird von der Hilfeschicht beim Öffnen
eingezogen — ohne sie greift die Gestaltung oben gar nicht erst. */
.k-blatt-karte{
width:100%;
max-height:88%;
display:flex;
flex-direction:column;
background:var(--karte, #fff);
border-radius:18px 18px 0 0;
box-shadow:0 -12px 40px rgba(15,23,42,.3);
overflow:hidden;
animation:kBlattAuf .22s cubic-bezier(.32,.72,.35,1);
}
@keyframes kBlattAuf{
from{ transform:translateY(14px); opacity:.6 }
to{ transform:none; opacity:1 }
}
/* ── Kopf: Titel, Untertitel, Schließkreuz ─────────────────────────── */
.k-blatt-bereit .bk-blatt-kopf,
.k-blatt-bereit .gk-blatt-kopf,
.k-blatt-bereit .mb-blatt-kopf{
display:flex;
align-items:flex-start;
gap:11px;
flex:0 0 auto;
padding:15px 16px 15px calc(16px + var(--sal, 0px));
border-bottom:1px solid var(--line, #e1ebe5);
}
.k-blatt-bereit .bk-blatt-kopf h4,
.k-blatt-bereit .gk-blatt-kopf h4,
.k-blatt-bereit .mb-blatt-kopf h4{
margin:0; font-size:16px; line-height:1.3;
}
.k-blatt-bereit .bk-blatt-sub,
.k-blatt-bereit .gk-blatt-sub,
.k-blatt-bereit .mb-blatt-sub{
margin:0; font-size:13px; color:var(--mut, #688073); line-height:1.35;
}
.k-blatt-zu{
flex:0 0 auto;
width:38px; height:38px;
display:flex; align-items:center; justify-content:center;
border:0; border-radius:10px;
background:#f1f5f9;
color:var(--mut, #475569);
cursor:pointer;
}
.k-blatt-zu:hover{ background:#e2e8f0 }
.k-blatt-zu svg{ width:17px; height:17px }
/* ── Körper: rollt, wenn es eng wird ───────────────────────────────── */
.k-blatt-koerper{
flex:1 1 auto;
min-height:0;
overflow-y:auto;
padding:14px 16px 14px calc(16px + var(--sal, 0px));
}
.k-blatt-koerper > *:first-child{ margin-top:0 }
/* ── Abschnittsüberschriften ───────────────────────────────────────── */
.k-blatt-bereit .bk-blatt-t,
.k-blatt-bereit .gk-blatt-t,
.k-blatt-bereit .mb-blatt-t{
margin:14px 0 6px;
font-size:11.5px; font-weight:700;
text-transform:uppercase; letter-spacing:.05em;
color:var(--mut, #688073);
}
/* ── Hinweise: gekennzeichnete Kästen statt gleichrangiger Fließtext ──
Testbetrieb, Vorbelegung und Bestellschluss standen als lose Zeilen
zwischen allem anderen. Jetzt heben sie sich ab: Blau für Auskunft,
Bernstein für das, worauf zu achten ist. */
.k-blatt-bereit .gk-blatt-hinweis,
.k-blatt-bereit .bk-blatt-z,
.k-blatt-bereit .gk-blatt-z,
.k-blatt-bereit .mb-blatt-z{
border-top:0;
padding:10px 12px;
margin-bottom:8px;
border-radius:10px;
font-size:13px; line-height:1.45;
background:#eff6ff;
border-left:3px solid #2563eb;
color:#1e40af;
}
.k-blatt-bereit .bk-blatt-z svg,
.k-blatt-bereit .gk-blatt-z svg,
.k-blatt-bereit .mb-blatt-z svg{
width:15px; height:15px; color:currentColor; opacity:.8;
}
/* Solange der Testbetrieb läuft, geht die Bestellung nicht an den
Lieferanten. Das ist eine Warnung, keine beiläufige Auskunft. */
.k-blatt-bereit .bk-blatt-z.klein,
.k-blatt-bereit .gk-blatt-z.klein,
.k-blatt-bereit .mb-blatt-z.klein{
background:#fffbeb;
border-left-color:#d97706;
color:#92400e;
font-size:12.5px;
}
/* Die Terminzeile ist ein Formularfeld, kein Hinweis. */
.k-blatt-bereit .gk-blatt-z:has(input[type="date"]),
.k-blatt-bereit .bk-blatt-z:has(input[type="date"]){
background:none; border-left:0; padding:0; margin-bottom:12px;
display:flex; flex-direction:column; align-items:stretch; gap:5px;
color:inherit;
}
.k-blatt-bereit .gk-blatt-z label,
.k-blatt-bereit .bk-blatt-z label{
flex:0 0 auto;
font-size:11.5px; font-weight:700;
text-transform:uppercase; letter-spacing:.05em;
color:var(--mut, #688073);
}
.k-blatt-bereit .gk-blatt-z input[type="date"],
.k-blatt-bereit .bk-blatt-z input[type="date"]{
width:100%; min-height:var(--tap-min, 44px);
border:1.5px solid var(--line, #e1ebe5); border-radius:10px;
padding:0 12px; font:inherit; font-size:15px;
background:var(--karte, #fff);
}
.k-blatt-bereit .gk-blatt-z input[type="date"]:focus,
.k-blatt-bereit .bk-blatt-z input[type="date"]:focus{
outline:none; border-color:var(--gr, #2e7d4f);
}
/* ── Bereichswechsel: gleich breite Teile in einem Rahmen ──────────── */
.k-blatt-bereit .gk-subs.im-blatt,
.k-blatt-bereit .mb-subs.im-blatt,
.k-blatt-bereit .bk-sub.im-blatt{
display:flex; gap:0;
border:1.5px solid var(--line, #e1ebe5);
border-radius:10px; overflow:hidden;
background:#f8fafc;
margin:0 0 12px;
}
.k-blatt-bereit .gk-subs.im-blatt button,
.k-blatt-bereit .mb-subs.im-blatt button,
.k-blatt-bereit .bk-sub.im-blatt button{
flex:1; min-height:var(--tap-min, 44px);
border:0; border-right:1px solid var(--line, #e1ebe5); border-radius:0;
background:none; color:var(--mut, #475569);
font:inherit; font-size:13.5px; font-weight:600; cursor:pointer;
}
.k-blatt-bereit .gk-subs.im-blatt button:last-child,
.k-blatt-bereit .mb-subs.im-blatt button:last-child,
.k-blatt-bereit .bk-sub.im-blatt button:last-child{ border-right:0 }
.k-blatt-bereit .gk-subs.im-blatt button.on,
.k-blatt-bereit .mb-subs.im-blatt button.on,
.k-blatt-bereit .bk-sub.im-blatt button.on{
background:var(--gr, #2e7d4f); color:#fff;
}
/* Im Dialog ist die Überschrift „Bereich" hilfreich — sie war bisher nur
auf dem Telefon vorgesehen, weil der Wechsel dort ausschließlich im
Blatt steht. */
.k-blatt-bereit .gk-nur-tel,
.k-blatt-bereit .mb-nur-tel,
.k-blatt-bereit .bk-nur-tel{ display:block }
/* ── Aktionen: Liste mit Symbol statt Wand aus Knöpfen ─────────────── */
.k-blatt-akt{
display:flex; flex-direction:column; gap:1px;
background:var(--line, #e1ebe5);
border:1px solid var(--line, #e1ebe5);
border-radius:10px; overflow:hidden;
margin:0 0 12px;
}
.k-blatt-akt > button,
.k-blatt-akt > .kn-knopf{
display:flex; align-items:center; gap:11px;
width:100%; min-height:46px; margin:0;
padding:9px 13px;
border:0; border-radius:0;
background:var(--karte, #fff);
color:var(--ink, #132a1e);
font:inherit; font-size:13.5px; font-weight:600;
text-align:left; cursor:pointer;
}
.k-blatt-akt > button:hover,
.k-blatt-akt > .kn-knopf:hover{ background:#f0f7ec }
.k-blatt-akt > button svg,
.k-blatt-akt > .kn-knopf svg{
width:17px; height:17px; flex:0 0 auto; color:var(--gr, #2e7d4f);
}
/* ── Fuß: der Schließen-Knopf ──────────────────────────────────────── */
.k-blatt-fuss{
flex:0 0 auto;
display:flex; gap:9px; justify-content:flex-end;
padding:12px 16px calc(12px + var(--sab, 0px));
border-top:1px solid var(--line, #e1ebe5);
background:#fafbfc;
}
.k-blatt-bereit .bk-blatt-zu,
.k-blatt-bereit .gk-blatt-zu,
.k-blatt-bereit .mb-blatt-zu{
width:auto; min-width:120px;
min-height:var(--tap-min, 44px); margin:0;
padding:0 22px;
border-radius:10px;
border:1.5px solid var(--line, #e1ebe5);
background:var(--karte, #fff);
font:inherit; font-weight:600; cursor:pointer;
}
.k-blatt-bereit .bk-blatt-zu:hover,
.k-blatt-bereit .gk-blatt-zu:hover,
.k-blatt-bereit .mb-blatt-zu:hover{
background:#f0f7ec; border-color:var(--gr, #2e7d4f);
}
/* ── Ab Tablet: ein Dialog in der Mitte ─────────────────────────────
Über die volle Breite eines 1460-px-Schirms sah das Blatt aus wie eine
angehängte Fußleiste. Ein Dialog sagt dagegen: Hier ist jetzt etwas zu
entscheiden. Auf dem Telefon bleibt das Blatt von unten — dort ist es
mit dem Daumen erreichbar und deshalb richtig. */
@media (min-width:700px){
.bk-blatt.k-blatt-bereit,
.gk-blatt.k-blatt-bereit,
.mb-blatt.k-blatt-bereit{
align-items:center; justify-content:center;
flex-direction:row;
padding:24px;
}
.k-blatt-bereit .k-blatt-karte{
width:min(100%, 460px);
max-height:min(100%, 640px);
border-radius:16px;
box-shadow:0 24px 60px rgba(15,23,42,.34);
animation:kDialogAuf .2s cubic-bezier(.32,.72,.35,1);
}
@keyframes kDialogAuf{
from{ transform:scale(.97); opacity:0 }
to{ transform:none; opacity:1 }
}
}
html[data-theme="dark"] .k-blatt-karte{ background:var(--c-surf, #111827) }
html[data-theme="dark"] .k-blatt-fuss{ background:var(--c-surf2, #1f2933) }
html[data-theme="dark"] .k-blatt-akt > button,
html[data-theme="dark"] .k-blatt-akt > .kn-knopf{
background:var(--c-surf, #111827); color:#e2e8f0;
}
/* Vorblendung aus dem Artikelstamm: dauerhaft hinterlegt, deshalb etwas
kraeftiger als der blasse Wert der letzten Bestellung. Beide bleiben
gestrichelt - sie sind ein Anhalt, noch keine Erfassung. */
.mb-frueher.stamm{ border-color:#a7c4b5; color:#4a7c59 }
.mb-frueher.stamm:hover{ border-color:var(--gr, #2e7d4f); color:var(--gr, #2e7d4f) }
/* Artikelstamm: die hinterlegte Standard-Portionierung steht als zweite
Zeile unter dem Namen - sie ist eine Eigenschaft des Artikels, kein
eigenes Feld in der Reihe. */
.mb-aname{ display:flex; flex-direction:column; gap:2px }
.mb-astd{ font-weight:400; font-size:.8rem; color:#4a7c59 }
.mb-astd.leer{ color:#9aa3a0; font-style:italic }
/* Erklaerzeile unter einem Eingabefeld im Blatt. */
.mb-dlg-hint{ font-size:.82rem; line-height:1.45; color:#5c6b66;
padding:0 2px 4px }
/* Kopfzeile ueber dem Artikelstamm: Anzahl links, Anlegen rechts. */
.mb-akopf{ display:flex; align-items:center; justify-content:space-between;
gap:10px; margin:0 0 10px }
.mb-azahl{ font-size:.85rem; color:#5c6b66; font-weight:600 }
/* Die Artikelmaske hat sechs Felder - zweispaltig, damit sie ohne Rollen
auf einen Blick passt.
Die Grenzen richten sich nach der BREITE DES BLATTES, nicht des Schirms:
Ab 1180 px dockt jedes Blatt als schmale Spalte rechts an (min(560px,
42vw), siehe oben). Darin waeren zwei Spalten zu eng - dort also wieder
einspaltig. Zweispaltig lohnt nur dazwischen, wo das Blatt mittig als
640-px-Karte steht. */
.mb-aform{ display:grid; grid-template-columns:minmax(0,1fr); gap:10px }
/* Grid-Spalten haben von Haus aus min-width:auto. Die Erfassung in der
Vorbelegung ist breiter als ihre Spalte und sprengte damit den ganzen
Dialog ueber den Bildschirmrand hinaus - minmax(0,1fr) erlaubt das
Schrumpfen. */
.mb-aform > *{ min-width:0 }
@media (min-width:600px) and (max-width:1179px){
.mb-aform{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.mb-aform label.weit,
.mb-aform .weit{ grid-column:1 / -1 }
}
/* Vorbelegung in der Artikelmaske.
Erfasst wird mit DERSELBEN Oberflaeche wie eine Bestellposition — samt
Hinweisfeld: Es gibt Artikel, die immer denselben Hinweis brauchen
("ohne Knochen"), und Artikel mit Hinweis ganz ohne feste Portion.
Nicht hierher gehoert nur der Umweg-Knopf zum Hinweis-Blatt: Das Feld
steht ja direkt daneben. */
.mb-vgfeld{ display:flex; flex-direction:column; gap:4px }
.mb-vglbl{ font-size:12px; font-weight:600; color:#6b7280 }
.mb-vgbox{ border:1.5px solid var(--c-border,#e5e7eb); border-radius:9px;
padding:8px; background:var(--c-bg,#f6f7f6) }
.mb-vgchips{ margin:0 0 8px }
.mb-vgleer{ font-size:.82rem; color:#9aa3a0; font-style:italic }
.mb-vgbox .mb-ed{ margin:0; border:0; padding:0; background:transparent }
.mb-vgbox .mb-g.hinweis{ display:block }
.mb-vgbox .mb-hw-knopf,
.mb-vgbox .mb-acts:empty{ display:none }
/* Fester Kopf der Reiter „Verlauf" und „Artikel".
Roll-Container ist #panel-metzgerbest (position:absolute, overflow-y:auto),
alle Elemente dazwischen sind statisch — sticky greift also hier. Der
negative obere Rand samt Polsterung haelt den Block im Ruhezustand an
seinem Platz und laesst ihn beim Rollen die ganze obere Kante abdecken,
sodass darunter nichts durchscheint. */
.mb-kopffest{
/* `top` muss den negativen Aussenabstand ausgleichen: sticky rechnet
ihn mit, sonst klebt die sichtbare Kante um --pad zu tief und der
Inhalt rollt durch den Spalt darueber. Nachgemessen waren das 14 px,
in denen die Artikelnamen sichtbar vorbeizogen.
(Spec metzger-artikelliste, F1) */
position:sticky; top:calc(var(--pad) * -1); z-index:20;
margin:calc(var(--pad) * -1) 0 8px;
padding:var(--pad) 0 6px;
background:var(--c-bg,#f1f3f2);
}
.mb-kopffest .mb-akopf{ margin:6px 0 0 }
/* ══ Artikelstamm: eine ruhige Liste statt hundert Kaertchen ══════════
Rueckmeldung: „So viel Leerraum." Die Zeile war ein Flexbau mit
.mb-aname{flex:1} – der Name dehnte sich ueber den freien Platz und
drueckte alles Uebrige an den Rand. Warengruppe und Preis sprangen
dadurch von Zeile zu Zeile. Jetzt feste Spalten, also eine Flucht.
(Spec metzger-artikelliste, F2–F7) */
#panel-metzgerbest .mb-artikel{
background:#fff;
border-radius:12px;
box-shadow:0 1px 3px rgba(0,0,0,.07);
overflow:hidden;
}
#panel-metzgerbest .mb-artikel .mb-arow{
display:grid;
/* Sechs Kinder, also sechs Spalten: Nummer, Bezeichnung (mit Vorgabe),
Warengruppe, Preis und die beiden Schaltflaechen. Mit nur fuenf
Spalten fiel „Ausblenden" in eine zweite Rasterreihe und die Zeile
wurde 110 statt 48 px hoch. (Spec metzger-artikelliste, F2/F5) */
/* Feste Spaltenbreiten statt `auto`: Jede Zeile ist ein EIGENES Raster,
`auto` richtet sich also pro Zeile nach dem Inhalt — die Spalten
standen dadurch nicht in einer Flucht (gemessen: Warengruppe mal bei
875, mal bei 880 px). Feste Breiten halten die Flucht ueber alle
102 Zeilen. (Spec metzger-artikelliste, F2/F3) */
grid-template-columns:44px minmax(0,1fr) 116px 74px 104px 104px;
align-items:center;
gap:10px;
background:transparent;
border-radius:0;
box-shadow:none;
margin:0;
padding:6px 12px;
border-top:1px solid #eef1f0;
}
#panel-metzgerbest .mb-artikel .mb-arow:first-child{ border-top:0 }
#panel-metzgerbest .mb-artikel .mb-arow:hover{ background:#f7faf8 }
#panel-metzgerbest .mb-artikel .mb-arow.aus{ opacity:1; background:#fbfcfc }
#panel-metzgerbest .mb-artikel .mb-arow.aus .mb-aname{ color:#8a9491 }
#panel-metzgerbest .mb-artikel .mb-nr{
min-height:0; padding:2px 0;
font-size:.75rem; font-variant-numeric:tabular-nums;
text-align:center; color:#6b7280;
}
#panel-metzgerbest .mb-artikel .mb-aname{
flex:none; min-width:0;
font-size:.92rem; line-height:1.25;
/* Bezeichnung und Vorgabe UNTEREINANDER. Nebeneinander wurden beide
abgeschnitten („Hackfleisch gemisc…", „6 × 250 g (va…") — und es
kostet keine Hoehe: Die Zeile wird ohnehin von der 44 px hohen
Schaltflaeche bestimmt, zwei Textzeilen (rund 32 px) passen
hinein. (Spec metzger-artikelliste, F9) */
flex-direction:column; align-items:stretch; gap:1px;
overflow:hidden;
}
/* Der Name darf schrumpfen, die Vorgabe rueckt nach. `min-width:0` ist
noetig, weil Flex-Elemente sonst nie unter ihre Mindestbreite gehen
und die Vorgabe aus der Spalte draengen wuerden. */
#panel-metzgerbest .mb-artikel .mb-atxt{
flex:0 1 auto; min-width:0;
/* Umbrechen statt kappen: „Die Vorgaben muessen schon lesbar sein und
auch die Bezeichnung." Ein abgeschnittener Artikelname hilft
niemandem. Die Zeile wird nur dann hoeher, wenn der Name wirklich
lang ist. (Spec metzger-artikelliste, F9) */
overflow:visible; white-space:normal; overflow-wrap:anywhere;
}
#panel-metzgerbest .mb-artikel .mb-astd{
font-size:.75rem; line-height:1.2;
min-width:0;
flex:0 1 auto;
/* Auch die Vorgabe wird umgebrochen statt gekappt: „2 × 500 g,
6 × 250 g (vak.)" ist abgeschnitten wertlos. */
overflow:visible; white-space:normal; overflow-wrap:anywhere;
}
/* Wichtig: NICHT `justify-self:end` — dann schrumpft die Box auf die
Textbreite und die linke Kante wandert mit der Textlaenge. Die Box
fuellt die Spalte, nur der Text wird rechts ausgerichtet. So stehen
beide Kanten fest. (Spec metzger-artikelliste, F2/F3) */
#panel-metzgerbest .mb-artikel .mb-agrp{
text-align:right;
font-size:.72rem; color:#8a9491;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#panel-metzgerbest .mb-artikel .mb-apreis{
text-align:right;
font-size:.78rem; color:#4b5563;
font-variant-numeric:tabular-nums; /* Betraege stehen untereinander */
white-space:nowrap;
}
/* Die beiden Schaltflaechen als eigene Gruppe, damit sie umbrechen
koennen, ohne das Raster zu sprengen. */
/* Die Schaltflaechen behalten ueberall die projektweite Antippgroesse.
Sie wird in dieser Datei mit `min-height:var(--tap-min) !important`
gesetzt — eine bewusste Grundsatzentscheidung, die hier nicht
ausgehebelt wird. Der Platzgewinn kommt stattdessen aus der
einzeiligen Zeile und aus der Nutzung der Breite (siehe unten).
(Spec metzger-artikelliste, F5) */
#panel-metzgerbest .mb-artikel .mb-arow .mb-btn{
padding:0 10px;
width:100%;
font-size:.8rem; border-radius:8px; white-space:nowrap;
display:inline-flex; align-items:center; justify-content:center;
}
#panel-metzgerbest .mb-artikel .mb-arow .mb-btn:first-of-type{
background:#2e7d4f; color:#fff; border-color:#2e7d4f; font-weight:600;
}
#panel-metzgerbest .mb-artikel .mb-arow .mb-btn:last-of-type{
background:#fff; color:#4b5563;
}
/* Schmale Schirme: Angaben und Schaltflaechen in eigene Reihen. */
/* Mittlere Breiten (641–1023 px): Der Bezeichnung fehlt Platz, sie wurde
gekappt. Die Warengruppe ist hier die entbehrlichste Angabe — ohne sie
sind Bezeichnung und Vorgabe wieder vollstaendig lesbar, und die Zeile
bleibt einreihig. (Spec metzger-artikelliste, F9) */
@media (min-width:641px) and (max-width:1023px){
#panel-metzgerbest .mb-artikel .mb-arow{
grid-template-columns:40px minmax(0,1fr) 70px 100px 100px;
}
#panel-metzgerbest .mb-artikel .mb-agrp{ display:none }
}
@media (max-width:640px){
#panel-metzgerbest .mb-artikel .mb-arow{
grid-template-columns:38px minmax(0,1fr) auto;
row-gap:6px; padding:8px 10px;
}
/* Auf dem Telefon ist Umbrechen besser als Kappen: Die Zeile ist hier
ohnehin mehrreihig, und ein abgeschnittener Artikelname hilft
niemandem. (Spec metzger-artikelliste, F9) */
#panel-metzgerbest .mb-artikel .mb-atxt,
#panel-metzgerbest .mb-artikel .mb-astd{
white-space:normal; overflow:visible; text-overflow:clip;
}
/* Hier ist die Spalte zu schmal fuer zwei Angaben nebeneinander — die
Vorgabe rueckt wieder unter den Namen. (Spec metzger-artikelliste, F9) */
#panel-metzgerbest .mb-artikel .mb-aname{
flex-direction:column; align-items:stretch; gap:2px;
}
#panel-metzgerbest .mb-artikel .mb-agrp{ grid-column:2; justify-self:start; text-align:left }
#panel-metzgerbest .mb-artikel .mb-apreis{ grid-column:3 }
#panel-metzgerbest .mb-artikel .mb-arow .mb-btn:first-of-type{ grid-column:2 }
#panel-metzgerbest .mb-artikel .mb-arow .mb-btn:last-of-type{ grid-column:3 }
}
/* Breite Schirme: zwei Artikel nebeneinander ───────────────────────────
Rueckmeldung: „Du beruecksichtigst die Breite nicht." Auf 1600 px
stand die Liste einspaltig, rechts blieb Leerraum, und von 102
Artikeln waren 16 zu sehen. Zwei Spalten verdoppeln das, ohne dass
die Zeile enger wird als noetig. (Spec metzger-artikelliste, F10) */
@media (min-width:1500px){
#panel-metzgerbest .mb-artikel{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:10px;
}
/* In der halben Breite muessen die festen Spalten schmaler werden,
sonst wird die Bezeichnung gedrueckt und die Zeile bricht um. */
#panel-metzgerbest .mb-artikel .mb-arow{
grid-template-columns:36px minmax(0,1fr) 92px 66px 92px 92px;
padding-left:10px; padding-right:10px;
gap:8px;
}
#panel-metzgerbest .mb-artikel .mb-arow .mb-btn{ padding:0 6px; font-size:.75rem }
#panel-metzgerbest .mb-artikel .mb-agrp{ font-size:.68rem }
/* Die obere Trennlinie entfaellt sonst nur bei der ersten Zeile —
bei zwei Spalten stehen die ersten ZWEI Zeilen oben. */
#panel-metzgerbest .mb-artikel .mb-arow:nth-child(2){ border-top:0 }
#panel-metzgerbest .mb-artikel .mb-arow:nth-child(odd){ border-right:1px solid #eef1f0 }
}
/* Ein vorgeblendeter Hinweis ist keine Menge, sondern Text — er wird
kursiv gesetzt, damit er in der Reihe der Mengen-Kacheln nicht als
Portion missverstanden wird. Umbrechen darf er wie die übrigen
Vorblendungen auch. */
.mb-frueher.hw{ font-style:italic; max-width:18em }