/* App-Layout: Top-Bar, Navigation (unten auf dem Handy, Leiste links am Desktop), Offline-Banner, Ansichten */

.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 4px;
  height: 56px; padding: 0 8px 0 4px; background: var(--surface); transition: background .2s var(--ease);
  padding-top: env(safe-area-inset-top); box-sizing: content-box;
}
.topbar.scrolled { background: var(--surface-container); }
.topbar .title { flex: 1; min-width: 0; font-size: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 8px; }
.topbar .back[hidden] + .title { padding-left: 12px; }
.topbar .brand { flex: none; width: 32px; height: 32px; margin-left: 10px; }
.topbar .brand:not([hidden]) + .title { padding-left: 10px; }
.rail-brand { display: none; }
.topbar .me { margin-left: 4px; position: relative; }
.topbar .me.has-dot::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--error); box-shadow: 0 0 0 2px var(--surface);
}

.navbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex;
  height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-container);
}
.nav-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: transparent; color: var(--on-surface-variant); text-decoration: none;
  font-size: 11.5px; font-weight: 500; min-width: 0;
}
.nav-item .pip { position: relative; display: flex; align-items: center; justify-content: center; width: 56px; height: 30px; border-radius: 15px; transition: background .2s var(--ease); }
.nav-item.on { color: var(--on-surface); font-weight: 600; }
.nav-item.on .pip { background: var(--secondary-container); color: var(--on-secondary-container); }
.nav-item.on .i { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.nav-item .i { font-size: 22px; }
.nav-item .dot {
  position: absolute; top: 2px; right: 12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--error); color: var(--on-error); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

main { max-width: 760px; margin: 0 auto; padding: 4px 16px calc(96px + env(safe-area-inset-bottom)); }
main.wide { max-width: 1000px; }

@media (min-width: 840px) {
  .navbar {
    top: 0; right: auto; width: 88px; height: auto; flex-direction: column; justify-content: flex-start;
    gap: 10px; padding: 76px 0 0; background: var(--surface);
  }
  .nav-item { flex: none; height: 60px; }
  .topbar { padding-left: 92px; }
  .topbar .brand { display: none; }
  .rail-brand { display: block; position: absolute; top: 8px; left: 24px; width: 40px; height: 40px; }
  .rail-brand img { display: block; width: 100%; height: 100%; }
  main { padding-left: 104px; padding-right: 16px; max-width: 868px; }
  main.wide { max-width: 1108px; }
  .fab { bottom: 24px; right: 24px; }
  body.has-fab .fab.mini { bottom: calc(24px + 52px + 12px); }
  .snackbar { bottom: 24px; }
}

/* Offline-/Status-Banner direkt unter der Top-Bar */
.netbar {
  position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 29; display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; background: var(--error-container); color: var(--on-error-container); font-size: 13px; line-height: 18px;
}
.netbar.queue { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.netbar .grow b { font-weight: 600; }
@media (min-width: 840px) { .netbar { margin-left: 88px; } }

/* Login */
.login { max-width: 380px; margin: 0 auto; padding: 8vh 20px 40px; }
.login .logo {
  width: 72px; height: 72px; border-radius: 22px; margin: 0 auto 14px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-container); color: var(--on-primary-container);
}
.login h1 { text-align: center; font-size: 26px; font-weight: 700; letter-spacing: -.3px; }
.login .lead { text-align: center; color: var(--on-surface-variant); margin: 4px 0 24px; }
.login .recent { justify-content: center; margin-bottom: 18px; }
.login .recent .chip { height: 36px; border-radius: 18px; padding: 0 14px 0 4px; gap: 8px; }
.login .who { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 16px; }
.login .who .avatar { width: 44px; height: 44px; font-size: 18px; }

/* Nächster Tag (Hero) */
.hero {
  position: relative; border-radius: var(--r-lg); padding: 14px 16px 16px; overflow: hidden;
  background: var(--primary-container); color: var(--on-primary-container);
}
.hero::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent, var(--primary)); }
.hero .kicker { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .3px; opacity: .85; }
.hero h2 { font-size: 24px; line-height: 30px; font-weight: 700; margin: 2px 0 2px; letter-spacing: -.2px; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; opacity: .9; }
.hero .meta span { display: inline-flex; align-items: center; gap: 4px; }
.hero .meta .i { font-size: 16px; }
.hero .mine { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--on-surface); }
.hero .actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.hero .btn.filled { background: var(--primary); color: var(--on-primary); }
.hero .btn.outlined { border-color: currentColor; color: inherit; }

