/*
 * ============================================================================
 * goeat design tokens — THE single source of truth for the whole platform.
 * Palette & feel modelled on Lieferando (warm cream + orange, friendly, rounded).
 * RULE: colors, spacing, radius, shadow and type live ONLY here. Never hardcode
 * a hex or a px spacing value in a component/template — reach for a token or a
 * utility class (.mt-4, .p-3, …). Enforced by bin/check-styles. See CLAUDE.md.
 * ============================================================================
 */
:root {
    /* Brand — goeat red on the warm Lieferando-style cream/ink neutrals */
    --brand: #e23744;
    --brand-dark: #c01f2c;
    --brand-tint: #fdecef;
    --brand-bright: #f5455a;
    --brand-contrast: #ffffff;

    /* Ink & neutrals — warm greys on a cream page */
    --ink: #2b2a28;
    --ink-soft: #4a4642;
    --muted: #6f6a63;
    --line: #ece7df;
    --line-strong: #ddd5c9;
    --bg: #f6f3ef;
    --card: #ffffff;

    /* Refinement "1a Aufgeräumt" neutrals — the hairline-list language.
       These are the ONLY place these values may appear; never write the hex. */
    --tint-row: #faf8f5;    /* row hover · selected row · summary/footer band · calm urgency band */
    --fill-muted: #efece6;  /* inert fill: empty thumb box, disabled CTA, "Heute aus" badge, tab hover */
    --muted-soft: #a89f92;  /* glyph/label ON --fill-muted (placeholder icon, disabled CTA text) */
    --faint: #c9c0b3;       /* drag handles / grips — quieter than --muted, still visible */
    --danger-line: #f0c9c8; /* 1px border of an error summary box (danger tint + hairline) */
    --brand-soft: #f0a6ac;  /* a LIGHT-load bar on the order board's load strip — quieter
                               than --brand so a full window still reads as the loud one */
    --info-line: #d5e0f3;   /* 1px border under an info band (e.g. driver "unterwegs seit …") */

    /* ON AN --ink BAND (home pitch, partner deal band, driver topbar) the hairlines,
       fills and text levels are white at low alpha. Declared once here so the three
       dark surfaces stay in sync — never write these rgba() values in a component. */
    --on-dark-line: rgba(255, 255, 255, .16);       /* divider between dark cells */
    --on-dark-line-soft: rgba(255, 255, 255, .12);  /* row hairline inside a dark cell */
    --on-dark-fill: rgba(255, 255, 255, .14);       /* icon-button fill on dark */
    --on-dark-fill-hover: rgba(255, 255, 255, .22);
    --on-dark-text: rgba(255, 255, 255, .82);       /* body copy on dark */
    --on-dark-muted: rgba(255, 255, 255, .7);       /* secondary copy on dark */

    /* Semantic states, each with a soft tint for backgrounds */
    --ok: #2b7836;
    --ok-tint: #e6f1e8;
    --warn: #b07d0a;
    --warn-tint: #fbf3df;
    --info: #2563c9;
    --info-tint: #e7eefb;
    --danger: #cc0300;
    --danger-tint: #fdecec;

    /* Corner radius scale — 1a tightened it one step (rounded rectangles, not pills) */
    --r-lg: 16px;
    --r: 10px;
    --r-md: 8px;   /* thumbs, segmented tracks, row actions, .btn-sm, preset tiles */
    --r-sm: 6px;
    --pill: 999px; /* status badges, counters, qty/availability switches — NOT buttons */

    /* Elevation */
    --shadow-sm: 0 1px 2px rgba(43, 42, 40, .06);
    --shadow: 0 2px 6px rgba(43, 42, 40, .06), 0 10px 24px rgba(43, 42, 40, .05);
    --shadow-lg: 0 12px 28px rgba(43, 42, 40, .12), 0 2px 8px rgba(43, 42, 40, .08);
    --shadow-seg: 0 1px 2px rgba(43, 42, 40, .10);   /* active segment of a segmented control */
    --shadow-bar: 0 -6px 20px rgba(43, 42, 40, .08); /* fixed bottom order bar (upward cast) */
    --shadow-danger: 0 2px 6px rgba(204, 3, 0, .10); /* overdue kitchen ticket (danger-tinted lift) */

    /* Spacing scale (4px base) — use via --space-* or the .mt-/.mb-/.p-/.gap- utilities */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;

    /* Type scale */
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.5rem;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* List rows & figures (1a) — repeating things are rows in ONE bordered container,
       numbers live in a right-aligned column and are always tabular. */
    --row-y: 12px;          /* vertical padding of a list row */
    --row-x: 18px;          /* horizontal padding of a list row (14px on mobile, see @media) */
    --bar-h: 62px;          /* sticky bar height (topbar / order bar) — sticky offsets derive from it */
    --num: tabular-nums;    /* always via font-variant-numeric, or the .num utility */

    /* Motion, layout, type family */
    --t: .18s cubic-bezier(.4, 0, .2, 1);
    --maxw: 1140px;
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --gradient-brand: linear-gradient(135deg, #f5455a, #e23744);

    /* Third-party brand colours (PayPal must look like PayPal) + decorative cover */
    --paypal: #0070ba;
    --paypal-dark: #005ea6;
    --paypal-navy: #003087;
    --cover-start: #ffe0e2;
    --gradient-cover: linear-gradient(135deg, var(--cover-start), var(--brand-tint));
    /* legibility wash laid over a restaurant cover photo so the logo/name read */
    --scrim-cover: linear-gradient(180deg, rgba(43, 42, 40, 0) 40%, rgba(43, 42, 40, .35));

    /* Back-compat aliases — resolve older var(--primary)/var(--border) uses to the
       real tokens. Do NOT add new usages; use --brand / --line directly. */
    --primary: var(--brand);
    --border: var(--line);
    /* Descriptive aliases for the 1a neutrals (same values, either name works). */
    --surface-2: var(--fill-muted);
    --handle: var(--faint);
}

/* Row padding tightens on phones (README: --row-x is 14px on mobile). Declared here
   so every list row shrinks together instead of each component repeating the value. */
@media (max-width: 819px) {
    :root { --row-x: 14px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    /* Guard against phantom horizontal scroll from full-bleed decorative
       washes / box-shadows on mobile. `clip` (not `hidden`) doesn't create a
       scroll container, so the sticky topbar keeps working. */
    overflow-x: clip;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; font-weight: 700; }
h1 { font-size: 1.75rem; letter-spacing: -.02em; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
small, .small { font-size: var(--text-sm); }
.muted { color: var(--muted); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 700; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.page { padding: 24px 0 80px; }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.tight { gap: 6px; }
.justify-end { justify-content: flex-end; }
.spacer { flex: 1; }

/* ---------- top bar ---------- */
.topbar {
    background: rgba(255, 255, 255, .9);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.topbar .inner {
    display: flex;
    align-items: center;
    gap: 14px;
    /* min-height, not a fixed height: if the nav ever wraps anyway — one more nav
       item, a longer locale, a larger font — the bar grows with it instead of
       letting the wrapped row spill out over the page below. */
    min-height: 62px;
    max-width: calc(var(--maxw) + 160px);
    margin: 0 auto;
    padding: 0 20px;
}
.brand {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--brand);
    letter-spacing: -.03em;
    /* The wordmark is larger than the nav links; flex centres by box, so its
       baseline optically sits low. Nudge it up a hair to read inline. */
    position: relative;
    top: -2px;
}
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.nav a { color: var(--ink-soft); padding: 8px 10px; border-radius: var(--r-sm); font-weight: 500; white-space: nowrap; transition: background var(--t), color var(--t); }
.nav a:hover { background: var(--bg); text-decoration: none; }
.nav a.active { background: var(--brand-tint); color: var(--brand-dark); }

/* Settings-group dropdown in the manage nav (native <details>, no JS needed to open) */
.nav-drop { position: relative; }
.nav-drop summary {
    list-style: none; cursor: pointer; user-select: none;
    color: var(--ink-soft); padding: 8px 12px; border-radius: var(--r-sm);
    font-weight: 500; transition: background var(--t), color var(--t);
    display: inline-flex; align-items: center; gap: 4px;
}
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary:hover { background: var(--bg); }
.nav-drop summary.active { background: var(--brand-tint); color: var(--brand-dark); }
.nav-drop[open] summary { background: var(--bg); }
.nav-caret { font-size: var(--text-xs); opacity: .6; transition: transform var(--t); }
.nav-drop[open] .nav-caret { transform: rotate(180deg); }
.nav-drop-panel {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 220px; padding: 6px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: var(--r); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; gap: 2px;
}
.nav-drop-panel a { display: flex; align-items: center; gap: var(--space-2); padding: 10px 12px; border-radius: var(--r-sm); color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.nav-drop-panel a .ico { color: var(--muted); vertical-align: baseline; }
.nav-drop-panel a.active .ico { color: var(--brand); }
.nav-drop-panel a:hover { background: var(--bg); text-decoration: none; }
.nav-drop-panel a.active { background: var(--brand-tint); color: var(--brand-dark); }

/* Right-hand actions cluster (view page · locale · logout) — never splits across rows. */
.topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; flex-shrink: 0; }
.topbar-actions .nav { flex-wrap: nowrap; }

/* Mid widths: the full desktop nav gets cramped between the brand and the actions.
   Drop the whole nav onto its own full-width second row so row 1 stays clean
   (brand left · actions right) and nothing wraps raggedly. Mobile (≤600px) is
   untouched — the desktop nav is hidden there and the tabbar takes over.

   The bound is 1300px because a DRAFT restaurant carries an extra "Einrichtung"
   item: its nav needs ~1296px on one row, against ~1172px once the restaurant is
   live. The old 1180px bound was measured on the live nav, so every draft owner
   between 1181px and 1295px — 1280px laptops included — got a nav that wrapped to
   a second row INSIDE the fixed-height bar and spilled out over the page. */
@media (min-width: 601px) and (max-width: 1300px) {
    .topbar .inner { flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; row-gap: 8px; }
    .topbar .nav.hide-mobile { order: 3; flex-basis: 100%; width: 100%; }
    .topbar .nav a, .nav-drop summary { padding: 7px 9px; }
}

/* Settings-group secondary nav — a scrollable chip row shown on every settings page,
   the standard companion to the desktop settings dropdown (and the way in on mobile). */
.subnav {
    display: flex; gap: 6px; align-items: center;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-5); padding-bottom: 4px;
    scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
    flex: 0 0 auto; white-space: nowrap;
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 8px 13px; border-radius: var(--pill);
    background: var(--card); border: 1px solid var(--line);
    color: var(--ink-soft); font-weight: var(--fw-medium); font-size: var(--text-sm);
    text-decoration: none; transition: background var(--t), color var(--t), border-color var(--t);
}
.subnav a:hover { background: var(--bg); text-decoration: none; }
.subnav a.active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.subnav a .ico { color: var(--muted); vertical-align: baseline; }
.subnav a.active .ico { color: var(--brand); }

/* inline SVG icons — baseline-align inside text, inherit color from parent */
.ico { flex: 0 0 auto; vertical-align: -3px; }

/* cart icon button with count bubble */
.cart-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    height: 42px; width: 42px; border-radius: 50%; color: var(--ink);
    transition: background var(--t);
}
.cart-btn:hover { background: var(--bg); text-decoration: none; }
.cart-bubble {
    position: absolute; top: -1px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: var(--pill); background: var(--brand); color: var(--brand-contrast);
    font-size: var(--text-xs); font-weight: var(--fw-bold); line-height: 19px; text-align: center;
    box-shadow: 0 0 0 2px var(--card);
}
.cart-bubble:empty { display: none; }

/* compact language dropdown (native details/summary — no JS) */
.lang-dd { position: relative; }
.lang-dd summary {
    list-style: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
    padding: 8px 10px; border-radius: var(--pill); font-size: var(--text-sm); font-weight: var(--fw-semibold);
    color: var(--ink-soft); transition: background var(--t);
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover { background: var(--bg); }
.lang-dd[open] summary { background: var(--bg); }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 160px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.lang-menu a { padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink); font-weight: var(--fw-medium); font-size: var(--text-sm); }
.lang-menu a:hover { background: var(--bg); text-decoration: none; }
.lang-menu a.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: var(--fw-bold); }

/* ---------- mobile hamburger menu (customer topbar, ≤600px only) ---------- */
.show-mobile { display: none; }
.mobile-menu { position: relative; }
.mobile-menu summary { list-style: none; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    width: 40px; height: 40px; margin-left: -6px; border-radius: var(--r-sm); color: var(--ink);
    transition: background var(--t);
}
.mobile-menu-btn:hover, .mobile-menu[open] .mobile-menu-btn { background: var(--bg); }
.mobile-menu-panel {
    position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.mobile-menu-panel a {
    display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: var(--r-sm);
    color: var(--ink); font-weight: var(--fw-semibold); font-size: var(--text-base);
}
.mobile-menu-panel a:hover { background: var(--bg); text-decoration: none; }
.mobile-menu-panel a.active { background: var(--brand-tint); color: var(--brand-dark); }
.mobile-menu-panel a .ico { color: var(--muted); flex: 0 0 auto; }
.mobile-menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.mobile-menu-label { padding: 2px 12px 4px; font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---------- cards ---------- */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px;
    box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; }
.card-head h2, .card-head h3 { margin: 0; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; transition: transform var(--t), box-shadow var(--t); }
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.stat .n { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.stat .n.hot { color: var(--brand); } /* single attention-grabbing KPI (e.g. new orders) */
.stat .l { color: var(--muted); font-size: .9rem; }
/* non-clickable KPI tiles: no hover lift (they aren't links) */
.stat.static { cursor: default; }
.stat.static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* restaurant dashboard */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-head h1 { margin: 0 0 2px; }
.dash-activate { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.dash-activate .da-main h2 { margin: 0 0 4px; }
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.checklist li:last-child { border-bottom: 0; }
.ck-mark { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; font-weight: 700; flex: none; }
.checklist li.ok .ck-mark { background: var(--ok-tint); color: var(--ok); }
.checklist li.todo .ck-mark { background: var(--warn-tint); color: var(--warn); }
.ck-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ck-body .chip { margin-left: 4px; }

/* 7-day trend mini-chart (dashboard) */
.trend-card { margin-bottom: var(--space-5); }
.trend-svg { display: block; width: 100%; height: 88px; overflow: visible; }
.trend-bar { fill: var(--line-strong); transition: fill var(--t); }
.trend-bar:hover { fill: var(--muted); }
.trend-bar.is-today { fill: var(--brand); }
.trend-bar.is-today:hover { fill: var(--brand-bright); }
.trend-axis { display: flex; margin-top: var(--space-2); }
.trend-day { flex: 1; text-align: center; font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.trend-day.is-today { color: var(--brand); font-weight: var(--fw-semibold); }

/* ---------- buttons ----------
   1a: buttons are rounded RECTANGLES, not pills — var(--r) (10px) by default and on
   .btn-lg, var(--r-md) (8px) on .btn-sm. Every variant below keeps working; only the
   geometry and the hover/pressed/focus states changed. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r);
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink);
    font-weight: 650;
    font-size: .95rem;
    cursor: pointer;
    transition: transform var(--t), background var(--t), color var(--t), box-shadow var(--t), border-color var(--t);
    text-decoration: none;
    line-height: 1.2;
}
.btn:hover { text-decoration: none; box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.98); }
/* focus is always the brand ring at +2px — never the UA default ring */
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-contrast); box-shadow: 0 6px 16px rgba(226, 55, 68, .32); }
.btn-primary:active { background: var(--brand-dark); border-color: var(--brand-dark); box-shadow: none; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--bg); box-shadow: none; }
.btn-ghost:active { background: var(--brand-tint); color: var(--brand-dark); }
.btn-outline { background: var(--card); }
/* outlined = brand border + brand-dark label on hover, brand-tint fill when pressed */
.btn-outline:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-outline:active { background: var(--brand-tint); border-color: var(--brand); color: var(--brand-dark); }
.btn-danger { background: #fff; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
/* filled-green action (the driver's "Zugestellt") — there is no --ok-dark token,
   so the hover/pressed state darkens the same green instead of inventing a hex. */
.btn-ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-ok:hover { background: var(--ok); border-color: var(--ok); color: #fff; filter: brightness(.92); }
.btn-paypal { background: var(--paypal); border-color: var(--paypal); color: #fff; }
.btn-paypal:hover { background: var(--paypal-dark); border-color: var(--paypal-dark); color: #fff; box-shadow: 0 6px 16px rgba(0, 112, 186, .35); }
.btn-paypal .pp-logo { color: #fff; }
.pp-logo { font-weight: 800; font-style: italic; letter-spacing: -.3px; color: var(--paypal-navy); }
.ic-paypal { color: var(--paypal); display: inline-flex; }
.pp-steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pp-steps li { position: relative; padding: 0 0 18px 42px; counter-increment: step; line-height: 1.5; }
.pp-steps li::before { content: counter(step); position: absolute; left: 0; top: -1px; height: 28px; width: 28px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 700; }
.pp-steps li:last-child { padding-bottom: 0; }
.btn-sm { padding: 7px 14px; font-size: var(--text-sm); border-radius: var(--r-md); }
.btn-lg { padding: 15px 24px; font-size: 1.05rem; border-radius: var(--r); }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn:disabled:hover { box-shadow: none; }

/* ---- panel chrome: page head + its tool buttons ----------------------------
   Shared by the kitchen board (/manage/orders) and the menu editor (/manage/menu):
   title block left, tool buttons right. Declared ONCE here, used by both. */
.phead { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: 18px; }
.phead-titles { min-width: 0; }
.phead-h1 { margin: 0; font-size: 1.625rem; line-height: 1.15; letter-spacing: -.025em; font-weight: var(--fw-bold); }
.phead-sub { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); font-variant-numeric: var(--num); }
.phead form { margin: 0; }

/* square-ish tool button used across the panel heads */
.btn.btn-tool { padding: 9px 14px; border-radius: var(--r-md); font-size: var(--text-sm); font-weight: var(--fw-semibold); gap: 7px; }
.btn.btn-tool:hover { border-color: var(--ink); box-shadow: none; }
.btn.btn-primary.btn-tool { font-weight: var(--fw-bold); }
.btn.btn-primary.btn-tool:hover { border-color: var(--brand-dark); }

/* icon-only square button (rename pencil, overflow ⋮) */
.icon-btn { display: inline-grid; place-items: center; height: 34px; width: 34px; flex: 0 0 auto; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); cursor: pointer; transition: border-color var(--t), color var(--t); }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.icon-btn-sm { height: 30px; width: 30px; }
summary.icon-btn { list-style: none; }
summary.icon-btn::-webkit-details-marker { display: none; }

/* overflow menu — a plain <details>, so it also works with JS off */
.ovm { position: relative; }
.ovm > summary { list-style: none; cursor: pointer; }
.ovm > summary::-webkit-details-marker { display: none; }
.ovm-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 200px; padding: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; }
.ovm-panel form { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ovm-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 9px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--ink-soft); font: inherit; font-weight: var(--fw-semibold); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; }
.ovm-item:hover { background: var(--tint-row); color: var(--ink); text-decoration: none; }
.ovm-item:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ovm-item .ico { flex: 0 0 auto; color: var(--muted); }
.ovm-item.is-up .ico { transform: rotate(180deg); }
.ovm-item.is-danger { color: var(--danger); }
.ovm-item.is-danger .ico { color: var(--danger); }
.ovm-item.is-danger:hover { background: var(--danger-tint); color: var(--danger); }
.ovm-item:disabled { opacity: .4; cursor: not-allowed; }
.ovm-item:disabled:hover { background: none; color: var(--ink-soft); }
/* shown only where the head buttons are folded away (≤819px) */
.ovm-panel .only-narrow { display: none; }

/* ---- kicker: the small uppercase label above a heading (partner + wizard) ---- */
.kicker { display: block; font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-dark); }
.kicker-muted { display: block; font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-variant-numeric: var(--num); }

/* ---------- forms ---------- */
.form-row { margin-bottom: 16px; }
.form-row-narrow input { max-width: 140px; }
.form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=tel], input[type=url], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line-strong);
    /* fields stay at 8px (--r-md) — the tightened --r-sm (6px) is for chips/badges */
    border-radius: var(--r-md);
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
    color: var(--ink);
    transition: border-color var(--t), box-shadow var(--t);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
}
textarea { min-height: 90px; resize: vertical; }
.help { color: var(--muted); font-size: .82rem; margin-top: 4px; }
.checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox input { width: auto; }
/* 1a validation: the error sits AT the field — 1.5px danger border + a tinted ring,
   message with an alert icon. (Checkout repeats it above the submit as .co-errsum.) */
