/* ── Barock Meze · Bestellsystem ─────────────────────────────────── */

:root {
  --cream: #FAF8F2;
  --cream-2: #F5F2EB;
  --olive: #3D5A1E;
  --olive-2: #5B7A2E;
  --lime: #A3B518;
  --ink: #2C4316;
  --danger: #A33518;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

.paper-texture {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(163, 181, 24, .07), transparent 60%),
    radial-gradient(800px 500px at 100% 100%, rgba(61, 90, 30, .05), transparent 60%);
}

/* ── Marke ── */
.brand {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--olive);
  letter-spacing: .01em;
  font-size: clamp(2rem, 8vw, 2.6rem);
  line-height: 1.1;
}
.brand-rule {
  display: flex; align-items: center; gap: .6rem;
  margin: .55rem auto .2rem; max-width: 210px;
}
.brand-rule span { flex: 1; height: 1px; background: rgba(163, 181, 24, .55); }
.brand-rule i { color: var(--lime); font-style: normal; font-size: .85rem; transform: rotate(90deg); }

/* ── Gast ── */
body.guest { padding-bottom: 6.5rem; }

.g-header { position: relative; z-index: 1; text-align: center; padding: 1.4rem 1.2rem .6rem; }
.g-eyebrow {
  font-size: .68rem; letter-spacing: .32em; text-transform: uppercase;
  color: var(--olive-2); margin-bottom: .4rem;
}
.g-table-badge {
  display: inline-block; margin-top: .8rem;
  border: 1px solid rgba(61, 90, 30, .25); border-radius: 999px;
  padding: .25rem 1rem; font-size: .85rem; color: var(--olive);
  background: rgba(255, 255, 255, .5);
}
.g-table-badge strong { font-family: var(--mono); font-weight: 700; }
.g-welcome { margin: .7rem auto 0; max-width: 30rem; font-size: .85rem; color: rgba(91, 122, 46, .85); }

.lang-menu { position: absolute; top: .9rem; right: .9rem; z-index: 15; }
.lang-menu summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: .35rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  color: var(--olive); padding: .4rem .7rem; border-radius: 999px;
  border: 1px solid rgba(61, 90, 30, .25); background: rgba(255, 255, 255, .7);
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: '▾'; font-size: .6rem; opacity: .7; }
.lang-menu[open] summary::after { content: '▴'; }
.lang-list {
  position: absolute; right: 0; margin-top: .35rem; min-width: 8.5rem;
  background: var(--cream); border: 1px solid rgba(61, 90, 30, .18);
  border-radius: 12px; padding: .35rem; display: grid;
  box-shadow: 0 10px 28px rgba(44, 67, 22, .18);
  animation: drop-in .15s ease;
}
@keyframes drop-in { from { transform: translateY(-6px); opacity: 0; } }
.lang-list a {
  text-decoration: none; font-size: .88rem; font-weight: 500;
  color: var(--ink); padding: .55rem .8rem; border-radius: 8px;
}
.lang-list a.active {
  color: var(--olive); font-weight: 700; background: rgba(163, 181, 24, .14);
}
.lang-list a.active::after { content: ' ✓'; color: var(--lime); }

.g-tabs {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(var(--cream) 75%, rgba(250, 248, 242, 0));
  padding: .6rem 0 .4rem;
}
.seg {
  display: flex; margin: 0 auto; width: min(20rem, calc(100% - 2.4rem));
  background: var(--cream-2); border: 1px solid rgba(61, 90, 30, .15);
  border-radius: 999px; padding: .22rem;
}
.seg-btn {
  flex: 1; padding: .5rem 0; border-radius: 999px;
  font-weight: 700; font-size: .9rem; color: var(--olive-2);
  transition: all .18s ease;
}
.seg-btn.active { background: var(--olive); color: var(--cream); box-shadow: 0 2px 8px rgba(61, 90, 30, .35); }

.chips {
  display: flex; gap: .45rem; overflow-x: auto; padding: .65rem 1.2rem .35rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; text-decoration: none; font-size: .78rem; font-weight: 500;
  color: var(--olive); padding: .3rem .75rem; border-radius: 999px;
  border: 1px solid rgba(163, 181, 24, .45); background: rgba(255, 255, 255, .55);
  white-space: nowrap;
}

