/* ═══════════════════════════════════════════════════════════════════════════
   Midnight Bistro — Grundgerüst. Angelegt 15.08.2026.

   HIER STEHT KEINE EINZIGE FARBE UND KEINE SCHRIFTGRÖSSE.
   Nur Aufbau: was neben was liegt, was umbricht, was scrollt. Alles Sichtbare
   kommt aus einem der drei Themen (theme-karte / theme-tresen / theme-betrieb)
   und ausschliesslich über Merkmale, die hier als `--bx-*` erwartet werden.

   WARUM DIE TRENNUNG SO STRENG IST
   ================================
   Ein Thema, das den Aufbau mitbringt, ist kein Thema, sondern eine zweite
   Seite. Dann pflegt man drei Seiten, und nach dem zweiten Umbau sagen sie
   Verschiedenes. Die Auszeichnung ist deshalb in allen Themen dieselbe; ein
   Thema darf umfärben, umsetzen, Abstände ändern — aber nichts wegnehmen.

   ⚠️ NEUE KLASSEN GEHÖREN HIERHER, NICHT IN EIN THEMA.
   Wer eine Klasse nur in `theme-tresen.css` anlegt, baut eine Seite, die in
   den anderen beiden Themen still zerfällt.
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bx-bg);
  color: var(--bx-text);
  font-family: var(--bx-font);
  line-height: var(--bx-lh, 1.6);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ── Rahmen ──────────────────────────────────────────────────────────────
   Die Breite kommt aus dem Thema: „Karte" ist schmal wie eine Speisekarte,
   „Tresen" breit wie ein Plakat. */
.bx-wrap { max-width: var(--bx-breite, 1080px); margin: 0 auto; padding: 0 var(--bx-rand, 22px); }

/* ── Kopf ─────────────────────────────────────────────────────────────── */
.bx-nav        { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: var(--bx-nav-luft, 18px) 0; flex-wrap: wrap; }
.bx-brand      { display: flex; align-items: baseline; gap: .4ch; text-decoration: none; }
.bx-brand em   { font-style: normal; color: var(--bx-accent); }
.bx-nav-rechts { display: flex; align-items: center; gap: 10px; }

/* ── Kopfbereich ─────────────────────────────────────────────────────── */
.bx-hero    { padding: var(--bx-hero-luft, 44px) 0 8px; }
.bx-kicker  { margin: 0 0 var(--bx-kicker-ab, 20px); }
.bx-title   { margin: 0; }
.bx-title em{ font-style: normal; }
.bx-lead    { margin: var(--bx-lead-auf, 20px) 0 0; max-width: var(--bx-lead-breite, 52ch); }
.bx-actions { display: flex; gap: var(--bx-tat-luft, 10px); flex-wrap: wrap; margin-top: 26px; }
.bx-fine    { margin-top: 14px; }

