Make cover full bleed, TOC single column readable, and unify header with clean kebab menu on desktop

app/main.py

@@ -400,9 +400,9 @@ async def cookbook_view(
 
     # --- Seitenzahlen & Inhaltsverzeichnis (TOC) berechnen ---
     # Seite 1: Cover
-    # TOC: 1 Seite (bis ca. 55 Rezepte passt alles wunderbar auf 1 A4-Seite in 2 Spalten), 2 Seiten erst bei sehr vielen Rezepten
+    # TOC: Bei einzeiligem Inhaltsverzeichnis (1 Spalte) passen ca. 26 Rezepte + Kapitelheader ideal auf 1 Seite
     total_display_recipes = len(all_recipes)
-    toc_page_count = 2 if total_display_recipes > 55 else (1 if total_display_recipes > 0 else 0)
+    toc_page_count = 2 if total_display_recipes > 26 else (1 if total_display_recipes > 0 else 0)
     current_page = 1 + toc_page_count + 1
 
     display_chapters_data = []

app/static/cookbook.css

@@ -1487,13 +1487,11 @@
 
 /* --- Mobile Navigation: 3-Punkte (Kebab) Menü --- */
 .desktop-nav-actions {
-  display: flex;
+  display: none !important;
-  align-items: center;
-  gap: 10px;
 }
 
 .mobile-nav-wrapper {
-  display: none;
+  display: block !important;
   position: relative;
 }
 
@@ -1726,8 +1724,9 @@
 }
 
 .toc-columns {
-  columns: 2;
+  columns: 1;
-  column-gap: 10mm;
+  column-count: 1;
+  column-gap: 0;
   flex: 1;
 }
 
@@ -1797,7 +1796,7 @@
 }
 
 .toc-rec-title {
-  max-width: 75%;
+  max-width: 84%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

app/templates/cookbook.html

@@ -11,7 +11,7 @@
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
   <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
   <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
-  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.6">
+  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.7">
   <style id="print-engine-styles">
     /* Auf dem Bildschirm: Cover, Inhaltsverzeichnis und Seitenzahlen ausblenden */
     @media screen {
@@ -119,15 +119,28 @@
 
       /* 1. COVER */
       .page.cover {
-        display: block !important;
+        display: flex !important;
-        padding: 50mm 14mm 16mm 14mm !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        justify-content: center !important;
+        width: 210mm !important;
+        min-width: 210mm !important;
+        max-width: 210mm !important;
+        height: 297mm !important;
+        min-height: 297mm !important;
+        max-height: 297mm !important;
+        margin: 0 !important;
+        padding: 0 !important;
         text-align: center !important;
         background-color: var(--creme, #FAF6F0) !important;
         background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='0 0 200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 5 0 Q 15 200 0 400 T 10 800 L 20 800 Q 10 600 25 400 T 15 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 35 0 Q 25 250 40 500 T 30 800 L 55 800 Q 65 500 45 250 T 50 0 Z' fill='%231E4D3B' opacity='0.85'/%3E%3Cpath d='M 70 0 Q 80 300 65 600 T 75 800 L 85 800 Q 75 500 90 300 T 80 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 105 0 Q 95 200 110 400 T 100 800 L 125 800 Q 135 600 120 400 T 125 0 Z' fill='%231E4D3B' opacity='0.8'/%3E%3Cpath d='M 140 0 Q 150 250 135 500 T 145 800 L 155 800 Q 145 500 160 250 T 150 0 Z' fill='%231E4D3B' opacity='0.9'/%3E%3Cpath d='M 175 0 Q 165 300 180 600 T 170 800 L 195 800 Q 205 500 185 300 T 190 0 Z' fill='%231E4D3B' opacity='0.85'/%3E%3C/svg%3E") !important;
         background-size: 100% 100% !important;
+        background-position: center center !important;
         background-repeat: no-repeat !important;
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
+        page-break-before: avoid !important;
+        break-before: avoid !important;
         page-break-after: always !important;
         break-after: page !important;
         page-break-inside: avoid !important;
@@ -178,8 +191,8 @@
 
       .toc-columns {
         display: block !important;
-        column-count: 2 !important;
+        column-count: 1 !important;
-        column-gap: 8mm !important;
+        columns: 1 !important;
         margin-bottom: 4mm !important;
       }
 
@@ -190,9 +203,22 @@
       }
 
       .toc-recipe-item {
-        margin-bottom: 2px !important;
+        margin-bottom: 2mm !important;
-        font-size: 0.82rem !important;
+        font-size: 0.85rem !important;
-        line-height: 1.22 !important;
+        line-height: 1.25 !important;
+      }
+
+      .toc-recipe-link {
+        display: flex !important;
+        align-items: baseline !important;
+        width: 100% !important;
+      }
+
+      .toc-rec-title {
+        max-width: 84% !important;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        white-space: nowrap !important;
       }
 
       /* 3. KAPITEL-TRENNSEITEN */

app/templates/recipe_detail.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>{{ recipe.title }} – Mein Kochbuch</title>
-  <link rel="stylesheet" href="/static/cookbook.css?v=4.4">
+  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.7">
   <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>">
 </head>
 <body class="cookbook-body">

app/templates/shopping_list.html

@@ -12,7 +12,7 @@
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
   <link rel="alternate icon" type="image/x-icon" href="/favicon.ico">
   <link rel="apple-touch-icon" href="/static/apple-touch-icon.png">
-  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.5">
+  <link rel="stylesheet" href="/static/cookbook.css?v=4.6.7">
   <style>
     :root {
       --shop-green: var(--tannengruen, #1E4D3B);