:root {
/* bestellbei.de CI — the same palette as body.landing's --bb-* tokens,
so the merchant backend shares the public frontend's visual identity. */
--brand-primary: #c22d20;
--brand-primary-contrast: #fff;
--brand-accent: #fbeae7;
--color-canvas: #faf6f2;
--color-surface: #fff;
--color-text: #241d19;
--color-muted: #6f6660;
--color-border: #ece4dd;
--color-success: #19714a;
--color-warning: #8a5700;
--color-danger: #b42318;
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--text-sm: .875rem;
--text-base: 1rem;
--text-xl: clamp(1.75rem, 4vw, 2.5rem);
--space-1: .25rem;
--space-2: .5rem;
--space-3: .75rem;
--space-4: 1rem;
--space-6: 1.5rem;
--space-8: 2rem;
--radius-sm: .375rem;
--radius-md: .75rem;
--focus-color: #9f2015;
--focus-ring: 0 0 0 3px color-mix(in srgb, var(--focus-color) 35%, transparent);
--bs-primary: var(--brand-primary);
--bs-primary-rgb: 194, 45, 32;
--bs-body-color: var(--color-text);
--bs-body-bg: var(--color-canvas);
--bs-body-font-family: var(--font-sans);
--bs-border-color: var(--color-border);
--bs-border-radius: var(--radius-sm);
--bs-border-radius-lg: var(--radius-md);
--bs-link-color: var(--brand-primary);
}
* { box-sizing: border-box; }
body { margin: 0; color: var(--color-text); background: var(--color-canvas); font: var(--text-base)/1.55 var(--font-sans); }
a { color: var(--brand-primary); }
:is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--focus-color); outline-offset: 3px; box-shadow: var(--focus-ring); }
.skip-link { position: fixed; z-index: 10; top: var(--space-2); left: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--color-surface); transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }
.topbar { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-3) clamp(1rem, 4vw, 3rem); color: var(--brand-primary-contrast); background: var(--brand-primary); }
.brand { color: inherit; font-weight: 800; text-decoration: none; }
.nav { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.nav a { color: inherit; }
.nav a[aria-current="page"] { font-weight: 700; text-decoration-thickness: .15em; text-underline-offset: .25em; }
.nav-button, .nav-login { border: 0; color: inherit; background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }
.context-switchers { display: flex; gap: var(--space-3); margin-left: auto; }
.context-switchers label { display: grid; font-size: var(--text-sm); }
.context-switchers select { min-width: 10rem; }
.content { width: min(72rem, 100%); margin-inline: auto; padding: var(--space-6) clamp(1rem, 4vw, 3rem); }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.card { margin-bottom: var(--space-4); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.eyebrow { color: var(--color-muted); }
.service-time-grid{display:grid;grid-template-columns:repeat(2,minmax(16rem,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.service-time-card{display:grid;gap:.8rem;padding:1.6rem;border:1px solid var(--color-border);border-radius:1rem;background:linear-gradient(135deg,#fff,#fdf1ef);box-shadow:0 .5rem 1.8rem #241d190d}.service-time-card>span:first-child{font-weight:750}.service-time-card>span:nth-child(2){display:flex;align-items:baseline;gap:.7rem}.service-time-card input{width:5ch;padding:0;border:0;background:transparent;font-size:clamp(3rem,7vw,5.5rem);font-weight:850;line-height:1}.service-time-card b{font-size:1.25rem}.service-time-card small,.service-time-status{color:var(--color-muted)}.service-time-status{grid-column:1/-1;margin:0;min-height:1.5rem}@media(max-width:42rem){.service-time-grid{grid-template-columns:1fr}}
.dashboard-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}.dashboard-info-card{margin:0}.hours-list,.current-service-times{margin:0}.hours-list>div,.current-service-times>div{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1px solid var(--color-border)}.hours-list dt,.current-service-times dt{font-weight:700}.hours-list dd,.current-service-times dd{margin:0;text-align:right}.rating-value{margin:.75rem 0 .2rem;color:#9a6700;font-size:2.5rem;font-weight:800}.muted{color:var(--color-muted)}.dashboard-dialog{width:min(48rem,calc(100% - 2rem));max-height:90vh;padding:0;border:0;border-radius:1rem;box-shadow:0 20px 80px #0005}.dashboard-dialog::backdrop{background:#15100c99}.dashboard-dialog-shell{padding:1.5rem}.dashboard-dialog-shell header,.dashboard-dialog-shell footer{display:flex;align-items:center;justify-content:space-between;gap:1rem}.dashboard-dialog-shell header h2{margin:0}.dashboard-dialog-shell .dialog-close{position:static}.dashboard-dialog-shell footer{margin-top:1.5rem}.opening-hours-form{display:grid;gap:.5rem;margin-top:1rem}.opening-hours-form fieldset{display:grid;grid-template-columns:8rem repeat(3,1fr);align-items:center;gap:.75rem;padding:.6rem;border:1px solid var(--color-border);border-radius:.5rem}.opening-hours-form legend{position:absolute;clip:rect(0,0,0,0)}.opening-hours-form label:first-of-type{font-weight:700}.opening-hours-form input[type=time]{width:auto}.hours-windows{display:grid;grid-column:2/-1;min-width:0;gap:.65rem}.hours-window{display:grid;grid-template-columns:repeat(2,minmax(7rem,1fr));align-items:end;gap:.65rem;padding:.65rem;border-radius:.5rem;background:var(--color-canvas)}.hours-window>label:nth-child(3),.hours-remove{grid-row:2}.hours-remove{grid-column:2;justify-self:end;padding:.55rem .7rem}.hours-actions{grid-column:2/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.1rem}.hours-copy{color:var(--bb-red,inherit)}.hours-copy:disabled{opacity:.55;cursor:not-allowed;text-decoration:none}@media(max-width:62rem){.dashboard-info-grid{grid-template-columns:1fr 1fr}.rating-card{grid-column:1/-1}}@media(max-width:42rem){.dashboard-info-grid{grid-template-columns:1fr}.rating-card{grid-column:auto}.opening-hours-form fieldset{grid-template-columns:1fr 1fr}.opening-hours-form label:first-of-type{grid-column:1/-1}.hours-windows,.hours-actions{grid-column:1/-1}.hours-window{grid-template-columns:repeat(2,minmax(0,1fr))}.opening-hours-form input[type=time]{width:100%;min-width:0}}
.restaurant-section { margin-top: var(--space-8); }
.restaurant-section h2, .restaurant-card h3 { margin-block: 0; }
.restaurant-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); }
.restaurant-card { display: grid; gap: var(--space-6); margin: 0; }
.restaurant-card nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4); }
.breadcrumbs ol { display: flex; gap: var(--space-2); padding: 0; list-style: none; color: var(--color-muted); }
.hero, .panel, .empty-state { padding: clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.hero h1 { max-width: 18ch; margin-top: 0; font-size: var(--text-xl); line-height: 1.15; }
.hero p { max-width: 60ch; color: var(--color-muted); }
.button { display: inline-block; border: 0; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--brand-primary-contrast); background: var(--brand-primary); font: inherit; text-decoration: none; cursor: pointer; }
.button-secondary{color:var(--color-text);border:1px solid var(--color-border);background:#fff}.button-danger{background:var(--color-danger)}.button:disabled{cursor:not-allowed;opacity:.45}.table-actions{width:3.5rem;text-align:right}.delete-icon{display:inline-grid;place-items:center;width:2.35rem;height:2.35rem;border:1px solid transparent;border-radius:.5rem;color:var(--color-danger);background:transparent;cursor:pointer}.delete-icon:hover{border-color:#f2c5c1;background:#fff1f0}.delete-icon:disabled{border-color:transparent;background:transparent;cursor:not-allowed;opacity:.4}.destructive-dialog{width:min(34rem,calc(100% - 2rem));padding:0;border:1px solid #efb8b3;border-top:.35rem solid var(--color-danger);border-radius:var(--radius-md);box-shadow:0 1.5rem 5rem #241d194d}.destructive-dialog::backdrop{background:#241d1999}.destructive-dialog form{padding:var(--space-6)}.danger-zone-heading{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}.danger-zone-heading h2{margin:0;color:var(--color-danger)}.danger-zone-heading span{color:var(--color-danger);font-size:.75rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase}.danger-zone-icon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:#fff1f0}.danger-zone-icon i{font-size:1.25rem}.destructive-dialog p{color:var(--color-muted)}.destructive-dialog input{border-color:#db8d87}.destructive-dialog-actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6)}
.flash { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-left: .25rem solid currentColor; background: var(--color-surface); }
/* align-content: start keeps label, control and help packed at the top when a
neighbouring field in the same grid row is taller (e.g. has a help text);
the default stretch would spread the row's extra height between them. */
.field { display: grid; align-content: start; gap: var(--space-1); margin-bottom: var(--space-4); }
.field-error { color: var(--color-danger); font-size: var(--text-sm); }
.badge { display: inline-block; border-radius: 999px; padding: var(--space-1) var(--space-2); color: var(--color-success); background: #e8f7ef; font-size: var(--text-sm); font-weight: 700; }
.badge-warning { color: var(--color-warning); background: #fff4d6; }
.badge.badge--success { color: var(--color-success); background: #e8f7ef; }
.badge.badge--warning { color: var(--color-warning); background: #fff4d6; }
.badge.badge--neutral { color: var(--color-muted); background: var(--color-canvas); }
.badge.badge--muted { color: var(--color-muted); background: #ece9e6; }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; }
.empty-state { text-align: center; }
/* Operator-only explanation inside the storefront empty state ("why is no menu shown?"). */
.menu-diagnostics { margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: left; font-size: .9rem; }
.menu-diagnostics h3 { margin: 0 0 .25rem; font-size: 1rem; }
.menu-diagnostics-scope { margin: 0 0 .75rem; color: var(--color-muted, #6b6560); font-size: .8rem; }
.menu-diagnostics ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.menu-diagnostics li { margin: .25rem 0; }
.menu-diagnostics-hint { margin: 0; color: var(--color-muted, #6b6560); }
.menu-diagnostics li a, .menu-diagnostics-manage { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.menu-diagnostics-manage { display: inline-block; margin-top: .75rem; font-weight: 600; }
/* The same operator explanation above a NON-empty menu list: only some menus are hidden. */
.menu-diagnostics--partial { margin: 0 0 1rem; background: #fff; }
.menu-diagnostics--partial summary { font-weight: 650; cursor: pointer; }
.menu-diagnostics--partial[open] summary { margin-bottom: .5rem; }
/* Guest note: a regular menu is missing only because it cannot be preordered this far ahead. */
.menu-preorder-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid #eadfca; border-radius: .7rem; color: #5b4a2a; background: #fbf6ec; font-size: .85rem; }
.menu-preorder-note button { padding: 0; border: 0; color: inherit; background: none; font-weight: 650; text-decoration: underline; text-underline-offset: .15em; cursor: pointer; }
.menu-item-image { display: block; width: min(32rem, 100%); max-height: 24rem; margin-bottom: var(--space-6); border-radius: var(--radius-md); object-fit: cover; }
.menu-item-thumbnail { display: block; width: 4rem; height: 4rem; border-radius: var(--radius-sm); object-fit: cover; }
.category-items fieldset{width:100%;margin:1rem 0;padding:1.4rem;border:1px solid var(--color-border);border-radius:var(--radius-md)}.assigned-items{display:grid;gap:.65rem}.assigned-item{display:grid;grid-template-columns:auto 3.5rem minmax(0,1fr) auto auto;align-items:center;gap:1rem;width:100%;padding:.7rem;border:1px solid var(--color-border);border-radius:.55rem;background:#fff}.assigned-item.is-dragging{opacity:.45}.assigned-item img,.search-result img,.item-image-placeholder{width:3.5rem;height:3.5rem;border-radius:.4rem;object-fit:cover}.item-image-placeholder{display:grid;place-items:center;background:var(--brand-accent)}.drag-handle{padding:.5rem;color:var(--color-muted);font-size:1.25rem;cursor:grab;touch-action:none}.assigned-item-details{display:grid;gap:.25rem;min-width:0}.editable-title{display:flex;align-items:center;gap:.5rem}.editable-title h1{margin:0}.edit-icon{display:inline-grid;flex:none;place-items:center;width:2rem;height:2rem;border:0;border-radius:50%;color:var(--brand-primary);background:transparent;text-decoration:none;cursor:pointer}.edit-icon:hover{background:var(--brand-accent)}.menu-summary,.assigned-item-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem;color:var(--color-muted);font-size:var(--text-sm)}.menu-summary{margin-top:.35rem}.assigned-item-description{overflow:hidden;color:var(--color-muted);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap}.assigned-item-tags{display:flex;flex-wrap:wrap;gap:.3rem}.assigned-item-tags>span{padding:.1rem .4rem;border-radius:999px;color:var(--brand-primary);background:var(--brand-accent);font-size:.75rem}.price-display,.remove-assignment{border:0;background:transparent;color:var(--brand-primary);cursor:pointer}.price-display{text-decoration:underline}.remove-assignment{font-size:1.5rem}.price-editor{display:flex;align-items:center;gap:.45rem}.price-editor[hidden]{display:none}.price-editor input{width:7rem}.price-editor button{padding:.65rem}.item-search{display:grid;gap:.35rem;margin-top:1rem;font-weight:700}.item-search-results{margin-top:.5rem;border:1px solid var(--color-border);border-radius:.55rem;background:#fff;box-shadow:0 .5rem 1.5rem #241d1912}.item-search-results section{padding:.7rem}.item-search-results h4{margin:.25rem .35rem .6rem;color:var(--color-muted);font-size:.8rem;text-transform:uppercase}.secondary-results{border-top:1px solid var(--color-border);background:#f6f5f3}.search-result{display:flex;align-items:center;gap:.8rem;width:100%;padding:.55rem;border:0;border-radius:.4rem;text-align:left;background:transparent;cursor:pointer}.search-result:hover{background:var(--brand-accent)}.search-result>span:last-child{display:grid}.search-result small{color:var(--color-muted)}[data-no-results]{padding:1rem;color:var(--color-muted)}@media(max-width:42rem){.assigned-item{grid-template-columns:auto 3rem 1fr auto}.assigned-item .inline-price{grid-column:2/5}.assigned-item img,.assigned-item .item-image-placeholder{width:3rem;height:3rem}}
.auth-panel { max-width: 48rem; margin-inline: auto; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 var(--space-4); }
.form-grid .form-grid-action { align-self: end; justify-self: start; margin-bottom: var(--space-4); }
/* One line of fields with a trailing action, all sitting on the same baseline:
the fields drop their bottom margin so the button lines up with the controls. */
.form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.form-row > .field { margin-bottom: 0; }
.restaurant-address-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.restaurant-address-name { grid-column: 1 / -1; }
.restaurant-address-street, .restaurant-address-city { grid-column: span 3; }
.restaurant-address-house-number, .restaurant-address-postal-code { grid-column: span 1; }
.restaurant-address-phone, .restaurant-address-website { grid-column: span 2; }
@media (max-width: 600px) {
.restaurant-address-grid { grid-template-columns: 1fr; }
.restaurant-address-grid > * { grid-column: auto; }
}
input, select { width: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-3); background: var(--color-surface); font: inherit; }
.country-choice { position: relative; display: block; }
.country-choice img { position: absolute; z-index: 1; top: 50%; left: var(--space-3); width: 1.75rem; height: 1.75rem; object-fit: contain; transform: translateY(-50%); pointer-events: none; }
.country-choice img:not([hidden]) + select { padding-left: 3.5rem; }
.translation-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.translation-field { min-width: 0; }
.translation-input { display: flex; }
.translation-input input { min-width: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
body:not(.storefront) .translation-trigger { display: grid; flex: 0 0 3rem; place-items: center; border: 1px solid var(--color-border); border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--brand-primary); background: var(--color-surface); cursor: pointer; }
body:not(.storefront) .translation-trigger:hover:not(:disabled) { color: var(--brand-primary); background: var(--brand-accent); box-shadow: none; filter: none; transform: none; }
.translation-trigger:disabled { color: var(--color-muted); cursor: not-allowed; opacity: .45; }
.translation-trigger.is-loading i { animation: translation-pulse .8s ease-in-out infinite alternate; }
.translation-status { min-height: 1.5rem; margin: var(--space-2) 0 0; color: var(--color-muted); }
@keyframes translation-pulse { to { opacity: .3; transform: scale(.82); } }
@media (max-width: 48rem) { .topbar { align-items: flex-start; flex-direction: column; } .context-switchers { width: 100%; margin-left: 0; flex-direction: column; } .context-switchers select { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }
.branding-editor { display:grid; grid-template-columns:repeat(auto-fit,minmax(18rem,1fr)); gap:var(--space-4); }
/* Groups the restaurant's own branding fields only: no fieldset card inside the form card. */
.branding-editor .brand-own-fields { min-width:0; margin:0; padding:0; border:0; background:none; box-shadow:none; }
/* Logo/favicon file inputs show the stored upload as a thumbnail (on a checkerboard, so
transparent and white logos stay visible), or the picked file until it is saved. */
.brand-asset-field { display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:var(--space-4); align-items:start; margin-bottom:var(--space-4); }
.brand-asset-inputs { display:grid; gap:var(--space-3); min-width:0; }
.brand-asset-inputs > .field { margin-bottom:0; }
.brand-asset-current { display:grid; justify-items:center; gap:.3rem; margin:0; text-align:center; }
.brand-asset-thumb { display:grid; place-items:center; width:5.5rem; height:5.5rem; padding:.5rem; overflow:hidden; border:1px solid var(--color-border); border-radius:.6rem; background:#fff repeating-conic-gradient(#f1eeea 0 25%, #fff 0 50%) 0 0 / 1rem 1rem; }
.brand-asset-thumb img { max-width:100%; max-height:100%; object-fit:contain; }
.brand-asset-field-favicon .brand-asset-thumb img { width:3rem; height:3rem; }
.brand-asset-thumb .bi { color:var(--color-muted); font-size:1.6rem; }
.brand-asset-current figcaption { color:var(--color-muted); font-size:.75rem; line-height:1.25; }
/* The preview is a mock-up of the shop, not UI: a framed browser window with
sample dishes, skeleton lines and no pointer interaction (the markup is inert). */
.color-field { display:flex; align-items:center; gap:.5rem; }.color-field input[type="color"] { flex:none; width:2.75rem; height:2.75rem; padding:.2rem; border:1px solid var(--color-border); border-radius:.5rem; background:#fff; cursor:pointer; }.color-field input:not([type="color"]) { flex:1; min-width:0; }
.brand-preview { align-self:start; position:sticky; top:var(--space-4); }
.brand-preview-window { overflow:hidden; border:1px solid var(--color-border); border-radius:.75rem; background:var(--preview-background); box-shadow:0 .75rem 2rem #241d1914; font-family:var(--preview-font, var(--font-sans)); pointer-events:none; user-select:none; }
.brand-preview-chrome { display:flex; align-items:center; gap:.75rem; padding:.45rem .75rem 0; background:#e9e6e3; font-family:var(--font-sans); }
.brand-preview-dots { display:flex; gap:.3rem; }.brand-preview-dots i { width:.55rem; height:.55rem; border-radius:50%; background:#c9c3be; }
.brand-preview-tab { display:flex; align-items:center; gap:.4rem; min-width:0; max-width:14rem; padding:.4rem .75rem; border-radius:.5rem .5rem 0 0; background:var(--preview-background); color:#241d19; font-size:.75rem; }
.brand-preview-tab > span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.brand-favicon-preview { flex:none; width:1rem; height:1rem; object-fit:contain; }.brand-favicon-placeholder { flex:none; width:1rem; height:1rem; border-radius:.2rem; background:#c9c3be; }
.brand-preview-page { display:grid; justify-items:start; gap:.75rem; padding:1.25rem; }
.brand-preview-page h2 { margin:0; }
.brand-logo-preview { display:block; max-width:12rem; max-height:6rem; object-fit:contain; }
.brand-preview-cta { display:block; justify-self:stretch; padding:.75rem 1rem; border-radius:.4rem; color:var(--preview-contrast, #fff); background:var(--preview-primary); text-align:center; }
.brand-preview-items { display:grid; gap:.5rem; justify-self:stretch; margin:.25rem 0 0; padding:0; list-style:none; }
.brand-preview-items li { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem .85rem; border-radius:.5rem; background:#ffffffb3; }
.brand-preview-item-text { display:grid; gap:.35rem; flex:1; }
.brand-preview-skeleton { display:block; width:70%; height:.5rem; border-radius:1rem; background:#241d191f; }
.brand-preview-price { color:var(--preview-primary); font-weight:700; white-space:nowrap; }
.brand-preview-note { margin:var(--space-3) 0 0; color:var(--color-muted); font-size:var(--text-sm); }
.locale-logo-settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:var(--space-3);margin-bottom:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.locale-logo-settings>p{grid-column:1/-1;color:var(--color-muted)}.locale-logo-preview{width:auto;max-width:8rem;height:3rem;object-fit:contain;object-position:left center}
.storefront { margin:0; color:#202124; background:var(--shop-background); font-family:var(--shop-font); }
.shop-header,.shop-footer { padding:1.5rem max(1rem,calc((100% - 64rem)/2)); color:var(--shop-contrast); background:var(--shop-primary); }
.shop-logo { max-width:10rem; max-height:5rem; object-fit:contain; }.shop-main { width:min(64rem,100%); margin:auto; padding:2rem 1rem; }
.shop-category { margin-bottom:1.5rem; padding:1.25rem; border-radius:.75rem; background:#fff; }.shop-item { display:flex; justify-content:space-between; gap:1rem; padding:1rem 0; border-bottom:1px solid #ddd; }.shop-item h4,.shop-item p { margin:.1rem 0; }.shop-footer { display:flex; flex-wrap:wrap; gap:1rem; }.shop-footer a { color:inherit; }
/* Public storefront */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.storefront{--shop-surface:#fff;--shop-border:#e8e5e2;--shop-muted:#706d69;margin:0;color:#221f1d;background:#faf9f7;font-family:var(--shop-font)}.storefront button,.storefront input,.storefront select{font:inherit}.shop-header{position:relative;z-index:5;display:grid;grid-template-columns:minmax(13rem,1fr) auto auto;align-items:center;gap:1.5rem;padding:1rem max(1rem,calc((100% - 78rem)/2));color:var(--shop-contrast);background:var(--shop-primary)}.shop-brand{display:flex;align-items:center;gap:.75rem;color:inherit;text-decoration:none}.shop-brand span{display:grid}.shop-brand small{font-weight:400;opacity:.8}.shop-logo{width:auto;max-width:7rem;height:3rem}.shop-logo-fallback{display:grid!important;place-items:center;width:2.75rem;height:2.75rem;border:2px solid currentColor;border-radius:50%;font-size:1.3rem}.shop-search{display:flex;align-items:center;gap:.5rem;padding:.2rem .8rem;border-radius:.65rem;background:#fff;color:#777}.shop-search input{border:0;background:transparent}.locale-select select{width:auto;border-color:color-mix(in srgb,currentColor 30%,transparent);color:inherit;background:transparent}.header-cart{position:relative;display:grid;grid-template-columns:auto auto;column-gap:.5rem;padding:.6rem .9rem;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:.65rem;color:inherit;background:transparent;cursor:pointer}.header-cart strong{grid-column:2;font-size:.8rem}.header-cart b{position:absolute;right:-.45rem;top:-.5rem;display:grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:50%;color:var(--shop-primary);background:#fff;font-size:.72rem}.service-bar{display:flex;justify-content:center;gap:clamp(1.5rem,5vw,5rem);padding:1rem;overflow:auto;background:#fff;white-space:nowrap;font-size:.85rem}.restaurant-hero{display:grid;grid-template-columns:1fr 1.1fr;min-height:19rem;background:#fff}.hero-copy{align-self:center;width:min(38rem,100%);padding:3rem max(1rem,calc((100vw - 78rem)/2));padding-right:2rem}.hero-copy h1{margin:.7rem 0;font-size:clamp(2rem,4vw,3rem);line-height:1.05}.hero-logo{max-width:10rem;max-height:4.5rem}.hero-meta{color:var(--shop-muted)}.open-status{color:#147643;font-weight:700}.hero-image{min-height:18rem;background-color:#efe7dc;background-image:linear-gradient(90deg,#fff0,rgba(0,0,0,.05)),var(--hero-image,url('/uploads/menu-items/storefront-hero.jpg'));background-position:center,var(--hero-x,50%) var(--hero-y,50%);background-size:auto,var(--hero-zoom,100%) auto;background-repeat:no-repeat}.category-nav{position:sticky;top:0;z-index:4;display:flex;gap:2rem;padding:.9rem max(1rem,calc((100% - 78rem)/2));overflow-x:auto;overflow-y:hidden;border-block:1px solid var(--shop-border);background:#fff}.category-nav a{flex:none;padding:.35rem 0;color:inherit;text-decoration:none}.category-nav a:hover{color:var(--shop-primary)}.filter-bar{display:flex;align-items:center;gap:.5rem;width:min(78rem,100%);margin:auto;padding:1rem}.filter-bar button{padding:.45rem .8rem;border:1px solid var(--shop-border);border-radius:2rem;background:#fff;cursor:pointer}.filter-bar button svg{width:.85rem;height:.85rem;fill:#347a49}.filter-bar button[aria-pressed=true]{color:var(--shop-contrast);border-color:var(--shop-primary);background:var(--shop-primary)}.filter-bar .filter-reset{border:0;color:var(--shop-primary);background:transparent}.shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:1.5rem;width:min(78rem,100%);margin:auto;padding:0 1rem 4rem}.shop-main{min-width:0}.menu>h2{font-size:1.15rem}.shop-category{scroll-margin-top:4rem;margin-bottom:1.75rem}.shop-category h3{margin-bottom:.7rem;font-size:1.35rem}.product-list{overflow:hidden;border:1px solid var(--shop-border);border-radius:.8rem;background:#fff}.product-card{position:relative;border-bottom:1px solid var(--shop-border)}.product-card:last-child{border:0}.product-open{display:flex;width:100%;min-height:7.4rem;align-items:stretch;justify-content:space-between;gap:1rem;padding:0;border:0;text-align:left;background:#fff;cursor:pointer}.product-info{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.25rem 4rem 1.1rem 1.25rem}.product-title{font-weight:750}.product-code{margin-right:.15rem;color:var(--shop-primary);font-weight:800}.product-description{margin:.25rem 0;color:var(--shop-muted);font-size:.88rem}.product-info strong{margin-top:auto}.product-info em{color:#9b3127;font-size:.85rem}.product-open img,.food-placeholder{width:11rem;min-width:11rem;aspect-ratio:4/3;object-fit:cover}.food-placeholder{display:grid;place-items:center;background:#f3eee8;font-size:2rem}.tag-list{display:flex;flex-wrap:wrap;gap:.3rem;margin:.3rem 0}.tag-list span{padding:.15rem .45rem;border-radius:2rem;color:#27613d;background:#e9f5ed;font-size:.72rem}.quick-add{position:absolute;right:12rem;bottom:1.2rem;width:2rem;height:2rem;border:1px solid color-mix(in srgb,var(--shop-primary) 40%,#ddd);border-radius:.4rem;color:var(--shop-primary);background:#fff;font-weight:800;cursor:pointer}.quick-add:disabled{color:#aaa;cursor:not-allowed}.unavailable{opacity:.7}.cart-panel{position:sticky;top:4.5rem;align-self:start;padding:1.25rem;border:1px solid var(--shop-border);border-radius:.8rem;background:#fff;box-shadow:0 4px 18px #00000008}.cart-heading{display:flex;align-items:center;justify-content:space-between}.cart-heading h2{margin:0;font-size:1.2rem}.cart-heading button{display:none;border:0;background:none;font-size:1.8rem}.cart-item{display:grid;grid-template-columns:1fr auto;gap:.75rem;padding:1rem 0;border-bottom:1px solid var(--shop-border)}.cart-item>div:first-child{display:grid}.cart-item small{color:var(--shop-muted)}.cart-controls{display:flex;grid-row:2;gap:.3rem}.cart-controls button{width:1.8rem;border:1px solid var(--shop-border);border-radius:.3rem;background:#fff}.cart-item>b{grid-column:2;grid-row:1}.cart-empty{padding:2rem 0;color:var(--shop-muted);text-align:center}.cart-heading-count{color:var(--shop-muted);font-weight:500}.cart-summary{display:grid;gap:.45rem;padding:1.1rem 0}.cart-summary-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;font-size:.9rem}.cart-summary-row>span:first-child{color:var(--shop-muted)}.cart-summary-grand{margin-top:.35rem;padding-top:.8rem;border-top:1px solid var(--shop-border);font-size:1rem}.cart-summary-grand>span:first-child{color:inherit;font-weight:650}.cart-summary-grand strong{font-size:1.1rem}.checkout{width:100%;padding:.9rem;border:0;border-radius:.5rem;color:#777;background:#eee}.product-dialog{width:min(42rem,calc(100% - 2rem));max-height:90vh;padding:0;border:0;border-radius:1rem;box-shadow:0 20px 80px #0005}.product-dialog::backdrop{background:#15100c99}.dialog-shell{position:relative}.dialog-close{position:absolute;right:1rem;top:1rem;z-index:1;width:2.5rem;height:2.5rem;border:0;border-radius:50%;background:#fff;font-size:1.6rem}.dialog-image{display:block;width:100%;height:17rem;object-fit:cover}.dialog-content{padding:1.5rem}.dialog-content h2{margin-top:0}.dialog-content fieldset{margin:1.5rem 0;padding:0;border:0}.dialog-content legend{font-size:1.1rem;font-weight:750}.dialog-content fieldset>small{display:block;color:var(--shop-muted)}.dialog-content fieldset label{display:flex;gap:.7rem;padding:.75rem 0;border-bottom:1px solid var(--shop-border)}.dialog-content fieldset input{width:auto}.dialog-content fieldset label b{margin-left:auto}.modifier-error{color:#a32218}.option-qty{display:inline-flex;align-items:center;gap:.45rem;margin-left:.7rem}.option-qty[hidden]{display:none}.option-qty button{width:1.6rem;height:1.6rem;border:1px solid var(--shop-border);border-radius:50%;background:#fff;line-height:1;cursor:pointer}.quantity{display:inline-flex;align-items:center;gap:1rem;margin:1rem 0}.quantity button{width:2.5rem;height:2.5rem;border:1px solid var(--shop-border);border-radius:50%;background:#fff}.add-cart{float:right;margin:1rem 0;padding:.8rem 1.2rem;border:0;border-radius:.5rem;color:var(--shop-contrast);background:var(--shop-primary)}.add-cart:disabled{opacity:.45}.shop-footer{display:grid;grid-template-columns:1.3fr 1.6fr 1fr;gap:2.5rem;padding:2.75rem max(1rem,calc((100% - 78rem)/2));color:inherit;background:#f0ede9}.shop-footer address{margin-top:.6rem;font-style:normal;color:#5f5b57;font-size:.86rem;line-height:1.55}.shop-footer .footer-col{display:grid;align-content:start;justify-items:start;gap:.55rem}.shop-footer h3{margin:0 0 .25rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a857f}.shop-footer a{color:inherit;font-size:.86rem}.shop-footer details{max-width:24rem;font-size:.86rem}.shop-footer summary{cursor:pointer}.shop-footer details p{margin:.5rem 0 0;color:#5f5b57}.footer-powered{grid-column:1/-1;margin-top:1rem;padding-top:1.25rem;border-top:1px solid #e2ded9;color:#8a857f;text-align:right}.mobile-cart,.cart-backdrop{display:none}.search-empty{padding:4rem 1rem;text-align:center}
.open-status-details{position:relative}.open-status-details summary{list-style:none;cursor:pointer}.open-status-details summary::-webkit-details-marker{display:none}
.restaurant-hero:has(.open-status-details[open]),.restaurant-hero:has(.shop-share-dropdown[open]){overflow:visible}
.restaurant-hero:has(.open-status-details[open]) .hero-copy,.restaurant-hero:has(.shop-share-dropdown[open]) .hero-copy{z-index:7}
.open-status.is-closed{color:#9b3127}.open-chevron{width:.85rem;height:.85rem;transition:transform 150ms ease}.open-status-details[open] .open-chevron{transform:rotate(180deg)}
.opening-hours-panel{position:absolute;left:0;top:calc(100% + .5rem);z-index:6;min-width:16.5rem;max-width:calc(100vw - 2rem);padding:.95rem 1.1rem;border:1px solid var(--shop-border);border-radius:.75rem;background:#fff;box-shadow:0 12px 32px #211b1726;color:#221f1d;font-weight:400}
.opening-hours-title{margin:0 0 .55rem;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#8a857f}
.opening-hours-list{display:grid;gap:.3rem;margin:0;font-size:.8rem}.opening-hours-row{display:flex;justify-content:space-between;gap:1.5rem}.opening-hours-row dt{font-weight:500;color:#5f5b57}.opening-hours-row dd{margin:0;text-align:right}.opening-hours-row.is-today dt,.opening-hours-row.is-today dd{font-weight:700;color:#1b1917}
.payment-methods{display:flex;align-items:center;gap:.4rem;margin-top:1rem;padding-top:.95rem;border-top:1px solid var(--shop-border)}
.payment-methods .pay-badge{width:2.85rem;height:1.75rem;flex:none}.payment-methods small{margin-left:.15rem;color:var(--shop-muted);font-size:.72rem;white-space:nowrap}
.storefront-admin-bar{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem max(2.5rem,calc((100% - 78rem)/2));color:#e8e5e2;background:#211d1a;font-size:.78rem}
.admin-bar-label{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;letter-spacing:.01em}.admin-bar-label svg{width:1rem;height:1rem}
.admin-edit-toggle{display:inline-flex;align-items:center;gap:.45rem;padding:.38rem .8rem;border:1px solid #4a443f;border-radius:.5rem;color:#fff;background:transparent;font-size:.78rem;font-weight:600;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease}
.admin-edit-toggle svg{width:.9rem;height:.9rem;fill:currentColor}
.admin-edit-toggle:hover{border-color:#6a635c;background:#2e2925}
.admin-edit-toggle[aria-pressed=true]{color:#211d1a;border-color:#fff;background:#fff}
.admin-edit-toggle:focus-visible{outline:2px solid #fff;outline-offset:2px}
.admin-bar-actions{display:inline-flex;align-items:center;gap:.5rem}
a.admin-edit-toggle{color:#fff;text-decoration:none}
.storefront:not(.edit-mode-active) .storefront-edit{display:none}
.storefront:not(.edit-mode-active) .locale-select--single{display:none}
.storefront-editor-dialog{width:min(64rem,calc(100% - 2rem));height:min(52rem,calc(100vh - 3rem));padding:0;border:0;border-radius:1rem;box-shadow:0 24px 90px #0006}
.storefront-editor-dialog::backdrop{background:#15100c99}
.storefront-editor-shell{display:flex;height:100%;flex-direction:column}
.storefront-editor-shell header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.25rem;border-bottom:1px solid #e7e4e1}
.storefront-editor-shell h2{margin:0;font-size:1rem}
.storefront-editor-shell .dialog-close{position:static;flex:none}
.storefront-editor-shell iframe{width:100%;flex:1;border:0;background:#fff}
@media(max-width:800px){.storefront-editor-dialog{width:100%;max-width:none;height:94vh;max-height:none;margin:auto 0 0;border-radius:1rem 1rem 0 0}}
.edit-brand{margin-left:.35rem}
.delivery-area-shell header .storefront-edit{position:static;margin-left:auto}
.frame-mode .shell{display:block;min-height:0}
.frame-mode .content{padding:1.35rem 1.5rem}
.locale-picker{margin:1.25rem 0;padding:1rem 1.1rem;border:1px solid var(--color-border,#e5e2df);border-radius:.7rem}
.locale-picker legend{padding:0 .35rem;font-weight:700}
.locale-picker-hint{margin:.15rem 0 .75rem;color:#6b6763;font-size:.86rem}
.locale-picker-toolbar{margin-bottom:.6rem}
.locale-picker-list{display:grid;gap:.15rem}
.locale-picker-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:1rem;padding:.5rem .6rem;border-radius:.45rem}
.locale-picker-row:nth-child(odd){background:#faf9f7}
.locale-picker-row.is-default{background:#f1f7f3}
.locale-picker-language{display:inline-flex;align-items:center;gap:.5rem;min-width:0}
.locale-picker-language small{color:#8a857f}
.locale-picker-icon{width:1.25rem;height:1.25rem;object-fit:contain}
.locale-picker-option{display:inline-flex;align-items:center;gap:.4rem;margin:0;white-space:nowrap}
.locale-picker-option input{width:auto}
@media(max-width:600px){.locale-picker-row{grid-template-columns:1fr;gap:.35rem}}
.storefront-edit.edit-address{width:1.7rem;height:1.7rem;margin-left:.45rem}.edit-address svg{width:.8rem;height:.8rem}
.service-times-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:1rem 1.5rem;margin-bottom:1rem}
.service-hours-form,.service-times-form{margin-bottom:1.25rem}
.address-fields{display:grid;grid-template-columns:2.2fr 1fr;gap:.75rem 1.25rem;max-width:36rem}
@media(max-width:600px){.address-fields{grid-template-columns:1fr}}
/* The AI favicon action is a quiet, optional helper under the favicon field;
it must not compete with the form's one primary action (Speichern). The
selector has to outrank the global `body:not(…) button[type="submit"]` rule,
which would otherwise paint it in the filled primary style. */
.favicon-generate{margin:-.5rem 0 var(--space-6)}.favicon-generate small{display:block;margin-top:.3rem;color:#6b6763}
body:not(.storefront) .favicon-generate button.button.button-ai[type="submit"][formaction][data-favicon-generate-button]{min-height:2.25rem;padding:.4rem .8rem;border:1px dashed color-mix(in srgb,var(--brand-primary) 55%,transparent);color:var(--brand-primary);background:transparent;box-shadow:none;font-size:var(--text-sm);font-weight:650}
body:not(.storefront) .favicon-generate button.button.button-ai[type="submit"][formaction][data-favicon-generate-button]:hover{color:var(--brand-primary);background:color-mix(in srgb,var(--brand-primary) 8%,transparent);filter:none;transform:none;box-shadow:none}
.favicon-generate .button.button-ai:disabled{opacity:.7;cursor:progress}
.favicon-generate-hint{margin:0;padding:.55rem .75rem;border-radius:var(--radius-sm);background:var(--color-canvas);color:var(--color-muted);font-size:var(--text-sm)}
.favicon-generate small.favicon-generate-hint{margin-top:.3rem}.favicon-generate [hidden]{display:none!important}
.service-info-editable{position:relative}
.storefront-edit.edit-service-info{position:absolute;top:.35rem;right:calc(max(2.5rem,(100% - 78rem)/2) - .65rem);z-index:4}
.opening-hours-panel{position:absolute}.opening-hours-title{position:relative;padding-right:2.4rem}
.storefront-edit.edit-opening-hours{position:absolute;right:0;top:-.35rem;width:1.9rem;height:1.9rem}.edit-opening-hours svg{width:.9rem;height:.9rem}
.shop-footer{position:relative}.storefront-edit.edit-footer{position:absolute;top:1.15rem;right:max(1rem,calc((100% - 78rem)/2))}
@media(max-width:800px){.storefront-admin-bar{padding:.4rem .85rem}.storefront-edit.edit-service-info{top:.1rem;right:.2rem}.storefront-edit.edit-footer{top:.85rem;right:.85rem}}
@media(max-width:800px){.storefront{padding-bottom:5rem}.shop-header{grid-template-columns:1fr auto auto;gap:.5rem;padding:.75rem 1rem}.shop-search{grid-column:1/-1;grid-row:2}.header-cart span,.header-cart strong{display:none}.header-cart{display:block}.service-bar{justify-content:flex-start}.restaurant-hero{grid-template-columns:1fr;min-height:0}.hero-copy{padding:2rem 1rem}.hero-image{grid-row:1;min-height:12rem}.category-nav{top:0}.filter-bar{overflow:auto}.filter-bar>span{display:none}.shop-layout{display:block;padding-bottom:2rem}.product-open img,.food-placeholder{width:7.5rem;min-width:7.5rem}.quick-add{right:8.2rem}.cart-panel{position:fixed;z-index:20;inset:auto 0 0;display:none;max-height:82vh;overflow:auto;border-radius:1rem 1rem 0 0}.cart-open .cart-panel{display:block}.cart-heading button{display:block}.cart-backdrop{position:fixed;z-index:19;inset:0;background:#0007}.cart-open .cart-backdrop{display:block}.mobile-cart{position:fixed;z-index:10;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));left:1rem;display:flex;justify-content:space-between;padding:1rem;border:0;border-radius:.7rem;color:var(--shop-contrast);background:var(--shop-primary);box-shadow:0 8px 30px #0004}.shop-footer{grid-template-columns:1fr}.product-dialog{width:100%;max-width:none;max-height:94vh;margin:auto 0 0;border-radius:1rem 1rem 0 0}.dialog-image{height:13rem}}
@media(max-width:370px){.shop-header{grid-template-columns:1fr auto}.locale-select{display:none}.product-open img,.food-placeholder{width:6rem;min-width:6rem}.quick-add{right:6.5rem}.product-info{padding-left:.8rem}.service-bar{font-size:.78rem}}
/* Restaurant introduction: a quiet information panel flowing into the food photography. */
.restaurant-hero {
grid-template-columns: minmax(24rem, 48%) 1fr;
min-height: 22rem;
overflow: hidden;
}
.hero-copy {
z-index: 1;
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
padding: 2.65rem 2rem 2.4rem max(1.75rem, calc((100vw - 78rem) / 2));
background: #fff;
}
.hero-logo {
width: auto;
max-width: 11.5rem;
height: auto;
max-height: 4.65rem;
margin-bottom: 1.35rem;
object-fit: contain;
object-position: left center;
}
.hero-copy h1 {
margin: 0 0 .8rem;
color: #242223;
font-size: clamp(1.65rem, 2.45vw, 2.25rem);
font-weight: 750;
letter-spacing: -.035em;
line-height: 1.08;
}
.hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .45rem 0;
margin: 0;
color: #77736f;
font-size: .78rem;
line-height: 1.4;
}
.hero-meta > span {
display: inline-flex;
align-items: center;
}
.hero-meta > * + *::before {
width: 1px;
height: 1rem;
margin: 0 .85rem;
background: #ddd9d5;
content: "";
}
.hero-meta > a { display: inline-flex; align-items: center; }
.hero-meta > .hero-address::before { display: none; }
.hero-meta > .hero-address { flex-basis: 100%; }
.hero-address svg {
width: .85rem;
height: .85rem;
margin-right: .35rem;
fill: #8b8783;
}
.open-status {
display: flex;
align-items: center;
gap: .4rem;
margin: 1.15rem 0 0;
color: #278348;
font-size: .8rem;
font-weight: 700;
}
.open-status > span {
width: .42rem;
height: .42rem;
border-radius: 50%;
background: currentColor;
}
.hero-image {
position: relative;
min-height: 22rem;
background-color: #eee7de;
background-image: var(--hero-image, url('/uploads/menu-items/storefront-hero.jpg'));
background-position: var(--hero-x, 50%) var(--hero-y, 50%);
/* Same model as the crop editor's preview (.crop-preview): zoom% of the frame width. */
background-size: var(--hero-zoom, 100%) auto;
background-repeat: no-repeat;
}
.hero-image::before {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
width: clamp(5rem, 11vw, 10rem);
background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .94) 15%, rgba(255, 255, 255, .62) 48%, transparent 100%);
content: "";
pointer-events: none;
}
@media(max-width:800px) {
.restaurant-hero { grid-template-columns: 1fr; min-height: 0; }
.hero-copy { padding: 2rem 1.25rem 2.15rem; }
.hero-logo { margin-bottom: 1rem; }
.hero-image { grid-row: 1; min-height: 13rem; }
.hero-image::before { inset: auto 0 0; width: auto; height: 4.5rem; background: linear-gradient(0deg, #fff, transparent); }
}
@media(max-width:480px) {
.hero-meta { align-items: flex-start; flex-direction: column; }
.hero-meta > * + *::before { display: none; }
}
.page-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.delivery-settings{display:grid;gap:1.25rem}.delivery-settings .card{padding:1.5rem}.delivery-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.money-input{display:flex}.money-input input{border-radius:.5rem 0 0 .5rem!important}.money-input span{display:grid;place-items:center;padding:0 .8rem;border:1px solid var(--color-border);border-left:0;border-radius:0 .5rem .5rem 0;background:var(--color-canvas);font-weight:700}.delivery-modes{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;padding:0!important;border:0!important;box-shadow:none!important}.delivery-modes label{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:1px solid var(--color-border);border-radius:.65rem;cursor:pointer}.delivery-modes label:has(input:checked){border-color:var(--brand-primary);background:color-mix(in srgb,var(--brand-accent) 30%,#fff);box-shadow:var(--focus-ring)}.delivery-modes i{font-size:1.4rem;color:var(--brand-primary)}.delivery-modes small{display:block;margin-top:.2rem}.radius-entry{max-width:24rem;margin:1rem 0}.postal-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem;margin:1rem 0}.postal-entry [data-map-status]{grid-column:1/-1}.delivery-map{width:100%;height:min(32rem,58vh);min-height:22rem;margin-top:1rem;border:1px solid var(--color-border);border-radius:.75rem;background:#e9edf3}.polygon-controls{display:flex;gap:.75rem;margin-top:1rem}.map-help{color:var(--color-muted)}
@media(max-width:48rem){.delivery-fields,.delivery-modes{grid-template-columns:1fr}.postal-entry{grid-template-columns:1fr}.delivery-map{min-height:18rem}}
/* Delivery settings overview: the forms live in dashboard dialogs behind summary cards. */
.dashboard-dialog--wide{width:min(64rem,calc(100% - 2rem))}
.dashboard-dialog-shell>header+.muted{margin:-.5rem 0 1rem}
.dashboard-dialog-shell .card{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.dashboard-dialog .delivery-map{height:min(24rem,45vh);min-height:16rem}
.delivery-area-preview .delivery-map{height:min(18rem,40vh);min-height:12rem}
.dashboard-dialog .delivery-fields{margin-top:1rem}
.dashboard-dialog .delivery-modes{margin-top:1rem}
@media(max-width:48rem){.dashboard-dialog .delivery-modes label{padding:.65rem}}
.storefront-preview-bar{position:fixed;z-index:30;right:0;bottom:0;left:0;padding:1rem max(1rem,calc((100% - 78rem)/2));color:#fff;background:#8a2c20;box-shadow:0 -4px 18px #0003;text-align:center;font-weight:750}
.storefront:has(.storefront-preview-bar){padding-bottom:3.5rem}
.storefront:has(.storefront-preview-bar) .mobile-cart{bottom:calc(4.5rem + env(safe-area-inset-bottom))}
.image-uploader progress{width:100%;height:1rem}.crop-editor{display:grid;gap:var(--space-4)}.crop-preview{width:min(42rem,100%);aspect-ratio:var(--crop-ratio);border-radius:var(--radius-md);background-position:var(--crop-x) var(--crop-y);background-size:var(--crop-zoom) auto;background-repeat:no-repeat;background-color:#eee}.crop-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:var(--space-4)}.crop-controls label{display:grid;gap:var(--space-1)}
/* Direct editing controls shown to restaurant owners and admins in storefront preview. */
.storefront-edit{position:relative;z-index:3;display:inline-grid;flex:none;place-items:center;width:2.35rem;height:2.35rem;border:1px solid #d7d1cb;border-radius:50%;color:#302b27;background:#fff;box-shadow:0 2px 9px #0002;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}.storefront-edit:hover{transform:translateY(-1px);box-shadow:0 4px 14px #0003}.storefront-edit:focus-visible{outline:3px solid color-mix(in srgb,var(--shop-primary) 45%,#fff);outline-offset:2px}.storefront-edit svg{width:1.15rem;height:1.15rem;fill:currentColor}.storefront-edit-heading{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.storefront-edit-heading h2,.storefront-edit-heading h3{margin-block:.7rem}.hero-copy,.hero-image{position:relative}.edit-hero-copy,.edit-hero-image{position:absolute;top:1rem;right:1rem}.edit-product{position:absolute;top:.75rem;right:11.85rem}.product-dialog .storefront-edit-heading{padding-right:2.5rem}
@media(max-width:800px){.edit-product{right:8rem}.storefront-edit{width:2.15rem;height:2.15rem}}
@media(max-width:370px){.edit-product{right:6.25rem}}
/* Bootstrap 5.3 white-label layer -------------------------------------------------
Semantic application tokens remain the public theming API. Bootstrap consumes
those tokens, while these component rules give old Twig markup the same visual
language during the incremental migration. */
body:not(.storefront) { background: radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--brand-accent) 70%, transparent), transparent 32rem), var(--color-canvas); }
body:not(.storefront) h1, body:not(.storefront) h2, body:not(.storefront) h3 { letter-spacing: -.025em; font-weight: 750; }
.topbar { position: sticky; z-index: 40; top: 0; display: block; padding: .7rem clamp(1rem, 3vw, 2.5rem); background: linear-gradient(115deg, color-mix(in srgb, var(--brand-primary) 84%, #15100c), var(--brand-primary)); box-shadow: 0 .5rem 2rem #241d191a; }
.topbar-inner { max-width: 90rem; padding: 0; }
.brand { display: inline-flex; align-items: center; gap: .65rem; margin-right: 1.75rem; color: #fff; font-size: 1.15rem; letter-spacing: -.02em; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; color: var(--brand-primary); background: #fff; font-size: 1.25rem; font-weight: 900; box-shadow: 0 .2rem .8rem #0002; }
.topbar .navbar-collapse { align-items: center; gap: 1rem; }
.topbar .nav { align-items: center; flex-wrap: nowrap; gap: .2rem; }
.topbar .nav a, .account-nav a, .nav-button, .nav-login { padding: .55rem .7rem; border-radius: .5rem; color: #fff; opacity: .82; text-decoration: none; white-space: nowrap; transition: opacity .15s ease, background-color .15s ease, transform .15s ease; }
.topbar .nav a:hover, .account-nav a:hover, .nav-button:hover, .nav-login:hover, .topbar .nav a[aria-current="page"] { color: #fff; background: #fff2; opacity: 1; }
.topbar .nav a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.account-nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.account-nav form { margin: 0; }
.nav-button { text-decoration: none; }
.context-switchers { flex: 0 1 auto; gap: .5rem; margin-left: .5rem; }
.context-switchers label { color: #fffc; font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.context-switchers select { min-width: 8.5rem; padding: .3rem 2rem .3rem .6rem; border-color: #ffffff4d; color: #fff; background-color: #ffffff14; font-size: .8rem; text-transform: none; }
.context-switchers option { color: var(--color-text); background: #fff; }
.content { width: min(78rem, 100%); padding-block: clamp(1.5rem, 4vw, 3rem); }
.breadcrumbs ol { align-items: center; margin-bottom: 1.4rem; font-size: var(--text-sm); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--space-2); color: color-mix(in srgb, var(--color-muted) 55%, transparent); }
.breadcrumbs a { color: var(--color-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--brand-primary); }
.page-header { padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.page-header h1, .page-header h2 { margin-bottom: 0; }
.eyebrow { margin-bottom: .35rem; color: var(--brand-primary); font-size: .75rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.card, .panel, .hero, .empty-state, body:not(.storefront) fieldset { border-color: color-mix(in srgb, var(--color-border) 85%, transparent); box-shadow: 0 .25rem 1.25rem #241d190a; }
.card { --bs-card-border-color: var(--color-border); --bs-card-border-radius: var(--radius-md); }
.hero { position: relative; overflow: hidden; border: 0; color: #fff; background: linear-gradient(125deg, color-mix(in srgb, var(--brand-primary) 88%, #15100c), var(--brand-primary)); box-shadow: 0 1rem 2.5rem color-mix(in srgb, var(--brand-primary) 18%, transparent); }
.hero::after { position: absolute; right: -5rem; bottom: -7rem; width: 18rem; height: 18rem; border: 3rem solid #fff1; border-radius: 50%; content: ""; }
.hero p { color: #ffffffe0; }
.hero .badge { color: var(--brand-primary); background: #fff; }
.button, body:not(.storefront):not(.auth):not(.onboarding):not(.landing):not(.checkout-page) button[type="submit"] { --bs-btn-color: var(--brand-primary-contrast); --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.65rem; padding: .6rem 1rem; border: 1px solid var(--brand-primary); border-radius: .55rem; color: var(--brand-primary-contrast); background: var(--brand-primary); font-weight: 700; line-height: 1.25; text-decoration: none; box-shadow: 0 .25rem .65rem color-mix(in srgb, var(--brand-primary) 18%, transparent); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
.button:hover, body:not(.storefront):not(.auth):not(.onboarding):not(.landing):not(.checkout-page) button[type="submit"]:hover { color: var(--brand-primary-contrast); filter: brightness(.92); transform: translateY(-1px); box-shadow: 0 .4rem .9rem color-mix(in srgb, var(--brand-primary) 24%, transparent); }
.button-secondary { color: var(--brand-primary); background: transparent; box-shadow: none; }
.button-secondary:hover { color: var(--brand-primary-contrast); background: var(--brand-primary); }
.flash, .alert { border: 0; border-left: .25rem solid var(--brand-primary); border-radius: .45rem; box-shadow: 0 .2rem .8rem #241d190b; }
/* Backend banner while a restaurant is still inside the boarding wizard. */
.boarding-resume-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-bottom: var(--space-4); padding: .8rem 1rem; border-left: .25rem solid var(--brand-primary); border-radius: .45rem; background: color-mix(in srgb, var(--brand-primary) 6%, var(--color-surface)); box-shadow: 0 .2rem .8rem #241d190b; }
.boarding-resume-banner > .bi { color: var(--brand-primary); font-size: 1.15rem; }
.boarding-resume-copy { flex: 1 1 16rem; min-width: 0; }
.boarding-resume-action { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--brand-primary); text-decoration: none; white-space: nowrap; }
.boarding-resume-action:hover { text-decoration: underline; color: var(--brand-primary); }
/* "Konditionen & Vertrag" backend page: static condition cards and the acceptance state. */
.partner-terms-list { display: grid; gap: .9rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.partner-terms-list li { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-surface); }
.partner-terms-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 9%, var(--color-surface)); font-size: 1.15rem; }
.partner-terms-subheading { margin: 1.25rem 0 .25rem; font-size: 1.15rem; }
.partner-terms-consent { margin-bottom: .75rem; font-size: .9rem; }
.partner-terms-state { display: flex; align-items: center; gap: .6rem; margin-bottom: 0; }
.flash--success { color: var(--color-success); border-left-color: var(--color-success); }
.flash--error, .alert-error { color: var(--color-danger); border-left-color: var(--color-danger); background: #fff5f4; }
/* Prominent save confirmation (flash type "saved"): unmissable next to a manual
save button, dismissed by app.js as soon as the merchant edits a field again. */
.flash-saved { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin-bottom: var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid color-mix(in srgb, var(--color-success) 45%, #fff); border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-success) 7%, #fff); box-shadow: 0 .35rem 1.2rem color-mix(in srgb, var(--color-success) 12%, transparent); }
.flash-saved-icon { display: grid; flex: none; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 50%; color: #fff; background: var(--color-success); font-size: 1.6rem; }
.flash-saved-copy { flex: 1 1 18rem; min-width: 0; }
.flash-saved-heading { margin: 0 0 .15rem; color: var(--color-success); font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.flash-saved-copy p { margin: 0; }
.flash-saved-meta { display: flex; flex: none; align-items: center; gap: var(--space-3); padding-inline-start: var(--space-6); border-inline-start: 1px solid color-mix(in srgb, var(--color-success) 25%, #fff); color: var(--color-muted); font-size: var(--text-sm); }
.flash-saved-meta .bi { font-size: 1.35rem; }
.flash-saved-meta strong { display: block; color: var(--color-text); font-size: var(--text-base); }
@media (max-width: 42rem) { .flash-saved-meta { padding-inline-start: 0; border-inline-start: 0; } }
.field { gap: .4rem; }
.field > label, label.field, body:not(.storefront) fieldset > label { font-weight: 650; }
.field small, body:not(.storefront) form small { color: var(--color-muted); font-weight: 400; }
body:not(.storefront):not(.onboarding) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), select, textarea):not(#mobile-restaurant-switcher):not(.context-switchers select) { width: 100%; min-height: 3rem; padding: .65rem .8rem; border: 1px solid var(--color-border); border-radius: .5rem; background-color: var(--color-surface); font: inherit; font-weight: 400; transition: border-color .15s ease, box-shadow .15s ease; }
body:not(.storefront) textarea { min-height: 7rem; resize: vertical; }
/* !important: the global form-control rule above carries an ID in its :not() and would otherwise force width:100% and full rounding, wrapping the Bootstrap input-group's button onto its own line. */
body:not(.storefront) .input-group > :is(input, select, textarea) { flex: 1 1 auto; width: 1% !important; min-width: 0; }
body:not(.storefront) .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body:not(.storefront) .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
/* Chromium pads the date/time edit fields by 1px, which made date inputs 2px
taller than the shared 3rem control height of their neighbours. */
body:not(.storefront):not(.onboarding) ::-webkit-datetime-edit-fields-wrapper { padding: 0; }
body:not(.storefront):not(.auth):not(.onboarding) :is(input, select, textarea):not(#mobile-restaurant-switcher):not(.context-switchers select):focus { border-color: color-mix(in srgb, var(--brand-primary) 65%, #fff); outline: 0; box-shadow: var(--focus-ring); }
body:not(.storefront) input[type="checkbox"], body:not(.storefront) input[type="radio"] { width: 1.1rem; height: 1.1rem; margin-right: .35rem; accent-color: var(--brand-primary); }
body:not(.storefront) fieldset { margin-bottom: 1.5rem; padding: 1.35rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
body:not(.storefront) legend { float: none; width: auto; padding: 0 .35rem; font-size: 1rem; font-weight: 750; }
.table-wrap { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 .25rem 1.25rem #241d190a; }
table { margin: 0; }
thead { background: color-mix(in srgb, var(--brand-accent) 45%, #fff); }
th { color: var(--color-muted); font-size: .75rem; letter-spacing: .045em; text-transform: uppercase; }
tbody tr { transition: background-color .15s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--brand-accent) 32%, transparent); }
.badge { --bs-badge-padding-x: .65em; --bs-badge-padding-y: .4em; color: var(--color-success); background: #e8f7ef; }
.restaurant-card { transition: transform .18s ease, box-shadow .18s ease; }
.restaurant-card:hover { transform: translateY(-2px); box-shadow: 0 .8rem 2rem #241d1912; }
.translation-panel:target { border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
.item-template-form .form-hint { max-width: 70ch; margin-top: 0; color: var(--color-muted); }
.item-template-form fieldset > .field { max-width: 32rem; }
.item-template-form .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-3); }
.item-template-form .check-field { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-sm); }
.item-template-form .translation-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: var(--space-3); }
.item-template-form .translation-toolbar .field { width: min(14rem, 100%); margin-bottom: 0; }
.item-translation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-4); }
.translation-card { min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: color-mix(in srgb, var(--brand-accent) 18%, #fff); }
.translation-card h2 { margin: 0 0 var(--space-3); color: var(--brand-primary); font-size: var(--text-base); }
.translation-card .field:last-child { margin-bottom: 0; }
.item-template-form [aria-invalid="true"] { border-color: var(--color-danger) !important; }
.image-uploader progress { border-radius: 1rem; overflow: hidden; accent-color: var(--brand-primary); }
.crop-preview { box-shadow: inset 0 0 0 1px #0001; }
/* The crop preview is the control: drag the image (or use the arrow keys) to set the focus point. */
.crop-preview { position:relative; cursor:grab; touch-action:none; user-select:none; }
.crop-preview.is-dragging { cursor:grabbing; }
.crop-preview:focus-visible { outline:3px solid var(--brand-primary); outline-offset:2px; }
.crop-drag-hint { position:absolute; bottom:.75rem; left:50%; display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .75rem; border-radius:999px; background:#000000a6; color:#fff; font-size:.8rem; white-space:nowrap; pointer-events:none; transform:translateX(-50%); transition:opacity .2s; }
.crop-preview.is-dragging .crop-drag-hint { opacity:0; }
.crop-editor .form-hint { max-width:42rem; margin:0; }
.crop-controls { display:flex; flex-wrap:wrap; align-items:end; gap:var(--space-4); max-width:42rem; }
.crop-zoom-control { flex:1 1 16rem; }
.crop-zoom-slider { display:flex; align-items:center; gap:.6rem; }
.crop-zoom-slider input { flex:1; min-width:0; }
.crop-zoom-slider .bi { color:var(--color-muted); }
/* Food information (allergens & additives) in the public shop — tap/click, never hover-only. */
.food-info-hint { color: var(--shop-muted, #6f6b67); font-size: .74rem; font-weight: 500; }
.option-allergens { color: inherit; opacity: .75; }
.food-info { margin: .35rem 0; }
.food-info summary { color: var(--shop-primary, var(--brand-primary)); cursor: pointer; font-weight: 650; text-decoration: underline; text-underline-offset: .2em; }
.food-info-body h3 { margin: .5rem 0 .1rem; font-size: .9rem; }
.food-info-body p { margin: 0; font-size: .9rem; opacity: .85; }
.nutrition-table { width: 100%; max-width: 26rem; border-collapse: collapse; font-size: .9rem; margin: .25rem 0; }
.nutrition-table th, .nutrition-table td { padding: .2rem .4rem; border-bottom: 1px solid rgba(0,0,0,.1); text-align: left; font-weight: normal; }
.nutrition-table td { text-align: right; white-space: nowrap; }
.nutrition-table .nutrition-sub th { padding-left: 1.2rem; }
.nutrition-note { font-size: .8rem; opacity: .75; }
.cart-food-info { font-size: .8rem; }
.cart-food-info summary { cursor: pointer; opacity: .75; text-decoration: underline; text-underline-offset: .2em; }
.cart-food-info small { display: block; opacity: .75; }
/* Bootstrap-enhanced storefront motion and component polish. */
.product-card, .shop-category, .cart-panel, .product-dialog { transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.product-card:hover { z-index: 1; box-shadow: 0 .65rem 1.6rem #221f1d12; }
.product-dialog[open] { animation: dialog-enter .2s ease-out; }
.cart-open .cart-panel { animation: cart-enter .2s ease-out; }
@keyframes dialog-enter { from { opacity: 0; transform: translateY(1rem) scale(.98); } }
@keyframes cart-enter { from { opacity: 0; transform: translateY(1rem); } }
/* Product dialog as a guided configuration: required steps open one after another,
optional groups are collapsible sections, the order bar stays pinned at the bottom. */
.product-dialog{--step-tint:color-mix(in srgb,var(--shop-primary,#2f7a3b) 8%,#fff);--step-accent:var(--shop-primary,#2f7a3b)}
.dialog-content .modifier-group{margin:1.5rem 0;scroll-margin:1rem 0 8rem}
.dialog-content .modifier-head{float:left;display:block;width:100%;padding:0;margin:0 0 .65rem}
.modifier-group>.modifier-options,.modifier-group>.modifier-error{clear:both}
.modifier-group>.modifier-error:empty{display:none}
.modifier-title{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:1.1rem;font-weight:750}
.modifier-badge{padding:.1rem .55rem;border-radius:999px;color:var(--step-accent);background:var(--step-tint);font-size:.75rem;font-weight:600}
.modifier-hint,.modifier-summary{display:block;color:var(--shop-muted);font-size:.85rem;font-weight:400}
.modifier-summary[hidden]{display:none}
.modifier-group.is-locked .modifier-head{opacity:.45}
.modifier-group.is-locked .modifier-hint{display:none}
.modifier-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.6rem}
.modifier-options[hidden]{display:none}
.dialog-content .modifier-options label{display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border:1px solid var(--shop-border);border-radius:.6rem;background:#fff;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.dialog-content .modifier-options label:hover{border-color:var(--step-accent)}
.dialog-content .modifier-options label:has(input:checked){border-color:var(--step-accent);background:var(--step-tint);box-shadow:inset 0 0 0 1px var(--step-accent)}
.dialog-content .modifier-options input{flex:none;width:1.15rem;height:1.15rem;margin:0;accent-color:var(--step-accent)}
.dialog-content .modifier-options label b{margin-left:auto;white-space:nowrap}
.dialog-content .modifier-group.modifier-group--optional,.dialog-content .food-info{margin:.75rem 0;padding:.25rem .9rem;border-radius:.75rem;background:var(--step-tint)}
.dialog-content .modifier-group--optional .modifier-head{margin:0}
.modifier-group--optional .modifier-options{grid-template-columns:1fr;gap:0;margin:0 0 .65rem;border-radius:.6rem;overflow:hidden;background:#fff}
.dialog-content .modifier-group--optional .modifier-options label{border:0;border-bottom:1px solid var(--shop-border);border-radius:0;box-shadow:none;background:#fff}
.dialog-content .modifier-group--optional .modifier-options label:last-child{border-bottom:0}
.modifier-toggle,.dialog-content .food-info summary{position:relative;display:block;width:100%;padding:.75rem 2rem .75rem 0;border:0;color:inherit;background:none;text-align:left;cursor:pointer}
.modifier-chevron,.dialog-content .food-info summary::after{position:absolute;right:.25rem;top:1.15rem;width:.55rem;height:.55rem;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .15s ease;content:""}
.modifier-toggle[aria-expanded="true"] .modifier-chevron,.dialog-content .food-info[open] summary::after{top:1.4rem;transform:rotate(-135deg)}
.modifier-group.is-locked .modifier-toggle{cursor:not-allowed}
.dialog-content .food-info summary{color:inherit;font-size:1.05rem;font-weight:750;text-decoration:none;list-style:none}
.dialog-content .food-info summary::-webkit-details-marker{display:none}
.dialog-content .food-info .food-info-body{padding:0 0 .75rem}
.dialog-footer{position:sticky;bottom:0;z-index:2;padding:.75rem 1.5rem 1rem;border-top:1px solid var(--shop-border);background:#fff}
.config-summary{margin:0 0 .5rem;overflow:hidden;color:var(--shop-muted);font-size:.9rem;white-space:nowrap;text-overflow:ellipsis}
.config-summary[hidden]{display:none}
.dialog-footer-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.dialog-footer .quantity,.dialog-footer .add-cart{margin:0}
.dialog-footer .add-cart{float:none;flex:0 1 auto;min-width:min(16rem,60%);padding:.85rem 1.2rem;font-weight:700}
.modifier-options--pair{grid-template-columns:1fr 1fr}
@media (max-width:30rem){.modifier-options--single:not(.modifier-options--pair){grid-template-columns:1fr}.dialog-content .modifier-options--pair label{flex-wrap:wrap;row-gap:.15rem}.dialog-content .modifier-options--pair label b{flex-basis:100%;margin-left:1.85rem}.dialog-footer{padding-inline:1rem}.dialog-footer .add-cart{min-width:0;flex:1}}
@media (prefers-reduced-motion:reduce){.modifier-chevron,.dialog-content .food-info summary::after,.dialog-content .modifier-options label{transition:none}}
@media (max-width: 74.99rem) {
.topbar .navbar-collapse { align-items: stretch; padding-top: .85rem; }
.topbar .nav, .account-nav { align-items: stretch; flex-direction: column; }
.account-nav { margin-left: 0; }
.context-switchers { width: 100%; margin: .75rem 0 0; }
.context-switchers label { flex: 1; }
.context-switchers select { width: 100%; }
}
@media (max-width: 48rem) {
.topbar { padding-inline: 1rem; }
.topbar-inner { display: flex; flex-direction: row; }
.context-switchers { flex-direction: column; }
.content { padding-block: 1.25rem; }
.page-header { align-items: flex-start; flex-direction: column; }
.card, body:not(.storefront) fieldset { padding: 1rem; }
.restaurant-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.product-dialog[open], .cart-open .cart-panel { animation: none; }
}
/* Admin application shell */
.shell { grid-template-columns: 17rem minmax(0, 1fr); grid-template-rows: 1fr; }
/* Application-layout pages shown with the public chrome instead of the backend
sidebar (helpcenter, legal, marketing confirmations for viewers without
backend access): single column under the landing-style topbar, which needs
the public palette variables that are otherwise scoped to body.landing. */
.shell--public { --bb-red: #c22d20; --bb-red-dark: #9f2015; --bb-red-soft: #fbeae7; --bb-ink: #241d19; --bb-muted: #6f6660; --bb-cream: #faf6f2; --bb-border: #ece4dd; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
/* Bootstrap makes responsive offcanvas backgrounds transparent with !important
from 992px onward, so the application shell must override it explicitly. */
.admin-sidebar { --bs-offcanvas-color: var(--color-text); --bs-offcanvas-bg: #fff; position: sticky; top: 0; z-index: 8; width: 17rem; height: 100vh; color: var(--color-text); background-color: #fff !important; border: 0; border-right: 1px solid var(--color-border); }
.sidebar-header { display: flex; min-height: 4.75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--color-border); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: 1.15rem; font-weight: 800; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .55rem; color: #211d1a; background: #fff; font-size: 1.25rem; }
/* The uploaded platform logo replaces the built-in mark wherever it exists. */
.brand-logo { display: block; width: auto; max-width: 10rem; height: 2.2rem; object-fit: contain; }
/* Sidebar and mobile topbar are both light chrome: dark brand text, inverted mark. */
.admin-sidebar .brand, .admin-sidebar .brand:hover, .mobile-topbar .brand, .mobile-topbar .brand:hover { color: var(--color-text); }
.admin-sidebar .brand-mark, .mobile-topbar .brand-mark { color: #fff; background: var(--brand-primary); }
.admin-sidebar .sidebar-body { display: flex; flex-direction: column; height: calc(100vh - 4.75rem); padding: 1.5rem .9rem 1rem; overflow-y: auto; color: var(--color-text); background: #fff; scrollbar-width: thin; scrollbar-color: #d9cfc6 transparent; }
.admin-sidebar .sidebar-body::-webkit-scrollbar { width: .55rem; }
.admin-sidebar .sidebar-body::-webkit-scrollbar-track { background: transparent; }
.admin-sidebar .sidebar-body::-webkit-scrollbar-thumb { border: 2px solid #fff; border-radius: 999px; background: #d9cfc6; }
.admin-sidebar .sidebar-body::-webkit-scrollbar-thumb:hover { background: #c1b4a8; }
.restaurant-switcher { margin: 0 .25rem 1.5rem; }
.restaurant-switcher label { display: block; margin-bottom: .5rem; color: var(--color-muted); font-size: .78rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }
.restaurant-switcher-control { position: relative; }
.restaurant-switcher-control > .bi-shop { position: absolute; z-index: 1; top: 50%; left: .8rem; color: var(--color-muted); pointer-events: none; transform: translateY(-50%); }
.restaurant-switcher select { min-height: 2.9rem; padding: .65rem 2.25rem .65rem 2.25rem; border-color: var(--color-border); border-radius: .5rem; color: var(--color-text); background: var(--color-canvas); appearance: none; font-size: .94rem; font-weight: 700; cursor: pointer; }
.restaurant-switcher select:hover { border-color: #d9cfc6; background-color: #f5efe9; }
.restaurant-switcher select:focus-visible { border-color: var(--brand-primary); }
.restaurant-switcher select option { color: var(--color-text, #241d19); background: #fff; }
.restaurant-switcher-chevron { position: absolute; top: 50%; right: .8rem; color: var(--color-muted); font-size: .7rem; pointer-events: none; transform: translateY(-50%); }
.restaurant-switcher-city { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; padding: 0 .15rem; color: var(--color-muted); font-size: .78rem; }
.restaurant-switcher-city i { font-size: .75rem; }
.sidebar-nav { display: grid; gap: .15rem; }
.sidebar-nav a, .sidebar-nav summary, .sidebar-account a, .sidebar-account button { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .62rem .75rem; border: 0; border-radius: .55rem; color: #4c453f; background: transparent; font: inherit; font-size: .95rem; font-weight: 550; text-align: left; text-decoration: none; cursor: pointer; }
.sidebar-nav a, .sidebar-nav summary { white-space: nowrap; }
.sidebar-nav :is(a, summary) > span, .sidebar-account a > span, .sidebar-referral-text :is(strong, small) { overflow: hidden; text-overflow: ellipsis; }
.sidebar-nav a:hover, .sidebar-nav summary:hover, .sidebar-account :is(a, button):hover { color: var(--color-text); background: #f5efe9; }
.sidebar-nav a[aria-current="page"] { color: var(--brand-primary); background: var(--brand-accent); font-weight: 700; box-shadow: inset .22rem 0 0 var(--brand-primary); }
.sidebar-nav i, .sidebar-account i { width: 1.2rem; color: #8d8379; font-size: 1.02rem; text-align: center; }
.sidebar-nav :is(a, summary):hover i, .sidebar-account :is(a, button):hover i { color: var(--color-text); }
.sidebar-nav a[aria-current="page"] i { color: var(--brand-primary); }
.sidebar-divider { margin: 1.25rem .5rem 1rem; border-top: 1px solid var(--color-border); }
.sidebar-section-title { margin: 0 .75rem .45rem; color: #a39a91; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.sidebar-nav .sidebar-section-title { margin: 1.15rem .75rem .3rem; }
.sidebar-nav details summary { justify-content: space-between; list-style: none; }
.sidebar-nav details summary::-webkit-details-marker { display: none; }
.sidebar-nav summary span { display: flex; align-items: center; gap: .8rem; }
.sidebar-nav .chevron { width: auto; font-size: .72rem; transition: transform .15s ease; }
.sidebar-nav details[open] .chevron { transform: rotate(180deg); }
.sidebar-subnav { display: grid; gap: .1rem; margin: .1rem 0 .25rem 2.7rem; border-left: 1px solid var(--color-border); }
.sidebar-subnav a { padding: .44rem .8rem; border-radius: 0 .45rem .45rem 0; color: var(--color-muted); font-size: .86rem; }
.sidebar-subnav a[aria-current="page"] { box-shadow: inset .18rem 0 0 var(--brand-primary); }
.sidebar-nav a.sidebar-referral { align-items: center; gap: .7rem; margin-top: 1.15rem; padding: .6rem .7rem; border: 1px solid #cfe7da; border-radius: .7rem; color: var(--color-success); background: #ebf6f0; box-shadow: none; }
.sidebar-nav a.sidebar-referral:hover { border-color: #b3d9c5; color: var(--color-success); background: #dff0e7; }
.sidebar-nav a.sidebar-referral[aria-current="page"] { border-color: #9ccfb4; font-weight: 550; }
.sidebar-referral-icon { display: grid; flex: 0 0 2.1rem; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: .55rem; background: #fff; box-shadow: 0 .1rem .35rem #19714a1f; }
.sidebar-nav a.sidebar-referral i { width: auto; color: var(--color-success); }
.sidebar-referral-text { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.sidebar-referral-text strong { font-size: .86rem; }
.sidebar-referral-text small { color: #47845f; font-size: .74rem; font-weight: 450; }
.sidebar-nav a.sidebar-referral > .bi-chevron-right { font-size: .75rem; }
.sidebar-account { display: grid; gap: .15rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.sidebar-account form { margin: 0; }
.sidebar-account input { display: none; }
.sidebar-account .sidebar-logout { padding: .25rem .75rem; }
body:not(.storefront) .sidebar-account .sidebar-logout-link { display: inline-flex; width: auto; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--color-muted); background: transparent; font-size: .82rem; font-weight: 450; line-height: 1.5; text-decoration: none; box-shadow: none; transform: none; }
body:not(.storefront) .sidebar-account .sidebar-logout-link:hover { color: var(--color-text); background: transparent; text-decoration: underline; text-underline-offset: .2em; box-shadow: none; filter: none; transform: none; }
body:not(.storefront) .sidebar-account .sidebar-logout-link i { width: auto; font-size: .9rem; }
.mobile-topbar { display: none; }
.content { width: min(82rem, 100%); padding: var(--space-6) clamp(1rem, 4vw, 3rem); }
@media (max-width: 991.98px) {
.shell { display: block; }
.mobile-topbar { position: sticky; top: 0; z-index: 7; display: flex; align-items: center; justify-content: space-between; min-height: 4rem; padding: .65rem 1rem; border-bottom: 1px solid var(--color-border); background: #fff; }
.sidebar-toggle { border: 0; color: var(--color-text); background: transparent; font-size: 1.65rem; }
/* Open offcanvas must stack above Bootstrap's backdrop (z-index 1040) — the
shell rule above pins the desktop sidebar to z-index 8, which would leave
the opened menu dimmed and unclickable underneath the backdrop. */
.admin-sidebar { position: fixed; z-index: var(--bs-offcanvas-zindex, 1045); width: min(19rem, 88vw); }
}
.place-status { min-height: 1.5rem; margin-block: .5rem; }
.autosave-status { margin: .75rem 0 0; color: var(--color-muted); font-size: .85rem; }
.autosave-status.is-error { color: var(--color-danger, #a52323); }
.item-edit { margin-left: auto; }
.catalog-edit-dialog { width: min(64rem, calc(100% - 2rem)); height: min(52rem, calc(100% - 2rem)); padding: 0; border: 0; border-radius: 1rem; box-shadow: 0 20px 80px #0005; }
.catalog-edit-dialog::backdrop { background: #15100c99; }
.catalog-edit-shell { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.catalog-edit-shell header { display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem; border-bottom: 1px solid var(--color-border); }
.catalog-edit-shell h2 { margin: 0; font-size: 1.2rem; }
.catalog-edit-shell iframe { width: 100%; height: 100%; border: 0; }
.audit-history { overflow-x: auto; }
.audit-history code { white-space: pre-wrap; overflow-wrap: anywhere; }
.settings-grid { display: grid; gap: 1rem; }
.tax-rates { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: .75rem; }
.tax-rates label { min-width: 8rem; }
.tax-rates input { width: 5.5rem; }
.country-settings-grid { gap: 1.5rem; }
.country-settings-card { padding: 0; overflow: hidden; }
.country-settings-header, .country-settings-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.35rem; }
.country-settings-header { border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, var(--brand-accent) 22%, #fff); }
.country-settings-header h2, .country-settings-header p, .country-media h3, .country-fields h3 { margin: 0; }
.country-settings-header h2 { font-size: 1.35rem; }
.country-identity { display: flex; align-items: center; gap: .85rem; }
.country-icon-preview { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: .75rem; background: #fff; }
.country-icon-preview img { width: 100%; height: 100%; padding: .3rem; object-fit: contain; }
.country-icon-preview.is-placeholder { color: var(--brand-primary); font-weight: 800; }
.country-active { display: flex; align-items: center; gap: .45rem; margin: 0; padding: .5rem .7rem; border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, var(--color-border)); border-radius: 999px; background: #fff; font-weight: 650; }
.country-settings-body { display: grid; grid-template-columns: minmax(24rem, 1.1fr) minmax(25rem, .9fr); }
.country-fields, .country-media { display: grid; align-content: start; gap: 1rem; padding: 1.35rem; }
.country-media { border-left: 1px solid var(--color-border); background: #faf9f7; }
.country-section-kicker { margin: 0 0 .15rem; color: var(--color-muted); font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.country-fields > .field { max-width: 9rem; margin: 0; }
.country-imprint-required { display: grid; gap: .3rem; }
.country-imprint-required label { display: flex; align-items: center; gap: .45rem; margin: 0; font-weight: 650; }
.country-imprint-required small { color: var(--color-muted); }
.country-settings-card .tax-rates { display: block; margin: 0; padding: 1rem; border-color: var(--color-border); border-radius: .65rem; }
.country-settings-card .tax-rates legend { padding: 0 .35rem; font-weight: 700; }
.tax-rate-grid { display: grid; grid-template-columns: repeat(3, minmax(7rem, 1fr)); gap: .8rem; }
.tax-rate-grid label { display: grid; gap: .4rem; min-width: 0; }
.input-suffix { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .4rem; }
.input-suffix input { width: 100%; min-width: 0; }
.input-suffix > span { color: var(--color-muted); font-weight: 700; }
.country-media-grid { display: grid; grid-template-columns: minmax(8rem, .65fr) minmax(12rem, 1.35fr); gap: 1rem; }
.country-upload-field { display: grid; align-content: start; gap: .55rem; min-width: 0; margin: 0; }
.country-upload-title { font-weight: 700; }
.country-upload-preview { display: grid; place-items: center; width: 100%; height: 7rem; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--brand-primary) 35%, var(--color-border)); border-radius: .65rem; color: var(--color-muted); background: #fff; }
.country-upload-preview img { display: block; width: 100%; height: 100%; padding: .7rem; object-fit: contain; }
.country-upload-preview.is-placeholder { background: repeating-linear-gradient(135deg, #fff, #fff 8px, #f6f5f3 8px, #f6f5f3 16px); font-size: .8rem; }
.country-file-control { position: relative; display: inline-flex; justify-content: center; padding: .55rem .7rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: .45rem; color: var(--brand-primary); background: #fff; font-size: .85rem; font-weight: 700; cursor: pointer; }
.country-file-control:hover { border-color: var(--brand-primary); }
.country-file-control input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.country-upload-field small { color: var(--color-muted); line-height: 1.45; }
.country-settings-footer { border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: .85rem; }
.country-settings-footer .button { min-width: 7rem; }
.country-create-basics { display: grid; grid-template-columns: repeat(2, minmax(7rem, 10rem)); gap: 1rem; }
.country-create-basics .field { margin: 0; }
/* Restaurant categories: one card reusing the country chrome; its text fields need real width. */
.category-settings-card .country-fields > .field { max-width: 24rem; }
.category-settings-card .country-fields input[type="number"] { max-width: 9rem; }
/* City pages: same chrome, but two field sections side by side and the hero section spanning below; text fields need real width. */
.city-settings-card .country-fields > .field { max-width: 32rem; }
.city-settings-card .country-fields + .country-fields { border-left: 1px solid var(--color-border); }
.city-settings-card .country-media { grid-column: 1 / -1; border-top: 1px solid var(--color-border); border-left: 0; }
@media (max-width: 1100px) { .city-settings-card .country-fields + .country-fields { border-top: 1px solid var(--color-border); border-left: 0; } }
/* Code picker on the category form: combobox styling matching the variant dropdown. */
.code-combobox { position: relative; display: block; }
.code-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + .25rem); z-index: 20; max-height: 16rem; overflow-y: auto; padding: .4rem; border: 1px solid var(--color-border); border-radius: .7rem; background: #fff; box-shadow: 0 .8rem 2.2rem #241d1926; }
.code-option { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .55rem; border: 0; border-radius: .5rem; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.code-option i { flex: none; color: var(--color-muted); }
.code-option > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-option small { margin-left: auto; flex: none; color: var(--color-muted); font-size: .72rem; }
.code-option:hover, .code-option.is-active { background: var(--color-canvas); }
.code-option-create { color: var(--brand-primary); font-weight: 600; }
.code-option-create i { color: inherit; }
.code-option-create.is-active, .code-option-create:hover { background: color-mix(in srgb, var(--brand-accent) 35%, #fff); }
.code-option-locked { color: var(--color-muted); cursor: default; }
.code-option-locked:hover { background: transparent; }
/* Platform languages: compact cards sharing the country card chrome and upload styles. */
.language-settings-grid { grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1.5rem; align-items: start; }
.language-settings-body { display: grid; align-content: start; gap: 1rem; padding: 1.35rem; }
.language-settings-body .field { margin: 0; }
.language-settings-body input[type="number"] { max-width: 9rem; }
.choice-icon { width: 1.5rem; height: 1.5rem; object-fit: contain; vertical-align: middle; }
@media (max-width: 1100px) { .country-settings-body { grid-template-columns: 1fr; } .country-media { border-top: 1px solid var(--color-border); border-left: 0; } }
@media (max-width: 600px) { .country-settings-header, .country-settings-footer { align-items: flex-start; flex-direction: column; } .country-settings-footer .button { width: 100%; } .country-media-grid, .tax-rate-grid { grid-template-columns: 1fr; } .country-upload-preview { height: 9rem; } }
/* Platform restaurant directory */
.platform-restaurant-filters { display: grid; grid-template-columns: minmax(9rem, .7fr) minmax(13rem, 1.3fr) minmax(12rem, 1fr) minmax(10rem, .8fr) auto; align-items: end; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-4); }
.platform-restaurant-filters .field { margin: 0; }
.platform-restaurant-filter-actions { display: flex; align-items: center; gap: var(--space-3); min-height: 2.8rem; white-space: nowrap; }
.platform-restaurant-filter-actions a { color: var(--color-muted); font-size: var(--text-sm); }
.platform-restaurant-logo, .platform-restaurant-logo-placeholder { display: grid; place-items: center; width: 4rem; height: 4rem; border: 1px solid var(--color-border); border-radius: .65rem; background: #fff; object-fit: contain; }
.platform-restaurant-logo-placeholder { color: var(--color-muted); background: color-mix(in srgb, var(--brand-accent) 30%, #fff); font-size: 1.35rem; }
.platform-restaurant-table td { vertical-align: middle; }
.platform-restaurant-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .55rem 1rem; }
.platform-restaurant-actions a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; text-decoration: none; white-space: nowrap; }
.platform-restaurant-empty { display: grid; justify-items: center; gap: .35rem; padding: 3rem 1rem; color: var(--color-muted); text-align: center; }
.platform-restaurant-empty i { font-size: 1.6rem; }
@media (max-width: 70rem) { .platform-restaurant-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .platform-restaurant-filter-actions { grid-column: 1 / -1; } }
@media (max-width: 40rem) { .platform-restaurant-filters { grid-template-columns: 1fr; } .platform-restaurant-filter-actions { grid-column: auto; } }
/* Storefront delivery-area modal. */
.delivery-area-link{display:inline-flex;align-items:center;gap:.3rem;padding:0;border:0;color:inherit;background:transparent;cursor:pointer}.delivery-area-link:focus-visible{outline:2px solid var(--shop-primary);outline-offset:.25rem;border-radius:.15rem}.delivery-area-info{display:inline-grid;place-items:center;width:1rem;height:1rem;margin-left:.05rem;border:1px solid currentColor;border-radius:50%;font-size:.68rem;font-weight:800;line-height:1;transition:.15s ease}.delivery-area-link:hover .delivery-area-info{color:#fff;background:#221f1d}.delivery-area-dialog{width:min(56rem,calc(100% - 2rem));padding:0;border:0;border-radius:1rem;box-shadow:0 20px 80px #0005}.delivery-area-dialog::backdrop{background:#15100c99}.delivery-area-shell{padding:1.25rem}.delivery-area-shell header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.delivery-area-shell h2{margin:0}.delivery-area-shell p{margin:.35rem 0 1rem;color:var(--shop-muted)}.delivery-area-shell .dialog-close{position:static;flex:none;width:3rem;height:3rem;font-size:2.25rem;line-height:1;cursor:pointer}.storefront-delivery-map{width:100%;height:min(34rem,65vh);min-height:22rem;border-radius:.7rem;background:#e9edf3}.delivery-area-postal{margin:1rem 0 0!important;font-weight:700}
@media(max-width:800px){.delivery-area-dialog{width:100%;max-width:none;margin:auto 0 0;border-radius:1rem 1rem 0 0}.storefront-delivery-map{min-height:19rem}}
/* Menu search belongs to the restaurant catalog rather than the global shop header. */
.catalog-search{width:min(78rem,100%);margin:auto;padding:1.25rem 1rem .65rem;background:#faf9f7}.catalog-search-field{display:grid;gap:.45rem;max-width:42rem;font-weight:750}.catalog-search-control{display:flex;align-items:center;gap:.65rem;padding:.25rem .75rem;border:1px solid var(--shop-border);border-radius:.7rem;background:#fff;box-shadow:0 2px 10px #0000000a}.catalog-search-control:focus-within{border-color:var(--shop-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--shop-primary) 18%,transparent)}.catalog-search-control input{min-width:0;padding:.55rem 0;border:0;outline:0;box-shadow:none;background:transparent}.search-clear{flex:none;width:2rem;height:2rem;padding:0;border:0;border-radius:50%;color:var(--shop-muted);background:#f1efec;font-size:1.35rem;line-height:1;cursor:pointer}.search-status{margin:.65rem 0 0;color:var(--shop-muted);font-size:.9rem}.search-empty button{margin:.25rem;padding:.65rem .9rem;border:1px solid var(--shop-primary);border-radius:.5rem;color:var(--shop-primary);background:#fff;cursor:pointer}
@media(max-width:800px){.shop-header{grid-template-columns:1fr auto auto}.catalog-search{padding-top:1rem}.catalog-search-field{max-width:none}}
/* Da Mario visual direction: crisp white chrome, food-first catalog and responsive app shell. */
.storefront{--shop-border:#e7e3dc;--shop-muted:#6f6b67;--shop-canvas:var(--shop-background,#f7f3ec);background:var(--shop-canvas);color:#171514;letter-spacing:-.01em}
.storefront .shop-header{height:4.9rem;display:flex;align-items:center;padding:.55rem max(2.5rem,calc((100% - 78rem)/2));border-bottom:1px solid var(--shop-border);color:#171514;background:#fff;box-shadow:0 -2px 18px #211b1712}
.shop-brand{min-width:0}.shop-brand .shop-logo{display:block;width:auto;max-width:11rem;height:3.65rem;object-fit:contain;object-position:left center}.header-actions{display:flex;align-items:center;gap:1rem;margin-left:auto}.locale-select{position:relative;margin:0}.locale-select summary{display:flex;align-items:center;gap:.5rem;min-width:5.7rem;height:2.75rem;padding:0 .8rem;border:1px solid #e4e0dc;border-radius:.55rem;color:#24211f;background:#fff;cursor:pointer;font-size:.78rem;font-weight:650;list-style:none}.locale-select summary::-webkit-details-marker{display:none}.locale-select img,.locale-select svg{flex:none;width:1.25rem;height:1.25rem;object-fit:contain;fill:#514d49}.locale-chevron{width:.42rem;height:.42rem;margin-left:auto;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-.15rem)}.locale-select[open] .locale-chevron{transform:rotate(225deg) translate(-.1rem,-.1rem)}.locale-select nav{position:absolute;right:0;top:calc(100% + .4rem);z-index:10;min-width:8.5rem;padding:.35rem;border:1px solid #e4e0dc;border-radius:.55rem;background:#fff;box-shadow:0 8px 24px #211b1720}.locale-select nav a{display:flex;align-items:center;gap:.55rem;padding:.55rem .6rem;border-radius:.35rem;color:#24211f;text-decoration:none;font-size:.78rem}.locale-select nav a:hover,.locale-select nav a[aria-current=page]{background:#f5f3f1}.header-cart{min-width:8.6rem;height:2.75rem;grid-template-columns:1.65rem 1fr;grid-template-rows:auto auto;column-gap:.65rem;padding:.38rem .8rem;border-color:#dedad6;border-radius:.55rem;color:#181614;background:#fff;box-shadow:none;text-align:left}.header-cart .cart-icon{grid-row:1/3;align-self:center;width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.8}.header-cart .cart-label{display:block;align-self:end;font-size:.68rem;line-height:1}.header-cart strong{align-self:start;font-size:.8rem;line-height:1.2}.header-cart b{right:-.45rem;top:-.45rem;color:#fff;background:var(--shop-primary)}.mobile-menu-toggle{display:none}
.service-bar{justify-content:space-between;height:2.8rem;padding:.75rem max(2.5rem,calc((100% - 78rem)/2));border-bottom:1px solid var(--shop-border);color:#4d4945;font-size:.77rem}.service-bar b{font-weight:500}.delivery-area-link{border:0;background:none}.restaurant-hero{grid-template-columns:minmax(21rem,32%) 1fr;width:min(78rem,calc(100% - 5rem));min-height:11.65rem;margin:auto;border:1px solid var(--shop-border);border-radius:1rem;background:#fff;box-shadow:0 1px 2px rgba(23,21,20,.03),0 10px 30px rgba(23,21,20,.04)}.hero-copy{padding:1.8rem 1.4rem 1.55rem 1.75rem}.hero-copy h1{font-size:2.05rem}.hero-logo{display:none}.hero-rating{gap:.18rem}.hero-rating b{color:#d79b19}.hero-rating small{color:#777;font-weight:400}.hero-meta{font-size:.8rem}.open-status{margin-top:.75rem}.hero-image{min-height:11.65rem;border-radius:0}.hero-image::before{width:5.5rem}
.catalog-controls{position:sticky;top:0;z-index:6}
.catalog-search{display:grid;grid-template-columns:minmax(20rem,1fr) auto;gap:.75rem;width:100%;padding:.72rem max(2.5rem,calc((100% - 78rem)/2));background:var(--shop-canvas)}.catalog-search-field{display:block;max-width:none}.catalog-search-field>span:first-child{display:none}.catalog-search-control{height:2.75rem;border-radius:.65rem;box-shadow:0 1px 5px #211b170d}.catalog-search-control input{font-size:.84rem}.catalog-search .filter-bar{width:auto;margin:0;padding:0;overflow:visible}.catalog-search:not(:has(>.filter-bar)){grid-template-columns:minmax(0,1fr)}.filter-bar button{display:inline-flex;align-items:center;gap:.3rem;height:2.45rem;padding:.45rem .85rem;color:#292623;border-color:#dedbd8;background:#fff;font-size:.78rem}.filter-bar button svg{width:.85rem;height:.85rem;fill:#347a49}.filter-bar .filter-trigger svg{width:.95rem;height:.95rem;fill:none;stroke:#4d4945}.catalog-search-control .search-icon{flex:none;width:1.05rem;height:1.05rem;color:#8a857f}.mobile-cart svg{width:1.05rem;height:1.05rem;vertical-align:-.2rem}.filter-bar button[aria-pressed=true]{color:#246c3a;border-color:#a8cdb4;background:#f7fbf8}.filter-bar button span{color:#2f7c47}.search-status{grid-column:1/-1}.category-nav{position:relative;top:auto;gap:2.35rem;padding:.45rem max(2.5rem,calc((100% - 78rem)/2)) 0;border-block:1px solid var(--shop-border);height:3.2rem}.category-nav a{position:relative;padding:.65rem 0;font-size:.76rem}.category-nav a[aria-current]{color:var(--shop-primary);font-weight:700}.category-nav a[aria-current]::after{position:absolute;right:0;bottom:-1px;left:0;height:2px;background:var(--shop-primary);content:""}
.shop-layout{grid-template-columns:minmax(0,1fr) 22.5rem;gap:1.5rem;width:min(78rem,calc(100% - 5rem));padding:1rem 0 3.5rem}.shop-main{width:100%;min-width:0;margin:0;padding:0}.menu>.storefront-edit-heading h2{display:none}.shop-category{padding:0;margin-bottom:1.25rem;background:transparent}.shop-category h3{position:relative;margin:1.1rem 0 .8rem;padding-bottom:.4rem;font-size:1.35rem;font-weight:800;letter-spacing:-.02em}.shop-category h3::after{content:"";position:absolute;left:0;bottom:0;width:2.25rem;height:3px;border-radius:2px;background:var(--shop-primary)}.product-list{display:grid;gap:.65rem;overflow:visible;border:0;border-radius:0;background:transparent}.product-card{min-height:6.25rem;overflow:hidden;border:1px solid var(--shop-border);border-radius:.75rem;background:#fff}.product-card:last-child{border:1px solid var(--shop-border)}.product-open{min-height:6.25rem}.product-open img,.food-placeholder{order:-1;width:8.9rem;min-width:8.9rem;height:5.35rem;margin:.45rem 0 .45rem .45rem;aspect-ratio:auto;object-fit:cover;border-radius:.55rem}.food-placeholder svg{width:2rem;height:2rem;stroke:#c9c2b8}.product-info{padding:1.25rem 9rem 1rem 1.15rem}.product-title{font-size:.86rem}.product-description{font-size:.72rem}.tag-list{margin:.15rem 0}.product-info>strong{position:absolute;right:5.3rem;top:50%;margin:0;transform:translateY(-50%);font-size:.85rem}.quick-add{right:1.8rem;bottom:50%;width:2.5rem;height:2.5rem;transform:translateY(50%);border-radius:.45rem;font-size:1.25rem}.cart-panel{top:8rem;padding:1.2rem 1.1rem;border-radius:.75rem;box-shadow:0 1px 2px rgba(23,21,20,.03),0 10px 30px rgba(23,21,20,.04)}.shop-category{scroll-margin-top:7.9rem}.cart-heading h2{font-size:1.05rem}.checkout:not(:disabled){color:#fff;background:var(--shop-primary)}.shop-footer{background:#f7f5f2}
@media(max-width:800px){
.storefront{background:var(--shop-canvas)}.storefront .shop-header{height:3.9rem;padding:.5rem .85rem;gap:.75rem}.mobile-menu-toggle{display:grid;gap:3px;width:1.75rem;padding:.35rem;border:0;background:none}.mobile-menu-toggle span{display:block;height:2px;background:#292623}.shop-brand{margin:auto}.shop-brand .shop-logo{width:6.9rem;height:2.7rem}.header-actions{margin-left:0}.locale-select{display:none}.header-cart{min-width:2.4rem;width:2.4rem;height:2.4rem;padding:0;border:0;box-shadow:none}.header-cart .cart-icon{font-size:1.45rem}.header-cart strong,.header-cart .cart-label{display:none}.header-cart b{right:-.2rem;top:-.15rem}
.service-bar{display:none}.restaurant-hero{display:flex;width:100%;flex-direction:column;min-height:0}.hero-image{order:-1;min-height:7.4rem}.hero-image::before{inset:auto 0 0;width:auto;height:1.5rem;background:linear-gradient(0deg,#fff,transparent)}.hero-copy{padding:.75rem 1rem .7rem}.hero-copy h1{margin:0 0 .45rem;font-size:1.25rem}.hero-meta{gap:.25rem 0;font-size:.66rem}.hero-meta>*+*::before{margin:0 .45rem}.hero-address{display:none!important}.open-status{margin:.5rem 0 0;font-size:.68rem}
.catalog-search{grid-template-columns:1fr;width:100%;padding:.55rem .75rem;background:var(--shop-canvas)}.catalog-search-control{height:2.65rem}.catalog-search .filter-bar{display:flex;gap:.45rem;overflow:auto}.filter-bar button{flex:none;height:2.25rem;padding:.35rem .7rem;font-size:.68rem}.category-nav{height:2.85rem;gap:1.55rem;padding:0 .85rem;font-size:.7rem}.category-nav a{padding:.7rem 0;font-size:.68rem}
.shop-layout{width:auto;padding:.5rem .75rem 1.5rem;background:transparent}.shop-category h3{margin:.85rem 0 .6rem;font-size:1.05rem}.product-list{gap:.5rem}.product-card,.product-open{min-height:5.05rem}.product-open img,.food-placeholder{width:5rem;min-width:5rem;height:4.25rem;margin:.25rem;border-radius:.45rem}.product-info{padding:.75rem 3rem .65rem .35rem}.product-title{font-size:.72rem}.product-description{font-size:.6rem;line-height:1.35}.tag-list{display:none}.product-info>strong{position:static;margin-top:auto;transform:none;font-size:.68rem}.quick-add{right:.65rem;width:1.8rem;height:1.8rem;font-size:1rem}.edit-product{right:2.7rem}.mobile-cart{right:.75rem;bottom:max(.65rem,env(safe-area-inset-bottom));left:.75rem;padding:.8rem 1rem;border-radius:.65rem;font-size:.78rem;box-shadow:0 5px 18px #46110e3d}.shop-footer{grid-template-columns:1fr;gap:1.5rem;padding:1.75rem 1rem 2rem}.footer-powered{text-align:left}
}
/* Many categories overflow the tab row: no native scrollbar (a full-height classic
scrollbar on Windows), instead paddle buttons injected by app.js scroll the row
for mouse users. Scrollspy, tabbing and touch swipes keep working without them.
Hidden by input capability, not viewport width: a narrow desktop window or a
tablet driven by a mouse still needs them, while touch-primary devices
(hover:none) swipe and would only lose row width to the overlays. */
.category-nav{scrollbar-width:none;scroll-padding-inline:3rem}.category-nav::-webkit-scrollbar{display:none}
.category-nav-scroller{position:relative}
.nav-paddle{position:absolute;top:50%;z-index:5;display:grid;place-items:center;width:2rem;height:2rem;padding:0;border:1px solid var(--shop-border);border-radius:50%;transform:translateY(-50%);color:#4d4945;background:#fff;box-shadow:0 2px 10px #211b1714;cursor:pointer}
.nav-paddle[hidden]{display:none}
.nav-paddle:hover{color:var(--shop-primary)}
.nav-paddle svg{width:.9rem;height:.9rem}
.nav-paddle-left{left:max(.4rem,calc((100% - 78rem)/2 - 2.6rem))}
.nav-paddle-right{right:max(.4rem,calc((100% - 78rem)/2 - 2.6rem))}
@media(hover:none){.nav-paddle{display:none}}
.button-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.button-row form{margin:0}
/* Team pages: permission-deviation summary in the member list and the expanded
permission matrix on the member management page. */
.members-section{margin-top:var(--space-8)}
.deviation-list{margin:0;padding:0;list-style:none;font-size:.85em}
.deviation--allow{color:var(--color-success)}
.deviation--deny{color:var(--color-danger)}
.permission-scope-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 var(--space-4)}
.permission-section{margin:0 0 var(--space-6);padding:0;border:0}
.permission-section legend{margin-bottom:var(--space-2);font-weight:700}
.permission-section-toggle{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.permission-allow-col{width:4.5rem}
/* Storefront service information: separate metrics bar and status-card layouts.
In the orderable states both live inside .service-bar-combined together with the order-time picker. */
.service-info-shell{width:min(78rem,calc(100% - 5rem));margin:1.1rem auto .35rem}
@media(max-width:800px){.service-info-shell{width:auto;margin:.8rem .75rem}}
.service-bar-combined{display:flex;flex-wrap:wrap;align-items:stretch;background:#fff;border:1px solid #e7e4e1;border-radius:16px;box-shadow:0 1px 2px rgba(23,21,20,.03),0 10px 30px rgba(23,21,20,.05)}
.service-bar-combined>.restaurant-service-bar,.service-bar-combined>.service-status-card{flex:1 1 auto;min-width:0;border:0;border-radius:0;background:transparent;box-shadow:none}
/* Pickup-only keeps a single row: picker right-aligned behind a vertical divider. */
.service-bar-combined>.service-status-card+.fulfillment-picker{flex:none;align-self:stretch;align-content:center;margin-left:auto;padding:12px clamp(16px,2vw,24px);border-left:1px solid #eceae7}
/* Delivery carries many metrics, so the picker gets its own row below them. */
.service-bar-combined>.restaurant-service-bar+.fulfillment-picker{flex:1 1 100%;padding:12px clamp(20px,2.4vw,28px);border-top:1px solid #eceae7}
.restaurant-service-bar{display:flex;flex-wrap:wrap;align-items:center;row-gap:14px;column-gap:clamp(16px,2vw,28px);padding:20px clamp(20px,2.4vw,28px);background:#fff;border:1px solid #e7e4e1;border-radius:16px;box-shadow:0 1px 2px rgba(23,21,20,.03),0 10px 30px rgba(23,21,20,.05)}
.service-metrics{display:flex;flex:1 1 auto;flex-wrap:wrap;min-width:0;align-items:center;row-gap:16px;margin:0}
.service-metric{flex:0 0 auto;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:4px clamp(24px,3vw,44px)}
.service-metric:first-child{padding-left:0}.service-metric+.service-metric{border-left:1px solid #eceae7}
@media(min-width:1321px){
.service-metrics:has(>.service-metric:nth-child(4)){justify-content:space-between}
.service-metrics:has(>.service-metric:nth-child(4)) .service-metric{padding:4px clamp(14px,1.7vw,20px)}
.service-metrics:has(>.service-metric:nth-child(4)) .service-metric:first-child{padding-left:0}
.service-metrics:has(>.service-metric:nth-child(4)) .service-metric:last-child{padding-right:clamp(10px,1.2vw,14px)}
}
.service-metric__label{display:contents;font-size:13px;line-height:1.25;font-weight:500;color:#5f5b57}
.service-metric__icon{grid-column:1;grid-row:1/3;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--brand-primary)}
.service-metric__icon svg{width:24px;height:24px}
.service-metric__label-text{grid-column:2;grid-row:1;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.service-metric__value{grid-column:2;grid-row:2;margin:0;font-size:16px;line-height:1.25;font-weight:650;color:#1b1917;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.delivery-area-button{flex:none;margin-left:auto;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 15px;border:1px solid color-mix(in srgb,var(--brand-primary) 32%,#fff);border-radius:11px;background:#fff;color:color-mix(in srgb,var(--brand-primary) 88%,#1b1917);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color 150ms ease,border-color 150ms ease,transform 150ms ease}
.delivery-area-button:hover{border-color:color-mix(in srgb,var(--brand-primary) 65%,#fff);background:color-mix(in srgb,var(--brand-primary) 5%,white)}.delivery-area-button:active{transform:translateY(1px)}.delivery-area-button:focus-visible{outline:3px solid color-mix(in srgb,var(--brand-primary) 30%,transparent);outline-offset:3px}
.delivery-area-button svg:first-child{width:19px;height:19px}.delivery-area-button svg:last-child{width:15px;height:15px;opacity:.7}
.service-status-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:22px;padding:22px 26px;border:1px solid #f0ddd8;border-radius:16px;background:linear-gradient(90deg,#fdf8f6 0%,#fff 65%)}
.service-status-card__icon{width:58px;height:58px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fbeae7;color:#c22d20}
.service-status-card__icon svg{width:28px;height:28px}
.service-status-card__title{margin:0 0 5px;font-size:16.5px;line-height:1.25;font-weight:700;color:#171717}
.service-status-card__description,.service-status-card__hint{margin:0;font-size:14px;line-height:1.5}.service-status-card__description{color:#363029}.service-status-card__hint{margin-top:3px;color:#6f6660}
.service-status-card__metric{display:flex;align-items:center;gap:12px;min-width:150px;padding-left:26px;border-left:1px solid #f0ddd8}
.service-status-card__metric-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fbeae7;color:#c22d20}
.service-status-card__metric-icon svg{width:22px;height:22px}
.service-status-card__metric-label{display:block;margin-bottom:3px;font-size:13px;font-weight:500;color:#6f6660}.service-status-card__metric-value{display:block;font-size:15.5px;font-weight:700;color:#241d19}
.service-status-card__art{width:clamp(88px,11vw,132px);height:auto;justify-self:end;opacity:.85}
.service-status-card--vacation{border-color:#eeddba;background:linear-gradient(90deg,#fdf8ee 0%,#fff 70%)}.service-status-card--vacation .service-status-card__icon{background:#f8ecd0;color:#a97a12}.service-status-card--vacation .service-status-card__art{color:#cfa54a}
.service-status-card--dine-in{border-color:#e2dcef;background:linear-gradient(90deg,#faf8fd 0%,#fff 70%)}.service-status-card--dine-in .service-status-card__icon{background:#efeaf8;color:#6b53a8}.service-status-card--dine-in .service-status-card__art{color:#a893d1}
/* Pickup-only is a regular way to order, not an incident — brand-tinted and compact inside the combined bar. */
.service-status-card--pickup{grid-template-columns:auto minmax(0,1fr) auto;gap:16px;padding:14px clamp(16px,2vw,24px);border:0;background:#fff}
.service-status-card--pickup .service-status-card__icon,.service-status-card--pickup .service-status-card__metric-icon{background:color-mix(in srgb,var(--shop-primary) 10%,#fff);color:var(--shop-primary)}
.service-status-card--pickup .service-status-card__icon{width:46px;height:46px}.service-status-card--pickup .service-status-card__icon svg{width:23px;height:23px}
.service-status-card--pickup .service-status-card__metric-icon{width:40px;height:40px}.service-status-card--pickup .service-status-card__metric-icon svg{width:20px;height:20px}
.service-status-card--pickup .service-status-card__title{margin-bottom:3px;font-size:15.5px}
.service-status-card--pickup .service-status-card__description{color:#6f6660;font-size:13px}
.service-status-card--pickup .service-status-card__metric{border-left-color:#eceae7}
@media(max-width:1320px){
.restaurant-service-bar{flex-wrap:wrap}
.service-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:20px 0}
.service-metric,.service-metric:first-child,.service-metric:last-child{padding:2px 22px}
.service-metric{border-left:1px solid #eceae7}.service-metric:nth-child(3n+1){border-left:0;padding-left:0}
.delivery-area-button{flex:1 1 100%}
}
@media(max-width:1024px){
.service-bar-combined>.service-status-card+.fulfillment-picker{flex:1 1 100%;align-self:auto;margin-left:0;border-left:0;border-top:1px solid #eceae7}
}
@media(max-width:768px){
.shop-category{scroll-margin-top:7rem}
.restaurant-service-bar{padding:16px;gap:0}
.service-bar-combined>.restaurant-service-bar+.fulfillment-picker,.service-bar-combined>.service-status-card+.fulfillment-picker{padding:12px 16px}
.fulfillment-picker-title{flex:1 1 100%}
.service-metrics{grid-template-columns:1fr 1fr;gap:0}
.service-metric,.service-metric:first-child,.service-metric:last-child,.service-metric:nth-child(3n+1){padding:12px 10px;border-left:0;border-bottom:1px solid #efedeb}
.service-metric:last-child,.service-metric:nth-last-child(2):nth-child(odd){border-bottom:0}
.service-metric__icon{width:34px;height:34px}.service-metric__icon svg{width:21px;height:21px}
.service-metric__label{font-size:13px}.service-metric__value{font-size:15px;white-space:normal;overflow:visible}
.delivery-area-button{width:100%;min-height:48px;margin-top:12px}
.service-status-card{grid-template-columns:auto minmax(0,1fr);gap:14px 16px;padding:18px}
.service-status-card__art{display:none}
.service-status-card__metric{grid-column:1/-1;min-width:0;padding:14px 0 0;border-left:0;border-top:1px solid #f0ddd8}
.service-status-card--vacation .service-status-card__metric{border-top-color:#eeddba}.service-status-card--dine-in .service-status-card__metric{border-top-color:#e2dcef}
.service-status-card--pickup{padding:14px 16px}.service-status-card--pickup .service-status-card__metric{border-top-color:#eceae7}
}
@media(max-width:480px){
.service-metrics{grid-template-columns:1fr}
.service-metric,.service-metric:first-child,.service-metric:last-child,.service-metric:nth-child(3n+1){grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;padding:11px 2px;border-bottom:1px solid #efedeb}
.service-metric:last-child{border-bottom:0}
.service-metric__icon{grid-row:1;width:30px;height:30px}.service-metric__icon svg{width:20px;height:20px}
.service-metric__label-text{grid-row:1;margin:0;white-space:normal;overflow:visible}
.service-metric__value{grid-column:3;grid-row:1;text-align:right;white-space:nowrap}
}
/* The hidden attribute must win over display rules like .cart-summary-row{display:flex} —
without this the empty cart shows its deposit/fee/total rows (the checkout page has the same rule). */
.storefront [hidden]{display:none!important}
/* Empty cart: icon + friendly hint instead of a bare text line (shop page; the order list keeps plain text). */
.cart-empty{display:grid;justify-items:center;gap:.2rem;padding:1.9rem 0 2.1rem}
/* The bag artwork carries its own glow padding, so it needs no extra margin. */
.cart-empty-icon{display:grid;place-items:center}
.cart-empty-icon img{display:block;width:auto;height:4.5rem}
.cart-empty-title{margin:0;color:#3c3835;font-size:.9rem;font-weight:650}
.cart-empty-hint{max-width:15.5rem;margin:0;font-size:.78rem;line-height:1.5}
/* Dashboard priorities */
.dashboard-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-branding-card { grid-column: 1 / -1; }
.dashboard-branding-preview { display: grid; grid-template-columns: minmax(9rem, .65fr) 1fr; min-height: 13rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: .85rem; font-family: var(--dashboard-brand-font); background: var(--dashboard-brand-accent); }
.dashboard-branding-logo { display: grid; place-items: center; min-height: 10rem; padding: 1.5rem; color: var(--dashboard-brand-contrast); background: var(--dashboard-brand-primary); }
.dashboard-branding-logo img { max-width: 100%; max-height: 7rem; object-fit: contain; }
.dashboard-branding-logo > span[aria-hidden] { font-size: 4rem; font-weight: 800; }
.dashboard-branding-samples { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.5rem; }
.dashboard-branding-samples p { margin: 0 0 .55rem; font-size: 1.15rem; font-weight: 750; }
.dashboard-branding-primary { color: var(--dashboard-brand-primary); }
.dashboard-branding-secondary { color: var(--dashboard-brand-contrast); padding: .3rem .55rem; border-radius: .3rem; background: var(--dashboard-brand-primary); }
.dashboard-branding-samples button { margin-top: .5rem; padding: .7rem 1rem; border: 0; border-radius: .45rem; color: var(--dashboard-brand-contrast); background: var(--dashboard-brand-primary); font: inherit; font-weight: 700; }
.dashboard-branding-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin: 1rem 0 0; }
.dashboard-branding-values > div { padding: .7rem; border-radius: .55rem; background: var(--color-canvas); }
.dashboard-branding-values dt { color: var(--color-muted); font-size: .8rem; }
.dashboard-branding-values dd { display: flex; align-items: center; gap: .45rem; margin: .2rem 0 0; font-weight: 700; }
.dashboard-branding-values dd span { width: 1rem; height: 1rem; border: 1px solid #0002; border-radius: 50%; }
.service-time-card { border: 2px solid var(--brand-primary); background: linear-gradient(135deg, #fff 55%, #fdf1ef); }
.service-time-guidance { color: var(--color-muted); }
.service-time-card .current-service-times { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.service-time-card .current-service-times > div { display: grid; padding: 1rem; border: 1px solid var(--color-border); border-radius: .75rem; background: #fff; }
.service-time-card .current-service-times dd { font-size: var(--text-xl); font-weight: 800; text-align: left; }
.google-import { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--color-border); }
.google-import-warning { display: flex; gap: .55rem; margin: 0 0 .45rem; color: var(--color-muted); font-size: .875rem; }
.google-import-warning i { color: #9a6700; }
.link-button { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: none; color: var(--brand-primary); font: inherit; text-decoration: underline; cursor: pointer; }
@media(max-width: 42rem) { .dashboard-info-grid, .service-time-card .current-service-times, .dashboard-branding-preview, .dashboard-branding-values { grid-template-columns: 1fr; } .dashboard-branding-logo { min-height: 8rem; } }
/* Legal texts ("Recht"): backend rich-text editor and the public legal pages. */
.legal-texts-form .legal-document { margin-bottom: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; }
.legal-texts-form .legal-document > summary { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.1rem; cursor: pointer; }
.legal-texts-form .legal-document > summary h2 { margin: 0; font-size: 1.05rem; }
.legal-texts-form .legal-document[open] > summary { border-bottom: 1px solid var(--color-border); }
.legal-texts-form .legal-text-field { padding: 1rem 1.1rem 0; }
.legal-fallback-hint { color: var(--color-muted); font-size: .875rem; }
/* Platform legal document editor (Rechtliches › Abschnitte): toolbar, clause overview,
and the modal "Abschnitt bearbeiten"/"Abschnitt hinzufügen" dialogs. The explicit
flex-direction overrides Bootstrap's column-flex .card. */
.legal-toolbar { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding: var(--space-3) var(--space-4); }
.legal-toolbar-countries, .legal-toolbar-locale { display: flex; align-items: center; gap: .6rem; }
.legal-toolbar-locale select { width: auto; }
.legal-country-switch { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .2rem; border-radius: 999px; background: var(--color-canvas); }
.legal-country-switch a { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .8rem; border-radius: 999px; color: var(--color-muted); font-weight: 700; font-size: var(--text-sm); text-decoration: none; }
.legal-country-switch a:hover { color: var(--color-text); }
.legal-country-switch a[aria-current="page"] { color: var(--color-text); background: #fff; box-shadow: 0 1px 3px #241d1926; }
.legal-country-switch small { color: var(--color-success); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.legal-clause-list-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: var(--space-2); }
.legal-clause-list-header h2 { margin: 0; }
.legal-clause-group h3 { margin: var(--space-4) 0 .4rem; color: var(--color-muted); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.legal-clause-table { overflow-x: auto; }
.legal-clause-table table { width: 100%; }
.legal-clause-table .legal-clause-drag { width: 2rem; }
.legal-clause-table .legal-clause-status { width: 6.5rem; text-align: center; white-space: nowrap; }
.legal-clause-table tr { scroll-margin-top: 6rem; }
.legal-clause-table tr.is-selected td, .legal-clause-table tr:target td { background: var(--color-canvas); }
.legal-clause-table tr.is-dragging { opacity: .45; }
.legal-clause-add { margin: .5rem 0 0; font-size: var(--text-sm); }
.legal-dialog { width: min(40rem, calc(100% - 2rem)); max-height: 90vh; padding: 0; border: 0; border-radius: 1rem; box-shadow: 0 20px 80px #0005; }
.legal-dialog--wide { width: min(64rem, calc(100% - 2rem)); }
.legal-dialog::backdrop { background: #15100c99; }
.legal-dialog[open] { display: flex; }
.legal-dialog-shell { display: flex; flex: 1; flex-direction: column; min-height: 0; margin: 0; }
.legal-dialog-header, .legal-dialog-footer { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; }
.legal-dialog-header { align-items: flex-start; border-bottom: 1px solid var(--color-border); }
.legal-dialog-header h2 { margin: 0; }
.legal-dialog-header h2:focus { outline: none; }
.legal-dialog-header .eyebrow { margin: 0 0 .2rem; }
.legal-dialog-header .dialog-close { position: static; flex: none; cursor: pointer; }
.legal-dialog-footer { border-top: 1px solid var(--color-border); background: var(--color-canvas); }
.legal-dialog-actions { display: flex; gap: .5rem; margin-left: auto; }
.legal-dialog-body { flex: 1; min-height: 0; padding: 1.25rem 1.5rem; overflow-y: auto; }
.legal-dialog-section + .legal-dialog-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.legal-dialog-section h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.legal-form-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 1rem; }
.legal-form-grid .legal-form-wide { grid-column: 1 / -1; }
.legal-form-grid fieldset { margin: 0 0 var(--space-4); }
.legal-choice { display: flex; align-items: center; gap: .5rem; font-weight: normal; }
.legal-choice input { width: auto; }
.legal-choice-countries { display: flex; gap: 1rem; padding-left: 1.5rem; }
.legal-country-settings { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .5rem; }
.legal-country-setting { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.legal-country-setting.is-current { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--color-border)); }
.legal-country-setting strong { min-width: 1.75rem; }
.legal-country-setting form { flex: 1; min-width: 0; }
.legal-review-alert { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem 0 0; }
.legal-content-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.legal-content-heading h3 { margin: 0; }
.legal-delete { color: var(--color-danger); font-size: var(--text-sm); }
@media (max-width: 42rem) {
.legal-dialog, .legal-dialog--wide { width: 100%; max-width: none; max-height: 94vh; margin: auto 0 0; border-radius: 1rem 1rem 0 0; }
.legal-form-grid { grid-template-columns: minmax(0, 1fr); }
.legal-dialog-header, .legal-dialog-footer, .legal-dialog-body { padding-inline: 1rem; }
.legal-dialog-footer { flex-wrap: wrap; }
.legal-dialog-actions { flex: 1; justify-content: flex-end; }
.legal-toolbar-locale { width: 100%; }
}
.richtext-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .35rem; border: 1px solid var(--color-border); border-bottom: 0; border-radius: .5rem .5rem 0 0; background: var(--color-canvas); }
.richtext-toolbar button { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: .35rem; background: transparent; cursor: pointer; }
.richtext-toolbar button:hover:not(:disabled) { background: #fff; box-shadow: inset 0 0 0 1px var(--color-border); }
.richtext-toolbar button:disabled { opacity: .35; cursor: default; }
.richtext-toolbar button.richtext-tool-text { width: auto; padding: 0 .5rem; font-size: .8rem; white-space: nowrap; }
.richtext-table-tools { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; padding-left: .35rem; margin-left: .1rem; border-left: 1px solid var(--color-border); }
.richtext-toolbar input[type="color"] { width: 2rem; height: 2rem; padding: .2rem; border: 0; border-radius: .35rem; background: transparent; cursor: pointer; }
.richtext-toolbar input[type="color"]:disabled { opacity: .35; cursor: default; }
.richtext-surface { min-height: 11rem; max-height: 26rem; overflow: auto; padding: .75rem .9rem; border: 1px solid var(--color-border); border-radius: 0 0 .5rem .5rem; background: #fff; }
.richtext-surface:focus-visible { outline: 2px solid var(--brand-primary, #1f7a3f); outline-offset: -1px; }
.richtext-surface h2 { font-size: 1.2rem; } .richtext-surface h3 { font-size: 1.05rem; }
/* Tables from the legal rich-text editor: same look in the editor surface and in every
rendered context (freetext pages .legal-text, engine output .legal-clause-body inside
.legal-rendered, landing pages). Cell background colors arrive as sanitized inline
background-color styles and win over the header shading below. */
.richtext-surface table, .legal-text table, .legal-rendered table, .landing-legal-text table { width: 100%; margin: .75rem 0; border-collapse: collapse; }
.richtext-surface th, .richtext-surface td, .legal-text th, .legal-text td, .legal-rendered th, .legal-rendered td, .landing-legal-text th, .landing-legal-text td { border: 1px solid var(--color-border, #d4d4d8); padding: .45rem .6rem; vertical-align: top; text-align: start; }
.richtext-surface th, .legal-text th, .legal-rendered th, .landing-legal-text th { background: rgba(0, 0, 0, .045); font-weight: 600; }
.storefront-legal-page .legal-content { width: min(46rem, 100%); margin: 0 auto; padding: 2rem 1rem 4rem; }
.storefront-legal-page .legal-back { display: inline-block; margin-bottom: 1.25rem; color: var(--shop-primary); }
.storefront-legal-page .legal-content h1 { margin: 0 0 1.25rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.storefront-legal-page .legal-text { line-height: 1.65; }
.storefront-legal-page .legal-text h2 { margin-top: 1.75rem; font-size: 1.25rem; }
.storefront-legal-page .legal-text h3 { margin-top: 1.25rem; font-size: 1.05rem; }
.shop-footer .footer-legal a { display: block; }
.shop-footer .footer-legal h3 { position: relative; }
/* Storefront contact form and backend message inbox. */
.contact-provider { margin-bottom: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--shop-border, #e8e5e2); border-radius: .8rem; background: #fff; }
.contact-provider h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.contact-dsa-note { margin-bottom: 0; color: var(--shop-muted, #706d69); font-size: .875rem; }
.contact-form p { display: grid; gap: .3rem; margin: 0 0 1rem; }
.contact-form label { font-weight: 650; }
.contact-form input[type=text], .contact-form input[type=email], .contact-form textarea { padding: .6rem .75rem; border: 1px solid var(--shop-border, #d8d4d0); border-radius: .5rem; font: inherit; }
.contact-form .contact-privacy label { display: flex; gap: .5rem; align-items: baseline; font-weight: 400; }
.contact-copy-note { color: var(--shop-muted, #706d69); font-size: .875rem; }
.contact-submit { padding: .8rem 1.4rem; border: 0; border-radius: .5rem; color: var(--shop-contrast); background: var(--shop-primary); font-weight: 700; cursor: pointer; }
.contact-errors { margin-bottom: 1rem; padding: .8rem 1rem; border: 1px solid #e2b4ae; border-radius: .5rem; color: #8f2318; background: #fdf1ef; }
.contact-confirmation { padding: 1.5rem; border: 1px solid #bfdcc9; border-radius: .8rem; background: #f3faf5; }
/* Honeypot: removed from the visual page and the tab order but present for bots. */
.contact-website-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.contact-message-list { display: grid; gap: 1rem; }
.contact-message.is-new { border-left: 4px solid var(--brand-primary, #1f7a3f); }
.contact-message-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.contact-message-subject { margin: .2rem 0 0; font-weight: 650; }
.contact-message-meta { display: grid; justify-items: end; gap: .25rem; color: var(--color-muted); font-size: .875rem; }
.status-badge { padding: .15rem .55rem; border-radius: 2rem; font-size: .78rem; font-weight: 700; }
.status-badge.status-new { color: #14532d; background: #dcfce7; }
.status-badge.status-answered { color: #514d49; background: #e5e2df; }
.contact-message-body { white-space: pre-line; }
.contact-message-reply { padding: .9rem 1rem; border-left: 3px solid var(--brand-primary, #1f7a3f); border-radius: .4rem; background: var(--color-canvas, #f6f5f3); }
.contact-reply-label { margin: 0 0 .4rem; color: var(--color-muted); font-size: .85rem; font-weight: 650; }
.contact-reply-form summary { cursor: pointer; font-weight: 650; color: var(--brand-primary); }
.contact-reply-form form { margin-top: .75rem; }
/* Mobile checkout — one page, several states. Brand colours come from the shop branding
(--shop-primary); completed steps and the confirmation use success green. */
.checkout-page{--ck-brand:var(--shop-primary,#d21f26);--ck-success:#15803d;--ck-success-soft:#e8f5ec;--ck-border:#e8e5e2;--ck-muted:#706d69;--ck-bg:var(--shop-background,#faf9f7);--ck-radius:12px;margin:0;padding-bottom:calc(5.5rem + env(safe-area-inset-bottom));color:#221f1d;background:var(--ck-bg);font-family:var(--shop-font,system-ui,sans-serif)}
.checkout-page button,.checkout-page input,.checkout-page select,.checkout-page textarea{font:inherit}
/* The hidden attribute must always win: several checkout blocks (forms, fieldsets,
totals rows) carry display rules that would otherwise override the UA default. */
.checkout-page [hidden]{display:none!important}
.ck-header{display:grid;grid-template-columns:2.75rem 1fr 2.75rem;align-items:center;padding:.65rem .9rem;padding-top:calc(.65rem + env(safe-area-inset-top));background:#fff;border-bottom:1px solid var(--ck-border)}
.ck-back{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;color:#221f1d}
.ck-back svg{width:1.35rem;height:1.35rem}
.ck-brand{display:flex;justify-content:center;align-items:center;gap:.5rem;color:var(--ck-brand);font-size:1.05rem}
.ck-brand img{max-height:2.2rem;max-width:9rem}
.ck-main{width:min(30rem,100%);margin:0 auto;padding:0 1rem 2rem}
@media(min-width:48rem){.ck-main{width:min(34rem,100%)}}
.ck-panel{padding-top:.5rem}
.ck-title{margin:.4rem 0 .2rem;font-size:1.45rem;text-align:center}
.ck-subtitle{margin:0 0 1.25rem;color:var(--ck-muted);text-align:center}
.ck-title--center,.ck-subtitle--center{text-align:center}
.ck-title:focus{outline:none}
.ck-muted{color:var(--ck-muted)}
/* Stepper */
.ck-stepper{display:flex;align-items:center;justify-content:center;gap:0;width:min(22rem,calc(100% - 3rem));margin:1rem auto .25rem}
.ck-step{flex:none}
.ck-step-circle{position:relative;display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;border:2px solid #d9d5d1;background:#fff;color:#8a857f;font-weight:700;transition:transform .18s ease,background .2s ease,border-color .2s ease,color .2s ease}
.ck-step.is-current .ck-step-circle{border-color:var(--ck-brand);background:var(--ck-brand);color:#fff}
.ck-step.is-complete .ck-step-circle{border-color:var(--ck-success);background:#fff;color:var(--ck-success)}
.ck-step.is-pulsing .ck-step-circle{transform:scale(1.15)}
.ck-step-number{line-height:1}
.ck-step.is-complete .ck-step-number{display:none}
.ck-step-check{display:none;width:1.35rem;height:1.35rem}
.ck-step.is-complete .ck-step-check{display:block}
.ck-step-check__circle{fill:none;stroke:var(--ck-success);stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151;animation:ck-check-circle 450ms ease-out forwards}
.ck-step-check__path{fill:none;stroke:var(--ck-success);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:38;stroke-dashoffset:38;animation:ck-check-path 280ms ease-out 220ms forwards}
.ck-step-line{flex:1;height:2px;margin:0 .3rem;background:#ddd9d5;transition:background .3s ease .15s}
.ck-step-line.is-complete{background:var(--ck-success)}
@keyframes ck-check-circle{to{stroke-dashoffset:0}}
@keyframes ck-check-path{to{stroke-dashoffset:0}}
/* Forms & fields */
.ck-form{display:grid;gap:1rem;margin-top:1rem}
.ck-fieldset{display:grid;gap:1rem;margin:0;padding:0;border:0}
.ck-legend{margin-bottom:.25rem;padding:0;font-weight:700}
.ck-subheading{margin:.25rem 0 -.5rem;font-weight:700}
.ck-field{display:grid;gap:.35rem;font-size:.92rem;font-weight:600}
.ck-field input,.ck-field select,.ck-field textarea{width:100%;min-height:3rem;padding:.6rem .85rem;border:1px solid var(--ck-border);border-radius:10px;background:#fff}
.ck-field textarea{min-height:5rem;resize:vertical}
.ck-field input:focus-visible,.ck-field select:focus-visible,.ck-field textarea:focus-visible{outline:2px solid var(--ck-brand);outline-offset:1px}
.ck-field small{color:var(--ck-muted);font-weight:400}
.ck-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.ck-field-row--street{grid-template-columns:1fr 5.5rem}
.ck-field-row--city{grid-template-columns:7rem 1fr}
.ck-field-row--phone{grid-template-columns:8rem 1fr}
.ck-counter{justify-self:end;color:var(--ck-muted);font-weight:400}
.ck-optional{font-style:normal;font-weight:400;color:var(--ck-muted)}
.ck-hint{color:var(--ck-muted);font-size:.88rem}
.ck-hint--lock{display:flex;align-items:center;gap:.45rem;justify-content:center;margin-top:1rem}
.ck-hint--lock svg{width:1rem;height:1rem;flex:none}
.ck-info{cursor:help;color:var(--ck-muted)}
.ck-error{margin:.25rem 0 0;padding:.7rem .9rem;border-radius:10px;color:#9b2019;background:#fdeceb;font-size:.9rem}
.ck-money-input{display:flex;align-items:center;gap:.5rem}
.ck-money-input input{flex:1}
/* CTA */
.ck-cta{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:52px;padding:.8rem 1rem;border:0;border-radius:10px;color:#fff;background:var(--ck-brand);font-weight:700;text-align:center;text-decoration:none;cursor:pointer}
.ck-cta:disabled{opacity:.75;cursor:default}
.ck-cta--ghost{color:var(--ck-brand);background:#fff;border:1.5px solid var(--ck-brand)}
.ck-trial-dialog{width:min(26rem,calc(100% - 2rem));padding:1.5rem;border:0;border-radius:var(--ck-radius);box-shadow:0 20px 80px #0005;text-align:center}.ck-trial-dialog::backdrop{background:#15100c99}.ck-trial-dialog h2{margin:0 0 .6rem;font-size:1.2rem}.ck-trial-dialog p{margin:0 0 1.25rem;color:var(--ck-muted)}.ck-trial-dialog-actions{display:grid;gap:.6rem}
.ck-cta--order .ck-cta-lock{width:1.05rem;height:1.05rem}
.ck-cta.is-loading .ck-cta-lock{display:none}
.ck-cta-spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ck-spin .65s linear infinite}
@keyframes ck-spin{to{transform:rotate(360deg)}}
/* Step 1 */
.ck-account-card{display:grid;gap:.9rem;padding:1rem;border:1px solid var(--ck-border);border-radius:var(--ck-radius);background:#fff}
/* Shared social sign-in block — also used outside .checkout-page (backend login and
registration), hence the variable fallbacks and the anchor normalisation. */
.ck-social{display:grid;gap:.6rem}
.ck-social-button{display:flex;align-items:center;justify-content:center;gap:.65rem;min-height:3rem;border:1px solid var(--ck-border,#e8e5e2);border-radius:10px;background:#fff;color:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.ck-social-button svg{width:1.25rem;height:1.25rem;flex:none}
.auth-panel .ck-social{margin:1rem 0;max-width:26rem}
.auth-divider{display:flex;align-items:center;gap:.75rem;margin:1rem 0;max-width:26rem;color:#706d69;font-size:.9rem}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:#e8e5e2}
.ck-divider{display:flex;align-items:center;gap:.8rem;margin:1.25rem 0;color:var(--ck-muted);font-size:.85rem}
.ck-divider::before,.ck-divider::after{content:"";flex:1;height:1px;background:var(--ck-border)}
.ck-tabs{display:flex;gap:1.5rem;border-bottom:1px solid var(--ck-border)}
.ck-tab{padding:.6rem 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--ck-muted);font-weight:600;cursor:pointer}
.ck-tab[aria-selected=true]{color:var(--ck-brand);border-bottom-color:var(--ck-brand)}
.ck-welcome{margin:0;font-weight:700}
/* Choice cards (fulfilment, timing, payment) */
.ck-choice-group{display:grid;gap:.75rem}
.ck-choice{position:relative;display:flex;align-items:center;gap:.85rem;width:100%;min-height:64px;padding:.85rem 1rem;border:1.5px solid var(--ck-border);border-radius:var(--ck-radius);background:#fff;text-align:left;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.ck-choice[aria-checked=true]{border-color:var(--ck-brand);background:color-mix(in srgb,var(--ck-brand) 5%,#fff)}
.ck-choice[aria-checked=true] .ck-choice-icon{color:var(--ck-brand)}
.ck-choice-icon{display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:none;color:var(--ck-muted)}
.ck-choice-icon svg{width:1.7rem;height:1.7rem}
.ck-choice-copy{display:grid;gap:.15rem;flex:1}
.ck-choice-copy small{color:var(--ck-muted)}
.ck-choice-radio{width:1.15rem;height:1.15rem;flex:none;border:2px solid #cfcac5;border-radius:50%}
.ck-choice[aria-checked=true] .ck-choice-radio{border-color:var(--ck-brand);background:radial-gradient(circle,var(--ck-brand) 45%,transparent 50%)}
.ck-choice--compact{min-height:56px}
/* Delivery area state */
.ck-area-state{margin:0;padding:.65rem .9rem;border-radius:10px;font-size:.9rem;font-weight:600}
.ck-area-state.is-ok{color:var(--ck-success);background:var(--ck-success-soft)}
.ck-area-state.is-blocked{color:#9b2019;background:#fdeceb}
.ck-area-blocked{display:grid;gap:.75rem;padding:1rem;border:1px solid #f3c9c5;border-radius:var(--ck-radius);background:#fdeceb;color:#9b2019;font-weight:600}
.ck-check{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem}
.ck-check input{width:1.15rem;height:1.15rem;margin-top:.1rem;accent-color:var(--ck-brand)}
.ck-check a{color:var(--ck-brand)}
/* Payment extras */
.ck-save-payment{margin-top:1rem;padding:1rem;border:1px solid var(--ck-border);border-radius:var(--ck-radius);background:#fff}
.ck-switch{display:flex;align-items:center;gap:.85rem;cursor:pointer}
.ck-switch input{position:absolute;opacity:0}
.ck-switch-track{position:relative;width:2.9rem;height:1.65rem;flex:none;border-radius:2rem;background:#d9d5d1;transition:background .15s ease}
.ck-switch-track::after{content:"";position:absolute;left:.2rem;top:.2rem;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:transform .15s ease}
.ck-switch input:checked+.ck-switch-track{background:var(--ck-success)}
.ck-switch input:checked+.ck-switch-track::after{transform:translateX(1.25rem)}
.ck-switch span:last-child{display:grid;gap:.1rem}
.ck-switch small{color:var(--ck-muted);font-weight:400}
/* Review cards */
.ck-card{margin-bottom:1rem;padding:1rem;border:1px solid var(--ck-border);border-radius:var(--ck-radius);background:#fff}
.ck-card header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
.ck-card h2{margin:0;font-size:1rem}
.ck-card p{margin:.15rem 0}
.ck-edit{border:0;background:none;color:var(--ck-brand);font-weight:600;cursor:pointer}
.ck-order-lines{display:grid;gap:.55rem}
.ck-order-line{display:flex;justify-content:space-between;gap:1rem;margin:0}
.ck-order-line>span:first-child{display:grid}
.ck-order-line small{color:var(--ck-muted)}
.ck-food-info{margin-top:.15rem;font-size:.85rem}
.ck-food-info summary{color:var(--ck-muted);cursor:pointer;text-decoration:underline;text-underline-offset:.2em}
.ck-food-info small{display:block;color:var(--ck-muted)}
.ck-totals{display:grid;gap:.3rem;margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--ck-border)}
.ck-totals p{display:flex;justify-content:space-between;margin:0;font-size:.95rem}
.ck-totals p>span:first-child{color:var(--ck-muted)}
.ck-totals-grand{margin-top:.3rem!important;padding-top:.55rem;border-top:1px solid var(--ck-border);font-size:1.05rem!important}
.ck-totals-grand>span:first-child{color:inherit!important;font-weight:700}
.ck-tip-options{display:flex;flex-wrap:wrap;gap:.5rem}
.ck-tip{padding:.5rem .9rem;border:1.5px solid var(--ck-border);border-radius:2rem;background:#fff;cursor:pointer}
.ck-tip[aria-pressed=true]{border-color:var(--ck-brand);color:var(--ck-brand);font-weight:700;background:color-mix(in srgb,var(--ck-brand) 6%,#fff)}
.ck-check--terms{margin-top:.5rem}
.ck-terms-note{margin:.5rem 0 1.25rem;color:var(--ck-muted);font-size:.92rem}
.ck-fieldset.ck-consent{margin-top:.75rem}
.ck-terms-note a{color:var(--ck-brand)}
/* Account-creation consent — shared between checkout, confirmation and registration */
.account-consent{margin:.5rem 0 0;color:var(--ck-muted,#6b6560);font-size:.85rem;line-height:1.45;max-width:62ch}
/* Consent manager: banner, consent center and external-content placeholders.
Optional services stay inert until consent-manager.js grants them. Accept and
reject are equally prominent by design — no dark patterns. */
.consent-banner{position:fixed;z-index:1200;left:50%;bottom:1rem;transform:translateX(-50%);width:min(38rem,calc(100vw - 2rem));padding:1.15rem 1.25rem;border:1px solid #d8d2cc;border-radius:.9rem;background:#fff;color:#24211f;box-shadow:0 .7rem 2rem rgba(0,0,0,.22);font:400 .92rem/1.45 system-ui,sans-serif}
.consent-banner h2{margin:0 0 .35rem;font-size:1.05rem}.consent-banner p{margin:0 0 .9rem}
.consent-banner-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.consent-button{flex:1 1 auto;padding:.6rem .9rem;border-radius:.5rem;font:inherit;font-weight:600;cursor:pointer}
.consent-button-primary{border:1px solid var(--shop-primary,#24211f);background:var(--shop-primary,#24211f);color:var(--shop-contrast,#fff)}
.consent-button-secondary{border:1px solid #69625d;background:#fff;color:#24211f}
.consent-banner-links{display:flex;gap:1rem;margin-top:.75rem;font-size:.82rem}.consent-banner-links a{color:inherit}
.consent-center{width:min(44rem,calc(100vw - 2rem));max-height:88vh;padding:0;border:0;border-radius:1rem;color:#24211f;box-shadow:0 20px 80px #0005;font:400 .92rem/1.5 system-ui,sans-serif}
.consent-center::backdrop{background:#15100c99}
.consent-center-form{padding:1.5rem;overflow:auto}
.consent-center-form h2{margin:0 0 .4rem;font-size:1.2rem}
.consent-center-close{position:absolute;right:.9rem;top:.9rem;width:2.3rem;height:2.3rem;border:0;border-radius:50%;background:#f0ede9;font-size:1.4rem;cursor:pointer}
.consent-category{margin:1.1rem 0;padding:1rem;border:1px solid #e8e5e2;border-radius:.7rem}
.consent-category-toggle{display:flex;align-items:center;gap:.6rem;font-weight:700;cursor:pointer}
.consent-category-toggle input{width:2.4rem;height:1.3rem;accent-color:var(--shop-primary,#147643);cursor:pointer}
.consent-category-toggle input:disabled{cursor:not-allowed}
.consent-category-description{margin:.5rem 0;color:#5f5b57}
.consent-category-services summary,.consent-technologies summary{cursor:pointer;color:var(--shop-primary,#147643);font-size:.86rem}
.consent-service{margin:.6rem 0;padding:.6rem .8rem;border:1px solid #efece8;border-radius:.5rem;background:#faf9f7}
.consent-service summary{font-weight:600;cursor:pointer;color:inherit}
.consent-service-body{margin-top:.5rem}.consent-service-meta,.consent-service-description{margin:.25rem 0;font-size:.88rem}
.consent-technology-table{overflow-x:auto}
.consent-technology-table table{width:100%;border-collapse:collapse;font-size:.82rem}
.consent-technology-table th,.consent-technology-table td{padding:.35rem .5rem;border-bottom:1px solid #e8e5e2;text-align:left;vertical-align:top}
.consent-center-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.25rem}
.consent-placeholder{display:grid;place-items:center;gap:.6rem;min-height:9rem;padding:1.25rem;border:1px dashed #c9c2b8;border-radius:.6rem;background:#f7f5f2;color:#5f5b57;text-align:center;font-size:.88rem}
.consent-placeholder p{margin:0;max-width:36ch}
.consent-placeholder-load{padding:.55rem .9rem;border:1px solid var(--shop-primary,#24211f);border-radius:.5rem;background:var(--shop-primary,#24211f);color:var(--shop-contrast,#fff);font:inherit;font-weight:600;cursor:pointer}
[data-consent-blocked] iframe{display:none}
.footer-link-button{padding:0;border:0;background:none;color:inherit;font-size:.86rem;text-align:left;text-decoration:underline;cursor:pointer}
.legal-consent-overview{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e2ded9}
.legal-consent-service{margin:1rem 0 1.5rem}.legal-consent-service h4{margin:.4rem 0}.legal-consent-service p{margin:.25rem 0}
.legal-consent-table{overflow-x:auto}.legal-consent-table table{width:100%;border-collapse:collapse;font-size:.85rem}
.legal-consent-table th,.legal-consent-table td{padding:.4rem .55rem;border-bottom:1px solid #e8e5e2;text-align:left;vertical-align:top}
.legal-consent-open{font-size:1rem}
@media(max-width:800px){.consent-banner{bottom:0;left:0;transform:none;width:100%;border-radius:.9rem .9rem 0 0;padding-bottom:max(1.15rem,env(safe-area-inset-bottom))}.consent-banner-actions{flex-direction:column}.consent-center-actions{flex-direction:column}}
/* Choice disabled state (delivery outside the area) */
.ck-choice.is-disabled{opacity:.55;cursor:not-allowed}
.ck-choice.is-disabled .ck-choice-icon{color:var(--ck-muted)}
/* Embedded directions map (confirmation + status page) */
.ck-map{margin-top:.75rem;overflow:hidden;border:1px solid var(--ck-border);border-radius:12px}
.ck-map iframe{display:block;width:100%;height:260px;border:0}
.ck-status-refreshed{margin-top:.85rem;font-size:.85rem}
/* Sticky cart bar */
.ck-cartbar{position:fixed;left:0;right:0;bottom:0;z-index:10;border-top:1px solid var(--ck-border);background:#fff;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 24px #0000000f}
.ck-cartbar-toggle{display:flex;align-items:center;gap:.6rem;width:min(34rem,100%);margin:0 auto;padding:.85rem 1rem;border:0;background:none;cursor:pointer}
.ck-cartbar-toggle svg{width:1.2rem;height:1.2rem;flex:none}
.ck-cartbar-more{display:flex;align-items:center;gap:.3rem;margin-left:auto;color:var(--ck-muted);font-size:.9rem}
.ck-cartbar-more svg{width:.95rem;height:.95rem;transition:transform .2s ease}
.ck-cart-details{max-height:40vh;overflow:auto;width:min(34rem,100%);margin:0 auto;padding:1rem 1rem .25rem;border-bottom:1px solid var(--ck-border)}
/* Confirmation */
.ck-confirmation{position:relative;padding-top:2.5rem;text-align:center}
/* The status page's one-time confirmation hero and its exit buttons. */
.ck-status-hero{margin-bottom:1rem}
.ck-status-actions{display:grid;gap:.6rem;margin-top:1.25rem}
.ck-status-actions .ck-cta{margin:0}
body.ck-confirmed{animation:ck-confirm-tint 300ms ease-out forwards}
@keyframes ck-confirm-tint{from{background:var(--ck-bg,#faf9f7)}to{background:#f0f9f2}}
.ck-success{display:block;width:5.5rem;height:5.5rem;margin:0 auto 1rem}
.ck-success__circle{fill:none;stroke:#15803d;stroke-width:3;stroke-dasharray:151;stroke-dashoffset:151}
.ck-success__path{fill:none;stroke:#15803d;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:38;stroke-dashoffset:38}
.ck-success.is-static .ck-success__circle,.ck-success.is-static .ck-success__path{stroke-dashoffset:0}
.ck-success.is-animating .ck-success__circle{animation:ck-check-circle 450ms ease-out 300ms forwards}
.ck-success.is-animating .ck-success__path{animation:ck-check-path 280ms ease-out 620ms forwards}
.ck-success.is-animating{animation:ck-success-pop 220ms ease-out 870ms both}
@keyframes ck-success-pop{0%{transform:scale(.94)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.ck-confirmation .ck-card{text-align:left}
.ck-card--number{text-align:center!important}
.ck-order-number{margin:.3rem 0;color:var(--ck-success);font-size:1.7rem;font-weight:800}
.ck-confetti{position:absolute;inset:0 0 auto 0;height:9rem;pointer-events:none;overflow:hidden}
.ck-confetti span{position:absolute;top:2.5rem;left:50%;width:6px;height:10px;border-radius:2px;opacity:0}
body.ck-confirmed .ck-confetti span{animation:ck-confetti-fall 900ms ease-out 700ms both}
.ck-confetti span:nth-child(1){background:#15803d;--ck-dx:-4.5rem;animation-delay:720ms}
.ck-confetti span:nth-child(2){background:#7bc796;--ck-dx:-2.5rem;animation-delay:760ms}
.ck-confetti span:nth-child(3){background:var(--ck-brand);--ck-dx:-.8rem;animation-delay:700ms}
.ck-confetti span:nth-child(4){background:#15803d;--ck-dx:1rem;animation-delay:780ms}
.ck-confetti span:nth-child(5){background:#a5d8b6;--ck-dx:2.8rem;animation-delay:740ms}
.ck-confetti span:nth-child(6){background:#15803d;--ck-dx:4.6rem;animation-delay:800ms}
.ck-confetti span:nth-child(7){background:#7bc796;--ck-dx:5.8rem;animation-delay:820ms}
@keyframes ck-confetti-fall{0%{opacity:0;transform:translate(var(--ck-dx),-1.5rem) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(calc(var(--ck-dx)*1.4),5rem) rotate(220deg)}}
/* Accessibility: honour reduced motion for every checkout animation */
@media(prefers-reduced-motion:reduce){
.checkout-page *,.checkout-page *::before,.checkout-page *::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
.ck-success__circle,.ck-success__path,.ck-step-check__circle,.ck-step-check__path{stroke-dashoffset:0!important}
}
.checkout--live{display:block;color:var(--shop-contrast);background:var(--shop-primary);text-align:center;text-decoration:none;font-weight:700}
.checkout--live.is-disabled{color:#777;background:#eee;pointer-events:none}
.ck-status-track{display:flex;gap:0;justify-content:space-between;margin:1rem 0 0;padding:0;list-style:none}
.ck-status-track li{position:relative;flex:1;display:grid;justify-items:center;gap:.35rem;text-align:center;color:var(--ck-muted)}
.ck-status-track li:not(:last-child)::after{content:"";position:absolute;top:.5rem;left:calc(50% + .75rem);width:calc(100% - 1.5rem);height:2px;background:#ddd9d5}
.ck-status-track li.is-done:not(:last-child)::after{background:var(--ck-success)}
.ck-status-dot{width:1.05rem;height:1.05rem;border-radius:50%;border:2px solid #d9d5d1;background:#fff}
.ck-status-track li.is-done .ck-status-dot{border-color:var(--ck-success);background:var(--ck-success)}
.ck-status-track li.is-current .ck-status-dot{border-color:#e8930c;background:#e8930c}
.ck-status-track li.is-current{color:#221f1d;font-weight:600}
/* Publication status card & go-live checklist */
.publication-status-card{grid-column:1/-1}
.publication-state{display:flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-1);font-weight:750}
.publication-state-online{color:var(--color-success)}
.publication-verification{margin:var(--space-4) 0 0}
.publication-verification div{display:flex;gap:var(--space-3)}
.publication-verification dt{font-weight:700}
.publication-verification dd{margin:0}
.publication-readiness{margin-top:var(--space-6)}
.readiness-summary{display:grid;gap:var(--space-2);margin-bottom:var(--space-4)}
.readiness-summary p{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin:0}
.readiness-summary p>span{color:var(--color-muted);font-size:var(--text-sm);font-weight:700}
.readiness-summary progress{width:100%;height:.55rem;border:0;border-radius:999px;background:var(--brand-accent);appearance:none;overflow:hidden}
.readiness-summary progress::-webkit-progress-bar{border-radius:999px;background:var(--brand-accent)}
.readiness-summary progress::-webkit-progress-value{border-radius:999px;background:var(--brand-primary)}
.readiness-summary progress::-moz-progress-bar{border-radius:999px;background:var(--brand-primary)}
.readiness-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);align-items:start}
@media(max-width:48rem){.readiness-sections{grid-template-columns:1fr}}
.readiness-section{padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.readiness-section.is-complete{border-color:color-mix(in srgb,var(--color-success) 30%,#fff);background:color-mix(in srgb,#e8f7ef 45%,#fff)}
.readiness-section-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2)}
.readiness-section-header h3{margin:0;font-size:var(--text-base)}
.readiness-section-icon{display:grid;flex:none;place-items:center;width:2.25rem;height:2.25rem;border-radius:.6rem;color:var(--brand-primary);background:var(--brand-accent)}
.readiness-section.is-complete .readiness-section-icon{color:var(--color-success);background:#e8f7ef}
.readiness-section-count{margin-left:auto;padding:var(--space-1) var(--space-2);border-radius:999px;color:var(--color-muted);background:var(--color-canvas);font-size:var(--text-sm);font-weight:700;white-space:nowrap}
.readiness-section.is-complete .readiness-section-count{color:var(--color-success);background:#e8f7ef}
.publication-checklist{display:grid;margin:0;padding:0;list-style:none}
.publication-checklist li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;column-gap:var(--space-3);row-gap:var(--space-1);padding:var(--space-2) 0}
.publication-checklist li+li{border-top:1px solid color-mix(in srgb,var(--color-border) 55%,transparent)}
.check-marker{display:grid;place-items:center;width:1.4rem;height:1.4rem;margin-top:.1rem;border:2px solid var(--color-border);border-radius:50%;font-size:.8rem}
.publication-checklist .is-done .check-marker{border-color:var(--color-success);color:#fff;background:var(--color-success)}
.publication-checklist .is-done .check-label{color:var(--color-muted)}
.check-action{grid-column:2;justify-self:start;font-size:var(--text-sm);font-weight:650}
.check-action i{font-size:.85em}
.check-resend{grid-column:2;justify-self:start}
.check-resend .check-action{grid-column:auto;padding:0;border:0;background:transparent;color:var(--brand-primary);cursor:pointer}
.check-resend .check-action:hover{text-decoration:underline}
.check-edit{grid-column:3;display:grid;place-items:center;width:1.9rem;height:1.9rem;margin:-0.2rem 0;border-radius:.5rem;color:var(--color-muted)}
.check-edit:hover{color:var(--brand-primary);background:var(--brand-accent)}
/* Allergen & additive declarations on the menu item form */
.declarations-fieldset{border:1px solid color-mix(in srgb,var(--brand-primary) 35%,#fff);border-left:.3rem solid var(--brand-primary);border-radius:var(--radius-md);background:color-mix(in srgb,var(--brand-accent) 30%,#fff)}
.declarations-fieldset legend{padding:0 var(--space-2);font-weight:800}
.declarations-intro{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3)}
.declaration-group{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
.declaration-group h3{margin:0 0 var(--space-1);font-size:var(--text-base)}
.declaration-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:var(--space-1) var(--space-4)}
.declaration-choices label,.declaration-none{display:flex;align-items:center;gap:var(--space-2)}
.declaration-none{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);border:1px dashed var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}
.declaration-confirm{display:flex;align-items:center;gap:var(--space-2);margin-top:var(--space-6);padding:var(--space-3) var(--space-4);border:1px solid color-mix(in srgb,var(--color-success) 40%,#fff);border-radius:var(--radius-sm);background:#e8f7ef}
/* Status hero: prominent publication state, verification and quick actions */
.status-hero{margin-bottom:var(--space-6);padding:0;overflow:hidden}
.status-hero-main{display:flex;align-items:center;gap:var(--space-4) var(--space-6);padding:clamp(1.25rem,3vw,2rem) var(--space-6)}
.status-hero-icon{display:grid;flex:none;place-items:center;width:4rem;height:4rem;border-radius:50%;color:#fff;background:var(--color-muted);font-size:1.9rem;box-shadow:0 .4rem 1.2rem #241d1926}
.status-hero-online .status-hero-icon{background:var(--color-success)}
.status-hero-warning .status-hero-icon{background:#e8930c}
.status-hero-danger .status-hero-icon{background:var(--color-danger)}
.status-hero-online .status-hero-main{background:linear-gradient(135deg,#fff,#eefaf3)}
.status-hero-warning .status-hero-main{background:linear-gradient(135deg,#fff,#fff6e4)}
.status-hero-danger .status-hero-main{background:linear-gradient(135deg,#fff,#fdefee)}
.status-hero-offline .status-hero-main{background:linear-gradient(135deg,#fff,var(--color-canvas))}
.status-hero-online{border-color:color-mix(in srgb,var(--color-success) 32%,#fff)}
.status-hero-warning{border-color:color-mix(in srgb,#e8930c 38%,#fff)}
.status-hero-danger{border-color:color-mix(in srgb,var(--color-danger) 32%,#fff)}
.status-hero-text h2{margin:0;font-size:clamp(1.25rem,2.5vw,1.6rem);line-height:1.25}
.status-hero-text p{margin:var(--space-1) 0 0}
.status-hero-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;padding:0;list-style:none;border-top:1px solid var(--color-border);background:var(--color-border)}
.status-fact{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-4);padding:var(--space-4) var(--space-6);background:var(--color-surface)}
.status-fact-icon{display:grid;flex:none;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;color:var(--brand-primary);background:var(--brand-accent);font-size:1.1rem}
.status-fact-info{display:grid;flex:1;gap:.15rem;min-width:11rem}
.status-fact-info .muted{font-size:var(--text-sm)}
.status-fact-value{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:750}
.status-fact-value.is-on{color:var(--color-success)}
.status-fact-value.is-paused{color:var(--color-warning)}
.status-dot{display:inline-block;flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--color-border)}
.status-dot.is-on{background:var(--color-success)}
.status-dot.is-paused{background:var(--color-warning)}
.status-fact form,.status-fact>a.button{margin-left:auto}
.status-fact .button{white-space:nowrap}
@media(max-width:62rem){.status-hero-facts{grid-template-columns:1fr}}
@media(max-width:42rem){.status-hero-main{flex-direction:column;align-items:flex-start}.status-fact form,.status-fact>a.button{margin-left:0;flex-basis:100%}.status-fact form button,.status-fact>a.button{width:100%;text-align:center}}
/* Cart notices after a sign-in merge (price changes, removed items). */
.ck-cart-notices { background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px; padding: .75rem 1rem; margin-bottom: 1rem; }
.ck-cart-notices p { margin: .15rem 0; font-size: .9rem; }
/* ---- Public bestellbei.de pages (landing, contact, legal) ------------------------- */
body.landing{--bb-red:#c22d20;--bb-red-dark:#9f2015;--bb-red-soft:#fbeae7;--bb-ink:#241d19;--bb-muted:#6f6660;--bb-cream:#faf6f2;--bb-border:#ece4dd;margin:0;color:var(--bb-ink);background:#fff;font:var(--text-base)/1.55 var(--font-sans)}
body.landing a{color:var(--bb-red)}
.landing-header{display:flex;align-items:center;gap:1.5rem;padding:1rem max(1.25rem,calc((100% - 74rem)/2));border-bottom:1px solid var(--bb-border);background:#fff}
.landing-brand{display:flex;align-items:center;gap:.55rem;color:var(--bb-ink);text-decoration:none}
.landing-brand-mark{width:2.1rem;height:2.1rem;fill:var(--bb-red)}
.landing-brand-name{font-size:1.3rem;font-weight:800;color:var(--bb-red)}
.landing-brand-name b{color:var(--bb-ink);font-weight:800}
.landing-logo{width:auto;max-width:11rem;height:2.5rem;object-fit:contain}
.landing-nav{display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.25rem);margin-inline:auto}
.landing-nav a{color:var(--bb-ink);font-weight:550;text-decoration:none}
.landing-nav a:hover,.landing-nav a[aria-current=page]{color:var(--bb-red)}
.landing-login{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.1rem;border:1.5px solid var(--bb-red);border-radius:.65rem;color:var(--bb-red);font-weight:650;text-decoration:none}
.landing-login:hover{color:#fff;background:var(--bb-red)}
.landing-login svg{width:1.15rem;height:1.15rem}
/* Guest account menu: one "Konto" pill combining sign-in and registration. */
.landing-account{position:relative}
.landing-account summary{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.2rem;border-radius:2rem;color:#fff;background:var(--bb-red);font-weight:650;white-space:nowrap;cursor:pointer;user-select:none;list-style:none}
.landing-account summary::-webkit-details-marker{display:none}
.landing-account summary:hover{background:var(--bb-red-dark)}
.landing-account summary svg{width:1.15rem;height:1.15rem}
.landing-account .landing-account-chevron{width:1rem;height:1rem;transition:transform .15s ease}
.landing-account[open] .landing-account-chevron{transform:rotate(180deg)}
.landing-account-menu{position:absolute;top:calc(100% + .5rem);right:0;z-index:30;display:grid;min-width:12rem;padding:.4rem;border:1px solid var(--bb-border);border-radius:.75rem;background:#fff;box-shadow:0 .75rem 2rem #00000022}
.landing-account-menu a{padding:.6rem .85rem;border-radius:.5rem;color:var(--bb-ink);font-weight:600;text-decoration:none;white-space:nowrap}
.landing-account-menu a:hover{color:var(--bb-red);background:var(--bb-red-soft)}
.landing-main{--landing-gap:clamp(2.5rem,6vw,4.5rem);display:grid;gap:var(--landing-gap);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.landing-section{width:min(74rem,calc(100% - 2.5rem));margin-inline:auto}
.landing-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2rem,5vw,4rem) max(1.25rem,calc((100% - 74rem)/2));background:linear-gradient(180deg,var(--bb-cream),#fff)}
.landing-hero--home{position:relative;display:block;padding:0 max(1.25rem,calc((100% - 74rem)/2));background:#fff;overflow:hidden}
.landing-hero--home .landing-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:clamp(2.5rem,6vw,4.5rem) 0}
.landing-hero--home .landing-hero-copy h1{font-size:clamp(2rem,4vw,3.1rem)}
.landing-hero--home .landing-hero-copy h1 span,.landing-hero--home .landing-hero-copy h1 em{text-wrap:balance}
.landing-hero--home .landing-intro{max-width:34rem}
.landing-hero--home .landing-hero-visual{position:absolute;top:0;right:0;z-index:1;width:min(46%,48rem);height:100%;min-height:0}
.landing-hero--home .landing-hero-photo{object-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,#000 68%);mask-image:linear-gradient(90deg,transparent,#000 68%)}
.landing-badge{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.1rem;padding:.45rem .95rem;border-radius:2rem;color:var(--bb-red-dark);background:var(--bb-red-soft);font-size:.9rem;font-weight:650}
.landing-badge svg{width:1rem;height:1rem;fill:currentColor}
.landing-hero-copy h1{margin:0 0 1rem;font-size:clamp(2rem,4.5vw,3.1rem);line-height:1.12;letter-spacing:-.015em}
.landing-hero-copy h1 span,.landing-hero-copy h1 em{display:block}
.landing-hero-copy h1 em{color:var(--bb-red);font-style:normal}
.landing-intro{max-width:38rem;margin:0 0 1.6rem;color:var(--bb-muted)}
.landing-cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin:0 0 2rem}
body.landing a.landing-button,body.landing button.landing-button{display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.5rem;border:0;border-radius:.7rem;color:#fff;background:var(--bb-red);font:inherit;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:0 .5rem 1.4rem color-mix(in srgb,var(--bb-red) 30%,transparent)}
body.landing a.landing-button:hover,body.landing button.landing-button:hover{background:var(--bb-red-dark);color:#fff}
body.landing a.landing-button--inverse,body.landing button.landing-button--inverse{color:var(--bb-red);background:#fff;box-shadow:none}
body.landing a.landing-button--inverse:hover,body.landing button.landing-button--inverse:hover{color:var(--bb-red-dark);background:var(--bb-cream)}
body.landing a.landing-button-text{display:inline-flex;align-items:center;gap:.4rem;color:var(--bb-red);font-weight:700;text-decoration:none}
body.landing a.landing-button-text:hover{color:var(--bb-red-dark);text-decoration:underline}
body.landing a.landing-button--outline{color:var(--bb-red);background:#fff;border:1.5px solid var(--bb-red);box-shadow:none}
body.landing a.landing-button--outline:hover{color:#fff;background:var(--bb-red)}
.landing-usps{display:flex;flex-wrap:wrap;gap:1rem 1.75rem;margin:0;padding:0;list-style:none}
.landing-usps li{display:flex;align-items:center;gap:.65rem;max-width:13rem;font-size:.9rem;font-weight:550}
.landing-usp-icon{display:grid;place-items:center;flex:none;width:2.7rem;height:2.7rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.landing-usp-icon svg{width:1.4rem;height:1.4rem}
.landing-usps--home{display:flex;flex-wrap:nowrap;gap:0}
.landing-usps--home li{flex:0 1 auto;align-items:center;gap:.75rem;max-width:15rem;padding:0 1.4rem;text-align:left;border-left:1px solid var(--bb-border)}
.landing-usps--home li:first-child{padding-left:0;border-left:0}
.landing-usps--home .landing-usp-icon{width:2.9rem;height:2.9rem;border-radius:.85rem;color:var(--bb-red);background:var(--bb-red-soft)}
.landing-usps--home .landing-usp-icon svg{width:1.5rem;height:1.5rem}
.landing-hero-visual{position:relative;align-self:stretch;min-height:clamp(16rem,32vw,26rem);overflow:hidden}
.landing-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48%);mask-image:linear-gradient(90deg,transparent,#000 48%)}
.landing-available-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem}
.landing-available-heading h2{margin:0 0 .35rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-available-heading p{margin:0;color:var(--bb-muted)}
.landing-available-location{display:inline-flex;align-items:center;gap:.4rem;margin:0;color:var(--bb-ink);font-weight:650}
.landing-available-location svg{width:1.2rem;height:1.2rem;color:var(--bb-red)}
.landing-restaurant-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}
.landing-restaurant-card{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-restaurant-card-image{aspect-ratio:16/11;overflow:hidden;background:#f6ede0}
.landing-restaurant-card-image svg,.landing-restaurant-card-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.landing-restaurant-card-body{display:flex;flex-direction:column;gap:.35rem;padding:1.1rem 1.25rem 1.35rem}
.landing-restaurant-card-body h3{margin:0;font-size:1.15rem}
.landing-restaurant-card-category{margin:0;color:var(--bb-muted);font-size:.88rem}
.landing-restaurant-card-description{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;margin:.15rem 0 0;color:var(--bb-muted);font-size:.88rem;line-height:1.5}
/* The dividers live in the flex gap; a wrapped item sits flush left, so its
divider lands outside the container and overflow:hidden clips it — no stray
separator at a line start. */
.landing-restaurant-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .65rem;margin:.3rem 0 0;overflow:hidden;font-size:.85rem}
.landing-restaurant-card-meta span{position:relative;display:inline-flex;align-items:center;gap:.35rem}
.landing-restaurant-card-meta span+span::before{content:'';position:absolute;top:10%;bottom:10%;left:-.35rem;border-left:1px solid var(--bb-border)}
.landing-restaurant-card-meta svg{width:1rem;height:1rem;color:var(--bb-red)}
.landing-restaurant-card-hours{display:flex;align-items:center;gap:.35rem;margin:.15rem 0 .9rem;color:var(--bb-muted);font-size:.85rem}
.landing-restaurant-card-hours svg{width:1rem;height:1rem}
.landing-restaurant-card-cta{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:auto;padding:.7rem 1rem;border:1.5px solid var(--bb-red);border-radius:.6rem;color:var(--bb-red);font-weight:700;text-decoration:none}
.landing-restaurant-card-cta:hover{color:#fff;background:var(--bb-red)}
.landing-featured-heading{text-align:center}
.landing-featured-heading h2{display:flex;align-items:center;justify-content:center;gap:.9rem;margin:0 0 .35rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-featured-heading p{margin:0;color:var(--bb-muted)}
.landing-featured-spark svg{display:block;width:1.5rem;height:1.5rem;color:var(--bb-red)}
.landing-featured-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) minmax(0,4fr);gap:1.75rem;margin-top:2rem;padding:1.25rem;border:1px solid var(--bb-border);border-radius:1.25rem;background:#fff;box-shadow:0 .5rem 1.6rem #0000000d}
.landing-featured-media{position:relative;overflow:hidden;border-radius:.9rem;background:#f6ede0}
.landing-featured-media>img,.landing-featured-media>svg{display:block;width:100%;height:100%;min-height:16rem;object-fit:cover}
.landing-featured-badge{position:absolute;top:.9rem;left:.9rem;z-index:1;display:inline-flex;align-items:center;gap:.4rem;margin:0;padding:.4rem .85rem;border-radius:99rem;color:var(--bb-red);background:#fff;font-size:.85rem;font-weight:700;box-shadow:0 .15rem .6rem #00000026}
.landing-featured-badge svg{width:.95rem;height:.95rem}
.landing-featured-body{display:flex;flex-direction:column;gap:.55rem;padding:.35rem 0}
.landing-featured-body h3{margin:0;font-size:clamp(1.35rem,2.4vw,1.7rem)}
.landing-featured-category{margin:0;color:var(--bb-muted)}
.landing-featured-facts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem;margin:0;font-size:.92rem}
.landing-featured-facts span,.landing-featured-facts a{display:inline-flex;align-items:center;gap:.4rem}
.landing-featured-facts svg{width:1.05rem;height:1.05rem;color:var(--bb-red)}
.landing-featured-rating b{color:#f0a11b;font-weight:400}
.landing-featured-facts a{color:var(--bb-red);font-weight:650;text-decoration:none}
.landing-featured-facts a:hover{text-decoration:underline}
.landing-featured-description{margin:.15rem 0 0;color:var(--bb-muted);line-height:1.55}
/* Same clipped-divider trick as the card meta row (see there). */
.landing-featured-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:auto 0 0;padding-top:.9rem;border-top:1px solid var(--bb-border);overflow:hidden;font-size:.88rem}
.landing-featured-meta span{position:relative;display:inline-flex;align-items:center;gap:.4rem}
.landing-featured-meta span+span::before{content:'';position:absolute;top:10%;bottom:10%;left:-.5rem;border-left:1px solid var(--bb-border)}
.landing-featured-meta svg{width:1.05rem;height:1.05rem;color:var(--bb-red)}
.landing-featured-aside{display:flex;flex-direction:column;gap:1.1rem;padding:.35rem 0 .35rem 1.5rem;border-left:1px solid var(--bb-border)}
.landing-featured-open{display:flex;align-items:flex-start;gap:.6rem;margin:0}
.landing-featured-dot{flex:none;width:.8rem;height:.8rem;margin-top:.28rem;border-radius:50%;background:#1d9a4b}
.landing-featured-open.is-closed .landing-featured-dot{background:var(--bb-muted)}
.landing-featured-open-copy{display:flex;flex-direction:column;gap:.1rem}
.landing-featured-open-copy strong{color:#1d9a4b}
.landing-featured-open.is-closed .landing-featured-open-copy strong{color:var(--bb-ink)}
.landing-featured-fulfilment{display:flex;align-items:flex-start;gap:.75rem}
.landing-featured-fulfilment h4{margin:0 0 .2rem;font-size:1rem}
.landing-featured-fulfilment p{margin:0;color:var(--bb-muted);font-size:.88rem}
.landing-featured-cta{justify-content:center;margin-top:auto}
.landing-how,.landing-why{text-align:center}
.landing-how h2,.landing-why h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-why-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:2.5rem;text-align:left}
.landing-why-cards article{display:flex;align-items:flex-start;gap:1rem;padding:0 1.5rem;border-left:1px solid var(--bb-border)}
.landing-why-cards article:first-child{padding-left:0;border-left:0}
.landing-why-cards article:last-child{padding-right:0}
.landing-why-cards .landing-usp-icon{width:4.25rem;height:4.25rem;border-radius:1.1rem}
.landing-why-cards .landing-usp-icon svg{width:2.2rem;height:2.2rem}
.landing-why-cards h3{margin:0 0 .35rem;font-size:1rem}
.landing-why-cards p{margin:0;color:var(--bb-muted);font-size:.88rem}
.landing-section-intro{max-width:46rem;margin:0 auto 2.25rem;color:var(--bb-muted)}
.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0;padding:0;list-style:none;counter-reset:landing-step}
.landing-steps h3{margin:1rem 0 .35rem;font-size:1.05rem}
.landing-steps p{margin:0 auto;max-width:18rem;color:var(--bb-muted);font-size:.92rem}
.landing-step-icon{position:relative;display:grid;place-items:center;width:4.2rem;height:4.2rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.landing-step-icon svg{width:1.9rem;height:1.9rem}
.landing-step-icon::after{content:attr(data-step);position:absolute;right:-.3rem;bottom:-.3rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;color:#fff;background:var(--bb-ink);font-size:.8rem;font-weight:700}
.landing-referral{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(1.75rem,4vw,2.75rem) clamp(1.5rem,4vw,3rem);border-radius:1.25rem;color:#fff;background-color:var(--bb-red);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='2'%3E%3Cpath d='M42 58c-9-10-24-3-24 9 0 11 13 18 24 26 11-8 24-15 24-26 0-12-15-19-24-9Z'/%3E%3Ccircle cx='176' cy='52' r='17'/%3E%3Ccircle cx='96' cy='176' r='15'/%3E%3C/g%3E%3Cg fill='%23fff' fill-opacity='.09' font-family='sans-serif'%3E%3Ctext x='168' y='60' font-size='24'%3E%E2%82%AC%3C/text%3E%3Ctext x='89' y='183' font-size='20'%3E%E2%82%AC%3C/text%3E%3C/g%3E%3C/svg%3E"),linear-gradient(120deg,var(--bb-red),var(--bb-red-dark));box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--bb-red) 25%,transparent)}
.landing-referral h2{margin:0 0 .35rem;font-size:clamp(1.2rem,2.2vw,1.5rem)}
.landing-referral p{margin:0;color:#ffffffe0;font-size:.95rem}
.landing-referral-icon{display:grid;place-items:center;width:clamp(5.5rem,8vw,7rem);height:clamp(5.5rem,8vw,7rem)}
.landing-referral-icon svg{width:100%;height:100%;stroke:#fff}
.landing-owners{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(11rem,17rem);column-gap:clamp(1.25rem,3vw,2.5rem);align-items:center;border:1px solid var(--bb-border);border-radius:1rem;background:#fff;overflow:hidden}
.landing-owners-copy{padding:1.5rem 0 1.5rem clamp(1.25rem,3vw,2rem)}
.landing-owners-copy h2{margin:0 0 .3rem;font-size:clamp(1.1rem,2vw,1.4rem)}
.landing-owners-copy p{margin:0;color:var(--bb-muted);font-size:.92rem}
.landing-owners .landing-cta-row{margin:0;padding:1.25rem 0}
.landing-owners-visual{position:relative;align-self:stretch;min-height:10rem}
.landing-owners-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 55%);mask-image:linear-gradient(90deg,transparent,#000 55%)}
.landing-page-section{width:min(46rem,calc(100% - 2.5rem));margin:clamp(2rem,5vw,3.5rem) auto 0}
.landing-page-section h1{margin:0 0 .75rem;font-size:clamp(1.7rem,3.5vw,2.3rem)}
.landing-page-section .landing-section-intro{margin-left:0}
.landing-legal-text{max-width:65ch}
.landing-form{display:grid;gap:.35rem;max-width:38rem}
.landing-form p{margin:0 0 .9rem}
.landing-form label{display:block;margin-bottom:.3rem;font-weight:600}
.landing-form input[type=text],.landing-form input[type=email],.landing-form textarea{width:100%;padding:.7rem .85rem;border:1px solid var(--bb-border);border-radius:.55rem;font:inherit;background:#fff}
.landing-form textarea{resize:vertical}
.landing-form .landing-button{justify-self:start}
.landing-privacy label,.landing-copy-note{font-weight:400;color:var(--bb-muted);font-size:.9rem}
.landing-privacy input{margin-right:.4rem}
.landing-form-errors{margin-bottom:1rem;padding:.9rem 1.1rem;border:1px solid #efc4bd;border-radius:.6rem;color:var(--bb-red-dark);background:var(--bb-red-soft)}
.landing-confirmation{display:grid;justify-items:start;gap:.5rem;padding:1.5rem;border:1px solid var(--bb-border);border-radius:.9rem;background:var(--bb-cream)}
.landing-confirmation h2{margin:0}
.landing-confirmation p{margin:0;color:var(--bb-muted)}
.landing-confirmation .landing-button{margin-top:.75rem}
.landing-website-field{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.landing-footer{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem;margin-top:clamp(2.5rem,6vw,4rem);padding:1.5rem max(1.25rem,calc((100% - 74rem)/2));border-top:1px solid var(--bb-border);background:#fff}
.landing-footer-nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.landing-footer-nav a{color:var(--bb-ink);text-decoration:none}
.landing-footer-nav a:hover{color:var(--bb-red)}
.landing-footer-social{display:flex;gap:.6rem;margin-left:auto}
/* Two classes: must outrank `body.landing a` (red link color), else the icon turns red on the red hover background. */
.landing-footer .landing-footer-social a{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;color:#fff;background:var(--bb-ink);transition:background-color .15s}
.landing-footer .landing-footer-social a:hover,.landing-footer .landing-footer-social a:focus-visible{color:#fff;background:var(--bb-red)}
.landing-footer-social svg{width:1.15rem;height:1.15rem}
/* Platform footer (_platform_footer): brand plus grouped link columns, then a bottom bar
with copyright and social icons. The error pages keep the flat single-row footer. */
.landing-footer--sitemap{display:block;padding-block:2.5rem 1.5rem}
.landing-footer-main{display:grid;grid-template-columns:minmax(10rem,1fr) 3fr;gap:2rem}
.landing-footer-main>.landing-brand{align-self:start}
.landing-footer--sitemap .landing-footer-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem 2rem}
.landing-footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem}
.landing-footer-col h2{margin:0 0 .2rem;color:var(--bb-muted);font-size:.78rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.landing-footer-col a{font-size:.95rem;line-height:1.35}
.landing-footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--bb-border)}
.landing-footer-bottom p{margin:0;color:var(--bb-muted);font-size:.85rem}
@media(max-width:64rem){
.landing-hero--home{display:grid;grid-template-columns:1fr;gap:0;padding:0}
.landing-hero--home .landing-hero-copy{padding:1.75rem 1.25rem}
.landing-hero--home .landing-hero-visual{position:relative;inset:auto;order:-1;width:auto;height:auto;min-height:13rem;border-radius:0 0 1.5rem 1.5rem}
.landing-hero--home .landing-hero-photo{-webkit-mask-image:none;mask-image:none}
.landing-featured-card{grid-template-columns:1fr;gap:1.25rem}
.landing-featured-media>img,.landing-featured-media>svg{min-height:12rem;aspect-ratio:16/10}
.landing-featured-aside{padding:1.25rem 0 0;border-left:0;border-top:1px solid var(--bb-border)}
}
@media(max-width:56rem){
.landing-header{flex-wrap:wrap;gap:.75rem 1rem}
/* Brand shrinks instead of pushing the account pill into the next flex row:
logo and "Konto" stay on one line, only the nav wraps below. Scoped to the
uploaded-logo brand (the wordmark fallback keeps its natural width) and
floored so headers with extra controls (/gastronomen CTA, onboarding
language switcher) wrap those controls instead of crushing the logo. */
.landing-brand:has(.landing-logo){flex:1 1 0;min-width:min(8rem,38vw)}
.landing-logo{max-width:min(11rem,100%)}
/* The nav gets its own full-bleed row and slides horizontally instead of
wrapping its links onto further lines (longer translations, /gastronomen). */
.landing-nav{order:3;flex-basis:calc(100% + 2.5rem);flex-wrap:nowrap;margin-inline:-1.25rem;padding:.2rem 1.25rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-padding-inline:1.25rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.landing-nav::-webkit-scrollbar{display:none}
.landing-nav a{flex:none;white-space:nowrap}
.landing-login,.landing-account{flex:none;margin-left:auto}
.landing-hero{grid-template-columns:1fr}
.landing-hero-visual{order:-1;min-height:11rem}
.landing-hero-photo{-webkit-mask-image:none;mask-image:none}
.landing-usps--home{flex-wrap:wrap;gap:1rem 1.75rem}
.landing-usps--home li{flex:1 1 100%;max-width:none;padding:0;border-left:0}
.landing-steps,.landing-restaurant-cards{grid-template-columns:1fr}
.landing-why-cards{grid-template-columns:1fr;gap:1.5rem}
.landing-why-cards article{padding:0;border-left:0}
.landing-steps li{display:grid;justify-items:center}
.landing-referral{grid-template-columns:1fr;justify-items:start}
.landing-referral-icon{display:none}
.landing-owners{grid-template-columns:1fr}
.landing-owners-visual{order:-1;min-height:11rem}
.landing-owners-photo{-webkit-mask-image:none;mask-image:none}
.landing-owners-copy{padding:1.5rem 1.25rem 0}
.landing-owners .landing-cta-row{padding:1rem 1.25rem 1.5rem}
.landing-available-heading{align-items:flex-start}
.landing-featured-spark{display:none}
.landing-footer{justify-content:center;text-align:center}
.landing-footer-social{margin-left:0}
.landing-footer--sitemap{text-align:left}
.landing-footer-main{grid-template-columns:1fr}
.landing-footer--sitemap .landing-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
.landing-footer--sitemap .landing-footer-col:last-child{grid-column:1/-1}
.landing-footer-bottom{justify-content:space-between}
}
/* ---- Restaurateur advertising page (/gastronomen) ---------------------------------- */
body.landing{--bb-green:#1e8a4d}
body.landing a.landing-button.landing-header-button{padding:.55rem 1.1rem;box-shadow:none;white-space:nowrap}
.landing-eyebrow{margin:0 0 .8rem;color:var(--bb-red);font-size:.8rem;font-weight:750;letter-spacing:.09em;text-transform:uppercase}
.landing-rest-checks{display:grid;gap:.6rem;margin:0 0 1.6rem;padding:0;list-style:none}
.landing-rest-checks li{display:flex;align-items:center;gap:.65rem;font-size:.95rem;font-weight:550}
.landing-rest-checks li::before{content:"";flex:none;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--bb-red) url('data:image/svg+xml;utf8,') center/72% no-repeat}
.landing-rest-cta-note{margin:-1.25rem 0 0;color:var(--bb-muted);font-size:.9rem}
.landing-rest-visual{display:grid;gap:0;justify-items:center;align-content:center}
.landing-rest-mood{display:block;width:100%;max-width:30rem;height:auto}
.landing-rest-visual-caption{margin:2.25rem 0 0;color:var(--bb-muted);font-size:.9rem;font-style:italic}
.landing-compare{text-align:center}
.landing-compare h2,.landing-features h2,.landing-team-copy h2,.landing-final h2,.landing-pricing h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;text-align:left}
.landing-compare-col{overflow:hidden;border:1px solid var(--bb-border);border-radius:1rem;background:#fbf8f5}
.landing-compare-col h3{margin:0;padding:1rem 1.25rem;background:#f0e9e2;font-size:1rem;text-align:center}
.landing-compare-col--us{background:#fff;box-shadow:0 1rem 2.5rem #00000012}
.landing-compare-col--us h3{color:#fff;background:linear-gradient(120deg,var(--bb-red),var(--bb-red-dark))}
.landing-compare-col ul{margin:0;padding:.6rem 1.1rem .8rem;list-style:none}
.landing-compare-col li{display:flex;align-items:center;gap:.7rem;padding:.6rem .35rem;border-bottom:1px solid var(--bb-border);font-size:.93rem}
.landing-compare-col li:last-child{border-bottom:0}
.landing-compare-icon{display:grid;place-items:center;flex:none;width:1.4rem;height:1.4rem;color:#a89d94}
.landing-compare-icon svg{width:100%;height:100%}
.landing-compare-icon--check{color:var(--bb-green)}
.landing-team{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(1.5rem,4vw,3rem);padding:clamp(1.5rem,4vw,3rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:var(--bb-cream)}
.landing-team-copy h2{margin-bottom:1rem}
.landing-team-copy p{margin:0 0 1rem;color:var(--bb-muted)}
.landing-team-copy .landing-eyebrow{color:var(--bb-red)}
.landing-team-logo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--bb-border)}
.landing-team-logo a{display:block}
.landing-team-logo img{display:block;width:auto;max-width:9rem;height:2rem;object-fit:contain}
body.landing .landing-team-logo span{padding-left:.75rem;border-left:1px solid #d8cec4;color:var(--bb-ink);font-size:.8rem;font-weight:650}
.landing-team-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.landing-team-facts article{display:grid;justify-items:start;gap:.5rem;padding:1.1rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff}
.landing-team-facts h3{margin:0;font-size:.95rem}
.landing-team-facts p{margin:0;color:var(--bb-muted);font-size:.85rem}
.landing-team-callout{display:flex;align-items:center;gap:.85rem;margin:1rem 0 0;padding:1.1rem 1.25rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;font-weight:550}
.landing-team-callout svg{flex:none;width:1.9rem;height:1.9rem;color:var(--bb-red)}
.landing-features{text-align:center}
.landing-features h2{margin-bottom:2rem}
/* "Alle Funktionen" link under the /gastronomen feature grid: ghost button on light ground. */
.landing-features-more{justify-content:center;margin:1.75rem 0 0}
body.landing .landing-features-more a.landing-button--ghost{color:var(--bb-red);background:#fff;box-shadow:inset 0 0 0 1.5px var(--bb-red)}
body.landing .landing-features-more a.landing-button--ghost:hover{color:var(--bb-red-dark);background:var(--bb-red-soft)}
/* Feature list page (/gastronomen/funktionen): registry-fed cards with check bullets. */
.landing-featurelist-hero{padding:clamp(2rem,6vw,4rem) 0 .5rem;text-align:center}
.landing-featurelist-hero h1{margin:0 0 1rem;font-size:clamp(1.9rem,4.5vw,2.7rem);letter-spacing:-.02em}
.landing-featurelist{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem;padding-bottom:1.5rem;text-align:left}
.landing-featurelist article{display:grid;justify-items:start;align-content:start;gap:.7rem;padding:1.4rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-featurelist h2{margin:.25rem 0 0;font-size:1.05rem}
.landing-featurelist ul{display:grid;gap:.55rem;margin:0;padding:0;list-style:none}
.landing-featurelist li{display:flex;align-items:flex-start;gap:.6rem;color:var(--bb-muted);font-size:.92rem}
.landing-featurelist li::before{content:"";flex:none;width:1.2rem;height:1.2rem;margin-top:.05rem;border-radius:50%;background:var(--bb-red) url('data:image/svg+xml;utf8,') center/72% no-repeat}
.landing-feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;text-align:left}
.landing-feature-cards article{display:grid;justify-items:start;gap:.5rem;padding:1.25rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-feature-cards h3{margin:.25rem 0 0;font-size:1rem}
.landing-feature-cards p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-pricing{padding:clamp(1.75rem,4vw,3rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:var(--bb-cream)}
.landing-pricing .landing-section-intro{margin:0 0 1.75rem;max-width:46rem}
.landing-pricing-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:left}
.landing-pricing-cards article{display:grid;justify-items:start;align-content:start;gap:.5rem;padding:1.25rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-pricing-cards h3{margin:.25rem 0 0;font-size:1rem}
.landing-pricing-cards p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-pricing-note{margin:1rem 0 0;color:var(--bb-muted);font-size:.85rem}
/* Dedicated pricing page (/gastronomen/preise): one-price banner plus included features. */
.landing-pricing-hero{padding:clamp(2rem,6vw,4rem) 0 0;text-align:center}
.landing-pricing-hero h1{margin:0 0 .5rem;font-size:clamp(1.9rem,4.5vw,2.7rem);letter-spacing:-.02em}
.landing-pricing-hero .landing-section-intro{margin-bottom:0}
.landing-price-tagline{margin:0 0 1.1rem;color:var(--bb-red);font-family:'Segoe Script','Bradley Hand',cursive;font-size:1.2rem;font-weight:700}
.landing-price-panel{padding:clamp(1.75rem,4vw,3rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:var(--bb-cream)}
.landing-price-stats{display:grid;grid-template-columns:repeat(4,auto);justify-content:center}
.landing-price-stat{display:flex;align-items:center;gap:.8rem;padding:0 clamp(1rem,2.2vw,1.9rem);border-left:1px solid var(--bb-border)}
.landing-price-stat:first-child{border-left:0}
.landing-price-stat strong{color:var(--bb-red);font-size:clamp(2.1rem,4vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1;white-space:nowrap}
.landing-price-stat>span:last-child{max-width:9.5rem;font-weight:550;font-size:.95rem}
.landing-price-stat .landing-usp-icon{width:clamp(3.1rem,5vw,3.9rem);height:clamp(3.1rem,5vw,3.9rem);background:#fff}
.landing-price-stat .landing-usp-icon svg{width:62%;height:62%}
.landing-price-panel .landing-pricing-note{text-align:center}
.landing-price-only{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--bb-border)}
.landing-price-only p{display:flex;align-items:center;gap:.7rem;margin:0;font-weight:650}
.landing-price-only .landing-compare-icon--check{color:var(--bb-red)}
.landing-price-conditions,.landing-price-included{text-align:center}
.landing-price-conditions h2,.landing-price-included h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-price-conditions .landing-pricing-cards{margin-top:1.5rem}
.landing-pricing-cards--four{grid-template-columns:repeat(4,1fr)}
.landing-price-features{display:grid;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));gap:1rem;margin-top:1.75rem;text-align:left}
.landing-price-features article{display:grid;justify-items:start;align-content:start;gap:.55rem;padding:1.4rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-price-features h3{margin:.25rem 0 0;font-size:1rem}
.landing-price-features p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-steps--four{grid-template-columns:repeat(4,1fr);gap:1.5rem}
.landing-steps .landing-step-note{margin-top:.5rem;font-size:.82rem}
.landing-final{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;padding:clamp(1.75rem,4vw,3rem);border-radius:1.25rem;color:#fff;background:linear-gradient(120deg,#2e3a33,#1f2a24 55%,#18211c);box-shadow:0 1rem 2.5rem #0000003d}
.landing-final h2{color:#fff}
.landing-final-copy p{color:#ffffffd0}
.landing-final-copy .landing-eyebrow--light{color:#f3c8c2}
.landing-final-copy>p{margin:0 0 1.4rem}
.landing-final .landing-cta-row{margin-bottom:0}
body.landing a.landing-button--ghost{color:#fff;background:#ffffff1f;box-shadow:inset 0 0 0 1.5px #ffffff59}
body.landing a.landing-button--ghost:hover{color:#fff;background:#ffffff33}
.landing-final-checks{display:grid;gap:.8rem;margin:0;padding:0;list-style:none}
.landing-final-checks li{display:flex;align-items:center;gap:.7rem;font-weight:600}
.landing-final-checks .landing-compare-icon--check{color:#7fd6a2}
@media(max-width:64rem){
.landing-price-stats{grid-template-columns:repeat(2,auto);gap:1.5rem 0}
.landing-price-stat:nth-child(odd){border-left:0;padding-left:0}
.landing-steps--four{grid-template-columns:repeat(2,1fr)}
.landing-feature-cards{grid-template-columns:repeat(2,1fr)}
.landing-pricing-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:56rem){
.landing-rest-visual{order:-1}
.landing-rest-mood{max-width:26rem}
.landing-rest-visual-caption{margin-top:.9rem}
.landing-compare-grid,.landing-team,.landing-team-facts,.landing-final{grid-template-columns:1fr}
}
@media(max-width:40rem){
.landing-steps--four,.landing-feature-cards,.landing-pricing-cards{grid-template-columns:1fr}
.landing-price-stats{grid-template-columns:1fr;justify-content:start;gap:1.25rem}
.landing-price-stat{padding:0;border-left:0}
.landing-price-only{flex-direction:column;align-items:flex-start}
}
/* ---- Restaurateur cost calculator (/gastronomen/kostenrechner) ------------- */
.landing-calculator{margin-block:clamp(2rem,5vw,3.5rem);padding:clamp(1.5rem,4vw,2.75rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:var(--bb-cream)}
.landing-calculator-head h1{margin:0 0 .5rem;font-size:clamp(1.7rem,4vw,2.4rem);letter-spacing:-.02em;line-height:1.15}
.landing-calculator-head .landing-section-intro{margin:0 0 1.75rem}
.landing-calculator-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:1.25rem;align-items:start}
.landing-calculator-card{padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-calculator-card h2{margin:0 0 .3rem;font-size:1.2rem;font-weight:650}
.landing-calculator-text{margin:0 0 1.25rem;color:var(--bb-muted);font-size:.9rem}
.landing-calculator-field{margin-bottom:1.25rem}
.landing-calculator-field:last-child{margin-bottom:0}
.landing-calculator-field label{display:block;margin-bottom:.45rem;font-weight:700;font-size:.93rem}
.landing-calculator-input{position:relative;display:flex;align-items:center}
/* !important: the global form-control rule (body:not(.storefront) :is(input…):not(#…)) carries an ID and would win otherwise. */
.landing-calculator-input input{width:100%;min-height:3.1rem!important;padding:.75rem 3.6rem .75rem 1rem!important;border:1px solid var(--bb-border)!important;border-radius:.65rem!important;color:var(--bb-ink);background:var(--bb-cream)!important;font:inherit;font-size:1.05rem}
.landing-calculator-input input:focus{outline:3px solid color-mix(in srgb,var(--bb-red) 35%,transparent);outline-offset:1px;border-color:var(--bb-red)!important;background:#fff!important;box-shadow:none!important}
.landing-calculator-input input[aria-invalid=true]{border-color:var(--bb-red)!important;background:var(--bb-red-soft)!important}
.landing-calculator-unit{position:absolute;right:1rem;color:var(--bb-muted);font-size:.9rem;pointer-events:none}
.landing-calculator-hint{margin:.45rem 0 0;color:var(--bb-muted);font-size:.8rem}
.landing-calculator-error{margin:.45rem 0 0;color:var(--bb-red-dark);font-size:.85rem;font-weight:600}
.landing-calculator-divider{margin:1.5rem 0;border:0;border-top:1px solid var(--bb-border);opacity:1}
.landing-calculator-share-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.landing-calculator-share-head label{margin-bottom:.6rem}
.landing-calculator-share-value{color:var(--bb-red);font-size:1.35rem;font-weight:800;white-space:nowrap}
.landing-calculator-range{--calc-range-fill:25%;width:100%;height:2rem;min-height:0!important;margin:0;padding:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;cursor:pointer;-webkit-appearance:none;appearance:none}
.landing-calculator-range::-webkit-slider-runnable-track{height:1.6rem;border-radius:99rem;background:linear-gradient(to right,var(--bb-red-soft) var(--calc-range-fill),#f1ece7 var(--calc-range-fill))}
.landing-calculator-range::-moz-range-track{height:1.6rem;border-radius:99rem;background:#f1ece7}
.landing-calculator-range::-moz-range-progress{height:1.6rem;border-radius:99rem;background:var(--bb-red-soft)}
.landing-calculator-range::-webkit-slider-thumb{width:1.6rem;height:1.6rem;border:2px solid var(--bb-red);border-radius:50%;background:#fff;box-shadow:0 .1rem .35rem #0003;-webkit-appearance:none;appearance:none}
.landing-calculator-range::-moz-range-thumb{width:1.4rem;height:1.4rem;border:2px solid var(--bb-red);border-radius:50%;background:#fff;box-shadow:0 .1rem .35rem #0003}
.landing-calculator-range:focus-visible{outline:none}
.landing-calculator-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--bb-red) 35%,transparent)}
.landing-calculator-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--bb-red) 35%,transparent)}
.landing-calculator-range-scale{display:flex;justify-content:space-between;margin-top:.3rem;color:var(--bb-muted);font-size:.8rem}
.landing-calculator-highlight{margin-bottom:1.25rem;padding:clamp(1.1rem,3vw,1.5rem);border-radius:.9rem;background:var(--bb-red-soft)}
.landing-calculator-highlight p{margin:0}
.landing-calculator-highlight-label{color:var(--bb-red-dark);font-size:.78rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}
.landing-calculator-highlight-amount{margin:.35rem 0 .3rem!important;color:var(--bb-red);font-size:clamp(2.2rem,5vw,3rem);font-weight:800;letter-spacing:-.02em;line-height:1.1;overflow-wrap:anywhere}
.landing-calculator-highlight-yearly{font-weight:700}
.landing-calculator-disclaimer{margin-top:.9rem!important;color:var(--bb-muted);font-size:.8rem}
.landing-calculator-result[data-outcome=cost] .landing-calculator-highlight,.landing-calculator-result[data-outcome=zero] .landing-calculator-highlight,.landing-calculator-result[data-outcome=invalid] .landing-calculator-highlight{background:#f3efeb}
.landing-calculator-result[data-outcome=cost] .landing-calculator-highlight-amount,.landing-calculator-result[data-outcome=zero] .landing-calculator-highlight-amount,.landing-calculator-result[data-outcome=invalid] .landing-calculator-highlight-amount{color:var(--bb-ink)}
.landing-calculator-result[data-outcome=cost] .landing-calculator-highlight-label,.landing-calculator-result[data-outcome=zero] .landing-calculator-highlight-label,.landing-calculator-result[data-outcome=invalid] .landing-calculator-highlight-label{color:var(--bb-muted)}
.landing-calculator-direct{display:grid;gap:.2rem;margin-bottom:1.25rem;padding:.9rem 1rem;border:1px solid var(--bb-border);border-radius:.75rem}
.landing-calculator-direct span{color:var(--bb-muted);font-size:.85rem}
.landing-calculator-direct strong{font-size:1.3rem;font-weight:650}
.landing-calculator-breakdown{margin:0 0 1.5rem;border-top:1px solid var(--bb-border)}
.landing-calculator-breakdown>div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--bb-border);font-size:.9rem}
.landing-calculator-breakdown>div:not(.landing-calculator-breakdown-total){border-bottom:0}
.landing-calculator-breakdown dt{font-weight:400;color:var(--bb-ink)}
.landing-calculator-breakdown dd{margin:0;font-weight:700;white-space:nowrap}
.landing-calculator-breakdown-total{margin-top:.25rem;border-top:1px solid var(--bb-border);font-size:1rem!important}
.landing-calculator-breakdown-total dd{color:var(--bb-red);font-weight:800}
.landing-calculator-result[data-outcome=cost] .landing-calculator-breakdown-total dd{color:var(--bb-red-dark)}
body.landing a.landing-calculator-cta{display:flex;justify-content:center;width:100%;padding-block:1.05rem}
body.landing a.landing-calculator-cta:focus-visible{outline:3px solid var(--bb-ink);outline-offset:3px}
.landing-calculator-note{margin:1.25rem 0 0;color:var(--bb-muted);font-size:.82rem}
.landing-calculator-sharing{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--bb-border)}
.landing-calculator-sharing h3{margin:0 0 .3rem;font-size:1rem;font-weight:650}
.landing-calculator-sharing .landing-calculator-text{margin-bottom:0}
/* Two classes: beats the referral page's fixed 6/3/2-column breakpoints — the card is narrower. */
.referral-share-options.landing-calculator-sharing-options{grid-template-columns:repeat(auto-fit,minmax(5.5rem,1fr));gap:.5rem;margin-top:.85rem}
.referral-share-options.landing-calculator-sharing-options a,.referral-share-options.landing-calculator-sharing-options button{min-height:4.6rem;padding:.6rem .3rem;color:var(--bb-ink);font-size:.78rem}
@media(max-width:56rem){
.landing-calculator-grid{grid-template-columns:minmax(0,1fr)}
}
/* ---- Referral program page (/empfehlung) ---------------------------------- */
.landing-brand-group{display:grid;justify-items:start;gap:.05rem}
.landing-brand-tagline{color:var(--bb-muted);font-size:.78rem;font-weight:600}
.landing-ref-hero{grid-template-columns:1.05fr .95fr}
.landing-ref-hero .landing-hero-copy h1{max-width:22ch;margin-bottom:.35rem}
.landing-ref-subheadline{margin:0 0 1rem;color:var(--bb-red);font-size:clamp(1.25rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.01em}
.landing-ref-hero .landing-intro{margin-bottom:1.75rem}
.landing-ref-signup{padding:1.25rem clamp(1rem,2.5vw,1.5rem) 1.1rem;border:2px solid var(--bb-red);border-radius:1rem;background:#fff;box-shadow:0 1rem 2.5rem color-mix(in srgb,var(--bb-red) 12%,transparent)}
.landing-ref-signup h2{margin:0 0 .9rem;font-size:1.1rem}
.landing-ref-signup-error{margin:-.35rem 0 .75rem;padding:.6rem .85rem;border:1px solid #efc4bd;border-radius:.6rem;color:var(--bb-red-dark);background:var(--bb-red-soft);font-size:.9rem}
.landing-ref-signup-form{display:flex;gap:.75rem}
.landing-ref-signup-form input{flex:1;min-width:0;padding:.75rem .9rem;border:1px solid var(--bb-border);border-radius:.6rem;font:inherit;background:var(--bb-cream)}
.landing-ref-signup-form .landing-button{white-space:nowrap}
.landing-ref-signup-usps{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin:1rem 0 0;padding:0;list-style:none}
.landing-ref-signup-usps li{display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600}
.landing-ref-signup-usps svg{flex:none;width:1.2rem;height:1.2rem;color:var(--bb-red)}
.landing-ref-hero-visual{position:relative;display:grid;place-items:center}
.landing-ref-hero-image{width:100%;max-width:34rem;height:auto}
.landing-ref-hero-heart{position:absolute;left:3%;top:8%;width:clamp(2.2rem,4vw,3.2rem);height:auto}
.landing-ref-steps{text-align:center}
.landing-ref-steps h2{margin:0 0 1.75rem;font-size:clamp(1.35rem,2.6vw,1.7rem)}
.landing-ref-steps ol{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.25rem,2.5vw,2rem);margin:0;padding:0;list-style:none}
.landing-ref-steps li{position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;gap:.75rem;padding:1.1rem 1rem 1.3rem;border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-ref-steps li+li::before{content:"›";position:absolute;left:calc(-.5*clamp(1.25rem,2.5vw,2rem));top:50%;translate:-50% -50%;color:var(--bb-ink);font-size:1.5rem;font-weight:700}
.landing-ref-steps h3{display:flex;align-items:center;gap:.55rem;margin:0;font-size:.98rem;text-align:left}
.landing-ref-step-number{display:grid;place-items:center;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;color:#fff;background:var(--bb-red);font-size:.85rem;font-weight:700}
.landing-ref-steps img{width:min(9.5rem,70%);height:auto;align-self:center}
.landing-ref-value{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.landing-ref-card{padding:clamp(1.25rem,3vw,1.75rem);border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-ref-card h2{margin:0 0 1rem;font-size:clamp(1.15rem,2vw,1.35rem)}
.landing-ref-help-body{display:grid;grid-template-columns:1.1fr .9fr;gap:1rem;align-items:start}
.landing-ref-help-copy p{margin:0 0 .9rem;font-size:.95rem}
.landing-ref-help-copy .landing-rest-checks{margin-bottom:0}
.landing-ref-help-copy .landing-rest-checks li{font-size:.92rem}
.landing-ref-help-outro{margin:1rem 0 0;color:var(--bb-muted);font-size:.9rem}
.landing-ref-heart-inline{width:1.35em;height:auto;vertical-align:-.25em}
.landing-ref-help-visual{display:flex;justify-content:center;height:15rem;overflow:hidden}
.landing-ref-help-visual img{width:19.5rem;max-width:none;height:auto;align-self:flex-start}
.landing-ref-earn-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center}
.landing-ref-earn-flow p{align-self:stretch;display:grid;align-items:center;margin:0;padding:.85rem 1rem;border-radius:.7rem;background:var(--bb-red-soft);font-size:.9rem;font-weight:600}
.landing-ref-earn-flow>span{color:var(--bb-red);font-size:1.4rem;font-weight:700}
.landing-ref-earn-example{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center;margin-top:1rem;padding:1.1rem 1.25rem;border-radius:.7rem;background:var(--bb-red-soft)}
.landing-ref-earn-example p{margin:.2rem 0;font-size:.95rem}
.landing-ref-earn-example-label{color:var(--bb-red);font-weight:750}
.landing-ref-earn-example b{font-size:1.05rem}
.landing-ref-earn-example img{width:7rem;height:auto}
.landing-ref-multi>p{margin:0 0 1.25rem;color:var(--bb-muted);font-size:.95rem}
.landing-ref-multi-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2vw,1.5rem);align-items:center}
.landing-ref-multi-visual{width:clamp(7rem,10vw,9rem);height:auto}
.landing-ref-multi-table{width:100%;border-collapse:collapse}
.landing-ref-multi-table caption{padding-bottom:.5rem;font-size:.85rem;font-weight:700;text-align:left}
.landing-ref-multi-table th,.landing-ref-multi-table td{padding:.55rem .8rem;border:1px solid var(--bb-border);font-size:.92rem}
.landing-ref-multi-table th{color:var(--bb-ink);font-size:.92rem;font-weight:600;letter-spacing:0;text-align:left;text-transform:none;white-space:nowrap}
.landing-ref-multi-table td{color:var(--bb-red);background:var(--bb-red-soft);font-weight:800;text-align:right}
.landing-ref-notify-body{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.landing-ref-notify ul{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.landing-ref-notify li{display:flex;align-items:center;gap:.85rem;padding:.55rem .8rem;border:1px solid var(--bb-border);border-radius:.7rem}
.landing-ref-notify li img{flex:none;width:2.4rem;height:2.4rem}
.landing-ref-notify h3{margin:0;font-size:.92rem}
.landing-ref-notify li p{margin:.1rem 0 0;color:var(--bb-muted);font-size:.82rem}
.landing-ref-notify-visual{width:clamp(7rem,10vw,9rem);height:auto}
.landing-ref-faq h2{margin:0 0 1.25rem;font-size:clamp(1.35rem,2.6vw,1.7rem)}
.landing-ref-faq details{max-width:50rem;margin-bottom:.75rem;padding:1rem 1.25rem;border:1px solid var(--bb-border);border-radius:.8rem;background:#fff}
.landing-ref-faq summary{cursor:pointer;font-weight:650}
.landing-ref-faq details p{margin:.7rem 0 0;color:var(--bb-muted)}
.landing-ref-creator{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,2.5vw,2rem);align-items:center;padding:1rem clamp(1.25rem,3vw,2rem);border-radius:1rem;background:var(--bb-red-soft)}
.landing-ref-creator img{width:6rem;height:auto}
.landing-ref-creator h2{margin:0 0 .25rem;font-size:1.25rem}
.landing-ref-creator p{margin:0;color:var(--bb-muted)}
.landing-ref-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.landing-ref-trust div{display:flex;align-items:center;gap:.9rem}
.landing-ref-trust img{flex:none;width:3.2rem;height:3.2rem}
.landing-ref-trust p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-ref-trust b{display:block;color:var(--bb-ink)}
@media(max-width:64rem){
.landing-ref-steps ol{grid-template-columns:repeat(2,1fr)}
.landing-ref-steps li+li::before{content:none}
.landing-ref-value{grid-template-columns:1fr}
}
@media(max-width:56rem){
.landing-ref-hero{grid-template-columns:1fr}
.landing-ref-hero-visual{order:-1}
.landing-ref-hero-image{max-width:20rem}
.landing-ref-hero-heart{display:none}
.landing-ref-signup-form{flex-direction:column}
.landing-ref-help-body{grid-template-columns:1fr}
.landing-ref-help-visual{height:12rem}
.landing-ref-help-visual img{width:15.5rem}
.landing-ref-earn-flow{grid-template-columns:1fr}
.landing-ref-earn-flow>span{justify-self:center;rotate:90deg}
.landing-ref-multi-body{grid-template-columns:1fr;justify-items:center}
.landing-ref-notify-body{grid-template-columns:1fr}
.landing-ref-notify-visual{justify-self:center}
.landing-ref-creator{grid-template-columns:1fr;justify-items:start}
.landing-ref-trust{grid-template-columns:1fr}
}
@media(max-width:40rem){
.landing-ref-steps ol{grid-template-columns:1fr}
}
/* ---- Referral sharing page (/empfehlung/link/{code}) ---------------------- */
.referral-share-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;margin-top:clamp(1.5rem,4vw,2.5rem);padding:clamp(1.5rem,4vw,2.5rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:#fff;box-shadow:0 .5rem 1.5rem #00000010}
.referral-share-hero-copy h1{display:flex;align-items:center;gap:.8rem;margin:0 0 .5rem;font-size:clamp(1.6rem,3.4vw,2.4rem);letter-spacing:-.015em}
.referral-share-check{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;color:#1e8a4d}
.referral-share-check svg{width:100%;height:100%}
.referral-share-check-path{stroke-dasharray:20;stroke-dashoffset:20;animation:referral-share-check 320ms ease-out 180ms forwards}
@keyframes referral-share-check{to{stroke-dashoffset:0}}
.referral-share-subheadline{margin:0 0 .75rem;color:var(--bb-red);font-size:clamp(1.15rem,2.2vw,1.5rem);font-weight:800}
.referral-share-description{margin:0 0 1.4rem;color:var(--bb-muted)}
.referral-share-link{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem;padding:.9rem 1.1rem;border:1px solid color-mix(in srgb,var(--bb-red) 30%,var(--bb-border));border-radius:.85rem;background:var(--bb-red-soft)}
.referral-share-link>svg{flex:none;width:1.5rem;height:1.5rem;color:var(--bb-red)}
.referral-share-link-url{flex:1;min-width:0;overflow-wrap:anywhere;font-size:clamp(1.05rem,2vw,1.4rem);font-weight:800}
.referral-share-copy-icon{display:grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border:0;border-radius:.6rem;color:var(--bb-ink);background:transparent;cursor:pointer}
.referral-share-copy-icon:hover{color:var(--bb-red);background:#fff}
.referral-share-copy-icon svg{width:1.4rem;height:1.4rem}
body.landing button.landing-button.referral-share-primary{justify-content:center;width:100%;padding:1rem 1.5rem;font-size:1.05rem}
.referral-share-primary svg{width:1.3rem;height:1.3rem}
.referral-share-options{display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;margin:1rem 0 0;padding:0;list-style:none;border-radius:.85rem;transition:box-shadow .25s ease}
.referral-share-options.is-highlighted{box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-red) 45%,transparent)}
.referral-share-options a,.referral-share-options button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;min-height:5.25rem;padding:.75rem .4rem;border:1px solid var(--bb-border);border-radius:.85rem;color:var(--bb-ink);background:#fff;font:inherit;font-size:.82rem;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.referral-share-options a:hover,.referral-share-options button:hover{border-color:color-mix(in srgb,var(--bb-red) 45%,var(--bb-border));color:var(--bb-ink)}
.referral-share-options svg{width:1.7rem;height:1.7rem;color:var(--bb-red)}
.referral-share-options .referral-share-icon--whatsapp{color:#1fa855}
.referral-share-options .referral-share-icon--sms{color:#1d76d2}
.referral-share-hero-visual{position:relative;display:grid;place-items:center}
.referral-share-hero-image{width:min(20rem,100%);height:auto}
.referral-share-hero-heart{position:absolute;left:4%;top:4%;width:clamp(2rem,3.5vw,3rem);height:auto}
.referral-share-template{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(1rem,2.5vw,1.75rem);align-items:center;padding:clamp(1.1rem,2.5vw,1.5rem);border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.referral-share-template>img{width:4rem;height:4rem}
.referral-share-template h2{margin:0 0 .4rem;font-size:1.1rem}
.referral-share-template p{margin:0;color:var(--bb-muted);font-size:.92rem}
.referral-share-template p a{font-weight:700;overflow-wrap:anywhere}
.referral-share-template-copy{display:inline-flex;align-items:center;gap:.55rem;padding:.8rem 1.3rem;border:1.5px solid var(--bb-red);border-radius:.7rem;color:var(--bb-red);background:#fff;font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.referral-share-template-copy:hover{color:#fff;background:var(--bb-red)}
.referral-share-template-copy svg{width:1.2rem;height:1.2rem}
.referral-share-next{text-align:center}
.referral-share-next h2{margin:0 0 1.5rem;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.referral-share-next ol{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.75rem);margin:0;padding:0;list-style:none;text-align:left}
.referral-share-next li{position:relative;display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1.1rem 1.1rem 1.1rem 1.4rem;border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.referral-share-next .landing-ref-step-number{position:absolute;left:-.65rem;top:-.65rem}
.referral-share-next li>img{width:5rem;height:5rem}
.referral-share-next h3{margin:0 0 .3rem;font-size:.98rem}
.referral-share-next li p{margin:0;color:var(--bb-muted);font-size:.85rem}
.referral-share-many p{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:0;padding:.9rem 1.25rem;border-radius:.85rem;background:var(--bb-red-soft);font-size:.92rem;font-weight:550}
.referral-share-many img{width:1.4rem;height:1.4rem}
.referral-share-qr{width:min(22rem,calc(100% - 2rem));padding:1.75rem 1.5rem 1.5rem;border:0;border-radius:1rem;text-align:center;box-shadow:0 1.25rem 4rem #00000040}
.referral-share-qr::backdrop{background:#15100c99}
.referral-share-qr h2{margin:0 0 1rem;font-size:1.1rem}
.referral-share-qr img{width:100%;max-width:17.5rem;height:auto}
.referral-share-qr-url{margin:.75rem 0 1rem;font-weight:800}
.referral-share-qr-close{position:absolute;right:.65rem;top:.65rem;width:2.4rem;height:2.4rem;padding:0;border:0;border-radius:50%;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer}
.referral-share-qr-close:hover{background:var(--bb-cream)}
.referral-share-toast{position:fixed;left:50%;bottom:1.5rem;z-index:30;margin:0;padding:.7rem 1.2rem;border-radius:2rem;color:#fff;background:var(--bb-ink);font-weight:650;opacity:0;translate:-50% .5rem;transition:opacity .2s ease,translate .2s ease}
.referral-share-toast.is-visible{opacity:1;translate:-50% 0}
@media(prefers-reduced-motion:reduce){
.referral-share-check-path{animation:none;stroke-dashoffset:0}
.referral-share-toast{transition:none;translate:-50% 0}
.referral-share-options{transition:none}
}
@media(max-width:64rem){
.referral-share-options{grid-template-columns:repeat(3,1fr)}
.referral-share-next ol{grid-template-columns:1fr}
}
@media(max-width:56rem){
.referral-share-hero{grid-template-columns:1fr}
.referral-share-hero-visual{order:-1}
.referral-share-hero-image{width:min(13rem,60%)}
.referral-share-hero-copy h1{font-size:1.5rem}
.referral-share-template{grid-template-columns:auto 1fr}
.referral-share-template-copy{grid-column:1/-1;justify-content:center}
}
@media(max-width:40rem){
.referral-share-options{grid-template-columns:repeat(2,1fr)}
}
/* ---- Referrer advertising page (/empfehlen) ---------------------------------------- */
.landing-refer-hero{grid-template-columns:1.05fr .95fr}
.landing-refer-note{display:flex;align-items:flex-end;gap:.4rem;margin:0 0 .9rem;color:var(--bb-red);font-style:italic;font-weight:650}
.landing-refer-note svg{flex:none;width:1.9rem;height:1.9rem;margin-bottom:-.6rem}
.landing-refer-form{display:flex;flex-wrap:wrap;gap:.75rem;max-width:34rem;margin:0 0 1.5rem}
.landing-refer-input{position:relative;flex:1 1 15rem}
.landing-refer-input svg{position:absolute;top:50%;left:.9rem;width:1.2rem;height:1.2rem;color:var(--bb-muted);translate:0 -50%;pointer-events:none}
/* The paddings out-rank the app-wide input rule, whose :not(#mobile-restaurant-switcher) carries id specificity. */
.landing-refer-input input{width:100%;padding:.85rem 1rem .85rem 2.7rem!important;border:1px solid var(--bb-border);border-radius:.7rem!important;background:#fff;font:inherit}
.landing-refer-input input::placeholder{color:#aaa39c}
.landing-referral-terms-note{margin:.9rem 0 0}
.landing-refer-usps{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0;padding:0;list-style:none}
.landing-refer-usps li{display:flex;align-items:center;gap:.5rem;font-size:.88rem;font-weight:550}
.landing-refer-usps .landing-usp-icon{width:1.9rem;height:1.9rem}
.landing-refer-usps .landing-usp-icon svg{width:1.05rem;height:1.05rem}
.landing-refer-visual{position:relative;align-self:center}
.landing-refer-photo{display:block;width:100%;aspect-ratio:5/4;border-radius:1.25rem;background:#f3ece2;object-fit:cover;box-shadow:0 1.2rem 2.6rem #00000022}
.landing-refer-visual-card{position:absolute;left:-1.75rem;bottom:1.5rem;display:flex;align-items:flex-start;gap:.85rem;max-width:22rem;margin:0;padding:1rem 1.15rem;border-radius:.9rem;background:#fff;box-shadow:0 1rem 2.5rem #00000026;font-size:.88rem;font-weight:550}
.landing-refer-heart{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:50%;color:#fff;background:var(--bb-red)}
.landing-refer-heart svg{width:1.3rem;height:1.3rem}
.landing-earnings{padding:clamp(1.5rem,4vw,2.5rem);border:1px solid #f3ddd4;border-radius:1.25rem;background:#fdf5f0}
.landing-earnings h2{margin:0 0 .35rem;font-size:clamp(1.25rem,2.4vw,1.6rem)}
.landing-earnings-intro{margin:0 0 1.6rem;color:var(--bb-muted);font-size:.95rem}
.landing-earnings-grid{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.landing-earnings-math{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}
.landing-earnings-fact{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.1rem .6rem}
.landing-earnings-fact .landing-usp-icon{grid-row:span 2;width:2.3rem;height:2.3rem}
.landing-earnings-fact .landing-usp-icon svg{width:1.2rem;height:1.2rem}
.landing-earnings-fact-label b{display:block;font-size:.82rem}
.landing-earnings-fact-label small{color:var(--bb-muted);font-size:.75rem}
.landing-earnings-fact strong{grid-column:2;font-size:1.15rem;letter-spacing:-.01em}
.landing-earnings-fact--result{padding:.8rem 1rem;border:1px solid #f3d9d4;border-radius:.9rem;background:#fff;box-shadow:0 .5rem 1.2rem #00000012}
.landing-earnings-fact--result strong{color:var(--bb-red)}
.landing-earnings-op{color:var(--bb-muted);font-size:1.15rem;font-weight:700}
.landing-earnings-total{display:grid;justify-items:center;align-content:center;gap:.3rem;min-width:13rem;padding:1.4rem 1.5rem;border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .75rem 2rem #00000014;text-align:center}
.landing-earnings-total p{margin:0}
.landing-earnings-total-eyebrow{font-size:.9rem;font-weight:700}
.landing-earnings-total-value{color:var(--bb-red);font-size:clamp(2rem,3.5vw,2.6rem);font-weight:800;letter-spacing:-.02em}
.landing-earnings-total-note{color:var(--bb-muted);font-size:.85rem}
.landing-earnings-footnote{display:flex;align-items:center;gap:.5rem;margin:1.4rem 0 0;color:var(--bb-muted);font-size:.85rem}
.landing-earnings-footnote svg{flex:none;width:1.1rem;height:1.1rem}
.landing-scale{text-align:center}
.landing-scale h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-scale-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:2rem}
.landing-scale-cards article{display:grid;justify-items:center;align-content:start;gap:.3rem;padding:1.5rem 1.25rem;border:1px solid var(--bb-border);border-radius:1rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-scale-cards h3{margin:.5rem 0 0;font-size:1rem}
.landing-scale-cards p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-scale-cards strong{color:var(--bb-red);font-size:1.5rem;letter-spacing:-.01em}
.landing-scale-cards small{color:var(--bb-muted);font-size:.82rem}
.landing-scale-cards .landing-scale-network{justify-items:start;background:#fdf5f0;border-color:#f3ddd4;text-align:left}
.landing-scale-network p{font-size:.88rem}
.landing-scale-footnote{margin:1rem 0 0;color:var(--bb-muted);font-size:.85rem;text-align:left}
.landing-creator{padding:clamp(1.5rem,4vw,2.25rem)}
.landing-creator h2{font-size:clamp(1.2rem,2.2vw,1.6rem)}
.landing-creator p{font-size:.95rem}
.landing-creator-plane{width:5rem;height:auto}
@media(max-width:64rem){
.landing-scale-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:56rem){
.landing-refer-hero{grid-template-columns:1fr}
.landing-refer-visual{order:-1}
.landing-refer-visual-card{left:1rem;right:1rem;bottom:1rem;max-width:none}
.landing-earnings-grid{grid-template-columns:1fr}
.landing-earnings-op{display:none}
.landing-earnings-total{justify-self:stretch}
.landing-creator-plane{display:none}
}
@media(max-width:40rem){
.landing-scale-cards{grid-template-columns:1fr}
}
/* ---- About page (/ueber-uns) -------------------------------------------------------- */
.landing-about-hero .landing-cta-row{margin-bottom:1.4rem}
.landing-about-operator{display:flex;align-items:center;gap:.6rem;margin:0;padding-top:1.1rem;border-top:1px solid var(--bb-border);color:var(--bb-muted);font-size:.9rem}
.landing-about-operator svg{flex:none;width:1.35rem;height:1.35rem;color:var(--bb-red)}
.landing-about-visual{position:relative;margin:0;border-radius:1.25rem;overflow:hidden;box-shadow:0 1rem 2.5rem #00000024}
.landing-about-visual img{display:block;width:100%;height:auto}
/* The claim sits on a dark gradient along the photo's bottom edge — it never covers a face. */
.landing-about-visual-claim{position:absolute;left:0;right:0;bottom:0;display:grid;gap:.2rem;margin:0;padding:2.75rem 1.25rem 1rem;color:#fff;background:linear-gradient(180deg,transparent,#000000a6 55%,#000000d9);font-size:1.15rem;font-weight:750;line-height:1.3;text-shadow:0 1px 2px #00000080}
.landing-about-visual-claim span{color:#ffffffd9;font-size:.82rem;font-weight:550}
.landing-about-motivation{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.landing-about-motivation-copy h2{margin:0 0 1rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-about-motivation-copy p{margin:0 0 1rem;color:var(--bb-muted)}
.landing-about-quote{display:grid;gap:1.25rem;margin:0;padding:clamp(1.5rem,3vw,2.25rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:var(--bb-cream)}
.landing-about-quote blockquote{position:relative;margin:0;padding-top:2.4rem;font-size:clamp(1.1rem,1.8vw,1.35rem);font-style:italic;font-weight:700;line-height:1.4}
.landing-about-quote blockquote::before{content:"\201E";position:absolute;top:-1.4rem;left:0;color:var(--bb-red);font-size:3.6rem;font-style:normal;line-height:1}
.landing-about-quote figcaption{display:flex;align-items:center;gap:1rem}
.landing-about-quote-photo{flex:none;width:5rem;height:5rem;border:3px solid #fff;border-radius:50%;object-fit:cover;box-shadow:0 .4rem 1rem #00000014}
.landing-about-quote figcaption span{display:grid;gap:.15rem;color:var(--bb-muted);font-size:.88rem}
.landing-about-quote figcaption b{color:var(--bb-ink);font-size:.95rem}
.landing-about-trust-title{margin-bottom:1.1rem}
.landing-about-trust-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.landing-about-trust-cards article{display:grid;justify-items:center;align-content:start;gap:.55rem;padding:1.4rem 1.25rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .4rem 1rem #00000008;text-align:center}
.landing-about-trust-cards h3{margin:.35rem 0 0;font-size:1rem}
.landing-about-trust-cards p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-about-values h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-about-values .landing-section-intro{margin:0 0 1.75rem}
.landing-about-values-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.landing-about-values-cards article{display:grid;justify-items:start;align-content:start;gap:.5rem;padding:1.25rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .4rem 1rem #00000008}
.landing-about-values-cards h3{margin:.25rem 0 0;font-size:1rem}
.landing-about-values-cards p{margin:0;color:var(--bb-muted);font-size:.9rem}
.landing-about-press h2{margin:0 0 .5rem;font-size:clamp(1.5rem,3vw,2.1rem)}
.landing-about-press .landing-section-intro{margin:0 0 1.5rem}
/* The press logos live in one 433×45px sprite (images/presse_logos.png) with unequal
cells: --sx/--sw are each logo's measured pixel box, --press-scale maps sprite
pixels to the rendered logo height (45 sprite px = 2.75rem). Logos are not all
vertically centered inside the sprite; --sy (sprite px) shifts each one down onto
the row's horizontal centerline. */
.landing-about-press-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem clamp(1rem,3vw,2.5rem);align-items:center;justify-items:center;margin:0;padding:1.5rem clamp(1.25rem,3vw,2.5rem);border:1px solid var(--bb-border);border-radius:1rem;background:#fff;list-style:none}
.landing-about-press-logos span{--press-scale:calc(2.75rem/45);display:block;width:calc(var(--sw)*var(--press-scale));height:2.75rem;background-image:var(--press-sprite);background-repeat:no-repeat;background-size:calc(433*var(--press-scale)) 2.75rem;background-position:calc(-1*var(--sx)*var(--press-scale)) calc(var(--sy,0)*var(--press-scale));filter:grayscale(1);opacity:.75}
.landing-about-press-logos li:hover span{filter:none;opacity:1}
.landing-about-press-logos [data-press-logo="zdf"]{--sx:3;--sw:68}
.landing-about-press-logos [data-press-logo="wdr"]{--sx:77;--sw:67;--sy:10}
.landing-about-press-logos [data-press-logo="stern"]{--sx:149;--sw:68;--sy:7.5}
.landing-about-press-logos [data-press-logo="n24"]{--sx:222;--sw:68;--sy:10}
.landing-about-press-logos [data-press-logo="dpa"]{--sx:295;--sw:64}
.landing-about-press-logos [data-press-logo="ard"]{--sx:363;--sw:68;--sy:10}
.landing-about-cta{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:stretch}
.landing-about-cta-card{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;align-items:start;margin:0;padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--bb-border);border-radius:1.25rem;background:var(--bb-cream)}
.landing-about-cta-card h2{margin:0 0 .35rem;font-size:clamp(1.1rem,2vw,1.35rem)}
.landing-about-cta-card p{margin:0 0 1.1rem;color:var(--bb-muted);font-size:.95rem}
@media(max-width:64rem){
.landing-about-values-cards{grid-template-columns:repeat(2,1fr)}
.landing-about-press-logos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:56rem){
.landing-about-hero .landing-about-visual{order:-1}
.landing-about-motivation,.landing-about-cta{grid-template-columns:1fr}
}
@media(max-width:40rem){
.landing-about-trust-cards,.landing-about-values-cards{grid-template-columns:1fr}
.landing-about-press-logos{grid-template-columns:repeat(2,1fr)}
.landing-about-cta-card{grid-template-columns:1fr}
}
/* ---- Sign-in page (standalone central login card) ---------------------------------- */
body.auth{--bb-red:#c22d20;--bb-red-dark:#9f2015;--bb-red-soft:#fbeae7;--bb-ink:#241d19;--bb-muted:#6f6660;--bb-border:#ece4dd;--focus-color:var(--bb-red);margin:0;color:var(--bb-ink);background:#f3f1ee;font:var(--text-base)/1.55 var(--font-sans)}
body.auth a{color:var(--bb-red)}
.auth-scenery{position:fixed;inset:0;overflow:hidden;color:#e3ddd4;pointer-events:none}
.auth-scenery svg{position:absolute;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.auth-doodle--noodles{top:3%;right:5%;width:8.5rem;rotate:8deg}
.auth-doodle--leaf{top:32%;left:4%;width:4.5rem;rotate:-14deg}
.auth-doodle--burger{bottom:5%;left:2%;width:11rem;rotate:-7deg}
.auth-doodle--pizza{bottom:7%;right:4%;width:9rem;rotate:12deg}
.auth-doodle--dot-1{top:16%;left:13%;width:1.4rem}
.auth-doodle--dot-2{bottom:30%;right:12%;width:1rem}
.auth-main{position:relative;display:grid;place-items:center;min-height:100dvh;padding:clamp(1rem,4vw,3rem)}
.auth-card{display:grid;gap:1.4rem;width:min(52rem,100%);padding:clamp(1.75rem,6vw,3.75rem);border-radius:1.5rem;background:#fff;box-shadow:0 2.5rem 5rem #241d1914}
.auth-card .landing-brand{justify-self:start}
.auth-intro h1{margin:0 0 .6rem;font-size:clamp(2rem,5vw,2.6rem);letter-spacing:-.02em}
.auth-intro p{margin:0;color:var(--bb-muted)}
.auth-form{display:grid;gap:1.1rem}
.auth-form .account-consent{max-width:none}
.auth-field{display:grid;gap:.5rem}
.auth-field label{font-weight:700;font-size:.95rem}
.auth-field input{width:100%;padding:.95rem 1.1rem;border:1px solid var(--bb-border);border-radius:.75rem;background:#fff;color:inherit;font:inherit}
.auth-field input::placeholder{color:#aaa39c}
.auth-field input:focus,body.auth .auth-field input:focus-visible{outline:0;border-color:color-mix(in srgb,var(--bb-red) 55%,#fff);box-shadow:0 0 0 4px color-mix(in srgb,var(--bb-red) 12%,transparent)}
.auth-password{position:relative;display:block}
.auth-password input{padding-right:3.25rem}
.auth-password-toggle{position:absolute;top:50%;right:.6rem;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:0;border-radius:.5rem;background:none;color:var(--bb-muted);translate:0 -50%;cursor:pointer}
.auth-password-toggle svg{width:1.35rem;height:1.35rem}
.auth-password-toggle svg[hidden]{display:none}
.auth-forgot{justify-self:start;margin-top:-.35rem;font-weight:650;font-size:.95rem;text-decoration:none}
.auth-forgot:hover{text-decoration:underline}
body.auth .auth-submit{display:inline-flex;align-items:center;justify-content:center;width:100%;padding:.95rem 1.25rem;border:0;border-radius:.75rem;background:var(--bb-red);color:#fff;font:inherit;font-size:1.05rem;font-weight:700;text-decoration:none;cursor:pointer}
body.auth .auth-submit:hover{background:var(--bb-red-dark);color:#fff}
body.auth .auth-submit--secondary{border:1.5px solid var(--bb-red);background:#fff;color:var(--bb-red)}
body.auth .auth-submit--secondary:hover{background:var(--bb-red-soft);color:var(--bb-red-dark)}
.auth-alt{margin:0;text-align:center;color:var(--bb-muted)}
.auth-alt a{font-weight:650}
.auth-card .auth-divider{max-width:none;margin:.25rem 0;color:var(--bb-muted)}
.auth-card .auth-divider::before,.auth-card .auth-divider::after{background:var(--bb-border)}
.auth-card .ck-social{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.9rem}
.auth-card .ck-social-button{min-height:3.4rem;border-radius:.75rem;border-color:var(--bb-border);color:var(--bb-ink)}
.auth-foot{display:flex;align-items:center;gap:clamp(1rem,3vw,1.75rem);margin-top:.75rem}
.auth-foot-item{display:flex;flex:1;align-items:center;gap:.85rem;font-size:.9rem}
.auth-foot-item:last-child{flex:0 0 auto}
.auth-foot-item p{margin:0}
.auth-foot-icon{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.auth-foot-icon svg{width:1.35rem;height:1.35rem}
.auth-foot-divider{align-self:stretch;width:1px;background:var(--bb-border)}
/* Registration: first and last name share a row; the benefits echo the sign-up pitch. */
.auth-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
.auth-subtitle{margin:0 0 .35rem}
.trial-languages{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem}.trial-languages a{padding:.3rem .75rem;border:1px solid var(--bb-border);border-radius:999px;color:var(--bb-ink);font-size:.9rem;text-decoration:none}.trial-languages a:hover{border-color:var(--bb-ink)}.trial-languages a[aria-current]{background:var(--bb-ink);border-color:var(--bb-ink);color:#fff;font-weight:600}
/* Takeover/Probelauf pages: the restaurant's picture is only a recognition cue — the hero
becomes a cropped banner inside the card, the logo stays small. */
.claim-restaurant-media{display:flex;min-width:0}
.claim-restaurant-hero{display:block;width:100%;height:auto;max-height:11rem;aspect-ratio:16/6;object-fit:cover;border-radius:1rem;background:var(--bb-border)}
.claim-restaurant-logo{display:block;width:auto;max-width:6rem;height:auto;max-height:6rem;object-fit:contain;border-radius:.75rem}
.auth-benefits{display:grid;gap:.4rem;margin:0;padding:0;list-style:none;color:var(--bb-muted);font-size:.95rem}
/* Email verification landing: the outcome icon above the heading. */
.auth-status-icon{display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.auth-status-icon svg{width:2.1rem;height:2.1rem}
.auth-status-icon--success{color:#2e7d43;background:#e8f4ec}
@media(max-width:40rem){
.auth-card .ck-social{grid-template-columns:1fr}
.auth-field-row{grid-template-columns:1fr}
.auth-foot{flex-direction:column;align-items:flex-start}
.auth-foot-divider{width:100%;height:1px;align-self:auto}
}
/* Customer account — own chrome, separate from the restaurant backend. */
/* The public bestellbei.de CI tokens — the shared brand and footer components use them. */
.account-area { --bb-red: #c22d20; --bb-red-dark: #9f2015; --bb-red-soft: #fbeae7; --bb-ink: #241d19; --bb-muted: #6f6660; --bb-border: #ece4dd; --brand-primary: var(--bb-red); --brand-accent: var(--bb-red-soft); display: flex; flex-direction: column; min-height: 100vh; background: var(--color-canvas); }
.account-menu-icon { width: 1.35rem; height: 1.35rem; object-fit: contain; }
.account-area .landing-footer { margin-top: auto; }
.account-topbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem clamp(1rem, 4vw, 2.5rem); background: var(--color-surface); box-shadow: 0 .1rem .8rem #241d191a; }
.account-topbar .brand { margin: 0; color: var(--color-text); font-size: 1.2rem; font-weight: 800; }
.account-topbar .brand:hover { color: var(--color-text); }
.account-topbar .brand-mark { color: #fff; background: var(--brand-primary); box-shadow: none; }
.account-user { position: relative; }
.account-user-button { display: flex; align-items: center; gap: .65rem; padding: .35rem .5rem; border: 0; border-radius: 2rem; background: transparent; font: inherit; font-weight: 650; list-style: none; cursor: pointer; }
.account-user-button::-webkit-details-marker { display: none; }
.account-user-button:hover { background: var(--color-canvas); }
.account-user-button .bi-chevron-down { font-size: .8rem; color: var(--color-muted); transition: transform 150ms ease; }
.account-user[open] .bi-chevron-down { transform: rotate(180deg); }
.account-user-menu { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 9; display: grid; min-width: 14rem; padding: .5rem; border: 1px solid var(--color-border); border-radius: .75rem; background: var(--color-surface); box-shadow: 0 .75rem 2.5rem #241d1926; }
/* body-prefixed to out-specify the global submit-button styling */
body.account-area .account-user-menu a, body.account-area .account-user-menu button, body.account-area .account-user-menu button[type="submit"] { display: block; width: 100%; min-height: 0; padding: .6rem .75rem; border: 0; border-radius: .5rem; color: var(--color-text); background: transparent; font: inherit; font-weight: 550; text-align: left; text-decoration: none; box-shadow: none; cursor: pointer; }
body.account-area .account-user-menu a:hover, body.account-area .account-user-menu button:hover, body.account-area .account-user-menu button[type="submit"]:hover { color: var(--color-text); background: var(--color-canvas); filter: none; transform: none; box-shadow: none; }
.account-user-menu hr { margin: .4rem 0; border: 0; border-top: 1px solid var(--color-border); }
.account-user-menu form { margin: 0; }
.user-avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover; }
.user-avatar-initials { display: grid; place-items: center; color: var(--brand-primary); background: var(--brand-accent); font-size: .95rem; font-weight: 750; letter-spacing: .02em; }
.account-shell { display: grid; grid-template-columns: 20rem minmax(0, 1fr); gap: 1.5rem; align-items: start; width: min(90rem, 100%); margin-inline: auto; padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem; }
.account-topbar .landing-logo { height: 2.2rem; }
.account-sidebar { position: sticky; top: 5.5rem; display: grid; gap: 1rem; padding: 1.5rem 1.1rem; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 .3rem 1.4rem #241d190f; }
.account-menu { display: grid; gap: .2rem; }
.account-menu-title { margin: 0 0 .5rem; padding-inline: .8rem; font-size: .85rem; font-weight: 800; letter-spacing: .03em; }
.account-menu a { display: flex; align-items: center; gap: .8rem; padding: .7rem .8rem; border-radius: .55rem; color: var(--color-text); font-weight: 550; text-decoration: none; }
.account-menu a:hover { background: var(--color-canvas); }
.account-menu a[aria-current="page"] { color: var(--brand-primary); background: var(--brand-accent); font-weight: 700; }
.account-menu a i { font-size: 1.05rem; color: var(--color-muted); }
.account-menu a[aria-current="page"] i { color: var(--brand-primary); }
.account-menu-danger, .account-menu a.account-menu-danger i { color: var(--color-danger); }
.account-menu a.account-menu-danger:hover { background: #fff1f0; }
.account-sidebar-divider { margin: .1rem 0; border: 0; border-top: 1px solid var(--color-border); }
.account-apps summary { display: flex; align-items: center; justify-content: space-between; padding: .2rem .8rem .7rem; font-size: .85rem; font-weight: 800; letter-spacing: .03em; list-style: none; cursor: pointer; }
.account-apps summary::-webkit-details-marker { display: none; }
.account-apps summary i { font-size: .8rem; color: var(--color-muted); transition: transform 150ms ease; }
.account-apps:not([open]) summary i { transform: rotate(180deg); }
.account-contact-card { display: grid; gap: .35rem; margin-top: .5rem; padding: 1.1rem; border-radius: .75rem; background: var(--brand-accent); font-size: var(--text-sm); }
.account-contact-icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; color: var(--brand-primary); background: var(--color-surface); font-size: 1.15rem; }
.account-contact-card p { margin: .25rem 0; color: var(--color-muted); }
.account-contact-card p strong { color: var(--color-text); }
.account-contact-card a { font-weight: 700; text-decoration: none; }
.account-content { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 .3rem 1.4rem #241d190f; }
.account-page-title { margin: 0 0 .4rem; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.account-page-title-danger { color: var(--color-danger); }
.account-page-intro { margin: 0 0 1.5rem; color: var(--color-muted); }
.account-wizard-notice { display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.5rem;padding:1rem 1.2rem;border-left:.35rem solid var(--brand-primary);border-radius:.65rem;background:var(--brand-accent);font-weight:650 }
.account-wizard-notice a { color:var(--brand-primary);font-weight:800 }
.account-wizard-notice form { margin:0 }
body.account-area .account-wizard-notice button { min-width:2rem;min-height:2rem;padding:0;border:0;color:var(--color-text);background:transparent;font-size:1.7rem;line-height:1;box-shadow:none }
.account-profile-form { display:grid;gap:.8rem;max-width:32rem }
.account-profile-avatar { display:grid;place-items:center;width:7rem;height:7rem;border-radius:50%;overflow:hidden;background:var(--brand-accent);color:var(--brand-primary);font-size:2rem;font-weight:800 }
.account-profile-avatar img { width:100%;height:100%;object-fit:cover }
.image-transformer { display:grid;gap:.65rem;justify-items:start }
.image-transformer-hint { margin:0;color:var(--color-muted);font-size:var(--text-sm) }
.image-transformer-viewport { position:relative;width:min(16rem,100%);aspect-ratio:1;overflow:hidden;border-radius:.75rem;background:#241d19;touch-action:none;cursor:grab;user-select:none }
.image-transformer-viewport:active { cursor:grabbing }
.image-transformer-viewport img { position:absolute;top:0;left:0;max-width:none;pointer-events:none;-webkit-user-drag:none }
.image-transformer-mask { position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 100vmax #241d1999;pointer-events:none }
.image-transformer-zoom { display:flex;align-items:center;gap:.6rem;width:min(16rem,100%) }
.image-transformer-zoom input { flex:1;min-width:0 }
.landing-login .user-avatar { width:1.8rem;height:1.8rem }
.order-filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.5rem; }
.order-filter { padding: .55rem 1.1rem; border: 1px solid var(--color-border); border-radius: 2rem; color: var(--color-text); background: var(--color-surface); font-size: var(--text-sm); font-weight: 600; text-decoration: none; }
.order-filter:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.order-filter.is-active { border-color: var(--brand-primary); color: var(--brand-primary-contrast); background: var(--brand-primary); }
.order-filter.is-active:hover { color: var(--brand-primary-contrast); }
.order-empty-state { display: grid; place-items: center; min-height: 30rem; padding: clamp(2rem, 5vw, 4rem) 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); text-align: center; }
.order-empty-state-image { display: block; width: min(28rem, 90%); max-height: 18rem; margin-bottom: 1rem; object-fit: contain; }
.order-empty-state h2 { margin: 0 0 .45rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.order-empty-state p { max-width: 40rem; margin: 0; color: var(--color-muted); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.55; }
.order-list { display: grid; gap: .9rem; }
.order-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1.1rem; padding: .9rem 1.1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); background: var(--color-surface); text-decoration: none; }
.order-row:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--color-border)); box-shadow: 0 .3rem 1rem #241d1914; }
.order-row-image { width: 4.25rem; height: 4.25rem; border-radius: .75rem; object-fit: cover; }
.order-row-image-placeholder { display: grid; place-items: center; color: var(--brand-primary); background: var(--brand-accent); font-size: 1.5rem; font-weight: 800; }
.order-row-main { display: grid; gap: .1rem; }
.order-row-main strong { font-size: 1.05rem; }
.order-row-meta { color: var(--color-muted); font-size: var(--text-sm); }
.order-row-side { display: grid; justify-items: end; gap: .3rem; }
.order-row-total { font-size: 1.05rem; }
.order-status { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm); font-weight: 650; }
.order-status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.order-status--in_progress { color: var(--brand-primary); }
.order-status--completed { color: var(--color-success); }
.order-status--cancelled { color: var(--color-muted); }
.order-row-chevron { color: var(--color-muted); }
.order-load-more { margin: 1.5rem 0 0; text-align: center; }
.order-load-more-button { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; color: var(--brand-primary); font: inherit; font-weight: 700; cursor: pointer; }
.order-load-more-button:disabled { opacity: .5; cursor: wait; }
.account-danger-card { max-width: 42rem; padding: 1.5rem; border: 1px solid #efb8b3; border-radius: var(--radius-md); background: #fff8f7; }
.account-danger-card ul { margin: .5rem 0 1.25rem; padding-left: 1.2rem; color: var(--color-muted); }
.account-delete-confirm { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.25rem; }
.account-delete-confirm input { width: auto; margin-top: .3rem; }
@media (max-width: 62rem) {
.account-shell { grid-template-columns: 1fr; }
/* The sidebar collapses into one horizontally sliding strip of menu pills
(account menu, divider, apps) instead of a full-height stacked list. */
.account-sidebar { position: static; display: flex; align-items: center; gap: .35rem; padding: .5rem; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.account-sidebar::-webkit-scrollbar { display: none; }
.account-sidebar .account-menu { display: flex; flex: none; gap: .35rem; }
.account-menu a { flex: none; gap: .5rem; padding: .55rem .8rem; white-space: nowrap; }
.account-menu-title, .account-apps summary, .account-contact-card { display: none; }
.account-apps { flex: none; }
.account-sidebar-divider { flex: none; align-self: stretch; margin: .35rem .2rem; border-top: 0; border-left: 1px solid var(--color-border); }
}
@media (max-width: 42rem) {
.account-user-name { display: none; }
.order-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.order-row-chevron { display: none; }
.order-row-image { width: 3.25rem; height: 3.25rem; }
.order-empty-state { min-height: 24rem; padding-inline: 1rem; }
}
body.account-area .button-danger, body.account-area button[type="submit"].button-danger { border-color: var(--color-danger); background: var(--color-danger); box-shadow: 0 .25rem .65rem color-mix(in srgb, var(--color-danger) 18%, transparent); }
/* Shared settings components: check badge, settings cards and rows.
(components/_check_badge, _settings_card, _settings_row) */
.check-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .75rem; border: 1px solid transparent; border-radius: 2rem; font-size: .82rem; font-weight: 650; line-height: 1.2; white-space: nowrap; }
.check-badge svg { flex: none; width: .95em; height: .95em; fill: currentColor; }
.check-badge--success { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 30%, transparent); background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface)); }
.check-badge--info { color: var(--brand-primary); background: var(--brand-accent); }
.check-badge--neutral { color: var(--color-muted); background: var(--color-canvas); }
.check-badge--warning { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 35%, transparent); background: #fff4d6; }
.settings-card { margin-bottom: 1.25rem; padding: 1.4rem 1.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.settings-card-title { margin: 0 0 1rem; font-size: 1.2rem; }
.settings-rows .settings-row + .settings-row { border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent); }
.settings-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .9rem 0; }
.settings-rows .settings-row:first-child { padding-top: .15rem; }
.settings-rows .settings-row:last-child { padding-bottom: .15rem; }
.settings-row-icon { display: grid; flex: none; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; color: var(--color-text); background: var(--color-canvas); font-size: 1.25rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-border) 70%, transparent); }
.settings-row-icon svg { width: 1.35rem; height: 1.35rem; }
.settings-row-main { display: grid; flex: 1; gap: .1rem; min-width: 0; }
.settings-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-weight: 650; }
.settings-row-subtitle { color: var(--color-muted); font-size: var(--text-sm); }
.settings-row-side { display: flex; flex: none; align-items: center; gap: 1rem; margin-left: auto; }
.settings-row-side form { margin: 0; }
/* body-prefixed to out-specify the global submit-button styling */
.settings-row-action, body.account-area button[type="submit"].settings-row-action { display: inline-flex; align-items: center; gap: .35rem; min-height: 0; padding: 0; border: 0; border-radius: 0; color: var(--brand-primary); background: transparent; font: inherit; font-size: var(--text-sm); font-weight: 700; text-decoration: none; box-shadow: none; cursor: pointer; }
.settings-row-action:hover, body.account-area button[type="submit"].settings-row-action:hover { color: var(--brand-primary); background: transparent; text-decoration: underline; filter: none; transform: none; box-shadow: none; }
.settings-row-action .bi-chevron-right { font-size: .8rem; }
.settings-email { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; }
.settings-email-resend { margin-top: 1rem; }
.settings-hint { margin: .9rem 0 2rem; color: var(--color-muted); font-size: var(--text-sm); }
.settings-section-title { margin: 2rem 0 .9rem; font-size: 1.25rem; }
body.account-area button[type="submit"].settings-signout-all { min-height: 0; padding: .7rem 1.2rem; border: 1px solid var(--brand-primary); border-radius: .6rem; color: var(--brand-primary); background: var(--color-surface); font-weight: 650; box-shadow: none; }
body.account-area button[type="submit"].settings-signout-all:hover { color: var(--brand-primary); background: var(--brand-accent); filter: none; transform: none; box-shadow: none; }
@media (max-width: 42rem) {
.settings-row-side { flex-basis: 100%; justify-content: flex-start; margin-left: 3.9rem; }
.settings-row-side:empty { display: none; }
}
/* ---- Gastronomen-Onboarding-Wizard (/registrieren) -------------------------------- */
/* Uses the public bestellbei.de tokens (--bb-*) from body.landing above. */
body.onboarding{background:#f6f5f3}
.onboarding-header{position:sticky;top:0;z-index:10}
.onboarding-lang{display:inline-flex;align-items:center;gap:.45rem;margin-inline-start:auto;padding:.45rem .8rem;border:1px solid var(--bb-border);border-radius:2rem;background:#fff;color:var(--bb-ink)}
.onboarding-lang:focus-within{border-color:var(--bb-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-red) 18%,transparent)}
.onboarding-lang-globe{flex:none;width:1.05rem;height:1.05rem;color:var(--bb-muted)}
.onboarding-lang-caret{flex:none;width:.85rem;height:.85rem;color:var(--bb-muted);pointer-events:none}
.onboarding-lang select{appearance:none;padding:0;border:0;background:transparent;color:inherit;font:inherit;font-weight:600;cursor:pointer}
.onboarding-lang select:focus{outline:none}
.onboarding-help{display:inline-flex;align-items:center;gap:.55rem;color:var(--bb-ink);font-weight:550;text-decoration:none}
.onboarding-help:hover{color:var(--bb-red)}
.onboarding-help-mark{display:grid;place-items:center;width:1.5rem;height:1.5rem;border:1.5px solid currentColor;border-radius:50%;color:var(--bb-muted);font-size:.85rem;font-weight:700}
.onboarding-main{display:block;padding:clamp(1.25rem,4vw,3rem) 1.25rem clamp(2.5rem,6vw,4.5rem)}
.onboarding-main .flash{width:min(72rem,100%);margin-inline:auto}
.onboarding-layout{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:clamp(1.25rem,3vw,2rem);align-items:start;width:min(72rem,100%);margin-inline:auto}
.onboarding-card{padding:clamp(1.5rem,4vw,2.75rem);border:1px solid var(--bb-border);border-radius:1.1rem;background:#fff;box-shadow:0 .6rem 2.2rem #241d1910}
.wizard-steps{display:flex;align-items:center;margin:0 0 clamp(1.75rem,4vw,2.75rem);padding:0;list-style:none}
.wizard-step{display:flex;flex:1;align-items:center;min-width:0}
.wizard-step:last-child{flex:0 0 auto}
.wizard-step:not(:last-child)::after{content:"";flex:1;height:1px;margin-inline:clamp(.6rem,2vw,1.25rem);background:var(--bb-border)}
.wizard-step-inner{display:inline-flex;align-items:center;gap:.65rem;min-width:0;padding-bottom:.7rem;margin-bottom:-.7rem;border-bottom:3px solid transparent;white-space:nowrap}
.wizard-step.is-active .wizard-step-inner{border-bottom-color:var(--bb-red)}
.wizard-step-index{display:grid;flex:none;place-items:center;width:2.1rem;height:2.1rem;border:1.5px solid var(--bb-border);border-radius:50%;color:var(--bb-muted);background:#fff;font-weight:700}
.wizard-step-index svg{width:.95rem;height:.95rem}
.wizard-step.is-active .wizard-step-index{border-color:var(--bb-red);color:#fff;background:var(--bb-red);box-shadow:0 .3rem .9rem color-mix(in srgb,var(--bb-red) 35%,transparent)}
.wizard-step.is-done .wizard-step-index{border-color:color-mix(in srgb,var(--bb-red) 35%,#fff);color:var(--bb-red);background:var(--bb-red-soft)}
.wizard-step-label{overflow:hidden;color:var(--bb-muted);font-weight:650;text-overflow:ellipsis}
.wizard-step.is-active .wizard-step-label{color:var(--bb-red)}
.wizard-step.is-done .wizard-step-label{color:var(--bb-ink)}
.onboarding-heading{margin:0 0 .6rem;font-size:clamp(1.65rem,3.5vw,2.35rem);letter-spacing:-.015em;line-height:1.15;text-align:center}
.onboarding-intro{max-width:34rem;margin:0 auto clamp(1.5rem,4vw,2.25rem);color:var(--bb-muted);text-align:center}
.onboarding-field{gap:.45rem;font-weight:650;font-size:.95rem}
.onboarding-field input,.onboarding-field select{padding:.85rem 1rem;border:1.5px solid #ddd6d0;border-radius:.7rem;color:var(--bb-ink);font-weight:500}
/* Entered values must read clearly darker than the example placeholders (same tone as .auth-field). */
.onboarding-field input::placeholder{color:#aaa39c;font-weight:450}
.onboarding-field input:focus,.onboarding-field select:focus{outline:none;border-color:var(--bb-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-red) 18%,transparent)}
.place-search-grid{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);gap:1rem;align-items:start}
.place-search-grid .country-choice img{width:1.5rem;height:1.5rem}
.place-query-field{position:relative}
.place-query-field[hidden]{display:none}
.place-query-wrap{position:relative;display:block}
.place-query-icon{position:absolute;top:50%;left:1rem;width:1.15rem;height:1.15rem;color:var(--bb-muted);transform:translateY(-50%);pointer-events:none}
.place-query-wrap input{padding-left:2.9rem}
/* Place search results: the fallback custom properties keep the component usable on the
backend setup page, whose body does not define the bestellbei.de --bb-* palette. */
.place-results-panel,.place-confirm{--place-accent:var(--bb-red,#c22d20);--place-accent-dark:var(--bb-red-dark,#9f2015);--place-accent-soft:var(--bb-red-soft,#fbeae7);--place-border:var(--bb-border,#ece4dd);--place-muted:var(--bb-muted,#6f6660);--place-ink:var(--bb-ink,#241d19)}
.place-results-panel{position:absolute;top:100%;right:0;left:0;z-index:6;margin:.45rem 0 0;border:1px solid var(--place-border);border-radius:.9rem;background:#fff;box-shadow:0 1.1rem 2.8rem #241d1926;color:var(--place-ink);font-weight:450;text-align:start}
.place-results-panel [hidden],.place-results-panel[hidden]{display:none}
.place-results-count{margin:0;padding:.85rem 1.15rem .2rem;color:var(--place-muted);font-size:.9rem;font-weight:650}
.place-suggestions{margin:0;padding:.35rem;list-style:none;max-height:min(27rem,65vh);overflow-y:auto}
.place-suggestions:empty{display:none}
.place-suggestion{display:flex;align-items:center;gap:.9rem;min-height:2.75rem;padding:.7rem .8rem;border:1px solid transparent;border-radius:.75rem}
.place-suggestion+.place-suggestion{margin-top:.35rem}
.place-suggestion[role=option]{cursor:pointer}
.place-suggestion[role=option]:hover,.place-suggestion[role=option]:focus-visible{background:color-mix(in srgb,var(--place-accent-soft) 55%,#fff);border-color:color-mix(in srgb,var(--place-accent) 35%,transparent)}
.place-suggestion[role=option]:focus-visible{outline:2px solid var(--place-accent);outline-offset:-2px}
.place-suggestion[role=option]:active{background:var(--place-accent-soft)}
.place-suggestion[aria-selected=true]{background:var(--place-accent-soft);border-color:color-mix(in srgb,var(--place-accent) 45%,transparent)}
.place-photo{display:grid;flex:none;place-items:center;width:4.5rem;height:4.5rem;overflow:hidden;border-radius:.7rem}
.place-photo img{width:100%;height:100%;object-fit:cover}
.place-photo-fallback{background:var(--place-accent-soft,#fbeae7);color:var(--place-accent,#c22d20);font-size:1.05rem;font-weight:750;letter-spacing:.02em}
.place-main{display:grid;flex:1;min-width:0;gap:.2rem}
.place-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:1.02rem;font-weight:750;line-height:1.25}
.place-address{display:flex;align-items:flex-start;gap:.35rem;color:var(--place-muted,#6f6660);font-size:.92rem;line-height:1.35}
.place-address-pin{display:inline-flex;flex:none;margin-top:.1rem;color:var(--place-accent,#c22d20)}
.place-address-pin svg{width:1rem;height:1rem}
.place-address-text{min-width:0;overflow-wrap:anywhere}
.place-address-locality{color:var(--place-ink,#241d19);font-weight:700}
.place-secondary{color:var(--place-muted,#6f6660);font-size:.88rem}
.place-rating{color:var(--place-ink,#241d19);font-weight:650}
.place-rating-star{color:#f0a01c;font-weight:400}
.place-chevron{display:inline-flex;flex:none;margin-left:auto;color:var(--place-muted)}
.place-chevron svg{width:1.05rem;height:1.05rem}
.place-skeleton .place-photo,.place-skeleton-name,.place-skeleton-address{border-radius:.45rem;background:linear-gradient(100deg,#f0ebe6 40%,#faf6f2 50%,#f0ebe6 60%) 0 0/240% 100%;animation:place-skeleton-shimmer 1.2s linear infinite}
.place-skeleton .place-photo{border-radius:.7rem}
.place-skeleton-name{width:60%;height:1.05rem}
.place-skeleton-address{width:85%;height:.85rem}
@keyframes place-skeleton-shimmer{to{background-position:-140% 0}}
.place-results-state{display:grid;gap:.5rem;padding:1.1rem 1.15rem;text-align:center}
.place-results-empty,.place-results-error{margin:0;font-weight:650}
.place-results-empty-hint{margin:0;color:var(--place-muted);font-size:.92rem}
.place-retry{justify-self:center;min-height:2.75rem;padding:.55rem 1.15rem;border:1.5px solid var(--place-accent);border-radius:.65rem;background:#fff;color:var(--place-accent);font:inherit;font-weight:700;cursor:pointer}
.place-retry:hover,.place-retry:focus-visible{background:var(--place-accent-soft)}
.place-results-hint{display:flex;align-items:center;gap:.6rem;margin:0;padding:.8rem 1.15rem;border-top:1px solid var(--place-border);color:var(--place-muted);font-size:.9rem}
.place-results-hint svg{width:1.15rem;height:1.15rem;flex:none}
.place-confirm{width:min(28rem,calc(100% - 2rem));padding:1.5rem;border:1px solid var(--place-border);border-radius:1.1rem;color:var(--place-ink);box-shadow:0 1.4rem 3.5rem #241d1940}
.place-confirm::backdrop{background:#15100c66}
.place-confirm-heading{margin:0 0 1rem;font-size:1.35rem;line-height:1.2}
.place-confirm-card{display:flex;align-items:center;gap:.9rem;padding:.85rem;border:1px solid var(--place-border);border-radius:.9rem;background:var(--bb-cream,#faf6f2)}
.place-confirm-details{display:grid;gap:.25rem;min-width:0}
.place-confirm-name{font-size:1.1rem;line-height:1.3;overflow-wrap:anywhere}
.place-confirm-actions{display:grid;gap:.75rem;margin-top:1.25rem}
.place-confirm-accept{padding:.9rem 1.25rem;border:0;border-radius:.8rem;background:var(--place-accent);color:#fff;font:inherit;font-size:1rem;font-weight:750;cursor:pointer;box-shadow:0 .5rem 1.4rem color-mix(in srgb,var(--place-accent) 30%,transparent)}
.place-confirm-accept:hover,.place-confirm-accept:focus-visible{background:var(--place-accent-dark)}
.place-confirm-other{justify-self:center;color:var(--place-accent)}
@media (max-width:575.98px){
.place-photo{width:3.5rem;height:3.5rem}
.place-suggestion{gap:.7rem;padding:.6rem}
.place-secondary{display:block}
}
body.onboarding .place-status{min-height:1.4rem;margin:.6rem 0 0;color:var(--bb-muted);font-size:.9rem}
.manual-entry{margin:1rem 0 0}
.place-manual-hint{margin:1.1rem 0 1.5rem;color:var(--bb-muted);text-align:center}
.link-button{padding:0;border:0;background:none;color:var(--bb-red);font:inherit;font-weight:650;text-decoration:underline;cursor:pointer}
.link-button:hover{color:var(--bb-red-dark)}
body.onboarding a.onboarding-primary,body.onboarding button.onboarding-primary{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:1rem 1.5rem;border:0;border-radius:.8rem;color:#fff;background:var(--bb-red);font:inherit;font-size:1.05rem;font-weight:750;text-decoration:none;cursor:pointer;box-shadow:0 .5rem 1.4rem color-mix(in srgb,var(--bb-red) 30%,transparent)}
body.onboarding a.onboarding-primary:hover,body.onboarding button.onboarding-primary:hover:not(:disabled){background:var(--bb-red-dark)}
body.onboarding button.onboarding-primary:disabled{cursor:not-allowed;opacity:.5;box-shadow:none}
.onboarding-primary svg{width:1.2rem;height:1.2rem}
.onboarding-cancel{display:block;margin-top:1.1rem;color:var(--bb-red);font-weight:650;text-align:center}
.onboarding-notice{display:flex;align-items:center;gap:.8rem;margin:1.75rem 0 0;padding:.95rem 1.15rem;border-radius:.8rem;background:#f6f5f3;color:var(--bb-muted);font-size:.9rem}
.onboarding-notice svg{width:1.35rem;height:1.35rem;flex:none;fill:var(--bb-red)}
.confirm-list{display:grid;gap:0;margin:0 0 2rem;border:1px solid var(--bb-border);border-radius:.9rem}
.confirm-list>div{display:grid;grid-template-columns:minmax(8rem,12rem) minmax(0,1fr);gap:1rem;padding:.85rem 1.15rem}
.confirm-list>div+div{border-top:1px solid var(--bb-border)}
.confirm-list dt{color:var(--bb-muted);font-weight:550}
.confirm-list dd{margin:0;font-weight:650;overflow-wrap:anywhere}
.confirm-correct{margin:-1.4rem 0 1.6rem;text-align:right}
.confirm-country-icon{width:1.25rem;height:1.25rem;margin-right:.45rem;vertical-align:-.2rem}
.rating-star{color:#f0a01c}
.onboarding-aside{display:grid;gap:1.25rem}
.onboarding-aside-card{padding:1.5rem;border:1px solid var(--bb-border);border-radius:1.1rem;background:#fff;box-shadow:0 .6rem 2.2rem #241d1910}
.onboarding-aside-card h2{margin:0 0 1.25rem;font-size:1.2rem}
.how-steps{display:grid;gap:0;margin:0;padding:0;list-style:none}
.how-step{display:flex;gap:1rem;padding:1rem 0}
.how-step:first-child{padding-top:0}
.how-step:not(:last-child){border-bottom:1px solid var(--bb-border)}
.how-step-icon{position:relative;display:grid;flex:none;place-items:center;width:3rem;height:3rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.how-step-icon svg{width:1.35rem;height:1.35rem}
.how-step-icon b{position:absolute;top:-.3rem;right:-.3rem;display:grid;place-items:center;width:1.3rem;height:1.3rem;border:2px solid #fff;border-radius:50%;color:#fff;background:var(--bb-red);font-size:.7rem}
.how-step-copy{display:grid;gap:.15rem;color:var(--bb-muted);font-size:.92rem}
.how-step-copy strong{color:var(--bb-ink);font-size:1rem}
.onboarding-trust{display:flex;align-items:center;gap:.9rem;margin:1.25rem 0 0;padding:1rem 1.15rem;border-radius:.8rem;background:#f6f5f3}
.onboarding-trust svg{width:1.6rem;height:1.6rem;flex:none;color:var(--bb-red)}
.onboarding-trust span{display:grid;gap:.1rem;color:var(--bb-muted);font-size:.9rem}
.onboarding-trust strong{color:var(--bb-ink);font-size:.98rem}
/* Step 0: language selection with Luigi */
.onboarding-eyebrow{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 1.1rem;padding:.45rem .95rem;border:1px solid var(--bb-border);border-radius:2rem;background:#f6f5f3;color:var(--bb-ink);font-size:.9rem;font-weight:600}
.onboarding-eyebrow svg{width:1rem;height:1rem;fill:var(--bb-red)}
.onboarding-language .onboarding-heading{text-align:start}
.onboarding-language .onboarding-intro{max-width:none;margin-inline:0;text-align:start}
.language-step-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(9rem,22vw,13rem);gap:clamp(1.25rem,4vw,2.5rem);align-items:center;margin-bottom:clamp(1.5rem,4vw,2.25rem)}
.language-step-luigi img{width:100%;height:auto}
.language-choice{position:relative;display:block}
.language-choice-globe{position:absolute;top:50%;inset-inline-start:1rem;width:1.15rem;height:1.15rem;color:var(--bb-muted);transform:translateY(-50%);pointer-events:none}
.language-choice select{width:100%;padding-inline-start:2.9rem}
.language-step-hint{margin:.6rem 0 0;color:var(--bb-muted);font-size:.9rem;font-weight:450}
@media(max-width:62rem){.onboarding-layout{grid-template-columns:minmax(0,1fr)}.onboarding-aside{max-width:34rem}}
@media(max-width:44rem){
.place-search-grid{grid-template-columns:minmax(0,1fr)}
.language-step-grid{grid-template-columns:minmax(0,1fr)}
.language-step-luigi{display:none}
.onboarding-lang{order:1;margin-inline-start:0}
.wizard-step:not(.is-active) .wizard-step-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wizard-step:not(:last-child)::after{margin-inline:.5rem}
.confirm-list>div{grid-template-columns:minmax(0,1fr);gap:.15rem}
}
/* Boarding: phase-1 success interstitial */
.boarding-success{--bb-green:#1d8a43;width:min(72rem,100%);margin-inline:auto}
.boarding-success-badge{display:flex;align-items:center;gap:clamp(.9rem,2.5vw,1.5rem);margin:0 0 clamp(1.5rem,4vw,2.5rem)}
.boarding-success-badge::before,.boarding-success-badge::after{content:"";flex:1;height:1px;background:var(--bb-border)}
.boarding-success-badge-pill{display:inline-flex;align-items:center;gap:.7rem;padding:.55rem 1.1rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff;box-shadow:0 .35rem 1.1rem #241d1914}
.boarding-success-badge-pill>svg{width:1.65rem;height:1.65rem;flex:none}
.boarding-success-badge-pill>span{display:grid;gap:.05rem;color:var(--bb-muted);font-size:.85rem;line-height:1.25}
.boarding-success-badge-pill strong{color:var(--bb-green);font-size:.98rem}
.boarding-success-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,28vw,22rem);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.boarding-success-burst{display:flex;justify-content:center;margin:0 0 clamp(1rem,3vw,1.6rem)}
.boarding-success-burst svg{width:clamp(6.5rem,14vw,8.5rem);height:auto}
.boarding-success-main .onboarding-intro{margin-bottom:0}
.boarding-success-pause{margin:clamp(1.1rem,3vw,1.6rem) auto;color:var(--bb-muted);font-size:.95rem;text-align:center}
.boarding-success-card{margin:0 0 clamp(1.5rem,4vw,2rem);padding:1.25rem 1.4rem;border:1px solid var(--bb-border);border-radius:1rem;background:#fff}
.boarding-success-card-head{display:flex;align-items:center;gap:1.1rem}
.boarding-success-card-icon{display:grid;flex:none;place-items:center;width:4rem;height:4rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.boarding-success-card-icon svg{width:2.1rem;height:2.1rem}
.boarding-success-card-title h2{margin:0 0 .15rem;font-size:1.3rem}
.boarding-success-address{margin:0;color:var(--bb-muted);line-height:1.45}
.boarding-success-checks{display:grid;gap:.6rem;margin:1.15rem 0 0;padding:1.15rem 0 0;border-top:1px solid var(--bb-border);list-style:none}
.boarding-success-checks li{display:flex;align-items:center;gap:.6rem;font-weight:550}
.boarding-success-checks svg{width:1.3rem;height:1.3rem;flex:none}
.boarding-success-side{display:grid;gap:1rem}
.boarding-success-luigi{display:grid;justify-items:center;gap:.7rem}
.boarding-success-luigi img{width:clamp(9rem,17vw,11.5rem);height:auto}
.boarding-success-bubble{position:relative;margin:0;padding:.75rem 1.15rem;border:1.5px solid var(--bb-ink);border-radius:1.1rem;background:#fff;font-weight:650;text-align:center}
.boarding-success-bubble::after{content:"";position:absolute;bottom:-.5rem;inset-inline-start:2.2rem;width:.85rem;height:.85rem;border-right:1.5px solid var(--bb-ink);border-bottom:1.5px solid var(--bb-ink);background:#fff;transform:rotate(45deg)}
.boarding-success-next{padding:1.4rem;border:1px solid var(--bb-border);border-radius:1.1rem;background:#fff;box-shadow:0 .6rem 2.2rem #241d1910}
.boarding-success-next h2{margin:0 0 .5rem;font-size:1.2rem}
/* The shared phase-2 outline: waiting rows separated by hairlines, the active step as a highlighted card. */
.boarding-steps{display:grid;margin:0;padding:0;list-style:none}
.boarding-step{display:flex;align-items:center;gap:.75rem;padding:.85rem .2rem}
.boarding-step:not(:last-child):not(.is-active){border-bottom:1px solid var(--bb-border)}
.boarding-step.is-active{margin:.2rem 0;padding:.85rem .8rem;border:1.5px solid var(--bb-red);border-radius:.9rem;background:color-mix(in srgb,var(--bb-red-soft) 55%,#fff)}
.boarding-step-icon{display:grid;flex:none;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;color:var(--bb-ink);background:#f6f5f3}
.boarding-step-icon svg{width:1.3rem;height:1.3rem}
.boarding-step-index{display:grid;flex:none;place-items:center;width:1.55rem;height:1.55rem;border:1.5px solid var(--bb-border);border-radius:50%;background:#fff;color:var(--bb-muted);font-size:.8rem;font-weight:700}
.boarding-step-label{flex:1;min-width:0;color:var(--bb-ink);font-weight:650}
.boarding-step-chevron{flex:none;width:1rem;height:1rem;color:var(--bb-muted)}
.boarding-step.is-active .boarding-step-icon{color:var(--bb-red);background:#fff}
.boarding-step.is-active .boarding-step-index{border-color:var(--bb-red);color:#fff;background:var(--bb-red)}
.boarding-step.is-active .boarding-step-label,.boarding-step.is-active .boarding-step-chevron{color:var(--bb-red)}
[dir=rtl] .boarding-step-chevron{transform:scaleX(-1)}
/* Boarding wizard steps in the phase-2 chrome (currently the language selection) */
.boarding-wizard-layout{display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,26vw,23rem);gap:clamp(1.25rem,3vw,2rem);align-items:start;width:min(72rem,100%);margin-inline:auto}
.boarding-wizard-aside{display:grid;gap:1.25rem}
.boarding-progress{display:flex;align-items:center;gap:1.1rem;margin:0 0 clamp(1.5rem,4vw,2.25rem)}
.boarding-progress-step{flex:none;color:var(--bb-muted);font-weight:600}
.boarding-progress-track{flex:1;max-width:22rem;height:.45rem;overflow:hidden;border-radius:1rem;background:#eee9e4}
.boarding-progress-fill{display:block;height:100%;border-radius:inherit;background:var(--bb-red)}
.boarding-wizard-heading{margin:0 0 .7rem;font-size:clamp(1.65rem,3.5vw,2.35rem);letter-spacing:-.015em;line-height:1.15}
.boarding-wizard-intro{max-width:42rem;margin:0 0 1.1rem;color:var(--bb-muted)}
.boarding-multi-hint{display:inline-flex;align-items:center;gap:.5rem;margin:0 0 clamp(1.25rem,3vw,1.75rem);padding:.45rem .9rem;border-radius:2rem;background:var(--bb-red-soft);color:var(--bb-red);font-size:.9rem;font-weight:650}
.boarding-multi-hint svg{width:1.05rem;height:1.05rem;flex:none}
.boarding-default-locale{max-width:25rem;margin-bottom:clamp(1.25rem,3vw,1.75rem)}
body.onboarding .boarding-language-tiles{margin:0;padding:0;border:0;background:transparent;box-shadow:none}
.boarding-language-tiles legend{margin-bottom:.65rem;padding:0;font-weight:650;font-size:.95rem}
.boarding-language-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.9rem}
.boarding-language-tile{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1.5px solid #ddd6d0;border-radius:.8rem;background:#fff;font-weight:650;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.boarding-language-tile:hover{border-color:color-mix(in srgb,var(--bb-red) 45%,#ddd6d0)}
.boarding-language-tile:focus-within{border-color:var(--bb-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-red) 18%,transparent)}
.boarding-language-tile:has(input:checked){border-color:var(--bb-red);background:color-mix(in srgb,var(--bb-red-soft) 55%,#fff)}
.boarding-language-flag{width:1.75rem;height:1.75rem;flex:none;border-radius:50%;object-fit:cover}
.boarding-language-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.boarding-language-tile input{flex:none;width:1.35rem;height:1.35rem;margin:0;accent-color:var(--bb-red);cursor:pointer}
.boarding-ai-note{margin-block:clamp(1.5rem,4vw,2rem) 0}
.boarding-wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:clamp(1.5rem,4vw,2rem);padding-top:clamp(1.25rem,3vw,1.75rem);border-top:1px solid var(--bb-border)}
.boarding-back{display:inline-flex;align-items:center;gap:.55rem;padding:.6rem .2rem;border:0;background:none;color:var(--bb-red);font:inherit;font-weight:700;cursor:pointer}
.boarding-back:hover{color:var(--bb-red-dark)}
.boarding-back svg{width:1.2rem;height:1.2rem}
[dir=rtl] .boarding-back svg{transform:scaleX(-1)}
body.onboarding .boarding-wizard-actions .onboarding-primary{width:auto;padding-inline:2.25rem}
.boarding-tip{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.9rem;align-items:center;padding:1.15rem 1.25rem;border-radius:1.1rem;background:var(--bb-red-soft)}
.boarding-tip p{margin:0;color:var(--bb-ink);font-weight:550;line-height:1.5}
.boarding-tip-copy{display:grid;gap:.3rem;color:var(--bb-ink);font-weight:550;line-height:1.5}
.boarding-tip-copy strong{font-size:1.05rem}
.boarding-tip img{width:clamp(6rem,9vw,7.5rem);height:auto}
/* Delivery step: large fulfillment cards plus the "no online orders" row */
.boarding-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-bottom:1.25rem}
.boarding-choice{position:relative;display:grid;gap:.4rem;justify-items:start;padding:1.5rem;border:1.5px solid #ddd6d0;border-radius:1rem;background:#fff;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.boarding-choice:hover{border-color:color-mix(in srgb,var(--bb-red) 45%,#ddd6d0)}
.boarding-choice:focus-within{border-color:var(--bb-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-red) 18%,transparent)}
.boarding-choice:has(input:checked){border-color:var(--bb-red);background:color-mix(in srgb,var(--bb-red-soft) 55%,#fff)}
.boarding-choice input{position:absolute;top:1.25rem;inset-inline-end:1.25rem;width:1.4rem;height:1.4rem;margin:0;accent-color:var(--bb-red);cursor:pointer}
.boarding-choice-icon{display:grid;place-items:center;width:4.25rem;height:4.25rem;margin-bottom:.6rem;border-radius:50%;color:var(--bb-red);background:var(--bb-red-soft)}
.boarding-choice-icon svg{width:2.2rem;height:2.2rem}
.boarding-choice-icon--muted{color:var(--bb-ink);background:#f6f5f3}
.boarding-choice-title{font-size:1.3rem;font-weight:750}
.boarding-choice-text{color:var(--bb-muted)}
.boarding-choice--row{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.4rem}
.boarding-choice--row .boarding-choice-icon{flex:none;width:3.5rem;height:3.5rem;margin:0}
.boarding-choice--row .boarding-choice-icon svg{width:1.8rem;height:1.8rem}
.boarding-choice-copy{display:grid;flex:1;min-width:0;gap:.15rem;padding-inline-end:2.5rem}
.boarding-choice--row .boarding-choice-title{font-size:1.05rem}
.boarding-choice--row input{top:50%;transform:translateY(-50%)}
/* Payment step: compact method cards, context line, online note behind :has gate */
.boarding-choice-grid--payment{grid-template-columns:repeat(3,minmax(0,1fr))}
.boarding-choice--compact{gap:.3rem;padding:1.25rem}
.boarding-choice--compact .boarding-choice-icon{width:3.4rem;height:3.4rem;margin-bottom:.4rem}
.boarding-choice--compact .boarding-choice-icon svg{width:1.7rem;height:1.7rem}
.boarding-choice--compact .boarding-choice-title{font-size:1.1rem}
.boarding-choice--compact .boarding-choice-text{font-size:.92rem}
.boarding-choice--compact input{top:1rem;inset-inline-end:1rem}
.boarding-context{display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.25rem;padding:.6rem 1rem;border-radius:.7rem;background:#f6f5f3;color:var(--bb-muted);font-size:.92rem}
.boarding-context svg{width:1.15rem;height:1.15rem;flex:none}
.boarding-payment:not(:has([data-pay-online]:checked)) .boarding-online-note{display:none}
.boarding-online-note{margin-top:1.25rem}
@media(max-width:62rem){.boarding-choice-grid--payment{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:44rem){.boarding-choice-grid--payment{grid-template-columns:minmax(0,1fr)}}
/* Terms step: static condition cards (no inputs), the AGB document link and the
acceptance fine print above the primary action. */
.boarding-terms-list{display:grid;gap:1rem;margin:0 0 clamp(1.5rem,4vw,2rem);padding:0;list-style:none}
.boarding-terms-item{display:flex;align-items:center;gap:1.1rem;padding:1.15rem 1.4rem;border:1.5px solid #ddd6d0;border-radius:1rem;background:#fff}
.boarding-terms-item .boarding-choice-icon{flex:none;width:3.5rem;height:3.5rem;margin:0}
.boarding-terms-item .boarding-choice-icon svg{width:1.8rem;height:1.8rem}
.boarding-terms-copy{display:grid;gap:.15rem;min-width:0}
.boarding-terms-title{font-size:1.05rem;font-weight:750}
.boarding-terms-text{color:var(--bb-muted);font-size:.95rem}
.boarding-terms-subheading{margin:0 0 .3rem;font-size:1.2rem}
.boarding-terms-note{margin:0 0 1rem;color:var(--bb-muted);font-size:.95rem}
.boarding-terms-doc{display:flex;align-items:center;gap:.9rem;padding:1.05rem 1.3rem;border:1.5px solid #ddd6d0;border-radius:1rem;background:#fff;color:inherit;text-decoration:none;font-weight:650;transition:border-color .15s ease}
.boarding-terms-doc:hover,.boarding-terms-doc:focus-visible{border-color:color-mix(in srgb,var(--bb-red) 45%,#ddd6d0)}
.boarding-terms-doc>svg:first-child{width:1.45rem;height:1.45rem;flex:none;color:var(--bb-red)}
.boarding-terms-doc-external{width:1.15rem;height:1.15rem;flex:none;margin-inline-start:auto;color:var(--bb-muted)}
.boarding-terms-consent{margin:.75rem 0 0;color:var(--bb-muted);font-size:.9rem}
/* Menu step: method cards opening the embedded importer panels. The embedded panels
reuse the backend importer markup, so its brand variables are remapped to the
bestellbei.de palette inside this scope. */
body.onboarding .boarding-menu{--brand-primary:var(--bb-red);--brand-accent:var(--bb-red-soft);--color-border:var(--bb-border);--color-muted:var(--bb-muted)}
.boarding-choice-grid--menu{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:.25rem}
.boarding-choice--menu{display:flex;align-items:flex-start;gap:1rem;padding:1.25rem;padding-inline-end:3.1rem}
.boarding-choice--menu .boarding-choice-icon{flex:none;width:3.4rem;height:3.4rem;margin:0}
.boarding-choice--menu .boarding-choice-icon svg{width:1.7rem;height:1.7rem}
.boarding-choice-copy--menu{padding-inline-end:0}
.boarding-choice--menu .boarding-choice-title{font-size:1.1rem}
.boarding-choice--menu .boarding-choice-text{font-size:.92rem}
.boarding-choice--menu input{top:1rem;inset-inline-end:1rem}
.boarding-choice-note{display:inline-flex;align-items:center;gap:.4rem;margin-top:.3rem;color:var(--bb-red);font-size:.85rem;font-weight:650}
.boarding-choice-note svg{width:1rem;height:1rem;flex:none}
.boarding-choice-price{margin-top:.3rem;color:var(--bb-red);font-size:1.05rem;font-weight:750}
body.onboarding .boarding-import-panel{margin:1.25rem 0 0;padding:1.5rem;border:1.5px solid #ddd6d0;border-radius:1rem;background:#fff}
body.onboarding .boarding-import-panel h2{margin:0 0 .35rem;font-size:1.25rem}
body.onboarding .boarding-import-panel h3{font-size:1.05rem}
body.onboarding .boarding-import-panel .field{margin:.75rem 0}
body.onboarding .boarding-import-panel a.button:not(.button-secondary){color:#fff}
body.onboarding .boarding-import-panel textarea{width:100%;padding:.85rem 1rem;border:1.5px solid #ddd6d0;border-radius:.7rem;font:inherit;font-weight:450}
body.onboarding .boarding-import-panel fieldset{margin:0 0 .75rem;padding:0;border:0;background:transparent;box-shadow:none}
body.onboarding .boarding-import-panel legend{margin-bottom:.4rem;padding:0;font-weight:650}
body.onboarding .boarding-import-panel fieldset label{display:inline-flex;align-items:center;gap:.45rem;margin-inline-end:1.25rem}
.boarding-menu-continue{margin-top:1.5rem}
.boarding-menu-continue .boarding-info{margin-top:1rem}
@media(max-width:44rem){.boarding-choice-grid--menu{grid-template-columns:minmax(0,1fr)}}
/* Fulfillment sub-screens (delivery area/pricing/time/schedule, pickup) */
body.onboarding [hidden]{display:none!important}
.boarding-subprogress{flex-wrap:wrap}
.boarding-subprogress-title{font-size:1.05rem}
.boarding-subprogress-step{flex:none;padding:.3rem .8rem;border-radius:2rem;background:var(--bb-red-soft);color:var(--bb-red);font-size:.85rem;font-weight:650}
.boarding-step-done{flex:none;width:1.35rem;height:1.35rem}
.boarding-section-heading{margin:0 0 .7rem;font-weight:650}
.boarding-pill-group{display:flex;flex-wrap:wrap;gap:.9rem;margin:0 0 1.25rem;padding:0;border:0}
.boarding-pill-group legend{margin-bottom:.7rem;padding:0;font-weight:650;font-size:.95rem}
body.onboarding fieldset.boarding-pill-group{margin:0 0 1.25rem;padding:0;border:0;background:transparent;box-shadow:none}
.boarding-pill{position:relative;display:inline-flex;align-items:center;gap:.55rem;padding:.85rem 1.35rem;border:1.5px solid #ddd6d0;border-radius:.8rem;background:#fff;font-weight:700;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.boarding-pill:hover{border-color:color-mix(in srgb,var(--bb-red) 45%,#ddd6d0)}
.boarding-pill:focus-within{border-color:var(--bb-red);box-shadow:0 0 0 3px color-mix(in srgb,var(--bb-red) 18%,transparent)}
.boarding-pill:has(input:checked){border-color:var(--bb-red);background:color-mix(in srgb,var(--bb-red-soft) 55%,#fff);color:var(--bb-red)}
.boarding-pill input{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.boarding-pill svg{width:1.15rem;height:1.15rem;flex:none}
.boarding-pill:has(input:checked)::after{content:"";width:1.15rem;height:1.15rem;flex:none;border-radius:50%;background:var(--bb-red) center/62% no-repeat url("data:image/svg+xml;utf8,")}
.boarding-pill-group--small .boarding-pill{padding:.6rem 1rem;font-weight:650}
.boarding-pill-group--modes .boarding-pill{font-weight:650}
/* Area screen: the custom modes only open behind "Individuell". */
.boarding-area:not(:has([data-radius-preset][value="custom"]:checked)) .boarding-area-custom{display:none}
.boarding-area-custom{margin:0 0 1.25rem;padding:1.25rem;border:1.5px solid #ddd6d0;border-radius:1rem;background:#fff}
body.onboarding .boarding-area-custom .radius-entry{max-width:16rem;margin:.5rem 0 0}
body.onboarding .boarding-area-custom .postal-entry{margin:.5rem 0 0}
body.onboarding .boarding-area-custom .polygon-controls{margin-top:.5rem}
.boarding-map-card{margin:0 0 1.25rem;overflow:hidden;border:1px solid var(--bb-border);border-radius:1rem;background:#fff}
.boarding-map-address{display:flex;align-items:center;gap:.55rem;margin:0;padding:.85rem 1.15rem;border-bottom:1px solid var(--bb-border);color:var(--bb-muted)}
.boarding-map-address svg{width:1.15rem;height:1.15rem;flex:none;color:var(--bb-red)}
.boarding-map-address strong{color:var(--bb-ink)}
body.onboarding .boarding-map{display:grid;place-items:center;height:min(24rem,48vh);min-height:16rem;margin:0;border:0;border-radius:0;background:#f6f5f3}
.boarding-map-fallback{color:var(--bb-muted);font-size:.9rem}
.boarding-pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.boarding-pricing-grid .field small{color:var(--bb-muted);font-weight:450}
.boarding-optional{color:var(--bb-muted);font-style:normal;font-weight:450;font-size:.85rem}
body.onboarding .money-input input{border-radius:.7rem 0 0 .7rem!important}
body.onboarding .money-input span{border-color:#ddd6d0;background:#f6f5f3}
/* Time screens: the custom range only opens behind "Individuell". */
.boarding-minutes:not(:has([name="timeChoice"][value="custom"]:checked)) .boarding-minutes-custom{display:none}
.boarding-minutes-custom{display:grid;grid-template-columns:repeat(2,minmax(0,14rem));gap:1.25rem;margin:0 0 1.25rem}
.boarding-info{display:flex;align-items:center;gap:.7rem;margin:0 0 .5rem;padding:.9rem 1.1rem;border-radius:.8rem;background:var(--bb-red-soft);color:var(--bb-ink);font-size:.92rem}
.boarding-info svg{width:1.25rem;height:1.25rem;flex:none;color:var(--bb-red)}
/* Schedule screens: opening-hours default with read-out, editor behind the toggle. */
.boarding-toggle{display:flex;align-items:flex-start;gap:.8rem;margin:0 0 1rem;padding:1rem 1.15rem;border:1.5px solid #ddd6d0;border-radius:.9rem;background:#fff;cursor:pointer}
.boarding-toggle:has(input:checked){border-color:var(--bb-red);background:color-mix(in srgb,var(--bb-red-soft) 40%,#fff)}
.boarding-toggle input{flex:none;width:1.3rem;height:1.3rem;margin-top:.15rem;accent-color:var(--bb-red);cursor:pointer}
.boarding-toggle-copy{display:grid;gap:.15rem;color:var(--bb-muted)}
.boarding-toggle-copy strong{color:var(--bb-ink)}
.boarding-schedule form,.boarding-minutes form{min-width:0}
form:not(:has([name="useOpeningHours"]:checked)) .boarding-schedule-summary{display:none}
form:has([name="useOpeningHours"]:checked) .boarding-schedule-editor{display:none}
.boarding-schedule-summary{margin:0 0 1.25rem;padding:1rem 1.25rem;border:1px solid var(--bb-border);border-radius:.9rem;background:#fff}
.boarding-hours-summary{display:grid;gap:.15rem;margin:0}
.boarding-hours-summary>div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;padding:.3rem 0}
.boarding-hours-summary dt{color:var(--bb-muted);font-weight:550}
.boarding-hours-summary dd{margin:0;font-weight:650}
.boarding-schedule-editor{margin:0 0 1.25rem}
.boarding-preorder{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--bb-border)}
.boarding-preorder:not(:has([name="preorderEnabled"]:checked)) .boarding-preorder-horizon{display:none}
.boarding-preorder-horizon{padding:0 .2rem}
.boarding-preorder-question{margin:.25rem 0 .7rem;font-weight:650}
.boarding-preorder-horizon:not(:has([name="preorderChoice"][value="custom"]:checked)) .boarding-preorder-days{display:none}
.boarding-preorder-days{max-width:14rem}
@media(max-width:44rem){
.boarding-pricing-grid{grid-template-columns:minmax(0,1fr)}
.boarding-minutes-custom{grid-template-columns:minmax(0,1fr)}
.boarding-hours-summary>div{grid-template-columns:minmax(0,1fr);gap:.1rem}
}
@media(max-width:62rem){
.boarding-wizard-layout{grid-template-columns:minmax(0,1fr)}
.boarding-wizard-aside{max-width:34rem;width:100%;margin-inline:auto}
}
@media(max-width:44rem){
.boarding-wizard-actions{flex-direction:column-reverse;align-items:stretch}
.boarding-back{justify-content:center}
body.onboarding .boarding-wizard-actions .onboarding-primary{width:100%}
.boarding-choice-grid{grid-template-columns:minmax(0,1fr)}
.boarding-choice--row{flex-wrap:wrap}
}
@media(max-width:62rem){
.boarding-success-grid{grid-template-columns:minmax(0,1fr)}
.boarding-success-side{max-width:34rem;width:100%;margin-inline:auto}
.boarding-success-luigi{grid-template-columns:auto minmax(0,1fr);align-items:center}
.boarding-success-luigi img{order:-1;width:7.5rem}
.boarding-success-bubble::after{bottom:auto;top:calc(50% - .425rem);inset-inline-start:-.48rem;transform:rotate(135deg)}
}
/* Referrer dashboard (customer account) ---------------------------------------------- */
.account-content--plain { padding: 0; background: transparent; box-shadow: none; }
.referral-share-options img { width: 1.7rem; height: 1.7rem; }
.table-scroll { overflow-x: auto; }
.referral-dash { display: grid; gap: 1.25rem; }
.referral-dash-header { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: space-between; gap: 1.25rem; }
.referral-dash-heading h1 { margin: .2rem 0 .3rem; font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.015em; }
.referral-dash-heading p { margin: 0; color: var(--color-muted); }
.referral-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(9.5rem, 1fr)); gap: .9rem; margin: 0; padding: 0; list-style: none; }
.referral-dash-stats li { display: grid; align-content: start; gap: .15rem; padding: .9rem 1.1rem; border: 1px solid var(--bb-border); border-radius: .9rem; background: var(--color-surface); box-shadow: 0 .3rem 1rem #241d190a; }
.referral-dash-stat-label { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 650; }
.referral-dash-stat-label img { width: 1.5rem; height: 1.5rem; }
.referral-dash-stats strong { font-size: 1.55rem; letter-spacing: -.01em; }
.referral-dash-stats small { color: var(--color-muted); font-size: .78rem; }
.referral-dash-card { padding: clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--bb-border); border-radius: 1rem; background: var(--color-surface); box-shadow: 0 .3rem 1.4rem #241d190f; }
.referral-dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; }
.referral-dash-empty { display: grid; gap: .75rem; justify-items: start; }
.referral-dash-share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; }
.referral-dash-share-copy h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font-size: 1.35rem; }
.referral-dash-heart { width: 1.9rem; height: 1.9rem; }
.referral-dash-share-copy > p { margin: 0 0 1.1rem; color: var(--color-muted); }
.referral-dash-link { display: flex; align-items: center; justify-content: space-between; gap: .85rem; margin-bottom: 1.1rem; padding: .95rem 1.15rem; border: 1px solid var(--bb-border); border-radius: .85rem; background: var(--color-surface); }
.referral-dash-link-url { min-width: 0; overflow-wrap: anywhere; color: var(--bb-red); font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800; }
.referral-dash-link img { flex: none; width: 1.5rem; height: 1.5rem; }
.referral-dash-share-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.referral-dash-share-visual { display: grid; align-items: end; }
.referral-dash-share-visual img { width: clamp(7rem, 12vw, 11rem); height: auto; }
/* body-prefixed to out-specify the global submit-button styling */
.referral-dash-button-primary, body.account-area button[type="submit"].referral-dash-button-primary { display: inline-flex; align-items: center; gap: .6rem; min-height: 0; padding: .85rem 1.4rem; border: 0; border-radius: .75rem; color: #fff; background: var(--bb-red); font: inherit; font-weight: 700; text-decoration: none; box-shadow: none; cursor: pointer; list-style: none; }
.referral-dash-button-primary:hover, body.account-area button[type="submit"].referral-dash-button-primary:hover { color: #fff; background: var(--bb-red-dark); filter: none; transform: none; box-shadow: none; }
summary.referral-dash-button-primary::-webkit-details-marker { display: none; }
.referral-dash-button-primary svg { width: 1.2rem; height: 1.2rem; }
.referral-dash-chevron { transition: transform 150ms ease; }
.referral-dash-share-dropdown[open] .referral-dash-chevron { transform: rotate(180deg); }
.referral-dash-button-secondary { display: inline-flex; align-items: center; gap: .6rem; padding: .85rem 1.4rem; border: 1px solid var(--bb-border); border-radius: .75rem; color: var(--color-text); background: var(--color-surface); font: inherit; font-weight: 650; cursor: pointer; }
.referral-dash-button-secondary:hover { border-color: color-mix(in srgb, var(--bb-red) 45%, var(--bb-border)); }
.referral-dash-button-secondary img { width: 1.15rem; height: 1.15rem; }
.referral-dash-share-dropdown { position: relative; }
.referral-dash-share-menu { position: absolute; left: 0; top: calc(100% + .5rem); z-index: 9; display: grid; grid-template-columns: repeat(3, minmax(6.75rem, 1fr)); gap: .5rem; width: max-content; max-width: min(24rem, 82vw); margin: 0; padding: .6rem; list-style: none; border: 1px solid var(--bb-border); border-radius: .9rem; background: var(--color-surface); box-shadow: 0 .75rem 2.5rem #241d1926; }
.referral-dash-share-menu a, .referral-dash-share-menu button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 4.5rem; padding: .6rem .4rem; border: 1px solid transparent; border-radius: .7rem; color: var(--color-text); background: transparent; font: inherit; font-size: .8rem; font-weight: 600; text-align: center; text-decoration: none; cursor: pointer; }
.referral-dash-share-menu a:hover, .referral-dash-share-menu button:hover { border-color: var(--bb-border); background: var(--color-canvas); color: var(--color-text); }
.referral-dash-share-menu img { width: 1.6rem; height: 1.6rem; }
.referral-dash-template h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .5rem; font-size: 1.2rem; }
.referral-dash-template h2 img { width: 1.6rem; height: 1.6rem; }
.referral-dash-template > p { margin: 0 0 1rem; color: var(--color-muted); font-size: var(--text-sm); }
.referral-dash-template-message { margin: 0 0 1.1rem; padding: 1rem 1.1rem; border-radius: .85rem; background: #f6f5f3; font-size: .95rem; }
.referral-dash-template-message a { font-weight: 700; overflow-wrap: anywhere; }
.referral-dash-activity h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.referral-dash-activity > p { margin: 0 0 1rem; color: var(--color-muted); font-size: var(--text-sm); }
.referral-dash-activity-empty { color: var(--color-muted); }
.referral-dash-activity-list { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.referral-dash-activity-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: .8rem 1rem; border: 1px solid var(--bb-border); border-radius: .8rem; }
.referral-dash-activity-list li > img { width: 2.4rem; height: 2.4rem; }
.referral-dash-activity-list strong { display: block; font-size: .95rem; }
.referral-dash-activity-list li p { margin: .1rem 0 0; color: var(--color-muted); font-size: .85rem; }
.referral-dash-activity-list time { display: grid; justify-items: end; gap: .1rem; color: var(--color-muted); font-size: .8rem; text-align: right; }
.referral-dash-activity-all { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: 1rem; padding: .75rem; border-top: 1px solid color-mix(in srgb, var(--bb-border) 60%, transparent); color: var(--bb-red); font-weight: 700; text-decoration: none; }
.referral-dash-activity-all:hover { color: var(--bb-red-dark); text-decoration: underline; }
.referral-dash-cheer { position: relative; display: grid; align-content: start; gap: .9rem; border: 0; background: #e9f5ec; }
.referral-dash-cheer h2 { display: flex; align-items: center; gap: .6rem; margin: 0; color: #1e8a4d; font-size: 1.2rem; }
.referral-dash-cheer h2 img { width: 1.7rem; height: 1.7rem; }
.referral-dash-cheer > p { margin: 0; color: var(--color-text); font-size: .95rem; }
.referral-dash-goal p { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0 0 .5rem; font-size: .95rem; }
.referral-dash-goal-bar { height: .6rem; border-radius: 1rem; background: #cbe6d2; overflow: hidden; }
.referral-dash-goal-bar div { height: 100%; border-radius: 1rem; background: #1e8a4d; }
.referral-dash-tip { padding: 1rem 1.1rem; border-radius: .85rem; background: var(--color-surface); }
.referral-dash-tip p { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .92rem; }
.referral-dash-tip p + p { display: block; margin-top: .35rem; color: var(--color-muted); }
.referral-dash-tip img { width: 1.4rem; height: 1.4rem; }
.referral-dash-cheer-luigi { width: 6.5rem; justify-self: end; }
.referral-dash-details { display: grid; gap: .75rem; }
.referral-dash-details h2 { margin: .75rem 0 .25rem; font-size: 1.15rem; }
.referral-dash-details h2:first-child { margin-top: 0; }
.referral-dash-details-empty { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.referral-dash-qr-download { display: inline-block; font-weight: 700; }
@media (max-width: 78rem) {
.referral-dash-stats { grid-template-columns: repeat(2, minmax(9.5rem, 1fr)); }
}
@media (max-width: 62rem) {
.referral-dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 42rem) {
.referral-dash-share { grid-template-columns: 1fr; }
.referral-dash-share-visual { display: none; }
.referral-dash-stats { grid-template-columns: 1fr 1fr; }
.referral-dash-share-menu { grid-template-columns: repeat(2, minmax(6.5rem, 1fr)); }
.referral-dash-share-actions .referral-dash-share-dropdown, .referral-dash-share-actions .referral-dash-button-primary, .referral-dash-share-actions .referral-dash-button-secondary { width: 100%; justify-content: center; }
}
/* Creator dashboard — reuses the referral-dash building blocks and adds the creator
specifics: centered stat tiles, message template tabs, the community funnel, the
earnings card and the commission chain. */
.creator-dash-header .referral-dash-heading h1 { display: flex; align-items: center; gap: .6rem; }
.creator-dash-star { color: var(--bb-red); font-size: 1.5rem; }
.creator-dash-stats { grid-template-columns: repeat(4, minmax(9.5rem, 1fr)); }
.creator-dash-stats li { justify-items: center; gap: .3rem; padding: 1.15rem 1.1rem; text-align: center; }
.creator-dash-stat-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-canvas, #f6f5f2); }
.creator-dash-stat-icon img { width: 1.7rem; height: 1.7rem; }
.creator-dash-template { display: flex; flex-direction: column; align-items: flex-start; }
.creator-dash-tab-input { position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; pointer-events: none; }
.creator-dash-template-message { width: 100%; }
.creator-dash-template-tabs { display: flex; gap: .5rem; margin: 0 0 1rem; }
.creator-dash-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1rem; border: 1px solid var(--bb-border); border-radius: .65rem; font-size: .88rem; font-weight: 650; cursor: pointer; }
.creator-dash-tab img { width: 1.1rem; height: 1.1rem; }
.creator-dash-template input[value="messages"]:checked ~ [data-template="social"] { display: none; }
.creator-dash-template input[value="social"]:checked ~ [data-template="messages"] { display: none; }
.creator-dash-template input[value="messages"]:checked ~ .creator-dash-template-tabs .creator-dash-tab--messages,
.creator-dash-template input[value="social"]:checked ~ .creator-dash-template-tabs .creator-dash-tab--social { border-color: color-mix(in srgb, var(--bb-red) 45%, var(--bb-border)); background: var(--bb-red-soft, #fdeeee); }
.creator-dash-template input[value="messages"]:focus-visible ~ .creator-dash-template-tabs .creator-dash-tab--messages,
.creator-dash-template input[value="social"]:focus-visible ~ .creator-dash-template-tabs .creator-dash-tab--social { outline: 2px solid var(--bb-red); outline-offset: 2px; }
.creator-dash-funnel h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.creator-dash-funnel-list { display: grid; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; counter-reset: none; }
.creator-dash-funnel-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: center; }
.creator-dash-funnel-list li > img { width: 2.6rem; height: 2.6rem; padding: .5rem; border-radius: 50%; background: #e9f5ec; box-sizing: content-box; }
.creator-dash-funnel-list li p { display: grid; margin: 0; }
.creator-dash-funnel-list li strong { font-size: 1.25rem; letter-spacing: -.01em; }
.creator-dash-funnel-list li span { font-size: .9rem; }
.creator-dash-funnel-list li small { color: var(--color-muted); font-size: .82rem; }
.creator-dash-funnel-list li.creator-dash-funnel-arrow { display: block; width: 3.6rem; margin: -.1rem 0; color: #1e8a4d; font-weight: 700; text-align: center; }
.creator-dash-funnel-details { text-decoration: none; }
.creator-dash-cheer h2 { color: #1e8a4d; }
.creator-dash-goal-hint { margin-top: .6rem; font-size: .9rem; }
.creator-dash-earnings h2 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .3rem; font-size: 1.2rem; }
.creator-dash-earnings h2 img { width: 1.6rem; height: 1.6rem; }
.creator-dash-earnings > p { margin: 0 0 1rem; color: var(--color-muted); font-size: var(--text-sm); }
.creator-dash-earnings-rows { display: grid; gap: .55rem; margin: 0 0 1.1rem; }
.creator-dash-earnings-rows div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.creator-dash-earnings-rows dt { color: var(--color-muted); font-size: .92rem; }
.creator-dash-earnings-rows dd { margin: 0; font-weight: 700; }
.creator-dash-earnings-available { color: #1e8a4d; }
.creator-dash-earnings-total { padding-top: .55rem; border-top: 1px solid var(--bb-border); }
.creator-dash-earnings-total dt { color: var(--color-text); font-weight: 650; }
.creator-dash-earnings-total dd { font-size: 1.2rem; }
.creator-dash-earnings-link { text-decoration: none; }
.creator-dash-chain h2 { margin: 0 0 .3rem; font-size: 1.2rem; }
.creator-dash-chain-intro { margin: 0 0 1.25rem; color: var(--color-muted); font-size: var(--text-sm); }
.creator-dash-chain-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.creator-dash-chain-steps li { position: relative; display: grid; justify-items: center; gap: .4rem; padding: 1rem .75rem; border-radius: .85rem; text-align: center; }
.creator-dash-chain-steps li > img { width: 2.9rem; height: 2.9rem; }
.creator-dash-chain-steps h3 { margin: 0; font-size: .92rem; }
.creator-dash-chain-steps li p { margin: 0; color: var(--color-muted); font-size: .78rem; }
.creator-dash-chain-steps li + li::before { content: "→"; position: absolute; left: -1.15rem; top: 1.75rem; color: var(--color-muted); font-size: 1.1rem; }
.creator-dash-chain-share { background: #f6f5f3; }
.creator-dash-chain-share h3 { color: #6d28d9; }
.creator-dash-chain-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--bb-border) 60%, transparent); color: var(--color-muted); font-size: .88rem; }
.creator-dash-chain-note a { margin-left: auto; color: var(--bb-red); font-weight: 700; text-decoration: none; }
.creator-dash-chain-note a:hover { text-decoration: underline; }
.account-menu-icon--star { display: inline-grid; place-items: center; color: var(--bb-red); font-size: 1.15rem; }
@media (max-width: 78rem) {
.creator-dash-stats { grid-template-columns: repeat(2, minmax(9.5rem, 1fr)); }
.creator-dash-chain-steps { grid-template-columns: repeat(2, 1fr); }
.creator-dash-chain-steps li + li::before { content: none; }
}
@media (max-width: 42rem) {
.creator-dash-stats { grid-template-columns: 1fr 1fr; }
.creator-dash-chain-steps { grid-template-columns: 1fr; }
.creator-dash-funnel-list li { grid-template-columns: auto minmax(0, 1fr); }
.creator-dash-funnel-list li small { grid-column: 2; }
}
.place-photo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.place-photo-grid label{display:grid;gap:.4rem}.place-photo-grid img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:.5rem}.place-photo-reject{font-weight:400!important}.hero-attribution{position:absolute;right:.4rem;bottom:.35rem;padding:.2rem .4rem;color:#fff;background:#0009;font-size:.65rem}.hero-attribution a{color:inherit}@media(max-width:42rem){.place-photo-grid{grid-template-columns:1fr}}
.registration-opening-hours{margin:1rem 0;padding:1rem;border:1px solid var(--color-border);border-radius:.75rem}.registration-opening-hours>legend{font-weight:750}.confirm-opening-hours{margin:0;padding-left:1.2rem}
/* ---- Menu import (Speisekarten-Übernahme) ---- */
.menu-import .mi-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.25rem 0}
.menu-import .mi-card{display:flex;flex-direction:column;gap:.5rem;padding:1.25rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-canvas,#faf9f7)}
.menu-import .mi-card h2{margin:0;font-size:1.05rem}
.menu-import .mi-card p{margin:0;color:var(--color-muted);font-size:.9rem}
.menu-import .mi-card .button,.menu-import .mi-card a.button{margin-top:auto;align-self:flex-start}
.menu-import .mi-card--admin{border-style:dashed}
.menu-import .mi-admin-badge{display:inline-block;margin-left:.35rem;padding:.1rem .45rem;border-radius:1rem;background:var(--color-border);color:var(--color-text,#222);font-size:.7rem;font-weight:600;vertical-align:middle}
.menu-import .mi-html-steps{margin:.5rem 0 1rem;padding-left:1.2rem;display:grid;gap:.3rem}
.menu-import [data-mi-html-paste]{width:100%;font-family:ui-monospace,monospace;font-size:.85rem}
.menu-import .mi-html-status{min-height:1.2em;color:var(--color-muted)}
.menu-import .mi-price{font-weight:700}
.menu-import .mi-panel{margin-top:1.5rem;padding:1.25rem;border:1px solid var(--color-border);border-radius:.75rem}
.menu-import .mi-paste-hint{color:var(--color-muted);font-size:.9rem}
.menu-import .mi-pages{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem}
.menu-import .mi-page{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.5rem}
.menu-import .mi-page-controls{display:flex;gap:.35rem}
.menu-import .mi-page-controls button{min-width:1.9rem;padding:.15rem .35rem;border:1px solid var(--color-border);border-radius:.4rem;background:#fff;cursor:pointer}
.menu-import .mi-upload-actions{display:flex;flex-direction:column;align-items:stretch;gap:.75rem;margin-top:1.25rem}
.menu-import .mi-upload-actions .mi-add-page{border:1.5px dashed color-mix(in srgb,var(--brand-primary) 55%,transparent);background:transparent;color:var(--brand-primary);box-shadow:none;transform:none}
.menu-import .mi-upload-actions .mi-add-page:hover{color:var(--brand-primary);background:var(--brand-accent,#fbeae7);border-color:var(--brand-primary);filter:none}
.menu-import .mi-upload-actions .mi-upload-submit[hidden]{display:none}
.menu-import .mi-candidates{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem}
.menu-import .mi-candidates label{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .75rem;border:1px solid var(--color-border);border-radius:.5rem;cursor:pointer}
.menu-import .mi-candidates small{flex-basis:100%;color:var(--color-muted);overflow-wrap:anywhere}
.menu-import .mi-fallback{margin-top:1rem;display:grid;gap:.5rem;justify-items:start}
.menu-import .mi-status-line{display:flex;align-items:center;gap:.5rem}
.menu-import .mi-spinner{width:1rem;height:1rem;flex:none;border:2px solid var(--brand-accent,#fbeae7);border-top-color:var(--brand-primary,#c22d20);border-radius:50%;animation:mi-spin .8s linear infinite}
@keyframes mi-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.menu-import .mi-spinner{animation-duration:2.4s}}
.menu-import .mi-progress{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.65rem}
.menu-import .mi-progress li::before{content:'○';margin-right:.5rem}
.menu-import .mi-progress li.is-active::before{content:'●'}
.menu-import .mi-progress li.is-done::before{content:'✓';color:var(--bb-green,#15803d)}
.menu-import .mi-result-head{display:flex;align-items:flex-start;gap:2rem}
.menu-import .mi-result-main{flex:1;min-width:0}
.menu-import .mi-result-illustration{width:220px;max-width:28%;height:auto;flex:none}
.menu-import .mi-summary{list-style:none;margin:1rem 0;padding:0;display:flex;flex-wrap:wrap;gap:1rem}
.menu-import .mi-summary li{flex:1 1 9rem;padding:.85rem 1.1rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-surface,#fff)}
.menu-import .mi-summary strong{display:block;font-size:1.5rem}
.menu-import .mi-status{margin:1rem 0;padding:1rem 1.25rem;border:1px solid color-mix(in srgb,var(--color-success) 35%,var(--color-border));border-radius:.75rem;background:color-mix(in srgb,var(--color-success) 8%,var(--color-surface,#fff))}
.menu-import .mi-status p{margin:.35rem 0 0;color:var(--color-muted)}
.menu-import .mi-hints{margin:1rem 0;padding:1rem 1.25rem;border:1px solid color-mix(in srgb,var(--color-warning,#b7791f) 40%,var(--color-border));border-radius:.75rem;background:color-mix(in srgb,var(--color-warning,#b7791f) 7%,var(--color-surface,#fff))}
.menu-import .mi-hints h2{margin:0 0 .5rem;font-size:1rem}.menu-import .mi-hints ul{margin:0;padding-left:1.2rem;display:grid;gap:.35rem}
.menu-import .mi-failure-detail{margin:1rem 0;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:.75rem;background:var(--color-surface,#fff)}.menu-import .mi-failure-detail summary{cursor:pointer;font-weight:600}.menu-import .mi-failure-detail pre{margin:.75rem 0 0;white-space:pre-wrap;word-break:break-word;font-size:.8125rem;max-height:24rem;overflow:auto}
.menu-import .mi-quality{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.menu-import .mi-quality .mi-ok{color:var(--color-success);font-weight:600}
.menu-import .mi-quality .mi-warn{color:#b45309}
.menu-import .mi-quality .mi-unclear{color:var(--color-muted)}
.menu-import .mi-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin:1rem 0}
.menu-import .mi-originals p{color:var(--color-muted)}
.menu-import .mi-original-grid{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.75rem}
.menu-import .mi-original{display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:.75rem;overflow:hidden;background:var(--color-surface,#fff);text-decoration:none;color:inherit}
.menu-import .mi-original:hover{border-color:var(--color-text)}
.menu-import .mi-original img{width:100%;height:7.5rem;object-fit:cover;object-position:top;background:var(--color-canvas,#faf9f7)}
.menu-import .mi-original-doc{display:flex;align-items:center;justify-content:center;height:7.5rem;background:var(--color-canvas,#faf9f7);font-weight:700;letter-spacing:.05em;color:var(--color-muted)}
.menu-import .mi-original-name{padding:.45rem .6rem;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-top:1px solid var(--color-border)}
@media(max-width:42rem){.menu-import .mi-cards{grid-template-columns:1fr}.menu-import .mi-result-illustration{display:none}}
/* Merchant home dashboard */
.home-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-6); }
.home-head h1 { margin: 0 0 .3rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.home-head p { margin: 0; }
.home-view-restaurant { display: inline-flex; align-items: center; gap: .55rem; }
.home-grid { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.home-grid-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-grid-services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.home-grid-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.home-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin: 0; overflow: hidden; }
.home-card-head { display: flex; align-items: center; gap: .8rem; width: 100%; margin-bottom: .35rem; }
.home-card-head h2, .home-service h2 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.home-card-icon { display: grid; flex: 0 0 2.9rem; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: .75rem; color: var(--brand-primary); background: var(--brand-accent); font-size: 1.25rem; }
.home-card-icon-green { color: var(--color-success); background: #e8f7ef; }
.home-big-number { margin: 0; font-size: clamp(2.4rem, 4vw, 3.4rem); font-weight: 850; line-height: 1.05; }
.home-big-number small { font-size: 45%; font-weight: 750; }
.home-card p { margin: 0; }
.home-card-note { margin-top: auto !important; padding-top: .6rem; color: var(--color-muted); font-size: var(--text-sm); }
.home-card-action { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; }
.home-card-orders { border: 0; color: #fff; background: linear-gradient(135deg, var(--brand-primary), #9f2015); }
.home-card-orders .home-card-icon { color: #fff; background: #ffffff26; }
.home-card-orders .home-card-note { color: #fbeae7; }
.home-orders-recent { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem; border-radius: 999px; background: #ffffff21; font-size: var(--text-sm); font-weight: 650; }
.home-card-illustration { position: absolute; right: .4rem; bottom: -.9rem; color: var(--brand-accent); font-size: 6.5rem; pointer-events: none; }
.home-card-delivery-time > :not(.home-card-illustration) { position: relative; z-index: 1; }
.home-live-badge { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; color: var(--color-success); font-size: var(--text-sm); font-weight: 750; }
.home-live-split { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--color-border); }
.home-live-split > div { display: grid; justify-items: start; }
.home-live-split strong { font-size: 1.35rem; }
.home-live-split span { color: var(--color-muted); font-size: var(--text-sm); }
.home-service { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.home-service-head { display: flex; align-items: flex-start; gap: .8rem; }
.home-service-state { margin: .1rem 0 0; font-size: 1.3rem; font-weight: 800; }
.home-service-hint { display: flex; align-items: center; gap: .5rem; margin: .15rem 0 0; color: var(--color-muted); font-size: var(--text-sm); }
.home-service .button-secondary { margin-top: auto; text-align: center; }
.home-service form { display: grid; margin-top: auto; }
.home-service form .button-secondary { margin-top: 0; }
.home-popular, .home-quick { display: flex; flex-direction: column; margin: 0; }
.home-popular h2, .home-quick h2 { margin: 0 0 1rem; font-size: 1.1rem; }
.home-popular-list { display: grid; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.home-popular-list li { display: flex; align-items: center; gap: .85rem; padding: .5rem 0; border-bottom: 1px solid var(--color-border); }
.home-popular-list li:last-child { border-bottom: 0; }
.home-popular-list img, .home-popular-placeholder { width: 2.6rem; height: 2.6rem; border-radius: .55rem; object-fit: cover; }
.home-popular-placeholder { display: grid; place-items: center; color: var(--color-muted); background: var(--color-canvas); font-size: 1.15rem; }
.home-popular-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.home-popular-empty { padding: 1.5rem 0; }
.home-popular .home-card-note { margin-top: auto; padding-top: 1rem; color: var(--color-muted); font-size: var(--text-sm); }
.home-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.home-quick-tile { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--color-border); border-radius: .7rem; color: inherit; background: var(--color-surface); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.home-quick-tile:hover { border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--color-border)); box-shadow: 0 .35rem 1.1rem #241d1914; }
.home-quick-icon { display: grid; flex: 0 0 2.6rem; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .6rem; font-size: 1.15rem; }
.home-quick-icon-green { color: #19714a; background: #e8f7ef; }
.home-quick-icon-blue { color: #1d4ed8; background: #e7edff; }
.home-quick-icon-violet { color: #6d28d9; background: #f1e9fe; }
.home-quick-icon-orange { color: #c2410c; background: #ffefe3; }
.home-quick-icon-pink { color: #be185d; background: #fde7f1; }
.home-quick-icon-yellow { color: #8a5700; background: #fff4d6; }
.home-quick-text { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.home-quick-text strong { font-size: .95rem; }
.home-quick-text small { overflow: hidden; color: var(--color-muted); text-overflow: ellipsis; white-space: nowrap; }
.home-quick-chevron { color: var(--color-muted); font-size: .8rem; }
@media (max-width: 68rem) { .home-grid-top, .home-grid-services { grid-template-columns: 1fr 1fr; } .home-grid-bottom { grid-template-columns: 1fr; } }
@media (max-width: 46rem) { .home-grid-top, .home-grid-services, .home-quick-grid { grid-template-columns: 1fr; } }
/* Sidebar: "coming soon" markers and the user card in the footer */
.sidebar-user { margin-top: .6rem; }
.sidebar-user summary { display: flex; align-items: center; gap: .7rem; padding: .55rem .6rem; border: 1px solid var(--color-border); border-radius: .6rem; background: var(--color-canvas); list-style: none; cursor: pointer; }
.sidebar-user summary::-webkit-details-marker { display: none; }
.sidebar-user summary:hover { border-color: #d9cfc6; background: #f5efe9; }
.sidebar-user .user-avatar { flex: none; width: 2.35rem; height: 2.35rem; }
.sidebar-user-info { display: grid; flex: 1; min-width: 0; }
.sidebar-user-info strong { overflow: hidden; font-size: .88rem; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-info small { color: var(--color-muted); font-size: .74rem; }
.sidebar-user .chevron { width: auto; color: var(--color-muted); font-size: .7rem; transition: transform .15s ease; }
.sidebar-user[open] .chevron { transform: rotate(180deg); }
.sidebar-user .sidebar-logout { padding: .45rem .6rem 0; }
/* ---- Fulfilment picker (storefront): delivery/pickup + day + time of the order ---- */
/* Order-time picker: lives as the last cell inside the combined service bar (see _fulfillment_picker.html.twig). */
.fulfillment-picker{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin:0}
.fulfillment-picker-title{font-weight:650;font-size:.8rem;white-space:nowrap}
.fulfillment-field select{padding:.5rem .65rem;border:1px solid var(--shop-border);border-radius:.55rem;background:#fff;font-size:.8rem;cursor:pointer}
.fulfillment-static{padding:.5rem .8rem;border-radius:.55rem;background:#f1eee9;font-size:.8rem;font-weight:650}
.fulfillment-apply{padding:.5rem .9rem;border:0;border-radius:.55rem;color:var(--shop-contrast);background:var(--shop-primary);font-size:.8rem;cursor:pointer}
.fulfillment-unavailable{padding:.5rem .8rem;border-radius:.55rem;background:#f1eee9;color:var(--shop-muted,#5f5b57);font-size:.8rem}
.fulfillment-adjusted{flex:1 1 100%;margin:0;padding:.45rem .7rem;border-radius:.55rem;background:#f4f1ea;font-size:.78rem}
.menu--section>.storefront-edit-heading h2{display:inline-block;padding:.35rem .8rem;border-radius:.6rem;color:var(--shop-contrast);background:var(--shop-primary)}
/* Menu cover image and teaser (docs/aktuelles.md): a preview of a menu outside its windows. */
.menu-cover{display:block;width:100%;height:auto;max-height:16rem;object-fit:cover;border-radius:.9rem;margin:0 0 .8rem}
.menu-teaser{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .8rem;margin:.2rem 0 .8rem}
.menu-teaser-badge{padding:.3rem .7rem;border-radius:999px;color:var(--shop-contrast);background:var(--shop-primary);font-size:.82rem;font-weight:650}
.menu-teaser-next{font-size:.85rem;color:#5d5850}
.menu-teaser-order{padding:.45rem .9rem;border-radius:.55rem;border:1px solid var(--shop-primary);color:var(--shop-primary);font-size:.85rem;font-weight:650;text-decoration:none}
.menu--teaser .product-list{opacity:.72}
/* "Events & Aktionen" (docs/aktuelles.md): slider below the hero, week strip, public post pages. */
.news{width:min(78rem,calc(100% - 5rem));margin:1rem auto 0;padding:0;box-sizing:border-box}
@media(max-width:800px){.news{width:auto;margin-inline:.75rem}}
.news-head{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.45rem}
.news-head h2{margin:0}
.news-all{margin-left:auto;font-size:.88rem;font-weight:650;color:var(--shop-primary);text-decoration:none}
.news-add{display:inline-grid;place-items:center;width:2rem;height:2rem;font-size:1.2rem;font-weight:700;text-decoration:none}
.news-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(19rem,23rem);gap:.8rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.4rem}
/* Flat horizontal cards: an optional small image on the left, badge / title / teaser / button on
the right. A post without image reserves no media slot — its content simply starts on the left.
Cards of one row share their height, the button always sits bottom left. */
.news-card{position:relative;display:flex;gap:.85rem;padding:.65rem;box-sizing:border-box;scroll-snap-align:start;border:1px solid var(--shop-border,#e6e1d8);border-radius:.9rem;background:#fff;box-shadow:0 1px 3px rgba(20,17,15,.05)}
.news-card.is-running{border-color:var(--shop-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--shop-primary) 25%,transparent)}
.news-card>.news-card-image{position:relative;display:block;flex:0 0 5.5rem;align-self:stretch;min-height:6.5rem;border-radius:.6rem;overflow:hidden;background:#f1eee9}
.news-card-image img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.news-card-image .ai-image-badge{left:.35rem;bottom:.35rem}
.news-card-body{display:flex;flex:1 1 auto;min-width:0;flex-direction:column;align-items:flex-start;gap:.3rem;padding:.1rem .15rem}
.news-card-body h3{display:-webkit-box;margin:0;overflow:hidden;font-size:1rem;line-height:1.25;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.news-card-body h3 a{color:inherit;text-decoration:none}
.news-card-body p{display:-webkit-box;margin:0;overflow:hidden;font-size:.86rem;line-height:1.4;color:#5d5850;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* The button wraps inside the narrow card body: preorder labels ("Für Mi, 14.10., 18:00 vorbestellen",
longer still in other languages) do not fit on one line next to the image in the grid and slider. */
.news-card-body .post-cta{max-width:100%;box-sizing:border-box;margin-top:auto;line-height:1.3;overflow-wrap:anywhere}
.news-card .edit-post{position:absolute;top:.5rem;right:.5rem}
.news-card:has(.edit-post) .news-card-body{padding-right:2.4rem}
/* Schedule line above the title: tinted text with a calendar icon instead of a filled pill, so the
filled post button stays the only strong accent of the card. The brand colour is darkened for
text so light brand colours stay readable on white; a running post gets a dot instead. */
.news-badge{align-self:flex-start;max-width:100%;color:color-mix(in srgb,var(--shop-primary) 72%,#1f1b16);font-size:.8rem;font-weight:650;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-badge::before{content:"";display:inline-block;width:.95em;height:.95em;margin-right:.4em;vertical-align:-.13em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 10h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='16.5' rx='2.5'/%3E%3Cpath d='M3 10h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E") center/contain no-repeat}
.news-card.is-running .news-badge::before{width:.55em;height:.55em;margin:0 .55em 0 .2em;vertical-align:.05em;border-radius:50%;-webkit-mask:none;mask:none;box-shadow:0 0 0 .2em color-mix(in srgb,currentColor 22%,transparent)}
.news-empty{margin:0;color:#5d5850}
/* One to three posts fill the row instead of scrolling: one card spans the full width, two take
halves, three thirds. On narrow screens they stack (still horizontal cards) rather than being
squeezed side by side; four or more keep the slider. */
.news-track--1,.news-track--2,.news-track--3{grid-auto-flow:row;grid-template-columns:minmax(0,1fr);overflow-x:visible;padding-bottom:0}
.news-track--1 .news-card{min-height:9.5rem}
@media (min-width:40rem){
.news-track--1 .news-card{gap:1.1rem;padding:.75rem}
.news-track--1 .news-card>.news-card-image{flex-basis:clamp(9rem,30%,17rem)}
.news-track--1 .news-card-body{justify-content:center;padding:.3rem .5rem}
.news-track--1 .news-card-body h3{font-size:1.2rem}
.news-track--1 .news-card-body p{font-size:.93rem}
.news-track--1 .news-card-body .post-cta{margin-top:.35rem}
.news-track--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.news-track--2 .news-card>.news-card-image{flex-basis:7rem}
}
@media (min-width:60rem){
.news-track--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.news-track--3 .news-card>.news-card-image{flex-basis:6rem}
}
.post-cta{align-self:flex-start;margin-top:.3rem;padding:.45rem .9rem;border-radius:.55rem;color:var(--shop-contrast);background:var(--shop-primary);font-size:.85rem;font-weight:650;text-decoration:none}
.post-cta--secondary{color:var(--shop-primary);background:transparent;border:1px solid var(--shop-primary)}
.week-strip{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem;margin-top:.7rem;font-size:.88rem}
.week-strip-title{font-weight:650}
.week-strip ul{display:flex;flex-wrap:wrap;gap:.35rem .5rem;margin:0;padding:0;list-style:none}
.week-strip li{padding:.25rem .65rem;border-radius:999px;background:#f1eee9}
.week-strip li.is-today{color:var(--shop-contrast);background:var(--shop-primary)}
.week-strip li a{color:inherit}
.posts-list{display:grid;gap:1.2rem}
.post-teaser{display:grid;gap:1rem;align-items:start;padding-bottom:1.2rem;border-bottom:1px solid var(--shop-border,#e6e1d8)}
.post-teaser--image{grid-template-columns:minmax(0,14rem) 1fr}
.post-teaser img{display:block;width:100%;height:auto;border-radius:.7rem}
.post-teaser h2{margin:.35rem 0;font-size:1.15rem}
.post-teaser>div{display:flex;flex-direction:column;gap:.3rem}
.post-detail{display:flex;flex-direction:column;gap:.6rem}
.post-detail-figure{margin:0}
.post-detail-figure img{display:block;width:100%;height:auto;border-radius:.9rem}
.post-detail-body{line-height:1.6}
@media (max-width:640px){.post-teaser--image{grid-template-columns:1fr}}
/* Backend: "Aktuelles" list and form */
.posts-section{margin:1.6rem 0}
.posts-slider-preview{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(10rem,12rem);gap:.7rem;overflow-x:auto;margin:0;padding:0;list-style:none}
.posts-slider-preview li{display:flex;flex-direction:column;gap:.3rem;padding:.6rem;border:1px solid var(--color-border);border-radius:.6rem;background:#fff}
.posts-slider-preview img{width:100%;height:auto;border-radius:.4rem}
.posts-slider-preview .news-badge{color:var(--brand-primary)}
.post-rows{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.post-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;border:1px solid var(--color-border);border-radius:.6rem;background:#fff}
.post-row[draggable="true"]{cursor:grab}
.post-row.is-dragging{opacity:.5}
.post-row-image{flex:0 0 auto;width:80px;height:45px;border-radius:.35rem;object-fit:cover}
.post-row-image--empty{display:grid;place-items:center;background:#f1eee9;color:var(--color-muted)}
.post-row-main{display:flex;flex-direction:column;gap:.2rem;min-width:0;flex:1}
.post-row-title{font-weight:650}
.post-row-meta{font-size:.82rem;color:var(--color-muted)}
.post-row-actions{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.post-row-actions form{margin:0}
.post-row-actions .icon-button{display:inline-grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--color-border);border-radius:.4rem;background:#fff;cursor:pointer}
.post-row-actions .icon-button:disabled{opacity:.35;cursor:not-allowed}
.post-form{display:grid;gap:.9rem;max-width:44rem}
.post-form label{display:grid;gap:.25rem}
.post-form-row{display:flex;flex-wrap:wrap;gap:.8rem}
.post-form-details{padding:.7rem .9rem;border:1px solid var(--color-border);border-radius:.6rem;background:#fff}
.post-form-details summary{font-weight:650;cursor:pointer}
.post-form-details[open] summary{margin-bottom:.6rem}
.post-form-preview{display:block;max-width:20rem;height:auto;border-radius:.5rem}
.post-form-actions,.post-form-secondary{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem}
.post-form-secondary form{margin:0}
/* Price promotions ("Aktionen", docs/promotions.md) */
.promotion-form fieldset{display:grid;gap:.5rem;min-width:0}
.promotion-form legend{font-weight:650}
.promotion-modes,.promotion-weekdays{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.promotion-form label.ck-check{display:flex;align-items:center;gap:.4rem}
.promotion-form:has([name="price_mode"][value="PERCENT_OFF"]:checked) .promotion-amount,.promotion-form:not(:has([name="price_mode"][value="PERCENT_OFF"]:checked)) .promotion-percent{display:none}
.promotion-items{max-height:32rem;overflow:auto}
.promotion-category{padding:.5rem 0 0;border:0;border-top:1px solid var(--color-border)}
.promotion-category>legend small{font-weight:400;color:var(--color-muted)}
.promotion-item{display:grid;gap:.25rem}
.promotion-item small{color:var(--color-muted)}
.promotion-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .9rem;margin:0 0 .35rem 1.6rem}
.promotion-sizes>small{flex-basis:100%}
.promotion-item:not(:has(> label input:checked)) .promotion-sizes{display:none}
/* Backend: cover image of a menu */
.menu-cover-preview{display:block;max-width:20rem;height:auto;border-radius:.5rem;margin:.4rem 0}
/* Cart lines that are not available at the chosen fulfilment time stay visible but block checkout. */
.cart-item--unavailable{opacity:.62}
.cart-item--unavailable>div:first-child strong{text-decoration:line-through}
.cart-item-unavailable-note{color:#a32218!important;font-weight:600}
.cart-item-available-again{color:#2f2b28!important;font-weight:600}
.cart-unavailable-hint{margin:.6rem 0 0;padding:.6rem .75rem;border:1px solid #f0c7c2;border-radius:.5rem;background:#fdf1ef;color:#a32218;font-size:.85rem}
/* ---- Backend: weekly availability editor & per-menu price override ---- */
.schedule-rows{display:grid;gap:.4rem;margin:.5rem 0}
.schedule-row{display:flex;flex-wrap:wrap;align-items:end;gap:.6rem}
.schedule-row label{display:grid;gap:.15rem;font-size:.85rem}
.schedule-row select,.schedule-row input{padding:.35rem .5rem}
.schedule-row [aria-invalid="true"]{border-color:var(--color-danger,#a32218)!important;background:#fdf1ef}
.schedule-row .remove-assignment{align-self:center}
.override-price input{width:9rem;padding:.3rem .45rem;font-size:.85rem}
/* ---- Menu templates ---- */
.mt-badge{display:inline-block;margin:0;padding:.15rem .6rem;border-radius:99px;background:#d8f0e4;color:var(--color-success);font-size:.8rem}
.mt-meta{color:var(--color-muted);font-size:.9rem}
.mt-category{margin:1rem 0;padding:1rem 1.25rem;border:1px solid var(--color-border);border-radius:.75rem}
.mt-items{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.mt-item{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--color-border)}
.mt-item:last-child{border-bottom:0}
.mt-item-pick{display:flex;align-items:start;gap:.6rem;flex:1;min-width:14rem;cursor:pointer}
.mt-item-copy{display:grid}
.mt-item-copy small{color:var(--color-muted)}
.mt-item-price{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem}
.mt-price-input input{width:6rem;text-align:right;padding:.3rem .45rem}
/* ---- Coupons: public storefront banner + checkout field + backend form ---- */
.shop-coupons{display:grid;gap:1rem;width:min(78rem,calc(100% - 5rem));margin:1.25rem auto 0;padding:0}
@media(max-width:800px){.shop-coupons{width:auto;margin-inline:.75rem}}
.shop-coupon{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;border:1px dashed var(--shop-primary);border-radius:.8rem;background:#fff}
.shop-coupon h2{margin:0 0 .25rem;font-size:1.15rem}
.shop-coupon-value{margin:.2rem 0;font-weight:750;color:var(--shop-primary)}
.shop-coupon-code code{padding:.15rem .5rem;border:1px solid var(--shop-border);border-radius:.35rem;background:#faf9f7;font-weight:700}
.shop-coupon-conditions{margin:.4rem 0 0;padding-left:1.1rem;color:var(--shop-muted);font-size:.82rem}
.shop-coupon-actions{display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.shop-coupon-actions .button{white-space:nowrap}
.header-account{display:flex;align-items:center;gap:.5rem;height:2.75rem;padding:0 .8rem;border:1px solid #dedad6;border-radius:.55rem;color:#181614;background:#fff;text-decoration:none;font-size:.78rem;font-weight:650;white-space:nowrap}
.header-account svg{flex:none;width:1.25rem;height:1.25rem}
.last-order{width:min(78rem,calc(100% - 5rem));margin:1.25rem auto 0;padding:1.1rem 1.25rem 1.2rem;border:1px solid var(--shop-border);border-radius:.8rem;background:#f4f7f2;box-sizing:border-box}
.last-order-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.last-order-head h2{display:flex;align-items:center;gap:.55rem;margin:0 0 .75rem;font-size:1.15rem}
.last-order-head svg{width:1.3rem;height:1.3rem}
.last-order-date{color:var(--shop-muted);font-size:.85rem;white-space:nowrap}
.last-order-body{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem}
.last-order-image{width:9rem;aspect-ratio:4/3;object-fit:cover;border-radius:.6rem}
.last-order-items{display:grid;flex:1;gap:.55rem;min-width:14rem;margin:0;padding:0;list-style:none}
.last-order-items li{display:flex;gap:.6rem}
.last-order-items b{min-width:1.9rem;font-weight:750}
.last-order-items span{display:grid}
.last-order-items small{color:var(--shop-muted)}
.last-order-actions{display:grid;justify-items:center;gap:.5rem}
.last-order-reorder{display:flex;align-items:center;gap:.6rem;padding:.85rem 1.4rem;border:0;border-radius:.5rem;color:var(--shop-contrast);background:var(--shop-primary);font-weight:650;cursor:pointer}
.last-order-reorder svg{width:1.15rem;height:1.15rem}
.last-order-reorder:disabled{opacity:.55;cursor:progress}
.last-order-account-link{color:var(--shop-muted);font-size:.85rem}
.last-order-more{margin:.6rem 0 0;color:var(--shop-muted);font-size:.85rem}
.last-order-feedback{margin:.75rem 0 0;color:#5a4a12;font-size:.9rem}
@media(max-width:800px){.header-account{height:2.4rem;padding:0 .55rem}.header-account span{display:none}.last-order{margin:1rem .75rem;width:auto}.last-order-image{width:100%;max-height:9rem}.last-order-actions{width:100%;justify-items:stretch}.last-order-reorder{justify-content:center}.last-order-account-link{text-align:center}}
.ck-coupon-entry{display:flex;align-items:end;gap:.6rem}
.ck-coupon-entry .ck-field{flex:1}
.ck-coupon-entry input{text-transform:uppercase}
.ck-coupon-applied p{margin:.2rem 0}
.ck-voucher-list{display:grid;gap:.45rem;margin-top:.6rem}
.ck-voucher-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0}
.ck-voucher-row small{display:block;color:var(--ck-muted)}
.ck-totals-vouchers{display:grid;gap:.3rem}
.ck-gift-badge{display:inline-block;margin-left:.4rem;padding:.1rem .45rem;border-radius:2rem;color:#27613d;background:#e9f5ed;font-size:.72rem}
.ck-secondary{padding:.55rem .9rem;border:1px solid var(--shop-border,#e8e5e2);border-radius:.5rem;background:#fff;cursor:pointer}
.coupon-checklist{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.25rem;max-height:16rem;overflow:auto;padding:.5rem;border:1px solid #e8e5e2;border-radius:.5rem}
.ck-check--inline{display:inline-flex;margin-right:.8rem}
.coupon-form [hidden]{display:none!important}
.coupons-actions{display:grid;gap:.3rem}
.coupons-filters .delivery-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}
/* --- Order cockpit (operator live order handling) --- */
.orders-header-tools{display:flex;align-items:center;gap:.75rem}
.orders-connection{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .7rem;border-radius:.5rem;color:var(--color-warning);background:#fff7e8;font-weight:700}
[data-orders-sound].is-on,[data-terminal-sound].is-on,[data-terminal-push].is-on{color:var(--brand-primary-contrast);background:var(--brand-primary)}
.orders-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);align-items:start;margin-bottom:var(--space-4)}
.orders-column h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .6rem;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;color:var(--color-muted)}
.orders-count{display:inline-grid;place-items:center;min-width:1.6rem;height:1.6rem;padding:0 .35rem;border-radius:1rem;background:var(--color-border);color:var(--color-text);font-size:.85rem;font-weight:800}
.orders-column-new .orders-count{background:var(--brand-primary);color:var(--brand-primary-contrast)}
.orders-cards{display:grid;gap:var(--space-3)}
.orders-empty{padding:1rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);text-align:center}
.orders-card{padding:1rem;border:1px solid var(--color-border);border-left:.35rem solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:0 .25rem 1.25rem #241d190a}
.orders-card.is-received{border-left-color:var(--color-warning)}
.orders-card.is-unacknowledged{border-left-color:var(--brand-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-primary) 35%,transparent),0 .25rem 1.25rem #241d191a}
.orders-card.is-in_preparation{border-left-color:#9a6700}
.orders-card.is-ready_for_pickup,.orders-card.is-on_the_way{border-left-color:var(--color-success)}
.orders-card.is-completed{border-left-color:var(--color-success);opacity:.75}
.orders-card.is-cancelled{border-left-color:var(--color-danger);opacity:.75}
.orders-card-head{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.4rem}
.orders-card-title{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:1.15rem}
.orders-card-when{display:grid;justify-items:end;line-height:1.25}
.orders-age{color:var(--color-muted);font-size:.85rem}
.orders-age.is-late{color:var(--color-danger);font-weight:800}
.orders-badge{padding:.15rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase}
.orders-badge-new{background:var(--brand-primary);color:var(--brand-primary-contrast);animation:orders-pulse 1.4s ease-in-out infinite}
.orders-badge-test{background:#fff3cd;color:#7a5b00;border:1px dashed #c9a227}
.orders-badge-fulfilment.is-delivery{background:#e8f0fe;color:#1a4fa0}
.orders-badge-fulfilment.is-pickup{background:#e9f7ef;color:var(--color-success)}
@keyframes orders-pulse{50%{opacity:.55}}
.orders-card-meta{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-bottom:.5rem;font-size:.9rem}
.orders-status{font-weight:750}
.orders-slot{color:#1a4fa0;font-weight:750}
.orders-promised{color:var(--color-success);font-weight:700}
.orders-payment.is-ok{color:var(--color-success);font-weight:700}
.orders-payment.is-warn{color:var(--color-danger);font-weight:800}
.orders-payment.is-muted{color:var(--color-muted)}
.orders-payment-warning{margin:.2rem 0 .5rem;padding:.45rem .6rem;border-radius:.5rem;background:#fff1f0;color:var(--color-danger);font-weight:750}
.orders-cancel-reason{margin:.2rem 0 .5rem;color:var(--color-danger)}
.orders-card-customer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.orders-phone{font-weight:700;white-space:nowrap}
.orders-address{margin:.15rem 0 .3rem;color:var(--color-muted)}
.orders-note{margin:.15rem 0 .4rem;padding:.4rem .6rem;border-radius:.5rem;background:#fff7e8;color:#6b4a00}
.orders-items{margin:.5rem 0;padding:0;list-style:none;border-top:1px dashed var(--color-border)}
.orders-items li{padding:.4rem 0;border-bottom:1px dashed var(--color-border)}
.orders-item-main{display:flex;gap:.5rem}
.orders-item-qty{min-width:2.2rem;font-weight:800}
.orders-item-name{flex:1;font-weight:650}
.orders-item-option{display:block;margin-left:2.7rem;color:var(--color-muted)}
.orders-item-component{display:block;margin-left:2.7rem;font-weight:600}
.orders-item-component-option{margin-left:3.9rem}
.orders-item-price{white-space:nowrap}
.orders-totals{margin:.4rem 0 .6rem;font-size:.92rem}
.orders-total-line{display:flex;justify-content:space-between;gap:1rem;color:var(--color-muted)}
.orders-total-main{margin-top:.15rem;color:var(--color-text);font-size:1.05rem}
.orders-card-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.orders-primary-action{flex:1;min-height:3rem;font-size:1.05rem}
.orders-done{margin-top:var(--space-4)}
.orders-done>summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);cursor:pointer;font-weight:750}
.orders-cards-done{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:var(--space-3);margin-top:var(--space-3)}
.orders-dialog{width:min(30rem,calc(100% - 2rem));padding:0;border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:0 1.5rem 5rem #241d194d}
.orders-dialog::backdrop{background:#241d1999}
.orders-dialog form{display:grid;gap:.9rem;padding:var(--space-6)}
.orders-dialog h2{margin:0}
.orders-dialog label{display:grid;gap:.3rem;font-weight:700}
.orders-minutes{display:grid;gap:.5rem;justify-items:center}
.orders-minutes-value{margin:0;font-size:3rem;font-weight:850;line-height:1}
.orders-minutes-value small{font-size:1rem;font-weight:600;color:var(--color-muted)}
.orders-minutes-quick{display:flex;gap:.5rem}
.orders-minutes-quick .button{min-width:3.4rem}
.orders-dialog-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.3rem}
@media(max-width:64rem){.orders-board{grid-template-columns:1fr}.orders-column h2{margin-top:.5rem}}
/* --- Order history ("Bestellungen": list + detail) --- */
.order-history-banner{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:0 0 var(--space-4);padding:.7rem 1rem;border-radius:var(--radius-md);color:#6b4a00;background:#fff7e8;font-weight:650}
.order-history-banner a{margin-left:auto;font-weight:750}
.order-history-filters{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:var(--space-3) var(--space-4)}
.order-history-filters .field{margin-bottom:0}
.order-history-search{flex:1 1 16rem}
.order-history-filters .order-history-statuses{display:flex;flex:1 1 100%;flex-wrap:wrap;gap:.35rem .9rem;margin:0;padding:0;border:0;background:none;box-shadow:none}
.order-history-statuses legend{margin-bottom:.3rem;padding:0;font-weight:650}
.order-history-statuses label{display:inline-flex;align-items:center;gap:.3rem;font-weight:500}
.order-history-statuses input{width:auto}
.order-history-filter-actions{display:flex;align-items:center;gap:var(--space-3)}
.order-history-summary{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:var(--space-3)}
.order-history-summary p{margin:0}
.order-history-new a{font-weight:750}
.order-history-table th a{color:inherit;text-decoration:none;white-space:nowrap}
.order-history-table td{vertical-align:top}
.order-history-row.is-unacknowledged{box-shadow:inset .3rem 0 0 var(--brand-primary)}
.order-history-row.is-new{animation:order-history-flash 2.4s ease-out}
@keyframes order-history-flash{from{background:color-mix(in srgb,var(--brand-primary) 18%,transparent)}}
.order-history-number{font-weight:800;white-space:nowrap}
.order-history-items span,.order-history-items small{display:block}
.order-history-money{font-weight:700;white-space:nowrap;text-align:right}
.order-history-status{display:inline-block;padding:.15rem .55rem;border-radius:2rem;font-size:.8rem;font-weight:750;white-space:nowrap;color:#6b4a00;background:#fff4d6}
.order-history-status.is-in_preparation{color:#7a4d00;background:#ffe9c2}
.order-history-status.is-ready_for_pickup,.order-history-status.is-on_the_way{color:#1a4fa0;background:#e8f0fe}
.order-history-status.is-completed{color:var(--color-success);background:#e8f7ef}
.order-history-status.is-cancelled{color:var(--color-danger);background:#fff1f0}
.order-history-payment.is-pending,.order-history-payment.is-failed{color:var(--color-danger);font-weight:700}
.order-history-payment.is-refunded{color:var(--color-muted)}
.order-history-action .button{padding:.4rem .75rem;white-space:nowrap}
/* Secondary order actions must outrank the global filled `button[type="submit"]` rule. */
body:not(.storefront):not(.auth):not(.onboarding):not(.landing):not(.checkout-page) :is(.order-history-action,.order-detail-actions) button.button-secondary[type="submit"]{color:var(--brand-primary);background:var(--color-surface);box-shadow:none}
body:not(.storefront):not(.auth):not(.onboarding):not(.landing):not(.checkout-page) :is(.order-history-action,.order-detail-actions) button.button-secondary[type="submit"]:hover{color:var(--brand-primary-contrast);background:var(--brand-primary)}
.order-history-empty{padding:2rem;color:var(--color-muted);text-align:center}
.order-history-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-4)}
.order-detail-back{margin:0 0 var(--space-2)}
.order-detail-header{align-items:flex-start}
.order-detail-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;margin:.3rem 0 0}
.order-detail-action-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.order-detail-accept{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem}
.order-detail-accept label{display:grid;gap:.25rem;font-weight:650}
.order-detail-accept input{width:7rem}
.order-detail-cancel{margin-top:var(--space-4)}
.order-detail-cancel summary{cursor:pointer;color:var(--color-danger);font-weight:700}
.order-detail-cancel form{display:grid;gap:.6rem;max-width:30rem;margin-top:.6rem}
.order-detail-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(18rem,1fr);gap:var(--space-4);align-items:start}
.order-detail-totals,.order-detail-facts{display:grid;gap:.45rem;margin:0}
.order-detail-totals div{display:flex;justify-content:space-between;gap:1rem}
.order-detail-totals dt,.order-detail-facts dt{color:var(--color-muted)}
.order-detail-totals dd{margin:0;text-align:right}
.order-detail-facts div{display:grid;grid-template-columns:minmax(6rem,9rem) minmax(0,1fr);gap:.75rem}
.order-detail-facts dd{min-width:0;margin:0;overflow-wrap:anywhere}
.order-detail-total{margin-top:.3rem;padding-top:.5rem;border-top:1px solid var(--color-border);font-size:1.1rem;font-weight:800}
.order-detail-total dt{color:var(--color-text)}
.order-detail-timeline{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.order-detail-timeline li{display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem}
.order-detail-timeline time{color:var(--color-muted);font-variant-numeric:tabular-nums}
.order-detail-timeline small{display:block}
@media(max-width:64rem){.order-detail-grid{grid-template-columns:1fr}}
@media print{.order-detail-back,.order-detail-actions,[data-order-print]{display:none}.order-detail-grid{grid-template-columns:1fr}}
/* ---- Tablet order terminal ("Bestellzentrale") -------------------------- */
/* Runs all day on a tablet in the kitchen: warm canvas, white cards, sparse
status colors, big touch targets, the important times far larger than the
secondary information. Two views (Jetzt / Vorbestellungen) share one row
layout: status | time | order | customer | next action. */
.terminal{display:grid;gap:var(--space-3);min-height:100dvh;padding:var(--space-3) var(--space-4);align-content:start}
.terminal [hidden]{display:none!important}
/* The terminal page suppresses the sidebar, so the shell must not reserve the sidebar column. */
.shell.shell--frame{display:block;min-height:0}
.shell--frame .content:has(.terminal){padding:0}
/* Head: restaurant, online state, sound/pause, clock + freshness */
.terminal-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-4);padding:.65rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:0 .25rem 1rem #241d190a}
.terminal-restaurant{display:flex;align-items:center;gap:.75rem;line-height:1.3}
.terminal-restaurant strong{display:block;font-size:1.25rem}
.terminal-restaurant .muted{display:block}
.terminal-back{display:grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--color-border);border-radius:50%;color:var(--color-text)}
.terminal-state{display:flex;align-items:center;gap:.4rem;color:var(--color-success);font-weight:650}
.terminal-state-dot{width:.6rem;height:.6rem;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.terminal-state.is-paused{color:var(--color-danger)}
.terminal-head-tools{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-left:auto}
.terminal-pause-button{min-height:3.2rem;padding:0 1rem;background:var(--color-danger);font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.terminal-pause-button.is-paused{background:var(--color-success)}
.terminal-sound{min-height:3.2rem}
.terminal-clock{display:grid;justify-items:end;margin-left:auto;line-height:1.25;text-align:right}
.terminal-clock>strong{font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.1}
.terminal-live{display:flex;align-items:center;gap:.35rem;color:var(--color-success);font-size:.8rem;font-weight:650}
.terminal-live-dot{width:.55rem;height:.55rem;border-radius:50%;background:currentColor;animation:orders-pulse 2.4s ease-in-out infinite}
.terminal-live.is-offline{color:var(--color-danger)}
.terminal-live.is-offline .terminal-live-dot{animation:orders-pulse .9s ease-in-out infinite}
/* Freshness alert: unmissable when polling or the connection breaks */
.terminal-offline{display:flex;align-items:center;gap:1rem;padding:.75rem 1.1rem;border:2px solid var(--color-danger);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-danger) 8%,var(--color-surface));animation:orders-pulse 1.4s ease-in-out infinite}
.terminal-offline img{width:4rem;height:4rem;object-fit:cover;border-radius:50%}
.terminal-offline strong{color:var(--color-danger);font-size:1.1rem}
.terminal-offline p{margin:.1rem 0 0}
.terminal-offline-since{margin-left:auto;color:var(--color-danger);font-weight:750;white-space:nowrap}
/* Cross-view nudge: new orders waiting on the other view */
.terminal-notice{display:flex;align-items:center;gap:.9rem;padding:.65rem 1.1rem;border:2px solid color-mix(in srgb,var(--brand-primary) 45%,transparent);border-radius:var(--radius-md);background:var(--brand-accent)}
.terminal-notice>i{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:color-mix(in srgb,var(--brand-primary) 12%,transparent);color:var(--brand-primary);font-size:1.2rem;animation:orders-pulse 1.4s ease-in-out infinite}
.terminal-notice-copy{display:grid;line-height:1.3}
.terminal-notice-copy strong{color:var(--brand-primary)}
.terminal-notice-copy small{color:var(--color-muted)}
.terminal-notice-view{margin-left:auto;min-height:3rem}
/* Compact dashboard strip: time steppers + per-view key figures */
.terminal-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--space-3);align-items:stretch}
.terminal-time-card{display:grid;gap:.35rem;padding:.7rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.terminal-time-card h2{display:flex;align-items:center;gap:.45rem;margin:0;color:var(--color-muted);font-size:.8rem;letter-spacing:.05em;text-transform:uppercase}
.terminal-time-row{display:flex;align-items:center;gap:.6rem}
.terminal-time-value{display:grid;flex:1;justify-items:center;margin:0;font-size:2.3rem;font-weight:850;line-height:1;font-variant-numeric:tabular-nums}
.terminal-time-value small{margin-top:.05rem;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--color-muted)}
.terminal-time-step{min-width:3.2rem;min-height:3.2rem;padding:0;font-size:1.5rem;font-weight:800;line-height:1}
.terminal-kpi{display:grid;align-content:start;gap:.15rem;padding:.7rem .9rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);line-height:1.25;text-align:left}
.terminal-kpi>i{font-size:1.1rem;color:var(--color-muted)}
.terminal-kpi>small{color:var(--color-muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.terminal-kpi>strong{font-size:1.9rem;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums}
.terminal-kpi.is-alert{border-color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 7%,var(--color-surface))}
.terminal-kpi.is-alert>i,.terminal-kpi.is-alert>strong,.terminal-kpi.is-alert>small{color:var(--color-danger)}
.terminal-kpi-link{font:inherit;cursor:pointer}
.terminal-kpi-link:hover{border-color:var(--brand-primary)}
/* View switch */
.terminal-tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.terminal-tab{display:flex;align-items:center;justify-content:center;gap:.6rem;min-height:3.6rem;padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font:inherit;font-size:1.1rem;font-weight:750;cursor:pointer}
.terminal-tab.is-active{border-color:var(--brand-primary);background:var(--brand-primary);color:var(--brand-primary-contrast)}
.terminal-tab-count{display:grid;place-items:center;min-width:1.9rem;height:1.9rem;padding:0 .45rem;border-radius:1rem;background:color-mix(in srgb,currentColor 12%,transparent);font-size:1rem;font-variant-numeric:tabular-nums}
.terminal-tab.is-active .terminal-tab-count{background:#ffffff2e}
/* Order rows: status | time | order | customer | next action */
.terminal-orders{display:grid;gap:var(--space-3);align-content:start}
.terminal-row{display:grid;grid-template-columns:minmax(9rem,10rem) minmax(9.5rem,11rem) minmax(0,1.6fr) minmax(0,1.1fr) minmax(13rem,15rem);gap:.5rem 1.1rem;align-items:center;padding:.85rem 1.1rem .85rem .95rem;border:1px solid var(--color-border);border-left:.35rem solid var(--terminal-status-color,var(--color-border));border-radius:var(--radius-md);background:var(--color-surface);box-shadow:0 .25rem 1rem #241d190a}
.terminal-row.is-tappable{cursor:pointer}
.terminal-row.is-tappable:hover{border-color:color-mix(in srgb,var(--brand-primary) 45%,var(--color-border));border-left-color:var(--terminal-status-color,var(--color-border))}
.terminal-row.is-new{--terminal-status-color:var(--brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-primary) 18%,transparent)}
.terminal-row.is-accepted{--terminal-status-color:var(--color-muted)}
.terminal-row.is-in_preparation{--terminal-status-color:#c98a00}
.terminal-row.is-ready_for_pickup{--terminal-status-color:var(--color-success)}
.terminal-row.is-on_the_way{--terminal-status-color:#1a4fa0}
/* Column 1: processing status (never time criticality) */
.terminal-row-status{display:grid;gap:.3rem;justify-items:start;line-height:1.2}
.terminal-status-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem .6rem;border-radius:1rem;background:var(--color-canvas);color:var(--color-muted);font-size:.85rem;font-weight:750}
.terminal-status-dot{width:.55rem;height:.55rem;border-radius:50%;background:currentColor}
.terminal-status-badge.is-new{background:var(--brand-accent);color:var(--brand-primary);animation:orders-pulse 1.4s ease-in-out infinite}
.terminal-status-badge.is-in_preparation{background:#fff4d6;color:var(--color-warning)}
.terminal-status-badge.is-ready_for_pickup{background:#e8f7ef;color:var(--color-success)}
.terminal-status-badge.is-on_the_way{background:#e9effa;color:#1a4fa0}
.terminal-row-number{display:flex;align-items:center;gap:.5rem}
.terminal-row-number strong{font-size:1.3rem}
/* Column 2: the handover time — criticality lives ONLY here */
.terminal-row-time{display:grid;gap:.1rem;line-height:1.2}
.terminal-row-time-label{display:flex;align-items:center;gap:.1rem;color:var(--color-muted);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase}
.terminal-row-time-value{font-size:1.9rem;font-weight:850;line-height:1.1;font-variant-numeric:tabular-nums}
.terminal-row-countdown{font-weight:750}
.terminal-row-time-value.is-green,.terminal-row-countdown.is-green{color:var(--color-success)}
.terminal-row-time-value.is-yellow,.terminal-row-countdown.is-yellow{color:var(--color-warning)}
.terminal-row-time-value.is-red,.terminal-row-countdown.is-red{color:var(--color-danger)}
.terminal-row-countdown.is-neutral{color:var(--color-muted)}
/* Column 3: the order itself */
.terminal-row-items{display:grid;gap:.35rem;min-width:0}
.terminal-row-items .orders-items{margin:0}
.terminal-item-option{display:block;margin-left:2.7rem;font-weight:650}
.terminal-item-option.is-extra{color:var(--color-success)}
.terminal-item-option.is-removal{color:var(--color-danger)}
.terminal-item-component{display:block;margin-left:2.7rem;font-weight:750;font-size:1.05em}
.terminal-item-option.is-component{margin-left:3.9rem}
.terminal-row-note{display:flex;align-items:baseline;gap:.35rem;margin:0;padding:.35rem .6rem;border-radius:.5rem;background:#fff7e8;color:#6b4a00;font-size:.9rem}
/* Column 4: the customer */
.terminal-row-customer{display:grid;gap:.15rem;min-width:0;line-height:1.3}
.terminal-row-customer-name{font-weight:750}
.terminal-row-customer .orders-phone{color:inherit}
.terminal-row-total{color:var(--color-muted)}
/* Column 5: always the NEXT action, never the current state */
.terminal-row-action{display:grid;justify-items:stretch}
.terminal-primary{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:3.6rem;padding:.5rem 1rem;font-size:1rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.terminal-primary i{font-size:1.2rem}
.terminal-primary.is-new{animation:orders-pulse 1.4s ease-in-out infinite}
.terminal-row-accepted{display:grid;gap:.15rem;justify-items:start;padding:.6rem .8rem;border-radius:.6rem;background:#e8f7ef;color:var(--color-success);line-height:1.3}
.terminal-row-accepted small{color:color-mix(in srgb,var(--color-success) 75%,var(--color-text))}
/* Luigi closes every non-empty list — a full board never just stops */
.terminal-list-end{display:flex;align-items:center;gap:1.1rem;padding:.9rem 1.2rem;border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface)}
.terminal-list-end img{width:4.5rem;height:auto}
.terminal-list-end-copy{display:grid;gap:.1rem;line-height:1.35}
.terminal-list-end-copy p{margin:0;color:var(--color-muted)}
/* Preorder day groups */
.terminal-group{display:grid;gap:var(--space-3)}
.terminal-group+.terminal-group{margin-top:var(--space-3)}
.terminal-group-head{display:flex;align-items:center;gap:.6rem;padding:.1rem .2rem}
.terminal-group-head h2{margin:0;font-size:1.2rem}
.terminal-group-head i{color:var(--color-muted)}
/* Empty states: Luigi keeps the board friendly, never broken-looking */
.terminal-empty{display:grid;justify-items:center;gap:1rem;padding:clamp(1.5rem,6vw,3.5rem);border:1px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);text-align:center}
.terminal-empty img{width:min(11rem,45vw);height:auto}
.terminal-empty-copy{display:grid;gap:.3rem;max-width:34rem}
.terminal-empty-copy strong{font-size:1.35rem}
.terminal-empty-copy p{margin:0;color:var(--color-muted)}
/* Quick tiles */
.terminal-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:auto}
.terminal-tile{display:flex;align-items:center;justify-content:center;gap:.9rem;min-height:4.5rem;padding:.75rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text);font-weight:750;text-decoration:none}
.terminal-tile:hover{border-color:var(--brand-primary)}
.terminal-tile-icon{position:relative;display:grid;place-items:center;width:2.6rem;height:2.6rem;font-size:1.4rem}
.terminal-tile-badge{position:absolute;top:-.3rem;right:-.5rem;display:grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .3rem;border-radius:1rem;background:var(--color-danger);color:#fff;font-size:.85rem;font-weight:800}
.terminal-tile-hours span strong,.terminal-tile strong{display:block;font-size:1.25rem}
/* Detail dialog (special cases, kept off the main surface) */
.terminal-edit-dialog{width:min(34rem,calc(100% - 2rem))}
.terminal-edit-info{display:grid;gap:.25rem}
.terminal-edit-section{display:grid;gap:.6rem;padding-top:.75rem;border-top:1px solid var(--color-border)}
.terminal-edit-section h3{margin:0;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted)}
.terminal-edit-total{display:flex;justify-content:space-between;gap:1rem;margin:0;font-size:1.05rem}
.terminal-edit-total small{color:var(--color-muted)}
.terminal-edit-statuses{display:flex;flex-wrap:wrap;gap:.5rem}
.terminal-edit-statuses .button,.terminal-edit-danger .button{min-height:3rem}
.terminal-edit-danger{display:flex;flex-wrap:wrap;gap:.5rem}
.terminal-edit-payment{margin:0;color:var(--color-muted)}
@media(max-width:64rem){
.terminal-row{grid-template-columns:minmax(8rem,10rem) minmax(0,1fr) minmax(12rem,14rem);grid-template-areas:"status time action" "items items action" "customer customer action"}
.terminal-row-status{grid-area:status}
.terminal-row-time{grid-area:time;justify-items:end;text-align:right}
.terminal-row-items{grid-area:items}
.terminal-row-customer{grid-area:customer}
.terminal-row-action{grid-area:action;align-self:center}
}
@media(max-width:42rem){
.terminal-head{gap:var(--space-3)}
.terminal-clock{display:none}
.terminal-row{grid-template-columns:1fr 1fr;grid-template-areas:"status time" "items items" "customer customer" "action action"}
.terminal-row-action{justify-items:stretch}
.terminal-quick{grid-template-columns:1fr}
.terminal-offline-since{display:none}
}
/* Storefront redirect links: the "Teilen" dropdown (reusing the referral share
channels) plus the icon row linking to the restaurant's website and socials. */
.shop-links{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.1rem}
.shop-share-dropdown{position:relative}
.shop-share-button{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.05rem;border:1px solid var(--shop-border);border-radius:2rem;background:#fff;font-weight:650;cursor:pointer;list-style:none}
summary.shop-share-button::-webkit-details-marker{display:none}
.shop-share-button svg{width:1.05rem;height:1.05rem}
.shop-share-button:hover{border-color:var(--shop-primary);color:var(--shop-primary)}
.shop-share-menu{position:absolute;left:0;top:calc(100% + .5rem);z-index:9;display:grid;grid-template-columns:repeat(3,minmax(min(6.5rem,22vw),1fr));gap:.5rem;width:max-content;max-width:min(24rem,82vw);margin:0;padding:.6rem;list-style:none;border:1px solid var(--shop-border);border-radius:.9rem;background:#fff;box-shadow:0 .75rem 2.5rem #241d1926;transition:box-shadow .25s ease}
.shop-share-menu.is-highlighted{box-shadow:0 0 0 3px color-mix(in srgb,var(--shop-primary) 45%,transparent)}
.shop-share-menu a,.shop-share-menu button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;width:100%;min-height:4.5rem;padding:.6rem .4rem;border:1px solid transparent;border-radius:.7rem;color:inherit;background:transparent;font:inherit;font-size:.8rem;font-weight:600;text-align:center;text-decoration:none;cursor:pointer}
.shop-share-menu a:hover,.shop-share-menu button:hover{border-color:var(--shop-border);background:#faf9f7;color:inherit}
.shop-share-menu img{width:1.6rem;height:1.6rem}
.shop-share-toast{position:fixed;left:50%;bottom:1.5rem;z-index:30;margin:0;padding:.7rem 1.2rem;border-radius:2rem;color:#fff;background:#221f1d;font-weight:650;opacity:0;translate:-50% .5rem;transition:opacity .2s ease,translate .2s ease}
.shop-share-toast.is-visible{opacity:1;translate:-50% 0}
.shop-social{display:inline-flex;align-items:center;gap:.5rem}
.shop-social a{display:grid;place-items:center;width:2.35rem;height:2.35rem;border:1px solid var(--shop-border);border-radius:50%;color:var(--shop-muted);background:#fff}
.shop-social a:hover{border-color:var(--shop-primary);color:var(--shop-primary)}
.shop-social svg{width:1.15rem;height:1.15rem;fill:currentColor}
.shop-social-footer{margin-top:.8rem}
.shop-social-footer a{background:transparent}
.social-links-form{display:grid;gap:1rem;max-width:34rem}
@media (prefers-reduced-motion: reduce){
.shop-share-toast{transition:none;translate:-50% 0}
.shop-share-menu{transition:none}
}
/* ---- Guided menu wizard (manual step-by-step capture) ---- */
.menu-wizard-page .onboarding-main{padding-top:clamp(1.25rem,4vw,3rem)}
.menu-wizard{display:grid;grid-template-columns:minmax(0,1fr) clamp(18rem,26vw,23rem);gap:clamp(1.25rem,3vw,2rem);align-items:start;width:min(72rem,100%);margin-inline:auto}
.menu-wizard .mw-main{min-width:0}
.mw-header{display:grid;gap:1.1rem}
.mw-header h1{margin:0}
.mw-steps{display:flex;margin:0 0 .3rem;padding:0;list-style:none;color:var(--color-muted);font-size:.85rem}
.mw-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.4rem;flex:1;min-width:0;text-align:center}
.mw-steps li:not(:first-child)::before{content:"";position:absolute;top:1rem;right:calc(50% + 1.35rem);left:calc(-50% + 1.35rem);height:2px;border-radius:1px;background:var(--color-border)}
.mw-step-dot{display:inline-grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--color-border);border-radius:50%;background:#fff;font-size:.85rem;font-weight:700}
.mw-step-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-steps li.is-active{color:var(--brand-primary);font-weight:650}
.mw-steps li.is-active .mw-step-dot{border-color:var(--brand-primary);color:var(--brand-primary-contrast);background:var(--brand-primary);box-shadow:0 0 0 .25rem color-mix(in srgb, var(--brand-primary) 14%, transparent)}
.mw-card{padding:1.4rem 0 0;border:0;background:transparent}
.mw-card h2{margin:.2rem 0 .3rem}
.mw-intro{margin:0 0 1rem;color:var(--color-muted)}
.mw-section{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);gap:1rem 1.25rem;margin-bottom:.9rem;padding:1.15rem 1.3rem;border:1px solid var(--color-border);border-radius:.9rem;background:#fff}
.mw-section-label{display:flex;align-items:flex-start;gap:.75rem}
.mw-section-num{display:inline-grid;place-items:center;flex:0 0 auto;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--brand-primary);color:var(--brand-primary-contrast);font-size:.9rem;font-weight:700}
.mw-section-copy h2{margin:.1rem 0 0;font-size:1.05rem}
.mw-section-copy p{margin:.2rem 0 0;color:var(--color-muted);font-size:.9rem}
.mw-section-body{min-width:0;align-self:center}
.mw-input{width:100%;padding:.65rem .8rem;border:1px solid var(--color-border);border-radius:.55rem;font:inherit}
.mw-bubble-grid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 .4rem}
.mw-bubble{display:inline-flex;align-items:stretch;border:1px solid var(--brand-primary);border-radius:.7rem;background:#fff;overflow:hidden}
.mw-bubble-add{display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .3rem .55rem .8rem;border:0;background:transparent;color:var(--brand-primary);font:inherit;font-size:.95rem;cursor:pointer;min-height:2.7rem}
.mw-bubble-add b{font-weight:700}
.mw-bubble-hide{padding:0 .7rem;border:0;border-left:1px solid var(--color-border);background:transparent;color:var(--color-muted);font-size:.95rem;cursor:pointer}
.mw-bubble-hide:hover{color:var(--color-danger)}
.mw-bubble-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:52rem){.mw-bubble-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:36rem){.mw-bubble-cols{grid-template-columns:1fr}}
.mw-bubble-cols .mw-bubble{width:100%;background:color-mix(in srgb, var(--brand-primary) 4%, #fff)}
.mw-bubble-cols .mw-bubble-add{flex:1;min-width:0}
.mw-bubble-cols .mw-bubble-add span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mw-suggest-panel .mw-more{margin:.6rem 0 0}
.mw-added{margin:.9rem 0 0}
.mw-added .mw-entry-rows .mw-entry{border-color:var(--brand-primary);background:color-mix(in srgb, var(--brand-primary) 4%, #fff)}
.mw-added .mw-count{display:flex;align-items:center;justify-content:flex-end;gap:.4rem;margin:0 0 .55rem}
.mw-added .mw-count b{display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--color-success);color:#fff;font-size:.7rem}
.mw-more{margin:.2rem 0 .4rem;padding:0;border:0;background:none;color:var(--brand-primary);font:inherit;cursor:pointer}
.mw-panel{margin-bottom:.9rem;padding:1.05rem 1.2rem;border:1px solid var(--color-border);border-radius:.9rem;background:#fff}
.mw-panel-head{margin:0 0 .25rem;font-size:1.02rem}
.mw-panel-hint{margin:0 0 .8rem;color:var(--color-muted);font-size:.9rem}
.mw-type-filter{margin:0 0 .9rem}
.mw-type-filter .mw-panel-hint{margin-bottom:.4rem}
.mw-type-filter .mw-panel-hint span{font-size:.8rem}
.mw-type-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.mw-type-chip{padding:.35rem .75rem;border:1px solid var(--color-border);border-radius:2rem;background:#fff;color:var(--color-muted);font:inherit;font-size:.85rem;cursor:pointer}
.mw-type-chip:hover{border-color:var(--brand-primary)}
.mw-type-chip.is-selected{border-color:var(--brand-primary);background:color-mix(in srgb, var(--brand-primary) 8%, #fff);color:var(--brand-primary);font-weight:650}
.mw-suggest{display:inline-flex;align-items:center;justify-content:space-between;gap:.7rem;min-width:8.5rem;padding:.55rem .8rem;border:1px solid var(--color-border);border-radius:.7rem;background:#fff;font:inherit;font-size:.95rem;text-align:left;cursor:pointer}
.mw-suggest:hover{border-color:var(--brand-primary)}
.mw-suggest b{color:var(--brand-primary);font-weight:700}
.mw-empty{margin:.3rem 0 0;color:var(--color-muted);font-size:.9rem;font-style:italic}
.mw-entry-rows{display:grid;gap:.5rem;min-height:1rem}
.mw-entry-rows .mw-entry{display:flex;width:100%;padding:.3rem .45rem .3rem .6rem;background:#fff;border-color:var(--color-border)}
.mw-entry-rows .mw-entry input{flex:1;width:auto;min-width:0}
.mw-entry-rows .mw-entry-remove{margin-left:auto;color:var(--color-danger)}
.mw-undo{display:flex;align-items:center;gap:.4rem;margin:.4rem 0;color:var(--color-muted);font-size:.9rem}
.mw-link{padding:0;border:0;background:none;color:var(--brand-primary);font:inherit;cursor:pointer;text-decoration:underline}
.mw-list-hint{margin:.4rem 0 .6rem;color:var(--color-muted);font-size:.85rem}
.mw-entry{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .3rem .25rem .55rem;border:1px solid var(--brand-primary);border-radius:.7rem;background:color-mix(in srgb, var(--brand-primary) 6%, #fff)}
.mw-entry.is-dragging{opacity:.5}
.mw-drag{cursor:grab;color:var(--brand-primary);font-size:.9rem}
.mw-entry input{padding:.35rem .4rem;border:1px solid transparent;border-radius:.45rem;background:transparent;font:inherit}
.mw-entry input:focus{border-color:var(--color-border);background:#fff;outline:none}
.mw-entry-remove{display:inline-grid;place-items:center;width:1.9rem;height:1.9rem;border:0;border-radius:.5rem;background:transparent;color:var(--color-muted);font-size:1rem;cursor:pointer}
.mw-entry-remove:hover{color:var(--color-danger);background:#fff1f0}
.mw-custom-row{display:flex;gap:.5rem;margin:.6rem 0 0}
.mw-custom-row input{flex:1;min-width:0;width:auto;padding:.55rem .7rem;border:1px dashed var(--brand-primary);border-radius:.55rem;background:#fff;font:inherit}
.mw-custom-row .button{flex-shrink:0}
@media (max-width:36rem){.mw-custom-row{flex-wrap:wrap}}
.mw-toggle{display:flex;align-items:center;gap:.5rem;margin:.9rem 0 .2rem;cursor:pointer}
.mw-count{margin:.7rem 0 0;color:var(--color-success);font-size:.9rem}
.mw-choice-list{display:grid;gap:.6rem;margin-bottom:.4rem}
.mw-choice{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;border:1px solid var(--color-border);border-radius:.7rem;background:#fff;font:inherit;text-align:left;cursor:pointer}
.mw-choice b{display:inline-grid;place-items:center;flex:0 0 auto;width:1.6rem;height:1.6rem;border:1px solid var(--color-border);border-radius:50%;color:var(--color-muted);font-size:.75rem}
.mw-choice.is-selected{border-color:var(--brand-primary);box-shadow:0 0 0 1px var(--brand-primary) inset}
.mw-choice.is-selected b{border-color:var(--brand-primary);color:var(--brand-primary-contrast);background:var(--brand-primary)}
.mw-choice-radio b{position:relative;width:1.35rem;height:1.35rem;border-radius:50%}
.mw-choice-radio b::after{content:"";position:absolute;inset:.28rem;border-radius:50%;background:transparent}
.mw-choice-radio.is-selected b{border-color:var(--brand-primary);background:#fff}
.mw-choice-radio.is-selected b::after{background:var(--brand-primary)}
.mw-choice-radio span{display:grid;gap:.1rem;min-width:0}
.mw-choice-radio small{color:var(--color-muted)}
.mw-type{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border:1px solid var(--color-border);border-radius:.7rem;background:#fff;font:inherit;font-size:.92rem;cursor:pointer}
.mw-type svg{width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--color-muted)}
.mw-type:hover{border-color:var(--brand-primary)}
.mw-type.is-selected{border-color:var(--brand-primary);box-shadow:0 0 0 1px var(--brand-primary) inset;background:color-mix(in srgb, var(--brand-primary) 7%, #fff);color:var(--brand-primary);font-weight:650}
.mw-type.is-selected svg{color:var(--brand-primary)}
.mw-type-grid{display:flex;flex-wrap:wrap;gap:.55rem;align-content:flex-start}
.mw-schedule{margin:.6rem 0 .2rem}
.mw-window{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:.55rem;padding:.55rem .7rem;border:1px solid var(--color-border);border-radius:.7rem;background:#fff}
.mw-days{display:inline-flex;flex-wrap:wrap;gap:.3rem}
.mw-day{display:inline-grid;place-items:center;min-width:2.4rem;padding:.35rem .45rem;border:1px solid var(--color-border);border-radius:.55rem;font-size:.85rem;color:var(--color-muted);cursor:pointer;user-select:none}
.mw-day.is-selected{border-color:var(--brand-primary);color:var(--brand-primary-contrast);background:var(--brand-primary);font-weight:650}
.mw-window-times{display:inline-flex;align-items:center;gap:.6rem;margin-left:auto}
.mw-window-times label{display:inline-flex;align-items:center;gap:.35rem;font-size:.9rem;color:var(--color-muted)}
.mw-window-times input{padding:.4rem .5rem;border:1px solid var(--color-border);border-radius:.5rem;font:inherit}
.mw-actions{display:flex;justify-content:space-between;gap:.8rem;margin-top:1.4rem}
.mw-actions .button{min-height:2.9rem}
.mw-error{margin:0 0 .8rem;padding:.6rem .8rem;border:1px solid #f0c7c2;border-radius:.6rem;background:#fdf1ef;color:#a32218}
.mw-aside{position:sticky;top:6rem;display:grid;gap:1rem;align-content:start}
.mw-side{padding:1.1rem 1.2rem;border:1px solid var(--color-border);border-radius:.9rem;background:#fff}
.mw-side-title{margin:0 0 .75rem;font-size:1.15rem}
.mw-side-list{display:grid;gap:.5rem}
.mw-side-item{display:flex;align-items:center;gap:.6rem;width:100%;padding:.7rem .8rem;border:1px solid var(--color-border);border-radius:.7rem;background:#fff;color:var(--color-muted);font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.mw-side-item:hover{border-color:var(--brand-primary)}
.mw-side-item b{display:inline-grid;place-items:center;flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--color-border);font-size:.7rem}
.mw-side-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-text);font-weight:600}
.mw-side-item small{flex:0 0 auto;font-size:.82rem}
.mw-side-item i{flex:0 0 auto;color:var(--color-muted);font-style:normal;font-size:1.05rem}
.mw-side-item.is-done b{color:#fff;background:var(--color-success)}
.mw-side-item.is-current{border-color:var(--brand-primary);box-shadow:inset .25rem 0 0 var(--brand-primary);background:color-mix(in srgb, var(--brand-primary) 4%, #fff)}
.mw-side-item.is-current span{color:var(--brand-primary)}
.mw-side-item.is-current.is-done b{background:var(--brand-primary)}
@media (max-width: 62rem){.menu-wizard{grid-template-columns:1fr}.mw-aside{position:static;max-width:34rem}}
@media (max-width: 48rem){.mw-section{grid-template-columns:1fr;gap:.8rem;padding:1rem}.mw-section-body{align-self:auto}.mw-steps{font-size:.72rem}.mw-step-dot{width:1.7rem;height:1.7rem;font-size:.78rem}.mw-steps li:not(:first-child)::before{top:.85rem;right:calc(50% + 1.1rem);left:calc(-50% + 1.1rem)}}
/* ---- Group order list ("Bestelliste") ------------------------------------------------ */
.orderlist-invite { display:grid; place-items:start center; padding:2.5rem 1rem 4rem; min-height:70vh; }
.orderlist-invite-card { width:100%; max-width:420px; background:#fff; border-radius:1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.08); padding:2.5rem 1.75rem; text-align:center; display:grid; gap:.65rem; justify-items:center; }
.orderlist-invite-icon { display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:50%; background:color-mix(in srgb, var(--shop-primary) 12%, #fff); color:var(--shop-primary); }
.orderlist-invite-icon svg { width:2.4rem; height:2.4rem; }
.orderlist-invite-lead { margin:0; color:#5f6368; }
.orderlist-invite-host { margin:0; font-weight:700; font-size:1.15rem; }
.orderlist-invite-name { margin:0; font-weight:800; font-size:1.5rem; color:var(--shop-primary); }
.orderlist-invite-restaurant { margin:.35rem 0 0; font-weight:700; color:#221f1d; }
.orderlist-invite-explainer { margin:0 0 .35rem; font-size:.88rem; color:#5f6368; }
.orderlist-invite-validity, .orderlist-countdown { margin:0; font-size:.85rem; color:#8a8f98; }
.orderlist-invite-state { margin:1rem 0; font-weight:600; }
.orderlist-join-form { display:grid; gap:.9rem; width:100%; margin-top:.75rem; }
.orderlist-join-button, .orderlist-pay-link { display:block; width:100%; border:0; border-radius:.9rem; background:var(--shop-primary); color:#fff; font-weight:700; font-size:1.05rem; padding:.9rem 1.25rem; text-align:center; text-decoration:none; cursor:pointer; }
.orderlist-join-button:hover, .orderlist-pay-link:hover { filter:brightness(.94); color:#fff; }
.orderlist-guest-name { display:grid; gap:.35rem; text-align:left; }
.orderlist-guest-name input, .orderlist-create-form input, .orderlist-create-form select, .orderlist-settings input, .orderlist-settings select { width:100%; border:1px solid #d7d3cf; border-radius:.6rem; padding:.6rem .75rem; font:inherit; }
.orderlist-error { margin:.5rem 0 0; color:#b3261e; font-weight:600; }
.orderlist-create { display:grid; place-items:start center; padding:2.5rem 1rem 4rem; }
.orderlist-create-card { width:100%; max-width:520px; background:#fff; border-radius:1.25rem; box-shadow:0 10px 40px rgba(0,0,0,.08); padding:2rem 1.75rem; }
.orderlist-create-card h1 { font-size:1.5rem; }
.orderlist-create-sub { color:#5f6368; }
.orderlist-create-form { display:grid; gap:.6rem; margin-top:1rem; }
.orderlist-create-form label { font-weight:600; margin-top:.4rem; }
.orderlist-payment-toggle { margin-top:.4rem; }
.orderlist-payment-toggle summary { list-style:none; cursor:pointer; color:var(--shop-primary); font-weight:600; }
.orderlist-payment-toggle summary::-webkit-details-marker { display:none; }
.orderlist-payment-toggle summary::before { content:'+'; display:inline-block; width:1.1rem; font-weight:800; }
.orderlist-payment-toggle[open] summary::before { content:'–'; }
.orderlist-payment-fields { display:grid; gap:.35rem; margin-top:.5rem; }
.orderlist-payment-help, .orderlist-payment-fields small { color:#8a8f98; font-size:.82rem; }
.orderlist-active-lists { margin:1rem 0; padding:.75rem 1rem; background:#faf7f4; border-radius:.75rem; }
.orderlist-active-lists h2 { font-size:1rem; }
.orderlist-active-lists ul { margin:0; padding-left:1.1rem; }
.orderlist-hero { padding:1.25rem 1rem .5rem; max-width:1200px; margin:0 auto; width:100%; }
.orderlist-hero-head { display:flex; flex-wrap:wrap; gap:.75rem; justify-content:space-between; align-items:start; }
.orderlist-hero-kicker { margin:0; font-size:.85rem; color:#8a8f98; }
.orderlist-hero h1 { margin:.1rem 0; font-size:1.6rem; }
.orderlist-hero-restaurant { margin:0; color:#5f6368; }
.orderlist-hero-state { display:grid; gap:.3rem; justify-items:end; }
.orderlist-status { display:inline-block; padding:.25rem .7rem; border-radius:2rem; font-size:.8rem; font-weight:700; background:#e8f5e9; color:#1b7f3b; }
.orderlist-status-locked, .orderlist-status-checkout { background:#fff3e0; color:#b45309; }
.orderlist-status-ordered { background:#e3f2fd; color:#1565c0; }
.orderlist-status-cancelled { background:#fdecea; color:#b3261e; }
.orderlist-share { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:.9rem 0; padding:.7rem .9rem; border:1px dashed color-mix(in srgb, var(--shop-primary) 45%, #fff); border-radius:.75rem; background:color-mix(in srgb, var(--shop-primary) 5%, #fff); }
/* The host's message to the group ("Firma zahlt") — a small speech-bubble note. */
.orderlist-host-message { margin:.75rem 0 0; padding:.55rem .9rem; border-radius:.75rem; background:color-mix(in srgb, var(--shop-primary) 8%, #fff); border-left:3px solid var(--shop-primary); font-size:.95rem; color:#221f1d; }
.orderlist-host-message .orderlist-host-message-label { display:block; font-size:.78rem; font-weight:600; color:#8a8f98; }
.orderlist-host-message q { font-weight:600; }
.orderlist-invite-message { text-align:left; width:100%; margin:.35rem 0; }
.orderlist-share-url { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; flex:1 1 12rem; color:var(--shop-primary); }
.orderlist-participants { display:flex; gap:1rem; overflow-x:auto; padding:.4rem 0; }
.orderlist-participant { display:grid; justify-items:center; gap:.25rem; min-width:4.2rem; font-size:.85rem; }
.orderlist-participant.is-you .orderlist-avatar { outline:2px solid var(--shop-primary); outline-offset:2px; }
.orderlist-avatar { display:grid; place-items:center; width:2.6rem; height:2.6rem; border-radius:50%; background:color-mix(in srgb, var(--shop-primary) 16%, #fff); color:var(--shop-primary); font-weight:800; overflow:hidden; }
/* The hero-strip icon is a button: tapping it jumps to that member's block in
the group panel. Bare reset — the avatar span inside stays the visual. */
.orderlist-avatar-button { display:grid; border:0; background:none; padding:0; margin:0; cursor:pointer; border-radius:50%; }
.orderlist-avatar-button:focus-visible { outline:2px solid var(--shop-primary); outline-offset:2px; }
/* Brief highlight on the member block a jump landed on. */
.orderlist-member.is-jump-target { outline:2px solid var(--shop-primary); outline-offset:1px; transition:outline-color .2s ease; }
.orderlist-avatar img { width:100%; height:100%; object-fit:cover; }
.orderlist-avatar-lg { width:3.6rem; height:3.6rem; font-size:1.4rem; }
.orderlist-own-hint { margin:.25rem 0 0; font-size:.85rem; color:#8a8f98; }
.orderlist-empty { position:relative; display:grid; justify-items:center; gap:.4rem; text-align:center; margin:0 0 1.25rem; padding:2.5rem 1.5rem 2.25rem; border-radius:1.1rem; background:linear-gradient(180deg, color-mix(in srgb, var(--shop-primary) 9%, #fff), color-mix(in srgb, var(--shop-primary) 4%, #fff)); overflow:hidden; }
.orderlist-empty-scene { position:relative; display:grid; place-items:center; padding:0 4.5rem; }
.orderlist-empty-luigi { width:190px; max-width:45vw; height:auto; filter:drop-shadow(0 12px 24px rgba(0,0,0,.12)); }
.orderlist-empty-tagline { position:absolute; left:-1.5rem; top:38%; max-width:9.5rem; transform:rotate(-8deg); font-family:'Segoe Script','Bradley Hand',cursive; font-weight:700; font-size:1.15rem; line-height:1.25; color:var(--shop-primary); }
.orderlist-empty-plane { position:absolute; right:-2.25rem; top:.25rem; width:7.5rem; height:auto; color:var(--shop-primary); opacity:.85; }
.orderlist-empty-headline { margin:.75rem 0 0; font-size:1.75rem; font-weight:800; }
.orderlist-empty-text { margin:0; max-width:32rem; color:#5f6368; font-size:1.05rem; }
.orderlist-empty-copy { display:inline-flex; align-items:center; gap:.5rem; margin-top:1rem; border:0; border-radius:.75rem; background:var(--shop-primary); color:#fff; font:inherit; font-weight:700; font-size:1rem; padding:.8rem 1.6rem; cursor:pointer; box-shadow:0 6px 18px color-mix(in srgb, var(--shop-primary) 35%, transparent); }
.orderlist-empty-copy:hover { filter:brightness(.94); }
.orderlist-empty-copy svg { width:1.1rem; height:1.1rem; }
@media (max-width: 640px) {
.orderlist-empty { padding:1.75rem 1rem; }
.orderlist-empty-scene { padding:0 2.5rem; }
.orderlist-empty-tagline { position:static; transform:rotate(-4deg); margin-bottom:.35rem; max-width:none; }
.orderlist-empty-plane { display:none; }
.orderlist-empty-headline { font-size:1.35rem; }
}
.orderlist-order-note { max-width:1200px; margin:.5rem auto; width:calc(100% - 2rem); padding:.9rem 1.1rem; border-radius:.75rem; background:#e3f2fd; color:#1565c0; font-weight:600; }
.orderlist-order-note p { margin:.15rem 0; }
.orderlist-layout-closed { grid-template-columns:1fr; }
.orderlist-panel { display:grid; gap:1rem; align-content:start; }
@media(max-width:800px){
/* While the selection is open the panel is the shop cart overlay: hidden until
opened via the cart buttons, closable again (the base display:grid above must
not override the overlay's display:none). */
.orderlist-page[data-storefront] .orderlist-panel { display:none; }
.orderlist-page[data-storefront].cart-open .orderlist-panel { display:grid; }
/* A locked/ordered list renders no cart buttons — the panel sits in the page flow. */
.orderlist-page:not([data-storefront]) .orderlist-panel { position:static; display:grid; max-height:none; border-radius:.8rem; }
}
.orderlist-own-items { display:grid; gap:.5rem; }
.orderlist-done { display:grid; gap:.4rem; }
.orderlist-done-hint { margin:0; font-size:.78rem; color:#8a8f98; }
/* The green "done selecting" check next to a participant's name (hero strip and
member blocks). min/max pin the size against any flex sizing of the context. */
.orderlist-done-check { display:inline-grid; place-items:center; flex:none; width:1.05rem; min-width:1.05rem; max-width:1.05rem; height:1.05rem; border-radius:50%; background:#1b7f3b; color:#fff; vertical-align:text-bottom; }
.orderlist-done-check svg { width:.68rem; height:.68rem; }
.orderlist-payment { display:grid; gap:.5rem; }
.orderlist-payment-disclaimer { margin:0; font-size:.78rem; color:#8a8f98; }
/* Both buttons pair with the backend .button class, which sets a white text color
(--brand-primary-contrast) and a primary shadow — on these white buttons the
label would be invisible, so color and shadow are pinned here. */
.orderlist-secondary-button { background:#fff; border:1px solid #d7d3cf; color:#221f1d; border-radius:.7rem; padding:.55rem .9rem; font-weight:600; cursor:pointer; width:100%; box-shadow:none; }
.orderlist-secondary-button:hover { color:#221f1d; }
.orderlist-secondary-button:disabled { opacity:.55; cursor:default; }
.orderlist-danger-button { background:#fff; border:1px solid #e6b0aa; color:#b3261e; border-radius:.7rem; padding:.55rem .9rem; font-weight:600; cursor:pointer; width:100%; box-shadow:none; }
.orderlist-danger-button:hover { color:#b3261e; }
.orderlist-group { border-top:1px solid #eee7e0; padding-top:1rem; display:grid; gap:.6rem; }
.orderlist-group-head { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.orderlist-group-head h2 { font-size:1.05rem; margin:0; }
.orderlist-group-head span { font-size:.85rem; color:#1b7f3b; font-weight:700; }
.orderlist-group-total { display:flex; justify-content:space-between; font-weight:700; }
.orderlist-group-unavailable { margin:0; font-size:.83rem; color:#b45309; }
.orderlist-members { display:grid; gap:.75rem; }
.orderlist-member { border:1px solid #eee7e0; border-radius:.8rem; padding:.7rem .8rem; display:grid; gap:.45rem; }
.orderlist-member header { display:flex; align-items:center; gap:.55rem; }
.orderlist-member header b { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.orderlist-member header .orderlist-avatar { width:2rem; height:2rem; font-size:.9rem; }
.orderlist-paid-badge { font-size:.72rem; font-weight:700; padding:.15rem .5rem; border-radius:2rem; white-space:nowrap; }
.orderlist-paid-open { background:#fff3e0; color:#b45309; }
.orderlist-paid-reported_paid { background:#e3f2fd; color:#1565c0; }
.orderlist-paid-confirmed_paid { background:#e8f5e9; color:#1b7f3b; }
.orderlist-member-items { list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.orderlist-member-items li { display:flex; align-items:center; gap:.5rem; font-size:.88rem; }
.orderlist-member-items li span { flex:1; }
.orderlist-member-items li.is-unavailable { color:#b3261e; text-decoration:line-through; }
.orderlist-member-items li { align-items:flex-start; }
.orderlist-member-items li b { white-space:nowrap; }
/* Item descriptions: collapsed by default, revealed per line via the info
button or permanently via the group switch (body.orderlist-shows-descriptions). */
.orderlist-item-info { display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; margin:-.1rem 0 0 .25rem; padding:0; border:0; border-radius:50%; background:none; color:var(--shop-muted); vertical-align:middle; cursor:pointer; }
.orderlist-item-info svg { width:1rem; height:1rem; }
.orderlist-item-info:hover, .orderlist-item-info[aria-expanded="true"] { color:var(--shop-primary); }
.orderlist-item-description { display:none; margin-top:.15rem; color:var(--shop-muted); font-size:.8rem; line-height:1.35; text-decoration:none; }
.orderlist-member-items li.is-expanded .orderlist-item-description, .orderlist-shows-descriptions .orderlist-item-description { display:block; }
.orderlist-shows-descriptions .orderlist-item-info { display:none; }
.orderlist-descriptions-toggle { display:flex; align-items:center; gap:.45rem; font-size:.85rem; color:var(--shop-muted); cursor:pointer; }
.orderlist-descriptions-toggle[hidden] { display:none; }
.orderlist-descriptions-toggle input { width:auto; margin:0; accent-color:var(--shop-primary); }
.orderlist-item-remove { border:0; background:none; color:#b3261e; font-size:1rem; cursor:pointer; line-height:1; }
.orderlist-member-actions { display:flex; gap:.5rem; }
.orderlist-member-actions .button, .orderlist-member-actions button { flex:1; }
.orderlist-host-controls { border-top:1px solid #eee7e0; padding-top:1rem; display:grid; gap:.6rem; }
.orderlist-settings summary { cursor:pointer; font-weight:600; }
.orderlist-settings form { display:grid; gap:.45rem; margin-top:.6rem; }
/* Reopening an expired list carries a compact "open again for …" select. */
.orderlist-reopen-form { display:grid; gap:.45rem; }
.orderlist-leave { border-top:1px solid #eee7e0; padding-top:1rem; }
.orderlist-confirm-dialog { width:min(24rem,calc(100% - 2rem)); padding:0; border:0; border-radius:1rem; box-shadow:0 20px 80px #0005; }
.orderlist-confirm-dialog::backdrop { background:#15100c99; }
.orderlist-confirm-dialog form { display:grid; gap:.6rem; justify-items:center; padding:1.75rem 1.5rem; text-align:center; }
.orderlist-confirm-icon { display:grid; place-items:center; width:3.25rem; height:3.25rem; border-radius:50%; background:#fdecea; color:#b3261e; }
.orderlist-confirm-icon svg { width:1.7rem; height:1.7rem; }
.orderlist-confirm-dialog h2 { margin:0; font-size:1.2rem; }
.orderlist-confirm-dialog p { margin:0; color:#5f6368; }
.orderlist-confirm-actions { display:flex; gap:.6rem; width:100%; margin-top:.6rem; }
.orderlist-confirm-actions button { flex:1; }
.orderlist-confirm-proceed { background:#b3261e; border:0; border-radius:.7rem; color:#fff; padding:.55rem .9rem; font-weight:600; cursor:pointer; }
.orderlist-confirm-proceed:hover { filter:brightness(.92); }
.orderlist-page .shop-header .header-actions { align-items:center; }
@media (max-width: 900px) {
.orderlist-hero { padding-top:1rem; }
.orderlist-share-url { flex-basis:100%; }
}
/* Backend topbar: tenant context, future search, and account actions live in the
shared application header rather than competing with the sidebar navigation. */
.shell { grid-template-rows: auto minmax(0, 1fr); }
.admin-sidebar { grid-row: 1 / -1; }
/* The account track is capped with fit-content() so long display names truncate
inside it instead of widening the header and squeezing the restaurant track. */
.backend-topbar { position: sticky; top: 0; z-index: 7; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 28rem) fit-content(18rem); column-gap: 1rem; grid-column: 2; align-items: center; min-height: 4.75rem; padding: .55rem clamp(1rem, 3vw, 2rem); border-bottom: 1px solid var(--color-border); background: color-mix(in srgb, #fff 94%, transparent); box-shadow: 0 .15rem .8rem #241d1908; backdrop-filter: blur(12px); }
.backend-topbar details { position: relative; min-width: 0; }
.backend-restaurant-context { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.backend-restaurant-menu { min-width: 0; }
.backend-topbar summary { display: flex; align-items: center; gap: .7rem; width: fit-content; max-width: 100%; padding: .3rem .5rem; border-radius: .65rem; list-style: none; cursor: pointer; }
.backend-topbar summary::-webkit-details-marker { display: none; }
.backend-topbar summary:hover { background: var(--color-canvas); }
.backend-restaurant-logo, .backend-option-logo { display: grid; flex: none; place-items: center; overflow: hidden; border-radius: 50%; color: var(--brand-primary); background: var(--brand-accent); font-weight: 800; }
.backend-restaurant-logo { width: 2.8rem; height: 2.8rem; border: 1px solid var(--color-border); }
.backend-restaurant-logo img, .backend-option-logo img { width: 100%; height: 100%; object-fit: cover; }
.backend-option-logo { width: 2.2rem; height: 2.2rem; }
.backend-topbar-copy { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; line-height: 1.25; }
.backend-topbar-copy strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.backend-topbar-copy small { color: var(--color-muted); font-size: .75rem; }
.backend-topbar-copy .badge { justify-self: start; max-width: 100%; overflow: hidden; padding: .12rem .45rem; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.backend-storefront-link { display: inline-flex; flex: none; align-items: center; gap: .35rem; padding: .5rem .65rem; border: 1px solid var(--color-border); border-radius: .55rem; color: var(--brand-primary); background: #fff; font-size: .78rem; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.backend-storefront-link:hover { border-color: var(--brand-primary); color: var(--brand-primary-contrast); background: var(--brand-primary); }
.backend-topbar-chevron { flex: none; margin-left: .15rem; color: var(--color-muted); font-size: .7rem; transition: transform .15s ease; }
.backend-topbar details[open] > summary .backend-topbar-chevron { transform: rotate(180deg); }
.backend-search { display: flex; align-items: center; gap: .65rem; width: 100%; min-width: 0; min-height: 2.65rem; padding: .35rem .55rem .35rem .8rem; border: 1px solid var(--color-border); border-radius: .65rem; color: var(--color-muted); background: var(--color-canvas); }
body:not(.storefront):not(.onboarding) .backend-search input[type="search"] { min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.backend-search input::placeholder { color: #8d8379; }
.backend-search kbd { flex: none; padding: .18rem .4rem; border: 1px solid var(--color-border); border-radius: .35rem; color: var(--color-muted); background: #fff; box-shadow: 0 1px 2px #241d1912; font: 600 .72rem/1.2 var(--font-sans); }
.backend-user-menu { justify-self: end; }
.backend-user-menu summary { padding-left: .75rem; border-left: 1px solid var(--color-border); border-radius: 0 .65rem .65rem 0; }
.backend-user-menu .user-avatar { flex: none; width: 2.55rem; height: 2.55rem; }
.backend-dropdown { position: absolute; top: calc(100% + .6rem); z-index: 10; display: grid; min-width: 15rem; padding: .45rem; border: 1px solid var(--color-border); border-radius: .75rem; background: #fff; box-shadow: 0 .8rem 2.5rem #241d1926; }
.backend-restaurant-options { left: .25rem; min-width: 18rem; }
.backend-user-options { right: 0; }
.backend-dropdown a, .backend-dropdown button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 0; padding: .6rem .7rem; border: 0; border-radius: .5rem; color: var(--color-text); background: transparent; font: inherit; font-size: .88rem; text-align: left; text-decoration: none; cursor: pointer; }
.backend-dropdown a:hover, .backend-dropdown button:hover, .backend-dropdown a[aria-current="page"] { color: var(--color-text); background: var(--color-canvas); }
.backend-dropdown a > span:not(.backend-option-logo) { display: grid; flex: 1; min-width: 0; }
.backend-dropdown a strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.backend-dropdown a small { color: var(--color-muted); }
.backend-dropdown hr { width: 100%; margin: .35rem 0; border: 0; border-top: 1px solid var(--color-border); }
.backend-dropdown form { margin: 0; }
/* Global search: grouped command-center flyout anchored under the header search. */
.backend-search-wrap { position: relative; min-width: 0; }
.backend-search:focus-within { border-color: var(--brand-primary); color: var(--color-text); }
.backend-search-flyout { position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%); z-index: 10; width: min(46rem, calc(100vw - 21rem)); max-height: min(70vh, 34rem); overflow-y: auto; padding: .55rem; border: 1px solid var(--color-border); border-radius: .75rem; background: #fff; box-shadow: 0 .8rem 2.5rem #241d1926; }
.gs-group { display: grid; padding: .2rem 0 .35rem; }
.gs-group + .gs-group { border-top: 1px solid var(--color-border); }
.gs-group-title { margin: .35rem .7rem; color: var(--color-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.gs-option { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: .5rem; color: var(--color-text); font-size: .88rem; text-decoration: none; }
.gs-option > .bi { flex: none; color: var(--color-muted); }
.gs-option-main { display: grid; flex: 1; min-width: 0; }
.gs-option-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-option-meta { overflow: hidden; color: var(--color-muted); text-overflow: ellipsis; white-space: nowrap; }
.gs-option-detail { flex: none; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.gs-option.is-active, .gs-option:hover, .gs-more.is-active, .gs-more:hover { background: var(--color-canvas); }
.gs-option.is-active > .bi { color: var(--brand-primary); }
.gs-more { display: block; padding: .45rem .7rem; border-radius: .5rem; color: var(--brand-primary); font-size: .82rem; text-decoration: none; }
.gs-note { margin: .4rem .7rem .55rem; color: var(--color-muted); font-size: .88rem; }
.gs-note-error { color: #9b3127; }
.gs-skeleton { height: 2.4rem; margin: .2rem 0; border-radius: .5rem; background: linear-gradient(90deg, #f2ede8, #faf7f4, #f2ede8) 0 0 / 200% 100%; animation: gs-shimmer 1.1s linear infinite; }
@keyframes gs-shimmer { to { background-position: -200% 0; } }
/* Deep-link focus from a search hit: briefly highlight the targeted row/card. */
.is-search-target { animation: gs-target 2.4s ease; }
@keyframes gs-target { 0%, 55% { background-color: color-mix(in srgb, var(--brand-accent) 60%, #fff); } 100% { background-color: transparent; } }
@media (max-width: 991.98px) {
.backend-topbar { display: none; }
.admin-sidebar { grid-row: auto; }
}
/* The topbar only gets the viewport minus the 17rem sidebar, so the compact header
must start well above 72rem: between ~1150px and ~1500px the full storefront link
ran over the restaurant name and status badge. */
@media (max-width: 96rem) and (min-width: 992px) {
.backend-topbar { grid-template-columns: minmax(0, 1fr) minmax(11rem, 1fr) auto; }
.backend-search-wrap { max-width: 22rem; }
.backend-storefront-link { width: 2.3rem; height: 2.3rem; justify-content: center; overflow: hidden; padding: 0; font-size: 0; }
.backend-storefront-link i { font-size: .9rem; }
.backend-user-menu .backend-topbar-copy { display: none; }
}
/* Keep the referral card aligned with the first navigation row. Context/account
controls move into the offcanvas navigation when the desktop topbar is hidden. */
.sidebar-nav a.sidebar-referral { margin-top: 0; }
@media (min-width: 992px) {
/* The offcanvas header is hidden on desktop, so the sidebar body starts at the
viewport top next to the 4.75rem topbar. Trim the top padding so the ~3.4rem
referral card is vertically centered on the topbar's restaurant switcher. */
.admin-sidebar .sidebar-body { padding-top: .65rem; }
}
.mobile-sidebar-only { display: none; }
@media (max-width: 991.98px) {
.mobile-sidebar-only { display: block; }
.restaurant-switcher.mobile-sidebar-only { margin-top: 0; }
}
/* -------------------------------------------------------------------------
Menu manager ("Speisekarte" page): calm category cards with compact item
rows, feature-icon popovers, batch bar and sidebar. */
.mm-lede { margin: .35rem 0 0; color: var(--color-muted); max-width: 46rem; }
/* On narrow screens the tab strip scrolls within itself instead of widening the whole
page (which made the entire screen pan sideways); app.js scrolls the active tab into view. */
.mm-tabs { display: flex; gap: .25rem; margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mm-tabs::-webkit-scrollbar { display: none; }
.mm-tab { flex: none; padding: .6rem 1rem; border-bottom: 2px solid transparent; color: var(--color-muted); font-weight: 600; text-decoration: none; white-space: nowrap; }
@media (max-width: 40rem) { .mm-tab { padding: .6rem .7rem; } }
.mm-tab:hover { color: var(--color-text); }
.mm-tab.is-active { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.mm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-6); align-items: start; }
@media (max-width: 991.98px) { .mm-layout { grid-template-columns: 1fr; } .mm-side { order: 2; } }
.mm-main { min-width: 0; }
.mm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: var(--space-4); }
.mm-search { display: flex; flex: 1 1 16rem; align-items: center; gap: .5rem; min-width: 12rem; padding: .55rem .85rem; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-surface); color: var(--color-muted); }
.mm-search input { flex: 1; border: 0; background: transparent; font: inherit; color: var(--color-text); outline: none; }
.mm-filter select { padding: .55rem .6rem; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-surface); font: inherit; }
.mm-reset { align-self: center; font-size: var(--text-sm); }
.mm-result-count { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); }
.mm-categories { display: grid; gap: var(--space-4); }
.mm-category { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mm-category.is-dragging { opacity: .45; }
.mm-category.is-inactive .mm-cat-title h2 { color: var(--color-muted); }
.mm-cat-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem; cursor: pointer; }
.mm-cat-title { display: grid; flex: 1; min-width: 0; }
.mm-cat-title h2 { margin: 0; font-size: 1.1rem; }
.mm-cat-meta { color: var(--color-muted); font-size: .82rem; }
.mm-collapse { border: 0; background: transparent; color: var(--color-muted); cursor: pointer; padding: .35rem; transition: transform .15s ease; }
.mm-category.is-collapsed .mm-collapse { transform: rotate(180deg); }
.mm-category.is-collapsed .mm-items, .mm-category.is-collapsed .mm-cat-foot { display: none; }
.mm-drag { border: 0; background: transparent; color: var(--color-muted); cursor: grab; padding: .35rem .15rem; }
.mm-switch { display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .85rem; color: var(--color-muted); }
.mm-switch input { position: absolute; opacity: 0; }
.mm-switch-track { width: 2.3rem; height: 1.25rem; border-radius: 1rem; background: #d9d0c9; position: relative; transition: background .15s ease; flex: none; }
.mm-switch-track::after { content: ''; position: absolute; top: .14rem; left: .16rem; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 3px #0003; }
.mm-switch input:checked + .mm-switch-track { background: var(--color-success); }
.mm-switch input:checked + .mm-switch-track::after { transform: translateX(1rem); }
.mm-switch input:focus-visible + .mm-switch-track { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.mm-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.mm-item { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 55%, transparent); }
.mm-item:last-of-type { border-bottom: 0; }
.mm-item.is-selected { background: #fdf6ec; }
.mm-item.is-dragging { opacity: .45; }
.mm-item[data-status="INACTIVE"] .mm-item-name a, .mm-item[data-status="DRAFT"] .mm-item-name a { color: var(--color-muted); }
.mm-select { width: 1.05rem; height: 1.05rem; flex: none; }
.mm-thumb { width: 44px; height: 44px; flex: none; border-radius: .55rem; object-fit: cover; }
.mm-thumb-link { flex: none; display: inline-flex; border-radius: .55rem; }
.mm-thumb-link:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.mm-thumb-empty { display: grid; place-items: center; background: #f3eee8; font-size: 1.2rem; }
.mm-item-main { display: grid; flex: 1; min-width: 0; gap: .1rem; }
.mm-item-name { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.mm-item-name a { color: inherit; font-weight: 650; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-item-name a:hover { text-decoration: underline; }
.mm-code { color: var(--color-muted); }
.mm-item-desc { color: var(--color-muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-features { display: flex; align-items: center; gap: .3rem; flex: none; }
.mm-feature { position: relative; display: inline-flex; align-items: center; gap: .15rem; min-width: 1.9rem; height: 1.9rem; padding: 0 .4rem; justify-content: center; border: 1px solid var(--color-border); border-radius: .5rem; background: var(--color-surface); color: #4d6b52; font-size: .95rem; cursor: default; }
.mm-feature .mm-count { font-size: .74rem; font-weight: 700; color: var(--color-text); }
.mm-feature.is-warning { color: var(--color-warning); border-color: color-mix(in srgb, var(--color-warning) 40%, var(--color-border)); background: #fdf6e7; }
.mm-feature.is-muted { color: var(--color-muted); }
.mm-diet { font-size: .68rem; font-weight: 800; letter-spacing: .02em; }
.mm-diet-vegetarian { color: #19714a; background: #e9f5ed; border-color: #cfe8d8; }
.mm-diet-vegan { color: #14603e; background: #dff2e6; border-color: #bfe3cd; }
.mm-price { flex: none; min-width: 4.5rem; text-align: right; color: var(--color-muted); font-variant-numeric: tabular-nums; font-size: .88rem; }
.mm-menu { position: relative; flex: none; }
.mm-menu summary { list-style: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; color: var(--color-muted); cursor: pointer; }
.mm-menu summary::-webkit-details-marker { display: none; }
.mm-menu summary:hover { background: #f5efe9; color: var(--color-text); }
.mm-menu menu { position: absolute; right: 0; top: 2.2rem; z-index: 9; display: grid; min-width: 13rem; margin: 0; padding: .35rem; list-style: none; border: 1px solid var(--color-border); border-radius: .65rem; background: var(--color-surface); box-shadow: 0 10px 34px #241d1926; }
.mm-menu menu li { display: contents; }
.mm-menu menu a, .mm-menu menu button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .65rem; border: 0; border-radius: .45rem; background: transparent; color: var(--color-text); font: inherit; font-size: .88rem; text-align: left; text-decoration: none; cursor: pointer; }
.mm-menu menu a:hover, .mm-menu menu button:hover:not(:disabled) { background: #f7f1ec; }
.mm-menu menu button:disabled { color: var(--color-muted); cursor: not-allowed; }
.mm-menu menu .mm-danger { color: var(--color-danger); }
.mm-quick .mm-danger:not(:disabled), .mm-bulk-bar .mm-danger { color: var(--color-danger); }
.mm-empty, .mm-no-results { padding: .9rem 1rem; margin: 0; color: var(--color-muted); font-size: .88rem; }
.mm-empty-state { padding: var(--space-8); border: 1px dashed var(--color-border); border-radius: var(--radius-md); text-align: center; color: var(--color-muted); display: grid; gap: var(--space-4); justify-items: center; }
.mm-cat-foot { padding: .55rem 1rem .8rem; }
.mm-side { display: grid; gap: var(--space-4); position: sticky; top: var(--space-4); }
.mm-side-card { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.mm-side-card h3 { margin: 0 0 .5rem; font-size: .98rem; }
.mm-side-muted { color: var(--color-muted); font-size: .85rem; margin: .25rem 0; }
.mm-side-batch { border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--color-border)); background: #fdf3f1; }
.mm-status-line { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.mm-status-issues { margin: .6rem 0 .25rem; padding: .5rem .65rem; border: 1px solid color-mix(in srgb, var(--color-warning) 45%, var(--color-border)); border-radius: .55rem; background: #fdf6e7; color: #8a5a12; font-size: .84rem; }
.mm-status-issues p { margin: 0; }
.mm-status-issues ul { margin: .3rem 0 0; padding-left: 1.15rem; }
.mm-status-issues a { color: inherit; font-weight: 600; }
.mm-status-time { margin: .5rem 0 .25rem; color: var(--color-muted); font-size: .84rem; }
.mm-status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #c9c0b8; }
.mm-status-dot.is-online { background: var(--color-success); }
.mm-quick { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .3rem; }
.mm-quick a, .mm-quick button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .5rem .6rem; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: var(--color-text); font: inherit; font-size: .88rem; text-align: left; text-decoration: none; cursor: pointer; }
.mm-quick a:hover, .mm-quick button:hover:not(:disabled) { border-color: var(--color-border); background: var(--color-surface); }
.mm-quick button:disabled { color: var(--color-muted); cursor: not-allowed; }
.mm-legend { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; color: var(--color-muted); font-size: .84rem; }
.mm-legend li { display: flex; align-items: center; gap: .55rem; }
.mm-popover { position: fixed; z-index: 40; width: max-content; min-width: 14rem; max-width: 20rem; max-height: 19rem; overflow-y: auto; padding: .85rem 1rem; border: 1px solid var(--color-border); border-radius: .7rem; background: var(--color-surface); box-shadow: 0 14px 44px #241d192e; font-size: .87rem; }
.mm-popover h4 { margin: .35rem 0 .3rem; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-muted); }
.mm-popover h4:first-child { margin-top: 0; }
.mm-popover ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.mm-popover li { display: flex; justify-content: space-between; gap: 1rem; }
.mm-popover p { margin: .25rem 0 0; }
.mm-pop-price { color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-pop-warning { color: var(--color-warning); }
.mm-bulk-bar { position: fixed; left: 50%; bottom: 1.25rem; z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; max-width: min(64rem, calc(100vw - 2rem)); padding: .7rem 1rem; border: 1px solid var(--color-border); border-radius: .9rem; background: var(--color-surface); box-shadow: 0 16px 48px #241d1933; transform: translateX(-50%); }
.mm-bulk-bar [data-bulk-count] { font-weight: 700; white-space: nowrap; }
.mm-bulk-buttons { display: flex; flex-wrap: wrap; gap: .4rem; }
.mm-bulk-bar .button { min-height: 2.1rem; padding: .3rem .7rem; font-size: .84rem; box-shadow: none; }
.mm-bulk-clear { border: 0; background: transparent; color: var(--color-muted); font: inherit; font-size: .84rem; cursor: pointer; text-decoration: underline; }
/* Two fixed rows inside the bulk bar: actions on top, "Alle auswählen"/"Auswahl aufheben" always on their own line below. */
.mm-bulk-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; flex-basis: 100%; }
.mm-bulk-select-row { gap: 1.1rem; padding-top: .45rem; border-top: 1px solid var(--color-border); }
/* Autosaving menu settings page ("Einstellungen" tab). */
#menu-settings .pd-statusbar { margin-bottom: var(--space-4); }
/* Settings form: one calm column like the category form — labels stacked above their
controls, related fields side by side, each checkbox on its own line with its hint below.
The cover fieldset deliberately avoids the storefront's .menu-cover (an ![]()
rule with a
max-height that clipped the fieldset and let its buttons spill onto the next section). */
.menu-settings-form { max-width: 48rem; }
.menu-settings-form fieldset { display: grid; gap: var(--space-4); }
.menu-settings-form fieldset > label, .menu-settings-row > label { display: grid; gap: .4rem; margin: 0; font-weight: 650; }
.menu-settings-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); }
.menu-settings-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu-settings-form .menu-settings-check, .menu-settings-check > label { display: flex; align-items: flex-start; gap: .35rem; margin: 0; font-weight: 600; }
.menu-settings-form div.menu-settings-check { display: grid; gap: .2rem; }
.menu-settings-check input { flex: none; margin: .2rem 0 0; }
.menu-settings-check > .menu-settings-hint { padding-left: 1.45rem; font-weight: 400; }
.menu-settings-choices { display: grid; gap: .5rem; }
.menu-settings-hint { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
/* Preorder hint of the menu settings (menu/_preorder_coverage.html.twig) and the post editor. */
.menu-preorder-coverage { display: grid; gap: var(--space-3, .75rem); }
.menu-preorder-coverage > :first-child { margin-top: var(--space-2, .5rem); }
.menu-preorder-warning, .post-form-preorder-hint { padding: .8rem 1rem; border: 1px solid #f0d9a8; border-radius: var(--radius-md, .6rem); color: #4d3a12; background: #fff8e6; font-size: var(--text-sm, .875rem); }
.menu-preorder-warning p, .post-form-preorder-hint p { margin: 0 0 .5rem; }
.menu-preorder-warning ul, .post-form-preorder-hint ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
.menu-preorder-warning a, .post-form-preorder-hint a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.menu-preorder-warning-title { font-weight: 650; }
.menu-preorder-warning-title i { color: var(--color-warning); }
.menu-settings-muted { color: var(--color-muted); font-weight: 400; }
.menu-settings-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.menu-settings-actions .button { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-weight: 650; }
.menu-settings-cover .menu-cover-preview { width: 100%; max-width: 24rem; height: auto; aspect-ratio: 16 / 9; margin: 0; object-fit: cover; border-radius: var(--radius-md); }
.menu-settings-translations > h2 { margin: var(--space-6) 0 var(--space-1); font-size: 1.25rem; }
.menu-settings-translations > .menu-settings-hint { margin-bottom: var(--space-4); }
.menu-settings-form textarea { min-height: 5.5rem; }
.menu-settings-form .schedule-rows { margin: 0; }
.menu-settings-form .schedule-rows:empty { display: none; }
.menu-settings-form [data-schedule-add] { justify-self: start; }
.menu-settings-form fieldset > p:has(> small:only-child) { margin: 0; }
/* .button and .menu-cover-preview set a display that would otherwise beat [hidden]. */
.menu-settings-form [hidden] { display: none; }
@media (max-width: 42rem) { .menu-settings-row, .menu-settings-row--even { grid-template-columns: minmax(0, 1fr); } }
.mm-dialog { width: min(30rem, calc(100vw - 2rem)); padding: 0; border: 0; border-radius: .9rem; box-shadow: 0 24px 80px #0005; }
.mm-dialog::backdrop { background: #15100c80; }
.mm-dialog form { display: grid; gap: .8rem; padding: 1.25rem; }
.mm-dialog h3 { margin: 0; }
.mm-dialog-wide { width: min(38rem, calc(100vw - 2rem)); }
.mm-modes { display: flex; gap: 1rem; margin: 0; padding: 0; border: 0; font-size: .9rem; }
.mm-modes label { display: inline-flex; align-items: center; gap: .35rem; }
.mm-dialog-list { display: grid; gap: .15rem; max-height: 16rem; overflow-y: auto; padding: .35rem; border: 1px solid var(--color-border); border-radius: .6rem; }
.mm-dialog-list label { display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: .4rem; font-size: .9rem; }
.mm-dialog-list label:hover { background: #f7f1ec; }
.mm-dialog-list label.is-disabled { color: var(--color-muted); }
.mm-dialog-check { display: flex; align-items: center; gap: .55rem; font-size: .88rem; }
.mm-dialog-field { display: grid; gap: .3rem; font-size: .9rem; }
.mm-dialog-field input, .mm-dialog-field select { padding: .5rem .6rem; border: 1px solid var(--color-border); border-radius: .55rem; font: inherit; }
.mm-dialog footer { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .25rem; }
.mm-dialog form > p { margin: 0; }
.page-header-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* "KI Bilder generieren" progress modal: one row per product with live state and the
finished thumbnail. Declared after the .mm-dialog base rules — the dialog has no inner