/* Gastseitige Buchung (ui-gast): mobil zuerst (375px), 48px-Trefferflaechen, EIN Akzent.
 *
 * 🔴 **Die Farben kommen aus der Website-Palette, nicht mehr von hier** (Auftrag
 * 2026-08-25-2350). Anlass ist Mark am 25.08.2026: *"die reservierung hat keine navigation und
 * auch die falschen farben."* Der Gast kommt ueber `/reservieren/` von der Website — und sah
 * dort bisher die **Betriebs**-Optik (Filzgruen auf Blaugrau), also ein anderes Angebot, mitten
 * im Buchungsvorgang. Marks Richtung vom 18.07.2026 stand laengst fest: *"farbe ist zweitrangig,
 * die bauen wir unserer webseite entsprechend um"*.
 *
 * 🔴 **Diese Datei traegt keinen einzigen Hex-Wert mehr.** Die `--g-*` bleiben als Namen stehen —
 * sie stehen ueberall in dieser Datei und im HTML —, sind aber jetzt nur noch **Zuordnung**:
 * "was in der Buchung `Karte` heisst, ist auf der Website `--web-karte`". Ein zweiter Farbort
 * driftet beim naechsten Farbwechsel, und die veraltete Fassung wird geglaubt (Regel 02).
 * Ein Test haelt das fest.
 *
 * 🔴 **Was hier NICHT mitwandert: der interne Tresen.** `reservierung/tokens.css` und
 * `core/theme.css` beziehen weiter `--marke-*` (die Betriebs-Optik). Zwei Zielgruppen, zwei
 * Oberflaechen — das ist Absicht (`ui-gast`), und `/reservierung/tischplan/` ist die
 * Kontrollgruppe, an der man sieht, ob jemand zu weit gegriffen hat.
 *
 * Kontraste WCAG AA nachgerechnet; die Website-Palette ist dafuer bereits durchgerechnet
 * (15,3:1 Fliesstext, 10,8:1 Gold — Messung 26.08.2026). Kein Node.
 */
@import url("../core/marke.29256710142f.css");

:root {
  /* Flaechen */
  --g-bg: var(--web-bg);
  --g-card: var(--web-karte);
  --g-eingabe: var(--web-bg-2);   /* eingesenkt gegen die Karte, wie vorher --g-eingabe */
  --g-linie: var(--web-linie);

  /* Text */
  --g-text: var(--web-text);
  --g-leise: var(--web-leise);

  /* Akzent — auf der Website traegt das Gold, was in der Buchung das Filzgruen trug */
  --g-akzent: var(--web-gold);
  --g-akzent-text: var(--web-gold-text);
  --g-akzent-weich: var(--web-deko);

  /* Warnung — der eine Wert, der fuer die Angleichung neu entstehen musste (s. marke.css) */
  --g-warn: var(--web-warn);
  --g-warn-weich: var(--web-warn-weich);

  /* Form. `--g-tap` ist keine Marke, sondern eine Bedienregel (ui-gast: 48px am Daumen) und
   * bleibt deshalb hier stehen — sie darf sich mit keinem Farbwechsel aendern. */
  --g-radius: var(--marke-radius);
  --g-tap: 48px;
  --g-s1: 6px; --g-s2: 12px; --g-s3: 18px; --g-s4: 28px;
  --g-schatten: var(--marke-schatten);
  --g-font: var(--marke-font);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--g-bg); color: var(--g-text); font-family: var(--g-font);
  line-height: 1.5; -webkit-text-size-adjust: 100%; color-scheme: dark; }
