/*
 * Küchenansicht (MILA.)
 *
 * Gestaltet für ein fest installiertes Tablet: helle, warme Flächen, große
 * Touchziele (mindestens 52 px) und Schriftgrößen, die auch aus einem Meter
 * Entfernung lesbar sind. Bewusst ohne Dark Mode — in der Küche zählt Kontrast.
 *
 * Alle Farben liegen als Variablen vor und lassen sich später zentral auf das
 * MILA.-Corporate-Design umstellen.
 */

/* Auf :root, damit auch die Regie dieselben Farben und Maße nutzt.
 *
 * Die Neutraltöne folgen Apples Systemfarben: weiße Fläche, ein sehr helles Grau
 * für zurücktretende Flächen, ein neutrales Grau für Linien und Nebentext. Das
 * wirkt aufgeräumter als die früheren Cremetöne und lässt die Fotos und die
 * Kategoriefarben die Farbe machen.
 *
 * Die Hausfarbe bleibt warm — sie ist die Handschrift von MILA und soll nicht in
 * einem Systemblau verschwinden. */
:root {
  /* Tanne und Creme. Der Grund ist getönt, nicht weiß: Auf Weiß trug die
     Hausfarbe allein, und jede Seite sah aus wie ein Blatt Papier mit einem
     Knopf darauf. Jetzt steht eine helle Karte auf einem warmen Grund — die
     Kachel hebt sich ab, ohne dass ein Rahmen sie umranden muss. */
  /* Grund und Fläche sind zwei verschiedene Dinge — das fiel nur nie auf,
     solange beide weiß waren. Ein Dutzend Karten trug deshalb --mila-bg und
     war in dem Moment unsichtbar, in dem der Grund getönt wurde: Die
     Rezeptkachel hatte exakt die Farbe der Seite hinter ihr.

     Die Regel: --mila-bg trägt, was der Grund IST (body) oder was in ihn
     hineingeht (Eingabefelder, Ablageflächen — sie sollen vertieft wirken).
     --mila-surface trägt alles, was obenauf LIEGT: Karten, Kacheln, Leisten,
     Knöpfe. */
  --mila-bg: #f4f2e6;
  --mila-surface: #ffffff;
  --mila-surface-soft: #edebdc;
  /* Kein reines Schwarzgrau: ein Ton mit demselben warmen Einschlag wie der
     Grund, sonst liegt kühler Text auf warmem Papier.

     Derselbe Wert wie --mila-dunkel. Hier standen zwei — #14150f und #15170f,
     beide "das Dunkelste im Haus", nur nie verglichen. Zwei Hausschwarz hat
     niemand entschieden, sie sind nacheinander entstanden. */
  --mila-text: #15170f;
  --mila-text-soft: #5b5e4f;
  /* Zwischen Text und Beiwerk: für Sätze, die erklären und deshalb gelesen
     werden sollen — soft ist dafür zu blass. */
  --mila-text-lead: #414434;
  --mila-line: #d8d5c2;
  /* Der einzige kühle Ton im ganzen Haus — für alles, was kalt ausgegeben wird.
     Er hat nichts zu suchen, wo es um Geschmack oder Herkunft geht: Seine ganze
     Aufgabe ist, den Unterschied zwischen heiß und kalt zeigen zu können, ohne
     dass man eine Überschrift lesen muss. */
  --mila-kuehl: #3d7ea6;
  --mila-accent: #0f4d40;
  --mila-accent-soft: #e2edea;

  /* Was auf einer Akzentfläche steht, und was der Akzent als Schrift ist.
   *
   * Beides stand fest im Code — "color: #fff" neben jedem grünen Knopf. Das
   * ging, solange der Akzent dunkel war. Auf den Gästeseiten ist er jetzt
   * gelb, und weiße Schrift darauf liest niemand. Als Schrift wiederum ist
   * helles Gelb auf Creme unlesbar; dafür steht das tiefe Bernstein. */
  --mila-auf-akzent: #ffffff;
  --mila-akzent-schrift: var(--mila-accent);

  /* Die Nachtfarben: der Grund für alles, was einen Gast empfängt.
   *
   * Entstanden auf der WLAN-Seite und dort zunächst frei erfunden. Sie stehen
   * jetzt hier, weil sie eine Entscheidung tragen: dunkel, wo jemand ankommt;
   * hell, wo jemand nachliest. */
  --mila-nacht: #15170f;
  --mila-nacht-flaeche: #1f2218;
  --mila-nacht-linie: #333727;
  --mila-nacht-leise: #a8aa97;

  /* Die Gästefarbe. Ein Gast soll an vier verschiedenen Stellen dieselbe Farbe
   * sehen und merken, dass das dasselbe Haus ist. */
  --mila-gast: #ffc72c;
  --mila-gast-tief: #8a6400;
  --mila-gast-soft: #fdf3d8;
  /* Der Flieder ist kein zweiter Akzent, sondern ein Tupfer: für die eine
     Stelle, die sich melden soll, wenn ringsum schon Tanne steht. */
  --mila-tupfer: #dcc9f7;
  /* Die dunkle Hälfte der Zweiteilung — Anmeldung und Kopfbereich. */
  --mila-dunkel: #15170f;
  /* Die Zahl an der Glocke: das einzige Zeichen in der Kopfzeile, das etwas
     will. Nicht die Warnfarbe daneben — die ist ein Hinweisfeld und zu hell für
     weiße Ziffern —, sondern das satte Rotbraun aus der Sprachwahl. */
  --mila-glocke: #c0451f;
  --mila-warn-bg: #fff8ec;
  --mila-warn-line: #e6a23c;
  --mila-warn-text: #7a5312;
  --mila-ok-bg: #edf7ee;
  --mila-ok-line: #34a853;
  --mila-ok-text: #1e6b34;

  /* Die Hausschrift von MILA ist "Neue Einstellung". Sie ist keine Systemschrift:
     Solange die Dateien nicht im Projekt liegen, greift die Kette weiter zur
     Systemschrift (SF Pro auf Mac und iPad) — die Seite bleibt also in jedem Fall
     lesbar, und sobald die Schrift da ist, zieht sie von selbst. */
  --mila-font: "Neue Einstellung", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Die Wortmarke steht in Shrikhand — nur dort, nicht im Fließtext. */
  --mila-font-logo: "Shrikhand", Georgia, "Times New Roman", serif;

  --mila-radius: 22px;
  --mila-radius-sm: 14px;
  --mila-touch: 56px;
  /* Schatten neutral statt bräunlich — auf Weiß fällt ein warmer Schatten auf. */
  --mila-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 26px rgba(0, 0, 0, 0.06);
  --mila-shadow-lifted: 0 18px 50px rgba(0, 0, 0, 0.22);
}

body.kitchen {
  margin: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 18px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

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

body.kitchen.is-modal-open {
  overflow: hidden;
}

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

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

.kitchen-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0.85rem clamp(1rem, 3vw, 2.5rem);
  background: rgba(242, 243, 244, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mila-line);
}

/* Spaltenabstand wie in der Regie (.admin-header__inner) — sonst sitzt der Weg
   auf die andere Oberfläche in beiden Masken ein paar Pixel versetzt. */
.kitchen-header__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  align-items: center;
  justify-content: space-between;
}

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

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

/* Zeilenhöhe ausdrücklich: Die Stage setzt den Grundtext auf 1,5, die Regie auf
   1,55 — geerbt stünde die Wortmarke sonst je Maske einen halben Pixel anders. */
.kitchen-logo__mark {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.5;
}

.kitchen-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);
  white-space: nowrap;
}

/* Die laufende Stage: dunkel, gemischte Schreibweise, ohne Sperrung — sie soll
   sich als eigene Angabe lesen, nicht als Fortsetzung der Wortmarke. */
.kitchen-logo__bereich {
  display: inline-flex;
  align-items: center;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5;
  /* In der Farbe ihrer Stage — die einzige farbige Stelle in der Kopfzeile. */
  color: var(--buehnen-farbe, var(--mila-text));
  white-space: nowrap;
}


.kitchen-header__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.icon-button,
.kitchen-header__admin {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.55rem 1.15rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

/* Bereichswechsel auf der Stage und in der Regie.
 *
 * Vorher: eine graue Wanne mit bunten Pillen darin — viel Farbe für eine Zeile,
 * die nur sagt, wo man ist. Jetzt tragen die Reiter selbst nichts: Der aktive
 * steht auf weißem Grund mit einem feinen Rand und einem Streifen in der Farbe
 * seiner Stage darunter. Das ist dieselbe Auskunft, ruhiger gesetzt — und die
 * Farbe bleibt dort, wo sie etwas bedeutet.
 */
.stage-switch {
  display: inline-flex;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--mila-text) 4%, transparent);
}

.stage-switch__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0.3rem 1rem;
  border-radius: 11px;
  color: var(--mila-text-soft);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms cubic-bezier(0.32, 0.72, 0, 1),
              background 140ms cubic-bezier(0.32, 0.72, 0, 1);
}

.stage-switch__tab:hover {
  color: var(--mila-text);
}

.stage-switch--fest {
  margin: 0;
}

/* Abgeschaltet: Der Reiter bleibt bedienbar, sagt aber, dass ihn niemand sieht. */
.stage-switch__aus {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(15, 20, 18, 0.1);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stage-switch__tab--aus:not(.stage-switch__tab--active) {
  color: var(--mila-text-soft);
}

/* Der aktive Reiter steht erhaben auf weißem Grund — wie eine Karte, die nach
   vorn geholt wurde. Die Farbe seiner Stage trägt er als Streifen darunter:
   genug, um Küche und Bar im Vorbeigehen zu unterscheiden, ohne die ganze Zeile
   einzufärben. */
.stage-switch__tab--active {
  background: var(--mila-surface, #fff);
  color: var(--mila-text);
  box-shadow: 0 1px 2px rgb(15 20 18 / 0.06), 0 1px 8px rgb(15 20 18 / 0.06);
}

.stage-switch__tab--active::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.28rem;
  height: 2px;
  border-radius: 2px;
  background: var(--buehnen-farbe, var(--mila-accent));
}

.offline-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-size: 0.95rem;
  font-weight: 600;
}

/* Wechsel in die Regie ------------------------------------------------------- */

/* Steht an derselben Stelle wie in der Regie der Weg zurück auf die Stage. */
.kitchen-nav {
  display: flex;
  align-items: center;
  flex: 1;
}

/* Der Wegweiser: die Bereiche von backstage und rechts der Weg in die Regie.
   Steht in der Mitte der Kopfzeile, auf Stage und Academy an derselben Stelle
   und in denselben Maßen — beim Wechsel soll nichts springen. */
.wegweiser {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1.5rem;
  min-width: 0;
  /* Wird es eng, schiebt die ganze Zeile — sie schrumpft nicht. Ohne das fielen
     die hinteren Einträge lautlos weg, und "Projekte" steht als letztes: Man
     wechselt nicht, wovon man nicht weiß, dass es da ist. */
  overflow-x: auto;
  scrollbar-width: none;
}

.wegweiser::-webkit-scrollbar {
  display: none;
}

.wegweiser__liste {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0.2rem;
  list-style: none;
  border-radius: 12px;
  background: var(--mila-surface);
  /* Nicht schrumpfen: Sonst gibt die Liste nach, sobald der Platz knapp wird,
     und schneidet ihre eigenen Einträge ab. Geschoben wird die Zeile darüber —
     eine Geste für alles statt eine je Liste. */
  flex: none;
}

.wegweiser__liste::-webkit-scrollbar {
  display: none;
}

.wegweiser__eintrag {
  display: inline-block;
  padding: 0.36rem 0.8rem;
  border-radius: 9px;
  color: var(--mila-text-soft);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

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

/* Wo man gerade ist, muss man auf einen Blick sehen. Eine helle Fläche mit
   Schatten reichte dafür nicht: Daneben stand ein umrandeter Eintrag, und der
   sah genauso nach Auswahl aus. Jetzt ist der offene Bereich gefüllt — dunkel
   auf hell, das verwechselt man mit nichts. */
.wegweiser__eintrag--hier,
.wegweiser__liste--eigenes .wegweiser__eintrag--hier {
  background: var(--mila-text);
  border-color: transparent;
  color: var(--mila-bg);
}

/* Maße wie .kitchen-nav__wechsel und body.regie .admin-nav__link — derselbe
   Knopf, dieselbe Größe, egal von welcher Seite man kommt. */
/* Der Weg in die Regie steht am Ende der Zeile, hinter den Bühnen — er führt
   aus der Nutzeransicht heraus und ist deshalb kein Nachbar der anderen. */
.wegweiser__regie {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.42rem 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  color: var(--mila-text);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

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

/* Schriftgröße ausdrücklich in rem: Auf der Stage steht der Grundtext auf 18 px,
   in der Regie auf 16 — sonst wäre derselbe Knopf hier höher. */
.kitchen-nav__wechsel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  /* Maße wie body.regie .admin-nav__link — derselbe Knopf, dieselbe Größe. */
  padding: 0.42rem 0.85rem;
  font-size: 1rem;
  /* Auch die Zeilenhöhe ausdrücklich: geerbt stünde sie hier auf 1,5 und in der
     Regie auf 1,55 — der Knopf wäre dort einen Pixel höher. */
  line-height: 1.5;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  color: var(--mila-text);
  font-weight: 600;
  text-decoration: none;
}

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

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

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

/* Bedienleiste unten rechts ------------------------------------------------ */

.bedienleiste {
  position: fixed;
  right: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Suche ------------------------------------------------------------------- */

/* Zugeklappt ist nur die Lupe da; das Feld wächst nach links aus ihr heraus. */
.suche {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.suche__knopf {
  display: grid;
  place-items: center;
  flex: none;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--mila-line);
  border-radius: 50%;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  cursor: pointer;
  box-shadow: var(--mila-shadow);
}

.suche__knopf:hover,
.suche--offen .suche__knopf {
  border-color: #d6c9b8;
  color: var(--mila-text);
}

.suche__symbol {
  width: 22px;
  height: 22px;
}

.search-bar {
  width: 0;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  /* Zugeklappt darf das Feld auch mit der Tabulatortaste nicht erreichbar sein. */
  visibility: hidden;
  transition: width 220ms cubic-bezier(0.32, 0.72, 0, 1), opacity 160ms ease,
              visibility 0s linear 220ms;
}

.suche--offen .search-bar {
  width: min(24rem, 45vw);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.search-bar__field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-bar__input {
  width: 100%;
  min-height: 54px;
  padding: 0.5rem 4rem 0.5rem 1.5rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 1.15rem;
  box-shadow: var(--mila-shadow);
  appearance: none;
}

.search-bar__input::placeholder {
  color: var(--mila-text-soft);
  opacity: 0.75;
}

.search-bar__input:focus-visible {
  outline: 3px solid var(--mila-accent-soft);
  outline-offset: 0;
  border-color: var(--mila-accent);
}

.search-bar__clear {
  position: absolute;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 1.05rem;
  cursor: pointer;
}

/* Kategoriefilter --------------------------------------------------------- */

.kitchen-main {
  max-width: 1560px;
  margin: 0 auto;
  padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 4rem;
}

.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.75rem;
}

/* 44 Pixel statt 52: die Untergrenze, die eine Fingerkuppe noch sicher trifft —
   und schmal genug, dass neun Themen auf einem breiten Bildschirm in eine Zeile
   passen statt in zwei. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

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

/* Die Filterknöpfe tragen dieselben Farben wie die großen Kacheln der ersten
   Maske — wer dort "Aperitivo" gewählt hat, findet es hier in derselben Farbe
   wieder. Zurückgenommen, solange der Filter aus ist; voll, sobald er an ist. */
.chip--farbig {
  background: var(--kategorie-farbe);
  border-color: transparent;
  color: #fff;
}

/* Der gewählte Knopf bekommt einen Ring statt einer anderen Deckkraft: Weiße
   Schrift auf einer durchscheinenden Fläche liest sich am Tablet schlecht. */
.chip--farbig.chip--active {
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--mila-bg), 0 0 0 4px var(--kategorie-farbe);
}

/* Kachelübersicht --------------------------------------------------------- */

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

.recipe-card {
  position: relative;
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  /* Ein feiner Rand und ein etwas tieferer Schatten: Auf der hellen Fläche
     verschwammen die Kacheln vorher mit dem Hintergrund. */
  border: 1px solid var(--mila-line);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06), 0 6px 16px rgb(0 0 0 / 0.05);
  /* Schneidet die Enden der Banderole sauber an der Ecke ab. */
  overflow: hidden;
  transition: transform 0.15s ease;
}

/* Auf einer anderen Bildschirmseite — der Pager blendet sie aus. */
.recipe-card.is-offpage {
  display: none;
}

.recipe-card:active {
  transform: scale(0.985);
}

.recipe-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

/* Quadratisch, nicht quer: Ein Glas ist hoch, ein Teller rund — 4:3 schneidet
   bei beidem das Falsche weg. */
.recipe-card__image {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--mila-surface-soft);
  overflow: hidden;
}

.recipe-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Die Wortmarke: ohne Foto ist der Name das Bild.
 *
 * Hier stand eine Skizze des Glases im Bildfeld. Sie hielt zwar das Maß eines
 * Fotos, sagte aber auf zwölf Aperitivo-Kacheln zwölfmal dasselbe — und darunter
 * blieb dem Namen so wenig Platz, dass man ihn aus einem Meter nicht las.
 *
 * Jetzt füllt der Name die Fläche, in der Farbe seines Fachs, mit einer breiten
 * Kante links. Wie groß er steht, entscheidet sein eigener Umfang: "Mimosa"
 * größer als "Sarti Lemon Spritz" — siehe RecipesHelper#wortgroesse. Nur an der
 * Bar; in Küche und Wiki hängen an fast jeder Kachel Fotos. */
/* Mit body.kitchen davor: kitchen-feinschliff.css setzt Rahmen und Schriftgröße
   der Kachel mit genau dieser Spezifität. Ohne das Präfix gewinnt dort 1,26 rem
   gegen die Wortgröße, und von der Wortmarke bliebe nur die Farbe übrig. */
/* Der Streifen gehört zur Bar, nicht zur Wortmarke: Mit Foto sah die Kachel
   sonst aus wie aus einem anderen Raster — mal mit Kante, mal ohne. */
body.kitchen .recipe-card--getraenk {
  border-left: 10px solid var(--kategorie-farbe);
}

body.kitchen .recipe-card--wortmarke .recipe-card__link {
  min-height: 8.5rem;
}

body.kitchen .recipe-card--wortmarke .recipe-card__body {
  justify-content: center;
  height: 100%;
  gap: 0.25rem;
  padding: 1rem 1.1rem;
}

/* Der farbige Strich über dem Namen entfällt: Die Kante links sagt dasselbe. */
body.kitchen .recipe-card--wortmarke .recipe-card__body::before {
  display: none;
}

body.kitchen .recipe-card--wortmarke .recipe-card__category {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kategorie-farbe);
}

/* Eine Größe für alle Getränke, mit Foto wie ohne.
 *
 * Nach Länge gestaffelt war es naheliegend und sah im Raster falsch aus:
 * "Mimosa" schrie neben "Sarti Lemon Spritz", und zwei Kacheln nebeneinander
 * wirkten unterschiedlich wichtig, obwohl sie es nicht sind. 1,7 rem trägt auch
 * den längsten Namen der Karte — "Crodino Tonic Spritz" — in drei Zeilen.
 *
 * Seit auf der Getränkekachel kein Foto mehr steht, gehört ihm die ganze
 * Fläche: 2 statt 1,7 rem. Aus einem Meter Entfernung ist das der Unterschied
 * zwischen Lesen und Erraten.
 *
 * Nicht mehr: Gemessen bei 240 Pixeln Kachelbreite — der schmalsten, die der
 * Blätterer rechnet — brechen "Iced Matcha Latte" und "Großer Cappuccino" ab
 * 2,2 rem aus der Zeile. */
body.kitchen .recipe-card--getraenk .recipe-card__name {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Der Name bleibt schwarz — auch ohne Foto.
 *
 * In der Fachfarbe gesetzt las sich dieselbe Karte je nach Bild anders: hier
 * ein oranger Name, daneben ein schwarzer unter einem Foto. Die Farbe trägt die
 * Kante links, und das genügt: Zwei Träger für dieselbe Auskunft machen das
 * Raster unruhig, nicht deutlicher. */
body.kitchen .recipe-card--getraenk .recipe-card__name {
  color: var(--mila-text);
}

/* Das Foto nimmt, was der Name übrig lässt.
 *
 * Ein Quadrat ginge nicht: Die Kachelhöhe steht fest, weil der Blätterer ganze
 * Zeilen auf den Bildschirm rechnet (siehe --tile-row-size). Ein quadratisches
 * Bild von 213 Pixeln in einer 160 Pixel hohen Kachel schob den Namen hinaus.
 * Der Name behält seine Größe, das Bild wird zum Streifen — und ein Streifen
 * mit Ausschnitt zeigt immer noch, was im Glas ist. */
body.kitchen .recipe-card--getraenk .recipe-card__image img {
  object-fit: cover;
}

.recipe-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.15rem 1.3rem 1.45rem;
}

/* Ohne Foto trägt die Kachel den Text allein. Die Kategorie wird zur Hauptsache:
   groß, farbig und oben — an der Bar sagt "Aperitivo" mehr als jedes Bild. */
.recipe-card--ohne-bild .recipe-card__body {
  justify-content: center;
  height: 100%;
  gap: 0.5rem;
  padding: 1.3rem;
}

.recipe-card--ohne-bild .recipe-card__category {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
}

.recipe-card--ohne-bild .recipe-card__body::before {
  width: 3rem;
  height: 4px;
  margin-bottom: 0.7rem;
}

.recipe-card--ohne-bild .recipe-card__name {
  font-size: 1.55rem;
  line-height: 1.2;
}

/* Das Toastsymbol im Schritttext.
 *
 * Deutlich größer als die Zeile: Es soll aus einem Meter Entfernung erkennbar
 * sein, und die Ziffer darin ist die eigentliche Auskunft — welche der beiden
 * Scheiben gemeint ist. Zeilenhoch war es ein Ornament neben dem Text.
 *
 * Die Zeilenhöhe der Schritte trägt das mit; die Kachel schrumpft notfalls über
 * --dichte mit, siehe anleitung_controller.js. */
.toaststufe {
  display: inline-block;
  width: 2.2em;
  height: 2.2em;
  margin-right: 0.15em;
  vertical-align: -0.75em;
}

/* Steht das Gebäck an der Stelle des Zählers, darf es dessen ganzen Platz
   nehmen — und der ist rund und fingerbreit. Kein Abstand rechts und keine
   Grundlinienverschiebung: Hier steht es für sich, nicht im Satz. */
.instruction-list__number .toaststufe,
.instruction-list__number .pinsazeichen {
  width: 100%;
  height: 100%;
  margin-right: 0;
  vertical-align: baseline;
}

/* Der Kreis um die Nummer entfällt: Das Gebäck ist die Form.
 *
 * Und es darf deutlich größer sein als eine Ziffer im Kreis — es ist das
 * Erkennungszeichen des Schritts und soll aus einem Meter Entfernung sagen,
 * was da belegt wird. */
/* Mit .recipe-detail davor, damit die Maße im Fenster nicht von der Regel
   gewinnen, die dort alle Zähler auf 1,9em stutzt. */
.recipe-detail .instruction-list__item--zeichen .instruction-list__number,
.recipe-detail__body .instruction-list__item--zeichen .instruction-list__number {
  width: 3.8rem;
  height: 3.8rem;
  background: none;
  color: var(--kategorie-farbe, var(--mila-accent));
}

.recipe-card__category {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--kategorie-farbe, var(--mila-accent));
}

/* Der Platz für ein Foto, das noch fehlt.
 *
 * Er bleibt stehen, damit der Ablauf beim Blättern nicht von Anleitung zu
 * Anleitung an eine andere Stelle springt — und damit man sieht, dass hier eines
 * hingehört. Leise: eine gestrichelte Fläche, kein Fehlerkasten. */
/* Nur quer ist die linke Seite eine echte Spalte — sonst gibt es sie nicht, und
   Foto, Zutaten, Glas und Deko stehen einzeln untereinander wie bisher. */
.recipe-detail__links {
  display: contents;
}

/* Zutaten und Glas als ein Block: Beides legt man sich zurecht, bevor man
   anfängt, und im Raster standen sie 56 Pixel auseinander — die Zutatenzeile
   bekam die Höhe des Ablaufs daneben, und das Glas rutschte ans untere Ende der
   Karte. Auf dem Telefon zählt nur die Reihenfolge; dort löst er sich auf. */
.recipe-detail__zurecht {
  display: contents;
}

.recipe-detail__ohne-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  aspect-ratio: 1;
  /* Hochkant nimmt das Fenster die ganze Breite: Ein Quadrat darin wäre so hoch
     wie die halbe Seite, und die Zubereitung stünde erst darunter — das Fenster
     müsste gescrollt werden. Ein Platz für ein fehlendes Foto darf nie mehr Raum
     nehmen als das Foto selbst. */
  width: 100%;
  max-height: min(30vh, 260px);
  border: 2px dashed var(--mila-line);
  border-radius: var(--mila-radius, 18px);
  background: var(--mila-surface);
  color: var(--mila-text-soft);
}

.recipe-detail__ohne-bild svg {
  width: 22%;
  max-width: 4.5rem;
  opacity: 0.5;
}

/* Was auf dem Bild passiert, in Worten. Die Zeile bleibt stehen, auch wenn keine
   Unterschrift hinterlegt ist — sonst rutschten die Pfeile beim Blättern. */
.schrittbilder__unterschrift {
  min-height: 1.35em;
  margin: 0.4rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.92em;
  line-height: 1.35;
  text-align: center;
}

/* Groß liegt die Folge über der ganzen Fläche — dort steht die Unterschrift auf
   dem dunklen Grund und braucht seine Farbe. */
.schrittbilder.is-gross .schrittbilder__unterschrift {
  color: rgb(255 255 255 / 0.85);
}

/* Der erste Satz auf der Wiki-Kachel.
 *
 * Ohne ihn stand in einer Kachel von 130 mal 170 Pixeln ein Titel und sonst
 * nichts — "Müll & Leergut", darum herum Weiß. Man musste jede Kachel öffnen, um
 * zu wissen, ob sie einen angeht.
 *
 * In ganzen Zeilen abschneiden, nie mittendrin: Ein halber Buchstabe am unteren
 * Rand sieht aus wie ein Fehler. Wie viele Zeilen es sind, hängt am Platz —
 * am Handy zwei, ab Tablet vier. */