.g-main { position: relative; z-index: 1; max-width: 46rem; margin: 0 auto; padding: .5rem 1.2rem 2rem; }

.menu-cat { padding-top: 1.6rem; }
.cat-title { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; color: var(--olive); }
.cat-rule { width: 2.2rem; height: 1px; background: rgba(163, 181, 24, .7); margin: .5rem 0 .3rem; }

.menu-list { list-style: none; }
.menu-item { padding: .85rem 0; border-bottom: 1px solid rgba(61, 90, 30, .08); }
.menu-item:last-child { border-bottom: 0; }
.mi-row { display: flex; align-items: baseline; gap: .55rem; }
.mi-name { font-family: var(--serif); font-weight: 600; font-size: 1.02rem; color: var(--olive); }
.mi-dots { flex: 1; min-width: 1.4rem; border-bottom: 1px dotted rgba(163, 181, 24, .5); transform: translateY(-4px); }
.mi-price { font-family: var(--mono); font-weight: 700; font-size: .92rem; color: var(--olive); white-space: nowrap; }
.mi-desc { font-size: .82rem; color: rgba(91, 122, 46, .75); margin-top: .25rem; max-width: 85%; }
.mi-soldout {
  font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(91, 122, 46, .6); border: 1px solid rgba(91, 122, 46, .3);
  padding: .15rem .5rem; border-radius: 999px; white-space: nowrap;
}
.menu-item.sold-out .mi-name, .menu-item.sold-out .mi-price { opacity: .45; }

.mi-add { display: flex; align-items: center; gap: .4rem; align-self: center; }
.stepper-btn {
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1.5px solid var(--lime); color: var(--olive);
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: all .15s ease;
  touch-action: manipulation;
}
.stepper-btn:active { transform: scale(.92); background: rgba(163, 181, 24, .18); }
.menu-item.in-cart .stepper-btn.plus { background: var(--olive); border-color: var(--olive); color: var(--cream); }
.stepper-qty { font-family: var(--mono); font-weight: 700; min-width: 1.1rem; text-align: center; }

/* Tischrechnung */
.bill {
  margin-top: 2.4rem; background: var(--cream-2);
  border: 1px solid rgba(61, 90, 30, .1); border-radius: 14px;
  padding: 1.3rem 1.2rem 1.1rem;
}
.bill-list { list-style: none; }
.bill-line { display: flex; align-items: baseline; gap: .5rem; padding: .45rem 0; font-size: .92rem; }
.bill-line .qty { font-family: var(--mono); font-weight: 700; color: var(--olive-2); }
.bill-line .name { color: var(--ink); }
.bill-line .note { display: block; font-size: .76rem; color: rgba(91, 122, 46, .7); }
.bill-line .dots { flex: 1; min-width: 1rem; border-bottom: 1px dotted rgba(163, 181, 24, .4); transform: translateY(-4px); }
.bill-line .price { font-family: var(--mono); font-size: .88rem; white-space: nowrap; }
.bill-line.cancelled { opacity: .45; }
.bill-line.cancelled .name { text-decoration: line-through; }
.status-chip {
  font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .12rem .45rem; border-radius: 999px; white-space: nowrap;
}
.status-chip.ordered { color: var(--olive); border: 1px solid var(--lime); background: rgba(163, 181, 24, .12); }
.status-chip.ordered::before {
  content: ''; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
  background: var(--lime); margin-right: .3rem; animation: pulse 1.6s infinite;
}
@keyframes pulse { 50% { opacity: .25; } }
.status-chip.preparing { color: #7A5E0A; border: 1px solid #E9B818; background: rgba(233, 184, 24, .14); }
.status-chip.preparing::before {
  content: ''; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
  background: #E9B818; margin-right: .3rem; animation: pulse 1.1s infinite;
}
.status-chip.served { color: var(--cream); background: var(--olive); }
.status-chip.cancelled { color: rgba(91, 122, 46, .7); border: 1px solid rgba(91, 122, 46, .3); }
.bill-empty { font-size: .85rem; color: rgba(91, 122, 46, .7); padding: .4rem 0; }
.bill-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(61, 90, 30, .15); margin-top: .6rem; padding-top: .7rem;
}
.bill-total strong { font-family: var(--mono); font-size: 1.15rem; color: var(--olive); }
.bill-total-right { text-align: right; }
.bill-served { display: block; font-family: var(--mono); font-size: .72rem; color: var(--olive-2); margin-top: .15rem; }