/* ── Knöpfe ───────────────────────────────────────────────────────────── */
.bx-btn { display: inline-block; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.bx-btn--gross { }

/* ── Abschnitt ────────────────────────────────────────────────────────── */
.bx-sec     { padding: var(--bx-sec-luft, 50px) 0; }
.bx-eyebrow { margin: 0 0 8px; }
.bx-h2      { margin: 0; }
.bx-h2 em   { font-style: normal; }
.bx-sub     { margin: 8px 0 0; max-width: 56ch; }

/* ── Merkmale ─────────────────────────────────────────────────────────
   Absichtlich OHNE display-Angabe: „Karte" setzt sie als Liste mit
   Punktlinien, „Tresen" als nummerierte Blöcke, „Betrieb" als Kachelraster.
   Der Aufbau je Eintrag ist in allen drei derselbe. */
.bx-items { margin-top: var(--bx-items-auf, 30px); }
.bx-item  { }
.bx-item-kopf { display: flex; align-items: baseline; gap: 10px; }
.bx-item-name { }
.bx-item-punkte { flex: 1; }          /* nur „Karte" zeichnet sie sichtbar */
.bx-item-wert   { white-space: nowrap; }
.bx-item-text   { margin: 6px 0 0; max-width: 60ch; }
.bx-item-zeichen{ }                    /* Sinnbild; „Tresen" blendet es aus */

/* Ausverkauft (16.08.2026, für die öffentliche Hausseite).
   0.4 ist ABGESCHRIEBEN von `.item-card.unavailable` auf der Gastseite: der
   Gast vor der Tür und der Gast am Tisch sollen dieselbe Karte sehen. Steht
   hier in base.css und in keinem Thema — eine Klasse, die nur ein Thema kennt,
   lässt die Seite in den anderen drei still zerfallen. */
.bx-item--aus     { opacity: .4; }
.bx-item-aus      { white-space: nowrap; }

/* ── Die öffentliche Hausseite braucht EIGENE Klassen (16.08.2026) ──────────
   Gefunden beim Gegenlesen, nachgemessen, und es war der schlimmste Fehler
   dieser Seite:

   `.bx-item-wert` ist auf der VERKAUFSSEITE ein Etikett („new", „for the
   guest") — dass „standard" und „betrieb" es ausblenden, ist dort eine gute
   Entscheidung. Auf einer SPEISEKARTE ist dieselbe Stelle der PREIS. Die
   öffentliche Karte stand damit im Standardthema, also der Voreinstellung
   jedes Hauses, komplett ohne Preise da.

   Genauso `.bx-eyebrow`: ein Zierwort über einer Überschrift, das „tresen"
   und „betrieb" ausblenden dürfen — aber als Name eines Gangs unverzichtbar.
   „Rot" und „Weiss" verschwanden, und die Weine standen unbeschriftet
   untereinander.

   ⚠️ Deshalb hier und mit eigenen Namen. Wer für eine Speisekarte eine
      Klasse wiederverwendet, die ein Thema ausblenden darf, verliert genau
      das, worum es geht — und sieht es nicht, weil der Text im Dokument steht
      und nur nicht gezeichnet wird. Eine Prüfung auf `textContent` findet das
      NIE; nur `getComputedStyle(...).display`.

   Keine feste Farbe: beide erben von `body`, tragen also im hellen Thema
   genauso wie in den drei dunklen. (`.bx-preis` weiter oben kann das nicht —
   die Farbe steht dort fest und wäre auf Weiss unsichtbar.) */
.bx-karte-preis { white-space: nowrap; font-weight: 700; }
.bx-karte-gang  { margin: 26px 0 10px; font-size: 13px; font-weight: 700;
                  letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.bx-karte-gang:first-child { margin-top: 10px; }

/* ── Schritte ─────────────────────────────────────────────────────────── */
.bx-steps { margin-top: var(--bx-steps-auf, 26px); }
.bx-step  { display: grid; grid-template-columns: var(--bx-step-spalte, 40px) 1fr; gap: var(--bx-step-luft, 16px); align-items: start; }
.bx-step-nr   { }
.bx-step h3   { margin: 0 0 3px; }
.bx-step p    { margin: 0; }

/* ── Tarife ───────────────────────────────────────────────────────────── */
.bx-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--bx-plan-min, 230px), 1fr)); gap: var(--bx-plan-luft, 14px); margin-top: 30px; }
.bx-plan  { }
.bx-plan-name { }
.bx-plan-preis{ }
.bx-plan-preis small { }
.bx-plan ul { list-style: none; margin: 16px 0 0; padding: 0; }
.bx-plan li { }

/* ── Schluss, Hinweis, Fuss ──────────────────────────────────────────── */
.bx-cta  { text-align: center; }
.bx-note { max-width: 64ch; }
.bx-foot { }

/* ── Zwei Vorschauen nebeneinander (nur „Betrieb" zeigt sie) ──────────── */
.bx-schau { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: start; margin: 40px 0 10px; }
.bx-etikett { margin: 0 0 10px; }

/* ⚠️ Kein `grid-template-columns: 1fr 1fr` irgendwo in diesem Haus.
   Diese Seiten haben kaum Medienabfragen; ein fester Zweispalter wird auf
   einem 360-Pixel-Telefon zu zwei 160-Pixel-Spalten und bricht den Text auf
   zwei Wörter je Zeile. Genau das stand am 14.08.2026 live. Immer
   `auto-fit/minmax`. */

