/*
 * Gemeinsames Grundgeruest fuer alle Bedienoberflaechen.
 *
 * Vorgaben aus dem Fachkonzept, nicht Geschmack:
 *   N-101/N-103 grosse, eindeutige Elemente, wenige Schritte
 *   N-102       Bedienelemente mindestens 60x60 Bildpunkte, auch mit Handschuh treffbar
 *   N-104       hoher Kontrast, keine feinen Grautoene, bei Sonneneinstrahlung lesbar
 *   F-806       keine externen Schriften, Icons oder Ressourcen aus dem Internet
 *
 * Innerhalb dieser Vorgaben bewusst mit Tiefe (Schatten), Rundungen und
 * Farbakzenten gearbeitet -- "gut bedienbar" und "gut aussehend" schliessen
 * sich nicht aus.
 */

:root {
  color-scheme: light dark;
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /*
   * Neutralgraustufen leicht blaustichig, damit sie zum Markenblau passen --
   * die vorherigen Toene waren gruenstichig und wirkten neben dem Logo
   * schmutzig.
   */
  --farbe-text: #16202b;
  --farbe-text-dezent: #5b6b7c;
  --farbe-hintergrund: #ffffff;
  --farbe-flaeche: #f2f5f9;
  --farbe-flaeche-erhoben: #ffffff;
  --farbe-flaeche-gedrueckt: #e8edf4;
  /* Kaum vom Hintergrund abgesetzt -- fuer Karten, die sich nur ganz leise
     abheben sollen (z. B. Betriebsart-Auswahl), nicht so deutlich wie
     --farbe-flaeche-erhoben. */
  --farbe-flaeche-leise: #fbfcfe;

  /*
   * Bewusst KEIN dunkler Rahmen mehr. Der frueher 2px starke, fast schwarze
   * Rand um jede Taste war der Hauptgrund, warum die Oberflaeche wie eine
   * Anwendung aus den Neunzigern wirkte. Tiefe kommt jetzt aus Flaeche und
   * Schatten, die Kontur ist nur noch eine Haarlinie. N-104 (hoher Kontrast)
   * bleibt gewahrt: Text- und Fuellfarben sind unveraendert kraeftig, nur die
   * Umrandung ist zurueckgenommen.
   */
  --farbe-rand: #cbd5e1;
  --farbe-rand-dezent: #dfe6ee;

  --farbe-primaer: #0069b4;
  --farbe-primaer-dunkel: #004b81;
  --farbe-primaer-flaeche: #e0edf6;
  --farbe-primaer-text: #ffffff;

  --farbe-gefahr: #8a1414;
  --farbe-gefahr-flaeche: #fbe3e3;
  --farbe-warnung: #8a5a00;
  --farbe-warnung-flaeche: #fbedd2;
  --farbe-erfolg: #157347;
  --farbe-erfolg-flaeche: #e2f3ea;

  --radius: 1rem;
  --radius-klein: .6rem;

  /* Weiche, breit gestreute Schatten statt harter Kanten -- so wirken
     Flaechen erhoben statt aufgemalt. */
  --schatten-klein: 0 1px 2px rgba(22, 32, 43, .05), 0 1px 3px rgba(22, 32, 43, .06);
  --schatten: 0 2px 4px rgba(22, 32, 43, .05), 0 4px 12px rgba(22, 32, 43, .08);
  --schatten-erhoben: 0 8px 16px rgba(22, 32, 43, .1), 0 16px 40px rgba(22, 32, 43, .14);
  --fokusring: 0 0 0 3px rgba(0, 105, 180, .35);

  --mindestgroesse: 64px;
}

/*
 * Dark Mode (Rueckmeldung: "kannst du noch bitte einen Dark Mode einbauen
 * ... ueberall optional"). Drei Zustaende statt zwei: "System" (keine
 * Markierung an <html>, folgt praefers-color-scheme), sowie eine explizite
 * Wahl ueber data-theme="light"/"dark" auf <html> (siehe Umschalter in
 * layout/basis.php), die die Systemeinstellung gezielt uebersteuert -- in
 * beide Richtungen, deshalb zwei separate Bloecke statt eines einzigen
 * "dunkel oder nicht".
 *
 * Fast durchgehend reines Neudefinieren derselben Tokens aus :root oben --
 * der Rest der Datei verwendet fast ueberall diese Variablen statt fester
 * Farbwerte und passt sich dadurch von selbst an. Wo doch feste Werte
 * vorkamen (Knopf-Hover/-Aktiv/-Deaktiviert-Zustaende, Tabellenfarben),
 * wurden sie vorher auf color-mix()/dieselben Tokens umgestellt statt hier
 * ein zweites Mal von Hand nachgepflegt zu werden.
 *
 * --admin-dunkel/--admin-dunkel-weich (die Seitenleiste der Verwaltung)
 * bleiben unveraendert -- die Leiste ist unabhaengig vom Dark Mode bereits
 * dunkel gezeichnet (siehe body.bereich-verwaltung weiter unten).
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --farbe-text: #e7edf4;
    --farbe-text-dezent: #9db0c4;
    --farbe-hintergrund: #10171f;
    --farbe-flaeche: #182430;
    --farbe-flaeche-erhoben: #1e2b39;
    --farbe-flaeche-gedrueckt: #283847;
    --farbe-flaeche-leise: #1a2733;

    --farbe-rand: #3c4f61;
    --farbe-rand-dezent: #2a3948;

    --farbe-primaer: #4da6e0;
    --farbe-primaer-dunkel: #8fcdf2;
    --farbe-primaer-flaeche: #16324a;
    --farbe-primaer-text: #06131f;

    --farbe-gefahr: #ff9c92;
    --farbe-gefahr-flaeche: #3d1a1a;
    --farbe-warnung: #ffd27a;
    --farbe-warnung-flaeche: #3c2e0e;
    --farbe-erfolg: #79dba3;
    --farbe-erfolg-flaeche: #12351f;

    --fokusring: 0 0 0 3px rgba(77, 166, 224, .45);
  }

  :root:not([data-theme="light"]) body.bereich-verwaltung { --admin-flaeche: #0c141c; }
}

:root[data-theme="dark"] {
  color-scheme: dark;
    --farbe-text: #e7edf4;
    --farbe-text-dezent: #9db0c4;
    --farbe-hintergrund: #10171f;
    --farbe-flaeche: #182430;
    --farbe-flaeche-erhoben: #1e2b39;
    --farbe-flaeche-gedrueckt: #283847;
    --farbe-flaeche-leise: #1a2733;

    --farbe-rand: #3c4f61;
    --farbe-rand-dezent: #2a3948;

    --farbe-primaer: #4da6e0;
    --farbe-primaer-dunkel: #8fcdf2;
    --farbe-primaer-flaeche: #16324a;
    --farbe-primaer-text: #06131f;

    --farbe-gefahr: #ff9c92;
    --farbe-gefahr-flaeche: #3d1a1a;
    --farbe-warnung: #ffd27a;
    --farbe-warnung-flaeche: #3c2e0e;
    --farbe-erfolg: #79dba3;
    --farbe-erfolg-flaeche: #12351f;

    --fokusring: 0 0 0 3px rgba(77, 166, 224, .45);
}

:root[data-theme="dark"] body.bereich-verwaltung { --admin-flaeche: #0c141c; }

:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

/* Nur fuer Screenreader sichtbar (Beschriftungen, die optisch aus dem
   Zusammenhang hervorgehen, aber vorgelesen werden muessen). */
.sr-nur {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body {
  margin: 0;
  padding: 1.5rem;
  font-family: var(--schrift);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  -webkit-font-smoothing: antialiased;
}

main { max-width: 1100px; margin: 0 auto; }

.marken-kopf {
  max-width: 1100px;
  margin: 0 auto 1.25rem;
  padding-bottom: .85rem;
  border-bottom: 1px solid var(--farbe-rand-dezent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.marken-kopf img { display: block; height: 34px; width: auto; }

/*
 * Design-Umschalter (Dark Mode, Rueckmeldung: "ueberall optional"): auf
 * Verwaltungsseiten in der Kopfzeile neben dem Benutzerbereich, ueberall
 * sonst (Kasse, Anmeldung, Kundenanzeige) hier neben dem Logo -- so ist er
 * unabhaengig vom Bereich immer an derselben Art Stelle erreichbar.
 * Genau ein Icon sichtbar: welches, folgt demselben Dreizustandsmuster wie
 * die Farb-Tokens weiter oben (System/hell/dunkel).
 */
.theme-umschalter { flex-shrink: 0; }
.theme-umschalter .symbol-sonne { display: none; }
.theme-umschalter .symbol-mond { display: flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-umschalter .symbol-sonne { display: flex; }
  :root:not([data-theme="light"]) .theme-umschalter .symbol-mond { display: none; }
}
:root[data-theme="dark"] .theme-umschalter .symbol-sonne { display: flex; }
:root[data-theme="dark"] .theme-umschalter .symbol-mond { display: none; }

body.bereich-verwaltung .marken-kopf { max-width: 1280px; margin-bottom: 1rem; padding-bottom: .6rem; }
body.bereich-verwaltung .marken-kopf img { height: 26px; }

h1 {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 1.25rem;
  color: var(--farbe-primaer-dunkel);
}

h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.75rem 0 .75rem;
}

h3 { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .5rem; }

a { color: var(--farbe-primaer); text-decoration: none; }
a:hover { text-decoration: underline; }

.hinweis { color: var(--farbe-text-dezent); }
.beleg-anbieter { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--farbe-rand-dezent); font-size: .8rem; line-height: 1.5; }

.fehlermeldung,
.warnmeldung,
.erfolgsmeldung {
  border-radius: var(--radius-klein);
  padding: .85rem 1.1rem;
  font-weight: 600;
  margin: 1rem 0;
  box-shadow: var(--schatten-klein);
}

.fehlermeldung {
  background: var(--farbe-gefahr-flaeche);
  color: var(--farbe-gefahr);
  border: 1px solid color-mix(in srgb, var(--farbe-gefahr) 35%, transparent);
}

.warnmeldung {
  background: var(--farbe-warnung-flaeche);
  color: var(--farbe-warnung);
  border: 1px solid color-mix(in srgb, var(--farbe-warnung) 35%, transparent);
}

.erfolgsmeldung {
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
  border: 1px solid color-mix(in srgb, var(--farbe-erfolg) 30%, transparent);
  display: inline-block;
}

table {
  border-collapse: collapse;
  margin: 1rem 0;
  width: 100%;
  background: var(--farbe-flaeche-erhoben);
  border-radius: var(--radius-klein);
  overflow: hidden;
  box-shadow: var(--schatten-klein);
}
/* Wie bei .abschnitt: waehrend ein Popover in einer Zelle offen ist, darf
   die Tabelle selbst nicht mehr an ihrer eigenen Kantenrundung abschneiden. */
table:has(.zeilen-aufklapp[open]) { overflow: visible; }

th, td { text-align: left; padding: .65rem 1rem; border-bottom: 1px solid var(--farbe-rand-dezent); }

/* Sortierbare Spaltenkoepfe (data-sortierbar, siehe verwaltung.js). */
.spalte-sortierbar { cursor: pointer; user-select: none; white-space: nowrap; }
.spalte-sortierbar:hover { color: var(--farbe-primaer); }
.spalte-sortierbar::after { content: "\21C5"; margin-left: .35rem; opacity: .35; font-size: .85em; }
.spalte-sortierbar.sortiert-auf::after { content: "\2191"; opacity: 1; color: var(--farbe-primaer); }
.spalte-sortierbar.sortiert-ab::after { content: "\2193"; opacity: 1; color: var(--farbe-primaer); }
th { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--farbe-text-dezent); background: var(--farbe-flaeche); }
tr:last-child td { border-bottom: none; }

