/* ==========================================================================
   Verwaltung - eigenes Aussehen, getrennt vom Betrieb
   ==========================================================================

   WARUM EINE EIGENE DATEI (Andreas 08.09.2026):
   Betrieb und Verwaltung sind zwei verschiedene Werkzeuge. Am Tresen steht
   jemand unter Zeitdruck vor einem Tablet: grosse Flaechen, dicke Knoepfe,
   wenig auf einmal. In der Verwaltung sitzt der Chef in Ruhe am Rechner und
   pflegt sechzig Gerichte: da darf alles kleiner und dichter sein, sonst
   scrollt man sich zu Tode.

   Die Betriebsoberflaeche hat deshalb ihre eigene stil.css, und die beiden
   kommen sich nicht mehr ins Gehege. Genau daran ist die Speisekarte am
   07.09.2026 gescheitert - sie steckte in der Tablet-Gestaltung fest.

   Vorbild ist das werbekomplizen-CRM. Uebernommen sind Masse und Verhalten,
   nicht die Farben eins zu eins.

   Abschnitte:
     1. Werte     2. Grundlagen   3. Kopfleiste   4. Seitenleiste
     5. Inhalt    6. Bausteine    7. Schmale Bildschirme
   ========================================================================== */

/* ============================================================== 1. Werte */

:root {
  /* Flaechen */
  --v-grund:     #f4f5f7;   /* hinter allem */
  --v-karte:     #ffffff;
  --v-leiste:    #f9f9f9;   /* Seitenleiste */
  /* Dunkelgrau statt Schwarz (Andreas 08.09.2026): angenehmer als das harte
     Schwarz des CRM. Blau wurde probiert und verworfen - es hatte einen
     Schimmer, der nicht zum Rest passte. */
  --v-kopf:      #2b2e33;
  --v-linie:     #e4e6ea;

  /* Schrift. Durchweg kleiner als im Betrieb: 14 statt 16 Punkte. */
  --v-text:      #292c31;
  --v-leise:     #6e7178;
  --v-still:     #a8acb3;

  /* Bedeutung */
  --v-aktion:    #0071e3;
  --v-gut:       #248a3d;
  --v-warnung:   #b25000;
  --v-stopp:     #c9252d;

  /* Masse */
  --v-kopfhoehe: 56px;
  --v-leiste-auf: 220px;
  --v-leiste-zu:  64px;
  --v-rund:      10px;
  --v-rund-klein: 8px;
  --v-luft:      20px;
}

/* ========================================================= 2. Grundlagen */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--v-grund);
  color: var(--v-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* 14 Punkte statt 16 im Betrieb - das ist der Kern des Unterschieds. */
  font-size: 14px;
  line-height: 1.45;
  /* Verhindert das Ueberziehen der Seite ueber den Inhalt hinaus, also den
     Gummiband-Effekt beim Wischen. Sonst wirkt es wie eine Website, nicht
     wie ein Programm. Steht im Betrieb genauso. */
  overscroll-behavior: none;
}

/* overflow-x nur auf body, NICHT auf html: sonst wird der HTML-Root in Chrome
   zum Scroll-Behaelter und blockiert das senkrechte Scrollen. Safari macht das
   nicht. Im werbekomplizen-CRM am 04.08.2026 so festgestellt, im Betrieb
   seitdem ebenso. */
body { overflow-x: hidden; }

button, input, select, textarea { font-family: inherit; font-size: inherit; }
a { color: var(--v-aktion); }

/* ======================================================== 3. Kopfleiste */

.kopf {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  height: var(--v-kopfhoehe);
  display: flex;
  align-items: center;
  gap: 8px;
  /* Links weniger Rand: Der Klappknopf sitzt damit weiter aussen und liegt
     naeher an der Seitenleiste, die er bedient (Andreas 08.09.2026). */
  padding: 0 14px 0 6px;
  background: var(--v-kopf);
  color: #fff;
}

