/*
 * Feinschliff der Regie: Kompakt.
 *
 * Legt sich über regie-basis.css (dort stehen Aufbau und Maße) und bestimmt,
 * wie die Regie aussieht. Lädt nach der Basis — siehe den Kopf dort, warum das
 * am Dateinamen hängt.
 *
 * Leitgedanken:
 *   - Oben ein dunkler Balken in der Farbe der Anmeldeseite (--mila-dunkel).
 *     Er ist dasselbe Schwarzgrün, das ein Kunde als Erstes von backstage sieht,
 *     und er sagt zugleich, dass man in der Regie steht. Dafür gab es vorher
 *     einen Rahmen um die ganze Seite und eine Fahne unten links.
 *   - Darunter ein kühles Hellgrau als Grund und weiße Flächen mit einer feinen
 *     Linie. Kein Schatten trennt, eine Linie trennt. Vorher schwammen weiße
 *     Karten auf Beige — vier Prozent Unterschied und ein weicher Schatten.
 *   - Dicht gesetzt: kleinere Radien, niedrigere Zeilen, eine Überschrift, die
 *     nicht mehr den halben Bildschirm braucht. Die Seiten, auf denen wirklich
 *     gearbeitet wird, haben zwanzig Zeilen und fünfzehn Spalten.
 *   - Farbe sparsam: die eine Hauptaktion je Seite in der Hausfarbe, der Rest
 *     neutral.
 *
 * Die Küchenansicht bleibt außen vor: Dort dürfen die Kacheln bunt und
 * kontraststark sein, damit unter Zeitdruck alles sofort erkennbar ist.
 */

body.regie {
  /* Die Schrift des Hauses für backstage — siehe @font-face in application.css.
     Nur hier, nicht auf :root: Die Gästeseiten behalten ihre Systemschrift. */
  --mila-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Die Hauswerte, kühl.

     :root trägt Creme und Oliv — für die Gästeseiten, die Website, die
     Reservierung. Regie und Tablet gehören dem Team und haben seit dem schwarzen
     Balken einen kühlen Grund. Solange nur die Fläche grau war, holte sich alles
     darin seine Farbe weiter aus den warmen Werten: Linien, Nebenflächen, das
     Grau der kleinen Schrift. Es sah beige aus, obwohl kein Beige mehr dastand.
     Deshalb werden hier die Werte selbst umgestellt und nicht Stelle für Stelle. */
  --mila-bg: #f2f3f4;
  --mila-surface: #ffffff;
  --mila-surface-soft: #eceef0;
  --mila-text: #191c1e;
  --mila-text-soft: #50575b;
  --mila-text-lead: #3d4447;
  --mila-line: #dcdfe2;
  --mila-shadow: 0 1px 2px rgba(15, 20, 18, 0.05), 0 6px 18px rgba(15, 20, 18, 0.05);
  --mila-shadow-lifted: 0 18px 50px rgba(15, 20, 18, 0.22);

  --m-radius: 8px;
  --m-radius-sm: 6px;
  --m-grund: #f2f3f4;
  --m-line: #dcdfe2;
  --m-line-soft: #e9ecee;
  --m-surface: #fff;
  --m-hover: #f6f7f8;
  --m-text: #191c1e;
  --m-text-soft: #50575b;
  /* Nicht heller: Auf dem grauen Grund hält #646b6f noch 4,9:1 — genug für die
     kleinen Zeilen unter den Überschriften. */
  --m-text-faint: #646b6f;
  --m-shadow: none;
  --m-overlay: 0 2px 6px rgba(15, 20, 18, 0.08), 0 16px 40px rgba(15, 20, 18, 0.16);
  --m-ease: 160ms cubic-bezier(0.32, 0.72, 0, 1);

  /* Der Balken. */
  --m-balken: var(--mila-dunkel, #15170f);
  --m-balken-tinte: #f2f3ee;
  --m-balken-leise: rgba(242, 243, 238, 0.64);
  --m-balken-flaeche: rgba(255, 255, 255, 0.09);
  --m-balken-linie: rgba(255, 255, 255, 0.16);

  background: var(--m-grund);
  color: var(--m-text);
  font-family: var(--mila-font);
  -webkit-font-smoothing: antialiased;
}

/* Kopfzeile: der dunkle Balken. ---------------------------------------------

   Deckend statt Milchglas: Unter einem dunklen Glas schimmerte der Inhalt als
   grauer Schleier durch. Der Innenabstand bleibt der der Stage, damit die
   Wortmarke beim Wechsel nicht springt — dicht wird der Inhalt, nicht der
   Balken. */

body.regie .admin-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--m-balken);
  color: var(--m-balken-tinte);
  border-bottom: 0;
}

