From 8c93099d915cafb9077dd268c27d3f86bfcab2ad Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Sat, 18 Apr 2026 14:34:01 +0200
Subject: [PATCH] fix(recipe): Header-Bild auf allen Viewports max 30vh
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die Mobile-Only-Regel führte auf Desktop zu riesigen 16:10-Covers
(auf 1440px-Breite fast 900px hoch). Jetzt gilt der 30vh-Deckel
überall — Bild bleibt proportional, Zutaten/Zubereitung bleiben
sichtbar ohne Scroll.

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

diff --git a/src/lib/components/RecipeView.svelte b/src/lib/components/RecipeView.svelte
index 03ad64c..8b5b34a 100644
--- a/src/lib/components/RecipeView.svelte
+++ b/src/lib/components/RecipeView.svelte
@@ -175,16 +175,13 @@
     display: block;
     width: 100%;
     aspect-ratio: 16 / 10;
+    /* Nie mehr als 30% der Bildschirmhöhe — auf schmalen Screens würde das
+       Bild sonst alles Wichtige wegdrücken, auf breiten Desktops wäre es
+       unverhältnismäßig groß. */
+    max-height: 30vh;
     object-fit: cover;
     background: #eef3ef;
   }
-  /* Mobile: verhindere, dass das Header-Bild einen unverhältnismäßig
-     großen Teil des Viewports füllt und alles Wichtige wegdrückt. */
-  @media (max-width: 820px) {
-    .cover {
-      max-height: 30vh;
-    }
-  }
   .hdr-body {
     padding: 1rem 1rem 0.25rem;
   }