.kopf-symbol {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: #fff;
  border-radius: var(--v-rund-klein);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.kopf-symbol:hover { background: rgba(255,255,255,.10); }
.kopf-symbol svg {
  width: 19px; height: 19px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
/* Der Klappknopf zeigt seinen Zustand: Leiste offen, Flaeche dunkel. */
body:not(.leiste-zu) #leiste-schalter { background: rgba(255,255,255,.10); }

.kopf-haus  { font-size: 16.5px; font-weight: 600; white-space: nowrap; margin-left: 2px; }
.kopf-titel { font-size: 14px; color: rgba(255,255,255,.62); white-space: nowrap; }
.kopf-luecke { flex: 1; }

/* Die beiden Not-Schalter. Kleiner als im Betrieb, aber dieselbe Farblogik:
   gruen laeuft, rot gestoppt, grau unbekannt. */
.kopf-schalter { display: flex; gap: 6px; flex: 0 0 auto; }
.schalter {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--v-rund-klein);
  background: rgba(255,255,255,.08);
  border: .5px solid rgba(255,255,255,.12);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  color: rgba(255,255,255,.9);
}
.schalter:hover { background: rgba(255,255,255,.14); }

/* Grün heisst laeuft, rot heisst gestoppt. Dieselbe Farblogik wie im
   Betrieb - wer von einer Seite auf die andere wechselt, muss nicht umdenken.

   ECHTE FARBEN, NICHT DURCHSCHEINEND (Andreas 08.09.2026): Vorher lagen sie
   halbdurchsichtig auf dem dunklen Grund und wirkten dadurch stumpf -
   "das ist nicht richtig grün". Ein Not-Schalter muss man im Vorbeigehen
   erfassen, ohne hinzusehen. */
.schalter.laeuft   { background: #248a3d; border-color: #248a3d; color: #fff; }
.schalter.gestoppt { background: #c9252d; border-color: #c9252d; color: #fff; }
.schalter.laeuft:hover   { background: #1f7a35; border-color: #1f7a35; }
.schalter.gestoppt:hover { background: #b01f27; border-color: #b01f27; }

/* Solange der Zustand nicht bekannt ist, zeigt der Schalter NICHTS an -
   sonst stuende er auf gruen, obwohl der Server gestoppt haben kann. */
.schalter.unbekannt { opacity: .5; }

/* Service-Zugang: der Schalter zeigt den Zustand, laesst sich aber nicht
   umlegen (Andreas 08.09.2026). Kein Zeigefinger, keine Reaktion beim
   Ueberfahren - man sieht sofort, dass hier nichts zu holen ist. */
.schalter.gesperrt { cursor: default; }
.schalter.gesperrt:hover { background: rgba(255,255,255,.08); }
.schalter.gesperrt.laeuft:hover   { background: #248a3d; border-color: #248a3d; }
.schalter.gesperrt.gestoppt:hover { background: #c9252d; border-color: #c9252d; }

/* Datum und Uhrzeit */
.kopf-datum {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  flex: 0 0 auto;
  padding: 0 11px;
  border-radius: var(--v-rund-klein);
  background: rgba(255,255,255,.08);
  /* Kontur so hell wie bei der Suche daneben, Text weiss statt grau
     (Andreas 08.09.2026) - sonst wirkte das Datum wie abgeschaltet. */
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 12.5px;
  cursor: default;
  white-space: nowrap;
}
.kopf-datum-sep { opacity: .5; }

/* Suche */
.such-huelle { position: relative; display: inline-flex; flex: 0 1 320px; }
.kopf-suche {
  width: 100%;
  height: 34px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--v-rund-klein);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 13px;
}
.kopf-suche::placeholder { color: rgba(255,255,255,.5); }
.kopf-suche:focus {
  outline: none;
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.35);
}
/* Ein gezeichnetes Kreuz, kein Schriftzeichen: das sitzt je nach Schriftart
   anders und laesst sich nicht sauber zentrieren. */
.such-weg {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  display: none;
  width: 16px; height: 16px;
  align-items: center; justify-content: center;
  border: none; padding: 0; margin: 0;
  background: none; color: #fff; opacity: .45;
  cursor: pointer; line-height: 0;
}
.such-huelle.hat-text .such-weg { display: inline-flex; }
.such-weg:hover { opacity: .9; }
.such-weg svg {
  width: 11px; height: 11px;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none;
  pointer-events: none;
}

/* Glocke */
.kopf-glocke-huelle { position: relative; flex: 0 0 auto; }
.glocke-punkt {
  position: absolute;
  top: 7px; right: 8px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3b30;
}
.glocke-fenster {
  position: absolute;
  top: 44px; right: 0;
  width: 340px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--v-karte);
  color: var(--v-text);
  border: 1px solid var(--v-linie);
  border-radius: var(--v-rund);
  box-shadow: 0 8px 26px rgba(0,0,0,.14);
  z-index: 60;
}
.glocke-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--v-linie);
  font-weight: 600;
}
.glocke-alle {
  border: none; background: none; padding: 0;
  color: var(--v-aktion); font-size: 13px; cursor: pointer;
}
.glocke-inhalt { padding: 6px 0; }
.glocke-leer { padding: 18px 14px; color: var(--v-leise); }
.glocke-zeile {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--v-linie);
}
.glocke-zeile:last-child { border-bottom: none; }
.glocke-zeile strong { display: block; font-size: 13.5px; font-weight: 600; }
.glocke-zeile .klein { display: block; margin-top: 2px; font-size: 12.5px; color: var(--v-leise); }
/* Ungelesenes bekommt einen farbigen Streifen links. */
.glocke-zeile.neu { border-left: 3px solid var(--v-aktion); padding-left: 11px; }

/* Benutzer */
.kopf-benutzer-huelle { position: relative; flex: 0 0 auto; }
.benutzer-zeichen {
  width: 34px; height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}
.benutzer-zeichen:hover { background: rgba(255,255,255,.24); }
.benutzer-menue {
  position: absolute;
  top: 44px; right: 0;
  min-width: 190px;
  background: var(--v-karte);
  border: 1px solid var(--v-linie);
  border-radius: var(--v-rund);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 5px 0;
  z-index: 60;
}
.benutzer-menue a {
  display: block;
  padding: 9px 14px;
  color: var(--v-text);
  text-decoration: none;
  font-size: 13.5px;
}
.benutzer-menue a:hover { background: var(--v-grund); }

/* ====================================================== 4. Seitenleiste */

.huelle { padding-top: var(--v-kopfhoehe); }

.leiste {
  position: fixed;
  top: var(--v-kopfhoehe);
  left: 0;
  width: var(--v-leiste-auf);
  height: calc(100vh - var(--v-kopfhoehe));
  overflow-y: auto;
  background: var(--v-leiste);
  border-right: 1px solid var(--v-linie);
  padding: 10px 0;
  z-index: 15;
  transition: width .18s ease;
}
/* Masse wie im CRM (Andreas 08.09.2026): Vorher standen die Punkte zu eng
   untereinander - "ziemlich angeklatscht". 13 Punkte Polsterung statt 10 und
   2 Punkte Abstand zwischen den Zeilen. */
.leiste-nav { display: flex; flex-direction: column; gap: 2px; }

/* Ein Hauptpunkt */
.ln-punkt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 13px 15px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  color: var(--v-text);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .1s;
}
.ln-punkt:hover { background: #eeeeee; }

/* AUFGEKLAPPT: grau hinterlegt, mit dunklem Streifen links
   (Andreas 08.09.2026). Ohne das sieht man nur an den eingerueckten
   Unterpunkten, welcher Zweig offen ist - und beim Ueberfliegen gar nicht. */
.ln-punkt.offen {
  background: #e6e6e6;
  font-weight: 600;
  border-left-color: #292c31;
}
.ln-punkt.offen:hover { background: #e0e0e0; }

/* Die Seite, auf der man gerade steht. */
.ln-punkt.hier { border-left-color: var(--v-aktion); color: var(--v-aktion); }

.ln-symbol {
  flex: 0 0 auto;
  width: 19px; height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ln-symbol svg {
  width: 19px; height: 19px;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.ln-name  { flex: 1; }
/* Der Pfeil dreht sich beim Aufklappen. */
.ln-pfeil { flex: 0 0 auto; opacity: .45; transition: transform .16s ease; }
.ln-pfeil svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.ln-punkt.offen .ln-pfeil { transform: rotate(180deg); }

/* Die Unterpunkte. Eingerueckt, mit einer feinen Linie daneben - so sieht
   man auf einen Blick, wozu sie gehoeren. */
.ln-unter {
  display: none;
  margin: 3px 0 8px 26px;
  padding-left: 12px;
  border-left: 1px solid var(--v-linie);
}
.ln-punkt.offen + .ln-unter { display: block; }

.ln-unterpunkt {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: none;
  background: none;
  color: var(--v-leise);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  border-radius: var(--v-rund-klein);
}
.ln-unterpunkt:hover { background: rgba(0,0,0,.04); color: var(--v-text); }
.ln-unterpunkt.hier { color: var(--v-aktion); font-weight: 600; }

/* NICHTS AUSGRAUEN, SOLANGE WIR NICHT DURCH SIND (Andreas 08.09.2026):
   Die Punkte sahen alle blass aus, obwohl noch gar nicht entschieden ist,
   was davon wirklich kommt und was nicht. Erst gehen wir die Liste zusammen
   durch, danach wird ausgegraut - dann stimmt es auch.

   Die Regeln bleiben stehen, damit sie spaeter nur wieder gebraucht werden.
.ln-unterpunkt.spaeter,
.ln-punkt.spaeter { opacity: .42; cursor: default; }
.ln-unterpunkt.spaeter:hover { background: none; color: var(--v-leise); }
*/

/* ---- eingeklappt: nur Symbole, Namen als Fahne beim Ueberfahren ---- */
body.leiste-zu .leiste { width: var(--v-leiste-zu); overflow: visible; }
body.leiste-zu .leiste-nav { overflow: visible; }
body.leiste-zu .ln-name,
body.leiste-zu .ln-pfeil,
body.leiste-zu .ln-unter { display: none; }
body.leiste-zu .ln-punkt {
  justify-content: center;
  padding: 13px 0;
  position: relative;
  overflow: visible;
}
body.leiste-zu .ln-punkt:hover::after {
  content: attr(data-name);
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  background: #292c31;
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,.22);
}

/* ============================================================ 5. Inhalt */

.inhalt {
  margin-left: var(--v-leiste-auf);
  padding: var(--v-luft);
  min-height: calc(100vh - var(--v-kopfhoehe));
  transition: margin-left .18s ease;
}
body.leiste-zu .inhalt { margin-left: var(--v-leiste-zu); }

.lade { color: var(--v-leise); padding: 30px 0; }

/* ========================================================= 6. Bausteine */

/* Die Ueberschrift steht dichter am oberen Rand, ist kleiner und heller
   (Andreas 08.09.2026): Sie sagt nur, wo man ist - die Arbeit passiert in
   der Karte darunter, und die soll den Platz bekommen. */
.seiten-titel {
  margin: -6px 0 6px;
  font-size: 15.5px;
  /* Zwischen normal und fett (Andreas 08.09.2026): Fett war zu laut, normal
     zu blass - die Ueberschrift soll da sein, ohne sich vorzudraengen. */
  font-weight: 550;
  color: var(--v-leise);
}

.karte {
  background: var(--v-karte);
  border: 1px solid var(--v-linie);
  border-radius: var(--v-rund);
  margin-bottom: 16px;
}
.karte-inhalt { padding: 16px 18px; }
.karte h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; }

.knopf {
  height: 34px;
  padding: 0 14px;
  border: none;
  border-radius: var(--v-rund-klein);
  background: var(--v-aktion);
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.knopf:hover { filter: brightness(.93); }
.knopf:disabled { opacity: .5; cursor: default; }

.knopf-still {
  background: var(--v-karte);
  color: var(--v-text);
  border: 1px solid var(--v-linie);
}
.knopf-still:hover { background: var(--v-grund); filter: none; }
.knopf-gefaehrlich { color: var(--v-stopp); }

.feld { margin-bottom: 14px; }
.feld label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--v-leise);
}
.feld input, .feld select, .feld textarea {
  width: 100%;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--v-linie);
  border-radius: var(--v-rund-klein);
  background: var(--v-karte);
  color: var(--v-text);
  font-size: 13.5px;
}
.feld textarea { height: auto; padding: 9px 11px; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--v-aktion);
}
.hinweis-text { margin: 5px 0 0; font-size: 12.5px; color: var(--v-leise); }
.fehler { color: var(--v-stopp); font-size: 13px; }