/* Taste: der Grundbaustein jeder Bedienoberflaeche. */
.taste {
  min-width: var(--mindestgroesse);
  min-height: var(--mindestgroesse);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: 1.3rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--farbe-text);
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: .6rem 1.2rem;
  cursor: pointer;
  box-shadow: var(--schatten-klein);
  -webkit-tap-highlight-color: transparent;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease;
}

.taste:hover { box-shadow: var(--schatten); border-color: color-mix(in srgb, var(--farbe-rand) 60%, var(--farbe-text) 40%); }

/* Sichtbares Eindruecken: auf einem Tablet ohne Mauszeiger ist das die
   einzige Rueckmeldung, dass der Tipper angekommen ist. */
.taste:active {
  transform: scale(.97);
  background: var(--farbe-flaeche-gedrueckt);
  box-shadow: none;
}

.taste:focus-visible { outline: none; box-shadow: var(--fokusring); }

.taste svg { width: 1.4em; height: 1.4em; flex-shrink: 0; }

.taste-bestaetigen {
  background: var(--farbe-primaer);
  color: var(--farbe-primaer-text);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(0, 75, 129, .2), 0 2px 8px rgba(0, 105, 180, .25);
}
.taste-bestaetigen:hover { background: color-mix(in srgb, var(--farbe-primaer) 88%, white 12%); border-color: transparent; }
.taste-bestaetigen:active { background: var(--farbe-primaer-dunkel); }

.taste-loeschen {
  background: var(--farbe-gefahr-flaeche);
  color: var(--farbe-gefahr);
  border-color: color-mix(in srgb, var(--farbe-gefahr) 30%, transparent);
}
.taste-loeschen:active { background: color-mix(in srgb, var(--farbe-gefahr-flaeche) 75%, var(--farbe-gefahr) 25%); }

.taste:disabled {
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-dezent);
  border-color: var(--farbe-rand-dezent);
}
.taste-bestaetigen:disabled {
  background: color-mix(in srgb, var(--farbe-primaer) 35%, var(--farbe-flaeche) 65%);
  color: color-mix(in srgb, var(--farbe-primaer-text) 70%, var(--farbe-flaeche) 30%);
}

/* Anmeldung */
.anmeldung {
  max-width: 420px;
  margin: 1.5rem auto;
  text-align: center;
  background: var(--farbe-flaeche-erhoben);
  border-radius: var(--radius);
  box-shadow: var(--schatten-erhoben);
  padding: 2rem 2rem 2.25rem;
}

/*
 * Anmeldung, Storno-Suche und die Fehlerseiten (alle nutzen .anmeldung) sind
 * bei jedem Aufruf gleich kurz und fuer jede Rolle identisch -- anders als
 * z. B. die Startseite, deren Kachelanzahl je nach Rolle variiert. Deshalb
 * hier zentrieren (wirkt sonst auf hohen Tablet-Bildschirmen oben
 * angeklebt), dort bewusst nicht: eine Kachelliste, die je nach Rolle mal
 * oben startet und mal mittig schwebt, waere weniger wiedererkennbar als
 * durchgehend obenbuendiger Inhalt. :has()-Fallback: aeltere Browser zeigen
 * einfach die bisherige obenbuendige Anordnung, kein Clipping-Risiko.
 */
body:has(main.anmeldung) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body:has(main.anmeldung) main.anmeldung {
  margin-top: auto;
  margin-bottom: auto;
}

.leerzustand {
  text-align: center;
  color: var(--farbe-text-dezent);
  padding: 3.5rem 1rem;
  font-size: 1.2rem;
}

.code-anzeige {
  font-size: 2.2rem;
  letter-spacing: .5rem;
  min-height: 3rem;
  margin: 1.25rem 0;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
}

/* Langer Setup-Code (Node-Verwaltung, Synchronisation-Seite): anders als
   .code-anzeige kein kurzer, grosser Zahlencode zum Ablesen, sondern ein
   langer Text zum Markieren/Kopieren. */
.setup-code-feld {
  width: 100%;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .85rem;
  word-break: break-all;
  background: var(--farbe-flaeche);
}

.tastenfeld {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
}

.tastenfeld .taste {
  width: 100%;
  aspect-ratio: 1 / 1;
  font-size: 1.7rem;
  border-radius: 50%;
}

.tastenfeld .taste-loeschen,
.tastenfeld .taste-bestaetigen { border-radius: 50%; }

/* Kachellisten (Verkaufsstellenauswahl u. ae.) */
.kachel-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.kachel {
  width: 100%;
  min-height: 120px;
  font-size: 1.4rem;
}

/* Formulare der Stammdaten- und Benutzerverwaltung */
.formular-feld {
  display: block;
  margin: 0 0 1rem;
  max-width: 480px;
}
/* [hidden] hat dieselbe Spezifitaet wie .formular-feld -- ohne diese Regel
   gewinnt display: block oben, und ein per JS ausgeblendetes Feld (z. B.
   Verkaufsstelle/Event je nach gewaehlter Rolle) bleibt sichtbar. */
.formular-feld[hidden] { display: none; }

.formular-feld label {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--farbe-text-dezent);
  margin-bottom: .3rem;
}

.formular-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.formular-zeile .formular-feld { flex: 1 1 160px; margin-bottom: 1rem; }

input[type="text"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  min-height: var(--mindestgroesse);
  font-size: 1.1rem;
  font-family: inherit;
  padding: .5rem .9rem;
  border: 2px solid var(--farbe-rand-dezent);
  border-radius: var(--radius-klein);
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  transition: border-color .12s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--farbe-primaer);
  box-shadow: var(--fokusring);
}

textarea { min-height: 5rem; }

input[type="checkbox"] {
  width: 1.6rem;
  height: 1.6rem;
  vertical-align: middle;
  margin-right: .5rem;
  accent-color: var(--farbe-primaer);
}

.karte {
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  margin: 1rem 0;
  box-shadow: var(--schatten-klein);
}

.karte.hervorgehoben { border-color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche); }

.karten-liste { display: grid; gap: 1rem; }

.zurueck { display: inline-block; margin-bottom: 1.25rem; font-weight: 600; }

.tabelle-aktionen form { display: inline; }

/* Kasse */
.kasse-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 900px) {
  /*
   * minmax(0, 1fr) statt nur 1fr: eine Grid-Spur ist wie ein Flex-Item
   * standardmaessig "min-width: auto" -- sie darf durch breiten Inhalt
   * (hier die auf < 600px absichtlich ueberbreite, seitlich scrollende
   * .kategorie-reiter) ueber die Fensterbreite hinauswachsen. Dann scrollt
   * die ganze Seite statt nur der Kategorien-Leiste, und aus dem
   * zweispaltigen Artikelraster wird eine einzige, zu breite Spalte
   * (Rueckmeldung: "die Spalten sind einfach viel breiter geworden, nicht
   * durch Scrollen"). Gleiches Muster wie .admin-huelle weiter unten.
   */
  .kasse-layout { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Kassenkopf: Statuszeile ueber dem Artikelraster. Im Normalfall so schmal
 * wie moeglich -- der Platz gehoert den Artikeln, die bei jeder Bestellung
 * getroffen werden muessen.
 */
.kassen-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

.verbindung-banner {
  padding: .3rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  box-shadow: none;
}

.verbindung-banner.verbunden {
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
}

/* Bei Stoerung dagegen unuebersehbar: die Kasse darf dann nicht weiterverkaufen,
   sondern muss aufs Papierverfahren wechseln. */
.verbindung-banner.getrennt {
  flex: 1 1 100%;
  order: -1;
  background: var(--farbe-gefahr-flaeche);
  color: var(--farbe-gefahr);
  border: 2px solid var(--farbe-gefahr);
  border-radius: var(--radius-klein);
  padding: .75rem 1rem;
  font-size: 1.1rem;
  text-align: center;
  box-shadow: var(--schatten-klein);
}

.kategorie-reiter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.kategorie-reiter .taste {
  min-height: 52px;
  border-radius: 999px;
  padding: .5rem 1.25rem;
  font-size: 1.05rem;
  border-width: 2px;
}
.kategorie-reiter .taste.aktiv { background: var(--farbe-primaer); color: var(--farbe-primaer-text); border-color: var(--farbe-primaer-dunkel); }

/*
 * Kleiner Farbpunkt statt vollflaechig eingefaerbtem Reiter: eine Kategorie
 * mit rot oder blau hinterlegter kategorie.farbe wuerde sonst wie ein
 * Gefahren- bzw. Aktiv-Zustand der Kasse selbst aussehen (gleiche Farbfamilie
 * wie taste-loeschen/taste-bestaetigen). Der Punkt grenzt klar ab: Farbe
 * bedeutet hier "Kategorie", nicht "Status".
 */
.kategorie-punkt {
  display: inline-block;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.kategorie-reiter .taste.aktiv .kategorie-punkt { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 1px; }

.artikel-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .85rem;
}

.artikel-kachel {
  position: relative;
  min-height: 96px;
  font-size: 1.15rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  gap: .3rem;
  border-top-width: 5px;
  border-top-style: solid;
  /* --kachel-farbe setzt kasse.php je Artikel (Kategoriefarbe). Auf dem
     Handy wandert derselbe Streifen an die linke Kante, siehe Media Query. */
  border-top-color: var(--kachel-farbe, var(--farbe-rand-dezent));
}

/*
 * Wie oft dieser Artikel schon im Warenkorb liegt. Erspart auf dem Handy das
 * Aufklappen des Warenkorbs nur zum Nachsehen -- der haeufigste Grund, ihn
 * ueberhaupt zu oeffnen.
 */
.kachel-menge {
  position: absolute;
  top: .4rem;
  right: .4rem;
  min-width: 1.6rem;
  padding: .1rem .35rem;
  border-radius: 999px;
  background: var(--farbe-primaer);
  color: var(--farbe-primaer-text);
  font-size: .85rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}
.kachel-menge[hidden] { display: none; }
.artikel-kachel.im-korb { background: var(--farbe-primaer-flaeche); }

.artikel-kachel .preis { font-size: .95rem; font-weight: 500; color: var(--farbe-text-dezent); }

.mengen-stepper[hidden] { display: none; }

/* Kompakter innerhalb der Artikelkachel als in der Warenkorb-Zeile -- dort
   ist der verfuegbare Platz, besonders zweispaltig auf dem Handy, deutlich
   knapper. Ersetzt den Preis an derselben Stelle (siehe aktualisiereMengen-
   Badges()), die Kachel behaelt dabei ihre Hoehe. */
.artikel-kachel .mengen-stepper { align-self: flex-start; }
.artikel-kachel .mengen-stepper-taste { width: 1.9rem; min-height: 1.9rem; font-size: 1.05rem; }
.artikel-kachel .mengen-stepper-wert { min-width: 1.3rem; font-size: .85rem; }

/* Produktbild auf der Artikelkachel: quadratisch beschnitten, damit hoch-
   und querformatige Fotos nebeneinander gleich gross wirken. */
.kachel-bild {
  width: 100%;
  height: 84px;
  object-fit: cover;
  border-radius: var(--radius-klein);
  display: block;
  background: var(--farbe-flaeche);
}
.artikel-kachel.hat-bild { justify-content: flex-start; padding-top: .55rem; }

/* Lange Artikelnamen ohne Leerzeichen ("MergedWizardFanta") sind ein Wort und
   brechen von sich aus nicht um -- sie ragten aus der Kachel heraus. */
.artikel-kachel { width: 100%; min-width: 0; }
.artikel-kachel > * { max-width: 100%; overflow-wrap: anywhere; hyphens: auto; }

.warenkorb {
  position: sticky;
  top: 1.25rem;
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--schatten);
}

/*
 * Name/Preis links, Mengen-Steuerung rechts, beides auf einer Zeile
 * (Rueckmeldung: "das kann ja auch rechts daneben stehen ... aktuell nicht
 * so ganz sauber geloest"). Nur bei sehr langen Namen bricht die Steuerung
 * unter die Beschriftung um -- flex-shrink:0 auf der Steuerung sorgt
 * dagegen dafuer, dass eher der Name als die Bedienelemente nachgeben.
 */
.warenkorb-zeile {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--farbe-rand-dezent);
}

.warenkorb-zeile-haupt {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.warenkorb-zeile-haupt:disabled { cursor: default; }

.warenkorb-zeile-steuerung { display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }

/*
 * Gemeinsamer Mengen-Stepper (Artikelkachel und Warenkorb-Zeile,
 * Rueckmeldung: "ein bisschen softer machen"). Als Pille mit den beiden
 * Knoepfen nahtlos an der Zahl statt dreier getrennter Kacheln, weniger
 * unruhig als vorher drei einzelne .taste-Elemente nebeneinander.
 */
.mengen-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--farbe-rand);
  border-radius: 999px;
  background: var(--farbe-flaeche-erhoben);
  overflow: hidden;
  flex-shrink: 0;
}
.mengen-stepper-taste {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  min-height: 2.3rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--farbe-primaer-dunkel);
  cursor: pointer;
}
.mengen-stepper-taste:active { background: var(--farbe-flaeche-gedrueckt); }
.mengen-stepper-taste:focus-visible { outline: none; box-shadow: var(--fokusring); }
.mengen-stepper-wert {
  min-width: 1.7rem;
  padding: 0 .1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--farbe-rand-dezent);
  border-right: 1px solid var(--farbe-rand-dezent);
}

.warenkorb-summe {
  font-size: 1.6rem;
  font-weight: 800;
  text-align: right;
  margin: 1.1rem 0;
  color: var(--farbe-primaer-dunkel);
}

/*
 * "Warenkorb leeren" sass frueher direkt neben "Bestellung abschließen" --
 * ein Fehltipper konnte den ganzen Warenkorb loeschen (Rueckmeldung: "zu
 * nah beieinander"). Jetzt ein kleiner Icon-Knopf oben bei der Ueberschrift,
 * raeumlich getrennt von der Abschluss-Taste.
 */
/*
 * Der Kopf ist ein <button>, nicht nur eine Ueberschriftenzeile -- auf dem
 * Handy ist er zugleich die Klapp-Flaeche fuer den ganzen Warenkorb (siehe
 * @media (max-width: 600px) weiter unten). Auf Tablet/Desktop bleibt er
 * optisch identisch zur bisherigen <div>-Variante, nur eben klickbar.
 */
.warenkorb-leiste { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.warenkorb-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* Nur auf dem Handy: dort ersetzt dieser Knopf den ausgeblendeten
   "Bestellung abschließen" im Warenkorb selbst. */
.warenkorb-kassieren { display: none; flex-shrink: 0; }
.warenkorb-kopf h2 { margin: 0; }
.warenkorb-inhalt-kopf { display: flex; justify-content: flex-end; margin-bottom: .3rem; }
.taste-nur-icon { padding: .55rem; min-width: auto; }
.taste-nur-icon svg { margin: 0; }

/* Nur auf dem Handy sichtbar (siehe Media Query) -- auf Tablet/Desktop bleibt
   der Warenkorb wie bisher dauerhaft ausgeklappt, diese beiden brauchen dort
   keine Funktion und nehmen deshalb auch keinen Platz weg. */
.warenkorb-mini-summe { display: none; font-weight: 700; color: var(--farbe-primaer-dunkel); white-space: nowrap; }
.warenkorb-klapp-icon { display: none; flex-shrink: 0; }
/* Groesse explizit: das Symbol steht nicht in einer .taste und bekommt seine
   Masse deshalb nicht ueber die dortige Regel -- ohne das rendert es mit
   Breite 0, also unsichtbar. */
.warenkorb-klapp-icon svg { width: 1.4rem; height: 1.4rem; transition: transform .15s ease; }

.ueberlagerung {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 18, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10;
}

.ueberlagerung[hidden] { display: none; }

.dialogfeld {
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: 1rem;
  padding: 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--schatten-erhoben);
}

/*
 * Jede Optionsgruppe (Groesse, Farbe, ...) als eigene, klar umrandete
 * Karte statt nur durch einen Abstand getrennt (Rueckmeldung: "die
 * einzelnen Optionen voneinander abheben" -- auf dem Tablet schon
 * unschoen, auf dem schmalen Handy-Dialog aber kaum noch zu unterscheiden).
 */
.optionsgruppe-block {
  margin-bottom: 1rem;
  padding: .8rem .9rem;
  background: var(--farbe-flaeche);
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: var(--radius-klein);
}
.optionsgruppe-block:last-of-type { margin-bottom: 0; }

.optionsgruppe-kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .65rem; }
.optionsgruppe-kopf h3 { margin: 0; }

/* Pflicht/Optional als kleine, farblich abgesetzte Kennzeichnung statt Teil
   des Fliesstextes -- auf einen Blick erkennbar, ohne den Gruppennamen zu
   verlaengern. */
.optionsgruppe-pflicht {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
}
.optionsgruppe-pflicht.optionsgruppe-optional { background: var(--farbe-flaeche-gedrueckt); color: var(--farbe-text-dezent); }

.optionswert-wahl { display: flex; flex-wrap: wrap; gap: .5rem; }
.optionswert-wahl .taste {
  min-height: 52px;
  border-radius: 999px;
  padding: .45rem 1rem;
  flex-direction: column;
  gap: .05rem;
  line-height: 1.25;
}
.optionswert-wahl .taste.gewaehlt { background: var(--farbe-primaer); color: var(--farbe-primaer-text); border-color: var(--farbe-primaer-dunkel); }
.optionswert-wahl .taste:disabled { opacity: .5; cursor: not-allowed; }

/* Aufschlag/"ausverkauft" als eigene, leisere Zeile unter dem Namen --
   vorher ein einzelner langer Satz, der auf schmalen Knoepfen umbrach und
   Name und Zusatzinfo optisch verschmelzen liess. */
.optionswert-aufschlag { font-size: .78rem; font-weight: 600; opacity: .8; }
.optionswert-wahl .taste.gewaehlt .optionswert-aufschlag { opacity: .9; }
.optionswert-ausverkauft { text-decoration: line-through; text-decoration-color: currentColor; }

.rueckgeld-anzeige { font-size: 2rem; font-weight: 800; margin: .75rem 0; color: var(--farbe-primaer-dunkel); }

/*
 * Zahlungsdialog: fester Mindestplatz, damit das Fenster beim Waehlen von
 * "Bar" (Schnellwahl/Betragsfeld/Rueckgeld erscheinen) nicht ploetzlich
 * waechst (Rueckmeldung: "wird das Fenster ploetzlich größer, irritierend").
 */
/*
 * Feste Hoehe statt min-height: damit waechst die Karte beim Waehlen von
 * "Bar" nicht mehr weiter mit -- ueberschuessiger Inhalt (z. B. viele
 * Schein-Schnellwahl-Knoepfe) scrollt innerhalb der Karte, statt sie zu
 * vergroessern.
 */
.dialogfeld-zahlung { display: flex; flex-direction: column; }
/*
 * Fest reservierte Mindesthoehe statt flex-grow: der Bereich fuer
 * Bar/Karte-Details behaelt dieselbe Groesse, ob nun nichts, "Bar" oder
 * "Karte" gewaehlt ist -- die Karte selbst waechst dadurch beim Waehlen
 * nicht mehr sichtbar (siehe .rueckgeld-anzeige/.schnellwahl darunter).
 */
.zahlungsart-details { min-height: 13rem; }

/*
 * Abbrechen/Abschließen untereinander statt nebeneinander: die lange
 * Beschriftung "Bestellung abschließen" plus Icon brach sonst in der
 * schmalen Dialogbreite um und fraß den fuer Bar/Karte reservierten
 * Platz in der Mitte auf.
 */
.zahlung-aktionen { display: flex; flex-direction: column; gap: .6rem; flex-shrink: 0; }

.zahlung-summe-gross {
  font-size: 2.6rem;
  font-weight: 800;
  text-align: center;
  margin: .25rem 0 1.1rem;
  color: var(--farbe-primaer-dunkel);
}

/* Bar/Karte: sichtbarer Abstand und ein klarer "ausgewaehlt"-Zustand --
   vorher lagen beide Tasten ohne Abstand aneinander und blieben optisch
   unveraendert, egal welche gewaehlt war. */
.zahlungsart-wahl { display: flex; gap: .75rem; margin-bottom: 1rem; }
.zahlungsart-wahl .taste { flex: 1 1 0; min-height: 64px; font-size: 1.05rem; }
.zahlungsart-wahl .taste.gewaehlt { background: var(--farbe-primaer); color: var(--farbe-primaer-text); border-color: var(--farbe-primaer-dunkel); }

/* Kartenzahlung: Bestaetigung "Betrag eingenommen" muss aktiv angetippt
   werden, bevor abgeschlossen werden kann (F-210) -- das Terminal kassiert
   unabhaengig von dieser Kasse. */
