/* Mahlzeit – gemeinsame Gestaltung für Shop, Restaurant- und Adminbereich.
   Schriften liegen lokal (keine Google-Fonts-Anfragen → DSGVO). */
@font-face { font-family: "Bricolage"; src: url("/static/fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/static/fonts/atkinson-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/static/fonts/atkinson-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Schussenblau als Markenfarbe, Senfgelb für den Warenkorb – Rest ruhig. */
  --ink: #14213d;
  --ink-soft: #4a5672;
  --blue: #2457c5;
  --blue-strong: #1b45a1;
  --blue-wash: #e8eefb;
  --mustard: #e8a317;
  --mustard-ink: #3d2a00;
  --paprika: #c8402e;
  --paprika-wash: #fbe9e6;
  --herb: #2f7d4f;
  --herb-wash: #e4f3ea;
  --paper: #f5f7fb;
  --surface: #ffffff;
  --line: #dbe1ec;
  --focus: #2457c5;

  --font-display: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --font-body: "Atkinson", "Segoe UI", system-ui, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: clamp(2.6rem, 7vw, 4.6rem);

  --r-input: 10px;
  --r-panel: 16px;
  --shadow-lift: 0 1px 2px rgba(20, 33, 61, .06), 0 8px 24px rgba(20, 33, 61, .08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e9eefb; --ink-soft: #a5b1cc; --blue: #7aa2ff; --blue-strong: #9bb8ff; --blue-wash: #1c2a4a;
    --mustard: #f2b632; --mustard-ink: #2a1d00; --paprika: #ff8a78; --paprika-wash: #3a1e1b;
    --herb: #6fcf97; --herb-wash: #173326; --paper: #0e1526; --surface: #17213a; --line: #2a3756; --focus: #9bb8ff;
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #e9eefb; --ink-soft: #a5b1cc; --blue: #7aa2ff; --blue-strong: #9bb8ff; --blue-wash: #1c2a4a;
  --mustard: #f2b632; --mustard-ink: #2a1d00; --paprika: #ff8a78; --paprika-wash: #3a1e1b;
  --herb: #6fcf97; --herb-wash: #173326; --paper: #0e1526; --surface: #17213a; --line: #2a3756; --focus: #9bb8ff;
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5;
}
h1, h2, h3, .display { font-family: var(--font-display); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 .5em; }
h1 { font-size: var(--step-3); font-weight: 750; }
h2 { font-size: var(--step-2); font-weight: 700; }
h3 { font-size: var(--step-1); font-weight: 650; }
p { margin: 0 0 1em; max-width: 68ch; }
a { color: var(--blue); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.nowrap { white-space: nowrap; }
.num, .price { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Bedienelemente ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: .55em 1.2em; border-radius: 999px; border: 1.5px solid transparent;
  font: 700 var(--step-0)/1.2 var(--font-body); cursor: pointer; text-decoration: none;
  background: var(--blue); color: #fff;
}
:root[data-theme="dark"] .btn, .btn { -webkit-tap-highlight-color: transparent; }
.btn:hover { background: var(--blue-strong); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.secondary { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--ink-soft); }
.btn.ghost { background: transparent; color: var(--blue); padding-inline: .6em; }
.btn.danger { background: var(--paprika); color: #fff; }
.btn.good { background: var(--herb); color: #fff; }
.btn.cart { background: var(--mustard); color: var(--mustard-ink); }
.btn.block { width: 100%; }
.btn.big { min-height: 56px; font-size: var(--step-1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:not(.secondary):not(.ghost):not(.cart) { color: #0e1526; } }
:root[data-theme="dark"] .btn:not(.secondary):not(.ghost):not(.cart) { color: #0e1526; }

label { display: block; font-weight: 700; margin-bottom: .3em; }
.field { margin-bottom: 1rem; }
.field .hint { font-weight: 400; color: var(--ink-soft); font-size: var(--step--1); }
input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number],
input[type=date], input[type=time], input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: .55em .8em; border: 1.5px solid var(--line); border-radius: var(--r-input);
  background: var(--surface); color: var(--ink); font: inherit;
}
textarea { min-height: 88px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px var(--blue-wash); }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 160px; }
.check { display: flex; gap: .6em; align-items: flex-start; font-weight: 400; }
.check input { width: 20px; height: 20px; margin-top: .15em; accent-color: var(--blue); flex: none; }

/* Umschalter mit zwei bis drei Möglichkeiten (z. B. Lieferung/Abholung) */
.segmented { display: inline-flex; background: var(--blue-wash); border-radius: 999px; padding: 4px; gap: 4px; }
.segmented button { border: 0; background: transparent; color: var(--ink); font: 700 var(--step--1) var(--font-body); padding: .55em 1.1em; border-radius: 999px; cursor: pointer; min-height: 38px; }
.segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-lift); }

.badge { display: inline-block; padding: .15em .65em; border-radius: 999px; font-size: var(--step--1); font-weight: 700; background: var(--blue-wash); color: var(--ink); }
.badge.open { background: var(--herb-wash); color: var(--herb); }
.badge.closed { background: var(--paprika-wash); color: var(--paprika); }
.badge.warn { background: #fff3d6; color: #7a5200; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge.warn { background: #3a2c08; color: var(--mustard); } }
:root[data-theme="dark"] .badge.warn { background: #3a2c08; color: var(--mustard); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); padding: 1.25rem; }
.notice { padding: .8rem 1rem; border-radius: var(--r-input); background: var(--blue-wash); margin-bottom: 1rem; }
.notice.error { background: var(--paprika-wash); color: var(--paprika); }
.notice.ok { background: var(--herb-wash); color: var(--herb); }

/* Dialoge */
dialog { border: 0; border-radius: var(--r-panel); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  background: var(--surface); color: var(--ink); box-shadow: 0 24px 64px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(14, 21, 38, .55); }
dialog .dlg-body { padding: 1.25rem 1.25rem .5rem; overflow: auto; max-height: calc(100dvh - 160px); }
dialog .dlg-foot { padding: 1rem 1.25rem 1.25rem; display: flex; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--line); }
@media (max-width: 600px) {
  dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--r-panel) var(--r-panel) 0 0; }
}

/* Hinweis-Toast unten */
#toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { background: var(--ink); color: var(--paper); padding: .8rem 1rem; border-radius: var(--r-input); box-shadow: var(--shadow-lift); }
.toast.error { background: var(--paprika); color: #fff; }

table.data { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
table.data th { text-align: left; color: var(--ink-soft); font-weight: 700; padding: .5rem; border-bottom: 1.5px solid var(--line); }
table.data td { padding: .6rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr.clickable { cursor: pointer; }
table.data tr.clickable:hover td { background: var(--blue-wash); }
@media (max-width: 700px) {
  table.data.stack thead { display: none; }
  table.data.stack tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  table.data.stack td { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .2rem .5rem; }
  table.data.stack td::before { content: attr(data-label); color: var(--ink-soft); font-weight: 700; }
}

.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; }
.wordmark span { color: var(--blue); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }