/* Gemeinsames Theme des internen Bereichs.
 *
 * Seit Scheibe 2 kommen die Markenwerte aus `core/marke.css` — derselben Quelle, aus der auch
 * `reservierung/tokens.css` liest. Diese Datei bildet sie nur noch auf die Namen ab, die die
 * internen Seiten benutzen, und ergaenzt die gemeinsamen Bedienelemente.
 *
 * WOHER DIE WERTE KOMMEN. `marke.css` — und dort stehen sie so, wie sie in der Gäste-Buchung
 * (`reservierung/static/reservierung/gast.css`) stehen. Die Buchung ist der Anker (ADR-002
 * "dunkles Poolhaus-Theme"), weil sie als einzige Oberfläche schon fertig gestaltet und auf
 * Kontrast gerechnet war.
 *
 * WARUM DIESE DATEI TROTZDEM BLEIBT. Sie ist nicht mehr die Quelle der Werte, sondern die
 * **Abbildung** auf die Namen der internen Seiten plus deren gemeinsame Bedienelemente
 * (Tabellen, Knöpfe, Fokus). `tokens.css` braucht dieselben Markenwerte, aber andere Ergänzungen —
 * beides in eine Datei zu legen hiesse, den Raumplan mit Shell-Regeln zu belasten.
 *
 * WAS BEWUSST NICHT ÜBERNOMMEN WURDE.
 * - Die **Abstandsskala**. Die Buchung hat 6/12/18/28, die internen Seiten 4/8/12/16/24/32. Die
 *   Skala trägt keine Marke, aber jedes `var(--s3)` in Dienstplan, Mitarbeiterliste und Shell
 *   hängt daran — ein Tausch verschiebt Tabellen und Formulare, ohne dass es hübscher würde.
 *   Funktion vor Optik (Auftrag).
 * - Die **Statusfarben** (`--frei`, `--belegt`, `--gesperrt`, …). Sie sind Semantik, keine Marke,
 *   und in `tokens.css` auf Lesbarkeit über hellen Tischflächen gerechnet. Nur `--reserviert`
 *   wird auf den Amber-Ton der Buchung gezogen, weil der dort dieselbe Bedeutung trägt.
 *
 * Kein Framework, kein Web-Font, kein Build (Regel 12) — plain Custom Properties, wie die Buchung.
 */

@import url("marke.29256710142f.css");

.ui-dunkel,
:root.ui-theme,
body.ui-dunkel {
  /* --- Flächen ------------------------------------------------------------------------------- */
  --flaeche-0: var(--marke-bg);
  --flaeche-1: var(--marke-karte);
  /* 🔴 Hier EINGESENKT (Eingabefeld), anders als in `tokens.css`, wo dieselbe Nummer
     'erhöht/aktiv' meint. Zwei Oberflächen, zwei Tiefenlogiken — deshalb wird dieser
     Wert bewusst nicht geteilt. */
  --flaeche-2: var(--marke-eingabe);
  --linie:     var(--marke-linie);

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

  /* --- Akzent: DER sichtbare Unterschied ------------------------------------------------------
   * Die Buchung trägt Filzgrün, die internen Seiten trugen bisher ein generisches Blau. Genau
   * hier fiel auf, dass Gast und Backoffice nicht nach demselben Haus aussehen. */
  --akzent:      var(--marke-akzent);
  --akzent-text: var(--marke-akzent-text);   /* dunkler Text AUF dem hellen Akzent */
  --akzent-weich: var(--marke-akzent-weich);  /* getönte Fläche für stille Hervorhebung */
  --auf-status:  var(--marke-akzent-text);

  /* --- Warnung: "achtung, aber kein Fehler" --------------------------------------------------- */
  --reserviert: var(--marke-warn);
  --warn-weich: #2a2318;

  /* --- Form ---------------------------------------------------------------------------------- */
  --radius: var(--marke-radius);
  --font: var(--marke-font);
  --schatten: var(--marke-schatten);
  --tap: var(--marke-tap);
}