#karte-eingenommen.bestaetigt { background: var(--farbe-erfolg); color: #fff; border-color: var(--farbe-erfolg); }

/* Stationen, Ausgabe, Kundenanzeige */
.positions-liste { display: flex; flex-direction: column; gap: 1rem; }

.positions-karte {
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand-dezent);
  border-left: 6px solid var(--farbe-primaer);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  box-shadow: var(--schatten-klein);
}

.positions-karte.hervorgehoben { border-left-color: var(--farbe-warnung); background: var(--farbe-warnung-flaeche); }

.positions-info .nummer { font-size: 2.4rem; font-weight: 800; line-height: 1.1; color: var(--farbe-primaer-dunkel); }
.positions-info .artikel { font-size: 1.6rem; font-weight: 600; margin-top: .25rem; }
.positions-info .optionen { font-size: 1.2rem; color: var(--farbe-text-dezent); }
.positions-info .wartezeit { font-size: 1rem; color: var(--farbe-text-dezent); margin-top: .25rem; }

.positions-aktionen { display: flex; gap: .5rem; flex-wrap: wrap; }
.positions-aktionen .taste { min-width: 130px; }

.stationen-spalten { display: flex; gap: 1.5rem; align-items: flex-start; overflow-x: auto; }
.station-spalte { flex: 1 0 320px; min-width: 320px; }
.station-spalte h2 { margin-bottom: .75rem; }
.station-spalte .positions-karte { flex-direction: column; align-items: stretch; margin-bottom: 1rem; }

.bestellungs-karte {
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand-dezent);
  border-left: 6px solid var(--farbe-rand-dezent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--schatten-klein);
}

.bestellungs-karte.bereit { border-left-color: var(--farbe-erfolg); background: var(--farbe-erfolg-flaeche); }

.bestellungs-karte .nummer { font-size: 2.2rem; font-weight: 800; }
.bestellungs-karte ul { margin: .5rem 0; }
.bestellungs-karte .position-status { font-size: .9rem; color: var(--farbe-text-dezent); }

.kundenanzeige-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}

.kundenanzeige-nummer {
  font-size: 4rem;
  font-weight: 800;
  text-align: center;
  border: 3px solid var(--farbe-erfolg);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
  box-shadow: var(--schatten);
}

/* Aktionskacheln (Startseite u. ae.) */
.aktion-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.5rem;
}

.aktion-kachel {
  flex-direction: column;
  min-height: 110px;
  font-size: 1.15rem;
  gap: .5rem;
}

.aktion-kachel svg { width: 2rem; height: 2rem; }

/* ==================================================================
 * VERWALTUNGS-PANEL
 *
 * Eigenstaendiges Admin-Layout: feste Seitenleiste links, Kopfzeile
 * oben, Inhaltsflaeche rechts. Diese Seiten werden von Leitung und
 * Verwaltung am Laptop bedient (Maus/Tastatur), nicht am Tresen mit
 * Handschuhen -- N-102 (60x60 Touch-Ziel) gilt hier bewusst nicht.
 * Dichter, farbiger und mit klaren Bausteinen (Kennzahlen, Tabellen,
 * Leerzustaende) statt der frueheren Textwueste.
 * ================================================================== */

body.bereich-verwaltung {
  --mindestgroesse: 38px;
  --seitenleiste-breite: 240px;
  --admin-flaeche: #f5f8fb;
  --admin-dunkel: #0d2436;
  --admin-dunkel-weich: #16354c;
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
  padding: 0;
  background: var(--admin-flaeche);
}

/* Der Markenkopf sitzt im Verwaltungsmodus in der Seitenleiste. */
body.bereich-verwaltung > .marken-kopf { display: none; }

.admin-huelle {
  display: grid;
  grid-template-columns: var(--seitenleiste-breite) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---- Seitenleiste ---- */

.admin-seitenleiste {
  background: var(--admin-dunkel);
  color: #dce7f0;
  padding: 1.1rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-marke {
  display: block;
  padding: 0 .55rem 1.2rem;
}
/* Das Logo ist dunkel gezeichnet und ginge auf der dunklen Seitenleiste
   unter. Statt einer zweiten Bilddatei (F-806: keine externen Quellen,
   und eine Extradatei muesste mitgepflegt werden) wird es hier zu Weiss
   umgefaerbt. */
.admin-marke img {
  display: block;
  height: 26px;
  width: auto;
  filter: brightness(0) invert(1);
}

.admin-gruppe {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #7f9bb3;
  padding: 1rem .6rem .35rem;
}

.admin-punkt {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem .6rem;
  border-radius: var(--radius-klein);
  color: #c6d7e5;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
.admin-punkt svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; opacity: .85; }
.admin-punkt:hover {
  background: var(--admin-dunkel-weich);
  color: #fff;
  text-decoration: none;
}
.admin-punkt.aktiv {
  background: var(--farbe-primaer);
  color: #fff;
}
.admin-punkt.aktiv svg { opacity: 1; }

/* ---- Kopfzeile ---- */

.admin-kopfzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  padding: .7rem 1.75rem;
  background: var(--farbe-flaeche-erhoben);
  border-bottom: 1px solid var(--farbe-rand-dezent);
  position: sticky;
  top: 0;
  z-index: 30;
}

.admin-kontext {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--farbe-text-dezent);
  font-weight: 600;
}
.admin-kontext svg { width: 1rem; height: 1rem; }
.admin-rolle { font-weight: 400; }

.admin-kopf-rechts { display: flex; align-items: center; gap: .6rem; }

.admin-vs-form { display: flex; align-items: center; gap: .35rem; }
.admin-vs-form select { font-size: .85rem; padding: .35rem .6rem; }

.admin-benutzer {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding-left: .6rem;
  border-left: 1px solid var(--farbe-rand-dezent);
}
.admin-benutzer-name { font-size: .85rem; font-weight: 600; }

.admin-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .02em;
  flex-shrink: 0;
}

body.bereich-verwaltung main {
  max-width: 1180px;
  margin: 0;
  padding: 1.6rem 1.75rem 3rem;
}

/* ---- Seitenkopf mit Aktionen ---- */

.admin-seitenkopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.4rem;
}
.admin-seitenkopf h1 { margin: 0; }
.admin-untertitel {
  margin: .2rem 0 0;
  font-size: .88rem;
  color: var(--farbe-text-dezent);
}
.admin-aktionen { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

body.bereich-verwaltung h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--farbe-text);
  margin-bottom: 1rem;
}
body.bereich-verwaltung h2 {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 1.9rem 0 .7rem;
}
body.bereich-verwaltung h3 { font-size: .92rem; }

body.bereich-verwaltung .zurueck {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--farbe-text-dezent);
  text-decoration: none;
  margin-bottom: .9rem;
}
body.bereich-verwaltung .zurueck:hover { color: var(--farbe-primaer); text-decoration: none; }

/* ---- Bedienelemente ---- */

body.bereich-verwaltung .taste {
  min-width: auto;
  min-height: var(--mindestgroesse);
  font-size: .875rem;
  font-weight: 600;
  border-width: 1px;
  border-radius: var(--radius-klein);
  padding: .4rem .85rem;
  box-shadow: none;
  gap: .4rem;
}
body.bereich-verwaltung .taste:hover { box-shadow: var(--schatten-klein); }
body.bereich-verwaltung .taste svg { width: 1.05em; height: 1.05em; }
body.bereich-verwaltung .taste-klein { min-height: 30px; font-size: .8rem; padding: .25rem .6rem; }

body.bereich-verwaltung .karte {
  padding: 1.15rem 1.3rem;
  box-shadow: none;
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: 14px;
}
body.bereich-verwaltung .karten-liste { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- Tabellen ---- */

body.bereich-verwaltung table {
  font-size: .88rem;
  box-shadow: none;
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: 14px;
}
body.bereich-verwaltung th {
  padding: .6rem .9rem;
  font-size: .72rem;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-dezent);
  border-bottom: 1px solid var(--farbe-rand-dezent);
}
body.bereich-verwaltung td { padding: .6rem .9rem; }
body.bereich-verwaltung tbody tr:hover { background: var(--farbe-flaeche); }

/* Zahlen rechtsbuendig und mit gleicher Ziffernbreite -- sonst
   "springen" Betraege in einer Spalte optisch hin und her. */
.zahl { text-align: right; font-variant-numeric: tabular-nums; }
th.zahl { text-align: right; }
.rechts { text-align: right; }
.ohne-abstand { margin: 0; }
.spalte-symbol { width: 2.6rem; }
.kennzahl-symbol.symbol-klein { width: 30px; height: 30px; border-radius: 9px; }
.kennzahl-symbol.symbol-klein svg { width: 1rem; height: 1rem; }
.summenzeile td { font-weight: 700; border-top: 2px solid var(--farbe-rand); background: var(--farbe-flaeche); }
/* Zu- und Abgaenge im Bewegungsprotokoll auf einen Blick unterscheidbar. */
.wert-zugang { color: var(--farbe-erfolg); font-weight: 600; }
.wert-abgang { color: var(--farbe-gefahr); font-weight: 600; }

body.bereich-verwaltung input[type="text"],
body.bereich-verwaltung input[type="number"],
body.bereich-verwaltung input[type="date"],
body.bereich-verwaltung input[type="datetime-local"],
body.bereich-verwaltung select,
body.bereich-verwaltung textarea {
  font-size: .88rem;
  padding: .42rem .7rem;
  border-width: 1px;
  border-radius: var(--radius-klein);
}

body.bereich-verwaltung .formular-feld label {
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--farbe-text-dezent);
}

/* ---- Kennzahlkacheln ---- */

.kennzahl-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: .85rem;
  margin-bottom: 1.6rem;
}

.kennzahl-kachel {
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: 14px;
  padding: 1rem 1.15rem;
  display: flex;
  align-items: flex-start;
  gap: .8rem;
}

.kennzahl-symbol {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
}
.kennzahl-symbol svg { width: 1.2rem; height: 1.2rem; }
.kennzahl-symbol.ton-erfolg { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); }
.kennzahl-symbol.ton-warnung { background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); }
.kennzahl-symbol.ton-gefahr { background: var(--farbe-gefahr-flaeche); color: var(--farbe-gefahr); }

.kennzahl-text { min-width: 0; }
.kennzahl-wert {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--farbe-text);
}
.kennzahl-wert.wert-klein { font-size: 1.05rem; font-weight: 700; }
.kennzahl-marke {
  display: block;
  font-size: .8rem;
  color: var(--farbe-text-dezent);
  margin-top: .1rem;
}

/* Klickbare Kennzahl-Kachel (Dashboard-Warteschlangenkachel, direkt zu Station/Ausgabe verlinkt). */
a.kennzahl-link { display: block; text-decoration: none; color: inherit; }
a.kennzahl-link:hover .kennzahl-kachel { border-color: var(--farbe-primaer); }

