/*
 * Regie (MILA.) — das Gerüst.
 *
 * Hier stehen Aufbau und Maße: Kopfzeile, Karten, Tabellen, Formulare. Wie es
 * aussieht — Grund, Linien, Radien, der dunkle Balken —, steht in
 * regie-feinschliff.css und legt sich darüber.
 *
 * Die Reihenfolge ist Absicht und hängt am Dateinamen: Rails lädt alle
 * Stylesheets alphabetisch, "regie-basis" vor "regie-feinschliff". Diese Datei
 * hieß früher "regie.css" und kam damit NACH dem Feinschliff — jede Regel mit
 * demselben Selektor gewann hier, und der Hintergrund blieb beige, obwohl der
 * Feinschliff längst Weiß setzte. Wer diese Datei umbenennt, prüft zuerst, wo
 * sie danach im Alphabet steht.
 */

body.regie {
  margin: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 16px;
  line-height: 1.55;
}

/* Hier standen ein Rahmen von sechs Pixeln um die ganze Seite und eine Fahne
   "Regie" unten links. Beides sagte: Du bearbeitest gerade. Das sagt jetzt der
   dunkle Balken oben — siehe regie-feinschliff.css. */

body.regie [hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kopfbereich -------------------------------------------------------------- */

.admin-header {
  background: var(--mila-surface);
  border-bottom: 1px solid var(--mila-line);
}

/* Ohne Höchstbreite und mit demselben Innenabstand wie .kitchen-header: Nur so
   steht die Wortmarke auf jedem Bildschirm an derselben Stelle. Zentriert man den
   Kopf, rückt sie auf breiten Monitoren nach rechts und springt beim Wechsel auf
   die Stage wieder nach links. Der Seiteninhalt darunter bleibt begrenzt. */
.admin-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
}

/* Maße identisch mit .kitchen-logo — beim Wechsel zwischen Regie und Stage soll
   die Wortmarke stehen bleiben, nicht springen. Die zweite Zeile bleibt hier
   leer, die Höhe wird trotzdem reserviert. */
.admin-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.05rem;
  /* Keine reservierte zweite Zeile mehr.
     
     Hier standen 3,875 rem, damit die Kopfzeile nicht springt, wenn unter der
     Marke eine zweite Zeile steht. Die gibt es nicht mehr — Marke und Block
     stehen nebeneinander in einer Zeile. Übrig blieben 26 Pixel Leere unter
     dem Schriftzug, und darunter fing die nächste Zeile an: Das sah aus, als
     hätte jemand etwas vergessen. */
  /* Feste Breite, damit der Knopf daneben in beiden Masken an derselben
     Stelle sitzt — „Stage“ ist minimal breiter als „Regie“. */
  min-width: 9.25rem;
  text-decoration: none;
  color: inherit;
}

.admin-logo__zeile {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}

/* Siehe .kitchen-logo__mark — dieselben Maße, dieselbe Zeilenhöhe. */
.admin-logo__mark {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.admin-logo__sub {
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.admin-nav {
  display: flex;
  /* Ohne dies streckt sich "Übersicht" auf die Höhe des Bereichsreglers daneben
     und die Schrift rutscht nach oben. */
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}

.admin-nav__link {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  color: var(--mila-text-soft);
  font-weight: 600;
  text-decoration: none;
}

.admin-nav__link:hover {
  background: var(--mila-surface-soft);
  color: var(--mila-text);
}

.admin-nav__link--active {
  background: var(--mila-accent);
  color: #fff;
}

/* Bereichswechsel: Küche, Bar, Service ------------------------------------- */

.admin-nav__trenner {
  align-self: center;
  width: 1px;
  height: 1.2rem;
  margin: 0 0.35rem;
  background: var(--mila-line);
}

/* Die Bereichsverwaltung ist Nebensache — sie tritt hinter die Bereiche zurück. */
.admin-nav__link--quiet {
  font-weight: 500;
  opacity: 0.75;
}

.admin-nav__link--quiet.admin-nav__link--active {
  opacity: 1;
}

/* Name und Produktmarke stehen ganz rechts — in jeder Ansicht an derselben
   Stelle. Bis eben schob sie die Leiste daneben dorthin (.admin-nav, flex: 1);
   wo die fehlt — in der Academy und bei den Projekten gibt es keine
   Nutzeransicht —, rutschten sie in die Mitte. Jetzt halten sie sich selbst
   dort, unabhängig davon, was links von ihnen steht. */
.admin-header__account {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-left: auto;
}

.admin-header__account form {
  margin: 0;
}

/* Zweite Ebene: der gewählte Bereich und sein Inhalt --------------------------- */

.admin-subheader {
  border-top: 1px solid var(--mila-line);
  background: var(--mila-surface-soft);
}

/* Siehe .admin-header__inner: bündig unter der Wortmarke, nicht zentriert. */
.admin-subheader__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.25rem;
  padding: 0.55rem clamp(1rem, 3vw, 2.5rem);
}

.admin-subheader__section {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.admin-subnav {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}

.admin-subnav__link {
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  color: var(--mila-text-soft);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
}

.admin-subnav__link:hover {
  background: var(--mila-surface);
  color: var(--mila-text);
}

.admin-subnav__link--active {
  background: var(--mila-surface);
  color: var(--mila-text);
  box-shadow: 0 1px 2px rgba(15, 20, 18, 0.08);
}

/* Zwei Einträge stehen offen, der Rest kommt auf Wunsch. */
.admin-mehr {
  margin-top: 0.35rem;
}

.admin-mehr__knopf {
  display: inline-block;
  padding: 0.35rem 0;
  color: var(--mila-accent);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.admin-mehr__knopf::-webkit-details-marker {
  display: none;
}

.admin-mehr[open] .admin-mehr__knopf {
  color: var(--mila-text-soft);
}

/* Trennt die Verwaltung von Passwort und Abmelden im Konto-Menü. */
.konto__trenner {
  margin: 0.15rem 0 0.5rem;
  border: 0;
  border-top: 1px solid var(--mila-line);
}

/* Der Rückweg aus einer Sicherung — selten gebraucht, deshalb zugeklappt. */
/* Die Sicherung am Fuß der Startseite.
 *
 * Sie betrifft alles auf einmal und wird vielleicht zweimal im Jahr gebraucht —
 * als Karte stand sie da wie eine Stage. Jetzt: viel Abstand nach oben, eine
 * Trennlinie, und darunter ein Block ohne Rahmen und ohne Schatten. Er ist da,
 * wenn man ihn sucht, und im Weg steht er niemandem. */
.sicherung {
  max-width: 34rem;
  margin-top: clamp(3.5rem, 9vw, 6rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--mila-line);
}

.sicherung__titel {
  margin: 0 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.sicherung__hinweis {
  margin: 0;
  color: var(--mila-text-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

.sicherung__weg {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin: 0.9rem 0 0;
}

.sicherung__laden {
  color: var(--mila-accent);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
}

.sicherung__laden:hover {
  text-decoration: underline;
}

.sicherung__umfang {
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

.sicherung-einspielen {
  margin-top: 1.25rem;
}

.sicherung-einspielen__form {
  display: grid;
  gap: 0.75rem;
  max-width: 34rem;
  margin-top: 0.6rem;
  justify-items: start;
}

/* Der Balken in der Fortschrittsübersicht — schmal genug für eine Tabellenzeile. */
.fortschrittszelle {
  display: grid;
  gap: 0.25rem;
  min-width: 9rem;
}

.fortschrittszelle__balken {
  overflow: hidden;
  height: 6px;
  border-radius: 999px;
  background: var(--mila-surface-soft);
}

.fortschrittszelle__fuellung {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--mila-ok-line);
}

.fortschrittszelle__text {
  font-size: 0.82rem;
  color: var(--mila-text-soft);
}

/* Mehrfachauswahl für Rollen und Anleitungen — große Flächen, kein Scrollfeld. */
.rollenwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.rollenwahl__feld {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  cursor: pointer;
}

.anleitungswahl {
  margin-top: 0.5rem;
}

.anleitungswahl__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.25rem 1.25rem;
  padding: 0.5rem 0 0.75rem;
}

/* Seitengerüst ------------------------------------------------------------- */

.admin-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.admin-page__head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
}

.admin-page__head h1 {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.01em;
}

/* Der Satz unter einer Überschrift wird gelesen — er erklärt den Bereich dem,
   der ihn zum ersten Mal aufmacht. Deshalb etwas größer als der übrige Text und
   in einem Grau, das noch Text ist und nicht schon Beiwerk. */
.admin-page__lead {
  margin: 0.45rem 0 0;
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--mila-text-lead, #48484d);
}

.admin-page__actions {
  display: flex;
  gap: 0.6rem;
}

.admin-page__actions form {
  margin: 0;
}

.admin-breadcrumb {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
}

.admin-breadcrumb a {
  color: var(--mila-text-soft);
}

/* Kennzahlen --------------------------------------------------------------- */

.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.75rem;
}

/* Kleiner als zuvor und sichtbar als Weg in den Bereich: Der Pfeil rückt beim
   Zeigen nach rechts, die Kontur färbt sich. */

/* Jede Stage trägt ihre Farbe auch hier: ein Streifen am oberen Rand und der Name
   in derselben Farbe wie später der Reiter. So findet man die Küche, ohne zu lesen. */
.admin-stat {
  position: relative;
  overflow: hidden;
}

.admin-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--buehnen-farbe, var(--mila-accent));
}

.admin-stat .admin-stat__label {
  color: var(--buehnen-farbe, var(--mila-text));
}

.admin-stat .admin-stat__pfeil {
  color: var(--buehnen-farbe, var(--mila-accent));
}

/* Keine Stage, also kein Streifen — die Kachel tritt neben die anderen zurück. */
.admin-stat--medien::before {
  display: none;
}

.admin-stat--medien .admin-stat__label {
  color: var(--mila-text-soft);
}

/* Abgeschaltete Stage: sichtbar, aber sichtbar aus. */
.admin-stat--aus {
  background: var(--mila-surface-soft);
}

.admin-stat--aus::before {
  background: var(--mila-line);
}

.admin-stat--aus .admin-stat__label {
  color: var(--mila-text-soft);
}

.admin-stat__aus {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--mila-line);
  color: var(--mila-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.admin-stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  background: var(--mila-surface);
  box-shadow: none;
  text-decoration: none;
  color: inherit;
  transition: border-color 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.admin-stat:hover {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

.admin-stat__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.admin-stat__label {
  font-size: 1.05rem;
  font-weight: 700;
}

.admin-stat__pfeil {
  color: var(--mila-accent);
  font-size: 1.05rem;
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.admin-stat:hover .admin-stat__pfeil {
  transform: translateX(3px);
}

.admin-stat__hint {
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

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

.admin-card {
  padding: clamp(1.1rem, 2vw, 1.6rem);
  margin-bottom: 1.25rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow);
}

/* Hebt eine einmalige Auskunft hervor, etwa den frisch erzeugten Passwortlink. */
.admin-card--hinweis {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

.admin-card__title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

/* Klappbare Karten: Die Überschrift ist der Schalter.
 *
 * Zugeklappt bleibt sie eine Zeile hoch — bei zwölf Zutaten war das Formular
 * sonst länger als der Bildschirm, obwohl man nur einen Schritt ändern wollte.
 * Das Dreieck zeigt, wohin es geht; die Zahl daneben sagt, was drinsteckt. */
summary.admin-card__title,
.feinheiten__titel,
.mailgruppe__titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.1rem 0;
  cursor: pointer;
  list-style: none;
}

summary.admin-card__title::-webkit-details-marker,
.feinheiten__titel::-webkit-details-marker,
.mailgruppe__titel::-webkit-details-marker {
  display: none;
}

summary.admin-card__title::before,
.feinheiten__titel::before,
.mailgruppe__titel::before {
  content: "›";
  display: inline-block;
  width: 0.8em;
  font-size: 1.2em;
  line-height: 1;
  opacity: 0.6;
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}

details[open] > summary.admin-card__title,
details[open] > .feinheiten__titel,
details[open] > .mailgruppe__titel {
  margin-bottom: 1rem;
}

details[open] > summary.admin-card__title::before,
details[open] > .feinheiten__titel::before,
details[open] > .mailgruppe__titel::before {
  transform: rotate(90deg);
}

summary.admin-card__title:focus-visible,
.feinheiten__titel:focus-visible,
.mailgruppe__titel:focus-visible {
  outline: 2px solid var(--mila-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Wie viel zugeklappt darunterliegt. */
.admin-card__anzahl {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
}

.admin-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.admin-list__item {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.admin-list__item:last-child {
  border-bottom: 0;
}

.admin-list__link {
  font-weight: 600;
  color: var(--mila-text);
  text-decoration: none;
}

.admin-list__link:hover {
  color: var(--mila-accent);
  text-decoration: underline;
}

.admin-list__meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--mila-text-soft);
  font-size: 0.86rem;
}

/* Ein Paar Deutsch/Englisch teilt sich eine Zeile — sie gehören zusammen, und
   untereinander wäre das Formular doppelt so lang. Auf schmalen Schirmen bricht
   es von selbst um. */
.admin-field-row--paar > .admin-field {
  flex: 1 1 240px;
  min-width: 0;
}

/* Schrittzeilen: Griff und laufende Nummer ------------------------------- */

.admin-nested__griff {
  align-self: center;
  padding: 0.35rem 0.2rem;
  color: var(--mila-text-soft);
  cursor: grab;
  touch-action: none;
  user-select: none;
}

/* Bei einer Aufzählung steht hier ein Punkt statt einer Zahl — dieselbe Lesart
   wie auf der Stage. Die Nummer behauptete sonst eine Reihenfolge, die es nicht
   gibt, und beim Überarbeiten sah es aus, als stünde sie so auch am Tablet.
   Die Zahl setzt nested_controller.js als Text; ausgeblendet wird sie über die
   Schriftgröße, damit das Zeichen darüber gelegt werden kann. */
.anleitungsform--punkte .admin-nested__nummer {
  font-size: 0;
}

.anleitungsform--punkte .admin-nested__nummer::before {
  content: "·";
  font-size: 1.4rem;
  line-height: 1;
}

.admin-nested__nummer {
  display: grid;
  place-items: center;
  align-self: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mila-accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-nested__row.is-greifend {
  opacity: 0.65;
  cursor: grabbing;
}

/* Ein Häkchen unter der Vorschau, nicht als eigener Block. */
.admin-check-row--schmal {
  margin-top: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
}

/* Sammelhaken über dem Formular ----------------------------------------- */

/* Eine Zeile, keine Karte: Der Haken ist wichtig genug für ganz oben, aber nicht
   wichtig genug für einen eigenen Block. */
.sammelhaken {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--mila-accent-soft);
  cursor: pointer;
}

.sammelhaken__box {
  flex: none;
  align-self: center;
}

.sammelhaken__titel {
  font-weight: 700;
  color: var(--mila-accent);
}

.sammelhaken__text {
  color: var(--mila-text-soft);
  font-size: 0.86rem;
}

/* Vorschaufenster über der Regie ----------------------------------------- */

.vorschau {
  width: min(1240px, 94vw);
  max-width: none;
  height: min(860px, 92vh);
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
  overflow: hidden;
}

.vorschau::backdrop {
  background: rgba(28, 22, 17, 0.62);
  backdrop-filter: blur(3px);
}

.vorschau__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--mila-line);
}

.vorschau__titel {
  margin: 0;
  font-weight: 700;
}

.vorschau__zu {
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--m-radius-sm, 10px);
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.vorschau__zu:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

/* Die Stage braucht ihre volle Höhe, sonst blättert der Pager falsch. */
.vorschau__rahmen {
  display: block;
  width: 100%;
  height: calc(100% - 57px);
  border: 0;
}

/* Kategorie in der Liste: Punkt in der Farbe, die sie auf der Stage trägt. */
.kategoriepunkt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.kategoriepunkt::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--kategorie-farbe);
}

/* Eine Kategorie am Stück durcharbeiten: die Pfeile über dem Namen. */
.anleitungswechsel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.35rem 0 0.15rem;
}

.anleitungswechsel__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--mila-border);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-accent);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}

.anleitungswechsel__pfeil:hover {
  border-color: var(--kategorie-farbe, var(--mila-accent));
}

/* Am Rand der Kategorie: sichtbar, aber ohne Ziel. */
.anleitungswechsel__pfeil--aus {
  opacity: 0.3;
  pointer-events: none;
}

.anleitungswechsel__stand {
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

/* Anleitung bearbeiten --------------------------------------------------- */

/* Kopf: links die Angaben, rechts die Kachel, wie sie am Tablet aussieht. */
@media (min-width: 1000px) {
  .anleitungskopf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 284px;
    gap: 0 1.25rem;
    align-items: start;
  }

  /* Die Kachel bleibt beim Blättern stehen — sie soll die ganze Bearbeitung
     über zeigen, was daraus wird. */
  .anleitungskopf__vorschau {
    position: sticky;
    top: 1rem;
  }
}

.anleitungskopf__titel {
  margin: 0 0 0.6rem;
  color: var(--mila-text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Das Fenster der Stage, verkleinert. Geladen wird es in voller Tablet-Größe und
   erst danach zusammengeschoben — nur so greift dasselbe Layout wie später und
   man sieht die Aufteilung statt einer Handy-Ansicht. */
/* Das Tablet hängt hochkant an der Wand — also zeigt die Vorschau es hochkant.
   Quer gerechnet stimmte hier die Aufteilung nie mit dem überein, was in der
   Küche steht: Andere Kachelform, andere Zahl je Reihe, anderer Umbruch. */
.vorschaufenster {
  --vorschau-breite: 820px;
  --vorschau-hoehe: 1180px;
  --vorschau-faktor: 0.3;

  overflow: hidden;
  width: calc(var(--vorschau-breite) * var(--vorschau-faktor));
  height: calc(var(--vorschau-hoehe) * var(--vorschau-faktor));
  border-radius: var(--mila-radius);
  background: var(--mila-surface-soft);
  box-shadow: var(--mila-shadow);
}

.vorschaufenster__rahmen {
  width: var(--vorschau-breite);
  height: var(--vorschau-hoehe);
  border: 0;
  transform: scale(var(--vorschau-faktor));
  transform-origin: top left;
  /* Nur zum Ansehen: Geklickt und getippt wird im Formular daneben. */
  pointer-events: none;
}

.vorschaufenster__gross {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--mila-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

.vorschaufenster__gross--aus {
  display: none;
}
/* Weniger technisch: Jede Karte trägt oben einen farbigen Strich, und die
   Überschriften stehen in der Hausfarbe statt in Grau. Das nimmt dem Formular
   den Datenbankcharakter, ohne bunt zu werden. */
.admin-form .admin-card {
  position: relative;
  overflow: hidden;
}

.admin-form .admin-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--kategorie-farbe, var(--mila-accent));
  opacity: 0.85;
}

.admin-form .admin-card__title {
  color: var(--mila-accent);
}

/* Zeilen ohne sichtbare Beschriftung: Der Platzhalter im Feld sagt dasselbe, und
   bei zwölf Zutaten stünde "Bezeichnung" sonst zwölfmal untereinander. Die
   Beschriftung bleibt für Vorlesegeräte erhalten. */
.admin-nested__row {
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--mila-radius-sm);
}

.admin-nested__row:nth-child(odd) {
  background: var(--mila-surface);
}

.admin-nested__row .admin-field {
  margin-bottom: 0;
}

.admin-nested__row .admin-input {
  padding-block: 0.42rem;
}

/* Eine Zeile bleibt eine Zeile: Menge und Einheit schmal, die Bezeichnung nimmt
   den Rest. Sonst brechen fünf Felder auf zwei Zeilen um und die Liste wird
   doppelt so hoch. */
.admin-nested__row .admin-field {
  flex: 1 1 7rem;
}

.admin-nested__row .admin-field--narrow {
  flex: 0 1 4.5rem;
}

/* Die Fotozeile trägt mehr als eine Zutatenzeile: Vorschau, Bildwerkstatt,
   Löschhaken, Dateiwahl und zwei Bildunterschriften.

   Alles in eine Reihe gequetscht blieb von den Textfeldern ein Rest — vier
   Zeichen breit, und die Schrift lag übereinander. Ein Flexkind schrumpft nicht
   unter seinen Inhalt, also nahm die Fotospalte, was sie brauchte, und der Rest
   teilte sich die Krümel.

   Jetzt steht das Bild links in fester Breite, und die beiden Felder daneben
   brechen um, statt sich gegenseitig zusammenzudrücken. */
.admin-nested__row--wide {
  align-items: flex-start;
  row-gap: 0.6rem;
}

.admin-nested__row--wide .schrittfoto {
  flex: 0 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  width: 7.5rem;
}

.admin-nested__row--wide .schrittfoto .admin-input--datei {
  width: 100%;
}

.admin-nested__row--wide .admin-field:not(.schrittfoto) {
  flex: 1 1 15rem;
  min-width: 0;
}

/* Der Abschnitt ist keine Nebenangabe: Auf der Stage steht er als Schild über den
   Schritten und sagt, was vor und was nach dem Ofen passiert. Also so breit, dass
   die Überschrift ganz hineinpasst — und erkennbar als das, was oben steht. */
.admin-nested__row .admin-field--abschnitt {
  flex: 0 1 9.5rem;
}

.admin-input--abschnitt {
  color: var(--kategorie-farbe, var(--mila-accent));
  font-weight: 700;
  letter-spacing: 0.02em;
}

.admin-input--abschnitt::placeholder {
  color: var(--mila-text-soft);
  font-weight: 400;
  letter-spacing: 0;
}

.admin-nested__row .admin-field--en {
  flex: 1 1 6rem;
}

/* Ab Tabletbreite zwei Spalten: links Material und Schritte, rechts Produkt und
   Angaben. Darunter bleibt es untereinander. */
