/* MeoloPOS – Oberfläche (ab 1.7: modernes, einheitliches Design).
   Farben, Schrift, Abstände und Rundungen kommen aus den Variablen hier; der Abschnitt „Design“ am Dateiende gleicht alle Bereiche an. */
:root {
  --page: #f3f5f8; --panel: #fff; --ink: #1d2733; --muted: #687587; --line: #e1e6ec; --line-2: #cfd6df;
  --bar: #141b25; --bar-2: #1f2935; --bar-ink: #fff; --bar-line: #0b1017;
  --btn: #fff; --btn-hover: #f2f5f9; --btn-down: #e7ecf2;
  --primary: #2563eb; --primary-dark: #1d4ed8; --primary-ink: #fff; --primary-soft: #e8f0fe;
  --accent: #dc2626; --ok: #16a34a; --ok-dark: #15803d; --warn: #f59e0b; --ready: #16a34a;
  --busy-bg: #fff7e6; --busy-line: #f59e0b;
  --radius: 10px; --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.18);
  --list: #fff; --list-hover: #f2f5f9; --list-line: #e1e6ec; --chev: #9aa6b5;
  --tab: #fff; --tab-line: #d5dce4; --tab-active: #1d2733;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); font: 16px/1.3 var(--font); }
h1, h2, h3 { margin: 0 0 12px; font-weight: 700; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }
.muted { color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.right { text-align: right; }
.stack > * + * { margin-top: 12px; }

/* Tasten */
button {
  font: inherit; font-weight: 700; cursor: pointer; color: var(--ink);
  background: var(--btn); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7em 1em; text-shadow: 0 1px 0 #f3f3f3; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
button:hover { background: var(--btn-hover); }
button:active { background: var(--btn-down); box-shadow: none; }
button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
button:disabled { opacity: .45; cursor: default; }
button.primary, button.sel, .tabs button.active { background: var(--primary); border-color: var(--primary-dark); color: var(--primary-ink); text-shadow: 0 1px 0 #059; }
button.ok { background: var(--ok); border-color: var(--ok-dark); color: #fff; text-shadow: 0 1px 0 #1d5e1d; }
button.danger { background: var(--accent); border-color: #b02e27; color: #fff; text-shadow: 0 1px 0 #8a1f19; }
button.link { border: 0; background: none; box-shadow: none; color: inherit; text-decoration: underline; padding: 4px; text-shadow: none; font-weight: 400; }
button.big { padding: .9em 1.2em; font-size: 1.05rem; }
input, select, textarea { font: inherit; padding: .55em .6em; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; width: 100%; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 6px var(--primary); }
label { display: block; font-size: .85rem; color: var(--muted); margin: 8px 0 4px; }

/* Inhaltsblöcke */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.panel > h3:first-child, .panel > .row:first-child h3 { margin: -14px -14px 12px; padding: 9px 14px; background: #e9e9e9; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; text-shadow: 0 1px 0 #fff; }
.panel > .row:first-child { margin: -14px -14px 12px; padding: 9px 14px; background: #e9e9e9; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.panel > .row:first-child h3 { margin: 0; padding: 0; background: none; border: 0; }

/* Kopfleiste + Navigationsleiste */
[hidden] { display: none !important; }
#topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; background: var(--bar); color: var(--bar-ink); border-bottom: 1px solid var(--bar-line); text-shadow: 0 1px 0 #111; }
.brand { order: 1; flex: 1; text-align: center; font-weight: 700; padding: 11px 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who { order: 2; position: absolute; right: 8px; top: 6px; font-size: .85rem; display: flex; gap: 6px; align-items: center; }
#whoName { opacity: .8; }
#logoutBtn { background: var(--bar-2); color: #fff; border: 1px solid #000; text-decoration: none; font-weight: 700; padding: 5px 10px; border-radius: var(--radius); text-shadow: 0 1px 0 #111; box-shadow: none; }
#nav { order: 3; width: 100%; display: flex; border-top: 1px solid #333; }
#nav button {
  flex: 1 1 0; min-width: 0; border-radius: 0; border: 0; border-right: 1px solid #111; box-shadow: none;
  background: var(--bar-2); color: #fff; text-shadow: 0 1px 0 #111; padding: 6px 2px 7px; font-size: .78rem;
  display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative;
}
#nav button:last-child { border-right: 0; }
#nav button:hover { background: #333; }
#nav button.active { background: var(--primary); text-shadow: 0 1px 0 #059; }
#nav button::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
#nav .badge { position: absolute; top: 3px; left: calc(50% + 8px); background: var(--accent); border-radius: 9px; padding: 0 6px; font-size: .72rem; line-height: 17px; }
#nav [data-v="tische"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E"); }
#nav [data-v="abholen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4a8 8 0 0 0-8 8v2h16v-2a8 8 0 0 0-8-8zm-1-3h2v2h-2zM2 16h20v3H2z'/%3E%3C/svg%3E"); }
#nav [data-v="kueche"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9h18v2h-1v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8H3zm4-6h2v4H7zm4-1h2v5h-2zm4 1h2v4h-2z'/%3E%3C/svg%3E"); }
#nav [data-v="bar"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 3h16l-7 9v7h4v2H7v-2h4v-7z'/%3E%3C/svg%3E"); }
#nav [data-v="pruefung"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 0 1 6.3 12.9l5.4 5.4-1.4 1.4-5.4-5.4A8 8 0 1 1 10 2zm0 2a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm-1 2h2v3h3v2h-3v3H9v-3H6V9h3z'/%3E%3C/svg%3E"); }
#nav [data-v="rechnungen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2zm3 5v2h8V7zm0 4v2h8v-2zm0 4v2h5v-2z'/%3E%3C/svg%3E"); }
#nav [data-v="umsatz"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 20h18v2H3zM5 11h3v8H5zm5-6h3v14h-3zm5 3h3v11h-3z'/%3E%3C/svg%3E"); }
#nav [data-v="verwaltung"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2h4l.6 2.6 2.3 1 2.3-1.4 2.8 2.8-1.4 2.3 1 2.3L24 12v0l-2.4.4-1 2.3 1.4 2.3-2.8 2.8-2.3-1.4-2.3 1L14 22h-4l-.6-2.6-2.3-1-2.3 1.4L2 17l1.4-2.3-1-2.3L0 12l2.4-.6 1-2.3L2 6.8 4.8 4l2.3 1.4 2.3-1zm2 6a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E"); }
main { padding: 14px 16px 24px; max-width: var(--page-w, 1260px); margin: 0 auto; }

/* Anmeldung */
.login { max-width: 380px; margin: 4vh auto; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.login .keypad { margin-bottom: 16px; }
.login .listview { border-bottom: 0; }
.login .listview li:last-child { border-bottom: 0; }
.login .user-drop { position: relative; margin: 6px 16px 18px; text-align: left; }
.login .user-drop > button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; font-size: 1.1rem; font-weight: 600; border: 1px solid var(--line-2, #cbd5e1); border-radius: 12px; background: #fff; box-shadow: none; text-shadow: none; }
.login .user-drop > button .ph { color: var(--muted); font-weight: 500; }
.login .user-drop > button .chev { transition: transform .15s; font-size: .9rem; color: var(--muted); }
.login .user-drop.open > button { border-color: var(--primary); border-radius: 12px 12px 0 0; }
.login .user-drop.open > button .chev { transform: rotate(180deg); }
.login .user-pop { display: none; border: 1px solid var(--primary); border-top: 0; border-radius: 0 0 12px 12px; background: #fff; overflow: hidden; }
.login .user-drop.open .user-pop { display: block; }
.login .user-pop input { display: block; width: calc(100% - 20px); box-sizing: border-box; margin: 10px; }
.login .user-scroll { max-height: max(180px, calc(100dvh - 440px)); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--list-line); }
.login .user-pop .listview { border-top: 0; }
.login .user-pop .listview li button { padding-top: 13px; padding-bottom: 13px; }
.login .user-none { margin: 14px; text-align: center; }
.login .user-new { margin: 10px; }
.login .user-new button { width: 100%; }
.login .login-train { margin-top: 4px; margin-bottom: 12px; }
.login .login-train button { width: 100%; padding: 12px 16px; }
.login > *:not(.bar-title):not(.listview) { margin-left: 16px; margin-right: 16px; }
.bar-title { background: var(--bar); color: #fff; font-weight: 700; padding: 11px; text-shadow: 0 1px 0 #111; position: relative; }
.bar-title .btn-back { position: absolute; left: 8px; top: 6px; padding: 4px 10px; font-size: .85rem; background: var(--bar-2); color: #fff; border-color: #000; text-shadow: 0 1px 0 #111; box-shadow: none; }
.pin-display { font-size: 2rem; letter-spacing: 12px; height: 50px; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: inset 0 1px 3px rgba(0,0,0,.1); margin-bottom: 14px; background: #fff; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keypad button { font-size: 1.5rem; padding: 16px 0; }

/* Listen mit Pfeil (Listview) */
.listview { list-style: none; margin: 0; padding: 0; text-align: left; border-top: 1px solid var(--line); }
.listview li { border-bottom: 1px solid var(--line); }
.listview li button { width: 100%; text-align: left; border: 0; border-radius: 0; box-shadow: none; background: var(--list); padding: 16px 48px 16px 18px; position: relative; text-shadow: none; font-size: 1.05rem; }
.listview li button:hover { background: var(--list-hover); }
.listview li { border-bottom: 1px solid var(--list-line); }
.listview li button::after { content: ""; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--chev) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M5 2l5 5-5 5-1.4-1.4L7.2 7 3.6 3.4z'/%3E%3C/svg%3E") center/15px no-repeat; }

/* Tabs / Kategorien als Tastengruppe */
.tabs { display: flex; flex-wrap: wrap; margin-bottom: 12px; gap: 0; }
.tabs > button { border-radius: 0; margin-left: -1px; box-shadow: none; }
.tabs > button:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.tabs > button:nth-last-child(1 of button) { border-radius: 0 var(--radius) var(--radius) 0; }
.tabs .spacer + button { border-radius: var(--radius); margin-left: 0; }

/* Tische */
.tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.table-tile { text-align: center; padding: 12px 8px; min-height: 104px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-weight: 400; }
.table-tile .name { font-weight: 700; font-size: 1.15rem; }
.table-tile.busy { background: var(--busy-bg); border-color: var(--busy-line); }
.table-tile.ready { background: #e3f4e3; border-color: var(--ready); }
.table-tile .sum { font-weight: 700; }
.table-tile .muted { font-size: .82rem; }

/* Bestellansicht */
.order-layout { display: grid; grid-template-columns: 1fr 380px; gap: 14px; align-items: start; }
@media (max-width: 900px) { .order-layout { grid-template-columns: 1fr; } }
.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.product { text-align: center; min-height: 78px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border-bottom: 5px solid var(--prodcolor, var(--line)); padding: 10px 6px 7px; }
.product .price { color: var(--muted); font-size: .85rem; font-weight: 400; }
.lines { list-style: none; padding: 0; margin: 0; }
.lines li { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.lines li:last-child { border-bottom: 0; }
.lines .qty { min-width: 30px; font-weight: 700; }
.lines .name { flex: 1; min-width: 0; }
.lines .note { display: block; font-size: .85rem; color: var(--accent); }
.lines .note.disc-note, .kb-line small.disc-note { color: var(--ok-dark); }
.lines button { padding: 4px 10px; }
.total { font-size: 1.2rem; font-weight: 700; display: flex; justify-content: space-between; padding-top: 10px; border-top: 2px solid var(--ink); }
.status { font-size: .72rem; padding: 2px 7px; border-radius: 9px; background: #eee; white-space: nowrap; font-weight: 700; }
.status.offen { background: #fbd9d6; color: #8a1f19; }
.status.in_arbeit { background: #ffe4b3; color: #7a4a00; }
.status.fertig { background: #cdeccd; color: #1d5e1d; }
.status.serviert { background: #e5e5e5; color: var(--muted); }
.check { width: 22px; height: 22px; flex: none; box-shadow: none; }

/* Küche / Bar: Arbeitsbons */
.tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ticket { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; padding: 0 10px 10px; }
.ticket h3 { display: flex; justify-content: space-between; margin: 0 -10px 6px; padding: 9px 10px; background: var(--bar); color: #fff; text-shadow: 0 1px 0 #111; }
.ticket.old h3 { background: var(--accent); text-shadow: 0 1px 0 #8a1f19; }
.ticket .meta { color: var(--muted); font-size: .82rem; margin-bottom: 8px; }
.ticket .item { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--line); border-left: 6px solid var(--prodcolor, var(--line)); margin-bottom: 5px; background: var(--btn); }
.ticket .item.in_arbeit { background: #fff3d6; }
.ticket .item .n { font-weight: 700; font-size: 1.1rem; }
.ticket .item .note { color: var(--accent); font-weight: 700; display: block; }

/* Rechnung / Druck */
.receipt { font-family: ui-monospace, "Courier New", monospace; font-size: 13px; width: 300px; max-width: 100%; background: #fff; padding: 14px; border: 1px dashed var(--line); margin: 0 auto; color: #000; }
.receipt .c { text-align: center; }
.receipt table { width: 100%; border-collapse: collapse; }
.receipt td { vertical-align: top; padding: 1px 0; }
.receipt td.right { white-space: nowrap; }
.receipt hr { border: 0; border-top: 1px dashed #000; }
#printArea { display: none; }
@media print {
  body > *:not(#printArea) { display: none !important; }
  #printArea { display: block; }
  #printArea .receipt { border: 0; width: 72mm; padding: 0; }
  @page { margin: 4mm; }
}

table.list { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
table.list th, table.list td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
table.list th { font-size: .82rem; color: #fff; background: var(--bar-2); text-shadow: 0 1px 0 #111; }
table.list tr:nth-child(odd) td { background: #fbfbfb; }
table.list td.num, table.list th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.list tr.click { cursor: pointer; }
table.list tr.click:hover td { background: #eaf3fb; }
.strike { text-decoration: line-through; color: var(--muted); }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2 > * { min-width: 0; }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.kpi .v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Dialog */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.dialog { background: #fff; border-radius: var(--radius); padding: 0 16px 16px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 0 12px rgba(0,0,0,.6); }
.dialog > h3:first-child { margin: 0 -16px 14px; padding: 11px 16px; background: var(--bar); color: #fff; text-shadow: 0 1px 0 #111; }
.qrscan { position: relative; background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; }
.qrscan video { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrscan-frame { position: absolute; inset: 18% 24%; border: 3px solid rgba(255,255,255,.9); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.dialog > .receipt:first-child, .dialog > #rcpt:first-child { margin-top: 16px; }
.dialog .actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: #222; color: #fff; padding: 10px 18px; border-radius: var(--radius); z-index: 100; box-shadow: 0 0 12px rgba(0,0,0,.4); }
#toast.err { background: var(--accent); }

.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.qr-grid .panel { text-align: center; font-size: .8rem; word-break: break-all; }

@media (max-width: 600px) {
  .brand { padding: 11px min(calc(var(--who-w, 108px) + 12px), calc(100% - 48px)) 11px 12px; text-align: left; }
  #topbar.eng #brand, #topbar.eng #testPill { display: none; }
  #nav button { font-size: .68rem; }
  #whoName, .who .app-ver { display: none; }
  .who { gap: 4px; max-width: calc(100% - 16px); overflow-x: auto; scrollbar-width: none; }
  .who .test-pill { padding: 2px 7px; font-size: .7rem; }
}

/* ---------- Bestellansicht ---------- */
.fullscreen #topbar { display: none; }
.fullscreen main { padding-top: 0; }
.os-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; background: #000; color: #fff; margin: 0 -16px 18px; padding: 8px 12px; border-bottom: 1px solid #222; }
.hdr-title { flex: 1; text-align: center; font-weight: 700; font-size: 1.25rem; text-shadow: 0 1px 0 #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-btn { background: #2d2d2d; color: #fff; border: 1px solid #444; text-shadow: 0 1px 0 #000; box-shadow: none; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: .95rem; }
.hdr-btn:hover { background: #3a3a3a; }
.hdr-icon { padding: 8px 18px; }
.ico-back, .ico-down { width: 24px; height: 24px; border-radius: 50%; background: #fff no-repeat center/16px; flex: none; }
.ico-back { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 2 1 8l6 6 1.4-1.4L4.8 9H15V7H4.8l3.6-3.6z'/%3E%3C/svg%3E"); }
.ico-down { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 1h2v10.2l3.6-3.6L14 9l-6 6-6-6 1.4-1.4L7 11.2z'/%3E%3C/svg%3E"); }
.order-wrap { max-width: 860px; margin: 0 auto; }
.tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--tab-line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.tabbar button { border: 0; border-left: 1px solid var(--tab-line); border-radius: 0; box-shadow: none; background: var(--tab); color: #222; text-shadow: none; padding: 16px 6px; font-size: 1.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabbar button:first-child { border-left: 0; }
.tabbar button:hover { background: #f4ea66; }
.tabbar button.active { background: var(--tab-active); color: #fff; text-shadow: 0 1px 0 #000; }
.search-row { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.search-row input { flex: 1; min-width: 0; font-family: "Courier New", ui-monospace, monospace; font-size: 1.05rem; padding: 12px; border-color: #b9ae4a; box-shadow: 0 0 8px rgba(51,136,204,.45); }
.kasse-btn { background: var(--list); border: 1px solid var(--list-line); color: #000; text-shadow: none; font-size: 1.15rem; padding: 14px 22px; white-space: nowrap; }
.kasse-btn:hover { background: var(--list-hover); }
.listview.cyan { border: 1px solid var(--list-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.listview .lv-head { background: #222; color: #fff; font-weight: 700; padding: 12px 18px; font-size: 1.05rem; text-shadow: 0 1px 0 #000; border-bottom: 1px solid #000; display: flex; align-items: center; gap: 10px; }
.listview .lv-back { width: auto; background: #3a3a3a; color: #fff; border: 1px solid #555; padding: 4px 12px 4px 10px; font-size: .9rem; text-shadow: none; }
.listview .lv-back::before { content: "‹ "; }
.listview .lv-back::after { display: none; }
.listview .lv-empty { padding: 16px 18px; background: var(--list); color: #333; }
.listview li button[data-p] { display: flex; align-items: center; gap: 12px; }
.listview li button[data-p]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M6 2h2v4h4v2H8v4H6V8H2V6h4z'/%3E%3C/svg%3E"); }
.lv-main { flex: 1; min-width: 0; }
.lv-aside { font-weight: 400; color: #234; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.lv-aside .count { background: #333; color: #fff; border-radius: 10px; padding: 1px 8px; font-weight: 700; font-size: .85rem; }
@media (max-width: 600px) {
  .tabbar button { font-size: .95rem; padding: 14px 4px; }
  .hdr-btn { padding: 8px 10px; }
  .kasse-btn { padding: 12px 14px; }
}

/* Gutscheine */
#nav [data-v="gutscheine"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 6h20v4a2 2 0 0 0 0 4v4H2v-4a2 2 0 0 0 0-4zm7 2v8h2V8zm4 0v8h2V8z'/%3E%3C/svg%3E"); }
#nav [data-v="online"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 7V6a5 5 0 0 1 10 0v1h3l-1 15H5L4 7zm2 0h6V6a3 3 0 0 0-6 0z'/%3E%3C/svg%3E"); }
.vstat { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .8rem; font-weight: 700; background: #ddd; color: #333; }
.vstat.gültig { background: #d4f5d4; color: #1d6b1d; }
.vstat.eingelöst { background: #e3e3e3; color: #555; }
.vstat.abgelaufen { background: #ffe9c2; color: #8a5a00; }
.vstat.gesperrt { background: #fbd4d4; color: #9c1c1c; }
.mono, .v-code { font-family: ui-monospace, "Courier New", monospace; letter-spacing: .05em; }
[data-amt].active { background: var(--list); border-color: var(--chev, #2a9); font-weight: 700; }
.voucher .v-title { font-size: 20px; font-weight: 700; letter-spacing: .3em; margin-top: 4px; }
.voucher .v-value { font-size: 30px; font-weight: 700; margin: 6px 0; }
.voucher .v-qr svg { width: 130px; height: 130px; margin: 6px auto 0; display: block; }
.voucher .v-code { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.voucher.v-label .v-qr svg { width: 80px; height: 80px; margin: 4px auto; }

/* Drucker */
.bonpreview { font-family: ui-monospace, "Courier New", monospace; font-size: 12px; line-height: 1.35; background: #fff; color: #000; border: 1px dashed var(--line);
  padding: 12px; margin: 10px auto; width: calc(var(--w) * 1ch + 26px); max-width: 100%; overflow-x: auto; white-space: pre; }
.bonpreview .b { font-weight: 700; }
.bonpreview .big { font-size: 2em; line-height: 1.1; }
.bonpreview .big.x3 { font-size: 3em; }
.bonpreview .gap { display: block; height: calc(var(--g) * 4px); margin-top: -1.35em; }
.bonpreview .big.x4 { font-size: 4em; }
.bonpreview .qrbox { display: block; text-align: center; }
.bonpreview .qrbox svg { width: var(--qr, 110px); height: var(--qr, 110px); }
pre.cfg { background: #222; color: #e8e8e8; padding: 10px 12px; border-radius: 6px; font-size: 12.5px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; }

/* Produktverwaltung */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.chips button { border-radius: 18px; padding: 7px 14px; font-weight: 600; }
.chips button .n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: rgba(0,0,0,.08); font-size: .8rem; text-align: center; }
.chips button.active { background: var(--primary); border-color: var(--primary-dark); color: var(--primary-ink); text-shadow: none; }
.chips button.active .n { background: rgba(255,255,255,.25); }
.prod-tools { margin-bottom: 12px; gap: 8px; }
.prod-tools #pQ { flex: 1; min-width: 160px; }
.prod-group { margin-bottom: 16px; }
.prod-group-head { display: flex; align-items: center; gap: 10px; background: #222; color: #fff; padding: 9px 12px; border-radius: var(--radius) var(--radius) 0 0; font-weight: 700; }
.prod-group-head .muted { color: #bbb; font-weight: 400; font-size: .85rem; }
.prod-group-head .spacer { flex: 1; }
.prod-group-head button.link { color: #9fe3e6; }
.prod-table { border-radius: 0 0 var(--radius) var(--radius); }
.prod-table td { vertical-align: middle; }
.prod-table .sw { width: 22px; }
.prod-table .sw span { display: block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); }
.prod-table .pn { font-weight: 600; }
.prod-table .pd, .prod-table .pv { width: 1%; white-space: nowrap; }
.prod-table .pp { width: 1%; white-space: nowrap; }
.prod-table .pact { width: 1%; }
.prod-table tr.inactive .pn, .prod-table tr.inactive .pp { color: #999; text-decoration: line-through; }
.dest { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: .78rem; font-weight: 700; background: #eee; color: #555; }
.dest.kueche { background: #ffe3cc; color: #8a4500; }
.dest.bar { background: #d6ecff; color: #0b5394; }
.switch { position: relative; display: inline-block; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: #ccc; border-radius: 12px; transition: background .15s; }
.switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s; }
.switch input:checked + span { background: #3aa63a; }
.switch input:checked + span::before { transform: translateX(18px); }
@media (max-width: 600px) { .prod-table .pv { display: none; } .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } .chips button { flex: none; } }

/* Kassieren: oben offen, unten Rechnung */
.paybox { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 10px; }
.pb-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--list); border-bottom: 1px solid var(--list-line); font-weight: 700; }
.pb-head.bill { background: #cdeccd; border-top: 1px solid var(--line); border-bottom-color: #9fcf9f; }
.pb-head button { padding: 4px 12px; }
.paylist { max-height: 30vh; overflow: auto; }
.paylist li { padding: 0; }
.pl-row { display: flex; gap: 8px; align-items: center; width: 100%; padding: 10px; border: 0; border-radius: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 48px; }
.pl-row:hover, .pl-row:focus-visible { background: var(--btn-hover); }
.pl-arrow { font-size: 1.2rem; color: var(--chev); min-width: 20px; text-align: center; }
.paylist.bill .pl-row:hover { background: var(--btn-hover); }
.pl-empty { padding: 12px 10px !important; color: var(--muted); font-style: italic; }

/* Bewirtungsbeleg */
.checkline { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-weight: 600; cursor: pointer; }
.checkline input { width: 20px; height: 20px; margin: 0; }
.bewirtung { margin-top: 18px; padding-top: 12px; border-top: 2px dashed #000; }
.bewirtung .bw-line { border-bottom: 1px solid #000; height: 22px; }
@media print { .bewirtung { break-before: auto; } }

/* Verwaltung → Kassenbon */
.rc-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rc-preview { position: sticky; top: 10px; }
.rc-h { margin: 18px 0 4px; font-size: 1rem; border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.rc-h:first-child { margin-top: 0; }
.rc-hint { font-size: .85rem; margin: -2px 0 6px 28px; }
.seg { display: flex; justify-content: center; margin-bottom: 8px; }
.seg button { border-radius: 0; }
.seg button:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.seg button:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg button.active { background: var(--tab-active); border-color: var(--tab-active); color: #fff; text-shadow: none; }
.receipt .r-big { font-size: 1.35em; }
.receipt .r-qr { margin-top: 8px; }
.receipt .r-qr svg { width: 110px; height: auto; }
@media (max-width: 900px) { .rc-layout { grid-template-columns: 1fr; } .rc-preview { position: static; } }

/* Kassenbons-Übersicht */
.tag { display: inline-block; padding: 1px 7px; border-radius: 9px; background: #cdeccd; color: #1d5e1d; font-size: .72rem; font-weight: 700; }
.inv-act { white-space: nowrap; text-align: right; }
.inv-act button { padding: 5px 10px; margin-left: 4px; font-size: .9rem; }
.inv-pr { white-space: nowrap; }
.strike .inv-act, .strike .inv-pr { text-decoration: none; }
.inv-wrap { overflow-x: auto; }
.inv-period { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 10px; }
.inv-period .seg { margin: 0; }
.inv-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inv-nav input, .inv-nav select { width: auto; }
.inv-nav [data-step] { min-width: 40px; font-weight: 700; }
.inv-sum { margin: 4px 0 8px; }
.inv-act .sm { display: none; }
.m-date { display: none; font-size: .8rem; }
@media (max-width: 700px) {
  .inv-list .hide-m { display: none; }
  .inv-list td, .inv-list th { padding-left: 6px; padding-right: 6px; }
  .inv-act .lg { display: none; }
  .inv-act .sm { display: inline; }
  .m-date { display: block; }
  .inv-list .inv-act button { display: block; width: 100%; margin: 0 0 4px; padding: 6px 8px; }
  .inv-list .inv-pr { white-space: normal; font-size: .85rem; }
}

/* Gänge */
/* Gang-Leiste im Stil der Reiter (gelb, aktiv dunkel) */
.coursebar { display: flex; align-items: stretch; margin-bottom: 12px; border: 1px solid var(--tab-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.coursebar > span { display: flex; align-items: center; padding: 0 12px; background: var(--tab-active); color: #fff; font-weight: 700; }
.coursebar button { flex: 1; border: 0; border-left: 1px solid var(--tab-line); border-radius: 0; box-shadow: none; background: var(--tab); color: #222; text-shadow: none; padding: 10px 6px; white-space: nowrap; }
.coursebar button:hover { background: #f4ea66; }
.coursebar button.active { background: var(--tab-active); color: #fff; text-shadow: 0 1px 0 #000; }
.coursebar .sm { display: none; }
@media (max-width: 600px) { .coursebar .sm { display: inline; } }
.course-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding-bottom: 4px; border-bottom: 2px solid var(--line); font-weight: 700; }
.course-head:first-child { margin-top: 0; }
.course-head button { padding: 6px 12px; }
.course-sel { width: auto; padding: 4px 6px; font-size: .85rem; }
.status.held { background: #e5e5e5; color: var(--muted); }
.lines li.is-held { opacity: .75; }
.ticket .course-tag { margin: 8px 0 2px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.ticket .later { margin-top: 10px; padding: 6px 8px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--page); }
.ticket .later-h { font-size: .8rem; font-weight: 700; color: var(--muted); }
.ticket .later .item { opacity: .7; cursor: default; }
.ticket.waiting { opacity: .8; }
@media (max-width: 600px) {
  .coursebar > span { display: none; }
  .coursebar button { flex: 1 1 0; min-width: 0; padding: 10px 2px; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
  .coursebar button:first-of-type { border-left: 0; }
  .coursebar .lg { display: none; }
}
@media (max-width: 600px) {
  .lines li:has(.course-sel) { flex-wrap: wrap; }
  .lines li:has(.course-sel) .name { flex: 1 1 calc(100% - 140px); }
  .course-sel { order: 5; margin-left: 38px; }
  .lines li:has(.course-sel) button { order: 6; }
}

/* Küche: abgerufene Gänge */
.calls { display: grid; gap: 8px; margin-bottom: 14px; }
.call { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--busy-bg); border: 2px solid var(--busy-line); box-shadow: var(--shadow); animation: callpulse 1.6s ease-in-out 3; }
.call b { font-size: 1.15rem; }
.call-ico { font-size: 1.6rem; color: var(--warn); }
.call-meta { font-size: .85rem; color: var(--muted); }
.call button { white-space: nowrap; }
.ticket.has-call { border: 2px solid var(--busy-line); }
.ticket.has-call h3 { background: var(--warn); text-shadow: 0 1px 0 #a86a10; }
.ticket .course-tag.called { color: var(--ink); background: var(--busy-bg); padding: 3px 6px; border-radius: var(--radius); }
@keyframes callpulse { 50% { box-shadow: 0 0 0 6px rgba(240,160,48,.35); } }
@media (max-width: 600px) { .call { flex-wrap: wrap; } .call button { width: 100%; } }

/* Bestellauswahl: Kategorien und Produkte hellgrau wie die Tasten */
.order-wrap .listview.cyan { border-color: var(--line); }
.order-wrap .listview li { border-bottom-color: var(--line); }
.order-wrap .listview li button, .order-wrap .listview .lv-empty { background: var(--btn); }
.order-wrap .listview li button:hover { background: var(--btn-hover); }
.order-wrap .listview li button:active { background: var(--btn-down); }
.order-wrap .listview .lv-head button.lv-back { background: #3a3a3a; }

/* Versionsnummer */
.version { font-size: .8rem; text-align: center; margin: 14px 0 0; }
.lic-dialog { width: min(760px, 100%); }
.lic-text { white-space: pre-wrap; word-break: break-word; font-size: .75rem; line-height: 1.4; max-height: 60vh; overflow: auto; margin: 0; padding: 10px; border: 1px solid rgba(128,128,128,.35); border-radius: 8px; }

/* Vollbild-Knopf in der Kopfleiste (nur wenn der Browser Vollbild kann) */
#fsBtn, #themeBtn { background: var(--bar-2); color: #fff; border: 1px solid #000; box-shadow: none; text-shadow: none; padding: 3px 8px; min-height: 26px; font-size: 1.05rem; line-height: 1; border-radius: var(--radius); }
#fsBtn.on { background: var(--primary); }
.vollbild-tipp { font-size: .82rem; padding: 0 16px; }
/* Als App vom Home-Bildschirm bzw. im Vollbild: Ränder von Notch und Home-Leiste freihalten */
@media (display-mode: fullscreen), (display-mode: standalone) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); }
}

/* Update in der Verwaltung */
.upd-steps { padding-left: 20px; margin: 0 0 8px; }
.upd-msg { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius); background: #e5f4e8; color: #1f6b30; }
.upd-msg.err { background: #fde8e6; color: #a1261d; }
.upd-msg.warn { background: #fff4d6; color: #7a5300; }
.cl-tables .cl-tlist { margin: 6px 0; max-height: 160px; overflow-y: auto; }
.cl-tables .checkline { margin: 2px 0; font-size: inherit; font-weight: normal; color: inherit; }
#updFile { padding: 8px; }

/* TSE */
.receipt .tse { font-size: 11px; }
.receipt .tse td.right { white-space: normal; word-break: break-all; padding-left: 6px; }
.receipt .tse table { width: 100%; table-layout: fixed; }
.receipt .tse td:first-child { width: 36%; }
.receipt .tse .r-qr svg { width: 150px; }
.grid-tse { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 14px 0; }
@media (max-width: 900px) { .grid-tse { grid-template-columns: minmax(0, 1fr); } }
#tseState { margin-top: 0; }
#tseState .row { gap: 10px; flex-wrap: wrap; }
#tseInfo td.mono { word-break: break-all; font-size: .85em; }
#tseJobs td.small, .muted.small, p.small { font-size: .85em; }
#tseJobs td.mono { word-break: break-all; }

/* Beilagen-Auswahl */
.sidegroup { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 12px 8px; margin: 0 0 12px; }
.sidegroup legend { font-weight: 700; padding: 0 6px; }
.sidegroup legend .muted { font-weight: 400; margin-left: 6px; }
.check-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.check-row:last-child { border-bottom: 0; }
.check-row input { width: 22px; height: 22px; margin: 0; flex: none; }
.check-row .spacer { flex: 1; }
.sg-row { display: flex; gap: 8px; margin: 0 0 6px; }
.sg-row [data-sgn] { flex: 1; min-width: 0; }
.sg-row [data-sgp] { width: 96px; flex: none; text-align: right; }
.sg-row button { width: 44px; flex: none; }
.tap-row { display: flex; gap: 8px; padding: 6px 0 2px; }
.tap-row button { min-height: 64px; font-size: 1.3em; }
.tap-minus { width: 64px; flex: none; }
.tap-row .tap-n { width: 76px; flex: none; min-height: 64px; font-size: 1.3em; text-align: center; font-weight: 700; }
.tap-plus { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.tap-plus .tap-price:empty { display: none; }
.row.wrap { flex-wrap: wrap; }
.check-row span:not(.muted) { color: var(--ink); }

/* ================= Design (1.7) ================= */
html, body { font: 15.5px/1.4 var(--font); -webkit-font-smoothing: antialiased; }
h2 { font-size: 1.3rem; letter-spacing: -.01em; }
h3 { font-size: 1.02rem; }

/* Tasten: flach, klare Kanten, keine Schatten-Schrift */
button { font-weight: 600; text-shadow: none; border-color: var(--line-2); border-radius: var(--radius-sm); box-shadow: 0 1px 1px rgba(16,24,40,.04);
  transition: background-color .12s, border-color .12s, box-shadow .12s; }
button:hover { background: var(--btn-hover); border-color: #b9c3cf; }
button.primary, button.sel, .tabs button.active { background: var(--primary); border-color: var(--primary); color: #fff; text-shadow: none; }
button.primary:hover, button.sel:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
button.ok { background: var(--ok); border-color: var(--ok); text-shadow: none; }
button.ok:hover { background: var(--ok-dark); }
button.danger { background: #fff; border-color: #f3b4b4; color: var(--accent); text-shadow: none; }
button.danger:hover { background: #fdecec; }
.dialog .actions button.danger:only-of-type, button.danger.solid { background: var(--accent); color: #fff; border-color: var(--accent); }
button.link { color: var(--primary); text-decoration: none; font-weight: 600; }
button.link:hover { background: none; text-decoration: underline; }
input, select, textarea { border-color: var(--line-2); border-radius: var(--radius-sm); box-shadow: none; padding: .6em .7em; }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
input[type=checkbox], input[type=radio] { accent-color: var(--primary); }
label { font-size: .82rem; font-weight: 600; color: var(--muted); }

/* Karten */
.panel { border-color: var(--line); border-radius: var(--radius); padding: 16px; }
.panel > h3:first-child, .panel > .row:first-child { margin: -16px -16px 14px; padding: 12px 16px; background: none; border-bottom: 1px solid var(--line); text-shadow: none; border-radius: var(--radius) var(--radius) 0 0; }
.kpi .v { font-size: 1.55rem; letter-spacing: -.01em; }
.kpi .muted:first-child { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }

/* Kopf- und Navigationsleiste */
#topbar { background: var(--bar); border-bottom: 0; text-shadow: none; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.brand { font-weight: 700; letter-spacing: .01em; }
#logoutBtn, #fsBtn, #themeBtn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); text-shadow: none; border-radius: var(--radius-sm); }
#logoutBtn:hover, #fsBtn:hover, #themeBtn:hover { background: rgba(255,255,255,.16); }
#nav { border-top: 1px solid rgba(255,255,255,.06); padding: 4px 6px 6px; gap: 4px; background: var(--bar); }
#nav button { background: transparent; border: 0; border-radius: var(--radius-sm); color: #aeb9c7; text-shadow: none; font-weight: 600; padding: 7px 2px; }
#nav button:hover { background: rgba(255,255,255,.07); color: #fff; }
#nav button.active { background: var(--primary); color: #fff; text-shadow: none; }
#nav .badge { box-shadow: 0 0 0 2px var(--bar); }

/* Anmeldung */
.login { border-radius: 16px; box-shadow: var(--shadow-lg); border: 0; margin-top: 6vh; }
.bar-title { background: var(--panel); color: var(--ink); text-shadow: none; font-size: 1.1rem; padding: 16px; border-bottom: 1px solid var(--line); }
.bar-title .btn-back { background: var(--btn); color: var(--ink); border-color: var(--line-2); text-shadow: none; top: 11px; }
.pin-display { border-color: var(--line-2); border-radius: var(--radius); box-shadow: none; background: #f8fafc; }
.keypad button { font-size: 1.45rem; font-weight: 600; border-radius: 12px; }

/* Listen */
.listview li, .listview li:last-child { border-bottom: 1px solid var(--line); }
.listview li button { background: var(--list); font-weight: 600; text-shadow: none; padding: 15px 48px 15px 18px; }
.listview li button:hover { background: var(--list-hover); }
.listview li button::after { background-color: transparent; width: 20px; height: 20px; margin-top: -10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%239aa6b5' d='M5 2l5 5-5 5-1.4-1.4L7.2 7 3.6 3.4z'/%3E%3C/svg%3E"); background-size: 14px; }
.listview li button[data-p]::after { background-color: var(--primary-soft); border-radius: 50%; width: 26px; height: 26px; margin-top: -13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%232563eb' d='M6 2h2v4h4v2H8v4H6V8H2V6h4z'/%3E%3C/svg%3E"); }
.listview.cyan, .order-wrap .listview.cyan { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.listview .lv-head { background: #f8fafc; color: var(--ink); text-shadow: none; border-bottom: 1px solid var(--line); font-size: .95rem; padding: 11px 18px; }
.listview .lv-back, .order-wrap .listview .lv-head button.lv-back { background: var(--btn); color: var(--ink); border: 1px solid var(--line-2); }
.listview .lv-empty, .order-wrap .listview .lv-empty { background: var(--panel); color: var(--muted); }
.order-wrap .listview li button { background: var(--panel); }
.lv-aside { color: var(--muted); font-weight: 600; }
.lv-aside .count { background: var(--primary); }

/* Reiter und Segmente: einheitliche Segmentleiste */
.tabs { gap: 4px; background: #e8ecf1; padding: 4px; border-radius: 12px; }
.tabs > button, .tabs > button:first-child, .tabs > button:nth-last-child(1 of button) { border: 0; border-radius: var(--radius-sm); margin: 0; background: transparent; box-shadow: none; padding: .55em .9em; color: #46525f; }
.tabs > button:hover { background: rgba(255,255,255,.7); }
.tabs > button.active { background: var(--panel); color: var(--ink); box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.tabs .spacer + button, .tabs .spacer + button.primary { border-radius: var(--radius-sm); background: var(--primary); color: #fff; }
.seg { gap: 4px; background: #e8ecf1; padding: 4px; border-radius: 12px; display: inline-flex; }
div.seg { display: flex; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
.seg button, .seg button:first-child, .seg button:last-child { border: 0; border-radius: var(--radius-sm); background: transparent; box-shadow: none; color: #46525f; }
.seg button.active { background: var(--panel); color: var(--ink); border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.chips button { border-radius: 999px; font-weight: 600; }
.chips button.active { background: var(--ink); border-color: var(--ink); }

/* Bestellansicht (Reiter oben, Gang-Leiste) */
.os-header { background: var(--bar); border-bottom: 0; }
.hdr-btn { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); text-shadow: none; }
.hdr-btn:hover { background: rgba(255,255,255,.16); }
.tabbar { border: 0; background: #e8ecf1; padding: 4px; gap: 4px; border-radius: 12px; box-shadow: none; }
.tabbar button, .tabbar button:first-child { border: 0; border-radius: var(--radius-sm); background: transparent; color: #46525f; padding: 12px 6px; font-size: 1rem; }
.tabbar button:hover { background: rgba(255,255,255,.7); }
.tabbar button.active { background: var(--panel); color: var(--ink); text-shadow: none; box-shadow: 0 1px 3px rgba(16,24,40,.14); }
.search-row input { font-family: var(--font); border-color: var(--line-2); box-shadow: none; }
.search-row input:focus { box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.kasse-btn { background: var(--ok); border-color: var(--ok); color: #fff; font-size: 1.05rem; }
.kasse-btn:hover { background: var(--ok-dark); }
.coursebar { border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); box-shadow: none; }
.coursebar > span { background: transparent; color: var(--muted); font-size: .85rem; }
.coursebar button { border: 0; border-left: 1px solid var(--line); background: transparent; color: #46525f; font-weight: 600; }
.coursebar button:hover { background: var(--btn-hover); }
.coursebar button.active { background: var(--primary-soft); color: var(--primary-dark); text-shadow: none; box-shadow: inset 0 -2px 0 var(--primary); }
.course-head { border-bottom: 1px solid var(--line); color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.total { border-top: 1px solid var(--ink); }

/* Tische */
.tables { gap: 12px; }
.table-tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.table-tile:hover { border-color: #b9c3cf; background: var(--panel); }
.table-tile.busy { background: var(--busy-bg); border-color: #f6c56a; box-shadow: inset 4px 0 0 var(--warn), var(--shadow); }
.table-tile.ready { background: #ecfdf3; border-color: #86d6a5; box-shadow: inset 4px 0 0 var(--ok), var(--shadow); }

/* Status-Marken */
.status, .tag, .vstat, .dest { border-radius: 999px; font-weight: 600; }
.status.offen { background: #fdecec; color: #b42318; }
.status.in_arbeit { background: #fff4db; color: #93590a; }
.status.fertig { background: #e3f8eb; color: #146c34; }

/* Küche / Bar */
.ticket { border-radius: 12px; border-color: var(--line); }
.ticket h3 { background: var(--bar); text-shadow: none; padding: 10px 12px; }
.ticket.old h3 { background: var(--accent); text-shadow: none; }
.ticket.has-call h3 { background: var(--warn); text-shadow: none; }
.ticket .item { background: #f8fafc; border-color: var(--line); border-radius: var(--radius-sm); }
.ticket .item.in_arbeit { background: var(--busy-bg); }

/* Tabellen */
table.list { border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.list th { background: #f8fafc; color: var(--muted); text-shadow: none; font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--line); }
table.list tr:nth-child(odd) td { background: transparent; }
table.list tr:last-child td { border-bottom: 0; }
table.list tr.click:hover td { background: var(--primary-soft); }
.prod-group-head { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-bottom: 0; }
.prod-group-head .muted { color: var(--muted); }
.prod-group-head button.link { color: var(--primary); }
.prod-table { border-radius: 0 0 var(--radius) var(--radius); }
.switch input:checked + span { background: var(--ok); }

/* Kassieren */
.paybox { border-radius: var(--radius); background: var(--panel); }
.pb-head { background: #f8fafc; border-bottom-color: var(--line); }
.pb-head.bill { background: #ecfdf3; border-bottom-color: #b7e4c7; }
.pl-arrow { color: var(--primary); }

/* Dialoge */
.overlay { background: rgba(15,23,35,.5); backdrop-filter: blur(2px); }
.dialog { border-radius: 16px; box-shadow: var(--shadow-lg); padding: 0 20px 20px; }
.dialog > h3:first-child { background: var(--panel); color: var(--ink); text-shadow: none; margin: 0 -20px 16px; padding: 16px 20px; border-bottom: 1px solid var(--line); font-size: 1.1rem; position: sticky; top: 0; z-index: 1; }
.dialog .actions { padding-top: 14px; border-top: 1px solid var(--line); }
#toast { border-radius: 999px; background: var(--ink); box-shadow: var(--shadow-lg); font-weight: 600; }
#toast.err { background: var(--accent); }

/* Sonstiges */
pre.cfg { background: var(--bar); border-radius: var(--radius-sm); }
.upd-msg { border-radius: var(--radius-sm); }
.sidegroup { border-radius: var(--radius); }
@media (max-width: 600px) {
  main { padding: 12px 12px 24px; }
  #nav { padding: 3px 3px 5px; gap: 2px; }
  .tabbar button { font-size: .9rem; padding: 11px 2px; }
  .os-header { margin: 0 -12px 14px; }
}
.tabs.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.tabs.scroll > button { flex: none; }
.dialog .actions { position: sticky; bottom: -20px; background: var(--panel); margin: 16px -20px -20px; padding: 14px 20px 20px; }
@media (max-width: 600px) { #nav button { font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }

/* Farbwähler (Produktfarbe, Akzentfarbe der Speisekarte) */
input[type=color] { width: 72px; height: 42px; padding: 3px; cursor: pointer; }

/* Kategorien zum Aufklappen in der Bestellansicht */
.listview li button.acc { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.listview li button.acc::after { transform: rotate(90deg); transition: transform .15s; }
.listview li button.acc.open::after { transform: rotate(-90deg); }
.listview li button.acc.open { background: var(--list-hover); }
.listview .acc-n { color: var(--muted); font-size: .85rem; font-weight: 500; min-width: 22px; text-align: right; }
.order-wrap .listview li.acc-in > button, .order-wrap .listview li.acc-in.lv-empty { background: #f8fafc; }
.order-wrap .listview li.acc-in > button.acc { background: #eef2f7; }
.listview .lv-head .acc-close::before { content: none; }
.cat-sub { color: var(--muted, #6b7280); }

/* Pfad über der Kategorienliste */
.listview .lv-trail { flex-wrap: wrap; row-gap: 6px; }
.listview .trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.listview .trail .trail-link { width: auto; padding: 2px 4px; border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; opacity: .8; box-shadow: none; }
.listview .trail .trail-link::after { display: none; }
.listview .trail .trail-link:hover { opacity: 1; background: none; }
.listview .trail .trail-sep { opacity: .5; }
.listview .trail .trail-now { font-weight: 700; }

/* Allergene und Zusatzstoffe */
.marks { font-size: .75em; font-weight: 500; color: var(--muted); vertical-align: super; margin-left: 2px; }
.marks-edit { margin-top: 12px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.marks-edit summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--ink); }
.marks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2px 14px; margin-top: 8px; }
.marks-grid label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .88rem; font-weight: 400; color: var(--ink); }
.marks-grid input { width: auto; margin: 0; }

/* Tagesbestand */
.stock { font-size: .78rem; font-weight: 700; padding: 1px 7px; border-radius: 8px; background: #e6f0e8; color: #24613a; white-space: nowrap; }
.stock.low { background: #fff1d6; color: #8a5a00; }
.stock.out { background: #fde2e2; color: #b42318; }
li.soldout > button { opacity: .55; }
li.soldout > button .lv-main { text-decoration: line-through; }

/* Happy Hour */
.hh-bar { margin: 0 0 10px; padding: 10px 14px; border-radius: 10px; background: #fff1d6; color: #6b4500; font-size: .95rem; }
.hh-price { color: #b45309; font-weight: 700; }
.chip-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; color: var(--ink); }
.chip-check input { width: auto; margin: 0; }
/* Personalessen: Mitarbeiter antippen (gewählt farbig, lange Listen scrollen) */
.eigen-staff { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; max-height: 40vh; overflow-y: auto; }
.eigen-staff .chip-check { padding: 10px 14px; background: #fff; cursor: pointer; }
.eigen-staff .chip-check:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Menü zum Festpreis */
.menu-slot { padding: 10px 0; border-top: 1px solid var(--line); }
.menu-slot:first-child { border-top: 0; }
.menu-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.menu-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; background: #eef3fb; font-size: .9rem; font-weight: 600; }
.menu-chip button { border: 0; background: none; padding: 2px 6px; min-height: 0; color: var(--muted); }
.stock.menu { background: #e8eefc; color: #1d4ed8; }

/* Breite Bestellansicht für Tablet und PC (ab 760 px): Kategorien links, Kacheln in der Mitte, Bestellung rechts */
.ow-cats, .ow-cart { display: none; }
main:has(.order-wrap.wide) { max-width: var(--page-w, 1260px); display: flex; flex-direction: column; height: 100dvh; padding-bottom: 0; }
.order-wrap.wide { flex: 1; min-height: 0; max-width: none; width: 100%; margin: -18px 0 0; display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; }
.order-wrap.wide .ow-cats { display: flex; flex-direction: column; gap: 6px; margin-left: -16px; padding: 12px 10px; background: var(--bar-2); overflow-y: auto; }
.order-wrap.wide .ow-main { min-width: 0; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.order-wrap.wide .ow-cart { display: flex; flex-direction: column; min-height: 0; margin-right: -16px; background: var(--panel); border-left: 1px solid var(--line); }
.ow-cat { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 58px; padding: 0 14px; border: 0; border-radius: 10px; background: transparent; color: #d6dde8; box-shadow: none; text-shadow: none; text-align: left; font-size: 1.02rem; }
.ow-cat:hover { background: rgba(255,255,255,.08); }
.ow-cat.active { background: var(--primary); color: #fff; }
.ow-cat .count, .tile .count { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #fff; color: var(--primary-dark); font-size: .85rem; line-height: 26px; text-align: center; }
.tile .count { background: var(--primary); color: #fff; flex-shrink: 0; }
.t-cnt { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.p-minus { display: inline-block; min-width: 30px; height: 30px; border-radius: 15px; border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); font-weight: 700; font-size: 1.1rem; line-height: 28px; text-align: center; cursor: pointer; margin-right: 6px; }
.p-minus:hover { background: #fdecec; border-color: #ef9a9a; }
.lines .qty-step button { min-width: 34px; padding: 4px 8px; }
.order-wrap.wide .tabbar button { padding: 12px 6px; font-size: 1rem; }
.order-wrap.wide .search-row { margin-bottom: 12px; }
.order-wrap.wide .search-row input { font-family: var(--font); padding: 11px 12px; border-color: var(--line-2); box-shadow: none; }
.ow-trail { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0 0 10px; font-size: 1rem; }
.ow-trail .trail-link { padding: 4px 2px; border: 0; background: none; box-shadow: none; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.ow-trail .trail-sep { color: var(--muted); }
.ow-hint { margin: 0 0 10px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; min-height: 104px; padding: 12px 12px 10px; border: 1px solid var(--line); border-left: 5px solid var(--line-2); border-radius: 12px; background: var(--panel); text-align: left; text-shadow: none; box-shadow: var(--shadow); }
.tile:hover { border-color: #93c5fd; }
.tile:active { transform: scale(.98); }
.tile.tile-cat { background: #eef3fb; border-color: #c9d6ea; border-left-color: #93a9cc; }
.tile.soldout { opacity: .5; }
.tile .t-top, .tile .t-bot { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; width: 100%; }
.tile .t-bot { align-items: center; font-weight: 600; font-size: .9rem; }
.tile .t-name { font-size: 1.02rem; line-height: 1.25; }
.tile .t-price { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oc-head { display: flex; align-items: baseline; justify-content: space-between; padding: 16px 18px 8px; font-size: 1.1rem; }
.oc-lines { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px; }
.oc-empty { margin: 30px 0; text-align: center; }
.oc-line { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.oc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oc-name .muted { font-size: .85rem; }
.oc-course { width: auto; padding: 1px 4px; font-size: .8rem; margin-right: 2px; }
.oc-q { width: 42px; height: 42px; padding: 0; font-size: 1.2rem; flex-shrink: 0; }
.oc-n { width: 24px; text-align: center; }
.oc-foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 18px 16px; border-top: 1px solid var(--line); }
.oc-old { display: flex; justify-content: space-between; color: var(--muted); font-size: .92rem; }
.oc-foot .total { display: flex; justify-content: space-between; margin: 0; font-size: 1.2rem; font-weight: 700; }
.oc-btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; }
.oc-btns button { min-height: 56px; font-size: 1.1rem; }
.order-wrap.wide #toKasse { display: none; }
/* Tablet hochkant: Kategorien oben, Bestellung unten */
@media (orientation: portrait) {
  .order-wrap.wide { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) 38vh; }
  .order-wrap.wide .ow-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin: 0 -16px; padding: 10px 14px; overflow: visible; }
  .ow-cat { min-height: 50px; justify-content: center; }
  .order-wrap.wide .ow-cart { margin: 0 -16px; border-left: 0; border-top: 1px solid var(--line-2); box-shadow: 0 -8px 24px rgba(17,24,39,.08); }
  .oc-head { padding-top: 10px; }
}
/* PC mit Maus: kompaktere Kacheln */
@media (pointer: fine) {
  .tile { min-height: 84px; }
  .ow-cat { min-height: 44px; }
  .oc-q { width: 32px; height: 32px; font-size: 1rem; }
  .oc-btns button { min-height: 46px; }
}

/* Breite Produktverwaltung (ab 1000 px): Kategoriebaum, Liste, Produkt */
.pa { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr) 470px; gap: 0; height: calc(100dvh - 250px); min-height: 520px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); box-shadow: var(--shadow); }
.pa-tree { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-right: 1px solid var(--line); overflow-y: auto; }
.pa-tree-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 8px; font-size: .8rem; color: var(--muted); letter-spacing: .04em; }
.pa-tree-head .link { padding: 0; font-size: .85rem; }
.pa-cat-row { display: flex; align-items: center; }
.pa-cat-row .pa-cat { flex: 1; }
.pa-cat { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; box-shadow: none; text-shadow: none; text-align: left; font-weight: 600; font-size: .95rem; }
.pa-cat .n { font-size: .78rem; color: var(--muted); font-weight: 500; }
.pa-cat.active { background: var(--primary); color: #fff; }
.pa-cat.active .n { color: #dbeafe; }
.pa-cat-edit { visibility: hidden; padding: 4px 8px; border: 0; background: none; box-shadow: none; color: var(--muted); }
.pa-cat-row:hover .pa-cat-edit { visibility: visible; }
.pa-mid { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 14px 0; }
.pa-tools { margin-bottom: 10px; flex-wrap: nowrap; }
.pa-tools input { flex: 1; }
.pa-filter { margin-bottom: 10px; gap: 6px; }
.pa-filter .flt { padding: 5px 12px; border-radius: 999px; font-size: .85rem; box-shadow: none; text-shadow: none; }
.pa-filter .flt.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.pa-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: #dbeafe; color: #1e3a8a; }
.pa-bulk button { padding: 6px 12px; font-size: .88rem; border-color: #93c5fd; box-shadow: none; text-shadow: none; color: #1e3a8a; }
.pa-bulk .link { border: 0; background: none; text-decoration: underline; }
.pa-table-wrap { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px 10px 0 0; border-bottom: 0; }
.pa-table { margin: 0; border: 0; box-shadow: none; border-radius: 0; font-size: .92rem; }
.pa-table thead th { position: sticky; top: 0; z-index: 1; background: #f8fafc; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.pa-table td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.pa-table tr.sel td { background: #eff6ff; }
.pa-table tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.pa-table tr.inactive .nm { color: var(--muted); text-decoration: line-through; }
.pa-ck { width: 34px; white-space: nowrap; }
td.pa-ck .drag { margin: 0 4px 0 -6px; vertical-align: middle; }
td.pa-ck:has(.drag) { width: 58px; }
.pa-ck input { width: 16px; height: 16px; margin: 0; }
.pa-name .dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 5px; vertical-align: middle; }
.pa-name .nm { font-weight: 600; }
.pa-path { font-size: .8rem; }
.pa-price { width: 84px; padding: 5px 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; text-align: right; font-variant-numeric: tabular-nums; font: inherit; }
.pa-table tr:hover .pa-price, .pa-price:focus { border-color: var(--line-2); background: #fff; }
.pa-edit { min-height: 0; overflow: hidden; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
/* Produktliste nutzt die ganze Breite: der Bearbeiten-Bereich erscheint erst, wenn ein Produkt gewählt ist, auf kleineren Bildschirmen über der Liste */
.pa:has(.pa-edit .pe-none), .pa:has(.pa-edit:empty) { grid-template-columns: 250px minmax(0, 1fr); }
.pa:has(.pa-edit .pe-none) .pa-edit, .pa-edit:empty { display: none; }
.pe-close { flex: none; margin-left: auto; padding: 2px 10px; border: 0; background: none; box-shadow: none; text-shadow: none; color: var(--muted); font-size: 1.1rem; }
@media (max-width: 1499px) {
  .pa, .pa:has(.pa-edit .pe-none) { grid-template-columns: 250px minmax(0, 1fr); }
  .pa-edit { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; width: min(470px, calc(100% - 250px)); background: var(--panel); box-shadow: -10px 0 30px rgba(15, 23, 42, .18); }
}
.pe-none { margin: 40px 20px; text-align: center; }
.pe { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.pe-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 16px 18px 6px; }
.pe-head > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pe-head .muted { font-size: .8rem; }
.pe-head b { font-size: 1.2rem; }
.pe-head .pill { padding: 2px 10px; border-radius: 999px; background: #f1f3f6; color: var(--muted); font-size: .8rem; font-weight: 600; }
.pe-head .pill.on { background: #dcfce7; color: #166534; }
.pe-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pe-tabs button { padding: 9px 10px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; box-shadow: none; text-shadow: none; color: var(--muted); font-size: .9rem; white-space: nowrap; }
.pe-tabs button.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.pe-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 18px 14px; }
.pe .pf-sec { display: none; }
.pe .pf-sec.on { display: block; }
.pe details.marks-edit { border: 0; padding: 0; margin-top: 8px; }
.pe details.marks-edit > summary { display: none; }
.pe .actions { display: flex; align-items: center; margin: 0; padding: 12px 18px; border-top: 1px solid var(--line); flex-wrap: nowrap; gap: 8px; }
.pe .actions button { padding: .55em .8em; font-size: .92rem; white-space: nowrap; }
.pe .marks-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Umbuchen: Stückzahl je Zeile */
.mvlist li { display: flex; align-items: center; gap: 10px; }
.mvlist .name { flex: 1; }
.qty-step { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qty-step button { min-width: 40px; min-height: 40px; padding: 0; font-size: 20px; }
.qty-step b { min-width: 22px; text-align: center; }

/* Arbeitszeit: Kommen/Gehen neben dem Namen */
#clockBtn { color: #fff; background: #1f7a3d; border: 1px solid rgba(255,255,255,.14); text-shadow: none; box-shadow: none; font-weight: 700; padding: 5px 10px; border-radius: var(--radius-sm); }
#clockBtn.on { background: #b4232c; }
#clockBtn[hidden] { display: none; }

/* Statistik */
.st-bars { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 6px; }
.st-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.st-bar { background: var(--primary, #2563eb); border-radius: 3px 3px 0 0; min-height: 1px; }
.st-lbl { font-size: .72rem; text-align: center; color: var(--muted, #6b7280); margin-top: 3px; }
.st-days { height: 90px; gap: 1px; }
.st-hbar { background: var(--primary, #2563eb); height: 12px; border-radius: 3px; min-width: 1px; }
.st-heat { border-collapse: separate; border-spacing: 2px; font-size: .75rem; }
.st-heat th { font-weight: 600; color: var(--muted, #6b7280); padding: 0 2px; text-align: center; }
.st-heat td { width: 26px; height: 20px; border-radius: 3px; background-color: #f1f3f6; }
.small { font-size: .8rem; }

/* Tischplan */
.plan { position: relative; width: 100%; aspect-ratio: 16 / 10; min-height: 420px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  background-image: radial-gradient(circle, #dde3ea 1px, transparent 1px); background-size: 24px 24px; overflow: hidden; }
.plan .plan-t { position: absolute; width: 12%; min-height: 0; aspect-ratio: 1; padding: 6px; gap: 2px; font-size: .85rem; touch-action: none; }
.plan .plan-t .name { font-size: 1rem; }
.plan .plan-t.shape-rund { border-radius: 50%; }
.plan .plan-t.shape-lang { width: 22%; aspect-ratio: 2.2; }
.plan.editing { outline: 2px dashed var(--primary); outline-offset: 4px; }
.plan.editing .plan-t { cursor: grab; }
.table-tile.reserved { background: #fff7e6; border-color: #f1b84b; }
.res-tag { display: inline-block; background: #fdecc8; color: #7a4b00; border-radius: 6px; padding: 1px 6px; font-size: .75rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px; }
.plan { min-width: 680px; }
@media (max-width: 700px) { .plan .plan-t { font-size: .75rem; } .plan .plan-t .name { font-size: .85rem; } }
#nav [data-v="reservierungen"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 2h2v2h6V2h2v2h3a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h3zm12 7H5v10h14zm-9 2h2v2h-2zm-4 0h2v2H6zm8 0h2v2h-2zm-8 4h2v2H6zm4 0h2v2h-2z'/%3E%3C/svg%3E"); }

/* Ohne Verbindung: Hinweis unten links */
#netState { position: fixed; left: 10px; bottom: 10px; z-index: 900; padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: .85rem; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
#netState.off { background: #b4232c; }
#netState.wait { background: #c27803; }
#netState[hidden] { display: none; }
.upd-notes { white-space: pre-wrap; font: inherit; font-size: .85rem; max-height: 260px; overflow: auto; margin: 6px 0 0; }
.upd-banner { margin: 0 0 12px; }

/* 1.15: Wartezeit, Stempelkarte, digitaler Beleg, Kundendisplay, Wareneinsatz */
.table-tile.wait-warn { box-shadow: inset 4px 0 0 var(--warn), 0 0 0 2px #f6c56a, var(--shadow); }
.table-tile.wait-late { background: #fdecec; border-color: #ef9a9a; box-shadow: inset 4px 0 0 var(--accent), 0 0 0 2px #ef9a9a, var(--shadow); }
.table-tile .wait-txt { color: #b45309; }
.table-warn { background: #fff4d6; border: 1px solid #f0c96a; color: #6b4a00; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; line-height: 1.7; }
.table-warn .link { font-weight: 700; }
.tabs button.has-warn::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-left: 6px; vertical-align: middle; }
.table-tile.wait-late .wait-txt { color: var(--accent); }
.ticket.warn h3 { background: #c27803; text-shadow: 0 1px 0 #7a4b00; }
.wait-avg { font-size: .9rem; color: var(--muted); }
.wait-avg b.warn { color: #b45309; }
.wait-avg b.late { color: var(--accent); }
.bon-qr svg { width: min(280px, 70vw); height: auto; }
.bon-qr { text-align: center; }
.stamp-info { text-align: center; font-weight: 700; margin: 6px 0; color: var(--ok-dark); }
.bon-offer { text-align: center; margin: 6px 0; font-weight: 600; color: var(--warn-dark, #8a5a00); }
.err-text { color: var(--accent); }
.i18n-row { display: grid; grid-template-columns: 110px 1fr 1.6fr; gap: 6px; align-items: center; margin-top: 6px; }
.i18n-row.one { grid-template-columns: 110px 1fr; }
@media (max-width: 600px) { .i18n-row { grid-template-columns: 1fr; } }
.disp-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.disp-row .qr-s svg { width: 96px; height: 96px; }
.datev-acc input { padding: 4px 8px; }
table.recipe input { padding: 4px 6px; }
.pe .pf-h { display: none; }

/* Online-Bestellungen */
.online-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.online-card .lines li { display: flex; justify-content: space-between; gap: 10px; }
.online-card .num { white-space: nowrap; }
.online-card .ol-note { margin-top: 4px; padding: 4px 8px; background: #fff4d6; border-radius: 6px; }
.vstat.ol-neu { background: #ffd8c2; color: #9a3412; }
.vstat.ol-angenommen { background: #d6e8ff; color: #1d4f91; }
.vstat.ol-fertig, .vstat.ol-erledigt { background: #d4f5d4; color: #1d6b1d; }
.vstat.ol-abgelehnt, .vstat.ol-storniert { background: #fbd4d4; color: #9c1c1c; }
@media (max-width: 400px) { .online-grid { grid-template-columns: 1fr; } }
.fc-in { width: 80px; text-align: right; padding: 4px 6px; }
.staff-tbl tr.sum td { border-top: 2px solid var(--line, #dee2e6); }
.dr-tbl input, .dr-tbl select { margin: 0; }
.dr-tbl td { vertical-align: middle; }
.cl-drawer { margin: 6px 0; align-items: center; }
.kpi-mine { outline: 2px solid var(--primary-soft); }
.res-req-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line,#e3e6ea)}
.res-req-row:first-of-type{border-top:0}
.sumup-box{text-align:center;padding:18px 8px 8px}
.sumup-amt{font-size:2.4rem;font-weight:800;font-variant-numeric:tabular-nums;margin-bottom:10px}
.sumup-state{min-height:2.6em;display:flex;align-items:center;justify-content:center;gap:10px;font-size:1.05rem}
.spin{width:18px;height:18px;border:3px solid var(--line);border-top-color:#2563eb;border-radius:50%;display:inline-block;animation:spin .8s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.ok-mark{color:#16a34a;font-weight:800;font-size:1.4rem}
.err-mark{color:#dc2626;font-weight:800;font-size:1.4rem}
.warn-text{color:#b45309}
.su-pair{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.su-pair>div{flex:1;min-width:160px}
.su-more{margin:8px 0}
.su-more summary{cursor:pointer;color:var(--muted)}

/* Reihenfolge per Ziehen, mehrere Produkte anlegen (1.18) */
.grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr 1fr; } .grid3 > :first-child { grid-column: 1 / -1; } }
.drag { background: none; border: 0; padding: 4px 6px; min-height: 0; color: var(--muted, #8a94a0); cursor: grab; touch-action: none; font-size: 1.1rem; line-height: 1; border-radius: 6px; }
.drag:hover, .drag:focus-visible { color: var(--ink, #1d2733); background: rgba(0, 0, 0, .06); }
.dragging { opacity: .85; background: #eef4ff !important; box-shadow: 0 2px 10px rgba(29, 53, 87, .18); position: relative; z-index: 2; }
.dragging .drag { cursor: grabbing; }
th.pa-dr, td.pa-dr, td.pdr { width: 30px; padding-left: 2px !important; padding-right: 0 !important; }
.pa-cat-row .drag { padding: 4px 2px; font-size: 1rem; opacity: .55; }
.pa-cat-row:hover .drag, .pa-cat-row .drag:focus-visible { opacity: 1; }
.bn-dialog { width: min(640px, calc(100vw - 32px)); }
.bn-wrap { max-height: min(46vh, 420px); overflow-y: auto; border: 1px solid var(--line, #e3e7ec); border-radius: 8px; }
.bn-table { margin: 0; }
.bn-table th { position: sticky; top: 0; background: var(--panel, #fff); z-index: 1; }
.bn-table td { padding: 4px 6px; }
.bn-table td.num { width: 110px; }
.bn-table td:last-child { width: 30px; }
.bn-table input { margin: 0; }
.bn-table td.num input { text-align: right; }
.bn-table tr.bn-bad input { border-color: var(--accent, #c0392b); background: #fff3f1; }
.prod-group-head { flex-wrap: wrap; row-gap: 2px; }
.prod-group-head .link { white-space: nowrap; }
.prod-table td.pdr { width: 26px; padding-right: 0 !important; }
.prod-table td.pdr .drag { padding: 4px 2px; }
@media (max-width: 600px) { .prod-table .pd { display: none; } }

/* 1.20: Plätze, Zählhilfe, Kellnerabrechnung, Tagesinfo */
.seat-tag { display: inline-block; min-width: 1.6em; padding: 0 5px; margin-right: 6px; border-radius: 6px; background: var(--primary-soft); color: inherit; font-size: .8em; font-weight: 600; text-align: center; vertical-align: 1px; }
.station .seat-tag, .ticket .seat-tag { margin: 0 0 0 6px; }
.seat-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.seat-chips button { padding: 6px 10px; }
.seat-chips button.active { background: var(--primary); border-color: var(--primary-dark); color: var(--primary-ink); }
.seatbar { margin-top: 6px; }
.count-grid { display: grid; grid-template-columns: 5.5em 1fr 6.5em; gap: 6px 10px; align-items: center; max-height: 55vh; overflow: auto; padding-right: 4px; }
.count-grid label { margin: 0; text-align: right; font-weight: 600; }
.count-grid input { margin: 0; }
.count-grid .num { text-align: right; color: var(--muted, #5a626a); }
.cl-drawer button { white-space: nowrap; }
.wallets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.wallets .list td.num { white-space: nowrap; }
.dayinfo-text { white-space: normal; font-size: 1.05em; background: var(--page); border-radius: 8px; padding: 10px 12px; }
.dayinfo-list { margin: 0; padding-left: 18px; }
.dayinfo-list li { margin: 3px 0; }

/* 1.20: Preisstufen, Tageszeiten, Pfand, Ausverkauft, Inventur, Geschenkkarte */
.levelbar { margin-top: 6px; }
.dp-bar { background: var(--primary-soft); color: inherit; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.dp-bar .link { margin-left: auto; }
.stock.dep { background: #eef2f5; color: #3d4852; margin-right: 4px; }
.dep-list { display: grid; gap: 8px; margin: 8px 0 12px; }
.dep-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.dep-row .dep-name { min-width: 0; }
.dep-row input { margin: 0; }
.sold-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #fde2e2; color: #b42318; font-weight: 600; }
.sold-bar button { padding: 4px 10px; background: #fff; border-color: #f3b4b4; color: #b42318; }
.sold-list { max-height: 55vh; min-height: min(40vh, 320px); overflow: auto; margin-top: 8px; }
.sold-cats { margin: 8px 0 0; max-height: 30vh; overflow: auto; }
.sold-cats .n.out { background: #b42318; color: #fff; }
.sold-list .sold-cat { margin: 12px 0 4px; font-size: .95rem; color: var(--muted, #667); }
.sold-list .sold-cat:first-child { margin-top: 0; }
.sold-list ul { margin: 0; }
.sold-list li { display: flex; align-items: center; gap: 10px; }
.sold-list li .name { flex: 1; min-width: 0; }
.inv-count input { margin: 0; max-width: 120px; }
.kpi .v.neg, td.neg { color: #b42318; }
.gift-motifs { flex-wrap: wrap; }

.pay-off { display: none !important; }

/* Kassenbon-Gestaltung: Logo, große Schrift, Trennlinien, Werbezeile */
.receipt .r-logo { margin-bottom: 6px; }
.receipt .r-logo img { max-width: 100%; height: auto; }
.receipt .r-logo .r-logo-klein { width: 35%; }
.receipt .r-logo .r-logo-mittel { width: 55%; }
.receipt .r-logo .r-logo-gross { width: 80%; }
.receipt.r-lg { font-size: 15px; }
.receipt.r-lg .tse { font-size: 11px; }
.receipt.rl-double hr { border-top: 3px double #000; }
.receipt.rl-dot hr { border-top: 2px dotted #000; }
.receipt.rl-none hr { border-top: 0; margin: 6px 0; }
.receipt .r-promo { margin: 4px 0; }
.bonpreview .tall { display: inline-block; transform: scaleY(2); transform-origin: 0 0; margin-bottom: 1.35em; }
.bonpreview .qrbox img { image-rendering: pixelated; }
.rc-logo { align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-logo img { max-height: 60px; max-width: 160px; border: 1px solid var(--line); background: #fff; padding: 2px; }
.sold-mode { display: flex; gap: 10px; align-items: center; justify-content: space-between; margin: -6px 0 14px; padding: 8px 12px; border-radius: 10px; background: #fff1f0; border: 1px solid #f3c1bd; color: #8a1c13; font-size: .92rem; }
.sold-mode[hidden] { display: none; }
.st-bar.warn { background: #f59e0b; }
.st-bar.late { background: #dc2626; }
.kpi .v.warn, td.num.warn { color: #b45309; }
.kpi .v.late, td.num.late { color: #b42318; font-weight: 700; }
/* Tischplan: Umsatz je Tisch, je mehr Umsatz desto kräftiger */
.table-tile.rev { background: rgba(37, 99, 235, var(--heat, 0)); border-color: rgba(37, 99, 235, calc(var(--heat, 0) + .2)); box-shadow: var(--shadow); }
.table-tile.rev:hover { background: rgba(37, 99, 235, calc(var(--heat, 0) + .08)); }
.table-tile.rev-none { opacity: .65; }
.table-tile .rev-busy { color: var(--warn, #d97706); font-size: .8rem; }
/* Handy: Suchfeld über die volle Breite, die Knöpfe darunter (sonst schiebt „Ausverkauft“ die Zeile aus dem Bild); Umschalter brechen um */
@media (max-width: 600px) {
  .search-row { flex-wrap: wrap; gap: 8px; }
  .search-row input { flex: 1 1 100%; }
  .search-row button { flex: 1 1 auto; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
  div.seg { flex-wrap: wrap; justify-content: center; }
}
/* Veranstaltungen: Preisanteile je Steuersatz */
.ev-part { display: grid; grid-template-columns: 1fr 110px 80px 120px auto; gap: 6px; margin-top: 6px; align-items: center; }
.ev-part input, .ev-part select { margin: 0; }
.ev-lt { white-space: nowrap; }
@media (max-width: 600px) { .ev-part { grid-template-columns: 1fr 1fr; } .ev-part button { justify-self: start; } }

/* Hinweis „Testbetrieb“ in der Kopfzeile, solange der Produktivbetrieb nicht gestartet ist */
.app-ver { font-size: 12px; opacity: .6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.test-pill { background: #f2b233; color: #222; border: 0; border-radius: 999px; padding: 2px 10px; font-size: .78rem; font-weight: 700; text-shadow: none; cursor: pointer; }
.test-pill:disabled { cursor: default; opacity: 1; }

/* Desktop (breiter Bildschirm mit Maus): eine Zeile mit Name links, Menü als Reiter mit Symbol neben dem Text, Anmeldung rechts */
@media (min-width: 1100px) and (pointer: fine) {
  #topbar { flex-wrap: nowrap; gap: 14px; padding: 0 12px; min-height: 56px; }
  .brand { order: 1; flex: none; text-align: left; padding: 0 6px 0 2px; max-width: 220px; font-size: 1.05rem; }
  #nav { order: 2; flex: 1; width: auto; min-width: 0; border-top: 0; padding: 0; gap: 2px; align-self: stretch; overflow-x: auto; scrollbar-width: none; }
  #nav button { flex: none; flex-direction: row; gap: 8px; padding: 0 14px; font-size: .9rem; font-weight: 600; border-radius: 0; color: #aeb9c7; background: transparent; box-shadow: inset 0 -3px 0 transparent; white-space: nowrap; }
  #nav button::before { width: 18px; height: 18px; flex: none; opacity: .85; }
  #nav button:hover { background: rgba(255,255,255,.06); color: #fff; }
  #nav button.active { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 -3px 0 var(--primary); }
  #nav button.active::before { opacity: 1; color: var(--primary); background: var(--primary); }
  #nav .badge { position: static; margin-left: -2px; }
  .who { order: 3; position: static; flex: none; }
  /* Hell/Dunkel wählt man am PC auf der Anmeldeseite, damit das Menü in einer Zeile bleibt */
  #themeBtn { display: none; }
  /* Name und Anmeldung teilen sich den Platz gleich auf, damit das Menü in der Bildschirmmitte steht */
  .brand { flex: 1 1 0; max-width: none; min-width: max-content; }
  #topbar .brand { justify-content: flex-start; }
  .who { flex: 1 1 0; justify-content: flex-end; white-space: nowrap; }
  #nav { flex: 0 1 auto; }
  /* Menü mittig (1.29); auto-Ränder statt justify-content, damit bei wenig Platz nichts links abgeschnitten wird */
  #nav > :first-child { margin-left: auto; }
  #nav > :last-child { margin-right: auto; }
  /* passt das Menü nicht in die Zeile: erst enger, dann eine eigene zweite Zeile, mittig über die volle Breite */
  #nav.compact button { padding: 0 9px; gap: 6px; font-size: .84rem; }
  #topbar.two-rows { flex-wrap: wrap; row-gap: 0; }
  #topbar.two-rows .brand { min-height: 52px; display: flex; align-items: center; margin-right: auto; }
  #topbar.two-rows #nav { order: 4; flex: 0 0 100%; height: 46px; border-top: 1px solid var(--bar-line); margin: 0 -12px; padding: 0 12px; box-sizing: content-box; }
}

/* Verwaltung → Module */
.mod-list { display: grid; gap: 6px; }
.mod-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; color: var(--ink); margin: 0; }
.mod-item input { width: auto; margin-top: 3px; }
.mod-item > span { display: flex; flex-direction: column; gap: 2px; }
.mod-item:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }

/* Logo MeoloPOS */
.brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
.brand-ico { width: 24px; height: 24px; flex: none; }
#brand { overflow: hidden; text-overflow: ellipsis; }
.login > .login-brand { margin: 0; padding: 22px 16px 16px; border-bottom: 1px solid var(--line); }
.login-brand img { width: 230px; max-width: 75%; height: auto; display: block; margin: 0 auto; }
@media (max-width: 600px) { .brand { justify-content: flex-start; } }

/* Verwaltung → Leistung */
.perf-grid { margin: 12px 0; gap: 12px; }
.perf-chart { width: 100%; height: 110px; display: block; }
.kpi-bad .v { color: var(--accent); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); vertical-align: middle; }
.dot.on { background: var(--ok); }
.perf-scroll { overflow-x: auto; }
.perf-scroll .list { min-width: 520px; }
.pt-list .rc-h:first-child { margin-top: 0; }
.pt-item { display: block; width: 100%; text-align: left; margin: 0 0 6px; }
.pt-item.active { background: var(--tab-active); border-color: var(--tab-active); color: #fff; text-shadow: none; }
.pt-pdf { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--line-2); border-radius: var(--radius); background: #fff; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover, th.sorted { color: var(--primary); }

/* Kennzeichen vegetarisch/vegan */
.diet { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: #dcfce7; color: #166534; font-size: .7rem; font-weight: 700; line-height: 1.5; vertical-align: middle; letter-spacing: .02em; }
.diet.vegan { background: #bbf7d0; color: #14532d; }

/* Schichtübergabe */
.ho-tables { max-height: 38vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 10px; }
.ho-tables .checkline { display: flex; align-items: center; gap: 8px; margin: 6px 0; }

/* Kurzcode und weitere Kategorien */
.pa-code { display: inline-block; font: 600 .78rem/1.4 ui-monospace, monospace; background: var(--page); color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.pf-more { margin: 10px 0 4px; }
.pf-more summary { cursor: pointer; font-weight: 600; }
/* Verwaltung → Tische: je Raum aufklappbar */
.tbl-room { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; }
.tbl-room > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; list-style: none; }
.tbl-room > summary::-webkit-details-marker { display: none; }
.tbl-room > summary::before { content: '▸'; color: var(--muted); width: 1em; }
.tbl-room[open] > summary::before { content: '▾'; }
.tbl-room > table.list { border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); box-shadow: none; }
.tbl-room > p { padding: 0 12px; }
.mc-list { max-height: 220px; overflow: auto; columns: 2 220px; }
.mc-list .checkline { margin: 3px 0; break-inside: avoid; }

/* Statistik (eigener Menüpunkt) */
.st2 { height: 180px; }
.st2 .st-pair { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 1px; min-height: 0; }
.st2 .st-pair .st-bar { flex: 1; max-width: 34px; }
.st-bar.cmp { background: #b8c7e8; }
.st-foot { font-size: .7rem; text-align: center; line-height: 1.15; color: var(--muted); min-height: 2.3em; }
.st-dense .st-lbl, .st-dense .st-foot { font-size: .6rem; }
.st-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--primary, #2563eb); vertical-align: -1px; margin-left: 6px; }
.st-key.cmp { background: #b8c7e8; }
.st-delta { font-weight: 600; white-space: nowrap; }
.st-delta.up { color: #15803d; }
.st-delta.down { color: #b91c1c; }
.st-fc { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 14px; }
.st-fcday { padding: 8px 10px; text-align: center; }
.st-wx { font-size: 1.7rem; line-height: 1.3; }
.st-scroll { max-height: 62vh; overflow: auto; }
.st-prod tr.sel td { background: rgba(37, 99, 235, .08); }
.st-share td { vertical-align: middle; }
#printArea .st-print { font: 11pt/1.35 system-ui, sans-serif; color: #000; }
#printArea .st-print table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
#printArea .st-print th, #printArea .st-print td { border-bottom: 1px solid #ccc; padding: 3px 6px; text-align: left; }
#printArea .st-print h3 { margin: 14px 0 4px; }
/* Abrechnungsformular A4 (Kellnerabrechnung) */
@page a4 { size: A4; margin: 15mm; }
#printArea .a4-form { page: a4; font: 10.5pt/1.4 system-ui, sans-serif; color: #000; }
#printArea .a4-form .a4-head { display: flex; justify-content: space-between; font-size: 13pt; border-bottom: 2px solid #000; padding-bottom: 6px; margin-bottom: 12px; }
#printArea .a4-form .a4-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
#printArea .a4-form .a4-tiles div { border: 1px solid #999; padding: 6px 8px; font-size: 13pt; font-weight: 700; }
#printArea .a4-form .a4-tiles span { display: block; font-size: 8.5pt; font-weight: 400; color: #444; }
#printArea .a4-form h3 { margin: 14px 0 4px; font-size: 11.5pt; }
#printArea .a4-form table { width: 100%; border-collapse: collapse; }
#printArea .a4-form th, #printArea .a4-form td { border-bottom: 1px solid #ccc; padding: 3px 6px; text-align: left; }
#printArea .a4-form .num { text-align: right; white-space: nowrap; }
#printArea .a4-form .a4-sign { display: flex; gap: 40px; margin-top: 60px; break-inside: avoid; }
#printArea .a4-form .a4-sign div { flex: 1; border-top: 1px solid #000; padding-top: 4px; font-size: 9pt; color: #444; }
#printArea .a4-form .a4-foot { margin-top: 24px; font-size: 8pt; color: #666; }

/* Bild je Produkt */
.pf-img { margin-top: 12px; }
.pf-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--page); }
.pf-thumb.none { display: flex; align-items: center; justify-content: center; font-size: .75rem; color: var(--muted); }
.pa-img { width: 26px; height: 26px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 6px; }

/* 1.29: Reiter der Verwaltung bleiben beim Scrollen unter der Kopfzeile stehen */
.admin-tabs { position: sticky; top: var(--top-h, 0px); z-index: 8; box-shadow: 0 0 0 6px var(--page), 0 6px 10px -6px rgba(16,24,40,.25); }
/* 1.80: Verwaltung in Bereiche gegliedert: Bereiche oben, Seiten des Bereichs darunter, Suche rechts */
.admin-tabs { background: var(--page); margin-bottom: 12px; }
.admin-groups { gap: 8px; align-items: center; flex-wrap: nowrap; }
.admin-groups .tabs { flex: 1; min-width: 0; margin-bottom: 0; }
.admin-groups #adminFind { width: 180px; flex: none; margin: 0; }
.admin-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 2px 6px; min-height: 2.6em; align-items: center; }
.admin-sub > button { border-radius: 999px; padding: .35em .95em; font-size: .9rem; background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.admin-sub > button.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.admin-sub.finding > button .muted { font-size: .8rem; }
@media (max-width: 700px) { .admin-groups { flex-wrap: wrap; } .admin-groups #adminFind { width: 100%; } }
/* 1.29: Hinweis Mehrwertsteuer/Zubereitung im Produkteditor, Prüfliste */
.pf-auto { margin: 4px 0 0; font-size: .82rem; }
.pf-auto.warn { color: #9a6700; }
.aa-list { max-height: 50vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.aa-list table { margin: 0; }
.ok-line { color: var(--ok, #1e7a46); font-weight: 600; }

/* ausgeschaltete Kategorien (1.29) */
.badge-off { display: inline-block; font-size: .75rem; padding: 1px 7px; border-radius: 9px; background: #f3e1e1; color: #8a2b2b; font-weight: 600; vertical-align: 1px; }
tr.cat-off td:not(.pa-dr) { opacity: .55; }
.prod-off { opacity: .55; }

/* Schmale Bereiche (z. B. DATEV, E-Mail, Update) stehen mittig statt links (1.29) */
main :is(.panel, .list, .row)[style*="max-width"] { margin-left: auto; margin-right: auto; }
#nav [data-v="statistik"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2v16h16v2H3zm4 11l4-5 3 3 5-6 1.5 1.3-6.4 7.6-3-3-2.6 3.3z'/%3E%3C/svg%3E"); }

/* Verwaltung → TV-Karte: Vorlagen (1.60) */
.tv-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.tv-theme { display: grid; gap: 6px; padding: 8px; border: 2px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 400; margin: 0; }
.tv-theme.on { border-color: var(--primary); }
.tv-theme input { position: absolute; opacity: 0; pointer-events: none; }
.tv-theme:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.tv-thumb { aspect-ratio: 16 / 9; border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.tv-thumb b { font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-thumb i { display: block; height: 4px; border-radius: 2px; background: currentColor; opacity: .35; width: 80%; }
.tv-thumb i:first-of-type { border-top: 2px solid; opacity: .9; background: none; width: 45%; height: 0; }
.tv-theme .muted { font-size: 13px; }
.tv-prev { aspect-ratio: 16 / 9; max-width: 720px; border-radius: 8px; overflow: hidden; background: #000; border: 6px solid #111; }
.tv-prev iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
.tv-pick { max-height: 360px; overflow: auto; columns: 2 260px; column-gap: 24px; margin-top: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.tv-pick-cat { break-inside: avoid; margin-bottom: 8px; }
.tv-pick-cat > b { display: block; font-size: 13px; color: var(--muted); margin: 4px 0 2px; }
.tv-pick .checkline { margin: 2px 0; }

/* TV-Karte: eigene Bilder (1.62) */
.tv-slides { display: grid; gap: 8px; margin-top: 10px; }
.tv-slide { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--list); }
.tv-slide img { width: 128px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; background: var(--line); }
.tv-slide.off img { opacity: .4; }
.tv-slide-f { flex: 1; min-width: 0; display: grid; gap: 4px; }
.tv-slide-f input[data-tvsc] { width: 100%; }
.tv-slide-b { display: flex; gap: 4px; flex: none; }
.tv-slide-b button { min-width: 40px; padding-inline: 8px; }
@media (max-width: 600px) { .tv-slide { flex-wrap: wrap; } .tv-slide img { width: 96px; height: 54px; } .tv-slide-b { width: 100%; justify-content: flex-end; } }

/* TV-Karte: Zeitraum der Gänsezeit (1.63) */
.tv-season { margin: 10px 0; padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 10px; }
.tv-season .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 700px) { .tv-season .grid3 { grid-template-columns: 1fr; } }

/* Auswahl Hell / Dunkel / Wie Gerät (ab 1.64) */
.theme-pick { margin: 12px 0; }
.theme-pick button { flex: 1; min-height: 48px; }
.theme-pick button.sel { background: var(--primary); border-color: var(--primary); color: #fff; }
.login-brand .logo-dunkel { display: none; }

/* Fernzugriff über Cloudflare (ab 1.65) */
.tn-state { padding: 1px 8px; border-radius: 999px; background: #eef0f3; color: #4b5563; font-size: .85rem; }
.tn-state.ok { background: #e5f4e8; color: #1f6b30; }
.tn-state.warn { background: #fff4d6; color: #7a5300; }
.tn-state.err { background: #fde8e6; color: #a1261d; }
#tnToken { width: 100%; font-family: ui-monospace, monospace; font-size: .8rem; }
.tn-art { margin: 6px 0 10px; max-width: 320px; }
.tn-art button { flex: 1; }
.tabs.tn-art > button.active { background: var(--primary); color: #fff; }

/* ===== Dunkler Modus (erzeugt von werkzeuge/dunkel-css.py, nicht von Hand ändern) ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #0e1319; --panel: #161d26; --ink: #e4e9f0; --muted: #98a4b3; --line: #2a3441; --line-2: #374252;
  --bar: #0a0e13; --bar-2: #151c25; --bar-ink: #fff; --bar-line: #000;
  --btn: #1c2430; --btn-hover: #243040; --btn-down: #2b3746;
  --primary: #3b82f6; --primary-dark: #2563eb; --primary-ink: #fff; --primary-soft: #1b2a45;
  --accent: #ef4444; --ok: #22a355; --ok-dark: #1a8a46; --warn: #f59e0b; --ready: #22a355;
  --busy-bg: #2b2412; --busy-line: #d18b0b;
  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.45);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  --list: #161d26; --list-hover: #1f2834; --list-line: #2a3441; --chev: #6d7a8b;
  --tab: #161d26; --tab-line: #2a3441; --tab-active: #3d4a5c;
}
html[data-theme="dark"] body { background: var(--page); color: var(--ink); }
html[data-theme="dark"] img:not([src$=".svg"]) { filter: brightness(.92); }
:where(html[data-theme="dark"]) button { text-shadow: 0 1px 0 transparent; }
:where(html[data-theme="dark"]) button.danger { text-shadow: 0 1px 0 transparent; }
:where(html[data-theme="dark"]) input, :where(html[data-theme="dark"]) select, :where(html[data-theme="dark"]) textarea { background: #1b1b1b; }
:where(html[data-theme="dark"]) .panel > h3:first-child, :where(html[data-theme="dark"]) .panel > .row:first-child h3 { background: #272727; text-shadow: 0 1px 0 transparent; }
:where(html[data-theme="dark"]) .panel > .row:first-child { background: #272727; }
:where(html[data-theme="dark"]) .login .user-drop > button { border: 1px solid var(--line-2, #424b55); background: #1b1b1b; }
:where(html[data-theme="dark"]) .login .user-pop { background: #1b1b1b; }
:where(html[data-theme="dark"]) .pin-display { background: #1b1b1b; }
:where(html[data-theme="dark"]) .table-tile.ready { background: #1d2e1d; }
:where(html[data-theme="dark"]) .status { background: #242424; }
:where(html[data-theme="dark"]) .status.offen { background: #391815; color: #daa7a4; }
:where(html[data-theme="dark"]) .status.in_arbeit { background: #4a3715; color: #ead2ac; }
:where(html[data-theme="dark"]) .status.fertig { background: #223922; color: #badbba; }
:where(html[data-theme="dark"]) .status.serviert { background: #292929; }
:where(html[data-theme="dark"]) .ticket { background: #1b1b1b; }
:where(html[data-theme="dark"]) .ticket.old h3 { text-shadow: 0 1px 0 transparent; }
:where(html[data-theme="dark"]) .ticket .item.in_arbeit { background: #3b2f11; }
:where(html[data-theme="dark"]) table.list { background: #1b1b1b; }
:where(html[data-theme="dark"]) table.list tr:nth-child(odd) td { background: #1d1d1d; }
:where(html[data-theme="dark"]) table.list tr.click:hover td { background: #15222e; }
:where(html[data-theme="dark"]) .dialog { background: #1b1b1b; }
:where(html[data-theme="dark"]) .tabbar button { color: #d6d6d6; }
:where(html[data-theme="dark"]) .tabbar button:hover { background: #6a6526; }
:where(html[data-theme="dark"]) .listview .lv-empty { color: #cfcfcf; }
:where(html[data-theme="dark"]) .lv-aside { color: #c8d1da; }
:where(html[data-theme="dark"]) .vstat { background: #2d2d2d; color: #cfcfcf; }
:where(html[data-theme="dark"]) .vstat.gültig { background: #1b381b; color: #b4dab4; }
:where(html[data-theme="dark"]) .vstat.eingelöst { background: #2a2a2a; color: #bfbfbf; }
:where(html[data-theme="dark"]) .vstat.abgelaufen { background: #443214; color: #e8d1a4; }
:where(html[data-theme="dark"]) .vstat.gesperrt { background: #3a1616; color: #d69b9b; }
:where(html[data-theme="dark"]) .chips button .n { background: rgba(255,255,255,0.09); }
:where(html[data-theme="dark"]) .chips button.active .n { background: rgba(255,255,255,0.12); }
:where(html[data-theme="dark"]) .prod-table .sw span { border: 1px solid rgba(255,255,255,0.17); }
:where(html[data-theme="dark"]) .dest { background: #242424; color: #bfbfbf; }
:where(html[data-theme="dark"]) .dest.kueche { background: #3f2712; color: #e8c6a4; }
:where(html[data-theme="dark"]) .dest.bar { background: #11283b; color: #9fc2e1; }
:where(html[data-theme="dark"]) .switch span { background: #373737; }
:where(html[data-theme="dark"]) .pb-head.bill { background: #223922; border-bottom-color: #506c50; }
:where(html[data-theme="dark"]) .tag { background: #223922; color: #badbba; }
:where(html[data-theme="dark"]) .coursebar button { color: #d6d6d6; }
:where(html[data-theme="dark"]) .coursebar button:hover { background: #6a6526; }
:where(html[data-theme="dark"]) .status.held { background: #292929; }
:where(html[data-theme="dark"]) .ticket.has-call h3 { text-shadow: 0 1px 0 transparent; }
:where(html[data-theme="dark"]) .upd-msg { background: #1d2d20; color: #b4d9bc; }
:where(html[data-theme="dark"]) .upd-msg.err { background: #321512; color: #d59d99; }
:where(html[data-theme="dark"]) .upd-msg.warn { background: #3b3011; color: #ead6ac; }
:where(html[data-theme="dark"]) button:hover { border-color: #4f565e; }
:where(html[data-theme="dark"]) button.danger { background: #1b1b1b; border-color: #663434; }
:where(html[data-theme="dark"]) button.danger:hover { background: #2f1212; }
:where(html[data-theme="dark"]) #nav button:hover { background: rgba(255,255,255,0.04); }
:where(html[data-theme="dark"]) .pin-display { background: #171e24; }
:where(html[data-theme="dark"]) .listview .lv-head { background: #171e24; }
:where(html[data-theme="dark"]) .tabs { background: #20242a; }
:where(html[data-theme="dark"]) .tabs > button, :where(html[data-theme="dark"]) .tabs > button:first-child, :where(html[data-theme="dark"]) .tabs > button:nth-last-child(1 of button) { color: #b7c0ca; }
:where(html[data-theme="dark"]) .tabs > button:hover { background: rgba(27,27,27,0.7); }
:where(html[data-theme="dark"]) .seg { background: #20242a; }
:where(html[data-theme="dark"]) .seg button, :where(html[data-theme="dark"]) .seg button:first-child, :where(html[data-theme="dark"]) .seg button:last-child { color: #b7c0ca; }
:where(html[data-theme="dark"]) .hdr-btn { background: rgba(255,255,255,0.04); }
:where(html[data-theme="dark"]) .hdr-btn:hover { background: rgba(255,255,255,0.08); }
:where(html[data-theme="dark"]) .tabbar { background: #20242a; }
:where(html[data-theme="dark"]) .tabbar button, :where(html[data-theme="dark"]) .tabbar button:first-child { color: #b7c0ca; }
:where(html[data-theme="dark"]) .tabbar button:hover { background: rgba(27,27,27,0.7); }
:where(html[data-theme="dark"]) .coursebar button { color: #b7c0ca; }
:where(html[data-theme="dark"]) .table-tile:hover { border-color: #4f565e; }
:where(html[data-theme="dark"]) .table-tile.busy { border-color: #8a6e3b; }
:where(html[data-theme="dark"]) .table-tile.ready { background: #122f1e; border-color: #4d7a5f; }
:where(html[data-theme="dark"]) .status.offen { background: #2f1212; color: #d6948f; }
:where(html[data-theme="dark"]) .status.in_arbeit { background: #392d11; color: #e1c6a0; }
:where(html[data-theme="dark"]) .status.fertig { background: #183022; color: #b3dfc3; }
:where(html[data-theme="dark"]) .ticket .item { background: #171e24; }
:where(html[data-theme="dark"]) table.list th { background: #171e24; }
:where(html[data-theme="dark"]) .pb-head { background: #171e24; }
:where(html[data-theme="dark"]) .pb-head.bill { background: #122f1e; border-bottom-color: #40614c; }
:where(html[data-theme="dark"]) .order-wrap .listview li.acc-in > button, :where(html[data-theme="dark"]) .order-wrap .listview li.acc-in.lv-empty { background: #171e24; }
:where(html[data-theme="dark"]) .order-wrap .listview li.acc-in > button.acc { background: #1b2128; }
:where(html[data-theme="dark"]) .cat-sub { color: var(--muted, #aaaeb8); }
:where(html[data-theme="dark"]) .stock { background: #212b23; color: #b9d7c4; }
:where(html[data-theme="dark"]) .stock.low { background: #3b2d11; color: #e8d1a4; }
:where(html[data-theme="dark"]) .stock.out { background: #341212; color: #d6948f; }
:where(html[data-theme="dark"]) .hh-bar { background: #3b2d11; color: #ecd8b3; }
:where(html[data-theme="dark"]) .hh-price { color: #deb290; }
:where(html[data-theme="dark"]) .menu-chip { background: #151e2c; }
:where(html[data-theme="dark"]) .stock.menu { background: #141c30; color: #889cd3; }
:where(html[data-theme="dark"]) .ow-cat:hover { background: rgba(255,255,255,0.04); }
:where(html[data-theme="dark"]) .ow-cat .count, :where(html[data-theme="dark"]) .tile .count { background: #1b1b1b; }
:where(html[data-theme="dark"]) .p-minus:hover { background: #2f1212; border-color: #723a3a; }
:where(html[data-theme="dark"]) .tile:hover { border-color: #305278; }
:where(html[data-theme="dark"]) .tile.tile-cat { background: #151e2c; border-color: #3b4658; border-left-color: #535f73; }
:where(html[data-theme="dark"]) .pa-bulk { background: #122238; color: #a4b1d7; }
:where(html[data-theme="dark"]) .pa-bulk button { border-color: #305278; color: #a4b1d7; }
:where(html[data-theme="dark"]) .pa-table thead th { background: #171e24; }
:where(html[data-theme="dark"]) .pa-table tr.sel td { background: #0e1d30; }
:where(html[data-theme="dark"]) .pa-table tr:hover .pa-price, :where(html[data-theme="dark"]) .pa-price:focus { background: #1b1b1b; }
:where(html[data-theme="dark"]) .pe-head .pill { background: #1d2025; }
:where(html[data-theme="dark"]) .pe-head .pill.on { background: #143620; color: #b7dfc6; }
:where(html[data-theme="dark"]) .st-lbl { color: var(--muted, #aaaeb8); }
:where(html[data-theme="dark"]) .st-heat th { color: var(--muted, #aaaeb8); }
:where(html[data-theme="dark"]) .st-heat td { background-color: #1d2025; }
:where(html[data-theme="dark"]) .plan { background-image: radial-gradient(circle, #24292f 1px, transparent 1px); }
:where(html[data-theme="dark"]) .table-tile.reserved { background: #34280f; border-color: #977a43; }
:where(html[data-theme="dark"]) .res-tag { background: #403215; color: #ead2ac; }
:where(html[data-theme="dark"]) .table-tile.wait-late { background: #2f1212; border-color: #723a3a; }
:where(html[data-theme="dark"]) .table-tile .wait-txt { color: #deb290; }
:where(html[data-theme="dark"]) .table-warn { background: #3b3011; border: 1px solid #89743f; color: #ecdab3; }
:where(html[data-theme="dark"]) .wait-avg b.warn { color: #deb290; }
:where(html[data-theme="dark"]) .bon-offer { color: var(--warn-dark, #e8d1a4); }
:where(html[data-theme="dark"]) .online-card .ol-note { background: #3b3011; }
:where(html[data-theme="dark"]) .vstat.ol-neu { background: #442514; color: #dcac9c; }
:where(html[data-theme="dark"]) .vstat.ol-angenommen { background: #11233b; color: #a0b8d6; }
:where(html[data-theme="dark"]) .vstat.ol-fertig, :where(html[data-theme="dark"]) .vstat.ol-erledigt { background: #1b381b; color: #b4dab4; }
:where(html[data-theme="dark"]) .vstat.ol-abgelehnt, :where(html[data-theme="dark"]) .vstat.ol-storniert { background: #3a1616; color: #d69b9b; }
:where(html[data-theme="dark"]) .staff-tbl tr.sum td { border-top: 2px solid var(--line, #404449); }
:where(html[data-theme="dark"]) .res-req-row { border-top: 1px solid var(--line,#3d4146); }
:where(html[data-theme="dark"]) .ok-mark { color: #98d9b0; }
:where(html[data-theme="dark"]) .err-mark { color: #d18a8a; }
:where(html[data-theme="dark"]) .warn-text { color: #deb290; }
:where(html[data-theme="dark"]) .drag:hover, :where(html[data-theme="dark"]) .drag:focus-visible { color: var(--ink, #d1d7de); background: rgba(255,255,255,0.07); }
:where(html[data-theme="dark"]) .dragging { background: #0e1a31 !important; }
:where(html[data-theme="dark"]) .bn-wrap { border: 1px solid var(--line, #3b4047); }
:where(html[data-theme="dark"]) .bn-table th { background: var(--panel, #1b1b1b); }
:where(html[data-theme="dark"]) .bn-table tr.bn-bad input { background: #2f130e; }
:where(html[data-theme="dark"]) .count-grid .num { color: var(--muted, #b4b9bf); }
:where(html[data-theme="dark"]) .stock.dep { background: #1d2327; color: #bdc6ce; }
:where(html[data-theme="dark"]) .sold-bar { background: #341212; color: #d6948f; }
:where(html[data-theme="dark"]) .sold-bar button { background: #1b1b1b; border-color: #663434; color: #d6948f; }
:where(html[data-theme="dark"]) .kpi .v.neg, :where(html[data-theme="dark"]) td.neg { color: #d6948f; }
:where(html[data-theme="dark"]) .sold-mode { background: #30100e; border: 1px solid #623733; color: #dda9a4; }
:where(html[data-theme="dark"]) .kpi .v.warn, :where(html[data-theme="dark"]) td.num.warn { color: #deb290; }
:where(html[data-theme="dark"]) .kpi .v.late, :where(html[data-theme="dark"]) td.num.late { color: #d6948f; }
:where(html[data-theme="dark"]) .table-tile .rev-busy { color: var(--warn, #dcb17f); }
:where(html[data-theme="dark"]) .diet { background: #143620; color: #b7dfc6; }
:where(html[data-theme="dark"]) .diet.vegan { background: #1b4429; color: #c0e2cd; }
:where(html[data-theme="dark"]) .st-delta.up { color: #a9ddbc; }
:where(html[data-theme="dark"]) .st-delta.down { color: #d38d8d; }
:where(html[data-theme="dark"]) .pf-auto.warn { color: #e6ce9d; }
:where(html[data-theme="dark"]) .ok-line { color: var(--ok, #acd8bf); }
:where(html[data-theme="dark"]) .badge-off { background: #2f1d1d; color: #cfa3a3; }
:where(html[data-theme="dark"]) .tn-state { background: #212225; color: #b5bdc7; }
:where(html[data-theme="dark"]) .tn-state.ok { background: #1d2d20; color: #b4d9bc; }
:where(html[data-theme="dark"]) .tn-state.warn { background: #3b3011; color: #ead6ac; }
:where(html[data-theme="dark"]) .tn-state.err { background: #321512; color: #d59d99; }
@media (min-width: 1100px) and (pointer: fine) {
  :where(html[data-theme="dark"]) #nav button:hover { background: rgba(255,255,255,0.03); }
  :where(html[data-theme="dark"]) #nav button.active { background: rgba(255,255,255,0.04); }
}
/* :where() hält die Spezifität wie im hellen Design, damit Regeln mit Variablen (z. B. .test-pill) weiter gewinnen */
/* Dunkler Modus: Ergänzungen von Hand (werden von dunkel-css.py ans Ende gehängt) */
:where(html[data-theme="dark"]) input, :where(html[data-theme="dark"]) select, :where(html[data-theme="dark"]) textarea { background: #10161e; color: var(--ink); border-color: var(--line-2); }
:where(html[data-theme="dark"]) input::placeholder, :where(html[data-theme="dark"]) textarea::placeholder { color: #6d7a8b; }
:where(html[data-theme="dark"]) button { color: var(--ink); }
:where(html[data-theme="dark"]) button.primary, :where(html[data-theme="dark"]) button.sel, :where(html[data-theme="dark"]) button.ok { color: #fff; }
:where(html[data-theme="dark"]) button.danger { background: transparent; border-color: #7f2a2a; color: #f87171; }
:where(html[data-theme="dark"]) .dialog .actions button.danger:only-of-type, :where(html[data-theme="dark"]) button.danger.solid { background: var(--accent); color: #fff; border-color: var(--accent); }
:where(html[data-theme="dark"]) a { color: #8ab4ff; }
:where(html[data-theme="dark"]) .muted { color: var(--muted); }
:where(html[data-theme="dark"]) .overlay { background: rgba(0,0,0,.6); }
/* im hellen Design dunkle Flächen mit var(--ink): im Dunklen nicht weiß werden lassen */
:where(html[data-theme="dark"]) .chips button.active, :where(html[data-theme="dark"]) .pa-filter .flt.active { background: var(--primary); border-color: var(--primary); color: #fff; }
:where(html[data-theme="dark"]) #toast { background: #2b3746; color: #fff; border: 1px solid #3d4a5c; }
:where(html[data-theme="dark"]) #nav .badge { color: #fff; }
:where(html[data-theme="dark"]) .login-brand .logo-hell { display: none; }
:where(html[data-theme="dark"]) .login-brand .logo-dunkel { display: block; }
/* Umbuchen: Tische des gewählten Raums als Kacheln */
.mv-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 40vh; overflow: auto; padding: 2px; }
.mv-tables button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; }
.mv-tables button small { font-size: .78rem; opacity: .75; }
.mv-tables button.busy:not(.sel) { border-color: var(--primary); }
.mv-tables p { grid-column: 1 / -1; margin: 4px 0; }

/* Veranstaltungen: gesperrte Räume und Tische, Sammeltisch */
.ev-host { margin: 0 0 6px; padding: 6px 10px; border-radius: var(--radius); background: #ede9fe; color: #4c1d95; font-size: .9rem; }
.ev-host.over { background: #fee2e2; color: #991b1b; }
:where(html[data-theme="dark"]) .ev-host { background: #2e1065; color: #ddd6fe; }
:where(html[data-theme="dark"]) .ev-host.over { background: #450a0a; color: #fecaca; }
.ev-host-note { margin: 0 0 8px; }
.ev-blk { border-top: 1px solid var(--line, #e5e7eb); margin-top: 14px; padding-top: 4px; }
.ev-room { margin-bottom: 6px; }
.ev-room .checkline { margin: 8px 0 4px; }
.ev-tbls { display: flex; flex-wrap: wrap; gap: 4px; margin-left: 28px; }
.ev-tbls button { padding: 4px 10px; min-width: 42px; border-radius: 999px; font-size: .85rem; }
.ev-tbls button.on, .ev-room.all .ev-tbls button { background: #ede9fe; border-color: #8b5cf6; color: #4c1d95; text-shadow: none; }
.ev-room.all .ev-tbls button { opacity: .75; }
.ev-blk-sum { font-size: .8rem; color: #5b21b6; margin-top: 2px; }
.ev-day { background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 8px; padding: 8px 12px; margin: 0 0 10px; color: #3b0764; }
.ev-tag { display: inline-block; background: #ede9fe; color: #4c1d95; border-radius: 6px; padding: 1px 6px; font-size: .75rem; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-tile.blocked { background: #f5f3ff; border-color: #a78bfa; }
.table-tile.group-t { border-color: #7c3aed; box-shadow: inset 4px 0 0 #7c3aed; }
:where(html[data-theme="dark"]) .ev-tbls button.on, :where(html[data-theme="dark"]) .ev-room.all .ev-tbls button, :where(html[data-theme="dark"]) .ev-tag { background: #2e1f57; color: #ddd6fe; border-color: #6d28d9; }
:where(html[data-theme="dark"]) .table-tile.blocked, :where(html[data-theme="dark"]) .ev-day { background: #221a3a; border-color: #5b46a0; color: #e9e3ff; }
:where(html[data-theme="dark"]) .ev-blk-sum { color: #c4b5fd; }
.ev-warn { color: #b02a37; font-weight: 600; }
.mn-dish { display: grid; grid-template-columns: 80px 1.4fr 1fr auto; gap: 6px; margin-top: 6px; align-items: center; }
.mn-dish input { margin: 0; }
.mn-sched { grid-template-columns: 130px 1fr auto; }
.ev-dep { grid-template-columns: 120px 160px 1fr auto; }
.adv-list .checkline { margin: 4px 0; }
@media (max-width: 600px) { .mn-dish { grid-template-columns: 64px 1fr auto; } .mn-dish > button { grid-row: 1; grid-column: 3; } .mn-dish [data-f=dnote], .mn-dish [data-f=who] { grid-column: 1 / -1; } .mn-sched { grid-template-columns: 100px 1fr auto; } .ev-dep { grid-template-columns: 1fr 1fr auto; } .ev-dep [data-f=note] { grid-column: 1 / -1; } }
:where(html[data-theme="dark"]) .ev-warn { color: #f1aeb5; }
/* Veranstaltungen: Nächste 14 Tage und Kalender je Raum (Angebot gelb, bestätigt grün, gebucht blau, abgerechnet und abgesagt grau) */
.ev-soon { margin-bottom: 12px; }
.ev-soon-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 4px; border-top: 1px solid var(--line, #e5e7eb); }
.ev-soon-row:first-of-type { border-top: 0; }
.ev-soon-day { display: flex; flex-direction: column; min-width: 92px; }
.ev-todo { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.ev-chip { background: #fff4e5; color: #8a4b00; border: 1px solid #f5c26b; border-radius: 999px; padding: 1px 8px; font-size: .78rem; }
.ev-chip.ok { background: #e8f6ec; color: #17663a; border-color: #9fd8b2; }
.ev-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.ev-cal-h { text-align: center; font-size: .8rem; color: var(--muted, #6c757d); font-weight: 600; }
.ev-cal-d { min-height: 92px; background: var(--card, #fff); border: 1px solid var(--line, #e5e7eb); border-radius: 8px; padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ev-cal-d.off { background: transparent; border: 0; cursor: default; }
.ev-cal-d.past { opacity: .7; }
.ev-cal-d.today { border-color: var(--primary, #2563eb); box-shadow: inset 0 0 0 1px var(--primary, #2563eb); }
.ev-cal-n { font-size: .8rem; font-weight: 600; color: var(--muted, #6c757d); }
.ev-cal-e { display: block; width: 100%; text-align: left; font-size: .76rem; line-height: 1.25; padding: 2px 5px; border-radius: 5px; border: 1px solid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 0; font-weight: 600; }
.ev-cal-legend .ev-cal-e { display: inline-block; width: auto; }
.ev-st-angebot { background: #fff4c2; border-color: #e5c04a; color: #6b4e00; }
.ev-st-bestaetigt { background: #dcf5e4; border-color: #7fcf9a; color: #155c32; }
.ev-st-gebucht { background: #dbeafe; border-color: #7aa7f0; color: #1e3a8a; }
.ev-st-abgerechnet { background: #eef0f2; border-color: #c9ced4; color: #495057; }
.ev-st-abgesagt { background: #eef0f2; border-color: #c9ced4; color: #868e96; text-decoration: line-through; }
.ev-cal-title { min-width: 150px; text-align: center; }
@media (max-width: 700px) { .ev-cal-d { min-height: 64px; padding: 2px; } .ev-cal-e small { display: none; } .ev-cal-e { font-size: .68rem; padding: 1px 3px; } }
:where(html[data-theme="dark"]) .ev-chip { background: #3a2a10; color: #f8d58c; border-color: #8a6420; }
:where(html[data-theme="dark"]) .ev-chip.ok { background: #143323; color: #a7e3bd; border-color: #2f7a4d; }
:where(html[data-theme="dark"]) .ev-st-angebot { background: #3a3110; color: #f4dc8a; border-color: #8a7420; }
:where(html[data-theme="dark"]) .ev-st-bestaetigt { background: #143323; color: #a7e3bd; border-color: #2f7a4d; }
:where(html[data-theme="dark"]) .ev-st-gebucht { background: #172a4d; color: #bcd3fb; border-color: #3b5f9e; }
:where(html[data-theme="dark"]) .ev-st-abgerechnet, :where(html[data-theme="dark"]) .ev-st-abgesagt { background: #2a2e33; color: #adb5bd; border-color: #495057; }

/* Bedienoberfläche „Klassisch (Tastenfeld)“ je Gerät: Bonliste links mit Ziffernblock, rechts große farbige Tasten.
   Die Tastenfarbe kommt als --kc (Hintergrund) und --ki (Schrift) an der Taste. */
.ow-pad { display: none; }
.ui-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.ui-pick button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; text-align: left; font-weight: 400; }
.ui-pick button.sel { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.ui-pick .muted { font-size: .85rem; }
.ui-pv { display: block; width: 100%; height: 70px; border-radius: 6px; margin-bottom: 6px; }
.ui-pv-modern { background: linear-gradient(90deg, #1e293b 0 22%, #f3f4f6 22% 72%, #fff 72%); border: 1px solid var(--line); }
.ui-pv-klassisch { background: linear-gradient(#fff, #fff) 4px 4px / 36% 52% no-repeat, repeating-linear-gradient(90deg, #c9ced6 0 9px, #262a31 9px 11px) 4px 64% / 36% 28% no-repeat,
  repeating-linear-gradient(90deg, #c0392b 0 22%, #262a31 22% 25%) 44% 4px / 54% 42% no-repeat, repeating-linear-gradient(90deg, #2e86c1 0 22%, #262a31 22% 25%) 44% 92% / 54% 42% no-repeat, #262a31; }

.kk, .order-wrap.kl .ow-cat, .order-wrap.kl .tile, .kl-grid .table-tile { border: 0; border-radius: 3px; text-shadow: none; font-weight: 700; box-shadow: inset 0 2px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.35);
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(0,0,0,.12)); }
.kk { min-height: 0; padding: 2px; color: #fff; background-color: #5b6270; font-size: .95rem; line-height: 1.1; overflow: hidden; }
.kk:hover { background-color: #6a7280; border: 0; }
.kk:active, .order-wrap.kl .tile:active, .kl-grid .table-tile:active { transform: none; box-shadow: inset 0 3px 6px rgba(0,0,0,.45); }
.kk:disabled { opacity: .4; }
.kk.kn { background-color: #dfe3e8; color: #111; font-size: 1.45rem; }
.kk.kn:hover { background-color: #eceff3; }
.kk.k-red { background-color: #c62828; } .kk.k-grn { background-color: #1e8e3e; } .kk.k-org { background-color: #e08a14; } .kk.k-blu { background-color: #2563c9; }
.kk.k-big { font-size: 1.25rem; }
.kk.on { outline: 3px solid #fff; outline-offset: -3px; }

/* Bestellen */
.order-wrap.wide.kl { grid-template-columns: minmax(340px, 38%) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "cart cats" "cart main" "pad main";
  gap: 6px; padding: 6px; margin: -18px -16px 0; width: auto; background: #262a31; }
.order-wrap.kl .ow-cart { grid-area: cart; margin: 0; border: 2px solid #000; border-radius: 2px; background: #fff; color: #111; box-shadow: none; }
.order-wrap.kl .ow-cats { grid-area: cats; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; margin: 0; padding: 0; background: none; overflow: visible; }
.order-wrap.kl .ow-cat { min-height: 48px; justify-content: center; text-align: center; padding: 2px 6px; font-size: .95rem; background-color: var(--kc); color: var(--ki); }
.order-wrap.kl .ow-cat.active { outline: 3px solid #fff; outline-offset: -3px; }
.order-wrap.kl .ow-cat .count { background: #fff; color: #111; }
.order-wrap.kl .ow-main { grid-area: main; padding: 0; color: #e5e7eb; }
.order-wrap.kl .ow-pad { grid-area: pad; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 52px; gap: 4px; }
.order-wrap.kl .tabbar, .order-wrap.kl .search-row { display: none; }
.order-wrap.kl.kl-find .search-row { display: flex; margin-bottom: 6px; }
.order-wrap.kl .tiles { grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 4px; }
.order-wrap.kl .tile, .order-wrap.kl .tile.tile-cat { min-height: 92px; padding: 8px; background-color: var(--kc, #5b6270); color: var(--ki, #fff); }
.order-wrap.kl .tile:hover { border: 0; filter: brightness(1.08); }
.order-wrap.kl .tile .muted, .order-wrap.kl .tile .t-price { color: inherit; opacity: .9; }
.order-wrap.kl .tile .t-name { font-size: 1rem; }
.order-wrap.kl .tile .count { background: #fff; color: #111; }
.order-wrap.kl .tile.soldout { opacity: .6; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.4) 0 8px, transparent 8px 16px); }
.order-wrap.kl .ow-trail { color: #fff; } .order-wrap.kl .ow-trail .trail-link { color: #9cc3ff; }
.order-wrap.kl #orderBody > .muted, .order-wrap.kl .ow-hint { color: #cfd3da; }
.order-wrap.kl #orderBody table.list { background: var(--panel); color: var(--ink); }
.order-wrap.kl .sold-mode { margin-bottom: 6px; }
.kb-head { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; background: #3a4a63; color: #fff; font-weight: 700; }
.kb-lines { flex: 1; min-height: 0; overflow-y: auto; }
.kb-line { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px; width: 100%; min-height: 0; padding: 7px 10px; border: 0; border-bottom: 1px solid #e3e3e3; border-radius: 0;
  background: none; box-shadow: none; text-shadow: none; color: #111; text-align: left; font-weight: 400; font-size: 1rem; }
.kb-line:hover { background: #f4f6f8; border: 0; border-bottom: 1px solid #e3e3e3; }
.kb-line.old { color: #777; }
.kb-line small { display: block; font-size: .8rem; color: #c0392b; }
.kb-line.sel, .kb-line.sel:hover { background: #ffe58a; }
.kb-line > span:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kb-empty { color: #888; padding: 20px 12px; text-align: center; margin: 0; }
.kb-sub { display: flex; justify-content: space-between; padding: 3px 10px; color: #555; font-size: .92rem; }
.kb-sum { display: flex; align-items: center; gap: 10px; padding: 8px 10px; font-size: 1.4rem; font-weight: 800; border-top: 3px double #000; background: #f2f2f2; font-variant-numeric: tabular-nums; }
.kb-sum .kb-l { flex: 1; }
.kb-mult { background: #0b1a10; color: #5dff8a; font-family: ui-monospace, "Courier New", monospace; padding: 0 8px; border-radius: 3px; }

/* Tische */
main:has(.kl-tables) { padding-bottom: 0; }
.kl-tables { display: grid; grid-template-columns: minmax(320px, 36%) minmax(0, 1fr); gap: 6px; height: calc(100% + 14px); margin: -14px -16px 0; padding: 6px; background: #262a31; color: #e5e7eb; }
.kl-left, .kl-right { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.kl-lcd { display: flex; flex-direction: column; justify-content: center; min-height: 96px; padding: 4px 16px; background: #0b1a10; border: 2px solid #000; color: #5dff8a; font-family: ui-monospace, "Courier New", monospace; }
.kl-lcd-l { font-size: .95rem; color: #9fd8ae; }
.kl-lcd-v { font-size: 2.8rem; font-weight: 700; line-height: 1.1; }
.kl-open { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #fff; color: #111; border: 2px solid #000; }
.kl-open .kb-line { grid-template-columns: minmax(70px, auto) minmax(0, 1fr) auto; }
.kl-open .kb-line > span:nth-child(2) { color: #666; }
.kl-tpad { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 54px; gap: 4px; }
.kl-rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px; }
.kl-rooms .kk { min-height: 48px; }
.kl-right .table-warn { margin: 0; }
.kl-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.kl-grid .table-tile { min-height: 104px; color: #fff; background-color: #5b6270; }
.kl-grid .table-tile .name { font-size: 1.6rem; }
.kl-grid .table-tile .muted { color: inherit; opacity: .85; }
.kl-grid .table-tile.busy { background-color: #c62828; }
.kl-grid .table-tile.ready { background-color: #1e8e3e; }
.kl-grid .table-tile.reserved { background-color: #2563c9; }
.kl-grid .table-tile.blocked { background-color: #6d28d9; }
.kl-grid .table-tile.wait-warn { outline: 4px solid #ffd54a; outline-offset: -4px; }
.kl-grid .table-tile.wait-late { outline: 4px solid #fff; outline-offset: -4px; }
.kl-grid .table-tile:hover { border: 0; filter: brightness(1.1); }
.kl-grid .table-tile b, .kl-grid .table-tile .wait-txt { color: #fff !important; }
.kl-legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: .85rem; color: #cfd3da; padding: 0 4px; }
.kl-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.lg-free { background: #5b6270; } .lg-busy { background: #c62828; } .lg-ready { background: #1e8e3e; } .lg-res { background: #2563c9; }
.ui-pick button.sel { background: var(--panel); color: var(--ink); }
.kb-line.sel, .kb-line.sel:hover { color: #111; }
.order-wrap.kl .tile .t-cnt { display: none; }
.order-wrap.kl .ow-cat { position: relative; }
.order-wrap.kl .ow-cat .count { position: absolute; top: 3px; right: 3px; min-width: 20px; height: 20px; padding: 0 5px; line-height: 20px; font-size: .75rem; }
@media (max-width: 1000px) {
  .order-wrap.wide.kl { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .kk { font-size: .78rem; }
  .kk.k-big { font-size: 1rem; }
  .kl-tables { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
}

/* 1.80: Kategorien in der Produktliste auf- und zuklappen */
.pa-table tr.pa-grp td { background: var(--page); cursor: pointer; padding-top: 10px; padding-bottom: 10px; user-select: none; }
.pa-table tr.pa-grp:hover td { background: #e8ecf1; }
.pa-grp .chev, .prod-group-head .chev { display: inline-block; width: 1.2em; color: var(--muted); }
#paFold .link { margin-right: 10px; }
.prod-group-head[data-fold] { cursor: pointer; user-select: none; }
.prod-group.shut .prod-table { display: none; }
:where(html[data-theme="dark"]) .pa-table tr.pa-grp:hover td { background: #20242a; }

/* ---------- Farben (ab 1.84): je Bedienung wählbar, mit Menü ☰ statt Leiste oben ---------- */
.farbe-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 10px 0; }
.farbe-pick button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; text-align: left; font-weight: 400; }
.farbe-pick button b { font-size: 1rem; }
.pin-change { display: grid; gap: 10px; margin: 10px 0; }
.pin-change label { display: grid; gap: 4px; font-weight: 600; }
.pin-change input { font-size: 1.2rem; letter-spacing: 3px; }
.farbe-pick button .muted { font-size: .8rem; line-height: 1.25; }
.farbe-pick button.sel { outline: 3px solid var(--primary); outline-offset: -1px; background: var(--panel); color: var(--ink); }
.farbe-pick button.sel .muted { color: var(--muted); }
.fa-pv { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: 44px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0,0,0,.2); }
.fa-pv i:first-child { grid-column: span 2; }
#burgerBtn { display: none; }
/* Modern: ☰ als kleiner Knopf rechts oben neben Abmelden, die Leiste bleibt; ersetzt den Knopf Hell/Dunkel */
html[data-menu]:not([data-burger]) #burgerBtn { display: inline-flex; align-items: center; justify-content: center; order: 99; background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-sm); padding: 3px 9px; min-height: 26px; text-shadow: none; box-shadow: none; position: relative; }
html[data-menu]:not([data-burger]) #burgerBtn:hover { background: rgba(255,255,255,.16); }
html[data-menu]:not([data-burger]) #burgerBtn .bg-txt, html[data-menu]:not([data-burger]) #burgerBtn .badge { display: none; }
html[data-menu] #themeBtn { display: none; }
html[data-burger] #nav, html[data-burger] #topbar .who > :not(#burgerBtn) { display: none !important; }
html[data-burger] #burgerBtn { display: inline-flex; align-items: center; gap: 8px; position: relative; background: var(--f-hbtn, rgba(255,255,255,.08)); color: #fff; border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 1rem; text-shadow: none; box-shadow: none; }
html[data-burger] #burgerBtn .badge { background: var(--accent); color: #fff; border-radius: 9px; padding: 0 6px; font-size: .72rem; line-height: 17px; }
.burger-ico, .burger-ico::before, .burger-ico::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; position: relative; }
.burger-ico::before, .burger-ico::after { content: ""; position: absolute; left: 0; }
.burger-ico::before { top: -6px; } .burger-ico::after { top: 6px; }
html[data-burger] .who { top: 50%; transform: translateY(-50%); }
/* PC: .who steht dort in der Zeile (position: static), das Verschieben würde den Knopf über die Leiste hinaus schieben */
@media (min-width: 1100px) and (pointer: fine) { html[data-burger] .who { transform: none; } }
html[data-burger] #topbar { min-height: 56px; }
.burger { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,.45); }
.bg-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 84vw); background: var(--panel); color: var(--ink); display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.3); }
.bg-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px 14px 18px; background: var(--bar); color: #fff; }
.bg-head small { display: block; opacity: .75; font-weight: 400; }
.bg-x { background: transparent; border: 0; color: #fff; font-size: 1.5rem; box-shadow: none; padding: 4px 10px; }
.bg-list { overflow-y: auto; flex: 1; }
.bg-item { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--panel); color: var(--ink); padding: 15px 18px; font-size: 1.05rem; box-shadow: none; }
.bg-item:hover { background: var(--btn-hover); }
.bg-item.on { background: var(--f-tab-on, var(--primary)); color: var(--f-tab-on-ink, #fff); }
.bg-item .badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: .8rem; }
.bg-item.bg-out { color: var(--accent); }
.bg-sep { height: 10px; background: var(--page); border-bottom: 1px solid var(--line); }
.bg-ver { padding: 10px 18px; font-size: .8rem; }

/* gemeinsame Regeln aller Farben; die Werte kommen aus den Variablen je Farbe */
html[data-farbe] body { background: var(--page); }
html[data-farbe] #topbar, html[data-farbe] .os-header { background: var(--bar); }
html[data-farbe] .hdr-btn { background: var(--f-hbtn); border-color: rgba(255,255,255,.2); color: #fff; }
html[data-farbe] .tabbar, html[data-farbe] .tabs { background: var(--f-tab); border: 1px solid var(--f-tab-line); padding: 0; gap: 0; border-radius: var(--radius); overflow: hidden; }
html[data-farbe] .tabbar button, html[data-farbe] .tabbar button:first-child, html[data-farbe] .tabs > button, html[data-farbe] .tabs > button:first-child, html[data-farbe] .tabs > button:nth-last-child(1 of button) { background: var(--f-tab); color: var(--f-tab-ink); border: 0; border-left: 1px solid var(--f-tab-line); border-radius: 0; font-weight: 700; box-shadow: none; }
html[data-farbe] .tabbar button:first-child, html[data-farbe] .tabs > button:first-child { border-left: 0; }
html[data-farbe] .tabbar button.active, html[data-farbe] .tabs > button.active { background: var(--f-tab-on); color: var(--f-tab-on-ink); }
html[data-farbe] .tabs .spacer + button { border-radius: 0; }
/* 1.87.2: Leisten mit .scroll (z. B. Bereiche der Verwaltung) bleiben auch in den Farb-Designs seitlich scrollbar */
html[data-farbe] .tabs.scroll { overflow-x: auto; overflow-y: hidden; }
html[data-farbe] .kasse-btn { background: var(--f-kasse); border-color: var(--f-kasse-line); color: var(--f-kasse-ink); }
html[data-farbe] .kasse-btn:hover { background: var(--f-kasse); filter: brightness(.95); }
html[data-farbe] .listview.cyan, html[data-farbe] .order-wrap .listview.cyan { border-color: var(--f-row-line); }
html[data-farbe] .order-wrap .listview li { border-bottom-color: var(--f-row-line); }
html[data-farbe] .order-wrap .listview li button { background: var(--f-row); color: var(--f-row-ink); }
html[data-farbe] .order-wrap .listview li button:hover { background: var(--f-row); filter: brightness(.96); }
html[data-farbe] .listview li button[data-p]::after { background-color: var(--f-chev); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='%23fff' d='M6 2h2v4h4v2H8v4H6V8H2V6h4z'/%3E%3C/svg%3E"); }
html[data-farbe] .order-wrap .lv-aside { color: var(--f-row-ink); opacity: .85; }
html[data-farbe] .table-tile { background: var(--f-tile); border-color: var(--f-tile-line); }
html[data-farbe] .table-tile.busy { background: var(--f-busy); border: 2px solid var(--f-busy-line); box-shadow: inset 4px 0 0 var(--f-busy-line), var(--shadow); }
html[data-farbe] .order-wrap.wide .ow-cat.active { background: var(--f-tab-on); color: var(--f-tab-on-ink); }

html[data-farbe="lavendel"] {
  --page: #f6f3fc; --line: #e2daf2; --line-2: #d3c7ec; --list-line: #e2daf2;
  --bar: #3b2c5e; --bar-2: #4a3873; --primary: #5b3fa0; --primary-dark: #4a3385; --primary-soft: #ece6f7; --busy-bg: #d9f3ec; --busy-line: #2bb39a;
  --f-hbtn: #4a3873; --f-tab: #fff; --f-tab-line: #d3c7ec; --f-tab-ink: #3b2c5e; --f-tab-on: #5b3fa0; --f-tab-on-ink: #fff;
  --f-row: #fff; --f-row-line: #e2daf2; --f-row-ink: #241a3a; --f-chev: #5b3fa0;
  --f-kasse: #2bb39a; --f-kasse-line: #22947f; --f-kasse-ink: #fff;
  --f-tile: #fff; --f-tile-line: #d3c7ec; --f-busy: #d9f3ec; --f-busy-line: #2bb39a;
}
html[data-farbe="muehle"] {
  --page: #f5efe3; --panel: #fffaf0; --btn: #fffaf0; --btn-hover: #f6eedd; --line: #e6dac2; --line-2: #d8cbb0; --ink: #2b2418; --muted: #6b6252; --list: #fffaf0; --list-hover: #f6eedd; --list-line: #e6dac2;
  --bar: #2f4a35; --bar-2: #3d5e44; --primary: #2f4a35; --primary-dark: #233a28; --primary-soft: #e3ece3; --busy-bg: #f6e2bf; --busy-line: #b5793a;
  --f-hbtn: #3d5e44; --f-tab: #fffaf0; --f-tab-line: #d8cbb0; --f-tab-ink: #4a3b28; --f-tab-on: #2f4a35; --f-tab-on-ink: #fff;
  --f-row: #fffaf0; --f-row-line: #e6dac2; --f-row-ink: #2b2418; --f-chev: #b5793a;
  --f-kasse: #b5793a; --f-kasse-line: #8f5c27; --f-kasse-ink: #fff;
  --f-tile: #fffaf0; --f-tile-line: #d8cbb0; --f-busy: #f6e2bf; --f-busy-line: #b5793a;
}
html[data-farbe="nacht"] {
  --page: #121820; --panel: #1b232d; --btn: #1b232d; --btn-hover: #243040; --line: #2a3542; --line-2: #374252; --ink: #e8eef5; --muted: #9fb0c3; --list: #1b232d; --list-line: #2a3542;
  --bar: #0b0f14; --bar-2: #151c25; --primary: #f59e0b; --primary-dark: #d97706; --primary-ink: #111; --primary-soft: #3a2a0a; --busy-bg: #3a2a0a; --busy-line: #f59e0b;
  --f-hbtn: #1b232d; --f-tab: #1b232d; --f-tab-line: #2a3542; --f-tab-ink: #9fb0c3; --f-tab-on: #f59e0b; --f-tab-on-ink: #111;
  --f-row: #1b232d; --f-row-line: #2a3542; --f-row-ink: #e8eef5; --f-chev: #f59e0b;
  --f-kasse: #22c55e; --f-kasse-line: #16a34a; --f-kasse-ink: #06210f;
  --f-tile: #1b232d; --f-tile-line: #2a3542; --f-busy: #3a2a0a; --f-busy-line: #f59e0b;
}
html[data-farbe="nacht"] button.primary, html[data-farbe="nacht"] button.sel { color: #111; }
html[data-farbe="meer"] {
  --page: #eef6f7; --line: #d3e8eb; --line-2: #bcdadf; --list-line: #d3e8eb;
  --bar: #0f5560; --bar-2: #18707d; --primary: #0f5560; --primary-dark: #0b434c; --primary-soft: #dcf0f2; --busy-bg: #ffe3da; --busy-line: #ff7a59;
  --f-hbtn: #18707d; --f-tab: #fff; --f-tab-line: #bcdadf; --f-tab-ink: #0f5560; --f-tab-on: #0f5560; --f-tab-on-ink: #fff;
  --f-row: #fff; --f-row-line: #d3e8eb; --f-row-ink: #123; --f-chev: #ff7a59;
  --f-kasse: #ff7a59; --f-kasse-line: #e8603f; --f-kasse-ink: #fff;
  --f-tile: #fff; --f-tile-line: #bcdadf; --f-busy: #ffe3da; --f-busy-line: #ff7a59;
}
html[data-farbe="bordeaux"] {
  --page: #f6f0ea; --panel: #fffdf9; --btn: #fffdf9; --btn-hover: #f6eee6; --line: #ebdfd2; --line-2: #e0d2c4; --ink: #2a1a16; --list: #fffdf9; --list-line: #ebdfd2;
  --bar: #5a1424; --bar-2: #74203a; --primary: #5a1424; --primary-dark: #45101c; --primary-soft: #f3e3e6; --busy-bg: #f5e6c4; --busy-line: #c19a3e;
  --f-hbtn: #74203a; --f-tab: #fffdf9; --f-tab-line: #e0d2c4; --f-tab-ink: #5a1424; --f-tab-on: #5a1424; --f-tab-on-ink: #fff;
  --f-row: #fffdf9; --f-row-line: #ebdfd2; --f-row-ink: #2a1a16; --f-chev: #c19a3e;
  --f-kasse: #c19a3e; --f-kasse-line: #9e7c2c; --f-kasse-ink: #fff;
  --f-tile: #fffdf9; --f-tile-line: #e0d2c4; --f-busy: #f5e6c4; --f-busy-line: #c19a3e;
}
html[data-farbe="sonne"] {
  --page: #fff; --panel: #fff; --ink: #000; --muted: #333; --line: #000; --line-2: #000; --list-line: #000;
  --bar: #000; --bar-2: #222; --primary: #000; --primary-dark: #000; --primary-ink: #ffd400; --primary-soft: #fff3a8; --busy-bg: #ffd400; --busy-line: #000;
  --f-hbtn: #222; --f-tab: #fff; --f-tab-line: #000; --f-tab-ink: #000; --f-tab-on: #000; --f-tab-on-ink: #ffd400;
  --f-row: #fff; --f-row-line: #000; --f-row-ink: #000; --f-chev: #000;
  --f-kasse: #ffd400; --f-kasse-line: #000; --f-kasse-ink: #000;
  --f-tile: #fff; --f-tile-line: #000; --f-busy: #ffd400; --f-busy-line: #000;
}
html[data-farbe="sonne"] button.primary, html[data-farbe="sonne"] button.sel { color: #ffd400; }
html[data-farbe="sonne"] .table-tile, html[data-farbe="sonne"] button { border-width: 2px; }
html[data-farbe="sonne"] .table-tile .muted, html[data-farbe="sonne"] .muted { color: #222; }

/* Kasse ohne runde Ecken (1.88.0): in jedem Design eckig. Nur echte Kreise bleiben rund (Punkte, Ladekreis, runde Tische im Tischplan, Pfeilknöpfe in Listen).
   Gilt für index.html und uebung.html (html.kasse), Gästeseiten, Bon, Stempelkarte und TV bleiben wie sie sind. */
html.kasse *, html.kasse *::before, html.kasse *::after { border-radius: 0 !important; }
html.kasse .dot, html.kasse .spin, html.kasse .plan .plan-t.shape-rund, html.kasse .tabs button.has-warn::after,
html.kasse .ico-back, html.kasse .ico-down, html.kasse .listview li button::after { border-radius: 50% !important; }

/* Kategoriebaum auf- und zuklappen (Verwaltung → Produkte und Kategorien) */
.cat-chev { display: inline-flex; align-items: center; justify-content: center; width: 22px; min-height: 26px; margin-right: 2px; color: var(--muted); font-size: .85rem; cursor: pointer; flex: none; }
.cat-chev.none { cursor: default; }
.cat-chev:hover { color: var(--ink); }
.pa-cat-name { display: inline-flex; align-items: center; flex: 1; min-width: 0; }
.pa-cat .n { flex: none; }
.pa-cat.active .cat-chev { color: #fff; }
.chips button .chip-fold { margin-left: 4px; font-size: .8rem; opacity: .7; }
.chips button.sub { font-weight: 500; }
.pa-tree-head #paTreeFold { margin-left: auto; margin-right: 12px; }
/* 1.97: Statistik-Kopf aufgeräumt: Titel mit Ansicht und Ausgeben, Reiter als wischbare Leiste, Zeitraum in einer Zeile */
.st-head { margin-bottom: 10px; gap: 8px; flex-wrap: nowrap; align-items: center; }
.st-head > button, .st-out > button { white-space: nowrap; }
.st-out { position: relative; }
.st-out-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 160px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(16,24,40,.18); }
.st-out-pop[hidden] { display: none; }
.st-out-pop > button { border: 0; border-radius: 0; box-shadow: none; background: transparent; text-align: left; padding: .7em 1em; white-space: nowrap; }
.st-out-pop > button + button { border-top: 1px solid var(--line); }
.st-out-pop > button:hover { background: var(--btn-hover); }
.st-tabs { margin-bottom: 10px; }
/* Umsatz-Menü: Reiter und Kopf wie in der Statistik */
.rp-tabs { margin-bottom: 10px; }
.rp-head { flex-wrap: wrap; }
.st-filter { gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.st-filter select { width: auto; margin: 0; }
.st-dates { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.st-dates input { width: auto; margin: 0; }
@media (max-width: 700px) {
  .st-filter select { flex: 1 1 40%; min-width: 0; }
  .st-range { flex-basis: 100%; }
  .st-dates { flex-basis: 100%; }
  .st-dates input { flex: 1; min-width: 0; }
}

/* Bestellen modern (1.98.0): ruhige Flächen, Farbstreifen je Kategorie, Reiter mit Unterstrich, Bestellung mit Mengenschalter.
   Gilt in jedem Design (Farben über --ow-acc), nicht in der Tastenfeld-Ansicht (.kl). Ecken bleiben eckig. */
:root { --ow-acc: var(--primary); --ow-acc-ink: #fff; }
html[data-farbe] { --ow-acc: var(--f-tab-on); --ow-acc-ink: var(--f-tab-on-ink); }
html[data-farbe="sonne"] { --ow-acc: #000; --ow-acc-ink: #ffd400; }
.hdr-title small { display: block; font-size: .78rem; font-weight: 500; opacity: .75; text-shadow: none; line-height: 1.2; }
.hdr-title small:empty { display: none; }
html .order-wrap:not(.kl) .tabbar { background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 0; gap: 0; box-shadow: none; overflow: visible; margin-bottom: 14px; }
html .order-wrap:not(.kl) .tabbar button, html .order-wrap:not(.kl) .tabbar button:first-child { background: transparent; border: 0; color: var(--muted); font-weight: 600; padding: 12px 6px 11px; box-shadow: none; text-shadow: none; }
html .order-wrap:not(.kl) .tabbar button:hover { background: transparent; color: var(--ink); }
html .order-wrap:not(.kl) .tabbar button.active { background: transparent; color: var(--ink); font-weight: 700; box-shadow: inset 0 -3px 0 var(--ow-acc); }
html .order-wrap:not(.kl) .search-row { gap: 8px; }
html .order-wrap:not(.kl) .search-row input { font-family: var(--font); padding: 11px 12px 11px 40px; border: 1px solid var(--line-2); box-shadow: none; background: var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a5' stroke-width='2.4'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L21 21'/%3E%3C/svg%3E") 12px center/18px no-repeat; }
html .order-wrap:not(.kl) .search-row input:focus { border-color: var(--ow-acc); box-shadow: inset 0 0 0 1px var(--ow-acc); }
html .order-wrap:not(.kl) .search-row > button:not(.kasse-btn) { background: var(--panel); border: 1px solid var(--line-2); color: var(--ink); font-weight: 600; box-shadow: none; }
html .order-wrap:not(.kl) .search-row > button:not(.kasse-btn):hover { border-color: var(--ow-acc); }
/* Kategorien links: Farbstreifen, gewählte Kategorie voll eingefärbt */
html .order-wrap.wide:not(.kl) .ow-cats { gap: 2px; padding: 10px 0; }
html .order-wrap.wide:not(.kl) .ow-cat { min-height: 52px; padding: 0 14px 0 18px; box-shadow: inset 4px 0 0 var(--cc, transparent); font-weight: 600; }
html .order-wrap.wide:not(.kl) .ow-cat.active { background: var(--ow-acc); color: var(--ow-acc-ink); box-shadow: inset 6px 0 0 var(--cc, transparent); }
html .order-wrap.wide:not(.kl) .ow-cat .count { background: var(--ow-acc-ink); color: var(--ow-acc); }
html .order-wrap.wide:not(.kl) .ow-cat:not(.active) .count { background: #fff; color: #111; }
/* Kacheln: Farbstreifen oben, Preis unten links, Plus unten rechts; schon gewählt = eingefärbt */
html .order-wrap:not(.kl) .tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
html .order-wrap:not(.kl) .tile { position: relative; min-height: 112px; padding: 14px 12px 12px; border: 1px solid var(--line); border-top: 4px solid var(--pc, var(--line-2)); background: var(--panel); box-shadow: 0 1px 2px rgba(16,24,40,.06); gap: 10px; }
html .order-wrap:not(.kl) .tile:hover { border-color: var(--ow-acc); border-top-color: var(--pc, var(--line-2)); }
html .order-wrap:not(.kl) .tile:active { transform: none; background: var(--btn-down, #e5e9ef); }
html .order-wrap:not(.kl) .tile .t-name { font-size: 1.05rem; font-weight: 700; line-height: 1.25; }
html .order-wrap:not(.kl) .tile .t-bot { padding-right: 34px; }
html .order-wrap:not(.kl) .tile .t-bot > span:first-child { order: 2; }
html .order-wrap:not(.kl) .tile .t-price { order: 1; font-size: 1.1rem; }
html .order-wrap:not(.kl) .t-add { position: absolute; right: 8px; bottom: 8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--primary-soft); color: var(--ow-acc); font-size: 1.3rem; font-weight: 700; line-height: 1; }
html[data-farbe] .order-wrap:not(.kl) .t-add { background: color-mix(in srgb, var(--ow-acc) 14%, var(--panel)); }
html .order-wrap:not(.kl) .tile.in { border-color: var(--ow-acc); box-shadow: inset 0 0 0 1px var(--ow-acc); background: color-mix(in srgb, var(--ow-acc) 7%, var(--panel)); }
html .order-wrap:not(.kl) .tile.in .t-add { background: var(--ow-acc); color: var(--ow-acc-ink); }
html .order-wrap:not(.kl) .tile .count { background: var(--ow-acc); color: var(--ow-acc-ink); }
html .order-wrap:not(.kl) .tile .p-minus { width: 30px; min-width: 30px; margin-right: 0; }
html .order-wrap:not(.kl) .tile.tile-cat { border-top-color: var(--cc, var(--line-2)); background: color-mix(in srgb, var(--cc, #888) 9%, var(--panel)); }
html .order-wrap:not(.kl) .tile.tile-cat:hover { border-color: var(--cc, var(--ow-acc)); border-top-color: var(--cc, var(--line-2)); }
html .order-wrap:not(.kl) .tile.tile-cat .t-bot { padding-right: 0; }
html .order-wrap:not(.kl) .tile.tile-cat .t-price { order: 2; font-size: 1.4rem; color: var(--cc, var(--muted)); }
.order-wrap.kl .t-add { display: none; }
/* Neue Bestellung rechts */
html .order-wrap.wide:not(.kl) .oc-head { align-items: center; justify-content: flex-start; gap: 10px; padding: 16px 18px 10px; border-bottom: 1px solid var(--line); }
.oc-cnt { min-width: 26px; height: 26px; padding: 0 7px; line-height: 26px; text-align: center; background: var(--ow-acc); color: var(--ow-acc-ink); font-size: .85rem; font-weight: 700; }
html .order-wrap.wide:not(.kl) .oc-lines { padding: 0 14px; }
html .order-wrap.wide:not(.kl) .oc-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; }
.oc-step { display: flex; align-items: center; border: 1px solid var(--line-2); background: var(--panel); }
html .order-wrap.wide .oc-step .oc-q { width: 34px; height: 36px; border: 0; background: transparent; box-shadow: none; font-size: 1.15rem; color: var(--ink); }
html .order-wrap.wide .oc-step .oc-q:hover { background: var(--primary-soft); }
.oc-step .oc-n { min-width: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.oc-name b { line-height: 1.25; }
.oc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 3px; }
.oc-meta .oc-course { border: 1px solid var(--line); background: var(--page, #f3f4f6); color: var(--muted); font-size: .78rem; padding: 2px 4px; min-height: 0; }
.oc-note { min-height: 0; padding: 2px 6px; border: 1px dashed var(--line-2); background: transparent; box-shadow: none; color: var(--muted); font-size: .78rem; font-weight: 600; text-shadow: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-note.has { border-style: solid; border-color: #f0c36d; background: #fff6df; color: #7a4b00; }
.oc-price { font-variant-numeric: tabular-nums; white-space: nowrap; }
html .order-wrap.wide:not(.kl) .oc-empty { margin: 24px 4px; padding: 26px 14px; border: 2px dashed var(--line); display: flex; flex-direction: column; gap: 4px; color: var(--muted); }
.oc-empty b { color: var(--ink); }
html .order-wrap.wide:not(.kl) .oc-foot { background: var(--panel); box-shadow: 0 -6px 16px rgba(16,24,40,.06); }
html .order-wrap.wide:not(.kl) .oc-foot .total { border-top: 0; font-size: 1.35rem; }
/* Handy: Kategorien als farbige Kacheln, gewählte Produkte markiert, unten die Leiste „x neu · Senden“ */
html .order-wrap .listview li.cat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); background: var(--page, #f3f4f6); }
html .order-wrap .listview li.cat-grid > button[data-cat] { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 84px; padding: 12px 12px 10px; border: 1px solid var(--line); border-top: 4px solid var(--cc); background: color-mix(in srgb, var(--cc) 9%, var(--panel)); color: var(--ink); font-size: 1.02rem; }
html .order-wrap .listview li.cat-grid > button[data-cat]::after { display: none; }
html .order-wrap .listview li.cat-grid > button[data-cat] > span:not(.count) { color: var(--muted); font-size: .82rem; font-weight: 500; }
html .order-wrap .listview li.cat-grid .count { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 6px; line-height: 24px; text-align: center; background: var(--ow-acc); color: var(--ow-acc-ink); font-size: .8rem; font-weight: 700; }
html .order-wrap .listview li.in > button { box-shadow: inset 4px 0 0 var(--ow-acc); }
html .order-wrap .listview li.in .lv-aside .count { background: var(--ow-acc); color: var(--ow-acc-ink); }
.ow-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--bar); box-shadow: 0 -6px 18px rgba(0,0,0,.18); }
.ow-bar[hidden] { display: none; }
.ow-bar button { min-height: 52px; border: 0; box-shadow: none; text-shadow: none; }
.ow-bar #barShow { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 4px 12px; background: rgba(255,255,255,.1); color: #fff; text-align: left; }
.ow-bar #barShow span { font-size: .85rem; opacity: .8; }
.ow-bar #barSend { flex: none; min-width: 130px; font-size: 1.1rem; font-weight: 700; }
.order-wrap:has(> .ow-bar:not([hidden])) { padding-bottom: 80px; }
html .order-wrap:not(.kl) .tile .t-top { padding-right: 0; }
html .order-wrap:not(.kl) .tile .t-cnt { position: absolute; right: 36px; bottom: 8px; gap: 0; }
html .order-wrap:not(.kl) .tile .t-cnt .p-minus { width: 28px; min-width: 28px; height: 28px; line-height: 26px; border-color: var(--ow-acc); }
html .order-wrap:not(.kl) .tile .t-cnt .count { min-width: 28px; height: 28px; line-height: 28px; padding: 0 4px; background: var(--panel); color: var(--ink); border-top: 1px solid var(--ow-acc); border-bottom: 1px solid var(--ow-acc); font-weight: 700; }
@media (max-width: 600px) {
  html .order-wrap:not(.kl) .tabbar button, html .order-wrap:not(.kl) .tabbar button:first-child { padding: 12px 1px 11px; font-size: .86rem; }
}

/* Größere Bestellansicht (Verwaltung → System → Einstellungen → Größe der Bestellansicht).
   Die ganze Ansicht wird gezoomt (Kategorien, Kacheln, Zeilen der neuen Bestellung, Knöpfe);
   Kacheln und Handy-Listenzeilen bekommen etwas zusätzlich. Steht am Ende, damit es alle Designs überschreibt. */
html[data-tiles="gross"] .order-wrap { zoom: 1.15; }
html[data-tiles="sehrgross"] .order-wrap { zoom: 1.3; }
@media (max-width: 600px) { html[data-tiles="sehrgross"] .order-wrap { zoom: 1.22; } }
/* Breite Ansicht: Kategorien und Bestellung etwas schmaler, damit genug Platz für mehrere Kachel-Spalten bleibt */
html[data-tiles="gross"] .order-wrap.wide { grid-template-columns: 190px minmax(0, 1fr) 330px; }
html[data-tiles="sehrgross"] .order-wrap.wide { grid-template-columns: 160px minmax(0, 1fr) 290px; }
html[data-tiles="gross"] .order-wrap .tiles, html[data-tiles="sehrgross"] .order-wrap .tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
html[data-tiles="gross"] .order-wrap .tile { min-height: 122px; }
html[data-tiles="gross"] .order-wrap .tile .t-name { font-size: 1.13rem; }
html[data-tiles="sehrgross"] .order-wrap .tile { min-height: 132px; }
html[data-tiles="sehrgross"] .order-wrap .tile .t-name { font-size: 1.2rem; }
/* Handy mit „Produkte als Kacheln“: zwei Spalten, bei Sehr groß eine */
html .order-wrap .tiles.phone-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
html[data-tiles="sehrgross"] .order-wrap .tiles.phone-tiles { grid-template-columns: minmax(0, 1fr); }
/* Auf dem Handy (Liste statt Kacheln): höhere Zeilen */
html[data-tiles="gross"] .order-wrap .listview li:not(.lv-head) > button { padding-top: 19px; padding-bottom: 19px; font-size: 1.1rem; }
html[data-tiles="sehrgross"] .order-wrap .listview li:not(.lv-head) > button { padding-top: 24px; padding-bottom: 24px; font-size: 1.2rem; }
/* Beim Bestellen bleiben die Reiter (Auswahl, Ausgewählt, Bestellt, Protokoll) und darunter Suche, Zurück, Auswahl und Kasse beim Scrollen oben stehen */
html .order-wrap:not(.kl) .ow-sticky { position: sticky; top: var(--ow-top, 0px); z-index: 6; background: var(--page); margin-top: -8px; padding-top: 8px; }
html .order-wrap:not(.kl) .ow-sticky .search-row { padding-bottom: 8px; }
html .order-wrap.wide:not(.kl) .ow-sticky { top: -14px; }
/* Bestellen → Ausgewählt: größere Zeilen, Schrift und Knöpfe zum Tippen (mit und ohne Gang-Auswahl) */
html .order-wrap .lines li.cart-line { font-size: 1.15rem; padding: 12px 0; gap: 10px; }
html .order-wrap .lines li.cart-line .name { font-weight: 600; }
html .order-wrap .lines li.cart-line > button { min-width: 48px; min-height: 46px; font-size: 1.3rem; padding: 4px 10px; }
html .order-wrap .lines li.cart-line .course-sel { min-height: 46px; font-size: 1.05rem; }
@media (max-width: 600px) {
  html .order-wrap .lines li.cart-line { flex-wrap: wrap; }
  html .order-wrap .lines li.cart-line .name { flex: 1 1 calc(100% - 140px); }
  html .order-wrap .lines li.cart-line > button { order: 6; }
  html .order-wrap .lines li.cart-line .course-sel { order: 5; margin-left: 0; flex: 1 1 80px; min-width: 0; }
  html .order-wrap .lines li.cart-line:not(:has(.course-sel)) > button[data-minus] { margin-left: auto; }
}
html .order-wrap .panel .total { font-size: 1.3rem; }
/* Beilagen beim Bestellen als Kacheln: ganze Kachel antippen, gewählte Kachel farbig */
.sidegroup:not(.sg-tap) { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; padding: 8px 12px 12px; }
.sidegroup:not(.sg-tap) > legend { grid-column: 1 / -1; }
.sidegroup:not(.sg-tap) .check-row { position: relative; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 6px; min-height: 76px; padding: 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--panel); font-size: 1.05rem; font-weight: 600; }
.sidegroup:not(.sg-tap) .check-row:last-child { border-bottom: 1px solid var(--line-2); }
.sidegroup:not(.sg-tap) .check-row input { position: absolute; opacity: 0; pointer-events: none; }
.sidegroup:not(.sg-tap) .check-row .spacer { display: none; }
.sidegroup:not(.sg-tap) .check-row .muted { font-weight: 500; font-size: .9rem; }
.sidegroup:not(.sg-tap) .check-row:has(input:checked) { border-color: var(--ow-acc, #2563eb); background: color-mix(in srgb, var(--ow-acc, #2563eb) 12%, var(--panel)); box-shadow: inset 0 0 0 2px var(--ow-acc, #2563eb); }
.sidegroup:not(.sg-tap) .check-row:has(input:checked)::after { content: "✓"; position: absolute; top: 8px; right: 10px; color: var(--ow-acc, #2563eb); font-weight: 800; }
.sidegroup:not(.sg-tap) .check-row:has(input:disabled) { opacity: .45; cursor: default; }
.sidegroup:not(.sg-tap) .check-row:has(input:focus-visible) { outline: 2px solid var(--ow-acc, #2563eb); outline-offset: 2px; }

/* Tischübersicht: Raum-Reiter bleiben beim Scrollen oben angeheftet */
.tt-sticky { position: sticky; top: var(--tt-top, 0px); z-index: 6; background: var(--page); margin-top: -8px; padding: 8px 0 12px; }
.tt-sticky > .tabs { margin-bottom: 0; }