/*
 * Warnliste "Fast ausverkauft" (Dashboard-Kachel, Rückmeldung: "sinnvolle,
 * gute Kacheln mit wichtigen Infos").
 */
.warnliste { display: flex; flex-direction: column; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.warnliste li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; }
.warnliste-symbol { flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: var(--farbe-warnung); }
.warnliste-symbol svg { width: 100%; height: 100%; }
.warnliste-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.warnliste-menge { margin-left: auto; flex-shrink: 0; color: var(--farbe-warnung); font-weight: 700; font-variant-numeric: tabular-nums; font-size: .82rem; }

/* ---- Statusanzeigen ---- */

.status-punkt {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  padding: .18rem .6rem .18rem .5rem;
  border-radius: 999px;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-dezent);
}
.status-punkt::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
}
.status-punkt.ton-erfolg { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); }
.status-punkt.ton-warnung { background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); }
.status-punkt.ton-gefahr { background: var(--farbe-gefahr-flaeche); color: var(--farbe-gefahr); }
.status-punkt.ton-info { background: var(--farbe-primaer-flaeche); color: var(--farbe-primaer-dunkel); }

/* Farbtupfer fuer Kategoriefarben in Listen. */
.farbtupfer {
  display: inline-block;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 5px;
  border: 1px solid var(--farbe-rand);
  vertical-align: -.2rem;
}

/* ---- Leerzustand als echter Baustein ---- */

body.bereich-verwaltung .leerzustand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  padding: 2.6rem 1.5rem;
  background: var(--farbe-flaeche-erhoben);
  border: 1px dashed var(--farbe-rand);
  border-radius: 14px;
  color: var(--farbe-text-dezent);
  font-size: .9rem;
}
.leerzustand-symbol {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-dezent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .35rem;
}
.leerzustand-symbol svg { width: 1.4rem; height: 1.4rem; }
.leerzustand-titel {
  font-size: 1rem;
  font-weight: 700;
  color: var(--farbe-text);
}
.leerzustand-text { margin: 0; max-width: 42ch; }
.leerzustand .taste { margin-top: .7rem; }

/* ---- Farbwahl mit echtem Farbwaehler ---- */

/* Fortschrittsanzeige der gefuehrten Einrichtung. */
.schrittfolge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.schritt {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--farbe-text-dezent);
}
.schritt + .schritt::before {
  content: "";
  width: 1.4rem;
  height: 2px;
  border-radius: 1px;
  background: var(--farbe-rand);
  margin-right: .6rem;
}
.schritt-nummer {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  background: var(--farbe-flaeche-gedrueckt);
  color: var(--farbe-text-dezent);
  flex-shrink: 0;
}
.schritt.aktiv { color: var(--farbe-primaer-dunkel); }
.schritt.aktiv .schritt-nummer { background: var(--farbe-primaer); color: #fff; }
.schritt.erledigt { color: var(--farbe-erfolg); }
.schritt.erledigt .schritt-nummer { background: var(--farbe-erfolg); color: #fff; }

/* Anleitungen als nummerierte Schritt-Karten statt nackter <ol> (Rueckmeldung:
   "die Anleitungen sind echt nicht so schoen") -- verbundene Kreise mit
   Nummer, angelehnt an .schritt oben, aber als vertikale Abfolge mit mehr
   Platz fuer laengeren Anleitungstext je Schritt. --anleitung-akzent erlaubt
   Abschnitten eine eigene Akzentfarbe (z. B. passend zur Aufbauplan-Skizze). */
.anleitung-schritte {
  --anleitung-akzent: var(--farbe-primaer);
  list-style: none;
  margin: 1.1rem 0;
  padding: 0;
  counter-reset: anleitung-schritt;
}
.anleitung-schritte > li {
  counter-increment: anleitung-schritt;
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.3rem;
}
.anleitung-schritte > li:last-child { padding-bottom: 0; }
.anleitung-schritte > li::before {
  content: counter(anleitung-schritt);
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--anleitung-akzent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .9rem;
  z-index: 1;
}
.anleitung-schritte > li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: .9375rem;
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: var(--farbe-rand-dezent);
}
.anleitung-schritte .anleitung-inhalt { padding-top: .3rem; line-height: 1.55; }
.anleitung-schritte .anleitung-inhalt ul { margin: .5rem 0; padding-left: 1.2rem; }
.anleitung-schritte .anleitung-inhalt li { margin-bottom: .2rem; }
.anleitung-schritte--bazar { --anleitung-akzent: #2f6f68; }
.anleitung-schritte--merch { --anleitung-akzent: #ab6c26; }

/* Aufklappbares Formular in einer Tabellenzelle: das Formular soll die
   Spaltenbreite verlassen duerfen, sonst quetscht es sich in die schmale
   Aktionsspalte. */
.zeilen-aufklapp { margin: 0; }
.zeilen-aufklapp > summary { font-size: .8rem; justify-content: flex-end; }
.zeilen-aufklapp[open] { position: relative; }
.zeilen-aufklapp .formular-zeile {
  position: absolute;
  right: 0;
  z-index: 10;
  width: max-content;
  max-width: 22rem;
  margin-top: .4rem;
  padding: .9rem 1rem;
  text-align: left;
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  box-shadow: var(--schatten);
}

/* Such-/Filterfeld im Abschnittskopf. */
.abschnitt-kopf input[type="search"],
.abschnitt-kopf select[data-filtert-genau] {
  font-size: .85rem;
  padding: .35rem .7rem;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
}
.abschnitt-kopf input[type="search"] { min-width: 15rem; }

.farbwahl { display: flex; align-items: center; gap: .4rem; }
.farbwahl input[type="color"] {
  width: 40px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  background: var(--farbe-flaeche-erhoben);
  cursor: pointer;
  flex-shrink: 0;
}
.farbwahl input[type="text"] { width: 7.5rem; font-family: var(--schrift); }
.feld-schmal { width: 5.5rem; }

/* Produktbilder in der Verwaltung: Vorschau in der Liste, grosse Ansicht
   auf der Detailseite. */
.artikel-bild-klein {
  width: 2.4rem;
  height: 2.4rem;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  border: 1px solid var(--farbe-rand-dezent);
}
.artikel-bild-gross {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--farbe-rand-dezent);
  flex-shrink: 0;
}
.bild-platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-dezent);
}
.bild-platzhalter svg { width: 40%; height: 40%; }
.artikel-bild-klein.bild-platzhalter svg { width: 55%; height: 55%; }
.bild-bereich { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-start; }
.bild-bedienung { flex: 1 1 22rem; min-width: 0; }
.bild-bedienung .hinweis { margin-top: 0; }

/* Trefferraster der Openverse-Bildsuche (Rückmeldung: "bild suchen ...
   dann direkt aus der App auswählbar"). */
.openverse-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: .5rem;
  margin-top: .6rem;
}
.openverse-kachel {
  position: relative;
  padding: 0;
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius-klein);
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--farbe-flaeche);
  cursor: pointer;
}
.openverse-kachel:hover { border-color: var(--farbe-primaer); }
.openverse-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.openverse-lizenz {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: .1rem .3rem;
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  background: rgba(0, 0, 0, .6);
  color: #fff;
}
/*
 * Mehrere Bedienelemente in einer Aktionsspalte nebeneinander. Bewusst kein
 * white-space: nowrap mehr: bei vielen Bedienelementen (Benutzer mit
 * Löschprüfung UND Testdaten-Option) zwang das die Spalte auf ihre volle
 * Breite in einer Zeile -- das nahm den Nachbarspalten (Name, Rollen) den
 * Platz weg und liess dort Inhalte unnoetig umbrechen. Umbricht der
 * Bedienelemente jetzt selbst als Gruppe, wenn der Platz nicht reicht.
 */
.zelle-aktion { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.zelle-aktion > * { display: inline-flex; vertical-align: middle; }
/* Begruendungstexte (z. B. "Nicht loeschbar (...)") koennen lang werden --
   ohne diese Ausnahme von der Zeilen-nowrap oben zwingt eine lange
   Aufzaehlung die ganze Tabelle (und damit die ganze Seite) in die Breite. */
.zelle-aktion .hinweis { white-space: normal; max-width: 22rem; display: inline-block; overflow-wrap: anywhere; }
/* Eingabefelder in Tabellenzellen sollen die Spalte fuellen, damit die
   Zeile nicht ausfranst. */
body.bereich-verwaltung td > input[type="text"] { width: 100%; min-width: 8rem; }
.namens-form input { min-width: 12rem; }
/* Ankreuzfeld mit Beschriftung in einer Formularzeile. */
.schalter {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--farbe-text);
  white-space: nowrap;
}
.schalter input { width: 1.05rem; height: 1.05rem; }

/* Betriebsarten einer Verkaufsstelle: Ankreuzfeld mit Erklaerung daneben.
   Eine blosse Beschriftung reichte hier nicht -- beide Optionen aendern den
   Ablauf am Stand und muessen erklaert werden, bevor jemand sie umlegt. */
.betriebsart-liste {
  display: grid;
  gap: .7rem;
  margin: .8rem 0 1.2rem;
}
.betriebsart {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem 1rem;
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: 12px;
  background: var(--farbe-flaeche-leise);
  cursor: pointer;
}
.betriebsart:hover { border-color: var(--farbe-rand); }
.betriebsart input { width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex-shrink: 0; }
.betriebsart strong { display: block; font-size: .92rem; }
.betriebsart .hinweis { display: block; font-size: .84rem; margin-top: .15rem; }

/* Ausgabeliste innerhalb der Kasse (Betriebsart "Ausgabe an der Kasse"). */
.kassen-ausgabe {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--farbe-rand-dezent);
}
.kassen-ausgabe h2 { margin-top: 0; }
.ausgabe-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--farbe-rand-dezent);
}
.ausgabe-zeile:last-child { border-bottom: none; }
.ausgabe-nummer { font-size: 1.25rem; font-weight: 800; color: var(--farbe-primaer-dunkel); }

/* ---- Abschnittskarte: Ueberschrift + Inhalt in einem Block ---- */

.abschnitt {
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand-dezent);
  border-radius: 14px;
  margin-bottom: 1.4rem;
  overflow-x: auto;
  overflow-y: hidden;
}
/*
 * overflow-y: hidden rundet die eckigen Tabellenecken auf den Kartenradius --
 * schneidet dabei aber ein aufgeklapptes Popover (.zeilen-aufklapp[open],
 * z. B. "Bewegung" in der Bestandsuebersicht) am Kartenrand ab. Nur waehrend
 * ein solches Popover offen ist, darf die Karte ueberlaufen.
 * overflow-x bleibt bewusst auto statt hidden: passt eine Tabelle (z. B. mit
 * langen Aktionstexten) nicht in die Karte, soll sie innerhalb der Karte
 * scrollbar sein, statt Inhalt unsichtbar abzuschneiden.
 */