body.regie .admin-logo__mark {
  letter-spacing: -0.03em;
  color: var(--m-balken-tinte);
}

body.regie .admin-logo__sub {
  letter-spacing: 0.14em;
  color: var(--m-balken-leise);
}

/* Die Wortmarke auf dunklem Grund, wie auf der Anmeldeseite: "back" tritt über
   sein Gewicht zurück, nicht über eine zweite Farbe.

   Für jede Wortmarke im Balken und nicht nur für die im Wechselknopf: Wer nur
   ein Modul hat — das iPhone etwa —, bekommt gar keinen Knopf, sondern die
   schlichte Wortmarke (siehe shared/_bereichswechsel). Die stand dann schwarz
   auf schwarz. */
body.regie .admin-header .produkt-signatur__back {
  color: inherit;
  opacity: 0.6;
}

body.regie .admin-header .produkt-signatur__stage {
  color: inherit;
}

body.regie .admin-nav__link {
  padding: 0.38rem 0.75rem;
  border-radius: var(--m-radius-sm);
  color: var(--m-text-soft);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-nav__link:hover {
  background: var(--m-hover);
  color: var(--m-text);
}

body.regie .admin-nav__link--active {
  background: #eceef0;
  color: var(--m-text);
  font-weight: 600;
}

body.regie .admin-header .admin-nav__link {
  color: var(--m-balken-leise);
}

body.regie .admin-header .admin-nav__link:hover,
body.regie .admin-header .admin-nav__link--active {
  background: var(--m-balken-flaeche);
  color: var(--m-balken-tinte);
}

/* Der Weg auf die Stage muss aufs Haar so sitzen wie sein Gegenstück dort
   (.kitchen-nav__wechsel), sonst springt er beim Wechsel. Nur die Farbe gehört
   dem Balken. */
body.regie .admin-nav__link.admin-nav__wechsel {
  padding: 0.42rem 0.85rem;
  border-radius: 10px;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--m-balken-tinte);
}

/* Glocke, Konto und Modulwechsel: Die Knöpfe gehören dem Balken, ihre Felder
   nicht. Die Felder öffnen sich über der hellen Seite und erben sonst die helle
   Schrift des Balkens — weiß auf weiß. */
body.regie .admin-header .glocke__knopf,
body.regie .admin-header .konto__knopf,
body.regie .admin-header .bereichswechsel__knopf {
  color: var(--m-balken-leise);
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-header .glocke__knopf:hover,
body.regie .admin-header .glocke[open] .glocke__knopf,
body.regie .admin-header .konto__knopf:hover,
body.regie .admin-header .konto[open] .konto__knopf,
body.regie .admin-header .bereichswechsel__knopf:hover,
body.regie .admin-header .bereichswechsel[open] .bereichswechsel__knopf {
  background: var(--m-balken-flaeche);
  color: var(--m-balken-tinte);
}

body.regie .admin-header .bereichswechsel__knopf {
  color: var(--m-balken-tinte);
}

body.regie .admin-header .bereichswechsel__pfeil {
  color: var(--m-balken-leise);
}

body.regie .admin-header .glocke__panel,
body.regie .admin-header .konto__panel,
body.regie .admin-header .bereichswechsel__panel {
  color: var(--m-text);
  border-color: var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-overlay);
}

