/*
 * Feinschliff des Handbuchs: dieselbe ruhige Handschrift wie in der Regie — aber nur
 * für den Rahmen.
 *
 * Ausdrücklich unberührt bleiben die Kacheln der Anleitungen (.recipe-card und alles darin):
 * Sie sollen bunt und kontraststark bleiben, damit auf dem Küchentablet auch unter
 * Zeitdruck und aus zwei Metern alles sofort erkennbar ist.
 *
 * Ebenso unangetastet bleiben die Touchgrößen: Was man mit dem Finger trifft,
 * bleibt mindestens 52 px groß, auch wenn es in der Regie kleiner wäre.
 */

body.kitchen {
  /* Die Schrift des Hauses für backstage — siehe @font-face in application.css.
     Nur hier, nicht auf :root: Die Gästeseiten behalten ihre Systemschrift. */
  --mila-font: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Die Hauswerte, kühl.

     :root trägt Creme und Oliv — für die Gästeseiten, die Website, die
     Reservierung. Regie und Tablet gehören dem Team und haben seit dem schwarzen
     Balken einen kühlen Grund. Solange nur die Fläche grau war, holte sich alles
     darin seine Farbe weiter aus den warmen Werten: Linien, Nebenflächen, das
     Grau der kleinen Schrift. Es sah beige aus, obwohl kein Beige mehr dastand.
     Deshalb werden hier die Werte selbst umgestellt und nicht Stelle für Stelle. */
  --mila-bg: #f2f3f4;
  --mila-surface: #ffffff;
  --mila-surface-soft: #eceef0;
  --mila-text: #191c1e;
  --mila-text-soft: #50575b;
  --mila-text-lead: #3d4447;
  --mila-line: #dcdfe2;
  --mila-shadow: 0 1px 2px rgba(15, 20, 18, 0.05), 0 6px 18px rgba(15, 20, 18, 0.05);
  --mila-shadow-lifted: 0 18px 50px rgba(15, 20, 18, 0.22);

  --k-line: #d2d2d7;
  --k-line-soft: #e8e8ed;
  --k-text-faint: #86868b;
  --k-ease: 160ms cubic-bezier(0.32, 0.72, 0, 1);
  --k-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.05);

  -webkit-font-smoothing: antialiased;
}

/* Kopfzeile: stärkeres Milchglas, feinere Kante. ---------------------------- */

body.kitchen .kitchen-header {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--k-line-soft);
}

body.kitchen .kitchen-logo__mark {
  letter-spacing: -0.03em;
}

body.kitchen .kitchen-logo__sub {
  letter-spacing: 0.14em;
  color: var(--k-text-faint);
}

/* Suchfeld: ruhiger Rahmen, weicher Fokus — Höhe bleibt fingerfreundlich. --- */

body.kitchen .search-bar__input {
  border: 1px solid var(--k-line);
  border-radius: 14px;
  box-shadow: none;
  transition: border-color var(--k-ease), box-shadow var(--k-ease), background var(--k-ease);
}

body.kitchen .search-bar__input:focus-visible {
  outline: 0;
  border-color: rgba(15, 77, 64, 0.55);
  box-shadow: 0 0 0 3.5px rgba(15, 77, 64, 0.13);
}

body.kitchen .search-bar__clear {
  background: transparent;
  color: var(--k-text-faint);
  transition: background var(--k-ease), color var(--k-ease);
}

body.kitchen .search-bar__clear:hover {
  background: rgba(15, 20, 18, 0.06);
  color: var(--mila-text);
}

/* Knöpfe im Kopfbereich ---------------------------------------------------- */

/* Gleiche Optik wie die Knöpfe in der Regie — nur höher, weil hier mit dem Finger
   getroffen wird. */
body.kitchen .icon-button,
body.kitchen .kitchen-header__admin {
  border: 1px solid var(--k-line);
  border-radius: 10px;
  background: var(--mila-surface);
  color: var(--mila-text);
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 1px 1px rgba(15, 20, 18, 0.03);
  transition: background var(--k-ease), border-color var(--k-ease), transform var(--k-ease);
}