.abschnitt:has(.zeilen-aufklapp[open]) { overflow: visible; }
.abschnitt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .85rem 1.2rem;
  border-bottom: 1px solid var(--farbe-rand-dezent);
  background: var(--farbe-flaeche-leise);
}
.abschnitt-kopf h2 { margin: 0; font-size: .98rem; }
.abschnitt-koerper { padding: 1.2rem; }
.massenaktionen { border-top: 1px solid var(--farbe-rand-dezent); background: var(--farbe-flaeche); }
/* Tabellen sitzen buendig in der Abschnittskarte, ohne doppelten Rahmen. */
.abschnitt > table,
.abschnitt-koerper > table:only-child {
  margin: 0;
  border: none;
  border-radius: 0;
}
.abschnitt .leerzustand { border: none; border-radius: 0; }
.abschnitt-rand-oben { border-top: 1px solid var(--farbe-rand-dezent); }

/*
 * Bestverkaufte Artikel als Rangliste mit Balken (Rückmeldung: "dashboard
 * cooler machen ... darstellung möglichst schön"). Bewusst reines HTML/CSS
 * statt SVG oder einer Chart-Bibliothek (F-806: keine externen
 * Bibliotheken, R-6: wartbar ohne dediziertes Entwicklerteam) -- die
 * Balkenbreite kommt als Inline-style aus dem serverseitig berechneten
 * Prozentsatz.
 */
.rangliste { display: flex; flex-direction: column; gap: .85rem; }
.rangliste-zeile { display: flex; align-items: center; gap: .7rem; }
.rangliste-rang {
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.rangliste-zeile:first-child .rangliste-rang { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); }
.rangliste-inhalt { flex: 1; min-width: 0; }
.rangliste-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  font-size: .88rem;
  margin-bottom: .35rem;
}
.rangliste-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rangliste-wert { flex-shrink: 0; color: var(--farbe-text-dezent); font-size: .82rem; font-variant-numeric: tabular-nums; }
.rangliste-balken { height: 8px; border-radius: 5px; background: var(--farbe-flaeche-gedrueckt); overflow: hidden; }
.rangliste-balken-fuellung { height: 100%; background: var(--farbe-primaer); border-radius: 5px; }

/*
 * Beste Verkaufszeiten: Saeulendiagramm je Uhrzeit (Rueckmeldung: "beste
 * zeitpunkte zum verkauf"), gleiches Prinzip wie die Rangliste oben --
 * reines HTML/CSS, Balkenhoehe als Inline-Style.
 */
.stundenchart {
  display: flex;
  align-items: flex-end;
  gap: .3rem;
  height: 11rem;
  overflow-x: auto;
  padding-top: .25rem;
}
.stundenchart-spalte {
  flex: 1 1 0;
  min-width: 1.6rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stundenchart-balkenbereich {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.stundenchart-wert {
  font-size: .7rem;
  font-weight: 700;
  color: var(--farbe-text-dezent);
  margin-bottom: .25rem;
  font-variant-numeric: tabular-nums;
}
.stundenchart-balken {
  width: 65%;
  max-width: 2rem;
  background: var(--farbe-primaer);
  border-radius: 5px 5px 0 0;
  min-height: 3px;
}
.stundenchart-balken.ist-spitze { background: var(--farbe-erfolg); }
.stundenchart-label { margin-top: .4rem; font-size: .72rem; color: var(--farbe-text-dezent); }
/* Optionsgruppe als eigene Karte innerhalb eines Abschnitts. */
.gruppen-karte { background: var(--farbe-flaeche-leise); }
.gruppen-karte + .gruppen-karte { margin-top: 1rem; }
.gruppen-karte .admin-seitenkopf { margin-bottom: .8rem; }
.gruppen-karte h3 { margin: 0; }
.gruppen-karte table { margin-bottom: 1rem; }
.gruppen-kopf {
  padding-bottom: .9rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--farbe-rand-dezent);
}
/* Loeschen der ganzen Gruppe steht bewusst abgesetzt am Fuss der Karte und
   nicht neben "Speichern" -- die beiden Knoepfe sollen nicht verwechselt
   werden. */
.gruppen-fuss {
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--farbe-rand-dezent);
}

@media (max-width: 900px) {
  body.bereich-verwaltung { --seitenleiste-breite: 100%; }
  /* minmax(0, ...) wie in der Basisregel: sonst darf die Spalte durch
     breiten Inhalt (z. B. eine Tabelle mit langen Aktionstexten) ueber die
     Fensterbreite hinaus wachsen -- dann scrollt die ganze Seite statt nur
     der Tabelle, und Seitenleiste samt Name-/Rollen-Spalten verschwinden
     ausserhalb des sichtbaren Bereichs. */
  .admin-huelle { grid-template-columns: minmax(0, 1fr); }
  /* Auf schmalen Bildschirmen wird aus der Seitenleiste eine einzeilige,
     seitlich scrollbare Leiste. Umbrechen liess sie auf 400 Bildpunkte
     Hoehe anwachsen -- mehr als die Haelfte eines Handybildschirms, bevor
     der eigentliche Inhalt beginnt. */
  .admin-seitenleiste {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: .2rem;
    padding: .5rem .6rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .admin-seitenleiste::-webkit-scrollbar { display: none; }
  .admin-marke { padding: 0 .5rem 0 .2rem; flex-shrink: 0; }
  .admin-marke img { height: 20px; }
  .admin-gruppe { display: none; }
  .admin-punkt {
    padding: .35rem .5rem;
    font-size: .8rem;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .admin-punkt svg { width: 1rem; height: 1rem; }
  .admin-kopfzeile { padding: .6rem 1rem; }
  body.bereich-verwaltung main { padding: 1.1rem 1rem 2.5rem; }
}

/* ------------------------------------------------------------------ */

/*
 * Kundenanzeige: haengt an der Ausgabe und wird von Wartenden aus mehreren
 * Metern Entfernung gelesen, nicht bedient. Deshalb randlos, ohne die
 * Inhaltsbreite der Bedienoberflaechen und mit deutlich groesserer Schrift
 * -- die uebrigen Seiten haben hier keinen Nutzen von, weil sie aus
 * Armlaenge bedient werden.
 */
body.bereich-anzeige { padding: 2rem 2.5rem; }
body.bereich-anzeige main { max-width: none; }
body.bereich-anzeige .marken-kopf { max-width: none; margin-bottom: 2rem; }
body.bereich-anzeige .marken-kopf img { height: 48px; }

body.bereich-anzeige h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  margin-bottom: 2rem;
}

body.bereich-anzeige .kundenanzeige-liste {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 2rem;
}

body.bereich-anzeige .kundenanzeige-nummer {
  font-size: clamp(3.5rem, 9vw, 7rem);
  padding: 2.5rem 1rem;
}

body.bereich-anzeige .leerzustand { font-size: clamp(1.4rem, 3vw, 2.2rem); padding: 5rem 1rem; }

/* Bestellnummer auf der Bestaetigung nach dem Kassieren -- wird dem Kunden
   ueber den Tresen hinweg vorgelesen bzw. gezeigt. */
.bestellnummer-gross {
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--farbe-primaer-dunkel);
  margin: .5rem 0 1.5rem;
}

/* Digitaler Kundenbeleg (QR-Code) auf der Bestaetigung nach dem Kassieren. */
.beleg-qr-bereich { margin: 0 0 1.5rem; }
.beleg-qr-bereich #beleg-qr { display: inline-block; line-height: 0; margin-bottom: .5rem; }
.beleg-qr-bereich #beleg-qr svg { width: 200px; height: 200px; }
.beleg-qr-bereich .beleg-url { word-break: break-all; font-size: .85rem; }

/* Taste ueber die volle Breite des umgebenden Blocks (Dialoge, Anmeldekarte). */
.taste-breit { display: flex; width: 100%; }

/* Betragsanzeigen ausserhalb der Kasse (Bargeldsaldo u. ae.). */
.betrag-gross { font-size: 1.4rem; font-weight: 700; }

/* Bestandsmenge in der Bestandsuebersicht. */
.menge-gross { font-size: 1.6rem; font-weight: 700; }

/* Warnschild inline im Fliesstext (Bestandsuebersicht) -- gleiche Farbwelt
   wie .warnmeldung, aber ohne deren Blockdarstellung. */
.warnschild {
  display: inline-block;
  background: var(--farbe-warnung-flaeche);
  color: var(--farbe-warnung);
  border: 1px solid color-mix(in srgb, var(--farbe-warnung) 35%, transparent);
  border-radius: var(--radius-klein);
  padding: .15rem .6rem;
  font-size: .9rem;
  font-weight: 600;
  margin-left: .5rem;
}


.mengen-anzeige { min-width: 2.5rem; text-align: center; font-size: 1.4rem; font-weight: 700; }

/* Stationskacheln sind Links, keine Buttons -- .taste bringt display:inline-flex
   schon mit, hier nur die Unterstreichung des Links unterdruecken. */
a.taste, a.taste:hover { text-decoration: none; }

/* Schnellwahl der Barbetraege im Zahlungsdialog. */
.schnellwahl {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.25rem;
}

.schnellwahl .taste { flex: 1 1 auto; min-width: 5.5rem; font-size: 1.15rem; }
.schnellwahl .taste.gewaehlt { outline: 3px solid var(--farbe-primaer); outline-offset: 2px; }

.rueckgeld-anzeige.passend { color: var(--farbe-erfolg); }

/*
 * Warenkorb im Hochformat (<900px): das zweispaltige Kassenlayout bricht dort
 * einspaltig um, wodurch der Warenkorb unter das Artikelraster rutscht --
 * zum Abschliessen muesste bei jeder Bestellung gescrollt werden. Stattdessen
 * bleibt er als Leiste am unteren Rand stehen und ist immer erreichbar.
 * Im Querformat greift das nicht, dort steht er ohnehin dauerhaft daneben.
 */
@media (max-width: 900px) {
  .kasse-layout .warenkorb {
    position: sticky;
    bottom: 0;
    top: auto;
    z-index: 5;
    /* Als Karte belassen statt randlos: bei kurzem Artikelraster steht sie
       einfach im Fluss, bei langem klebt sie unten -- beide Zustaende sehen
       so gewollt aus statt nach abgeschnittener Leiste. */
    box-shadow: 0 -6px 18px rgba(20, 30, 25, .16);
    max-height: 55vh;
    overflow-y: auto;
  }

  /* Platz schaffen, damit die letzte Artikelreihe nicht dauerhaft
     hinter der Warenkorbleiste verschwindet. */
  .kasse-layout { padding-bottom: 1rem; }
}