.daycard { display: flex; gap: 12px; align-items: center; }
.daycard .date {
  width: 46px; flex: none; text-align: center; border-radius: var(--r-sm); padding: 4px 0;
  background: var(--surface-high); line-height: 1.1;
}
.daycard .date b { display: block; font-size: 18px; }
.daycard .date small { font-size: 11px; font-weight: 600; color: var(--on-surface-variant); text-transform: uppercase; }
.daycard .date.off { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.daycard .date.off small { color: inherit; }
.accent-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent, var(--primary)); flex: none; }

/* Tages-Kopf */
.dayhead { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 10px; }
.dayhead .row { flex-wrap: wrap; }
.dayhead .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--on-surface-variant); }
.dayhead .meta span { display: inline-flex; align-items: center; gap: 4px; }
.dayhead .meta .i { font-size: 16px; }

/* Bestellung (Warenkorb) */
.cart { background: var(--surface-container); border-radius: var(--r-lg); padding: 6px 4px 10px; }
.cart-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 2px; }
.cart-head .t { flex: 1; font-weight: 600; }
.cart .item { padding: 6px 8px 6px 12px; min-height: 44px; }
.cart .item + .item { border-top-color: color-mix(in srgb, var(--outline-variant) 60%, transparent); }
.cart-foot { display: flex; align-items: center; gap: 8px; padding: 6px 12px 0; }
.cart-foot .sum { flex: 1; font-size: 16px; font-weight: 700; }
.savestate { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--on-surface-variant); }
.savestate.ok { color: var(--success); }
.savestate.wait { color: var(--tertiary); }
.savestate .i { font-size: 16px; }

/* Bestellen am breiten Desktop: Karte links, eigene Bestellung rechts mitlaufend */
@media (min-width: 1100px) {
  main.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 24px; align-items: start; max-width: 1204px; }
  main.split > * { grid-column: 1; }
  main.split #daybody, main.split .builder { display: contents; }
  main.split .b-main { grid-column: 1; }
  main.split .b-side {
    grid-column: 2; grid-row: 1 / span 6; position: sticky; top: calc(60px + env(safe-area-inset-top));
    max-height: calc(100vh - 76px); overflow: auto; overscroll-behavior: contain; padding-bottom: 8px;
  }
  main.split .b-side #cart { margin-top: 0; }
}

/* Sicherheitsmeldungen (Start, Admins) */
.alert-card { background: var(--error-container); color: var(--on-error-container); margin-bottom: 12px; }
.alert-card .row > .i { flex: none; }

/* Feedback */
.fb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-answer { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; padding: 6px 10px; border-radius: var(--r-sm, 10px);
  background: var(--secondary-container); color: var(--on-secondary-container); font-size: 13px; white-space: pre-wrap; }
.fb-answer .i { flex: none; margin-top: 1px; }
.item.fb { align-items: flex-start; }

