/* Al Awafi design system — Material Design 3 (clean).
   Brand-Rot als md.primary, Gold als md.tertiary, warme Neutraltöne. NUR HELL (light-only,
   color-scheme:light — auch bei Dark-OS bleibt alles hell).
   WICHTIG: alle Klassennamen sind stabil (Web + MAUI, bUnit-Tests). Die alten Token-Namen
   (--cream, --muted, --gold, --ember, --card, --line …) bleiben als Kompatibilitätsschicht
   erhalten, zeigen aber auf Material-Rollen — so folgen Inline-Styles automatisch dem Theme. */

/* ============ Material 3 Tonal-Rollen ============ */
:root{
  color-scheme: light;   /* nur Hell — kein Dark-Mode */
  --md-primary:#b11226; --md-on-primary:#ffffff; --md-primary-container:#ffdad6; --md-on-primary-container:#40000a;
  --md-tertiary:#785900; --md-on-tertiary:#ffffff; --md-tertiary-container:#ffdf9b; --md-on-tertiary-container:#251a00;
  --md-error:#ba1a1a; --md-error-container:#ffdad6; --md-on-error-container:#410002;
  --md-success:#1e6b2f; --md-success-container:#a6f2b0; --md-on-success-container:#00210c;
  --md-surface:#fff8f7; --md-on-surface:#241918;
  --md-surface-variant:#f5ddda; --md-on-surface-variant:#534341;
  --md-s-lowest:#ffffff; --md-s-low:#fff0ee; --md-s:#fceae7; --md-s-high:#f7e4e1; --md-s-highest:#f1dedb;
  --md-outline:#857370; --md-outline-variant:#d8c2be;
  --md-inverse:#392e2d; --md-on-inverse:#ffede9;
  --md-shadow:rgba(60,20,15,.20);
  --md-e1:0 1px 2px rgba(0,0,0,.10), 0 1px 3px 1px rgba(0,0,0,.06);
  --md-e2:0 1px 2px rgba(0,0,0,.12), 0 2px 6px 2px rgba(0,0,0,.07);
  --md-e3:0 4px 8px 3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.14);
}

/* ============ Kompatibilitätsschicht: alte Token-Namen → Material ============ */
:root{
  --primary:var(--md-primary); --primary-deep:var(--md-on-primary-container);
  --gold:var(--md-tertiary); --gold-bright:var(--md-tertiary); --gold-deep:var(--md-tertiary);
  --cream:var(--md-on-surface); --cream-2:var(--md-on-surface); --muted:var(--md-on-surface-variant);
  --dim:var(--md-on-surface-variant); --faint:var(--md-on-surface-variant);
  --ember:var(--md-primary); --ember-2:var(--md-primary); --ember-soft:var(--md-primary-container);
  --saffron:var(--md-tertiary); --saffron-2:var(--md-tertiary);
  --veg-v:var(--md-success); --veg-g:var(--md-success); --good:var(--md-success); --ok:var(--md-success);
  --danger:var(--md-error);
  --line:var(--md-outline-variant); --line-2:var(--md-outline-variant);
  --card:var(--md-s-low); --card-2:var(--md-s); --card-line:var(--md-outline-variant);
  --surface:var(--md-s); --surface-2:var(--md-s-high);
  --max:1120px; --edge:max(16px, calc((100% - var(--max)) / 2));
  --r:16px; --r-sm:12px; --r-pill:999px;
  --shadow:var(--md-e2);
  --font-de:"Cairo","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-ar:"Cairo","Segoe UI",system-ui,sans-serif;                  /* Cairo deckt Arabisch mit ab */
  --font-display:"Sora","Cairo",system-ui,-apple-system,sans-serif;   /* klare Headline-Schrift */
  --ring:0 0 0 3px color-mix(in srgb, var(--md-primary) 40%, transparent);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-de); color:var(--md-on-surface); line-height:1.55;
  background:var(--md-surface); min-height:100vh; -webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","calt"; text-rendering:optimizeLegibility;
}
/* Typografie: Sora für Überschriften/Marke/Zahlen, feiner Satz, tabellarische Ziffern */
h1,h2,h3,.name-de,.page-head h1,.section-h h2,.sec-de,.brand b,.track-num,.oc-number,.sheet h3,.status strong,.display,.headline{
  font-family:var(--font-display); letter-spacing:-.012em; text-wrap:balance; }
.oi-price,.price,.cl-price,.totals,.track-num,.oc-number,.grand{ font-variant-numeric:tabular-nums; }

/* ============ Selbstgemachte Hintergrund-Animation (dezent, nur CSS) ============ */
/* Weiche, warme Farbwolken driften langsam hinter dem Inhalt (in den Weißräumen sichtbar). */
.bg-fx{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bg-fx span{ position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.55; will-change:transform; }
.bg-fx .b1{ width:46vmax; height:46vmax; inset-inline-start:-14vmax; top:-12vmax;
  background:radial-gradient(circle, var(--md-tertiary-container), transparent 68%); animation:fx1 34s ease-in-out infinite; }
.bg-fx .b2{ width:40vmax; height:40vmax; inset-inline-end:-12vmax; top:16vmax;
  background:radial-gradient(circle, var(--md-primary-container), transparent 66%); animation:fx2 44s ease-in-out infinite; }
.bg-fx .b3{ width:38vmax; height:38vmax; inset-inline-start:22vmax; bottom:-16vmax;
  background:radial-gradient(circle, var(--md-tertiary-container), transparent 66%); animation:fx3 39s ease-in-out infinite; }
@keyframes fx1{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(6vmax,4vmax) scale(1.12); } }
@keyframes fx2{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(-5vmax,5vmax) scale(1.1); } }
@keyframes fx3{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(4vmax,-6vmax) scale(1.14); } }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
button{ font-family:inherit; color:inherit; }
:focus-visible{ outline:3px solid var(--md-primary); outline-offset:2px; border-radius:4px; }
h1:focus, h1:focus-visible{ outline:none; }
main:focus, [role="main"]:focus{ outline:none; }

/* ============ A11y-Helfer ============ */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link{ position:absolute; inset-inline-start:8px; top:-64px; z-index:100;
  background:var(--md-primary); color:var(--md-on-primary); font-weight:700; letter-spacing:.02em;
  padding:12px 20px; border-radius:0 0 12px 12px; box-shadow:var(--md-e2); transition:top .15s ease; }
