From 2b8c4a35cff96ca074b289220a9361dd34941156 Mon Sep 17 00:00:00 2001
From: kobold-ai <maxi+aijj97uf49@muggleproof.de>
Date: Wed, 14 Oct 2026 21:45:55 +0200
Subject: [PATCH] Restore rich card backgrounds and 14mm top breathing margin
 for print engine v4.5.4

---
 app/templates/cookbook.html | 83 ++++++++++++++++++++-----------------
 1 file changed, 45 insertions(+), 38 deletions(-)

diff --git a/app/templates/cookbook.html b/app/templates/cookbook.html
index aca477e..6724e3a 100755
--- a/app/templates/cookbook.html
+++ b/app/templates/cookbook.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mein Kochbuch – What To Cook?</title>
-  <link rel="stylesheet" href="/static/cookbook.css?v=4.5.3">
+  <link rel="stylesheet" href="/static/cookbook.css?v=4.5.4">
   <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
   <style id="print-engine-styles">
     /* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
@@ -18,7 +18,7 @@
 
     /* ==========================================================================
        A4 Buchdruck-Engine: Universell für Apple iOS (AirPrint), Android Chrome & Desktop
-       Jede Seite ist exakt 1 Blatt A4 (286mm). Kein Rahmen, Seitenzahl fest in der Ecke.
+       Jede Seite ist exakt 1 Blatt A4 (282mm). Schöne Ränder, echte Hintergründe.
        ========================================================================== */
     @page {
       size: A4 portrait;
@@ -31,8 +31,6 @@
         print-color-adjust: exact !important;
         color-adjust: exact !important;
         box-sizing: border-box !important;
-        box-shadow: none !important;
-        text-shadow: none !important;
       }
 
       html, body.cookbook-body {
@@ -41,8 +39,8 @@
         margin: 0 !important;
         padding: 0 !important;
         overflow: visible !important;
-        background: var(--creme) !important;
-        background-color: #FAF7F2 !important;
+        background: #FAF6F0 !important;
+        background-color: #FAF6F0 !important;
         color: var(--schwarz) !important;
         display: block !important;
       }
@@ -77,21 +75,21 @@
         overflow: visible !important;
       }
 