/* Zwei Zeilen, nicht mehr.
 *
 * Erst nahm sich der Satz die ganze Kachel — und damit stand der Artikel schon
 * auf der Übersicht. Wer eine Übersicht liest, will nicht lesen, sondern
 * auswählen: ein Titel und ein grober Hinweis, worum es geht. Der ganze Text
 * steht eine Berührung später.
 *
 * In ganzen Zeilen abschneiden, nie mittendrin: Ein halber Buchstabe am unteren
 * Rand sieht aus wie ein Fehler. */
.recipe-card__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 0.15rem;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.4;
}

@media (min-width: 48rem) {
  .recipe-card__lead {
    font-size: 0.9rem;
  }
}

/* Am Handy nicht.
 *
 * Dort stehen drei Kacheln nebeneinander, jede eine Daumenbreite groß. Für Titel
 * und Text zusammen ist darin kein Platz: Der Titel wurde auf zwei Zeilen
 * gequetscht und die zweite mitten durch die Buchstaben abgeschnitten. Auf dem
 * Handy trägt die Kachel ihren Namen, und der steht dann auch ganz da. */
@media (max-width: 47.99rem) {
  .recipe-card__lead {
    display: none;
  }
}

/* Der Titel wird nie gestaucht. Der Text unter ihm nimmt sich den Rest — und ohne
   dies nähme er ihn dem Titel weg, Zeile für Zeile. */
.recipe-card__name {
  flex: none;
}

/* Titel und Hinweis bleiben zusammen in der Mitte der Kachel. Oben angeschlagen
   hingen sie an der Decke, mit einem leeren Drittel darunter — der Hinweis ist
   zwei Zeilen kurz und füllt nichts. */
@media (min-width: 48rem) {
  /* Ein Titel, der über einem Text steht, muss ihn nicht mehr allein tragen.
   *
   * Höchstens zwei Zeilen: Zusammen mit den zwei Zeilen Hinweis darunter steht
   * damit fest, wie hoch der Inhalt einer Kachel höchstens wird — und die
   * Blätterleiste hält mit ihrer Mindesthöhe genau diesen Platz frei. Ohne
   * Obergrenze schöbe ein langer Titel den Hinweis über den Rand, und die
   * Kachel schnitte ihn mitten durch die Buchstaben ab. */
  .recipe-card--ohne-bild .recipe-card__body:has(.recipe-card__lead) .recipe-card__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: 1.3rem;
    line-height: 1.25;
  }
}

/* Am Handy stehen drei Kacheln nebeneinander, jede eine Daumenbreite breit.
   1,55 rem sind darin drei Zeilen "Schichtplan und Zeiterfassung", und die
   dritte lag unter dem Rand. Der Name darf hier kleiner sein — er muss ganz
   dastehen, nicht groß. */
@media (max-width: 47.99rem) {
  .recipe-card--ohne-bild .recipe-card__name {
    font-size: clamp(0.9rem, 3.4vw, 1.2rem);
    line-height: 1.2;
  }
}

/* Farbstreifen zwischen Bild und Text: sagt beim Überfliegen des Rasters, wozu
   die Kachel gehört, ohne dass man den Text lesen muss. */
.recipe-card__body::before {
  content: "";
  display: block;
  width: 2.2rem;
  height: 3px;
  margin-bottom: 0.5rem;
  border-radius: 999px;
  background: var(--kategorie-farbe, var(--mila-accent));
}

.recipe-card__name {
  font-size: 1.32rem;
  font-weight: 700;
  line-height: 1.25;
}


.recipes-empty {
  padding: 4rem 1rem;
  color: var(--mila-text-soft);
  font-size: 1.15rem;
  text-align: center;
}

/* Detailansicht ----------------------------------------------------------- */

.recipe-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: clamp(0.75rem, 2.5vh, 2rem);
  /* Bewusst ohne backdrop-filter: Ein vollflächiger Blur kostet auf dem Tablet
     spürbar Leistung beim Öffnen. */
  background: rgba(42, 33, 25, 0.62);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: mila-fade-in 0.18s ease;
}

.recipe-detail {
  width: min(1120px, 100%);
  margin: auto;
  padding: 0 clamp(1.1rem, 3vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
  border-radius: 26px;
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
  animation: mila-rise 0.22s ease;
}

.recipe-detail:focus {
  outline: none;
}

/* Unsichtbar, solange niemand die Tastatur benutzt — beim Hineinspringen klappt
   der Knopf hervor, damit auch ohne Maus ein Weg hinaus sichtbar ist. */
/* Vor und zurück durch die Kategorie: am Bildschirmrand, groß genug für den
   Daumen, aber zurückhaltend genug, um die Anleitung nicht zu stören.
   Bewusst fixiert statt am Fenster ausgerichtet — dort schnitt der Rand des
   Fensters sie ab. Sie bleiben trotzdem Kinder der Karte, damit ein Tipp
   darauf nicht als Tipp auf den Hintergrund gilt und das Fenster schließt. */
.recipe-detail__blaettern {
  position: fixed;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 64px;
  transform: translateY(-50%);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(15, 20, 18, 0.08), 0 4px 14px rgba(15, 20, 18, 0.1);
  color: var(--mila-text-soft);
  font-size: 1.9rem;
  line-height: 1;
  text-decoration: none;
}

.recipe-detail__blaettern:hover {
  background: var(--mila-surface);
  color: var(--kategorie-farbe, var(--mila-accent));
}

.recipe-detail__blaettern--zurueck {
  left: clamp(0.4rem, 1.5vw, 1.1rem);
}

.recipe-detail__blaettern--vor {
  right: clamp(0.4rem, 1.5vw, 1.1rem);
}

.recipe-detail__blaettern[hidden] {
  display: none;
}

.recipe-detail__schliessen {
  position: absolute;
  top: 0.9rem;
  left: clamp(1.1rem, 3vw, 2.75rem);
  z-index: 3;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.recipe-detail__schliessen:focus-within {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

.recipe-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--mila-touch);
  padding: 0.7rem 1.45rem 0.7rem 1.15rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
}

.recipe-detail__back-arrow {
  font-size: 1.35rem;
  line-height: 1;
}

.recipe-detail__category {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mila-accent);
}

/* Wo man in einem Ablauf steht. Ruhiger gesetzt als die Kategorie darüber: Es ist
   eine Ortsangabe, keine Überschrift. */
.recipe-detail__kapitel {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mila-text-soft);
}

.recipe-detail h1 {
  margin: 0.35rem 0 1.1rem;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.recipe-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 1.6rem;
  padding: 0;
  list-style: none;
}

.recipe-detail__meta li {
  display: flex;
  flex-direction: column;
  padding: 0.6rem 1.1rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface-soft);
}

.meta__label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.meta__value {
  font-size: 1.05rem;
  font-weight: 600;
}

.recipe-detail__image {
  position: relative;
  margin: 0 0 1.75rem;
  cursor: zoom-in;
}

.recipe-detail__zoom {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(42, 33, 25, 0.62);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  pointer-events: none;
}

/* Bildschirmfüllende Ansicht des Produktfotos ------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  /* Muss über der Anleitungsansicht liegen (.recipe-modal, z-index 100). */
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(28, 22, 17, 0.92);
  cursor: zoom-out;
}

.lightbox__image {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--mila-radius-sm);
  object-fit: contain;
  cursor: default;
}

.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: var(--mila-touch);
  height: var(--mila-touch);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
}

body.is-lightbox-open {
  overflow: hidden;
}

.recipe-detail__image img {
  display: block;
  width: 100%;
  /* Quadratisch wie die Kachel: Ein Glas ist hoch, ein Teller rund — im
     Breitformat fehlt bei beidem das Wesentliche. Die Höhe bleibt gedeckelt,
     damit Zutaten und Schritte ohne langes Scrollen erreichbar bleiben. */
  aspect-ratio: 1 / 1;
  max-height: 42vh;
  border-radius: 20px;
  /* Ganz sichtbar statt formatfüllend.
   *
   * Ein quadratisches Foto füllt das quadratische Feld ohnehin aus — da macht
   * es keinen Unterschied. Ein Querformat aber, etwa ein Markenlogo, würde von
   * "cover" links und rechts beschnitten; vom Schriftzug bliebe die Mitte. So
   * steht es ganz da, mit Rand oben und unten. */
  object-fit: contain;
  background: var(--mila-surface-soft);
}

/* Ein Kasten, aber ein ruhiger.
 *
 * Gelb mit Ausrufezeichen alarmierte bei jedem Getränk — auch dort, wo nur
 * "Lagerung" drinstand. Ganz ohne Kasten war es das andere Extrem: Der Hinweis
 * hing als loser Satz unter der Karte und gehörte zu nichts mehr.
 *
 * Jetzt trägt ihn die Farbe der Kategorie, sehr verdünnt: Er hebt sich vom
 * Weiß ab und gehört sichtbar zu diesem Getränk, ohne zu rufen. */
.recipe-notes {
  margin-bottom: 1.9rem;
  padding: 0.9rem 1.2rem;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 22%, transparent);
  background: color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 7%, var(--mila-surface));
}

/* Die Art des Hinweises vor dem Text: "Vorbereitung" soll sich nicht wie eine
   Warnung lesen. Klein und ohne Sperrung — bei vier Hinweisen untereinander
   drängten sich die Beschriftungen sonst vor den Text. */
/* Feste Spalte für die Beschriftung: So beginnt der Text bei allen Hinweisen an
   derselben Stelle, statt je nach Wortlänge zu springen. */
.recipe-notes li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.recipe-notes__art {
  flex: none;
  width: 8.5em;
  padding-right: 0.5rem;
  overflow-wrap: anywhere;
  font-size: 0.72em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.6;
}

.recipe-notes__text {
  flex: 1;
  min-width: 0;
}

/* Zwischen Zubereiten und "danach" eine feine Linie — zwei Gruppen, ein Kasten. */
.recipe-notes__gruppe + .recipe-notes__gruppe {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 18%, transparent);
}

/* Wortgleich mit .recipe-extra h2 — eine Schreibweise für Glas, Deko, Hinweise.
   Die Linie darunter nimmt die Farbe des Kastens auf, sonst läge ein grauer
   Strich in einer getönten Fläche. */
.recipe-notes__title {
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 25%, transparent);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

/* Ohne Aufzählungspunkte: Die Beschriftung davor gliedert schon genug, und der
   Text beginnt bündig unter der Überschrift. */
.recipe-notes ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
  font-size: 1rem;
}

.recipe-notes li + li {
  margin-top: 0.3rem;
}

.recipe-detail__columns {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) 1.15fr;
  gap: 1rem 2.5rem;
  align-items: start;
}

/* Eine Anleitung ohne Material bekommt die ganze Breite für ihren Text — im Wiki
   ist das die Regel. */
.recipe-detail__columns--nur-text {
  grid-template-columns: minmax(0, 1fr);
}

/*
 * Am querliegenden Tablet bleibt die Detailansicht innerhalb des Bildschirms: Das
 * Panel wird nie höher als das Fenster, Kopf und Zurück-Button stehen fest, und
 * nur die beiden Spalten darunter scrollen bei Bedarf für sich.
 *
 * Ausdrücklich nur quer. Die Aufteilung darunter — drei gleiche Drittel aus Bild,
 * Zutaten und Schritten — rechnet mit viel Breite und wenig Höhe. Hochkant hing
 * sie allein an der Fensterbreite und griff auf dem hochkanten iPad ebenfalls:
 * Die Medienspalte nahm ein Drittel und stand unter dem Foto tausend Pixel leer,
 * während rechts alles gedrängt untereinander lief. Dort ist Höhe da und Breite
 * knapp — also gehört das Foto über den Text, nicht daneben.
 */
/* Was auf beiden Lagen gleich gilt: Alle Maße der Anleitung hängen an --dichte,
   das anleitung_controller.js setzt — so schrumpft der Block gleichmäßig, bis er
   ohne Scrollen passt.

   Diese Regeln standen einmal nur im Querformat. Hochkant konnte der Controller
   deshalb ausschließlich die Bilder verkleinern, nie die Schrift: Bei "Küche
   schließen" und beim Ofen war der letzte Schritt unten abgeschnitten, und keine
   Einstellung half, weil an der Schrift gar nichts zu stellen war. Sie gehören
   deshalb hierher, außerhalb der Lage — die Regel "nichts scrollt" gilt auf jedem
   Tablet, wie herum es auch hängt. */
@media (min-width: 700px) {
  /* Die Überschrift bleibt klein wie über dem Ablauf; die Zeilen darunter
     nehmen die Größe des Blocks — also dieselbe wie die Schritte. */
  .recipe-detail__material .recipe-section__title {
    font-size: calc(0.92rem * var(--dichte, 1));
  }

  .recipe-detail__material .ingredient-list__item {
    padding: 0.3em 0;
  }

  /* Der Körper trägt die Dichte als Schriftgröße. Alles darin ist in em gesetzt
     und geht damit mit — das war die Lücke: Die Zutatenzeile stand auf "1em",
     das em kam von der Karte, und die stand fest. Der Controller stellte also
     an der Schrift, und in der linken Spalte änderte sich kein Pixel. */
  .recipe-detail__body {
    font-size: calc(1rem * var(--dichte, 1));
  }

  /* Glas, Deko und Hinweise gehen mit — sonst bleibt unten stehen, was der
     Controller oben eingespart hat. */
  .recipe-detail__geschirr .recipe-extra h2,
  .recipe-detail__hinweise .recipe-notes__title {
    margin-bottom: calc(0.9rem * var(--dichte, 1));
    padding-bottom: calc(0.5rem * var(--dichte, 1));
    font-size: calc(0.92rem * var(--dichte, 1));
  }

  .recipe-detail__geschirr .tag {
    padding: 0.5em 1em;
    font-size: 1em;
  }

  .recipe-detail__hinweise .recipe-notes ul {
    font-size: 1em;
  }

  .recipe-detail__geschirr,
  .recipe-detail__hinweise .recipe-notes {
    margin-bottom: 0;
  }

  /* Der leere Rahmen schrumpft mit. Er stand fest auf 260 Pixeln und war damit
     das einzige, was der Controller nicht kleiner bekam — bei einer Anleitung
     ohne Foto war das ein Viertel der Karte, das sich nicht bewegte. */
  .recipe-detail__ohne-bild {
    max-height: min(30vh, calc(260px * var(--dichte, 1)));
  }

  /* Nichts scrollt: Die Anleitung steht auf einen Blick da. */
  .recipe-detail__inhalt {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-height: 0;
    overflow: hidden;
    font-size: calc(1.25rem * var(--dichte, 1));
  }

  /* Der letzte Ausweg, wenn selbst die engste Einstellung nicht reicht: Im Wiki
     stehen Texte, die auf keinen Bildschirm passen — dann ist Scrollen richtiger
     als Abschneiden. Auf den Stages greift das praktisch nie. */
  .recipe-detail__inhalt--scrollt {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .recipe-detail__body .ingredient-list__item,
  .recipe-detail__body .instruction-list__item {
    padding: 0.4em 0;
    font-size: 1em;
  }

  .recipe-detail__body .instruction-list__number {
    width: 1.9em;
    height: 1.9em;
    font-size: 0.88em;
  }

  .recipe-detail__body .ingredient-list__amount {
    padding-left: 0.6em;
  }

  .recipe-detail__body .recipe-section__title,
  .recipe-detail__body .recipe-extra h2 {
    font-size: 0.86em;
  }
}

@media (min-width: 700px) and (orientation: landscape) {
  .recipe-modal {
    align-items: center;
  }

  .recipe-detail {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    margin: 0;
    overflow: hidden;
  }

  .recipe-detail__header {
    flex: none;
    /* Abstand zur Trennlinie der Werkzeugleiste darüber. */
    padding-top: 0.85rem;
  }

  /* Links das Produkt, rechts die Arbeit. Die Medienspalte bekommt ihre Breite
     von der Höhe: Zwei Quadrate übereinander füllen die Fläche genau aus. */
  .recipe-detail__body {
    display: grid;
    grid-template-columns: var(--medien-breite, 0) minmax(0, 1fr);
    /* Jede Zeile so hoch wie ihr Inhalt — dieselbe Rechnung wie hochkant. Eine
       1fr-Zeile gab dem Ablauf die verfügbare Höhe statt seiner eigenen, und der
       Überhang legte sich über die Zeile darunter: Deko und Hinweise standen
       übereinander gedruckt. */
    grid-template-rows: auto auto;
    grid-template-areas:
      "links    inhalt"
      "hinweise hinweise";
    align-content: start;
    /* Auch nach unten Luft. Der Zeilenabstand stand auf null — im schmalen
       Hochformat sitzt das Bildfeld über den Zutaten, und "ZUTATEN" klebte
       damit an der Kante des Fotos. In der breiten Ansicht trennt derselbe
       Abstand das Bild vom Material darunter, das dort ebenfalls flach anlag. */
    gap: 1.1rem var(--spalt);
    flex: 1;
    min-height: 0;
  }

  /* Foto, Zutaten, Glas und Deko untereinander in einer Spalte.
   *
   * Als vier Rasterzeilen nebeneinander gab das Raster ihnen die Höhen, die der
   * Ablauf daneben vorgab, statt ihrer eigenen: Die Zutaten bekamen 142 Pixel
   * für 231 Pixel Inhalt, und "Sekt, zum Auffüllen" stand quer über der
   * Überschrift "Glas". In einer Spalte rechnet jeder Block wieder mit sich
   * selbst. */
  .recipe-detail__links {
    grid-area: links;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  .recipe-detail__inhalt { grid-area: inhalt; }
  .recipe-detail__hinweise { grid-area: hinweise; }

  /* Ohne Foto steht das Material dort, wo sonst die Medienspalte steht — im Wiki
     ist das der Regelfall. */
  .recipe-detail__body--ohne-medien {
    grid-template-areas:
      "links    inhalt"
      "hinweise hinweise";
    grid-template-rows: auto auto;
  }

  /* Drei gleiche Drittel: Bild, Zutaten, Schritte. Weil überall derselbe
     Spaltenabstand gilt, geht die Rechnung exakt auf — die beiden Spalten im
     rechten Block werden genauso breit wie die Medienspalte links.

     Die Breite muss dabei fest stehen: Aus dem Seitenverhältnis allein zieht das
     Raster sie nicht, es nähme die Originalbreite des Fotos und drückte Zutaten
     und Schritte auf null. */
  .recipe-detail__body {
    /* Der Spalt war knapp bemessen: Solange in der linken Spalte ein Foto steht,
       klebte die Zubereitung an dessen Kante. Ein Bild hat einen Rand, eine Liste
       nicht — dazwischen braucht es mehr Luft als zwischen zwei Textspalten. */
    --spalt: clamp(1.75rem, 3vw, 2.75rem);
    --medien-breite: calc((100% - 2 * var(--spalt)) / 3);
  }

  /* Reicht der Platz nicht, zieht anleitung_controller.js den Rahmen zuerst auf
     die volle Höhe — das kostet niemanden etwas. */
  .recipe-detail--volle-hoehe {
    height: 100%;
  }

  .recipe-detail__body--ohne-medien:not(:has(.recipe-detail__material)) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "inhalt"
      "hinweise";
  }

  .recipe-detail__media {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
  }

  /* Das Foto füllt die Spalte quadratisch aus; darunter bleibt Platz für den
     Video-Knopf und das Material, falls es welches gibt. Es schrumpft nicht mit:
     Quadratisch ist es mit Absicht, und was darunter zu viel wird, setzt
     anleitung_controller.js enger. */
  .recipe-detail__image {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* Ohne min-height: 0 könnte das Feld nicht unter die Höhe des Originalfotos
       schrumpfen — ein hochkantes Bild machte die Kachel dann rechteckig. */
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 18px;
  }

  /* Eine Skizze ist Dekoration, kein Detail zum Betrachten — sie muss die
     Medienspalte nicht ausfüllen. Kleiner gesetzt bleibt mehr Höhe für das, was
     wirklich gebraucht wird: den Ablauf daneben. */
  .recipe-detail__image--zeichnung {
    flex: none;
    width: 55%;
    max-width: 10rem;
    margin: 0 auto;
  }

  /* Steht neben der Skizze kein Material, gibt es nichts mehr zu dritteln: Die
     Drittelbreite stammt aus "Bild, Zutaten, Schritte" und hinterließ hier einen
     leeren Streifen über die ganze Höhe. Die Spalte misst dann die Skizze selbst,
     und der Ablauf bekommt den Rest — beim Ofen sind das statt knapp zwei Dritteln
     über achtzig Prozent der Kachel. */
  .recipe-detail__body:has(.recipe-detail__image--zeichnung):not(:has(.recipe-detail__material)) {
    --medien-breite: min(9rem, 18%);
  }

  .recipe-detail__body:not(:has(.recipe-detail__material)) .recipe-detail__image--zeichnung {
    width: 100%;
    max-width: none;
  }

  /* Steht nur ein Video und kein Foto da, nimmt es dessen Platz ein. */
  .recipe-detail__media > .video:only-child .video__knopf {
    height: 100%;
    aspect-ratio: 1 / 1;
    flex-direction: column;
    font-size: 1.1rem;
  }

  .recipe-detail__image img {
    width: 100%;
    height: 100%;
    max-height: none;
    aspect-ratio: auto;
    /* Siehe oben: ganz sichtbar statt formatfüllend. */
    object-fit: contain;
    border-radius: 18px;
  }

  /* Das Material unter dem Foto: kleiner gesetzt als die Schritte, weil es
     nachgeschlagen und nicht abgearbeitet wird. Es nimmt die Höhe, die es
     braucht, und lässt dem Rest der Spalte seinen Platz. */
  /* Der leere Rahmen bleibt quadratisch wie ein Foto: Sonst spränge das Fenster
     beim Blättern von Anleitung zu Anleitung in andere Maße. */
  .recipe-detail__ohne-bild {
    flex: none;
  }

  /* Kein "overflow: hidden" mehr — ein Rest aus der Zeit, als der Körper eine
     Spalte war. Im Raster schnitt es die Zutaten stillschweigend ab: Bei Aperol
     Spritz fehlten unten 89 Pixel, also "Sekt, zum Auffüllen", und der
     Controller merkte nichts davon, weil außen alles passte. Was zu hoch ist,
     soll die Karte zu hoch machen — dann stellt er die Schrift enger. */
  .recipe-detail__material {
    min-height: 0;
  }

  .recipe-detail__columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 var(--spalt);
    /* Ohne eigenes overflow: Was hier zu lang ist, muss oben in
       .recipe-detail__inhalt ankommen — sonst kappt die Spalte still, und
       anleitung_controller.js sieht keinen Grund, enger zu setzen. */
    align-items: start;
  }

  /* Muss nach der Regel darüber stehen, nicht davor: Beide haben dieselbe
     Spezifität, also gewinnt die spätere. Andersherum bekam eine Anleitung ohne
     Material zwei Spalten und füllte nur die linke — im Wiki also jede Seite,
     und daneben blieb die halbe Breite weiß. */
  .recipe-detail__columns--nur-text {
    grid-template-columns: minmax(0, 1fr);
  }

  .recipe-detail__inhalt .recipe-section {
    margin-bottom: 0;
    min-height: 0;
  }

  /* Hinweise, Glas und Anrichten teilen sich eine Zeile — untereinander wäre der
     Bildschirm sonst voll, bevor die Schritte zu Ende sind. */
  .recipe-detail__inhalt .recipe-section--extras {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
  }
}

/* Gestaltung des Detailfensters ------------------------------------------
 *
 * Das Fenster war korrekt, aber blass. Es bekommt jetzt Halt durch drei Dinge:
 * die Farbe der Kategorie als durchgehender Faden, abgesetzte Flächen für
 * Zutaten und Schritte, und einen Kopf mit mehr Gewicht.
 */

/* Farbkante oben: verbindet das Fenster mit der Kachel, von der man kam. */
.recipe-detail::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--kategorie-farbe, var(--mila-accent));
}

.recipe-detail {
  position: relative;
}

/* Die Kategorie als farbige Pille statt als grauer Kleinbuchstabenlauf. */
.recipe-detail__category {
  display: inline-block;
  margin-top: 0.35rem;
  margin-bottom: 0.6rem;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: var(--kategorie-farbe, var(--mila-accent));
  color: #fff;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
}

/* Zutaten auf getönter Fläche, Schritte auf weißer — so trennt das Auge die
   beiden Spalten, ohne dass eine Linie dazwischen muss. */
/* Jede Spalte trägt jetzt mehr als einen Block: Zutaten plus Geschirr, Schritte
   plus Hinweise. */
.recipe-detail__spalte {
  display: flex;
  flex-direction: column;
  gap: 0.9em;
  min-width: 0;
}

.recipe-detail__spalte:first-child .recipe-section:first-child {
  padding: 0.8em 1em;
  border-radius: 18px;
  background: var(--mila-surface-soft);
}

/* Zutaten und Ablauf sind ein Paar: dieselbe Fläche, dieselbe Schriftgröße,
   dieselbe Linie oben. Vorher lag der Ablauf auf einer getönten Fläche und die
   Zutaten daneben auf Weiß — zwei Überschriften, zwei Höhen, zwei Größen. */
.recipe-detail__material {
  font-size: calc(1.25rem * var(--dichte, 1));
}

.recipe-detail__material > .recipe-section {
  /* Kein Abstand nach unten: Den setzt der Block, in dem Zutaten und Glas
     zusammenstehen. Die 2,1 rem von .recipe-section schoben das Glas 34 Pixel
     tiefer, als der Abstand des Blocks vorgibt. */
  margin-bottom: 0;
  padding: 0.8em 1em;
  border-radius: 18px;
  background: var(--mila-surface-soft);
}

/* Schrittnummern in der Farbe der Kategorie. */
.recipe-detail .instruction-list__number {
  background: var(--kategorie-farbe, var(--mila-accent));
  color: #fff;
}

/* Abschnittsüberschrift zwischen den Schritten: "Vor dem Ofen" / "Nach dem Ofen"
   entscheidet über den ganzen Ablauf und muss ins Auge fallen, ohne dass man die
   Schritte darunter liest. */
/* "Vor dem Ofen" und "Nach dem Ofen" entscheiden über alles darunter.
 *
 * Als feine Zeile mit Strich gingen sie zwischen den Schrittkacheln unter — man
 * las die Schritte und merkte erst hinterher, dass die Hälfte davon nach dem
 * Ofen kommt. Jetzt ist es ein Schild in der Farbe der Kategorie: Auf einen
 * Blick sieht man, wo man ist, auch aus einem Meter Entfernung. */