/*
 * Handy-Hochformat (Rueckmeldung: "muss das alles kleiner, uebersichtlicher
 * sein ... wirklich wie sone Handy App", falls iPads fehlen und auf dem
 * Handy kassiert werden muss). Ab 900px breit ist der Warenkorb bereits eine
 * klebende Leiste (siehe oben) -- auf einem Tablet in Hochformat bleibt
 * daneben immer noch genug Bildschirm fuer das Artikelraster. Auf einem
 * Handy (< 600px) frisst dieselbe, staendig offene Leiste dagegen ueber die
 * Haelfte des kurzen Bildschirms weg, kaum ein Artikel bleibt sichtbar. Der
 * Warenkorb wird deshalb hier zu einer einklappbaren Leiste: eingeklappt nur
 * Name + Zwischensumme + Pfeil, erst ein Antippen zeigt Positionen,
 * Rabattcode und die Abschluss-Knoepfe (siehe kasse.php fuer die
 * Umschalt-Logik).
 */
@media (max-width: 600px) {
  /*
   * Grundmasstab. Die Oberflaeche ist fuer Tablets mit Handschuhen ausgelegt
   * (N-101/N-102: Grundschrift 1.15rem, Bedienelemente 64px). Dieselben
   * absoluten Masse wirken auf einem Handy hineingezoomt (Rueckmeldung:
   * "bei 100% in Safari ist die Kassenseite rangezoomt"). Statt jede Regel
   * einzeln zu verkleinern, wird die Wurzelschrift herabgesetzt -- damit
   * skalieren saemtliche rem-Masse (Schrift, Abstaende, Radien) zugleich.
   *
   * Die eigentlichen Ziele bleiben gross: Artikelkacheln 66px, "Kassieren"
   * 48px. Nur die Nebenbedienelemente gehen auf 52px herunter -- ueber der
   * 44px-Empfehlung von iOS, aber unter den 60px aus N-102, die auf das
   * Tablet mit Handschuh gemuenzt sind, nicht auf ein Ausweich-Handy.
   */
  html { font-size: 15px; }
  body { padding: .75rem; font-size: 1.05rem; }
  :root { --mindestgroesse: 52px; }
  .marken-kopf { margin-bottom: .75rem; padding-bottom: .5rem; }
  .marken-kopf img { height: 26px; }
  h1 { font-size: 1.5rem; margin-bottom: .85rem; }

  /*
   * iOS Safari zoomt beim Antippen eines Eingabefelds selbsttaetig hinein,
   * sobald dessen Schrift kleiner als 16px ist -- mit der herabgesetzten
   * Wurzelschrift traefe das sonst auf jedes Feld zu (z. B. Rabattcode).
   */
  input, select, textarea { font-size: 16px; }

  /* Optionsdialog auf dem Handy noch etwas kompakter -- der Dialog ist hier
     kaum breiter als der Bildschirm, jeder gesparte Bildpunkt hilft (Rueck-
     meldung: "auf Mobile ist es noch schlimmer" als auf dem Tablet). */
  .optionsgruppe-block { padding: .65rem .7rem; }
  .optionswert-wahl .taste { min-height: 46px; padding: .4rem .8rem; font-size: .95rem; }

  .kasse-layout .warenkorb {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    max-height: 88vh;
    overflow-y: visible;
    border: none;
    border-top: 1px solid var(--farbe-rand-dezent);
    border-radius: 1rem 1rem 0 0;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
  }

  /* Fuer die fixierte Leiste am unteren Rand Platz freihalten, sonst
     verschwindet die letzte Artikelreihe dauerhaft dahinter. Groesser als
     beim Tablet-Wert oben, weil hier zusaetzlich noch der sichere Bereich
     am unteren Rand mancher Handys dazukommt. */
  .kasse-layout { padding-bottom: 4.5rem; }

  /* "Zurueck zur Uebersicht" ist ein eigenstaendiger Absatz NACH
     .kasse-layout, nicht darin -- dessen eigenes padding-bottom half ihm
     also nicht. Verschwand deshalb hinter der fixierten Warenkorb-Leiste
     (Rueckmeldung: "wird durch dieses Warenkorb-Overlay verdeckt"). */
  .kasse-layout + p { margin-bottom: 4.5rem; }

  .warenkorb-mini-summe,
  .warenkorb-klapp-icon { display: inline-flex; }

  /* Auf dem Handy traegt die Kurzfassung die Information -- die Ueberschrift
     "Warenkorb" daneben wuerde in der schmalen Leiste nur den Platz
     wegnehmen, den "Kassieren" braucht. */
  .warenkorb-kopf h2 { display: none; }
  .warenkorb-mini-summe { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .warenkorb-leiste { margin-bottom: 0; }
  .warenkorb-kassieren { display: inline-flex; min-height: 48px; padding: .6rem 1.1rem; }

  /* Der Abschluss sitzt hier in der Leiste und ist damit immer erreichbar --
     derselbe Knopf zusaetzlich im aufgeklappten Warenkorb waere doppelt. */
  .warenkorb-inhalt #taste-abschliessen { display: none; }

  /*
   * Eingeklappt (Normalzustand): max-height/opacity statt display:none, damit
   * das Auf-/Zuklappen eine weiche Bewegung ist statt eines harten Schnitts
   * (Rueckmeldung: "das Hochmachen ist sehr un-smooth"). max-height auf 0
   * nimmt trotzdem keinen sichtbaren Platz weg -- derselbe Effekt wie
   * display:none, nur transitionierbar. prefers-reduced-motion respektiert
   * (N-104 sinngemaess: nichts erzwingen, was jemand bewusst abgeschaltet hat).
   */
  .warenkorb-inhalt {
    display: block;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: max-height .28s ease, opacity .2s ease;
  }
  .warenkorb.warenkorb-offen .warenkorb-inhalt {
    max-height: 70vh;
    opacity: 1;
    overflow-y: auto;
    pointer-events: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: .75rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .warenkorb-inhalt { transition: none; }
  }

  /* Pfeil zeigt an, wohin ein Antippen fuehrt: nach oben = "wird sich
     oeffnen", nach unten = "wird sich schliessen". */
  .warenkorb-klapp-icon svg { transform: rotate(-90deg); }
  .warenkorb.warenkorb-offen .warenkorb-klapp-icon svg { transform: rotate(90deg); }

  /* Kategorien als eine einzeilige, seitlich scrollbare Leiste statt
     mehrzeilig umzubrechen -- jede zusaetzliche Zeile hier geht direkt vom
     ohnehin knappen Platz fuer das Artikelraster ab (gleiches Prinzip wie
     .admin-seitenleiste weiter unten). */
  .kategorie-reiter {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: .15rem;
    margin-bottom: .85rem;
  }
  .kategorie-reiter::-webkit-scrollbar { display: none; }
  .kategorie-reiter .taste { flex-shrink: 0; min-height: 44px; padding: .4rem 1rem; font-size: 1rem; }

  /*
   * Zweispaltig wie auf dem Tablet (Rueckmeldung: "man kann ruhig mobil auch
   * zweispaltig lassen"), aber deutlich zurueckgenommen: flachere Kacheln,
   * kleinere Schrift, engere Abstaende. Der Preis steht als ruhige zweite
   * Zeile unter dem Namen statt gleichrangig daneben.
   */
  .artikel-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .artikel-kachel {
    min-height: 66px;
    gap: .15rem;
    font-size: 1rem;
    line-height: 1.3;
    padding: .55rem .65rem;
    border-radius: var(--radius-klein);
    border-top-width: 3px;
  }
  .artikel-kachel .preis { font-size: .85rem; }
  .artikel-kachel.hat-bild { padding-top: .45rem; }
  .kachel-bild { height: 56px; }
  .kachel-menge { top: .3rem; right: .3rem; min-width: 1.35rem; font-size: .72rem; padding: 0 .3rem; }
}

/* ------------------------------------------------------------------ */
/* Verwaltungslisten: Kopfzeile, Chips, eingeklappte Formulare          */

.seiten-kopf { display: flex; align-items: baseline; gap: .75rem; }
.seiten-kopf h1 { margin-bottom: 0; }

.zaehlchip {
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
  border-radius: 999px;
  padding: .1rem .6rem;
  font-size: .85rem;
  font-weight: 700;
}

.anlege-leiste {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.anlege-leiste .formular-feld { margin-bottom: 0; flex: 1 1 260px; }
.anlege-leiste .hinweis { flex: 1 1 100%; margin: 0; font-size: .82rem; }

tr.ist-inaktiv { opacity: .62; }

/* Kurzes Hervorheben nach dem Sprung von einem QR-Code der Strichliste (siehe verwaltung.js, Abschnitt 12). */
tr.zeile-angesprungen { background: var(--farbe-warnung-flaeche); transition: background 1.5s ease; }

.namens-form { display: inline-flex; align-items: center; gap: .4rem; }
.namens-form input {
  font-size: .95rem;
  font-weight: 700;
  max-width: 16rem;
}

.code-form { display: inline-flex; align-items: center; gap: .4rem; }
.code-form input { width: 5.5rem; text-align: center; letter-spacing: .1em; }

/* Kompaktvariante der Taste fuer Listen mit vielen Zeilen. */
.taste-klein {
  min-height: 34px;
  min-width: auto;
  font-size: .82rem;
  font-weight: 600;
  padding: .25rem .7rem;
  border-width: 1px;
  border-radius: var(--radius-klein);
  box-shadow: none;
}

/* Rollen als Chips statt Aufzaehlung mit Buttons darunter. */
.chip-liste { display: flex; flex-wrap: wrap; gap: .5rem; }

/*
 * "Bezeichnung · Event" kann deutlich laenger sein als eine
 * Rollenbezeichnung allein -- eine feste Pillenform (frueher
 * border-radius: 999px, alle Angaben in einer Zeile) verzerrte den Chip
 * dann zu einer hohen Ellipse, sobald der Bereichstext umbrach. Rolle
 * und Bereich stehen deshalb je in eigener Zeile, Loeschen-Knopf darunter.
 */
.chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .2rem;
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
  border-radius: var(--radius-klein);
  padding: .5rem .6rem;
  font-size: .85rem;
  max-width: 100%;
}

.chip-bereich { color: var(--farbe-text-dezent); line-height: 1.3; }
.chip-inaktiv { background: var(--farbe-warnung-flaeche); color: var(--farbe-warnung); padding: .25rem .8rem; }

/*
 * Rollenuebersicht in der Benutzerliste: ein Abzeichen je Rolle stapelte
 * sich bei mehreren Rollen pro Person zu einer sehr hohen Zeile (ein
 * Abzeichen pro Zeile, da die Spalte schmaler ist als ein einzelnes
 * Abzeichen), und der Bereich stand nur versteckt hinter einem Aufklapper
 * -- "diese grossen Zeilen sind bloed". Rolle+Bereich stehen jetzt direkt
 * als flieszender Text, kommagetrennt: Text umbricht platzsparender als
 * einzeln umbrechende Abzeichen. Der Aufklapper bleibt nur fuer den
 * Entziehen-Knopf.
 */
.rollen-zeile { margin: 0 0 .3rem; line-height: 1.5; }

.rollen-detailliste {
  position: absolute;
  z-index: 10;
  width: max-content;
  max-width: 22rem;
  margin: .4rem 0 0;
  padding: .3rem .8rem;
  list-style: none;
  background: var(--farbe-flaeche-erhoben);
  border: 1px solid var(--farbe-rand);
  border-radius: 12px;
  box-shadow: var(--schatten);
  text-align: left;
}
.rollen-detailliste li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .55rem 0;
}
.rollen-detailliste li + li { border-top: 1px solid var(--farbe-rand-dezent); }
.rollen-detailliste .chip-bereich { display: block; font-size: .8rem; }

