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

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

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

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

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

/* Titel und Hinweis bleiben zusammen in der Mitte der Kachel. Oben angeschlagen
   hingen sie an der Decke, mit einem leeren Drittel darunter — der Hinweis ist
   zwei Zeilen kurz und füllt nichts. */
@media (min-width: 48rem) {
  /* Ein Titel, der über einem Text steht, muss ihn nicht mehr allein tragen. */
  .recipe-card--ohne-bild .recipe-card__body:has(.recipe-card__lead) .recipe-card__name {
    font-size: 1.3rem;
    line-height: 1.25;
  }
}

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

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

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


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

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

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

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

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

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

/*
 * Am querliegenden Tablet bleibt die Detailansicht innerhalb des Bildschirms: Das
 * Panel wird nie höher als das Fenster, Kopf und Zurück-Button stehen fest, und
 * nur die beiden Spalten darunter scrollen bei Bedarf für sich.
 *
 * Ausdrücklich nur quer. Die Aufteilung darunter — drei gleiche Drittel aus Bild,
 * Zutaten und Schritten — rechnet mit viel Breite und wenig Höhe. Hochkant hing
 * sie allein an der Fensterbreite und griff auf dem hochkanten iPad ebenfalls:
 * Die Medienspalte nahm ein Drittel und stand unter dem Foto tausend Pixel leer,
 * während rechts alles gedrängt untereinander lief. Dort ist Höhe da und Breite
 * knapp — also gehört das Foto über den Text, nicht daneben.
 */
@media (min-width: 700px) and (orientation: landscape) {
  .recipe-modal {
    align-items: center;
  }

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

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

  /* Links das Produkt, rechts die Arbeit. Die Medienspalte bekommt ihre Breite
     von der Höhe: Zwei Quadrate übereinander füllen die Fläche genau aus. */
  .recipe-detail__body {
    display: grid;
    grid-template-columns: var(--medien-breite, 0) minmax(0, 1fr);
    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;
  }
}

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

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

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

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

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

  .wegweiser__liste {
    flex-wrap: wrap;
  }
}


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Hochkantes Tablet: Das Foto liegt hier über dem Text statt daneben, damit
   bleibt die volle Breite für die beiden Blöcke. Untereinander gestellt liefen
   Zutaten und Geschirr über 700 Pixel breit aus und schoben die Schritte weit
   nach unten — nebeneinander stehen beide sofort im Blick. */
@media (min-width: 700px) and (orientation: portrait) {
  .recipe-detail__columns {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 2vw, 1.75rem);
  }

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

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

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

     Der größte Hebel ist das Foto: Mit 38vh nahm es mehr als ein Drittel der
     Höhe. Es bleibt groß genug, um das Gericht zu erkennen — dafür ist es da,
     nicht zum Betrachten. */
  .recipe-detail__image img {
    max-height: 24vh;
  }

  .recipe-detail__image {
    margin-bottom: 1rem;
  }

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

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

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

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

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

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

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

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

  .recipe-modal {
    padding: 0;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bereichswechsel__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 40;
  width: max-content;
  min-width: 11rem;
  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);
}

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

.bereichswechsel__eintrag {
  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;
  color: var(--mila-text);
  font-weight: 600;
  text-decoration: none;
}

.bereichswechsel__eintrag:last-child {
  margin-bottom: 0;
}

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

.konto {
  position: relative;
}

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

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

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

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

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

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

.konto__panel form {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.schritt-liste p {
  margin: 0;
}

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

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

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

.onboarding-schritt__fuss form {
  margin: 0;
}

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

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

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

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

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

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

.onboarding-start__gruss {
  display: block;
}

/* Jeder Satz für sich, mit Luft dazwischen — das liest sich ruhiger als ein Block. */
.onboarding-start__satz {
  max-width: 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;
}

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

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

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

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

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

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

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

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

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

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

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

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

.projekt__stand {
  margin-top: 1.2rem;
}

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

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

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

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

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

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

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

.anforderung {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0 0.9rem;
  padding: 1.1rem 1.2rem;
  border-radius: 16px;
  background: var(--mila-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;
}

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

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

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

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

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

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

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

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

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

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

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

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

.wiki__kopf {
  margin-bottom: 2rem;
}

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

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

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

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

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

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

/* Die Themen untereinander, nicht nebeneinander: Ein Verzeichnis liest man von
   oben nach unten.
 *
 * Am Handy eine Spalte — alles andere zwängt Text in Schluchten. Ab Tablet zwei,
 * ab großem Monitor drei: Sonst wird die Seite auf 27 Zoll zur Endlosrolle mit
 * einem Meter Weiß daneben. Die Spalten füllen sich von selbst, weil jedes Thema
 * als Ganzes umbricht. */
.wiki__verzeichnis {
  display: grid;
  gap: 2.4rem;
}

@media (min-width: 48rem) {
  .wiki__verzeichnis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.6rem 3rem;
    align-items: start;
  }
}

@media (min-width: 90rem) {
  .wiki__verzeichnis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Der Themenname trägt die Farbe selbst, statt nur einen Strich darunter zu
   haben: Beim Überfliegen sucht man die Farbe, nicht die Linie. */
.wiki-thema__titel {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--kategorie-farbe);
  color: var(--kategorie-farbe);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

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

/* Ein Eintrag ist eine Fläche, keine Zeile.
 *
 * Vorher: Name links, "4 Schritte" rechts, dazwischen Leere — die Zeile maß
 * etwas, das niemanden interessiert, und ließ die Breite ungenutzt. Jetzt steht
 * unter dem Namen der erste Satz des Artikels, über die ganze Breite. Man sieht
 * im Verzeichnis, worum es geht, statt erst hineinzuklicken.
 *
 * Zuerst fürs Handy: volle Breite, Fingerhöhe, keine Schwebezustände. Alles
 * Weitere kommt erst, wenn Platz dafür da ist. */
.wiki-liste__zeile + .wiki-liste__zeile {
  border-top: 1px solid var(--mila-line);
}

.wiki-liste__link {
  display: block;
  padding: 0.9rem 0.2rem;
  color: var(--mila-text);
  text-decoration: none;
  /* Der farbige Faden der Kategorie — unsichtbar, bis man den Eintrag anfasst. */
  border-left: 3px solid transparent;
  border-radius: 10px;
  transition: background 140ms ease, border-color 140ms ease, padding-left 140ms ease;
}

.wiki-liste__name {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Zwei Zeilen, dann Schluss. Der ganze Satz steht im Artikel; hier soll er nur
   sagen, worum es geht. Ungekürzt wuchs ein Eintrag auf sechs Zeilen, und aus dem
   Verzeichnis wurde wieder eine Wand. */
.wiki-liste__lead {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin-top: 0.2rem;
  color: var(--mila-text-soft);
  font-size: 0.95rem;
  line-height: 1.5;
}

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

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

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

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

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