/* 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.8d67ff76d46e.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);
}
.ui-dunkel .ort { display: flex; align-items: center; flex-wrap: wrap; }
.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; }

/* --- 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); }