.chip-weg {
  border: none;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.chip-weg:hover { background: var(--farbe-gefahr); color: #fff; }

.rollen-zuweisung { margin-top: .9rem; }

.rollen-zuweisung > summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--farbe-primaer);
  width: fit-content;
  list-style-position: inside;
}

.rollen-zuweisung[open] > summary { margin-bottom: .75rem; }
.rollen-zuweisung .formular-zeile { padding-top: .25rem; border-top: 1px solid var(--farbe-rand-dezent); }

/* Jahresgruppen in der Eventliste. */
.jahres-gruppe { margin-bottom: 2rem; }

.jahres-kopf {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.15rem;
  margin: 0 0 .5rem;
  padding-bottom: .35rem;
  border-bottom: 2px solid var(--farbe-primaer-flaeche);
}

.chip-aktuell { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); padding: .2rem .7rem; }

/* Status als farbiges Etikett statt nacktem Wort -- in einer langen Liste
   sofort erkennbar, ohne dass man jede Zeile lesen muss. */
.status-chip {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .8rem;
  font-weight: 600;
  background: var(--farbe-flaeche);
  color: var(--farbe-text-dezent);
}
.status-aktiv { background: var(--farbe-erfolg-flaeche); color: var(--farbe-erfolg); }
.status-geplant { background: var(--farbe-primaer-flaeche); color: var(--farbe-primaer-dunkel); }
.status-abgeschlossen { background: var(--farbe-flaeche); color: var(--farbe-text-dezent); }

/* Hinweisbox (HFShop\Support\Tipp) -- dieselbe Wegklick-Optik wie .chip-weg. */
.tipp {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--farbe-primaer-flaeche);
  color: var(--farbe-primaer-dunkel);
  border-radius: var(--radius-klein);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
}
.tipp p { margin: 0; flex: 1; }
.tipp-weg {
  border: none;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: inherit;
  border-radius: 50%;
  width: 1.4rem;
  height: 1.4rem;
  min-width: 1.4rem;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.tipp-weg:hover { background: var(--farbe-gefahr); color: #fff; }

/* Dashboard-Kennzahlenzeile (Verwaltungsuebersicht). */
.kennzahlen-liste { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: 1.5rem; }
.kennzahlen-liste .karte { display: flex; flex-direction: column; gap: .2rem; }
.kennzahl { font-size: 2rem; font-weight: 700; color: var(--farbe-primaer-dunkel); }
.kennzahl-klein { font-size: 1.1rem; }

/* Warnkarten sind klickbare Links, nicht nur Text -- direkter Sprung zum
   fehlenden Einrichtungsschritt. */
.warnkarte {
  display: block;
  color: var(--farbe-warnung);
  text-decoration: none;
  font-weight: 600;
}
.warnkarte:hover { text-decoration: underline; }

/* Schritt-Kopfzeile der gefuehrten Einrichtung (templates/einrichten/*). */
.schritt-anzeige {
  color: var(--farbe-primaer);
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0 0 .3rem;
}

.checkliste-zeile { display: block; margin-bottom: .5rem; }

/* Kontextzeile in den spaeteren Schritten des Artikel-Assistenten, damit die
   Angaben aus Schritt 1 nicht "verschwunden" wirken. */
.artikel-zusammenfassung {
  color: var(--farbe-text-dezent);
  font-size: .95rem;
  margin: 0 0 1rem;
}

/* Grosse, unuebersehbare Anzeige des einmaligen Anmeldecodes (Abschluss von
   „Neuer Benutzer"). */
.anmeldecode-gross {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
  margin: .5rem 0;
  color: var(--farbe-primaer-dunkel);
}

/*
 * Bestand-Schnellerfassung fuer kombinationspflichtige Artikel (Größe ×
 * Farbe): eine Zahl je Zelle statt eines eigenen Bewegungs-Formulars pro
 * Kombination. Feste, schmale Spaltenbreite haelt das Raster auch bei
 * vielen Farben ueberschaubar; .abschnitt sorgt schon fuer den
 * Horizontal-Scroll, falls es trotzdem nicht passt.
 */
.bestandsraster th, .bestandsraster td { text-align: center; white-space: nowrap; }
.bestandsraster th:first-child, .bestandsraster td:first-child { text-align: left; }
.raster-feld { width: 4.5rem; text-align: center; padding: .4rem .3rem; }

/* Größe/Farbe-Aufschlüsselung als eigene, volle Tabellenbreite nutzende
   Zeile unter dem jeweiligen Artikel, statt in eine schmale Spalte
   gequetscht (Rückmeldung: "wie ne separate Zeile drunter"). */
.bestand-detailzelle { background: var(--farbe-flaeche); padding: .6rem 1rem; }
tr[data-kombinationsdetail-zeile] { border-bottom: 1px solid var(--farbe-rand-dezent); }

/* Pivot "Bestand -- alle Verkaufsstellen": Bestand/Warnschwelle/Status je
   Verkaufsstelle als gruppierte Spalten (Rueckmeldung: "weitere Spalten
   hinzufuegen mit jeweils uebergeordneten Spalten mit den jeweiligen
   Verkaufsstellen"). Ein linker Rahmen an der ersten Spalte jeder Gruppe
   trennt die Verkaufsstellen optisch, auch beim Drucken. */
/* Rollen-/Rechte-Matrix unter /benutzer/rollen: viele schmale Ja/Nein-Spalten,
   deshalb zentriert und mit ruhiger erster Spalte als Ankerpunkt. */
.rechte-matrix th.zahl, .rechte-matrix td.zahl { text-align: center; }
.rechte-matrix tbody th { font-weight: 600; text-transform: none; letter-spacing: 0; background: none; }
.rechte-ja { color: var(--farbe-erfolg); display: inline-flex; }
.rechte-ja svg { width: 1.1rem; height: 1.1rem; }
.rechte-nein { color: var(--farbe-text-dezent); }

.spaltengruppe-kopf { text-align: center; }
.spaltengruppe-grenze { border-left: 1px solid var(--farbe-rand); }
/* Kompakte Pivot-Ansicht ohne eigene Warnschwellen-/Status-Spalte (Rueckmeldung:
   "status und warnschwelle kannst du rauslassen") -- die Menge selbst faerbt
   sich stattdessen ein, wenn sie unter der Warnschwelle liegt. */
.bestand-knapp { color: var(--farbe-warnung); font-weight: 700; }

/* Bestand direkt in der Zelle bearbeiten, ohne die Seite neu zu laden
   (Rückmeldung: "kann man auch iwo den Bestand editieren? cool wäre direkt
   in der Bestand Tabelle"). */
.bestand-inline-hinweis { padding: 0 1.2rem .8rem; margin: 0; }
.bestand-menge-editierbar {
  cursor: pointer;
  text-decoration: underline dotted var(--farbe-rand);
  text-underline-offset: .2rem;
}
.bestand-menge-editierbar:hover { color: var(--farbe-primaer); }
.bestand-menge-editierbar input {
  width: 4.5rem;
  text-align: right;
  font: inherit;
  padding: .15rem .3rem;
  border: 1px solid var(--farbe-primaer);
  border-radius: var(--radius-klein);
}
.bestand-menge-editierbar.bestand-speichert { opacity: .6; cursor: wait; }

/* Deaktivieren-Knopf und Raster-Link/Bewegung-Aufklapper stehen im
   selben rechten Zellenbereich untereinander (Rueckmeldung: "bestand
   vorübergehend auf 0 gesetzt werden kann"). */
#bestand-tabelle td.rechts form { margin: 0 0 .4rem; }

/* Nur beim Drucken sichtbarer Zeitstempel, da die Kopfzeile (mit Datum
   nirgends sonst) fuer den Ausdruck ausgeblendet wird. */
.druck-stand { display: none; }

/*
 * Druckansicht der Verwaltung (Rueckmeldung: "den ganzen Bestand insgesamt
 * tabellarisch und uebersichtlich drucken", "kannst du die pdf schöner
 * machen"): Seitenleiste, Kopfzeile und alles rein Bedienende blenden sich
 * aus, die Tabelle bekommt die ganze Seitenbreite und bricht nicht mitten
 * in einer Zeile um. Etwas Seitenrand und print-color-adjust sorgen dafuer,
 * dass Status-Pillen und die Kombinationszeile beim Speichern als PDF
 * genauso farbig aussehen wie am Bildschirm statt nur als reiner Text.
 */
@media print {
  @page { margin: 1.5cm; size: A4 portrait; }

  .admin-seitenleiste,
  .admin-kopfzeile,
  .zurueck,
  input[type="search"],
  .taste,
  .kennzahl-gitter {
    display: none !important;
  }

  .admin-huelle { display: block; }
  body.bereich-verwaltung { background: #fff; padding: 0; }
  .admin-seitenkopf { border-bottom: 1px solid var(--farbe-rand); padding-bottom: .6rem; margin-bottom: .2rem; }
  .druck-stand { display: block; color: var(--farbe-text-dezent); font-size: .85rem; margin: 0 0 1rem; }
  .abschnitt { border: none; box-shadow: none; overflow: visible; margin: 0 0 1rem; }
  table { box-shadow: none; }
  /* Die Buchen-Spalte ist reine Bedienung ohne Aussagewert auf Papier. */
  #bestand-tabelle .rechts { display: none !important; }
  thead { display: table-header-group; }
  thead th { border-bottom: 2px solid var(--farbe-text); }
  tr { break-inside: avoid; }
  .status-punkt, .bestand-detailzelle, .status-punkt::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /*
   * Kompakterer Ausdruck der Pivot-Übersicht "alle Verkaufsstellen"
   * (Rückmeldung: "gerne auch die Abstände kleiner, damit nicht so viele
   * Seiten entstehen, alles kompakter, für A4 Hochformat, das hätte auch
   * Prio 1") -- kleinere Schrift und schmalere Zellen lassen deutlich mehr
   * Artikel je Seite zu, ohne die Tabelle fuer die Bildschirmansicht
   * anzufassen.
   */
  .bestand-alle-druck { font-size: .78rem; }
  .bestand-alle-druck th, .bestand-alle-druck td { padding: .3rem .5rem; }
  .bestand-alle-druck .artikel-bild-klein { width: 1.6rem; height: 1.6rem; }
  .bestand-alle-druck h2 { font-size: .95rem; margin: 0; }
  .bestand-alle-druck .abschnitt-kopf { padding: .5rem .7rem; }
}