.instruction-list__abschnitt {
  display: flex;
  align-items: center;
  gap: 0.5em;
  /* Der Abstand nach unten stand auf 0.55em und wurde von --dichte mit
     eingedampft: Bei den Loaded Brioche blieben sechs Pixel, und das Schild
     "Vor dem Ofen" klebte auf der Kachel darunter, als wäre es ihre
     Überschrift. Ein Schild braucht Luft, sonst gehört es zum Kasten. */
  margin: 1.05em 0 0.85rem;
  padding: 0.38em 0.8em;
  border-radius: 999px;
  background: var(--kategorie-farbe, var(--mila-accent));
  color: #fff;
  font-size: 0.95em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Nur so breit wie das Wort: Ein Schild, kein Balken über die ganze Spalte. */
  align-self: flex-start;
  width: fit-content;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

/* Der Ofen selbst als Zeichen davor — man erkennt die Stelle, bevor man liest. */
.instruction-list__abschnitt::before {
  content: "";
  width: 0.95em;
  height: 0.95em;
  flex: none;
  background: currentColor;
  /* Ein Ofen mit Tür und Griff, aus einem Pfad. */
  mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm1 2v3h14V4H5zm1.5 1.75h3v1.5h-3v-1.5zM5 9v11h14V9H5zm2 2h10v7H7v-7z'/%3E%3C/svg%3E");
}

.instruction-list__abschnitt:first-child {
  margin-top: 0;
}

/* Jeder Schritt auf eigener Fläche: Unter Zeitdruck findet man so die Zeile
   wieder, bei der man war. */
.recipe-detail .instruction-list__item {
  align-items: flex-start;
  margin-bottom: 0.4em;
  padding: 0.6em 0.8em;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface);
}

.recipe-detail .instruction-list__item:last-child {
  margin-bottom: 0;
}

/* Die Mengen in der Kategoriefarbe statt im Hausrot — dieselbe Handschrift wie
   die Schrittnummern daneben. */
.recipe-detail .ingredient-list__amount {
  color: var(--kategorie-farbe, var(--mila-accent));
}

/* Der Hinweis der Stage gilt immer und für viele Anleitungen — er steht deshalb
   noch eine Spur zurückgenommener als die Hinweise dieser einen Anleitung. */
.recipe-notes--buehne {
  color: var(--mila-text-soft);
}

/* Flaschen oben rechts ---------------------------------------------------- */

.recipe-detail__header {
  position: relative;
}

/* Etwas eingerückt statt bündig am Rand — sonst klebt der Streifen an der Kante
   der Karte. */
.recipe-detail__flaschen {
  position: absolute;
  top: 0.6rem;
  right: 0.4rem;
  display: flex;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recipe-detail__flasche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 104px;
}

.recipe-detail__flasche img {
  width: 104px;
  height: 104px;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface);
  object-fit: contain;
}

.recipe-detail__flasche-name {
  max-width: 100%;
  color: var(--mila-text-soft);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Der Titel darf nicht unter die Flaschen laufen. */
.recipe-detail__header h1,
.recipe-detail__category,
.recipe-detail__meta {
  max-width: calc(100% - 4.5rem);
}

/* Video hinter einem Knopf ------------------------------------------------ */

.video {
  flex: none;
}

.video__knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  min-height: var(--mila-touch);
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}

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

.video__symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--kategorie-farbe, var(--mila-accent));
  color: #fff;
}

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

/* Das Fenster nimmt die Form des Videos an — die Aufnahmen aus der Küche sind
   hochkant, in einem Breitbildrahmen stünden sie zwischen schwarzen Balken. */
.video__fenster {
  /* fit-content statt auto: Ein <dialog> zöge sich sonst auf die volle erlaubte
     Breite und ließe neben dem hochkanten Video schwarze Balken stehen. */
  width: fit-content;
  max-width: 92vw;
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: #0f0c0a;
  box-shadow: var(--mila-shadow-lifted);
  overflow: visible;
}

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

.video__fenster .video-player {
  display: block;
  width: auto;
  height: auto;
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 22px;
}

.video__zu {
  position: absolute;
  top: -14px;
  right: -14px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--mila-shadow);
}

/* Schmale Geräte: alles untereinander, das Panel scrollt als Ganzes. */
@media (max-width: 699px) {
  .recipe-detail__body {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}

.recipe-section {
  margin-bottom: 2.1rem;
}

.recipe-section__title,
.recipe-extra h2 {
  margin: 0 0 0.9rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--mila-line);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.recipe-section__empty {
  color: var(--mila-text-soft);
}

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

/* Die Überschrift einer Zutatengruppe: dasselbe Schild wie über einem Abschnitt
   des Ablaufs.
 *
 * Klein und farbig gesetzt las sie sich wie die nächste Zutat — "Base Mango"
 * stand da wie "Mangopüree", nur kleiner. Ein Schild sagt aus einem Meter, dass
 * hier eine Sorte anfängt, und es ist dieselbe Form, die im Ablauf "Vor dem
 * Ofen" trägt: eine Auszeichnung im Haus, nicht zwei. */
.ingredient-list__gruppe {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  /* Knapp bemessen: Drei Schilder in einer Spalte kosten Höhe, und die Karte
     soll ohne Scrollen auskommen. Das Schild trägt sich über seine Farbe, nicht
     über den Abstand. */
  margin: 0.7em 0 0.3em;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: var(--kategorie-farbe, var(--mila-accent));
  color: #fff;
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
}

.ingredient-list__gruppe:first-child {
  margin-top: 0;
}

/* Die Zeilen einer Base rücken unter ihr Schild ein: Sie gehören dazu, und die
   Einrückung sagt das, ohne ein zweites Zeichen zu brauchen. */
.ingredient-list__gruppe + .ingredient-list {
  padding-left: 0.6em;
  border-left: 2px solid color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 30%, transparent);
}

.ingredient-list__item {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding: 0.75rem 0;
  border-bottom: 1px dashed var(--mila-line);
  font-size: 1.2rem;
}

/* Die Menge steht hinter dem Produkt und wird nach rechts geschoben — so stehen
   alle Mengen untereinander, auch wenn eine Zutat gar keine hat. */
.ingredient-list__name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Gläser und Wörter nebeneinander statt untereinander.
 *
 * Der Block stand als zwei Reihen übereinander: erst die Fotos, darunter die
 * Chips. In der Höhe wurde es dadurch eng — und die Anleitung stellt sich enger,
 * sobald sie nicht mehr auf den Bildschirm passt, also schrumpfte am Ende alles.
 * In der Breite lag daneben Platz frei.
 *
 * Jetzt teilen sie sich eine Zeile: die Fotos links, die Wörter rechts daneben,
 * und erst wenn beides nicht mehr passt, bricht es um. */
/* Geschirr und Deko stehen nebeneinander, solange Platz ist. Sie beantworten
   zwei Fragen — womit fange ich an, was kommt am Ende ins Glas — und die
   trennt eine Überschrift besser als eine zweite Chipfarbe in derselben Reihe.

   Deko ist die schmalere von beiden: Sie trägt drei Wörter, das Geschirr die
   Fotos. */
.recipe-detail__geschirr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.9rem 1.6rem;
}

/* Beide bleiben nebeneinander, auch auf der schmalen Spalte des Tablets. Das
   kostet einem langen Wort wie „Getrocknete Orange“ einen Zeilenumbruch im
   Chip — und spart dafür eine ganze Überschrift samt Trennlinie in der Höhe.
   Auf dem Tablet wird nicht gescrollt, und Höhe ist dort das Knappe.

   min-width: 0 ist der Hebel: Ohne ihn schrumpft eine Flexspalte nie unter die
   Breite ihres längsten Wortes, und die beiden rutschten untereinander. */
.recipe-detail__geschirr > .recipe-extra {
  flex: 1 1 9rem;
  min-width: 0;
}

.recipe-detail__geschirr > .recipe-extra--deko {
  flex: 0 1 11rem;
  min-width: 0;
}

/* Das kalte Gedeck steht als eigenes Band unter dem heißen.
   
   Daneben sah es aus wie eine zweite Geschirrliste: gleiche Überschrift,
   gleiche Linie, gleiche Kacheln — man musste die Überschriften lesen, um sie
   auseinanderzuhalten. Der kühle Balken an der Seite beantwortet das vorher.
   
   Eine eigene Zeile, weil dort dieselben Fotos stehen wie oben: In einer
   halben Spalte stünden vier Gläser untereinander. */
.recipe-detail__geschirr > .recipe-extra--eis {
  flex: 1 1 100%;
  min-width: 0;
  padding-left: 0.85rem;
  border-left: 4px solid var(--mila-kuehl);
}

.recipe-detail__geschirr > .recipe-extra--eis > h2 {
  color: var(--mila-kuehl);
  display: flex;
  align-items: center;
  gap: 0.35em;
}

/* Mit der Schrift und nicht in Pixeln: Der Dichteregler stellt bei langen
   Anleitungen alles enger, und ein Zeichen, das dabei stehen bleibt, wächst
   optisch mit jedem Schritt. */
.recipe-extra__frost {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

.recipe-detail__geschirr .recipe-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.6rem 1.1rem;
}

.recipe-detail__geschirr .recipe-extra > h2 {
  flex-basis: 100%;
}

.recipe-detail__geschirr .gedeckbilder {
  flex: 0 1 auto;
  margin-bottom: 0;
}

/* Die Chips nehmen, was übrig bleibt, und stehen auf Höhe der Fotos — nicht
   darunter, wo sie eine eigene Zeile aufmachten. */
.recipe-detail__geschirr .tag-list {
  flex: 1 1 8rem;
  align-content: flex-start;
}

/* Was sonst noch dazugehört: "aus der Nitromaschine", "zum Auffüllen".
 *
 * Rechts bei der Menge, nicht hinter dem Namen: Es entscheidet mit, wie die
 * Zutat in die Hand kommt, und steht damit dort, wo das Auge beim Überfliegen
 * ohnehin hinwandert. Grau hinter dem Namen ging es unter.
 *
 * In der Farbe der Kategorie wie die Menge — es ist dieselbe Art Angabe, nur in
 * Worten statt in Zahlen. Die Menge trägt das Gewicht, die Zusatzinfo eine Spur
 * kleiner. */
.ingredient-list__zusatz {
  flex: none;
  margin-left: auto;
  color: var(--kategorie-farbe, var(--mila-accent));
  font-size: 0.86em;
  font-weight: 600;
  text-align: right;
}

/* Steht beides da, schiebt die Zusatzinfo die Menge nicht weg: Das margin-left
   gilt dem ersten der beiden, der Rest folgt. */
.ingredient-list__zusatz + .ingredient-list__amount {
  margin-left: 0;
}

.ingredient-list__amount {
  flex: none;
  margin-left: auto;
  margin-left: auto;
  padding-left: 0.75rem;
  font-weight: 700;
  color: var(--mila-accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.instruction-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.instruction-list__item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.8rem 0;
  font-size: 1.2rem;
  line-height: 1.5;
}

.instruction-list__number {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
  font-size: 1.05rem;
  font-weight: 800;
}

/*
 * Kein festes Seitenverhältnis: Die Küchenvideos werden hochkant aufgenommen, und
 * ein 16:9-Rahmen würde sie zwischen schwarze Balken quetschen. So bestimmt das
 * Video selbst seine Form und wird nur in der Höhe begrenzt.
 */
.video-player {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  /* Ohne feste Angabe wenden Browser max-width und max-height unabhängig an und
     verzerren das Bild — deshalb das Hochformat hier ausdrücklich festlegen. */
  aspect-ratio: 9 / 16;
  object-fit: contain;
  margin-inline: auto;
  border-radius: 20px;
  background: #000;
}

.video-placeholder {
  display: grid;
  gap: 0.5rem;
  justify-items: center;
  margin: 0;
  padding: 2.25rem 1.5rem;
  border: 1px dashed var(--mila-line);
  border-radius: 20px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  text-align: center;
  font-size: 1.05rem;
}

.video-placeholder__icon {
  font-size: 1.9rem;
  color: var(--mila-accent);
  opacity: 0.55;
}

.video-placeholder__hint {
  font-size: 0.95rem;
}

.video-placeholder code {
  padding: 0.15em 0.45em;
  border: 1px solid var(--mila-line);
  border-radius: 6px;
  background: var(--mila-surface);
  font-size: 0.9em;
}

.recipe-section--extras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem 2.5rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  font-size: 1rem;
  font-weight: 600;
}

/* Die Deko liegt im selben Block wie Glas und Löffel, trägt aber die Farbe der
   Kategorie: Sie ist kein Gerät, sondern das, was am Ende ins Glas kommt. */
.tag--deko {
  background: color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 14%, var(--mila-surface));
  color: color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 70%, var(--mila-text));
}

/* „Auf Eis“ trägt als einziger Block einen kühlen Ton. Das ist keine Zierde:
   Auf der Kaffeekachel stehen zwei Gedecke nebeneinander, das heiße und das
   kalte, und beim Überfliegen sucht man genau diesen Unterschied. Eine
   Überschrift allein beantwortet ihn erst beim Lesen. */
.tag--eis {
  background: color-mix(in srgb, var(--mila-kuehl) 13%, var(--mila-surface));
  color: color-mix(in srgb, var(--mila-kuehl) 76%, var(--mila-text));
}

.recipe-extra__text {
  margin: 0;
  font-size: 1.1rem;
}

/* Bewegung und Bildschirmgrößen ------------------------------------------ */

@keyframes mila-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mila-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-modal,
  .recipe-detail,
  .recipe-card,
  .wiki-regal__griff::after {
    animation: none;
    transition: none;
  }
}

/* Tablet quer und Desktop: etwas größere Grundschrift. */
@media (min-width: 900px) {
  body.kitchen {
    font-size: 19px;
  }
}

/*
 * Tafelansicht auf praktisch jedem Gerät: Die Übersicht füllt genau eine
 * Bildschirmhöhe, damit nichts gescrollt werden muss. Spaltenzahl und Seiten
 * berechnet pager_controller.js aus der tatsächlich freien Fläche.
 *
 * Die Grenze lag einmal bei 700px, das Handy blieb also beim Scrollen. Bei über
 * 200 Anleitungen in einer einzigen Spalte war das ein langer Weg — jetzt gilt
 * die Tafel auch dort, mit kleineren Kacheln (siehe MASSE im pager_controller).
 * Der Wert ist mit BOARD_FROM_WIDTH abgestimmt: Ändert sich einer, muss der
 * andere mit.
 */
@media (min-width: 360px) {
  body.kitchen {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }

  /* Die Academy und die Listen zum Auf- und Zusperren sind die Ausnahmen: Sie
     sind Strecken, die man von oben nach unten durchgeht, kein Kachelraster,
     das auf eine Bildschirmhöhe passen muss. Ohne diese Rückstellung ließ sich
     die Academy am Rechner gar nicht scrollen — und die Zusperrliste am iPad
     nicht: Bei 37 Schritten kam niemand an die unteren Handgriffe heran. */
  body.kitchen--onboarding,
  body.kitchen--ablauf {
    display: block;
    height: auto;
    overflow: visible;
  }

  .kitchen-header {
    position: static;
    flex: none;
  }

  /* Die Fußzeile darf dem Kachelraster kaum Platz nehmen — der Pager rechnet die
     verbleibende Höhe ohnehin selbst aus. */
  body.kitchen .fusszeile {
    flex: none;
    padding-block: 0.35rem;
  }

  .kitchen-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    min-height: 0;
    /* Luft über und unter dem Raster — und zwar sichtbar viel.
     *
     * Vorher standen hier 1,1rem: knapp 18 Pixel bei einer Kachel von 234. Die
     * Reihe klebte damit an der Filterleiste und die untere am Rand, und das
     * las sich als angeschnitten: Wer eine Kachel sieht, die den Rand berührt,
     * wischt — weil dort noch etwas sein muss. Es war nie etwas dort; die Seite
     * hat nie gescrollt. Nur ausgesehen hat sie so.
     *
     * Der Rand kostet Kachelhöhe, und das ist er wert: Lieber eine Kachel
     * kleiner als eine Schicht, die jedes Mal ins Leere wischt. */
    padding-block: 2.4rem 2rem;
  }

  .kitchen-main > turbo-frame {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }

  /* Umbrechen statt seitlich wegrollen.
   *
   * Vorher lief die Reihe waagerecht aus dem Bild, sobald es zu viele Themen gab.
   * Was rechts hinausragt, sieht niemand — man muss erst wischen, um zu ahnen,
   * dass dort noch etwas ist. Eine zweite Zeile kostet Rasterhöhe, zeigt dafür
   * alles auf einmal; der Pager rechnet die Kachelhöhe ohnehin aus der Restfläche.
   *
   * Dazu sind die Knöpfe etwas kleiner als früher — bei neun Themen passen sie
   * so auf breiten Bildschirmen wieder in eine Zeile. */
  .category-filter {
    flex: none;
    flex-wrap: wrap;
    /* Derselbe Grund wie beim Rahmen darüber: Mit 1,1rem stand die erste
       Kachelreihe 18 Pixel unter den Themenknöpfen und wirkte an sie
       angeschnitten. Jetzt liegt sichtbar Luft dazwischen. */
    margin-bottom: 2rem;
    padding-bottom: 2px;
  }

  .recipe-grid {
    flex: 1;
    min-height: 0;
    /* minmax(0, …) statt blankem Wert: Sonst darf eine Kachel mit zweizeiligem
       Namen ihre Zeile aufblähen und die Ansicht passt doch nicht mehr auf den
       Schirm. Der Pager setzt beide Maße auf 1fr, solange die Kachel unter einem
       Viertel der Fläche bleibt — dann füllt das Raster restlos aus. Erst wenn
       wenige Kacheln zu groß würden, stehen dort feste Werte, und das Raster
       rückt zusammen statt sie aufzublasen. */
    grid-template-columns: repeat(var(--tile-columns, 4), minmax(0, var(--tile-col-size, 1fr)));
    grid-auto-rows: minmax(0, var(--tile-row-size, 1fr));
    align-content: start;
    justify-content: center;
    gap: 1.25rem;
  }

  .recipe-card {
    min-height: 0;
  }

  /* Die Kachel bekommt ihre Höhe vom Raster, nicht vom Seitenverhältnis des
     Bildes — sonst blieben im Raster Lücken.
   *
   * Quadratisch wird das Foto deshalb beim Zuschnitt und nicht hier: libvips
   * sucht die Stelle, an der etwas los ist (KACHELSCHNITT), und was übrig
   * bleibt, sitzt mittig im Streifen. */
  .recipe-card__image {
    flex: 1;
    aspect-ratio: auto;
    min-height: 0;
  }

  /* Schrift und Abstände richten sich nach der berechneten Kachelhöhe, damit auch
     kleine Kacheln lesbar bleiben. --tile-height setzt pager_controller.js. */
  .recipe-card__body {
    padding: clamp(0.4rem, calc(var(--tile-height, 300px) * 0.055), 1.15rem)
             clamp(0.65rem, calc(var(--tile-height, 300px) * 0.06), 1.3rem);
    gap: 0.15rem;
  }

  .recipe-card__name {
    /* Untergrenze bewusst hoch: Der Gerichtname muss auch auf der kleinsten Kachel
       aus Armlänge lesbar bleiben. Kurz genug wird er über Recipe#short_name. */
    font-size: clamp(1.05rem, calc(var(--tile-height, 300px) * 0.085), 1.32rem);
    /* Höchstens zwei Zeilen, und der Platz dafür ist immer reserviert — so liegen
       die Bildkanten aller Kacheln einer Reihe auf einer Linie. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 2.5em;
    overflow: hidden;
  }

  .recipes-empty {
    padding: 2.5rem 1rem;
  }

  /* Sehr kleine Kacheln: Der Name behält seine Größe. Die Kategorie bleibt
     sichtbar — sie trägt den Teil des Namens, der dort weggekürzt wurde. */
  .recipe-grid.is-compact .recipe-card__category {
    font-size: 0.68rem;
    letter-spacing: 0.07em;
  }

  /* Ohne Foto bleibt auch im gedrängten Raster Platz für die Kategorie — sie ist
     dort die einzige Orientierung neben dem Namen. */
  .recipe-grid.is-compact .recipe-card--ohne-bild .recipe-card__category {
    font-size: 0.86rem;
  }

  .recipe-grid.is-compact .recipe-card--ohne-bild .recipe-card__name {
    -webkit-line-clamp: 3;
    min-height: 0;
  }

  /* Zwei Zeilen fest reserviert — durch die gekürzten Namen reicht das, und die
     Bildkanten aller Kacheln liegen auf einer Linie. */
  .recipe-grid.is-compact .recipe-card__name {
    -webkit-line-clamp: 2;
    min-height: 2.45em;
  }
}

/* Hochkant hängendes Tablet: Die Kategorien passen nicht nebeneinander, und
   seitwärts schieben heißt, dass man die hinteren gar nicht erst sieht — man
   sucht dann eine Kategorie, von der man nicht weiß, ob es sie gibt. Quer ist
   Breite knapp und Höhe kostbar, hochkant genau andersherum: Dort ist Platz für
   eine zweite Zeile. Der Pager rechnet die Höhe des Rasters ohnehin aus der
   Restfläche, das Umbrechen geht ihm also nicht verloren. */