/* Aktionen */
.g-actions { display: flex; gap: .7rem; margin-top: 1.4rem; }
.action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1.5px solid var(--olive); color: var(--olive); border-radius: 12px;
  padding: .85rem .5rem; font-weight: 700; font-size: .92rem;
  background: rgba(255, 255, 255, .5); transition: all .15s ease;
}
.action-btn:active { transform: scale(.97); background: rgba(61, 90, 30, .08); }
.pay-panel {
  margin-top: .8rem; background: var(--cream-2);
  border: 1px solid rgba(61, 90, 30, .12); border-radius: 14px;
  padding: 1.1rem 1rem 1rem;
  animation: rise .2s ease;
}
.pay-title { font-family: var(--serif); font-size: 1.05rem; color: var(--olive); text-align: center; margin-bottom: .8rem; }
.tip-grid { display: grid; gap: .5rem; }
.tip-round { grid-template-columns: 1fr 1fr; }
.tip-pct { grid-template-columns: 1fr 1fr 1fr; margin-top: .5rem; }
.tip-opt {
  display: grid; gap: .15rem; justify-items: center;
  border: 1.5px solid rgba(61, 90, 30, .25); border-radius: 12px;
  padding: .6rem .3rem; background: rgba(255, 255, 255, .6);
  transition: all .13s ease;
}
.tip-opt small { font-size: .68rem; font-weight: 700; color: var(--olive-2); }
.tip-opt b { font-family: var(--mono); font-size: .95rem; color: var(--olive); }
.tip-opt.selected { border-color: var(--olive); background: var(--olive); }
.tip-opt.selected small, .tip-opt.selected b { color: var(--cream); }
.tip-none {
  display: block; margin: .7rem auto 0; font-size: .78rem; color: var(--olive-2);
  text-decoration: underline; padding: .2rem .6rem;
}
.tip-none.selected { text-decoration: none; font-weight: 700; color: var(--olive); }
.pay-summary {
  text-align: center; font-family: var(--mono); font-weight: 700;
  color: var(--olive); font-size: 1rem; margin-top: .8rem;
  border-top: 1px dashed rgba(163, 181, 24, .5); padding-top: .8rem;
}
.pay-choice { display: flex; gap: .7rem; margin-top: .8rem; }
.pay-opt {
  flex: 1; border-radius: 12px; padding: .85rem .5rem;
  color: var(--cream); font-weight: 700; background: var(--olive);
  box-shadow: 0 4px 14px rgba(44, 67, 22, .25);
}
.pay-opt:active { transform: scale(.97); }

.g-footer { text-align: center; margin-top: 3rem; font-size: .72rem; color: rgba(91, 122, 46, .6); }

