/* ==========================================================================
   Druckvorlage
   Kundenwunsch vom 02.09.2026, Folie 15: ein Knopf "Drucken" wie bei Byodo.

   DER KNOPF IST DER KLEINERE TEIL. Ohne diese Datei liefert window.print()
   ein Blatt mit Navigation, Fussbereich, Teasern und einem Motiv ueber die
   halbe Seite - gemessen vier Seiten Papier fuer ein Rezept mit fuenf
   Schritten. Wer ein Rezept druckt, will es in der Kueche neben sich legen.

   GILT FUER JEDE SEITE, nicht nur fuer Rezepte: die Regeln nehmen Navigation
   und Zierde weg und stellen Text auf Papier um. Das ist auf jeder Seite
   richtig, auch wo kein Druckknopf steht - gedruckt wird trotzdem, ueber das
   Menue des Browsers. Rezeptspezifisches steht unten in einem eigenen Block.

   FARBE SPART PAPIER UND TINTE: Flaechen werden weiss, Text schwarz. Das
   Gold bleibt allein dort, wo es Information traegt, und selbst dort nur als
   Linie. Browser drucken Hintergruende ohnehin nur auf Wunsch, also darf
   sich kein Kontrast auf eine Flaeche verlassen, die auf Papier fehlt.
   ========================================================================== */