/* ============================================ 6b. Bausteine der Seiten

   Alles hier ist die dichtere Fassung dessen, was im Betrieb schon steht
   (Andreas 08.09.2026). Am Tresen sind die Felder 50 Punkte hoch, damit man
   sie mit dem Daumen trifft. Hier sitzt jemand am Rechner mit der Maus und
   pflegt sechzig Zeilen - da zaehlt, wie viel auf den Bildschirm passt. */

/* Ein Tag in den Oeffnungszeiten */
.zeit-tag {
  padding: 13px 18px;
  border-bottom: 1px solid var(--v-linie);
}
.zeit-tag:last-child { border-bottom: none; }
.zeit-tagname {
  display: block;
  margin-bottom: 8px;
  font-size: 13.5px;
  font-weight: 600;
}
.zeit-spanne {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.zeit-spanne input[type=time] { flex: 0 0 118px; }
.zeit-spanne select { flex: 0 0 145px; }
.zeit-spanne input, .zeit-spanne select {
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--v-linie);
  border-radius: var(--v-rund-klein);
  background: var(--v-karte);
  color: var(--v-text);
  font-size: 13px;
  font-family: inherit;
}
.zeit-spanne span { color: var(--v-leise); font-size: 13px; }

/* Kleiner Textknopf in Listen: Entfernen, Weitere Zeile, Bearbeiten */
.listen-knopf {
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--v-linie);
  border-radius: var(--v-rund-klein);
  background: var(--v-grund);
  color: var(--v-aktion);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.listen-knopf:hover { background: var(--v-linie); }