/* ── Die zwei Vorschaufenster ────────────────────────────────────────────
   Aufbau UND Aussehen stehen hier, gespeist aus den Merkmalen des Themas.
   Grund: Sie bestehen aus einem Dutzend Kleinteilen, und die viermal zu
   pflegen wäre die sicherste Art, sie auseinanderlaufen zu lassen. Ein Thema
   darf sie trotzdem überschreiben — „Betrieb" tut das für den hellen Grund.

   ⚠️ Das Telefon des Gastes bleibt in JEDEM Thema dunkel. Es wird abends im
   Lokal in die Hand genommen; ein weisser Schirm blendet dort. */
.bx-phone{background:var(--bx-nacht,#0F0E15);border-radius:var(--bx-radius,20px);
  padding:18px 16px 22px;border:1px solid var(--bx-line)}
.bx-phone-kopf{display:flex;justify-content:space-between;align-items:baseline;
  color:#8C8A99;font-size:11px;margin-bottom:14px}
.bx-phone-kopf b{color:#F4F3F7;font-size:14px}
.bx-zeile{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#EFEEF4}
.bx-zeile:last-of-type{border-bottom:0}
.bx-zeile b{display:block;font-size:14px}
.bx-zeile i{display:block;font-style:normal;font-size:11.5px;color:#8C8A99}
.bx-preis{font-size:13px;font-weight:700;color:#F4F3F7;white-space:nowrap}
.bx-melde{margin:16px 0 0;background:rgba(255,55,95,.14);
  border:1px solid rgba(255,55,95,.4);border-radius:var(--bx-radius-s,12px);
  padding:11px 13px;color:#FFD9E1;font-size:12.5px}

.bx-kueche{background:var(--bx-surface);border:1px solid var(--bx-line);
  border-radius:var(--bx-radius,20px);padding:16px}
.bx-auftrag{border:1px solid var(--bx-line);border-radius:var(--bx-radius-s,12px);
  padding:13px;margin-bottom:10px}
.bx-auftrag:last-child{margin-bottom:0}
.bx-auftrag--neu{border-color:var(--bx-accent);background:var(--bx-accent-dim)}
.bx-auftrag-kopf{display:flex;justify-content:space-between;align-items:center;
  gap:10px;margin-bottom:6px}
.bx-auftrag-inhalt{margin:0;color:var(--bx-text-2);font-size:13px}
.bx-auftrag-fuss{margin-top:7px;display:flex;justify-content:space-between;
  align-items:center;font-size:14px}
.bx-pille{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;white-space:nowrap}
.bx-pille--neu{background:var(--bx-accent);color:var(--bx-accent-ink)}
.bx-pille--fertig{background:var(--bx-gruen,#30D158);color:#04210F}
.bx-wart{font-size:12px;font-weight:700;color:var(--bx-accent)}

/* ── Umschalter (nur zur Vorschau, im Betrieb ausgeblendet) ───────────── */
.bx-themenwahl { position: fixed; right: 10px; bottom: 10px; z-index: 999; display: flex; gap: 4px; padding: 4px; border-radius: 999px; max-width: calc(100vw - 20px); overflow-x: auto; }
.bx-themenwahl button { border: 0; cursor: pointer; font: inherit; padding: 6px 10px; border-radius: 999px; white-space: nowrap; font-size: 11px; }

/* ⚠️ Der Umschalter LIEGT ÜBER der Seite. Ohne diesen Platz am Fuss verdeckt
   er die letzten Zeilen — am 15.08.2026 auf dem Telefon genau so gesehen: er
   lag mitten auf den Knöpfen „Kostenlos anfangen" und „In fünf Minuten offen".
   Gilt nur, wo die Seite ihn überhaupt anfordert. */
body[data-bx-wahl] { padding-bottom: 68px; }

@media print { .bx-themenwahl { display: none; } }