/* ==========================================================================
   pages/rezept.css
   Rezeptdetailseite. Kopf mit Motiv, darunter Zutaten und Zubereitung, und
   dazwischen die Produktkarte mit dem Packshot des verwendeten Oels.

   ABWEICHUNG VON DER H1-REGEL, bewusst: Produktseiten, Rezeptliste und
   Kontaktseite tragen in der H1 eine Grafolita-Schwungzeile auf --fs-800.
   Ein Rezepttitel wie "Mediterraner Nudelsalat mit Rucola und Tomaten" ist
   dafuer zu lang - bei 92 px braeuchte er drei Zeilen und wuerde die Seite
   erschlagen. Die Schwungzeile traegt hier stattdessen die
   Abschnittsueberschriften, wo sie kurz bleibt.
   ========================================================================== */

/* --- Kopf: Bogen-Hero nach dem Muster von sections/hero.css --------------- */
/* Motiv absolut ueber die ganze Flaeche, Text darueber in einer 34rem-Spalte,
   weisser Verlauf dazwischen, Goldbogen am Fuss. Genau das Muster der
   Startseiten-Hero - dort steht es seit der freigegebenen Fassung, und eine
   Rezeptseite hat EIN Motiv, das selbst der Inhalt ist. Also gehoert sie zu
   den Imageseiten.

   ZUR AUFLOESUNG: das Motiv deckt die ganze Breite, wird links aber zu 98 %
   von Weiss ueberdeckt. Sichtbar ist im Wesentlichen das rechte Drittel.
   Trotzdem wird die Quelle auf die volle Breite hochgerechnet - bei den fuenf
   Motiven mit nur 852 px Quellbreite ist das ein Faktor 1,7 und im rechten
   Teil sichtbar weich. Die hochaufloesenden Dateien stehen auf der
   Beschaffungsliste.

   OHNE MOTIV kein .rzkopf__media im Markup: dann ist der Kopf einfach weiss
   mit Text. Das degradiert saubere als eine graue Platzhalterflaeche ueber
   die ganze Breite. */
.rzkopf {
  position: relative;
  /* Unter dem Sticky-Header, sonst deckt der Kopf das Dropdown-Panel ab -
     dieselbe Begruendung wie bei .hero. */
  z-index: 0;
  overflow: hidden;
  background: var(--bg-page);
  /* KEIN --schwung-grund: die Flaeche unter dem Bogen bleibt weiss.
     Hier stand --bg-soft, weil auf den Kopf direkt die graue Bahn
     .rzinhalt folgte. Seit die Rezepteigenschaften (weiss) dazwischen
     stehen, lag zwischen Bogen und Angaben ein grauer Streifen, dann
     weiss, dann wieder grau - drei Wechsel auf 200 px. Kundenwunsch vom
     03.09.2026: nach dem Bogen beginnt weiss.
     Die Regel der Komponente gilt unveraendert - die Flaeche traegt die
     Farbe der Sektion darunter. Nur ist das jetzt eine andere Sektion.
     WICHTIG BEIM THEME: fehlt der Angabenblock einmal, folgt wieder
     .rzinhalt und dieser Kopf braucht das --bg-soft zurueck. */
}
.rzkopf > .schwung {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  /* Ueber dem Motiv, sonst verschwindet der Bogen dahinter. */
  z-index: 1;
}
.rzkopf__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.rzkopf__media img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  /* Rechts der Mitte: dort liegt bei den Essensmotiven meist der Teller,
     links laeuft der Verlauf darueber. */
  object-position: 62% 50%;
  background: var(--bg-platzhalter);
}
/* Der Verlauf, wortgleich aus sections/hero.css. Deckfarbe ist Weiss, wie die
   Sektion - fuehrte er eine andere Farbe, sieht man an der Schwungkante zwei
   Toene aufeinandertreffen. */
.rzkopf__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Seit dem 29.09.2026 ein Verlauf fuer alle Koepfe, siehe tokens.css. */
  background: var(--motiv-schleier);
}

/* Der Inhalt liegt IM Bild. Niedriger als die Startseiten-Hero (dort
   95vh - Kopfhoehe): eine Rezeptseite soll schnell zu den Zutaten kommen,
   ein bildschirmhoher Kopf wuerde sie verzoegern. */
