/*
 * 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 {
  --mila-bg: #ffffff;
  --mila-surface: #ffffff;
  --mila-surface-soft: #f5f5f7;
  --mila-text: #1d1d1f;
  --mila-text-soft: #6e6e73;
  /* 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: #48484d;
  --mila-line: #d2d2d7;
  --mila-accent: #b5643c;
  --mila-accent-soft: #fbeee7;
  --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(250, 247, 242, 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;
  min-height: 3.875rem;
  /* Feste Breite, damit der Knopf daneben in beiden Masken an derselben
     Stelle sitzt — „Stage“ ist minimal breiter als „Regie“. */
  min-width: 9.25rem;
  text-decoration: none;
  color: inherit;
}

.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 — sieht nur, wer angemeldet ist und mehrere
   Bereiche verwaltet. */
.stage-switch {
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: 999px;
  background: var(--mila-surface-soft);
}

.stage-switch__tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  color: var(--mila-text-soft);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.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(35, 27, 20, 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 trägt die Farbe seiner Stage: Küche und Bar sollen sich
   nicht nur im Wort unterscheiden, sondern schon im Vorbeigehen. */
.stage-switch__tab--active {
  background: var(--buehnen-farbe, var(--mila-surface));
  color: #fff;
  box-shadow: 0 1px 2px rgba(35, 27, 20, 0.08);
}

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 52px;
  padding: 0.6rem 1.3rem;
  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-bg);
  /* 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;
}

.recipe-card__image {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--mila-surface-soft);
  overflow: hidden;
}

.recipe-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  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;
}

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

/* 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(35, 27, 20, 0.08), 0 4px 14px rgba(35, 27, 20, 0.1);
  color: var(--mila-text-soft);
  font-size: 1.9rem;
  line-height: 1;
  text-decoration: none;
}

.recipe-detail__blaettern:hover {
  background: #fff;
  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%;
  /* Begrenzt, damit Zutaten und Schritte ohne langes Scrollen erreichbar bleiben. */
  aspect-ratio: 16 / 9;
  max-height: 38vh;
  border-radius: 20px;
  /* Die Fotos werden bereits beim Einspielen zentriert auf 4:3 zugeschnitten, das
     Gericht sitzt also formatfüllend im Bild — hier darf "cover" stehen. */
  object-fit: cover;
  background: var(--mila-surface-soft);
}

.recipe-notes {
  margin-bottom: 1.9rem;
  padding: 0.9rem 1.2rem;
  border-radius: 18px;
  border-left: 6px solid var(--mila-warn-line);
  background: var(--mila-warn-bg);
  color: var(--mila-warn-text);
}

/* 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 var(--mila-warn-line);
}

.recipe-notes__title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.recipe-notes__title span {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--mila-warn-line);
  color: #fff;
  font-size: 1rem;
}

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

/*
 * Ab Tablet-Breite 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.
 */
@media (min-width: 700px) {
  .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);
    gap: 0 var(--spalt);
    flex: 1;
    min-height: 0;
  }

  /* 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 {
    --spalt: clamp(1.25rem, 2vw, 1.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 {
    grid-template-columns: minmax(0, 1fr);
  }

  .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, falls es einen gibt. */
  .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;
  }

  /* 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;
    object-fit: cover;
    border-radius: 18px;
  }

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

  /* 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__columns--nur-text {
    grid-template-columns: minmax(0, 1fr);
  }

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

  /* Alle Maße hängen an --dichte, das anleitung_controller.js setzt: So schrumpft
     der ganze Block gleichmäßig, bis er ohne Scrollen passt. */
  .recipe-detail__inhalt {
    font-size: calc(1rem * var(--dichte, 1));
  }

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

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