/* Speisekarte */
.menu .cat { margin: 16px 4px 6px; font-size: 13px; font-weight: 600; color: var(--on-surface-variant); }
.prod { display: flex; align-items: center; gap: 10px; padding: 10px 8px 10px 14px; }
.prod + .prod { border-top: 1px solid var(--outline-variant); }
.prod .body { flex: 1; min-width: 0; }
.prod .name { font-weight: 500; }
.prod .desc { font-size: 12px; color: var(--on-surface-variant); }
.prod .price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prod .price.unknown { color: var(--on-surface-variant); font-weight: 500; font-size: 12px; }
.prod .count { min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px; background: var(--primary); color: var(--on-primary); font-size: 12px; font-weight: 700; text-align: center; line-height: 22px; }
.last-order { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--tertiary-container); color: var(--on-tertiary-container); }
.last-order .body { flex: 1; min-width: 0; font-size: 13px; }

/* Optionen im Sheet */
.optgroup { margin-bottom: 14px; }
.optgroup .gname { font-size: 13px; font-weight: 600; margin: 0 2px 6px; display: flex; gap: 6px; align-items: center; }
.optgroup .chip { height: 34px; }

/* Admin-Tagesübersicht */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stat { background: var(--surface-low); border-radius: var(--r-md); padding: 8px 10px; }
.stat b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.stat span { font-size: 11.5px; color: var(--on-surface-variant); }
@media (max-width: 420px) { .stat b { font-size: 16px; } .stat { padding: 8px; } }
.summary .item { min-height: 40px; }
.summary .qty { width: 34px; height: 28px; border-radius: 8px; flex: none; background: var(--primary-container); color: var(--on-primary-container); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.orow { padding: 10px 12px 10px 14px; }
.orow + .orow { border-top: 1px solid var(--outline-variant); }
.orow .top { display: flex; align-items: center; gap: 10px; }
.orow .name { font-weight: 600; }
.orow .lines { margin: 4px 0 0 46px; font-size: 13px; }
.orow .line { display: flex; gap: 8px; }
.orow .line .grow { color: var(--on-surface); }
.orow .line .opts { color: var(--on-surface-variant); }
.orow .flags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0 46px; }
.orow.done { background: color-mix(in srgb, var(--success-container) 25%, transparent); }
.orow.cancel { opacity: .5; }
.price-q { border: 1px dashed var(--outline); border-radius: 6px; padding: 0 6px; background: transparent; color: var(--error); font-weight: 600; cursor: pointer; }

