/* Design-Tokens der internen Bedienoberflaechen (Skill ui-tresen, ADR-011 §3.1).
 * Dunkles Grundschema: Barlicht/Halbdunkel, helle Flaechen blenden und machen nachtblind.
 *
 * MARKE gegen DOMAENE (01.08.2026). Seit Scheibe 2 stehen die Markenwerte — Flaechen, Text,
 * Akzent, Schrift, Radius — nicht mehr hier, sondern in `core/marke.css`, gemeinsam mit der
 * internen Shell. Vorher hatte diese Datei ihre eigene Palette, und der Akzent war Blau, waehrend
 * die Buchung Gruen trug.
 *
 * 🔴 Was hier BLEIBT, ist die Bedeutung: `--frei`, `--reserviert`, `--belegt`, `--gesperrt`, die
 * Tisch-Fuellungen und die Statusindikatoren. Am Raumplan heisst `belegt = rot`, weil der Tisch
 * besetzt ist — das ist Domaenenwissen und keine Geschmacksfrage.
 */
@import url("../core/marke.29256710142f.css");

:root {
  /* --- Marke: kommt aus core/marke.css ------------------------------------------------------- */
  --flaeche-0: var(--marke-bg);
  --flaeche-1: var(--marke-karte);
  /* 🔴 `--flaeche-2` bleibt EIGEN. In der Buchung ist die dritte Flaeche eingesenkt (Eingabefeld),
     hier bedeutet sie **erhoeht/aktiv** (aktiver Reiter, Hover). Sie zu tauschen kehrte die
     Tiefenwirkung um: der aktive Reiter saehe eingedrueckt aus statt hervorgehoben. */
  --flaeche-2: #282c35;   /* erhoeht, aktiv */
  --linie:     var(--marke-linie);

  /* Text */
  --text:       var(--marke-text);
  --text-leise: var(--marke-leise);

  /* Status — semantisch benannt, nicht nach Farbe (Skill: nie nur ueber Farbe) */
  --frei:       #3ba55d;
  --reserviert: #d9a441;
  --belegt:     #c94f4f;
  --walk-in:    #4a8fd4;
  --gesperrt:   #6b7280;
  --ausstehend: #8b5cf6;  /* Offline-Queue */
  --event:      #b06cc9;
  --jetzt:      #ff4fa3;  /* Jetzt-Linie — bewusst KEINE Statusfarbe (nicht Blau=Walk-in) */

  /* Status-Schattierung (Mark 19.07.): Raumplan-Tisch-Fills über Helligkeit statt Ampel.
     Fallback; die echten Werte kommen aus Anzeigekonfig (:root-Override, admin-editierbar). */
  --tisch-aktiv:     #c9bd9a;  /* aktiv (angekommen/belegt/walk_in) — warmes Beige */
  --tisch-erwartung: #8b93a3;  /* in Erwartung (reserviert) — helles Grau */
  --tisch-leer:      #1e2229;  /* leer/frei — versinkt im Dunkel */
  --tisch-gesperrt:  #16181d;  /* gesperrt — dunkel + Schloss */
  --tisch-erledigt:  #2f333c;  /* /spiele/-Block vorbei (endet_am <= jetzt) — gedämpft, aber deutlich über dem Hintergrund */

  /* Status-Indikator ●/! (Teil F). Dunkleres Grün, damit es auch auf hellem Beige-Fill liest. */
  --ind-an:   #1d7a4a;  /* anwesend bestätigt — grün, auf hell UND dunkel lesbar */
  --ind-warn: #f2555a;  /* überfällig — rot */

  /* Akzent — das generische Aktiv-Blau: Nav/Reiter aktiv, Auswahl, Regler, "heute". Eigener Name
     (ABNAHME 6), damit das Ändern der Walk-in-STATUSfarbe nicht die halbe Navigation umfärbt.
     Derselbe Ton wie --walk-in, aber zwei Bedeutungen brauchen zwei Namen. */
  /* Seit 01.08.2026 das Filzgruen der Marke statt eines eigenen Blaus. Damit faellt nebenbei die
     alte Doppeldeutigkeit weg: der Akzent hatte denselben Ton wie `--walk-in`, und ein aktiver
     Reiter sah aus wie ein Walk-in-Status. */
  --akzent:     var(--marke-akzent);
  /* Getönte Fläche des aktiven Reiters (Auftrag 2026-09-30-0006 §1) — durchgereicht wie
     `--akzent`, kein eigener Wert; `core/theme.css` bildet denselben Namen aus derselben
     Markenquelle ab (wie bei `--akzent`), tokens.css steht aber auch ohne theme.css (Login).
     Gemessen: gegen `--flaeche-1` nur 1,17:1 (`#282c35`: 1,15:1) — grünlicher, nicht heller. Die
     Unterscheidung tragen die helle Schrift und die grüne Kante, nicht die Fläche. */
  --akzent-weich: var(--marke-akzent-weich);

  /* Textfarbe AUF den Statusflaechen (dunkler Text auf hellen Statusfarben = lesbar) */
  --auf-status: var(--marke-akzent-text);

  /* Abstaende — eine Skala, keine Zufallswerte */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Trefferflaeche — Minimum fuer alles Antippbare (nasse Hand, kein Cursor) */
  --tap: var(--marke-tap);

  --radius: var(--marke-radius);
  --font: var(--marke-font);
  --schatten: var(--marke-schatten);
}