.form-row input.is-error,
.form-row select.is-error,
.form-row textarea.is-error { border: 1.5px solid var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.field-error { display: flex; align-items: center; gap: 6px; margin-top: 5px; font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--danger); }
.field-error .ico { flex: 0 0 auto; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px; margin: 0 0 16px; }
legend { font-weight: 700; padding: 0 8px; }

/* ---------- tables ---------- */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* ---------- badges / chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--pill); font-size: .76rem; font-weight: 700; }
.badge-new { background: var(--brand-tint); color: var(--brand-dark); }
.badge-received { background: var(--info-tint); color: var(--info); }
.badge-in_progress { background: var(--warn-tint); color: var(--warn); }
.badge-done { background: var(--ok-tint); color: var(--ok); }
.badge-delivered { background: var(--ok-tint); color: var(--ok); }
.badge-cancelled { background: var(--line); color: var(--muted); }
.badge-paid { background: var(--ok-tint); color: var(--ok); }
.badge-pending { background: var(--warn-tint); color: var(--warn); }
.badge-failed { background: var(--danger-tint); color: var(--danger); }
.badge-refunded { background: var(--info-tint); color: var(--info); }
/* Squared variant for a STATE chip sitting in a toolbar next to buttons — a pill
   there reads as a tag on the buttons rather than a status of its own. */
.badge-chip { border-radius: var(--r-md); padding: 6px 12px; font-size: var(--text-sm); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--pill); background: var(--bg); border: 1px solid var(--line); font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.chip-ok { background: var(--ok-tint); color: var(--ok); border-color: transparent; }

/* ---------- flash / alerts ---------- */
.alert { padding: 13px 16px; border-radius: var(--r-sm); margin-bottom: 16px; border: 1px solid transparent; font-size: .92rem; }
.alert-success { background: var(--ok-tint); color: var(--ok); border-color: var(--ok-tint); }
.alert-error { background: var(--danger-tint); color: var(--danger); border-color: var(--danger-tint); }
.alert-info { background: var(--info-tint); color: var(--info); border-color: var(--info-tint); }
.alert-warning { background: var(--warn-tint); color: var(--warn); border-color: var(--warn-tint); }
.flash-stack { position: fixed; top: 74px; right: 16px; z-index: 80; max-width: 360px; }
.flash-stack .alert { box-shadow: var(--shadow-lg); animation: slideIn .25s ease; }

/* ---------- auth ---------- */
.auth-wrap { max-width: 420px; margin: 56px auto; }
.auth-wrap .brand { display: block; text-align: center; font-size: 2.2rem; margin-bottom: 10px; }

/* ---------- address search (shared: settings + onboarding) ---------- */
.addr-search { display: flex; gap: 10px; align-items: stretch; max-width: 620px; margin: 0 auto; }
.addr-field {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: #fff; border-radius: var(--pill); padding: 4px 6px 4px 16px;
    box-shadow: var(--shadow-lg);
}
.addr-icon { font-size: 1.1rem; flex: 0 0 auto; }
.addr-field input {
    flex: 1; border: none; outline: none; background: transparent; box-shadow: none;
    font-size: 1.02rem; padding: 12px 4px; color: var(--ink);
}
.addr-field input:focus { box-shadow: none; }
.addr-gps {
    flex: 0 0 auto; height: 42px; width: 42px; border-radius: 50%; border: none; cursor: pointer;
    background: var(--bg); color: var(--brand); font-size: 1.25rem; line-height: 1;
    transition: background var(--t);
}
.addr-gps:hover { background: var(--brand-tint); }
.addr-search .btn-lg { border-radius: var(--pill); padding-left: 28px; padding-right: 28px; }
.addr-status { margin-top: 12px; font-size: .9rem; opacity: .95; min-height: 1.2em; }

/* address autocomplete dropdown */
.addr-field-wrap { flex: 1; position: relative; display: flex; }
/* typeahead attached to a normal full-width form input (settings location card):
   just an anchor for the absolutely-positioned .addr-suggest dropdown */
.addr-inline { position: relative; }
.addr-suggest {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60;
    background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg);
    overflow: hidden; text-align: left; padding: 6px;
}
.addr-suggest-item {
    display: flex; align-items: center; gap: 10px; width: 100%; border: none; background: transparent;
    padding: 12px; border-radius: var(--r-sm); cursor: pointer; font: inherit; color: var(--ink); text-align: left;
    transition: background var(--t);
}
.addr-suggest-item:hover, .addr-suggest-item.active { background: var(--brand-tint); }
.addr-suggest-item .as-pin { flex: 0 0 auto; opacity: .75; }
.addr-suggest-item .as-label { flex: 1; font-size: .95rem; line-height: 1.3; color: var(--ink); }

/* ============================================================================
 * RESTAURANT ORDERING PAGE (shop/restaurant.html.twig) — 1a "Aufgeräumt".
 * Hero + ONE fact line, the sticky category bar, and the menu list layout.
 * The dish CARD (.dish/.dishes) is gone: rows are the shared .menu-list/.menu-row.
 * ========================================================================== */

/* ---------- restaurant hero ---------- */
.r-hero { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--card); }
.r-hero .cover { position: relative; height: 180px; background: var(--gradient-cover); background-size: cover; background-position: center; }
.r-hero .cover::after { content: ""; position: absolute; inset: 0; background: var(--scrim-cover); }
.r-cover-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.r-hero .hbody { padding: 0 24px 14px; margin-top: 0; display: flex; gap: 18px; align-items: flex-end; position: relative; }
.r-hero .hmain { flex: 1; min-width: 0; }
.r-hero h1 { margin: 0; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -.025em; }
.r-desc { margin: 2px 0 0; font-size: var(--text-sm); color: var(--muted); }
.r-logo {
    height: 80px; width: 80px; margin-top: -44px; flex: 0 0 auto;
    border-radius: 12px; border: 4px solid var(--card); background: var(--card);
    box-shadow: var(--shadow-sm); overflow: hidden;
    display: grid; place-items: center; color: var(--muted);
}
.r-logo img { height: 100%; width: 100%; object-fit: cover; }
/* no cover photo → skip the tall empty band, keep a slim brand accent */
.r-hero.no-cover .cover { height: 10px; background: var(--gradient-brand); }
.r-hero.no-cover .cover::after { display: none; }
.r-hero.no-cover .hbody { padding-top: 20px; align-items: center; }
.r-hero.no-cover .r-logo { height: 68px; width: 68px; margin-top: 0; }

/* ONE fact line: open state · delivery · pickup · minimum, hairline-divided
   (replaces the old status pill + meta row + chip cloud). */
.r-facts { display: flex; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 14px; }
.r-fact { display: inline-flex; align-items: center; gap: 7px; padding: 12px 20px; font-size: var(--text-sm); color: var(--ink-soft); }
.r-fact .ico { color: var(--muted); flex: 0 0 auto; }
.r-fact strong { font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.r-fact.is-open { font-weight: var(--fw-bold); color: var(--ok); }
.r-fact.is-closed { font-weight: var(--fw-bold); color: var(--danger); }
.r-fact .dot { height: 8px; width: 8px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.r-fact-sep { width: 1px; height: 20px; background: var(--line); flex: 0 0 auto; }
.r-facts .spacer { flex: 1; }
.r-facts-more { display: inline-flex; align-items: center; gap: 6px; padding: 12px 20px; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-soft); cursor: pointer; }
.r-facts-more:hover { color: var(--brand-dark); }
/* the hours disclosure sits at the end of the row and takes its own line when open */
.r-facts .hours-details { margin: 0 0 0 auto; font-size: var(--text-sm); }
.r-facts .hours-details[open] { flex: 1 0 100%; margin-left: 0; padding: 0 20px 14px; }
.r-facts .hours-details[open] .r-facts-more { padding-left: 0; padding-right: 0; }

/* closed / paused notice */
.closed-bar {
    display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4);
    background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn-tint);
    border-radius: var(--r); padding: 13px 16px; font-size: var(--text-sm);
}
.closed-bar .ico { flex: 0 0 auto; }
.closed-bar .cb-next { display: block; font-weight: var(--fw-semibold); }

/* ---------- category tabs + in-menu search, one sticky line ---------- */
.catbar {
    position: sticky; top: 62px; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    margin-top: 20px; padding: 12px 0;
    border-bottom: 1px solid var(--line); background: var(--bg);
}
.catbar-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.catbar-tabs::-webkit-scrollbar { display: none; }
.catbar-tabs a { white-space: nowrap; padding: 8px 14px; border-radius: var(--r-md); font-weight: var(--fw-semibold); font-size: .9375rem; color: var(--ink-soft); transition: background var(--t), color var(--t); }
.catbar-tabs a:hover { background: var(--fill-muted); text-decoration: none; }
.catbar-tabs a.active { background: var(--ink); color: var(--card); }
.catbar-tabs a[hidden] { display: none; }
.catbar .spacer { flex: 1; }

.ms-field {
    display: flex; align-items: center; gap: 8px; background: var(--card);
    border: 1px solid var(--line-strong); border-radius: var(--r-md); padding: 0 12px;
    width: 260px; max-width: 100%; color: var(--muted);
    transition: border-color var(--t), box-shadow var(--t);
}
.ms-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.ms-field input { flex: 1; min-width: 0; border: none; background: transparent; box-shadow: none; padding: 9px 0; font-size: var(--text-sm); color: var(--ink); }
.ms-field input:focus { box-shadow: none; border: none; outline: none; }

/* ---------- menu list + order rail ---------- */
.menu-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-top: 28px; }
.menu-section { scroll-margin-top: 130px; margin-bottom: 32px; }
.menu-section-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.menu-section-h h2 { margin: 0; font-size: var(--text-xl); line-height: 1.15; letter-spacing: -.02em; font-weight: var(--fw-bold); }
.menu-section-note { font-size: var(--text-sm); color: var(--muted); }
.menu-noresults { text-align: center; color: var(--muted); padding: var(--space-8) 0; }
.menu-noresults p { margin: var(--space-2) 0 0; font-weight: var(--fw-semibold); }

/* ---------- restaurant page responsive ---------- */
@media (max-width: 1023px) {
    .menu-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
}
@media (max-width: 819px) {
    .menu-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    /* the topbar is 56px on phones */
    .catbar { top: 56px; gap: 10px; flex-wrap: wrap; }
    .catbar .spacer { display: none; }
    .catbar .ms-field { width: 100%; order: -1; }

    .r-hero .cover { height: 150px; }
    .r-hero .hbody { padding: 0 16px 12px; gap: 12px; }
    .r-logo { height: 64px; width: 64px; margin-top: -28px; border-width: 3px; }
    .r-hero.no-cover .r-logo { height: 56px; width: 56px; }
    .r-hero h1 { font-size: 1.25rem; line-height: 1.2; }
    .r-facts { gap: 4px 14px; margin-top: 8px; padding: 8px 16px 12px; }
    .r-fact { padding: 0; font-size: .8125rem; }
    .r-fact-sep { display: none; }
    .r-facts .hours-details[open] { padding: 0; }
    .r-facts-more { padding: 0; font-size: .8125rem; }

    .menu-section { margin-bottom: 24px; }
}
@media (max-width: 390px) {
    .r-hero h1 { font-size: 1.1875rem; }
    .menu-section-h h2 { font-size: var(--text-lg); }
}

/* menu-import review: item photo preview (hotlinked; removed on load error) */
.ri-thumb-cell { width: 68px; padding-right: 0 !important; }
.ri-thumb { width: 56px; height: 56px; border-radius: var(--r-sm); object-fit: cover; display: block; background: var(--bg); }

/* item thumbnails in the panel forms (item form, import review) */
.thumb { width: 84px; height: 84px; border-radius: var(--r-sm); object-fit: cover; background: var(--bg); flex: 0 0 auto; }
.thumb-empty { display: flex; align-items: center; justify-content: center; font-size: 1.8rem; line-height: 1; opacity: .32; }
.thumb-lg { width: 168px; height: 168px; }

/* ---------- order lines in the manage/admin order detail ---------- */
.cart-line { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.cart-line:last-child { border-bottom: none; }
.cart-line .cl-name { font-weight: 650; }
.cart-line .cl-ex { color: var(--muted); font-size: .82rem; }
.totals { margin-top: 12px; }
.totals .row { justify-content: space-between; padding: 5px 0; }
.totals .grand { font-weight: 800; font-size: 1.2rem; border-top: 2px solid var(--line); padding-top: 12px; margin-top: 8px; }

/* ---------- modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(16, 24, 29, .5); z-index: 90; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity var(--t); }
/* the backdrop is display:flex, so the UA [hidden] rule needs an author override */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.open { opacity: 1; }
.modal { background: var(--card); border-radius: var(--r-lg) var(--r-lg) 0 0; width: 100%; max-width: 520px; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px); transition: transform var(--t); }
.modal-backdrop.open .modal { transform: translateY(0); }
/* Item dialog layout: one scroll column on mobile; on desktop a two-pane split
   (item info left, options right, both scrolling independently) so a 50-topping
   pizza is a compact panel instead of an endless list. */
.modal .m-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.modal .m-cover { height: 190px; background: var(--gradient-cover); background-size: cover; background-position: center; }
.modal img.m-cover { display: block; width: 100%; object-fit: cover; }
.modal .m-title { padding: 20px 24px 0; }
.modal .m-title h2 { font-size: var(--text-xl); margin-bottom: 4px; padding-right: 40px; }
.modal .m-title p.muted { font-size: var(--text-sm); margin-bottom: 6px; }
.modal .m-baseprice { font-weight: var(--fw-bold); }
.modal .m-opts { padding: 0 24px 14px; }
.modal .m-foot { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; box-shadow: 0 -6px 16px rgba(43, 42, 40, .05); position: relative; }
.m-add { flex: 1; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 18px; border-radius: var(--r); font-size: .9375rem; font-weight: var(--fw-bold); }

@media (min-width: 920px) {
    /* widen only dialogs that actually have option groups */
    .modal:has(.opt-group) { max-width: 960px; }
    .modal:has(.opt-group) .m-scroll { display: grid; grid-template-columns: 2fr 3fr; overflow: hidden; }
    .modal:has(.opt-group) .m-head { overflow-y: auto; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
    /* no photo: centre the info block so the pane reads as intentional */
    .modal:has(.opt-group) .m-head:not(:has(.m-cover)) { display: flex; align-items: center; }
    .modal:has(.opt-group) .m-cover { height: 240px; }
    .modal:has(.opt-group) .m-title { padding: 24px 26px; }
    .modal:has(.opt-group) .m-title h2 { font-size: var(--text-2xl); padding-right: 0; }
    .modal:has(.opt-group) .m-baseprice { font-size: var(--text-lg); margin-top: var(--space-2); }
    .modal:has(.opt-group) .m-opts { overflow-y: auto; min-height: 0; padding: 20px 26px 16px; }
    /* keep the first group's header clear of the floating close button */
    .modal:has(.opt-group) .m-opts .opt-group:first-child { margin-top: 0; }
    .modal:has(.opt-group) .m-opts .opt-group:first-child .og-head { padding-right: 44px; }
    /* multi-select groups (toppings) flow in two columns — half the scroll */
    .og-list.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .og-list.cols .opt { border-top: 1px solid var(--line); }
    .og-list.cols .opt:nth-child(-n+2) { border-top: none; }
    .og-list.cols .opt:nth-child(odd) { border-right: 1px solid var(--line); }
}
.modal .m-close { position: absolute; top: 14px; right: 14px; height: 36px; width: 36px; border-radius: 50%; background: rgba(255,255,255,.95); border: none; cursor: pointer; box-shadow: var(--shadow); z-index: 2; display: grid; place-items: center; color: var(--ink); }
.modal .m-form { display: flex; flex-direction: column; overflow: hidden; flex: 1; }
.opt-group { margin: 20px 0; }
.opt-group:first-of-type { margin-top: 16px; }
.opt-group .og-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.opt-group .og-head strong { font-size: .9375rem; font-weight: var(--fw-bold); letter-spacing: 0; }
/* "wähle 1" reads as plain muted text; only a REQUIRED group earns a tinted badge */
.opt-group .og-head .req { font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--muted); background: none; padding: 0; border-radius: 0; white-space: nowrap; }
.opt-group .og-head .req.must { font-size: var(--text-xs); font-weight: var(--fw-bold); color: var(--brand-dark); background: var(--brand-tint); padding: 2px 8px; border-radius: var(--r-sm); }
/* options live in ONE quiet card, separated by hairlines — half the visual bulk
   of stacked boxes and far easier to scan on long topping lists */
.og-list { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.opt { display: flex; align-items: center; gap: 9px; padding: 9px 11px; cursor: pointer; transition: background var(--t); }
.opt + .opt { border-top: 1px solid var(--line); }
.opt:hover { background: var(--bg); }
.opt:has(input:checked) { background: var(--brand-tint); }
.opt:has(input:checked) .o-name { font-weight: 650; }
/* single-select choices read as radios, multi-select as rounded checks (behaviour handled in JS) */
.opt input {
    appearance: none; -webkit-appearance: none; height: 18px; width: 18px; margin: 0; flex: 0 0 auto;
    border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--card); cursor: pointer;
    transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.opt:hover input { border-color: var(--muted); }
.opt input[data-single="1"] { border-radius: 50%; }
.opt input:checked, .opt:hover input:checked { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px var(--card); }
.opt .o-name { flex: 1; font-size: var(--text-sm); }
.opt .o-price { flex: 0 0 auto; text-align: right; color: var(--muted); font-size: .8125rem; font-weight: var(--fw-medium); font-variant-numeric: var(--num); white-space: nowrap; }
.opt:has(input:checked) .o-price { color: var(--brand-dark); font-weight: var(--fw-semibold); }

/* ---------- radio cards (PayPal environment picker) ---------- */
.radio-cards { display: grid; gap: 10px; }
.radio-card { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.radio-card:hover { border-color: var(--brand); }
.radio-card input { accent-color: var(--brand); }
.radio-card.sel, .radio-card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand) inset; }
.radio-card .rc-title { font-weight: 650; }
.radio-card .rc-sub { color: var(--muted); font-size: .85rem; }

/* Order-options fulfilment toggle tiles (/manage/ordering) */
.opt-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.opt-tile { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); padding-right: var(--space-6); border: 1.5px solid var(--line-strong); border-radius: var(--r); cursor: pointer; background: var(--card); transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.opt-tile:hover { border-color: var(--brand); }
.opt-tile:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand) inset; }
.opt-tile input { position: absolute; top: var(--space-4); right: var(--space-4); width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; }
.opt-tile-ico { font-size: 1.6rem; line-height: 1; }
.opt-tile-title { font-weight: var(--fw-semibold); }
.opt-tile-desc { color: var(--muted); font-size: var(--text-sm); margin-top: var(--space-1); }

/* Nested delivery-only money block; dims when delivery is toggled off */
.delivery-config { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); transition: opacity var(--t); }
.delivery-config.is-off { opacity: .5; }
.delivery-config-head { font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }

@media (max-width: 560px) { .opt-tiles { grid-template-columns: minmax(0, 1fr); } }
.logo-img { height: 40px; width: 40px; border-radius: 10px; object-fit: cover; }

/* ============================================================================
 * ORDER BOARD (/manage/orders) — "Board Übersicht".
 * TIME is the axis and status is a column in the row: a kitchen works by clock,
 * not by state machine, so three orders due at 18:50 belong together however far
 * apart they are in the lifecycle. One order = one ~54px row that expands in
 * place, grouped by when it is due, above a load strip that shows the wall at
 * 19:30 BEFORE the cook promises another 20 minutes into it.
 * Page head + tool buttons are the shared .phead / .btn-tool above.
 * Urgency is area and colour — never an animation.
 * ========================================================================== */

/* The page is three stacked blocks: head · filters · list. */
.board-stack { display: flex; flex-direction: column; gap: var(--space-4); }

/* The pause button turns danger-OUTLINED while the kitchen is walled up: it is the
   lever the warning next to it is asking about, not a destructive action. */
