/*
 * Bestellsystem – Gestaltung
 *
 * Leitgedanke: Bedient wird das Ganze auf einem Tablet, das quer im Ständer
 * hinter der Theke steht, oft im Stress und nicht immer mit sauberen Fingern.
 * Deshalb:
 *   - Alles Antippbare mindestens 48 Pixel hoch, mit Luft dazwischen
 *   - Nichts, was erst beim Druebergehen mit der Maus erscheint
 *   - Grosse Schrift, aus einem Meter Entfernung lesbar
 *   - Zustaende an der Farbe erkennbar, nicht erst am Text
 *   - Wenig gleichzeitig auf dem Schirm, dafuer gross
 *
 * Aufbau in Anlehnung an die Apple-Gestaltungsregeln: viel Luft, gruppierte
 * Listen, feine Trennlinien statt Rahmen um alles, Farbe nur da, wo sie etwas
 * bedeutet.
 *
 * ORDNUNG DIESER DATEI – bitte einhalten:
 *   Jeder Selektor steht GENAU EINMAL, in dem Abschnitt, zu dem er gehoert.
 *   Ausnahme sind die Ueberschreibungen ganz unten im Handy-Abschnitt.
 *   Wer etwas aendert, aendert die vorhandene Regel und haengt keine zweite an.
 *   Sonst gewinnt am Ende die untere und man sucht sich dumm und daemlich.
 *
 * NIE AUF ELEMENTNAMEN REGELN, IMMER AUF KLASSEN (Andreas 04.09.2026).
 *   "button { ... }" trifft auch alles, was technisch ein Knopf ist, aber wie
 *   eine Zeile, eine Kalenderzelle oder ein Menueeintrag aussehen soll. Genau
 *   daran ist hier dreimal etwas zerbrochen:
 *     - weisse Schrift auf hellem Grund, weil die Farbe von "button" kam
 *     - Zeilen, die beim Druecken schrumpfen, wegen "button:active"
 *     - eine Gaestezeile, die auf Knopfhoehe zusammengequetscht wurde
 *   Wer eine Groesse, Farbe oder Bewegung fuer Knoepfe setzt, zaehlt die
 *   Knopfklassen auf: .knopf, .listen-knopf, .text-knopf, .klein-knopf.
 *   Und prueft VORHER, was der Selektor sonst noch trifft.
 *
 * Abschnitte:
 *   1. Werte        2. Grundlagen       3. Anmeldung    4. Kopfzeile
 *   5. Aufklappen   6. Inhalt           7. Formulare    8. Knoepfe
 *   9. Meldungen   10. Oeffnungszeiten 11. Personal    12. Gaeste
 *  13. Speisekarte  14. Reservierungen  15. Handy
 */

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

:root {
  /* Flächen */
  --grund:       #f2f2f7;   /* Hintergrund der Arbeitsfläche */
  --karte:       #ffffff;
  --linie:       #e5e5ea;   /* feine Trennlinie innerhalb einer Karte */

  /* Schrift */
  --text:        #1c1c1e;
  --text-leise:  #6e6e73;   /* Zweitzeilen, Beschriftungen */
  --text-still:  #aeaeb2;   /* Platzhalter */

  /* Bedeutung */
  --aktion:      #0071e3;   /* Knöpfe, Auswahl, alles Antippbare */
  --aktion-tief: #0059b3;
  --gut:         #248a3d;   /* läuft, angenommen, gespeichert */
  --warnung:     #b25000;   /* wartet, gleich fällig */
  --stopp:       #c9252d;   /* gestoppt, abgelehnt */

  /* Form */
  --rund:        14px;      /* Karten */
  --rund-klein:  10px;      /* Felder und Knöpfe */
  --luft:        20px;
  --tippflaeche: 48px;      /* kleinste Höhe für alles Antippbare */
  --knopf-hoehe: 46px;      /* Höhe der Knöpfe in der KOPFZEILE. Nicht unter 44
                               setzen: darunter trifft man auf dem Tablet mit
                               fettigen Fingern daneben. */
  --knopf-inhalt: 38px;     /* Höhe JEDES Knopfes im Inhalt darunter
                               (Andreas 04.09.2026). In der Kopfzeile stehen
                               wenige, große Knöpfe; im Inhalt viele - dort
                               erschlagen große einen. Nur hier ändern. */
  --kopfhoehe:   68px;      /* Höhe der Kopfzeile, für die Aufklappfenster */

  --blass: .55;             /* Durchsichtigkeit fuer alles Deaktivierte.
                               Vorher standen dafuer sechs verschiedene Werte
                               im System, je nach Bereich. */

  --schatten: 0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.05);
}

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

* { box-sizing: border-box; }

/* Muss vor allen display-Regeln stehen: ausgeblendet heisst ausgeblendet,
   sonst gewinnt ein spaeteres display:flex gegen das hidden-Attribut. */
[hidden] { display: none !important; }

/* Platz fuer die Scrollleiste dauerhaft freihalten.
   Ohne das springt die Seite jedes Mal um deren Breite, sobald der Inhalt
   laenger wird und die Leiste erscheint - sichtbar vor allem an der Kopfzeile,
   die ueber die volle Breite geht, waehrend der Inhalt darunter mittig und
   begrenzt ist. */
html { scrollbar-gutter: stable; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
  /* 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. */
  overscroll-behavior: none;
  /* Auf dem Tablet soll ein Doppeltipp nicht zoomen, das passiert im Betrieb
     dauernd aus Versehen. */
  touch-action: manipulation;
}

/* overflow-x nur auf body, NICHT auf html: sonst wird der HTML-Root in Chrome zum
   Scroll-Container und blockiert das senkrechte Scrollen. Safari macht das nicht.
   Uebernommen aus dem werbekomplizen-CRM, dort am 04.08.2026 so festgestellt. */
body { overflow-x: hidden; }

/* Grundton dunkel, wenn beim letzten Mal die Anmeldung dran war. Gesetzt vom Schnipsel
   im Kopf der index.html, noch vor dem ersten Zeichnen. Verhindert das helle Aufblitzen,
   waehrend beim Server nachgefragt wird, ob jemand angemeldet ist. */
html.start-anmeldung, html.start-anmeldung body { background: #0c1016; }

h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 20px; }
h2 { font-size: 20px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 14px; }

