/* Auftritt wie die Website des Hauses (dunkel, ruhig), nicht wie das
   GastroDMS - der Gast landet hier von romeo.koeln aus. */
:root {
  --bg: #0E0E0D;
  --fg: #F7F5F1;
  --line: rgba(247, 245, 241, .2);
  --accent: #7BA05B;
  --accent-deep: #3F5A2C;
  --field: rgba(247, 245, 241, .06);
  --radius: 6px;

  /* Sagt dem Browser, dass diese Seite dunkel ist. Damit zeichnet er seine
     EIGENEN Bedienelemente dunkel: den Kalender hinter dem Datumsfeld, die
     aufklappende Liste des Auswahlkastens, die Bildlaufleiste. Ohne diese
     Zeile war das Kalendersymbol dunkel auf dunkel und praktisch unsichtbar,
     und die aufgeklappte Liste blendete hell auf. */
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* `hidden` muss auch wirklich verbergen.

   Die Regeln des Browsers fuer `[hidden]` verlieren gegen jede eigene Regel,
   die `display` setzt - und `form` und `label` weiter unten tun genau das.
   Ohne diese Zeile blieb das Formular nach der abgeschickten Buchung stehen,
   obwohl `app.js` es auf `hidden` setzt - der Gast sah unter der Bestaetigung
   sein ganzes Formular ein zweites Mal. Dasselbe traf die Bereichswahl
   (`<label id="area-field" hidden>`): Sie stand sichtbar auf der Seite,
   obwohl nichts sie freigegeben hatte.

   Beides am 2026-08-10 am laufenden Stand gemessen, indem diese Regel im
   Browser wieder entfernt wurde: `form` sprang auf `display: flex` und
   754 Pixel Hoehe zurueck, `#area-field` auf `display: flex` und sichtbar.

   Kein `!important` noetig: Ein Merkmalsselektor sticht einen Typselektor. */
[hidden] { display: none; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

.page {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px clamp(18px, 4vw, 40px) 80px;
}

.back {
  color: var(--fg);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .75;
}

.kicker {
  margin: 40px 0 8px;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  opacity: .65;
}

h1 { margin: 0 0 12px; font-size: clamp(30px, 8vw, 48px); line-height: 1.05; }
.lead { margin: 0 0 24px; opacity: .85; }

.lang { display: flex; gap: 8px; margin-bottom: 24px; }
.lang button {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  /* 44 Pixel ist die kleinste Flaeche, die ein Daumen zuverlaessig trifft. */
  min-height: 44px;
  padding: 8px 16px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.lang button.is-active { background: var(--fg); color: var(--bg); }

form { display: flex; flex-direction: column; gap: 18px; }
.row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }

label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
label span { opacity: .8; }

/* Eine einzige Feldhoehe fuer alle Zeilen (Rueckmeldung des Eigentuemers,
   2026-08-10: "die Zeilenhoehen sind unterschiedlich, die sollten alle
   gleich sein"). Vorher hatten die drei Hauptangaben (Tag/Personen/Uhrzeit,
   Klasse .big) 60px, der Rest 48px - das wirkte uneinheitlich. Einzige
   bewusste Ausnahme bleibt die Anmerkung: eine Textfläche braucht mehr
   Höhe, um mehrzeiligen Text zu zeigen. */
input, select, textarea {
  font: inherit;
  /* 16px, damit iOS beim Tippen nicht hineinzoomt. */
  font-size: 16px;
  min-height: 56px;
  padding: 10px 12px;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea { min-height: 90px; padding-top: 12px; }

/* Die drei Angaben, um die es geht: Tag, Personen, Uhrzeit. Sie stehen oben,
   sind groesser gesetzt und hoeher als der Rest des Formulars - auf dem Handy
   sind das die drei Felder, die im Gehen bedient werden. */
.big > span { font-size: 15px; opacity: 1; }
.big input, .big select {
  font-size: 20px;
  padding: 12px 14px;
}

/* Das Kalendersymbol im Datumsfeld: groesser und anfassbar. Der ganze
   Klickbereich oeffnet den Kalender (siehe app.js), das Symbol zeigt nur, dass
   es einen gibt.

   Das aufklappende Kalenderblatt selbst (die Monatsansicht) ist Teil des
   Betriebssystems bzw. Browsers, nicht dieser Seite - anders als das Feld
   davor laesst es sich mit CSS nicht vergroessern, das gilt fuer jede
   Website mit `<input type="date">`. Wer ein groesseres, selbst gestaltetes
   Kalenderblatt braucht, braucht einen eigenen, mit JavaScript gebauten
   Kalender statt des nativen Feldes. */
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator {
  width: 26px;
  height: 26px;
  opacity: .8;
  cursor: pointer;
}

select:disabled { opacity: .5; cursor: not-allowed; }

/* Sichtbarer Fokus - fuer die Tastatur und fuer jeden, der auf einem hellen
   Bahnsteig auf ein dunkles Telefon sieht. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hint { margin: 0; font-size: 14px; opacity: .7; }

/* Der Hinweis bei grosser Gesellschaft. Bewusst nicht in Warnfarbe: Es ist
   keine Fehlermeldung, sondern eine Auskunft daruber, was als naechstes
   passiert. Die Linie links fuehrt das Auge hin, ohne zu erschrecken. */
.notice {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(123, 160, 91, .12);
  font-size: 15px;
}

/* Unsichtbar fuer Menschen, sichtbar fuer Roboter. */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.privacy { font-size: 13px; opacity: .7; margin: 0; }
.privacy a, .phone-hint a { color: var(--fg); }

button[type="submit"] {
  font: inherit;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  min-height: 60px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--radius);
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
}
button[type="submit"]:disabled { opacity: .5; cursor: progress; }

/* margin-top statt 0: `.message` liegt jetzt AUSSERHALB des Formulars (siehe
   Kommentar in index.html) und bekommt den Abstand zum Absenden-Knopf
   deshalb nicht mehr automatisch vom `gap` des Formulars. */
.message { margin: 16px 0 0; font-size: 15px; min-height: 1.5em; }
.message:empty { margin: 0; min-height: 0; }
.message.is-ok { color: var(--accent); }
.message.is-error { color: #E58A7A; }

.phone-hint { margin-top: 32px; font-size: 14px; opacity: .75; }

@media (max-width: 520px) {
  /* Auf dem Handy steht jede Angabe fuer sich. Zwei halbe Felder
     nebeneinander sind auf 375 Pixel schon fuer die Beschriftung zu schmal. */
  .row { grid-template-columns: 1fr; }
  .page { padding-bottom: 56px; }
  .kicker { margin-top: 28px; }
  form { gap: 20px; }
}

/* --- Personenzahl als Knopfreihe (Variante 3 "Antippen", 2026-08-10 gewaehlt,
       gebaut 2026-08-14) --------------------------------------------------- */

.party {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;   /* sonst sprengt ein fieldset das Raster auf schmalen Geraeten */
}

.party legend {
  padding: 0;
  margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
  font: inherit;
  font-size: 17px;
  /* 56 px wie jedes andere Feld im Formular - die Reihe soll nicht kleiner
     wirken als die Kaesten darueber und darunter. */
  min-width: 56px;
  min-height: 56px;
  padding: 0 12px;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}

.chip[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* Der Punkt sagt VOR dem Antippen, dass ab dieser Zahl eine Anfrage daraus
   wird - nicht erst danach als Hinweistext. */
.chip.ask::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}