.rzkopf__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 34rem) 1fr;
  align-items: center;
  min-height: max(24rem, calc(66vh - var(--h-nav)));
  padding-block: var(--sp-8);
  /* Platz fuer den Bogen am Fuss. */
  padding-bottom: calc(min(6.25vw, 6rem) + var(--sp-7));
}
.rzkopf__body { max-width: 34rem; }

@media (max-width: 60rem) {
  /* Schmal steht das Motiv im Fluss ueber dem Text, wie bei der Hero: bei
     34rem Textspalte auf 30rem Schirm bliebe fuer das Bild nichts uebrig,
     und ein Verlauf ueber die ganze Flaeche wuerde das Motiv unlesbar
     machen. */
  .rzkopf { display: flex; flex-direction: column; }
  .rzkopf__media {
    position: relative;
    inset: auto;
    height: 62vw;
    min-height: 14rem;
  }
  .rzkopf__media::after {
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 74%,
      rgba(255, 255, 255, 0.6) 90%,
      var(--bg-page) 100%);
  }
  .rzkopf__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: var(--sp-6) var(--sp-7);
    padding-bottom: calc(min(6.25vw, 6rem) + var(--sp-6));
  }
  .rzkopf__body { max-width: none; }
}

/* Ein Weg zurueck zur Uebersicht, Wunsch vom 28.08.2026. Ein einzelner Link,
   keine Brotkrumen - die sind nach der Entscheidung vom 27.08.2026 raus. Wer
   ueber Google auf einem Rezept landet, hat keinen Verlauf zum Zurueckgehen. */
.rzkopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.5rem;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.rzkopf__zurueck:hover,
.rzkopf__zurueck:focus-visible { color: var(--toem-gold); }
.rzkopf__zurueck svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.rzkopf__zurueck:hover svg,
.rzkopf__zurueck:focus-visible svg { transform: translateX(-3px); }

/* Gewicht 600, nicht 400: dieser Titel hat KEINE Grafolita-Schwungzeile - ein
   Rezepttitel ist zu lang dafuer. Damit traegt er die Praesenz des Heros
   allein, und 400 wirkte darin verloren. Siehe die Gewichtsregel in
   components/sektionstitel.css. */
.rzkopf__title {
  max-width: 24ch;
  font-family: var(--font-body);
  font-size: var(--fs-600);
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0;
}

/* --- Faktenzeile im Kopf ------------------------------------------------ */
/* Vier Angaben, die alle aus dem Rezept selbst kommen - Gang, Portionen, Zahl
   der Zutaten, Zahl der Schritte. Nichts geschaetzt: Zubereitungszeiten fuehrt
   die Liveseite nicht, deshalb steht keine da.
   Dasselbe Muster wie .pkopf__usp auf der Produktseite: Icon im goldenen
   Kreis, Aussage daneben. Das Gold traegt hier als FLAECHE, nicht als
   Schrift - als Schrift auf hell haelt es nur 1,46:1. */
/* BESCHREIBUNGSTEXT unter dem Rezeptnamen. Ersetzt am 02.09.2026 die vier
   Icon-Felder .rzfakten (Gang, Zutaten, Schritte, Aufwand), Kundenwunsch
   Folie 14.

   --fs-400 und 42rem: eine Stufe ueber dem Fliesstext und schmaler als der
   Kopf, damit der Absatz als Vorspann liest und nicht als erster Abschnitt.
   Bei --fs-400 sind 42rem rund 68 Zeichen je Zeile.

   Farbe --text-muted, nicht --text-body: der Absatz ist Vorspann, nicht
   Fliesstext. --text-muted zeigt auf --c-ink-soft, und dessen Kommentar in
   tokens.css nennt genau diesen Zweck ("dunkel genug fuer Lead-Text").
   KEIN eigenes Token dafuer: --text-lead hatte ich zuerst geschrieben, es
   existiert aber nicht. Ein Token fuer eine einzige Verwendung zu erfinden,
   wo ein passendes daliegt, macht die Palette nur unuebersichtlich. */
