/* L75 — Rezeptseiten (website/rezepte/**). Ergänzt styles.css, ersetzt nichts.
   Alle Farben und Schriften kommen aus dem Design-System der Startseite; hier
   steht nur das Layout für Übersicht und Rezeptseite. Erzeugt werden die
   Seiten von rezepte-bauen.mjs — wer hier eine Klasse umbenennt, ändert sie
   dort mit. */

/* ---------- Übersicht ---------- */
/* Blau: Kopf der Übersicht als Band (weiße Schrift, Suche und Sprungleiste weiß). Muster
   (muster-band.svg, Maßstab 0,8: bis 350 px vom rechten Rand) rechts; ab 1200 px endet die
   Textspalte (höchstens 62ch) links davon. Mit auto 100 % lagen Kugeln über Einleitung und Suche. */
.rz-kopf { padding-bottom: clamp(32px, 4vw, 48px); color: #fff; background: var(--grad-band); }
@media (min-width: 1200px) {
  .rz-kopf { background: url('assets/muster/muster-band.svg') right top / auto 496px no-repeat, var(--grad-band); }
}
.rz-kopf .lede { color: #fff; }
.rz-kopf .muted { color: var(--mt-himmel-2); }
/* D51 (Design-Prüfung 29.09.2026): Eyebrow, Überschrift und Einleitung klebten aneinander,
   die Einleitung lief über die volle Breite. */
.rz-kopf h1 { max-width: 22ch; margin: 10px 0 14px; }
.rz-kopf .lede { max-width: 62ch; }
.rz-sprung { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rz-sprung a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
  border: 1px solid #fff; border-radius: var(--radius-ctrl); background: var(--surface);
  font-size: 14px; font-weight: 600; color: var(--mt-blau);
}
.rz-sprung a:hover { background: var(--mt-himmel); border-color: var(--mt-himmel); color: var(--mt-blau-tief); }
.rz-suche { display: flex; flex-direction: column; gap: 6px; max-width: 480px; margin-top: 18px; }
.rz-suche input {
  font: inherit; font-size: 16px; padding: 11px 16px; border-radius: var(--radius-ctrl);
  /* D57: Rand vorher 12 % Schwarz (1,2 : 1), Fokus nur ein 15-%-Schein. */
  border: 1px solid var(--line-feld); background: var(--surface); color: var(--ink-1);
}
.rz-suche input:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-color: var(--mt-blau); }
#rz-treffer { min-height: 1.4em; margin-top: 6px; }

.rz-buch { padding-top: 28px; }
.rz-kapitel { margin: 26px 0 12px; font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.rz-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.rz-karte {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit;
  border-radius: var(--radius-card); overflow: hidden; background: var(--surface);
  border: 1px solid var(--line);
}
.rz-karte:hover { border-color: var(--mt-blau); }
.rz-karte:hover .rz-karte-titel { color: var(--mt-blau); }
.rz-karte img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #f1ede6; }
.rz-karte-titel { font-weight: 600; font-size: 16px; padding: 4px 14px 0; line-height: 20px; }
.rz-karte-text { padding: 0 14px 14px; font-size: 14px; color: var(--ink-2); line-height: 20px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rz-karte[hidden] { display: none; }
/* D51: Handy zweispaltig statt 200 Karten untereinander; der Kurztext entfällt dort. */
@media (max-width: 560px) {
  .rz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rz-karte-text { display: none; }
  .rz-karte-titel { padding: 2px 10px 12px; font-size: 14px; }
}

/* ---------- Rezeptseite ---------- */
.rz-rezept { padding: 36px 0 60px; }
.rz-rezept .eyebrow a { color: inherit; text-decoration: none; }
.rz-rezept h1 { margin: 6px 0 10px; max-width: 24ch; }
/* D51: Kopfraster. Handy: Text, dann Foto im Querformat (höchstens knapp die halbe Höhe).
   Ab 900 px: Foto links (4:5, höchstens 72 % der Höhe), Titel, Einleitung und Angaben rechts —
   die Zutaten beginnen damit im ersten Bildschirm statt nach anderthalb. */
.rz-oben { display: flex; flex-direction: column; gap: 18px; margin-bottom: 8px; }
.rz-kopftext .lede { max-width: 60ch; }
.rz-foto { margin: 0; }
.rz-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; max-height: 48vh; object-fit: cover; border-radius: var(--r-tile); }
.rz-foto figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
@media (min-width: 900px) {
  .rz-oben { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: 'foto text'; gap: 40px; align-items: start; margin-bottom: 30px; }
  .rz-foto { grid-area: foto; }
  .rz-kopftext { grid-area: text; padding-top: 8px; }
  .rz-foto img { aspect-ratio: 4 / 5; max-height: 72vh; }
  .rz-rezept h1 { font-size: clamp(32px, 4vw, 40px); }
}
.rz-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 14px 0 26px; color: var(--ink-2); }
.rz-meta li::before { content: '·'; margin-right: 8px; opacity: 0.5; }
.rz-meta li:first-child::before { content: ''; margin: 0; }

.rz-spalten { display: grid; gap: 36px; grid-template-columns: minmax(240px, 1fr) minmax(0, 2fr); align-items: start; }
@media (max-width: 760px) { .rz-spalten { grid-template-columns: 1fr; } }
.rz-block h2 { margin: 0 0 12px; font-size: 24px; line-height: 30px; }
.rz-block h3 { margin: 16px 0 6px; font-size: 16px; color: var(--ink-2); }
.rz-zutaten { list-style: none; padding: 0; margin: 0; }
.rz-zutaten li { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line-2); line-height: 22px; }
/* Blau: Farbe statt Deckkraft — halbdurchsichtiger Text wurde nur in Graustufen geglättet. */
.rz-zutaten .rz-menge { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.rz-zutaten em { font-style: normal; font-weight: 400; color: var(--ink-3); }
.rz-schritte { padding-left: 1.4em; margin: 0; }
.rz-schritte li { margin: 0 0 12px; line-height: 1.55; }
.rz-story { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--mt-blau); background: var(--mt-himmel); border-radius: 0 var(--radius-card) var(--radius-card) 0; }

.rz-cta { margin-top: 44px; padding: 22px 24px; border-radius: var(--r-tile); background: var(--grad-band); color: #fff; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.rz-cta p { margin: 0; flex: 1 1 320px; }

.rz-footer { padding: 28px 0 40px; }
.rz-footer p { margin: 6px 0; }