.btn-tool.is-alarmed { border-color: var(--danger); color: var(--danger); font-weight: var(--fw-bold); }
.btn-tool.is-alarmed:hover { border-color: var(--danger); background: var(--danger-tint); color: var(--danger); }

/* ---------- head: the Jetzt block + the load strip, one row ---------- */
.board-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.board-card { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.board-kicker { font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

.board-now { padding: var(--space-4) 18px; }
.board-clock { font-size: var(--text-3xl); line-height: 1; letter-spacing: -.03em; font-weight: var(--fw-bold); font-variant-numeric: var(--num); margin-top: 6px; }
.board-figs { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.board-fig { display: flex; align-items: baseline; gap: var(--space-2); }
.board-fig b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: var(--num); }
.board-fig span { font-size: .8125rem; color: var(--ink-soft); font-weight: 650; }
.board-fig.is-danger b, .board-fig.is-danger span { color: var(--danger); }
.board-today { font-size: var(--text-xs); color: var(--muted); }

/* ---------- load strip: six ten-minute windows ---------- */
.load-strip { padding: 14px 18px 12px; }
.load-head { display: flex; align-items: baseline; gap: 10px; }
.load-head .spacer { flex: 1; }
.load-cap { font-size: .8125rem; color: var(--ink-soft); }
.load-cap strong, .load-cap .num { font-variant-numeric: var(--num); }
.load-cap a { font-weight: var(--fw-semibold); }
.load-bars { display: flex; gap: var(--space-2); align-items: flex-end; margin-top: var(--space-3); height: 74px; }
.load-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; }
.load-bar { display: block; width: 100%; flex: 1; min-height: 4px; }
.load-rect { fill: var(--brand-soft); transition: fill var(--t); }
.load-cell.is-full .load-rect { fill: var(--brand); }
.load-cell.is-over .load-rect { fill: var(--danger); }
.load-cell.is-empty .load-rect { fill: var(--line); }
.load-foot { border-top: 1px solid var(--line-strong); padding-top: 6px; display: flex; align-items: baseline; gap: 5px; }
.load-cell.is-over .load-foot { border-top: 2px solid var(--danger); }
.load-n { font-size: .9375rem; font-weight: 800; font-variant-numeric: var(--num); }
.load-cell.is-empty .load-n { font-weight: 650; color: var(--muted-soft); }
.load-cell.is-over .load-n { color: var(--danger); }
.load-t { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: var(--num); }
.load-cell.is-over .load-t { color: var(--danger); font-weight: 650; }
.load-cell:hover .load-rect { filter: brightness(.94); }
.load-cell:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.load-cell.is-picked .load-foot { border-top-color: var(--ink); }
.load-cell.is-picked .load-t { color: var(--ink); font-weight: var(--fw-bold); }

/* verdict + kitchen roll-up, divided from the bars by a hairline */
.load-verdict { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.load-verdict .spacer { flex: 1; }
.verdict { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 650; color: var(--ok); }
.verdict.is-bad { color: var(--danger); font-weight: var(--fw-bold); }
.verdict .num { font-variant-numeric: var(--num); }
.kroll-label { font-size: .8125rem; color: var(--muted); }
.kroll { display: flex; gap: 6px; flex-wrap: wrap; }
.kroll-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); font-size: var(--text-sm); font-weight: 650; }
.kroll-chip strong { font-variant-numeric: var(--num); }
.kroll-chip.is-hot { background: var(--brand-tint); border-color: var(--danger-line); color: var(--brand-dark); }

/* ---------- filter chips ---------- */
.board-filters { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.board-filters .spacer { flex: 1; }
.bfilter { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line-strong); color: var(--ink-soft); font: inherit; font-weight: var(--fw-semibold); font-size: var(--text-sm); cursor: pointer; transition: background var(--t), color var(--t), border-color var(--t); }
.bfilter .num { font-variant-numeric: var(--num); }
.bfilter:hover { border-color: var(--ink); color: var(--ink); }
.bfilter:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bfilter.is-on { background: var(--ink); border-color: var(--ink); color: var(--card); font-weight: var(--fw-bold); }
.bfilter-div { width: 1px; height: 22px; background: var(--line-strong); }
.board-sorted { font-size: .8125rem; color: var(--muted); }