.rzkopf__text {
  margin: var(--sp-5) 0 0;
  max-width: 42rem;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Zutaten, Zubereitung, Produkt -------------------------------------- */
/* Graue Bahn: die weisse Zutatenkarte und die Produktkarte brauchen
   Flaechenunterschied. */
.rzinhalt {
  background: var(--bg-soft);
  padding-block: var(--sp-sektion);
}
/* Linke Spalte traegt Zutaten, Naehrwerte und das Produkt, rechte die
   Schritte. 0,9 zu 1,1: die Schritte sind Fliesstext und brauchen mehr. */
.rzinhalt__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: start;
}
@media (max-width: 56rem) {
  .rzinhalt__grid { grid-template-columns: 1fr; }
}

.rzkarte {
  padding: var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.rzkarte + .rzkarte { margin-top: var(--sp-5); }

/* Abschnittsueberschriften. KEINE Grafolita: Entscheidung vom 28.08.2026 -
   die Schreibschrift gehoert in die grossen Ueberschriften, wie auf der
   Startseite. Gemessen lag sie hier bei 21,6 px, das ist fuer eine
   Schreibschrift zu klein und wirkte wie ein Fremdkoerper.
   Die zweite Zeile bleibt, aber in Figtree als Unterzeile - sie traegt die
   Zahl der Schritte und ist damit Information, nicht Zierde. Deshalb ist
   .rzinhalt__titel em auch aus der em-Gruppe von
   components/sektionstitel.css genommen. */
/* --fs-500 und Gewicht 700, wie die uebrigen H3 der Website: .usp__heading,
   .rez__name und .pverw__titel laufen alle auf 700. Vorher stand hier
   Gewicht 400 und --fs-500 war GAR NICHT DEFINIERT - der Token war entfallen,
   die Angabe fiel still auf die geerbten 16 px zurueck. Genau deshalb sahen
   die beiden Ueberschriften zu klein und zu leicht aus. */
.rzinhalt__titel {
  font-family: var(--font-body);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0 0 var(--sp-5);
}
.rzinhalt__titel em {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-200);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-top: var(--sp-1);
}

/* --- Grundportion ------------------------------------------------------- */
/* Steht IMMER da, auch ohne Javascript. Seit die Portionen aus der Faktenzeile
   im Hero genommen sind, waeren sie sonst nirgends auf der Seite - der Rechner
   darunter ist ohne Skript ausgeblendet. */
