/*
 * Regie (MILA.)
 *
 * Nutzt dieselben Farben, Radien und Schatten wie die Küchenansicht (die
 * --mila-Variablen aus kitchen.css). Bewusst keine klassische Admin-Optik:
 * warme Flächen, große Eingabefelder, klare Beschriftungen — bedienbar auch
 * auf dem Tablet.
 */

body.regie {
  /* Die Farbe des Regie-Rahmens. Bewusst keine der --mila-Farben: Terracotta ist
     die Küche und zugleich die Farbe jedes Hauptknopfs, und ein Rahmen, der wie
     eine Aktion aussieht, zieht Aufmerksamkeit, die er nicht braucht. Petrol
     gehört keiner Stage und keinem Knopf. */
  --regie-rahmen: #1f5560;

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

/* Der Rahmen, der zeigt: Du bearbeitest gerade.
 *
 * Links steht das Modul — Stages, Academy, Projekte —, denn das ist der Ort.
 * Ob man dort liest oder schreibt, ist kein zweiter Ort, sondern ein Zustand,
 * und ein Zustand gehört nicht in die Wortmarke. Er gehört um die ganze Seite:
 * sichtbar, ohne dass man ihn liest.
 *
 * Fest über der Seite statt als Rand am Body, damit er beim Scrollen stehen
 * bleibt und kein Layout verschiebt. Ohne Mauszeiger-Fang, sonst schluckte er
 * die Klicks am Bildschirmrand. */
body.regie::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  border: 6px solid var(--regie-rahmen);
  pointer-events: none;
}

/* Und damit man nicht raten muss, wofür der Rahmen steht, sagt er es selbst.
   Unten links: Dort ist auf jeder Seite Platz, und der Kopfbereich bleibt frei. */
body.regie::before {
  content: "Regie";
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 101;
  padding: 0.3rem 0.85rem 0.35rem;
  border-radius: 0 8px 0 0;
  background: var(--regie-rahmen);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  pointer-events: none;
}

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;
  /* Die zweite Zeile trug einmal die laufende Stage in ihrer Farbe. Sie ist weg,
     die Höhe bleibt: Sonst spränge die Kopfzeile beim Wechsel zwischen Regie und
     Nutzeransicht um eine Zeile. */
  min-height: 3.875rem;
  /* 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(35, 27, 20, 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. */
.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-bg);
  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;
}

.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.08em;
  text-transform: uppercase;
}

/* 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. */
.vorschaufenster {
  --vorschau-breite: 1180px;
  --vorschau-hoehe: 800px;
  --vorschau-faktor: 0.24;

  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-bg);
}

.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;
}

.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;
  }
}

/* Speichern klebt unten — bei einer Anleitung mit zwölf Schritten sonst außer
   Sicht. */
.anleitungsform__leiste {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 0.85rem clamp(1rem, 2vw, 1.5rem);
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--mila-shadow);
}

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

/* 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 ------------------ */

.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-bg);
}

.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;
}

.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: #a2542f;
  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 ----------------------------------------------------------------- */

.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;
}

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

.admin-table thead th {
  background: var(--mila-surface-soft);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.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;
}

.admin-preview img {
  display: block;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 4 / 3;
  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: 4 / 3;
  /* 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;
}

.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-bg);
}

.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;
  }
}

/* Begrüßung beim ersten Anmelden ----------------------------------------- */

.willkommen {
  margin-bottom: 1.75rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

.willkommen__marke {
  margin: 0 0 0.9rem;
  font-size: 1.9rem;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}

.willkommen__back {
  color: var(--mila-text-soft);
  font-weight: 400;
  opacity: 0.75;
}

.willkommen__stage {
  color: var(--mila-text);
  font-weight: 700;
}

.willkommen__titel {
  margin: 0 0 0.35rem;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.willkommen__text {
  max-width: 32rem;
  margin: 0 auto 1.5rem;
  color: var(--mila-text-soft);
}

/* 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;
}

.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.08em;
  text-transform: uppercase;
  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;
}

/* Die Begrüßung nimmt der Seite sonst zu viel Platz. Mittig gesetzt steht sie
   ruhig über allem, was darunter kommt. */
.willkommen {
  margin-bottom: 1.25rem;
  padding: 1.1rem clamp(1.1rem, 2vw, 1.6rem);
  text-align: center;
}

.willkommen__marke {
  margin-bottom: 0.4rem;
  font-size: 1.6rem;
}

.willkommen__titel {
  font-size: 1.05rem;
}

.willkommen__text {
  margin: 0 auto;
  max-width: 34rem;
  font-size: 0.94rem;
}

.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;
}

.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-bg);
  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-bg);
}

.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;
}