body.kitchen .icon-button:hover,
body.kitchen .kitchen-header__admin:hover {
  background: #f5f5f7;
  border-color: #b8b8bf;
  color: var(--mila-text);
}

body.kitchen .icon-button:active,
body.kitchen .kitchen-header__admin:active {
  transform: scale(0.98);
}

/* Kategoriefilter: dezenter, wenn nicht gewählt — der aktive bleibt deutlich. */

body.kitchen .chip {
  border: 1px solid var(--k-line);
  /* Kantiger, passend zu den Kacheln. */
  border-radius: 8px;
  font-weight: 500;
  transition: background var(--k-ease), border-color var(--k-ease), color var(--k-ease);
}

body.kitchen .chip:hover {
  background: rgba(15, 20, 18, 0.04);
  color: var(--mila-text);
}

body.kitchen .chip--active {
  border-color: transparent;
  font-weight: 600;
}

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

body.kitchen .pager-button {
  border: 1px solid var(--k-line);
  border-radius: 16px;
  box-shadow: none;
  transition: background var(--k-ease), border-color var(--k-ease), transform var(--k-ease);
}

body.kitchen .pager-button:hover:not(:disabled) {
  background: #f5f5f7;
}

body.kitchen .pager-button:active:not(:disabled) {
  transform: scale(0.96);
}

/* Anleitungsansicht: kleinere Radien, feinere Trennung, weicheres Erscheinen. --- */