.rzbasis {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.rzbasis b { font-weight: 600; color: var(--toem-blau); }

/* --- Portionsrechner ---------------------------------------------------- */
/* AUSGEBLENDET, bis js/rezept.js die Bedienung freigibt. Ohne Skript rechnet
   nichts, und ein Knopf, der nichts tut, ist schlimmer als kein Knopf. */
.rzportion { display: none; }
.rzportion--an {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.rzportion__was {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.rzportion__steller {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
/* 2,75rem sind 44 px, die Schwelle aus WCAG 2.5.5. Ein Zaehler, den man in
   der Kueche mit nassen Fingern trifft, darf nicht kleiner sein. */
.rzportion__knopf {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--c-grau-300);
  border-radius: 50%;
  font: inherit;
  font-size: var(--fs-400);
  line-height: 1;
  color: var(--toem-blau);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.rzportion__knopf:hover:not(:disabled) { border-color: var(--toem-gold); }
.rzportion__knopf:disabled { opacity: 0.4; cursor: default; }
.rzportion__wert {
  min-width: 2ch;
  text-align: center;
  font-size: var(--fs-400);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--toem-blau);
}
.rzportion__hinweis {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fs-100);
  color: var(--text-muted);
}
/* --- Zutatenliste ------------------------------------------------------- */
.rzzutaten {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* KOMPAKT UND OHNE TRENNSTRICHE. Kundenwunsch vom 02.09.2026, Folie 15:
   "Zutatenliste etwas kompakter und ohne Striche unter den Zutaten,
   Stichpunkte reichen."
   Vorher trug jede Zeile 12 px Polster oben und unten plus eine Linie
   dazwischen - bei elf Zutaten eine Tabelle. Jetzt 4 px Zeilenabstand ueber
   den Punkt, keine Linien. Der Punkt bleibt, er ist der Stichpunkt.
   padding-block ganz weg waere zu eng: die Zeilen mit zwei Textzeilen
   (bei Umbruch) klebten dann aneinander. */
.rzzutaten li {
  display: flex;
  gap: var(--sp-3);
  padding-block: 0.125rem;
  font-size: var(--fs-200);
  line-height: var(--lh-snug);
  color: var(--text-body);
}
.rzzutaten li + li { margin-top: var(--sp-2); }
/* Der ganze Zutatentext liegt in EINEM Element. Wichtig, weil die Zeile ein
   Flex-Container ist: stuende die Mengenzahl direkt darin, waere sie ein
   eigenes Flex-Element und der Gitterabstand von 12 px risse sie vom Text ab -
   gemessen "250 | g Fusilli". Jetzt sind es zwei Flex-Elemente, der Punkt und
   der Text. */
.rzzutaten__text { min-width: 0; }
/* Die Zahl als eigenes Element, damit der Rechner nur sie ersetzt.
   tabular-nums, damit die Zeilen beim Umrechnen nicht springen. */
.rzzutaten [data-basis] { font-variant-numeric: tabular-nums; }
/* Der Goldpunkt ist Dekoration - Gold als Flaeche, nicht als Schrift. */
.rzzutaten li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  margin-top: 0.55em;
  border-radius: 50%;
  background: var(--toem-gold);
}

/* Die Zeile, die unser Oel nennt, wird hervorgehoben: sie ist der Grund,
   warum das Rezept auf dieser Website steht. Goldene Flaeche, kein goldener
   Text - und der Punkt davor wird zum vollen Kreis.
   data-oel setzt der Generator an genau die eine Zeile. */
.rzzutaten li[data-oel] {
  margin-inline: calc(var(--sp-3) * -1);
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
  background: rgba(215, 179, 95, 0.14);
  font-weight: 600;
  color: var(--toem-blau);
}
/* Der Punkt behaelt seine Groesse - nur die Flaeche hebt hervor.
   Wunsch vom 28.08.2026.
   Die Regel, die unter der Oelzeile den Trennstrich ausblendete, ist am
   02.09.2026 entfallen: es gibt keine Trennstriche mehr. */

/* ==========================================================================
   Angaben zum Rezept
   Oel, Ernaehrungsweise, Zeit als Beschreibungsliste zwischen Kopf und
   Inhalt. Kundenwunsch vom 02.09.2026, Folie 15.

   DIE <div> UM JEDES PAAR sind erlaubt und noetig: seit HTML 5.2 darf ein
   <dl> seine dt/dd-Paare in <div> gruppieren, und ohne diese Gruppe laesst
   sich ein Paar nicht als Einheit im Raster platzieren - dt und dd wuerden
   zu zwei unabhaengigen Rasterzellen.

   auto-fit mit 12rem: bei drei Angaben stehen sie auf dem Rechner in einer
   Reihe, auf dem Telefon untereinander. Keine feste Spaltenzahl, damit eine
   vierte Angabe spaeter nicht das Raster sprengt.

   OHNE LINIEN, OHNE KASTEN. Hier stand eine duenne Linie oben und unten;
   Kundenwunsch vom 03.09.2026, beide raus. Seit die Flaeche unter dem Bogen
   weiss ist, teilt sich der Block ohnehin die weisse Bahn mit dem Kopf und
   gehoert sichtbar dazu - dann trennen zwei Linien etwas, was zusammen
   gehoert. Die Abgrenzung tragen jetzt allein die Abstaende.
   ========================================================================== */
/* UNGLEICH, und das ist der Punkt: 48 px oben, 96 px unten. Hier stand
   32 px auf beiden Seiten, Kundenwunsch vom 03.09.2026 - das wirkte
   gedrungen. Der Block klemmte zwischen dem Bogen darueber und der grauen
   Bahn darunter, und unten ist die Kante hart: Weiss trifft Grau. Oben
   nicht, dort laeuft die weisse Flaeche des Kopfes einfach weiter.
   Eine harte Kante braucht mehr Luft als eine, die es nicht gibt - deshalb
   das Doppelte nach unten. Nebenwirkung, erwuenscht: der Block gehoert damit
   sichtbar zum Kopf und nicht zur Zutatenbahn, was er inhaltlich auch tut. */
.rzangaben {
  padding-block: var(--sp-7) var(--sp-9);
}
.rzangaben__liste {
  margin: 0;
  /* Kein padding-block mehr: das gehoerte den Linien, damit die Pillen nicht
     an ihnen klebten. Ohne Linien traegt der Abstand der Sektion allein. */
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--sp-5);
}
.rzangaben__paar { min-width: 0; }
.rzangaben dt {
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-1);
}
.rzangaben dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  line-height: var(--lh-snug);
  color: var(--text-body);
}
/* PILLEN, UND SIE SIND LINKS. Anregung des Kunden vom 02.09.2026, Folie 15:
   der Eigenschaften-Block von Byodo. Dort sind die Pillen Links auf
   Archivseiten je Begriff (/rezeptart/glutenfrei/ und so weiter) - das ist
   der eigentliche Gehalt der Anregung, nicht die Optik.

   WIR VERLINKEN AUF DIE GEFILTERTE LISTE, nicht auf 19 eigene Seiten.
   Gemessen am 03.09.2026: von 19 Begriffen haben nur fuenf mindestens fuenf
   Rezepte (nussig-fein, Vegetarisch, Glutenfrei, unter 30 und unter 60
   Minuten). Vierzehn eigene Seiten waeren also duenn, und duenne Seiten
   schaden - dieselbe Begruendung, die beim Blog gegen sofortige
   Kategorieseiten sprach. Eigene Archive lohnen spaeter, Begriff fuer
   Begriff, wenn genug Rezepte darunter liegen; im Theme liefert die Taxonomie
   sie dann von allein.

   DIE BESCHRIFTUNG BLEIBT. Byodo zeigt nur die Werte, ohne zu sagen, was sie
   bedeuten - "Glutenfrei" versteht man, "Rapskernoel heiss braten" ohne das
   Wort "Oel" davor schon weniger. Deshalb Beschriftung UND Pille.

   Optik aus components/filterleiste.css uebernommen, damit die Pille auf der
   Detailseite und die Pille im Filter derselbe Gegenstand sind. 2,75rem
   Mindesthoehe: Fingergroesse. */