/* ── Markenkopf: der eine Ausgang zur Website (Auftrag 2026-08-25-2350) ──────────────────
 * 🔴 **Nicht sticky.** Auf der Website klebt der Kopf oben, weil dort geblättert wird; hier wird
 * ausgefüllt. Ein klebender Balken nähme auf 375 px genau die Zeilen weg, in denen der Gast
 * gerade tippt — und die Tastatur nimmt schon die halbe Höhe. Der Ausgang muss erreichbar sein,
 * nicht dauernd im Weg stehen; die Fußzeile trägt ihn ausgeschrieben ein zweites Mal.
 * Optik bewusst wie `.w-kopf`/`.w-marke` in `core/web.css` — dieselbe Marke, dieselbe Geste. */
.g-marke-kopf { border-bottom: 1px solid var(--g-linie); background: var(--web-bg-2);
  display: flex; align-items: center; flex-wrap: nowrap; min-width: 0; }
/* Zurück-Knopf (Auftrag 2026-09-27-2329-zurueck-knopf): leise, kein Primärknopf — er darf der
   Buchung nicht die Show stehlen. Die Trefferfläche ist der ganze Link (48 px, ui-gast), der
   sichtbare Rahmen nur der innere Teil. `nowrap`: bei 390 px bleibt der Kopf eine Zeile. */
.g-zurueck { display: inline-flex; align-items: center; min-height: var(--g-tap); flex: none;
  padding: 0 var(--g-s1) 0 var(--g-s2); color: var(--g-leise); text-decoration: none;
  font-size: .85rem; white-space: nowrap; }
.g-zurueck span { border: 1px solid var(--g-linie); border-radius: var(--g-radius);
  padding: 4px 10px; }
.g-zurueck:hover span { color: var(--g-akzent); border-color: var(--g-akzent); }
.g-zurueck:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: -2px; }
.g-marke { display: inline-flex; align-items: center; min-height: var(--g-tap);
  padding: 0 var(--g-s3); color: var(--g-akzent); text-decoration: none;
  font-weight: 700; letter-spacing: .18em; text-transform: uppercase; font-size: 1.05rem; }
.g-marke span { color: var(--g-leise); }
.g-marke:hover { color: var(--web-gold-hell); }
.g-marke:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: -2px; }

.g-wrap { max-width: 34rem; margin: 0 auto; padding: var(--g-s3) var(--g-s3) var(--g-s4); }
.g-kopf h1 { font-size: 1.5rem; margin: var(--g-s3) 0 var(--g-s1); }
.g-kopf p { color: var(--g-leise); margin: 0 0 var(--g-s3); }
.g-card { background: var(--g-card); border: 1px solid var(--g-linie); border-radius: var(--g-radius);
  box-shadow: var(--g-schatten); padding: var(--g-s3); margin-bottom: var(--g-s3); }
.g-card h2 { font-size: 1.05rem; margin: 0 0 var(--g-s2); }
label.g-feld { display: block; font-size: .85rem; color: var(--g-leise); margin: var(--g-s2) 0 var(--g-s1); }
input, select, textarea { width: 100%; min-height: var(--g-tap); font-size: 1rem; font-family: inherit;
  padding: 0 var(--g-s2); border: 1px solid var(--g-linie); border-radius: var(--g-radius); background: var(--g-eingabe); color: var(--g-text); }
textarea { padding: var(--g-s2); min-height: 4.5rem; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--g-akzent); outline-offset: 1px; }
.g-zwei { display: flex; gap: var(--g-s2); }
.g-zwei > div { flex: 1; }
/* §16: Datumsnavigation — Datumsfeld mit ‹ ›-Pfeilen (Tag −/+). */
.g-datumnav { display: flex; align-items: stretch; gap: var(--g-s2); }
.g-datumnav input { flex: 1; }
.g-pfeil { flex: none; width: var(--g-tap); min-height: var(--g-tap); padding: 0; font-size: 1.4rem;
  line-height: 1; border: 1px solid var(--g-linie); border-radius: var(--g-radius);
  background: var(--g-eingabe); color: var(--g-text); cursor: pointer; }