/* 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. */
.instruction-list__abschnitt {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 0.9em 0 0.5em;
  color: var(--kategorie-farbe, var(--mila-accent));
  font-size: 0.86em;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.instruction-list__abschnitt::after {
  content: "";
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.28;
}

.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 steht ruhiger als ein "Wichtig" einer Anleitung — er
   gilt immer und soll nicht jedes Mal alarmieren. */
.recipe-notes--buehne {
  border-left-color: var(--mila-line);
  background: var(--mila-surface-soft);
  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;
}

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

.ingredient-list__amount {
  flex: none;
  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;
}

.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 {
    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 ist die Ausnahme: Sie ist eine Strecke, die man von oben nach
     unten durchgeht, kein Kachelraster, das auf eine Bildschirmhöhe passen muss.
     Ohne diese Rückstellung ließ sie sich am Rechner gar nicht scrollen. */
  body.kitchen--onboarding {
    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;
    padding-block: 1.1rem 1.1rem;
  }

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

  .category-filter {
    flex: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 1.1rem;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

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

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

/* Wo die Kopfzeile eng wird, bekommt der Wegweiser eine eigene Zeile über die
   volle Breite: auf dem Handy immer, auf dem Tablet hochkant. Zwischen Logo und
   Werkzeugen blieben ihm sonst 65 der nötigen 194 Pixel — von "Küche · Bar ·
   Wiki" war nur "Küche" zu sehen. Und was man nicht sieht, wechselt man nicht. */
@media (max-width: 640px), (orientation: portrait) and (max-width: 1024px) {
  .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;
  }

  .wegweiser {
    order: 3;
    flex-basis: 100%;
    gap: 0.5rem;
  }
}


/* 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. */
/* Quadratisch: Die Seite ist die kürzere von Spaltenbreite und Zeilenhöhe. Der
   Pager wählt dafür die Aufteilung, bei der dieses Quadrat am größten wird
   (siehe pager_controller.js). Was übrig bleibt, verteilt sich rundherum. */
.kategorie-grid {
  align-content: center;
  justify-content: center;
}

.kategorie-kachel {
  aspect-ratio: 1 / 1;
  width: min(100%, var(--tile-height, 100%));
  height: auto;
  place-self: center;
  background: var(--kategorie-farbe);
  color: #fff;
}

.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 {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

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

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

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

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

/* 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(35, 27, 20, 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: 0.95rem;
  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 ---------------------------------------------------- */

.aufgaben {
  position: fixed;
  left: clamp(1rem, 2.5vw, 1.75rem);
  bottom: clamp(1rem, 2.5vw, 1.75rem);
  z-index: 30;
}

.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. */
.aufgaben__zahl {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: var(--mila-accent);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1;
}

.aufgaben__panel {
  position: absolute;
  left: 0;
  bottom: calc(100% + 0.6rem);
  width: max-content;
  max-width: min(26rem, calc(100vw - 2rem));
  max-height: 60dvh;
  overflow-y: auto;
  padding: 0.85rem;
  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.5rem;
  padding: 0 0.25rem;
  color: var(--mila-text-soft);
  font-size: 0.74rem;
  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: 52px;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mila-text);
  font: inherit;
  font-size: 1.02rem;
  text-align: left;
  cursor: pointer;
}

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

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

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

.aufgaben__leer {
  margin: 0;
  padding: 0.5rem 0.6rem 0.6rem;
  color: var(--mila-text-soft);
}

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

/* Ein Aufklappmenü: sichtbar bleibt nur, wer angemeldet ist — das Abmelden liegt
   dahinter, damit es niemand im Vorbeigehen trifft. */
.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: 30rem;
  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. */
.onboarding-start__merk {
  max-width: 32rem;
  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;
}

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

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

.wegweiser__liste--eigenes .wegweiser__eintrag--hier {
  border-color: transparent;
  background: var(--mila-surface);
}

/* Wiki --------------------------------------------------------------------- */

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

.wiki {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2rem clamp(1rem, 4vw, 2rem) 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. Auf breiten Bildschirmen zwei Spalten, damit die Seite nicht
   zur Endlosrolle wird. */
.wiki__verzeichnis {
  display: grid;
  gap: 2.2rem 3rem;
}

@media (min-width: 60rem) {
  .wiki__verzeichnis {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.wiki-thema__titel {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.6rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--kategorie-farbe);
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

.wiki-thema__zahl {
  color: var(--mila-text-soft);
  font-size: 0.9rem;
  font-weight: 400;
}

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

.wiki-liste__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.2rem;
  border-bottom: 1px solid var(--mila-surface);
  color: var(--mila-text);
  text-decoration: none;
}

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

.wiki-liste__name {
  font-weight: 500;
}

.wiki-liste__mass {
  flex: none;
  color: var(--mila-text-soft);
  font-size: 0.85rem;
}

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

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