@media (min-width: 1000px) {
  .anleitungsform {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0 1.25rem;
    align-items: start;
  }

  /* Die Zutatenkarte steht über dem Raster und damit über die ganze Seite: In
     der halben Spalte faltete sich eine Zeile — Menge, Einheit, Bezeichnung,
     Rechenmenge, Zusatzinfo — auf drei Zeilen übereinander, und man sah nicht
     mehr, was wohin gehört. Eine Zutatenzeile ist eine Zeile.

     Mit der ganzen Breite bekommt jedes Feld auch eine sinnvolle: Die
     Bezeichnung nimmt, was übrig bleibt, die Zahlen bleiben schmal. */
  /* Kopf und Zeilen teilen sich dasselbe Raster — nur so stehen die
     Überschriften über ihren Feldern. Zehn Spalten, in der Reihenfolge von
     _ingredient_fields; der Löschknopf steht absolut und zählt nicht mit.

     Einmal oben statt an jeder Zeile: Bei zwölf Zutaten stünde sonst zehnmal
     dasselbe Wort untereinander. */
  .anleitungsform__breit .zutatentabelle__kopf,
  .anleitungsform__breit .admin-nested__row {
    display: grid;
    grid-template-columns:
      1.1rem                      /* Griff */
      4.5rem                      /* Menge */
      5rem                        /* Einheit */
      minmax(9rem, 1.4fr)         /* Bezeichnung */
      4.5rem                      /* Weglassen */
      9rem                        /* Preiskalkulation */
      minmax(7rem, 1fr)           /* Zusatzinfo */
      minmax(7rem, 1fr)           /* EN Bezeichnung */
      5rem                        /* EN Einheit */
      minmax(7rem, 1fr);          /* EN Zusatzinfo */
    gap: 0 0.6rem;
    align-items: start;
    padding-right: 3rem;
  }

  .anleitungsform__breit .zutatentabelle__kopf {
    padding: 0 3rem 0.35rem 1rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
  }

  .anleitungsform__breit .zutatentabelle__kopf > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Die englischen Spalten in der Akzentfarbe: "Bezeichnung" und "Bezeichnung"
     nebeneinander, und man rät sonst, welches welches ist. */
  .anleitungsform__breit .zutatentabelle__en {
    color: var(--mila-accent);
  }

  .anleitungsform__breit .zutatentabelle__en::before {
    content: "EN ";
    font-weight: 700;
  }

  .anleitungsform__breit .zutatentabelle__mitte {
    text-align: center;
  }

  .anleitungsform__breit .zutatenvorschlag {
    min-width: 0;
  }

  /* Im Raster braucht keins der Felder mehr eine eigene Breite. */
  .anleitungsform__breit .admin-nested__row .admin-field {
    flex: none;
    min-width: 0;
  }
}

/* Speichern klebt unten — bei einer Anleitung mit zwölf Schritten sonst außer
   Sicht. */
/* Die Leiste, die beim Scrollen unten stehen bleibt: Speichern in Reichweite,
   daneben leise, was noch fehlt.
 *
 * Flach und zurückhaltend — sie liegt über der Arbeit und soll sie nicht
 * überdecken. Die Angabe stand außerdem am Rand geklebt: Das Polster kam aus
 * .anleitungsform__leiste, wurde aber von .admin-form__footer weiter unten in
 * dieser Datei überschrieben. Beide Klassen zusammen gewinnen. */
.admin-form__footer.anleitungsform__leiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.35rem 1.25rem;
  /* Kein Kasten mehr, nur eine Kante: Die Leiste soll den Blick halten, wo
     gearbeitet wird, und nicht selbst wie ein Feld aussehen. Rahmen, Rundung und
     Schatten machten aus einer Zeile einen Kasten mit eigenem Gewicht. */
  border: 0;
  border-top: 1px solid var(--mila-line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: none;
}

/* Auch die Knöpfe darin eine Spur kleiner — sie geben der Leiste ihre Höhe. */
.admin-form__footer.anleitungsform__leiste .admin-button {
  padding-block: 0.35rem;
  font-size: 0.86rem;
}

/* Was noch fehlt, steht neben dem Knopf — beim Ausfüllen sieht man den
   Fortschritt, ohne die Seite zu verlassen. */
.anleitungsform__stand {
  margin-right: auto;
  font-size: 0.78rem;
  opacity: 0.75;
}

/* Kategorieleiste wie auf der Stage -------------------------------------- */

.kategorieleiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.kategorieleiste__knopf {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.kategorieleiste__knopf--farbig {
  border-color: transparent;
  background: var(--kategorie-farbe);
  color: #fff;
}

/* Wie auf dem Tablet: Der gewählte Knopf bekommt einen Ring, keine andere
   Deckkraft — weiße Schrift auf blasser Fläche liest sich schlecht. */
.kategorieleiste__knopf--aktiv {
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--mila-bg), 0 0 0 4px var(--kategorie-farbe, var(--mila-accent));
}

/* Vollständigkeit und Sortierung in der Anleitungsliste ------------------ */

/* Was noch fehlt, in Worten statt in Kürzeln. Leise gesetzt: Es ist eine Notiz
   am Rand und keine Warnung — vieles ist absichtlich unvollständig. */
.stand {
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

.stand--fertig {
  color: var(--mila-ok-text);
}

.vollstaendig {
  display: inline-flex;
  gap: 0.25rem;
}

.vollstaendig__teil {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  font-size: 0.74rem;
  font-weight: 700;
}

/* Vorhanden ist ruhig grün, Fehlendes bleibt blass — die Liste soll nicht nach
   Alarm aussehen, sondern zeigen, wo noch Arbeit liegt. */
.vollstaendig__teil--da {
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
}

.vollstaendig__teil--fehlt {
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  opacity: 0.65;
}

/* Spaltenköpfe zum Ordnen: der Pfeil erscheint erst beim Überfahren, außer die
   Spalte ist gerade die maßgebliche. */
.admin-sortkopf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.admin-sortkopf__pfeil {
  opacity: 0;
  font-weight: 400;
}

.admin-sortkopf:hover .admin-sortkopf__pfeil,
.admin-sortkopf--aktiv .admin-sortkopf__pfeil {
  opacity: 1;
}

.admin-sortkopf--aktiv {
  color: var(--mila-accent);
}

/* Funktionsübersicht: eine Karte je Stage ------------------------------- */

.funktionen__buehnen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.funktionen__buehne {
  margin: 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.funktionen__name {
  padding: 0;
  margin-bottom: 0.7rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.funktionen__name a {
  color: inherit;
  text-decoration: none;
}

.funktionen__name a:hover {
  color: var(--mila-accent);
}

.funktionen__name .admin-list__meta {
  font-weight: 500;
}

.funktionen__schalter {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--mila-line);
  cursor: pointer;
  font-size: 0.94rem;
  font-weight: 600;
}

.funktionen__schalter .admin-check {
  flex: none;
  margin-top: 0.15rem;
}

.funktionen__hinweis {
  display: block;
  margin-top: 0.1rem;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.35;
}

/* Farbwahl: ein Kreis je Ton, der gewählte bekommt einen Ring. */
.farbwahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.farbwahl__feld {
  display: inline-flex;
  cursor: pointer;
}

.farbwahl__eingabe {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.farbwahl__punkt {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ton);
  box-shadow: 0 0 0 2px var(--mila-surface), 0 0 0 2px transparent;
}

.farbwahl__eingabe:checked + .farbwahl__punkt {
  box-shadow: 0 0 0 3px var(--mila-surface), 0 0 0 5px var(--ton);
}

.farbwahl__eingabe:focus-visible + .farbwahl__punkt {
  outline: 3px solid var(--mila-accent-soft);
  outline-offset: 3px;
}

/* Kategoriefarbe in der Liste der Regie. */
.admin-farbpunkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--ton);
  vertical-align: baseline;
}

/* Ja/Nein in einer Tabellenspalte: Der Haken darf freundlich sein, das Kreuz
   soll nicht wie ein Fehler wirken — nur wie eine Angabe. */
.admin-ja {
  color: var(--mila-ok-text);
  font-size: 1.1rem;
  font-weight: 700;
}

.admin-nein {
  color: var(--mila-text-soft);
  font-size: 1rem;
  opacity: 0.55;
}

/* Kleine Marke für wiederkehrende Aufgaben — hebt sich vom übrigen Kleingedruckten
   ab, ohne laut zu werden. */
.admin-rhythmus {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.35rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.admin-hint {
  margin: 0.4rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.86rem;
}

/* Die Gebindezeile hängt an der Auswahl darüber und gehört sichtbar dazu:
   eingerückt, mit einer feinen Linie, damit sie nicht wie ein neuer Abschnitt
   aussieht. */
/* Die Menge in der Kalkulationszeile: zwei schmale Felder nebeneinander, so
   breit wie die Zahl, die hineingehört. Sie sollen nicht wie ein Formular
   wirken, sondern wie eine Zelle, in die man schreiben darf. */
.kalkulation__menge {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}

.kalkulation__weglassen {
  display: inline-flex;
  gap: 0.2rem;
  align-items: center;
  color: var(--mila-text-soft);
  cursor: pointer;
}

.kalkulation__mengenfeld { width: 5rem; }
.kalkulation__mengeneinheit { width: 5.5rem; }

.kalkulation__menge .admin-input {
  padding: 0.3rem 0.45rem;
  font-size: 0.88rem;
}

/* Ohne JavaScript bleiben sie ausgeschaltet — und sehen dann auch so aus. */
.kalkulation__menge .admin-input:disabled {
  border-color: transparent;
  background: transparent;
  color: var(--mila-text-soft);
}

.admin-field-row--eingerueckt {
  flex-basis: 100%;
  margin: 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--mila-border);
}

/* Die Gegenprobe zur eingetippten Zahl: Sie steht in der Feldzeile und nimmt
   die volle Breite, damit sie unter den Feldern erscheint und nicht neben
   ihnen. Ohne Inhalt ist sie weg — ein leerer Absatz schöbe die Felder auseinander. */
.admin-hint--rechnung {
  flex-basis: 100%;
  margin: 0;
  color: var(--mila-accent);
  font-variant-numeric: tabular-nums;
}

.admin-hint code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--mila-surface-soft);
  font-size: 0.92em;
}

.admin-empty {
  padding: 2rem;
  border: 1px dashed var(--mila-line);
  border-radius: var(--mila-radius);
  color: var(--mila-text-soft);
  text-align: center;
}

/* Knöpfe ------------------------------------------------------------------- */

.admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.admin-button:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

.admin-button--primary {
  background: var(--mila-accent);
  border-color: var(--mila-accent);
  color: #fff;
}

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

.admin-button--quiet {
  background: transparent;
  color: var(--mila-text-soft);
}

.admin-button--small {
  min-height: 38px;
  padding: 0.35rem 0.8rem;
  font-size: 0.86rem;
}

.admin-button--danger:hover {
  border-color: #b23b3b;
  color: #b23b3b;
}

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

/* Die Wege bleiben am rechten Rand stehen, auch wenn die Tabelle breiter ist
   als der Schirm.
   Ohne das rutschten sie beim Hinzufügen einer Spalte aus dem Bild: Die Knöpfe
   waren da, nur eben hinter dem Rand — und dort sucht sie niemand. Wer nicht
   weiß, dass eine Tabelle seitlich rollt, hält die Seite für kaputt. */
.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

/* Nur wo die Tabelle breit genug wird, um es zu brauchen — die anderen
   Tabellen der Regie haben weniger Spalten und sollen sich nicht ändern. */
.admin-table--haftend th.admin-table__aktionen,
.admin-table--haftend td.admin-table__aktionen {
  position: sticky;
  right: 0;
  border-left: 1px solid var(--mila-line);
  background: var(--mila-surface);
}

.admin-table th,
.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--mila-line);
  vertical-align: middle;
}

/* Die Kopfzeile bleibt stehen: Bei zwanzig Mitarbeitern scrollt man weit genug,
   dass man sonst rät, welche Spalte man gerade liest. */
.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mila-surface-soft);
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  color: var(--mila-text-soft);
  box-shadow: inset 0 -1px 0 var(--mila-line);
}

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

/* Die Zelle bleibt eine Tabellenzelle — "display: flex" darauf hebelt die
   Ausrichtung der ganzen Zeile aus. Geflext wird erst der Inhalt darin. */
.admin-table__recipe {
  font-weight: 600;
}

.admin-table__recipe-inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.admin-table__position {
  color: var(--mila-text-soft);
  font-variant-numeric: tabular-nums;
}

.admin-thumb {
  flex: none;
  display: block;
  width: 64px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface-soft);
}

.admin-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sortieren per Ziehen ------------------------------------------------------ */

.admin-table__handle {
  width: 1%;
  padding-right: 0;
}

.admin-handle {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--mila-radius-sm);
  background: transparent;
  color: var(--mila-text-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: grab;
  /* Verhindert, dass das Tablet beim Ziehen die Seite scrollt. */
  touch-action: none;
}

.admin-handle:hover {
  border-color: var(--mila-line);
  background: var(--mila-surface-soft);
  color: var(--mila-text);
}

.admin-table--sortable tbody tr.is-dragging {
  background: var(--mila-accent-soft);
  box-shadow: var(--mila-shadow);
}

.is-sorting {
  cursor: grabbing;
  user-select: none;
}

.admin-sort-status {
  margin: 0.75rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.86rem;
  min-height: 1.4em;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: flex-end;
  align-items: center;
}

/* Aufklappmenü für die selteneren Zeilenaktionen ---------------------------- */

.admin-menu {
  position: relative;
}

.admin-menu__toggle {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
}

.admin-menu__toggle::-webkit-details-marker {
  display: none;
}

.admin-menu__toggle:hover,
.admin-menu[open] .admin-menu__toggle {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

.admin-menu__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow);
  text-align: left;
}

.admin-menu__panel form {
  margin: 0;
}

.admin-menu__item {
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.admin-menu__item:hover {
  background: var(--mila-surface-soft);
}

.admin-menu__item--danger {
  color: #b23b3b;
}

.admin-menu__item--danger:hover {
  background: rgba(178, 59, 59, 0.08);
}

.admin-row-actions form {
  margin: 0;
}

/* Status ------------------------------------------------------------------- */

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.status-badge--active {
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
}

.status-badge--draft {
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

.status-badge--archived {
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
}

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

.admin-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.9rem;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
}

.admin-filter__search {
  flex: 1 1 16rem;
}

.admin-filter__actions {
  display: flex;
  gap: 0.5rem;
}

.admin-field {
  flex: 1 1 12rem;
  margin-bottom: 1rem;
}

.admin-field--narrow {
  flex: 0 1 9rem;
}

.admin-field--check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Mehrfachauswahl, etwa die Bereiche eines Zugangs. */
.admin-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.admin-check-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.4rem 1rem 0.4rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  font-weight: 600;
  cursor: pointer;
}

.admin-check-row:has(input:checked) {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

.admin-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
}

.admin-label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--mila-text-soft);
}

.admin-label--inline {
  margin: 0;
  font-size: 1rem;
  color: var(--mila-text);
}

.admin-input {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-bg);
  color: var(--mila-text);
  font: inherit;
}

.admin-input:focus-visible {
  outline: 2px solid var(--mila-accent);
  outline-offset: 1px;
}

textarea.admin-input {
  min-height: 0;
  resize: vertical;
}

.admin-check {
  width: 22px;
  height: 22px;
  accent-color: var(--mila-accent);
}

.admin-form__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 1.1rem 0 2rem;
}

.admin-preview {
  margin: 1rem 0 0;
}

/* Dieselbe Vorschau wie auf der Stage, also auch dasselbe Format: Wer hier ein
   Foto hochlädt, soll sehen, was das Tablet daraus macht. */
.admin-preview img {
  display: block;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1 / 1;
  border-radius: var(--mila-radius-sm);
  object-fit: cover;
}

.admin-preview figcaption {
  margin-top: 0.35rem;
  color: var(--mila-text-soft);
  font-size: 0.86rem;
}

/* Link zum Verteilen an die Tablets ---------------------------------------- */

.admin-linkfeld {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 20rem;
}

.admin-input--code {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
}

/* Produktsignatur oben rechts ---------------------------------------------- */

.admin-header__account .produkt-signatur {
  position: static;
  transform: none;
  margin: 0 0 0 0.65rem;
  padding-left: 1.05rem;
  border-left: 1px solid var(--mila-line);
}

.admin-header__account .produkt-signatur__marke {
  font-size: 1.65rem;
  text-transform: lowercase;
  letter-spacing: -0.01em;
}

.admin-header__account .produkt-signatur__back {
  color: var(--mila-text-soft);
  font-weight: 400;
  opacity: 0.88;
}

.admin-header__account .produkt-signatur__stage {
  color: var(--mila-text);
  font-weight: 700;
}

/* Medienübersicht ---------------------------------------------------------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.media-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow);
  overflow: hidden;
}

.media-card__preview {
  position: relative;
  /* flex: none, sonst überschreibt die Flex-Verteilung das Seitenverhältnis und
     die Kacheln geraten unterschiedlich hoch. */
  flex: none;
  aspect-ratio: 1 / 1;
  /* min-height und overflow sind nötig, damit das Seitenverhältnis gilt: Sonst
     dehnt ein hohes Bild den Rahmen und die Kacheln geraten unterschiedlich hoch. */
  min-height: 0;
  overflow: hidden;
  background: var(--mila-surface-soft);
}

.media-card__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Videos bekommen eine ruhige Fläche statt eines halb geladenen Players — das
   spart auch das Laden von zwei Dutzend Videos beim Öffnen der Seite. */
.media-card__preview--video {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #2c241d, #4a3d31);
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.6rem;
}

.media-card__badge {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(28, 22, 17, 0.6);
  color: #fff;
  font-size: 0.8rem;
}

.media-card__body {
  flex: 1;
  padding: 0.85rem 1rem 0.5rem;
}

.media-card__name {
  margin: 0;
  font-weight: 600;
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-card__meta {
  margin: 0.2rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
}

.media-card__used,
.media-card__unused {
  margin: 0.5rem 0 0;
  font-size: 0.82rem;
}

.media-card__used {
  color: var(--mila-ok-text);
}

.media-card__unused {
  color: var(--mila-text-soft);
}

.media-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 1rem 1rem;
}

.media-card__actions form {
  margin: 0;
}

/* Dateien hochladen -------------------------------------------------------- */

/* Flach statt hoch: Die Fläche muss nur erkennbar sein, nicht das halbe
   Formular füllen — das Foto sieht man ohnehin in der Vorschau darunter. */
.admin-dropzone {
  position: relative;
  display: block;
  padding: 0.7rem 1rem;
  border: 2px dashed var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-bg);
  text-align: center;
  cursor: pointer;
}

.admin-dropzone:hover,
.admin-dropzone.is-over {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

/* Das Dateifeld bleibt bedienbar, liegt aber unsichtbar über der Fläche. */
.admin-dropzone__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.admin-dropzone__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.15rem 0.5rem;
  pointer-events: none;
}

.admin-dropzone__icon {
  font-size: 1rem;
  opacity: 0.5;
}

.admin-dropzone__text {
  font-size: 0.9rem;
}

.admin-dropzone__formats {
  color: var(--mila-text-soft);
  font-size: 0.8rem;
}

.admin-dropzone__preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

/* Über einer Liste: Was hineinfällt, wird zur nächsten Zeile darunter. */
.admin-dropzone--reihe {
  margin-bottom: 0.75rem;
}

/* Bildwerkstatt -------------------------------------------------------------
 *
 * Drehen und Zuschneiden am hinterlegten Bild. Der Knopf steht unter der
 * Vorschau und nicht darauf: Bei einem Daumennagel von drei Zentimetern läge er
 * sonst über dem, was man sehen will. */
.bildwerkstatt {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.bildwerkstatt__knopf {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.bildwerkstatt__knopf:hover {
  color: var(--mila-accent);
}

.bildwerkstatt__overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgb(20 16 14 / 0.82);
}

.bildwerkstatt__overlay.is-arbeitet {
  cursor: progress;
}

.bildwerkstatt__fenster {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: min(64rem, 100%);
  max-height: 100%;
}

/* Das Bild bestimmt die Größe der Fläche — der Rahmen liegt darüber und wird in
   denselben Koordinaten gerechnet. */
.bildwerkstatt__flaeche {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 0;
  touch-action: none;
}

.bildwerkstatt__bild {
  max-width: 100%;
  max-height: 70vh;
  border-radius: var(--mila-radius-sm);
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.bildwerkstatt__rahmen {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45);
  pointer-events: none;
}

.bildwerkstatt__hinweis {
  margin: 0;
  color: rgb(255 255 255 / 0.75);
  font-size: 0.85rem;
  text-align: center;
}

.bildwerkstatt__leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

/* Auf dunklem Grund brauchen die stillen Knöpfe eine eigene Fassung. */
.bildwerkstatt__leiste .admin-button--quiet {
  border-color: rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.08);
  color: #fff;
}

.admin-dropzone__medium {
  max-width: 100%;
  max-height: 7rem;
  border-radius: var(--mila-radius-sm);
  object-fit: contain;
}

.admin-dropzone__datei {
  color: var(--mila-text-soft);
  font-size: 0.84rem;
  word-break: break-all;
}