.g-pfeil:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 1px; }
/* Auswahl-Chips (Bereich, Präferenz) — Radio als Button */
.g-chips { display: flex; flex-wrap: wrap; gap: var(--g-s2); }
.g-chip { position: relative; }
.g-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.g-chip span { display: inline-flex; align-items: center; justify-content: center; min-height: var(--g-tap);
  padding: 0 var(--g-s3); border: 1px solid var(--g-linie); border-radius: 999px; background: var(--g-eingabe); cursor: pointer; font-weight: 600; }
.g-chip input:checked + span { background: var(--g-akzent); color: var(--g-akzent-text); border-color: var(--g-akzent); }
.g-chip input:focus-visible + span { outline: 2px solid var(--g-akzent); outline-offset: 2px; }
/* Cross-Sell (§6c): Angebote als volle, links­bündige Auswahlzeilen — lesbarer Satztext statt Pille. */
.g-crosssell { flex-direction: column; align-items: stretch; }
.g-crosssell .g-breit { width: 100%; }
.g-crosssell .g-breit span { width: 100%; justify-content: flex-start; text-align: left; border-radius: var(--g-radius); padding: 0 var(--g-s3); }
/* §194/§195 'davor'-Dauerwahl: eine Zeile Überschrift + ein Umschalter aus 30/60/90-Chips (nicht drei
   getrennte Radiozeilen). Die Chips teilen add_token mit den danach-Zeilen -> weiter exklusiv. */
.g-crosssell .g-davor { display: flex; flex-direction: column; gap: var(--g-s2); border: 1px solid var(--g-linie);
  border-radius: var(--g-radius); padding: var(--g-s2) var(--g-s3); background: var(--g-eingabe); }
.g-davor-wo { font-weight: 600; font-size: .92rem; }
.g-davor-dauern { display: flex; flex-wrap: wrap; gap: var(--g-s2); }
.g-dauer span { flex-direction: column; line-height: 1.15; padding: var(--g-s2) var(--g-s3); border-radius: var(--g-radius); min-width: 5.2rem; }
.g-dauer span small { font-weight: 400; opacity: .8; font-size: .74rem; }
/* Bestätigungs-Modal (§7.1): Dialog über dem Flow, kein Redirect. */
.g-modal { border: 0; border-radius: var(--g-radius); padding: 0; max-width: 26rem; width: calc(100% - 2 * var(--g-s4));
  background: var(--g-card); color: var(--g-text); box-shadow: 0 12px 48px rgba(0, 0, 0, .5); }
.g-modal::backdrop { background: rgba(0, 0, 0, .6); }
.g-modal .g-ok { padding: var(--g-s4); }
.g-best-areal { color: var(--g-akzent); }
/* Slots */
.g-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: var(--g-s2); }
.g-slot { min-height: var(--g-tap); border: 1px solid var(--g-linie); border-radius: var(--g-radius);
  background: var(--g-eingabe); color: var(--g-text); cursor: pointer; font-size: .95rem; font-weight: 600; }
.g-slot:hover { border-color: var(--g-akzent); }
.g-slot.aktiv { background: var(--g-akzent); color: var(--g-akzent-text); border-color: var(--g-akzent); }
.g-leer { color: var(--g-leise); padding: var(--g-s2) 0; }
/* Hauptaktion */
.g-tun { width: 100%; min-height: var(--g-tap); margin-top: var(--g-s3); border: 0; border-radius: var(--g-radius);
  background: var(--g-akzent); color: var(--g-akzent-text); font-size: 1.05rem; font-weight: 700; cursor: pointer; }