@media (min-width: 700px) and (orientation: portrait) {
  .category-filter {
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Nur auf dem Handy bekommt der Wegweiser eine eigene Zeile — dort ist neben der
   Wortmarke schlicht kein Platz.

   Auf dem Tablet stand er hier zeitweise auch unten. Das kostete eine Zeile, die
   dem Kachelraster fehlte, und war nur nötig, solange die Listen beim Engwerden
   nachgaben und ihre eigenen Einträge abschnitten. Seit sie das nicht mehr tun
   (siehe .wegweiser__liste), schiebt die Zeile statt zu schneiden — daneben ist
   damit wieder die bessere Stelle. */
@media (max-width: 640px) {
  .kitchen-header__bar {
    gap: 0.45rem 0.75rem;
  }

  /* Die feste Mindestbreite richtet das Logo an der Regie aus — dafür ist hier
     kein Platz. */
  .kitchen-logo {
    min-width: 0;
  }

  /* Umbrechen statt schieben. Die Zeile braucht am Handy rund 550 Pixel und hat
     343 — geschoben stand "Projekte" außerhalb des Bildschirms, und nichts zeigte
     das an. Wer den Eintrag nicht sieht, hält ihn für nicht vorhanden: Academy
     und Projekte blendeten sich gegenseitig aus.

     Das kostet eine zweite Zeile im Kopf. Zu wissen, wohin man kann, ist mehr
     wert als die Zeile. */
  .wegweiser {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    overflow-x: visible;
  }

  .wegweiser__liste {
    flex-wrap: wrap;
  }
}


/* Kategorieauswahl -------------------------------------------------------- */

/* Der Einstieg bei vielen Anleitungen: wenige, große Flächen in der Farbe der
   Kategorie. Aus einem Meter Entfernung soll die Wahl ohne Nachdenken gelingen. */
/* Die Kacheln waren einmal quadratisch. Das kostete Platz: Bestimmt die kürzere
   Zellseite das Quadrat, bleibt der Rest als Weiß daneben stehen — bei acht
   Kategorien auf dem hochkanten Tablet 159 Pixel je Zelle. Jetzt füllen sie ihre
   Zelle wie jede andere Kachel auch, und die Fläche gehört wieder dem Inhalt. */
.kategorie-kachel {
  background: var(--kategorie-farbe);
  color: #fff;
}

/* Zwei, drei Namen aus der Kategorie. Bewusst leiser als die Überschrift: Sie
   sind ein Versprechen, keine Liste zum Abarbeiten.

   Das Aussehen der freundlichen Kachel selbst steht in kitchen-feinschliff.css —
   dort wird über body.kitchen .recipe-card entschieden, wie eine Karte aussieht,
   und eine Regel hier verlöre dagegen. */
/* Was in der Kategorie liegt — untereinander, über die ganze Breite der Kachel.
 *
 * Vorher standen drei Namen in einer Zeile, mit Mittelpunkten aneinandergereiht,
 * oben in der Ecke: Der Rest der Kachel blieb leer, und der Text las sich wie
 * ein Fließtext, den man buchstabieren muss. Jetzt füllt die Liste den Platz,
 * den es ohnehin gibt, und jeder Name steht für sich.
 *
 * Der Überlauf wird abgeschnitten statt gescrollt: Die Kachel ist ein Blick,
 * kein Verzeichnis. Wie viel noch dahinterliegt, sagt die Zeile darunter. */
.kategorie-kachel__kostprobe {
  --zeilenhoehe: 1.45;
  --zeilen: 6;

  display: flex;
  flex-direction: column;
  gap: 0;
  /* In ganzen Zeilen abschneiden, nie mittendrin: Ein halber Buchstabe am unteren
     Rand sieht aus wie ein Fehler, nicht wie eine Fortsetzung. Deshalb eine
     Höchsthöhe aus Zeilen statt "nimm dir, was übrig ist". */
  max-height: calc(var(--zeilen) * var(--zeilenhoehe) * 1em);
  margin-top: 0.6rem;
  margin-bottom: auto;
  overflow: hidden;
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: var(--zeilenhoehe);
}

/* Am Handy gar nicht.
 *
 * Zwei Kacheln nebeneinander lassen für einen Namen keine 150 Pixel — daraus
 * wurde "Schichtplan u…", "Personalesse…", "Reservierung…". Eine Spalte
 * abgeschnittener Wörter ist keine Übersicht, sie sieht nur nach einer aus. Auf
 * dem Handy steht deshalb der Name der Kategorie und wie viel darin liegt; die
 * Titel stehen eine Berührung später, dann in voller Länge.
 *
 * Ab Tablet ist die Kachel breit genug, dass jeder Name ganz hineinpasst. */
@media (max-width: 47.99rem) {
  .kategorie-kachel__kostprobe {
    display: none;
  }
}

.kategorie-kachel__eintrag {
  /* Ein Name, eine Zeile. Umbrechende Namen ließen die Liste ausfransen — und die
     Zeilenrechnung darüber stimmte dann nicht mehr. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Nicht schrumpfen. In einer Spalte mit Höchsthöhe staucht Flexbox sonst jede
     Zeile ein Stück — am Handy standen drei Namen als drei graue Streifen da, je
     ein Drittel Zeile hoch, durch die Mitte der Buchstaben geschnitten. Lieber
     ganze Zeilen zeigen und den Rest abschneiden. */
  flex: none;
}


.kategorie-kachel .recipe-card__body {
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
  height: 100%;
  padding: clamp(1rem, 2.5vw, 1.75rem);
}

/* Der Farbstreifen der Anleitungskacheln hat hier nichts zu suchen — die ganze
   Kachel trägt die Farbe schon. */
.kategorie-kachel .recipe-card__body::before {
  display: none;
}

.kategorie-kachel__name {
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  hyphens: auto;
  overflow-wrap: break-word;
}

.kategorie-kachel__zahl {
  font-size: 0.95rem;
  font-weight: 600;
  opacity: 0.8;
}

/* Eine Kategorie, die ein Ablauf ist, sagt das auf der Kachel: Wer sie antippt,
   landet nicht in einem Raster, sondern mitten im ersten Kapitel. */
.kategorie-kachel__reise {
  flex: none;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

/* Eine Kategorie, die in einer anderen erscheint. Ihre Kachel steht zwischen
   Anleitungen und muss sich davon unterscheiden: Dahinter liegt eine Auswahl
   und kein Rezept.

   Der gestrichelte Rand sagt das, ohne ein Wort zu kosten — dieselbe Farbe wie
   die Fläche, nur heller. Ein zweiter Farbton hätte eine dritte Sorte Kachel
   erfunden. */
.kategorie-kachel--verweis {
  outline: 2px dashed rgba(255, 255, 255, 0.55);
  outline-offset: -7px;
}

/* Der Pfeil sitzt unten rechts in der Ecke und nicht im Text: Er ist kein Wort,
   sondern ein Zeichen dafür, dass es weitergeht. */
.kategorie-kachel__weiter {
  position: absolute;
  right: 0.85rem;
  bottom: 0.7rem;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.7;
}

.kategorie-kachel--verweis .recipe-card__link {
  position: relative;
}

/* Am Handy nicht: Dort ist die Kachel eine Handfläche groß, und der Hinweis hing
   als angeschnittene Zeile unter dem Rand. Dass das Drehbuch eine Reihenfolge
   hat, merkt man beim ersten Kapitel — dort steht "Kapitel 1 von 8". */
@media (max-width: 47.99rem) {
  .kategorie-kachel__reise {
    display: none;
  }
}

/* Am Handy passt die Zeile nicht mehr nebeneinander: Die Bühnen stehen oben,
   der Weg in die Regie rutscht darunter. Mit margin-left: auto klebte er dort
   allein am rechten Rand, eine Zeile für sich, weit weg von allem — als wäre er
   aus der Zeile gefallen.
   
   Links ausgerichtet steht er unter den Bühnen und gehört sichtbar dazu. */
@media (max-width: 30rem) {
  .wegweiser {
    flex-wrap: wrap;
    gap: 0.6rem 1rem;
    overflow-x: visible;
  }

  .wegweiser__regie {
    margin-left: 0;
  }
}

/* Blätterleiste ----------------------------------------------------------- */

.recipe-pager {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 1.1rem;
}

.pager-button {
  display: grid;
  place-items: center;
  width: var(--mila-touch);
  height: var(--mila-touch);
  border: 1px solid var(--mila-line);
  border-radius: 50%;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 1.4rem;
  line-height: 1;
  box-shadow: var(--mila-shadow);
  cursor: pointer;
}

.pager-button:disabled {
  opacity: 0.35;
  box-shadow: none;
  cursor: default;
}

.pager-dots {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.pager-dot {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mila-line);
  cursor: pointer;
}

.pager-dot[aria-current="true"] {
  background: var(--mila-accent);
  transform: scale(1.2);
}

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

/* Tablet hoch und darunter: Detailspalten untereinander. */
@media (max-width: 899px) {
  .recipe-detail__columns {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Hochkantes Tablet: Das Foto liegt hier über dem Text statt daneben, damit
   bleibt die volle Breite für die beiden Blöcke. Untereinander gestellt liefen
   Zutaten und Geschirr über 700 Pixel breit aus und schoben die Schritte weit
   nach unten — nebeneinander stehen beide sofort im Blick. */
@media (min-width: 700px) and (orientation: portrait) {
  /* Hochkant ist Höhe knapp und Breite da: Das Foto steht über allem, darunter
     das Material links und der Ablauf rechts. Unter dem Foto gestapelt schöbe das
     Material die Schritte aus dem Bild — quer ist es umgekehrt. */
  .recipe-detail__body {
    /* Ausdrücklich als Raster: Unter 900 Pixern Breite steht der Körper sonst als
       Spalte, und dann bliebe das Material unter dem Foto stehen. */
    display: grid;
    /* Ein Drittel links, zwei Drittel rechts — dieselbe Teilung wie quer.
       Bei 0.8 zu 1.2 brach die Zubereitung mitten im Satz um, während links
       unter "Weinglas" die halbe Spalte weiß blieb. Gearbeitet wird nach den
       Schritten, also gehört ihnen die Breite. */
    /* Die Zutatenspalte nimmt, was sie braucht — höchstens aber 40 Prozent der
       Karte. Fest geteilt brach "Matcha-Pulver / 1 Scoop" bei dem einen Getränk
       um, während bei dem nächsten die halbe Spalte weiß blieb. Der Ablauf
       bekommt den Rest, und das ist bei kurzen Zutatenlisten mehr als zwei
       Drittel. */
    grid-template-columns: fit-content(40%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    /* Erst das Bild, darunter Zutaten und Ablauf nebeneinander, das Geschirr
       unter den Zutaten, die Hinweise über die ganze Breite.
     *
     * Das Geschirr stand unter dem Ablauf und das Glas damit zwei Spalten von
     * den Zutaten entfernt — dabei ist beides, was man sich vor dem Anfangen
     * zurechtstellt. Und ein Hinweis gilt dem Gericht als Ganzem: In der
     * schmalen Ablaufspalte brach er nach drei Wörtern um.
     *
     * Alt (zum Nachlesen, warum es nicht so blieb):
     *
     * Zwei Wünsche, die sich beißen: Die Überschriften sollen auf einer Höhe
     * beginnen, und der Ablauf soll den Platz nutzen, den er hat. Stand das Bild
     * oben links, fing der Ablauf entweder zu hoch an — dann standen die
     * Überschriften versetzt — oder er ließ neben dem Bild ein Feld von 361 mal
     * 241 Pixeln weiß.
     *
     * So beginnen "ZUTATEN" und "ZUBEREITUNG" weiterhin auf einer Linie. */
    /* Jede Zeile so hoch, wie ihr Inhalt sie braucht.
     *
     * Mit einer 1fr-Zeile schob sich der Block darunter über den davor: Das
     * Raster gab der Zeile die verfügbare Höhe, der Inhalt war höher, und der
     * Überhang legte sich über den Nachbarn. Zu eng wird es nicht — anleitung
     * setzt den Text so weit enger, bis alles ohne Scrollen passt. */
    grid-template-rows: auto auto auto auto auto;
    /* "Zutaten" und "Zubereitung" beginnen auf einer Linie, das Foto steht
     * darüber — rechtsbündig und groß statt klein in der Mitte.
     *
     * Als dritte Spalte daneben ging es nicht auf: Bei 676 Pixern Karte blieben
     * dem Ablauf 220, und "Milch von der Kaffeemaschine dazugeben" stand auf
     * vier Zeilen. Text braucht Breite mehr als das Foto. */
    grid-template-areas:
      "medien   medien"
      "zurecht  inhalt"
      "hinweise hinweise";
    align-content: start;
    /* Der Zeilenabstand stand auf null: Das Bildfeld liegt hochkant über allem,
       und "ZUTATEN" klebte damit an seiner Kante. Ein Bild hat einen Rand, eine
       Liste nicht — dazwischen braucht es mehr Luft als zwischen zwei
       Textspalten. */
    gap: 1.4rem clamp(1.75rem, 3vw, 2.5rem);
    /* Dieselben zwei Angaben wie quer — hochkant fehlten sie, und das war der
       Grund, warum "Küche schließen" unten abgeschnitten war: Ohne sie hängt der
       Körper nicht an der Höhe der Karte, das Raster gibt der Ablaufzeile ihre
       natürliche Höhe statt der verfügbaren, und der Überhang landet außen an der
       Karte. anleitung_controller misst dann am Inhalt immer null Überhang und
       verkleinert ins Leere: Es half nichts, weil an der falschen Stelle
       gemessen wurde. */
    flex: 1;
    min-height: 0;
  }

  .recipe-detail__media { grid-area: medien; }
  .recipe-detail__material { grid-area: material; }
  /* Der Block trägt jetzt das Rasterfeld, und darin stehen Zutaten und Glas
     dicht beieinander. */
  .recipe-detail__zurecht {
    grid-area: zurecht;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.9rem;
    min-width: 0;
  }

  .recipe-detail__inhalt { grid-area: inhalt; }
  .recipe-detail__hinweise { grid-area: hinweise; }

  .recipe-detail__body--ohne-medien {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    grid-template-areas:
      "zurecht  inhalt"
      "hinweise hinweise";
    grid-template-rows: auto auto;
  }

  /* Das Foto steht rechts und nimmt gut ein Drittel der Karte.
   *
   * Mittig und auf 26vh gedeckelt war es ein kleines Quadrat in einem breiten
   * Band: links und rechts davon Weiß, und vom Getränk kaum etwas zu erkennen.
   * Rechtsbündig schließt es mit der Karte ab, und der Ablauf darunter beginnt
   * an derselben Kante. */
  /* Mit .recipe-detail__body davor: Die Regel für das mittige Quadrat steht
     weiter unten in dieser Lage und gewönne sonst — gleiche Spezifität,
     spätere Zeile. */
  .recipe-detail__body .recipe-detail__image,
  .recipe-detail__body .recipe-detail__ohne-bild {
    width: min(38%, 17rem);
    max-height: none;
    /* Rechtsbündig über den Rand der Ablaufspalte: "auto" links schiebt es
       hinüber, unabhängig davon, wie der Medienblock ausgerichtet ist. */
    margin-inline: auto 0;
  }

  /* Ohne Schrittfotos steht das Bild trotzdem links.
   *
   * Mit Folge teilen sich beide den Medienblock, und das Produktfoto sitzt in
   * der linken Hälfte. Ohne Folge schob es die Regel darüber an den rechten
   * Rand — dieselbe Anleitung sah damit je nach Pflegestand anders aus, und
   * beim Blättern durch eine Kategorie sprang das Foto von links nach rechts,
   * je nachdem, ob jemand die Handgriffe schon fotografiert hatte. Wo die Folge
   * fehlt, gehört der Platz derselben Kante.
   *
   * Der leere Rahmen geht mit: Er steht da, damit das Fenster beim Blättern
   * nicht springt — bliebe er rechts, während die Fotos links stehen, täte er
   * genau das. */
  .recipe-detail__media:not(:has(.schrittbilder)) .recipe-detail__image,
  .recipe-detail__media:not(:has(.schrittbilder)) .recipe-detail__ohne-bild {
    margin-inline: 0 auto;
  }

  /* Ein Foto (oder eine Skizze), aber kein Material — bei Küche öffnen und
     Küche schließen etwa: Ohne diese Regel blieb die Spalte "material" leer und
     reserviert und nahm dem Ablauf die halbe Breite, obwohl darin nichts stand.
     Zehn Schritte quetschten sich dadurch in eine schmale Spalte, während
     rechts nur Leerraum stand — genau die Kachel, die den ganzen Platz nutzen
     soll, tat es nicht. */
  /* Ohne Zutatenliste — Espresso Martini und "Ofen anschalten" etwa — bleibt die
     Karte in derselben Form wie alle anderen: Foto oben rechts, darunter der
     Ablauf über die ganze Breite. Stand das Foto stattdessen in einer eigenen
     schmalen Spalte, war es 76 Pixel breit, und die Karte sah aus wie eine
     andere Anwendung. */
  .recipe-detail__body:not(:has(.recipe-detail__material)) {
    grid-template-areas:
      "medien   medien"
      "inhalt   inhalt"
      "zurecht  zurecht"
      "hinweise hinweise";
  }

  .recipe-detail__columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);
  }

  /* Ohne Material gehört die Breite dem Ablauf. Diese Ausnahme fehlte hochkant:
     Die linke Spalte blieb leer stehen, und die Schritte drängten sich in der
     Hälfte des Fensters — bei einem Sandwich, dessen Zutaten schon in den
     Schritten stehen, also bei fast allen. */
  .recipe-detail__columns--nur-text {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Das Blatt bleibt im Bild und lässt ringsherum genug Fläche frei, um es
     wegzutippen. Vorher blieben seitlich 27 Pixel, und unten ragte es 92 Pixel
     aus dem Bildschirm — es gab schlicht keinen Rand mehr zu treffen. Der
     Daumen braucht dafür rund einen halben Zentimeter. */
  .recipe-modal {
    align-items: center;
    padding: clamp(2rem, 5vh, 3.5rem) clamp(2rem, 6vw, 3.5rem);
  }

  /* Statt über den Bildschirm hinauszuwachsen, scrollt das Blatt in sich. So
     bleibt die Unterkante sichtbar und mit ihr der Weg nach draußen. */
  .recipe-detail {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    margin: 0;
    overflow-y: auto;
  }

  /* Alles eine Spur kleiner, damit die Anleitung ohne Scrollen auf den Schirm
     passt — sie war 140 Pixel zu hoch. Wer am Herd steht, soll den ganzen Ablauf
     sehen und nicht mit mehligen Fingern wischen müssen.

     Der größte Hebel ist das Foto: Mit 38vh nahm es mehr als ein Drittel der
     Höhe. Es bleibt groß genug, um das Gericht zu erkennen — dafür ist es da,
     nicht zum Betrachten.

     Zweiter Anlauf, nach einer Messung: Bei "Loaded Brioche Parma" nahm das Bild
     mit 32vh vierzig Prozent der Karte, die Schritte zweiundzwanzig — und
     darunter blieben 118 Pixel leer. Gearbeitet wird nach den Schritten, also
     bekommen die den Platz: 26vh fürs Bild.

     Das Bild kleiner zu machen reicht dabei nicht. Die Schrift hängt an --dichte,
     und die stand bei diesen Anleitungen ohnehin auf 1 — freigewordene Höhe wäre
     einfach leer geblieben. Deshalb steigt zugleich die Grundgröße von 1rem auf
     1.25rem: Auf Armlänge sind sechzehn Pixel zu klein, und genau das war die
     Beschwerde. */
  /* Quadratisch, wie das Foto eingestellt wurde.
   *
   * Hochkant nahm es die ganze Spaltenbreite und wurde auf ein Band gestutzt —
   * vom Gericht blieb ein Streifen. Jetzt bekommt es dieselbe Form wie neben
   * einer Bilderfolge: ein Quadrat, mittig, so hoch wie es sich der Ablauf
   * darunter leisten kann. */
  .recipe-detail__image {
    width: calc(26vh * var(--dichte, 1));
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto 1rem;
  }

  /* Dieselbe Überlegung wie quer: Eine Skizze braucht die Höhe nicht, die ein
     Produktfoto braucht — der Ablauf darunter schon. */
  .recipe-detail__image--zeichnung {
    width: calc(14vh * var(--dichte, 1));
    max-width: 40%;
    margin: 0 auto 0.75rem;
  }

  .recipe-detail__image img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
  }

  /* Die Bilderfolge nahm sich die volle Spaltenbreite mal drei Viertel — bei
     einem Tablet hochkant über die halbe Höhe. Zusammen mit dem Produktfoto
     darüber blieb für die Zubereitung nichts mehr übrig, obwohl sie der Grund
     ist, warum jemand die Anleitung öffnet. */
  /* Foto und Folge nebeneinander statt übereinander.
   *
   * Untereinander waren es zwei flache Bänder über die volle Breite: das
   * Produktfoto beschnitten, die hochkant aufgenommene Folge als schmaler
   * Streifen mit Weiß links und rechts. Nebeneinander bekommt jedes die Hälfte
   * der Breite und darf dafür höher sein — beide zeigen mehr als vorher, und der
   * Ablauf darunter verliert nichts. */
  .recipe-detail__media:has(.schrittbilder):has(.recipe-detail__image) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    align-items: start;
  }

  /* Mit .recipe-detail davor: Die Grundregel für die Bühne steht weiter unten in
     dieser Datei und gewönne sonst — gleiche Spezifität, spätere Zeile. */
  .recipe-detail .schrittbilder__buehne {
    aspect-ratio: auto;
    height: calc(26vh * var(--dichte, 1));
    flex: none;
  }

  /* Das ganze Bild statt eines Ausschnitts: Ein Handgriff, dessen Rand fehlt,
     zeigt womöglich genau das nicht, worauf es ankommt. */
  .recipe-detail .schrittbilder__bild {
    object-fit: contain;
    background: var(--mila-surface);
  }

  /* Beide gleich hoch: Zwei Kästen nebeneinander, die unterschiedlich weit nach
     unten reichen, sehen aus wie ein Versehen. */
  .recipe-detail__media:has(.schrittbilder) .recipe-detail__image {
    margin-bottom: 0;
  }

  /* Ohne Produktfoto steht die Folge allein — dann gehört ihr die ganze Breite. */
  .recipe-detail__media:not(:has(.recipe-detail__image)) .schrittbilder__buehne {
    height: calc(20vh * var(--dichte, 1));
  }

  /* Neben der Folge bestimmt die halbe Spaltenbreite die Größe — das Quadrat
     bleibt, es wird nur schmaler. */
  .recipe-detail__media:has(.schrittbilder) .recipe-detail__image {
    width: 100%;
    margin-bottom: 0;
  }

  /* Die Zeilen rücken enger zusammen. Einzeln kaum zu bemerken, zusammen sind es
     die letzten Pixel, die noch fehlten. */
  .ingredient-list__item,
  .instruction-list__item {
    padding-block: 0.5rem;
  }
}

/* Smartphone: eine Spalte, Filter horizontal scrollbar, Modal als Sheet. */
@media (max-width: 640px) {
  /* Der Kopf nahm dem Kachelraster ein gutes Drittel des Bildschirms. Alles
     rückt enger zusammen — jede gesparte Zeile hier ist eine Reihe Kacheln
     mehr. */
  .kitchen-header {
    padding-inline: 1rem;
    padding-block: 0.5rem;
  }

  /* Die Mindesthöhe des Logos hielt hier eine leere Zeile frei. */
  .kitchen-logo {
    min-height: 0;
  }

  .kitchen-logo__mark {
    font-size: 1.35rem;
  }

  .kitchen-logo__bereich {
    font-size: 0.95rem;
  }

  .category-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: -1rem;
    padding-inline: 1rem;
    scrollbar-width: none;
  }

  .category-filter::-webkit-scrollbar {
    display: none;
  }

  /* Enger als am Tablet: Jeder Millimeter zwischen den Kacheln fehlt auf dem
     Handy einer weiteren Kachel. Die Spaltenzahl setzt der Pager. */
  .recipe-grid {
    gap: 0.5rem;
  }

  .recipe-modal {
    padding: 0;
  }

  .recipe-detail {
    margin: 0;
    min-height: 100%;
    border-radius: 0;
  }

  /* Am Tablet ist der Weg zurück der Rand des Fensters oder die Escape-Taste. Am
     Handy gibt es beides nicht: Das Blatt füllt den Bildschirm bis auf einen
     Pixel, und eine Escape-Taste hat niemand dabei. Hier gehört der Knopf
     sichtbar an den Anfang — sonst kommt man aus einer Anleitung nicht mehr
     heraus. */
  .recipe-detail__schliessen {
    position: static;
    width: auto;
    height: auto;
    margin-bottom: 0.85rem;
    overflow: visible;
    clip-path: none;
  }

  /* Die Blätterpfeile lagen als feste Kacheln links und rechts über dem Text und
     schnitten ihn an beiden Rändern an. Am Handy wird ohnehin gewischt — der
     Controller hört am Blatt auf touchstart und touchend. Weniger auf dem Schirm
     heißt hier: mehr zu erkennen. */
  .recipe-detail__blaettern {
    display: none;
  }

  .ingredient-list__amount {
    min-width: 5rem;
  }
}

/* Fußzeile: Produktname und Pflichtangaben ------------------------------- */

.fusszeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  padding: 1.1rem clamp(1rem, 3vw, 2.5rem);
  font-size: 0.82rem;
  color: var(--mila-text-soft);
}

.fusszeile__marke {
  text-transform: lowercase;
  letter-spacing: 0.01em;
}

.fusszeile__back {
  font-weight: 400;
  opacity: 0.7;
}

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

.fusszeile__links {
  display: flex;
  gap: 1.1rem;
}

.fusszeile__links a {
  color: var(--mila-text-soft);
  text-decoration: none;
}

.fusszeile__links a:hover {
  color: var(--mila-text);
  text-decoration: underline;
}

/* Impressum und Datenschutz ---------------------------------------------- */

body.rechtstext {
  margin: 0;
  background: var(--mila-bg);
  color: var(--mila-text);
  font-family: var(--mila-font);
  font-size: 17px;
  line-height: 1.6;
}

.rechtstext__inhalt {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 1rem;
}

.rechtstext__inhalt h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: -0.01em;
}

.rechtstext__inhalt h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}

/* Die Unterpunkte im Beschäftigungsteil: kleiner als eine Überschrift, aber
   deutlich genug, um beim Blättern hängenzubleiben. Ohne diese Regel wären sie
   größer als die Überschriften darüber — der Browser kennt unsere Größen nicht. */
.rechtstext__inhalt h3 {
  margin: 1.4rem 0 0.4rem;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: var(--mila-text-lead);
}

/* Das vollständige Dokument zum Mitnehmen — abgesetzt, damit es beim Überfliegen
   auffällt und nicht zwischen den Absätzen untergeht. */
.rechtstext__dokument {
  margin: 1.6rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface-soft);
  font-size: 0.95rem;
}

.rechtstext__dokument a {
  color: var(--mila-accent);
  font-weight: 600;
}

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

.rechtstext__zurueck {
  margin: 0 0 1.5rem;
  font-size: 0.92rem;
}

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

/* Weist darauf hin, dass hier noch etwas fehlt — bewusst auffällig. */
.rechtstext__pruefen {
  margin: 0 0 1.5rem;
  padding: 1rem 1.15rem;
  border: 1px solid var(--mila-warn-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

.rechtstext__pruefen p {
  margin: 0;
}

.rechtstext__marke {
  text-transform: lowercase;
}

/* Aufgabenfenster ---------------------------------------------------------- */

/* Was fällig ist, stellt sich in den Weg.
 *
 * Gebaut wie das Neuigkeitenfenster, aber größer in allem: Es wird nicht gelesen,
 * sondern im Vorbeigehen erfasst — von jemandem mit vollen Händen, aus zwei, drei
 * Metern Entfernung. Deshalb der Titel so groß wie eine Überschrift, und die
 * Knöpfe so hoch, dass man sie mit dem Handrücken trifft. */
.aufgabenfenster {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(15, 20, 18, 0.6);
  backdrop-filter: blur(3px);
  animation: mila-fade-in 180ms ease both;
}

/* Der Rand des Bildschirms atmet, solange eine Aufgabe offen ist.
 *
 * Das Fenster allein sieht nur, wer gerade auf das Tablet schaut. In der Küche
 * schaut niemand hin — dort fällt auf, was sich bewegt, und zwar am Rand des
 * Blickfelds. Deshalb bewegt sich der Rand des ganzen Bildschirms, in der Farbe,
 * die im Haus "hier will etwas" heißt.
 *
 * Zwei Schichten: eine schmale Linie, die immer steht, und ein weicher Schein
 * von den Rändern her, der kommt und geht. Ein dicker Rahmen war zu viel — und
 * nur einen Rahmen blasser und kräftiger werden zu lassen, sah man kaum. Der
 * Schein ist leise, aber er bewegt sich über eine große Fläche.
 *
 * Langsam, knapp zwei Sekunden je Atemzug: Nichts flackert. Und er läuft auch,
 * wenn am Gerät "Bewegung reduzieren" an ist — dort geht es um Dinge, die sich
 * durch den Raum bewegen; ein Schein, der heller und dunkler wird, bewegt
 * nichts. Vorher stand der Rahmen auf solchen Geräten einfach still.
 *
 * Das Atmen allein war zu leise: Es fiel im Betrieb nicht auf. Deshalb steht
 * jetzt ein echtes Blinken davor — vier harte Schläge, dann geht es ins Atmen
 * über. Ein Blinken sagt "jetzt", ein Atmen sagt "immer noch"; beides
 * nacheinander sagt beides.
 *
 * Der Rahmen lädt sich alle zehn Sekunden neu, und mit ihm fängt das Blinken
 * wieder an. Das ist Absicht: Solange die Aufgabe offensteht, meldet sie sich
 * alle zehn Sekunden einmal kurz und ist dazwischen ruhig. */
.aufgabenfenster::before,
.aufgabenfenster::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.aufgabenfenster::before {
  border: 6px solid var(--mila-glocke);
  animation: aufgabe-schlag 0.42s steps(1, end) 4,
             aufgabe-atmen 1.8s ease-in-out 1.68s infinite;
}

.aufgabenfenster::after {
  box-shadow: inset 0 0 clamp(50px, 9vw, 110px) rgba(192, 69, 31, 0.75);
  animation: aufgabe-schlag 0.42s steps(1, end) 4,
             aufgabe-signal 1.8s ease-in-out 1.68s infinite;
}

/* Vier harte Schläge — das ist das Blinken. */
@keyframes aufgabe-schlag {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.12; }
}

/* Danach atmet die Linie weiter, nur ruhiger als der Schein. */
@keyframes aufgabe-atmen {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes aufgabe-signal {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 1; }
}

/* Wer "Bewegung reduzieren" eingeschaltet hat, bekommt das Atmen, aber kein
   Blinken: Das eine ist ein Helligkeitswechsel, das andere ein Blitzen. */
@media (prefers-reduced-motion: reduce) {
  .aufgabenfenster::before {
    animation: aufgabe-atmen 1.8s ease-in-out infinite;
  }

  .aufgabenfenster::after {
    animation: aufgabe-signal 1.8s ease-in-out infinite;
  }
}

.aufgabenfenster__karte {
  --karte-rand: clamp(1.75rem, 5vw, 2.75rem);

  position: relative;
  width: min(38rem, 100%);
  padding: var(--karte-rand);
  overflow: hidden;
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
  text-align: center;
  /* Sie springt einmal auf, wenn sie kommt — ein Auftritt, kein Dauerzappeln.
     Das Pulsieren übernimmt der Rahmen. */
  animation: aufgabe-auftritt 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes aufgabe-auftritt {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: none; }
}

/* Das Wort darüber in der Signalfarbe — getönt statt vollflächig. Das kräftige
   Rot hat der Rand; auf der Karte genügt, dass man es wiedererkennt. */
.aufgabenfenster__marke {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--mila-glocke) 13%, var(--mila-surface));
  color: var(--mila-glocke);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Wer Bewegung abgeschaltet hat, bekommt keinen Sprung der Karte — der Schein
   am Rand bleibt, er bewegt nichts. */
@media (prefers-reduced-motion: reduce) {
  .aufgabenfenster__karte {
    animation: none;
  }
}