/* ============================================================ 3. Anmeldung
 *
 * Aufbau uebernommen aus dem werbekomplizen-CRM (dort seit 15.07.2026).
 * Hintergrundbild liegt fest, darueber die Karte im Glas-Stil:
 *   background = dunkle, halbdurchsichtige Scheibe, das Bild schimmert durch
 *   blur       = macht den Untergrund milchig, das erzeugt den Glas-Eindruck
 *   saturate   = die durchschimmernden Farben bleiben kraeftig
 *   border     = feine helle Kante ringsum, wie eine Glaskante im Licht
 *   inset oben = Lichtreflex auf der Oberkante
 */

.anmelde-seite {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* Scrollbar lassen: klappt auf dem Tablet die Bildschirmtastatur auf,
     schrumpft der sichtbare Bereich, und die Karte waere sonst oben und
     unten abgeschnitten, ohne Moeglichkeit heranzukommen. */
  overflow-y: auto;
  background-color: #0c1016;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* Zwei Ebenen uebereinander.
     OBEN das richtige Bild: der Browser nimmt das kleinste Format, das er versteht.
     DARUNTER ein 32 Pixel breites Vorschaubild, direkt in dieser Datei eingebaut.
     Es braucht keine eigene Anfrage und ist sofort da, solange das grosse Bild laedt. */
  background-image: url(/hintergrund.jpg);
  background-image:
    image-set(
      url(/hintergrund.avif) type("image/avif"),
      url(/hintergrund.webp) type("image/webp"),
      url(/hintergrund.jpg)  type("image/jpeg")
    ),
    url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABQODxIPDRQSEBIXFRQYHjIhHhwcHj0sLiQySUBMS0dARkVQWnNiUFVtVkVGZIhlbXd7gYKBTmCNl4x9lnN+gXz/2wBDARUXFx4aHjshITt8U0ZTfHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHz/wAARCAASACADASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAQFAwb/xAAmEAACAQMEAQMFAAAAAAAAAAABAgMABBEFEiFBMSJxgRMUYdHh/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AENVlttU1PeGSI/T8M+Mt+D+6yNs9urI7l0ePcGHXv8AyoscxSXccngiug06K4vLYzM4VGBRQw4NBU0mW3ubef1qsaR7Sz+AeOuxU3UIbO4ljkgikkjjGGIYRh+egefms4Yk0qaZ7uRRDJGdiD1F29uujkjqljq7wYaJXQEecjJB+KCfCo++iGBjeOKYumMTSCIlBjwvFFFAgh3MS3JI7pmy9QZW5UEEA+KKKD//2Q==);
}

.anmelde-karte {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  padding: 34px;
  background: rgba(18, 22, 30, 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  color: #fff;
}

/* Rundes Logo ueber der Ueberschrift, Gedanke wie beim macOS-Anmeldebildschirm:
   erst das Bild, dann der Name, dann die Felder. */
.anmelde-logo {
  width: 76px;
  height: 76px;
  margin: 4px auto 16px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.26);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.anmelde-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.anmelde-karte h1 { color: #fff; margin: 0 0 24px; text-align: center; font-size: 22px; }

/* Erklaerender Satz unter der Ueberschrift, nur auf der Willkommensseite:
   Dort muss stehen, fuer welches Restaurant und welche Adresse das Passwort
   gilt - es gibt zwei Zugaenge je Haus (Andreas 05.09.2026). */
.anmelde-text {
  color: rgba(255,255,255,.82);
  margin: -14px 0 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
}
.anmelde-klein {
  color: rgba(255,255,255,.6);
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
}

.anmelde-karte input[type="email"],
.anmelde-karte input[type="password"],
.anmelde-karte input[type="text"] {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  border-radius: 8px;
  padding: 13px;
  margin-bottom: 12px;
  box-shadow: none;
}

.anmelde-karte input::placeholder { color: rgba(255, 255, 255, 0.5); }

.anmelde-karte input:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  outline: none;
  box-shadow: none;
}

/* Der Browser faerbt automatisch ausgefuellte Felder sonst gelb und zerschlaegt das Glas. */
.anmelde-karte input:-webkit-autofill,
.anmelde-karte input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px rgba(40, 44, 54, 0.92) inset;
  caret-color: #fff;
}