/* Warenkorb-Leiste + Sheet */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(250, 248, 242, 0), var(--cream) 40%);
}
.cart-open {
  display: flex; align-items: center; gap: .7rem; width: 100%; max-width: 44rem; margin: 0 auto;
  background: var(--olive); color: var(--cream); border-radius: 14px;
  padding: .95rem 1.2rem; font-size: 1rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(44, 67, 22, .35);
  animation: rise .25s ease;
}
@keyframes rise { from { transform: translateY(20px); opacity: 0; } }
.cart-count {
  background: var(--lime); color: var(--ink); font-family: var(--mono);
  border-radius: 999px; min-width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center; font-size: .85rem;
}
.cart-label { flex: 1; text-align: left; }
.cart-total { font-family: var(--mono); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 30; background: rgba(44, 67, 22, .45); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 31;
  background: var(--cream); border-radius: 20px 20px 0 0;
  padding: .7rem 1.3rem calc(1.2rem + env(safe-area-inset-bottom));
  max-height: 80dvh; overflow-y: auto;
  box-shadow: 0 -12px 40px rgba(44, 67, 22, .3);
  animation: slide-up .22s ease;
}
@keyframes slide-up { from { transform: translateY(100%); } }
.sheet-handle { width: 2.6rem; height: 4px; border-radius: 2px; background: rgba(61, 90, 30, .2); margin: 0 auto .8rem; }
.sheet-title { font-family: var(--serif); font-size: 1.35rem; color: var(--olive); margin-bottom: .5rem; }
.sheet-list { list-style: none; }
.sheet-line { padding: .6rem 0; border-bottom: 1px solid rgba(61, 90, 30, .08); }
.sheet-line-top { display: flex; align-items: center; gap: .6rem; }
.sheet-line-top .name { flex: 1; font-weight: 500; }
.sheet-line-top .price { font-family: var(--mono); font-size: .88rem; }
.sheet-note {
  width: 100%; margin-top: .45rem; font: inherit; font-size: .82rem;
  border: 1px solid rgba(61, 90, 30, .18); border-radius: 8px;
  padding: .45rem .6rem; background: rgba(255, 255, 255, .6); color: var(--ink);
}
.sheet-note::placeholder { color: rgba(91, 122, 46, .55); }
.sheet-total { display: flex; justify-content: space-between; padding: .9rem 0 .6rem; font-weight: 700; }
.sheet-total strong { font-family: var(--mono); font-size: 1.2rem; color: var(--olive); }

.cta {
  display: block; width: 100%; background: var(--olive); color: var(--cream);
  border-radius: 12px; padding: 1rem; font-size: 1.02rem; font-weight: 700;
  transition: transform .12s ease;
  box-shadow: 0 6px 18px rgba(44, 67, 22, .3);
}
.cta:active { transform: scale(.98); }
.cta[disabled] { opacity: .55; }

/* Toast & Offline */
.toast {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--cream); border-radius: 999px;
  padding: .6rem 1.3rem; font-size: .88rem; font-weight: 500;
  box-shadow: 0 8px 24px rgba(44, 67, 22, .4);
  animation: drop .25s ease;
  max-width: calc(100vw - 2rem); text-align: center;
}
@keyframes drop { from { transform: translate(-50%, -16px); opacity: 0; } }
.offline-note {
  position: fixed; bottom: 5.6rem; left: 50%; transform: translateX(-50%); z-index: 49;
  background: rgba(163, 53, 24, .95); color: #fff; font-size: .78rem;
  padding: .4rem 1rem; border-radius: 999px;
}

/* Abschluss-Overlay */
.closed-overlay {
  position: fixed; inset: 0; z-index: 100; background: var(--cream);
  display: grid; place-items: center; text-align: center; padding: 2rem;
  animation: fade .4s ease;
}
@keyframes fade { from { opacity: 0; } }
.closed-thanks { font-family: var(--serif); font-size: 1.5rem; color: var(--olive); margin-top: 1.2rem; }
.closed-sub { margin-top: .6rem; font-size: .88rem; color: rgba(91, 122, 46, .8); max-width: 22rem; }

