/*
 * 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 {
  --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(181, 100, 60, 0.55);
  box-shadow: 0 0 0 3.5px rgba(181, 100, 60, 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(60, 45, 32, 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(35, 27, 20, 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(60, 45, 32, 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(35, 27, 20, 0.09), 0 30px 70px rgba(35, 27, 20, 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(35, 27, 20, 0.05), 0 2px 8px rgba(35, 27, 20, 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(35, 27, 20, 0.06), 0 6px 16px rgba(35, 27, 20, 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(35, 27, 20, 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;
  }
}