@media print {

  /* --- Was gar nicht aufs Papier gehoert ---------------------------------
     Navigation, Fussbereich, Teaser und Bedienelemente. Ein Link, den man
     nicht anklicken kann, ist auf Papier nur Zeile. */
  .masthead,
  .footer,
  .skip-link,
  .rez,                    /* Weitere Rezepte - Teaser */
  .aktionsleiste,          /* die Leiste mit Drucken und Teilen selbst */
  .rzportion,              /* Portionsrechner: rechnet auf Papier nichts */
  .rzkopf__zurueck,
  .schwung,
  .hero__edge {
    display: none !important;
  }

  /* --- Grundstellung ---------------------------------------------------- */
  html, body {
    background: #fff !important;
    color: #000 !important;
    font-size: 11pt;
  }
  /* Punkt statt Pixel: pt ist die Einheit, die auf Papier eine feste Groesse
     hat. Die Tokens der Website rechnen in rem und haengen an der
     Schriftgroesse des Browsers - beim Drucken ist das kein Bezug. */
  body { margin: 0; }
  main { display: block; }

  /* Kein Kasten, kein Schatten, keine graue Bahn. */
  .rzkarte,
  .rzinhalt,
  .rzoel,
  .rzangaben,
  .rzkopf {
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding-block: 0 !important;
  }
  .wrap { max-width: none; padding-inline: 0; }

  /* --- Seitenraender ----------------------------------------------------
     1,5 cm rundum. Der Browser setzt selbst Kopf- und Fusszeile mit Adresse
     und Datum, deshalb oben und unten nicht mehr. */
  @page { margin: 1.5cm; }

  /* --- Links -------------------------------------------------------------
     Die Adresse hinter den Linktext, aber nur bei echten Verweisen nach
     aussen. Innerhalb der Seite (#anker) nuetzt sie nichts. */
  a { color: #000 !important; text-decoration: none; }
  /* NUR FREMDE ADRESSEN (25.09.2026). WordPress schreibt auch die eigenen
     Links als volle Adresse - im Prototyp waren sie relativ, dort griff die
     Regel richtig. Im Theme stand deshalb hinter jeder Rezeptangabe
     "(https://relaunch.teutoburger-oelmuehle.de/rezepte/?oel=...)". Der
     Domainname ohne Unterdomain trifft Baustelle und Hauptdomain. */
  a[href^="http"]:not([href*="teutoburger-oelmuehle.de"])::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  /* --- Nichts zerreissen ------------------------------------------------
     Eine Zutatenzeile oder ein Zubereitungsschritt darf nicht ueber den
     Seitenumbruch laufen, und keine Ueberschrift allein unten stehen. */
  li, .rzschritte__item, .rzangaben__paar { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; }

  /* ======================================================================
     Rezeptseite
     ====================================================================== */
  /* Der Kopf: Titel und Beschreibung, kein grossflaechiges Motiv. Ein
     Rezeptfoto auf halber Seite kostet Tinte und traegt beim Kochen nichts. */
  .rzkopf__media { display: none !important; }
  .rzkopf { position: static !important; overflow: visible !important; }
  .rzkopf__inner { padding: 0 !important; }
  .rzkopf__body { max-width: none !important; }
  .rzkopf__title { font-size: 20pt; margin: 0 0 6pt; }
  .rzkopf__text { font-size: 10pt; margin: 0 0 10pt; }

  /* Die Eigenschaften als eine Zeile Text statt als Pillenraster: auf Papier
     ist eine Pille nur ein Rahmen um ein Wort. */
  .rzangaben__liste {
    display: block !important;
    font-size: 9pt;
    border-top: 1pt solid #000;
    border-bottom: 1pt solid #000;
    padding-block: 4pt !important;
  }
  .rzangaben__paar { display: inline; margin-right: 12pt; }
  .rzangaben dt { display: inline; font-weight: 700; }
  .rzangaben dt::after { content: ": "; }
  .rzangaben dd { display: inline; margin: 0; }
  .rzangaben__pille {
    display: inline !important;
    border: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    background: none !important;
  }
  /* Komma zwischen mehreren Werten, damit "VegetarischGlutenfrei" nicht
     zusammenlaeuft. Das letzte bekommt keins.
     ALS ::after OHNE LEERZEICHEN, und das ist der Unterschied: als ::before
     mit ", " stand im Ausdruck "Vegetarisch , Glutenfrei" - der Zeilenumbruch
     zwischen den beiden <a> im HTML ist selbst schon ein Leerzeichen, und das
     Komma landete dahinter. Jetzt klebt es am Wort, das Leerzeichen kommt
     wie im Fliesstext aus dem Markup. */
  .rzangaben__pille:not(:last-child)::after { content: ","; }

  /* Zutaten und Zubereitung nebeneinander wie am Schirm: zwei Spalten
     passen auf A4, und beim Kochen will man beides gleichzeitig sehen. */
  .rzinhalt__grid {
    display: grid !important;
    grid-template-columns: 0.8fr 1.2fr !important;
    gap: 12pt !important;
  }
  .rzkarte { padding: 0 !important; }
  .rzkarte + .rzkarte { margin-top: 10pt !important; }
  .rzinhalt__titel { font-size: 13pt; margin: 0 0 6pt; }

  /* Das verwendete Oel: der Verweis bleibt als Zeile, der Packshot geht.
     MIT IHM GEHT DER MENGEN-BADGE, und das ist geprueft, nicht in Kauf
     genommen: die Menge steht ein zweites Mal in der Zutatenliste, in der
     Zeile mit data-oel. Nur eines der 13 Rezepte nennt dort keine Menge -
     die Auberginen, so steht es auf der Liveseite -, und dieses Rezept hat
     folglich auch keinen Badge.
     Beim Kochen steht die Flasche auf dem Tisch, nicht auf dem Blatt. */
  .rzoel__media { display: none !important; }
  /* "Zum Produkt" ist ein Knopf, kein Inhalt (siehe oben: ein Link, den man
     nicht anklicken kann, ist auf Papier nur Zeile). Gemessen am 25.09.2026:
     bei zwei Rezepten stand er ALLEIN auf Blatt 2. */
  .rzoel__mehr { display: none !important; }
  .rzoel__grid { display: block !important; }
  .rzoel { border-top: 1pt solid #000; margin-top: 10pt; padding-top: 8pt !important; }
  .rzoel__title { font-size: 12pt; }
  .rzoel__usp svg { display: none; }
}