/* ════════════════════════════════════════════════════════════════
 * Audimax — Saalplan & Pre-Order Page
 * Full-page replacement for the previous popup widget.
 * Design: cinematic dark theme, full-bleed canvas, sticky cart,
 * keyboard + screen-reader friendly, mobile-first.
 * ════════════════════════════════════════════════════════════════ */

/* ────────── HERO ────────── */
.ax-saal-hero {
    position: relative;
    min-height: 38vh;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ax-velvet, #2a1a17) 0%, var(--ax-ink, #0D0D10) 100%);
    padding: 5rem clamp(1rem, 4vw, 2.5rem) 3rem;
}
.ax-saal-hero__bg { position: absolute; inset: 0; z-index: 0; }
.ax-saal-hero__img {
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.32;
    transform: scale(1.06);
    filter: saturate(1.05) contrast(1.06);
}
.ax-saal-hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(13,13,16,0.60) 0%, rgba(13,13,16,0.92) 100%),
        radial-gradient(ellipse at 30% 90%, rgba(232,167,60,0.18) 0%, transparent 60%);
}

.ax-saal-hero__back {
    position: absolute; top: 1.2rem; left: clamp(1rem, 4vw, 2.5rem);
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: rgba(13,13,16,0.55);
    border: 1px solid rgba(232,167,60,0.40);
    color: var(--ax-paper, #F4EDE0);
    font-family: var(--ax-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(8px);
    z-index: 5;
    transition: background .2s, border-color .2s, transform .2s;
}
.ax-saal-hero__back:hover { background: rgba(232,167,60,0.12); border-color: var(--ax-amber, #E8A73C); transform: translateX(-2px); }
.ax-saal-hero__back:focus-visible { outline: 3px solid var(--ax-amber); outline-offset: 3px; }

.ax-saal-hero__content {
    position: relative; z-index: 2;
    max-width: 1200px; margin: 0 auto;
}
.ax-saal-hero__title {
    font-family: var(--ax-display, 'Playfair Display', Georgia, serif);
    font-size: clamp(2.1rem, 5vw, 4rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ax-paper);
    margin: 0 0 1.75rem;
    text-wrap: balance;
}
.ax-saal-hero__steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    max-width: 920px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ax-saal-step;
}
.ax-saal-hero__steps li {
    display: grid;
    grid-template-columns: 2rem 1fr;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    color: var(--ax-paper);
    font-family: var(--ax-mono);
    font-size: clamp(0.72rem, 1.25vw, 0.84rem);
    line-height: 1.4;
    counter-increment: ax-saal-step;
}
.ax-saal-hero__steps li::before {
    content: counter(ax-saal-step) ".";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--ax-amber);
    color: var(--ax-ink);
    background: var(--ax-amber);
    font-weight: 800;
}

/* ────────── PAUSE TABS ────────── */
.ax-saal-tabs {
    background: rgba(13,13,16,0.92);
    border-top: 1px solid rgba(232,167,60,0.20);
    border-bottom: 1px solid rgba(232,167,60,0.20);
    position: sticky; top: var(--ax-nav-height); z-index: 60;
    backdrop-filter: blur(12px);
}
.ax-saal-tabs .ax-container {
    display: flex; gap: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
}
.ax-saal-tab {
    flex: 0 0 auto;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 4px;
    padding: 16px 22px;
    border: none;
    border-right: 1px solid rgba(232,167,60,0.15);
    background: transparent;
    color: var(--ax-paper);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
    scroll-snap-align: start;
    text-align: left;
}
.ax-saal-tab:hover { background: rgba(232,167,60,0.08); }
.ax-saal-tab.is-active {
    background: rgba(232,167,60,0.14);
    border-bottom: 3px solid var(--ax-amber);
    box-shadow: inset 0 -3px 0 var(--ax-amber);
}
.ax-saal-tab:focus-visible { outline: 3px solid var(--ax-amber); outline-offset: -3px; }
.ax-saal-tab__label {
    font-family: var(--ax-display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.ax-saal-tab__time {
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    letter-spacing: 0.10em;
    color: rgba(244,237,224,0.62);
}
.ax-saal-tab__free {
    font-family: var(--ax-mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: var(--ax-amber);
}
.ax-saal-tab__free.is-low { color: #d96666; }

/* ────────── STAGE GRID ────────── */
.ax-saal-stage { padding: 3rem 0 4rem; background: var(--ax-ink); }
.ax-saal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(360px, 1fr);
    gap: 2.5rem;
    align-items: start;
}
@media (max-width: 980px) {
    .ax-saal-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
/* Grid-Items duerfen nicht breiter als ihre Spur werden. Mit dem Standard
   `min-width: auto` legte WebKit Plan und Korb bei 390 px Breite auf 596-687 px
   an (gemessen 18.09.2026 mit WebKit 26.5, auch auf der ausgelieferten Seite):
   die «+» lagen bei x=536 ausserhalb des Bildschirms, und der Hinweis zum
   Bestellschluss waere rechts abgeschnitten. Chromium war nicht betroffen. */
.ax-saal-floor,
.ax-saal-cart { min-width: 0; }

/* ────────── FLOOR (left col) ────────── */
.ax-saal-floor { display: flex; flex-direction: column; gap: 1.25rem; }
.ax-saal-floor__head {
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem;
}
.ax-saal-h2 {
    font-family: var(--ax-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ax-paper);
    margin: 4px 0 0;
}
.ax-saal-floor__legend { display: flex; gap: 12px; flex-wrap: wrap; }
.ax-saal-legend {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--ax-mono);
    font-size: 0.7rem; letter-spacing: 0.10em;
    color: rgba(244,237,224,0.65);
}
.ax-saal-legend__sw {
    position: relative;
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid;
    border-radius: 50%;
}
.ax-saal-legend__sw--free {
    background: var(--ax-amber);
    border-style: dashed;
    border-color: #684407;
}
.ax-saal-legend__sw--taken {
    background: repeating-linear-gradient(45deg, #9f2f2f 0, #9f2f2f 3px, #f4ede0 3px, #f4ede0 4px);
    border-color: #651919;
}
.ax-saal-legend__sw--selected {
    background: #187548;
    border-color: #0b452b;
}
.ax-saal-legend__sw--selected::after {
    content: "✓";
    position: absolute;
    inset: -3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
}

/* Room tabs (Davide 2026-08-04, Punkt 2: Mehrraum-Auswahl muss als Auswahl
   erkennbar sein — Hinweiszeile + einmaliger Impuls auf den nicht gewaehlten
   Raeumen; flex-wrap statt Scrollen, damit auf Mobil ALLE Raeume sichtbar
   sind und nichts hinter einer Kante liegt) */
.ax-saal-rooms__hint {
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--ax-amber);
    margin: 0 0 8px;
}
.ax-saal-rooms__list { display: flex; gap: 6px; flex-wrap: wrap; }
.ax-saal-room {
    display: inline-flex; align-items: center;
    min-height: 44px; /* Touch-Target auch auf Mobil */
    padding: 8px 16px;
    background: rgba(244,237,224,0.05);
    border: 1px solid rgba(244,237,224,0.42);
    color: var(--ax-paper);
    font-family: var(--ax-mono);
    font-size: 0.74rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s;
}
.ax-saal-room.is-active {
    background: var(--ax-amber);
    color: var(--ax-ink);
    border-color: var(--ax-amber);
}
.ax-saal-room:hover { border-color: var(--ax-amber); }
.ax-saal-room:focus-visible { outline: 3px solid var(--ax-amber); outline-offset: 2px; }

/* Einmaliger Aufmerksamkeits-Impuls: 3 sanfte Pulse (~5 s inkl. Verzögerung),
   dann Ruhe — kein Dauergeflacker. JS entfernt die Klasse zusätzlich bei der
   ersten Interaktion. */
@keyframes ax-room-nudge {
    0%, 100% { border-color: rgba(244,237,224,0.42); box-shadow: 0 0 0 0 rgba(232,167,60,0); }
    50%      { border-color: var(--ax-amber);        box-shadow: 0 0 0 5px rgba(232,167,60,0.18); }
}
.ax-saal-room--nudge { animation: ax-room-nudge 1.4s ease-in-out 0.8s 3; }
@media (prefers-reduced-motion: reduce) {
    /* Keine Bewegung: statische Hervorhebung, bis der Gast das erste Mal
       mit den Raum-Tabs interagiert. */
    .ax-saal-room--nudge {
        animation: none;
        border-color: rgba(232,167,60,0.65);
        box-shadow: 0 0 0 1px rgba(232,167,60,0.30);
    }
}

/* Canvas */
.ax-saal-canvas-wrap { display: flex; flex-direction: column; gap: 8px; position: relative; }
.ax-saal-canvas {
    position: relative;
    touch-action: pan-y;
    background:
        repeating-linear-gradient(0deg, rgba(244,237,224,0.04) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(90deg, rgba(244,237,224,0.04) 0 1px, transparent 1px 36px),
        radial-gradient(ellipse at 50% 60%, rgba(232,167,60,0.06), transparent 70%),
        var(--ax-ink-soft, #15151a);
    border: 1px solid rgba(232,167,60,0.25);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(244,237,224,0.04);
    outline-offset: 4px;
}
.ax-saal-canvas:focus-visible { outline: 3px solid var(--ax-amber); }
.ax-saal-canvas.is-zoomed { touch-action: none; cursor: grab; }
.ax-saal-canvas.is-zoomed.is-gesturing { cursor: grabbing; }
/* Zoom-/Pan-Ebene: bewegt Hintergrund + Tische gemeinsam */
.ax-saal-canvas__zoom {
    position: absolute; inset: 0;
    transform-origin: 0 0;
    transform: translate(0px, 0px) scale(1);
    transition: transform 0.18s ease;
    will-change: transform;
}
.ax-saal-canvas.is-gesturing .ax-saal-canvas__zoom { transition: none; }
.ax-saal-canvas__inner { position: absolute; inset: 0; }

/* Zoom-Steuerung (mobile-first, 44px Trefferflächen) */
.ax-saal-zoom {
    position: absolute; right: 10px; bottom: 10px; z-index: 6;
    display: flex; flex-direction: column; gap: 6px;
}
.ax-saal-zoom__btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(21,21,26,0.80);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(232,167,60,0.45);
    border-radius: 10px;
    color: var(--ax-paper, #f4ede0);
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, transform 0.08s ease;
}
.ax-saal-zoom__btn svg { width: 20px; height: 20px; }
.ax-saal-zoom__btn:hover { background: rgba(232,167,60,0.22); border-color: rgba(232,167,60,0.70); }
.ax-saal-zoom__btn:active { transform: scale(0.94); }
.ax-saal-zoom__btn:focus-visible { outline: 3px solid var(--ax-amber); outline-offset: 2px; }
.ax-saal-zoom__btn:disabled { opacity: 0.40; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
    .ax-saal-canvas__zoom { transition: none; }
}
.ax-saal-canvas__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; opacity: 0.92; z-index: 0;
}
.ax-saal-canvas__hint {
    margin: 0; padding: 0;
    font-family: var(--ax-mono);
    font-size: 0.72rem; letter-spacing: 0.08em;
    color: rgba(244,237,224,0.55);
    text-align: center;
}

.ax-saal-canvas__loader,
.ax-saal-canvas__empty,
.ax-saal-canvas__error {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem;
    color: rgba(244,237,224,0.55);
    font-family: var(--ax-mono); font-size: 0.84rem; letter-spacing: 0.04em;
    text-align: center;
}
.ax-saal-spinner {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 2px solid rgba(232,167,60,0.20);
    border-top-color: var(--ax-amber);
    animation: ax-saal-spin 720ms linear infinite;
}
@keyframes ax-saal-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ax-saal-spinner { animation: none; } }

/* ────────── TABLES ────────── */
.ax-saal-table {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    background: var(--ax-amber);
    border: 2px solid #684407;
    color: var(--ax-ink, #1c1813);
    font-family: var(--ax-mono);
    font-size: clamp(0.62rem, 1.2vw, 0.78rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 4px 12px -4px rgba(0,0,0,0.5);
    transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
    padding: 0;
    min-width: 44px;
    min-height: 44px;
}
.ax-saal-table.is-free { border-style: dashed; }
.ax-saal-table:hover:not(:disabled) {
    background: var(--ax-amber-bright);
    border-color: #684407;
    transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.06);
    box-shadow: 0 6px 18px -4px rgba(232,167,60,0.4);
    z-index: 4;
}
.ax-saal-table:focus-visible {
    outline: 3px solid var(--ax-amber);
    outline-offset: 4px;
    z-index: 5;
}
.ax-saal-table--round { border-radius: 50%; }
.ax-saal-table--rect { border-radius: 4px; }
.ax-saal-table.is-taken {
    background:
        repeating-linear-gradient(45deg, transparent 0, transparent 3px, rgba(244,237,224,0.34) 3px, rgba(244,237,224,0.34) 5px),
        #9f2f2f;
    border-color: #651919;
    color: #fff;
    cursor: not-allowed;
}
.ax-saal-table.is-taken:hover { transform: translate(-50%, -50%); }
.ax-saal-table.is-selected {
    background: #187548;
    border-color: #0b452b;
    border-style: solid;
    color: #fff;
    z-index: 6;
    box-shadow: 0 0 0 3px rgba(11,69,43,0.35), 0 8px 22px -4px rgba(11,69,43,0.65);
    animation: ax-saal-pop 280ms cubic-bezier(.2,.7,.3,1.4);
}
.ax-saal-table.is-selected::after {
    content: "✓";
    position: absolute;
    top: -10px;
    right: -10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #0b452b;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
}
@keyframes ax-saal-pop {
    0%   { transform: translate(-50%, -50%) scale(0.85); }
    60%  { transform: translate(-50%, -50%) scale(1.12); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .ax-saal-table.is-selected { animation: none; }
}
.ax-saal-table__label { pointer-events: none; }

/* ────────── KI panel ────────── */
.ax-saal-ki {
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(135deg, rgba(232,167,60,0.08), rgba(232,167,60,0.02));
    border: 1px solid rgba(232,167,60,0.30);
    padding: 16px 20px;
    border-radius: 4px;
}
.ax-saal-ki__icon { font-size: 1.6rem; }
.ax-saal-ki__body {
    flex: 1; color: rgba(244,237,224,0.78); font-size: 0.86rem; line-height: 1.5;
}
.ax-saal-ki__body strong { color: var(--ax-paper); margin-right: 4px; }
.ax-saal-ki__btn {
    flex-shrink: 0;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--ax-amber);
    color: var(--ax-amber);
    font-family: var(--ax-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s, color .18s;
}
.ax-saal-ki__btn:hover { background: var(--ax-amber); color: var(--ax-ink); }
.ax-saal-ki__btn:focus-visible { outline: 3px solid var(--ax-amber); outline-offset: 2px; }

/* ────────── CART (right col, sticky) ────────── */
.ax-saal-cart {
    position: sticky;
    top: calc(var(--ax-nav-height) + 70px); /* nav + pause-tabs */
    background: rgba(244,237,224,0.03);
    border: 1px solid rgba(244,237,224,0.10);
    padding: 1.5rem;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    border-radius: 6px;
}
@media (max-width: 980px) {
    .ax-saal-cart { position: static; max-height: none; }
}
.ax-saal-cart__head { margin-bottom: 1.25rem; }
.ax-saal-h3 {
    font-family: var(--ax-display);
    font-size: 1.1rem;
    color: var(--ax-paper);
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.ax-saal-cart__placeholder {
    padding: 14px;
    text-align: center;
    color: rgba(244,237,224,0.62); /* WCAG: war 4.04:1 (fail) → ~5.5:1 (UX-Audit) */
    font-family: var(--ax-mono);
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    border: 1px dashed rgba(244,237,224,0.18);
    margin-bottom: 1rem;
}
.ax-saal-cart__table-card {
    position: relative;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(232,167,60,0.14), rgba(232,167,60,0.04));
    border: 1px solid rgba(232,167,60,0.40);
    margin-bottom: 1rem;
    border-radius: 4px;
}
.ax-saal-cart__table-num {
    font-family: var(--ax-display);
    font-size: 1.3rem;
    color: var(--ax-amber);
    font-weight: 700;
}
.ax-saal-cart__table-meta {
    font-family: var(--ax-mono);
    font-size: 0.75rem;
    color: rgba(244,237,224,0.65);
    letter-spacing: 0.06em;
}
.ax-saal-cart__remove {
    position: absolute; top: 2px; right: 4px;
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0;
    color: rgba(244,237,224,0.55);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    border-radius: 4px;
}
.ax-saal-cart__remove:hover { color: var(--ax-paper); background: rgba(244,237,224,0.06); }
.ax-saal-cart__remove:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }

/* Menu within cart */
.ax-saal-cart__menu-section { margin-bottom: 1.25rem; }
.ax-saal-cart__menu-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 0.5rem;
}
.ax-saal-cart__menu-head .ax-saal-h3 { margin: 0; }
/* Sul telefono l'impaginazione va gia' bene (Alyssa, 18.08.2026: «Mobile
   Version sehr gut geloest. Auf der Webansicht fehlt es leider noch»): qui si
   tocca solo il desktop. Le categorie vanno SOTTO il titolo, non di fianco, e
   "Deine Bestellung" pesa come "Dein Tisch" — erano due titoli di pari
   grado scritti in due misure diverse. */
@media (min-width: 761px) {
    .ax-saal-cart__menu-head { flex-direction: column; align-items: stretch; }
    .ax-saal-cart__menu-head .ax-saal-cats { justify-content: flex-start; }
    .ax-saal-cart__menu-head .ax-saal-h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
}
.ax-saal-cart__menu-hint {
    color: rgba(244,237,224,0.55);
    font-size: 0.78rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

/* Kategorie-Leiste (Punkt 3b): umbrechende Chips — bei 2-6 Kategorien bleiben
   so alle sichtbar, auch auf schmalen Screens; kein verstecktes Scrollen. */
.ax-saal-cats {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    margin: 0;
    min-width: 0;
}
.ax-saal-cat-chip {
    display: inline-flex; align-items: center;
    min-height: 36px;
    padding: 6px 12px;
    background: rgba(244,237,224,0.05);
    border: 1px solid rgba(244,237,224,0.42);
    border-radius: 999px;
    color: rgba(244,237,224,0.85);
    font-family: var(--ax-mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
}
.ax-saal-cat-chip:hover { border-color: var(--ax-amber); color: var(--ax-paper); }
.ax-saal-cat-chip:focus-visible { outline: 3px solid var(--ax-amber); outline-offset: 2px; }
.ax-saal-cat-chip.is-active {
    background: var(--ax-amber);
    border-color: var(--ax-amber);
    color: var(--ax-ink);
}

.ax-saal-menu { display: flex; flex-direction: column; gap: 0.5rem; }
.ax-saal-menu__group { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.ax-saal-menu__cat {
    color: var(--ax-amber);
    margin-bottom: 0.25rem;
}
.ax-saal-menu__loader,
.ax-saal-menu__empty {
    padding: 14px;
    text-align: center;
    color: rgba(244,237,224,0.45);
    font-family: var(--ax-mono);
    font-size: 0.78rem;
}
.ax-saal-menu-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
        "body price"
        "body qty";
    gap: 4px 12px;
    padding: 12px 14px;
    background: rgba(244,237,224,0.04);
    border: 1px solid rgba(244,237,224,0.10);
    border-radius: 4px;
    transition: border-color .2s, background .2s;
}
.ax-saal-menu-item:hover { border-color: rgba(232,167,60,0.40); }
.ax-saal-menu-item.has-qty {
    background: rgba(232,167,60,0.08);
    border-color: rgba(232,167,60,0.50);
}
/* Produktfoto aus dem Riservati-Shop — nur wenn eins hinterlegt ist, sonst
   bleibt das Zwei-Spalten-Raster unverändert. */
.ax-saal-menu-item.has-thumb {
    grid-template-columns: 56px 1fr auto;
    grid-template-areas:
        "thumb body price"
        "thumb body qty";
}
.ax-saal-menu-item__thumb {
    grid-area: thumb;
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 3px;
    align-self: start;
    background: rgba(244,237,224,0.06);
}
.ax-saal-menu-item__body { grid-area: body; }
.ax-saal-menu-item__name {
    font-weight: 600; font-size: 0.92rem; color: var(--ax-paper);
}
.ax-saal-menu-item__desc {
    font-size: 0.78rem; color: rgba(244,237,224,0.65); margin-top: 2px;
}
.ax-saal-menu-item__allergens {
    font-family: var(--ax-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: rgba(244,237,224,0.40);
    margin-top: 4px;
}
.ax-saal-menu-item__price {
    grid-area: price;
    font-family: var(--ax-mono);
    font-size: 0.86rem; font-weight: 600;
    color: var(--ax-amber);
    align-self: start;
}
.ax-saal-menu-item__qty {
    grid-area: qty;
    display: inline-flex; align-items: center; gap: 8px;
    align-self: end; justify-self: end;
    /* Fix Tobi/Felix 2026-06-25 (Design 7): kein Doppeltipp-Zoom im gesamten Mengen-Bereich. */
    touch-action: manipulation;
}
.ax-saal-qty-btn {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(232,167,60,0.40);
    color: var(--ax-paper);
    font-size: 1rem; cursor: pointer;
    border-radius: 4px;
    transition: background .18s, border-color .18s;
    /* Tobi/Felix 2026-06-25 (Design 7): kein Doppeltipp-Zoom auf iOS bei schnellem +/− Tippen. */
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
}
.ax-saal-qty-btn:hover:not(:disabled) {
    background: rgba(232,167,60,0.14);
    border-color: var(--ax-amber);
}
.ax-saal-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ax-saal-qty-btn:focus-visible { outline: 2px solid var(--ax-amber); outline-offset: 2px; }
.ax-saal-qty-val {
    min-width: 24px; text-align: center;
    font-family: var(--ax-mono); font-weight: 600; font-size: 0.9rem;
    color: var(--ax-paper);
}

/* Totals */
.ax-saal-cart__totals {
    border-top: 1px solid rgba(244,237,224,0.10);
    padding-top: 1rem;
    margin-bottom: 1rem;
}
.ax-saal-cart__total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--ax-mono);
    font-size: 0.78rem; letter-spacing: 0.10em; text-transform: uppercase;
    color: rgba(244,237,224,0.65);
}
.ax-saal-cart__total {
    font-family: var(--ax-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ax-amber);
    letter-spacing: -0.01em;
    text-transform: none;
}
.ax-saal-cart__fees {
    font-size: 0.72rem; line-height: 1.5;
    color: rgba(244,237,224,0.50);
    margin: 8px 0 0;
}
/* Mindestbestellwert banner (#31) */
.ax-saal-cart__minorder {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    background: rgba(217,102,102,0.10);
    border: 1px solid rgba(217,102,102,0.40);
    border-radius: 6px;
    color: #f4c8c8;
    font-family: var(--ax-mono);
    font-size: 0.72rem; line-height: 1.4;
    letter-spacing: 0.02em;
}
.ax-saal-cart__minorder svg { flex-shrink: 0; color: #e6a3a3; }
.ax-saal-cart__minorder[hidden] { display: none; }

/* Form */
.ax-saal-cart__form { display: flex; flex-direction: column; gap: 0.8rem; }
.ax-saal-field { display: flex; flex-direction: column; gap: 4px; }
.ax-saal-field label {
    font-family: var(--ax-mono);
    font-size: 0.7rem; letter-spacing: 0.10em;
    color: rgba(244,237,224,0.65);
    text-transform: uppercase;
}
.ax-saal-field input[type="text"],
.ax-saal-field input[type="email"],
.ax-saal-field input[type="tel"] {
    padding: 11px 12px;
    background: rgba(244,237,224,0.04);
    border: 1px solid rgba(244,237,224,0.34);
    color: var(--ax-paper);
    font-family: var(--ax-body);
    font-size: 0.94rem;
    border-radius: 3px;
}
.ax-saal-field input:focus {
    outline: none;
    border-color: var(--ax-amber);
    background: rgba(244,237,224,0.06);
}
.ax-saal-field input:focus-visible { outline: 3px solid rgba(232,167,60,0.40); outline-offset: 2px; }
.ax-saal-field--check { flex-direction: row; align-items: flex-start; gap: 10px; padding: 4px 0; }
.ax-saal-field--check input { margin-top: 4px; min-width: 18px; min-height: 18px; accent-color: var(--ax-amber); }
.ax-saal-field--check label { letter-spacing: normal; text-transform: none; font-family: var(--ax-body); color: rgba(244,237,224,0.78); font-size: 0.82rem; line-height: 1.45; }
.ax-saal-field--check label a { color: var(--ax-amber); text-decoration: underline; text-underline-offset: 2px; }

/* Submit */
.ax-saal-submit {
    margin-top: 0.5rem;
    /* UX-Audit: im scrollbaren Korb-Panel den Checkout-CTA unten anpinnen, damit
       er nie „unter dem Fold" verschwindet (Gemini/Codex Blocker). */
    position: sticky;
    bottom: -1.5rem;
    z-index: 4;
    box-shadow: 0 -10px 20px -8px rgba(13, 13, 16, 0.95);
    padding: 16px 20px;
    background: var(--ax-amber);
    border: 0;
    color: var(--ax-ink);
    font-family: var(--ax-mono);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 3px;
    display: flex; flex-direction: column; gap: 4px; align-items: center;
    transition: background .18s, transform .15s;
}
.ax-saal-submit:hover:not(:disabled) { background: #F0B859; transform: translateY(-1px); }
.ax-saal-submit:focus-visible { outline: 3px solid var(--ax-paper); outline-offset: 3px; }
.ax-saal-submit:disabled { background: rgba(244,237,224,0.10); color: rgba(244,237,224,0.92); border: 1px solid rgba(232,167,60,0.45); cursor: not-allowed; }
.ax-saal-submit__amount {
    font-size: 0.96rem;
    letter-spacing: -0.01em;
    text-transform: none;
    font-family: var(--ax-display);
    font-weight: 700;
}
.ax-saal-error {
    background: rgba(217,102,102,0.10);
    border: 1px solid rgba(217,102,102,0.45);
    color: #f0a0a0;
    padding: 10px 12px;
    font-size: 0.85rem;
    border-radius: 3px;
    margin-top: 0.5rem;
}

/* ────────── TRUST STRIP ────────── */
.ax-saal-trust {
    background: rgba(244,237,224,0.03);
    border-top: 1px solid rgba(232,167,60,0.20);
    padding: 3rem 0;
}
.ax-saal-trust__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}
.ax-saal-trust__item {
    padding: 1.5rem;
    min-height: 156px;
    border: 1px solid rgba(244,237,224,0.10);
    border-radius: 4px;
    background: var(--ax-ink);
}
.ax-saal-trust__num { color: var(--ax-amber); font-family: var(--ax-mono); margin-bottom: 0.5rem; }
.ax-saal-trust__title {
    font-family: var(--ax-display);
    font-size: 1.1rem;
    color: var(--ax-paper);
    margin: 0 0 0.5rem;
    font-weight: 700;
}
.ax-saal-trust__item p {
    color: rgba(244,237,224,0.70);
    font-size: 0.86rem;
    line-height: 1.55;
    margin: 0;
}

/* ────────── MOBILE TWEAKS ────────── */
@media (max-width: 760px) {
    .ax-saal-hero { padding: 4rem 1rem 2rem; min-height: 32vh; }
    .ax-saal-hero__back { top: 0.8rem; left: 1rem; padding: 6px 10px; font-size: 0.66rem; }
    .ax-saal-hero__steps { grid-template-columns: 1fr; gap: 0.55rem; }
    .ax-saal-hero__steps li { grid-template-columns: 1.75rem 1fr; }
    .ax-saal-hero__steps li::before { width: 1.75rem; height: 1.75rem; }
    .ax-saal-stage { padding: 2rem 0 3rem; }
    .ax-saal-cart { padding: 1rem; }
    .ax-saal-cart__menu-head .ax-saal-h3 { flex: 0 0 auto; max-width: 42%; }
    .ax-saal-cats { justify-content: flex-end; }
    .ax-saal-tabs { top: var(--ax-nav-height); }
    .ax-saal-canvas { aspect-ratio: 4 / 5; }
    .ax-saal-table__label { font-size: 0.6rem; }
    /* Touch-Target >=44px auf Mobile (Audit Design) */
    .ax-saal-table { min-width: 44px; min-height: 44px; }
    .ax-saal-grid { padding: 0 1rem; }
}

/* Vorbestellung geschlossen: der Saalplan bleibt sichtbar — man soll ja noch
   sehen, worum es ging — aber er sieht nicht mehr nach Angebot aus und nimmt
   keine Klicks mehr an. Ein Plan, der sich anfassen laesst und dann am
   Bezahlknopf nein sagt, ist schlimmer als einer, der gleich zu ist. */
.ax-saal-canvas.is-closed {
    opacity: 0.5;
    filter: grayscale(0.65);
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .ax-saal-canvas.is-closed { filter: grayscale(0.65); }
}

/* Und gesagt wird es dort, wo man hinschaut: direkt ueber dem Plan, mit
   Uhrzeit und Grund (18.09.2026 stand der einzige Hinweis unter dem
   Bezahlknopf, ~4.200 px tiefer). Die Tische heissen dann «geschlossen»,
   nicht «frei», und die Legende Frei/Belegt/Gewählt verschwindet. */
.ax-saal-closed {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(232,167,60,0.10);
    border: 1px solid rgba(232,167,60,0.55);
    border-left: 4px solid var(--ax-amber);
    border-radius: 6px;
    color: var(--ax-paper);
}
.ax-saal-closed[hidden],
.ax-saal-floor__legend[hidden],
.ax-saal-deadline[hidden] { display: none; }
.ax-saal-closed__icon { flex: 0 0 auto; margin-top: 2px; color: var(--ax-amber); }
.ax-saal-closed__text { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.45; }
.ax-saal-table.is-closed {
    background: rgba(244,237,224,0.16);
    border-color: rgba(244,237,224,0.40);
    color: var(--ax-paper);
    box-shadow: none;
    cursor: not-allowed;
}
.ax-saal-cart.is-closed .ax-saal-menu-item { opacity: 0.55; }

/* Vor dem Bestellschluss: klein, direkt unter dem Bezahlknopf */
.ax-saal-deadline {
    margin: 0.6rem 0 0;
    font-family: var(--ax-mono);
    font-size: 0.74rem; letter-spacing: 0.06em;
    color: rgba(244,237,224,0.72);
    text-align: center;
}