/* Status-Indikator ●/! — EINE Quelle (Regel 02) für Kachel (.rp-ind), Ankunftszeile (.ank-ind)
   und /spiele/-Block (.sp-ind): Farbe kommt aus --ind-*, die dunkle Kontur (text-shadow) umrandet
   das Symbol, damit es auf hellem (Beige) wie dunklem Fill liest. Position bleibt beim Consumer. */
.status-ind { font-weight: 900; line-height: 1; font-size: 1.08em;
  text-shadow: 0 0 2px rgba(0,0,0,.9), 0 0 1px rgba(0,0,0,.95); }
.status-ind.an { color: var(--ind-an); }
.status-ind.ueberfaellig { color: var(--ind-warn); }

/* Grundhaltung fuer jede Seite, die die Tokens laedt. Zurueckhaltung ist die Gestaltung. */
.ui-dunkel {
  background: var(--flaeche-0);
  color: var(--text);
  font-family: var(--font);
  font-variant-numeric: tabular-nums;   /* Uhrzeiten/Zahlen untereinander */
}
.ui-dunkel a { color: var(--akzent); }
.ui-dunkel h1 { font-size: 1.2rem; margin: 0 0 var(--s3); }

/* Einheitliche Navigation zwischen den Ansichten */
.hauptnav { display: flex; gap: var(--s2); margin: 0 0 var(--s4); flex-wrap: wrap; }
.hauptnav a {
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 0 var(--s4); text-decoration: none;
  background: var(--flaeche-1); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); font-size: .95rem;
}
/* Aktiv = helle Schrift auf getönter Fläche, grüne KANTE (Auftrag 2026-09-30-0006 §1, Mark
   29.09.2026: „das sieht aus als ob er kurz und abgeschlossen wäre"). Grün BESCHRIFTET heißt in
   diesem Haus „frei/fertig" (`--frei`, Absende-Knopf) — ein grüner Reiter las sich als „erledigt",
   nicht als „hier stehst du". Hauptnav und Reiter tragen dasselbe Muster (Mark: „Beide gleich"). */
.hauptnav a.aktiv { background: var(--akzent-weich); border-color: var(--akzent); color: var(--text); }

/* §2b: Eine Zeile — ORT links (wo bin ich), SICHT rechts (was mache ich hier), Editor abgesetzt.
   Der --flaeche-1-Hintergrund grenzt die Leiste als Einheit vom Inhalt ab. 50 px bleiben (10c). */
.kopfleiste { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 0 var(--s2); margin: 0 0 var(--s3); min-height: var(--tap); }
.ort { display: flex; align-items: center; flex: 0 0 auto; }        /* bleibt immer sichtbar */
.ort a { min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s3);
  text-decoration: none; color: var(--text-leise); font-size: .98rem; border-radius: var(--radius); }