/* Tisch-Freischaltung (WhatsApp-Code) */
.g-bound { margin-top: .45rem; font-size: .74rem; color: rgba(91, 122, 46, .8); }
.gate-lang { position: absolute; top: .9rem; right: .9rem; }
.gate-card {
  margin-top: 1.6rem; width: min(26rem, 100%);
  background: rgba(255, 255, 255, .72); border: 1px solid rgba(61, 90, 30, .14);
  border-radius: 18px; padding: 1.7rem 1.4rem 1.6rem; text-align: center;
  box-shadow: 0 12px 34px rgba(61, 90, 30, .1);
}
.gate-title { font-family: var(--serif); font-size: 1.45rem; color: var(--olive); }
.gate-intro { font-size: .85rem; color: rgba(91, 122, 46, .9); margin: .55rem auto 1.3rem; max-width: 21rem; }
.gate-label {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--olive); margin-bottom: .55rem;
}
.gate-input {
  width: 100%; font-family: var(--mono); font-weight: 700;
  font-size: 1.45rem; text-align: center; letter-spacing: .06em;
  padding: 1rem .9rem; border: 2px solid rgba(61, 90, 30, .45); border-radius: 14px;
  background: #fff; color: var(--ink); caret-color: var(--lime);
  box-shadow: inset 0 2px 6px rgba(61, 90, 30, .06);
}
.gate-input::placeholder { color: rgba(91, 122, 46, .35); font-weight: 500; }
.gate-input:focus {
  outline: none; border-color: var(--lime);
  box-shadow: 0 0 0 4px rgba(163, 181, 24, .22), inset 0 2px 6px rgba(61, 90, 30, .06);
}
.gate-code { font-size: 1.7rem; letter-spacing: .45em; }
.gate-phone-masked {
  font-family: var(--mono); font-weight: 700; font-size: 1.4rem;
  color: var(--olive); letter-spacing: .06em;
  background: rgba(163, 181, 24, .1); border: 1.5px dashed var(--lime);
  border-radius: 12px; padding: .8rem; margin-bottom: .3rem;
}
.gate-cta { margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .55rem; }
.gate-paste {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .7rem; padding: .55rem 1.1rem; border-radius: 999px;
  border: 1.5px dashed var(--lime); color: var(--olive);
  font-size: .88rem; font-weight: 700; background: rgba(163, 181, 24, .08);
}
.gate-paste:active { transform: scale(.96); background: rgba(163, 181, 24, .18); }
.gate-error { margin-top: .6rem; font-size: .82rem; color: var(--danger); font-weight: 500; }
.gate-resend {
  display: block; width: 100%; margin-top: .8rem; text-align: center;
  font-size: .8rem; color: var(--olive-2); text-decoration: underline;
}
.gate-resend[disabled] { text-decoration: none; opacity: .6; cursor: default; }
.gate-note { margin-top: 1.1rem; font-size: .72rem; color: rgba(91, 122, 46, .65); max-width: 22rem; }

/* Zentrale Meldungsseite / Login */
.center-page {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 2rem 1.5rem; position: relative; z-index: 1;
}
.center-msg { margin-top: 1.2rem; max-width: 24rem; color: var(--olive-2); }
.login-form { margin-top: 1.6rem; width: min(20rem, 100%); display: grid; gap: .9rem; text-align: left; }
.login-form label { font-size: .8rem; font-weight: 700; color: var(--olive); display: grid; gap: .3rem; }
.login-form input {
  font: inherit; padding: .7rem .9rem; border-radius: 10px;
  border: 1px solid rgba(61, 90, 30, .25); background: #fff; color: var(--ink);
}
.form-error { margin-top: 1rem; color: var(--danger); font-size: .88rem; font-weight: 500; }

/* ── Service (dunkel) ── */
body.service { background: #1E2D0F; color: #E9EDDA; }
.s-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .8rem 1.2rem; background: #16220B; border-bottom: 1px solid rgba(163, 181, 24, .25);
  position: sticky; top: 0; z-index: 10;
}
.s-brand { font-family: var(--serif); font-size: 1.15rem; color: var(--cream); font-weight: 700; }
.s-brand span { color: var(--lime); font-family: var(--sans); font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-left: .5rem; }
.s-header-right { display: flex; align-items: center; gap: .6rem; }
.s-nav-link {
  font-size: .8rem; font-weight: 500; color: #C8D3AC; text-decoration: none;
  padding: .35rem .7rem; border-radius: 8px; border: 1px solid rgba(163, 181, 24, .3);
}
.s-sound { font-size: 1rem; padding: .25rem .5rem; border-radius: 8px; border: 1px solid rgba(163, 181, 24, .3); }
.s-sound.off { opacity: .4; filter: grayscale(1); }
.inline-form { display: inline; }

