/*
 * 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 {
  margin: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 16px;
  line-height: 1.55;
}

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

/* Siehe .kitchen-logo__bereich — dieselben Maße, dieselbe Stelle. */
.admin-logo__bereich {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5;
  color: var(--buehnen-farbe, var(--mila-text));
  white-space: nowrap;
}

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

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

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

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

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