.anmelde-karte button { width: 100%; margin-top: 8px; background: #fff; color: #12161e; }
.anmelde-karte .fehler { color: #ff9a9a; background: none; padding: 0; margin: 0 0 14px; text-align: center; }

/* ============================================================ 4. Kopfzeile
 *
 * Alles in einer Zeile: links wo man ist, dann die beiden Handgriffe fuer den
 * Betrieb, rechts Benutzer, Verwaltung und Abmelden als Symbole.
 * Der Platz darunter bleibt komplett dem Inhalt.
 */

.kopf {
  display: flex;
  align-items: center;
  /* Derselbe Abstand wie zwischen den beiden Schaltern. Zwischen Reitern und
     Schaltern wirkt margin-left:auto, dieser Wert gilt also nur fuer die
     Luecke vor den Symbolen. */
  gap: 10px;
  height: var(--kopfhoehe);
  padding: 0 var(--luft);
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 10;
}

.reiter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.reiter::-webkit-scrollbar { display: none; }

.reiter-knopf {
  appearance: none;
  border: none;
  margin: 0;
  padding: 0 18px;
  min-height: var(--knopf-hoehe);
  border-radius: var(--rund-klein);
  /* Leichter Grund auch im Ruhezustand, sonst sieht der Knopf aus wie
     blosser Text und man erkennt nicht, dass man ihn antippen kann. */
  background: var(--grund);
  font: inherit;
  font-size: 16px;
  font-weight: 550;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
/* Eigener Zustand beim Drueberfahren. Muss sein, sonst gewinnt die
   allgemeine Knopf-Regel weiter unten und faerbt den Grund blau,
   waehrend die Schrift grau bleibt. */
.reiter-knopf:hover { background: #e5e5ea; color: var(--text); }
.reiter-knopf.aktiv { background: var(--aktion); color: #fff; }
.reiter-knopf.aktiv:hover { background: var(--aktion-tief); color: #fff; }
.reiter-knopf:active { transform: scale(.97); }

.kopf-schalter { display: flex; gap: 10px; margin-left: auto; }

/* Die ganze Flaeche ist der Schalter, es gibt keinen extra Schieber mehr.
   Gruen heisst laeuft, rot heisst gestoppt. Ein Tipp haelt an, noch einer
   gibt wieder frei. Grosse Flaeche, damit man sie im Stress trifft. */
.schalter {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 20px;
  min-height: var(--knopf-hoehe);
  border-radius: var(--rund-klein);
  background: var(--gut);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.schalter:active { transform: scale(.98); }
.schalter.ist-gestoppt { background: var(--stopp); }

/* Das Kaestchen selbst ist unsichtbar, wird aber gebraucht: Tastatur und
   Vorleseprogramme bedienen den Schalter darueber. */
.schalter input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* Sichtbare Umrandung, wenn jemand mit der TASTATUR hierher springt.
   Bewusst :focus-visible statt :focus-within: nach einem Mausklick blieb der
   Rahmen sonst stehen und sah aus wie ein Fehler. Und bewusst ein Rahmen
   innerhalb der Kachel statt eines Schattens aussen herum. */
.schalter:has(input:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.kopf-knoepfe { display: flex; gap: 8px; }

.symbol-knopf {
  position: relative;   /* Anker fuer den Zaehler auf der Glocke */
  width: var(--knopf-hoehe);
  min-height: var(--knopf-hoehe);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--text-leise);
  border-radius: var(--rund-klein);
}
.symbol-knopf:hover { background: var(--grund); color: var(--text); }
.symbol-knopf.offen { background: var(--grund); color: var(--text); }
.symbol-knopf svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================ 5. Aufklappen
 *
 * Benutzerangaben und Verwaltung. Beides klappt unter dem jeweiligen
 * Symbol auf und schliesst sich beim Klick daneben.
 */

.menue {
  /* fixed statt absolute: sonst haengt das Fenster am Seitenanfang und
     wandert beim Scrollen mit nach oben aus dem Bild. Die Kopfzeile bleibt
     stehen, also muss das Fenster darunter auch stehen bleiben. */
  position: fixed;
  top: calc(var(--kopfhoehe) - 6px);
  max-height: calc(100vh - var(--kopfhoehe) - 20px);
  overflow-y: auto;
  /* Abstand zwischen den Eintraegen, sonst kleben sie aneinander und
     man trifft auf dem Tablet leicht den falschen. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
  min-width: 230px;
  padding: 8px;
  background: var(--karte);
  border-radius: var(--rund);
  box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 16px 40px rgba(0,0,0,.14);
}
.menue-rechts { right: var(--luft); }

.menue-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0 14px;
  min-height: var(--knopf-hoehe);
  background: none;
  color: var(--text);
  font-size: 17px;
  font-weight: 500;
  border-radius: var(--rund-klein);
}
.menue-eintrag:hover { background: var(--grund); }
.menue-eintrag.aktiv { background: var(--aktion); color: #fff; }

/* Zaehler auf der Glocke. Sitzt oben rechts im Symbol und faellt auf,
   ohne dass man hinsehen muss. */
.glocke-zahl {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--stopp);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.menue-breit { min-width: 340px; }

.menue-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 14px;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 4px;
}

.mitteilung {
  padding: 12px 14px;
  border-radius: var(--rund-klein);
}
.mitteilung + .mitteilung { border-top: 1px solid var(--linie); border-radius: 0; }
.mitteilung.ungelesen { background: rgba(0,113,227,.06); }
.mitteilung strong { display: block; font-size: 16px; }
.mitteilung .klein { display: block; margin-top: 2px; }

.benutzer-block {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linie);
  margin-bottom: 4px;
}
.benutzer-block strong { display: block; font-size: 17px; margin-bottom: 2px; }

/* Trennt "Mein Konto" vom Rest: Das eine ist die eigene Person, das andere
   ist das Restaurant. */
/* Auch hier: volle Breite, also kein Schrumpfen beim Druecken. */
.menue-eintrag:active { transform: none; }

.menue-trenner {
  height: 1px;
  background: var(--linie);
  margin: 6px 0;
}

/* Hinweisleiste unter der Kopfzeile. Bleibt stehen, bis der Grund weg ist.
   Bewusst ueber die volle Breite und farbig: eine fehlende Verbindung muss
   im Betrieb sofort auffallen. */
.hinweis-leiste {
  position: sticky;
  top: 0;
  z-index: 60;   /* ueber Kopfzeile (10), Aufklappfenstern (20) und Anmeldung */
  padding: 12px var(--luft);
  font-size: 16px;
  font-weight: 550;
  text-align: center;
  color: #fff;
  background: var(--text-leise);
}
.hinweis-stopp { background: var(--stopp); }
.hinweis-warnung { background: var(--warnung); }
/* Fehlte bisher: Die Oberflaeche ruft "gut" auf, im CSS stand nichts dazu -
   "Gespeichert." lief deshalb im neutralen Grau. */
.hinweis-gut { background: var(--gut); }

/* Schliesskreuz in der Leiste */
.hinweis-leiste .zu {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-height: 32px;
  width: 32px;
  padding: 0;
  background: rgba(255,255,255,.2);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}
.hinweis-leiste .zu:hover { background: rgba(255,255,255,.32); }

/* Schalter, der gerade auf die Antwort des Servers wartet */
.schalter.wartet { opacity: .6; pointer-events: none; }

/* Ohne Verbindung laesst sich nichts umlegen. Der Schalter wuerde sonst
   einen Zustand zeigen, den der Server gar nicht hat. */
.schalter.nicht-moeglich { opacity: .45; pointer-events: none; }

/* Zustand unbekannt: weder gruen noch rot. Kommt vor, wenn der Stand noch
   nicht geladen wurde oder eine Antwort unterwegs verlorenging. Der Schalter
   darf dann NICHT bedienbar sein, sonst zeigt er etwas, das der Server
   moeglicherweise gar nicht hat. */
.schalter.unbekannt {
  background: var(--text-still);
  pointer-events: none;
}
/* Das Fragezeichen erscheint erst nach einer halben Sekunde.
   Beim Laden der Seite sind die Schalter kurz unbekannt, bis der Server
   geantwortet hat - das ist Absicht und richtig so, aber ein aufblitzendes
   Fragezeichen sieht nach Fehler aus. Der graue Hintergrund kommt weiterhin
   sofort: Er zeigt, dass der Schalter noch nicht bedienbar ist. */
.schalter.unbekannt::after {
  content: " ?";
  font-weight: 700;
  opacity: 0;
  animation: bs-erst-spaeter 0s linear 500ms forwards;
}
@keyframes bs-erst-spaeter {
  to { opacity: 1; }
}

/* Kleiner Punkt am Benutzersymbol, solange keine Verbindung besteht.
   Wie im werbekomplizen-CRM. */
.symbol-knopf.ist-offline::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--stopp);
  border: 2px solid var(--karte);
}

/* ============================================================ 6. Inhalt
 *
 * Alles Inhaltliche steckt in einer weissen Karte auf grauem Grund.
 * Das ist die Grundeinheit der ganzen Oberflaeche.
 */

main {
  padding: var(--luft);
  /* 950 Karte plus 2 mal 20 Rand. Die Zahl beschreibt die Aussenkante,
     entscheidend ist aber die sichtbare Karte darin. */
  max-width: 990px;
  margin: 0 auto;
}

.karte {
  background: var(--karte);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  margin-bottom: var(--luft);
  overflow: hidden;
}
.karte:last-child { margin-bottom: 0; }

/* Die vier Bereiche der Einstellungen sind je ein eigenes Formular
   (Andreas 05.09.2026). Damit ist die Karte darin immer das letzte Kind und
   verliert ihren Abstand nach unten - der gehoert deshalb ans Formular. */
.einstell-block { display: block; margin-bottom: var(--luft); }
.einstell-block:last-child { margin-bottom: 0; }

.karte-kopf { padding: 18px 20px 0; }
.karte-inhalt { padding: 20px; }

/* Ueberschrift einer Seite (Andreas 05.09.2026).
   Steht frei ueber der ersten Karte, nicht darin: Vorher stand auf keiner
   Seite, wo man gerade ist, und man musste es aus dem Inhalt erraten.
   Bestellungen und Reservierungen haben keine - die stehen als Reiter oben
   in der Kopfzeile und sind dort schon hervorgehoben. */
/* Logo-Zeile in den Einstellungen (Andreas 05.09.2026): links die Vorschau,
   rechts die Knöpfe. Die Vorschau hat eine feste Groesse mit Karo-Grund -
   so sieht man auch bei einem weissen Logo mit durchsichtigem Rand, wo es
   aufhoert. */
.logo-zeile { display: flex; gap: 16px; align-items: flex-start; }
.logo-bild {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  background:
    linear-gradient(45deg, #f2f2f7 25%, transparent 25%, transparent 75%, #f2f2f7 75%),
    linear-gradient(45deg, #f2f2f7 25%, #fff 25%, #fff 75%, #f2f2f7 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
  overflow: hidden;
}
.logo-bild img { max-width: 104px; max-height: 104px; display: block; }
.logo-leer { color: var(--text-still); font-size: 13px; }

.seiten-titel {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 16px 4px;
}

/* Gruppierte Liste: Trennlinien nur zwischen den Zeilen, nicht aussen herum. */
.liste {
  background: var(--karte);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  overflow: hidden;
  margin-bottom: var(--luft);
}

.liste-zeile {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linie);
  min-height: var(--tippflaeche);
}
.liste-zeile:last-child { border-bottom: none; }

.leer {
  color: var(--text-leise);
  padding: 48px 24px;
  text-align: center;
  margin: 0;
  font-size: 16px;
}

/* Zeilen mit mehreren Feldern nebeneinander.
   Der Abstand nach unten kommt von den Feldern darin. */
.zeile { display: flex; gap: 14px; align-items: flex-start; }
.zeile > div { flex: 1; }
.zeile > .schmal { flex: 0 0 130px; }

/* ============================================================ 7. Formulare */

label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-leise);
}

.feld { margin-bottom: 18px; }

/* Nur das letzte Element direkt in der Karte laesst den Abstand weg.
   Frueher stand hier .feld:last-child, das griff auch auf Felder, die in
   einer Zeile stecken, und liess die Zeilen aneinanderkleben. */
.karte-inhalt > *:last-child { margin-bottom: 0; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=url], input[type=time], input[type=search], input[type=number],
select, textarea {
  width: 100%;
  min-height: var(--tippflaeche);
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  font: inherit;
  font-size: 17px;   /* unter 16px zoomt iOS beim Antippen hinein */
  color: var(--text);
  background: var(--karte);
  appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--aktion);
  box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}

input:disabled, select:disabled, textarea:disabled {
  background: var(--grund);
  color: var(--text-leise);
  -webkit-text-fill-color: var(--text-leise);
}

input::placeholder, textarea::placeholder { color: var(--text-still); }

/* Kurzer Hinweis unter einem Feld, etwa "an diesem Tag ist geschlossen". */
.feld-hinweis {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--warnung);
}

/* Auswahlfeld, das wie ein Eingabefeld aussieht, aber ein Knopf ist: Es oeffnet
   unseren eigenen Kalender. Ohne diese Regel wuerde die allgemeine Knopfregel
   greifen und daraus einen blauen Knopf machen. */
.wahl-feld {
  width: 100%;
  min-height: var(--tippflaeche);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 17px;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}
.wahl-feld:hover { background: var(--karte); border-color: var(--text-still); }
/* Sieht aus wie ein Feld, also verhaelt es sich auch so: derselbe Rahmen beim
   Anspringen, und es schrumpft nicht beim Druecken wie ein Knopf. */
.wahl-feld:focus {
  outline: none;
  border-color: var(--aktion);
  box-shadow: 0 0 0 3px rgba(0,113,227,.15);
}
.wahl-feld:active { transform: none; }
.wahl-feld svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-leise);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