.aufgabenfenster__titel {
  margin: 0;
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.aufgabenfenster__text {
  margin: 0.75rem 0 0;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.5;
  color: var(--mila-text-soft);
}

.aufgabenfenster__form {
  margin: 1.5rem 0 0;
}

/* 5rem hoch: Das ist keine Schaltfläche, das ist eine Fläche. Im Betrieb tippt
   niemand zielgenau. */
.aufgabenfenster__knopf {
  display: block;
  width: 100%;
  min-height: 5rem;
  border: 0;
  border-radius: var(--mila-radius-sm);
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  cursor: pointer;
}

/* Erledigt ist die Hauptsache und hat die Hausfarbe. Das Schlummern steht
   darunter und tritt zurück — man greift danach, nicht blind hinein. */
.aufgabenfenster__knopf--erledigt {
  background: var(--mila-accent);
  color: #fff;
}

/* Zwei Dauern nebeneinander, beide gleich leise — leiser als "Erledigt", die
   Hauptsache bleibt oben. */
.aufgabenfenster__schlummerwahl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.aufgabenfenster__schlummerwahl .aufgabenfenster__form {
  margin: 0;
}

.aufgabenfenster__knopf--schlummern {
  min-height: 3.75rem;
  width: 100%;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 1rem;
  font-weight: 600;
}

.aufgabenfenster__knopf:active {
  transform: scale(0.99);
}

/* Zwischenüberschrift in der Aufgabenliste — "Schlummert", "Kommt noch". */
.aufgaben__gruppe {
  margin: 1.15rem 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

/* Was nicht jetzt dran ist, steht leiser da: Es soll die offenen Aufgaben nicht
   überlagern. */
.aufgaben__liste--leise {
  opacity: 0.75;
}

/* Heute Abgehaktes: durchgestrichen und zurückgenommen. Es steht als Antwort auf
   die Frage "hat das schon jemand gemacht?" — nicht als Aufgabe. */
.aufgaben__liste--erledigt .aufgaben__text {
  text-decoration: line-through;
  color: var(--mila-text-soft);
}

.aufgaben__kaestchen--voll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  border-color: var(--mila-ok-text, #1e6b34);
  background: var(--mila-ok-text, #1e6b34);
  color: #fff;
  font-size: 0.8rem;
  line-height: 1;
}

.aufgaben__eintrag--still {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.6rem 0.75rem;
  font-size: 1.12rem;
}

.aufgaben__zeit {
  flex: none;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  color: var(--mila-text-soft);
}

/* Neuigkeiten nach dem Anmelden ------------------------------------------- */

.news {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  background: rgba(42, 33, 25, 0.45);
  backdrop-filter: blur(3px);
  animation: mila-fade-in 180ms ease both;
}

.news__karte {
  width: min(34rem, 100%);
  max-height: 80dvh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border-radius: var(--mila-radius);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
}

.news__titel {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
}

.news__lead {
  margin: 0.25rem 0 1.35rem;
  color: var(--mila-text-soft);
}

.news__liste {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.news__eintrag {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.news__eintrag:last-child {
  border-bottom: 0;
}

.news__marke {
  flex: none;
  min-width: 5.4rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

.news__marke--neu {
  background: var(--mila-accent);
  color: #fff;
}

.news__namen {
  display: flex;
  flex-direction: column;
}

.news__kategorie {
  color: var(--mila-text-soft);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.news__name {
  font-size: 1.1rem;
  font-weight: 700;
}

.news__schliessen {
  width: 100%;
  min-height: var(--mila-touch);
  border: 0;
  border-radius: 999px;
  background: var(--mila-accent);
  color: #fff;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}

/* Der Abmelde-Knopf steckt in einem Formular — es darf keinen Platz beanspruchen. */
.kitchen-header__tools form {
  margin: 0;
}

/* Wortmarke über der Begrüßung ------------------------------------------- */

.news__marke-oben {
  margin: 0 0 1.1rem;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-transform: lowercase;
}

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

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

.news__lead--allein {
  margin-bottom: 1.75rem;
}

/* Sprachwahl -------------------------------------------------------------- */

.sprachwahl {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
}

.sprachwahl__form {
  margin: 0;
}

.sprachwahl__tab {
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
}

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

.news__sprache {
  margin: 0 0 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--mila-line);
}

.news__sprache-frage {
  margin: 0 0 0.7rem;
  color: var(--mila-text-soft);
  font-size: 0.92rem;
}

.news__sprachen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  /* Luft zum Knopf darunter — er soll nicht an der Auswahl kleben. */
  margin-bottom: 2.25rem;
}

.news__sprache-wahl {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.4rem 1.15rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

/* Der Punkt in den Farben des Hauses statt im Systemblau. */
.news__radio {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--mila-accent);
}

.news__sprache-wahl:has(input:checked) {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
}

/* Werkzeugmenü in der Kopfzeile ------------------------------------------- */

.werkzeuge {
  position: relative;
}

/* Deutlich sichtbarer Griff: Er ist der einzige Weg zu Sprache, Vollbild und
   Abmelden — er darf nicht wie eine Verzierung aussehen. */
.werkzeuge__knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 58px;
  min-height: 52px;
  padding: 0 1rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  list-style: none;
  cursor: pointer;
}

.werkzeuge__knopf::-webkit-details-marker {
  display: none;
}

/* Etwas kleiner als das Kontosymbol daneben: Die Sprache wird seltener gebraucht
   als der eigene Zugang, und zwei gleich große Kreise nebeneinander lesen sich
   als Paar, obwohl sie nichts miteinander zu tun haben. */
.werkzeuge__symbol {
  width: 22px;
  height: 22px;
}

.werkzeuge__knopf:hover {
  border-color: #d6c9b8;
}

.werkzeuge[open] .werkzeuge__knopf {
  border-color: var(--mila-accent);
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
}

.werkzeuge__panel {
  position: absolute;
  top: calc(100% + 0.6rem);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  width: max-content;
  min-width: 15rem;
  padding: 0.6rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow);
}

.werkzeuge__titel {
  margin: 0;
  padding: 0.45rem 0.75rem 0.25rem;
  color: var(--mila-text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Die Sprachwahl bekommt dieselbe Breite und Höhe wie die Einträge darunter. */
.werkzeuge__panel .sprachwahl {
  margin: 0 0.25rem 0.25rem;
}

.werkzeuge__panel .sprachwahl__form,
.werkzeuge__panel .sprachwahl__tab {
  flex: 1;
}

.werkzeuge__panel .sprachwahl__tab {
  width: 100%;
  min-height: 44px;
  font-size: 0.95rem;
}

.werkzeuge__linie {
  margin: 0.45rem 0.25rem;
  border: 0;
  border-top: 1px solid var(--mila-line);
}

.werkzeuge__panel form {
  margin: 0;
}

.werkzeuge__eintrag {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 50px;
  padding: 0.6rem 0.75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

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

.werkzeuge__eintrag--abmelden {
  color: var(--mila-accent);
}

/* Wiederkehrende Aufgabe: kommt nach dem Abhaken von selbst wieder. */
.aufgaben__rhythmus {
  flex: none;
  margin-left: auto;
  padding-left: 0.5rem;
  color: var(--mila-text-soft);
  font-size: 1.15rem;
  opacity: 0.7;
}

/* Vollbild: der eine Knopf unten rechts ----------------------------------- */

.vollbild {
  display: grid;
  flex: none;
  place-items: center;
  width: 54px;
  height: 54px;
  padding: 0;
  border: 1px solid var(--mila-line);
  border-radius: 50%;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  cursor: pointer;
  box-shadow: var(--mila-shadow);
}

.vollbild:hover {
  border-color: #d6c9b8;
  color: var(--mila-text);
}

.vollbild__symbol {
  width: 22px;
  height: 22px;
}

/* Nur eines der beiden Zeichen ist je zu sehen — welches, entscheidet der
   Zustand am body, nicht JavaScript. */
.vollbild__symbol--zu,
body.kitchen--ruhe .vollbild__symbol--auf {
  display: none;
}

body.kitchen--ruhe .vollbild__symbol--zu {
  display: block;
}

/* Aufgeräumter Bildschirm ------------------------------------------------- */

/* Alles weg, was nicht Kachel oder Suche ist. Der Rückweg bleibt: ein Knopf, der
   kleiner wird, als er im Normalzustand ist — er soll erreichbar sein, ohne sich
   in den Vordergrund zu stellen. */
body.kitchen--ruhe .kitchen-header,
body.kitchen--ruhe .fusszeile {
  display: none;
}

body.kitchen--ruhe .vollbild {
  width: 42px;
  height: 42px;
  opacity: 0.55;
}

body.kitchen--ruhe .vollbild:hover,
body.kitchen--ruhe .vollbild:focus-visible {
  opacity: 1;
}

body.kitchen--ruhe .vollbild__symbol {
  width: 17px;
  height: 17px;
}

/* Die gewonnene Höhe gehört den Kacheln, nicht dem Abstand darüber. */
body.kitchen--ruhe .kitchen-main {
  padding-top: 0.6rem;
}

.werkzeuge__eintrag--aktiv {
  background: var(--mila-surface-soft);
}

/* Aufgaben unten links ---------------------------------------------------- */

/* Sitzt in der Leiste unten links (siehe .buehnenleiste) und nicht mehr selbst
 * am Bildschirmrand: Seit die beiden Ablaufknöpfe daneben stehen, teilen sie
 * sich eine Verankerung. Das Panel klappt weiterhin über ihm auf, dafür bleibt
 * hier ein Bezugspunkt stehen. */
.aufgaben {
  position: relative;
}

.aufgaben__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 54px;
  padding: 0 1.15rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
  box-shadow: var(--mila-shadow);
}

.aufgaben__knopf::-webkit-details-marker {
  display: none;
}

.aufgaben[open] .aufgaben__knopf {
  border-color: var(--mila-accent);
}

/* Die Zahl wie ungelesene Nachrichten: rund, kräftig, sofort erkennbar.
 *
 * Die einzige Stelle im Haus, die Flieder trägt. Alles andere ist Tanne — die
 * Farbe des Hauses, sie sagt "so sieht es hier aus". Eine offene Aufgabe sagt
 * etwas anderes: "du". Dafür braucht es eine Farbe, die sonst nirgends
 * vorkommt, sonst geht sie im Haus unter. Kommt sie an einer zweiten Stelle
 * dazu, ist sie kein Tupfer mehr, sondern eine zweite Hausfarbe. */
.aufgaben__zahl {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--mila-tupfer);
  /* Dunkle Schrift auf hellem Flieder: Weiß darauf wäre nicht zu lesen. */
  color: var(--mila-dunkel);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

/* Eine Kachel, kein Aufklappmenü.
 *
 * Das Tablet steht auf der Arbeitsfläche und wird aus einem Schritt Abstand
 * gelesen, nicht in der Hand gehalten. Ein Menü in Menüschrift zwingt dazu,
 * näher heranzugehen — bei nassen Händen die Bewegung, die niemand macht.
 * Deshalb ist das Aufgeklappte hier so groß wie das Fenster einer fälligen
 * Aufgabe: Was zu tun ist, liest man im Vorbeigehen.
 *
 * Die Höhe misst, was übrig bleibt, statt einen Anteil zu raten: unten der
 * Knopf, der sie aufgeklappt hat, oben der Rand des Bildschirms. */
.aufgaben__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  width: max-content;
  min-width: min(24rem, calc(100vw - 2rem));
  max-width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 8rem);
  overflow-y: auto;
  padding: 1.15rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
}

.aufgaben__titel {
  margin: 0 0 0.7rem;
  padding: 0 0.25rem;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.aufgaben__liste,
.aufgaben__eintrag {
  margin: 0;
  padding: 0;
  list-style: none;
}

.aufgaben__form {
  margin: 0;
}

.aufgaben__haken {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 64px;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 1.25rem;
  text-align: left;
  cursor: pointer;
}

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

.aufgaben__kaestchen {
  flex: none;
  width: 30px;
  height: 30px;
  border: 2px solid var(--mila-line);
  border-radius: 9px;
}

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

.aufgaben__leer {
  margin: 0;
  padding: 0.7rem 0.75rem 0.8rem;
  color: var(--mila-text-soft);
  font-size: 1.12rem;
}

/* Angemeldetes Konto ------------------------------------------------------ */

/* Ein Aufklappmenü: sichtbar bleibt nur, wer angemeldet ist — das Abmelden liegt
   dahinter, damit es niemand im Vorbeigehen trifft. */
/* Bereichswechsel ---------------------------------------------------------- */

/* Hinter der Produktmarke: der Weg in die anderen Oberflächen. backstage ist das
   Gemeinsame — Stages, Academy und Projekte laufen darauf, gehören aber
   verschiedenen Leuten und verschiedenen Geräten. Deshalb sitzt der Wechsel hier
   und nicht als Reiterreihe unter der Marke des Betriebs.

   Gebaut wie das Kontomenü daneben: dieselbe Geste, dieselbe Form. */
.bereichswechsel {
  position: relative;
}

.bereichswechsel__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  list-style: none;
  cursor: pointer;
}

.bereichswechsel__knopf::-webkit-details-marker {
  display: none;
}

.bereichswechsel__knopf:hover,
.bereichswechsel[open] .bereichswechsel__knopf {
  background: var(--mila-surface-soft);
}

.bereichswechsel__pfeil {
  color: var(--mila-text-soft);
  font-size: 0.7rem;
  line-height: 1;
}

.bereichswechsel__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  width: max-content;
  min-width: 13rem;
  padding: 0.5rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
  /* Seit es vier Blöcke sind, reicht die Liste auf einem kurzen Schirm über den
     unteren Rand hinaus. Gescrollt hat dann das Blatt darunter und nicht sie
     selbst — an die letzten Einträge kam man gar nicht heran. Sie bekommt
     deshalb ihre eigene Höhe und ihren eigenen Bildlauf.

     dvh und nicht vh: vh rechnet mit dem Schirm ohne die Leisten des Browsers.
     Am iPhone stand die Liste damit bis hinter die Safari-Leiste, und die
     letzten Einträge waren auch mit Bildlauf nicht zu treffen — sie endeten in
     dem Streifen, den man nicht sieht. dvh kennt die Leisten und wächst mit
     ihnen. vh bleibt als Rückfall für Geräte, die dvh noch nicht kennen. */
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  /* Ist die Liste zu Ende, scrollt nicht plötzlich die Seite dahinter weiter. */
  overscroll-behavior: contain;
}

.bereichswechsel__titel {
  margin: 0 0 0.4rem;
  padding: 0.15rem 0.65rem;
  color: var(--mila-accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* Zeilen statt Knöpfe.
 *
 * Vorher stand hier eine Reihe umrandeter Pillen mit mittigem Text — sechs
 * gleich aussehende Kästchen, in denen nichts vor dem anderen lag. Ein Menü
 * liest man aber von links nach rechts, und man sucht darin einen Namen, keinen
 * Knopf. Jetzt sind es Zeilen: linksbündig, ohne Rahmen, mit Platz zum Treffen. */
.bereichswechsel__eintrag {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 40px;
  padding: 0.4rem 0.65rem;
  border: 0;
  border-radius: 10px;
  color: var(--mila-text);
  font-weight: 600;
  text-decoration: none;
}

/* Der Punkt vorn gibt der Zeile einen Anfang — ohne ihn schwimmt der Name im
   Weiß, sobald der Rahmen weg ist. */
.bereichswechsel__eintrag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--mila-line);
}

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

.bereichswechsel__eintrag:hover::before {
  background: var(--mila-accent);
}

/* Wo man gerade ist — und hier sitzt der Flieder.
 *
 * Er markiert nicht "wichtig", sondern "das bist du": deine offenen Aufgaben am
 * ToDo-Knopf, dein Platz in dieser Liste. Ringsum steht Tanne, die Farbe des
 * Hauses; der Flieder gehört nicht zum Haus, sondern zu dir. Deshalb bleibt er
 * ein Tupfer und wird keine zweite Hausfarbe.
 *
 * Der Eintrag steht bewusst mit in der Liste — herausgenommen sah es aus, als
 * sei das Modul verschwunden. Die Schrift bleibt in der Hausfarbe: 6,4:1 auf dem
 * Flieder, also auch am Tablet in der Sonne lesbar. */
.bereichswechsel__eintrag--hier {
  background: var(--mila-tupfer);
  color: var(--mila-accent);
  font-weight: 700;
}

.bereichswechsel__eintrag--hier::before {
  background: var(--mila-accent);
}

.konto {
  position: relative;
}

.konto__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}

.konto__knopf::-webkit-details-marker {
  display: none;
}

.konto__knopf:hover,
.konto[open] .konto__knopf {
  background: var(--mila-surface-soft);
  color: var(--mila-text);
}

.konto__symbol {
  flex: none;
  width: 17px;
  height: 17px;
  opacity: 0.75;
}

.konto__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  /* Breit genug für die Adresse in einer Zeile, aber nie über die Maske hinaus. */
  width: max-content;
  min-width: 13rem;
  max-width: min(24rem, 80vw);
  padding: 0.75rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
}

.konto__adresse {
  margin: 0 0 0.6rem;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.konto__panel form {
  margin: 0;
}

/* Beide Einträge sind Knöpfe — ein bloßer Textlink sah hier nicht anklickbar aus.
   Die Farbe unterscheidet sie: Ändern ist Alltag, Abmelden hat Folgen. */
.konto__eintrag,
.konto__abmelden {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-bottom: 0.4rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.konto__eintrag {
  color: var(--mila-text);
}

.konto__eintrag:hover {
  border-color: #d6c9b8;
  background: var(--mila-surface-soft);
}

.konto__abmelden {
  margin-bottom: 0;
  color: var(--mila-accent);
}

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

/* Schriftzug mit Konto darunter ------------------------------------------- */

.kitchen-marke,
.admin-marke {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.kitchen-marke__zeile,
.admin-marke__zeile {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kitchen-marke__zeile form,
.admin-marke__zeile form {
  margin: 0;
}

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

/* Die Farben der Academy: Apples Produkttöne, je Schritt einer. Sie machen aus
   einer Liste eine Strecke, ohne dass Text oder Karten laut werden. */
/* Der Anker soll unter der Kopfzeile landen, nicht darunter verschwinden. */
body.kitchen--onboarding .onboarding-karte {
  scroll-margin-top: 1rem;
}

body.kitchen--onboarding {
  --a1: #0071e3;
  --a2: #30b0c7;
  --a3: #8944ab;
  --a4: #e8489a;
  --a5: #e5484d;
  --a6: #f5a623;
  --a7: #34a853;
}

/* Academy (Onboarding) --------------------------------------------------- */

/*
 * Der Weg für neue Kolleginnen: eine Folge von Schritten, nicht ein Nachschlage-
 * werk. Deshalb untereinander und scrollbar — anders als die Stages, die auf eine
 * Bildschirmhöhe passen müssen. Auf dem Handy ist das die natürliche Form, und am
 * ersten Tag hat man das Handy in der Hand, nicht das Tablet.
 */
.onboarding {
  max-width: 46rem;
  padding-bottom: 4rem;
}

/* Begrüßung mit dem Logo daneben — auf dem Handy darunter. */
.onboarding-willkommen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  margin-bottom: 1.75rem;
}

.onboarding-willkommen__logo {
  display: block;
  width: auto;
  height: 3.2rem;
}

.onboarding-willkommen__gruss,
.onboarding-willkommen__zeile {
  display: block;
}

.onboarding-willkommen__titel {
  margin: 0 0 0.4rem;
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.onboarding-willkommen__text {
  margin: 0;
  max-width: 34rem;
  color: var(--mila-text-soft);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Fortschritt: die Antwort auf "wie viel liegt noch vor mir?" ganz oben. */
.onboarding-fortschritt {
  margin-bottom: 2rem;
  padding: 1.2rem 1.4rem 1.35rem;
  border: 1px solid var(--mila-line);
  border-radius: 18px;
  background: var(--mila-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.onboarding-fortschritt__kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  align-items: baseline;
  justify-content: space-between;
}

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

.onboarding-fortschritt__heim {
  color: inherit;
  text-decoration: none;
}

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

.onboarding-fortschritt__zahl {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.onboarding-fortschritt__balken {
  overflow: hidden;
  height: 10px;
  margin: 0.75rem 0 0.5rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
}

.onboarding-fortschritt__fuellung {
  display: block;
  width: var(--stand, 0%);
  height: 100%;
  border-radius: inherit;
  /* Der Balken läuft durch die Farben der Schritte — man sieht, wo man steht. */
  background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3), var(--a4));
  transition: width 320ms cubic-bezier(0.32, 0.72, 0, 1),
              height 320ms cubic-bezier(0.32, 0.72, 0, 1);
}

.onboarding-fortschritt--fertig .onboarding-fortschritt__fuellung {
  background: var(--mila-ok-line);
}

.onboarding-fortschritt__prozent {
  margin: 0;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
}

/* Nur für die Verwaltung sichtbar — deshalb bewusst als Hinweis, nicht als Teil
   der Seite, die eine neue Kollegin sieht. */
.onboarding-vorschau {
  margin: 0 0 1.25rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-size: 0.92rem;
}

.onboarding-liste {
  display: grid;
  gap: 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der Schritt füllt den Bildschirm: eine Sache auf einmal, wie auf einer Reise.
   Die Fläche trägt einen Hauch seiner Farbe — das macht aus einem Formular etwas,
   das man gerne liest. */
.onboarding-schritt {
  position: relative;
  overflow: hidden;
  padding: 1.8rem 1.6rem 1.8rem;
  border-radius: 24px;
  background:
    radial-gradient(130% 90% at 0% 0%,
                    color-mix(in srgb, var(--schrittfarbe, var(--mila-accent)) 9%, transparent),
                    transparent 62%),
    var(--mila-surface-soft);
}

.onboarding-schritt::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--schrittfarbe, var(--mila-accent));
}

.onboarding-schritt__kopf {
  margin-bottom: 1.3rem;
}

/* Die Nummer sitzt in der Titelzeile — gleiche Höhe, gleiche Mitte. */
.onboarding-schritt__titel {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.onboarding-schritt .onboarding-karte__nummer {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.1rem;
}

.onboarding-schritt__logo {
  display: block;
  width: auto;
  height: 1.8rem;
  margin-bottom: 0.5rem;
}

.onboarding-schritt__titel {
  margin: 0 0 0.35rem;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Lesbarkeit vor Dichte: begrenzte Zeilenlänge, viel Durchschuss. */
.onboarding-schritt__text {
  max-width: 34rem;
  font-size: 1.02rem;
  line-height: 1.65;
}

.onboarding-schritt__text > p {
  margin: 0 0 1rem;
}

/* Aufzählungen aus dem Text werden echte Listen — mit dem Punkt in der Farbe des
   Schritts. */
.schritt-liste {
  display: grid;
  gap: 0.55rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.schritt-liste li {
  position: relative;
  padding-left: 1.4rem;
}

.schritt-liste li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0.2rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--schrittfarbe, var(--mila-accent));
}

.schritt-liste p {
  margin: 0;
}

/* Adressen im Text werden zu Knöpfen in der Farbe des Schritts — App Store und
   Google Play stehen so als zwei sichtbare Wege da, nicht als blaue Zeile. */
.onboarding-schritt__text a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0.15rem 0.4rem 0.15rem 0;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--schrittfarbe, var(--mila-accent));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.onboarding-schritt__text .onboarding-dokument,
.onboarding-schritt__text .onboarding-anleitung {
  display: block;
  min-height: 52px;
  margin: 0;
  padding: 0.7rem 1rem;
  border: 0;
  border-radius: 14px;
  background: var(--mila-surface);
  color: inherit;
  font-weight: 400;
}

.onboarding-schritt__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1.6rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.onboarding-schritt__fuss form {
  margin: 0;
}

/* Vor und zurück: rechts außen, damit der Daumen sie trifft. */
.onboarding-weiter {
  display: flex;
  gap: 0.6rem;
  margin-left: auto;
}

/* Die Fläche für Startseiten: ein weicher Verlauf in Blau und Rosé auf hellem
   Grau. Sie kommt überall dort zum Einsatz, wo jemand ankommt statt arbeitet —
   Academy, Regie, Anmeldung. Eine Fläche für alle, damit backstage sich überall
   gleich anfühlt.

   Auf :root definiert, weil auch die Regie und die Anmeldemaske sie nutzen. */
.mila-flaeche {
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0, 113, 227, 0.07), transparent 60%),
    radial-gradient(120% 100% at 100% 0%, rgba(233, 72, 154, 0.07), transparent 55%),
    var(--mila-surface-soft);
}

/* Die Startseite der Academy: dieselbe Fläche, viel Luft, kurze Sätze. */
.onboarding-start {
  margin-bottom: 1.75rem;
  padding: 2rem 1.6rem 2.2rem;
}

.onboarding-start__logo {
  display: block;
  width: auto;
  height: 3rem;
  margin-bottom: 1.4rem;
}

.onboarding-start__titel {
  margin: 0 0 1.4rem;
  font-size: clamp(1.7rem, 6vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.onboarding-start__gruss {
  display: block;
}

/* Jeder Satz für sich, mit Luft dazwischen — das liest sich ruhiger als ein Block. */
.onboarding-start__satz {
  max-width: 34rem;
  margin: 0 0 0.9rem;
  color: var(--mila-text-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}

.onboarding-start__satz--gross {
  color: var(--mila-text);
  font-size: 1.15rem;
  font-weight: 600;
}

.onboarding-start__satz:last-child {
  margin-bottom: 0;
}

/* Der eine Knopf, mit dem die Reise beginnt. */
.onboarding-start__weg {
  margin: 0 0 0.9rem;
}

/* Direkt darunter der Hinweis, der beruhigt — zurückhaltend, denn er sagt nur,
   dass alles seinen Gang geht. */
/* Dieselbe Breite wie der Kasten darüber: Zwei Flächen unter- statt nebeneinander,
   die verschieden weit reichen, sehen aus wie ein Versehen. */
.onboarding-start__merk {
  max-width: 34rem;
  margin: 0 0 2rem;
  padding: 0.75rem 1rem;
  border-radius: 14px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
}

.onboarding-start__knopf {
  min-height: 56px;
  padding: 0.7rem 1.6rem;
  font-size: 1.05rem;
}

/* Die Tür: die Seite hinter dem persönlichen Link, bevor er benutzt wird.
 *
 * Sie hat genau eine Sache zu tun, und die steht als einziger Knopf darauf.
 * Über die volle Breite, weil daneben nichts liegt, mit dem er verwechselt
 * werden könnte — und weil sie fast immer auf einem Handy geöffnet wird. */
.onboarding-tuer {
  margin-top: 1rem;
}

.onboarding-tuer form {
  margin: 1.6rem 0 0;
}

.onboarding-tuer .onboarding-start__knopf {
  width: 100%;
  max-width: 22rem;
  justify-content: center;
}

/* Das Quiz: eine Frage je Block, großzügige Flächen zum Antippen. */
.quiz {
  margin-top: 1.2rem;
}

/* Frage, Antworten und Auflösung stehen im selben Raster: links eine feste Spalte
   für Nummer und Knopf, rechts der Text. Vorher richtete sich jede Zeile nach
   ihrem eigenen Inhalt — dadurch versprangen die Zeilen gegeneinander, sobald
   eine Antwort umbrach oder der Browser den Knopf anders groß setzte. */
.quiz-frage {
  --quiz-spalte: 1.5rem;
  --quiz-spalt: 0.6rem;

  margin: 0 0 1rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 0;
  border-radius: 16px;
  background: var(--mila-surface);
}

.quiz-frage--daneben {
  background: var(--mila-warn-bg);
}

.quiz-frage__text {
  display: grid;
  grid-template-columns: var(--quiz-spalte) 1fr;
  gap: 0 var(--quiz-spalt);
  padding: 0;
  margin: 0 0 0.5rem;
  font-weight: 600;
  line-height: 1.45;
}

.quiz-frage__nummer {
  color: var(--schrittfarbe, var(--mila-accent));
  font-weight: 700;
}

.quiz-antwort {
  display: grid;
  grid-template-columns: var(--quiz-spalte) 1fr;
  gap: 0 var(--quiz-spalt);
  align-items: start;
  /* Der Abstand kommt allein aus dem Innenrand, nicht aus einer Mindesthöhe:
     Sonst bekommt eine einzeilige Antwort unten Luft und eine zweizeilige nicht —
     die Zeilen sitzen dann in unterschiedlichem Rhythmus. Die ganze Zeile ist
     anklickbar, das Ziel bleibt also auch am Tablet groß genug. */
  padding: 0.6rem 0;
  line-height: 1.45;
  cursor: pointer;
}

/* Feste Größe statt Browservorgabe: Sonst ist die Zeile auf dem iPad anders hoch
   als am Rechner. Der Knopf sitzt auf der ersten Textzeile, nicht in der Mitte
   einer zweizeiligen Antwort. */
.quiz-antwort input[type="radio"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  justify-self: center;
  accent-color: var(--schrittfarbe, var(--mila-accent));
}

.quiz-frage__aufloesung {
  margin: 0.6rem 0 0;
  padding-left: calc(var(--quiz-spalte) + var(--quiz-spalt));
  color: var(--mila-warn-text);
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Am Ende der Reise: der Weg auf die Stages, zum Mitnehmen. */
.onboarding-handbuch {
  margin-top: 1.5rem;
  padding: 1.2rem 1.3rem 1.35rem;
  border-radius: 16px;
  background: var(--mila-surface-soft);
}

.onboarding-handbuch__titel {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.onboarding-handbuch__text {
  margin: 0 0 0.85rem;
  color: var(--mila-text-soft);
  line-height: 1.55;
}

.onboarding-handbuch__feld {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.onboarding-handbuch__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
}

.onboarding-handbuch__adresse {
  flex: 1;
  min-width: 12rem;
  min-height: 48px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 12px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 0.9rem;
}

/* Die Punkte sind der Weg: Man sieht, wo man steht, und kann springen. */
.onboarding-punkte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.onboarding-punkt {
  width: 1.5rem;
  height: 0.6rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
}

.onboarding-punkt--erledigt {
  background: var(--mila-ok-line);
}

.onboarding-punkt--hier {
  background: var(--schrittfarbe, var(--mila-accent));
  outline: 2px solid var(--mila-surface);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--schrittfarbe, var(--mila-accent));
}

/* Eine Karte je Schritt — dieselbe Sprache wie die Kacheln der Stage, nur breit
   statt quadratisch. */
.onboarding-karte {
  position: relative;
  overflow: hidden;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--mila-line);
  border-radius: 18px;
  background: var(--mila-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

/* Ein schmaler Streifen in der Farbe des Schritts — er macht aus der Liste eine
   Strecke, ohne dass die Karte laut wird. */
.onboarding-karte::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--schrittfarbe, var(--mila-accent));
}

.onboarding-karte--erledigt {
  border-color: rgba(52, 168, 83, 0.35);
  background: var(--mila-ok-bg);
}

.onboarding-karte--erledigt::before {
  background: var(--mila-ok-line);
}

/* Die ganze Karte ist der Knopf: große Fläche, auch mit dem Daumen zu treffen. */
.onboarding-karte__flaeche {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.onboarding-karte__mitte {
  display: grid;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.onboarding-karte__pfeil {
  flex: none;
  color: var(--mila-text-soft);
  font-size: 1.5rem;
  line-height: 1;
}

/* Die Nummer wird zum Haken, sobald der Schritt erledigt ist. */
.onboarding-karte__nummer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  background: var(--schrittfarbe, var(--mila-accent));
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.onboarding-karte--erledigt .onboarding-karte__nummer {
  background: var(--mila-ok-line);
  color: #fff;
}

.onboarding-karte__titel {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Genau eine Zeile: Der Rest steht im Fenster. */
.onboarding-karte__anriss {
  overflow: hidden;
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.onboarding-karte__marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.onboarding-marke {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.onboarding-marke--erledigt {
  background: var(--mila-ok-line);
  color: #fff;
}

.onboarding-marke--begonnen {
  background: var(--mila-warn-line);
  color: #fff;
}

.onboarding-marke--rolle {
  background: color-mix(in srgb, var(--schrittfarbe, var(--mila-accent)) 12%, #fff);
  color: var(--schrittfarbe, var(--mila-accent));
}

.onboarding-karte__text {
  margin: 0.8rem 0 0;
  color: var(--mila-text);
  line-height: 1.55;
}

.onboarding-karte__text p {
  margin: 0 0 0.5rem;
}

/* Das Lesefenster — dieselbe Sprache wie das Anleitungsfenster der Stage. */
.lesefenster {
  width: min(46rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--mila-surface);
  color: var(--mila-text);
  box-shadow: var(--mila-shadow-lifted);
}

.lesefenster::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.lesefenster__inhalt {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 3rem);
}

.lesefenster__kopf {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.4rem 1.5rem 0.75rem;
}

.lesefenster__titel {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.lesefenster__schliessen {
  flex: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font: inherit;
  font-size: 1.1rem;
  cursor: pointer;
}

/* Nur der Text scrollt — Titel und Knopf bleiben stehen. */
.lesefenster__text {
  overflow-y: auto;
  padding: 0 1.5rem 0.5rem;
  line-height: 1.6;
}

.lesefenster__text p {
  margin: 0 0 0.8rem;
}

.lesefenster__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.75rem 1.5rem 1.4rem;
}

.lesefenster__fuss form {
  margin: 0;
}

/* Adressen im Text werden zu Knöpfen in der Farbe des Schritts — App Store und
   Google Play stehen so als zwei sichtbare Wege da, nicht als blaue Zeile. */
.lesefenster__text a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0.15rem 0.4rem 0.15rem 0;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--schrittfarbe, var(--mila-accent));
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.lesefenster__text .onboarding-dokument,
.lesefenster__text .onboarding-anleitung {
  display: block;
  min-height: 52px;
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 14px;
  background: var(--mila-surface-soft);
  color: inherit;
  font-weight: 400;
}

.onboarding-karte__medien {
  margin: 0.9rem 0 0;
}

/* Dokumente und Anleitungen: großflächig antippbar, auch mit dem Daumen. */
.onboarding-dokumente,
.onboarding-anleitungen {
  display: grid;
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.onboarding-dokument,
.onboarding-anleitung {
  display: block;
  min-height: 52px;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface-soft);
  color: inherit;
  text-decoration: none;
}

.onboarding-dokument:hover,
.onboarding-anleitung:hover {
  border-color: var(--schrittfarbe, var(--mila-accent));
}

.onboarding-dokument__name,
.onboarding-anleitung__name {
  display: block;
  font-weight: 600;
}

.onboarding-dokument__hinweis,
.onboarding-anleitung__kategorie {
  display: block;
  font-size: 0.78rem;
  color: var(--mila-text-soft);
}

.onboarding-anleitung__kategorie {
  color: var(--kategorie-farbe, var(--mila-text-soft));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.onboarding-karte__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-top: 1rem;
}

.onboarding-karte__fuss form {
  margin: 0;
}

.onboarding-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 48px;
  padding: 0.55rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--schrittfarbe, var(--mila-accent));
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.onboarding-knopf--still {
  border-color: var(--mila-line);
  background: var(--mila-surface);
  color: var(--mila-text);
}

.onboarding-knopf--erledigen {
  background: var(--mila-ok-line);
}

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

.onboarding-upload__beschriftung {
  width: 100%;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.onboarding-upload__feld {
  max-width: 100%;
  font: inherit;
  font-size: 0.9rem;
}

/* Das Antwortfeld: der einzige Schritt, bei dem etwas zurückkommt.
 *
 * Volle Breite und vier Zeilen hoch, damit man sieht, dass hier mehr erwartet
 * wird als ein Wort — an welchen Tagen jemand kann, ist selten eine Zeile. Auf
 * dem Handy wird zuerst getippt, deshalb Fingerhöhe und 16 Pixel Schrift: Alles
 * darunter lässt iOS beim Antippen hineinzoomen. */
.onboarding-antwort {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  width: 100%;
}

.onboarding-antwort__beschriftung {
  width: 100%;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.onboarding-antwort__feld {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-bg);
  color: var(--mila-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  resize: vertical;
}

.onboarding-antwort__feld:focus-visible {
  outline: 0;
  border-color: var(--mila-accent);
  box-shadow: 0 0 0 3px rgba(15, 77, 64, 0.15);
}

.onboarding-nachweis {
  width: 100%;
  margin: 0;
}

.onboarding-nachweis__name {
  display: block;
  font-weight: 600;
  color: var(--mila-ok-text);
}

.onboarding-nachweis__hinweis {
  display: block;
  font-size: 0.82rem;
  color: var(--mila-text-soft);
}

/* Projekte ---------------------------------------------------------------- */

.projekt {
  padding: 1.8rem 1.6rem;
  border-radius: 24px;
  background: var(--mila-surface-soft);
}

.projekt__marke {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.projekt__titel {
  margin: 0.2rem 0 0.6rem;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.projekt__text {
  margin: 0 0 1rem;
  max-width: 62ch;
  line-height: 1.6;
  color: var(--mila-text-soft);
}

.projekt__stand {
  margin-top: 1.2rem;
}

.projekt__zahl {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.projekt__balken {
  height: 10px;
  border-radius: 999px;
  background: var(--mila-line);
  overflow: hidden;
}

.projekt__balken-fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mila-text);
  transition: width 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.projekt__frist {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--mila-text-soft);
}

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

.projekt__fertig {
  margin: 1.2rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--mila-ok-bg);
  color: var(--mila-ok-text);
  font-weight: 600;
}

.anforderungen {
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.9rem;
}

.anforderung {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: var(--mila-surface);
  border: 1px solid var(--mila-line);
}

/* In der Übersicht ist die ganze Karte der Weg hinein — deshalb trägt sie den
   Innenrand, nicht das Listenfeld darum. Ein Link mitten im Text sähe aus wie
   eine Fußnote und wäre am Tablet kaum zu treffen. */
.anforderungen .anforderung {
  /* Kein Raster mehr auf dem Listenfeld: Das Raster gehört der Karte darin,
     sonst säße sie in der schmalen Spalte für den Haken. */
  display: block;
  padding: 0;
  transition: border-color 140ms ease, transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}

.anforderung__karte {
  display: grid;
  grid-template-columns: 2rem 1fr auto;
  align-items: center;
  gap: 0 0.9rem;
  padding: 1rem 1.2rem;
  color: inherit;
  text-decoration: none;
}

.anforderung__karte:hover {
  color: inherit;
}

.anforderungen .anforderung:hover {
  border-color: var(--mila-text-soft);
  transform: translateY(-1px);
}

.anforderung__karte .anforderung__inhalt {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.anforderung__karte .anforderung__titel {
  display: block;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--mila-text);
}

/* Der Stand in einer Zeile: Was da ist, steht als Wert; was fehlt, als ruhiger
   Hinweis. Beides in derselben Zeile, damit die Karten gleich hoch bleiben. */
.anforderung__karte .anforderung__stand {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--mila-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anforderung--erfuellt .anforderung__karte .anforderung__stand {
  color: var(--mila-ok-text);
}

.anforderung__pfeil {
  color: var(--mila-text-soft);
  font-size: 1.4rem;
  line-height: 1;
  transition: transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
}

.anforderungen .anforderung:hover .anforderung__pfeil {
  transform: translateX(3px);
  color: var(--mila-text);
}

/* Was erledigt ist, tritt zurück statt zu leuchten: Der Blick soll bei dem
   hängen bleiben, was noch fehlt. */
.anforderung--erfuellt {
  background: var(--mila-surface);
  border-color: transparent;
}

.anforderung__haken {
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--mila-text-soft);
}

.anforderung--erfuellt .anforderung__haken {
  color: var(--mila-ok-line);
}

.anforderung__titel {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.4;
}

.anforderung__marke {
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font-size: 0.75rem;
  font-weight: 600;
  vertical-align: middle;
}

.anforderung__text {
  margin: 0.35rem 0 0;
  color: var(--mila-text-soft);
  line-height: 1.55;
}

.anforderung__stand,
.anforderung__vorlage {
  margin: 0.6rem 0 0;
}

.anforderung__stand {
  font-weight: 600;
}

.anforderung__geprueft {
  margin-left: 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--mila-text-soft);
}

.anforderung__form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Großzügiger als anderswo: Hier stehen Knöpfe, die etwas auslösen, direkt
     neben Knöpfen, die weiterblättern. Zu eng nebeneinander greift man daneben. */
  gap: 0.8rem;
  margin-top: 1rem;
}

/* Der Weg nach vorn gehört nicht zum Formular darüber — er braucht Luft, sonst
   klebt "Weiter" am "Hochladen". */
.onboarding-schritt .anforderung__inhalt--allein + .onboarding-weiter,
.onboarding-schritt .anforderung__inhalt--allein {
  margin-top: 1.6rem;
}

.onboarding-schritt .onboarding-weiter {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--mila-line);
  gap: 0.8rem;
}

.anforderung__beschriftung {
  flex-basis: 100%;
  font-size: 0.9rem;
  color: var(--mila-text-soft);
}

.anforderung__feld {
  flex: 1 1 16rem;
  min-width: 0;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: 10px;
  background: var(--mila-bg);
  font: inherit;
  color: var(--mila-text);
}

/* Zwei Gruppen im Wegweiser: Küche, Bar und Wiki sind Nachschlagewerke und
   stehen zusammen auf einer Fläche. Academy und Projekte gehören der einzelnen
   Person — sie merken sich ihren Stand — und stehen daneben, mit Abstand und
   ohne Fläche. Der Unterschied soll auffallen, ohne zu schreien. */
.wegweiser__liste--eigenes {
  background: none;
  padding-left: 0;
  padding-right: 0;
}

/* Die persönlichen Bereiche stehen abgesetzt, aber ohne Rahmen: Ein Rahmen las
   sich wie "ausgewählt". Der Abstand allein trennt genug. */
.wegweiser__liste--eigenes .wegweiser__eintrag {
  margin-left: 0.25rem;
}

/* Der Eintrag, auf dem man steht. Weiter oben bekommt er dunklen Grund und weiße
   Schrift; hier wird der Grund hell — die Schrift muss also mit, sonst steht
   Weiß auf Weiß.

   Genau das war der Fall: Auf der Academy verschwand "Academy", auf den Projekten
   "Projekte". Es sah aus, als blendeten die beiden sich gegenseitig aus — dabei
   fehlte nur die Schriftfarbe. */
.wegweiser__liste--eigenes .wegweiser__eintrag--hier {
  border-color: transparent;
  background: var(--mila-surface);
  color: var(--mila-text);
}

/* Wiki: die Leseform ------------------------------------------------------- */

/*
 * Eine Anleitung am Herd und eine Hausregel im Wiki sehen gleich aus, sind aber
 * nicht dasselbe. Am Herd steht jeder Schritt auf einer eigenen weißen Fläche mit
 * Rahmen — damit man unter Zeitdruck die Zeile wiederfindet, bei der man war. Im
 * Wiki liest man im Sitzen, und dieselbe Form wird dort zu einem Formular: vier
 * Kästchen auf grauem Grund, in einer halbbreiten Spalte, daneben viel Weiß.
 *
 * Hier also das Gegenteil: keine Kästchen, keine graue Fläche, eine Zeilenlänge
 * zum Lesen und Luft zwischen den Punkten. Was bleibt, ist Text — und der darf
 * größer sein.
 */
/* Erkennbar an der Form des Inhalts, nicht an der Seite: Eine Aufzählung ist eine
   Aufzählung, ob man sie im Wiki liest oder an der Bar aufschlägt. */
.recipe-detail__spalte:first-child .recipe-section--punkte:first-child {
  padding: 0;
  border-radius: 0;
  background: none;
}

.recipe-section--punkte .instruction-list {
  /* Rund 62 Zeichen: die Länge, bei der das Auge den Zeilenanfang wiederfindet,
     ohne zu suchen. */
  max-width: 34rem;
}

/* Am Monitor zwei Spalten statt einer halbleeren Seite.
 *
 * Eine Zeile über die ganze Breite eines 27-Zöllers liest niemand — deshalb die
 * Lesebreite oben. Nur blieb daneben die halbe Seite weiß. Zwei Spalten lösen
 * beides: Der Text behält sein Maß, und die Fläche wird benutzt.
 *
 * Erst ab 64rem, denn darunter würde eine zweite Spalte schmaler als das Maß. */
@media (min-width: 64rem) {
  .recipe-section--punkte .instruction-list {
    max-width: none;
    columns: 2;
    column-gap: 3.5rem;
  }

  /* Kein Punkt wird zwischen zwei Spalten zerrissen, und keine Zwischenüberschrift
     bleibt allein am Fuß einer Spalte zurück. */
  .recipe-section--punkte .instruction-list__item {
    break-inside: avoid;
  }

  .recipe-section--punkte .instruction-list__abschnitt {
    break-inside: avoid;
    break-after: avoid;
  }
}

.recipe-detail .recipe-section--punkte .instruction-list__item {
  margin-bottom: 0;
  padding: 0.5em 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 0.85rem;
  font-size: 1.15rem;
  line-height: 1.7;
}

/* Der Punkt tritt ganz zurück: Er gliedert, er zählt nicht mit. */
.recipe-detail .recipe-section--punkte .instruction-list__number {
  width: auto;
  height: auto;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--kategorie-farbe, var(--mila-text-soft));
}

/* Ein Absatz, der eine Regel erklärt, braucht Luft davor — sonst kleben vier
   Sätze aneinander und keiner davon steht für sich. */
.recipe-section--punkte .instruction-list__abschnitt {
  margin-top: 1.6rem;
}

/* Die Einleitung: der Satz, mit dem man in den Text hineingeht. Ruhiger als die
   Überschrift, größer als die Punkte darunter — sie führt hin, sie zählt nicht auf. */
.recipe-detail__lead {
  max-width: 34rem;
  margin: 0.7rem 0 0;
  color: var(--mila-text-lead, var(--mila-text-soft));
  font-size: 1.2rem;
  line-height: 1.65;
}

/* Wiki: die eigene Leseseite ------------------------------------------------ */

/* Das Wiki ist die ruhige Seite von backstage: Man liest hier, im Laden am
   Tablet und zu Hause am Handy. Deshalb kein Kachelraster, keine feste
   Bildschirmhöhe und keine Farbflächen — nur Text, Abstand und Struktur. */
body.kitchen--wiki {
  display: block;
  height: auto;
  overflow: visible;
}

/* Am Handy randlos bis fast an die Kante, auf dem Monitor gedeckelt: Text, der
   über 90 Zeichen läuft, liest niemand mehr gern. Die Grenze steigt mit der
   Spaltenzahl im Verzeichnis mit. */
.wiki {
  max-width: 96rem;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 4rem;
}

.wiki__kopf {
  margin-bottom: 2rem;
}

.wiki__titel {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
}

.wiki__lead {
  margin: 0.5rem 0 1.2rem;
  max-width: 46rem;
  color: var(--mila-text-soft);
  line-height: 1.6;
}

.wiki__suche {
  display: flex;
  gap: 0.5rem;
  max-width: 32rem;
}

.wiki__suchfeld {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: 12px;
  background: var(--mila-bg);
  font: inherit;
  font-size: 1rem;
  color: var(--mila-text);
}

.wiki__suchknopf {
  padding: 0.7rem 1.1rem;
  border: 0;
  border-radius: 12px;
  background: var(--mila-text);
  color: var(--mila-bg);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.wiki__treffer,
.wiki__leer {
  margin: 0 0 1.5rem;
  color: var(--mila-text-soft);
}

/* Die Themen untereinander, nicht nebeneinander: Ein Verzeichnis liest man von
   oben nach unten.
 *
 * Am Handy eine Spalte — alles andere zwängt Text in Schluchten. Ab Tablet zwei,
 * ab großem Monitor drei: Sonst wird die Seite auf 27 Zoll zur Endlosrolle mit
 * einem Meter Weiß daneben. Die Spalten füllen sich von selbst, weil jedes Thema
 * als Ganzes umbricht. */
/* Die Fächer stehen nebeneinander wie im Regal — ohne Lücke dazwischen.
 *
 * Als Raster hatte jede Reihe die Höhe ihres längsten Fachs: Neben "Personal
 * Grundsätze" mit neun Seiten stand "Öffnen & Schließen" mit zweien und darunter
 * eine Handbreit Weiß. Als Spalten fließt ein kurzes Fach weiter und das nächste
 * rückt nach. break-inside hält jedes Fach zusammen. */
.wiki__verzeichnis {
  columns: 1;
  column-gap: 3rem;
}

.wiki-thema {
  break-inside: avoid;
  margin-bottom: 1.6rem;
}

@media (min-width: 48rem) {
  .wiki__verzeichnis {
    columns: 2;
  }
}

@media (min-width: 90rem) {
  .wiki__verzeichnis {
    columns: 3;
  }
}

/* Eine Kapitelüberschrift, kein Systemetikett.
 *
 * Hier standen Großbuchstaben, weit gesperrt, klein und unterstrichen — die
 * Schreibweise einer Bedienoberfläche. In einem Regal steht der Name des Fachs
 * einfach da: groß genug zum Überfliegen, in der Farbe des Themas, ohne
 * Unterstreichung. Der feine Strich darunter trennt, mehr soll er nicht. */
.wiki-thema__titel {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--kategorie-farbe) 35%, transparent);
  color: var(--kategorie-farbe);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Der Link erbt die Farbe der Überschrift, statt das Blau des Browsers
   mitzubringen — sonst stand ein blauer Name über einem grünen Strich. */
.wiki-thema__link {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .wiki-thema__link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

.wiki-thema__zahl {
  margin-left: auto;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0;
}

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

/* Ein Eintrag ist eine Fläche, keine Zeile.
 *
 * Vorher: Name links, "4 Schritte" rechts, dazwischen Leere — die Zeile maß
 * etwas, das niemanden interessiert, und ließ die Breite ungenutzt. Jetzt steht
 * unter dem Namen der erste Satz des Artikels, über die ganze Breite. Man sieht
 * im Verzeichnis, worum es geht, statt erst hineinzuklicken.
 *
 * Zuerst fürs Handy: volle Breite, Fingerhöhe, keine Schwebezustände. Alles
 * Weitere kommt erst, wenn Platz dafür da ist. */
/* Dieselben Buchrücken wie im Regal daneben: ein Hauch der Themenfarbe unter
   jedem Eintrag. Hier standen Trennlinien zwischen den Zeilen — das sah aus wie
   eine Tabelle, und eine Tabelle ist kein Regal. */
.wiki-liste__zeile + .wiki-liste__zeile {
  margin-top: 2px;
}

.wiki-liste .wiki-liste__link {
  background: color-mix(in srgb, var(--kategorie-farbe) 8%, transparent);
}

/* Eine Zeile je Eintrag. Fingerhoch genug zum Antippen, eng genug, dass ein
   Thema mit acht Seiten noch als Block zu erfassen ist. */
.wiki-liste__link {
  display: block;
  padding: 0.55rem 0.2rem;
  color: var(--mila-text);
  text-decoration: none;
  /* Der farbige Faden der Kategorie — unsichtbar, bis man den Eintrag anfasst. */
  border-left: 3px solid transparent;
  border-radius: 10px;
  transition: background 140ms ease, border-color 140ms ease, padding-left 140ms ease;
}

.wiki-liste__name {
  display: block;
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

/* Auf der Themenseite steht unter dem Namen der erste Satz des Artikels — bei
   neun Einträgen eine Hilfe, im Verzeichnis mit über fünfzig wäre es eine Wand.
 *
 * Der Name führt, der Satz erklärt. Ungestylt stand es andersherum: Der Satz
 * erbte die 18 Pixel des Grundtexts, der Name hatte 16,3 — die Überschrift war
 * kleiner als ihre eigene Erklärung. */
.wiki-liste--thema .wiki-liste__name {
  font-weight: 700;
}

.wiki-liste__lead {
  display: block;
  margin-top: 0.15rem;
  color: var(--mila-text-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.wiki-liste--thema .wiki-liste__link {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

/* Am Zeigegerät darf der Eintrag antworten. Am Tablet in der Küche bleibt er
   still: Dort löst jede Berührung den Schwebezustand mit aus und er hinge fest. */
@media (hover: hover) {
  .wiki-liste .wiki-liste__link:hover {
    padding-left: 0.7rem;
    border-left-color: var(--kategorie-farbe);
    background: color-mix(in srgb, var(--kategorie-farbe) 16%, transparent);
  }
}

.wiki-liste__link:focus-visible {
  outline: 2px solid var(--kategorie-farbe);
  outline-offset: 2px;
}

/* Der Artikel: schmale Spalte, großzügige Zeilenhöhe. Alles, was hier steht,
   wird gelesen — nicht überflogen. */
.wiki-artikel {
  max-width: 44rem;
}

/* Das Regal ----------------------------------------------------------------
 *
 * Alles, was im Wiki steht, neben dem Text. Beim Lesen sieht man, was daneben
 * liegt, und springt weiter, ohne zurück ins Verzeichnis zu gehen.
 *
 * Zuerst fürs Handy: Dort steht das Regal unter dem Artikel. Man liest erst und
 * blättert dann — eine Spalte daneben nähme nur die halbe Zeilenbreite weg.
 * Ab 64rem, also am iPad quer und am Rechner, steht es links daneben und bleibt
 * beim Scrollen stehen. */
.wiki-regal {
  margin-top: 2.5rem;
  border-top: 1px solid var(--mila-line);
}

/* Der Griff, hinter dem das Regal am Handy liegt.
 *
 * Eine Zeile in Fingerhöhe, mit dem Winkel rechts. Das eigene Dreieck des
 * Browsers steht links, in wechselnder Größe und Farbe je Gerät — hier soll die
 * Zeile aussehen wie die Einträge darunter, nicht wie ein Systemelement. */
.wiki-regal__griff {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 44px;
  padding: 0.7rem 0.2rem;
  color: var(--mila-text);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  /* Beide Schreibweisen: Safari versteckt das Dreieck über das Pseudoelement,
     die übrigen über list-style. */
  list-style: none;
}

.wiki-regal__griff::-webkit-details-marker {
  display: none;
}

.wiki-regal__griff::after {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--mila-text-soft);
  border-bottom: 2px solid var(--mila-text-soft);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 160ms ease;
}

.wiki-regal[open] .wiki-regal__griff::after {
  transform: translateY(2px) rotate(-135deg);
}

.wiki-regal__griff:focus-visible {
  outline: 2px solid var(--mila-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.wiki-regal__inhalt {
  padding-top: 0.6rem;
}

/* Die Suche steht im Regal, nicht nur auf der Startseite: Wer mitten im Lesen
   merkt, dass er etwas anderes sucht, soll nicht erst zurückblättern. */
.wiki-regal__suche {
  margin-bottom: 1.4rem;
}

.wiki-regal__suchfeld {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 12px;
  background: var(--mila-bg);
  font: inherit;
  /* 16 Pixel, sonst zoomt iOS beim Antippen in die Seite hinein. */
  font-size: 16px;
}

.wiki-regal__suchfeld:focus-visible {
  outline: 0;
  border-color: var(--mila-accent);
  box-shadow: 0 0 0 3px rgba(15, 77, 64, 0.15);
}

.wiki-regal__kopf {
  margin: 0 0 1rem;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
}

.wiki-regal__thema + .wiki-regal__thema {
  margin-top: 1.6rem;
}

/* Dieselbe Schreibweise wie im Verzeichnis: der Name des Fachs, nicht sein
   Etikett. Nur kleiner, weil er hier neben dem Text steht und nicht über ihm. */
.wiki-regal__titel {
  margin: 0 0 0.45rem;
  color: var(--kategorie-farbe);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

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

.wiki-regal__thema-link {
  color: inherit;
  text-decoration: none;
}

/* Jeder Eintrag auf einem Hauch seiner Themenfarbe — wie die Rücken einer Reihe
   im Regal. Acht Prozent: genug, dass die Reihe als Block zusammengehört, wenig
   genug, dass der Text darauf ruhig bleibt. */
.wiki-regal__link {
  display: block;
  margin-bottom: 2px;
  padding: 0.42rem 0.6rem;
  border-left: 2px solid transparent;
  border-radius: 6px;
  background: color-mix(in srgb, var(--kategorie-farbe) 8%, transparent);
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
}

/* Wo man steht, trägt die Farbe des Themas — dieselbe Auskunft, die oben im
   Artikel der Faden neben der Überschrift gibt. */
.wiki-regal__link--hier {
  border-left-color: var(--kategorie-farbe);
  background: color-mix(in srgb, var(--kategorie-farbe) 20%, transparent);
  color: var(--mila-text);
  font-weight: 600;
}

@media (hover: hover) {
  .wiki-regal__link:hover {
    background: color-mix(in srgb, var(--kategorie-farbe) 16%, transparent);
    color: var(--mila-text);
  }
}

@media (min-width: 64rem) {
  /* Regal links, Text rechts. Das Regal bekommt eine feste Spalte, der Artikel
     den Rest — und behält darin sein Lesemaß. */
  .wiki--mit-regal {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 0 4rem;
    align-items: start;
  }

  .wiki--mit-regal .wiki-artikel {
    order: 2;
  }

  .wiki-regal {
    order: 1;
    position: sticky;
    /* Etwas unterhalb der Kopfzeile, damit es nicht daran klebt. */
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Hier ist Platz für die Spalte — der Griff hätte nichts zu tun. Aufgeklappt
     wird sie vom Regalcontroller, weil ein <details> seinen Zustand nicht aus
     einer Medienabfrage beziehen kann. */
  .wiki-regal__griff {
    display: none;
  }

  .wiki-regal__inhalt {
    padding-top: 0;
  }
}

.wiki-artikel__weg {
  margin: 0 0 0.8rem;
  font-size: 0.9rem;
  color: var(--mila-text-soft);
}

.wiki-artikel__weg a {
  color: inherit;
}

.wiki-artikel__titel {
  margin: 0 0 0.6rem;
  font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.wiki-artikel__lead {
  margin: 0 0 1.5rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--mila-text-soft);
}

.wiki-artikel__bild {
  margin: 0 0 1.8rem;
}

.wiki-artikel__bild img {
  width: 100%;
  border-radius: 16px;
}

.wiki-artikel__material {
  margin-bottom: 1.8rem;
}

.wiki-artikel__material h2,
.wiki-artikel__abschnitt,
.wiki-artikel__hinweise h2 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.wiki-artikel__abschnitt {
  margin-top: 1.8rem;
}

.wiki-schritte {
  margin: 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.7rem;
  line-height: 1.65;
}

.wiki-schritte li::marker {
  color: var(--kategorie-farbe);
  font-weight: 700;
}

.wiki-artikel__hinweise {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  border-radius: 14px;
  background: var(--mila-surface);
}

.wiki-artikel__hinweise ul {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.5rem;
  line-height: 1.6;
}

.wiki-artikel__hinweise strong {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.3rem;
}

/* Weiter im Thema: zwei Knöpfe am Fuß, damit man beim Lesen nicht ins
   Verzeichnis zurückmuss. */
.wiki-artikel__weiter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--mila-line);
}

.wiki-weiter {
  flex: 1 1 14rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  color: var(--mila-text);
  text-decoration: none;
}

.wiki-weiter:hover {
  border-color: var(--kategorie-farbe);
}

.wiki-weiter--vor {
  text-align: right;
}

.wiki-weiter__wort {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.wiki-weiter__name {
  font-weight: 600;
}

/* Das Wiki am Handy ---------------------------------------------------------
 *
 * Es wird fast nur am Handy gelesen — im Bus vor der Schicht, auf dem Sofa am
 * Abend davor. Das Tablet in der Küche zeigt Anleitungen, nicht Hausregeln.
 * Deshalb ist der kleine Bildschirm hier nicht der Sonderfall, sondern das Maß.
 *
 * Was hier steht, nimmt der Umgebung Platz weg und gibt ihn dem Text: kürzerer
 * Kopf, schmalerer Rand, Zeilen in Fingerhöhe. Die Schriftgrößen bleiben — was
 * man liest, soll lesbar bleiben. */
@media (max-width: 640px) {
  /* Die Kopfzeile klebt oben und kostet auf jedem Bildschirm dieselben Pixel.
     Die Wortmarke richtet sich sonst auf die Regie aus (min-height 3.875rem) —
     eine Ausrichtung, die es am Handy nicht zu halten gibt. */
  body.kitchen--wiki .kitchen-header {
    padding: 0.5rem 1rem;
  }

  body.kitchen--wiki .kitchen-logo {
    min-height: 0;
  }

  body.kitchen--wiki .kitchen-logo__mark {
    font-size: 1.3rem;
  }

  /* 44 Pixel sind die Fingerbreite, auf die Apple seine eigenen Bedienelemente
     legt. Die 52 der Küche sind für Hände gedacht, die einen Lappen halten. */
  body.kitchen--wiki .kitchen-header__tools .werkzeuge__knopf {
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.7rem;
  }

  /* Der Name am Konto verschwindet, das Symbol bleibt.
   *
   * Er ist der Grund, warum die Kopfzeile am Handy dreizeilig war: Neben der
   * Wortmarke passte "probe-regie@mila.test" nicht mehr, also rutschten die
   * Werkzeuge in eine eigene Zeile und der Wegweiser in eine dritte. Wer sein
   * Handy in der Hand hält, weiß ohnehin, wer angemeldet ist — und im Menü
   * dahinter steht es weiterhin. */
  body.kitchen--wiki .kitchen-header__tools .konto__name {
    display: none;
  }

  .wiki {
    padding: 1.1rem 1rem 3.5rem;
  }

  .wiki__kopf {
    margin-bottom: 1.25rem;
  }

  .wiki__lead {
    margin: 0.4rem 0 0.9rem;
  }

  /* Der Knopf tritt zurück, damit vom Feld daneben mehr als ein halber Satz
     sichtbar bleibt. */
  .wiki__suchknopf {
    padding: 0.7rem 0.85rem;
  }

  .wiki-thema {
    margin-bottom: 1.2rem;
  }

  /* Eine Zeile, die man im Gehen trifft. Vorher maß sie 39 Pixel — knapp unter
     dem, was ein Daumen sicher erwischt. Im Regal waren es 34.
   *
   * Untereinander, nicht nebeneinander: Auf der Themenseite steht unter dem
   * Namen noch der erste Satz. Als Reihe schnürte das den Namen in eine Spalte
   * von neunzig Pixeln — "Schichtplan und Zeiterfassung" stand dort auf drei
   * Zeilen neben einem Fließtext. */
  .wiki-liste__link,
  .wiki-regal__link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    padding: 0.5rem 0.65rem;
  }
}

/* Ein Sprung aus dem Artikel zurück ins Fach ("Wiki › Personal Grundsätze")
   landete unter der klebenden Kopfzeile: Die Überschrift des Themas stand
   dahinter, und man sah mitten in eine Liste. */
.wiki-thema {
  scroll-margin-top: 6rem;
}

/* Das Zeichen eines fremden Veranstalters in der Kopfzeile: Ein Projekt kann
   unter anderem Namen laufen als der eigene Betrieb. */
.kitchen-logo__zeichen {
  height: 1.9rem;
  width: auto;
  margin-right: 0.6rem;
}

/* Aufzählung statt Reihenfolge: Der Punkt tritt zurück, wo eine Nummer eine
   Reihenfolge behaupten würde, die es nicht gibt. */
.instruction-list--punkte .instruction-list__number {
  background: none;
  color: var(--mila-text-soft);
  font-size: 1.3rem;
  line-height: 1;
}

/* Für wen ein Einsatz läuft — über dem Gruß, klein und ruhig. */
.onboarding-start__veranstalter {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

/* Wo der Produktname die Wortmarke ist — auf den Projektseiten, die zu einem
   fremden Unternehmen gehören können —, trägt er die Größe der Wortmarke, aber
   seine eigene Schreibweise: back tritt zurück, stage steht vorn. */
.kitchen-logo__mark--produkt .produkt-signatur__marke {
  font-size: inherit;
  letter-spacing: -0.02em;
}

/* Eine Auswahl unter zwei oder drei Möglichkeiten: als Knöpfe nebeneinander,
   nicht als Klappliste. Man sieht damit sofort, worunter man wählt. */
.anforderung__auswahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.anforderung__option {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  cursor: pointer;
}

.anforderung__option:has(input:checked) {
  border-color: var(--mila-text);
  background: var(--mila-surface);
  font-weight: 600;
}

/* Mehrere Angaben in einem Schritt: untereinander, jedes mit seiner
   Beschriftung. Fünf Bildschirme für fünf Zeilen wären fünf Klicks zu viel. */
.angabenfelder {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  margin-bottom: 0.4rem;
}

.angabenfeld__name {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--mila-text-soft);
}

.angabenfeld .anforderung__feld {
  width: 100%;
}

/* Schrittfotos ------------------------------------------------------------- */

/* Die Handgriffe als Folge von Fotos, dort wo sonst das Video sitzt. Klein sind
   sie ein Blick zur Kontrolle; groß füllen sie die Fläche, auf der man arbeitet. */
.schrittbilder {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 0;
}

.schrittbilder__buehne {
  position: relative;
  flex: 1;
  min-height: 0;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mila-surface);
  cursor: zoom-in;
}

/* Alle Bilder liegen übereinander — nur das aktuelle ist zu sehen. So springt
   beim Blättern nichts, und das nächste ist schon geladen. */
.schrittbilder__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}

.schrittbilder__bild.is-hier {
  opacity: 1;
}

.schrittbilder__zeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  flex: none;
}

.schrittbilder__pfeil {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

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

.schrittbilder__stand {
  min-width: 3.5rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--mila-text-soft);
}

/* Groß: über allem, mit großen Zielen für den Finger. Das Bild wird dabei ganz
   gezeigt statt beschnitten — bei einem Handgriff zählt der Rand. */
.schrittbilder.is-gross {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: clamp(1rem, 3vw, 2rem);
  background: rgb(0 0 0 / 0.92);
}

.schrittbilder.is-gross .schrittbilder__buehne {
  aspect-ratio: auto;
  border-radius: 0;
  background: none;
  cursor: default;
}

.schrittbilder.is-gross .schrittbilder__bild {
  object-fit: contain;
}

.schrittbilder.is-gross .schrittbilder__stand {
  color: rgb(255 255 255 / 0.85);
}

.schrittbilder.is-gross .schrittbilder__pfeil {
  width: 3.4rem;
  height: 3.4rem;
  border-color: rgb(255 255 255 / 0.35);
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font-size: 1.7rem;
}

.schrittbilder__zu {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  padding: 0.5rem 1rem;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.1);
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

/* Das Geschirr mit Foto — groß genug, um es aus einem Meter zu erkennen.
 *
 * Als Daumennagel im Chip stand es zuerst da, und genau das half nicht: Wer
 * wissen muss, welches von sieben Gläsern gemeint ist, erkennt es nicht in
 * zwei Zentimetern. Dieselbe Größe wie früher die Flaschenfotos, aus demselben
 * Grund. */
.gedeckbilder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 0 0 0.7rem;
  padding: 0;
  list-style: none;
}

.gedeckbild {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  /* Mit --dichte, wie jedes andere Bild in der Anleitung: Der Controller stellt
     bei langen Anleitungen alles enger, damit nichts gescrollt werden muss. Ein
     Block mit fester Höhe machte diese Rechnung zunichte — er blieb stehen,
     während die Zeilen schrumpften, und am Ende gab der Controller auf und ließ
     scrollen. Wer dann nicht wischt, sieht die letzten Zutaten nicht. */
  width: calc(108px * var(--dichte, 1));
  /* Antippbar: Ein Zeigefinger auf einem Bild, das sich vergrößern lässt. */
  cursor: zoom-in;
}

/* Der Rahmen trägt die Lupe, nicht die Kachel: Sonst säße sie neben dem Namen
   darunter statt in der Ecke des Bildes. */
.gedeckbild__rahmen {
  position: relative;
  display: block;
  width: 100%;
}

/* Klein und in der Ecke: Sie soll sagen, dass es etwas zu vergrößern gibt, und
   nicht das Glas verdecken, um das es geht. Heller Grund, weil die Fotos vor
   hellem wie dunklem Hintergrund aufgenommen sind — ein Zeichen ohne Grund
   verschwindet auf der Hälfte davon. */
.gedeckbild__lupe {
  position: absolute;
  right: calc(0.3rem * var(--dichte, 1));
  bottom: calc(0.3rem * var(--dichte, 1));
  display: grid;
  place-items: center;
  width: calc(26px * var(--dichte, 1));
  height: calc(26px * var(--dichte, 1));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mila-dunkel);
  box-shadow: 0 1px 4px rgba(20, 21, 15, 0.28);
}

.gedeckbild__lupe svg {
  width: 62%;
  height: 62%;
}

.gedeckbild:focus-visible {
  outline: 3px solid var(--mila-accent);
  outline-offset: 3px;
  border-radius: 16px;
}

.gedeckbild img {
  width: calc(108px * var(--dichte, 1));
  height: calc(108px * var(--dichte, 1));
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface);
  object-fit: contain;
}

.gedeckbild__name {
  max-width: 100%;
  color: var(--mila-text);
  font-size: calc(0.82rem * var(--dichte, 1));
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

/* Das Foto in der Regie: klein neben dem Schritt, damit die Zeile nicht wächst. */
.schrittfoto {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.schrittfoto__vorschau {
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  object-fit: cover;
}

.schrittfoto__weg {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.75rem;
  color: var(--mila-text-soft);
}

.admin-input--datei {
  padding: 0.3rem;
  font-size: 0.8rem;
}

/* Der Belag eines Toastschritts: untereinander statt in einem Satz.
 *
 * "Tomatensauce + Mozzarella + Salz + Pfeffer" liest man; untereinander arbeitet
 * man es ab, während man belegt — und sieht mit einem Blick, ob noch etwas fehlt. */
/* Punkte davor: Was untereinander steht, ist eine Liste — ohne Zeichen sah es
   aus wie ein Satz, dem jemand die Zeilenumbrüche falsch gesetzt hat. Der Punkt
   tritt zurück, er markiert nur den Anfang der Zeile. */
.belag {
  margin: 0;
  padding-left: 1.05em;
  list-style: disc;
}

.belag__zeile::marker {
  color: var(--kategorie-farbe, var(--mila-accent));
  font-size: 0.9em;
}

/* Die Menge hinter dem Belag und leiser: Gegriffen wird nach der Zutat, die
   Menge sagt nur wie viel. Gepflegt wird sie an der Zutatenliste — die steht auf
   dem Tablet aber oft gar nicht da, weil jede Zutat schon im Schritt genannt ist
   und die Regie sie deshalb ausblendet. */
.belag__menge {
  margin-left: 0.45em;
  color: var(--mila-text-soft);
  font-variant-numeric: tabular-nums;
  font-size: 0.86em;
}

.belag__zeile + .belag__zeile {
  margin-top: 0.15em;
}

/* Der Störer: Was an dieser Zeile schiefgehen kann, steht an dieser Zeile.
 *
 * Unten im Hinweiskasten liegen schon achtunddreißig Hinweise — dort ist er ein
 * neununddreißigster, an dem man vorbeisieht. Hier steht er neben dem Griff, den
 * er meint, und ist im Vorbeigehen zu lesen.
 *
 * In der Warnfarbe, aber ohne Rufzeichen und ohne Rahmen: Es ist ein Zuruf beim
 * Arbeiten, keine Meldung. Er bricht mit der Zeile um, statt sie zu sprengen. */
.belag__stoerer {
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.05em 0.6em;
  border-radius: 999px;
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  box-shadow: inset 0 0 0 1px var(--mila-warn-line);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 0.08em;
}

/* "Anrichten:" gehört über die Liste und nicht in ihre erste Zeile — sonst
   stünde der Salat an anderer Stelle als die Tomate daneben. */
.belag__titel {
  display: block;
  margin-bottom: 0.2em;
  color: var(--mila-text-soft);
}

/* Geschirr hinter den Schritten: Beiwerk, kein Kapitel. Kleiner gesetzt und mit
   Abstand darüber, damit es sich vom Ablauf löst, ohne ihn zu unterbrechen. */
/* Dicht an den Ablauf: Das Geschirr gehört zur Zubereitung — mit einer Handbreit
   Weiß dazwischen las es sich wie ein eigener Abschnitt.
   Die 2,1 rem unter jedem Abschnitt kamen hier zum Spaltenabstand hinzu; im
   Fenster braucht es sie nicht, dort trennt der Abstand der Spalte schon. */
.recipe-detail__spalte > .recipe-section {
  margin-bottom: 0;
}

.recipe-extra--nachgeordnet {
  margin-top: 0;
  font-size: 0.9em;
}

.recipe-extra--nachgeordnet h2 {
  margin-bottom: 0.35em;
  color: var(--mila-text-soft);
  font-size: 0.8em;
}

/* Zwei Spalten, wenn es sonst nicht auf den Schirm passt.
 *
 * Hochkant steht neben "Vor dem Ofen" Platz frei, während unten Schritte
 * abgeschnitten würden. Nebeneinander bleibt die Reihenfolge klar: Jede Spalte
 * trägt ihr eigenes Schild, und gelesen wird Spalte für Spalte.
 *
 * Ein Schild darf dabei nie allein am Fuß einer Spalte stehen, und ein Schritt
 * nicht in der Mitte auseinanderbrechen. */
/* Eine Spalte je Abschnitt — und zwar wirklich eine, nicht ein Fluss, der
 * zufällig dort umbricht, wo die Höhe zu Ende ist.
 *
 * Vorher lief der Ablauf als mehrspaltiger Textfluss (columns). Beim Ofen mit
 * seinen drei Abschnitten und sechzehn Schritten stand dadurch mitten in einer
 * Spalte ein neues Schild, und "Croissants aufbacken" begann links unten und
 * endete rechts oben. Wer im Betrieb daraufsieht, sucht erst, wo sein Abschnitt
 * anfängt — genau das soll die Anleitung abnehmen.
 *
 * Als Spalten nebeneinander steht jeder Abschnitt geschlossen unter seinem
 * eigenen Schild. Dafür bleibt unter dem kürzesten Platz frei: "Anschalten" hat
 * zwei Schritte, die beiden anderen je sieben. Das ist der Tausch — Übersicht
 * gegen ausgenutzte Höhe, und die Übersicht wiegt hier mehr. */
.instruction-list--nebeneinander {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1em;
  /* Ohne dies zöge jede Spalte sich auf die Höhe der längsten und das Schild
     stünde über einem leeren Feld. */
  align-items: flex-start;
}

/* Die Breite folgt dem Inhalt: --gewicht ist die Zahl der Schritte im Abschnitt
   (aus recipes/_instruction_list). Gleich breit gesetzt bestimmte der längste
   Abschnitt die Höhe der ganzen Karte, während der kürzeste seine Breite
   verschenkte — beim Ofen stehen zwei Schritten sieben und sieben gegenüber, und
   die Schrift musste auf 0,68 herunter. Nach Gewicht verteilt bekommen die
   vollen Abschnitte die Breite, die sie brauchen.

   Die Grenzen nach beiden Seiten sind nötig. Ohne Untergrenze fiel "Anschalten"
   mit seinen zwei Schritten auf ein Sechstel der Breite, und "Warten, bis U-nox
   vom Bildschirm weg ist" stand auf fünf Zeilen — schmaler als lesbar. Ohne
   Obergrenze nähme ein sehr langer Abschnitt den übrigen die Breite weg. */
.instruction-list--nebeneinander .instruction-list__gruppe {
  flex: clamp(5, var(--gewicht, 5), 9) 1 0;
  min-width: 0;
}

/* In der Spalte ist wenig Platz — jedes Wort, das umbricht, kostet eine ganze
   Zeile. Enger gesetzt als eine Anleitung, die die volle Breite hat. */
.instruction-list--nebeneinander .instruction-list__item {
  padding: 0.4em 0.6em;
  margin-bottom: 0.28em;
}

.instruction-list--nebeneinander .instruction-list__abschnitt {
  /* Nebeneinander gilt dasselbe wie untereinander: Das Schild braucht Luft zum
     Kasten darunter. In em gerechnet und von --dichte geteilt blieben bei den
     Loaded Brioche sechs Pixel — das Schild sah aus wie die Überschrift des
     Kastens statt wie die des Abschnitts. */
  margin: 0.6em 0 0.85rem;
  padding: 0.3em 0.65em;
}

.instruction-list--nebeneinander .instruction-list__abschnitt:first-child {
  margin-top: 0;
}

/* Steht der Ablauf untereinander statt nebeneinander, bleibt ein Abschnitt
   trotzdem zusammen — etwa beim Drucken. Nebeneinander regelt das jetzt die
   Spalte selbst: Ein Abschnitt ist eine, also kann er gar nicht mehr über die
   Grenze laufen. */
.instruction-list__gruppe {
  break-inside: avoid;
}

/* Der Störer über dem Ablauf: die Backzeit und was man in ihr erledigt.
 *
 * Auffällig genug, um vor dem ersten Handgriff gelesen zu werden, und schmal
 * genug, um dem Ablauf keine Zeile zu nehmen. Der Ofen davor sagt schon ohne
 * Lesen, worum es geht. */
.recipe-detail__stoerer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0.6em 0 0;
  padding: 0.45em 0.9em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--kategorie-farbe, var(--mila-accent)) 12%, transparent);
  color: var(--kategorie-farbe, var(--mila-accent));
  font-size: 0.95rem;
  font-weight: 700;
  width: fit-content;
  max-width: 100%;
}

.recipe-detail__stoerer-zeichen {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  background: currentColor;
  mask: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 2h16a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm1 2v3h14V4H5zm1.5 1.75h3v1.5h-3v-1.5zM5 9v11h14V9H5zm2 2h10v7H7v-7z'/%3E%3C/svg%3E");
}

/* Die Punkte eines Abschnitts. Die Liste darüber trägt nur noch die Abschnitte —
   Aufzählungszeichen und Einzüge gehören hierher. */
.instruction-list__punkte {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Die Meldung aus der Regie: unten quer, in der Hausfarbe, mit einem Knopf zum
   Neuladen.
 *
 * Sie liegt über allem, aber nur am unteren Rand — mitten auf dem Bild stünde
 * sie im Weg, und wer gerade ein Sandwich baut, soll weiterarbeiten können. */
.melder {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 60;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: max-content;
  max-width: calc(100% - 2rem);
  padding: 0.7rem 0.9rem 0.7rem 1.2rem;
  border-radius: 999px;
  background: var(--mila-text);
  color: #fff;
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.25);
}

.melder__text {
  font-size: 1rem;
  font-weight: 600;
}

.melder__knopf {
  padding: 0.4rem 1rem;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--mila-text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Die Stage im Namenszug: "MILA. Küche" statt "MILA. STAGE" mit einer zweiten
   Zeile darunter. Sie trägt die Farbe ihrer Stage und steht in normaler
   Schreibweise — ein Ort, kein Systemetikett. */
.kitchen-logo__sub {
  color: var(--buehnen-farbe, var(--mila-text-soft));
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Der Nachweis der Kenntnisnahme -------------------------------------------
 *
 * Ein Blatt Papier, das auch am Bildschirm wie eines aussieht: weiße Fläche,
 * schmale Spalte, nichts darauf, was nicht zur Sache gehört. Wer ihn ablegt,
 * legt ihn in eine Akte — dort steht kein Knopf und keine Leiste.
 *
 * Ausgedruckt und über "Als PDF sichern" ist es dasselbe Blatt. Deshalb liegen
 * die Wege darunter und verschwinden beim Drucken. */
.beleg {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}

.kenntnisnahme {
  padding: 2.4rem 2.2rem 2rem;
  border: 1px solid var(--mila-line);
  border-radius: 18px;
  background: #fff;
  color: var(--mila-text);
}

.kenntnisnahme__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.1rem;
  border-bottom: 2px solid var(--mila-text);
}

.kenntnisnahme__logo {
  height: 2rem;
  width: auto;
}

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

.kenntnisnahme__titel {
  margin: 1.4rem 0 1.6rem;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
}

/* Jede Angabe eine Zeile: links, wonach gefragt ist, rechts die Antwort. Auf dem
   Handy untereinander — nebeneinander bliebe für die Prüfsumme kein Platz. */
.kenntnisnahme__angaben {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.kenntnisnahme__angaben > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.15rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--mila-line);
}

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

.kenntnisnahme__angaben dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Die Prüfsumme ist zum Vergleichen da, nicht zum Lesen: gleiche Zeichenbreite,
   und sie darf umbrechen, wo sie will. */
.kenntnisnahme__fassung {
  font-family: var(--mila-mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 0.92rem !important;
  overflow-wrap: anywhere;
}

.kenntnisnahme__fussnote {
  margin: 1.6rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.86rem;
  line-height: 1.6;
}

.kenntnisnahme__erstellt {
  margin: 0.8rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.78rem;
}

.beleg__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.4rem 0 0;
}

@media (min-width: 34rem) {
  .kenntnisnahme__angaben > div {
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: 1rem;
    align-items: baseline;
  }
}

/* Auf Papier bleibt nur das Blatt. Kopfzeile, Knöpfe und Rahmen sind Dinge einer
   Oberfläche und haben in einer Akte nichts verloren. */
@media print {
  body.kitchen--beleg .kitchen-header,
  .admin-header,
  .beleg__wege,
  .melder {
    display: none !important;
  }

  .beleg {
    max-width: none;
    padding: 0;
  }

  .kenntnisnahme {
    border: 0;
    padding: 0;
  }
}

/* Wenn die Fassung sich geändert hat: derselbe Kasten wie ein Hinweis, aber am
   Knopf statt am Text. Er erklärt, warum hier noch einmal gefragt wird — ohne
   ihn stünde man vor einem Knopf, den man schon gedrückt zu haben glaubt. */
.onboarding-nachweis__erneut {
  margin: 0 0 0.9rem;
  padding: 0.7rem 1rem;
  border-left: 4px solid var(--mila-warn-line);
  border-radius: 0 12px 12px 0;
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-weight: 600;
  line-height: 1.5;
}

/* Was die Sorte entscheidet, soll man sehen und nicht lesen müssen.
 *
 * Bei Eistee und Limo ist der Unterschied ein einziges Wort am Ende: Sprudel
 * oder still. In einer Zeile Fließtext geht das unter — und wer es überliest,
 * macht das falsche Getränk. Deshalb tragen diese Mengenangaben die Farbe ihrer
 * Sorte statt des üblichen Grau. */
/* Die Menge rückt auf eine eigene Zeile, wenn sie neben dem Namen nicht mehr
   hinpasst.
 *
 * "1 gestrichener Scoop (in der Dose)" ist länger als "Proteinpulver" — in einer
 * Zeile schoben sich beide ineinander, und man las weder das eine noch das
 * andere. Passt es, bleibt es nebeneinander. */
.ingredient-list__item {
  flex-wrap: wrap;
}

.ingredient-list__amount {
  /* Auf eine eigene Zeile, wenn sie neben dem Namen nicht mehr hinpasst — und
     dort umbrechen statt über die Spalte hinauszulaufen.
   *
   * "zum Auffüllen, aus dem Zapfhahn" ist länger als die Spalte breit ist. Mit
   * nowrap schob es sich in den Ablauf daneben und stand mitten im Satz. */
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ingredient-list__amount--limo,
.ingredient-list__amount--eistee,
.belag__menge--limo,
.belag__menge--eistee {
  padding: 0.05em 0.55em;
  border-radius: 999px;
  font-weight: 700;
}

.ingredient-list__amount--limo,
.belag__menge--limo {
  background: #e3f0f7;
  color: #17546f;
}

.ingredient-list__amount--eistee,
.belag__menge--eistee {
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

/* ── Grundsätzliche Verfügbarkeit ───────────────────────────────────────────

   Sieben Tage, je drei Chips. Der ganze Sinn steht in einem Satz: Ein neuer
   Mitarbeiter soll in wenigen Sekunden beantworten können, wann er
   grundsätzlich regelmäßig könnte. Also Daumengröße, keine Uhrzeiten, keine
   Ausnahmen — und alles ohne JavaScript bedienbar. */
.verfuegbarkeitsform {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}

.verfuegbarkeitsform__fehler {
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--mila-warn-line);
  border-radius: 14px;
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
  font-size: 0.92rem;
}

.vzeitraum {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: 18px;
  background: var(--mila-bg);
}

.vzeitraum__wort {
  padding: 0 0.3rem;
  color: var(--mila-text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.vzeitraum__felder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

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

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

/* 16px, damit iOS beim Antippen nicht hineinzoomt. */
.vfeld__eingabe {
  min-height: 48px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--mila-line);
  border-radius: 14px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 16px;
}

.vzeitraum__hinweis {
  margin: 0.6rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  line-height: 1.5;
}

.verfuegbarkeitsauswahl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Eine Zeile je Tag: Name links, Chips rechts. Auf dem Telefon rutscht der Name
   nach oben, damit die Chips die volle Breite bekommen — sie sind das, was
   angetippt wird. */
.vtag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.8rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--mila-line);
  border-radius: 18px;
  background: var(--mila-surface);
}

.vtag--wochenende {
  background: var(--mila-bg);
}

.vtag__name {
  min-width: 6.5rem;
  font-weight: 700;
}

.vtag__kurz { display: none; }

@media (max-width: 30rem) {
  .vtag__lang { display: none; }
  .vtag__kurz { display: inline; }
  .vtag__name { min-width: 2rem; }
}

.vtag__zeiten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  flex: 1 1 auto;
}

/* Der Chip ist eine echte Checkbox unter einem Etikett: bedienbar mit der
   Tastatur, lesbar für einen Screenreader, und funktioniert ohne JavaScript.
   Ein nachgebauter Knopf könnte nichts davon. */
.vchip {
  position: relative;
  display: inline-flex;
}

.vchip__feld {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.vchip__wort {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-bg);
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.vchip__feld:checked + .vchip__wort {
  border-color: var(--mila-accent);
  background: var(--mila-accent);
  color: #fff;
}

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

/* „nicht verfügbar“ steht nur da, solange nichts angekreuzt ist — und
   verschwindet, sobald es unwahr wird. Ohne JavaScript, über den Zustand der
   Geschwisterfelder. */
.vtag__leer {
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

.vtag:has(.vchip__feld:checked) .vtag__leer {
  display: none;
}

.vfuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

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

/* Meine Daten → Verfügbarkeit: was hinterlegt ist, und der eine Knopf daneben. */
.vkarte {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--mila-line);
  border-left: 4px solid var(--mila-ok-line);
  border-radius: 18px;
  background: var(--mila-surface);
}

.vkarte--endet { border-left-color: var(--mila-warn-line); }
.vkarte--leer { border-left-color: var(--mila-line); }

.vkarte__zeitraum {
  margin: 0;
  font-size: 1.05rem;
}

.vkarte__warnung {
  margin: 0;
  color: var(--mila-warn-text);
  font-size: 0.92rem;
  line-height: 1.5;
}

.vkarte--leer .vkarte__warnung { color: var(--mila-text-soft); }

.vschau {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vschau__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: center;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--mila-line);
}

.vschau__zeile:last-child { border-bottom: 0; }

.vschau__tag { min-width: 6.5rem; font-weight: 600; }

.vschau__zeiten { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.vschau__marke {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--mila-accent-soft);
  color: var(--mila-accent);
  font-size: 0.85rem;
  font-weight: 600;
}

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

.vschau__zeile--leer .vschau__tag { color: var(--mila-text-soft); font-weight: 400; }

.vfrueher { margin-top: 1rem; }

.vfrueher__knopf {
  cursor: pointer;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
  font-weight: 600;
}

.vfrueher__liste { margin: 0.6rem 0 0; padding: 0; list-style: none; }

.vfrueher__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  padding: 0.35rem 0;
  color: var(--mila-text-soft);
  font-size: 0.9rem;
}

.vfrueher__zeitraum { font-weight: 600; }

/* Die Seite hinter dem Verfügbarkeits-Link. Sie steht für sich: Wer sie öffnet,
   ist nicht angemeldet und kommt von hier auch nirgendwo hin — also braucht sie
   eine eigene Fläche statt der Leiste, die sonst darüber liegt. */
.verfuegbarkeitsseite {
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(1.2rem, 4vw, 2.2rem);
}

.verfuegbarkeitsseite .onboarding-kopfzeile {
  margin-bottom: 1.4rem;
}

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

/* Ein Zeitraum, der noch nicht begonnen hat.

   Er tritt irgendwann von selbst in Kraft — deshalb steht dran, dass er noch
   kommt, und deshalb steht der Weg, ihn wegzunehmen, gleich daneben. */
.vfrueher__marke {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  font-size: 0.78rem;
  font-weight: 600;
}

.vfrueher__zeile form { margin: 0 0 0 auto; }

/* Die beiden Listen zum Abhaken --------------------------------------------

   Aufsperren und zusperren: ein Schritt, ein großer Haken. Wer sie durchgeht,
   hält das Tablet in einer Hand und macht mit der anderen weiter — deshalb
   keine Tabelle, keine kleinen Kästchen und keine zweite Entscheidung je Zeile.
   Siehe Ablauf und ablaeufe/show. */

.aufgaben__ablaeufe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.aufgaben__ablauf {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

/* Gästeliste am Tablet -------------------------------------------------------
 *
 * Dieselbe Sprache wie die Gastseiten: nachtschwarzes Band oben mit der Marke,
 * Creme als Grund, Gelb nur dort, wo etwas zu tun ist. Wer im Service darauf
 * schaut, soll sehen, dass es dasselbe Werkzeug ist, in dem der Gast gebucht
 * hat — und kein Verwaltungsprogramm, das zufällig dieselben Daten zeigt.
 *
 * Dieselben Maße wie bei den Listen zum Abhaken: Wer im Service steht, hat das
 * Tablet in einer Hand und tippt mit der anderen. Kleine Felder trifft dabei
 * niemand. */

.gaestekopf {
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2rem) clamp(1.3rem, 3vw, 1.8rem);
  background: var(--mila-nacht);
  color: var(--mila-bg);
}

.gaestekopf__marken {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}

.gaestekopf__logo {
  display: block;
  width: auto;
  height: 1.8rem;
  filter: brightness(0) invert(1);
}

.gaestekopf__strich {
  width: 1px;
  height: 1.2rem;
  background: currentColor;
  opacity: 0.35;
}

.gaestekopf__werkzeug {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.72;
}

/* Der Weg zurück steht rechts und leise: Man kommt hierher, um zu arbeiten,
   nicht um wieder wegzugehen. */
.gaestekopf__zurueck {
  margin-left: auto;
  color: inherit;
  opacity: 0.62;
  font-size: 0.95rem;
  text-decoration: none;
}

/* Drei Zahlen statt einer Tabellenüberschrift: Sie beantworten die Frage, mit
   der jemand hierherkommt — wie voll wird es. */
.gaestezahlen {
  display: flex;
  gap: clamp(1.4rem, 6vw, 2.6rem);
  flex-wrap: wrap;
}

.gaestezahlen b {
  display: block;
  font-size: clamp(1.7rem, 6vw, 2.1rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.gaestezahlen span {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
}

.gaestetag {
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2rem) 3rem;
}

/* In der Regie steht die Liste auf hellem Grund statt unter dem dunklen Band —
 * dieselben Bausteine, andere Umgebung. */
.gaestezahlen--hell {
  padding: 1.1rem 1.25rem;
  border-radius: 1rem;
  background: var(--mila-nacht);
  color: var(--mila-bg);
  margin-bottom: 1.4rem;
}

.gaestetag__kopf {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.gaestetag__pfeil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
}

.gaestetag__datum {
  flex: 1;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gaestetag__datum span {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--mila-text-soft);
  letter-spacing: 0;
}

.gaestetag__heute {
  color: var(--mila-text-soft);
  font-size: 0.9rem;
  text-decoration: none;
}

.gaesteliste {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Der Haken, der auf ein freies Uhrzeitfeld umschaltet. Leise unter der
   Auswahl: Es ist die Ausnahme und soll wie eine aussehen. */
.gaeste-form__ausnahme {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.4rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.82rem;
  cursor: pointer;
}

/* Was neben einem Namen steht --------------------------------------------- */

/* Abgeschaut bei resmio, und zwar das, was dort wirklich trägt: Woher eine
   Reservierung kommt, wie oft der Gast schon da war und was über ihn gilt —
   alles in der Zeile und nicht im Fenster. Im Service liest man die Liste und
   klappt nichts auf; eine Erdnussallergie, die man erst nach zwei Klicks sieht,
   ist keine Auskunft. */
.quellzeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  color: var(--mila-text-soft);
}

.quellzeichen svg {
  width: 100%;
  height: 100%;
}

/* Name und Marken in einer Zeile, die umbricht: In der Spalte darunter stünde
   jede Marke als eigener Balken über die ganze Breite. */
.gastzeile__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.4rem;
}

.gastzeile__besuche {
  display: inline-block;
  padding: 0.02rem 0.4rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: 0.1em;
}

/* Im Warnton, weil hier meistens steht, was nicht vergessen werden darf — eine
   Allergie, ein Platz, eine Gewohnheit. Nicht im Rot der Glocke: Es ist ein
   Hinweis und kein Alarm. */
.gastzeile__gastnotiz {
  display: inline-block;
  padding: 0.02rem 0.45rem;
  border-radius: 999px;
  background: var(--mila-warn-bg);
  border: 1px solid var(--mila-warn-line);
  color: var(--mila-warn-text);
  font-size: 0.7rem;
  font-weight: 600;
  vertical-align: 0.1em;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Was gleich kommt — das Band an der Bar -------------------------------- */

/* Späte Reservierungen werden vergessen. Nicht aus Nachlässigkeit: Am Abend ist
   der Vormittag drei Schichten her. Die Liste sagt es, aber im Betrieb sieht
   niemand in eine Liste, es sei denn, er sucht schon etwas.
 *
 * In der Gästefarbe und nicht in der Signalfarbe: Ein Gast, der gleich kommt,
 * ist keine Störung. Das Rot bleibt den Aufgaben — sonst heißt bald alles
 * "dringend" und nichts mehr. */
.gleichband {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  margin: 0 0 0.9rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-gast, #ffc72c);
  color: var(--mila-nacht, #15170f);
  /* Ein einziger Auftritt beim Erscheinen: Das Band steht eine halbe Stunde
     lang da, und was sich eine halbe Stunde bewegt, sieht bald niemand mehr. */
  animation: mila-fade-in 220ms ease both;
}

.gleichband__marke {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--mila-nacht, #15170f);
  color: var(--mila-gast, #ffc72c);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.gleichband__zeit {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.gleichband__wort {
  font-weight: 700;
}

.gleichband__dazu {
  font-weight: 400;
  opacity: 0.75;
}

/* In Minuten und nicht als Uhrzeit: "in 12 Minuten" rechnet niemand nach. */
.gleichband__in {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Eintragen in einem eigenen Fenster ------------------------------------- */

/* Das Formular stand ausgeklappt unter der Liste und machte die Seite doppelt
   so lang, obwohl man es an den meisten Tagen kein einziges Mal braucht.
   Eintragen ist ein Handgriff und kein Zustand.
 *
 * Der Knopf dazu stand erst klein neben dem Datum, mitten in der Seite — dort
 * sucht ihn niemand. Er gehört nach oben und er braucht ein Wort: Ein Pluszeichen
 * allein sagt nicht, was danach kommt. */
.gaestetag__neu {
  margin: 0 0 1rem;
}

.gaesteplus {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: var(--mila-nacht, #15170f);
  color: var(--mila-gast, #ffc72c);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.gaesteplus span {
  font-size: 1.25em;
  line-height: 0.8;
}

.gaesteplus:hover,
.gaesteplus:focus-visible {
  background: var(--mila-gast, #ffc72c);
  color: var(--mila-nacht, #15170f);
}

/* Am Tablet größer: Dort wird mit dem Finger getroffen und nicht mit dem
   Zeiger. */
.gaesteplus--gross {
  padding: 0.85rem 1.5rem;
  font-size: 1.05rem;
}

/* Das dialog-Element bringt Abdunkeln, Fokusfalle und Escape mit; hier stehen
   nur Maße und Farbe. */
.gaestefenster {
  width: min(44rem, 92vw);
  max-height: 88dvh;
  padding: clamp(1.2rem, 4vw, 2rem);
  border: 0;
  border-radius: var(--mila-radius, 22px);
  background: var(--mila-surface, #fff);
  color: var(--mila-text, #15170f);
  box-shadow: var(--mila-shadow-lifted);
}

.gaestefenster::backdrop {
  background: rgba(21, 23, 15, 0.45);
}

.gaestefenster__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.gaestefenster__zu {
  flex: none;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--mila-text-soft, #5b5e4f);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.gaestefenster__zu:hover {
  background: var(--mila-surface-soft, #edebdc);
}

/* Der Raum über der Liste — auf dem Tablet dieselbe Skizze wie in der Regie. */
.gaestetag__raum {
  margin: 0 0 1.2rem;
}

.gastzeile {
  display: flex;
  align-items: center;
  /* Etwas enger, seit vorn das Quellzeichen steht: Es ist schmal und braucht
     nicht denselben Abstand wie zwei Wortblöcke. */
  gap: 0.7rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

/* Storniert und nicht erschienen bleiben stehen, nur leiser: Ein Tisch, der
 * einfach verschwindet, wirft die Frage auf, ob man ihn übersehen hat. */
.gastzeile--weg { opacity: 0.5; }

.gastzeile__zeit {
  min-width: 4.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.gastzeile__wort {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.gastzeile__name { font-weight: 700; }

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

/* Welcher Tisch: schmal und leise zwischen Name und Handgriffen. Er ist eine
 * Angabe, kein Knopf — der nächste Griff steht rechts. */
.gastzeile__tisch { flex: none; }

/* Welche Tische — als Wort und nicht als Auswahlfeld.
 *
 * Hier stand ein select[multiple]. Safari zeigt so eines nicht als Liste,
 * sondern als Knopf mit einer Zahl darauf: "2 ausgewählt". Damit war genau das
 * weg, wofür die Spalte da ist. */
/* Mit der Zeile davor, damit die Regel die allgemeine Linkfarbe schlägt: Ohne
   sie stand hier ein unterstrichener Link statt einer Pille. */
.gastzeile .gastzeile__tischwort,
a.gastzeile__tischwort {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text);
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
}

.gastzeile a.gastzeile__tischwort:hover {
  background: var(--mila-gast-soft);
  text-decoration: none;
}

/* Noch keiner: als Einladung und nicht als Meldung — am Vormittag ist das der
   Normalfall. */
.gastzeile .gastzeile__tischwort--leer,
a.gastzeile__tischwort--leer {
  background: transparent;
  border: 1px dashed var(--mila-line);
  color: var(--mila-text-soft);
  font-weight: 400;
}

.gastzeile__auswahl {
  min-height: 44px;
  padding: 0 0.6rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-bg);
  color: var(--mila-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
}

.gastzeile__wege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Ein voller Knopf je Zeile — der nächste Handgriff. Die übrigen leise
 * daneben: Im Service ist immer nur einer der nächste. */
.gastzeile__knopf {
  min-height: 44px;
  padding: 0 1rem;
  border: 0;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-nacht);
  color: var(--mila-gast);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.gastzeile__knopf--still {
  border: 1px solid var(--mila-line);
  background: transparent;
  color: var(--mila-text-soft);
  font-weight: 600;
}

.gastzeile__marke {
  color: var(--mila-text-soft);
  font-size: 0.9rem;
  font-weight: 700;
}

/* Eintragen steht unter der Liste: Im Service sieht man zuerst nach, wer kommt
 * — eingetragen wird seltener. */
.gaeste-eintragen {
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--mila-line);
}

.gaeste-eintragen__titel {
  margin: 0 0 0.9rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.gaeste-form__reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.gaeste-form__feld {
  flex: 1 1 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.gaeste-form__feld--breit { flex: 2 1 16rem; }

.gaeste-form__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mila-text-soft);
}

.gaeste-form__eingabe {
  min-height: 48px;
  padding: 0 0.85rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  font: inherit;
  font-size: 1rem;
}

.gaeste-form__absenden {
  min-height: 52px;
  margin-top: 0.4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: var(--mila-radius-sm);
  background: var(--mila-nacht);
  color: var(--mila-gast);
  font: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  cursor: pointer;
}

.ablaufkopf {
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2rem) 0;
}

.ablaufkopf__zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.2rem;
}

.ablaufkopf__zurueck {
  color: var(--mila-text-soft);
  font-size: 1rem;
  text-decoration: none;
}

.ablaufkopf__titel {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: -0.02em;
}

/* Der Balken sagt, wie weit man ist. Ohne ihn weiß man beim Aufsperren nicht,
   ob noch drei oder noch acht Handgriffe kommen. */
.ablaufstand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.7rem;
}

.ablaufstand__zahl {
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ablaufbalken {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--mila-line);
}

.ablaufbalken__fuellung {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--mila-accent);
  transition: width 200ms ease;
}

.ablaufliste {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2rem) 2.5rem;
  list-style: none;
  counter-reset: schritt;
}

.ablaufschritt {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
}

/* Erledigtes bleibt stehen und tritt zurück: Dass ein Schritt weg ist, sieht
   man am Haken — und dass er da war, daran, dass die Zeile noch dasteht. */
.ablaufschritt--fertig {
  background: var(--mila-ok-bg);
  border-color: var(--mila-ok-line);
}

.ablaufschritt--fertig .ablaufschritt__name {
  color: var(--mila-text-soft);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.ablaufschritt__zahl {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--bg);
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ablaufschritt__wort {
  display: grid;
  gap: 0.15rem;
  flex: 1;
}

.ablaufschritt__name {
  font-size: 1.1rem;
  font-weight: 600;
}

.ablaufschritt__dazu,
.ablaufschritt__nachweis {
  color: var(--mila-text-soft);
  font-size: 0.88rem;
}

.ablaufschritt__form {
  margin: 0;
}

/* Groß genug für einen Daumen, auch mit nassen Händen. */
.ablaufschritt__knopf {
  min-width: 6.5rem;
  min-height: 3rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: 999px;
  background: var(--mila-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.ablaufschritt__haken {
  flex: none;
  color: var(--mila-ok-text);
  font-size: 1.6rem;
  font-weight: 700;
}

.ablaufleer,
.ablauffertig {
  margin: 0;
  padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 4vw, 2rem) 2.5rem;
  color: var(--mila-text-soft);
}

.ablauffertig {
  font-weight: 600;
}

/* Die Leiste unten links: ToDo-Knopf, aufsperren, zusperren --------------- */

/* Sie standen bis eben getrennt da — der ToDo-Knopf fest verankert, sonst
 * nichts. Jetzt teilen sie sich eine Leiste, damit die beiden neuen Knöpfe
 * daneben stehen können, ohne dass ihre Breite geraten werden muss. */
.buehnenleiste {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 30;
  display: flex;
  align-items: flex-end;
  gap: 0.6rem;
}

/* Der Rahmen ist nur Technik — er soll in der Leiste nicht als eigener Kasten
 * mitzählen, sonst säße der Knopf in einer unsichtbaren Schachtel. */
.buehnenleiste > turbo-frame {
  display: contents;
}

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

/* Der Weg zur Gästeliste sieht aus wie die Knöpfe daneben, heißt aber anders:
 * Sie zählen sich gegenseitig in den Tests, und ein dritter Knopf unter ihrem
 * Namen hätte dort ausgesehen wie eine dritte Liste zum Abhaken. */
.ablaufknopf,
.gaesteknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 54px;
  padding: 0 1.05rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  color: var(--mila-text);
  font-weight: 700;
  text-decoration: none;
}

.ablaufknopf--fertig {
  color: var(--mila-text-soft);
}

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

/* Kein Flieder: Der gehört dem ToDo-Knopf allein. Käme er hier dazu, wäre er
 * kein Tupfer mehr, sondern eine zweite Hausfarbe. */
.ablaufknopf__zahl {
  display: grid;
  place-items: center;
  min-width: 1.6rem;
  height: 1.6rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
  color: var(--mila-text-soft);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Das Fenster, das in seiner Zeit von selbst aufgeht ---------------------- */

/* Groß, aber kein Vorhang: Wer um halb zehn aufsperrt, braucht die Liste vor
 * Augen — und gleichzeitig die Möglichkeit, eine Anleitung nachzuschlagen. Ein
 * bildschirmfüllender Kasten, der eine halbe Stunde stehen bleibt, nähme ihm
 * die Bühne. Deshalb eine breite Karte über der Leiste, nicht darüber hinweg.
 *
 * Unter dem Aufgabenfenster (z-index 130): Eine zugeschickte Aufgabe ist
 * dringender als eine Liste, die jeden Tag zur selben Zeit ansteht. */
.ablauffenster {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 3.9rem);
  z-index: 40;
  width: min(34rem, calc(100vw - 2rem));
  max-height: min(40rem, calc(100vh - 9rem));
  max-height: min(40rem, calc(100dvh - 9rem));
  overflow-y: auto;
  /* Für sich scrollen und nicht die Bühne dahinter mitziehen. Am Tablet ist
     das der Unterschied zwischen "die Liste bewegt sich" und "irgendetwas
     bewegt sich". */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 1.15rem 1.25rem 1.35rem;
  border: 1px solid var(--mila-line);
  border-radius: var(--mila-radius-sm);
  background: var(--mila-surface);
  box-shadow: var(--mila-shadow-lifted);
  animation: mila-fade-in 180ms ease both;
}

.ablauffenster__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}

.ablauffenster__titel {
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.15;
}

.ablauffenster__dazu {
  margin: 0.2rem 0 0;
  color: var(--mila-text-soft);
  font-size: 0.95rem;
}

/* Groß genug für einen Daumen im Vorbeigehen: Wegklicken darf kein Zielen
 * werden, sonst trifft man beim Aufsperren den Haken daneben. */
.ablauffenster__weg {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mila-line);
  border-radius: 999px;
  background: var(--mila-surface);
  color: var(--mila-text-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.ablauffenster .ablaufstand {
  padding: 0;
}

/* Auf dem Handy nimmt die Karte die Breite, und die beiden Knöpfe weichen:
 * Unten links ist neben dem ToDo-Knopf kein Platz für zwei weitere. Die Wege
 * dorthin stehen im ToDo-Fenster selbst (siehe recipes/_aufgaben). */
@media (max-width: 30rem) {
  .ablaufleiste {
    display: none;
  }

  .ablauffenster {
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + 3.9rem);
  }
}