/* ---------- the list: one bordered card, hairline rows ---------- */
.board-list { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }
.board-cols { display: flex; align-items: center; gap: 14px; padding: 8px 16px; background: var(--tint-row); border-bottom: 1px solid var(--line); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* the five column widths — declared once, mirrored by the row */
.bc-due { width: 56px; flex: 0 0 auto; }
.bc-state { width: 104px; flex: 0 0 auto; }
.bc-items { flex: 1; min-width: 0; }
.bc-cust { width: 132px; flex: 0 0 auto; min-width: 0; }
.bc-total { width: 84px; flex: 0 0 auto; text-align: right; }
.bc-act { width: 210px; flex: 0 0 auto; }

/* group headers */
.row-group { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: var(--tint-row); border-bottom: 1px solid var(--line); }
.row-group .ico { flex: 0 0 auto; color: var(--muted); }
.row-group-l { font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.row-group-n { font-size: .8125rem; font-weight: var(--fw-bold); font-variant-numeric: var(--num); }
.row-group.is-overdue { background: var(--brand-tint); border-bottom-color: var(--danger-line); }
.row-group.is-overdue .row-group-l, .row-group.is-overdue .row-group-n, .row-group.is-overdue .ico { color: var(--danger); }
.row-group.is-ok .row-group-l, .row-group.is-ok .row-group-n, .row-group.is-ok .ico { color: var(--ok); }

/* ---------- the order row ---------- */
.order-row { border-bottom: 1px solid var(--line); }
.order-row:last-child { border-bottom: 0; }
.order-row.is-open { background: var(--tint-row); }
/* urgency is an inset edge, not a border — it never shifts the row by a pixel */
.order-row.u-danger { box-shadow: inset 3px 0 0 var(--danger); }
.order-row.u-warn { box-shadow: inset 3px 0 0 var(--warn); }
.order-row.u-brand { box-shadow: inset 3px 0 0 var(--brand); }
.order-row.u-ok { box-shadow: inset 3px 0 0 var(--ok); }

.row-head { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.row-head:hover { background: var(--tint-row); }
/* The expander is the row minus its action cell, so the two never nest. */
.row-main { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.row-main:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }

.row-time { display: block; font-size: 1.0625rem; font-weight: 800; font-variant-numeric: var(--num); line-height: 1.2; }
.row-time.is-open { color: var(--brand-dark); }
.row-delta { display: block; font-size: var(--text-xs); font-variant-numeric: var(--num); color: var(--muted); }
.row-delta.t-danger { color: var(--danger); }
.row-delta.t-warn { color: var(--warn); font-weight: 650; }
.order-row.u-danger .row-time { color: var(--danger); }

.bc-state { display: flex; flex-direction: column; gap: 2px; }
.row-state { font-size: .8125rem; font-weight: var(--fw-bold); }
.row-state.t-brand { color: var(--brand-dark); }
.row-state.t-warn { color: var(--warn); }
.row-state.t-ok { color: var(--ok); }
.row-facts { font-size: var(--text-xs); color: var(--ink-soft); }
.row-pay-open { color: var(--warn); font-weight: 650; }
.row-pay-paid { color: var(--ok); font-weight: 650; }

.row-items { font-size: .9375rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row-items .qty { color: var(--brand); font-weight: var(--fw-bold); font-variant-numeric: var(--num); }
.row-items .size { color: var(--muted); }
.row-cust { font-size: var(--text-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.row-total { font-weight: var(--fw-bold); font-variant-numeric: var(--num); }

/* action cell — one next step, 40px, plus the overflow menu */
.row-act { display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }
.row-act form { margin: 0; }
.row-go { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border-radius: var(--r-md); border: 1px solid var(--brand); background: var(--brand); color: var(--brand-contrast); font: inherit; font-weight: var(--fw-bold); font-size: .9375rem; cursor: pointer; white-space: nowrap; transition: background var(--t), border-color var(--t), color var(--t); }
.row-go:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-contrast); text-decoration: none; }
.row-go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.row-go.is-outline { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.row-go.is-outline:hover { background: var(--card); border-color: var(--ink); color: var(--ink); }
.row-open-note { font-size: .8125rem; color: var(--muted); }
.row-presets { display: flex; gap: 6px; }
.row-preset { height: 40px; width: 44px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font: inherit; font-weight: var(--fw-bold); font-size: 1.0625rem; font-variant-numeric: var(--num); cursor: pointer; transition: border-color var(--t), background var(--t), color var(--t); }
.row-preset:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); }
.row-preset:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.row-preset.is-picked { border: 2px solid var(--brand); background: var(--brand-tint); color: var(--brand-dark); }

/* ---------- expanded body: dishes left, the promise right ---------- */
.row-body { display: grid; grid-template-columns: 1.2fr minmax(0, 1fr); gap: var(--space-5); padding: 4px 16px 16px 86px; }
.row-dishes { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.row-dish { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.row-dish:last-child { border-bottom: 0; }
.row-dish .qty { flex: 0 0 auto; color: var(--brand); font-weight: 800; font-size: 1.0625rem; font-variant-numeric: var(--num); }
.row-dish-name { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.row-dish-opts { font-size: .9375rem; color: var(--ink-soft); }
.row-note { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: 10px; font-size: .9375rem; color: var(--ink-soft); }
.row-note .ico { flex: 0 0 auto; margin-top: 3px; color: var(--warn); }

.row-accept-label { display: flex; align-items: baseline; gap: var(--space-2); }
.row-accept-label b { font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.row-accept-label span { font-size: .8125rem; color: var(--muted); font-weight: var(--fw-medium); }
.row-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: var(--space-2); }
.row-grid .row-preset { width: auto; height: 46px; }
.row-consequence { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: .8125rem; color: var(--ink-soft); }
.row-consequence .ico { flex: 0 0 auto; color: var(--ok); }
.row-consequence.is-bad { color: var(--danger); }
.row-consequence.is-bad .ico { color: var(--danger); }
.row-consequence .num { font-variant-numeric: var(--num); }
.row-contact { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.row-contact-main { min-width: 0; flex: 1; font-size: var(--text-sm); }
.row-contact-main b { font-weight: 650; }
.row-contact-main div { color: var(--muted); }
.row-addr-warn { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--warn); font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.row-tel { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-weight: var(--fw-semibold); font-size: .8125rem; font-variant-numeric: var(--num); }
.row-tel:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.row-tel:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.row-foot { display: flex; align-items: center; margin-top: 10px; }
.row-foot .spacer { flex: 1; }
.row-foot form { margin: 0; }
.row-foot .linklike, .row-foot a { color: var(--muted); font-size: .8125rem; }
.row-foot .linklike:hover, .row-foot a:hover { color: var(--ink); text-decoration: none; }
.row-foot .linklike:focus-visible, .row-foot a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* tail summary (tablet) + empty board */
.row-tail { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--tint-row); width: 100%; border: 0; font: inherit; text-align: left; color: var(--ink-soft); cursor: pointer; }
.row-tail:hover { background: var(--fill-muted); }
.row-tail:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.row-tail .spacer { flex: 1; }
.row-tail .num { font-variant-numeric: var(--num); font-weight: var(--fw-bold); }
.board-empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); }

/* bare <button> that reads as a link (board + panel forms) */
.linklike { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.linklike:hover { text-decoration: none; }

/* ---------- 1024–1199 px — the kitchen tablet at the pass ---------- */
@media (max-width: 1199px) and (min-width: 1024px) {
    /* the customer name is the first thing a cook does not need */
    .bc-cust { display: none; }
    .bc-due { width: 62px; }
    .row-items { font-size: var(--text-base); }
    .row-go { height: 48px; }
    .row-preset { height: 48px; width: 52px; }
    .row-grid .row-preset { height: 52px; }
    .row-body { padding-left: 92px; }
}

/* ---------- ≤1023 px — two-line rows, action underneath ---------- */
@media (max-width: 1023px) {
    .board-head { grid-template-columns: minmax(0, 1fr); }
    .board-now { padding: var(--space-3) var(--space-4); }
    .board-clock { font-size: var(--text-xl); margin-top: 0; }
    .board-figs { margin-top: var(--space-2); padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
    .board-cols { display: none; }
    .load-bars { height: auto; align-items: stretch; }
    .load-bar { flex: 0 0 6px; min-height: 6px; }
    .load-cell { flex-direction: column-reverse; justify-content: flex-start; gap: 4px; }
    .load-foot { border-top: 0; padding-top: 0; }
    .load-cell.is-over .load-foot { border-top: 0; }

    /* line 1 = time · status · total, line 2 = the dishes, action full width */
    .row-main { flex-wrap: wrap; row-gap: 6px; }
    .bc-due { width: auto; }
    .bc-state { width: auto; flex-direction: row; align-items: baseline; gap: 6px; }
    .bc-cust { display: none; }
    .bc-total { width: auto; margin-left: auto; }
    .bc-items { flex: 1 1 100%; order: 5; }
    .bc-act { width: 100%; flex: 1 1 100%; order: 6; }
    .row-act { justify-content: stretch; }
    .row-go { flex: 1; height: 52px; font-size: var(--text-base); }
    .row-presets { flex: 1; }
    .row-preset { flex: 1; width: auto; height: 52px; }
    .row-body { grid-template-columns: minmax(0, 1fr); padding: 4px var(--space-4) var(--space-4); }
}

/* ---------- ≤819 px — the phone ---------- */
@media (max-width: 819px) {
    .board-filters { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .board-sorted { display: none; }
    .load-strip { padding: var(--space-3) var(--space-4); }
    .row-main { padding: 10px var(--space-4); }
    .row-group { padding: 8px var(--space-4); }
}

/* ============================================================================
 * MENU EDITOR (/manage/menu) — refinement 1a: category rail + item table.
 * Shares .phead / .btn-tool / .icon-btn / .ovm with the board (declared once,
 * up in the button section).
 * ========================================================================== */
.mgrid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.mcol { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---------- category rail ---------- */
.crail { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.crail-head { padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.crail-row { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: inherit; text-decoration: none; border-top: 1px solid var(--line); transition: background var(--t); }
.crail-row:first-child { border-top: 0; }
.crail-row:hover { background: var(--tint-row); text-decoration: none; }
.crail-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.crail-grip { display: flex; flex: 0 0 auto; color: var(--faint); cursor: grab; }
.crail-grip:active { cursor: grabbing; }
.crail-name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.crail-n { font-size: .8125rem; color: var(--muted); font-variant-numeric: var(--num); }
.crail-row.is-active { background: var(--brand-tint); box-shadow: inset 2px 0 0 var(--brand); }
.crail-row.is-active .crail-name, .crail-row.is-active .crail-n { color: var(--brand-dark); font-weight: var(--fw-bold); }
.crail-foot { padding: 10px 14px; border-top: 1px solid var(--line); background: var(--tint-row); }
.crail-add { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px 12px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: var(--card); color: var(--ink-soft); font: inherit; font-weight: var(--fw-semibold); font-size: var(--text-sm); cursor: pointer; list-style: none; transition: border-color var(--t), color var(--t); }
.crail-add::-webkit-details-marker { display: none; }
.crail-add:hover { border-color: var(--brand); color: var(--brand-dark); }
.crail-add:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.crail-new[open] > .crail-add { border-style: solid; border-color: var(--brand); color: var(--brand-dark); }
.crail-newcat { padding-top: 12px; }
.crail-newcat input[type="text"] { width: 100%; max-width: 100%; }
.crail-newcat .btn { width: 100%; }
.crail-hint { padding: 12px 14px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); line-height: 1.5; }

/* ---------- item table card ---------- */
/* overflow stays visible so the ⋮ panels can escape the card */
.mcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }

.mhead { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--row-x); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mhead-title { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; font-weight: var(--fw-bold); }
.mhead-meta { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: var(--num); }

/* rename — a <details> popover pinned under the head row.
   NEVER give a <details> display:flex/grid/contents — Chrome then renders the
   closed content as well. Leaving it block is what keeps the form hidden. */
.mrename { flex: 0 0 auto; }
.mrename-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0; padding: 12px var(--row-x); background: var(--card); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
.mrename-panel input[type="text"] { flex: 1 1 200px; max-width: 320px; }

/* column header row */
.mcols { display: flex; align-items: center; gap: 14px; padding: 11px var(--row-x); border-bottom: 1px solid var(--line); background: var(--tint-row); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* item rows */
.mrows.is-saving, .crail-rows.is-saving { opacity: .6; pointer-events: none; }
.mrow { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px var(--row-x); border-bottom: 1px solid var(--line); transition: background var(--t); }
.mrow:hover { background: var(--tint-row); }
.mrow.is-off { background: var(--tint-row); }
.mrow.is-dragging, .crail-row.is-dragging { opacity: .4; }

.mrow-grip, .mcols .c-grip { width: 15px; flex: 0 0 15px; }
.mrow-grip { display: flex; color: var(--faint); cursor: grab; }
.mrow-grip:active { cursor: grabbing; }
/* The grips are focusable (arrow keys reorder), so they need a visible ring —
   and a hit area big enough to grab, without changing the row's rhythm. */
.crail-grip:focus-visible, .mrow-grip:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); color: var(--brand);
}
.crail-grip:hover, .mrow-grip:hover { color: var(--muted); }

.mrow-thumb, .mcols .c-thumb { width: 52px; height: 52px; flex: 0 0 52px; border-radius: var(--r-md); object-fit: cover; }
.mcols .c-thumb { height: auto; }
.mrow-thumb.is-empty { display: grid; place-items: center; background: var(--fill-muted); color: var(--muted-soft); }
.mrow.is-off .mrow-thumb.is-empty { color: var(--faint); }

.mrow-main, .mcols .c-item { flex: 1; min-width: 0; }
/* the name stretches over the whole row: click anywhere = open the item form */
.mrow-name { display: block; font-weight: 650; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mrow-name:hover { text-decoration: none; }
.mrow.is-off .mrow-name { color: var(--muted); }
.mrow-link::after { content: ''; position: absolute; inset: 0; }
.mrow-link:focus-visible { outline: none; }
.mrow-link:focus-visible::after { outline: 2px solid var(--brand); outline-offset: -2px; }
.mrow-desc { color: var(--muted); font-size: var(--text-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mrow-meta { display: none; font-size: .8125rem; color: var(--muted); font-variant-numeric: var(--num); }
.mrow-flag { color: var(--warn); font-weight: var(--fw-semibold); }

.mrow-opts, .mcols .c-opts { width: 150px; flex: 0 0 150px; display: flex; gap: 6px; flex-wrap: wrap; }
.mchip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line); font-size: var(--text-xs); font-weight: 650; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: var(--num); }
.mrow.is-off .mchip { background: var(--card); color: var(--muted); }

.mrow-price, .mcols .c-price { width: 90px; flex: 0 0 90px; text-align: right; font-weight: var(--fw-bold); font-variant-numeric: var(--num); }
.mrow.is-off .mrow-price { color: var(--muted); }

.mrow-avail, .mcols .c-avail { width: 96px; flex: 0 0 96px; display: flex; justify-content: center; margin: 0; }
.mcols .c-avail { text-align: center; }
.mrow .ovm, .mcols .c-more { width: 34px; flex: 0 0 34px; }

/* everything interactive has to sit above the stretched row link */
.mrow-grip, .mrow-avail, .mrow .ovm { position: relative; z-index: 1; }

/* availability switch — the day-to-day action, one POST, no item form */
.sw { display: inline-flex; align-items: center; justify-content: flex-start; width: 42px; height: 24px; padding: 3px; border: 0; border-radius: var(--pill); background: var(--line-strong); cursor: pointer; transition: background var(--t); }
.sw.is-on { background: var(--ok); justify-content: flex-end; }
.sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sw-knob { height: 18px; width: 18px; border-radius: 50%; background: #fff; }

/* empty category + card footer */
.mempty { padding: 18px var(--row-x); color: var(--muted); font-size: var(--text-sm); border-bottom: 1px solid var(--line); }
.mfoot { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--row-x); background: var(--tint-row); border-radius: 0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); flex-wrap: wrap; }
.mfoot-hint { font-size: .8125rem; color: var(--muted); }
.mfoot-hint-m { display: none; }
.madd { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: var(--card); color: var(--ink-soft); font: inherit; font-weight: var(--fw-semibold); font-size: var(--text-sm); text-decoration: none; cursor: pointer; transition: border-color var(--t), color var(--t); }
.madd:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.madd:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* nudge band under the table (missing photos) */
.hintband { display: flex; align-items: center; gap: 14px; padding: 14px var(--row-x); background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.hintband > .ico { flex: 0 0 auto; color: var(--warn); }
.hintband-text { flex: 1; min-width: 0; font-size: .9375rem; color: var(--ink-soft); font-variant-numeric: var(--num); }
.hintband-text strong { color: var(--ink); }
.hintband .btn { flex: 0 0 auto; }

/* kitchen tablet — the rail narrows, the options column gives way first */
@media (max-width: 1023px) and (min-width: 820px) {
    .mgrid { grid-template-columns: 210px minmax(0, 1fr); gap: var(--space-4); }
    .mrow-opts, .mcols .c-opts { width: 120px; flex: 0 0 120px; }
}

/* phone — rail becomes a scrolling chip row, the table becomes one line per item */
@media (max-width: 819px) {
    .mgrid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }

    /* the rail is no longer a card: a scrolling chip row + the add button under it */
    .crail { display: block; border: 0; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
    .crail-rows { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
    .crail-rows::-webkit-scrollbar { display: none; }
    .crail-head, .crail-hint { display: none; }
    .crail-row { flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--card); padding: 8px 13px; white-space: nowrap; font-size: var(--text-sm); }
    .crail-row:first-child { border-top: 1px solid var(--line-strong); }
    .crail-row.is-active { border-color: transparent; background: var(--brand-tint); box-shadow: none; }
    .crail-grip { display: none; }
    .crail-foot { padding: 8px 0 0; border: 0; background: none; }
    .crail-add { width: auto; white-space: nowrap; }
    .crail-newcat { padding-top: 10px; }

    .mhead { padding: 11px var(--row-x); gap: var(--space-2); }
    .mhead-title { font-size: 1.0625rem; }
    .mhead .btn-tool, .mhead-meta { display: none; }
    .ovm-panel .only-narrow { display: flex; }

    .mcols { display: none; }
    .mrow { gap: 12px; }
    .mrow-thumb { width: 46px; height: 46px; flex-basis: 46px; }
    /* HTML5 drag events never fire on touch, so the grip would be a lie here;
       the ⋮ menu stays (it is the only way to delete/reorder on a phone). */
    .mrow-grip, .mrow-desc, .mrow-opts, .mrow-price { display: none; }
    .mrow-meta { display: block; }
    .mrow-avail { width: auto; flex: 0 0 auto; }

    .mfoot-hint:not(.mfoot-hint-m) { display: none; }
    .mfoot-hint-m { display: inline; }
}

@media (max-width: 390px) {
    .mrow { padding: 11px 12px; }
    .mhead, .mfoot { padding-left: 12px; padding-right: 12px; }
}

/* ---------- settings: image upload tiles (logo / cover) ---------- */
.upload-tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); }
.upload-title { font-weight: var(--fw-semibold); font-size: var(--text-sm); color: var(--ink); }
.upload-preview { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--gradient-cover); border: 1px solid var(--line); }
.upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.upload-preview .upload-placeholder { font-size: 1.9rem; opacity: .7; }
/* Logo mirrors the shop hero badge (rounded square); cover mirrors the wide hero banner. */
.upload-preview-logo { width: 88px; height: 88px; border-radius: var(--r); }
.upload-preview-cover { width: 100%; height: 118px; border-radius: var(--r-sm); }
.upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.upload-btn { position: relative; overflow: hidden; }
/* The native input stays in the DOM (keyboard + screen-reader reachable) but is
   visually replaced by its wrapping .btn label. */
.upload-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.upload-input:focus-visible + span,
.upload-btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.upload-filename { font-size: var(--text-xs); color: var(--muted); word-break: break-all; }
.upload-hint { margin-top: 2px; }
.upload-spec { font-size: var(--text-xs); color: var(--muted); font-weight: var(--fw-medium); margin: 0; }

/* small shared utilities (replace one-off inline styles) */
.input-narrow { max-width: 160px; }
.summary-link { cursor: pointer; }

@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.spin { animation: spin 1s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- responsive ----------
   Page LAYOUT breakpoints (menu, cart, checkout, track, board, editor, wizard)
   live with their own sections at the 1a scale (1023 / 819 / 390); what stays
   here is the global chrome: grids, topbar, cards, tables. */
@media (max-width: 860px) {
    .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
    .grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
    /* Dashboard KPIs are tiny (number + label): keep them 4-up but compact on
       tablets instead of eight tall half-width boxes. */
    .grid.kpis { grid-template-columns: repeat(4, 1fr); }
    .kpis .stat { padding: 12px 14px; }
    .kpis .stat .n { font-size: 1.5rem; }
    .kpis .stat .l { font-size: .78rem; }
}
@media (max-width: 600px) {
    body { font-size: 15px; }
    .topbar .inner { height: 56px; gap: 8px; }
    .nav a { padding: 8px 9px; }
    .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
    /* KPIs stay two-up on phones — eight full-width cards is a scroll marathon. */
    .grid.cols-4.kpis { grid-template-columns: repeat(2, 1fr); }
    .hide-mobile { display: none !important; }
    .show-mobile { display: inline-flex; }
    /* Dashboard finish-setup checklist: the action button gets its own full-width
       row under the text instead of shoving the copy into a skinny column. */
    .checklist li { flex-wrap: wrap; }
    .checklist li .ck-body { flex: 1 1 200px; }
    .checklist li > .btn { flex: 1 1 100%; margin-left: 42px; text-align: center; }
    /* Menu editor: category header (move/name/save/sizes/delete) wraps. */
    .card-head { flex-wrap: wrap; }
    /* Opening hours: each day becomes a stacked block (day name, time windows,
       closed toggle) — three table columns can't fit a phone. */
    .hours-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
    .hours-table tr:last-child { border-bottom: 0; }
    .hours-table th, .hours-table td { display: block; width: auto !important; padding: 2px 0; text-align: left; }
    .hours-table td.nowrap { white-space: normal; }
    .hours-range { margin-bottom: 6px; }
    .card { padding: 18px; }
    h1 { font-size: 1.45rem; }
    .modal { max-width: 100%; }
    .addr-search { flex-direction: column; }
    .addr-search .btn-lg { width: 100%; }
}

@media (min-width: 601px) {
    .modal-backdrop { align-items: center; padding: 28px; }
    .modal { border-radius: var(--r-lg); }
}

/* ============================================================================
 * 1a "Aufgeräumt" — SHARED COMPONENT LAYER
 * ----------------------------------------------------------------------------
 * The pieces several areas compose: the hairline list container, the menu row,
 * the inline quantity stepper, the segmented control and the order rail /
 * mobile order bar. Area-specific components (kitchen ticket, menu editor,
 * wizard, driver, partner, home, track) live in their own sections — do NOT
 * extend this one with page-only rules.
 *
 * Two principles the whole layer encodes:
 *   1. repeating things = ONE bordered container + 1px dividers (no card carpet);
 *   2. numbers sit in a right-aligned column and are always `tabular-nums`.
 * ============================================================================ */

/* ---- list container primitive ----------------------------------------------
   Expects:  <div class="hairlist"> <row/> <row/> … </div>
   Children are separated by a hairline and clipped by the container radius; the
   rows themselves carry no border, no radius and no shadow. `.menu-list` is the
   same primitive under the name the dish list uses. */
.hairlist,
.menu-list {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
/* `:not(:first-child)` rather than `row + row`: the menu list interleaves the
   per-item <template> dialogs between rows, which breaks an adjacent-sibling rule. */
.hairlist > *:not(:first-child),
.menu-list > *:not(:first-child) { border-top: 1px solid var(--line); }
/* An author `display` rule beats the UA `[hidden] { display:none }` — filtering
   (menusearch) sets .hidden on rows, so re-assert it for every list child. */
.hairlist > [hidden],
.menu-list > [hidden] { display: none; }

/* ---- .menu-row — the core list row -----------------------------------------
   Expects:
     <div class="menu-row [is-off]">
       <img class="mr-thumb">  |  <span class="mr-thumb is-empty">{utensils icon}</span>
       <button class="mr-open"><span class="mr-name">…</span><span class="mr-desc">…</span></button>
         …unavailable rows use <div class="mr-body"> + <span class="mr-badge">Heute aus</span>
       <div class="mr-price"><span class="mr-from">ab</span><span class="mr-amount">9,90 €</span></div>
       <div class="mr-action">  .mr-btn  |  .qty-inline  |  empty on unavailable rows </div>
     </div>
   The row is a <div> (not a link/button) because <button> cannot nest: `.mr-open`
   stretches over the whole row via ::after, and `.mr-price`/`.mr-action` sit above
   it on z-index 1 so the action stays clickable. */
.menu-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px var(--row-x);
    min-height: 88px;
    transition: background var(--t);
}
.menu-row + .menu-row { border-top: 1px solid var(--line); }
.menu-row[hidden] { display: none; }
.menu-row:hover { background: var(--tint-row); }
/* the ring is drawn on the ROW (inset, because .menu-list clips overflow) */
.menu-row:has(.mr-open:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }
@supports selector(:has(*)) { .mr-open:focus-visible { outline: none; } }

.mr-thumb { width: 64px; height: 64px; border-radius: var(--r-md); object-fit: cover; flex: 0 0 auto; display: block; background: var(--fill-muted); }
.mr-thumb.is-empty { display: grid; place-items: center; color: var(--muted-soft); }

.mr-open { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.mr-open::after { content: ""; position: absolute; inset: 0; }   /* stretched hit area */
.mr-body { flex: 1; min-width: 0; }
.mr-name { display: block; font-weight: 650; font-size: var(--text-base); line-height: 1.35; }
.mr-desc { display: block; color: var(--muted); font-size: var(--text-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.mr-badge { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-sm); background: var(--fill-muted); color: var(--muted); font-size: .8rem; font-weight: var(--fw-semibold); white-space: nowrap; }

.mr-price { flex: 0 0 auto; min-width: 92px; text-align: right; position: relative; z-index: 1; font-variant-numeric: var(--num); }
.mr-from { display: block; font-size: var(--text-xs); color: var(--muted); line-height: 1; font-weight: var(--fw-medium); }
.mr-amount { font-weight: var(--fw-bold); font-size: 1.0625rem; }

.mr-action { flex: 0 0 auto; min-width: 104px; display: flex; justify-content: flex-end; position: relative; z-index: 1; }
.mr-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 38px; min-width: 104px; padding: 0 14px;
    border-radius: var(--r-md); border: 1px solid var(--line-strong);
    background: var(--card); color: var(--ink);
    font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold);
    white-space: nowrap; cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}
.menu-row:hover .mr-btn,
.mr-btn:hover { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.mr-btn:active { background: var(--brand-dark); border-color: var(--brand-dark); color: var(--brand-contrast); }
.mr-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.mr-btn .mr-ico-m { display: none; }   /* icon-only face, shown ≤819px */

/* sold out today: dimmed, no hover, no hit area, action slot kept as a spacer so
   the price column stays aligned down the list */
.menu-row.is-off { opacity: .55; }
.menu-row.is-off:hover { background: transparent; }
.menu-row.is-off .mr-amount { color: var(--muted); }

/* ---- .qty-inline — inline quantity stepper ---------------------------------
   Expects (in a menu row, a cart row or the dialog footer):
     <span|form class="qty-inline [is-quiet]">
       <button class="qi-minus">{minus icon}</button>
       <span class="qi-n">1</span>
       <button class="qi-plus">{plus icon}</button>
     </span>
   Replaces the `+ Hinzu` button as soon as the quantity is ≥ 1; at 0 the caller
   swaps it back. `.is-quiet` is the neutral variant (cart page + dialog footer). */
.qty-inline { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--brand); border-radius: var(--r-md); overflow: hidden; background: var(--card); }
.qty-inline button { width: 36px; height: 36px; border: 0; padding: 0; display: grid; place-items: center; background: var(--card); color: var(--brand); cursor: pointer; transition: background var(--t), color var(--t); }
.qty-inline button:hover { background: var(--brand-tint); }
.qty-inline button:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.qty-inline .qi-plus { background: var(--brand); color: var(--brand-contrast); }
.qty-inline .qi-plus:hover { background: var(--brand-dark); }
.qty-inline .qi-n { min-width: 30px; text-align: center; font-weight: var(--fw-bold); font-variant-numeric: var(--num); }
.qty-inline.is-quiet { border-color: var(--line-strong); }
.qty-inline.is-quiet .qi-plus { background: var(--card); color: var(--brand); }
.qty-inline.is-quiet .qi-plus:hover { background: var(--brand-tint); }

/* ---- .seg — segmented control (fulfilment / timing) ------------------------
   Expects either
     <div class="seg"><button class="seg-opt is-on">…</button><button class="seg-opt">…</button></div>
   or the form flavour
     <form class="seg"><label class="seg-opt"><input type="radio" name="type" value="delivery" checked>…</label>…</form>
   `.seg-2` stacks a main label over a muted sub line. */
.seg { display: flex; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; }
.seg-opt { position: relative; flex: 1; display: block; text-align: center; padding: 8px 0; border-radius: var(--r-sm); border: 0; background: none; font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--muted); cursor: pointer; transition: background var(--t), color var(--t); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt:hover { color: var(--ink); }
.seg-opt.is-on,
.seg-opt:has(input:checked) { background: var(--card); color: var(--ink); font-weight: 650; box-shadow: var(--shadow-seg); }
.seg-opt:focus-visible,
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
.seg-2 .seg-opt { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 9px 0; }
.seg-2 .seg-main { font-size: .9375rem; font-weight: var(--fw-semibold); }
.seg-2 .seg-opt:has(input:checked) .seg-main { font-weight: 650; }
.seg-2 .seg-sub { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: var(--num); }
.seg-max { max-width: 420px; }

/* ---- .order-rail (desktop) / .order-bar (mobile) ---------------------------
   ONE component for the menu page (with lines), the cart and checkout (summary).
   Expects:
     <aside class="order-rail">
       <div class="rail-card [is-summary]">
         <div class="rail-head">
           <div class="rail-title">Deine Bestellung</div>
           <div class="seg">…</div>
           <div class="rail-when">{clock icon} Schnellstmöglich <a>ändern</a></div>
         </div>
         <div class="rail-lines">
           <div class="rail-line"><span class="rail-qty">1×</span>
             <div class="rail-main"><div class="rail-name">…</div><div class="rail-opts">…</div></div>
             <div class="rail-sum">14,40 €</div></div>
         </div>
         <div class="rail-foot">
           <div class="sum-row"><span>Zwischensumme</span><span>30,20 €</span></div>
           <div class="sum-total"><span>Gesamt</span><span>32,70 €</span></div>
           <p class="sum-vat">…</p>
           <div class="rail-min is-ok|is-short">…</div>
           <a class="btn btn-primary rail-cta">Weiter zur Kasse</a>
           <p class="rail-note">…</p>
         </div>
       </div>
     </aside>
   Empty cart: `.rail-head` stays, lines + foot are replaced by
     <div class="rail-empty"><div class="rail-empty-title">…</div><div class="rail-empty-sub">…</div></div>
   `.is-summary` (cart / checkout, no line list above the totals) drops the tint
   and the divider from the footer. */
.order-rail { position: sticky; top: calc(var(--bar-h) + 24px); }
.rail-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); overflow: hidden; }

.rail-head { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.rail-title { font-weight: var(--fw-bold); font-size: 1.0625rem; margin-bottom: 12px; }
.rail-when { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: var(--text-sm); color: var(--ink-soft); font-variant-numeric: var(--num); }
.rail-when .ico { color: var(--muted); }
.rail-when a { margin-left: auto; font-size: var(--text-sm); font-weight: var(--fw-semibold); }

.rail-lines { padding: 6px 18px; max-height: 46vh; overflow-y: auto; }
.rail-line { display: flex; gap: 12px; padding: var(--row-y) 0; border-bottom: 1px solid var(--line); }
.rail-line:last-child { border-bottom: 0; }
.rail-qty { flex: 0 0 auto; font-weight: var(--fw-bold); color: var(--brand); font-variant-numeric: var(--num); }
.rail-main { flex: 1; min-width: 0; }
.rail-name { font-weight: 650; }
.rail-opts { color: var(--muted); font-size: .8125rem; }
.rail-sum { font-weight: var(--fw-bold); white-space: nowrap; font-variant-numeric: var(--num); }

.rail-foot { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: var(--tint-row); }
.sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; color: var(--ink-soft); padding: 3px 0; }
.sum-row > span:last-child { font-variant-numeric: var(--num); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 800; font-size: 1.25rem; color: var(--ink); margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-strong); }
.sum-total > span:last-child { font-variant-numeric: var(--num); }
.sum-vat { font-size: var(--text-xs); color: var(--muted); text-align: right; margin: 2px 0 0; }

.rail-min { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8125rem; font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.rail-min.is-ok { color: var(--ok); }
.rail-min.is-short { color: var(--warn); }
.rail-cta { width: 100%; height: 48px; margin-top: 14px; border-radius: var(--r); font-size: var(--text-base); font-weight: var(--fw-bold); }
/* below the minimum order value: inert, and it must LOOK inert */
.rail-cta:disabled,
.rail-cta[aria-disabled="true"] { background: var(--fill-muted); border-color: var(--fill-muted); color: var(--muted-soft); cursor: not-allowed; box-shadow: none; opacity: 1; transform: none; }
.rail-note { margin: 10px 0 0; font-size: .8125rem; color: var(--muted); text-align: center; }
.rail-empty { padding: 26px 18px 24px; text-align: center; }
.rail-empty-title { font-weight: var(--fw-semibold); color: var(--ink-soft); }
.rail-empty-sub { font-size: var(--text-sm); color: var(--muted); margin-top: 2px; }
.rail-card.is-summary .rail-foot { background: var(--card); border-top: 0; }

/* mobile order bar — the rail's phone form: one row, count · label · total */
.order-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--card); border-top: 1px solid var(--line-strong); box-shadow: var(--shadow-bar); }
.ob-cta { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border-radius: var(--r); font-size: var(--text-base); font-weight: var(--fw-bold); }
.ob-count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .22); font-size: var(--text-sm); font-weight: var(--fw-bold); font-variant-numeric: var(--num); }
.ob-total { margin-left: auto; font-variant-numeric: var(--num); }
.ob-cta:disabled, .ob-cta[aria-disabled="true"] { background: var(--fill-muted); border-color: var(--fill-muted); color: var(--muted-soft); cursor: not-allowed; box-shadow: none; opacity: 1; transform: none; }
.ob-cta:disabled .ob-count, .ob-cta[aria-disabled="true"] .ob-count { background: var(--card); color: var(--muted); }
.ob-note { margin: 8px 0 0; font-size: var(--text-xs); color: var(--muted); text-align: center; }

/* ---- shared-component responsive -------------------------------------------
   Only the components defined above; page layouts live with their own sections. */
@media (max-width: 819px) {
    /* the rail becomes the fixed bottom bar */
    .order-rail { display: none; }
    .order-bar.has-items { display: block; }
    body:has(.order-bar.has-items) .page { padding-bottom: 96px; }

    /* row reflows to thumb · text · price (left-aligned, right after the text) ·
       icon-only action, so the whole row still fits one phone line */
    .menu-row { padding: var(--row-y) var(--row-x); min-height: 76px; gap: 12px; }
    .mr-thumb { width: 56px; height: 56px; order: 1; }
    .mr-body, .mr-open { order: 2; }
    .mr-desc { font-size: .8125rem; }
    .mr-price { min-width: 0; text-align: left; order: 3; }
    .mr-action { order: 4; min-width: 0; }
    .mr-btn { width: 40px; min-width: 40px; height: 40px; padding: 0; }
    .mr-btn .mr-label { display: none; }
    .mr-btn .mr-ico-m { display: flex; }

    /* touch targets */
    .qty-inline { height: 40px; }
    .qty-inline button { width: 38px; height: 38px; }
    .qty-inline .qi-n { min-width: 26px; }
}
@media (max-width: 390px) {
    .menu-row { padding: 12px var(--row-x); }
    .mr-thumb { width: 46px; height: 46px; }
    .mr-btn, .qty-inline { height: 44px; }
    .qty-inline button { height: 42px; }
}