/* Knöpfe, die im Balken stehen: eine Kontur statt einer Fläche. */
body.regie .admin-header__account .admin-button--quiet {
  background: transparent;
  border-color: var(--m-balken-linie);
  color: var(--m-balken-tinte);
  font-weight: 600;
}

body.regie .admin-header__account .admin-button--quiet:hover {
  background: var(--m-balken-flaeche);
  border-color: rgba(255, 255, 255, 0.32);
  color: var(--m-balken-tinte);
}

/* Zweite Zeile: hell und flach. ---------------------------------------------

   Sie steht im selben <header> wie der Balken und erbt dessen helle Schrift —
   deshalb setzt sie ihre eigene. */

body.regie .admin-subheader {
  border-top: 0;
  border-bottom: 1px solid var(--m-line);
  background: var(--m-surface);
  color: var(--m-text);
}

body.regie .admin-subheader__inner {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

body.regie .admin-subheader__titel {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  letter-spacing: -0.02em;
}

body.regie .admin-subnav__link {
  padding: 0.3rem 0.7rem;
  border-radius: var(--m-radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-subnav__link:hover {
  background: var(--m-hover);
}

body.regie .admin-subnav__link--active {
  background: #eceef0;
  box-shadow: none;
  color: var(--m-text);
  font-weight: 600;
}

body.regie .stage-switch {
  border-radius: var(--m-radius);
  background: #eef0f1;
}

body.regie .stage-switch__tab {
  min-height: 32px;
  padding: 0.22rem 0.8rem;
  border-radius: var(--m-radius-sm);
  font-size: 0.88rem;
}

body.regie .stage-switch__tab--active {
  box-shadow: 0 0 0 1px var(--m-line);
}

body.regie .stage-switch__tab--active::after {
  bottom: 0.2rem;
}

/* Seitenkopf: Die Überschrift sagt, wo man ist — sie muss dafür nicht den
   halben Bildschirm füllen. ------------------------------------------------ */

body.regie .admin-main {
  padding-top: clamp(1rem, 2.4vw, 1.75rem);
}

body.regie .admin-page__head {
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

body.regie .admin-page__head h1 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

body.regie .admin-page__lead {
  margin-top: 0.25rem;
  color: var(--m-text-faint);
  font-size: 0.9rem;
}

/* Knöpfe: neutral, nur die Hauptaktion trägt Farbe. ------------------------- */

body.regie .admin-button {
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
  color: var(--m-text);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: none;
  transition: background var(--m-ease), border-color var(--m-ease), transform var(--m-ease);
}

body.regie .admin-button:hover {
  background: var(--m-hover);
  border-color: #c5cacf;
  color: var(--m-text);
}

body.regie .admin-button:active {
  transform: scale(0.98);
}

body.regie .admin-button--primary {
  background: var(--mila-accent);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
  box-shadow: none;
}

body.regie .admin-button--primary:hover {
  background: color-mix(in srgb, var(--mila-accent) 84%, #000);
  border-color: transparent;
  color: #fff;
}

body.regie .admin-button--quiet {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--m-text-soft);
}

body.regie .admin-button--quiet:hover {
  background: #eceef0;
  border-color: transparent;
}

body.regie .admin-button--small {
  min-height: 30px;
  padding: 0.22rem 0.6rem;
  font-size: 0.82rem;
}

body.regie .admin-button--danger:hover {
  background: rgba(178, 59, 59, 0.07);
  border-color: transparent;
  color: #b23b3b;
}

/* Filterzeile: eine Fläche mit Linie, wie die Karten. ----------------------- */

body.regie .admin-filter {
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: none;
}

body.regie .admin-label {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--m-text-faint);
}

body.regie .admin-input {
  min-height: 36px;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius-sm);
  background: var(--m-surface);
  font-size: 0.92rem;
  transition: border-color var(--m-ease), box-shadow var(--m-ease);
}

/* Der Fokus in der Hausfarbe — vorher Terrakotta, eine Farbe, die sonst nirgends
   in der Regie vorkommt. */
body.regie .admin-input:focus-visible {
  outline: 0;
  border-color: var(--mila-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mila-accent) 18%, transparent);
}

/* Tabellen: dicht, Trennung durch Haarlinien. -------------------------------- */

body.regie .admin-table-wrap {
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  box-shadow: none;
}

/* In einer Karte hat die Tabelle schon ihren Rand — ein zweiter daneben sähe
   aus wie ein Kasten im Kasten. */
body.regie .admin-card .admin-table-wrap {
  border: 0;
  border-radius: 0;
}

body.regie .admin-table thead th {
  padding: 0.5rem 0.9rem;
  background: transparent;
  border-bottom: 1px solid var(--m-line);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--m-text-faint);
}

