/* Druckansicht der Rezepte: bewusst immer im hellen Sand-Look, unabhaengig
   vom gewaehlten Thema - dunkler Grund waere auf Papier nur Farbverbrauch.
   Auf dem Bildschirm ist der Bogen unsichtbar; er entsteht erst beim Drucken
   ("Als PDF sichern" im Druckdialog). */

#hh-print { display: none; }

@media print {
  @page { size: A4; margin: 14mm 14mm 20mm; }

  html, body {
    background: #fff !important;
    margin: 0;
    /* Ohne das laesst Chrome die Flaechen weg, sobald "Hintergrundgrafiken"
       nicht angehakt ist. */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body > #app { display: none !important; }

  #hh-print {
    display: block;
    color: #201e1d;
    font-family: "Figtree", system-ui, sans-serif;
  }

  .pr-page {
    position: relative;
    /* Fuellt die Satzflaeche, damit der Bogen nicht auf halber Seite endet -
       knapp unter der Seitenhoehe, sonst entsteht eine leere Folgeseite. */
    min-height: 248mm;
    background: #f5ead8;
    border-radius: 10mm;
    padding: 13mm 12mm 12mm;
  }
  /* Umbruch vor jedem weiteren Rezept - break-after am letzten Bogen wuerde
     eine leere Schlussseite erzeugen. */
  .pr-page + .pr-page { break-before: page; }

  .pr-kicker {
    font: 700 8.5pt/1 "Figtree", system-ui, sans-serif;
    letter-spacing: .14em; text-transform: uppercase; color: #82796a;
  }
  .pr-title {
    font-family: "Caprasimo", Georgia, serif;
    font-size: 26pt; line-height: 1.1; margin: 3mm 0 0; color: #201e1d;
  }
  .pr-teaser { font: 400 10.5pt/1.5 "Figtree", system-ui, sans-serif; color: #474238; margin: 4mm 0 0; }

  .pr-meta { display: flex; flex-wrap: wrap; gap: 2.5mm; margin-top: 5mm; }
  .pr-meta span {
    font: 600 8.5pt/1 "Figtree", system-ui, sans-serif; color: #645c50;
    background: #eee7db; border-radius: 999px; padding: 2mm 3.5mm;
  }
  .pr-meta span.time { background: #c67139; color: #fff; }

  .pr-cols { display: flex; gap: 8mm; margin-top: 8mm; align-items: flex-start; }
  .pr-col-side { width: 62mm; flex: none; }
  .pr-col-main { flex: 1; }

  .pr-card {
    background: #f9f4ed; border-radius: 6mm; padding: 6mm 6mm 5mm;
    box-shadow: 0 .4mm 1mm rgba(46,43,37,.10);
  }
  .pr-card + .pr-card { margin-top: 5mm; }
  .pr-card h2 {
    font-family: "Caprasimo", Georgia, serif; font-size: 13pt;
    margin: 0 0 3mm; font-weight: 400; color: #201e1d;
  }

  .pr-ing { list-style: none; margin: 0; padding: 0; }
  .pr-ing li {
    display: flex; gap: 3mm; align-items: baseline;
    font: 500 10pt/1.45 "Figtree", system-ui, sans-serif; color: #474238;
    padding: 1.4mm 0; border-bottom: .3mm dotted rgba(32,30,29,.18);
  }
  .pr-ing li:last-child { border-bottom: 0; }
  .pr-ing li::before {
    content: ""; width: 2mm; height: 2mm; border-radius: 999px;
    background: #c67139; flex: none; transform: translateY(-.4mm);
  }

  .pr-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
  .pr-steps li {
    display: flex; gap: 4mm; align-items: flex-start; counter-increment: step;
    font: 500 10.5pt/1.55 "Figtree", system-ui, sans-serif; color: #474238;
    padding: 2mm 0;
  }
  .pr-steps li::before {
    content: counter(step);
    width: 6.5mm; height: 6.5mm; flex: none; border-radius: 999px;
    background: #ebddc5; color: #8c491a;
    font: 700 9pt/6.5mm "Figtree", system-ui, sans-serif; text-align: center;
  }

  .pr-tip {
    background: #f0fae1; border-radius: 6mm; padding: 5mm 6mm; margin-top: 5mm;
  }
  .pr-tip b {
    display: block; font: 700 8.5pt/1 "Figtree", system-ui, sans-serif;
    letter-spacing: .12em; text-transform: uppercase; color: #56633f; margin-bottom: 2mm;
  }
  .pr-tip p { font: 400 10pt/1.5 "Figtree", system-ui, sans-serif; color: #3d472b; margin: 0; }

  .pr-lines { margin-top: 6mm; }
  .pr-lines b {
    display: block; font: 700 8.5pt/1 "Figtree", system-ui, sans-serif;
    letter-spacing: .12em; text-transform: uppercase; color: #82796a; margin-bottom: 3mm;
  }
  .pr-lines span { display: block; border-bottom: .3mm dashed rgba(32,30,29,.22); height: 7mm; }

  /* Fusszeile: wiederholt sich in Chrome und Safari auf jeder Seite. */
  .pr-foot {
    position: fixed; left: 0; right: 0; bottom: 4mm;
    display: flex; align-items: center; justify-content: center; gap: 3mm;
    font: 600 8.5pt/1 "Figtree", system-ui, sans-serif; color: #82796a;
  }
  .pr-foot .dot { width: 1.6mm; height: 1.6mm; border-radius: 999px; background: #c67139; }
  .pr-foot .site { font-weight: 800; color: #8c491a; letter-spacing: .02em; }
}