/* ============================================================================
 * CART + CHECKOUT (1a) — shop/cart.html.twig · shop/checkout.html.twig
 * The cart is a hairline LIST beside the shared order-rail card used as a pure
 * summary (.rail-card.is-summary); checkout is ONE bordered card of four
 * numbered steps beside the same card, this time WITH the line list
 * (.rail-card.is-compact). Nothing here re-declares a shared component — only
 * the two page layouts, their rows, the payment picker and the error summary.
 * ========================================================================== */

/* rail head used as a single title ROW (no segmented control underneath):
   "Deine Bestellung" on the cart, "4 Artikel — bearbeiten" on checkout. */
.rail-head.is-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; font-weight: var(--fw-bold); }
.rail-head.is-row a { font-size: var(--text-sm); font-weight: var(--fw-semibold); }

/* the checkout summary repeats the cart lines one step tighter than the menu rail */
.rail-card.is-compact .rail-lines { padding: 4px 18px; }
.rail-card.is-compact .rail-line { padding: 11px 0; }
.rail-card.is-compact .rail-qty,
.rail-card.is-compact .rail-name,
.rail-card.is-compact .rail-sum { font-size: .9375rem; }

/* ---- cart page ---- */
.cart-head-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cart-head-row h1 { margin: 0; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -.025em; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.cart-layout > aside { position: sticky; top: calc(var(--bar-h) + 24px); }

.cart-list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.cart-list-head { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: var(--fw-bold); }

.cart-row { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; }
.cart-row + .cart-row { border-top: 1px solid var(--line); }
.cr-thumb { width: 60px; height: 60px; border-radius: var(--r-md); object-fit: cover; flex: 0 0 auto; display: block; background: var(--fill-muted); }
.cr-thumb.is-empty { display: grid; place-items: center; color: var(--muted-soft); }
.cr-main { flex: 1; min-width: 0; }
.cr-name { font-weight: 650; font-size: var(--text-base); }
.cr-opts { color: var(--muted); font-size: var(--text-sm); }
.cr-edit { display: inline-block; margin-top: 2px; font-size: .8125rem; font-weight: var(--fw-semibold); }
.cart-row .qty-inline { flex: 0 0 auto; }
.cr-price { flex: 0 0 auto; width: 92px; text-align: right; }
.cr-total { font-weight: var(--fw-bold); font-size: 1.0625rem; font-variant-numeric: var(--num); }
.cr-unit { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: var(--num); }

.cart-addmore { display: flex; align-items: center; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--tint-row); font-weight: var(--fw-semibold); font-size: .9375rem; color: var(--ink); }
.cart-addmore:hover { text-decoration: none; color: var(--brand-dark); }
.cart-vendor { margin: 12px 0 0; font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.cart-vendor a { font-weight: var(--fw-semibold); }

/* empty cart: the rail card alone, centred, no illustration */
.cart-empty-card { max-width: 460px; margin: 0 auto; }

/* ---- checkout ---- */
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }
.checkout-layout > aside { position: sticky; top: calc(var(--bar-h) + 24px); }
.checkout-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.checkout-head h1 { margin: 0; font-size: var(--text-2xl); line-height: 1.15; letter-spacing: -.025em; }
.checkout-guest { font-size: var(--text-sm); color: var(--muted); }

.co-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.co-card { counter-reset: co-step; }
/* The step number is a COUNTER, not literal text: a pickup order hides the delivery
   step (display:none, which counters skip), so the visible steps stay 01·02·03. */
.co-step { padding: 20px 22px; counter-increment: co-step; }
.co-step-n::before { content: counter(co-step, decimal-leading-zero); }
.co-step + .co-step { border-top: 1px solid var(--line); }
.co-step-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.co-step-n { font-size: .8125rem; font-weight: var(--fw-bold); color: var(--muted); font-variant-numeric: var(--num); }
.co-step-h h3 { margin: 0; font-size: 1.0625rem; line-height: 1.2; }
.co-grid-addr { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 14px; }
.co-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-ok { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--ok); }
.lbl-hint { color: var(--muted); font-weight: var(--fw-medium); }

/* payment picker — a real decision, so real radios in a hairline list */
.pay-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pay-opt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background var(--t); }
.pay-opt + .pay-opt { border-top: 1px solid var(--line); }
.pay-opt:hover { background: var(--tint-row); }
.pay-opt:has(input:checked) { background: var(--brand-tint); box-shadow: inset 2px 0 0 var(--brand); }
.pay-opt input { appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto; width: 19px; height: 19px; border-radius: var(--pill); border: 2px solid var(--line-strong); background: var(--card); cursor: pointer; transition: border-color var(--t), background var(--t), box-shadow var(--t); }
.pay-opt input:checked { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3.5px var(--card); }
.pay-opt input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pay-body { flex: 1; min-width: 0; }
.pay-name { font-weight: 650; }
.pay-sub { color: var(--muted); font-size: var(--text-sm); }
.pay-mark { flex: 0 0 auto; display: flex; color: var(--muted); }

/* the field error repeated above the submit button, because on a phone the field
   is off-screen by the time the button is tapped (see .field-error in forms) */
.co-errsum { display: flex; align-items: flex-start; gap: 8px; padding: 11px 13px; border: 1px solid var(--danger-line); border-radius: var(--r-md); background: var(--card); }
.co-errsum .ico { flex: 0 0 auto; margin-top: 2px; color: var(--danger); }
.co-errsum span { font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--danger); }
.co-errsum a { margin-left: auto; white-space: nowrap; font-weight: var(--fw-bold); color: var(--danger); text-decoration: underline; }
/* the summary line, the vendor notice and the § 312j button stay one block */
.co-actions > .co-errsum { margin-top: var(--space-4); }

/* collapsed summary row — phones only (see the ≤819px block) */
.co-sum-mini { display: none; }

@media (max-width: 1023px) {
    .cart-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
    .checkout-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
}
@media (max-width: 819px) {
    .cart-layout,
    .checkout-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    /* summary + § 312j button come AFTER the form on a phone */
    .cart-layout > aside,
    .checkout-layout > aside { position: static; order: 2; }

    .cart-head-row { margin-bottom: 16px; }
    .cart-row { padding: var(--row-y) var(--row-x); gap: 12px; flex-wrap: wrap; }
    .cart-list-head,
    .cart-addmore { padding: 12px var(--row-x); }
    .cr-thumb { width: 52px; height: 52px; }
    .cr-main { flex: 1 1 auto; min-width: 55%; }
    .cart-row .qty-inline { order: 3; }
    .cr-price { order: 4; width: auto; margin-left: auto; }

    /* one tappable line at the top: "4 Artikel · 32,70 €" → jumps to the summary */
    .co-sum-mini { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 13px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); font-weight: var(--fw-bold); color: inherit; }
    .co-sum-mini:hover { text-decoration: none; }
    .co-sum-mini .co-mini-total { margin-left: auto; font-weight: 800; }
    .co-sum-mini .ico { color: var(--muted); }

    .co-step { padding: 16px var(--row-x); }
    /* street spans the row, PLZ + Stadt share the next one */
    .co-grid-addr { grid-template-columns: 110px 1fr; gap: 10px; }
    .co-grid-addr > :first-child { grid-column: 1 / -1; }
    .co-grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 390px) {
    .cart-row { padding: 12px var(--row-x); }
    .cr-thumb { width: 48px; height: 48px; }
}

/* ============================================================================
 * ORDER TRACKING (shop/track.html.twig) — 1a
 * The promised time IS the headline (3rem, tabular) and the five equal progress
 * bars became a real timeline with timestamps: horizontal on desktop, a vertical
 * list of 22px markers on a phone. Replaces .track-steps.
 * ========================================================================== */
.tr-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.tr-h1 { margin: 0; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.02em; }
.tr-head-ref { font-size: var(--text-sm); color: var(--muted); }
.tr-head-ref strong { color: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }

/* the PayPal "finish paying" alert: message + button on one row */
.tr-pay-alert { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.tr-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.tr-main { display: flex; gap: 32px; align-items: center; padding: 24px 24px 20px; }

/* ETA block — the page's visual headline. Carries role=group + aria-label so the
   bare figure has an accessible name ("Voraussichtlich fertig gegen 18:55."). */
.tr-eta { flex: 0 0 auto; }
.tr-eta-k { font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tr-eta-t { font-size: 3rem; line-height: 1; letter-spacing: -.03em; font-weight: var(--fw-bold); font-variant-numeric: var(--num); margin-top: 6px; }
.tr-eta-rel { color: var(--ink-soft); font-size: .9375rem; margin-top: 4px; font-variant-numeric: var(--num); }
.tr-sep { width: 1px; align-self: stretch; flex: 0 0 auto; background: var(--line); }

.tr-state { flex: 1; min-width: 0; }
.tr-state-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tr-state-note { font-size: var(--text-sm); color: var(--muted); }
/* cancelled is the one state the muted sentence must not whisper */
.tr-state-note.is-alert { color: var(--danger); font-weight: var(--fw-semibold); }
/* no promised time yet (or the order is finished): the state sentence IS the headline */
.tr-main.is-plain .tr-state-note { font-size: var(--text-lg); font-weight: var(--fw-semibold); }
.tr-main.is-plain .tr-state-note:not(.is-alert) { color: var(--ink); }

/* timeline — desktop: one 4px bar per step, label + time underneath */
.tr-timeline { display: flex; margin-top: 18px; }
.tr-step { flex: 1; padding-right: 12px; }
.tr-step:last-child { padding-right: 0; }
.tr-bar { display: block; height: 4px; border-radius: 2px; background: var(--line); }
.tr-bar .ico { display: none; }                       /* marker glyph is a ≤819px thing */
.tr-step.is-done .tr-bar { background: var(--brand); }
.tr-step-l { display: block; margin-top: 8px; font-size: .8125rem; color: var(--muted); }
.tr-step.is-done .tr-step-l { color: var(--ink); font-weight: var(--fw-semibold); }
.tr-step.is-current .tr-step-l { font-weight: var(--fw-bold); }
.tr-step-t { display: block; font-size: .8125rem; color: var(--muted); font-variant-numeric: var(--num); }

/* card foot: "this page refreshes itself" + call-the-restaurant */
.tr-foot { display: flex; align-items: center; gap: var(--space-4); padding: 12px 24px; border-top: 1px solid var(--line); background: var(--tint-row); font-size: var(--text-sm); color: var(--muted); flex-wrap: wrap; }

.tr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin-top: 20px; }
.tr-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-list-head { padding: 14px 20px; border-bottom: 1px solid var(--line); font-weight: var(--fw-bold); }
.tr-lines { padding: 4px 20px; }                      /* holds the shared .rail-line rows */
.tr-total-pay { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-soft); }

/* detail list — key left, value right, hairline between rows */
.tr-dl { padding: 4px 18px 12px; }
.dl-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.dl-row:last-child { border-bottom: 0; }
.dl-k { flex: 0 0 auto; color: var(--muted); font-size: var(--text-sm); }
.dl-v { min-width: 0; font-weight: 650; font-size: .9375rem; text-align: right; }
.dl-v.num { font-variant-numeric: var(--num); }
.dl-pay.is-paid { color: var(--ok); }
.dl-pay.is-pending { color: var(--warn); }
.dl-pay.is-failed { color: var(--danger); }
.dl-pay.is-refunded { color: var(--muted); }

/* guest-only, never a wall: one quiet row offering an account for next time */
.tr-account { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); }
.tr-account > .tr-account-txt { flex: 1 1 200px; font-size: var(--text-sm); color: var(--ink-soft); }
.tr-account > .btn { flex: 0 0 auto; }
.tr-account-title { display: block; color: var(--ink); font-weight: var(--fw-semibold); }

.tr-back { margin-top: var(--space-5); }

@media (max-width: 1023px) {
    .tr-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
    .tr-main { gap: 24px; }
}
@media (max-width: 819px) {
    .tr-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }

    /* head stacks: kicker, then the big time with the relative line beside it */
    .tr-main { flex-direction: column; align-items: stretch; gap: 0; padding: 18px 16px 16px; }
    .tr-sep { display: none; }
    .tr-eta { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
    .tr-eta-k { flex: 1 0 100%; }
    .tr-eta-t { font-size: 2.75rem; }
    .tr-eta-rel { margin-top: 0; }
    .tr-eta ~ .tr-state { margin-top: 12px; }   /* only when the ETA sits above it */

    /* timeline turns into a vertical list of 22px markers */
    .tr-timeline { flex-direction: column; margin-top: 14px; border-top: 1px solid var(--line); }
    .tr-step { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
    .tr-step:first-child { border-top: 0; }
    .tr-bar { flex: 0 0 auto; display: grid; place-items: center; height: 22px; width: 22px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--card); color: var(--brand-contrast); }
    .tr-step.is-done .tr-bar { border-color: var(--brand); background: var(--brand); }
    .tr-step.is-done .tr-bar .ico { display: block; }
    /* the step you are on reads as a dot, not a tick — it is not finished yet */
    .tr-step.is-current .tr-bar .ico { display: none; }
    .tr-step.is-current .tr-bar::after { content: ""; height: 8px; width: 8px; border-radius: 50%; background: var(--brand-contrast); }
    .tr-step-l { flex: 1; margin-top: 0; font-size: .9375rem; }
    .tr-step-t { font-size: var(--text-sm); }

    /* the sentence wraps on a phone — let the call button follow it, left-aligned */
    .tr-foot { gap: 10px; }
    .tr-foot .spacer { display: none; }
}
@media (max-width: 390px) {
    .tr-main { padding: 16px 14px 14px; }
    .tr-foot { padding: 12px 14px; }
    .tr-list-head { padding: 13px 14px; }
    .tr-lines { padding: 2px 14px; }
    .tr-dl { padding: 2px 14px 10px; }
    .tr-account { padding: 13px 14px; }
}

/* ---- order audit ledger (timeline) ---- */
.ledger { list-style: none; margin: 0; padding: 0; position: relative; }
.ledger-row { position: relative; display: flex; gap: 14px; padding: 0 0 18px 4px; }
.ledger-row::before { content: ""; position: absolute; left: 9px; top: 16px; bottom: -2px; width: 2px; background: var(--line-strong); }
.ledger-row:last-child { padding-bottom: 0; }
.ledger-row:last-child::before { display: none; }
.ledger-dot { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 3px; border-radius: var(--pill); background: var(--muted); box-shadow: 0 0 0 4px var(--card); position: relative; z-index: 1; }
.ledger-placed .ledger-dot { background: var(--info); }
.ledger-payment_initiated .ledger-dot { background: var(--warn); }
.ledger-payment_confirmed .ledger-dot { background: var(--ok); }
.ledger-payment_failed .ledger-dot,
.ledger-payment_cancelled .ledger-dot { background: var(--danger); }
.ledger-status_changed .ledger-dot { background: var(--brand); }
.ledger-main { flex: 1; min-width: 0; }
.ledger-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; color: var(--ink); }
.ledger-meta { font-size: .82rem; color: var(--muted); margin-top: 2px; }
.ledger-ref { font-size: .78rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 7px; color: var(--ink-soft); word-break: break-all; }

/* ---- site footer ---- */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--card); }
.site-footer .container { padding-top: 28px; padding-bottom: 24px; }
.sf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; }
.sf-links { display: flex; gap: 18px; flex-wrap: wrap; }
.sf-links a { color: var(--ink-soft); font-size: .9rem; font-weight: 500; text-decoration: none; }
.sf-links a:hover { color: var(--brand); }
.sf-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sf-bottom .nav a { font-size: .8rem; color: var(--muted); padding: 4px 7px; border-radius: var(--r-sm); text-decoration: none; }
.sf-bottom .nav a.active { background: var(--bg); color: var(--ink); font-weight: 600; }

/* Vendor-clarity block: the restaurant is the seller & contracting partner (goeat brokers). */
.sf-vendor { padding-bottom: var(--space-4); margin-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.sf-vendor-link { display: inline-block; margin-top: var(--space-1); color: var(--brand); text-decoration: none; }
.sf-vendor-link:hover { text-decoration: underline; }
.sf-plat-label { flex-basis: 100%; }
.vendor-notice { font-size: var(--text-sm); color: var(--ink-soft); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--space-3); margin-top: var(--space-3); }
.vendor-notice a { color: var(--brand); }

/* ---- restaurant-list thumbnail glyph (initial when there is no photo) ---- */
.resto-cover-glyph { font-size: 1.375rem; font-weight: var(--fw-bold); color: var(--brand); letter-spacing: 0; }

/* ---- notice bars (draft / paused) ---- */
.notice-bar { text-align: center; padding: 9px 16px; font-size: .92rem; font-weight: 600; }
.notice-draft { background: var(--info-tint); color: var(--info); }
.notice-paused { background: var(--warn-tint); color: var(--warn); }
.notice-bar a { font-weight: 700; }
.notice-bar form { display: inline; }
.link-btn { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---- manage mobile tab bar ---- */
.mobile-tabbar { display: none; }
@media (max-width: 600px) {
    .mobile-tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; background: var(--card); border-top: 1px solid var(--line-strong); padding: 6px 2px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(16,24,29,.07); }
    /* Six top-level sections — slightly tighter labels/padding so they all fit one phone row. */
    /* flex-basis auto (not equal slots): the long German labels (Bestellungen,
       Einstellungen) take the room the short ones (Start, Menü) give up. */
    .mobile-tabbar a { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .6rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: 4px 3px; border-radius: var(--r-sm); white-space: nowrap; }
    .mobile-tabbar a span { font-size: 1.08rem; }
    .mobile-tabbar a.active { color: var(--brand); }
    body:has(.mobile-tabbar) .page { padding-bottom: 96px; }
}

/* ---- opening hours table ---- */
.hours-table td, .hours-table th { padding: 8px 10px; }
.hours-table input[type=time] { width: auto; padding: 7px 9px; }

/* Language tabs (menu editor per-locale inputs) */
.locale-tabs { display: inline-flex; gap: 4px; }
.locale-tab { padding: 4px 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; color: var(--muted); background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--pill); cursor: pointer; transition: color var(--t), background var(--t), border-color var(--t); }
.locale-tab:hover { color: var(--ink); }
.locale-tab.active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---- split opening hours ---- */
.hours-range { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.hours-range-x {
    border: 0; background: none; cursor: pointer; color: var(--muted);
    font-size: 15px; line-height: 1; padding: 2px 4px; border-radius: var(--r-sm);
}
.hours-range-x:hover { color: var(--brand); background: var(--brand-tint); }
.hours-details { margin-top: 10px; font-size: .9rem; }
.hours-details summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.hours-details summary::-webkit-details-marker { display: none; }
.hours-details summary .ico { color: var(--muted); transition: transform var(--t); }
.hours-details[open] summary .ico:last-child { transform: rotate(180deg); }
.hours-display { border-collapse: collapse; margin-top: 8px; }
.hours-display th { text-align: left; padding: 2px 16px 2px 0; font-weight: 600; color: var(--ink-soft); }
.hours-display td { padding: 2px 0; }

/* The hidden attribute always wins, even on elements whose class sets display
   (e.g. .btn { display: inline-flex } used to override [hidden]). */
[hidden] { display: none !important; }

/* ---- Menu import: full-screen analyzing overlay ---- */
#analyzing-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
}
.analyzing-box {
    max-width: 460px;
    text-align: center;
}
.analyzing-box h2 {
    margin: 0 0 10px;
}
.analyzing-emoji {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
    animation: analyzing-bounce 1.6s ease-in-out infinite;
}
@keyframes analyzing-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.analyzing-quip {
    min-height: 48px;
    color: var(--muted);
    font-size: 17px;
    transition: opacity 0.35s ease;
}
.analyzing-bar {
    height: 6px;
    margin: 18px auto 14px;
    max-width: 320px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden;
    position: relative;
}
.analyzing-bar-fill {
    position: absolute;
    inset: 0;
    width: 35%;
    border-radius: 999px;
    background: var(--brand);
    animation: analyzing-slide 1.8s ease-in-out infinite;
}
@keyframes analyzing-slide {
    0% { left: -35%; }
    100% { left: 100%; }
}
.analyzing-clock {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    margin-bottom: 14px;
}
.analyzing-note {
    font-size: 14px;
    color: var(--muted);
    background: var(--warn-tint);
    border: 1px solid var(--warn-tint);
    border-radius: 10px;
    padding: 10px 14px;
}