.s-main { padding: 1.2rem; }
.s-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  max-width: 80rem; margin: 0 auto;
}
.s-tile {
  border-radius: 14px; padding: .85rem .9rem; text-align: left;
  background: #26380F; border: 1px solid rgba(163, 181, 24, .18);
  display: flex; flex-direction: column; gap: .3rem; min-height: 6.4rem;
  transition: all .15s ease; position: relative;
}
.s-tile:active { transform: scale(.97); }
.s-tile.free { opacity: .45; }
.s-tile.alert { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 22px rgba(163, 181, 24, .35); animation: tile-pulse 1.4s infinite; }
@keyframes tile-pulse { 50% { box-shadow: 0 0 0 1px var(--lime), 0 0 8px rgba(163, 181, 24, .15); } }
.s-tile-name { font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--cream); }
.s-tile-info { font-size: .74rem; color: #AABB80; }
.s-tile-total { font-family: var(--mono); font-size: .85rem; color: var(--lime); margin-top: auto; }
.s-tile-badges { position: absolute; top: -.5rem; right: -.3rem; display: flex; gap: .25rem; }
.s-badge {
  font-size: .62rem; font-weight: 700; padding: .2rem .5rem; border-radius: 999px;
  background: var(--lime); color: #16220B; box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.s-badge.pay { background: #E9B818; }
.s-badge.locked { background: #777; color: #fff; }

.s-drawer-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .5); }
.s-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 21;
  width: min(26rem, 100%); background: #1B290C; border-left: 1px solid rgba(163, 181, 24, .25);
  display: flex; flex-direction: column;
  animation: drawer-in .2s ease;
}
@keyframes drawer-in { from { transform: translateX(40px); opacity: 0; } }
.s-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid rgba(163, 181, 24, .2);
}
.s-drawer-head h2 { font-family: var(--serif); color: var(--cream); font-size: 1.3rem; }
.s-close { font-size: 1.6rem; line-height: 1; padding: .2rem .6rem; color: #C8D3AC; }
.s-drawer-body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem 2rem; }