.skip-link:focus{ top:0; }

/* ============ Shell ============ */
.shell{ position:relative; z-index:1; min-height:100dvh; display:flex; flex-direction:column; }
.appmain{ flex:1; padding-bottom:96px; }
.staff-shell{ min-height:100dvh; }
.container{ width:min(calc(100% - 30px), var(--max)); margin-inline:auto; }
.pad{ width:min(calc(100% - 32px), var(--max)); margin-inline:auto; }
.narrow{ max-width:720px; }

/* ============ Top app bar ============ */
.topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:12px var(--edge) 11px; background:var(--md-surface); color:var(--md-on-surface);
  border-bottom:1px solid var(--md-outline-variant); }
.brand{ display:flex; flex-direction:column; line-height:1.1; }
.brand b{ font-weight:700; letter-spacing:.2px; font-size:1.12rem; color:var(--md-on-surface); text-transform:none; }
.brand span{ font-size:.66rem; color:var(--md-on-surface-variant); letter-spacing:.02em; margin-top:2px; text-transform:none; opacity:1; }
.topnav{ display:none; align-items:center; gap:2px; margin-inline-start:14px; }
.topnav .tab{ flex-direction:row; gap:8px; font-size:.9rem; font-weight:600; padding:9px 15px; border-radius:var(--r-pill);
  color:var(--md-on-surface-variant); }
.topnav .tab .ico{ font-size:1.05rem; }
.topnav .tab.active, .topnav .tab[aria-current="page"]{ background:var(--md-secondary-container,var(--md-surface-variant)); color:var(--md-on-surface); }
.topnav .tab .dot{ position:static; margin-inline-start:2px; }
.staff-nav{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.staff-nav .staff-on{ background:var(--md-secondary-container,var(--md-surface-variant));
  border-color:var(--md-on-surface-variant); color:var(--md-on-surface); font-weight:700; }
.langs{ margin-inline-start:auto; display:inline-flex; gap:0; border:1px solid var(--md-outline); border-radius:var(--r-pill); overflow:hidden; }
.langs a{ font-size:.72rem; font-weight:600; letter-spacing:.02em; color:var(--md-on-surface-variant); padding:6px 12px; }
.langs a.lang-on{ color:var(--md-on-primary); background:var(--md-primary); }
.account-bar{ display:flex; gap:14px; justify-content:flex-end; align-items:center; padding:9px 18px;
  background:var(--md-s); border-bottom:1px solid var(--md-outline-variant); font-size:.85rem; }
.account-bar a{ color:var(--md-primary); font-weight:600; }
.account-bar .linkbtn{ background:none; border:none; color:var(--md-on-surface); font:inherit; font-weight:600; cursor:pointer; padding:0; }
.lang-switch{ display:inline-flex; gap:4px; margin-inline-end:auto; }
.lang-switch a{ color:var(--md-on-surface-variant); font-weight:600; font-size:.76rem; padding:4px 9px; border-radius:8px; }
.lang-switch a.lang-on{ color:var(--md-on-primary); background:var(--md-primary); }
[dir="rtl"] body{ text-align:right; }

/* ============ Navigation bar (mobil) ============ */
.tabbar{ position:fixed; bottom:0; inset-inline:0; z-index:30; display:grid; grid-template-columns:repeat(4,1fr);
  padding:6px 8px calc(8px + env(safe-area-inset-bottom)); background:var(--md-s);
  border-top:1px solid var(--md-outline-variant); }
.tab{ display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.7rem; font-weight:600;
  color:var(--md-on-surface-variant); padding:6px 4px; position:relative; border:none; background:none; cursor:pointer; }
.tab .ico{ font-size:1.3rem; width:60px; height:32px; display:grid; place-items:center; border-radius:var(--r-pill); transition:background .15s; }
.tab.active, .tab[aria-current="page"]{ color:var(--md-on-surface); }
.tab.active .ico, .tab[aria-current="page"] .ico{ background:var(--md-primary-container); color:var(--md-on-primary-container); }
.tab .dot{ position:absolute; top:-1px; inset-inline-end:20%; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  font-size:.62rem; font-weight:800; color:var(--md-on-error,#fff); background:var(--md-error); display:grid; place-items:center; }

/* ============ Hero / Seitenkopf (clean) ============ */
.hero{ position:relative; background:var(--md-s-low); border-bottom:1px solid var(--md-outline-variant); }
.hero-inner{ padding:36px var(--edge) 30px; text-align:center; }
/* --edge ist der Rand, der eine --max breite Spalte in voller Fensterbreite zentriert. Die Startseite nutzt
   .hero-inner allein, dort ist das richtig. Die Admin-Seiten schreiben "container hero-inner" - und dann
   begrenzt .container die Breite bereits, waehrend --edge denselben Rand ein zweites Mal als Innenabstand
   darauflegt. Von 680 px blieben 360 uebrig, bei schmaleren Fenstern noch weniger, bis der Untertitel mit
   einem Wort pro Zeile umbrach. */
.container.hero-inner{ padding-inline:0; }
.eyebrow{ font-size:.72rem; letter-spacing:.5px; text-transform:uppercase; color:var(--md-primary); font-weight:700; }
.name-de{ font-weight:700; color:var(--md-on-surface); letter-spacing:.2px; text-transform:none;
  font-size:clamp(28px,6vw,42px); line-height:1.1; margin:8px 0 0; }
.name-ar{ font-family:var(--font-ar); font-weight:600; color:var(--md-on-surface-variant);
  font-size:clamp(18px,4vw,26px); margin:4px 0 0; }
.page-head{ width:min(calc(100% - 32px), var(--max)); margin-inline:auto; padding:24px 0 4px; }
.page-head h1{ font-weight:700; font-size:clamp(1.55rem, 3.4vw, 2rem); margin:4px 0 2px; line-height:1.15; color:var(--md-on-surface); }
.page-head .sub{ color:var(--md-on-surface-variant); font-size:.95rem; margin:2px 0 0; max-width:46ch; }
.chip-row{ display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip{ background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); border:none;
  padding:7px 15px; border-radius:8px; font-size:.82rem; font-weight:600; letter-spacing:.02em; }
.hero-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:22px; }

/* ============ Landing-Tiles (Material cards) ============ */
/* Auto-fit rather than a fixed column count: the number of ways to order is not the layout's business. It
   was hard-coded to three, so dropping dine-in left a visibly empty third column. Two tiles now share the
   row and get the freed space — they are the main choice on the landing page and can afford to be roomy. */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit, minmax(148px,1fr)); gap:12px; margin-top:22px; }