.g-tun:disabled { opacity: .5; cursor: default; }
/* Hauptaktion als Link (Auftrag 2026-10-04-0130: „Gruppe anfragen“ bei zu großer Gruppe) */
a.g-tun { display: flex; align-items: center; justify-content: center; text-decoration: none; }
/* Meldungen */
.g-zeit { background: var(--g-akzent-weich); border-radius: var(--g-radius); padding: var(--g-s2); font-weight: 600; margin-bottom: var(--g-s2); }
.g-ok { background: var(--g-akzent-weich); border-left: 4px solid var(--g-akzent); padding: var(--g-s3); border-radius: var(--g-radius); }
.g-fehler { background: var(--g-warn-weich); border-left: 4px solid var(--g-warn); padding: var(--g-s3); border-radius: var(--g-radius); color: var(--g-text); }
/* Ganze Zeile ist die Trefferfläche (≥48px): das Label toggelt via for=, nicht nur die 28px-Box. */
.g-check { display: flex; align-items: center; gap: var(--g-s2); margin-top: var(--g-s3); min-height: var(--g-tap); }
.g-check input { width: 28px; height: 28px; min-height: 28px; flex: 0 0 28px; }
.g-check label { font-size: .95rem; color: var(--g-text); flex: 1; min-height: var(--g-tap); display: flex; align-items: center; }
/* 10er-Karte prominent (ADR-016 §1.3: treibt den Billard-Counter) — Rahmen, Tint, größere Box. */
.g-check.betont { border: 2px solid var(--g-akzent); background: var(--g-akzent-weich);
  border-radius: var(--g-radius); padding: var(--g-s1) var(--g-s3); }
.g-check.betont input { width: 32px; height: 32px; flex: 0 0 32px; }
.g-check.betont label { font-weight: 600; color: var(--g-akzent); }
.g-fuss { color: var(--g-leise); font-size: .82rem; margin-top: var(--g-s3); text-align: center; }
/* Stufe 1 der Widerrufsfunktion (Auftrag 2026-09-27-0029, Nachtrag Punkt 4): **hervorgehoben**,
 * nicht als gewöhnlicher Fußlink — Gold-Fläche wie der Hauptknopf der Website, dunkler Text darauf,
 * volle Trefferfläche. Steht im Fuß jeder Gastseite und auf Kauf-, Danke- und Kartenseite. */
.g-widerruf { display: inline-flex; align-items: center; min-height: var(--g-tap);
  margin-top: var(--g-s2); padding: 0 1rem; border-radius: 999px; font-weight: 600;
  background: var(--g-akzent); color: var(--g-akzent-text); text-decoration: none; }
.g-widerruf:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 2px; }
.g-hinweis { color: var(--g-leise); font-size: .85rem; margin: var(--g-s1) 0 0; }
a { color: var(--g-akzent); }
/* Datenschutz/Recht — aus der Strecke, aber auffindbar (verlinkt aus der AGB-Zeile) */
.g-recht { max-width: 34rem; margin: var(--g-s2) 0; color: var(--g-leise); font-size: .85rem; }
.g-recht summary { min-height: var(--g-tap); display: flex; align-items: center; cursor: pointer; color: var(--g-akzent); }
.g-recht p { margin: var(--g-s1) 0; }

/* Honeypot (Go-Live-Tor 2): unsichtbar fuer Menschen, aber im DOM vorhanden und ausfuellbar.
   Bewusst NICHT display:none/visibility:hidden — Bots ueberspringen genau die. Stattdessen aus dem
   Sichtfeld schieben. Die Barrierefreiheit haengt am aria-hidden + tabindex="-1" im Template. */
.g-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Rechtstexte aus dem Archiv (Auftrag 2026-08-11-2349). Der Volltext ist eingefrorener Klartext.
   🔴 **Seit Auftrag 2026-10-13-0226 gegliedert statt `pre-wrap`:** Köpfe als `h2`, „- …“ als Liste,
   jede Zeile ein Absatz (`core.agb.gliederung`) — der gespeicherte Text bleibt, wie er ist.
   🔴 **Dieselben Werte wie `.w-rechtstext` in `web.css`** (Lesebreite 46rem, Display-Schrift und
   Gold für Köpfe, Khaki für den Fließtext, Zeilenhöhe 1,6): Mit dem Schalter wechselt die Hülle,
   nicht das Bild des Textes. Die Farben über `--g-*` bzw. `--web-display` aus `marke.css`. */