.rzangaben__pille {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--c-grau-300);
  border-radius: var(--r-pill);
  font-size: var(--fs-200);
  line-height: 1;
  color: var(--text-body);
  text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease-hover),
              color var(--dur-hover) var(--ease-hover);
}
.rzangaben__pille:hover,
.rzangaben__pille:focus-visible {
  border-color: var(--toem-gold);
  color: var(--toem-blau);
}

/* --- Schritte ----------------------------------------------------------- */
/* <ol>, nicht <div>: die Reihenfolge ist Teil der Aussage. Die Zahl kommt aus
   einem Zaehler, damit sie gestaltbar ist - der Systemmarker laesst sich
   nicht in einen goldenen Kreis setzen. */
.rzschritte {
  counter-reset: schritt;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-6);
}
.rzschritte li {
  counter-increment: schritt;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-body);
}
/* Zahl in Blau auf hellem Gold: Gold traegt hier als FLAECHE, die Zahl steht
   in Markenblau darauf. Umgekehrt - Gold als Schrift - haelt es nicht. */
.rzschritte li::before {
  content: counter(schritt);
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(215, 179, 95, 0.22);
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--toem-blau);
}

/* --- Das verwendete Öl als eigene Sektion ------------------------------- */
/* Ersetzt die kleine Produktkarte, die vorher in der Zutatenspalte stand.
   Zwei Erwaehnungen desselben Produkts auf einer Seite waren eine zu viel -
   den Moment "welches Oel brauche ich" deckt jetzt die hervorgehobene
   Zutatenzeile ab, und hier steht das Produkt richtig vorgestellt.
   Aufbau wie der Produktkopf: Text links, Packshot rechts, Bogen am Fuss.

   WEISSE BAHN zwischen zwei grauen: darueber der Zutatenblock, darunter der
   Rezeptteaser, beide auf --bg-soft. Ohne den Wechsel liefen drei graue
   Bahnen ineinander. */
/* KEIN Bogen hier. Er schliesst den ersten Block der Seite ab, nicht die
   Mitte - Regel vom 28.08.2026. Die weisse Bahn zwischen zwei grauen traegt
   die Trennung allein. */