.ort a.aktiv { color: #fff; font-weight: 700; }
.ort .sep { color: var(--linie); user-select: none; }
/* SICHT weicht bei Enge nach unten, der ORT nie (§2b: bei zu wenig Platz weicht rechts).
   BA13 (Mark 21.07.): linksbündig — kein `margin-left:auto` mehr, das die SICHT nach rechts über
   die volle Breite zog. Alle Kopfleisten-Blöcke packen jetzt nach links. */
.sicht { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sicht > * { margin: 0; }
.editor-link { min-height: var(--tap); display: inline-flex; align-items: center; margin-left: var(--s3);
  padding: 0 var(--s3); text-decoration: none; color: var(--text-leise); opacity: .65;
  border: 1px solid var(--linie); border-radius: var(--radius); font-size: .9rem; }
.editor-link.aktiv { opacity: 1; color: var(--text); background: var(--akzent-weich); border-color: var(--akzent); }
/* Trenner in der SICHT-Leiste zwischen „wo ich bin" und „wohin ich kann" (Auftrag 2026-09-04-2225,
   Raumplan ↔ Zeitleiste): dieselbe Optik wie `.ort .sep` im Hauptmenü, hier fuer die Kopfleiste. */
.sicht-trenner { color: var(--linie); user-select: none; }

/* Verbindungs-/Datenstand — immer sichtbar (Skill), nicht als verschwindender Toast */
.qbadge {
  background: var(--ausstehend); color: #fff; padding: 2px var(--s2);
  border-radius: 10px; font-size: .8rem; font-weight: 600;
}
.stand-leise { color: var(--text-leise); font-size: .8rem; }
.veraltet { opacity: .55; }   /* veraltete Daten sehen anders aus als frische */

/* Gemeinsames Buchungs-Edit-Popup (BAUAUFTRAG 8) — EINE Optik-Quelle statt Kopie je Seite.
   Dunkel-Tokens + 48-px-Trefferflächen wie der Rest; genutzt von Planung + Raumplan. */
/* Querformat statt Hochformat (Mark 18.07. §2a): zweispaltig ab 640px, am Handy einspaltig.
   48px bleiben (kleiner durch Breite, nicht durch Schrumpfen). Kopf/Meldung/Aktion spannen beide Spalten. */
.buchpop { display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s4); align-items: start; }
@media (min-width: 640px) { .buchpop { grid-template-columns: 1fr 1fr; } }
.buchpop .editkopf, .buchpop #edit-melden, .buchpop .edit-aktion,
.buchpop .edit-chips, .buchpop .knoepfe, .buchpop label.voll { grid-column: 1 / -1; }
.buchpop .editkopf { font-weight: 700; font-size: 1.05rem; margin: 0; }
.buchpop .edittag { margin: .1rem 0 .3rem; font-size: .85rem;
  color: var(--text-leise); letter-spacing: .01em; }
/* Personen-Hinweis (Auftrag 2026-08-18-2314): auffaellig genug, um gelesen zu werden, aber kein
   Fehlerrot — er verhindert nichts. Spannt beide Spalten, sonst steht er neben dem Feld statt
   unter ihm. */
.buchpop .pax-hinweis { grid-column: 1 / -1; margin: .1rem 0 .3rem; font-size: .85rem;
  color: var(--warnung, var(--reserviert)); }
/* Personen je Tisch (Auftrag 2026-09-04-0000) — GENERISCH, nicht auf `.buchpop` beschraenkt: die
   Spiele-Neuanlage (spiele.html) liegt in `.pop-col`, nicht im `.buchpop`-Grid. Eine Zeile Felder,
   je Tisch beschriftet — sonst dieselbe Optik wie jedes andere Popup-Feld. */
.buchpop [data-pax-verteilung] { grid-column: 1 / -1; }
[data-pax-verteilung] { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: flex-end;
  margin: .1rem 0 .3rem; }
[data-pax-verteilung] .pax-verteilung-kopf { flex-basis: 100%; font-size: .82rem; color: var(--text-leise); }
[data-pax-verteilung] .pax-verteilung-feld { display: flex; flex-direction: column; gap: 3px;
  font-size: .78rem; color: var(--text-leise); }
[data-pax-verteilung] .pax-verteilung-feld input { width: 4rem; }
/* Namensvorschläge aus dem Kundenregister (Auftrag 2026-09-16-0124, Ort und Aussehen seit
   2026-09-17-1745): ein eigener Kasten **direkt unter der Gast-Karte**, in derselben Spalte — im
   Bar/Lounge-Popup (`.bp-gast`) wie in der Spiele-`.pop-col`. Kopfzeile mit Zahl, eine Zeile je
   Vorschlag als Knopf über die volle Breite, Fußzeile nur bei Deckelung.

   🔴 **Der Kasten hält seinen Platz, auch leer** (Auftrag §1, „der Dialog darf nicht springen").
   Die Höhe ist die des vollen Kastens: Rahmen, Innenabstand, Kopf- und Fußzeile (je .8rem × 1.25
   = 1rem), fünf Zeilen (`VORSCHLAG_DECKEL`) zu je `--tap`, sechs Abstände zu 2px. Erscheint die
   Liste, verschiebt sich darunter nichts — weder „E-Mail-Bestätigung senden?" noch die Knöpfe.
   Wer den Deckel ändert, ändert die 5 hier mit (`tests_buchpop_breit` rechnet beides nach). */
.namensvorschlag { min-height: calc(5 * var(--tap) + 2rem + 12px + 2 * var(--s1) + 2px); }
.namensvorschlag [data-vorschlag-liste] { border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--s1) var(--s2); display: flex; flex-direction: column; gap: 2px; }
.namensvorschlag .leise { color: var(--text-leise); font-size: .8rem; margin: 0; }
.namensvorschlag .vorschlag-kopf, .namensvorschlag .vorschlag-fuss { margin: 0; font-size: .8rem;
  line-height: 1.25; }