/* ---- Menu import: three equal-citizen method cards (photo / website / manual) ---- */
.import-methods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}
.import-methods .method-card {
    display: flex;
    flex-direction: column;
    margin-top: 0;
}
.method-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.method-icon {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-tint); color: var(--brand);
}
.method-card h3 { margin: 0; }
.method-card .method-lead {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.5;
    margin: 0 0 16px;
}
/* The form fills the card and pins its CTA to the bottom, so all three
   card buttons sit on one line regardless of how much copy sits above. */
.method-card > form { display: flex; flex-direction: column; flex: 1; }
.method-card > form .btn-block { margin-top: auto; }
.method-card > form .form-row { margin-bottom: var(--space-4); }
.method-card > .method-foot { margin-top: auto; }
@media (max-width: 860px) {
    .import-methods { grid-template-columns: minmax(0, 1fr); }
    .method-card > form,
    .method-card > .method-foot { margin-top: 12px; }
}
/* ---------- menu import hub ---------- */
.imp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); }
.imp-head h1 { margin-bottom: 0; }
.imp-lead { max-width: 640px; margin: 6px 0 0; }

/* Drag-and-drop upload zone (the visible face of the hidden file input). */
.imp-drop {
    flex: 1; min-height: 150px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer;
    padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4); text-align: center;
    border: 2px dashed var(--line-strong); border-radius: var(--r); background: var(--bg);
    transition: border-color var(--t), background var(--t);
}
.imp-drop:hover, .imp-drop.dragging { border-color: var(--brand); background: var(--brand-tint); }
.imp-drop:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.imp-drop.has-files { border-style: solid; border-color: var(--ok); background: var(--ok-tint); }
.imp-drop-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.imp-drop-icon { color: var(--muted); }
.imp-drop:hover .imp-drop-icon, .imp-drop.dragging .imp-drop-icon { color: var(--brand); }
.imp-drop-cta { font-weight: var(--fw-semibold); }
.imp-drop-hint { font-size: var(--text-xs); color: var(--muted); }
.imp-drop-picked { font-size: var(--text-xs); color: var(--ok); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }

/* Numbered how-it-works strip. */
.imp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.imp-step { display: flex; align-items: flex-start; gap: var(--space-3); }
.imp-step p { margin: 3px 0 0; color: var(--ink-soft); font-size: var(--text-sm); line-height: 1.55; }
.imp-step-num {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-tint); color: var(--brand-dark); font-weight: var(--fw-bold);
}
.imp-notes { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); border-top: 1px solid var(--line); padding-top: var(--space-4); }
.imp-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--muted); font-size: var(--text-sm); max-width: 520px; }
.imp-note .ico { flex: 0 0 auto; margin-top: 2px; }
@media (max-width: 860px) {
    .imp-head { flex-direction: column; }
    .imp-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

/* ============================================================================
 * ONBOARDING WIZARD (1a) — full-bleed shell: the wizard owns the page, so main's
 * container gutters are zeroed and every band supplies its own 1080px column.
 * Progress head + step list left, ONE step card right, footer action bar.
 * ========================================================================== */
.wiz-page main.container.page { max-width: none; padding: 0 0 56px; }
.wiz-page main.container.page > .alert { width: min(1080px, 100% - 40px); margin: 16px auto 0; }

/* --- minimal wizard topbar --- */
.wiz-top { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
.wiz-top-inner { display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 20px; }
.wiz-top-sep { width: 1px; height: 20px; background: var(--line); margin-left: 6px; flex: 0 0 auto; }
.wiz-top-label { font-size: .9375rem; font-weight: var(--fw-semibold); color: var(--ink-soft); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-draft {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 6px 12px; border-radius: var(--r-sm);
    background: var(--warn-tint); color: var(--warn); font-size: var(--text-sm); font-weight: var(--fw-bold);
}
.wiz-top-later { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-soft); flex: 0 0 auto; text-decoration: none; }
.wiz-top-later:hover { color: var(--brand); }
/* wizard-scoped label swap — flips at 819px, unlike the global .hide-mobile (600px) */
.wiz-short { display: none; }

/* --- progress head --- */
.wiz-head { margin: 0; background: var(--card); border-bottom: 1px solid var(--line-strong); }
.wiz-head-inner { max-width: 1080px; margin: 0 auto; padding: 18px 20px 0; }
.wiz-head-row { display: flex; align-items: baseline; gap: 12px; }
.wiz-head-title { margin: 0; font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.02em; font-weight: var(--fw-bold); }
.wiz-head-step { display: none; }                 /* mobile only */
.wiz-head-count { margin-left: auto; font-size: .9375rem; color: var(--ink-soft); }
.wiz-track { display: flex; gap: 4px; margin-top: 12px; padding-bottom: 16px; }
.wiz-track-cell { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.wiz-track-cell.is-done { background: var(--ok); }
.wiz-track-cell.is-current { background: var(--brand); }
.wiz-crumbs { display: none; }                    /* mobile only */

/* --- grid --- */
.wiz-wrap { max-width: 1080px; margin: 0 auto; padding: 28px 20px 56px; }
.wiz-wrap-narrow { max-width: 560px; }
.wiz-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 28px; align-items: start; }
.wiz-cardwrap { min-width: 0; }

/* --- step list (left rail) --- */
.wiz-steps {
    display: block; list-style: none; margin: 0; padding: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.wiz-step { display: block; text-align: start; }
.wiz-step + .wiz-step, .wiz-steps-foot { border-top: 1px solid var(--line); }
.wiz-stepin { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
a.wiz-stepin:hover { background: var(--tint-row); text-decoration: none; }
a.wiz-stepin:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.wiz-mark {
    flex: 0 0 auto; display: grid; place-items: center; height: 26px; width: 26px;
    border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line);
    color: var(--muted); font-size: .8125rem; font-weight: var(--fw-bold);
}
.wiz-steptext { flex: 1; min-width: 0; }
.wiz-label { display: block; font-weight: var(--fw-semibold); font-size: .9375rem; line-height: 1.35; color: var(--ink-soft); }
.wiz-sub { display: block; font-size: .8125rem; color: var(--muted); }
.wiz-step.is-done .wiz-mark { background: var(--ok-tint); border-color: transparent; color: var(--ok); }
.wiz-step.is-done .wiz-label { font-weight: 650; color: var(--ink); }
.wiz-step.is-current { background: var(--brand-tint); box-shadow: inset 2px 0 0 var(--brand); }
.wiz-step.is-current .wiz-mark { background: var(--brand); border-color: var(--brand); color: #fff; }
.wiz-step.is-current .wiz-label { font-weight: var(--fw-bold); color: var(--brand-dark); }
.wiz-step.is-current .wiz-sub { color: var(--brand-dark); }
.wiz-steps-foot { padding: 14px 16px; background: var(--tint-row); font-size: .8125rem; color: var(--muted); line-height: 1.5; }

/* --- the one visible step --- */
.wiz-card {
    display: block;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.wiz-card-body { padding: 24px 26px 20px; }
.wiz-card-body .form-row:last-child { margin-bottom: 0; }
.wiz-card-body .form-row label { font-size: .9375rem; }
.wiz-q { font-size: 1.625rem; letter-spacing: -.025em; margin: 8px 0 0; line-height: 1.2; font-weight: var(--fw-bold); }
.wiz-lead { color: var(--ink-soft); margin: 8px 0 22px; max-width: 52em; line-height: 1.6; }

/* the standalone panel (thank-you / done screen) keeps the same card look */
.wiz-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; }
.wiz-panel h1 { margin: 0 0 6px; font-size: 1.5rem; }

/* --- footer bar --- */
.wiz-bar {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 26px; border-top: 1px solid var(--line); background: var(--tint-row);
}
.wiz-bar-back { padding: 11px 16px; font-size: .9375rem; }
.wiz-bar-later { font-size: var(--text-sm); color: var(--muted); flex: 0 0 auto; text-decoration: none; }
.wiz-bar-later:hover { color: var(--ink); text-decoration: underline; }

/* --- address field, wizard flavour (scoped: home + settings keep their own look) --- */
/* the shared wrap is display:flex because home floats the dropdown absolutely;
   here the suggestion list is in the flow, so it must stack under the field */
.wiz-addr .addr-field-wrap { display: block; }
.wiz-addr .addr-field {
    border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--card);
    padding: 0 10px 0 14px; box-shadow: none; gap: 10px;
    transition: border-color var(--t), box-shadow var(--t);
}
.wiz-addr .addr-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.wiz-addr .addr-icon { color: var(--muted); display: inline-flex; font-size: inherit; }
.wiz-addr .addr-field input { padding: 14px 0; font-size: 1.0625rem; }
.wiz-addr .addr-gps {
    height: 34px; width: 34px; border-radius: var(--r-sm); font-size: inherit;
    border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft);
    display: grid; place-items: center;
}
.wiz-addr .addr-gps:hover { background: var(--bg); }
/* suggestions: a static hairline list, not a floating pill dropdown */
.wiz-addr .addr-suggest {
    position: static; margin-top: 8px; padding: 0;
    border: 1px solid var(--line-strong); border-radius: var(--r);
    box-shadow: var(--shadow); overflow: hidden; background: var(--card);
}
.wiz-addr .addr-suggest-item { border-radius: 0; padding: 12px 14px; gap: 12px; }
.wiz-addr .addr-suggest-item + .addr-suggest-item { border-top: 1px solid var(--line); }
.wiz-addr .addr-suggest-item.active,
.wiz-addr .addr-suggest-item:hover { background: var(--brand-tint); box-shadow: inset 2px 0 0 var(--brand); }
.wiz-addr .addr-suggest-item .as-pin { color: var(--muted); display: inline-flex; opacity: 1; }
.wiz-addr .addr-suggest-item.active .as-pin { color: var(--brand-dark); }
.wiz-addr .as-hint { flex: 0 0 auto; font-size: .8125rem; color: var(--muted); display: none; }
.wiz-addr .addr-suggest-item.active .as-hint { display: inline; }

/* service-type pills */
.pill-toggles { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
    display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: var(--pill);
    border: 1.5px solid var(--line); cursor: pointer; user-select: none; font-size: 14px;
}
.pill:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-dark); font-weight: 600; }
.pill input { accent-color: var(--brand); }

/* delivery-area map step */
.area-radiusbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; flex-wrap: wrap; }
.area-radiusbar label { font-weight: 600; }
.area-radiusbar input[type=range] { flex: 1; min-width: 180px; accent-color: var(--brand); }
.area-radius-val { font-variant-numeric: var(--num); font-weight: 600; color: var(--brand-dark); white-space: nowrap; }
.area-map {
    height: 58vh; min-height: 340px; width: 100%;
    border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; z-index: 0;
}
.area-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.area-tools .help { flex: 1; min-width: 160px; }
[data-area-wrap][hidden] { display: none; }
.leaflet-container { font: inherit; }

/* onboarding thank-you (final hand-off screen) */

@media (max-width: 1023px) {
    .wiz-grid { grid-template-columns: 240px 1fr; gap: 20px; }
}
@media (max-width: 819px) {
    .wiz-top { position: static; }
    .wiz-top-inner { height: 54px; padding: 0 16px; gap: 8px; }
    .wiz-top-sep, .wiz-top-label, .wiz-long { display: none; }
    .wiz-short { display: inline; }
    .wiz-draft { padding: 5px 10px; font-size: var(--text-xs); }
    .wiz-top-later { font-size: .8125rem; color: var(--muted); }

    .wiz-head { position: sticky; top: 0; z-index: 30; }
    .wiz-head-inner { padding: 12px 16px; }
    .wiz-head-title { display: none; }
    .wiz-head-step { display: inline-block; }
    .wiz-head-count { font-size: .8125rem; }
    .wiz-track { gap: 3px; margin-top: 10px; padding-bottom: 0; }
    .wiz-crumbs {
        display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
        margin-top: 10px; font-size: .8125rem; color: var(--muted);
    }
    .wiz-crumb { display: inline-flex; align-items: center; gap: 5px; }
    .wiz-crumb.is-done { color: var(--ok); font-weight: 650; }
    .wiz-crumb.is-current { color: var(--brand-dark); font-weight: var(--fw-bold); }
    .wiz-crumb-sep { color: var(--line-strong); }

    .wiz-wrap { padding: 20px 16px 0; }
    .wiz-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .wiz-steps { display: none; }                 /* the breadcrumb replaces it */
    .wiz-card { border-left: 0; border-right: 0; border-radius: 0; margin: 0 -16px; box-shadow: none; }
    .wiz-card-body { padding: 20px 16px; }
    .wiz-panel { padding: 20px 16px; }
    .wiz-q { font-size: 1.5rem; }
    .wiz-lead { font-size: .9375rem; margin-bottom: 18px; }

    /* sticky bottom action bar */
    .wiz-bar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        flex-direction: column; align-items: stretch; gap: 10px;
        padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
        background: var(--card); border-top: 1px solid var(--line-strong);
        box-shadow: var(--shadow-bar);
    }
    .wiz-bar .spacer { display: none; }
    .wiz-bar-next { order: -1; width: 100%; }
    .wiz-bar-back { order: 1; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--muted); font-size: .8125rem; }
    .wiz-bar-later { order: 2; margin-left: auto; margin-top: -22px; font-size: .8125rem; }
    .wiz-page main.container.page { padding-bottom: 140px; }
    .wiz-addr .addr-gps { height: 36px; width: 36px; }
    .wiz-addr .addr-field input { font-size: 1rem; }
}
@media (max-width: 390px) {
    .wiz-card-body { padding: 18px 14px; }
    .wiz-q { font-size: 1.375rem; }
}

/* ---------- accessibility & motion best practices ---------- */
/* One focus ring everywhere: 2px brand, 2px offset (1a rule). The only exceptions are
   controls that live inside an overflow:hidden container, where a positive offset would
   be clipped — those set outline-offset: -2px on themselves. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
.cart-btn:focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    html { scroll-behavior: auto; }
}

/* ============ Manage order detail — header toolbar, two-column layout, receipt Bon ============ */

/* Header: identity + status chips on the left, the action toolbar on the right. */
.order-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.order-back { display: inline-block; font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-2); }
.order-back:hover { color: var(--ink); }
.order-title { margin: 0; }
.order-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.order-actions form { margin: 0; }

/* Body: receipt (hero) beside a stack of detail cards. */
.order-layout { display: grid; grid-template-columns: minmax(340px, 480px) 1fr; gap: var(--space-5); align-items: start; }
.order-side { display: flex; flex-direction: column; gap: var(--space-4); }

/* Clean definition list for the Details / Kunde cards. */
.def-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0; }
.def-list dt { color: var(--muted); font-size: var(--text-sm); font-weight: var(--fw-medium); }
.def-list dd { margin: 0; text-align: right; }

/* ---- The thermal Bon ---- */
.receipt-wrap { display: flex; justify-content: center; }
.receipt {
    position: relative; width: 100%; max-width: 470px;
    background: var(--card); color: var(--ink);
    font-family: var(--font-mono); font-size: .95rem; line-height: 1.5;
    padding: 34px 30px 38px;
    box-shadow: var(--shadow-lg);
}
/* Perforated edges: page-colour triangles biting into the paper (pure CSS). */
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 13px; }
.receipt::before {
    top: 0;
    background:
        linear-gradient(45deg, transparent 50%, var(--bg) 51%) 0 0 / 13px 13px repeat-x,
        linear-gradient(-45deg, transparent 50%, var(--bg) 51%) 0 0 / 13px 13px repeat-x;
}
.receipt::after {
    bottom: 0;
    background:
        linear-gradient(135deg, transparent 50%, var(--bg) 51%) 0 0 / 13px 13px repeat-x,
        linear-gradient(-135deg, transparent 50%, var(--bg) 51%) 0 0 / 13px 13px repeat-x;
}
.receipt-head { text-align: center; }
.receipt-name { font-weight: var(--fw-bold); font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase; }
.receipt-sub { color: var(--muted); font-size: .85rem; }
.receipt-meta { text-align: center; }
.receipt-ref { font-weight: var(--fw-bold); letter-spacing: .14em; font-size: 1.05rem; }
.receipt-flag { margin-top: 2px; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.receipt-rule { border-top: 1px dashed var(--line-strong); margin: var(--space-3) 0; }
.receipt-items { font-size: 1.02rem; }
.receipt-line { display: flex; align-items: baseline; gap: .35em; }
.receipt-qty { color: var(--brand); font-weight: var(--fw-bold); flex: 0 0 auto; }
.receipt-name-cell { flex: 0 1 auto; min-width: 0; text-transform: uppercase; letter-spacing: .02em; }
.receipt-leader { flex: 1 1 auto; min-width: 1.5em; border-bottom: 1px dotted var(--line-strong); transform: translateY(-.28em); }
.receipt-price { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.receipt-subline { color: var(--muted); font-size: .84rem; padding-left: 1.9em; }
.receipt-note { margin-top: var(--space-3); border: 1px dashed var(--line-strong); border-radius: var(--r-sm); padding: var(--space-2) var(--space-3); }
.receipt-note-label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.receipt-totals { position: relative; margin-top: var(--space-3); }
.receipt-trow { display: flex; align-items: baseline; gap: .35em; color: var(--ink-soft); font-size: .9rem; }
.receipt-grand { display: flex; align-items: baseline; gap: .35em; font-weight: var(--fw-bold); font-size: 1.2rem; margin-top: 2px; }
.receipt-grand .lbl { text-transform: uppercase; letter-spacing: .08em; }
.receipt-vat { text-align: right; color: var(--muted); font-size: .74rem; margin-top: 2px; }
.receipt-cash { margin-top: var(--space-2); text-align: center; color: var(--warn); font-weight: var(--fw-bold); font-size: .84rem; letter-spacing: .04em; text-transform: uppercase; }
/* Rubber stamp for a paid Bon — success-tinted outline, gently rotated, low opacity. */
.receipt-stamp {
    position: absolute; right: 4px; top: -6px;
    font-weight: 800; font-size: 1.9rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--ok); opacity: .5;
    border: 3px solid var(--ok); border-radius: var(--r-sm); padding: 2px 12px;
    transform: rotate(-8deg); pointer-events: none;
}

@media (max-width: 820px) {
    .order-layout { grid-template-columns: minmax(0, 1fr); }
    .order-receipt-col { order: 2; }
    .order-actions { width: 100%; }
}

/* ---------- print: strip the chrome so the Bon alone prints as the kitchen ticket ---------- */
@media print {
    .no-print, .topbar, .mobile-tabbar, .impersonation-bar, .notice-bar, .flash-stack, .alert { display: none !important; }
    body { background: #fff; }
    .container.page { max-width: none; margin: 0; padding: 0; }
    .card { box-shadow: none; border: 1px solid var(--line-strong); break-inside: avoid; }
    a { color: var(--ink); text-decoration: none; }
    /* Only the receipt prints — it IS the kitchen ticket. */
    .order-layout { display: block; }
    .receipt { box-shadow: none; max-width: none; width: 100%; font-size: .85rem; padding: 0 4px; }
    .receipt-items { font-size: .9rem; }
    .receipt::before, .receipt::after { display: none; }
}

/* ============ Utility classes — token-driven; prefer over inline styles ============ */
.flex-1{flex:1}
.items-start{align-items:flex-start}
.mt-0{margin-top:0}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mt-5{margin-top:var(--space-5)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.mb-5{margin-bottom:var(--space-5)}.mb-6{margin-bottom:var(--space-6)}.mb-8{margin-bottom:var(--space-8)}
.mx-auto{margin-left:auto;margin-right:auto}
.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.p-5{padding:var(--space-5)}.p-6{padding:var(--space-6)}
.gap-1{gap:var(--space-1)}.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}.gap-5{gap:var(--space-5)}
.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}
.text-muted{color:var(--muted)}.text-brand{color:var(--brand)}.text-center{text-align:center}
.fw-medium{font-weight:var(--fw-medium)}.fw-semibold{font-weight:var(--fw-semibold)}.fw-bold{font-weight:var(--fw-bold)}
/* Figures: money, minutes, quantities, clock times, references, postal codes.
   Wrap any number that sits in a column the eye scans down. */
.num{font-variant-numeric:var(--num)}

/* ---- Sticky save bar (long settings forms) ----
   Sticks to the bottom of the viewport while its form is on screen, so the Save
   button is always reachable without hunting for it mid-page. Sits IN the form's
   flow (position: sticky), so it never covers content and stops sticking once the
   form scrolls away. On mobile it clears the fixed .mobile-tabbar. */
.save-bar {
    position: sticky;
    bottom: var(--space-4);
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--card);
    border: 1px solid var(--line-strong);
    border-radius: var(--pill);
    box-shadow: var(--shadow-lg);
}
.save-bar .save-hint { flex: 1; min-width: 0; color: var(--muted); font-size: var(--text-sm); }
.save-bar .btn { flex: 0 0 auto; }
@media (max-width: 600px) {
    .save-bar { bottom: calc(var(--space-3) + 74px + env(safe-area-inset-bottom)); border-radius: var(--r); }
    .save-bar .btn { flex: 1 0 auto; }
    /* The hint is boilerplate; on phones it wraps to 4 lines beside the button. */
    .save-bar .save-hint { display: none; }
}