/* DEUTLICH KLEINER seit dem 02.09.2026, Kundenwunsch Folie 16: "Baustein
   deutlich kleiner, Inhalt nur Packshot, Produktname und wichtigste USPs,
   Verlinkung zum Produkt."

   Drei Dinge machen die Groesse aus, in dieser Reihenfolge der Wirkung:
   1. Der Beschreibungssatz und der Schaelverfahren-Absatz sind aus dem
      Markup heraus. Letzterer aus demselben Grund, aus dem das Bildband von
      der Produktseite verschwand: Herstellung gehoert auf /herstellung/.
   2. --sp-7 statt --sp-sektion Polster.
   3. Der Packshot bekommt die kleinere Spalte statt der groesseren, und eine
      Hoehenbegrenzung. Vorher trug er 1,4 von 2,4 Rasteranteilen und lief in
      Originalhoehe - bei 1073x1192 px war er das groesste Element der Seite. */
.rzoel {
  background: var(--bg-page);
  padding-block: var(--sp-7);
}
/* Aufbau wie der Produktkopf, Wunsch vom 28.08.2026: 1 zu 1,4, der Packshot
   bekommt die groessere Spalte. */
.rzoel__grid {
  display: grid;
  /* Umgekehrt zu vorher: Text bekommt die groessere Spalte, der Packshot die
     kleinere. Der Baustein ist ein Verweis, kein Produktauftritt.
     FESTE 16rem fuer den Packshot statt eines Anteils. Mit 1,6fr zu 1fr stand
     die Flasche weder am Rand noch beim Text, sondern dazwischen - das sah
     nach Versehen aus. Jetzt bildet sie die rechte Spalte am Seitenrand, und
     die Flaeche zwischen Text und Flasche ist als Luft lesbar statt als
     Fehler. Die Luecke selbst ist dadurch nicht kleiner geworden, nur
     eindeutig. */
  /* 20rem statt 16rem, Kundenwunsch vom 03.09.2026: der Packshot war zu
     klein. Die Spalte ist der Deckel, siehe unten. */
  /* ZUSAMMENGERUECKT UND ZENTRIERT, Wunsch vom 04.09.2026: "der Packshot
     sollte viel naeher an dem Text stehen! Oder macht es Sinn diese Section
     zu zentrieren?" - beides zusammen loest es.

     WAS VORHER FALSCH WAR und warum: die linke Spalte war 1fr, nahm also
     allen uebrigen Platz, waehrend der Text darin bei 34rem aufhoerte.
     Gemessen blieben dadurch 344 px Luft zwischen Textende und Flasche.
     Meine damalige Begruendung - die Flasche steht am Seitenrand, dann ist
     die Luecke als Luft lesbar - hat den Abstand erklaert, aber nicht
     beseitigt.

     Jetzt sind BEIDE Spalten gedeckelt und der Block ist zentriert: der
     Abstand ist nur noch der gap, also 24 bis 48 px, und die Luft steht
     aussen statt in der Mitte. Zwei Elemente, die zusammengehoeren, stehen
     damit auch zusammen. */
  /* max-content fuer die Textspalte, NICHT 34rem: der erste Versuch am
     04.09.2026 deckelte sie auf 34rem und zentrierte den Block - gemessen
     waren die Kaesten dann 48 px auseinander, SICHTBAR blieben aber rund
     290 px, weil die laengste Textzeile bei 350 px endet und die Spalte
     trotzdem 544 px belegte. Ein Kasten ist nicht das, was man sieht.
     Mit max-content ist die Spalte so breit wie ihre laengste Zeile, und der
     sichtbare Abstand ist der gap.
     Der Deckel bleibt: .rzoel__body traegt max-width: 34rem, damit ein
     laengerer Text umbricht statt die Flasche wegzuschieben. */
  grid-template-columns: minmax(0, max-content) minmax(0, 20rem);
  justify-content: center;
  gap: clamp(var(--sp-5), 4vw, var(--sp-7));
  align-items: center;
}
@media (max-width: 60rem) {
  .rzoel__grid { grid-template-columns: 1fr; }
  .rzoel__media { order: -1; }
}
.rzoel__body { max-width: 34rem; }
.rzoel__eyebrow {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--accent);
}
/* Aufbau der Ueberschrift wie die H1 der Produktseite: Sorte in Figtree oben,
   Warengruppe in Grafolita darunter. Eine Stufe kleiner als dort, weil es hier
   eine H2 in der Seitenmitte ist und nicht der Seitentitel.
   Die em-Behandlung kommt aus components/sektionstitel.css, die Groesse wird
   hier gesetzt - NICHT in die em-Gruppen von feinschliff.css eintragen. */