.admin-dropzone__zuruecknehmen {
  position: relative;
  z-index: 1;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.admin-preview--klein img,
.admin-preview--klein video {
  max-width: 14rem;
  max-height: 10rem;
  width: auto;
  aspect-ratio: auto;
}

.admin-details {
  margin-top: 0.5rem;
}

.admin-details summary {
  padding: 0.4rem 0;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Wiederholbare Zeilen (Zutaten, Schritte, Hinweise) ------------------------ */

.admin-nested__row {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  padding: 0.9rem 3rem 0.2rem 1rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.admin-remove {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mila-line);
  border-radius: 50%;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  cursor: pointer;
}

.admin-remove:hover {
  border-color: #b23b3b;
  color: #b23b3b;
}

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

.admin-errors {
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--mila-warn-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

.admin-errors__title {
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.admin-errors ul {
  margin: 0;
  padding-left: 1.2rem;
}

body.regie .flashes {
  max-width: 1400px;
  margin: 1rem auto 0;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  gap: 0.5rem;
}

body.regie .flash {
  padding: 0.85rem 1.1rem;
  border-radius: var(--mila-radius-sm);
  font-weight: 600;
}

body.regie .flash--notice {
  background: var(--mila-ok-bg);
  border: 1px solid var(--mila-ok-line);
  color: var(--mila-ok-text);
}

body.regie .flash--alert {
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
}

/* Tablet ------------------------------------------------------------------- */

@media (max-width: 780px) {
  .admin-nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .admin-row-actions {
    justify-content: flex-start;
  }
}

/* Englische Zweitfelder ---------------------------------------------------- */

/* Sichtbar abgesetzt, damit beim Ausfüllen klar ist, was für die englische Stage
   gedacht ist — und dass es leer bleiben darf. */
.admin-field--en .admin-label {
  color: var(--mila-accent);
}

.admin-field--en .admin-input {
  background: var(--mila-accent-soft);
  border-color: #e6d3c6;
}

.admin-aufgabe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Der Titel nimmt den freien Platz, statt zwischen Marke und Knopf zu schweben.
   Mit space-between allein saß eine kurze Zeile ("Reservierungen") in der Mitte
   und eine lange am linken Rand — dieselbe Liste, zwei Fluchten, und beim
   Herunterlesen sprang das Auge hin und her.

   Die Marke hat ihre feste Breite schon (.aufgabe__marke) — sonst stünde "KÜCHE"
   breiter da als "BAR" und die Titel wieder verschieden weit rechts. */
.admin-aufgabe > span:not(.aufgabe__marke):not(.admin-aufgabe__wege) {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.admin-aufgabe form {
  margin: 0;
}

/* Aufgaben auf der Übersicht ---------------------------------------------- */

.admin-aufgaben-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--mila-line);
}

.admin-aufgaben__titel {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--mila-text-soft);
}

/* Aufgaben stehen zu vielen in der Liste — enger als die übrigen Einträge. */
.admin-aufgaben-spalten .admin-list__item {
  padding: 0.4rem 0;
  font-size: 0.94rem;
}

.admin-aufgaben-spalten .admin-list__meta {
  margin-top: 0;
  font-size: 0.8rem;
}

.admin-aufgaben-spalten .admin-empty {
  padding: 0.9rem;
  font-size: 0.88rem;
}

.admin-aufgaben-spalten .admin-button--small {
  min-height: 34px;
  padding: 0.2rem 0.7rem;
  font-size: 0.82rem;
}

/* Der Knopf sitzt in einer Zeile mit den Feldern und braucht dieselbe Höhe. */
.admin-field--knopf {
  display: flex;
  align-items: flex-end;
}

.admin-aufgaben__titel--warnung {
  color: var(--mila-accent);
}

/* Zweite Zeile der Bereichsleiste: was im gewählten Bereich liegt. */
.admin-subheader__inner--unten {
  padding-top: 0;
  padding-bottom: 0.7rem;
}

/* Ohne den Stagewechsel darüber fehlt der Zeile ihr Abstand nach oben — sie
   klebte sonst an der Linie. */
.admin-subheader__inner--allein {
  padding-top: 0.55rem;
}

/* Die Unterpunkte treten daneben zurück — der Bereichsname führt. */
.admin-subheader__inner--unten .admin-subnav__link {
  font-size: 0.9rem;
  font-weight: 500;
}

.admin-subheader__inner--unten .admin-subnav__link--active {
  font-weight: 700;
}

/* Der Weg auf die andere Oberfläche — der Pfeil rückt beim Zeigen nach. */
/* Ohne Einzug: Der Knopf sitzt in beiden Masken an derselben Stelle, seit er in
   der Leiste ganz vorne steht. */
/* Maße Zeile für Zeile wie .kitchen-nav__wechsel — derselbe Knopf an derselben
   Stelle, damit beim Wechsel zwischen Regie und Stage nichts springt. Alles
   ausdrücklich, weil die beiden Masken unterschiedliche Grundgrößen haben. */
.admin-nav__wechsel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.85rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  color: var(--mila-text);
  opacity: 1;
}

.admin-nav__wechsel:hover {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
}

.admin-nav__pfeil {
  color: var(--mila-accent);
  transition: transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

.admin-nav__wechsel:hover .admin-nav__pfeil {
  transform: translateX(3px);
}

/* Kartenkopf: Überschrift, rechts daneben Platz für ein Zahnrad. */
.admin-card__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.admin-card__kopf .admin-card__title {
  margin: 0;
}

.admin-zahnrad {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--mila-text-soft);
}

.admin-zahnrad svg {
  width: 18px;
  height: 18px;
}

.admin-zahnrad:hover {
  background: var(--mila-surface-soft);
  color: var(--mila-accent);
}

/* Projektübersicht -------------------------------------------------------- */

/* Eine Spalte je Anforderung, eine Zeile je Person. Bei vielen Anforderungen
   wird die Tabelle breiter als der Bildschirm — dann schiebt sie sich seitlich
   (admin-table-wrap), statt die Spalten unlesbar schmal zu quetschen. */
.projekttabelle__spalte {
  min-width: 8rem;
  vertical-align: bottom;
}

.projekttabelle__feld {
  text-align: center;
  white-space: nowrap;
}

/* Da und nicht da müssen sich auf einen Blick unterscheiden — auch für die, die
   Grün und Rot nicht auseinanderhalten. Deshalb nicht nur Farbe, sondern auch
   Zeichen und Gewicht. */
.projekttabelle__da {
  color: var(--mila-ok-text, #1e6b34);
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
}

/* Die Überschrift eines Blocks im Modulwechsler: klein, ruhig, nur eine Marke
   fürs Auge. Sie ist kein Ziel — geklickt wird darunter. */
.bereichswechsel__block {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.bereichswechsel__block:first-of-type {
  margin-top: 0;
}

/* Eine Karte in der Liste: links, was sie ist, rechts, was man mit ihr tut. */
.kartenzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.kartenzeile__wege {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Die Datei wählt man über die Beschriftung — das Feld selbst ist versteckt,
   damit die Zeile nicht von einem Dateidialog gesprengt wird. */
.kartenzeile__tausch {
  display: inline-flex;
}

.kartenzeile__tausch label {
  cursor: pointer;
}

/* Eine Absage ist keine Erledigung: Sie tritt zurück statt grün zu leuchten. */
.onboarding-marke--abgesagt {
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
}

/* Ein Blatt und keine Tabelle: Man liest es einmal durch, wie einen Brief. */
.bewerbungsblatt {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 0.6rem 1.5rem;
  margin: 0;
}

.bewerbungsblatt dt {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.bewerbungsblatt dd {
  margin: 0;
}

@media (max-width: 42rem) {
  .bewerbungsblatt {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }

  .bewerbungsblatt dd {
    margin-bottom: 0.7rem;
  }
}

/* Was sich laden lässt, sieht aus wie ein Knopf und nicht wie ein Haken.
 *
 * Vorher stand dort dasselbe Häkchen wie bei "erledigt ohne Datei", nur
 * verlinkt — und niemand kam auf die Idee, es anzuklicken. Die
 * Gesundheitsbelehrung lag monatelang da, ohne dass sie jemand geholt hat. */
.projekttabelle__laden {
  display: inline-grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 8px;
  background: var(--mila-surface);
  color: var(--mila-ok-text, #1e6b34);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
}

.projekttabelle__laden:hover {
  border-color: var(--mila-ok-text, #1e6b34);
  background: var(--mila-surface-soft);
}

.projekttabelle__fehlt {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.projekttabelle__wert {
  font-variant-numeric: tabular-nums;
}

/* Was für jemanden gar nicht vorgesehen ist, tritt zurück: Ein Schritt nur für
   den Service ist in der Zeile einer Küchenkraft keine offene Aufgabe, sondern
   keine. Sähe er aus wie "offen", stünde in der Tabelle eine Mahnung ohne Grund. */
.projekttabelle__gilt-nicht {
  color: var(--mila-line);
}

/* Eine geschriebene Antwort steht als Satz da, nicht als Haken.
 *
 * Bei "An welchen Tagen kannst du?" ist der Haken wertlos — der Satz ist das
 * Einzige, was zählt, und er wird beim Planen gelesen. Deshalb linksbündig statt
 * mittig wie die Zeichen daneben, und Zeilenumbrüche bleiben stehen: Wer drei
 * Tage untereinander schreibt, meint drei Zeilen. */
.projekttabelle__antwort,
.onboarding-antwort__gelesen {
  display: block;
  max-width: 20rem;
  white-space: pre-line;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Der Vermerk "gesehen" ist eine Nebensache und sieht auch so aus — er soll die
   Tabelle nicht mit Knöpfen zupflastern. */
.projekttabelle__pruefen {
  display: block;
  margin: 0.2rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
}

.projekttabelle__pruefen:hover {
  color: var(--mila-accent);
}

/* Verwaltung in Teilen ---------------------------------------------------- */

/* Ein Reiter je Teil. Wie der Wegweiser auf der Stage — dasselbe Muster, damit
   man es nicht zweimal lernen muss. */
.verwaltung-reiter {
  display: flex;
  gap: 0.15rem;
  margin: 0 0 1.2rem;
  padding: 0.2rem;
  border-radius: 12px;
  background: var(--mila-surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.verwaltung-reiter::-webkit-scrollbar {
  display: none;
}

.verwaltung-reiter__eintrag {
  padding: 0.4rem 0.9rem;
  border-radius: 9px;
  color: var(--mila-text-soft);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.verwaltung-reiter__eintrag:hover {
  color: var(--mila-text);
}

.verwaltung-reiter__eintrag--hier {
  background: var(--mila-surface);
  color: var(--mila-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
}

/* Dabei oder nicht dabei — ein Druckpunkt, kein Formular. Beide Zustände sind
   gleich groß, damit die Tabelle beim Umschalten nicht springt. */
/* Zugangstabelle ---------------------------------------------------------- */

/* Die Spalten stehen in Gruppen, damit man sieht, was zusammengehört: Küche, Bar
   und Wiki sind Stages, die Academy ist etwas anderes. Ohne die Zeile darüber
   liest sich die Kopfzeile als eine lange Reihe gleichrangiger Bereiche. */
.zugangstabelle__gruppe {
  padding-bottom: 0.15rem;
  border-bottom: 1px solid var(--mila-line);
  color: var(--mila-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
}

/* Die Häkchenspalten nur so breit wie nötig — der Platz gehört den Namen. */
.zugangstabelle__schmal {
  width: 1%;
  text-align: center;
  white-space: nowrap;
}

.zugangstabelle__feld {
  text-align: center;
  white-space: nowrap;
}

/* Wo nichts zu ändern ist, steht kein Knopf: bei der Entwicklung, die das Recht
   immer hat, und für alle, die es nur ansehen dürfen. */
.zugangstabelle__fest {
  color: var(--mila-ok-text, #1e6b34);
  font-weight: 700;
}

/* Wo nichts stehen kann, weil es dort nichts zu entscheiden gibt: ein Strich,
   kein Knopf. Zurückhaltend genug, dass er nicht wie ein Fehler aussieht. */
.zugangstabelle__fest--leer {
  color: var(--mila-line);
  font-weight: 400;
}

/* Die Rollenauswahl sitzt in einer Tabellenzeile und darf sie nicht auseinander
   drücken. */
.admin-input--klein {
  width: auto;
  min-width: 9rem;
  padding-block: 0.3rem;
  font-size: 0.88rem;
}

.verwaltung-haken__form {
  display: inline;
}

.verwaltung-haken,
.verwaltung-leer {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.verwaltung-haken {
  background: var(--mila-ok-bg, #edf7ee);
  color: var(--mila-ok-text, #1e6b34);
  font-weight: 700;
}

.verwaltung-leer {
  background: none;
  border-color: var(--mila-line);
  color: var(--mila-text-soft);
}

.verwaltung-leer:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

/* Bereichsleiste der Regie ------------------------------------------------ */

/* Unter der Wortmarke: die vier Bereiche. Jeder Reiter trägt zwei Wege — in die
   Bearbeitung und zu den Zugängen. Deshalb ein Paar statt eines Knopfes: Wer die
   Anleitungen pflegt, will meist nicht gleichzeitig Leute verwalten. */
.admin-bereichsleiste {
  border-top: 1px solid var(--mila-line);
  background: var(--mila-surface);
}

.admin-bereichsleiste__inner {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  max-width: var(--admin-breite, 1400px);
  margin: 0 auto;
  padding: 0.5rem 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.admin-bereichsleiste__inner::-webkit-scrollbar {
  display: none;
}

.admin-bereich {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: 10px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* Wie in der Nutzeransicht: Der offene Bereich ist gefüllt, nicht bloß zart
   getönt. Auf einen Blick erkennbar, ohne hinzusehen. */
.admin-bereich--hier {
  background: var(--mila-text);
  color: var(--mila-bg);
}

.admin-bereich--hier 
/* Dieselbe Zweiteilung wie auf der Stage: Nachschlagewerke zusammen auf einer
   Fläche, Academy und Projekte daneben mit Abstand. */
/* Die Reiter stehen alle gleich weit auseinander. Die Gruppen tragen hier keine
   eigene Fläche mehr: In der Nutzeransicht trennen sie drei Stages von zwei
   persönlichen Bereichen, in der Regie steht in der ersten Gruppe nur "Stages" —
   ein Rahmen um ein einzelnes Wort schafft dort nur ungleiche Abstände. */
.admin-nav__gruppe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Der persönliche Link sitzt als Büroklammer in der Zeile der Person. Er steht
   nirgends als Feld: Man braucht ihn beim Verschicken, nicht beim Ansehen. */
.projektlink {
  display: inline-flex;
}

.projektlink__klammer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--mila-line);
  border-radius: 8px;
  background: none;
  color: var(--mila-text-soft);
  cursor: pointer;
}

.projektlink__klammer svg {
  width: 1.05rem;
  height: 1.05rem;
}

.projektlink__klammer:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

/* Kurz nach dem Klick: Die Klammer bestätigt, dass sie etwas getan hat. */
.projektlink__klammer.is-kopiert {
  border-color: var(--mila-ok-line, #34a853);
  background: var(--mila-ok-bg, #edf7ee);
  color: var(--mila-ok-text, #1e6b34);
}

/* Ein Abschnitt innerhalb einer Seite — etwa die Anforderungen unter den
   Angaben eines Projekts. Er trennt, ohne eine zweite Seite zu brauchen. */
.admin-abschnitt {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mila-line);
}

.admin-abschnitt__titel {
  margin: 0 0 0.4rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

/* Der eine Knopf, den man auf einer Seite am häufigsten nimmt, darf größer sein
   als die übrigen — sonst sucht man ihn zwischen lauter gleich großen. */
.admin-button--gross {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
}

/* Ein Satz unter der Überschrift einer Karte — er sagt, wozu der Bereich da
   ist, für die, die ihn zum ersten Mal öffnen. */
.admin-card__lead {
  margin: 0 0 1.1rem;
  max-width: 68ch;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--mila-text-lead, #48484d);
}

/* Ein Satz je Zeile — siehe shared/_lead. Der Abstand dazwischen ist kleiner als
   zwischen Absätzen: Es ist ein Gedanke, nur in Sätze zerlegt. */
.admin-lead {
  margin: 0.45rem 0 1.1rem;
  max-width: 72ch;
}

.admin-lead__satz {
  margin: 0 0 0.15rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--mila-text-lead, #48484d);
}

.admin-lead__satz:last-child {
  margin-bottom: 0;
}

/* Der Sammelhaken unter der Kategorie: eine Zeile, kein Banner.
 *
 * Als eigene Fläche über dem Formular war er das Erste, was man sah — dabei ist
 * er die Nachfrage zur Kategorie und gehört unter sie. */
.admin-field .sammelhaken {
  margin-top: 0.4rem;
  padding: 0;
  border: 0;
  background: none;
  gap: 0.35rem;
  font-size: 0.75rem;
}

.admin-field .sammelhaken .sammelhaken__titel {
  font-size: 0.75rem;
}

.admin-field .sammelhaken .sammelhaken__box {
  width: 1rem;
  height: 1rem;
}

/* Die Zeile eines Schritts: erst die Scheibe zur Wahl, dann der Text.
   Das Auswahlfeld bleibt schmal — es ist eine Zutat der Zeile, nicht ihr Thema. */
.schrittzeile {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

.schrittzeile textarea {
  flex: 1;
}

.admin-input--zeichen {
  flex: 0 0 7.5rem;
  padding-inline: 0.5rem;
  font-size: 0.8rem;
}

/* In der Schrittliste darf die Zeile mit Auswahl und Text die Breite bekommen,
   die sie braucht. */
.admin-nested__row .admin-field--zeichen {
  flex: 3 1 18rem;
}

/* Eine Schrittzeile in zwei Zeilen: oben, wozu der Schritt gehört, darunter der
   Satz in beiden Sprachen — gleich breit nebeneinander. Vorher standen Deutsch
   und Englisch versetzt, und das Auge suchte bei jedem Schritt neu. */
.admin-nested__row--schritt {
  display: grid;
  gap: 0.4rem;
  align-items: stretch;
}

.schrittkopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.schrittkopf .admin-input--abschnitt {
  flex: 0 1 10rem;
}

.schrittkopf .admin-input--zeichen {
  flex: 0 1 9rem;
}

.schrittkopf .admin-remove {
  margin-left: auto;
}

.schrittpaar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

/* Die Wahl, was vor dem Schritt steht: sechs kleine Flächen zum Antippen.
   Gewählt ist, was hervorgehoben ist — dasselbe Zeichen wie später auf dem
   Tablet, damit man nicht von "Toast 1" auf eine Scheibe schließen muss. */
.zeichenwahl {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.15rem;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  background: var(--mila-surface);
}

.zeichenwahl__feld {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 1.9rem;
  border-radius: 7px;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  cursor: pointer;
}

.zeichenwahl__knopf {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.zeichenwahl__feld:hover {
  background: var(--mila-surface-soft);
}

.zeichenwahl__feld:has(.zeichenwahl__knopf:checked) {
  background: var(--kategorie-farbe, var(--mila-accent));
  color: #fff;
}

.zeichenwahl__feld:has(.zeichenwahl__knopf:focus-visible) {
  outline: 2px solid var(--mila-accent);
  outline-offset: 2px;
}

/* Die Scheibe im Auswahlfeld: so groß wie die Zeile, nicht wie auf dem Tablet. */
.zeichenwahl__zeichen .toaststufe {
  width: 1.4em;
  height: 1.4em;
  margin: 0;
  vertical-align: middle;
}

/* Die Lage der Vorschau: hochkant wie in der Küche, quer zum Nachsehen. */
.vorschaukopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.vorschaukopf__lage {
  display: flex;
  gap: 0.15rem;
  margin-bottom: 0.6rem;
}

.vorschaukopf__knopf {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.vorschaukopf__knopf.is-hier {
  border-color: var(--mila-accent);
  background: var(--mila-accent);
  color: #fff;
}

.vorschaufenster--quer {
  --vorschau-breite: 1180px;
  --vorschau-hoehe: 820px;
  --vorschau-faktor: 0.24;
}

/* Ein Abschnitt der Zubereitung: seine Überschrift einmal oben, darunter seine
   Schritte. Vorher stand in jeder Zeile noch einmal "Vor dem Ofen" — bei sechs
   Schritten sechsmal dasselbe Wort. */
.schrittgruppe {
  margin-bottom: 0.9rem;
  padding: 0.6rem 0.7rem 0.7rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.schrittgruppe__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.schrittgruppe__kopf .admin-input--abschnitt {
  flex: 0 1 14rem;
}

/* Das ✕ am Abschnitt steht in der Zeile und nicht darüber.
 *
 * .admin-remove ist für die Zeilen gedacht, die position: relative tragen — im
 * Gruppenkopf fehlte dieser Bezugspunkt, und der Knopf sprang an den nächsten
 * positionierten Vorfahren weiter oben. Er war da, nur nicht dort, wo man ihn
 * sucht: Abschnitte ließen sich deshalb nicht löschen. */
.schrittgruppe__kopf .admin-remove {
  position: static;
  flex: none;
}

.schrittgruppe .admin-nested__row {
  background: var(--mila-surface);
}

/* Die Karten der Startseiten — in der Academy ihre beiden Teile, bei den Stages
 * Küche, Bar und Wiki.
 *
 * Vorher standen sie als Kacheln in einer Karte und ihre Einstellungen als Liste
 * darunter — zwei Rahmen um dasselbe und zweimal dieselben Namen. Jetzt ist jeder
 * Bereich eine Karte, die alles trägt, was zu ihm gehört: den Weg hinein, seine
 * Nebenwege und seine Einstellungen. Beide Startseiten teilen sich die Gestalt;
 * wer eine ändert, ändert die andere mit — sie sollen gleich aussehen. */
.bereichskarten {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .bereichskarten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.bereichskarte {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow);
  overflow: hidden;
}

/* Der farbige Streifen steht oben und nennt den Teil, ohne ein Wort dafür zu
   brauchen — dieselbe Geste wie über den Karten des Anleitungsformulars. */
.bereichskarte::before {
  content: "";
  height: 4px;
  background: var(--bereich-farbe, var(--mila-accent));
  opacity: 0.9;
}

.bereichskarte__weg {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  color: inherit;
  text-decoration: none;
}

.bereichskarte__name {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.bereichskarte__zweck {
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

.bereichskarte__zahl {
  margin-top: 0.35rem;
  color: var(--bereich-farbe, var(--mila-accent));
  font-size: 0.85rem;
  font-weight: 700;
}

.bereichskarte__weg:hover .bereichskarte__name {
  color: var(--bereich-farbe, var(--mila-accent));
}

/* Abgeschaltet, aber nicht eingeschlossen: Die Karte bleibt und führt wie jede
   andere in die Anleitungen — sie tritt nur zurück, und der Vermerk sagt, warum. */
.bereichskarte--aus {
  background: var(--mila-surface);
}

.bereichskarte--aus .bereichskarte__name {
  color: var(--mila-text-soft);
}

.bereichskarte__aus {
  margin-top: 0.15rem;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

/* Die Nebenwege leise am Fuß: Man geht sie selten, und wenn, dann gezielt. */
.bereichskarte__fuss {
  display: flex;
  gap: 1.25rem;
  margin-top: auto;
  padding: 0.8rem clamp(1.1rem, 2.5vw, 1.6rem);
  border-top: 1px solid var(--mila-line);
}

.bereichskarte__link {
  color: var(--mila-text-soft);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

.bereichskarte__link:hover {
  color: var(--mila-accent);
}

/* Der Name des Teils in der Zeile mit dem Wechsel: erst wo man ist, daneben
   wohin man sonst könnte. Er ist die Überschrift der Seite und steht deshalb
   groß — die Seite selbst trägt ihn dann nicht noch einmal. */
.admin-subheader__titel {
  margin: 0 1.1rem 0 0;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Aufgabenformular in der Regie ------------------------------------------- */

/* Drei Arten nebeneinander: jetzt schicken, einmalig, wiederkehrend. Nur die
   Felder der gewählten Art stehen darunter — siehe aufgabenart_controller.js. */
.aufgabenart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.aufgabenart__wahl,
.wochentage__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.92rem;
}

/* Die sieben Tage in einer Reihe, in der Reihenfolge der Woche. */
.wochentage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
}

/* Die Regeln stehen abgesetzt unter den Aufgaben: Sie sind der Plan, nicht der
   heutige Handgriff. */
.aufgabenregeln {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mila-line);
}

.admin-aufgabe--aus {
  opacity: 0.6;
}

.admin-aufgabe__wege {
  display: flex;
  flex: none;
  gap: 0.4rem;
}

/* Bearbeiten, Umschalten, Löschen: drei runde Icon-Knöpfe auf derselben Zeile,
   derselben Höhe, demselben Gewicht — keiner sagt durch seine Form allein schon
   "ich bin wichtiger". Erst die Farbe unterscheidet den gefährlichen Knopf.
   Bearbeiten öffnet das Pop-up-Fenster (siehe .aufgabenpopup weiter unten). */
.aufgabenzeile__symbol {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--mila-text-soft);
  text-decoration: none;
  cursor: pointer;
}

.aufgabenzeile__symbol svg {
  width: 17px;
  height: 17px;
}

.aufgabenzeile__symbol:hover {
  background: var(--mila-surface-soft);
  color: var(--mila-accent);
}

.aufgabenzeile__symbol--gefahr:hover {
  color: #b23b3b;
}

.aufgabenzeile__symbolform {
  margin: 0;
  line-height: 0;
}

/* Die Woche im Überblick: fünf schmale Spalten, jede für sich still — erst ein
   Eintrag macht sie zu mehr als einem Datum. */
.aufgabenwoche {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mila-line);
}

/* Eine Woche je Bühne unter einer gemeinsamen Überschrift: Die Trennlinie steht
   über allen, nicht zwischen ihnen — es ist ein Abschnitt mit zwei Kalendern. */
.aufgabenwochen {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mila-line);
}

.aufgabenwochen .aufgabenwoche {
  margin-top: 1rem;
  padding-top: 0;
  border-top: 0;
}

/* Der Name der Bühne mit einem Punkt in ihrer Farbe — derselbe Ton wie an den
   Aufgaben selbst, damit man Küche und Bar ohne zu lesen auseinanderhält. */
.aufgabenwoche__buehne {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.aufgabenwoche__buehne::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--buehnen-farbe, var(--mila-accent));
}

/* Der hochgeladene Nachweis als Datei und nicht als Textzeile: Man sucht hier
   etwas zum Herunterladen, und ein unterstrichener Dateiname sieht aus wie eine
   Fußnote.

   Ausgegraut steht er auch dort, wo noch nichts hochgeladen ist — ein Strich
   sagt nicht, dass an dieser Stelle etwas hingehört. */
/* Das Laden steht neben dem Ansehen und tritt dabei zurück: Geprüft wird am
   Bildschirm, abgelegt wird die Datei. */
.nachweis--laden {
  margin-left: 0.4rem;
  color: var(--mila-text-soft);
  font-weight: 500;
}

.nachweis {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--mila-line);
  border-radius: 8px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
}

a.nachweis:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

.nachweis__blatt { font-size: 1rem; line-height: 1; }

.nachweis__name {
  max-width: 18ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nachweis--leer {
  border-style: dashed;
  background: transparent;
  color: var(--mila-text-soft);
  font-weight: 400;
}

.nachweis--leer .nachweis__name { max-width: none; }

/* Die Zeichen zum Auszeichnen als Knöpfe. Gespeichert wird weiterhin einfacher
   Text — die Knöpfe setzen nur die Sternchen und Unterstriche, die die Academy
   ohnehin versteht. */
.auszeichnung {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.4rem;
}

.auszeichnung__knopf {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mila-line);
  border-radius: 7px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

.auszeichnung__knopf:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

.auszeichnung__hinweis {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  color: var(--mila-text-soft);
}

/* Ein Satz braucht mehr als eine Zeile: Wer eine Beschreibung tippt, verlor
   sonst den Anfang aus dem Blick, sobald sie über die Feldbreite ging — und
   schrieb blind weiter. */
/* Mehrere Tische an einer Reservierung: Das Feld braucht Höhe, sonst sieht man
   immer nur eine Zeile und weiß nicht, dass man mehrere wählen kann. */
.admin-input--mehrfach {
  padding: 0.35rem;
  min-height: 6rem;
}

.admin-input--satz {
  min-height: 4.5rem;
  line-height: 1.45;
  resize: vertical;
}

/* Sieben Spalten, aber nicht um jeden Preis: Unter 1100px werden sie zu schmal,
   um einen Aufgabentitel zu lesen — dann lieber vier und vier. */
.aufgabenwoche__raster {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.75rem;
}

@media (max-width: 1100px) {
  .aufgabenwoche__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .aufgabenwoche__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aufgabenwoche__tag {
  padding: 0.75rem 0.65rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.aufgabenwoche__tag--heute {
  border-color: var(--mila-accent);
  background: color-mix(in srgb, var(--mila-accent) 6%, var(--mila-surface));
}

.aufgabenwoche__kopf {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.aufgabenwoche__tag--heute .aufgabenwoche__kopf {
  color: var(--mila-accent);
}

.aufgabenwoche__liste {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
}

.aufgabenwoche__zeit {
  display: block;
  color: var(--mila-text-soft);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.aufgabenwoche__leer {
  margin: 0;
  color: var(--mila-line);
}

/* Der Tag, den man gerade ansieht — umrandet, damit erkennbar ist, dass sich
   alles darin auf diesen einen Tag bezieht und nicht auf "immer". Heute trägt
   die Farbe der Marke, jeder andere Tag bleibt still: Sonst sähe ein Blick auf
   gestern aus wie der auf jetzt. */
.aufgabentag {
  padding: 0.9rem clamp(0.75rem, 1.5vw, 1.15rem) 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.aufgabentag--heute {
  border-color: var(--mila-accent);
  background: color-mix(in srgb, var(--mila-accent) 5%, var(--mila-surface));
}

.aufgabentag__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Die Pfeile sitzen an derselben Stelle wie die Knöpfe in den Zeilen darunter:
   gleiche Größe, gleiche Form — sie sind ein Weg, keine Handlung. */
.aufgabentag__pfeil {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--mila-text-soft);
  text-decoration: none;
}

.aufgabentag__pfeil svg {
  width: 18px;
  height: 18px;
}

.aufgabentag__pfeil:hover {
  background: var(--mila-surface-soft);
  color: var(--mila-accent);
}

.aufgabentag__datum {
  flex: 1;
  margin: 0;
  text-align: center;
  font-weight: 700;
  font-size: 0.98rem;
}

.aufgabentag--heute .aufgabentag__datum {
  color: var(--mila-accent);
}

.aufgabentag__datum-klein {
  display: block;
  color: var(--mila-text-soft);
  font-weight: 400;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.aufgabentag__zurueck {
  flex: none;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

/* Ohne Linie darüber: Im Rahmen des Tages sitzen die Spalten schon abgesetzt. */
.aufgabentag .admin-aufgaben-spalten {
  margin-top: 0.8rem;
  padding-top: 0;
  border-top: 0;
}

/* Die Gästeliste: eine Zeile je Tisch, gelesen wie ein Fahrplan.
 *
 * Die Uhrzeit steht vorn und in gleichen Ziffernbreiten — im Service liest man
 * die Spalte von oben nach unten ab, und dann dürfen die Zahlen nicht tanzen. */
.gaesteliste__zeit {
  display: inline-block;
  min-width: 4.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gaesteliste__zahl {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
  font-size: 0.8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Der Stand als Wort, nicht als Farbe allein: "ist da" liest auch, wer Farben
   schlecht unterscheidet. */
.gaesteliste__stand {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.04rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  font-size: 0.74rem;
  font-weight: 600;
}

.gaesteliste__stand--da {
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
}

/* Im Service stehen drei Knöpfe nebeneinander in einer Zeile — sie dürfen nicht
   umbrechen, sonst wächst jede Zeile auf zwei. */
.gaesteliste .admin-aufgabe__wege {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.gaesteliste .admin-aufgabe__wege form {
  margin: 0;
}

/* Das Eintragen steht unter der Liste und soll nicht wie ein zweiter Bildschirm
   wirken — enger gesetzt als ein Formular, das für sich allein steht. */
.gaesteliste__form .admin-card {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}

/* Suchen über alle Tage --------------------------------------------------- */

/* Über der Liste, weil die Frage, mit der man herkommt, oft keine Frage nach
   heute ist: "Die Huber hat angerufen — wann war die nochmal bei uns?" */
.gaestesuche {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.gaestesuche__feld {
  flex: 1 1 18rem;
  min-width: 0;
  box-sizing: border-box;
}

/* Zwei Gruppen und keine Liste: "Kommt die noch?" und "wann war die zuletzt
   da?" sind zwei Fragen, und eine gemischte Liste beantwortet keine davon auf
   einen Blick. */
.suchgruppe + .suchgruppe {
  margin-top: 1.4rem;
}

.suchgruppe__titel {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  color: var(--m-text-soft);
}

.suchliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.suchtreffer {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr auto auto;
  align-items: center;
  gap: 0.3rem 1rem;
  padding: 0.55rem 0.55rem;
  border-radius: var(--m-radius);
}

.suchtreffer + .suchtreffer {
  border-top: 1px solid var(--m-line-soft);
}

.suchtreffer:hover {
  background: var(--m-hover);
}

.suchtreffer__zeit {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.suchtreffer__wort {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.suchtreffer__dazu {
  color: var(--m-text-soft);
  font-size: 0.85rem;
}

@media (max-width: 620px) {
  .suchtreffer {
    grid-template-columns: 1fr auto;
  }
}

/* Sperrzeiten: wann nichts vergeben wird --------------------------------- */

/* Kurze Liste, kurze Zeilen: Zeit, Grund, weg damit. Es sind selten mehr als
   eine Handvoll, und jede davon ist ein Ereignis und keine Regel. */
.sperrliste {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  max-width: 46rem;
}

.sperrzeile {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr 2rem;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.5rem 0.3rem 0.5rem 0.55rem;
  border-radius: var(--m-radius);
}

.sperrzeile + .sperrzeile {
  border-top: 1px solid var(--m-line-soft);
}

.sperrzeile:hover {
  background: var(--m-hover);
}

.sperrzeile__zeit {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sperrzeile__grund {
  color: var(--m-text-soft);
  font-size: 0.9rem;
}

.sperrzeile .tischzeile__weg {
  justify-self: end;
}

.sperrform {
  max-width: 46rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--m-line-soft);
}

/* Die Newsletter-Zusagen -------------------------------------------------- */

/* Sie lagen in der Datenbank und standen auf keiner Seite. Eine Liste und keine
   Tabelle: Es sind drei Angaben je Zeile, und Spaltenköpfe für drei Angaben
   sind mehr Gerüst als Inhalt. */
.newsliste {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 48rem;
}

.newszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
  padding: 0.55rem 0.35rem;
}

.newszeile + .newszeile {
  border-top: 1px solid var(--m-line-soft);
}

.newszeile__name {
  min-width: 10rem;
  font-weight: 600;
}

.newszeile__adresse {
  color: var(--m-text-soft);
}

/* Noch nicht im Verteiler. Nur wenn es so ist: Der Normalfall braucht kein
   Schild. */
.newszeile__offen {
  padding: 0.02rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
  font-size: 0.74rem;
  font-weight: 600;
}

.newszeile__seit {
  margin-left: auto;
  color: var(--m-text-faint);
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  /* Noch nicht im Verteiler. Nur wenn es so ist: Der Normalfall braucht kein
   Schild. */
.newszeile__offen {
  padding: 0.02rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
  font-size: 0.74rem;
  font-weight: 600;
}

.newszeile__seit {
    margin-left: 0;
    flex: 1 0 100%;
  }
}

/* Die Zahlen eines Monats ------------------------------------------------- */

/* Balken aus dem Stilblatt und kein Diagrammwerkzeug: Es sind vier Reihen mit
   je einer Zahl. Eine Bibliothek dafür wäre mehr Pflege als Erkenntnis — und
   sie sähe aus wie ein fremdes Programm mitten in der Seite. */
.zahlenkopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2.75rem;
  margin: 1rem 0 0;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--m-line-soft);
}

.zahlenkopf__wert {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.zahlenkopf__wert b {
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.zahlenkopf__wert span {
  color: var(--m-text-soft);
  font-size: 0.9rem;
}

/* Was danebenging. Mit Anteil, denn "drei nicht erschienen" heißt bei dreißig
   Reservierungen etwas anderes als bei fünf. */
.zahlenlage {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
  color: var(--m-text-soft);
}

.zahlenlage b {
  color: var(--m-text);
  font-variant-numeric: tabular-nums;
}

.zahlenlage__anteil {
  margin-left: 0.35rem;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: var(--m-hover);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Über zehn Prozent nicht erschienen ist kein Ausrutscher mehr, sondern ein
   Muster — dann trägt die Zeile den Warnton. */
.zahlenlage--warn .zahlenlage__anteil {
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
}

.balken {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
  max-width: 44rem;
}

.balken__zeile {
  display: grid;
  grid-template-columns: 6.5rem 1fr 4.5rem;
  align-items: center;
  gap: 0.75rem;
}

.balken__wort {
  font-size: 0.86rem;
  color: var(--m-text-soft);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.balken__spur {
  height: 1.1rem;
  border-radius: 999px;
  background: var(--m-hover);
  overflow: hidden;
}

/* Der Balken trägt die Gästefarbe: Auf dieser Seite ist sie die einzige Farbe,
   die etwas bedeutet. */
.balken__stab {
  display: block;
  width: var(--anteil, 0%);
  min-width: 2px;
  height: 100%;
  border-radius: 999px;
  background: var(--mila-gast, #ffc72c);
}

.balken__zahl {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  justify-content: flex-end;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.balken__anteil {
  color: var(--m-text-faint);
  font-size: 0.76rem;
  font-weight: 400;
}

@media (max-width: 34rem) {
  .balken__zeile {
    grid-template-columns: 5rem 1fr 3.5rem;
    gap: 0.5rem;
  }
}

/* Die Gästeliste als eigenständiges Werkzeug ------------------------------ */

/* Sie lag im Rahmen der Regie und sah aus wie ein Modul unter zwölf anderen.
   Das war sie einmal; sie ist es nicht mehr — sie ist ein Reservierungstool,
   das eines Tages unter eigener Adresse stehen soll.
 *
 * Die Klasse "regie" bleibt am Körper: An ihr hängen Karten, Felder und Knöpfe,
 * und die sind dieselben. Ausgetauscht wird nur, was Zugehörigkeit zeigt — der
 * Akzent und der Kopf. Ein zweiter Satz Bausteine liefe auseinander. */
body.gaesteliste-werkzeug {
  /* Ein Gelb und nicht zwei.
   *
   * Hier stand kurz das satte Gold als Akzent — weil weiße Schrift auf dem
   * hellen Gelb nicht zu lesen ist. Damit gab es aber zwei Gelbtöne auf
   * derselben Seite: das leuchtende im Kopf und ein bräunliches darunter. Zwei
   * Töne derselben Farbe sehen nicht nach zwei Bedeutungen aus, sondern nach
   * einem Fehler.
   *
   * Also wie auf der Buchungsseite: Der Knopf ist schwarz und die Schrift
   * darauf gelb. Dann leuchtet das Gelb genau dort, wo es etwas heißt — im
   * Kopf, auf belegten Tischen, beim Stammgast. */
  --mila-accent: var(--mila-nacht);
  --mila-accent-soft: var(--mila-gast-soft);
}

/* Der Knopf ist schwarz, die Schrift darauf gelb — wie "Tisch reservieren" auf
   der Buchungsseite. Die Regie schreibt sonst weiß auf ihren Akzent; hier ist
   der Akzent das Hausschwarz, und darauf gehört das Gelb. */
body.regie.gaesteliste-werkzeug .admin-button--primary,
body.regie.gaesteliste-werkzeug .admin-button--primary:hover {
  color: var(--mila-gast);
}

/* In der Regie trägt der Knopf die Maße der anderen Knöpfe und nur seine Farbe
   von sich aus — sonst stünde neben "Buchungsseite" plötzlich ein anderes
   Format. */
body.regie .gaesteplus {
  padding: 0.5rem 1.1rem;
}

/* Größer auf dem Bildschirm: Am Tablet zählt jeder Millimeter Höhe, am Rechner
   ist Platz — und dort darf die Marke tragen, was sie ist. */
@media (min-width: 62rem) {
  .gwerk-kopf__innen {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .gwerk-marke__logo {
    height: 2rem;
  }

  .gwerk-marke__strich {
    height: 1.9rem;
  }

  .gwerk-marke__wort {
    font-size: 0.88rem;
  }
}

.gwerk-kopf {
  background: var(--mila-nacht, #15170f);
  color: var(--mila-bg, #f4f2e6);
}

.gwerk-kopf__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
  padding: 0.75rem clamp(1rem, 3vw, 2.5rem);
}

/* Die beiden Marken: das Logo des Hauses und daneben, welches Werkzeug das ist
   — dieselben zwei wie auf der Seite, die der Gast sieht. */
.gwerk-marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

/* Das Logo ist dunkel auf durchsichtig; auf dem dunklen Band wird es hell
   gefärbt, statt eine zweite Datei zu pflegen, die beim nächsten Logowechsel
   vergessen wird. */
.gwerk-marke__logo {
  height: 1.5rem;
  width: auto;
  filter: brightness(0) invert(1);
}

.gwerk-marke__strich {
  width: 1px;
  height: 1.4rem;
  background: rgba(255, 255, 255, 0.28);
}

.gwerk-marke__wort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gwerk-marke__wort .gaestezeichen {
  width: 1.3em;
  height: 1.3em;
  color: var(--mila-gast, #ffc72c);
}

/* Die vier Orte des Werkzeugs. Sie standen als Knöpfe auf jeder Seite verstreut
   — mal zwei, mal drei, je nachdem wo man war. Wege gehören in den Kopf. */
.gwerk-wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-right: auto;
}

.gwerk-weg {
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  color: rgba(244, 242, 230, 0.72);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--m-ease), color var(--m-ease);
}

.gwerk-weg:hover {
  background: rgba(255, 255, 255, 0.09);
  color: var(--mila-bg, #f4f2e6);
}

/* Wo man ist, trägt die Gästefarbe: Sie ist auf dem dunklen Band das eine, was
   leuchtet, und damit die richtige Stelle für "hier".
 *
 * Mit :hover in derselben Regel, sonst gewinnt der Mauszeiger. Genau das ist
 * passiert: Nach dem Klick blieb der Zeiger auf dem Reiter stehen, :hover hat
 * dieselbe Stärke wie die Klasse und kommt später — das Gelb blitzte auf und
 * war wieder weg. Es war nie weg, es lag nur darunter. */
.gwerk-weg--hier,
.gwerk-weg--hier:hover,
.gwerk-weg--hier:focus-visible {
  background: var(--mila-gast, #ffc72c);
  color: var(--mila-nacht, #15170f);
}

.gwerk-kopf__rechts {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.gwerk-ansehen {
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  text-decoration: none;
}

.gwerk-ansehen:hover {
  background: rgba(255, 255, 255, 0.09);
}

/* Der Weg zurück: leise, aber da. Solange beide Werkzeuge zusammenliegen, muss
   man hin- und herkommen. */
.gwerk-zurueck {
  color: rgba(244, 242, 230, 0.5);
  font-size: 0.82rem;
  text-decoration: none;
}

.gwerk-zurueck:hover {
  color: var(--mila-bg, #f4f2e6);
  text-decoration: underline;
}

.gwerk-fuss {
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 2.5rem;
  color: var(--m-text-faint);
  font-size: 0.8rem;
}

.gwerk-fuss p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.gwerk-fuss__weg {
  color: var(--m-text-soft);
  text-decoration: none;
}

.gwerk-fuss__weg:hover {
  text-decoration: underline;
}

/* Die Wortmarke erbt hier ihre Farbe, statt ihr fast schwarzes Grau zu behalten
   — genau daran ist im Mailfuß einmal "powered by back" entstanden. */
.gwerk-fuss__weg .produkt-signatur__back,
.gwerk-fuss__weg .produkt-signatur__stage {
  color: inherit;
}

@media (max-width: 46rem) {
  .gwerk-kopf__innen {
    gap: 0.5rem 1rem;
  }

  .gwerk-wege {
    order: 3;
    flex: 1 0 100%;
    margin-right: 0;
  }

  .gwerk-weg {
    padding: 0.35rem 0.7rem;
    font-size: 0.85rem;
  }
}

/* Das Gästeverzeichnis --------------------------------------------------- */

/* Karten und keine Tabelle: Ein Gast ist keine Zeile mit sechs Spalten, sondern
   ein Name, eine Zahl und ein Satz darüber, was man über ihn weiß. */
.gaesteverzeichnis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gastkarte {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.85rem 0.95rem 0.9rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}

.gastkarte--stamm {
  border-color: var(--mila-accent);
}

.gastkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}

.gastkarte__name {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.gastkarte__name:hover {
  text-decoration: underline;
}

.gastkarte__zahlen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.85rem;
  color: var(--m-text-soft);
}

.gastkarte__zahlen b {
  font-size: 1.25rem;
  color: var(--m-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.gastkarte__leise {
  color: var(--m-text-faint);
}

/* Dass jemand demnächst kommt, ist die Auskunft, die im Betrieb zählt: Dann
   weiß man beim Anruf schon, worum es geht. */
.gastkarte__kommt {
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
  font-size: 0.74rem;
  font-weight: 700;
}

.gastkarte__kontakt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  margin: 0;
  font-size: 0.82rem;
}

.gastkarte__kontakt a {
  color: var(--m-text-soft);
}

/* Was über den einzelnen Abend hinaus gilt — in der Karte zum Nachlesen,
   geändert wird es im Fenster der Reservierung. */
.gastkarte__notiz {
  margin: 0.15rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid var(--m-line-soft);
  color: var(--m-text-lead);
  font-size: 0.84rem;
  line-height: 1.45;
}

/* Wer schon da war ------------------------------------------------------- */

/* Im Service erkennt man den Stammgast am Gesicht. Wer neu in der Schicht ist,
   erkennt ihn nur, wenn es jemand hingeschrieben hat — und zwar dort, wo der
   Name steht, nicht drei Klicks entfernt. */
.gastgeschichte {
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: var(--m-radius);
  background: var(--m-hover);
}

.gastgeschichte__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.7rem;
  margin: 0;
}

/* Ein Wort und kein Sternchen: Wer neu in der Schicht ist, weiß nicht, wofür
   ein Stern steht. */
.gastgeschichte__marke {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--mila-accent);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}

/* Kein Urteil, ein Hinweis — deshalb der Warnton und nicht das Rot der Glocke. */
.gastgeschichte__marke--warn {
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
}

.gastgeschichte__zahl {
  color: var(--m-text-soft);
  font-size: 0.86rem;
}

.gastgeschichte__liste {
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.gastgeschichte__besuch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.6rem;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.gastgeschichte__dazu {
  color: var(--m-text-soft);
}

/* Dasselbe Wort in der Zeile der Tagesliste, nur leiser: Dort ist es eine
   Auskunft im Vorbeigehen und nicht die Überschrift. */
.gastzeile__stammgast {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 0.1em;
}

/* Die Woche ---------------------------------------------------------------- */

/* Sieben Spalten und keine Tabelle: Man vergleicht die Tage miteinander, und
   dafür müssen sie nebeneinanderstehen. Auf schmalen Bildschirmen werden daraus
   Karten untereinander — dann liest man sie eben nacheinander. */
.wochenraster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.wochentag {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-height: 7rem;
  padding: 0.7rem 0.75rem 0.85rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}

/* Ein Tag, an dem etwas steht, trägt Farbe. "Voll" heißt hier nur: Da steht
   etwas — wie voll es wirklich wird, sagt die Zahl. Eine Ampel bräuchte eine
   Schwelle, die niemand festgelegt hat. */
.wochentag--voll {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

/* Heute bekommt eine Kante, keine zweite Farbe: Sonst stritte sie mit der
   Auskunft darüber, ob an dem Tag etwas los ist. */
.wochentag--heute {
  box-shadow: inset 0 0 0 2px var(--m-text);
}

.wochentag__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  color: inherit;
  text-decoration: none;
}

.wochentag__kopf:hover .wochentag__name {
  text-decoration: underline;
}

.wochentag__name {
  font-weight: 700;
  font-size: 0.92rem;
}

.wochentag__datum {
  color: var(--m-text-faint);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.wochentag__zahl {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  margin: 0;
}

.wochentag__zahl b {
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.wochentag__zahl span {
  color: var(--m-text-soft);
  font-size: 0.82rem;
}

.wochentag__liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.wochentag__eintrag {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
}

.wochentag__zeit {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wochentag__eintrag .gastzeile__auf {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wochentag__zahl-klein {
  flex: none;
  padding: 0.02rem 0.35rem;
  border-radius: 999px;
  background: var(--m-surface);
  color: var(--m-text-soft);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.wochentag__leer {
  margin: auto 0 0;
  color: var(--m-text-faint);
  font-size: 0.85rem;
}

/* Sieben nebeneinander, sobald Platz ist. Mit auto-fit allein rutschte der
   Sonntag in eine zweite Reihe — und eine Woche mit sechs Tagen oben und einem
   darunter liest sich nicht als Woche. */
@media (min-width: 60rem) {
  .wochenraster {
    grid-template-columns: repeat(7, 1fr);
  }
}

/* Der Grundriss: die Tische im Raum ------------------------------------- */

/* Mit Rückfallwerten, weil dieser Baustein an zwei Orten steht: in der Regie
   (body.regie, kühle --m-Werte) und auf dem Tablet (body.kitchen, warme
   --mila-Werte). Ohne Rückfall wäre er auf dem Tablet farblos. */

/* Eine Liste sagt, welche Tische es gibt; sie sagt nicht, welcher der am
   Fenster ist. Im Service zeigt man auf den Tisch hinten links und nicht auf
   den vierten Eintrag von oben.
 *
 * Gerechnet wird in Prozent der Fläche: Der Raum ist auf jedem Bildschirm
 * derselbe. Deshalb ein festes Seitenverhältnis — mal breiter, mal höher wäre
 * ein anderer Raum. */
.grundriss__flaeche {
  position: relative;
  aspect-ratio: 3 / 2;
  /* Klein genug, um ihn auf einen Blick zu fassen: Der Grundriss ist eine
     Skizze des Raums und keine Landkarte. Über die ganze Kartenbreite gezogen
     musste man ihn absuchen statt ihn zu sehen. */
  max-width: 30rem;
  margin: 0.8rem 0 0;
  border: 1px solid var(--m-line, var(--mila-line));
  border-radius: var(--m-radius, var(--mila-radius-sm));
  background:
    linear-gradient(var(--m-line-soft, var(--mila-line)) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    linear-gradient(90deg, var(--m-line-soft, var(--mila-line)) 1px, transparent 1px) 0 0 / 2.5rem 100%,
    var(--m-surface, var(--mila-surface));
  overflow: hidden;
  touch-action: none;
}

.grundriss__leer {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 1rem;
  color: var(--m-text-faint, var(--mila-text-soft));
  font-size: 0.9rem;
  text-align: center;
}

/* Ein Tisch: eckig wie im Lokal, so groß wie seine Plätze.
 *
 * Er war erst rund — das sah nach Grundriss aus, entsprach aber keinem Tisch,
 * der hier steht. Und liegend statt quadratisch: Ein Tischname braucht Breite,
 * und von oben gesehen ist ein Tisch für vier auch länger als tief.
 *
 * Er sitzt mit seiner Mitte auf dem gespeicherten Punkt — sonst läge der
 * Griffpunkt in der Ecke, und beim Ziehen sprünge er unter der Hand weg. */
.grundriss__tisch {
  position: absolute;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  gap: 0.05rem;
  width: calc(var(--tischgroesse, 8) * 0.44rem);
  height: calc(var(--tischgroesse, 8) * 0.28rem);
  padding: 0.15rem 0.25rem;
  border: 1.5px solid var(--m-text, var(--mila-text));
  border-radius: 3px;
  background: var(--m-surface, var(--mila-surface));
  text-align: center;
  line-height: 1.1;
  user-select: none;
}

.grundriss--ziehbar .grundriss__tisch {
  cursor: grab;
  touch-action: none;
}

.grundriss__tisch.is-dragging {
  z-index: 2;
  cursor: grabbing;
  box-shadow: var(--m-overlay, var(--mila-shadow-lifted));
}

.grundriss__name {
  font-size: 0.63rem;
  font-weight: 700;
  white-space: nowrap;
  /* Über den Kreis hinaus statt abgeschnitten: "Fensterbank" wurde zu "Fenst…",
     und damit war der Tisch nicht mehr zu erkennen. Wer zwei Tische dicht
     nebeneinander stellt, sieht die Namen überlappen — das ist eine Auskunft
     über den Grundriss und kein Fehler. */
  max-width: 200%;
  overflow: visible;
}

.grundriss__plaetze {
  font-size: 0.58rem;
  color: var(--m-text-faint, var(--mila-text-soft));
  font-variant-numeric: tabular-nums;
}

/* Belegt trägt Farbe, frei bleibt still: Gesucht wird das Freie, gefunden
   werden muss das Belegte. */
.grundriss__tisch--belegt {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

.grundriss__tisch--belegt .grundriss__plaetze {
  color: var(--mila-accent);
}

/* Wer darauf sitzt. Außerhalb des Kreises, damit der Tisch nicht mit Text
   zuläuft — ein runder Tisch mit drei Zeilen darin ist keiner mehr. */
.grundriss__gast {
  position: absolute;
  top: calc(100% + 0.1rem);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: var(--mila-accent);
  font-size: 0.62rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Ein Tisch, der gerade nicht aktiv ist: gestrichelt, aber an seinem Platz. Er
   ist im Raum eine Lücke, und die will man sehen. */
.grundriss__tisch--aus {
  border-style: dashed;
  border-color: var(--m-line, var(--mila-line));
  color: var(--m-text-faint, var(--mila-text-soft));
  background: transparent;
}

/* Was noch nicht steht, liegt darunter in einer Reihe — nicht übereinander in
   der Ecke der Fläche. */
.grundriss__ablage {
  max-width: 30rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.8rem;
  border: 1px dashed var(--m-line, var(--mila-line));
  border-radius: var(--m-radius, var(--mila-radius-sm));
}

.grundriss__ablage-titel {
  flex: 1 0 100%;
  margin: 0;
  color: var(--m-text-faint, var(--mila-text-soft));
  font-size: 0.8rem;
}

.grundriss__tisch--liegt {
  position: static;
  transform: none;
}

/* Der Tag aus Sicht der Tische ------------------------------------------- */

/* Im Service steht neben "wer kommt wann" die andere Frage: "welcher Tisch ist
   schon weg?" Sie stand bisher nur in der aufgeklappten Auswahl einer einzelnen
   Zeile — und beantwortete sich dort für genau diese eine Reservierung.
 *
 * Kacheln und keine Liste: Man sucht einen bestimmten Tisch und liest nicht von
 * oben nach unten. Belegt trägt Farbe, frei bleibt still — gesucht wird das
 * Freie, gefunden werden muss das Belegte. */
.tischbild__liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tischbild__tisch {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
}

.tischbild__tisch--belegt {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

.tischbild__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 700;
}

/* Wie viele daran sitzen. Klein und in der Ecke: Es ist der Wert, den man
   braucht, wenn man schon weiß, welchen Tisch man sucht. */
.tischbild__plaetze {
  flex: none;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--m-hover);
  color: var(--m-text-soft);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tischbild__tisch--belegt .tischbild__plaetze {
  background: var(--m-surface);
  color: var(--mila-accent);
}

.tischbild__gaeste {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tischbild__gast {
  font-size: 0.86rem;
  color: var(--m-text-soft);
  font-variant-numeric: tabular-nums;
}

/* "frei" steht da und nicht nichts: Eine leere Kachel liest sich wie ein
   Fehler, und man fragt sich, ob die Zuordnung verlorengegangen ist. */
.tischbild__frei {
  font-size: 0.86rem;
  color: var(--m-text-faint);
}

/* Der Raum: die Tische der Gästeliste ------------------------------------- */

/* Die Klassennamen standen schon im Markup, aber in keiner Stilvorlage — die
   Liste fiel deshalb auf die nackten Formularelemente des Browsers zurück und
   sah aus wie die Maske einer Datenbank. Genau das war die Rückmeldung.
 *
 * Der Grundgedanke: Es ist ein Gastraum und keine Tabelle. Man liest oben, wie
 * viele hineinpassen, und darunter, welche Tische das sind. Die Felder liegen
 * flach in der Zeile und sehen erst wie Felder aus, wenn man sie anfasst. */

/* Über der Überschrift: in welchem Werkzeug man gerade steht. Dieselbe Marke
   wie auf der Seite, die der Gast sieht. */
.werkzeugmarke {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--m-text-faint);
}

/* Das Zeichen trägt die Gästefarbe — der einzige Tupfer auf einer sonst kühlen
   Seite. Es ist die Farbe, die der Gast draußen sieht. */
.werkzeugmarke .gaestezeichen {
  width: 1.4em;
  height: 1.4em;
  color: var(--mila-gast-tief);
}

/* Die beiden Zahlen, die aus der Liste folgen. Groß, weil sie das sind, was
   jemand hier eigentlich wissen will — die Liste darunter ist nur der Weg
   dorthin. */
.tischplan__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.75rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--m-line-soft);
}

.tischplan__stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}

.tischplan__zahl {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.tischplan__wort {
  color: var(--m-text-soft);
  font-size: 0.9rem;
}

.tischplan {
  max-width: 46rem;
}

.tischplan__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Eine Zeile je Tisch: Name, Plätze, steht er, weg damit. Feste Spalten, damit
   die Zahlen untereinanderstehen — im Raum zählt man sie ab. */
.tischzeile {
  display: grid;
  /* Der Griff ganz vorn, damit die Hand ihn findet, ohne in ein Feld zu
     greifen. Die neue Zeile unten trägt keinen — dort gibt es noch nichts zu
     verschieben —, behält seine Spalte aber, damit die Namen fluchten. */
  grid-template-columns: 1.5rem minmax(7rem, 1fr) auto auto 2rem;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.25rem 0.3rem 0.25rem 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--m-radius);
}

.tischzeile + .tischzeile {
  margin-top: 0.1rem;
}

.tischzeile:hover {
  background: var(--m-hover);
}

/* Flach liegende Felder: eine leise Fläche statt eines Rahmens. Ein Rahmen je
   Feld ergab bei fünfzehn Tischen dreißig Kästchen, und das war der Eindruck
   einer Eingabemaske. Die Fläche sagt "hier kann man tippen", ohne zu rufen. */
.tischzeile__name,
.tischzeile__zahl {
  box-sizing: border-box;
  min-width: 0;
  padding: 0.42rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--m-radius-sm);
  background: var(--m-hover);
  font: inherit;
  color: inherit;
  transition: background var(--m-ease), border-color var(--m-ease);
}

.tischzeile__name {
  width: 100%;
  font-weight: 600;
}

.tischzeile__zahl {
  width: 4.5rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tischzeile__name:hover,
.tischzeile__zahl:hover {
  background: var(--m-line-soft);
}

.tischzeile__name:focus,
.tischzeile__zahl:focus {
  outline: none;
  background: var(--m-surface);
  border-color: var(--mila-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mila-accent) 18%, transparent);
}

/* Der Griff: leise, aber immer da. Diese Seite wird auch am iPad bedient, und
   ein Griff, der erst beim Darüberfahren erscheint, existiert dort nicht. */
.tischzeile__griff {
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--m-text-faint);
  font-size: 1.05rem;
  line-height: 1;
  cursor: grab;
  touch-action: none;
}

.tischzeile--neu .tischzeile__griff {
  visibility: hidden;
}

.tischzeile__plaetze {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.tischzeile__einheit {
  color: var(--m-text-faint);
  font-size: 0.85rem;
}

/* Ein Tisch, der gerade nicht steht: blass, aber da. Er ist nicht gelöscht,
   sondern eingelagert — im Frühjahr steht er wieder im Raum. */
.tischzeile--aus .tischzeile__name,
.tischzeile--aus .tischzeile__zahl,
.tischzeile--aus .tischzeile__einheit {
  color: var(--m-text-faint);
  font-weight: 400;
}

/* Der Schalter statt eines Kästchens: Er sagt etwas über den Raum ("steht") und
   nicht über ein Datenfeld ("aktiv"). */
.tischschalter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}

.tischschalter__box {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--m-line);
  appearance: none;
  cursor: pointer;
  transition: background var(--m-ease);
}

.tischschalter__box::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 20, 18, 0.25);
  transition: transform var(--m-ease);
}

.tischschalter__box:checked {
  background: var(--mila-accent);
}

.tischschalter__box:checked::after {
  transform: translateX(16px);
}

.tischschalter__box:focus-visible {
  outline: 2px solid var(--mila-accent);
  outline-offset: 2px;
}

.tischschalter__wort {
  color: var(--m-text-soft);
  font-size: 0.86rem;
}

/* Das Kreuz bleibt sichtbar, auch ohne Mauszeiger: Diese Seite wird am iPad
   bedient, und dort gibt es kein Darüberfahren. Leise genug, dass man es nicht
   aus Versehen trifft. */
.tischzeile__weg {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--m-text-faint);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--m-ease), color var(--m-ease);
}

.tischzeile__weg:hover,
.tischzeile__weg:focus-visible {
  background: var(--mila-warn-bg);
  color: var(--mila-glocke);
}

/* Die leere Zeile unten: gestrichelt, weil dort noch nichts steht. Dieselben
   Spalten wie darüber, obwohl zwei davon leer bleiben — sonst stünde das neue
   Namensfeld breiter da als alle anderen, und die Liste bekäme unten einen
   Knick. */
.tischzeile--neu {
  grid-template-columns: 1.5rem minmax(7rem, 1fr) auto;
  grid-column-gap: 1rem;
  margin-top: 0.7rem;
  padding: 0.45rem 0.55rem;
  border: 1px dashed var(--m-line);
}

.tischzeile--neu:hover {
  background: transparent;
}

/* Die eine Frage, die diese Seite stellt ---------------------------------- */

/* Sie stand zwischen vier gleich großen Zahlenfeldern und ging darin unter.
   Groß gesetzt ist sie das, was sie ist: die einzige Entscheidung hier. */
.grossefrage {
  margin: 0 0 1.25rem;
}

.grossefrage__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.grossefrage__eingabe {
  box-sizing: border-box;
  width: 7.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--m-line);
  border-radius: var(--m-radius);
  background: var(--m-surface);
  color: inherit;
  font: inherit;
  font-size: 1.9rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  text-align: center;
}

.grossefrage__eingabe:focus {
  outline: none;
  border-color: var(--mila-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mila-accent) 18%, transparent);
}

.grossefrage__dazu {
  max-width: 56ch;
  margin: 0.65rem 0 0;
  color: var(--m-text-soft);
  font-size: 0.88rem;
}

/* Zugeklapptes: Feineinstellungen und die Sätze je Mail ------------------- */

/* Beides dasselbe Muster wie die klappbaren Karten weiter oben — die
   Überschrift ist der Schalter, und sie steht dort in einer Selektorenliste
   neben diesen beiden. Hier trennt zusätzlich eine Linie, weil die Blöcke
   innerhalb einer Karte stehen und nicht selbst eine sind. */
.feinheiten,
.mailgruppe {
  margin-top: 0.9rem;
  border-top: 1px solid var(--m-line-soft);
}

.feinheiten__titel,
.mailgruppe__titel {
  padding: 0.75rem 0;
  font-weight: 600;
  color: var(--m-text-soft);
}

details[open] > .feinheiten__titel,
details[open] > .mailgruppe__titel {
  color: var(--m-text);
}

/* Wie oft eine Aufgabe schon weggedrückt wurde. Abgesetzt, weil es kein Teil
   des Zeitpunkts ist, sondern ein Hinweis darauf, dass hier etwas hängt. */
.admin-list__zaehler {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-accent);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}

/* Das Pop-up-Fenster zum Anlegen und Bearbeiten einer Aufgabe: eine ruhige,
   zentrierte Karte auf abgedunkeltem Grund — kurz, wie ein Formular, nicht
   bildschirmfüllend wie die Anleitung auf der Stage. */
.aufgabenpopup {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(42, 33, 25, 0.45);
  backdrop-filter: blur(3px);
  animation: mila-fade-in 180ms ease both;
}

.aufgabenpopup__karte {
  position: relative;
  /* Etwa die halbe Seite — die Beschreibungsfelder brauchen mehr als die
     schmale Spalte, in der ein Formular sonst steht. Auf schmalen Bildschirmen
     bleibt es trotzdem nutzbar, auf sehr breiten läuft es nicht endlos aus. */
  width: min(50vw, 100%);
  min-width: min(30rem, 100%);
  max-width: 46rem;
  max-height: 85dvh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
}

.aufgabenpopup__titel {
  margin: 0 0 1.1rem;
  font-size: 1.25rem;
}

.aufgabenpopup__schliessen {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  color: var(--mila-text-soft);
  text-decoration: none;
}

.aufgabenpopup__schliessen:hover {
  background: var(--mila-surface-soft);
  color: var(--mila-accent);
}

/* Allergene im Rezepteditor ------------------------------------------------ */

/* Zugeklappt wie die anderen Karten: Allergene pflegt man einmal und dann lange
   nicht mehr — beim täglichen Ändern einer Anleitung sollen sie nicht im Weg
   stehen. Der Stand steht trotzdem im Kopf, damit man beim Durchgehen aller
   Rezepte sieht, wo noch etwas fehlt, ohne jede Karte zu öffnen. */
.allergenstand {
  margin-left: 0.6rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.allergenstand--offen {
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

.allergenstand--frei {
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
}

.allergenstand--enthalten {
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
}

/* Eine Zeile je Gruppe. Getreide und Schalenfrüchte bekommen eine Überschrift,
   weil das Gesetz dort die Sorte verlangt und ohne Überschrift acht Nusssorten
   ohne Zusammenhang dastünden. */
.allergengruppe {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.allergengruppe:last-of-type { border-bottom: 0; }

.allergengruppe__name {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--mila-text-soft);
}

/* Eine Gruppe ohne Sorten ist selbst der Haken — sie braucht keine Überschrift
   über einem einzigen Eintrag. */
.allergengruppe__einzeln { font-weight: 600; }

/* Die zwei Entscheidungen am Schluss stehen abgesetzt: Sie betreffen nicht mehr
   den Inhalt, sondern ob und wo er gilt. */
.allergenfreigabe {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mila-line);
  display: grid;
  gap: 0.9rem;
}

/* "ohne genaue Sorte" steht vor den Sorten und tritt zurück: Es ist die Antwort
   für den Fall, dass die genaue nicht zu ermitteln ist — nicht die erste Wahl. */
.allergengruppe__alle span {
  font-style: italic;
  color: var(--mila-text-soft);
}

/* Was ein Gericht von seinen Zutaten erbt. Ablesen statt anhaken: Gepflegt wird
   am Produkt, hier steht nur das Ergebnis — und wo die Kette reißt. */
.erbliste {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--mila-bg);
}

.erbliste__titel {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.erbliste__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
}

.erbliste__chip {
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--mila-accent);
  color: var(--mila-bg);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Die Lücke ist der eigentliche Grund, hier hinzusehen — deshalb warm markiert. */
.erbliste--luecke { background: var(--mila-warn-bg, #fdf3e3); }

.erbliste--luecke .erbliste__titel { color: var(--mila-warn-text); }

.erbliste__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.erbliste__fertig {
  margin: -0.4rem 0 1rem;
  font-size: 0.88rem;
  color: var(--mila-accent);
  font-weight: 600;
}

/* Was aus der Zeit vor den Produkten stammt: leiser gesetzt, weil es verschwinden
   soll, sobald die Produkte es abdecken. */
.erbliste--alt .erbliste__chip--alt {
  background: transparent;
  border: 1px dashed var(--mila-line);
  color: var(--mila-text-soft);
}

.erbliste--alt .sammelhaken { margin-top: 0.8rem; }

/* Wer eine Zutat ergänzt und sie danach auf dem Tablet sucht, muss oben erfahren,
   dass die ganze Liste dort ausgeblendet ist — der Schalter steht unter zwölf
   Zeilen und damit außer Sicht. */
.zutatenwarnung {
  margin: 0 0 0.9rem;
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  background: var(--mila-warn-bg, #fdf3e3);
  color: var(--mila-warn-text);
  font-size: 0.85rem;
  font-weight: 600;
}

/* Vorschläge ab dem ersten Buchstaben: Eine Zutat findet ihre Allergene über den
   Namen des Produkts — daneben getippt, und sie bringt nichts mit. */
.zutatenvorschlag { position: relative; }

/* Am Fenster und nicht am Feld: Die Karte darüber hat overflow: hidden, und alles,
   was über ihren Rand hinausragt, wird abgeschnitten. Bei den unteren Zeilen war
   der Vorschlag deshalb unsichtbar — dort, wo die Zutatenliste am längsten ist.
   Gestellt wird sie im Controller (siehe zutatenvorschlag#stellen). */
.zutatenvorschlag__liste {
  position: fixed;
  z-index: 60;
  padding: 0.25rem;
  display: grid;
  gap: 0.1rem;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  background: var(--mila-surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
  max-height: 15rem;
  overflow-y: auto;
}

.zutatenvorschlag__treffer {
  display: block;
  width: 100%;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}

.zutatenvorschlag__treffer:hover,
.zutatenvorschlag__treffer--hier { background: var(--mila-bg); }

.zutatenvorschlag__treffer--hier { font-weight: 600; }

.admin-input--warnung { border-color: var(--mila-warn-text); }

/* Eine Zutat ohne Produkt bringt keine Allergene mit — und das sieht man ihr
   sonst nicht an. */
.zutatenhinweis {
  display: inline-block;
  margin-top: 0.25rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-warn-bg, #fdf3e3);
  color: var(--mila-warn-text);
  font-size: 0.72rem;
  font-weight: 600;
}

/* Was öffentlich steht: die zwei Entscheidungen je Gericht, in einem Durchgang.
   Sie standen einmal im Rezeptformular und waren dort im Weg. */
.gerichtetabelle th[scope="row"] { font-weight: 600; min-width: 14rem; }

.gerichtetabelle__name {
  display: block;
  color: var(--mila-text);
  text-decoration: none;
  font-weight: 700;
}

.gerichtetabelle__name:hover { color: var(--mila-accent); }

.gerichtetabelle .admin-input--klein {
  margin-top: 0.35rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
}

.gerichtetabelle__stoffe {
  display: block;
  font-size: 0.85rem;
  color: var(--mila-text-soft);
  max-width: 32ch;
}

.gerichtetabelle__haken { text-align: center; width: 9rem; }

/* Wer freigegeben hat und wann — klein unter dem Haken, damit die Auskunft
   nachvollziehbar bleibt, ohne eine eigene Spalte zu kosten. */
.gerichtetabelle__wer {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--mila-text-soft);
}

.gerichtetabelle__haken .admin-check { margin: 0; }

/* Aufgeräumt wird gesammelt unter der Tabelle: In der Zeile stand zweimal
   dasselbe, weil die alte Angabe bei den meisten Gerichten wörtlich der
   geerbten entsprach. */
.altangaben {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--mila-line);
}

.altangaben form { margin: 0.6rem 0 0; }

.altangaben__offen { margin-top: 1.2rem; }

.altangaben__liste {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.altangaben__liste li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

/* Produkte pflegen --------------------------------------------------------- */

/* Über hundert Artikel, und die Arbeit daran ist Fleißarbeit: Man geht sie mit
   den Packungen in der Hand durch. Deshalb steht oben, wie weit man ist — sonst
   weiß man nach zwanzig Minuten nicht, ob sich das Weitermachen noch lohnt. */
.produktstand {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  color: var(--mila-text-lead);
}

.produktstand strong { color: var(--mila-accent); }

.produktstand__weg { color: var(--mila-warn-text); font-weight: 600; }

/* Die Suche steht vor den Filtern: Wer weiß, was er sucht, tippt es — schneller,
   als sich durch Bereich und Lieferant zu klicken. */
.produktsuche {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}

.produktsuche__feld { max-width: 22rem; }

.produktfilter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mila-line);
}

.produktfilter__weg {
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}

.produktfilter__weg:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

/* Die Gegenprobe am Ende der Lieferantenreihe: kein Haus, sondern die Frage nach
   der Lücke. Ein gestrichelter Rand setzt sie ab, ohne sie hervorzuheben — sie
   ist ein Werkzeug zum Aufräumen und keine der gewöhnlichen Auswahlen. */
.produktfilter__weg--luecke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-style: dashed;
}

/* Die Zahl sagt gleich, wie groß die Lücke ist — sonst klickt man den Knopf
   nur, um es zu erfahren. */
.produktfilter__zahl {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.produktfilter__weg--hier .produktfilter__zahl {
  background: rgb(255 255 255 / 22%);
}

.produktfilter__weg--hier {
  border-color: var(--mila-accent);
  background: var(--mila-accent);
  color: var(--mila-bg);
}

.produktfilter__weg--aus { border-style: dashed; }

/* Die Lieferantenzeile steht unter den Bereichen und leiser: Wer eine Lieferung
   auspackt, braucht sie — wer nur nachsieht, soll nicht darüber stolpern. */
.produktfilter--lieferant,
.produktfilter--fach {
  align-items: baseline;
  margin-top: -0.4rem;
}

.produktfilter__titel {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
  margin-right: 0.2rem;
}

/* Die Tabelle statt einer Liste: Lieferant und Rezeptzahl will man von oben nach
   unten vergleichen, nicht in jeder Zeile neu suchen. */
.produkttabelle th[scope="row"] { font-weight: 600; }

.produkttabelle__name {
  color: var(--mila-text);
  text-decoration: none;
  font-weight: 700;
}

.produkttabelle__name:hover { color: var(--mila-accent); }

.produkttabelle th[scope="row"] .admin-list__meta {
  display: block;
  font-weight: 400;
}

.produkttabelle__zahl {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Kein eigener Bearbeiten-Knopf: Der Name ist der Weg hinein. Die Spalte kostete
   nur Breite, die Lieferant und Rezeptzahl besser gebrauchen. */
.produkttabelle tbody tr:hover { background: var(--mila-bg); }

/* Der Kopf beim Bearbeiten: Speichern gehört nach oben, weil unter ihm vierzehn
   Allergengruppen liegen — sonst scrollt man für jeden Haken zweimal. */
.produktkopf {
  align-items: flex-start;
  gap: 1rem;
}

.produktkopf__stand {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  color: var(--mila-text-soft);
  font-variant-numeric: tabular-nums;
}

.produktkopf__filter {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--mila-tupfer);
  color: var(--mila-dunkel);
  font-size: 0.78rem;
  font-weight: 600;
}

.produktkopf__wege {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Blättern: anhaken, weiter, anhaken. Die Namen der Nachbarn stehen dabei, damit
   man sieht, wohin man springt, statt blind zu klicken. */
.produktblaettern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}

.produktblaettern__weg {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 42%;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.produktblaettern__weg:hover {
  border-color: var(--mila-accent);
  color: var(--mila-accent);
}

.produktblaettern__weg--aus {
  color: var(--mila-text-soft);
  border-style: dashed;
  cursor: default;
  font-weight: 400;
}

.produktblaettern__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.produktblaettern__pfeil { font-size: 1.05rem; line-height: 1; }

.produktblaettern__hinweis {
  font-size: 0.78rem;
  color: var(--mila-text-soft);
  text-align: center;
}

/* Wo das Produkt dranhängt — beim Pflegen die erste Frage. */
.produktrezepte__liste {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.produktrezepte__liste li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.produktrezepte__schritte { margin-top: 1.3rem; }

/* Verdoppeln und Löschen: bewusst unten und ohne Farbe im Ruhezustand, damit
   nichts davon in Reichweite des Speicherns liegt. */
.produktverwaltung__zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--mila-line);
}

.produktverwaltung__zeile:first-child { border-top: 0; padding-top: 0; }

.produktverwaltung__zeile .admin-hint { margin-bottom: 0; max-width: 46ch; }

.produktverwaltung__zeile form { margin: 0; flex-shrink: 0; }

@media (max-width: 640px) {
  .produktkopf { flex-direction: column; }
  .produktblaettern__hinweis { display: none; }
  .produktblaettern__weg { max-width: 48%; }
  .produktverwaltung__zeile { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
}

/* Die Liste wird lang — enger gesetzt als die übrigen, sonst scrollt man ewig. */
.produktliste .admin-list__item {
  padding: 0.45rem 0;
}

/* Die Glocke -----------------------------------------------------------------
 *
 * Was hereingekommen ist, während man woanders war. Sie beantwortet drei Fragen
 * und keine vierte: Gibt es etwas, wie viel, und was war es. Alles Weitere steht
 * auf der Seite, zu der sie führt.
 *
 * Gebaut wie das Kontomenü daneben — ein <details> mit einem Feld darunter.
 * Zwei Klappmenüs in derselben Zeile sollen sich gleich anfühlen. */
.glocke {
  position: relative;
}

.glocke__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--mila-text-soft);
  cursor: pointer;
  /* Beide Schreibweisen: Safari über das Pseudoelement, der Rest über list-style. */
  list-style: none;
}

.glocke__knopf::-webkit-details-marker {
  display: none;
}

.glocke__knopf:hover,
.glocke[open] .glocke__knopf {
  background: var(--mila-surface-soft);
  color: var(--mila-text);
}

.glocke__symbol {
  width: 19px;
  height: 19px;
}

/* Die Zahl sitzt am Symbol, nicht daneben: Sie gehört dazu und ist keine zweite
   Angabe. In der Warnfarbe, weil sie das Einzige in der Kopfzeile ist, das etwas
   von einem will. */
.glocke__zahl {
  position: absolute;
  top: 2px;
  right: 1px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--mila-glocke);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.glocke__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  /* Feste Breite, Sätze brechen um. Mit max-content bestimmte der längste Name
     die Breite des Felds — bei "Hoch-Test hat Gesundheitsbelehrung hochgeladen"
     stieß es am Rand des Fensters an. */
  width: 20rem;
  max-width: calc(100vw - 2rem);
  padding: 0.5rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
}

.glocke__liste {
  margin: 0 0 0.4rem;
  padding: 0;
  list-style: none;
}

.glocke__panel form {
  margin: 0;
}

/* Ein Eintrag ist eine Fläche zum Antippen, keine Zeile zum Lesen: Er hakt ab
   und geht dorthin, wo die Sache liegt. */
.glocke__eintrag {
  display: block;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.glocke__eintrag:hover {
  background: var(--mila-surface-soft);
}

.glocke__satz {
  display: block;
  color: var(--mila-text);
  font-size: 0.9rem;
  line-height: 1.35;
}

.glocke__wann {
  display: block;
  margin-top: 0.1rem;
  color: var(--mila-text-soft);
  font-size: 0.78rem;
}

.glocke__rest,
.glocke__leer {
  margin: 0;
  padding: 0.5rem 0.6rem;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.glocke__abraeumen {
  display: block;
  width: 100%;
  min-height: 36px;
  margin-top: 0.2rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.glocke__abraeumen:hover {
  border-color: #d6c9b8;
  background: var(--mila-surface-soft);
}

/* Wohin die Aufgabe geht — als eigene Spalte, nicht als Wort in der grauen
   Zeile darunter.
 *
 * Zwischen Küche und Bar unterscheidet man in einer Liste sonst erst beim
 * Lesen; in ihrer Farbe sieht man es beim Überfliegen. Feste Breite, damit die
 * Titel darunter auf einer Linie beginnen. */
.aufgabe__marke {
  flex: none;
  width: 5.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--buehnen-farbe) 16%, transparent);
  color: color-mix(in srgb, var(--buehnen-farbe) 75%, var(--mila-text));
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-aufgabe {
  gap: 0.7rem;
}

/* Inventur ----------------------------------------------------------------
 *
 * Gezählt wird im Lager, mit dem Handy in einer Hand. Deshalb ist hier alles
 * größer als sonst in der Regie: Das Zahlenfeld ist ein Ziel für einen Daumen,
 * kein Formularfeld für eine Maus.
 */

.inventur-kopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 0.9rem;
  padding: 0.9rem 0 0.8rem;
  background: var(--bg);
}

.inventur-kopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.inventur-kopf__titel {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}

.inventur-kopf__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.inventur-kopf__form {
  margin: 0;
}

.inventur-kopf__stand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.inventur-kopf__zahl {
  flex: none;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.inventur-balken {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.inventur-balken__fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.25s ease;
}

/* Die Kategorien als Reiter: Man geht das Regal entlang, nicht die Liste. Der
   Stand steht mit dran, damit man beim Wiederkommen sieht, wo man aufgehört
   hat. */
.inventur-regale {
  display: flex;
  gap: 0.4rem;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.inventur-regale::-webkit-scrollbar {
  display: none;
}

.inventur-regal {
  flex: none;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.inventur-regal--hier {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-text);
}

/* Fertig gezählt: ein ruhiger Haken statt einer weiteren Farbe. Die Farbe
   gehört dem Reiter, auf dem man steht. */
.inventur-regal--fertig:not(.inventur-regal--hier) {
  border-color: var(--notice-text);
  color: var(--notice-text);
}

.inventur-regal__zahl {
  margin-left: 0.35rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

.inventur-liste {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.inventur-zeile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
}

.inventur-zeile:last-child {
  border-bottom: 0;
}

.inventur-zeile__haken {
  flex: none;
  width: 1.2rem;
  color: var(--notice-text);
  font-size: 1.05rem;
  opacity: 0;
}

.inventur-zeile[data-gezaehlt="true"] .inventur-zeile__haken {
  opacity: 1;
}

.inventur-zeile__wort {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.inventur-zeile__name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

/* Der Vormonat steht klein darunter: Wer statt 24 dann 240 tippt, sieht den
   Unterschied sofort — und nicht erst beim Auswerten. */
.inventur-zeile__vormonat {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.inventur-zeile__form {
  flex: none;
  margin: 0;
}

.inventur-zeile__feld {
  width: 5.2rem;
  padding: 0.5rem 0.4rem;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: center;
  /* Ohne die Pfeilchen: Am Handy trifft man sie nicht, und am Rechner
     verstellen sie die Zahl beim Scrollen über dem Feld. */
  appearance: textfield;
}

.inventur-zeile__feld::-webkit-outer-spin-button,
.inventur-zeile__feld::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.inventur-zeile[data-gezaehlt="true"] .inventur-zeile__feld {
  border-color: var(--accent);
}

.inventur-vergleich {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.inventur-vergleich__titel {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.inventur-vergleich__hinweis {
  margin: 0;
  max-width: 40rem;
  font-size: 0.92rem;
  color: var(--muted);
}

.inventur-vergleich__rahmen {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.inventur-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.inventur-tabelle th,
.inventur-tabelle td {
  padding: 0.55rem 0.8rem;
  text-align: right;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inventur-tabelle tbody tr:last-child td {
  border-bottom: 0;
}

.inventur-tabelle th:first-child,
.inventur-tabelle td:first-child {
  text-align: left;
  font-variant-numeric: normal;
  font-weight: 700;
  white-space: normal;
}

.inventur-tabelle thead th {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.inventur-tabelle__minus {
  color: var(--alert-text);
}

.inventur-tabelle__anteil {
  margin-left: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
}

.inventur-monate {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inventur-monat__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.inventur-monat--offen .inventur-monat__link {
  border-color: var(--accent);
}

.inventur-monat__name {
  flex: 1 1 auto;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.inventur-monat__stand {
  font-size: 0.9rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.inventur-monat__zustand {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.inventur-monat--offen .inventur-monat__zustand {
  color: var(--accent);
}

/* Am Handy wird gezählt, und dort ist die Zeile die ganze Breite. Das Feld
   bleibt trotzdem so groß, dass ein Daumen es trifft. */
@media (max-width: 30rem) {
  .inventur-zeile {
    padding: 0.65rem 0.7rem;
  }

  .inventur-zeile__feld {
    width: 4.6rem;
    font-size: 1.35rem;
  }
}

/* Küche und Bar: zwei Lager, zwei Leute, zwei Abende. Die Wahl steht über den
   Kategorien, weil sie darüber entscheidet, welche überhaupt erscheinen. */
.inventur-lager {
  display: flex;
  gap: 0.35rem;
}

.inventur-lager__weg {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  color: var(--mila-text-soft);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.inventur-lager__weg--hier {
  background: var(--mila-accent);
  color: #fff;
}

/* Was als Nächstes dran ist. Steht unter der Liste, weil man dort ankommt —
   und nicht oben, wo man noch nichts gezählt hat. */
.inventur-weiter {
  display: flex;
  margin: 1rem 0 0;
}

.inventur-fertig {
  margin: 1rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--notice-bg);
  color: var(--notice-text);
  font-weight: 700;
}

/* Minus, Zahl, Plus — eine Gruppe für den Daumen.
 *
 * Im Lager zählt man laut mit und tippt nach jedem Kasten einmal. Zwei große
 * Flächen sind dafür schneller als eine Tastatur; das Feld dazwischen bleibt für
 * halbe Packungen und Sprünge. */
.inventur-stufen {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.inventur-stufe {
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  /* Kein Auswählen beim schnellen Tippen: Sonst markiert iOS nach dem dritten
     Mal das Zeichen und blendet die Lupe ein. */
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.inventur-stufe:active {
  background: var(--mila-surface-soft, #f2f1e6);
  border-color: var(--mila-accent);
}

/* Am Handy bekommt die Gruppe ihre eigene Zeile: Name links, darunter die volle
   Breite für Minus, Zahl und Plus. Nebeneinander blieben von jedem Ziel keine
   vierzig Pixel. */
@media (max-width: 30rem) {
  .inventur-zeile {
    flex-wrap: wrap;
  }

  .inventur-zeile__wort {
    flex: 1 1 100%;
  }

  /* min-width: 0 dazu: Ein Flex-Kind schrumpft sonst nie unter die Breite
     seines Inhalts, und die Gruppe schob das Plus aus der Karte. */
  .inventur-zeile__form {
    flex: 1 1 100%;
    min-width: 0;
  }

  .inventur-stufen {
    justify-content: space-between;
  }

  /* flex-basis 0 und min-width 0: Mit "auto" nimmt das Feld seine Inhaltsbreite
     als Ausgangspunkt und schiebt das Plus aus der Karte heraus. */
  .inventur-zeile__feld {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
}

/* Am Handy ------------------------------------------------------------------
 *
 * Die Regie ist für den Schreibtisch gebaut, wird aber unterwegs benutzt: Wer im
 * Bus sitzt, hakt Aufgaben ab und zählt im Lager.
 *
 * Gemessen bei 375 Pixeln standen drei Rahmen ineinander — Seite, Karte und
 * Tagesblock — und nahmen zusammen 101 Pixel für ihre Ränder. Vom Titel einer
 * Aufgabe blieben 93 Pixel, während die Plakette daneben 88 belegte und nichts
 * sagte außer "BAR".
 *
 * Drinnen ist kein Platz für Verschachtelung. Ein Rand genügt.
 */
@media (max-width: 30rem) {
  .admin-main {
    padding: 0.75rem;
  }

  .admin-card {
    padding: 0.75rem;
  }

  /* Der Tagesblock sitzt schon in der Karte — ein zweiter Rahmen darin ist eine
     Linie, die nichts trennt. */
  .aufgabentag {
    padding-inline: 0;
    border-inline: 0;
    border-radius: 0;
  }

  /* Der Titel bekommt die ganze Zeile, darunter Plakette und Knöpfe.
     Nebeneinander teilten sich drei Dinge 274 Pixel, und das längste davon
     bekam das schmalste Fach. */
  .admin-aufgabe {
    flex-wrap: wrap;
    row-gap: 0.4rem;
    column-gap: 0.5rem;
  }

  .admin-aufgabe > span:not(.aufgabe__marke):not(.admin-aufgabe__wege) {
    flex: 1 1 100%;
    order: -1;
  }

  .admin-aufgabe__wege {
    margin-left: auto;
  }

  /* Die Kopfzeile der Seite: Überschrift und Knopf untereinander statt
     nebeneinander gequetscht. */
  .admin-page__head {
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  /* backstage steht in derselben Zeile wie die Wortmarke — auch am Handy.
     
     Vorher rutschte die ganze rechte Gruppe auf eine zweite Zeile: oben MILA.,
     darunter Glocke, Konto und backstage. Zwei Zeilen für eine Kopfzeile, und
     die Marke des Hauses stand allein da wie eine Überschrift.
     
     Platz dafür macht der Name neben dem Personenzeichen: Wer angemeldet ist,
     weiß, wer er ist. Das Zeichen bleibt, damit der Weg ins Konto sichtbar
     bleibt. */
  .admin-header__inner {
    align-items: flex-start;
    gap: 0.4rem;
    padding-inline: 0.6rem;
  }

  /* Erste Zeile: Wortmarke links, Konto und backstage rechts. Der Weg aufs
     Tablet bekommt eine eigene Zeile darunter — in derselben Zeile wurde er
     lautlos auf null Breite gequetscht und war weg. */
  .admin-header__account {
    order: 1;
    gap: 0.3rem;
  }

  .admin-nav {
    order: 2;
    flex: 1 1 100%;
  }

  .konto__name {
    display: none;
  }

  /* „Know-How" bleibt in einer Zeile: Die feste Breite der Wortmarke stammt vom
     Rechner, wo daneben Platz ist. Hier zählt jeder Buchstabe. */
  .admin-logo {
    min-width: 0;
  }

  .admin-logo__sub {
    white-space: nowrap;
    letter-spacing: 0.08em;
  }

  /* Dreißig Pixel fehlten, damit Wortmarke und backstage in eine Zeile passen.
     Sie stecken in Abständen, die am Rechner richtig sind: der Luft zwischen
     Marke und Block, der Polsterung des Wechslers, dem Abstand dazwischen. */
  .admin-logo__zeile {
    gap: 0.35rem;
  }

  .bereichswechsel__knopf {
    padding-inline: 0.3rem;
  }

  /* Die letzten acht Pixel. Der Zug bleibt lesbar — 1,45 statt 1,65 rem sieht
     man nur im Vergleich —, und dafür steht er da, wo er hingehört: neben der
     Marke des Hauses und nicht eine Zeile darunter. */
  .admin-header__account .produkt-signatur__marke {
    font-size: 1.45rem;
  }

  /* Beim Zählen bleibt oben nur, was man beim Zählen braucht.
     
     Der ganze Kopf klebte am oberen Rand: Titel, zwei Knöpfe, Fortschritt und
     die Wahl des Lagers — anderthalb Handbreit, die stehen bleiben, während man
     durch 126 Produkte wischt. Wichtig ist dabei nur, in welchem Regal man
     gerade steht. */
  .inventur-kopf {
    position: static;
  }

  .inventur-regale {
    position: sticky;
    top: 0;
    z-index: 5;
    margin-bottom: 0.6rem;
    padding-top: 0.5rem;
    background: var(--bg);
  }
}

/* ---------------------------------------------------------------------------
   Bestellungen

   Zwei Gestalten in einem Bereich: die Übersicht als Karten, der Prüfvorgang
   als eine große Karte in der Mitte. Der Unterschied ist Absicht — in der
   Übersicht wählt man, beim Prüfen entscheidet man, und eine Entscheidung
   verträgt nichts daneben.
   --------------------------------------------------------------------------- */

.lieferantenkarten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.lieferantenkarte {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
}

.lieferantenkarte__name {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* Drei Angaben nebeneinander statt untereinander: Sie beantworten zusammen eine
   Frage — lohnt sich der Weg zu diesem Lieferanten gerade. */
.lieferantenkarte__angaben {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin: 0;
}

.lieferantenkarte__angaben dt {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.lieferantenkarte__angaben dd {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.lieferantenkarte__form {
  margin: 0 0 auto;
}

.lieferantenkarte__knopf {
  width: 100%;
}

.lieferantenkarte__hinweis {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.bestellhistorie__titel {
  margin: 0 0 0.7rem;
  font-size: 1.05rem;
}

.bestellhistorie__liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bestellhistorie__zeile + .bestellhistorie__zeile {
  border-top: 1px solid var(--mila-line);
}

.bestellhistorie__link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 1rem;
  padding: 0.75rem 0.2rem;
  color: inherit;
  text-decoration: none;
}

.bestellhistorie__link:hover {
  background: var(--bg);
}

.bestellhistorie__datum {
  min-width: 7.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.bestellhistorie__lieferant {
  flex: 1 1 8rem;
}

.bestellhistorie__umfang,
.bestellhistorie__person {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Der Kopf beim Prüfen: Er sagt, wo man ist und wie viel noch kommt. Klebt
   oben, weil man im Lager scrollt, ohne hinzusehen. */
.bestellkopf {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1.4rem;
  padding: 0.9rem 0 0.8rem;
  background: var(--bg);
}

.bestellkopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.bestellkopf__titel {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.bestellkopf__stand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.bestellkopf__zahl {
  flex: none;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.bestellbalken {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.bestellbalken__fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mila-accent);
  transition: width 0.25s ease;
}

/* Eine Karte, mittig, mit Luft. Sie ist bewusst größer als nötig: Wer sie
   anschaut, soll nichts anderes anschauen. */
.pruefkarte {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 32rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
  border: 1px solid var(--mila-line);
  border-radius: 18px;
  background: var(--mila-surface);
  box-shadow: 0 1px 3px rgb(20 21 15 / 6%);
  text-align: center;
  touch-action: pan-y;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Nach dem Wisch nach links verabschiedet sich die Karte in die Richtung, in
   die gewischt wurde — sonst sähe es aus, als wäre nichts passiert. */
.pruefkarte--weg {
  transform: translateX(-30%) rotate(-4deg);
  opacity: 0;
}

/* Das Regal über dem Namen: klein, ruhig, aber immer da. Es ist keine Auskunft
   über das Produkt, sondern über den Ort — deshalb steht es darüber und nicht
   dazwischen. */
.pruefkarte__regal {
  margin: 0 0 0.15rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pruefkarte__name {
  margin: 0;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.pruefkarte__einheit {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}

.pruefkarte__zuletzt {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--bg);
  font-size: 0.9rem;
}

.pruefkarte__zuletzt--leer {
  color: var(--muted);
}

/* Zwei Flächen, gleich groß: Keine der beiden Antworten ist die richtige, also
   sieht auch keine wichtiger aus. */
.pruefkarte__wahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.pruefknopf {
  min-height: 4.5rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
}

.pruefknopf:hover {
  background: var(--bg);
}

.pruefknopf--ja {
  border-color: var(--mila-accent);
  background: var(--mila-accent);
  color: #fff;
}

.pruefknopf--ja:hover {
  filter: brightness(1.1);
  background: var(--mila-accent);
}

.pruefkarte__frage {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.pruefkarte__menge {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Minus, Zahl, Plus — mit dem Daumen zu treffen, ohne hinzusehen. */
.mengenwahl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
}

.mengenwahl__schritt {
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid var(--mila-line);
  border-radius: 50%;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.mengenwahl__schritt:hover {
  background: var(--bg);
}

.mengenwahl__wert {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 7rem;
}

.mengenwahl__feld {
  width: 100%;
  padding: 0.2rem;
  border: 0;
  border-bottom: 2px solid var(--mila-line);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 2rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.mengenwahl__feld:focus {
  outline: none;
  border-bottom-color: var(--mila-accent);
}

.mengenwahl__einheit {
  font-size: 0.85rem;
  color: var(--muted);
}

.pruefkarte__weiter {
  width: 100%;
  min-height: 3.4rem;
}

/* Die Übersicht: Jetzt darf eine Liste stehen — der Prüfvorgang ist vorbei. */
.bestellzeilen {
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.bestellzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  padding: 0.7rem 0.2rem;
}

.bestellzeile + .bestellzeile {
  border-top: 1px solid var(--mila-line);
}

.bestellzeile__name {
  flex: 1 1 10rem;
  font-weight: 600;
}

.bestellzeile__form {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.bestellzeile__feld {
  width: 4.5rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.bestellzeile__einheit,
.bestellzeile__menge {
  font-size: 0.9rem;
  color: var(--muted);
}

.bestelltext {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
}

.bestelltext__titel {
  margin: 0;
  font-size: 1.05rem;
}

.bestelltext__feld {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--bg);
  color: inherit;
  font: inherit;
  line-height: 1.5;
  resize: vertical;
}

.bestelltext__betreff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.bestelltext__betreff .bestelltext__feld {
  flex: 1 1 14rem;
  width: auto;
}

/* Im Shop wird abgehakt, während nebenan bestellt wird — die Liste bleibt
   deshalb hier stehen und wandert nicht in die Zwischenablage. */
.einkaufsliste {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.einkaufsliste__zeile + .einkaufsliste__zeile {
  border-top: 1px solid var(--mila-line);
}

.einkaufsliste__haken {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.2rem;
  cursor: pointer;
}

.einkaufsliste__haken:has(input:checked) span {
  color: var(--muted);
  text-decoration: line-through;
}

.bestellabschluss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.6rem 0 0;
}

.bestellabschluss__knopf {
  min-height: 3.2rem;
}

/* Die Lieferantenpflege.

   Ein Kasten je Lieferant, zwei Spalten darin. Vier nebeneinander waren auf dem
   iPad so schmal, dass eine E-Mail-Adresse nicht mehr hineinpasste — und ein
   Feld, in dem man den eigenen Eintrag nicht lesen kann, lädt zum Vertippen ein.

   Die Felder sind bewusst größer als die der übrigen Regie: Hier wird selten
   gepflegt, dafür mit dem Finger auf dem Tablet. */
.lieferantenkasten {
  margin: 0;
  padding: 1.5rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
}

.lieferantenkasten--neu {
  margin: 0 0 2rem;
  border-style: dashed;
}

.lieferantenkasten__titel {
  margin: 0 0 1.2rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.lieferantenfelder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.lieferantenfeld {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* Die Notiz läuft über beide Spalten: Sie ist ein Satz, kein Stichwort. */
.lieferantenfeld--breit {
  grid-column: 1 / -1;
}

.lieferantenfeld__frage {
  font-size: 1rem;
  font-weight: 600;
}

.lieferantenfeld__eingabe {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
  color: inherit;
  font: inherit;
  font-size: 1.02rem;
}

.lieferantenfeld__eingabe:focus {
  outline: none;
  border-color: var(--mila-accent);
  box-shadow: 0 0 0 3px rgb(15 77 64 / 12%);
}

textarea.lieferantenfeld__eingabe {
  min-height: 4.5rem;
  line-height: 1.5;
  resize: vertical;
}

/* Die Zeile, die das Warum nachreicht. Kleiner und ruhiger — wer es weiß,
   überliest sie. */
.lieferantenfeld__hilfe {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}

.lieferantenkasten__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 1.5rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--mila-line);
}

.lieferantenkasten__umfang {
  font-size: 0.9rem;
  color: var(--muted);
}

.lieferantenkasten__knoepfe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.lieferantenkasten__weg {
  margin: 0;
}

.lieferantenliste {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 48rem) {
  .lieferantenfelder {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 34rem) {
  .pruefkarte {
    padding: 1.4rem 1.1rem 1.2rem;
  }

  .pruefkarte__name {
    font-size: 1.6rem;
  }

  /* Untereinander, sobald zwei Flächen nebeneinander zu schmal für einen Daumen
     werden. */
  .pruefkarte__wahl {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Kalkulation

   Vier Zahlen, die im Alltag in einer Sekunde erfasst werden sollen — und eine
   Liste, in der die teuerste Quote oben steht. Wer hierherkommt, sucht die
   roten.
   --------------------------------------------------------------------------- */

.preisstand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--bg);
}

.preisstand__zahl {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.preisstand__einheit {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--muted);
}

/* Ein geschätzter Preis rechnet mit — er sagt es nur dazu. */
.preisstand__marke {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f6e6c8;
  font-size: 0.75rem;
  font-weight: 700;
}

.preisstand__vorher {
  font-size: 0.85rem;
  color: var(--muted);
}

.kalkulation__zahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0;
}

.kalkulationszahl {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
}

/* Ausgeschrieben und nicht in Versalien: "WARENEINSATZ" schreit, und eine
   Beschriftung soll nicht schreien. */
.kalkulationszahl__wort {
  font-size: 0.8rem;
  color: var(--muted);
}

.kalkulationszahl__wert {
  font-size: 1.45rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.kalkulationszahl__zusatz {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--muted);
}

.kalkulationszahl__zusatz--warnung {
  color: #9a4b16;
  font-weight: 600;
}

.kalkulation__empfehlung {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius);
  background: var(--bg);
}

/* Was fehlt, steht namentlich da: "unvollständig" allein zwingt zum Suchen —
   und gesucht wird dann nicht. */
.kalkulation__luecken {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  border-left: 3px solid #c0451f;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: #fdf3ef;
  font-size: 0.9rem;
}

.kalkulation__luecken p {
  margin: 0 0 0.3rem;
}

.kalkulation__luecken p:last-child {
  margin-bottom: 0;
}

.kalkulation__luecken-titel {
  font-weight: 700;
}

.kalkulation__luecken--schaetzung {
  border-left-color: #c9a227;
  background: #fdf9ef;
}

.kalkulation__zeile--offen {
  color: var(--muted);
}

.kalkulationsliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Eine Karte je Gericht statt einer Tabellenzeile: Vier Zahlen mit ihren Wörtern
   brauchen Luft, sonst liest man sie wie eine Zeile aus einer Tabellenkalkulation
   — und genau so sah es aus. */
.kalkulationszeile + .kalkulationszeile {
  margin-top: 0.5rem;
}

/* Feste Spuren statt Fließsatz: Vorher schob ein langer Status ("noch
   unvollständig") die Zahlen nach links, ein kurzer ("geschätzt") ließ sie nach
   rechts rutschen — und untereinander stand nichts mehr untereinander. Genau
   das Vergleichen ist aber der Zweck der Liste. Jetzt hat jede Spalte ihre
   Breite, egal was drinsteht. */
.kalkulationszeile__link {
  display: grid;
  grid-template-columns: minmax(10rem, 1fr) auto 9.5rem;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
  color: inherit;
  text-decoration: none;
}

.kalkulationszeile__link:hover {
  border-color: var(--mila-accent);
}

/* Die Ampel färbt den linken Rand statt die ganze Karte: Ein rot hinterlegtes
   Gericht liest sich wie ein Fehler, dabei ist es nur teuer. */
.kalkulationszeile--gruen .kalkulationszeile__link { border-left: 4px solid #2f7a52; }
.kalkulationszeile--gelb .kalkulationszeile__link { border-left: 4px solid #c9a227; }
.kalkulationszeile--rot .kalkulationszeile__link { border-left: 4px solid #c0451f; }
.kalkulationszeile--offen .kalkulationszeile__link { border-left: 4px solid var(--border); }

.kalkulationszeile__kopf {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.kalkulationszeile__ampel {
  font-size: 1.05rem;
  line-height: 1;
}

.kalkulationszeile__name {
  font-size: 1.02rem;
  font-weight: 600;
}

/* Drei gleich breite Spalten, damit 8,88 € über 8,88 € steht und nicht daneben. */
.kalkulationszeile__zahlen {
  display: grid;
  grid-template-columns: repeat(3, 7.5rem);
  gap: 0.8rem 1.2rem;
}

.kalkulationszeile__zahl {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

/* Ausgeschrieben und nicht in Versalien: "VERKAUFSPREIS" schreit, und eine
   Beschriftung soll nicht schreien. */
.kalkulationszeile__wort {
  font-size: 0.75rem;
  color: var(--muted);
}

.kalkulationszeile__wert {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Netto oder brutto — die Angabe, an der die ganze Rechnung hängt. */
.kalkulationszeile__fuss {
  font-size: 0.72rem;
  color: var(--muted);
}

/* Die Marke steht in ihrer Spalte und füllt sie nicht aus: Ein auf 9,5 rem
   gedehntes Pillchen sähe aus wie ein Knopf. */
.kalkulationszeile__stand {
  justify-self: start;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.kalkulationszeile__stand--offen {
  background: #fdf3ef;
  color: #9a3412;
}

.kalkulationszeile__stand--schaetzung {
  background: #fdf9ef;
  color: #8a6d1f;
}

/* Die Menge zum Rechnen steht neben der, die auf dem Tablet erscheint. Sie ist
   schmaler und ruhiger: Sie gehört zur Kalkulation, nicht zur Anleitung. */
.zutatenmenge {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.zutatenmenge__zahl {
  width: 4rem;
  text-align: right;
}

.zutatenmenge__einheit {
  width: 5rem;
}

/* Unter Tabletbreite untereinander: Drei Spalten neben dem Namen und der Marke
   passen dort nicht mehr nebeneinander, ohne dass die Zahlen umbrechen. */
@media (max-width: 60rem) {
  .kalkulationszeile__link {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

@media (max-width: 40rem) {
  .kalkulationszeile__link {
    gap: 0.3rem 0.8rem;
  }

  .kalkulationszeile__zahlen {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem 0.8rem;
  }

  .kalkulationszeile__name {
    flex-basis: 100%;
  }
}

/* Der Grundpreis in der Produktliste. Rechtsbündig und mit Tabellenziffern:
   Preise vergleicht man untereinander, und dafür müssen die Stellen
   übereinanderstehen. */
.produktpreis {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.produktpreis__einheit {
  font-size: 0.85em;
  color: var(--muted);
}

/* Geschätzt sieht anders aus als belegt — sonst liest sich eine Vermutung wie
   eine Rechnung. */
.produktpreis--geschaetzt {
  color: #8a6d1f;
}

.produktpreis--geschaetzt::after {
  content: " ~";
  font-weight: 700;
}

/* Brutto steht klein unter netto: Gerechnet wird mit netto, nachgesehen wird
   manchmal brutto — die Rangfolge soll man sehen. */
.produktpreis__brutto {
  display: block;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  white-space: nowrap;
}

.bestellkopf__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.bestellkopf__form {
  margin: 0;
}

/* Die Kategorien in der Kalkulation — dieselben Fächer wie bei den Rezepten.
   Die Überschrift ist ruhig gehalten: Sie ordnet, sie ist nicht der Inhalt. */
.kalkulationsgruppe {
  margin: 0 0 1.8rem;
}

.kalkulationsgruppe__titel {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.3rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--mila-line);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

.kalkulationsgruppe__zahl {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Das Fach am Gericht: dieselbe Farbe wie in der Leiste darüber und auf dem
   Tablet. Klein neben dem Namen, damit man in der gefilterten wie in der
   gesamten Liste weiß, wo man ist. */
.kalkulationszeile__fach {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kategorie-farbe) 18%, transparent);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--mila-text);
  vertical-align: middle;
}

/* Der Haken, der eine Zutat aus der Kalkulation nimmt. Schmal und ruhig: Er
   gehört zur Rechnung, nicht zur Anleitung, und wird selten gesetzt. */
.zutatenmenge__haken {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  align-self: center;
  padding: 0 0.15rem;
  color: var(--muted);
  cursor: pointer;
}

/* Übergangene Zeilen stehen blasser da — sie fehlen nicht, sie sind gewollt. */
.kalkulation__zeile--uebergangen {
  color: var(--muted);
  font-style: italic;
}



/* Die Tilde neben der Rechenmenge: gewogen oder geraten. Sie steht in derselben
   Zelle wie die Menge, weil sie zu ihr gehört und nicht zu einer eigenen
   Spalte. */
.zutatenmenge__schaetzung {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--muted);
  cursor: pointer;
}

.zutatenmenge__schaetzung:has(input:checked) {
  color: #8a6d1f;
  font-weight: 700;
}

/* ── Personalplanung ────────────────────────────────────────────────────────

   Noch ein Entwurf, und das soll man sehen: Die Marke an der Überschrift ist
   nicht Zierde, sondern Auskunft. Jede Zahl auf der Seite kommt aus einem
   erfundenen Team.

   Sonst nichts Neues erfunden — Karten, Linien, Radien und Farben sind
   dieselben wie überall in der Regie. Neu sind nur die drei Darstellungen, die
   es hier zum ersten Mal gibt: der Mischbalken, die Punktreihe für Bedarf und
   Reserve, und die vierstufige Verfügbarkeit. */

.entwurfsmarke {
  display: inline-block;
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--mila-warn-line);
  border-radius: 999px;
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.plankarten {
  display: grid;
  gap: 0 1.25rem;
  align-items: start;
}

@media (min-width: 62rem) {
  .plankarten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Die Empfehlung ist die Antwort, alles andere die Begründung — sie trägt
   deshalb die Hausfarbe und steht oben. */
.einstellungskarte {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

.einstellungskarte__wort {
  margin: 0;
  color: var(--mila-accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.einstellungskarte__titel {
  margin: 0.3rem 0 1.1rem;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.einstellungskarte__spalten {
  display: grid;
  gap: 1.1rem 2rem;
}

@media (min-width: 48rem) {
  .einstellungskarte__spalten {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.einstellungskarte__unter {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.einstellungskarte__grund {
  margin: 0 0 0.5rem;
  line-height: 1.55;
}

.profilliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.profilliste__zeile {
  position: relative;
  padding-left: 1.3rem;
  margin-bottom: 0.4rem;
  line-height: 1.45;
}

.profilliste__zeile::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--mila-accent);
  font-weight: 700;
}

/* Was nicht gesucht wird, gehört genauso zum Profil — mit dem anderen Zeichen,
   damit man es nicht als Anforderung liest. */
.profilliste__zeile--gegen {
  color: var(--mila-text-soft);
}

.profilliste__zeile--gegen::before {
  content: "✕";
  color: var(--mila-text-soft);
}

/* Der Mischbalken: Das Verhältnis ist die Auskunft, nicht die einzelne Zahl. */
.mixbalken {
  display: flex;
  height: 14px;
  margin: 0.2rem 0 1rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--mila-surface-soft);
}

/* Vier unterscheidbare Farben aus der Kategorienpalette — bewusst nicht Rot
   und Grün: Die tragen auf dieser Seite die Bedeutung „Lücke“ und „gedeckt“.
   Ein roter Schüleranteil läse sich wie ein Fehler, dabei ist er erst mal nur
   eine Tatsache. Was daran problematisch ist, sagt der Satz darunter. */
.mixbalken__teil--0 { background: #1a7787; }
.mixbalken__teil--1 { background: #4f4daf; }
.mixbalken__teil--2 { background: #6b7a22; }
.mixbalken__teil--3 { background: #7e5326; }

.mixliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mixliste__zeile {
  display: grid;
  grid-template-columns: 0.7rem minmax(6rem, auto) 2rem 3rem 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.mixliste__zeile:last-child { border-bottom: 0; }

.mixliste__punkt {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  align-self: center;
}

.mixliste__name { font-weight: 600; }

.mixliste__zahl,
.mixliste__anteil {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.mixliste__anteil { color: var(--mila-text-soft); }

.mixliste__hinweis {
  color: var(--mila-text-soft);
  font-size: 0.86rem;
}

.risikoliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.risiko {
  display: grid;
  grid-template-columns: 0.75rem 1fr;
  gap: 0.7rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.risiko:last-child { border-bottom: 0; }

.risiko__punkt {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.35rem;
  border-radius: 50%;
}

.risiko--rot .risiko__punkt { background: #c0451f; }
.risiko--gelb .risiko__punkt { background: #c9a227; }
.risiko--gruen .risiko__punkt { background: #2f7a52; }

.risiko__titel {
  margin: 0 0 0.15rem;
  font-weight: 700;
}

.risiko__text {
  margin: 0;
  color: var(--mila-text-soft);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Eine Person, wie sie später gepflegt würde. */
.personenkarte {
  padding: 1rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-bg);
}

.personenkarte__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.personenkarte__name {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
}

.personenkarte__typ {
  margin: 0;
  color: var(--mila-text-soft);
  font-size: 0.88rem;
}

.personenkarte__bereiche {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.bereichsmarke {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.verfuegbarkeitsliste {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 0.8rem;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.verfuegbarkeit {
  display: grid;
  grid-template-columns: 1.1rem 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.35rem 0.6rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  font-size: 0.9rem;
}

.verfuegbarkeit__zeichen { text-align: center; }

.verfuegbarkeit__stufe {
  color: var(--mila-text-soft);
  font-size: 0.8rem;
}

/* Die vier Stufen tragen dieselben Farben wie überall: satt, wenn es zählt,
   blass, wenn nicht. */
.verfuegbarkeit--regelmaessig .verfuegbarkeit__zeichen { color: #2f7a52; }
.verfuegbarkeit--teilweise .verfuegbarkeit__zeichen { color: #c9a227; }
.verfuegbarkeit--selten .verfuegbarkeit__zeichen { color: var(--mila-text-soft); }
.verfuegbarkeit--nicht .verfuegbarkeit__zeichen { color: var(--mila-line); }

.teamtabelle__fenster {
  text-align: center;
  font-size: 0.82rem;
  white-space: nowrap;
}

.teamtabelle__leise { color: var(--mila-text-soft); }

/* Die Nachsätze unter den Karten: Sie erklären, warum eine Zahl so dasteht.
   Leiser als der Fließtext, aber nicht so leise wie ein Hinweis am Feld. */
.plannotiz {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--mila-line);
  color: var(--mila-text-soft);
  font-size: 0.86rem;
  line-height: 1.5;
}

.plannotiz--gelb {
  border-left-color: var(--mila-warn-line);
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

.planfuss {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--mila-line);
  border-radius: var(--mila-radius-sm);
  color: var(--mila-text-soft);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Das Raster der Grundverfügbarkeit: sieben Tage, drei Schichten, in jeder
   Zelle eine Zahl. Man liest es als Bild, bevor man eine Zahl liest — deshalb
   trägt die Fläche die Farbe und nicht die Ziffer. */
/* Die Jahresleiste: zwölf Monate als eine Reihe, wie die Reiter der Stages —
   nur enger, weil zwölf davon nebeneinanderstehen. Auf dem Telefon rollt sie
   seitlich, statt umzubrechen: Eine Reihe liest sich als Jahr, zwei nicht. */
.jahresleiste {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.jahresleiste__wort {
  color: var(--mila-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monatsleiste {
  max-width: 100%;
  overflow-x: auto;
}

.monatsknopf {
  min-height: 34px;
  padding: 0.25rem 0.6rem;
  font-size: 0.85rem;
}

/* Ferienmonate tragen einen Punkt statt eines Rahmens: In ihnen sieht dasselbe
   Team anders aus, und wer den August anklickt, soll das vorher ahnen. */
.monatsknopf__ferien {
  margin-left: 0.25rem;
  color: var(--mila-kuehl);
  font-size: 0.6em;
  vertical-align: middle;
}

.monatslage {
  margin: 0 0 1.25rem;
  padding: 0.55rem 0.9rem;
  border-left: 3px solid var(--mila-line);
  border-radius: 0 var(--mila-radius-sm) var(--mila-radius-sm) 0;
  background: var(--mila-surface);
  color: var(--mila-text-lead);
  font-size: 0.9rem;
  line-height: 1.5;
}

.monatslage--ferien { border-left-color: var(--mila-kuehl); }
.monatslage--gemischt { border-left-color: var(--mila-warn-line); }

/* Auf dem Telefon rollt die Tafel seitlich, statt die Spalten zu quetschen:
   Sieben Tage nebeneinander brauchen Platz, und drei Buchstaben je Tag sind
   die Grenze der Lesbarkeit. */
.rastertafel {
  overflow-x: auto;
  margin: 0 -0.2rem;
  padding: 0 0.2rem;
}

.raster {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
}

.raster__ecke { width: 6.5rem; }

.raster__tag {
  padding: 0.2rem 0;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.raster__tag--wochenende { color: var(--mila-accent); }

.raster__lang { display: none; }

@media (min-width: 52rem) {
  .raster__kurz { display: none; }
  .raster__lang { display: inline; }
}

.raster__schicht {
  padding-right: 0.6rem;
  text-align: right;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
}

.raster__feld { padding: 0; }

/* Die Sättigung folgt der Menge, die Farbe der Faustregel. Zusammen ergibt das
   ein Bild, in dem der dünne Vormittag auffällt, ohne dass man Zahlen liest. */
/* Die Zelle ist ein Knopf: Ein Tippen zeigt, wer hinter der Zahl steht. Also
   auch die Knopf-Voreinstellungen zurücknehmen — Rahmen, Schrift, Zeiger. */
.zelle {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 2.6rem;
  min-height: 3.1rem;
  padding: 0.3rem 0.2rem;
  border-radius: var(--mila-radius-sm);
  background:
    linear-gradient(var(--ton), var(--ton)) no-repeat,
    var(--mila-surface-soft);
  background-size: 100% var(--fuellung, 100%);
  background-position: bottom;
}

.zelle--rot { --ton: #f3cfc4; }
.zelle--gelb { --ton: #f0e0ac; }
.zelle--gruen { --ton: #bcdcc7; }

.zelle__zahl {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Acht Leute ohne Koch sind kein besetzter Abend — die Zahl allein verschweigt
   das, also steht es darunter. */
.zelle__warnung {
  color: #9a3412;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.zelle:hover { outline: 2px solid var(--mila-line); outline-offset: -2px; }

.zelle:focus-visible,
.zelle--gewaehlt {
  outline: 2px solid var(--bereich-farbe, var(--mila-accent));
  outline-offset: -2px;
}

/* Die Namen unter dem Raster, in der Farbe des Bestands: Man liest sie im
   selben Blick, in dem man die Zahl angetippt hat. */
.rasterlupe {
  margin: 0.8rem 0 0;
  padding: 0.6rem 0.9rem;
  border-left: 3px solid var(--bereich-farbe, var(--mila-accent));
  border-radius: 0 var(--mila-radius-sm) var(--mila-radius-sm) 0;
  background: var(--mila-bg);
  font-size: 0.9rem;
  line-height: 1.5;
}

.rasterlegende__hinweis { margin-left: auto; font-style: italic; }

.zelle--probe {
  display: inline-block;
  min-width: 1.1rem;
  min-height: 1.1rem;
  padding: 0;
  vertical-align: middle;
  --fuellung: 100%;
}

.rasterlegende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.9rem;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

.rasterlegende__eintrag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.teamtabelle__tag {
  text-align: center;
  font-size: 0.8rem;
  border-left: 1px solid var(--mila-line);
}

.teamtabelle__zeichen {
  padding: 0.2rem 0.15rem;
  text-align: center;
  font-size: 0.9rem;
}

.teamtabelle__leise { color: var(--mila-text-soft); font-size: 0.85rem; }

.stufenprobe {
  display: inline-block;
  margin-left: 0.6rem;
  white-space: nowrap;
}

/* Zwei Raster, zwei Bestände. Der farbige Punkt an der Überschrift ist der
   einzige Unterschied in der Optik — mehr braucht es nicht, um sie
   auseinanderzuhalten, und mehr wäre Dekoration. */
.rasterkarte__titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.rasterkarte__punkt {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--bereich-farbe, var(--mila-accent));
}

.rasterkarte__pool {
  margin-left: auto;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
}

/* Die Verfügbarkeit in der Mitarbeiterliste: In derselben Zeile sehen, ob von
   dieser Person etwas hinterlegt ist — und es gleich nachtragen, wenn nicht. */
.verfuegbarkeitszelle {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  white-space: nowrap;
}

.verfuegbarkeitslink {
  display: inline-flex;
  flex-direction: column;
  gap: 0.05rem;
  color: var(--mila-text);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.verfuegbarkeitslink:hover { color: var(--mila-accent); }

.verfuegbarkeitslink__bis {
  color: var(--mila-text-soft);
  font-size: 0.78rem;
  font-weight: 400;
}

.verfuegbarkeitslink--fehlt { color: var(--mila-text-soft); font-weight: 400; font-style: italic; }
.verfuegbarkeitslink--endet { color: #8a6d0b; }

/* Wofür jemand da ist. Eine eigene Spalte und nicht statt der Phase: „Im Team“
   sagt, in welchem Verhältnis jemand zum Haus steht, „Küche“ sagt, was er dort
   tut — zwei Fragen, zwei Spalten.

   Die Farben sind dieselben wie die der beiden Raster in der Personalplanung:
   Wer die Liste kennt, erkennt sie dort wieder. */
.bereichszelle { white-space: nowrap; }

/* Die Phase bricht sonst mitten im Wort um: „IM“ über „TEAM“ liest sich wie
   zwei Marken. */
.admin-table .onboarding-marke { white-space: nowrap; }

.bereichszelle .bereichsmarke + .bereichsmarke { margin-left: 0.25rem; }

.bereichsmarke--kuche { background: #f6e6dc; color: #8a3d13; }
.bereichsmarke--service-bar { background: #dff0f3; color: #14606d; }
.bereichsmarke--reinigung { background: var(--mila-surface-soft); color: var(--mila-text-soft); }

/* Die Chips aus dem Onboarding, in der Regie eine Nummer kleiner: Hier wird mit
   der Maus gearbeitet und nicht mit dem Daumen. */
.bereichswahl { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.vchip--regie .vchip__wort {
  min-height: 38px;
  padding: 0.3rem 0.8rem;
  font-size: 0.9rem;
}

/* Wie vollständig das Raster gepflegt ist. Steht über den Zahlen, nicht unter
   ihnen: Ein Raster aus drei von vierzehn Leuten liest sich sonst als knappe
   Besetzung, dabei ist es eine knappe Pflege. */
.abdeckung {
  margin: 0 0 1.25rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--mila-warn-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Die Stammdaten einer Person: Begriff und Wert nebeneinander, nicht als
   Formular. Gepflegt wird an einer Stelle — hier steht, was gilt. */
.stammdaten {
  display: grid;
  gap: 0.1rem;
  margin: 0;
}

.stammdaten__paar {
  display: grid;
  grid-template-columns: minmax(9rem, 12rem) 1fr;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.stammdaten__paar:last-child { border-bottom: 0; }

.stammdaten dt {
  color: var(--mila-text-soft);
  font-size: 0.86rem;
}

.stammdaten dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

/* Habe ich das jetzt gespeichert?
   Der Zustand steht neben dem Knopf, mit dem man es tut — dort schaut man hin,
   wenn man sich die Frage stellt. Umgeschaltet wird über data-geaendert am
   Formular (siehe unsaved_controller.js), damit der Text im Formular bleibt und
   nicht im JavaScript. */
.speicherstand {
  margin-right: auto;
  font-size: 0.88rem;
  font-weight: 600;
}

.speicherstand__fertig,
.speicherstand__offen { display: none; }

[data-geaendert="nein"] .speicherstand__fertig {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--mila-ok-text);
}

[data-geaendert="ja"] .speicherstand__offen {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  color: var(--mila-warn-text);
}

/* Die Haken, die das Haus selbst setzt.

   Sie stehen in der Standspalte unter der Marke und nicht daneben: „Erledigt“
   und „Bestätigen“ in einer Zeile lesen sich wie ein Widerspruch. Erst der
   Stand, dann der Griff, der ihn ändert. */
.schritt-haken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}

.schritt-haken:empty { display: none; }

.schritt-haken form { margin: 0; }

/* Der Griff unter der Tabelle: Er steht dort, wo er hingehört, und klebt nicht
   am Bildschirmrand. */
.schritt-nachtrag {
  display: flex;
  padding-top: 1.1rem;
}

/* Ein Produkt, für das dieser Lieferant nur die Alternative ist.

   Es steht am Ende der Runde, und ohne diesen Satz fragt man sich, warum es
   überhaupt kommt: "Still" bestellt man bei Kratzer. Der Ton ist der der
   Hinweise, nicht der einer Warnung — es ist eine Zugabe, kein Problem. */
.pruefkarte__alternative {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.8rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* Und in der fertigen Liste: woher es sonst kommt. */
.bestellzeile__sonst {
  margin-left: 0.4rem;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Die Blocküberschrift über einer Gruppe von Haken — "Angebot", "Gäste".
   Sie trennt, ohne einen Kasten aufzumachen. */
.admin-label--block {
  display: block;
  margin: 1.1rem 0 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-label--block:first-of-type { margin-top: 0; }

/* Die oberste Kopfzeile der Zugangstabelle: "Dabei bei" und "Sieht diese
   Module". Sie steht über den Gruppen und trägt deshalb etwas mehr Gewicht. */
.zugangstabelle__gruppen--ober .zugangstabelle__gruppe {
  border-bottom: 1px solid var(--mila-line);
  color: var(--mila-text);
  font-size: 0.74rem;
}

/* Der Name bleibt stehen, während man nach rechts schiebt.

   Seit die Module als Spalten dazugekommen sind, ist die Tabelle breiter als
   jeder Bildschirm. Ohne das hakt man in einer Zeile an, von der man nicht mehr
   weiß, wem sie gehört — derselbe Fehler wie in der Mitarbeiterübersicht. */
.zugangstabelle th[scope="row"],
.zugangstabelle thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

/* Eine Ebene höher als die übrigen Kopfzellen: Die kleben schon für die
   senkrechte Achse und liegen damit auf derselben Höhe — die spätere Spalte
   malte sonst über den Namen. */
.zugangstabelle thead th:first-child {
  z-index: 3;
}

/* Die Blockschalter über der Zugangstabelle. */
.bausteinwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.bausteinwahl__wort {
  margin-right: 0.3rem;
  color: var(--mila-text-soft);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bausteinwahl__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
}

.bausteinwahl__knopf:hover { border-color: var(--mila-accent); }

/* Aufgeklappt trägt der Schalter die Hausfarbe — man sieht auf einen Blick,
   welche Blöcke gerade offen stehen. */
.bausteinwahl__knopf[aria-pressed="true"] {
  border-color: transparent;
  background: var(--mila-accent);
  color: #fff;
}

.bausteinwahl__zahl {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* "3 von 4" in der zugeklappten Spalte — ein Knopf, der den Block aufklappt. */
.bausteinstand {
  padding: 0.2rem 0.5rem;
  border: 1px solid transparent;
  border-radius: var(--mila-radius-sm);
  background: transparent;
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
}

.bausteinstand:hover {
  border-color: var(--mila-line);
  color: var(--mila-text);
}

/* Die Startseite der Regie ---------------------------------------------------

   Alle Module und Bereiche nebeneinander. Die Blöcke sind dieselben wie in der
   Klappliste oben rechts — siehe Regiewege::BLOECKE. */

.startseite__kopf {
  margin-bottom: 1.8rem;
}

/* Der Gruß steht über der Überschrift und nicht daneben: Daneben wäre er ein
   Erklärsatz zur Seite, darüber ist er das, was er sein soll — die Ankunft. */
.startgruss {
  margin: 0 0 0.15rem;
  color: var(--muted);
  font-size: 1rem;
}

.startgruss .produkt-signatur__back {
  color: var(--muted);
}

.startgruss .produkt-signatur__stage {
  color: var(--mila-text);
  font-weight: 700;
}

.startseite__titel {
  margin: 0;
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.startblock + .startblock {
  margin-top: 2.2rem;
}

.startblock__kopf {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}

.startblock__name {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Die Linie läuft bis zum Rand: Sie trennt die Blöcke, ohne dass jeder davon
   eine eigene Kiste braucht. */
.startblock__linie {
  flex: 1;
  height: 1px;
  background: var(--mila-line);
}

.startkacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.75rem;
}

.startkachel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.95rem 1.05rem 1.05rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--radius);
  background: var(--mila-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.startkachel:hover,
.startkachel:focus-visible {
  border-color: var(--mila-dunkel);
  transform: translateY(-1px);
}

.startkachel__name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.startkachel__satz {
  color: var(--muted);
  font-size: 0.86rem;
}

/* Die Stages tragen ihre Farbe — dieselbe wie auf dem Tablet. Nur sie: Hätte
   jede Kachel einen Streifen, sagte er nichts mehr. */
.startkachel--stage {
  border-left: 3px solid var(--startkachel-farbe, var(--mila-line));
}

@media (prefers-reduced-motion: reduce) {
  .startkachel {
    transition: none;
  }

  .startkachel:hover {
    transform: none;
  }
}

@media (max-width: 30rem) {
  .startkacheln {
    grid-template-columns: 1fr;
  }
}

/* Die Prüfkarte mit Sollbestand ---------------------------------------------

   Gezählt wird, was da ist; darunter steht, was bis zum Soll fehlt. Siehe
   Sollbestand und regie/bestellungen/_zaehlen. */

/* Das Soll steht ruhig über der Frage: Es ist die feste Größe, gegen die gezählt
   wird — nichts, was man hier einstellt. Dieselbe Fläche wie "Zuletzt bestellt". */
.pruefkarte__soll {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}

.pruefkarte__soll-wort {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pruefkarte__soll-zahl {
  font-size: 1.15rem;
}

.pruefkarte__hinweis {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Das Ergebnis ist die eigentliche Neuigkeit auf der Karte: Was fehlt, steht in
   der Farbe für "da ist etwas zu tun", was reicht, in der für "in Ordnung". */
.pruefkarte__ergebnis {
  margin: 0;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--mila-warn-line);
  border-radius: var(--radius);
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-variant-numeric: tabular-nums;
}

.pruefkarte__ergebnis--reicht {
  border-color: var(--mila-ok-line);
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
}

/* Ein Nebenweg und kein dritter Knopf: Er ist für den Karton zum Fest, nicht für
   jede Karte. */
.pruefkarte__nebenweg {
  align-self: center;
  padding: 0.3rem 0.5rem;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.pruefkarte__nebenweg:hover {
  color: var(--mila-text);
}

/* In der Übersicht: woher die Zahl kommt, klein unter dem Namen. */
.bestellzeile__soll {
  display: block;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Listen zum Abhaken: pflegen statt verwalten ---------------------------- */

/* Sechzig Schritte zwischen den übrigen Aufgaben ertränkten alles. Sie haben
 * deshalb eine eigene Seite, und auf der Aufgabenseite steht nur noch, wie weit
 * jede Liste heute ist. */
.ablaufliste-regie {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.ablaufliste-regie__weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  text-decoration: none;
}

.ablaufliste-regie__weg:hover {
  border-color: var(--mila-accent);
}

.ablaufliste-regie__wort {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.ablaufliste-regie__name {
  font-weight: 700;
}

.ablaufliste-regie__buehne,
.ablaufliste-regie__zahl {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.ablaufliste-regie__stand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.ablaufliste-regie__stand .ablaufbalken {
  width: 7rem;
}

/* Die Pflegeseite selbst ------------------------------------------------- */

.admin-rueckweg {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
}

.ablaufpflege__stand {
  margin: 0 0 0.8rem;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.ablaufpflege {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
  counter-reset: none;
}

.ablaufpflege__zeile {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

/* Abgeschaltet heißt: steht nicht auf dem Tablet, bleibt aber als Nachweis. */
.ablaufpflege__zeile--aus {
  opacity: 0.6;
}

.ablaufpflege__zahl {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.ablaufpflege__wort {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.ablaufpflege__dazu {
  color: var(--mila-text-soft);
  font-size: 0.82rem;
}

.ablaufpflege__griffe {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.ablaufpflege__form {
  display: inline;
  margin: 0;
}

/* Pfeile statt Ziehen: Auf einem Tablet mit fettigen Fingern trifft man einen
 * Knopf, eine Ziehgeste nicht. */
.ablaufpflege__pfeil {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}

.ablaufpflege__pfeil:disabled {
  opacity: 0.3;
  cursor: default;
}

.ablaufpflege__weg {
  padding: 0.3rem 0.55rem;
  border: 0;
  border-radius: var(--mila-radius-sm);
  background: none;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  text-decoration: none;
  cursor: pointer;
}

.ablaufpflege__weg:hover {
  color: var(--mila-text);
}

.ablaufpflege__weg--weg:hover {
  color: var(--mila-glocke);
}

.ablaufanhang__zeile {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.ablaufanhang__zeile .admin-input {
  flex-grow: 1;
}

/* Auf dem Handy wird nicht gepflegt, aber nachgesehen: Die Griffe rutschen
 * unter den Text, statt die Zeile zu sprengen. */
@media (max-width: 40rem) {
  .ablaufpflege__zeile {
    flex-wrap: wrap;
  }

  .ablaufpflege__griffe {
    width: 100%;
    justify-content: flex-end;
  }

  .ablaufanhang__zeile {
    flex-wrap: wrap;
  }
}

/* Sollbestand: alle eines Lieferanten auf einmal ------------------------- */

/* Er stand nur im Formular des einzelnen Produkts. Bei hundertvierzig
 * Produkten trägt ihn so niemand ein — und ohne ihn zeigt die Karte beim
 * Bestellen den Soll-Ist-Vergleich gar nicht erst. */
.sollliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.sollliste__weg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  text-decoration: none;
}

.sollliste__weg:hover {
  border-color: var(--mila-accent);
}

.sollliste__name {
  font-weight: 700;
}

.sollliste__stand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-shrink: 0;
}

.sollliste__zahl {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.sollliste__stand .ablaufbalken {
  width: 7rem;
}

.sollzeilen {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.sollzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.sollzeile__wort {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sollzeile__regal {
  color: var(--mila-text-soft);
  font-size: 0.8rem;
}

/* Die Einheit steht neben dem Feld: "6" allein heißt nichts — sechs Kisten,
 * sechs Kilo und sechs Flaschen sind drei verschiedene Bestellungen. */
.sollzeile__feld {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sollzeile__feld .admin-input {
  width: 5.5rem;
  text-align: right;
}

.sollzeile__einheit {
  width: 5rem;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

/* Die Umrechnung unter dem Soll: "4 Träger — das sind 96 Flaschen".
 *
 * Leise, weil sie nur einordnet: Gezählt wird in Trägern, die Zahl darunter
 * ist für den Abgleich mit der Inventur da, die in Flaschen zählt. */
.pruefkarte__soll-klein {
  margin: -0.4rem 0 0;
  text-align: center;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

/* Die Kopfzeile über den Bestellmaßen — drei Felder brauchen Namen. */
.sollkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 0.8rem 0.4rem;
}

.sollkopf__wort,
.sollkopf__feld {
  color: var(--mila-text-soft);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sollkopf__wort {
  flex-grow: 1;
}

.sollkopf__feld {
  width: 7rem;
  flex-shrink: 0;
  text-align: right;
}

/* Drei Felder statt einem: Die Zeile bekommt feste Spalten, damit die Zahlen
 * untereinander stehen und nicht nach Produktnamenlänge wandern. */
.sollzeile__feld {
  width: 7rem;
  justify-content: flex-end;
}

.sollzeile__wort {
  flex-grow: 1;
}

@media (max-width: 52rem) {
  .sollkopf {
    display: none;
  }

  .sollzeile {
    flex-wrap: wrap;
  }

  .sollzeile__wort {
    flex-basis: 100%;
  }
}

/* Aktionen für die WLAN-Seite ------------------------------------------- */

.aktionsliste {
  list-style: none;
  margin: 0 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.aktionszeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

/* Abgeschaltet heißt: steht nicht auf der Seite, bleibt aber hier. */
.aktionszeile--aus {
  opacity: 0.55;
}

.aktionszeile__wort {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.aktionszeile__titel {
  font-weight: 700;
}

.aktionszeile__text {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.aktionszeile__griffe {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.aktionsform {
  padding-top: 1rem;
  border-top: 1px solid var(--mila-line);
}

/* Bild je Aktion — in der Zeile, nicht in einem eigenen Formular. */
.aktionszeile__bild {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.aktionszeile__vorschau {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface-soft);
}

.aktionszeile__datei {
  max-width: 11rem;
  font-size: 0.78rem;
}

@media (max-width: 44rem) {
  .aktionszeile {
    flex-wrap: wrap;
  }

  .aktionszeile__wort {
    flex-basis: 100%;
  }
}

/* Die Kacheln der WLAN-Seite ---------------------------------------------- */

.kachelgruppe {
  margin: 1.1rem 0 0.5rem;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.kachelliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.kachelzeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

/* Abgeschaltet heißt: steht nicht auf der Seite, bleibt aber hier. */
.kachelzeile--aus {
  opacity: 0.55;
}

/* Jedes Feld mit Überschrift: Eine Klappliste ohne Beschriftung ist eine Frage,
 * die niemand beantwortet. Und der Knopf trägt Farbe — als graue Textzeile sah
 * er aus wie eine Beschriftung, und niemand fand ihn. */
.kachelzeile__form {
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex-grow: 1;
}

.kachelfeld {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 2 1 12rem;
}

.kachelfeld--schmal {
  flex: 1 1 9rem;
}

.kachelknopf {
  flex-shrink: 0;
}

.kachelzeile__griffe {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}

.kachelform {
  margin-top: 1.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--mila-line);
}

/* Die Betriebsangaben — vier Blöcke, je ein Raster aus Feldern. */
.angabenblock {
  margin-bottom: 1rem;
}

.angabenfelder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.angabenrest {
  margin: 0 0 1rem;
}

/* Die Öffnungszeiten — je Tag eine Zeile.
 *
 * So denkt man sie. Dass auf der Website "Freitag – Samstag" daraus wird, ist
 * Darstellung und passiert von selbst (siehe Oeffnungswoche). */
.wochenliste {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.35rem;
}

.wochenzeile {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

.wochenzeile__tag {
  width: 7rem;
  flex-shrink: 0;
  font-weight: 700;
}

.wochenzeile__ruhe {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.wochenzeile__zeit {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.wochenzeile__zeit .admin-input {
  width: 4.2rem;
  text-align: right;
}

.wochenzeile__bis,
.wochenzeile__uhr {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

/* Die Texte der Anwendung — deutsch und englisch nebeneinander.
 *
 * Nebeneinander und nicht auf zwei Seiten: Wer einen Satz ändert, soll die
 * Übersetzung im selben Moment sehen. Sonst laufen die Fassungen auseinander
 * und niemand merkt es. */
.textliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.textzeile {
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mila-line);
}

.textzeile:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.textzeile__ort {
  margin: 0 0 0.4rem;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.textzeile__felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 0.8rem;
}

.textzeile__feld {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Der Schalter über den beiden Listen einer Bühne. */
.buehnenschalter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

/* Wie oft eine Kachel gedrückt wurde. Leise: Sie ist eine Auskunft und keine
 * Aufforderung — was man damit macht, entscheidet man selbst. */
.kachelzeile__klicks {
  flex-shrink: 0;
  min-width: 3rem;
  text-align: right;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}