/* Geld */
.owe { border-radius: var(--r-lg); padding: 14px 16px; background: var(--surface-container); }
.owe.due { background: var(--error-container); color: var(--on-error-container); }
.owe.credit { background: var(--success-container); color: var(--on-success-container); }
.owe .amount { font-size: 28px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; line-height: 1.2; }
.owe .payinfo { margin-top: 10px; display: grid; gap: 6px; }
.payline { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 60%, transparent); color: var(--on-surface); font-size: 13px; }
.payline .grow { overflow-wrap: anywhere; }
.payline .k { font-size: 11px; color: var(--on-surface-variant); display: block; }
.qr { display: flex; justify-content: center; padding: 12px; background: #fff; border-radius: var(--r-md); margin-top: 8px; }
.qr img, .qr svg { width: 200px; height: 200px; image-rendering: pixelated; }
.amount-pos { color: var(--error); }
.amount-neg { color: var(--success); }

/* Katalog */
.rcard { display: flex; align-items: center; gap: 12px; }
.rcard .swatch { width: 40px; height: 40px; border-radius: 12px; background: var(--accent, var(--primary-container)); display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.colors { display: flex; gap: 8px; flex-wrap: wrap; }
.colors button { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.colors button.on { border-color: var(--on-surface); box-shadow: inset 0 0 0 2px var(--surface); }
.optrow { display: grid; grid-template-columns: 1fr 86px 36px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.optrow .input { height: 36px; }

/* Sonstiges */
.kbd-note { font-size: 12px; color: var(--on-surface-variant); }
.pad-top { padding-top: 8px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--outline-variant); margin: 0 -16px 12px; padding: 0 16px; position: sticky; top: calc(56px + env(safe-area-inset-top)); background: var(--surface); z-index: 5; }
.tabs button { flex: 1; height: 44px; border: 0; background: transparent; font-weight: 500; color: var(--on-surface-variant); position: relative; }
.tabs button.on { color: var(--primary); font-weight: 600; }
.tabs button.on::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }

/* ---------- Foto-Karten (Restaurant-Bild) ----------
   Bild im Hintergrund, darüber drei Blur-Ebenen mit versetzten Masken:
   oben scharf, ab dem Text nach unten zunehmend weich + dunkler Verlauf für Lesbarkeit. */
.photo { position: relative; overflow: hidden; isolation: isolate; background: #2a211d; color: #fff; }
.photo > .ph { position: absolute; inset: 0; pointer-events: none; }
.photo > .ph-bg { background-position: center; background-size: cover; transform: scale(1.02); z-index: -5; }
.photo > .ph-blur { -webkit-backdrop-filter: blur(var(--b)); backdrop-filter: blur(var(--b)); z-index: -4; }
.photo > .ph-blur.b1 { --b: 2px;  -webkit-mask-image: linear-gradient(to bottom, transparent var(--s1, 22%), #000 var(--e1, 40%)); mask-image: linear-gradient(to bottom, transparent var(--s1, 22%), #000 var(--e1, 40%)); }
.photo > .ph-blur.b2 { --b: 7px;  -webkit-mask-image: linear-gradient(to bottom, transparent var(--s2, 34%), #000 var(--e2, 55%)); mask-image: linear-gradient(to bottom, transparent var(--s2, 34%), #000 var(--e2, 55%)); }
.photo > .ph-blur.b3 { --b: 16px; -webkit-mask-image: linear-gradient(to bottom, transparent var(--s3, 46%), #000 var(--e3, 72%)); mask-image: linear-gradient(to bottom, transparent var(--s3, 46%), #000 var(--e3, 72%)); }
.photo > .ph-shade { z-index: -3; background: linear-gradient(to bottom, rgba(0,0,0,0) 18%, rgba(0,0,0,.28) 45%, rgba(0,0,0,.66) 100%); }
.photo .muted, .photo .t-small.muted { color: rgba(255,255,255,.78); }
.photo a:not(.btn) { color: #fff; }

.hero.photo { display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; padding-top: 150px; }
.hero.photo::before { z-index: 1; }
.hero.photo h2 { font-size: 28px; line-height: 34px; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.hero.photo .kicker, .hero.photo .meta { opacity: 1; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
.hero.photo .mine { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero.photo .mine .muted { color: rgba(255,255,255,.75); }
.hero.photo .btn.outlined { color: #fff; border-color: rgba(255,255,255,.7); }
.hero.photo .pill.ok, .hero.photo .pill.bad, .hero.photo .pill.warn { box-shadow: 0 0 0 1px rgba(255,255,255,.15); }

/* Tages-Kopf mit Bild */
.dayhead.photo { border-radius: var(--r-lg); padding: 110px 14px 14px; margin-bottom: 10px; min-height: 200px; justify-content: flex-end;
  --s1: 18%; --e1: 38%; --s2: 30%; --e2: 55%; --s3: 45%; --e3: 75%; }
.dayhead.photo .meta { color: rgba(255,255,255,.92); }
.dayhead.photo .t-title { font-size: 18px; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* Restaurant-Seite: Bild-Banner bzw. Platzhalter */
.banner { border-radius: var(--r-lg); min-height: 180px; display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; padding: 12px; margin-bottom: 12px; }
.banner .btn { background: rgba(0,0,0,.45); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.banner-empty {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 110px; margin-bottom: 12px;
  border: 2px dashed var(--outline-variant); border-radius: var(--r-lg); color: var(--on-surface-variant); font-weight: 500; cursor: pointer;
}
.rcard .swatch.img { background-size: cover; background-position: center; }
.dayhead .meta a, .rinfo a { text-decoration: none; }