.rzoel__title {
  font-family: var(--font-body);
  font-size: var(--fs-sektion);
  /* Eine Stufe unter dem Seitentitel, wie alle Sektionstitel seit dem
     31.08.2026. Diese Regel ueberschreibt das Bauteil und musste deshalb
     einzeln nachgezogen werden - sonst waere dieser eine Titel bei 48 px
     stehen geblieben, waehrend alle anderen auf 38 gehen. */
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
  margin: 0 0 var(--sp-4);
}
.rzoel__title em {
  /* HOECHSTENS 11,5 % DER FENSTERBREITE (Responsive-Runde 28.09.2026). Hier
     steht der Sortenname, und „Sonnenblumenkernoel" ist ein Wort von 346 px
     bei 44,8 px - bei 360 px Fenster lief es ueber die Spalte bis 7 px an den
     Rand. Ab 390 px greift die Grenze nicht mehr (11,5vw > 1,6em), darunter
     wird die Schreibschrift kleiner statt getrennt, wie ueberall im Projekt. */
  font-size: min(1.6em, 11.5vw);
  margin: -0.08em 0 0;
  padding-block: 0.04em 0.06em;
}
/* USP-Punkte wie im Produktkopf. Die Regeln stehen hier eigenstaendig, weil
   diese Seite pages/produkt.css nicht laedt.
   Der Kreis traegt das Gold als FLAECHE - als Schrift auf hell haelt es nur
   1,46:1. Breite und Hoehe am SVG sind zwingend: ohne Massangabe rendert ein
   Inline-SVG mit 300 x 150 px, das hat im Produktkopf schon einmal eine
   Sektion auf 2365 statt 946 px aufgezogen. */
.rzoel__usp {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.rzoel__usp li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-200);
  line-height: var(--lh-snug);
  color: var(--text-body);
}
.rzoel__usp svg {
  flex: none;
  box-sizing: content-box;
  width: var(--zeichen-kreis-xl);
  height: var(--zeichen-kreis-xl);
  padding: 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(215, 179, 95, 0.16);
  color: var(--toem-blau);
}

/* Die Menge aus DIESEM Rezept - der konkrete Bezug zwischen Gericht und
   Flasche, und der einzige Wert hier, der je Rezept wechselt.
   ALS BADGE OBEN RECHTS AM PACKSHOT, Kundenwunsch vom 03.09.2026. Vorher
   stand die Angabe als Kasten links unter den USPs und teilte sich eine
   Zeile mit "Zum Produkt" - eine Angabe und ein Weg in einer Zeile, und
   dadurch sah der Kasten wie ein zweiter Knopf aus.
   Der Wert steht auf eigener Zeile unter der Beschriftung und traegt --fs-400
   statt --fs-200: er ist die Information, "In diesem Rezept" nur ihr Etikett.
   Die Flaeche ist derselbe Goldschleier wie zuvor (16 % Deckung), keine
   zweite Farbe - es gibt genau einen Goldton.
   OBEN RECHTS, weil der Packshot dort weiss ist: die Flasche steht in der
   Mitte, die Deko am Fuss. Nachgemessen an allen fuenf Packshots, siehe
   werkzeug/packshots-normieren.js - die Flaschenkante liegt zwischen 46 und
   54 % der Breite, das rechte Viertel ist frei. */
.rzoel__badge {
  position: absolute;
  top: 0; right: 0;
  z-index: 1;
  margin: 0;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
  background: rgba(215, 179, 95, 0.16);
  text-align: center;
  font-size: var(--fs-100);
  line-height: var(--lh-snug);
  color: var(--text-muted);
}
.rzoel__badge b {
  display: block;
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--toem-blau);
  font-variant-numeric: tabular-nums;
}

/* Linksbuendig unter den USPs, Kundenwunsch vom 03.09.2026. Der Link steht
   jetzt allein in seiner Zeile - vorher lag der Mengenkasten davor und
   schob ihn nach rechts. */
.rzoel__mehr {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.75rem;
  margin-top: var(--sp-6);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.rzoel__mehr:hover,
.rzoel__mehr:focus-visible { color: var(--toem-gold); }
.rzoel__mehr svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  transition: transform var(--dur-hover) var(--ease-hover);
}
.rzoel__mehr:hover svg,
.rzoel__mehr:focus-visible svg { transform: translateX(3px); }