.tile{ background:var(--md-s-low); border:1px solid var(--md-outline-variant); border-radius:var(--r);
  padding:22px 16px; text-align:center; transition:background .15s, box-shadow .15s, border-color .15s; }
.tile:hover{ background:var(--md-s); box-shadow:var(--md-e1); border-color:var(--md-primary); }
.tile .ti{ font-size:2rem; line-height:1; }
.tile b{ display:block; font-size:1rem; margin-top:10px; color:var(--md-on-surface); font-weight:700; }
.tile small{ color:var(--md-on-surface-variant); font-size:.78rem; line-height:1.45; display:block; margin-top:4px;
  text-wrap:balance; }
/* Once a tile is wide enough, centring a line of text in it just leaves a lot of empty box. Icon to the
   side, text against it — the same card reading as a row instead of a stack. */
@media (min-width:560px){
  /* Grid, not flex: the markup is icon + <b> + <small> as siblings, so flex would line all three up in a
     row and put the subtitle beside the title. Here the icon spans both rows of its own column. */
  .tile{ display:grid; grid-template-columns:auto 1fr; column-gap:18px; align-items:center;
    text-align:start; padding:20px 24px; }
  .tile .ti{ grid-row:1 / span 2; font-size:2.3rem; }
  .tile b{ align-self:end; margin-top:0; }
  .tile small{ align-self:start; }
}

/* ============ Section header ============ */
.section-h, .sec-head{ position:relative; display:flex; align-items:baseline; gap:12px; padding:0 2px; margin:28px 0 12px; }
.section-h h2, .sec-de{ font-weight:700; color:var(--md-on-surface); font-size:clamp(18px,3vw,22px); letter-spacing:0;
  text-transform:none; line-height:1.2; margin:0; }
.section-h .ar, .sec-ar{ font-family:var(--font-ar); font-weight:600; direction:rtl; color:var(--md-on-surface-variant);
  font-size:clamp(15px,2.6vw,18px); white-space:nowrap; margin-inline-start:auto; }

/* ============ Segmented buttons (M3) ============ */
.seg{ display:inline-flex; width:100%; max-width:560px; margin-top:16px; border:1px solid var(--md-outline);
  border-radius:var(--r-pill); overflow:hidden; background:transparent; padding:0; gap:0; }
.seg button{ flex:1; display:inline-flex; flex-direction:row; align-items:center; justify-content:center; gap:7px; padding:11px 6px;
  border:none; background:none; color:var(--md-on-surface); font-size:.86rem; font-weight:600; cursor:pointer; transition:background .15s; }
.seg button + button{ border-inline-start:1px solid var(--md-outline); }
.seg button .ico{ font-size:1.05rem; }
.seg button.on{ background:var(--md-surface-variant); color:var(--md-on-surface); box-shadow:none; }
.seg-note{ font-size:.8rem; color:var(--md-on-surface-variant); margin:10px 2px 0; }

/* ============ Filter chips ============ */
.cats{ position:sticky; top:56px; z-index:20; display:flex; gap:8px; overflow-x:auto; padding:12px var(--edge);
  background:var(--md-surface); scrollbar-width:none; }
.cats::-webkit-scrollbar{ display:none; }
.cat{ white-space:nowrap; font-size:.84rem; font-weight:600; color:var(--md-on-surface-variant); padding:7px 14px;
  border-radius:var(--r-sm); border:1px solid var(--md-outline); background:transparent; cursor:pointer; transition:.15s; }
.cat:hover{ background:var(--md-s); }
.cat.on{ color:var(--md-on-tertiary-container); background:var(--md-tertiary-container); border-color:transparent; }

/* ============ Menu grid + dish cards ============ */
.menu-grid{ display:grid; grid-template-columns:1fr; gap:12px; }
.menu-grid .section-h, .menu-grid .status, .menu-grid > div{ grid-column:1 / -1; }
.menu-grid .oi{ margin-top:0; }
.oi{ display:flex; gap:14px; padding:13px; margin-top:12px; background:var(--md-s-low);
  border:1px solid transparent; border-radius:var(--r); transition:background .15s, box-shadow .15s; }
.oi:hover{ background:var(--md-s); box-shadow:var(--md-e1); }
.oi.off{ opacity:.6; }
.oi-thumb{ flex:0 0 60px; height:60px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:1.7rem;
  background:var(--md-surface-variant); color:var(--md-on-surface-variant); }
.oi-body{ flex:1; min-width:0; }
.oi h3{ margin:0; font-size:1rem; font-weight:600; color:var(--md-on-surface); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.oi-desc{ color:var(--md-on-surface-variant); font-size:.84rem; margin:3px 0 0; }
.oi-aller{ color:var(--md-on-surface-variant); font-size:.7rem; margin-top:4px; opacity:.85; }
.oi-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:9px; gap:10px; }
.oi-price{ color:var(--md-on-surface); background:none; padding:0; border-radius:0; font-size:1rem; font-weight:700;
  font-variant-numeric:tabular-nums; direction:ltr; box-shadow:none; }
.oi-add{ width:40px; height:40px; border-radius:var(--r-pill); display:grid; place-items:center; font-size:1.4rem;
  color:var(--md-on-primary-container); background:var(--md-primary-container); border:none; cursor:pointer; line-height:1; transition:box-shadow .15s; }
.oi-add:hover{ box-shadow:var(--md-e1); }
/* An item already in the cart is marked on the card itself, so you can see it while scrolling the menu
   without opening the cart. The stepper sits in the footer instead of the plus button. */
/* Diet chips sit in the category row but filter rather than jump, so they are tinted like the badges on the
   dishes themselves — the same green/amber the customer already associates with vegan / vegetarian. */
.cat.diet{ font-weight:700; }
.cat.diet.v{ color:var(--md-on-success-container); }
.cat.diet.g{ color:var(--md-on-tertiary-container); }
.cat.diet.v.on{ background:var(--md-success-container); color:var(--md-on-success-container); border-color:var(--md-on-success-container); }
.cat.diet.g.on{ background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); border-color:var(--md-on-tertiary-container); }
.diet-filter-note{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--md-on-surface-variant); font-size:.85rem; margin:12px 0 0; }
.linkish{ background:none; border:none; padding:0; font:inherit; font-weight:700;
  color:var(--md-primary); text-decoration:underline; cursor:pointer; }