textarea { resize: vertical; min-height: 80px; }

/* Auswahlfelder bekommen einen eigenen Pfeil, sonst sehen sie auf jedem
   System anders aus. */
select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236e6e73' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* ============================================================ 8. Knöpfe */

button {
  appearance: none;
  border: none;
  min-height: var(--knopf-hoehe);
  padding: 0 24px;
  border-radius: var(--rund-klein);
  background: var(--aktion);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
/* Knöpfe im Inhalt sind kleiner als die in der Kopfzeile.
   AUSDRÜCKLICH nur die echten Knopfklassen: Vorher stand hier "alle Knöpfe im
   Inhalt", und das traf auch Elemente, die technisch Knöpfe sind, aber wie
   Zeilen oder Kalenderzellen aussehen sollen - die wurden dadurch zerquetscht.
   Wer eine neue Knopfart anlegt, trägt sie hier ein. */
main .knopf,
main .listen-knopf,
main .text-knopf {
  min-height: var(--knopf-inhalt);
  padding: 0 16px;
  font-size: 15px;
}

button:hover { background: var(--aktion-tief); }
button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: default; transform: none; }

/* Zweitrangige Handlung: sichtbar, aber nicht der Hauptweg. */
.knopf-still { background: var(--grund); color: var(--aktion); }
.knopf-still:hover { background: #e8e8ed; }

/* Etwas, das etwas wegnimmt oder sperrt. */

/* Textknopf innerhalb von Listen. Trotzdem hoch genug, um ihn auf dem
   Tablet zu treffen. */
.text-knopf {
  min-height: var(--knopf-hoehe);
  padding: 0 12px;
  background: none;
  color: var(--aktion);
  font-size: 16px;
  font-weight: 550;
}
.text-knopf:hover { background: rgba(0,113,227,.08); }

/* Knoepfe setzen sich deutlich vom Formular darueber ab und stehen linksbuendig. */
/* Knoepfe im Inhalt stehen RECHTS (Andreas 05.09.2026). Gilt ueberall, nicht
   nur in den Listenzeilen: So sitzen sie auf jeder Seite an derselben Stelle,
   egal wie lang der Text darueber ist. */
.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
  justify-content: flex-end;
}