/* ---- Impersonation banner (admin acting as a restaurant) ---- */
.impersonation-bar { background: var(--ink); color: #fff; text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.impersonation-bar a { color: #fff; text-decoration: underline; margin-left: var(--space-2); font-weight: var(--fw-bold); }

/* ---- Horizontal rule ---- */
.rule { margin: var(--space-5) 0; border: 0; border-top: 1px solid var(--line); }

/* ============ Style guide (internal reference page) ============ */
.sg-section { margin: 0 0 var(--space-8); }
.sg-section > h2 { border-bottom: 2px solid var(--line); padding-bottom: var(--space-2); margin-bottom: var(--space-4); }
.sg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.sg-swatch .sw { height: 64px; }
.sg-swatch .meta { padding: var(--space-2) var(--space-3); }
.sg-swatch .meta b { display: block; font-size: var(--text-sm); }
.sg-swatch .meta code { font-size: var(--text-xs); color: var(--muted); }
.sg-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-3); }
.sg-space-bar { background: var(--brand); height: 18px; border-radius: var(--r-sm); }
.sg-type-row { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); }
.sg-type-row code { color: var(--muted); font-size: var(--text-xs); min-width: 130px; }
.sg-card-demo { max-width: 320px; }

.input-color { width: 80px; height: 42px; padding: 4px; }

/* ============ Opening-hours editor (onboarding wizard) ============ */
.oh-list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-top: var(--space-3); }
.oh-row { display: grid; grid-template-columns: 108px 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--card); transition: background var(--t); }
.oh-row + .oh-row { border-top: 1px solid var(--line); }
.oh-row:hover { background: var(--bg); }
.oh-day { font-weight: var(--fw-semibold); }
.oh-times { display: flex; align-items: center; gap: var(--space-2); transition: opacity var(--t); }
.oh-times input[type=time] { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--text-sm); background: var(--card); color: var(--ink); font-family: var(--font); }
.oh-times input[type=time]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-tint); }
.oh-dash { color: var(--muted); }
.oh-row.is-closed .oh-times { opacity: .35; }
.oh-row.is-closed .oh-day { color: var(--muted); }
/* Open/Closed switch — the checkbox means "closed": unchecked = open (red, thumb right), checked = closed (grey, thumb left). */
.oh-switch { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; }
.oh-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.oh-switch .track { width: 42px; height: 24px; border-radius: var(--pill); background: var(--brand); position: relative; transition: background var(--t); flex: none; }
.oh-switch .track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--pill); background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--t); transform: translateX(18px); }
.oh-switch input:checked + .track { background: var(--line-strong); }
.oh-switch input:checked + .track::after { transform: translateX(0); }
.oh-switch input:focus-visible + .track { box-shadow: 0 0 0 3px var(--brand-tint); }
.oh-state { font-size: var(--text-sm); font-weight: var(--fw-medium); min-width: 52px; }
.oh-switch input:checked ~ .oh-state { color: var(--muted); }
.oh-switch input:checked ~ .oh-state .s-open { display: none; }
.oh-switch input:not(:checked) ~ .oh-state .s-closed { display: none; }
.oh-tools { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
@media (max-width: 600px) {
    .oh-row { grid-template-columns: 1fr auto; row-gap: var(--space-2); }
    .oh-times { grid-column: 1 / -1; }
}

/* ============ Integration API docs (/manage/api) ============ */
/* Copyable code sample: monospace, wraps in its own horizontal scroll so a long
   curl/JSON line never pushes the page body sideways on mobile. Colours are tokens. */
.code-block { background: var(--ink); color: var(--brand-contrast); border-radius: var(--r-sm); padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.55; margin: 0; }
.code-block code { font-family: inherit; white-space: pre; }
.code-label { display: block; font-size: var(--text-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: var(--space-4) 0 var(--space-2); }
.code-label:first-child { margin-top: 0; }

/* Endpoint heading: a coloured METHOD chip next to its path. */
.api-endpoint { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.api-method { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .03em; }
.api-method-get { background: var(--ok-tint); color: var(--ok); }
.api-method-post { background: var(--info-tint); color: var(--info); }
.api-path { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink); word-break: break-all; }
.api-endpoint-card + .api-endpoint-card { margin-top: var(--space-4); }

/* In-page section nav — wrapping chips, sticky under the topbar on wide screens. */
.api-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-5) 0; }
.api-nav a { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--pill); background: var(--card); border: 1px solid var(--line); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-soft); transition: border-color var(--t), color var(--t); }
.api-nav a:hover { border-color: var(--brand); color: var(--brand); }

/* A compact params/fields/errors table sits happily inside .table-wrap. */
.api-table td code, .api-table th code { font-family: var(--font-mono); font-size: var(--text-sm); }
.api-table td:first-child { white-space: nowrap; }

/* ============================================================================
 * DRIVER ("Fahrer") surface — 1a: dark topbar + tally, address-as-title cards,
 * money band. Mobile-first; the owner-side .drv-created* QR panel on
 * /manage/drivers is a separate, unrefined thing and keeps its own rules.
 * ========================================================================== */

/* Owner: the re-showable driver link + QR panel on /manage/drivers */
.drv-created { border: 1px solid var(--ok); background: var(--ok-tint); }
.drv-created-body { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.drv-qr { border-radius: var(--r); background: var(--card); padding: var(--space-2); box-shadow: var(--shadow-sm); }
.drv-created-link { flex: 1; min-width: 220px; }
.drv-link-input { width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); }

/* --- the driver's own page --- */
.drv-page main.container.page { max-width: none; padding: 0 0 32px; }
.drv-page main.container.page > .alert { width: min(640px, 100% - 32px); margin: 12px auto 0; }

.drv-top { position: sticky; top: 0; z-index: 20; background: var(--ink); color: #fff; }
.drv-top-inner { max-width: 640px; margin: 0 auto; }
.drv-top-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.drv-top-id { min-width: 0; flex: 1; }
.drv-top-name { font-weight: var(--fw-bold); font-size: var(--text-base); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.drv-top-sub { font-size: .8125rem; color: var(--on-dark-muted); }
.drv-refresh {
    flex: 0 0 auto; display: grid; place-items: center; height: 38px; width: 38px;
    padding: 0; font-size: inherit; text-decoration: none;
    border-radius: var(--r-sm); background: var(--on-dark-fill); color: #fff;
}
.drv-refresh:hover { background: var(--on-dark-fill-hover); text-decoration: none; }
/* three-cell tally row — replaces the old sticky page footer */
.drv-tally { display: flex; border-top: 1px solid var(--on-dark-fill); }
.drv-tally-cell {
    flex: 1; min-width: 0; padding: 10px 16px; color: #fff; text-decoration: none;
    border-bottom: 3px solid transparent;
}
.drv-tally-cell + .drv-tally-cell { border-left: 1px solid var(--on-dark-fill); }
.drv-tally-cell.is-active { border-bottom-color: var(--brand); }
a.drv-tally-cell:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.drv-tally-fig { display: block; font-size: var(--text-lg); font-weight: 800; line-height: 1.1; font-variant-numeric: var(--num); }
.drv-tally-lab { display: block; font-size: var(--text-xs); color: var(--on-dark-muted); font-weight: 650; }

.drv-wrap { max-width: 640px; margin: 0 auto; padding: 16px 16px 0; }
.drv-section { margin-bottom: 0; scroll-margin-top: 108px; }
.drv-section + .drv-section { margin-top: 24px; }
.drv-heading {
    display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ink);
    text-transform: none; letter-spacing: normal;
    padding-bottom: 8px; border-bottom: 2px solid var(--line-strong);
}
.drv-heading h2 { margin: 0; font-size: .9375rem; font-weight: var(--fw-bold); }
.drv-count { font-size: .9375rem; font-weight: var(--fw-bold); color: var(--brand); font-variant-numeric: var(--num); }
.drv-count-plain { color: var(--ink); }
.drv-empty {
    color: var(--muted); padding: var(--space-5) var(--space-4); text-align: center;
    background: var(--card); border-radius: var(--r); border: 1px dashed var(--line-strong); margin-top: 12px;
}

/* --- one order card: the ADDRESS is the title (drivers never use the reference) --- */
.drv-card {
    background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r);
    overflow: hidden; margin: 12px 0 0; box-shadow: var(--shadow-sm);
}
.drv-band { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--line); font-weight: var(--fw-bold); font-size: var(--text-sm); }
.drv-band-tour { background: var(--info-tint); color: var(--info); border-bottom-color: var(--info-line); }

.drv-head { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; text-decoration: none; color: inherit; }
.drv-head:hover { background: var(--tint-row); text-decoration: none; }
.drv-head-pin { flex: 0 0 auto; margin-top: 3px; color: var(--brand); display: inline-flex; }
.drv-head-text { flex: 1; min-width: 0; }
.drv-street { display: block; font-size: 1.1875rem; font-weight: var(--fw-bold); letter-spacing: -.02em; line-height: 1.25; }
.drv-sub { display: block; color: var(--muted); font-size: .9375rem; font-variant-numeric: var(--num); }
.drv-eta {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: var(--r-sm); background: var(--bg); border: 1px solid var(--line);
    font-size: .8125rem; font-weight: var(--fw-bold); font-variant-numeric: var(--num);
}

.drv-customer { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-top: 1px solid var(--line); }
.drv-cname { flex: 1; min-width: 0; font-size: .9375rem; font-weight: 650; }
.drv-tel { flex: 0 0 auto; color: var(--ink); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); font-size: .8125rem; }

/* money band — the classic driver failure is handing over a cash order for free */
.drv-money {
    display: flex; align-items: center; gap: 10px; margin: 0; border-radius: 0; text-align: start;
    padding: 12px 16px; border-top: 1px solid var(--line);
}
.drv-money-label { flex: 1; font-size: .9375rem; font-weight: 650; }
.drv-money-amount { flex: 0 0 auto; font-variant-numeric: var(--num); }
.drv-money-cash { background: var(--warn-tint); color: var(--warn); }
.drv-money-cash .drv-money-amount { font-size: 1.25rem; font-weight: 800; }
.drv-money-paid { background: var(--ok-tint); color: var(--ok); }
.drv-money-paid .drv-money-label { font-weight: var(--fw-bold); }
.drv-money-paid .drv-money-amount { font-size: .9375rem; }

.drv-note {
    display: flex; align-items: flex-start; gap: 8px; margin: 0;
    background: none; border-radius: 0; font-style: normal;
    padding: 11px 16px; border-top: 1px solid var(--line);
    font-size: .9375rem; color: var(--ink-soft);
}
.drv-note .ico { flex: 0 0 auto; margin-top: 3px; color: var(--warn); }

.drv-actions { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); }
.drv-actionform { flex: 1; display: flex; }
.drv-action { flex: 1; height: 52px; padding: 0 16px; font-size: 1.0625rem; }
.drv-map {
    flex: 0 0 auto; display: grid; place-items: center; height: 52px; width: 52px;
    border-radius: var(--r); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink);
}
.drv-map:hover { border-color: var(--brand); color: var(--brand-dark); text-decoration: none; }
.drv-unclaim-row { padding: 0 16px 12px; }
.drv-unclaim { width: 100%; margin: 0; padding: 6px 0; color: var(--muted); font-size: .8125rem; font-weight: var(--fw-medium); }
.drv-unclaim:hover { color: var(--ink); }

.drv-daylog { margin: 16px 0 0; text-align: center; font-size: .8125rem; color: var(--muted); font-variant-numeric: var(--num); }

@media (min-width: 820px) {
    .drv-wrap { padding-top: 24px; }
}
@media (max-width: 390px) {
    .drv-wrap { padding-left: 14px; padding-right: 14px; }
    .drv-head, .drv-customer, .drv-money, .drv-note, .drv-actions { padding-left: 14px; padding-right: 14px; }
    .drv-street { font-size: 1.125rem; }
}

/* ============================================================================
 * HOME PAGE — 1a "Aufgeräumt". Year-1 job: convert RESTAURANTS while reading as
 * a real customer product. The showcase is ONE hairline list (.hairlist +
 * .rl-row) with the same two numbers per row in a right-aligned tabular column;
 * the hero is one photo in a white mat + three figures; the mission teaser is a
 * hairline calculation card; the dark pitch band is a head row + hairline columns.
 * /fair reuses .hm-hero / .hm-eyebrow / .hm-pitch / .hm-benefits — do not scope
 * anything here in a way that breaks it (see the :not(.fr-hero) wash below).
 * ========================================================================== */

.hm-section-title { font-size: clamp(1.7rem, 2.6vw, 2.2rem); letter-spacing: -.025em; margin: 0 0 var(--space-2); }

/* eyebrow pill: brand tint on the cream page, white-on-ink inside a dark band */
.hm-eyebrow { display: inline-block; background: var(--brand-tint); color: var(--brand-dark); padding: 5px 14px; border-radius: var(--pill); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase; margin-bottom: var(--space-3); }
.hm-eyebrow-ondark { background: var(--on-dark-fill); color: #fff; }

/* ---------- 1 · hero ---------- */
.hm-hero {
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
    padding: 60px 0 52px; position: relative;
}
/* the soft radial brand wash belongs to the older, softer look; 1a is flat cream.
   `.hm-hero` is shared with /fair (`.fr-hero`), which keeps its wash — hence :not(). */
.hm-hero::before {
    content: ""; position: absolute; inset: -60px -24vw 0;
    background: radial-gradient(760px 440px at 78% 6%, var(--brand-tint), transparent 70%);
    pointer-events: none; z-index: -1;
}
.hm-hero:not(.fr-hero)::before { display: none; }
.hm-title { font-size: clamp(2.6rem, 4.6vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; margin: 14px 0 0; }
.hm-sub { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; max-width: 30em; }
.hm-cta-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: 28px; }
.hm-cta-row .btn-lg { padding: 14px 24px; font-size: var(--text-base); }
.hm-cta-row .btn-ghost { background: var(--card); border: 1px solid var(--line-strong); }

/* hero art: one photo in a white mat + the "you pay the restaurant" caption */
.hm-hero-art { position: relative; }
.hm-hero-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 10px; box-shadow: var(--shadow);
}
.hm-hero-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.hm-hero-cap { display: flex; align-items: center; gap: var(--space-2); padding: 12px 8px 6px; }
.hm-hero-cap-ok { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--ok); }
.hm-hero-cap-note { margin-left: auto; font-size: .8125rem; color: var(--muted); white-space: nowrap; }

/* three figures under the claim (replaces the ✓ trust list) */
.hm-stats { display: flex; margin-top: 32px; border-top: 1px solid var(--line-strong); }
.hm-stat { flex: 1; padding: 14px 0 14px 20px; border-left: 1px solid var(--line-strong); }
.hm-stat:first-child { padding-left: 0; border-left: 0; }
.hm-stat-v { font-weight: var(--fw-bold); font-size: 1.25rem; font-variant-numeric: var(--num); }
.hm-stat-l { font-size: .8125rem; color: var(--muted); }

/* the /fair hero keeps the older photo + bubble treatment */
.hm-photo-main {
    display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover;
    border-radius: 32px; box-shadow: var(--shadow-lg);
}
.hm-bubble {
    position: absolute; display: inline-flex; align-items: center; gap: 6px;
    background: var(--card); color: var(--ink); border-radius: var(--pill); padding: 11px 18px;
    font-size: var(--text-base); font-weight: var(--fw-bold); box-shadow: var(--shadow-lg); white-space: nowrap;
}
.hm-bubble strong { color: var(--ok); font-size: 1.15em; }
.hm-bubble-fee { top: 26px; right: -16px; transform: rotate(2deg); }

/* slim food-breadth strip; the hero now carries its own bottom padding */
.hm-foodrow { display: flex; justify-content: center; gap: var(--space-3) var(--space-6); flex-wrap: wrap; margin-top: var(--space-2); }
.hm-food { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--fw-semibold); color: var(--ink-soft); font-size: var(--text-sm); }
.hm-food img { width: 46px; height: 46px; object-fit: cover; border-radius: var(--pill); border: 2px solid var(--card); box-shadow: var(--shadow-sm); }

/* ---------- 2 · showcase: list head ---------- */
.hm-showcase { margin-top: 76px; scroll-margin-top: 80px; }
.hm-listhead {
    display: flex; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--line-strong);
}
.hm-listhead-copy { min-width: 0; }
.hm-listhead h2 { margin: 0; font-size: 1.75rem; line-height: 1.15; letter-spacing: -.025em; }
.hm-listhead-sub { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; }

/* city filter — a segmented control with a dark active cell (the fulfilment .seg
   uses a white one; this is the page-level filter, deliberately heavier) */
.hm-cityseg {
    display: flex; max-width: 100%; padding: 3px;
    background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-md);
}
.hm-cityseg button {
    padding: 7px 14px; border: 0; border-radius: var(--r-sm); background: none;
    font: inherit; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-soft);
    white-space: nowrap; cursor: pointer; transition: background var(--t), color var(--t);
}
.hm-cityseg button:hover { color: var(--ink); }
.hm-cityseg button.is-active { background: var(--ink); color: #fff; font-weight: 650; }
.hm-cityseg button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* search field — rectangular, sits in the list head instead of centred above it */
.hm-search { position: relative; display: block; width: 230px; max-width: 100%; margin: 0; }
.hm-search .hm-search-input {
    width: 100%; padding: 9px 12px 9px 36px; border-radius: var(--r-md);
    border: 1px solid var(--line-strong); background: var(--card);
    font-size: var(--text-sm); color: var(--ink); box-shadow: none;
}
.hm-search .hm-search-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); }
.hm-search-ic {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    display: flex; color: var(--muted); pointer-events: none;
}

/* ---------- 3 · showcase: the restaurant list ----------
   Container is the shared .hairlist primitive; .rl-list only adds the offset. */
.rl-list { margin-top: var(--space-4); }
.rl-row {
    display: flex; align-items: center; gap: 18px; padding: 16px 20px;
    color: inherit; text-decoration: none; transition: background var(--t);
}
.rl-row[hidden] { display: none; }
.rl-row:hover { background: var(--tint-row); text-decoration: none; }
.rl-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.rl-thumb { flex: 0 0 auto; display: block; width: 62px; height: 62px; border-radius: var(--r); object-fit: cover; }
.rl-thumb.no-photo { display: grid; place-items: center; background: var(--brand-tint); }
.rl-main { flex: 1; min-width: 0; }
.rl-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.rl-name { font-weight: var(--fw-bold); font-size: 1.0625rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rl-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: var(--fw-bold); white-space: nowrap; }
.rl-state.is-open { color: var(--ok); }
.rl-state.is-open .dot { height: 7px; width: 7px; border-radius: var(--pill); background: currentColor; }
.rl-state.is-closed { color: var(--warn); }
.rl-desc { display: block; color: var(--muted); font-size: var(--text-sm); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the anchor column: the same two numbers on every row, right-aligned + tabular */
.rl-facts { flex: 0 0 auto; display: flex; align-items: center; gap: 28px; }
.rl-fact { text-align: right; }
.rl-fact.is-min { width: 76px; }
.rl-fact-k { display: block; font-size: var(--text-xs); color: var(--muted); }
.rl-fact-v { display: block; font-weight: 650; font-variant-numeric: var(--num); }
/* the same two facts as ONE line — only ≤819px, so nothing is announced twice */
.rl-facts-m { display: none; font-size: .8125rem; color: var(--ink-soft); font-variant-numeric: var(--num); }
.rl-arrow { flex: 0 0 auto; display: flex; color: var(--muted); transition: color var(--t); }
.rl-row:hover .rl-arrow { color: var(--brand); }
.rl-row.is-closed .rl-thumb { opacity: .6; }
.rl-row.is-closed .rl-name { color: var(--muted); }

.hm-noresult { text-align: center; max-width: 420px; margin: 0 auto; padding: 44px var(--space-5); }
.hm-empty { max-width: 460px; margin: 0 auto; padding: var(--space-8) var(--space-6); }
.hm-empty-glyph { font-size: 2.6rem; margin-bottom: var(--space-2); }

/* ---------- 4 · recruit card (missing demand → acquisition) ---------- */
.hm-recruit {
    margin-top: 44px; background: var(--brand-tint);
    border-radius: var(--r-lg); padding: var(--space-5) var(--space-6);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
}
.hm-recruit-img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--pill); border: 4px solid var(--card); box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.hm-recruit-copy { min-width: 0; flex: 1 1 300px; }