/* --- „Zubereitet mit" aus dem Produkt (05.10.2026) -------------------------
   Vorschlag der Kundin: der Name wie auf der Produktseite (Sortenname in
   Schreibschrift oben, die Sorte darunter nach rechts versetzt), die
   Stichpunkte der Produktseite mit Häkchen, der Packshot. Die Treppe und die
   Häkchen sind dieselben Maße wie im Produktkopf (pages/produkt.css), nur
   eine Stufe kleiner, weil es hier eine H2 ist. */
.rzoel__title--produkt em { margin: 0; }
/* IN em, NICHT IN %: Die Textspalte ist so breit wie ihr Inhalt
   (max-content). Ein Prozentversatz zählt dabei nicht mit und schob die
   Sorte über die Spalte hinaus bis an die Flasche (gemessen 05.10.2026). */
.rzoel__sorte {
  display: block;
  margin-left: 2.5em;
  margin-top: -0.2em;
}
.rzoel__sorte--links { margin-left: 0; margin-top: 0; }
@media (max-width: 40rem) {
  .rzoel__sorte { margin-left: 1.25em; }
  .rzoel__sorte--links { margin-left: 0; }
}
/* DER PACKSHOT IST EINE SCHMALE FLASCHE (bei den fünf Ölen etwa 1 : 4,8),
   kein 3:4-Motiv wie vorher. Über die Breite gedeckelt, stünde sie bei 20rem
   Spalte gut anderthalb Meter hoch - deshalb deckelt hier die Höhe, und die
   Spalte ist so breit wie die Flasche. Am Telefon steht sie über dem Text,
   kleiner. */
.rzoel__grid.rzoel__grid--flasche { grid-template-columns: minmax(0, max-content) max-content; }
/* Zwei Klassen: .rzoel__media img steht weiter unten und setzt die Breite. */
.rzoel__media.rzoel__media--flasche img {
  width: auto;
  max-width: 100%;
  height: clamp(18rem, 30vw, 26rem);
  object-fit: contain;
}
@media (max-width: 60rem) {
  .rzoel__grid.rzoel__grid--flasche { grid-template-columns: 1fr; }
  .rzoel__media.rzoel__media--flasche img { height: 16rem; }
}
.rzoel__usp--haken { gap: var(--sp-2); margin-top: var(--sp-5); }
.rzoel__usp--haken li { align-items: start; gap: var(--sp-3); }
.rzoel__usp--haken svg {
  box-sizing: border-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--toem-gold);
  margin-top: 0.05em;
}

.rzoel__media { position: relative; display: grid; place-items: center; }
.rzoel__media img {
  width: 100%;
  height: auto;
  display: block;
  margin-inline: auto;
  /* KEIN max-height. Hier stand 15rem, und das war der Fehler: die Hoehe
     griff vor der Breite, also stand die Flasche mit 180 x 240 px in einem
     256 px breiten Kasten und liess links und rechts Luft stehen. Sie war
     damit nicht nur klein, sondern kleiner als ihre eigene Spalte.
     Jetzt deckelt allein die Spaltenbreite, wie beim Packshot auf der
     Produktseite. Bei 20rem Spalte rechnet das Seitenverhaeltnis
     1086 : 1448 auf 320 x 427 px - genau die Hoehe des Textblocks daneben,
     die Sektion wird also nicht hoeher als vorher.
     object-fit entfaellt mit dem Deckel: ohne Zwangshoehe gibt es keinen
     Kasten mehr, in den etwas eingepasst werden muesste. */
}

/* TREFFERFLAECHE 44 px auf Touchbreiten, nachgezogen am 10.09.2026 beim
   responsiven Durchgang. Gemessen war dieser Zuruecklink 40 px hoch; die
   Projektregel verlangt 44. Dasselbe Muster gibt es viermal im Projekt
   (rzkopf, stdkopf, hakopf, bwkopf) - im Theme wird daraus ein Bauteil, hier
   steht der Wert vorerst viermal. Nur auf Touchbreiten, wie bei der Fusszeile
   und den Eingabefeldern; dieselbe Grenze von 64rem. */
@media (max-width: 64rem) {
  .rzkopf__zurueck { min-height: 2.75rem; }
}