refactor: reduce DOM nesting and simplify templates

- Remove nested .wrapper div in recipe page using CSS Grid with full-bleed background
- Consolidate multiplier forms in IngredientsPage into single form
- Simplify fermentation conditionals in InstructionsPage with optional chaining
- Use conditional rendering instead of visibility wrapper in Search
- Remove unnecessary dialog wrapper in TitleImgParallax

src/lib/components/IngredientsPage.svelte

@@ -400,24 +400,16 @@ font-family: sans-serif;
 {/if}
 
 <h3>{labels.adjustAmount}</h3>
-<div class=multipliers>
-	{#each multiplierOptions as opt}
-		<form method="get" style="display: inline;">
-			<input type="hidden" name="multiplier" value={opt.value} />
-			{#each Array.from(currentParams.entries()) as [key, value]}
-				{#if key !== 'multiplier'}
-					<input type="hidden" name={key} {value} />
-				{/if}
-			{/each}
-			<button type="submit" class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
-		</form>
+<form method="get" class="multipliers">
+	{#each Array.from(currentParams.entries()) as [key, value]}
+		{#if key !== 'multiplier'}
+			<input type="hidden" name={key} {value} />
+		{/if}
 	{/each}
-	<form method="get" style="display: inline;" class="custom-multiplier g-pill g-btn-light g-interactive" onsubmit={handleCustomSubmit}>
-		{#each Array.from(currentParams.entries()) as [key, value]}
-			{#if key !== 'multiplier'}
-				<input type="hidden" name={key} {value} />
-			{/if}
-		{/each}
+	{#each multiplierOptions as opt}
+		<button type="submit" name="multiplier" value={opt.value} class="g-pill g-btn-light g-interactive" class:selected={multiplier === opt.value} onclick={(e) => handleMultiplierClick(e, opt.value)}>{@html opt.label}</button>
+	{/each}
+	<span class="custom-multiplier g-pill g-btn-light g-interactive">
 		<input
 			type="text"
 			name="multiplier"
@@ -429,8 +421,8 @@ font-family: sans-serif;
 			oninput={handleCustomInput}
 		/>
 		<button type="submit" class="custom-button">x</button>
-	</form>
-</div>
+	</span>
+</form>
 
 <h2>{labels.ingredients}</h2>
 {#each flattenedIngredients as list, listIndex}

src/lib/components/InstructionsPage.svelte

@@ -162,17 +162,15 @@ h3{
 {/if}
 
 
-{#if data.fermentation}
-	{#if data.fermentation.bulk}
-		<div><h3>{labels.bulkFermentation}</h3>{data.fermentation.bulk}</div>
-	{/if}
-
-	{#if data.fermentation.final}
-		<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
-	{/if}
+{#if data.fermentation?.bulk}
+	<div><h3>{labels.bulkFermentation}</h3>{data.fermentation.bulk}</div>
 {/if}
 
-{#if data.baking.temperature}
+{#if data.fermentation?.final}
+	<div><h3>{labels.finalProof}</h3> {data.fermentation.final}</div>
+{/if}
+
+{#if data.baking?.temperature}
 <div><h3>{labels.baking}</h3> {data.baking.length} {labels.at} {data.baking.temperature} °C {data.baking.mode}</div>
 {/if}
 

src/lib/components/Search.svelte

@@ -387,7 +387,7 @@ scale: 0.8 0.8;
   </button>
 </form>
 
-<div style="visibility: {showFilters ? 'visible' : 'hidden'}; pointer-events: {showFilters ? 'auto' : 'none'};">
+{#if showFilters}
   <FilterPanel
     availableCategories={categories}
     {availableTags}
@@ -408,4 +408,4 @@ scale: 0.8 0.8;
     onFavoritesToggle={handleFavoritesToggle}
     onLogicModeToggle={handleLogicModeToggle}
   />
-</div>
+{/if}

src/lib/components/TitleImgParallax.svelte

@@ -110,8 +110,8 @@
 	background-size: cover;
 	background-position: 50% 20%;
 	position: absolute;
-        width: min(1000px, 100dvw);
-  	height: max(60dvh,600px);
+	width: min(1000px, 100dvw);
+	height: max(60dvh,600px);
 	z-index: -2;
 }
 .placeholder_blur{
@@ -193,10 +193,8 @@ dialog button{
 </section>
 
 <dialog id=img_carousel>
-	<div>
 	<img class:unblur={isloaded} {src} {alt}>
-		<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
-	<Cross fill=white width=2rem height=2rem></Cross>
-		</button>
-	</div>
+	<button class=action_button onkeydown={(event) => do_on_key(event, 'Enter', false, close_dialog_img)} onclick={close_dialog_img}>
+		<Cross fill=white width=2rem height=2rem></Cross>
+	</button>
 </dialog>