body.regie .admin-table th,
body.regie .admin-table td {
  padding: 0.5rem 0.9rem;
  border-bottom: 1px solid var(--m-line-soft);
}

body.regie .admin-table tbody tr:last-child th,
body.regie .admin-table tbody tr:last-child td {
  border-bottom: 0;
}

body.regie .admin-table tbody tr {
  transition: background var(--m-ease);
}

body.regie .admin-table tbody tr:hover {
  background: var(--m-hover);
}

body.regie .admin-table__recipe {
  font-weight: 500;
}

body.regie .admin-list__link {
  font-weight: 500;
  transition: color var(--m-ease);
}

body.regie .admin-thumb {
  width: 52px;
  height: 40px;
  border-radius: var(--m-radius-sm);
  box-shadow: none;
}

/* Marken: eckig statt Pille. Eine Pille ist ein Knopf; eine Marke ist eine
   Angabe — und in einer dichten Tabelle liest sich die eckige Form ruhiger. */
body.regie .status-badge,
body.regie .onboarding-marke,
body.regie .bereichsmarke,
body.regie .stage-switch__aus {
  border-radius: 4px;
}

body.regie .status-badge {
  padding: 0.14rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

body.regie .status-badge--active {
  background: rgba(94, 138, 74, 0.13);
  color: #3f5f30;
}

body.regie .status-badge--draft {
  background: rgba(200, 150, 50, 0.15);
  color: #7a5813;
}

body.regie .status-badge--archived {
  background: #eceef0;
  color: var(--m-text-faint);
}

/* Zeilenaktionen erscheinen erst beim Überfahren — ruhigeres Gesamtbild. ---- */

body.regie .admin-row-actions {
  gap: 0.3rem;
  opacity: 0.55;
  transition: opacity var(--m-ease);
}

body.regie .admin-table tbody tr:hover .admin-row-actions,
body.regie .admin-table tbody tr:focus-within .admin-row-actions {
  opacity: 1;
}

body.regie .admin-menu__toggle {
  width: 30px;
  height: 30px;
  border-color: transparent;
  background: transparent;
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-menu__toggle:hover,
body.regie .admin-menu[open] .admin-menu__toggle {
  border-color: transparent;
  background: #eceef0;
  color: var(--m-text);
}

body.regie .admin-menu__panel {
  padding: 0.3rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: var(--m-overlay);
}

body.regie .admin-menu__item {
  border-radius: 5px;
  font-size: 0.88rem;
}

body.regie .admin-empty {
  border: 1px dashed var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  color: var(--m-text-faint);
}

/* Kennzahlen auf der Übersicht -------------------------------------------- */

body.regie .admin-stat {
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: none;
  transition: border-color var(--m-ease);
}

body.regie .admin-stat:hover {
  transform: none;
  border-color: #c5cacf;
  box-shadow: none;
}

body.regie .admin-stat__value {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

body.regie .admin-stat__label {
  font-weight: 600;
  font-size: 0.92rem;
}

body.regie .admin-stat__hint {
  color: var(--m-text-faint);
  font-size: 0.8rem;
}

/* Karten und Listen -------------------------------------------------------- */

body.regie .admin-card {
  margin-bottom: 1rem;
  padding: clamp(0.9rem, 1.6vw, 1.25rem);
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  box-shadow: none;
}

body.regie .admin-card__title {
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--m-text);
}

body.regie .admin-list__item {
  border-bottom: 1px solid var(--m-line-soft);
}

body.regie .admin-list__meta {
  color: var(--m-text-faint);
  font-size: 0.8rem;
}

/* Erklärtexte treten zurück: Sie sind für den, der fragt, nicht für den, der
   arbeitet. */
body.regie .admin-hint {
  max-width: 72ch;
  color: var(--m-text-faint);
  font-size: 0.8rem;
  line-height: 1.45;
}

body.regie .admin-hint code {
  background: #eceef0;
  border-radius: 4px;
}

/* Formulare ---------------------------------------------------------------- */

body.regie .admin-nested__row {
  border: 1px solid var(--m-line-soft);
  border-radius: var(--m-radius-sm);
  background: #f8f9fa;
}

body.regie .admin-remove {
  border-color: transparent;
  background: transparent;
  color: var(--m-text-faint);
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-remove:hover {
  border-color: transparent;
  background: rgba(178, 59, 59, 0.09);
}

body.regie .admin-form__footer {
  position: sticky;
  bottom: 0;
  /* Speichern bleibt in Reichweite, auch in langen Anleitungen. */
  padding: 0.75rem 0;
  margin-top: 0.5rem;
  background: linear-gradient(to bottom, rgba(242, 243, 244, 0), var(--m-grund) 35%);
}

body.regie .admin-preview img {
  border-radius: var(--m-radius);
  box-shadow: none;
}

body.regie .admin-errors {
  border: 1px solid #ecd0a3;
  border-radius: var(--m-radius-sm);
  background: #fbf3e6;
  color: #72500f;
}

/* Ziehgriff und Rückmeldung beim Sortieren --------------------------------- */

body.regie .admin-handle {
  border-radius: var(--m-radius-sm);
  color: var(--m-text-faint);
  transition: background var(--m-ease), color var(--m-ease);
}

body.regie .admin-handle:hover {
  border-color: transparent;
  background: #eceef0;
  color: var(--m-text);
}

body.regie .admin-table--sortable tbody tr.is-dragging {
  background: var(--m-surface);
  box-shadow: var(--m-overlay);
}

body.regie .admin-sort-status {
  color: var(--m-text-faint);
  font-size: 0.8rem;
}

/* Meldungen ---------------------------------------------------------------- */

body.regie .flash {
  padding: 0.65rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--m-radius-sm);
  font-weight: 500;
  box-shadow: none;
}

body.regie .flash--notice {
  /* Dieselben Werte wie nebenan in regie-basis: Sie lagen um eine Nuance
     auseinander, was niemand sehen, aber jeder pflegen musste. */
  background: #edf7ee;
  border-color: #bcdcc7;
  color: #1e5a36;
}

body.regie .flash--alert {
  background: #fbf3e6;
  border-color: #ecd0a3;
  color: #72500f;
}

@media (prefers-reduced-motion: reduce) {
  body.regie * {
    transition-duration: 0.01ms !important;
  }
}

/* Die Mitarbeiter der Academy: zwanzig Zeilen, fünfzehn Spalten. Bei der Höhe
   einer gewöhnlichen Tabellenzeile sieht man vier Personen und scrollt für den
   Rest — und genau darum geht es hier nicht. Enger gesetzt passen alle auf einen
   Blick, und wer wo steht, liest man in einem Zug.

   Mit "body.regie" davor, weil die Maße der Tabellen ein paar Zeilen weiter oben
   ebenso gesetzt werden: Ohne das Präfix verliert die engere Regel. */
body.regie .mitarbeitertabelle th,
body.regie .mitarbeitertabelle td {
  padding: 0.35rem 0.7rem;
}

body.regie .mitarbeitertabelle thead th {
  padding: 0.45rem 0.7rem;
}

body.regie .mitarbeitertabelle tbody th,
body.regie .mitarbeitertabelle tbody td {
  font-size: 0.88rem;
}

/* Die Rolle unter dem Namen tritt zurück: Sie beantwortet eine Nachfrage, nicht
   die erste Frage. */
body.regie .mitarbeitertabelle tbody th .admin-list__meta {
  display: block;
  margin-top: 0;
  font-size: 0.72rem;
  line-height: 1.2;
}

body.regie .mitarbeitertabelle .projekttabelle__spalte {
  min-width: 6.5rem;
}

/* Eine geschriebene Antwort darf die Zeile nicht in die Höhe treiben: In der
   Übersicht zählt, dass etwas dasteht — gelesen wird sie bei der Person. */
body.regie .mitarbeitertabelle .projekttabelle__antwort {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  max-width: 11rem;
  font-size: 0.8rem;
}

body.regie .mitarbeitertabelle__frei {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.68rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* Die Mappe hängt neben der Büroklammer: dasselbe Format, dieselbe Zurückhaltung. */
body.regie .mitarbeitertabelle__mappe {
  margin-left: 0.35rem;
  color: var(--m-text-faint);
  font-size: 1.05rem;
  text-decoration: none;
}

body.regie .mitarbeitertabelle__mappe:hover {
  color: var(--mila-accent);
}

/* Die Fußleiste in einer Karte klebt nicht.

   Als Leiste unter einem langen Formular soll sie am unteren Rand stehen
   bleiben, mit einem Verlauf in der Farbe des Grunds. In einer weißen Karte legte
   derselbe Verlauf einen grauen Balken hinter den Knopf — und über den Satz
   darüber. */
body.regie .admin-card .admin-form__footer {
  position: static;
  margin-top: 0.75rem;
  padding: 0;
  background: none;
}

/* Vorschaubild ohne Foto: grau wie der Grund, nicht beige. */
body.regie .admin-thumb {
  background: #eceef0;
}

/* Die Legende der Personalplanung: Ein Eintrag bricht nicht in sich um. Vorher
   stand „bis 1 — dünn“ als drei Zeilen neben seinem Farbfeld. */
body.regie .rasterlegende__eintrag {
  white-space: nowrap;
}

/* Filterzeilen (Bereich, Lieferant, Fach): kleiner und eckig wie die Marken. */
body.regie .produktfilter {
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom-color: var(--m-line-soft);
}

body.regie .produktfilter--lieferant,
body.regie .produktfilter--fach {
  align-items: baseline;
}

/* Direkt unter einem Hinweis klebte die Zeile am Satz darüber. */
body.regie .admin-hint + .produktfilter {
  margin-top: 0.6rem;
}

body.regie .produktfilter__weg {
  padding: 0.22rem 0.6rem;
  border-color: var(--m-line);
  border-radius: var(--m-radius-sm);
  font-size: 0.82rem;
}

body.regie .produktfilter__zahl {
  border-radius: 4px;
  background: #eceef0;
}

body.regie .produktfilter__titel {
  font-size: 0.7rem;
  color: var(--m-text-faint);
}

/* Die Kategorieleiste über den Anleitungen: dieselben Farben wie auf dem
   Tablet, aber in der Größe einer Arbeitsfläche und nicht eines Fingers. */
body.regie .kategorieleiste {
  gap: 0.35rem;
  margin-bottom: 1rem;
}

body.regie .kategorieleiste__knopf {
  padding: 0.28rem 0.7rem;
  border-color: var(--m-line);
  border-radius: var(--m-radius-sm);
  font-size: 0.84rem;
}

body.regie .kategorieleiste__knopf--farbig {
  border-color: transparent;
}

body.regie .kategorieleiste__knopf--aktiv {
  box-shadow: 0 0 0 2px var(--m-grund), 0 0 0 3.5px var(--kategorie-farbe, var(--mila-accent));
}

/* Die Aufgabenseite: Tagesrahmen und Wochentage in den Radien der übrigen
   Flächen — mit 14 Pixeln standen sie rund zwischen eckigen Karten. */
body.regie .aufgabentag,
body.regie .aufgabenwoche__tag {
  border-radius: var(--m-radius);
}

/* Die stehende Namensspalte braucht eine deckende Fläche — sonst scrollt die
   Tabelle sichtbar durch sie hindurch. Mit "body.regie" davor, weil die Regel
   für alle Kopfzellen weiter oben den Grund auf durchsichtig setzt. */
body.regie .zugangstabelle th[scope="row"],
body.regie .zugangstabelle thead th:first-child {
  background: var(--m-surface);
  box-shadow: 1px 0 0 var(--m-line-soft);
}

body.regie .zugangstabelle tbody tr:hover th[scope="row"] {
  background: var(--m-hover);
}

/* Am Telefon ---------------------------------------------------------------

   Das iPhone hat genau eine Aufgabe: bestellen. Es kommt hier nur mit dem Modul
   "Bestellungen" herein — was unten in der Medienabfrage steht, betrifft
   deshalb in der Praxis diesen einen Weg. Tablet und Rechner bleiben, wie sie
   sind. */

/* Die Bereichszeile steht nicht nur oben im Balken, sondern auch mitten auf der
   Seite: als Überschrift über den Bestellungen, den Lieferanten und der
   Inventur. Dort ist sie kein Balken. Ein Balken spannt über die ganze Breite
   und holt seine Luft aus __inner — das fehlt an dieser Stelle, und übrig blieb
   ein weißer Streifen, der am Telefon an der Kante klebte. */
body.regie .admin-main .admin-subheader {
  padding: 0;
  border: 0;
  background: none;
}

@media (max-width: 30rem) {
  /* Bestellt wird am Telefon, gepflegt am Rechner: Die Lieferanten selbst
     anzulegen ist Schreibtischarbeit. Der Weg dorthin bleibt in der Regie — nur
     nicht auf dem Bildschirm, auf dem er nichts zu suchen hat. */
  body.regie .admin-subheader__wege {
    display: none;
  }

  /* Der Name bekommt eine eigene Zeile, damit Menge, "Ändern" und "Streichen"
     darunter nebeneinander Platz haben. Vorher rutschte "Streichen" allein in
     die dritte Zeile und sah aus, als gehörte es zur nächsten Position. */
  body.regie .bestellzeile__name {
    flex-basis: 100%;
  }

  /* Das Konto-Menü hängt sonst am Personensymbol und klappt nach links auf —
     das Symbol sitzt aber mitten in der Kopfzeile, und das Menü stand mit
     seinem linken Rand bei -18 Pixeln: Die Adresse war angeschnitten. Am
     Telefon hängt es deshalb am Fenster und nicht am Symbol. Möglich wird das,
     indem .konto seine eigene Bezugsfläche abgibt — dann greift das Menü auf
     die Kopfzeile zurück, die ohnehin über die ganze Breite geht. */
  body.regie .admin-header .konto {
    position: static;
  }

  body.regie .admin-header .konto__panel {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-width: none;
  }

  /* Ohne die seitliche Polsterung: Zusammen brauchen die beiden Knopfreihen
     345 Pixel, und 0,2 Pixel davon fraß genau dieses Polster — "Streichen"
     rutschte deshalb doch wieder in die dritte Zeile. Die Zeile steht schon im
     Rand der Seite, ein zweiter daneben bringt nichts. */
  body.regie .bestellzeile {
    padding-left: 0;
    padding-right: 0;
    column-gap: 0.6rem;
  }
}