body.kitchen .recipe-modal {
  background: rgba(28, 22, 17, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

body.kitchen .recipe-detail {
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(15, 20, 18, 0.09), 0 30px 70px rgba(15, 20, 18, 0.22);
  animation: handbuch-auftauchen 200ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes handbuch-auftauchen {
  from { opacity: 0; transform: translateY(8px) scale(0.995); }
  to { opacity: 1; transform: none; }
}

body.kitchen .recipe-detail__back {
  border-radius: 14px;
  font-weight: 500;
  transition: background var(--k-ease);
}

/* Die Kategorie steht als farbige Pille — die Schrift darin muss weiß bleiben. */
body.kitchen .recipe-detail__category {
  color: #fff;
  letter-spacing: 0.09em;
}

body.kitchen .recipe-detail h1 {
  letter-spacing: -0.025em;
}

body.kitchen .recipe-section__title {
  color: var(--k-text-faint);
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--k-line);
}

body.kitchen .ingredient-list__item,
body.kitchen .instruction-list__item {
  border-bottom: 1px solid var(--k-line-soft);
}

body.kitchen .recipe-detail__image img,
body.kitchen .video-player {
  border-radius: 16px;
}

body.kitchen .recipe-notes {
  border-radius: 16px;
}

body.kitchen .tag {
  border-radius: 8px;
  font-weight: 500;
}

/* Produktsignatur in der Kopfzeile ----------------------------------------- */

body.kitchen .produkt-signatur {
  position: static;
  transform: none;
  margin-left: 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--k-line);
}

body.kitchen .produkt-signatur__marke {
  font-size: 1.65rem;
  text-transform: lowercase;
}

body.kitchen .produkt-signatur__back {
  color: var(--mila-text-soft);
  font-weight: 400;
  opacity: 0.88;
}

body.kitchen .produkt-signatur__stage {
  color: var(--mila-text);
  font-weight: 700;
}

/* Auf schmalen Geräten zählt jeder Millimeter für Suche und Knöpfe. */
@media (max-width: 900px) {
  body.kitchen .produkt-signatur {
    display: none;
  }
}

/* Kacheln: ruhiger Rahmen, kräftiges Bild ---------------------------------
 *
 * Die Kacheln waren verspielt: dicke Rundungen, weicher Schlagschatten, die
 * Kategorie in Terrakotta. Jetzt tragen sie eine feine Linie statt Schatten,
 * kleinere Radien und eine zurückgenommene Kategorie — die Farbe kommt aus dem
 * Produktfoto, nicht aus der Verpackung. Groß und aus einem Meter lesbar bleibt
 * alles, nur eben nüchterner.
 */

/* Die Kachel soll aussehen, als könnte man sie drücken: eine sichtbare Kante,
   ein weißer Rand ums Foto und ein Schatten, der sie vom Hintergrund abhebt.
   Vorher lag das Bild randlos in einer Fläche mit Haarlinie — das las sich wie
   ein Aushang, nicht wie ein Knopf. */
body.kitchen .recipe-card {
  padding: 6px;
  border: 1px solid #e3e3e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 20, 18, 0.05), 0 2px 8px rgba(15, 20, 18, 0.05);
  transition: border-color 160ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 160ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 160ms cubic-bezier(0.32, 0.72, 0, 1);
}

body.kitchen .recipe-card:hover {
  border-color: #b8b8bf;
  box-shadow: 0 2px 4px rgba(15, 20, 18, 0.06), 0 6px 16px rgba(15, 20, 18, 0.08);
}

/* Beim Antippen sinkt sie ein — dieselbe Rückmeldung wie bei einem Knopf. */
body.kitchen .recipe-card:active {
  box-shadow: 0 1px 1px rgba(15, 20, 18, 0.06);
}

/* Innerhalb des Rands bleibt das Foto rund — sonst stünden zwei Radien gegeneinander. */
body.kitchen .recipe-card__link {
  border-radius: 7px;
}

body.kitchen .recipe-card:active {
  transform: scale(0.99);
}

body.kitchen .recipe-card__image {
  background: #f5f5f7;
  border-radius: 7px 7px 0 0;
}

/* Ohne Text darunter — an der Bar tragen die Kacheln nur die Kategorie — läuft
   die Rundung ringsum. */
body.kitchen .recipe-card--ohne-bild .recipe-card__body {
  border-radius: 7px;
}

/* Kein Rahmen zwischen Bild und Text — eine Fläche, kein Aufkleber. */
body.kitchen .recipe-card__body {
  gap: 0.2rem;
  padding: 0.95rem 1.1rem 1.15rem;
}

/* Neben einem Foto tritt die Kategorie zurück — das Bild trägt die Kachel. */
body.kitchen .recipe-card__category {
  color: var(--kategorie-farbe, var(--mila-text-soft));
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.11em;
}

/* Ohne Foto ist sie die Hauptsache und darf entsprechend groß stehen. */
body.kitchen .recipe-card--ohne-bild .recipe-card__category {
  font-size: 1rem;
  letter-spacing: 0.06em;
}

/* Lange Wörter wie "Räucherlachs" müssen vollständig lesbar sein — notfalls mit
   Trennstrich, statt am Rand abgeschnitten zu werden. */
body.kitchen .recipe-card__name {
  hyphens: auto;
  overflow-wrap: break-word;
  font-size: 1.26rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

/* "Aktualisiert" tritt zurück: Etwas Neues ist eine Nachricht, eine Änderung nur
   ein Hinweis — und sie ist deutlich häufiger. */

/* Die Banderole wird zum schlichten Punkt: Er sagt dasselbe und schreit nicht. */

@media (prefers-reduced-motion: reduce) {
  body.kitchen .recipe-detail {
    animation: none;
  }
}

/* Die freundliche Kategoriekachel — im Wiki -------------------------------- */

/* Das Wiki liest man, die Küche bedient man. Auf dem Tablet ist eine Wand aus
   vollflächiger Farbe richtig: Man greift unter Zeitdruck aus einem Meter
   Entfernung danach. Im Wiki sitzt man davor und schlägt nach — dort hatte
   dieselbe Wand das Gewicht von Warnschildern und las sich wie ein Aktenschrank.

   Die Farbe bleibt als Erkennung, wird aber vom Grund zum Akzent: ein kräftiger
   Rücken und der Name in ihrer Farbe. Darunter steht, was drinsteht — das ist
   der eigentliche Unterschied zwischen einer Einladung und einem Register.

   Steht hier und nicht in kitchen.css: Das Kartenaussehen entscheidet oben
   body.kitchen .recipe-card, dagegen käme eine Regel dort nicht an. */
body.kitchen .kategorie-grid--freundlich .kategorie-kachel {
  border: 1px solid #e3e3e8;
  border-left: 8px solid var(--kategorie-farbe);
  background: var(--mila-surface);
  color: var(--mila-text);
}

body.kitchen .kategorie-grid--freundlich .kategorie-kachel__name {
  color: var(--kategorie-farbe);
}

/* Der Inhalt beginnt oben und füllt nach unten. Zentriert schwebte er in der
   Mitte, mit gleich viel Leere darüber wie darunter — bei sechs Namen ist das
   verschenkter Platz, bei einem sähe die Kachel leer aus. */
body.kitchen .kategorie-grid--freundlich .recipe-card__body {
  justify-content: flex-start;
  align-items: stretch;
}

/* Was nicht in die Kachel passt, verlässt sie auch nicht. Ohne dies hing der
   Vermerk "Kapitel — der Reihe nach" am Handy unter dem Rand heraus. */
body.kitchen .kategorie-grid--freundlich .recipe-card__link,
body.kitchen .kategorie-grid--freundlich .recipe-card__body {
  overflow: hidden;
}

/* Die Zahl sitzt unten, nicht direkt unter der Liste: Sie gehört zur Kachel,
   nicht zum letzten Namen darin. Am Handy, wo die Liste fehlt, ist sie das
   Einzige unter dem Namen — und rückt dort von selbst nach unten. */
body.kitchen .kategorie-grid--freundlich .kategorie-kachel__zahl {
  margin-top: auto;
  padding-top: 0.5rem;
  color: var(--kategorie-farbe);
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 1;
}

body.kitchen .kategorie-grid--freundlich .kategorie-kachel:hover {
  border-color: #b8b8bf;
  border-left-color: var(--kategorie-farbe);
}

/* Wo noch nichts steht, muss auch nichts rufen. */
body.kitchen .kategorie-grid--freundlich .kategorie-kachel--leer {
  border-left-color: #e3e3e8;
  background: var(--mila-surface-soft);
}

body.kitchen .kategorie-grid--freundlich .kategorie-kachel--leer .kategorie-kachel__name,
body.kitchen .kategorie-grid--freundlich .kategorie-kachel--leer .kategorie-kachel__kostprobe {
  color: var(--mila-text-soft);
}

/* Der Text sitzt oben statt in der Mitte. Auf dem Tablet ist die Mitte richtig —
   dort ist die Kachel ein Knopf, und ein Wort in der Mitte trifft man am
   sichersten. Hier ist sie eine Karte, die man liest, und Gelesenes fängt oben
   an. */
body.kitchen .kategorie-grid--freundlich .recipe-card__body {
  justify-content: flex-start;
  padding-top: 1.4rem;
}

/* Deutsche Komposita in einer schmalen Spalte: Ohne Silbentrennung bricht der
   Browser irgendwo — aus "Reinigungsanleitungen" wurde "Reini-gungsan-leitungen".
   Die Seite trägt lang="de", der Browser trennt damit an den richtigen Stellen.
 *
 * Am besten trennt er aber gar nicht. Auf der freundlichen Kachel steht der Name
 * über einer Liste und muss nicht mehr die halbe Fläche füllen — kleiner gesetzt
 * passt "Reinigungsanleitungen" in eine Zeile, und der Trennstrich bleibt das,
 * was er sein soll: die Notlösung für den nächstlängeren Namen. */
body.kitchen .kategorie-grid--freundlich .kategorie-kachel__name {
  hyphens: auto;
  overflow-wrap: break-word;
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  text-wrap: balance;
}

/* Der schwarze Balken — wie in der Regie. -----------------------------------

   Dieselbe Kopfzeile, dieselbe Farbe wie die Anmeldeseite: Wer vom Tablet in
   die Regie wechselt, bleibt im selben Haus. Nur die Farben ändern sich hier,
   nicht die Maße — die Touchziele der Küche bleiben so groß, wie sie sind.

   Gilt für jede Kopfzeile dieser Bauart: Stage, Wiki, Academy und Projekte.
   Die Klappfelder darunter bleiben hell; sie erben sonst die helle Schrift des
   Balkens und stehen weiß auf weiß. */

body.kitchen {
  --k-balken: var(--mila-dunkel, #15170f);
  --k-balken-tinte: #f2f3ee;
  --k-balken-leise: rgba(242, 243, 238, 0.66);
  --k-balken-flaeche: rgba(255, 255, 255, 0.09);
  --k-balken-linie: rgba(255, 255, 255, 0.18);
}

body.kitchen .kitchen-header {
  background: var(--k-balken);
  color: var(--k-balken-tinte);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.kitchen .kitchen-header .kitchen-logo__mark {
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .kitchen-logo__sub {
  color: var(--k-balken-leise);
}

/* Wegweiser: eine dunkle Mulde, der offene Bereich hell darin — dieselbe
   Umkehrung wie vorher, nur vom Grund her gedacht. */
body.kitchen .kitchen-header .wegweiser__liste {
  background: var(--k-balken-flaeche);
}

body.kitchen .kitchen-header .wegweiser__eintrag {
  color: var(--k-balken-leise);
}

body.kitchen .kitchen-header .wegweiser__eintrag:hover {
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .wegweiser__eintrag--hier,
body.kitchen .kitchen-header .wegweiser__liste--eigenes .wegweiser__eintrag--hier {
  background: var(--k-balken-tinte);
  color: var(--k-balken);
}

body.kitchen .kitchen-header .wegweiser__regie {
  border-color: var(--k-balken-linie);
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .wegweiser__regie:hover {
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--k-balken-flaeche);
  color: var(--k-balken-tinte);
}

/* Sprache, Konto, Modulwechsel: Kontur statt weißer Fläche. */
body.kitchen .kitchen-header .werkzeuge__knopf {
  border-color: var(--k-balken-linie);
  background: transparent;
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .werkzeuge__knopf:hover,
body.kitchen .kitchen-header .werkzeuge[open] .werkzeuge__knopf {
  border-color: rgba(255, 255, 255, 0.34);
  background: var(--k-balken-flaeche);
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .konto__knopf,
body.kitchen .kitchen-header .bereichswechsel__knopf {
  color: var(--k-balken-leise);
}

body.kitchen .kitchen-header .konto__knopf:hover,
body.kitchen .kitchen-header .konto[open] .konto__knopf,
body.kitchen .kitchen-header .bereichswechsel__knopf:hover,
body.kitchen .kitchen-header .bereichswechsel[open] .bereichswechsel__knopf {
  background: var(--k-balken-flaeche);
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .bereichswechsel__knopf {
  color: var(--k-balken-tinte);
}

body.kitchen .kitchen-header .bereichswechsel__pfeil {
  color: var(--k-balken-leise);
}

/* Die Wortmarke auf dunklem Grund, wie auf der Anmeldeseite: "back" tritt über
   sein Gewicht zurück, nicht über eine zweite Farbe. */
body.kitchen .kitchen-header .produkt-signatur {
  border-left-color: var(--k-balken-linie);
}

body.kitchen .kitchen-header .produkt-signatur__back {
  color: inherit;
  opacity: 0.6;
}

body.kitchen .kitchen-header .produkt-signatur__stage {
  color: inherit;
}

body.kitchen .kitchen-header .werkzeuge__panel,
body.kitchen .kitchen-header .konto__panel,
body.kitchen .kitchen-header .bereichswechsel__panel {
  color: var(--mila-text);
}