.namensvorschlag .vorschlag-kopf { display: flex; justify-content: space-between; gap: var(--s2);
  color: var(--text-leise); }
.namensvorschlag button.vorschlag { display: flex; align-items: baseline; gap: var(--s2);
  width: 100%; min-height: var(--tap); padding: 0 var(--s2); text-align: left; cursor: pointer; }
.namensvorschlag button.vorschlag .name { font-weight: 700; flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Kontaktwege gekürzt: rechts, kleiner, gedämpft — der Name hat Vorrang vor der Adresse. */
.namensvorschlag button.vorschlag .wege { flex: 1 1 0; min-width: 0; text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.namensvorschlag [data-partei-anzeige] { margin: 0; }
/* 🔴 `display:flex` oben schlägt das `hidden`-Attribut (Autoren-CSS vor Browser-Vorgabe) — ohne
   diese Zeile verschwände die leere Liste nie, sie stünde als leerer Rahmen da. */
.namensvorschlag [hidden] { display: none; }
.buchpop label { display: flex; flex-direction: column; gap: 3px; font-size: .82rem; color: var(--text-leise); }
.buchpop label.cb { flex-direction: row; align-items: center; gap: var(--s2); color: var(--text); font-size: .95rem; }
/* BAUAUFTRAG 9 Punkt 7: EINE Schriftart für alle Popup-Felder (vorher Labels system-ui, Eingaben
   Arial, Datum monospace). font-family explizit auf die Token-Familie, nicht per Feld. */
.buchpop, .buchpop input, .buchpop select, .buchpop textarea, .buchpop button { font-family: var(--font); }
.buchpop input, .buchpop select, .buchpop textarea {
  min-height: var(--tap); background: var(--flaeche-0); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 var(--s2); font-size: .95rem; }
.buchpop textarea { min-height: calc(var(--tap) * 1.4); padding: var(--s2); }
.buchpop label.cb input[type=checkbox] { min-height: 0; width: 22px; height: 22px; }
/* Zeitfeld + Uhrzeit im Raster (Auftrag 2026-09-27-0117, Mark: „kein riegel, nur in der anzeige?“).
   Das freie Feld und die Auswahl stehen in EINER Zeile — das Popup wird dadurch nicht höher
   (`tests_buchpop_breit` rechnet `.zeit-paar` wie ein einzelnes Feld). */
.zeit-paar { display: flex; gap: var(--s1); align-items: stretch; min-width: 0; }
.zeit-paar > input { flex: 1 1 auto; min-width: 0; }
.zeit-paar > select.raster-wahl { flex: 0 0 auto; width: 5.75rem; }
.buchpop .edit-melden { margin: 0; font-size: .9rem; color: var(--text); }
.buchpop .edit-melden.konflikt { color: var(--reserviert); font-weight: 700; }
.buchpop .edit-aktion { display: flex; gap: var(--s2); margin-top: var(--s1); }
.buchpop .edit-aktion button { flex: 1; min-height: var(--tap); border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--linie); font-size: .95rem; font-weight: 700; }
.buchpop .edit-aktion button[type=submit] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-status); }
.buchpop .edit-aktion .sekundaer { background: var(--flaeche-2); color: var(--text); font-weight: 400; }
/* Storno: destruktiv, aber ruhig (Outline statt gefüllt) — konkurriert nicht mit dem Akzent-Speichern. */
.buchpop .edit-aktion .storno { background: transparent; color: var(--belegt); border-color: var(--belegt); }
/* Status-Schnellaktionen (A/N usw.) — Outline in ok/warn, dieselbe Semantik wie die Ankunftsspalte. */
.buchpop .edit-aktion .prim { background: transparent; font-weight: 700; }
.buchpop .edit-aktion .prim.ok   { color: #7ede9f; border-color: #3f9d6b; }
.buchpop .edit-aktion .prim.warn { color: var(--reserviert); border-color: var(--reserviert); }

/* --- Buchungs-Popup „Neue Buchung“ / „Buchung ändern“: breit statt hoch (Auftrag 2026-09-16-0130) --
   🔴 **Nur dieses Popup.** Jede Regel hier trägt `.bp-breit`, und die Klasse steht allein in
   `_edit_form.html` und `spiele.html` (Auftrag 2026-09-22-2154). Die Folgetermine und der Sperr-Dialog bleiben,
   wie sie sind.

   Zugesichert ist: **ab 1280 × 720 passt das Popup ohne senkrechtes Scrollen**
   (`reservierung/tests_buchpop_breit.py`). Die Fensterbreite bestimmt die **Spaltenzahl** —
   eine, zwei, drei, ab 1600 px vier —, Schrift und Feldhöhen bleiben fest. Wer die Schrift an die
   Fensterhöhe koppelt, macht sie auf dem kleinsten Bildschirm am kleinsten; das ist verboten.

   Die Blöcke folgen der Tipp-Reihenfolge am Tresen: **Gast** (bei jeder neuen Buchung leer),
   **Wann & wo** (Tisch und Beginn bringt der Klick in den Raumplan schon mit), **Details**
   (selten angefasst), dazu Spielzeit und Verlauf. Die Breite des Dialogs hängt am Inhalt: Die
   Seiten setzen `dialog#ank-pop` bzw. `dialog#pop` auf 52rem — `:is(#ank-pop, #pop)` hält die
   Spezifität darüber, `:has()` beschränkt es auf dieses Formular. Wechselt der Dialog zu den
   Folgeterminen (anderes Formular), ist er wieder schmal. */
dialog:is(#ank-pop, #pop):has(form.bp-breit) { width: min(96vw, 1760px); max-width: 96vw; }
/* „Neue Buchung" hat höchstens drei Spalten (s. u.) — gleich breit wie die vier beim Ändern:
   (1760 − 3 × 16) / 4 = 428 px je Spalte, also 3 × 428 + 2 × 16 = 1316 px. */
dialog:is(#ank-pop, #pop):has(form.bp-breit.bp-neu) { width: min(96vw, 1316px); }
.buchpop.bp-breit { grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kopf" "tag" "kontakt" "wann" "details" "uhren" "verlauf" "melden" "aktion"; }
@media (min-width: 760px) {
  .buchpop.bp-breit { grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "kopf tag" "kontakt wann" "details uhren" "details verlauf"
                         "melden melden" "aktion aktion"; }
}
/* Drei Spalten: die Uhr unter „Details“, der Verlauf unter „Gast“ — jeweils dort, wo die Spalte
   am kürzesten ist. Titel und Tag teilen sich eine Zeile.
   🔴 Die Zeilen sind versetzt, nicht glatt: Stünden Verlauf und Uhr in derselben Rasterzeile,
   begänne die Uhr erst unter dem längsten Block statt direkt unter „Details“ — gemessen 788 px
   statt 708 px, das Popup scrollte. */
@media (min-width: 1200px) {
  .buchpop.bp-breit { grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "kopf tag tag" "kontakt wann details" "kontakt wann uhren"
                         "verlauf wann uhren" "melden melden melden" "aktion aktion aktion"; }
}
/* „Neue Buchung": Die Gast-Spalte läuft bis unten durch, Meldung und Knöpfe stehen rechts daneben
   (Auftrag 2026-09-17-1745). Seit der Vorschlagskasten unter „Gast" steht und seinen Platz hält,
   ist diese Spalte die höchste; unter ihr noch eine Knopfzeile über die volle Breite überschritte
   bei 1280 × 720 die Sichthöhe (`tests_buchpop_breit`). Uhren und Verlauf gibt es beim Anlegen
   nicht, ihre Flächen fehlen hier deshalb. */
@media (min-width: 1200px) {
  .buchpop.bp-breit.bp-neu { grid-template-areas: "kopf tag tag" "kontakt wann details"
                               "kontakt melden melden" "kontakt aktion aktion"; }
}
/* 🔴 **Die vierte Spalte gibt es nur beim Ändern** (Auftrag 2026-09-17-1745, Punkt 7 des
   Entwurfs). Beim Anlegen stand dort die Vorschlagsliste; seit sie unter „Gast" steht, bliebe die
   Spalte leer. Also bleibt „Neue Buchung" beim Drei-Spalten-Raster darüber — und der Dialog wird
   schmaler (Regel unten), nicht leerer. */
@media (min-width: 1600px) {
  .buchpop.bp-breit:not(.bp-neu) { grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-areas: "kopf kopf tag tag" "kontakt wann details uhren"
                         "kontakt wann details verlauf" "melden melden melden melden"
                         "aktion aktion aktion aktion";
    grid-template-rows: auto auto 1fr auto auto; }   /* Überhang geht unter den Verlauf, nicht dazwischen */
}
/* 🔴 Feste Zeilenhöhe statt `normal`: Mit `normal` hängt jede Textzeile an der Schrift — Segoe UI
   am Tresen-PC ist höher als die Ersatzschrift auf dem Server, und gemessen wird auf dem Server.
   Aus demselben Grund hat die Tischliste eine feste Höhe statt der Zeilenhöhe der Schrift. */
.buchpop.bp-breit, .buchpop.bp-breit :is(input, select, textarea) { line-height: 1.25; }
.buchpop.bp-breit select[multiple] { height: 7.75rem; }
.buchpop.bp-breit > .editkopf { grid-area: kopf; }
.buchpop.bp-breit > .edittag { grid-area: tag; margin: 0; align-self: center; }
.buchpop.bp-breit > .bp-kontakt { grid-area: kontakt; }
.buchpop.bp-breit > .bp-wann { grid-area: wann; }
.buchpop.bp-breit > .bp-details { grid-area: details; }
.buchpop.bp-breit > .bp-uhren { grid-area: uhren; min-width: 0; display: flex; flex-direction: column;
  gap: var(--s2); }
.buchpop.bp-breit > .bp-verlauf { grid-area: verlauf; min-width: 0; align-self: start; }
/* Gast-Karte, Vorschlagskasten und „E-Mail-Bestätigung senden?" untereinander in einer Spalte
   (Auftrag 2026-09-17-1745). Bis dahin standen die Vorschläge in der Fläche der Uhren — rechts
   oben, quer über den Dialog vom getippten Feld entfernt. */
.buchpop.bp-breit > .bp-gast { grid-area: kontakt; min-width: 0; display: flex;
  flex-direction: column; gap: var(--s1); }
.buchpop.bp-breit > .bp-gast > label.cb { margin: 0; }
.buchpop.bp-breit > #edit-melden { grid-area: melden; }
.buchpop.bp-breit > .edit-aktion { grid-area: aktion; flex-wrap: wrap; }
.buchpop.bp-breit .bp-uhren > .spielzeit { margin: 0; }
.buchpop.bp-breit .bp-verlauf > .verlauf { margin: 0; }
/* Ein Block: Überschrift, darunter ein Zweierraster — die meisten Felder über beide Hälften,
   kurze Paare nebeneinander (Anrede/Vorname, Veranstaltung/Pauschale, Catering/Cocktailkurs). */
.buchpop.bp-breit .bp-gruppe { margin: 0; min-width: 0; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--s1) var(--s2) var(--s2);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s2);
  align-content: start; }
.buchpop.bp-breit .bp-gruppe > legend { font-size: .78rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-leise); padding: 0 var(--s1); }
.buchpop.bp-breit .bp-gruppe > * { grid-column: 1 / -1; }
.buchpop.bp-breit .bp-kontakt { grid-template-columns: 10rem minmax(0, 1fr); }
/* 🔴 `feld-telefon`/`feld-email` stehen neben `feld-gast_telefon`/`feld-gast_email`, weil die
   Spiele-Neuanlage (`spiele.html`, seit Auftrag 2026-09-22-2154) in demselben Raster liegt, ihre
   POST-Felder aber seit jeher `telefon`/`email` heissen — `spiele_buchen` und
   `_spiele_ergebnis.html` lesen diese Namen, und der Auftrag verbietet Aenderungen am
   Gespeicherten. Eine Zeile mehr in der Liste statt eines zweiten Regelblocks (Regel 02). */
.buchpop.bp-breit .bp-gruppe > :is(.feld-anrede, .feld-gast_telefon, .feld-telefon, .feld-is_event, .feld-catering) { grid-column: 1; }
.buchpop.bp-breit .bp-gruppe > :is(.feld-vorname, .feld-gast_email, .feld-email, .feld-pauschale_eur_pp, .feld-cocktailkurs) { grid-column: 2; }
/* 🔴 **Der einzige Grenzwert auf die Fensterhöhe im Bestand** (Auftrag 2026-09-20-0180). Er steht
   hier, an einer Stelle — nicht verteilt über mehrere Regeln (Regel 10, ein Register je Sache).
   Wer einen zweiten Höhen-Grenzwert braucht, nimmt diesen mit, statt einen dritten Wert zu
   erfinden.

   **Was er tut:** Über 900 px Fensterhöhe stehen Telefon und E-Mail wieder **untereinander**
   über die volle Gruppenbreite. Darunter bleibt alles wie seit `…-1745` — nebeneinander.

   **Warum die Höhe und nicht die Breite:** Die Klemme war nie die Breite. Nebeneinander spart
   Höhe und bezahlt es mit abgeschnittenen Werten; gebraucht wird die Ersparnis nur dort, wo die
   Sichthöhe knapp ist. Ein Breiten-Grenzwert träfe beim nächsten schmalen, hohen Fenster wieder
   das Falsche.

   **Warum 900** (gemessen 21.09.2026 mit `bin/buchpopprobe.py`, Chromium 151, nicht geschaetzt):
   - Der hoechste **erreichbare** Zustand ist "Aendern mit zwei Uhren" mit 845 px Inhalt. Das
     Untereinander macht ihn nicht hoeher (Formular 821 -> 821 px): Dort ist die Uhrenspalte die
     hoechste, nicht die Gast-Spalte.
   - Untereinander kostet +85 px, wo es wirkt -- gemessen an "Neu" (635 -> 720) und an "Neu mit
     vollem Vorschlagskasten" (ebenfalls 635 -> 720; der Kasten haelt seinen Platz, …-1745 §1.6).
     "Aendern" kostet +24 px.
   - Der hoechste Zustand, den das Untereinander anhebt, braucht damit 744 px Inhalt.
   - Der Dialog bekommt `Fensterhoehe - 14 px` als Sicht (bei 720 -> 706 px, gemessen).
   - Noetig ist also max(845, 744) + 14 = **859 px**. Gewaehlt sind 900: 41 px Luft nach unten,
     180 px Abstand zu 720 und zu 1080.

   🔴 **1080 ist die Bildschirmhoehe, dieser Grenzwert misst die Sichthoehe.** Ein maximierter
   Browser auf dem Tresen-Schirm hat nach Titel-, Tab- und Adressleiste rund 950-980 px Viewport,
   nicht 1080. Bei einem Grenzwert von 1000 haette die Regel dort **nie** gegriffen -- sie waere
   gruen getestet und live wirkungslos gewesen. Deshalb steht hier 900 und nicht die Zahl, die
   sich aus der Aufloesung anbietet.

   **Anrede/Vorname bleiben nebeneinander.** Sie sind kurz und wurden nie abgeschnitten; sie
   mitzunehmen wäre Höhe ohne Gegenwert. */
@media (min-height: 900px) {
  .buchpop.bp-breit .bp-gruppe > :is(.feld-gast_telefon, .feld-telefon, .feld-gast_email, .feld-email) { grid-column: 1 / -1; }
}
.buchpop.bp-breit .bp-gruppe > label.cb.feld-is_event { align-self: end; min-height: var(--tap); }
.buchpop.bp-breit .bp-gruppe > .edittag { margin: 0; }
.buchpop.bp-breit .bp-gruppe > .pax-hinweis { margin: 0; }
.buchpop.bp-breit .bp-gruppe input:not([type=checkbox]):not([type=radio]),
.buchpop.bp-breit .bp-gruppe select { width: 100%; box-sizing: border-box; }
/* Zeitpaar im breiten Popup (Auftrag 2026-09-27-0117, Grundregel `.zeit-paar` oben): die Zeile
   `width: 100%` direkt darueber muss hier geschlagen werden. */
.buchpop.bp-breit .bp-gruppe .zeit-paar > input:not([type=checkbox]):not([type=radio]) { width: auto; }
.buchpop.bp-breit .bp-gruppe .zeit-paar > select.raster-wahl { width: 5.75rem; }
/* 🔴 Name, Telefon, Mail sind die drei Felder, die bei fast jeder Buchung angefasst werden —
   deshalb größer als der Rest. Die Spezifität muss `theme.css` schlagen
   (`.ui-dunkel input:not(…):not(…)` setzt 1rem für alle Felder). */
.buchpop.bp-breit .bp-gruppe label.gross { font-size: .9rem; }
.buchpop.bp-breit .bp-gruppe label.gross :is(input, select) {
  min-height: calc(var(--tap) + var(--s2)); font-size: 1.2rem; }

/* --- „Buchung ändern" am Spiele-Tresen: hier stand bis zum 27.09.2026 das Raster des eigenen
   Aendern-Formulars (`.buchpop.editpop`, Auftrag 2026-09-10-2046). Seit Auftrag 2026-09-27-0059
   ist „Buchung ändern" dieselbe Maske wie die Neubuchung (`#buchform`) im Raster von „Buchung
   ändern" im Raumplan (`.buchpop.bp-breit:not(.bp-neu)` oben) — ein Raster statt zwei. */

/* BAUAUFTRAG 10: Konflikt-Auflösung (je Gegenpartei ein Verschiebe-Angebot). Popup wie Drag-Overlay. */
.konflikt { display: flex; flex-direction: column; gap: var(--s2); }
.konflikt-y { border: 1px solid var(--linie); border-radius: var(--radius); padding: var(--s2); }
.konflikt-y-kopf { margin: 0 0 var(--s1); font-weight: 600; font-size: .9rem; }
.konflikt-move { display: flex; gap: var(--s2); align-items: center; }
.konflikt-move select { flex: 1; min-height: var(--tap); background: var(--flaeche-0); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius); padding: 0 var(--s2); }
.konflikt-move button { min-height: var(--tap); border-radius: var(--radius); padding: 0 var(--s3); cursor: pointer;
  background: transparent; border: 1px solid #3f9d6b; color: #7ede9f; font-weight: 700; }
.konflikt-hinweis { font-size: .82rem; color: var(--text-leise); margin: 0; }

/* --- Folgetermine (06.08.2026): Mehrfachauswahl statt Serie -------------------------------------
   🔴 Belegte und geschlossene Termine werden **gedämpft gezeigt**, nicht weggelassen: eine Lücke in
   der Wochenreihe („Montag fehlt") liest sich wie ein Fehler, ein sichtbar deaktivierter Eintrag
   mit Grund nicht. Farben aus den vorhandenen Tokens, keine neuen Werte. */
.folgetermine { grid-template-columns: 1fr; }
.ft-hinweis { font-size: .84rem; color: var(--text-leise); margin: 0 0 var(--s2); }
.ft-liste { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow-y: auto; }
.ft-liste li { border-bottom: 1px solid var(--linie); }
.ft-liste li:last-child { border-bottom: none; }
.ft-liste label.cb { display: flex; align-items: center; gap: var(--s2); min-height: var(--tap);
  padding: 0 var(--s1); cursor: pointer; }
.ft-liste li.ft-zu label.cb { cursor: not-allowed; opacity: .65; }
.ft-datum { min-width: 11rem; }
.ft-frei { color: var(--frei); font-size: .82rem; }
.ft-grund { color: var(--text-leise); font-size: .82rem; }

/* --- Spielzeit im Buchungs-Popup (Auftrag 2317) --------------------------------------------------
   Sitzt in beiden Edit-Formularen (Spiele-Ansicht und gemeinsames Popup) und erscheint nur bei
   Pool 1–6. Bewusst zurückhaltend: Mark wollte den Zähler dort, wo der Termin ist, und „stört
   optisch nicht" — deshalb ein Fieldset im Fluss des Formulars, kein farbiger Kasten. */
.spielzeit { grid-column: 1 / -1; border: 1px solid var(--linie); border-radius: var(--radius);
  padding: var(--s2); margin: var(--s2) 0; }
.spielzeit legend { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-leise); padding: 0 var(--s1); }
.sz-stand { margin: 0 0 var(--s2); display: flex; align-items: baseline; gap: var(--s2); }
.sz-zeit { font-variant-numeric: tabular-nums; font-size: 1.25rem; }
.sz-leise { color: var(--text-leise); font-size: .84rem; }
.sz-zahlweise { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-bottom: var(--s2); }
.sz-zahlweise label.cb { display: flex; align-items: center; gap: 4px; min-height: var(--tap); }
.sz-zahlweise input[type=text] { min-height: var(--tap); width: 9rem; }
.spielzeit > button { min-height: var(--tap); width: 100%; border-radius: var(--radius);
  border: 1px solid var(--linie); font-size: 1rem; cursor: pointer; }