.s-call {
  display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem;
  background: rgba(163, 181, 24, .14); border: 1px solid var(--lime);
  border-radius: 10px; padding: .6rem .8rem; font-size: .9rem;
}
.s-call.pay { background: rgba(233, 184, 24, .14); border-color: #E9B818; }
.s-call .grow { flex: 1; }
.s-call time { font-family: var(--mono); font-size: .72rem; color: #AABB80; }
.s-call button {
  border: 1px solid var(--lime); border-radius: 8px; padding: .3rem .7rem;
  font-size: .78rem; font-weight: 700; color: var(--lime);
}

.s-item { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid rgba(163, 181, 24, .12); font-size: .92rem; }
.s-item .qty { font-family: var(--mono); font-weight: 700; color: var(--lime); min-width: 2rem; }
.s-item .grow { flex: 1; }
.s-item .note { display: block; font-size: .74rem; color: #AABB80; }
.s-item time { font-family: var(--mono); font-size: .7rem; color: #7E9159; }
.s-item.preparing .iname { color: #E9D8A0; }
.s-item.preparing .qty { color: #E9B818; }
.s-item.served { opacity: .5; }
.s-item.cancelled { opacity: .4; text-decoration: line-through; }
.s-item-btn {
  border: 1px solid rgba(163, 181, 24, .5); border-radius: 8px;
  padding: .3rem .6rem; font-size: .74rem; font-weight: 700; color: #C8D3AC;
  white-space: nowrap;
}
.s-item-btn.accept { border-color: #E9B818; color: #E9B818; }
.s-item-btn.done { border-color: var(--lime); color: var(--lime); }
.s-item-btn.cancel { border-color: rgba(255, 120, 90, .5); color: #E5967F; }

.s-drawer-actions { display: grid; gap: .6rem; margin-top: 1.2rem; }
.s-action {
  border-radius: 10px; padding: .8rem; font-weight: 700; font-size: .92rem; text-align: center;
}
.s-action.close-table { background: var(--lime); color: #16220B; }
.s-action.accept-all { background: #E9B818; color: #16220B; margin-bottom: .9rem; }
.s-action.lock { border: 1px solid rgba(163, 181, 24, .4); color: #C8D3AC; }
.s-total-row { display: flex; justify-content: space-between; padding: .9rem 0; font-weight: 700; }
.s-total-row strong { font-family: var(--mono); color: var(--lime); font-size: 1.15rem; }

/* ── Admin ── */
body.admin { background: var(--cream-2); }
body.admin .s-header { background: var(--olive); border-bottom: 0; }
body.admin .s-nav-link { color: var(--cream); border-color: rgba(250, 248, 242, .35); }
.a-main { max-width: 60rem; margin: 0 auto; padding: 1.4rem 1.2rem 3rem; }
.a-narrow { max-width: 46rem; }
.a-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.a-toolbar h2, .a-main > h2 { font-family: var(--serif); color: var(--olive); font-size: 1.5rem; }
.a-btn {
  display: inline-block; border: 1px solid var(--olive); color: var(--olive);
  border-radius: 8px; padding: .45rem .9rem; font-size: .85rem; font-weight: 700;
  text-decoration: none; background: #fff;
}
.a-btn.primary { background: var(--olive); color: var(--cream); }
.a-btn.danger { border-color: var(--danger); color: var(--danger); }
.a-cat { margin-bottom: 1.6rem; background: #fff; border: 1px solid rgba(61, 90, 30, .12); border-radius: 12px; padding: 1rem 1.2rem; }
.a-cat-head summary { cursor: pointer; display: flex; align-items: baseline; gap: .8rem; list-style: none; }
.a-cat-head summary::-webkit-details-marker { display: none; }
.a-cat-name { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; color: var(--olive); }
.a-cat-meta { font-size: .75rem; color: var(--olive-2); }
.a-cat-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.a-cat-form input, .a-cat-form select {
  font: inherit; font-size: .85rem; padding: .4rem .6rem;
  border: 1px solid rgba(61, 90, 30, .25); border-radius: 8px; background: var(--cream);
}
.a-cat-new { margin-bottom: 1.4rem; }
.a-cat-new summary { cursor: pointer; font-weight: 700; color: var(--olive-2); font-size: .9rem; }
.a-table { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.a-table td, .a-table th { padding: .5rem .4rem; border-top: 1px solid rgba(61, 90, 30, .08); text-align: left; vertical-align: middle; }
.a-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--olive-2); }
.a-item-name a { font-weight: 500; color: var(--ink); text-decoration: none; }
.a-item-name a:hover { color: var(--olive); text-decoration: underline; }
.a-item-name small { display: block; color: rgba(91, 122, 46, .65); font-size: .74rem; }
.a-price { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.a-toggle { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .25rem .7rem; }
.a-toggle.on { background: rgba(163, 181, 24, .18); color: var(--olive); border: 1px solid var(--lime); }
.a-toggle.off { background: rgba(163, 53, 24, .1); color: var(--danger); border: 1px solid rgba(163, 53, 24, .4); }
tr.is-off .a-item-name { opacity: .5; }
.a-form { display: grid; gap: .9rem; background: #fff; border: 1px solid rgba(61, 90, 30, .12); border-radius: 12px; padding: 1.3rem; margin-top: 1rem; }
.a-form label { display: grid; gap: .3rem; font-size: .78rem; font-weight: 700; color: var(--olive); }
.a-form input, .a-form select, .a-form textarea {
  font: inherit; font-weight: 400; padding: .55rem .7rem;
  border: 1px solid rgba(61, 90, 30, .25); border-radius: 8px; background: var(--cream); color: var(--ink);
}
.a-form-row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; }
.a-check { flex-direction: row; display: flex !important; align-items: center; gap: .5rem; }
.a-tables .a-table-name { width: 10rem; }
.a-code a { font-family: var(--mono); font-size: .8rem; color: var(--olive-2); }

/* ── QR-Druck ── */
body.qr-print { background: #fff; }
.qr-sheet {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; padding: 1rem;
  max-width: 50rem; margin: 0 auto;
}
.qr-card {
  border: 1px solid var(--olive); border-radius: 14px; text-align: center;
  padding: 1.6rem 1.2rem; break-inside: avoid; page-break-inside: avoid;
  background: var(--cream);
}
.qr-card .brand { font-size: 1.5rem; }
.qr-eyebrow { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--olive-2); margin-bottom: .3rem; }
.qr-code { width: 11rem; margin: 1rem auto; }
.qr-code svg { width: 100%; height: auto; display: block; }
.qr-table { font-family: var(--serif); color: var(--olive); font-size: 1.3rem; }
.qr-hint { font-size: .72rem; color: var(--olive-2); margin-top: .5rem; line-height: 1.6; }
@media print {
  .qr-sheet { gap: .6rem; padding: 0; }
  .qr-card { border-width: 1.5px; }
}

@media (min-width: 640px) {
  .g-header { padding-top: 2.2rem; }
  .s-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}