.listen-knopf.entfernen { color: var(--v-stopp); }

/* Zwei Felder nebeneinander, wo sie zusammengehoeren: PLZ und Ort,
   Telefon und E-Mail. Untereinander sieht eine dreistellige PLZ in einem
   700 Punkte breiten Feld verloren aus. */
.feld-paar { display: flex; gap: 12px; }
.feld-paar > * { flex: 1; }
.feld-paar > .schmal { flex: 0 0 120px; }

/* Eine Zeile zum Ankreuzen mit Erklaerung darunter */
.anhaken {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 0;
  cursor: pointer;
}
.anhaken input { margin-top: 2px; flex: 0 0 auto; }
.anhaken .anhaken-text { font-size: 13.5px; }
.anhaken .hinweis-text { margin-top: 2px; }

/* Eine schlichte Liste, etwa die Tische oder die Gaeste */
.liste-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--v-linie);
  font-size: 13.5px;
}
.liste-zeile:last-child { border-bottom: none; }
.liste-zeile .waechst { flex: 1; min-width: 0; }
.liste-zeile .leise { color: var(--v-leise); font-size: 12.5px; }
.liste-leer { padding: 22px 18px; color: var(--v-leise); font-size: 13.5px; }

/* Eine Reihe Knoepfe unter einem Formular */
.knopf-reihe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* ============================================ 7. Schmale Bildschirme

   Die Verwaltung ist fuer den Rechner gedacht. Wer sie trotzdem auf dem
   Tablet oeffnet, soll nicht vor einer zerdrueckten Seite stehen: Die Leiste
   klappt dann von selbst zu. */

@media (max-width: 900px) {
  .leiste { width: var(--v-leiste-zu); overflow: visible; }
  .leiste .ln-name, .leiste .ln-pfeil, .leiste .ln-unter { display: none; }
  .leiste .ln-punkt { justify-content: center; padding: 11px 0; }
  .inhalt { margin-left: var(--v-leiste-zu); }
  .kopf-suche, .kopf-titel { display: none; }
  .such-huelle { flex: 0 0 auto; }
}