/* Kleiner Nebenknopf, etwa im Kopf des Mitteilungsfensters. Bewusst
   niedriger als die uebrigen Knoepfe, er soll sich zurueckhalten. */
.klein-knopf {
  min-height: 32px;
  padding: 0 10px;
  background: none;
  color: var(--aktion);
  font-size: 14px;
  font-weight: 550;
}
.klein-knopf:hover { background: rgba(0,113,227,.08); }

/* ============================================================ 9. Meldungen */

.fehler, .erfolg {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-radius: var(--rund-klein);
  font-size: 16px;
}
.fehler { background: #fdeeee; color: var(--stopp); }
.erfolg { background: #e9f6ec; color: var(--gut); }

.hinweis-text { color: var(--text-leise); font-size: 14px; margin: 6px 0 0; }
.klein { font-size: 14px; color: var(--text-leise); }

/* ============================================================ 10. Öffnungszeiten */

.zeit-tag {
  padding: 16px 20px;
  border-bottom: 1px solid var(--linie);
}
.zeit-tag:last-child { border-bottom: none; }

.zeit-tagname { font-weight: 600; display: block; margin-bottom: 10px; }

.zeit-spanne {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
/* Felder und Knoepfe in einer Zeile sind gleich hoch. Vorher war das Feld
   50 Pixel hoch und der Textknopf daneben so hoch wie seine Schrift. */
.zeit-spanne input {
  width: auto;
  flex: 0 0 140px;
  height: var(--knopf-inhalt);
  min-height: var(--knopf-inhalt);
  padding: 0 12px;
  font-size: 15px;
}
.zeit-spanne span { color: var(--text-leise); font-size: 15px; }

/* ============================================================ 11. Personal */

/* Im Personal rueckt der Loeschknopf bewusst ab, damit man ihn nicht
   versehentlich statt "Passwort zuruecksetzen" trifft. */
.personal-zeile .knopf-gefaehrlich { margin-left: 18px; }

.personal-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.personal-zeile.inaktiv { opacity: var(--blass); }
.personal-zeile strong { display: block; font-size: 17px; }
.personal-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Knoepfe innerhalb einer Listenzeile. Etwas kleinere Schrift und ein
   leichter Grund, damit man sieht, dass es Knoepfe sind und nicht Text. */
.listen-knopf {
  background: var(--grund);
  /* Farbe MUSS hier stehen: Die allgemeine Knopfregel setzt weisse Schrift,
     das waere auf dem hellen Grund unsichtbar. */
  color: var(--aktion);
  font-size: 15px;
  padding: 0 14px;
}
.listen-knopf:hover { background: var(--linie); }

/* Rot fuer alles, was etwas wegnimmt.
   MUSS nach .listen-knopf stehen: Beide sind gleich stark, also gewinnt die
   spaetere. Vorher stand diese Regel darueber - "Entfernen" und "Deaktivieren"
   waren dadurch blau und sahen harmlos aus. Nur Farbe, kein Abstand. */
.knopf-gefaehrlich { color: var(--stopp); }
.knopf-gefaehrlich:hover { background: rgba(201,37,45,.08); }

/* Knopf, der gerade nachfragt. Ersetzt das Systemfenster, das im
   Vollbildmodus das ganze Geraet blockieren wuerde.
   Gilt fuer JEDE Knopfart: Vorher nur fuer .listen-knopf, dadurch blieb die
   Rueckfrage beim Loeschen einer Kategorie unsichtbar. */
.fragt-nach {
  background: var(--warnung);
  color: #fff;
}
.fragt-nach:hover { background: var(--warnung); }

/* Warnt vor ungespeicherten Aenderungen. Steht neben dem Speichern-Knopf,
   nicht irgendwo oben - dort schaut man in dem Moment hin. */
.nicht-gespeichert {
  align-self: center;
  color: var(--warnung);
  font-size: 15px;
  font-weight: 600;
}

/* Neu erzeugtes Passwort. Wird nur einmal angezeigt, deshalb hervorgehoben. */
.passwort-kasten {
  margin-top: 18px;
  padding: 18px 20px;
  background: #fff8e6;
  border: 1px solid #f0d999;
  border-radius: var(--rund-klein);
}
.passwort-kasten strong { display: block; margin-bottom: 8px; }
.passwort-kasten code {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .08em;
  margin-bottom: 8px;
  user-select: all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.passwort-kasten .klein { display: block; }

/* ============================================================ 12. Aufklappbare Listen
 *
 * Wird von der Gaesteliste UND der Speisekarte benutzt: Zugeklappt steht nur
 * der Name da, antippen zeigt die Angaben, ein Knopf macht Felder daraus.
 *
 * Die Klassen hiessen frueher gast-*, obwohl die Speisekarte sie mitbenutzt -
 * dadurch stand im CSS "gericht-zeile .gast-name", was niemand mehr verstand.
 * Jetzt neutral: aufklapp-* fuer den Aufbau, angabe-* fuer die Inhalte.
 */

.gast-zeile { padding: 0; }

.aufklapp-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 12px 20px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Beim Drueberfahren derselbe blaue Ton wie im offenen Zustand, nur schwaecher.
   Grau war zu nah am Hintergrund der Arbeitsflaeche. */
.aufklapp-kopf:hover { background: rgba(0,113,227,.04); }

/* Nicht schrumpfen beim Draufdruecken.
   Die allgemeine Knopfregel verkleinert jeden Knopf auf 98 Prozent - bei einem
   kleinen Knopf sieht das nach "gedrueckt" aus, bei einer Zeile ueber die
   volle Breite dagegen so, als wuerde sie schmaler werden. */
.aufklapp-kopf:active { transform: none; }

.aufklapp-name { flex: 1; font-size: 17px; font-weight: 600; }
.aufklapp-neben { color: var(--text-leise); font-size: 14px; white-space: nowrap; }

.aufklapp-pfeil {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--text-still);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .15s;
}
.ist-offen .aufklapp-pfeil { transform: rotate(180deg); stroke: var(--aktion); }

/* Die offene Zeile bekommt einen zarten blauen Ton, KEIN Grau: Grau ist die
   Farbe der Arbeitsflaeche ringsum, damit verschluckt sich die Zeile mit dem
   Hintergrund. Derselbe Ton wie bei einer ungelesenen Mitteilung. */
.ist-offen .aufklapp-kopf { background: rgba(0,113,227,.06); }
.ist-offen .aufklapp-name { color: var(--aktion); }

.aufklapp-inhalt {
  /* Oben deutlich Luft: Die Angaben klebten sonst direkt am farbigen Kopf. */
  padding: 20px 20px 22px;
  border-top: 1px solid var(--linie);
}

/* Gleich breite Spalten, auch fuer die PLZ. Ein schmales Feld mittendrin
   zerreisst das Raster optisch (Andreas 04.09.2026). */
.angaben-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 4px 18px;
  margin-bottom: 16px;
}

/* Angaben im Ansehen-Zustand */
.angabe { margin-bottom: 14px; }
.angabe-breit { grid-column: 1 / -1; }

.angabe-titel {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-leise);
}
.angabe-wert { font-size: 16px; line-height: 1.5; }
.angabe-wert a { color: var(--aktion); text-decoration: none; }
.angabe-wert a:hover { text-decoration: underline; }
.angabe-fehlt { color: var(--text-still); }

/* ============================================================ 13. Speisekarte
 *
 * BAUSTEIN: Modul bestellung.
 * Gleicher Aufbau wie die Gaesteliste: Zeile antippen, Angaben erscheinen.
 * Je Kategorie ein eigener Block mit Ueberschrift.
 */

.karte-kopfzeile {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.karte-kopfzeile h2 { margin: 0 0 2px; }

/* Eine Kategorie ist EINE Karte: Ueberschrift, Gerichte und Schnelleingabe
   gehoeren zusammen. Vorher stand die Ueberschrift nackt auf dem grauen Grund
   und darunter kam ein getrennter weisser Kasten - das sah aus wie zwei Dinge,
   die nichts miteinander zu tun haben. */
.kat-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border-bottom: 1px solid var(--linie);
}
.kat-titel strong { font-size: 19px; display: block; }
.kat-titel .klein { display: block; }
.kat-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }

/* Die Gerichte stehen direkt in der Karte, ohne zweiten Rahmen darum. */
/* Kein Innenabstand: Der antippbare Bereich soll die volle Breite fuellen,
   sonst sitzt beim Drueberfahren ein eingerueckter Kasten in der Zeile.
   Den Abstand bringt der Knopf darin mit. */
.kat-liste .liste-zeile { padding: 0; border-bottom: 1px solid var(--linie); }
.kat-liste .liste-zeile:last-child { border-bottom: none; }
.kat-liste .leer { padding: 26px 20px; text-align: left; font-size: 15px; }

/* Schnelleingabe: gehoert zur Karte, wird durch den Grundton abgesetzt. */
.kat-schnell {
  background: var(--grund);
  border-top: 1px solid var(--linie);
}
.kat-schnell-inhalt { padding: 20px; }

.gericht-preis {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-leise);
  white-space: nowrap;
}

/* Heute nicht verfuegbar: durchgestrichen und blass, damit man es im
   Vorbeigehen sieht. */
.gericht-zeile.ist-aus .aufklapp-name { text-decoration: line-through; }
.gericht-zeile.ist-aus { opacity: var(--blass); }

.gericht-oben { display: flex; align-items: center; }
/* Weniger Abstand links, weil die Sortierpfeile jetzt davor stehen. */
.gericht-haupt { flex: 1; min-width: 0; padding-left: 10px; }

/* Pfeile zum Umsortieren, im Fluss neben dem antippbaren Bereich - nicht
   darueber gelegt, wo sie den Preis verdeckt haben.
   Seit 05.09.2026 GANZ LINKS vor dem Namen: Rechts standen sie hinter Preis
   und Aufklapp-Pfeil, drei Dinge hintereinander, und das machte die Zeile
   unruhig. Untereinander statt nebeneinander, so brauchen sie kaum Breite. */
.gericht-sortieren {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 0 0 auto;
  padding-left: 8px;
}
.sortier-knopf {
  width: 26px;
  height: 22px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--rund-klein);
  background: none;
  cursor: pointer;
}
.sortier-knopf:hover { background: var(--grund); }
.sortier-knopf:active { transform: none; }
.sortier-knopf svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-still);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sortier-knopf:hover svg { stroke: var(--text); }

/* Extra-Zutaten */
.extra-liste { margin-bottom: 10px; }
.extra-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 16px;
}
.extra-zeile:last-child { border-bottom: none; }
.extra-zeile > span:first-child { flex: 1; }
.extra-preis { color: var(--text-leise); white-space: nowrap; }

.extra-neu {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}
.extra-neu .x-name,
.extra-neu .x-preis {
  width: auto;
  height: var(--knopf-inhalt);
  min-height: var(--knopf-inhalt);
  padding: 0 12px;
  font-size: 15px;
  flex: 0 1 110px;
}
.extra-neu .x-name { flex: 1 1 180px; }

.gericht-schalter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tippflaeche);
  margin: 4px 0 10px;
  cursor: pointer;
  font-size: 16px;
}
.gericht-schalter input {
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}

/* ============================================================ 14. Reservierungen
 *
 * BAUSTEIN: Modul reservierung.
 *
 * Die Tagesliste wird im Betrieb im Vorbeigehen gelesen. Deshalb steht die
 * Uhrzeit gross und links, alles andere ordnet sich unter. Der Zustand steckt
 * in einem farbigen Streifen am linken Rand, nicht in einem Wort - so erfasst
 * man ihn, ohne zu lesen.
 */