-      /* Jede Seite ist ein eigenständiges DIN A4 Blatt mit fester 286mm Höhe */
+      /* Jede Seite ist ein eigenständiges DIN A4 Blatt mit 14mm Kopfabstand und 282mm Höhe */
       .page {
         display: block !important;
         position: relative !important;
         width: 210mm !important;
         max-width: 210mm !important;
         min-width: 210mm !important;
-        height: 286mm !important;
-        min-height: 286mm !important;
-        max-height: 286mm !important;
+        height: 282mm !important;
+        min-height: 282mm !important;
+        max-height: 282mm !important;
         margin: 0 auto !important;
-        padding: 8mm 12mm 18mm 12mm !important;
+        padding: 14mm 14mm 16mm 14mm !important;
         box-sizing: border-box !important;
-        background: var(--creme) !important;
-        background-color: #FAF7F2 !important;
+        background: #FAF6F0 !important;
+        background-color: #FAF6F0 !important;
         box-shadow: none !important;
         border: none !important;
         outline: none !important;
@@ -116,7 +114,7 @@
       /* 1. COVER */
       .page.cover {
         display: block !important;
-        padding-top: 55mm !important;
+        padding: 50mm 14mm 16mm 14mm !important;
         text-align: center !important;
         page-break-after: always !important;
         break-after: page !important;
@@ -155,7 +153,7 @@
       /* 2. INHALTSVERZEICHNIS (TOC) */
       .page.toc-page {
         display: block !important;
-        padding-top: 2mm !important;
+        padding: 14mm 14mm 16mm 14mm !important;
         page-break-after: always !important;
         break-after: page !important;
         page-break-inside: avoid !important;
@@ -189,7 +187,7 @@
       .divider {
         display: block !important;
         text-align: center !important;
-        padding-top: 35mm !important;
+        padding: 38mm 14mm 16mm 14mm !important;
         page-break-after: always !important;
         break-after: page !important;
         page-break-inside: avoid !important;
@@ -234,7 +232,7 @@
       /* 4. REZEPTSEITE */
       .recipe-page {
         display: block !important;
-        padding-top: 1mm !important;
+        padding: 14mm 14mm 16mm 14mm !important;
         page-break-after: always !important;
         break-after: page !important;
         page-break-inside: avoid !important;
@@ -304,9 +302,11 @@
       }
 
       .ingredients-box {
-        padding: 2px 4px !important;
-        background: transparent !important;
-        border: none !important;
+        padding: 5px 8px !important;
+        background: rgba(255, 255, 255, 0.75) !important;
+        background-color: rgba(255, 255, 255, 0.75) !important;
+        border: 1.5px dashed rgba(30, 77, 59, 0.4) !important;
+        border-radius: 8px !important;
       }
 
       .section-hand-title {
@@ -359,22 +359,26 @@
       }
 
       .step-card {
-        padding: 2.5px 5px !important;
-        margin-bottom: 2px !important;
+        padding: 3px 6px !important;
+        margin-bottom: 2.5px !important;
         font-size: 0.80rem !important;
         line-height: 1.22 !important;
         display: flex !important;
         gap: 6px !important;
         align-items: flex-start !important;
+        background: rgba(255, 255, 255, 0.6) !important;
+        background-color: rgba(255, 255, 255, 0.6) !important;
+        border-radius: 6px !important;
       }
 
       .step-badge {
-        width: 16px !important;
-        height: 16px !important;
+        width: 17px !important;
+        height: 17px !important;
         font-size: 0.72rem !important;
         flex-shrink: 0 !important;
-        background: var(--tannengruen) !important;
-        color: var(--creme) !important;
+        background: #1E4D3B !important;
+        background-color: #1E4D3B !important;
+        color: #FAF6F0 !important;
         border-radius: 50% !important;
         display: flex !important;
         align-items: center !important;
@@ -386,12 +390,13 @@
       }
 
       .notes-box {
-        margin-top: 2mm !important;
-        padding: 3px 6px !important;
+        margin-top: 2.5mm !important;
+        padding: 4px 8px !important;
         font-size: 0.76rem !important;
         line-height: 1.2 !important;
-        background: #FFFDF0 !important;
-        border: 1px dashed #D4C165 !important;
+        background: #FFF9D2 !important;
+        background-color: #FFF9D2 !important;
+        border: 1.5px dashed #D4C165 !important;
         border-radius: 6px !important;
       }
 
@@ -403,10 +408,12 @@
 
       .notes-box-empty {
         display: block !important;
-        padding: 3px 6px !important;
-        margin-top: 2mm !important;
-        background: #FFFDF0 !important;
-        border: 1px dashed #D4C165 !important;
+        padding: 4px 8px !important;
+        margin-top: 2.5mm !important;
+        background: #FFF9D2 !important;
+        background-color: #FFF9D2 !important;
+        border: 1.5px dashed #D4C165 !important;
+        border-radius: 6px !important;
       }
 
       .notes-blank-lines {
@@ -429,9 +436,9 @@
       /* 5. SEITENZAHL FEST IN DEN ECKEN DES BLATTES VERANKERT */
       .page-footer {
         position: absolute !important;
-        bottom: 7mm !important;
-        left: 12mm !important;
-        right: 12mm !important;
+        bottom: 6mm !important;
+        left: 14mm !important;
+        right: 14mm !important;
         width: auto !important;
         display: block !important;
         border: none !important;
@@ -453,7 +460,7 @@
         font-family: var(--font-hand), 'Caveat', cursive !important;
         font-size: 1.25rem !important;
         font-weight: 700 !important;
-        color: var(--tannengruen) !important;
+        color: #1E4D3B !important;
         display: inline-block !important;
       }