/* ── Kasino-Übersicht: Gerichtzeilen (ab 15.3) ─────────────────────────────
       Ersetzt die frühere Karte-je-Gericht (.dish-row2/.dish-head2/.dcount/.wish2), die im
       Betrieb zu unruhig war: pro Gericht stapelten sich Kopfbalken, Namenszeile, Zähler-
       Widget, Wunsch-Überschrift und Preiszeile. Jetzt EINE Zeile je Gericht — links die
       offene Anzahl, Mitte Gericht + Besteller-Chips, rechts die Fertig-Bedienung. */
    .ko-box { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); margin-bottom: 10px; }
    .ko-part { font-size: 9.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-d); background: var(--card-2); border-bottom: 1px solid var(--line); padding: 7px 12px; }
    .ko-part.drinks { color: var(--moss); }
    .ko-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
    .ko-row:last-child { border-bottom: 0; }
    .ko-row.wish { background: rgba(179,146,77,.06); }
    .ko-row.done { opacity: .55; }
    .ko-row.done .ko-name { text-decoration: line-through; }
    .ko-cnt { flex: none; min-width: 44px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--pine-2); color: var(--ivory); font-weight: 800; font-size: 15px; border-radius: 7px; font-variant-numeric: tabular-nums; }
    .ko-row.wish .ko-cnt { background: var(--cognac); }
    .ko-row.done .ko-cnt { background: #5f7d4e; }
    .ko-mid { flex: 1; min-width: 0; }
    .ko-name { display: block; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--ink); line-height: 1.22; }
    .ko-var { font-size: .82em; color: var(--gold-d); font-style: italic; }
    .ko-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
    .ko-chip { font-size: 11px; color: #5e4a1c; background: var(--gold-pale); border: 1px solid #e0d3ad; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
    .ko-wtxt { display: block; font-size: 12.5px; color: var(--cognac-t); font-style: italic; margin-top: 4px; }
    /* Sonderwunsch: die Mitte ist ein Knopf und springt zum Einzeleingang (Telefonnummer!).
       Der Fertig-Schalter steht bewusst getrennt rechts — sonst vertippt man sich im Betrieb. */
    .ko-jump { text-align: left; background: none; border: 0; padding: 0; font-family: var(--font-ui); cursor: pointer; -webkit-tap-highlight-color: rgba(179,146,77,.25); }
    .ko-jump .ko-chip.who { background: #fff; border-color: var(--gold); color: var(--gold-d); font-weight: 700; display: inline-flex; align-items: center; gap: 5px; }
    .ko-arr { font-size: 13px; line-height: 1; }
    .ko-jump:hover .ko-chip.who { background: var(--gold-pale); }
    /* Preisspalte — nur in der Bestellübersicht/Verwaltung, das Kasino zeigt bewusst keine Preise */
    .ko-price { flex: none; font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
    .ko-sum { color: var(--muted); }
    .ko-step { flex: none; display: flex; align-items: center; gap: 6px; }
    .ko-sb { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 7px; font-size: 17px; line-height: 1; color: var(--ink); cursor: pointer; touch-action: manipulation; display: inline-flex; align-items: center; justify-content: center; }
    .ko-sb:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-pale); }
    .ko-sb:disabled { opacity: .3; cursor: default; }
    .ko-num { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
    .ko-tog { flex: none; border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 10px 15px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); cursor: pointer; white-space: nowrap; touch-action: manipulation; }
    .ko-row.wish.done .ko-tog { background: var(--moss); color: #fff; border-color: var(--moss); }
    /* Reservierung OHNE Tischzuweisung — dezent, aber nicht zu übersehen (ab 15.3) */
    .kr-table.none { color: var(--muted); background: var(--paper-deep); border: 1px dashed var(--line); font-weight: 600; }
    /* Ziel des Sonderwunsch-Sprungs kurz hervorheben */
    .entry.flash { animation: entryFlash 1.7s ease-out; }
    @keyframes entryFlash { 0% { box-shadow: 0 0 0 3px rgba(179,146,77,.65) } 70% { box-shadow: 0 0 0 3px rgba(179,146,77,.3) } 100% { box-shadow: 0 0 0 3px rgba(179,146,77,0) } }
    /* ── Einzeleingang mit Sonderwunsch: gleicher warmer Ton wie die Wunschzeile oben (15.4) ── */
    .entry.wish { background: rgba(179,146,77,.06); border-color: #e0cfa0; }
    .entry.wish .entry-head { box-shadow: inset 3px 0 0 var(--cognac-2); }
    .entry-wishtag { flex: none; font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--cognac); background: var(--cognac-pale); border-radius: 999px; padding: 2px 8px; }
    /* ── Fertige Reservierungen (15.4): ans Ende, aber VOLL LESBAR ────────────────
       Bewusst weder ausgegraut noch durchgestrichen: das Essen ist fertig, die Gäste kommen
       aber erst — dann muss „FmZg — welcher Tisch?" im vollen Kasino sofort lesbar sein.
       Dass die Reservierung fertig ist, sagen Position, grüne Akzentkante und der ✓-Chip. */
    .kr.fin .kr-head { background: var(--paper-deep); box-shadow: inset 3px 0 0 #3f7d4f; }
    .res-fin-div { display: flex; align-items: center; gap: 9px; font-size: 9.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #3d6b4f; margin: 22px 0 10px; }
    .res-fin-div::after { content: ''; flex: 1; height: 1px; background: var(--line); }
    /* Reservierung war fertig und hat eine Nachbestellung bekommen */
    .kr-reopen { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #fff; background: var(--cognac-2); border-radius: 999px; padding: 3px 9px; }
    .ka-list-row.fin { border-color: #bfd8c5; background: #f5f9f4; }
    .ka-list-row.fin .ka-list-n { color: #3f7d4f; }
    /* ── Halte-Bestätigung (15.4) ──────────────────────────────────────────────
       Ein einfaches confirm() wird im Betrieb reflexhaft weggeklickt. Der Knopf muss
       gedrückt GEHALTEN werden — das kann nicht versehentlich und nicht nebenbei passieren. */
    /* Füllung in Gold, Schrift durchgehend tannengrün (ab 15.5): vorher war die Schrift weiß und
       damit auf dem noch weißen Teil des Knopfes unsichtbar, bis der Balken sie eingeholt hatte.
       Das Rot als Warnsignal trägt weiterhin die Karte drumherum (Warnzeile + Spalte „Wird gelöscht"). */
    .hold-btn { position: relative; overflow: hidden; display: block; width: 100%; max-width: 340px; margin: 0 auto; padding: 17px 20px; border: 2px solid var(--gold); border-radius: 8px; background: #fff; color: var(--pine); font-family: var(--font-ui); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
    .hold-btn .hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--gold); }
    .hold-btn .hold-lbl { position: relative; }
    .hold-btn.holding { border-color: var(--gold-d); }
    .hold-btn:disabled { opacity: .5; cursor: default; }
    /* ── Reiter „Tag abschließen" (15.4) ── */
    .eod-page { max-width: 620px; }
    .eod-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px 28px; box-shadow: var(--sh-sm); text-align: center; }
    .eod-card h2 { font-family: var(--font-display); font-size: 1.8rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
    .eod-lead { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; max-width: 440px; margin: 0 auto 18px; }
    .eod-cols { display: flex; gap: 10px; text-align: left; margin-bottom: 18px; flex-wrap: wrap; }
    .eod-col { flex: 1 1 200px; border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; background: var(--card-2); }
    .eod-col.gone { border-color: #e0c3bc; background: #faf1ee; }
    .eod-col h4 { font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px; }
    .eod-col.gone h4 { color: var(--red); }
    .eod-col.stays h4 { color: var(--moss); }
    .eod-col ul { list-style: none; }
    .eod-col li { font-size: 12.5px; color: var(--ink-soft); padding: 3px 0 3px 15px; position: relative; line-height: 1.45; }
    .eod-col li::before { position: absolute; left: 0; top: 3px; }
    .eod-col.gone li::before { content: '×'; color: var(--red); font-weight: 800; }
    .eod-col.stays li::before { content: '✓'; color: var(--moss); font-weight: 800; }
    .eod-col b { color: var(--ink); font-weight: 700; }
    .eod-warn { font-size: 12.5px; color: var(--red); font-weight: 700; margin-bottom: 16px; }
    .eod-hint { font-size: 11.5px; color: var(--muted); font-style: italic; margin-top: 12px; }
    .eod-empty { font-size: 13px; color: var(--muted); font-style: italic; padding: 6px 0 14px; }
    /* ── Reservierung bearbeiten (15.4): Speichern · Abbrechen · Löschen oben im Formular ── */
    .res-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .res-edit-del { margin-left: auto; width: auto; min-height: 0; padding: 9px 16px; }
    .kr-foot-actions { justify-content: center; }
    .order-edit { padding: 4px 2px; }
    .oe-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 8px; }
    .oe-item { border: 1px solid var(--line-soft); border-radius: 7px; padding: 8px 10px; margin-bottom: 8px; }
    .oe-name { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
    .oe-fields { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .oe-fields label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
    .oe-fields input[type=text] { flex: 1; min-width: 130px; }
    .oe-actions { display: flex; gap: 8px; margin-top: 4px; }
    .cancel-btn {
      background: none;
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: 6px 12px;
      font-size: 9.5px; font-weight: 800;
      letter-spacing: .16em; text-transform: uppercase;
      color: var(--ink-soft);
      cursor: pointer;
      transition: all .18s;
      touch-action: manipulation;
    }
    .cancel-btn:hover { border-color: rgba(162,58,46,.5); color: var(--red); }

    .toast-host { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 95; max-width: 92vw; }
    .toast {
      display: flex; align-items: center; gap: 10px;
      background: var(--pine);
      color: var(--ivory);
      border: 1px solid rgba(214,184,120,.5);
      border-radius: 3px;
      padding: 11px 18px;
      font-size: 12px; font-weight: 600;
      letter-spacing: .04em;
      margin-bottom: 6px;
      box-shadow: var(--sh-lg);
      animation: toastIn .25s ease-out both;
    }
    .toast.toast-out { animation: toastOut .3s ease-in both; }
    .toast.toast-success { border-color: rgba(141,182,154,.6); }
    @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes toastOut { from { opacity: 1; } to { opacity: 0; transform: translateY(-8px); } }

    /* ══════════════════════════════════════════════════════════
       INFO-SEITE & LEGENDE
    ══════════════════════════════════════════════════════════ */
    .info-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 760px; margin: 0 auto; }
    .info-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-top: 3px solid var(--gold);
      border-radius: 4px;
      padding: 20px 22px;
      box-shadow: var(--sh-sm);
    }
    .info-card h3 {
      font-family: var(--font-display);
      font-size: 1.3rem; font-weight: 600;
      letter-spacing: .06em;
      margin-bottom: 10px;
    }
    .info-card p, .info-card li {
      font-family: var(--font-display);
      font-size: 15px; line-height: 1.6;
      color: var(--ink-soft);
    }
    .info-card ul { padding-left: 20px; margin: 6px 0; }
    .contact-box {
      margin-top: 14px;
      padding: 12px 16px;
      background: var(--card-2);
      border-left: 3px solid var(--gold);
      border-radius: 0 4px 4px 0;
    }
    .contact-box strong {
      display: block;
      font-family: var(--font-ui);
      font-size: 9.5px; font-weight: 800;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--gold-d);
      margin-bottom: 4px;
    }
    .contact-box, .contact-box a {
      font-family: var(--font-display);
      font-size: 1.1rem; font-weight: 600;
      color: var(--ink);
      text-decoration: none;
    }
    .contact-box a:hover { color: var(--gold-d); }

    details.acc {
      background: var(--card);
      border: 1px solid var(--line);
      border-top: 3px solid var(--gold);
      border-radius: 4px;
      box-shadow: var(--sh-sm);
      overflow: hidden;
    }
    details.acc > summary {
      padding: 17px 22px;
      cursor: pointer;
      list-style: none;
      display: flex; justify-content: space-between; align-items: center;
      font-family: var(--font-display);
      font-size: 1.15rem; font-weight: 600;
      letter-spacing: .04em;
    }
    details.acc > summary::-webkit-details-marker { display: none; }
    details.acc > summary::after { content: '+'; font-family: var(--font-ui); font-size: 20px; font-weight: 300; color: var(--gold-d); transition: transform .2s; }
    details.acc[open] > summary::after { transform: rotate(45deg); }
    details.acc > .acc-body { padding: 0 22px 20px; }
    details.acc > .acc-body p { font-family: var(--font-display); font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }
    .legend-title {
      font-size: 10px; font-weight: 800;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--gold-d);
      margin: 18px 0 8px;
    }
    .legend-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; color: var(--ink-soft); align-items: center; }
    @media (min-width: 700px) { .legend-grid.cols-2 { grid-template-columns: auto 1fr auto 1fr; } }
    .legend-code {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 25px; height: 21px;
      padding: 0 6px;
      background: var(--pine);
      color: var(--gold-l);
      border-radius: 3px;
      font-size: 10.5px; font-weight: 800;
      letter-spacing: .04em;
    }

    /* ══════════════════════════════════════════════════════════
       ADMIN-SHELL  (Desktop: Seitenleiste · Mobil: Band oben)
    ══════════════════════════════════════════════════════════ */
    .admin-shell { max-width: 1140px; margin: 0 auto; padding: 0 0 130px; }
    .admin-rail {
      position: sticky; top: 0; z-index: 40;
      background: rgba(29,42,34,.97);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid rgba(214,184,120,.4);
    }
    .admin-content { padding: 26px 20px 0; max-width: 780px; margin: 0 auto; }
    @media (min-width: 1020px) {
      .admin-shell {
        display: grid;
        grid-template-columns: 236px minmax(0, 1fr);
        gap: 30px;
        padding: 28px 28px 130px;
        align-items: start;
      }
      .admin-rail {
        position: sticky; top: 22px;
        background: linear-gradient(180deg, var(--pine-2), var(--pine));
        border: 1px solid rgba(214,184,120,.45);
        border-radius: 6px;
        padding: 12px 10px;
        box-shadow: var(--sh);
      }
      .admin-rail .nav-scroll { flex-direction: column; gap: 3px; padding: 0; overflow: visible; }
      .admin-rail .nav-link {
        text-align: left;
        padding: 12px 14px;
        border-bottom: none;
        border-left: 2px solid transparent;
        border-radius: 3px;
      }
      .admin-rail .nav-link.active { border-left-color: var(--gold-l); background: rgba(255,255,255,.06); }
      .admin-content { padding: 0; margin: 0; max-width: none; }
    }
    .rail-head {
      display: none;
    }
    @media (min-width: 1020px) {
      .rail-head {
        display: block;
        padding: 10px 14px 14px;
        margin-bottom: 8px;
        border-bottom: 1px solid rgba(214,184,120,.3);
        font-size: 9.5px; font-weight: 800;
        letter-spacing: .26em; text-transform: uppercase;
        color: var(--gold-l);
      }
    }