/* ---------- 5 · mission teaser + calculation card ---------- */
.hm-mission {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start;
    margin-top: 64px; padding: 40px 0 0;
    background: none; box-shadow: none; border-radius: 0;
    border: 0; border-top: 1px solid var(--line-strong);
}
.hm-mission .hm-section-title { font-size: 1.875rem; line-height: 1.2; margin: 12px 0 0; }
.hm-mission-text { color: var(--ink-soft); line-height: 1.65; margin: 14px 0 0; max-width: 38em; }
.hm-mission-cta { background: var(--bg); border: 1px solid var(--line-strong); margin-top: 20px; }
.hm-mission-cta:hover { border-color: var(--brand); color: var(--brand); }

.calc-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; box-shadow: var(--shadow-sm); }
.calc-head {
    font-size: .8125rem; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase;
    color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.calc-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
    padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-soft);
}
.calc-row span:last-child { font-weight: 650; font-variant-numeric: var(--num); white-space: nowrap; }
.calc-row.is-bad span:last-child { color: var(--brand-dark); }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 14px 0 4px; font-weight: var(--fw-bold); }
.calc-total span:last-child { font-weight: 800; font-size: 1.25rem; color: var(--ok); font-variant-numeric: var(--num); white-space: nowrap; }
.calc-note { margin: 10px 0 0; font-size: var(--text-xs); color: var(--muted); text-align: right; }

/* ---------- 6 · restaurant pitch band (owners, du) ----------
   NB: /fair reuses this band as `.hm-pitch.fr-band`, which supplies its own
   top margin; the benefits become hairline columns on BOTH pages. */
.hm-pitch {
    margin-top: 72px; color: #fff; border-radius: var(--r-lg); padding: 40px 40px 36px; text-align: left;
    background: radial-gradient(640px 320px at 50% -12%, rgba(255,255,255,.09), transparent 70%), var(--ink);
}
.hm-pitch-head { display: flex; align-items: flex-end; gap: var(--space-6); flex-wrap: wrap; text-align: left; }
.hm-pitch-copy { flex: 1 1 420px; min-width: 0; }
.hm-pitch-title { color: #fff; font-size: 1.875rem; line-height: 1.2; letter-spacing: -.025em; margin: 12px 0 0; }
.hm-pitch-sub { color: var(--on-dark-muted); font-size: var(--text-base); max-width: 46em; margin: 10px 0 0; }
.hm-pitch-cta { flex: 0 0 auto; margin-top: 0; }
.hm-pitch-free { color: var(--on-dark-muted); font-size: var(--text-sm); font-weight: var(--fw-semibold); margin: var(--space-3) 0 0; }
/* promises as hairline columns instead of tinted boxes */
.hm-benefits {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 32px;
    border-top: 1px solid var(--on-dark-line); text-align: left;
}
.hm-benefit { background: none; border: 0; border-left: 1px solid var(--on-dark-line); border-radius: 0; padding: 20px 24px; }
.hm-benefit:nth-child(3n+1) { border-left: 0; padding-left: 0; }
/* only /fair puts an icon in a benefit cell */
.hm-benefit-ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--pill); background: rgba(255, 255, 255, .1); margin-bottom: var(--space-3); }
.hm-benefit h3 { color: #fff; font-size: 1.0625rem; margin: 0 0 6px; }
.hm-benefit p { color: var(--on-dark-muted); font-size: var(--text-sm); line-height: 1.55; margin: 0; }

/* ---------- home responsive ---------- */
@media (max-width: 1023px) {
    .hm-hero { gap: 36px; }
    .hm-benefits { grid-template-columns: repeat(2, 1fr); }
    .hm-benefit:nth-child(3n+1) { border-left: 1px solid var(--on-dark-line); padding-left: 24px; }
    .hm-benefit:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

/* the hero stacks at the same breakpoint the old sheet used, so its centred
   one-column rules are fully superseded rather than half-applied */
@media (max-width: 900px) {
    .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 0 36px; text-align: left; }
    /* The desktop wash bleeds -24vw sideways; on a phone that overflows the
       viewport (horizontal scroll). Keep it within the hero on mobile. */
    .hm-hero::before { left: 0; right: 0; }
    .hm-hero-art { order: 0; margin: 0; }
    .hm-sub { margin-left: 0; margin-right: 0; }
    .hm-cta-row { justify-content: flex-start; }
    .hm-mission { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: 48px; padding: 32px 0 0; }
}

@media (max-width: 819px) {
    .hm-title { font-size: 2.375rem; }
    .hm-sub { font-size: var(--text-base); }
    .hm-stats { flex-wrap: wrap; }
    .hm-stat { padding: 12px 0 12px 14px; }
    .hm-stat-v { font-size: var(--text-lg); }

    .hm-showcase { margin-top: 48px; }
    .hm-listhead { gap: var(--space-3); }
    .hm-listhead h2 { font-size: 1.25rem; }
    .hm-listhead .spacer { display: none; }
    .hm-search { width: 100%; order: -1; }
    .hm-cityseg { overflow-x: auto; }

    .rl-row { padding: var(--row-y) var(--row-x); gap: 12px; }
    .rl-thumb { width: 56px; height: 56px; }
    /* a long "opens tomorrow at …" state drops under the name instead of
       squeezing it to an ellipsis on a phone */
    .rl-title { flex-wrap: wrap; gap: 2px 8px; }
    .rl-facts { display: none; }
    .rl-facts-m { display: block; }

    .hm-mission .hm-section-title { font-size: var(--text-xl); }

    .hm-pitch { margin-top: 40px; padding: 24px 20px; }
    .hm-pitch-title { font-size: var(--text-xl); }
    .hm-pitch-cta .btn { width: 100%; }
    .hm-benefits { grid-template-columns: minmax(0, 1fr); }
    .hm-benefit { border-left: 0; padding: 16px 0; border-top: 1px solid var(--on-dark-line); }
    .hm-benefit:first-child { border-top: 0; }
    .hm-benefit:nth-child(2n+1), .hm-benefit:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 600px) {
    .hm-cta-row .btn-lg { width: 100%; }
    .hm-recruit { flex-direction: column; align-items: center; text-align: center; }
    .hm-recruit .btn { width: 100%; }
    .hm-bubble { font-size: var(--text-sm); padding: 8px 13px; }
    .hm-foodrow { gap: var(--space-2) var(--space-4); }
    .hm-food img { width: 38px; height: 38px; }
}

@media (max-width: 390px) {
    .hm-title { font-size: 2.125rem; }
    .rl-row { padding: 12px 14px; }
    .rl-thumb { width: 48px; height: 48px; }
    .hm-stat-l { font-size: var(--text-xs); }
}

/* ============================================================================
 * /fair — the mission page ("why goeat"). Reuses the home visual language
 * (hm-hero, hm-eyebrow, hm-pitch, hm-benefits); below are only its own bits:
 * the margin-vs-commission bars, the story split and the dual CTA.
 * ========================================================================== */
.fr-hero .hm-title { font-size: clamp(2.2rem, 3.8vw, 3.2rem); }
.fr-math { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; margin-top: 76px; }
.fr-math-copy p { color: var(--ink-soft); line-height: 1.65; }
.fr-punch {
    margin: var(--space-5) 0 0; padding: var(--space-4) var(--space-5);
    border-left: 4px solid var(--brand); background: var(--brand-tint); border-radius: 0 var(--r) var(--r) 0;
    font-weight: var(--fw-semibold); color: var(--ink); font-size: var(--text-lg); line-height: 1.5;
}
.fr-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }
.fr-bon {
    position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: var(--space-5); box-shadow: var(--shadow-sm); font-family: var(--font-mono); font-size: .82rem;
}
.fr-bon-us { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-tint), var(--shadow-sm); }
.fr-bon-head { font-family: var(--font); font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: .01em; margin-bottom: var(--space-4); min-height: 2.6em; }
.fr-bon-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-bottom: 1px dashed var(--line-strong); color: var(--ink-soft); }
.fr-bon-row span:last-child { white-space: nowrap; font-weight: var(--fw-semibold); color: var(--ink); }
.fr-bon-fee span { color: var(--brand); font-weight: var(--fw-bold); }
.fr-bon-zero span:last-child { color: var(--ok); }
.fr-bon-total { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0 0; margin-top: var(--space-2); font-weight: var(--fw-bold); font-size: .98rem; }
.fr-bon-total span:last-child { white-space: nowrap; }
.fr-bon-loss span:last-child { color: var(--brand); font-size: 1.18rem; }
.fr-bon-win span:last-child { color: var(--ok); font-size: 1.18rem; }
.fr-pill { position: absolute; top: -12px; right: 14px; font-family: var(--font); font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 4px 12px; border-radius: var(--pill); }
.fr-pill-loss { background: var(--brand); color: var(--brand-contrast); }
.fr-pill-win { background: var(--ok); color: #fff; }
.fr-compare .fr-bars-note { grid-column: 1 / -1; }
.fr-bars-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 560px) { .fr-compare { grid-template-columns: minmax(0, 1fr); } }
.fr-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; margin-top: 76px; }
.fr-story-art img {
    display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 32px; border: 6px solid var(--card); box-shadow: var(--shadow-lg); transform: rotate(-2deg);
}
.fr-story-copy p { color: var(--ink-soft); line-height: 1.65; }
.fr-band { margin-top: 76px; }
.fr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); margin-top: 76px; }
.fr-duo-card {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 44px var(--space-6); text-align: center; box-shadow: var(--shadow-sm);
}
.fr-duo-card h2 { margin: 0 0 var(--space-2); letter-spacing: -.02em; }
.fr-duo-card p { margin: 0 0 var(--space-5); }
.fr-duo-resto { background: var(--brand-tint); border-color: var(--brand-tint); }
@media (max-width: 900px) {
    .fr-math, .fr-story, .fr-duo { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .fr-story-art { order: -1; max-width: 380px; margin: 0 auto; }
    .fr-math { margin-top: 56px; }
}
.hm-pitch-why { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.topbar-why { margin-left: var(--space-4); font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--ink-soft); text-decoration: none; }
.topbar-why:hover { color: var(--brand); }

/* ============================================================================
 * /partner — 1a. Owns its own layout classes (pw-…): the hm-… / fr-… language
 * belongs to home and /fair, which must not shift when this page changes.
 * Hero = claim left + the 30-€ maths table right (replaces the photo bubbles);
 * the deal band is two hairline columns of running text, no check icons.
 * ========================================================================== */
.pw { padding-bottom: var(--space-8); }

/* ---- 1 · hero: claim left, the 30-€ maths right ---- */
.pw-hero {
    display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px;
    align-items: center; padding: 56px 0 48px;
}
.pw-hero-copy, .pw-math { min-width: 0; }
.pw-h1 { font-size: 3.375rem; line-height: 1.04; letter-spacing: -.035em; margin: 14px 0 0; font-weight: var(--fw-bold); }
.pw-lead { font-size: 1.1875rem; line-height: 1.6; color: var(--ink-soft); margin: 18px 0 0; max-width: 32em; }
.pw-cta-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 28px; }
.pw-trust { margin: 16px 0 0; font-size: var(--text-sm); color: var(--muted); font-weight: var(--fw-medium); }

/* the maths card */
.pw-math {
    margin: 0;
    background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow);
}
.pw-math-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pw-math-example { font-size: 1.125rem; font-weight: var(--fw-bold); margin-top: 4px; font-variant-numeric: var(--num); }
.pw-math-grid { display: grid; grid-template-columns: 1fr 1fr; }
.pw-math-cell { padding: 18px 20px; border-right: 1px solid var(--line); }
.pw-math-cell:last-child { border-right: 0; }
.pw-math-cell-goeat { background: var(--tint-row); }
.pw-math-label { font-size: var(--text-sm); font-weight: 650; color: var(--muted); }
.pw-math-label-goeat { font-weight: var(--fw-bold); color: var(--brand-dark); }
.pw-math-row {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .9375rem;
    font-variant-numeric: var(--num);
}
.pw-math-row > span:first-child { color: var(--ink-soft); }
.pw-math-neg { color: var(--danger); }
.pw-math-zero { color: var(--ok); }
.pw-math-sum { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; font-variant-numeric: var(--num); }
.pw-math-sum > span:first-child { font-weight: var(--fw-bold); }
.pw-math-big { font-size: var(--text-xl); font-weight: 800; }
.pw-math-win { color: var(--ok); }
.pw-math-foot {
    margin: 0; padding: 12px 20px; border-top: 1px solid var(--line);
    background: var(--card); font-size: .8125rem; color: var(--muted); line-height: 1.5;
}

/* ---- 2 · the deal, dark ---- */
.pw-band { background: var(--ink); color: #fff; border-radius: var(--r-lg); padding: 40px; margin-top: 56px; }
.pw-band-kicker { color: var(--on-dark-muted); }
.pw-band-title { color: #fff; font-size: 2rem; letter-spacing: -.025em; margin: 12px 0 0; line-height: 1.2; font-weight: var(--fw-bold); max-width: 34em; }
.pw-band-lead { color: var(--on-dark-muted); margin: 12px 0 0; max-width: 60em; line-height: 1.6; }
.pw-band-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 32px; border-top: 1px solid var(--on-dark-line); }
.pw-band-col { min-width: 0; padding: 24px 32px 0 0; }
.pw-band-col + .pw-band-col { padding: 24px 0 0 32px; border-left: 1px solid var(--on-dark-line); }
.pw-band-head { color: #fff; margin: 0; font-size: 1.0625rem; font-weight: var(--fw-bold); }
.pw-band-row {
    padding: 14px 0; border-bottom: 1px solid var(--on-dark-line-soft);
    color: var(--on-dark-text); font-size: .9375rem; line-height: 1.55;
}
.pw-band-row:last-child { border-bottom: 0; }
.pw-band-foot { margin: 24px 0 0; color: #fff; font-weight: 650; }

/* ---- 3+4 · photo splits ---- */
.pw-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; margin-top: 56px; }
.pw-split-rev { grid-template-columns: 1.05fr .95fr; align-items: start; }
.pw-split-copy { min-width: 0; }
.pw-mat {
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 10px; box-shadow: var(--shadow-sm); min-width: 0;
}
.pw-mat img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); }
.pw-mat-tall img { aspect-ratio: 3 / 4; }
.pw-h2 { font-size: 1.875rem; letter-spacing: -.025em; margin: 12px 0 0; line-height: 1.2; font-weight: var(--fw-bold); }
.pw-p { color: var(--ink-soft); line-height: 1.65; margin: 12px 0 0; max-width: 38em; }
.pw-p-tight { margin-bottom: 18px; }

.pw-numlist { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
.pw-numlist li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.pw-numlist li:last-child { border-bottom: 0; }
.pw-num { color: var(--muted); flex: 0 0 auto; font-variant-numeric: var(--num); }

.pw-list {
    list-style: none; margin: 0; padding: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.pw-list li { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.pw-list li:last-child { border-bottom: 0; }

/* ---- 5 · how it works ---- */
.pw-how { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line-strong); }
.pw-how .pw-h2 { margin: 0; }
.pw-how-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 24px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.pw-how-cell { padding: 20px; border-right: 1px solid var(--line); }
.pw-how-cell:last-child { border-right: 0; }
.pw-how-num { font-size: 1.5rem; font-weight: 800; color: var(--brand); line-height: 1; font-variant-numeric: var(--num); }
.pw-how-title { font-weight: var(--fw-bold); margin-top: 8px; }
.pw-how-text { color: var(--muted); font-size: var(--text-sm); margin: 4px 0 0; line-height: 1.55; }
.pw-how-foot { margin: 14px 0 0; color: var(--muted); font-size: .9375rem; font-weight: var(--fw-medium); text-align: start; }

/* ---- 6 · final CTA ---- */
.pw-final {
    margin-top: 48px; background: var(--card); border: 1px solid var(--line-strong);
    border-radius: var(--r-lg); padding: 32px 36px;
    display: flex; align-items: center; gap: 32px; flex-wrap: wrap; box-shadow: var(--shadow-sm);
}
.pw-final-copy { flex: 1 1 420px; min-width: 0; }
.pw-final-title { font-size: 1.625rem; letter-spacing: -.025em; margin: 0; line-height: 1.2; font-weight: var(--fw-bold); }
.pw-final-sub { color: var(--muted); margin: 8px 0 0; }
.pw-final-btn { flex: 0 0 auto; font-size: 1.0625rem; }

@media (max-width: 1023px) {
    .pw-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 0 40px; }
    .pw-h1 { font-size: 2.625rem; }
    .pw-lead { font-size: 1.0625rem; }
    .pw-split, .pw-split-rev { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .pw-split .pw-mat { order: -1; }          /* photo first when stacked … */
    .pw-split-rev .pw-mat { order: 0; }       /* … except the tech split, where the list leads */
    .pw-how-grid { grid-template-columns: repeat(2, 1fr); }
    .pw-how-cell:nth-child(2n) { border-right: 0; }
    .pw-how-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .pw-band { padding: 32px 28px; }
    .pw-band-grid { grid-template-columns: minmax(0, 1fr); }
    .pw-band-col, .pw-band-col + .pw-band-col { padding: 20px 0 0; border-left: 0; }
    .pw-band-col + .pw-band-col { border-top: 1px solid var(--on-dark-line); }
}
@media (max-width: 819px) {
    .pw-hero { padding: 28px 0 32px; }
    .pw-h1 { font-size: 2.125rem; line-height: 1.06; letter-spacing: -.03em; margin-top: 10px; }
    .pw-lead { font-size: 1rem; margin-top: 14px; }
    .pw-cta-row { margin-top: 20px; gap: 8px; }
    .pw-cta-row .btn { width: 100%; }
    .pw-trust { margin-top: 12px; font-size: .8125rem; text-align: center; }
    .pw-math { margin-top: 24px; }
    .pw-math-head { padding: 14px 16px; }
    .pw-math-grid { grid-template-columns: minmax(0, 1fr); }
    .pw-math-cell { padding: 14px 16px; border-right: 0; }
    .pw-math-cell + .pw-math-cell { border-top: 1px solid var(--line); }
    .pw-math-foot { padding: 12px 16px; }
    .pw-band { padding: 24px 20px; margin-top: 24px; }
    .pw-band-title { font-size: 1.5rem; }
    .pw-band-row { padding: 12px 0; }
    .pw-split, .pw-how { margin-top: 32px; }
    .pw-how { padding-top: 28px; }
    .pw-h2 { font-size: 1.375rem; }
    .pw-how-grid { grid-template-columns: minmax(0, 1fr); }
    .pw-how-cell { border-right: 0; border-bottom: 1px solid var(--line); }
    .pw-how-cell:last-child { border-bottom: 0; }
    .pw-list li { padding: 11px 14px; }
    .pw-final { flex-direction: column; align-items: stretch; text-align: center; gap: 14px; padding: 20px; border-radius: var(--r); margin-top: 24px; }
    .pw-final-title { font-size: 1.25rem; letter-spacing: -.02em; }
    .pw-final-btn { width: 100%; }
}
@media (max-width: 390px) {
    .pw-h1 { font-size: 2rem; }
    .pw-band { padding: 20px 16px; }
    .pw-math-cell, .pw-math-head, .pw-math-foot { padding-left: 14px; padding-right: 14px; }
}