/* --- Grundhaltung ------------------------------------------------------------------------------
 * `color-scheme: dark` sagt dem Browser Bescheid: Scrollbalken, Auswahlmenüs und die eingebauten
 * Date-/Time-Picker kommen dann dunkel. Ohne das leuchtet mitten im dunklen Dienstplan ein weißer
 * Kalender auf — genau die Stelle, an der eine Oberfläche billig aussieht. */
body.ui-dunkel {
  margin: 0;
  background: var(--flaeche-0);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

.ui-dunkel a { color: var(--akzent); }
.ui-dunkel h1 { font-size: 1.35rem; margin: 0 0 var(--s3); font-weight: 700; }
.ui-dunkel h2 { font-size: 1.05rem; margin: 0 0 var(--s2); }

/* --- Bedienelemente: eine Fassung für alle internen Seiten -------------------------------------
 * Vorher definierte jede Seite ihre eigenen Knöpfe und Felder. Hier stehen sie einmal; die Seiten
 * dürfen weiter feiner werden (dichte Tabellenzeilen brauchen kleinere Ziele als ein Formular),
 * aber Farbe, Radius und Fokus kommen von hier. */
.ui-dunkel input:not([type=checkbox]):not([type=radio]),
.ui-dunkel select,
.ui-dunkel textarea {
  font-family: inherit; font-size: 1rem;
  background: var(--flaeche-2); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius);
  padding: 0 var(--s2);
}
.ui-dunkel textarea { padding: var(--s2); line-height: 1.4; }

/* 🔴 Fokus sichtbar lassen. Ein `outline: none` ist der häufigste Weg, eine Oberfläche für
 * Tastaturbedienung unbrauchbar zu machen — hier bekommt der Fokus den Akzent, überall. */
.ui-dunkel :focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }

.ui-dunkel button,
.ui-dunkel .knopf {
  font-family: inherit;
  background: var(--flaeche-2); color: var(--text);
  border: 1px solid var(--linie); border-radius: var(--radius);
  cursor: pointer;
}
.ui-dunkel button:hover,
.ui-dunkel .knopf:hover { background: var(--flaeche-1); border-color: var(--akzent); }

/* Die eine hervorgehobene Aktion je Formular. Bewusst sparsam: wenn alles leuchtet, leuchtet
 * nichts, und auf einer Datenmaske ist die Zurückhaltung die Gestaltung. */
.ui-dunkel button.haupt {
  background: var(--akzent); color: var(--akzent-text);
  border-color: var(--akzent); font-weight: 700;
}
.ui-dunkel button.haupt:hover { background: var(--akzent); filter: brightness(1.08); }

/* --- Karten (Vorbild: .g-card der Buchung) ------------------------------------------------- */
.ui-dunkel .karte {
  background: var(--flaeche-1);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--s4);
}

/* --- Tabellen: Marke ja, Marketing nein --------------------------------------------------------
 * Ein Dienstplan ist eine Datenmaske. Deshalb keine großen Abstände und keine Hero-Behandlung,
 * sondern: ruhiger Zebrastreifen, klare Kopfzeile, und Zeilen, die man mit den Augen halten kann. */
.ui-dunkel table { border-collapse: collapse; width: 100%; }
.ui-dunkel th {
  text-align: left; font-size: .78rem; font-weight: 600;
  color: var(--text-leise); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--linie); padding: .35rem .45rem;
}
.ui-dunkel td { border-bottom: 1px solid var(--linie); padding: .4rem .45rem; vertical-align: top; }
/* Zebra über die FLÄCHE, nicht über die Textfarbe: gedämpfter Text wäre schlechter lesbar, und
 * lesbar bleiben ist hier die Vorgabe. */