/* 46rem ist die Textspalte der Website; die Gast-Hülle hat außen zweimal Rand und Kartenpolster
 * (je `--g-s3`) und den Kartenrahmen — darum hier um genau diese erweitert, gemessen 13.10.2026:
 * Textspalte bei 1280 px in beiden Hüllen gleich breit. */
.g-wrap-recht { max-width: calc(46rem + 4 * var(--g-s3) + 2px); }
.g-wrap-recht h1 { font-family: var(--web-display); color: var(--g-akzent); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.15; letter-spacing: .02em;
  margin: 0 0 1.4rem; hyphens: auto; overflow-wrap: anywhere; }
.g-rechtstext { font-size: .95rem; line-height: 1.6; color: var(--g-leise); margin: var(--g-s3) 0;
  overflow-wrap: anywhere; }
.g-card .g-rechtstext h2 { font-family: var(--web-display); color: var(--g-akzent); font-weight: 700;
  font-size: 1.15rem; line-height: 1.25; letter-spacing: .02em; margin: var(--g-s4) 0 var(--g-s2); }
.g-rechtstext p { margin: 0 0 var(--g-s2); }
.g-rechtstext ul { margin: 0 0 var(--g-s2); padding-left: 1.25rem; }
.g-rechtstext li { margin: 0 0 var(--g-s1); }
.g-rechtstext .g-rt-kopf { color: var(--g-text); }
.g-rechtstext .g-rt-schluss { font-size: .85rem; margin-top: var(--g-s4); }
/* Zwei Kanäle, nicht nur Farbe: ein Wortzeichen davor (ui-tresen, Barrierefreiheit). */
.g-warnung { border: 1px solid var(--g-warn); border-radius: 8px;
  padding: var(--g-s2) var(--g-s3); margin: var(--g-s3) 0; }
.g-warnung::before { content: "! "; font-weight: 700; }

/* ── Das Rad fuer die Startzeit + der Schrittweiser fuer die Dauer ─────────────────────────────
 * Auftrag 2026-09-20-0170 (Mark 18.09.2026: „nicht felder für die uhrzeiten-auswahl, sondern ein
 * scrollrad, gerne etwas grösser und entsprechend unserer style vorgaben").
 *
 * 🔴 **Gerastet wird per `scroll-snap`, nicht per JavaScript.** Damit rollt das Rad mit dem Daumen,
 * mit dem Mausrad und mit den Pfeiltasten in derselben Mechanik, und es rastet auch dann sauber,
 * wenn das Skript spaeter laedt. Das Skript liest nur ab, wo es stehengeblieben ist.
 *
 * 🔴 **Die Zeilenhoehe ist eine Bedienregel, keine Kosmetik.** `--g-radzeile` ist zugleich die
 * Trefferflaeche am Daumen (56px > die geforderten 44px) UND die Rechengroesse des Skripts
 * (`scrollTop / Zeilenhoehe`). Wer sie aendert, aendert beides — deshalb steht sie als ein Wert da.
 *
 * 🔴 **Kontrast gerechnet, nicht geschaetzt** (21.09.2026, Werte aus `marke.css`, Rechnung im
 * Bericht des Auftrags). 🔴 **Die Farbwerte selbst stehen hier bewusst NICHT** — auch nicht als
 * Kommentar: ein zweiter Farbort driftet beim naechsten Farbwechsel, und die veraltete Fassung
 * wird geglaubt (Regel 02, von `tests_gast_optik` festgehalten). Gegen den Rad-Grund
 * (`--g-eingabe`):
 *   gewaehlte Zeile, Gold  10,13 : 1   ·  Nachbarzeile (Deckkraft .8)  9,51 : 1
 *   aeussere Zeile (.55)    5,16 : 1   ·  Erklaerzeile, leise auf Karte  6,41 : 1
 * Alle ueber WCAG AA (4,5 : 1 fuer Fliesstext). 🔴 Die aeussere Zeile stand zuerst auf .4 und kam
 * damit auf **3,36 : 1** — durchgefallen. Die Abstufung „aussen schwaecher als innen" bleibt, sie
 * faengt nur frueher an: 1,05rem ist kein „grosser Text" im Sinn der Norm (dafuer braeuchte es
 * 24px bzw. 18,66px fett), also gilt die harte Schwelle.
 */