.sz-meldung { margin: 0 0 var(--s2); padding: var(--s2); border-radius: var(--radius);
  background: var(--flaeche-2); border-left: 4px solid var(--frei); }
.sz-meldung.warn { border-left-color: var(--ind-warn); }

/* Meldestreifen statt `window.alert` (Auftrag 2026-09-30-0006 §3, `reservierung/meldung.js`).
   Ort und Optik wie der Rückgängig-Streifen (`.sp-undo`) und `.maskenschutz-streifen`: fixiert am
   unteren Rand, blockiert nichts. Fehler und Erfolg unterscheiden sich an Symbol UND Kante, nie nur
   an der Farbe (ui-tresen). Kantenfarben wie `.sz-meldung` darüber. */
.tresen-meldung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex;
  align-items: center; gap: var(--s3); min-height: var(--tap); box-sizing: border-box;
  padding: var(--s3) var(--s4); background: var(--flaeche-2); color: var(--text);
  border-top: 1px solid var(--linie); border-left: 6px solid var(--ind-warn);
  box-shadow: 0 -4px 16px rgba(0,0,0,.35); font-size: .95rem; cursor: pointer; }
.tresen-meldung.ok { border-left-color: var(--frei); }
.tresen-meldung-symbol { font-weight: 800; color: var(--ind-warn); }
.tresen-meldung.ok .tresen-meldung-symbol { color: var(--frei); }