.ui-dunkel tbody tr:nth-child(even) td,
.ui-dunkel table tr:nth-child(even) td { background: rgba(255, 255, 255, .022); }
.ui-dunkel tr:hover td { background: color-mix(in srgb, var(--akzent) 7%, transparent); }

/* --- Kopfleiste + Menü -------------------------------------------------------------------------- */
.ui-dunkel .kopfleiste {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  border-bottom: 1px solid var(--linie); padding-bottom: var(--s2); margin-bottom: var(--s3);
}
/* 🔴 **`flex: 1 1 100%` — die Leiste bekommt immer eine eigene Zeile** (Auftrag …-1057,
   nachgereicht 25.08.2026 nach verweigerter Abnahme).

   Der Grund ist der Fehler davor: `margin-left: auto` am Suchfeld verteilt den **freien Raum
   seines Containers**, und `nav.ort` hatte keinen — sie bemass sich an ihrem Inhalt und endete
   am letzten Menuepunkt. Das Feld klebte dort statt am Rand, und **wie weit rechts das war,
   haengt an der Rolle**: 29 Punkte bei der Leitung, 16 am Tresen — gemessen 446 px Unterschied.

   **Gewaehlt gegen `flex-grow: 1`**, das die naheliegendere Zeile waere: Damit saesse das Feld
   am rechten Rand **der Navigation**, nicht des Fensters — also mal hier, mal dort, je nachdem
   ob `.sicht` daneben passt (auf `/start/` ist sie leer, auf dem Tischplan gefuellt). Genau
   diese Wanderung war Marks Anlass: „ganz nach rechts" heisst **eine** Stelle, an der man das
   Feld immer sucht.
   **Der Preis:** `.sicht` rutscht auch dort in die naechste Zeile, wo beide nebeneinander
   gepasst haetten. Eine Zeile Hoehe gegen eine verlaessliche Position — bewusst so entschieden. */
.ui-dunkel .ort { display: flex; align-items: center; flex-wrap: wrap; flex: 1 1 100%; }
.ui-dunkel .ort a {
  min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 var(--s3);
  color: var(--text-leise); text-decoration: none; border-bottom: 2px solid transparent;
}
.ui-dunkel .ort a:hover { color: var(--text); }
/* Aktiv über ZWEI Kanäle — Farbe und Unterstrich. Farbe allein trägt nicht für jeden. */
.ui-dunkel .ort a.aktiv {
  color: var(--akzent); font-weight: 700; border-bottom-color: var(--akzent);
}
.ui-dunkel .ort .sep { color: var(--linie); user-select: none; }

/* --- Bereichs-Aufklapper (Auftrag 2026-08-12-1915) ----------------------------------------------
 * Vorher standen alle Punkte nebeneinander: live 23 Stueck in einer Zeile, mit waagerechtem
 * Rollbalken. Jetzt ein `<details>` je Bereich — Tastatur, Touch und Screenreader kommen damit
 * von Haus aus, ohne eine Zeile JavaScript.
 *
 * 🔴 KEIN `:hover`-Oeffnen. Das iPad liegt unter der Kasse; ein Menue, das sich nur beim
 * Darueberfahren oeffnet, ist dort gar keins. Der Klick auf `summary` macht beides. */