.tagwahl {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tagwahl-mitte {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tagwahl-mitte strong { font-size: 17px; }
/* Alle Knoepfe der Tageszeile sind gleich hoch und gleich grau. Nur das Plus
   ist farbig, weil es als einziges etwas Neues erzeugt.
   Inhalt per Flex zentriert: Ohne das haengt das Zeichen im Knopf unten rechts. */
/* Bewusst kleiner als die Symbole in der Kopfzeile (Andreas 04.09.2026):
   Die Kopfzeile gilt fuer die ganze App, diese hier nur fuer einen Tag.
   Mit 38 Pixeln bleibt genug Flaeche zum Treffen. */
.tag-knopf {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: none;
  border-radius: var(--rund-klein);
  background: var(--grund);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}
.tag-knopf:hover { background: #e8e8ed; }
.tag-knopf svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* "Heute" ist Text statt Zeichen, also breiter - aber gleich hoch. */
.tag-heute {
  width: auto;
  padding: 0 16px;
  font-size: 15px;
  font-weight: 500;
}

.tag-plus { background: var(--aktion); color: #fff; }
.tag-plus:hover { background: var(--aktion-tief); }

/* Eigene Auswahlliste. Ersetzt die des Browsers, die auf jedem System anders
   aussieht. Das urspruengliche Feld bleibt bestehen, nur unsichtbar - deshalb
   "clip" statt "display:none": Ein wirklich verstecktes Feld waere fuer
   Vorleseprogramme weg, und die Beschriftung daneben zeigte ins Leere. */
.auswahl-versteckt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.auswahl-knopf { font-weight: 400; }
.auswahl-knopf svg { transition: transform .15s; }
.auswahl-knopf.offen svg { transform: rotate(180deg); stroke: var(--aktion); }
.auswahl-knopf.offen { border-color: var(--aktion); }
.auswahl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.auswahl-pop {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  box-shadow: 0 10px 34px rgba(0,0,0,.16);
  padding: 6px;
  /* Lange Listen wie die Uhrzeiten muessen scrollen koennen, sonst reicht
     das Fenster nicht. */
  max-height: 320px;
  overflow-y: auto;
  z-index: 200;
}

.auswahl-eintrag {
  display: block;
  width: 100%;
  min-height: var(--knopf-inhalt);
  padding: 0 14px;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}
.auswahl-eintrag:hover { background: var(--grund); }
.auswahl-eintrag:active { transform: none; }
.auswahl-eintrag.gewaehlt { background: var(--aktion); color: #fff; }

/* Eigener Kalender, Aufbau uebernommen aus dem werbekomplizen-CRM.
   Zellen hier groesser: dort Maus, hier Finger. */
.kalender-pop {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rund);
  box-shadow: 0 10px 34px rgba(0,0,0,.16);
  padding: 14px;
  width: 320px;
  z-index: 200;
}
.kal-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kal-titel { font-size: 16px; font-weight: 600; }
.kal-pfeil {
  border: none;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: var(--text-leise);
  cursor: pointer;
  padding: 4px 12px;
  border-radius: var(--rund-klein);
  font-family: inherit;
}
.kal-pfeil:hover { background: var(--grund); color: var(--text); }
/* width und min-width sind hier PFLICHT: Die allgemeine Knopfregel gibt jedem
   Knopf 24 Pixel Innenabstand links und rechts. Im Gitter waechst eine Spalte
   sonst auf die Breite ihres Inhalts, und der Kalender laeuft nach rechts aus
   dem Fenster heraus. */
.kal-gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  width: 100%;
}
.kal-wochentage { margin-bottom: 6px; }
.kal-wochentag {
  text-align: center;
  font-size: 12px;
  color: var(--text-still);
  padding: 2px 0;
}
.kal-zelle {
  border: none;
  background: none;
  height: 40px;
  /* min-height MUSS mit: Die allgemeine Knopfregel setzt 46 Pixel, dagegen
     kommt "height" allein nicht an - die Zellen waren 46 statt 40 hoch. */
  min-height: 40px;
  min-width: 0;
  padding: 0;
  font-weight: 400;
  border-radius: var(--rund-klein);
  font-size: 15px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
}
.kal-zelle:hover { background: var(--grund); }
.kal-zelle.kal-leer { background: none; cursor: default; }
.kal-zelle.ist-heute { color: var(--aktion); font-weight: 700; }
.kal-zelle.ist-gewaehlt { background: var(--aktion); color: #fff; }

/* Waehrend geladen wird. Bewusst nur leicht gedimmt und ohne Drehkringel:
   Es dauert meist unter einer Zehntelsekunde, ein Kringel wuerde dabei nur
   aufblitzen und unruhig wirken. */
.liste.laedt { opacity: .5; transition: opacity .12s; }

/* Das Formular enthaelt eine Karte, die als letztes Kind ihren Aussenabstand
   verliert. Ohne diese Zeile klebt die Liste darunter am Formular. */
#reservierung-form { display: block; margin-bottom: var(--luft); }

/* Eine Reservierung in der Tagesliste */
.res-zeile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-left: 4px solid var(--linie);
  /* Bezugspunkt fuer die drei Punkte oben rechts. */
  position: relative;
}
.res-zeit {
  flex: 0 0 62px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
}
.res-dauer {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-leise);
}
.res-mitte { flex: 1; min-width: 0; }
.res-name { font-size: 17px; font-weight: 600; }
.res-angaben {
  color: var(--text-leise);
  font-size: 14px;
  margin-top: 3px;
}
.res-wunsch {
  margin-top: 8px;
  font-size: 14px;
  background: var(--grund);
  border-radius: var(--rund-klein);
  padding: 8px 12px;
}
/* Knoepfe im Inhalt stehen rechts (Andreas 05.09.2026) - so sitzen sie
   ueberall an derselben Stelle, egal wie lang der Text darueber ist. */
.res-knoepfe {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Der eine Knopf, der am Abend ansteht: heller Grund mit Rahmen,
   zurueckhaltende Schrift. Man drueckt ihn oft, er soll das Bild aber nicht
   beherrschen. Die Trennung in zwei Gruppen ist am 05.09.2026 entfallen -
   alles Seltene liegt jetzt hinter den drei Punkten. */
.res-knoepfe > .listen-knopf {
  background: var(--karte);
  border: 1px solid var(--linie);
  color: var(--text-leise);
}
.res-knoepfe > .listen-knopf:hover { background: var(--grund); color: var(--text); }

/* Drei Punkte oben rechts in der Zeile, auf Hoehe des Namens
   (Andreas 05.09.2026). Dahinter liegt, was man selten braucht - aendern,
   ablehnen, nicht erschienen. Unten in der Knopfreihe fielen sie nicht auf. */
.punkte-knopf {
  position: absolute;
  top: 10px;
  right: 14px;
  width: var(--knopf-inhalt);
  height: var(--knopf-inhalt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--rund-klein);
  color: var(--text-leise);
  cursor: pointer;
}
.punkte-knopf:hover { background: var(--grund); color: var(--text); }
.punkte-knopf svg { width: 22px; height: 22px; fill: currentColor; }

/* Das aufgeklappte Menue einer Zeile. Erbt Aussehen von .menue, sitzt aber
   nicht unter der Kopfzeile, sondern dort, wo die Punkte stehen - deshalb
   werden top und right hier zurueckgenommen. */
.zeilen-menue {
  top: auto;
  right: auto;
  min-width: 190px;
  max-height: none;
}
.zeilen-menue .menue-eintrag { min-height: var(--knopf-inhalt); font-size: 15px; }
.zeilen-menue .knopf-gefaehrlich { color: var(--stopp); }

/* Ein erklaerender Satz unter einer Karten-Ueberschrift. */
.karte-text {
  margin: -6px 0 0;
  font-size: 14px;
  color: var(--text-leise);
}


/* Zustand am linken Rand. Reihenfolge der Regeln = Reihenfolge im Alltag. */
.res-zeile.ist-neu        { border-left-color: var(--warnung); background: #fffdf7; }
.res-zeile.ist-angenommen { border-left-color: var(--gut); }
.res-zeile.ist-sitzt      { border-left-color: var(--aktion); }
.res-zeile.ist-abgereist  { border-left-color: var(--linie); opacity: var(--blass); }
.res-zeile.ist-weg        { border-left-color: var(--stopp); opacity: var(--blass); }
.res-zeile.ist-weg .res-name { text-decoration: line-through; }

.res-marke {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--grund);
  color: var(--text-leise);
  margin-left: 8px;
  vertical-align: 2px;
}
.res-marke.neu     { background: #fdf3e0; color: #8a5a10; }
.res-marke.weg     { background: #fdeeee; color: var(--stopp); }
.res-marke.sitzt   { background: #eaf2ff; color: var(--aktion); }

/* Der Kalender-Knopf in der Kopfzeile faellt bewusst aus der Reihe der
   uebrigen Symbole: Er fuehrt zu einem ganzen Arbeitsbereich, die anderen
   oeffnen nur ein kleines Fenster. Grau als Flaeche, blau wenn man drin ist. */
#monat-knopf {
  background: rgba(0,113,227,.10);
  border-radius: var(--rund-klein);
}
#monat-knopf svg { stroke: var(--aktion); }
#monat-knopf:hover { background: rgba(0,113,227,.18); }
#monat-knopf.aktiv { background: var(--aktion); }
#monat-knopf.aktiv svg { stroke: #fff; }

/* Speisekarte genauso hervorgehoben wie der Kalender: Beide fuehren in einen
   eigenen Arbeitsbereich, die anderen Symbole oeffnen nur ein Fenster. */
#karte-knopf {
  background: rgba(0,113,227,.10);
  border-radius: var(--rund-klein);
}
#karte-knopf svg { stroke: var(--aktion); }
#karte-knopf:hover { background: rgba(0,113,227,.18); }
#karte-knopf.aktiv { background: var(--aktion); }
#karte-knopf.aktiv svg { stroke: #fff; }

/* Monatsuebersicht.
   Gleiche Bauart wie der kleine Kalender, nur groesser und mit Inhalt in den
   Zellen. Bewusst selbst gebaut statt einer fremden Kalender-Bibliothek: Die
   waere gross, saehe anders aus als der Rest und muesste laufend nachgezogen
   werden. */
.monat-wochentage {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
.monat-wochentage span {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-leise);
}
.monat-gitter {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.monat-tag {
  min-height: 92px;
  /* Ist ein Knopf, soll aber wie eine Kachel aussehen: Die Vorgaben der
     allgemeinen Knopfregel werden hier bewusst zurueckgenommen. */
  font: inherit;
  font-size: 15px;
  padding: 8px;
  border: 1px solid var(--linie);
  border-radius: var(--rund-klein);
  background: var(--karte);
  text-align: left;
  font: inherit;
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
}
.monat-tag:hover { background: var(--grund); }
.monat-tag:active { transform: none; }
.monat-tag.ist-leer { background: transparent; border-color: transparent; cursor: default; }
.monat-tag.ist-heute { border-color: var(--aktion); }
.monat-tag.ist-vergangen { opacity: var(--blass); }

.monat-zahl { font-size: 15px; font-weight: 600; }
.monat-tag.ist-heute .monat-zahl { color: var(--aktion); }

/* Inhalt einer Monatszelle: nur Zahlen, keine Namen. */
.monat-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

.monat-punkt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warnung);
  flex: 0 0 auto;
}

.monat-frei {
  display: block;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-leise);
}

/* Tischverwaltung */
.tisch-zeile { display: flex; gap: 14px; align-items: center; }
.tisch-zeile strong { font-size: 17px; }
.tisch-zeile .tisch-angaben { flex: 1; color: var(--text-leise); font-size: 14px; }
.tisch-zeile.ist-aus { opacity: var(--blass); }

/* ============================================================ 15. Handy
 *
 * Unter 700 Pixel passt nicht alles nebeneinander. Die Schalter rutschen in
 * eine zweite Zeile, die Navigation bleibt oben. Der untere Rand bleibt frei,
 * dort wird spaeter Platz fuer Wichtigeres gebraucht.
 *
 * Nur hier duerfen Regeln von oben ueberschrieben werden.
 */

@media (max-width: 700px) {
  :root {
    --luft: 16px;
  }

  /* Die Kopfzeile darf hier hoeher werden, deshalb wird ihre Hoehe frei.
     Die Aufklappfenster bekommen eine eigene Grenze: mit "auto" waere die
     Rechnung calc(100vh - auto) ungueltig und die Grenze fiele ersatzlos weg.
     Beide Regeln standen hier zweimal, mit denselben Angaben. */
  .kopf {
    flex-wrap: wrap;
    gap: 10px;
    height: auto;
    padding: 10px var(--luft);
  }
  .menue { max-height: 70vh; top: auto; }

  .kopf-schalter { order: 3; width: 100%; margin-left: 0; }
  .schalter { flex: 1; justify-content: center; font-size: 15px; padding: 0 12px; }
  .kopf-knoepfe { margin-left: auto; }

  .zeile { flex-direction: column; gap: 0; }
  .zeile > .schmal { flex: 1; }
  .personal-knoepfe { width: 100%; }
}