/* A real photo fills the same square the emoji placeholder occupies, so a menu with only some dishes
   photographed still lines up. object-fit crops rather than distorts a non-square upload. */
.oi-photo{ object-fit:cover; background:var(--md-s); }
.oi.in-cart{ border-color:var(--md-primary); background:var(--md-s); }
/* Admin photo field */
.me-photo{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.me-photo-preview{ width:84px; height:84px; border-radius:var(--r-sm); object-fit:cover;
  background:var(--md-s); border:1px solid var(--md-outline-variant); }
.me-photo-preview.empty{ display:grid; place-items:center; font-size:1.8rem; opacity:.5; }
.me-photo-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.me-photo-actions label{ cursor:pointer; margin:0; }
.me-photo-hint{ color:var(--md-on-surface-variant); font-size:.75rem; }
.oi-stepper{ margin-top:0; }
.oi-stepper button{ background:var(--md-s-lowest); border:1px solid var(--md-outline); }
.oi-incart{ font-size:.74rem; font-weight:700; color:var(--md-primary); text-decoration:none;
  border:1px solid var(--md-primary); border-radius:var(--r-pill); padding:3px 9px; white-space:nowrap; }
.oi-incart:hover{ background:var(--md-primary); color:var(--md-on-primary); }
/* Guest prompt at checkout: the cart above it stays fully usable, this only replaces the ordering form. */
.guest-gate{ text-align:center; }
.guest-gate h3{ margin-bottom:6px; }
.guest-gate .btn{ margin-top:10px; }
.guest-gate-hint{ color:var(--md-on-surface-variant); font-size:.85rem; margin:6px 0 0; }
.oi-add:disabled{ opacity:.4; cursor:default; }
.oi-add:active{ transform:scale(.94); }
.soldout{ font-size:.72rem; font-weight:700; color:var(--md-error); text-transform:none; letter-spacing:0; }

/* legacy .menu-item (Home/MAUI) */
.items-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.menu-item{ background:var(--md-s-low); border:1px solid var(--md-outline-variant); border-radius:var(--r); padding:16px;
  transition:background .15s, box-shadow .15s; }
.menu-item:hover{ background:var(--md-s); box-shadow:var(--md-e1); }
.item-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.item-titles{ min-width:0; flex:1; }
.item-title{ margin:0; color:var(--md-on-surface); font-size:1.05rem; font-weight:600; line-height:1.3; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.item-subtitle{ margin:3px 0 0; direction:rtl; text-align:right; color:var(--md-on-surface-variant); font-family:var(--font-ar); font-weight:600; font-size:.95rem; }
.item-desc{ margin:8px 0 0; color:var(--md-on-surface-variant); font-size:.88rem; }
.item-allergens{ font-size:.72rem; color:var(--md-on-surface-variant); margin-top:5px; opacity:.85; }
.price{ flex-shrink:0; color:var(--md-on-surface); background:none; padding:0; border-radius:0; font-size:1.05rem; font-weight:700; white-space:nowrap; direction:ltr; box-shadow:none; }
.diet-badge{ display:inline-block; padding:2px 8px; border-radius:6px; font-size:.62rem; font-weight:800; letter-spacing:.3px; vertical-align:middle;
  color:var(--md-on-tertiary-container); background:var(--md-tertiary-container); }
.diet-badge.v{ background:var(--md-success-container); color:var(--md-on-success-container); }
.diet-badge.g{ background:var(--md-tertiary-container); color:var(--md-on-tertiary-container); }
.item-add{ margin-top:12px; width:100%; padding:10px 16px; font-size:.9rem;
  background:var(--md-primary-container); color:var(--md-on-primary-container); border:none; box-shadow:none; }
.item-add:hover{ box-shadow:var(--md-e1); }

/* ============ Buttons (M3 filled/tonal/outlined) ============ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 24px; border-radius:var(--r-pill);
  font-weight:600; font-size:.94rem; border:none; cursor:pointer; transition:box-shadow .15s ease, background .15s ease; }
.btn-primary{ color:var(--md-on-primary); background:var(--md-primary); box-shadow:var(--md-e1); }
.btn-primary:hover{ box-shadow:var(--md-e2); }
.btn-ghost{ color:var(--md-primary); background:transparent; border:1px solid var(--md-outline); }
.btn-ghost:hover{ background:color-mix(in srgb, var(--md-primary) 8%, transparent); }
.btn:disabled{ opacity:.5; cursor:default; box-shadow:none; }
.btn-block{ width:100%; }
.btn-sm{ padding:8px 14px; font-size:.82rem; }
/* Storno/Löschen als destruktive Aktion kennzeichnen (Fehlerfarbe). */
.btn.kds-cancel{ color:var(--md-error); border-color:color-mix(in srgb, var(--md-error) 45%, var(--md-outline)); }
.btn.kds-cancel:hover{ background:color-mix(in srgb, var(--md-error) 8%, transparent); }

/* ---------- Kitchen top app bar (compact) + new-order toast ---------- */
.kds-bar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px var(--edge); background:var(--md-surface); border-bottom:1px solid var(--md-outline-variant); }
.kds-bar.paused{ background:var(--md-primary-container); border-bottom-color:transparent; }
.kds-bar-title{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:-.01em; color:var(--md-on-surface); }
.kds-bar-title .lg{ font-size:1.32rem; }
.kds-bar-live{ width:9px; height:9px; border-radius:50%; background:var(--md-success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--md-success) 22%, transparent); animation:pulse 1.8s ease-in-out infinite; }
.kds-bar-actions{ display:inline-flex; align-items:center; gap:8px; }
.kds-bar-count{ min-width:28px; height:28px; padding:0 9px; border-radius:var(--r-pill); background:var(--md-primary); color:var(--md-on-primary);
  font-weight:800; font-size:.86rem; display:grid; place-items:center; font-variant-numeric:tabular-nums; }
.kds-ib{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 15px; border-radius:var(--r-pill); border:1px solid var(--md-outline);
  background:transparent; color:var(--md-on-surface); font:inherit; font-size:.86rem; font-weight:600; cursor:pointer; }