:root { --g-radzeile: 56px; }
.g-radbox { margin-top: var(--g-s2); }
.g-radkopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--g-s2); }
.g-radzahl { color: var(--g-leise); font-size: .85rem; }
.g-rad {
  position: relative; height: calc(5 * var(--g-radzeile)); overflow-y: auto;
  scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--g-linie); border-radius: var(--g-radius);
  background: var(--g-eingabe); margin-top: var(--g-s1);
  scrollbar-width: none;                       /* die Leiste wuerde die Mitte aus der Mitte ruecken */
}
.g-rad::-webkit-scrollbar { display: none; }
.g-rad:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 2px; }
/* Zwei Leerzeilen oben und unten: erst dadurch kann die ERSTE und die LETZTE Zeit in die Mitte. */
.g-radband { list-style: none; margin: 0; padding: calc(2 * var(--g-radzeile)) 0; }
.g-radzeile {
  height: var(--g-radzeile); display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center; cursor: pointer; font-variant-numeric: tabular-nums;
  transition: color .12s ease, font-size .12s ease;
}
.g-radzeile.ist-gewaehlt { color: var(--g-akzent); font-size: 1.7rem; font-weight: 700; }
.g-radzeile.ist-nah { color: var(--g-text); font-size: 1.05rem; opacity: .8; }
.g-radzeile.ist-fern { color: var(--g-text); font-size: 1.05rem; opacity: .55; }
/* Der Zeiger: zwei Linien um die Mitte — die gewaehlte Zeit steht zwischen ihnen. Er liegt UEBER
   dem Rad (Geschwister im `.g-radrahmen`), nicht darin: ein absolut gesetztes Kind eines
   scrollenden Kastens scrollt mit und waere nach der ersten Drehung nicht mehr in der Mitte. */
.g-radrahmen { position: relative; }
.g-radzeiger {
  position: absolute; left: 0; right: 0; top: calc(2 * var(--g-radzeile));
  height: var(--g-radzeile); pointer-events: none;
  border-top: 1px solid var(--g-akzent); border-bottom: 1px solid var(--g-akzent);
}
.g-radluecke { color: var(--g-leise); font-size: .85rem; margin: var(--g-s2) 0 0; }
/* Der verborgene Ladeknopf des Rads — nicht `display:none`: ein solcher Knopf laesst sich nicht
   klicken, und genau darueber laeuft der Ladeweg. Aus dem Sichtfeld schieben statt entfernen. */
.g-verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.g-schrittweiser { display: flex; align-items: center; justify-content: space-between;
  gap: var(--g-s2); margin-top: var(--g-s1); }
.g-schritt { width: var(--g-tap); height: var(--g-tap); flex: 0 0 var(--g-tap);
  border: 1px solid var(--g-linie); border-radius: var(--g-radius);
  background: var(--g-eingabe); color: var(--g-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.g-schritt:hover:not(:disabled) { border-color: var(--g-akzent); }
.g-schritt:focus-visible { outline: 2px solid var(--g-akzent); outline-offset: 2px; }
.g-schritt:disabled { opacity: .35; cursor: default; }
.g-dauerzahl { flex: 1; text-align: center; color: var(--g-akzent); font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.g-endzeit { text-align: center; color: var(--g-leise); font-size: .9rem; margin: var(--g-s1) 0 0; }
.g-grenze { text-align: center; color: var(--g-leise); font-size: .85rem; margin: var(--g-s1) 0 0; }