.ui-dunkel .ort-gruppe { position: relative; }
.ui-dunkel .ort-gruppe > summary {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 var(--s3); color: var(--text-leise); cursor: pointer;
  list-style: none;                       /* der Standardpfeil sitzt sonst ausserhalb der Flaeche */
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.ui-dunkel .ort-gruppe > summary::-webkit-details-marker { display: none; }
.ui-dunkel .ort-gruppe > summary::after { content: "▾"; font-size: .8em; opacity: .7; }
.ui-dunkel .ort-gruppe[open] > summary { color: var(--text); border-bottom-color: var(--linie); }
.ui-dunkel .ort-gruppe[open] > summary::after { content: "▴"; }
.ui-dunkel .ort-gruppe > summary:hover { color: var(--text); }

/* 🔴 Die Summe der Stapel am Kopf — sichtbar, OHNE den Aufklapper zu oeffnen. Ein Stapel, den man
 * nur sieht, wenn man ihn aufruft, wird zur Halde (Regel 11). */
.ui-dunkel .ort-zahl {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; height: 1.4em; padding: 0 .35em; border-radius: 999px;
  background: var(--akzent); color: var(--akzent-text, #111);
  font-size: .72rem; font-weight: 700; line-height: 1;
}

/* Die Punkte schweben ueber dem Inhalt, statt die Leiste auseinanderzuschieben — sonst springt
 * die ganze Seite, sobald jemand aufklappt. */
.ui-dunkel .ort-punkte {
  position: absolute; z-index: 40; top: 100%; left: 0; min-width: 12rem;
  display: flex; flex-direction: column;
  background: var(--flaeche-1); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); padding: .25rem;
}
.ui-dunkel .ort-punkte a { border-bottom: none; border-radius: var(--radius); }
.ui-dunkel .ort-punkte a:hover { background: var(--flaeche-2); }
.ui-dunkel .ort-punkte a.aktiv { border-bottom: none; background: var(--flaeche-2); }

@media (max-width: 40rem) {
  /* Schmal: der Aufklapper schiebt die Leiste auf, statt zu schweben — ein schwebendes Feld waere
   * auf einem Telefon breiter als der Schirm. */
  .ui-dunkel .ort-punkte { position: static; box-shadow: none; min-width: 0; }
}

/* --- Wortmarke ----------------------------------------------------------------------------------
 * Kein Bild: es gibt kein Brand-Asset im Repo, und ein Download von außen wäre eine Abhängigkeit
 * zu einer Datei, die niemand versioniert (Regel 12). Ein Schriftzug trägt die Marke genauso und
 * bleibt bei jeder Auflösung scharf. */
.ui-dunkel .marke { font-weight: 700; letter-spacing: .01em; }
.ui-dunkel .marke .akzent { color: var(--akzent); }

/* 🔴 Die Gruppe, in der man gerade steht — **markiert statt aufgeklappt** (Mark, 20.08.2026).
   Vorher stand sie offen; das sah aus wie ein Aufklapper, der nicht zugeht. Der Hinweis bleibt,
   die Leiste bleibt frei. Nicht nur Farbe: zusaetzlich fett und mit Randmarke (Skill ui-tresen —
   im Barlicht verschieben sich Farben, und Rot-Gruen-Schwaeche betrifft ~8 % der Maenner). */
.ort summary.hat-aktiv {
  font-weight: 700;
  border-left: 3px solid currentColor;
  padding-left: .4rem;
}

/* ── Menuesuche (Auftrag 2026-08-24-0045) ─────────────────────────────────────────────────────
   Farben und Abstaende aus den bestehenden Tokens — keine neuen Hex-Werte. */
/* 🔴 **Ganz nach rechts** (Auftrag …-1057, Mark). `margin-left: auto` statt einer festen
   Position: Wie viele Menuepunkte links stehen, haengt an der Rolle — ein Tresen-Konto sieht 16
   Eintraege, ein Leitungskonto 29. Ein gerechneter Abstand waere fuer eines von beiden falsch. */
.ort-suche { position: relative; margin-left: auto; }
/* 🔴 **`nav.ort` bricht um** (`flex-wrap: wrap`). Passiert das, schoebe `margin-left: auto` das
   Feld in einer eigenen Zeile ganz nach rechts — das sieht aus wie ein Fehler. Unterhalb der
   Umbruchbreite steht es deshalb wieder links am Zeilenanfang. */
@media (max-width: 900px) { .ort-suche { margin-left: 0; width: 100%; } }
.ort-suche input {
  width: 100%; min-height: var(--tap); padding: 0 var(--s2); font-size: .95rem;
  border: 1px solid var(--linie); border-radius: var(--radius);
  color: var(--text);
}
/* 🔴 **Diese Regel MUSS die allgemeine Eingabefeld-Regel schlagen — sonst ist sie tot.**
   Bis zum 25.08.2026 stand hier `background: var(--flaeche-0)`, und das Feld war trotzdem
   `--flaeche-2`: `.ui-dunkel input:not([type=checkbox]):not([type=radio])` hat Spezifitaet
   (0,3,1), weil `:not()` sein Argument mitzaehlt — `.ort-suche input` nur (0,1,1). Die Zeile
   verlor, egal wie weit unten sie stand. Eine zweite unwirksame Zeile danebenzuschreiben waere
   schlimmer als die erste gewesen.
   Deshalb hier dieselbe Bauart plus die Klasse: (0,4,1) schlaegt (0,3,1).
   🔴 `--marke-eingabe`/`--flaeche-2` bleibt unangetastet — das Token traegt **alle**
   Eingabefelder der Plattform (Mark: „nur das textfeld der suche"). */
.ui-dunkel .ort-suche input:not([type=checkbox]):not([type=radio]) {
  background: var(--flaeche-1);
}
.suche-treffer {
  position: absolute; z-index: 40; left: 0; right: 0; margin: 4px 0 0; padding: 4px;
  list-style: none; background: var(--flaeche-1); border: 1px solid var(--linie);
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
/* 🔴 48px und 8px Abstand: Das iPad liegt unter der Kasse (Skill `ui-tresen`). */
.suche-treffer li { margin-bottom: 8px; }
.suche-treffer li:last-child { margin-bottom: 0; }
.suche-treffer li > a {
  display: flex; flex-direction: column; justify-content: center; min-height: 48px;
  padding: 4px var(--s2); border-radius: var(--radius); text-decoration: none; color: var(--text);
}
.suche-treffer li.markiert > a, .suche-treffer li > a:focus-visible { background: var(--flaeche-2); }
.suche-treffer .bereich { font-size: .78rem; color: var(--text-leise); }
.suche-treffer li.leer { padding: var(--s2); color: var(--text-leise); font-size: .9rem; }

/* ── Kontext-Nav: Reservierungsseiten tragen ihre eigenen Punkte ──────────────────────────────
   Auftrag 2026-09-17-1746, Entwurf von Mark abgenommen am 17.09.2026.

   🔴 **Nur unter `.ort--kontext`.** Die Klasse setzt `core/_menue.html` ausschliesslich dort, wo
   `core.navigation.KONTEXT_NAVS` eine Deklaration hat; jede andere Seite faellt in den Zweig
   darunter und traegt keine dieser Regeln. So aendert dieser Block nichts an 60 Seiten, die
   niemand angefasst hat.

   🔴 **Die Tafel haengt an `nav.ort`, nicht am Knopf.** `.ort-gruppe` ist sonst `position:
   relative` — dann waere die Tafel so breit wie das Wort „Start". Deshalb hier der Knopf
   `position: static` und die Leiste `relative`. */
.ui-dunkel .ort--kontext { position: relative; }
.ui-dunkel .ort--kontext .ort-start { position: static; }
/* Der Ausgang aus dem Kontext sieht aus wie ein Knopf, nicht wie ein Menuepunkt (Entwurf §3). */
.ui-dunkel .ort--kontext .ort-start > summary {
  gap: .45rem; color: var(--text); font-weight: 600;
  background: var(--flaeche-2); border: 1px solid var(--linie);
  border-radius: var(--radius); border-bottom-width: 1px;
}
.ui-dunkel .ort--kontext .ort-start[open] > summary { border-bottom-color: var(--linie); }
/* Der senkrechte Trenner zwischen Ausgang und Kontext (Entwurf §2). `align-self: stretch` statt
   einer festen Hoehe: die Leiste bricht um, und ein gerechneter Strich waere dann zu lang. */
.ui-dunkel .ort--kontext .ort-trenner {
  width: 1px; align-self: stretch; min-height: var(--tap);
  background: var(--linie); margin: 0 var(--s2);
}
/* 🔴 **Aktiv ist hier GEFUELLT, nicht unterstrichen** (Entwurf §4) — auf einer Leiste aus sieben
   Punkten ist der Unterstrich zu leise. Zwei Kanaele bleiben: Flaeche UND Schriftgewicht.

   🔴 **`>` und nicht der Nachfahren-Selektor**: Die Tafel haengt IN derselben `nav.ort--kontext`,
   und ihre Punkte sollen Zeilen bleiben, keine gefuellten Reiter. Mit `.ort--kontext a.aktiv`
   haette dieselbe Regel beides getroffen, und die Gegenregel weiter unten muesste sie Eigenschaft
   fuer Eigenschaft zuruecknehmen — die Sorte Paar, bei der man beim naechsten Mal eine vergisst. */
.ui-dunkel .ort--kontext > a.aktiv {
  background: var(--akzent); color: var(--akzent-text, #111);
  border-radius: var(--radius); border-bottom-color: transparent;
}
/* Der Sprung ins Register ist nicht die naechste Ansicht derselben Sache (Entwurf §5). */
.ui-dunkel .ort--kontext > a.abgesetzt {
  margin-left: var(--s2); border: 1px solid var(--linie); border-radius: var(--radius);
  border-bottom-color: var(--linie);
}
/* Die Zaehlblase sitzt IM Punkt, hinter dem Wort (Entwurf §4). Auf gefuelltem Grund kehrt sie
   um — eine akzentfarbene Blase auf akzentfarbener Flaeche waere unsichtbar. */
.ui-dunkel .ort--kontext > a .ort-zahl { margin-left: .4rem; }
.ui-dunkel .ort--kontext > a.aktiv .ort-zahl {
  background: var(--akzent-text, #111); color: var(--akzent);
}

/* 🔴 **Eine breite Tafel, kein schmales Dropdown** (Entwurf §6): alles steht auf einmal da, in
   Spalten nach Rubrik. Keine Untermenues — ein Aufklapper im Aufklapper ist der Klick, den
   dieser Auftrag gerade abgeschafft hat.

   🔴 `max-height` + `overflow-y`: Das Tresen-Geraet laeuft mit 1080p, und die Leitung sieht
   deutlich mehr Rubriken als der Tresen. Ohne Deckel liefe die Tafel unter den Bildschirmrand,
   und die untersten Punkte waeren mit dem Finger nicht erreichbar. */
.ui-dunkel .ort-tafel {
  position: absolute; z-index: 40; top: 100%; left: 0; right: 0;
  max-height: min(70vh, 640px); overflow-y: auto;
  padding: var(--s3); background: var(--flaeche-1);
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.ui-dunkel .ort-spalten {
  display: grid; gap: var(--s3) var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
}
.ui-dunkel .ort-spalte { display: flex; flex-direction: column; }
.ui-dunkel .ort-spalte h2 {
  margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-leise);
}
.ui-dunkel .ort-hinweis { margin: 0 0 .25rem; font-size: .78rem; color: var(--text-leise); }
/* Die Punkte der Tafel sind Zeilen, keine Reiter: kein Unterstrich, volle Trefferflaeche. */
.ui-dunkel .ort-spalte a { border-bottom: none; border-radius: var(--radius); }
.ui-dunkel .ort-spalte a:hover { background: var(--flaeche-2); }
.ui-dunkel .ort-spalte a.aktiv {
  background: var(--flaeche-2); color: var(--text); border-bottom: none;
}
/* Das Suchfeld der Tafel traegt kein `margin-left: auto` — es steht oben links, nicht am Rand
   einer Zeile, die es hier nicht gibt. */
.ui-dunkel .ort-tafel .ort-suche { margin: 0 0 var(--s3); max-width: 24rem; }