.kds-ib:hover{ background:var(--md-s); }
.kds-ib.on{ background:var(--md-primary); color:var(--md-on-primary); border-color:transparent; }   /* paused → resume */
.kds-ib.danger{ color:var(--md-error); border-color:color-mix(in srgb, var(--md-error) 40%, var(--md-outline)); }
.kds-ib .lg{ font-size:1.05rem; line-height:1; }
@media (max-width:560px){ .kds-ib .lbl{ display:none; } .kds-ib{ padding:0 12px; } }

.kds-toast{ position:fixed; top:14px; inset-inline-end:14px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:14px; background:var(--md-primary); color:var(--md-on-primary); box-shadow:var(--md-e3);
  font-weight:700; animation:kdsToastIn .24s ease-out; }
.kds-toast .lg{ font-size:1.25rem; }
@keyframes kdsToastIn{ from{ transform:translateY(-12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }

/* ============ Sticky cart bar (FAB-ähnlich) ============ */
.cartbar{ position:fixed; bottom:calc(66px + env(safe-area-inset-bottom)); inset-inline:0; z-index:29;
  width:min(calc(100% - 28px), 480px); margin-inline:auto; }
.cartbar .btn{ width:100%; justify-content:space-between; padding:16px 22px; border-radius:18px; box-shadow:var(--md-e3); }
.cartbar .cb-count{ background:color-mix(in srgb, var(--md-on-primary) 22%, transparent); border-radius:var(--r-pill); padding:2px 11px; font-size:.82rem; }

/* ============ Cards & Material-Textfelder ============ */
.card{ background:var(--md-s-low); border:1px solid var(--md-outline-variant); border-radius:var(--r); padding:18px; margin-top:14px; }
.card h3{ margin:0 0 4px; font-size:1.05rem; font-weight:600; color:var(--md-on-surface); }
.field{ position:relative; margin-top:16px; }
.field label{ display:block; font-size:.78rem; letter-spacing:.02em; text-transform:none; color:var(--md-on-surface-variant); font-weight:600; margin-bottom:6px; }
.field input, .field textarea, .field select{ width:100%; padding:12px 14px; border-radius:6px; background:var(--md-s-lowest);
  border:1px solid var(--md-outline); color:var(--md-on-surface); font-family:inherit; font-size:.95rem; transition:border-color .12s; }
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border:2px solid var(--md-primary); padding:11px 13px; }
.field select option{ color:#222; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.validation-errors{ list-style:none; margin:0 0 12px; padding:0; }
.validation-message, .validation-errors li{ color:var(--md-error); font-weight:600; font-size:.86rem; margin:2px 0; }

/* ============ Payment tiles & toggle ============ */
.pays{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.pay{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; border:1px solid var(--md-outline);
  background:transparent; text-align:start; width:100%; cursor:pointer; }
.pay .pico{ font-size:1.35rem; width:30px; text-align:center; }
.pay b{ display:block; font-size:.95rem; color:var(--md-on-surface); }
.pay small{ color:var(--md-on-surface-variant); font-size:.75rem; }
.pay .rad{ margin-inline-start:auto; width:20px; height:20px; border-radius:50%; border:2px solid var(--md-outline); flex-shrink:0; }
.pay.on{ border-color:var(--md-primary); background:var(--md-primary-container); }
.pay.on b, .pay.on small{ color:var(--md-on-primary-container); }
.pay.on .rad{ border-color:var(--md-primary); background:var(--md-primary); box-shadow:inset 0 0 0 3px var(--md-primary-container); }
.toggle{ display:flex; align-items:center; gap:12px; padding:14px; border-radius:14px; width:100%; text-align:start;
  background:transparent; border:1px solid var(--md-outline-variant); margin-top:14px; cursor:pointer; }
.toggle .sw{ margin-inline-start:auto; width:48px; height:28px; border-radius:var(--r-pill); background:var(--md-surface-variant);
  border:2px solid var(--md-outline); position:relative; transition:background .2s, border-color .2s; flex-shrink:0; }
.toggle .sw::after{ content:""; position:absolute; top:4px; inset-inline-start:4px; width:16px; height:16px; border-radius:50%;
  background:var(--md-outline); transition:transform .2s, background .2s, width .2s, height .2s; }
.toggle.on .sw{ background:var(--md-primary); border-color:var(--md-primary); }
.toggle.on .sw::after{ transform:translateX(20px); width:20px; height:20px; top:2px; inset-inline-start:4px; background:var(--md-on-primary); }
[dir="rtl"] .toggle.on .sw::after{ transform:translateX(-20px); }

/* ============ Cart lines & totals ============ */
.cl{ display:flex; gap:12px; padding:13px 0; border-bottom:1px solid var(--md-outline-variant); align-items:flex-start; }
.cl-ico{ flex:0 0 44px; height:44px; border-radius:11px; display:grid; place-items:center; font-size:1.25rem;
  background:var(--md-surface-variant); color:var(--md-on-surface-variant); }
.cl-info{ flex:1; min-width:0; }
.cl-info h4{ margin:0; font-size:.95rem; color:var(--md-on-surface); font-weight:600; }
.cl-mods, .cart-mods{ display:block; color:var(--md-on-surface-variant); font-size:.73rem; margin-top:2px; }
.cl-price{ text-align:end; font-weight:700; color:var(--md-on-surface); font-variant-numeric:tabular-nums; white-space:nowrap; }
.stepper{ display:inline-flex; align-items:center; gap:9px; margin-top:8px; }
.stepper button{ width:32px; height:32px; border-radius:50%; font-weight:700; color:var(--md-on-surface); font-size:1.05rem;
  background:transparent; border:1px solid var(--md-outline); cursor:pointer; line-height:1; }
.stepper button:hover{ background:var(--md-s); }
.stepper span{ min-width:16px; text-align:center; font-weight:700; font-variant-numeric:tabular-nums; }
.totals{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.totals .row{ display:flex; justify-content:space-between; color:var(--md-on-surface-variant); font-size:.9rem; }
.totals .grand{ color:var(--md-on-surface); font-weight:700; font-size:1.12rem; margin-top:4px; padding-top:12px;
  border-top:1px solid var(--md-outline-variant); display:flex; justify-content:space-between; }
.totals .grand span:last-child{ color:var(--md-primary); font-variant-numeric:tabular-nums; }
.hint{ font-size:.78rem; color:var(--md-on-surface-variant); text-align:center; padding:12px 20px 4px; }
.alert{ margin-top:14px; padding:12px 14px; border-radius:12px; font-size:.86rem; font-weight:500;
  background:var(--md-error-container); border:none; color:var(--md-on-error-container); }

/* Hinweis "E-Mail noch nicht bestaetigt" auf /account (docs/09 §9.4a). Bewusst nicht .alert: nichts ist
   kaputt, es fehlt nur ein Klick - die Fehlerfarbe waere hier eine Uebertreibung. */
.confirm-note{ margin-top:16px; padding:14px; border-radius:14px; font-size:.86rem; line-height:1.5;
  background:var(--md-primary-container); color:var(--md-on-primary-container); }
.confirm-note b{ display:block; margin-bottom:6px; font-size:.92rem; }
.confirm-note p{ margin:0 0 10px; }
.confirm-note form{ margin:0; }
.confirm-note-ok{ font-weight:600; }

/* ============ Bottom sheet ============ */
.scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s; border:none; }
.scrim.open{ opacity:1; pointer-events:auto; }
.sheet{ position:fixed; inset-inline:0; bottom:0; z-index:50; max-width:560px; margin-inline:auto; max-height:86dvh; overflow-y:auto;
  background:var(--md-s-high); border:none; border-radius:28px 28px 0 0; transform:translateY(103%); visibility:hidden; padding:8px 18px 24px;
  transition:transform .26s cubic-bezier(.2,.8,.25,1), visibility 0s linear .26s; box-shadow:var(--md-e3); }
.sheet.open{ transform:translateY(0); visibility:visible; transition:transform .26s cubic-bezier(.2,.8,.25,1); }
.grab{ width:32px; height:4px; border-radius:3px; background:var(--md-outline); margin:8px auto 14px; }
.sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.sheet-close{ flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none; background:transparent; color:var(--md-on-surface-variant); font-size:1.1rem; line-height:1; cursor:pointer; }
.sheet-close:hover{ background:var(--md-s); }
.sheet h3{ font-weight:700; font-size:1.25rem; margin:0; color:var(--md-on-surface); }
.sheet .sub{ color:var(--md-on-surface-variant); margin:3px 0 0; font-size:.86rem; }
.opt-group{ margin-top:16px; }
.opt-group .gh{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
.opt-group .gh b{ font-size:.95rem; color:var(--md-on-surface); }
.opt-group .req{ color:var(--md-primary); font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.opt{ display:flex; align-items:center; gap:12px; padding:12px 4px; border-bottom:1px solid var(--md-outline-variant); width:100%;
  background:none; border-inline:none; border-top:none; text-align:start; cursor:pointer; font-size:.92rem; color:var(--md-on-surface); }
.opt .mark{ width:22px; height:22px; border:2px solid var(--md-outline); display:grid; place-items:center; color:transparent; font-size:.8rem; font-weight:800; flex-shrink:0; }
.opt.radio .mark{ border-radius:50%; }
.opt.check .mark{ border-radius:6px; }
.opt.on .mark{ border-color:var(--md-primary); background:var(--md-primary); color:var(--md-on-primary); }
.opt .oname{ flex:1; }
.opt .op{ color:var(--md-on-surface-variant); font-weight:600; font-size:.85rem; font-variant-numeric:tabular-nums; }
.sheet-foot{ display:flex; gap:12px; align-items:center; margin-top:20px; }
.sheet-foot .stepper{ margin-top:0; }
.sheet-foot .btn{ flex:1; }

/* ============ Tracking stepper ============ */
.track-head{ text-align:center; padding:28px var(--edge) 8px; }
.track-num{ font-weight:700; font-size:2.4rem; color:var(--md-primary); letter-spacing:0; }
.track-sub{ color:var(--md-on-surface-variant); margin-top:4px; font-size:.9rem; }
.track-eta{ display:inline-block; margin-top:12px; padding:9px 16px; border-radius:var(--r-pill);
  background:var(--md-tertiary-container); border:none; color:var(--md-on-tertiary-container); font-weight:600; font-size:.9rem; }
.steps{ margin:20px 0 8px; display:flex; flex-direction:column; list-style:none; padding:0; }
.step{ display:flex; gap:14px; align-items:flex-start; }
.step .rail{ display:flex; flex-direction:column; align-items:center; align-self:stretch; }
.step .node{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:.9rem;
  background:var(--md-surface-variant); border:none; color:var(--md-on-surface-variant); flex-shrink:0; }
.step .bar{ width:2px; flex:1; min-height:24px; background:var(--md-outline-variant); }
.step:last-child .bar{ display:none; }
.step.done .node{ background:var(--md-primary); color:var(--md-on-primary); }
.step.now .node{ background:var(--md-primary); color:var(--md-on-primary); box-shadow:0 0 0 5px var(--md-primary-container); }
.step .txt{ padding-bottom:20px; padding-top:4px; }
.step .txt b{ font-size:.96rem; color:var(--md-on-surface-variant); font-weight:600; }
.step.done .txt b, .step.now .txt b{ color:var(--md-on-surface); }
.live-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--md-success); margin-inline-end:6px; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

/* ============ Order history ============ */
.orders-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:14px; margin-top:14px; }
.order-card{ background:var(--md-s-low); border:1px solid var(--md-outline-variant); border-radius:var(--r); padding:16px; }
.oc-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.oc-number{ font-weight:700; color:var(--md-on-surface); font-size:1.05rem; }
.oc-status{ font-size:.68rem; font-weight:700; letter-spacing:.02em; color:var(--md-on-tertiary-container); background:var(--md-tertiary-container);
  padding:4px 11px; border-radius:var(--r-pill); text-transform:none; }
.order-card ul{ list-style:none; margin:0 0 10px; padding:0; color:var(--md-on-surface-variant); font-size:.88rem; }
.order-card li{ padding:2px 0; }
.order-foot{ display:flex; justify-content:space-between; align-items:center; color:var(--md-on-surface-variant); font-size:.8rem; }
.oc-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* ============ Account ============ */
.avatar{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; font-size:1.5rem; font-weight:700;
  color:var(--md-on-primary-container); background:var(--md-primary-container); }
.menu-list{ margin-top:16px; border:1px solid var(--md-outline-variant); border-radius:var(--r); overflow:hidden; }
.menu-row{ display:flex; align-items:center; gap:12px; padding:15px 16px; width:100%; border:none;
  border-bottom:1px solid var(--md-outline-variant); text-align:start; background:var(--md-s-low); font-size:.92rem; font-weight:500;
  color:var(--md-on-surface); cursor:pointer; }
.menu-row:hover{ background:var(--md-s); }
.menu-row:last-child{ border-bottom:none; }
.menu-row .mi{ font-size:1.1rem; width:24px; text-align:center; }
.menu-row .chev{ margin-inline-start:auto; color:var(--md-on-surface-variant); }
.staff-box{ margin-top:16px; padding:14px; border:1px solid var(--md-outline-variant); border-radius:14px; font-size:.82rem; color:var(--md-on-surface-variant); background:var(--md-s-low); }
.staff-box b{ color:var(--md-on-surface); }
.staff-box .row{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* ============ Status / login ============ */
.status{ max-width:520px; margin:40px auto; text-align:center; background:var(--md-s-low); border:1px solid var(--md-outline-variant);
  border-radius:var(--r); padding:26px; color:var(--md-on-surface); font-weight:500; }
.status strong{ font-weight:700; font-size:1.25rem; color:var(--md-primary); }
.login-card{ max-width:430px; margin:28px auto; background:var(--md-s-low); border:1px solid var(--md-outline-variant); border-radius:var(--r); padding:26px 24px; }
.login-label{ display:block; color:var(--md-on-surface-variant); font-weight:600; font-size:.78rem; text-transform:none; letter-spacing:.01em; margin:14px 0 5px; }
.login-input{ width:100%; padding:12px 14px; border-radius:6px; border:1px solid var(--md-outline); background:var(--md-s-lowest); color:var(--md-on-surface); font-family:inherit; font-size:.95rem; }
.login-input:focus{ outline:none; border:2px solid var(--md-primary); padding:11px 13px; }
.login-submit{ width:100%; margin-top:18px; }
.login-error{ color:var(--md-error); font-weight:600; }
.login-hint{ text-align:center; color:var(--md-on-surface-variant); font-size:.8rem; margin-top:14px; }
.login-hint a{ color:var(--md-primary); font-weight:600; }
/* Explanatory line belonging to the field above it: aligned with its label (start, so it flips in RTL) and
   sitting clear of the input. Never pull this up with a negative margin — native inputs paint over normal
   content, so the hint's top half disappears behind the field. */
.field-hint{ display:block; text-align:start; color:var(--md-on-surface-variant); font-size:.78rem; margin:6px 0 0; line-height:1.4; }
.login-label .req{ color:var(--md-error); margin-inline-start:2px; }
.pay-method{ display:flex; gap:16px; margin:12px 0; color:var(--md-on-surface); font-weight:500; font-size:.9rem; flex-wrap:wrap; }
.pay-method label{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.pay-line{ color:var(--md-on-surface); font-weight:600; text-align:center; margin:8px 0; }
.pay-back{ text-align:center; margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ============ Admin editor ============ */
.admin-card{ background:var(--md-s-low); border:1px solid var(--md-outline-variant); border-radius:14px; padding:18px; margin-top:14px; }
.admin-card h3{ font-weight:700; color:var(--md-on-surface); margin:0 0 12px; }
.admin-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.admin-in{ padding:9px 11px; border-radius:6px; border:1px solid var(--md-outline); background:var(--md-s-lowest); color:var(--md-on-surface); font-family:inherit; font-size:.85rem; min-width:110px; }
.admin-in:focus{ outline:none; border:2px solid var(--md-primary); }
.admin-num{ min-width:64px; width:78px; }
.admin-code{ color:var(--md-on-surface-variant); font-weight:700; font-size:.8rem; min-width:80px; }
.admin-table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.admin-table th{ text-align:left; color:var(--md-on-surface-variant); font-size:.68rem; padding:6px; font-weight:700; text-transform:uppercase; letter-spacing:.02em; }
.admin-table td{ padding:6px; vertical-align:middle; border-top:1px solid var(--md-outline-variant); }
.admin-table .admin-in{ min-width:0; width:100%; }
.admin-actions{ white-space:nowrap; }
.admin-inactive{ opacity:.5; }
/* Der Kopplungscode wird genau einmal angezeigt und dabei von einem Bildschirm auf ein Terminal abgetippt.
   Gross, gesperrt und einstellig lesbar - ein Code in Fliesstext waere eine Fehlerquelle mehr. */
.device-code{ font-size:1.8rem; font-weight:700; letter-spacing:.12em; margin:0; color:var(--md-on-surface); }
.admin-allergens{ display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin-top:6px; }
.admin-chk{ font-size:.75rem; color:var(--md-on-surface); display:inline-flex; align-items:center; gap:4px; }
.admin-chk input, .pay-method input, .opt input{ accent-color:var(--md-primary); }
.admin-detail td{ padding-bottom:12px; }
.admin-modifiers{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.admin-mgroup{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.admin-mopt{ font-size:.75rem; color:var(--md-on-surface); background:var(--md-surface-variant); border-radius:var(--r-pill); padding:3px 9px; display:inline-flex; align-items:center; gap:4px; }
.admin-msmall{ min-width:120px; }
.admin-x{ background:none; border:none; color:var(--md-primary); cursor:pointer; font-weight:800; padding:0 2px; }
.mod-group{ margin-top:10px; padding-top:8px; border-top:1px solid var(--md-outline-variant); }
.mod-title{ font-size:.82rem; font-weight:700; color:var(--md-on-surface); }
.mod-hint{ color:var(--md-on-surface-variant); font-weight:500; font-size:.72rem; }
.mod-opt{ display:flex; align-items:center; gap:7px; font-size:.86rem; color:var(--md-on-surface); padding:3px 0; cursor:pointer; }
.mod-error{ color:var(--md-error); }

/* ============ Receipt (Druck bleibt hell) ============ */
.receipt-page{ padding-top:22px; }
.receipt{ max-width:340px; margin:0 auto; background:#fff; color:#141414; border-radius:12px; padding:22px 24px; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.receipt .rc-brand{ text-align:center; font-weight:800; font-size:1.4rem; letter-spacing:.5px; }
.receipt .rc-sub{ text-align:center; font-size:.78rem; color:#555; }
.receipt .rc-rule{ border-top:1px dashed #999; margin:10px 0; }
.receipt .rc-row{ display:flex; justify-content:space-between; gap:12px; font-size:.9rem; padding:2px 0; }
.receipt .rc-total{ font-weight:800; font-size:1.05rem; }
.receipt .rc-thanks{ text-align:center; font-size:.85rem; color:#555; margin-top:8px; }
.receipt-actions{ display:flex; gap:10px; justify-content:center; margin:18px 0; }
@media print{
  .topbar, .tabbar, .account-bar, .hero, .cartbar, .topnav, .no-print, #blazor-error-ui{ display:none !important; }
  body, main, .shell, .appmain{ background:#fff !important; box-shadow:none !important; }
  .receipt{ box-shadow:none; margin:0; }
}

/* ============ Responsive ============ */
@media (max-width:760px){ .items-grid{ grid-template-columns:1fr; } }

/* --- Staff header, sobald die Pillen nicht mehr neben Marke und Sprachwahl passen ---
   Zehn Eintraege sind rund 1000 px breit; mit Marke und Sprachwahl braucht die Zeile etwa 1390 px. Ohne
   diese Regel bricht die Navigation zwar um, die Sprachwahl wird aber aus der Zeile geschoben und rechts
   abgeschnitten - man kann die Sprache dann nicht mehr wechseln. Die Navigation bekommt deshalb eine eigene
   Zeile, Marke und Sprachwahl bleiben zusammen in der ersten. Die Grenze wandert mit jedem neuen Eintrag
   mit; sie stand bei neun Pillen auf 1300 px, der Geraete-Eintrag hat sie um rund hundert weitergeschoben. */
@media (max-width:1400px){
  .staff-shell .topbar{ flex-wrap:wrap; row-gap:9px; }
  .staff-shell .brand{ flex:1 1 auto; min-width:0; }
  .staff-shell .staff-nav{ order:3; flex:1 0 100%; }
}

/* --- Staff header on a phone ---
   Eight nav pills used to wrap into six rows and push the actual page below the fold — on the kitchen board,
   where every second counts. Brand and language stay on the first line; the nav becomes one swipeable row
   that bleeds to both screen edges so it is visibly scrollable. */
@media (max-width:768px){
  .staff-shell .topbar{ flex-wrap:wrap; row-gap:9px; gap:10px; padding-bottom:0; }
  .staff-shell .brand{ flex:1 1 auto; min-width:0; }
  .staff-shell .brand b{ font-size:1rem; }
  .staff-nav{
    order:3; flex:1 0 100%;
    flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scrollbar-width:none;
    margin-inline:calc(var(--edge) * -1); padding:0 var(--edge) 10px;
  }
  .staff-nav::-webkit-scrollbar{ display:none; }
  .staff-nav > *{ flex:0 0 auto; scroll-snap-align:start; white-space:nowrap; }
}

/* --- Wide admin tables on a phone ---
   A table that only scrolls sideways hides its most important columns (total, actions) with no hint that
   they exist. Each row becomes a card of label/value pairs instead; the label comes from data-label on the
   cell, so the header row can be dropped without losing meaning. */
@media (max-width:700px){
  .admin-table thead{ display:none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td{ display:block; width:100%; }
  .admin-table tr{ border:1px solid var(--md-outline-variant); border-radius:14px;
    padding:10px 13px; margin-bottom:10px; background:var(--md-s-lowest); }
  .admin-table td{ border:0; padding:4px 0; display:flex; align-items:center; justify-content:space-between;
    gap:14px; text-align:end; }
  .admin-table td::before{ content:attr(data-label); text-align:start; flex:0 0 auto;
    color:var(--md-on-surface-variant); font-size:.66rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.03em; }
  .admin-table td:empty{ display:none; }
  .admin-table .admin-actions{ justify-content:flex-end; padding-top:8px; }
}
@media (min-width:700px){ .menu-grid{ grid-template-columns:repeat(auto-fill, minmax(330px,1fr)); gap:14px; } }
@media (min-width:768px){
  .tabbar{ display:none; }
  .topnav{ display:inline-flex; }
  .appmain{ padding-bottom:48px; }
  .cartbar{ bottom:24px; }
  .sheet{ border-radius:28px; bottom:24px; inset-inline:24px; }
  .page-head{ padding-top:30px; }
}

/* ============ Legal ============ */
.legal{ max-width:72ch; margin-inline:auto; color:var(--md-on-surface); line-height:1.75; }
.legal h2{ font-size:1.12rem; font-weight:700; color:var(--md-on-surface); margin:28px 0 8px; }
.legal h2:first-child{ margin-top:8px; }
.legal p{ margin:8px 0; color:var(--md-on-surface-variant); }
.legal a{ color:var(--md-primary); font-weight:600; text-decoration:underline; overflow-wrap:anywhere; }
.legal ul{ margin:8px 0; padding-inline-start:22px; color:var(--md-on-surface-variant); }
.legal li{ margin:5px 0; }
.legal dl{ margin:10px 0; display:grid; grid-template-columns:minmax(150px,auto) 1fr; gap:8px 18px; }
.legal dt{ font-weight:600; color:var(--md-on-surface); }
.legal dd{ margin:0; color:var(--md-on-surface-variant); }
.legal .todo{ color:var(--md-on-tertiary-container); font-weight:600; background:var(--md-tertiary-container);
  border:none; border-radius:6px; padding:0 7px; font-size:.9em; }
.legal-note{ max-width:72ch; margin:0 auto 16px; padding:12px 15px; border-radius:12px; font-size:.86rem; font-weight:500;
  color:var(--md-on-tertiary-container); background:var(--md-tertiary-container); border:none; }
@media (max-width:560px){ .legal dl{ grid-template-columns:1fr; gap:2px 0; } .legal dd{ margin-bottom:10px; } }

.legal-footer{ border-top:1px solid var(--md-outline-variant); text-align:center;
  padding:16px var(--edge) calc(86px + env(safe-area-inset-bottom)); }
.legal-footer nav{ display:inline-flex; flex-wrap:wrap; gap:6px 12px; justify-content:center; align-items:center; font-size:.8rem; }
.legal-footer a{ color:var(--md-on-surface-variant); font-weight:600; }
.legal-footer a:hover{ color:var(--md-primary); }
.legal-footer .sep{ color:var(--md-on-surface-variant); opacity:.5; }
@media (min-width:768px){ .legal-footer{ padding-bottom:22px; } }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}