From a8fdb8c3f9fd463ded31026200cc3c6465f1c30b Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 11:00:48 +0200
Subject: [PATCH] feat(recipe): Zwei-Spalten-Layout ab Tablet-Querformat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Auf Viewports >=820px (Tablets im Querformat, Desktop) werden Zutaten
und Zubereitung nebeneinander angezeigt statt per Tab gewechselt. Der
Nutzer sieht beides gleichzeitig und nutzt die volle Display-Breite.

- Tabs bleiben für <820px (Smartphones + Tablet-Hochkant), dort schalten
  sie weiterhin zwischen den Panels um.
- Ab 820px: Tabs versteckt, Grid minmax(260px,1fr) 1.6fr. Zutaten links
  sticky top:1rem mit max-height 100vh-2rem, damit die Liste beim
  Scrollen der Zubereitung sichtbar bleibt.
- Main-Container max-width 760px → 1040px erhöht, damit auf großen
  Screens überhaupt Platz für zwei Spalten bleibt. Andere Listen-
  Ansichten (Cards, Index) nutzen den Zugewinn automatisch.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/lib/components/RecipeView.svelte | 48 +++++++++++++++++++++++++---
 src/routes/+layout.svelte            |  4 +--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
index 56384c5..26de28d 100644
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -117,8 +117,12 @@
     </button>
   </div>
 
-  {#if tab === 'ing'}
-    <section class="ingredients" role="tabpanel">
+  <div class="panes">
+    <section
+      class="ingredients"
+      role="tabpanel"
+      class:hidden-mobile={tab !== 'ing'}
+    >
       <div class="servings">
         <button class="srv-btn" aria-label="Weniger" onclick={decr}>−</button>
         <div class="srv-value">
@@ -146,15 +150,18 @@
         {/each}
       </ul>
     </section>
-  {:else}
-    <section class="steps" role="tabpanel">
+    <section
+      class="steps"
+      role="tabpanel"
+      class:hidden-mobile={tab !== 'prep'}
+    >
       <ol>
         {#each recipe.steps as step (step.position)}
           <li>{step.text}</li>
         {/each}
       </ol>
     </section>
-  {/if}
+  </div>
 </article>
 
 <style>
@@ -326,4 +333,35 @@
     font-weight: 700;
     font-size: 0.95rem;
   }
+
+  .panes {
+    display: block;
+  }
+  .hidden-mobile {
+    display: none;
+  }
+
+  /* Querformat-Tablets und Desktop: Zutaten + Zubereitung nebeneinander,
+     Tabs ausgeblendet. Zutaten sticky, damit sie beim Scrollen der
+     Zubereitung oben bleiben. */
+  @media (min-width: 820px) {
+    .tabs {
+      display: none;
+    }
+    .panes {
+      display: grid;
+      grid-template-columns: minmax(260px, 1fr) 1.6fr;
+      gap: 2rem;
+      align-items: start;
+    }
+    .hidden-mobile {
+      display: block;
+    }
+    .ingredients {
+      position: sticky;
+      top: 1rem;
+      max-height: calc(100vh - 2rem);
+      overflow-y: auto;
+    }
+  }
 </style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d7dac99..0e37219 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -392,7 +392,7 @@
     border-bottom: 1px solid #e4eae7;
   }
   .bar-inner {
-    max-width: 760px;
+    max-width: 1040px;
     margin: 0 auto;
     display: flex;
     align-items: center;
@@ -618,7 +618,7 @@
   }
   main {
     padding: 0 1rem 4rem;
-    max-width: 760px;
+    max-width: 1040px;
     margin: 0 auto;
   }
   @media (max-width: 520px) {